Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)

1,071 views

Published on

2014/8/23のGDG神戸 AngularJS勉強会#2のLTでの内容です。

Published in: Software
  • Be the first to comment

  • Be the first to like this

AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)

  1. 1. Tada Satoshi 2014.08.23 AngularJS勉強会#2 by GDGKobe
  2. 2. ただ さとし Twitter : @pinmarch_t Facebookアプリ開発の本 書いたりしてました(数年前) Bioinformatics関係の仕事しています (Perl, R, RStudio, etc.) 日常(業務)ではjQuery使ってます
  3. 3. AngularJSってデータバインド以外にも、 ルーティングの機能があるのは大きい! (前回の勉強会での感想) サーバーに依存せず画面遷移ができる サーバー立てるの、めんどくさいなあ
  4. 4. AngularJSってデータバインド以外にも、 ルーティングの機能があるのは大きい! (前回の勉強会での感想) サーバーに依存せず画面遷移ができる サーバー立てるの、めんどくさいなあ python -m SimpleHTTPServer 8080 とか、打つの?
  5. 5. AngularJSってデータバインド以外にも、 ルーティングの機能があるのは大きい! (前回の勉強会での感想) サーバーに依存せず画面遷移ができる サーバー立てるの、めんどくさいなあ あ、Chrome AppsでHTMLアプリできる
  6. 6. ChromeアプリとChrome拡張 (Extension) Chromeアプリ Chrome拡張
  7. 7. Chrome Web Storeからインストール Chrome Dev Editor
  8. 8. Chromeアプリ = Installable Web Apps Hosted Apps ▪外部のWebサイトにジャンプさせる ▪“Backgroundページ”を生成可能 ▪“Background scripts”を実行可能 = ウィンドウタイプができる ▪Chrome APIsを利用可能 Packaged Apps ▪Offline = ローカルでWebアプリを機能させる Extension ▪ツールバーやアドレスバーに追加機能を与える Chrome Web Storeで公開、課金が可能
  9. 9. AngularJSを活かせるのはPackaged Apps こんな感じ
  10. 10. 開発中Chromeアプリのインストール (Chromeへの追加のしかた) 1. デベロッパーモードにチェック 2. パッケージ化されていない拡張機能を読み込む でフォルダを選択
  11. 11. Chrome Appsに必要なファイル manifest.json – 起動する際の設定 manifest_version は2 必要に応じて permissions を追加 アプリ一覧に出すアイコン画像(128x128)を指定 app.launch.local_path に最初の画面を指定 * Hosted Apps だと app.launch.web_url を指定
  12. 12. Google Chart APIsを使ってみ…ようとした http://bouil.github.io/angular-google-chart/#/fat
  13. 13. Google Chart Tools Directive Moduleを表示 https://github.com/pinmarch/sample.chrome.apps/tree/2014-08-23-gdgkobe 時刻を表示するController ルーティングでビューを切り替え ng-view
  14. 14. AngularJSはローカル環境でも便利 ローカル(オレオレ)環境ならChrome Apps 管理コンソールとかならChrome Web Store に公開してもいい Chrome Apps 使っていきませんか
  15. 15. 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

×