2006/09/22
【なるほど！よくわかる！ホームページ運営！】第１５号 アドレス一つで携帯もPCも！
━━━━━━━━━━━━━━━━━━━━━━vol.15━ 2006.09.22 ━ なるほど！よくわかる！ホームページ運営！ ━━━━━━━━━━━━━━━━━━━━━━━━━━発行部数100部━ ■ カレンダー・暦 イベント ■ 携帯用のURLもパソコン用でＯＫ！.htaccess利用法 ■ 編集後記 ◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆ カレンダー・暦 イベント 2006.09.25 〜 10.16 ◆───────────────────────────────◆ ・衣替え １０月１日 ・体育の日 １０月９日 ※2006.09.11〜10.02 の「カレンダー・暦 イベント」は バックナンバーに載っています。 ご参考まで ▼なるほど！よくわかる！ホームページ運営 第１３号 http://blog.mag2.com/m/log/0000199475/107669667.html ▼なるほど！よくわかる！ホームページ運営 第１４号 http://blog.mag2.com/m/log/0000199475/107700113.html ・えびす講 １０月２０日 10月は日本中の神様が出雲に集まり 諸国から神様がいなくなる「神無月（かんなづき）」です。 家運隆盛・商売繁盛の福の神である恵比寿様だけは 神々の留守を守るため諸国に残りました。 ひとり残った恵比寿様をなぐさめたのが 「えびす講」の始まりといわれます。 ・誓文払い 「誓文（せいもん）」は神様にした約束を書いた文書のことです。 昔、遊女はその場限りの客に「夫婦になろう」などと誓文を渡して 駆け引きしましたが、神に誓った約束を破った罪を祓（はら）うため 旧暦10月20日にお参りする行事がありました。 10月20日は「えびす講」で、商人の町・大坂では 呉服屋が蔵ざらえを行っていました。 今では主に関西地方で、商家がふだんの儲けの罪滅ぼしとして 商売抜きで安売りをする、秋〜年末の格安セールの習慣として残り 冬の訪れを告げる風物詩のひとつとなっています。 ◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆ 携帯用のURLもパソコン用でＯＫ！.htaccess利用法 ◆───────────────────────────────◆ 携帯電話用のホームページをお持ちの方も多いのではないでしょうか。 実は携帯電話でインターネットを利用する人口はPCでのそれより多いのです。 最近では携帯用Googleもベータ版ながら存在し、ブレイク寸前の予感です！ 携帯用のホームページをお持ちの方は、サイトマップをGoogleに申請する ことをオススメします！！ 詳細はバックナンバー13号をご参照ください ▼なるほど！よくわかる！ホームページ運営 第１３号 http://blog.mag2.com/m/log/0000199475/107669667.html ところで、そんな携帯用サイトのアドレスはどうなっていますか？ たとえば、こんなURLのホームページがあるとします。 ｈttp://www.tatoeba.com/（実在していても一切関係ございません。） 通常、このアドレスはパソコン用のホームページを表示しますよね。 その上で、携帯用のサイトのアドレスはどうしていますか。 下記は一例です。 携帯用のサイトのアドレス ｈttp://www.tatoeba.com/m （ 'm'はモバイルの頭文字から） 携帯各社用にアドレスをそれぞれ作るパターン ｈttp://www.tatoeba.com/i （i-mode用） ｈttp://www.tatoeba.com/ez （ezweb用） ｈttp://www.tatoeba.com/v （Vodafone・Softbank用） こんな感じになっていたりすると、それぞれの携帯会社にあわせて 教えたりしないといけなくなったりします。 まして携帯電話はURLアドレスを打ちにくいものです。 ｛なんとかならないかな〜｝ を解決しましょう！！！！ ■ キャリアによる振り分け − .htaccess を利用する！ ■■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 本日は 携帯用でもＰＣ用でも・・・・ はたまたＰＳＰ用でも・・・・PSPのブラウザってとても綺麗です（余談） ◎◎◎ 同じアドレスにする技を紹介します！ ◎◎◎ まず、ご利用にあたっての注意です。 ※※※ 注意事項 （必ず熟読してください） ※※※ １．ご利用のサーバーによってはご利用できない場合がございます この機能を利用するにあたって以下の２点をご確認ください。 （わからない場合はサーバー運営会社に聞いてください） １）.htaccess ファイルが利用できる ２）RewriteEngine が利用できる 利用できない場合は申し訳ございませんが、今回は断念してください。 こういった技術があるということを覚えておいてください！ また、CGIによる振り分けという方法もあります。 ▼ 携帯振り分けCGI RABBIT http://www.vector.co.jp/download/file/unix/net/fh351060.html ２．設置にあたっては テストを繰り返し、確認作業はしっかり行って ください。 自信の無い方にはおすすめいたしません。 設置に関しての損害や苦情はお受けいたしませんので、自己責任において ご利用されることをお願いいたします。 注意事項をお守りの上、十分注意してご利用ください。 ・・・と、なんだか注意は多いのですが、便利なのもまた事実。 しっかり注意して行いさえすれば決して怖いものではありません。 たとえ、設置にミスがあった場合、下記のような事象が起こります。 ・実際にはあるはずのファイル（index.htmlなど）が表示されない あれ、一点だけかな・・・ でも、この一点だけでもアクセスされている方が多いサイトでは 命取りになりかねませんので、ご注意ください。 安心材料（？） ・実際にファイルを消してしまうことはありません。 ・.htaccess ファイルを削除してしまえば元に戻ります。 （中身の追加部分を削除するだけでもＯＫです。） ここまでまとめてお教えしている記事は見たことがありません！ 機会がありましたらチャレンジしてみてください！ ------------------------------------------------------------------ ■ .htaccess ファイルについて ------------------------------------------------------------------ 下記をお読み下さい。一番的を得た説明だと思います。 ▼ .htaccess とは （ＩＴ用語辞典より） http://e-words.jp/w/2Ehtaccess.html 要するに 「サーバーの設定をサイトごと・ディレクトリごと変更できる」 というものです。 とても機能がたくさんあります。 今回お教えする自動振り分けはほんの一機能です。 サイトのアクセス規制や認証も行えます。 参考サイトを掲載しておきます。ご興味のある方は下記を参考にどうぞ！ ▼ .htaccess 活用術 http://www.shtml.jp/htaccess/ ------------------------------------------------------------------ ■ さて 本編です！.htaccess で 振り分け機能！ ------------------------------------------------------------------ まず準備から 【 .htaccessファイルを準備する】---------------------------------- 「.htaccess」というファイルを作成します。 ・・・でも、実はWindows では作成できません。 一度 htaccess.txt というテキストファイルを作成して ＦＴＰサーバーにアップロードし ＦＴＰサーバー上で「.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] # こちらはＰＣ用も振り分けを行いたい場合に使用します。 # 使用する場合は RewriteCond〜の先頭#を削除してください #RewriteCond %{ENV:pc} 1 # PC用の設定を行う場合はこちらも記述する # 使用する場合は RewriteRule〜の先頭#を削除してください #RewriteRule .* http://www.tatoeba.com/pc/index.html [R=302,L] −−−−−−−−−↑−−キリトリ−−↑−−−−−−−−−−−−−− このままで使用できる人はｈttp://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://ja.wikipedia.org/wiki/ユーザーエージェント ※↑上記 httpからユーザーエージェントまですべてをコピーして ブラウザ等のURLに欄に貼り付けご利用ください。 R=302というのは ステータス３０２でリダイレクトします！ということ LはRewriteEngineの終了ということです。 ステータス３０２というのは 本来 ３０２は「一時的なリダイレクト」という意味なので ここでは ３０１の「永久的なリダイレクト」としたいのですが DOCOMOの一部の機種で 「サイトが移動しました」 というメッセージがいちいち表示されるようですので ３０２としています。 DOCOMOで利用されないのであれば 301 とした方が良いかもしれません。 【サブディレクトリでは解除を行う】-------------------------------- .htaccess ファイルの説明（IT用語辞典）にあったように この.htaccessファイルに記述したことは 設置したフォルダ（ディレクトリ）以下すべてのフォルダ（ディレクトリ） に対して有効となります。 ※ここが注意点です！ それを帳消しにするため 【必ず！！】 設置したフォルダ（ディレクトリ） 以下のフォルダ（ディレクトリ）には 「解除のための.htaccessファイル」を設置してください！ ファイル名は同じく 「.htaccess」です。 内容は下記の通りです。コピーして貼り付けてください。 −−−−−−−−−↓−−キリトリ−−↓−−−−−−−−−−−−−− # Createinter # @author mail@comsize.com # 振り分け解除 .htaccess RewriteEngine Off −−−−−−−−−↑−−キリトリ−−↑−−−−−−−−−−−−−− 【配置サンプル】-------------------------------------------------- 配置するとこうなります。 ［トップページ］ ｈttp://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 http://firefox.geckodev.org/index.php?User%20Agent%20Switcher ▼ userAgent 一覧/ユーザーエージェント一覧 http://www.openspc2.org/userAgent/ ■ ＱＲコードを活用しよう！！ ■■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ おまけコーナーです！ 最近はＱＲコードを読み取れる機種も増えてきました。 いまや、DOCOMO ＦＯＭＡやSoftbank 3G、auのＷＩＮでは ほとんどが利用できるのではないでしょうか。 そんなＱＲコードをＰＣ用のサイトに貼り付けておけば お客様が携帯にアドレスを打ち込んだり、メールを送信したりすることなく ダイレクトに利用できます！ 自社、株式会社コンサイズ ホームページに ＱＲコードの生成コーナーが ありますので、お気軽にご利用ください！ ▼ 株式会社コンサイズ http://www.comsize.com/ ▼ 株式会社コンサイズ ＱＲコード コーナー http://www.comsize.com/modules/qrcode/ ▼ swetake.com ※このＱＲコード生成スクリプトは swetake.com さんの著作です。 http://www.swetake.com/ ◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆ 編集後記 ◆───────────────────────────────◆ 第１５号いかがでしたでしょうか。 今回はなかなか難しい作業になってます・・・ 最近は携帯ショッピングもどんどん利用されはじめました。 携帯には携帯用のサイト制作テクニックというものもございます。 今後、じっくり取り扱っていきたいです。 その前に私自信も勉強しないと〜！ 皆様により良い情報をお伝えできるようがんばります！ 次号もお楽しみに！ 『プチ求人情報』 自社、株式会社コンサイズでは、スタッフを募集しています。 業務内容はホームページ制作・システム開発といろいろあるんですが 今回は私が責任を持って育てますので 「興味とやる気」だけが応募資格です！ 詳細はメールでお気軽にご連絡ください。 ちょっとだけ言いますと 初任給１７万前後〜４０万（スキルによります。） 勤務地は恵比寿です。委細面談の上決定します。 このメルマガの記事はわたしのブログでも掲載しております。 ▼ブログ「ホームページ運営コンサルタント−さとうたけし」 http://blog.livedoor.jp/takeshi_satoh/ ご感想は上記ブログに「コメント」という形でも受け付けております！ 是非、読んでみてください！ このメルマガを読んで生まれた「疑問」「質問」「ご意見」「ご感想」 ございましたお気軽にメールをください！ よろしくお願いします！ 「ホームページを優秀な営業マンに！」 私もそのお手伝いをします！ ◎ このメールマガジンを読んだご感想・ご意見・ご質問、また仕事依頼 などございましたらなんなりとお気軽にメールをください。 お返事は必ず書きます！ ------------------------------------------------------------------ ☆ ホームページ運営コンサルタント ☆ 発行人： 株式会社コンサイズ さとう たけし ☆ 弊社HP： < http://www.comsize.com/ > ☆ メール： < mail@comsize.com > ★ 購読・解除はこちらでできます！ まぐまぐ →→ http://www.mag2.com/m/0000199475.html ------------------------------------------------------------------
