Eclise: Android SDK のパス

Android Developer Tools で Android SDK の場所をどこにしたのか忘れた場合、
メニューから Eclipse > 環境設定 > Android > SDK Location で確認できます。

Android 開発の日本語公式ドキュメント

Android 開発の公式ドキュメントは英語のみです。

Develop Apps | Android Developers
https://developer.android.com/develop/

ドキュメントというほどではないですが、
日本語でもざっくりとした公式の説明もありました。
https://support.google.com/googleplay/android-developer/

最初はこちらから読んでみても良いかと思います。

電話番号のプラス記号と国番号

Android アプリを公開するためのアカウント取得時に、
国番号を含めた電話番号の入力が必要でした。

日本の場合は以下のように入力します。
+81-[国内での電話番号]

81 が日本の国番号、
+ 記号は次に続く数字が国番号であることを表す記号です。

国際電話番号の一覧 | Wikipedia
http://ja.wikipedia.org/wiki/国際電話番号の一覧

IE で background-size の transition が動かない

IE の transition を使って background-size を滑らかにアニメーションさせようと思ったのですが、どうやら IE では background-size の transition が動作しないようです。
（仕様など調べていないのでできるのかもしれませんが）

大きさを変えるのみであれば、
transform: scale(X) で代用できることがわかったためそちらで実装しました。
http://stackoverflow.com/questions/16892500/css-transition-of-background-size-in-ie-10

コード等はまた後程アップいたします。

Xcode でソースコードのインデント整形

メニューから Editor > Structure > Re-Indent で、
選択範囲が自動的にインデント調整される。

PhoneGap: プラグインが存在しないエラー

PhoneGap 3.5 の iOS で発生
プロジェクトをビルドしようとすると以下の様なエラーが出て、
ビルドが通らなくなりました。

CDVPlugin class CDVFile (pluginName: File) does not exist.

PhoneGap のプラグインを追加している場合
platforms/ios/[プロジェクト名]/Plugins/
の中にプラグインのファイルが追加されます。

何らかの原因でプラグインのファイルが追加されていない場合、
上記のエラーが発生します。


1. platforms/ios ディレクトリを削除（この時バックアップをとっておく）
2. 該当するプラグインだけを再インストール
3. ビルド
4. バックアップから復元

という手順でビルドが通るようになりました。
恐らく、ビルドされた後の iOS のプロジェクトを手作業で修正している場合に発生するものと思われます。

PhoneGap: WebStorage は deviceready で使用する

PhoneGap では通常の Web ブラウザと同様に、
localStorage, sessionStorage を使用してデータを保存することができます。
Web ブラウザのデータとは別に保存されるため、
ブラウザ側で過去のデータ削除をこなっても、
アプリではデータが残ります。

ただし localStorage や sessionStorage は、
deviceready イベントが発生したあとで使用する必要があります。
jQuery などで ready イベントを拾って来て実行しても、
データが保存されなかったり消えてしまったりするケースがあるので、
必ず deviceready イベントの後に実行するよう注意が必要です。

PhoneGap: Android のバージョン番号でビルド失敗するケース

android 向けにビルドした際に以下の様なエラーが出る場合、
バージョン番号のフォーマットが誤っている可能性が高いです。

$ phonegap build android
......
[aapt] [application_root]/platforms/android/ant-build/AndroidManifest.xml:2: error: Error: Float types not allowed (at 'versionCode' with value 'NaN').
 [31m   [error] [39m [application_root]/platforms/android/cordova/build: Command failed with exit code 2

config.xml を開いて、アプリのバージョン番号を確認して下さい。
iOS の場合は 1.0 などでもビルドが通りますが、
Android の場合は 1.0.0 などビルドバージョン（メンテナンスバージョン）まで
記述しなければ上記エラーが発生します。

iOS In-App Purchase のプロダクトが取得できない場合

PhoneGap では iOS 向けのアプリ内課金処理を実装できるプラグイン
「PhoneGap-InAppPurchase-iOS」が公開されています。
https://github.com/j3k0/PhoneGap-InAppPurchase-iOS

最初に Apple のサーバへアプリ内課金の商品データを読み込む必要があるのですが、
設定が整っていなければ以下の様なエラーが出て読み込みに失敗してしまいます。

2014-08-22 19:23:16.253 AppName[1065:907] InAppPurchase[objc]: Has 0 validProducts

私の場合は購入された代金の振込先情報を登録していなかったこととが原因でした。

iTunes Connect にログインした後、
"Contracts, Tax, and Banking" にて連絡先や銀行口座情報などを、
登録しておく必要があります。
また、実際に登録してから使用できるようになるまで１時間程度かかりました。

登録についてはこちらが大変わかりやすかったです。

iTunes connectで入金口座の登録をしよう | onTheHammock.com
http://onthehammock.com/blog/1286

iOS 登録時の Zengin Code

iOS 登録時に購入代金の振込先として Zengin Code の指定が必要になります。
Zengin Code は銀行コードと支店番号を半角のハイフンでつないで入力します。
例　012-3456

銀行コードのみだと先に勧めないので注意が必要です。

PhoneGap : InAppPurchase-iOS のインストール

PhoneGap では課金処理が JavaScript から制御できるプラグインが、
有志によっていくつか公開されています。

2014年8月現在も更新され続けている熱心なプラグインに
"cc.fovea.plugins.inapppurchas" があります。
https://github.com/j3k0/PhoneGap-InAppPurchase-iOS

プラグインのインストールに成功すると、
storekit というオブジェクトがグローバルに作成され、
それを使って課金処理が制御できるようになります。

if(window.storekit !== undefined) {
    alert('プラグインのインストールに成功しました');
}

Readme にはインストールに関して色々書いてありますが、
コマンド１つだけでOKです。

$ phonegap local plugin add git://github.com/j3k0/PhoneGap-InAppPurchase-iOS.git
$ phonegap plugin list
cc.fovea.plugins.inapppurchase 3.4.1 "InAppPurchase" <= これがでてくればOK

Readme の Manually にもソースファイルの移動や、
config.xml の編集などが書いてありますが、
こちらは上記のコマンドを使用しないで手動でインストールする場合の方法なので、やる必要はありません。（これもやっていたせいで詰まっていました）

In-App Purchases で Free Subscription しかない場合

iTunes Connect 内で課金関係の契約に同意して、
銀行振込みや連絡先などを設定しなければ Consumable や Non-Consumable など
課金が行われる追加コンテンツを登録できないようになっています。

In-App Purchases の "Contacts, Tax, and Banking" リンクをクリックして、
契約に同意すると他の全ての追加コンテンツ、購読の種類が表示されます。

PHP: XPath で特定の文字を含むノードを探す

XPath を使った DOM の解析で、
要素内の文字列が、特定の文字列と一致する要素や、
特定の文字列を含む要素を探すときには以下のように書けます。

$html = file_get_content('src.html');
$document = new DOMDocument();
@$document->loadHTML($html);
$path = new DOMXPath($document);

// 要素の文字列が"プログラミング"である
$node_list = $path->query('//*[.="プログラミング"]');

// 要素の文字列に"プログラミング"が含まれている
$node_list = $path->query('//*(./text(), "プログラミング")');

// 要素が"target"クラスを持っている、かつ、文字列が"プログラミングである"
$node_list = $path->query('//*[@class="target"][.="プログラミング"]');

JavaScript のソースマップファイル

jQuery を使用しているサイトでたまに .map ファイルが存在しない
というエラーが出ていることがある。

調べてみたところ .map ファイルはソースマップといい、
変換前と変換後の ファイルの対応関係を表しているものらしい。

ミニファイされたコードでエラーが発生した時に、
元々のソースコードでいうところのエラー発生位置を通知することができる。
他にも Coffee Script などから変換した JavaScript のエラー箇所が、
元々の Coffee Script のどの部分のエラーなのかを知ることができたりする。

jQuery の .map ファイルも公式で配布されているので、
サーバ上に配置するとエラーは発生しなくなる。

ソースマップについてはこちらがとてもわかりやすいです。
#JSオジサンで Source Map について話してきました - document
http://imaya.blog.jp/archives/7169783.html

PhoneGap で再ビルドするとプラグインが動かない

PhoneGap 3.5 で、 platform/ios や platform/android を削除して、
もう１度ビルドした場合、インストールされていたプラグインが有効化されないようです。
インストールされているプラグインを全て削除して、
もう１度インストールしなおしてビルドするとプラグインが動作しました。

# プラグインの一覧を確認
$ phonegap plugin list

# プラグインを全て削除
$ phonegap plugin remove [プラグイン名]
$ phonegap plugin remove [プラグイン名]
......

# プラグインを再度追加
$ phonegap plugin add [プラグイン名]
$ phonegap plugin add [プラグイン名]
......

# 再ビルド
$ phonegap build ios
$ phonegap build android

PhoneGap のアプリを無線で実機デバッグ

PhoneGap でアプリをビルド・実行する際には、
実機とエミュレータを切り替えることができます。

公式のアプリをスマホにインストールすれば、
無線LAN経由でのプログラム書き込み・実行が可能です。
（ただし、やってみたところファイル読み込みの問題か実行速度がかなり遅かったです）

まず、PhoneGap のアプリをインストール。
iOS, Android, Windows Phone の３種類準備されています。
http://app.phonegap.com

次にコマンドラインから以下を実行。

$ phonegap serve

(server ではなく serve なので注意)

すると IP アドレスが表示されるので、
スマホの PhoneGap アプリへ入力します。
IP アドレスが正しければ無線経由で実行が開始されます。

実行速度が遅かったのであまり使ってないですが、
USB ケーブルでの接続が面倒なときは良いかもしれません。

XPath で <tbody> が読めない場合

ブラウザの開発者ツールで見た場合の HTML と、
実際の HTML ソースが異なる事が原因です。

HTML のソースが

<table>
    <tr>Hello</tr>
<table>

だった場合、
開発者ツール（Firebug や Web インスペクタ）などでソースをみると、
ツールによっては

<table>
    <tbody>
        <tr>Hello</tr>
    </tbody>
<table>

のように自動で <tbody> を付加して表示されます。

ツールを見ながら Xpath に <tbody> を書いても、
実際のソースには存在しないため取得失敗となります。

この場合は実際のソースに合わせて <tbody> を含まずに、
書きなおす必要があります。

//table[@id="target_table"]/tr

JavaScript で RSS 取得・解析

Google が提供している JavaScript ライブラリ「Google Feed API」を使うと、
JavaScript から RSS を簡単に扱えるようになります。
WebStorage などと組み合わせるとローカルの RSS リーダなども
簡単に作れそうです。

Google Feed API
https://developers.google.com/feed/


例えばこのブログの最新記事を読み込む場合は以下のようになります。

google.load("feeds", "1");
google.setOnLoadCallback(initialize);

function initialize() {
    var feed = new google.feeds.Feed('http://yokano-jp.blogspot.com/feeds/posts/default');
    feed.setNumEntries(20);
    feed.load(function(result) {
        if(!result.error) {
            console.log(result);
        }
    });
}

RSS1.0, RSS2.0, Atom どれでも読み込めるようです。

PhoneGap でエミュレータ、実機の切り替え

run コマンドにオプションを付加することで実機デバッグ、エミュレータでの実行を指定することができます。

$ phonegap -run ios --emulator
$ phonegap -run ios --device

--emulator オプションをつけるとエミュレータで実行、
--device オプションをつけると USB や無線で接続された実機で実行されます。

Illustrator CC: px と mm の切り替え

Illustrator CC 18.0.0 です。
メニューから Illustrator > 環境設定 > 単位 を選択。
一般で「ミリメートル」や「ピクセル」など選択できます。

定規ツールで長さを測った時の単位は、
ここで設定した単位になります。

ミリメートルの場合

ピクセルの場合

PHP: 連番のページを保存する簡易クローラ

コンソールから実行する。
別途、必要に合わせて例外処理や HTTP ヘッダの設定など追加。

$start = 1;  // 取得開始番号
$end = 500;  // 取得終了番号
$target_url = 'http://target-server.com/page/';  // この後ろに連番が付く
$delay = 10;  // アクセス間隔（秒）
for($i = $start; $i <= $end; $i++) {
    $html = file_get_contents($target_url . $i);
    file_put_contents('dst/' . $i . '.html', $html);
    echo "\r" . '(' . $i . '/' . $end . ') を保存完了　残り' . ceil(($end - $i) * $delay / 60) . '分';
    sleep($delay);
}
echo "\n" . '全てのページを取得完了';

PhoneGap でビルドが通らなくなった場合

config.xml を編集したあと、ビルドが通らなくなる場合があります。
変更箇所を元に戻してもビルドが通らない場合、
platform/ios, platform/android などのディレクトリを
一旦削除してからビルドするとうまくいきました。

PhoneGap 3.5 の場合だと、
config.xml にてアプリ名を日本語に変更した際に、
この現象が発生しました。

JavaScript の new RegExp() で以下の様なエラーが出る場合は、
正規表現の書き方が間違っています。

Range out of order in character class

特に忘れやすいのがエスケープ記号 \ を 2 回書くことです。

var reg1 = /^([A-Z_\-\.])/  // こちらは通る
var reg2 = new RegExp('^([A-Z_\-\.])'); // エラー

// で定義する場合1回ですが、new RegExp() で書く場合は、
文字列として 1 度解釈されるのでエスケープ記号が消えないように \\ と 2 回書く必要があります。

var reg2 = new RegExp('^([A-Z_\\-\\.])'); 

以前、ブログで書いたはずなのですがすっかり忘れていて、
結構詰んでしまいました。

PhoneGap 3.5 で InAppBrowser が動かない場合

PhoneGap 3.5 で外部サイトを開くときに、
InAppBrowser というプラグインを使用すると便利です。

JavaScript からアプリ内で Web ページを開いたり、
スマートフォンの Web ブラウザを起動して Web ページを開くことができます。

// アプリ内で Web ページを開く
window.open('http://google.co.jp/', '_blank');

// Web ブラウザを起動して Web ページを開く
window.open('http://google.co.jp/', '_system');

InAppBrowser では、
アプリ内で Web サイトを開いた際に「閉じる」ボタンを表示することで、
元の画面に戻ってくることができます。
閉じるボタンが出ない場合は InAppBrowser が有効になっていないので注意が必要です。

以下の３点を確認する必要があります。

１．プラグインがインストールされている

$ phonegap plugin list

のコマンドでインストールされているプラグイン一覧を確認できます。
InAppBrowser がこの中に入っていなければなりません。
インストールは

$ phonegap plugin add https://github.com/apache/cordova-plugin-inappbrowser.git

のように行います。

２．cordova.js をロードしている

<script src="cordova.js"></script>

HTML 内で上記のスクリプト読込が必要です。
これをロードしないと「閉じるボタン」が表示されないデフォルトの画面遷移になります。
www/ ディレクトリ内には存在しないのですが、
各種プラットフォーム向けにビルドした際に生成されます。
ドキュメントにも見当たらなかったので詰まりました。

３．window.open() を使用している
<a> 要素でも同じことができるという記述を見かけたのですが、
PhoneGap 3.5 で試してみたところ window.open() を呼び出さないと動きませんでした。
上のコードのように window.open() を JavaScript から呼び出すと無事表示されました。

CSS の zoom を使ってコンテンツの高さを合わせる

スクロールなしで画面内にきっちりフィットさせたいコンテンツを、

PC、スマホなど様々なサイズに対応させる場合、

１つの方法として CSS の zoom が使用できます。

とくに画面のサイズが固定の時に使用できます。

例えばコンテンツの高さが 1000 px 固定の場合は、
以下のようにしてウィンドウの高さにきっちり合わせることができます。

$(function() {
    var height = $(window).height(),
        zoom = height / 1000;
    $('body').css('zoom', zoom);
});

PhoneGap で外部サイトが開けない場合

対象バージョンは PhoneGap 3.5 です。

例えば <a> 要素で外部サイトへのリンクを設定したが動かない場合などは、
アクセス可能なサイトを予めホワイトリストとして登録必要があります。
config.xml を開いて

<access origin="*" />

を追加とすると全てのサイトにアクセス可能になります。
特定のサイトをアクセス可能にする場合は URL を入れればOKです。

White List Guid | Phone Gap API Documentation
http://docs.phonegap.com/en/3.5.0/guide_appdev_whitelist_index.md.html#Whitelist%20Guide

PhoneGap 3.5 でアプリのアイコンが反映されない

アプリアイコンのパスを書くときに "www/" から書かなければ反映されないようです。

このように "www/" の下から書くとデフォルトのアイコンが表示される。

<platform name="android">
 <icon src="icon/android/ldpi.png" density="ldpi" />
 <icon src="icon/android/mdpi.png" density="mdpi" />
 <icon src="icon/android/hdpi.png" density="hdpi" />
 <icon src="icon/android/xhdpi.png" density="xhdpi" />
</platform>

一方、"www/" を含めると表示された。

<platform name="android">
 <icon src="www/icon/android/ldpi.png" density="ldpi" />
 <icon src="www/icon/android/mdpi.png" density="mdpi" />
 <icon src="www/icon/android/hdpi.png" density="hdpi" />
 <icon src="www/icon/android/xhdpi.png" density="xhdpi" />
</platform>

公式ドキュメントには "www/" の下のパスから書くとあったのですが、
私の環境だと "www/" も含めて書かなければ表示されませんでした。
http://docs.phonegap.com/en/edge/config_ref_images.md.html#Icons%20and%20Splash%20Screens
（ちなみに、phonegap コマンドは www/ の上で実行しても下で実行しても同様でした）

プロジェクトをビルドした時のログで、
アイコンの画像ファイルを探すのの失敗していたエラーが出ていたので気付きました。

PhoneGap のバージョンはこちら

$ phonegap -v
3.5.0-0.20.10

Git 上の PhoneGap プラグインを追加する

PhoneGap 3.5 で Web 上に公開されている Git リポジトリからプラグインを追加する方法です。
例えば、アプリ内のリンクを Web ブラウザで開きたい場合は InAppBrowser プラグインを使用します。

InAppBrowser
https://github.com/apache/cordova-plugin-inappbrowser/

GitHub ページの左上にリポジトリの URL が書かれているので、
コピーしてきて以下のコマンドでインストールできます。

$ phonegap plugin add git://git.apache.org/cordova-plugin-inappbrowser.git
[phonegap] adding the plugin: git://git.apache.org/cordova-plugin-inappbrowser.git
[phonegap] successfully added the plugin

以下のコマンドでインストール済みのプラグインをリスト表示できます。
InAppBrowser が追加されていれば OK です。

$ phonegap plugin list
[phonegap] the following plugins are installed
org.apache.cordova.inappbrowser 0.5.1-dev "InAppBrowser"

削除したい場合は以下のコマンドです。

$ phonegap plugin remove org.apache.cordova.inappbrowser
[phonegap] removing the plugin: org.apache.cordova.inappbrowser
[phonegap] successfully removed the plugin

よく使われているプラグインはこちらにまとめられています。
http://docs.phonegap.com/en/3.5.0/cordova_plugins_pluginapis.md.html#Plugin%20APIs

Mac で英語サイトを読むときに役立つショートカット

以下の２つのコマンドはかなり使っています。

ブラウザにプラグインなどいれなくても使用できるところがメリットです。

⌘ + Control + D：選択した単語を辞書で調べる

⌘ + option + Esc：選択範囲の英文を読み上げる

単語をダブルクリックなどで選択した後、

辞書で引くと以下のように意味が出てきます。

発音を知りたいときは読み上げショートカットが便利です。

読み上げ時の声は Mac の

システム設定 → 音声入力と読み上げ

から設定可能です。

HHKB lite for Mac で明るさを調整する

これまで Apple 純正のワイヤレスキーボードを使っていたのですが、
Happy Hacking Keyboard Lite 2 for Mac に乗り換えました。

明るさの調整はデフォルトで F14, F15 に割り当てられています。
Fn キーを押しながら F14, F15 で明るさの調整ができます。

ところが購入後、キーボードを接続してドライバを入れても、
F14とF15が反応しませんでした。
ミッションコントロールなど他の機能を F14, F15 に割り当てた場合は機能するので、
キー入力自体はできているようでした。

いろいろ調べてみたところ、
結果的にデフォルトのワイヤレスキーボードを接続したままにしていたことが悪かったです。
Apple 純正のワイヤレスキーボードを接続している状態だと、
HHKB から明るさの調整ができませんでした。
使用前にワイヤレスキーボードの接続を解除し忘れないようにしましょう。

Amazon のパスワードを変える

Amazon にログインした後、
検索ボックスの右にあるアカウントサービスをクリック。

「パスワードを再設定する」をクリック。

登録したメールアドレスを入力すると、
パスワードリセット用のメールが送信される。
メール内のURLをクリックするとパスワードリセットページヘ飛べる。

気が向いたらたまに変更すると良いと思います。