javascriptライブラリーjQueryの役立つプラグインを自分なりにまとめてみました。MovableTypeに実装し、機能よく使えるということを前提にクリップしています。うまく組み合わせ使うことで、ユーザービリティに富んだページを制作することができると思います。
javascriptライブラリーjQuery: The Write Less, Do More, JavaScript Libraryの数あるプラグインの中からサイト構築に役立つものをまとめてみました。
いろんなライブラリーやフレームワークが紹介されています。使うのであれば、coreの部分はひとつに絞ったほうがいいかと思っています。今回紹介するものは、基本的にMovableTypeで使えそうなものをクリップ。ただし、フォームとサーチなどのプラグイン情報に関しては今回のポストにはありません。
紹介する各プラグインの機能や設置などの参考ベースはYahoo!です。ajax機能を導入してからページビューが劇的にアップしたとのこと。ページビューの高いサイトを参考に習って似たようなものを実装するのがリスクがないかと思って以下のプラグインを紹介します。
tab-タブ
- Klaus Hartl - Stilbu"ro : Tabs plugin update: Support for (unobtrusive) Ajax
- http://www.stilbuero.de/2007/02/05/tabs-plugin-update-support-for-unobtrusive-ajax/
- demopage
demoページの中で、nocsript時にデザインが崩れないことを念頭に考えるとCustom HTML structureがいいかと思います。コレをベースにして他のセッティングを織り交ぜれば使えるものが出来上がるかと。
メニュー
- Superfish -- Suckerfish on ’roids
- http://users.tpg.com.au/j_birch/plugins/superfish/#
メニュー機能です。nocsript時にデザインが崩れません。スクリプト実行中ではアニメーションエフェクトが加わって感じのいいものが出来上がります。
スライダー
- Accessible News Slider Plugin v.1.1 for jQuery
- http://www.reindel.com/blog/src/jquery_slider_v1.1/
トップページに使えると思います。ちょっと勉強してjson形式の外部ファイルを読み込むようにすれば、もっと使えるものに。noscript時には、リスト表示されます。
ブログなんかでは、最近の記事なんかを新着記事の下部やサイド部分にこのパターンでサムネイルとタイトルだけを表示させてみてもかなりコンパクトに機能的になります。MovableTypeでも十分使えます。
スタイルシートスイッチ
- kelvinluck.com: Switch stylesheets with jQuery
- http://www.kelvinluck.com/article/switch-stylesheets-with-jquery
以前styleswitcher.js-スタイルシート切り替えjavascriptのポストで紹介したA List Apartで紹介されているスクリプトをさらにコード短くしたもの。実装も簡単なのがいいです。
- Stefan’s Blog ? Blog Archive ? JQuery FontSizer Plugin
- http://monkeysoft.com.au/blog/?p=3
フォントサイズを変更できるスイッチを表示するプラグインです。
フェード
- InnerFade with jquery
- http://medienfreunde.com/lab/innerfade/
実際にこのプラグインはTwitterのブログパーツで使っています。json形式の外部ファイルを読み込んでリスト表示、そのリストをプラグインを使ってフェードエフェクトで定期的に表示を切り替わるようにする。コンパクトに情報を見せることができます。注意点はフェードの切り替わる時間の設定で今現在は６秒ですが、８秒から１０秒程度が目がチカチカしなくて、閲覧するユーザーにも不快感を与えないかと。早すぎると目に痛みを覚えるというか、不快感を与えさせますので気をつけて。
history機能
- history plugin
- http://www.mikage.to/jquery/jquery_history.html
国内の方でプラグインを提供されている方がいました。ajax機能を実装していてもユーザビリティを考えてブラウザのhistoryにページを記憶させるといったものです。導入はページ構成を考えた部分で使うのがいいかと思います。プレゼンページなんかがいいんじゃないですかね。
- jQuery history/remote - solution for hijaxing links
- http://stilbuero.de/jquery/history/index.html#chapter-3
tabタブプラグインを作った方のhistoryプラグインです。
JSON
- JSON for jQuery | mg.to
- http://mg.to/2006/01/25/json-for-jquery
jsonファイルを読み込むためのプラグインです。実装が簡単です。MovableTypeでもすぐさま使えそうです。
ページ分割
- rikrikrik: pager jQuery plug-in
- http://rikrikrik.com/jquery/pager/
phpで作成された動的ページによくあるページ分割ができるプラグインです。これを使えば長いポストもすっきりします。ユーザーにできるだけスクロールさせることなく、サイド部分のコンテンツも視界に入るようにもできますね。高さ指定ができる・マークアップは
<div></div>要素で囲むだけ。使い勝手がいいです。ちょっとコードを改造すればプレゼン用のページにも使えそうな気がします。
その他のプラグインについて
今回は自分の見解を取り入れた過程でのプラグインの紹介です。他にも役立つプラグインはたくさんあります。WEBページ構築目的にあわせたプラグインを導入することをオススメします。WEBアプリケーション向けのものもいくつかありました。
イメージギャラリー機能などたくさんあります。個人的にはHighslide JS用アトリビュート追加-Movable Type（ムーバルタイプ）埋め込み画像カスタマイズで紹介しているHighslide JSがいいかと思ってますので今回はとりあげていません。
角丸やアニメーションなどは、個人的にいろいろと考える部分があるので紹介として取り上げていません。Effects・Events・JavaScript Utilitiesなどのページを勉強すれば、勝手のいいものがつくれるような気がします。
今のところフォームとサーチプラグインは探していない状態です。今後はページ内をサーチするユーザーが増えるという見方からもとっても興味がある項目です。もし、jQueryで使い勝手のいいものがあればトラバなどでおしえてください。
MovableTypeでこれらのプラグインとyahooUIのグリッドCSS、firefoxスタイルシートCSS3 Columns、そしてRightFieldsなんかを織り交ぜると新聞スタイルの複雑なレイアウトページもコンパクトで機能的なものが作れそうな気がします。
参考ページ
- RightFields | Plugins for Movable Type | staggernation.com
- CSS3 Columns - MDC
- 24 ways: Intricate Fluid Layouts in Three Easy Steps
jQueryの実践
Firebugをもっと使いやすくするためのブックマーク（jQueryバージョン）で紹介しているようにFirefoxエクステンションfirebugにjQuerifyブックマークを使って読みながら実践して勉強してみるといいと思います。
翻訳に関しては、英和辞書ひきまくる Greasemonkey スクリプト-和英に最適なjavascriptで紹介しているGreasemonkeyかUsing YUI in Greasemonkey Scripts ? Yahoo! User Interface Blogで紹介されているものをEn→jaに変更して使えば結構読めますよ。
- Tutorials - jQuery JavaScript Library
- http://docs.jquery.com/Tutorials
General Tutorialsを上から順に実践しながら勉強してゆくといいかと思います。
jQuery
- jQuery: The Write Less, Do More, JavaScript Library
- http://jquery.com/
- Plugins - jQuery JavaScript Library
- http://docs.jquery.com/Plugins
コメントする