それでも「jQuery Mobile + DW 」でスマホサイト制作を教えたいと思う理由。 | φ(..)メモとして残しておこう…

それでも「jQuery Mobile + DW 」でスマホサイト制作を教えたいと思う理由。

いろいろあって、「jQuery Mobile + DreamWeaber 」でのスマホサイト制作を教えることはなくなったわけですが、それでも「jQuery Mobile + DreamWeaber 」でのスマホサイト制作を教えたい理由を。


総務省の資料(モバイルコンテンツの産業構造実態に関する調査結果 H23.7)によると、2010年のモバイルビジネス市場は1兆6465億円。

そのうち動画や音楽、電子書籍等のBitコンテンツ市場が6465億円。
通信販売やオークションの利用料などからなるモバイルコマース関連、つまりmatコンテンツ市場が1兆85億円。

モバイルコマース市場がついに1兆円を超えたわけです。

うーん…これは…。

僕は10年ほど前からケータイキャリアはいずれ、matコンテンツビジネスに何らかの形で関わって来ると思っていたのですが、やっぱりケータイ決済というカタチで関わってきたわけで…。

結局、「消費する」ということに関して言えば、bitコンテンツはmatコンテンツにかなわないわけで、案の定…という感じです。


※bitコンテンツ = デジタルコンテンツは、要は0101…の信号の集合体なので最小単位「bit」からなるコンテンツ。
※matコンテンツ = 形ある「物質(material)」としてのモノをコンテンツに見立てて読んでます。

この二つは僕が勝手にそう呼んでいるだけなので、あしからず。


それはさておき…。




既にモバイルコマース市場は、Eコマース市場7.8兆円の実に12%強を占めているわけで、決して無視できない市場なわけです。
モバイルコマース市場の中では、どのような内訳になっているかというと…。

・トランザクション系(株取引など):1580億円
・サービス系(ホテル宿泊や交通費など):4109億円
・物販系(商品の通信販売):4392億円

となっていて、物販系モバイルコマースのEコマース市場に占める割合は5.6%ということになっています。


5.6%? かなり少ない!


…果たしてそうでしょうか?
5.6%ってかなり大きいですよ。

少なくとも消費税よりは(笑)


物販系モバイルコマースの中でも、一番の伸び率を誇るのが「スマートフォン」です。
2009年12月と2010年12月を比べると、なんと8倍以上の成長率なんだとか。

Eコマース市場の2009~2010年の成長率は116%です。
その中でスマートフォンからの利用は800%になっているんですよ、お父さん!(なんだこれ)


…というわけでスマホサイト制作は、これからEコマースをやってく上で必ず必要になってきます。

というより、今がチャンス。


現状では、全Eコマースサイトにおけるスマートフォン向けサイトは1%に満たないという試算もあります。
いずれガラケーが消えてなくなることを考えると、今からスマホ市場で名前を売っておいたほうが得策のような気がします。


PC市場は飽和状態で今から力を入れてもお金がかりすぎる



PC向けのEコマースサイトがどれくらいあるかは知りませんが、とても昨日今日ネットショップを始めました…という人間が勝ち抜いていけるような甘い世界ではありません。
モバイルコマースを除く6.8兆円の市場を、海千山千の魑魅魍魎が奪い合っているわけです。

そう、そこはまさに地獄絵図の世界そのもの。

一方、まだまだ成長途上のスマホサイトの方はといえば…。
PC向けより圧倒的にライバルが少ない上に、何といっても1年で800%もの高成長率を誇ります。
今からなら、まだ間に合う。

ライバルの少ない、高成長率が約束された市場に一早く参入するのは商売の基本ですよ、お母さん!(←だからなんだよこれ)



なぜ「jQuery Mobile」なのか



jQuery Mobileは、1年ほどのベータ版の間に、モバイル開発のスタンダードとも言える地位を築き上げました。
正式版のリリースは、先月(2011年11月)です。

