Andorid Studioでアプリ開発(2)~Webサイトの表示~

今回はWebサイトを表示するAndroidアプリを作ってみます。

新規プロジェクトを作成する

今回はWebサイト表示用に前回までとは違うプロジェクトを新規に作成しています。作成方法は、まずAndroid Studioメニューの[File]>[New]>[New Project]を選択します。あとの流れはほとんど同じですが、今回は下記の画面で「Blank Activity」ではなく「Empty Activity」を選んでいます。

andro30

そのまま以前紹介した手順どおりに進めていくと、以下のように新規プロジェクトの編集画面になります。

andro68

今回はここからスタートします。

Webサイトを表示させる

アプリに外部インターネットに接続する権限を与える

Webサイトを表示するAndroidアプリを作るためには、まず、アプリに外部インターネットに接続する権限を与える必要があります。そのためにAndroidManifest.xmlファイルを編集する必要があります。このAndroidManifest.xmlファイルはアプリケーションに関する必要不可欠な情報を記述した非常に重要なファイルです。ファイル名もこの名前のまま変更してはいけません。

Android StudioでAndroidManifest.xmlファイルを編集するには、編集画面の左側にあるアウトラインから開きます。ファイル自体はmanifestsフォルダ以下にあります。

AndroidManifest.xmlファイルを開いたら、ルートタグであるmanifestタグの直下に、以下のタグを追加します。

編集後は以下のようになります。

andro69

レイアウトファイルにWebViewを配置する

マニフェストファイルを編集したら、次はレイアウトファイルにWebViewタグを追加します。

レイアウトファイルの「Design」タブを開くと、スマートフォンのプレビュー画像の横に「Paletteパネル」があります。この中に[Widgets]>[WebView]というメニューがあるので、その項目をドラッグ&ドロップでスマートフォンのプレビュー画像の上に放り込みます。

すると以下のようにプレビュー画像へ何かが挿入されます。

andro70

とりあえずそこは無視して、下の「Text」タブをクリックします。そうすると、レイアウトファイルにWebViewタグが挿入されていると思います。

andro71

次にこのWebViewタグを編集しますが、その前にサンプルとして追加されているHello WorldのTextViewタグは消しておきます。

今回はとりあえずWeb表示をしたいだけなので、以下のようにシンプルに書きます。

「@+id/webView」のwebViewはID名です。

andro72

Javaコードの変更

Java部分は以下のようなコードを○○Activity.javaのonCreateメソッドの中に追加します。

「R.id.webView」のwebViewはレイアウトファイルに定義したWebViewのID名です。webView.loadUrl(getString(“http://it-challe.com/”));」は表示するURLを記述します。

重要なのはsetWebViewClientメソッドとsetJavaScriptEnabledメソッドでしょうか。特にsetJavaScriptEnabledメソッドを使ってJavascriptを有効にしないと、Javascriptを使っているWebサイトは動きません。コード全体は以下のとおりです。

andro73

エミュレータで動かした結果は以下のとおり。アプリが起動すると本サイトのトップページが表示されます。

andro74

Webサイトの表示までできました。メニューの開閉などJavascript部分も動きます。

以下、追記です。

WebViewでHTTPSサイトを表示する場合

上記のWebViewでは、HTTPSサイトを表示しようとするとエラーが起きてしまいます。その場合、「webView.setWebViewClient(new WebViewClient());」のコードを以下のように変更します。

以上でHTTPSサイトも表示できるようになると思います。

広告
  • LINEで送る