hideo54のブログいうていけろhideo54のブログhideo54情報技術やサブカルチャーが好きな学生です。通信解析Ad万一不快な広告が表示された場合はご報告ください。2017年5月1日この記事は最終更新日から半年以上が経過しており、情報が古い可能性があります。引き受け、昨日公開にまで至ることができました。https://fest.nada.sc/71st宣伝は文化委員会の仕事ですからそちらにお任せします。興味のある方はぜひ公式アカウントをフォローしてみてください。例年もそうですが、今年は特に、広報担当がかなり頑張って宣伝をしている印象があります。パソコン研究部はもちろん、他にも面白そうな企画が盛りだくさんですね。文化祭にいらっしゃってください!さて、この記事では、作成者の僕にしかできないこととして、技術的な裏側などを軽く書いていきたいと思います。普段の僕なら投稿前に校正して日本語をまともに整形しますが、今は文化祭直前なのに溜まっている仕事がいっぱいあって時間がない状態なので、校正なしで投稿します。乱文になりますが許してください。(リポジトリはGitHubで公開しています!)僕が技術的に頑張ったことなるべく設計を綺麗にするもちろん生で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で色塗りもできることに気が付きました。いうわけで、最終的に、JSONに書かれた各企画データを読み込み、その企画の場所データをもとに該当する階のSVGマップをincludeして、その下にstyleべた書きでその企画のaddressと同じclassの要素に色を塗る、というpugを作ることになりました。これらのpugファイルを企画数だけ(=40個以上)作るわけにはいかないので、これらのpugファイルを自動生成するNode.jsプログラムを作成し、それを回したあとビルドする、という仕様になっています。block;であることを教えてやる必要があります。SVGのサイズを他ブラウザと同じように調整することができません。150pxになっているが、調べてみたところこれは、SVG1.1の仕様をまだ実装していないIEがCSS2.1の仕様に従った結果のようです。widthのサイズを指定したところで、枠がフル幅になるだけで中身はそのままになる、という無慈悲な結果になってしまいます。heightのサイズを指定するとこれはうまくいくので、min-heightを指定することでなんとかしました。各SNSへのリンクの追加srcsetで別解像度の画像を用意し、最適化(つまり、現状は、低解像度デバイスでも高解像度画像を表示している...。)引き受けた当初はそこそこ意欲的だったのですが、時間が経つにつれやる気が下がっていき、早く終わらせたいという気持ちになっていたので、やってもそんなにメリットのないこれらの作業は省略しました。作業全体のうち、僕が関わったことではないこと(予防線)ロゴの作成(別のデザイン担当者によるものです)マップの作成(さらに別のデザイン担当者によるものです)サーバーへのデプロイ、設定(Web委員会によるものです)これらについては僕は関わってないので僕を叩かないでください。(サイトのデザインとかはほぼ僕の担当なので叩いてくれていいです。ポエム作り終わってみるとなるほど、確かにやりがいはあるが、しかし、やりがいだけで無給で引き受けられる程度の楽な仕事ではなかった(技術的作業のみを想定していたのにいつのまにか雑務をしていたなど)。結果的に部の方の仕事を遅らせることになってしまったので引き受けたのを後悔している。いただいたデータが全然正規化されていなかったり、最新のデータが一箇所に集約されていなかったりといった感じで、そちらの方面での苦労が非常に大きかった。デザイナーからいただいたマップのAIデータのレイヤーやグループの管理がなんというかその...アレで、つらかった。大変な作業はこれを自分で一からグループ化し直したことだった。委員の方は皆優しく、また熱意を感じました。引き受けた理由は、かなり懸命なお願いを受け断りづらかった上、技術的には楽なためすぐ終わり、それほど他の作業に影響がでないだろうと考えたからであるが、実際は技術的でない部分で消耗しやる気が消失して締切に遅れ、他の作業にも影響が出まくってしまって、自分の押しに対する弱さやスケジュール管理の甘さを再認識することとなった。頼りに無給で働くのはつらい。Wishlistを貼っておきます。https://wishlist.hideo54.com以上です。