Optimization、検索エンジン最適化)対応について取り上げます。SEOについてはご存じの方も多いかと思いますが、SMOについてはあらかじめ簡単に説明しておきます。Optimization)のことです。ブログや掲示板、SNS上などで自分たちが作成したWebサイトについて言及してもらうことで、認知度や評判を高める施策のことを指します。Ajaxの“問題点”とは?Ajaxを使ったWebページでは、画面遷移をすることなく画面内の一部のみを書き換えることで、スムーズなサイト閲覧を実現します。特別な処置をしなければ、次のような問題点を抱えてしまいます。SMOの実現が難しい画面の状態が切り替わってもURLが変わらない。このため、そのURLを掲示板やSNSなどで紹介しても、そのURLを開いたほかのユーザーには、画面が切り替わる前の状態が表示されてしまうSEOの実現が難しいJavaScriptでページを動的に変化させるため、JavaScriptが実行できないクローラは、各状態ごとのページにアクセスさせることができない。このため、検索エンジンにキャッシュされない最初は、これらの問題に対して特別な処置を行っていない、ごく基本的なサンプルを紹介します。ステップ1:SMO、SEO対応を行っていないサンプルまずは、SMO、SEO対応を行う前のサンプルを見ていきます。このサンプルは、タブA、B、Cを押すことによって、ページの一部に別々のHTMLファイルが動的に表示されるものです。サンプル1(タブA、B、Cを押して見てください。全体を表示するHTMLファイル最初に、全体を表示するHTMLファイルを見てみましょう。/></body></html>次の4つのファイルを<script>タグを使って読み込んでいます。編集部注:prototype.jsについて詳しく知りたい読者は、連載第2回の「prototype.jsでYouTubeをインクリメンタルサーチ」をご参照ください。これまでの連載のように、自分で作成したプログラムを以下のようなMVCで別のコードに分けて作成しています。M(モデル)コアロジックを記述するV(ビュー)表示変更処理を記述するC(コントローラー)イベントハンドラの定義や、設定に関する記述をするタブが3つあり、以下のように、「tab」というクラスが割り振られ、idには、「tab-a」「tab-b」「tab-c」などが割り振られています。次に、コントローラーを見てみましょう。ajaxrecipe.SmoSeoSampleController();最初に、コンストラクタが呼ばれます。コンストラクタの中では、DOMがロードされたらonLoadDOMメソッドが呼ばれるようにハンドラを設定しています。イベントハンドラの設定は、prototype.jsのobserveメソッドを使っています。このメソッドの中では、以下のタブのクリックイベントに、onClickTabメソッドを設定しています。id="tab-c">タブC</a>また、デフォルトのタブを開くために、onClickTabを引数なしで呼び出しています。onClickTabメソッドではまず、開くべきタブを判定します。イベントオブジェクトがある場合は、Eventインスタンスのelementメソッドで取得します。イベントオブジェクトがない場合(=デフォルトのタブを開くためにonLoadDOMメソッドから呼び出されるケース)は、最初の要素を開くべきタブとして設定します。ビューのchangeTabメソッドにその要素のIDを渡して、タブを開くように依頼します。ビュービューのコードは次のようになります。ビューでは、与えられたIDのタブをアクティブ化し、それまでアクティブ化されていたタブは非アクティブ化します。アクティブ化されたタブのコンテンツをモデルから取得し、その内容で更新をします。それまでアクティブ化されていたタブは非アクティブ化する。アクティブ化されたコンテンツで更新する。モデルモデルのコードは次のようになります。モデルはアクティブ化された指定タブのコンテンツをXMLHttpRequestで取得し、それを返します。ajaxrecipe.SmoSeoSample.contents;}};いよいよ次ページからは、ステップ1のサンプルにSMO対応、SEO対応を行う方法について解説していきます。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。