Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
今だから始めようChromeアプリ/chromeapps_startup
Search
Daru
May 11, 2018
Programming
0
530
今だから始めようChromeアプリ/chromeapps_startup
今更だけどChromeアプリ始めてみませんか?
Chrome OS Chrome App
Chromebook Chromebox
開発 自作 コーディング Javascript
Daru
May 11, 2018
Tweet
Share
More Decks by Daru
See All by Daru
Caret Mod 簡易ヘルプ/caret-mod-tiny-help
daru
0
21k
MadoRemix マスコット一言コメント表示機能で躓いたこと
daru
0
360
MadoRemixのスライドサンプル
daru
0
490
Other Decks in Programming
See All in Programming
みんなでプロポーザルを書いてみた
yuriko1211
0
280
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
360
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
180
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
210
Vapor Revolution
kazupon
1
170
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Facilitating Awesome Meetings
lara
50
6.1k
A better future with KSS
kneath
238
17k
We Have a Design System, Now What?
morganepeng
50
7.2k
4 Signs Your Business is Dying
shpigford
180
21k
How STYLIGHT went responsive
nonsquared
95
5.2k
Gamification - CAS2011
davidbonilla
80
5k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Transcript
今更?今だから? 始めよう!! 今更?今だから? 始めよう!! 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だって マニアックなものがそこそこあるしw マニアックなものがそこそこあるしw いいとこ いっぱい あるんだ よねぇ…
そんなこんなで そんなこんなで メンテされない メンテされない既存のChromeアプリ 既存のChromeアプリ 見つからない 見つからない撤退のChromeアプリ 撤退のChromeアプリ 増えない 増えない新規のChromeアプリ
新規のChromeアプリ …… …… 助けてぇ♡ ド◦えも〜ん
ないんだったら作ればいいのよ! ないんだったら作ればいいのよ! ハ◦ヒ姐さん! そこにシビれる! あこがれるゥ!
そう、言うなれば そう、言うなれば 往年の 往年の8bit BASIC機 8bit BASIC機か! か! かつての かつてのX68000
X68000か! か! はたまた はたまたAmiga Amigaか! か! 年齢が バレバレ ですよw
やっぱ、 やっぱ、 オワコン状況じゃんw オワコン状況じゃんw ですよねぇ~
愚痴が長引いてしまいましたが… 愚痴が長引いてしまいましたが… とりあえず 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先生 他力本願は 相変わらず ですねぇw
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アプリをいじって遊んで(苦しんで?w)います Chromeアプリをいじって遊んで(苦しんで?w)います 一部は 一部は でおすそわけ配布してますので でおすそわけ配布してますので 好みが合えばお使いください (。・ω・。)
好みが合えばお使いください (。・ω・。) Webストア Webストア 評価されると 地味に嬉しい みたいよ?w
さあ、これで、 さあ、これで、 あなたもスーパーハカーだ!! あなたもスーパーハカーだ!! (Chromeアプリ限定…) (Chromeアプリ限定…) ラボメン募集中?ですw ラボメン募集中?ですw みんなも Chromeアプリを
応援してね♡
おまけ おまけ Windowsがメインな人は Windowsがメインな人は を使えば を使えば Chromeアプリ(ソースコード)が Chromeアプリ(ソースコード)が そのまま動くよ! そのまま動くよ!
NW.js NW.js Next コ◦ン's ヒント☆