ブログ

ハイブリッドアプリはWEB開発者のメシア(救世主)となるか?

hibridapp
正直に言います。私は昨今のWEB業界のトレンドについていくのに疲れ気味です。
 
もともとコーダーだった私は、かれこれ10年以上HTMLというものに触れてきて、当初は単純なコードが画面を作り上げていく事に喜びを感じていましたが、このたった10年余りで、その頃の私が想像もしなかった世界へと変貌を遂げました。
「コーダー」という一般的な職業は、いつの間にやら「マークアップエンジニア」という名に取って変わり、その後「フロントエンドエンジニア」となり、その過程で求められるスキルも、大幅に多くなりました。


あくまで私の勝手なイメージによるこの10年の変貌

〜2000年

今生存してるとネタにされちゃうよ。原始人的WEBデザイナー兼コーダー:

corder
時代はテーブルレイアウト。「SEO?なんだそれは。大きな画像はPCが固まるから切りきざめぃ!
画像と画像の間にズレ?そんなものはspacer.gifで埋めておけ!」

〜2005年

OSハックのスキルが不可欠。CSSに目覚めたコーダー:

markup
cssデザインが主流になりつつも、各OSで見え方が全然違うという時代。
「IE6爆発しろ」が定番のセリフですね。

〜2010年

原点に帰ろう。真面目なマークアップエンジニア:

front
ここにきて原点のコードを見直そうという動きが活発に。W3Cを片手に謎のXHTMLと共に生きていこうと決めた厳かな時代

〜現在

万能な力を手に入れたフロントエンドエンジニア:

front2
「そ、それは神(バックエンド)の領域では…!?」な部分まで網羅するエンジニアも多く、
何をするにも黒い画面(ターミナル/コマンドプロンプトの事)をポーカーフェイスで操るタイプが現在の主流です。時代は進化しましたね。


最近のフロントエンド界隈は、落ち着かないというか、どんどん成長していて、追いかけて追いかけてもつかめないものばかりで、やっと覚えたスキルでさえも、翌年くらいには

「●●はもう古い!最新トレンドは▲▲の時代へ!」

みたいな血も涙もない薄情な世界であります。生き抜けるのは、トレンドに敏感で柔軟な知識を持ったものだけなのか…!

そしてこの世界は近年、また新たな試練を我々に与えています。

「アプリ開発」という未知の領域へ誘いはじめたのであります。

…大げさですか?すいません。

元々は、上記でいう原始人コーダーから始めた私。
これくらいのインパクトでデジタルという名の黒船が襲来してきているのであります。

もうしばらくお付き合いください。
 

HTML5で作るアプリってどうなんですか?

アプリ開発と一言で言っても、色々な作り方や用途があり、どこから手をつけていいかわからないですよね。

iPhoneがメインの日本市場を狙うのであれば、iOSを優先して、まだまだ伸びシロのあるSwiftがいいし、object-Cも基本的な事はおさえておいた方がいいかな?
あーでも海外進出を目標にしたアプリであれば、先にAndroidを動かせるようにJavaかな。。

などと、すぐ必要なのはわかっていても、勉強コストを計算したりして、悩ましい問題に直面するわけです。
 

そして怒りがこみ上げてくるわけですね。
 

なんで統一してくれないのかと。
一つのソースで動いてくれよと。

怒りと悲しみを抱えた私の前に、ある時からFBで頻繁にこんなタイトルを目にするようになりました。
 
「HTML5モバイルアプリ 」

「ウェブ技術でアプリを公開しよう!」

「1ソースでOSを気にせず効率的にアプリ開発!」
 
そ、そんな事が可能なのか・・!
 
HTMLでアプリを作る。すなわちハイブリッドアプリと言われるものですが、もちろん今までも可能ではあったとはいえ、この混沌とした時代にハイブリッドアプリは手段として使って良いものなのかどうか?

関連セミナーや、書籍など、色々見てまわって、私なりに感じたハイブリッドアプリというものをまとめてご紹介したいと思います。
 
ふう。やっと本題です。
 

これはいい!と膝を打った、ハイブリッドアプリのメリット

ワンソースのHTMLでいい。

もうこれにつきます。
私でも簡単に修正できて、普段使ってるエディタ環境でできてしまう。いい。

すでにあるWEBサービスだったら簡単にできる?

ECサイトや、WEBメディアとの相性はとても良く、そのままアプリとして見せたいという要望には答えやすいのではないでしょうか。ただ、後述しますが、アプリっぽくしたい要望が多々ある場合は、要検討です。

プラグイン(SDK)が簡単で魅力的

日本発のハイブリッドアプリ開発専用プラットフォームMonacaのセミナーでは、様々な企業からプラグインの紹介があって、簡単に取り入れられるサービスの多さに感心しました。通常フロントでは面倒になる、会員登録後の管理やアプリのキモとなるプッシュ通知の細かい設定、アプリのアナリティクスも豊富且つ簡単な設置で、「簡単」「3ステップ」みたいなワードが大好きな私としては、とても魅力的に感じました。
 

逆に え、それってどうなの?と思った事

もっさり感がぬぐえない?

以前から言われている事のようですが、ネイティブに比べるとどうしても動きが重いらしいのです。
セミナーなどでもそのあたりを質問してみたのですが、返答は

「HTMLのコードは変わらないが、デバイス自体のスペックが軒並み上がったので、今は大丈夫!」

でした。まぁ、確かにその通りなのですが、なんとなく腑に落ちなかったのは私だけでしょうか。。

昔はダメで今は大丈夫な理由は?

