WebVIiew(Android)を使ってみる
こんにちは。 新しい方のあらいではなく、荒れてる方のあらいです。
今日はRailsで単語勉強WEBアプリを作った想定で、WebViewを使った、簡単なアプリを作ってみました。(今回はAnkiという、素晴らしい単語帳アプリを、自分の作品ということにしてみました)
全体の流れ
- Manifestを編集。ネット接続の制限を外す。
- LayoutにWebViewを追加→レイアウト全体の編集
- JavaにWebViewで、URLを取得するメソッドを追加
- 細かい設定(ページハンドリング、JavaScript)
1.Manifestの編集
デフォルトでは、アプリでインターネットに接続することは、制限されているそうです。接続の許可をします。
Permissionsタブ→Add→Uses Permissions→Nameは「android.permission.INTERNET」
2.LayoutにWebViewを追加→編集
参考資料
WebView | Android Developers
こんな感じにしました
3.JavaにWebViewで、URLを取得するメソッドを追加
WebViewクラスのloadUrlメソッドを使います
参考資料
WebView | Android Developers
4.細かい設定(ページハンドリング、JavaScript)
ここまででWebページの表示は出来ます!
しかし、AnkiはJavaScriptを有効化しなければ、うまく動作しません。
加えて、デフォルトでは、ページを開くためのアプリを起動する動作に優先順位があります。WebViewにぺージを表示する前に、どのアプリ(例えばChromeやOpera)でページを開きますか?と聞かれてしまいます。
そこで、これらの設定を変更します。
詳しくはこちら!(素晴らしいまとめ)
3. ウェブアプリの WebView への組み込み - ソフトウェア技術ドキュメントを勝手に翻訳
完成品の画像
ボタンは、横からスッと出せる方が画面を有効活用できますね・・・。
あと、Anki(↑の画像)と英辞郎(↓の画像。スマホ向けページ)を見ると、見やすさが全く違う!WEBアプリ作りでは、スマホ専用ページを作らなければなりませんね。
---以下、無駄話---
今日は、名駅の本屋へ行ってきました。
目的はRubyと、Ruby on Railsの本。
Rubyは、「パーフェクトRuby」を購入しました。読むのに1週間かかるかも。Todoアプリを作る章がありました。
Railsは、結局何も買っていません。
並んでいる本の内容より、「Railsチュートリアル」の方が良いと思いました。(内容は勿論、しかも無料!)
Ruby on Rails チュートリアル:実例を使って Rails を学ぼう
休み中に、WEBアプリを1つ、Androidアプリを1つ完成させたいです!
ではまた!