生活を良くします - 怠惰なプログラミング

読者です 読者をやめる 読者になる 読者になる

生活を良くします-怠惰なプログラミング

外資系でエンジニアをやっています。便利なサービスや商品、プログラミングで作ったものなどを紹介していきます

isotopeを使ってはてなブログカスタマイズを考えた:Jquery?Javascript?プロトタイプのみ

ブログ プログラミング デバッグ

はてなブログでJavascriptを使いたい

今回の試作品

文字のボタンなどを押して見てください。カテゴリーが切り替わります。

試作品の簡単な紹介

紹介したい様々なカテゴリーの記事などをまとめてあります。Allを押すと全てのカテゴリーに分類される記事が表示されます。

Animeを押すと「アニメ」カテゴリーの記事が、Movieを押すと「海外ドラマ・映画」カテゴリーが、Usefulを押すと「便利」カテゴリーの記事のみ表示されます。

また、PCとスマホで勝手にレイアウトを変えてくれるようにしたので、特にスマホでは写真のように横に記事を並べられて面白いかなと思いました。

AMPではうまくいかないのでこちらで確認してみてください:http://www.what-a-day.net/entry/isotope-hatena-blog

カスタマイズっぽいプロトタイプの良いところ

変化が面白い

勝手に記事が浮き出てきたり消えたりと視覚的に変化がでて面白いように思えます。好奇心からでも操作してくれそうなのがベストです。

頑張れば順番をもっといじれたりできるみたいです。個人的な感想で恐縮ですが、カテゴリーから記事を探すときはちょっとめんどくさく思えてしまうのでこういう変化をつけながらやると見やすくて良いかなという気がします。

敷き詰めれる

f:id:what_a_day:20161229234107j:plain:w450

勝手に詰めたりしてくれるので一度に見る情報が多くなります。そのため、気に入った情報が目に入りやすくなりそうということを期待しています。

スマホでは二列になっています。最初は三列でしたが、画像を入れると二列が限界のように思えます。

使ったライブラリ・技術・言語

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というものを見つけたはてなブログで使用してみた
  • 簡単なプロトタイプを作ってみたい