Documentation Index
Fetch the complete documentation index at: https://domoinc-arun-raj-connectors-domo-480626-update-new-field-mi.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
はじめに
App Studio Appを作成する場合、最初に行うのはテーマの選択です。
- フォント
- 色
- カードと表のスタイル
- タブ
- 角丸
この記事では、テーマの選択と編集、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つのアクセントカラーが含まれ、各色にはあらかじめグラデーションが設定されています。
追加を選択すると、色ピッカーが開きます。含まれているアクセントカラーを編集すると、プライマリカラーにもとづいてアクセントカラーの候補が表示されます。
展開された系列
チャートの色の**［展開された系列］は、チャートの系列数が増えると使用されます。また、折れ線グラフで使用されることもあります。展開された系列の色を追加したり、編集したりすることができます。［展開された系列］**で 追加を選択すると、選択したテーマの色で専用の色ピッカーが表示されます。
系列の色を並べ替えるには、色のハンドルを目的の順番にドラッグします。
追加を選択すると、スポイトツール付きの色ピッカーが表示され、色を正確に選択できます。色ピッカーでは、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を見つけて選択します。**［テーマをインポート］**を選択します。
-
モーダルには、インポート、適用、完了の3つのステップが表示されます。インポートが完了したら、モーダルを閉じます。
- Appエディターで**［保存］**を選択し、テーマの変更を完了します。