ベンチャー企業 CIO: 池谷 義則ブログ&経営、ビジネス、プログラミング技術や便利なオープンソースの紹介 -5ページ目

ベンチャー企業 CIO: 池谷 義則ブログ&経営、ビジネス、プログラミング技術や便利なオープンソースの紹介

SKYAVY, INC. CIOの池谷義則のブログ & ベンチャー企業 & 経営、ビジネス、プログラミング技術や便利なオープンソースの紹介



前回の「スマートフォン市場拡大に伴うECサイト形態の変化」で記載したとおり、日本では2011年でスマートフォンの契約数が19.9%と伝えたが、アメリカではさらにスマートフォンの利用率が高い。

PalmやBlackBerryに始まったUSでのスマートフォン市場は、日本よりはるかに早く、そして各キャリアとも当初からスマートフォンの今後の拡大予想を見越して、インフラの増強やブランの柔軟性等、様々な施策を行ってきた。
日本のDocomoやKDDIの様にスマートフォン市場の重要性を見誤る事はなかったわけだ。

Pew Internet and American Life Projectの調査によると、2分の3以上(35%)の成人がアメリカではスマートフォンを利用しているという結果が発表された。
さらに、25%のユーザーがスマートフォンをインターネット利用の主なデバイスとして利用しており、70%近くのユーザーが毎日スマートフォンを利用してインターネットを利用しているというデータが出た。

また、高学歴の人がもっともスマートフォンを利用しており、続いて25歳から34歳のユーザーが多いという。
最もオンラインでショッピングをするグループにかぶっていることになる。

携帯電話の技術では5年も遅れている、、、と言われていたアメリカ。
筆者が中学生の頃に日本で携帯のカメラ機能が出始めたが、アメリカでは私が大学生のフレッシュマンだった頃に出始めた。まさに5年!

スマートフォン業界の伸びではアメリカに2.5年程の遅れを呈している形だ。

ちなみに、アメリカでのスマートフォンのシェアは以下の通りで、AndroidがTOPだ。
Android: 35%
iPhone & BlackBerry: 24%


前回の記事で、Myspaceのユーザー離れを指摘した。
Myspaceの全盛期である2008年12月の7,590万人のユニークユーザー(UU)を記録してから、2011年5月の時点で3,480万UUまで落ち込んでいる。
半分以上のUU減少だ。



Ref: comScore Blog

 

MySpaceのUU離れは、別にユーザーがSNSに飽きて来た、、、というわけではない。むしろその逆である。

下記のcomScore提供のグラフが示すとおり、毎年ネットユーザーのSNS利用時間比率は上がる一方だ。
2007年では12分に1分の割合でしかSNSを利用していなかったが、現在では6分に1分はネットユーザーはSNSを利用していることになる。



Ref: comScore Blog

理由は簡単だ。
SNSの対応分野がユーザー同士の楽しみから、企業のイチツールとして認識され始めた事や、個人運営のサークルや団体などの運営ツールなど、様々な分野へ対応可能になり、マーケットシェアが拡大したことだろう。

長い間、ソーシャルネットワーキングといわれてきたのは(海外では、、、の話だが・・・)FacebookとMyspaceであり、それら2極のシェア争いを示していた。
だが、2009年中旬にFacebookがMyspaceを破り、その後も追随を許さない伸び率を刻んできた。



Ref: comScore Blog

2011年5月に15,720万人の訪問者を記録し、FacebookはUSで4番目にユーザー数を集めるサイトになった。伸び方も右肩上がりで、4月から320万人のユーザー数を増やしている。
(comScoreのレポートと他社の調査会社のレポートでは少々違った情報になっているが・・・)
ただ、ここで考えなくてはならないのは、Facebookのこの永続的とも言える成長速度の維持は非常に困難になる、、、という事だ。数の法則 (The law of large numbers)でいうと、マーケットの大多数をシェアにすると、残りのパイも必然的に小さくなるため、伸びも緩やかになるのは明白だし、上限も来よう。 そこでFacebookが今後もSNSのキングであり続ける為には、新規ユーザー獲得の為の戦略ではなく、既存ユーザーを如何にして飽きさせずに、サイト 内に留まらせ、利用し続けさせるか、、、という戦術が必要になる。

