Box UI ElementsとAngular

Published in

Box Developer Japan Blog

10 min readJan 18, 2023

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

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

注: この記事は、Angular 2以上のアプリを対象としています。今回のデモでは、v15.0.0を使用しました。

Box UI Elementsとは

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

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

アプリの作成手順

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

⚠️ 注: CDNからコードをインポートする代わりに、パッケージを直接プロジェクトにインストールすることもできます。必ずメインのpackage.jsonにbox-ui-elementsのピア依存関係を追加してください。その後、angular.jsonファイルに、NodeモジュールからJSコードとCSSコードをインポートします。

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ファイルで宣言する必要があります。

注: 便宜上、パスのエイリアスを追加してtsconfig.jsonも調整しました。これにより、相対パスの代わりに‘@app/path/to/file’を使用できます。この変更を適用した後は、サーバーとエディターの再起動が必要になる場合があります。

"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ファイルで、構成オブジェクトをコンポーネントのデータ入力とバインドします。