組み込みのモバイルサポート
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
箱から出してすぐに、モバイルデバイスでも、デスクトップと同じようにページの見栄えをよくし、同じ機能を実現するのに役立ついくつかの機能があります。
-
LiferayのUIフレームワークを使用するLiferayウィジェットとカスタムウィジェットは、画面サイズに合わせて自動的にスケーリングされます。
-
ナビゲーションや製品メニューなどのUI要素は、小さな画面でも使用できるように自動的に調整されます。
-
画面の幅が狭い場合、Liferayは列を結合して、すべてのコンテンツを読みやすくします。
-
Web開発者向けに、Liferayのテーマツールは、最適なモバイルパフォーマンスを確保するのに役立つ多数のツールを提供します。
ほとんどのビジネスユーザーにとって、これは、モバイルデバイスでページを表示するために必要なことは、ページを作成することだけであることを意味します。 ただし、すべてが意図したとおりに表示されることを確認するためのツールもあります。 デバイスシミュレーター（）は、ページがさまざまなデバイスでどのように表示されるかを示す強力なツールです。
デバイスシミュレータの使用
ページを作成する前、またはページを公開する前に確認する場合、最も重要なツールの1つは、各ページの右上隅にあるデバイスシミュレータです。 シミュレーターを使用すると、さまざまな表示タイプに基づいて、現在のページをいくつかの解像度で表示できます。 次の3つの事前定義オプションがあります。
デスクトップ： ページをフルサイズで表示するように幅を修正します。
タブレット： タブレットに表示されているかのように、ページをボックスに配置します。 また、Liferayの組み込みのモバイル機能の一部をアクティブにします。
モバイル： ページをさらに小さなボックスに入れて、平均的なスマートフォンユーザーにページがどのように見えるかを示します。
表示できる2つのオプションもあります
オートサイズ： ブラウザウィンドウの幅に基づいてページが縮小および拡大するデフォルトの動作を表示する別の方法を提供します。
カスタム： テスト用に特定のサイズを入力し、ディスプレイの高さと幅を固定します。
最新のモバイルブラウザーはデスクトップブラウザーと同じテクノロジーに基づいて構築されているため、シミュレーターに表示される動作は、モバイルデバイスのユーザーのエクスペリエンスと一致する必要があります。 基本的なレイアウトが美しく、すべての機能が残っていることを確認することに加えて、自動機能（低い解像度での列の結合方法など）が意図しない影響を受けないようにすることも重要です。
モバイルフレンドリーページの設計
Liferay DXPは必要なツールを提供しますが、あらゆる種類のデバイスにわたって優れたエクスペリエンスを提供するページを構築することは、依然としてすべてのレベルのWeb開発および公開にわたって機能することを意味します。 テーマ開発者は、Liferayのフレームワークを使用して、あらゆる種類のディスプレイにわたってコンテンツを適切にスケーリングするテーマを作成する必要があります。 デザイナーは、ページをデザインするときに複数の画面サイズを念頭に置く必要があります。 また、公開する前に、すべてのユーザーに最高のエクスペリエンスを提供できるように徹底的にレビューする必要があります。
ウェブサイトをモバイルフレンドリーにするLiferayのツールについて学習したところで、さまざまなタイプのモバイルデバイスに適応するためのオプションを見てみましょう。