Xcode: コードのインデントを整える

インデントがずれているコードを修正する方法。

⌘ + A でコードを全選択する。
Contrl + I で自動インデントする。
または Editor > Structure > Re-Indent を選択。

Xcode: 文字コードを指定して再読み込み

Windows で作成されたファイルをもらったときに
Shift-JIS でエンコードされている場合がある。
Xcode から文字コードを指定して読みなおすことができる。

ファイルを開いた状態で ⌘ + ⌥ + 1 でファイルユーティリティを開く。
（または View > Utilities > Show File Inspector で開く）

Text Settings の Text Encoding で文字コードを指定できる。
Shift-JIS であれば Japanese (Windows, DOS) を選べば良い。

ダイアログが表示されるので Reinterpret を押して再読込すると、
指定した文字コードでファイルを読みなおすことができる。

jQuery: attr() でチェックボックスが ON / OFF できない

jQuery でチェックボックスの ON / OFF を切り替える際に、
attr() ではなく prop() でなければ動かなかった。

attr() で checked 属性を操作すると最初の ON / OFF は動くものの、その後反応がなくなる。
prop() の場合は何度でも ON / OFF できる。



jQuery 1.6 から .attr() は checked, selected, disabled などのプロパティを undefined で返すため、.prop() を使用する必要がある。

.attr() - jQuery
http://api.jquery.com/attr/

.prop() - jQuery
http://api.jquery.com/prop/

.attr() と .prop() のリファレンスの中程に具体的に書かれている。

HTML: テキストフォームの入力文字数制限

<input> 要素の maxlength 属性で入力できる文字数制限を設定できる。



the maxlength attribute - W3C
http://www.w3.org/TR/html5/forms.html#the-maxlength-attribute

サーバ: ConoHa VPS で障害が発生

ConoHa VPS 上で動かしていた Web アプリへアクセスできなくなったため、
調査した所、ConoHa で障害が発生し、サーバの再起動や筐体の交換が行われた模様。

01/20～01/23にかけての障害発生に関して - ConoHa VPS
http://www.conoha.jp/news/1200.html

丁度、筐体の交換が行われた「cnode-a3032」に VPS が入っていた。

サーバにログインして調べた所、２つ問題が発生していた。

1. iptables の設定が初期化されていた

http でアクセスできなくなっていた。こちらは再設定した。

2. mysqld が起動できない

"Another MySQL daemon already runnning with the same unix socket."

というメッセージを出力して起動に失敗しする。

こちらのブログを参考に mysql ソケットを別名に変えてみたところ起動できた。

MySQL が「Another MySQL daemon already running with the same unix socket.」というエラーを出力して起動しなくなった - あるSEのつぶやき

http://fnya.cocolog-nifty.com/blog/2013/12/mysql-another-m.html

他の筐体でも影響が出ているものがあるようなのでチェックが必要と思われる。

Windows7: FAT32 フォーマット

PS3 の torune 用に USB 外付け HDD をフォーマットする。
PS3 で使用する HDD はフォーマットを FAT32 にする必要がある。
Windows 7  では外付け USB HDD のフォーマットは exFat または NTFS しか選択できない。
そこでフリーソフトの Fat32Formatter を使ってフォーマットする。

Fat32Formatter - トキワ個別教育研究所
http://tokiwa.qee.jp/download/Fat32Formatter/Fat32Formatter.html

ツールを起動後、ハードディスクを選択。
未割当領域をクリックした後「開始ボタン」を押せば FAT32 でフォーマットされます。

Mac: テキストエディットで .txt ファイルを作成

Mac OS X のテキストエディットではデフォルトで .rtf ファイルを作成する。
しかし実際のところは .txt の方がよく使う。
環境設定から .rtf ではなく .txt を作成するように変更できる。

テキストエディット > 環境設定
「標準テキスト」を選択する

これで .txt が作成されるようになる。

JavaScript: RegExp の中で \ や ¥ は２回書く

JavaScript の正規表現オブジェクトでは、
正規表現で予約されている記号を \  や ¥ でエスケープする必要があります。

var regEscape = /y\.okano/;
var regNoEscape = /y.okano/;
var name = 'y_okano';

console.log(regEscape.test(name));  // false
console.log(regNoEscape.text(name));  // true: . が _ とマッチ

上のコードのようにリテラルで生成する場合は問題無いですが、
以下のコードのようにコンストラクタから生成する場合は、
引数として渡す文字列の中で \ や ¥ がエスケープ文字として処理されるので、
文字列としてのエスケープ用と、正規表現としてのエスケープ用に、
\ や ¥ を２回連続で書く必要があります。

