平成27年度分科会「ハイブリッドアプリ」

平成27年度分科会「ハイブリッドアプリ」

こんにちは! 久々登場の関根です。 突然ですが、一粒で二度おいしいものは何もアーモンドグリコだけとは限りません。とまぁこう切り出せば皆さんならもう何の話かピンと来ていますよね。その通り!もちろんハイブリッドアプリの話です。というわけで今回は弊社分科会の平成27年度最優秀賞を頂きました「ハイブリッドアプリ分科会」の活動を通して私たちが学んだ事を少しだけご紹介したいと思います。

ハイブリッドアプリとは?
ハイブリッドアプリとは、HTML, Javascript, CSSといった本来Webアプリケーションの開発に使用する技術でつくられたモバイルアプリのこと。カメラやバイブレーターなどの端末内蔵機能にアクセスする事も可能で、ワンソースでAndroid,iOSを初めとする様々なプラットフォームに対応させる事ができる。

 

活動内容

ハイブリッド分科会の活動は下記のような方針で行いました。

  • 最終発表までに一人一つアプリを作る。
  • 作り方や作業ペースは全て各自の自由。
  • 専用の技術フォーラムを設立し、培った知識を全員に共有する。

「とにかくライバル達と違うことをやれ」
これらの活動方針はそういったコンセプトのもと考案しました。弊社分科会活動で実施されているような、多人数からの投票による評価方式では、まず他の候補と比べて明らかに異質であるという事、即ち『目立つ』という事が大きなアドバンテージになると考えたからです。もちろん考え無しに奇をてらうだけではただの変態集団になってしまうわけですが、もともと私たちは他の分科会が持っていないような側面を初めから備えていたので、そこを全面に打ち出した活動をアピールすれば、最後の投票戦をより優位に運ぶ事ができるだろうというのが今回の作戦でした。その結果として当分科会が実際に良い評価を獲得したという事実は、この競争社会のあらゆる場面で役立つ重要な実績と言えるでしょう。時にはあえて真っ向勝負を避け、自分たちの土俵の内側の狭い範囲だけに勝負を展開する。そんな貴重なノウハウを学べた事が、本年度の分科会活動を通して我々が獲得した一つの成果なのかもしれません。 ハイブリッドアプリ分科会活動紹介 分科会活動紹介で使用したハイブリッドアプリ製の発表資料。全体がカルーセルパネルになっていて、左右にスライドしてページを送る。

ハイブリッドアプリについて

さて、我々は分科会活動として実際に手を動かしてハイブリッドアプリの製作を行いました。昨今マルチプラットフォーム展開を視野に入れたモバイルアプリを製作するにあたり、ハイブリッドアプリの採用を一度は検討される開発者が多いと聞きます。しかしながら、開発メンバーが余程フロントエンドに特化でもしていない限り、ある意味邪道なハイブリッドには安易に手を出しづらいという状況も少なからずあると思います。そこで、今回の活動を通して我々が感じた「ハイブリッドアプリって実際どうなの?」といった所を簡単にご紹介したいと思います。

ハイブリッド向けと、そうじゃないアプリがある。
「ネイティブで行くか、ハイブリッドで行くか」という問題はこれからのアプリ開発で我々が最初に選択しなければならない重要な命題となるでしょう。これからその岐路に立つ予定のある皆さんにぜひ覚えておいて欲しい点が二つあります。

■パフォーマンスがほとんど問題にならないパターンと、致命的に問題になってくるパターンがある。
私が独自に行った調査によると、モバイルアプリ開発者がハイブリッドを選択しない理由第一位は「パフォーマンスがダメらしいから」です。確かにかつてはそうだったと言わざるを得ないのですが、実を言うと、現在はWebViewの進化に伴ってパフォーマンスの問題はかなりの所まで改善されてきているのです。ある程度の規模までなら、作り方さえ間違えなければネイティブと比べてもなんら遜色ない動作を実現する事が可能でしょう。しかしながら、越えられない壁というのもやはりまだ存在しています。要因を一概に挙げる事はできませんが、アプリの複雑さが増せば増すほど、解決困難なパフォーマンスの壁にぶち当たる可能性が高くなると考えた方が無難です。例えば無限スクロールなどでDOMがガンガン増殖していくようなアプリなんかは要注意です。

■ワンソースでマルチプラットフォーム対応と言っても、完全に同じ動きをしてくれるとは限らない。
ハイブリッドアプリの一番のメリットは何と言っても複数のプラットフォーム向けのアプリが同時作れる点にありますが、各WebViewの特性というものがやはり存在していて、完全に同じ動きをしてくれるとは限らないのが現状です。例えばAndroidユーザーはあまりご存知ないかもしれませんが、iOSのWebViewにはDirectionalLockという機能があって、縦方向にスクロールしている間は横方向のスクロールがロックされ、横方向にスクロールしている間は縦方向のスクロールがロックされる設定にデフォルトでなっています。もし画面を縦横無尽にスクロールさせたい場合はiScrollなどを利用して疑似スクロールで対応するか、最悪色々な事を諦めてネイティブ側からWebViewのプロパティを変更するかしかありません。対してAndroidのWebViewにはそういった特性はありませんから、もしもAndroidだけでデバッグしながら開発していたらこの問題には最後まで気付けません。ハイブリッドで作ったからと言ってドヤ顔でiOS端末に入れても思った通りに動かなくて絶望、なんて事は大いにありえるのです。というわけで、開発の過程では必ず対応予定の全プラットフォームで逐一動作を確認するようにしましょう。

ハイブリッドアプリのここがGOOD
では、ハイブリッドアプリを採用するメリットにはどんなものがあるでしょうか。我々なりの解釈を以下にご紹介します。

  • 複数のプラットフォームに対応したアプリを同時に開発できる。
    最大のメリットはなんと言ってもコレ。
  • デザインの自由度が高い。
    HTML+CSSの最強なところ。デザイナーへの依頼も容易。
  • Webの開発ノウハウをそのまま活かせる。
    JavaやSwiftを勉強しなくても大丈夫。
  • Javascriptの無限とも言える拡張性を利用できる。
    驚異的な速度で進化する数々のライブラリ群をダイレクトに取り込める。
  • 単純なアプリならパフォーマンスは言うほどネックにはならない。
    きちんとツボを押さえれば恐るるに足らず。

まとめ -最も効率の良いモバイルアプリの作り方-
結局のところ、モバイルアプリを作るうえでは、「ハイブリッドアプリの方が絶対にいい!」とも、「ネイティブの方がいいに決まってる!」とも言えません。ハイブリッドアプリで問題なく作れるのにわざわざ苦労してプラットフォーム毎に個別に作るのはあまりにも非効率ですし、かと言って欲しいアプリがなんでもかんでもハイブリッドで作れるわけではありませんからね。しかし、もしあなたがモバイルアプリ開発者で、ネイティブでしか開発の経験が無いのであれば、何はともあれ一度ハイブリッドでサクッと作ってみる事をおすすめします。もしかすると、今まで苦労していた開発作業が信じられないくらい簡単にできてしまうかもしれませんし、或いは思いもよらぬ所で落とし穴にハマるかもしれません。重要なのは、ネイティブとハイブリッドの両方の開発手法を、均等なステージに乗せて検討するための目を養う事です。一体どんなアプリがハイブリッド向きで、どんなアプリがネイティブ向きなのか、それを『見極める』ことこそが、現在のモバイルアプリ開発において非常に重要なスキルとなっていると言って間違いはないでしょう。