angularjs x chrome apps (2014.08.23 #gdgkobe event)

Tada Satoshi 2014.08.23 AngularJS勉強会#2 by GDGKobe

ただ さとし Twitter : @pinmarch_t

Facebookアプリ開発の本 書いたりしてました(数年前)

Bioinformatics関係の仕事しています (Perl, R, RStudio, etc.)

日常(業務)ではjQuery使ってます

AngularJSってデータバインド以外にも、

ルーティングの機能があるのは大きい！(前回の勉強会での感想)

サーバーに依存せず画面遷移ができる

サーバー立てるの、めんどくさいなあ

AngularJSってデータバインド以外にも、

ルーティングの機能があるのは大きい！(前回の勉強会での感想)

サーバーに依存せず画面遷移ができる

サーバー立てるの、めんどくさいなあ python -m SimpleHTTPServer 8080 とか、打つの？

AngularJSってデータバインド以外にも、

ルーティングの機能があるのは大きい！(前回の勉強会での感想)

サーバーに依存せず画面遷移ができる

サーバー立てるの、めんどくさいなあ

あ、Chrome AppsでHTMLアプリできる

ChromeアプリとChrome拡張 (Extension)

Chromeアプリ

Chrome拡張

Chrome Web Storeからインストール

Chrome Dev Editor

Chromeアプリ = Installable Web Apps Hosted Apps

▪ 外部のWebサイトにジャンプさせる ▪ “Backgroundページ”を生成可能 ▪ “Background scripts”を実行可能 = ウィンドウタイプができる ▪ Chrome APIsを利用可能

Packaged Apps ▪ Offline = ローカルでWebアプリを機能させる

Extension ▪ ツールバーやアドレスバーに追加機能を与える

Chrome Web Storeで公開、課金が可能

AngularJSを活かせるのはPackaged Apps こんな感じ

開発中Chromeアプリのインストール (Chromeへの追加のしかた)

1. デベロッパーモードにチェック

2. パッケージ化されていない拡張機能を読み込む でフォルダを選択

Chrome Appsに必要なファイル

manifest.json – 起動する際の設定

manifest_version は2

必要に応じて permissions を追加

アプリ一覧に出すアイコン画像(128x128)を指定

app.launch.local_path に最初の画面を指定 * Hosted Apps だと app.launch.web_url を指定

Google Chart APIsを使ってみ…ようとした http://bouil.github.io/angular-google-chart/#/fat

Google Chart Tools Directive Moduleを表示 https://github.com/pinmarch/sample.chrome.apps/tree/2014-08-23-gdgkobe

時刻を表示するController ルーティングでビューを切り替え ng-view

AngularJSはローカル環境でも便利

ローカル(オレオレ)環境ならChrome Apps

管理コンソールとかならChrome Web Storeに公開してもいい

Chrome Apps 使っていきませんか

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