2014年1月31日金曜日

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

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

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


2014年1月30日木曜日

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

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

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

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



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

2014年1月29日水曜日

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() のリファレンスの中程に具体的に書かれている。

2014年1月28日火曜日

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

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



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

2014年1月27日月曜日

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

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

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


丁度、筐体の交換が行われた「cnode-a3032」に VPS が入っていた。
サーバにログインして調べた所、2つ問題が発生していた。


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のつぶやき


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

2014年1月26日日曜日

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 でフォーマットされます。


2014年1月25日土曜日

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

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


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

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

2014年1月24日金曜日

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

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: . が _ とマッチ

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

2014年1月23日木曜日

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"> に反応する場合があるので注意。

2014年1月22日水曜日

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

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


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

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

2014年1月21日火曜日

iOS7 の音量を微妙に下げる

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



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

1の状態

まだ下がる


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

2014年1月20日月曜日

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]

2014年1月19日日曜日

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

2014年1月18日土曜日

JavaScript 一定時間後の Date を取得

1年後の 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

2014年1月17日金曜日

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

2014年1月16日木曜日

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

2014年1月15日水曜日

WordPress で空のテーマを作成

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

  • style.css
  • index.php

の2つ。

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

2014年1月14日火曜日

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

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

abc123def

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

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

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

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 ページらへん)

2014年1月13日月曜日

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

2014年1月12日日曜日

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'; <= これは認識されない

2014年1月11日土曜日

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 と同じ動き

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

2014年1月10日金曜日

jQuery Mobile でページ内リンク

jQueryMobile でページ内リンクを貼るときには data-ajax="false" を指定しないといけない。
<a href="#target_id" data-ajax="false">target へ</a>

2014年1月9日木曜日

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

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

2014年1月8日水曜日

好きな値段でインディーズゲームが買える「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



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

2014年1月7日火曜日

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;


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

2014年1月6日月曜日

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

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

エラーが出ないようにするには以下のように取得すると良い。
var now = (new Date()).getTime();

2014年1月5日日曜日

WordPress の URL を取得する

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

2014年1月4日土曜日

MacPorts のアップデート

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

$ sudo port selfupdate

2014年1月3日金曜日

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

定数 ABSPATH にセットされている。
<?php
    echo ABSPATH; // インストールされたディレクトリの絶対パス
?>

2014年1月2日木曜日

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

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

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



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


2014年1月1日水曜日

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