今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
HTML5とjQueryでブラウザーがペイントツールに！ (1/3)
HTML5 Canvasで作った「シンプルペイント」。色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5 CanvasとJavaScriptを使って、Webブラウザー上で動くお絵かきツール「シンプルペイント」を制作する企画。前回の記事では、コアとなる描画機能を作成し、PNGファイルへ保存する方法を解説しました。今回は、このシンプルペイントをベースに、ブラシの色やサイズ（太さ）を変更できるように拡張しましょう。 ブラシの色選択機能を付けるには 前回作成したシンプルペイントは単色（赤色）の描画しかできませんでした。このままだとお絵かきツールとしては不十分なので、ブラシの描画色を選択できるようにしましょう。今回は8色（黒、青、赤、紫、緑、水色、黄、白）のカラーパレットを用意し、マウスで選択した色
HTML5&Javascriptでサーバーレスなパーソナル向けWiki(hiWikiMini)を作ってみた。 - .h2oのお気楽日記
情報収集やまとめを行うにも便利なWiki。 でも個人で使う時でも、Webサーバや専用アプリが必要なのはちょっとハードルが高い状況でした。 そこで、お手軽に自分のWikiを使えたらよいなと思い勉強がてらに、HTML5&JavascriptでhiWiki Mini(based on Html5 I Wiki Mini)を作ってみました。 まだまだ機能不足な点や不具合がのこっていると思いますが、まずはコンセプトモデルとして公開して改善していく事にしました。 コンセプト シンプルな構造 クライアントサイドで動作(HTML5とJavascriptで構成) マルチプラットフォーム 単一ファイルで動作（データの保管に別ファイルを作らない） じつは従来から、HTMLベースのWiki*1はありましたが、データの保存のために別ファイルを生成したり、自己書き換えを行っているようです。 hiWikiMiniではH
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
JavaScriptで波をつくろう。リアルタイム波形生成＆再生 - Yanagi Entertainment
前のエントリでこんなことを書きました。 JavaScriptで波形データを読み書きすることができる。しかし再生するのは難しい。 HTML5のaudioタグとData URIを組み合わせればできないこともないが、コストが大きすぎる。 コストが大きいのは音声ファイルが大きいからです。50MBある波形をいちいち変換してられません。 でも小さい波形ならできるかもしれない！ ということでやってみました。 基本的なアイディア 波形データをつくる（数値の配列） 波形をバイナリ列に変換する バイナリ列にWAVヘッダを付加する Base64エンコード audioタグのsrc属性に指定 audioを再生 つくったもの http://yanagiatool.appspot.com/jsaudio/mmltest.html シンプルなMMLプレイヤーです。JavaScript + HTML5。 ベロシティとかルー
[HTML5] - 個人事業主のつぶやき
http://pluswing.net/html5/canvas.html ということで、テトリスを実装してみた。 テトリス自体(tetris.js)は小一時間でてきとーに実装したので、 ブロックの回転とかが微妙な感じ。 ※FirefoxはCanvasがもっさりしてるので、Chromeでプレイすることをオススメします。 それは置いておいて、なんでHTML5のCanvasを使おうかと思ったのかというと、 ChromeのCanvasが恐ろしく速いという事実。*1 これは、ゲームが作れるぞ！という興奮から。 (僕がゲームを作ってたのは7年ほど前になるけど、 その頃のそこらにあるマシン並に速度出てそうな勢い。Chromeは。) 実はテトリスは副産物で、 Canvasを使うにあたり、ライブラリが無いとねー ということで、描画周りのライブラリをひととおり作りました。 一個くらい作ってみないとライブラリ
![[HTML5] - 個人事業主のつぶやき](https://cdn-ak-scissors.b.st-hatena.com/image/square/404ce996d745470d6733edb655b9495b03108562/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F04eb5f21995bc2ea37ed68294e1fc28d804411f8%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Ft%252Ftoshiyuki_saito%252F20100312%252F20100312003029.png)
HTML5 Web Storage-- な機能を uupaa.js に実装してみた - latest log
Cookieよりも大容量のデータをクライアントサイドに保存する仕様。それが HTML5 の Web Storage です。 Web Storage はまだ策定中です。 Firefox3.5+, IE8+, Safari4+, Opera10.50+ など最新のブラウザでは既に利用可能ですが、「何年も待ってられない、今すぐ使いたい」ですよね? そこで、クロスブラウザな Web Storage 相当の機能を uupaa.js に実装してみました。 # sessionStorage は実装していませんよ デモ http://pigs.sourceforge.jp/blog/20100104/20100104_uu.storage.htm Firefox2+, Safari3.1+, IE6+, Google Chrome3+, Opera9.2+ で動作確認してます。 ストレージバックエンド 以
HTML5のscript要素でasync, deferを使ってパフォーマンスアップ - IT-Walker on hatena
http://code.google.com/speed/articles/html5-performance.html JavaScriptの高速化手法を紹介する、Googleのプロジェクト「speed」がリニューアルしたと言うので見てたら、「HTML5でパフォーマンスアップ」てなタイトルがあったので「なぬ？」と思って読んでみました。 HTML5使ってもそんな効力得られないだろう・・・と思って読んでみたら、「HTML5の記法を使えばnバイト節約」みたいなチョコザイな手法が主だったのでちょっと苦笑(^^; とはいえ、script要素に今度から加わるasync属性について等は、日本語で説明されている記事がほとんどないので、全体的に要約しておきます（あくまで翻訳ではなくて要約。時間がないので超適当です。正確なところは原文を読んでください）。 DTD HTML4までは以下のように書かなきゃいけな
HTML5 のセクションアウトラインを取得する JavaScript - IT戦記
id:vantguarde さんが HTML5 のセクション 3 箇条を書かれて紹介しています スタイルシートやスクリプトの都合には使わないこと。それらにはdivを使うこと。 article, aside, navが適切な場合には、そちらを使こと。 セクションの先頭に見出しが自然に存在してない場合には使わないこと。 sectionの使い方とセクション三箇条 - vantguarde - web:g すばらしいですね！ 便乗して セクションのアウトラインを求める JavaScript（YAPC 前夜祭で紹介したやつ）を公開します http://amachang.sakura.ne.jp/misc/outliner.js この JavaScript は 以下のアルゴリズムをそのまま JavaScript で実装したものになっています 4.4.11.1 Creating an outline ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://amachang.sakura.ne.jp/misc/sakebi/