Blog

私たちのコミュニティチームは、あらゆるタイプのプラットフォーム向けにKenticoCloud用の新しいSDKを作成するために懸命に取り組んでいます。フロントエンドからバックエンド、Webからモバイルまで、サンプルとSDKを拡張するために検討しているフレームワークは無数にあります。最近、新しいKentico Cloud Delivery JavaRx SDKをリリースしました。これにより、JavaおよびAndroid開発者はKenticoCloudをアプリに簡単に統合できます。この記事では、これらの新しいGitHubプロジェクトを開始するのに役立つ、SDKとサンプルプロジェクトを詳しく見ていきます。

開発の最良の部分の1つは、絶えず変化するテクノロジーの展望です。確かに、あなたはライブラリやフレームワークの専門家かもしれませんが、リリースされるのを待っている新しいものが約50あります。それは物事を非常にエキサイティングに保ち、学ぶべき新しいことが常にあります。モバイルに関して言えば、これは特に当てはまります。主要なプロバイダーは、開発者にとって頼りになるプラットフォームとしての主張を主張しようとしているからです。

たくさんのAndroidデバイスが浮かんでいることは周知の事実です。最も多様化され分散されたエコシステムを備えたAndroidOSは、開発者がモバイルアプリを作成するときに最初に注目するフレームワークの1つです。需要に対応するために、最近、新しいKentico Cloud Delivery JavaRxSDKを発表しました。

この新しいSDKは、ReactiveXオブザーバブルの組み込みサポートを提供しながら、複数のプログラミングスタイルの組み込みサポートを提供することにより、KenticoCloudのJavaまたはAndroidアプリへの統合を簡素化するように設計されています。複数のコンテンツタイプ、クエリパラメータ、およびその他のほぼすべてのKentico Cloud機能をサポートしているため、SDKはAndroidのすべてのワンストップショップになるはずです。

この記事では、SDKと含まれているサンプルアプリについてもう少し詳しく説明し、カスタムモバイルアプリの開発について説明します。最近、新しいサンプルアプリを取得して更新し、常にエキサイティングなKentico CloudNewsフィードを表示しました。 KenticoCloud.comは、Kentico Cloudサービスを完全に利用しているため、機能の優れたデモになります。

この記事の概念と用語を理解するには、 Kentico Cloud DeliveryAPIを必ず読んでください。また、SDKを確認してください。詳細については、 Readmeが含まれています。了解しました。始めましょう。

セットアップ

始める前に、環境が開発用に設定されていることを確認する必要がありました。私はWindows10を使用しているので、これは私のマシンにAndroid StudioIDEをインストールすることを意味しました。さて、これはかなり大きなインストールなので、完了するのに少し時間がかかることを計画してください。

AndroidStudioをダウンロードする

Android Studio IDEは、コード補完、フォーマット、色付けのオプションを備えた、開発用の適切なインターフェースを提供します。 Visual Studio 2017ではありませんが、おなじみの機能がいくつかあります。エミュレーターはすぐに組み込まれるため、アプリをデバッグするために追加のコンポーネントをダウンロードする必要はありません。また、アプリに変更を加えると、テストを含むビルドプロセスが開始され、作成したコードが確実にコンパイルされるようになります。

IDEを使い始めたばかりの場合は、サンプルアプリを起動してテストし、コツをつかむことをお勧めします。

Kentico Cloud Delivery Java RX SDK

Android Studioを導入したら、Kentico Cloud Delivery AndroidSDKを使用する準備が整いました。 JavaプラットフォームとAndroidプラットフォームの両方を組み合わせたこのSDKは、Kentico Cloud DeliveryAPIのすべての優れた機能をプロジェクトに提供するように設計されています。

Kentico Cloud Delivery Java RX SDK

ReactiveXプロジェクトをサポートするように構築されたSDKは、Android開発の最新トレンドをサポートすると同時に、標準の同期Webリクエストを通じて従来のプログラミングスタイルのサポートを維持します。また、異なるオブザーバブルを提示する2つのライブラリも提供しています。1つは標準のJavaRx用（ delivery-rx ）、もう1つはRx2Androidリクエストを使用するAndroid固有のRXオブザーバブル用（delivery-android ）です。もちろん、ReactiveXを使用していない場合は、標準のhttpWebリクエスト用のアダプターもあります。これにより、開発スタイルに関係なく、SDKは非常に強力なツールになります。

