この記事の所要時間: 165

 携帯電話用のホームページをお持ちの方も多いのではないでしょうか。
 
 実は携帯電話でインターネットを利用する人口はPCでのそれより多いのです。
 
 最近では携帯用Googleもベータ版ながら存在し、ブレイク寸前の予感です!
 
 携帯用のホームページをお持ちの方は、サイトマップをGoogleに申請する
 ことをオススメします!!
 詳細はバックナンバー13号をご参照ください
 
 ▼なるほど!よくわかる!ホームページ運営 第13号
 
 ところで、そんな携帯用サイトのアドレスはどうなっていますか?
 
 たとえば、こんなURLのホームページがあるとします。
 http://www.tatoeba.com/(実在していても一切関係ございません。)
 
 通常、このアドレスはパソコン用のホームページを表示しますよね。
 
 その上で、携帯用のサイトのアドレスはどうしていますか。
 
 下記は一例です。
 
 携帯用のサイトのアドレス
 http://www.tatoeba.com/m ( ‘m’はモバイルの頭文字から)
 
 携帯各社用にアドレスをそれぞれ作るパターン
 http://www.tatoeba.com/i (i-mode用)
 http://www.tatoeba.com/ez (ezweb用)
 http://www.tatoeba.com/v (Vodafone・Softbank用)
 
 こんな感じになっていたりすると、それぞれの携帯会社にあわせて
 教えたりしないといけなくなったりします。
 
 まして携帯電話はURLアドレスを打ちにくいものです。
 
 {なんとかならないかな~}
 
 を解決しましょう!!!!
 
 
 ■ キャリアによる振り分け - .htaccess を利用する!
 ■■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 本日は
 
 携帯用でもPC用でも・・・・
 はたまたPSP用でも・・・・PSPのブラウザってとても綺麗です(余談)
 
 ◎◎◎ 同じアドレスにする技を紹介します! ◎◎◎
 
 まず、ご利用にあたっての注意です。
 
 ※※※ 注意事項 (必ず熟読してください) ※※※
 
 1.ご利用のサーバーによってはご利用できない場合がございます
 
  この機能を利用するにあたって以下の2点をご確認ください。
  (わからない場合はサーバー運営会社に聞いてください)
 
  1).htaccess ファイルが利用できる
  2)RewriteEngine が利用できる
 
  利用できない場合は申し訳ございませんが、今回は断念してください。
  こういった技術があるということを覚えておいてください!
 
  また、CGIによる振り分けという方法もあります。
 
 ▼ 携帯振り分けCGI RABBIT

 
 
 2.設置にあたっては テストを繰り返し、確認作業はしっかり行って
   ください。
 
  自信の無い方にはおすすめいたしません。
 
  設置に関しての損害や苦情はお受けいたしませんので、自己責任において
  ご利用されることをお願いいたします。
 
 注意事項をお守りの上、十分注意してご利用ください。
 
 ・・・と、なんだか注意は多いのですが、便利なのもまた事実。
 
 しっかり注意して行いさえすれば決して怖いものではありません。
 たとえ、設置にミスがあった場合、下記のような事象が起こります。
 
 ・実際にはあるはずのファイル(index.htmlなど)が表示されない
 
 あれ、一点だけかな・・・
 でも、この一点だけでもアクセスされている方が多いサイトでは
 命取りになりかねませんので、ご注意ください。
 
 安心材料(?)
 ・実際にファイルを消してしまうことはありません。
 ・.htaccess ファイルを削除してしまえば元に戻ります。
 (中身の追加部分を削除するだけでもOKです。)
 
 ここまでまとめてお教えしている記事は見たことがありません!
 機会がありましたらチャレンジしてみてください!
 
 ——————————————————————
 ■ .htaccess ファイルについて
 ——————————————————————
 
 下記をお読み下さい。一番的を得た説明だと思います。
 
 ▼ .htaccess とは (IT用語辞典より)

 
 要するに
 「サーバーの設定をサイトごと・ディレクトリごと変更できる」
 というものです。
 
 とても機能がたくさんあります。
 今回お教えする自動振り分けはほんの一機能です。
 
 サイトのアクセス規制や認証も行えます。
 参考サイトを掲載しておきます。ご興味のある方は下記を参考にどうぞ!
 
 ▼ .htaccess 活用術

 
 ——————————————————————
 ■ さて 本編です!.htaccess で 振り分け機能!
 ——————————————————————
 
 まず準備から
 
 【 .htaccessファイルを準備する】———————————-
 
 「.htaccess」というファイルを作成します。
 
 ・・・でも、実はWindows では作成できません。
 一度 htaccess.txt というテキストファイルを作成して
 FTPサーバーにアップロードし
 FTPサーバー上で「.htaccess」というファイル名に変更してから
 ダウンロードしてご使用ください。
 
 もしも、はじめから存在する!という方は、そのファイルを一度
 ダウンロードしてから中身に追加するという作業になります。
 
 中身をいじってから戻せるようにバックアップファイルは確実に
 とっておいてください。
 
 【設置する内容を記述する】—————————————-
 
 まずは中身をいきなり記述します。説明は後ほど・・・
 .htaccess ファイルに記述する内容です。
 
 ---------↓--キリトリ--↓--------------

