ウノウラボ Unoh Labs: jQueryのパフォーマンス最適化に関するTips
こんにちは、山下です。 今回は、jQueryのパフォーマンス最適化について説明したいと思います。 軽量と言われているjQueryですが、いろいろな機能を実現しようとして複数のプラグインを導入すると、だんだんと動作が重くなってきます。サーバ側をいくらチューニングしたところで、ブラウザ側での処理に時間がかかっていたら、せっかく訪問してくれたユーザに重いサイトとして認識されてしまいます。以下に、ウノウで運営している「映画生活」で実際に行っている方法を紹介します。 1. Packed版ではなくMinified版を使う jQuery1.1まではPacked版のみだったのですが、jQuery1.2からMinified版もダウンロードできるようになりました。Packed版よりもMinified版を使うことをお勧めします。どう違うのかというと、Packed版はファイルサイズを極限まで削減するために静的辞
XPath は jQuery や Prototype.js と競合する技術ではなく、むしろ共存する技術です - IT戦記
昨日のエントリのブクマやコメントで jQuery からの移行がめんどう 時代は jQuery のようなコメントがありました。 これらのコメントから おそらく、「XPath が jQuery や YUI、Prototype.js、Dojo、MochiKit などの汎用 JS ライブラリと競合する」と思ってる方が多いのかなと思いました。 結論 XPath は汎用 JS ライブラリとは競合する技術ではなく、共存する技術だと僕は考えています。 理由 汎用的な JS のライブラリには、大きく以下のような機能があります。 DOM ツリー上の要素やノードを取得する DOM に新しい要素やノード、属性、プロパティ、イベントなどを追加する その他、クロスブラウザとか それに対して XPath が提供するのは DOM ツリー上の要素やノードを取得する というシンプルな機能だけです。 つまり、 XPath は汎
Latest topics > getElementsByなんちゃら の代わりにXPathを使う - outsider reflex
Latest topics > getElementsByなんちゃら の代わりにXPathを使う 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « 不可逆的な変化に対する感じ方と、死 Main CSS3セレクタとXPathでの表現の対応表 » getElementsByなんちゃら の代わりにXPathを使う - Sep 09, 2007 拡張機能勉強会の時に焚き付けられた、Text Shadowのコード（textshadow.js）を教材にして拡張機能開発のノウハウを解説していくシリーズ。 W3CのDOMでは、要素ノード（およびそのリスト）を得る方法として以下の方法がある。 getElementById(aName) IDをキーにして単一の要素ノー
JSON の紹介
JSON (JavaScript Object Notation)は、軽量のデータ交換フォーマットです。人間にとって読み書きが容易で、マシンにとっても簡単にパースや生成を行なえる形式です。 JavaScriptプログラミング言語 （ECMA-262標準第3版 1999年12月）の一部をベースに作られています。 JSONは完全に言語から独立したテキスト形式ですが、C、C++、C#、Java、JavaScript、Perl、Python、その他多くのCファミリーの言語を使用するプログラマにとっては、馴染み深い規約が使われています。これらの性質が、 JSONを理想的なデータ交換言語にしています。 JSONは2つの構造を基にしています。 名前/値のペアの集まり。様々な言語で、これはオブジェクト、レコード、構造体、ディクショナリ、ハッシュテーブル、キーのあるリスト、連想配列として実現されています。
Dive Into Accessibility
この文書は2つの質問に答えるために書いてみたんだ。 1コ目は、「なんでサイトをアクセシブルにした方がいいのか」。 だから、ここの情報はサイトを持ってない人には向かないかも。 2コ目は、「じゃどうしたらサイトをアクセシブルにできるのか」。 1コ目の答えが納得できるものじゃなかったら、2コ目はどうでもいいってことになるよね。 じゃ行ってみよう。 Dive Into Accessibility（英語版）をダウンロードする HTML（英語版）をダウンロード PDF（英語版）をダウンロード Dive Into Accessibilityを読む 目次 掲載された順序のままにならべてある、すべての情報はこちら。はじめてココ の文を読むときにおすすめの読み方。 人に基づいた情報分類 ここではどんな人に役立つかによって、情報が分けられています。 障碍に基づいた情報分類 ここではどういった障碍があるときに役立
XUL Apps > Tips > DOM3 XPathをノードの検索に活用する - outsider reflex
X-0032 DOM3 XPathをノードの検索に活用する 2005/5/7 2005/5/11 2005/5/12 2006/4/12 Home Back to XUL Tips Prev. Next DOM3 XPathを使うと何が便利？ MozillaはXPath関係の機能をDOM3 XPathに則って実装しています。これを活用すれば、getElementsByTagName()などのメソッドと条件分岐を駆使してノードを収集しなくても、複雑な条件でノードを検索することができます。 以下に一例を示しましょう。 <menuitem label="リンクをタブで開く" hidden="true"/> <menuitem label="リンクをウィンドウで開く" hidden="true"/> <menuseparator> <menu label="選択範囲を送る"> <menupopup
【コラム】そろそろきっちりJavaScript (1) "Firebug"の導入〜関数リテラルとは? | エンタープライズ | マイコミジャーナル
多彩な演出効果をカンタンに導入できる事で脚光を浴びたprototype.jsの登場を皮切りに、インターネットで公開されているJavaScriptライブラリの数は、この一年で急激に増加した。何かやりたいことがあったときはWebで検索すれば、大抵、どこかにライブラリが転がっている。便利な世の中になったものだ。 一方、Webを通じて提供されるサービスは多様化の一途を辿っている。JavaScriptライブラリは整ってきたが、当然、置くだけでは機能しない。ライブラリのサポートページには簡単なサンプルが載っているものの、サンプルがそのまま適用できるケースはごくわずかだ。しかたなく、他の誰かが似たような事をやっていないかとWeb検索するはめになる。 思えば、これまでJavaScriptを言語としてとらえ、きっちり向き合う機会は少なかったのではないだろうか。 1995年の終わり、Netscape Navi
JavaScript によるユーザエージェント判別
UAIdentifier - JavaScript によるユーザエージェント判別 © 2006-2007 Magicant / 1.9.2 (2007-02-02) JavaScript を実行しているブラウザの種類およびそのレンダリングエンジン・オペレーティングシステムの種類を判別します。 テストページで実際に試すことができます。 uai.js は自由に使用していただいて構いません。 目次 uai.js の使い方 uai.js の API 仕様 UAIdentifier コンストラクタ toString メソッド 各プロパティ 判別機能の詳細 判定結果の使い方 uai.js の使い方 実装ファイルは uai.js です。 このファイルは単独では実行しても意味がありません。 uai.js には UAIdentifier オブジェクトの定義が含まれ
[ThinkIT] 第1回：Prototypeライブラリの内部 (1/2)
JavaScriptは絶え間ないポップアップウィンドウや迷惑なアニメーションに覆われた「失われた10年」を乗り越え、Ajaxというキラー技術を引っさげて、ついに復活を成し遂げつつあります。 世界中のエンジニア達がJavaScriptを利用したWebアプリケーションの開発に取り組み、毎日のように新しいライブラリやフレームワークが公開されるようになりました。公開されたコードの再利用により応用が広がり、さらに発展が加速している感があります。 ブラウザー上で誰でも手軽にソースコードを閲覧できるJavaScriptは元来、究極のオープンソース用プログラム言語であるとも言えます。本稿では、既存の人気ライブラリの内部構成を徹底解剖するとともに、オリジナルのJavaScriptライブラリを作成するテクニックをご紹介しましょう。 自作したJavaScriptプログラムを他の人にも利用しやすい形で公開すれば、
Open Tech Press | Vimマスターへの道
viクローンのVimは、Emacsと並ぶオープンソース・エディタの巨頭である。このエディタは、単にviのオープンソース版というだけではなく、スクリプトやプラグインによる高い拡張性といったオリジナルのviにない特徴も備えている。しかし、viから引き継いだ独特の操作法から、Vimを敬遠している向きも少なくないようだ。そこで以下では、Vimの操作を習得する、あるいはVimをもっと活用するためのハウツーを紹介する。 2007年11月13日更新：中級編に「Vimのステータスラインをより有効に活用する設定法」を追加 初級編 Vim 最初の一歩 Vimの簡単な始め方 2007年04月13日 Vimの無数の機能と柔軟さはベテランのユーザにとっては大きな利点であるが、初心者にとっての敷居を高くしてしまっているというのも事実だ。あなたがもし、Vimを使いたいとずっと思っていながらも初めて試したときにうんざりし
vimで効率的にコードを書くための小技 - bonar note
vimは使いこなしている人は超人のように使いこなしているのですが、「たまにconfファイルいじる時だけ使うよ。まあ、普段はemacsだけどね」という人は、vi時代の機能のみ使っているのをたまに見かけます。 そこで、通ぶって恐縮なのですが、僕が普段vimを使っていてとっても便利で効率が上がると思う操作を紹介したいと思います。また、僕自身が Mac OS X な環境なので、「外部コマンドとの連携」などでWindowsだと再現できないものがあるかもしれません。ごめんなさい。 用語の使い方や理解が間違っている部分があるかもしれませんがその場合はご指摘いただければと思います。あと、「これ抜かしちゃ駄目でしょ！」みたいなのがあればアドバイスお願いします〜。 それでは、 [あとで読む] vimの基本操作 （知っていると思うので省略） 超概略 挿入モードと編集モード キー操作 内容 i 挿入モード突入（文
viを使い倒そう 少し進んだ使い方
担当:服部@ソニー mhatto@arc.sony.co.jplast update: Mar. 20, 2001 この文書はviというテキストエディタの使い方に関するものです。 といっても本物のvi(Solaris等の商用UNIX付属のviでしょうか?)は、 Linuxディストリビューションには入っていませんので、 viクローンの使い方です。文書内ではviクローンをviと呼んでいます。 1. viとは? 2. なぜviなのか? 3. これだけ覚えれば使えます(1st Step) 3.1 起動方法 3.2 すべての操作はコマンドで!! 3.3 大切なモードのお話 4. 少し進んだ使い方(1) -コマンドモード- (2nd Step) 4.1 作業の取消をしたい(アンドゥ) 4.2 カーソルのある行の先頭/末尾にカーソルを移動したい 4.3 現在ページの先頭行/末尾行にカーソルを移動したい
Vim7.0 + KaoriYa を Mac OSX にインストールする - 2xup.org
2006-09-13T02:20:00+09:00 welcome home : vim online pre 要素のスタイル定義とマークアップ でも書いたのだけれど、最近 CSS や HTML の編集をする時は Vim (version 7.0) を利用しています。Vim を利用するに至った理由は 専用サーバを使い始めた Plagger を使い始めた CSS なんかは直接編集した方が早いと感じた Vim7 の補完機能 Omni completion がゴキゲン 『憶えておいて損はあるまい』と感じた というのがあります。中でも Omni completion というゴキゲンな補完機能が Vim7.0 を利用する大きなきっかけになっています。 vim7の新機能 Omni completion(川o・-・）＜2nd life) サーバへのインストールの前に、練習を兼ねてメインマシンの Maci
SEO要因の調べ方――『検索エンジン最適化の初心者ガイド』改訂版#1-1 | Web担当者Forum
Google ― サイトのランキングを上げるにはどうしたらよいですか？（日本語版）Yahoo! ― 自分のサイトを「ウェブ検索」の検索結果に表示するには、そしてサイトの順位を上げるにはどうすればいいのでしょう？（日本語版：自分のサイトを検索結果に表示したいときは、日本語版：サイトの順位を上げるには）Microsoft/Live ― 正しくインデックス登録するためのガイドライン（日本語版）Ask ― Ask.comのウェブマスター向け情報だが、ここに示したガイドラインも役に立たないわけじゃない。それなりに価値のあるヒントも一部にはある。たとえば、Yahoo!のこれとか。 特定のウェブサイトがウェブ検索の結果に表われるか否か、そしてその順位がどのように上下するかについては、多くの要素が関係します。それら要素をいくつか例示すると、以下の通りとなります。 サイトが獲得している外部リンク数ページ内の
Ajaxian � Ajax Javascript Galleries, Slideshows and Effects Redux
Enterprise Strategy Group: Go-to-market Expertise to Help You Win
PC«¨£§§¶c°vim« (Mac OSX Tigervim7) ― cvim
ダウンロード Mac OSX Tiger用のvimエディタ バージョン7は、 SourceForge.jpで配布されているvimエディタを使用するのが、現時点では最も良いと思います。 こちらのフォーラムではGUI用のvimエディタと、 ターミナルでvimエディタを起動できるスクリプトを配布しています。 http://sourceforge.jp/forum/forum.php?forum_id=12542 まず、下記のURLに行き、手元のマシンにアプリケーションをダウンロードしてください。 ダウンロードするのはもちろん、インストールに手間のかからない気軽に試せる「バイナリ」の方です。 複数のバージョンが見つかるでしょうが、 基本的には最も数字の大きいもの（最新のもの）を選ぶと良いはずです。 ディスクイメージファイルのマウント アプリケーションは、ディスクイメージファイル（dmgファイル）と
サービス提供終了のお知らせ
日頃より、Momoたろうインターネットクラブをご愛顧いただきまして誠にありがとうございます。 「ホームページサービス」のサービス提供は2015年11月30日をもちまして終了させていただきました。 これまで長らくご利用いただき、誠にありがとうございました。 今後も、皆様によりよいサービスをご提供させていただけるよう、サービス品質向上に努めて参りますので、何卒、ご理解いただけますようお願 い申し上げます。 ＜Momoたろうインターネットクラブをご契約のお客様へ＞ 後継サービスとして「userwebサービス」を提供させていただいております。 詳しくは、以下のリンクをご参照ください。 ▼「userwebサービス」のご案内 http://www.ejworks.info/userhp/mmtr/index.html 今後ともMomoたろうインターネットクラブをご愛顧いただけますようお願い申し上げます
アップル ヒューマンインタフェースガイドライン
第1部 アプリケーションデザインの基礎 アップルヒューマンインタフェースガイドラインのこの部では、Macintoshインタフェースの裏側にある哲学と心理学を提示します。 直感的で人をひきつけるヒューマンインタフェースを提供する、すばらしいソフトウェア製品を作るために、あなたが利用できるデザイン原則と配慮について、この部を読んで学んでください。 あなたはどのようにして、優れたヒューマンインタフェースの配慮とあなたのデザイン、そして意思決定のプロセスをまとめるのか、また、どのようにして、ユーザをデザイン工程全体を通して関係させていくかについて、発見することでしょう。 さらに、このガイドラインの魂と志を支持するうちに、どのようにしてこのガイドラインと共に作業し、この内容を超えていくかを、本稿はあなたに告げることでしょう。 ←はじめに →第１章：デザイン工程
40+ Excellent Freefonts For Professional Design | Fonts | Smashing Magazine
The importance of typography in design can’t be overestimated. The accuracy, precision and balance of geometric forms can give letters the elegance and sharpness they deserve. Besides, elegant fonts can help to convey the message in a more convenient way. In fact, while there are many excellent professional fonts (we’ve presented some of them in our article 80 Beautiful Typefaces For Professional
LDRize IDE - snippets from shinichitomita’s journal
XPathの習作。あるページのパラグラフのループを見つけてXPath式で取得するための支援ツール。 http://ldride.googlecode.com/svn/trunk/readme.html ブックマークレットで起動してるので、IEでもSafari2でも動きます。XPath評価には id:amachangのこれつかってます。 ナビゲーションとしては、最初に親となるコンテナエレメントを指定して、その後パラグラフに相当する場所をクリックしてxpathを取得する感じ。 名前はAutoPagerize IDEにちなんで、LDRize IDEに。でもLDRizeはあまり使ったことなかったりして、どれほどほんとに使えるのか分かりませんが。今のところlinkのところは自分で書く必要あり。 ユーザ支援じゃなくて、自動化してる試みは結構あるみたいなんで、そっちの方もおもしろそう。 http://l
ソース表示タブ (Source Viewer Tab) :: Firefox Add-ons
*重要な注意事項*: Firefox 41移行ではこれに相当する機能が最初から実装されているため、このアドオンは完全に無用となりました。 「ページのソース」「選択範囲のソース」をタブで開けるようにします。 「ソースの表示」ウィンドウのUIの全機能をタブの中でも利用できるのが特長で、タブセッション保存のAPIを利用しているため、無駄に「閉じたタブを元に戻す」にも対応していたりなんかします。 また、おまけとしてFirefox 2標準の機能で外部エディタでのソース表示も可能です。 「ソースを表示」を実行する際にメニュー項目をミドルクリックまたはCtrl-クリック（MacではCommand-クリック）すると、設定を反転した動作を行います。ウィンドウでソースを表示する設定の時は、ミドルクリックするとタブでソースを表示します。タブまたは外部アプリケーションでソースを表示する設定の時は、ミドルクリックす
Google Japan Blog: Google Web Toolkit で遊んでみました その1
メディア関係者向けお問い合わせ先 メールでのお問い合わせ: pr-jp@google.com メディア関係者以外からのお問い合わせにはお答えいたしかねます。 その他すべてのお問い合わせにつきましては、ヘルプセンターをご覧ください。
それ、Flexで！（左から右へ受け流すサンプル付き）
空前のAjaxブームもあってか、ものすごいテクニックを駆使したJavaScriptアプリケーションが存在します。むりやりJS技術だけで頑張ってる姿を見ると…「それ、Flexで！」と思ってしまいます。 JavaScriptで凝ったUIを作れることは素晴らしいのですが、世の中には「適材適所」という言葉があります。そろそろJSだけではなく、違う方法も模索した方が良いような気がします。 Webアプリケーションがデスクトップアプリケーションに負けているところは、デスクトップで当たり前のようにできていた動作がWebでは簡単に実現できないことです。 わかりやすい例が「ドラッグアンドドロップ」。 Webアプリケーションで全てのブラウザ向けに「ドラッグアンドドロップ」機能を搭載しようとすると、なかなか骨が折れます。 Flexで道具を左から右へ受け流すサンプル というわけで、今回はFlexで「ドラッグアンドド
fladdict.net blog: かなり画質のよいFLVの作り方メモ
１： mencoder vp6setというツールDLする。 ２： アスペクト比に応じて、4:3.batか16:9.batにaviファイルをドロップ ３： 音質がきかれるので適宜入力 ４－１： ビットレートを適宜選択 ４－２： ModeをTwo-Pass Firstパスに ４－３： End UsageをLocalFile Playbackに ４－４： Noise Reductionを０に ４－５： Sharpnessを０に ４－６： Max Frame Btw Keys を必要に応じて設定(少ないほどキーフレームが多くなる) ５－１： OKを押すと同じダイアログが出るので、ModeだけTwoPass BestQualityに変更してOK とりあえずFLV Encoderとは比べ物にならないぐらいいい画質になることは確認済。このツールよいね。個人的には同圧縮率のSorenson squeeze
CodeZine：プロトタイプ（prototype）によるJavaScriptのオブジェクト指向（プロトタイプ, オブジェクト, Javascript, ECMASCript）
はじめに JavaScriptはオブジェクト指向言語です。しかし、そのオブジェクトの性質は、他に良く知られているオブジェクト指向言語のJavaやC++と大きく異なっています。 そこでこの記事では、なぜそのような違いがあるのか、JavaScriptにおけるオブジェクト指向の言語思想を見ていくと共に、その違いの根幹であるプロトタイプについて解説していきたいと思います。 なお、この記事はJavaScriptの解説ですが、その内容は、標準仕様のECMAScriptで扱われる範囲に基づいています。従って、同じくECMAScriptを元にしている言語（JScript、ActionScript）でも通じる内容になっています。 対象読者 プログラミングの基本的な知識、ならびにオブジェクトやメソッドと言った基礎的な概念については、ここでは解説しません。最低限、オブジェクト指向プログラミングについて
ハタさんのブログ(復刻版) : 私は如何にしてJavascriptのprototypeを身につけたか。
javascriptのprototypeはなかなか理解してもらえないですねぇ。 ここ1年間でマジマジと実感しました。 特に、大規模開発をしているとこだと、いろんな知識が入り乱れていて（ホームページ時代からAjax本を読んだ人とか)が、javascriptが単なる関数型列挙な言語(語弊があるけど)という見方が大多数を占めているように見えます。 そんな中で "String.prototype.trim" みたいなコードを見せても、説明下手なのか中々上手く伝わらないですねぇ。 ということで(?)、僕がjavascriptのprototypeを身に着けるまでやったこと、とか。これも備忘 prototype.jsのソースコードを眺める Array.mapとかEnumerable, Hashは勉強になりますねー。 ただ、prototype継承されすぎて、ちょっと多すぎなこともあります。 var
はてなブログ | 無料ブログを作成しよう
ネイルで使う材料で、DIY時の木割れやネジ跡を派手にしたらかわいい OSB合板でちょっとしたボックスをつくりました。 ビス止め下手すぎて木を割ったり穴あけすぎたりした場所に、好きな派手色の樹脂を詰めてパテ代わりにしてみました。 ちょっと某HAYっぽみ出て可愛かったので、自分用にメモです。 手順 塗装 派手色グミジェルで失敗部分…
「最速インターフェースの研究と実践」メモ - 最速チュパカブラ研究会
昨日のSIGHCIのメモです。 最速インターフェースの研究と実践： ライブドア mala氏 まず、自己紹介を兼ねて概論 ブログ「最速インターフェース研究会」 WebのUIの進歩の停滞に対する批判を込めて名付けた 自分の肩書きは「インターフェースエンジニア」 よいUIを作るために「実体験に基づいたチューニングをしている」 自分で使ってみる ユーザの反応を見る 欲望に忠実に作る 作業としては、perl, html, jsの記述 「実のところ、プログラミングに詳しいと言える自信はないし、デザインのことも深くはわからないが、一人で一通りこなせる（完成品を作れる）という点は自分の強み。 よいUIを作るための作業は横断的。割り当てられた仕事をするだけの人ではダメ。」 作品紹介 2ch最速検索 キーボード操作だけでスレッド検索 まだAjaxは使っていない 「めくり型」UIの実験 スクロールしながら読むよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vimの全オプション
Vimの使い方 - 中級
Mozilla Store International
「カハマルカの瞳」のページは移転いたしました
https://del.icio.us/t32k