Facebookアプリを、HTML5でどうしてサクサクにできたのか。Sencha Touch開発チームが用いた3つのテクニック
Sencha Touchの開発チームがHTML5で高速に動作するFacebookアプリを開発したことを紹介した1つ前の記事 「Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム」は、非常に多くの読者に注目されました。 この記事で紹介したSencha Touch開発チームのブログ「The Making of Fastbook: An HTML5 Love Story」の後半では、どのようなテクニックを用いて高速なHTML5アプリケーションを実現したのかも紹介されています。 この記事では、その3つのテクニックについてポイントを紹介したいと思います。タイムラインやニュースフィードのようなユーザーインターフェイスを備えたモバイルアプリケーションは、これから広く開発されていくことにな
Firefox OS - naoyaのはてなダイアリー
Firefox OS が面白そう、というので少し触ってみました。 Firefox OS はWeb 標準ベースの開発を基礎としたモバイル端末用プラットフォーム、要は HTML と JavaScript と CSS でアプリケーション開発できるモバイル端末用の OS。間もなく Developer Preview Phone な実機が発売されるというのでにわかに盛り上がりを見せているみたいです。 Firefox OS が目指すところは Web 標準による、開発者がロックインされないオープンなプラットフォーム。iOS や Android の昨今の状況を見れば、そのアンチテーゼになるプラットフォーム構想があってもおかしくないわけで、まさにそれを目指しているようですね。 いったいどんなものかという概観は dynamis さんによるスライドが分かりやすい。 Firefox OS from dynamis
ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
履歴操作、リロード｜window.locationオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room
reloadメソッドは、現在のページを再読込（更新）します。 ブラウザの［更新ボタン］をクリックしたのと同じ動作です。 オプションの第1引数にtrueを指定すると、サーバーからリロードされます。 FALSEを指定するとキャッシュからリロードされます（デフォルト）。 指定秒数後に再読込させたい場合は、reloadメソッドではなくmeta要素を使用します。 <meta http-equiv="refresh" content="秒数">をhead要素内に記述します。 オブジェクト名windowは省略可。 <!-- ページの再読込（更新）ボタン --> <input type="button" value="ページを再読込（更新）する" onclick="location.reload();" />
[mixi] 運営者からのお知らせ
【追記】 「mixiページ」サービス終了に向けてのスケジュールは、2020年8月31日に全てサービス提供終了としていましたが、以下の日程に変更します。 ・2020年9月7日11時頃 モバイル版mixiページ終了 ・2020年9月14日11時頃 PC版、スマートフォン版mixiページ終了 終了時刻は前後する場合がございます。 ダウンロード機能はPC版スマートフォン版mixiページ終了と同時の2020年9月14日11時頃に終了いたしますので、「mixiページ」データのダウンロードをご希望の方は、お早めにダウンロードをお願いします。 以上、どうぞよろしくお願いいたします。 【追記】 終了予定の「mixiページ」とは、SNSmixi全体の中の一部特定サービスの名称でございます。 SNSmixiの全てが終了するわけではございません。2020年8月31日以降も引き続きSNSmixiはご利用いただけます
ArrayBufferについて - PolyPeaceLight
WebSocketやchrome.socket、AudioやVideo APIなどが進んできたせいで、JavaScriptで生データを触ることが増えてきています。 その時に使えるのがArrayBufferというオブジェクトなんですがいまいち整理がついてないので、MDNを訳しながら、まとめてみました。 ちなみにMDNでは Webアプリケーションがパワフルになってくるに連れて、audioやvideoの操作などの機能や、WebSocketsを用いた生データのアクセスなどが追加され、その結果、早く・容易に生のバイナリデータをJavaScirptコードで扱うことのできる機能が必要なことが明確になって来ました過去には文字列として生データを扱い、charCodeAt()を用いてデータバッファからバイトを読み取るようなこともされていました。 とあります。この機能がArrayBufferですね。 Typed
WebSocket のバイナリメッセージを試したら、ウェブの未来が垣間見えた
長い記事なので、先に結論だけ書いておきます。WebSocketのバイナリメッセージ機能は、これまでのインターネットのあり方をひっくり返します。「そんなの知ってるよ」という方もいるとは思います。僕も理屈では分かってたつもりだけど、実際にアプリを作ってみて、具体的にそれを感じることができたので、ちょっと長いですがどういうことなのか説明してみます。 WebSocketとは # WebSocketは、HTML5関連の中でも特に注目を集めている技術の一つです。通常のHTTP通信であればクライアントからのリクエストなしにサーバーは応答しませんが、WebSocketを使うことでクライアントとサーバーの間で双方向の通信が可能となります。これを利用することで、今後様々なリアルタイム性の高いサービスを構築することが可能になるでしょう。 そんなWebSocketですが、これまで波乱の道を歩んできました。数年前か
Web Audio API
This Version of this Document Is Obsolete and Has Been Replaced This version of the specification is obsolete and has been replaced by the document at http://webaudio.github.io/web-audio-api/. Do not attempt to implement this version of the specification. Do not refer to this version except as a historical artifact. Web Audio API W3C Editor's Draft This version: https://dvcs.w3.org/hg/audio/raw-fi
Getting started with Web Audio API | Articles | web.dev
Before the HTML5 <audio> element, Flash or another plugin was required to break the silence of the web. While audio on the web no longer requires a plugin, the audio tag brings significant limitations for implementing sophisticated games and interactive applications. The Web Audio API is a high-level JavaScript API for processing and synthesizing audio in web applications. The goal of this API is
localStorageはいい感じ
今日のネタは、HTML5で規定されているlocalStorage(ローカルストレージ)についてです。 以下、特徴をいくつか挙げてみます。 2011/07/06 イベントについて追記 ローカルにデータを保存します PCやスマートフォンなどの端末にデータを保存します。 別のサイトに行こうが、ブラウザを閉じようが、データが残っています。 localStorageの使い方としては、キャッシュ的な使い方が良さそうです。 「サーバーからデータを取得してlocalStorageに格納しておく。次にアクセスしたときはlocalStorageから取得する。もしなければサーバーに取りに行く。」 って感じで。 サーバーに取りに行かなくて済むなら処理が早くなってハッピーですね。 所詮はローカルのデータなので、データが存在することを前提にしてはいけません。 モダンなブラウザなら大概使えます IE8以上、FireFo
removeEventListenerの使い方間違えてた - 三等兵
add時と引数違うとだめなのか。 うわーremoveしたことなかったから知らなかった。removeせずに関数内で判定させてイベントおこさないようにしてた。イベント放置プレーバレバレ。 function a(){ console.log('バカですよ'); } document.documentElement.addEventListener('mouseover', a, false); document.documentElement.removeEventListener('click', a, false); document.documentElementをクリックしたらイベント無くなるのかなーとかaddと同じ要領で使った。これじゃ削除されない。document.documentElementをクリックすることで、mouseoverのイベントを削除するのだったら、 function
QUnitの処理順とかを調べてみた - Reports
はじめに JavaScriptの単体テストツールの一つとしてQUnitがあります． 最近のお気に入りです． QUnit - jQuery JavaScript Library 解説・チュートリアルは例えば以下にあるので，よく知らない方はいろいろ参照してみてください． お手軽かついろいろできます． 【レポート】jQueryテストスイート「QUnit」がスタンドアロン化! 使い方を早速チェック (1) QUnitとは? | エンタープライズ | マイナビニュース で，QUnitにはJUnitなどと同じくsetupやteardown機能があります．また，IDが 'main' の要素の中身を自動でリセットしてくれる機能もあります．リセットはQUnit.reset() という関数で自動的に行われます． それらの処理順や挙動がわからなかったので調べてみました． 処理順について 説明用QUnitサンプル
JavaScript対応APIドキュメント生成ツールのまとめ
JavaScriptにもJavaDocのようなコメントからAPIドキュメントを生成するツールがいろいろとあるため、どのようなものがあるか少し調べて見ました。基本的なコメントの書き方は大体がJSDocと共通しているので、特に言及がなければそのような書き方が通るものが多いです。 JsDoc Toolkit JSDoc(開発停止)の後継であるため最も有名だと思います。 現在はver2で機能追加のリクエストは停止されていますが、JSDoc 3が開発中となっているそうです。 情報量もそこそこあると思うので、APIドキュメント生成ツール関係について調べる時に参考になる。 Closure Compilerなどいろいろなところで使われていたりします。 -JsDoc Toolkitを使う！ – トップページ YUI Doc YahooのYUI Libraryで使用されているドキュメント生成ツールです。 Py
コードリーディングにDoccoを使うと捗るかもしれない件
Doccoは、CoffeeScriptにコメントをつけてドキュメントを出力できるパッケージです。コードとコメントを左右に表示されるスタイルです。コメントにはMarkdownが使えます。 インストール インストールはnpm。追加でPygmentsが必要です。 $ npm install -g docco $ sudo easy_install Pygments 使い方 先日のエントリーで紹介したブログアプリCoffee-Boxを例にコメントを書くとこうなります。 (CoffeeBoxの紹介は 『Node.js「脱」初心者！CoffeeBoxでブログの作り方を学ぼう！』を参照してください） # ***server.coffee*** は、Coffee-Boxのエントリーポイントです。 # [express](http://expressjs.com/)を読み込みます。 express = re
YUIDocを使ってみたよ - 四角革命前夜
JavaScript向けのドキュメントジェネレータというと、JSDoc toolkitとかDoccoなどがありますが、YUIDocが程よく手軽な感じで使ったこともなかったので使ってみました。 昔はJavaかなんかで作られてた気がするのですけど、いまではnpmモジュールになってるのですね。node.js + npmが入ってるならとってもインストールはとっても簡単。 インストール npmからインストールします。 $ npm install -g yuidocjs でインストールするとよいかと。今回はグローバルにインストールしたくなかったので $ npm install yuidocjs でインストールして $ ./node_modules/.bin/yuidoc で使うことにします。 適当なコードを書く 適当なJavaScriptのコードを書きます。 index.js /** * Classク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
creatorish.com
はじめての Web Audio API
JsDoc Toolkitを使う！
JS開発におけるTDDと自動テストツール利用の勘所
Maruta