Web サイトを表示する

Posted by muchag | Android |
初回投稿:2011-07-15 (金) 0:40:19 | 最終更新:2011-07-18 (月) 16:13:32

Android アプリの中で Web サイトを表示する手法。

【環境】
[Android SDK Tools] revision 12
[API Level] 4
[デバッグ実機] Xperia arc
AndroidManifest.xml
AndroidManifest.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     package="com.sample"
  5.     android:versionCode="1"
  6.     android:versionName="1.0">
  7.  
  8.     <uses-sdk android:minSdkVersion="4" />
  9.  
  10.     <application android:icon="@drawable/icon" android:label="@string/app_name">
  11.         <activity android:name=".WebTestActivity"
  12.                   android:label="@string/app_name">
  13.             <intent-filter>
  14.                 <action android:name="android.intent.action.MAIN" />
  15.                 <category android:name="android.intent.category.LAUNCHER" />
  16.             </intent-filter>
  17.         </activity>
  18.  
  19.     </application>
  20.  
  21. +   <uses-permission android:name="android.permission.INTERNET"></uses-permission>
  22. </manifest>

 

XML ファイルを利用する場合
WebTest.java
  1. package com.sample;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.webkit.WebView;
  6. import android.webkit.WebViewClient;
  7.  
  8. public class WebTestActivity extends Activity {
  9.     /** Called when the activity is first created. */
  10.     @Override
  11.     public void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.         setContentView(R.layout.main);
  14.  
  15. +       WebView webview = (WebView)findViewById(R.id.myWebView);
  16. +       webview.loadUrl("http://www.example.com/test.php");
  17.     }
  18. }
main.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent"
  6.     >
  7.  
  8. +   <WebView android:id="@+id/myWebView"
  9. +       android:layout_width="fill_parent"
  10. +       android:layout_height="fill_parent"
  11. +       />
  12. </LinearLayout>

 

XML ファイルを利用しない場合
  1. package com.sample;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.webkit.WebView;
  6. import android.webkit.WebViewClient;
  7.  
  8. public class WebTestActivity extends Activity {
  9.     /** Called when the activity is first created. */
  10.     @Override
  11.     public void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.  
  14. +       WebView webview = new WebView(this);
  15. +       webview.loadUrl("http://www.yahoo.co.jp");
  16. +       setContentView(webview);
  17.     }
  18. }

 

WebViewClient

Android Developers:WebViewClient

何も勉強してないので、正しい用途はわからないけど
名前からして「ブラウザ」のような役割をするのかしら。

まぁ、事実実験結果もそんな感じだった。
 

WebViewClient なし

前述のサンプルコードは WebViewClient なし。
 
先ずアクティビティが起動して
(←マッチロだけど画像あり)

 
それからブラウザが起動するような動き。

左の画面では最初のうち読み込みプログレスバーも出る。

「戻る」ボタンで、元の真っ白なアクティビティに戻る。

 

WebViewClient あり
  1. package com.sample;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.webkit.WebView;
  6. import android.webkit.WebViewClient;
  7.  
  8. public class WebTestActivity extends Activity {
  9.     /** Called when the activity is first created. */
  10.     @Override
  11.     public void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.  
  14.         WebView webview = new WebView(this);
  15. +       webview.setWebViewClient(new WebViewClient());
  16.         webview.loadUrl("http://www.yahoo.co.jp");
  17.         setContentView(webview);
  18.     }
  19. }

 
起動と同時に Web サイトが表示される。

 

差異

2段階 or 1段階以外にも、JavaScript の有効無効の差も出ている。

タイトルバー

「WebViewClient なし」では、Yahoo の表示画面にタイトルバーがないことを見ても
Web サイトを表示している画面では、既にアプリの手を離れているようだ。
 

JavaScript

私の実機「Xperia arc」の「ブラウザ」は
「JavaScript を有効」にしているので
「WebViewClient なし」では JavaScript に関するコメントは出ていない。

JavaScript を有効にするには

  1. webview.getSettings().setJavaScriptEnabled(true);

参考元サイト:Webブラウザビューチュートリアル

Posted by muchag | Android |
初回投稿:2011-07-15 (金) 0:40:19 | 最終更新:2011-07-18 (月) 16:13:32

