スクショ拡張と Canvas でお絵かきツール実装したよという話
スクショ拡張と Canvas でお絵かきツール実装したよという話
リリースしたので Firefox 使ってる人は使ってみてね。フォトライフのプライベートフォルダにアップロードして画面確認に便利なのと、data スキームで開けるので、ブラウザ間での画像のやりとりが便利(ふつうやらない)。
スクリーンショット拡張に付いてるメモ書き機能のアイデアは、落書きをしたページをTumblrとかに投稿できるブックマークレット javascriper.js ≪ kuから(ペンの線、とくに何もしなくてもとぎれなかったみたい)。
絵を描くために Firefox の Canvas 用のお絵かきツール作りました。chrome 権限なくても動く、はず。
スクショ拡張では、ほとんどの機能削って赤ペン黒ペン消しゴムとかの表示だけになってます。フルで使おうとするとUIが全然洗練されてない感じ。機能的には線とか塗りつぶしとかパレットとか一部削除とかアルファチャンネルの色とか使えます。Prefs の extensions.hatenascreenshot.drawingHardMode を true にすると拡張でもこれらの機能はつかえますがおすすめしません。文字のCanvas上への描画も mozDrawText 使って実装すればできると思います。
chrome権限使うと、ブラウザの表示している箇所の色とかスポイトで取得でき(canvas の drawWindow 使えるから)面白い感じです。ただ Canvas がめちゃくちゃメモリ食うので、最初はヒストリー機能とかつけてましたが、実装でコメントアウトしてます。ヒストリーを細かいレイヤー単位に分ければもうちょっと省メモリになりそうですが、あんまり本質的じゃないです。あ、Canvas じゃなくて Img 要素にすればあんまりメモリ食わなさそう(書いていて気づいた)。
実装は主に開発合宿の2日でがーっと実装(一日目でスクショとアップロード機能、二日目お絵かき機能、その時のコミットログ、ヒドイ)、その後社内リリースして放置寝かせてリリースしました。ちなみに貰った商品は Kinesis と細々とした物。その前の合宿で貰った商品は Dr.DAC2。思いっきり趣味が反映されております。最近ただのエンジニアからディレクター兼エンジニアリングマネージャっぽい仕事に変わった*1ので、コード書く時間見つけつつ細かい調整しながら出しマンタ。
あとkm37さんがはてス拡張たんを描いてくれマンタ！！
*1：戻るかも知れないけど。ふつーはキャリア的には エンジニア -> ( ギーク | エバンジェリスト | マネージャ | ディレクタ ) なのかなー。ギーク系は家庭持ってもプログラミング大好きな人じゃないとつらそう。
