第71回灘校文化祭のホームページを作成しました
この記事は最終更新から半年以上経過しており、内容が古い可能性があります。
明日と明後日、つまり5/2 (火), 5/3 (水祝) に、毎年恒例の灘校文化祭が開催されます。
この度、史上初の試みとなるホームページ作成を文化委員会に委託され、 文化委員でもWeb委員でもないのに 引き受け、昨日公開にまで至ることができました。
こちらです: https://fest.nada.sc/71st
宣伝は文化委員会の仕事ですからそちらにお任せします。興味のある方はぜひ公式アカウントをフォローしてみてください。
例年もそうですが、今年は特に、広報担当がかなり頑張って宣伝をしている印象があります。パソコン研究部はもちろん、他にも面白そうな企画が盛りだくさんですね。ぜひ文化祭にいらっしゃってください!
さて、この記事では、作成者の僕にしかできないこととして、技術的な裏側などを軽く書いていきたいと思います。
普段の僕なら投稿前に校正して日本語をまともに整形しますが、今は文化祭直前なのに溜まっている仕事がいっぱいあって時間がない状態なので、校正なしで投稿します。乱文になりますが許してください。
僕が技術的に頑張ったこと
なるべく設計を綺麗にする
もちろん生でHTMLやCSSを書くわけにはいきません。HTML生成にpugを使い、以下のようなことをしていました。
- テンプレートを作って各ページの方でextendsする
- なるべくデータはJSONファイルに収納して、pugからそれを拾ってeachで回す
- 各SVGマップをincludeで使いまわす (後述)
pug はクソ便利で神。
他に、CSS 生成に LESS を使ったりしました。生成作業は Node.js でやり、開発中のビルドを楽にするために gulp も使いました。
JavaScriptなしで書く
AMP 対応させたかったので、JavaScript なしを貫き、極力 CSS で作業していました。結局対応しませんでした (後述) が、まあ軽いから良しとする!w
マップを全てSVGにする
文化委員会から、マップの各枠を押すとその企画に飛べるようにできれば嬉しいという話があったので、デザイン担当者からもらった、Illustrator で作られたベクタマップを SVG にエクスポートし、そこにリンクを仕込んで遷移できるようにしたり、class を仕込んでページごとにそのページの企画を色付けできるようにしたりしました。
結果として、これまで SVG を Web で使う経験はほぼなかったので、非常に勉強になりました。
当初は img タグを使えばいいのかなと思っていたけど、その場合、リンクが有効にならないし、CSSでの色塗りもできません。だからといって手動で SVG べた書きするわけにもいきません。 これには少し悩みましたが、保存したファイルを pug で include すれば自動で SVG べた書きしてくれて、後ろの CSS で色塗りもできることに気が付きました。pug は神。
というわけで、最終的に、JSON に書かれた各企画データを読み込み、その企画の場所データをもとに該当する階の SVG マップを include して、その下に style べた書きでその企画の address と同じ class の要素に色を塗る、という pug を作ることになりました。これらの pug ファイルを企画数だけ (=40個以上) 作るわけにはいかないので、これらの pug ファイルを自動生成する Node.js プログラムを作成し、それを回したあとビルドする、という仕様になっています。(なお、場所をもとにマップの階を選別する過程には何個か例外があるため、そこそこ汚いことになっている)
IEにたぶん対応した
作成においては HTML5 をふんだんに利用しているのですが、IE はなんと main タグなどの HTML5 タグを知らない子扱いするので、display: block; であることを教えてやる必要があります。
また、SVG のサイズを他ブラウザと同じように調整することができません。デフォルトで height: 150px になっていますが、調べてみたところこれは、SVG1.1 の仕様をまだ実装していない IE が CSS2.1 の仕様に従った結果のようです。width のサイズを指定したところで、枠がフル幅になるだけで中身はそのままになる、という無慈悲な結果になってしまいます。height のサイズを指定するとこれはうまくいくので、min-height を指定することでなんとかしました。
当初やりたかったけど時間とやる気の問題で結局やらなかったこと
- AMP対応
- 各 SNS へのリンクの追加
- srcset で別解像度の画像を用意し、最適化 (つまり、現状は、低解像度デバイスでも高解像度画像を表示している…。)
引き受けた当初はそこそこ意欲的だったのですが、時間が経つにつれやる気が下がっていき、早く終わらせたいという気持ちになっていたので、やってもそんなにメリットのないこれらの作業は省略しました。
作業全体のうち、僕が関わったことではないこと
- ロゴの作成 (別のデザイン担当者によるものです)
- マップの作成 (さらに別のデザイン担当者によるものです)
- サーバーへのデプロイ、設定 (Web委員会によるものです)
ポエム
- 作り終わってみるとなるほど、確かにやりがいはあるが、しかし、やりがいだけで無給で引き受けられる程度の楽な仕事ではなかった (技術的作業のみを想定していたのにいつのまにか雑務をしていたなど)。結果的に部の方の仕事を遅らせることになってしまった。
- いただいたデータが全然正規化されていなかったり、最新のデータが一箇所に集約されていなかったりといった感じで、そちらの方面での苦労が非常に大きかった。
- デザイナーからいただいたマップのAIデータのレイヤーやグループの管理がなんというかその…アレで、つらかった。(もともと他人に見られる予定はなかったので多少同情はしますが、しかし…) 正直一番大変な作業はこれを自分で一からグループ化し直したことだった。
- 委員の方は皆優しく、また熱意を感じました。
- 委託をお願いされた際、しぶっていたら「承認欲求を満たしていけ」みたいなことを言われた記憶があるが、結果として、完成して校内新聞で宣伝されても広報担当者の名は出て僕の名が出てきていないのは、これは一体…? という気持ちはある。
- 引き受けた理由は、かなり懸命なお願いを受け断りづらかった上、技術的には楽なためすぐ終わり、それほど他の作業に影響がでないだろうと考えたからであるが、実際は技術的でない部分で消耗しやる気が消失して締切に遅れ、他の作業にも影響が出まくってしまって、自分の押しに対する弱さやスケジュール管理の甘さを再認識することとなった。
以上です。