検索結果0件」

    スマホアプリの緩やかな死とSPAのメリデメ比較【もはやスマホアプリは必要なし】

    スマホアプリの緩やかな死とSPAのメリデメ比較【もはやスマホアプリは必要なし】

    こんにちは、シンヤです!

    今回は、スマホアプリの緩やかな死とSPAのメリデメ比較【もはやスマホアプリは必要なし】というテーマで、お話しいたします。


    SPAとは何か?

    SPAとは、SinglePageApplication(シングルページアプリケーション)の略称で、JavaScriptを使って単一のページでコンテンツの切り替えを行う、Webアプリケーションを作る為の技術です。
    このブログもSPA(Gatsby)で作られています😊

    非同期通信を使って、ブラウザによるページ遷移を行わずに、コンテンツを切り替える事ができます。
    裏側のHTMLは最初に読み込まれるJavascriptしか存在せず、JavaScriptがページの切り替えを行なっています😀


    Pjaxと何が違うの?

    少し話が脱線してしまいますが、非同期通信が出来るjQueryライブラリに、Pjaxというものがあります。

    Pjaxは、URLを変更すると非同期でコンテンツを入れ替えてくれるライブラリで、SPAとは違い遷移先にHTMLが存在しています。
    SPAの場合、遷移先にHTMLがありません。
    JavaScriptがDOMとURLを動的に切り替えて、リクエストがあった差分のみを描画しています😀

    HTMLとDOMについて

    DOMとは「Document Object Model」の略称で、かんたんにいってしまうと、Webページを表示する仕組みのことです😊
    WebページはHTMLを読み込んだ後、内容を解析してDOMを作り出し、ページを表示しています。

    つまりHTMLとは、「DOMを作るための設計図」のようなものです。
    裏を返すと、DOMを作った後はHTMLは不要ということです😅

    このDOMを、JavaScriptを使って動的に切り替えてWebページを表示する技術がSPAです😊


    SPAのメリット

    スマホアプリと比較して、運用コストが低い

    運用コストが低いというより、スマホアプリの運用コストが高すぎるのかもしれません。

    後述する様にクロスプラットフォームである為、デバイスによって言語が違うということはありません。
    全てJavaScriptで動作するので、Webブラウザがあればすぐ使う事ができます。
    デザインもiOS・Androidで別に用意するという必要性はなく、ブラウザで動くアプリケーションなので、PCで使用する事も可能です😀

    ストアによる審査がない

    Webアプリケーションなので、スマホアプリと違いストアによる審査が必要ありません。

    プロダクトが完成したら、サーバーにPushして、デプロイするだけですぐに反映されます。
    リジェクトされる心配はありません。
    ストアに支払う登録料も維持費も必要ありませんし、高い決済手数料を気にする必要もありません。

    スマホアプリに近い挙動を実現できる

    SPAはJavaScriptを使って非同期によるページ遷移を行うので、スマホアプリに近い挙動を実現できます。
    このブログもSPAで作られているので、実際にこのブログで体験していただければ、わかると思います😊

    スマホアプリと完全に同じ事は出来ませんが、非同期による滑らかな体験は、従来のWebアプリケーションには無かった強力な武器となります。
    データバインディングが出来るので、スマホアプリの様に、URLを変えずにタップしたら要素だけ変える、という様な事も可能です😀

    クロスプラットフォームである

    SPAはブラウザで動くので、デバイスを選ばないクロスプラットフォームです。
    これもSPAの強力な武器となります。

    ブラウザによる細かい挙動や仕様を考慮する必要性はありますが、iOS / Androidで同じプロダクトを別で作ることに比べたら、コストは微々たるものです😊

    豊富な開発環境

    今ではスマホアプリで使える環境が、SPAを使えばWebアプリケーションでも使える様になってきています😀

    例えば、私のポートフォリオサイトでも認証で使われているFirebase Authenticationは、スマホアプリでもSPAでも使う事が出来ます😊


    SPAのデメリット

    プッシュ通知が使えない

    一応PWAという技術を使えば限定的に使う事はできますが、iOS/Safariではサポートされておりませんので、必然的にiPhoneでは使えない事になります😓

    プッシュ通知が欲しい場合は、別のアプローチを試みる必要があります。

    高度なJavaScriptの技術が必要

    SPAは今までサーバーサイドで行なっていた処理を、JavaScriptを使ってクライアントサイドで実行するので、必然的に高いJavaScriptの技術が必要になります😅

    SEO対策のためにサーバーサイドレンダリングを行う必要がある

    Nuxt.jsやGatsbyJSであれば、自動的にサーバーサイドレンダリングも行ってくれます。
    ですがVue.jsやReact.jsをそのまま使う場合、サーバーサイドレンダリングを自分で組み込んで設計する必要があります。

    初期表示に時間がかかる

    初期ページで必要なものを全て読み込む性質上、初期表示に時間がかかる事が多いです。

    アナリティクスの設定が独特

    SPAでGoogleアナリティクスを導入する場合、公式から出ているライブラリを導入して、別途設定をする必要があります。

    また非同期通信の都合上通常のやり方ではイベントトラッキングが出来ないので、トラッキングさせるには、別途特殊な設定が必要だったりもします😅

    ジェスチャーが使えない

    まだまだJavaScriptでは、スマホアプリの様な豊富なジェスチャーは使えません。

    カメラ機能を活用したアプリは作れない

    SPAの場合ブラウザ標準のカメラ機能を使うので、カメラ機能を活用したアプリ(例えばInstagramの様なアプリや動画サービスなど)には適さないことが多いです😅


    スマホアプリのメリット

    プッシュ通知が使える

    スマホアプリはプッシュ通知によるアプローチが出来るので、アプリはインストールしたけど使っていない様な休眠ユーザーの掘り起こしなどに使えたりします😊

    ホーム画面に追加してもらえる

    スマホアプリの場合インストールしたら、ホーム画面にアプリを起動するためのアイコンが設置されます。

    SPAでもホーム画面にアイコンを追加してもらう事は出来ますが、iOSの場合はまだサポートされていませんので、ホーム画面に追加する場合、Safariから自分でやってもらうしか方法がありません😓

    ノウハウが豊富

    ストアにスマホアプリが豊富にあるので、参考事例を探すのに困る事はありません。

    ジェスチャーが使える

    スマホアプリ独特の豊富なジェスチャーを使えるのは、結構魅力的です😊

    カメラ機能を活用したアプリを作れる

    スマホアプリはカメラ機能を自分好みにデザインできるので、カメラ機能を活用したアプリ(例えばInstagramの様なアプリや動画サービスなど)に適しています。
    SPAはカメラ機能やバックグランド再生、動画の再生画面のデザインができません。
    写真を使うサービスや動画配信サービスは、スマホアプリを使わないと作ることができません😅

    PCのデザインを作らなくていい

    スマホアプリの場合PCのデザインを作らなくて良いのは、工数が一つ減ることになります。


    スマホアプリのデメリット

    運用コストがとてもかかる

    これがスマホアプリの一番のデメリットだと思います😅

    SPAが出てきた今、Webアプリケーションとスマホアプリの差異は、プッシュ通知以外ほぼ無いと言っても良いかもしれません。
    そうなるとSPAと比較して、プラットフォームが異なるiOS/Androidでアプリを開発するのは、運用コストがもの凄くかかってきます。
    ストアに支払う維持費や決済手数料もとても高いです😓

    インストールに時間がかかる

    SPAの場合ネットに繋がないと使えませんが、裏を返せばそれは、インストールしなくてもページさえ開けばすぐ使えるということです。

    スマホアプリの場合インストールしないと使えないので、蓋を開けるまでどの様なアプリか分かりません。
    Webと違ってスマホアプリの場合、広告を出してもその後「使ってもらう」為の工夫が必要なのです😅

    ストアの審査がある

    ストアによる審査があるので、スマホアプリの場合本番に反映されるのが遅いです😓


    まとめ

    まとめますと、運用コストがめちゃくちゃかかるスマホアプリより、今ならSPAで開発する方が遥かに効率的なのでは?ということです。
    SPAも開発コストがかかるので、ブログの様な直帰率が高いサービスにはオーバースペックかもしれません(といいつつこのブログはSPAで作られています😅)。
    ですが滞在時間が長いWebアプリにはとても適しています。

    • スマホアプリの緩やかな死とSPAのメリデメ比較【もはやスマホアプリは必要なし】

    広告