2011年11月24日木曜日

Androidアプリのご意見・要望機能をGoogleドキュメントで実現する方法2-WebView検討版

前回の続きです。

おきにいり: Androidアプリのご意見・要望機能をGoogleドキュメントで実現する方法 <http://miquniqu.blogspot.com/2011/11/100dl-android1-twitter-pc-or-android.html>

今回はWebViewでの表示ができないか考えて見ます。
※今回の話は最終的に採用にいたってないので検討どまりです。

現時点でできていること

  1. Googleドキュメントのアンケートフォーム機能でご意見・ご要望フォームを作成
  2. Android端末からの表示
  3. アプリバージョン、OSバージョンなどを自動入力

いけてないところ

  1. Googleドキュメントのアンケートフォームがスマフォ対応されておらず表示時点でわかりにくい
  2. ブラウザへの暗黙的インテント呼び出しなので戻りボタン操作時の制御がブラウザ任せ

1は画像を見てもらえればすぐわかるレベルと思いますが、作ってる本人はそこまで違和感ないのです。
ただ初見のユーザは「この画面をブラウザで表示している」のではなく、「アプリの一部」と認識してるのではないかという懸念が有りますので、もう少し画面内に納めたい。

2は初期表示画面はアプリの操作の流れで表示してますので、とんでもブラウザでなければ戻るボタンで前画面であるアプリへ制御もどしてくれます。ただ、送信後の確認画面が曲者で、確認画面から戻るボタンでまたフォーム画面が表示されるのです。これはいけてない。

やりたいこと

  1. 横幅を画面内に押さえたい
  2. フォーム画面・確認画面からの戻るボタンでアクティビティ終了させた結果として、アプリに戻したい
  3. ユーザーの任意でズームをさせたい
  4. 縦横回転に耐えられるようにしたい
  5. タブレットを考えるとある程度可変な初期サイズとしたい

WebView呼び出しの実装検討

正直なところ、上記のやりたいことは綺麗に実現できていません。
細かいことを書く前に、現時点でのソースを貼り付けてみます。

  1: public class UserFormTestActivity extends Activity {
  2: 
  3:   public static final String BASE_URL = "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0,user-scalable=1\" /><title>ご意見・ご要望</title></head><body><iframe src=\"__FORMURL__\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" width=\"__WIDTH__\" >読み込み中...</iframe></body></html>";
  4:   public static final String FORM_URL = "https://docs.google.com/spreadsheet/viewform?formkey=~ID~";
  5: 
  6:   private static final int MENU_USERFORM = 1;
  7: 
  8:   @Override
  9:   protected void onCreate(Bundle savedInstanceState) {
 10:     super.onCreate(savedInstanceState);
 11:     setResult(Activity.RESULT_CANCELED);
 12: 
 13:     // プログレス表示
 14:     requestWindowFeature(Window.FEATURE_PROGRESS);
 15:     requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
 16: 
 17:     // WebViewの設定
 18:     WebView webView = new WebView(this);
 19:     WebSettings webSettings = webView.getSettings();
 20:     webSettings.setJavaScriptEnabled(true);
 21:     webSettings.setSaveFormData(false);
 22:     webSettings.setSavePassword(false);
 23:     webSettings.setSupportZoom(true);
 24:     webSettings.setBuiltInZoomControls(true);
 25:     //webSettings.setDefaultFontSize(10);
 26:     webView.setWebChromeClient(new WebChromeClient() {
 27: 
 28:       @Override
 29:       public void onProgressChanged(WebView view, int newProgress) {
 30:         super.onProgressChanged(view, newProgress);
 31:         setProgress(newProgress * 100);
 32:       }
 33: 
 34:     });
 35:     webView.setWebViewClient(new WebViewClient() {
 36:       @Override
 37:       public boolean shouldOverrideUrlLoading(WebView view, String url) {
 38:         // 外部ブラウザを利用しない。
 39:         view.loadUrl(url);
 40:         return true;
 41:       }
 42:     });
 43:     setContentView(webView);
 44: 
 45:     // FormURLの編集
 46:     StringBuffer sbFormURL = new StringBuffer();
 47:     sbFormURL.append(FORM_URL);
 48:     // アプリのバージョン
 49:     sbFormURL.append("&entry_1=").append(getVersionName());
 50:     // ユーザーに表示するバージョン番号
 51:     sbFormURL.append("&entry_2=").append(Build.VERSION.RELEASE);
 52:     // 最終的にユーザへ表示するモデル名
 53:     sbFormURL.append("&entry_3=").append(Build.MODEL);
 54: 
 55:     // URLの編集
 56:     String url;
 57:     url = BASE_URL.replace("__FORMURL__", sbFormURL.toString());
 58:     url = url.replace("__WIDTH__", "300");
 59: 
 60:     webView.loadDataWithBaseURL("", url, "text/html", "utf-8", "");
 61: 
 62:   }
 63: 
 64:   @Override
 65:   public boolean onCreateOptionsMenu(Menu menu) {
 66: 
 67:     MenuItem menuitem;
 68: 
 69:     menuitem = menu.add(0, MENU_USERFORM, 0, "ご意見・ご要望");
 70:     menuitem.setIcon(android.R.drawable.ic_menu_send);
 71: 
 72:     return super.onCreateOptionsMenu(menu);
 73: 
 74:   }
 75: 
 76:   @Override
 77:   public boolean onOptionsItemSelected(MenuItem item) {
 78:     switch (item.getItemId()) {
 79:     case MENU_USERFORM:
 80:       // ご意見・ご要望
 81:     {
 82:       StringBuffer sbURL = new StringBuffer();
 83:       sbURL.append(FORM_URL);
 84:       // アプリのバージョン
 85:       sbURL.append("&entry_1=").append(getVersionName());
 86:       // ユーザーに表示するバージョン番号
 87:       sbURL.append("&entry_2=").append(Build.VERSION.RELEASE);
 88:       // 最終的にユーザへ表示するモデル名
 89:       sbURL.append("&entry_3=").append(Build.MODEL);
 90: 
 91:       Uri uri = Uri.parse(sbURL.toString());
 92:       Intent i = new Intent(Intent.ACTION_VIEW, uri);
 93:       startActivity(i);
 94:     }
 95:       return true;
 96:     default:
 97:       ;
 98:     }
 99:     return true;
100:   }
101: 
102:   /**
103:    * アプリバージョンの取得
104:    * 
105:    * @return アプリバージョン名
106:    */
107:   public String getVersionName() {
108:     PackageManager pm = getApplicationContext().getPackageManager();
109:     String versionName = "none";
110:     try {
111:       PackageInfo info = pm.getPackageInfo(getApplicationContext().getPackageName(), 0);
112:       versionName = info.versionName;
113:     } catch (NameNotFoundException e) {
114:       // TODO 自動生成された catch ブロック
115:       e.printStackTrace();
116:     }
117:     return versionName;
118:   }
119: }

