ふろしき Blog

コンテンツサービスを科学する株式会社ブートストラップ代表のブログ

あなたは今も犯している!?モバイルUXの7つの失敗

ここ最近、モバイルWebコミュニティにて、Apptimize社のトップであるLynn Wang氏がポストした「7 Mobile UX Mistakes You’re Probably Making Right Now」が話題になっています。

www.sitepoint.com

その内容とは、彼女自身が、A/Bテストを使い様々なモバイルアプリの改善を行い、その中で得られた知見をまとめたものです。若干、煽り気味なタイトルに見えますが、中身はしっかりしていて、多くの人がなんとなく感じていることをキレイに言語化しています。個人的にも、参考になると感じています。

本人の許可が頂けたので、日本語らしく読めるようざっくりと意訳し共有します。

1. 不必要にサインインをさせようとする

多くの人々は、ユーザのサインインが価値を持つものだと考えています。しかし、時にサインインは、ユーザに苦痛を与えます。たとえ心の広いユーザであっても、百いくつもあるような個人情報の入力を、各アプリごとにはしてくれないでしょう。ユーザ登録とは、煩わしい存在なのです。

多くの解決方法として、ユーザ登録を一時的にスキップさせるというのがあります。ユーザへアプリの価値を評価する猶予期間のようなものを与えるわけです。この方法は、AppleがUser Experience Guidelineとして採用しており、獲得の見込みのあるユーザに対して大きな価値を与えました。

そもそもですが、登録手続きがユーザにとって不快と感じられるのであれば、その手続を無くしてみてはどうでしょう?ホテル予約アプリ「HotelTonight」は以前、ユーザにサインインを行ってから予約手続きを行うような仕組みになっていました。そこへ、A/Bテストを使って、サインインの不要な予約手続きの検証を行ってみました。結果、ユーザが将来再び予約を行う際に、再登録の煩わしさを無くしスピーディに行えるようにすべく「サインインをオプション化」する、という変更が高い効果を上げました。ホテルの予約率は、15%ほど上がりました。

f:id:furoshiki0223:20150603011658j:plain

サインインは、必ず必要とは言えないのです。

2. 不必要にアプリの有用性を伝えようとする

UXには、アプリ利用の初期にユーザを適合させる「オンボーディング」と呼ばれるプロセスがあります。そして、アプリの最適化において「チュートリアル」と「ユーザ登録のスキップ」の2つは、最も推奨される方法です。ユーザへアプリの有用性や使い方を、効果的に伝えることができるでしょう。

ただ、ビデオ・音楽再生アプリ「vevo」は、あえてこれらのプロセスを排除し、その効果を検証してみました。チュートリアルは無いほうが、ユーザのログインやサインインを促進できるのではないか、と考えたのです。その仮説を検証するため、チュートリアル有りと無しの2パターンでテストを行いました。結果、無しにした場合、ログイン者数を10%増加させ、サインイン者数を6%増加させました。

Vevoはブランド力が高く、ユーザへアプリをダウンロードさせた時点でその有用性は十分に認識されています。したがって彼らは、チュートリアルが不要と考えています。ユーザへは、シンプルに音楽やビデオを鑑賞させ、支障が生じた時のみチュートリアルを与えるようにしました。彼らのアプリが持つフローは、シンプルな2つの機能でのみ構成され、ユーザの離脱を防いでいます。

f:id:furoshiki0223:20150603012026j:plain

あなたも、チュートリアルの必要性について、疑ってみてはどうでしょう。

3. 他のアプリの成功事例をそのまま真似しようとする

ここまで紹介した2つの策は、実際の結果が伴っているため良い事例と言えます。ただ、この手の成功事例は、なぜ彼らが成功したのかという点から目を反らされ、それはあたかもあらゆる状況下で活用できるベストプラクティスだと捉えられがちです。

アプリや製品というのは、ゴールも利用者も価値も機能も、みんなそれぞれがユニークなものです。ネット上なんかで見られるような事例は、議論のスタートポイントにするには良いでしょう。しかし、誰かの成功事例、起こしたアクションが、必ず同じ効果をあなたのアプリに対して起こしてくれるとは限りません。

結果としてどう変更したのかではなく、変更するまでに至ったテストの方法に注目してください。そして実際のユーザからのフィードバックを元に実践して下さい。ユーザが何を変えることを望んでいるのか、それを把握すべく出来る限り多くの定性的なデータを収集して下さい。データを使って、あなたのアプリに特化したテストのアイデアを考え、A/Bテストをして、実際のユーザの反応から変更の正しさを判断して下さい。

f:id:furoshiki0223:20150603012229j:plain

4. ネイティブのアップデートをWebと同じ感覚でやろうとする

Webと比較した場合、ネイティブアプリのアップデートがどの程度時間を必要とするのかは、非常に忘れられがちです。Webはサーバ上にアプリが置かれるため、コントロールは容易です。何かしらのミスがあっても、開発者は素早く前バージョンの状態へ戻したり、あるいは問題を改善してデプロイすることができるでしょう。

しかし、ネイティブの変更はそこまで簡単ではありません。ネイティブの場合、アプリはクライアント上にあり、アップデートはそこに対して行わなくてはいけないのです。Appleのアップストアの、長いレビューを待たなくてはいけないこともあります。そしてアップデートするか否かは、ユーザ側に委ねられます。そして、彼ら自身の手で、アップデートを実行されることになります。十分にテストされ、前よりもユーザ体験が向上するという状況へ効果的に持って行くことが、なによりも重要なことです。

このような状況下でユーザのフィードバックを得るには、βテストや、A/Bスプリットテストが有用でしょう。βテストは、メールやコメントなどによるフィードバックから定性的なデータが得られ、またクラッシュレポートを得ることもできます。A/Bテストは、定量的な要因や効果を得られ、どういう変更が大きな影響力を持つのか、コアとなるメトリクスを知ることができるでしょう。

テストを開発プロセスの一部に組み込むことが、リスクの低減に貢献します。それでもミスが生じる場合、Feature FlaggingInstant Updateが、即時の対応に役立てることができるでしょう。

5. ユーザフィードバックやデータを活用せずに、感性だけでデザイン変更しようとする

マテリアルデザインが流行した時には、時代遅れ感を防ぐために、人々はアプリのデザインを変えようと働きました。これは、ごくごく自然なことに思えます。しかし残念ですが、そのような流行に合わせようとしてアプリの設計を大幅に見直すことは、往々にして大きなミスになり、KPIの転落に繋がります。

最終的に重要なのは、美しさよりも目的の達成です。殆どの人々が、見た目が魅力的であるよりも、自身が望むことが実現しやすいアプリを好むでしょう。したがって、大規模なデザインの変更よりも、地道なテストによる成長的変更を優先することが、あなたを目標へとスマートに導くでしょう。そしてそれは、Webよりもネイティブの方が重要です。4でも挙げた通り、ネイティブは容易には前のバージョンに戻せないからです。また、大規模にデザインの変更したことで、CRO(Conversion rate optimization)をその新たなデザインにあわせて一から開始しなくてはいけなくなります。

ギャンブルのように大規模な変更を加えるぐらいなら、ユーザのフィードバックを得て、彼らが何を欲するかを理解して下さい。そこで得られた情報を元にテストをデザインし、成長的な再デザインを行い、各変更に対してどのような効果があるのかを確認して下さい。

f:id:furoshiki0223:20150603012319j:plain

6. エンゲージメントの影響を、機能面だけで評価しようとする

モバイルユーザのうち78%が、ネイティブはWebよりも同程度か速いと考えています。モバイルユーザは、ネイティブではWebを活用するよりも、タスクが速く終わることを望んでいます。そしてネイティブのアプリは、仕事やパーティの合間なんかに簡単に試し、簡単な手順でスピーディに削除できてしまいます。

モバイルのアプリは、機能面だけでなく、スピードや応答速度といったパフォーマンス面も重要になります。不必要な遅延や混乱は、ユーザのエンゲージメントを下げて、他の物事に集中する機会を与えてしまいます。あとでもう一度開いて内容を見てみよう、なんて思っても、彼らはそれを忘れ去り二度とは戻ってきません。数週間後には、アプリは削除されてしまうでしょう。こうしてあなたは、ユーザを獲得するチャンスを失ってしまいます。

速いとは言っても、ただ処理時間を短くするだけではいけません。ユーザがアプリを通じて達成したいと考えている目的へ、可能な限り速く到達できるよう、デザイナ側でも工夫が必要です。こうした取り組みが無いと、ユーザの気が紛れる可能性は増大し、競合アプリへと乗り換えを行ってしまいます。

f:id:furoshiki0223:20150603012602j:plain

7. 重要なコンバージョンの直前で、ユーザを喜ばせていない

いかなるアプリにも、少しではありますがコンバージョンを後押ししたいポイントがあります。ユーザに対して、サインアップして欲しかったり、予約をして欲しかったり、ビデオを再生して欲しかったり、決済ボタンを押して欲しかったりと、様々なところに潜んでいます。アプリの提供者側は何かしらの目標を達成しなくてはいけないのですが、その過程において、小さなコンバージョンポイントが含まれ、それが積み重なりセットを形成しているはずです。各キーとなるコンバージョンを最大化するには、その直前に、ユーザを喜ばせて、コンバージョンを後押しする何かが必要となります。

とあるレストラン予約アプリの事例を紹介してみましょう。そのアプリでは、レストランの検索結果一覧画面において、一部に特別割引を表示させることで、ユーザの興味を引きクリック(タッチ操作)を促そうとしました。特別割引を見たユーザーは、そのままレストランの詳細情報を確認し、予約を行ってくれるだろうと考えたのです。この仮説を検証するため、A/Bテストを行ってみました。結果、割引表示のされているレストランの予約率が増加しました。しかし、全体としての予約率とその収益は減ってしまいました。検索結果の一覧に不公平さを作ったことで、不信感を与え、レストランを選ぶというコンバージョンを逃してしまったのです。

f:id:furoshiki0223:20150603012653j:plain

そこで今度は、特別割引の表示を、予約の直前の画面に表示させてみました。ユーザは検索結果の中から、自分の好みにあったレストランを選び、レビューを確認し、レストランの評価がどうなっているのかも確認し、予約を行うべきか悩んでいる段階。そこに特別割引を表示してみたのです。このユーザサプライズ作戦は成功し、予約率は28.1%も向上しました。決断を行う直前のユーザサプライズが、コンバージョンを改善させたのです。

f:id:furoshiki0223:20150603012804j:plain

別の事例では、マーケットプレイスの評価を上げるために、ある対策を行いました。それは、ユーザがアプリを通じて何かしらのタスクを遂行したあとで、レビューボタンを表示するようにしたのです。タスクを遂行した後のユーザは、アプリに対してポジティブな感情を抱いています。それが、「アプリに良い評価を与える」というコンバージョンを後押ししたわけです。

最後に

ここで取り上げた、7つのUXの失敗を心に留めておけば、プロダクトを成長させていく上で素晴らしいディレクションを行っていけるでしょう。ユーザ体験の向上とは、継続的な改善であることを忘れないで下さい。テストを行うことが、避けられないミスから多くを学び、あなたを成功へと導くでしょう。

Apptimize著者の提供するサービス「Apptimize」

布団バサミは世界を変えるのか?WebRTCを使って安価なVR装置を作ったという話

マイクロソフトのHoloLensなんかをみていると、これからはやはりVRとかARみたいな技術がどんどん社会を良く変えていくのだろうと、ワクワクさせられますよね。

…とはいえ、こういった技術はネイティブが主流という感じがします。リアルタイム性の高さ、ハードウェアの性能が求められるゆえに、Webだとどうしてもそういうのは難しいと考えられがちでしょう。私もそう考えていた時代がありました。

ところが、ある日のこと…

 林田「なぁ、かわちゃん。NRIでハッカソンするから来てやー」

 川田「は?嫌やし、なんでそんなん行かなあかんねん」

 林田「そんなん言うなよー」

 川田「おれ、ハッカソン苦手やねん。一人で淡々とコード書いてる方が、凄く集中できて楽しいしな」

 林田「たのむってやー、モバイルWebでVRするねん!」

 川田「わかった、いますぐ行く!

学生時代の知人の誘いで、なんとなくモバイルWebでVRしに行くことになりました。GoogleもHTML5でVRのサンプルを作っていたし、できなくもないだろうと余裕をぶっかましていたのですが、現地に着くや否や、その企画のヤバさに頭を抱えることになるのです。

リアルタイムな動画をつかってVR!?

NRIハッカソン。このイベント、いわゆる大きめの企業なんかにはよくある「基盤本部」みたいな場所が主催してまして、2日がかりで何かモノを作って、その面白さで競い合うというもの。ん?これってアイデアソンじゃね?という感じもしたのですが、技術的に面白そうなガジェット類がゴロゴロ転がっていたので、これはきっとハッカソンなんだと思います。

にしても、FirefoxOSとかUnityやらOculus Riftやら、よくもまぁここまで集めたものだなぁと。こんなの、社外に転がっている私みたいなエンジニアなんかに、公開してしまっていいものなのかと。

f:id:furoshiki0223:20150208143849j:plain

会場内には50〜60名、ギークな人々ばかりかと思いきや、デザイナーや企画屋っぽい人なんかもいたりします。これから2日がかりで何かを発明するわけですが、まだ始まったばかりなのに、既に多くの参加者が徹夜を覚悟しているという状況です。私もちょっと遊びに行くぐらいのつもりで来たのに、いつの間にか、徹夜な空気になっていました。

f:id:furoshiki0223:20150208143916j:plain

 林田「で、作ろうと思っているのが、ある人の目を、別の人の目に転送する、という装置なんやんかー。」

 川田「え、ちょっと何言っているのかわからないんですけど。」

 林田「このウェアラブルデバイスから動画を撮影した映像を、遠隔地からリアルタイムでVRできるようにしようと思っててな」

