Last updated on

"にゃーん"とつぶやくサービスをFirebaseで作ってみたのでまとめ

タイトルどおり、にゃーんとTwitterへつぶやくサービスを作ってみました。

利用してくださった方々、誠にありがとうございます。

[blogcard url=“https://nyan3.tacck.net”\]

こちらの簡単な紹介と、作ったものの概要、リリースしてどうだったか、といったことをまとめてみたいと思います。

[toc]

どんなサービスか

  • テキストエリアに、自分の思っていることを書く。
  • 「ニャン」というボタンをクリック(タップ)する。 (鳴き声への変換)
  • 鳴き声が表示される。
  • Twitterへのシェアボタンをクリック(タップ)する。
  • Twitterへの投稿画面となるので、実際に投稿する。 (Twitter本体のインタフェース)

というだけのものです。

なぜ作ったのか

これは割と単純で、 “Firebase” の学習のためです。 せっかくなので、みんなに少しでも使ってもらえるものにすれば、より学習効率が上がるから、、というのが発端でした。

ねこの鳴き声にしたのは、ときどきTwitter上で「にゃーん」と鳴く人(猫?)を見かけるので、これにしよう、という感じです。

実装

Vue.js

フロントはVue.jsで作っています。

Vue CLI

[blogcard url=“https://cli.vuejs.org”\]

現在はバージョン3が出ていますが、少し前にインストールしたままだったバージョン2のクライアントでプロジェクトを作ってしまいました。。 今回の内容を実現する上では特に影響は無かったですが、せっかくなので3にしておくべきだったな、と思います。

その他

フロントを書くうえでの特筆事項は少ないです。 デザインがうまくないので、そこでの悩みがあるくらい。。

背景に使用している画像などは、Hatchful を利用しました。 [blogcard url=“https://hatchful.shopify.com”\]

自分でデザインのできない人間にとっては、すごくありがたいサービスです。 これによって、それっぽさをなんとか保てたかと思います。

ただ、作られた画像について、自分のサービスへの利用は自由ですが、画像などの権利は当然提供元のものです。 その辺りを気にされるかたは、各自で素材を作成する必要があります。

Firebase

Hosting

特に難しいことは無いですね。 firebase init で 色々と聞かれますが、特に迷うことは無いかと。 ホスティングする対象がデフォルトはpublicですが、今回はdistなので、そこだけ気をつければ良いです。

それが終われば、

$ yarn build
$ firebase deploy

で、デプロイ完了です。

Functions

今回は、ねこの鳴き声のバリエーションを作るのに、Google CloudのCloud Natural Language APIを利用しました。

[blogcard url=“https://cloud.google.com/natural-language/docs”\]

Firebaseの無料プラン(Spark プラン)ですと、Functionsからの外部アクセスに制限があります。 Googleの関連サービスへはアクセス可能なようなので、こちらを利用しました。

このAPIだと、入力した文章(最初に入力する自分の思っていること)の「ネガティブさ・ポジティブさ」と「その強度」を取得することができます。 なので、それらをみて、鳴き声を何パターンか出し分けをしつつ、強度に応じて多少バリエーションを変更する、などの工夫をしました。

実装はNode.jsで行なっています。 Functionsの標準の状態ですとNode.js 6の実行系が利用されるようですが、package.jsonのdependenciesと同じ階層に"engines": {"node": "8"}を追記すれば、Node.js 8で実行できるようになるので、だいぶ書きやすくなります。

[blogcard url=“https://github.com/firebase/firebase-functions/releases/tag/v2.0.0”\]

サービスの反響など

こちらを投稿してから今日(2018/10/30)まで二週間ほど経ちますので、この期間(正確には2018/10/17から2018/10/29まで)での情報をまとめてみます。

サービスへの誘導はほとんど考えておらず、上記の告知と、実際に使った人のTweet頼み、という状態です。

Tweetのインプレッション

こちらは、4,849件のインプレッションがありました。 私の中では最大に近いものですね。大変ありがたいです。 特にリツイートやいいねをしてくださった方々、ありがとうございます。

Google Analytics

ページビュー

ページビュー数は371でした。 売れないサービスはこんなもんだな、というところですが、2018/10/20に私のTweetのリーチする範囲を少し超えたようで、そのときに最大ページビュー(127)となりました。 (通知も多少来ましたが、バズるというほどには全然届かず。)

鳴き声の変換

鳴き声変換のボタンクリックイベント数は289でした。 イベントの発生率は、対ページビューで77.90%というところです。

テキストエリア1個、ボタン1個、という見た目なので、「とりあえずやってみるか」というところには繋げられたかな、と思います。

Twitterへのシェア

Twitterへのシェアボタンのクリック数は94でした。 イベントの発生率は、対ページビューで25.34%というところです。

こちらも、変換結果をみてボタン1個でシェア、という導線なので、比較的押してもらえたかと思います。 ただ、実際のTwitterへの投稿はもうワンクッション(Twitter側のUIを)挟むので、そこからの投稿数はこれよりも落ちてしまっていますね。

これは、URLやハッシュタグが入ることや、文面自体の面白さ(投稿したいと思わせられるか)というところに工夫する余地が大いにある、という結果かな、と思います。

まとめ

Firebaseでといいつつ、技術的な部分はだいぶはしょりましたが、そのくらい簡単に使い始めることができるサービスになっています。 ちょっとした思いつきをフロントエンド(と少しのFunctions実装)で実現できるので、今後も活用していきたいですね。

是非みなさんも、使ってみてください!