開発者向け
Kenticoクラウドを利用したXamarinアプリの作成-パート1
By Bryan Soltis
ヘッドレスCMSとして、KenticoCloudはあらゆるチャネルにコンテンツを配信することを目的としています。 Web、モバイル、スマートウォッチ、伝書鳩のいずれであっても、企業は1つの場所で情報を編集し、すべてのアプリケーションからアクセスできるようにする必要があります。この記事では、Kentico Cloudの新しいXamarinサポートを活用して、KCがホストするコンテンツを使用してクロスプラットフォームのモバイルアプリを構築する方法を紹介します。
誰もが自分の携帯電話を愛しています。彼らのメーカー/モデル/デザインはもちろん最高であり、他のすべては時間と技術の無駄です。人々はこれらのデバイスを中心に自分たちの生活を形作っており、多くの人にとって、それはすべてのデジタルの主要なチャネルです。
電話は新しいものではありませんが（ええ、この小さな美しさは私の最初の電話でした）、コンテンツの消費と表示の方法は常に進化しています。何年もの間、企業は主要なOSごとにアプリケーションを作成して、デバイスで没入型のエクスペリエンスを提供することに重点を置いてきました。 Xamarinを使用すると、開発者がすべてのプラットフォームに対して単一のコードベースを作成できるため、このプロセスは少し簡単になります。
それでは、コンテンツについて考えてみましょう。これまで、企業はA.アプリごとにコンテンツを作成する、B。中央ベースのコンテンツを配信するための複雑なAPI /システムを開発する、またはC.アプリ内にウェブページを読み込むだけでした（ラメ）。これらのソリューションはモバイルユーザーに情報を提供しますが、多くの作業が必要であるか、単なる回避策です。幸い、ヘッドレスCMSモデルはこのシナリオに完全に適合しています。
この記事では、KenticoCloudコンテンツを活用してクロスプラットフォームアプリを構築した方法を紹介します。 Delivery APIを使用することで、コーディングの量が大幅に削減され、開発エクスペリエンスは非常に楽しいものになりました。プロセスにはいくつかの異なるステップがあるため、投稿を2つの部分に分割することにしました。最初の記事では、最初のプロジェクトを作成してアーキテクチャを設定した方法について説明します。次に、パート2では、Kentico Cloud DeliveryAPIと小さなXAMLを活用してアプリを構築する方法を紹介します。コードサンプルはたくさんありますが、心配しないでください。パート2では、完全なソースコードを含むGitHubプロジェクトへのリンクがあります。
それを手に入れよう！
Kenticoクラウドコンテンツから始める
プロセスの最初のステップは、コンテンツを作成することでした。私の場合、ニュースリーダーアプリを作りたかったので（エキサイティングなことですが）、 KenticoCloud.comのブログ記事を使用することにしました。すでにいくつかの記事が公開されているので、アプリ内でそれらの構造をすばやく使用できると確信していました。
環境のセットアップ
Xamarinの開発に着手する前に、ツールをインストールする必要があります。私にとって、これにはVisual Studio2017とXamarinSDKが含まれていました。 Visual Studioインストーラーで、[ Mobile＆Gaming / Mobile Developer with.NET]を選択します。これにより、環境に必要なすべてのSDKとエミュレーターがインストールされます。
技術的には、XamarinStudioまたはVisualStudio forMacでアプリを開発できます。重要な点は、適切なコンポーネントがすべてインストールされていることを確認する必要があるということです。 Xamarinの要件について詳しくは、こちらをご覧ください。
Xamarinプロジェクトの作成
次に、Xamarinプロジェクトを作成しました。空白/サンプルのXamarinテンプレートを選択することもできましたが、NuGetの新しいKenticoXamarinデモプロジェクトを利用することにしました。このプロジェクトは、XamarinでKentico CloudAPIを使用するための前提条件である.NETStandard1.4を使用するように事前構成されています。このプロジェクトには、KenticoCloudコンテンツを取得して表示するために必要な基本機能が含まれています。これには、KenticoCloud.DeliveryAPIおよびXamarin.Formsへの参照が含まれます。
Kentico Xamarinサンプルプロジェクトの詳細については、こちらをご覧ください。
注意
Kentico Xamarinデモプロジェクトは、ポータブルクラスライブラリ（PCL）です。開発するとき、アプリケーションの設計に関してはいくつかのオプションがあります。組織に適したオプションを選択してください。
コードシェア戦略について詳しくは、 こちらをご覧ください。
サービスの作成
デモプロジェクトを構成して実行したので、いくつかの機能を追加することにしました。まず、KenticoCloudクライアントの作成と呼び出しを処理するための新しいサービスを追加しました。
private DeliveryClient client; private static string strKenticoCloudProjectID = 'XXXXXXXXXXXXXXXX'; // Update to your Kentico Cloud Project ID public KenticoCloudService() { client = new DeliveryClient(strKenticoCloudProjectID); client.InlineContentItemsProcessor.RegisterTypeResolver(new HostedVideoResolver()); }
次に、サービスを実装するためのインターフェイスを作成しました。
public interface IKenticoCloudService {... }モデルの作成
サービスを作成した後、 BlogPostコンテンツのモデルを作成しました。 Kentico Cloud .NETコードジェネレーターを利用してモデルを作成し、使用しないことがわかっているフィールドをすべて削除しました。
public partial class BlogPost { public const string Codename = 'blog_post'; public const string TitleCodename = 'title'; public const string PerexCodename = 'perex'; public const string DateCodename = 'date'; public const string AuthorCodename = 'author'; public const string HeaderImageCodename = 'header_image'; public const string TopicCodename = 'topic'; public const string UrlSlugCodename = 'url_slug'; public string Title { get; set; } public DateTime? Date { get; set; } public IEnumerable Author { get; set; } public IEnumerable HeaderImage { get; set; } public string UrlSlug { get; set; } public ContentItemSystemAttributes System { get; set; } public IEnumerable Topic { get; set; } public string Perex { get; set; } }
また、Authorクラスをプロジェクトにコピーして、完全な作成者名を抽出できるようにしました。
public partial class Author { public const string Codename = 'author'; public const string NameCodename = 'name'; public string Name { get; set; } public ContentItemSystemAttributes System { get; set; } }
最後に、モジュラーコンテンツから値を抽出するコードを処理するために、BlogPost部分クラスを作成しました。
public partial class BlogPost { public string ImageUrl => HeaderImage.FirstOrDefault().Url; public string AuthorName => Author.FirstOrDefault().System.Name; public string AuthorInternalName => Author.FirstOrDefault().System.Codename; public string PerexText => Regex.Replace(Perex.ToString().Replace(' ',''), '<.*?>', String.Empty); public string TopicName => Topic.FirstOrDefault()?.Name ?? 'General'; }コンテンツの取得
モデルを配置したら、コンテンツを取得する機能を追加する準備が整いました。私のサービスでは、過去10件のブログ投稿を返すGetBlogPosts関数を作成しました。
public async Task> GetBlogPosts() { List lstBlogPosts = new List(); try { var response = await client.GetItemsAsync( new EqualsFilter('system.type', BlogPost.Codename), new ElementsParameter(BlogPost.TitleCodename, BlogPost.DateCodename, BlogPost.AuthorCodename, BlogPost.UrlSlugCodename, BlogPost.HeaderImageCodename, BlogPost.TopicCodename, BlogPost.PerexCodename), new LimitParameter(10), new OrderParameter('elements.' + BlogPost.DateCodename, SortOrder.Descending) ); foreach(BlogPost blog in response.Items) { lstBlogPosts.Add(blog); } } catch (Exception) { } return lstBlogPosts; }
必要な特定の記事を返すために、いくつかのフィルターを使用していることに注意してください。また、コンテンツタイプ用に生成されたクラスには、フィールドの「XXXcodename」文字列が含まれます。これを可能な限りクリーンに保つために、API呼び出しでこれを使用することにしました。
次に、特定の著者の記事を返す別の関数を追加しました。これは、作成者による他の投稿を表示するために私のアプリケーションで使用されます。
public async Task> GetAuthorBlogPosts(string strAuthor) { List lstBlogPosts = new List(); try { var response = await client.GetItemsAsync( new EqualsFilter('system.type', BlogPost.Codename), new ElementsParameter(BlogPost.TitleCodename, BlogPost.DateCodename, BlogPost.AuthorCodename, BlogPost.UrlSlugCodename, BlogPost.HeaderImageCodename, BlogPost.TopicCodename, BlogPost.PerexCodename), new ContainsFilter('elements.' + BlogPost.AuthorCodename, strAuthor), new OrderParameter('elements.' + BlogPost.DateCodename, SortOrder.Descending) ); foreach (BlogPost blog in response.Items) { lstBlogPosts.Add(blog); } } catch (Exception) { } return lstBlogPosts; }
次に、新しい関数でインターフェイスを更新しました。
public interface IKenticoCloudService { Task> GetBlogPosts(); Task> GetAuthorBlogPosts(string strAuthor); } ViewModelの作成
私のアプリケーションでは、 BlogPostsPageとBlogPostDetailPageが必要でした。ページごとに異なるビューモデルを使用することで、機能を分離し、基盤を構築することができました。 ViewModelsクラスでは、コンストラクターでサービスのインスタンスを作成しました。これにより、ViewModelを使用するページで常にサービスを利用できるようになりました。
public class BlogPostsViewModel { public BlogPostsViewModel(IKenticoCloudService kenticocloudService) { _kenticocloudService = kenticocloudService; } private readonly IKenticoCloudService _kenticocloudService; public async Task> GetBlogPosts() { var blogposts = await _kenticocloudService.GetBlogPosts(); return blogposts; } } public class BlogPostDetailViewModel : BaseViewModel { public BlogPost BlogPost { get; set; } public BlogPostDetailViewModel(BlogPost blogpost = null) { Title = blogpost.Title; BlogPost = blogpost; } }
Service、Models、およびViewModelクラスが作成されたので、UIを設計する準備が整いました。
前進する
ふぅ、それはたくさんのコードでした！イントロで言ったように、この記事を2つの部分に分けることにしました。このシリーズのパート2では、レイアウト内のコンテンツを取得してクロスプラットフォームアプリケーションを作成する方法を紹介します。
ここでパート2をチェックしてください！
