2007年7月19日
Web標準の日々 J3 jsライブラリで実装する効率的なWeb制作
- jsライブラリで実装する効率的なWeb制作
- 西畑 一馬さん
- JavaScriptブームのおかげでさまざまなjsライブラリが公開されています。公開されているjsライブラリを使えば、プログラミングの知識がなくても、素敵な機能が使えるようになります。
LightboxやcurvyCorners、Image Rollover Code、alphafilter.jsなどのjsライブラリを使用した効率的なWeb制作方法、JavaScript がわからない人でも簡単に使えるjsライブラリ作成のコツもご紹介します。
Web標準の日々の受講セッションが、なぜかディレクション系が多かったので「明日すぐ役立つ系」のセッションを受講しておきたかったこと、さらに「便利そうだなぁ」と思いつつも手を出せなかったjsライブラリを知っておこうと思い、このセッションを受講しました。
セッション冒頭にてライセンスの話があり、その後4つのjsライブラリが紹介されました。詳しい使い方はセッションの講師・西畑一馬さんのブログ「to-R」にて書かれていますので、そちらを参考にしていただければと思います。
- Lightbox
- 画像を拡大表示してくれるjsライブラリ。CSS Nite Vol'17のフォトギャラリーでも使われていますね。業務では使えそうにないのですが、このブログでは結構使えそうです。
- 参照：to-R 「Lightboxを使い画像を拡大表示する。」
- curvyCorners
- ブロックレベル要素の角を角丸にしてくれるjsライブラリ。正直知りませんでした。こんな便利なjsライブラリがあったとは。。。すぐにでも仕事で使えそうです。
- 参照：to-R 「角丸javascriptライブラリ『curvyCorners』を使ってみる」
- Image Rollover Code
- その名の通り画像をロールオーバーしてくれるjsライブラリ。
こちらだけto-Rに記載がなかったので使い方を記載しますが- head要素にrollover.jsへのパスを書く
- ロールオーバーさせたいimg要素にclass="imgover"と書く
- ファイル名の命名規則に注意し、ロールオーバー前の画像「●●●.jpg」とロールオーバー後の画像「●●●_o.jpg」を用意する
（ロールオーバー後の画像はロールオーバー前の画像の拡張子の前に「_o」をつけるだけ）
- alphafilter.js
- 西畑さんが作られたIE6でも透過pngを扱うことを可能にするjsライブラリ。こちらもすぐに業務で使えそうです。
- バージョンアップ情報：to-R 「alphafilter.jsライブラリがバージョンアップしました。」
「js」というだけで身構えていた自分がいるのですが、こんなにも簡単に設置できるとは。今後も仕事で、個人のブログで積極的にjsライブラリーを活用させていただこうと思います。
最後に簡単なワークショップとして4～6人1組になって「あったらいいな、こんなjsライブラリ」をディスカッションすることに。近くに座っていた方々と名刺交換させていただき、いざディスカッション。「Shiftをクリックしながらチェックボックスが大量選択可能になるjs」とか「ユーザの設定を無視して、制作者の意図するとおりにプリントアウトしてくれるjs」などいろいろでましたが、私が提案した「横に並んだDIVの下がそろわないので、きちんとそろうライブラリ」で決定、発表させていただきました。そのほか発表されたライブラリ案もto-Rに掲載されています。
実際少し前にこの表現をやっているサイト（オーケーズデリカ「お弁当 月間献立表」）の存在を知り、パクってみようとしたのですが見事に挫折しました（笑）そういった経緯もあり強く推させていただいたきました。少しずつ作成にチャレンジしていただけるということで...西畑さん、よろしくお願いしますm(_ _)m
- 【関連エントリー】Web標準の日々で受講したセッションのレポート
-
- アクセシビリティ/ユーザビリティ「WCAG 2.0:見えてきたアクセシビリティの新基準/植木 真さん」（7月17日レポート公開）
- SEO/SEM「SEO・SMOを制するWebライティング/住 太陽さん」（7月18日レポート公開）
- JavaScript/Ajax/DOM「jsライブラリで実装する効率的なWeb制作/西畑 一馬さん」（7月19日レポート公開）
- Webディレクション「Web標準とIA/坂本 貴史さん」（7月20日レポート公開）
- アクセシビリティ/ユーザビリティ「事例に学ぶ!成果を上げるユーザ中心ウェブサイト戦略/遠藤 直紀さん」（7月21日レポート公開）
- XHTML+CSS「ブラウザ表示モード解説: 傾向と対策/上ノ郷谷 太一さん」（7月22日レポート公開）
- ユーザー・エクスペリエンス「Contextual Design 経験デザインへの人類学的アプローチ/棚橋 弘季さん」（7月23日レポート公開）
- Webディレクション「情報アーキテクチャ入門/長谷川 敦士さん」（7月24日レポート公開）
- タグ:
- 西畑一馬
