今だから始めようChromeアプリ/chromeapps_startup

今更？今だから？　始めよう!! 今更？今だから？　始めよう!! Chromeアプリ Chromeアプリ Presented by Daru @2018 Presented by
Daru @2018 みなさんよろしくです！

ども、 (^-^)/ ども、 (^-^)/ Daru Daruですです ……あんた、いま最高に輝いてるよȶ

2016年8月 2016年8月 Googleは「Chrome」向けに Googleは「Chrome」向けに「Chromeウェブストア」で配布している「Chromeウェブストア」で配布している「Chromeアプリ」の提供を2018年までに「Chromeアプリ」の提供を2018年までに終了すると発表した。終了すると発表した。
(T.T)

2017年12月 2017年12月 Googleは「Chromeウェブストア」から Googleは「Chromeウェブストア」から "アプリ"セクションを削除した。 "アプリ"セクションを削除した。｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡

一応… 一応… 例外として例外として Chrome OS Chrome OS 環境の場合だけは、環境の場合だけは、
当面は当面はChromeアプリのサポートを継続します。 Chromeアプリのサポートを継続します。首の皮一枚ね…

ちまたのChromebookユーザーの声… ちまたのChromebookユーザーの声… Androidアプリがあるし、いんじゃね ?! Androidアプリがあるし、いんじゃね ?! Google I/O 2018後のデベロッパーの声… Google
I/O 2018後のデベロッパーの声… Linuxアプリがくるし、いんじゃね ?! Linuxアプリがくるし、いんじゃね ?! まあ、そう言うよね…

でも、おいらは、でも、おいらは、 Chromebox Chromeboxユーザーユーザーなんだよぉぉ!! なんだよぉぉ!! ご愁傷様ですぅ…

「Chromeアプリ」はオワコン… (T_T) 「Chromeアプリ」はオワコン… (T_T) でも、Chromeアプリって良いとこたくさんあるんだけどなぁでも、Chromeアプリって良いとこたくさんあるんだけどなぁ基本javascriptだから手軽だし、基本javascriptだから手軽だし、便利なライブラリいっぱいあるし、便利なライブラリいっぱいあるし、
PWAと違ってサーバいらないし、 PWAと違ってサーバいらないし、ネイティブAPIだってネイティブAPIだってマニアックなものがそこそこあるしｗマニアックなものがそこそこあるしｗいいとこいっぱいあるんだよねぇ…

そんなこんなでそんなこんなでメンテされないメンテされない既存のChromeアプリ既存のChromeアプリ見つからない見つからない撤退のChromeアプリ撤退のChromeアプリ増えない増えない新規のChromeアプリ
新規のChromeアプリ …… …… 助けてぇ♡ ド◦えも〜ん

ないんだったら作ればいいのよ！ないんだったら作ればいいのよ！ハ◦ヒ姐さん！そこにシビれる! あこがれるゥ!

そう、言うなればそう、言うなれば往年の往年の8bit BASIC機 8bit BASIC機か！か！かつてのかつてのX68000
X68000か！か！はたまたはたまたAmiga Amigaか！か！年齢がバレバレですよｗ

やっぱ、やっぱ、オワコン状況じゃんｗオワコン状況じゃんｗですよねぇ～

愚痴が長引いてしまいましたが… 愚痴が長引いてしまいましたが… とりあえず Chrome OS のユーザーさんであればとりあえず Chrome OS のユーザーさんであれば
テキストエディタテキストエディタがあればがあれば Chromeアプリ作りを始められます Chromeアプリ作りを始められますお手軽なんで御託を並べず Let's Try!

とりあえずのファイル構成はこんな感じで、Web制作と似たようなもんですとりあえずのファイル構成はこんな感じで、Web制作と似たようなもんです今回はローカルフォルダ (ダウンロード)につくってね！

manifest.json manifest.json Chrome固有の機能や制限の設定集みたいなものです Chrome固有の機能や制限の設定集みたいなものです下記のとおり、まずは、ここから background.js を呼び出してます下記のとおり、まずは、ここから background.js を呼び出してます
{ manifest_version :2, name : ChromeAppPrj , version :"0.0.1", icons :{ "128": assets/icon_128.png }, app :{ background :{ scripts :[ background.js ] } }, permissions :[ storage ] } アイコン用に 128x128pxの画像も用意してね

background.js background.js Webページの裏で動いているアプリの土台みたいなものです Webページの裏で動いているアプリの土台みたいなものです下記のとおり、次に、ここから index.html を呼び出してます下記のとおり、次に、ここから index.html を呼び出してます
chrome.app.runtime.onLaunched.addListener(function(launchData){ chrome.app.window.create( index.html ,{ id: mainWindow , resizable:true, innerBounds:{ width:800, height:600 } }); }); ここから Window枠をつくるのね

