メインコンテンツへスキップ

はじめに

プロコードエディターを使用すると、Domoプラットフォーム内から価値の高いアプリケーションを作成できます。 この記事では、プロコードエディターでAppを作成してバージョンをコントロールする方法について説明します。

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

DomoインスタンスのAsset Libraryを使用して、プロコードエディターでAppにアクセスしたり新しいAppを作成したりできます。プロコードエディターにアクセスするには、以下の手順を実行します。
  1. Asset Library を開きます。
  2. [プロコードエディター] を選択して、 [テンプレート] モーダルを開きます。
    Screenshot 2024-07-17 at 9.40.54 AM.png
  3. テンプレートを選択してエディターを開き、ワークスペースを設定します。
    Screenshot 2024-07-17 at 9.49.35 AM.png
このページのトップへ

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

ダークモード: プロコードエディターでは、ダークモードがデフォルトでオンになっています。オフにするには、 Domoのロゴのドロップダウン > [ダークモードを無効にする] を選択します。
disable dark more.jpg

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

デフォルトでは、エクスプローラー、エディター、プレビューのすべてが画面に表示されます。しかし、 [ファイルエクスプローラーを非表示] および [プレビューを非表示] コントロールを使用して、作業領域をカスタマイズできます。
custom screen gif.gif
注記: Appプレビューが表示されない場合は、トップナビゲーションの [プレビューを表示]/[プレビューを非表示] コントロールを使用してください。内側の境界線を左右にドラッグすると、プレビューのサイズを変更できます。
preview.jpg
Appをプレビューする際には、以下の操作を実行できます。

操作

画像

一番最後に保存した変更を確認するには、 更新 を選択します。

refresh preview.jpg

Appプレビューの幅と高さを変更するには、 [カスタムサイズ] スイッチを切り替えます。ピクセル単位で表示するか、Domoカードとして表示するかを選択できます。

変更を適用するには、 更新 を選択します。

Screenshot 2024-08-08 at 10.51.53 AM.png

新しいブラウザーウィンドウでプレビューを操作するには、 [新しいウインドウで開く] を選択します。

新しいウィンドウでプレビューを操作した後、エディター内にプレビューを再度表示するには、 [プレビューを表示] を選択する必要があります。

open new preview.jpg
このページのトップへ

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

Domoのロゴのドロップダウン > [ヘルプ] > [キーボードショートカット] を選択すると、プロコードエディターで利用可能なキーボードショートカットが表示されます。
Screenshot 2024-08-07 at 11.13.17 AM.png
このページのトップへ

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

マシンからAppにファイルを追加するには、 Domoのロゴのドロップダウン > [ファイルをアップロード] を選択します。
ファイルの宛先フォルダを選択し、 [アップロード] を選択します。
Screenshot 2024-08-08 at 11.07.31 AM.png
このページのトップへ

Appを作成する

  1. プロコードエディターに アクセス してテンプレートを選択します。 テンプレートを選択すると、新しいAppがAsset Libraryに表示されます。
  2. ワークスペースを設定して 、マシンからファイルを アップロード します。
  3. エディターでコードを追加して編集します。
    code editor.jpg
  4. (オプション)ファイルエクスプローラーで、 [新しいファイル] を選択し、サポートされているファイルをプロジェクトに追加します。プロコードエディターでは、多くのファイルタイプがサポートされています。通常は、CSS、JS、HTMLファイルを使用します。
  5. 新しいファイルを作成した後、ファイルエクスプローラーでそのファイルを選択してエディターで開きます。ダブルクリックして新しいタブで開き、ピン留めします。エディターでは、ピン留めされていないタブは斜体で表示され、ピン留めされているタブは斜体で表示されません。
    pinned tabs.jpg
  6. (オプション) [新しいフォルダ] を選択して、ファイルエクスプローラーにフォルダを追加します。ファイルをドラッグしてフォルダに配置します。ファイル/フォルダにマウスポインターを合わせ、オプションを表示して選択します。
    new folder.jpg
  7. (条件付き)タブの上部にある 閉じる (xアイコン)オプションを使用すると、タブを個別に閉じることができます。複数のタブを同時に閉じるには、 [すべてのタブを閉じる] オプションと [保存済みのものを全て閉じる] オプションがあります。 エディターで アクションメニュー (横三点アイコン)を開き、どちらかのオプションを使用します。
    close all tabs.jpg
  8. 利用可能なオプションの1つを使用して、 Appを保存します
    接続されたカードを表示する — Appに接続されているすべてのカードを表示するには、 Domoのロゴのドロップダウン > [接続された カード] を選択します。
このページのトップへ

Appを保存する

エディターの上部のナビゲーションにある以下の保存オプションを使用して、Appを保存します。
  • [全て保存] これは デフォルトの保存オプションで、Asset LibraryでのAppへのすべての変更を保存します。
  • [新しいバージョンを作成] — すべての変更が新しいバージョンのAppに保存されます。保存時にリリースノートを追加できます。
  • [既存のバージョンに保存] — 保存されているバージョンのAppが1つ以上ある場合は、既存のバージョンへの変更が保存されます。変更をライブバージョンにすぐに保存すると、古いAppバージョンと関連するカードが置き換えられます。
  • [保存して新しいカードを作成] すべての変更が保存され、新しいAppカードが作成されます。システムの [マイページ] のAppカードにリダイレクトされます。
Screenshot 2024-11-18 at 2.16.55 PM.png

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

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

Appをダウンロードする

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

Appを編集する

Appを編集するには、Asset LibraryでAppを探して選択し、詳細ページを表示します。複数のバージョンのAppがある場合は、バージョンを変更してそのバージョンの情報を表示できます。
choose version.jpg
Appのオプション > [デザインを編集] を選択して、プロコードエディターでAppを開きます。 複数のバージョンのAppがある場合は、最新バージョンが自動的に開きます。
このページのトップへ 日本語