メイン

携帯電話 アーカイブ

2009年11月30日

Google Analyticsが携帯サイト解析に対応!さっそく導入してみました。

Google Analyticsといえば広く普及しているアクセス解析ツールですが、JavaScript型のビーコンを使用しているため、JavaScriptに対応していない携帯電話向けサイトでは正しく解析ができない、というのがこれまでの通説でした。
が!
Analyticsを携帯電話でも利用できるようにする、とGoogleがアナウンスしたのが先月のできごと。まずはパイロット版として特定のパートナーだけの限定スタートとなっていましたが、気がついたら自分のアカウントでも利用できるようになっていました! さっそく自分のサイトに導入してみました。

導入方法がちょっとわかりづらかったので、以下手順を書いておきます。

 

 

まず、Google Analyticsにログインして、左上の「Analytics設定」をクリックします。

新しくプロファイルを追加する場合は、ページ下の「プロファイルの追加」へ、
既存のプロファイルで携帯サイト用のコードを取得したい場合は、「編集」へ進んで「ステータス確認」をクリックします。

するとこんな画面になります。


20091130ga.png

 

「アドバンス」タブをクリックして、「何をトラッキングしますか」のなかの「A site built for a mobile phone」をクリックします。
すると解析用コードの言語が、PHP、Perl、JSP、ASPXから選べます。

 

以下、PHPを選択した場合で話を進めますが、基本構成はどの言語でも同じようです。

解析を始めるには、3つの作業が必要になります。

1. 対象ページの <html> タグの手前にPHPコードを貼り付ける。

コードの内容を見ると、ビーコン用の画像ファイルのURLパラメタを作成しているだけで、 <html> タグの手前である必要はなさそうに見えますが、一番先頭に貼り付けるのがGoogle推奨です。

 

2. 対象ページの </body> タグの直前にPHPコードを貼り付ける。

この場所に1ピクセル×1ピクセルのビーコン画像が埋め込まれます。ビーコン画像自体は次の手順で配置する ga.php が出力しています。配置するディレクトリを変更したい場合は適宜パス指定の修正が必要になります。

 

3. サーバのルートディレクトリに ga.php を配置する。

管理画面内の「ga.php」をクリックするとソースコードファイルがダウンロードできます。これをサーバのルートディレクトリ直下におきます。たとえば解析対象サイトが http://example.jp/ であれば、 http://example.jp/ga.php にあたる場所におきます。場所を変更したい場合は手順2でパス指定を変更すれば対応できそうです。

【リバースプロキシ内部でwebサーバを運用している場合】
これはGoogle Analyticsに限った話ではないですが、リバースプロキシを置いたwebサーバ構成にしている場合は、 ga.php のなかで使われている $_SERVER["REMOTE_ADDR"] が正しく取得できない場合があります。この場合は $_SERVER["HTTP_X_FORWARDED_FOR"] を参照するようにすると解決できることがあります。

 

 

これで導入はおしまいです。

 

1日くらい待っていると、データが取得されてAnalytics管理画面で解析できるようになります。
以下、まだ日数が浅くてデータ数少ないですが、参考までにキャプチャをいくつかどうぞ。

 

20091130ga02.png

これは「ブラウザとOS」の画面。携帯電話のキャリア別に判別できています。ソフトバンクっぽいものがなくて代わりにNetFrontが多いですがこれはちょっと謎。また、PVとUUも個別に計測しているようで、平均PVや平均滞在時間なんかも表示されています。

 

20091130ga03.png

次にこれは「すべての参照元」。
ezwebやyahooのから検索流入も表示されています。これらの平均ページビューが1って悲しいですね。みんな直帰かよ。(;_;)

 

20091130ga04.png

検索キーワードもこのとおり。ちゃんと日本語にも対応しています。

 

20091130ga05.png

これはトップページの「ナビゲーション一覧」。どこのページから来て、どのページへ行ったか。携帯サイトでこんな分析までできちゃうって素敵。

 

 

ほか、まだ試していないですが、コンバージョンの設定や分析なんかもPCサイトと同様に利用できそうです。

 

ということで、アクセス解析の本命ともいえるGoogle Analyticsの携帯サイト対応版のレビューでした。セッションやリファラなどの解析にもバッチリ対応していて、これは相当便利そうです。

 

2009年8月17日

携帯ウェブ開発についてのセミナーがありました。

気がついたら前回ブログ書いてから1ヶ月以上たってました。twitterに頻繁につぶやくようになってこっちが減った、と思いたいが、ドラクエ9に没頭していたからだ、といわれると発売日があまりにシンクロしていて(7月11日)われながら言い訳ができません。

 

さて。そんなこんなで紹介もできていませんでしたが、去る8月4日に、パソナテックさん主催で携帯サイト開発についてのセミナーを開催させていただきました。

Mobile Developer Night VOL.1
携帯ウェブ開発10の鉄則×3つの落とし穴

携帯サイトにまつわる現状や、携帯サイトを開発するうえで欠かせないノウハウについて、されどのひとと話をさせていただいています。あまり人前で話すのも不得手なので反省点ばかりですが、、、ご来場いただいたみなさまありがとうございました。

 

会の様子は、決断ポトフのそらのさんがUstreamで中継してくださっていて、永久保存版的にいまも閲覧できる状態で残されています。こりゃ相当恥ずかしいですねー!自分で見るのはあまりに耐えられなくて冒頭の1分しか見れていません。。。ああプレゼンもっとうまくなりたい。

 

それからlivedoorニュースでも、このときの様子が記事になって公開されています。

livedoor ニュース - 携帯ウェブ開発10の鉄則×3つの落とし穴【左脳をシゲキするエンジニア】

エンジニアブログ「あすなろブログ」やエンジニア支援の「てくらぼ」など、エンジニアのための派遣サービスを展開するパソナテックによる「Mobile Developers Night」の第1回が開催された。
第1回は、マイネット・ジャパン 開発リーダー 平島浩一郎氏とマーケティング部長 辻将也氏による「携帯ウェブ開発10の鉄則×3つの落とし穴」だ。

内容をさっと見るにはこちらの記事が便利と思います。

 

 

【関連】

2009年6月24日

PHPで携帯サイトを開発するためのサンプルプログラム本が出ます!

タイトルですべてを言い切ってしまいましたが・・・、「PHP×携帯サイト 実践アプリケーション集」という本が発売になります!執筆したのは私をはじめマイネット・ジャパンのエンジニア陣になります。


PHP×携帯サイト 実践アプリケーション集: 株式会社マイネット・ジャパン, 平島 浩一郎, 伊藤 祐策, 中元 正也
↑できたばっかりのホヤホヤ!


この本は、携帯ブログ、画像投稿写真アルバム、位置情報利用、携帯SNS、といった携帯サイトでよくあるようなWebアプリケーションを、PHPで作るためのサンプルプログラム集になっています。それぞれソースコードが付録CDROMに完全収録されています。
掲載されているサンプルアプリケーションを通じて、文字コードの扱い、絵文字変換、ログイン認証、空メールの受信処理、画像の取り扱い、位置情報、といった携帯サイトならではの処理について、単にソースコードの解説にとどまらず、それぞれの予備知識や実際の運用例にも触れています。紹介しているソースコードは本書のサンプルアプリケーションに限らず他でも扱いやすいようなライブラリ設計になっていて、とくに絵文字処理については、表示、フォーム入力、メール、それぞれでキャリア互換できる変換ライブラリが収録されています。開発者のかたの創意工夫でいろいろ応用してもらえると幸いです。


マイネット・ジャパンでは、携帯サイト作成ASPのkaty(ケイティ)や、その利用店舗を集めた3キャリア公式サイトどこでも!ケイティ、最近はPCだけでなくモバイルも好調なユーザー参加型ニュースサイトnewsing(ニューシング)など、数々の携帯電話向けサイトを開発・運用しています。そのなかで培ってきた開発ノウハウをこの1冊に集結させました。


想定している対象は、PHPでのPC向けウェブサイトの開発経験が多少ある方、としています。PC向けサイトなら開発したことがあるけれど携帯サイトは未経験という方、あるいは携帯サイトをかじったことはあるけれどイマイチ苦手意識が抜けないような方にとって、この本がとてもお役に立てる1冊になるのではないかなと思います!よろしければどうぞ。

 

さらっと目次を紹介すると、こんなラインナップになってます。

  • Chapter 1. PHP携帯サイトへの誘い
  • Chapter 2. RSSニュース表示アプリ
  • Chapter 3. 簡易BBSアプリの開発
  • Chapter 4. 絵文字対応BBSの開発
  • Chapter 5. 携帯ブログの開発
  • Chapter 6. 写メールアルバムの開発
  • Chapter 7. 携帯電話にメールを送る
  • Chapter 8. GPSとWebサービスのマッシュアップ
  • Chapter 9. 携帯SNSアプリの作成

 

アマゾンではこちらから!
Amazon.co.jp: PHP×携帯サイト 実践アプリケーション集: 株式会社マイネット・ジャパン, 平島 浩一郎, 伊藤 祐策, 中元 正也: 本


2009年6月15日

携帯向けウェブサービスを作るときの6つのチェックリスト

