HTML を Markdown としてペーストできる MarkdownPastr

Test を書く練習ついでにバージョンアップしたのでご紹介。クリップボードにコピーしたリッチテキストを Markdown としてペーストできる Chrome Extension: MarkdownPastr の新バージョンを公開しました。

開発者の方ならご存知とは思いますが、Markdown は最近人気のある Wiki 的記法です。GitHub での採用で、爆発的に人気が出ました。プレインテキストとして見てもそれなりに把握しやすいということも、普及の理由のひとつと思われます。最近では Jekyll などを使ってブログを Markdown で書く人も出てきました。

そんな Markdown ですが、個人的に Google Docs で書いたテーブルを含む文章を Markdown 化したいケースが結構あり、そんな時に不便な思いをしていました。そこで作ったのが MarkdownPastr です。使い方は単純で、Markdown 化したい HTML をウェブページ上でコピー、textarea にペーストで貼り付けるだけ。

これが

こうなります。

Google Docs の場合、Courier New フォントで記述した部分が code として認識されます。また、行が丸々 Courier New フォントの場合はコードブロックとして認識されます。

Markdown ではなくシンプルテキストでペーストしたい場合は、Shift キーを押しながらペーストすれば OK。ウェブページ上で textarea にペーストをしない限りプロセスは止まってますので、余計なリソースを食わないところもポイントです (新しい Chrome Extension ではこれが推奨される動作です)。

ちなみに、個人的におすすめの Markdown 記述環境は

• wri.pe (by @masuidrive)
• Gists
• Online Markdown Editor
• Gitter

辺りです。

コードは GitHub で公開しています。一般的なフィードバックはこちらへどうぞ。

ぜひお試し下さい。

jsdocをbootstrapできれいに生成する

検索してもあまり日本語の情報が出てこなかったのでメモを残しておきます。

JSDoc

JSDoc は言うまでもないですが、JavaScript のソースコードに残したコメントから自動的にリファレンスドキュメントを生成してくれるコマンドラインツール。例えばこんな感じでソースにコメントを書いておくと

/**
 * Resolve url from `srcset` syntax http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
 * @param  {string}           src    Default URL
 * @param  {string}           srcset `srcset` argument
 * @param  {number|undefined} dpr    Device pixel ratio
 * @param  {number|undefined} width  Viewport width
 * @return {string} Parsed and resolved URL
 * @private
 */
var resolveSrcset = function(src, srcset, dpr, width) {
  if (srcset === null) return src;
  ...
};

下記のような HTML を出力してくれます。

便利ですね。

Grunt

詳しくは公式ドキュメントを参考にして頂ければと思いますが、今時は Grunt を使って、これを自分のワークフローに手軽に組み込むことができます。例えば僕は Grunt でこんなことをしています。

• Bower で読み込んだソースコードを任意のパスに配置する (grunt-bower-task)
• 簡易サーバーを立ち上げる (grunt-contrib-connect)
• ソースコードを保存すると (grunt-contrib-watch)
• JS ファイルが複数ある場合は連結する (grunt-contrib-concat)
• 容量を圧縮する (grunt-contrib-uglify)
• ブラウザで開いているページを更新 (ライブリロード) する (grunt-contrib-watch)

ここに「JSDoc でリファレンスドキュメントを生成する (grunt-jsdoc)」も追加することができます。

この grunt-jsdoc ですが、見ての通り、そのまま出力してしまうと、かなりプレーンで寂しい感じになってしまうわけですが、ひと工夫加えると、下記のように素敵なデザインにすることができます。

docstrap

実は grunt-jsdoc には docstrap というものが dependency として含まれているのですが、これを使うことで、見た目を簡単に bootstrap を使ったコジャレたものにすることができるのです。デザインは bootswatch.com で提供されているものから選べます。

で、その使い方なのですが、ドキュメントも分かりづらいし検索してもあまり情報がなかったのでここに残しておきます。

