2014年3月30日日曜日

viewportのエミュレーション Cordova(PhoneGap)

viewportとは、仮想のブラウザウィンドウです。
CSSやJavaScriptが描画エリアとして参照しているのは、viewportです。

viewportの横幅は、デフォルトで980pxに設定されています。

では、端末の解像度が640px(width)の場合、viewportの右端の画像は切り除かれてしまうのでしょうか?

いいえ、その様なことはありません。

viewportを基準としてレイアウされた画像は、端末の解像度に合わせて、自動的に拡大縮小されるのです。
つまり、解像度の異なるどんな端末に対しても、viewportだけを意識していれば、イメージした通りに表示させることができるのです。

ところが、残念なことに、この仕組みが適用されるのは、iPhoneのiOSだけなのです。
androidでは、この仕組みがうまく適用されないのです。

しかも、androidは、iPhoneとは異なり、ベンダー毎に解像度やピクセル濃度(dpi)の異なる多種多様な端末が発売されています。

一体どのように、レイアウトの同一性を実現したら良いのでしょうか?

そこで登場するのが、viewportのエミュレーションです。

前置きが長くなりましたが、今回は、このviewportのエミュレーションについて、まとめてみました。


①viewportを端末の解像度、ピクセル濃度(dpi)に合わせることで、viewport = 端末画面 の関係にします。
viewportの設定は、head要素のmetaタグで以下のように行います。

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

width=device-widthが解像度、target-densitydpi=device-dpiがピクセル濃度(dpi)を端末のサイズに合わせるための設定です。
その他のパラメーターは、ユーザーによる拡大縮小(ピンチイン、ピンチアウトなど)を抑止するための設定です。


②JavaScriptでviewportのサイズを取得します。
viewportサイズの取得は、①の設定によって、端末画面サイズの取得を意味します。

screen.width


③viewportのエミュレーション値と実際のviewport値の比率を求める。
例えば、viewportのwidthを640pxとして、エミュレーションする場合は、以下のようになります。

var scale = screen.width / 640 * 100 + "%";

④CSSのzoomプロパティでページ全体を拡大縮小する。


①から④を実施することで、viewportを任意のサイズ(width)として、エミュレーションすることができます。


以下は、viewportのエミュレーションを実現するJavaScriptの一例です。

function viewport(width) {
var rootElement = document.documentElement;
var scale = screen.width / width * 100 + "%";
rootElement.style.zoom = scale;
}

2014年3月16日日曜日

ネイティブのダイアログ表示 Cordova(PhoneGap)

CordovaによるAndroidアプリ作成に於いて、アラートや確認、入力のダイアログを表示する場合、JavaScriptのalert()やconfirm()、prompt()を利用するのではなく、Android標準のネイティブなダイアログを利用する方が良いでしょう。

Cordovaには、ネイティブのダイアログを表示するために、標準のプラグインが用意されています。
今回は、Cordovaによるネイティブのダイアログ表示について、まとめてみました。


[前提]
作成済みのプロジェクト
--------------------------------------------
ディレクトリ「hello」
パッケージ名「papakingyo.application.hello」
プロジェクト名「HelloWorld」
--------------------------------------------

①プラグインのインストール
プロジェクトのディレクトリ配下で以下のコマンドを実行します。

>cordova plugin add org.apache.cordova.dialogs
Fetching plugin "org.apache.cordova.dialogs" via plugin registry
Installing org.apache.cordova.dialogs (android)


②インストールしたプラグイン一覧の確認

>cordova plugin list
[ 'org.apache.cordova.dialogs' ]

pluginsディレクトリ配下に「org.apache.cordova.dialogs」がインストールされます。

hello
 + plugins
  + org.apache.cordova.dialogs
  android.json

③プラグインをプラットフォームに反映

>cordova prepare android


⑤入力ダイアログの表示

www/js/index.jsのonDeviceReady: function()の箇所を、以下のように編集します。

    onDeviceReady: function() {
        app.receivedEvent('deviceready');
       
function onPrompt(results) {
   alert("You selected button number " + results.buttonIndex + " and entered " + results.input1);
}

navigator.notification.prompt(
   'Please enter your name',  // message
   onPrompt,                  // callback to invoke
   'Registration',            // title
   ['Ok','Exit'],             // buttonLabels
   'Jane Doe'                 // defaultText
);
       
    },

