MD図書サイトを作ったよ

メディアデザイン専攻所蔵図書一覧

このぐらいだったらMDで学んだ内容だけで作れるよ〜と言うことで備忘録兼ねて書いておこう。私の前提スペックとしてjQueryはギリギリ書けるぐらい。そもそも英単語が書けない。

• 全体の工期は3週間ぐらい？実際ほとんど触ってない期間とかもあったのでおそらくちゃんとやればデータ入力含めて1週間で終わる。
• まず書籍情報をExcelに纏めてCSVからJSONに変換した。Excelから直でJSONに書き出すツールもあったんだけど謎に階層が付いたりしたので回避策。ちなみに書籍情報を全部手打ちで打ったけどこれが一番時間かかった。精神も死んだ。
• 流れとしてはJSONを読み込む→フィルタリングを掛ける→結果を表示させるって感じ。PHPを新規で勉強したくなかったのでJSONとjQueryを使ったけど多分PHPでやった方が良い。
• コーディングだけなら2日で終わったのでいかに書籍情報の手打ち入力が厳しかったかお判りいただけるだろう。

• カテゴリ一覧のアコーディオンメニューはjQueryの.slideToggle();
• 最初は閉じた状態にしたければターゲットのCSSに”display:none”を書いておく。それだけで開閉するので便利。
• JSON読んでカテゴリでフィルタリングするコードはここを参考にした。

• CSS。すごく久しぶりにflortを使った。ちなみにPC以外からの閲覧は動作保証しません。
• ボタンのアニメーションはjQueryじゃ無くてCSSアニメーション"transition"。よくある動き。このぐらいの動きだったら絶対CSSでアニメーションさせた方が楽。
• ボタンのデザインはここの物を参考にロゴとイメージを合わせた。
• tableに枠線をつける時に"border-collapse: collapse;"をつけると線が整う。
• 本当は先頭のテーブルだけ幅を狭めたいんだけどそれをやるにはJSONを表示させているjQueryを弄らなきゃならないので諦めた。

読んでわかる通り実際に私が頭を回転させて書いたコードはごく一部で、実際は色々調べて出てきた物を参考に書き直しただけ。それでも一体何を使ったらいいのか、どういう仕組みにすればいいかが全然わからなくてかなり手探りでHTMLも直しまくった。

ので、必要なスキルって「ここはこういう物を探してくれば上手くいく！」っていう知識なんだなと思いました。

では、学生の皆さんは春休み明けたらたくさん本を借りに来てくださいね〜