さすがFacebook!!と言えるのは、既にその様な戦術に移行している点である。過去1年間の調査では、既にユーザーの月間利用時間が4.6時間から6.3時間に延びている点である。つまりは、既存ユーザーを飽きさせない施策が滞りなく行われているといえよう。
Myspaceではその施策が上手く機能していない事が数字からも分かる。Myspaceのユーザー数が激減している、、、とは言っても未だに5月には 3,490万人のユーザー数がおり、SNSではUS#2のポジションにいる。だが、過去1年で50%もユーザー数の減少があり、ユーザー月間利用時間も1 年前と比べると85%まで落ち込んでいる。

 

他のメジャー・ソーシャルメディアに目を向けてみよう。
5月のcomScoreのデータを見てみると、それぞれのサイトでUUの上昇が見られる。
Linkedin.com: 3,340万UU
Twitter.com: 2,700万UU
Tumblr.com: 1,070万UU

 



Ref: comScore Blog

5月19日のLinkedinのIPOによるメディアでの露出増加の影響もあってかUU増加になっているが、それ以外にも「ビジネス」に特化した SNSという事で、メディア露出を起爆剤にしてビジネスマンから新たに注目され始めている、とも考えられる。昨年から多少の増減はあるものも、概ね右肩上 がりにUUを伸ばしてきており、1年間で58%の増加を見せている。
まだ正確な情報は出ていないが、Linkedinの月間ユーザー利用時間の推移も今後気になる部分だ。

Twitter.comも5月はUSから2,700万UUを集め好調だった。(去年と比べ13%の増加)
ツイッターの強い部分は、ツイッター利用の多くが外部サイトから行われているところだ。例えばツイッターのAPIやウィジェットの利用等があげられる。
ただ、ツイッターの5月の好調には、Osama Bin Ladenの暗殺やイギリスのウィリアム王子の結婚などによる所が大きいようだ。

まだLinkedinやTwitterにはUUでは敵わないソーシャルブログサイトTumblrは、昨年と比べ驚くことに166%の成長を遂げ、1,070万UUを2011年5月に記録している。
まだまだソーシャルメディアのキングになるには道のりが長いTumblrだが、このまま問題なく成長を続けていければ、将来的にはソーシャルメディア業界のメインプレーヤーになるだろう。

 

今回はアメリカ国内でのソーシャルメディア業界に焦点を当てて解説をしてきたが、現在世界の最前線を行っているサイトを運営している企業が多いのは アメリカであり、世界的な流れとして自国語や英語だけでなく多言語への対応が必須となってきているソーシャルメディア業界では、アメリカでの結果は、将来 的に世界での動きの前触れ、、、といえなくも無いので、チェックを怠る事はトレンドを把握できなくなることになるであろう。

 

参考: The Network Effect: Facebook, Linkedin, Twitter & Tumblr Reach New Heights in May


当時はSNSのキングであったMySpaceのユーザー流出が止まらない。
2011年の1月から2月の間に、ユニークユーザー数(UU)が1,000万人も下がった事がcomScoreの調査により判明した。

4週間の間に7,300万人のUUから6,300万人まで数字が下がった。

ソーシャルメディアをはじめたばかりの人(3年以内)や、海外のSNSに疎い人は「MySpace」というサイト自体知らないかも知れないが、 MySpaceはその当時Facebookを凌駕し、インターネット上に行くのであれば"MySpace"とまで言われたほどのソーシャルメディアのキン グ的サイトだった。

当初台等していたhi5やFacebookと比べ、個人個人のプロフィールページのカスタマイズ性などにより、「自分」アピールが非常に柔軟だった MySpaceが機能的にも抜きに出ていたのが理由であるが、ユーザー層の拡大に伴い、MySpaceのプロフィールページのカスタマイズは少々ライト ユーザーには敷居が高かった。
また、カスタマイズをしなければきれいなプロフィールページが作れないや、スパムユーザーのブロックなど、プライバシー設定等も細かい設定ができなかった為、特に女性ユーザーは1日に100人以上の男性から友人申請を受ける、、、、何てことも多々あった。
また、MySpaceで知り合った男性・女性間の犯罪行為もニュースで取り上げられ、アメリカ、イギリスでは若年層へのMySpace利用を控える動きも見られた時期があった。

もちろん原因はそれだけではないにしろ、現在ではFacebook(1,6億人UU / 2011-05)に大きな差を広げられている。

ソーシャルメディアの歴史自体、非常に短いものであるし、かつてのキングも足元を簡単にすくわれてしまうこのネット業界では、自分のサイトは安定し た収益を上げている、、、とソファーに踏ん反り返っていると、気が付かない内に他の後出の競合他社に追い抜かれてしまう、、、なんてこともあるので、サイ ト運営者は常に緊張感を持って、サイトの調査、改善を怠らないようにしたい。


