もう面倒なユーザ認証機能は１から作らなくてよいかも？PHPのOSS「AuthManager」:phpspot開発日誌
もう面倒なユーザ認証機能は１から作らなくてよいかも？PHPのOSS「AuthManager」 2012年08月13日- AuthManager - StitchApps もう面倒なユーザ認証機能は１から作らなくてよいかも？PHPのOSS「AuthManager」。 ユーザ認証型のサイトを１から作るとなると面倒な上に、もう誰かが良い物を作ってるんじゃないかという事を誰もが作り直してる気がします。 こういうもの自体をオープンソースにしちゃって誰もが使えるっていうのは素晴らしいですね。 Facebookによる認証やreCAPTCHAによるスパム防止、メールアドレスの認証機能といった標準で必要な機能が入っており、便利に使えそう。 で、ユーザ登録できるのはいいんだけど、肝心の制限はどうやってかけるの？というところは、次のように簡単にやってね、ということらしくお手軽。 ($sesslife自体がどこか
美麗なグラフをSVGで描画できるJSライブラリ「dc.js」:phpspot開発日誌
dc.js - Dimensional Charting Javascript Library 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 次のような円グラフや棒グラフをオブジェクト指向の分かりやすいコードで描画出来ます。 円グラフのコード例。メソッドをチェーンさせて直感的にグラフを描画可能。 SVG対応していないブラウザでは描画できませんが、軽くてよさそうですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」
超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」:phpspot開発日誌
Percentage Loader 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 次のようなカッコいいローディングが簡単に実装できます。Canvas描画なのでサイズ変更等も自由にできるみたい 超シンプルに実装可能です なんとなくローディング後の画面を期待させる物となっていますので、ローディング後も気合を入れたいところですね 関連エントリ HTML5でプログレスバー付きファイルアップロードを実現する例 プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」
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等による認証ができますから、これで認証にまつわる処理はすべて実装できそう。 各サイトにおける認証の方法を都度実装するのは非効率ということで、こうしたライブラリで認証処理はサクっと終
これは必見のWEBデザインの近未来。HTML5で構築されたサイト45:phpspot開発日誌
45 Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 CSS3なんかも取り入れてデザインは去ることながら、動きもいい感じに実装されています。 WEB業界に身を置く方ならばデザイナーならずとも、出来ることを知っておくという意味で必見のサイトが多数。 多くのプロフェッショナルなサイトにおいてこうした物が近い未来当たり前になっていきそうな予感。 今後、より多くの知識と動かし方に関する引き出しを身に付けた上でクリエイティブな仕事が求められそうで大変な反面、面白いことにもチャレンジできそうな可能性を感じます。 ソニーのタブレットのサイト。超カッコいいです 他にも多数の動き
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返却値の例。カラーリングと整形がありがたい なくてもそこまで困らないかもしれませんが、エントリポイントをちゃんとチェックしたいっていう
スマホの入力が超楽になりそうなjQueryモバイル用のオートコンプリートプラグイン:phpspot開発日誌
jQuery Mobile Autocomplete now available - andy matthews スマホの入力が超楽になりそうなjQueryモバイル用のオートコンプリートプラグイン。 スマホではアプリなんかでよく見られるオートコンプリートですが、スマホ用WEBサイトにこれを組み込みたいといった場合にこれが使えそうです。 デザインも良い感じですね 関連エントリ jQueryMobileよりも軽くて使いやすそうなモバイルサイト作成フレームワーク「jQ.Mobi」 Android風の日付ピッカー実装用jQueryMobileウィジェット「Mobi Pick」 スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろ
サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」:phpspot開発日誌
Chrome ウェブストア - BuiltWith Technology Profiler サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」。 サーバに何を使っているとか、PHPを使っているかとか、jQueryとかのライブラリや、Analyticsが入っているかといった情報を一括で表示してくれるChrome拡張。 サイト上でボタンを押すだけで解析することが出来ます。なんだか恥ずかしいですがこういうツールで調べられちゃうので気をつけましょう ヘッダやソースを見れば当然ながら調べられる情報なんですがボタン一発で調べられるっていうのは便利ですね 関連エントリ Vimの分かりやすいチートシートを見れるChrome拡張「Vim Help」 PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 ChromeをiPhoneシミュレーターにできる拡
WEB開発者はインストール必須のChrome拡張「Pendule」:phpspot開発日誌
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 ４月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを１６進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい！ Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」:phpspot開発日誌
Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」 2012年04月12日- Retina.js | Retina graphics for your website Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」 <img src="/images/my_image.png" /> という画像タグがあったとするとスクリプトがサーバ上の"/images/my_image@2x.png"というファイルを自動でチェックして存在すれば置き換えてくれます。 インストールはretina.jsを読み込むだけというお手軽さがいいです。 単に高解像度で出したい部分だけファイルを用意して置いてあげればよいというのはお手軽ですね。 <script type="text/javascript" src="/s
画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」:phpspot開発日誌
画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 2012年03月19日- jQuery File Upload Demo 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 Twitter Bootstrap を使ったアップロードのデモなんですが、ファイルを選択するとサムネイルが直ぐに出てくれてます。（複数選択が可能） そして、選択後、すぐアップロードは開始されず、Startボタンを押すと開始されます。 なんか選択したらすぐアップされたなんていうケースがありますのでこれは安心です。 更に、個別にキャンセルが可能なので、アップしようと思った画像と違う物を間違ってアップする事をサムネイルで未然に防げます。 アップした後も、Del
jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル:phpspot開発日誌
jQuery HTML5 Drag-and-Drop File Upload | LearnComputer jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル。 jQueryのfiledropプラグインを使いつつサーバにファイルをアップロードするためのJavaScriptとPHPコードの例が掲載されています。 JS部分のコード例。アップ先のPHPエントリポイント、アップ開始、終了時のイベントハンドラが指定できます。 PHP側では $_FILES を使ってファイルを受け取るという簡単な物になっています。 関連エントリ ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」 ファイルアップロード関連のjQueryプラグイン１０ PHPを使ったAjaxファイルアップロードサンプル１０
シリコンバレー発的なカッコいいボタンを瞬時に作れる「Live Tools - Button Builder」:phpspot開発日誌
シリコンバレー発的なカッコいいボタンを瞬時に作れる「Live Tools - Button Builder」 2012年02月17日- Live Tools - Button Builder シリコンバレー発的なカッコいいボタンを瞬時に作れる「Live Tools - Button Builder」。 パラメータを調整するだけで簡単にボタンが作れちゃいます。どういじってもなんかカッコよくなっちゃうところがいかしてます。 ジェネレーターでも、なんか変なボタンになっちゃった、みたいな物もありますが、こういうジェネレーターこそ理想ですね。 デザインにこだわりがない人がとりあえず作ったけど、なんかカッコいいみたいなものが増えればWEBはどんどんカッコよくなっていく、と電車に乗った人が言ってました。 コードを瞬時にジェネレート。貼りつけて完了 関連エントリ HTMLをアップするとCSSのスケルトンを
次世代の検索フォームを作成するjQuery＆CSS3サンプル:phpspot開発日誌
Creating “Next Level” Search Form Using jQuery & CSS3 ? Webstuffshare ? Learn and share. The simplest harmony. 次世代の検索フォームを作成するjQuery＆CSS3サンプル。 CSS3をフルに使って、面白い検索フォームを作るチュートリアルです。 アイデアの応用で面白いインタフェースが作れそうです ボタンがあってクリックするとアニメーションしながら伸びて検索フォームになります ボタンをクリックすると立体的にキューブっぽく回転して検索入力ボックスが現れます これを見ると、ああなんかまた色々と出来て数年後にはどうなっていっちゃうんだろう、ついていけるんだろうかなという不安すら覚えてしまいますね。 関連エントリ ページめくりを実現するためのjQueryプラグイン集 高機能なカルーセルを実装
ビューティホーなHTML5＆CSS3テンプレート５０:phpspot開発日誌
50 Beautiful Yet Free HTML5 And CSS3 Templates | Free and Useful Online Resources for Designers and Developers ビューティホーなHTML5＆CSS3テンプレート５０ HTML5、CSS3のテクニックを学べる上に無料で使えるということでなかなか有用なまとめになってます。 学習がてら自分でも無料で公開しちゃうなんてのもよい学習メソッドかもしれませんね 関連エントリ HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 HTML5のcanvasを使ったアニメーションするタグクラウド実装スクリプト「TagCanvas」 Flash使ってなくてもHTML5でここまでクールにできるというプロフェッショナルサイト集
スマホサイト作成のフレームワーク「iUI」が新しくなっている件:phpspot開発日誌
iUI - Mobile web framework for high-end devices スマホサイト作成のフレームワーク「iUI」が新しくなっている件。 jQueryMobileも便利なのですが、iUIはiPhone発売当初からあるフレームワークで、ルールにそってHTMLを記述するだけでiPhoneアプリのようなページを作れるのが魅力のフレームワークです。 公開当初はgoogle codeとかにホスティングされているだけでしたが専用のカッコいいページもできてる模様。 iPhone, iPad, Android にも対応していて、便利に使えるようになっているようです テーマデザインも色々選べるようになりました。 ビデオプレゼンテーションや、デモを落として試してみましょう 関連エントリ コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」
JavaScriptでの日付の処理が超便利になる「Moment.js」:phpspot開発日誌
Moment.js - A lightweight javascript date library JavaScriptでの日付の処理が超便利になる「Moment.js」 以下にできることをまとめてみます 文字列からパースして日付オブジェクトを生成 UNIXのタイムスタンプから日付オブジェクトを生成 「Dec 25, 1995」みたいな文字列から日付オブジェクトを生成 日付オブジェクトに時間を簡単に を加算・減算 指定日時からの経過時間を取得 オブジェクトをベースにフォーマットして出力する moment(date).format("dddd, MMMM Do YYYY, h:mm:ss a"); phpにもdateという関数やstrtotimeという関数があったりしますが、そういう便利機能をJSでも使うことが出来るようなものです。 日付をヘビーに使うようなプロダクトで使えそうですね。 サイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルなタグなのに凝った綺麗なボタンを作るCSSチュートリアル:phpspot開発日誌
HTML5&CSS3を利用した美しい４０のフリーテンプレート集:phpspot開発日誌