Android開発でScrollViewについて悩んだことメモ

どうもScrollViewって使いにくい！っていう話はおいといて事象と解決策をメモしておきます。

画面上でスクロールさせたいのでScrollView使ったんですが
おもむろに使ったら・・・

ERROR/AndroidRuntime(17331): Caused by: java.lang.IllegalStateException: ScrollView can host only one direct child

みたいなエラーが出てしまいました。
で、いつものように調べました・・・

Androidでスクロールバーを表示する方法

こちらのブログに書いてありました。

ScrollViewには子要素は一個にしろ・・・と

まぁ、エラーを解読すればそのまんまでした・・・

で、こちらのブログ通りを作って要素を囲みました。
LinearLayout自体がスクロール可能な方がいい気がしますね。

Android開発しているとAndroid開発ネタばかりに偏りがちです・・・
が、仕方ないっス。
今日のAndroidネタは・・・

Androidでウェブ上の画像を表示する必要があり
ImageViewを使用して
ImageViewのメソッド setImageURI でURI指定すればいいのかな・・・と思い

[java]
・
・
ImageView iv = (ImageView) findViewById(R.id.imageview);
Uri.Builder ub = new Uri.Builder();
ub.scheme("http");
ub.authority("～ドメイン～");
ub.path("images/image.jpg");
iv.setImageURI(ub.build());
・
・
[/java]

と記述したが・・・全然表示されない・・・

調べたところ、setImageURI ではうまくいかないという記事を発見。（下記URL）

iRSSの日記|ImageViewにhttp経由の画像を表示する方法

記事にもあるように　Drawable を生成して
ImageView の setImageDrawable(Drawable drawable) にセットしてあげる必要があるらしい。

で・・・こんなふうにしました。

[java]
・
・
・
InputStream is = (InputStream) this.fetch(ub.build().toString());
Drawable drawable = Drawable.createFromStream(is, "");
is.close();
・
・
・
[/java]
※Android SDK 逆引きハンドブック を参考にしました。
※Exceptionの処理は適宜入れてください。

こんな感じでDrawableを生成したら・・・

表示されました！！

※ImageViewあたりのソース（最終的）
[java]
・
・
ImageView iv = (ImageView) findViewById(R.id.imageview);
Uri.Builder ub = new Uri.Builder();
ub.scheme("http");
ub.authority("～ドメイン～");
ub.path("images/image.jpg");
InputStream is = (InputStream) this.fetch(ub.build().toString());
Drawable drawable = Drawable.createFromStream(is, "");
is.close();
iv.setImageDrawable(drawable);
・
・
[/java]

Androidエミュレータの「みてくれ」が普通だったのでスキン変更してみようと思いちょっとしらべた結果まとめです。
実際に試したのはHT-03Aだけです。

Androidエミュレータのスキン変更各種

Xperia X10
明日に向かって昇龍拳|Android Xperia X10のスキンを使ってAVDを作成

androidプログラミング・アプリ開発日誌～xperia|eclipseのandroid開発エミュレータのスキンをxperia（SO-01B）にする

HT-03A
やまん日記|Androidエミュレータ(AVD)のskinをHT-03Aにする。

GALAXY TAB
しゅみろぐ|AVD に GALAXY Tab のスキンをインストール

Nexus One/HTC Desire
Media Technology Labs|Android 2.1 エミュレータのインストール手順 (Nexus One/HTC Desire)

今回はAndroidアプリ開発中に困って調べたことの忘備録的投稿です。

Androidアプリ開発に普段「eclipse」を利用しています。
そのeclipseにADTプラグインを入れて開発しています。

開発中、エミュレータで動作確認中にログを見ようと思ってLogCatで確認・・・・アレ？ログが出てこない

ってことがあったので調べました。
すると、こんな記事がありました。

kazzzの日記：Logcat Viewにログが表示されない時に試すこと

引用・・・・

1. DDMSパースペクティブを開く
2. Devicesタブを選択する
3. 対象のエミュレータ又は機器を示すアイコン(大抵は頂上だ)をクリック

※詳細は画像付きの上記Webサイトを御覧ください。

「おお！治った！」※ログがバラバラ出力されてちょっとびっくり中・・・（笑）