Web サイト表示エラー

Posted by muchag | Android |
初回投稿:2011-07-14 (木) 10:23:54 | 最終更新:2011-07-14 (木) 16:01:17

Android で Web ページを表示しようとした際に起きたエラー。

サッパリ意味不明・・・。

【環境】
[Android SDK Tools] revision 12
[API Level] 4
[デバッグ実機] Xperia arc
症状
test.html
  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>test</title>
  6. </head>
  7.  
  8. <body>
  9. test
  10. </body>
  11. </html>

このコードのファイルを表示しようとしただけなのだが
 

This page contains the following erros:
error on line 1 at column 2: StartTag: invalid element name
Below is a rendering of the page up to the first error.

というエラーメッセージが実機上に表示された。
 

模索
解読

内容だけ読むと
「1行目2文字目がおかしいよ」
「そんな名前のタグは知らないねぇ」
だと思うのだが。

1行目の2文字目って ! ・・・。
 

グーグル先生

グーグル先生に聞いても、ASP.net の話題が多く
さすがの先生も歯切れが悪い。

それでもせっかくの情報なので ASP.net の解決法などを読みながら
あれこれ試してみたけど、サッパリ。
 

解決?
正常ページとの比較

それでも、既存のちゃんと表示されているページと見比べてみて
あれこれ試すこと1時間。

ん?
え?
まさか?

前述のコードのファイル名は「test.html」
既存のちゃんと表示されるページのファイル名は「index.php」
・・・。
 

解決?

藁にもすがる思いで
ファイル名を「test.php」にしてみると
何とちゃんと表示された。

なんじゃこりゃ~!!!

これが本当に解決なのかどうかは不明だけど
一応メモ。

Posted by muchag | Android |
初回投稿:2011-07-14 (木) 10:23:54 | 最終更新:2011-07-14 (木) 16:01:17

リンク集

Posted by muchag | Android |
初回投稿:2011-07-13 (水) 13:46:27 | 最終更新:2011-07-13 (水) 13:47:19

Android 開発に関するリンク集のメモ。

もとまか日記Z:私が参考にしたAndroidアプリ開発情報をまとめてみました

Posted by muchag | Android |
初回投稿:2011-07-13 (水) 13:46:27 | 最終更新:2011-07-13 (水) 13:47:19

逆引き Android

Posted by muchag | Android |
初回投稿:2011-04-02 (土) 13:51:53 | 最終更新:2012-01-08 (日) 13:34:25

 

理解
  1. 9Patch
  2. apk ファイル
  3. Web サイトを表示する
  4. アクティビティ と タスク と スタック と 起動モード (と ライフサイクル)
  5. アクティビティに画像を配置
  6. コントロール配列
  7. 単位
  8. 文字列の連結

 

情報取得
  1. 現在の日時を取得
  2. 言語設定を取得
  3. 指定場所の緯度・経度を取得
  4. ディスプレイサイズの取得
  5. デバッグ画面のスクリーンショット
  6. リソースの値を取得
  7. イベント時の情報の受け渡し

 

設定
  1. Style
  2. Theme
  3. UI の表示・非表示
  4. アプリの多言語対応
  5. エミュレータに緯度・経度を設定
  6. ビルド・ターゲットの変更
  7. フルスクリーンモード
  8. ユーザ入力制限

 

レイアウト
  1. MapView の吹き出しの表示方法
  2. 画面下部に固定配置
  3. 画面方向
  4. パーツの均等割り付け

 

カスタマイズ
  1. Android API のカスタマイズ
  2. ListView

 

外部との連携
  1. Android と JavaScript の連携
  2. Web サイトを表示する
  3. YouTube 動画を表示する
  4. 電話をかける
  5. 連絡先から情報を取得して電話をかける

 

サンプル
  1. マップ
    1. ナビ機能の実現 -> 検索

 

その他
  1. Index
    1. Android Index
    2. Java Index

 

参考

書籍「Android 2.1 プログラミング バイブル
書籍「Android HACKS プロが教えるテクニック&ツール

Android Developers:リファレンス

リンク集

その他各参考サイトについては、各エントリーにて。