米IDCの調べによると、2010年第4四半期には世界でスマートフォンの出荷台数がPCを抜いて1億台を超えた。
日本でもスマートフォン市場は急速に拡大しており、MM総研の調査によると、スマートフォン契約数(スマートフォン契約比率)2011年度;2,185万 件(19.9%)、2012年度:3,500万件(31.2%)、2013年度:4,505万件(39.4%)、2014年度:5,315万件 (45.7%)、2015年 度:6,035万件(51.0%)となり、2015年度末にはスマートフォン契約数がフィーチャーフォン契約数を逆転すると予測している。

2011年には既に全体の20%がスマートフォンになっており、筆者の担当しているいくつかのウェブサイトやECサイトのアクセス統計を見ると、全体の12~22%がスマートフォンによるアクセスとなっていた。

特にECサイトでは16%以上がスマートフォンによるアクセスとなっており、ECサイトでの今後のスマートフォン対応は非常に重要な位置づけとなっている。
また、詳細に調査をするとPCからのアクセスに比べバウンスレートが低い。
しかし、スマートフォン表示に対応しているサイトとしていないサイトでは、購入コンバージョンレートに大きな差がでている。

スマートフォンに対応しているサイトでのコンバージョンレートはおおよそPCサイトの1.5倍程も出ているようだが、対応していないECサイトでは逆にコンバージョンレートが著しく低いという結果が出ている。

これは主にスマートフォンでのユーザビリティーに起因していると思われる。
携帯サイトでもそうだが、スマートフォンではクリック数を少なくしたり、ページスピードの向上や、直感的なユーザー導線が必要になるが、それらの対応がされていないと逆にユーザーに対して大きなストレスとなってしまい、ユーザーは他のサイトへ流れていってしまう。

つまり、スマートフォンに対応していないECサイトは、他の対応しているサイトに顧客を取られてしまう可能性があるのだ。

今年に入って、日本発のオープンソースECシステムであるEC-Cubeもバージョンアップに伴い、標準でスマートフォン対応にしたので、EC-Cubeを利用している人は手間がかかるだろうが、是非バージョンアップをオススメしたい。



米モバイル端末市場におけるスマートフォンの割合(左)と、スマートフォンのOS別シェア(資料:Nielsen Company)

また、スマートフォンといっても大きく分けるとAppleのiPhoneとGoogleのAndroidがあるが、どちらに照準を絞ればいいのか。。。
世界的に見ると、既にAndroidのシェアはiPhoneを抜いている。
また、日本国内ではさらに如実Androidの方がシェアが大きい。理由としてはiPhoneは日本向けに作られていないからだ。
Androidでは提供企業が様々な機能を独自に入れることができ、日本にあった「お財布ケイタイ」機能等を盛り込んでいたり、携帯キャリアを選ばない、、、というのも理由の一つだろう。
また、筆者は今後の流れとしても総合的に考えてClosedなAppleのiPhoneよりもオープンソースであるAndroidが更にシェアを広げていくと予想される。

つまりは、スマートフォンのページを作る場合は、Androidをメインデバイスとして考えて作成すれば問題はないだろう。
慣れないフラッシュの仕事をすることになった。
で、少々面倒な事になって、色々調べたら解決したので、それについて書こうと思う。

今回の仕様は以下の通り:

  1. 外部のmp4ファイルの読み込み

  2. ブラウザのサイズが変わっても、動画をセンターポジションに固定。

  3. ストリーミング再生
    要は、動画ファイルを全部読み込んでからの再生ではなく、データをロードしながらのストリーミング


で、どこで問題になったのかというと、#3のシームレスなストリーミング。
動画の専門ではないために、半日近い時間を要してしまった・・・我ながら恥ずかしい限りだ。

 

さてさて、まずは#1から解決していこうか。
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;

/*** Video ***/
var video:Video;
var connect_nc:NetConnection = new NetConnection();
connect_nc.connect(null);
var stream_ns:NetStream = new NetStream(connect_nc);
stream_ns.client = this;

function netStatusHandler(p_evt:NetStatusEvent):void {
if(p_evt.info.code == "NetStream.FileStructureInvalid") {
trace("The MP4's file structure is invalid.");
}
else if(p_evt.info.code == "NetStream.NoSupportedTrackFound") {
trace("The MP4 doesn't contain any supported tracks");
}
}

stream_ns.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);