まずは Gruntfile.js の記述ですが

    jsdoc: {
      dist: {
        src: ['src/*.js', 'README.md'], // JSDoc化したいソースコードへのパス
        options: {
          destination: 'doc', // 出力先パス
          configure: 'jsdoc-config.json' // docstrapの設定ファイル
        }
      }
    }
    ...
    grunt.loadNpmTasks('grunt-jsdoc');

こんな感じにします (Grunt の作法が分からない方は、まずはその辺りを先に修得する必要があります) 。ポイントは configure: 'jsdoc-config.json' の部分で、別のファイルに詳細を記述する必要があります。これは grunt-jsdoc の設定自体は Gruntfile.js に記述できるのですが、docstrap の設定は別ファイルにせざるを得ないためです。

ここでは、jsdoc-config.json というファイルを指定しているので、そういう名前のファイルを作りましょう。中身はこんな感じ。

{
  "plugins": [
    "plugins/markdown" // Markdownプラグインを入れるとコメントがMarkdownで書けます！
  ],
  "templates" : {
    "cleverLinks"     : false,
    "monospaceLinks"  : false,
    "default"         : {
      "outputSourceFiles" : true
    },
    "systemName"      : "PortableCache",
    "footer"          : "",
    "copyright"       : "Developed by Eiji Kitamura",
    "navType"         : "vertical",
    "theme"           : "united", // bootswatch.comのデザイン名を小文字で指定
    "linenums"        : true,
    "collapseSymbols" : false,
    "inverseNav"      : true
  },
  "markdown"  : {
    "parser"   : "gfm",
    "hardwrap" : true
  },
  "opts": {
    // ここがポイント
    "template": "node_modules/grunt-jsdoc/node_modules/ink-docstrap/template"
  }
}

ポイントは opts.template の部分で、これをそのまま記述する必要があります。そして、templates.theme に bootswatch.com で気に入ったデザインの名前を小文字で入力。後はタスクを走らせれば OK。のはず。

おまけ

実は JSDoc は README.md などの markdown で書かれたファイルをトップページに組み込むことができます。使い方は、上記の通り変換するソースの一覧に加えるだけ。
また、これも JSDoc 自体が持つ機能ですが、プラグインで markdown を入れておくとコメントにも markdown 記法が使えて大変便利です。

Web Music Hackathon #2 Report

日本語版はこちら

On January 18th 2014, Google cooperated with a community Web Music Developers JP and held the second Web Music Hackathon at Google Tokyo office.

MIDIappy designed by g200kg

This hackathon is aimed to hack:

• Web Audio API: API for audio synthesis
• Web MIDI API: Lets you control MIDI
• WebRTC: Transfer audio, video or data over P2P
• Web Speech API: Voice recognition API

and build something within a day.

The first hackathon was a blast with quite a few fantastic apps built. Read details on this blog article (in Japanese).

This hackthon again, was with cooperation from AMEI (Association of Musical Electronics Industry), YAMAHA, Korg, Roland and Crimson Technology brought instruments to hack on, as well as NTT Communications brought equipments to make WebRTC environment easier.

The demo Mr. Watanabe from Roland shows off at the beginning of the event represented the potential of this area quite well.

It turned out we had 30+ attendees with many observers from each instrument manufactures etc, 60+ people packed in the venue.

The demos

Hack started before noon, finished around half past 4 PM then we moved to the demo time. More than 20 fantastic works were done. There's a video recording available online. You can watch it along with other photos and comments at Google+ event.

I've picked up several notable presentations here since the video is very long lasting nearly 3 hours. Each photos are linked to relevant starting time of the video.

A browser keyboard utilizing @mohayonao's CoffeeCollider. Your code in the form is recognized in realtime.

Let browser sing with eVY1 which has YAMAHA's new sound module NSX1 on it. You can find the app here (requires eVY1)