f:id:furoshiki0223:20150208133348j:plain

 川田「ちょっとまって、・・・それ、ふとんを干す時に使うはさみにしか見えんのやけど?」

 林田「そう思うでしょ?けどこれ、200円で作れる、手軽なウェアラブルデバイスやねんて!!100円均一でウェアラブルが作れるとか、マジでアツくない!?」

 川田「…え、何言っとん?」

 林田「これでな、俺の眼から見えるもんをWebでシェアするんや!!世界が変わるで!」

 川田「やべーな、その発言!お前、どう見てもGooglerにしか見えんわ。布団バサミさえ頭に挟んでなければな。

友人が考える、VRの仕組みはこんな感じ

f:id:furoshiki0223:20150208213254j:plain

確かに、これが200円でできたら面白いかも。

1. リアルタイム動画再生をWebで扱う : WebRTC

実は最初、200円の装置なんて案は無くて、某S電気メーカーのカメラを使って動画をリアルタイムにustreamへ送信する案が出ていました。しかしこれが、試してみるとこれがまったくもってダメダメ。いや、ダメだろうなぁとなんとか思いつつも、万が一にも奇跡が起きるかもしれないと期待していたのですが。

 林田「これはダメや。リアルタイムって感じの臨場感が無い。もっと他の方法を探さないかんわ」

もはや終わりか、そんな空気が漂う中、思わずポロッと言ってしまったわけです。

 川田「・・・これ、WebRTC使うところやで。」

 林田「それや!!!!」

こうして、布団バサミとのコラボレーションが決定され、原価わずか200円のVR装置を作るという企画へと変わっていったのです。

いや、仮にWebRTCでやったとしても、モバイルでやるなんてそんなのほぼほぼ無理だろうと思ったわけです。けど、もしかしたら、何か奇跡が起きるかもしれないし、新しいアイデアが生み出されるかもしれない。試してみる価値はあるはず。一か八か、成功するかもしれない。そんなノリでWebRTCに挑んでみたわけですよ。

で、WebRTCを使うには、通信するポイント間で電話番号情報に相当するものを管理し運用しなくてはいけません。これを無料で実現する方法として、NTTコムのSkyWayが挙げられます。チーム一同、藁にもすがる思いでこのサービスに登録したのですが、登録早々、サービスのニュースの欄に書かれた一文に気がついてしまいました。

f:id:furoshiki0223:20150208154739j:plain

嫌な予感が…!?

Can I useを調べると、WebRTCのモバイル対応はAndroidなら大丈夫という感じに見えます。電話なんだからRTC対応ははやい!なんてことはやはり無いようです。iOSは下手したら、ずっと対応しないんじゃないだろうか。

f:id:furoshiki0223:20150208155616j:plain

そして、実際にAndroid版Chromeで公開されているサンプルを動かそうと試みるも、案の定、動かない。Androidはまだまだ落ち着きのないOSだし、これはもう仕方がないのでしょうね。

Mozilla Japanもこのハッカソンにハード提供していたようで、大量のFirefoxOS端末がころがっていました。うん、Mozilla、あなたならきっとRTCやってくれるはず!マニュフェストファイルがどうのこうの言われて、あんまりWebっぽくない作業が多いことに「おや?」と思いつつもセッティング。

f:id:furoshiki0223:20150207150207j:plain

標準ブラウザではやはり動かず。これは無理なのか…。

そんな中、たまたま検証したとあるブラウザがすごい活躍をみせることになりました。

f:id:furoshiki0223:20150208161140j:plain

そうです、Mozilla側からも見捨てられがちなあのブラウザ「Android版Firefox」。永遠のベータと噂されたあのブラウザが、ここにきて「モバイル×WebRTC」という、市場で唯一を手にしたのです。下手したらMozilla側からも厄介者されているんじゃないかと思えるほど扱いが雑なブラウザなのに、WebRTCは超安定して動かすという。ということで、プラットフォームはAndroid+Firefoxという、誰もが耳を疑う組み合わせをデモ環境に選びました。

今回、動画は一方通行ですが、音声は双方向でリアルタイム通信するという若干変わった仕様です。サンプルにあったコードを色々改造。また、Callee IDも別の画面から入ってきたタイミングでURL上に貼り付けてしまう形式(location.hashで拾う)にして、昨年12月に某動画サイトが公開したモバイル向け動画サービスみたいな感じの仕様にしてみました。

VRと聞くと、右目と左目で若干異なる動画を再生することで、3Dの臨場感が得られるあの仕組みを想像するかと思います。HTMLの場合、ブロック要素を左右半分に割り当てて、CSSで「overflow:hidden」すればできるわけです。DirectXなんかを使っていると、Viewポートの管理なんかをしなくちゃいけなかったりでとてもとても面倒なのですが、それが簡単にできてしまうのがWebのいいところ。

▼マウスをフレーム内で動かしてみてください

ただ、結構な試行錯誤を繰り返しましたが、「動画の再生」となると、パフォーマンスの関係上無理でした。WebRTCはvideoタグを通じて動画再生をするわけですが、今のハードだと2本同時に再生というのはまだまだリソース不足みたいです。6〜8年前、Youtubeやニコ動を見ていた時代あの頃ぐらいにはハードの性能は追いついていると思い込んでいたのですが、まだそこにも至っていない感じなんですね。

2. モーションデバイスの入力をWebで扱う : Motion Device API

さて、先ほどのふとんバサミみたいなウェアラブルデバイスからWebRTCを通じて送られてきた動画。受信はできたので、これをどのようにしてVRっぽくしていくのか?

f:id:furoshiki0223:20150208133354j:plain

「ハコスコ」という装置を通してみることにしました。

先程も言いましたが、WebRTCは動画1つの送信が限界なので、1つの動画だけでなんとか3D空間を見渡すような体験を与えなくてはいけません。それを助けたのがこの「ハコスコ」というツールです。先ほどのWebRTCで送られてきた動画をブラウザ上に映した状態で、ハコスコにセットして使います。WebRTCで送られきた動画が3Dっぽく見えます。

f:id:furoshiki0223:20150208133441j:plain

また、送られてきた動画の中を、見渡すようなことをしたい。例えば、ハコスコを覗いている人が右を向けば右の景色が、左を向けば左の景色が見えるようにしたいところ。そこでどうしたのかというと、動画を再生するvideoタグを3〜4倍に拡大し、モーションセンサーの動きに合わせてvideoタグの位置が変わるようにすることで、WebRTCで送られてきた動画の中を見渡すような体験を得られるようにしてみました。

その際、どっちを向いているのかという情報はdevicemotionを使いました。左右、上下、重力の検出による天地安定化と、3次元軸でvideoタグをグリグリと動かすのですが、思ったよりパフォーマンスが高くて驚きです。どんなアルゴリズムを使ったのか具体的に言うと…

f:id:furoshiki0223:20150208172455j:plain

