Google Analyticsモバイル版の設置方法がわかりました
    このエントリをはてなブックマークに登録

2009/10/22 木曜日 matsui Posted in ニュース, 記事紹介・リンク 5 Comments »

昨日に続いて、Googleの提供する無料アクセス解析サービス「Google Analytics」についての話題です。

昨日のGoogle日本語版公式ブログでは、「現在のところ、この機能はパイロット版として特定のパートナー様のみご利用いただいております」とアナウンスされていましたが、英語版公式ブログには、すでにサンプルコードなどが掲載されているようです。

 

→　カグア！Google Analytics 活用塾:事例や使い方　公式Blogでコード配布、Google Analytics 携帯対応 [www.kagua.biz]

→　Google Analytics Blog: Google Analytics Now More Powerful, Flexible And Intelligent [analytics.blogspot.com]

 

サンプルコードのダウンロードは、上記の英語版公式ブログの記事中央辺りにあります。
（「download snippet instructions」のリンク）

PHP, Perl, JSP, ASPのサンプルがダウンロードできるようです。

 

私もPHPで試してみました。

<?php
  $googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
?>
<img src="<?= $googleAnalyticsImageUrl ?>" />

のようにimgタグで設置する形のようです。

 

コードを見ると、「guid=ON」「$_SERVER[“HTTP_X_DCMGUID”]」といった記述もありますので、英語版ブログからダウンロードしてきたコードとはいえ、明らかに日本のケータイにも対応しているようです。
iモードIDを取得しているということは、ある程度のトラッキング機能もついているということでしょう。

試しにサイトにテスト設置してみましたが、Google Analyticsは解析結果が集計されるまでに少し時間がかかるため、本当に利用できているのか、どのように表示されるか、を確かめるところまでは行きませんでした。

詳しくわかり次第またレポートしてみたいと思います。

 

関連：

タグ: , ,



ケータイ3キャリアに対応するためのDOCTYPE宣言について
    このエントリをはてなブックマークに登録

2009/10/14 水曜日 matsui Posted in 全キャリア対応, 記事紹介・リンク 11 Comments »

XHTMLを使ってケータイサイトを作成する際には、HTMLの冒頭にDOCTYPE宣言を記述する必要があります。

先日からこの「DOCTYPE宣言」に関するブログエントリーが人気を集めているようなので、当サイトも触れてみようと思います。

下記2つのサイトでは、どちらもif文でユーザエージェントを判定して、DOCTYPEを出し分けるという処理を紹介しています。

 

→　ma-san.org　携帯サイトをHTMLではなくPHPで組むときのDOCTYPE分岐方法 [ma-san.org]

→　ある人のぼやき　携帯サイトのDOCTYPE分岐方法 [d.hatena.ne.jp]

 

DOCTYPE宣言とは

DOCTYPE宣言とは以下に続くHTMLが、どのようなバージョンで記述されているかを宣言するものです。
ブラウザ側はこの宣言を解釈して、記述内容に合わせた細かい表示方法を調整したりしています。

各キャリア公式サイトからDOCTYPE宣言の書き方をおさらいしてみましょう。

 

【docomo】

→　NTTdocomo　作ろうiモードコンテンツ　iモード対応XHTMLのバージョン [nttdocomo.co.jp]

iモード対応XHTMLのバージョンに合わせて記述します

<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/[iモードXHTMLバージョン]) 1.0//EN" "i-xhtml_4ja_10.dtd">

例：　iモード対応XHTML 1.0用のDOCTYPE

<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">

 

【au】

