Tender Surrender

去る 2013 年 10 月 19 日、Web Music ハッカソンというイベントを Google Japan オフィスで開催しました。これは @ryoyakawai ことヤマハの河合さん (ややこしい) を中心とした Web Music Developers JP という開発者コミュニティ主催のイベントで、初の試みです。

ブラウザは近年目覚ましい発展を遂げています。HTML5 というバズワードが非常に分かりやすくはありますが、現在は Chrome、Safari、Firefox といったブラウザで、オーディオを波形レベルから弄れる Web Audio API が利用可能になっています。


こちらは藍圭介さん (@aike1000) が作られたデモですが、各ツマミは実際に動かすことができ、本格的なアナログシンセサイザーとして音を鳴らすことができます。公開されてから 2 年以上経過していますが、まだ新鮮さは衰えません。

確かにすごい!・・・とはいえ、これだけだと何か足りないと思いませんか?
そう、どうせシンセ弄るなら、マウスやトラックパッドじゃなくて、フィジカルコントローラーだろうと。みんな考えることは同じだと思います。

そこで登場したのが、Web MIDI API というブラウザから直接 MIDI メッセージを送受信することができる API です。まだ標準化されていませんが、既に Chrome では flag 付きで実装されており、利用することができます。つまり、外部 MIDI 機器から Chrome 上のバーチャルシンセサイザーを実際に鳴らすことができるようになったのです。

ハッカソン開催


ここまで来れば、あとは盛り上げるだけ。まずはハッカソンだろうということで、今回は日本の MIDI 業界団体である AMEI に協力を仰ぎ、ヤマハ、KORG、クリムゾンテクノロジーの各社から楽器やスピーカーなどをご提供頂き、30名程度の参加者のみなさんと共に集まりました。

イベントの様子は主催の河合さんのブログに譲るとして、このイベントがいかに熱いものだったか、写真と動画を交えて紹介していきます。

このイベントのために用意された楽器の数々




製品化叶わず開発から 25 年の時を経て日の目を見た Dontata くん。MIDI メッセージに応じてドラムを叩きます。

マイオシロスコープを持ってきた方も。

勢い余って持ち込まれた半田ゴテ。

デモ

特に心に残った作品に絞っていくつか紹介。(画像をクリックでビデオの開始位置から見ることができます)

優勝はテノリオンと VJ を融合した作品。

こちらはちょっと意表をついた作品。マウスオーバーで効果音が鳴るブックマークレットです。

Dontata くんの勇姿。


他にもエレキ木魚ありーのテルミンありーの盛り沢山です。2 時間とちょっと長いですが、時間のあるときに飛ばし飛ばし見てみて下さい。


最後にチューターお二方のすごい作品。

@komasshu 先生はカメラに向かって口を開けるとスネアを鳴らしてくれます。

大御所 g200kg さんはホワイトボードにマグネットを置いて、自由にリズムシーケンスが組めるという作品。

今回のイベントは初回ということで、課題がたくさん残るだろうと予想していたのですが、正直楽し過ぎてびっくりしました。来年早々にも第二回を開催したいなんて話をしていますので、興味持たれた方はぜひ Web Music Developers JP に参加して下さい。忘年会とかもやるかも。

イベントの模様は Google+ イベントページにまとまっています。見れないビデオなどあったらこちらでどうぞ。

Read on...

canvas の DOM エレメント (コンテキストではない) から toBlob() を使う、というのが一番簡潔な回答です。が、これは Firefox には実装されているのですが、残念ながら Chrome にはまだ実装されていません。そこで下記の方法を使って png や jpeg など、任意の画像形式で Blob を作ることができます。

Read on...

知っている人は知っている方法だと思いますが、実際にやってみたのでメモ。
※ デモの画像はこちらからお借りしました。特にライセンスが記述されていなかったのですが、問題があれば差し替えます。





ライブラリは jsgif というのを使わせて頂きました。
手順はライブラリを読み込み、画像をひとコマ分ずつcanvasにロード、ライブラリに追加。終わったらバイナリからgifファイルを生成、という感じ。

