Webアプリのデバッグ
Android向けのWebアプリケーションを開発しているなら、logcatにメッセージを出力するコンソールJavaScript APIを使用して、JavaScriptのデバッグが可能です。FirebugやWeb Inspectorを用いたWebページのデバッグに慣れているなら、おそらく(console.log()のような)コンソールを使う方が分かりやすいでしょう。
Android WebKitフレームワークは、ほぼ同じAPIをサポートしており、AndroidのブラウザやWebView内のWebページのデバッグ時に、ログを取得することが可能になります。
概要
- JavaScriptのコンソールメソッドを利用してWebアプリのデバッグができます
- カスタムWebViewをデバッグしているなら、デバッグメッセージをハンドルするコールバックメソッドを実装する必要があります
Webアプリのベストプラクティス
モバイル端末向けのWebページとWebアプリの開発は、典型的なデスクトップWebブラウザ向けの開発と比べて、異なるチャレンジをしなければなりません。
開発を始めるにあたり、Androidやその他のモバイル端末向けのWebアプリケーションを最も効果的に適用するために、従うべきプラクティスのリストを下記に示します。
1. Webサイトのモバイル専用バージョンにモバイル端末をリダイレクトする
サーバサイドのリダイレクトを利用した、Webサイトのモバイルバージョンへリクエストをリダイレクトする方法がいくつかあります。大抵はWebブラウザから提供されたユーザーエージェントを"検知"することでこれを行います。
サイトがモバイルバージョンを提供するかどうかを決めるには、ユーザーエージェント中に"mobile"文字列があるかどうかを見るだけです("mobile"は様々なモバイル端末に適していることを示します)。
必要であれば、ユーザーエージェント文字列中の特定のOSを識別することも可能です("Android 2.1"のように)。
2. モバイル端末に適切なマークアップDOCTYPEを使う
モバイルWebサイトで最も共通的に使われているマークアップ言語は、XHTMLベーシックです。このスタンダードな言語はモバイル端末上で、Webサイトをうまく動作させる具体的なマークアップとして保証されています。
例えば、先のマークアップ言語はモバイル端末上でパフォーマンスのでない、HTMLフレームやネストされたテーブルは許可されていません。また、DOCTYPEと共に、必ずドキュメントの適切な文字エンコーディングを宣言して下さい(UTF-8のように)。
例:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
また、必ず、宣言されたDOCTYPEに対してWebページのマークアップが有効になるようにして下さい。http://validator.w3.orgで提供されているようなバリデータ(検証機構)を利用しましょう。
3. Webページのリサイズに適したビューポートメタデータを使う
ドキュメントの
中で、Webページを描画するためのブラウザのビューポートをどのように扱うかを記した、具体的なメタデータを提供すべきです。例えば、ビューポートメタデータでは、初期Webページのスケールとターゲットの画面解像度に合わせた、ブラウザのビューポートの高さや幅を指定できます。
例:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Androidの端末向けビューポートメタデータの使用方法の詳しい情報は、Targeting Screens from Web Appsを参照して下さい。
4. 複数のファイルリクエストを避ける
モバイル端末は一般的にデスクトップコンピュータに比べて接続速度がかなり遅いため、Webページは可能な限り早く読み込みされるように作らなければなりません。スピードアップの一つの方法として、スタイルシートや内のスクリプトファイルのような、外部ファイルの読み込みを避けることが挙げられます。
代わりに、
あるいは、Minifyのようなツールを利用した圧縮によって、ファイルのサイズやスピードを最適化すべきです。
5. 縦方向のリニアレイアウト(LinearLayout)を使う
Webページをナビゲートするにあたり、ユーザに左右のスクロールをさせることを避けなければなりません。上下にスクロールする方がユーザにとっても簡単ですし、Webページもシンプルにできます。
素晴らしいモバイルWebアプリを作成するさらなるガイドについては、W3CのMobile Web Best Practicesを参照して下さい。(モバイルとデスクトップの)Webサイトのスピードアップに関するその他のガイダンスについては、Yahooガイドの Exceptional PerformanceとGoogleのLet's make the web faster内のスピードに関するチュートリアルを御覧下さい。
ADT 9.0.0 preview 2が公開されています
Android Tools Project Siteで、ADT 9.0.0 プレビュー2がダウンロードできる状態になっています。バージョンが9系ということは、Gingerbread対応のADTですね。
プレビュー2は、プレビュー1に対してユーザーから上がってきたバグのいくつかを修正したバージョンです。
主な修正点は下記の通り:
- アウトラインの記録:アウトライン中のビューの並び替えをさらに簡単にした。アウトラインの改善については、最新の更新ページの詳細を確認して下さい(問題 13042)
- 全てのエディタ内で、または、並んでいるシナリオのビュー中でキーボードのショートカットが動作しないキーバインドのバグを修正(問題13231, 13134)
- JUnitの初期化バグ(問題 12411)
- カスタムレイアウトの属性メニューの修正(問題 13134)
- 加えて、ハイパーリンク改善ページ中の、ハイパーリンク機能の説明について改善を行いました。
尚、過去にADTのバグで、プロジェクトのファイル一式が消えてしまう(?)バグがあったようですので、ADTの更新の際はできるだけバックアップしてから、新ADTの導入を行うことをおすすめします。
本年もよろしくお願い申し上げます!
昨年は様々な方にお世話になりました。心より御礼申し上げます。
個人的には辛い一年でもありましたが年末にかけて上り調子で来れましたので、今年はガンガン頑張りたいと思います!!
本年もよろしくお願い申し上げます!