第19回 jQueryでAJAX入門：JSONを使いサイトにTwitterを表示 | gihyo.jp
jQueryでAJAX入門2回目：JSON形式を扱う 前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく、JSON（ジェイソン）と呼ばれる形式を扱い、同じようにリストを表示させてみることにします。今回ご紹介するJSON形式も、前回紹介のXML形式同様jQueryで取得・表示をさせることができます JSON？ JSONはJavaScript Object Notationの略で、JavaScriptで簡単に扱えるテキストベースのデータフォーマットです。たとえば下記のような構造になっています。 JSONサンプル [ { "name": "技評太郎", "age" : 26, "skills":["PHP" , "JavaScript"] }, { "name": "長谷川広武", "age":25, "skills":["HTML" , "CSS"] },
第20回 jQueryでAJAX入門：正規表現でサイトに表示したTwitterにリンクをつける | gihyo.jp
Twitterにリンクをつける 前回は.getJSON()メソッドを使い、Twitter上での発言をサイトに表示できるようにしてみました。しかし、時にはTwitterの発言文中にはURLやhashタグや@ユーザー名などが含まれていることがありますが、前回のままではそのままテキストとして表示されるだけになってしまいます。 以前、フォームの内容を紹介した時に正規表現の紹介をしましたが、今回はその正規表現を利用して、Twitterの発言文中に含まれるURL・hashタグ・@ユーザー名をリンクをつけるサンプルをご紹介します。 URLにリンクをつける まずは文中に含まれるURLにリンクをつけてみましょう。文中からURL部分だけを見つけるために、正規表現を利用します。 URL用の正規表現 /(http:\/\/[\x21-\x7e]+)/gi 「[\x21-\x7e]」の部分は16進数で表現したASC
jQueryでツイート数、はてブ数、いいね数を取得して自由にデザインする方法 | アンギス
注意※Twitterのツイート数の取得のコードについて この記事のコードでは後日、ツイート数の取得ができなくなるとご指摘いただきました。確認したところ2013年5月7日に行われるTwitterの仕様変更によりツイート数の取得ができなくなってしまいます。（それについての記事）その他はてブ、いいね数のコードにつきましては正常に動作します。問題のコードはサンプルとして残しておきますが、ご利用の際はくれぐれもご注意ください。今回の件についてご指摘くださった方々に御礼申しあげます。そして、すべてのユーザーの方々に不確かな情報を提供してしまったことをお詫び申しあげます。 さらに追記※Twitter APIの仕様変更について Twitter APIの仕様変更後もこのコードで動作し続けています。もともとAPIのリファレンスにも載っていませんしいつ仕様が変更されるかわかりません。ご利用の際はくれぐれも気をつ
BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」:phpspot開発日誌
BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 2013年04月05日- Bootstrap Form Helpers BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」。 国、通貨、日付、時間、電話番号、フォント等を入力する際に便利そうなインプットのヘルパーライブラリのご紹介。 次のように、多数のフォーム入力ウィジェットが追加で利用できます。 フォントは見たままで表示されて、selectから選べるので便利そう。 UIデザインもいい感じ。 関連エントリ Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapのテーマで良い感じに動くオート
Twitterが自社製JavaScriptフレームワーク「Flight」をオープンソースで公開
Twitterは自社サービスで利用しているJavaScriptフレームワーク「Flight」をオープンソースで公開しました。 Flightはコンポーネントベースの軽量フレームワーク。開発者に対して非同期で独立性の高いコンポーネントを定義する機能を提供することで、デバッグ、テスト、イベントハンドリングなどを容易にするフレームワークのようです。 Githubのページでは以下のように説明されています。 Components cannot be directly referenced, instead they communicate by triggering and subscribing to events. Consequently every component, and every component API, is entirely decoupled from every othe
Flight by Twitter
A lightweight, component-based JavaScript framework for assigning behavior to DOM nodes.Flight A lightweight, component-based JavaScript framework from Twitter View on GitHub Overview Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications. By way of example, we've including a simple email client demo (browse the sou
[JS]ソーシャルメディアの不揃いなボタンを統一した美しいデザインでブログに設置するスクリプト -Koottam
Twitter, Facebook, Google+, RSSなど、ソーシャルメディアの不揃いなデザインのボタンを統一した美しいデザインにしてブログやサイトに設置するjQueryのプラグインを紹介します。 Koottam Social jQuery Plugin [ad#ad-2] Koottamの主な特徴 Koottamのデモ Koottamの使い方 Koottamの主な特徴 Twitter, Facebook, Google+などのアカウントを設定するだけで設置できます。 7種類のテーマがあり、CSSベースでカスタマイズも可。 カウントの表示はスタティック・アニメーションに対応。 カラーは簡単に変更できます。 より大きいカウント用に省略表記も対応。 MITライセンスのため、あらゆるブログ・サイトに使用しても無料！ Koottamのデモ
[JS]超軽量で設置も簡単！Facebook, Twitter, Google+のボタンを設置するスクリプト -SocialCount
デモページ：カウント付きで縦並び SocialCountの使い方 使い方のステップは、2つ。 これ以上ないくらいに簡単です。 Step 1: 外部ファイル スタイルシートとスクリプトを外部ファイルとして設置します。 まずは、スタイルシートをhead内に。 <head> <link rel="stylesheet" href="../src/socialcount.css"> </head> アイコンを使用する場合は、もう一つ外部ファイル（socialcount-icons.css）を加えます。 続いて、スクリプトをページの下の</body>の上に。 ... <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="../src/socialcount.js"></script> </bod
Twitter Bootstrapから派生したWeb制作向けフレームワーク・Plusstrap
派生と言っていいかどうか分かり ませんけど、Plusstrapは、より 迅速にWeb開発を可能にしたフレー ムワークとのことです。アプデ したBootstrapをちゃんと把握 していないので詳細は触れない でおきます。 Twitter Bootstrapを元に、より迅速にWeb開発が可能になる、というフレームワークだそうです。派生の定義が良く分かってないので違っていたらごめんなさい。 正直な話、時間作れてなくてソース殆ど見てません。ナード向けだそうです。自分は一般人なのでギークとの違いが良く分からないですが凄い人向けって事なんじゃないでしょうか。 各種コンポーネントも揃ってます。 カスタマイズも可能。不要なものをチェックから外せば軽く出来ます。 今の仕事が落ち着いたら触りたい。 Plusstrap
ウェブページ上にツイートを表示するシンプルで軽量なJavaScript『Chirp.js』
ウェブページ上にツイートを表示するシンプルで軽量なJavaScript『Chirp.js』 Chirp.jsはウェブページ上にTwitterのタイムラインを表示するためのJavaScript。 jQueryなどのライブラリに依存しない単体の超軽量スクリプトで、カスタマイズ性が高く設置も超簡単という、この手のスクリプトとしては非常に優秀なシロモノです。 先ずはスクリプトをダウンロードしましょう。自分で自由に値段を付けて『Buy it!』をクリック。もちろん『0』を入力すればフリーでダウンロードできます。 ダウンロードしてスクリプトを解凍したら、適宜サーバーにアップロードしたら下準備は終わりです。 最も簡単な使い方としては、スクリプトのパスとTwitter名を指定した上でタイムラインを載せたいページの適当な部分（<body>内）に以下の2行を挿入するだけです。 （1行目のスクリプトタグは<he
twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。 - ppworks.jp
twitter bootstrapを更に便利に使うgemがtwitter bootstrap railsです。 railsアプリを作りましょう。 rvmでgem set作ります。 rvm --create 1.9.3-p125@tbrsample railsアプリ生成します。 gem install rails --no-ri --no-rdoc rails new tbrsample gemを指定しましょう。 Gemfileのgroup :assetsに追加します。 cd tbrsample vim Gemfile gem "twitter-bootstrap-rails" どん bundle install --without=production bootstrapをgenerateしましょう。 必要なjsやcssをapp/assets配下に配置します。 rails g bootst
Twitter BootstrapをjQuery Mobileで使ったデザインテーマ集・jQuery-Mobile-Bootstrap-Theme
なかなか良かったので備忘録です。 Twitter Bootstrapのデザインを、 jQuery Mobileのテーマに起用した サンプルソースが公開されていま した。フレームワーク的にも使える かもしれない。 Twitter Bootstrap × jQuery Mobileです。既出ですけど良かったので。 JQMのデザイン変更用リソースです。ThemeRollerでもいいんですけどどうも微妙というか、肌に合わないのです。最初から作った方が早い気がしましたが、こうして変更されたものがあるならこれを元に変えると効率的になりそうです。同じ手法でbootswatchで配布されてるBootstrapテーマを起用しても良さそうですね。 Sample サンプルのQRコードです。↓ 何故かフォームのデザイン変更できなかったけど・・・まぁ自分で作ればいいかなｗ ご利用は以下よりどうぞ。 jQuery-M
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Twitter BootstrapをベースとしたフラットなデザインのUIキット・Flat UI
Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