はじめに
こんにちは、ナトといいます。こういうサイトを作りました。
概要
機能面
技術面
- テンプレート：Astro Ink
- 洗練されたデザインのテンプレがよかったので、これを選択。
- Hugo-Paper Modの亜種。
- サーバー：GitHub Pages
- ランニングコストの観点で採用。
- 静的なホスティングしかできないが、今回の要件なら問題ないと判断。
- 軽度な修正であればスマホ1つで簡単に行える点も魅力的。
- GitHubにアクセスして直接mainブランチを書き換えれば自動でコンパイルしてデプロイされる。GitHub Actionsくん万歳！
- リポジトリ：walk-ushiku/walk-ushiku.github.io
- ソースコード
-
src/pages：ページ構造の指定
- 基本的にここのファイル構造がそのまま出力されると思って良い
- 例えば、
src/pages直下のindex.astroがindex.htmlになる
- src/layouts：レイアウト指定
-
src/components：コンポーネント置き場
- 例えばYouTubeEmbed.astroにはYouTubeリンクを埋め込むためのコードが置いてある
- これのおかげで、
<YouTubeEmbed videoId="sciswj590do" />だけでYouTubeの埋め込みコードが再利用できる- 冒頭に
import YouTubeEmbed from '$/components/YouTubeEmbed.astro';を置く必要あり
- 冒頭に
- モジュール化によって再利用可能性を向上させられるので非常に便利
- デフォルト引数にも対応しているので、「今回だけ表示幅狭くするか」にも対応できる
-
src/pages：ページ構造の指定
詳細
こだわりとか便利なポイントとか紹介します。
トップページ
アクセシビリティを第一にデザインしています。必要な情報のアクセスに必要な操作量・待機時間を最小限にするために、不必要なモーションや重い画像を入れていません。
サイトマップ的な役割についても、ピクトグラムを用いることでユーザーの認知負荷を低減するよう試みています。
使い方の説明が丁寧に書いてあるわけではありませんが、むしろ冗長な文字を排することが繰り返し使うユーザーの利便性を高めるのではないかと考えています。アフォーダンス（正しい用語としてはシグニファイアらしいですが）を意識したデザインを心がけることで、初見のユーザーにも直感的な操作性を与える狙いがあります。特に、ピクトグラムの持つ視覚的訴求力は直感的な操作を促すのに最適ではないでしょうか。
観光データ管理
観光地のデータはこのディレクトリに保管されています。
例として bakudoh.mdx を見てみましょう。（以下はCommit 9f983ae 時点の内容です）
---
title: 麦童
lat: 35.970413372023025
lng: 140.14315078248973
id: 31
tags:
- 飲食店
description: 駅周辺のベーカリーです。
gmap: https://maps.app.goo.gl/nA4sUmjswHbxQdsn8
icon: /images/icon_photo/bakudoh.jpg
---
import LinkedImage from '$/components/LinkedImage.astro';
- アクセス
- 牛久駅東口 徒歩11分
- かっぱ号 富士山 徒歩1分
- 営業時間：7時～19時
<LinkedImage
src="/images/photos/bakudoh.jpg"
href="/photo_pages/bakudoh"
/>
駅から徒歩10分ほどのところにあるパン屋
朝7時から営業しているので朝活にピッタリ。
牛久シティホテル本館からも徒歩13分と、駅に向かう道中で朝ごしらえをするのにも！
オープンしながら順次出来立てのパンが上がってくるので、あつあつのパンを食べれるものも多い。
希望すれば待つことも可能らしい！（嬉しい！！！）
初回で500円の買い物をすればスタンプカードを貰えるとともに、以降コーヒー１杯無料でいただけるサービス付き。
店の裏にテーブルと椅子が用意されているので、買ってすぐ食べられるのも嬉しいところ！
<LinkedImage
src="/images/photos/bakudoh-eatin.jpg"
href="/photo_pages/bakudoh-eatin"
/>
mdx形式はmarkdownとJSXを組み合わせた形式なので、自然言語の記述はmarkdownの記述に基づきつつ、プログラミング言語的な記法を組み合わせることができます（詳しくはここらへんなどを参照）。
特に冒頭のディクショナリ定義が便利で、このページのメタ情報のようなものを他のページで管理できます。このおかげで、例えば地図で「観光地一覧」を作りたいときに、このmdxファイルたちを配列データとして扱って観光地一覧を作ることができます。非常に便利です。
ギャラリー
冒頭で「GitHub Pagesは静的なサイトしかホストできない」と言いましたが、このページは動的にコンテンツが変わっています。この点がちょっとしたおもしろポイントだったりします。
このページはjavascriptを使ってクライアントサイドで乱数を振って、その場で表示内容を書き換えています。
種を明かしてしまえば「そんなもん」といったところですが、擬似的に動的なコンテンツが作成できるのは面白いですね。
写真追加プログラム
Gitリポジトリを眺めていると、import_photoというディレクトリが見つかります。こいつは直接的にページに関わっているわけではありません。
中を覗いてみると2つのpythonプログラムと1つのmdxテンプレートファイルがあります。
simple_renamer.pyでは画像ファイルを見ながらリネームしていくことができます。
リネームしたファイルはmain.pyによって画像ページの作成作業と/public以下への追加作業が同時に行われます。（追加時に画像データの軽量化も行います。）
写真は現在200枚程度ありますが、それらをすべて手作業で管理することはできないのでこのようなプログラムが組まれています。
おわりに
日曜大工的なプログラムなので、ツッコミどころは全然あると思います。コメント等で知恵を貸していただければ幸いです。
今後も更新作業を頑張ります。