ヘッドレスOracle Content Managementを使用したAndroid用Javaでのイメージ・ギャラリーの構築

イントロダクション

JavaまたはKotlinを使用するAndroid開発環境は、Oracle Content Managementからコンテンツを使用するアプリケーションを構築するための強力なツールです。適切なコンテンツ・モデルを組み込むことで、一般的なイメージ・ギャラリを構成するAndroid UIをすばやく構築できます。

このチュートリアルでは、Oracle Content ManagementをヘッドレスCMSとして活用して、Javaを使用してAndroid用の単純なイメージ・ギャラリ・アプリケーションを作成します。このAndroidのサンプルは GitHubで入手できます。このチュートリアルは、次の3つのステップで構成されています。

Oracle Content Managementの準備
Android Studioでのイメージ・ギャラリの作成
アプリケーションの実行

前提条件

このチュートリアルを進める前に、まず次の情報をお読みください。

このチュートリアルに従うには、次が必要です:

Oracle Content Managementサブスクリプション
コンテンツ管理者ロールを持つOracle Content Managementアカウント
Androidツールが設定された Windowsまたは Macコンピュータ
このチュートリアルでは、JavaおよびAndroidプログラミングに関する既存の知識について、Javaを使用したAndroid開発の一般的な概念をすでに理解していることを前提としています

構築対象

コーヒーショップでは、飲食物のイメージを数ページ分ご用意しております。

このイメージは、様々な種類のバッグ、クリームまたはトッピングがあるもの、またはその両方を持つ朝食食品のカテゴリにドリルして、ギャラリ・デモを示しています。

カテゴリはタクソノミの子ノードであり、階層に編成できます。イメージ・ギャラリの場合は、組織に関係なく、使用可能なすべてのカテゴリを表示します。そのためには、まず使用可能なタクソノミを見つける必要があります。このタクソノミは、Oracle Content ManagementライブラリのGetTaxonomiesRequestクラスを使用して設定し、リクエストを行う必要があります。

ノート: GetTaxonomiesRequestの実装では、REST APIリソースのGET /published/API/v1.1/taxonomiesを使用します。

見つかったタクソノミごとに、カテゴリのセットを取得します。これは、Oracle Content ManagementライブラリのGetTaxonomyCategoriesRequestクラスを使用して行います。

ノート: GetTaxonomyCategoriesRequestの実装では、REST API GET /published/api/v1.1/taxonomies/{id}/categoriesが使用されます。

返されるタクソノミ・カテゴリごとに、カテゴリ名、カテゴリ内のイメージ数および最初の4つのイメージのサムネイル・レンディションで構成されるプレビューが表示されます。

このイメージは、「朝食」カテゴリのイメージを示しています。

ノート:表示するデジタル・アセットの公開に加えて、チャネルにタクソノミを公開する必要もあります。

続行するには、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サンプル資産パックからアップロードできます。これにより、コンテンツ・タイプを試し、コンテンツを変更できます。アセット・パック・アーカイブ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サンプル・アセット・パックをインポートした後、Android Studioでのイメージ・ギャラリの構築を開始できます。

独自のイメージ・アセットのアップロード

このチュートリアルでは、'OCEImageGalleryRepository'という名前のアセット・リポジトリを使用して、ギャラリ・サイトのホーム・ページを作成します。このホーム・ページは、「イメージ・ギャラリ」というタイトルと、イメージ・アセットが含まれているイメージ・コレクション・アルバムで構成されています。

このイメージは、様々なイメージ・カテゴリ(サンドイッチ、ドリンク、デザート、朝食および食品)のイメージを含むイメージ・ギャラリのホーム・ページを示しています。

イメージ・アセットをギャラリ・アセット・リポジトリに追加するには:

Oracle Content Management Webインタフェースにログインします。
左側のナビゲーション・メニューの「アセット」をクリックします。
OCEImageGalleryRepositoryリポジトリを開きます。
ページの右上隅にある「追加」をクリックして、ギャラリ・アセット・リポジトリにイメージ・アセットを追加します。
ローカル・コンピュータから独自の新規アセットをアップロードするか、Oracle Content Managementにすでに存在する既存のアセットを選択します。

タクソノミの作成およびイメージ・アセットへのリンク

Oracle Content Managementでタクソノミを作成し、リポジトリ内のアセットにカテゴリを割り当てる必要があります。

Oracle Content Managementでタクソノミを作成するには:

