Aptana Jaxerで解決するAjaxのSEO対策とは？（1/4） ─ ＠IT

【3/18～】Amazon、VMwareが語る『クラウドの未来』

連載一覧へ

パターンとライブラリで作る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>タグを使って読み込んでいます。

javascripts/lib/prototype.js
prototype.js バージョン1.6.0.2
javascripts/app/controllers/ajaxrecipe/smo_seo_sample_controller.js
コントローラー
javascripts/app/models/ajaxrecipe/smo_seo_sample.js
モデル
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ジャパン）

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

画像を美しく魅せる効果を加えるjQueryプラグイン3選 （2010/3/17）
2つ重ねて比較するBefore/After、部分ごとに切り替えるpanelGallery、ズーム/カーテンなどができるcycle
現場の無駄な流血を止めるための「プロトタイプ」とは （2010/3/12）
サイトやWebアプリ/RIAの設計やデザインを効率良く進めるには、プロジェクト関係者の想定を一致させていくことが大事だが…
Flashを閃光のごとく高速化するための基礎知識 （2010/3/9）
Flash高速化のための基礎知識や実践的テクニックを紹介する連載。初回は“処理負荷”を調べる具体的な方法を解説します
Windows 7でどんだけ“おばか”なアプリが作れるの？ （2010/3/4）
おばかの発想の源やアプリの作り方などについて、おばかアプリ選手権の歴戦の受賞者や、マイクロソフトの代表者に話を伺った。アイデアのご参考に

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

RSSフィード

＠IT 新着記事

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

「いつかは壊れるサーバ」そんな故障に
迅速で安価に手軽に対応する方法とは？
New！

「特権ユーザー」の事件を防げ！
万能権限を持つユーザーの管理方法とは？
New！

仮想環境の構築とデータ保護の特効薬？！
実績と信頼性の高いパッケージで安心運用

仮想環境のバックアップもこれまでどおり
「まるごと取ってまるごと戻す」簡単運用

おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！

社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

その数、なんと400台以上！グループ内
サーバの「統合管理」によるメリットは？

美人!? まあまあ？気になるいやし系!!
PV急増で「美人時計」がとった手段とは？

進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か

運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

＠IT Special ヘ

ニュース一覧へ

お勧め求人情報

年収が落ち込んでいるのは自分だけ？
2万5000人から集めたデータをもとに、
現在のあなたの市場価値を判定

本気モードの企業がスカウト
人手不足を補う求人とはまったく違う、
優秀な人材だけが受け取れるスカウトメール

転職だって、縁とタイミングが重要
憧れの企業や職種へのキャリア・アップは、
まず「求人案件」との出会いから

JOB＠IT ヘ

ITトレメ「ビジネス基礎」シリーズ配信開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～CCNA編～

◆

TomcatやJBossなどAPサーバ環境に関する
情報を集約！ “業務”用APサーバ大百科
New！

◆

クラウド的ユーザー体験の変化は脅威か？
仮想化技術を使いこなす運用管理術を紹介
New！

◆

上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは？
New！

◆

おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！

◆

社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

◆

Twitterのアカウントはなぜ突破された？
メールによる新手の攻撃手法とその対策

◆

もう仮想化のお試しフェイズは終わりだ！
Hyper-V 2.0が基幹システムも仮想化

◆

美人!? まあまあ？気になるいやし系!!
PV急増で「美人時計」がとった手段とは？

◆

クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」

◆

.NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？

◆

業務効率と情報セキュリティ対策を両立！
手間なく確実に機密情報を守る方法とは？

◆

進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か

◆

運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

◆

【CTC事例】約30の基幹システムを統合！
膨大なバッジジョブを制御した方法は？

◆

仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する

◆