y.okano blog: 4月 2014

2014年4月30日水曜日

JavaScript: 画像をリロードする

JavaScript から <img> 要素の src 属性を変更すると自動的に画像が更新されます。
ただし既にセットされている src と同じものを入力しても再読込されません。
こういった場合は URL にクエリパラメータを付加すると再読み込みが行われます。
クエリパラメータはキャッシュされないように毎回異なるものをセットします。

var src = 'http://example.com/example.jpg';
$('#target_img').attr('src', src + '?' + new Date().getTime());

2014年4月29日火曜日

PHP: 別のドメインからの Ajax アクセスを受け入れる

Web システムに Ajax でアクセスできる API を作成して、
外部から利用してもらうためには HTTP のアクセスコントロールが重要になる。

HTTP access control - Mozilla Developer Network
https://developer.mozilla.org/ja/docs/HTTP_access_control

デフォルトでは別のドメインから Ajax でアクセスすることができないため、
クロスドメインの通信を許可するヘッダーを PHP から出力する。

header('Access-Control-Allow-Origin: *');

これでどのドメインからでも通信が可能になる。
* 部分を変更して特定のドメインからのみ受け付けるという設定も可能。

2014年4月28日月曜日

Mac OS X: SourceTree から新規リポジトリを作成する

ソースコードの管理には主に Git を使用しています。
Git クライアントとして Mac 版 SourceTree を使用しています。

SourceTree から GitHub などのホスティングサービス上へ、
リポジトリを作成してすぐに開発を始めることができます。

まず SourceTree を起動して、
「リポジトリを追加」ボタンをクリック。

ソースパス / URL の右側にある地球儀のアイコンをクリック。

「新規リポジトリを作成」ボタンをクリック。

ホスティングサービスを選択して、
リポジトリ名、その他設定を入力します。

リポジトリを作成ボタンを押すと、
ホスティングサービス上にリポジトリが作成されて、
リポジトリ一覧に表示されます。

あとは通常通り追加されたリポジトリをクローンして開発を始めましょう。
ホスティングサービスの設定は別途行う必要があります。

2014年4月27日日曜日

NicEdit: 非表示状態での初期化は display:none ではなく visibility: hidden で

NicEdit で画面上の <textarea> をエディタに変換する際に、
画面上に非表示の状態で変換する場合、
width: 100% となっていても幅が広がらないケースがあります。

visibility: hidden; で非表示にしている場合は幅が広がった状態で初期化されますが、
display: none; で非表示にしている場合は幅が広がりません。
エディタは変換時の <textarea> の幅で固定表示となるため、
width: 100% とする場合は visibility: hidden; で隠しておく必要があります。

デモ
http://yokano.jp/demo/nic_edit_hidden/

コード
https://github.com/yokano/nic_edit_hidden

2014年4月26日土曜日

NicEdit で幅が狭くなる対策

JavaScript の WYSIWYG エディタの NicEdit はサードパーティ製の日本語版も開発されており、MIT ライセンスで使用できるため便利です。

