いいね！Androidアプリ

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)を端末のサイズに合わせるための設定です。 その他のパラメーターは、ユーザーによる拡大縮小(ピンチイン、ピンチアウトなど)を...

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()の箇所を、以下のように編集します。     on...

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) ├── ...