はじめに

昨今の Android アプリ開発は主に Kotlin を用いて行われるようになりました。

Kotlin は 2011 年注1 に発表され、2017 年の Google I/O 注2 で Android 公式開発言語に追加されました。

本書では Android 向けの Tips 集として、Android アプリ開発に関するノウハウを紹介します。

1.1 対象とする読者

  • 普段Androidアプリを作成している人

1.2 開発環境

  • macOS 10.15.3
  • Android Studio 3.5.3 注3
  • Kotlin 1.3.50

1.3 免責事項

本書に記載された内容は、情報の提供のみを目的としています。

したがって、本書を用いた開発・製作・運用は、必ず自身の責任と判断によって行ってください。

これらの情報による開発・製作・運用の結果について、著者はいかなる責任も負いません。

1.4 サンプルコード

本書で紹介するソースコードは以下から入手できます。

1 章 JavaScript との相互通信

https://github.com/usayuki/IntercommunicationWithJavascriptSample

2 章 写真アプリを作成する

https://github.com/usayuki/PhotoGallerySample

4 章 暗号化、複合をコマンドラインで行う

https://github.com/usayuki/crypto


注1 2011 年 7 月 20 日

注2 2017 年 5 月 17 日の Google I/O 2017

注3 https://developer.android.com/studio/?hl=ja

目次

はじめに

1.1 対象とする読者
1.2 開発環境
1.3 免責事項
1.4 サンプルコード

第1章 JavaScript との相互通信

1.1 Web アプリを作成する
1.2 html と JavaScript をプロジェクトに組み込む
1.3 html と JavaScript を読み込む
1.4 Permission を追加する
1.5 JavaScript から Kotlin のメソッドを実行する
1.6 Kotlin から JavaScript のメソッドを実行する

第2章 写真アプリを作成する

2.1 プロジェクトを作成する
2.2 画像を追加する
2.3 テーマを変更する
2.4 画像のリスト画面を作成する
2.5 画像のプレビュー画面を作成する
2.6 プレビュー画面への遷移を作成する
2.7 画面遷移にアニメーションを設定する

第3章 リソース管理術

3.1 適切なファイル単位で分割する
3.2 Color の適切な命名
3.3 Color の alpha の管理
3.4 命名規則

第4章 暗号化、複合をコマンドラインで行う

4.1 暗号化
4.2 複合
4.3 コマンドラインでの実行

おわりに

著者紹介

第1章JavaScript との相互通信

本章では、Web アプリ(JavaScript)とネイティブアプリ(Kotlin)とで相互通信を行う側アプリの作成方法を解説します。

作成するアプリは Web アプリで入力した数値をネイティブアプリで 2 倍し、その結果を Web アプリで表示するというシンプルなものです。

1.1 Web アプリを作成する

htmlファイルを作成する

アプリ内で表示する Web アプリの UI を作成します。

head では次節以降で作成する index.jsinterface.js と jQuery を読み込みます。

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/ jquery/3.4.1/jquery.min.js"></script>
  <script src="interface.js"></script>
  <script src="index.js"></script>
</head>

次に body で今回の Web アプリの UI を作成します。

UI はタイトルと数値の入力欄、ネイティブアプリで 2 倍にするための計算ボタンを配置します。

<body>
  <h1> 入力した値を 2 倍にする </h1>
  <input class="input_area" type="text">
  <div class="text"> ここに結果が出る </div>
  <div class="btn"> 計算する </div>
</body>

以下が index.html のソースコード全文です。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/ jquery/3.4.1/jquery.min.js"></script>
    <script src="interface.js"></script>
    <script src="index.js"></script>
  </head>
  <body>
    <h1> 入力した値を 2 倍にする </h1> <input class="input_area" type="text">
    <div class="text"> ここに結果が出る </div>
    <div class="btn"> 計算する </div>
  </body>
</html>

JavaScriptファイルを作成する

index.js ファイルを作成する

まず、さきほど作成した html の計算するボタンが押された際の処理を index.js ファイルに実装します。

「計算する」ボタンがクリックされたら、入力欄の値を取得します。

$('.btn').on('click', function() {
  var number = $('.input_area').val();
});

次に、ネイティブアプリと疎通を行う interface.js のインスタンスを作成し値を渡します。

var interface = new Interface();
interface.double(number);

以下が index.js のソースコード全文です。