NicEdit ではスクリプトをロードした後に、ページ上の全ての <textarea> を WYSIWYG エディタに変換する関数を持っています。

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="path/nicEdit_ja/nicEdit.js"></script>
        <script>
            $(function() {
                nicEditors.allTextAreas();
            });
        </script>
        <style>
            textarea {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <textarea></textarea>
    </body>
</html>

この時、エディタの幅は元の <textarea> の幅と同じになるはずなのですが、
CSS で <textarea> の幅を 100% にしていても、
画面いっぱいに広がらず、狭い幅のエディタが生成されてしまう場合があります。
レンダリングの状態によって変わり、jQuery.ready() などを使っても、
解決できませんでした。

この場合は <textarea> の要素に style 属性として、
直接幅を定義することで回避できます。
nicEdit が <textarea> の style 属性を直接セットするため、
CSS で定義した幅が優先されないケースが有るため、
今のところは <textarea> の style 属性を直接指定しておくのが良いかと思います。

<textarea style="width:100%"></textarea>

NicEdit については日本語版のページよりも公式の Wiki が詳しいです。

2014年4月25日金曜日

PHP: PHP5.4 以前と PHP5.5 以降のパスワードハッシュ作成

PHP 5.5 以降では password_hash() によってパスワードハッシュを作成することができます。
PHP 5.4 以前では crypt() によってハッシュを作成することになります。

PHP.net では password_hash() の使用が推奨されているようです。

安全なパスワードハッシュ - PHP
http://www.php.net/manual/ja/faq.passwords.php

開発環境の PHP が 5.5 で password_hash() を使用していたら、
本番環境の PHP が 5.4 で動かない！！
ということになったので要注意です。

PHP: PDOでMySQLから取得した文字列が ASCII で文字化けする対処法

さくらのレンタルサーバ上で PHP の PDO で MySQL へアクセスした際に、
取得できたデータの文字コードが ASCII になってしまう問題がありました。

色々と対処法を悩んだんですが、
PDO オブジェクトを作成した際に SET NAMES を実行する方法に落ち着きました。

PHP PDO: charset, set names? - Stack Overflow
http://stackoverflow.com/questions/4361459/php-pdo-charset-set-names

PDO を作成する関数（get_pdo()など）を作成しておいて、
そこで UTF-8 を指定するようにして必ず UTF-8 で取得できるようにしました。

2014年4月23日水曜日

Bootstrap: modal の幅を変える方法

Twitter Bootstrap ではモーダルなど便利なパーツが提供されています。
モーダルはデフォルトのサイズと小さいサイズが準備されているのですが、
中に入れたいコンテンツと微妙に幅が異なっている場合があります。

今回はデフォルトサイズのモーダルで幅が足りなかったので増やしまました。

div id="edit-modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content" style="width:740px; margin-left: -70px;">
            <div class="modal-header"><strong>ヘッダ</strong></div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                フッター
            </div>
        </div>
    </div>
</div>

モーダルの白い部分は .modal-content です。
ここの幅を変えるとモーダルの幅が変わります。
モーダルは幅によって中央寄せされないので、
モーダルの幅を増やすとその分右へ伸びてしまいます。
そのため、伸びた分をネガティブマージンで戻して中央へ寄せています。

.modal-content のデフォルトの幅が 600px だったので、
600px から増やした幅の半分をネガティブマージンへ回します。
今回は 600px -> 740px へ 140px 増やしたので、
増分 140px の半分 70px を使用しています。

2014年4月22日火曜日

Mac の Excel でセル内の改行

Excel の Mac 版ではセルの中で改行するときは

option + command + Enter

で改行できる。
Windows 版と大分操作感が違ってちょっと困っています。。。

2014年4月21日月曜日

MS Office を１ヶ月無料で使用

たまに Excel のスクリプト作成などのお仕事があるのですが、
毎回 Windows に切り替えて使用しているのが少し面倒でした。

Mac 版の Office を購入しようかどうか迷っていたのですが、
ネット上では 2014 バージョンが出るのではないかという予測も多く、
決められずにいました。

調べていて見つけたのですが、
Office を期間契約で使用できる Office 365 というサービスをやっていたので
１ヶ月の無料試用を試してみました。

Office 365 | MiroSoft
http://www.microsoft.com/ja-jp/office/365/default.aspx

Mac 版も Windows 版も両方しようできます。
Windows に入っている Office も古いバージョンだったので、
最新バージョンも入れることができました。

企業向けに Web 会議やファイル共有の機能もあるようですが、
使わない人用に Office 単体のプランもあるようです。

http://www.microsoft.com/ja-jp/office/365/plan-office.aspx

製品単体プランは常に最新バージョンが使えるそうです。
上記のページによると年間契約で 1,160 円だそうです。本当かな？
１ヶ月経って無料プランが切れた時にこちらに入ろうかと思っています。

2014年4月20日日曜日

変わったライセンス WTFPL

JavaScript で使用できる WYSIWYG エディタを探していた見つけたライセンスです。
（何のソフトに付いていたのかは忘れてしまいましたが・・・）

http://ja.wikipedia.org/wiki/WTFPL

Do What The Fuck You Want To Public License の略だそうです。
要するに好きにして良いということですが、すごい名前ですね。

2014年4月19日土曜日

Twitter API: since_id = 0 にするとタイムラインが読めない

Twitter REST API 1.1 で特定のユーザのツイートを取得する場合は、GET statuses/user_timeline が使用できます。

オプションとして since_id を渡すことで、指定したツイートよりも後に登録されたツイートのみを対象として取得することができます。例えば定期的に新しいツイートを取得したいときは、以前取得したツイートの id を保存しておき、次回取得時に since_id として使用することで実現できます。

前回取得したツイートの id を保存しておくためにデータベースへツイートの id を定義しました。一番最初にツイートを取得するときにはすべてのツイートを取得したいので、ツイートの id のカラムの初期値を 0 にしていたのですが、これがエラーになっていました。

どうやら since_id として渡す id は 1 以上でなければエラーが出るようでした。id による制限を行わずにツイートを取得したいときは、since_id を渡さないか、1 を渡すようにする必要があるようです。

2014年4月18日金曜日

JavaScript: 画像本来の大きさの取得

JavaScript で画像ファイルの本来の大きさを知りたい場合は Image オブジェクトを使用する。

var img = new Image();
img.src = 'test.png';
img.onload = function() {
    console.log(this.width, this.height);
};

2014年4月17日木曜日

PHP: microtime() で現在時刻を取得

特定のユーザがアップロードしたファイルを保存する時、
他のファイルと名前が被らない名前を付けたい場合があります。

１つの方法はファイルがアップロードされた時刻をファイル名として使用することです。
PHP の microtime() は実行した時点での UNIX タイムをマイクロ秒単位で返してくれるため、アップロードされたファイルを別名にする用途でも使用できます。

PHP 5.0 以降では引数に false を渡すと float で返してくれるので、
小数点 . を外して string にして使用してみます。

// 引数を渡さない(または false を渡す)と string が２つ返る
php > echo microtime(true) . "\n";
1397745520.9725

// true を渡すと float が返る
php > echo microtime() . "\n";
0.70625400 1397745541

// . を外してファイル名として使用できる
echo str_replace('.', '', microtime(true));
13977460373602

2014年4月16日水曜日

JavaScript: 日本語対応 WYSIWYG エディタ NicEdit

CMS を作るときに WYSIWYG エディタが必要になったので探してみたところ、
MIT ライセンスで使用できるエディタとして CLEditor と NicEdit が良さそうでした。

特に NicEdit は株式会社 CMONOS によって日本語化されたバージョンが配布されていました。

NicEdit 日本語版

日本語版ではインタフェースが日本語されている以外にも、いくつか追加機能が付いているようです。今回は NicEdit 日本語版を導入することにしました。

導入方法については明日書きます。

2014年4月15日火曜日

PHP: json_decode() で連想配列にする

PHP の json_decode() を使用すると JSON 形式の文字列を、
オブジェクトへ変更することができます。

この時、第２引数に ture を渡すと、
配列形式へ変換することができます。

$ php -a
php > $json = '{"name": "y.okano", "like": ["curry", "game"]}';
php > var_dump(json_decode($json));
class stdClass#1 (2) {
  public $name =>
  string(7) "y.okano"
  public $like =>
  array(2) {
    [0] =>
    string(5) "curry"
    [1] =>
    string(4) "game"
  }
}
php > var_dump(json_decode($json, true));
array(2) {
  'name' =>
  string(7) "y.okano"
  'like' =>
  array(2) {
    [0] =>
    string(5) "curry"
    [1] =>
    string(4) "game"
  }
}