Oracle Content Management Webインタフェースに管理者としてログインします。
左側のナビゲーション・メニューで「コンテンツ」を選択し、ページ・ヘッダーの選択リストから「タクソノミ」を選択します。
右上隅にある「作成」をクリックして、新しいタクソノミを作成します。このチュートリアルの目的で、チャネルにOCEImageGalleryTaxonomyという名前を付けます。
「作成」をクリックします。
次に、カテゴリを追加してタクソノミを作成します。「カテゴリの追加」をクリックします。
親カテゴリ項目に「Food」という名前を付け、次の子カテゴリを追加します。
- 朝食
- デザート
- 酒類
- サンドイッチ
画面右上の「Done」をクリックします。
「タクソノミ」ページで、OCEImageGalleryTaxonomyタクソノミを選択し、アクション・バーの「昇格」をクリックして、アセット・リポジトリで使用できるようにします。

次に、OCEImageGalleryRepositoryリポジトリを編集して、そのリポジトリのOCEImageGalleryTaxonomyタクソノミを有効にします:

Oracle Content Management Webインタフェースに管理者としてログインします。
左側のナビゲーション・メニューで「コンテンツ」を選択し、ページ・ヘッダーの選択リストから「リポジトリ」を選択します。
OCEImageGalleryRepositoryリポジトリを選択して編集します。
「タクソノミ」フィールドでOCEImageGalleryTaxonomyを選択すると、そのタクソノミのカテゴリをOCEImageGalleryRepositoryリポジトリのアセットに割り当てることができます。
「保存」をクリックします。

次に、OCEImageGalleryRepositoryリポジトリ内の各イメージ・アセットにタクソノミ・カテゴリを割り当てます:

Oracle Content Management Webインタフェースにログインします。
左側のナビゲーション・メニューの「アセット」をクリックします。
OCEImageGalleryRepositoryリポジトリを開きます。
1つ以上のイメージ・アセットを選択し、アクション・バーの「詳細」をクリックし、メニューから「カテゴリ」を選択します。
「カテゴリ」パネルで、「カテゴリの追加」をクリックします。検索バーでカテゴリ名を検索するか、タクソノミ階層構造からカテゴリを選択し、「追加」をクリックして選択したカテゴリを割り当てます。1つの資産に複数のカテゴリを割り当てることができます。
すべてのイメージ・アセットへのタクソノミの割当てが完了したら、リポジトリ内のすべてのアセットを選択し、OCEImageGalleryChannelチャネルに公開します。

ステップ2: Android Studioでのイメージ・ギャラリの作成

AndroidアプリケーションでOracle Content Managementコンテンツを使用するには、GitHubのオープンソース・リポジトリとして使用可能なAndroidイメージ・ギャラリ・サンプルを使用できます。

ノート: Androidサンプルの使用はオプションであり、このチュートリアルで使用するとすぐに開始できます。独自のアプリケーションを作成することもできます。

Android Studioでイメージ・ギャラリを構築するには:

サンプル・リポジトリAndroid SDKをクローニングし、SDKをローカルに公開します
Android StudioでAndroidサンプルを開きます
Oracle Content Management REST APIを使用したコンテンツのフェッチ

サンプル・リポジトリ、Android SDKのクローニングおよびSDKのローカルでの公開

Androidギャラリのサンプルは、GitHubのオープンソース・リポジトリとして使用できます。

まだ作成していない場合は、まずGitHubからローカル・コンピュータ、およびGitHubからAndroid SDKにサンプルをクローニングする必要があります。

サンプル・コードとSDKが完成したら、サンプル・プロジェクトでAndroid SDKを消費するために、SDKをローカルMavenリポジトリに構築および公開して、サンプル・プロジェクトで使用できるようにする必要があります。Android StudioでAndroid SDKプロジェクトを開き、publishToMavenLocalタスクを実行してSDKを構築し、ローカルMavenリポジトリに公開します。

Android StudioでAndroidサンプルを開く

Androidアプリケーションと同様に、Androidエミュレータまたはデバイスで構築して実行できるように、Android Studioにインポートする必要があります。サンプル・コードは、ギャラリ・アプリケーションのデータを取得するために使用されるサーバーおよび公開チャネルですでに事前構成されています。

Oracle Content Management REST APIを使用したコンテンツのフェッチ