var regEscape = new RegExp('y\\.okano'); // => /y\.okano/ と同じ
var regNoEscape = new RegExp('y\.okano'); // => /y.okano/ と同じ

console.log(regEscape.test(name));  // false
console.log(regNoEscape.text(name));  // true

RegExp についてはこちら
RegExp - Mozilla Developer Network
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp

JavaScript: form で Enter キーによる送信キャンセル

フォーム内の <input type="text"> で
Enter キーを押した時に送信をキャンセルする方法。

var form = $('#target_form');
form.find('input[type=text]').on('keydown', function(event) {
    if(event.keyCode == 13) {
        return false;
    }
});

キャンセルは対象のフォーム内の <input type="text"> にだけ絞る。
window などに対して設定すると同じページにある <textarea> や
別のフォームの <input type="text"> に反応する場合があるので注意。

JavaScript：配列から重複要素を削除

配列内で重複している要素を削除するサンプル


Array.prototype.indexOf() で重複しているか確認している。

Array.prototype.indexOf() - Mozilla Developer Network
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

iOS7 の音量を微妙に下げる

iPad 第3世代に iOS7 を入れて使用しているのですが、静かな場所で使用しているときは音量ボタンで音量を１に設定してもちょっとうるさいと感じる場合があります。しかし０に下げると音量が消えてしまい、ちょうどいいところに設定できません。

０と１の間の微妙な音量はコントロールセンターから設定できます。画面下から上へスワイプしてコントロールセンターを出し、音量バーを直接操作すると、少しだけ音量を下げることができます。これで０と１の間の微妙な音量を設定できます。

１の状態

まだ下がる

ただし音量ボタンを操作するとまた元に戻ります。

JavaScript: 配列の要素を削除

インデックスを使って配列の要素を削除する場合は Array.splice() を使う。

Array.splice - Mozilla Developer Network
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

var array = [1, 2, 3, 4];
array.splice(2, 1);  // array[2] から 1 つの要素を削除
console.log(array);  // [1, 2, 4]

JavaScript Cookie を読み書きするコード

Mozilla Developer Network でクッキーを扱うためのフレームワークが公開されている。
https://developer.mozilla.org/ja/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support

クッキーの読み書きや削除が簡単にできる
setItem() で有効期限として Inifinity を渡すと自動的に 2038 年をセットしてくれたりする

Infinity - Mozilla Developer Network
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity

JavaScript 一定時間後の Date を取得

１年後の Date を求めるなら 1 行で書くとこんな感じ

var nextYear = new Date(Date.now() + 1 * 365 * 24 * 60 * 60 * 1000);

まず現在時刻を取得（1970 年 1 月 1 日から現時刻までのミリ秒）

Date.now()

次に経過時間をミリ秒で加算
1 年間を経過させる場合は以下のようにする

Date.now() + 1 * 365 * 24 * 60 * 60 * 1000

Date のコンストラクタに加算したミリ秒を渡してオブジェクトを作成する

var nextYear = new Date(Date.now() + 1 * 365 * 24 * 60 * 60 * 1000);

Date についてはこちらを参照

Date - Mozilla Developer Network
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

PHP と short_open_tag

PHP で HTML 内へ変数の内容を簡単に出力する方法として、以下の様な書き方がある。

<?= $variable ?>

これは PHP の short_open_tag を使ったものであり、
php.ini で short_open_tag が有効になっていないと動作しないので注意。

ただし、PHP 5.4 では <?= ... ?> は常に有効。

short open tag - PHP
http://www.php.net/manual/ja/ini.core.php#ini.short-open-tag


参考

php5.4からshort_open_tagがデフォルトでONになった - Qiita
http://qiita.com/ogawashoutarou/items/5ca7a85e8f85cf7dc7a1

PHP 5.4 からショートタグの <?= が常に使えるようになりました - Sarabande.jp
http://blog.sarabande.jp/post/6064807032

JavaScript で最後までスクロールしたかを調べる

利用規約など最後までスクロールしなければ次へ進めない機能を実装する。
scrollTop, scrollHeight を使用して検出できる。

scrollTop : スクロール可能な領域の上端から現在表示している領域の上端までの距離
scrollHeight : スクロール可能な領域全体の高さ
それに jQuery などで取得した表示領域の高さ height を組み合わせる。

scrollTop はスクロールとともに増加する。
一番下までスクロールされると scrollTop と height の合計値が scrollHeight に一致する。

計算は要素がスクロールされている間、発生し続ける scroll イベントを使う。

