[B! jquery][Web制作] stealthinuのブックマーク

20160930 フロントエンド高速化業務編 (社内勉強会)

スタートアップやプロダクトの成功に必要な「アイデア×プロダクト×実行×チーム×運」の 5 つの項目について解説した概要のスライドです。急成長するプロダクトの初期に役立てていただければと思います。プロダクトマネージャーやスタートアップの CEO の方向けにどうぞ。 ※ Japan Product Manager Conference 2016 の登壇資料です

stealthinu 2016/10/06

CSSやjQueryの最適化の話。jQueryの方はこれで速くなるんだろうとは思うのだけどなんか悲しくなるものが多い。

リンク

見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ

作成‥2014/05/7 更新‥2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、﹁どっかで見たことあるけど何だっけ？﹂といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。エンジニア速報は Twitter の@commteで配信しています。もくじメニュー1．フィーチャーリスト2．スティッキーヘッダー画像エフェクト3．マウスオーバーで画像にキャプション4．イメージビューア5．ズームインエフェクト6．ブラーエフェクトスクロール7．Infinite Scroll(無限スクロール) ８．画像シーケンス9．横スクロール10．フリック機能レイアウト11．画面全

stealthinu 2014/05/07

jQueryプラグインのちょっとしたこもの。マウスオーバーで下から画像キャプション出すのとか結構使われてるよね。

リンク

http://gridster.net/

stealthinu 2013/06/11

「タイル」Webサービスでデザインを簡単に作れるjQueryプラグイン

リンク

なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密

日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。な

stealthinu 2013/03/08

なるほど、そういう工夫があったのか。同じUIをjqueryで実装できるプラグインがあるのはお手軽で良いな。

リンク

普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」:phpspot開発日誌

ParamQuery jQuery Grid Plugin 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン﹁ParamQuery﹂ありきたりなカッコいい、とはいえないような以下のテーブルがあったとしますプラグインで初期化すれば、ソータブル、エディタブル、なクールなテーブルに早がわりこれは5,6年前でいえば魔法だと思う方は少なくないでしょう。関連エントリレスポンシブなテーブルを作るjQueryプラグイン﹁MediaTable﹂テーブルをグラフに変換してくれるjQueryプラグインレスポンシブなテーブル作りに役立つjQueryプラグイン﹁FooTable﹂テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン﹁tablecloth.js﹂シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン﹁jQuery Table So

stealthinu 2013/01/11

HTMLのテーブルをExcel風の多機能なテーブルにしてくれるjQueryプラグイン

リンク

なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー

今のウェブデザインの流行りは﹁レスポンシブ・ウェブデザイン﹂！昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった﹁必読！5分でわかる流行のレスポンシブWebデザインまとめ﹂に載っていた﹁NHKスタジオパーク﹂のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。さらに狭めてみると、右のサイドバーが完全に無くなった。さらに狭めると今度は左のサイドバーが消えた。ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ

stealthinu 2012/10/16

レスポンシブデザインするためのjQueryプラグイン jQuery Masonry が使われてて、シュリンクするときになめらかにアニメーションしてくれてかっこいい！

リンク

jQuery Mobile＋PhoneGap連携でDreamweaverはスマホアプリ開発ツールに？

jQuery Mobile＋PhoneGap連携でDreamweaverはスマホアプリ開発ツールに？：D89クリップ（21） jQuery Mobileとの連携機能搭載を宣言したDreamweaver CS5の今後の方向性や便利機能について聞いた。Dreamweaverは「IDE」になってしまうのか？ Webサイトをモバイル端末向けに提供したいというニーズが本格化してきた。いち早くjQuery Mobileとの連携機能搭載を宣言したAdobe MAXからはや4カ月（参考：Adobe Max 2010まとめレポート〜アドビのHTML5・jQueryサポート最新事情）。Dreamweaver CS5がモバイルWeb開発ツールへと成長する日は近いのか？米アドビシステムズでWebセグメントグループプロダクトマネージャーを担当しているデヴィン・フェルナンデス（Devin Fernandez）氏

stealthinu 2012/10/06

Dreamweaver CS5からはjQuery MobileとPhoneGap対応でほぼスマートフォン開発用IDEになっとる。というか通常のWeb制作とそっちとどっちも入ってるって感じ。知らんかった。

リンク

jQuery UI Bootstrap

A preview of the jQuery UI Bootstrap themejQuery UI Bootstrap A Bootstrap-themed kickstart for jQuery UI widgets (v0.1) Welcome! This is a live preview of new the jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter's Bootstrap to jQuery UI widgets. With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter

stealthinu 2012/01/11

jquery uiとbootstrapの合体版

リンク

綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」:phpspot開発日誌

綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 2012年01月10日- jQuery UI Bootstrap 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 Twitter Bootstrapでデザインがあまり出来ずともTwitter風の綺麗なUIが作れる事で話題を集めましたが、jQuery UIにTwitter BootstrapのCSSでをあてはめた物が出たようです。 Twitter Bootstrapのメリットを享受しつつjQuery UIも使えてしまいます。サンプルでは１ページにjQuery UIのウィジェットが配置されているのですが、１ページにあることで、削ったり切り貼りすることでデザ

stealthinu 2012/01/11

jquery uiとbootstrapの合体。bootstrapは使いよかったのでこれも試してみる。

リンク

jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】 | HTML5でサイトをつくろう

jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】スマートフォン向けフレームワーク注目の「jQuery Mobile」の第2弾の記事です。前回はjavascriptを一行も書かずにjQuery Mobileでページを作成してみましたが、今回はスマホサイトで、google Mapsやお問い合わせフォームの設置など、より実践的に使える内容を作っていきたいと思います。前回の記事はこちらになりますので見ていない人はこちらから見るとより今回の記事がわかりやすいくなります。スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】さて前回もあげましたが、jQuery Mobileのメリットと言えば！マルチデバイスに対応できるクロスブラウ

stealthinu 2012/01/06

写経して試してみてるけどこれはいいわ。これはカンタン！勉強かねてpukiwikiのスマートフォン用スキンとか作ってみたくなる感じ。

リンク

［速報］jQuery Mobile 1.0正式版が公開！モバイルアプリケーション開発の新時代へ

モバイルアプリケーション開発のためのJavaScriptによるフレームワーク﹁jQuery Mobile 1.0﹂のFinal Releaseが、今週前半に予告された通り、ついに公開されました︵日本時間18日午前3時頃︶。 jQuery Mobileはオープンソースとして開発されており、﹁Download﹂ページからだれでも無料でダウンロード可能です。jQueryのWebサイトやマイクロソフトのCDN︵コンテンツデリバリネットワーク︶などでの配布もはじまっています。 HTML5のタグだけでモバイルアプリケーションが作れる jQuery Mobileの大きな特徴は次の3つです。1︶HTMLのタグだけで、プログラミングせずにモバイルアプリケーションができてしまう2︶モバイルのユーザーインターフェイス対応の部品が多く揃っている3︶iOS、Android、WebOS、WindowsMobl

stealthinu 2011/11/18

ｊQuery Mobileもう1.0か。結構出来よさそう。モバイル用のサイトには使ってみよう。

リンク

ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ

ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！画面いっぱいに背景画像目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max

stealthinu 2011/08/31

画面サイズいっぱいに表示するためのCSSやプラグイン比較。maxImage Scalingがお勧めとのこと。

リンク

[JS]超軽量、設置も簡単、オプションも豊富なスライドショーのスクリプト -Orbit

実装も簡単で、オプションも豊富に揃った、使い勝手のよい画像スライドショー用のjQueryのプラグインを紹介します。約4KBと超軽量なのもいいですね。右上のオートプレイは状況も表示します。 Orbitの実装外部ファイル﹁jquery.js﹂と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script> スタイルシートも外部ファイルとして指定します。 <link rel="stylesheet" href="css/orbit.css"> HTML 画像のみを配置したシンプルなスライドのHTMLです。 <div id="featured"

stealthinu 2011/08/11

良さそうな感じなんだけどデモページが動かない。Firefox5。なぜだろう？

リンク

これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌

これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ﹁jQuery EasyUI﹂ 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ﹁jQuery EasyUI﹂ Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。テーマやマルチリンガルにも対応しているらし

stealthinu 2011/07/20

jqueryベースでwindows的なインターフェイスを構築できるライブラリ。なかなか良さそう。

リンク

jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス

利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。

stealthinu 2011/06/22

jqueryつかったナビゲーションメニューのサンプル。

リンク

jRumble | A jQuery Plugin That Rumbles Elements

Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being

stealthinu 2011/04/06

適当な要素をなんでも「震わせる」ことが出来るjQueryプラグイン。おもろいｗ

リンク

フォームのバリデーション用jQueryプラグインいろいろ+α

個人的なメモ。普段さほど使うことが無いので、必要な時に探すのに時間掛からないようにまとめておきます。沢山ある必要はさほど無いのですが、勉強用も兼ねていろいろと数を揃えておきました。お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js Validationの日本語Ver.です。シンプルなので使い勝手いいですね。日付の確認用プラグインも派生していますので合わせて。

stealthinu 2011/03/09

jQuery使ったフォームバリデーションのプラグインについてまとめ

リンク

jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。１）3D表示プラグインサンプルデモ今年のトレンドと言えば3D。というわけでこちら。まずはサンプルデモを確認。触ってわかる通りですが、2枚の画像が3D表示されます。呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;