もう少し詳しい解説は以下。
  1. LZWEncoder.js NeuQuant.js GIFEncoder.js を読み込む
  2. 適切なサイズの canvas を用意
  3. GIFEncoder からエンコーダを作る
    var encoder = new GIFEncoder();
  4. アニメーションの時間間隔などを encoder に設定
    encoder.setRepeat(0);
    encoder.setDelay(100);
    encoder.setSize(120, 120);
  5. 一コマずつ書き始める
    encoder.start();
    1. canvas に絵を書く
      canvas.drawImage(img);
    2. encoder に canvas のコンテキストを追加することで一コマを追加
      encoder.addFrame(ctx);
  6. 書き込み終了
    encoder.finish()
  7. encoder からバイナリを吐き出して、Blobを作る
    var bin = new Uint8Array(encoder.stream().bin);
    var blob = new Blob([bin.buffer], {type: ‘image/gif’});
  8. Blob から URL を作って表示 (revoke を忘れずに)
    var url = URL.createObjectURL(blob);
    var image = new Image();
    image.src = url;
    image.onload = function() {
     URL.revokeObjectURL(url);
    };
デモはこの辺に。

※ このデモは Firefox 推奨です。Chrome では img.onload で実際に画像が読み込まれない場合があるというバグのせいで、アニメーションが一部抜けたりしてしまいます。画像を読み込むのにAjaxを使うなどの回避方法はあるのですが、このデモでは可読性を優先して画像をsrcから読み込む方法を採りました。ただ、僕のコードにバグがある可能性もあるので、その場合はこっそり教えて下さい :)
こっそりじゃないけど Google+ で教えてもらいました。完全に僕の勘違いでした。お恥ずかしい・・・。


参考:

Read on...

昨年夏に公開した Project Tab Manager という Chrome Extension のバージョン 2.0 をリリースしました。2.0 での変更点は下記の通り:
  • 新しい UI。より直感的で使いやすくなりました。
  • タブの状態を追跡するようになりました。プロジェクトとして保存さえしていれば、気軽にウィンドウを閉じて構いません。いつでも閉じた時の状態に復元可能です。
  • Chrome 再起動時にウィンドウとプロジェクトが自動的に関連付けられるようになりました。以前はマニュアルで関連付けなければなりませんでした。
  • キーボードナビゲーションが可能になりました。
  • オプションがクラウドに保存されるようになりました。自宅や会社で共通の設定が利用できます (要 Chrome サインイン)。
  • サマリー機能が拡張されました。自分がどのプロジェクトにどれくらい時間を費やしたのか、2 ヶ月まで遡ることができます。
Project Tab Manager 知らなかった!という人がほとんどだと思うので、ゼロから書いてみます。

Project Tab Manager が解決する問題

元々、仕事上コンテキストスイッチ (プロジェクトごとに頭を切り替える) がかなり頻繁に必要なため、それを少しでも楽になるようにと作ったのが Project Tab Manager でした。予めタブをセットにして保存しておき、手軽にひとつのウィンドウとして呼び出せる、というのが Project Tab Manager の基本コンセプトです。
こういう人にぜひ使って欲しいです
  • Chrome のタブが常に 100 個近く開いている
  • そのせいで Chrome だけでかなりメモリを消費している
  • 仕事中に Twitter や Facebook (もちろん Google+ も!) を見ちゃって気が散る
Project Tab Manager (以下 PTM) を使えば、常に必要最低限なタブのみを開いておけるので、今やっている仕事への集中力が高まり、Chrome の消費メモリが減少し、彼女ができます。
興味を持った方は、まずは Chrome Web Store からインストールしてください。

Getting Started

以前のバージョンではせっかくインストールしてもらったのに使い方がわからないという方が結構いました。ので 2.0 からヘルプを用意したのですが、日本語ヘルプを書くのがめんどいのでここに書いちゃいます。
PTM をインストールしたらまず下記を行なってそのパワーを実感して下さい。
  1. 新しいウィンドウを開く
  2. 何かウェブページを開く
  3. PTM のアイコンをクリック
  4. プロジェクト名を入力して保存する
  5. 以上

