Firebase前置きこんにちわ。前回に引き続き、雑な家計簿(ZATSUBO)をNuxt.jsとFirebaseで作成していきます。手を加える今回は、3〜5を実施して行きます。主な内容は認証処理の導入・DBの導入となります。前回の修正Nuxt.jsのインストールからスタートアップの起動までについてなのですが、Nuxtの日本語のドキュメントのバージョンが古く(2018年10月15日現在)、1.4.0の記述がありました。現行は2.1.0なので、英語のドキュメントを読み漁ったほうが良いみたいです。導入に関しては、むしろ簡易的になりました。npxでプロジェクトを立ち上げていますが、yarnがあればyarnを勧めています。Nuxtのスタートテンプレートでプロジェクトを作成。前回同様プロジェクトの名前や必要なモジュールをインストールするか聞かれます。途中、ユニバーサルアプリかSPAかどうかを聞かるので、SPAを選択します。あとは、ほとんどEnterを入力すれば、ベースが出来上がります。(今回は簡易的な物なので、本格的に導入する場合はテストやフォーマッターの導入を推奨しています)認証処理:Authenticationの導入Authenticationを設定する場合、FireBaseのモジュールが必要になるので、事前に取得しておきます。認証情報の取得を行います。認証方式の設定は、Firebaseのコンソール上でGoogle認証を選択して有効にしておきます。認証設定のポップアップを表示させ、内容を確認(コピー)を行い、プロジェクトに貼り付けて認証機能を有効にします。基本的には外に出している記事が多かったので、Pluginsディレクトリにfirebase.jsを作成し、nuxt.config.jsの設定を変更します。],準備が整ったので、実際に認証機能を使ってログインするような実装をLogo.vueに実装していきます。serveでローカルの動作を確認します。(必要な場合Firebaseのエイリアスの変更などは適宜行ってください。画面に表示されると思います。(色々表示されるので、カレーで隠しています)やや動作にラグがあると思いますが、コレで管理画面とかの実装が可能になりました。(本来ならfirebaseuiが補完してくれます。FirestoreどちらもNoSQLとなっています。モバイルクライアント向け。ツリーとして保存します。スケーリングにはシャーディング(パーティショニング)が必要です。iOS、Android、ウェブクライアント向け。現在(2018年10月)ベータ版でリリースされています。複合型の並べ替えとフィルタリング機能を備えたインデックス付きクエリで情報をやり取りします。スケーリングは自動的に行われます。Firestoreを使って見たいと思います。Firebaseのコンソールに入り、ルールの変更を行います。Firestoreに追加するデータは、コレクションドキュメントに分かれています。コレクションがテーブル。ドキュメントがレコードのキーという認識です。同等らしいので、どちらでも大丈夫だそうです。リアルタイムに監視を行う場合は、onSnapshot()関数を用いたりします。https://firebase.google.com/docs/firestore/query-data/listen上記の説明は申し訳ございませんが割愛させていただきます。thisに注意してください実装は下記2つのメソッドで、ユーザーの情報を元にコレクションを選択して、金額の情報を取得しています。dbGetOrInitやや複雑になっていますが、ユーザーがいない場合といる場合で、初期化を行うかデータを取得するかを行っています。...上記をボタンやフォームに対して、動作させるようにテンプレートを記述してmoneyを表示させてみます。手を加える少し手を加えていきます。参考になることは余りありません。実際にアプリケーション(ZATSUBO)として確立させていきます。Index.vueとLogo.vueを統合して必要な部分のみにします。(そもそも何故分けていたのかは不明です...。)ものすごいシンプルになりました。15px;}</style>ここで僕の大好きなelement-uiをいれて、入力フォームを作成し、gsapで軽いアニメーションを導入します。-SVueのアニメーションのサンプルを元に数値テキストのアニメーションを設置していきます。CDNでgsapのTweenMaxをインポートして、数値のアニメーションを補完する様にします。(普段はanime.jsを使っていますが、導入を検討していたところ数値の操作に少し工夫が必要だったので、今回は手っ取り早くこちらをおすすめしています。)https://jp.vuejs.org/v2/guide/transitioning-state.html#%E5%8B%95%E7%9A%84%E3%81%AA%E7%8A%B6%E6%85%8B%E3%81%AE%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5ahttps://www.npmjs.com/package/gsapnuxt.config.jsにElementUIの導入を行う記述を行います。}}</script>ついでに最近話題のダークモードのような雰囲気にしてしまいます。15px;}</style>あっという間に完成です!!UIは適当につけてあるのですが、スライドバーを操作すると1000円の範囲内でぱぱっと入力できます。一部、数値にカンマを入れるため、パワーコードになっています...。デプロイして、お金の管理が上手ではない先輩にテストしてもらいます。動作の確認が出来たらデプロイします。deploy先輩に投げたらバグが見つかりました。あたりが原因かもしれません。まとめ今回、Nuxt.jsとFirebaseを用いて認証とDBを簡単に作成してみました。Firebaseに入門してみた(その2)Tweet関連記事2018-12-282018年まとめ記事2018年もお疲れ様でした。Firebaseに入門してみたこんにちわ。先輩の代打ということで慌てて記事...2018-08-03JavaScriptフレームワークとビジネスロジックを分離してみるこんにちは。TypeScriptを試すこんにちは、@binarytaです。野外会議?はい、野外会議です。(1)ABOUT株式会社アドウェイズのエンジニアによるブログです!このブログでは、アドウェイズのエンジニアがざっくばらんに技術のことや日常生活について書いていきますので、みなさんよろしくお願いいたします。アドウェイズ中途採用情報スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。