旅行先を決めたかっただけなのに...
こんにちは、とがりです。昨日7/22からGoToトラベルキャンペーンが始まりましたね。私は旅行が好きなのでコロナがもう少し収束したらキャンペーンを使って旅行したいなと思っております。
旅行に行こうと思った時にまず決める必要があるのが旅行先ですよね。私はいつも悩みます。学生時代は時間があったので海外に行くようにしていたのですが、社会人になり長いフライトも疲れるしGoToキャンペーンもやっているので国内旅行に行きたいと思いました。Googleで「国内 旅行 おすすめ」と調べて出てきたところをinstagramで「熱海」みたいに調べてたんですがすごくめんどくさくて。じゃあ一括で表示してくれるウェブサイト作ったらええやんと思いました。
作り始める前は、ITエンジニア歴も1年以上になったし簡単なサイトならすぐできるだろうと思ってました。予定ではキャンペーンが始まる前の7月中旬には完成予定だったのですが、今日7/23にやっと一応完成しました。なぜ一応かと言いますと、ひどいページができたからです。そのページがこちらです。
ひどいページなので見なくて結構なのですが、ページに飛んでいただくとこのように表示されます。
地名だけ出てきます。
instagram Graph APIを使っているのですが、レスポンスまで時間が長くて投稿が取得できていないんですね。10秒ほど待っていただくとちゃんと表示されます。
投稿のサイズがバラバラですね！素材の味を楽しむタイプのWebページを目指しました。東京だけじゃなくて名古屋とか大阪とかのinstagramで人気の投稿が表示されます。
#名古屋 は可愛い女性が人気のようですね。名古屋っぽくて好きです。
それに比べて#北海道 や#京都 は癒されますね。
名古屋には名古屋の癒しが、北海道には北海道の癒しがあるということですかね。
まぁこんな感じになりまして、ご覧の通り意図した旅行先を決めるために使えるウェブサイトには全くなってないです。
7/23の15時前後はこれらの投稿が人気のようですが、アクセスしていただくとその時の人気の投稿を取得しますので、是非一度アクセスしてみてください。URL
一応、技術的な話をしておきます。興味のない方は飛ばしてください。
Firebase Hostingを使ってホスティングをしています。そして、クライアントサイドで動くjavascriptがFirebase Functionsを叩いています。Firebase FunctionsではInstagram Graph APIを使って人気投稿のURLを取得しています。そのURLをjavascriptがhtmlに変換して表示しております。
作ってみて難しかった点はフロントエンドの部分です。普段はサーバーサイドを少しとインフラを触っているので業務でもプライベートでも初めてフロントエンドを触りました。javascriptも初めてだし、HTML,CSSもロクに書いたことなかったので苦労しました。サイズを合わせる方法が分からなかったり、下の写真のようにinstagramの投稿がかぶったり。
結論としては、100%思ったものはできませんでしたがフロントから全て作ったのはすごく良い経験になりました。
ほんとはもっとウェブサイトをブラッシュアップしていきたいのですが、再来週に試験があってその勉強をしないといけないのでこれで一応完成です。旅行先は今まで通りGoogleとInstagramを使って決めたいと思います！皆さんも良い旅行を！Have a nice Trip！
最後までご覧いただきありがとうございました。