ユースケース開発React アプリケーションのためのOSDK開発環境

注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。

開発環境

このページでは、プラットフォーム内の VS Code ワークスペースを使用してオントロジー SDK の React アプリケーションを構築する際の開発ワークフローを説明します。

はじめに

コード環境で開発できるようにするには、Developer Console をセットアップする必要があります。セットアップ時に、Developer Console からコードリポジトリを作成できるようにするため、クライアント向けアプリケーションを作成を選択する必要があります。

Developer Console からクライアント向けアプリケーションを作成する

VS Code ワークスペースを使用するには、Developer Console を開き、左側のパネルの Code repository セクションでコードリポジトリを作成を選択します。この操作により、デフォルトの React テンプレートを使用してリポジトリがセットアップされます。その後、VS コードで開くを選択すると、プラットフォーム内のワークスペースが起動します。

Developer Console から VS Code ワークスペースにコードリポジトリを作成する

リポジトリのテンプレートには、認可とオントロジー SDK が組み込まれた基本的な React アプリケーションが含まれます。

開発ライフサイクル

VS Code ワークスペースが起動すると、左側にコードエディター、右側にアプリケーションのライブプレビューが表示されます。ローカル環境と同じようにコードの編集をはじめられます。

VS Code ワークスペースのランディングページ。

編集する

これで React アプリケーションの構築をはじめられます。コードを記述した後は必ず編集とテストを行い、git コマンドまたは VS Code のインターフェースを使用して変更をコミットしてプッシュし、プロジェクトのほかの開発者が閲覧できるようにしてください。ターミナルで npm run lint、npm run test、npm run build を実行して、チェックに成功することを確認します。

左側のパネルのオントロジータブでは、オントロジー SDK 用に生成されたドキュメントやコードスニペットを表示したり、Developer Console に戻ったりすることもできます。

VS Code ワークスペースの「オントロジー」タブで利用可能な選択肢。

デプロイする

React アプリケーションをデプロイするには、まずリリースを作成する必要があります。通常は git tag コマンドを使用して、バージョン番号を設定し、リポジトリにプッシュします。

Copied!
1 2 git tag <x.y.z> git push origin <x.y.z>

または、画面右上の Code Repositories で開くを選択し、Code Repositories のインターフェースからリリースを作成することもできます。バージョン管理タブに移動し、タグとリリースセクションを開くと、過去のリリースを表示し、新しいリリースを作成できます。

Code Repositories の「バージョン管理」タブにある「タグとリリース」セクション。

リリースがチェックに合格すると、Developer Console でアプリケーションを表示できるようになります。

Code Repositories のチェックと Developer Console の Web サイトホスティング

コンテンツセキュリティポリシー

デフォルトでは、制限の厳しいコンテンツセキュリティポリシー (CSP) が適用されます。そのため、Foundry 以外の URI へのリクエストは失敗し、明示的に許可する必要があります。

CSP エラーを検出するには、F12 キーを押してコンソール内のログを確認します。CSP による失敗がある場合、以下のようなエラーが表示されます。

コンソールに表示される CSP エラーの例。

VS Code ワークスペースには一時的な CSP を適用できます。セキュリティ上の理由から、この CSP はこのワークスペースのほかのユーザーには適用されず、ワークスペースが一時停止または再起動されると有効期限が切れます。

VS Code ワークスペースに CSP を適用するワークフロー。

VS Code ワークスペース内でアプリケーションをテストした後は、Developer Console アプリケーションの CSP が更新されていることを確認してください。

Developer Console の CSP 設定画面。

開発のヒント

To Do アプリケーションのチュートリアル

Developer Console とオントロジー SDK を初めて使う場合は、いずれかのチュートリアルに沿ってはじめることを推奨します。エンロールメント内の Build with AIP アプリケーションに移動し、ワークフローの例のいずれかをインストールします。

Build with AIP で利用可能な To Do アプリケーションのチュートリアル。

プログレッシブ Web アプリケーション(PWA)

編集作業をより快適にするために、ワークスペースをプログレッシブ Web アプリケーション(PWA)としてインストールできます。PWA では、タブを閉じる Cmd+W(macOS)など、よく使われるショートカットの一部が利用できます。

PWA アプリケーションをインストールして開くためのポップアップメッセージ。

VS Code Workspaces の PWA アプリケーションの例。

Zen モード

ネイティブの VS Code に近い操作感を得るには、Zen モードの使用を推奨します。有効にするには、表示 > Zen モードを有効にするを選択します。Zen モードではプラットフォームのインターフェースが非表示になり、VS Code がブラウザーのウィンドウ全体に表示されます。Zen モードを終了するには、画面上部中央の3つのドット ... にカーソルを合わせます。

