この記事はKMC 2 Advent Calendar 2019 - Adventarの6日目(12/6)の記事です。
5日目の記事はありませんでした。 4日目の記事はkmc-id: gnuさんのGo Modules時代の静的解析 - Qiitaでした。
Goは触ったことがないので何もわからないです。ごめんなさい。同じGoogleが作ったDartならちょっと触ったことがあるけどやっぱり何も覚えていません。
目次
- はじめに
- 「v-data」について
- 構成
- Nuxt x Firebase Cloud Functions
- Firebase Cloud Functions x ElasticSearch
- おまけ
- 終わりに
- 次回のKMC Advent Calendar
- KMCM（宣伝）
はじめに
KMC7年目のdamaです。 Twitter等ではDNEKと名乗っています。 京都大学文学研究科を中退してからスマホアプリを作ったりしつつ僅かなフリーランス業でその月暮らしをして過ごしています。
この記事はKMC Advent Calendar 2019 - Adventarで推し絵文字・キャラデザ・モデラー・グループから探せるVTuber検索サイトを作った - DNEK's blogという記事を書いていたところ、裏でやっているKMC 2 Advent Calendar 2019 - Adventarの同じ日が空いているのを見つけたのでついでに書いただけです。
本当は「Emojiの扱いがめんどくさい」という話もまとめた技術記事にしようと思ったのですが、時間がないしめんどくさいので表題のことだけ書きます。
「v-data」について
今回こういうサイトを作りました。
こちらで機能紹介をしています。
構成
このサイトは表題の通り「Firebase」と「Nuxt」と「ElasticSearch」でできています。
もう少し詳しく書くと、「NuxtJS」でgenerateした静的なファイル群を「Firebase Hosting」にdeployしています。
その中の検索ソースを「ElasticCloud」というElastic社公式がクラウドホストしているElasticSearchに置き、「Firebase Cloud Functions」でラップして呼び出して使っています。
ちなみに、各VTuber達のデータはクラウドホストされたDBなどで管理しているわけではなくて、Nuxtでgenerateする際にlocalのJSONを読み込んでおり、ElasticCloudにもlocalからアップロードしています。 まあElasticSearchもある意味DBなのでホストしているとも言えますが・・・。
お値段
ElasticCloudは最小構成で月々16USDくらいになっています。 私のようにGCPの東京リージョンだと23USDとかになります。 ちなみにまだ2週間の無料お試し期間中なのでお金を払っていません。
「Firebase」はとりあえず無料と行きたかったところなのですが、実は完全無料のSparkプランだとCloud FunctionsでGoogleサービス外へリクエストを飛ばすことができないのでBlazeプランでやっています。 とりあえず無料枠もあるし大丈夫やろと思って適当にやっています。
Nuxt x Firebase Cloud Functions
NuxtでFirebaseを使うには「nuxt-fire」というモジュールがあるので、最初はこれを使っていました。
しかし、これを入れてビルドするとVendorファイルのサイズがかなり大きくなってしまう。 どうやらCloud Functions以外のFireStoreなども一緒に入ってしまうようです。
そこでFunctionsの部分だけ自分で書いてプラグインとして使うことにしました。
fireFunc.jsをpluginsディレクトリに入れておいて、使うときはsample.jsみたいな感じで使います。
clientからしか呼べないのでprocess.clientを使いましょう。
あと勿論npm i firebaseしておきましょう。
Firebase Cloud Functions x ElasticSearch
Googleの公式ドキュメントには「Algolia」を使った全文検索の例が載っていますが、ElasticSearchは代替案として提示されているだけでした。
ネット上を探してもFireStoreの全文検索しか見つからなかったので自分で書いたやつを簡略化したものを貼っておきます。
functionsのディレクトリにこれを入れて、npm i @elastic/elasticsearch firebase-admin firebase-functionsしておきましょう。
ElasticCloudを使わない場合は認証方法が異なるのでこの辺を見てください。
https://github.com/elastic/elasticsearch-js/blob/master/docs/authentication.asciidoc
おまけ
これはElasticSearch単体の話なのですが、「v-data」で「VTuberをランダムに表示する」というのを実装しようとしたときに、ElasticSearchだけで簡単にできたので紹介しておきます。
random_scoreという関数を使うのですが、ランダムに5件取ってくるならばこんな感じです。
終わりに
こうして作られたVTuber検索サイト「v-data」をよろしくお願いします。
ついでにスマホアプリ達もよろしくお願いします。
次回のKMC Advent Calendar
明日のKMC 2 Advent Calendar 2019 - Adventarの記事はなさそうです。
明後日の記事はid:utgwkkさんの「KMCにおけるオンラインコミュニケーション補遺」です。 KMCにおけるオンラインコミュニケーションツール - 私が歌川ですのおまけのようですが、そういえばKMC内部のpukiwikiでもElasticSearchが使われていましたね。 ElasticSearch最高！！
KMCM（宣伝）
京大マイコンクラブではElasticSearchを使う部員を募集しているかもしれません。年齢や所属、国籍や宗教その他諸々に関する制約はありません。詳しくは入部案内を見て下さい。
