2012年に向けてのケータイ対応・スマートフォン対応

「ユーザー視点でつくる携帯サイト制作の基礎知識」という本が図書館にあったので読んでみました。
2010年5月に出た、ケータイ(フィーチャーフォン)サイト制作の入門書です。
「携帯サイト制作の基礎知識」という名の通り、ケータイサイトについて通り一遍のことについて解説してあって非常にわかりやすいのですが、その一方で実際に書かれている内容としては、それ以前の2008~2009年頃に出た本と大きく変わるわけでも無く、ケータイサイトの制作というのはある程度枯れているのかなと今更ながらに思いました。

ちなみに2011年はケータイサイト制作に関する書籍はほとんど出ていないようです。(ネット上なら、2010年に話題になった記事と言えば「永久保存版!?携帯コーディング、これだけ読めばすぐできる!(テンプレートのおまけつき)」で、2011年は「モバイルサイトの3キャリア共通CSSと最新コーディング事情」くらいですかね…)

業界のトレンド的にはケータイでは無くスマホに向かっているので、今更ケータイ対応という感じもしますが、都会ではスマートフォンをよく見かける一方、なんだかんだでケータイの利用者数が8割程度と、相変わらず勢力を保っている状況です。(ケータイユーザーはスマホユーザーほどインターネットを積極的に利用していませんが)
モバイル利用動向調査(2011年10月調査) | 2011 | PRESS | 株式会社ディーツー コミュニケーションズ
この調子でケータイが今後5年以上生き残るのであれば、むしろケータイ対応について学ぶのは技術的に枯れた感じもある今が最後のチャンスかもしれません。

ちなみにスマートフォン対応・モバイル向けHTML5について解説した書籍はここ1年くらいで出まくっていますが、匿名アンケートサイトの結果を見てみると、スマホ向けページは賛否両論あるようですので、PV数の多いサイトで無ければ、苦労してスマホ対応するよりも、そのままPCページを見せちゃってもいいような気がします。
結果発表 – スマートフォン向けページって便利ですか? – コッソリアンケートβ
(ただスマホ対応している方がスマホから検索したときにSEO的に有利になるのかも知れないな、とも思うのですが、実際のところどうなのでしょうか)

そんなわけで、来年3月末にmovaの終了が予定されているケータイ業界。
個人ウェブ制作者としては鬼門になりがちなケータイ対応ですが、必要であればキッチリ作っていきたいものです。

セブンネットショッピングAPIのSignatureの付け方(PHP版)

ユーザーがあまり多くないであろうセブンネットショッピングAPI
アマゾンとか楽天にはない面白い商品があったりして使いがいがあるのですが、公式ドキュメントの少なさもさることながら、ユーザーによる解説も少なくて、なかなかとっかかりにくい感じがします。

