ヘッドレスOracle Content Managementを使用したFlutterでのイメージ・ギャラリーの作成
イントロダクション
Flutterは、Googleによるオープン・ソース・フレームワークで、ネイティブにコンパイルされた、単一コードベースからのマルチプラットフォーム・アプリケーションを構築します。Flutterコードは、任意のデバイスで高速パフォーマンスを実現するために、ARMまたはIntelマシン・コードおよびJavaScriptにコンパイルされます。Flutterは、Oracle Content Managementからコンテンツを消費するアプリケーションを構築するための強力なツールです。適切なコンテンツ・モデルを使用して、典型的なギャラリを構成するFlutter UIを迅速に構築できます。
このチュートリアルでは、Oracle Content ManagementをヘッドレスCMSとして活用することで、Flutterに単純なギャラリーを作成します。このFlutterサンプルは、GitHubで入手できます。
このチュートリアルは、次の3つのステップで構成されています。
前提条件
このチュートリアルに進む前に、最初に次の情報を読むことをお薦めします。
このチュートリアルに従うには、次のものが必要です。
- Oracle Content Managementのサブスクリプション
- コンテンツ管理者ロールを持つOracle Content Managementアカウント
- ノード・バージョン10以上のWindowsまたはMacコンピュータ
構築内容
私たちのイメージギャラリーは、喫茶店で飲食物の画像を数画面で構成します。
カテゴリはタクソノミの子ノードであり、階層に編成できます。イメージギャラリーでは、組織に関係なく、使用可能なすべてのカテゴリを表示します。これを実現するには、まず、REST APIリソースGET /published/api/v1.1/taxonomiesを使用して、使用可能な分類を検索する必要があります。
次に、各タクソノミのカテゴリのセットを取得する必要があります。これは、REST API GET /published/api/v1.1/taxonomies/{id}/categoriesを使用して行います。
バゲルなどのカテゴリのプレビューを作成するには、イメージの数と最初の4つのイメージのURLの数を取得する必要があります。
カテゴリ内の公開済資産を検索するリクエストでは、次のように問合せ文字列を介してカテゴリ基準を指定します。
"(taxonomies.categories.nodes.id eq 892CD6BC4F654249A00CB7942EE8C773)"ノート:表示するデジタル・アセットの公開に加えて、タクソノミをチャネルに公開する必要もあります。
続行するには、Oracle Content Managementへのアクティブなサブスクリプションがあり、コンテンツ管理者ロールでログインする必要があります。
タスク1: Oracle Content Managementの準備
このチュートリアルは、アセット・リポジトリを作成し、現在空のコンテンツ・モデル(つまり、コンテンツ・タイプが作成されていない)があることを前提としています。
Oracle Content Managementインスタンスがまだない場合は、クイック・スタートを参照して、Oracle Cloudに登録する方法、Oracle Content Managementインスタンスのプロビジョニング方法、およびOracle Content ManagementをヘッドレスCMSとして構成する方法を学習します。
このチュートリアルでは、2つの方法のいずれかでコンテンツ・モデルを作成する必要があります。使用可能なダウンロード可能なアセット・パックがあり、コンテンツ・タイプおよび関連コンテンツで空のリポジトリを埋めるか、独自のコンテンツ・モデルおよびコンテンツを作成できます。
Oracle Content Managementを準備するには:
- チャネルおよびアセット・リポジトリを作成します。
- Oracle Content Managementサンプル資産パックのインポート
- 自分のイメージ・アセットのアップロード
- タクソノミの作成およびイメージ・アセットへのリンク
チャネルおよびアセット・リポジトリの作成
コンテンツを公開するには、まずOracle Content Managementでチャネルおよびアセット・リポジトリを作成する必要があります。
Oracle Content Managementでチャネルおよびアセット・リポジトリを作成するには:
Oracle Content Management Webインタフェースに管理者としてログインします。
左側のナビゲーション・メニューで「コンテンツ」を選択し、ページ・ヘッダーの選択リストから「チャネルの公開」を選択します。
右上隅にある「Create」をクリックして、新しいチャネルを作成します。このチュートリアルの目的でチャネルにOCEImageGalleryChannelという名前を付け、アクセスをパブリックにしておきます。「保存」をクリックしてチャネルを作成します。
左側のナビゲーション・メニューで「コンテンツ」を選択し、ページ・ヘッダーの選択リストから「リポジトリ」を選択します。
右上隅にある「作成」をクリックして、新しいアセット・リポジトリを作成します。このチュートリアルでは、アセット・リポジトリにOCEImageGalleryRepositoryという名前を付けます。
「チャネルの公開」フィールドで、OCEImageGalleryChannelを選択して、OCEImageGalleryRepositoryリポジトリ内のコンテンツをOCEImageGalleryChannelチャネルに公開できることをOracle Content Managementに示します。終了したら、「Save」をクリックします。
Oracle Content Managementサンプル資産パックのインポート
このチュートリアルに必要なすべてのコンテンツ・タイプおよびアセットを含む、事前構成されたOracle Content Managementサンプル・アセット・パックをダウンロードできます。
このチュートリアルで使用するコンテンツのコピーは、Oracle Content Management Samples Asset Packからアップロードできます。これにより、コンテンツ・タイプを試して内容を変更できます。アセット・パック・アーカイブOCESamplesAssetPack.zipをダウンロードし、選択したディレクトリに抽出できます。
Oracle Content Managementのダウンロード・ページからOracle Content Management Samples Asset Pack (OCESamplesAssetPack.zip)をダウンロードします。ダウンロードしたzipファイルをコンピュータ上の場所に抽出します。抽出後、この場所にはOCEImageGallery_data.zipというファイルが含まれます。
Oracle Content Management Webインタフェースに管理者としてログインします。
左側のナビゲーション・メニューで「コンテンツ」を選択し、ページ・ヘッダーの選択リストから「リポジトリ」を選択します。次に、OCEImageGalleryRepositoryを選択し、上部アクション・バーの「コンテンツのインポート」ボタンをクリックします。
OCEImageGallery_data.zipをローカル・コンピュータから「ドキュメント」フォルダにアップロードします。
アップロードしたら、「OCEImageGallery_data.zip」を選択し、「OK」をクリックしてコンテンツをアセット・リポジトリにインポートします。
コンテンツが正常にインポートされたら、「アセット」ページに移動し、OCEImageGalleryRepositoryリポジトリを開きます。すべての関連イメージおよびコンテンツ項目がアセット・リポジトリに追加されたことがわかります。
左上の「すべて選択」をクリックし、「公開」をクリックして、以前に作成した公開チャネル(OCEImageGalleryChannel)にインポートされたすべてのアセットを追加します。
公開する前に、すべての資産を検証する必要があります。最初に、選択したチャネルとしてOCEImageGalleryChannelを追加し、「検証」ボタンをクリックします。
アセットの検証後、右上隅にある「公開」ボタンをクリックして、選択したチャネルにすべてのアセットを公開できます。
完了すると、すべてのアセットが公開された「アセット」ページが表示されます。(アセット名の上にあるアイコンで確認できます。)
Oracle Content Management Samples Asset Packをインポートした後、Flutterでのイメージ・ギャラリの作成を開始できます。
自分のイメージ・アセットのアップロード
このチュートリアルでは、「OCEImageGalleryRepository」というアセット・リポジトリを使用して、ギャラリ・サイトのホーム・ページを作成します。このホーム・ページは、「イメージ・ギャラリ」というタイトルと、イメージ・アセットのあるイメージ・コレクション・アルバムで構成されます。
イメージ・アセットをギャラリ・アセット・リポジトリに追加するには:
Oracle Content Management Webインタフェースにログインします。
左側のナビゲーション・メニューの「アセット」をクリックします。
OCEImageGalleryRepositoryリポジトリを開きます。
ページの右上隅にある「追加」をクリックして、イメージ・アセットをギャラリ・アセット・リポジトリに追加します。
ローカル・コンピュータから独自の新規アセットをアップロードするか、Oracle Content Managementにすでに存在する既存のアセットを選択します。
タクソノミの作成およびイメージ・アセットへのリンク
Oracle Content Managementでタクソノミを作成し、リポジトリ内のアセットにカテゴリを割り当てる必要があります。
Oracle Content Managementでタクソノミを作成するには:
Oracle Content Management Webインタフェースに管理者としてログインします。
左側のナビゲーション・メニューで「コンテンツ」を選択し、ページ・ヘッダーの選択リストから「分類」を選択します。
右上隅にある「作成」をクリックして、新しい分類を作成します。このチュートリアルでは、チャネルにOCEImageGalleryTaxonomyという名前を付けます。
「作成」をクリックします。
次に、カテゴリを追加してタクソノミを作成します。「カテゴリの追加」をクリックします。
親カテゴリ・アイテムに「Food」という名前を付け、次の子カテゴリを追加します。
- 朝食
- デザート
- 酒類
- サンドイッチ
画面の右上にある「完了」をクリックします。
「分類」ページで、OCEImageGalleryTaxonomy分類を選択し、アクション・バーの「昇格」をクリックして、アセット・リポジトリで使用できるようにします。
次に、OCEImageGalleryRepositoryリポジトリを編集して、そのリポジトリのOCEImageGalleryTaxonomy分類を有効にします。
Oracle Content Management Webインタフェースに管理者としてログインします。
左側のナビゲーション・メニューで「コンテンツ」を選択し、ページ・ヘッダーの選択リストから「リポジトリ」を選択します。
OCEImageGalleryRepositoryリポジトリを選択して編集します。
「分類」フィールドでOCEImageGalleryTaxonomyを選択し、その分類からOCEImageGalleryRepositoryリポジトリのアセットにカテゴリを割り当てることができます。
「保存」をクリックします。
次に、OCEImageGalleryRepositoryリポジトリの各イメージ・アセットにタクソノミ・カテゴリを割り当てます:
Oracle Content Management Webインタフェースにログインします。
左側のナビゲーション・メニューの「アセット」をクリックします。
OCEImageGalleryRepositoryリポジトリを開きます。
1つ以上のイメージ・アセットを選択し、アクション・バーの「詳細」をクリックし、メニューから「カテゴリ」を選択します。
「カテゴリ」パネルで、「カテゴリの追加」をクリックします。検索バーでカテゴリ名を検索するか、分類階層構造からカテゴリを選択し、「追加」をクリックして選択したカテゴリを割り当てます。資産に複数のカテゴリを割り当てることができます。
すべてのイメージ・アセットへの分類の割当てが完了したら、リポジトリ内のすべてのアセットを選択し、OCEImageGalleryChannelチャネルに公開します。
タスク2: Flutterでのイメージ・ギャラリの構築
FlutterアプリケーションでOracle Content Managementコンテンツを消費するには、GitHubでオープン・ソース・リポジトリとして使用できるFlutterギャラリ・サンプルを使用します。
ノート: Flutterサンプルの使用はオプションであり、このチュートリアルで使用してすぐに開始することに注意してください。独自のFlutterアプリケーションを作成することもできます。
Flutterでのイメージ・ギャラリの構築は、次のステップで構成されます。
- Flutterのインストール
- サンプル・リポジトリのクローニングと依存関係のインストール
- Flutterアプリケーションの構成
- Oracle Content Management REST APIを使用したコンテンツのフェッチ
Flutterのインストール
Flutterを初めて使用する場合は、環境を設定します。それを設定する手順は、FlutterのWebサイトにあります。オペレーティング・システムに対応するオプションを使用します。インストール手順のサマリーを次に示します。
- Flutter SDKを入手しましょう。
- パス環境変数を更新します。
flutter doctorを実行します。- FlutterのWebサイトで説明されているステップに従って、選択したエディタをインストールします。
- Android Studio、IntelliJ、VSコードまたはEmacsのエディタ・プラグインを追加します。手順では、エディタにFlutterおよびDartプラグインをインストールする方法を指定します。
- 適切な場所、sdkおよびkotlinバージョンを参照するように、android.propertiesファイルの値を変更します。また、適切なバージョンのandroid.gradleファイルの値を変更する必要もあります。
サンプルリポジトリのクローニングと依存関係のインストール
Flutterギャラリ・サンプルは、GitHubでオープンソース・リポジトリとして使用できます。
まず、GitHubからローカル・コンピュータにサンプルをクローニングし、ディレクトリをリポジトリ・ルートに変更する必要があります:
git clone https://github.com/oracle-samples/oce-flutter-gallery-sample.git
cd oce-flutter-gallery-sampleAndroid Studioまたはその他の任意のエディタからプロジェクトを開きます。プロジェクトで使用されているすべてのパッケージを取得するには、「パッケージの取得」ボタンをクリックします。
Flutterアプリケーションの構成
このFlutterギャラリ・サンプルでは、REST APIリクエストが適切なインスタンスURLおよびAPIバージョンを正しいチャネル・トークンでターゲット指定できるように、いくつかの情報を構成する必要があります。lib/config/oce.dartで定義されたこれらの値は、REST APIのエンドポイントを確立するためにlib/networking/content.dartで定義された関数で使用されます。
lib/config/oce.dartに次の情報が表示されます。
const Map<String, String> config = <String, String>{
'serverUrl': 'https://samples.mycontentdemo.com',
'apiVersion': 'v1.1',
'channelToken': 'e0b6421e73454818948de7b1eaddb091'
};各キーと値のペアを、インスタンスURL、ターゲットにするAPIバージョンおよび公開チャネルに関連付けられたチャネル・トークンを反映するように変更します。このチュートリアルのチャネルはOCEImageGalleryChannelです。
Oracle Content Management REST APIを使用したコンテンツのフェッチ
コンテンツ配信用のREST APIでは、Oracle Content Managementで公開されたアセットにアクセスできます。公開済アセットには、コンテンツ・アイテムやデジタル・アセット、およびそれらのレンディションが含まれます。これで、Oracle Content Management REST APIを使用してコンテンツをフェッチし、イメージ・ギャラリのFlutterアプリケーションでコンテンツをレンダリングできるようになりました。
lib/networking/content.dartファイルには、REST APIを使用してoce.dartファイルに指定されたサーバーに接続し、そこからレスポンスを返すメソッドがあります。
//Utility method to build up the URL for published content.
String _getPublishedContentServerURL() {
final String? serverUrl = data['serverUrl'] as String?;
final String? apiVersion = data['apiVersion'] as String?;
return '$serverUrl/content/published/api/$apiVersion/';
}
// Adds the channel token to the URL
String _addChannelToURL(String currUrl) {
final String? channelToken = data['channelToken'] as String?;
return '$currUrl?channelToken=$channelToken';
}
//Make an http get call and return the response if successful
Future<dynamic> _get(String url) async {
dynamic responseJson;
try {
final Response response = await get(Uri.parse(url));
responseJson = _returnResponse(response);
} on SocketException {
throw FetchDataException(kConnectionError);
}
return responseJson;
}
//Return the json decoded response body if response status is successful
dynamic _returnResponse(Response response) {
switch (response.statusCode) {
case 200:
final Map<String, dynamic>? responseJson =
json.decode(response.body.toString()) as Map<String, dynamic>?;
return responseJson;
case 400:
throw BadRequestException(response.body.toString());
case 401:
case 403:
throw UnauthorizedException(response.body.toString());
case 500:
default:
throw FetchDataException('StatusCode : ${response.statusCode}');
}
}イメージをレンダリングする場合、content.dartには、アセットの様々なレンディションを取得するためのヘルパー・メソッドも用意されています。
String getMediumRenditionUrl(Map<String, String> args) {
final String itemId = args['id'];
if (itemId == null) return null;
String url = _getPublishedContentServerURL();
url = '${url}assets/$itemId/Medium';
// add the channel token to the URL
url = _addChannelToURL(url);
url = '$url&format=jpg&&type=responsiveimage';
return url;
}
String getRenditionURL(Map<String, String> args) {
final String itemId = args['id'];
if (itemId == null) return null;
String url = _getPublishedContentServerURL();
url = '${url}assets/$itemId/native';
// add the channel token to the URL
url = _addChannelToURL(url);
return url;
}lib/networking/services.dartファイルには、アプリケーションのデータを取得するためのすべてのコードが含まれています。
ホーム・ページ・データ
ホーム・ページには、すべてのデータを取得するために複数のデータ・コールが必要です。
- まず、oce.dartで指定されたチャネルの分類をロードします。
- タクソノミごとに、そのタクソノミのすべてのカテゴリを取得します。
- カテゴリごとに、そのカテゴリに4つのコンテンツ項目があります。
- これらの項目ごとに、レンディションURLを抽出します。
lib/networking/services.dartを開き、次の機能を見つけ、ホーム・ページのすべてのデータを取得するのに役立ちます。
fetchCategories()関数とともにfetchTaxonomies()は、すべての分類内のすべてのカテゴリを取得します。その後、fetchItemsForCategory関数がコールされ、4つのカテゴリ・アイテムが各カテゴリに追加されます。最後に、サムネイルURLを取得するためにretrieveThumbnailURLがコールされます。
// Fetch the taxonomies for the channel
Future<List<String>> fetchTaxonomies() async {
final Content content = Content();
try {
dynamic data = await content.getTaxonomies();
dynamic taxonomies = data['items'];
List<String> idArray = [];
for (var taxonomy in taxonomies) {
idArray.add(taxonomy['id']);
}
return idArray;
} catch (exception) {
rethrow;
}
}
// Fetch the categories for the specified taxonomyId.
Future<List<dynamic>> fetchCategories(taxonomyId) async {
final Content content = Content();
dynamic data = await content.queryTaxonomyCategories({
'id': '$taxonomyId',
});
return data['items'];
}
// Fetch the items that belong to the specified category
Future<dynamic> fetchItemsForCategory(String categoryId, bool limit) async {
final Content content = Content();
dynamic data = await content.queryItems({
'q': '(taxonomies.categories.nodes.id eq "$categoryId")',
'fields': 'all',
'expand': 'all',
'limit': limit ? '4' : '100',
'totalResults': 'true',
});
return data;
}
// Retrieve the thumbnail URL for the item specified.
Future<String> retrieveThumbnailURL(identifier) async {
final Content content = Content();
dynamic data = await content.getItem({
'id': identifier,
'fields': 'all',
'expand': 'all',
});
String url = data['fields']['renditions'][1]['formats'][0]['links'][0]['href'];
return url;
}
イメージ・グリッド・ページ
イメージ・グリッド・ページでは、カテゴリIDを受け取り、すべてのデータを取得するために複数のデータ・コールが必要です。
- 指定されたカテゴリのすべての項目を取得します。
- アイテムごとに、レンディションURLを取得します。
lib/networking/services.dartを開き、次の関数を見つけます。これは、image_grid.dartのfetchData関数で使用されます。
Future<dynamic> fetchItemsForCategory(String categoryId, bool limit) async {
final Content content = Content();
dynamic data = await content.queryItems({
'q': '(taxonomies.categories.nodes.id eq "$categoryId")',
'fields': 'all',
'expand': 'all',
'limit': limit ? '4' : '100',
'totalResults': 'true',
});
return data;
}ホーム・ページと同様にfetchItemsForCategoryをコールしますが、制限がないため、4つのみではなくすべてのアイテムが返されます。
これでデータ問合せができたので、Flutterコンポーネントでレスポンスをレンダリングできます。
フロッターコンポーネント
ギャラリ・アプリケーションでは、各ページが複数の小さなコンポーネントに分割されます。
次のいくつかのセクションでは、各コンポーネントでFlutterがアプリケーションをどのようにレンダリングするかの概要を説明します。
HomePageコンポーネント
ホーム・ページは、分類のカテゴリのリストで構成され、そのカテゴリの4つの項目のプレビューが表示されます。これは、lib/screens/home_page.dartにあるHomePageコンポーネントによってレンダリングされます。コンポーネントは、service.dartファイルに定義されている関数を使用してデータを取得します。
Future<void> fetchData() async {
final Services services = Services();
try {
List<String> taxonomyIdArray = await services.fetchTaxonomies();
// For each taxonomy, fetch the categories and append them to an array
for (var taxonomyId in taxonomyIdArray) {
List<dynamic> data = await services.fetchCategories(taxonomyId);
for (var categoryData in data) {
categories.add(CategoryListItemModel.fromJson(categoryData));
}
setState(() {
categories = categories;
});
}
} catch (exception) {
setState(() => this.exception = exception.toString());
print(exception.toString());
}
}このファイルはまた、lib/components/card_grid.dartにあるコンポーネントを使用して、イメージをグリッドにレンダリングします。
ImageGridコンポーネント
ImageGridPageコンポーネントでは、カテゴリ内のアイテムが表示されます。これは、lib/screens/image_grid.dartにあるImageGridコンポーネントによってレンダリングされます。
このコンポーネントは、service.dartファイルからデータを取得するためにコールします。
Future<void> fetchData() async {
final Services services = Services();
String categoryId = widget.category.id;
try {
dynamic categoryItems =
await services.fetchItemsForCategory(categoryId, false);
items = categoryItems['items'];
setState(() {
dataFetched = true;
});
} catch (exception) {
setState(() {
this.exception = exception.toString();
});
print(exception.toString());
}
}ImagePagerコンポーネント
lib/screens/image_pager.dartにあるImagePagerコンポーネントは、スライド・ポケットベル形式でアイテムを表示します。
タスク3:アプリケーションのデプロイメントの準備
Flutterイメージ ギャラリー サイトを構築したので、これをエミュレータまたはデバイスにデプロイして、問題をデバッグし、アプリケーションをプレビューしてからライブする必要があります。
エディタのFlutter Webサイトの手順に従ってアプリケーションを実行します。
- エディタとしてAndroid Studioを使用している場合は、Android Studioのメイン・ツールバーを探します。
- ターゲット・セレクタで、アプリケーションを実行するAndroidデバイスを選択します。使用可能なものとしてリストされていない場合は、「ツール」→「Android」→「AVD Manager」を選択して作成します。詳細については、Managing AVDsを参照してください。
- ツールバーの「実行」アイコンをクリックするか、メニュー項目「実行」→「実行」を起動します。
まとめ
このチュートリアルでは、Flutterにギャラリー・サイトを作成し、GitHubにあります。このサイトでは、Oracle Content ManagementをヘッドレスCMSとして使用しています。ギャラリ・サイト・チュートリアルの公開済コンテンツのチャネルを使用してOracle Content Managementを設定および構成した後、Flutterサイトをインストールして実行し、必要なコンテンツをフェッチしてサイトを構築しました。
Flutterの詳細は、FlutterのWebサイトを参照してください。
Oracle Content Managementの重要な概念については、ドキュメンテーションを参照してください。
このようなサンプルは、Oracle Help CenterのOracle Content Managementサンプル・ページで確認できます。
ヘッドレスOracle Content Managementを使用したFlutterでのイメージ・ギャラリーの作成
F55479-01
2022年3月
Copyright © 2021, 2022, Oracle and/or its affiliates.
原本著者: Oracle Corporation