Androidアプリ開発でWebViewを追加する方法【初心者向け】

Androidアプリ開発で(Android Studio)、GUIコンポーネントの【WebView(ウェブビュー)】を追加する方法を初心者向けに解説した記事です。このパーツを使えば、アプリ上にWebページの内容を簡単に表示できます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Android Studioでは、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。

今回はそのなかの1つである、WebView(ウェブビュー)をAndroid Studioで追加する方法と基本的な使い方をご紹介します。

Android Studioの開発環境を構築していないという方は、Androidアプリ開発環境の構築方法をまずご覧ください。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

大石ゆかり

田島メンター!!Androidアプリ内でWebページを表示したいんですけど、何かいい方法ってないですか〜?

田島悠介

それならGUIコンポーネントに「WebView」っていうのがあるよ。それを使うと、Webページを表示することができるんだ。

大石ゆかり

やり方を教えて下さい!!!

 

WebViewとは

WebViewとは、アプリ内でWebページを表示したい場合に使われるGUIコンポーネントです。これを使えば、アプリ上にWebページの内容を簡単に表示させることが可能です。

WebViewを配置する

WebViewはレイアウトエディタのパレットの「コンポジット」から配置できます。

パレット内のWebViewを、配置したい場所までドラッグしましょう。

WebView2-620x455

このようにWebViewを配置すると、xmlファイルには次のようなコードが追加されます。

<WebView
android:id=”@+id/webView″
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_alignParentLeft=”true” />

コード内の「android:layout_width」と「android:layout_height」で、GUIコンポーネントの縦と横の大きさを指定できます。「match_parent」を指定すると、親要素と同じサイズになります。

今回のように指定すると、アプリ画面全体にWebViewを表示させることが可能です。

これでWebViewの配置は完了しました。簡単ですね。

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

WebViewにWebページを表示させる

WebViewは、配置しただけでは起動しても何も表示されません。WebViewにWebページを表示するためには、次の操作が必要になります。

まず、マニフェストファイルにインターネットにアクセスを許可するパーミッションを追加します。

AndroidManifest.xmlの<manifest……>と<application……>の間に、下記のコードを追加してください。

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

WebView1-620x350

 

さらに、ソースファイルを開いて、onCreateメゾット内に次のコードを追加します。
1行目で、レイアウトに設置したWebViewを追加します。
2行目は、リンクをクリックしたときに標準ブラウザへ遷移させずにWebView内で表示できるようにしています。
3行目の「loadUrl」で、表示させたいURLを記述します。

WebView myWebView = (WebView) findViewById(R.id.webView);
myWebView.setWebViewClient(new WebViewClient());
myWebView.loadUrl(“https://www.google.com/”);

これでWebページを読み込む準備ができました。

アプリを起動すると、WebViewにWebページが表示されます。

WebView3-576x1024

今回の記事は以上です。
ぜひ参考にしてみてください。

他のGUIコンポーネントを使ってみたい場合は、Androidアプリ開発でEditTextを追加する方法も合わせてご覧ください。

 

大石ゆかり

Googleのトップページが表示されました♪

田島悠介

URLを変えるだけで表示を変更できるから、簡単に表示させたいページを表示できるよ♪

大石ゆかり

そうなんですね。ありがとうございました!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。