参考
json_decode | PHP
http://jp1.php.net/manual/ja/function.json-decode.php

2014年4月14日月曜日

.jpg の MIME Type は image/jpeg

HTML 5 で <input type="file"> の accept 属性に MIME Type を指定すると、特定の種類のファイルだけを受け付けることができます。

.jpg ファイルの場合は image/jpeg となります。
image/jpg と書いてしまうと動かないので要注意です。

<!-- うごく -->
<input type="file" accept="image/jpeg">

<!-- うごかない -->
<input type="file" accept="image/jpg">

参考
MIMEタイプ一覧 | TNK HomePage
http://www.geocities.co.jp/Hollywood/9752/mime.html

2014年4月13日日曜日

Mac OS X Mavericks へ複数バージョンの Java をインストール

Mac に Java 1.7 が入っていたのですが、インディーズゲームの Java プログラムを動かした際に以下のエラーが出て起動できませんでした。

Could not get the JAWT interface

ネットで教えてもらった情報によると古いバージョンの Java でなければ動かない時に出てくるエラーのようです。
そこでゲームの起動用に Java 1.6 もインストールしました。

まず Apple のサイトから Mac 用の Java 1.6 を落とします。
http://support.apple.com/kb/DL1572

そのままインストールします。
Java 1.7 はそのまま残るので大丈夫です。

