ドットインストール代表のライフハックブログ
![IDEA * IDEA](https://cdn-ak-scissors.b.st-hatena.com/image/square/456c34095db9c7ed1b035fa564f8588029941bd5/height=288;version=1;width=512/http%3A%2F%2Fwww.ideaxidea.com%2Fwp-content%2Fuploads%2F2011%2F08%2Fmanga_2.jpeg)
ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点を当てて圧縮ツール・サービスをまとめてみます。 Javascriptの圧縮 /packer/ http://dean.edwards.name/packer/ とってもシンプルな圧縮サービス。オプションで難読化することもできます。 JavascriptとCSSの圧縮 Compress javascript and css http://compressor.ebiene.de/ こちらもシンプルな
BonsaiJS - A Graphics Library SVGを使った高度なアニメーションを実現できるライブラリ「BonsaiJS」 高度なアニメーションが直感的なAPIによって実現できるライブラリです。 デモページでのデモが楽しい。 アニメーションのコードも分かりやすくドキュメントも充実してます 関連エントリ faviconを円グラフにしてアニメーションできる「Piecon」 CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル マウスを近づけると徐々にアニメーションする効果を作るjQueryプラグイン「Approach」 アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」
今ではあちこちで見かけるようになった Webページでの背景全体の画像フルスクリーン表示。 単純に一枚の画像を表示するパターンや 複数画像を切り替えて背景でフルスクリーンスライドショーにしたり ランダムで表示する画像を切り替えたり などなど、魅せ方はさまざまですが、 これらをjQueryを使ってできるだけシンプルなスクリプトで 実装ができないか試してみたので紹介してみます。 今回は、単一画像/スライドショー/ランダム の全部で3パターン紹介しますが、 HTMLとCSSは全て同じ構成になりますので 先にこの2つのソース構成について。 まずはHTMLから。 ◆HTML <div id="container"> <div id="contents"> <div id="wrapper"> <h1>jQuery FullScreen BackGround IMG</h1> <p>ここはコンテンツエリ
Rotating Cube キューブが3Dに回転するUIを作れる「jqCube」 面には普通のHTMLが書けてそのままレンダリングされます。 「おれ、3D分からないけど、3Dっぽいものが作れるぜ」と同僚にいうことが出来るでしょう。 使い方は面をDIVで定義して、$(element).cube() とやるだけでOK なんという簡単さでしょうか。 関連エントリ ピュアCSSでマリオを3D表示したデモ CSS3で画像を使った風の3Dボタンを実装したサンプル CSS3の3D Transformで3Dのホバーエフェクト実装例 3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」
例えばjQueryでスムーズスクロール的なのを実装したとして、a要素のデフォルトの機能を止めるために以下のようにreturn falseってするとイベントのバブリングまでとまるよという話。 $(function() { $('a[href*=#]').click(function() { // スムーズスクロールの処理 ... return false; }); }); つまり $(function() { $('a[href*=#]').click(function(ev) { ev.preventDefault(); ev.stopPropagation(); // スムーズスクロールの処理 ... }); }); としたときと同じ挙動になる。return falseしてるコードは、デフォルトの挙動を止めるのは意図してるけど、イベントのバブリングまで止めるのは意図してない場合が多いんじ
iPhone, iPad, ガラケーなどのスマフォで、各セクションのヘッダをそれぞれ半透明の状態でスクロールに追従させるスクリプトを紹介します。 A, B, C と追従中 対応ブラウザ iPhone 4GS (iOS5) iPhone 4G (iOS5) iPhone 3GS (iOS5) iPad 3 (iOS5) iPad 2 (iOS5) Galaxy S3 (Ice Cream Sandwich) Galaxy S2 (Gingerbread) NEXUS S (Jelly Bean) 実装 Step 1: 外部ファイル 外部ファイルは下記の2つのスクリプトと当スクリプト・スタイルシートをhead内に記述します。 zepto.js jQueryと互換性のあるモバイル用軽量ライブラリ iscroll.js モバイルでposition:fixedを実現するスクリプト <script s
Free UX Sketching And Wireframing Templates For Mobile Projects | Smashing UX Design スマホアプリのモック作成に役立ちそうな用紙テンプレート。 やっぱりアプリの設計は手書きで、という方に便利そうなテンプレートが公開されています。 スマホアプリ開発に活用できそうです。 紙に枠を書くよりも気持ちが乗ってきそうなテンプレートですね 関連エントリ スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」 スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」 スマホ関連のリモートホストのまとめ
The Creation of a CSS3 Clickable, Rotating Menu | InsertHTML クールな円形メニューをピュアCSS3で実装するチュートリアル。 クリックすると回転したり良い感じに立体感が出ていたりアニメーションしたりCSS3の機能をフルに使った円形メニュー。 奇抜なメニューであっと驚かせたいという場合に使えそうです デモページ メニューアイコンもしっかり回転されています。 関連エントリ アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ jQueryとCSS3を使ったPath風の円形メニューサンプル ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
JavaScript、というかjQueryを使って、キーイベントが発生した際にキーコードを取得する方法と利用についてのメモ。 キーコードの取得 キーボードイベント発生でイベントオブジェクトがわたされるので、whichプロパティでキーコードを取れる。例えばenterキーを押すと、enterキーのキーコードは13なので、event.which === 13となる。enterキーが押されたときに反応させるにはこうなる。 $("body").keypress( function( event ) { if( event.which === 13 ){ alert( "enterキーが押されました。" ); } }); コントロールキー / オルトキー / シフトキーとの同時押し コントロールキー・オルトキー・シフトキーと他のキーを同時押しした場合のキーイベントの取得方法。 まず、コントロールキー・
ここ最近、jekyll に関する記事を目にする事が多くなりました。 以前から WordPress でオリジナルなブログを作ってみたいと思いながらも、なかなか重い腰が上がらなかった私が、なんとなく jekyll でブログを作り始めてみたら、以外にオモシロかった、という話をまとめてみたいと思います。 本来生まれも育ちも違う、WordPress と jekyll を比べる こと自体はナンセンスなので、jekyll でどこまでできるかが本記事のメイン・テーマです。 大抵は 「ブログなら、最低このぐらいの機能が欲しいよネ」 というのがあると思います。例えば、私も使っている Octopress では、カテゴリとタグを使い分けることが出来ません。またカテゴリを階層化したい人もいるでしょう。「続きを読む」的な機能だって、欲しいですよネ。 一方海外では、「WordPress から jekyll に乗り換えま
レスポンシブWebデザイン対応の カルーセルを実装出来る、という jQueryのプラグイン・Responsive Carouselのご紹介です。どうでも いいですけど、ネーミングその まんまですね。 レスポンシブなカルーセルのスクリプト。シンプルでいい感じです。タッチイベントにも対応可能みたい。 普通のカルーセルですが、レスポンシブなWebサイト対応なのでタッチイベントにも対応出来る様になってるみたいです。 ↑ 実機で動作テストしましたが、フリックで進める事が出来ました。 以下、公式のサンプル集です。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script type='text/javasc
TOP > WebDesign > 新しい価値を与えてくれるjQueryプラグイン集「20 New jQuery Plugins Worth Taking a Look at」 WEBを制作する上で、非常に便利なjQueryプラグイン。javascriptで実現できる様々な動作、機能を簡単に実装できます。今日紹介するのはjQueryプラグインの中でも、新しい価値を与えてくれるjQueryプラグイン集「20 New jQuery Plugins Worth Taking a Look at」です。 RSlider フリップして進むブックスライダーだったり、jQueryのみで画像を描画したり、映像を背景にしたフルスクリーンサイトなどなど、様々なjQueryプラグインがまとめられています。今日はその中から気になったものをピックアップして紹介したいと思います。 詳しくは以下 BookBlo
jQueryでfadeOutとかのアニメーションして終わったらなんかするといったときにcallback関数を引数に指定するのとDeferred使う方法があるんだけどこの二つは挙動が違う。 こういうHTMLがあったとして <div>foo</div> <div>bar</div> <div>baz</div> まず以下のようなcallback関数の場合はそれぞれのfadeOutが終わるごとに呼ばれる。 $('div').fadeOut(function() { console.log('fin'); }); つまり'fin'が3回出力される。 一方Deferredを使った場合はこんな感じ。 $('div').fadeOut.promise().done(function() { console.log('fin'); }); .promise()がDeferredオブジェクトを返すので.do
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 BigVideo.js MP4などの動画をウェブページの背景いっぱいに配置します。 Video Background サイズ変更可能
Socialite.js 5KBの読込でソーシャルボタンの実装が簡単にできる「Socialite.js」 jQuery等に依存せず、単体で動作するあたりが特徴です。更に、ページ内に多数のソーシャルボタンを置くと重くなってしまいがちですが、スクロールと共にシェア数を読み込めるようなデモも用意されており、一気に読み込ませたくないケースでも使うことが可能。 残念ながら日本のサイトには対応していません。 関連エントリ 様々にCSSでデザインされたソーシャルボタンセット Facebook,Twitter,Google+の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」 ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」 円形に広がるソーシャルシェアボタン実装jQueryプラグイン「jOrbital」
Swipe JS - a lightweight mobile web slider 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 <div><ul> でリストを定義して<div>をJSで初期化するだけでスワイプでページ送りができるスライダーが簡単実装できます jQueryに依存していないため、軽量。カスタマイズ項目も必要最低限となっているようです 関連エントリ PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Roto」 スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」
Yannis Chatzikonstantinou / Freetile.js アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 LightBoxばりに流行ったこのレイアウトプラグインですが、新しいプラグインが出た模様。 プラグインは色々ありますがそれぞれ使い勝手が違ったりするので1つの選択肢として覚えておいてもよさそうですね 使い方は以下のように簡単で、オプションでアニメーションするかなどのシンプルなオプションが選べる模様です $('#container').freetile(); 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ
$(function(){ var url = window.location.pathname; var currentSrc = $('#menu ul li a[href="'+url+'"]'); var current = currentSrc.children().attr("src").replace(/(.gif|.jpg|.png)$/, '_current'+"$1"); currentSrc.children().attr("src", current); currentSrc.children().unwrap(); }); ・var url = window.location.pathname; window.location.pathnameでサイトルート相対のカレントURLを取得 ・var currentSrc = $(‘#menu ul li a[href=
動画以外を暗転させて動画を見やすくしてくれるjQueryプラグイン「Allofthelights.js」 2012年09月26日- Allofthelights.js, jQuery plugin to turn off the light and enjoy your videos 動画以外を暗転させて動画を見やすくしてくれるjQueryプラグイン「Allofthelights.js」 通常Youtubeの動画などはページ内に貼り付けてそのまま見ますが、ページデザインががやがやしていて見づらいという場合があります。 そんな場合にこのプラグインを入れておくと、動画以外を暗くして動画が見やすくなるというもの。 スイッチで電気を消す、的なイメージ。 動画再生と同時に暗くなるようなものだともっとカッコいいかもしれませんね。 関連エントリ 動画ギャラリー用WordPressプラグイン10個 画像や
EASY PIE CHART by rendro jQuery+HTML5でカッコいいアニメーションする円形グラフが描画できる「EASY PIE CHART」。 次のようなカッコいいアニメーションするグラフを描画出来るライブラリです。 ダッシュボードなんかにパーセンテージを描画する場合なんかに使えそうですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル faviconを円グラフにしてアニメーションできる「Piecon」
(記事が長すぎたので前編・中編・後編に分けました) 僕ももう、リストラされそうなとあるおっさんなんですが、先日Webサービスを公開しました。 きっかけになったのはこの記事です。 自分でWEBサービスを作りたいと思っている人へ http://anond.hatelabo.jp/20101203150748 こんな事できたら良いなぁと思っていると、他にもやっている方たちがいました。 たった2日で製作されたWebサービス「お部屋晒し」って? http://matome.naver.jp/odai/2131952812556433001 WEBサイトを発注してみた。 http://anond.hatelabo.jp/20120318122617 Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました - h300 http://d.hatena.ne.jp/inouet
前編はこちら http://anond.hatelabo.jp/20120926165407 ■ステップ6:MySQL(10時間) 会員情報や文章などのコンテンツを保存しておくデータべース、MySQLを調べます。 データベースは他にもPostgreSQLやSQLiteなどが有名ですが、やはり王道を勉強します。 MySQLはCakePHPや、ステップ4のWordPress他、よく使いますので把握しておきましょう。 基礎からのMySQL http://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AEMySQL-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E3%83%97%E3%83%AD%E3%82
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」についてTweet どうも(o´ω`o)ノ 今年もあと10週間ですねー。 今日はjQueryの、イベントのバブリングについてです。 バブリングの「バブル」は泡です。たぶん。 jQueryはHTMLで書かれた要素(DOM)を、以下のようにツリー形式で持っています。 そして、一番下のA要素をクリックすると、それが一番親のwindowまで伝わります。 これがイベントのバブリング(「伝達」とでも言うのかな)です。 クリックイベントは、例え自分がクリックされていなくても、子孫要素がクリックされれば発動します。 イベントは子供から順番に起きます。 よくAタグの「href="#"」を無効にするために、Aタグのクリックイベントの最後で 「return false;
lenticular.js - tilt-controlled images iPhoneの傾きで画像を回転させられるようにする「lenticular.js」 パソコン、iPhoneの両方で見て頂きたいですが、iPhoneでアクセスした場合はiPhoneの傾きと同時に画像が回転。 パソコンで見ればマウス位置に応じて画像を回転させることができます。 近い未来のECサイトではこういう形で商品を見ることができるようになっているのかも。 今後、他にも傾きを使って色々とWEBサイトもどんどん便利になっていくのかも 関連エントリ iPhoneアプリ作成に使えるPSD素材集10 iPhone風のあのスクロールをPCでも実現できる「jQuery.flickable」 iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート
Cycle2 カスタマイズ自由自在の多機能スライドショー実装ライブラリ「Cycle2」 全ブラウザ対応、レスポンシブ、カスタマイズ自由、エフェクト多数、スライドのブックマーク等、他のスライドショーで出来るような事は殆ど対応しているそうです。 とりあえず、既存のライブラリを使ってみたけどどうも自分の作りたいものと違う、といった場合にこうしたカスタマイズ出来るもので好みに作れそうです キャプションをつけたり ページ送りをしたり 関連エントリ CSS3で画像を分割スライドする超クールなパネル実装例 一枚の画像を高速にスライドさせてアニメーション表示する「JZoopraxiscope」 紙芝居のようなアニメーションでスライドするスライダー実装jQueryプラグイン「Innovation Slide」
気持ちのいいアニメーションは、スマフォのアプリには欠かせないと言ってもよいでしょう。 アニメーションはインターフェイスを設計する上で非常に重要で、4つのカテゴリに分けてユーザエクスペリエンスに欠かせないアニメーションを紹介します。 Great Animations Make Great Apps 下記は各ポイントを意訳したものです。 1. 知らせるアニメーション 2. 可能であることを伝えるアニメーション 3. あなたを歓迎するアニメーション 4. 楽しませるアニメーション 1. 知らせるアニメーション 最も単純なアニメーションの使い方で、ユーザーに知らせることを目的としたアニメーションです。これは多くのアプリケーションで使用されています。
FoldScroll スクロールすると巻物風にコンテンツが回転するUIを作れる「FoldScroll」。 コンテンツをスクロールすると、コンテンツ領域が3Dに立体的に巻き取られる風のインタフェースを実現できます ちょっと驚きの効果を付けたいという場合にjQueryでサクッと実現できるので試してみても良いかも 関連エントリ ページ内スクロールならコレにおまかせ!なjQueryプラグイン「Page Scroller」 使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 スクロールした時に面白いエフェクトが実装されたサイト集 クールなスクロールバーを実装するためのjQueryプラグイン集
Today is modern, and from paying all invoices at the bank in the form of phone bills, internet, pay TV, electricity, etc., almost everything can be done at home and everything can be done online. Increase. We can’t deny the importance of digital technology in our lives. Information technology (IT) and digital technology have become very important parts of any business plan. Almost every company, l
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く