コンテンツ配信用のREST APIでは、Oracle Content Managementで公開済アセットにアクセスできます。公開されたアセットには、コンテンツ・アイテムやデジタル・アセットやそのレンディションが含まれます。コンテンツ管理のためのREST APIを利用してコンテンツをフェッチし、ギャラリ・アプリケーションでレンダリングできるようになりました。

src/.../samples/gallery/MainActivity.javaファイルには、REST APIをコールするためにリクエスト・オブジェクトによって使用されるContentDeliveryClientオブジェクトを作成する関数があります。次の関数は、使用されている値を示すサンプル・アプリケーションの関数の簡易バージョンです。

void createDeliveryClient() {

    // inti and customize the SDK settings
    ContentSettings contentSettings = new ContentSettings();
   
    // initialize the cache settings (optional configured via settings in sample)
    contentSettings.setCacheSettings(new CacheSettings(context.getCacheDir()));

    // set the host and channel token
    String channelToken = "e0b7b1e6421e78189345448deaddb091";
    String host = "https://headless.mycontentdemo.com";

    // create client API we'll use in request objects to make SDK calls
    deliveryClient = ContentSDK.createDeliveryClient(
            host, channelToken, contentSettings);
}

Oracle Content SDKを使用したホーム・ページ・データのリクエスト

ノート:最初のホーム・ページに対するSDKコールの順序は、GalleryHomePageRepository.javaにあります。

ページを正しく表示するには、初期ページに複数のデータ・コールが必要です。

まず、以前に指定したチャネル・トークンのタクソノミをロードします。
返されるタクソノミごとに、そのタクソノミのすべてのカテゴリを取得します。
返される各カテゴリについて、そのカテゴリ内のアセットのリストを取得します。
各カテゴリの最初の4つのアイテムのメディア・レンディションおよびサムネイル・レンディションのイメージURLがダウンロードされます。

この図は、各カテゴリの最初の4つのアセットのプレビューを含むタクソノミ・カテゴリのリストを示しています。

初期データ・フェッチのエントリ・ポイントは、GalleryHomePageRepository.javaのfetchHomePageData()メソッドです。このメソッドは、別のスレッドで一連の同期SDKコールを実行し、コールバックを介して結果を非同期的に返します。

初期のタクソノミ・データは、次に示すように、GetTaxonomiesRequestクラスおよびfetch()メソッドを使用して取得されます。

// create request to get list of taxonomies, limiting the number of results to 10 max
GetTaxonomiesRequest request = new GetTaxonomiesRequest(deliveryClient).limit(10);

// get the list of taxonomies synchronously 
ContentResponse<TaxonomyList> response = request.fetch();

すべてのAPIでは、ContentDeliveryClientオブジェクトをパラメータとして使用してリクエスト・オブジェクトを作成するパターンが使用されることに注意してください。

GetTaxonomiesRequestは、データのリストを取得するリクエストに使用される共通のPaginatedListRequestクラスを拡張するため、limit(<value>)ビルダー・メソッドを使用できます。

ここでは、request.fetch()を使用します。これは、複数のSDKコールを順番に作成するために別のスレッドがすでに作成されているためです。別のセクションには、非同期SDKコールの使用例があります。

リクエストが正常に完了すると、ContentResponse<TaxonomyList>型のオブジェクトが返されます。response.isSuccess()がtrueの場合、タクソノミTaxonomyListのリストはgetResult()メソッドから取得されます。

次に、使用可能なタクソノミ・カテゴリのリストを取得する必要があります。SDKコール用に作成した別のスレッドにまだ入っているため、次のコールは、タクソノミIDに基づいてタクソノミ・カテゴリのリストを取得するための同期コールでもあります。

// get list of taxonomy categories based on the taxonomy id
GetTaxonomyCategoriesRequest categoriesRequest = 
    new GetTaxonomyCategoriesRequest(deliveryClient, taxonomy.getId());

// get list synchronously
ContentResponse<TaxonomyCategoryList> response = categoriesRequest.fetch();

// get the list from the response (assuming successful)
TaxonomyCategoryList categoryList.getItems = response.getResult();

カテゴリごとに、カテゴリ・ノードIDの一致する資産を検索するための検索要求を行うことで、カテゴリに関連付けられた資産のリストを取得するために、同じ一般プロセスに従う必要があります。

