【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

3Jun2011

今春のサイトリニューアルで感じた事(Ajax編)

ブラウザテストの時だけIE使うとAjax部分がカクカク

僕の運営しているサイトでは毎年春になるとサイトのリニューアルをしています。
デザインリニューアルが大半を占める訳ですが、今年はシステムにもいろいろ手を加えました。
そこで、この1年間における「webサイトの環境の変化と対策」をまとめてみたいと思います。
  
 
【Ajaxがweb初心者にも扱えるまで普及】
 
そろそろ「Ajax」という言葉も、ずいぶん落ち着いてきた頃だと思います。新しい技術という物は、それが世間で騒がれなくなったら「死んだ」か「浸透した」かのどちらかですね。Ajaxに関しては当然「浸透した」結果でしょう。3~4年ほど前の騒がれ初めでは「Ajaxを使えばGoogle Mapが作れる」というイメージが先行していて、小規模ネットショップ運営者にとっては未知の領域でした。その為web技術に興味のある僕でさえ「Ajaxはプログラマのもの」と決めつけて距離を置いていました。
 
そんな僕ですが、今回のサイトリニューアルではAjaxライブラリのひとつ「jQuery」を使ったシステムを導入しました。具体的にはトップページに設置している「新商品が次々に表示されるバナー」を、FlashからjQueryを使ったプラグインの「SlideViewer」で作り直しました。
 
Ajax→Ajaxライブラリ→jQuery→プラグイン→SlideViewer と呼び名がどんどん変わってしまい、戸惑った方をいると思いますので簡単な説明をします 笑
 
・Ajaxとは、JavaScript関連技術で、動的にwebページを書き換える技術を指しています。
・Ajaxライブラリとは、Ajax技術で実現できる個々の要素(ドラッグ&ドロップ、画像の書き換えなど)をプログラムしたパッケージです。
・jQueryとは、とても人気のあるAjaxライブラリです。 どんなプログラムが書かれているのか?中身を見ても僕にはわかりません。。
・プラグインとは、実際に使える状態をプログラムしたJavaScriptコードとhtmlサンプルコードのセットです。いろいろなプラグインが公開されています。
・SlideViewerとは、画像を複数枚用意するだけで「自動でスライドするメイン画像」、その下に「全画像のサムネイル一覧」を実現できるプラグインです。

 
普段webショップを運営しているレベルの人であれば、実際に自分のサイトで動かすまでの時間は1時間程度です。僕も今回Ajaxライブラリを使うのは初めてでしたが、プラグインをダウンロード&画像を準備してサーバー上で動く状態までに20分。実際に使いたいページに埋め込み、公開する状態までカスタマイズし終えるのにプラス30分ほどでした。一度仕組みが分かってしまえば、次回からは違うプラグインを使う場合でも30分ほどで完了です。

また、Ajaxライブラリやそれらを使ったプラグインは膨大な数があるので、「やりたい」と思った頃の多くは実現可能なのです。
最近、多くのサイトで「画像をクリックしたら背景がグレーに変わり画像が中央に表示される」というシステムを見かけます。あの動作も、Ajaxライブラリ「prototype.js」「scriptaculous」を使用したプラグイン「lightbox」を使い簡単に実現できます。
 

ブラウザのJavaScript実行速度もかなり進化していますので、私達レベルのweb製作者においても、手軽にAjaxを組み込める時代になったと言えるでしょう。
 
 

関連記事