2014-08-01

片手間のJavaScriptでもテストがしたい！

テストしたくないでござる。テストしたくないでござる。
いやまあきちんと環境が整ってたらテスト書くのもわりと楽だし、プログラム本体書いているときの安心感が全然違うので、それなりの規模のプログラムを書く時は良いんだけど。でも、2〜3日で書くようなちょっとしたブラウザ側だけのJavaScriptプログラムとか、開発環境がインストールされていないPCでも気軽にテストできないかなあというのが今回のテーマ。
　
これだけメジャーなJavaScriptなんだからテストも簡単だろうと思って調べると、ブログとかのサンプルを見てもNode.js前提だったり、Mochaが良さそうだと使おうとしたらアサーションライブラリは別だとか、UIはbrowserifyいるの？いらないの？とか、もじゃもじゃしたヤクの毛にからまって必死で刈り進める感じ。テスト初心者の人にテストコードの書き方を説明するときなんか、たどりつくまでがすごく遠い。
　
そんなわけで、インストール不要でconsole.logのすごい版みたいな感じにプリントデバッグおじさんでも気軽に使える、シンプルなJavaScriptテストのサンプルを作ってみました。
　
https://github.com/aike/MinimumJsTest
　
仕様はこんな感じ。
・ウェブブラウザ上でテストを実施
・Mocha + Chai を使用
・Node.js、npm、Webサーバ、その他ツールのインストール不要
・Node.jsに依存する機能・ライブラリは使えません
　
調べてみると、とりあえず最低限 mocha.js、mocha.css、chai.js の3ファイルだけあればブラウザを使ってテストができそうです。なので、外部ライブラリで使うのはそれらとjQueryのみとします。
　

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>minimum javascript test example</title>

    <!-- 汎用ライブラリ -->
    <script src="jquery-2.0.3.min.js"></script>

    <!-- テストフレームワーク -->
    <link rel="stylesheet" href="test/mocha.css" />
    <script src="test/mocha.js"></script>
    <script src="test/chai.js"></script>

    <!-- テスト対象プログラム -->
    <script src="main.js"></script>

    <!-- テスト本体 -->
    <script src="test/test.js"></script>
</head>

<body>
    <!-- テスト結果出力用エレメント -->
    <div id="mocha"></div>

    <!-- アプリ本体のエレメント -->
    <div id="message"></div>
</body>
</html>

　
テスト対象の関数はたとえばこんな感じ。

// main.js
//// 引数で受け取った文字列をid="message"のエレメントに挿入する関数
function say(s) {
    $('#message').text(s);
}

　
それに対するテストコードはこんな感じ。

// test.js
$(function() {

//// テストの設定
chai.should();
mocha.setup('bdd');

///// テスト本体
describe('メッセージ出力のテスト', function() {

    it ('引数で指定したメッセージが出力されること', function() {
        say('Hello, world!');
        $('#message').text().should.equal('Hello, world!');
    });

    it ('非同期でもメッセージが出力されること', function(done) {
        setTimeout(function() {
            say('こんにちはこんにちは!!');
            $('#message').text().should.equal('こんにちはこんにちは!!');
            done();
        }, 100);
    });

});

//// テスト実行
mocha.run();

});

　
実行結果

　
テスト実行用アプリは必要に応じて後からちゃんと作ったりするとして、とりあえずざっくり書いたターゲットアプリのindex.htmlでテストを読み込んで実行するような利用イメージです。
　
ターゲットアプリのレイアウトが崩れて問題があるなら、こんなコードを追加するとテスト結果のウィンドウがオーバーラップしてるみたいな表示になります。