window.addEventListener("devicemotion",function(event) {
  // 横方向の移動
  x += event.rotationRate.alpha/15; // 単位(%)
  // 縦方向の移動
  y -= event.rotationRate.beta/8; // 単位(%)
  // 首を傾ける
  rotate = event.accelerationIncludingGravity.y*9.0; // 単位(deg)},false);

ただ、モーション系は生データをそのまま使うと手ブレみたいなのがすごいため、実際にCSSに値を設定するときは、ちょっとした積分の値をクッション代わりに使ってやります。毎フレームごとに、以下のコードを実行することでぬるぬると動いてくれます。この式、3Dゲームなんかで、視点移動をふわっとさせる時なんかにも使われています。

setInterval(function(){
  marginLeft = ((x-marginLeft)/5.0)+x; // videoタグのmargin-left
  marginTop = ((y-marginTop)/5.0)+y; // videoタグのmargin-top
  transformRotate = ((rotate-transformRotate)/5.0)+transformRotate; // transform : rotate()},1000/60);

この手の値補正は組み込みなんかに多くて、例えば固定小数点環境下なんかだと値の補正にシフト演算子を使うことを意識して桁のデザインをするのですが、今回はいかんせんJavaScript。あまり計算機のことは考えないで素直に作ってみました。

上記の例、setIntervalを使ってみましたが、これについては使い方次第かと。animationFrameは1000/60秒で応答するし、今回使っているdevicemotionは1000/15秒で応答するものが多いみたいです。ただ、どちらもWebの仕様というわけではなく、デバイスに強く依存するので、用途を考えて使うべきだと考えています。

このあたり、若干、組み込み系や物理の話が多めなので、詳しくはまた今度にでも。

3. VR表現を実装する : CSS Transform

a. html/bodyにoverflow:hiddenを適用する方法

モバイルブラウザ上で、擬似的にフルスクリーンのようなことをする上で最初にぶつかるのは、多くの場合「スクロール」かと思います。モバイルのCSSは結構癖が強いので、ある意味Web標準にはない裏ワザ的手段が求められます。モバイルブラウザでは、CSSでhtml/bodyに対するoverflow:hiddenが有効にならないため、ここでハマったことがある人は多いのではないでしょうか。

解決方法としては、bodyタグ直下にdivでもなんでも良いのでブロック要素を配置し、以下のようなCSSをセット。その配下に要素を配置すると、スクロールバーは基本的には出てこなくなります。

.fullscreenView {
  position : fixed;
  width : 100%;
  height :100%;
  left : 0%;
  top : 0%;
  overflow:hidden;
}

余談ですが、モバイルブラウザでもデスクトップみたいな「background-attachment:fixed」みたいな背景配置を実現したいという要望も、この技を応用して解決することができます。

b. Transformにより動画をVRっぽくする

モーションセンサーからのフィードバックは、videoタグのCSSを操作することでVRっぽい感じに加工することにしました。本来ならCanvasなんかに動画の内容を打ち出して加工みたいなことをやるべきなのでしょうが、今回2日でやらなくてはいけないためじかんがありません。そうなると、Microsoft Direct2Dみたいな2Dを超簡単に扱える手段が欲しくなるはずです。

そこで今回使ったのが、CSSのtransform。例えば、スプライトに対する操作をC++(DirectX9.0c)なんかで書いているとこうなりますが…

sprite.begin()
sprite.tranformRotateZ(Angle)
sprite.Draw()
sprite.End()

この、tranformRotateZに相当するものを、CSSのtransformだと…

transform : rotateZ(Angle);

と書けます。凄くシンプルだし、なんとなくGPUにも優しい感じがしますね。

さて、これを先ほどのモーションデバイスの入力を、JavaScriptを介してtransformに設定するなら、以下のような感じになります。

  video.style.marginLeft = marginLeft;
  video.style.marginTop = marginTop;
  video.style.transform = "rotate("+transformRotate+"deg)";
  video.style.WebkitTransform = "rotate("+transformRotate+"deg)";

transformはGPUを扱うプログラマーには似たような仕様のAPIに触れることが多く馴染み深いと思います。それどころか、若干レイヤーが高いためより扱いやすいです。今回のrotateなんかをみていても、360度を一周とするdeg(中学高校の数学で扱う角度の単位)を扱えるものですから、DirectXみたいにわざわざPIとか2とかの数字を使って変換するような必要もなく、とてもとても直感的です。DOMだと、子要素もまとめてスプライトみたいに扱えるのですから、10年前のプログラマーからみたら、まるで魔法のように見えているのではないでしょうか。

ただ、この機能はまだまだ問題があり悩みが多いんです。例えば、transformをアニメーションさせるためにtransition-durationを活用することが多いのですが、Firefoxの場合この機能を使うと、他のアニメーションとの競合時にパフォーマンスが恐ろしいほどに劣化します。IEも現時点での最新版だとバグがあって、今回のように「position:fixed」が指定されたブロック要素内でのtransformはまともに動きません。実は偶然にも1週間前、私はこのバグに気がついてMS Connectに報告していたんです。

こんな感じで、WebRTCだけに限らず、VRに必要なCSS機能もまだ不安定という状況でして、WebのVRはまだまだこれからだ!といった感想を感じた次第でございます。

完成、そして結果は?

サイトデザインでもしっかりと世界観を伝える感じに。そして完成へ。

たくさんの方に、遊んで頂けました。

f:id:furoshiki0223:20150209124123j:plain

結果として、優勝することはできませんでしたが、テクニカル賞、Mono賞、Yahoo賞など、色んな賞に選ばれて、懐が潤いました。

f:id:furoshiki0223:20150209105914j:plain


特に嬉しかったのがYahoo!賞です。Yahoo!から賞を頂けるなんて、なんて光栄なことだろう。「http://yahoo.co.jp」のWebパフォーマンスはいい感じでして、個人的にも教材代わりとして使わせてもらっているだけに、恐れ多すぎるといった次第です。余談ですが、少し前にYahooが公開していた、阪神淡路大震災記念のWebページ。あれもFlashに見えて、実はCSS Transformが使われているのですよ。

http://hanshinawaji.yahoo.co.jp/

今回、チームのメンバは私以外NRI社員しかいなかったのですが、隣に大学時代に物理学をやっていて物理数学の言葉をわかっている人がいたり、それで不足する物理のアルゴリズムを結構しっかりと作っていたり、またまた、がっつりとハードを作れる人がいたりで、驚くほど人に恵まれました。エンジニアと一緒にモノ作っているなぁという感じがして、超ハッピーな気分になれました。多分みんな、仕事では全く違うことをやっているのだろうけど、それにしてもここまでしっかりとした基礎があるというのが驚きです。ただ、若干エンジニアが多すぎて、マーケターや営業的な視点が不足していたのが今回の敗因かなぁとも思っています。

というわけで、みなさん、お疲れ様でした!布団バサミに世界を変えるのはまだまだ難しそうだろうけど、数年もしたら技術がまた追いつくだろうし、気が向いたらそのうちまた、今回のようにWebRTCとmotiondeviceとCSS Transformだけで、VRやってみようかと思います。

さらばPointer Events!まだまだ落ち着かない、入力デバイスのWeb標準事情

人々にとってのコンピュータとはデスクトップのみを指す言葉ではなくなり、モバイルやペンといった様々なデバイスが人々の暮らしに関わるようになりました。こうした事情を鑑みて、Microsoftは「Pointer Events」というWeb標準の策定に力を入れていました。彼らは、どんな入力デバイスが備わっていても、共通の手段でそれを扱えることが、Web開発者の望みだと考えていたのです。

IE10ではベンダプレフィクス付き、IE11からはベンダプレフィクス無しで実装されました。そのことを受け、私も一年以上も前に「よし、そろそろだぜ」とブログでPointer Eventsを取り上げました。

ただ、今になってからそれを取り消します。Pointer Eventsは現時点では、あまりオススメできません。どうしても使いたいなら、クロスプラットフォーム面に細心の注意を払ってご利用下さい。

何が起きたのか?

Microsoftは、Appleの特許問題に負けず、Webに共通のスクリーン入力の手段を模索し続けました。その成果として、Pointer Eventsはついに2013年の5月に「勧告候補」というステータスとなりました。

f:id:furoshiki0223:20150206183945j:plain

ところが、Googleからは「Pointer EventsはWebの未来じゃない」という判断がされたようです。2015年2月のChromeでも実装されておらず、Firefoxも動作しません。勧告候補とは呼べないほどに、サポート状況は壊滅的です。もはや、IE独自機能と言っても過言ではない状況と言えます。

f:id:furoshiki0223:20150206185335j:plain

どうしてこうなったのか?

「当初の予定よりも、世の中が変わってしまった」というのが最大の要因です。人々はメインのコンピューターとして、デスクトップよりもモバイルを選択するようになりました。こうした状況を鑑みて、Googleは2014年頭から、BlinkはモバイルWebに力を入れると宣言しましたが、入力についてもその要求は大きく変化したようです。

以下のスライドは、GoogleのRick Byers氏が、2014年の6月に公開したプレゼンテーション「Touch events vs. Pointer events in Blink」中の一枚です。

f:id:furoshiki0223:20150206192958j:plain

彼らは、モバイルファーストであること、早くデフォルトの機能として落ち着くこと、そして、モバイルのネイティブアプリケーションのようにリッチであることを高いプライオリティとして持っており、こうした中でPointer EventはBlinkに合わなくなっていると述べています。また、Pointer Events相当のものが必要というのであれば、Polyfillに頼ればいいと考えているようです。

その後、2014年7月のW3CのMLにて、彼は次のように語っています。(※「Blink does not plan to implement pointer events」より一部を抜粋し意訳)

「これからも、Pointer Eventsのワーキンググループには関わり続ける予定だ。私たちが解決しようとしている問題は本質的に同じで、APIがどんな仕様であるかだ。少なくとも私たちは、すでに共通するタッチアクション用のAPIを持っている。様々な意見が入ることなく決断が行われることは望ましくない。Webプラットフォームが長期的に健全であるために、私たちは様々な技術的な意見を取り込み、ベストな方法を探るべきだろう。複数のブラウザベンダ間で協力しプラットフォームを進化させていくこと、Webの標準化を進めていくこと、これらに対して、Blinkチームはこれからも深く関わり続けていく。マイクロソフトが成し遂げたことは、本当に素晴らしいことだ。これからも、あなた方は我々とともに、現状のAPI設計の欠点を埋めていき、新しいイベントモデルを探っていけるはずだ。 」

"I plan to continue to participate in the working group, as the problems we're trying to solve are essentially the same regardless of the specific form of the API and we have at least the touch-action API in common. I hope it goes without saying that this decision reflects only a difference in technical opinion about what's best for the long-term health of the web platform. The blink team continues to be deeply committed to evolving the platform only through the collaboration of multiple browser vendors and the web standards process. We have deep respect for the work Microsoft has done here, and I'm optimistic that we will find a way together to leverage the advancements in input API design without the drawbacks of introducing a new event model."

【ここから下、2015/2/14に追記】
@kanreisa氏との議論もあり、「さらば!」と投げ出すだけだと辛いので、Pointer Eventsと「さらば!」しなくて良い方法を記述しました。@kanreisaさん、ありがとうございます!

Pointer Eventsに残された復活の道は?

jQuery FoundationのKris Borchers氏(@kborchers)に確認したのですが、2015年2月現在、状況は変わっていないようです。Blinkチームは、Pointer Eventsが世の中から適合されることを待っているという状況です。ようは、シェアの問題ということになるのでしょう。

f:id:furoshiki0223:20150215152710j:plain

したがって、人々がPointer Eventsを活用し、Pointer Eventsを必要とすれば、Blinkチームも実装に踏み切ることができるでしょう。そこで、Pointer Eventsがこれから復活するために必要な2つの道をご紹介します。

1. jQuery FoundationのPEPの普及

BlinkチームがPointer Eventsの実装計画を取りやめた後、Google(Polymerチーム)はjQuery Foundationへ、Pointer Events Polyfill(PEP)を寄贈しました。今もなお、Pointer EventsのPolyfillは維持し提供されており、フォールバックによりPointer Eventsの機能を活用することが可能です。

もし、このPolyfillライブラリの活用が広がれば、Blinkチームもそのニーズに答えようと実装に踏み切ってくれるでしょう。

2. ペンデバイスの普及

現在、ペンデバイスの入力を行うための専用のイベントが存在せず、Pointer Eventsを利用するしか道は残されていません。したがって、ペンデバイスが普及すれば、必然的にPointer Eventsが必要となり、Blinkも早急に実装することが求められるでしょう。

モビリティは今、どのように進化しているのか?

デスクトップPCだけじゃなく、モバイルやタブレット、ウェアラブルデバイスの特徴を活かして、仕事を良くしよう。それが「モビリティ」という考え方です。ただ、実際の所はデスクトップとモバイルを隔てる壁が大きかったりします。モバイルのセキュリティを高める程度の議論で止まってて、モバイルでできることの限界みたいなのにぶち当たっていたように見えます。しかし、クラウドの地盤が固まったことで、ようやく次の世界へと進みつつあるようです。

これからのモビリティとは!?

イマドキのモビリティとはどういうものなのか、そのイメージを掴んでみましょう。どの製品ベンダも提案している内容はそっくりなのですが、個人的にはマイクロソフトのPV「A Day in the Life of a CVP」が、結構ポイントを掴んでいて一番わかりやすかったです。

マイクロソフトも、WindowsのXP(体験:Experience)はとっくにサポート終了していたはずですが、体験を売ろうという姿勢は未だにサポート終了していないようですね。せっかくですので、一つの例として、ご紹介してみます。(※静止画だとわかりにくいので、想像で字幕を入れてお届けします)

やや緊張ぎみな雰囲気で車に乗り込む彼女。これから移動でしょうか?
f:id:furoshiki0223:20150204162242j:plain
モバイルが電話会議ツールに早変わり。メンバと情報を入念に交換を始める
f:id:furoshiki0223:20150204162243j:plain
お客様のビルへ到着し、タブレットでShare Pointサーバ上の資料を探しているように見えます
f:id:furoshiki0223:20150204162248j:plain
会議室に入りました、いよいよ本番のようです。
f:id:furoshiki0223:20150204162245j:plain
直前の作業はノートPCで。こっちのほうが、入力が楽ですしね。
f:id:furoshiki0223:20150204162244j:plain
プレゼン中はタブレットに変化。手前のディスプレイにも表示
f:id:furoshiki0223:20150204162245j:plain
おや?お客様から何やら意見が出てきたようです。
f:id:furoshiki0223:20150204162250j:plain
焦燥する彼女。やばい、どうにかしないと!
f:id:furoshiki0223:20150204162247j:plain
すぐにペンを取り出し、タブレットにそのままメモをとる
f:id:furoshiki0223:20150204162246j:plain
終わったので帰りますよと、部下にスマートフォンでメールします。
f:id:furoshiki0223:20150204162251j:plain
別の会議室では、スクリーンの予定表にタッチ。TV会議のセッティング
f:id:furoshiki0223:20150204162252j:plain
お?会議室に人が入ってきました。彼女です!彼女が帰ってきました!
f:id:furoshiki0223:20150204162253j:plain
真剣な眼差しで、スクリーンに色々書き込みながら客先訪問の内容を語る彼女
f:id:furoshiki0223:20150204162254j:plain
部下たちも真剣です。というか、なんか凄くがっかりしてますね。あと国外でも、客先に行かない人は私服なんですね。そこは日本と一緒?
f:id:furoshiki0223:20150204162255j:plain

モビリティ自体に馴染みがない人には、いやいやこれはぶっ飛び過ぎだろう、SFの世界ですか?といったところでしょう。ただ、従来の「モバイルだけ」「デスクトップだけ」に閉じていた状態でモビリティを体験していた人にとっては、痒い所に手が届き始めたなぁなんて印象を受けるに違いありません。このあたり、各ベンダは「流動的」とか「シームレス」という言葉で表現していることが多いようです。

モビリティ適用の入り口として、まずよく聞くのがマネージャの決裁業務のリアルタイム化です。通知させて、タッチで決裁を完了させる。またどこまで進んでいるのかを確認することを、デスクトップPC&メール通知という形式では到底敵わないようなエクスペリエンスとして提供するのです。これがメンバーレベルになると、予定表との連動。例えば、マイクロソフトのオフィスとかだと、ミーティングの前には通知のバイブ音が一気にブーブー鳴り出して、ミーティングルームに向かい始めるみたいです。彼らに言わせれば、こんなのはまだモビリティの入り口みたいなものなのでしょうが、モビリティを体験したことがない人には直感的で分かりやすい事例に思えます。

IBMでエバンジェリストをやっている佐々木 志門氏は、もはや研究家という域に達するほどのモビリティ人でして、腕にウェアラブル・デバイスを巻きつけ、Chrome OSやらAndroidやら、色んなノートPCとモバイル山ほど持ち歩いて何kgあるねんとツッコミたくなるようなかばんを持ち歩き、いろいろと活用の可能性を探っています。彼は腕についてるデバイスが、通知が来る都度スルーしたり反応してみたりと、モビリティやってますなぁという感じが見て取れます。その精神、すばらしい。ぜひとも勉強会にスーツケースを持ってくるようなキャラクターであってほしい。そんな感じで、彼らの様子見ている限り、モビリティはディスプレイの前に座っていることを前提とすることからの脱却というよりも、「通知」をどう扱うかが取っ掛かりとしてわかりやすいようですね。

これに加えて、スマートフォンはカメラもついているし、明るさも取得できるし、場所の取得もどんどん精度を上げてきているしで、できることの可能性がどんどん広がっています。近くの駅をアプリに探させて、タッチで入力すれば出張申請が完結できるような時代は、少なくとも10年後には当たり前になっているはずです。通知だけが全てでないし、これからも色んなモバイルの形が出てくるはずなので、そこにどんなアイデアを生み出すかがエンジニアの価値に変わるようにも思えます。

どうやって実現するのか?

こういうものを実現する仕組みは、MEAPだったりMaaSだったりで、結構色んな方法が出てきています。だいたい共通しているのは、持ち運べるようなコンピューターにはMDMやアクセス管理機能などのセキュリティ機能が入った箱庭を構築しており、大抵はクラウド(オンプレミスなものもある)との連携が大前提になっています。

f:id:furoshiki0223:20150204163014j:plain

まだまだ先端という感じが否めず、業界標準に相当するものは見当たりません。OSSだけだと、まだまだ問題があって辛かったりもするので、私はベンダ製品もOSSも両方しっかり見るようにしています。

OSSの動向としては、まず、Mozillaは「FirefoxOS」に力を入れているので、あとは進化が停滞気味のOSSのメーラー「Thunderbird」のプロジェクトさえ本気を出してくれたら、いい感じにオープンなモビリティが始まるのだろうと感じています。そして、モビリティでは要となるオフィススイーツでは、オープンソースの「LibreOffice」がブラウザ上で動作させる「LibreOffice in a Web Browser」プロジェクトを立ち上げているので、このあたりが突破口になってくれないかと期待しています。

なので、Mozilla FoundationはそろそろLibreOffice開発チームとエコシステムを作って、「FirefoxOS + Thunderbird + LibreOffice」で、オープン・エンタープライズ・モビリティ的なことをやって欲しいなぁという淡い期待を抱いています。FirefoxOS前提だと微妙かもですが、クロスプラットフォームでこれをやろうとしたなら、マイクロソフトとIBMはほぼ間違いなくコミッターを出すし、そのうちGoogleからも出てくる。あとはエコシステムの調整さえしっかりすれば、世の中のモビリティの進化と普及は爆発的に進むでしょう。一応、OpenmobilityというOSSのプロジェクトは出てきているのですが、本記事でとりあげる「エンタープライズ・モビリティ」とは若干違う感が否めず、製品ベンダが動くような雰囲気には達していないように思えます。

一方で、ベンダ製品側はどうなっているのか。具体的なものを紹介しますと、マイクロソフトはWindows 8系やPhoneがそういう仕組みのOSになっていたりしてて、少しばかりのパッケージを追加すれば運用面のリスクを潰せるので、「Windows + Office 365」の組み合わせで、ちょっとしたモビリティを体験できるようになっています。彼らはWindowsに縛るつもりはなく「Visual Studio 2013(Multi-Device Hybrid Apps)」をリリースしていたりと、これからもっと色々幅を広げてきそうです。IBMといえばApple製品なので、「Apple製品+MaaS 360」という組み合わせになります。これに加え、業務アプリの開発は「Worklight」を活用して、不足を埋めていくイメージのようです。この2社、結構色んなものがぶつかっています。

オフィス製品抜きのビジネスソフト周りだと、サーバサイドやパッケージを売るベンダ。MEAPと呼ばれるものが中心です。SAPは割と強かなので、同社の強みを活かしたMEAP製品「Mobile Platform」を「BYOD」と謳い売り込んでいます。ただ、実際のところは私用端末を活用(BYOD)するより、企業で配布する形がベストですよという提案をしているようです。日本だとそのほうがいいよと、他の製品ベンダからも聞こえてきますので、国内だとモビリティの鉄板の進め方になるように思えます。オラクルも「ADF Mobile」が、今年の8月2日にようやくデバイス管理系の機能性を満足させてきたので、モビリティというムーブメントへ自然に乗っかってきている感触があります。オラクルはJavaとの親和性がいい感じで開発の道具が揃っているので、Java好きな人には楽しめるかもしれません。

【連載:モビリティとは何か?】
  1. モビリティとは何か?企業にモバイルが求められる理由
  2. モビリティは今、どのように進化しているのか?
  3. モバイルファーストじゃダメな理由、モビリティファーストに求められること(8/14)
  4. モビリティの価値を大きく変える、5つのキーワード(8/15)

モビリティとは何か?企業にモバイルが求められる理由

「企業向けのシステムって、これからはモバイルファーストになるんですよね?」

「モバイルファースト?うーん、いや、少し違いますね。『モビリティ』の方を、私としては薦めたいのですけどね。うちは、体験を売りたいんですよ。」

「モビリティ!?」

そう答えるのは、日本マイクロソフトの大西 彰氏。これは、先日私は翔泳社主催のイベントにて、パネルディスカッションの司会を担当した際に起きた一コマです。私は事前に彼らの情報をチェックしていたものですから、どんな反応が返ってくるか完璧にシミュレート済みで、ストーリーもしっかりと準備していたわけです。そこに、大西氏は私の予想を大きく外れたこんな答えを突っ込んできました。モビリティ!?まさか、そんな展開になるとは…

その6日後、私は青山で開催されたオラクルのエンタープライズ・モバイル・サミットに参加しました。それはもう「企業向けモバイル」がテーマなのだから、参加者は色んなメーカーのタブレットやガジェットを使ってくるに違いない。私は他の企業がどんなものを使っているかが凄く気になる体質なので、公開スパイができるとワクワクしていました。目を瞑れば、管理端末シールが貼られた色とりどりのデバイスがテーブルを埋め、虹色に染まった会場なんかが目に浮かんでいたわけです。

ところが、会場の中、数名を除くほとんどの参加者が、紙のノートを広げ始めます。見栄を張って色々持ってきた私が、なにか不道徳なことをやっているような感覚に陥るくらいに、見渡す限り紙のノートばかり。あまりにもショックで、それはもう世界のITから日本が取り残されているような疎外感なんかも感じたりして、混乱した私は丸3日間も拡散が止まないようなツイートまでこぼし始めます。

まさかここまで日本企業にモビリティが広がっていないとは。こりゃ確かに、モバイルファーストどころじゃない。こんなことは全くもって想像していなかったので、当然、私のカバンには紙切れ一つ入っていません。

「なんか私の机、スクリーンが光ってて恥ずかしい感じになってる。間違っちゃったなぁ。すごく、帰りたい。けど、仕事だしマズいよなぁ・・・。」

下がり続けるテンション。そんなムードの中、来日していたビル・パタキ氏のセッションが開始されます。そして彼は、始まって早々、穏やかな口調でこのように主張します。

「企業の『モビリティ』は、挑戦が求められているのだ!」

私「(この会場、モビリティを挑戦させる以前に、始まってすらいない?)」

そういえば、今年の7月。IBMとAppleがコンビを組んでエンタープライズ・モバイルで提携することをアナウンスしましたが、彼らのモバイル製品のサイトの一際目立つ所にもこんなキャッチコピーが書かれています。

f:id:furoshiki0223:20150204163744j:plain
"企業の『モビリティ』の次の段階、それは、どこにいてもデータがその役割を果たせることだ"

「みなさん、もうすでにモビリティはやっていますよね!?」といった感じのノリばかり。それどころか、どのキャッチコピーも「そろそろ御社のモビリティも、次に行く頃ですよね?」ってな具合で、欧米ではもはや普通と言った感じ。うーん、これはどうしたものか。なんとなくですが、日本ではモビリティという言葉すらも知らない方が大半にも思えるのですが・・・どうでしょう。

「モビリティ」とは何か、みなさんはご存知でしょうか?

モビリティ = モバイル時代のワークスタイル

モビリティという響きだけ聞くと、なんとなくモバイル・ファーストという言葉と同じ意味のように感じてしまいます。しかし、マイクロソフト、オラクル、IBMやSAP、どの製品ベンダも、これを明確に違うものとして扱っています。

「モバイル・ファースト」とは、アプリケーションをどのように実装するのかという、開発の指針を表す言葉です。デスクトップ版よりも先にモバイル版を出そうとか、同時に作ってしまおうとか、そういう開発の戦略を意味します。

対して「モビリティ」とは、モバイルを活用した場合の仕事のやり方、ワークスタイルを表す言葉です。デスクトップ型のみの世界に、持ち運べるようなノートPC、これに加えてモバイルやタブレットのような新しいコンピューターが入ってきたことで、仕事のやりかたを変えることができるようになった。見方によっては、変えざる得ないという状況になった。だからその実現方法に、「モビリティ」という名前を与えたわけです。

エンタープライズ・モビリティとは?

「ホワイトカラーの働き方」を例に挙げ、モビリティとは何かについて考えてみましょう。一般的には「エンタープライズ・モビリティ」と呼ばれているものです。

ホワイトカラーはこれまで、デスクトップ型のコンピューターを使って仕事をしていたので、デスクトップ型コンピューターでしかできない範囲の中で仕事を動かしてきました。キーボードにマウス、ディスプレイがついているコンピューターにできることの中でだけで、コンピューターと接触してきたわけですね。そこに、モバイルが加わり、タブレットが加わり、ウェアラブルデバイスが加わり、これらを活用した時にできることは今までより広がったので、仕事のやりかたに対する可能性も大きく広がりました。

例えば、ホワイトカラーが仕事をする時、メールやチケット管理ツールにスケジューラーなど、何かしらの作業を始めるきっかけに色んなツールを活用します。デスクトップ型のコンピューターを利用している場合、作業者は常にディスプレイの前に座り、作業者側から能動的に情報をチェックし、作業を進めていることが多いはずです。その作業があまりにも多い場合は、秘書を雇う人もいるでしょう。

対してモバイルは、コンピューター側から能動的にイベントの発生を作業者に伝え、そこから作業を進めていくというスタイルに向いているコンピューターです。作業者側から大量の情報をチェックしにいったり、ましてや表計算ソフトに大量の情報を入力するような作業には向いていません。

具体的には、電話がかかってきたことを知るために、ディスプレイを眺めて待機するようなような使い方を作業者はしません。電話は鳴ってから取るものです。電話が鳴っているということを、コンピューター側から作業者に対して、別の作業から割り込むような形で伝え、電話するという作業がスタートするというワークフローが自然です。このように、受動的な仕事の動かし方をしていけることが、モビリティの特徴の一つと言えるでしょう。モバイルは言わば、ホワイトカラーの秘書としての役割を担ってくれるわけです。

モビリティは何が良いのか?

モバイルの特性を活かした仕事のやり方をすれば、生産性も上がるし、ミスだって減るでしょ?というのが、多くの場合モビリティのメリットとして挙げられます。向いていることを向いているツールとコンピューターにさせることで、ユーザ体験を上げるのがモビリティというわけです。

実際に、メールを能動的にチェックさせて作業を発生させるより、モバイルのイベントとして通知させたほうが見落としのリスクが減る、なんていう統計結果も出ていたりします。私も、目的が雑多に並んでいるメールが毎日何百通も飛んでくると、一通一通を真面目に見ている暇がなく、見落とすことが結構あったりします。

例えば、私は以前、マイクロソフトの大西さんからのメールを広告MLと勘違いし、スルーしてしまったことがあります。「Microsoft」というキーワードがタイトルに出てきたので、私の脳が勝手にフィルターしてしまったのです。しかし、大西さんのFacebookメッセンジャー越しでの「返事はよして!」コールには、すぐに気がつくことができました。私は、目的がはっきりしているFacebookメッセンジャーのイベントの見落としは滅多にしませんし、スルーする時も割と意識的にできていたりするので「やっちまった!」という経験はあまりありません。

f:id:furoshiki0223:20150204163747j:plain

モビリティな人たちからすると「メールの見落としが起きている時点で、もうそれはもうおかしいでしょ。目的に合ったツールやコンピューターに手段を分散していかないと仕事やりにくいでしょ。メールというツールに、不向きなことをやらせ過ぎているから、こういうことになったんじゃないかな。」と。

それを聞いて私も「ああなるほど。そういう考えでみると、私は結構モビリティができそうな気がする。Facebookには即反応していたし!そもそも、日本人は割と早い時期からモバイルを使ってきたのだから、モビリティのワークスタイルに馴染める人は結構多いんじゃないのか?」なんてことを思ったわけです。

日本の場合、私用の携帯を会社の仕事用途で利用するBYODっぽい使い方を、実は多くの人が既にやってるんじゃないでしょうか。出張の時なんかは、朝は携帯で会社に電話して、ちょっとした報告は簡単なメモとしてメールで送るなんてことを、日常的に行なっている人も少なくないはずです。こういうツールの使い分けを、さらにより高度に行えるようにしようという取り組みにモビリティがあったりします。

モビリティで改善するセキュリティリスクとモラル

BYODっぽい使い方を無意識にうちにやっているのではないか?というお話をしましたけど、よくよく考えてみてください。実はそれって、大きなリスクを孕んではいないでしょうか。仕事用途だと、メールの中に大切なお客様情報が気づかぬうちに入ってしまうリスクがあったりします。これを企業側の管理対象に入れないというのは、それはそれで危険なはずです。

BYODを考える上であまり見られないのが、紙のノートの存在です。恐らく多くの人が、自腹なり備品なりでノートを使っているのでしょうが、これは見方によっては紙媒体による非管理の端末と見なせます。客先でノートを広げて色々情報を書き込んでいますけど、本当にそのノート、危険な情報が無いと言い切れるでしょうか。私は電車でカバンを拾ったことがあるのですが、駅員に渡した時に聞いてみたんです。彼らいわく「カバンの中をチェックしてて、数冊の紙のノートやスケジュール帳が出てきて、持ち主の真正性情報を探そうとペラペラめくったり・・・(おお、それ以上言わないで下さい!!)」とこんな感じで。

冒頭のオラクルのモバイルイベントでも、「この会場には、暗号化されていない、リモート削除(リモートワイプ)の機能もついていない、何十、何百冊の情報が並んでいる!」とは言わず、あくまで「モビリティに挑戦が求められている」という言い方をしているのは、ある種の米国的優しさなのかもしれません。ただ、今でもモビリティな人から「日本は紙が多い」「紙は本当にもう危険だからやめようよ」が口癖になっていて、企業のペーパーレス化はどこもうまく進んでいないようです。

天災なんかで電車が動かない時も、電車の中で慌てて電話している人をよく見かけます。こういうモラル的に良くない行動を社員にさせてしまうことも、モビリティがうまくマネジメントできていない企業の良くない一面と言えるでしょう。(お客様が相手だとどうしようもないかもしれませんが・・・)

モバイル依存な業務が現場レベルでは根付きやすい状況であるにも関わらず「企業でモバイル活用なんて認めない!」と強制力を働かせてリスクから目を背けてしまうよりも、仕事のやり方にあったセキュアなツールとコンピューターの提供、リテラシーを上げるための教育、セキュリティ面でのルール化を進めたほうが安全だろうという見方があります。こうした、IT運用の健全性をコントロールしやすいというのも、モビリティのメリットの一つだったりします。

【連載:モビリティとは何か?】
  1. モビリティとは何か?企業にモバイルが求められる理由
  2. モビリティは今、どのように進化しているのか?
  3. モバイルファーストじゃダメな理由、モビリティファーストに求められること(8/14)
  4. モビリティの価値を大きく変える、5つのキーワード(8/15)

Google Chromeの開発者が語るこれからのWebに必要なこと、ちょっとした懸念点とか

ーーーー HTML5はネタが出尽くした。あとは、IE8やAndroid2.X標準ブラウザのような、レガシーブラウザがいなくなればいいだけではないか?

私は最近、そんな言葉を耳にすることがあるのです。しかし、ブラウザ開発者たちは未だに、そんなことを微塵も感じさせないほど働いています。まだまだ進化の速度を、落とすわけにはいかないようです。2014年06月14日に開催された「HTML5 Night」にて、Google Chromeの開発者である及川卓也氏の口から、これからのChrome開発について語られました。

f:id:furoshiki0223:20150204165554j:plain

本記事では、及川氏の講演のダイジェストをお届けします。

今のChromeには何が不足しているのか?

Chromeは2013年の4月に大事な出来事がありました。Appleと一緒に開発していた、「WebKit」をフォークしました。それが、Chroniumと同様なオープンソースのレンダリングエンジンである、「Blink」です。Blinkは、HTML5などのWebプラットフォーム機能を実現しています。

Blinkプロジェクトでは、2014年冒頭に、今年は何をしようかということを話し合いました。Blinkはオープンソースのプロジェクトなので、話し合いは全て「blink-dev」という、メーリングリストで行われます。これがメールスレッドになるのですが、書かれていることはだいたいこんな感じです。

f:id:furoshiki0223:20150204165555j:plain

ざっくり言いますと、「モバイル」が大事ということです。

ご存知の通り、モバイルの方がデスクトップより売れているし使われています。そういう状況ですが、モバイルのアプリを開発する立場からすると、残念ですが、Webよりもネイティブアプリの方が良いと言われています。

そこでとある機関が、モバイル開発者になぜHTML5を使わないのかという、アンケートをとりました。こちらがその結果です。

f:id:furoshiki0223:20150204165556j:plain

不満は主に、パフォーマンスが悪い、APIが足りない、ツールが整っていない、ということです。

最大の問題であるパフォーマンス、「速いことは正義」です。これについては色々とやってはいますが、HTML5はあまり関係ないので、Blink Contributorsが集まった時の資料「Blink On 2: Mobile@60 FPS」を御覧ください。


Blinkは「API不足」をどう改善しているのか?

ハードウェアアクセスが大切ですし、痒い所に手が届くオフライン制御も大切です。Blinkでもいま取り組んでいます。ServiceWorker、WebMIDI、WebAudio。全ては紹介しきれないので、ServiceWorkerについて触りだけお話します。

ServiceWorkerで何が出来るのかというと、より高度なオフライン機能、ネイティブアプリに追いつく、AppCacheからの学びを活かすような設計となっています。オフラインと言っても、完全にオフラインという場合だけではなく、ネットワークが不安定であったり、しょっちゅう切れたりなど、今はそのような異なる状況に対応したWebアプリを書くのがとても難しかったりします。

f:id:furoshiki0223:20150204165557j:plain

仕組みとしては、WebサイトからインストールされたJavaScriptが、独立したWorkerスレッドで動作し、Webサイトからのイベントハンドリングを実現する、というものです。つまり、頭の良い、In-browserなHTTPプロキシです。これが、インターネット上のページとキャッシュの、両方を制御できるということです。

詳しくは、こちらをご確認下さい。


Blinkは「ツールの不足」をどう改善しているのか?

HTML5は、様々な要素の統合が難しい、最新のUI/UXが作りにくい、成熟したフレームワークが不足しているというのが、アンケートの結果から得られました。これらについても、Blinkでいままさに取り組んでいます。WebComponents、Polymer、WebAnimation。こちらも全ては紹介できないので、WebComponentsとPolymerについて。

WebComponentsとPolymerは、Webにコンポーネント技術を取り込むためのものです。例えば、Google Chart APIの場合、グラフを表示するための情報を、JavaScript上に書き込まなくてはいけませんでした。

f:id:furoshiki0223:20150204165558j:plainf:id:furoshiki0223:20150204165559j:plain

WebComponentsを採用すると、グラフを意味するgoogle-chart要素の属性に、グラフの表示に必要な情報書き込むだけです。

f:id:furoshiki0223:20150204165600j:plain

Googleのサービスを利用するためのWebComponentsが、GitHub上にもたくさん用意されています。

https://github.com/googlewebcomponents
f:id:furoshiki0223:20150204165601j:plain

以上です。応援宜しくお願いします、ご清聴ありがとうございました。

Googleが力を入れているのは?

この講演はGoogle I/O 2014が開催される前に行なわれたものですが、一貫して「Service Worker」「WebComponents」を推しているようですね。オフラインの機能でネイティブの上を行こうとService Workerに取り組みつつ、ツールの不足をWebComponentsを活用することでGoogleのサービスを提供していくことで解決しようという方向性のようです。先日の「第49回HTML5とか勉強会」でも、一貫して同じことに触れていました。

どちらも彼らのビジネスと上手く協調できているし、実に理にかなっています。ただ、Microsoftさん的には納得いかないところもあり、エコシステム的にまだまだ問題もあるようです。このあたり、Microsoftさんは結構後手に回ってしまうので「なんだよまたIEが遅れているのかよ」「本当にIEだけ機能が全然実装されねぇよな」という空気感が出てしまうのが目に浮かびます。ただ、最近IEが実装できない機能って、「技術的な理由でできない」というより「政治的な理由でできない」が中心なんですよね。

開発者たる我々からすれば、そんなことは本当にどうでもいいことなので、Microsoftさんには社内の他の製品との利害関係を整理してしがらみを捨てて、一緒にWeb標準を育てていけるよう頑張って欲しいところです。彼らは最近自分たちのことを「俺たちはもうトップの企業じゃない。そこらのチャレンジャー企業と何にも変わらなくなった」と言ってて、社内的にもそんな空気感がただよい始めているみたいなので、変な形で既存利益に拘るようなことはしないだろう、と信じています。

ただ、一点。Google的にパフォーマンスは、Web標準(WebPerf-WG)の「◯◯ Timing」系APIで解決しようという意思はあまり感じられません。あくまで、彼らの提供している独自のサービス「PageSpeed Insights」を推していたりします。ただ、このツール、彼ら自身もまだまだ機能が十分に足りていないという認識を持っているようです。Google I/O 2014でPaul Lewis氏のセッションでも、途中からこのツール使わず、他で提供しているサービスを利用してパフォーマンス計測の一連の流れをデモしていました。。「検索に0.02秒かかりました」とか出してきて「聞いてねー(笑)」と思うほど、パフォーマンスが良かったアピールしてくるGoogleさんの、らしくない意外な一面ですね。

アプリケーションプラットフォームと呼ぶには、まだまだ色んな問題が残っているんですね、、、Webって。これからが楽しみです。

HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」はどのように課題を克服し、進化するのか?

本記事は「HTML5ハイブリッドアプリ開発を支えるOSS『Cordova』シリーズ」の続編です。前回に引き続き、2014年6月10日に開催された「第1回Apache Cordovaスーパー勉強会」にて、アシアル株式会社の田中正裕氏が行なった講演のダイジェストをお届けします。

まだまだ進化を止めないApache Cordova

ハイブリッドアプリも日々進化しています。3年前はPhoneGapもようやく1.0という状況でしたが、それも今ではCordova3.5ということで、ここに来るまで相当な進化があったんです。

f:id:furoshiki0223:20150204170353j:plain

3年前に、僕が初めてPhoneGapを触った時、iOSも4.2で、CSSもまったく充実していませんでした。Androidも当時は2.2だったのですが、あれからAndroid自体のパフォーマンスが改善されてきました。

Cordovaもプロジェクトが大きくなって、やれることも増えてきました。ここで、最近どういう動向があったのかをご紹介します。

ハイブリッドアプリの新たな姿「WebView内包アプリ」とその進化

f:id:furoshiki0223:20150204170354j:plain

従来のハイブリッド開発は、OS付属のWebViewを活用するというものでした。最近はそうではなく、自前のWebViewを内包して開発しようというアイデアがあります。その内包するためのWebViewとして、僕がいま注目しているいくつかのプロジェクトがあります。これらは、今のハイブリッドアプリの制約を改善する可能性を秘めていると考えています。

ChromeのエンジンであるBlinkは、パフォーマンスが高くてキビキビ動きます。これをCordovaへ取り込もうということで、IntelがCrosswalkというプロジェクトを進めています。そしてその取り組みが、今、最もポピュラーになってきています。ChromeのOSSプロジェクトであるChromiumをフォークすることで、彼ら独自のブラウザエンジンとして、Cordovaと互換性のあるものを作っています。Intelらしく、Tizenに対応しているのが強みです。OSSなので、サイトに行けばダウンロードして使うことができます。

ゲームという分野だと、LudeiというCocoonJSを開発しているアメリカのゲーム会社があります。彼らも同じ考えを持っており、WebView+というAndroid用のブラウザエンジンを作っています。Crosswalkと違うところは、WebGLという3DをレンダリングするためのAPIを有効にできるという点です。HTML5だと、どうしても苦手と言われているような3Dを改善しています。彼らのデモを見てみると、グリグリと動いていて面白いですよ。こちらはクローズドソースで、彼らの公開しているサーバ上でビルドすることで、使うことができます。

もうひとつはAmazonです。彼らもHTML5に対する動きはすごく活発で、Amazon Silkという、Blinkベースのレンダリングエンジンを開発しています。これは、Kindle Fireという彼らの製品の中に組み込まれています。使い方は、CrosswalkやWebView+とも違っています。Cordovaで作ったアプリをAmazonで販売する場合に申請して、ソースコードをアップロードすると、Amazon Silkでビルドされリリースされるという仕組みになります。

「WebView内包アプリ」にはどのようなメリットがあるか?

f:id:furoshiki0223:20150204170355j:plain

彼らの取り組みには、色んな利点があります。

HTML5を使えば一つの知識でいけるなんて言われますけど、環境によっては対応しているCSSのプロパティが全然違っていたり、JavaScriptの構文にもAndroidのバージョンによって差があったりします。そういうものを、ブラウザエンジンを内包して一つのアプリとして提供できるようになれば、フラグメントという問題もAndroidにおいては無くなります。

iOSについては、アップグレードが浸透しており、iOS7が今の時点でもう既に90%以上の方に使われています。そのアダプションを考えると、今のウィークなポイントは、Androidの2.3とか4.0が未だに多くのユーザに使われているというところです。正直、Chromeのブラウザエンジンを内包するという方式は、Androidの4.0以上でないと対応できないためネックになっています。ただ、Androidの2系が無視できるような状況になると、4.0以上がシェアを占めるため、一気にハイブリッドアプリを作る環境が改善されると考えています。

もう一つの利点としては、Chromeのエンジンを内包できることで、Chrome Dev Toolsが利用できるという点です。従来のCordovaだと、デバッグにはやや特殊な方法が必要だったりします。しかしChromeのエンジン、もしくはそれに類するものを内包できると、Chrome Dev Toolsが利用できるので、AndroidをUSBで繋いで、Cordovaのアプリをデバッグできるようになります。この方式が普及すると、ネイティブにあったような端末の依存性問題も、ディスプレイのサイズやリゾリューション程度になるので、モバイルアプリ開発はかなり改善されるのではないかと期待しています。

また、Chromeは昔とくらべてかなりパフォーマンスがよくなったので、このエンジンを内包することで、パフォーマンスの向上がかなり期待できます。また、Chromeのエンジンは最新のCSSに対応していたりとか、高速なJavaScriptエンジンが使えるというのもメリットとして大きいでしょう。

デメリットとしては、先ほどもご説明した通り、Android 2.Xに対応していないというのがあります。また、ファイルサイズが大きいという点も大きいでしょう。8MBから十数MBぐらい増えてしまいますので、これでは起動時間が長くなってしまいます。しかし、みなさんがもしChromeアプリを使っていて、それでストレスを感じないというのであれば、やっていることはあまり変わらないので、大丈夫ということになります。これはそんなに問題ではないのかもしれません。

f:id:furoshiki0223:20150204170356j:plain

iOS8で、新しいWebViewがでます。これまで、iOSはUI WebViewというブラウザエンジンを提供しており、AppleはSafari以外それを使うことしか許していませんでした。そしてそのWebViewが、iOS8からはWKWebViewに変わります。名前から察しがつくかもしれませんが、WKはWebKitの略です。

私たちが評価してて、このWKWebViewはすごく良いと感じています。例えば、WebGLが標準で使えるようになっていたり、あとIndexDBというクライアント上で扱えるデータベースの機能が、なぜかWKWebViewだけ使えるようになっていたりします。一番面白いのが、今までSafariにしか許してくれなかったJITの実行エンジンを、Appleが開放してくれたことです。sunspiderという有名なベンチマークで動かすと、UI WebViewだとだいたい4秒ぐらいかかるのですけど、WKWebViewだと1秒切るんです。iOS側もハイブリッド開発がどんどん改善が進んでいます。

「JavaScript UIフレームワーク」の進化

次に、ユーザインタフェースを作るためのフレームワークについてです。

f:id:furoshiki0223:20150204170357j:plain

jQuery Mobile」なんかは使われている方は多いのでしょうけど、アメリカだともう使われていなかったりします。最近は、新しいUIフレームワークがかなり台頭しています。

筆頭しているのが、Driftyという会社が作っているAngularJSベースのフレームワーク「Ionic Framework」です。結構スムーズに動くんです。弊社でもやっている「Onsen UI」も同じコンセプトでして、アメリカでもかなりウケがいいです。AngularJSベースのWebComponents、ディレクティブというんですが、そういうものを使ってタグだけで画面のコンポーネントを作って、ビジネスロジックは全部AngularJSのコントローラーで作るようになっています。

3つめが異色ですけど、「Famo.us」というフレームワークがあります。彼らは少しアプローチが違っていて、CSSのGPUが使えるマトリクスとかを駆使して、できるだけ高速にレンダリングできるようにするという、そいういうフレームワークです。

jQuery MobileはjQueryブランドの安心感があるのですけど、PhoneGap1.0が出るよりも前という、CSSも全然無いような時代に作られたフレームワークです。スクリーンのトランジションの遅さとか、ウィジェットのレスポンスなんかが、やっぱり前世代的な感じなんですね。なので、こういったものも、一度評価に入れてみてはいかがでしょうか。

f:id:furoshiki0223:20150204170400j:plainf:id:furoshiki0223:20150204170401j:plain

Cordovaのアーキテクチャの進化

デバイスAPI/ネイティブの機能。3つめのトレンドとして、Cordova Plugin Registryです。

f:id:furoshiki0223:20150204170358j:plain

実は、Cordova 3.4から、かなり大きな仕様変更がありました。Cordovaにはコアの部分と、カメラとか電話帳とかネイティブの機能にアクセスするモジュールの部分に分かれています。従来そのモジュールの部分は、Cordovaの中に含まれてました。それが3.4から、Plugin Registryに分離されました。

これには2つの狙いがあります。一つは、プラグインに分離させてしまうことで、プラグインだけで独自に進化することを促せるということ。もうひとつは、プロジェクトを進めていくと、いらないObjective-Cなどのコードが増えていくので、本当に必要なものだけを取り込めるようにすることです。

結構色んなプラグインが登録されています。

f:id:furoshiki0223:20150204170359j:plain

最後に、我々はCordovaを盛り上げようと思っているのです。しかし、我々だけではやはり弱い所がありますので、是非、一緒に盛り上げていきましょう!今日はどうも、ありがとうございました。

本連載の最後に ーーーー

3回の連載にわけてみましたが、いかがでしたでしょうか。Cordovaを愛し知り尽くした彼は、Cordovaの開発を楽にできるようにと、「Monaca」というツールを開発しています。これを使えば、彼は来年以降もっといいメシが食べれて、Cordovaにコミットするモチベーションが上って、みんながハッピーになれるわけですね!

本記事のソース「Apache Cordovaスーパー勉強会」は割と評判が良かったため、第二回を開催する予定です。よさ気なネタがありましたら、TwitterなどのSNSで、気軽に私に話しかけて下さい。お待ちしております。

(※写真がボケてしまいましたが・・・、左上が田中正裕氏、左下が筆者)
f:id:furoshiki0223:20140719184253j:plain

HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」のこれまでの進化、そして課題とは?

本記事は「HTML5ハイブリッドアプリ開発を支えるOSS『Cordova』シリーズ」の2本目です。前回に引き続き、2014年6月10日に開催された「第1回Apache Cordovaスーパー勉強会」にて、アシアル株式会社の田中正裕氏が行なった講演のダイジェストをお届けします。

Cordova派生の製品がいくつも登場、どのように差別化が進められてきたのか?

元々は、PhoneGapという製品を中心に色んなエコシステムがあったのですが、Cordovaというオープンソースに変わったことで、そこから派生して色んなプロジェクトが各社によって作られています。

f:id:furoshiki0223:20150204170757j:plain

例えば、IBMのWorklight Projectも、Cordovaから派生したディストリビューションです。GoogleのChrome AppsというPC上でアプリを動かすプラットフォームがあるのですが、それのモバイル版「Google Chrome Apps Mobile」もCordovaがベースです。Chrome Appsで作ったアプリはCordovaで動かせるんですけど、そのままじゃ動きません。Chrome Apps用のAPIというのがありまして、例えば、GoogleにログインするためのAPIとか、WebSocketサーバになるような機能とか、そういう拡張をGoogleはCordovaプラグインとして作っています。

最近ではMicrosoftのVisual Studioが、Cordovaに対応しました。Visual Studioで、HTML5を使った、iOSアプリが作れるのです。凄い時代ですね。あと、最近日本でも火がつきつつあるIonicフレームワーク、HTML5を使ってヌルヌルに動くネイティブアプリを作るためのこういうツールも、内部ではビルドエンジンとしてCordovaが使われています。弊社が作っているMonacaとかOnsen UIみたいなツールもあるんですけれど、これもCordovaに準拠しています。

これらのツール/フレームワークは、何が違って何が同じかと言われると、最終的に作られるアプリは全て同じで、何の違いもありません。ただ、各社独自のアドインを開発し入れているという点で、大きく異なります。エンタープライズ向けの製品だと、エンタープライズニーズにあった各種プラグインを作っていたり、Google Chrome Appsだと、先ほど説明したようなプラグインを作っていたりします。弊社のMonacaでも、ネイティブの機能を扱えるようなプラグインを提供しています。

モバイルWebとハイブリッドアプリの違いは何か?

HTML5を解釈するブラウザエンジンについて、モバイルブラウザとCordovaとでは微妙に異なります。

f:id:furoshiki0223:20150204170758j:plain

モバイルブラウザでURLを打ち込んで表示するWebアプリは、iOSだと、Safariと、Safari以外に分かれます。例えば、Safariと、iOS上で動くChromeは、異なるブラウザエンジンで動いていたりします。Appleはモバイルで扱うブラウザエンジンに、特殊なフラグをつけているのです。iOSでは、Cordovaを含むサードパーティベンダの場合、内部的にはWebViewを使ってWebアプリを表示します。SafariはJITなどの機能によって、JavaScriptを高速化させるような仕組み(Nitro)が入っているのですが、iOSのWebViewはそれが無効化されています。

Androidも、微妙にややこしいです。AndroidにもiOSのような標準ブラウザが入っているのですが、Android版のFirefoxやChromeでは、内部的でそれを使っていません。では、iOSと同じようにWebViewを使っているのかといえばそうでもなく、FirefoxはFirefoxの独自のエンジン、ChromeはChromeの独自のエンジンで動いていたりします。そしてCordovaは、FirefoxやChromeが使っていない、Android標準のWebViewを使っています。WebViewはAndroidのバージョンに依存していて、例えば、Androidの4.1、4.2、4.3と、バージョンごとに対応している機能に違いが表れます。対してChromeは、Androidのバージョンに関係なく、Chromeのバージョンに機能の違いがでます。

こうした背景から、Cordovaの対応している機能は、Cordovaのバージョンに関係なく、動作させているOSのバージョン、WebViewの機能に依存します。Cordovaだから対応機能が少ないとか、そういうことはありません。ただ、Cordovaがモバイルブラウザと大きく違うところがあります。それは、JavaScript APIが拡張できること、Same-origin Policyのルールが異なることです。

ブラウザは、JavaScript APIの拡張ができません。しかしCordovaは、自分たちで好きな機能を持ったJavaScript APIのプラグインを作ることで、ネイティブの機能を利用することができます。Same-origin Policy、セキュリティについても、ブラウザの場合はブラウザのルール、HTTPヘッダで指定されたルールが適用されます。対してCordovaは、基本的に自由でどこにでもアクセスし放題です。制限を加えたい場合、config.xmlにて、どの外部URLを許可するかを、ホワイトリスト形式で設定できるようになっています。

結論を言えば、APIレベルではモバイルWebとハイブリッドアプリは同じです。よって「Webアプリ≒ハイブリッドアプリ」ということになります。ではなぜ「ハイブリッドアプリは違う!」と言われているのか。それは「HTML5アプリとネイティブアプリの違い」ここに全てが始終します。

これまで、ハイブリッドアプリが抱えてきた課題は何か?

HTML5ハイブリッドアプリは、これまで説明してきました通り、ブラウザエンジンの上で動くことになります。一方で、ネイティブアプリにはそんなものはなく、OSが直接アプリを動かします。このため、アプリの作りから動作の仕組みまで、全く違っていたりします。

f:id:furoshiki0223:20150204170759j:plain

HTML5アプリを、ネイティブアプリの感覚で作ると問題になります。世界が違うのです。ユーザインタフェース、これが一番よく言われます。HTML5でどうやってネイティブアプリのようなスムーズなUIを作るのか、これが一番私が受けることの多い質問です。そもそも、どうつくればいいのかわからない、これが一番多い悩みではないかと思います。

そして2つ目。やっていてジワジワと感じてくるのが、実行するパフォーマンスが違うという点です。例えばネイティブアプリの開発をした人なら、ビューなんかを10個ぐらい重ねてとか、トランジションでスクリーンを動かしてとか、アクティビティを作ってとか、ネイティブの要領で、頭のなかでやることがイメージできて実装ができるでしょう。しかしこれがHTML5なので、ビューもトランジションもアクティビティも無くて、そもそも世界が違うので、従来のパフォーマンス改善のノウハウが全く使えなかったりします。結果として、画面がもっさりとして、ストレスを感じるということになるのです。

3つ目が、セキュリティです。ここについては、大分改善されています。Webアプリと同じなので、JavaScriptが読めてしまうという問題ですが、難読化の技術がでてきていますね。ただそもそも、ネイティブも別に意図的に難読化をしているというわけではないので、例えばAndroidのclassなんかも、逆コンパイルすれば解読できますよね。

最後に、デバイスのAPIとか、ネイティブのAPIを呼びたいという点です。これについては、さきほども紹介しましたが、JavaScript APIを作って、その中からネイティブのAPIを呼ぶということができます。パフォーマンスも、悪くありません。ただ、AndroidなどのネイティブのAPIを、全てJavaScriptのAPIに紐づけて作るということはしないので、これが悩みに繋がったりします。ビジネスロジックには依存しない、端末に依存する処理だけを、JavaScript APIの呼び出し先でネイティブのコードとして作らなくてはいけないため、このあたりの作り方に、慣れが求められます。

>>【次回(最終回)】HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」はどのように課題を克服し、進化するのか?

HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」はなぜアツいのか?PhoneGapとの違いは何か?

ハイブリッドアプリとは何か?なぜ今、Cordovaがアツいのか?

iPhoneにAndroid、WindowsPhoneと、モバイルデバイスは混沌としており、「ネイティブアプリ」の開発には高いコストが必要とされます。一方で、ブラウザを活用した「Webアプリ」は、パフォーマンスやデバイス制御に大きな制約がつきまといます。このような、ネイティブアプリとWebアプリの互いが持つ問題点を補う手段として、「ハイブリッドアプリ」と呼ばれる開発方法が注目を集めています。

f:id:furoshiki0223:20150204171017j:plain

ハイブリッドアプリの実現手段には、OSSの開発ツール/フレームワークである「Cordova」が有名です。HTML5の活用することで、ひとつのソースコードからiOSやAndroidなどの複数のモバイルOSに対応させることができ、またネイティブアプリが持っているポテンシャルを活かしたアプリ開発ができます。その起源は、2011年にAdobeがNitobi社を買収し、同社が開発していた「PhoneGap」を、Apache Foundationへ寄贈したことから始まります。ApacheではCordovaというブランド名が与えられ、現在はGoogleなどの他社のエンジニアも一緒になって、改善が進められています。

ハイブリッドアプリが騒がれだした初期の頃は、Appcelerator社の「Titanium Mobile」が有名でした。エンジニアの間でも、ちょっとした熱気のようなものがそこにはありました。しかし、AdobeがNitobiを買収し、PhoneGapをOSS化した2011年以降、瞬く間にCordovaへと流れが移っていきました。最近では、OracleやIBM、SAPにMicrosoftと、様々な大手製品ベンダが提供するモバイル開発ツールで採用されています。事実上、エンタープライズ・モバイルのWebプラットフォーム市場では、デファクトスタンダードと呼べるほどの存在感を持っています。

「Apache Cordovaとは何か?」「Apacheへ寄贈後も、Adobe側で未だに維持し続けているPhoneGapとは何が違うのか?」そのことについて、古くからCordovaと繋がりを持つアシアル株式会社の田中正裕氏が、2014年6月10日に開催された「第1回Apache Cordovaスーパー勉強会」にて行なった講演が非常に参考になります。

f:id:furoshiki0223:20150204171015j:plain

本記事では、その講演のダイジェストをお届けします。

Cordovaはどのようにして生まれたのか?

Cordovaとは、カナダのバンクーバーに実在する、ストリートの名前です。そしてそのCordova通りには、Nitobiという会社がありまして、PhoneGapというハイブリッドアプリ製品を作っていました。

f:id:furoshiki0223:20150204171016j:plain

PhoneGapは、Adobeさんに買収されたタイミングで、Apacheに寄贈されることになりました。その際、旧Nitobiの開発チームは、そのOSSに自分たちとゆかりのある名前を付けたいという想いを持ち、Nitobi社があるストリート名「Cordova」の名前を与えました。元々AdobeにはCallbackというプロジェクトがあったのですが、1〜2ヶ月ぐらいでCordovaという名前に変わってしまいました。

僕はエンタープライズの受託開発を行なっているシステム開発会社の人間でして、ハイブリッドアプリは僕たちのようなエンタープライズのエンジニアをハッピーにしてくれると思っています。僕自身も、Nitobi社のPhoneGapの時代から付き合いがあり、OSSとなったCorodovaには積極的にコミットしています。日本の端末ベンダさんとの調整なんかも大変なのですが、自分たちが扱っているうちにバグが見つかりますので、その修正を行なったりして、一緒にCordovaを育てています。

OSSとして開発が進められているCordovaと、買収後にAdobeから提供されるようになったPhoneGapの違いは、とても些細なものです。まずは、その違いについてご紹介します。

Cordovaの「コマンド」にどんな違いがあるのか?

f:id:furoshiki0223:20150204171018j:plain

Cordovaで開発をする場合は「cordova」というコマンドを使います。対して、PhoneGapで開発をする場合は「phonegap」というコマンドを使います。どちらも「node.js」で動作するアプリケーションで、どちらも「cordova libs」というライブラリに依存しています。要するに、どちらのコマンドも、cordova libsというコマンド集を叩いているだけのラッパーです。ただ、phonegapにはそこに+αの機能を追加しています。phonegapコマンドは内部的に、cordovaコマンドを使っていると考えて良いでしょう。

f:id:furoshiki0223:20150204171019j:plain

コマンドの違いを、参考程度にまとめてみました。phonegapコマンドは、「PhoneGap Build」というAdobeさんのビルドシステムを持っており、そことのインテグレーションがされています。具体的に言うと、remoteというコマンドがついてまして、例えば、"phonegap remote build"みたいな感じでコマンドを使うと、Adobeさんの提供しているサーバへソースコードを送り、ビルドされて返ってきます。だから、ローカルにビルドできる開発環境を持っている場合は、CordovaとPhoneGap、どちらでも良かったりします。結果的に出来るアプリは、どちらを使っても同じです。

コマンドの使い方について。ハイブリッドアプリは少しややこしかったりします。ハイブリッドアプリでは、HTML5で作ったソースコードを、シェルと呼ばれる、AndroidやiOSなどの各OS専用のソースコードの中に埋め込み(=prepare)、各OSごとのツールでコンパイルして(=compile)、各OS専用のインストールイメージを作ります。このprepareとcompileをくっつけたのが、buildです。buildできたインストールイメージを、デバッグするためにエミュレーター上で動かしたり(=emulate)、デバイスにインストールして利用したり(=install)、という使い方になります。

Cordovaの「定義ファイル(設定)」にどんな違いがあるのか?

「config.xml」という、アプリケーションの定義ファイルがあります。W3CにはWidgetというスペックがあり、ハイブリッドアプリの標準仕様として定義されています。CordovaやPhongapの、独自の仕様ではありません。

f:id:furoshiki0223:20150204171020j:plain

Cordovaのconfig.xmlには、W3Cで定義しているような設定しかありません。対してPhoneGapのconfig.xmlについては、Adobeさんでネームスペースまで作って、大量の設定情報が追加されています。PhoneGapはCordovaと違って、PhoneGap Buildによるリモートでビルドを行う仕組みがあるのが原因です。リモートだと、iOSやAndroidなどの固有のソースコード(シェル)に一切手をいれることができないので、config.xml側で細かいカスタマイズの指定が行えるようになっているのです。

その他、どんな違いがあるのか?

f:id:furoshiki0223:20150204171021j:plain

CordovaコマンドとPhoneGapコマンドで、バージョンが同期していなかったりします。例えば今の時点では、Cordovaは3.5が使えるんですが、PhoneGapはまだ3.4しか使えません。理由は、PhoneGap Build側が対応していないからです。

ネイティブコードの書ける範囲も異なっていまして、PhoneGap Buildはサーバ上でビルドを実行することになるため、シェルに手を加える事ができません。CordovaだとCordova WebViewというのを使って、iOSやAndroidなどの固有のネイティブのコードを埋め込めるのですが、PhoneGapの場合は、PhoneGapプラグイン・Cordovaプラグインを通じてでないと、ネイティブのコードが埋め込めません。

今の説明は、どちらかと言えばCordovaとPhoneGap Buildです。CordovaとPhoneGapの違いというものではありません。PhoneGapの場合は、「PhoneGap Enterprise」や「PhoneGap Developer App」と呼ばれる開発ツールをAdobeさんが提供していたりするので、そういうのが使えたりします。

>>【次回】HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」のこれまでの進化、そして課題とは?

企業にモバイルを適用する方法「MEAP」の全貌を掴む(4) - IBM Worklight編

企業にモバイルを適用するにはどうすればよいのか?そのための答えの一つに、MEAPが力を持ち始めています。

もちろん、MEAPが解決方法の全てというわけではありません。MEAPはベンダ色が強く出るため、毛嫌いする人も少なくないようです。マイクロソフトやアップルのようなプラットフォームを持つベンダも、そのメリットを活かした戦略をいくつか打ち出してはいるものの、やはり、ベンダに強く依存してしまうことに変わりないようです。このあたり、W3Cでも全く動きが無いというわけでもなく、技術革新の途中であるため、オープンな仕様が作りにくいというのが実情にも思えます。

MEAPと呼ばれている製品の本質的な価値はなんなのか?一体企業のどこを変えるのか?そのことを追い求めて、Sencha Space→SAP Mobile Platformとベンダを横並びにして評価してきました。しかしそれも今回で最終回です。今回味見するのは「IBM Worklight」です。

前回の紹介したMobile Platformは、買収を繰り返し色んな製品をくっつけてきたという歴史的経緯からか、モバイルの抱える課題に対する分類学的なものが比較的進んでいました。Mobile Platformというのは製品の集合体に対して与えられた呼び名みたいなもので、いわば「Microsoft Office」みたいなイメージです。UIを作るならSAP UI5を使えだとか、プラットフォームにSAP AppBuilderを使えとか、色んな製品が目的ごとに別れており、しかもこれらの独立性はやや高めだったりもします。(→Wireless Platform2の時代はそうだったので、今もそうなっているだろうという想像ですが。)

ところが、IBM Worklightは、一言で言えば「モノリシック」という印象です。IBMは2012年2月、Worklightと呼ばれるモバイルソリューションのベンダを買収し、その延長線上に今があります。複数の製品を繋げていないからか、Worklightはそれだけで一つの製品として収まっている感じになっています。SAP Mobile Platformに感じるような「製品群」という印象がありません。

f:id:furoshiki0223:20150204171259j:plain(参考:日本アイ・ビー・エム佐々木志門「IBM Worklight@html5j Enterprise Night Seminar」)

IBMは、機能を網羅的に埋め、企業向けクライアント全般の統合を進めようという方針なのか?

IBMのモバイルに関しては「網羅的に攻めている」という感触を得ています。あくまでこれは筆者の愚考としてですが、IBM Worklightは特徴の無いというのが特徴、ある意味「王道感」のようなものを感じています。世の中にはMEAP製品は星の数ほど溢れていて、実装している機能もマチマチです。A製品にはあるのにB製品には無い、またその逆もしかり。そんな状況の中、IBM Worklightは一通り一般的な機能を取り揃えている感じがします。

またIBMは、MEAPに限らず、エンタープライズモバイル市場全体で見ても、その動きには「網羅性」に対する意識が読み取れます。この2014年の夏は、各製品ベンダがエンタープライズモバイルで覇権を握ろうと特に大きな動きをみせているのですが、IBMはその動きが特に派手です。例えば・・・

日本アイ・ビー・エムは6月末に、「MaaS360」と呼ばれるエンタープライズモバイルの管理基盤の提供を開始しました。他社だとSencha Spaceも管理基盤を、クラウドサービスとしてこの秋に出そうという動きがあるようですが、IBMがまさに先手を打ったという次第です。私が思うに、今後このMaaSの機能は、コモディティ化が進み一般的になるのではないかと睨んでいます。当然ですが、日本企業が欲しがるようなオンプレミス版も提供されています。

また、IBMは7月に入り、今度はIBMとAppleでのエンタープライズモバイル分野での提携をアナウンスしました。実はここ最近Appleも、Swiftで世の中を騒がせている裏で、密かにビジネス向けアプリへの進出を始めていました。知らない人が多いというのが実情で、実際に彼らもそこまで大声でPRしてはいなかったように思えます。そんな彼らが、エンタープライズモバイルに全力で、しかも網羅的に攻めよう、どんな切り口でも行ってやろうという感じのIBMと組むのは、世の中が感じているほど不思議なものには思えません。AppleはIBMの持つエンタープライズ製品を活用し、新たな分野の開拓を狙っているようです。

そしてトドメに。彼らはMEAP製品のことを何と呼んでいるか?「エンタープライズ・アプリケーション・プラットフォーム」です。モバイルというキーワードはありません。彼らはモバイルとデスクトップの壁すらも取り払い、企業システムはモバイルファーストな、デバイスの壁の無い世界に進むものと捉えているようなのです。

「企業にモバイルが入るなんてありえない」なんてことが日本の企業の殆どの現場の意見なのかもしれません。しかし、Windows8然り、多くの製品がモバイル前提の作りに変わりつつあります。ブラウザもまた、今ではモバイルにとっての最適となることに注力しています。デスクトップに対する関心は、殆どと言ってよいほど失われています。そうなると、HTML5を含めWeb標準の担うべき役割は、今までネイティブが主役だった領域すらも巻き込み、今まで以上に重たいものになるのではないでしょうか。

f:id:furoshiki0223:20150204171300j:plain(参考:日本アイ・ビー・エム佐々木志門「IBM Worklight@html5j Enterprise Night Seminar」)

開発時は柔軟に、幅広いプラットフォームを扱える方針

もう少し、Worklightについて気になったポイントを語ってみます。MEAPとしての機能は、実際のところSAPなどが出しているのとほぼ横並びで、切り口だけが異なるといった状況です。ただ、彼らはやはりモバイルという前提自体を取り払おうとしているからなのか、WindowsのストアアプリやWebアプリを含めるなど、他のMEAPと比較して、動作対象のプラットフォームは比較的幅広く持たせてあるという印象です。

MEAP製品の多くは、HTML5を活用したハイブリッドアプリが前提のものが多かったりします。しかし、IBM WorklightやSAP Mobile Platformは、ネイティブアプリの開発もできます。ハイブリッドはどうしてもパフォーマンスに課題を抱えがちなので、こうした問題に対する逃げ道を作っているわけです。もちろん、ハイブリッドアプリだからこそできるような、ワンソースでAndroidからiOS、Windows Phoneまで、一通りのネイティブアプリが作れてしまうという大きなメリットは失われてしまいます。企業向けシステムを、わざわざネイティブで作る必要性は年々失われつつあるように思えますが。

f:id:furoshiki0223:20150204171303j:plain(参考:日本アイ・ビー・エム佐々木志門「iOS/Android/Windowsストア・アプリのハイブリッド開発における限界と可能性 」)

あと、とても地味な情報ですが

始めるだけなら、もの凄く楽です。が

f:id:furoshiki0223:20150204171301j:plain

f:id:furoshiki0223:20150204171305j:plain

EclipseのMarketplaceで「Worklight」と検索すれば出てくるし、プロジェクトもこんなんでいいのか?というほどにさくっとできてしまいます。Eclipseってもっと、面倒なことがいっぱいあるという印象しかなかったので、私的は結構目からうろこでした。

f:id:furoshiki0223:20150204171302j:plain

ビルドするだけなら特に説明を読まなくてもサクサクっといけるという印象です。気持ち悪いぐらいに、手軽な感じがします。UXの求められる時代に、説明書なんてついてくる製品がまだ存在するのか?というツッコミはさておき。Eclipseはセットアップに時間がかかるという問題があり、最近はVisual StudioやIntelliJにシェアが奪われつつあるようですが、流石は開発元のIBMだけあって、このあたりは頑張っているという印象です。

ただ、MEAP、・・・というよりHTML5によるハイブリッドアプリ開発全般の問題点なんですが、デバッグが困難という問題はまだまだ改善を待たなくてはけないようですね。今後多くの業務系開発者が関わる可能性が高い分野なので、技術進化が待ち遠しいところです。

最後に

5ヶ月にも渡り続いたMEAP特集も、これで終わりです。実は、この記事の連載中にも日本国内の色んなところでMEAP製品が出てきています。私の感覚では、30製品ぐらいゴロゴロと転がっているという印象です。というか、私の所属している会社もMEAPっぽい何かを売っていたりするので、大手ベンダだとどこでも何かしら持っているような印象があります。世はまさに、モバイル戦国時代といったところでしょう。

モバイルで企業向けシステムはこれからどう進化していくのか、そのことを探っていくため、翔泳社のDevelopers Summit 2014 Summerにて、パネルディスカッションを開くことにしました。Oracle、Microsoft、SAP、IBMと、モバイル製品にガンガン投資し、これからの企業向けシステムの進化を促そうとしている製品ベンダを揃えています。面白いトークができるのではないかと思っていまして、今から私もワクワクしています。ご参加下さい。

企業にモバイルを適用する方法「MEAP」の全貌を掴む(3) - SAP Mobile Platform編

企業にモバイルを導入するにはどうすればよいか?・・・その答えとして、2012年ごろから注目を集めているのが、「MEAP(Mobile Enterprise Application Platform)」と呼ばれるモバイルファーストな製品群です。

本連載は、IBMやSAP、Senchaなど、複数の企業が提供しているMEAP製品を少しずつ味見して、MEAPとは一体何なのか、企業のシステムの何を変えようとしているのか、その全体像を掴んでみようという企画として始めてみました。第3回の今回、そろそろ本質みたいなのが見えてきてもいい頃でしょう。

さて、今回探りを入れるのは、製品ベンダ「SAP」です。彼らが、MEAPに対してどのようなアプローチを試みているのか、探ってみましょう。前回紹介したSenchaはいわゆる、フロントエンドのリッチ化、HTML5によるSPA(Single-page Application)のテクノロジーで高い価値を提供している製品ベンダでした。彼らは言うまでもなく、フロントエンドに閉じた表現力、ポテンシャルの向上で勝負に出ていました。

しかしSAPは、いわゆるビジネスパッケージの製品ベンダ、彼らのビジネスはサーバ側での価値提供にあります。全く真逆を行くわけで、同じMEAPという枠の中でどういう面白さを追求しているのかが気になるところです。

SAPのMEAP製品が実現したいこと、彼らが企業向けシステムで実現したいことは何か?

少し歴史を振り返ってみましょう。SAPは2010年5月にSybaseを買収し、その2年後の2012年6月にはSycloを買収し、企業向けモバイルのノウハウを得ています。2010年の買収は、他の大手ベンダに比べると比較的早い段階です。ガンガンと買収を繰り返し製品を繋ぎ合わせ、「Mobile Platform」と呼ばれるMEAP製品をリリースするに至っています。そして2013年の秋に、彼らはMobile Platformのバージョン3.0をアナウンスしました。

しかし、その中身を覗くと、これまで出していたものとはまるで別物かのように姿を変えていました。エンタープライズモバイルは、今まさに技術革新の真っ最中ということもあり、かなり混沌としています。当然、SAPのMobile Platformも例外でなくまさに進化の真っ最中で、マニュアルの日本語化もなかなか追い付いていないことから、中の人的にもフルパワーで走っているのだろうということが想像できます。

繰り返しますが、IBMにせよOracleにせよ、企業向けモバイルソリューションは、大雑把に似たような機能を持っています。良い機能はみんな互いにマネしあって、コモディティ化が進んでるわけです。MDM(モバイルデバイス管理)やHTML5(ハイブリッド開発)、アクセス管理などが代表的でしょう。ただ、同じような機能なのにも関わらず、どの製品ベンダもMEAPという表現をあまり好んで使いません。そこには、製品の良さ・差別化されている点を強調したいという狙いがあるようです。

Oracleは「モバイル開発フレームワーク」なんて呼び方をします。対して、IBMは「エンタープライズ・アプリケーション・プラットフォーム」という表現を使っていたりします。MEAPをこれからどのように発展させて行きたいのかが、なんとなく理解できる呼び名になっていますね。

では、SAPはMEAPを何と呼んでいるでしょうか?彼らはMEAPを、「BYODソリューション」と呼んでいます。BYOD、すなわち、私用端末の企業内利用という面でのメリットを強く強調しているのです。欧米だとBYODはそれなりに浸透しており、私用で使っているようなモバイル上でも、社内システムにアクセスするだけのセキュリティ保護機能を必要としていたりします。SAPの製品は、こうしたニーズを狙ったものと言えるでしょう。

しかし、日本の場合、セキュリティ的に厳しく、BYODをそのまま実現できないことも多いようです。個人のモバイルを活用するというよりも、企業側が個人にモバイルデバイスの貸出を行うという流れに進んだようです。となると、BYODという言葉は、「プライベートな場に持ち出すような端末でも、安全に使えるほどにセキュリティを堅牢にできる」という意味合いで、使われるのが妥当に思えます。

f:id:furoshiki0223:20150204171758j:plain(SAPジャパン 井口 和弘「企業におけるHTML5を用いたスマートデバイス向けアプリ開発」より)

止まない、オープン技術の侵食

Webアプリのフロントエンド、HTML5やJavaScriptライブラリにはオープンソースの文化が根付き、ベンダロックインを激しく嫌う傾向にあります。JSライブラリあたりは特に、基本はOSSであることを望む傾向にあるようです。仮に有償の製品であっても、jQueryなどのOSSとの親和性が高いことを望む傾向にあります。

また、MEAPが目的とするところの「モバイル対応」についても、企業はあまりそこに予算をかけられないという課題があります。それこそ、新しくビジネスを作り、そのためのシステムを作ろうというのであれば予算がつくかもしれません。しかし、既に動いていて、ビジネス的に安定の時期に入っているようなシステムに追加予算を出すのは難しいというのが、多くの現場にとっての悩みなったようです。こうした背景から、営業力を高める上で「既存資産の流用」を望む声に答えるのが、重要な命題となりました。つまり、極力はHTML5に準拠したブラウザのような、オープンプラットフォームであることを追求するようになったのです。

SAPのMobile Platformはこのあたりの世の中のニーズを吸収してきた歴史が、はっきりと表れている製品だったりします。実はほんの少し前まで、UI周りをゴリゴリのベンダロックインさせ、プラットフォームも既存のWebシステムをそのまま流用させることを想定できていませんでした。しかしここ最近、特にMobile Platform 3.0からは「オープン化」を重要なテーマと捉え、様々な方向からオープンな技術との融合を狙っています。

例えば、Mobile Platformの一部をOSSとして公開したり、プロトコルにODATAを採用したり、既存のWebアプリをそのまま移植できるようにコンテナの汎用性を高めるなど、着々とオープン化を進めています。SAPと言えば、コテコテのベンダロックインな製品という印象が強かったりしますが、MEAPに関して言えば、出来る限りそうならないよう最善の努力を行なっているように見えます。

SAPからみると、オープン系の色が強い今のWebのフロントエンドはそれだけ異質に見えるのかもしれません。しかし、昨今のマイクロソフトもそうですが、OSSの普及で無償であることが前提のソフトウェア製品でどう儲けるかという、OSS前提のビジネスモデルの検討も進めていかなくてはいけません。そのことに、彼らは苦戦しているようにも見えます。

f:id:furoshiki0223:20150204171759j:plain(SAPジャパン 井口 和弘「企業におけるHTML5を用いたスマートデバイス向けアプリ開発」より)

統合化されたツール

急激に買収を重ね、強化を重ねたモバイル向け製品は、問題を抱えることになります。彼らは、Sybaseの持つ「Unwired Platform」「Mobiliser」、Sycloの「Agentry」へ、SAPの「NetWeaver Gateway」と、3つの異なる企業の製品を短期間のうちに統合することが求められたため、ツールにややツギハギ感が出てしまいました。しかしそれも、進化の中で改善されたようです。

SAPの製品は、UI開発のツールからプラットフォーム、バックエンドまでトータルな開発が支援できるという特徴を持っています。これはIBMのWorklightでもできることではあるのですが、筆者の所感として、全体的なバランス感覚、バックエンドとの接続周りには比較的強いという印象を持っています。インフラジスティックスのIgniteUIもそうですが、汎用的な製品とエンタープライズ製品の間で差別化を図る際、この手のデータ変換系を充実化させるベンダ製品が多いように思えます。フォームや表の出力を主とする企業向けシステム固有の特徴に、合わせて行った結果そうなったということでしょう。

f:id:furoshiki0223:20150204171800j:plain(SAPジャパン 井口 和弘「企業におけるHTML5を用いたスマートデバイス向けアプリ開発」より)

さて、SAPはこのくらいにしておき、最後にIBM Worklightについて取り上げてみましょう。

▼ 目次

  1. そもそもMEAPとは?
  2. Sencha Space
  3. SAP Mobile Platform
  4. IBM Worklight

▼関連
モバイルで企業システムをどう変えようとしているのか、ベンダ4社を集めその価値を問います。夏サミ2014、私はモデレーターとして参加します。

企業にモバイルを適用する方法「MEAP」の全貌を掴む(2) - Sencha Space編

Senchaはこれまで、SPA(Single-page Application : 単一ページアプリケーション)を実装するためのフレームワークやツールを提供し、プラグインに頼らないリッチアプリケーションの開発手段を提供してきました。モバイル向けには「Touch」、ノンプログラマー向けには「Architect」と、多数のフロントエンド開発の製品をリリースし、Web標準技術には高いノウハウを持っています。

その彼らが、2月7日のブログにて、「Space」の製品版リリースをアナウンスしました。この製品が、企業のスマートデバイス向けのアプリが抱える課題とリスクに対し、Senchaが出した答えのようです。本記事では、SenchaがリリースしたMEAP(Mobile Enterprise Application Platform)の製品、Space ver.1.0の中身を追ってみます。

★ Spaceのアーキテクチャ

Spaceは、前章で述べた、HTML5世代のモダンなMEAPアーキテクチャモデルをベースに採用しています。SpaceはモバイルデバイスのOSからアプリを隔離する環境であり、セキュリティやアクセス制御が行える箱の中でアプリを動作させることで、企業向けシステムに必要な要件をクリアさせます。

f:id:furoshiki0223:20150204172027j:plain

開発したアプリは、モバイル上では専用のアプリ「Space」上から起動します。

f:id:furoshiki0223:20150204172026j:plain

Spaceの特色

★ Space固有の特徴

Spaceの特色としては、Space内で動作させるアプリ同士で通信させるための独自機能「Invoke API」を提供していることでしょう。Invoke APIは、Space内の限定されたアプリ同士を、フォワグラウンド・バッググラウンドを通じ通信させることができます。

Senchaは、彼らのコアコンピタンスであるフロントエンドのリッチ化技術を活かし、サーバに依存しないデータ通信の仕組みを強みにしようとしているようですね。彼らはサーバ製品を持たないため、フロントエンド側で高いポテンシャルを得ることに、熱心なようです。

f:id:furoshiki0223:20150204172028j:plain

★ アクセス制御と集中管理の考え方

Spaceは他の類似製品と同様に、Management Concoleを通じて、グループベース・ユーザベースによるアプリの有効・無効を制御することができます。これは非常に一般的な機能であるため、別の機会に解説を行います。
f:id:furoshiki0223:20150204172029j:plain

★ セキュアなデータの記録

Space上のWebアプリケーションは、一般的なブラウザ上で扱うものよりも強固なセキュリティでデータを扱えるよう、専用のAPIを提供しています。ファイルの操作であれば「Secure File API」、KVS形式のデータ操作であれば「Secure Local Storage」を利用することになります。

★ 開発のワークフロー

開発は、Senchaの開発ツールであるSencha cmdを利用します。SenchaはExtJSなどのフレームワークをベースにアプリケーションを作りますが、Space固有の機能追加のため、フレームワークへSpaceのプラグインを追加して利用することになります。

開発プロセスとオープン性に適用の価値を求める

以前は単なるUIコンポーネントだったSenchaも、MVV*なフレームワークへ進化。独特のフレームワークゆえにそれなりの学習が求められるものの、開発のワークフローにしっかりと踏み込み、設計からテストフェーズまで一貫した思想に沿って開発させることで、エンタープライズでの活用に道を広げようとしています。他の製品には無い、彼らのアイデンティティでしょう。

また、Spaceに関して言えば、比較的オープンという特徴を持ちます。勿論、Spaceというプラットフォームにアプリを縛ってしまうという制約を持ちますが、MEAPの製品のいくつかは、サーバサイドの技術にまで影響を及ぼし、ベンダ製品に縛るものもあります。こうした中、Senchaという箱でしっかりとカプセル化し、サーバ側は比較的制約は緩くRESTライクな機能があれば動くのはメリットとして大きいように思えます。

Spaceは現在、10ユーザまでは無償で利用できる試用版を提供しています。日本語化はまだまだ甘いと噂されますが、Xenophyが解説ビデオにまで字幕を入れるなど、翻訳そのものの動きは活発のようです。

このビデオ、本記事のテーマである、企業システム向けに求められる隔離環境「MEAP」のメリットついて、非常に的確な解説を行っているためここで紹介しておきます。

Introducing Sencha Space - 日本語字幕付き from Xenophy Japan on Vimeo.

SenchaのSpaceについては、これで以上です。

次章はSAPについて取り上げます。SybaseやSycloといった企業を買収し、モバイル向けソリューションへの拡大に意欲を見せる彼らが、どのようなプラットフォームを提供しようとしているのか。その中身に、触れてみましょう。

企業にモバイルを適用する方法「MEAP」の全貌を掴む(1) - そもそもMEAPとは?

企業でのモバイル活用は関心の高いテーマです。昨年は、BYODという言葉が持て囃され、こちらもそれなりには関心が持たれました。

しかし、実態を見てみるとどうでしょう。InformationWeekが1月17日に公開した「5 Big Business Intelligence Trends For 2014」の主張からは、国外でもモバイルは企業内へ上手く浸透出来ていないという印象を受けます。万国共通して、モバイルの適用は一筋縄ではいかないようですね。

様々な異論が飛び交う「モバイル」と「BYOD」の2つのムーブメントですが、そのソリューションは高度化が進んでいます。企業向けシステムの構築方法、ITアーキテクチャの設計方法に変化を齎すような新しい流れが生じつつあり、企業向けモバイルアプリに一つの市場を作ったようです。

MEAP(Mobile Enterprise Application Platform)。言葉は2008年と歴史こそ古いですが、技術としての安定化が進み、またHTML5の登場で新たな進化の道が見つけられつつあります。このプラットフォームについて、これから4回の連載に渡り、その可能性を追ってみます。

モバイルではアプリを「隔離」させる

業務系のWebアプリについて、従来のデスクトップ型デバイスでは、セキュアな環境下でクライアントを動作させることを保証することで、セキュリティリスクを最適化させてきました。ブラウザの仕組みにせよ人的な脆弱性にせよ、「場所」に対して一定のセキュリティを確保することで対策してきました。

統合管理によるアクセス管理についても、Windowsが普及していたことから、Active Directroyの活用に改善が進められてきました。パフォーマンスも、前世代的なWebアプリは、主としてサーバサイドにフォーカスされていました。

ところが近年、モバイルの活用が求められ、企業システムは従来のデスクトップ型には無い独特の課題に悩まされ始めました。代表的なものとしては、以下が挙げられるでしょう。

パフォーマンス モバイルデバイスのハードウェアリソース不足。不安定な通信回線。
セキュリティ 持ち出し運び可能なハードウェア。平文では扱えない記録・通信データ。
マルチOS iOS、Android、Windows RTなどの複数のOSの混在。
アクセスコントロール グループベース・ユーザベースによる、アプリ・データへのアクセス権限付与の難しさ。

これらの問題に対して、BYODという切り口から解決方法が探られたようです。そして結果として、エンタープライズ向けのアプリは、モバイル上で扱う場合、「隔離された環境」の上で動作させてしまおうというアイデアが広がりを見せました。この仕組みは、どの製品もかなり類似した機能性を持つ傾向にあります。

共通点としては、以下のイメージです。

f:id:furoshiki0223:20150204172324j:plain

モバイルに隔離環境専用のアプリをインストールし、その上で業務で使うようなアプリを動作させる仕組みになります。アプリは、ワンソースでクロスプラットフォームに動作させることを目的として「ハイブリットアプリ開発」を活用します。従来のブラウザでは不足していた企業向けシステムに必要な機能、例えばセキュリティ・アクセス管理なども、OSから隔離されたこの環境に実装されます。

どのように開発するのか?

HTMLやJS/CSSのコーディングを行い、コンパイル(パッケージングとも呼んだりもする)という手続きを踏み、エミュレート環境や実端末上にインストールされます。デバッグは、この上で行うことになります。

フロントエンドは文化として、開発にはIDEに限定されず、オーサリングツールやエディタ+タスクランナーなどの多様なツールにより開発されます。隔離を行う環境は、独自のプラットフォーム上でアプリを動かす必要があるため、利用ツールやライブラリに多少の縛りを受ける傾向にあるようです。

f:id:furoshiki0223:20150204172325j:plain

どのように運用するのか?

企業向けの場合、IT管理者による業務アプリの管理・監視が必要とされるでしょう。これを実現するため、管理コンソール側から各隔離環境内のアプリの制御を行う機能を提供します。

f:id:furoshiki0223:20150204172326j:plain

どんな製品があるのか?

さて、一通りの概念的な部分の説明が終わったところで、ここからは具体的なソリューションに目を向けます。探せば色々出てくるのでしょうが、今回は以下3つの製品を探ってみましょう。

次回は早速ですが、Sencha Spaceをテーマとし、中身について触れていきます。

▼ 目次

  1. そもそもMEAPとは?
  2. Sencha Space
  3. SAP Mobile Platform
  4. IBM Worklight

このブログの筆者について

川田 寛

コンテンツサービスの開発や運営代行を専門とする集団「株式会社ブートストラップ」の社長です。ネットではふろしきと呼ばれています。

2009年にNTTグループへ新卒入社し、ITエンジニアとしてクラウド技術・Web技術の研究開発と技術コンサルティングに従事。2015年よりピクシブに入社し、エンジニアリングマネージャー・事業責任者・執行役員CCOなど、様々な立場からコンテンツサービスの事業づくりに関わりました。2021年にメディアドゥへVPoEとしてジョインし出版関係の事業に関わったのち、2023年に独立しています。

関わってきたインターネット事業としては、ECサービスのBOOTH、UGCプラットフォームのpixiv(主に海外展開)、制作ツールのpixiv Sketch、VR・VTuber関連ではVRoid、Wikiサービスのピクシブ百科事典など、10を超える多様なCtoCコンテンツサービス。また、NTTドコモのすご得コンテンツ、メディアドゥのWeb3サービスであるFanTopなど、いくつかのBtoCコンテンツサービスにも関わってきました。

幸運なことに、私はコンテンツに関係する幅広いインターネットサービスのテクノロジー&ビジネスの知識を得ることができました。これを日本のコンテンツ発展に役立てたいと思い、株式会社ブートストラップを創業しました。

このブログでは現在、出版社やIPホルダー、ライセンサーといったコンテンツに関わる人々に向けて、インターネット事業に関するTipsや業界内のトレンドなどの情報を発信しています。私と話をしてみたいという方は、以下のフォームより気軽にご連絡ください。

お問い合わせフォーム