いいね！Androidアプリ

■シンプルで使いやすい分数電卓です。 分数電卓は、書式通りに入力して結果を表示することが出来ます。 だから、誰にでも簡単に利用することが出来ます。 日常の分数計算にはもちろん、お子様の算数の勉強にもお役立て頂ければ幸いです。 【 Google Play でダウンロードする 】

Android Studio に於けるプロジェクトの削除方法について、まとめてみました。 [前提] ・以下の３つプロジェクトが作成されています。 　My Application 1 　My Application 2 　My Application 3 1.プロジェクトリストの削除 現在、My Application 1を開いている状態です。 [File]メニューから [Reopen Project] - [Clear List]を選択します。 プロジェクトリストが全て削除されると、[Reopen Project]がグレーアウトされます。 Welcome to Android Studio 画面のRecent Projects の一覧からもプロジェクト名が削除されます。 この操作により削除されたのは、プロジェクトリストであって、プロジェクト自身ではありません。 従って、プロジェクトリストが削除されても、以下の手順でプロジェクトを開くことができます。 [File]メニューから [Open]を選択します。 もしくは、Welcome to Android Studio 画面のOpen Projectを選択します。 Open File or Project ダイアログから、目的のプロジェクトを選択して、[OK] をクリックすれば、プロジェクトを開くことができます。 2.プロジェクト自身の削除 Android Studioには、メニューからプロジェクト自身を削除する項目がありません。 プロジェクト自身を削除するには、エクスプローラを使用して、プロジェクトを直接削除する必要があります。 デフォルトでは、ユーザーフォルダ配下のAndroidStudioProjectsにプロジェクトが作成されています。 （例えば、Windows7の場合は、\Users\ユーザー\AndroidStudioProjects） ここで、目的のプロジェクト名のフォルダを削除することによって、プロジェクト自身を削除することができます。

プロキシ経由の環境で、Android Studioを利用するための設定です。 ■Android Studioのプロキシ設定 1.「Welcome to Android Studio」画面から[Configure] ⇒ [Settings]を選択します。 ※または、プロジェクト作成画面から[File]-[Settings]を選択します。 2.「Settings」画面の左ペインの[HTTP Proxy]を選択します。 3.「Settings」画面の右ペインで、以下の設定を行います。 ・Manual proxy configuration にチェックを入れます。 ・HTTP にチェックを入れます。 ・Host name にプロキシサーバーのドメインまたは、IPアドレスを設定します。 ・Port number にプロキシサーバーのポート番号を設定します。 ■Android SDK のプロキシ設定 1.「Welcome to Android Studio」画面から[Configure] ⇒ [SDK Manager]を選択します。 ※または、プロジェクト作成画面から[Tools]-[Android]-[SDK Manager]を選択します。 2.「Android SDK Manager」画面から[Tools]-[Options]を選択します。 3.「Android SDK Manager - Settings」画面で、以下の設定を行います。 ・HTTP Proxy Server にプロキシサーバーのドメインまたは、IPアドレスを設定します。 ・HTTP Proxy Port にプロキシサーバーのポート番号を設定します。

1.Android Studioの起動 ショートカットからAndroid Studioを起動します。 インストール後、初めての起動する場合は、「Complete Installation」ダイアログが表示されます。 「I do not have a previous version of Android Studio or I do not want to import my settings」を選択して、[OK]をクリックします。 「Welcom to Android Studio」ダイアログが表示されます。 以下のアップデート情報が表示されることがあります。 「Update Info A new version of Android Studio is available!」 ステータスバーに表示されている「Check」をクリックします。 「Android Studio x.x.x Build xxx.xxxxxxx. Check for updates now.」 アップデート内容を確認できます。 とりあえずアップデートはせずに、[Remind Me Late]をクリックして閉じます。 2.プロジェクトの作成 「Welcome to Android Studio」ダイアログの[New Project]をクリックします。 「New Project」ダイアログが表示されます。 以下は、各項目の詳細です。 【Application name】 Google Play、端末のアプリケーション管理で表示されるアプリケーションの名前です。 「The application name is shown in the Play store, as well as in the Manage Applications list in Settings.」 【Module name】 IDEで使用されるモジュールの名前です。「Application name」と同じにしても良いです。 「This module name is used only by the IDE. It can typically be the same as the spplication ...