//// テストの出力をウィンドウっぽく表示 
$('#mocha')
.css({
    position: 'absolute',
    top: 10,
    right: 20,
    width: 400,
    bottom: 20,
    margin: 0,
    paddingTop: 50,
    overflow: 'scroll',
    backgroundColor: '#ddd',
    boxShadow: '8px 8px 8px rgba(0,0,0,0.3)',
    zIndex: 1000
})
setTimeout(function() {
    $('#mocha-stats')
    .css({
        position: 'absolute',
        top: 5,
        left: 2,
        width: 400,
        height: 40,
        backgroundColor: '#ddd',
        zIndex: 1000
    });
}, 100);

　
実行結果

　
おしまい

2014-07-26

全天球パノラマ動画を表示するJavaScriptライブラリ作った

複数台のGoProを組み合わせて360度上も下も撮影できる動画カメラが一部で流行りつつあるようです。
こんなやつ。
http://home360.co.jp/freedom360.html
http://freedom360.us/
　
要はRICOH THETAの動画版なんですが、動画ということで機材の価格もだいぶ違うし、複数の動画を合成する作業もまだまだけっこう手間も時間もかかります。
　
そこまで頑張って動画を作っても、公開がまた大変です。フリーのスタンドアロンプレイヤーはありますが(これとか)、見る人にインストールさせるのはちょっと面倒だし、Flashで作られた全天球動画プレイヤーも良いものがいろいろあるものの、自由にダウンロードできて自分のサイトで手軽に使えるものは今はちょっとなさそうです。
　
そんなわけでJavaScriptのThree.jsを使ってさくっと全天球動画プレイヤーを作ってみました。
　
http://sound.jp/aike/paview/
https://github.com/aike/paview.js

音が出ます。Chrome推奨、Firefox不可、SafariはWebGLを有効にする必要があるかも。
　
ドラッグしてカメラの向きを変えたり、ホイールでズームしたりできます。水平の調整やファーストビューの指定もできます。シンプルな作りだし、MITライセンスなので自由に改変して使ってください。
　
※ついでに前回つくったRICOH THETA画像表示用JavaScriptライブラリの方もドラッグでカメラ向きを変えられるようにしました。

2014-01-02

RICOH THETA画像を表示するJavaScriptライブラリ作った

絶賛通常営業中。
普段からいろいろプログラムは作っているもののこのところ仕事が立て込んでいてブログが全然書けなかったので休み中に棚卸し的に書いていきます。
　
RICOH THETAの画像を公開するとなると公式サイトに上げるのが普通なんですがやっぱりそれなりに不満点もあって、全公開になってしまうとか、ファーストビューが指定できないとか、顔や見せたくないところを加工してから公開したいとかそういうことがやりにくくてアップに躊躇したりということもあったり。
　
そんなわけで、とりあえず自サイトに上げて表示できるようなライブラリをThree.jsを使って作ってみました。まだまだ機能は少ないですが徐々に改善する予定です。
　
本当はJavaScriptで書けばPCでもスマホでも同じように見せられるかと思って作ったんですがiOSのブラウザはWebGLをフルサポートしてないみたいでだめでした。あと、PCでも現行のSafariはなぜかデフォルトでWebGLが無効になっているようでなんだかいろいろがっかりです。このライブラリは人類にはまだ早すぎたのかもしれません。
　
■デモサイト
http://aikelab.net/thview/
　

■機能と制限
自サイトにアップした全天球画像を表示します。
転送速度やプライバシーなどの理由で元画像を縮小しても表示できます。
元画像サイズに関わらず表示エリアの縦横サイズを指定できます。
ファーストビュー、ズーム、自動回転の有無、回転速度などを細かく指定できます。
~~ドラッグして向きを変えることはできません（今のところ）。~~
~~カメラを上下に動かして空や地面を見ることはできません（今のところ）。逆に自分が見えなくて良いかも。~~
自動で水平を補正することはできません。手動で補正することは可能です。
画像は同じサーバ（Same Origin）にある必要があります。そんなわけではてなダイアリーには埋め込めないです。
PCのChromeやFirefoxだと良い感じに見えます。それ以外の環境だといろいろアレな感じ。
　
まあ見ての通り実質50行くらいのライブラリなので気になるところがあれば好きに改造してください。
　
■埋め込み方
シンプルな例

