2018年11月1日SessionGOというWebサービスを開始した件この度、音楽セッションをもっと盛り上げるWebサービスSessionGOを立ち上げました。今の所の機能としては全国のセッション情報を特徴別、地域別に検索・投稿が可能チャットで情報交換できるぐらいのしょぼいもんですが、まずは必要最低限でスタートができたのでこっからどんどん拡張していきたい所存。メインターゲットはアイリッシュセッションですが、ブルースセッションとか混じってても全然良いんじゃないですかね。Firebaseがすごすぎるさて、ここからは技術のお話。今回はフロントエンドにVue.jsとNuxt.js、バックエンドにFirebaseを使ってみました。ほとんどFirebaseじゃねえかGoogleに買収されたFirebaseをふんだんに採用しております。サーバー用意したりデータベース用意したりといったバックエンド部分をクラウドサービスとして担ってくれるものです。Service)と呼ばれてるようです。htmlとか)Storage(画像置き場。Hostingだと容量超過でお金取られるため)Firestore(データベース。ここでセッションとかチャットとかユーザーデータ以外一元管理)Authentication(認証ベース。メールアドレスはここでしか取り扱わない。Functions(サーバーでやりたいあの機能をなんでも実現してくれるすごいやつ。自動サムネイル作成とか)すごいやFirebase。何より公式Docで日本語+サンプルコード付で解説されてるのでとても実装しやすい。個人でつかうなら、慣れない内はなんかごちゃっとしてしまうGCPより、コンパクトに要りそうな機能だけ詰まったFirebaseがオススメできるかもしれません。Nuxt.js最近のWeb系エンジニアはわがままなのでなんでもJavascriptでやっちゃおうとします。Perl(笑)Vue.jsってだけでも凄いのに、Nuxt.jsでより簡単にフルスクラッチ開発ができるようになりました。(これフルスクラッチって言うの?)今回はSPAな静的ファイルのみの構成。セッション情報ページ以外はすべてのディレクトリにindex.htmlがあり、情報が流動的なセッション情報ページはajaxでFirestoreに情報を読みに行ってjsでページを構築しています。SEO、OGP的な話SPAやらajaxやらでよく聞くのは「SEOやOGP的にどうなの?」という声。普通のSPAだと一つのindex.html上でjsをあーだこーだして、更新が必要な部分だけ切り替えていくスタイルです。SEO対策しようとしたらjsでmetaタグをぐるんぐるん変えていくしか無いですが、検索Botはjs読めません。(Googleは読めるっぽい)ところがNuxtによるgenerateだと各ページにindex.htmlが生成されるので、静的にmetaタグを作成できます。開発時にmetaタグ内に変数とかを使っていても、generateコマンド走らせたときに全部平文にしてくれるので安心ですね。セッション情報ページのSEOとSNS用のOGPが苦労したセッション情報ページはindex.htmlがなく、Firestoreと通信して取ってきた情報をもとにjsでmetaタグを生成してます。jsを読めないTwitter、FBなんかのクローラーは死んでしまいます。このご時世にSNS対応(リンク書くとOGP読んでサムネイルやタイトル表示されるやつ)できないのではお話になりません。FirebaseとHostingのトリガー機能を使います。Firebaseを動かせます。今回はセッション情報ページにアクセスきたらってことですね。Firebaseに→もしクローラーなら:OGPしか書いてないHTMLを作って返す。→もしそれ以外のユーザーなら:スルーしてURL通りのページを見せる。いう関数を書いておき、先程のHostingのトリガーにこの関数を指定すればめでたしめでたし。2の「普通のユーザーにはURL通りのページを見せる」が厄介でした。Hostingで「このURLに来たら」というルールを書いてるので、単純にリダイレクトでそのURLに送ったのでは無限ループしてしまいます。そこでnode-fetchをつかうんですね。こいつでルートのindex.html(今回で言うhttps://sessiongo.com/index.html)を取ってきて、その内容をユーザーに返すというものですね。SPAの仕様というと語弊があるかもしれませんが、「ルートのhtmlを見ていても、パスに対応したjsが読まれていればちゃんとそのページに変身する」という、まぁ魔法みたいなアレですね。これでHostingのルールをうまいことかわせます。上辺だけなめた感じの投稿ですが、これからは運用という史上最強のあいつが待ってます。Firebaseのおかげでフロント部分だけに注力できるのでもう怖いものなしですね。Firebase万歳!Google万歳!ワンワン!ふくいIT企業でフロントエンドエンジニアのアレとして日々奮闘しております。ギターとかバイオリンとか弾きます。音楽と紅生姜が好きです。SessionGOを開発・運営しています。*コメントふくいと申します。IT企業でフロントエンドエンジニアのアレとして日々奮闘しております。音楽と紅生姜が好きです。日々の業務で直面した手強いあれを、なんか備忘録みたいな感じで書いていくあれです。音楽とか日常的なことも書くと思います。