JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」:phpspot開発日誌
Fabric.js Javascript Canvas Library JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」 canvasのネイティブAPIは若干分かりづらいという方も多そうですが、このライブラリを使えばオブジェクト指向で楽々Canvasプログラミングが出来そうです 単に便利にコーディングできるようになるだけでなく、オブジェクトをマウスで拡大や回転できるなどといった色々な機能も盛り込まれていて便利そうです ネイティブAPIだと、四角形を描画するのに、次のようなコードを書きます。 これが、Fabric.jsを使うと次のように、とても分かりやすくなります。fillRectの引数の順ってどうだっけ？と毎回リファレンスを牽く必要もなくなりますね 他にもドキュメントを参照すれば、CanvasをネイティブAPIで書く面倒さを理解できるはず デモページも結構充実しており
属性設定で簡単にデータバリデーションが出来るJSフレームワーク「Parsley.js」:phpspot開発日誌
Parsley.js 属性設定で簡単にデータバリデーションが出来るJSフレームワーク「Parsley.js」 <input>に対して data-* の形で属性を設定すればデータのバリデーションが簡単にカッコよくできちゃうフレームワークです。 例えば、<input data-type="email">って記述しておけば、そのinputにメールアドレス以外が入力されていればエラーを検出出来ます。 emailだけでなく、数値、URL、アルファベット等のチェックに対応。その他、最低・最高の長さの設定や、必須項目、範囲設定、正規表現、リモートURLによるパラメータチェックができ、とにかくバリデーションするなら全体的に機能が詰まっています。サンプルサイトもBootstrapベースで作られていて、Bootstrapとも相性が良さそう。 FE側でのバリデーションをスマートにやりたいって方は評価してみてもよ
フリーのベクター/写真/PSD素材が見つかる検索エンジン「Freepik」:phpspot開発日誌
Free vectors, photos and PSD Downloads | Freepik フリーのベクター/写真/PSD素材が見つかる検索エンジン「Freepik」。 ちょっと素材を探したいっていう時に便利なフリー素材検索サイト。 写真、ベクター、PSDをタブで選択することが出来たり、色で素材を絞り込んだり出来ます これは覚えておいて損はなさそうですね 関連エントリ iPhoneアプリ作成に使えるPSD素材集１０ よくデザインされたナビゲーションメニューバーのPSD素材３９ PSD形式のフレッシュなフリーアイコン素材３７ ハイクオリティなブラウザアイコンのベクター形式PSD素材
プロダクトを360度回転させられるjQueryプラグイン「Threesixty-slider」:phpspot開発日誌
Threesixty-slider by creativeaura プロダクトを360度回転させられるjQueryプラグイン「Threesixty-slider」。 画像をドラッグ＆ドロップやコントロールボタンのクリックで回転させられます。 自動で回転させられる再生ボタンを付けることも可能 実装コード例。画像のパスや拡張子、prefixなどで複数の画像を設定してまわせる模様。 元画像のかっこ良さもあって、入れてみたいなぁという気になっちゃいますね 関連エントリ プロダクト画像を360度回転させられるようにするjQueryプラグイン５つ スマホタッチでくるくる回転させられるjQueryプラグイン「Touchy」。 ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」
モダンなサイトを作成するためのCSS3チュートリアル集:phpspot開発日誌
Latest CSS3 Tutorials For You To Create Modern Websites モダンなサイトを作成するためのCSS3チュートリアル集。 CSS3のテクニックがあつまったチュートリアル集のご紹介。自分に無い知識を取り入れるために参考にできそう。 いつも進んでる感を感じますが、もうずっと進化し続けるんでしょうね。 関連エントリ CSS3でChrome風ウィンドウを作成するチュートリアル 使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 CSS3でボーダーを超かっこよくアニメーションするサンプル CSS3ベースのオシャレな価格表作成チュートリアル
大きめのソフトウェアキーボードを実装できるjQueryプラグイン:phpspot開発日誌
Javascript, jQuery and other Junk: jQuery UI Keyboard Widget 大きめのソフトウェアキーボードを実装できるjQueryプラグイン。 次のようなソフトウェアキーボードをInputに対して付与することができるようになります。 ソフトウェアキーボードでセキュリティを高めたい、という場合に参考にしてみてもよいかも。 関連エントリ キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」 キーボード不要でMySQLクエリを組み立てられるChromeアプリ「MyQuery Builder」 サイトにキーボードショートカットを実装する際に便利なjQueryプラグイン「chaves.js」
テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン:phpspot開発日誌
Expanding Textareas jQuery Plugin テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン。 文字の量に応じて自動でリサイズするテキストエリアはブラウザ標準でも付けてもらいたいぐらい便利なのですが、最低の高さを設定したり、リサイズ時のコールバックを設定したりできるプラグインのご紹介。 テキストをいれてなくても最小のサイズが指定できるのは便利。 リサイズされた時のコールバック設定により、現在の行数なんかを表示することもできますね 関連エントリ textareaのキャレットを細かく制御する関連jQueryプラグインまとめ 通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」
ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」:phpspot開発日誌
ThreeSixty ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」。 マウスやスワイプで回転させられる次のような3Dオブジェクトをページ内に配置できます。 （実際には3Dオブジェクトを描画するというよりかは、画像を切り替えて回転させています） 商品の写真を360度撮影できる仕組みさえあれば、商品を回転できるECサイトに活用できそうですね。 関連エントリ コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」 jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」 UIがカッコいいオートコンプリート実装jQueryプラグイン「Ajax AutoComplete」 吹き出し風にポップアップするツールバー実装jQueryプラグイン「Toolbar.js」 テキスト表現力を豊かにするタイポグラフィ関連
レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」:phpspot開発日誌
Cool Kitten: A parallax scrolling responsive framework レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 レスポンシブなフレームワークは多くありますが、更にパララックスなサイトを作る機能も盛り込まれたフレームワーク。 パララックスなサイト作ってみたいけど、スマホでも動かすの面倒、といった場合に使えそうです。 幅を広げた状態。普通にパララックスがかかります 幅を狭めても、レスポンシブでパララックス効果が得られます 関連エントリ パララックス効果を作るスクリプトやプラグインのまとめ レスポンシブなナビゲーションの見本やチュートリアル 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」 これは新しい円形のスライダーが実装できる「Tiny Circles
本をペラペラめくる風UI実装jQueryプラグイン「Booklet」:phpspot開発日誌
Demos - Booklet - jQuery Plugin 本をペラペラめくる風UI実装jQueryプラグイン「Booklet」。 よくあるペラペラめくる風UIを実装できます。めくる領域の縦横サイズを自由に指定できたり、ページ番号を降ったり、スピードやキーボードコントロール等、カスタマイズが容易で小回りが効きそう 使い方によっては単なるリンクでのページ送りの方が分かりやすくなってしまいそうなところに注意ですが、なかなか便利そうです。 関連エントリ ページめくりを実現するためのjQueryプラグイン集 フルスクリーンでページめくりをするUI実装デモ Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」:phpspot開発日誌
CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 2013年02月18日- Textillate.js CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」。 実に様々なテキストアニメーションが実現できてページにアニメーションエフェクトを付けたい際に便利。 CSS3非対応ブラウザは動作しませんが、そもそもスマホ等向けのサイトであれば活用できそう アニメーションの種類が実に様々。 Chromeなどで見るとアニメーションの滑らかさも素晴らしい。 関連エントリ 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストを部分的にカッコよくアニメーションさせつつ切替え可能にするjQueryプラグイン「dynamo.js」 テキストを燃え上がら
どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」:phpspot開発日誌
FnordMetric | Framework for building beautiful real-time dashboards どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」。 どんなデータも次のような美しいUIを持つリアルタイムなグラフにできます。 サイトの会員数、ユニークアクセス数、データ投稿件数等、リアルタイムにデータを見たいような場合に使えそう。 muninなどでもグラフ化できますが、ここまでのUIの美しさとリアルタイム性は備えていないので、リアルタイムに欲しい情報はこれでダッシュボードにして監視すると便利でかっこ良さげ。 Ruby+Redisで書かれていますが、データの表示にはHTML5/JavaScriptのAPIが使えるようです 関連エントリ 世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」 リアルタ
スワイプできるLightBox実装jQueryプラグイン「Swipebox」:phpspot開発日誌
Swipebox | A touchable jQuery lightbox スワイプできるLightBox実装jQueryプラグイン「Swipebox」。 LightBoxが最初に出た時はタッチデバイスがこんなにも流行っているとは思いませんでしたが、今やタッチデバイスの勢いは留まることを知りません。 というわけで、タッチデバイスでも画像をスワイプで送ることのできるjQueryプラグインが公開されています。 PCでも動作するように設計されており、これから実装するならスワイプが標準対応のものが便利そうです。 ５年後、１０年後はタブレットが主流となっていると仮定すると、こうしたプラグインの類もほとんどがスワイプ対応なんていうことになっていそうですね。 関連エントリ 今こそ知っておくLightbox風プラグイン20+
今時のクールな掲示板を作れるRails製OSSディスカッションボード「Discourse」:phpspot開発日誌
Discourse 今時のクールな掲示板を作れるRails製OSSディスカッションボード「Discourse」。 ユーザインタフェースが今時の物になっており、Likeボタンやお気に入り、Ajaxによる次ページ読込機能等、使いやすく、必要な物が揃ってる感じです。 社内のディスカッションボードなんかに使ってみるとよさそうです。 GitHubでソースコードが入手出来ます 関連エントリ コーディングもブラウザ上でできるオープンソースソフトウェア「Codiad」 オープンソースのHTML5お絵かきウィジェット「Literally Canvas」 Excelそっくりな表計算モジュールを実装可能なオープンソースモジュール「Gelsheet」
JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」:phpspot開発日誌
hint.css - A tooltip library in CSS JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」。 指定位置にカーソルを合わせるとポップアップするツールチップヒントを次のようにCSSだけで実装できます。 ヒント位置も上下左右と自由に配置でき、カラーなどもCSSでカスタマイズできるみたい シンプルで軽量なのがメリットでしょうか。 関連エントリ いろんな種類のツールチップを簡単実装できる「Opentip」 スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」 色々とカスタマイズが可能なツールチップ実装jQueryプラグイン「PowerTip」
ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」:phpspot開発日誌
ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 2013年02月12日- Overview - jQuery Rondell ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」。 次のように、カルーセルやスライダー等、様々な画像ギャラリーのUIを実現することができます。 多機能だけじゃなくて、カッコいいところもいいです。サンプルサイトがBootstrapベースですが、Bootstrapベースのサイトに入れても違和感なく埋め込めるでしょう。 カルーセル スライダー スクローラー サムネイル付きギャラリー。動きもいい感じ 関連エントリ ブラウザ上でまるで美術館。3Dイメージギャラリーデモ 卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン サムネイルがシャッフルされてク
PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」:phpspot開発日誌
PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 2008年02月21日- Icebeat | class.image PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 class.image.php を使えば、分かりやすいコードで、簡単に画像のリサイズ、切抜きが可能です。 例えば、3行で、画像のサムネイルが作れてしまいます。 まずは、画像を幅200pxでリサイズ＆保存のコード $thumb = new Image('image.jpg'); $thumb->width(200); $thumb->save(); そして、画像を50%のサイズにリサイズのコード $thumb = new Image('image.jpg'); $thumb->resize(50); $thumb->save(); そして、左0px、上30pxの位置
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マンガっぽい物をWEB上で作れるライブラリ「Comix I/O」:phpspot開発日誌
Windows8風デザインのソーシャルアイコン９６個セット「Simple Icons」:phpspot開発日誌
今風のWEBベースチャットを作れるオープンソースソフト「kandan」:phpspot開発日誌