Createinter

@author mail@comsize.com

振り分け .htaccess

SetEnvIf User-Agent “DoCoMo” docomo

SetEnvIf User-Agent “J-Phone” voda

SetEnvIf User-Agent “KDDI” ez

SetEnvIf User-Agent “UP.Browser” ez

PC用も振り分ける場合は SetEnvIf~の先頭#を削除してください

#SetEnvIf User-Agent “Mozilla” pc

SEO対策 サーチロボットはpcを見せる

#SetEnvIfNoCase User-Agent Robot pc

RewriteEngine On

DOCOMO

RewriteCond %{ENV:docomo} 1

ドコモ用のサイトインデックスページを記述する

RewriteRule .* http://www.tatoeba.com/i/index.html [R=302,L]

VODAFONE

RewriteCond %{ENV:voda} 1

VODAFONE/Softbank用のサイトインデックスページを記述する

RewriteRule .* http://www.tatoeba.com/v/index.html [R=302,L]

AU

RewriteCond %{ENV:ez} 1

au用のサイトインデックスページを記述する

RewriteRule .* http://www.tatoeba.com/ez/index.html [R=302,L]

こちらはPC用も振り分けを行いたい場合に使用します。

使用する場合は RewriteCond~の先頭#を削除してください

#RewriteCond %{ENV:pc} 1

PC用の設定を行う場合はこちらも記述する

使用する場合は RewriteRule~の先頭#を削除してください

#RewriteRule .* http://www.tatoeba.com/pc/index.html [R=302,L]

 ---------↑--キリトリ--↑--------------
 
 このままで使用できる人はhttp://www.tatoeba.comの管理者だけです(笑)
 
 他の方は(多分、全員)、http:~ というアドレスの部分を
 ご自分のサイトに合わせて変更してください。
 
 『DOCOMOもVODAFONEもauもなく「携帯」として振り分けたい』という方も
 それぞれを同じアドレスにすることで対応してください。
 
 もしも、それ以外のキャリアでも振り分けを行いたい場合は
 
SetEnvIf User-Agent “J-Phone” voda
 という部分の”と”の間を変更し 後ろについている voda という文字列を
 好きなものに変更します。
 
 その上で
 

VODAFONE

RewriteCond %{ENV:voda} 1

VODAFONE/Softbank用のサイトインデックスページを記述する

RewriteRule .* http://www.tatoeba.com/v/index.html [R=302,L]
 という部分の
 
RewriteCond %{ENV:voda} 1
 %{ENV:voda}を%{ENV:~先ほど設定した好きな文字列~}
 に変更します。
 
 たとえばPSPで閲覧した場合を記述してみます。
 

#PSPの場合
SetEnvIf User-Agent “PSP” psp

PSP

RewriteCond %{ENV:psp} 1

PSP用のサイトインデックスページを記述する

RewriteRule .* http://www.tatoeba.com/psp/index.html [R=302,L]

 となります。
 この内容を上記 .htaccessファイルの最終行に追加してもそのまま動きます
 
 ★ちょっと解説します!
 
 ユーザエージェント(USER AGENT)と呼ばれる
 サーバーが認識する「ブラウザー種別」の文字列を判別して
 振り分けを行っています。
 
 簡単に言うと通常のブラウザ(IEなど)でもその
 「ユーザエージェント」を偽ることができれば、その偽った媒体として
 閲覧することが可能だということです。
 
 Macintoshですと「iCab」というブラウザでは昔からその切り替えが
 出来たと思います。
 
 ユーザエージェントについては下記を参考にしてください。
 
 ▼ ウィキペディア ユーザーエージェント

 ※↑上記 httpからユーザーエージェントまですべてをコピーして
  ブラウザ等のURLに欄に貼り付けご利用ください。
 
 R=302というのは ステータス302でリダイレクトします!ということ
 LはRewriteEngineの終了ということです。
 
 ステータス302というのは
 本来 302は「一時的なリダイレクト」という意味なので
 ここでは 301の「永久的なリダイレクト」としたいのですが
 
 DOCOMOの一部の機種で
 「サイトが移動しました」
 というメッセージがいちいち表示されるようですので
 302としています。
 DOCOMOで利用されないのであれば 301 とした方が良いかもしれません。
 
 【サブディレクトリでは解除を行う】——————————–
 
 .htaccess ファイルの説明(IT用語辞典)にあったように
 この.htaccessファイルに記述したことは
 設置したフォルダ(ディレクトリ)以下すべてのフォルダ(ディレクトリ)
 に対して有効となります。
 ※ここが注意点です!
 
 それを帳消しにするため 【必ず!!】 設置したフォルダ(ディレクトリ)
 以下のフォルダ(ディレクトリ)には
 「解除のための.htaccessファイル」を設置してください!
 
 ファイル名は同じく
 「.htaccess」です。
 内容は下記の通りです。コピーして貼り付けてください。
 
 ---------↓--キリトリ--↓--------------