また、WebViewを使用しているアプリではたまにエミュレータ上で動作中に「UnknownHostException」が発生する場合があります。
Webからそのままページを表示させると
「ページが見つかりません。」画面・・・ガーン！
と思って通常のPCにインストールされているブラウザから見たら何の問題もなく表示されています。

そして、調べました・・・・
するとこんな記事がありました。

CTOA日記：android開発 UnknownHostExceptionがエミュレータで起こる

こちらの解決法は・・・
以下引用・・・・

エミュレータのDNSのバグのようです。
対象のURLをIPアドレスに書きかえるか、エミュレータ自体を再起動すれば解決しました。

とのこと。

たしかに、エミュレータ立ち上げっぱなしでプロジェクトから
「Run as Android Application」押しまくってたので、そうなっちゃったんですね。

※画像はイメージです。

エミュレータ再起動であえなく解決！

【AndroidのWebViewにてBASIC認証を行う方法】
Androidの開発でWebViewにてBASIC認証を行いたくなり調べたので覚え書きとして掲載します。
下記参考文献よりコピーし変数等をリテラルにしてしまった上でのソースになっています。

参考文献：
ダメ男のブログ | androidでWEB接続 その1

※onCreateメソッドのみ抜粋
[java]
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

// WebView インスタンス生成
WebView webview = (WebView) findViewById(R.id.webview);

// JavaScript有効
webview.getSettings().setJavaScriptEnabled(true);

// Basic認証行う
WebViewDatabase.getInstance(this).clearHttpAuthUsernamePassword();
// "MembersOnly"の部分の引数はBasic認証で表示される文言がそのままでないと行けないみたいです。
// 「～ホスト～」の部分は　「www.test.com」のように記述
webview.setHttpAuthUsernamePassword("～ホスト～", "MembersOnly", "～名前～", "～パスワード～");
webview.setWebViewClient(
new WebViewClient() {
// ログインcookie
private String loginCookie;

//
@Override
public void onLoadResource(WebView view, String url) {
CookieManager cookieManager = CookieManager.getInstance();
loginCookie = cookieManager.getCookie(url);
}

// 認証リクエストがあった場合の挙動
@Override
public void onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm) {
String[] up = view.getHttpAuthUsernamePassword(host, realm);
if (up != null && up.length == 2) {
handler.proceed(up[0], up[1]);
}
else {
Log.d("ERROR", "Could not find username/password for domain: " + host + "with realm = "+ realm);
}
}

// 認証後の挙動
@Override
public void onPageFinished(WebView view, String url) {
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setCookie(url, loginCookie);
}
}
);

// ロード
webview.loadUrl("http://～BASIC認証後表示するページのURL～");

// トースト表示
Toast.makeText(this, "Starting…", Toast.LENGTH_LONG).show();
}
[/java]

注意としては参考文献にもありますように・・・
「BASIC認証で表示される文言はそのまま記述する」というのと
「～ホスト～」には”www.yahoo.co.jp”のようにホスト名のみ記述する
という点です。

スマートフォンサイトでアドレスバー隠すようなサイトが多くてやってみよう！と思いました。

まずは、TAM テクニカルチーム|jQuery Mobileでスマートフォン用サイトを作成するを参考にスマートフォン用のページを作りました。

こんな感じ
※ぜひスマートフォンで見てください。

そして、アドレスバーを隠すようにしてみました。
※iPhone Memo | 画面読込時にアドレスバーを隠すを参考にしました。

[html]
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<title>jQueryMobileで作ったページ</title>

<style type="text/css">