■Android Studioとは Android Studioとは、「IntelliJ IDEA」という統合開発環境(IDE)をベースに、新たに作成されたAndroid専用のIDEです。 以前から利用されているAndroid Development Tools(ADT)は、「Eclipse」というIDEのプラグインとして提供されています。 いずれは、Android Studioが、ADTに取って代わる存在となるでしょう。 ■Android Studioの導入 1.JDKのダウンロードとインストール 以下のURLからJDKをダウンロードします。 http://www.oracle.com/technetwork/java/javase/downloads/index.html ダウンロード及びインストールの方法については割愛します。 2.環境変数「JAVA_HOME」にJDKを設定 (例) JAVA_HOME=C:\Program Files\Java\jdk1.6.0_39 3.JDKのパスを通す PATHに以下を追加します。 %JAVA_HOME%\bin; 4.「IntelliJ IDEA」のダウンロード 以下のURLから任意のフォルダへダウンロードします。 http://developer.android.com/sdk/installing/studio.html 「Download Android Studio v0.5.2 for Windows」をクリックします。 ※2014/05/08現在、バージョンはv0.5.2です。 5.「IntelliJ IDEA」のインストール ADTなど、開発環境がすでにインストールされている端末では、androidのホームディレクトリが存在していて共有されます。 「IntelliJ IDEA」をインストールして起動すると、「~/.android」は上書きで更新されてしまいます。 必要に応じて、退避してください。 ダウンロードしたEXEファイルを実行します。 「Welcom to the Android Studio Setup Wizard」ダイアログが表示されます。 [Next]をクリックします。 「Cho...

W3CのFileSystem API、FileWriter API、File APIの仕様に基づいて実装されているCordovaのファイルストレージAPIの利用方法についてです。 １．プラグインの追加 ①ファイルシステム プラグインの追加 > cordova plugin add org.apache.cordova.file ②ファイル転送 プラグインの追加 > cordova plugin add org.apache.cordova.file-transfer ③config.xmlの確認 以下のパラメータが追加されていることを確認します。 [platforms/android/res/xml/config.xml] <feature name="File"> <param name="android-package" value="org.apache.cordova.file.FileUtils" /> <param name="onload" value="true" /> </feature> <feature name="FileTransfer"> <param name="android-package" value="org.apache.cordova.filetransfer.FileTransfer" /> </feature> ④AndroidManifest.xmlの確認 以下のパーミッションが追加されていることを確認します。 [platforms/android/AndroidManifest.xml] <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> ２．FileSystemオブジェクト window.requestFileSystemメソッドにより、FileSystemオブジ...

今回は、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-...

localStorageとは、前回のsessionStorageと同様に、Cordovaフレームワークを用いた、HTML5ベースのアプリ開発で利用できる、もっとも簡単なストレージの一つです。 localStorageは、KeyとValueをペアとして、データにアクセスできるストレージです。 sessionStorageとは異なり、ウィンドウやタブを閉じても、データは保存されていて、同じオリジンであれば、ウィンドウ間でも共有されます。 また、データ容量は5MBであり、あまり大きいとは言えません。 この様なことから、localStorageは、データの永続化が必要であり、容量はさほど大きくならない、アプリの設定項目などを保存するストレージとして、利用するのが良いでしょう。 ■データの保存 localStorageのsetItemメソッドを利用します。 以下は、「家入レオ」をKeyに、「サブリナ」をValueとして、データを保存しています。 var key = '家入レオ'; var data = 'サブリナ'; localStorage.setItem(key ,data); 以下は、JSONデータを保存する場合です。 var key = '家入レオ'; var obj = {  Single1: 'サブリナ',  Single2: 'Shine',  Single3: '太陽の女神' }; //object ⇒ string var data = JSON.stringify(obj); localStorage.setItem(key ,data); ■データの取得 localStorageのgetItemメソッドを利用します。 var data = localStorage.getItem(key); 以下は、JSONデータを取り出す場合です。 var data = localStorage.getItem(key); //string ⇒ object var obj = JSON.parse(data); ■データの削除 localStorageのremoveItemメソッドとcl...

sessionStorageとは、Cordovaフレームワークを用いた、HTML5ベースのアプリ開発で利用できる、もっとも簡単なストレージです。 sessionStorageは、KeyとValueをペアとして、データにアクセスできるストレージです。 データは、ウィンドウやタブを閉じるまで有効で、ウィンドウ間で共有はされません。 また、データ容量は5MBであり、あまり大きいとは言えません。 この様なことから、sessionStorageは、アプリのキャッシュのような、一時的なストレージとして、利用するのが良いでしょう。 ■データの保存 sessionStorageのsetItemメソッドを利用します。 以下は、「家入レオ」をKeyに、「サブリナ」をValueとして、データを保存しています。 var key = '家入レオ'; var data = 'サブリナ'; sessionStorage.setItem(key ,data); 以下は、JSONデータを保存する場合です。 var key = '家入レオ'; var obj = { Single1: 'サブリナ', Single2: 'Shine', Single3: '太陽の女神' }; //object ⇒ string var data = JSON.stringify(obj); sessionStorage.setItem(key ,data); ■データの取得 sessionStorageのgetItemメソッドを利用します。 var data = sessionStorage.getItem(key); 以下は、JSONデータを取り出す場合です。 var data = sessionStorage.getItem(key); //string ⇒ object var obj = JSON.parse(data); ■データの削除 sessionStorageのremoveItemメソッドとclearメソッドを利用します。 sessionStorage.removeItem(key); 以下は、s...

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

いいね！ 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がインストールされます。 インストール完了の確認として、バージョ...