$('element').on('scroll', function() {
    console.log('スクロールされています');
});

以下が動作するサンプル。



scrollHeight は padding を含むが margin を含まないため、jQuery の outerHeight() で取得した高さを使用するのが良い。

スクロールの仕様についてはこちら
CSSOM View Model - W3C
http://www.w3.org/TR/cssom-view/#extensions-to-the-element-interface

WordPress で空のテーマを作成

WordPress で空のテーマを作成する。
テーマに最低限必要なのは

• style.css
• index.php

の２つ。

style.css はテーマ全体で使用するスタイル。

index.php で HTML を生成する。

style.css の先頭にコメントでスタイルの情報を記述する。

ここではテーマ名だけを指定する。

/*
Theme Name: 空のテーマ
*/

index.php ではサイトに表示される HTML を記述。

空のテーマです

style.css と index.php を 1 つのディレクトリに入れて、

wordpress/wp-content/themes/

の中に設置すればテーマのインストールは完了。
（今回は empty_theme というディレクトリ名にまとめた）

themes ディレクトリ内にテーマファイルを設置したら、
WordPress の管理画面からテーマを有効化できる。

テーマを有効化するとサイトへ index.php の内容が表示される。

ここから色々ファイルを追加してテーマを作成できる。

テーマ開発の詳しい情報は以下を参照。

Theme Development - WordPress Codex

http://codex.wordpress.org/Theme_Development

JavaScript の replace に関数を渡して複雑な置換をする

replace() の第２引数に関数を渡すことでマッチした部分を使用した置換ができる。
例えば

abc123def

の数値部分に <span class="number"> を付けたい場合は

var target = 'abcdefg12345hijklmn';
target.replace(/[0-9]+/, function(p1) {
    return '<span class="number">' + p1 + '</span>';
});

第２引数に渡す関数の引数としてマッチした文字列が渡される。
() を使えば一致した複数のパターンを取得して置換に使用することができる。

JavaScriot: Array.forEach() で配列をループする

JavaScript では配列の各要素にループしながらアクセスする際、
以下のように書くことがある。

