Build apps that work OfflineSync with any BackendObservable Realtime QueriesAll JavaScript Runtimes Supported

こんにちは。クラスメソッドの稲毛です。 前回のパッケージ管理ツール「Bower」インストールに続いて、いよいよ本編となります「Flight」フレームワークです。 通常なら「Flightとは?」から始める所ですが、今回はどんどんサンプルを作っていくことで理解を深めてみました。 Flightのインストール まずはBowerを利用してFlightを構成するスクリプトファイルをインストールする必要がありますので、アプリケーションを作成する場所に下記の内容で「component.json」というファイルを用意します。 component.json { "name": "Flight Sample", "version": "1.0.0", "dependencies": { "flight": "~1.0.0" } } 用意できたらコマンドプロンプトを起動し、component.jsonがあるディレ
自分が書いたJavaScriptのコードスニペットに対してどのコードが早いのかベンチマークを比較することができるWebサービスであるjsPerfの紹介と使い方。JavaScriptでは同じ機能を実現するための方法は様々であり、どのコードが優れているのかを調べる方法としてプロファイラなどを利用することがあります。しかし、JavaScriptはブラウザ毎によっても速度が変わることが多いため、ブラウザ依存のツールだと比較しにくくなるため、ブラウザ上でテストコードを実行し、それらのベンチマークを簡単に記録、比較できるサービスがjsPerfです。 jsPerfの比較方法 jsPerfの内部ではBenchmark JSというベンチマークライブラリが使用されています。(jsPerfの運営者が作成している) jsPerfの計測方法は一定時間内にどれくらいコードスニペット部が実行できたのかで比較します。その
HTML5 Virtual Game Controllerはタブレットやキーボード、ジョイスティックなどの入力に対応したWebゲーム用ライブラリです。 PCでゲームをする場合、キーボードやマウスでの操作が一般的です。しかしより楽しもうと思うならばゲームパッドの利用は必要でしょう。さらにスマートフォンの場合は入力UIが限られます。そこで使ってみたいのがHTML5 Virtual Game Controllerです。 デスクトップ。キー入力と矢印キーで操作します。 動きはスムーズです。 iPhone版。画面上のコントローラを使います。 スムーズな操作とは言いがたいかも知れません…。 ボタンの認識も今ひとつです。 HTML5 Virtual Game Controllerではゲームコントローラーライクな入力インタフェースが画面の両端に表示されます。左側が移動キー、右側がアクション用のボタンです。
爆速JSONPはJavaScriptのコーディングレスでJSONPで取得したデータを表示する処理を行うライブラリです。 去年くらいからのYahooはとりあえず何でも爆速をつけておこう的な雰囲気が感じられますが、ついにオープンソース・ソフトウェアまで爆速がつくようになりました。今回はJSONPを使った表示処理エンジンである爆速JSONPを紹介します。 サンプル。電力消費量を取得しています。 ソースです。取得したJSONデータをテンプレートとして当てはめています。 爆速JSONPはデータをJSONPを使って取得し、その結果を予め決められたテンプレートに埋め込んで表示する仕組みです。data-*要素を使っており、JavaScriptのコードを書かずに実装できてしまうのが利点です。 爆速JSONPはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFT
opentip is a javascript tooltip framework yes - it’s free, open source and comes with different styles! demo styles There are great styles built right into opentip and it's easy to create your own. ajax Opentips can automatically download their contents via AJAX. It's extremely easy to configure them to do so.
Basket.js Basket.js is a script loader that efficiently caches scripts in localStorage for improved page load times. Features Script Caching: Automatically caches loaded scripts in localStorage Version Control: Built-in support for script versioning Expiration Control: Set expiration times for cached scripts Promise-based API: Modern Promise-based interface Custom Handlers: Support for different c
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
I am thrilled to announce the release of CSS3 PIE 2.0 beta 1! This is the first official release of the 2.0 development line, which has seen several major refactoring efforts to improve performance, enhance feature support, and fix many long-standing bugs. The major changes from 1.0 are: PIE.htc is now a very small (~2K) stub file which loads a secondary logic file optimized for the current IE ver
「要素の中心から拡大するようなアニメーション作ってください」さてどうする どういうことかというと、 CSS3を使えばtransform-orignを50% 50%にすることで 変形の中心点をすらすことができるので、 これとtransitionやanimationプロパティを組み合わせれば 簡単に実現出来ますね! 「IEで動きませけんど…」 そうでした。 IEを忘れていました。 transitionやanimationはIE10からしか使うことができませんので、 動かすことが必須の場合はこの方法では利用できませんね。 JavaScriptの力を借りましょう jQueryにはshow()やanimate()という便利なメソッドが用意されています。 これらを使いましょう。 今回は、CSSで予めdisplay:none、widthとheightを0にしておいて、 animation(
I'm a user-friendlier drop-in replacement for the standard <select> with multiple attribute activated. Free (under WTFPL license) Works in an unobtrusive fashion Fully open sourced Keyboard support Provides some callbacks Fully customizable via CSS Depends on jQuery 1.8+ Tiny code ~8kb minified HTML <html> <head> <link href="path/to/multiselect.css" media="screen" rel="stylesheet" type="text/css">
Jcrop » the jQuery Image Cropping Plugin Jcrop Home • Download • Manual • Examples Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Feature Overview Attaches unobtrusively to images or blo
Semantic templatesHandlebars provides the power necessary to let you build semantic templates effectively with no frustration. Mustache-compatibleHandlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates. Fast executionHandlebars compiles templates into JavaScript functions. This makes the t
Audio5js is a Javascript library that provides a seamless compatibility layer to the HTML5 Audio playback API, with multiple codec support and a Flash-based MP3 playback fallback for older or unsupported browsers. The motivation for creating Audio5js is to provide a light-weight, library-agnostic, Javascript-only interface for audio playback in the browser.
あけましておめでとうございます。NAVERまとめのフロントエンドを担当している縣です。初詣で引いた大吉のおみくじを握りしめながら今年も張り切っていこうと思います。 今回はJavaScriptの遅延ロードの仕組みをNAVERまとめに導入した際のお話を紹介します。 遅延ロードの検討 昨年NAVERまとめのまとめ閲覧ページや、まとめ編集ページでのJavaScriptファイルの読み込みを遅延ロード化する作業をしました。元々はページ読み込み時に全て読み込ませていましたが、JavaScriptファイルが巨大になってきてパース・実行に時間がかかるようになったことから遅延ロードを検討することになりました。 遅延ロードの利点というとJavaScriptファイルの読み込み・実行によるブラウザのレンダリング停止を防ぐのはもちろんですが、どのファイルがいつどこで必要になるかを明確にすることもでき、依存関係を動的
Knockout.jsは、モデルデータに対して宣言によって要素をバインドできるようにするJavaScriptライブラリです。このモデルデータでは、UIとモデルの間で自動的に双方向の更新が行われます。Knockoutは簡単に使い始めることができ、他のライブラリやテクノロジーとも密接に統合されています。ここでは、使い始める際に知っておく必要があることについて説明します。 複雑で動的なデータ駆動型のWebアプリケーションを開発することは、難しい作業になる可能性があります。ユーザーインターフェイスとその基になるデータとを常に同期させるには、通常、ユーザーが何かアクションを実行するたびに、または新しいデータが読み込まれるたびに、様々な要素とデータとの間で情報を仲介する多くのイベントハンドラーを作成する必要があります。 Knockoutの登場以前 Knockoutのメリットを示す簡単な方法として、Kn
Sinatra っぽく簡単に JS で Dispatch できる micro_dispatcher.js のご紹介 https://github.com/tokuhirom/micro_dispatcher.js javascript 用のシンプルな Dispatcher にはいくつかあるが、どうも満足いくシンプルな実装がなかったのでつくった(というか Caym というオレオレ JS Framework の中にうまっていたものをとりだした)。 特徴としては、 Dispatcher だけのシンプルな実装(本体はやや冗長にかいていて、40行程度) sinatra 的なシンプルな記法 といったところでしょうか。 使い方は以下のとおり。 var dispatcher = new MicroDispatcher() dispatcher.register('/', function () { })
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く