イタリア旅行の思い出を綴るサイトを開発中の話
本記事はKanmu Advent Calendar 2024の記事です。
昨日はかつまたさんによる「人事13年目の自分が今転職活動をするなら」という記事でしたね。次の転職時には参考にしようかなぁ。
はじめまして、カンムでソフトウェアエンジニアをしている金子といいます。11月に入社してまだ入社したてほやほやですが、かつまたさんに前職のよしみで？とのことでアドベントカレンダーを書くことにしました。
私にはいくつか趣味があるのですが、その中でも8回行ったイタリア旅行はそこそこ思い出が溜まって来たというのもあり、自分の思い出を何かしらの形にしようと考えました。
選ばれたのはイタリアサイトの作成でした
旅行の思い出を書く場所は、現代では色んな箇所にあるので自作する必要なんてないのでは？という意見もあると思います。
ただ、私は自分の好きなことを、好きな旅行先を、自分の思い出を、全力で表現できる環境が欲しかったというのがありました。
*写真は全て自分たちで撮影したものです。素人写真なので画質などは悪いかも
自分自身が振り返った際に
「また行きたいなぁ」と思える
「あぁこんなことあったね」と振り返れるよう
そして自分たちの経験を他の皆さんにも見てもらった際に
「イタリアいってみたいなぁ」
「お、この情報は参考になるなぁ」
「なんか読んでて楽しいなぁ」
と思ってもらいたいなぁと考えました。
（一旦は私のことを知ってくれている方々に読んでもらって、元気そうだなぁと思ってもらえたら嬉しいです）
サイトの技術構成は？
Next.js + MDX + Tailwind CSSといったシンプルな構成です。
MDXはMarkdownに加えてJSXを使用できるので、ちょっとしたコンポーネントなどを記事仕込めます。
また、記事の作成は私以外に妻も書くので、私だけが書ければ良いとう訳ではありませんでした。
ホスティングはVercelにしました。Hobbyプランで一旦試してみていますが、めちゃんこデプロイが簡単で良い感じです。
どんなことを考えて作成したのか
今回開発するにあたって、以下のことは気にしていました。
簡単に記事を書けるように工夫
自分で撮影した画像を載せる上で、サイトが重くならないようにする必要がある
デザインもシンプルに写真を押し出したり、操作して楽しい感じにしたい
スマートフォンでの表示も意識
簡単に記事を書けるように工夫
街の記事を書くにしてもどんな構成だと読みやすいかをあれこれ考えます。
考えた結果、以下のような構成のページと、あとは「滞在」などのタブで構成されている記事ページを作ることにしました。
これを行った街の数だけ記事を作成したいと思います。
行ったことのある州だけでも11, その州の中で行ったことのある街の数となると数え切れません。
しかし街ごとのページを作成したコンポーネントを使って、組み立てるのを実行するのは妻には難しい。また、共通コンポーネント化してあるとはいえ量があるので自分でやるにも手間がかかりました。
ですので、構成を考えたあとは、街名と州名を入れることで、そのページを構成する一通り必要なものを用意するscriptを作成しました。
テンプレートも作成されるようにしているので、基本は記事を追加すれば良い状態にしました。
自分で撮影した画像を載せる上で、サイトが重くならないようにする必要がある
これに関しはNext.jsのImageコンポーネントでも最適化をしてくれるのですが、改めて画像を扱う上での大切そうなことを学びました。
こちらについては私が書くよりも、以下の記事がとても参考になるのでどうぞ。
他には、画像形式Webpがとても良かったのです。
私は恥ずかしながら知らなかったのですが、pngやjpgなどのほか形式の画像に対して、画質を保ったままファイルサイズを小さくすることが可能というとんでも形式です。Google公式の情報によると、可逆圧縮画像の場合、PNG画像と比べてサイズが26%小さくなり、非可逆圧縮画像の場合はJPEG画像と比べて25～34%小さくなるそうです。
macユーザーであれば、brewでinstallすることで簡単に変換が可能です。
デザインもシンプルに写真を押し出したり、操作して楽しい感じにしたい
正直ここに関してはまだ色々悩んでいます。
まだ改良しますが、イタリア地図のsvgを作成してクリックするとその州の記事にスクロールする感じにしたりは、こだわりがあって作ったりしていました。
フリー素材で公開されている地図をトレースして、イメージマップ ジェネレーターで州の周囲を選択して。。。。
スマートフォンでの表示も意識
現代において、スマホで見れるなんて当たり前かもしれませんが、スマホで読まれることが多いだろうなぁと思って対応したデザインにするようにしていました。（良かったら見てみてください）
終わり
正直まだ記事も全くなく、デザインもまだまだこれからという段階ではあるのですが、自分が好きなことをまとめたりするのは楽しいものですね。
（もの凄い中途半端な状態で公開しています）
皆さんもやってみようかな、と思えたら嬉しい限りです。
この記事でカンムに興味を持ってもらえた人がいたら、ぜひ以下の採用ページを覗いてみてください。