LoginSignup
5
7

More than 3 years have passed since last update.

@mktshhr

AndroidアプリでWebサーバー(Nanohttpd)を立ち上げる

Last updated at Posted at 2019-05-13

はじめに

Androidアプリの中にWebサーバを設置する方法として、Nanohttpdを利用した方法を記載する。

1. 開発環境

  • macOS High Sierra ver.10.13.6
  • node.js: ver.10.15.1
  • npm: ver.6.8.0
  • yarn: ver.1.13.0
  • vue.js (vue cli): ver.3.4.0
  • Google Chrome (macOS): ver.74.0.3729.131
  • Android Studio: ver. 3.3.1
  • Androidスマホ：Moto G5 Plus (Android 8.1.0)

2. Kotlinの新規プロジェクトを作る

今回はKotlinベースのAndroidアプリを作る。

2-1. 新規プロジェクト作成 (Android Studio)

  • Android StudioのFile -> New -> New Project... -> Empty Activity を選択、"Next"をクリック
  • 適当な名前をつける。ここでは"AndroidWebApp"とした。
  • Languageに"Kotlin"を選択。
  • Minimum API level は "API 25: Android 7.1.1 (Nougat)"とした。動作させたいOSに合わせる。
  • "Finish"をクリック

2-2. 必要なライブラリをインポートする

  • Gradle Scripts -> build.gradle (Module: app)のdependenciesに、以下のようにimplementation 'org.nanohttpd:nanohttpd-webserver:2.3.1'を追記。
AndroidWebApp/app/build.gradleの一部
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'org.nanohttpd:nanohttpd-webserver:2.3.1'
}
  • Fileメニュー -> New -> Folder -> Assets Foldersを選択し、assetsフォルダーを作成する。

2-3. Webアクセスを有効にする。

AndroidManifest.xmlでACCESS_NETWORK_STATEとINTERNETを有効にする。

AndroidWebApp/app/src/main/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="jp.mktshhr.androidwebapp">

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

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

2-4. NanoHTTPDの設定

ここではポート8888で待ち受けるHTTPDを設定する。
NanoHTTPDを継承したWebServerクラスを作り、serveをオーバーライドする。以下にコードをあげるが、必要に応じてMIMEタイプを追加すること。

AndroidWebApp/app/src/main/java/jp/mktshhr/androidwebapp/MainActivity.ktの一部を抜粋
package jp.mktshhr.androidwebapp

import android.content.Context
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import fi.iki.elonen.NanoHTTPD
import java.io.IOException
import java.io.InputStream

class MainActivity : AppCompatActivity() {

    private var context: Context? = null
    private var webServer: WebServer? = null
    private val PORT = 8888

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        this.context = applicationContext
        this.webServer = WebServer(applicationContext)
        try {
            this.webServer?.start()
        } catch (e: IOException) {
            e.printStackTrace()
        }
    }

    override fun onDestroy() {
        super.onDestroy()
        if (this.webServer != null) {
            this.webServer?.stop()
        }
    }

    private inner class WebServer(private val context: Context) : NanoHTTPD(PORT) {

        override fun serve(session: IHTTPSession): NanoHTTPD.Response {
            try {
                var uri = session.uri
                if ("/".equals(uri)) {
                    uri = "index.html"
                }

                var filename = uri
                if (uri.substring(0, 1).equals("/")) {
                    filename = filename.substring(1)
                }
                Log.d("AppInfo", filename)

                val asssets = context.getResources().getAssets()
                var fis: InputStream? = null
                try {
                    fis = asssets.open(filename)
                } catch (e: Exception) {
                    Log.d("AppErr", "File openning failed")
                }

                if (uri.endsWith(".ico")) {
                    return NanoHTTPD.newChunkedResponse(Response.Status.OK, "image/x-icon", fis)
                } else if (uri.endsWith(".png") || uri.endsWith(".PNG")) {
                    return NanoHTTPD.newChunkedResponse(Response.Status.OK, "image/png", fis)
                } else if (uri.endsWith(".jpg") || uri.endsWith(".JPG") || uri.endsWith(".jpeg") || uri.endsWith(".JPEG")) {
                    return NanoHTTPD.newChunkedResponse(Response.Status.OK, "image/jpeg", fis)
                } else if (uri.endsWith(".js")) {
                    return NanoHTTPD.newChunkedResponse(Response.Status.OK, "application/javascript", fis)
                } else if (uri.endsWith(".css")) {
                    return NanoHTTPD.newChunkedResponse(Response.Status.OK, "text/css", fis)
                } else if (uri.endsWith(".html") || uri.endsWith(".htm")) {
                    return NanoHTTPD.newChunkedResponse(Response.Status.OK, "text/html", fis)
                } else if (uri.endsWith(".map")) {
                    return NanoHTTPD.newChunkedResponse(Response.Status.OK, "application/json", fis)
                } else {
                    return NanoHTTPD.newFixedLengthResponse(Response.Status.NOT_FOUND, "text/plain", uri)
                }
            } catch (ioe: IOException) {
                ioe.printStackTrace()
                return NanoHTTPD.newFixedLengthResponse(Response.Status.INTERNAL_ERROR, "text/plain", ioe.localizedMessage)
            }
        }
    }
}
  • ビルド(Build -> Make Project)してエラーが出ないことを確認する

3. Webアプリのプロジェクト("android-web-app")作成

別途、Webアプリを開発し、Androidアプリに組み込む。
ここではVueのデフォルトページをそのまま利用する。

3-1. vue create

  • vue create android-web-app もしくは vue uiでGUI付きセットアップ
    • Preset選択では default (babel, eslint) を選ぶ（そのままリターンすれば良い）
  • cd android-web-app
    • 特に断りがないときはandroid-web-appフォルダでnpmやyarnなどのコマンドを叩く。

3-2. AndroidアプリへのアクセスによるWebページの表示

  • yarn run build
    • プロダクション用のhtmlファイル一式をdistフォルダに出力する。
    • distフォルダの中身をKotlinプロジェクトのassetsフォルダ(AndroidWebApp/app/src/main/assets/)にコピーする。
  • Android Studioでビルド(Build -> Make Project)してAndroidスマホにブラウザからアクセス( http://ipaddress:8888/ )する。AndroidスマホのIPアドレスはadb shell ifconfigでわかる。
  • AndroidスマホのChromeで "http://localhost:8888/" を表示した例 ↓

4. まとめ

vue cli3 を使ったWebアプリのサンプルをAndroidアプリに組み込み、Nanohttpdを使ったWebサーバーにアクセスすることで、スマホやPCのブラウザでWebアプリを表示することができた。

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
7