jQueryでツイート数、はてブ数、いいね数を取得して自由にデザインする方法 | アンギス
注意※Twitterのツイート数の取得のコードについて この記事のコードでは後日、ツイート数の取得ができなくなるとご指摘いただきました。確認したところ2013年5月7日に行われるTwitterの仕様変更によりツイート数の取得ができなくなってしまいます。（それについての記事）その他はてブ、いいね数のコードにつきましては正常に動作します。問題のコードはサンプルとして残しておきますが、ご利用の際はくれぐれもご注意ください。今回の件についてご指摘くださった方々に御礼申しあげます。そして、すべてのユーザーの方々に不確かな情報を提供してしまったことをお詫び申しあげます。 さらに追記※Twitter APIの仕様変更について Twitter APIの仕様変更後もこのコードで動作し続けています。もともとAPIのリファレンスにも載っていませんしいつ仕様が変更されるかわかりません。ご利用の際はくれぐれも気をつ
なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
サービス終了のお知らせ
2024年9月30日をもちまして「秒刊SUNDAY」はサービスを終了いたしました。 長い間、ご愛顧いただき誠にありがとうございました。
[JS]画像をホバー時にさまざまなアニメーションで目立たせるスクリプト -Adipoli
シンプルなものからちょっと面白いものまで、20種類以上のアニメーションのエフェクトを備えた画像を目立たせるjQueryのプラグインを紹介します。 デモ 用意されているエフェクトは20種類以上で、ホバー時のエフェクトは下記のものが揃っています。 normal popout sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpRandom sliceUpDown sliceUpDownLeft fold foldLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse 画像のデフォルト時のエフェクト（オーバーレイ・半透明）も用意されており、組み合わせて利用できます。 [ad#ad-2] 以下、デモページのエフェクトを紹介します。
サイトにTwitterの機能を組み込むためのjQueryプラグイン集:phpspot開発日誌
Best jQuery plugins for Twitter integration | AjaxLine サイトにTwitterの機能を組み込むためのjQueryプラグイン集。 Twitterの勢いがまだまだ衰えませんが、それにともなってサイトにTwitterの機能を実装したいというニーズも高まってきているのではないでしょうか？ そんな際に便利に使えるプラグイン集です。 Twitterのサイトが落ちた時にサイトが重くなってしまうという点に注意して使いたいですね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 ajaxファイルアップロードに使えるjQueryプラグインいろいろ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」
jQueryでやる！ブログで使えそうな楽しいナビメニュー45
色々とjQueryのサンプルやプラグインが掲載されていて、眺めてるだけで楽しくなるエントリー。 ナビゲーションメニューで悩んだ時に使えそうです。 45 jQuery Navigation Plugins and Tutorials - Noupe さて、いまや多くの人たちから支持を得ているjQueryで、もっと楽しいブログにしてみるのもいいかもしれない。 jQueryは何もWEBサイトだけのものではありません。条件さえクリアすればブログだって使えるのです。 あなたのブログがほんの少しのjQueryで生まれ変わるかもしれない。 わかる方はさくっと上のリンクを叩いて色々試して見てください。 jQueryってそもそも何、って言う人が居ましたら以下を。 jQueryって、美味しいの？ 結構美味しいです。 多くの方に支持されるにはやはりそれなりの理由があります。 超、簡単に説明すると あなたが書いた
Retweetボタンを簡単に設置できる「Easy Retweet Button」のカスタマイズ方法
Twitterをはじめたかなり前に比べると、ものすごくTwitterがにぎわっていると思うこのごろですが、いまさらながら「Retweet」のボタンを設置しようと思い、とりあえず簡単にですが設置してみた。 今回の設置では、「Easy Retweet Button」というJavaScriptを使って本当に楽に実装。 これを使うと、Retweetが簡単にできる且つ、その時に投稿したRTのリンクが何回クリックされたのかというのがわかるようになります。 ただ、使用する際にカスタマイズが必要でしたので、その点についてをメモしておきます。 Easy Retweet Buttonの使い方 まずは、サイトに行き、必要なJSファイルをダウンロード。下記リンクを保存して使うこと。 http://ejohn.org/files/retweet.js ちゃんとダウンロードしましょう。（上記リンクを右クリックで「名前
[JS]フレキシブルな実装に対応した、画像にキャプションを表示するスクリプト -jCaption
先日紹介した「オルトを利用して、画像にキャプションをかっこよく表示するスクリプト -Captify」と同等の機能をフレキシブルな実装に対応させたスクリプト「jCaption」を紹介します。 下記は、画像の下に配置したテキストを画像の上にキャプションとしてアニメーションでスライド表示させたものです。 jCaption: jQuery Image Captions with Customizable Markup, Style and Animation demo jCaptionのデフォルトの設定では、img要素のaltのテキストを利用して表示されるようになっています。 設定を変更することで、img要素の別の属性（titleなど）や画像とは関係無い別の要素（pなど）からのテキスト取得や、適用する要素やclass, idの指定ができます。 demoページではaltのみのデモですが、img要素の
[JS]多彩なカスタマイズが可能なLightbox風スクリプト -ColorBox
インターフェイスのデザイン、クローズやアローなどコントローラーのカスタマイズが可能な画像を拡大表示するLightbox風のスクリプト「ColorBox」を紹介します。 ColorBox 拡大表示できるのは画像のほかにも、インラインコンテンツ、外部コンテンツに対応しており、AJAX表示、画像ギャラリーにも対応しています。 デモでは、4パターンのカスタマイズが紹介されています。
[JS]カラフルな折れ線・棒グラフやパイチャートを描くスクリプト -JS charts
画像を使用しないで、折れ線グラフや棒グラフ、パイチャートを作成するスクリプト「JS charts」を紹介します。 JS charts demo JS chartsはjQueryなど他のスクリプトに依存せずに動作し、対応ブラウザは下記のようになっています。 Windows IE 6/7 Fx1.5+ Op 9+ Safari 3.1+ Mac Fx 1.5+ Safari 2+ iPhone 1+ 折れ線グラフや棒グラフ、パイチャートを描くには、スクリプトを外部ファイルとして記述し、書式に合わせて記述します。 JS Charts | How to use グラフはCanvasで描かれており、数値はXMLによって管理します。 XMLのサンプル <textarea name="code" class="html" cols="60" rows="5"> <?xml version="1.0"?>
2008年に注目を集めた使えるJavaScriptライブラリ集:phpspot開発日誌
Best of 2008 - JavaScript | Design Shack 2008年に注目を集めた使えるJavaScriptライブラリ集が紹介されていました。 どれも非常に便利でサイト構築に役立ってくれるでしょう。 sIFR Lite Javascriptでテキスト文字列を綺麗な画像にしてくれるライブラリ。 画像部分にはFlashを採用している。検索クローラーフレンドリ。 <h3>How is this different than the original sIFR?</h3> ↓ DD_belatedPNG IE6でも透過PNGに簡単に対応させられるライブラリ The EqualHeights jQuery Plugin 異なる高さのブロックを統一してくれるライブラリ ↓ DD_roundies 角丸の簡単実現ライブラリ jQuery.popeye ポップアップではなく、サイト
[ JavaScript ] jQuery サンプル集
このページの目次 – [連続アニメーションサンプル](#animate) – [アコーディオンパネルのサンプル](#accordion) – [テーブルの偶数行に CSS を適用し、ストライプ ( しましま ) にするサンプル](#addClass) 連続アニメーションサンプル {#animate} ———————————————————————- jQuery のみで動く連続アニメーションのサンプル。 上から落ちてくるバージョンを IE8 で見ると、エッジに黒い縁が出るのはなんで？ ( 最終更新日 : 2010/12/06 ) – [上からフェードインしながら落下バージョン](https://bowz.info/wp-content/uploads/2008/10/jquery-samples/animate/a.html) – [右から出現バージョン](https://bowz.inf
![[ JavaScript ] jQuery サンプル集](https://cdn-ak-scissors.b.st-hatena.com/image/square/19691f3db719fc116cbcdd5e767c89ee15487f3e/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2018%2F09%2Fudon-1.jpg)
jQueryで作る“Amazon風”インターフェイス (1/5)
「最近、どこでよく買い物していますか？」――こう聞かれて「Amazon！」と答える方も少なくないかもしれません（特に本誌読者であれば）。当初は書店の店頭で入手が難しい書籍の購入などに重宝していたAmazonですが、取扱商品が増えた今では、ペットボトルの水からパソコンまで何でも買える便利なECサイトとして、ネット利用者の生活に定着しました。 もっとも、Webサイトを作る立場から見ると、Amazonの魅力は品揃えやサービスだけではありません。Webサイトのデザイン面からAmazonを見ても優れた点は多数あり、実際、国内外の非常に多くのECサイトがAmazonをお手本にしたUIを採用しています。今回は、「Amazon.co.jp」を参考にさせてもらいましょう。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。現
最近よく使っているコードセットのようなもの 第9回 パーソナルブログの作り方-Re:Creator’s Kansai （リクリ）
【2024年12月】レンタルサーバーおすすめ10社を徹底比較！ 人気ランキングも PR 最終更新日：2024年12月26日
簡単にテーブルをカッコよくするjQueryプラグイン「Flexigrid」を使ってみた
こんばんは。松田です。 ほんのちょっと手を入れるだけで、ただのテーブルレイアウトがかっこよくなってしまうjQueryプラグイン「Flexigrid」を使ってみました。 「Flexigrid」を使うと、カラムの表示/非表示機能、色分け、配置換え、リサイズなどいろんな機能を自動的に付けてくれます。 まずは普通にテーブルを作ってみます。 ソース とてもシンプルでかっこわるいですね！ これをFlexigridを使ってかっこよくしてみます。 やることは３つ。 ・headタグ内でスクリプトとCSSの読み込み ・テーブルにID（ここでは'flexigrid_table'）を指定 ・スクリプト $('#flexigrid_table').flexigrid(); の呼び出し これだけです。 そして、Flexigrid化したテーブルが下のものになります。 ソース すごくオサレになりましたね！ ※IE7ではt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
[JS]画像をスライドするシンプルなカルーセルスクリプト -jCarousel Lite
http://www.designwalker.com/2009/01/table.html
Site Under Maintenance
jQueryサンプル集 | DesignWalker