注意

SDKを利用する新しいアプリケーションを開発するときは、新しいプロジェクトを作成し、GitHubのドキュメントに従って開始する必要があります。私の場合、GitHubプロジェクト全体をローカルマシンにダウンロードして、SDK全体にアクセスして表示できるサンプルを共有しました。

サンプルプロジェクトから始める

GitHubプロジェクトには、SDK自体から、JavaおよびAndroid用のサンプルプロジェクトまで、多くのコードが含まれています。他のKenticoCloudデモのパターンに従って、これらのアプリケーションは、SDKを使用してDancingGoatサイトのサンプルコンテンツを表示する方法を示します。 SDKが「実際の」データでどのように機能するかを確認するのに最適な方法ですが、この完全なプロジェクトは、Gradleを介して含めるのではなく、SDK全体を含むため、プロジェクトの開始点にはなりません。サンプルプロジェクト構造を確認してみましょう。

注意

空のプロジェクトから始めることもできます。 GitHubプロジェクトのドキュメントに従って、Kentico CloudDeliveryクライアントを作成してコンテンツにアクセスする方法を確認してください。

SDKプロジェクトの構造

SDKには、delivery-core（SDKの大部分）、delivery-rxおよびdelivery-android（ReactiveXコンポーネント）、テストプロジェクト、JavaおよびAndroid用のサンプルアプリケーションなど、いくつかのプロジェクトが含まれています。ここで取り上げる主な領域は、sample-android-appとその基礎となる構造です。これは、別のプロジェクトで作成するタイプのプロジェクトです。

java

sample-android-appプロジェクトでは、目的に応じて、コードが論理セクションに分割されていることがわかります。

アプリ
このフォルダーには、アプリケーションの各領域のロジックが含まれています。これには、ベースアプリのコア機能と、コンテンツタイプ固有のコードが含まれます。

データ
このフォルダーには、KenticoCloudコンテンツタイプのモデルが含まれています。また、コンテンツタイプのCloudSource 、 DataSource 、およびRepositoryクラスも含まれています。これは、 DeliveryClientを使用してコンテンツを取得する場所です。

注入
このフォルダーには、アプリ内でのインジェクションの処理方法に関連するクラスが含まれています。サンプルプロジェクトの場合、これはさまざまなコンテンツリポジトリがロードされる場所です。

util
このフォルダーには、アプリケーション内で使用されるいくつかのヘルパークラスが含まれています。これには、データを操作するためのNetworkHelper、SyncHelper、およびActivityUtilsクラスが含まれます。

res

レイアウトの場合、サンプルアプリにはコンテンツタイプごとに複数のファイルが含まれているため、表示をそれぞれにカスタマイズできます。各コンテンツタイプには、固有のルックアンドフィールがあります。

サンプルアプリがデバイス上でどのように表示されるかを次に示します。

Androidサンプルアプリには、すぐに使用できる多くの機能が含まれています。アプリをローカルで実行して、すべてのコンポーネントに慣れることをお勧めします。この記事の残りの部分では、サンプルプロジェクトの多くのコードを使用して独自のアプリを作成し、プロジェクトをモデル化します。

コンテンツタイプモデル

カスタム開発を開始するには、新しいコンテンツタイプモデルを定義する必要がありました。私のアプリはKenticoCloudブログ投稿を使用するため、これは作成者モデルとBlogPostモデルを定義することを意味しました。また、物事をきれいに保つために、既存のモデルをクリアしました。 SDKにはDeliveryAPI全体が含まれているため、厳密に型指定されたクラスとオブジェクトを使用して、コンテンツ型の要素とデータを取得できます。

著者

Authorコンテンツタイプは、名前のみで構成される非常に基本的なモデルです。このモデルの重要な側面は、 BlogPostモデルのモジュラーコンテンツに使用されることです。それ以外に、 ContentItemクラスを拡張し、名前を返すための1つの関数があります。

public final class Author extends ContentItem{ public static final String TYPE = 'author'; @ElementMapping('name') public TextElement name; public String getName() { return name.getValue(); }}

BlogPost