個人レベルでウェブサービスを公開するときに、忘れずに作業したほうがいいチェックリスト、みたいな記事がときどき注目を集めていたり、自分もむかし簡単にまとめてみたりしたことがあります(webサービスをリリースする直前&直後に行うチェックリスト)。
そういえば携帯サイトとしてウェブサービスを公開するときの同じようなやつ、って見たことない気がします。個人で携帯向けサービスを作ってるようなひとも徐々に増えている昨今、どんなのがあるか考えてみました。

 

1.ドメイン名

短いほうがよいです。それも携帯電話ので打ちやすいもの。文字数が短くて、かつ、たとえば「a」は1クリックで入力できるけど「s」は4クリック必要なので避けたほうがいい、みたいの。有名なのだと超店舗検索の http://mada.am/ なんかがすべて1クリックで入力できる文字になってててうまく考えられてますよね。

 

2.開発ブログ

自動でPCサイトと携帯サイトの両方が作られるブログサービスを利用すると、告知的にも、SEO的にも、いいかんじになります。いくつかあると思いますが、終電jpの開発ブログでは、この点を考慮してLivedoorブログを利用しています。

 

3.連絡先メールアドレス

携帯向けのサービスだと、携帯メールから問い合わせをしてくれるユーザーさんがいます。連絡先としてgmailのアドレスを載せていたんですが、返事を返したところ、迷惑メールフィルタ設定に引っかかってエラーになってしまい返事を届けることができなかった、という哀しいことがありました。携帯電話からの問い合わせには、こちらも携帯電話からメール返信するようにするか、あるいは「gmail.comのドメイン指定受信を設定してね」とかって案内しておくのが良いと思います。

 

4.エラーログには機種情報を

機種によってうまく動かないことが超頻繁にあります。レイアウト崩れとかのたぐいだとサーバサイドでエラー検出が難しかったりはしますが、可能な限り、エラーログには機種名なんかも出力するようにしておくと特定機種でのバグ対応がちょっぴり楽にになったりします。

 

5.QRコード

作った携帯向けサイトに実際に携帯でアクセスしてもらうために、QRコードを用意していろんなところに掲出するのが地味に効きます。よくやりがちなのが、携帯でしかアクセスできないURLを、PC向けブログで告知すること。これだけじゃ詰めが甘くてアクセスしてくれないですよね。

 

6.アクセス解析

無料で利用できるものがいくつかありますが、個人的にはぶっちぎりでうごくひとがおすすめです。無料で利用できてくわしい情報まで分析できて、解析画面もとても使いやすいです。PC向けではGoogle Analyticsがメジャーですが、JavaScript型ビーコンのは携帯では基本的に利用できません。無理やりAnalyticsで携帯サイトを解析する技もあるようで、試したこともありますがUUやリファラの解析ができなかったりしてイマイチな感じでした(最近はまた状況が変わっているのかもしれませんが)。

 

 

ざっと思いついたのはこんなかんじですね。考えればまだまだありそうな気がします。ほかにもどんなものがありますかねー。

 

2009年5月20日

iモードブラウザ2.0登場!

きのうはドコモとソフトバンクからそれぞれ、2009夏モデル新機種の発表がありました。

NTTドコモ夏モデルはJavaScript対応、ヱヴァケータイなど18機種:モバイルチャンネル - CNET Japan

 

いつもに増して今回は本当に盛りだくさんな内容ですが、携帯サイト提供している立場からすると、一番大きいのはやはりiモードブラウザ2.0の登場。
詳しいことはドコモのサイトにてはやくも掲載されていますが、個人的にぐっときた点を挙げると、

■ JavaScript対応開始
携帯電話ブラウザではJavaScript利用不可、の前提がとうとう崩れました。対応状況も詳しく見てみると、onclick系のイベントハンドラやHttpXMLRequestでの非同期通信なんかもサポートされていて、PCサイトと同じようなAjaxインタフェースが実現できますね。インラインFlashにも対応したこともあわせて、ユーザーの操作感が段違いに向上しそうです。

■ リファラに対応
個人的に一番うれしいがこれ。どこのサイトからアクセスしてきたか、が、imodeだけは一切情報わからなかったのが、ようやく対応してくれるようになりました。アクセス解析まわりがようやくやりやすくなります。

 

マピオンとかKLabとかでは、早くもiモードブラウザ2.0向けのデモサイトを公開しているようです。
マピオン、NTTドコモの新端末向けにAjaxフリースクロール地図を開発 業界初!ドコモのJavaScript対応「iモード(R)」ブラウザにいち早く対応 - CNET Japan
KLab、「iモードブラウザ2.0新機能活用デモ集」を発表 java ScriptやFLVを使うとケータイのUIはこう変わる!! - CNET Japan

 
 

ほかにもいろんな変更が今回ありますが、感想を一言で言うと、これってフルブラウザと変わらなくね?ということ。横幅が携帯電話サイズであることくらいですかね。PCサイトとか携帯サイトとかいう区別もそのうちなくなってしまうのでは、とか思ってしまいます。

逆に残念だったのは、対応機種は夏モデルのすべてではなく、一部の機種だけであること。今後どの程度のスピードで普及が進んでいくんでしょうかね。まだしばらくは未対応機種が幅を利かせそうです。
とはいえ、数年たったら、iモードブラウザ2.0以降かどうかでサイトとしての対応機種を線引きするようになっていくのでは。今回の発表はそれくらいの大きな変更だと思います。

 

2009年3月31日

DropboxのPhoto Garalleyを携帯電話で見れるようにしました!

昨日に引き続き、Dropboxの写真公開機能の話題です。

自分が撮った写真を簡単にwebに公開ができてブラウザで見れるようになるのがとても気に入っております。

 

ただ、このフォトギャラリーはPCブラウザ用だけで、携帯電話で見るには対応していません。
これが携帯電話でも写真が見れるようになったら、会話の中でのコネタに何かと便利だよなー。
・・・というわけで思い立ったら自分で作ってしまえ。ケータイで見るために変換するものを作ってみました。

 

Dropbox gallery for 携帯
 
Dropbox gallery for 携帯

 

使い方はカンタンです。

  • PCでアクセスする用のギャラリーURLをクリップボードにコピー。
  • 上記のサイトにアクセスして、テキストボックスにそのURLを貼り付け。
  • 「ケータイでみる」ボタンをクリック!

screenshot_02.png

 
すると、携帯電話で写真ギャラリーを見るためのQRコードが表示されます。アクセスして見てみましょう。

20090331dropboxmobile.gif   ← こんなかんじのケータイサイトになります。

 

↓↓↓実際にケータイで見るにはこちらからそうぞ。


 

自分用に作ったやつなのでほかの人の役に立つかどうか分からないけれど。せっかくなので勢いで公開してしまいます。よろしければお使いください。

 

 

以下、作ってる最中に見つけたメモ。dropboxで写真1枚ごとに付与されているURLについて。

 

ギャラリーサイトで写真を右クリックすると、画像のURLはこんな形式になっています。
https://photos-4.getdropbox.com/i/m/xxxxx

このURLは、縦横サイズが128x96になるURLのようです。

 

「/m/」のところをいくつか試してみたところ、こんなURLが有効になっていました。

https://photos-4.getdropbox.com/i/l/xxxxx
→640x480

https://photos-4.getdropbox.com/i/m/xxxxx
→128x96

https://photos-4.getdropbox.com/i/s/xxxxx
→64x48

https://photos-4.getdropbox.com/i/w/xxxxx
→356 x 267。lとmのあいだくらいの大きさ。

https://photos-4.getdropbox.com/i/o/xxxxx
→オリジナルサイズ。この画像だと3648x2736。

https://photos-4.getdropbox.com/i/i/xxxxx
→72x72の正方形サイズ。

また、それぞれのurlの末尾に「?dl_name=hoge.jpg」をつけると、そのサイズの画像を「名前をつけてダウンロード」する挙動になるようです。


2009年2月23日

ソフトバンク携帯電話の3GC型とかP型とかについて

調べ物をしていて今さら知ったメモ。

ソフトバンク携帯電話には、仕様が異なる4種類のタイプがあって、C型、P型、W型、3GC型、と従来から分類されていました。

 

そのうちW型については、2008年7月をもってウェブサービス利用が終了しています。すなわち、これらの機種からアクセスされることはもうない、ということですね。携帯サイト開発者としては「存在が抹殺された」と認識してよいようです。

ソフトバンクからのお知らせ 2008年6月2日

現在弊社では、通話品質の更なる向上のため、ネットワークに対して新しいソフトウェアの導入を進めており、現在お客さまにご利用いただいております「V801SH」および「V801SA」携帯電話からの弊社S!メール・ウェブサービスのご利用が本年7月より不可能となります。

「W型」にあたるのは、ここに記述されているV801SH、V801SAの2機種のようです。
これにともなってか、ソフトバンク公式技術情報サイトの仕様書でも、W型についての言及が削除されています。

 

 

それから、残るC型・P型・3GC型という分類自体の話ですが、現在のソフトバンク公式技術サイト上にはこのような分類表記がありません。かわりに

  • SoftBank 3G series

  • SoftBank 6-5 series

  • SoftBank 4-2 series

といった分類が書かれています。

Softbank / Mobile Creation / ユーザエージェント一覧

 

この2つの分類の関係性ですが、こちらの記事によると、下記のような対応になっているそうです。

モバゲータウンのノウハウ満載! フレームワークMobaSiFを使おう!:第1回 ケータイ向けWebアプリケーション開発特有の技術要素|gihyo.jp ... 技術評論社

