BADオープンデータ供養寺、匠たちの技
この記事は CivicTechテック好き Advent Calendar 2020 の12日目の記事です。
今日は供養寺３本立てでお送りしております。以下の記事もぜひご参照ください。
「BADオープンデータ供養寺」誕生秘話 Sayoko Shimoyama
昔懐かしのアクセスカウンターを作った話 @Nekoya3
過日、BADオープンデータ供養寺がとうとうインターネットの大海原に建立されました。
住職（※1）の「ぶっ飛んだデザインにした方が良いのでは」というひとことに、腕に覚えありの宮大工（※2）達が結集し、懐かしのインターネッツネタをモダンコーディングで再現しようと力を合わせたのでした。
BADオープンデータ供養寺 建立予定地（githubリポジトリ）には
- カーソルをローソクにする
- お経を流す
- お鈴を鳴らす
- 餅を投げる
といったissueが並び、一体なんのこっちゃ、という風情を醸し出していますが、私たちは至って真剣です。
MARQUEEタグじゃないマーキーや、CGIじゃないアクセスカウンターなど、ローレゾなアイテムを実現するハイテクノロジー()の数々をお楽しみください。
※1…言わずと知れた我らがリーダー、下山紗代子氏のこと。オープンデータの普及に東へ西へと駆け回っている。すっかり「住職」と呼ばれるのが板についている。
※2…私たちの間ではエンジニアのことを「宮大工」、デザイナーのことを「宮造りデザイナー」としている。そして彼らの名前は「〜〜匠」と呼ばれる。
匠たちの技
サイトからいくつかご紹介します。
ローソクのカーソル
ドット絵のgifアニメーションをがんばった前川匠の作。マウスオーバーする要素によって形状を変えているのが素晴らしいです。inputフィールドではちゃんとテキストカーソルになるんですよ。
鳴らせるお鈴
こちらも前川匠の作。ローソクのカーソルをお鈴の近くに持っていくとお鈴棒に変化。ちゃんと音も出ます。
MARQUEEタグじゃないマーキー
インターネッツといえばMARQUEEだよね、ということで、すでに廃止されたmarqueeタグを再現すべくググったら、運よくcssが載っかっていました。そちらのcssをありがたく利用させていただき、Reactのコンポーネントに仕上げた一品です。
CGIじゃないアクセスカウンター
忘れちゃいけないアクセスカウンター。CGIに頼らない方法なんてあるの？という難題に挑んだ吉沢匠の作。それを解決したアイディアに脱帽です。どうやって実現したかはぜひ吉沢匠本人の言葉を聞いてください。
次はキリ番ゲットを実現したい。
住職日めくりカレンダー
「寂聴 日めくりカレンダー」的なことをやりたいよね、という古川匠のアイディアから生まれた一品。実はカレンダーでもなんでもなく、リロードするたびにランダムにテキストが入れ替わる、というだけです。住職の珠玉のお言葉に胸を打たれます。
Gatsbyの採用
サイトの構築にはGatsby.jsが採用されました。Gatsby.jsはReactで構築するSSG（静的サイトジェネレーター）です。採用を決めたのはosokenさんですが、github pagesが使える・markdownでコンテンツが書ける・共同作業しやすい、といった理由で選ばれたと記憶しています。
Gatsbyを利用するのに切っても切れないのがGraphQLです。RESTにどっぷり浸かっていた私は当初なかなか慣れなかったですが、エンドポイントが複雑になりがちなRESTよりもいまや普及しているかもしれないですね。
Gatsbyではあまり深く考えることなくGraphQLが利用できます。
モダンな技術「Gatsby Image」
そしてGraphQLを利用した画像最適化「Gatsby Image」こそが人々の心を震わせる最大の機能だと私は思っています。画像最適化とは、大きなサイズの画像をデザインに合わせて小さくしたり、スマホブラウズで無駄な容量を読み込むのを防いだり、画像を効率的に遅延ローディングしたりすることです。これらの画像最適化は公式プラグインgatsby-imageを組み込むことで実現できます。
gatsby-imageはpngおよびjpg画像でその力を発揮します。gifは使えません。…あ、供養寺のサイトはほとんどがgifでした…だって、インターネッツだからね。
とりあえず、画像最適化はほぼここでしか役になっていないであろうヒーローイメージのコンポーネントのソースコードを載せておきます。
「竣工」ボタンを押すと足場が外れ、「建設中」を押すと再び足場が現れるというくだらない、もとい、ささやかなギミック。suncalcを用いて日の出後と日没後で寺画像を差し替えるといった粋な計らいが施されています。
他にもいろんな小技が効いているのですが、その紹介はまた別の機会に。
技の一端をのぞいてみたい方はぜひgithubへお越しください。あなたの寄進（コントリビュート）をお待ちしています 🙏