Leave 2 second message associated with your Twitter account at My-hi.net. You can listen to others' voice by hovering cursor over Twitter icons.

Tins as MIDI instruments.

"MIDIappy" is a mascot character designed by gaito a.k.a g200kg. He made it dance as a 3D modeled figure on WebGL and controllable using a MIDI controller.

The most flashy demo at this hackathon was this one. Multiple demos together including a Leap Motion controllable mirror ball via DMX, a visual effects demo using WebRTC, WebGL with music analysis + MIDI controller, etc.

This one got the second prize. The presenter played music using gesture over Leap Motion and visualized the sound to touch pads on Ableton Push. Check out his fancy gesture.

The winner of the hackathon was a music sequencer using Google Spreadsheet + Chrome Extension. It's amazing to see how effective to use spreadsheet as a sequencer platform. Note that the referencing feature of spreadsheet is used to represent chords.

Conlusion

Actually, half of attendees at this hackathon had attended the last one as well. I can tell because it was so much fun! Unfortunately I missed the after party but this one was also a great event.
I'm hoping we can continue holding this event and gradually shift our focus on something more musical rather than sound oriented.

If you are interested in this event, please subscribe to our mailing list or join Google+ community. Ryoya Kawai who is the main organizer of this event will give you updates.

We're looking forward to your attendance.

Web Music ハッカソン #2 を開催しました

2014 年 1 月 18 日（土）、Web Music Developers JP と Google の共催で Web Music ハッカソン #2 を開催しました。

g200kg さんがデザインした Web MIDI API のゆるキャラ「みでゃっぴー」

近年のウェブ技術の発展の中で生まれたブラウザ上で利用できる各種 API:

• Web Audio API:オーディオをシンセサイズできる API
• Web MIDI API: MIDI を扱うことができる API
• WebRTC: P2P でオーディオ、ビデオ、データをやりとりできる API
• Web Speech API: 音声認識できる API

などを使って、丸一日で何か作り上げよう、という趣旨です。

前回は初回にも関わらず、素晴らしい作品がたくさん生まれました。その時の様子はこちらのブログポストからご覧頂くことができます。
ウェブはどこまで楽器と融合できるか？ 〜 Web Music ハッカソンを開催しました

今回も AMEI（一般社団法人 音楽電子事業協会）の協力で ヤマハ、コルグ、ローランド、クリムゾンテクノロジー 各社から楽器を持ち寄って頂き、NTT コミュニケーションズ からも WebRTC の環境を用意して頂きました。

オープニングで披露された ローランドの渡邊さんのデモがこの分野のポテンシャルをよく表しています。ぜひご覧ください。

蓋を開けてみると、参加者数は前回を超える 30+ 名に加え、各メーカーからの見学者や取材（月刊 I/O）の方も多数集まり、会場である Google オフィス Hanabi は熱気に包まれました。

デモ

お昼前から始まったハッカソンは午後 4 時半で開発を終え、その後デモタイムに移りました。今回も発表されただけで 20 を超える素晴らしい作品が生まれました。デモの様子は動画で配信しましたので、他の写真なども含めこちらからアーカイブをご覧頂くことができます。

とはいえこの動画、全部で約 2 時間 45 分あります。さすがに長過ぎますし、すべての作品を紹介するわけにはいかないので、個人的に印象に残った作品をいくつか (これでもかなり絞ってます) ピックアップして紹介していきます。(画像は動画のデモ開始位置にリンクしています)

@mohayonao さんの作られた CoffeeCollider のソースコードをリアルタイム演奏する楽器。作品はこちら by CCKB 制作委員会チーム

ヤマハの新音源 NSX1 を載せた eVY1 を使った初音ミクボイスの作品。オチが秀逸。作品はこちら (要 eVY1) by ひとりになっちゃったチーム

Twitter のアカウントで認証して 2 秒間の挨拶が残せるというサービス My-hi.net 。マウスオーバーで他の人の声を聞くことができます。 by aklaswad

