こんなことできるの！？AppStudioで動作確認する時の小技3選！

2021年3月15日2024年3月23日サポぶろぐ

皆さま、はじめまして！

株式会社アシストでWebFOCUSのサポートを担当しております吉江(よしえ)です。
苗字名前ともに珍しいため、たまに違う読み方で呼ばれることがありますが…
ぜひ正しい読み方で覚えて頂けると嬉しいです！

突然ですが、

などといったお悩みはありませんか？
今回はこれらのお悩みに役立つ、App Studioで開発をする際に役立つ小技3選を
ご紹介します！

それでは、1つずつご紹介していきますね！

1. HTML/グラフキャンバスにおけるプレビューデータの切り替え

HTML/グラフキャンバスのレスポンスが遅い、実際の使用イメージが湧きづらい
などという際に役立つ小技です！

HTML/グラフキャンバスではプレビュー画面に表示するデータを、サンプルデータか
ライブデータ(実データ)か選択することができます。

それぞれの特徴をおさえた上で現状やご要望に合わせてサンプルデータ/ライブデータ
を切り替えて頂くことで、開発時の効率がきっと上がるはずです！

＜HTMLキャンバスの設定手順＞
　1. App Studio左上の[アプリケーションメニュー(ASと記載された)]アイコンをクリックし、
　　 表示されたメニューで右下の[オプション]をクリック

　2. App Studioオプション画面左側より[HTMLページ]をクリック

　3. “プレビューの設定"欄で[サンプルデータ]か[ライブデータ]のいずれかを選択

　　　

　　　※補足※
　　　レポートの最大レコード数：
　　　ライブデータ選択時に、HTMLキャンバス上のレポートプレビューでDBから取得するレコード数を制限できる

　　　入力コントロールの最大レコード数：
　　　ライブデータ選択時に、HTMLキャンバス上のコントロール(ドロップダウンリストやチェックボックスなど)の
　　　プレビューでDBから取得するレコード数を制限できる

　4. 画面右下の[OK]ボタンをクリック

＜グラフキャンバスの設定手順＞
　1. グラフキャンバス上部で[ホーム]タブをクリック

　2. リボンメニューの"デザイン"欄で、[サンプルデータ]か[ライブデータ]のいずれかを選択

　　　

　　　※補足※
　　　件数：ライブデータ選択時に、グラフプレビューでDBから取得するレコード数を制限できる

2. デフォルトの出力ブラウザ変更

ユーザーが使用するブラウザで実行したら、開発時に確認していたレイアウトと差異が…
といった際に役立つ小技です！

レポートやグラフ、HTMLファイルはブラウザごとに仕様や解釈が異なるため、ブラウザ
の種類によりレイアウトに若干差異がでる場合があります。
このためユーザーと異なるブラウザで開発時に動作確認を行っていると、後々レイアウト
が意図した通りではない！などという問題が発生するかもしれません。

こんな時に使えるのが、デフォルトの出力ブラウザ変更です！
例えば社内標準ブラウザがChromeの場合はデフォルトをChromeと設定しておくことで、
App Studioでの実行時にもChromeで動作を確認できます。

＜設定手順＞
　1. App Studio左上の[アプリケーションメニュー(ASと記載された)]アイコンをクリックし、
　　表示されたメニューで右下の[オプション]をクリック

　2. App Studioオプション画面左側より[出力ビューアの設定]をクリック

　3. “ブラウザの設定"欄でデフォルトに設定したいブラウザを選択

　　　

　　　※補足※
　　　内部ビューアは、App Studioの動作確認用簡易ビューアです。Edgeも選択できるようになっていますが、
　　　現状App Studioの出力ビューアとしてEdgeはサポート対象外のため選択されないようお願いいたします。

　4. 画面右下の[OK]ボタンをクリック

3. 複数ブラウザを用いたHTMLファイルの動作テスト

念のため複数ブラウザでHTMLファイルの挙動やレイアウトを確認しておきたい！と
行った時に便利なのが、ここでご紹介するテスト方法です！

HTMLキャンバス上では、複数ブラウザを切り替えて動作確認を行うことができます！

社内標準ブラウザは「2. デフォルトの出力ブラウザ変更」で指定することで簡単に動作
確認できますが、他ブラウザでも確認したい際は以下の方法で実行することで、容易に
複数ブラウザで動作テストを行えます。

＜動作確認手順＞
　1. グラフキャンバス上部で[ユーティリティ]タブをクリック

　2. リボンメニューの"プレビュー"欄で、動作を確認したいブラウザのアイコンをクリック

　　　

　　　※補足※
　　　Edgeも選択できるようになっていますが、現状App Studioの出力ビューアとしてEdgeはサポート対象外の
　　　ため選択されないようお願いいたします。

次回は「遅い…」レスポンス課題の調査・見直し観点は？～ボトルネック確認編～ です！
レスポンスが遅いと感じた際の初動ポイントとして、ボトルネック箇所の切り分け方など
をご紹介します。

現在レスポンスでお困りな方はもちろん、これから本格的にWebFOCUSで開発される方
にも必見な内容になっておりますので、ぜひ次回も楽しみにお待ちください！