ペーストするテキストにフィルタをかけて変換できる「FilteredPaste.js」:phpspot開発日誌
FilteredPaste.js ペーストするテキストにフィルタをかけて変換できる「FilteredPaste.js」。 コピーしてペーストした際に、スタイルを消したり、付け足したり、定義関数によって自由に変換することができるjQueryプラグインです ペーストする際に無駄な特定タグを除去したりして予めフィルタする際に便利そうです 関連エントリ CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン jQueryで分かりやすいテキストのDIFF表示ができる「jQuery.PrettyTextDiff」 テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 テキスト表現力を豊かにするタイポグラフィ関連jQueryプラグイン１０ テキストを要
Googleカレンダーっぽい物や日付ピッカー等カレンダー関連のjQueryプラグイン集15:phpspot開発日誌
15 Useful JQuery Calendar and Date Picker Plugins - DesignM.ag Googleカレンダーっぽい物や日付ピッカー等カレンダー関連のjQueryプラグイン集15がまとまっていました。 今日では実に沢山のカレンダー関連プラグインが存在するので、カレンダー関連のプラグイン実装の際の参考にできそうです。 関連エントリ レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」 Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」 カレンダーやDateピッカー関連のjQueryプラグイン20 これは新しい!クールなタイル状の年間カレンダー実装jQueryプラグイン「jQuery Verbose Calendar」
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のテーマで良い感じに動くオート
普通のテーブルを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
Bootstrapで矢印を描くのなら「Bootstrap Arrows」:phpspot開発日誌
Bootstrap Arrows Bootstrapで矢印を描くのなら「Bootstrap Arrows」 全国の矢印好きの諸君。こんにちは。もうPhotoshopで矢印を描いて画像を作ってアップロードなんていうことは必要ない。 <span> に簡単なclassをつけるだけで、向きも、長さも、色だって、自由自在。 しかも、次のような美しい矢印が描画できる。センス云々の話ではなく、class="arrow" として rel で角度を指定するだけで美しい矢印が描けるのだ。 色んなUIライブラリはあれど、矢印まで描けるとなるともう選択肢は限られる。 これでBootstrapを使わない理由は一切なくなったのだ。 関連エントリ TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootStrap に追加できる５つのコンポーネント
iOSで使えるHTML5ベースのYouTubeプレイヤ実装jQueryプラグイン「TubePlayer」:phpspot開発日誌
iOSで使えるHTML5ベースのYouTubeプレイヤ実装jQueryプラグイン「TubePlayer」 2012年12月26日- jQuery YouTube TubePlayer Plugin - By Nirvana Tikku iOSで使えるHTML5ベースのYouTubeプレイヤ実装jQueryプラグイン「TubePlayer」。 スマホ、タブレットが増えてPCユーザが減少していっているサービスをちらほら聞きますが、こうした実装でスマホでYoutube動画再生？問題ない、という状況にしておくとよさそう。 当然、Flashによるフェイルバックも対応しています。 プレイヤーのコントロール用APIも使いやすそう。 誰でも簡単に使えそうなところがよいですね 関連エントリ Youtube動画とSlideshareのスライドを同期して再生できる「Presentz」 Youtube動画をページ
これは超使いやすいページネーションの次世代UI:phpspot開発日誌
Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ＆ドロップでページ指定が簡単に出来ます。 30までドラッグ＆ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合
地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」:phpspot開発日誌
地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」 2012年12月19日- franzenzenhofer/box2d-jquery GitHub 地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」。 一見普通のサイトに重力を与えることでサイトが崩壊し面白いエフェクトをかけられるjQueryプラグインです。 box2dというライブラリは数年前に話題になりましたが、そのjQuery版がgithubにて公開されています。 重力によってアイテムが崩壊していき、それぞれドラッグ＆ドロップが可能。 デモで面白いのは、地図や動画がマウスで投げられるところ。 動画にも重力。動画は問題なく再生されています。 ゲームに活用したり、エイプリルフールネタや、キャンペーンサイトにインパクトを与えたりと、覚えておけば使えそうですね 関
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」:phpspot開発日誌
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 2012年11月22日- Responsive Img - a jQuery Plugin for Responsive Images ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 単に画像をリサイズするだけではなくsrcも置き換えてくれるそう。 PC版を単に縮小するのではなくて、スマホでは別の画像を使う、といった場合にも使えそうですね ブラウザサイズに応じて別の画像に切り替えて最適化したいという場合はそれなりにあると思うので、覚えておいてもよさそうですね 関連エントリ WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」 レスポンシブ
キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」:phpspot開発日誌
Keypress: A Javascript library for capturing input キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」 jQuery等に依存せず、簡単に使えるキーボードイベント実装ライブラリ。単体キーだけでなく、複数のキーの組合せや、キーを押した順によってイベントを発動させることができ、とりあえずキーボードショートカットなんかを入れたいという場合に簡単に使えそうです。 ライブラリを使ったイベント実装コードは以下。Shift+Sで発動する関数を設定しています。 keypress.combo("shift s", function() { console.log("You pressed shift and s"); }); 次のような感じで、キーボードを↑↑↓↓〜という感じに順に打ってイベントを発動させることも可能 keypr
もう面倒なユーザ認証機能は１から作らなくてよいかも？PHPのOSS「AuthManager」:phpspot開発日誌
もう面倒なユーザ認証機能は１から作らなくてよいかも？PHPのOSS「AuthManager」 2012年08月13日- AuthManager - StitchApps もう面倒なユーザ認証機能は１から作らなくてよいかも？PHPのOSS「AuthManager」。 ユーザ認証型のサイトを１から作るとなると面倒な上に、もう誰かが良い物を作ってるんじゃないかという事を誰もが作り直してる気がします。 こういうもの自体をオープンソースにしちゃって誰もが使えるっていうのは素晴らしいですね。 Facebookによる認証やreCAPTCHAによるスパム防止、メールアドレスの認証機能といった標準で必要な機能が入っており、便利に使えそう。 で、ユーザ登録できるのはいいんだけど、肝心の制限はどうやってかけるの？というところは、次のように簡単にやってね、ということらしくお手軽。 ($sesslife自体がどこか
レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」:phpspot開発日誌
レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」 2012年07月10日- PHPImageWorkshop - PHP class using the GD library for image processing レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」。 画像生成のサービス等を作る際には押さえておきたいライブラリかも。WEBサービスにおいては画像生成はよく使われるものですから、覚えておいて損はないでしょう。 以下に行える処理の概要をご説明します。 画像合成 複数の画像を組み合わせて簡単に合成する機能。透過pngの画像を合成します。 合成結果。透過PNGによって綺麗に合成されていますね。 実装コードが分かりやすくて、次のように addLayer
PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」:phpspot開発日誌
CSS3Ps PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でちょっと凝ったオブジェクトを作りたい場合に、Photoshopがそのまま使えてCSS3にコンバートしてくれます。 CSS3で描画した驚きのグラフィックス、というのも、こうしたツールを活用すると驚きのCSS3グラフィックスでもなんでもなくなるのかも。 シェイプをデザインします グラデーションなんかもつけつつ プラグインのボタンをクリックで出力。そのまんま。 画像じゃないから軽いという点もポイントですね 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3で出来たクールなLightBox実装チュートリアル CSS3で描かれたシェイプのサンプル集
様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」:phpspot開発日誌
NVD3.js :: re-usable charts for d3.js 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 d3.jsという以前紹介したライブラリをベースに利用しているみたい。 グラフ描画のライブラリは色々ありますが、こちらのライブラリで描画するグラフのデザインもなかなかいい感じですね マウスとのインタラクティブなグラフ実装が可能で拡張も容易みたい サンプルページにはソースがついているので参考に組めば抵抗なくグラフが描けそうです 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 クールなドアノブ風の％グラフを描画できるjQuery Knob
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等による認証ができますから、これで認証にまつわる処理はすべて実装できそう。 各サイトにおける認証の方法を都度実装するのは非効率ということで、こうしたライブラリで認証処理はサクっと終
PHPからiPhoneに通知を送るためのオープンソースの仕組み「apns-php」:phpspot開発日誌
apns-php - Project Hosting on Google Code PHPからiPhoneに通知を送るためのオープンソースの仕組み「apns-php」がGoogle code に公開されています。 PHPコードによってiPhoneに通知を行えるようになります。 PHPとしては次のようなコードによってpush送信を行うことが出来るようです。 <?php $push = new ApnsPHP_Push( ApnsPHP_Abstract::ENVIRONMENT_SANDBOX, 'server_cerificates_bundle_sandbox.pem' ); $push->setRootCertificationAuthority('entrust_root_certification_authority.pem'); $push->connect(); $messag
TwitterやFacebookへのログイン機能をこれ１個で実装できるPHPライブラリ「HybridAuth」:phpspot開発日誌
TwitterやFacebookへのログイン機能をこれ１個で実装できるPHPライブラリ「HybridAuth」 2011年08月22日- HybridAuth, Open Source Social-Signle-Sign-On Solution for authentication through Facebook, Twitter, Google, Yahoo, MySpace, LinkedIn, AOL, Vimeo, FourSquare, OpenID and other Identity providers TwitterやFacebookへのログイン機能をこれ１個で実装できるPHPライブラリ「HybridAuth」 Facebook, Twitter, Google, Yahoo, Windows Live, MySpace, LinkedIn, FourSquare, O
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」:phpspot開発日誌
h5ai larsjung.de Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」 HTML5の機能を使って、通常の味気ないディレクトリインデックスをかなりかっこ良くしちゃうというものです。 ディレクトリ一覧。アイコンなんかもついてかなりリッチ mod_headersとmod_autoindexというApacheモジュールを応用して作られているようですが、こんなことが出来るとは知りませんでした。 表示方法もアイコンベースに変更することも可能です。これはイカしていますね。 サイドの丸みを帯びた物体にカーソルをあわせるとニュイーンと伸びてツリービューが表示。これまた便利です。 動作デモはこちら デザインは基本的にHTML+CSSなので、あなた好みにカスタマイズすることも可能。 Apacheの味気ないデザインページは嫌だ！というデザイナーさんは覚えておくとよさそう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」:phpspot開発日誌