JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法
[対象: 中〜上級] 僕のブログではてブ数がいちばん多いのはウェブページを高速化するTIPSを解説した記事です（まだ読んでない人はぜひ読んでください！）。 その記事では高速化全般を扱っていましたが、今日の記事ではJavaScriptに的を絞って表示速度をスピードアップできる施策を6つ紹介します。 もともとはSearch Engine PeopleブログのOptimizing JavaScript for Better Web Performanceで説明されていたものです。 記事作者のJoydeep Deb（ジョイディープ・デブ）氏に僕のブログでの転載許可をもらえました (Thanks, Joydeep!)。 逐一の翻訳ではなく、書かれている内容をもとに僕の言葉で解説していきます。 1. HTTPリクエスト削減のためにJavaScriptファイルを1つに統合する ウェブページの表示を高速化
audio.js
audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css. Installation Put audio.js, player-graphics.gif & audiojs.swf in the same folder. Include the audio.js f
ブックマークレットサービス・Hatena::Let を作りました - 2nd life (移転しました)
ブックマークレットをかんたんに作成・公開できるラボサービス、その名も Hatena::Let を作りました。 http://let.hatelabo.jp/ 未だにブックマークレットを作るときには、アドレスバーに javascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部の bookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えると gist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。 ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい！と思い id:cho45 と半年ぐらい前の開発合宿*1で作って眠らせていたのを、ち
ブログ本文のHTMLにJavaScriptのサンプルコードを書き、それを読み込んでJavaScriptを実行する方法のメモ - こんにちはこんにちはmonmonです！
jQueryのAPIを眺めてて、「そういえばこのサンプルで実行するiframe、実際にファイルがあるのかな？それともJavaScriptで動的に作ってるのかな？」と思って確認したのでメモメモ。 確認してみたらやっぱりJavaScriptで動的にiframe作ってるみたいですね。 （サンプルコードのhtmlをいくつも作るの大変だから当たり前なのかしら？） たまにブログとかにJavaScriptのサンプルコードを書いてそれを実行したくなるときがあるのでその時用。ブログのプレビューとかも最近こうやってるiframe動的に作ってるんでしょうねぇ。 方法 <code class="demo-code">っていうタグを用意してその中にJavaScriptのコードを記述 id指定ではなく、class指定なのは複数のコードを実行したいとき用ですよね 出力結果を入れる空div、<div class="cod
jQuery の oEmbed プラグインで、FlickrやYouTubeなどのコンテンツを取得する - goodpic.com
今日は MT Hackathon だったので、oEmbed を試しに使ってみた。oEmbedは、Flickr、YouTubeなどの対応サービスのURLから、コンテンツの内容をXMLやJSON形式で取得するためのAPI仕様です。ブログなどに貼付けるためのHTMLを、共通のAPIコールで取得できるのがメリットですね。 oEmbed URLを埋め込みコンテンツに変換するoEmbedの仕様 - Codin' In The Free World oEmbedを利用するためのライブラリも、Perl, Ruby, php などそろっていますが、手軽なjquery-oembed プラグインを使ってみた。動作サンプルがこちら。 jquery-oembed 動作サンプル 使うのは非常に簡単。こんなフォームに対して、 <form action="" id="oembed_form"> <label>oEmbed
amachang - JavaScript 入門
プログラミングのこつ 無駄な名前を極力使わないこと。意味単位に名前空間を細かく階層的に分離すること。 ここで言う名前空間とは 名前空間とは、一つの名前が一意のものを表す空間。例えば、大きな目で見れば、日本語は自然言語の名前空間である。また、専門用語なども名前空間と考えることが出来る。 日本語 { コンニチワ = 挨拶 : : } 中国語 { ニーハオ = 挨拶 } 英語 { ハロー = 挨拶 } また、名前空間は重なり（優先順位）を持つ 同音異義語などの言葉は、それぞれの細かい名前空間の重なりによって一意のものに特定されると考えられる たとえば、「コイが好き」と言った場合 池に関する名前空間 { コイ = すいすいパクパク } チャライ話題に関する名前空間 { コイ = ドキドキきゅんきゅん } お茶に関する名前空間 { コイ = にがーい } 名前空間の優先順位を考えると、一意の意味を知
jQuery Easy Slides v1.0 - Possibly the easiest to use jQuery plugin for making slideshows
Possibly the easiest to use jQuery plugin for making slideshows! Documentation Purpose Usage Preparing Your Images Which Files Do I Need to Use? Preparing Your HTML & CSS Setting Up Easy Slides In jQuery Examples Example 1 Example 2 Purpose A friend of mine who is currently beginning his journey into the world of jQuery asked me how I would go about making an image slideshow. He had tried several
JavaScript基礎文法最速マスター - gifnksmの雑多なメモ
続々と増え続ける基礎文法最速マスターシリーズ(あまりにも増えてきたので他の言語記事へのリンクは別の記事に移しました)。 JavaScript 版は誰も書いていなかったようなので書いてみます。こういう解説記事的なものを書くのは初めてなので変なところがあったら指摘して頂けるとありがたいです。 JavaScriptの基礎概念についての解説はこちら：JavaScript基本概念最速マスター - TechTalkManiacs 1/31 23:58追記 コメント欄のos0xさんのご指摘を基に一部追記・修正を行いました。 2/2 2:52追記 switch文・正規表現・例外処理について追加しました。 2/2 6:44追記 コメントでfavrilさんにご指摘頂いた点(typo & コメント・サンプル追加)を修正・加筆しました。 2/2 7:15追記 トラックバックでLiosKさんにご指摘頂いた点(cal
UIプロトタイプ：autocomplete (jQuery plug-in jSuggest)
昨日に引き続いて、今日も作成中の Google App Engine アプリ用のUI部品の作成。HTMLの一部に記述された（もしくは別途JSONで取得した）ワード・リストの入力を autocomplete を使って簡単にしようという試み（Google Suggestのようにダイナミックにリストを取得する必要はない）。 そこで、まずは既存のライブラリ・プラグインの調査から。必要とする人も多いようで、少し調べただけで２０個ぐらい見つかる。デモを見て５つに絞ってからそれぞれのソースコードを解析。例によってどうしようもない品質のコードもあるので、結局のところたどり着いたのは、比較的コードがきれいなこの二つ。 jQuery Autocomplete Mod JQuery Plugins by Dylan Verheul - autocomplete どちらかをそのまま使っても良かったのだが、どちらも
プロトタイプ：AJAXで改良するフォーム入力
ここのところ、Google App Engine上でアプリを作っている私だが、iPhoneアプリとかを作り慣れている私としては、単純なHTMLページの組み合わせでUIを作るというのでは面白くない。そこで、サーバーがModel、クライアントがViewとControllerというアーキテクチャととことん追求してサービスを作っているのだが、そのためにはさまざまなUI部品を作らなければならず、そこにやたらと時間がかかっている。 始めた当初は、「今はオープンソースの時代だからUI部品もオープンなものを集めてくれば済む」と軽く思っていたのだが、実際に使おうとすると不必要に複雑だったり、汎用化されすぎていたりしてそのままでは使えないものが大半。結局のところ、そのまま使える品質のJavaScriptライブラリはjQueryのみで、それ以外は、（１）オープンなものを元にシンプルなものを作り直す、（２）スクラ
Snipplr - Login
New Snippet/ Register/ Login Advanced Search Login to Your Account Username/Email Password Forgot your password? Don't have an account? Register now! Login with Google Login with Facebook Login with GitHub Code Snippets/ Snipplr Blog/ About Snipplr Choose a language for easy browsing: ActionScript ActionScript 3 Apache AppleScript ASP Assembler AutoIt Awk Bash C C# C++ Clojure ColdFusion CSS Delph
ブラウザー上で動く iPhone-style トグルスイッチ
ここのところ「iPhoneアプリのUIの大半（ひょっとしたらアプリすべて）をHTML+JavaScript+CSSで作ることはできないか？」に挑戦している私。 そのためにまずは部品作りからとりかかっているのだが、昨日から今日にかけて作ったのは、プログレス・バー、スライダー、トグルスイッチなどの「連続値・不連続値」を表示・入力用UIコントロールをウェブページ上で実現するためのJavaScriptライブラリ。 見た目（Look&Feel）はCSSを使って自由に指定できるように作りつつ、シンプルでありながらいろいろな場面で使い回しがきくライブラリを作りたかったので、何度もリファクタリングを繰り返してしまったが、なんとか形になってきた。 ということで、そのライブラリ（jTouchControl version 0.10）を使ったiPhone風トグルスイッチを公開。一応、Safari (4.0),
【ハウツー】jQuery on iPhone - jQTouchを使ったWebアプリ開発 (1) jQTouchとは | エンタープライズ | マイコミジャーナル
iPhone向けWebアプリケーションの開発において、jQuery使いなら見逃せないプロダクト「jQTouch」のベータ版がリリースされた。同プラグインを使用すれば、ネイティブアニメーションを伴うWebアプリケーションでも簡単に開発できるようになる。jQueryベースのため、強力なAjaxアプリケーションだって可能だ。本稿ではjQTouchを使ったWebアプリ開発方法を紹介しよう。 David Kaneda氏は8月30日(米国時間)、jQTouchの最新版であるjQTouch 1.0(beta)をリリースした。jQTouchはThe MIT Licenseのもとで公開されている、iPhone上で動作するWebアプリケーション開発に特化したjQueryプラグイン。デベロッパはjQTouchを使用することで、テーマやネイティブアニメーションをともなうiPhone用Webアプリケーションを簡単に
JAVASCRIPT::BOOKMARKLET
JavaScript::Bookmarklet スクリプト集:このページで紹介しているスクリプトは自由にお使いください。 更新日：2006.10.27 [blog] このページは様々な用途で利用できるBookmarkletをご紹介しています。もしこのページで紹介しているBookmarkletが気にいったら是非このページをあなたのホームページとリンクしてください。そしてもっと多くの人にBookmarkletのおもしろさを伝えてください。リンクに許可は必要ありません。またこのページで紹介しているBookmarkletの多くは海外サイトで紹介されているコピーフリーなものです。ですから自由にコピーして使ってください。 ニュース＆お知らせ 6月27日：「カウンタ」を追加しました。 3月18日：「DOMのソースを見る」を追加しました。 1月26日：「nofollow属性のリンクを強調」を追加しました。
自作のグリモンの処理をAutoPagerizeで動的に読み込んだページにも適用する方法 - 今日もスミマセン。
※この記事にはちょっとした誤りが含まれています。追記:2009.07.24(2)を参照してください。 このテの情報があまり出回ってないようなので書いておく。 AutoPagerizeには、その動的に読み込んだページを継ぎ足すときに、特定の処理をそのページに対して適用する仕組みがちゃんと用意されている。 先日公開したグリモン jaro.user.js でもその仕組みを利用している。 if (window.AutoPagerize) { window.AutoPagerize.addDocumentFilter(function(doc) { setOpacity(sites, doc); }); } 上記のように、AutoPagerize.addDocumentFilterに特定の処理を行う関数を渡してあげると、動的に読み込んだページを継ぎ足すときにその関数を実行してくれるようになる。 もう
【ハウツー】あのBBCが作った超実力派JavaScriptライブラリ"Glow"を徹底解剖する (1) BBCが公開したJavaScriptライブラリ、その名は「Glow」 | エンタープライズ | マイコミジャーナル
英国放送協会(BBC)は7月7日(英国時間)、JavaScriptライブラリ「Glow」の最新バージョンである1.5.1をリリースした。GlowはApache Licence Version 2.0のもとで公開されている、オープンソースソフトウェアJavaScriptライブラリ。 Glowの特徴は次のとおり。 シンプルなDOM、イベントハンドラ、アニメーション操作など さまざまなウィジェット(AutoSuggest, Carousel, Editor, InfoPanel, Overlay, Panel, Slider, Sortable, Timetable) 明快/豊富的なドキュメント BBC Browser Support Standards[http://www.bbc.co.uk/guidelines/futuremedia/technical/browser_support.s
Ajax - iTunes Store 検索 : 404 Blog Not Found
2009年07月15日11:30 カテゴリLightweight Languages Ajax - iTunes Store 検索 へ? gist: 147213 - GitHub iTunes StoreってWeb APIもってたの? 持ってましたよ。しかもJSONPが使える。 http://www.apple.com/itunesaffiliates/API/AffiliatesSearch2.1.pdf というわけで、検索できるようにしてみました。 Demo JS Source いたってシンプルです。 (function(d){ var $ = function(id){ return d.getElementById(id) }; var json2list = function(json){ var ul = d.createElement('ul'); ul.style.lis
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
Loading...
IBM Developer
