pixivポップボードのキャッシュの仕組みとFacebookのUIの話
pixivポップボードのキャッシュの仕組みとFacebookのUIの話 こんにちは。JavaScript Advent Calendar 2011 オレ標準コース18日目の@ykskです。 先日pixivにポップボードという通知機能がリリースされました。自分がお気に入りユーザーに追加されたり、投稿したイラストがブックマークされたりした時にヘッダーに未読件数などのお知らせを表示します。僕は直接機能を実装していたわけではないのですが、リリース直後に起こった負荷の問題でJSを書きました。今日はその話をします。主にUIの話です！ え！ リリース直後、定期的に未読数の更新をAjaxで行っていた部分の負荷が急激に上がりました。ページロード時にHTMLに未読数を埋め込んだあと、2分ごとに未読数取得APIへリクエストするという処理です。 ポップボードはヘッダーに出るため、ほぼ全てのページでこの処理が入りま
createObjectURLがすごい件 - プログラムモグモグ
最近またLocal Player (Chrome Player)を実装しなおしています. 一応説明しておくと, Local Playerは, 完全にローカルで動作する音楽プレイヤーです. シンプルさを求め(実装がめんどくさいだけ), 操作しやすく(これは大事), 良い感じのプレイヤーです. 半年前に, ソースコードがスパゲッティになって, 開発を中断していましたが, 最近また書きなおし始めたのです. 音楽プレイヤーをブラウザー上で実装するのには, 音楽ファイルをJavaScriptで読み込まなければなりません. そこでHTML5ですよ！！！ <audio src="url/to/musicfile.mp3" type="audio/mp3" /> みたいな感じで, 音楽を再生できます. 詳細は他のページに譲ります. さて, 音楽ファイルを再生するには, ローカルファイルからurlをaudi
複数要素の関連をビジュアライズできるライブラリ「arbor.js」:phpspot開発日誌
arbor.js 複数要素の関連をビジュアライズできるライブラリ「arbor.js」 JavaScriptベースですが、Chromeで見るとなめらかに動作して良い感じです。 動きがカッコイイのでデモなんかで見せるとよい印象を得られるかも。 更に子要素をアニメーション 階層的にデータを現せます 関連エントリ HTML5のキャンバスと連動させて音声をビジュアライズしたデモ ブログのプチリニューアルに使った技術要素色々 HSL形式のカラーがブラウザ上で作れる「HSL Color Picker」
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
CSS3 AnimationsとJSの連携でキャラクターを制御 (1/3)
HTML5 CanvasやWebSocketなどの最新技術を駆使して作ったiPhone 4用ブラウザーゲーム「Handy Stadium」の裏側を解説する本連載も、今回で最終回（連載バックナンバー）。今回は、CSSアニメーションを中心としたフロントエンドの実装について解説します。 オリジナルのJavaScriptライブラリー「mm.js」 Handy Stadiumのフロントエンドの実装における大きなポイントは、jQueryではなく独自のライブラリーを使っていること、Canvas以外のアニメーションはJavaScriptではなくCSSで実現していることです。 フロントエンドの処理は、最近ではjQueryを使うことが多いですが、Handy Stadiumの場合はDOMを操作する処理がそれほど多くなく、対象端末をiPhone、ブラウザーをMobile Safari/Google Chrome（
iPhone, Android(desire) ブラウザのhtml5対応状況 - 超自己満足プログラミング
手元にあるスマートフォンのhtml5対応状況を、http://html5test.com/ で確認したのでメモ。 iphone4 (4.0.2): Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0_2 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A400 Safari/6531.22.7 iphone3G (3.1.2): Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_2 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7D11 Safari/528.16 android2.1: Mozil
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