video = new Video();
video.smoothing = true;

// set video size to browser size
video.width = 2240;
video.height = 1260;

addChild(video);
stream_ns.play("test.mp4");
video.attachNetStream(stream_ns);
//stream_ns.play("backcountry_bombshells_4min_HD_H264.mp4");

/*** / video ***/

/*** Content ***/
var mc_content = getChildByName("mc_content");
mc_content.y = (stage.stageHeight / 2);
addChild(mc_content);

/*** / Content ***/

/*** Common ***/

// change position to center
function positionHandler(e:Event):void {
// content
mc_content.y = (stage.stageHeight / 2);

// video
video.x = (video.stage.stageWidth / 2) - (video.width / 2);
video.y = (video.stage.stageHeight / 2) - (video.height / 2);
}
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, positionHandler);
stage.dispatchEvent(new Event(Event.RESIZE));

/*** / Common ***/

簡単に解説すると、

/*** Video ***/
/*** / Video ***/



で囲まれたコードで動画の設置と再生を行っている。
基本的には上記のコードをコピペしてくれば問題はないのだが、
// set video size to browser size
video.width = 2240;
video.height = 1260;

でビデオのサイズを固定している。
なので、ブラウザサイズが上記サイズより小さい場合は、上下左右のtrimされた様に切り取られる。

あと、
stream_ns.play("test.mp4");

で、動画ファイルの指定をしている。この場合、.swfファイルと同じ階層にtest.mp4という動画ファイルを設置している。

 

/*** Content ***/
/*** / Content ***/



で囲まれた部分は、動画以外のフラッシュ内のコンテンツの設置を行っている。
このコンテンツ部分をビデオ設置コードより上に持ってくると、コンテンツがビデオの下階層に設置されてしまい、見えなくなってしまう。
addChild();

が読まれた順に、配置される階層が決まるので、上に表示させたいコンテンツは、AS3の下に持ってくる必要があるとのこと。

 

さて、で「#2 ブラウザのサイズが変わっても、動画をセンターポジションに固定。」は、

/*** Common ***/
/*** / Common ***/



で囲まれたコードで行っている。
stage.addEventListener(Event.RESIZE, positionHandler);

が、ブラウザサイズが変更になったときにアクションをトリガーするメソッドだ。サイズが変更されると、positionHandler()が呼ばれる。
で、positionHandler()では、ビデオとコンテンツの配置を変更している。

 

さて、問題となったのは、「#3 ストリーミング再生」だ。

最初、顧客から貰ったmp4では一旦mp4データを全て読み込んでからでないと、ビデオが再生されなかった。
色々調べていると、Flash Playerにおける高解像度H.264ビデオおよびAACオーディオのサポートについての説明にて記されていた。
注:H.264ビデオファイルをプログレッシブダウンロードとして再生する場合に重要なのは、moov atomをファイルの先頭に配置することです。このように配置しないと、ファイル全体をダウンロードしてから再生を開始する必要があります。 moov atomは、ファイル全体のインデックス情報を保持しているファイルの一部です。 Adobe PremiereやAfter Effectsなどのツールでは、この情報はファイルの末尾に配置されてしまいますが、アドビは、CS3ビデオ作成ツールの将来のアップデートでこの問題 を修正するよう作業を進めています。 ただし、これはH.264ビデオファイルのストリーミングに関する問題ではないため、Flash Media Serverのユーザには影響ありません。

で、想定されるのは貰ったmp4のこの「moov atom」データがファイルの先頭にないのだろう・・・と。

で、やっぱりこの「moov atom」を先頭に持ってくることはできるのか・・・と色々海外サイトを調べていると、YAMBという無料ソフトが可能らしい。早速ダウンロードを実行。
対応言語も日本語があるので、安心かな。(今回は英語でインストール)

ダウンロードページへ: http://yamb.unite-video.com/download.html

インストール後、ソフトウェアを起動して、「Creation」の「Click to create an MP4 file with multiple audio, video, subtitle and chapters streams.」をクリック。



 

そうすると、ビデオ選択をする事ができるウィンドウになり、変換したいビデオを選択。

ウィンドウ下にある「Output」を変更して、書き出し先を変更しよう。変更しないと、オリジナルファイルを上書いてしまうので注意。

 

 

 

 

あとは「Next」をクリックすると処理が開始される。



 

で、変換されたファイルを.swfで読み込んでみると、無事にストリーミングされながらビデオ再生が直ぐに開始された。
これにて作業終了です。