BlogPostは、2つの中でより複雑で、さまざまなコンテンツ要素にいくつかのフィールドがあります。これには、 AssetElement （ヘッダー画像）、 DateTimeElement （投稿日）、 MultipleChoiceElement （トピック）、およびModularContentElement （作成者）が含まれます。 SDKはいくつかのタイプの要素をサポートできるため、KenticoCloudコンテンツタイプに正しくマッピングするようにしてください。

 @ElementMapping('title')public TextElement title;@ElementMapping('header_image')public AssetsElement headerImage;@ElementMapping('perex')public RichTextElement perex;@ElementMapping('body')public RichTextElement body;@ElementMapping('date')public DateTimeElement postDate;@ElementMapping('topic')public MultipleChoiceElement topic;@ElementMapping('author')public ModularContentElement author;

BlogPostモデルには、データを返すためのいくつかの関数が含まれています。 AssetElementフィールドには複数の値が含まれる場合があるため、クラスにはコレクションの最初のアイテムを返す関数が含まれています。

 public String getTeaserImageUrl(){ AssetModel[] assets = this.headerImage.getValue(); if (assets == null){ return null; } if (assets.length == 0){ return null; } return assets[0].url;}

同じ概念がトピックのMultipleChoice要素に適用されます。

 public String getTopic(){ if(topic.getValue().length > 0) { MultipleChoiceOption option = topic.getValue()[0]; return option.name; } else { return 'General'; }}

最後に、ブログ投稿は作成者のためにモジュラーコンテンツを使用します。このクラスには、SDKを使用してモジュラーコンテンツを取得し、作成者名を返す関数が含まれています。

 public String getAuthor(){ String strAuthor = ''; if(!author.getValue().isEmpty()) { for(Author auth : author.getValue()) { if(strAuthor.length() > 0) { strAuthor += ', '; } strAuthor += auth.getSystem().getName(); } return 'by ' + strAuthor; } else { return 'by General'; }}

レイアウトフォルダーについては、既存のパターンを利用して、コンテンツタイプ用の新しいファイルを作成しました。

TypeResolver

次に、新しいモデルを処理するようにTypeResolverを更新しました。 / app / config / AppConfigクラスで、新しいコンテンツタイプを追加しました。また、プロジェクトIDをKentico CloudWebサイトに更新しました。

 public final static String KENTICO_CLOUD_PROJECT_ID = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX';public static List> getTypeResolvers(){ // Type resolvers are responsible for creating the strongly typed object out of type List> typeResolvers = new ArrayList<>(); /// BlogPost resolver typeResolvers.add(new TypeResolver<>(BlogPost.TYPE, new Function() { @Nullable @Override public BlogPost apply(@Nullable Void input) { return new BlogPost(); } })); /// Author resolver typeResolvers.add(new TypeResolver<>(Author.TYPE, new Function() { @Nullable @Override public Author apply(@Nullable Void input) { return new Author(); } })); return typeResolvers;}

コンテンツを取得する

次のステップは、コンテンツのリポジトリを作成することでした。サンプルアプリのパターンに従って、 / data / source / blogpostsフォルダーにBlogPostsCloudSource 、 BlogPostsDataSource、およびBlogPostsRepositoryクラスを作成しました。サンプルアプリからの唯一の実際の変更は、 BlogPostsRepositoryクラスを更新して、投稿日でソートされたブログ投稿コンテンツアイテムを取得することでした。

@Overridepublic void getBlogPosts(@NonNull final LoadBlogPostsCallback callback) { this.deliveryService.items() .type(BlogPost.TYPE) .orderParameter('elements.date', OrderType.Desc) .limitParameter(10) .getObservable() .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribe(new Observer>() { @Override public void onSubscribe(Disposable d) { } @Override public void onNext(DeliveryItemListingResponse response) { List items = (response.getItems()); if (items == null || items.size() == 0){ callback.onDataNotAvailable(); return; } callback.onItemsLoaded(items); } @Override public void onError(Throwable e) { callback.onError(e); } @Override public void onComplete() { } });}

このコードは、呼び出しで配信フィルターパラメーターを利用して、投稿日で並べ替えられた最初の10個のアイテムのみを取得します。

インラインアセット

サンプルアプリとそのパターンを使用することで、私のアプリはすでに完成に近づいていました。主な未解決の問題は、インライン画像の表示でした。デフォルトでは、 AndroidStudioが >を置き換えます プレースホルダー画像付きのタグ。 Kentico Cloudは非常にクールなインライン画像をサポートできるため、それらが正しく表示されることを確認したかったのです。これは、カスタムImageGetterをプロジェクトに実装することを意味しました。

