Submit Search
Upload
chrome拡張機能で ブラウザにp5jsを召喚!
•
Download as PPTX, PDF
•
1 like
•
1,055 views
T
takaguru
Follow
2019/2/2のprocessing community day tokyo 2019の発表資料です。 p5jsを拡張機能に召喚する方法のスライドになります!
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 22
Download now
Recommended
Bobcat 863 skid steer loader service repair manual sn 514525001 & above
Bobcat 863 skid steer loader service repair manual sn 514525001 & above
fhhsjdkmem
611 a start up
611 a start up
GERARDO SCHEUERMANN
Lemken eur opal 5 parts catalog
Lemken eur opal 5 parts catalog
PartCatalogs Net
Fat Tire Mini bike
Fat Tire Mini bike
zebratwo
The burden of thirst
The burden of thirst
Hadi Hosseini
2015/09/12 第9回G-Study発表資料-XdebugでPHP ScriptのProfileしてみる
2015/09/12 第9回G-Study発表資料-XdebugでPHP ScriptのProfileしてみる
Yuta Hayakawa
ライブコーディング・Androidのライブラリを作ってみよう
ライブコーディング・Androidのライブラリを作ってみよう
Masataka Kono
PHP with Visual Studio
PHP with Visual Studio
Keiichi Kobayashi
Recommended
Bobcat 863 skid steer loader service repair manual sn 514525001 & above
Bobcat 863 skid steer loader service repair manual sn 514525001 & above
fhhsjdkmem
611 a start up
611 a start up
GERARDO SCHEUERMANN
Lemken eur opal 5 parts catalog
Lemken eur opal 5 parts catalog
PartCatalogs Net
Fat Tire Mini bike
Fat Tire Mini bike
zebratwo
The burden of thirst
The burden of thirst
Hadi Hosseini
2015/09/12 第9回G-Study発表資料-XdebugでPHP ScriptのProfileしてみる
2015/09/12 第9回G-Study発表資料-XdebugでPHP ScriptのProfileしてみる
Yuta Hayakawa
ライブコーディング・Androidのライブラリを作ってみよう
ライブコーディング・Androidのライブラリを作ってみよう
Masataka Kono
PHP with Visual Studio
PHP with Visual Studio
Keiichi Kobayashi
パワーポイントを作るときに抑えておきたい色んなところ
パワーポイントを作るときに抑えておきたい色んなところ
mishikawa
こわくないPython
こわくないPython
Katsuya Arai
パーフェクトダッシュボード
パーフェクトダッシュボード
Takashi Hosoya
リモート環境でも社内勉強会(てっくらんち)を運営してよかった!! - Bit valley inside- vol.17-kazuyuki takahashi
リモート環境でも社内勉強会(てっくらんち)を運営してよかった!! - Bit valley inside- vol.17-kazuyuki takahashi
Kazuyuki Takahashi
1回目勉強会の説明
1回目勉強会の説明
Takuya Shishido
スクラム開発に取り組んでみた
スクラム開発に取り組んでみた
yyasuyuki
YAPC::ASIA 2012 LT GaiaX
YAPC::ASIA 2012 LT GaiaX
Kazuyuki Todo
春を先取り!OpsWorksとChef ではじめる恋色コーデ術! #pyfes 2013.03
春を先取り!OpsWorksとChef ではじめる恋色コーデ術! #pyfes 2013.03
Takeshi Komiya
Alternative chef
Alternative chef
Ryuji Tsutsui
WordCampOsaka2012 WordPressあるある
WordCampOsaka2012 WordPressあるある
Takashi Uemura
Rubyist started to learn Groovy - things important to leran new LL
Rubyist started to learn Groovy - things important to leran new LL
Uchio Kondo
Soramame.Block 100行のJavaScriptで ビジュアルプログラミング言語(のフロントエンド)を作ってみた:
Soramame.Block 100行のJavaScriptで ビジュアルプログラミング言語(のフロントエンド)を作ってみた:
Yutaka Kachi
Go 言語を語ってみるか
Go 言語を語ってみるか
Akihiko Matuura
DevOps 研修 初級編
DevOps 研修 初級編
Hiro Fukami
フレームワーク使おうぜ!
フレームワーク使おうぜ!
Takuya Sato
DevOpsって何?
DevOpsって何?
Gosuke Miyashita
Bottle使ってPython学習一緒にはじめませんか?
Bottle使ってPython学習一緒にはじめませんか?
Tatsuya Shinozuka
Sphinxを使って本を書こう #pyconjp 2012
Sphinxを使って本を書こう #pyconjp 2012
Takayuki Shimizukawa
Goで始める言語処理系実装入門
Goで始める言語処理系実装入門
虎の穴 開発室
Windowsにpythonをインストールしてみよう
Windowsにpythonをインストールしてみよう
Kenji NAKAGAKI
More Related Content
Similar to chrome拡張機能で ブラウザにp5jsを召喚!
パワーポイントを作るときに抑えておきたい色んなところ
パワーポイントを作るときに抑えておきたい色んなところ
mishikawa
こわくないPython
こわくないPython
Katsuya Arai
パーフェクトダッシュボード
パーフェクトダッシュボード
Takashi Hosoya
リモート環境でも社内勉強会(てっくらんち)を運営してよかった!! - Bit valley inside- vol.17-kazuyuki takahashi
リモート環境でも社内勉強会(てっくらんち)を運営してよかった!! - Bit valley inside- vol.17-kazuyuki takahashi
Kazuyuki Takahashi
1回目勉強会の説明
1回目勉強会の説明
Takuya Shishido
スクラム開発に取り組んでみた
スクラム開発に取り組んでみた
yyasuyuki
YAPC::ASIA 2012 LT GaiaX
YAPC::ASIA 2012 LT GaiaX
Kazuyuki Todo
春を先取り!OpsWorksとChef ではじめる恋色コーデ術! #pyfes 2013.03
春を先取り!OpsWorksとChef ではじめる恋色コーデ術! #pyfes 2013.03
Takeshi Komiya
Alternative chef
Alternative chef
Ryuji Tsutsui
WordCampOsaka2012 WordPressあるある
WordCampOsaka2012 WordPressあるある
Takashi Uemura
Rubyist started to learn Groovy - things important to leran new LL
Rubyist started to learn Groovy - things important to leran new LL
Uchio Kondo
Soramame.Block 100行のJavaScriptで ビジュアルプログラミング言語(のフロントエンド)を作ってみた:
Soramame.Block 100行のJavaScriptで ビジュアルプログラミング言語(のフロントエンド)を作ってみた:
Yutaka Kachi
Go 言語を語ってみるか
Go 言語を語ってみるか
Akihiko Matuura
DevOps 研修 初級編
DevOps 研修 初級編
Hiro Fukami
フレームワーク使おうぜ!
フレームワーク使おうぜ!
Takuya Sato
DevOpsって何?
DevOpsって何?
Gosuke Miyashita
Bottle使ってPython学習一緒にはじめませんか?
Bottle使ってPython学習一緒にはじめませんか?
Tatsuya Shinozuka
Sphinxを使って本を書こう #pyconjp 2012
Sphinxを使って本を書こう #pyconjp 2012
Takayuki Shimizukawa
Goで始める言語処理系実装入門
Goで始める言語処理系実装入門
虎の穴 開発室
Windowsにpythonをインストールしてみよう
Windowsにpythonをインストールしてみよう
Kenji NAKAGAKI
Similar to chrome拡張機能で ブラウザにp5jsを召喚!
(20)
パワーポイントを作るときに抑えておきたい色んなところ
パワーポイントを作るときに抑えておきたい色んなところ
こわくないPython
こわくないPython
パーフェクトダッシュボード
パーフェクトダッシュボード
リモート環境でも社内勉強会(てっくらんち)を運営してよかった!! - Bit valley inside- vol.17-kazuyuki takahashi
リモート環境でも社内勉強会(てっくらんち)を運営してよかった!! - Bit valley inside- vol.17-kazuyuki takahashi
1回目勉強会の説明
1回目勉強会の説明
スクラム開発に取り組んでみた
スクラム開発に取り組んでみた
YAPC::ASIA 2012 LT GaiaX
YAPC::ASIA 2012 LT GaiaX
春を先取り!OpsWorksとChef ではじめる恋色コーデ術! #pyfes 2013.03
春を先取り!OpsWorksとChef ではじめる恋色コーデ術! #pyfes 2013.03
Alternative chef
Alternative chef
WordCampOsaka2012 WordPressあるある
WordCampOsaka2012 WordPressあるある
Rubyist started to learn Groovy - things important to leran new LL
Rubyist started to learn Groovy - things important to leran new LL
Soramame.Block 100行のJavaScriptで ビジュアルプログラミング言語(のフロントエンド)を作ってみた:
Soramame.Block 100行のJavaScriptで ビジュアルプログラミング言語(のフロントエンド)を作ってみた:
Go 言語を語ってみるか
Go 言語を語ってみるか
DevOps 研修 初級編
DevOps 研修 初級編
フレームワーク使おうぜ!
フレームワーク使おうぜ!
DevOpsって何?
DevOpsって何?
Bottle使ってPython学習一緒にはじめませんか?
Bottle使ってPython学習一緒にはじめませんか?
Sphinxを使って本を書こう #pyconjp 2012
Sphinxを使って本を書こう #pyconjp 2012
Goで始める言語処理系実装入門
Goで始める言語処理系実装入門
Windowsにpythonをインストールしてみよう
Windowsにpythonをインストールしてみよう
chrome拡張機能で ブラウザにp5jsを召喚!
1.
chrome拡張機能で ブラウザにp5jsを召喚! processing community day
tokyo 2019 ぐるたか@guru_taka
2.
自己紹介 名前:ぐるたか@guru_taka PG歴:スクールでプログラミング学習中。現在、4ヶ月目 p5js:チューターにすすめられ、いつの間にかハマる 生物を表現するのが好きです。 特に魚がお気に入りです! 現在:今はunityばっかやってます(爆)
3.
p5jsやってて思ったこと 作って鑑賞したら終わり!って寂しすぎる…
4.
ふと思ったこと ブラウザにp5jsの作品を出せたら すべて解決じゃん! でも、そんなことできるの?
5.
できました! 拡張機能に保存すれば良いんです(キリッ)
6.
デモ紹介 ・フィッシュマウスストーカー ・四季
7.
布教する一心で 開発方法を紹介します!
8.
開発言語 is simple! ・html ・css ・JavaScript
9.
拡張機能の世界 ブラウザポップアップ
10.
それぞれの世界ごとにファイルを作成! ブラウザポップアップ pop up content script p5の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.
ご清聴、ありがとうございました
Download now