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

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

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

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

どんなサービスか

• テキストエリアに、自分の思っていることを書く。
• 「ニャン」というボタンをクリック(タップ)する。 (鳴き声への変換)
• 鳴き声が表示される。
• 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″]

サービスの反響など

唐突なあれですが、自分の代わりに猫の鳴き声でつぶやけるサービスを作ってみました。

うまく言葉にできない、言葉にするといろいろとあれ、という時にご利用ください。https://t.co/8DOqmuX5VC #nyan3

— tacck 🍻 Takuya KIHARA (@tacck) 2018年10月16日

こちらを投稿してから今日(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実装)で実現できるので、今後も活用していきたいですね。

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