これでこのウィンドウにプロジェクト名が付きました。以後このウィンドウで開くあらゆるタブは、いつでも状態を復元することができます。以下を試してみて下さい。
  1. 先ほど開いたウィンドウにいくつか新しいタブを開き、ウェブページを読み込む
  2. ウィンドウごと閉じる (タブをひとつひとつ閉じるのではなく、ウィンドウ自体を閉じて下さい)
  3. PTM のアイコンをクリックして今閉じたウィンドウのプロジェクトを開く

元のタブの状態が復元されましたか?これが Project Tab Manager のパワーです!

その他の使い方

ブックマークを保存する

  • PTM では、プロジェクトを保存するとブックマークが作られます。また、プロジェクト保存時に含まれなかったタブも、以後は復元可能になります。必要に応じてプロジェクト内のタブ名横に表示されるスターアイコン (Chrome のブックマークと同じ) をクリックして保存しておけば、後から再度開くことが可能です。頻繁に使うページはブックマークしておきましょう。
  • 先ほどのブックマークとは、本当に Chrome のブックマークのことです。Bookmark Manager を開いて “Project Tab Manager” というフォルダ (デフォルト) を探してみて下さい。保存したプロジェクトがフォルダとして、タブがブックマークとして保存されていることがわかると思います。
  • これにより、Chrome for iOS や Chrome for Android からでも必要なブックマークにアクセスできるのが特徴です。


プロジェクトを編集する

  • プロジェクトの並べ替え、名前変更などは Bookmark Manager で行なって下さい。PTM 自体に編集機能はありません。

プロジェクトを削除する

  • プロジェクトの削除は PTM のポップアップから行えます。プロジェクト名右のゴミ箱アイコンをクリックするだけです。
  • 間違えて消しちゃった!という場合でも大丈夫。”__Archive__” というフォルダに移動されているだけです。Bookmark Manager で戻してあげるだけで復活します。

プロジェクトを関連付ける

  • バージョン 2.0 から Chrome を再起動してもウィンドウの関連付けが自動復元されるようにはなりましたが、場合によっては外れてしまうこともあるでしょう。そんな時はプロジェクト名横のピンアイコンをクリックして関連付けて下さい。

Lazy Load とは

  • 複数のタブをまとめて開こうとした時に長時間かかること、ありますよね?PTM の特徴のひとつとして Lazy Load という機能があります。これにより、プロジェクトで大量のタブを開こうとした時でも、アクティブなもの以外は読み込まなくなり、時間が短縮され、リソースをほとんど食わなくなり、彼女ができます。
  • Lazy Load されたタブのタイトルには “*” がプレフィックスされます。
  • オプションで Lazy Load を無効にすることもできます。

オプション

  • オプションでは下記を設定することができます
    • プロジェクトを保存するブックマークの場所
    • プロジェクトを保存するブックマークの名前
    • Lazy Load の有効・無効

Summary 機能

  • PTM ポップアップの時計アイコンをクリックすることで、どのプロジェクトにどれくらいの時間を費やしたか、まとめを見ることができます。
  • この記録は 2 ヶ月保存されます。「今月どのプロジェクトに一番時間使ったのかな?」「あー俺 Twitter ばっか見てるわ!」なんてことに便利かも。


キーボードナビゲーション

  • 慣れてくると、PTM ポップアップを開いた後、キーボードで操作したいという人は少なくないと思います。
  • 検索、その後 “tab” で絞りこまれたプロジェクトを選び、”return” でプロジェクトを開くことができます。
  • PTM ポップアップを開くこと自体も、ショートカットすることができます (Chrome の標準機能) “chrome://extensions” を開き、一番下の “Keyboard shortcuts” からお好みの設定を行なって下さい。僕は “Ctrl+p” にしてます。

最後に

バグを発見した場合、機能要望がある場合はこちらからリクエストしてください。開発者の方は直接 github から contribute して頂けると嬉しいです。

Read on...

僕の仕事は Google の Chrome Developer Advocate です。
Google Japan では先週 (2013 年 4 月) からこの Chrome の Developer Advocate を募集開始しました。他にもGoogle+、YouTube、Android など同種の担当者も募集しているのですが、よく聞かれるし、リクエストもありましたので、この機会に Developer Advocate がどんな仕事をしているのか、ご説明したいと思います。

Read on...