ホームページ（のソース）を更新したよ

8/16に、ホームページのソースを更新しました。
コンテンツ的には変わりはないのですが＾＾；

以下、変更点をまとめます。

分類	項目	旧	新	+α
構成	html	html	jade
	コンテンツ情報	html	json
	テンプレート	html+javascript	jade
デザイン	css	css	sass, compass
	フレームワーク （レスポンシブデザイン）	非対応	Foundation	→追加調整(*1)
	フレームワーク （デザイン）	css	（Foundation）	bootstrap
	ファイル分割	コンテンツの種類単位	SMACSS（風）
	jquery	jquery1.x	jquery2.x
	lightbox	prettyPhoto	fancybox
自動化		-	grunt	gulp

+αは、試してみたいもの。

jadeは大活躍。
htmlのテンプレート化と、
コンテンツはjsonで設定したものを読み込んで、mixinなどで展開
これで、共通メニューとかコンテンツ追加とか楽になった。
アクセス解析などの部品や、構成要素を分割して、includeすることで、管理もしやすくなった。


cssは、sass,Foundationなど利用してみたが、活用しきっていない感。
レスポンシブデザインのデザインを利用したけど、デフォルトのサンプルを利用したからか、スマホから見ると自動でスマホの幅にならないなど、追加調整が必要みたい。(*1)
メニューやボタンなどのデザインも利用してみたいけど、基本設定できていない。デフォルトのまま。これはbootstrapのデザインも使ってみたいな。
jadeは、mixinとか機能を活躍していたけど、sassは、変数とかmixinとかの機能を全然活用していないので、もっと活用して作れるようにしたい。

ファイル分割は、SMACSSを参考にしたので、楽になったかな？
sassはあまり書いていないので、_imports.scssぐらいしか頻繁に更新しなかったけど＾＾；


ちなみに、イラスト表示のlightbox表示は、以前使用していたのがjquery2系に対応していなかったので、変更しました。今度のは、マウスホイールに対応していたり、サムネイル表示に対応したりと、いろいろ良い。
でも、こちらも、スマホなどで見るのは厳しいので、モバイルでの表示方法変更など考えないといけないですね。


jade, sassなどを利用したので自動コンパイルは、gruntを利用しました。
必要最低限の、ファイル監視、コンパイル、コピーぐらいしか利用してないです。
最適化とかも利用したほうが良いかな。。
こちらも、gulpも気になっている。


と、いろいろ書いているのですが、
イラストなど展示だけなら、コンテンツ追加が簡単なのは、ブログとかtumblr利用するとかなんでしょうね。昔、少し検討もしてました。
なので、もはや、上記のような技術を使ってのwebページ作成の実験という意味合いも強いかもしれません。



（追記 *1）
viewportの設定してなかっただけでした。

<meta name="viewport" content="width=device-width, initial-scale=1">

---

参考
Jadeについて
10分でわかるjadeテンプレートエンジン