SonicNotes

プログラミングのメモ帳。

[sonicnotes-blog]

MediaElement.js で動画再生の準備完了を検知する

MediaElement.js で動画再生の準備が整った事を検知する。 調べていくと次のような事がわかった。

オプションの success はプラグインなどの準備が成功しただけ

諸々の機能は success 以降でないと使えない

つまり success の中で "loadedmetadata" イベントのハンドラを設定することになる

Flashのフォールバックは load() をしてもうまく動かない。 play() → pause() でようやくイベント等が動くようになる。

var player = new MediaElementPlayer("#my-video", { success: function(media, ele){ media.addEventListener( "loadedmetadata", $.proxy($.fn.trigger, $(ele), "ready"), false ); if((/VIDEO/i).test(media.nodeName)){ media.load(); } else { media.play(); media.pause(); } } }); player.$media.on("ready", function(){ console.log("movie ready !"); });

Flash の場合は引数の media と ele は別の物になる。 player.media は media をさすけど、それで trigger しても発火しなかった。 ので、$(ele) で "ready" イベントを発火させた。

[sonicnotes-blog]

Apache2.4で "client denied by server configuration" が出たら

2.4 で Order ディレクティブが Require ディレクティブに変更された。 これを指定していないとこのエラーが出てアクセスしても 403 が返される。

<Directory /the/path/to/docroot> Order allow,deny Allow from all </Directory>

これが2.2までの古い書き方。2.4では、次のようにしなければならない。

<Directory /the/path/to/docroot> Require all granted </Directory>

mod_authz_core - Apache HTTP Server

例えばある特定のIP等からのアクセスを制限したい場合は こんな感じになるようだ。

<RequireAll> Require all granted Require not ip 1.1.1.1 </RequireAll>

RequireAll でグループ化して、not で指定を反転させられる。 RequireAny とかもある。

[sonicnotes-blog]

SSHの鍵認証がうまくいかないときはパーミッションが怪しい

.ssh も authorized_keys も他者に見られないパーミッションにしておく必要がある。 例えば .ssh は700、authorized_keys は600にするなど。

ログインできなかったらとりあえずログを見てみると何かわかるかも。

tail- f /var/log/secure

[sonicnotes-blog]

Facebookのfeedで大きなpictureを取得する

feed で渡されるpictureは小さいサイズなので、大きなサイズのものが欲しい場合は、/[object_id]/picture で引いてくる。

PHPのSDKでの例。

$res = $fb->api("/[id]/feed", "GET"); foreach($res["data"] as $item){ if( array_key_exists("picture", $item) && array_key_exists("object_id", $item)){ $item["large_picture"] = sprintf( "https://graph.facebook.com/%s/picture", $item["object_id"] ); } }

[sonicnotes-blog]

JSの動的なスクリプトローダーとレガシーIE

複数のスクリプトを読み込む時は、script要素のasyncがサポートされているかが鍵になる。サポートされているならばasyncをfalseにしてDOMに突っ込めば、同期的に読み込んでくれる。

IEがasyncをサポートするのは10からなので、それより古い物は自前で同期の処理を書かないといけない。

cf) On Script Loaders | getiblog

参考ページによれば、IEはcreateElementをしてsrcを設定しても、 DOMに追加しなければ中身の処理は走らないが、readystatechangeイベントは発火するようになっている。

// IE7-9用 var el = document.createElement("script"); el.attatchEvent("onreadystatechange", function(e){ // IE7-8は引数のイベントオブジェクトから要素を辿れなかった console.log(el.stateChange); // "loaded" など }); el.src = "foo.js";

これを利用して、スクリプトがすべて読み込まれるのを待って、 すべてloadedになったらDOMに追加してあげれば動くはず。

コードで説明すると、こんな。

