埋め込みアプリの読み込みをすばやく確実におこなう方法

埋め込みアプリの読み込みが遅いと、ユーザーはストレスをかかえます。

埋め込みアプリの読み込みが遅いと、ユーザーはストレスをかかえます。アプリユーザーは仕事を進められなくなり、あたのアプリにネガティブな印象をもちます。さらに悪いことに、読み込みがまったくおこなわれない場合には、あなたはレポートの確認にかかりきりになって原因の特定を進めなければなりません。

アプリの読み込みの遅延や失敗は、おもにShopifyのアプリ認証に起因します。今回の記事では、埋め込みアプリの認証の仕組みと、この苛立たしい問題に対する新しい解決方法について解説します。 

埋め込みアプリはどう読み込まれているのか

マーチャントがアプリ読み込みのリンクをクリックすると、数秒後にスクリーンに表示されます。このとき、水面下では何が起こっているのでしょうか？

まず、Shopifyは管理画面にiframeを作成し、アプリのURLを設定します。ブラウザがアプリへのリクエストをおこなうと、アプリが以前セットした何らかのクッキーがそこに含まれることになります。このクッキーに含まれるセッション情報により、アプリはだれがアクセスをしているのかを認識しています。

ときどき、クッキーがなかったり、セッションがユーザー情報を含まなかったりします。この場合、アプリはShopifyのOAuthサービスにユーザーをリダイレクトし、OAuthはユーザーがアプリをインストールしていることを確認して、ユーザーをアプリにリダイレクトバックします。このとき、ユーザー認識情報をアプリに渡しています。アプリはユーザー情報を保存して、セッションクッキーにリンクします。それにより、以降のインタラクションはOAuthサービスの関与なしで発生することになります。

アプリはユーザーがだれなのか判別できるようになったので、ユーザー固有の情報をもとに読み込みできます。

こちらも参考にしてください：ShopifyのAPI廃止バージョン：2020-10

アプリの読み込みが遅くなる原因とは

OAuthサーバーへのリダイレクトのプロセスは遅いです。セッションクッキーをセットするため、リダイレクトはiframe内でおこなうことができません。代わりに、ブラウザ全体がリダイレクトされます。OAuthに必要なすべてのリダイレクトでは、最後にユーザーをShopify adminと埋め込みアプリのページにリダイレクトするだけです。多くの場合、ブラウザのリダイレクトはユーザーから見てシームレスに表示できます。しかし、必要なリダイレクトの数と、iframeとブラウザのトップフレームを行き来するジャンプによって、アプリの読み込みは方向が定まらず遅いとユーザーには感じられます。

全体のフローは次のようになっています。

1 埋め込み iframe：アプリの読み込み

2 トップフレーム：アプリがShopify OAuthへリダイレクト

3 トップフレーム： Shopify OAuthがアプリへリダイレクト

4 トップフレーム：アプリを読み込み、iframe外であることを認識し、adminへリダイレクト

5 トップフレーム adminの読み込み

6 埋め込み iframe：アプリの読み込み

それぞれの段階でパフォーマンスが低下し、それがまとまって残念なUXに帰結します。全体の読み込み時間は10秒ほどに増え、忍耐強くないユーザーにとっては非常に長く感じられます。 

まったくアプリが読み込まれないときの原因

過去数年にわたり、ブラウザのベンダーはユーザープライバシーの保護に注力してきました。データの扱われ方を自分でコントロールできるため、これはユーザーにとって良いことです。とくにブラウザのベンダーは、サイトを越えたトラッキングを止めようと努力してきました。

Shopifyも関連アプリも、ブラウザのベンダーがブロックしようとしている「トラッカー」ではありません。しかし、わたしたちが埋め込みアプリ（iframe）を強化するために使用しているテクノロジーは、多くのサイト越えトラッキングに使われているのと同じ技術です。その結果、たとえばSafariのITP（インテリジェンス・トラッキング・プリベンション）のような、ブラウザに実装されたサイト越えトラッキングに関する規制が、Shopifyアプリの機能を妨げることになっています。

もっとも関係の深い規制はiframeのクッキー（サードパーティクッキー）使用の制限です。Shopifyアプリは、ユーザーセッションを保存するためにクッキーを使用していて、そのためOAuthのフローが必要になることは多くありません。サードパーティのクッキーが制限されると、この情報の取得や保存ができなくなり、読み込みエラーになってしまいがちです。2020年8月、アプリの読み込みエラーは平均して1日あたり5,150回発生しました。

ユーザーにこのエラーが表示される場合、サードパーティのクッキーが問題である可能性が高いです

    

SafariのITPのような規制を回避する方法はありますが、実装がむずかしく、望ましくないUXを強いられ、すべてのケースをカバーできるわけではありません。

読み込みの遅延とサードパーティクッキーのエラーを直す方法

Shopifyはアプリを読み込む新しい方法を導入しています。ユーザー情報を取得して保存するためにセッションクッキーを利用する代わりに、セッショントークンを使用できます。このセッショントークンは、アプリへアクセスするユーザーの情報を含んだ安全なパケットです。セッションクッキーと同じように、このトークンはアプリにユーザーの情報を伝えます。

アプリが読み込まれると、フロントエンドはApp Bridgeを介してセッショントークンを取得します。このトークンはアプリのバックエンドへのリクエストに含まれることになり、アプリが必要とするすべてのユーザー特定情報を提供します。つまり、大半のケースにおいて、アプリは初回インストール時にのみOAuthのリダイレクトを実行し、クッキーにユーザー情報を保存する必要がありません。その代わり、初回インストール後は、アプリはセッショントークンを利用することができます。

埋め込みアプリ読み込みフローの新旧比較

この仕組みは、クッキーベースのアプローチよりも著しく信頼でき、高速です。App Bridge認証を採用しているアプリは、最大で4倍速く読み込みが可能で、クッキー関連の読み込みエラーが起こりません。App Bridge認証による埋め込みアプリがどれだけ速く読み込まれるか、以下の動画で比較しています。 

 セッショントークンの実装についてより詳しく知りたい方は、詳細なチュートリアルにアクセスしてください。

注：アプリのバックエンドへのリクエストにセッショントークンを実装するためには、リクエストがフロントエンドのJavaScriptから来ている必要があります。そのため、SPAの場合、より簡単に変換できます。なぜなら、SPAはすでにバックエンドのインタラクションのほとんどでJavaScriptベースのリクエストを使用しているからです。あなたのアプリがフロントエンドのレンダリングをサーバーサイドでおこなっている場合（従来のRuby on Railsアプリ、Djangoアプリ、PHPアプリなど）、追加の作業をおこない、Turbolinksなどのツールでカプセル化する必要が生じるかもしれません。この方法を解説した個別のチュートリアルがあります。

ユーザーエクスペリエンスの向上にむけて

読み込み速度や安定性の問題は、ユーザーにフラストレーションを与えてアプリの活用を減退させます。ブラウザのサードパーティクッキーに対する規制の促進は、問題を悪化させるばかりです。

埋め込みアプリのソリューションとなるShopifyの新しい認証方法によって、両方の問題を一度に解決できると同時に、アプリのユーザーエクスペリエンスを向上させることができます。チュートリアルを今すぐ始めてみましょう。ユーザーもきっとあなたに感謝するはずです！

原文：Sam Bull and Mike Ragalie 翻訳：深津望