// go through each category to get list of assets for that category
for(TaxonomyCategory category : categoryList.getItems()) {

    // setup search request to match "Image" type and the category node id
    SearchAssetsRequest assetsRequest = new SearchAssetsRequest(deliveryClient)
            .type(AssetType.TYPE_ASSET_IMAGE)
            .taxonomyCategoryNodeId(category.getId());

    // synchronous request to get matching assets
    ContentResponse<AssetSearchResult> searchResponse = assetsRequest.fetch();

    // search result from the response
    AssetSearchResult searchResult = searchResponse.getResult();

    // get the list of digital assets
    List<DigitalAsset> digitalAssetList = searchResult.getDigitalAssets();

}

最後に、カテゴリの最初の4つのアセットごとに、3つの小さいイメージの大きいイメージおよびサムネイル・レンディションのメディア・レンディションをダウンロードするためのURLを生成します。

URLは、任意のAndroidイメージ・ライブラリを使用してイメージをレンダリングするために使用できますが、サンプルでは共通のオープンソース・ライブラリGlideが使用されます。

// (the sample code verifies that there are at least 4 images in the list)
// get the medimum rendition image url for the first main image from the list.
String mainImageUrl = digitialAssetList.get(0).getRenditionUrl(RenditionType.Medium);

// example code using Glide to render the main image into an ImageView
Glide.with(context).load(mainImageUrl).into(mainImageView);

// get the thumbnail rendition for the other 3 images
String smallImageUrl1 = digitialAssetList.get(1).getRenditionUrl(RenditionType.Thumbnail);
String smallImageUrl2 = digitialAssetList.get(2).getRenditionUrl(RenditionType.Thumbnail);
String smallImageUrl3 = digitialAssetList.get(3).getRenditionUrl(RenditionType.Thumbnail);

// load small images using Glide, etc...

ギャラリ・ページおよびイメージ・プレビューの取得

カテゴリ内のすべてのイメージのプレビューを含むページでは、非同期リクエストを使用して、カテゴリ・ノードIDと一致するすべてのイメージをリクエストします。

このイメージは、様々な種類のバッグ、クリームまたはトッピング(あるいはその両方)があるイメージ・ギャラリを示しています。

非同期コールは、次に示すようにレスポンスに指定されたコールバック・メソッドを使用して実行されます。このコードの完全なバージョンは、GalleryPhotosFragment.javaファイルにあります。

public void fetchDigitalAssets() {

    // search for all matching image assets for the specific category node id
    SearchAssetsRequest assetsRequest = new SearchAssetsRequest(getDeliveryClient())
            .type(AssetType.TYPE_ASSET_IMAGE)
            .taxonomyCategoryNodeId(categoryNodeId);

    // fetch the results asynchronously and call the specified method when done
    assetsRequest.fetchAsync(this::showDigitalAssets);

}

public void showDigitalAssets(ContentResponse<AssetSearchResult> response) {
   // handle errors if response.isSuccess is false otherwise process results...
}

特定のイメージをクリックすると、フルサイズのプレビューでファイルのネイティブ・レンディションが使用されます。

このイメージは、クリームチーズとサーモンを使用したバッグのプレビューを示しています。

digitalAssetオブジェクトの場合、ネイティブ・レンディションURLを取得し、次のようにGlideでレンダリングします:

String fullSizeImageUrl = digitalAsset.getRenditionUrl(RenditionType.Native);

// example using Glide to render the main image into an ImageView
Glide.with(context).load(fullSizeImageUrl).into(fullSizeImageView);

ステップ3: アプリケーションの実行

Androidギャラリ・アプリケーションを構築したので、Android Studioのモバイル・エミュレータまたはデバイスでテストする必要があります。これにより、問題をデバッグし、アプリケーションが稼働する前にプレビューできます。

まとめ

このチュートリアルでは、Githubにあるイメージ・ギャラリAndroidアプリケーションを作成しました。このアプリケーションでは、Oracle Content ManagementをヘッドレスCMSとして使用します。ギャラリ・サイト・チュートリアルの公開済コンテンツのチャネルを使用してOracle Content Managementを設定および構成した後、アプリケーションを実行して必要なコンテンツをフェッチしました。

Oracle Content Managementの重要な概念については、ドキュメンテーションを参照してください。

このようなサンプルは、Oracle Content Managementのサンプル・ページのOracle Help Centerにあります。

タイトルおよび著作権情報

ヘッドレスOracle Content Managementを使用したAndroid用Javaでのイメージ・ギャラリーの構築

F81109-01

2023年5月

原本著者: Oracle Corporation