PageSpeedを使ってWebサイトを最適化・高速化しよう | さくらのナレッジ
Google DevelopersのプロダクトにPageSpeedというWebサイト最適化ツールがある。診断＆アドバイスのツールと、HTMLなどを自動変換するツールが用意されており、これらのいずれかを使うことによって的確に既存のWebサイトの高速化が可能だ。診断結果をベースに作業ポイントを紹介していこう。 PageSpeedはモバイルデバイスを強く意識するようになった Webサイトの最適化アドバイスツールのPageSpeedは、WebブラウザFirefoxのプラグイン（拡張機能）としてGoogleから提供されてきた。同様のツールとしては米Yahoo!が提供するYSlowがある。昔はYSlowおよびYUI関連のツールを使うぐらいしか手頃な最適化手法はなかったが、2009年にPageSpeedが登場し、その後PageSpeedはGoogle Chromeの拡張機能としても利用できるようになって
jQuery Clip - jQueryのプラグインをまとめました。
jQueryの便利で実用的なイメージスライダーやレスポンシブ対応のプラグインをタグやカテゴリで見やすくまとめました。
Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
ツールチップも出せるニュースティッカー用jQueryプラグイン・Dynamic News
なかなかユニークだったのでメモ的に。 進める、戻る機能の付いたニューステ ィッカーを実装するjQueryプラグインで、 ツールチップもついでに出してくれます。 省スペースで情報を凝縮できるのは なかなかいいですね。 RSSはGoogleAPIを使用しているようです。 ティッカーにマウスオーバーするとnext、prevのボタンと同時にツールチップを表示します。 進むボタンを押すとニューステキストがスライドします。カルーセルをかけ合わせた感じですね。 使い方GoogleAPIキーを使ってRSSを取得し、jQuery本体とプラグインを読み込みます。 <script type="text/javascript" src="https://www.google.com/jsapi?key=*****"></script> <script src="jquery-1.4.4.min.js" type=
jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
説明を追加できる、jQueryを使ったドロップダウンメニュー – creamu
グローバルメニューに説明を加えたい。 そんなときに使えそうなのが、『jDiv』。説明を追加できる、jQueryを使ったドロップダウンメニューです。 メニューにマウスオーバすると、メニューのリストと説明の入る部分が大きく表示されますね。ふわっと表示される動きが気持ちいいです。 マウスオーバ時に現れるコンテンツは#hidden-divに書いて、あとはjdiv.jsを編集して複数のメニューに対応させるようですね。 デモは以下から。 Skip the code & show me the demo ちょっと変わったメニューになっているので、一度見てみてください。 jDiv: A jQuery navigation menu alternative ±0の加湿器を購入。TAKUMIのCHIMNEY2と迷ったんだけど、やっぱりデザインにひかれてこっちを選択。深澤直人さんデザインで、MoMAの永久収蔵品
Flickrみたいに写真内に枠を作ってコメントできるようにするjQueryプラグイン:phpspot開発日誌
jQuery Photo Tagger Plugin For Flickr-Style Photo Tagging Flickrみたいに写真内に枠を作ってコメントできるようにするjQueryプラグインがあるみたいです。 その名もPhoto Tagger プラグイン。画像内をドラッグ＆ドロップして枠を作成すると入力ダイアログが現れるのでメッセージを入れるとコメントを入れられます jQueryプラグインということで比較的実装は簡単なものになっています ただし、サンプルはサーバサイドがColdFusionという若干マニアックな構成になっていますのでPHPerやPerlerな方は受け先を自分で書く必要があります。 送られてくるものを保存して出力の際に似たような出力をするだけなのでそれほど大変そうでは無いかもしれませんがすぐ使いたい方はご注意下さい。
[JS]jQueryのプラグイン33+1選 -2010年1・2月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
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
カヤック製、ブログパーツフレームワーク·suzunari MOONGIFT
実践に勝る訓練はない、と言われる。机上の空論や理想論では心には響かない、確かな経験があるからこそ重みが増していくものだ。ソフトウェアについても同様で、本当の意味で役立つものは、実際に運用で使われて培われてきたものばかりだ。 Old versionとのことですが、左側に表示されているのがブログパーツ ブログのサイドバーなどに貼付けるブログパーツ。そのブログパーツを効率的に開発、提供するためのフレームワークがsuzunariだ。 今回紹介するオープンソース・ソフトウェアはsuzunari、Flash + JavaScriptによるブログパーツフレームワークだ。 suzunariの開発元であるカヤックではブログデコというブログパーツポータルを運営している。そして以前に話題になった剣道ブログパーツをはじめ、多数のブログパーツを開発している。そこで培われたノウハウを集約したのがsuzunariだ。
[JS]動作が軽快なパネルを水平・垂直にスライドするスクリプト -Easy Slider
リスト要素のパネルをスムーズなアニメーションでスライドさせるスクリプト「Easy Slider」をcss globeから紹介します。 Easy Slider 1.5 demo パネルには画像やテキストなどを配置することが可能で、スライドのコントローラーはテキストベースのものやグラフィカルなものを使用することができます。 demo 1（スタイルは無し） demo 2（スタイルを適用） demo 3（スタイル無しで垂直方向に） demo 4（スタイル適用、自動スライド） demo 5（複数のスライダーを設置） スクリプトのオプションでは、スライドのスピード、スライドの自動・手動、ポーズの時間などを調整することができます。 Easy SliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。
JavaScriptでかんたんAIRアプリに挑戦 - ぼくはまちちゃん！
こんにちは！ みなさんガジェットつくってますか！ なんだか最近、色々な種類があるみたいですね！ Yahooナントカとか、Googleガジェットとか、Adobe AIRとか、シルバーナントカとか、あとWindowsサイドバーだとか…。 こういうガジェット的な、ちょっとしたデスクトップ用のツールって、 どうやってつくるのかなーなんて思って、ちょっと調べてみました！ そしたら意外と簡単だった…！ これならぼくにも作れそう！！ ってことで、ちょっとメモしておきますね！ どれにしようかな…！ つくるのが簡単なこと WinでもMacでも動いてほしい 使う人がインストールしやすそうなのがいい こんな感じで考えていくと… 最終的に、Googleガジェット か AIRなのかなー、ってことになりました！ でも実際ぼくはGoogleガジェットなんて使ったことないし…！ (なんとなくGoogleデスクトップとかも
2008年、ウェブのデザイナー・開発者がおさえておきたいリソース集 | コリス
2008年、ウェブのデザイナー・開発者がおさえておきたいデザイン、Photoshop&Illustratorのチュートリアル、ブラシやベクター素材、JavaScript、CSS、WordPress、タイポグラフィ、フォント、素材、リソースなどをnoupeのエントリーから紹介します。 2008 Most Popular Design posts, Tutorials and Resources デザイン関連 Photoshopのチュートリアル関連 Illustratorのチュートリアル関連 Photoshop&Illustratorのブラシやベクター素材 JavaScript関連 WordPress関連 CSS関連 フォント&タイポグラフィ関連 ツール&素材関連 デザイン関連 42 Awesome Business Card Designs 20 Beautiful HDR Pictures
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プラグインいろいろ:phpspot開発日誌
10 Useful jQuery Plugins | AjaxLine 便利なjQueryプラグインが色々とあるみたいですね。 最近では、jQueryの人気が非常に高いように感じます。prototype.jsとかのシェアの状況は今はどうなってるんでしょうね。 Virtual jQuery Keyboar jQuery 3 State Switch Plugin jQuery Quick Search Date Range Picker Tooltips based on jQuery FaceBox ColorPicker 全部見る これだけjQueryプラグインがあるということは、JSフレームワークのシェアはここ数年でちょっと変わってきてるんでしょうね。 関連エントリ jQueryを速攻マスターしたい方におすすめの「jQuery Selectors」 HTMLで雑誌のような美しい段組みレ
JSON/XMLデータを簡単に編集する·JSON Editor MOONGIFT
Ajaxを使う上でよく使われるのがJSONやXML形式だ。最近では特に冗長性がなく、JavaScriptでそのまま使える分、JSONが好まれる傾向にある。しかしコンピュータ上は読みやすくとも、人向けのフォーマットとは言えそうにない。 例えばデバッグの際にJSONフォーマットをチェックする必要があった場合、その解析は非常に面倒だ。そこで使ってみたいのがJSON Editorだ。 JSON EditorはAdobe AIR製のフリーウェアで、JSONやXMLの内容をパースして表示、編集できるソフトウェアだ。 JSON Editorを使うと、出力されたJSONをそのまま貼付けてReadボタンを押せばテーブル形式に並べ替えて表示してくれる。これで階層がどれくらい深いのか、希望した通りにデータが並んでいるのかといった情報が簡単に分かるようになる。 多彩なショートカットキーがある 逆にデータを作成して
HOKYPOKY. | MULTICOL. jQuery Plugin
MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。 もちろん、日本製のプラグインなので日本語もきれいに段組みにします。 一 或春の日暮です。 唐の西の門の下に、ぼんやり空を仰いでいる、一人の若者がありました。 若者は名を杜子春といって、元は金持の息子でしたが、今は財産を費な身分になっているのです。 何しろその頃洛陽といえば、天下に並ぶもののない、繁昌は、まるで画のような美しさです。 しかし杜子春は相変らず、門の壁に身を凭かと思う程、かすかに白く浮んでいるのです。 「日は暮れるし、腹は減るし、その上もうどこへ行っても、泊めてくれる所はなさそうだし——こんな思いをして生きている位なら、一そ川へでも身を投げて、死んでしまった方がましかも知れない」 杜子春はひとりさっきから、こんな取りとめもないことを思いめぐらしてい
[JS]jQueryのプラグイン33 1選 -2008年10月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 ListNav リストの高機能なナビゲーションを作成。 Scroll your HTML ホイールにも対応した高機能なスクロールする
[JS]jQueryのプラグイン33+1選 -2008年7月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 BDC DrillDown Menu, an iPod-style menu iPod風のドリルダウンのナビゲーション。 Colum
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
&lt;script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&amp;pid=877160106″&gt;&lt;/script&gt;&lt;noscript&gt;&lt;a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&amp;pid=877160106″ target=”_blank” &gt;&lt;img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&amp;pid
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
