LoginSignup
1
1

More than 5 years have passed since last update.

(失敗)Windows(Win7)上のAndroid StudioでWebViewを使用してWebサイトを表示

Last updated at Posted at 2015-08-18

概要

ここで行った作業の続きで、AndroidのWebViewの機能を使ってWebサイトを表示できるか試してみます

試すのはWindows(Win7)上のAndroid StudioでWebViewを使用したWebサイトの表示です

結果
結果としてはAndroid Studioのコンソールにエラーとか表示されて失敗となりました。。。

プロジェクト作成

Android Studioを起動

既存プロジェクトが開いている状態では、メニューFile→Close Projectで既存プロジェクトを閉じて、Welcome to Android Studio画面へ

Welcome to Android Studio画面より、Start a new Android Studio project をクリック
以下の設定でプロジェクトを作成

「CNew Project」(onfigure your new project)で以下のように設定
Application name: MyWebViewApplication
Company Domain: siouxcitizen.github.io
Package name: io.github.siouxcitizen.mywebviewapplication
Project location: C:\Users\ユーザ名\AndroidStudioProjects\MyWebViewApplication

「Target Android Devices」(Select the form factors your app will run on)で以下のように設定
Phone and Tablet にチェック
Minimum SDK → API 15: Android4.0.3(IceCreamSandwich)

「Add an activity to Mobile」で以下の(デフォルトの)Activity選択
Blank Activity 

「Customize the Activity」でデフォルト状態の以下設定を選択
Activity Name: MainActivity
Layout Name: activity_main
Title: MainActivity
Menu Resouce Name: menu_main

Finishボタン押下
プロジェクト構成のためしばらく待ち

WebViewの設定

GoogleのサイトをWebViewで表示しました

GoogleのURL 
https://www.google.co.jp/
を指定してWebViewで表示することができるか試してみました

以下のように「activity_main.xml」「AndroidManifest.xml」「MainActivity.java」
の3ファイルを変更しました

activity_main.xmlを編集して以下を追加

activity_main.xml
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

AndroidManifest.xmlを編集して以下を追加

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

MainActivity.javaを編集して以下を追加

インポート部

MainActivity.java
import android.webkit.WebView;
import android.webkit.WebViewClient;

onCreate内

MainActivity.java
//レイアウトで指定したWebViewのIDを指定する。
WebView  myWebView = (WebView)findViewById(R.id.webview);

//リンクをタップしたときに標準ブラウザを起動させない
myWebView.setWebViewClient(new WebViewClient());

//表示するサイトのURLを指定して読み込む
myWebView.loadUrl("https://www.google.co.jp/");


//jacascriptを許可する
myWebView.getSettings().setJavaScriptEnabled(true);

エミュレータでWebViewプログラム実行

メニューRun→Run 'app'→しばらくコンパイル待ち

→Launch emulatorをチェック、Android virtual deviceを選択してOKボタン押下でエミュレーターテスト起動→しばらくエミュレータ起動待ち



WebViewプログラムとエミュレータの停止

プログラム停止
Runメニュー→Stop

エミュレーター停止
Windowsタスクバーよりエミュレーターを右クリックしてウィンドウを閉じる

あとがき

エミュレータで実行した結果はAndroid Studioのコンソールにエラーが表示されたりと、まぁ失敗です。 が、一応下記のようにソースを保存しておきます。
また機会があれば、または改善点思いつけば、WebViewを試してみたいと思うのでそのときの参考用に保存しておきます。

ホントはGitHub Pagesに作った
http://siouxcitizen.github.io/CreateJS_0_6_1RPGLikeGame/CreateJS_0_6_1RPGLikeGame.html
をWebViewで表示させるぐらいまではやりたかったですが、実際に下記のソースのURLを変更してWebViewで表示してみると、レイアウトはずれるわ、エラーは出るわ、動作は遅いわ、であきらめました。

上記のようにまだ自分にはいろいろとWebView使いこなすまでの道は険しそうなので、とりあえず今回のWebView作業はここまでであきらめることにしました。

参考その1 変更ファイル全内容

activity_main.xmlファイル全内容

activity_main.xml
<RelativeLayout 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" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</RelativeLayout>

AndroidManifest.xmlファイル全内容

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="io.github.siouxcitizen.mywebviewapplication" >
    //接続を許可
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

MainActivity.javaファイル全内容

MainActivity.java
package io.github.siouxcitizen.mywebviewapplication;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //レイアウトで指定したWebViewのIDを指定する。
        WebView  myWebView = (WebView)findViewById(R.id.webview);

        //リンクをタップしたときに標準ブラウザを起動させない
        myWebView.setWebViewClient(new WebViewClient());

        //表示するサイトのURLを指定して読み込む
        myWebView.loadUrl("https://www.google.co.jp/");

        //jacascriptを許可する
        myWebView.getSettings().setJavaScriptEnabled(true);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

参考その2 WebView参考リンク

Android StudioでWebView使用

【Android Studio】Webviewを使った簡単なアプリ作成!
http://idea-cloud.com/dev/android_webview.html

Android StudioでwebViewを使ってみる!
http://qiita.com/sy_sft_/items/508870dfccfb237d72fd

Android Studio で WebViewを使ってみました。
http://blogs.yahoo.co.jp/touch_777_develop/64573611.html

WebView を使用した簡易ブラウザの作成
http://loumo.jp/wp/archive/20121029221513/

AndroidでWebView使用

WebViewを使ったアプリ作成その1
http://www.okomeda.net/?WebView%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90%E3%81%9D%E3%81%AE%EF%BC%91

第5回 WebViewを使ったブラウザアプリ [ 表示編 ]
http://ketchapp.jp/and-lec/05.html

WebViewクラス
http://www.javadrive.jp/android/webview/

本家サイト等

Developers > Develop > Reference > WebView >
http://developer.android.com/reference/android/webkit/WebView.html

ソフトウェア技術ドキュメントを勝手に翻訳
Android 開発ガイド‎ > ‎ウェブアプリ‎ > ‎3. ウェブアプリの WebView への組み込み
http://www.techdoctranslator.com/android/webapps/webview

その他

第693回:WebView とは
http://k-tai.impress.co.jp/docs/column/keyword/20150127_685512.html

AndroidシステムのWebView
https://play.google.com/store/apps/details?id=com.google.android.webview&hl=ja

1
1
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
1
1