PicassoImageGetter

/ utilフォルダーに、PicassoImageGetterという新しいクラスを作成しました。このクラスには、HTMLを解析し、任意の画像のDrawingオブジェクトを作成するために必要なロジックが含まれています。 HTMLコンテンツがKenticoCloudから取得されると、カスタムImageGetterがそれを解析し、検出したアセットごとに画像オブジェクトを作成するという考え方です。

 package com.kenticocloud.delivery.sample.androidapp.util;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;import android.text.Html;import com.kenticocloud.delivery.sample.androidapp.R;import com.squareup.picasso.Picasso;import com.squareup.picasso.Target;public class PicassoImageGetter implements Html.ImageGetter { private Context mContext; public PicassoImageGetter(Context context) { mContext = context; } @Override public Drawable getDrawable(String source) { BitmapDrawablePlaceHolder drawable = new BitmapDrawablePlaceHolder(); Picasso.with(mContext) .load(source) .placeholder(R.drawable.ic_image_placeholder) .into(drawable); return drawable; } private class BitmapDrawablePlaceHolder extends BitmapDrawable implements Target { protected Drawable drawable; @Override public void draw(final Canvas canvas) { if (drawable != null) { drawable.draw(canvas); } } public void setDrawable(Drawable drawable) { this.drawable = drawable; int width = drawable.getIntrinsicWidth(); int height = drawable.getIntrinsicHeight(); drawable.setBounds(0, 0, width, height); setBounds(0, 0, width, height); } @Override public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) { setDrawable(new BitmapDrawable(mContext.getResources(), bitmap)); } @Override public void onBitmapFailed(Drawable errorDrawable) { //handle later } @Override public void onPrepareLoad(Drawable placeHolderDrawable) { //handle later } }}

ImageGetterを作成したら、 / app / blogpost_detail / BlogPostDetailFragmentクラスを更新して、新しいクラスを利用しました。これは、新しいPicassoImageGetterオブジェクトを作成し、それをHtml.fromHtml関数に渡すことを意味しました。

 // bodyPicassoImageGetter imageGetter = new PicassoImageGetter(view.getContext());TextView bodyCopyTV = (TextView) view.findViewById(R.id.blogpostDetailBodyCopyTV);bodyCopyTV.setText(Html.fromHtml(blogpost.getBody(), imageGetter, null));

サンプルアプリはすでにPicassoライブラリを利用しているため、これを追加するのは非常に簡単でした。

他のもの

私のデモでは、サンプルアプリの他の多くの領域を変更しました。

色

サンプルアプリには、主要なアプリの色に役立つ/res/values/colors.xmlファイルが含まれています。これをカスタムカラーで更新しました。

  #1e88e5 #303F9F #FFFFFF #2196f3

文字列

アプリはいくつかの文字列を使用して、タイトル、メニュー、その他の領域のラベルを設定します。 /res/values/strings.xmlファイルをカスタム値で更新しました。

 Kentico Cloud NewsKentico Cloud NewsSettingsNetwork connection failedError occurredNetwork not availableError loading dataThere was a problem fetching dataTRY AGAINOpen navigation drawerClose navigation drawerKentico Cloud Newscloud@kentico.comKentico Cloud NewsBlog PostsHello blank fragmentTeaser imageThere is no data

メニュー

サンプルアプリにはフライアウトメニューがあるため、これらの値は私の構造に一致するように更新する必要がありました。 /res/menu/drawer_menu.xmlで、単一のメニュー項目でコードを更新しました。

テスト

すべてのコードが完成したら、テストする準備ができました。アプリをビルドしてから、エミュレーターを起動しました。アプリが正常に起動したことを確認しました。また、ブログの投稿が正しく表示されていることを確認しました。

アイテムを選び、詳細をきちんと確認しました。

最後に、インライン画像が正しく表示されていることを確認しました。

前進する

このブログでは、新しいKentico Cloud Delivery JavaRxSDKについて詳しく見てきました。このプロジェクトには、AndroidまたはJavaの開発をすぐに開始できるように、優れた例とコードが満載されています。組み込みのアーキテクチャを活用することで、Androidアプリをすばやく作成し、すばやく起動して実行できます。さあ、Kenticoクラウドを利用した素晴らしいモバイルアプリを作りましょう！

完全なソースコードをダウンロードする