<div id="ph1"></div>
<script type="text/javascript" >
    var img1 = new ThView({id:'ph1', file:'photo.jpg'});
</script>

オプション指定付きの埋め込み例

<div id="ph2"></div>
<script type="text/javascript" >
    var img2 = new ThView({
        id:'ph2',
        file:'photo2.jpg',
        firstview:180,
        zoom:100,
        width:300,
        height:200,
        rotation:true,
        speed:-30});
</script>

　
■オプション一覧

キーワード	意味
id	親エレメント(DIV)のID　(必須)
file	画像ファイル名　(必須)
width	幅のピクセル数
height	縦のピクセル数
rotation	自動回転の有無
speed	回転速度（負の値で反対方向へ回転）
zoom	ズーム
firstview	初期表示位置
degree	軸の角度調整 [x, y, z]

　
■ソースコード
 https://github.com/aike/thview.js
　
2014.07.26 追記
ドラッグして上下左右好きな方向を向けるようにしました

2013-11-18

Web Audio APIとWeb MIDI APIでパターンシーケンサー風楽器作った

Web Audio APIとWeb MIDI APIの応用例として楽器を作ってみました。
適当にボタンを押すだけでもそれっぽい曲になるので遊んでみてください。
　
http://aikelab.net/webrhy/
http://github.com/aike/webrhy

　
僕はYouTubeのDenkitribeさんやBakaOscillatorさんのパフォーマンスが大好きなんですが、あの域に達するにはそれなりの技術とアレンジ能力が必要でなかなか真似できるものではありません。
　
でも、このアプリをつかうと、わりとそれっぽい演奏が楽しめます。
　

　
それぞれのボタンにはパターンがわりあてられています。適当でかまわないのでリアルタイムにどんどん選んでいってください。なんとなく曲っぽくなるかと思います。慣れてきたら曲の展開や盛り上がりをつくったりもできます。ライブ演奏指向のアプリのため、パターンの並びをソングとしてあらかじめ組むことはできません（いまのところ）。
　
パターンは自作するのではなく、完全にランダムに生成されます。とはいえ、変な音にならないよういろいろ工夫しています。
シンセとベースは主和音や関連和音から音を選んだ単音フレーズにして、音がぶつからずに聞けるようにしています。シンセの方は、アクセント的にスケール音から生成したパターンをおりまぜています。
左端のパターン0はミュートです。その隣のパターン1はかならず主和音であるAmになるようにしたので、ちょっとカオスな感じになってきたらこのボタンを押すと落ち着いた感じに戻ります。
　
ドラムは、表拍の四分音符は必ずキックを鳴らして四つ打ちはくずさないようにしています。その上で右側に行くほど手数が増えて盛り上がるようなフレーズにしています。一番右端のパターンはスネアを連打するフィルインになっています。
　
その他、ショートカットキーとして[ESC]と[RETURN]は全ミュートになります。さんざん盛り上げて、フィルイン→全ミュートみたいにするとエンディングっぽくなります。
　
音源としては、あらかじめ内蔵されているWeb Audio APIを使ったシンセ音源の他、Web MIDI APIでMIDI接続した外部音源も使用できます。
　

　
ウェブオーディオ/MIDIの大きな可能性として、ライブパフォーマンスへの応用があると思っています。おそらく本格的なレコーディング品質のアプリが出そろうにはまだ少し時間がかかり、その前にAbleton LiveやKORG ELECTRIBE、volcaのような楽器と打ち込みの中間的な存在や、VJとの連携といったあたりにWebアプリが得意な分野があるような気がしています。

2013-11-09

Web MIDI APIを使ってMIDI鍵盤からブラウザコントロール

ウェブブラウザにWeb MIDI APIが少しずつ実装されてきて、Mac OS XのChrome Canary版だとプラグインなしで普通に使えるくらいになってきました。
　
Web MIDI APIを使うとJavaScriptでさまざまなハードウェア音源を鳴らすことができます。ただそれは一側面に過ぎず、重要なのはウェブブラウザ(JavaScript)がついにリアルワールドとつながったということです。WebRTCもウェブと現実世界をつなげる技術ではありますが、MIDIはなにしろ30年も歴史があって、そのシンプルなプロトコル仕様ゆえに当初の演奏情報以外のコントロールにもいろいろ汎用的に使われてたりもします。
　
また、Web MIDI APIは電子楽器を制御して音を鳴らすだけでなく、MIDI鍵盤やターンテーブル型のDJコントローラーのようなハードウェアからの入力を受け付けることができます。ということは、ウェブブラウザを操作することができる膨大なフィジカルコントローラーを手に入れたことになります。しかもそれらは何百年もの人間工学的な蓄積によって操作性が洗練されていて、またライブツアーのようなタフな使われ方にも対応できるだけの耐久性を持っています。
　
そんな可能性の一端を示すウェブページを作ってみました。
　
http://aikelab.net/midizap/

　
Web MIDI APIが使用できる環境で、MIDI鍵盤をつないで弾いてみてください。「ド」の鍵盤を押すとドーナツのページが開き、「レ」の場合はレモンのページが開き、「ミ」はみんなのページが開き……、という風にブラウザをコントロールします。
　
※Web MIDI APIが使えない場合、画面上の白鍵をクリックしても一応動くようにはしてあります。
　
まだまだテスト的なページですが、この先に何か多くの可能性があるような気がして楽しみです。

2013-09-21

ツクツクホーシにギターとベースとドラムを重ねてみた

もう夏も終わりな感じであれですが。少し前にツクツクホーシのサビの部分がどうのとか鳴き声が「おじいちゃん！」に聞こえるとかちょっと話題になって、じっくり聞いてみたもののよくわかりませんでした。
　
僕からしてみればあれはどうみてもメロスピのギターリフに聞こえるんですが、言葉で言っても伝わらないと思うのでバッキングを重ねてみました。聞いてください。

メンバー紹介
　リードギター　ツクツクホーシ（テンポ、ピッチ、エフェクト等加工なし）
　バックギター　KONTAKT5 + PG01
　ベース　KONTAKT5 + SCARBEE MM BASS
　ドラム　EZ Drummer + dfh

2013-09-19

明日また来てください、本物のExcel方眼紙をお見せしますよ

「俺はェスァイ」
「SIって？」
「お客様のビジネスに最適なソリューションをインテグレートするんだ」
「でたっ、富士通っぽいことば！！」
「標準機能を組み合わせたパッケージは使いにくいからだよっ！！」

ドス、ドス、ドス、バッ
「この仕様書を作ったのは誰だあっ！！」
「Excelの文書がなにかございましたか」
「なぜセルをこんなに細かくした！！計算など必要のない連中がスプレッドシートを使うからだ。馬鹿どもにExcelを与えるな」
「ははっ」

「そんなことを言うからには、文字やフォームを任意のグリッドにレイアウトできて、顧客も当然のように文書ファイルを開けるソフトウェアがいろいろあるんだろうな」
「ぐぬう」
「Excel方眼紙は帳票デザインが大きな割合を占める日本の業態に即したものなんだ」
「とはいえ俺も一般的なExcel方眼紙が最良とは思わない」
「みなさん、明日またここに来てください、本物のExcel方眼紙をお見せしますよ」

ダウンロード(hoganshi.xlsx)

美味(おい)しんぼの料理本 (ビッグコミックススペシャル)

作者: 雁屋哲,花咲アキラ
出版社/メーカー: 小学館
発売日: 2004/03/30
メディア: コミック
この商品を含むブログを見る

美味しんぼ (1) (小学館文庫)

作者: 雁屋哲,花咲アキラ
出版社/メーカー: 小学館
発売日: 2000/08
メディア: 文庫
この商品を含むブログを見る