【2/17】今年は「濃厚」技術トーク！＠ITメールセミナー スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷
パターンとライブラリで作るAjaxおいしいレシピ
連載一覧へ
パターンとライブラリで作るAjaxおいしいレシピ（6）

Aptana Jaxerで解決するAjaxのSEO対策とは？


アークウェブ株式会社
志田 裕樹
2008/5/9

今回はAjaxの問題点であるSMO、SEOへの対応

- PR -

　今回はAjaxの「SMO」対応、「SEO」（Search Engine Optimization、検索エンジン最適化）対応について取り上げます。SEOについてはご存じの方も多いかと思いますが、SMOについてはあらかじめ簡単に説明しておきます。

　「SMO」とは、ソーシャルメディア最適化（Social Media Optimization）のことです。ブログや掲示板、SNS上などで自分たちが作成したWebサイトについて言及してもらうことで、認知度や評判を高める施策のことを指します。

■ Ajaxの“問題点”とは？

　Ajaxを使ったWebページでは、画面遷移をすることなく画面内の一部のみを書き換えることで、スムーズなサイト閲覧を実現します。ですが、特別な処置をしなければ、次のような問題点を抱えてしまいます。

  • SMOの実現が難しい
    画面の状態が切り替わってもURLが変わらない。このため、そのURLを掲示板やSNSなどで紹介しても、そのURLを開いたほかのユーザーには、画面が切り替わる前の状態が表示されてしまう
  • SEOの実現が難しい
    JavaScriptでページを動的に変化させるため、JavaScriptが実行できないクローラは、各状態ごとのページにアクセスさせることができない。このため、検索エンジンにキャッシュされない

　最初は、これらの問題に対して特別な処置を行っていない、ごく基本的なサンプルを紹介します。その後、ステップ2、3、4と3段階にサンプルに修正を加えていきながらSMO、SEO対応の仕方を紹介していきます（サンプルのライセンスはGPL 2となります）。

ステップ1：SMO、SEO対応を行っていないサンプル

　まずは、SMO、SEO対応を行う前のサンプルを見ていきます。このサンプルは、タブA、B、Cを押すことによって、ページの一部に別々のHTMLファイルが動的に表示されるものです。
サンプル1（タブA、B、Cを押して見てください。拡大表示はこちら）

■ 全体を表示するHTMLファイル

　最初に、全体を表示するHTMLファイルを見てみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
  <title>ステップ1: SMO、SEO対応を行っていないサンプル</title>
  <script type="text/javascript"
    src="javascripts/lib/prototype.js"></script>
  <script type="text/javascript"
    src="javascripts/app/controllers/ajaxrecipe/smo_seo_sample_cont
roller.js"></script>
  <script type="text/javascript"
    src="javascripts/app/models/ajaxrecipe/smo_seo_sample.js">
  </script>
  <script type="text/javascript"
    src="javascripts/app/views/ajaxrecipe/smo_seo_sample_view.js">
  </script>
  <link rel="stylesheet" type="text/css" href="../style.css" />
</head>
<body>
  <a href="javascript:void(0)" class="tab" id="tab-a">タブA</a>
  <a href="javascript:void(0)" class="tab" id="tab-b">タブB</a>
  <a href="javascript:void(0)" class="tab" id="tab-c">タブC</a>
  <div id="contents" />
</body>
</html>

　次の4つのファイルを<script>タグを使って読み込んでいます。

  1. javascripts/lib/prototype.js
    prototype.js バージョン1.6.0.2
  2. javascripts/app/controllers/ajaxrecipe/smo_seo_sample_controller.js
    コントローラー
  3. javascripts/app/models/ajaxrecipe/smo_seo_sample.js
    モデル
  4. javascripts/app/views/ajaxrecipe/smo_seo_sample_view.js
    ビュー
編集部注：prototype.jsについて詳しく知りたい読者は、連載第2回の「prototype.jsでYouTubeをインクリメンタルサーチ」をご参照ください。

