フラットが美しすぎるアイコン24個セット:phpspot開発日誌
Free PSD: 24 Flat Icons | Premium Pixels フラットが美しすぎるアイコン24個セット。PSD形式で配布されているそう。 iPhoneの時期OSがフラットになるとか、マイクロソフトやグーグルは既にフラットだとか、フラットの合理性に注目があつまっていたりしますが、フラットでもこれだけ美しくできるのだなと再確認させられるアイコンセット。 今後出てくるアイコンなんかもこうした美しいフラットアイコンだとWEBサイトやアプリも作りやすく、シンプルに美しくなるのかも。 関連エントリ シンプルで使えそうな５０のベクターアイコンセット アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル 地図と共に使えそうな２００のフリーベクターアイコン集 汎用で使えそうなフリーのアイコンフォント「Genericons」
5KBの読込でソーシャルボタンの実装が簡単にできる「Socialite.js」:phpspot開発日誌
Socialite.js 5KBの読込でソーシャルボタンの実装が簡単にできる「Socialite.js」 jQuery等に依存せず、単体で動作するあたりが特徴です。更に、ページ内に多数のソーシャルボタンを置くと重くなってしまいがちですが、スクロールと共にシェア数を読み込めるようなデモも用意されており、一気に読み込ませたくないケースでも使うことが可能。 残念ながら日本のサイトには対応していません。 関連エントリ 様々にCSSでデザインされたソーシャルボタンセット Facebook,Twitter,Google＋の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」 ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」 円形に広がるソーシャルシェアボタン実装jQueryプラグイン「jOrbital」
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返却値の例。カラーリングと整形がありがたい なくてもそこまで困らないかもしれませんが、エントリポイントをちゃんとチェックしたいっていう
WEB開発者はインストール必須のChrome拡張「Pendule」:phpspot開発日誌
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 ４月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを１６進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい！ Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
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でも使うことが出来るようなものです。 日付をヘビーに使うようなプロダクトで使えそうですね。 サイ
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」:phpspot開発日誌
h5ai larsjung.de Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」 HTML5の機能を使って、通常の味気ないディレクトリインデックスをかなりかっこ良くしちゃうというものです。 ディレクトリ一覧。アイコンなんかもついてかなりリッチ mod_headersとmod_autoindexというApacheモジュールを応用して作られているようですが、こんなことが出来るとは知りませんでした。 表示方法もアイコンベースに変更することも可能です。これはイカしていますね。 サイドの丸みを帯びた物体にカーソルをあわせるとニュイーンと伸びてツリービューが表示。これまた便利です。 動作デモはこちら デザインは基本的にHTML+CSSなので、あなた好みにカスタマイズすることも可能。 Apacheの味気ないデザインページは嫌だ！というデザイナーさんは覚えておくとよさそう
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろ:phpspot開発日誌
8 Best jQuery Mobile Plugins | ZoomZum スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインがまとまっていましたのでご紹介。 １から作るとかなり大変そうな機能もライブラリで瞬間的に実装できます。一通りチェックした上でご紹介。 Drag And Scale For IOS ブロック要素をピンチイン、アウトによって拡大、回転させることも可能です。これでiPhone向けのWEBサイトといってもアプリのような自由度が得られます（デモ）。 こんなことできるんっ、という声が出てしまうかも（Androidはドラッグのみ） jQuery Mobile Photo Album リッチなフォトアルバム実装が可能 Jquery Mobile Device Drag And Drop 要素のドラッグ＆ドロップが可能 Jquery Swipe スワイプイベン
JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌
html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ:phpspot開発日誌
Got Wood? UI Design Elements | MediaLoot これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ。 木のiPhoneケースや木のキーボード等、木とITを絡めるとなぜかインパクト絶大ですが、木のUIキットを発見しました。 これでページデザインをすれば自然の温かみによってリラックスした気分でページを使えるのかも。 基本的なUIパーツはそろっているので頑張ればページに適用できるはず。 レイヤーに綺麗に分かれているのがいいですね。 見ていてなにか作りたくなりました。 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 モックアップ作成用PhotoshopのUIキット「Soft UI Kit」 ブルーが美しいモダンなＵＩキットPSD 色々と使えそうなフリーのUIエレメントPSD７０種
レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」:phpspot開発日誌
新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」 2011年04月25日- 新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」。 この春、会社に入って、サーバに入って vim でプログラミングさせられている人はそれなりにいそうですが、その場合に速攻でプログラミングをマスターできるquickrunプラグインを入れておきましょう。 プログラミングを覚えるには作って動かすが一番いいですが、「書いて」→「保存して」→「実行して」を一瞬で行えます。 具体的にはプログラムを書いていて、コマンドモードで「￥r 」をタイプするだけでペインが分かれてプログラムの実行結果が得られます。 VPSなどを借りて、これからプログラミングをはじめようって方にも有効です。 かなりインスタントに実行できるので、こう書くとこう出る、がサクサク進められる
jQueryベースの画像スライダー３０まとめ:phpspot開発日誌
Roundup of 30 jQuery Image Gallery/Slider Tutorials & Plugins | Lava360 jQueryベースの画像スライダー３０まとめエントリのご紹介。 画像スライダーといっても、実に様々なデザインがありますが、３０個もあれば自分の目的に合ったものが見つかりやすそうですね。 全体的にクオリティは高いようです。 昔では想像もできなかったことが実現できていることに色々と感動しますね。 関連エントリ JavaScript製の画像スライダー・ギャラリーいろいろ 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 軽量でいい感じの画像スライダー実装jQueryプラグイン「Choco-Slider」 画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」
使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」:phpspot開発日誌
JK - jQuery SimpleFAQ 使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」。 FAQというと内容が多くなればページが長くなって見難くどんどん使いづらくなっていきますね。 そんな場合に、項目は並べつつも、クリックした際にアニメーションで質問のすぐ下に現れるようなFAQが簡単に作れます。 質問のリスト。 とりあえず質問が並んでいるので分からないことを探してもらいます。 そんなに大規模なFAQじゃなければ質問項目を羅列しておくだけでもそれなりに使いやすいです。 クリックすればページ移動とかもなく、その場にアニメーションしながら答えが表示されます。 別ページに移動したりといったことがなく、ストレスフリーで内容が見れます。仮に答えが的外れでも戻ったりせずにすぐに他の質問に行けます で、何がいいかという個人的におすすめする点は、作り方。 作り手は、
もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」:phpspot開発日誌
もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 2011年04月11日- Tipped - The Javascript Tooltip Framework | jQuery & Prototype Tooltips もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 これ１つで出回ってるであろう殆どのツールチップは作れる気がします。しかも全てハイクオリティ。 フレームワークということで以下の点をカスタマイズ可能 ・スキン ・ツールチップの位置設定（左右上下など） ・コンテンツをAJAX読み込み ・ローディング画像のカスタマイズ ・コールバック機能(afterUpdate)、イベント(onHide, onShow) ・APIの提供 スクリーンショットを以下にサンプルとして掲載。 それぞれがセンスがよくてどれをつかってもよい気が
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル＋ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フリーの曲を入手できる１３サイト:phpspot開発日誌
小さくで可愛いグラフが描けるjQueryプラグイン「Piety」:phpspot開発日誌