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に記載がなかったので使い方を記載しますが
  1. head要素にrollover.jsへのパスを書く
  2. ロールオーバーさせたいimg要素にclass="imgover"と書く
  3. ファイル名の命名規則に注意し、ロールオーバー前の画像「●●●.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標準の日々で受講したセッションのレポート

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー