JavaScriptを使ってアニメーションを書くときに有用なテクニックの、基本中の基本をご紹介します。おそらく、このブログを見ている人のほとんどにとっては釈迦に説法だと思います。今回、requestAnimationFrameの話すらしません。その点、ご留意ください。 まず、JavaScriptでアニメーションをする場合に気をつけないといけないのが、一度JavaScriptの実行（Context）を抜けないとブラウザに描画が反映されないということです。簡単に言うと、 <html><head><title>bad sample</title><script> onload = function() { var e = document.getElementById("e"); for(var i = 0; i <= 100; i += 5) { e.style.left = e.style.
2011年12月15日20:00 カテゴリTipsiTech 備忘録 - 本blogをHTML5にするためにやったこと 正確には、「本blogをIEから見てHTML5に見えるようにするためにしたこと」ではありますが。 レシピ 二つだけ <!DOCTYPE html>を<html>の前に追加 <head>内に以下を追加 <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <![endif]--> 本来であれば1.だけでIE9はHTML5モードになってくれるはずなのですが、2.がないと駄目でした。実のところHTML5では2.はinvalidなのですが、重要なのはvalidityではなくブラウザーの挙動なので。Chrome Frameでも利用されているテクニックですし。 internet ex
この記事は deprecated です。 はてなブログのフィードバックでこの旨を連絡したら直してくれました。 今は script タグ内では自動リンク化されないようです。 http://makimoto.hatenablog.com/entry/2011/11/09/235347 本文 はてなブログ、HTML モードで色々な JavaScript が通っちゃって楽しいんですが、生で JavaScript を書く上で多少注意するべき点があります。 例えば、お行儀の良い人でしたら jQuery を使う際以下のように $() を使わずに jQuery() と明示的に記述するはずです。 <script type="text/javascript">// <
2011年10月09日14:15 カテゴリLightweight Languages DHTML - 最低限文化的なCSSアナログ時計 これ見たら一つ作り置きしたくなってきたので。 Demo 右の通り。 一応 WebKit (Safari & Chrome on Mac/PC/iOS/Android)、Firefox、Operaで動くのを確認。Operaで動く分、AppleのiPod Nanoのページよりも互換性は少し上です。 なぜかIEで動かない。参考にした Fun with CSS Transforms in Firefox and Webkit - zachstronaut ではIEでもぐるぐる回転しているのですが。 何をやっているかは、ソースを見ればおわかり頂けるかと。 それよか、ちょっと驚いたのが、これ。 WebKitのWeb InspectorってリアルタイムでDOMの変化追え
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
2011年05月19日09:00 カテゴリ javascript - jslinuxをローカルで 先週末から体調不良なので、今話題のjslinuxと戯れてみた。 http://bellard.org/jslinux/ ブラウザでJavaScriptが動く時代がやってきた！ - 葉っぱ日記 もとのディスク容量が少ないので、適当な母艦を用意して、こんな感じ で新しいディスクイメージ作って、CocProxy や Fiddler の AutoResponder を使って root.bin へのリクエストをローカルのファイルに差し替えてやれば、好きなファイルも入れられますね。 それだと環境を整えるのが面倒なので、以下のようにして必要なファイルを全てローカルにもってきてもOKだった。 index.html linuxstart.bin vmlinux26.bin root.bin あとは root.b
円を書く ↑drawArcメソッドで円を書く事ができます。 オプション引数で座標位置とサイズ、色などを指定します。 $("canvas.test").drawArc({ fillStyle: "black", x: 100, y: 100 }); 短形を書いて回転させる ↑rotateCanvasで回転軸の座業と角度を指定します。 $("canvas.test").rotateCanvas({ angle: 45, x: 100, y: 100 }) .drawRect({ fillStyle: "#000", x: 100, y: 100, width: 100, height: 50 }) .restoreCanvas(); グラデーションを作成する ↑gradientメソッドでグラーデーションオブジェクトを作成し、 描画する際に指定するとグラデーションが適用されます。 var lin
お気に入りのサイトにアクセスするには、ブックマークバーからのアクセスが便利ですが、何気に結構なスペースを占拠しているのが少々気になるところです。 そこで今回は、必要ない時にブックマークバーを非表示にするための設定方法をご紹介。普段は非表示、マウスオーバーで表示できるように設定できます。 過去にライフハッカーでは、Firefox 3でブックマークバーを自動で非表示にするCSSハックを紹介しました。米Lifehacker読者のPrairieMoonさんの指摘よると、Firefox 4ではさらなるカスタマイズも可能となっており、さらにパワーアップしているそうです。 @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); #PersonalToolbar { visibility: collaps
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。 出力したいメッセージを指定するだけできれいに整形して表示してくれます。 例えば、以下のようなJavaScriptを実行してみます。 log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); ↑すると、こんな感じで素敵に表示してくれちゃいます。 アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。 使い方 使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。 <
Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being
従来はブラウザゲームと言えばFlashが主流でしたが、iPhoneやiPadの登場でプラグインを使用しない作り方が求められてきています。 その中で今一番注目を集めているのはやはりHTML5では無いでしょうか。 LimeJSの目標はユーザーがFlashで出来ているのかHTML5で作られたのかを意識しないような操作性を求めているとの事です。 実際にデモを体験してみるとわかるのですが、かなり直感的に操作できるようになっています。 動作ブラウザはHTML5が動作するものとの事で、 Chrome、Safari、Firefox、Operaで動作するようになっています。 もちろん、iPhone、iPadやAndroidでも動作します。 IEだけはまだサポートされていないようですね。 ソースコードはGithubから自由にダウンロードできるようになっていますが、 セットアップにはpythonが必要なようです
1 kB 以下の JavaScript デモを作るコンテスト「JS1K」が開催され、トップ 10 が発表された (本家 /. 記事より) 。 このコンテストのルールは「1 kB 以下の JavaScript でイケてるデモを作る」という至ってシンプルなもの。外部ファイルの使用は認められておらず、twitter で投稿できる 140 文字以内に収めた場合にはボーナスポイントがもらえるそうだ。 3 位のTetris with sound (音量注意) は操作はもちろん、題名の通りゲーム音楽までついている。1 位に輝いたのは「Legend Of The Bouncing Beholder」という横スクロールゲーム。 アクセス過多のためか残念ながらデモが開かないときもあるが、1 kB の可能性の大きさに改めて驚かされる。
2010年08月25日06:30 カテゴリLightweight Languages Ajax - jQueryでjQueryを内観する jQueryは使っても楽しいのですが、ソースを読むのはもっと楽しかったりします。 いっそjQuery自身にjQueryを読ませたら読むのも楽になるのでは? jQuery Source Browser というわけでこさえたのがこちらです。 Open in New Window select from the menu on the left こんなのがあっという魔に作れるところも、jQueryの魅力です。 で、実際にソースを見てみると、白魔術も黒魔術も使いまくりですね。 たとえばjQuery.isType()。toString.call(obj)とはね。 たとえばjQuery.globalEval()はeval()を全く使っていないし。 あとこれ書いて気づ
もんたメソッドの簡単サンプル 2005-06-01-3 もんたメソッドの簡単サンプルHTMLを作ってみました。コピペするだけ。 YappoLog <http://blog.yappo.jp/yappo/archives/000245.html> や antipop2.0 <http://antipop.gs/mt/2005/06/01/014516> で紹介されてる方法もありますが、ええと、「10秒以内にさくっと試したいんだよね」という気の短い方はどうぞ。 ソース： <style> .kakusu {background-color:black;color:black;} </style> … 今話題の「<span class="kakusu" onclick="this.className=''">もんたメソッド</span>」。<br /> コピペするだけで使える<span class
週末はオレ標準JavaScript勉強会のUstreamを眺めてました。ago（@kyo_ago）です。 以前jQuery使いが陥りやすい罠の中で「4 何でも一行で書こうとする」という点を上げたのですが、以下のようなmethodを定義することでmethod chainのデバッグが楽になるので紹介したいと思います。 $.fn.p = function (id) { var arg = [this]; if (id) arg.unshift(id); if (!window.console) return this; var c = window.console || { 'log' : function () {} }; (c.debug || c.log).apply(c, arg); return this; }; 具体的な使い方ですが、以下のように確認したいmethodの後に.p()を
EPUB や CSS と日本語レイアウト HTML5 と電子書籍 アンテナハウス 村上 真雄 @MurakamiShinyu 2010-07-14 「第８回HTML5とか勉強会」での講演資料 [HTML5プレゼンツールNerine版もあります] 村上 真雄 (@MurakamiShinyu) 自己紹介 Twitterで公開しているプロフィール： XML/HTML+XSL/CSS 自動組版ソフト Antenna House Formatter 開発者 アンテナハウス取締役 W3C会員としてXSLとCSS3仕様に関わる HTML5 IG JP共同議長 JEPA EPUB研究会員 世界標準仕様（特にHTML+CSSとその応用のEPUB）で、まともな日本語組版を可能にしたい Antenna House Formatter 1999年、当時W3Cドラフトだった XSL (Extensible Sty
2010年07月14日05:00 カテゴリTipsLightweight Languages tips - Google Translate の翻訳結果にpermalinkを 翻訳精度語彙を除いて疑問なものの、その手軽さで私も愛用しているGoogle Translate には、なぜかその翻訳結果のpermalinkがないように見えます。Google Mapsにはそれをさらに短縮する機能すら追加されたというのに。 しかし、実際には存在するのです。 Demo Text(q):千と千尋の神隠し Source Language(sl): Target Language(tl): Permalink 要は http://translate.google.com/?q=text&sl=sl&tl=tl http://translate.google.com/#sl|tl|text のどちらかの形式がP
2010年07月05日04:00 カテゴリMathMoney ストレートランドに学ぶ格差の本質 スタートが完全に平等で、 誰も誰の持ち物を奪わない公正な社会があったとしても、 それでもやはり格差は発生してしまう。 ことをデモするシミュレーションを作りました。 フラットランド 多次元の冒険 Edwin Abbott Abbott Ian Stewart注 / 冨永星訳 [原著:The Annoteded Flatland] まずシミュレートする世界ですが、なんと一次元です。 二次元のフラットランドに対し、一次元なのでストレートランドという名前がついています。 世界も住民も線分で、世界のはじまりにおいて住民は全く同じ長さの線分として誕生します。 住民の「食糧」は、この線分世界に均等な確率で出現する「点」です。マナとでもいいましょうか。たまたまこの点と交わる住民が、このマナを手に入れます。 マナ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
