Android の WebView にキーボードが被る問題
WebView で Webページを表示した時に、form をクリックすると、キーボードが表示されます。 その時に、入力したい部分が見えない問題が起こる時があります。
キーボードが出た時に、フォーム自体が隠れる。入力内容が見えない。
キーボードが出た時に、下までスクロールできない想定していた動き
- "input 9" というラベルのテキストフィールドをクリックする
- キーボードが出る瞬間に、WebView が上に避けるように見える
- ちなみにこの時は、キーボードだけなく予測変換も避けて、下までスクロールできる
- おかしい動き
- "input 9" というラベルのテキストフィールドをクリックする
- 入力したい "input 9" の上に被った状態でキーボードが表示される。下までスクロールもできないので見えない。
この状態が起こるのは、Android OS バージョンにも関係あるようです。4.1 以上で起こっています。
解決法
条件
この問題を解決するためには条件があります。
- not fullscreen モード
- つまり、ステータスバーが見える状態
- WebView が 以下の 2 つどちらかの状態になっている
- WebView 自身とその下のレイアウトもすべて MATCH_PARENT
- WebView の下に RelativeLayout(MATCH_PARENT状態の) がある
- (MATCH_PARENT などの指定であり、数値で直接指定していない状態である)
- activity の windowSoftInputMode が adjustResize になっていること(adjustPan を設定していないこと)
1.の fullscreen モード "ではないとき" という条件は公式に書かれています。
http://developer.android.com/reference/android/view/WindowManager.LayoutParams.html#FLAG_FULLSCREEN
つまりは、"SOFT_INPUT_ADJUST_RESIZE" という状態が有効になっていないと、キーボードが WebView に被ってしまい、 SOFT_INPUT_ADJUST_RESIZE は FLAG_FULLSCREEN の状態では無視されます。
2.の View 構造ですが、一言で言うならば以下になります。
- RelativeLayout(レイアウトはMATCH_PARENT)の上に、WebView を載せる。その状態なら WebView のレイアウトは MATCH_PARENT でなくて構わない
色々試しましたが、レイアウトの条件が複雑です。手元で幾つか試した結果を載せます。 上記で直らない場合は以下を参考に直してみてください。
実行結果
一番シンプルに動く形が以下です。 MATCH_PARENT のレイアウト状態の RelativeLayout の上に、サイズ指定有りの WebView が載っています。
RelativeLayout MATCH_PAERNT x MATCH_PARENT
|
--WebView 300dp x 550dp
以下の結果は、Android プロジェクト作成時にデフォルトで作成されている LinearLayout の上に載せる View 構造です。
LinearLayout の上に載せている状態ですが、以下図では LinearLayout の記述を省略しています。
成功例
すべて MATCH_PARENT
FrameLayout(RelativeLayout) MATCH_PAERNT x MATCH_PARENT | -- WebView MATCH_PAERNT x MATCH_PARENT
RelativeLayout(MATCH_PARENT) の上にサイズ指定 WebView
RelativeLayout MATCH_PAERNT x MATCH_PARENT | -- WebView 300 x 550
サイズ指定は真ん中の RelativeLayout で
RelativeLayout MATCH_PAERNT x MATCH_PARENT | -- RelativeLayout 300dp x 550dp | -- WebView MATCH_PAERNT x MATCH_PARENT
失敗例
FrameLayout(MATCH_PARENT) の上にサイズ指定 WebView
FrameLayout MATCH_PAERNT x MATCH_PARENT | --WebView 300dp x 550dp
一番親の LinearLayout の上に直接サイズ指定 WebView を置く
WebView 300dp x 550dp
参考サイト
http://d.hatena.ne.jp/mihuyuchan/20130115/1358260567
http://blog.thevery.info/2010/11/showhide-status-bar-in-fullscreen.html
http://stackoverflow.com/questions/8398102/androidwindowsoftinputmode-adjustresize-doesnt-make-any-difference
Raspberry Pi で LCD モジュールを使う
LCD モジュールを使って文字を表示する
"Raspberry Pi で遊ぼう!" にやり方・どのモジュールを買って使ったかが書かれていますが、今回はそれとは違うものを買いました。
書籍に載っている ストロベリー・リナックス I2C 液晶 SB1602BW
http://strawberry-linux.com/catalog/items?code=27021
間違っていること・改善したほうが良い所、ぜひ教えて下さい!
購入品
I2C接続キャラクタLCDモジュール 16x2行 白色バックライト付 ACM1602NI-FLW-FBW-M01
http://akizukidenshi.com/catalog/g/gP-05693/I2C接続小型LCDモジュールピッチ変換キット AE-AQM0802
http://akizukidenshi.com/catalog/g/gK-06795/の ACM1602NI はちょっと特殊なモジュールらしく、うまく動きませんでした…。
秋月I2C LCDをmbedで
秋月I2C LCDをRaspberry Piで
ということで、AE-AQM0802 を使います。
Raspberry Pi で AE-AQM0802 を使う
ピッチ変換基板にはんだづけする
AE-AQM0802 はピンサイズが合わず、ブレッドボードで使えません。そこで、ピッチ変換基板というものを用いて、ブレッドボードのピンサイズで使えるようにします。
- LCDモジュール(文字を表示するモジュール)
- ピッチ変換基板
- 1x7細ピンヘッダ(ブレッドボードに刺す部分)
サイト上にも書いてあるように、ピッチ変換基板には、LCD モジュール動作に必要なコンデンサと I2C プルアップ抵抗付きです。自分で用意しない場合は、これを有効にします。
ピッチ変換基板と1x7細ピンヘッダをはんだづけ
5箇所 + 2箇所はんだづけします。
- ピッチ変換基板には、5つしか刺す所が無いため、1x7 細ピンヘッダが 5 になるようにします。ペンチで黒い部分を持って、ポキっと折ります。
- ブレッドボードに挿した状態ではんだづけするとやりやすいです。
- PU と書かれている部分の2箇所をはんだ付けします。
今回ピッチ変換基板に付いているコンデンサとプルアップ抵抗を使うためです。
ピッチ変換基板と LCD モジュールをはんだづけ
- かなり細かいのですが、9箇所頑張ってはんだづけしました… うまく…なりたい…
配線する
ピッチ変換基板
上から、
- VDD -> 電源 (+ につなぐ)
- RESET
- SCL
- SDA
- GND -> グラウンド ( - につなぐ)
の5つがあります。これを Raspberry Pi とつなぎます。
Raspberry Pi の GPIO ポート
以下サイトでピンの並び方が分かります。
http://elinux.org/RPi_Low-level_peripherals
右側の蛍光グリーンが背景の図(以下画像リンク)が、Raspberry Pi の GPIO ピンの配置を示しています。 http://elinux.org/images/2/2a/GPIOs.png
今回は上記で上げた5つを使うので、VDD・SCL・SDA・GNDの場所を確認します。
VDD (電源)は今回使う LCD モジュールが電源電圧 3.3 V のため、"3V3 Power" と書いてあるピンを使います。
SCL と SDA は1箇所ずつしかないので、左の列・上から3番目と2番目をそれぞれ使います。
配線例
- 簡単な図で書くとこんな感じ
- 写真で取るとこんな感じ
赤と黒のジャンパワイヤしか使ってないですが、本来は色を分けたほうがわかりやすいです。
- 電源 -> 赤
- GND -> 黒
それ以外は好きな色で、と聞いたことがあります。
接続確認する
i2cdetect コマンドで確認します。
$ sudo i2cdetect -y 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
00: -- -- -- -- -- -- -- -- -- -- -- -- --
10: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
20: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
30: -- -- -- -- -- -- -- -- -- -- -- -- -- -- 3e --
40: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
50: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
60: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
70: -- -- -- -- -- -- -- --
これで接続確認と、デバイスのアドレスがわかります。 今回の使っている AE-AQM0802 では、3e という事がわかりました。
文字を表示させる
序盤でも述べた、以下の本のコードを参考にしています。
- 作者: 林和孝
- 出版社/メーカー: ラトルズ
- 発売日: 2013/05/20
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (3件) を見る
$ sudo ./6-lcd-1.sh
sudo 権限が必要なので、忘れずに sudo で実行します。
コードは以下です。
#!/bin/sh
# LCD の初期化
i2cset -y 1 0x3d 0 0x38 0x39 0x14 0x78 0x5f 0x6a i
sleep 0.3
i2cset -y 1 0x3d 0 0x0c 0x01 i
sleep 0.3
i2cset -y 1 0x3d 0 0x06 i
sleep 0.3
# a. 1行目の文字を出力 "ハロー"
i2cset -y 1 0x3d 0 0x80 b
i2cset -y 1 0x3d 0x40 0xCA 0xDB 0xB0 i
# b. 2行目の文字を出力 "ワールド"
i2cset -y 1 0x3d 0 0xc0 b
i2cset -y 1 0x3d 0x40 0xDC 0xB0 0xD9 0xC4 0xDE i
a と b の部分で文字を描画する命令を送っています。
a の命令では、
i2cset -y 1 0x3d 0 0x80 b
i2cset -y 1 0x3d 0x40 0x48 0x65 0x6c 0x6c 0x6f 0x2c i
文字の指定は 2行目の 0x40 0x48 0x65 0x6c 0x6c 0x6f 0x2c の部分です。
モジュールのデータシートに書いてある、文字のパターンをみて、それを ASCII コードに直します。
http://akizukidenshi.com/download/ds/xiamen/AQM0802.pdf http://www.hamradio.cc/computer/ascii_table.php
例: ハ -> (データシートを見ると) 01000000 -> (ASCII コード変換テーブルを参照して) 0x40
今回色々やって思ったこと
- 電子工作楽しい
インターネット上の情報少ない
部品揃えるの大変
- 1つ買い忘れただけで何もできなくなる
- 人に聞いたほうがいい。ただし、実物とか現実の環境がないと説明できない。(プログラムなら持ち運べるが…)
- モジュール壊れやすい・壊れたのか判断できない。組み合わせによって動く場合もあるらしい。
- ACM1602NI はドライバの挙動が特殊らしく、Raspberry Pi だとそのままでは動かない。Arduino では大丈夫らしい。
総じては、とても楽しいのですが、コストが高いかつ一人で学ぶのが困難なのでとてもむずかしく感じます。
画面の中だけではなく、実際に現実のものが光ったり動いたりするのは、とても感動するのでちまちま続けたいと思います。
Raspberry Pi をどこで買って、何が必要か
数ヶ月前に Raspberry Pi を買いました。
本記事はどこで買って、何が必要かという内容です。
本題は、I2C 接続小型 LCD モジュール(電光掲示板みたいに、文字を表示できるモジュール)を動かす話ですが、長くなったので、次記事にします。
どこで買ったか
Raspberry Pi 本体 + 書籍 + ケースのセット販売されている以下で買いました。
http://victory7.com/?pid=59052162
当時、日経Linux の Raspberry pi と 書籍セット販売が売り切れたところで、ぐぬぬしていました。
http://itpro.nikkeibp.co.jp/linux/raspi/
日経Linux のセットよりはちょっと高いですが、ケース付きなので、良かったです。
あと、付いてくる書籍 "Raspberry Pi で遊ぼう!" が普通にとても良い本でした。 以下に書く、購入ルートから必要なものまで大体、書籍に書いてあります。
- 作者: 林和孝
- 出版社/メーカー: ラトルズ
- 発売日: 2013/05/20
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (3件) を見る
購入ルート選択肢
2,3 ヶ月前なので、少々古いかもしれません。
それぞれ、かかる送料、本体価格、付いてくるものが違うので、よく確認して選んだほうが良いです。
RS コンポーネンツ(http://jp.rs-online.com/web/generalDisplay.html?id=raspberrypi)
Raspberry Pi 公式サイトからたどり着きます。
当時は、届くまで数ヶ月かかるとか聞いていました。MODMYPI(https://www.modmypi.com/)
当時は、こっちを使ったほうが断然早く届くとの話。ケース付きであるため、ちょっと高かった。今はケースありなし選べるみたい。Amazon のマーケットプレイス
そんなに高くなくすぐ購入できる上記の Raspberry Pi と書籍セット
日経Linux の書籍セット
初回は即売り切れ -> 再販 -> 期間中の購入予約なら上限なし という、観測範囲内で3回の購入チャンスが有りました。
とすると、今後もあるのかな…?
等など。現在は大分手に入りやすくなったかもしれません。
必要なもの
Raspberry Pi を動かすまでに必要なものです。
メモリーカード(OS を入れるため必要)
- 手持ちの SD カードが使えるか確認 http://elinux.org/RPi_SD_cards
- Class を確認する
SD カードの転送速度は Class 10 まである。ちなみに、私の手持ちは Class 6 だったため、6 ですが、ちょっと電子工作するレベルなら気になりません。
電源供給のための AC アダプター micro USB の AC アダプターで Raspberry Pi に給電します。これは他の電子機器のものを代用できるので、あれば、買う必要はありません。
書籍によると、1A 以上出力できるものが望ましいそうです。 ちなみに身近なアダプターとしては以下があります。USB 接続キーボード・HDMI ケーブル・ディスプレイ SSH でログインできるようにするために、最初はディスプレイにつないで作業します。
サーバーの設定と一緒ですね。
以下はあると良いもの。
- USB ハブ
書籍によると、"Raspberry Pi の USB ポートは供給電力が低いため、USB ポートを利用すると動作が不安定になることがあります"ということなので、私は以下を買いました。
iBUFFALO どっちもUSBハブ 【Wii U動作確認済,どっちもUSBコネクター採用】USB2.0対応 USBハブ 5ポート(ACアダプター付) ブラック BSH5AD0310BK
- 出版社/メーカー: バッファロー
- 発売日: 2012/11/22
- メディア: Personal Computers
- この商品を含むブログを見る
- 無線 LAN 子機
これを買って、a の USB ハブと合わせて使おうとしましたが、できませんでした…。"※USB Hubでの使用は非対応"BUFFALO 無線LAN子機 コンパクトモデル 11n技術・11g/b対応 WLI-UC-GNM
- 出版社/メーカー: バッファロー
- 発売日: 2010/06/25
- メディア: Personal Computers
- 購入: 44人 クリック: 226回
- この商品を含むブログ (19件) を見る
http://buffalo.jp/product/wireless-lan/client/wli-uc-gnm/#spec
しょうがないので、Raspberry Pi 本体の USB に刺していますが、問題無いです。
実際に Raspberry Pi で遊ぶ
書籍には、最初に必要なもの・OS のセットアップ・電子工作・Web からの制御まで、やりたいと思いつくことが解説されています。
LED をチカチカさせるのは、LED 等道具が揃っていれば 30 分未満でできます。
ジャンパワイヤ・ブレッドボード・LED・抵抗を買いましょう。
次記事、LCD モジュールを Raspberry Pi で動かすに続く。
Android Studio の logcat を快適にする
Android Studio 始めました。
Eclipse じゃない理由は、宗教的な観点・最近出たしせっかくだから、という理由等などのため今回は割愛します。
Android studio で logcat を表示させる
起動した後自動で表示されなかった。わかりにくい。
もし、スクリーンショットのように左下に "6:Android" と表示されている場合は、そこをクリックすると出ます。
表示されてない場合、左下はこんな感じではないかと思います。
左下の角に四角いアイコンが有ります。そこにマウスオーバーすると以下の様になります。
クリックしましょう。 そうすると、最初のスクリーンショットのように "6:Android" が表示される画面になります。
"6:Android" クリックで logcat が表示されます!やったー
logcat の表示を見やすくする
うちの子は Xperia A なのですが、大変いろんなログを出してくれます。とても。 何もしないとこんな状況なので、
09-07 01:55:31.116 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:55:34.149 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:55:37.172 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:55:40.175 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:55:43.199 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:55:46.222 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:55:49.235 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:55:52.258 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:55:55.271 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:55:58.295 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:56:01.318 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:56:04.341 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:56:07.344 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:56:10.368 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
09-07 01:56:13.391 657-919/? E/WifiHW: wifi_send_command("SIGNAL_POLL")
Filter を追加します。
- さっきの "6:Android" をクリックして logcat 画面を表示する
- 右上の方にある "Edit Filter Configuration" をクリックして、Filter を作成する
- フィルターを追加する
- ひとまず、Tag の SNFCCCS と WifiHW のメッセージは見たくないので、"by Log tag" に以下の様に追加します。
^(?!.*(SNFCCCS|WifiHW)).*$
正規表現で指定できます。
() の中に | で必要なものを追加すればひとまず見たくないものを除外できます。
参考: http://stackoverflow.com/questions/7889888/how-to-filter-out-a-tagname-in-eclipse-logcat-viewer
おまけ: 急いで設定したこと
参考: "快適にコーディングできるように設定をカスタマイズしてみた"
http://dev.classmethod.jp/smartphone/android/android-studio-customize-settings/
- IDE 基本テーマ変更
- Preferences -> Editor -> Colors & Fonts で Scheme name を "Darcula" に変更
- 行番号/スペース表示
- Preferences -> Editor -> Appearance
- Show line numbers と Show whitespaces にチェックを入れる
- Preferences -> Editor -> Appearance
他にも必須設定あれば、ぜひ教えて下さい。
iOS の実機にアプリをコマンドラインからインストールする
iOS の実機にアプリをインストールする時、Organizer(Xcode) を使うのが普通です。 ですが、自動化等しようとすると、iOS 実機へのコマンドラインからのインストールが必須です。
そこで、fruitstrap というツールを使います。 https://github.com/ghughes/fruitstrap
※"This project is no longer maintained." となっているので、注意が必要です。今現在使用出来る事を確認できています。ただ、他に方法がないので、今はこれしかないです。
(2013/07/16: 追記 他のツールを教えて頂きました。下に追記してあります。)
ただ、日本語環境だと途中で失敗するので、fork して直しました。 https://github.com/seamountain/fruitstrap
修正点
言語設定によって発生するエラー
- CFStringGetSystemEncoding() を kCFStringEncodingMacRoman に書き換えました
システムの言語設定を日本語にしていると、上記リンクの fruitstrap だと途中でエラーになります。(英語にしていると問題ありません)
以下のブログでも述べられています。 http://www.zero4racer.com/blog/709
失敗した時にエラーコードしか表示されない
- 自分で行なっていた時の出やすいエラーコードの時は、エラーメッセージを出すようにしました。
アプリの codesign がうまくいっていない状態で実行しても途中で落ちますが、エラーコードのみ表示されるのでよくわかりませんでした。
以下のサイトの "Known Error Codes" の章が役に立ちます。 http://theiphonewiki.com/wiki/MobileDevice_Library
この中に、今回はまったエラーコードがなかったので、エラーメッセージとして追加しました。
(そもそもエラーコードだけではなく何のエラーなのか出ると良いのですが…)
使い方
fruitstrap は以下のコマンドでビルドしたあとに、
make fruitstrap
このコマンドで実行出来ます。
fruitstrap -i <device_id> -b bundle.app
device_id は Organizer を使って、Device Identifier を調べます。bundle.app の部分は、インストールしたい .app を指定します。
生成された fruitstrap は適宜、~/local/bin に置くと良いと思います。
2013/07/16: 追記
mobiledevice
https://github.com/imkira/mobiledevice
このツールを教えてもらいました! これが使っている技術は、fruitstrap と一緒で、 Apple の private API を利用しています。 ただ、こちらの方が機能が多い・ASSERT がちゃんとあるので問題があった時に把握しやすいので、良いです。
備えている機能は以下です。
- デバイスの Identifier 取得
- .app の Bundle_id 取得
- アプリのインストール
- アプリのアンインストール
- インストールされているアプリ一覧
- TCP コネクションを張る
すべて実機で行えます。 大変良い!
実機にインストールしたiPhoneアプリをコマンドラインから起動する
iPhoneアプリ開発時に、テスト自動化をしようとすると、アプリの自動起動が必要になります。
Xcode 4.4までは、
instruments -t /Developer/Platforms/iPhoneOS.platform/Developer/Library/Instruments/PlugIns/AutomationInstrument.bundle/Contents/Resources/Automation.tracetemplate -w <デバイスID/対象シミュレータ> <アプリ名>.app
Xcode 4.5からはInstrumentsのテンプレートの場所が変わりました。
<Xcode.appまでのパス>/Contents/Applications/Instruments.app/Contents/PlugIns/AutomationInstrument.bundle/Contents/Resources/Automation.tracetemplate
よって以下のようにすると、起動することができます。
instruments -t /Applications/Xcode.app/Contents/Applications/Instruments.app/Contents/PlugIns/AutomationInstrument.bundle/Contents/Resources/Automation.tracetemplate -w <デバイス identifier/対象シミュレータ> <アプリ名>.app
【勉強会】Stack Overflow Tech Talk
http://googledevjp.blogspot.jp/2012/07/stack-overflow-tech-talk.html
2012/7/18に行って来ました〜!
ちょっと時間がたってしまいましたが、簡単なメモです!
- サイトの第一印象が大事
- スペルミス
- スパムが残っている
- 質問のクオリティがサイトの質を表す
- 質問の質が高い→分かる人が見ないと分からない→デベロッパーでなければ出ていく
- 投票
- その質問がどのくらい人気がある状態かという投票
- 回答に対しての投票
-
-
- 回答の下に解決策をすぐに出せる
- 途中の会話を省ける
-
モットー: We hate fun
楽しむためにStack Overflowに訪れているのではない。
課題や問題を解決したい・人を助けたいというのが目的。
楽しみといういより、回答をきちんと見つけられることがポイント。
- 良くない質問はクローズしてしまうという対策をとっている
- クローズする理由を具体的に表示させている
- 質問をサイトから削除はしない
- サイト上に残る→悪い例として残す
- クローズする理由を具体的に表示させている
- 悪い質問例
- すでにある質問
- トピックが違う
- サイトの第一印象の話にもつながる
- 建設的ではない
- ディスカッション。事実や参照や専門性の回答を求めている
- 質問ではない
- アイディアとか。合理的に回答できない内容
- 他の人の役に立たない質問
- あまりにも特定の問題の話になっている
あとでその回答を見た人に有益ではないものは残しておいても意味が無い
だいたいこんな内容でした!
Stack Overflowではサイトをコミュニティーとしてとらえ、その社会をどう構成していくかという事をとても考えているように感じました。
また、ユーザーを出来るだけ広く取ろうとするのではなく、Stack Overflowがどうありたいのかを意識して、
それにあったユーザーがどうやったら居心地よく使ってくれるかという考え方が印象的でした。