上記のデバイスのスペックが良くなったので動きに問題がなくなったという理由と同時にjavascriptのフレームワークが進化してアプリ開発しやすくなったという事があるようです。

例えば、みんな大好きなjqueryでも、プラグインによっては、重たくなる要因の一つで、ハイブリッドアプリに適した今の主流であるサーバーサイドと連携できるAngulerやReactを使用する事で、WEBサイトを作るときよりもさらにサクサク快適に動かせる事を念頭に置きながら、開発する事が大事になってきます。
それは言い換えると、どのjavascriptフレームワークをメインに使用するか検討が必要になり、アプリにする予定の既存のWEBページも見直す必要があるので、案件によっては考えるポイントになると思います。

え。結局ネイティブいるの?

これは私がハイブリッドアプリを過信していただけの話ですが、アプリっぽい動きは、あーして♪こーして♪なんて言っていると、それはプラグインをネイティブコードで作らないとダメですって事になるので、あまりにそれが多く発生すると、「で、これってハイブリッドで開発した意味ある?」って事になりかねません。どういう仕組みにしたいのか?将来的にどういうアプリにしたいのか?ちゃんと決定しておく事も大切です。

え。デバッグがネイディブよりしんどい?

これも過信していただけの話ですが、デバッグ(動作確認・修正)は結局、各OSでするわけで、ワンソースだからって簡単になるわけではないのです。もっと言うと、ワンソースであるが故に、片方のOSのこのデバイスだけおかしいという事もあり得るわけで、修正してデバッグしたら、今度はこっちのOSでおかしい…という恐怖のスパイラルに陥る可能性があると。おぅ。。

 

こんな案件が来たら、こうディレクションする

上記を踏まえ、こんなクライアントからの要望だったら、現時点ではこう提案するぞっていうモデルをあげてみました。
 

納期ギリギリ!でもアプリが欲しい!

説明してハイブリッド:
インタラクティブな動きを求めない、社内の連絡アプリや、WEBメディアのニュースフィードなどであれば、今後の方針なども十分ヒアリングした上で、ハイブリッドをお勧めできます。

今のWEBメディアをアプリで見れるようにしたいだけ。

ハイブリッド:
ゴリゴリ動かすタイプのWEBメディアでなければ、工数もそこまでかけずにアプリにする事が可能です。そんなに早くできるの!と喜ばれる可能性もあるため、おすすめです。

簡単なゲームを入れたい

ネイティブのが良さそう:
HTMLでもできるゲームも多々ありますが、グラフィックな動きが多くなるとユーザーの気持ちもゲンナリする重いゲームアプリになりかねません。避けるためにもネイティブ前提で話を進めた方が良いと思います。

iphoneもAndroidも両方同じ仕様でいいから同時に公開したい。

ヒアリングしてハイブリッド:
内容によりますが、上記で出てきたようなもの(動き控えめな機能的アプリ)であれば、ハイブリッドをおすすめできると思います。内容次第では実は、ネイティブで作った方が簡単だったという事もあり得るので、やはりヒアリングが重要になります。

音楽と動画をメインにしたアプリが作りたい

ネイティブ:
実は、自社サービスとして検討中の音楽関連アプリにハイブリッドが使えないかなと調べ始めたのですが、OSの音源の取り扱いの差や、音を出しながら違うアクションをするというアプリ的な動作がとても大変だという事がわかりました。ここは素直にネイティブ環境での開発が良いです。(もし、これは解決できるよっていうエキスパートがいらしたら、竹下にそっと耳打ちしていただけるとありがたいです。)

えらい人がこれから何を言い出すかわからないけど、とりあえずアプリ作りたい

ネイティブにしておいた方が無難:
そのえらい人とやらが「うーん。ここはもっとビヨーンと感じにならないの?」とか「ゲーム入れたらお客さん喜ぶんじゃない?」とか、どう転ぶかわからない場合は、ネイティブでしっかりと方向を決めていくべきだと思います。

 

日進月歩。まだまだ私たちの旅は終わらない

楽がしたくてハイブリッドアプリに目を向けてみた私ですが、なるほど選択肢としては、まだまだ万能ではないにしろ、当たり前に選んで良い時代になったのだと感じました。
 
選択肢に入るという事は、WEB開発者も、これからはアプリ開発が本当に身近になるという事で、ますます原始人レベルの方(いない事を望みます)は毎日涙を飲んで修行の旅へ出ねばなりません。
 
しかしながら、ネイティブアプリがいらなくなるというのは、まだまだ先のお話。
ネイティブがなければ理想のアプリができないばかりか、こんなに自分でプラグイン作らなきゃいけないんなら、最初からネイティブで作った方が良かったじゃんという事にもなりかねません。

クライアントと良く相談し、上記に挙げたようなメリットデメリットを説明した上で、どちらを選択するかというのが、一番大切です。
 
そしてハイブリッドアプリを効率良く運営していくには、AngularやReact、Vue.jsといった「SPAフレームワーク」と呼ばれるjavascriptのフレームワークをうまく使っていく事がカギとなります。
 
ハイブリッドを選択しても、そこは進めば続くいばらの道。勉強する事が減るわけじゃありません。たくさんあるよってお話でした。
 
 
今年はたくさんの人にお話を聞く事ができて、とても勉強になった一年でした。
これを活かせるように、来年も横のつながりを大切に、みなさんと一緒に良いものを生み出していきたいです。
 
頑張るぞ。おー!
 


Can be the lightでは、どんなに困難でくじけそうでも信じる事を決してやめないエンジニアを募集しています。
興味のある方、ぜひご連絡ください。

  
     

MEGUMI TAKESHITA

Director / UI Designer

隙あらば旅に出たい