Java 1.6 は以下のパスへインストールされます。
/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Commands/java

~/.bash_profile
にて Java 1.6 のコマンドのエイリアスを作成します。

alias java6='/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Commands/java'

Java 1.6 のコマンド名を変えてパスを通す方法でも大丈夫です。
上記のエイリアスによって、
java で Java 1.7 が、 java6 で Java 1.6 が動くようになります。
対応しているバージョンに合わせて実行するコマンドを変えて下さい。

$ java -version
java version "1.7.0_06"
Java(TM) SE Runtime Environment (build 1.7.0_06-b24)
Java HotSpot(TM) 64-Bit Server VM (build 23.2-b09, mixed mode)

$ java6 -version
java version "1.6.0_65"
Java(TM) SE Runtime Environment (build 1.6.0_65-b14-462-11M4609)
Java HotSpot(TM) 64-Bit Server VM (build 20.65-b04-462, mixed mode)

参考
Java SE 6 | hirooka.pro
https://hirooka.pro/?p=85

2014年4月12日土曜日

WordPress：Redirection でサイト引っ越し

WordPress でリダイレクトの設定ができるプラグインに Redirection がある。
Redirection ではサイト移転ように 301 リダイレクトを設定することができる。

移転前の URL が検索エンジンや Web ページから参照されている場合、
できるだけリダイレクトによって移動するようにしておくべきである。

Redirection では正規表現を使って、
URL の特定部分をリダイレクト先の URL へ組み込むことができる。
これを使用するとページ単位で異なる URL へ振り分けることが可能。
.htaccess や Apache の設定ファイルを書き換える必要が無いため、
手軽に利用できる。

2014年4月11日金曜日

MySQL：予約語と同じテーブル名はバッククォートで囲む

MySQL でテーブル名やカラム名が MySQL の予約語と同じ場合、
そのまま書くとエラーとなって実行することができない。

例えば group という名前のテーブルからデータを読み出す場合、
そのまま書くと文法エラーになる。

SELECT * FROM group;

You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'grom group' at line 1

MySQL の予約語ではなく識別子であることを示す場合は
`` で囲む必要がある。

SELECT * FROM `group`;

テーブル名やカラム名には予約事被らないようにプリフィックスを付加するか、
識別子は全て `` で囲むようにすれば回避できる。

2014年4月10日木曜日

Mac OS X：メモ帳へ HTML をコピー

Mac 標準のメモ帳は HTML をそのままの見た目でコピペすることができる。
EverNote っぽい使い方も可能。

テキストでコピーしたいときは option + command + shift + v でコピーする。

2014年4月9日水曜日

PHP：OAuth 関数群で Twitter 認証　その５

前回はアクセストークンを取得したのでこれを使って API を実行します。
今回は Twitter の REST API の中の users/show を使ってユーザ情報を取得してみましょう。

$oauth = new OAuth();
$oauth->setToken($token, $secret);
$result = $oauth->fetch('https://api.twitter.com/1.1/users/show.json', array('user_id'=>$id), OAUTH_HTTP_METHOD_GET);
$response = $oauth->getLastResponse();
$response = json_decode($response);
var_dump($response);

まず、アクセストークンと API シークレットを OAuth オブジェクトへセットします。
次に fetch() メソッドで API を実行した後、getLastResponse() で実行結果を取得します。
Twitter からは JSON 形式のデータが返ってくるので json_decode() でデコードします。
これでユーザの画像やプロフィールなどの情報を取得することができます。
その他の API も fetch() メソッドを使って実行することができます。

