いいね！Androidアプリ

今回は、Cordovaプラグイン追加の際に、発生するエラーについて、対処方法をまとめてみました。 ■gitがインストールされていない、またはpathが通っていない時に発生するエラー >cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git Fetching plugin "https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git" via git clone Error: "git" command line tool is not installed: make sure it is accessible on your PATH. ・対処方法 cordovaは、プラグインを追加する時に、gitを利用しています。 事前に、gitをインストールする必要があります。 1.以下のURLからダウンロードして、gitをインストールします。 http://git-scm.com/downloads 2.インストール先に対してpathを通します。 システムのプロパティから[詳細設定]-[環境変数]-[システム環境変数]の「path」に 「*****\Git\cmd;」を追加します。 3.プラグイン追加を再実行します。 >cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git Fetching plugin "https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git" via git clone Installing "org.apache.cordova.file" for android ■gitの依存関係が原因で発生するエラー >cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-...

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

いいね！ Androidアプリ「 Cordova3によるAndroidアプリ作成 」でCordovaのインストールからアプリ作成の概要を書きました。今回は、ソースコードの編集と動作確認の流れをまとめてみました。 [前提]作成済みのプロジェクト -------------------------------------------- ディレクトリ「hello」 パッケージ名「papakingyo.application.hello」 プロジェクト名「HelloWorld」 -------------------------------------------- ※プロジェクトの作成方法は いいね！ Androidアプリ「 Cordova3によるAndroidアプリ作成 」で確認できます。 １．wwwディレクトリ配下のソースコードを編集 wwwディレクトリの構造は以下の通りです。 hello + .corova + merges + platforms + plugins + www + css index.css + img logo.png + js index.js config.xml index.html index.html、index.js、index.cssファイルを編集します。 ２．プラットフォームへ反映 >cordova prepare android Generating config.xml from defaults for platform "android" Preparing android project 「１」で編集した内容が、プラットフォームのwwwディレクトリ配下にコピーされます。 hello + .corova + merges + platforms +android +assets +www +css +img +js config.xml cordova.js cordova_plugins.js index.html +cordova ...

プロキシ経由の環境に於いて、cordovaのインストール作業を実施すると、以下のようなエラーに遭遇することになります。 >npm install -g cordova npm http GET https://registry.npmjs.org/cordova npm http GET https://registry.npmjs.org/cordova npm http GET https://registry.npmjs.org/cordova npm ERR! network connect ETIMEDOUT npm ERR! network This is most likely not a problem with npm itself npm ERR! network and is related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! network npm ERR! network If you are behind a proxy, please make sure that the npm ERR! network 'proxy' config is set properly.  See: 'npm help config' エラーを回避するためには、npmに対して、以下の設定を行う必要があります。 npm config set proxy http://プロキシサーバのURL:ポート番号 npm config set https-proxy http://プロキシサーバのURL:ポート番号 (例) >npm config set proxy http://xx.xx.xx.xx:xxxx >npm config set https-proxy http://xx.xx.xx.xx:xxxx 以下で、設定値を確認します。 >npm config list https-proxy = "http://xx.xx.xx.xx:xxx...

以前、いいね！Androidアプリ「 PhoneGap (Cordova) によるAndroidアプリ作成 」で、Cordovaによるアプリ作成について書きました。今回は、何が違うのかというと、Cordovaのバージョンが2.x.xから3.x.xになって、Cordovaの開発環境構築に、Node.jsを用いていることです。 それでは、環境構築、プロジェクトの作成、エミュレータでの実行までを、順を追って説明します。 ■android開発環境の構築 androidの開発環境が構築されていない方は、 いいね！Androidアプリ「 SDK ADT Bundle for Windows」による開発環境の構築① 」を参照して構築してください。 ■Antのインストール いいね！Androidアプリ「 ZXingでバーコードリーダーを作ってみよう① 」の中で、Antのインストールについての記載があります。 こちらを参照して、インストールしてください。 ■環境変数(path)の設定 以下のAndroid sdkとAntのディレクトリに対して、pathを通します。 [Android sdk root]\sdk\tools [Android sdk root]\sdk\platform-tools [Ant root]\bin ■node.jsのインストール 以下の手順に従って、node.jsをインストールしてください。 以下のnodejs公式サイトからダウンロードします。 http://nodejs.org/ [DOWNLOADS]をクリックします。 [Windows Installer(.msi)]から選択します。 [Next]をクリックします。 ライセンスに同意して、[Next]をクリックします。 [Next]をクリックします。 [Next]をクリックします。 [Install]をクリックします。 [Finish]をクリックします。 node.jsをインストールをすると、Node.jsとパッケージマネージャのnpmがインストールされます。 インストール完了の確認として、バージョ...

今回は、HTML5、CSS、JavaScriptによるAndroidアプリ開発についてです。 これらのWebアプリ技術を使って、Androidアプリ作成を可能にするのが、PhoneGap（Cordova）です。 PhoneGap（Cordova）の開発環境について、まとめてみました。 ◆PhoneGap（Cordova）のダウンロード 以下のPhoneGap公式サイトからダウンロードします。 http://phonegap.com/ [Install]ボタンをクリックすると、phonegap.zipがダウンロードできます。 ZIPファイルを任意のディレクトリに展開すれば、PhoneGap（Cordova）を使用する準備は完了です。 （現時点でのバージョンは2.4.0） ◆新規プロジェクトの作成 ①Eclipseで新規プロジェクトを作成します。 プロジェクトの作成方法については、以下を参照してください。 いいね!Androidアプリ 「SDK ADT Bundle for Windows」による開発環境の構築③ ②PhoneGap（Cordova）資材のコピー phonegap-2.4.0\lib\android配下の以下の資材をコピーします。 ・libsフォルダにcordova-2.4.0.jarをコピー ・assets/wwwフォルダにcordova-2.4.0.jsをコピー ・resフォルダにxmlフォルダをコピー cordova-2.4.0.jarは、Librariesに追加します。 ◆AndroidManifest.xmlの編集 以下の編集が必要になります。 ①端末解像度の対応 解像度が異なる端末に対応するための設定です。 <uses-sdk.../> タグの上に挿入してください。 <supports-screens android:largeScreens="true" android:normalScreens ="true" android:smallScreens="true...