isotopeを使ってはてなブログカスタマイズを考えた:Jquery？Javascript？プロトタイプのみ
はてなブログでJavascriptを使いたい
今回の試作品
文字のボタンなどを押して見てください。カテゴリーが切り替わります。
試作品の簡単な紹介
紹介したい様々なカテゴリーの記事などをまとめてあります。Allを押すと全てのカテゴリーに分類される記事が表示されます。
Animeを押すと「アニメ」カテゴリーの記事が、Movieを押すと「海外ドラマ・映画」カテゴリーが、Usefulを押すと「便利」カテゴリーの記事のみ表示されます。
また、PCとスマホで勝手にレイアウトを変えてくれるようにしたので、特にスマホでは写真のように横に記事を並べられて面白いかなと思いました。
AMPではうまくいかないのでこちらで確認してみてください：http://www.what-a-day.net/entry/isotope-hatena-blog
カスタマイズっぽいプロトタイプの良いところ
変化が面白い
勝手に記事が浮き出てきたり消えたりと視覚的に変化がでて面白いように思えます。好奇心からでも操作してくれそうなのがベストです。
頑張れば順番をもっといじれたりできるみたいです。個人的な感想で恐縮ですが、カテゴリーから記事を探すときはちょっとめんどくさく思えてしまうのでこういう変化をつけながらやると見やすくて良いかなという気がします。
敷き詰めれる
勝手に詰めたりしてくれるので一度に見る情報が多くなります。そのため、気に入った情報が目に入りやすくなりそうということを期待しています。
スマホでは二列になっています。最初は三列でしたが、画像を入れると二列が限界のように思えます。
使ったライブラリ・技術・言語
isotope
入るなり元素記号の面白いサンプルが置いてあります。 isotope.metafizzy.co
商用サイトに使用する以外であれば無料で使用できるパッケージです。結構昔からあったようなのですが、最近その存在を知りました。ちょうど探していた機能に近かったので使って見ることにしました。
レイアウトをアニメーションのように変更してくれたり、クラスによるフィルタリングでカテゴリ分類ができたりと便利なパッケージです。
このisotopeやstyle.cssを外部ファイルとして設定すればデバッグなどが捗ります。 www.what-a-day.net
考えられるエラー
遭遇するといえばこのようなエラーだと思います。
Uncaught TypeError: $function.function is not a function
関数として見られていないということなので直接Jqueryだと教えてあげることにします。問題となっている関数の箇所を以下のコードで囲みましょう。これで自分の場合はうまくいきました。
jQuery(function($){ /* javascriptコードなど 内側に入れて囲むようにする */ });
またjqueryのソースを記事中から参照しようとしたところこれもエラーになりました。Jqueryを別の場所で参照しているのにもかかわらず複数呼ぶとエラーになることもあるようです。
こういうやつ。
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
参考にしたサイト：jQuery Isotope Tutorial | 9bit Studios
まとめ
- Javascriptの練習としてカスタマイズを探した
- isotopeというものを見つけたはてなブログで使用してみた
- 簡単なプロトタイプを作ってみたい
