HTML5でマルチデバイス対応アプリを実現

• iPhoneやAndroidなど複数のOSに対応！
• ソースが共通利用できるので、開発工数や管理工数を削減！
• インターネット非通信時のアプリケーション利用も可能に！

現在、Webを通じて売上や見込み客獲得などの事業目標を達成していくというミッションを持たれている方、またそれらを現場にて遂行されるポジションにおられる方々の中にはこんな課題を感じられている方々も多いのではないでしょうか？

『デバイスの多様化により開発工数や運用コスト、また検討事項が膨大に増えている』

今回のコラムは、一見して技術者や現場のWebマスターの方向けのトピックスのようでありますが、実は上記のような課題を感じられる責任者の方にこそ、是非一読いただきたい内容です。少し大袈裟なようですが、結論から申し上げますと今後は各デバイス毎に、またスマートフォンに至っては各機種やOS毎にWebサイトやアプリを構築する必要が全くない時代が到来します。よって、今からお話する内容を知るか知らないかにより今後投資しようとしている開発費や運用コストが実は無駄になる可能性もあるからです。それをご理解いただく為に、少し技術よりお話も交えながらキーポイントについて説明していきたいと思います。

多様化するOSとデバイス

iPhoneやAndroid携帯等のスマートフォンの普及が進む中、弊社においてもこれらスマートフォン用のサイト構築やアプリケーション開発のご相談が増えてきましたが、一つの大きな問題が運営、または導入を検討する企業様を悩ませているように感じます。その問題とはサイトやアプリケーション対応を行う際に検討対象となるOSが複数あるということです。OSが異なる場合、仕様や作り方によっては各OSごとにアプリケーションを用意しないといけなくなり、その結果、管理工数と開発コストが増大していきます。

≪スマートフォンのOSの種類とシェア≫

現在（2011年9月1日時点）、日本で発売されているスマートフォンのOSは5つあります。

• iPhone OS
• Google Android
• Windows Mobile
• BlackBerry OS
• Symbian OS

2011年3月末のスマートフォン契約数によるOSのシェアはiOS：474万件（49.6％）、Android：386万件（40.4％）、Windows：71万件（7.4％）の順となっており、iOSとAndroidの2強状態となっていますが、2011年9月に新しいWindowsのOS、Windows Phone 7が日本で発売になることから今後は3強の状態となっていくことが予想されます。本コラムでは詳しい紹介は避けますが、マイクロソフトでは以前までの多機能携帯電話向けに「Windows Mobile」というOSを提供しており、Officeの表示や編集が可能なことから法人向け市場では高いシェアを獲得してきましたが、一般消費者向け市場ではシェアを伸ばすことができず、iPhone、Androidの勢いに押されていました。「Windows Phone 7」はこれとは一新されるようで、従来のWindows Mobileは、パソコン用のWindowsをモバイル端末で使いやすいように開発されたもので、操作性もパソコンに近いものでしたが、Windows Phone 7ではスマートフォンとしての使い勝手を重視し、直感的で使いやすいユーザーインターフェースになっているとのことです。これらのことから、今後はアプリケーションを開発する際、ある程度のシェアを対応させるにはiOS、Android、Windowsの3つのOSに対応させる必要がでてきます。

出典：(株) ＭＭ総研 [ 東京・港 ]

HTML5による恩恵とは？その3つのポイント

対応を検討しなければならないOSが増え、複雑化していくように思われるスマートフォン用のサイトやアプリ開発ですが、作り方によっては一つのリソースをうまく活用し、複数のOSに対応させることが可能です。その方法の一つにHTML5で実装するという方法があります。皆さんも、近年「HTML5」について耳にする機会が増えてきているかと思います。何となくHTML5とは、画期的で従来のやり方を飛び越え"様々な事が実現できる"という印象を持たれている方も少なくないと思います。ただ実際にどこまで画期的なのか？実はご存じない方がWebマスターの方でも多いように感じます。なぜならば、HTML5を攻略する事により、先に述べた各OS毎に対応（投資）しなくてはならない・・という課題がいとも簡単にクリアになるからです。

【1】HTML5でマルチデバイス対応が実現可能に

