本サイトからスピンオフした姉妹サイトです。Xamarin2015年6月4日WebBrowserプラグインを追加・利用する例を通じて、MvvmCrossでのiOS/Androidアプリ開発におけるMvvmCrossプラグインの基本的な使い方を説明する。→MvvmCrossには非常に多くの機能が含まれているが、特に各プラットフォーム固有の処理を共通処理として扱えるものは「プラグイン」として分割して提供されている。今回はMvvmCrossのプラグイン機構の概略と、標準のプラグインをNuGetで導入して使用する方法を解説する。Studioでも同様の手順で、本稿の内容が実現できることは確認している)。プラグイン機構を使用したプラットフォーム固有処理の共通化と再利用プラットフォームごとの固有の処理は、iOS/Androidでそれぞれ記述して対応することもできる。プラットフォーム固有の処理を一般化したインターフェースを用意しておき、ViewModelやServiceから一様に扱えば、ビジネスロジックは1度記述すればよくなり、生産性を向上できる。加速度センサー、位置情報の取得、Safariなどの標準ブラウザー起動といった処理は、どんなアプリでも使用する一般的なタスクのため、再利用性を上げることで多くのアプリで使用できる。MvvmCrossには、プラットフォームごとの固有処理をはじめとした、各種処理を再利用するための機構としてプラグインが用意されている。MvvmCrossのプラグイン機構は一定の決まりで実装されたアセンブリを、起動時にMvvmCrossが自動的に読み込み、起動コードを実行するようになっている。Library)にPluginLoaderクラスが、各プラットフォーム固有実装部分にはPluginクラスがあることが分かる。Plugin.Load()メソッドが実際の処理の起点となり、多くのプラグインはこの部分でIoCコンテナー(DIコンテナー)にクラスを登録するが、コンバーターを使えるようにしたり、リソースをロードしたりするものもある。MvvmCrossプラグインの実装例Coreに当たるPCLにPluginLoaderというクラスと、プラットフォーム固有実装部分にPluginというクラスがあることが分かる。Plugin.Load()メソッドがプラグインの処理の起点となる。MvvmCross標準プラグインMvvmCrossが提供するプラグインは本体同様、NuGetで提供されている。以下の表はMvvmCrossが標準で提供するプラグインの一覧だが、標準でも多くの機能が提供されていることが分かる。MvvmCross自体の一部機能も、プラグインのインストールを前提としているものもある。-MvvmCrossが標準で提供する主要なプラグインと、その対応プラットフォーム全てのプラットフォームで対応しているわけではないものや、プラットフォームによっては実装が不十分な場合もある。先述の通り、ほとんどのプラグインはIoCコンテナーにオブジェクトを追加するが、「Tips:MvvmCrossでカスタムコンバーターを作成するには?」でも紹介したColorプラグインとVisibilityプラグインは特殊で、コンバーターが追加される。プラグインの追加方法サンプルプロジェクトを通じてプラグインの使い方を確認していこう。今回はMvvmCross標準のWebBrowserプラグインを使用して標準ブラウザーを起動させるプログラムを作る。「Tips:MvvmCrossのプロジェクトをセットアップするには?」の手順に従い、MvvmCrossプロジェクトを作成する。ソリューション名は「OpenBrowserSample」と設定する(※以下のコラムでは、「MvvmCrossSample」というソリューション名で作成しており、名前に違いがあるので注意してほしい)。5.9ではプロジェクト新規作成時のダイアログが変更されており、ウィザード形式になり分かりやすくなった。Identifier(iOS)およびパッケージID(Android)の入力が、そのウィザードで求められるようになっている。該当記事も新ダイアログによる操作方法の説明を更新した)。以下の内容はリンク先の記事に対する差分となる。ソリューションおよび、共通部分となるCoreプロジェクトを作成する。Studioで(メニューバーにある)[ファイル]メニューの[新規]から[ソリューション]を選択して、ソリューション新規作成用のダイアログ(図A)を開く。Library]を選択し、[Next]ボタンを押す。Name]は「MvvmCrossSample」とする。directory.]にチェックが入っているかを確認し、最後に[作成]ボタンを押せば、実際にソリューションとCoreプロジェクトが作成される。名前のフィールドと連動してソリューション名のフィールドも変化するため、名前を設定してからソリューション名を変更するとよい。次に、作成されたソリューションにiOSアプリのプロジェクトを追加する。これには、[ソリューション]ビューのソリューション項目を右クリックし、(表示されるコンテキストメニューの)[追加]から[新しいプロジェクトを追加]を選択する。それにより表示されるダイアログ(図C)で、プロジェクトの種類から[iOS]の[App]にある[空のプロジェクト]を選択し、[Next]ボタンを押す。プロジェクトの選択iOSの[空のプロジェクト]を選択する。Identifierとなるので、所有しているドメインの逆順表記+アプリケーション名とする命名規則に沿って指定する(例えば、「jp.co.fenrir.mvvmcrosssample」などとする)。[Devices]は今回の開発ではiPadは対象外とするため、iPadのチェックを外す。[ターゲット]のiOSは、サポートしたい下限のiOSを選択する。入力が完了すれば[Next]ボタンを押す。project]画面になるので、そこで[プロジェクト名]を「MvvmCrossSample.Touch」として、最後に[作成]ボタンを押せば、実際にiOSプロジェクトが作成される。iOSプロジェクトの設定アプリの識別名やターゲットOSなどを指定する。AndroidアプリのプロジェクトをiOSと同様の手順で追加する。Name]を「MvvmCrossSample」とし、[Identififer]はAndroidのパッケージ名となるので、所有しているドメインの逆順表記+アプリケーション名とする命名規則に沿って指定する(iOS同様、「jp.co.fenrir.mvvmcrosssample」などとするとよいだろう)。Platforms]には、どのAndroidバージョンで使用できるアプリを作るかを指定する(※各選択肢の意味は次の表を参照されたい)。Development]を選択する場面が多くなるだろう。Androidプロジェクトの設定こちらもiOS同様、アプリの識別名やターゲットOSなどを指定する。project]では、[プロジェクト名]として「MvvmCrossSample.Droid」として作成する。プラグインの導入プロジェクトが作成されたら、プラグインを追加する。Plugin」を追加する。Packages]を選択して、ダイアログ(図2)を開く。右上の検索フィールドから「MvvmCross」という名前でパッケージを検索すると、MvvmCrossに関連するパッケージが列挙される。Plugin]を選択してインストールする。現在は独自フォークされたMvvmCrossとそのパッケージも上がっているので、公式のプラグインを追加する場合は、パッケージIDがMvvmCross.HotTuna.Pluginで始まることを確認しておくとよい。Pluginを追加する。公式のプラグインを追加する場合はパッケージIDがMvvmCross.HotTuna.Pluginであることを確認すること。この操作を用意した全てのプロジェクト(つまりiOSやAndroidのプロジェクト)にも行う。各プラットフォームのプロジェクトへの追加を行うと、「Bootstrap」というフォルダーができ、「WebBrowserPluginBootstrap.cs」というファイルができている(図3)。このクラスはMvxPluginBootstrapActionクラスを継承したもので、MvvmCrossは起動時にこのクラスを検索してプラグインをロードするため、削除しないようにする。プラグインパッケージの追加後のソリューションBootstrapフォルダーが作られ、その中にPluginBootstrapクラスが作成される。プラグインの読み込みに使用されるので削除しないこと。Coreプロジェクトの実装FirstViewModelクラスを以下のように実装する。Pluginが提供するIMvxWebBrowserTaskを指定したコンストラクターを定義している。このようにすることで、ViewModelが作成されるときにIoCコンテナーに入っているプラットフォームごとのIMvxWebBrowserTaskインターフェースの実装が渡されるので、この先の処理のためにフィールド変数に格納しておく(1)。次に、開くURLを入力するためのテキストフィールドとなるUrlプロパティを定義した(2)。ボタンをタップしたときの処理として、OpenBrowserCommandを定義した(3)。ここではIMvxWebBrowserTaskが提供するShowWebPageメソッドを実行して、UrlプロパティにセットされているURLを標準ブラウザーで開くように実装している。Touchプロジェクトの実装iOS側の実装は、「Tips:MvvmCrossで画面遷移するには?」で紹介した.xibファイルを使う方法で行う。Field(UITextField=iOS標準の単一行テキスト入力コンポーネント)と、ブラウザー起動用にButton(UIButton=iOS標準のボタン)を画面上に配置し、それぞれUrlTextFieldとOpenBrowserButtonとしてアウトレットを作成する(図4)。FieldとButtonを配置する。次にバインディングを定義する。ViewsフォルダーのFirstView.csファイルを次のように修正する。vm.OpenBrowserCommand);set.Apply();}}}Touchプロジェクト側でのバインディング定義(FirstView.cs)継承元のクラスをMvxViewControllerへ変更し(1)、バインディングを定義している(2)。Droidプロジェクトの実装Droidプロジェクトについてもレイアウトを作成し、バインディングを定義する。これには、[ソリューションビュー]からDroidプロジェクトのResources-layoutフォルダーにあるFirstView.axmlファイルを次のように編集する。/></LinearLayout>Droidプロジェクト側でのバインディング定義(FirstView.axml)URL入力用のEditTextを用意して、TextプロパティをViewModelのUrlプロパティへバインディングし(1)、ブラウザー起動用のButton(2)を作り、ClickイベントにViewModelのOpenBrowserCommandをバインディングしている2。アプリケーションの実行この状態でアプリを実行すると、URL入力用のテキストフィールドと、ブラウザー起動用のボタンが表示される。Insiderのトップページが表示される。完成したアプリボタンをタップするとiOSではSafariが、Androidではユーザーがデフォルト設定しているブラウザーが起動する。ViewModelでの記述のみで、目的としている標準ブラウザーの起動をさせることができた。■このように、プラグインを活用することで、クロスプラットフォーム開発の効率を向上させることができる。プラットフォーム固有の実装をする前に、「プラグインが利用できないか」もしくは「新規にプラグインを作成できないか」を検討してみてほしい。【コラム】コミュニティで提供されているプラグインNuGetにはMvvmCrossの機能として提供されているものの他、コミュニティによって作成されたプラグインも存在している。以下のようなものである。(Acr.MvvmCross.Plugins.DeviceInfo)こういったプラグインも今回の方法で読み込めるが、プラグインの使用方法などは追加するときには分からないことが多い。Siteを開くことでそのプラグインの配布元サイトを参照できるので、ドキュメントはここから得られる。NuGetにはMvvmCrossバージョン1.x系をターゲットとしたプラグインも残っているので、間違って追加しないように注意が必要となる。※以下では、本稿の前後を合わせて5回分(第51回~第55回)のみ表示しています。INDEX]を参照してください。MvvmCrossでカスタムコンバーターを作成するには?MvvmCrossでのiOS/Androidアプリ開発において、バインディングする値を変換できるカスタムコンバーターの使い方を説明する。Xamarin.FormsでTwitterクライアントを作成するには?TwitterのAPIを扱えるライブラリであるCoreTweetを使用して、Twitterデータを検索するアプリを作成。CoreTweetの導入と、検索したテキストの表示までを紹介する。MvvmCrossでWebBrowserプラグインを使用するには?WebBrowserプラグインを追加・利用する例を通じて、MvvmCrossでのiOS/Androidアプリ開発におけるMvvmCrossプラグインの基本的な使い方を説明する。Studioの正規表現ツールキットを使って手軽に行う方法を紹介。MvvmCrossでカスタムコントロールをTwo-Wayバインディングに対応させるには?MvvmCrossでのiOS/Androidアプリ開発において、カスタムビュークラスをTwo-Wayバインディングに対応させる方法を解説する。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。開発者のためのSlackチーム、作りました:「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。2020最適なビューへの切り替えを推奨します:スマートフォン用表示に。