index.js
$(function() {
  $('.btn').on('click', function() {
    var number = $('.input_area').val()
    var interface = new Interface();
    interface.double(number);
  });
});

interface.js を作成する

ネイティブアプリと疎通を行う interface.js を作成します。

まずは Interface オブジェクトを作成します。

var Interface = function() {};

次に、index.js から呼び出されるメソッドを Object.prototype を用いて実装します。

詳しい解説は 1-5「JavaScript から Kotlin のメソッドを実行する」の「JavaScript 側の実装をする」を参照してください。

Interface.prototype.double = function(number) {
  alert("double:" + number);
};

次に、Kotlin 側から呼び出されるメソッドを定義します。

こちらは window オブジェクトを拡張して実装します。

ここで、Kotlin 側から送られてきた値を、html に表示します。

詳しい解説は 1-6「Kotlin から JavaScript のメソッドを実行する」の「JavaScript 側の実装をする」を参照してください。

window.double = function(number) {
  $('.text').text(number);
};

以下が interface.js のソースコード全文です。

window.double = function(number) {
  $('.text').text(number);
};

var Interface = function() {};

Interface.prototype.double = function(number) {
  alert("double:" + number);
};

1.2 html と JavaScript をプロジェクトに組み込む

html と JavaScript ファイルを配置する assets ディレクトリを作成します。

右クリック > New > Folder > Assets Folder を選択します。

次に作成した Assets ディレクトリに html と JavaScript ファイルを配置します。

1.3 html と JavaScript を読み込む

プロジェクト内に組み込んだ html と JavaScript ファイルを読み込みます。

webView.loadUrl("file:///android_asset/index.html")

1.4 Permission を追加する

JavaScript を実行するには、AndroidManifest に次の権限を設定します。

AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>

1.5 JavaScript から Kotlin のメソッドを実行する

WebViewの設定をする

WebView の設定を行います。

今回は画面全体に WebView を配置します。

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas. android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

次に、WebView 内で JavaScript を有効にします。

MainActivity.kt
val settings = webView.getSettings()
settings.setJavaScriptEnabled(true)

WebChromeClientを実装する

JavaScript から Kotlin のメソッドを実行するには WebChromeClient の onJsAlert を使用します。

JavaScript から実行したメソッドは onJsAlert の message で受け取れます。

onJsAlert の戻り値で AlertView の表示を制御しており、今回は表示しないため true を設定します。

※ AlertView を表示しない場合、見た目上は表示されていませんが、透明な AlertView が表示された状態となっています。

そのため、そのままだと操作不能になってしまうので、result.cancel() で Alert のキャンセルを実行して AlertView を閉じる必要があります。

webView.setWebChromeClient(object: WebChromeClient() {
  override fun onJsAlert(view: WebView, url: String, message: String, result: JsResult):
    Boolean {
      result.cancel()
      return true
    }
})

今回は「:」をセパレーターにして、メソッド名 : 値 1 としています。

そのため、受け取った message を「:」で分割し、JavaScript でどのメソッドを呼んだかを判断します。

val components = message.split(":")
when(components[0]) {
  "double" - > {
    val numString = components[1]
    val number = numString.toInt()
    val result = number * 2 webView.evaluateJavascript("window.double($result)", null)
  }
}

JavaScript側の実装をする

Kotlin のメソッドを呼び出したい箇所で、alert(method + messageBody) を実装します。

method の部分は Kotlin 側で定義した呼び出したいメソッド名を入れてください。

messageBody の部分は Kotlin 側に渡したい値を入れてください。

Kotlin は Swift と異なり、JavaScript の alert をハンドリングするため文字列しか使用できません。

そのため、呼び出したいメソッド名や渡したい値を 1 つの文字列にする必要があります。

今回は「:」をセパレーターにして、メソッド名 : 値 1 としています。

alert("double:" + number);

1.6 Kotlin から JavaScript のメソッドを実行する

WebViewでJavaScriptを呼び出す

JavaScript のメソッドを呼び出したい箇所で、evaluateJavascript(String script, ValueCallback <String> resultCallback) を実装します。

このメソッドの第一引数は文字列のため、呼び出したい JavaScript のメソッドは "" で囲う必要があります。

webView.evaluateJavascript("window.double($result)", null)

JavaScript側の実装をする

window オブジェクトを拡張して Kotlin から呼び出せるようにします。

window.double = function(number) {
  $('.text').text(number);
}
試し読みはここまでです。
この続きは、製品版でお楽しみください。