　これまでの連載のように、自分で作成したプログラムを以下のようなMVCで別のコードに分けて作成しています。

  • M（モデル）
    コアロジックを記述する
  • V（ビュー）
    表示変更処理を記述する
  • C（コントローラー）
    イベントハンドラの定義や、設定に関する記述をする

　タブが3つあり、以下のように、「tab」というクラスが割り振られ、idには、「tab-a」「tab-b」「tab-c」などが割り振られています。

  <a href="javascript:void(0)" class="tab" id="tab-a">タブA</a>
  <a href="javascript:void(0)" class="tab" id="tab-b">タブB</a>
  <a href="javascript:void(0)" class="tab" id="tab-c">タブC</a>

■ コントローラー

　次に、コントローラーを見てみましょう。

    // ＠IT連載「Ajaxおいしいレシピ」用の名前空間オブジェクト
    var ajaxrecipe = new Object();

    ajaxrecipe.SmoSeoSampleController = Class.create({
    // コンストラクタ
    initialize: function() {
        document.observe("dom:loaded", this.onLoadDOM.bind(this));
    },
    // DOMがロードされたときのイベントハンドラ
    // タブのクリックイベントにイベントハンドラを設定する
    onLoadDOM: function() {
        $$('.tab').each(function(tab) {
            tab.observe('click', this.onClickTab.bind(this));
        }.bind(this));
        // デフォルトのタブを開く
        this.onClickTab();
    },
    // タブがクリックされたときのイベントハンドラ
    // クリックされたタブのIDを取得しそのタブをアクティブ化する
    onClickTab: function(event) {
        var element;
        if (event != null) {
            element = event.element();
        } else {
            // デフォルトは一番最初のタブを開く
            element = $$('.tab')[0];
        }
            // ビューにタブ変更を依頼
            ajaxrecipe.SmoSeoSampleView.changeTab(element.id);
        }
    });

    new ajaxrecipe.SmoSeoSampleController();

　最初に、コンストラクタが呼ばれます。コンストラクタの中では、DOMがロードされたらonLoadDOMメソッドが呼ばれるようにハンドラを設定しています。イベントハンドラの設定は、prototype.jsのobserveメソッドを使っています。

　このメソッドの中では、以下のタブのクリックイベントに、onClickTabメソッドを設定しています。

  <a href="javascript:void(0)" class="tab" id="tab-a">タブA</a>
  <a href="javascript:void(0)" class="tab" id="tab-b">タブB</a>
  <a href="javascript:void(0)" class="tab" id="tab-c">タブC</a>

　また、デフォルトのタブを開くために、onClickTabを引数なしで呼び出しています。

　onClickTabメソッドではまず、開くべきタブを判定します。イベントオブジェクトがある場合は、Eventインスタンスのelementメソッドで取得します。

　もし、イベントオブジェクトがない場合（＝デフォルトのタブを開くためにonLoadDOMメソッドから呼び出されるケース）は、一番最初の要素を開くべきタブとして設定します。そして、ビューのchangeTabメソッドにその要素のIDを渡して、タブを開くように依頼します。

■ ビュー

　ビューのコードは次のようになります。ビューでは、与えられたIDのタブをアクティブ化し、それまでアクティブ化されていたタブは非アクティブ化します。また、アクティブ化されたタブのコンテンツをモデルから取得し、その内容で更新をします。

    ajaxrecipe.SmoSeoSampleView = {
        // 与えられたIDのタブをアクティブ化し、
        // それまでアクティブ化されていたタブは非アクティブ化する。
        // アクティブ化されたコンテンツで更新する。
        changeTab: function(id) {
            $$('.tab').each(function(tab) {
                tab.removeClassName('inactive');
                tab.removeClassName('active');
                if (tab.id == id) {
                    tab.addClassName('active');
                } else {
                    tab.addClassName('inactive');
                }
            });
            var contents = ajaxrecipe.SmoSeoSample.getContents(id);
            $('contents').update(contents);
        }
    }

