HTML5ベースのオープンソースなマインドマップ作成ツール「mindmaps」:phpspot開発日誌
mindmaps HTML5ベースのオープンソースなマインドマップ作成ツール「mindmaps」 マインドマップツールも色々ありますが、HTML5ベースで、インタフェースも結構イケてるツールの紹介。ソースのダウンロードも可能です。 項目をマウスオーバーすると赤い丸が出るのでそれをドラッグ＆ドロップでツリーをどんどん広げていけるインタフェースも使いやすいです。 マウスホイールでマインドマップ自体の拡大・縮小が可能で、細かいところにも配慮がされています。 Chromeであればサクサク動いて、本来の目的である思考に集中することができるでしょう。 ツリーの折りたたみなんかもできちゃいます。 ソースはこちらのgithubにてダウンロード可能
サーバ上で動いてるどのphpが重いか？を調べられる「phptop」:phpspot開発日誌
サーバ上で動いてるどのphpが重いか？を調べられる「PhpTop」。 「サーバ監視に超使える〜topコマンドのまとめ」というエントリで様々なtopコマンドを紹介したのですが、phptopなるものを新たに発見したのでご紹介。 具体的に出来ることは、今サーバで動いているものを指定した期間で、もっともアクセスが多いphp、CPUを多く消費しているphp、メモリを多く使っているphpといったものを降順にソートできるというものです。 サーバ上で多くのphpが動いており、どうも負荷が高いけどどれが重いのかよくわからないという場合に使えます。 top コマンドでは httpd が動いてるぐらいしか分からないので phper な方で負荷にお悩みの方は使ってみるのもよいかも。 たとえば、 $ phptop -t 15 -s mem のように実行すると、15分以内で、メモリを多く使っている順にソートが可能。
サーバ監視に超使える〜topコマンドのまとめ:phpspot開発日誌
サーバ監視に超使える〜topコマンドのまとめ サーバを運用しているとよく使うtopコマンドですが、標準のtop以外にも色々便利なものがあるのでまとめてみました。 ボトルネックといえば、ネットワーク、ディスクIO、スワップ、CPU、メモリといったものが関連しますが、ツールで視覚化することでより分かりやすい対策がとれますね。 htop こちらも、通常のtopよりもさらに多数の情報を表示してくれるツール。 CPUやメモリの状態が視覚的にグラフで表示されていたり、複数CPUがある場合もそれぞれに利用率を表示してくれてわかりやすいです。 pstreeで表示するようなツリー+topコマンドのような表示も t を押せば切り替えられます。 公式サイト上にある128コア積んだマシンのhtop結果が面白い。 次のようにすべてグラフで表示されているため、128コアあったとしても瞬時に負荷が把握できますね。 io
１ファイルで設置が簡単で使いやすそうなMySQL/PostgreSQL管理ツール「DBKiss」:phpspot開発日誌
１ファイルで設置が簡単で使いやすそうなMySQL/PostgreSQL管理ツール「DBKiss」 2010年11月26日- DBKiss - php database browser (mysql, postgresql) １ファイルで設置が簡単で使いやすそうなMySQL/PostgreSQL管理ツール「DBKiss」。 phpMyAdminは便利だけどファイルがやたら多くて設置しづらい、そんなに高機能は必要ないんだけど、という方にはいいかもしれないツールが公開されています。 基本的な機能は盛り込まれているようなので試してみてもいいかも。 専用サーバを使っている方は別として、レンタルサーバ等でFTP転送する場合も１ファイルなのでサクッと転送して設置できるのは便利そう。 関連エントリ １ファイルで動作する設置が超簡単なphpMyAdmin「Adminer」 phpMyAdminの簡易版「ph
フリーの(X)HTML/CSSテンプレート５０:phpspot開発日誌
50 Free CSS/(X)HTML Templates - Noupe Design Blog フリーの(X)HTML/CSSテンプレートが沢山まとまったエントリが沢山ありましたのでご紹介。 先日も似たようなものを紹介しましたが、本日も便利そうなエントリを発見しました。 HTML5 and CSS3 Ornare iPhone App StudioClick Darkness MYportfolio 全部見る こんなものをフリーで提供してくれる方々の仕事している姿を想像すると涙が出そうになります。 関連エントリ ハイセンスにデザインされたHTML/CSSテンプレート集 ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０ クールなデザイン満載のXHTML/CSSテンプレート４０種 フリーのCSS/HTMLテンプレートいろいろ2010
いい感じのフリーのWEBサイトレイアウト用Photoshopテンプレート１５:phpspot開発日誌
15 Free PSD Website Templates いい感じのフリーのWEBサイトレイアウト用Photoshopテンプレート１５がまとまっています。 それぞれインパクトのあるデザインになっていて使えそうです。 ほんとにフリーでいいの？というクオリティですが、こうしたものがフリーである以上、WEBデザイナー専業でやっている人は何か付加価値をクライアントに提供していくためのスキルを身につけておきたいですね。 関連エントリ WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 そのまま使えるWEBレイアウトのPhotoshopテンプレート40 かなりクールなフリーのWEBサイトPhotoshopテンプレート「BlueMasters」 無料で使える綺麗なWEBサイトPhotoshopテンプレート
Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」:phpspot開発日誌
jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-
HTMLで書けるパワポ風プレゼンテーション実装jQueryプラグイン「Slippy」:phpspot開発日誌
Introducing Slippy - HTML Presentations - Jordi Boggiano HTMLで書けるパワポ風プレゼンテーション実装jQueryプラグイン「Slippy」。 次のような、左右キーでページ送りが出来るプレゼンテーションをHTMLベースで書いて簡単に構築できるプラグインです。 ブラウザさえあれば、ビューワなしでどこでも再生できるプレゼンテーションを構築したい際に使えます。 プレゼンテーション内に出てくるコードのシンタックスハイライト機能がついているので、よりプログラマに使いやすいものになっているのも特徴。 更に、ハイライトされたJavaScriptコードをその場で実行したりなんていうことも出来ちゃいます。 ブラウザのサイズに併せてプレゼンテーションが縮小されるあたりもパワポ風になってますね。 jQuery Presentation というプラグインも
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 で文字列
ドラッグを必要とする様々なUI実装に使える「Dragdealer JS」:phpspot開発日誌
Dragdealer JS ドラッグを必要とする様々なUI実装に使える「Dragdealer JS」。 マウスを使ったドラッグ＆ドロップ操作というのは、スクロールバーや、スライダー等色々と存在しますが、そういった処理を一手に引き受けてくれるライブラリのご紹介です。 要素を動かした後のコールバック関数が指定できるので、ドラッグ＆ドロップ後の処理が自由に記述できてアイデア次第ではなかなか便利なUIが作れそうです。 横スライダー 縦スライダーで文字サイズを変更するサンプル 横スライダーで文字サイズを変更するサンプル ドラッグで移動させるスライドショー 予め用意されているUI実装をするのもよいですが、ドラッグ＆ドロップに関する新しいUIを思いついた場合にも参考にしてみるとよさそう。 関連エントリ IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」
PHP、Perl、Ruby、C、C++等40以上の言語をブラウザで実行できるようになるjQueryプラグイン「Run This」:phpspot開発日誌
PHP、Perl、Ruby、C、C++等40以上の言語をブラウザで実行できるようになるjQueryプラグイン「Run This」 2010年03月11日- Run This! PHP、Perl、Ruby、C、C++等40以上の言語をブラウザで実行できるようになるjQueryプラグイン「Run This」。 ブラウザ内の<pre>コードで記述した部分を、その場でそのまま動かすことができ、うまくサイトに組み込めばより訪問者にとってわかりやすいページを作ることが出来そうです。 例えば、PHPの入門サイトなんかでは挙動を一瞬で確認できてしまいます。 具体的には以下の言語に対応しています。 Ada, Assembler, AWK, Bash, bc, Brainf**k, C, C#, C++, CLIPS, Clojure, COBOL, Common Lisp, D, Erlang, Forth
JavaScriptを使って実現した面白サイト集:phpspot開発日誌
Mind-blowing JavaScript Experiments|INSIC DESIGNS JavaScriptを使って実現した面白サイト集。実用的かどうかという点では？ですが、JavaScript を使った面白いサンプルサイトが色々と紹介されていました。 JavaScript の可能性を知るという意味で一度見ておいた方がよいです。JavaScript が遅いブラウザだと固まってしまう恐れがあるので Chrome などで新しい窓で見た方がいいです。 Twitch 複数ウィンドウを駆使したゲームっぽいもので、新しい使い方に驚きます Ball ボールが飛び跳ねるサンプル。Flashかと思いましたが、Chromeで動かすとここまで高速に動くことに驚き Ball Pool 右クリックでボールが新しくあらわれてボールで埋め尽くされます。物理エンジンで制御されてるっぽくて触っていて面白い De
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
何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」:phpspot開発日誌
jTimepicker - Yet another jQuery time picker plugin. 何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」。 時計のアイコンを押すと次のような水平バーが現れてスライドさせることで、selectボックスの値が増加・減少するUIです。 標準のselect は縦方向に長くなりがちですが、このUIであれば横にスライドさせて比較的簡単に時間の入力が出来ますね。 必要なJavaScriptとCSSを読み込んだら、$('#timepicker').jtimepicker(); で初期化することが出来ます。 関連エントリ jQueryを使ったカレンダー型、日付入力補完ライブラリ 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン
キーボードでアイテムやページの送り・戻しを簡単に実装できてしまうJavaScriptライブラリ「Paging Keys」:phpspot開発日誌
キーボードでアイテムやページの送り・戻しを簡単に実装できてしまうJavaScriptライブラリ「Paging Keys」 2009年10月15日- キーボードでアイテムやページの送り・戻しを簡単に実装できてしまうJavaScriptライブラリ「Paging Keys」 GoogleReader や Livedoor Reader でも実装されている機能で、これをサイトに実装すると便利になるサイトは多いのではないでしょうか？ <script>タグでページに読み込むだけで使えるので使い方も簡単です。 実装できる機能としては、以下のようになっています Kキー：前のアイテムへ Jキー：次のアイテムへ Lキー：前のページへ Hキー：次のページへ Rキー：リロード １つのアイテムをどのように定義するかというと、paging_keys.js という配布ファイルに含まれている以下の nodeSelecto
jQuery開発に便利なエディタ上でF5実行などの機能がついたjQuery専用エディタ「jQueryPad」:phpspot開発日誌
jQuery開発に便利なエディタ上でF5実行などの機能がついたjQuery専用エディタ「jQueryPad」 2009年10月10日- Paul Stovell - jQueryPad jQuery開発に便利なエディタ上でF5実行などの機能がついたjQuery専用エディタ「jQueryPad」が公開されました。 起動してコードを書いてすぐ実行というステップが取れるのでjQuery開発の他、入門用途に非常に適しているように思います。 左側にHTMLを記述するエディタが存在します 右側にはjQueryを記述するコード。 div#hello に Hello World を入れるシンプルなコードになってます。 F5キーでプログラムを実行できるので実行してみると、下のペインに実行結果が出るというもの。 IE, Firefox, Chrome上で実行させることも可能。 但し、Firefox, Chro
jQueryでQueryStringをパースして配列で受け取れる便利関数:phpspot開発日誌
jQueryでQueryStringをパースして配列で受け取れる便利関数が公開されていました。 hogehoge?a=b&c=d&e=f の ? 以降のQueryStringを {"a":"b", "c":"d", "e":"f" } といった配列で簡単に受け取れます。 次のような関数によって実現しています。 function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = ha
JavaScriptでフォントの色をアニメーションさせるチュートリアル:phpspot開発日誌
JavaScriptでフォントの色をアニメーションさせるチュートリアル。 特定の文字をアニメーションさせるMooToolsのコードサンプルが公開されています。 ↓↓色がなめらかに変わる↓↓ ↓↓色々変わる↓↓ Flashを使わなくてもこうしたことが可能なのでお手軽に文字を目立たせることが出来ますね。 jQuery版とかもあったらいいですね。 チュートリアルは以下を参照 Flash colors effect with MooTools Framework.
最近公開のHTML5関連の参考サイト色々まとめ:phpspot開発日誌
最近公開のHTML5関連の参考サイト色々をまとめてみました。 チュートリアル〜チートシートまでをご紹介。 Coding A HTML 5 Layout From Scratch | How-To, Tutorials | Smashing Magazine ゼロからHTML5レイアウトを行うためのチュートリアル HTML 5 Reset Stylesheet | HTML5 Doctor HTML5用のCSSリセットスタイルシート How to build a desktop WYSIWYG editor with WebKit and HTML 5 - Ars Technica WebkitとHTML5を使ってWYSIWYGエディタを作成するチュートリアル HTML5 drag and drop in Firefox 3.5 ? 0xDECAFBAD Firefox3.5でHTML5のド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHubの情報を自サイト内に表示できるjQueryプラグイン「HubInfo」:phpspot開発日誌