シリーズ呼称型名呼称ページサイズ制限
4-1,4-2シリーズC型6KB未満
6-5シリーズP型12-30KB未満
3Gシリーズ3GC型300KB未満
(※W型については引用削除)

なるほど、すっきりと分かりやすい。
 

 

・・・これって常識なんですかね?? 初めて知った話でした。もう3GC型とかって呼称は使わないんでしょうか。

 

2008年11月11日

モバイル向けAdsenseが、表示回数やクリック数がカウントされない件。

導入したつもりなのに広告が表示されないよ(><)と、自分の周囲ではなにかとトラブルをよく聞く、携帯向けのAdsenseの話。

とあるサイトにて、モバイル向けアドセンスを導入したところ、広告はちゃんと表示されるようになったが、Adsenseの管理画面にログインしてみてみると、表示回数やクリック回数が何も表示されず、「モバイルコンテンツ向けAdsense」の欄が未導入状態のままの表示になる、という現象がありました。アドセンス画面にて発行された貼り付けコードをそのまま使用しているのでなにかの取り違えでもないはず。

似たような症状を検索してもなかなかhitしないので結構特殊ケースなのかもしれないですが、解決策を見つけたので書いておきます。

 

実は今回のサイトは、前にリバースプロキシを立てた複数サーバ構成で運用しているものでした。wwwサーバ自身は直接グローバルIPを持たずに、プロキシサーバから転送されてアクセスをうける、という構成。プロキシサーバを利用しているときは、アクセス元のIPアドレスなどが通常の方法では取得できなくなるという問題がありますが、まさにそれが今回の原因でした。

 

以下はphpでの例ですが、アドセンス管理画面にて発行されるコードのなかには、このような行があります。


$GLOBALS['google']['host']=@$_SERVER['HTTP_HOST'];
$GLOBALS['google']['ip']=@$_SERVER['REMOTE_ADDR'];
・・・
$GLOBALS['google']['url']=@$_SERVER['HTTP_HOST'] . @$_SERVER['REQUEST_URI'];

ここを、プロキシ構成の場合はこのように書き直します。


$GLOBALS['google']['host']=@$_SERVER['HTTP_X_FORWARDED_HOST'];
$GLOBALS['google']['ip']=@$_SERVER['HTTP_X_FORWARDED_FOR'];
・・・
$GLOBALS['google']['url']=@$_SERVER['HTTP_X_FORWARDED_HOST'] . @$_SERVER['REQUEST_URI'];

 

こうすると、IPアドレスなどを正しく取得できるようになって、広告の表示回数やクリック数もただしく集計されるようになりました。
こういうところも着実に設定をして、マネタイズを着実に積み重ねていきましょう。

 

2008年9月29日

ソフトバンクモバイルの技術情報RSS

今日になって気づいたんですが、ソフトバンクモバイルの開発者向けサイト「MOBILE CREATION」に、更新情報RSSが掲載されていました。さっそく登録っと。

 

Softbankの技術情報RSSは、以前は http://developers.softbankmobile.co.jp/dp/rss/ にて配信されていましたが、こちらは旧Developers Support Siteのリニューアルに伴ってかどうも更新が止まっているようですね。

 

2008年9月19日

モバイルグーグルマップがストリートビューに対応

携帯電話用のモバイルGoogle Mapsがきのうバージョンアップされていて、新たにStreet Viewに対応したそうです。iアプリなのでドコモ限定ですが。

 

Google Japan Blog: 新しい Google モバイルで、ケータイをさらに便利に。その2:モバイル Google マップがパワーアップ

 

さっそく試してみましたが、これはまたスゲー。実写の街並みを全画面でぐりぐり回転させるのはインパクトかなりありますね。
高機能の引き換えとして、直感的な操作性を保つのはどうしても難しいし実際苦労を重ねた上での成果だと思います。ここは今後の改善が楽しみです。

 

しっかし、こんなのがまた無料で始められると、歩行者ナビもカーナビも、いろんなものがグーグルのプラットホームの中だけで完結できるようになってしまいますね。

 

 

2008年6月27日

携帯サイト開発でのhttps(ssl通信)のメモ

https通信をともなう携帯サイトを開発するにあたって、最近いくつかハマったのでメモ書き残し。

 

SSLルート証明書

ちゃんとした証明書をwwwサーバに入れておけばどのキャリアでも問題はないんですが、開発環境などでインチキ証明書を入れていると「証明書が不正です」などと言われて携帯電話実機ではアクセスできないことあり。
とくにauが条件厳しいです。DoCoMoやSoftbankではアクセスできてもauだと無理、なんて事態に。
 
携帯電話機にインストールされているルート証明書の詳細についてはこちらのサイトが詳しいです。

携帯電話とSSLルート証明書

 

ドコモのimode ID

urlに「?guid=on」をつけることで今年4月から取得できるようになったiモードIDですが、httpsでの通信時には取得することができません。すべての通信でこっそり抜き取るような設計を考えているとイタい目にあいます。

 

ソフトバンクとhttps

ソフトバンクの技術情報サイトに書いてあるんですが、ソフトバンク端末からhttpsアクセスをすると、キャリア側のゲートウェイを通るときにurlが書き換わってしまいます。


https://www.foo.com/bar.html というURIはGWにて
https://secure.softbank.ne.jp/www.foo.com/bar.html と変換されます。

 

ホスト名などに依存したコードを書いていると、こういう思わぬところでイタい目に遭います。ええ。

 

cookieとhttps

auと、softbankの3G機種ではクッキーが利用できるということになっていて、実際に利用もできるのですが、httpsの場合はかなり注意が必要です。
 
ソフトバンクの場合は上記のとおり、httpsの場合はホスト名がGW側で変えられてしまいます。そのためcookieの保持ドメインが変わってしまい値が保持されません。
 
auの場合はさらに複雑です。
KDDI au: そのほかの技術情報 > Cookie」によると


EZweb対応端末においてCookieは、EZサーバに保管されます。
※ ただし、WAP2.0ブラウザ搭載端末ではEnd to EndのSSL通信時は端末に保管されます。
なお、EZサーバに保管されたCookieはKDDI設備のメンテナンスなどによりリセットされる場合があります。

とありますが、実際の挙動はもっと複雑。すなおに行くかと思っているとイタい目に遭います。詳しくはこちらのサイトにすばらしいまとめがあります。

auのSSLでのCookieの挙動がおかしい - maru.cc@はてな

 

 

しっかし、ソフトバンクの技術情報サイトはころころurlが変わりますねえ。。。
パーマリンクが切れてしまって、古い情報を追っかけるのが大変ですわ。

 

2008年6月10日

iPhone 3G 7月発売開始!

20080610iphone.png

 

年内発売なんていうからてっきり年末かとおもいきや、つい1ヵ月後からかー。
本体2万円前後、って激安ですね。だってiPodだけでもそれ以上するじゃないですか! そのぶん通信料は高い設定になったりするのかしら? 日本語入力はどんなかんじになるんでしょ?
なんにせよサプライズが多すぎです。

 

アップル - iPhone

 

2008年6月 5日

iPhoneかー。

