AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
-
Upload
pinmarcht-tada -
Category
Software
-
view
267 -
download
1
description
Transcript of AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
![Page 1: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/1.jpg)
Tada Satoshi 2014.08.23 AngularJS勉強会#2 by GDGKobe
![Page 2: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/2.jpg)
ただ さとし Twitter : @pinmarch_t
Facebookアプリ開発の本 書いたりしてました(数年前)
Bioinformatics関係の仕事しています (Perl, R, RStudio, etc.)
日常(業務)ではjQuery使ってます
![Page 3: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/3.jpg)
AngularJSってデータバインド以外にも、
ルーティングの機能があるのは大きい!(前回の勉強会での感想)
サーバーに依存せず画面遷移ができる
サーバー立てるの、めんどくさいなあ
![Page 4: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/4.jpg)
AngularJSってデータバインド以外にも、
ルーティングの機能があるのは大きい!(前回の勉強会での感想)
サーバーに依存せず画面遷移ができる
サーバー立てるの、めんどくさいなあ python -m SimpleHTTPServer 8080 とか、打つの?
![Page 5: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/5.jpg)
AngularJSってデータバインド以外にも、
ルーティングの機能があるのは大きい!(前回の勉強会での感想)
サーバーに依存せず画面遷移ができる
サーバー立てるの、めんどくさいなあ
あ、Chrome AppsでHTMLアプリできる
![Page 6: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/6.jpg)
ChromeアプリとChrome拡張 (Extension)
Chromeアプリ
Chrome拡張
![Page 7: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/7.jpg)
Chrome Web Storeからインストール
Chrome Dev Editor
![Page 8: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/8.jpg)
Chromeアプリ = Installable Web Apps Hosted Apps
▪ 外部のWebサイトにジャンプさせる ▪ “Backgroundページ”を生成可能 ▪ “Background scripts”を実行可能 = ウィンドウタイプができる ▪ Chrome APIsを利用可能
Packaged Apps ▪ Offline = ローカルでWebアプリを機能させる
Extension ▪ ツールバーやアドレスバーに追加機能を与える
Chrome Web Storeで公開、課金が可能
![Page 9: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/9.jpg)
AngularJSを活かせるのはPackaged Apps こんな感じ
![Page 10: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/10.jpg)
開発中Chromeアプリのインストール (Chromeへの追加のしかた)
1. デベロッパーモードにチェック
2. パッケージ化されていない拡張機能を読み込む でフォルダを選択
![Page 11: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/11.jpg)
Chrome Appsに必要なファイル
manifest.json – 起動する際の設定
manifest_version は2
必要に応じて permissions を追加
アプリ一覧に出すアイコン画像(128x128)を指定
app.launch.local_path に最初の画面を指定 * Hosted Apps だと app.launch.web_url を指定
![Page 12: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/12.jpg)
Google Chart APIsを使ってみ…ようとした http://bouil.github.io/angular-google-chart/#/fat
![Page 13: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/13.jpg)
Google Chart Tools Directive Moduleを表示 https://github.com/pinmarch/sample.chrome.apps/tree/2014-08-23-gdgkobe
時刻を表示するController ルーティングでビューを切り替え ng-view
![Page 14: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/14.jpg)
AngularJSはローカル環境でも便利
ローカル(オレオレ)環境ならChrome Apps
管理コンソールとかならChrome Web Storeに公開してもいい
Chrome Apps 使っていきませんか
![Page 15: AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)](https://reader033.fdocuments.net/reader033/viewer/2022051412/549a43feb479593d6a8b4b6a/html5/thumbnails/15.jpg)
APIの名前空間 chrome.* (ex. chrome.alarms) https://developer.chrome.com/apps/api_index
Stable APIs alarms, app.runtime, app.window, commands, contextMenus, events,
filesystem, gcm, i18n, identity, idle, mediaGalleries, notifications, permissions, power, pushMessaging, runtime, serial, socket, sockets.tcp, sockets.tcpServer, sockets.udp, storage, syncFileSystem, system.cpu, system.display, system.memory, system.network, system.storage, tts, types, usb
Beta APIs accessibilityFeatures, bluetooth, bluetoothLowEnergy, bluetoothSocket
Dev APIs audio, copresence, hid, location, wallpaper
Experimental APIs