Webアプリとネイティブアプリの違いについてまとめてみた
以前, 『新入生・新入社員にオススメのプログラミング参考書 64 冊』という記事で「これから iPhone アプリを作るなら Objective-C より JavaScript の方が良いよ♪」的なこと書いたら 結構色々言ってくる人がいたのでざっくりと両者の違いをまとめてみた.
両方の環境での開発経験による私自身の主観が十二分に混じってるので半信半疑で読んで頂けると助かります.
主な違いはこんな感じです.
Web アプリ | ネイティブアプリ | |
---|---|---|
入手方法 | ダウンロード, インストール不要. | 専用のマーケットを介してダウンロード. |
動作環境 | ブラウザを介して動作する. ネットさえ繋がればPCでもスマートフォンでも動作する. | インストールする必要がある. ネイティブ環境で動作するため専用のプラットフォームが必要. |
開発環境 | 主に HTML5, CSS, JavaScript で開発. テキストエディタさえあれば作れる.コンパイルの必要もない. | 専用のコンパイラ言語で開発. |
メリット | お手軽に開発 & 実行ができる | 高速に動作する. やれることが多い. |
デメリット | 動作が遅い. | 開発, 公開が面倒. |
細かく見て行きましょう.
Table of contents
入手方法
ユーザー側のお話です.
Web アプリの場合, 常にネットを介して実行をするため, 何もダウンロード, インストールする必要がありません. 便宜上, データをクライアント側に保存することはあります. その際は, キャッシュだったり HTML5 から追加されたローカルストレージを使用します.
それに対しネイティブアプリの場合は, 専用のストアを介してアプリのデータをまるごとダウンロードしてインストールする必要があります. 有料のものもありますがその分高機能かつ大規模なものが数多くあります.
アプリをダウンロードできるストアには iPhone の場合は App Store, Android の場合は Google Play などがあります.
動作環境
Web アプリの場合ブラウザ上で動きます. そのためブラウザとインターネットに繋がる環境さえあれば PC でもスマートフォンでもプレイすることができます.
ただ, 処理する度に間にブラウザが挟まるためネイティブに比べると動作は低速です. (JITコンパイラがうまく走れば起動時間以外はそこまで差はない…はず)
ネイティブアプリは一度ダウンロードしてしまえばネット環境がなくてもプレイできます.
開発環境
Web アプリ開発には, HTML/CSS と JavaScript が使われます. Web ページを作る仕組みと同じですね.
公開はサーバーにアップするだけで出来ます.
数年前に HTML5 で Canvas という描画機能をサポートされてから, だいぶゲームなどのインタラクティブなアプリを作りやすくなりました.
ちなみに私の方で, Web アプリとしてさくっとゲームや簡単なアプリを作れるよう 機能をライブラリ化した『 tmlib.js 』という JavaScript ライブラリがあるのでよかったら使ってみて下さい.
こういったライブラリを使えば, 一つのコードで PC, iPhone, Android で同じように動作する アプリケーションを作ることができます.
ネイティブアプリ開発には, iPhone の場合は Objective-C, Android の場合は Java が主に使われます. 開発はコードを書いたらコンパイルしてバイナリにする必要があります.
傾きセンサーや位置情報, カメラといったデバイス特有の機能はネイティブでしか使えません. でしたが, バージョンが上がるにつれてブラウザでもそういった機能を扱うための API が追加されているので, この辺はいずれ気にしなくても良くなるかもしれません.
また, アプリを更新した際, Web アプリの場合はサーバー側のデータを更新するだけですが, ネイティブアプリの場合は, 全ての人にアップデートしてもらう必要があります.
実際に同じアプリをネイティブ と Web とで作ったので見比べてみてちょ♪
友人が作っていたネイティブアプリを先ほど紹介した tmlib.js を使って Web に移植してもらいました.
コードの量はネイティブに比べて1/3になっていて, かつ同じように動作します.
HTML の meta の設定とかすれば Web アプリでも下の動画のようにフルスクリーンでネイティブのように動かすことができます.
このように2D ゲームだったりUtility系の処理コストがそこまで大きくないようなアプリであればネイティブで作る必要は全くありません.
結局どっちの開発が良いのよ?
状況によって使い分けるべきでしょう!!って言いたい所ですが 私はガッツリ Web アプリ推しです.
というのも, 昔 Objective-C を使って iPhone アプリを開発した経験があるのですが, 正直最悪でした.
もう2年ほどやっていないので, 今はどうか知りませんが Interface Builder という (個人的に合わなかったという意味で)ヘンテコなアプリケーションを使ったり, そもそもの Objective-C が使いにくかったので…
完成した後の公開手続きも面倒だし…正直二度とやりたくない.
ただ, 私が JavaScript を本気で勉強するキッカケを作ってくれたのは この最悪な環境での開発経験があったからなので, そういった意味では良かったし後悔はしていません.
なので, どっちが良いかはどちらも使ってみて決めて下さい.
ただ, Web アプリとネイティブアプリは速度の差も API の制限も徐々に気にならないレベルにまで来ています. おそらく 3D ゲームに関しても, 来年か再来年あたりに WebGL がスマートフォンでも解禁されて(Android では動くやつも出てきてるみたい) 3D ゲームがガンガン動いてると思います.
時代の流れは Web アプリ だということは断言しておきます.
『より良いアプリをより多くの人へ』ではなく『お金儲け』が目的であれば話は変わってくるでしょうけど…
目的によると思うけど、かれこれネイティブObjective-C 3年目になる自分としては、高速動作のために必要最低限のネイティブコード+WebViewってカタチがいいんじゃないかなと思ってる
主観でしかないね。
主観でしかないね。 Webアプリとネイティブアプリの違いについてまとめてみた | TM Life
Webアプリでもう少しデバイス系がさわれるといいんだけどなぁ。
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/xOcuKjUR
少し修正. 画像の追加など.
良かったら参考にしてください.
『Webアプリとネイティブアプリの違いについてまとめてみた』
http://t.co/dx9dNLhO
http://t.co/NoyyxROH
#web
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/KCUcYY4D
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/lBkgr1lP
Webアプリとネイティブアプリの違いについてまとめてみた http://t.co/IQ5RDXiP @phi_jpから 参考に!
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life (http://t.co/SAI6Zr5X) #news
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/f8gt0qq7
☑ Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/hWiANnAh #pctool
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/3ITURKtR
はてな: Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/PKatuMI8
Webアプリとネイティブアプリの違いについてまとめてみた http://t.co/8kjKoPfN @phi_jpさんから
“Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/F7ku0V2A
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life – http://t.co/Im7AJsS5
コンピュータ・IT: Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/3s5V96SH
【"スマホ"】 Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/eeljdXSo #iphone #android
“Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/ChQNbzfb
“Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/5nppE14D
“Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/L4KANIu3
少し修正. 画像の追加など.
良かったら参考にしてください.
『Webアプリとネイティブアプリの違いについてまとめてみた』
http://t.co/dx9dNLhO
http://t.co/NoyyxROH
#web
"Webアプリとネイティブアプリの違いについてまとめてみた | TM Life" http://t.co/OIqbQnXd
"Webアプリとネイティブアプリの違いについてまとめてみた | TM Life"
“Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/yoaepCXj
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/LB88ZWIO
“Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/Ys7yECPv
Webアプリとネイティブアプリの違いについてまとめてみた http://t.co/7ACBtRNa @phi_jpさんから
http://t.co/fCKnGidZ
@Ane_2525 Webとアプリの違いってページがあったわ http://t.co/yKbmYxuK
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/8EoRk3iV
最終的にWebとネイティブのハイブリットに落ち着くんだよなぁ。やっぱりそれぞれの良さってのがあると思うのよ。
最終的にWebとネイティブのハイブリットに落ち着くんだよなぁ。やっぱりそれぞれの良さってのがあると思うのよ。 / “Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/98Qi37cM
“Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/fDD57tjF
動作環境にJITの話が出てくるけど、iOSはJIT禁止だったはずなのでJSとobjectiv-cでは動作速度では結構差があると思われる。>Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/SzgKaPS0
“Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/G85Cps2Q
[…] Webアプリとネイティブアプリの違いについてまとめてみた | TM Life以前, 『新入生・新入社員にオススメのプログラミング参考書 64 冊』という記事で「これから iPhone アプリを作るなら Ob […]
“Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/0EkJ8dyS
“Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/0EkJ8dyS
javascript: Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/7Wjo4w6c
javascript: Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/7Wjo4w6c
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life 以前, 『新入生・新入社員にオススメのプログラミング参考書 64 冊』という記事で「これから iPhone アプリを作るなら Objective-C より JavaScript の方が良いよ♪
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/xDoOo2pJ
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/ey5tUWcL
Webアプリとネイティブアプリの違いについてまとめてみた http://t.co/0TV6buJT @phi_jpさんから
Webアプリとネイティブアプリの違いについてまとめてみた http://t.co/VevyHgQj @phi_jpさんから
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/94V4KDFZ
jsもobjcもやってるけど、デメリットに開発が面倒は主観。iPhoneアプリ作るなら断然jsよりobjc選ぶし開発が面倒だと思ってない RT " Webアプリとネイティブアプリの違いについてまとめてみた http://t.co/h9jExO7r @phi_jpさんから "
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life http://t.co/obQXqx4a
元々とマーケットを有効利用するプランがあって初めてアプリという選択肢があるんじゃないかと思っておる。
元々とマーケットを有効利用するプランがあって初めてアプリという選択肢があるんじゃないかと思っておる。 / “Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/OdDY14al
Webアプリとネイティブアプリの特徴。ネイティブアプリの優位性が失われつつある。これからはWebアプリが主流になるだろう。
http://t.co/nSvVZTeU
『時代の流れは Web アプリ だということは断言しておきます.『より良いアプリをより多くの人へ』ではなく『お金儲け』が目的であれば話は変わってくるでしょうけど…』
『時代の流れは Web アプリ だということは断言しておきます.『より良いアプリをより多くの人へ』ではなく『お金儲け』が目的であれば話は変わってくるでしょうけど…』 / “Webアプリとネイティブアプリの違いについてまとめてみた | …” http://t.co/wpAu7WUk
“Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/G3tmvmGr
結構当たり前にそういうものだと思ってたけど改めてなるほどな Webアプリとネイティブアプリの違いについてまとめてみた | TM Life <http://t.co/Ni6LTMxt>
結構当たり前にそういうものだと思ってたけど改めてなるほどな Webアプリとネイティブアプリの違いについてまとめてみた | TM Life <http://t.co/Ni6LTMxt>
Webアプリとネイティブアプリの違いについてまとめてみた
Webアプリとネイティブアプリの違いについてまとめてみた http://t.co/eItGn1HP @phi_jpさんから ふと、先輩に質問されたので調べメモ
Webアプリとネイティブアプリの違いについてまとめてみた http://t.co/6ujsJCcE @phi_jpさんから
[…] 従来と一味違うエクスペリエンスを提供中 TechCrunch Japan 12月15日(土)2時53分配信 FacebookのHTML5アプリケーションによる悪夢も終わりを告げた。Facebook for Android 2.0がリリースされ、ネイティブ/ウェブのハイブリッドが廃され、すべてネイティブアプリケーションとして生まれ変わったのだ。動作速度が遅すぎるとい う不満の声にようやく答えることができたわけだ。今回のバージョンアップは、8月のiOS版のアップデートに続くものだ。その時の改良でアプリケーション に対するユーザーレビューのポイントが大幅に改善するということもあった。Facebookは今回のAndroid版アップデートにより、ついに本格的 「モバイルファースト」サービスとしてスタートを切 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ この記事を読んで調べました。 まあ、コンパイルされたプログラムの事で、HTML5やJavascript等のインタプリタ型のようなプログラムでは無くて実行スピードが速いと言う事か? なるほどねえ! 人間と言うのはあくなき探究心とセッカチさで出来ているんだな?と感心しきりです。 寸暇を惜しんで情報にアクセスしていないと安心できないらしい(笑) 少し詳しく知りたい方は次のHPが解かりやすいかも! 「TM Life」 Webアプリとネイティブアプリの違いについてまとめてみた […]
Webアプリとネイティブアプリの違いについてまとめてみた http://t.co/n1xCj2VEKV @phi_jpさんから
あとで / Webアプリとネイティブアプリの違いについてまとめてみた http://t.co/ANDFhjdEAM @phi_jpさんから
“Webアプリとネイティブアプリの違いについてまとめてみた | TM Life” http://t.co/L4KANIu3
ありがとうございました。
非常に丁寧な語り口で、とてもよかったと思います。開発される方は言葉を自分流に略したり、ときには自分だけがわかる言葉で書いていたり、少々乱暴だと感じていたのです。
これからもがんばってください。
こちらこそ読んでいただきありがとうございます.
より分かりやすく書けるよう精進してきます.
今後ともよろしくお願いします.
とてもわかりやすかったです。私も漠然とそうだろうなと思っていたのですが、うまく説明できなかったのでこれから人に説明するときはこのページを見せます(笑)
大学でホームページの作り方とか軽いプログラムの作り方を勉強しているのですが、まだまだなにもできません(泣)
苦労して作ったものを多くの人に見てもらうためには、手間的にも、汎用性のよさ的にもWEBのほうがいいですね♪
PS このホームページにいるマリオ面白いですね
最初は何かと思いましたが、キーボードで右や左に動かしたりジャンプさせたりできるのですね!
しくみに興味があるので(理解できるかはわかりませんが・・・)お手数ですが、お暇でしたらメールアドレスに参考URLを教えていただけるだけでいいのでメールを下さると幸いです。
webアプリは、ダウンロード、インストールが不要でお手軽に開発、実行できるが動作が遅い。ネイティブアプリは、専用のマーケットでDLする必要があるが、高速に動作し、やれることが多い。
[…] ちなみに、Webアプリとネイティブアプリの違いについてまとめてみた | TM Life←この記事もネイティブアプリとWebアプリについてめっちゃまとまってます。 […]