index.html index.html Webページと基本的には同じですただし、直接スクリプトは書けません Webページと基本的には同じですただし、直接スクリプトは書けません下記のとおり、次に、ここから styles.css と main.js
を呼び出してます下記のとおり、次に、ここから styles.css と main.js を呼び出してます <!DOCTYPEhtml> <html> <head> <title>ChromeAppPrj</title> <linkrel= stylesheet href= styles.css > </head> <body> <h1id= greeting ></h1> <scriptsrc= main.js ></script> </body> </html> Htmlならなんとかなるよね?

styles.css styles.css Webページと基本的には同じです Webページと基本的には同じです html{ background-color:white; color:black; } 見た目は大事よ！

main.js main.js Chromeアプリでは .html に直接スクリプトが書けないのでこちらに書きます Chromeアプリでは .html に直接スクリプトが書けないのでこちらに書きます window.onload=function(){ document.querySelector(
#greeting ).innerText= Hello,World!Itis'+newDate(); }; Hello, World!はお約束事項です

コードの詳細等については長くなるのでコードの詳細等については長くなるので興味が湧いた人は興味が湧いた人はに聞いてみてくださいに聞いてみてください先人の方の記事がいくつか見つかるはずです… 先人の方の記事がいくつか見つかるはずです… (;^_^A あせあせ
(;^_^A あせあせ Google先生 Google先生他力本願は相変わらずですねぇｗ

Chromeアプリ(ソースコード)を動かしてみよう！ Chromeアプリ(ソースコード)を動かしてみよう！ Chrome単体でも出来ますが、以下のアプリを使用するのがいいでしょう Chrome単体でも出来ますが、以下のアプリを使用するのがいいでしょうただし、ただし、GoogleDrive非対応 GoogleDrive非対応なのがちょっと残念… なのがちょっと残念… Chrome Apps
& Extensions Developer Tool Chrome Apps & Extensions Developer Tool Googleさん、 GoogleDrive対応お願いします m( )m

Load unpackedボタンをクリックして Load unpackedボタンをクリックして先の事例のChromeAppPrjフォルダを登録すればOK 先の事例のChromeAppPrjフォルダを登録すればOK 登録後にソースを修正した場合はReloadをクリック登録後にソースを修正した場合はReloadをクリックポチッとな♪

登録が済んだら普通に使えます登録が済んだら普通に使えますお手軽♪ お手軽ぅ

登録できない時はChromeの拡張機能設定が登録できない時はChromeの拡張機能設定がデベロッパーモードになっているかデベロッパーモードになっているか確認してみてください確認してみてください慌てず確認！ Ȳヨシ！

デバッグは右クリックでメニューを出して検証をクリックデバッグは右クリックでメニューを出して検証をクリック（内容によってはバックグラウンドページの検証）（内容によってはバックグラウンドページの検証）天が呼ぶ！地が呼ぶ！人が呼ぶ！ ȇを倒せと俺を呼ぶ！

そうすればそうすれば Chrome Dev Tools Chrome Dev Tools が使えますが使えます
＼(^O^)／＼(^O^)／ある意味での最強デバッガが OSに標準装備!! ということです

ふたたび… ふたたび… Chrome Dev Tools の詳細等については長くなるので Chrome Dev Tools の詳細等については長くなるので
興味が湧いた人は興味が湧いた人はに聞いてみてくださいに聞いてみてください (;^_^A あせあせ (;^_^A あせあせ Google先生 Google先生マジ天丼！

ちなみに、ちなみに、いちから作り始めるのも勿論良いですが、いちから作り始めるのも勿論良いですが、既存の小さめな Open Source アプリを既存の小さめな Open
Source アプリを自分好みに微修正する自分好みに微修正することから始めるのがことから始めるのがおすすめです＾＾おすすめです＾＾見た目が変わるだけでもテンションUp!ͷ

と、まあ、自分の環境改善として、こんな感じでと、まあ、自分の環境改善として、こんな感じで Chromeアプリをいじって遊んで(苦しんで？ｗ)います Chromeアプリをいじって遊んで(苦しんで？ｗ)います一部は一部はでおすそわけ配布してますのででおすそわけ配布してますので好みが合えばお使いください (｡･ω･｡)
好みが合えばお使いください (｡･ω･｡) Webストア Webストア評価されると地味に嬉しいみたいよ？ｗ

さあ、これで、さあ、これで、あなたもｽｰﾊﾟｰﾊｶｰだ!! あなたもｽｰﾊﾟｰﾊｶｰだ!! （Chromeアプリ限定…）（Chromeアプリ限定…）ラボメン募集中？ですｗラボメン募集中？ですｗみんなも Chromeアプリを
応援してね♡

おまけおまけ Windowsがメインな人は Windowsがメインな人はを使えばを使えば Chromeアプリ(ソースコード)が Chromeアプリ(ソースコード)がそのまま動くよ！そのまま動くよ！
NW.js NW.js Ｎｅｘｔコ◦ン's ヒント☆

今だから始めようChromeアプリ/chromeapps_startup

今だから始めようChromeアプリ/chromeapps_startup

Daru

More Decks by Daru

Other Decks in Programming

Featured

Transcript

今更？今だから？　始めよう!! 今更？今だから？　始めよう!! Chromeアプリ Chromeアプリ Presented by Daru @2018 Presented by

ども、 (^-^)/ ども、 (^-^)/ Daru Daruですです ……あんた、いま最高に輝いてるよȶ

2017年12月 2017年12月 Googleは「Chromeウェブストア」から Googleは「Chromeウェブストア」から "アプリ"セクションを削除した。 "アプリ"セクションを削除した。｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡

一応… 一応… 例外として例外として Chrome OS Chrome OS 環境の場合だけは、環境の場合だけは、

ちまたのChromebookユーザーの声… ちまたのChromebookユーザーの声… Androidアプリがあるし、いんじゃね ?! Androidアプリがあるし、いんじゃね ?! Google I/O 2018後のデベロッパーの声… Google

でも、おいらは、でも、おいらは、 Chromebox Chromeboxユーザーユーザーなんだよぉぉ!! なんだよぉぉ!! ご愁傷様ですぅ…

そんなこんなでそんなこんなでメンテされないメンテされない既存のChromeアプリ既存のChromeアプリ見つからない見つからない撤退のChromeアプリ撤退のChromeアプリ増えない増えない新規のChromeアプリ

ないんだったら作ればいいのよ！ないんだったら作ればいいのよ！ハ◦ヒ姐さん！そこにシビれる! あこがれるゥ!

そう、言うなればそう、言うなれば往年の往年の8bit BASIC機 8bit BASIC機か！か！かつてのかつてのX68000

やっぱ、やっぱ、オワコン状況じゃんｗオワコン状況じゃんｗですよねぇ～

愚痴が長引いてしまいましたが… 愚痴が長引いてしまいましたが… とりあえず Chrome OS のユーザーさんであればとりあえず Chrome OS のユーザーさんであれば

とりあえずのファイル構成はこんな感じで、Web制作と似たようなもんですとりあえずのファイル構成はこんな感じで、Web制作と似たようなもんです今回はローカルフォルダ (ダウンロード)につくってね！

index.html index.html Webページと基本的には同じですただし、直接スクリプトは書けません Webページと基本的には同じですただし、直接スクリプトは書けません下記のとおり、次に、ここから styles.css と main.js

styles.css styles.css Webページと基本的には同じです Webページと基本的には同じです html{ background-color:white; color:black; } 見た目は大事よ！

main.js main.js Chromeアプリでは .html に直接スクリプトが書けないのでこちらに書きます Chromeアプリでは .html に直接スクリプトが書けないのでこちらに書きます window.onload=function(){ document.querySelector(

登録が済んだら普通に使えます登録が済んだら普通に使えますお手軽♪ お手軽ぅ

登録できない時はChromeの拡張機能設定が登録できない時はChromeの拡張機能設定がデベロッパーモードになっているかデベロッパーモードになっているか確認してみてください確認してみてください慌てず確認！ Ȳヨシ！

そうすればそうすれば Chrome Dev Tools Chrome Dev Tools が使えますが使えます

ふたたび… ふたたび… Chrome Dev Tools の詳細等については長くなるので Chrome Dev Tools の詳細等については長くなるので

ちなみに、ちなみに、いちから作り始めるのも勿論良いですが、いちから作り始めるのも勿論良いですが、既存の小さめな Open Source アプリを既存の小さめな Open

さあ、これで、さあ、これで、あなたもｽｰﾊﾟｰﾊｶｰだ!! あなたもｽｰﾊﾟｰﾊｶｰだ!! （Chromeアプリ限定…）（Chromeアプリ限定…）ラボメン募集中？ですｗラボメン募集中？ですｗみんなも Chromeアプリを

おまけおまけ Windowsがメインな人は Windowsがメインな人はを使えばを使えば Chromeアプリ(ソースコード)が Chromeアプリ(ソースコード)がそのまま動くよ！そのまま動くよ！