2014年4月8日火曜日

PHP：OAuth 関数群で Twitter 認証　その４

前回はユーザの許可を得て認証済みリクエストトークンを取得するところまでやりました。
今回は認証済みリクエストトークンとアクセストークンを交換するところまでやります。
アクセストークンがあれば Twitter API を使用してユーザの情報を取得したり、操作することができるようになります。

下の図では３つ目の処理に当たります。

認証済みリクエストトークンを取得したら、アクセストークンと交換します。
アクセストークンを取得するには getAccessToken() 関数を使用します。

// 認証済みリクエストトークン
$token = $_GET['oauth_token'];

// トークンをセット
$oauth->setToken($token, $config['twitter_api_secret']);

// アクセストークンと認証済みリクエストトークンと交換する
$accessToken = $oauth->getAccessToken('https://api.twitter.com/oauth/access_token');

getAccessToken() を実行するために setToken() で、
認証済みリクエストトークンと、API キーをセットする必要があります。

続きます。

2014年4月7日月曜日

PHP：OAuth 関数群で Twitter 認証　その３

前回は Twitter から未認証リクエストトークンを取得するところまでやりました。
今回はユーザの許可を得る部分をやります。

OAuth では ID やパスワードを使った認証部分を Web サービスに任せたまま、
ユーザデータを外部から使用することができます。
Twitter の場合だとユーザ情報を取得したりツイートしたりすることができます。
そのため、必ずユーザへどのようにデータを使用するかを説明したうえで、
ユーザデータを使用する許可を得なければなりません。

Twitter の場合は上のようにお馴染みの画面で許可を得ることができます。
未認証リクエストトークンを GET パラメータとして付加して、
Twitter の認証ページヘリダイレクトすればよいです。

// リクエストトークンの取得
$tokens = $oauth->getRequestToken('https://api.twitter.com/oauth/request_token');

// Twitter 認証ページヘリダイレクト
http_redirect('https://api.twitter.com/oauth/authorize', array('oauth_token' => $tokens['oauth_token']));

// リダイレクトは以下でもOK
header('Location: https://api.twitter.com/oauth/authorize?oauth_token=' . $tokens['oauth_token']);

リダイレクトには http_redirect() を使用していますが、header() でもよいです。
これによって上の画像のように認証ページヘジャンプします。

認証が完了すると Twitter へ登録したコールバック URL へ戻ってきます。
コールバックされた時に GET パラメータへ設定されている oauth_token が、
認証済みのリクエストトークンなので、コールバック先の PHP で取得します。
ユーザが許可しなかった場合には danied パラメータが付加されるので
こちらもチェックしておきます。

// ツイッターへのログイン失敗
if(isset($_GET['denied'])) {
    echo '許可がおりませんでした';
} else {
    $token = $_GET['oauth_token'];
}

次回へ続きます。

2014年4月6日日曜日

PHP：OAuth 関数群で Twitter 認証　その２

前回に引き続き PHP の OAuth モジュールで Twitter API を使用する方法です。

Twitter API 使用までの流れを再確認しておきます。

まず最初に API key と API secret を渡して、
未認証リクエストトークンをもらいましょう。

$oauth = new OAuth($config['twitter_api_key'], $config['twitter_api_secret']);
$tokens = $oauth->getRequestToken('https://api.twitter.com/oauth/request_token');
echo 'リクエストトークンは：' . $tokens['oauth_token'] . 'です';

OAuth クラスのコンストラクタに API キーと API シークレットを渡して、
OAuth オブジェクトを作成します。

OAuth クラスにはリクエストトークンをもらうための関数として
getRequestToken() が定義されているのでこれを使用しましょう。
リクエストトークンを受け取るための URL は Twitter Developers で公開されています。

リクエストトークンは getRequestToken() が返してくれる連想配列内に、
'oauth_token' というキーで格納されています。

続きます。

2014年4月5日土曜日

PHP：OAuth 関数群で Twitter 認証　その１

