Box Developer Blog
Published in

Box Developer Blog

Box UI ElementsとAngular

前回の記事では、Box UI ElementsとVue 3の統合を取り上げました。今回は、人気のある別のフロントエンドフレームワークAngularとBox UI Elementsの統合について見ていきましょう。この記事では、構成オブジェクトを渡すことにより6種類のBox UI Elementを表示できる汎用コンポーネントを作成する方法について説明します。デモアプリを表示する場合、コードはこちらのリポジトリで入手できます。

前提条件: Box開発者アカウント、Node.js

Box UI Elementsとは

要約: Box UI Elementsとは、コンテンツのアップロード、Boxに保存されているファイルやフォルダのプレビューなど、開発者がメインのBoxウェブアプリの要素を自分のアプリケーションに追加できるようにする、あらかじめ組み込まれた一連のUIコンポーネントです。

コンテンツアップローダーコンポーネントを使用したAngularデモアプリのビュー

アプリの作成手順

  1. Angularアプリを設定する
  2. 開発者コンソールでBoxアプリを作成する
  3. ドキュメントのheadにCDNアセットを挿入するサービスを記述する
  4. CLIを使用して新しいAngularコンポーネントを作成する
  5. Box UI Elementを初期化する
  6. 選択したBox UI Elementを表示する

1. Angularアプリを設定する

Angular CLIをインストールし、新規プロジェクトを作成します。プロジェクトの名前を選択し、設定を調整します。今回のデモアプリには、SCSSとルーティングを含めました

npm install -g @angular/cli
ng new my-app

詳細については、Angularのドキュメントサイトを参照してください。プロジェクトが作成されたら、ディレクトリを変更して実行します。

cd <my-app>
ng serve --open

このプロジェクトのデフォルトのリンクはhttp://localhost:4200です。このリンクは、次の手順で、Box開発者コンソールでCORSドメインを設定する際に使用します。

2. 開発者コンソールでBoxアプリを作成する

開発者アカウントにログインし、左下にある [開発者コンソール] をクリックします。アカウントを所有していない場合は、サインアップページにアクセスしてください。テキストボックスに情報を入力し、[開始する] をクリックします。アプリに変更を加えるために2要素認証の設定が必要になります。

これで、新しいアプリを作成することも、既存のアプリを使用することもできるようになります。

CORSを設定する

アプリの [構成] タブに移動して、[CORSドメイン] まで下にスクロールし、Angularプロジェクトのローカルアドレスhttp://localhost:4200を貼り付けます。忘れずに末尾のスラッシュを削除してください。

アクセス権限を設定する

この手順は、コンテンツアップローダーコンポーネントなどを使用する場合に役立ちます。デフォルトでは、外部アプリからのアクセス権限は読み取り専用です。必要に応じて、カスタムアプリからのファイルのアップロードまたは削除を許可するには、[アプリケーションスコープ] に移動し、[Boxに格納されているすべてのファイルとフォルダへの書き込み] チェックボックスをオンにします。

トークンを生成してアプリに追加する

[開発者トークン] セクションまでスクロールして、トークンを生成します。トークンの有効期間は1時間だけであることに注意してください。⚠️ トークンの有効期限が切れたら、Box開発者コンソールに戻ってトークンを取り消し、プロジェクト内の古いトークンを置き換えてください。

Angularプロジェクトのsrcフォルダに、environmentフォルダと、認証用の開発トークンを格納するenvironment.tsファイルを作成します。

export const environment = {
production: false,
BoxDeveloperToken: 'YourDeveloperToken'
};

3. ドキュメントのheadにCDNアセットを挿入するサービスを記述する

appフォルダ内に、head.service.tsファイルを格納するserviceフォルダを作成しましょう。このサービスは、Renderer2を使用してドキュメントのheadにスクリプトとスタイルシートリンクを読み込む役割を担います。これを実現するには、以下をインポートする必要があります。

  • Renderer2: 「この基底クラスを拡張してカスタムレンダリングを実装します。」
  • DOCUMENT: 「メインのレンダリングコンテキストを表す依存性注入トークン。ブラウザでは、これはDOMドキュメントになります。」
  • Inject: 「依存性のカスタムプロバイダを指定するクラスコンストラクタの依存性パラメータで使用されるパラメータデコレータ。」
  • Injectable: 「依存性として提供および注入可能というマークをクラスに付けるデコレータ。」

