Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
竹取 JS
画面をダブルクリックで縦書きと横書きを切り替えることができます。要素を指定して縦書きにしている場合は、次回アクセス時に同じ表示が引き継がれます。 どんなサイトでも縦書きにするブックマークレット。 ↓右クリックで「お気に入り」に保存するか、リンクをドラッグしてブックマークバーにドロップします。 「縦書きにする・iPhone 用リンク」 「縦書き可能にする・iPhone 用リンク」 「段組み縦書き可能にする・iPhone 用リンク」 iPhone に登録するには？ とりあえずこのページを共有ボタンからブックマーク。 iPhone 用リンク を長押ししてコピー。 ブックマークを開いて、追加したブックマークを「編集」。 名前を「縦書き可能にする」などに変更し、URL 欄に上記コードをペースト。 最初の「http://」を削除。 注意！ やや動作が重いです！ うまく変換できなかったときは、画面をダブ
文系ド素人がmixiアプリを開発〜リリースするまでのまとめ - kazu0620's blog
というわけで プログラミング未経験の状態から、mixiアプリのリリースまでなんとか漕ぎ着けることができました！最近、OpenSocial界隈は盛り上がってるみたいだし、プログラミング経験はないけれど、興味ある！って人も多いと思います。そこで、所謂「ド素人」の状態からプログラミングを勉強してmixiアプリをリリースするに至るまでの僕の軌跡と、何をどう勉強すればいいのか？ってのをまとめてみました。webで調べたり、プログラマの知人に相談したりしてこれは良かった！って部分を抜き出してまとめたので、これから勉強するぞって方は参考にして頂ければ幸いです。これであなたもＳＡＰ（ソーシャル・アプリ・プロバイダー）に！ 完成したアプリ 「一行リレー小説」 http://mixi.jp/view_appli.pl?id=15525 開発期間：実質3ヶ月程度 リリース日：3月24日 現在の投稿総数:7622行
Twitterをサイトに組み込むチュートリアル＆サンプル集:phpspot開発日誌
Twitterをサイトに組み込むチュートリアル＆サンプル集。 当サイトにて、色々とTwitterの機能を実装する仕組みを色々と紹介しましたが、それらをまとめてみました。 JavaScript によるTwitterメッセージの埋め込み Twitterのメッセージをページに載せられるJavaScript「Twitter.js」 JavaScript 単体でTwitterのメッセージをサイトに簡単に埋め込み可能 サイトにリアルタイム更新＆検索機能付きTwitter窓を設置できるjQueryプラグイン「Juitter」 画面遷移なしにTwitterステータス表示＆検索ができるウィジェットを設置可能。 PHP製のウィジェットや投稿用サンプルコード等 Twitterのメッセージ表示などができるPHP＆AJAXなブログパーツ実装が可能な「Ptwix」 Twitterのメッセージ表示用のリロード機能付きウ
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
長～いページもスッキリ！jQueryでタブ表示 (1/2)
1つのWebページに多くの情報を載せようとすると、縦に長くなって見づらくなってしまいます。そのようなWebページを整理するには、ページをいくつかのタブに分けるのが1つの方法です。今回は、jQuery UIの「Tabs」というウィジェットを使って、ページをタブに分ける方法を紹介します。 Tabsをダウンロードしてみよう jQueryには、ユーザーインターフェース関連の基本的なライブラリを集めた「UI」（User Interface）があります。その中の1つに「Tabs」というウィジェットがあります。Tabsは、Webページを複数のタブに分割して、切り替えられるようにするものです。 jQuery UI Tabsを使うには、まずこのJavaScriptファイルをダウンロードします。ダウンロードページに接続すると、ダウンロードするモジュールを選ぶページが表示されますので、「UI Core」と「Ta
一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
[JS]背景画像をアニメーションさせて、サイトの印象をガラッと変えるスクリプト
背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(function() { // *** // Scrolling background // *** // height of background image in pixels var backgroundheight = 4000; // get the current minute/hour of the day var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); // work out how far through
グーグルが賭けるHTML 5の未来 － ＠IT
2009/05/28 「決してWebをあなどってはいけない」（Never underestimate the Web）。Google I/O 2009初日の基調講演でシュミットCEOに続いて登壇したのは、米グーグル バイス・プレジデントのビック・グンドトラ氏だ。ゆっくりと一語一語を区切りながら語り始めたグンドトラ氏の言葉には重みがある。彼は元マイクロソフト社員で、まさにWebをあなどっていた側にいたからだ。 グンドトラ氏はWindowsプラットフォームを唱道する立場にあった。彼に限らず、マイクロソフト社員の間には、ネイティブアプリケーションでなければできないことがあるとする見方が一般的だったという。「Keyholeという会社が出てきたとき、彼らが持つようなアプリケーションこそ、ネイティブでなければできないものだと言っていた。ところがグーグルは2004年11月にKeyholeを買収し、Goo
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
訪問者驚きの手めくり風、画像ギャラリー作成サンプル:phpspot開発日誌
Create a unique Gallery by using z-index and jQuery | This Blog Use jQuery 訪問者驚きの手めくり風、画像ギャラリーを作成できるサンプル。 以下がデモで、実際に試してみましょう。驚きの効果が得られるはずです。 HTML定義部分。分かりやすいコードも魅力です。 <!-- relevant for the tutorial - start --> <div class="grid_6 prefix_1 suffix_1" id="gallery"> <div id="pictures"> <!--画像の定義部分--> <img src="images/picture1.png" alt="" /> <img src="images/picture2.png" alt="" /> <img src="images/pictu
ウェブサイトの制作・検証に役立つブックマークレット集
レイアウト用のグリッドをオーバーレイで表示します。 URLを変更すれば画像の変更可。 Bookmarklet Layout Grid Overlay MRI
Travian Task Queue [機能追加版] 2.4J - マジカルアーチャー(再)：楽天ブログ
2008.11.19 Travian Task Queue [機能追加版] 2.4J (16) テーマ：トラビアン(37) カテゴリ：ユーザースクリプト Travian Task Queue [機能追加版] 2.4J http://travian3.info/36373j.user.js 以前公開していた Travian Task Queue に更に改良を加え 本家ではサポートしていなかった日本語に対応させました。 Travian Task Queue [With more Feature] を元に作成してます。 各行動に、あとで～するのリンクを追加し、 その行動の時間と繰り返し回数を指定できるようになってます。 以前のTravian Task Queueを導入している人は、 Travian Task Queue [機能追加版] 2.4Jと機能が重複するため、 以前のスクリプトを停止かアン
![Travian Task Queue [機能追加版] 2.4J - マジカルアーチャー(再)：楽天ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/66bf66237f44c2cdd0eaebaaaa5b6a2216a6f977/height=288;version=1;width=512/http%3A%2F%2Fimage.space.rakuten.co.jp%2Flg01%2F36%2F0000812536%2F83%2Fimg70486d3czikdzj.gif)
デザイナ向け「はじめてのjQuery」 - あと味
東京への転勤でバタバタしてたのと、引越し先にネット回線がないのとでアップが遅れました。 先週、制作会議というデザイナの会議でjQeryの勉強会をしました。その際に作成・発表したスライドです。 前回、制作会社で働く人向け「はじめての正規表現」 - あと味で使ったスライドほどインパクトはないのですが、これをきっかけに、社内外問わず、jQueryを使ってみようと思ってくれるデザイナが増えたらうれしいです。もちろんプログラマにもおすすめです。 KeynoteのHTML書き出し機能で出力したものを改変して作っています。超楽チン。時間がなかったので取り急ぎアップしますが、近日中にjQueryを使ってコピペ用のテキストと目次を設置します。 前提 JavaScriptではなく、jQueryが使えるようになることが目的 jQuery UIは日を改めて紹介予定 HTML, CSSは使いこなせる人向け（グラフィ
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
Flash不要！JavaScriptで派手なWebデザイン
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]クロスブラウザ対応、背景をアニメーションで変更するスクリプト -Blend
[JS]ホバー時に浮かぶエフェクトがとってもリアルなスクリプト
Web ページを高速化する
Galleria - a Javascript Image Gallery | DevKick Lab: