September 27, 2013

Bootstrapのプログレスバーの移動速度を変更する

BootstrapのCSSを見てみると
.progress-bar {
... 略 ...
  -webkit-transition: width 0.6s ease;
          transition: width 0.6s ease;
}
とあり
.progress-bar {
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}
のように、適当な場所でオーバーライドすれば変更出来ました。0にすると即時に移動する感じになりました。

参考:
http://stackoverflow.com/questions/12320669/how-do-you-animate-a-twitter-bootstrap-progress-bar-smoothly

JSでSoundCloudの曲を再生して、duration(総再生時間)を自動で取得、position(現在再生時間)も自動で取得する

前回、簡単な再生、一時停止、停止等のサンプルを書きました。
http://madroom-project.blogspot.jp/2013/09/javascriptsoundcloud.html

今回は、duration(総再生時間)とposition(現在再生時間)を自動で取得するメモです。先にサンプルです。
SC.stream('/tracks/293', {
    autoPlay: true,
    onload: function() {
        console.log(this.duration);
    },
    whileplaying: function() {
        console.log(this.position);
    }
});
autoPlayは、その名の通り自動再生フラグです。上記のソースをそのまま書いてしまうと、完全に自動で再生されてしまいます。再生ボタン押下イベントのコールバック等にすると良いと思います。

autoPlayをtrueにすると曲のローディングは自動で開始され、ローディング完了と思われるタイミングでonloadの処理が行われました。前回の記事で、ローディングに合わせてdurationが増えているようだと書きましたが、onloadで取得すれば一定でした。

whileplayingは、再生中、何度もコールされます。ですのでpositionは増えていきます。autoPlay、onload、whileplayingを組み合わせると、再生時間のプログレスバーを作成できそうです。尚、再生開始のタイミングとローディング完了のタイミングは全く別であることには注意が必要で、実は上記のサンプルだとonloadよりも先にwhileplayingが実行されました。(この辺はうまく調整しないと。。。)


ドキュメント(SoundManager 2)
http://www.schillmania.com/projects/soundmanager2/doc/


--
追記:
autoPlayフラグではなくautoLoadフラグを用いてローディングだけ自動で開始させ、onloadでdurationを取得しつつ再生(this.play()です。)できました。この方法であれば、whileplayingの初回実行は必ずonloadよりも後になります。

September 25, 2013

JavaScriptでSoundCloudの曲を再生してみる

なかなかまとまった情報も無さそうなので、簡単にですが、調べてみました。先に、サンプルです。client_id値は置換して下さい。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SoundCloud TEST</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>
</head>
<body>

<button id="play">再生</button>
<button id="pause">一時停止</button>
<button id="stop">停止</button>
<button id="duration">総再生時間をコンソールに出力</button>
<button id="position">現在の再生時間をコンソールに出力</button>

<script>
// 初期化
SC.initialize({client_id: 'xxxxxxxxxx'});

// ストリーミングオブジェクト(?)
var s = null;
SC.stream('/tracks/293', function(sound){
    s = sound;
});

// 再生
$('#play').click(function() {
    s.play();
});

// 一時停止
$('#pause').click(function() {
    s.pause();
});

// 停止
$('#stop').click(function() {
    s.stop();
});

// 総再生時間をコンソールに出力
$('#duration').click(function() {
    console.log(s.duration);
});

// 現在の再生時間をコンソールに出力
$('#position').click(function() {
    console.log(s.position);
});
</script>
</body>
</html>
上記サンプルのポイントは
* SC.initialize()にクライアントIDを渡して初期化する
* SC.stream()のコールバックでストリーミングオブジェクト(という表現が正しいのかわからない...)をグローバルな場所に保存
くらいでしょうか。

尚、durationは、再生直後に取得した場合と、少し間をおいた場合とで、値が変わりました。ローディングに合わせて増えていくように見えました。

SoundCloudのドキュメントは以下です。
http://developers.soundcloud.com/docs/api/sdks#streaming

ドキュメントに記載されているように、SoundCloudのJSライブラリは、SoundManager 2というライブラリを用いているようです。
(これが結構がっつりしてる気がする...)

September 24, 2013

ReflectionClassでpublicではないプロパティやメソッドにアクセスするメモ

ユニットテストでpublicではないメソッドのテストをする際に、結構使えたのでサンプルのソースをメモしておきます。
// ReflectionClassでプロパティをpublicにして取得する
function getProperty($object, $propertyName)
{
    $reflection = new ReflectionClass($object);
    $property = $reflection->getProperty($propertyName);
    $property->setAccessible(true);

    return $property->getValue($object);
}

// ReflectionClassでメソッドをpublicにして取得する
function getMethod($object, $methodName)
{
    $reflection = new ReflectionClass($object);
    $method = $reflection->getMethod($methodName);
    $method->setAccessible(true);

    return $method;
}

// publicではないプロパティとメソッドを持つクラス
class Foo
{
    private $bar = 'BAR';

    private function baz($arg)
    {
        return strtoupper($arg);
    }

}

// インスタンス
$foo = new Foo;

// エラーになります
// Fatal error: Cannot access private property Foo::$bar ...
echo $foo->bar;


// エラーになります
// Fatal error: Call to private method Foo::baz() ...
echo $foo->baz('test');

// 'BAR'と表示されます
echo getProperty($foo, 'bar');

// 'TEST'と表示されます
echo getMethod($foo, 'baz')->invokeArgs($foo, ['test']);

