JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
CoffeeScriptを使うべきか、使わざるべきか？ - にのせき日記
最近CoffeeScript界隈のブロゴスフィア(死語)を賑わせていた「CoffeeScriptを使うべきか、使わざるべきか？」という話題についてまとめてみた。 以下の記事紹介は超訳かつ要約なので詳しく知りたい人は元記事を参照のこと。 ことの発端はこの記事。 SnackJSの作者がCoffeeScriptをディスる。 A Case Against Using CoffeeScript by Ryan Florence デバッグの問題 CoffeeScriptが生成するJavaScriptはきちんとしているけど、結局は自分が書いたコードじゃないため読みにくい。自分で直接書いたほうが見やすい。 それにCoffeeScriptをデバッグするワークフローは大変だ。 まず問題がJavaScript内のどこで発生したのかを突き止める(CoffeeScriptのコードと行単位で対応してないから大変だ)
本当のJavaScriptを知っているか！具体的にコードで学べる「テスト駆動 JavaScript」 | Act as Professional
本書は裏表紙に「中級技術者向け」と明記されている。JavaScriptの言語仕様に関して、入門したことない人や、関数型の言語に見地のない人は、パーフェクトJavaScriptやサイ本あたりで、JavaScriptの言語仕様を身につけてから、取り扱うことを推奨する。それぐらい価値のある内容に本書は仕上がっている。 そして、 正統派なTDD(テスト駆動開発)について理解したい JavaScript自身の言語的な特徴を押さえておきたい テストできるJavaScriptのコードを多く閲覧したい 実際のプロダクトに活用できるアプローチを数多く知りたいと、考えているJavaScriptを日頃から書いている人、携わっている人に、必ず読んでもらいたい1冊である。 全体を通じて、テストできるコードの特徴は何か、単体テストとテスト駆動環境の利点を享受できる優れた単体テストはどのようなものかをサンプルとともに示
stockNum.App - Coming Soon
stockNum.App Something new is just around the corner 👍👍
jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル
自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script type="text/javascript" src="h
JavaScriptで比較的本気でお絵描きアプリを作ってみた | fladdict
JavaScriptで結構ガチに、お絵描きツールを作ったみました。推奨ブラウざは、IEとOpera以外。 実装期間はポケモン・ホワイトをやりつつ、トータルで1週間ほど。 今後、人生をFlash, iPhone, HTML のどの方向にリソース配分するか？ということで、実験的にHTMLも触ってみるテスト。やってみたら、結構いける感覚。IEさえ無視すれば。 以下、雑感。 Flash と JSの比較 かつてFlashが持っていた、実行速度という究極のアドバンテージはもはやないに等しいようです。 いままで「指先ツール」のような負荷の高い機能はFlashでも大分辛い機能でしたが、現在のJSでは遜色なく動きます。カラーホイールも全部、リアルタイムに計算してグラデーションを生成していますが、無問題。 こうなると疑問になってくるのは、Flashの優位性。 正直、現在WebにおけるFlashのプレゼンスは大
WebSocketで目指せ“リアルタイムWeb”！第1回 node.jsの衝撃とWebSocketが拓く未来 - ＠IT
ご挨拶 こんにちは、ロンドンのNew Bambooという会社でWebエンジニアとして働いている@makoto_inoueです。ここのところ、PusherというWebSocketのクラウドサービスの開発に関わっています。今回から3回に渡ってWebSocketに関する短期連載を担当させていただきます。 私を含めたNew Bambooの面々（我々は自分たちのことをBambinoと呼んでいます）がWebSocketになぜ興味を持ったかということからはじまり、実際にクラウドサービスを始めるまでにいたったストーリーをお話ししたいと思います。そのストーリーを通じて、WebSocketが切り開く「リアルタイムWeb」な世界への可能性や技術的課題を皆さんと共有できればと思っています。
モダンブラウザで使う「Geolocation API」後編
もりやまです。 前回は「Geolocation API」の概要と、実際に使ってみたデモを紹介しました。 今回はもう少し突っ込んで、各 API の説明と、住所入力フォームへ現在の位置情報から参照した住所を自動入力するデモを紹介します。 void getCurrentPosition(successCallback, errorCallback, options) function successCallback 成功時に呼ばれるコールバック関数。引数に Position オブジェクトを取る。必須。 function errorCallback エラー時に呼ばれるコールバック関数。引数に PositionError オブジェクトを取る。 PositionOptions options オプション。 long watchPosition(successCallback, errorCallbac
コードDJ 第8回 – AutoPagerize_DOMNodeInserted・・・だと・・・？ - Fjord, Inc(株式会社フィヨルド)
毎週火曜日、Help me, hackers!に上がったコードを紹介していくコードDJ 第8回。 「おでのからだはぼどぼどだー！」 komagata a.k.a. DJです。 今週はコレ。 WordPress.orgのプラグイン一覧でダウンロード数に目印をつけて欲しい – Help me, hackers! 登録してくれたのはmonoooki a.k.a. 前田製作所。速攻解決してくれたのはazu_re a.k.a. Firefoxの人（DJ主観）。 ソースコード： [cc lang=”javascript”]// ==UserScript== // @name WordPress.org highlight counter // @namespace http://efcl.info/ // @description WordPress.orgのタグ/単語検索のダウンロード数によって色を
Closure Library API Documentation (Closure Library API Documentation - JavaScript)
What is the Closure Library? The Closure Library is an industrial-strength JavaScript library. It provides user interface widgets, an event framework, a packaging and dependency resolution system, tools for DOM manipulation, tools for creating animation effects (including drag and drop), communication utilities, a unit testing framework, and a wide variety of other packages. Google engineers devel
Developer's Guide - Google AJAX Libraries API - Google Code
Developer's Guide The AJAX Libraries API is a content distribution network and loading architecture for the most popular, open source JavaScript libraries. By using the google.load() method, your application has high speed, globally available access to a growing list of the most popular, open source JavaScript libraries. Table of Contents Audience This documentation is designed for people familiar
12 Steps to MooTools Mastery | Envato Tuts+
This tutorial is about understanding and mastering the MooTools library. It does so by offering a high level introduction to the history and foundations of the Core library: where to start, where to explore, what to master, and more. 1. Prototypal Inheritance The foundation of the MooTools framework is really in the prototypal inheritance model of JavaScript. In classical languages, like C++ or Ja
Gmailチームが明かすHTMLアプリケーション起動の高速化テクニック TechTalkManiacs
などという煽り気味なタイトルをついつけてしまいたくなる記事がGoogleCodeBlogに掲載されていました。 最初のほうはごく普通にJavaScriptを使ったRIAアプリケーションはどうしても起動が遅くなるため、それをどう減らすか、というテーマにそって書かれています。 方法として挙げられているのは、最初にすべてを読み込まず、モジュール単位で分割して遅延ローディングすること。ただし、それだけだと回線速度が遅く不安定なモバイル環境では問題が生じるためHTML5のキャッシュ機能を利用するといいとのこと。 遅延ローディングのためのさまざまな手法の得失や、例えばユーザーデータを読み込むときには動的ロードしない、というようにユーザーの操作を妨害しないよう留意することなどについても述べられていてそれだけでもノウハウとして十分に有意義なのですが、決め手として最後に出てくる方法がすごいです。 その方法と
ハイテンションAjax入門 - 三等兵
JSが少しできる人ならうじうじ考えるほどのこともでもない！ 何も難しいことはない！ぶっとんぢまいなよ！ヒャッパー！！！ というノリでAjaxを学んでみました。醜いです。 Ajax入門 Ajaxはいろいろできるんだぜ！ 以上入門終り！キミは完璧だ！次いけ！ Ajaxは非同期通信だかなんだかそんなもんはどうでもいいんだ！ どうでもいい！そんなことよりもXMLHttpRequestオブジェクト生成！ var request = false; if(window.XMLHttpRequest) { request = new XMLHttpRequest(); //frefox ie7,8 safai opera } else if(window.ActiveXObject) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); // ie6
グーグルが賭けるHTML 5の未来 － ＠IT
2009/05/28 「決してWebをあなどってはいけない」（Never underestimate the Web）。Google I/O 2009初日の基調講演でシュミットCEOに続いて登壇したのは、米グーグル バイス・プレジデントのビック・グンドトラ氏だ。ゆっくりと一語一語を区切りながら語り始めたグンドトラ氏の言葉には重みがある。彼は元マイクロソフト社員で、まさにWebをあなどっていた側にいたからだ。 グンドトラ氏はWindowsプラットフォームを唱道する立場にあった。彼に限らず、マイクロソフト社員の間には、ネイティブアプリケーションでなければできないことがあるとする見方が一般的だったという。「Keyholeという会社が出てきたとき、彼らが持つようなアプリケーションこそ、ネイティブでなければできないものだと言っていた。ところがグーグルは2004年11月にKeyholeを買収し、Goo
Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。 - IT戦記
はじめに JavaScript が書ければ、誰でも簡単に Firefox の拡張が書けてしまう。しかも、もれなく jQuery が付いて来る！ というものを Mozilla Labs がリリースしたみたいですね。 https://jetpack.mozillalabs.com/ というわけで 少し触ってみました Jetpack Feature の書き方 Jetpack で書く Firefox 拡張を「Jetpack Feature」といいます。 これは、以下の 2 つのものを用意すれば誰でも簡単に公開することが出来ます。 JavaScript ファイル 公開用 HTML ファイル JavaScript ファイル JavaScript ファイルには、 Jetpack Feature のアプリケーションコードを書きます。 (function() { Jetpack.statusBar.appe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Code Archive - Long-term storage for Google Code Project Hosting.
https://www.func09.com/wordpress/archives/1177
Demo | jTweetsAnywhere - jQuery Twitter Widget with @Anywhere support
JavaScript Image Cropping with jsCropperUI and Rails - Garbage Burrito