新世代Javascriptフレームワーク meteorがすごい！ - cakephperの日記(CakePHP, Laravel, PHP)
偶然見つけたmeteorというjsフレームワークがなんだかすごい。 ※昔からあるCometのmeteorとは違います デモビデオを見て驚いたのが、DBを更新すると(直接MongoDBコマンドでInsertすると)全てのユーザ画面に自動的に反映できること。 ホットコードプッシュと呼ばれる機能もあり、ソースコードを更新すると、自動的にユーザの画面を最新の状態に再表示する。 （ホットコードプッシュは驚いたけど、ユーザ入力画面などで途中で表示更新されるとどうなんだろうという気もする） もっと知りたい方は、ここにあるビデオを参照ください。リアルタイム同期がよく分かります。 http://meteor.com/screencast UbuntuかRedhat系のLinuxであればインストールコマンド一発で入ります。
jQueryをロードする際のナイス！と思った書き方
概要 ▶ 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は形式上HTML5のページになっているんです。 見た目
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
スマートフォンでスライダーを利用できる軽量JavaScript「Swipe JS」
twitter facebook hatena google pocket スマートフォンで画像スライダーを利用する場面は多々あると思います。 これを実現する軽量JavaScript「Swipe JS」を紹介します。 sponsors 使用方法 Swipe JS - a lightweight mobile web sliderからファイル一式をダウンロード。 <div id='slider'> <ul> <li style='display:block'></li> <li style='display:none'></li> <li style='display:none'></li> </ul> </div> あとは最後に下記を記述すれば完成です。 <script src='swipe.js'></script> <script> new Swipe(document.getElem
GoogleカレンダーからJSONPで日本の祝日一覧を取得
コメントと更新履歴の参照はゼロと無限の間のログ » GCalendar Holidaysでどうぞ。 Google Calendar API V3から、日本の祝日データを取得して表示するJavaScriptです。 Googleカレンダーに登録されている祝日なので、ハッピーマンデーの時のように休日の制度が変わっても柔軟に対応できます。 ただしGoogleカレンダーに登録されている祝日が間違っている（あるいは最新でない）場合もそのまま表示されます。 Yahho CalendarまたはjQuery UI Datepickerと合わせて使うと便利です。 バージョン0.5.xまではGoogle Calendar API V2から取得していましたが、Google Calendar API V2の廃止にともない、バージョン0.6.0からはGoogle Calendar API V3から取得するようにしまし
chrome-life.com - このウェブサイトは販売用です！ - chrome life リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
SIMILE Widgets | Timeplot
Timeplot is a DHTML-based AJAXy widget for plotting time series and overlay time-based events over them (with the same data formats that Timeline supports). Here is a live example: New Legal Permanent Residents in the U.S. (per year) vs. U.S. Population vs. U.S. History More Live Examples Energy Prices in the U.S. since 1975: this timeplot shows how the cost of gasoline in the US is strongly corre
jQuery Sparklines
Mouse speed Loading.. Inline 10,8,9,3,5,8,5 line graphs 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10 Bar charts 10,8,9,3,5,8,5 negative values: -3,1,2,0,3,-1 stacked: 0:2,2:4,4:2,4:1 Composite inline 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10 Inline with normal range 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10 Composite bar 4,6,7,7,4,3,2,1,4 Discrete 4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5 Di
折線グラフ - JavaScript ライブラリー - HTML5.JP
JavaScriptから折線グラフをcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みの折線グラフを柔軟に描画できます。 ダウンロード Release Date Size (byte) Download 使い方 graph_line_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。グラフを表示させたいHTMLには次のタグを記述してください。 <div><canvas width="400" height="300" id="sample"></canvas></div> 上記タグは次の点に注意してください。 canvas要素は、必ずdiv要素で囲んでください。 canvas要素には、必ずwidth属性とheight属性を記述し、幅と高さを指定してください。 canvas要素には、必ずid属性を記述してく
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 Mobileでajaxを無効にしてるやつに一言いっておくか - へっぽこプログラマーの日記
jQuery Mobileでは、ページ遷移の際に自動的にajaxが利用されています。特に何もしなくても遷移先のページをajaxで取得してアニメーションをつけて遷移するというのがjQuery Mobileの大きな特徴のひとつになっています。 しかしながら、巷では、何か問題があるとすぐにこのajaxを無効にするという対処方法が蔓延しているようです。ちなみにajaxを無効にする方法というのは、以下のようなものを指します。 a要素やform要素に data-ajax="false" を指定する。 グローバル設定で $.mobile.ajaxEnabled = false; を設定する。 もちろん、このajaxの挙動を理解した上で、ajaxを無効にするという方法を取ることは何ら問題ないのですが、とにかく困ったらajaxを無効にするということが多いようです。 具体的には以下のようなケースが挙げられるで
UIWebViewDelegate not monitoring XMLHttpRequest?
Interesting question. There are two parts to make this work: a JavaScript handler and UIWebView delegate methods. In JavaScript, we can modify prototype methods to trigger events when an AJAX request is created. With our UIWebView delegate, we can capture these events. JavaScript Handler We need to be notified when an AJAX request is made. I found the solution here. In our case, to make the code w
URLのハッシュを監視する(＃, シャープ, フラグメント識別子) at softelメモ
対象がこれらのブラウザならば、これだけでハッシュの変化を監視できる。 JavaScript $(function(){ $(window).on('hashchange', function(){ alert(location.hash); }); }); Demo #test1 #test2 #test3 #test4 #test5 もしhashchangeイベントに対応していないブラウザでもハッシュの監視をしようと思ったら、タイマー監視してイベントを発火させる感じになるでしょうか。 if ("onhashchange" in window) { //この場合はhashchangeイベントをサポートしているので何もしなくてよい } else { //hashchangeイベントをサポートしていない場合だけ特別に、0.1秒ごとにハッシュを見る処理を追加する $(function(){ va
データ可視化のためのグラフ描画JavaScriptライブラリ20選 | ゆっくりと…
SixRevisionsでオンラインでグラフを描画する場合に活躍しそうなJavaScriptライブラリの特集がありましたので、紹介します。個人サイトではあまり役に立たないかもしれませんが、観ているだけで楽しくなります。元記事に敬意を表し、なるべく趣旨が異ならずかつ変な日本語にならないよう心がけたつもりですが、訳に間違えがありましたら容赦願います。 2010年1月17日 by Jacob Gube 退屈な数値データを美麗かつインタラクティブに解り易く可視化するためのJavaScriptライブラリは数多くあります。通常はHTMLテーブルで表現するデータを、JavaScriptを使って可視化し美しく見せる事ができればあなたのデータはアクセシビリティーの優れたものとなるでしょう。私は2008年にデータのグラフ化＆チャート化のためのJavaScriptを書き上げましたが、今回再び単なるデータに生命を
EclipseのJavaScript環境（JSDT）を快適に使う方法 - susumuis Info
今日ますます重要となってきているプログラミング言語JavaScriptの開発環境として、WebStormやIntelliJ IDEAの評判が良いですが、Eclipseを使わざるを得ない状況ことも多いと思います。今回Eclipseで快適にJavaScript開発を行う環境をどのように構築したらよいか、試行錯誤をしたので、結果を報告します。人によっては違う結果になるかもしれませんが、もしよければ参考にしていただければと思います。 Eclipseプラグインは何を選択するべきか 2011年7月現在、Eclipseプラグインとして、JavaScriptの開発環境を提供しているものは、以下のようにいろいろあります。 JSDT 標準のJavaScript開発環境です。WSTに搭載されているので、J2EE版Eclipseなどをインストールすれば最初についています。印象として、可能なかぎりJava環境のJD
html5で脱出ゲームは作れるのか？（1:画面遷移） « Episodes & Melody
html5 で脱出ゲームが作れるのか？という疑問を持ったのでやってみました。 html5 で作るといっても9割は JAVAScript ですけどね。とりあえず第一回ということで、脱出ゲームの基本的な部分「画面遷移」まで作りました。 html5で脱出ゲーム デモ（各種最新ブラウザで動作します）別窓 html5 部分 html5 での肝は canvas タグ。この中に色々描画していきます。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html5で脱出ゲームは作れるのか？</title> <script type="text/javascript" src="js/escape.js"></script> </head> <body> <canvas id="escape" width="550" he
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Media API:JavaScript の基礎 | Brightcove Support
[CSS]テーブル要素を使用しないで制作するカレンダー
Android 2.2 Froyo browser: HTML5, accelerometer, Flash Player 10.1 and more | Breaking the Mobile Web
http://d.aoikujira.com/jsWaffle/wiki/