[若干解説]
初期表示がWebView版、オプションメニューからの表示がブラウザ版です。
BASE_URLはHTML文字列となっています。
METAタグでUTF-8指定。
METAタグでviewport指定。
iframeで各種サイズを指定しながらアンケートフォームのURLを呼び出し。
__FORMURL__と__WIDTH__は動的にreplaceして編集します。


iframeとかviewportの内容は以下のサイトなどを参考



HTMLタグ インラインフレームの細かい設定 <http://masaboo.cside.com/new_html1/ht_43.htm>

Viewport [iPhone生活]
<http://ipn3g.com/web/study3.html>

Android対応スマートフォンサイトのレイアウト(viewport・コンテナ編)
<http://blog.kaleido-jp.net/web/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E3%82%B5%E3%82%A4%E3%83%88%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%881/>


※viewpointというかサイズの指定がよくわかりませんね。


アンケートフォーム側のテーマ


実行確認の前に、書いてませんでしたがGoogleドキュメントのテーマは「Grey Shadows」を選んでます。
このテーマが「シンプル」「左寄せ」という意図に合ってるんじゃないでしょうか。


実装結果の確認(ブラウザ版)


初期表示時点でどういった表示となるかを確認します。
画面表示操作以外は位置の移動などを行っていません。
操作はXperia SO-01B(2.1upd)です。


[縦状態で初期表示した場合]
image

[横状態で初期表示した場合]
image


[縦状態で送信した場合]
image


[横状態で送信した場合]
image


上記の送信結果画面から戻るボタンを押した場合、アンケートフォーム画面がブラウザ上で表示されます。
もう一度戻るとアプリまで表示がもどりますが、いまいちだなーという印象です。
※これは参考にしたチャットワークでも同じ。
※本当はGoogleドキュメント側が画面遷移ではない確認画面にしてくれたら良いと思います。


実装結果の確認(WebView版)


[縦状態で初期表示した場合]
image


[横状態で初期表示した場合]
image


[縦状態で送信した場合]
image


[横状態で送信した場合]
image


縦画面の表示はなかなかいい気がします。
横については昔の携帯の思い出がぶわっと出てきた感じですね。
width=300固定の悪影響か、確認画面の右側が切れちゃってます。
縦横回転で再表示したほうがいいのかどうか。
送信画面からの戻るボタン押下では、もちろんActivityが終了するので前画面に戻ります。


とりあえずのまとめ


タイトルに書いたとおりWebView版は検討中です。
今回のブラウザの表示結果はあくまでXperia SO-01B(2.1upd1)の結果です。
ブラウザによっては、表示内容によって初期表示を全画面が入るように縮小表示してくれたりするものもあると思いますし、最近のOSに搭載されたブラウザの表示も見てないので改善されてるかもしれませんね。
あとタブレット対応(動的にサイズ変更)まで実装を考えるくらいならブラウザ版のままでもいい気がしてます。

送信確認画面から戻ったときに、またフォーム画面表示する点だけはなんとかならないかなー。
Googleがさっさと対処してくれるのを期待。(対処されないに100ペリカ


今回の話は探したらだれか書いてないかなーと思ってたのですけど、なかなか見つからないしエロい人はおそらくWebサービスをさくっと作っちゃうのでしょうね。


あ、もしかしたらGoogleドキュメントを利用する方向での正解は「Google Spreadsheets Data API」利用なのかもしれません。
ま、これ以上手間かけると「簡単に」ではなくなってくるので・・・。

0 件のコメント:

コメントを投稿