WEB開発者はインストール必須のChrome拡張「Pendule」:phpspot開発日誌
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 ４月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを１６進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい！ Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
Pinterest風のWordPressテーマ集:phpspot開発日誌
10 Pinterest-Like WordPress Themes Pinterest風のWordPressテーマ集。 超人気のPinterestのUIはなかなか凄いと思っていますが、WordPressであのUIをテーマにしちゃおうというテーマ集です。 WordPressテーマになっても良い感じです。 どれも有償ですが50ドル前後と安価なので自分で作るより時間を節約できそう 関連エントリ フリーでレスポンシブなWordPressテーマ２８ 新しめのWordPressテーマ４０ TwitterBootstrapを使ったWordPressテーマ「BootstrapWP」 フリーのハイクオリティでレスポンシブなWordPressテーマ３０
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でも使うことが出来るようなものです。 日付をヘビーに使うようなプロダクトで使えそうですね。 サイ
こんなこと出来るの？というPhotoshopアクション集:phpspot開発日誌
50 Stunning And Useful Premium Photoshop Actions こんなこと出来るの？というPhotoshopアクション集。 有償ですがサンプルを見るとなかなか凄い効果が得られるみたいです レイヤーを３D化 レイヤーをマップ化 スケッチ風に変換 レイヤーを次のように変換 画面キャプチャを立体的に ５〜６ドルですが、これだけの効果が瞬時に得られるようになって生産性があがれば安いのかも。 関連エントリ まるで魔法のようだ。２Dの図形を輝く３D画像にしてくれるPhotoshopアクション Instagram風エフェクトをかけられるPhotoshopアクション集
PHPを使う上で、どう書けば高速になるか？をその場で試せるベンチマーク結果満載なサイト:phpspot開発日誌
PHPを使う上で、どう書けば高速になるか？をその場で試せるベンチマーク結果満載なサイト 2011年05月23日- Benchmarks PHPを使う上で、どう書けば高速になるか？をその場で試せるベンチマーク結果満載なサイトがあるようです。 同じことをやるのに複数の書き方があったりしますが、2つの書き方を並べてそれぞれどちらがどれだけかかったかという結果が記載されていて面白いです。 で、そのいくらかかったか？という秒数も、ページ上でリアルタイムに計算され、リロードすると実行され、実行タイムが表示されます。 サイトの作者環境による比較ではなく、その場で動いて何度も試せるので自分でその差を確認できるのがGood。 個人的には長年PHPをやっているのですが知らなかった物も多々あり、非常に勉強になりました。 1回のロードでは結果が変になることもあるので、サーバの負荷にならない程度に数回確認させてもら
ChromeをiPhoneシミュレーターにできる拡張「IPSim」:phpspot開発日誌
iPSim - Chrome Web Store ChromeをiPhoneシュミレーターにできる拡張「IPSim」 IPSimを使えばChromeをiPhoneシミュレーターにすることが出来ます。 インストールすると次のようにボタンが追加されます クリックするとシュミレーターが現れます。 縦・横方向での表示が可能。 以下、横表示の例 Chrome自体がWebKitベースなので実機でもそれほと差異がない点にも注目。 ChromeでサクッとiPhone対応したい場合に入れておくとよさそうですね。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 PHPフロントエンドのコンソールロギング用Chrome拡張「C
iPhoneアプリのプロモサイトを作る際に参考になる６０のサイトデザイン集:phpspot開発日誌
60 Amazing iPhone Application Websites For Design Inspiration iPhoneアプリのプロモサイトを作る際に参考になる６０のサイトデザイン集。 iPhoneアプリケーションのサイトはアプリのプロモーションなわけなのでかっこ良く作っておくと、アプリの出来は別として興味を持ってもらえるはずです。 色々なiPhone実機の設置例が見られて非常に参考になると思ったのでご紹介。 アプリ紹介サイトと一言でいっても色々なデザイン方法があることがわかります 関連エントリ 奥行きをうまく使ったサイトデザイン集３０ スライダーを上手く使ってデザインされたWEBサイト集３０ 次のサービスに使えるかもしれないロゴデザイン集２２ HTML5とCSS3を使ったフォームデザインのチュートリアル集３０
ページ下部で折りたためるメニュー実装サンプル:phpspot開発日誌
Creating a Toggle CSS3 Bottom Navigation Bar ? Script Tutorials ページ下部で折りたためるメニュー実装サンプル。 次のように、クリックで開閉して折りたためるメニューを実装するCSS3+jQueryなサンプルが公開されています サンプルのダウンロードも出来るので実装は簡単にできます。 スタイルもCSSで変えられるということで独自デザイン調整は簡単ですね。 サイトに収まり切らないようなメニューを入れておくと使いようによってユーザビリティ向上に繋げられそうです。 関連エントリ CSSのナビゲーションメニューサンプル５５ ミニマムで場所を取らないCSSメニューの実装例
PHPでの画像処理が楽々かつコードも綺麗に書けるPHP5.3用以降用ライブラリ「Imagine」:phpspot開発日誌
Welcome to Imagine’s documentation! ? Imagine, image manipulations reloaded PHPでの画像処理が楽々かつコードも綺麗に書けるPHP5.3用以降用ライブラリ「Imagine」 クラスはネームスペースで分けられて作られており、PHP5.3以降で利用可能。 サムネイル作成や切り取り、図形描画などのよく使われる処理をオブジェクト指向できれいに、あとで見ても分かりやすい状態でコードが書けます。 コード例は次のような感じで、メソッドチェーンを利用して直感的なコードが実現できているのがわかります。 こうしたものでネームスペースを使ったものって無かったので、ネームスペースちゃんとやりたい方にはよさそうですね。 関連エントリ 画像の縮小やトリミングに便利なPHPクラスライブラリ「Zebra_Image」 TwitterやFacebo
秀逸なiPhoneサイト38:phpspot開発日誌
38 Mobile (iPhone) Sites 秀逸なiPhoneサイト38がまとまっております。 日本でも新規リリースの携帯はほとんどスマホということになってきて、もう一年もすればシェアはかなり変わっているのだなというのは誰もが予測が付きそうですが、スマホサイトのデザイン知識は必須の物になりそうですね。 個人的にも徐々に慣れてきましたが、こうしたうまくデザインされているサイトは参考になります。 将来的にはスマホがPCを逆転するなんていう予測もあるぐらいなので、ちゃんとやっておきたいところ。 関連エントリ スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 スマフォ向けのPHP/
綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」:phpspot開発日誌
jsTree Examples 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 次のようなWindowsのツリービューっぽいUIが実装できます。JSONやXMLデータをツリーとして表示することが可能です。 アプリケーションで使い慣れた機能をWEBでも簡単に使えるのはいいですね クリックでアイテムの選択も可能です。 実装は最低限次のコードで実現できます $("#demo1").tree(); 関連エントリ WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」
Twitter OAuth認証をポップアップで行うjQueryプラグイン:phpspot開発日誌
jQuery plugin for Twitter OAuth via popup window (Facebook style) Twitter OAuth認証をポップアップで行うjQueryプラグイン。 サーバ言語はなんでもよさそうですが、PHPでのサンプルも公開されています。 認証等もPHP側なのでプラグインの機能としてはFacebook風にポップアップにするというものです デモページはこちら サービスのTwitter連携っていうのは最近は必須であるように感じますね。 関連エントリ TwitterやFacebookへのログイン機能をこれ１個で実装できるPHPライブラリ「HybridAuth」 スマホ等のモバイル判定が簡単に行えるライブラリ「MobileESP」
カウントダウンに関連したWEBサイトテンプレート集:phpspot開発日誌
40 Useful Under Construction Template Collection | Tripwire Magazine - tripwire magazine カウントダウンに関連したWEBサイトテンプレート集。 あまりこれまでこういうものを特集したものはなかったかも。あと何日でオープン！というページを作る際の参考にできそうです。 いざつくろうとなると、ちょっとトンチが効いてるなとか、センスあるなという物を作ろうとすると普段はあまり作らないものに関しては時間がかかりそうですが、こうしたものを参考に自分なりに組み立てた方がいいアイデアが出たりして捗りそうですね 関連エントリ お洒落なECサイトデザイン集３８ 次のサービスに使えるかもしれないロゴデザイン集２２ 奥行きをうまく使ったサイトデザイン集３０
スマートフォン対応の１３のWordPressテーマ:phpspot開発日誌
13 Smart Wordpress Themes to Befriend Mobile Gadget Users - WPDressing.com スマートフォン対応の１３のWordPressテーマ。有償のものが殆どですが、デザインの参考にできたり、有償といっても数十ドルまでのものなので導入してもよさそうです。 WordPressを使ったカッコイイモバイルサイトがあっという間に作れちゃいそうです。 シェアでいうと携帯サイト＞PCサイトなんていう現象がありましたが今後はグローバルでこうしたことが起こるかもというところでスマホサイトの構築法はしっかりと覚えておきたいところですね 関連エントリ スマホで使えるフォトギャラリー実装セット「PhotoSwipe」 スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ スマートフォン向けサイトの作り方エントリのまとめ
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
白黒だけど汎用的にシンプルデザインのWEBアイコン５００:phpspot開発日誌
500 web icons pack for web & graphic designers | Psdblast 白黒だけど汎用的にシンプルデザインのWEBアイコン５００。これはなかなか使えそうです。 次のようなアイコンが５００個セットになっています。WEBサイトだけでなく、アプリなんかにも使えそうですね。 PSD形式のベクターでダウンロード可能です。拡大してもいけるのはいいですね 関連エントリ 立体的にアイコン付きでいい感じにデザインされたボタン作成Photoshop素材＆チュートリアル 秀逸なiOSアプリケーションアイコンのサンプル色々 フラットなフリーの日本向けソーシャルアイコンセット
jQueryとCSS3を使った3Dのフォトスタック実装例:phpspot開発日誌
jQuery & CSS3 3D Interactive Photo Stack jQueryとCSS3を使った3Dのフォトスタック実装例。 複数枚の画像を重ね合わせて次のように写真リストを単に並べるだけでなく３Dにしてみたデモとソースが公開されています。 動きにはjQuery、回転などにCSS3を使っている感じです ページ下部のテキストにカーソルを合わせるとアニメーションで画像が切り替わります。ここら辺わかりづらいので使う場合は直したほうがよさそう。 CSS3のプロパティが組み合わさることでより色々なテクニックが出てきそうで楽しみです 関連エントリ ピュアCSS3でタイピングアニメーションするデモ アイコン付きの分かりやすいボタンをCSS3で実装するサンプル CSS3で動画再生部分を立体的にする等のデモ CSS3を使ったクリエイティブなテキストエフェクト集２３ ステップで学べるCSS3ボ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5&CSS3を利用した美しい４０のフリーテンプレート集:phpspot開発日誌
ナビゲーションやソーシャルサイト等サイトに使える１２０個のアイコンセット:phpspot開発日誌
HTML5＋CSS3ベースのテンプレート集１２:phpspot開発日誌