特にセブンネットショッピングのAPIは、リクエスト時にAmazonのAPIのようにSignatureが必要になるのですが、Signatureを生成するだけでも結構一苦労なのですよね。(公式ドキュメントの解説ページ
最初にリクエストするURLを書いてからSignatureをつけるというやりかたを解説をしているサイトが見当たらなかったので、[PHP] Amazon Product Advertising API で認証付きリクエストを送る方法まとめを参考に、セブンネットショッピング版を作ってみました。

$url = 'http://api.7netshopping.jp/ws/affiliate/rest/SearchProduct'
.'?ApiUserId='.$api_key
.'&Version=2010-08-01'
.'&Timestamp='.gmdate('Y-m-d\TH:i:s\Z')
.'&CategoryCode=books'
.'&IsbnCode=.$isbn_code

みたいなURLを作ってadd_signatureを通せばSignatureがついたURLが返って来るはずです。

function add_signature($url){
  $secret_key = "YOUR SECRET KEY";
  $url_array = parse_url($url);
  parse_str($url_array["query"], $param_array);
  ksort($param_array);
  $str = 'GET|http://'.$url_array["host"].$url_array["path"];
  foreach($param_array as $key => $value) $str .= '|'.$key.'='.$value;
  $signature = base64_encode( hash_hmac("sha256", rawurlencode($str), $secret_key, true) );
  return $url.'&Signature='.$signature;
}

HTML5採用状況

ここ最近HTML5の勉強をしているんですが、まとめ記事とかでHTML5の例としてあげられているサイトは、みんなすごいcanvasやらjsやら使いまくりのイカした感じのサイトばかりで、コード見ても何が何やらわからないのです。
そんなわけで、特にそういうサイトで取り上げられないような感じの、普通にHTML5採用しているサイトを参考としてみてみたいと思い、集めてみました。

■調査方法
bing apiで「0」「1」「2」「3」とひたすら数字で検索して、ヒットした上位50件のURLをゲット。
URLからHTMLを見て、DOCTYPEでバージョン状況を判別。
きりがいいので、ちょうど10000件調査。

HTML採用バージョン割合
HTML5 397件 3.97%
XHTML 1.1 205件 2.05%
XHTML 1.0 Transitional 3982件 39.82%
XHTML 1.0 Strict 349件 3.49%
HTML 4.01 Transitional 2833件 28.33%
HTML 4.0 Transitional 166件 1.66%
その他 222件 2.22%
DOCTYPEなし 1786件 17.86%
HTML取得失敗 60件 0.6%

さらにHTML5を採用しているサイトについてはリストにしました。
(行頭についている数字はbing apiで検索したときのキーワードです。5と10でテレ朝が出ているのはさすが!)

追記:
HTML5では閉じタグのないタグをXHTML的に />で閉じても閉じなくてもいいことになっているようですが、ざっと見た感じ、head内のmetaタグとかは閉じないで、それ以外のbrとかは閉じているサイトが多い感じがしますね。
もしくは全部閉じるので統一しているか。

Continue reading

Pitarionというサービスをリリースしました

通勤、通学、トレーニングなどの時に「その時間でピッタリと聞き終えられるCDがあると気持ちいい!」と常々思っていたので、収録時間からCDを検索できる「Pitarion」というサイトを作ってみました。

Pitarion : ピタリオン

高校生の頃、通学用にピッタリ聞き終えられるように、曲を選んでCD-Rに焼いたりしていたこともあるのですが、なかなか全体で統一感を出すように選ぶのって難しいんですよね…

開発はCakePHP2.0を使ってみました。
普段使っているサーバーのcoreserverはPHP5.2.5までしか対応していなかったのでCakePHP2.0の動作対象外だったのですが、CakePHP2.0 stableがリリースされた10/16の翌日にちょうどCGI版のPHP5.3が解放されるという素晴らしいタイミング。
もしかしてCakePHP2.0 stableのリリースに合わせたんでしょうか?

アプリ開発するにあたって、アプリの分類をしてみる

アプリ開発を一緒にやろうぜ、というお誘いを受けたので、企画ミーティング前に「どんな感じのアプリを作るのか」の見当をつけるために、これからアプリを作る人間視点で既存アプリの分類をしてみるテスト。

・ゲーム
Angry Birdやネコアップなど。
タッチや加速度センサーを利用したものも多くておもしろいです。
自分で作るならグラフィックできる人がいないと厳しいかも。

・既存サイトのブラウザ、既存ソフトのスマホ対応
アプリ以前からウェブサービスを展開していて、ウェブサイトをスマホ対応すれば、それですんじゃうかもしれないけれども、利便性の追求などの理由によりアプリ化しているアプリ。
またはPCページのFlashなどのツールがスマホで動かないから作られるアプリなど。
アマゾン、facebook、モバゲー、gree、BB2C、天気情報、クーポンアプリ、Ustream、Twitterクライアント、スピードテスト、ネットプリント、Skype、Dropboxなど。
「ブラウザでいいじゃん」と言われても「いや、アプリの方がいいよ!」と言える何かがあればアリ。
「見せ方がおもしろくできる」という理由もアリ。
基本的にウェブサービス提供者自身が作るもので、APIが無いと外部の人は手が出せない。

・新規スマホサイトのブラウザ(ウェブサービス)
スマホならではのGPSやカメラを使ったコミュニティサイトなど。
既存のウェブブラウザではあまり展開せずに、アプリ上をメインとしたウェブサービス。
アプリがあるからこそ、ウェブサービスが成立するタイプ。
foursquareとか、ご近所さんとチャットできるEyelandというアプリがあるんですが、そんな感じですね。
あとはinstagramとかも、カメラがあるスマホならではのウェブサービスですね。

・ツール
インターネットにつながなくても、アプリ単体で完結するようなツール。
またはオンラインにつなぐともっと便利になったりするツール。
リマインダーや、Sleep Cycle、楽器アプリなど。
個人完結するツールだけに、コミュニティなどと違って、新しくユーザーに使ってもらいやすい気がします。

・コンテンツ、読み物、情報、学習
小説、医学書、百科事典、英語学習など。
既にコンテンツを持っているところが、スマホを媒体にして展開している感じ。

ずいぶん雑な分け方ですけど、こんな感じですかねえ。
特定の一つにきっちり収まるのもあれば、二つ以上の機能を持ったアプリなんかも当然あります。
(たとえばアニメのキャラが朝起こしてくれるアプリがあれば、ツールと同時にコンテンツでもあります)

個人的には「新規サイトのブラウザ(ウェブサービス)」か「ツール」あたりがいいかな…と。

評判カタログというサイトを作りました

レビューのまとめなら評判カタログ

レビュー情報のまとめサイトです。
先日デジカメを買ったときに、いろんなサイトやブログのレビューを調べてから買ったのですが、いちいちレビューの載っているサイトを探したり、ちゃんとレビューが書かれているブログ記事を探したりするのが面倒くさくて、それならいっそのこと、レビュー情報をきちんと集約したサイトがあったら、みんなが何回も検索しなくてもレビュー情報に行き着けるんじゃないかと思って作ってみました。
(ちなみにそのときに買ったデジカメはソニーのDSC-WX5です。)
アイテムは手動で登録しているので、まだまだ完成にはほど遠いですが、今のところ5000アイテムくらいが登録されています。
コンセプトの近い競合サイトさんも多いのでがんばります…

MA7に応募中

ケンコーコム、ミネラル水の在庫過剰が収益圧迫

ケンコーコム、ミネラル水の在庫過剰が収益圧迫

結構前からケンコーコムでミネラルウォーターの安売りをやっていましたけど、収益圧迫するレベルで在庫過剰になっているんですね。
楽天市場内のケンコーコムでも送料無料のミネラルウォーターがたくさん売っています。
たとえばクリスタルガイザー(並行輸入品)500mlが48本で1290円、しかも送料無料という、かなりの破格です。
とりあえず1セット頼んでみました。
送料無料は9月30日までみたいなので、お早めに。

CodeIgniter入門情報

最近CodeIgniterが話題になっているようなので、せっかくなので軽く触ってみました。
そのときに集めた情報などのまとめです。

#まだ1日しか触ってないので間違っているところも多々あるかと思います。
#ばしばし突っ込みコメントをいただけると幸いです。

CodeIgniterとは

PHP Framewrok。
いろんな意味で軽くて早い(らしい)。
詳しくはPHPカンファレンスで使われたLT資料日本CodeIgniterユーザ会CodeIgniter – Wikipedia本家サイト(英語)などを参照。

流行り具合

世界的にはCakePHP、Symfony、Zend Frameworkと並ぶほどの人気。というか、CakePHPとかなり競っていますが、現時点で一位。(Google Trend調べ
国内ではまだマイナー、でも2011年に入ってついにグラフに登場。(同じくGoogle Trends調べ

2011年に入ってからの動向

1/28
バージョン2.0.0がリリース
2006/2/28に1.0がリリースされて以来、初のメジャーバージョンアップ。(PHPカンファレンスでのLT資料によれば「そんなに大きく変わりません」ということらしいですが…)

2/4
PHPフレームワークの「codeIgniter」がスゴすぎる | H2O Blog.という記事がはてブなどで話題に。

2/19
国内初の単独カンファレンス「CodeIgniter Con 2011, Tokyo Japan」開催
予約制だったのですが、早い段階で定員オーバーに。

2月下旬
日本語フォーラム公開予定

という感じで、かなりの盛り上がりを見せています。
乗るしかない!このビッグウェーブに!

書籍情報

今のところ日本語の本は3冊出ているようです。

2008/6/10
CodeIgniter徹底入門: 河合 勝彦, 鈴木 憲治, 安藤 建一: 本
http://www.amazon.co.jp/dp/4798116769

2009/5
PHPフレームワーク入門―CakePHP/Zend Framework/symfony/CodeIgniter対応: 掌田 津耶乃: 本
http://www.amazon.co.jp/gp/product/4798022772/

2011/1/7
Webサイト制作者のための PHP入門講座: 鈴木 憲治, 安藤 建一, 小出 範明: 本
http://www.amazon.co.jp/gp/product/4774145254/
(タイトルにはCodeIgniterという名前は出てきませんが、著者の方曰く「CodeIgniter の入門書としても使えます」とのこと。ただし網羅的なものではないので、詳しく知りたい場合には専門書籍を薦めています。)

CodeIgniterの始め方

ウェブ上では定番の日本語の入門情報というのが見つからなかったため、何から手を付けてみたらいいものかよくわかりませんでした。
特にバージョン2.0はリリースされたばかりで情報が少ないです。(1.xの情報を参考にすると、微妙な差異に苦しめられます)
でも、せっかく2.0がリリースされているので、2.0から始めたいです。

というわけで、こんな感じに進めるのがいいんじゃないでしょうか…

CodeIgniter ユーザガイド 日本語版目次にある、基本情報、インストール、イントロダクションを読む。
日本語は2.0非対応、英語は2.0対応
でもそんなに違いはないかなー、と…
2.0.0の日本語化も進められているようです

.「CodeIgniterを5分で導入、「Hello World」を表示するまで – あさdev」をやってみる。
2.0で始めるHello World。

本家サイトにあるHello Worldチュートリアル、ブログチュートリアルをやってみる。
2.0非対応。2.0との差異はメモ程度にこの記事の一番最後に書いてあります。
音声は英語ですが、英語力があまりない自分でも流れは何となく理解できるレベルでした。
CodeIgniterのチュートリアルをやってみた。 – 僕はJava者」という記事にブログチュートリアルのコードが書かれているので、一緒に読むとわかりやすいかと思います。

とにかくまだ2.0関連の情報は少ないので「2.0から始めたい!」という人はもう少し情報が出そろうのを待ってみてもいいかもしれません。

その他の入門情報

2.0非対応のものになってしまいますが…

2011/2/12
CI For Newbies CodeIgniter入門 : 合同会社コムティーク
2008/8/26
CodeIgniter 入門(IBM)

日本語コミュニティ

[PHP][フレームワーク]CodeIgniterスレ
http://hibari.2ch.net/test/read.cgi/php/1177683436/
今のところ2ちゃんねるのスレッドだけ?

本家ビデオチュートリアルのバージョン2.0との差異
触り始めたばかりなので、あまり自信がないのですが、こんな感じで修正したら動きました…

Hello Worldチュートリアル
・applicationディレクトリの位置がCodeIgniter/system以下ではなくCodeIgniter直下に移動になりました
・class Blog extends Controllerではなくclass Blog extends CI_Controllerになりました

function Blog(){
parent::Controller();
}
ではなく
function __construct() {
parent::__construct();
}
にします

ブログチュートリアル
$autoload[‘core’] = array(‘database’);ではなく$autoload['libraries'] = array(‘database’); に修正
・scaffoldingは廃止されたので、entriesを追加するところはSQL投げて追加
・チュートリアル内ではformヘルパは使ったり使わなかったりしていますが、一応一通りそろっているようです

ノマドワーカー的 有料公衆無線LANメモ

最近外で仕事のようなことをすることが多くなったので有料公衆無線LANサービスを調べ直してみたのですが、いろいろサービスが多すぎてわけわからんです。
というわけで、その辺のカフェとかファストフードで使う目的で、有料公衆無線LANについて大まかに調べてみたメモです。
あんまり駅や空港や海外での利用については調べていません。
長いエントリなので、最後の「まとめ」の項から読んだ方がいいかもしれません。

各サービスに内容を確認したわけではないので、間違っているところもあるかも…

まず、メジャーなアクセスポイントは
・BBモバイルポイント
・livedoor Wireless
・フレッツスポット
・Mzone(mopera U)
・HOTSPOT
があります。
それぞれ単体でサービスを契約することもできますし、複数のサービスを使える包括的なローミングサービスもあります。

まずは単体としてのサービスです。

BBモバイルポイント
ソフトバンクのサービスです。
月額525円、ヤフープレミアム会員だと月額210円で使えます。
JRの駅やマクドナルドとルノアール系の喫茶店で繋がるので重宝されます。

livedoor Wireless
ライブドアのサービスです。
月額525円、初期費用が1050円かかります(12/1まで初期費用無料キャンペーンをやっています)。
ルノアール系の喫茶店とサブウェイと、その辺の路上で繋がったりします。

フレッツスポット
NTT東西のサービスです。
フレッツアクセスサービス(フレッツ光などのサービス)を利用しているかどうかで利用料金が異なります。
フレッツアクセスサービスの利用者は月額210円(NTT西だと840円)で利用できます。たぶん。
初期工事費が2100円かかりますが、1/31まで無料キャンペーンやってます。
フレッツアクセスサービスを利用していない人は月額945円に加え、フレッツスポットに対応したプロバイダとの契約が必要です。
フレッツスポット契約料の840円と初期工事費が2100円かかりますが、工事費用の方は1/31まで無料キャンペーンやってます。
JRや私鉄、東京メトロの駅構内やかなり多くのコーヒーチェーンやファストフード店で使えます。
かなり使える店舗が多くイケてるサービスなのですが、利用手続きが面倒なのと、利用料が高めなのと、PPPoE接続のため、iPod touchやDSで接続できないのが玉に瑕。(光ポータブルを使うことでPPPoE非対応機器を繋ぐことはできるようですが)
なので、フレッツアクセスサービスを利用していないのなら、ほとんどアクセスポイントが同じMzone(mopera U)の方がよさげな気がします。

Mzone(mopera U)
ドコモのサービスです。
ドコモのケータイを持っていなければMzoneのサービス、持っていればmopera Uのサービスになります。(Mzoneとmopera Uは名前と料金が違うだけでアクセスポイントなどのサービス自体は同じです、たぶん)
ドコモのケータイを持っていない人向けのMzoneでは、月額1575円か日額525円で利用できます。
ドコモのケータイを持っている人向けのmopera Uでは、月額840円(通信料315円+プロバイダ料525円)で利用できます。
アクセスポイントは、基本的にフレッツスポットと同じです。
12/31まで通信料315円が1年間無料になるキャンペーンをやっています。

HOTSPOT
NTTコミュニケーションズのサービスです。
料金体系が複雑でわかりにくいのですが、HOTSPOTのアクセスポイントに接続したい場合には、月額1680円、初期契約料が1575円。または日額525円かかります。
カフェやファストフード店で使えます。
(ホットスポットという言葉は、公衆無線LANサービス全般を指す言葉としてもあるので、ややこしいです…)

フレッツスポット・Mzone(mopera U)とHOTSPOTの比較
フレッツスポット・Mzone(mopera U)があってHOTSPOTがないお店は、スタバ、ケンタッキー、ロッテリア(バーガーキング)、イタリアントマト、シアトルズベストコーヒーなどです。
一方HOTSPOTがあってフレッツスポット・Mzone(mopera U)がないお店はカフェドクリエと、グローバルダイニング系店舗(カフェラボエム・モンスーンカフェ)などです。
やっぱりノマドワーカーとしてはスタバを重視したいところです…

ここまで単体のサービスを見てきましたが、次にローミングサービスです。
上記アクセスポイントが複数使えるサービスです。

WIRELESS GATE(ワイヤレスゲート)
※11/1からプランが変わりました
BBモバイルポイント、livedoor Wirelessが利用できて月額380円。
ホットスポット、livedoor Wirelessが利用できて月額480円。
ホットスポット、BBモバイルポイント、livedoor Wirelessが利用できて月額780円。
BBモバイルポイント、livedoor Wirelessが利用できる1日プラン380円や90日プラン1260円などもありますが、月額契約の方が使いやすいかと思います。

Wi2 300
BBモバイルポイント、livedoor Wirelessが利用できて月額380円。
さらに「Wi-Fiスクエア」というwi2独自のアクセスポイントも使えます(丸の内、横浜、東工大、と限られたエリアにあるアクセスポイントのようですが…)
ビックカメラやソフマップのサイト経由で利用すると2ヶ月無料のキャンペーンをやっています。
ホットスポットを使わないのなら、ワイヤレスゲートよりも、こちらの方がちょっとお得ですね。

そんな感じで、まとめです。

まとめ
店舗が多く、店によっては電源が調達できるマクドナルドは魅力的なのでBBモバイルポイントは必ず抑えておきたいです。(マクドナルドで使える唯一のアクセスポイントなので)
普通に契約するより、ワイヤレスゲートやWi2 300で契約した方が、安くなる上にlivedoor wirelessも使えてお得です。(ヤフープレミアム会員でなければ)
ワイヤレスゲートかWi2 300かは、ホットスポットを使う予定があるかどうかで選ぶといいでしょう。
(BBモバイルポイント、livedoor wireless、HOTSPOTは直接契約しない方がお得かと)
さらに利用できる店舗を広げたければ、フレッツスポット・Mzone(mopera U)を契約するという感じで。
有料公衆無線LANの他にもFREESPOTのような無料アクセスポイント、各店舗が提供しているネット接続サービス、FONなどもありますから、その辺も検討していきたいですね。
もちろん、イーモバイルやUQ WiMAXなども。

参考資料
各オフィシャルサイト
公衆無線LAN – Wikipedia
無線LANが使えるスターバックスコーヒー – とりあえずホットスポットおぼえがき – livedoor Wiki(ウィキ)

追記
フレッツ 光ネクスト対応プロバイダー【エコネクト】|料金最安値の月500円!
http://econnect.jp/
こんなサービスもあるようです。
トップページを見ると月380円でライブドアワイヤレスとBBモバイルポイントとフレッツスポットが使えそうな感じがしますが、FAQによるとフレッツスポットは別に契約が必要になるらしいです…

現在studio15の一部のサービスに繋がりません

9日夜頃からサーバートラブルのためstudio15の一部のサービスに繋がらない状況が続いています。
告知が遅くなってしまい申し訳ありません。

15Pubは別サーバーに移転したのですが、1ヶ月ほど前のバックアップをもとに構築し直したため最近の投稿は反映されていません。

サーバー会社が現在復旧対応中です。
15日頃には復旧予定ということです。

ご迷惑をおかけして大変申し訳ありません。

※追記
10/15 23:00頃に復旧しました