Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記
はじめに 皆様 JavaScript のスピード競争が激化し、 ECMAScript 3.1 の仕様の策定が進むなど、激動の JavaScript 時代をいかがお過ごしでしょうか。 さて今日は、今、ちまたで大ブレイクの兆しを見せている DOM Storage という仕様を紹介したいと思います。 DOM Storage とは何か まず、 DOM Storage とはどんなものなのでしょうか。 とても簡単に言ってしまえば、とてもたくさんのデータが保存できてサーバーに自動で送られない Cookie みたいなものです。 さらに、 Cookie とは違って JavaScript からとても扱い易く作られています。 では、この DOMStorage の具体的なソースコードを見てみましょう。 <!DOCTYPE html> <html> <head><title>DOMStorage の使い方</tit
ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル:phpspot開発日誌
Using jQuery for Background Image Animations - Snook.ca ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル。 デモページ デモページを見ればわかりますが、カーソルをあわせると滑らかに背景がアニメーションされます。 アニメーションの仕方がなかなか良くて、左→右や、上→下のように方向を指定できます。 当然ですが、Flashを使わなくてもJSでこうしたことが出来て、今までありそうでしたが、そんなに多く見かけることがなかったテクニックではないでしょうか。 覚えておくとふとしたときに使えそうです。
Nihilogic: Javascript Super Mario Kart
Wednesday, May 21, 2008 36 comments Javascript Super Mario Kart Labels: canvas, games, javascript Seems I just can't let go of Mario. This is a prototype of a Javascript Mario Kart-like racing game. It uses the canvas element to do most of the rendering and should work in both FF2, FF3, Opera(9.27 and 9.5) and Safari 3.1+. There are a few glitches in Safari (at least in 3.1.1) in the kart sprites,
JavaScript でテトリスみたいなゲームを作ろう！ - セキュリティ＆プログラミングキャンプ JavaScript 入門講座資料
HTML とは HTML とは、誤解を恐れずに言ってしまうとウェブページ（ホームページ）を作るために使われている言語です。 例えば、以下のようなものが HTML です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>タイトル</title> </head> <body> <h1>見出し</h1> <p> 本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文<a href="hoge.html">ハイパーリンク</a>本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文 </p> </body> </html> サンプル イメージ湧きましたか？ では、何故 HTML という
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記
はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing
CoolClock - The Javascript Analog Clock
About CoolClock CoolClock is a customisable javascript analog clock. What's New (19-Aug-2010) Release version 2.1, new features include digital (text) display and two logClock modes. See logClock demo and demo2. (26-Apr-2010) Released new version 2.0 and added source to github. Added note about new onload requirements. (26-Apr-2010) Someone has created a CoolClock plugin for SongBird. Go check it
Canvas tutorial - MDC
このチュートリアルは、 <canvas> 要素を使用して二次元のグラフィックを描画する方法を、基本から説明します。ここでの例は、キャンバスで何ができるかを明確に示すものであり、独自のコンテンツを作成するためのコードスニペットも提供しています。 <canvas> は HTML の要素であり、スクリプト（ふつうは JavaScript）を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成したり、簡単なアニメーションを作成したりすることができます。 <canvas> は Apple が macOS Dashboard のために WebKit に初めて導入した後、ブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。 <canvas> を使うのはそれほど難しくはありませんが、 HTML と JavaScript の基本的な理解が必要です。一部の
14KB JavaScriptマリオをコードリーディングしてみたよ - aike’s blog
JavaScriptで書かれたスーパーマリオ。わずか14KBのサイズであのマリオを再現したということで話題です。 http://blog.nihilogic.dk/2008/04/super-mario-in-14kb-javascript.html これはソースを読まねばなるまい、ということでコードリーディングしてみました。14KBといってもYUI compressorで圧縮されているので、見るべきは圧縮前の方のソースです。 http://www.nihilogic.dk/labs/mario/mario.js 圧縮前といってもものすごいですよ、これ。空行やコメントを適切に入れて、分かりやすい変数名をつけて、しかも画像や音楽もすべてテキストデータとしてソース中に定義して、それでたったの35KB、1200行。 うーむ、信じられない。敵キャラのAIは？画像データは？JavaScriptでどう
Canvas - HTML5.JP
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
Javascriptとcanvasとインターフェイス（番外編）・・・マウス座標の取得 - GameSprit
自転車やMac・AppleScript、映画・小説やドラマのレビュー、備忘メモ・クイズなどを置いています。 前回の Javascriptとcanvasとインターフェイス（８）・・・入力部：座標 - GameSprit で作成したコードを Firefox に読み込ませてみましたが動作しません。 マウス座標取得今回は、マウスの座標取得に関して Mac OS X Leopard 上の Safari 3.1・Opera 9.26・Firefox 2.0.0.12・Firefox 3.0b2 で動作を確認してみました。なお、IE は対象外としました。 次のようなコードで検証してみます。 各ブラウザに読み込ませた後、canvas の右下角をクリックしました。<html><head><title>Javascriptとcanvasとインターフェイス（番外）</title> <meta http-equi
Javascriptとcanvasとインターフェイス（８）・・・入力部：座標 - GameSprit
自転車やMac・AppleScript、映画・小説やドラマのレビュー、備忘メモ・クイズなどを置いています。 canvas という描画するための HTML 要素が Dashboard の登場を機会に Safari や Firefox などに実装されているので、この canvas を利用したユーザーインターフェイス（UI）を検討しています。今回からは、マルバツゲーム（○×ゲーム、英語では Tic-Tac-Toe です）の入力部です。 前回までに、こんなふうにマルバツゲームのマス（枠）を描くところまできました。 設計した座標イメージは次の通りです。 今回はまず、マウスの動きと座標との相関を確認してみます。 次のようにコードを追加します。 スクリプト部 <script type="text/javascript"><!-- //マウスの座標を追い、body 内の id を "xy" とした div
Javascriptとcanvasとインターフェイス（７）・・・列・行を指定しコマを置く - GameSprit
自転車やMac・AppleScript、映画・小説やドラマのレビュー、備忘メモ・クイズなどを置いています。 canvas という描画するための HTML 要素が Dashboard の登場を機会に Safari や Firefox などに実装されているので、この canvas を利用したユーザーインターフェイス（UI）を検討しています。マルバツゲーム（○×ゲーム、英語では Tic-Tac-Toe です）の出力を意識して描画している段階です。 Javascriptとcanvasとインターフェイス（４） でマルバツゲームのマスを描き、Javascriptとcanvasとインターフェイス（５）・・・○を描く で○のコマ、Javascriptとcanvasとインターフェイス（６）・・・×を描く で×のコマを座標を指定して描きました。 でもいちいち座標を指定してコマを描くのは面倒です。そこで今回は列
Javascriptとcanvasとインターフェイス（６）・・・×を描く - GameSprit
前回(Javascriptとcanvasとインターフェイス（５）・・・○を描く - GameSprit) までにマルバツゲームのマスおよびコマの○を描画することができるようになりました。 今回はコマの×を描画してみます。 //×を描く。斜線同士の交差部分が座標座標(xx,xy)となる。１つのマスのサイズはw*h。 function drawBatu(tmp,xx,xy,w,h){ if (w < h) { var t = w;} else {var t = h;} t = t * 0.34; tmp.lineWidth = 2; tmp.beginPath(); tmp.moveTo(xx-t,xy-t); //右上を始点に tmp.lineTo(xx+t,xy+t); //右下までラインを描く tmp.moveTo(xx+t,xy-t); //左上を始点に tmp.lineTo(xx-t
Javascriptとcanvasとインターフェイス（５）・・・○を描く - GameSprit
自転車やMac・AppleScript、映画・小説やドラマのレビュー、備忘メモ・クイズなどを置いています。 Karafuto Blog User JavaScriptの練習 - canvas要素でページに円を描く Javascriptとcanvasとインターフェイス（４）・・・アルゴリズム化 - GameSprit まででマルバツゲームのマスを描画しました。 今回は、○のコマを描いてみます。 arc(x, y, 半径, startAngle, endAngle, 回る方向) ＊startAngle と endAngle は、x軸の正の方向から見て時計回りの角度をラジアンの単位で表したものです。 //○を描く ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(90,80,(80*0.8)/2,0,Math.PI*2,true); 関数にしてみます。 //
Javascriptとcanvasとインターフェイス（４）・・・アルゴリズム化 - GameSprit
自転車やMac・AppleScript、映画・小説やドラマのレビュー、備忘メモ・クイズなどを置いています。 Javascriptとcanvasとインターフェイス（３） - GameSprit の続きです。 canvas という描画するための HTML 要素が Dashboard の登場を機会に Safari や Firefox などに実装されているので、この canvas を利用したユーザーインターフェイス（UI）を検討しています。マルバツゲーム（○×ゲーム、英語では Tic-Tac-Toe です）の出力を意識して描画している段階です。 前回は canvas にマルバツゲームのマスを描画しました。手法としては、ラインを１本ずつ引いて行くというものでした。 今回は脱線して、マスを描画するという手順を、上記のような具体的なものから一般化・汎用化し再利用しやすくしてみます。アルゴリズム化 (めが
Javascriptとcanvasとインターフェイス（３） - GameSprit
自転車やMac・AppleScript、映画・小説やドラマのレビュー、備忘メモ・クイズなどを置いています。 前回（Javascriptとcanvasとインターフェイス（２） - GameSprit） の続きです。 マルバツゲーム（○×ゲーム、英語では Tic-Tac-Toe というそうです）の入出力を意識して描画してみましょう。 マルバツゲームとは、３×３マスの陣地に○と×を一つずつ置いていき、タテ・ヨコ・ナナメのいずれかで、自分のマークを三つ並べた方が勝ちとなる ２人でプレイするケームです。 さて、今回はゲームのマスを描画してみます。 マルバツゲームの一般的なマスはタテ線が２本、ヨコ線が２本というものです。 ここでは、マルバツゲームのマス全体を正方形とし、余白を設けるため左上角の座標を(10,10)とし、サイズが 80×80 のマスを９つ描画することにします。マスはタテ３×ヨコ３個です。
Javascriptとcanvasとインターフェイス（２） - GameSprit
自転車やMac・AppleScript、映画・小説やドラマのレビュー、備忘メモ・クイズなどを置いています。 前回（Javascriptとcanvasとインターフェイス（１） - GameSprit） は背景色に黄色っぽい色を塗って、canvas がどんなふうに反映されるかを確認しました。 今回は、この canvas に描画してみます。 前回同様に Canvas tutorial:Basic usage - MDC を参考しますと、canvas への2D描画の準備として次のようなスクリプト呪文を使うそうです。この記述がないと描画できません。Taken SPC : いい加減な canvas 要素の紹介 には別のやり方の解説があります。（それだけでなく、canvas を利用した描画についての網羅的な解説がされています） var canvas = document.getElementById('
Javascriptとcanvasとインターフェイス（１） - GameSprit
canvas という描画するための HTML 要素が Dashboard の登場を機会に Safari に実装されたということ話なので、ユーザーインターフェイス（UI）という観点でテストしてみます。 オンライン上の資料としては、同じく canvas を実装している firefox のチュートリアル（Canvas tutorial:Basic usage - MDC） が詳しいです。Dashboard を意識して実装された元祖の Safari とより汎用的な firefox の違いなど（例えば canvas タグに 閉じタグが必要）も解説されています。 canvas を利用するには、まずは canvas タグを記述します。『 canvas 要素は width と height の二つの属性しかもちません。』 では、背景色に黄色っぽい色を塗って、canvas がどんなふうに反映されるかを意識し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://youmos.com/news/mochaui
https://www.func09.com/wordpress/archives/117