Hatena::Groupsubtech

#生存戦略 、それは

-> 09 { 09 / 17 }

スクショ拡張と Canvas でお絵かきツール実装したよという話

17:35 | はてなブックマーク - スクショ拡張と Canvas でお絵かきツール実装したよという話 - #生存戦略 、それは

リリースしたので Firefox 使ってる人は使ってみてね。フォトライフのプライベートフォルダにアップロードして画面確認に便利なのと、data スキームで開けるので、ブラウザ間での画像のやりとりが便利(ふつうやらない)。

スクリーンショット拡張に付いてるメモ書き機能のアイデアは、落書きをしたページをTumblrとかに投稿できるブックマークレット javascriper.js ≪ kuから(ペンの線、とくに何もしなくてもとぎれなかったみたい)。

絵を描くために FirefoxCanvas 用のお絵かきツール作りました。chrome 権限なくても動く、はず。

スクショ拡張では、ほとんどの機能削って赤ペン黒ペン消しゴムとかの表示だけになってます。フルで使おうとするとUIが全然洗練されてない感じ。機能的には線とか塗りつぶしとかパレットとか一部削除とかアルファチャンネルの色とか使えます。Prefs の extensions.hatenascreenshot.drawingHardMode を true にすると拡張でもこれらの機能はつかえますがおすすめしません。文字のCanvas上への描画も mozDrawText 使って実装すればできると思います。

chrome権限使うと、ブラウザの表示している箇所の色とかスポイトで取得でき(canvas の drawWindow 使えるから)面白い感じです。ただ Canvas がめちゃくちゃメモリ食うので、最初はヒストリー機能とかつけてましたが、実装でコメントアウトしてます。ヒストリーを細かいレイヤー単位に分ければもうちょっと省メモリになりそうですが、あんまり本質的じゃないです。あ、Canvas じゃなくて Img 要素にすればあんまりメモリ食わなさそう(書いていて気づいた)。

実装は主に開発合宿の2日でがーっと実装(一日目でスクショとアップロード機能、二日目お絵かき機能、その時のコミットログ、ヒドイ)、その後社内リリースして放置寝かせてリリースしました。ちなみに貰った商品は Kinesis と細々とした物。その前の合宿で貰った商品は Dr.DAC2。思いっきり趣味が反映されております。最近ただのエンジニアからディレクター兼エンジニアリングマネージャっぽい仕事に変わった*1ので、コード書く時間見つけつつ細かい調整しながら出しマンタ。

あとkm37さんがはてス拡張たんを描いてくれマンタ!!

*1:戻るかも知れないけど。ふつーはキャリア的には エンジニア -> ( ギーク | エバンジェリスト | マネージャ | ディレクタ ) なのかなー。ギーク系は家庭持ってもプログラミング大好きな人じゃないとつらそう。

teramakoteramako2009/09/17 18:46>文字のCanvas上への描画も mozDrawText 使って
Fx3.5以上(正確にはGecko 1.9.1以上かな)ならfillText, strokeTextというHTML5のドラフトに入っているAPIが使えます(なぜかMDCには載ってない)ので標準実装になる可能性が高いほうを薦めたほうが良いかなと思いました。
微妙なツッコミ、失礼しました。

secondlifesecondlife2009/09/17 18:53なるほど、標準的なAPIの方が良さそうですね。
ただ互換の面で3.0も考えると、Firefox 向けだと独自API使った方が互換性には良さそう(もしくはラップして利用)ですね。

potappopotappo2009/09/22 23:56>(なぜかMDCには載ってない)
日本語版が更新されてないままだったので更新しました。

トラックバック - http://subtech.g.hatena.ne.jp/secondlife/20090917