TCUデジコンpg班で発表したものです

1. ケー
デジタルコンテンツ研究会
作品発表会
～WebpackとReactで作るGoogle Chrome 拡張～とReact

2. はじめに
デジタルコンコテンツ研究会/制作発表会2
THANKS to
とReact

3. はじめに
デジタルコンコテンツ研究会/制作発表会3
Respect for
KanColleWidget
by @otiai10https://github.com/otiai10/kanColleWidget

4. 自己紹介
HN:ケー / ( EN: ke9000 )
Twitter: @ke_odakyu9000
元々は鉄道系でアカウント作成
 アニメにはまりだんだんそっちがメインに
 PCとかプログラミングネタもたまに(Illustrator:@meppule)
こんなジャンル向けでtwitterやってます↓
・鉄道 ・航空機 ・旅行 ・プログラミング
・PC ・深夜アニメ ・アイドルマスター
赤城みりあ 橘ありす
デジタルコンコテンツ研究会/制作発表会4

5. 過去につくったものとか
https://qiita.com/ke9000/items/cffbb7bdab4a2606fc10・Python + Twitter User Stream API
・THE IDOL M@STER Shiny Colors を小窓でプレイできる
chrome拡張(仮名：Shiny_Window)
・google
chrome API
+ JavaScript
https://github.com/
ke9000/shiny_window
デジタルコンコテンツ研究会/制作発表会5

6. Shiny_windowの簡単な仕様解説
Chrome APIの
・chrome.window.create
・chrome.tabs.query
・chrome.runtime.sendMessage
・chrome.runtime.onMessage.addListener
・chrome.tabs.captureVisibleTab
あとは普通のjavascript(buttonとか)
デジタルコンコテンツ研究会/制作発表会6

7. 概要
Chrome Extension: Shiny Window
・WebpackとReactとは
・昨日までにつく(りたか)った機能(ﾀﾞｼﾞｬﾚ)
・まとめと質疑応答
デジタルコンコテンツ研究会/制作発表会7

8. 新生:Shiny Window
デジタルコンコテンツ研究会/制作発表会8
Ver.0.0.1では・・・

9. 新生:Shiny Window
デジタルコンコテンツ研究会/制作発表会9
時代はNodeJS
らしいので・・・全部作り直しました！
⇒ただ、NodeJSには便利なモジュールがいっぱいある・・・
ならばChrome拡張ごとNodeJSで作れるようにすればいいのでは・・・・？

10. WebPackとは
デジタルコンコテンツ研究会/制作発表会10

11. Chrome拡張とWebpack
デジタルコンコテンツ研究会/制作発表会11
Chrome拡張宣言
Manifest.js 作りたい拡張用
の画面
Popup.html
拡張用の画面
のスクリプト
Popup.js
-CHROME API
で画面を作るetc...
特定ページで動
くスクリプト
Content.js
Dist Folder
Webpackで
まとめて生成

12. モジュール化・・・
デジタルコンコテンツ研究会/制作発表会12
・起動⇒サイズごとに
・スクリーンショット
・ミュート
・コピー
・ダウンロード
１つのjsに書くとどれがどれだかわからない
けどバラバラにつくるとそれもわからなくなる！
バラバラに書いてもまとめてくれるWebpack最高！
これで一つのchrome拡張つくれちゃう！

13. React…なんだこれ！？
デジタルコンコテンツ研究会/制作発表会13

14. Reactとwebpack
デジタルコンコテンツ研究会/制作発表会14
Reactとwebpackを一緒に使うと・・・・
1.細かく機能ごとにUIとスクリプトを作れる
2.UIをJavaScript上で書ける(仮想DOM)
≒HTMLサイドを気にせず作れる
3.出力時にはきれいに一つにしてくれる

15. 作った機能とこれから
デジタルコンコテンツ研究会/制作発表会15
できたもの：
大小サイズそれぞれの起動
スクリーンショット撮影
SSダウンロード
これから：
クリップボードにコピー
(HTML要素しかコピーできなくて困ってます・・・・)
ミュート機能
UIもっといい感じの
(material-uiを使う予定)
Twitter投稿
通知機能
あとはメモとか・・・・

16. まとめ
デジタルコンコテンツ研究会/制作発表会16
・新しいJavaScriptは機能がおおくてﾑｽﾞｶｼｲ
でも楽しい！
・いままでのHTML主体から
JavaScript主体のプログラム！すごい！
・Chrome拡張もwebpackでぱぱっと作れちゃう！
・これから色んな機能ふやして公開したい
・授業中にゲームすすめるの楽しい
・小宮果穂ちゃんかわいい！
・赤城みりあちゃんもかわいい！
・橘ありすちゃんもかわいい！