ということで2011年12月現在、沖縄の基金訓練校でjQuery Mobileを使ってスマートフォンサイトの制作を教えていたのは、多分僕だけでしょう。


数あるライブラリの中から僕がjQuery Mobileを選んだ理由は、次のとおり。


・広範囲のプラットフォームをサポート
これはもう、言うことなしです。
スマホ端末向けのサイトを構築する場合、特に問題となる複数のプラットフォームやウェブブラウザに対応しなければならないという点。日本で販売されているスマホで言うと、iOS(iPhoneやiPodなど)、Android、Windows Phone(これは本当は無視したい)、BlackBerry…といったところでしょうか。
搭載ブラウザについても、プラットフォームにプリインストールされているものの他にも選択肢があって、それぞれで動作が多少異なります。
そもそも、ブラウザはバージョンの違いによる影響も結構大きいですし。

関係ないんですが、PC向けのブラウザでいえばIEは特に酷い。
IEのバージョンを変更するとMSNのトップページのレイアウトが崩れるくらいですから、これはもうダメだろう…と。

jQuery Mobileは、プラットフォームやウェブブラウザの違いをフレームワークのレイヤーで吸収し、同じコードベースから、端末ごとに最適化されたウェブアプリを構築できるようにするという目的のもとで開発されたそうです。

jQuery Mobileを使って開発すれば、個別にカスタマイズすることなくサイト制作が容易に出来ます。

この守備範囲の広さは、他のライブラリでは太刀打ちできませぬ。
どんだけ雑食なんだよお前は…。

まあ、そこがいいわけですが。



・HTML5でマークアップ

これ(HTML5)、もうやっとかないといけないな…と思うんですよ。
HTML5によるフツーのサイトを構築するのと同じ感覚でマークアップを記述すれば、自動的にモバイルに対応したインターフェースに変換してくれる。
これは大きいですよ、正直。
HTMLコードが単純明快なので、HTML5の構造・記述方法のお勉強にもなります。



・そもそも、JavaScriptを書かなくていい
PCでjQueryを使う場合には、少しはコードを書かなくちゃいけないわけです。

$("CSSセレクタ名").アクション(function(){
メソッド
);

こんな感じで。

プラグインを使う場合とか、もっと沢山書く場合もあります。

jQuery Mobileは、タグにちょっと設定(data-*属性)を書くだけ。
listviewが設定されてる<ul>タグに「data-filter="true"」って書くだけで、リストをフィルタリングする検索ウィンドウが実装できちゃうのは、ホントすごい。
かなりの便利機能です。
jQuery Mobileなので、当然他のjQueryプラグインとの相性も良いです。



・DreamWearver CS5.5との相性
というより、DreamWeaver CS5.5は、これのためのマイナーバージョンアップなんだろうな、きっと。
CDNでサイト制作を選ぶと自動的にテンプレートサイトが呼び出され、あとは「挿入」タブの中から使いたいコンポーネントを選ぶだけで実装できるのには正直驚きました。



・ネイティブアプリの開発もサポート
スマホ端末向けには、ウェブアプリではなくネイティブアプリで提供したい…というニーズもあります。
jQuery Mobileは、PhoneGapと併用することでWebアプリケーションをネイティブアプリに変換できます。もちろん、Appストアでの販売もおk。
PhoneGapをAdobeが買収した…ということを考えると「DreamWeaver CS6」は当然
「DreamWeaver + PhoneGap + jQuery mobile」路線でいくことは間違いなし。

(゚∀゚)キタコレ!!

jQuery Mobileは公式にPhoneGapをサポートしているし、同じものをコード変更の手間(というより難しいアプリ開発の手間)をすることなく、ウェブアプリとネイティブアプリの両方の形で提供できるのは素晴らしい。



これだけの理由があって、スマホサイトを教えない理由はハッキリ言ってないです。

僕が教えているのは「スマホサイト制作」でも「HTML5」でもなく、あくまでも「ネットショップ制作に必要なスキル」なのですね。