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

Angular 4 + Firebase でお菓子管理ツールを作ってみた

Angular 4 + Firebase でお菓子管理ツールを作ってみた

部署内にあるお菓子コーナーの在庫を管理するアプリケーション「ハーモニーお菓子管理」をAngular + Firebase を用いて実装してみたので、その所感についてお話します。

2017/6/16開催【ng-sweets】のイベントLT資料になります。
https://d-cube.connpass.com/event/58967/

3dede6f21d7a19838cf4db6a5585b410?s=128

masahiko.asai

June 16, 2017
Tweet

Transcript

  1. Angular 4 + Firebase で お菓子管理ツールを作ってみた 〜 入門 Angular 4

    in ngSweets 〜 2017/6/16 HRMOS 事業部 フロントエンドエンジニア 浅井 雅彦
  2. プロフィール Masahiko Asai ビズリーチ HRMOS事業部 フロントエンドエンジニア 2005-2006 AMラジオ ディレクター/TV番組 AD

    2007-2010 飲食運営本部 Web担当/アーティスト サイト運営 2011-2014 PHP エンジニア 兼 コーダー(ソシャゲー/某大手ECサイト) 2015- フロントエンドエンジニア ← いまここ
  3. ハーモニー お菓子管理 https://snacks-staging.firebaseapp.com

  4. 本日お話しすること • お菓子管理アプリを作ることになった経緯 • ハーモニーお菓子管理について <デモ> • Angular 4 について

    • さあはじめてみよう 〜Angular CLI〜 • Firebase でデプロイメント • Angular 4 界隈の外部モジュール、ツールのご紹介 • まとめ(さわってみた所感)
  5. 本日のテーマ • 今回のLTは、入門編向けコンテンツです。 ◦ 既にAngularを触ったことある方には面白くないかもしれません ◦ Angularではなくお菓子にご注目ください • 「Angular、ちょっとはじめてみようかな」というきっかけになれば。 •

    TypeScript, 関数リアクティブプログラミング (RxJS), Zone.js といった、 Angular の根幹となるレイヤーの話はしません。
  6. ハーモニーお菓子管理って?

  7. ハーモニーお菓子管理って? • 「お菓子をコンビニへ買い出すのは効率が良くない、面倒だ」 という話が発端。 ◦ 某お菓子サービスの品揃えが良くない、毎回同じお菓子で飽きていたのもきっかけ。 • デザイナー数名が自発的に買い出しをして、空いているデスクに置きはじめる かたちでスタート。 ◦

    お土産のお裾分けのイメージ • お菓子を食べたい人は、小銭(金額任意)を貯金箱に入れてもらう
  8. よくある事例 オフィスフロアの隅にありませんか?

  9. 弊社事業部のお菓子コーナーの変遷

  10. 弊社事業部のお菓子コーナーの変遷

  11. 弊社事業部のお菓子コーナーの変遷

  12. みなさんからいただいた小銭は、月1回両替を行い、次回の仕入れに活用

  13. お菓子コーナー • 仕入れ ◦ おみやげを持ってきてくれる方 ◦ お菓子バイヤーと呼ばれる人たちが仕入れている • 収益 ◦

    皆さんの小銭(お布施)で成り立っている ▪ 小銭の金額が少なくなったら、仕入れるお菓子も減る ◦ お金は出さないけど、お菓子(お土産)を買って持ってきてくれる人も
  14. ハーモニー お菓子管理でできること • Google アカウントを利用してログイン認証ができる • 入荷したお菓子を登録できる ◦ Yahoo! ショッピングAPIを利用して、お菓子の商品・画像を取得できる

    • 入荷したお菓子に対して「いいね!」を付けることができる
  15. HRMOS チームのお菓子コーナー

  16. ハーモニー お菓子管理 https://snacks-staging.firebaseapp.com

  17. Angular 4

  18. What is Angular 4 • Google が開発している、モバイル & デスクトップ Web

    アプリケー ションを構築するための開発プラットフォーム • 2014年9月にAngular開発発表、2016年9月に正式リリース ◦ 本日現在はバージョン4.2.2 • バージョン 1 時代は AngularJS と呼ばれていたけど、 JSに限定していないので Angular という名称に
  19. Angular 4 の特徴 「フレームワークからプラットフォームへ」と謳っている。 シングルページ Web アプリケーションの開発にモジュールがあらかじめ最初から用 意されている。 また、開発をサポートする周辺ツールの整備もGoogle自ら進められている 1

    All-in-one
  20. None
  21. Angular 4 の特徴 2 プラットフォーム非依存 ブラウザ上で動作するアプリのみならず、 サーバサイドのプログラムも構築できるようになりました iOS/Android で動くWebViewベースのアプリはもちろん、 ネイティブアプリを開発することも可能に。

  22. Browser Support

  23. Angular Building Blocks

  24. Angular 2 Browser Support

  25. Angular Universal

  26. Angular Universal • BrowserModule というモジュールが デフォルトでは用いられる • Angular Universalを導入すると、 サーバサイドレンダリングが可能になる

    • パフォーマンス向上施策のひとつとして、 SSRで返して、その後ブラウザ側で Angular アプリケーションを実行する テクニックもある
  27. Ionic 2 Ionic 2 + Angular 2 + Cordova を利用して

    WebView ネイティブアプリを構築できる
  28. NativeScript NativeScript で iOS/Android アプリケーションも開発が可能

  29. Angular React Native Renderer

  30. Angular Electron Angular 2 + Electron でデスクトップアプリケーションも

  31. Angular 2 の特徴 3 コンポーネント指向 (Component based Programming) • コンポーネントという単位でモジュールを明確に分割できるようになった

    • UI部品をひとつのコンポーネントとして作り、 この部品を組み合わせることで、 画面を作り上げていくイメージ
  32. Angular 2 の特徴 4 One-way Data Binding • 単方向へのバインディングがデフォルトに。 フォーム要素等では必要に応じてTwo-way

    Data Bindingも利用可能。
  33. Angular 2 の特徴 5 TypeScript での開発が推奨に • Microsoftが開発している静的型付けができるJSのスーパーセット。 • JavaScriptやDartでも開発は可能だけど、

    情報の充実度合いとアップデート観点からTypeScriptがいちばん • 始めてみる価値はある
  34. 早速はじめてみよう

  35. とはいえ現実的には… 1. プロジェクトディレクトリを作成 2. package.json のセットアップ 3. Angular2 をインストール 4.

    TypeScript をインストール 5. タスクランナーやビルドツールのセットアップ 6. ・・・ 7. ・・・ 8. ・・・
  36. とはいえ現実的には… 1. プロジェクトディレクトリを作成 2. package.json のセットアップ 3. Angular2 をインストール 4.

    TypeScript をインストール 5. タスクランナーやビルドツールのセットアップ 6. ・・・ 7. ・・・ 8. ・・・ 何もない状態からセットアップするのは大変…
  37. Angular CLI

  38. Angular CLI とは? • Angular アプリケーション プロトタイプを構築できるツール ◦ React でいう

    create-react-app、Vue.js でいう vue-cli に相当するもの • npm でインストールすると、ng コマンドで scaffold が作れるよ • CLI自体は ember-cli ベースで作られているそう
  39. Angular CLI でできること ng new hoge-project hoge-project ディレクトリを作成して、 Angular アプリケーションの初期環境を構築

    ng generate component header 指定したAngular の空コンポーネントを生成 ng lint Lint バリデーションチェックを実行 ng test テストを実行 ng serve ローカル Web サーバを起動。LiveReload付き。 npm start でもこのコマンドが実行される ng build デプロイ用のファイル一式( HTML/CSS/JS)を作成 --environment 引数を付与すると指定した環境でビルドされる
  40. angular-cli.jsonをじぶん好みにカスタマイズ 1/3 assets distディレクトリにそのままコピーしてほしい アセット類を記述 styles 外部ライブラリのcssを使いたい場合は、 この配列に追記。 ビルド時にbundleしてくれる scripts

    外部ライブラリのjsを使いたい場合は、 この配列に追記。 ビルド時にbundleしてくれる
  41. angular-cli.jsonをじぶん好みにカスタマイズ 2/3 environments ビルド環境単位で読み込む内容を変更した い環境変数があればここで指定 (外部APIのキーなど) 環境名は増やせる。 ※僕はstagingを追加した

  42. angular-cli.jsonをじぶん好みにカスタマイズ 3/3 defaults: styleExt デフォルトは css となっている。 SASS/SCSSを使いたければ、scss を指定 すると、準備不要ですぐ

    scss が使えるよう になる。 less や styles にも対応。 コンポーネント生成時も自動的に scss ファイ ルが生成されるようになる(後述)
  43. Angular CLI では、起動してみましょう

  44. Angular を構成する部品たち

  45. module Root Module Angular アプリケーションで 一番最初に起動する部品。 アプリケーション全体で使用する外 部モジュール、サービス、 コンポーネントをinjectできる 一番最初に実行するComponent

    (Root Component) を指定できる Root Module (src/app/app.module.ts)
  46. app.module.tsのなかみ imports 外部モジュールでインポートしたいものを指定。 declarations Angular アプリケーション内で使用するコンポーネントを宣言。 angular-cli で空のコンポーネントを生成したら、 自動的に追記される

  47. app.module.tsのなかみ providers コンポーネントには紐付かない、サービスを記述 bootstrap Angular 2 アプリケーションが初期実行するコンポーネントを指 定する デフォルトは AppComponent

  48. Component Component Controller と View のセット。 View の中に他のコンポーネント名を記 述することで、子コンポーネントとして呼 び出すことが可能

  49. Component Component Controller と View のセット。 View の中に他のコンポーネント名を 記述することで、子コンポーネントと して呼び出すことが可能

    Component と Template の間で データのやりとりが可能
  50. app.component.ts のなかみ selector view側から呼び出すための要素名。 templateUrl このコンポーネントが描画するHTMLテ ンプレートファイルを指定。 ※templateにすると、component.ts側で直書きで きる styleUrls

    このコンポーネントでのみ有効にしたい CSSファイルを指定する ※styles にすると、component.ts側で直書きでき る
  51. app.component.ts のなかみ • styleUrls で記述したCSSは、ネームスペースが明確に分かれている • 他のコンポーネントには適用されない ◦ 親コンポーネントから子コンポーネントのCSSを書き換えることもでき ない

    • 非常に便利!
  52. Template (app.component.html) のなかみ • Angular は Template(HTML) の中にインタラクションを記述する • AngularJS

    1.x と同じく、ng-hoge みたいな属性を要素に記述していくス タイル ◦ AngularJSのときはngシリーズが非常に多かった ◦ Angular は種類は減ってシンプルに ◦ 処理の種類に応じた、妙な記号が登場
  53. Component と Template 間でのバインディング app.hoge.component.ts app.hoge.component.html • • • •

  54. Template 入門 - Interpolation, Event Binding

  55. Template 入門 - Interpolation, Event Binding

  56. Template 入門 - Interpolation, Event Binding

  57. Template 入門 - One Way Binding 親コンポーネントのTemplate 子コンポーネントの Controller

  58. Template 入門 - One Way Binding One Way Binding 親コンポーネントのTemplate

    子コンポーネントの Controller
  59. Template 入門 - Interpolation, Event Binding Interpolation

  60. Template 入門 - Interpolation, Event Binding Interpolation Event Binding

  61. コンポーネントの Controller Template 入門 - Two Way Binding コンポーネントの Template

  62. コンポーネントの Controller Template 入門 - Two Way Binding Two way

    Binding コンポーネントの Template
  63. Component と Template 間でのバインディング app.hoge.component.ts app.hoge.component.html • • • •

  64. Pipe 画面に出力するタイミングで、表示フォーマットを変更してくれる

  65. Directive • Structural directives ◦ DOM要素を追加/削除してDOM レイアウトを変更できる部品 • Attribute directives

    ◦ 要素の外観や動作を変更できる部品
  66. Services ビジネスロジックのような画面から独立した処理を記述するところが「サービス」。 複数のコンポーネントからお菓子データにアクセスする必要があり、 同じコードを何度も何度もコピーアンドペーストしたくない。 再利用可能データはサービスに持たせて、コンポーネントからサービスを呼び出しましょう

  67. 全体的な構成を眺めると

  68. Webアプリとしては なにか形にできそうだ

  69. サーバとインフラは どうする?

  70. None
  71. Angular + Firebase

  72. Firebase とは • 2014年10月にGoogleに買収されたことで一躍有名になった BaaS(Backend as a Service) • Web・モバイルアプリケーションの開発・

    サービス運営の即戦力になるツールが揃ったサービス
  73. 今回お菓子管理で使ったもの • Authentication ◦ アプリケーションにユーザー認証機能を導入できる ◦ AWSでいう、Cognitoみたいなヤツ? • Realtime Database

    ◦ スキーマレスなデータベース ◦ JSONで記述していく ◦ バックエンドでは WebSocket を使っている?? • Hosting ◦ Firebase内のホスティングサーバがあり、デプロイができる ◦ デプロイはすべてリビジョン管理されていて、ロールバックが可能 ◦ カスタムドメインが割り当て可能で、SSL証明書も無料で発行してくれる
  74. Angular と Firebase をつなげるには

  75. 外部モジュールの導入はかんたん! 1. npm install --save angularfire2 2. app.module.ts で AngularFire

    モジュールを import
  76. ログインアクションの実装

  77. ログインアクションの実装

  78. お菓子一覧の実装

  79. お菓子一覧の実装

  80. 完成したらデプロイ 1. ng build -e prod 2. firebase use production

    3. firebase deploy 0. npm install -g firebase-tools
  81. 完成したらデプロイ

  82. None
  83. 稼働までもっていけた!

  84. None
  85. Angular アプリケーションを作るのに 役に立つ周辺ツール・モジュール

  86. Angular Augury

  87. Angular Augury • Angular アプリケーションをデバッグするのに便利な Google Chrome 拡張機能 • ng-inspector

    や React DevTools、Vue.js devtools に相当するもの • モデルの値やフォームの Valid/Invalid 状態が リアルタイムに確認できるよ
  88. UI Component系 - Angular Material

  89. UI Component系 - ng-lightning

  90. UI Component系 - Clarity Design System

  91. UI Component系 - PrimeNG

  92. まとめ

  93. さわってみた所感 • Angular ◦ 本体は良い出来。公式サイトのドキュメントも丁寧 ◦ Template側の記述ミスも指摘してくれるようになった ◦ 「コンポーネント単位で作る」がとてもしっくりきた ▪

    開発してる過程が楽しいと思えた ◦ ファイルの役割分担が明確 ▪ どこになにのコードを書けばよいか掴みやすかった • サービスのAdmin(管理画面)に導入するにはうってつけ ◦ UI系の外部モジュールの開発が非常に盛ん
  94. さわってみた所感 • 周辺ライブラリ(外部モジュール)はまだα版, β版が多い ◦ 外部モジュールに依存しすぎると、 Angular本体のバージョンアップの時に辛くなりそう ◦ まだまだ開発中のため、コードをどう記述しているかソースを眺める には最適かも?

    • Angular 本体のバージョンアップが速い ◦ 開発していた 2ヵ月間でも 2.0 → 2.1 → 2.2 に...いまは4.2!? ◦ Googleは年に 2 回、新しいメジャーバージョンを出すと宣言している ▪ 次回は Angular 5 が9/19にリリース予定
  95. さわってみた所感 • Angular CLI ◦ かゆいところに手が届く! ◦ Web アプリケーションを爆速で構築できる ◦

    フロントエンド実装に集中できる環境を作ってくれる ◦ メモリ食いが難点。MacBook Air で大規模SPAは厳しいか
  96. さわってみた所感 • Angular CLI ◦ かゆいところに手が届く! ◦ Web アプリケーションを爆速で構築できる ◦

    フロントエンド実装に集中できる環境を作ってくれる ◦ メモリ食いが難点。MacBook Air で大規模SPAは厳しいか
  97. さわってみた所感 • Firebase ◦ Realtime Database, Authentication に感動 ▪ ここまで簡単にできるなんて

    ◦ コマンドひとつでデプロイできて非常に楽 ◦ コンソール画面からロールバックができるなんて! ◦ SSL証明書が無料で利用できるとか、信じられない
  98. サイドプロジェクトのすすめ • 新しい技術の実験場 • AngularJS で運用しているWebアプリを Angular 4へ移行中 • 設計や挙動を考えるにあたり、

    すぐに試せる環境として使っています
  99. ご静聴ありがとうございました