3キャリアそれぞれで新機種ラインナップが発表されたと思ったら今度はiPhoneがソフトバンクから国内発売決定ですか。動きが激しすぎです。(@_@;

 

iPhoneについて - ソフトバンクモバイル プレスリリース


 

去年会社にやってきて最近はすっかり存在を忘れられている米国版iPhoneを久しぶりに触ってみました。うむ、そうだそうだ、拡大縮小スクロールがとてもスムーズ&直感的に操作できて、(携帯サイトではなく)PCサイトの閲覧がとても快適な端末でした。

ジブンはauユーザーなんですが、iPhone発売されたら買うかなぁ。ちょっと真剣に迷いちゅう。買うかも。いや買ってもすぐに飽きるかも。あーどうだろ。

 

そういえば去年初めて触ったときに、こんな雑記を残していました。

iPhoneをいじってみて雑感。 (treasuring misc.)

このときの時点で、高校生大学生とかの層に普及するのは少なくとも2-3年以上先、なんて予想していたけれど、さてどうなるかな。国内で発売されるときの端末価格とかにも左右されるけれど、あながち予想間違っていないかも。

 

 

どうでもいいが、今回のソフトバンクのプレスリリースはシンプルでいいですねぇ。ソフトバンクはそういえば以前もこんなようなシンプルなプレスリリースを出したりしていました。こういうのってソフトバンクメソッド?

 

「広帯域移動無線アクセスシステムの事業者の決定」に関するコメント

 

プレスリリース一覧を眺めてみると、決してシンプルなリリースばかりを出しているわけではなさそうですね。

 

2008年6月 4日

Mobile-users.jp - 日本のモバイルサイト開発者のためのハブサイト

最近のブームに乗っかって(?)、mobile-users.jpなるサイトができたようです。

 

Mobile-users.jp - 日本のモバイルサイト開発者のためのハブサイト

立ち上げ人のゆどうふさん Mobile-users.jpを作りました - ゆどうふろぐ

 

サイトの「ポリシー的なもの」として、こんなことが掲げられています。

  • モバイル開発初心者から、超一流のモバイラーまであらゆる利用者を想定。

  • 初めてモバイル開発をする人でも、無駄なバッドノウハウの再発明をせずに済むように、適切なポインタを張れるようにする。

  • もちろん最新情報もキャッチアップできるように。

  • このサイト自体が情報の発信地である必要はないし、それは実装の言語依存性を考えても得策ではないんじゃないだろうか。

  • 各言語のモバイル関連コミュニティの情報を横断的にやりとりできるようにしたい。

 

perlとかphpなどといった言語の枠を超えた、携帯サイト開発の情報整理&共有、ということですね。この手の情報は自分もつねづね欲しているだけに、こういう活動は応援していきたいと思います!

 

au&Softbank 2008夏モデル発表

auの新モデル12機種とソフトバンクの新機種11種類が、きのういっぺんに発表されました。

auの新機種ラインナップ(ITmedia)
ソフトバンクの新機種ラインナップ(ITmedia)

 

同時にいろんな新サービス・新機能も発表されています。気になったものをいくつかメモ。

 

ケータイdePCメール(au)

au、パソコン向けメールを利用できる「ケータイdePCメール」

今回提供される「ケータイdePCメール」は、携帯電話上で、パソコン向けのEメールサービスで一般的なPOP/SMTP方式のメールアドレスを送受信できるというもの。対応機種は2008年の夏モデルのうち、「G'zOne W62CA」「W62H」「W62SH」。

PCメールを携帯で送受信するだけなら、auoneがすでにあるしGmailもケータイで使えたりするわけですが、このサービスは携帯ネイティブのメニューの中に組み込まれるのが違うところみたいです。月額100円とのことで、自分は利用しないと思いますがどのくらい普及するのやら。

 

フルチェン、ナカチェン(au)

au、端末外装・内装をまるごと交換「フルチェン」「ナカチェン」

KDDIおよび沖縄セルラーは、携帯電話の外も中もまるごと変えられるサービス「フルチェン」「ナカチェン」を開始する。「フルチェン」は対応端末の外装を、「ナカチェン」は対応端末のメニュー画面などをまるごと変更できる。

着せ替えケータイをさらに一歩進めたようなもの、でしょうか。

「外装交換は店頭でのみ受け付け、交換作業はショップのスタッフが行なう。交換にかかる作業時間は3~5分程度」とのことですが、これってショップ側の負担がえらい大きいような。。。在庫とか流通とか含めて。よく実行に踏み切ったな。

 

絵文字リニューアル(Softbank)

ソフトバンク、絵文字とYahoo!ケータイをリニューアル

アイコンデザインが一新されるようです。コード体系なんかは以前と一緒なんでしょうか?ソフトバンクの技術情報ページにはまだ新しい記述はないようです。

孫正義社長の説明の、

たとえばソフトバンクだけの絵文字が入っているメールを他社に送信した場合、文字化けして、まるでソフトバンクのロゴマーク入りメールのようになってしまう。

ソフトバンクのロゴって、ゲタ字のことか!「〓」 たしかにソフトバンクのロゴマークだこりゃw

 

2008年4月14日

iモードHTMLシミュレータとiモードID

いつも気がついたらアップデートされているドコモ提供のiモードHTMLシミュレータですが、dcmguidをつかった処理を作ってみようかな、というついでにチェックしてみたら、シミュレータではまだiモードIDに未対応のまま、でした。
#しゃぁねえな、実機でやるしかないかー。。。

 

とはいえ現在の最新バージョンは5.1で、2007年10月に更新されたもの。手元にあったやつはもっと古かったのでとりあえずはダウンロードしなおし、っと。

 

2008年4月10日

本が出ました。「プロセス・オブ・モバイル・サクセス 企画・発案から制作・運営・SEMまで携帯サイトを成功に導く55のポイント」

本を書く計画が数ヶ月前から進んでいたのですが、いよいよ今日、発売になりました!

楽天の美谷さん、IMJモバイルの吉田さん、弊社マイネットジャパンの藤川さんとの4人での共著本です。

 

 

内容は、携帯サイトのプロデュース&ディレクションについてです。
携帯サイトを通じてビジネスを始めたい、というときに、気をつけておきたい要点を55個のポイントとして紹介しております。

 

携帯サイトを通じたビジネスチャンスが広がっている昨今ですが、じゃあ自分(たち)もやってみるか!と思っても、実践するのはなかなか難しいものです。PC向けのウェブサイトであれば、そのプランニングから制作・運用まで豊富な情報がweb上に蓄積されていて、あまり経験のない人でも敷居が低く比較的簡単に参入しやすいかと思います。
が、携帯サイトとなると話が変わる。PC向けウェブのときと同じ感覚でいると、一見同じように見えていろんなところで携帯サイトならではの落とし穴があったり、制作運用ノウハウがあまりオープンにされていなくていくらググって検索して調べようとしても欲しい情報が見つけられなかったり、数多くのカベに当たってしまうのでは、と思います。
そんなときに、誰もが躓いてしまうような携帯サイトならではのポイントを、おいしいところを要点にまとめた一冊になっております。

携帯サイト開発をする上での技術的なポイントについて、の章を私が担当させていただきました。

 

目次を紹介すると、このようになっています。

  • 第1章 携帯サイトを取り巻く環境

  • 第2章 携帯サイトでのビジネスモデル

  • 第3章 携帯サイトのプランニング

  • 第4章 携帯サイト制作のチェックポイント【基本編】

  • 第5章 携帯サイト制作のチェックポイント【技術編】

  • 第6章 携帯サイトの運用

  • 第7章 SEM(モバイル・サーチエンジン・マーケティング)

  • 第8章 ケーススタディ

 

最後のケーススタディの章では、実際に成功している携帯サイトの事例をいくつか取り上げていて、MovaTwitterやR25式モバイル、ニコニコ動画モバイルなどと並んで弊社のデコブロも紹介させていただいています。

 

出版元の翔泳社さん運営のMarkezineにて、本書の紹介記事があります。よろしければどうぞ。

MarkeZine:◎モバイル激変時代に成功を勝ちとるための新法則が一冊の本に!

 

 


2008年4月 8日

【php&ethnaで携帯サイトを作る】セッション管理(その3)

世の中はすっかりEthnaよりもCakePHPだよなー、なんて思いつつ。マイペースにこのシリーズ続けます。携帯サイト向けのセッション管理のお話。
ちょうど今月よりドコモでもimodeIDが取得できるようになったので、こういうセッション管理は今後必要なくなるかもしれないですが・・・。
今回はethnaに依存した話です。

 

session.use_cookies の変更タイミング

前々回で、php.ini設定項目の session.use_cookies を変更するとかって話をしましたが、今回はそれをどうethnaプロジェクトに実装するか、という話。

session.use_cookies の値を動的に変更するには、session_start() をするまえに変更しないと意味がないようです。これを実装する1つの方法として、Ethna_Sessionクラスを継承したクラスを作って、そのコンストラクタに記述する手があります。親クラスのコンストラクタを呼んだ直後に記述するとうまくいきました。
あ、Ethna_Sessionクラスを上書きする場合名、appディレクトリ直下の Controller.php でその名前を指定するのを忘れずに。

 

セッションパラメタ名の変更タイミング

続いてセッションパラメタ名を変更する場合の記述箇所について。「PHPSESSID=xxxx」ってやつを任意のものに変更する場合ですね。
これも上記と同じく、session_start() をする前、Ethna_Session 継承クラスのコンストラクタに記述するのがよいようです。

そんなわけで上記2つをあわせて、サンプルとしてはこんなものになります。

class Session_Extends extends Ethna_Session_Memcache
{
    function Session_Extends($appid, $save_dir, $logger)
    {
        //■親クラスのコンストラクタをコール
        parent::Ethna_Session($appid, $save_dir, $logger);
        
        //■セッション名を上書き
        $sessname = 'PHPSESSID';    //任意のものに変更
        $this->session_name = $sessname;
        session_name($this->session_name);
        
        //■クッキーが使えない端末からのアクセスのときは、urlパラメタでセッション引数を引き回すようにする
        if(Mobile::isEnableCookie() == false)
        {
            ini_set('session.use_cookies', 0);
        }
    }
}

 

Ethna_sessionのおせっかい機能

セッション使用時は、毎回アクセスもとのIPアドレスをチェックして、前回とちがうIPからアクセスされてきたときは別セッションとみなしてセッションを再スタートさせる処理、が、Ethna_Sessionに実装されています。PCアクセスの場合は頼りになる処理なんですが、携帯アクセスのときはコレが余計なお世話。携帯電話の場合、アクセスするたびにIPアドレスは変わりうるので、このままではセッションが継続されません。 ので、この実装を打ち消す対応が必要です。 具体的には、Ethna_session のなかの _validateRemoteAddr() が、このIPアドレスのチェックを行っています。このメソッドを、常にtrueを返すようにオーバーライドすればOKです。

 

 

過去のシリーズ記事

 

2008年3月31日

ドコモ(docomo)端末でiモードIDの通知が開始

今日からコレが開始です。

重要なお知らせ : 『iモードID』の提供開始について | お知らせ | NTTドコモ

ドコモは、お客様の利便性・満足の向上と、「iモード®」対応サイトの機能拡充を図るため、iモード上で閲覧可能な全てのサイトへの提供を可能としたユーザID『iモードID』(以下、iモードID)機能を提供いたします。

iモードIDについて - 作ろうiモードコンテンツ

 

さっそく試してみました。phpだとこんなやり方で取得OK。

echo $_SERVER['HTTP_X_DCMGUID'];

試してみた端末では、iモードIDの値は英数大文字小文字交じりの7文字でした。

 

注意点は、上記サイトに書いてありますが、

  • アクセスするときのurlに「guid=on」をつける。GET/POSTどちらもOK。

  • httpアクセスのときのみ有効(!)。httpsアクセスでは利用できませんでした。

  • 端末側のデフォルト設定はON。

 

2008年3月28日

【php&ethnaで携帯サイトを作る】セッション管理(その2)

週1ペースで書く、なんて宣言しておきながら2ヶ月以上ほったらかしにしているこのシリーズですが、、、しれっと続きをいきましょう。

 

前回の続きで、クッキーが使えない携帯端末向けのサイトでセッション管理をするときの話、です。

 

定数SID

セッションIDを url に埋め込むのに、php.ini 設定の session.use_cookies を操作するのではなく、自力でphpで処理を書く場合。定数 SID というのが使えます。
この定数、自分も最近まで存在を知らなかったんですが、PHPリファレンスサイトのなかの http://jp2.php.net/manual/ja/ref.session.php#session.idpassing や、同じページのなかの「定義済み定数」の欄に説明が書いてあります。

セッションが開始している場合に定義されている定数 SID を使用することもできます。クライアントが適当な セッションクッキーを送信しなかった場合、この定数は session_name=session_id の形式となります。 他方、送信された場合には、この定数は空の文字列に展開されます。 このため、この定数を無条件に URL に埋め込むことができます。

 

ということで、url にセッションIDを付加する処理を自分で書く場合は、このSID定数を見て、 ? なり & なりで url の後ろにつなげるのが良いです。
あ、かるくハマっことあるのは url の中に「#hoge」っていうアンカーが含まれている場合。この場合は末尾に付加するとアンカーテキストの一部と見なされてしまうので、# の前に付加するようにしましょう。

 

セッションの有効期限の管理

セッションの有効期限を、「ブラウザ閉じるまで」のセッションクッキーではなく、時間指定で期限設定したい場合の話。

cookieでセッション管理する場合は、cookie自身に有効期限を設定できるのでこれで管理すればOKなのですが、urlパラメタで管理する場合、このクッキー有効期限のしくみは利用できません。

ので別の手段で期限管理をする必要があるわけですが、自分が思いついたのは、セッション変数としてパラメタ管理する方法。有効期限の値をセッション変数のなかで保持するようにすれば、この問題は回避OKです。

 

mod_rewriteリライトルール

これはちょっとレアケースだと思いますが、、mod_rewriteでurlのリライトを行っている場合の話。

RewriteRuleの記述で、クエリストリングを引き継がない設定になっている場合、すなわり「QSA」オプションの記述がない場合は、せっかくurlに付加したセッションIDがリライトしたときに消えてしまってなぜかセッションが切れる、ということでハマったことがありました。

 

 

 

セッション管理の話はもう1回だけ続く予定です。ここまでphp全般の話題をしてきましたが、次回はethnaと関わる話をしようかなと。。。→書きました

 

過去のシリーズ記事

 

2008年1月31日

特定の条件で楽天モバイルにアクセスするとWebLogicが認証を要求してくる

妙~な現象を見つけた。

 

楽天モバイルの個別商品ページへリダイレクトするプログラム、たとえばこんなの

<?php
header('Location: http://m.rakuten.co.jp/shopjapan/i/790183/');
?>

をつくってwebサーバAに置く。
webサーバAにはbasic認証をかける。
で、このurlにau実機でアクセスする。

すると、サーバAのbasic認証を突破したあとに

WebLogic Serverの認証に失敗しました。ユーザー名とスワードを入力してください

という謎のダイアログが出てくる。

docomoやsoftbankだと問題なし。
サーバAのbasic認証はずすとこの現象は発生しない。
(IPで制限しているようで、PCではそもそもアクセスできない)

 

ネットワーク上のどこのサーバが警告出してるのか最初さっぱり見当つかなかったが、楽天のサイトがWebLogicで動いているようなので多分ここが怒っているようだ。

 

2008年1月25日

katy(ケイティ)1周年!

1周年!運営チームからのメッセージ (katy(ケイティ)スタッフブログ)

本日、携帯サイト作成サービスkaty(ケイティ)はご提供を開始してから1年を迎えました!たくさんのご利用ありがとうございます!

 

ということで、去年2007年1月25日に携帯サイト作成サービスkaty(ケイティ)をサービス開始してから、ちょうど1年がたちました。ひとえにユーザーさまや販売代理店さまをはじめ、関係者の皆さまのご支援あってのものでございます。本当にありがとうございます!

 

1周年を機に運営チーム4人で、動画メッセージをつくってみました。

 

katyはここに出てくる藤川白石アケミックス、私の4人が運営チームとして担当させていただいています。

 

去年1年間、ひたすらずっとkaty事業に従事してきて、前ばかりを向いて走ってきましたが、こういう区切りのタイミングでたまに過去を振り返ってみると、いろいろ思い出があふれ出てきてなかなか感慨深いです。事業企画を考えはじめて方向性をみんなで議論していた頃。リリース直前は著しく無理しながらシステム開発していたこと。リリース当日は多くのメディアさまに記事として取り上げていただいて「サーバ落ちないかな」と不安ドキドキな思いで迎えた1日。初めて本番環境で独自ドメイン設定をして無事にアクセスできるのを確認できたとき。地図機能、メール機能、オンライン決済機能、とリリース後も次々と機能追加を続けてきたこと。サーバがダウンしてユーザーさまたちに大変なご迷惑をかけたこと。似たようなサービスいっぱあるけどkatyが一番使いやすい、と時々お褒めの言葉をいただくとき。

 

おかげさまでユーザーさまも増えてきて、事業的にも少しずつ軌道に乗りつつあり、ここから先の1年はこれまで以上に「楽しい」仕事の時間をすごせそうです。
katyのキャッチフレーズとして掲げている「すべてのお店に、ケータイサイトを」をもっともっと実現できるよう精進してまいります。これからもよろしくおねがいいたします。


2008年1月15日

【php&ethnaで携帯サイトを作る】セッション管理(前編)

さて、1週間ぶりにこのシリーズ再開。
#正月の間に下書きしておいた記事ストックがなくなったから、というのはここだけの話w。今後は週1くらいのペースを目標に続けていきます。。

ということで今回は、ログインをしてセッション管理が必要なサイトを作るときの話です。

 

携帯サイトではCookieが使えない。

大きく立ちはだかるのが、Cookie使えない壁です。imode端末のすべてとソフトバンクの一部機種(C型・P型)がCookieに対応していません。auはOKなんだけどね。
なのでCookieが使えないなら、urlパラメタにセッションキーをいれてずっと引き継いでいくことになります。

PHPの機能

php.iniの設定で操作できることに、次の2つがあります。

session.use_cookies

session.use_cookiesによりクライアント側にセッションIDを保存する際にクッキーを使用するかどうかを指定します。デフォルトは1(有効)です。

このオプションを0(無効)にすると、クッキーではなくurlパラメタで、セッションキーを引き回せるようになります。もうすこし厳密に言うと、urlパラメタに PHPSESSID=xxxxxx があると、このセッションキーからひもづいてwwwサーバ側に保存されているセッション変数群に $_SESSION[] でアクセスできるよう、PHP言語側で処理してくれるようになります。

session.use_trans_sid

session.use_trans_sidは、透過的なセッションIDの付加をするかどうかを指定します。デフォルトは、0(無効)です。

これ、くわしい挙動を確認してみたところ、こんな動きをしてくれます。

phpファイル中に書かれているすべての<a href="hoge">の記述について、(<a>タグだけでなく<form>なども処理対象です)

  • urlが絶対パスの場合 → なにもしない

  • urlが相対パスの場合 → 自動的にurl末尾に「?PHPSESSID=xxxxxx」を付加してくれる。(ほかにパラメタがすでに記述されている場合は?ではなく&でつなげられます)

なかなか便利そうーと最初は思ったんですが、いざ使ってみるとなかなか扱いが面倒になるケースがあるので、私はこのオプションは利用しない派。代わりにSmartyの修正子で似たような処理を作る方向でも対応可能かと。

(そのほか、関連項目にsession.use_only_cookiesとかurl_rewriter.tagsとかがありますので興味のある方はどうぞ。)

で、これらのphp.iniの設定項目は、コード中でphp_ini()関数で動的に変更できるので、UAなどを見てCookie非対応機種からアクセスされたときはこれらのオプションを変更する、という手が取れます。

セッションパラメタ名

上記で PHPSESSID と記述しているセッションパラメタ名ですが、これはデフォルト設定で、session_name()関数で自由に設定できます。デフォルトだとカッコわるいwので適宜変えちゃいましょう。

その際の注意ポイントですが、

  • docomoで、urlの文字長は最大512バイトまで。
    なのでなるべく短いのにしましょう。

  • Softbankで、公式サイト以外では使ってはいけないパラメタ名というのが定められていて、「sid」「uid」とかのベタなやつは使っちゃダメってことになっています。(詳しくはソフトバンク公式技術サイト「HTML編」のP.51あたり)

 

 

長くなってきたので後編に続く。

 

2008年1月12日

初めて知ったメモ:Shared Object (flash)

そういえばここんとこしばらくリアルでお会いできていないMind Clipさんとこのエントリー。

Mind Clip R25.jpリニューアルでのShared Object活用

昨日、R25.jpがリニューアルされた。すべての記事を配信するというので、ここしばらく見ていないこともあり、サイトを見てみたのだが、記事の内容よりもサイトにShared Objectが使われているところに目が行った。

 

Shared Objectとはなんぞや?ということでちょっと調べる。
[228630]ローカル Shared Object とは

Shared Object は、web ブラウザで作成されたクッキーにデータが蓄積されるのと同様、クライアントマシン上にデータを保存するために使用するものです。データは Shared Object を作成したドメインと同じドメインを拠点としたムービーによってのみ読み込まれるもので、Macromedia Flash Playerがユーザーのマシンにデータの書き込みをする唯一の方法です。

 

よくわかんないけどCookieみたいな仕組みのようだ。
Flash Player上に搭載されているのでブラウザ設定でCookieオフにしてても使える、っつってもいまどきCookieオフにしてる人ってなかなかいないような。

じゃあなにかでこの仕組み活用できるかな、と考えたときに、携帯だと光が当たりそうな気がした。

携帯だとCookie対応していない機種があってセッション管理に苦心するわけだけど、Flash lite2でSharedObjectがサポートされている模様。このへんをうまく使うと携帯サイトでもセッション管理が楽につくれるようになるんかなぁ。もちろんFlash対応機種限定になってしまうけど。

 

2008年1月 9日

【php&ethnaで携帯サイトを作る】文字コード変換処理

携帯サイトhtmlの文字エンコーディングはShift_JISにするのが良いわけですが、ethnaに取り込まれているsmartyがEUC-JP推奨になっていて、Shift_JISだと内容によってsmartyがエラーを吐く場合があります(UTF-8なら問題は起きない、という情報もアリ。ジブンは未確認)。

そこで、ソースコードやテンプレートファイルはすべてEUC-JPで書いておいて、出力するときにShift_JISに変換して出力する、というやり方が良いです。
ethnaには入出力時に自動で任意の処理を行うフィルタ(filter)のしくみが用意されているので、これを用いるとコード中で文字コード変換する処理を極力減らすことができてすっきりします。

また出力時だけでなく、POSTされたデータを受け取るときの処理も同様です。フォーム入力されてPOSTされた日本語データは、元ページhtmlの文字エンコーディングのままで送られてきます(ただし例外アリ。auの場合、UTF-8でページを作っていても送られてくるデータはShift_JISの場合があります)。それをコード内で処理したりDBに格納したりするときの文字エンコーディングを統一させるのに、filterをつかうことでスッキリと処理できるようになります。

 

filterを使うには、ethnaプロジェクトディレクトリの app/filter/ のなかにfilterファイルを作って、Controllerの中にfilter名を記述すればOKです。

 

以下、filterの記述例です。
ソースコード自体はeucで記述しておいて、携帯からアクセスされた場合はShiftJISで、PCからアクセスされた場合はそのままeucで出力させるケースです。
中で使用しているNet_UserAgent_Mobileについてはこのへんとかを参照ください。

 

include_once('Net/UserAgent/Mobile.php'); 

class Hoge_Filter extends Ethna_Filter
{
// POSTされたデータを文字コード変換してからソースコード本体に渡す
function preFilter()
{
ob_start();

$agent = Net_UserAgent_Mobile::singleton();
if($agent->isDoCoMo() || $agent->isEZweb() || $agent->isVodafone())
{
//■携帯アクセスの場合は、受け取りパラメタのエンコードをsjis->euc変換
$_GET = Filter_convert_encoding_sjis2euc($_GET);
$_POST = Filter_convert_encoding_sjis2euc($_POST);
}
else
{
//■PCアクセスの場合はなにもしない
}
}

// 出力時に文字コード変換処理を行う(smarty変換処理のあとにコールされる)
function postFilter()
{
$content = ob_get_contents();

$agent = Net_UserAgent_Mobile::singleton();
if($agent->isDoCoMo() || $agent->isEZweb() || $agent->isVodafone())
{
//■携帯アクセスの場合

//xhtmlの場合はここでContent-Typeを出力
//header('Content-Type: application/xhtml+xml; charset=Shift-JIS;');

//エンコーディングをShiftJISに変換
$content = mb_convert_encoding($content, 'sjis-win', 'eucJP-win');
}
else
{
//■PCアクセスの場合はなにもしない
}

ob_clean();
echo $content;
ob_end_flush();
}
}

// 引数が配列の場合は中の要素を再帰的に処理
function Filter_convert_encoding_sjis2euc($value)
{
if(is_array($value))
{
return array_map('Filter_convert_encoding_sjis2euc', $value);
}
else
{
return mb_convert_encoding($value, 'eucjp-win', 'sjis-win');
}
}

 

ポイントはob_start()を使って出力をいったんバッファに入れておいて、最後に全部まとめて文字コード変換してから出力する、というやりかた。
これを記述しておくと、煩雑になりがちな文字コード変換処理を自動で行ってくれて、ソースコード本体がシンプルになって開発効率も向上!すると思います。超おすすめ。

・・って、エラそうに書いてますがWEB+DB PRESS 37に掲載されていたウノウさんのコードをかなり参考にさせていただいています。感謝。

 

ちなみにこのethna filterを使わなくとも、ob_start()とob_get_contents()あたりを組み合わせて使うと同様の処理が実現できるとおもいます。

2008年1月 8日

【php&ethnaで携帯サイトを作る】ケータイサイト開発のおさらい

まずは基本的なところのおさらいから。
こまかく言い出すとキリがないのでさらっと。おもにPCでのweb開発しかやったことないひと向けに書いていきます。


html/xhtml

PCと似ているようで結構違う。キャリアによっても機種によってもサポート状況に違いあり。
開発するサイトがターゲットにする端末範囲を要件定義した上で、使えるタグのみを利用していくのが吉。
違いの大きなところだと
・ちょっと古い機種ではtableタグ使えない
・テキストの背景色指定をするには、tableタグかxhtml+cssが必要
・文字の大きさ指定も端末によって差の幅アリ。端末側のデフォルト文字サイズ設定にも大きく左右される
・formまわりの記述も端末による違いに注意が必要。また文字入力モードを指定するistyle属性を忘れずに記述しておくと使い勝手が格段に向上します


文字コード

ShiftJISで作るのが良いです。
xhtmlだとUTF8やeucでもいける端末もあります。
POSTされた日本語データの受け取り処理時に、どの文字コードでPOSTされて来たか留意しましょう。


画像

最近の機種だとどれもgif/jpgが表示できるのであまり気にしなくて良いが、古い端末だと機種・キャリアによってサポートしていない形式があり、キャリアによって出し分けする必要アリ。
形式はもとより、容量制限(1ページあたり10KB以内、など機種によりさまざま)もギリギリになりやすい。


絵文字

とにかく鬼門になるのが絵文字対応。これは別エントリーにまとめます。


クッキー

ドコモ機種はcookieが使えません。auと一部のソフトバンク機種はcookie対応。
cookie使えない機種でセッション管理をするには、urlのクエリパラメタにセッションキーを付け回す必要アリ。


JavaScript

いまのところ一切使えません。
Ajaxでフォームを動的に書き換えることに慣れた身体にはえらく自由度が低くて困ります。。
また、katy(ケイティ)のユーザーサポートをしていて時々問い合わせを受けるんですが、Google AnalyticsなどのJava Scriptをつかったアクセス解析サービス等も携帯では一切使えません。


Flash

簡易版のFlash liteが、使える端末があります。
Flash liteは今まさに大きく進化中で、搭載されているFlash Playerのバージョンによって、実現可能なことが大きく異なります。


携帯限定のサイトにするには

携帯端末からのアクセスのみに限定して、PCからのアクセスを受け付けなくする手法がよくとられます。
理由はいろいろあると思いますが、コミュニティ運営上の理由で携帯ユーザー限定にしたりとか、htmlソースが見れないなど自由度の低い携帯ブラウザからのアクセスに絞ることでのセキュリティ上の理由だったり。

やり方としてはおおきく2つ。
UserAgentで判別
携帯端末からのアクセスは、判別可能なUserAgent情報があるので、それで判定する方法。
短所としては、PCブラウザでもUAを詐称するとアクセス可能になること。
IPで判別
携帯電話からのアクセスは、アクセス元IPアドレスの範囲が決まっている(各キャリアが公開しています)ので、このIPアドレスから以外のアクセスは受け付けなくする方法。
サイト側でこの方法をとっている場合、PCからのアクセスはどうあがいても不能です。
短所は、このIP範囲帯はたまに変更されるので保守し続ける必要があること。

 

2008年1月 7日

【php&ethnaで携帯サイトを作る】序章

さて。突然ですが、「php&ethnaで携帯サイトを作る」と題したエントリーをこれから数回にわたって書いていこうと思います。

 

このところいくつかの開発案件で、フレームワークethnaを使ってケータイサイトを作ることを続けてやっていて、ちょっぴりですがノウハウ的なものがたまってきたので、このまま忘れてしまう前にブログにでも書き残しておこう、というシリーズです。

ケータイサイトを開発するにあたって、シロート状態のところからいろんな情報をたよりにこれまでやってきました。
キャリアや機種によって差異があまりにありすぎて、検索して見つけた情報がその通りに動かないじゃん!なんて目に何度も遭いつつ。
これから書いてく内容も完全にすべての機種で動作確認をしているわけではないので、他の情報と同じように場合によっては正しく動かないこともあるかもしれません。時代が流れるにつれてあたらしい機種端末も次々出てきて情報も劣化していくと思います。
とはいえ、ただでさえあまりまとまっていない携帯サイト開発に必要な情報をちょっとでもまとめることで、他の人のお役に少しでも立てれば、と思います。
#あと、自分も知らないことがまだまだたくさんあるので識者のかたに教えてもらえれば。^^

 

表題に「ethnaで」と書いているとおり、ethnaフレームワークをつかった場合の話が時々紛れ込んでくると思いますが、必ずしもethnaに限った話ばかりではないのでethna onlyな箇所については適宜読み替えていけばethna不使用の場合でも十分通用するかと思います。

 

2007年12月17日

imodeサイトでページ内アンカー<a name="hoge">が効かない

調べてみたらxhtmlの常識?だったぽい。えーそんなの知らなかったよ!

 

【本日のハマりポイント】
<a name="hoge">を作っておいて(url)#hogeへアクセスすると、imodeだとページ内移動が行われない。

 

【ちょっとぐぐったらすぐに答え見つかった】
この症状が起きるのはimodeでxhtmlサイトの場合のみ。
name属性は、xhtmlでは不採用で、代わりにid属性が推奨。
なので、<a name="hoge" id="hoge">と書くのが正解みたいです。これだとちゃんと動く。

 

ちなみに、他の携帯端末やPCブラウザでは、xhtmlサイトでも<a name="hoge">だけでちゃんと動いてくれるようです。

 

2007年11月26日

(自分メモ)OpenWin

また新手の規格かなにか?かと思ったら、WiMAX事業を目的とした企業グループのことか。ふむ。

 

オープンワイヤレスネットワーク、WiMAX事業の執行体制を発表

OpenWin、免許取得後に新たに31社が参加

【NGN+S2007 Autumn】 OpenWinの深田氏、同社の目指すオープンなモバイルWiMAX事業を語る

 

2007年10月24日

katy(ケイティ)に新機能「しっかりページ作成ナビ」登場!

先週の話になりますが、マイネット・ジャパンで提供している携帯サイト作成無料サービスkaty(ケイティ)に、新たに「しっかりページ作成ナビ」機能をリリースしました!

 

HTMLを知らなくても、ウィザード型の入力画面にしたがって項目を入力していくと、お店の携帯サイトがとてもカンタンに作れてしまう!というものです。
以前からも同様の機能を提供していましたが、今回はハイクオリティ版ということで、3G携帯に特化したデザインリッチなテンプレートを多数用意しています。

 

今回も例のごとく、ジブンも開発にあたっていました。
今回こだわったのは、画像素材の扱い。クオリティの高い写真をちりばめると、サイトの印象が「ぐっ」と変わります。そのため、多くの写真画像を選んで配置しやすくして、より「おおっ」と思われるような携帯サイトができあがるような設計にしています。
裏側では、入力画面でJavaScriptを多用していて、最終動作確認で相当難航しました・・・が、苦労した分、使いやすいものができたかな、というかんじです。

 

くわしくは、こちら↓もご覧ください!

ワンランク上の携帯サイトの作り方|携帯サイト作成ツール katy(ケイティ)

 

katy(ケイティ)は、基本機能は無料で提供しています。
興味をもたれましたらぜひお気軽にお試しください。

携帯サイト作成無料ツール-katy(ケイティ)-

 

2007年10月12日

携帯htmlでハマった。

これって常識?ぐぐっても事例見つからなかったんだけどさ。

 

htmlでフォームを作るときに、

<form method="post" action="">

というように、action属性を空にして記述すると、submitしたときに今とおなじurlへpostしなおします。ふつうのブラウザは。

 

でもドコモmova機種はこの書き方だとダメなようで、action属性が空だとsubmitボタンを押そうとしても次の画面へ移らない、という挙動になるようです。

<form method="post" action="hoge.php">

などのようにaction属性になにか記述すれば回避できました。

Google Adsenseのモバイル版が開始

http://adsense-ja.blogspot.com/2007/10/adsense.html

 

ということでさっそく、趣味で作っている「ちずったー」の携帯サイトに導入してみました。
どんな仕様なのか探りながら、作業してて思ったことメモ。

 

  • PC版と違ってJavaScriptは使えないので、perl/php/asp/jspのサーバサイド言語での埋め込みになる。
  • 元ページのhtml形式をchtmlとかxhtmlとかから選ぶ。これは携帯版sitemap.xmlの仕様とおんなじですね。
  • 埋め込んだページは、携帯に限らずPCブラウザでアクセスしてもちゃんと表示される。
  • PC版みたく背景色等の色指定ができるが、これが有効なのはxhtmlのときのみ。
  • 元ページの文字コードを、直接指定または自動検出から選ぶ。自動検出は、携帯機種によってたまに文字化けすることがあるようです。
  • 導入した直後は広告が表示されないことがある。広告が掲出されるはずのスペースはトルツメされるので、デザインレイアウト的に崩れることも。
  • たまに英語版の広告も表示される。英語版の中にはphonetoのものも混じっている模様。電話番号の桁数ちがうから日本からは掛けらんないじゃん。
  • コンテンツマッチはわりとうまく機能している模様。広告インベントリーはどのくらいあるんでしょう。
  • 自分で広告クリックした場合の不正検出ってどうやってるんでしょうね。広告掲出作業をするPC端末と、自分でつくった携帯サイトへアクセスする携帯電話端末とのひも付けはされていないので、自分でクリックしても不正検出できないのでは?

 

2007年8月15日

iPhoneをいじってみて雑感。

先日会社にやってきたiPhoneをちょくちょく触っていて、感じたことをまとめてみる。

 

iPhone

 

■UIは文句なしにスバラシイ。

何の予備知識ナシに端末を「はい」って渡されても、すぐに使いこなせてしまうこの使い勝手はスバラシイの一言。
初めて触る人に見せるとどの人も、指2本で拡大縮小すると「おおっ!」、天地を回転させると画面表示も連動して回転するのを見て「おおおっ!」と驚きの声を上げてしまう、この「wow!」なサプライズもスバラシイ。
ボタン装置は1つだけにして他のすべてをタッチパネルのなかに押しこんだUI設計、だけでなく、触ってからの軽快なレスポンスを実現しているのも、体感操作性におおきく寄与してる。

 

■PCサイトがかなり快適にフルブラウズできてしまう。

この使い勝手のいいインタフェースのおかげで、携帯電話でありながらPCサイトがスムーズに見れてしまう。となると、ケータイ限定のサイトが意味なくなるかも、という意見をちらほら聞く。

長期的にはそうなると思う。

が、それがいつごろの時期になるかというと、少なくとも2-3年以上は先でしょう。高校生大学生あたりのユーザー層へ、iPhoneのような携帯電話が広く普及するようになるにはまだもうちょっと遠い話。

というかむしろ、PCか、携帯か、でネット世界が分かれていること自体が不自然な状態だと考える。
現在でも、PC向けサイトは横幅サイズが広がる方向にあるが、モバイルPC端末とかwiiとか、ディスプレイサイズが小さい様々なデバイスからアクセスされる機会も増えている。「ケータイサイト」というくくりというよりは、表示デバイスに応じて見た目を切り替えるような技術が今後もっと進むのでは。
あともちろん、「iPhoneでPCサイトがスムーズに閲覧できる」というのとは別に、「iPhoneで閲覧するのに最適化されたサイト」というのもあるのかと。

 

■ケータイサイトならでは世界観。

上記に対して、文化圏的なはなし。
オトナのみえないところで楽しくやりたい若者(中高生)は、いつの時代も普遍的に存在するでしょう。
ただそれは、今後もずっと「携帯電話」に限られた世界の中である必要はなくて、時代に応じてその舞台は変わっていくもの、だと考える。10年くらい前にポケベルで見知らぬメルトモを作っていたような年代層が、その後携帯電話でメルトモを増やすようになって、今ではプロフだとかブログとかでやりとりするように進化している。最近は学校裏サイトの話題なんかもちょくちょく耳にする。

そういうものは得てして、使い勝手が多少悪くても、使う人は使い続けるもの。初心者への障壁の低さはもちろんだが、上級者にも不満を感じさせない機能網羅性や高度なカスタマイズ性、一見さんには見つからないような制限性、あたりの条件を満たすようなものが新たに出てくれば、いまのケータイを軸にしたビジネスはがらりと変わりそう。

 

■話がそれたがiPhone。

時代を何世代も先に行くような、恐ろしく完成度の高い製品です。デバイスやさんたちはまさにいま大慌てでしょう。いまweb制作をしているようなコンテンツやさんにはまだすぐに影響はないでは。音楽とか動画とかのステークホルダーな人たちはまた違うかもしれませんが。
携帯電話だけにとどまらず、デジカメとか電子辞書とかゲーム機とかATM端末とか、別のジャンルにもあーいうインタフェースが広がっていかないものですかね。

iPhoneをきっかけとして、これからもっともっとオモロイモノが世の中に増えるとよいなー。

人々に熱狂的に使ってもらえるようなプロダクトを作ること、そーいうのにはある種のアコガレを感じます。自分も目指していきたいものです。

 

2007年8月 3日

うわさの、、

iPhone!!!

 

iPhone

 

2007年6月22日

無料携帯ブログサービス「デコブロ」がスタートしました!

マイネット・ジャパンの新しいサービス「デコブロ」が今日からスタートしました!

 

無料携帯デコレーションブログ・デコブロ
http://blg.jp/ (携帯専用)

 

デコブロは、ケータイ向けのブログプラットホームサービスです。圧倒的な機能!とクオリティの高いスタイリッシュなデザイン!が特徴です。

ジブンは直接このサービスの開発や運営に携わっていないので、自社のことながら若干どうしても第三者的な書き方になってしまうのですが、

■ トラックバックに変わる「レスエントリ」機能
PCでもケータイでも見ることができる大手ブログサービスでは、ケータイの世界にもトラックバック機能を持ち込んでいて、エントリーの末尾にトラックバックping urlが書かれたりしてますが、ブラウザを2つ開けなかったりコピペも使いづらい携帯端末で、果たしてこんなの使う人いるの?とずっと思っていました。
今回、トラックバックに変わって「レスエントリ」という機能を導入して、携帯であってもトラックバックと同じような機能をとてもつかいやすく提供されています。

■ ケータイのくせにリッチテキストでブログが書ける
フォントをでかくしたり、色を変えたり、デコメっぽいテイストのブログが書けちゃいます。ケータイの貧弱なUIのなかでも、入力しやすさを考えた工夫がされています。この機能、あまり積極的に説明がされていない感じがするので、知る人ぞ知る裏ワザ的機能として扱われそうな気もします。

というところがとても気に入っております。

 

ぜひ試しにアクセスしてみてくださいね!

無料携帯デコレーションブログ・デコブロ
無料携帯デコレーションブログ・デコブロ
http://blg.jp/

 

 

参考:
携帯電話では使い勝手こそが競争力--マイネットのモバイルブログ「デコブロ」:ニュース - CNET Japan
携帯ブログ『デコブロ』 本日、リリースしました。
携帯ブログサービス『デコブロ』、無事リリースしました。 (モバイル魂)
マイネットのモバイルB2C新サービス明日リリース | 近江商人JINBLOG
「デコブロ」でまとめてブログ検索

 


2007年4月 9日

katy(ケイティ)に地図機能を新規リリースしました。

ことしの1月よりマイネット・ジャパンで提供している無料携帯サイト作成サービスkaty(ケイティ)ですが、先週、新たに「クーポン地図プラン」「地図プラン」を導入しました。

 

 

MapFanを運営しているインクリメント・ピーさんから提供を受けた地図データを利用して、かんたんにお店の地図をケータイサイトに掲出できる、というメニューです。

ホームページに地図を出すのって意外と面倒で、他所の地図サイトのものを拝借するのは権利的にマズかったり、かといってイラストで描き下ろすのもセンスが必要だったり別途発注費用がかかったり、というのがよくある話かと思います。それをすぐに解決できるのがこのメニューになります。

 

 

われらがマイネット・ジャパンのケータイサイトもkatyをつかって用意しておりまして、さっそくこちらにも地図ページを用意しました。このような地図がカンタンに設置できますです。(携帯電話でゼヒいちどご覧ください!)

qr_mjaccess.jpg

 

 

以下、開発上のウラ話。

この機能の開発はおもに自分がやったのですが、もともと「地図萌え」を公言している(?)ジブンとしましては、とても楽しい開発作業でありました。「PCの画面で、地図表示の中央座標や縮尺を指定」して、その指定したものが「ケータイサイトで表示される」というところが今回のキモとなる部分で、縮尺の調整など、単なるGoogle Maps APIの利用とはちがう苦労を味わえました。

 


2007年3月 7日

RTCカンファレンス×WinケータイFAN 『携帯プラットフォームの変化』

今夜は、RTCカンファレンス×WinケータイFAN 『携帯プラットフォームの変化』に、参加してきました。

3月31日からサービスインされる携帯電話事業への新規参入事業者イーモバイルと、
そのOSとして採用されているWindows Mobileについて、
それからJigブラウザについて、
それぞれ会社の方から話を聞く、という内容でした。


続きを読む "RTCカンファレンス×WinケータイFAN 『携帯プラットフォームの変化』" »

2007年2月 1日

RTCカンファレンス『モバイル検索』に行ってきました。

RTC Vol.19 『モバイル検索』に行ってきました。

 

運営スタッフの端くれとしてわらわらとしていて、肝心のトークセッションはあまり聞くことができませんでしたが、後半のグループワークのところは参加させていただきました。
やはりみなさん、発想を膨らませて意見を出し合っているときが、目が輝いているように見えますね。いろんなアイデアが出てきて、自分も楽かったです。

 

おわったあとの懇親会でも、多くの方と広く、ディープに、会話ができて楽しい時間をすごさせていただきました。
お会いした皆様、アリガトウゴザイマシタ。

 

 

モバイルについては、ここ最近のRTCでも何度かテーマに取り上げていて、自分自身も思考を深める機会は多いです。
RTCに来ている人も自分以上に、世の中の新しいトレンドに敏感なひとが多いと思います。

が、

  • 知らないところでケータイwebがアツい!

  • 敏感なビジネスマンなら、それをキャッチしておかなくては!


と、毎回似たようなことが主張されていて、
でもなんだかんだ言って、普段PCに接する時間の多い人は、なかなかケータイのヘビーユーザーに変化することは少ないのかなぁ、なんて感じました。

#自分だけかもしれないですが。若い世代にそろそろついていけなくなりつつある悲しい年代。。

 

自分自身がケータイのユーザー像そのものになることを目指すことも大事ですが、
ケータイの好きな層を自分たちの味方につけるなり、徹底的にヒアリングしていくなり、
ビジネスとしてのケータイ業界への接し方も、あらためて考えてみるのもアリかも。
そんなことをもやもやと考えた夜でした。

 

 

(ほかの参加者のブログ)

 


2007年1月29日

katy(ケイティ)をリリースしました。

ちょいと遅くなりましたが、先週から、katy(ケイティ)というサービスをリリース&サービス開始しました。

おおざっぱに言うと「PCブラウザからの操作で、かんたんにケータイサイトが作れる」というものです。

 

 

 

katy(ケイティ) ~無料で使えるケータイサイト作成ツール~

 
katy(ケイティ)CMS管理画面

 

 

ケータイwebのユーザーが大きく増えつつある昨今、
『すべてのお店にケータイサイトを』をキャッチフレーズとしてサービス開始しています。

 

どなたさまにもすぐにケータイサイトが設置できるよう、

無料
  基本機能は無料で提供。
かんたん
  必要なのはウェブブラウザだけ。
  ブログを書くような感覚で、ケータイ向けサイトの作成・編集ができます。
わかりやすい
  編集中の内容がケータイの画面でどのように見えるかを
  エミュレートするケータイプレビュー機能。

というのを特徴にしています。

 

 

  katyプレビュー機能

 

開発者としてウリにしたいところは、入力したhtmlが「携帯端末でどのように見えるか」をプレビューするエミュレートエンジンです。

おなじhtmlとはいってもPCブラウザとは微妙に解釈の異なる部分であったり、
絵文字の表示であったり、
<blink>タグ(点滅)をサポートしていないInternet Explorerでも点滅させたりとか、
<marquee>タグ(動く文字)の扱いに不具合のあるFireFoxでも文字が動くようにしたりなど、、
プレビュー機能の裏側では、なにげに凝った処理が動いています。

より「つかいやすい」「分かりやすい」を目指して、今後も改善を重ねていく予定です。

 

 

なにはともあれ、基本機能は無料でご利用できますので、まずはお気軽につかってみてください!

 

【プレスリリース】マイネット・ジャパン、基本料無料のケータイCMS 『katy』(ケイティ)をリリース

 

 

2007年1月17日

新サービス『katy(ケイティ)』始めます。

今朝の日経産業新聞に取り上げていただきましたが、
ケータイサイト向けの新サービスを、来週からサービスインする予定です。

 

『すべてのお店にケータイサイトを』

katy(ケイティ)
http://katy.jp/

 

 

「だれでも作れる!5分で作れる!無料で作れる!」というのをウリにしていますが、
実際、まさにこの言葉どおりなサービスとなっています。

 

必要なのは、ウェブブラウザだけ。

 

PCのブラウザで操作するだけで、ケータイのサイトが作れてしまうというものです。

そして、つくったサイトはその場ですぐ、携帯電話端末で見れちゃいます。

 

ちょっと大げさに言うと、携帯サイト制作の「あちら側」化、なサービスでもあったりします。

 

自分は開発者としていろいろやってます。
サービスインまで、もうしばらくお待ちください。

 

 

ちなみに、
http://katy.jp/
へ、携帯でアクセスすると、ケータイ向けのサイトが表示されるようになっています。

じつはこのケータイサイト自体が、katyで制作したサイトです。

 

qr_katytop.gif

 

ひと昔前のケータイサイトというと、テキスト中心で、色づかいも派手なベタ塗りばかりで、ふだんPCサイトばかり見ている人にはなかなか受け入れがたいものが多かったりもします。が、それはあくまで一昔前。
最近の携帯端末は。スペックも向上して、なかなかクオリティの高い携帯サイトも見かけるようになって来ました。
そんなサイトが、katyではカンタンに作れます。

 

QRコード対応端末をお持ちのかたは、ここにかざすだけでアクセスできますので、よろしければぜひ。

 

 
 

about

平島浩一郎
株式会社マイネット・ジャパン



katy(ケイティ) - 携帯サイト作成無料CMS
newsing(ニューシング)
終電jp
まとめてブログ検索
あわせて読みたい

Powered by Movable Type
株式会社マイネット・ジャパン