2017.8.17
Androidアプリ開発日誌#4【Google Map#3-JSONとの連携をさせてみる#1-】
今日の目標としては、アイコンをタップすると追加の情報が吹き出しで表示される、というのをやってみようと思います。
とはいえ、吹き出しを表示させること自体は以前既に出来ているのですが、もっとデカいスペースの吹き出しを表示させたいなあとか思うわけです。
可能であればウィンドウ幅を固定長にさせたいですね。要するにDivタグを表示させたいってニュアンスですね。
まぁAndroidアプリ自体HTML5で作れるっぽいので、マジもんのDivタグを表示させることも可能っちゃ可能なんですけどね。
まぁ、HTMLベースだとページ遷移の度に遅延が発生して使っていてストレスフルですので大人しくアプリとして開発しますけどね。(笑)
一応僕の計画では僕はアイデア出しとビジネス側に専念したく、アプリ開発は人に丸投げしたいと思ってるんですが、将来性も考えて自分で書けた方がいいに決まってるんで、ある程度取捨選択しながらプロトタイプを作ろうと思っております。はい。
いやー、僕はあくまでも「プロダクトを考えて作る」のが好きなのであって、プログラミングはそのための手段であり、好きでもなんでもないんですよね...むしろ嫌いというか(笑)(笑)
そういう自分の側面に合った立場を作れたらいいなあとかは思ってますね。
さて、んじゃ作りますか。今日の目標は情報ウィンドウのカスタマイズです。
まずは公式のリファレンスを見てみましょう。こちらのページが怪しいですね。
これを見てわかるとおり、色々できそーですね。無条件で中央揃えになるのは気に入らないですね。左揃えにしたいですね。ざっと探しても全然見つからないんだけど･･････。
javascript版のAPIならタグが埋め込めるのでいかようにもできるんですが、うーむ。
明らかにjson扱うプロダクトだし、可能ならば埋め込みしたいなぁという気持ちはありますけどね･･････。調べてみたらWebViewっていうのがクサいですね。プンプンしますね。
一応デメリットとしては、ページをこちら側で用意しなくてはなので、本来Google側だけで済んでいたサーバー負担がこちらにも多少来ることですかね。あと、やっぱWebアクセスが入るとレスポンスが劇的に悪くなりそうですね。とはいえ、結局データベース取得はどっかでやんなきゃなので大して変わんなさそう感ありますけど。(笑)
ただ、その問題を無視すれば、Web版とアプリ版でほぼ共通のコードが書けるというか同じページ呼び出せば良くねって話になり、とても眺望が明るくなります。
うーん、これ結構悩ましいな･･････。
実際に動くプロトタイプを作ると言いましたけど、投資家の方って会って話すタイプとSkypeなどのウェブ通話でする人がいるんですよね･･････(笑)
かの有名ななかいてつやさんは後者です。後者の場合Webベースのプロトタイプが必要になってきます。二度手間･･････！！！笑
ま、Webベースのプロダクトなんて余裕で作れるので、Google Maps APIの使い方を覚えればどうせjavascriptに変わったところで大して変わらんでしょ。(笑)
話めっちゃ逸れてますね。戻します。まず中央揃えに関しては使い勝手の良さそうな情報が見当たらないので妥協しましょう。本質じゃないし。
バグ沼にハマるぐらいなら今は妥協した方が良さそうですしね。ウィンドウのカスタムも諦めます。使い方なんかは若干わかったのでよしとしましょう。
一応軽く触れると、GoogleMap.InfoWindowAdapterインターフェースを実装するわけですが、この中の2つが共にnullを返せばデフォルトのものが使われるって感じらしいですねー。
では、スペニットに色々情報を書き加えてみましょーか。
とりあえずUtilクラスを使って、そこでどんな情報が渡されるべきか、それを用いたテンプレートを作ってみましょうか。
ここで私が触ったことのないKotlinの機能について触れてみましょうか。名前付き引数です。
まぁこれは単純に引数にエイリアスをつけられるってやつですね。何が便利なのかっていうとデフォルト値が複数あるパターンの時に威力を発揮します。
現在、今のプロダクトがどんな値を必要としているか全く分かりませんし、後から追加したりオプション値をいくらでも持てるように名前付き引数で作りますかね。
と、思ったけど、全てのページで見たい情報ってほぼ共通だし、Utilクラスじゃなくて扱う情報を統括するクラス作ったほうが汎用性高そうですね。
せっかくなのでデザインパターンとか意識したいんですけど、いまいち使い所がわからんですね･･････。まぁとりあえず作りますか。
まずやりたいことを示すと、テンプレートに各種情報を埋め込んで表示するっていう単純な機構なのですが、やり方がいろいろ考えられますね。
一番手抜きができるのは、IDなんかを渡して、そのIDに紐づく情報を表示させるっていうものですね。
予め表示させる予定の範囲のデータを格納した配列を用意させておけば、そっから情報を引っこ抜いて表示させればいいだけですからね。
んじゃ、そーいう奴らのためのプロフィールとなるクラスを作りましょう。
そのためにJSONデータを作る必要があるかなって思って、ダミーのJSONデータを作ることにしました。
話題が二転三転してますが、この日記は開発中の思考回路をまとめてるのにすぎないので許してください、なんでもしますから！
作りながら書いてる日なのがバレますけどね(笑)
{
“Datas”: [
{
“Id”: 1,
“name”: “都庁”,
“lat”:35.689605,
“lng”:139.692316,
“price”:1000,
“text”:”都庁。我々横浜県民には無縁の場所である。”
},
{
“Id”: 2,
“name”: “東加古川駅”,
“lat”:34.745818,
“lng”: 134.869133,
“price”:2500,
“text”:”ろんぐさんのかつての最寄り駅だよ。¥n¥n実家は引っ越した。”
},
{
“Id”: 3,
“name”: “さいたま市役所”,
“lat”: 35.883814,
“lng”: 139.626178,
“price”:500,
“text”:”埼玉なら500円でええやろｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ”
}
]
}
これが必要最低限のデータかな。
これを読み込んで表示させる、といったことをたぶんやります。このデータ生成部分はWeb側の仕事なので今はやんないです。
ところでこいつをパースしようと思ったんですがなんとKotlinは標準でJSONをサポートしてないという驚きの事実が発覚してしまいました。PHPだと標準でついてたので苦労しなかったのですが、まじか･･････。
ということで、ライブラリを導入するしかありませんね。
一番手軽なのはklaxonというライブラリだそーです。日本語文字が文字化けするようですが、回避策もあるそうなので問題なさそうですね。
dependencies {
compile 'com.beust:klaxon:0.30'
compile group:'org.apache.commons',name:'commons-lang3',version:'3.4'
}
repositories {
jcenter()
}
まず上記の奴らを追加します。さきほど紹介したklaxonと、StringEscapeUtilsというライブラリを使います。
ってか、こういうライブラリをインポートしたのってなにげに初めてなんですけど、めっちゃ手軽に使えますね･･････。
import com.beust.klaxon.JsonObject
import com.beust.klaxon.Parser
import org.apache.commons.lang3.StringEscapeUtils
...
/*ここからテスト用独自処理*/
var json = Mock.testjson
json = StringEscapeUtils.escapeJava(json).replace("\\"", "\"")
var jsonobj = Parser().parse(json.byteInputStream()) as JsonObject
class Mock {
companion object {
const val testjson="{\n" +
"“Datas”: [\n" +
" {\n" +
" “Id”: 1,\n" +
" “name”: “都庁”,\n" +
"\t“lat”:35.689605,\n" +
"\t“lng”:139.692316,\n" +
"\t“price”:1000,\n" +
"\t“text”:”都庁。我々横浜県民には無縁の場所である。”\n" +
" },\n" +
" {\n" +
" “Id”: 2,\n" +
" “name”: “東加古川駅”,\n" +
"\t“lat”:34.745818,\n" +
"\t“lng”: 134.869133,\n" +
"\t“price”:2500,\n" +
"\t“text”:”ろんぐさんのかつての最寄り駅だよ。¥n¥n実家は引っ越した。”\n" +
" },\n" +
"\t{\n" +
" “Id”: 3,\n" +
" “name”: “さいたま市役所”,\n" +
"\t“lat”: 35.883814,\n" +
"\t“lng”: 139.626178,\n" +
"\t“price”:500,\n" +
"\t“text”:”埼玉なら500円でええやろｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ”\n" +
" }\n" +
" ]\n" +
"}"
}
}
んで、こんな感じのテストデータが書けました。ここで時間切れなので、次回はこんなページを参照しつつ、このJSON文字列をパースして目的のデータを抜き出すことに挑戦してみましょう。
つまり上のコードは一切テストされてません(笑)
そのテストをしたいって話なわけですね。
そうそう。このテストデータ挿入のために、テスト用のクラス作ったんですけど、Kotlinってstaticなメンバ変数持てないらしいですね。かわりにcompanion objectってやつを使うらしいですね。ほへぇ、って感じです。恩恵がよくわかんないですけど。(笑)