Asial Blog

Recruit! Asialで一緒に働きませんか?

山田 健一

フリーのITエンジニアの傍らアシアルではMonacaのサンプルアプリ制作と解説記事の執筆を担当しています。最近は、HTML5/CSS3/JavaScriptを多く扱っていますが、業務分析や、RDB設計が得意技です。時々Monaca関連のセミナー講師も行ってます。

GPSの座標から住所と地図を表示する

カテゴリ :
Monaca
タグ :
Monaca
Google Maps API の指定
こんにちは、サンプルアプリ開発者の山田健一です。

今回はGPSにより取得した緯度、経度から住所を求め、さらに地図を表示するサンプルについて解説します。

住所取得、地図表示、どちらも Google Maps API を利用します。

Google Maps API を利用するためには、htmlに次のコードを追加します。

GPSアプリ作成上の注意点について

カテゴリ :
Monaca
タグ :
Monaca
ScreenShot
こんにちは、サンプルアプリ開発者の山田健一です。

GPSアプリはMonacaと相性がよいものの1つです。

なぜならケーブル要らずのデバッグができるからです。

「GPSアプリをデバッガーで起動して、外を歩きながら取得したGPSデータを、PCに表示させたログで確認する」という使い方が可能です。

テンキー入力機能の実装

カテゴリ :
Monaca
タグ :
Monaca
自作テンキーのイメージ
こんにちは、サンプルアプリ開発者の山田健一です。

スマートフォンのソフトキーボードは使いづらいと思ったことはありませんか?

特に数値入力のみのときは電卓のような使い勝手が欲しいものです。

そこで、今回はテンキー入力の自作を紹介します。

つぎのようなイメージのものを作ります。


自作テンキーのイメージ
また、数値入力画面として、次のようなメイン画面を用意します。


数値入力画面
入力部分をタップすると、テンキー画面に切り替わります。

その際、上の12のように既に入力されたデータがあるときはテンキー部の上に表示します。

数値入力は電卓の感覚で行えますし、小数点以下の入力も可能です。

[ent]ボタンタップで元の画面に戻り、指定したエリアに入力数値を表示します。

それではコードを見ていきましょう。

index.htmlのbody部のコードは次のようになります。


index.htmlのbody部
上側の最初に表示されるページの input タグに readonly が指定されていることに注目してください。この指定により、input タグをタップしてもソフトキーボードが開くことはなくなります。

また、クリックイベントの tenkey 関数には、どのエレメントがタップされたかの情報を引数として与えています。

この引数を頼りにテンキー部が値を返してきます。

次は下側のテンキー部分です。

TABLEタグを使用してレイアウトを整えています。また、各列の幅を揃えるたに width="33.3%" の指定をしています。

テンキー部の各キーがタップされたときはkeyin関数が呼ばれます。

JSコードを見ていきましょう。

初期画面に関連したコードは次のようになります。


初期画面に関連したコード
入力IDにはテンキー部で[ent]ボタンがタップされたときに値をセットするエレメントIDが入ります。

入力データはテンキー部との値の受け渡しに使用します。

tenkey 関数では渡されたエレメントIDを入力IDにセットして、そのエレメントの内容をテンキー部の数値部にセットします。

[javascript]

location.hash = "_tenkeyForm";

[/javascript]
でテンキー部に画面遷移します。

テンキー部のコードは次のようになります。


テンキー部のコード
取り立てて難しいものはありませんが、小数点が入力された後は、次の小数点を無視するなどの工夫をしています。

初期画面に戻るときは、iUIの関数である


  1. //homeに戻る
  2.  iui.showPageById("home");

を用いています。

このテンキー部の応用として、小数点以下は1桁しか入力させないなどの制限を加えることなどが考えられます。

また、[+/-]ボタンや小数点は不要なら非表示にすることもできます。

状況に応じて応用してください。

ソースファイル、APKファイルは以下からダウンロードしてください。

ソース

APKファイル(デバッグビルド)

JSON形式のWeb APIを利用する

カテゴリ :
Monaca
タグ :
Monaca
ダミー応答ファイルの解析結果
こんにちは、サンプルアプリ開発者の山田健一です。

「Monacaでツイッター検索アプリを作る」
http://docs.monaca.mobi/sampleapp/002twitter/twitter/
ではXML形式の応答を返すWebAPIの利用について解説しましたが、JSON形式で応答を返すWebAPIも多くあります。

JSONについては下記のサイトが分かりやすく解説していますので、参照してください。

http://www.json.org/json-ja.html

今回は、JSON形式で応答を返すWebAPI利用について解説したいと思います。

題材は同じくツイッター検索です。ツイッター検索ではJSON形式で応答を返すWebAPIも用意してありますので、相違を見比べるには都合がよいからです。