缶を MIDI 楽器にしてしまった作品。 by こだま

今回のハッカソンでお披露目された g200kg こと gaito さんがデザインされた Web MIDI API のマスコットキャラクター「みでゃっぴー」の 3D モデルを WebGL 上で MIDI コントローラーで制御するというデモ。 by g200kg

今回一番派手だったデモがこちら。Leap Motion で制御するミラーボールや MIDI コントローラーと音楽に合わせて変化するビジュアライザを組み合わせた作品。 by 光の魔術師集団Xチーム

準優勝の作品。Leap Motion を使い、ジェスチャーで鳴らす楽器や音の大きさを調整するアプリです。アウトプットは Ableton Push のパッドを光らせることでビジュアライズ。動きが結構サマになってます。 by mtomasz

優勝作品はこちら。Google Spreadsheet をシーケンサーにして音楽を鳴らしてしまう Chrome Extension。表計算ソフトの参照機能を使うことでコードを表現できるところなどに注目。 by hirono

まとめ

今回実は半数くらいの方が二度目の参加でした。それだけ前回が楽しかったのだと思います。僕は残念ながら懇親会に参加できなかったのですが、おそらく今回もみなさん存分に楽しまれたのだと思います。
このハッカソンは今後も継続的にやって、徐々により音楽的な作品が作れる環境を整えられたらいいな、なんて話をしています。

次回以降の開催については、メーリングリスト か Google+ のコミュニティ にご参加頂ければ、前回・今回のイベントを中心となって企画してくれた Ryoya Kawai さんが、この分野の最新情報も含めて提供してくれることと思います。

みなさんの参加をお待ちしています。

ウェブはどこまで楽器と融合できるか？ 〜 Web Music ハッカソンを開催しました

去る 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+ イベントページにまとまっています。見れないビデオなどあったらこちらでどうぞ。

Canvas に描いた画像を png などの形式の Blob に変換する方法

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

/***
  canvas に絵を書くコード
***/
var type = 'image/jpeg';
// canvas から DataURL で画像を出力
var dataurl = canvas.toDataURL(type);
// DataURL のデータ部分を抜き出し、Base64からバイナリに変換
var bin = atob(dataurl.split(',')[1]);
// 空の Uint8Array ビューを作る
var buffer = new Uint8Array(bin.length);
// Uint8Array ビューに 1 バイトずつ値を埋める
for (var i = 0; i < bin.length; i++) {
  buffer[i] = bin.charCodeAt(i);
}
// Uint8Array ビューのバッファーを抜き出し、それを元に Blob を作る
var blob = new Blob([buffer.buffer], {type: type});

これで jpeg 形式の Blob が完成です。type の部分を 'image/png' などに変更することで、当然ながら別の形式の画像を得ることもできます。この Blob を使えば例えば

var url = window.URL.createObjectURL(blob);

としてその画像を参照する URL を取得することができます。破棄する前に window.URL.revokeObjectURL(url) するのも忘れないで下さい。これをダウンロードするには、(破棄する前に) その URL を a タグに渡してあげます。

<a href="[blob url]" download="image.png">Download</a>

[blob url] の部分が先程作った Blob の URL、image.png の部分がダウンロードしたもののファイル名になります。Blob が必要なければ canvas.toDataURL('image/png') を直接 href 属性に渡してしまうのもアリです。

超カンタン！HTML5 で GIF アニメを作る方法

知っている人は知っている方法だと思いますが、実際にやってみたのでメモ。

※ デモの画像はこちらからお借りしました。特にライセンスが記述されていなかったのですが、問題があれば差し替えます。

ライブラリは 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+ で教えてもらいました。完全に僕の勘違いでした。お恥ずかしい・・・。

ソースコードはこちら。

参考：

• JavaScript

• pure JavaScriptでアニメーションGIFを作る