September 20, 2013

JSDuckでCoffeeScriptから生成したJSファイルのドキュメントを生成するメモ

メモです。

JSDuckは"/** ... */"の内容からドキュメントを生成するらしいのですが、CoffeeScriptのブロックコメントである"### ... ###"だと"/* ... */"になってしまいます。なので、CoffeeScriptのブロックコメントを"###* ... ###"にすればOKでした。
https://github.com/senchalabs/jsduck/issues/12

September 17, 2013

apache 2.4でバーチャルホストする際の注意(Ubuntu)

以下二点、メモです。

1.
/etc/apache2/sites-available/ に作成するファイルに".conf"の拡張子を付けないとa2ensiteで反応しませんでした。


2.
"Require all granted"を書かないとforbiddenを解決できませんでした。
<VirtualHost *:80>
    ServerName xxx.yyy.com
    DocumentRoot /xxx/yyy/public
    <Directory '/xxx/yyy/public'>
        AllowOverride all
        Require all granted
    </Directory>
</VirtualHost>

September 2, 2013

RubyMineでVagrantのRubyを指定してRSpecを実行する

1. リモート(Vagrant)のRubyを設定する
http://madroom-project.blogspot.jp/2013/09/rubyminevagrantrubyirb.html
と同様。



2. RSpecの設定をする

Run > Edit Configurations > Rake > spec > Configuration
と進む。

"Arguments:"に"RAILS_ENV=test"を入力。
"Path mappings:"でWorking directoryに対するローカルとリモートのマッピングを行う。
参考: http://madroom-project.blogspot.jp/2013/09/rubyminevagrantrubyirb.html



3. RSpecを実行する

Run > 'Run spec'
と進み、テストが正しく実行されるか確認する。



4. おまけ
Macで確認したんですが、通知してくれました。
(Pendingがfailed扱いになっていますが。。。)


RubyMineでVagrantのRubyを指定してIRBコンソールを起動する

結構便利そうなので、メモしておきます。


1. リモート(Vagrant)のRubyを設定する

Project Settings > Ruby SDK and Gems > Add SDK... > New remote...
と進む。

"Fill from Vagrant config"からvagrantのルート(Vagrantfileがある場所)を指定するか、以下を入力。
* Host
* Port
* User name
* Private key file(Auth type がKey pair(Open SSH)の場合)

"Ruby interpreter path" は仮想OS内のrubyのパスを指定する。



2. IRB consoleの設定をする

Run > Edit Configurations > IRB console > IRB console > Configuration
と進む。

"Path mappings"で
* IRB scriptに対するローカルとリモートのマッピング
* Working directoryに対するローカルとリモートのマッピング
をそれぞれ行う。



3. IRB Console が正しく動くか確認する

Run > 'Run IRB Console'
と進み、試しに RUBY_VERSION を出力。






TextMate2でRubyの便利な使い方メモ

外人さんがYouTube動画で小ネタをまとめていたのでメモしておきます。
手元の開発環境が仮想マシンなので、いくつかできていないのもありますが。。。

Text Mate Tip #2 (Hashes)
http://www.youtube.com/watch?v=I8zYNPZ-aRs
Control + l "=>"を補完
":" -> tab ハッシュペアを補完
"Hash" -> tab Hash.new ... のスニペット補完

TextMate Tip #2 (Blocks)
http://www.youtube.com/watch?v=IzJRSFa1Kkw
"do" -> tab do ... end を補完
"{" -> tab { ... } を補完
control + "{" "do ... end" と "{ ... }" の切替??(できなかった...)

TextMate Tip #3 (Don't Leave The Editor)
http://www.youtube.com/watch?v=Ds6hWgl-Z2I
Shift + Command + D 対象ファイルを開く??(できなかった...)
Control + Shift + V 文法のチェック
Control + Shift + E その行を実行する

TextMate Tip #4 (rDoc)
http://www.youtube.com/watch?v=2bDnPyxHypY
Command + R そのファイルを実行する
Control + ":" SymbolとStringの切替
Control + H ドキュメントを開く

TextMate Tip #5 (Counting Iterators)
http://www.youtube.com/watch?v=Z5fCw0fxAzI
TextMateTips #6 (Declarations)
http://www.youtube.com/watch?v=Wws9NIu5OLY
TextMateTip #7 (Declarations Continued)
http://www.youtube.com/watch?v=ClHt1mFnUkU
"dow" -> tab downto のスニペット補完
"ste" -> tab step のスニペット補完
"tim" -> tab times のスニペット補完
"upt" -> tab upto のスニペット補完
"begin" -> tab begin ... rescue ... end のスニペット補完
"case" -> tab case ... when ... end のスニペット補完
"if" -> tab if ... end のスニペット補完
"ife" -> tab if ... else ... end のスニペット補完
"elsif" -> tab elsif ... のスニペット補完
"unless" -> tab unless ... end のスニペット補完
"while" -> tab while ... end のスニペット補完
"until" -> tab until ... end のスニペット補完
"def" -> tab def ... end のスニペット補完
メソッド名を入力 -> Shift + Enter def メソッド名(args) ... end の形式に変換

TextMate Tip #8 (Ruby on Rails Navigating Files)
http://www.youtube.com/watch?v=UrYZGIIqUQE
Command + Shift + "+" 拡大
Command + "-" 縮小
Option + Shift + Command + "↓" 関連するModelやControllerに移動??(できなかった...)