loading ...

ウェブサイトに落書きできるようにするブックマークレットを作った

2009.09.11(Fri)

こんにちは、営業の東です。

今回は、ウェブサイトに落書きできるようにするブックマークレットを作ってみました。

以下のリンクをクリックしたり、お気に入り等に保存すると、好きな時に任意のウェブサイトで落書きができるようになります。(ただしIE未対応)

落書きする

右上に表示される、「落書きをやめる」をクリックすると元に戻ります。

仕様とか技術の話

このように落書きができるようになったのは、HTML5で導入されるcanvas要素があってこそです。

IEは最新バージョンのIE8でも、canvas要素を実装していないですし、ライブラリ(Googleが提供しているExplorerCanvas)で対応したとしても、満足いく処理ができないので、今回は完全に切り捨てました。

Firefoxでもそこそこ動きますが、Safariが最も満足いく動きをしてくれますね。さすが、canvas要素の産みの親といったところでしょうか。

さらに、今回は、この動きを簡単に実現するために、Processing.jsというライブラリを使っています。

Processing.jsは、数年後に到来するであろう、JavaScriptの新時代のエースになる可能性を秘めた期待の新星です。(と私は勝手に思ってます)

同じく、JavaScriptライブラリの新時代を築きつつあるjQueryを作ったJohn Resigさん作ということで今後の期待が高まります。

実装方法はいたって単純で、落書きする処理をProcessing.jsで書いて(というかサンプルにあったものを、ほぼそのまま使用)、document.bodyと同じ高さと同じ幅を持った、canvas要素(落書き対象)をz-indexで最前面に持ってきたというだけです。

今後

Proccesing.jsの勉強がてら、思いつきで実装したものの、なかなか実用性があるのかもしれないと思ってきました。

高速化を図って、シェイプを作れるようにしたり、カラーパレットをくっつけたりすると、ウェブサイトの校正とかに使えるかもしれません。

ちなみに現時点でも落書きした状態で印刷したり、画面キャプチャを取るといったことはできます。

JavaScriptのcanvas要素の操作や、ActionScriptを自由自在に操れるようになりたいので、残念ながらそろそろ苦手だった数学と物理に最入門する必要がありそうです。

トラックバック

この記事のトラックバックURL

Clip to Evernote
福井:0776-52-2134 東京:03-6432-9221
コンサルティング・サイト制作に関するお問合せはこちらまで

最新Web制作実績

  • 出来る大人のビジネスアイテム - Gold Men -
  • 下着工房「自由空間」肌・楽・下着
  • メッキのことならめっきのソムリエ/ニムラ
  • 残留農薬検査・食品検査分析 | 食品検査センター

制作実績をもっと見る

Syndicate this site (XML)
RSS2.0
SBコンサルQ&A
Webコンサルティングに関する広範な情報を毎月配信します。

PageTop