AndroidもiOSも開発工数がかかる上にそれぞれのNativeの開発（AndroidはEclipse・iOSはXcode）を行った場合は工数も倍近くかかってしまいますが、HTML5で実装すればWindowsPhoneを含め、WebKitを採用しているブラウザを利用できる端末であれば全てに一つのソースで対応が可能になります。また開発が容易でありWeb系のAPIなども豊富なことから開発コストも大幅に削減することができます。運用面でもソースが一つということで各OS毎に変更・修正を行う必要がなくなり、効率化が図れるのも強みです。

【2】HTML5により従来のアプリケーションの概念が変わる

そもそも、アプリケーションにて自社サービスやコンテンツを提供されている方々は、なぜアプリケーションという形を選択されたのでしょうか？理由は、

1. Webでは常に通信を行いデータの取得する必要がある。よってアプリケーションとしてローカル保存できるツールの方がユーザーメリットが大きい。
2. Appstoreなどのマーケットプレイスの集客力を期待して。

が想定されます。「1.」に関しては従来の常識では確かにアプリという形でないと実現が難しかったです。それが、次の項でお話する内容で今後はほぼほぼ解決していきます。「2.」に関しても確かにマーケットプレイスには多くのユーザーが集まってきておりますが、ご存じの通り日々大量のアプリが更新されている中でプロモーションを行わずしてユーザーの目に留まる機会などほぼない状態ではないのでしょうか。例えばエクセルや自社の受発注管理の為のアプリケーションなど、本来の意味合いを真っ当しているアプリは別として、わざわざAppStoreへの申請リスクを抱えながら各種OS毎にアプリケーションを開発する必要性など「1.」の理由以外にはあまり無いのではないでしょうか。特にアプリケーションの場合iPhoneやAppStoreへの申請手続きが面倒なことと審査を通過できる保障も無いためリスクが伴いますが、HTML5で実装する場合はこの問題も解消されます。つまりHTML5によるコンテンツ制作を実現する事で、現存するアプリケーションはアプリである必要がないものも多数出てくるはずです。

【3】アプリケーション制作をサポートするWeb Storage機能

"HTML"と耳にすると、Webページを作成する言語を想像し、アプリの実装ということにピンとこない方もいらっしゃると思いますので、なぜHTML5になったことでアプリの実装が可能になったのかを簡単に紹介します。 BtoC向けのゲームアプリやBtoB向けの業務アプリの場合でもそうですが、アプリを実装・利用する上で、重要になる機能の一つに「データの保存」があります。データの保存方法としては大きく2つあり、ひとつは利用者のPCに保存する方法と、もうひとつはサーバに保存する方法があります。利用者のPCではなく、サーバにデータを保存する場合、保存したデータが誰のものであるのかを判別するために、会員登録やログインが必要になり、会員登録やログインを行いたくない場合はデータの保存機能も実装したインストール型のアプリケーションにする必要がありました。ですが、HTML5にはこれを解消する機能が用意されています。ブラウザにデータを保存する「Web Storage」機能です。この機能によって、利用者のブラウザ内に永続的にデータを保存することが可能になりました。利用者のPCにデータを保存する機能としては以前からクッキー（cookie）がありましたが、大きな違いとして保存容量がクッキーの場合4KBytesなのに対して、HTML5のWeb Storageの場合5MBytes程度まで可能となっています。このデータ保存ができることによって、一度Webサイトに接続しアプリを利用するためのデータを保存しておけば、インターネットの非通信時においてもアプリとして利用し、データを保存しておきインターネット通信可能時に再びサーバへ送信することなどが可能になりました。

スマートフォン用アプリケーション開発とHTML5の今後

今後は管理工数の削減と開発コストの削減を実現するために、スマートフォン用のアプリや、Webコンテンツのマルチデバイス対応の需要が高くなっていき、これに伴い、HTML5への注目もさらに高まり、普及していくことが予想されます。これからアプリの制作を検討させる場合はHTML5での実装も視野に入れて検討するとよいと思います。

■本コラムの元記事はこちら
HTML5でマルチデバイス対応アプリを実現

Webやアプリに関するコラムを配信しています！

■株式会社マイクロウェーブ

株式会社マイクロウェーブは、Webを活用した事業戦略立案、マーケティング、
Webサイト構築、Webシステム開発から、スマートフォン/タブレット用アプリ
ケーションの開発等を行っています。

HP： http://www.micro-wave.net/