{"id":20123322,"url":"https://github.com/tyfkda/gawanativeandroid","last_synced_at":"2025-05-06T16:34:00.240Z","repository":{"id":22769465,"uuid":"26115358","full_name":"tyfkda/GawaNativeAndroid","owner":"tyfkda","description":"全画面に配置したWebViewでAndroidアプリを作るテスト","archived":false,"fork":false,"pushed_at":"2016-12-01T01:47:54.000Z","size":246,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2023-12-16T00:11:51.682Z","etag":null,"topics":["android"],"latest_commit_sha":null,"homepage":null,"language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"cms-sw/genproductions","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tyfkda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-03T11:18:14.000Z","updated_at":"2023-12-16T00:11:51.683Z","dependencies_parsed_at":"2022-08-21T12:00:56.745Z","dependency_job_id":null,"html_url":"https://github.com/tyfkda/GawaNativeAndroid","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyfkda%2FGawaNativeAndroid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyfkda%2FGawaNativeAndroid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyfkda%2FGawaNativeAndroid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyfkda%2FGawaNativeAndroid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tyfkda","download_url":"https://codeload.github.com/tyfkda/GawaNativeAndroid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224517464,"owners_count":17324407,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android"],"created_at":"2024-11-13T19:44:18.770Z","updated_at":"2024-11-13T19:44:19.276Z","avatar_url":"https://github.com/tyfkda.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"Androidでガワネイティブ\n=====================\n\nネイティブアプリなんだけどネイティブのコードは極力書かず、WebViewを使ってhtml+JavaScriptを使ってアプリを組みたい。今回はAndroid, Javaで作ってみる。\n\n[コード](https://github.com/tyfkda/GawaNativeAndroid)\n\n## WebViewを全画面の大きさで配置する\nレイアウトのxmlで指定する\n\n```xml\n\u003cRelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:tools=\"http://schemas.android.com/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\"com.tyfkda.gawanativeandroid.MainActivity\" \u003e\n\n    \u003cWebView\n        android:id=\"@+id/webView\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\" /\u003e\n\n\u003c/RelativeLayout\u003e\n```\n\n* `layout_width`、`layout_height`ともに`match_parent`を指定することで全画面にする\n\n## htmlの表示\n\n配置したWebViewを使ってJavaからブラウザを操作する。\n\n```kotlin\n// MainActivity.kt\nclass MainActivity : AppCompatActivity() {\n  override fun onCreate(savedInstanceState: Bundle?) {\n    super.onCreate(savedInstanceState)\n    setContentView(R.layout.activity_main)\n\n    val webView = findViewById(R.id.webView) as WebView\n    webView.loadUrl(\"http://www.example.com/\")\n  }\n}\n```\n\n* `findViewById`でWebViewを取得して、[`WebView#loadUrl`](http://developer.android.com/intl/ja/reference/android/webkit/WebView.html#loadUrl(java.lang.String))\n  でページの読み込みを指定できる\n* インターネットからウェブページを読み込むためにはAndroidManifest.xmlで`\u003cuses-permission android:name=\"android.permission.INTERNET\"/\u003e`\n  を指定して、アプリでのインターネット利用を有効にする必要がある\n\n## アセット内のhtmlの表示\n外部のurlではなく、アセットに含めたhtmlファイルを読み込むにはURLに`file:///android_asset/〜`と指定する\n\n```kotlin\n// Kotlin\n    webView.loadUrl(\"file:///android_asset/index.html\")\n```\n\n  * Android Stuidoでassetsフォルダを追加するには、appを選択して、メニューのFile \u003e New \u003e Folder \u003e Assets Folder\n\n## アセット内のhtmlから画像、JavaScript、CSSを読み込む\nhtml内で相対パスで書けばアセット内のファイルが自動的に読み込まれる\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"main.css\" /\u003e\n\u003cimg src=\"hydlide.png\" /\u003e\n\u003cscript type=\"text/javascript\" src=\"main.js\"\u003e\u003c/script\u003e\n```\n\n## JavaScriptとネイティブの連携\n### JavaScriptからネイティブ(Java)を呼び出す\nJavaScriptからネイティブに対してなにか起動するにはWebViewにインタフェース用のクラスを定義し\n\n```kotlin\nclass MyJavaScriptInterface(private val context: Context) {\n  @JavascriptInterface\n  fun showToast(string: String) {\n    Toast.makeText(context, string, Toast.LENGTH_SHORT).show()\n  }\n}\n```\n\nオブジェクトを登録してやると\n\n```kotlin\n// Kotlin\n    webView.addJavascriptInterface(MyJavaScriptInterface(this), \"Native\")\n```\n\nJavaScriptから呼び出すことができる：\n\n```js\n// JavaScript\nNative.showToast('PushMe clicked!')\n```\n\n* [`WebView#addJavascriptInterface`](http://developer.android.com/intl/ja/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object, java.lang.String))\n  でインタフェースの登録\n* 登録したインタフェースのpublicメソッドをJavaScriptから呼び出せる\n  * 型を自動的に変換してくれる、便利\n  * セキュリティ的に、Jelly Bean以降は[JavascriptInterfaceアノテーション](http://developer.android.com/intl/ja/reference/android/webkit/JavascriptInterface.html)がついたpublicメソッドだけが呼び出せる。（[リファレンス](http://developer.android.com/intl/ja/reference/android/webkit/JavascriptInterface.html)を参照すること）\n  * それだとセキュリティ的に危険なので、[WebChromeClient#onJsAlert](http://developer.android.com/intl/ja/reference/android/webkit/WebChromeClient.html#onJsAlert(android.webkit.WebView, java.lang.String, java.lang.String, android.webkit.JsResult))を使う方法がよいらしい（[Android の WebView で addJavascriptInterface を使わず情報を渡す - Qiita](http://qiita.com/ka_/items/f8dcde7893f3a029f151)）\n\n### ネイティブからJavaScriptを呼び出す\n[`WebView#loadUrl`](http://developer.android.com/intl/ja/reference/android/webkit/WebView.html#loadUrl(java.lang.String))を使用する：\n\n```kotlin\n// Kotlin\n    webView.evaluateJavascript(\"（JavaScriptのコード）\", null)\n```\n\n* [`WebView#evaluateJavascript`](http://developer.android.com/intl/ja/reference/android/webkit/WebView.html#evaluateJavascript(java.lang.String, android.webkit.ValueCallback\u003cjava.lang.String\u003e))を使う\n  * 第二引数は結果受け取りコールバック\n* API level 19(KITKAT)より前の場合には上のメソッドがないので、JavaScriptのコードを表す文字列の前に`\"javascript:\"`を追加した内容をurlとして[loadUrl](http://developer.android.com/intl/ja/reference/android/webkit/WebView.html#loadUrl(java.lang.String))を呼び出すことでJavaScriptコードが実行される\n\n## URLリクエストを横取りする\nJavaで登録したインタフェースのメソッドをJavaScriptから呼び出せるので、使うかどうかわからないけど、URLリクエストも横取りできる。\n\n```kotlin\n// Kotlin\n    webView.setWebViewClient(object : WebViewClient() {\n      override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {\n        ...\n      }\n    })\n```\n\n* WebViewに対して [`setWebViewClient`](http://developer.android.com/intl/ja/reference/android/webkit/WebView.html#setWebViewClient(android.webkit.WebViewClient))\n  で[`WebViewClient`](http://developer.android.com/intl/ja/reference/android/webkit/WebViewClient.html)\n  を登録できて、その[`shouldOverrideUrlLoading`](http://developer.android.com/intl/ja/reference/android/webkit/WebViewClient.html#shouldOverrideUrlLoading(android.webkit.WebView, java.lang.String))でURLに対する処理を扱える\n  * 横取りしてなにか処理した時には`true`を返す、そうでなくて通常の読み込みを継続する場合には `false` を返す\n\n\n## 実行例\n\n![スクリーンショット](ss.png)\n\n## 注意\n* [スマートフォンアプリへのブラウザ機能の実装に潜む危険　――WebViewクラスの問題について：CodeZine](http://codezine.jp/article/detail/6618)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyfkda%2Fgawanativeandroid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftyfkda%2Fgawanativeandroid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyfkda%2Fgawanativeandroid/lists"}