■ モデル

　モデルのコードは次のようになります。モデルはアクティブ化された指定タブのコンテンツをXMLHttpRequestで取得し、それを返します。

    ajaxrecipe.SmoSeoSample = {
        contents: null,
        // クリックされたタブのコンテンツを
        // XMLHttpRequestで取得して返す
        getContents: function(id) {
            new Ajax.Request(
                window.location.protocol + '//' +
                window.location.host +
                window.location.pathname + 'contents/' + id + '.html',
                {asynchronous: false,
                method: 'get',
                onSuccess: function(transport) {
                    ajaxrecipe.SmoSeoSample.contents
                        = transport.responseText;
                }});
            return ajaxrecipe.SmoSeoSample.contents;
        }
    };

　いよいよ次ページからは、ステップ1のサンプルにSMO対応、SEO対応を行う方法について解説していきます。

  1-2-3-4

　INDEX
パターンとライブラリで作るAjaxおいしいレシピ（6）
Aptana Jaxerで解決するAjaxのSEO対策とは？
Page1
今回はAjaxの問題点であるSMO、SEOへの対応
ステップ1：SMO、SEO対応を行っていないサンプル
  Page2
ステップ2：SMO対応を行ったサンプル
  Page3
ステップ3：SEO対応を行ったサンプル
ステップ4：Aptana Jaxerを使ってSEO対応を行う
  Page4
Hello Jaxer！から始めてみよう
Aptana Jaxerを使ってSEO対応を行ったサンプルの解説
Aptana Jaxerの現状、今後に要注目

パターンとライブラリで作るAjaxおいしいレシピ バックナンバー 連載インデックスへ»


リッチクライアント＆帳票 全記事一覧へ

ホワイトペーパー（TechTargetジャパン）

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

＠IT Special -PR-
操作もマニュアルも分かりやすい！
ユーザー視点で開発されたPC管理ツール
New！
【CTC事例】約30の基幹システムを統合！
膨大なバッチジョブを制御した方法は？
「どこでもオフィス」で業務効率アップ！
PHP研究所モバイルシンクライアント事例
コスト削減・信頼性向上をまとめて満たす
“高信頼Linux”を構築する方法とは？
世界に通用するストレージの作り方とは？
製品に込めた思いを富士通の開発者に聞く
急速に広がるHyper-Vでのサーバ仮想化
そのベストプラクティスをデルが解説
＠IT「Windows 7」 特設サイトオープン！
最新情報・移行ノウハウを公開しています

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 企業の仮想化に足りない“発想”とは？
仮想化運用管理のキモは意外なところに！
New！
◆ 　 操作もマニュアルも分かりやすい！
ユーザー視点で開発されたPC管理ツール
New！
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する

◆ 　 セキュリティを知り尽くす上野氏が登壇！
＠ITメールソリューションLive! in Tokyo
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？
◆ 　 世界に通用するストレージの作り方とは？
製品に込めた思いを富士通の開発者に聞く

◆ 　 OSSで手間も時間も、障害も減った――
「マピオンの事例」オープンソース活用法
◆ 　 「ノートPCの持ち出し禁止」で大丈夫？
情報漏えいを防ぐ管理手法とインフラは？
◆ 　 1日の処理を1秒に――MySQLの達人が語る
「コスト削減」できるチューニング

◆ 　 ドキュメント作成を自動化して、SEの作業
効率を大幅アップ！ Visio 2007の魅力
◆ 　 急速に広がるHyper-Vでのサーバ仮想化
そのベストプラクティスをデルが解説
◆ 　 ＠IT主催セミナーで語られた、「担当者に
求められるセキュリティ対策」をレポート

◆ 　 ＠IT「Windows 7」 特設サイトオープン！
最新情報・移行ノウハウを公開しています

→＠IT Special ヘ