HeadServiceには、4つのパブリックメソッドが含まれています。最初の2つのメソッドは、指定されたリソースを読み込み、残りの2つのメソッドは、その指定されたリソースが読み込み済みかどうかを確認します。

HeadServiceは、app.module.tsファイルで宣言する必要があります。

"baseUrl": "./",
"paths": {
"@app/*": ["./src/app/*"],
"@environment/*": ["./src/environment/*"]
},

4. CLIを使用して新しいAngularコンポーネントを作成する

Angular CLIを使用して、boxコンポーネントを作成します。プロジェクトの構造をわかりやすくするには、componentsフォルダを作成して1か所にすべてを格納することをお勧めします。

ng generate component box

汎用のコンポーネントセレクタをapp-box-componentからbox-componentに変更しました。

このコンポーネントは汎用ラッパーになり、コンポーネントの名前、フォルダID、特定のBox UI ElementのCDNリソースへのリンクなどのプロパティとともに構成オブジェクトを受け入れます。

5. Box UI Elementを初期化する

コンポーネントのnameの値を制限するために、contentのUI Elementsの名前の列挙型を記述した追加ファイルを作成しました。各UI Elementの詳細と追加機能については、Boxの開発者向けドキュメントを参照してください。

次に、box-componentをインポートします。

  • BoxComponentsTypes: UI Elementsの名前の列挙型にアクセス
  • environment: 開発者トークンにアクセス
  • HeadService: CDNリソースを挿入するために手順3で作成されたサービス
  • Input: コンポーネントの構成オブジェクトを定義
  • AfterViewInit: コンポーネントの初期化をフック

このコンポーネントはcomponentDataの入力を受け取ります。つまり、そのインターフェースには、fonderId、boxCdnJS、boxCdnCssに加え、コンポーネントのname (BoxComponentsType列挙型で宣言された値) が含まれます。

initialiseComponentメソッドで渡されるコンポーネント名は動的であり、BoxComponentsTypes列挙型で定義された6つのコンポーネントのいずれかを初期化できます。

最後に、コンポーネントのHTMLファイルで、コンポーネント名に関連したIDをコンテナに指定します。

6. 選択したBox UI Elementを表示する

前の手順で作成した汎用のBoxコンポーネントを表示するために、BoxComponentInterfaceと一致する構成オブジェクトを渡します。Box UI ElementsのいずれかのCDNリンクを取得するには、ドキュメントサイトに移動します。ここではReactライブラリを含まないアプリを作成するため、「Reactを使用するJS」としてマークされているスクリプトのリンクを選択します。アプリですべてのBox UI Elementsを利用することを目指している場合、すべてのCDNリンクを1つのファイルに保持するように改善することをお勧めします。

今回のデモアプリでは、pages用に別のフォルダを作成し、新しいコンポーネントcontent-explorerを追加しました。さらに、app-routing.module.tsファイルでは、このコンポーネントをルートとして定義しました。

最後に、content-explorerのHTMLファイルで、構成オブジェクトをコンポーネントのデータ入力とバインドします。

別のコンポーネント (コンテンツアップローダーなど) を表示するには、単に新しいコンポーネントを作成し、同じようにBoxComponentTypesのいずれかを宣言して、適切なCDNリンクを構成オブジェクトに追加するだけです。

以上です。コーディングを楽しみましょう。

詳細については、Boxの開発者向けドキュメントサイトを参照してください。質問がある場合は、Boxの開発者向けフォーラムに英語で投稿してください。また、Box UI Elementsに関するリクエストがある場合は、Box Pulseに英語で投稿してください。

--

--

News and stories for working with the Box APIs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store