プラットフォームへ反映
>cordova prepare android -d

アプリのコンパイル
>cordova compile android

動作の確認
>cordova emulate android





























以下のメソッドにより、アラートダイアログ、確認ダイアログも表示することができます。

・navigator.notification.alert
・navigator.notification.confirm

詳細は、以下のURLを参照してください。

https://github.com/apache/cordova-plugin-dialogs/blob/dev/doc/index.md


Cordova(PhoneGap)のアップデートについて

Cordovaは頻繁にアップデートされているようで、2014/03/05現在の最新バージョンは、3.4.0-0.1.3です。
※http://cordova.apache.org/から確認できます。

そこで、今回は、cordovaのアップデートについて、まとめてみました。


①開発環境に於ける現在のcordovaバージョンを確認してみます。

>cordova -v
3.3.1-0.1.2


②最新の状態ではなかったので、cordovaのアップデートを実施します。

>npm update cordova -g
npm http GET https://registry.npmjs.org/cordova/latest
npm http 200 https://registry.npmjs.org/cordova/latest
npm http GET https://registry.npmjs.org/cordova
---
---
---
cordova@3.4.0-0.1.3 xxx\AppData\Roaming\npm\node_modules\cordova
├── mime@1.2.11
├── q@0.9.7
├── semver@2.0.11
├── underscore@1.4.4
├── shelljs@0.1.4
├── optimist@0.6.0 (minimist@0.0.8, wordwrap@0.0.2)
├── plist-with-patches@0.5.1 (xmlbuilder@0.4.3, xmldom@0.1.19)
├── elementtree@0.1.5 (sax@0.3.5)
├── npmconf@0.1.13 (once@1.3.0, inherits@2.0.1, osenv@0.0.3, ini@1.1.0, mkdirp@0.3.5, nopt@2.2.0, config-chain@1.1.8)
├── xcode@0.6.6 (node-uuid@1.3.3, pegjs@0.6.2)
├── tar@0.1.19 (inherits@2.0.1, block-stream@0.0.7, fstream@0.1.25)
├── request@2.21.0 (forever-agent@0.5.2, qs@0.6.6, tunnel-agent@0.3.0, aws-sign@0.3.0, json-stringify-safe@4.0.0, oauth-sign@0.3.0, node-uuid@1.4.1, cookie-jar@0.3.0, hawk@0.13.1, http-signature@0.
9.11, form-data@0.0.8)
└── plugman@0.20.2 (bplist-parser@0.0.5, nopt@1.0.10, rc@0.3.0, dep-graph@1.1.0, glob@3.2.9, request@2.22.0, npm@1.3.4)


③アップデート後の確認をします。

>cordova -v
3.4.0-0.1.3

正常にアップデートされたことが確認できました。


これで、cordovaのアップデートは完了なのですが、旧バージョンで作成したプロジェクトについても、必要に応じてアップデートしておきたいところです。


④旧バージョンで作成したプロジェクトを確認してみます。

>cordova platform check
android @ 3.3.0 could be updated to: 3.4.0

cordova 3.3.0によって作成されたandroidプラットフォームのプロジェクトが、3.4.0へアップデートできることが確認できました。

実際にプロジェクト内のcordova.jsを確認してみました。

xxx\hello\platforms\android\assets\www\cordova.js

// Platform: android
// 3.3.0
/*
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  The ASF licenses this file
 to you under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance
 with the License.  You may obtain a copy of the License at

確かにバージョンは3.3.0になっています。


⑤プロジェクトのアップデートを行ってみます。

>cordova platform update android
---
Android project is now at version 3.4.0
If you updated from a pre-3.2.0 version and use an IDE, we now require that you import the "CordovaLib" library project.

これで、アップデートは完了です。


⑥アップデート後の確認をします。

>cordova platform check
All platforms are up-to-date.

全てのプラットフォームが最新の状態であることが確認できました。


実際にプロジェクト内のcordova.jsを確認してみました。

xxx\hello\platforms\android\assets\www\cordova.js

// Platform: android
// 3.4.0
/*
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  The ASF licenses this file
 to you under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance
 with the License.  You may obtain a copy of the License at

確かに、バージョンが3.4.0になっています。


これで、cordovaのアップデート及び、既存プロジェクトのアップデートは完了です。