Box UI ElementsとVue 3
フロントエンド開発は、現在、フレームワークとライブラリの観点で見ると非常に多種多様です。割と一般的なのはReactですが、Vue.jsやAngular、その他の話題になっているライブラリで作成されたアプリも多数あります。この記事では、Vue 3アプリでBox UI Elementsを使用する可能性を探っていきます。
Box UI Elementsとは
Box UI Elementsとは、コンテンツのアップロード、Boxに保存されているファイルやフォルダのプレビューなど、開発者がメインのBoxウェブアプリの要素を自分のアプリケーションに追加できるようにする、あらかじめ組み込まれた一連のUIコンポーネントです。これらの使用に関するチュートリアルをご覧になりたい方は、私の同僚Rui Barbosaのブログ記事のシリーズを確認してください。
前提条件: Box開発者アカウント、Node.js、yarn (オプション)
アプリの作成手順
- Configure the Vue 3 appVue 3アプリを設定する
- 開発者コンソールでBoxアプリを作成する
- 以下のいずれかの方法を選択する
方法1: box-ui-elementsパッケージのインストール
- NVMでNode 14を使用する
- パッケージをインストールする
- peerDependenciesをメインのpackage.jsonに追加する
- Box UI ElementsをNodeモジュールから自分のコンポーネントにインポートする
- Composition APIを使用してUI Elementを初期化する
または
方法2: CDNスクリプトの追加
- @vue/headをインストールする
- @vue/headを使用してCDNスクリプトをドキュメントのheadに挿入する
- Composition APIを使用してUI Elementを初期化する
1. Vue 3アプリを設定する
ターミナルで以下のコマンドを使用してVue 3プロジェクトを作成します。詳細については、Vue 3のドキュメント (英語) を参照してください。
yarn init vue@latestプロジェクトの名前と設定を選択します。このデモでは、Vue Router、ESLint、Prettierを選択しました。プロジェクトが作成されたら、ディレクトリを変更して実行します。
cd <your-project-name>
yarn install
yarn devこのプロジェクトのデフォルトのローカルリンクはhttp://127.0.0.1:5173です。このローカルリンクは、次の手順で、Box開発者コンソールでCORSドメインを設定する際に使用します。
2. 開発者コンソールでBoxアプリを作成する
開発者アカウントにログインし、左下にある [開発者コンソール] をクリックします。アカウントを所有していない場合は、サインアップページにアクセスしてください。テキストボックスに情報を入力し、[開始する] をクリックします。アプリに変更を加えるために2要素認証の設定が必要になります。
これで、新しいアプリを作成することも、既存のアプリを使用することもできるようになります。
CORSを設定する
アプリの [構成] タブに移動して、[CORSドメイン] まで下にスクロールし、Vue 3プロジェクトのローカルアドレスhttp://127.0.0.1:5173/を貼り付けます。
アクセス権限を設定する
この手順は、コンテンツアップローダーコンポーネントなどを使用する場合に役立ちます。デフォルトでは、外部アプリからのアクセス権限は読み取り専用です。必要に応じて、カスタムアプリからのファイルのアップロードまたは削除を許可するには、[アプリケーションスコープ] に移動し、[Boxに格納されているすべてのファイルとフォルダへの書き込み] チェックボックスをオンにします。
トークンを生成してアプリに追加する
[開発者トークン] セクションまでスクロールして、トークンを生成します。トークンの有効期間は1時間だけであることに注意してください。⚠️トークンの有効期限が切れたら、開発者コンソールに戻ってトークンを取り消し、プロジェクト内の古いトークンを置き換えてください。
Vue 3プロジェクトのルートに、認証用の開発者トークンを格納するenvファイルを作成します。変数名には、必ずプレフィックスVITE_を追加してください。これで、クライアントアプリケーションにトークンが公開されます。
VITE_BOX_DEVELOPER_TOKEN=yourDeveloperToken3. 方法を選択する
ここで、以下の2つの方法のいずれかを選択できます。
- 1つ目の方法では、パッケージ全体 (すべてのBox UI Elements) とそのピア依存関係を直接プロジェクトにインストールします (Reactなどを含む)。この方法では、Node 14を使用する必要があり (下記参照)、最終的なバンドルのサイズが大きくなります。
- 2つ目の方法では、コンポーネントごとにCDNのスクリプトを挿入します。この方法を選択した場合、現在はサブリソース完全性のタグが欠如する可能性があります。
詳細については、Boxのドキュメントサイトを参照してください。
方法1: box-ui-elementsパッケージのインストール
NVMでNode 14を使用する
Vite (Vue 3のビルドツール) にはNode v14またはv16が必要です。一方、Box UI Elementsには現在Node v14が必要です。場合によっては、NVMを使用して、ローカルのNodeバージョンをv14に変更する必要があります。このツールの詳細については、ドキュメント (英語) を参照してください。
パッケージをインストールする
インストールの詳細については、npmのbox-ui-elementsページ (英語) も参照してください。
yarn add box-ui-elementspeerDependenciesをpackage.jsonに追加する
プロジェクト内でNodeモジュールに移動し、box-ui-elementsフォルダを見つけます。package.jsonファイルを開き、peerDependencyセクションからエントリをコピーします。アプリのメインのpackage.jsonファイルのdependenciesセクションにそのエントリを貼り付けます。次に、ターミナルでyarnを使用してBox UI Elementsをインストールします。この処理が終了したら、プロジェクトを実行できます。
Vueコンポーネントを作成する
それでは、コンテンツエクスプローラを表示するコンポーネントを作成しましょう。今回はComposition APIを使用してコードを作成することにしましたが、Vue 3ではOptions APIも引き続き使用できます。まず、コンテンツをレンダリングできる、ID付きのコンテナが必要です。この例では、コンポーネントはBoxフォルダIDという1つのプロパティだけを受け入れます。NodeモジュールからBox UI Elementsをインポートします。次に、コンテンツエクスプローラインスタンスを定義し、onMountedライフサイクルフックを使用してそのインスタンスを初期化します。コンテンツエクスプローラの詳細については、Boxのドキュメントを参照してください。
コンポーネントを表示するには、App.vueまたは個別のビューにそのコンポーネントをインポートし、フォルダIDをプロパティとして渡すだけです。値「0」はルートフォルダ専用です。
コンテンツエクスプローラコンポーネントで、実行中のVue 3アプリを確認できます。
コンテンツアップローダーなど、他のUI Elementsも自由にお試しください。実際に使えるこのデモは、GitHubリポジトリからダウンロードすることもできます。これを実行するには、忘れずに開発者トークンを.envファイルに含めてください。
方法2: CDNスクリプトの追加
2つ目の方法は、BoxのCDNからスクリプトとスタイルを挿入することで進めていきます。すでに説明したように、コードはコンポーネントごとに分かれているため、プロジェクトにすべてを追加する必要はありません。
@vueuse/headをインストールして構成する
@vueuse/headとは、Vue 3対応のドキュメントのheadタグマネージャです。これは、単一ファイルコンポーネントから直接ドキュメントのheadにスクリプトを挿入する際に役立ちます。
yarn add @vueuse/head@vueuse/headを使用するには、アプリのmain.jsファイルにインポートしてアクティブ化する必要があります。詳細については、@vueuse/headのドキュメント (英語) を参照してください。Vue 3はかなり新しいため、専用パッケージはまだ開発段階であり、現時点では@vueuse/headに関するドキュメントは完成していません。
Vueコンポーネントを作成する
1つ目の方法と同様、コンテンツエクスプローラをレンダリングできる、ID付きのコンテナを含むテンプレートが必要です。この例では、コンポーネントはBoxフォルダIDという1つのプロパティだけを受け入れます。
<template>
<div id="box-content-explorer"></div>
</template>ドキュメントのheadにCDNスクリプトを挿入する
最初に、@vueuse/headプラグインからコンポーネントにuseHeadメソッドをインポートします。次に、Boxのドキュメントサイトに移動して、コンテンツエクスプローラのCDNリンクをコピーします。ここではReactライブラリをメインアプリに含まないアプリを作成するため、Reactを使用するJSとしてマークされているスクリプトを選択します。反対に、Reactを使用しないJSとしてマークされているリンクは、このライブラリをすでに使用しているアプリ専用です。
フロントエンド側の見た目をよくするために、コンテンツエクスプローラのCSSスタイルシートへのリンクも含めましょう。
useHeadメソッドを使用すると、onloadコールバックなど、スクリプトの属性を定義できます。その結果、CDNスクリプトがすべて読み込まれた後に、コンテンツエクスプローラを初期化できます。
1つ目の方法と同じように、コンポーネントを表示するには、App.vueまたは個別のビューにそのコンポーネントをインポートし、フォルダIDをプロパティとして渡すだけです。値「0」はルートフォルダ専用です。
コンポーネントはアプリに表示され、見た目も1つ目の方法と同じになります。この方法を実演するリポジトリを別途用意しました。ソースコードは、こちらのGitHubリポジトリで確認できます。有効な開発者トークンを.envファイルに貼り付けると、このデモは正常に動作します。
次の手順として、コンテンツエクスプローラでロゴをカスタマイズしたり、他のUI Elements (コンテンツアップローダーなど) を追加したりできます。Boxを統合するさまざまなケースの詳細については、Peter Christensenのブログ記事を参照してください。
このチュートリアルをぜひご利用ください。質問がある場合は、Boxの開発者向けフォーラムに英語で投稿してください。また、Box UI Elementsに関するリクエストがある場合は、Box Pulseに英語で投稿してください。