Zen モードを使用するオプションと、プラットフォーム内での表示。

ローカル開発

プラットフォーム内で作業する代わりに、次の方法でローカルマシン上で作業できます。

  • Code Repositories アプリケーションでリポジトリに移動し、画面右上のローカルで作業を選択して、リポジトリをクローンし、FOUNDRY_TOKEN をローカル環境にエクスポートします。

    Code Repositories からローカルで作業するオプション。

詳細については、リポジトリ内の readme.md ファイルを参照してください。

リポジトリを Palantir プラットフォームの外部に保存しながら、Developer Console を使用してアプリケーションをデプロイできます。Foundry にオントロジー SDK アプリケーションをデプロイするドキュメントで詳しくはこちらをご覧ください。

PR プレビュー[ベータ版]

ベータ版

React アプリケーションの PR プレビューは開発のベータ版段階にあり、お使いのエンロールメントでは利用できない場合があります。開発が進行中のため、機能が変更される場合があります。

プロジェクトの効率を高め、共同作業を容易にするために、更新をプッシュする前に React アプリケーションの変更を PR プレビューで確認できます。PR(プルリクエスト)プレビューでは、プルリクエストにコミットされたコードに基づく、動作するバージョンの React アプリケーションが提供されます。アプリケーションに提案された変更を、メインブランチにマージされて本番環境の状態に反映される前にプレビューできるため、望ましくない結果がないかを確認し、変更が本番環境に反映される前にユーザー向けのワークフローを確認しやすくなります。以前は、アプリケーションチームの構築担当者、デザイナー、その他のメンバーが変更を表示するには、開発環境を作成する必要がありました。PR プレビュー機能によってこの要件がなくなり、本番環境に反映するデザインと機能の変更をより迅速に確認でき、より効率的に共同作業を進められます。

PR プレビュー機能は、Developer Console の Web ホスティング機能を使用して Foundry のコードリポジトリでホストされている、すべてのオントロジー SDK の React アプリケーションで利用できます。

PR プレビューをはじめるには、次の手順に沿って進めます。

  1. まず、Developer Console でアプリケーションを生成します。

  2. 次に、そのアプリケーションの Web サイトホスティングを設定します。

    Developer Console の Web サイトホスティング設定ページ。

  3. Visual Studio Code 向け Palantir 拡張機能で利用可能な開発者機能を活用するには、VS Code ワークスペースの使用を選択します。Code Repositories でアプリケーションコードを開くこともできます。どちらの環境でも、リポジトリにブランチを作成し、コードの変更を実装してコミットし、更新をプッシュできます。変更を行うには、次のターミナルコマンドまたは環境のインターフェースを使用できます。

    1. 新しいブランチを作成します:git checkout -b myFeatureBranch main
    2. コードの変更を実装し、作業をコミットします:git commit -am "implement UI change to show PR Preview"
    3. 変更をコードリポジトリにプッシュします:git push --set-upstream origin myFeatureBranch
  4. 必要な変更を行い、すべてのチェックが完了したら、VS Code ワークスペースで作業していた場合は Code Repositories に戻ります。

  5. 画面上部のバージョン管理タブに移動し、プルリクエストを選択します。

  6. プレビューするプルリクエストを選択し、右下のプレビューを選択すると、React アプリケーションのプレビュー版が開きます。

    変更のプレビューを表示するオプションがある Code Repositories のプルリクエスト。

プルリクエストのコミットタブに移動すると、このブランチの各コミットの PR プレビューリンクも確認できます。PR プレビューは、プルリクエストの作成から7日以内にのみ利用できます。7日が経過すると、プレビューの有効期限が切れます。

プレビューの権限

React アプリケーションの PR プレビュー機能にアクセスするには、Developer Console でそのアプリケーションに対する適切な権限が付与されている必要があります。これらの権限を管理するには、Developer Console でアプリケーションを開き、左側のサイドバーの共有に移動します。

アプリケーションコードの変更やプルリクエストの作成を行い、PR プレビューを他のユーザーと共有するには、所有者または編集者の権限が必要です。アプリケーションコードや設定を編集する権限を付与せずに PR プレビューをユーザーと共有するには、ホストされた Web サイトを共有で、そのユーザーを閲覧者として追加します。

ユーザーに PR プレビューの閲覧アクセスを付与するオプションがある Developer Console の権限設定ページ。