Twitter BootStrap に追加できる５つのコンポーネントパック「FuelUX」:phpspot開発日誌
Fuel UX Twitter BootStrap に追加できる５つのコンポーネントパック「FuelUX」 コンボボックス、データグリッド、ピルボックス、検索、スピナー等のコンポーネントがセットになって配布されています。 どのコンポーネントも元がいいだけにかなりクールなデザインになっています。 ますますサイト作りがリッチに、そして楽しくなりそうです 関連エントリ Twitter Bootstrapでカッコいいカルーセルを実装するサンプルとチュートリアル Twitter Bootstrapじゃなくfacebook Bootstrap？「Fbootstrapp」 Twitter Bootstrap で使えるカラーピッカー＆日付ピッカー TwitterBootstrapベースのテーマやテンプレートが入手できる「WrapBootstrap」 綺麗なUIのサイトがサクサク組めるTwitter Boo
PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」:phpspot開発日誌
phpmaster | Server-Side HTML Handling Using phpQuery PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」。 紹介記事を読んで使ってみました。 phpQuery はjQueryのPHP版でDOMの操作をjQueryっぽくできるライブラリです。 HTMLのスクレイピングはもちろん、HTMLを追加したり要素に属性を追加等のDOMを操作も簡単に行えます。 jQueryの便利さがPHP上でも十分に使えますので知っておくと確実に面倒な処理を楽に書けるようになるでしょう。 スクレイピング HTMLのスクレイピングをする場合には超簡単かつ、jQueryを使ったことがある方なら抵抗なくすぐに習得できます。 ちょっとコードを書いて実験してみました。 と書くと <div id="two"></div>の中身である t
PinterestのPinIt機能実装jQueryプラグイン:phpspot開発日誌
Create jQuery Pinterest Pin It Plugin | Queness PinterestのPinIt機能実装jQueryプラグインが公開されています。 画像にマウスオーバーした際に「Pin it」ボタンを表示するというシンプルなものです。 $('img').pinit() で使えるのでPinterestに画像を投稿してもらいたい場合は入れてみるとよさそうですね まだ日本ではあまり流行っていない気がしますが、Twitterのように来る時に一気にくるのかもしれませんね。 関連エントリ FacebookやTwitterの内容をまとめてPinterest風に表示できるPHPアプリ「Infinite-social-wall」 Pinterest風のWordPressテーマ集 Twitter,Facebook,YouTube,PinterestのRSSフィードURLまとめ サ
Facebookアプリみたいな最近流行りのUIでWEBアプリ実装が出来るフレームワーク「Sidetap」:phpspot開発日誌
Facebookアプリみたいな最近流行りのUIでWEBアプリ実装が出来るフレームワーク「Sidetap」 2012年07月09日- This is Sidetap - a mobile framework. Facebookアプリみたいな最近流行りのUIでWEBアプリ実装が出来るフレームワーク「Sidetap」。 次のような、FacebookとかPathとか最近色々なアプリで見かけるあのUIをHTMLで実現してしまうフレームワークです。 横スライドだけじゃなくて、右上のボタンを押せばウィンドウがアニメーションしながらスライドさせるような感じにもできるみたい クリックでページが横にスライドする。 HTML5ベースのアプリでPhoneGapなんかと組み合わせて使うとよいかも。 アプリじゃなくても、ブラウザで開いた時にこういうUIでもよさそうですね 関連エントリ jQueryMobileよりも軽
デザインが超クールで多機能なモバイルアプリ用リアルタイムアクセス解析OSS「Countly」:phpspot開発日誌
Countly | Mobile Application Analytics デザインが超クールで多機能なモバイルアプリ用リアルタイムアクセス解析OSS「Countly」。 セッション、ユーザ数、新訪問のユーザ、滞在時間といったデータを折れ線グラフで描画できる他、モバイルに特化してAndroidとiOSの比率、解像度の比率、キャリア比率なんかもダッシュボードに出せて分かりやすいインタフェースが特徴。 アプリのアクセス解析用ということでアプリを管理画面から追加出来ます。 当然、アプリごとにアクセス状況を表示できるようになっています。 どこの国でよく使われているかも解析できます OSの比率。グラフにカーソルを合わせるとそれぞれの比率が分かるシンプルで分かりやすいUI。 プラットフォーム、解像度、キャリアの比率が一目でわかります それにしてもなんという素晴らしいUIでしょうか。 関連エントリ 画
Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」:phpspot開発日誌
Open-sourcing Stylo by Alex MacCaw Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」。 CoffeeScript, Spine, Sprockets といったテクノロジーを使っているらしいです。 なんかwebkit限定だったりしますが、インタフェースが良い感じに出来ていて、同じようなツールを作るのに参考にすることもできそう。 ツール自体は非常にシンプルで図形を配置して図形をカスタマイズしたり文字を配置したりといったものですが、容易に習得でき快適に動くため素早くモックをブラウザ上で作りたい際に使えそう 単に置くだけじゃなくて、オブジェクトを綺麗に並べるような機能もついており、シンプルだけど、こういう地味に大切なところはちゃんとしています。 Twitterエンジニアが作ったということで、なんとなくインタフェースの印象がBootstr
PHPフレームワークにTwitter,Facebook等の認証を速攻実装できる「Opauth」:phpspot開発日誌
PHPフレームワークにTwitter,Facebook等の認証を速攻実装できる「Opauth」 2012年05月24日- Opauth ? Multi-provider authentication framework for PHP PHPフレームワークにTwitter,Facebook等の認証を速攻実装できる「Opauth」。 Zend、CakePHP、Symfony、CodeIgniter等のフレームワークに認証を入れる場合に是非参考にしたいライブラリ。 Facebook, Google, twitter, Linked.in の他、OAuth、OpenID などにも対応。Yahoo!JapanでOAuth等による認証ができますから、これで認証にまつわる処理はすべて実装できそう。 各サイトにおける認証の方法を都度実装するのは非効率ということで、こうしたライブラリで認証処理はサクっと終
リアルタイムなデータビジュアライズ「graphene」:phpspot開発日誌
graphene D3.jsというJavaScript製ビジュアライズライブラリと、JavaScriptのMVCライブラリであるBackbone.jsをベースとして作られていてgithubでソースが公開されています。 Chromeなどのブラウザで見てみるとリアルタイムにグラフが流れているのが分かります。 デモを見るだけでも楽しいんですが、サイトの管理ツール等色々と応用が効きそうだなというところですね 今後もこうしてWEBサイトはどんどんリアルタイムに動いていく物になっていくんでしょうね 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」:phpspot開発日誌
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 2012年05月01日- Chrome ウェブストア - Dev HTTP Client WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 サーバに対して、POSTやGET等のメソッドで、独自のクッキーやヘッダーなどを加えて手動で送信できるChromeのアプリです。 POSTで送信する場合ってフォームを用意しないといけないのが面倒ですが、それも手動で指定できるため、非常に便利。 その場で返却値がカラーリングされつつ整形されて見れるので、JSON等の値を見る場合には超便利です JSON返却値の例。カラーリングと整形がありがたい なくてもそこまで困らないかもしれませんが、エントリポイントをちゃんとチェックしたいっていう
フリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」:phpspot開発日誌
PhotoShow フリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」 オープンソースソフトウェアです。UIが次のように新しめの物になっています。 アルバムページ ギャラリーページ。 画像のMETA情報なんかもでます 管理画面もなかなかナウなインタフェース。ドラッグ＆ドロップによるアップロードができるようです カッコいい管理画面のギャラリーを作りたい場合の１つの選択肢としていかがでしょうか 関連エントリ 洗練されたUIのギャラリーサイト「Ui Parade」 これは新しい、回転する円形のイメージギャラリー実装サンプル PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」
スマホサイト作成のフレームワーク「iUI」が新しくなっている件:phpspot開発日誌
iUI - Mobile web framework for high-end devices スマホサイト作成のフレームワーク「iUI」が新しくなっている件。 jQueryMobileも便利なのですが、iUIはiPhone発売当初からあるフレームワークで、ルールにそってHTMLを記述するだけでiPhoneアプリのようなページを作れるのが魅力のフレームワークです。 公開当初はgoogle codeとかにホスティングされているだけでしたが専用のカッコいいページもできてる模様。 iPhone, iPad, Android にも対応していて、便利に使えるようになっているようです テーマデザインも色々選べるようになりました。 ビデオプレゼンテーションや、デモを落として試してみましょう 関連エントリ コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」
HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」:phpspot開発日誌
Slider.js: Slideshow with jQuery, CSS Transitions and Canvas - example with Flickr HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」 スライドショーライブラリは色々ありますが、Slider.jsはCSS3やCanvasをフルに活用したライブラリとなります CSS3を使った画像切替の効果が豊富に用意されているのが特徴です。 ページ番号、送る、戻るといったナビゲーションの表示方法も色々と変えられるようです APIのところを見ればわかりますが使い方が超簡単でコードもシンプルにかけます。 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 CSS3を使った超カッコい
画像の縮小やトリミングに便利なPHPクラスライブラリ「Zebra_Image」:phpspot開発日誌
Zebra_Image, a lightweight image manipulation library written in PHP 画像の縮小やトリミングに便利なPHPクラスライブラリ「Zebra_Image」 転送量や速度の観点からPHPの画像を縮小したり、またはサイズをそろえてきれいに並べるなど扱いやすくする際にもリサイズを行いますがそういった処理を簡単に行えるようになるクラスライブラリのご紹介です。 元の画像 背景を指定しておき、２００ｘ２００ピクセルなど指定したサイズにまるめるメソッド。 元画像は一切、切り取られることなく縮小され、指定の画像サイズにできます 指定幅サイズに単に縮小 ２００ｘ２００ピクセルなどを指定した場合、指定ピクセルいっぱいに広がるようにサイズ調整して切り抜く方法 GDで１から書くと結構めんどくさかったりするのでこうしたもので簡単にやっちゃいましょう 関連
シンプルでインタラクティブな地図を実装できるjQueryプラグイン「jVectorMap」:phpspot開発日誌
jVectorMap シンプルでインタラクティブな地図を実装できるjQueryプラグイン「jVectorMap」。 シンプルデザインながら拡大してもクオリティが保たれていて高速レスポンスの地図が実装できます。国ごとのカラーリング等も可能なので、アクセス解析とかそういった部分で使えるのかも。 地図クリックで各種コールバック関数が使えるため、フォーム内で国の選択といった入力補助プラグインとしても機能しそうです。 今後の国際化の流れにおいて便利に活用できる局面があるかもしれません。 マウスオーバーで変色。インタラクティブに動作。クリックしたコールバック設定もOK 国ごとのカラーリングを示した例です。 アメリカだけを対象に描画も可能 ヨーロッパだけもOK 拡大しても新たにデータを読み込むわけでもなく高速なレスポンスが期待できます。 作った方お疲れ様でした＆すごい！ 関連エントリ ドラッグできる地図
スマホ等のモバイル判定が簡単に行えるライブラリ「MobileESP」:phpspot開発日誌
The MobileESP Project: Easily detect mobile web site visitors About MobileESP スマホ等のモバイル判定が簡単に行えるライブラリ「MobileESP」 Android、iPhone、Blackberry等、大量のモバイルデバイスが存在しますが、そうした物の判定を行ってくれる各種言語用のライブラリ群です。 docomo, kddi, vodafoneなんていう記述もあったりしてガラケーも対応してるっぽいです。 対応言語は、PHP, Java, APS.NET (C#), Ruby ,さらにはJavaScript版もあるようです iPhone端末かどうかを調べるには次のようなコードを書きます。 $uagent_obj = new uagent_info(); if ($uagent_obj->isTierIphone =
リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」:phpspot開発日誌
jQuery ComboGrid Plugin リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」。 input type="text" に文字を入れて、候補が表示されたりするオートコンプリートがありますが、そのオートコンプリートをグリッドにしてリッチにし、よりヒントを多くすることでユーザビリティを上げるような使い方が可能。 表データがあって、その中から選んでもらいたいようなケースに使えそうですね。 中身のデータは当然ですがAjaxで読み込んで表示しています。 基本的には $(element).combogrid(options); というので利用が可能です。 サンプルコードは以下。 関連エントリ クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」
APIを使わずにYoutube動画のサムネイルを得る方法:phpspot開発日誌
APIを使わずにYoutube動画のサムネイルを得る方法があるみたいです。 画像が以下のようにvideoidをベースに生成されるので、URLを作って<img src>に設定するだけです。 videoidは、http://www.youtube.com/watch?v=XXXXXX の部分のことです。 http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.j
ブロック内をiPhone画面内みたいにスクロールできるjQueryプラグイン「Red Plugin」:phpspot開発日誌
ブロック内をiPhone画面内みたいにスクロールできるjQueryプラグイン「Red Plugin」 2011年09月02日- Red Plugin ブロック内をiPhone画面内みたいにスクロールできるjQueryプラグイン「Red Plugin」 ブロック要素にスクロール機能とスクロールバーをいれてiPhoneの画面内みたいにできます。 スクロールバーがあって現在位置が分かるため、使いやすいそうです。 $("#applemenu").redmenuslider(); みたいにすれば簡単に<div>のリストを上記のようなスクロール付きのウィジェットにできます。 幅・高さやマウスホイールのスピードをオプションで渡せます。 関連エントリ パスワード用フィールドを便利にするjQueryプラグイン「showPasswordField」 ページの要素を3D化できる面白jQueryプラグイン「3Di
GoogleMapのAPIと併せて使える７００種のアイコンセット「Map Icons Collection」:phpspot開発日誌
GoogleMapのAPIと併せて使える７００種のアイコンセット「Map Icons Collection」 2011年09月01日- Map Icons Collection | Google Maps Icons, Map Markers, Free POI Icons, GIS Symbols GoogleMapのAPIと併せて使える７００種のアイコンセット「Map Icons Collection」 次のようないい感じのポインターアイコンが７００種つまったアイコンセットが公開されています。 GoogleMapとアイコンを組み合わせて便利な機能をサイトに組み込むのに役立ちそうです。 Google Mapは今後もサイト作りにおいて使うケースが色々とありそうなので覚えておくと便利ですね 関連エントリ Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
超カッコいいスライドショーを実装できる「iView v2.0」:phpspot開発日誌