Posted by muchag | Android |
初回投稿:2011-04-02 (土) 13:51:53 | 最終更新:2012-01-08 (日) 13:34:25

Android Index

Posted by muchag | Android |
初回投稿:2011-01-20 (木) 16:23:40 | 最終更新:2016-04-11 (月) 20:49:22

いよいよ Android に挑戦!

今まで携帯サイトの制約に大分苦労したので
PCサイトのように、しかもアプリを作れるなんて楽しみ~♪

 
 
では~ スタート~!!
 

Android Index

丸っきりの書きかけ項目は Not found になる。

序章
  1. 開発環境の整備
  2. Eclipse 設定&使い方
    1. 開発環境の整備 -> Eclipse 編
    2. プロジェクト
      1. 新規作成
      2. インポート
      3. ディレクトリ構成
      4. XML ファイルの追加
    3. AVD (Android Virtual Device)
      1. 登録
      2. ターゲットの追加
      3. ビルド・ターゲットの変更
    4. エミュレータの起動(デバッグ)
    5. ショートカット
    6. ビュー
      1. Devices ビュー
  3. エミュレータ 設定&使い方
    1. アプリ& DB の削除
    2. 緯度・経度を設定
    3. ショートカット
    4. 日本語表記
    5. 日本語入力
  4. 実機でデバッグ(Android 4.2 以降)
    1. Xpreria arc

 

コンポーネント
  1. Intent
  2. コンポーネント
    1. アクティビティ
    2. コンテンツ プロバイダ
      1. SQLite 編

 

関数・メソッド
  1. レイアウト
    1. setMargins
    2. setVisibility & getVisibility
    1. setRawInputType
  2. Tips
    1. setMargins と setPadding の違い

 

Android API
  1. android.app
    1. Classes
      1. AlertDialog & AlertDialog.Builder
      2. ListActivity
  2. android.content.res
    1. Classes
      1. Resources
  3. android.graphics
    1. Classes
      1. Color
  4. android.location
    1. Address
  5. android.net
    1. Classes
      1. Uri
  6. android.view
    1. Classes
      1. View
        1. setTag & getTag
  7. android.widget
    1. Interfaces
      1. AdapterView.OnItemClickListener & OnItemLongClickListener
    2. Classes
      1. LinearLayout
      2. ListView
      3. RadioButton & RadioGroup
  8. Google Map JavaScript API V3
    1. 現在地マーキング 失敗編
    2. 現在地マーキング 成功編
  9. Google Map View
    1. 指定の位置に画像を配置
    2. 指定の位置に画像を配置 その2
    3. 指定場所の緯度・経度を取得
    4. 自分の現在地をマークアップ
    5. 吹き出しの表示方法
  10. Fusion Tables
    1. 接続

 

ライブラリ
  1. SL4A (Scripting Layer for Android)
  2. フレームワーク
    1. e3roid
    2. PhoneGap
  3. 自作
    1. StringUtils

 

SQLite
  1. 接続
  2. 繰り返し処理
  3. テーブル操作
  4. データ型
  5. ID カラムのお約束
  6. 中身を見る

 

がい~ん!(はまったこと)
  1. 解決済み(たぶん)
    1. エラーメッセージとその対処法
    2. AVD のエラー
    3. LogCat にログが表示されない
    4. Web サイト表示エラー
    5. キャッシュのクリア?
    6. リソースファイルのネーミング
    7. 罠チェックリスト
  2. 未解決
    1. 1つ目のテキストの位置がずれる

 

その他
  1. Index
    1. 逆引き
    2. Java Index
    3. 公開 API 一覧
  2. プロジェクト
  3. リンク集

 

瑣末な話
  1. 疑問
  2. 明日への課題

 

参考

書籍「Android 2.1 プログラミング バイブル
書籍「Android HACKS プロが教えるテクニック&ツール

Android Developers:リファレンス
Android Developers:ソフトウェア技術ドキュメントを勝手に翻訳

リンク集

その他各参考サイトについては、各エントリーにて。

Posted by muchag | Android |
初回投稿:2011-01-20 (木) 16:23:40 | 最終更新:2016-04-11 (月) 20:49:22