canvasが手軽にウェブで試せるアプリFirstCanvasを作ったよ

http://sandai310.com/firstcanvas/

canvasをウェブで簡単に体験できます。


canvasの素晴らしい日本語リファレンスはありますが、

http://www.html5.jp/canvas/ref.html

少し難しいのでイメージがわきません。じゃあ触って試せばいいじゃーんてことですが、イヤだめんどくさい!という動機で簡単にウェブ上で試しながら機能が確認できれば楽だなってことで習作として作りました。

とりあえず位置付けとしてはcanvasの学習アプリってところで。

コンセプト

誰でも手軽にウェブでcanvasのプログラミングができる、というコンセプト。たぶん誰でもできると思います。適当に見よう見真似でいじいじできますのでいじいじしてください。できなくてもいじいじいじけないでいじいじしてください。実はいじいじ言いたいだけです。

できること

canvasで使えるメソッドやプロパティを直接いじって実行することができる。そのまま。メソッドに引数を設定したりプロパティに値入れたりといった操作を簡単に体験。リアルタイム(っぽく見えるだけだけど)で実行結果確認できて分かりやすいと思う。

スクショ。


手軽にcanvasのメソッドとかプロパティの機能を確認したい人や、まーとりあえずプログラミングってどんなんかなーやってみよっかなーという初心者な人まで幅広くどうぞ。


これを利用した人でどういった成果が得られたかというと、

「FirstCanvasのおかげで彼女ができました!
「FirstCanvasのおかげで東大に受かりました!
「FirstCanvasのおかげで就職できました!
「FirstCanvasのおかげでやっぱりニートになりました!
「FirstCanvasのおかげで1週間の便秘が治りました!
「FirstCanvasのおかげで2週間の下痢になりました!
「FirstCanvasのおかげでObject-cができるようになりました!


といった声でした。いやー私もビックリするぐらいのウソだよ!

対応ブラウザ

  • Firefox3.6.8以上
  • Google Chrome5.0以上
  • Opera10.61以上
  • safariは未確認です。Chromeが大丈夫なら良いと思うのですが
  • IE9beta(もっさりしている。もさもさ)

IE8以下は未対応。excanvasFlashCanvasで対応させても意味が無さそうなのでやめました。IE9betaについてはほとんど確認していませんがだいたい大丈夫かと。IE9ppも今どれぐらいかわかりませんが、betaが大丈夫ならそっちも大丈夫でしょう。

そういうわけでSleipnirもIE9betaに対応しているのかな?もししてたらIE9系対応の入れてください。

IE9は若干もっさりしているのでFirefoxChromeあたりが無難です。もっさりなのはスキル不足です。ごめんね。

その他マークアップやデザイン面などHTML5やCSS3の要素も実験的に取り入れて作りました。上記の対応ブラウザのバージョン以下はサポートしていませんので最新のブラウザでどうぞ。

使い方

基本的に、リファレンスの補助として使えるよう、プロパティやメソッドのカテゴリ分けは同じ名前を利用させていただいてます。

なんだかんだで触りながら機能を体験した後にリファレンスを読むと分かりやすいです。だからリファレンスと併用すれば幸せ。

1.利用するメソッドやプロパティのカテゴリを選択

MとかPとか色付いてる隣のやつがカテゴリ名。Mがメソッド、Pがプロパティという意味。同じような名前があるけれど、英語も確認したらこれがベストかと思う。

適当にクリックしたら、左下の一覧にそのカテゴリのメソッドやらプロパティやらが白色で表示されます。

2.利用するメソッドやプロパティを選択

使うメソッドやらプロパティやらクリック。右側に味気なく値の入力欄が表示されます。

3.メソッドの引数やプロパティの値を入力して実行

使い方は解説とかURLとか参考に。


これが一連の操作の流れ。簡単ですね。

パネル

右側にcodeとかtoolとかいうのがありますがそれがパネルです。そこに実行したメソッドやプロパティの一覧が見えたりいろいろ情報が確認できます。邪魔なら横三角のとこ押せばひっこみます。とはいえ結構便利よ。

codeパネル

実行したコードを可視化。実行されたプロパティやメソッドは実際にどのようなコードで行われているのかすぐ反映されます。結構便利よ。

ボタンについては、

  • Clear
    • 初期化。最初の状態にまっさらになります
  • Undo
    • ひとつ前に戻ります
  • Copy
    • 実行したコードをコピーしやすくします


あ”ーわけわがんねええ!何もかもリセットしたい!canvasも!オレの人生のcanvasもおおおお!!ってときはClearすればリセットできます。Undoについては強引に実装しているのでうまく機能しないときがあるかも?Copyはおまけ。

あ、やっぱり人生はリセットできません。残念無念><

tool

これあったら便利かなって情報を可視化。結構便利よ。

  • CanvasSize
  • CanvasCoordinates
    • canvas上のマウスの位置と、左クリックした座標を保存
  • ColorPicker
    • カラーを扱うメソッドやプロパティ用にカラーコードを確認できる


その他何か必要があればつけたしていくかも。

howto

このページのリンクが張ってあったりなんやかんやの情報がちょこんとあります。結構便器よ。MoreStudyのリンクはおまけ。ステップアップにはjsdo.itが無難。アニメーションやってみましょう。

ファーストなきっかけに

FirstCanvasはこれからcanvasを扱うにあたって手軽に把握しておきたいって人や、プログラミングを体験してみたいって人向けです。そういったどなたかの何かのファーストなきっかけになれば良いかなと。

ならなかったら仕様がないけれど、いずれにしてもcanvasで何かやろうって思っている人がんばってください。

不具合とか

誤字脱字脱衣不具合要望欲望願望等ありましたらtwitterでもメールでもコメントでも教えてくれたらうれしいです。

あまりテストしていないのでバグとかたくさんあると思います。ドキュメントも私の解釈が間違っている部分があるでしょうから、気になったことは何でもご指摘又はご指導ください。