本サイトからスピンオフした姉妹サイトです。Mobileでパフォーマンスを改善する方法を解説。ウィジェットの動作パラメーターをデフォルト設定して解釈処理をスキップする方法と、文書ツリーの一部を手書きして自動生成をスキップする方法について紹介する。Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前の通り、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。Mobileを利用するには?」を参照してください。一般的に、スマホ/タブレットはデスクトップパソコンに比べて非力です。Mobileは軽量なライブラリですが、それでもウィジェットの初期化/描画には相応のマシンパワーを要求されるため、環境によってはページの表示が遅い、モッサリと感じることもあるかもしれません。Mobileでは、ウィジェットの初期化を効率よくするために、data-defaults/data-enhancedという属性を提供しています。data-defaults属性まず、data-defaults属性はウィジェットの動作パラメーターを無条件に(マークアップでの指定にかかわらず)全てデフォルト値を設定します。ウィジェットをデフォルト設定で初期化することがあらかじめ分かっているならば、この属性を「true」に設定しておくことで、他のdata-xxxxxx属性の解釈をスキップできるため、ウィジェット初期化の際のパフォーマンスを改善できます。以下の例であれば、Collapsibleウィジェットでさまざまなパラメーターを設定していますが、data-defaults属性を「true」としていますので、全て無視され、デフォルトの開閉パネルが表示されることが確認できます。4アプリプログラミング</h3><p>初心者にもわかりやすく、Rails開発を行う上での基礎的な構文、キーワード、Model、View、Controllerについて詳しく解説します。data-enhancedオプションウィジェットは、基本的にその初期化に際して、描画のために必要な要素や属性をもともとのマークアップに対して付与することで、リッチなスタイルを実現しています。Mobileの長所の1つですが、このような文書ツリーの操作は相応にオーバーヘッドの大きな処理です。Mobileの負担を減らすこともできます。これがdata-enhanced属性の役割です。data-enhanced属性を「true」(デフォルトは「false」)に設定することで、ウィジェットはその部分をすでに処理済みと認識して、要素/属性の生成を行いません。Mobileに委ねた例です。いずれの場合も同じ結果を得られることを確認してください。Mobile側の変更に影響を受けやすい」などのデメリットもあります。利用の是非は、開発生産性とパフォーマンスとを鑑みながら判断してください。1.4.3の時点では、Listview/Selectmenu/Panel/Toolbar/Navbar/Sliderなどで利用できません。※以下では、本稿の前後を合わせて5回分(第35回~第39回)のみ表示しています。INDEX]を参照してください。ページのロード/切り替え時に初期化/後処理を実行するには?ページを表示/切り替えするタイミングで発生するイベントにはどのようなものがあるのか。ページイベントの基本的な利用方法を説明する。ページレイアウトが変更したときに処理を実行するには?ウィジェットのレイアウト状態が変化したとき(例えば開閉パネルが開いた/閉じたときなどに)、処理を実行する方法を説明する。Mobileでパフォーマンスを改善する方法を解説。ウィジェットの動作パラメーターをデフォルト設定して解釈処理をスキップする方法と、文書ツリーの一部を手書きして自動生成をスキップする方法について紹介する。スクロール時に追加的にコンテンツを読み込むには?スクロールの開始/終了のタイミングで発生するscrollstart/scrollstopイベントの基本的な使い方を説明。画面を縦方向にスクロールするためのsilentScrollメソッドについても紹介する。モバイル端末を縦横回転させたときにレイアウトを調整するには?端末の回転を検知できるorientationchangeイベントを説明して、端末が縦置きの場合は縦並びに、横置きの場合は横並びに表示する方法を説明する。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。開発者のためのSlackチーム、作りました:「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。2020最適なビューへの切り替えを推奨します:スマートフォン用表示に。