Tender Surrender

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...

かなり前から自分で欲しいと思っていた Chrome Extension を、ようやく Chrome Web Store で公開することができましたのでご紹介。

なぜ?

Chrome のブックマークの思想はとてもシンプルです。一度星を付けたら(ブックマークしたら)、基本的には Omnibox (URLバーのところ) から数文字打つだけで候補に出てくる、という極限までスリム化した使い方を想定しています。そのため、ブックマークはカテゴリに分けて整理して使いたい、という方にとっては痒いところに手が届かない部分もあるかもしれません。僕自身もそう感じるひとりです。

ブックマークの整理というと、僕も以前であればカテゴリーで分ける使い方がメインだったのですが、それだと探すのが面倒だし、結局検索してしまったり、直接URLを覚えて入力してしまうことが多々ありました。そこで最近は、カテゴリごとではなくプロジェクトごとにフォルダを作って、必要なブックマークを集めるという使い方をし始めていました。こうしておくことで、必要な時に必要なページをまとめて開く、といった使い方ができるからです。仕事柄複数のプロジェクトを同時並行で進めることが多いので、頭を整理しやすくなりますし、開いているタブの数を減らす効果も得られます。
ただ、このやり方だとプロジェクトに後からブックマークを追加しにくいとか、プロジェクトの一部だけど最初から開かないようにできない、とか、不便な点も少なからず残ります。そこで作ったのがこの Project Tab Manager 。完全に上記の使い方に最適化された Chrome Extension です。

基本的な使い方

インストールして頂くと、Omnibox の右側に Extension のボタン (フォルダの形をしたアイコン) が表示されます。これをクリックすると、何もプロジェクトが登録されていない状態の Project Tab Manager が開きます。

プロジェクトを登録するには、「新しいプロジェクト」に名前を入力して保存するだけ。今開いているウィンドウのタブがまとめてプロジェクトに保存されます。これを繰り返すことで、ウィンドウごとにプロジェクトが管理できるようになります。



次にプロジェクトを開きたい時は、プロジェクト名をクリックすれば、新しいウィンドウが開き、すべての必要なタブがまとめて開きます。ポイントのひとつは、この時にアクティブなタブだけが実際にウィンドウをロードするところ。別のタブを選択すると、そこで初めてページがロードされます (レイジーロード機能)。こうすることで、たくさんのタブを開いても、実際に使い始めるまでの時間は短縮できます。もちろんこの機能は設定でオフにできます。

Project Tab Manager からプロジェクトを開くと、プロジェクトのブックマークと共に、現在開いているまだブックマークしていないタブのページもグレーで表示されます。マウスオーバーした時に右側に表示される + をクリックすれば、そのタブのURLをプロジェクトに追加できます。
既にあるブックマークにマウスオーバーした場合は、四角形と✕が表示されます。四角形はアクティブ・パッシブを切り替えるもので、パッシブ (薄い青) にしておくと、プロジェクトの一部にはなりますが、プロジェクトウィンドウを開いた場合にタブとして追加されません。なので、必要な時だけ開く扱いにできます。✕をクリックすると、ブックマークは削除されます。



Project Tab Manager の特徴のひとつは、これらのブックマークがネイティブ機能のブックマークとして保存される点です。設定を見て頂くとわかりますが、デフォルトでは「その他のブックマーク」に「Project Tab Manager」というフォルダを作って、その下にプロジェクトごとのブックマークが作られることになります。こうすることで、Chrome Sync を利用してさえいれば、Chrome for Android や Chrome for iOS からでもプロジェクトのブックマークを利用可能です。外部のサーバーに保存されるといったことはありません。
また、Project Tab Manager 自体の編集機能は最低限に留め、表示順を変更したり、削除したりといったことはネイティブのブックマークマネージャーから行うことができます。



Project Tab Manager のもうひとつの特徴は、各プロジェクトにどれだけの時間を費やしたのかをあとで振り返ることができる点です。ウィンドウの右上に表示される時計アイコンをクリックすると統計画面が開き、どの時間帯にどのプロジェクトウィンドウを使っていたのか、どのプロジェクトに何割くらいの時間を割いたのかを確認することができます。

各プロジェクト名にマウスオーバーした場合は、ピンアイコンとゴミ箱アイコンが表示されます。ピンアイコンはウィンドウにプロジェクトを紐付けます。こうすることで、このウィンドウはこのプロジェクト用ですよ、ということを Project Tab Manager に教えることができます (ここはできれば自動化したい部分)。これは統計機能で必要になります。
ゴミ箱アイコンは、プロジェクトを削除するのではなく、アーカイブします。ブックマークの中に __Archives__ というフォルダがあるのですが、そこに移動されるだけですので、必要な時に元に戻すこともできます。

技術的な部分

この Extension は元々素の JavaScript で作ったものだったのですが、HTML5とか勉強会での講演のために、AngularJS ベースに変更しました。おかげでコードは格段に整理できましたし、AngularJS に興味がある方には面白いものだと思います。ソースコードはこちらで公開しています。
AngularJS とは Google のエンジニアも関わっている JavaScript のフレームワークで、他のフレームワークとはちょっと違ったアプローチが体験できます。詳しくはまた別の機会にブログを書きたいと思っていますが、興味のある方は先述の HTML5とか勉強会で僕がやったライブコーディング込みの講演のビデオが参考になると思います。15分程度ですのでぜひご覧頂ければと思います。

フィードバック求む!

リリース直前に手を入れた部分でいくつかバグが出ているようなのですが、まだ整理できていない状態です。バグを見つけた方はぜひ github に issue として登録して下さい。また、機能面でもフィードバックを頂けると嬉しいです。

Project Tab Manager で皆さんの生産性が少しでも上がればと思います。

Special Thanks to Shinsuke Okamoto for icon designs.

Read on...