自動単一ページアプリケーション
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
優れたユーザーエクスペリエンスは、適切に設計されたサイトの尺度です。 ユーザーの時間は非常に貴重です。 最後に望むのは、ページのリロードが頻繁に発生するため、誰かがサイトに不満を抱くようになることです。 シングルページアプリケーション（SPA）はこの問題を回避します。 単一ページアプリケーションは、ユーザーがサイトを操作して移動するときに動的に更新される単一のHTMLページのみを読み込むことにより、読み込み時間を大幅に削減します。 これにより、ページのリロードが不要になり、よりシームレスなアプリエクスペリエンスが提供されます。 SPAはアプリとサイトでデフォルトで有効になっており、ワークフローやコードを変更する必要はありません\！
このチュートリアルでは、これらの重要なトピックについて説明します。
- SPAの利点
- SennaJSとは何ですか？
- Liferay DXPでSPAを有効にする方法
- SPA設定を構成する方法
- SPAライフサイクルイベントをリッスンする方法
SPAの利点
あなたがウェブをサーフィンしているときに、たまたまSPAが有効になっている本当に良いサイトを見つけたとしましょう。 大丈夫\！ ページの読み込み時間は非常に高速です。 あなたはただあなたに話しかけているこの素晴らしい投稿を見つけると、スクロールして、サイトの奥深くにいます。 アドレスバーからURLをコピーし、「Your Life Will Forever。」という件名ですべての友達にメールで送信します。彼らはこのa敬の念を起こさせる仕事を体験する必要があります！
すぐに応答が返されます。 「これはradサイトですが、どのポストについて話しているのですか？」読む。
"何\！？ 私の目は私を欺くのですか？」あなたは叫ぶ。 あなたはこの人生を変えるコンテンツを共有しようと急いでいたので、投稿をクリックしてもURLが更新されないことに気づかなかった。 戻るボタンをクリックして、投稿に戻ることを望みますが、このサイトにアクセスする前にアクセスしていたサイトに移動します。 アプリをナビゲートしてもページ履歴は更新されませんでした。メインアプリのURLのみが保存されました。
なんて残念！ "なぜ？ なぜあなたは私を失敗させたのですか？」あなたは泣きます。
シングルページアプリケーションを作成する方法があっただけでなく、必要なコンテンツにリンクできる場合。 まあ、私の友人を絶望しないでください。 SennaJSのおかげで、ケーキを持って食べることもできます。
SennaJSとは何ですか？
SennaJSはLiferay DXPのSPAエンジンです。 SennaJSはクライアント側のデータを処理し、AJAXはページのコンテンツを動的にロードします。 同じ機能を提供するJavaScriptフレームワークは他にもありますが、Sennaの唯一の焦点はSPAであり、サイトが可能な限り最高のユーザーエクスペリエンスを提供できるようにします。
SennaJSは、SPAに対して次の主要な拡張機能を提供します。
SEO & ブックマーク可能：リンクを共有またはブックマークすると、表示しているものと同じコンテンツが表示されます。 検索エンジンはこのコンテンツにインデックスを付けることができます。
ハイブリッドレンダリング：Ajax +サーバー側のレンダリングでは、 pushState をいつでも無効にできるため、プログレッシブエンハンスメントが可能です。 任意の方法を使用して、サーバー側をレンダリングできます（HTMLフラグメントやテンプレートビューなど）。
状態保持：ページの履歴をスクロール、再読み込み、またはナビゲートすると、元の場所に戻ります。
UIフィードバック：UIは、コンテンツが要求されたときにユーザーに示します。
保留中のナビゲーション：データが読み込まれるまでUIレンダリングがブロックされ、コンテンツが一度に表示されます。
タイムアウト検出：要求のロードに時間がかかりすぎる場合、または別の要求が保留中にユーザーが別のリンクに移動しようとすると、要求はタイムアウトします。
履歴ナビゲーション：ブラウザーの履歴は 履歴APIを介して操作されるため、戻ると進むの履歴ボタンを使用してページの履歴をナビゲートできます。
キャッシュ可能な画面：サーフェスがロードされると、コンテンツはメモリにキャッシュされ、追加のリクエストなしで後で取得され、アプリケーションが高速化されます。
ページのリソース管理：スクリプトとスタイルシートは、動的にロードされたリソースから評価されます。 XMLHttpRequestを使用して、追加のコンテンツをDOMに追加できます。 セキュリティ上の理由から、一部のブラウザはコンテンツフラグメントから <script> タグを評価しません。 したがって、SennaJSはコンテンツからスクリプトを抽出して解析し、ブラウザの読み込み要件を満たしていることを確認します。
SennaJSの例については、 Webサイトを参照してください。
SennaJSがSPAにどのように役立つかを理解できたので、次にLiferay DXP内でSPAのオプションを有効にして構成する方法を学習できます。
SPAを有効にする
SPAの有効化は簡単です。 このモジュールはデフォルトで含まれているため、何もする必要はありません。 削除した場合は、 com.liferay.frontend.js.spa.web-[version] モジュールをデプロイして有効にします。これで、SPAを使用する準備が整いました。
SPAはアプリとサイトでデフォルトで有効になっており、ワークフローや既存のコードを変更する必要はありません\！
次に、独自のニーズに合わせてSPA設定をカスタマイズする方法を学習できます。
SPA設定のカスタマイズ
カスタマイズする必要がある動作に応じて、2つの場所のいずれかでSPAオプションを構成できます。 SPAキャッシュとSPAタイムアウト設定は、システム設定で構成されます。 サイト内の特定のリンク、ページ、またはポートレットに対してSPAを無効にする場合は、対応する要素自体内で無効にすることができます。 ここではすべてのSPA設定オプションについて説明します。
SPAシステム設定の構成
SPAのシステム設定を構成するには、次の手順を実行します。
-
コントロールパネルで、 構成 → システム設定ます。
-
PLATFORM 見出しの下で Infrastructure 選択し* 。
3
[ フロントエンドSPAインフラストラクチャクリックし* 。
次の構成オプションが利用可能です。
キャッシュ有効期限：SPAキャッシュがクリアされる時間（分単位）。 負の値は、キャッシュを無効にする必要があることを意味します。
ナビゲーション例外セレクター：SPAが無視するCSSセレクターを定義します。
要求タイムアウト時間：SPA要求がタイムアウトする時間（ミリ秒）。 値がゼロの場合、リクエストはタイムアウトしません。
ユーザー通知タイムアウト：リクエストが予想よりも長くかかっていることを通知する通知がユーザーに表示される時間（ミリ秒）。 値がゼロの場合、通知は表示されません。
SPAのシステム設定を構成する方法がわかったので、次にサイト内の要素のSPAを無効にする方法を学習できます。
SPAを無効にする
ページの特定の要素が正常に機能するには、通常のナビゲーションが必要になる場合があります。 たとえば、ユーザーと共有したいダウンロード可能なコンテンツがある場合があります。 これらの場合、SPAはそれらの特定の要素に対して無効にする必要があります。
Liferay DXPインスタンス全体でSPAを無効にするには、 portal-ext.properties次の行を追加できます`
javascript.single.page.application.enabled = false
`SPAに参加したくないポートレットまたは要素がある場合、いくつかのオプションがあります。
- ポートレットをブラックリストに登録して、ポートレット全体でSPAを無効にします
data-senna-off注釈を使用して、特定のフォームまたはリンクのSPAを無効にします
SPAからポートレットをブラックリストに登録するには、次の手順を実行します。
-
ポートレットクラスを開きます。
-
com.liferay.portlet.single-page-applicationプロパティをfalseに設定します。com.liferay.portlet.single-page-application=false必要に応じて、次のプロパティを
<portlet>セクションに追加して、portlet.xmlでこのプロパティをfalseに設定できます`
false
`3
または、ポートレットの isSinglePageApplication メソッド をオーバーライドして、 falseを返すことができます。
フォームまたはリンクのSPAを無効にするには、次の手順を実行します。
-
data-senna-off属性を要素に追加します。 -
値を
true設定します。
例 <a data-senna-off="true" href="/pages/page2.html">Page 2</a>
アプリでSPAを無効にするために必要なことはこれだけです。
SPAを無効にする方法がわかったので、ナビゲーション中にリソースを読み込む方法を指定する方法を学習できます。
ナビゲーション中のリソースのロード方法の指定
デフォルトでは、Liferay DXPはナビゲーション時に <head> 要素からCSSリソースをアンロードします。 ただし、 <head>JavaScriptリソースは、ナビゲーションで削除されません。 この機能は、リソースの data-senna-track 属性を設定することによりカスタマイズできます。 以下の手順に従って、リソースをカスタマイズします。
-
デフォルトの動作を変更するリソースを選択します。
-
data-senna-track属性をリソースに追加します。 -
data-senna-track属性をpermanentに設定して、ナビゲーションでリソースがアンロードされるのを防ぎます。または、
data-senna-track属性をtemporaryして、ナビゲーションでリソースをアンロードします。
以下の例では、ナビゲーション中にJSリソースがアンロードされないようにします。
<script src="myscript.js" data-senna-track="permanent" />
次に、利用可能なSPAライフサイクルイベントについて次に学習できます。
SPAライフサイクルイベントを聴く
開発中に、SPAでナビゲーションがいつ開始または停止したかを知る必要がある場合があります。 SennaJSは、アプリケーションの状態の変化を表すライフサイクルイベントを公開することにより、これを簡単にします。 次のイベントが利用可能です。
beforeNavigate：ナビゲーションが開始する前に起動します。 このイベントは、移動先のコンテンツへのパスと履歴を更新するかどうかを含むJSONオブジェクトを渡します。 以下はイベントペイロードの例です。
{ path: '/pages/page1.html', replaceHistory: false }
startNavigate：ナビゲーションが開始すると起動します。 以下はイベントペイロードの例です。
{ form: '<form name="form"></form>', path: '/pages/page1.html',
replaceHistory: false }
endNavigate：コンテンツが取得されてページに挿入された後に発生します。 このイベントは、次のJSONオブジェクトを渡します。
{ form: '<form name="form"></form>', path: '/pages/page1.html' }
Liferayグローバルオブジェクトでイベントをリッスンすることで、これらのイベントを簡単に活用できます。 たとえば、以下のJavaScriptは、SPAナビゲーションが開始される直前に、クリックされたURLに「ナビゲートする準備をする」ようにユーザーに警告します。
Liferay.on('beforeNavigate', function(event) {
alert("Get ready to navigate to " + event.path);
});
このアラートは、 beforeNavigate イベントのペイロードを利用して、JSONペイロードオブジェクトの パス 属性からURLを取得します。
SPAナビゲーションの性質により、作成したグローバルリスナーは、適切に処理されないと時間が経つと問題を起こす可能性があります。 次に、これらのリスナーを処理する方法を学びます。
グローバルリスナーの切り離し
SPAは、サイトとユーザーに大きな利益をもたらすいくつかの改善点を提供しますが、結果として潜在的にいくつかの追加のメンテナンスがあります。 従来のナビゲーションシナリオでは、ページを更新するたびにすべてがリセットされるため、何が残っているかを心配する必要はありません。 SPAのシナリオでは、しかし、グローバルリスナーのような Liferay.on、 Liferay.after、または身体参加者は問題となることができます。 これらのグローバルリスナーを実行するたびに、グローバルに保持される Liferay オブジェクトにさらに別のリスナーを追加します。 その結果、これらのリスナーが複数回呼び出されます。 これは、処理しないと明らかに問題を引き起こす可能性があります。
これを防ぐには、ナビゲーションイベントをリッスンしてリスナーをデタッチする必要があります。 たとえば、次のコードを使用して、グローバル カテゴリ イベントのイベントリスナーをデタッチします。
var onCategory = function(event) {...};
var clearPortletHandlers = function(event) {
if (event.portletId === '<%= portletDisplay.getRootPortletId() %>') {
Liferay.detach('onCategoryHandler', onCategory);
Liferay.detach('destroyPortlet', clearPortletHandlers);
}
};
Liferay.on('category', onCategory);
Liferay.on('destroyPortlet', clearPortletHandlers);
Liferay DXP \でSPAを構成および使用する方法がわかりました！