---
title: カラフル
tags: Templates, Talk
description: View the slide with "Slide Mode".
---
## 講義メモ
<p>
・MAMPのPHPバージョンが7.2.14じゃないとapacheサーバーが起動しない？設定からバージョンを戻す必要あり<br>
・使用するCMS:concrete5<br>
・ダウンロードページ:https://concrete5-japan.org/about/download/<br>
・バージョンは8.5.2を使用<br>

・基本設定とインストール:https://concrete5-japan.org/help/5-7/developer/installation/basic-setup-and-installation<br>
・参考:
https://olein-design.com/blog/install-concrete5-to-local-environment-created-by-mamp
https://blog.design-ism.com/concrete5%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A7%E3%80%8C%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%83%85%E5%A0%B1%E6%8B%A1%E5%BC%B5%E3%80%8D%E3%82%A8%E3%83%A9%E3%83%BC/
https://olein-design.com/blog/install-concrete5-to-local-environment-created-by-mamp
・エラー：Fileinfo Extension Enabledには
現在使っているバージョンに"extension=php_fileinfo.dll" を入れる必要がある

・詳細オプションでタイムゾーンを東京にする
・インストールが終わると下の画像のようになる

<br>

<h2>

~AL2 PHP~

</h2>
<p>
<br>
phpの部分は<?php で書き始めて?>で終わる。

これを入れないとHTML文書
データベースへの入力は
phpmyadmin ->insertからできる
PHPで入出力

</p>

# Unleash the power!

<!-- Put the link to this slide here so people can follow -->
slide: https://hackmd.io/p/template-talk-slide

---

We have a collaborative session

please prepare laptop or smartphone to join!

---

## Who am I?

- Front-end developer
- VSCode :heart:
- I use tabs. :cat:

---

### 70% of our users are developers. Developers :heart: GitHub.

---

{%youtube E8Nj7RwXf0s %}

---

### Usage flow

---

digraph {
  compound=true
  rankdir=RL

  graph [ fontname="Source Sans Pro", fontsize=20 ];
  node [ fontname="Source Sans Pro", fontsize=18];
  edge [ fontname="Source Sans Pro", fontsize=12 ];


  subgraph core {
    c [label="Hackmd-it \ncore"] [shape=box]
  }
  
  c -> sync [ltail=session lhead=session]

  subgraph cluster1 {
     concentrate=true
    a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
    b [label="HackMD Editor"] [shape=box]
    sync [label="sync" shape=plaintext ]
    b -> sync  [dir="both"]
    sync -> a [dir="both"]
    label="An edit session"
  }
}

---

### Architecture of extension

---


---

## Content script

- Bind with each page
- Manipulate DOM
- Add event listeners
- Isolated JavaScript environment
- It doesn't break things

---

# :fork_and_knife:

---

<style>
code.blue {
color: #337AB7 !important;
}
code.orange {
color: #F7A004 !important;
}
</style>

- <code class="orange">onMessage('event')</code>: Register event listener
- <code class="blue">sendMessage('event')</code>: Trigger event

---

# :bulb:

---

- Dead simple API
- Only cares about application logic

---

import * as Channeru from 'channeru'

// setup channel in different page environment, once
const channel = Channeru.create()

---

// in background script
const fakeLogin = async () => true

channel.answer('isLogin', async () => {
  return await fakeLogin()
})

<br>

// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true

---

# :100: :muscle: :tada:

---

### Wrap up

- Cross envornment commnication
- A small library to solve messaging pain
- TypeScript Rocks :tada:

---

### Thank you! :sheep:

You can find me on

- GitHub
- Twitter
- or email me