CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

Ktorを使って、Androidアプリとして動くシンプルなWebサーバを作ってみました (みまもりアプリ開発 1)

最近、子どもが産まれたので色々な育児対応が増えました。

小さな赤ちゃんは1日をほとんど寝ていますが、ずっと抱っこするわけにもいかずベッドや布団に寝かせます。

一方、そのまま放置していて何かあったら、、と思って時々様子をみるのですが、ドアの開閉音とか、ちょっとした音の変化で起きてしまうことがあります。

ということが背景で、離れた場所から見守る仕組みが必要になりました。今回、および次回で実現方法を説明します。

なお、この記事ではAndroidスマートフォンでサーバにすることについて記載します。(見守りアプリ開発1)
別の部屋の様子を離れたところから映像で確認する方法については、次の記事で説明します。 [見守りアプリ開発2]

環境
Android Studio 2024.3.2
Androidスマートフォン (OSのバージョンは12)

1. すでに世の中にある仕組みを確認する (Ktor+Androidアプリの開発方法を確認したい方はスキップ可能)

カメラを置いて離れたところから映像をみる、という製品はすでに多数あります。数千円〜数万円くらいです。

また、似たような機能を持つアプリも色々とあります。無料〜数百円/月でしょうか。

apps.apple.com

Bibino: ベビーモニター見守りカメラ

Bibino: ベビーモニター見守りカメラ

  • TappyTaps s.r.o.
  • ライフスタイル
  • 無料
apps.apple.com

ただ、そんなに長い期間使わないので物を増やさないようにしたいと思いました。 (すでに新生児向けに色々なものが増えているので、、)

また、アプリを使うとインターネット上に何らかのデータが飛びます。気分の問題ですが、ちょっと隣の部屋を確認するだけなのでローカルネットワークで閉じるようにしたいと思いました。

あとは、最近使っていないスマートフォンの再利用とか、自分でカスタマイズしたいというモチベーションもあり、自分で作ってみることにしました。

2. 機器構成を考える (Ktor+Androidアプリの開発方法を確認したい方はスキップ可能)

今回やりたいことをローカルネットワークで実現するには、いくつかの方法があります。3つのパターンを書き出してみました。

Case1: 赤ちゃんのいる部屋にPC+WebCameraを置く

Case1: A PC and WebCam for video streaming server

Case2: 赤ちゃんのいる部屋にスマートフォンを置く (サーバ用のPCも置く場合あり)

Case2: A PC for websocket server and a smartphon for video streaming

Case3: 赤ちゃんのいる部屋にスマートフォンだけを置く

Case3: A smartphone for websocket server and video streaming

Case1は、PCを1台使ってしまうのと、ノートPCでもちょっと大きいので今回は見送りました。

Case2は、スマートフォンがカメラになってよいのですがPCの準備も必要なので、家族が使いづらいと思って見送りました。

Case3であれば、とりあえずスマホを置いてボタンを押すだけで運用しやすいです。

そのため、今回はCase3の形で作ることにしました。

3. Androidスマートフォンをサーバにする方法:Ktor

いくつかあるようです。今回は、比較的検索結果に出てきたKtor (ケイター)を使いました。

Ktorに関する説明は省略します。たとえばこちらでわかりやすく説明されております。
qiita.com

KtorはAndroidも含む様々な機器に対応しており、サーバやクライアント側の処理を書くことができます。

Androidスマートフォンをサーバにするには、Android Studioを使ってKtorを使ったサーバ機能を持つアプリを作る必要があります。

同じようにKtorを使ってサーバアプリ開発を試している例はいくつかあります。

note.com

zenn.dev

qiita.com

akerun.hateblo.jp

これらの記事では簡単に動きましたと書かれています。しかし、私がAndroid Studioでの開発知識がほとんどないことと、バージョンや書き方が変わっているなどがあり、記事に書いてある情報だけでは動きませんでした。

最終的に動いたのですが、いくつかはまるところがあったので、手順を書きながら適宜補足していきます。