var scripts = ["foo.js", "bar.js", "baz.js"]; var count = scripts.length; var nodes = []; var createNode = function(url){ var node = document.createElement("script"); node.attachEvent("onreadystatechange", function(){ process.apply(node, arguments); }); node.src = url; return node; }; var process = function(){ if(this._loaded){ return; } // "complete" はDOMに配置しないと発火しない？ if(this.readyState !== "loaded"){ return; } count -= 1; this._loaded = true; if(! count){ append(); } }; var append = function(){ var head = document.getElementsByTagName("head")[0]; for(var i=0; i<nodes.length; i++){ head.appendChild(nodes[i]); } }; for(var i=0; i<scripts.length; i++){ nodes.push(createNode(scripts[i])); }

これはレガシーIEでしか動かないコードなので注意。 JSファイルの中身が短かったりすると、同期的にやらなくても動いてしまうことがあるのでこれも注意。

おまけ

asyncをサポートしているかどうかの確認。

var supportAsync = document.createElement("script").async !== undefined;

IE10さんはasyncが使えるみたい。

もし同期をとる以外にスクリプトの読み込み完了をトリガにして何かしたいのだったら、IE10さんは他の環境と同様にloadイベントを使った方が良さそう。readystatechangeを使うと同期の処理もあいまってややこしくなる。

ちなみにIE10でreadystatechangeイベントでreadystateが"loaded"のタイミングで何かしようとすると中身のスクリプトはまだ完了してない様子なので注意。"complete"を待つか、loadイベントを使う。

[sonicnotes-blog]

$.fn.css で第二引数に空白を渡すとリセットできる

$(ele).css("display", ""); // style属性内のdisplay指定が削除される

null とか渡してもダメだから出来ないかと思って書いてしまった…

$.fn.initStyle = function(/* name1, name2, name3 ... */){ var args, regex; args = $.map([].slice.call(arguments), function(value){ return value.replace("-", "\\-"); }); regex = new RegExp("(" + args.join("|") + ").+?(;|$)", "ig"); return this.attr("style", this.attr("style").replace(regex, "")); };

エクササイズになったからいいや。

[sonicnotes-blog]

IE8でargumentsにfor-inは使えない

IE8 (Win7@仮想マシン）で動かなかった。7とか9とかはチェックしていない。

var foo = function(){ var i; for(i in arguments){ ... } };

とかやってもウンともスンとも言いません。大人しく普通に

for(i=0; i<arguments.length; i++){ ... }

とかするか、配列に変えてしまう。

var args = [].slice.call(arguments);

arguments は配列に似ているけど決して配列ではなく、あくまでも「配列っぽい何か」なので、注意。不思議っ子。

[sonicnotes-blog]

Script要素のasyncの初期値

既に配置されているscript要素と、createElementで動的に生成した要素とで違う模様。

省略時の初期値は、前者はfalse, 後者はtrueになる。

<script id="foo" src="foo.js" ></script> <script> var a = document.getElementById("foo").async; // false var b = document.createElement("script").async; // true </script>

cf) script - HTML | MDN

[sonicnotes-blog]

CentOS の nginx+Apache2のリバースプロキシをもう少しがんばる

前回は仮想でゆるゆるでキャッシュもしない設定だったので、もうすこしマシに。

nginx の設定

設定は conf.d/default.conf に記述していく。

まずはキャッシュのキーゾーンとかパスの設定を。

proxy_cache_path /var/cache/nginx/http levels=1:2 keys_zone=http:10m; proxy_temp_path /var/cache/nginx/temp;

キーゾーンに使った名前 "http" はあとで使う。

コンテキストは "http" なので、default.conf の中では直書きする。 server {} とか location {} の中で書くと怒られる。

その他の設定はlocationの中にでも。 使い回しするなら他のファイルに書いてインクルードしたほうが良いかも。

server { listen 80; location / { proxy_pass http://localhost:8080; ... } }

まずはヘッダー渡し。これは前回と同じ。

proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Server $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

それからコネクションのタイムアウト。

proxy_connect_timeout 60; proxy_read_timeout 90; proxy_send_timeout 60;

バッファの設定

proxy_buffering on; proxy_buffer_size 8k; proxy_buffers 100 8k;

キャッシュの期限。レスポンスコード毎に設定する。

proxy_cache_valid 200 1h; proxy_cache_valid 302 1h; proxy_cache_valid any 1m;

キャッシュの設定。とにかくキャッシュしてもらう。

proxy_no_cache 0; proxy_cache_bypass 0;

キャッシュのキーゾーンを設定する。

proxy_cache http;

apacheの設定

このままだとApache側のログファイルが "localhost" まみれになるので、 クライアント側のホスト名をちゃんと記録するようにする。

mod_rpaf を使うとの事だったけど、yumにはなく面倒なので EPELにあった mod_exextract_forwarded を使用する。 EPELリポジトリのインストールは、

IUS Community Project 0.1 documentation にアクセスして、 「Repos」から自分の環境にあったリポジトリへ移動し、「system environment」カテゴリにある、

epel-release

ius-release

のrpmをurl指定でインストール。

$ rpm -Uvh [url]

これでyumにリポジトリが追加されたはずなので、インストールしてみる。

$ yum install mod_extract_forwarded

インストールが完了すると、/etc/httpd/conf.d に mod_extract_forwarded.conf ができるので、これを一行編集。

MEFaccept 127.0.0.1

apacheをリロードして、アクセスしてログを確認してみよう。

$ /etc/init.d/httpd reload $ tail -f /var/log/httpd/access_log

[sonicnotes-blog]

仮想CentOSのnginx+Apach2でリバースプロキシ

やりたいこと

80番と443番で来たアクセスを nginx で処理し、Apacheの8080番に問い合わせる。

nginx(:80/:443) → Apache(:8080)

開発環境だとApacheのVirtualDocumentRootが便利なのでそれも活かしたい。

nginxのインストール

yumにリポジトリを追加してnginxをインストールする

リポジトリの追加は、 /etc/yum.repos.d に nginx.repo を作成して編集。

[nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/$releasever/$basearch/ gpgcheck=0 enabled=1

変数で渡されている $releasever はOSのリリースバージョン、 $basearch はアーキテクチャ（x86_64とかi386が入るらしい）

これで yum で見つかるようになったはず

$ yum install nginx

Apacheのポートを書き換える

Listen とか NameVirtualHost のポート番号を8080番に変更。 冒頭に書いた通り、VirtualDocumentRootを使って極力楽をする。

<VirtualHost *:8080> VirtualDcoumentRoot /home/www/%0/html <Directory /home/www/*/html> Options All AllowOverride All </Directory> </VirtualHost>

必要最小限でこのようなバーチャルホスト設定に。

あとは、mod_ssl を設定済みならば 443 の Listen も切っておこう。 設定ファイルの末尾に ~ 等つければ読みこまなくなるのでそれが楽。

$ mv /etc/httpd/conf.d/ssl.conf /etc/httpd.conf.d/ssl.conf~

バーチャルホストにも設定が残っていたら外しておく。

nginx

CentOS版は conf.d/*.conf に設定を書く模様。 default.conf の中身消してそのまま使ってみる。

server { listen 80; location / { proxy_pass http://localhost:8080; } }

これだけだとホスト名とかその他のクライアント側からの情報がApacheに伝わらないので、 そこらへんの設定をしておく。

conf.d/ に proxy.conf とか作成。

proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Server $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

SSLの設定

nginxさんにはSSLもお願いしたいのでそのように。

conf.d/ にすでにある example_ssl.conf を複製して使ってしまう。 ssl.conf として作成して編集。

server { listen 443; ssl on; ssl_certificate /etc/pki/tls/certs/localhost.crt; ssl_certificate_key /etc/pki/tls/private/localhost.key ssl_session_timeout 5m; ssl_protocols SSLv2 SSLv3 TLSv1; ssl_prefer_server_ciphers on; location / { proxy_pass http://localhost:8080; } }

ssl_certificate と ssl_certificate_key は、 Apache の mod_ssl 入れた時にオマケでついてきたテスト用の証明書を使用。

起動

これでおおむね動くはず。 ゆるゆる設定なのは仮想の開発環境だから、と言い訳しておく。

起動！

$ /etc/init.d/nginx start

でも

開発版にnginxって邪魔なだけなのでは

[sonicnotes-blog]

JavaScript: グローバルスコープでのvar と window.foo

例えばこんなコードがある。

<script> window.app = { name: "App" }; </script> <script> var app = app || {}; console.log(app.name); // "App" （IE7-8ではundefined） </script>

script要素は、別の要素であればjsファイルのインクルードでも構わない。 モダンな環境（Chrome, Firefox, IE9-10）であれば問題なく "App" が出力されたが、 IE8以下だとこれはundefinedになる。

次のように同じscript要素（あるいは同じjsファイル）ならばきちんと "App" になる。

<script> window.app = { name: "App" }; var app = app || {}; console.log(app.name); // "App" </script>

あるいは、次のように、はじめの window.app が var でも正常に動作する。

<script> var app = { name: "App" }; </script> <script> var app = app || {}; console.log(app.name); // "App" </script>

window.app を活かしたいのならば、後のほうのも window.app で統一すれば動く。

<script> window.app = { name: "App" }; </script> <script> window.app = window.app || {}; console.log(app.name); // "App" </script>

再定義する可能性があるならば書き方を統一しておきましょうという事らしい。

[sonicnotes-blog]

ゲストOSからのアクセスを想定したPHPビルトインサーバの起動スクリプト簡易版

cf) 仮想WindowsからホストのPHPビルトインサーバにアクセスする | SonicNotes

上記にある理由から、自分のアドレスを自動取得してPHPのビルトインサーバを起動したい。

Macなら

$ ipconfig getifaddr en0

で簡単に取得できるが、Windowsはそうはいかないので、まずはアドレスを取得するスクリプトから書く。

Git CUI上で起動する前提のnode.jsベースのスクリプト。

#!/usr/bin/env node var child_process = require("child_process"); child_process.exec("ipconfig", function(e, out, err){ var addr = out.match(/192\.168\.\d+?\.\d+?/)[0]; process.stdout.write(addr); });

相当雑な処理だけど大抵これでとれると思う。これを "getaddr" とか名前をつけてパスの通った場所に保存。

次に起動スクリプトを、"phps" とか名前をつけて、やはりパスの通った場所に保存。

#!/usr/bin/bash port=8080 # ※1 addr=`getaddr` # ※2 target=$1 if test -z $target; then target=. fi path=$(cd $target && pwd) start http://$addr:$port # 3 php -S $addr:$port -t $path

※1 : ポートは8080番。都合が悪ければ変更する。 ※2 : Macだったら前述のコマンドを使いましょう ※3 : ブラウザを起動するコマンド。Macだったらopenでもつかいましょう。

open -a Google\ Chrome http://$addr:$port

使い方は、引数にドキュメントルートのパスを渡す。

$ phps /the/path/to/doc/root Listening on 192.168.x.x:8080 Document root is /the/path/to/doc/root Press Ctrl-C to quit.

Listening にあるアドレスにブラウザでアクセスすれば閲覧出来る。 ゲストOSからも見えて幸せ。

ここまで書いて気付いたけど全部nodeで書けばよかったのか。 あるいはもう少しシェルスクリプトがお上手に書ければ…

[sonicnotes-blog]

仮想WindowsからホストのPHPビルトインサーバにアクセスする

想定は、ホストがWindows、VMはVirtualPC。 ネットワークの設定は、ブリッジモード（ネットワーク アダプター名）で。

まずホスト側でビルトインサーバーを起動する。 その際ホスト名を引数に渡す事になるが、これはローカルのIPでないとゲストからアクセス出来ない模様。

$ php -S 192.168.x.x:8080 -t /the/path

適当に与えたドメイン名をhostsに追記してもアクセスできなかった。 （ping は通ったのだけど…）

あとはゲスト側からアクセスするだけ。

http://192.168.x.x:8080

尚、IE8だとプロトコル（http://）を省略してもアクセスできない模様。

[sonicnotes-blog]

仮想CentOS : 固定IPアドレス

VirtualBox環境でIPアドレスを固定にする。 VirtualBoxのネットワーク設定はブリッジで。

# /etc/sysconfig/network-script/ifcfg-eth0 BOOTPROTO=none IPADDR=192.168.1.xxx NETMASK=255.255.255.0 GATEWAY=192.168.1.1

BOOTPROTOをdhcpからnoneに。 固定したいIPADDRと、NETMASKとGATEWAYを追加

# /etc/sysconfig/network GATEWAY=192.168.1.1

GATEWAYを追加

# /etc/resolve.conf nameserver=192.168.1.1

ネームサーバの設定はそのままでも動いた。

[sonicnotes-blog]

MBA11を購入したのでセットアップメモ

インストール

Google Chrome

Alfred

Dropbox

Google日本語入力

Ritchy Diminished

MacVim

Xcode

Homebrew

git

php

node.js

grunt-cli

grunt

bower

VirtualBox

vagrant

設定

操作スペース移動のショートカット編集

ターミナルの外観

MacVimの外観

wonbat

秘密鍵のインストール chmodをわすれずに

Sublime Text 2

ライセンスキー入力

Default から Userにコピーして編集

"Vintage" パッケージを有効に

font_faceをRicty Diminishedに

font_sizeを14くらいに

Sublime Package Control をインストール

Emmet

jslint

AutoFileName

wonbat theme

[sonicnotes-blog]

JSのファイルパスを得るアレはappendされたscript要素ではうまくいかない

JavaScriptファイルの自分自身のファイルパスは、jQueryだと

$("script:last").prop("src");

とかやったり、生だと

Array.prototype.pop.call(document.getElementsByTagName("script")).src;

とかやることで取得できる。 これで取得できるのは、処理がページの頭から順次走っていく為、 今走っているJavaScriptファイルが最後のscript要素だという保証があるから。

ところが、動的にappendしたscript要素だとこの保証がほぼなくなる。 たとえば、foo.jsとbar.jsを動的に読み込んでみる場合

["foo.js", "bar.js"].forEach(function(value){ var node = document.createElement("script"); node.src = value; document.getElementsByTagName("body")[0].appendChild(node); });

などとしてそれぞれのスクリプトの中で上に挙げたコードを実行すると、 両方共二番目の "bar.js" を返す。 既にscript要素が存在してしまっているので、当たり前だ。

一つの解決策として、onload/onreadystatechangeを使って同期的に要素を追加してやる事で取得出来るようになる。 ただし、パフォーマンスに著しく悪影響を及ぼしそうなので、このアプローチは考えつかなかった事にした。

「娘の命と引き換えだ。JSの在り処を言え。」とか言われない限りやめておく。バルス。

[sonicnotes-blog]

FB.login() called before calling FB.init()

2013/06/22: 最近見たら、ちゃんと "Invalid App ID" を吐くようになっているみたい

FacebookのJavaScriptSDKを使っていて

FB.login() called before calling FB.init()

と言われたら、まずはinitメソッドでappIdが正しく渡されているかを疑う。 FB.login() を誤って FB.init() の前に使ってしまうようなミスを犯す確率はかなり低い。と思う。

FB.init は appId を渡してFBを初期化するのだけど、 呼ばれた時にリクエストを送ってappIdが正規のものかを確認している模様。 appId が間違っていた場合、初期化はされない。

つまり、その後にFB.loginを書けば、それはメッセージ通り init前にloginをコールしてしまった事になる。

とはいえわかりにくいメッセージだ。 initにコールバックがあるわけでもないので、正しいidを確実に入れるしかなさそうだ。

FB.init({ appId : [application id] });