body {
min-height: 416px;
-webkit-text-size-adjust: none;
}
footer{
font-size:10px;
height:30px;
line-height:30px;
text-align:center;
}
.pagebtn{
margin:0 auto;
}
.formbox{margin-bottom:10px;}
</style>
<script type="text/javascript">
function hideAdBar(){
setTimeout("scrollTo(0,1)", 100);
}
</script>
</head>
<body onLoad="hideAdBar()" onOrientationChange="hideAdBar()">
<div data-role="page">
<header data-role="header">
<h1>サンプルページ</h1>
</header>
<div id="content" data-role="content">
<p>株式会社アイ・エス・シー</p>
<p>jQueryMobileデモサイトへようこそ！</p>
<ul data-role="listview" data-filter="true" data-inset="true">
<li><a href="http://www.iscw.jp/">サイト制作アイ・エス・シー</a></li>
<li><a href="http://www.isc-tokyo.co.jp/">株式会社アイ・エス・シー</a></li>
<li><a href="http://blog.iscw.jp/">アイ・エス・シー実験室</a></li>
<li><a href="http://www.yahoo.co.jp/">Yahoo!</a></li>
<li><a href="http://www.google.co.jp/">Google</a></li>
<li><a href="http://jquerymobile.com/">jQuery Mobile</a></li>
</ul>
こんな簡単にスマートフォンサイトが作れると楽しいですね！
<a href="#contact" data-role="button" data-icon="arrow-r" class="pagebtn">サービス概要</a>
</div>
<footer data-role="footer">
Copyright(C) ISC. All Rights Reserved.
</footer>
</div>

<!– サービス概要 –>
<div data-role="page" id="contact">
<header data-role="header">
<h1>サービス概要</h1>
</header>
<div id="content" data-role="content">
<h2>新規ウェブサイト制作</h2>
　ご依頼の時点から弊社担当者を決めウェブサイトの構成やデザインについてご連絡させていただきます。<br />
　ヒアリングシートに必要事項を記述していただき、担当者からのアドバイス等踏まえウェブサイト制作にあたります。<br />
　もちろん、途中で確認していただきながら進めますので「完成」時に困ることがないようにいたします。<br />
　ウェブに備えたい機能など、お気軽にご相談ください。<br />
　ウェブ以外の印刷物についてもご相談ください。<br />

<h2>既存ウェブサイトリニューアル</h2>
　ご依頼の時点から弊社担当者を決め現行のサイトについてのヒアリングやリニューアルに際するご希望をお知らせいただきます。<br />
　その上で、現行サイトに足りないものや機能改善について担当者よりアドバイスさせていただきウェブサイトのリニューアルにあたります。<br />
　もちろん、途中で確認していただきながら進めますので「完成」時に困ることがないようにいたします。<br />
　ウェブ以外の印刷物についてもご相談ください。<br />
<br />
　ドメイン取得・サーバーレンタルについても取得・契約代行いたします。また、他社にて取得したドメイン等移管等についてもお気軽にご相談ください。
</div>
<footer data-role="footer">
Copyright(C) ISC. All Rights Reserved.
</footer>
</div>
</body>
</html>
[/html]

アドレスバーを隠すのはここがキモです。
[html]
　・
　・
　・
<script type="text/javascript">
function hideAdBar(){
setTimeout("scrollTo(0,1)", 100);
}
</script>
</head>
<body onLoad="hideAdBar()" onOrientationChange="hideAdBar()">
　・
　・
　・
[/html]
ソースはこんな感じなんですが
ひとつ注意点があります。
[html]
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
[/html]
はじめ、これがなくてなかなかアドレスバーが隠れてくれませんでした。隠れない！非表示にならないって方はこれが原因かも・・・

それにしても
jQuery Mobileすごいですね！簡単ですね。
参考資料：jQuery Mobile

Android 開発中のここどうすれば・・・ってときにすぐに調べられる本がありますのでご紹介します！

Android SDK逆引きハンドブック

なにかを実現したいときにこの本があれば一発です。
サンプルコードも載っていてまさに必携の一冊です。

値段が高いから個人的に購入するのは正直迷ったんですが・・・買って大正解でした！
（家にも持ち帰って自分専用にしたかったのでｗ）

先日、アシアル株式会社主催の「iPhone/Androidアプリ制作セミナー」に出てきました。
そこで習った「PhoneGap」を深めようといろいろ作ったりしています。
※発表は後日・・・（出来るかな・・・出来るといいな）

他にもこのようなフレームワークがないかと調べたところ
やっぱりまとめてくれている方がいらっしゃいました。
↓
某開発者の独り言： スマートフォン向けアプリ開発フレームワーク

参考にさせていただきます！

※社内向け覚え書き的な・・・投稿ですみません。

「参考資料」
PhoneGap Fan:アシアル株式会社さんが運営しているサイトです。