2019/2/2のprocessing community day tokyo 2019の発表資料です。 p5jsを拡張機能に召喚する方法のスライドになります！

1. chrome拡張機能で
ブラウザにp5jsを召喚！
processing community day tokyo 2019
ぐるたか＠guru_taka

2. 自己紹介
名前：ぐるたか＠guru_taka
PG歴：スクールでプログラミング学習中。現在、４ヶ月目
p5js：チューターにすすめられ、いつの間にかハマる
生物を表現するのが好きです。
特に魚がお気に入りです！
現在：今はunityばっかやってます(爆)

3. p5jsやってて思ったこと
作って鑑賞したら終わり！って寂しすぎる…

4. ふと思ったこと
ブラウザにp5jsの作品を出せたら
すべて解決じゃん！
でも、そんなことできるの？

5. できました！
拡張機能に保存すれば良いんです(ｷﾘｯ)

6. デモ紹介
・フィッシュマウスストーカー
・四季

7. 布教する一心で
開発方法を紹介します！

8. 開発言語 is simple！
・html
・css
・JavaScript

9. 拡張機能の世界
ブラウザポップアップ

10. それぞれの世界ごとにファイルを作成！
ブラウザポップアップ
pop
up content
script
p５のscriptはここに書く！

11. データのパスも可能！
APIを使えば、データをパスできる！
ブラウザ ポップアップ

12. サンプル：作るもの

13. 全体の流れ
STEP1：div要素をブラウザに配置
STEP2：setupで画面全体にcanvasを配置
STEP3:drawでclear()を忘れずに！
※content_script内で動きます
※p5のライブラリは設定ファイル(manifest.json)で読み込みます

14. STEP1：div要素をブラウザに配
置document.body.insertAdjacentHTML
('afterbegin', '<div id="p5Canvas"></div>')

15. STEP2：canvasをセット
function setup() {
let canvas = createCanvas(windowWidth,
windowHeight)
canvas.parent('p5Canvas')
}

16. STEP3：clear()を入れよう！
・draw()構文にclear()を入れること
背景を透明にしながら上書きできます！
※background(255)にすると、ブラウザがみえない…
こんな感じで背景が白くて見えない…

17. ※cssに書くこと
#p5Canvas {
/* スクロールしてもcanvasを固定するため */
position: fixed;
/* ブラウザのdomより表に出せる */
z-index: 30;
/* caanvasの裏側にあるdomのクリックイベントを有効化するため */
pointer-events: none;
}

18. 拡張機能の読み込み方法

19. 拡張機能の開発方法の詳細
デプロイやデバック、設定ファイルetc…
拙著のQiita記事を参考にして頂ければ幸いです🙇♂️

20. サンプルソース
GitHubにupしているので、お試しくださいませ！
https://github.com/gurutaka/ChromeExtension-p5jsSample

21. 最後に
・みんなで自作したp5js作品をブラウザに召喚しようぜ！！！
・よかったら、twitter＠guru_takaをフォローしてね！
・友達になってください

22. ご清聴、ありがとうございました