PHP から Twitter API を使用する場合、いくつかの専用ライブラリが公開されています。
今回はそれらを使用せず、PECL 上で公開されている OAuth 拡張モジュールを使用してみます。OAuth 拡張モジュールは OAuth コンシューマ側のみではなくプロバイダ側も書くことができます。今回はコンシューマとして Twitter へアクセスします。

まずは Twitter Developers からアプリの API key と API secret をメモしておきましょう。

config.php などを作って PHP から参照できるようにしておきます。

<?php
/**
 * config.php
 */
$config = array();
$config['twitter_api_key'] = '*********************';  // Twitter のコンシューマキー
$config['twitter_api_secret'] = '********************************';  // Twitter のコンシューマシークレット
?>

Tiwtter で使用されている OAuth1.0a の流れを確認しておきましょう。
（現在アプリ単位での認証は OAuth2.0 が使われるようです）

まず最初に、Twitter から発行された API key と API secret を使って Twitter からリクエストトークンを取得します。事前に Twitter へアプリを登録しておけば特に何もせずに発行されます。

続いて取得したリクエストトークンを付加して Twitter の認証ページヘリダイレクトします。「このアプリがあなたのデータへアクセスすることを許可しますか？」というおなじみの画面です。ここでユーザが許可することによって、認証済みのリクエストトークンを付加した状態でアプリへリダイレクトされます。

認証済みのリクエストトークンが手に入ったら API を使用するためのアクエストークンを取得します。これは認証済みのリクエストトークンと引き換えに入手することができます。

アクセストークンが手に入ったら Twitter API を使って、ユーザのデータを取得したり操作することができるようになります。

具体的なコーディングは次回へ続きます。

2014年4月4日金曜日

Xcode：Windows 用のテキストファイルを作成

Mac と Windows では改行コードが異なるため、Mac のテキストエディタで作成したファイルを Windows のメモ帳で開いたりすると、改行されずに横に長い文になってしまいます。

Mac は LF
Windows は CR+LF

Mac から Windows へ単純なテキストファイルを送る場合は、文字コードだけではなく改行コードも変更しておいたほうが良いです。

ほとんどのエディタでは改行コードの変換が可能ですが、今回は Xcode を使った場合です。

Xcode でファイルを開いた状態で option + command + 0 を押してユーティリティを表示します。

Text Setting 欄の Text Encoding で文字コードを、 Line Ending で改行コードを指定できます。ファイルを Windows へ送る場合は、文字コードを Shift JIS、改行コードを CRLF へ変更すれば問題ありません。

2014年4月3日木曜日

jQuery：ページ表示後に追加された要素へのイベントバインド

jQuery でイベントをバインドするときに以下のように書いていたとする。

$('.target_class').on('click', function() {
    alert('target_class がクリックされました');
});

この場合、以下のように新しくページヘ追加された要素は反応しない。

$('body').append($('<button class="target_class">押してね</button>'));

ページに新しく追加された要素も含めてイベントをバインドしたいときは、
以下のように doument へバインドする。

$(document).on('click', '.target_class', function() {
    alert('target_class がクリックされました');
})

2014年4月2日水曜日

ChatWork：新着メッセージの通知

仕事で ChatWork を使用する場合があるのですが、未読メッセージのメール通知が１時間毎にしか行ってくれないため、素早く返事をすることができませんでした。ブラウザで ChatWork のページを開きっぱなしにしておくと通知してくれる機能があったため、現在は常にブラウザで開きっぱなしで作業しています。

まず、画面右上の自分のアイコンをクリックして「動作設定」を選択します。

通知設定タブで

- デスクトップ通知を有効にする
- メッセージ内容をデスクトップ通知に表示する
- 新しいメッセージが届いたらサウンドを鳴らす

を ON にします。

これでメッセージが来た時に音声が鳴って、画面上に通知が表示されるようになります。常に開きっぱなしにしなければならないので少々不便ですが、ChatWork を使用する場合は設定しておくべきかと思います。

2014年4月1日火曜日

PHP：公式サイトが回る

エイプリルフールのネタで PHP の公式サイトが回っています。
http://www.php.net

邪魔ですｗ