機能は同じなので、XML版のツイッター検索を改造して作成します。

ツイッター検索APIの例

JSON形式を返すツイッター検索のAPI例は次のようになります。

http://search.twitter.com/search.json?lang=ja&rpp=20&q=%23AKB

この例は、「#AKB」を含むツイートを検索する例になります。

「rpp=20」は「1ページあたり20件取得する」という指定になります。 「page=1」などと対になるものですが、「page=」を省略したときは「page=1」とみなされます(例では「page=」を省略しています)。

「q=」に続けて検索文字を指定しますが、UTF-8でURLエンコードした文字列である必要があります。「q=#AKB」ではなく、「q=%23AKB」となっているのはそのためです。

「q=xxx」の指定は必須となっています。

ダミー応答ファイル(twitter.json)の作成

XML形式のWEB APIのときと同様、クロスドメイン問題対策としてMonacaデバッガーで動いているときにアクセスするダミー応答ファイルを作成します。

http://search.twitter.com/search.json?lang=ja&rpp=20&q=%23AKB

にブラウザでアクセスし、応答のソースをテキストファイルに貼り付け、twitter.jsonとして保存してください。このダミー応答ファイルはwww直下にアップロードしてください。

応答の解析

ダミー応答ファイルを利用して、応答を解析しましょう。応答はJSON形式で返されますので、次のサイトで確認を行います。

http://jsoneditor.net/

上部にあるテキストボックスにダミー応答ファイルの内容を貼り付け、[Read JSON/XML]ボタンをクリックすると、下に解析結果が表示されます。




ダミー応答ファイルの解析結果
この結果を見ると、resultsという配列の中にtextプロパティーとしてツイート内容が入っていることが分かります。

残念ですが、JSON形式の応答には、ツイートへのリンクは含まれていません。

index.html

index.htmlは

http://docs.monaca.mobi/sampleapp/002twitter/twitter/

のものをコピーします。

機能が同じなので、全く手を加える必要はありませんが、文書化の意味で、titleタグのみ変更します。

jQueryでJSON解析

XML形式のときと同様にJSON解析はjQueryで行います。

$.getJSON(
url,
function(json) {
parseJson(json);
}
);
がJSON解析メソッドになります。

コードの全文は次のようになります。




main.js全文
jQueryのメソッドがパースを行ってくれるので、パースの必要はありません。

XML応答にはツイートへのリンクが含まれていますので、XML応答のサンプルからツイートのリンクを除いたソースと比較すると次のようになります。


XML応答解析とJSON応答解析の比較
プロパティーを参照する形になりますので、XML応答と見比べると、コードが直感的にに記述できます。機能が同じならJSON形式のAPIを利用することをお勧めします。

ソースファイル、APKファイルは以下からダウンロードしてください。なお、ソースファイルにはダミー応答ファイル(twitter.json)が入っていませんので、別途作成してください。

ソースファイル

apkファイル(デバッグビルド)

画面サイズの異なる端末への対応方法

カテゴリ :
Monaca
タグ :
Monaca
Galaxy Nexus(左)とGalaxy S(右)の比較
こんにちは、サンプルアプリ開発者の山田健一です。

Android機は様々な画面サイズが存在します。iUIを使ってデザインしていると多くの場合、iUIが対応してくれます。

たとえば、画面幅いっぱいのボタンは、画面が広くなっても画面幅いっぱいに表示されます。

Monacaデバッガー用localStorageマネージャーの作成

カテゴリ :
Monaca
タグ :
Monaca
localStorageのキー一覧
こんにちは、サンプルアプリ開発者の山田健一です。

localStorage をアプリ中で使用する場合、localStorage は作成したアプリ専用となります。

たとえばアプリAで key:key1、value:value1 というデータを作成し、アプリBでkey:key1、value:no-valueというデータを作成しても、アプリAから読む key1 の value は value1 です。

ログをファイルに記録する

カテゴリ :
Monaca
タグ :
Monaca
ファイルの読み書きの流れ
こんにちは、サンプルアプリ開発者の山田健一です。

Monaca のデバッグログは便利な機能ですが、リリースしたアプリの動作確認には使用できません。そこで、アプリからスマートフォンのファイルにログを書き込む手法を紹介します。

筆者が作成中の GPS アプリで動作ログを取り、仕様を検討することに活用しています。

iUIでタブインターフェースを実現する

カテゴリ :
Monaca
タグ :
Monaca
スマホ画面
こんにちは、サンプルアプリ開発者の山田健一です。

iUIには、簡単にタブインターフェースを実現できる記法が存在しませんが、タブインターフェースを用いたいと思うことも多いと思います。
そこで、iUIでタブインターフェースを実現する手法を紹介します。次のようなイメージになります。