Generating High-Resolution Graphics for iPhone 4 with HTML5’s Canvas Element - iWalt.com
Update: If you’re also interested in targeting the Retina Display with high-resolution Apple Touch Icons, iOS 4.2 supports a method to do just that. If you’re using HTML5’s canvas element to generate graphics for your mobile web app, it’s worth taking a moment to add support for high-resolution screens like the iPhone 4’s retina display. The solution I arrived at was to take my existing drawing an
Fullscreen API を簡単に試してみた
Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API ですが、お勉強ついでに簡単に試してみました。 ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen （Editor's Draft） が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。 例えば HTML5 で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、
http://jlongster.com/2011/11/21/canvas.html
My name is James Long, and I'm a web developer for Mozilla. I work on things that are interesting, like web stuff and games. As notes in the Release Notes, Firefox Aurora introduced the Fullscreen API. This means that it will appear in the release version of Firefox in about 3 months. This is one of several features that will be fantastic for games on the web. Other exciting APIs are the Gamepad,
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
iScroll 4 – Matteo Spinelli's Cubiq.org
iScroll finally received a complete rewrite. Now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability. Download Screencast Live Demo GitHub Forum Project info Last code update: 2012.07.14 – v4.2 Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webk
iScroll – Matteo Spinelli's Cubiq.org
The overflow:scroll for mobile webkit. Project started because webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area. Until now. This script has been superseded by iScroll 4. This page is kept for historical reasons. Get the Script Screencast Live Demo Publi
新しいiOS5のMobile Safariでmeta-viewportのワーニングが出たのでWebKitのソースを読んでみたというお話 - l4l
どんなワーニング？ iOS5(beta)とかChrome 13などで、ふと気付いたら自分が開発しているページでワーニングが出ていた。「widthってkeyに対してdevice-widthなんて値は指定できないんだぜJK」とかそんな感じ。 Viewport argument value "device-width;" for key "width" not recognized. Content ignored. 実際に指定していたviewportは以下な感じ。 <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;"> ちなみにiOS4では出力されてない。はて原因何だろう？という今日の出来事に対するメモ。 結論 metaタグのcon
JavaScriptのsortは必ずしも安定ではないのを覚えといてね - by edvakf in hatena
配列要素はソート (並べ替え) される。ソートは必ずしも安定的ではない(つまり、等価と比較された要素が元の順で残るとは限らない). comparefn が undefined でないならば、それは 2 個の引数 x と y を受け付け、 x < y ならば負の値、 x = y ならば 0、 x > y ならば正の値を返す関数であるべきである。 15.4 Array オブジェクト (Array Objects) 安定であると仮定した実装はしないでください。(複数列でのテーブルソートなど注意) 以上。 これより先は脱線なので読み飛ばしてもらってかまいません。 脱線1 Tagrolls on Delicious このページを開いたとき、Firefox と Safari ではタグがアルファベット順にソートされる。(たぶん IE も) Chrome と Opera では変な順にソートされる。 htt
ブラウザでストレージ？ Web Storageを使いこなそう
連載目次 ■Web Storageの概要と活用例 旧来（＝HTML 4.1以前）のWebブラウザでは、eコマース・サイトのカート情報やログイン状態の管理情報などのデータをブラウザに保存する仕組みとして、大半のWebサイトではクッキーを利用していた。しかし、クッキーでは、保存容量が4KBytesまでであることや、すべてのリクエストに対してサーバにデータを自動で送信するため、容量制限やセキュリティ対策に悩まされることも多くあった。 HTML5では、クッキーに代わるデータ保存の仕組みとして、「Web Storage」と呼ばれる機能を利用できる。Web Storageは、ブラウザ側でKey-Value型でデータを保存する機能のことで、現在のインターネットを取り囲む環境に対応した「クッキーの後継技術」ともいえる。 Web Storageとクッキーの機能の差異は、以下の表のとおりだ。
[jQuery]こんな機能があったんだ。jQuery stop()|WEBプログラム覚書
HOME>WEBプログラム覚書>[jQuery]こんな機能があったんだ。jQuery stop() [jQuery]こんな機能があったんだ。jQuery stop() 「Buttons like Windows 7 with JS & CSS」を見てて って記述あったので調べてみたらstop()って色々使えるんですね。 全然しらなかったです。 stop([clearQueue], [gotoEnd]) 引数は2つ。何も指定しないとfalse [clearQueue]がtrueの場合、持っているキューが全て削除される。[gotoEnd]はtrueにすると現在のアニメーションの最後のコマへジャンプする。
jQueryでスクロールしても上に固定されるメニュー｜Webpark
よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー（このブログは非表示にしてます）みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =
ke-tai.org > Blog Archive > 90秒で理解するiPhone JavaScript（マルチタッチ編）
90秒で理解するiPhone JavaScript（マルチタッチ編） Tweet 2008/7/28 月曜日 matsui Posted in iPhone | 10 Comments » 仕事でiPhone向けサイトを作ることになるかもしれず、色々と調査中です。 まずはiPhoneならではの機能ということで、マルチタッチについて調べてみました。 ここまでわかったことをメモ代わりに記載したいと思います。 今回はひとまず座標の取得までです。 ゆくゆくは、こちらのムービーのように凝ったギミックを作りこみたいと思っています。 マルチタッチの座標を取得するのは思ったより簡単で、抑えるポイントは4つだけです。 Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難 タッチのイベントは、リスナーまたは「onTouchXXX」から取得 タッチ数は「event.touches.length
クロスブラウザでクリップボードを扱えコールバック等で便利に使えるjQueryプラグイン「zClip」:phpspot開発日誌
クロスブラウザでクリップボードを扱えコールバック等で便利に使えるjQueryプラグイン「zClip」 2011年02月04日- zClip :: jQuery ZeroClipboard クロスブラウザでクリップボードを扱えコールバック等で便利に使えるjQueryプラグイン「zClip」 IE, Firefox, Chrome 等で問題なく動作するクリップボード用プラグインのご紹介です。Flashを内部的に使って、クロスブラウザを実現しています。 コピーしたいテキストはjQueryベースということで $(element) で指定することが出来るので超便利なのと、コピー前/後のコールバック関数を指定できることで、コピーが完了した際にメッセージを出したり、要素の色を変えたりすることが出来ます。 コードは次のようにシンプルに記述できます。Flashのパスなんかもここで指定できます。 jQuery
クロスブラウザで動作するクリップボード操作用jQueryプラグイン「Clipboard plugin」:phpspot開発日誌
クロスブラウザで動作するクリップボード操作用jQueryプラグイン「Clipboard plugin」 2010年06月15日- Clipboard plugin for jQuery クロスブラウザで動作するクリップボード操作用jQueryプラグイン「Clipboard plugin」 IE以外用にFlashを使ってクリップボードを使う機能はよく知られていますが、jQueryベースのクロスブラウザ対応のライブラリのご紹介です。 使い方が超簡単で、次のように1行記述するだけでOKです。 $.clipboard( "You clicked on a link and copied this text!" ); swf の位置をオプションで指定することなんかも出来るみたい。 jQueryを標準導入しているサイトには簡単に組み込めて便利そうですね。 関連エントリ FirefoxやChromeでも
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
jQueryプラグイン サンプル（メニュー系）：skuare.net
JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、メニュー関連のjQueryプラグインを紹介しています。 シンプルなサイドメニュー表示jQueryプラグイン「jQuery Sidebar」 表示させる要素が限られているWEBサイト。 特にスマートフォン向けではメニューなどをトグルで表示させることが多いかと思います。 こんな時はシンプルにサイドバーを表示させるjQueryプラグインjQuery-sidebarはいかがでしょうか。 via：jQuery-sidebar
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 canvas full-screen and full-page | Experiments on GNU/Linux
JSNES: A JavaScript NES emulator
https://atmarkit.itmedia.co.jp/ait/subtop/features/da/ap_introhtml5_index.html
jQuery Slider plugin