EngineWebサービスNuxt.jsFirebase投稿日:2018-10-17最終更新:2018-10-24クロス元の投稿をみる(https://crieit.net/po...)昔mixiアプリでネココレースというアプリを作ったのですが、その素材が放置状態でもったいない事に気づいたので、ネココさんを着替えさせて喋らせてTwitter上に投稿できる簡易なWebアプリを作ってみました。ネココさんトークログインなど不要ですぐ使えます。Engineにしてみました。Nuxt.js最近は簡単なアプリケーションはNuxt.jsだととにかく簡単に色々作れるのでよく使っています。前述と同様、SSR目的でもあります。Firebase今回はデータを登録して表示するだけというシンプルなデータ構成のため、わざわざサーバーを用意しなくてもよいFirebaseを使ったサーバーレス構成にしました。データの保存にFirestore、画像の保存にStorageを使っています。BuefyBulmaというやわらかい感じのデザインを実装できるフレームワークを使っています。Bulma自体はほんとにCSSだけで、動きなどは自分で付けなければなりませんので、動き部分も実装されているBuefyを使っています。これを入れるだけでBulma自体のCSSもそのまま使うことができ汎用的で非常に便利です。仕組みプロジェクトの作成プロジェクトはcreate-nuxt-appを使って作成し、TypeScriptを追加しました。以前下記でまとめていた方法になります。動物や着せ替えの選択は、選択したコンポーネントだけでなく、画像のダウンロードやシェアする画像を作成する等、他の場所でも使うためにStoreのStateとして保持しておきます。StoreはNuxt.jsのマニュアルを見ると非常に理解しやすく、下記の記事でも以前まとめています。今回はサーバーが無いためこれを使ってブラウザ上で画像を作成する形です。したdiv上にあれこれ配置し、それをhtml2canvasで変換しているだけです。一点注意点として、デフォルトの挙動では端末のサイズによってcanvasのスケールが変わってしまうようですので、下記のように等倍で作成します。})Blobに変換する方法は下記等、色々情報があります。早く全てのブラウザで実装されてほしいものです。あとはStorageへの登録はマニュアル通りです。ファイル名は登録したメッセージデータのID名にしています。imageRef.put(blob)画像のURLも取っておきます。調べた情報によると、上記のimageRefでなく、再度Storage側から取ってきたものを使わないとダメなようです。imageRef.getDownloadURL()このURLもメッセージデータに保存しておけば完成です。あとは表示画面で入力されたメッセージや画像のURLをメタタグに入れておけば、その詳細ページのURLをシェアしてもらうことでツイートでシェアすることができます。Nuxt.jsの場合メタタグの設定はページコンポーネント内で下記のように行います。}SSRのためデータはasyncDataで取っておきましょう。}シェアする画面へのURLの作成は下記のような感じです。Engineへのデプロイは下記で以前解説しています。Engineの標準環境でNuxtを使って無料SSRZeitのNowでも良いと思います。GAEはFirebaseのプランが変わってしまう(無料枠は利用可能です)、Zeitは無料でのデプロイ回数制限がある、という違いがあるので適宜良い方を選択してください。Analyticsの導入は下記をインストールして設定するだけでした。Moduleまとめ大雑把になりますが作り方をざっと紹介しました。興味のある方は是非試してなにか作ってみてください!不明点があればTwitter等で聞いてもらえれば可能な範囲で答えます。Qrunch.netサーバー提供フィードバックを送信する。