はじめに
App Studio Appを作成 する場合、最初に行うのはテーマの選択です。
- フォント
- 色
- カードと表のスタイル
- タブ
- 角丸
テーマを選択する テーマを編集する テーマを編集する テーマを再利用する
Appテーマ
App Studioには、フォント、カラー、スタイルなどが事前に構築されたパッケージが複数用意されています。これらのパッケージはAppテーマと呼ばれます。Appテーマは［テーマ］モーダルの最初のタブに表示され、「Essential」や「Saturated Brand」といった名前が付いています。 ［テーマ］タイル > ［適用］ の順に選択すると、Appにテーマが適用されて Appエディター が開きます。 ［テーマを探索］ を選択すると、そのテーマの詳細を確認できます。
カスタムテーマ
［テーマ］モーダルにあるもう1つのタブは、 ［カスタムテーマ］ です。
カスタムテーマを保存する
以下の手順は、Appテーマや別のカスタムテーマに変更を加えた後に、そのテーマを自分の カスタムテーマ に保存する方法です。-
Appエディター でテーマに変更を加えたら、
［Appテーマ］ に移動します。
-
［テーマ］ で、 ［カスタムとして保存］ を選択します。
注記： このオプションは、テーマに変更を加えるまで表示されません。
-
新しいカスタムテーマに名前を付けて保存します。最大文字数は30文字です。
テーマを編集する
Appエディターを開くと、デフォルトで左側のナビゲーションに
［Appテーマ］ エリアが表示されます。
テーマを変更する
［Appテーマ］ エリアで、プレビューのサムネイルの上にカーソルを置き、 ［テーマを変更］ を選択します。
現在のテーマを編集する
現在のテーマを編集するには、
［Appテーマ］ エリアに移動して、プレビューのサムネイルの下の ［編集スタイル］ を選択します。
デフォルトを設定する
［デフォルト］ タブ（ ［Appテーマ］ > ［編集スタイル］ > ［デフォルト］ タブ）では、以下の要素をAppに追加する際に、それらの表示方法を選択できます。要素は、追加後にいつでも編集できます。- Appナビゲーション
- タブ
- カード（単一値、チャート、コントロール、画像、ドキュメント）
- 表
- ボタン
- ヘッダー
- テキストヘッダーとボックス
- フォント
- フォーム
レイアウトのスタイルを設定する
レイアウト設定によって、Appのメインナビゲーションとタブのスタイルが決まります。 ［Appテーマ］ > ［編集スタイル］ で、 ［スタイル］ タブにある ［レイアウトコンポーネント］ で ［編集スタイル］ を選択し、変更を加えます。
編集 を選択できます。
［リセット］ を選択すれば、いつでもすべての設定をデフォルト値にリセットできます。
Appのレイアウトを編集する
［Appテーマ］ の ［レイアウト］ で、App全体について以下の設定を変更できます。
- ［Appの幅］ — ［Appの幅］は、様々なサイズの画面で、Appの全ページがスペースを埋める方法を変更します。自動幅または固定幅のどちらを使用するかを選択できます。
- ［自動幅］ — 余白は固定され、ページは画面に合わせて柔軟に調整されます。
- ［固定幅］ — ページの幅は固定され、余白は画面に合わせて柔軟に調整されます。
- ［Appの密度］ — Appの密度は、App内のオブジェクト間のスペースを決定します。オプションは、［デフォルト］（4px）、［快適性］（8px）、［コンパクト］（2px）、［なし］（0px）、［カスタム］です。
カードのスタイルを設定する
Appにカードを組み込む際には、Appのブランドに合わせて8種類のカードスタイルから選んでカスタマイズできます。
［Appテーマ］ > ［編集スタイル］ を選択し、 ［スタイル］ タブにある ［カード数］ で ［編集スタイル］ を選択して変更を加えます。
このパネルで 
編集 を選択し、カードのスタイルを個別にカスタマイズします（App Studioのカラーの詳細については、 こちら を参照してください）。
パネルの上部の ［リセット］ を選択すれば、いつでもすべての設定をデフォルト値にリセットできます。
間隔のコントロール — カードやその他の要素のスペースを調整することで、以下のカスタマイズが可能です。
- ［カード内のパディング］（［デフォルト］、［快適性］、［コンパクト］、［マイクロ］、［カスタム］） — このパディングでは、要素の端とその要素内のコンテンツの間のスペースを調整します。
- ［カードコンテンツの間隔］（［デフォルト］、［快適性］、［Compact］、［なし］） — このパディングでは、カード内のテキストとコントロール、表、可視化の間のスペースを調整します。
- ［ヘッダーコンテンツの下のスペース］ — 要素のヘッダーとその他のコンテンツの間のスペースです。
- カードコンテンツの間隔（［デフォルト］、［快適性］、［Compact］、［なし］）
- タイトルの下のスペース
- まとめ数字の下のスペース
- タイムフレームの下のスペース
- 説明の下のスペース
- ヘッダーコンテンツの下のスペース
表のスタイルを設定する
表のスタイルは、3種類から選んでカスタマイズできます。
［Appテーマ］ > ［編集スタイル］ を選択し、 ［スタイル］ タブにある ［表］ で ［編集スタイル］ を選択します。
このパネルで 
編集 を選択し、表のスタイルを個別にカスタマイズします。App Studioの色については こちら を、スペースのコントロールについては こちら を参照してください。
パネルの上部の 
［リセット］ を選択すれば、いつでもすべての設定をデフォルト値にリセットできます。
- 境界線の重み（0～4ピクセル）
- 境界線の色**
- 行の高さ（［デフォルト］、［快適性］、［コンパクト］）
- 行の色**
- ［互い違いの行の色を表示］トグル
- ［互い違いの行の色］の設定
- 各列ヘッダーのフォントの選択
- ヘッダーのフォントの色
- ヘッダーの背景色
- 合計行のフォント
- 合計行のフォントの色
- 合計行の背景色
- 小計行のフォント
- 小計行のフォントの色
- 小計行の背景色
- URLのフォントの色
ボタンのスタイルを設定する
ボタンのスタイルは、5種類から選んでカスタマイズできます。
［Appテーマ］ > ［編集スタイル］ を選択し、 ［スタイル］ タブにある ［ボタン］ で ［編集スタイル］ を選択します。
このパネルで 
編集 を選択し、ボタンのスタイルを個別にカスタマイズします（App Studioのカラーの詳細については、 こちら を参照してください）。
パネルの上部の 
［リセット］ を選択すれば、いつでもすべての設定をデフォルト値にリセットできます。
テキストコンポーネントのスタイルを設定する
このセクションでは、2つのヘッダースタイルと3つのカードスタイルを設定できます。ヘッダースタイルで設定できるのは、フォントと色のみです。カードスタイルには、 間隔 など、さらに多くのオプションもあります（App Studioの色については、 こちら を参照してください）。
［Appテーマ］ > ［編集スタイル］ を選択し、 ［スタイル］ タブにある ［テキストコンポーネント］ で ［編集スタイル］ を選択します。
フォントのスタイルを設定する
5種類の見出しスタイルと、本文、段落、ボタンのそれぞれで1種類のスタイルをカスタマイズできます。
［Appテーマ］ > ［編集スタイル］ を選択し、 ［スタイル］ タブにある ［フォントスタイル］ で ［編集スタイル］ を選択します。
編集 を選択すると、フォントファミリー（［Condensed］、［Monospace］、［Sans］、［Serif］、［Slab］）、フォントの太さ、フォントサイズ、斜体にするかどうかを選択できます。
フォームのスタイルを設定する
フォームでは、3種類のスタイルを選んでカスタマイズできます。
［Appテーマ］ > ［編集スタイル］ を選択し、 ［スタイル］ タブにある ［Appのコンポーネント］ で ［編集スタイル］ を選択します。
編集 を選択すると、フォームの外観、カードの外観、パディング、フォントスタイルのコントロールのプレビューが表示されます。
［フォームの外観］ のコントロールでは、以下の項目をカスタマイズできます。
- ［フォームのプライマリボタン］ — 使用可能な ボタン のスタイルのいずれかを選択できます。
- ［フォームのセカンダリボタン］— 使用可能な ボタン のスタイルのいずれかを選択できます。
- ［フォームコントロールの色］と透明度 — この色は、チェックボックスやラジオボタンの選択など、フォームの入力フィールドコントロールに適用されます。
色を選択する
［Appテーマ］ の ［色］ で、Appの背景色を選択できます。事前構築済みのカラーパレットから色を選択することもできます。事前構築済みのカラーパレットには、テーマカラーのセットとチャートカラーのセットが含まれています。独自のパレットを作成する場合は、 ［テーマ色を編集］ を選択します。
Appの背景色を設定する
Appの背景色を使用すると、色の塗りつぶしまたは画像の塗りつぶしを設定できます。- ［色の塗りつぶし］ — 「 色ピッカー 」を参照してください。 ［テーマで編集］ を選択すると、 ［テーマのカラーパレット］/［チャートのカラーパレット］ が展開されます。
- ［画像の塗りつぶし］ — ［画像の塗りつぶし］を使用すると、背景として使用する画像をマシンから選択できます。
［テーマのカラーパレット］/［チャートのカラーパレット］
［Appテーマ］ の ［色］ で ［テーマ色を編集］ を選択すると、［テーマのカラーパレット］と［チャートのカラーパレット］が表示されます。
［テーマのカラーパレット］ ドロップダウンには、8つの作成済みのカラーパレットがあります。各カラーパレットには、プライマリカラーと3つのアクセントカラーが含まれ、各色にはあらかじめグラデーションが設定されています。
追加 を選択すると、 色ピッカー が開きます。含まれているアクセントカラーを編集すると、プライマリカラーにもとづいてアクセントカラーの候補が表示されます。
展開された系列
チャートの色の ［展開された系列］ は、チャートの系列数が増えると使用されます。また、折れ線グラフで使用されることもあります。展開された系列の色を追加したり、編集したりすることができます。 ［展開された系列］ で
追加 を選択すると、選択したテーマの色で専用の 色ピッカー が表示されます。
系列の色を並べ替えるには、色のハンドルを目的の順番にドラッグします。
色ピッカーApp Studio全体の色のドロップダウンを選択すると、現在のテーマの色のパレットとグレースケールの色のパレットが表示されます。現在選択されている色の不透明度を調整することもできます。［テーマで編集］ を選択すると、 ［色］ セクションが開き、テーマのカラーパレットに変更を加えることができます。後述の「色」を参照してください。
追加 を選択すると、スポイトツール付きの色ピッカーが表示され、色を正確に選択できます。色ピッカーでは、HEX値とRGB値も使用できます。スポイトツールを使用するか色の値を入力した後、 ［+色を追加］ を選択すると、色ピッカーのカスタムの色のパレットに色が追加され、 ［キャンセル］ を選択すると変更が破棄されます。
追加 を選択すると、スポイトツール付きの色ピッカーが表示され、色を正確に選択できます。色ピッカーでは、HEX値とRGB値も使用できます。スポイトツールを使用するか色の値を入力した後、 ［+色を追加］ を選択すると、色ピッカーのカスタムの色のパレットに色が追加され、 ［キャンセル］ を選択すると変更が破棄されます。カスタムテーマをコピーする
Appが ロック されていない場合、Appの所有者と編集者はブランディングを維持するために、別のApp Studio Appで作成された カスタムテーマ を選択して再利用できます。また、カスタムテーマをJSONファイルとしてダウンロードし、後で使用することもできます。Appがロックされている場合は、所有者だけがテーマをコピーして再利用できます。 カスタムテーマをコピーまたは再利用するには、ダウンロードとアップロードの2つのプロセスを完了する必要があります。これらのプロセスには、 Appのホーム からダウンロードする場合と、 App内 からダウンロードする場合、また、 新しいApp にアップロードする場合と、 既存のApp にアップロードする場合があります。それぞれの手順については以下で説明します。注記：
- JSONテーマファイルには、 テーマスタイル、色、Appのブランディングに関する情報のみが含まれています。その他のAppやデータ関連の情報は含まれていません 。
- 別のAppからテーマをインポートすると、そのAppで現在動作中のテーマをインポートして適用します。 そのAppのカスタムテーマライブラリに保存されている以前のテーマを使用する場合は、そのAppに移動して JSONテーマファイルをダウンロード します。そのJSONテーマファイルは、どのAppにもアップロードできます。
注記： 背景画像テーマはコピー されません 。必要に応じて個別に適用する必要があります。
Appのホームからカスタムテーマをダウンロードする
- Appのホームに移動して、ダウンロードしたいカスタムテーマを含むAppを見つけます。
-
そのAppの上にカーソルを置き、 ［詳細］ （縦の三点メニュー）から ［テーマファイルをダウンロード］ を選択します。
これにより、現在のすべてのカスタマイズを含め、そのAppで使用されているカスタムテーマのJSONファイルをダウンロードできます。別のカスタマイズを含む古いテーマを使用する場合は、「 App内からカスタムテーマをダウンロードする 」を参照してください。
App内からカスタムテーマをダウンロードする
-
Appエディター内で
［Appテーマ］ に移動してプレビューのサムネイルにカーソルを置き、 ［テーマを変更］ を選択して［テーマ］モーダルを開きます。
-
モーダルの ［カスタムテーマ］ タブに移動し、ダウンロードしたいテーマを選んで ［テーマをダウンロード］ を選択します。
カスタムテーマのJSONファイルがコンピューターにダウンロードされます。
カスタムテーマを新しいAppにアップロードする — JSONファイル
別のAppでカスタムテーマを再利用するには、まず、Appのホームに表示される新しいAppを作成する必要があります。- Appのホームに移動し、再利用したいカスタムテーマを含むAppを見つけます。
-
そのAppの上にカーソルを置き、 ［詳細］ （三点リーダー）から ［編集］ を選択します。
Appエディターが開きます。
-
左側のナビゲーションの
［Appテーマ］ でプレビューのサムネイルにカーソルを置き、 ［テーマを変更］ を選択して［テーマ］モーダルを開きます。
-
モーダルの ［カスタムテーマ］ タブに移動し、 ［テーマをアップロード］ を選択します。
- ダウンロードしたJSONファイルを選択します。テーマが正常にアップロードされると、モーダルの ［カスタムテーマ］ タブに表示されます。
- テーマのサムネイルを選択し、 ［適用］ をクリックしてアップロードしたテーマをAppに取り込みます。
- Appエディターで ［保存］ を選択し、テーマの変更を完了します。
既存のAppからカスタムテーマをインポートする
- カスタムテーマを適用するAppのAppエディターを開きます。
-
左側のナビゲーションの
［Appテーマ］ でプレビューのサムネイルにカーソルを置き、 ［テーマを変更］ を選択して［テーマ］モーダルを開きます。
-
［Appテーマ ］タブで、 ［Appからテーマをインポート］ を選択します。
- 適用したいカスタムテーマを含むAppを見つけて選択します。 ［テーマをインポート］ を選択します。
-
モーダルには、インポート、適用、完了の3つのステップが表示されます。インポートが完了したら、モーダルを閉じます。
- Appエディターで ［保存］ を選択し、テーマの変更を完了します。