jQueryの必要なところだけを取り出せる「jQuip」:phpspot開発日誌
jQuip - jQuery in parts :: Builder jQueryの必要なところだけを取り出せる「jQuip」。 ajaxの機能だけを使いたいのに、全部インクルードしちゃうのは回線のムダでパフォーマンスにも影響しますね。 ということでajaxの機能だけとかcssの機能だけといった風にチェックボックスでチェックすればコードをWEB上で取得できてそのままコピペで使えるというものです。 サイト上でminifyしたり逆も可能です。 いらない機能は読み込みたくないものですがこれはナイスですね 関連エントリ 円形で回転するタイマーを実装できるjQueryサンプル Twitter OAuth認証をポップアップで行うjQueryプラグイン 良い感じで動作するニュースティッカー実装jQueryサンプル
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でも使うことが出来るようなものです。 日付をヘビーに使うようなプロダクトで使えそうですね。 サイ
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はなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」:phpspot開発日誌
Socketbug - Mobile Web Application Debugging スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」。 モバイルブラウザで動くことを想定してSafariなどで作っても若干挙動がおかしくなることがあったりします。 Socketbugを使えば、スマートフォンで動いているエラーをそのままキャッチしたり、JSコードを送信してスマフォ上での解釈で動かしたりできます。 出来ることは以下。 ・PC上のブラウザコンソールからJavaScriptを実行するなど各種リモート操作 ・スマフォブラウザに表示されているアプリのソースコードを得てPC上ブラウザに表示 ・スマフォブラウザのエラーをPCのブラウザコンソールに表示する ・スマフォブラウザの現在のHTMLソースをPC側のブラウザでみる（通常はiPhoneブラウザでソースを覗いたり
ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit... 次の記事 ≫：かなりいい感じのWordPressテーマ２０ Allan Jardine | Reflections | Visual Event ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」。 JavaScript で開発していて、jQuery等の各種フレームワークや、on〜 を使ってイベントを埋め込むことは多いですね。 後になって、どこにイベントがあるのかをすぐ見える化し、どのような処理が記述されているのか、確認することのできるブックマークのご紹介です。 当サイトにはそれほどイベントが組み込まれていませんので、Yahoo! Japanのトップページで試してみます。 ブックマークレットを起動すると、グレーアウトされ、エレメントの上
node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌
node.jsに関する基礎やチュートリアルのまとめ。 リアルタイムなWEBを実現するには必須のサーバサイドJS、node.jsについて色々とまとめてみました。 node.js node.jsについて node.js なんとなく凄そうだけどよく分からないという方も多いかもしれないので簡単に解説。 一番最初見た時は何かのJavaScript ライブラリかと思ったのですが、全く違って、V8というChromeにものっている高速JavaScriptエンジン上で動くサーバを動かせる仕組み。 サーバ自体を具体的に言うと次のようなコードで実現します。 var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain
サーバ監視に超使える〜topコマンドのまとめ:phpspot開発日誌
サーバ監視に超使える〜topコマンドのまとめ サーバを運用しているとよく使うtopコマンドですが、標準のtop以外にも色々便利なものがあるのでまとめてみました。 ボトルネックといえば、ネットワーク、ディスクIO、スワップ、CPU、メモリといったものが関連しますが、ツールで視覚化することでより分かりやすい対策がとれますね。 htop こちらも、通常のtopよりもさらに多数の情報を表示してくれるツール。 CPUやメモリの状態が視覚的にグラフで表示されていたり、複数CPUがある場合もそれぞれに利用率を表示してくれてわかりやすいです。 pstreeで表示するようなツリー+topコマンドのような表示も t を押せば切り替えられます。 公式サイト上にある128コア積んだマシンのhtop結果が面白い。 次のようにすべてグラフで表示されているため、128コアあったとしても瞬時に負荷が把握できますね。 io
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
WEBアプリケーション作成に使われる４３のコントロールパターン:phpspot開発日誌
43 Essential Controls for Web Applications | UX Booth WEBアプリケーション作成に使われる４３のコントロールパターンがまとまっています。 ４３のパターンが網羅されているので、部分的に、どういうインタフェースが良いか？という点について迷った際にエントリを眺めるだけで参考になる部分がありそうです。 オートサジェスト カルーセル カレンダー、スケジュール グラフ、チャート コンボボックス スライダ ４３と言わずもっとありそうな気もしますが、ある程度のパターンを知っておき、適材適所のUIを考えてユーザビリティを上げるのに役立てることが出来そうですね。 それぞれのUIにも沢山のインタフェースがあると思いますが、その場合は「パーツごとのデザインが盛り沢山で参考にできるPattern Tap」で紹介したPatternTapなどを更に参考に出来そうです
WEB開発者が便利に使えるGoogle Chromeエクステンション:phpspot開発日誌
13 Useful Google Chrome Extensions for Web Developers | Tools WEB開発者が便利に使えるGoogle Chromeエクステンションがまとまったエントリのご紹介です。 最近盛り上がりを感じるChrome のエクステンションですが、かなり便利なものが多くなってきているようですね。 FireBug Lite FireBugのChrome版 Speed Tracker ページの読み出しの速度をグラフ化 Resolution Test ブラウザの解像度を変える Aviary Screen Capture ページのスクリーンキャプチャを取得 IE Tab Chrome内で動作するIEエンジン Color Picker カラーピッカー すべて見る という感じで必要そうなものはどんどんできていってる感じです。Firefoxにあって、Chrome
これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」:phpspot開発日誌
これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」 2010年01月26日- jQuery.sheet これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」。 参照に対応していて、A1 に 2 が入っていたとして、A2に「=A1*2」とするとちゃんと4と表示されたり、色々なおなじみのExcel 関数(ABS, AVERAGE, CEILING, COUNT, IF, MAX, MIN, PI, ROUNDなど)をそのまま使うこともできてしまいます。 デモページ 単にソート機能がついたり、そのまま編集できるだけではなく、本当にExcel っぽいところがすごいですね。 デザインは上記固定ではなく、色々なデザインテーマを適用することもできるようです。 あと、実装もjQueryプラ
jQueryをよく使う人に使えそうな７つのチートシート:phpspot開発日誌
jQueryをよく使う人に使えそうな７つのチートシートがまとまっています。 内容が被ってしまう部分もあると思いますが、７種類の中から自分が使いやすいものを組み合わせて置いておくと便利ですね。 ajaxブームの2005年から4年。すっかりjQueryが地位を確立してしまった感がありますね。 以下のエントリを参照してください。 7 jQuery Cheatsheets For Every Designer & Developer to Have | TutZone 関連エントリ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」 jQuery用のGUIコンポーネントプロジェク
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」:phpspot開発日誌
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」 2009年10月23日- JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」というサイトを発見。 ちょっとした動作確認用のコードを書いたり、入門者の方がJavaScriptを学ぶのに非常に有用ですし、その結果も保存してサーバに置いてホスティングしてもらうことも可能。 また、比較的面倒なjQueryやjQuery UI、prototype.js 等の有名どころのフレームワークを簡単に読込めて使える機能もあります。 サイトを開くと、まず3つのタブがあって、JavaScript のタブにはJSを、HTMLのタブにはJavaScript から操作するHTMLを、Output には実行結果が出力されるようになっています。 JavaScript
たった1ファイルでサーバ上のコンテンツ管理が出来る最低限の「OneFileCMS」がいい感じ:phpspot開発日誌
たった1ファイルでサーバ上のコンテンツ管理が出来る最低限の「OneFileCMS」がいい感じです。 onefilecms.php という単体のファイルにも関わらず、次のようなスタイリッシュなデザインで、(1) ディレクトリの走査、(2) ファイルの閲覧、(3) ファイル作成/アップロード (4) フォルダ作成 (5) ファイル編集 などの基本的な機能が備わっています。 ログイン画面 ディレクトリの中身（ディレクトリ・ファイル）をカッコよく表示 ファイル名を入力してファイル作成 フォルダの作成 フォルダの削除、リネーム可能 ファイル内容編集 簡単なファイル書き換えや管理がブラウザベースで出来ればいいだけの場合、ファイル1個で簡単設置が出来るので便利そうです Download - OneFileCMS
そのまま使えるウェブサイトテンプレートのPhotoshopファイル４０種類:phpspot開発日誌
そのまま使えるウェブサイトテンプレートのPhotoshopファイルが４０種類まとまっているエントリのご紹介。 ハイクオリティなウェブサイト用のテンプレートがPhotoshopのレイヤー付きでＤＬ可能です。 ダウンロードしたPhotoshopファイルは以下のようにちゃんとレイヤーに分かれてるので、変更して独自に修正することも可能です。 実際のデザインは以下。どれもかなり力の入っているもので素晴らしい限りです。 リンク先は以下のエントリを参照してください。 40 Free PSD Website Templates - slodive 関連： フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集
「やる気」を上げる方法の良記事色々まとめ:phpspot開発日誌
どんなギークや、頭の回転が速い人であっても、やる気がないと生産性は高まらず、やる気がある人と仕事のレベルが同等か、それ以下になることも周りを見ていて感じます。 やる気を管理できれば、出来る人はより生産性を大きく上げられ、現時点であまり出来ない人でもやる気さえあればどんどんレベルを上げていけそうです。 というわけで、最近人気の「やる気」を上げる方法の良記事を色々とまとめてみました。 「充実感」を感じやすい人、できない人：日経ビジネスオンライン のめりこみ・没頭の科学。フロー理論について。 ゲームはフロー状態を発生させる効果的な装置。同じように仕組みを作って仕事に適用すれば生産性はあがりそうです。 【1】「脳とやる気」1秒で勉強意欲に火がつく法 | 達人のテクニック 脳科学からみるやる気の管理方法。 まずウォーキングや雑用などで準備運動からはじめて徐々にやる気を上げていく科学的な方法について解
MySQLの管理に役立ちそうな超多機能モニターツール「MONyog」:phpspot開発日誌
MySQL GUI Tools. MySQL Monitor and Manager MySQLの管理に役立ちそうな超多機能モニターツール「MONyog」が結構便利そうです。 WindowsやLinux上で動作するブラウザベースのツールです。 以下に、一部ですがそのフィーチャーについて紹介。 サーバごとのデータ、インデックスサイズが一覧できる データベースごとのサイズ、インデックスサイズなどをグラフで表示 クエリーアナライザー。クエリの統計が見れます。SQLごとの平均、最大実行時間などが分かりやすい どんなクエリが何回呼ばれたかといった統計 接続履歴、トレンド レプリケーションのステータス表示 プロセスリスト ダッシュボード Monyogの更なるスクリーンショットはこちら こちらにMonyogのドキュメントがあるので参考にしてください。 $99 〜のツールになりますが、これだけ多機能で、管
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」:phpspot開発日誌
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」 2009年05月28日- jQuery Ribbon - Home これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」。 利用すれば、コントロールのグルーピングや、ドロップダウンメニュー、階層リストなどのリッチなコンポーネントが実装できるみたい。 jQuery Ribbonを使ったリッチなＵＩ。Windows7っぽいデザインのＵＩがJavaScriptで。 アイコン付きのかっこいいメニュー 表示しているＵＩのテーマを選べる アイコンつきリスト アイテムのグルーピング ドロップダウンメニュー ちょっとこれは素晴らしいですね・・・。jQueryの優位性がますます高くなってしまいましたね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォーム要素をクールにするためのjQueryプラグイン集:phpspot開発日誌