第71回灘校文化祭のホームページを作成しました

明日と明後日、つまり5/2(火), 5/3(水祝)には、毎年恒例灘校文化祭が開催されます。

この度、史上初の試みとなるホームページ作成を文化委員会に委託され、文化委員でもWeb委員でもないのに無給で引き受け、昨日公開にまで至ることができました。
こちらです→ https://fest.nada.sc/71st

宣伝は文化委員会の仕事ですからそちらにお任せします。興味のある方はぜひ公式アカウントをフォローしてみてください。

例年もそうですが、今年は特に、広報担当がかなり頑張って宣伝をしている印象があります。パソコン研究部はもちろん、他にも面白そうな企画が盛りだくさんですね。
ぜひ文化祭にいらっしゃってください!

さて、この記事では、作成者の僕にしかできないこととして、技術的な裏側などを軽く書いていきたいと思います。

普段の僕なら投稿前に校正して日本語をまともに整形しますが、今は文化祭直前なのに溜まっている仕事がいっぱいあって時間がない状態なので、校正なしで投稿します。乱文になりますが許してください。

(リポジトリはGitHubで公開しています! https://github.com/hideo54/NadaCultureFest2017 )

僕が技術的に頑張ったこと

なるべく設計を綺麗にする

もちろん生でHTMLやCSSを書くわけにはいきません。HTML生成にpugを使い、以下のようなことをしていました。

  • テンプレートを作って各ページの方でextendsする
  • なるべくデータはJSONファイルに収納して、pugからそれを拾ってeachで回す
  • 各SVGマップをincludeで使いまわす(後述)

pugはクソ便利で神。

他に、CSS生成にLESSを使ったりしました。生成作業はNode.jsでやり、開発中のビルドを楽にするためにgulpも使いました。

JavaScriptなしで書く

AMP対応させたかったので、JavaScriptなしを貫き、極力CSSで作業していました。結局対応しませんでした(後述)が、まあ軽いから良しとする!w

(実際、ES2015じゃないJavaScriptなんて書きたくないし、ES2015で書くためにごちゃごちゃ導入するのも嫌だったので、これで正解だったと思っている。)

マップを全て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データのレイヤーやグループの管理がなんというかその…アレで、つらかった。(もともと他人に見られる予定はなかったので多少同情はしますが、しかし…) 正直一番大変な作業はこれを自分で一からグループ化し直したことだった。
  • 委員の方は皆優しく、また熱意を感じました。
  • 委託をお願いされた際、しぶっていたら「承認欲求を満たしていけ」みたいなことを言われた記憶があるが、結果として、完成して校内新聞で宣伝されても広報担当者の名は出て僕の名が出てきていないのは、これは一体…? という気持ちはある。
  • 引き受けた理由は、かなり懸命なお願いを受け断りづらかった上、技術的には楽なためすぐ終わり、それほど他の作業に影響がでないだろうと考えたからであるが、実際は技術的でない部分で消耗しやる気が消失して締切に遅れ、他の作業にも影響が出まくってしまって、自分の押しに対する弱さやスケジュール管理の甘さを再認識することとなった。
  • 相手の言う “““やりがい””” だけを頼りに無給で働くのはつらい。
  • 突然ですが、Amazon Wishlistを貼っておきます。 https://wishlist.hideo54.com

以上です。


コメントする