2020-12-19
香港のフードログをNextJSで作成した

香港飯(ほんこんめし)という名前のフードログをずいぶん前に立ち上げました。

https://hongkongmeshi.com

トップページにあるのは香港の地下鉄MTRの路線図で、駅名の上にマウスホバーするとその駅で最寄りのレストランのうち僕がいったことがある店が表示されます。各レストランのページはインスタグラムが埋め込まれているだけの単純なものです。

これを作った動機はReactJSとTypeScriptを使った作品をポートフォリオに加えたかったからです。当時香港で就活をしていた僕は、香港のWebエンジニアの求人はReactJS+サーバーサイドの言語(Pythonが望ましいが何でもよい)一つを要件にする求人が特別多いことに気が付きました。

もともとJavaは前職で使い、研究ではPythonを使っていたのでサーバー側のスキル要件は履歴書で満たしていることを示せます。しかしフロントエンドの技術は何度か触ったことはあっても仕事で利用した経験がないので、なかなか有効に自分の能力を示せません。そこでReactをつかった作品を公開してそれを面接官にみてもらうと思ったわけです。

結果として就活はこの作品を公開してからほどなく決まりました。そこはすぐにやめてしまいましたが。。

あとは、高いお金かけて買ったスマホのカメラはめちゃめちゃ高性能なのに活かしきれていないのでもったいない、という思いもありました。

この作品の構成は単純で、

  • 写真のホスティングサービス代わりにインスタグラムに写真を投稿
  • インスタグラムの埋め込みタグ、レストラン名、最寄りの駅、レストランのタグ付けをドキュメントに保存
  • Vercelでサイトをレンダリングして配信する

となっています。

路線図はWikipediaのクリエイティブコモンズからSVGファイルを拝借して、リンクを埋め込むメタプログラミング的なスクリプトを書いて展開しています。実は路線図はまだ最新の開通駅を反映していません。というかこれからもどんどん建築予定があるので行ったことない駅のマップをこの段階であまり書きたくありません。。。

コロナ禍で食べにいく機会が制限され(香港の制限は日本の比ではない)、最近では更新を止めていますが、内部では非エンジニアの友人も写真を提供したいと言ってくれたのでGUIの管理ツールの作成をしています。就活したときに比べて必要性に駆られる部分が小さいので遅々として進みませんが、管理ツールを作成して、コロナ禍も終焉を迎えたらもっと多くの閲覧者が訪れるように発展させていきたいと思います。