タケハタのブログスマートフォン用の表示で見るタケハタのブログプログラマの生き方、働き方、技術について雑多に書いていくブログです。MPPに関するワークショップを受けてきました。MPPでライブラリを作り、複数のプラットフォーム(サーバー、Android、iOS、Web)でロジック共有をするやり方を紹介したいと思います。ワークショップで使った資料等は有料コンテンツのためリンクは貼れないのですが、下記の公式ドキュメントが参考になると思います。play.kotlinlang.orgここで書いてあるような内容をハンズオンで実践しました。Projectのことです。Kotlinで実装したコードを、ビルドしてAndroid、iOS、Webをはじめとした色々なプラットフォームで共有することができます。2019でも多くセッションがあったりと、今後のKotlinのアップデートの目玉機能の一つと言えます。MPPのプロジェクトを作成します。その後にbuild.gradleの変更など準備が色々あるので、順番に説明していきます。IDEAで新しいプロジェクトを作成します。Gradleプロジェクトで「Kotlin/Multiplatform」を選択します。script」にもチェックを入れてください。あとは任意のGroupId、ArtifactIdを設定して作成。kotlin-mpp-library-exampleという名前の前提で進めます。MPPでのビルドを実行するには、Gradleでいくつかの記述をする必要があります。gradle-wrapper.propertiesの修正まず、gradle-wrapper.propertiesを下記のように修正します。distributionBase=GRADLE_USER_HOMEdistributionPath=wrapper/distsdistributionUrl=https\://services.gradle.org/distributions/gradle-5.6.1-bin.zipzipStoreBase=GRADLE_USER_HOMEzipStorePath=wrapper/distsデフォルトの状態から変更点は、distributionUrlです。ここで指定しているGradleのバージョンが古い状態(このサンプルを作成した時点では5.2.1でした)だとビルド時にエラーになってしまうため、「5.6.1」のURLに変更します。jjbuild.gradleへの定義追加build.gradleは下記になります。into(targetDir)}tasks.getByName("assemble").dependsOn(packForXcode)1対象プラットフォームの追加まず、ライブラリをビルドする対象のプラットフォームの設定を追加します。JVMの定義で、通常KotlinやJavaで作っているライブラリと同様のものになります。サーバーとAndroidはいずれもKotlinで実装するため、こちらを使います。JavaScriptの定義になります。iOSの定義で、ここだけ少し記述が特殊になります。Xcodeで使用するためのフレームワークファイルを作成するための定義になります。設定されている名前が、フレームワークファイルのファイル名にも使われます。各プラットフォーム毎の固有のコードを配置するソースディレクトリを定義します。配下に下記を追加します。定義されていますが、ここが共通ライブラリのコードを配置する場所になります。(各プラットフォームのMain、Testを追加していますが、今回はテストに関しての説明はしません)3iOSのライブラリビルドの定義iOSではもう一個、生成したフレームワークファイルをXcodeから使用するために下記の記述が必要になります。いうプラグインを追加します。ディレクトリ配下に、各プラットフォーム毎コードを配置する下記ディレクトリを作成します。配下に任意のパッケージを作成します。選択しても、「Package」が表示されません。「Directory」を選択して、下記のように入力するしかありません。(最初ここで地味に戸惑いました)そして、showMessage.ktという名前で下記を作成します。String「helloPlatform」が各プラットフォームから共通で実行される処理になります。プラットフォームの名前を含んだメッセージの文字列を返却するだけの関数です。その中で呼ばれている「platformName」が下に定義されています。いうキーワードを付けると、各プラットフォーム毎の実装が必要であることを意味します。あると、それに対応する各プラットフォームの実装がないと、コンパイルエラーになります。プラットフォーム毎の実装は、この後紹介します。作っていたのと同様のパッケージを作成します。「Package」が表示されます。iOSの固有処理実装まずiOSの固有処理の実装です。作成したパッケージの配下に、下記のコードを配置します。付けた関数に対して、プラットフォーム毎の固有処理を実装する関数を意味するものになります。今回はプラットフォームの名前を返却したいだけなので、ここでは「iOS」という文字列を返しています。配下に、下記のコードを配置します。配下に、下記のコードを配置します。"JVM"ビルドしてMavenLocalに公開するMavenLocalを使うと、ローカルのディレクトリに配置したライブラリを、Mavenリポジトリと同じように参照することができます。配下が対象になります。今回のライブラリで実際にやってみます。build.gradleのversionを1.0.0に変更します。各プラットフォームのライブラリが配置されます。kotlin-mpp-library-example-metadataさらに各ライブラリの中を見ると、バージョン毎のディレクトリが作られ、その中にjarファイルが存在します。maven-metadata-local.xmlGradleでダウンロードしてきた状態と同じですね。このMavenLocalの参照方法については後述します。各プラットフォームから呼び出す作成したライブラリを各プラットフォームから実行していきます。今回はライブラリを呼び出すところの説明がメインなので、各プラットフォームのプロジェクト作成などはざっくりした説明にします。サーバーまずはサーバーから。こちらはKtorを使って実装し、JVMのライブラリを呼び出します。Projectを選択します。Ktorを選択し、フィーチャーのチェックは全てなしで、デフォルトの状態で作成します。GroupId、ArtifactIdや作成するディレクトリは任意で構いません。mpp-libraryの依存関係追加build.gradleで、先ほど公開したMavenLocalにあるJVMのライブラリへの依存関係を追加します。依存関係を追加します。配下にあるライブラリを参照してくれます。ライブラリの実行あとは通常通りライブラリの関数をインポートして、実行するだけです。「Application.kt」を下記のように変更してください。実行し、結果の文字列を返却するだけの処理をルートパスで実装しています。JVM」の文字列が表示されていれば成功です。これでサーバープログラムからJVMのライブラリを呼び出すことができました。Android次はAndroidです。Studioでプロジェクトを作成し、ライブラリはサーバーと同様にJVMのものを呼び出します。Activity」を選択し、Next。levelは「Lollipop」を選択します。こちらでFinishを押下すると、プロジェクトが作成されます。mpp-libraryの依存関係追加ここはサーバーと基本的に同じです。ディレクトリの配下にあるので、注意してください。MavenLocalへの参照の追加は、プロジェクト直下のbuild.gradleに記述します。ディレクトリ配下のbuild.gradleに記述します。IDEAと微妙に違うので迷いました)します。Librariesの中を見ると、「kotlin-mpp-library-example-jvm」が追加されているのが分かります。表示する画面でライブラリを実行するAndroidアプリから、JVMライブラリを実行します。activity_main.xmlを下記のように変更します。mainTextViewにIDを振り、コードから参照できるようにしています。MainActivity.ktを下記のように変更します。実行結果で書き換えています。実行すると、下記のような画面になります。これで、Androidからのライブラリの実行ができました。iOS次はiOSです。Xcodeで作成したSwiftのプロジェクトで、iosx64のライブラリを呼び出します。project」を選択します。App」を選択し、Next。Identifierまでは任意の情報を入力。Interfaceは「SwiftUI」を選択し、Next。あとは任意のディレクトリを選択し、プロジェクトを作成します。mppLibrary.frameworkの中にあります。共通ライブラリのところで、build.gradleで設定していたディレクトリですね。これをXcodeのプロジェクトから実行できるようにします。フレームワークを構成に追加する作成したフレームワークファイルを構成に追加します。Content」の+ボタンを押下します。Files」を選択し、先ほどのkotlin-mpp-library-exampleプロジェクトにある「mppLibrary.framework」のディレクトリを指定します。これでフレームワークが構成に追加されました。フレームワークの検索場所を設定する構成に追加したフレームワークファイルの、検索場所を設定する必要があります。Settings」のタブを開きます。ダブルクリックします。+ボタンを押下し、フレームワークファイルが配置されているディレクトリ(kotlin-mpp-library-exampleプロジェクトのxcode-frameworks)のパスを入力し、保存します。これでフレームワークファイルの検索場所が追加されました。この設定がないと、ビルド時に構成に追加したフレームワークを見つけられずエラーになってしまいます。ここまでで、やっと実行する準備が整いました。表示する画面でライブラリを実行するAndroidと同じように、ライブラリを実行して取得した文字列を、画面に表示するようにします。ContentView.swiftを下記のように変更します。iOS」の文字列が表示されます。JavaScript最後にJavaScriptの実装です。シンプルなHTMLを作成して、JSのライブラリを呼び出します。Webプロジェクトを使います。Web」を選択し、任意のプロジェクト名で作成します。ここでは「webapplication」という名前で作成します。Projectを使用してください)ライブラリをコピーiOSと同じように、JSも手動でライブラリを取り込む必要があります。配下に「build/js/packages/kotlin-mpp-library-example.js」という名前で出力されています。配下にある「kotlin.js」に依存しています。ディレクトリ配下にコピーします。表示する画面でライブラリを実行するプロジェクト直下に下記の内容でindex.htmlを作成します。タグで先ほど配置した2つのjsファイルを読み込みます。戻り値で「kotlin_mpp_message」の要素のテキストを書き換えています。JavaScript」のメッセージが表示されます。これで、全てのプラットフォームでのライブラリ呼び出しができました。MPPを使ってライブラリを作り、実際に各プラットフォームから呼び出すところまで紹介しました。本当はサーバーとクライアントで疎通して、どう共有するかとかも書きたかったんですが、さすがに長すぎるので次回に回します。実際書いてみて、プラットフォームによってはGradleの記述や手順が色々面倒だったりと、まだまだ改善の余地はあります。このあらゆるプラットフォームでコードを共有できるというのは、やはり魅力的です。最近はFlutterなども流行っていますが、サーバープログラムまで共有できるというのも、自分がサーバーサイドエンジニアなこともあり惹かれました。今後もまだまだアップデートが続いていくと思うので、注目してキャッチアップしていきたいと思います。はてなブログProプログラマとしての生き方とか、働き方とか、技術のことを雑多に書いていきます。CODE-セブンスコード-」のバックエンド技術DockerでMySQLを起動した時はバージョン差異に注意ブログの技術記事で書く内容をパターン分けしてみた2019年を雑に振り返る月別アーカイブはてなブログをはじめよう!take7010さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。