3.1 Android Studio で新規プロジェクトを作成する

File > New > New Project、Empty Activityを選択してからアプリの名称などを入力します。

Create a new project on Android Studio

Build Configuration Languageについては、Kotlin DSL(推奨と書いてある) かGroovy DSLを選択します。 おそらくどちらも使えるはずですが、今回はKotlin DSLではうまくいかずGroovy DSLを選びました。

3.2 AndroidManifest.xml, MainActivity.kt, build.gradleファイルを修正する

Android Studio画面で、左上を"Android"にして表示させたHiearchy Viewの中で、AndroidManifest.xml, MainActivity.kt, build.gradleを修正します。

Project configuration of Android Studio

◾️AndroidManifest.xml gist.github.com

permissionのみ追加します。それ以外はそのままです。

◾️MainActivity.kt

gist.github.com

色々調べた結果、Ktorでサーバを起動させるには、embeddedServerという関数を使う必要があるとわかりました。また、routingというところで"/"があるため、"http://<スマートフォンのIPアドレス>:8080"でアクセスがあると、アクセスしたブラウザには"Hello, world!"というテキストが表示されます。

◾️build.gradle

gist.github.com

3.3 sync を実施して、gradleに書かれたモジュールをダウンロードする

build.gradleには依存関係とか、必要なモジュールなどが書かれます。build.gradleを変更した場合、Sync作業を行います。すると、追加モジュールがある場合はダウンロードが始まります。

syncのボタンは他にもありますが、わかりづらかったので今回自分が使った手順をスクリーンショットにしました。[1], [2], [3], [4]の順番に選択します。

Sync gradle on Android Studio

記述が問題なくてダウンロードができると、BUILD SUCCESSFULという表示が出ます。

これが出ていれば、画面上の方の▶︎マーク (Build and Run) が実行できるようになります。逆に、build.gradleにエラーがある場合、▶︎マークが表示されないため、もし非表示だった時はbuild.gradleを見直すのが良さそうです。

3.4 エミュレータまたは実機にデプロイする

もしAndroidスマートフォンの実機を開発用PCに接続している場合、自動的に機種名が表示されます。もし表示されない場合、Android Studioの初期設定などを見直してください。

その状態で先ほどの▶︎マークを選択すると、実機にデプロイされます。以下はエミュレータへデプロイした時の画面です。

A Ktor server example runs on an emulator of Android Studio

非常に見づらいですが、画面上に Text("Ktor server running at: http://$ipAddress:8080") の表示が出ています。今回は自宅内のネットワークなので192.168.0.8:8080と書かれています。

Androidスマートフォン (Surface Duo 1)がサーバで、IPアドレスは192.168.0.8です。MacBook ProのWebブラウザから"http://192.168.0.8" にアクセスした結果です。

A web browser accesses a server on Android smartphone

このように、Android Studioを用いて、上で紹介した3つのファイルを変更することで、Androidスマートフォンをサーバとして動作できることを確認しました。

4. おまけ:生成AIの活用について

今回もGitHub Copilotを使っています。しかし、前回も思いましたがGitHub Copilotは万能ではなくある程度自分の理解が必要と思いました。

とくに、「〜を作ってください」だけだと、それらしいコードになるけど実は存在しないとかもありました。

以下の例は、次の記事で書く予定の内容に関するものです。

An answer from ChatGPT4-o

このように、Resourceというフォルダはないけどある、という説明になっていました。

あとは、build.gradleに書いた依存関係に関するエラーが中々解決できないときがあり、Claude3.7に聞いた回答だけでは不十分でした。そのため、自分でも調べながら対応しました。

今回はAndroid Studioの使い方を少し予習していたので、うまく活用できました。やはり生成AIがあっても、自分の理解は必要かなと思いました。

5. おわりに

次回は、Ktorを使ってAndroidをサーバにしつつ、Case3をどのように実現したかを説明します。

追記:こちらに書きました。
www.crossroad-tech.com