> ## Documentation Index
> Fetch the complete documentation index at: https://domoinc-openapi-sync-dataflows.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# プロコードエディターでDomo Appを作成する

export const InlineImage = ({src, alt = '', height = '1.6em'}) => {
  return <img noZoom src={src} alt={alt} style={{
    display: 'inline',
    verticalAlign: 'start',
    height: height,
    margin: '0'
  }} />;
};

### はじめに

プロコードエディターを使用すると、Domoプラットフォーム内から価値の高いアプリケーションを作成できます。

この記事では、プロコードエディターでAppを作成してバージョンをコントロールする方法について説明します。

***

* [プロコードエディターにアクセスする](#access_the_pro-code_editor)
* [ワークスペースを設定する](#set_up_your_workspace)
  * [ファイルエクスプローラーとAppのプレビューの非表示/表示を切り替える](#hide_file_explorer_and_preview)
  * [キーボードショートカットを表示する](#view_keyboard_shortcuts)
* [プロジェクトにファイルをアップロードする](#upload_files)
* [Appを作成する](#create_an_app)
  * [Appを保存する](#save_an_app)
  * [Appバージョン間を移動する](#move_between_app_versions)
* [Appをダウンロードする](#download_an_app)
* [Appを編集する](#edit_an_app)

***

### プロコードエディターにアクセスする

DomoインスタンスのAsset Libraryを使用して、プロコードエディターでAppにアクセスしたり新しいAppを作成したりできます。プロコードエディターにアクセスするには、以下の手順を実行します。

1. **Asset Library** を開きます。
2. **［プロコードエディター］** を選択して、 **［テンプレート］** モーダルを開きます。

   <Frame>
     <img alt="Screenshot 2024-07-17 at 9.40.54 AM.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000001niDq.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=eb9069a4147dd6fbb474982877ca3709" style={{width: 900, height: 303}} width="3456" height="1164" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000001niDq.jpg" />
   </Frame>
3. テンプレートを選択してエディターを開き、ワークスペースを設定します。

   <Frame>
     <img alt="Screenshot 2024-07-17 at 9.49.35 AM.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000001nmVx.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=b14dd87d93dea11a9d652dcd26cb7806" style={{width: 672, height: 351}} width="3234" height="1690" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000001nmVx.jpg" />
   </Frame>

[このページのトップへ](#intro)

### ワークスペースを設定する

<Note>
  **ダークモード：** プロコードエディターでは、ダークモードがデフォルトでオンになっています。オフにするには、 **Domoのロゴのドロップダウン** > **［ダークモードを無効にする］** を選択します。

  <Frame>
    <img alt="disable dark more.jpg" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000028hUr.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=3f4e67b1c408eb722b4af520cc66d013" width="217" height="286" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000028hUr.jpg" />
  </Frame>
</Note>

# ファイルエクスプローラーとAppのプレビューの非表示/表示を切り替える

デフォルトでは、エクスプローラー、エディター、プレビューのすべてが画面に表示されます。しかし、 <InlineImage src="/images/kb/ja/ka0Vq000000LslP-00N5w00000Ri7BU-0EMVq000001mqzp.jpg" /> **［ファイルエクスプローラーを非表示］** および <InlineImage src="/images/kb/ja/ka0Vq000000LslP-00N5w00000Ri7BU-0EMVq000001mnU7.jpg" /> **［プレビューを非表示］** コントロールを使用して、作業領域をカスタマイズできます。

<Frame>
  <img alt="custom screen gif.gif" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000003sgmv.jpg?s=0e56b426c6bbb439fe602844041dd3b9" style={{width: 900, height: 351}} width="1338" height="522" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000003sgmv.jpg" />
</Frame>

**注記：** Appプレビューが表示されない場合は、トップナビゲーションの <InlineImage src="/images/kb/ja/ka0Vq000000LslP-00N5w00000Ri7BU-0EMVq000001mnU7-1.jpg" /> **［プレビューを表示］/［プレビューを非表示］** コントロールを使用してください。内側の境界線を左右にドラッグすると、プレビューのサイズを変更できます。

<Frame>
  <img alt="preview.jpg" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000028c29.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=60de6c69ccea349dbe45c4b7ee63307e" style={{width: 899, height: 445}} width="3584" height="1774" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000028c29.jpg" />
</Frame>

Appをプレビューする際には、以下の操作を実行できます。

<table border="1" cellpadding="1" cellspacing="1" data-aura-rendered-by="33:202;a"><thead><tr><th colspan="1" rowspan="1"><p> 操作 </p></th><th colspan="1" rowspan="1"><p> 画像 </p></th></tr></thead><tbody><tr><td colspan="1" rowspan="1"><p> 一番最後に保存した変更を確認するには、 <InlineImage src="/images/kb/ja/ka0Vq000000LslP-00N5w00000Ri7BU-0EMVq0000028a0M.jpg" /><b> 更新 </b> を選択します。 </p></td><td colspan="1" rowspan="1"><p><img alt="refresh preview.jpg" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000028dz7.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=ad71e3b6c3104564094a2401640cc82a" style={{width: 753, height: 112}} width="2178" height="324" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000028dz7.jpg" /></p></td></tr><tr><td colspan="1" rowspan="1"><p> Appプレビューの幅と高さを変更するには、 <b> ［カスタムサイズ］ </b> スイッチを切り替えます。ピクセル単位で表示するか、Domoカードとして表示するかを選択できます。 </p><p> 変更を適用するには、 <b> 更新 </b> を選択します。 </p></td><td colspan="1" rowspan="1"><p><img alt="Screenshot 2024-08-08 at 10.51.53 AM.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000028e8n.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=6030e07b0a380d033d524e523bef4a8a" style={{width: 749, height: 113}} width="2162" height="326" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000028e8n.jpg" /></p></td></tr><tr><td colspan="1" rowspan="1"><p> 新しいブラウザーウィンドウでプレビューを操作するには、 <InlineImage src="/images/kb/ja/ka0Vq000000LslP-00N5w00000Ri7BU-0EMVq0000028WWF.jpg" /><b> ［新しいウインドウで開く］ </b> を選択します。 <br /><br /> 新しいウィンドウでプレビューを操作した後、エディター内にプレビューを再度表示するには、 <InlineImage src="/images/kb/ja/ka0Vq000000LslP-00N5w00000Ri7BU-0EMVq000001mnU7-2.jpg" /><b> ［プレビューを表示］ </b> を選択する必要があります。 </p></td><td colspan="1" rowspan="1"><img alt="open new preview.jpg" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000028elV.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=e8d4958c62ed2805046bb66a5558fac5" style={{width: 746, height: 111}} width="2178" height="324" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000028elV.jpg" /><a id="view_keyboard_shortcuts" target="_blank" /></td></tr></tbody></table>

[このページのトップへ](#intro)

# キーボードショートカットを表示する

**Domoのロゴのドロップダウン** > **［ヘルプ］** > **［キーボードショートカット］** を選択すると、プロコードエディターで利用可能なキーボードショートカットが表示されます。

<Frame>
  <img alt="Screenshot 2024-08-07 at 11.13.17 AM.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000027Ttl.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=bf20be2211dd0ef9c273c1e8311b44e1" style={{width: 499, height: 292}} width="615" height="360" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000027Ttl.jpg" />
</Frame>

[このページのトップへ](#intro)

### プロジェクトにファイルをアップロードする

マシンからAppにファイルを追加するには、 **Domoのロゴのドロップダウン** > **［ファイルをアップロード］** を選択します。

<Frame>
  <img src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000001hTxR.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=ca44523b5fc63e90ce566086ff1e30d7" style={{width: 228, height: 289}} width="406" height="514" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000001hTxR.jpg" />
</Frame>

ファイルの宛先フォルダを選択し、 **［アップロード］** を選択します。

<Frame>
  <img alt="Screenshot 2024-08-08 at 11.07.31 AM.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000028fMb.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=875db5894f954bea797b2c72f8873b3d" style={{width: 350, height: 256}} width="772" height="564" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000028fMb.jpg" />
</Frame>

[このページのトップへ](#intro)

### Appを作成する

1. プロコードエディターに
   [アクセス](#access_the_pro-code_editor) してテンプレートを選択します。

   テンプレートを選択すると、新しいAppがAsset Libraryに表示されます。
2. [ワークスペースを設定して](#set_up_your_workspace) 、マシンからファイルを [アップロード](#upload_files) します。
3. エディターでコードを追加して編集します。

   <Frame>
     <img alt="code editor.jpg" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000029EDt.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=d0d4e49488889d146c6c7db3523cbb97" style={{width: 900, height: 452}} width="3530" height="1772" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000029EDt.jpg" />
   </Frame>
4. （オプション）ファイルエクスプローラーで、 **［新しいファイル］** を選択し、サポートされているファイルをプロジェクトに追加します。プロコードエディターでは、多くのファイルタイプがサポートされています。通常は、CSS、JS、HTMLファイルを使用します。

   <Frame>
     <img src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000001hXbF.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=fb8d68add9b0a66f9cd8e459ca309658" style={{width: 249, height: 244}} width="496" height="484" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000001hXbF.jpg" />
   </Frame>
5. 新しいファイルを作成した後、ファイルエクスプローラーでそのファイルを選択してエディターで開きます。ダブルクリックして新しいタブで開き、ピン留めします。エディターでは、ピン留めされていないタブは斜体で表示され、ピン留めされているタブは斜体で表示されません。

   <Frame>
     <img alt="pinned tabs.jpg" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq00000296Rd.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=e419414bc6d5419a46f36596df9b638c" style={{width: 447, height: 67}} width="720" height="108" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq00000296Rd.jpg" />
   </Frame>
6. （オプション） **［新しいフォルダ］** を選択して、ファイルエクスプローラーにフォルダを追加します。ファイルをドラッグしてフォルダに配置します。ファイル/フォルダにマウスポインターを合わせ、オプションを表示して選択します。

   <Frame>
     <img alt="new folder.jpg" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000002BWGL.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=5896ebd7f952f4b69f5145d67118ea24" style={{width: 250, height: 244}} width="446" height="436" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000002BWGL.jpg" />
   </Frame>
7. （条件付き）タブの上部にある **閉じる** （xアイコン）オプションを使用すると、タブを個別に閉じることができます。複数のタブを同時に閉じるには、 **［すべてのタブを閉じる］** オプションと **［保存済みのものを全て閉じる］** オプションがあります。

   エディターで **アクションメニュー** （横三点アイコン）を開き、どちらかのオプションを使用します。

   <Frame>
     <img alt="close all tabs.jpg" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000029BBC.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=1bab73bead5332abb468de69955166fc" style={{width: 401, height: 276}} width="540" height="372" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq0000029BBC.jpg" />
   </Frame>
8. 利用可能なオプションの1つを使用して、
   [Appを保存します](#save_an_app) 。

   <Tip>
     **接続されたカードを表示する —** Appに接続されているすべてのカードを表示するには、 **Domoのロゴのドロップダウン** > **［接続された** **カード］** を選択します。
   </Tip>

[このページのトップへ](#intro)

# Appを保存する

エディターの上部のナビゲーションにある以下の保存オプションを使用して、Appを保存します。

* **［全て保存］** **—** これは デフォルトの保存オプションで、Asset LibraryでのAppへのすべての変更を保存します。
* **［新しいバージョンを作成］ —** すべての変更が新しいバージョンのAppに保存されます。保存時にリリースノートを追加できます。
* **［既存のバージョンに保存］ —** 保存されているバージョンのAppが1つ以上ある場合は、既存のバージョンへの変更が保存されます。変更をライブバージョンにすぐに保存すると、古いAppバージョンと関連するカードが置き換えられます。
* **［保存して新しいカードを作成］** **—** すべての変更が保存され、新しいAppカードが作成されます。システムの **［マイページ］** のAppカードにリダイレクトされます。

<Frame>
  <img alt="Screenshot 2024-11-18 at 2.16.55 PM.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000003siLi.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=8a195edbf3403be0ab8133939ef80f86" style={{width: 398, height: 201}} width="372" height="188" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000003siLi.jpg" />
</Frame>

# Appバージョン間を移動する

エディターのトップナビゲーションには、バージョンドロップダウンが含まれており、利用可能なAppバージョン間を移動できます。デフォルトでは、エディターを開くと最新バージョンが表示されます。

<Frame>
  <img src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000001id9z.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=4e1832a281ace44da5a9d939db4870fe" style={{width: 250, height: 144}} width="534" height="308" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000001id9z.jpg" />
</Frame>

[このページのトップへ](#intro)

### Appをダウンロードする

**Domoのロゴのドロップダウン** > **［デザインをダウンロード］** を選択して、AppコードをZIPファイルにダウンロードします。

### Appを編集する

Appを編集するには、Asset LibraryでAppを探して選択し、詳細ページを表示します。複数のバージョンのAppがある場合は、バージョンを変更してそのバージョンの情報を表示できます。

<Frame>
  <img alt="choose version.jpg" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000002A1jF.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=ce4c56869b88c701775f8e88f2bc9cdd" style={{width: 649, height: 324}} width="781" height="390" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000002A1jF.jpg" />
</Frame>

**Appのオプション** > **［デザインを編集］** を選択して、プロコードエディターでAppを開きます。

複数のバージョンのAppがある場合は、最新バージョンが自動的に開きます。

<Frame>
  <img src="https://mintcdn.com/domoinc-openapi-sync-dataflows/EtHMjR0Dwu423b1z/images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000001hWIc.jpg?fit=max&auto=format&n=EtHMjR0Dwu423b1z&q=85&s=a7be2848e30b68bcba1913966a0b8fe1" style={{width: 516, height: 258}} width="1200" height="600" data-path="images/kb/ka0Vq0000004oHZ-00N5w00000Ri7BU-0EMVq000001hWIc.jpg" />
</Frame>

[このページのトップへ](#intro)

日本語
