Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Daru
May 11, 2018

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

今更だけどChromeアプリ始めてみませんか?

Chrome OS Chrome App
Chromebook Chromebox
開発 自作 コーディング Javascript

Daru

May 11, 2018
Tweet

More Decks by Daru

Other Decks in Programming

Transcript

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

    当面は 当面はChromeアプリのサポートを継続します。 Chromeアプリのサポートを継続します。 首の皮 一枚ね…
  2. ちまたのChromebookユーザーの声… ちまたのChromebookユーザーの声… Androidアプリがあるし、いんじゃね ?! Androidアプリがあるし、いんじゃね ?! Google I/O 2018後のデベロッパーの声… Google

    I/O 2018後のデベロッパーの声… Linuxアプリがくるし、いんじゃね ?! Linuxアプリがくるし、いんじゃね ?! まあ、 そう言うよね…
  3. 「Chromeアプリ」はオワコン… (T_T) 「Chromeアプリ」はオワコン… (T_T) でも、Chromeアプリって良いとこたくさんあるんだけどなぁ でも、Chromeアプリって良いとこたくさんあるんだけどなぁ 基本javascriptだから手軽だし、 基本javascriptだから手軽だし、 便利なライブラリいっぱいあるし、 便利なライブラリいっぱいあるし、

    PWAと違ってサーバいらないし、 PWAと違ってサーバいらないし、 ネイティブAPIだって ネイティブAPIだって マニアックなものがそこそこあるしw マニアックなものがそこそこあるしw いいとこ いっぱい あるんだ よねぇ…
  4. そう、言うなれば そう、言うなれば 往年の 往年の8bit BASIC機 8bit BASIC機か! か! かつての かつてのX68000

    X68000か! か! はたまた はたまたAmiga Amigaか! か! 年齢が バレバレ ですよw
  5. 愚痴が長引いてしまいましたが… 愚痴が長引いてしまいましたが… とりあえず Chrome OS のユーザーさんであれば とりあえず Chrome OS のユーザーさんであれば

    テキストエディタ テキストエディタがあれば があれば Chromeアプリ作りを始められます Chromeアプリ作りを始められます お手軽なんで 御託を並べず Let's Try!
  6. 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の 画像も用意してね
  7. 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枠を つくるのね
  8. 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なら なんとか なるよね?
  9. そうすれば そうすれば Chrome Dev Tools Chrome Dev Tools が使えます が使えます

    \(^O^)/ \(^O^)/ ある意味での 最強デバッガが OSに標準装備!! ということです
  10. ふたたび… ふたたび… Chrome Dev Tools の詳細等については長くなるので Chrome Dev Tools の詳細等については長くなるので

    興味が湧いた人は 興味が湧いた人は に聞いてみてください に聞いてみてください (;^_^A あせあせ (;^_^A あせあせ Google先生 Google先生 マジ天丼!
  11. ちなみに、 ちなみに、 いちから作り始めるのも勿論良いですが、 いちから作り始めるのも勿論良いですが、 既存の小さめな Open Source アプリを 既存の小さめな Open

    Source アプリを 自分好みに微修正する 自分好みに微修正することから始めるのが ことから始めるのが おすすめです ^^ おすすめです ^^ 見た目が 変わるだけでも テンションUp!ͷ