var array = [1, 2, 3];
for(var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

しかし for ループではカウンタに使用している変数 i が、
外からアクセスできてしまう。

そこで Array.forEach() を使って以下のように書ける。

var array = [1, 2, 3];
array.forEach(function(val) {
    console.log(val);
});

関数を渡すため外部に変数を出さずにループを回すことができる。

古いブラウザでは Array.forEach() が定義されていないため、
以下のコードを読み込んでから使用すると良い。

forEach - Mozilla Developer Network
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Compatibility

Array.forEach() は ECMAScript Edition 5 に取り入れられて標準化されている

ECMAScript Documentation - ECMAScript
http://www.ecmascript.org/docs.php
(Edition 5.1 の 136 ページらへん)

WordPress で定期的に処理を実行

サーバで定期的に処理を実行する場合は cron がよく使用されます。WordPress のプラグインから cron と同じように定期的に処理を行なう機能があり。wp-cron です。

wp-cron はサイトへ HTTP アクセスがあった時に、指定された時刻を過ぎていれば処理を実行するため、実際には定期的に処理が行われているわけではありません。しかし、crontab コマンドが使用せずにプラグインから登録できるため便利です。

プラグインを有効化した際に wp_schedule_event() でタスクを登録し、プラグインを無効化した際に wp_clear_scheduled_hook() でタスクを削除します。タスクを削除しないと重複していくつもタスクが登録されてしまうので注意が必要です。

例えば 1 日 1 回アクセスログの更新をするような処理の場合、以下のようになります。

// 1日1回、閲覧数の更新をする
register_activation_hook(__FILE__, 'update_access_activation');
function update_access_activation() {
 wp_schedule_event(time(), 'daily', 'update_access_log');
}
add_action('update_access_log', 'cm_update_access_log');

register_deactivation_hook(__FILE__, 'update_access_deactivation');
function update_access_deactivation() {
 wp_clear_scheduled_hook('cm_update_access_log');
}

詳細はこちらから
Function Reference/wp_schedule_event - WordPress.org
http://codex.wordpress.org/Function_Reference/wp_schedule_event

PHP で改行コード

PHP で改行コードを含む文字列を扱う場合はダブルクォートで囲む。シングルクォートで囲んだ場合はエスケープシーケンスとして解釈されない。

メールのヘッダを複数行作成する場合などにシングルクォートで書いてしまうとヘッダが正しく読み込まれないので注意。

$header = "From: sample@sample.com\r\n";
$header .= "Bcc: sample_bcc@sample.com\r\n";
// $header .= 'Bcc: sample_bcc@sample.com\r\n'; <= これは認識されない

IE6~8 で background-size を使う

jQuery プラグインの backgroundSize.js を使用すると、
 IE 6 ~ 8 で background-size と同じ動作をさせることができるようになる。

jquery backgroundSize.js
http://louisremi.github.io/jquery.backgroundSize.js/demo/

jQuery をロードした後に backgroundSize.js をロードして、
対象の要素へ以下のように background-size を指定すれば良い。

$('#target_element').css({backgroundSize: contain}); // background-size: contain と同じ動き
$('#target_element').css({backgroundSize: cover});  // background-size: cover と同じ動き

後から古いブラウザへ対応させなければならない場合に重宝します。

jQuery Mobile でページ内リンク

jQueryMobile でページ内リンクを貼るときには data-ajax="false" を指定しないといけない。

<a href="#target_id" data-ajax="false">target へ</a>

投稿時刻を 24:00 までへ変更します

毎日 18:00 更新しておりましたが、
お仕事の関係で間に合わない場合が増えてきたので、
1 日 1 本 24:00 までに変更します。

好きな値段でインディーズゲームが買える「Humble Indie Bundle X」がリリース

好きな値段でゲームを買うことができる Humble Bundle シリーズとして Humble Indie Bundle Xがリリースされました。

今回同梱されているのは以下のゲームです。

To The Moon


Joe Danger 2: The Movile

Papo & Yo


Runner 2: Future Legend of Rhyth...


Reus


Surgeon Simulator 2013



このラインナップは買いですね・・・。

MySQL の文字コードを UTF-8 に統一する

WordPress プラグインから MySQL へ日本語を書き込もうとした際に以下のようなエラーが出現。

WordPress database error: [Incorrect string value: '\xE3\x82\xAD\xE3\x83\xBC...' for column ...]

原因は MySQL の文字コードが一部 latin1 となっていたため。

まず、MySQL の設定ファイルでデフォルトの文字コードを UTF-8 に設定する。
Cent OS の場合、

# vi /etc/my.cnf
[mysqld]
character-set-server = utf8

既に設定されている文字コードも変更。

# mysql -u root -p
[パスワード]

mysql> show variables like 'character%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8                       |
| character_set_connection | utf8                       |
| character_set_database   | latin1                     |
| character_set_filesystem | binary                     |
| character_set_results    | utf8                       |
| character_set_server     | latin1                     |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+

mysql> set character_set_database = utf8;
mysql> set character_set_server = utf8;
mysql> show variables like 'character%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8                       |
| character_set_connection | utf8                       |
| character_set_database   | utf8                       |
| character_set_filesystem | binary                     |
| character_set_results    | utf8                       |
| character_set_server     | utf8                       |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+

mysql> quit;

以上で日本語でも書き込めるようになった。

IE8 で Date.now() は動かない

JavaScript で現在時刻を求める際に Date.now() を使っていたが、
IE8 でエラーが出ていた。

エラーが出ないようにするには以下のように取得すると良い。

var now = (new Date()).getTime();

WordPress の URL を取得する

WordPress のプラグインから URL を取得するには site_url() を使う。

echo 'この WordPress の URL は ' . site_url();

MacPorts のアップデート

selfupdate で MacPorts 自身をアップデートできる。
root 権限必要。

$ sudo port selfupdate

WordPress プラグインから WordPress のインストールディレクトリを取得

定数 ABSPATH にセットされている。

<?php
    echo ABSPATH; // インストールされたディレクトリの絶対パス
?>

iOS 7 の Safari で英単語の意味を調べる

iOS の Safari で英単語の意味を調べる方法。

調べたい単語をタッチしたままにして選択状態にする。
単語の上にポップアップが出現するので「辞書」を選択。

英単語の意味が表示される。
使用する辞書は設定にて変更可能。
国語辞典を設定すると日本語の意味なども調べることができる。

CSS でフォントファイルを参照する

@font-face 構文でサーバ上のフォントファイルを参照できる。
クライアント側のフォントファイルに影響されないため、
フォントも指定したい場合に使える。

/* CSS */
@font-face {
    font-family: ZnikomitNo25;
    src: url("ZnikomitNo25.otf");
}

h1 {
    font-family: ZnikomitNo25;
}

@font-face 内で font-family 名とフォントファイルのパスを指定し、
フォントを変えたい要素に、設定した font-family 名を指定すればよい。

使用したフォント

ZnikomitNo25
http://www.1001freefonts.com/znikomit_no_25.font


参考

@font-face - MDN
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face