Createinter

@author mail@comsize.com

振り分け解除 .htaccess

RewriteEngine Off
 ---------↑--キリトリ--↑--------------
 
 【配置サンプル】————————————————–
 
 配置するとこうなります。
 
 [トップページ]
 http://www.tatoeba.com/
 index.html       - PC用ホームページ インデックスページ
 
 infomation.html     - お知らせ~
 
 .htaccess (振り分け .htaccess)
 
    │
    └───┬/i/ i-mode用サイトフォルダ
        │index.html[i-modo用トップページ]
        │infomation.html[お知らせ]
        │.htaccess (振り分け解除 .htaccess)
        │ └/bbs/
        │  bbs.cgi
        │  .htaccess (振り分け解除 .htaccess)
        │
        ├/v/ Vodafone用サイトフォルダ
        │index.html[i-modo用トップページ]
        │infomation.html[お知らせ]
        │.htaccess (振り分け解除 .htaccess)
        │ └/bbs/
        │  bbs.cgi
        │  .htaccess (振り分け解除 .htaccess)
        │
        └/ez/ ezweb(au)用サイトフォルダ
         index.html[i-modo用トップページ]
         infomation.html[お知らせ]
         .htaccess (振り分け解除 .htaccess)
          └/bbs/
           bbs.cgi
           .htaccess (振り分け解除 .htaccess)
 
 見ていただきたいのは
 
 下階層のフォルダにはすべて「.htaccess (振り分け解除 .htaccess)」
 を設置しているというところです。
 
 そうしないと、たとえば、じかに携帯用のページを見たときに
 
 掲示板などその下のフォルダを見たいのにもかかわらず
 携帯サイト振り替えが実行され
 永久にindex.htmlから離れられないという事象が起こることになります。
 
  - まとめ -
 
 『振り分け用.htaccessを設置した下の階層は
               解除用.htaccessを必ずすること!』
 
 
 【テストをしよう!!】——————————————–
 
 ここまで出来たらテストです!
 
 設置にあたって一つ test といった名前のフォルダを作り
 サイト全体をそのフォルダに入れFTPサーバーにアップロードしてテストした
 あとに本番移行することをおすすめします。
 
 一番簡単なテスト方法は
 『実機を使う!』ということになります。
 
  友達・社員総動員して i-mode, ezweb, Vodafone でサイトを閲覧し
  調べましょう!
 
 これは難しい!持ってる人がいない!いちいちめんどくさい!
 という方には下記のような方法がおすすめです。
 
 ・Firefox、iCab、Safariなどユーザーエージェントを切り替えられる
  ブラウザを利用する
 
 要するにユーザーエージェントを変えられればいいわけですので
 PCのブラウザからどんどんテストすることも可能です。
 
 『FireFox で ユーザーエージェント変更する』
 
 私はFireFoxを利用しておりますので
 参考としたサイトを紹介したいと思います。
 
 ▼ Fire Fox まとめサイト Wiki User Agent Switcher

 ▼ userAgent 一覧/ユーザーエージェント一覧

 
 
 ■ QRコードを活用しよう!!
 ■■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 おまけコーナーです!
 
 最近はQRコードを読み取れる機種も増えてきました。
 いまや、DOCOMO FOMAやSoftbank 3G、auのWINでは
 ほとんどが利用できるのではないでしょうか。
 
 そんなQRコードをPC用のサイトに貼り付けておけば
 お客様が携帯にアドレスを打ち込んだり、メールを送信したりすることなく
 ダイレクトに利用できます!
 
 自社、株式会社コンサイズ ホームページに QRコードの生成コーナーが
 ありますので、お気軽にご利用ください!
 
 ▼ 株式会社コンサイズ

 ▼ 株式会社コンサイズ QRコード コーナー

 
 ▼ swetake.com
 ※このQRコード生成スクリプトは swetake.com さんの著作です。

———————————————————————-
この内容は

私が発行しているメルマガ 「なるほど!よくわかる!ホームページ運営」にて掲載したものです!

毎週木曜日発行のメルマガ

なるほど!よくわかる!ホームページ運営」ご購読希望の方は

↓フォームよりご登録下さい!よろしくお願いいたします。

メルマガ登録・解除 ID: 0000199475
なるほど!よくわかる!ホームページ運営!

   
バックナンバー powered byまぐまぐトップページへ

ホームページ運営コンサルタント さとうたけし

この記事が気に入ったら
いいね ! しよう

Twitter で