メイキング「NERV極秘資料 - 電力使用状況」こと技術解説 - 甘味志向＠はてな
NERV極秘資料 - 電力使用状況 先日、東京電力の電力使用状況をエヴァンゲリオン風デザインで表示するWebサイトを作ったものが、あちこちで反響を頂きました。 ねとらぼ：「NERV専用監視装置」で東電の電力状況をチェック エヴァ風サイト登場 - ITmedia NEWS NERVの一員になったつもりで節電！ エヴァ風電力使用状況メーター | ギズモード・ジャパン Twitterでは16000以上ツイート頂けたようです。 http://topsy.com/kanmisikou.net/lab/power/ こちらの、はてなブックマーク週間ランキングでもIT・コンピュータカテゴリ2位を頂きました。ありがとうございます。 http://b.hatena.ne.jp/ranking/weekly/20110321/it これだけの反響を頂きましたし、せっかくなのでWebアプリを作る工程を解説します
AjaxなTODOリストをMySQL＋PHP＋jQueryで作成するデモとチュートリアル:phpspot開発日誌
AJAX-ed Todo List With PHP, MySQL & jQuery ? Tutorialzine AjaxなTODOリストをMySQL＋PHP＋jQueryで作成するデモとチュートリアルが公開されています。 プログラムのダウンロードも可能です。UIも次のようになかなかお洒落でシンプル 編集時はインラインでそのまま編集することが出来ます。 削除の際にはダイアログが次のように現れて削除の確認を行います。 なんらかのプログラムのベースとして使えそうですね。 入門としてもなかなか、やりごたえのあるチュートリアルではないでしょうか。 関連エントリ PHPとjQueryのAjax連携の学習用チュートリアル PHPによってCSSを動的に出力する初心者向けチュートリアル Ajax/CSS/PHP等のチュートリアルまとめ
PHPとjQueryで作るAjaxなグループチャットスクリプト:phpspot開発日誌
Chat2: Group Chat Room with PHP, jQuery, and a Text File | CSS-Tricks PHPとjQueryで作るAjaxなグループチャットスクリプト作成のチュートリアルとデモプログラムがそのままダウンロード出来るエントリのご紹介。 クールなajaxチャットルームを設置したい、という方は参考にできそうです（ちゃんと使いたい方は中身のコードを一応チェックした方がよいと思います） チャットはAjax形式でなかなか軽快に動作します。UIもいい感じです。 関連エントリ PHP+Ajaxなチャットスクリプト：YShout Ajax+PHPなチャット: Shoutbox
Ajax 通信を JSON でシンプルに実装するデモ | バシャログ。
Ajax といえば、最近の地図サービスはだいたいドラッグするとページを読み替えることなく移動することができて、便利というか、当たり前のものとして受け入れられるようになったと思います。 さて、そんな Ajax でサーバとやりとりする方法なんですが、JSON という表記形式を利用すると、最低限の通信だけならシンプルに実装できます。本日は、JavaScript ライブラリの jQuery と PHP ( 5.2.0 以上、または PECL で json をインストール ) を使い、データのやりとりに JSON を使う方法を紹介します。ソースコード部分だけなら JavaScript と PHP で10行程度ですので、興味のある方はぜひお試しください。 サーバからプロフィールデータを受け取ってリストで表示するデモです。Firebug等で通信内容をチェックしてみてください。 JSON demo サーバ
画面内に付箋を貼るようなUIの掲示板を作れるPHP＆jQueryなサンプルプログラム:phpspot開発日誌
AJAX-enabled Sticky Notes With PHP & jQuery ? Tutorialzine 画面内に付箋を貼るようなUIの掲示板を作れるPHP＆jQueryなサンプルプログラムが公開されています。 動くサンプルは次のようになっていて、画面にぺたぺたはったような面白いものになっています。サンプルプログラムだけではなく、チュートリアルも公開されています。 デモページ z-indexを調整して、クリックしたものが最前面にくるようになってます。 ノートの追加をする場合のUIもいい感じで、LightBox風の画面があらわれて、色を選べるようになってます。 ちょっとした連絡用に設置したりすると面白いかもしれませんね。
jQueryで実装する進捗グラフ付き複数ファイルアップローダー:phpspot開発日誌
Multiple File Upload With Progress Bar Using jQuery jQueryで実装する進捗グラフ付き複数ファイルアップローダー。 次のようなマルチファイルアップローダーが実装できるjQuery＋PHPなソースが公開されています。 アップロード部分には swfupload を使っているみたい。 サイトではjQueryを使っていて、こういう機能を実装したいという場合に覚えておくと使えるかも。 関連エントリ jQueryでチェックボックスをすごい形にカッコよくしちゃう方法 jQueryでリアルタイムにCSSを書き換えるサンプル jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごい ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集
PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」:phpspot開発日誌
Web-kreation - LightForm ::: Free Ajax/PHP Contact Form PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」。 クールなフォームのＵＩに加えて、入力値がおかしい場合のリアルタイムエラー表示を行ってくれるPHPとAjaxのプログラムが入手できます。 UIがクールなフォームになってます 入力チェックの機能。 たとえば、名前を１文字入力して次にいくと、最低で３文字必要だというエラーが次のように表示されます。 メールアドレスが間違っている場合もちゃんとチェックしてくれます メンテナンスされていない点には注意ですが、なかなか使えるプログラムなので改変してサイト構築に活用すれば手間を大幅に削減できそうです。 関連エントリ JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform
PHPとjQueryで動く軽快で使いやすいTODOアプリ「myTinyTodo」:phpspot開発日誌
myTinyTodo homepage PHPとjQueryで動く軽快で使いやすいTODOアプリ「myTinyTodo」。 次のようなＵＩで、「Add」ボタンを押せばajaxで画面遷移なしにＴＯＤＯを追加できます。 ちょっとした自分用のTODOリストを構築したい場合にサクッと設置できて便利そうです。 チェックボックスにチェックを入れると、線が引かれ、終わったことが分かりやすくなっています。 更に、上図で「はやくおわらせる」と書いてあるような、TODOに対するノート機能なんかもついています。 関連エントリ 1ファイルのみでDB不要のTODO管理ツール「Todo.php」 RememberTheMilkと同期するiPhoneアプリ「Appigo Todo」 PHP+Ajaxな快速TODOツール ターミナルでTODO管理する:todo.sh タイマーで時間を計れるTODOツール『SlimTime
jQueryでAjaxファイルアップロードするためのライブラリ:phpspot開発日誌
Ajax file upload with jquery - valums.com jQueryでAjaxファイルアップロードするためのライブラリ。 次のようなアップローダーを実装できます。 必要なファイルを読み込んだ後、次のようなスクリプトでアップローダーを初期化します。 なかなかわかりやすい使い方になっていますね。 $(document).ready(function(){ $.ajax_upload('#div_id', { // Location of the server-side upload script action: 'upload.php', // File upload name name: 'userfile', // Additional data to send data: { key1 : 'value', key2 : 'value2' }, // Fire
Ajax » jQuery plugin » フォーム要素の制御 | PHP & JavaScript Room
テキスト入力欄に日付、電話番号、郵便番号など指定したフォーマットで入力させるように入力制御を行うjQueryプラグイン。 設置イメージ Maked Input Pluginの設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-L
PHPでRSSリーダーコンテンツを作る方法 – creamu
PHPでさくっとRSSをparseしたい。 そんなときにおすすめなのが、『How to Read an RSS Feed With PHP – screencast』。NETTUTSによる、PHPでRSSリーダーコンテンツを作る方法だ。 このエントリーでは、↑のようなタブで切り替えてRSSを読み込む方法が紹介されている。 タブの切り替えにはjQueryを使っていて、フェードインしながら切り替わる。ページのロードがないのが気持ちいい。 詳細まで解説されているので、参考にして実装してみてはいかがだろうか。 » How to Read an RSS Feed With PHP – screencast いろいろと本を読み終わった。「ジャパニーズ・ドリーム」は数年ぶりにもう一度読んだ。前よりも深く読めてたくさん得るものがありましたね。 「成功のコンセプト」の装丁は佐藤可士和さんによるものですね。ビ
[PHP]ファイルをアップロードするだけで設置できる画像ギャラリー
Script & Styleのエントリーから、画像ファイルをアップロードするだけで設置できる画像ギャラリーのスクリプトを紹介します。 Automatically Generate a Photo Gallery デモ アップロードする画像は、大きい画像とそのサムネイル画像の２つが必要で、ファイルの名前は下記のように「-thumb」を付加します。 大きい画像のファイル名 IMG_0813.jpg サムネイル画像のファイル名 IMG_0813-thumb.jpg サムネイル画像のサイズは特に指定はありませんが、同じサイズのものが最適です。 デモでは、100x100となっています。 また、HTML, CSSを修正することで、画像ギャラリーのインターフェイスを好みのデザインに変更することができます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://indigonote.com/2011/09/14/original-like-button/
http://blog.caraldo.net/2011/01/jqueryphpajax.php
http://blog.crara.cc/archives/630
http://blog.caraldo.net/2010/01/jqueryphp.php
http://e0166nt.com/blog-entry-587.html
http://moto-mono.net/2009/02/05/jqueryvalidationjs-with-ajaxusernamecheck.html
caraldo.net - it転職 リソースおよび情報
jQueryとPHPでダイナミックな投票スクリプトを作成:phpspot開発日誌