→　KDDI au: コンテンツの制作 > XHTML Basicの基本 [au.kddi.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

 

【softbank】

→　ソフトバンク　Mobile Creation　XHTMLとCSSによる携帯サイト制作 [creation.mb.softbank.jp]

<!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN" "xhtml-basic10-plus.dtd">

 

出し分けする場合にはどうするか

各キャリアや、iモードバージョンなどで宣言が異なっているため、ユーザエージェントで判定し、出し分ける方法が一般的です。

上記のサイトのようにif文でユーザエージェントを判定する方法もありますが、PHPであればPEARの「Net_UserAgent_Mobile」などのライブラリを使う方法がおススメです。
キャリアや機種が簡単に取得できます。

他の言語を使った場合でも、大抵の言語には同様のライブラリがあるでしょう。

→　PEAR　Package :: Net_UserAgent_Mobile [pear.php.net]

そもそも本当に出し分けが必要なのか？

しかしながら、本当にDOCTYPEの出しわけが必要なのでしょうか？

以前軽くテストをしてみたところ、DOCTYPEの変更によって表示に違いがあることは確認できず、疑問に思ってフォーラムで聞いてみました。

→　ke-tai.org　Forum – XHTMLのDOCTYPEについて [ke-tai.org]

すると皆さん、出し分けは特に行っていないという返答が帰ってきました。

 

結論

ケータイブラウザが高度化するにつれ、DOCTYPEによる表示調整を行わなければならなくなるでしょう。

しかしながら今のところ特に苦労して出し分けを行う必要は無いと思っているのですがいかがでしょうか？

もちろんXTHMLを使用する以上、なんらかのDOCTYPE宣言が必要になります。
私はモバイル用の標準的な例として、「XHTML Mobile Profile 1.0」のDOCTYPE宣言を使うことが多いです。

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

参考：
→　w3c　XHTML Basic [www.w3.org]

ドコモはDOCTYPE宣言がないとXHTML表記が使えなかったりしますが、上記の宣言で大丈夫なようです。

 

3キャリア共通ページのサンプルHTMLは次の通りです。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
</head>
<body>
3キャリア共通ページのサンプル<br />
</body>
</html>

 

みなさんはどのような対応を取っているのか知りたいところです。
よろしければフォーラムやコメント欄からご投稿お願いします。

 

関連：



モバイル向け検索エンジンの現状がまとめられた「検索エンジン相関図」
    このエントリをはてなブックマークに登録

2009/10/6 火曜日 matsui Posted in 記事紹介・リンク No Comments »

先日ネットを徘徊していたところ、「検索エンジン相関図」というのがありましたのでご紹介します。

→　検索エンジン相関図 2009年9月版｜αSEO(アルファSEO) [alphaseo.jp]

 

2009年9月時点での各検索エンジン・モバイル検索連動型広告の関係図がわかりやすくまとめられています。

もちろんモバイル版についてもPCと同様に詳しくまとめられていますので、検索エンジン業界の現状を知りたい場合はこれを見ればバッチリですね。

 

しかしいつの間にか、こんなに大量のエンジンが増えていたのですね。。。

先日も絵文字で検索ができるという次のような検索サービスがニュースに上がっていました。
モバイル向け検索サービスは、今後もまだまだ増えていくのかもしれません。

→　CNET Japan　バイドゥ、絵文字も検索可能な「Baidu モバイル」をベータ公開 [japan.cnet.com]

 

モバイルの検索エンジンに引っかかるためには、クローラのIPアドレスに対して制限を外してやらなければならず、ある程度定期的に情報を追いかける必要があります。
（IPアドレス帯域が公開されていないサービスも多いですが）

この相関図は、2～3ヶ月に1度くらいのペースで更新されているようなので、定期的にチェックするとよさそうですね。

 

関連：

タグ: ,



はてなブックマークモバイル版の脆弱性とその対策について
    このエントリをはてなブックマークに登録

2009/10/2 金曜日 matsui Posted in ニュース, 記事紹介・リンク 3 Comments »

先日はてなブックーマークモバイル版で、他人になりすましてアクセスできるという脆弱性があったのですが、　はてなからそれに対する公式なコメントが出ているようです。

原因とその対策についても触れられており、モバイルサイトを作成している方には参考になると思われるため、ご紹介させていただきます。

 

→　はてなブックマーク日記　「はてなブックマーク モバイル版」の脆弱性を利用した不正アクセスに関するご報告 [hatena.ne.jp]

 

ご存知のない方のために軽く説明すると、9月下旬にid:guldeen氏のブックマークコメントが、何者かに改ざんされるという事件がありました。

当初、パスワードが盗まれたのでは？という話になっていましたが、どうやらセッションハイジャックによるものだったようです。

 

はてなの報告によると、モバイル版の一部のページでコンテンツをキャッシュしており、その中でセッションIDをキャッシュしてしまうという問題があったようです。

ドコモ端末の場合、ごく最近発売された機種を除きほとんどの機種でクッキーが利用できないため、セッションはURLの後ろにセッションIDを保持して引き継ぐという形になります。

そのリンクを踏んだ他のユーザは、そのセッション情報を引き継いでしまい、他人でログインしたのと同じ状況になってしまっていたようです。

 

今回の場合は、

  1. セッションIDがURLについた状態でキャッシュしてしまっていた
  2. セッション情報が本人のものであるかどうかのチェック処理が足りなかった

という2点が原因となっていたようです。

1の方は当たり前ですがセッション情報を取り除いてからキャッシュするようにする。
2に関しては、セッションやDB内にユーザ（契約者）ID・端末IDなどを保存しておき、アクセスの要所要所（可能なら毎回）で端末側からIDを取り直しそれと比較する、といった処理が必要になると思われます。

 

はてな側では不正アクセス禁止法違反と言っていますが、利用者は普通にアクセスするだけで他人になりすませたわけで、不正アクセスかどうかは微妙なところだと思います。

 

ケータイのセッション管理（特にドコモ端末）は、PCに比べセキュリティの問題が大きく関わってきます。

今回の件を教訓として、セッションを使ったサービスを開発する場合には、より一層の注意をしたほうが良さそうですね。

 

関連：

タグ: , ,



実例をあげてケータイサイトのページ内構成を考察している記事「比較テストで見えた成果を出すモバイルECサイトのユーザビリティ」
    このエントリをはてなブックマークに登録

2009/9/29 火曜日 matsui Posted in 記事紹介・リンク No Comments »

Web担当者Forumに良い記事がありましたのでご紹介します。

→　Web担当者Forum　比較テストで見えた成果を出すモバイルECサイトのユーザビリティ [web-tan.forum.impressrd.jp]

→　Web担当者Forum　モバイルサイト構築のユーザビリティいろは　目次 [web-tan.forum.impressrd.jp]

 

これまでもご紹介させていただいたことのある連載「モバイルサイト構築のユーザビリティいろは」の第8回です。

今回は「比較テストで見えた成果を出すモバイルECサイトのユーザビリティ」と題して、数パターンの画面サンプルとそれに対するアンケート結果を掲載し、最も支持率の高いページ構成を考えるという内容になっています。

全7ページとかなりボリューム感のある記事です。

 

具体的な内容としては、モバイル向けECサイトのトップページ、商品一覧、商品詳細／購入ページと、ショッピングサイトの基本となる各ページについて、画像のサイズや価格表示の位置など、かなり詳しく実例をあげてレイアウトを考察しています。

 

モバイル向けショッピングサイトを運営している方はもちろん、他の種類のケータイサイトにも応用できそうなポイントがいっぱいありますので、ぜひ一度目を通してみるとよいと思います。

次回は「買物カゴ」から「購入完了」に至るまでの購入フローのユーザビリティについて紹介する予定とのことです。

これらの流れについては、少しでも使い勝手が悪いと顧客が逃げやすく、開発側でも悩みが多い部分だと思いますので、次回の記事にも期待ですね。

 

関連：

タグ: ,



« Previous Entries
Next Entries »