教えて!Webviewって何?ネイティブと何が違うの?

教えて!Webviewって何?ネイティブと何が違うの?

こんにちは!ゆうこです。

ランチェスターは、社内の大半がエンジニア(もしくは元・エンジニア)。理系出身とはいえ、ニワトリの胃の細胞培養をしていた私にとっては「はいはい、あーそういうことね」的な感じで進む話題についていけないことも、実はしばしば。話を止めてしまうのも気が引けて、なんとなくの理解のままになっていることが色々とあります(懺悔)

そのうちの1つが「Webview」。EAPは基本的にフルネイティブのアプリ提供が可能なプラットフォームではありますが、提供するアプリや機能によってはあえてWebviewを選択する場合もある、と聞きました。

それって、どういうこと???

ということで、開発ドシロウトの私が、EAPのプロダクトマネージャー・しょぼんさんに質問してきました!

Q:そもそもアプリ内の「Webview」ってなんですか?
A:HTMLコンテンツを、アプリ内で表示できるようにするものです。

いわゆるスマホのアプリは、コンテンツのある程度の枠組をすでにアプリ側で持っているのですが、その中にSafariやChromeなどのブラウザで表示できるHTMLが見られる枠をつくることができます。それを「Webview」と呼んでいます。

Q:Webviewを選択する場合のメリットを教えてください
A:一番大きなメリットはコスト面です。

元々Web上にコンテンツがあって、それを流用したい場合、Webviewなら新規でプログラムすることなくアプリ上で同じコンテンツが表示できます。コンテンツの更新もHTMLの書き換えをすればよく、アプリストアへの申請や審査、ユーザー側のアップデートなどの必要がありません。また、iOS・AndroidのどちらもWebviewに対応しているので、個別に開発することなく共通のコンテンツを表示することが可能です。

Q:それだけ聞くと、Webviewでいいじゃん!と思えてしまうのですが、ネイティブのメリットって何なのでしょうか?
A:サクサク・快適・スムーズな操作感はネイティブならでは。ユーザー体験にこだわるなら断然ネイティブです。

スマホのウェブブラウザで、通信が滞って、くるくる回る表示からなかなか動かない、みたいなことってよくあると思うのですが、Webviewだと同様の事がアプリでも起こってしまうんです。
一方ネイティブアプリでは、アプリ内にある程度のパーツを持っているので、画面遷移時の通信量を抑えることができ、よりなめらかで、サクサクした操作感を実現できます。また「画像が『ふわっと』表示される」というようなアニメーションもネイティブアプリならより自由に表現可能です。

また、Webviewで同じコンテンツを表示することはできても、機能全体をWebviewでとなると、操作性やデザイン面がOSの標準と異なってしまうんです。EAPの場合、基本的な機能に対して、iOSとAndroidそれぞれのデザインガイドラインを押さえたベースを用意していますので、ユーザーからすると、より使いやすい「わかってる」アプリを提供できるということになります。

Webviewとネイティブのどちらかでしか絶対にできない、ということは実はそれほどないのですが、ネイティブのほうがよりよいユーザー体験を提供できますし、ひいてはブランドの世界観を表現しやすいと思います。

Q:そんなEAPでも、あえてWebviewを選択することがあると聞きました
A:開発コストや運用コストと、実現できるユーザー体験とを比較して、よりメリットが大きい方をご提案しています。

Webviewを選択している事例として、例えばバロックジャパンリミテッド様のアプリ「SHEL’TTER PASS」では、ECをアプリ内の「WEBSTORE」タブから利用できますが、こちらはWebviewです。

コーデスナップからスムーズに商品購入ができるなど、作り込まれたスマホ向けのECサイトをそのまま活用しています。もちろんただWebviewで表示いているだけではなくて、購買までをスムーズに繋げられるよう、シングルサインオン(SSO)機能で、ECサイトへのログインをアプリ側で自動で行うようにしていたり、アプリのメニューとECサイトのメニュー表示が重複する画面ではヘッダーとフッターを非表示にすることで、お客様が操作方法などで混乱しないように調整しています。

ちなみに「SHEL’TTER PASS」以外でも、ECは決済など複雑な処理を伴うため、アプリ側でコマース機能をすべて持つよりもECの既存機能を使ったほうがメリットがあると考え、最終的にWebviewに遷移させることが多いです。

開発コストや運用コストと、ユーザー体験として実現したいブランドの世界観とを考えて、バランスよく選択いただけるようご提案しています。


ネイティブとWebviewの違い、参考になりましたでしょうか?

EAPでは、基本機能としてご用意している以外の機能もネイティブ開発での対応が可能です。
「こんな機能をつくりたいけど、EAPでも実現可能?」「今のアプリ、動作が遅くて見直したいんです。。」など、ぜひご相談ください!

※画像はぱくたそさんのフリー素材を使わせていただきました(今回教えてくださったしょぼんさんには全く、みじんも、似ても似つかない感じですのであしからず)

TAG

  • このエントリーをはてなブックマークに追加
ゆうこ
PR ゆうこ yuko

ランチェスター唯一の事務スタッフです。PR担当として、EAPをはじめとしたランチェスターの情報を発信していきます。2歳男児のママとしても日々奮闘中。