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
JavaScript 内で無圧縮 ZIP を作って Data URI を生成するライブラリを作りました - IT戦記
ちょっと思うところあって JavaScript 内で、複数のファイル情報を作って Zip で固めて、 Data URI を生成するライブラリを作ってみました。 ソースは以下の zip.js です。 http://svn.coderepos.org/share/lang/javascript/Zip/ 使うには 以下の base64.js が必要です。 http://svn.coderepos.org/share/lang/javascript/Base64/trunk/ この base64.js は弾さんが作ったものです。 今回 Zip で使うように、ちょっとチューニングさせていただきました。 こんなことができます // zip オブジェクトを作る var zip = new Zip; // 文字列をファイルとして追加する zip.addString('Hello, world!!', '
JSON/XMLデータを簡単に編集する·JSON Editor MOONGIFT
Ajaxを使う上でよく使われるのがJSONやXML形式だ。最近では特に冗長性がなく、JavaScriptでそのまま使える分、JSONが好まれる傾向にある。しかしコンピュータ上は読みやすくとも、人向けのフォーマットとは言えそうにない。 例えばデバッグの際にJSONフォーマットをチェックする必要があった場合、その解析は非常に面倒だ。そこで使ってみたいのがJSON Editorだ。 JSON EditorはAdobe AIR製のフリーウェアで、JSONやXMLの内容をパースして表示、編集できるソフトウェアだ。 JSON Editorを使うと、出力されたJSONをそのまま貼付けてReadボタンを押せばテーブル形式に並べ替えて表示してくれる。これで階層がどれくらい深いのか、希望した通りにデータが並んでいるのかといった情報が簡単に分かるようになる。 多彩なショートカットキーがある 逆にデータを作成して
jQueryを速攻マスターしたい方におすすめの「jQuery Selectors」:phpspot開発日誌
Selectors jQueryのセレクタ関数を速攻マスターしたい方におすすめの「jQuery Selectors」。 jQueryでの$('code') とかって、最初は何を意味するか分かりませんね。 jQuery selectorsを使えば、ボタンを押すことで、指定したエレメントがハイライト＆アニメーション表示されます。 要素がハイライト。 これは便利です。 関連エントリ jQuery 関連記事まとめ jQueryでリッチなグリッドを実装「jqGrid」 ファイルツリー構造を表示するためのJS「jQuery File Tree」 jQueryを使ってパズルを作るjQueryプラグイン
JavaScriptによるCSSの操作 | 暴満館 ～The House of full Violence～
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する {#deleteRule} function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらな
JavaScript--単体テスト環境の選択肢 - builder by ZDNet Japan
ソフトウェアのテストは、ソフトウェア開発に不可欠な一面だが、（アプリケーション開発工程には関わらない）テスターの一群がアプリケーションが期待に沿うものになっているかを確かめる段階以外でも行われる。開発者も、単体テストで日常的な仕事の成果をテストすることによって、コードが期待通りのものであることを確かめていくことができる。この記事では、クライアントサイドのJavaScriptコードに対して単体テストを行う方法について説明する。 単体テストは、個々のソフトウェアコンポーネントやモジュールに対するテストだ。単体テストはテスターではなく開発者によって実施されるという点で、従来のテスト工程とは異なる。これは、単体テストにはコードの知識が必要とされるためだ。従来のテストは、もっと後の工程で、（個々に単体テストを行われた）すべてのモジュールが全体として動作するかどうかを確認するために行われる。 単体テス
タブ式のスライドウィジェットを簡単作成できるjS「jFlow」:phpspot開発日誌
jFlow 1.2 - The Ultra-lightweight Fluid Content Slider for jQuery | Keansphere jFlow is a widget to make your content slides. タブ式のスライドウィジェットを簡単作成できるjS「jFlow」 単なるタブＵＩではなく、ページの切り替えにスライドアニメーション機能を加えたというもの。 デモはかっこうわるいプレーンな感じですが、CSSでデザインすれば使えそうです。 利用にはjQueryが必要。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」 jQueryでクールにアニメーションするメニューを実装するチュートリアル
JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」:phpspot開発日誌
FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil... 次の記事 ≫：インターネット越しにWiiリモコンを操作できる「Wiimote-over-HTTP」 Dynamic Drive DHTML Scripts- Simple Tree Menu This is a unobtrusive Tree Menu script that turns any ordinary list (UL element) into a collapsible tree! JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」。 次のようなHTMLがあったとすると、 <ul id="treemenu2" class="treeview"> <li>Item 1</li> <li>Folder 1 <ul> <li>Su
画像にGoogleMapみたいにズームできる機能をつけるJS「shiftzoom.js」:phpspot開発日誌
shiftzoom.js (zoom and pan functionality) shiftzoom.js 1.0 allows you to add zoom and pan functionality to oversized images on your webpages.画像にGoogleMapみたいにズームできる機能をつけるJS「shiftzoom.js」 大きい画像をズームできるようにして詳細を見れるようにする場合に使えます。 画像左上の＋、−アイコンでズームします。 拡大時には右下に全体が現れて、どの部分を拡大しているかがわかります。 色々とアイデア次第で面白いことが出来そうですね。
Y コンビネータって何？ - IT戦記
このエントリの 親友へ。ブログを書こう。 - IT戦記 y がブログを始めたみたいなので、読んでみた。 で、最新のエントリを読んでみたら、 Y コンビネータというものについて書いてあったので、 Y Combinatorが凄すぎる！ - yuji1982の日記 Y コンビネータって何ってところから、自分でもいろいろ考えてみた。 結局なんなのかさっぱり分からなかったんですが、自分が考えたことをまとめておく まず、フィボナッチ数を求める fib を定義する var fib = function(n){ return (n <= 2) ? 1 : (arguments.callee(n-1) + arguments.callee(n-2)); }; fib(10); おお！ JS すげー！名前は n しか使ってねーよ！ めでたし、めでたし。。。。じゃなくて！ JS が素晴らし過ぎて話が終わってしま
Enjoy×Study - ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法。
昨日のエントリに引き続き、今度はスクロールバーで隠れている領域を含むサイズを取得するためのプロパティをまとめてみました。 Enjoy×Study - ブラウザの表示領域のサイズを取得する方法。 調査したのは、下記のプロパティです。 window.innerWidth window.innerHeight document.body.scrollWidth document.body.scrollHeight document.body.offsetWidth document.body.offsetHeight document.body.clientWidth document.body.clientHeight document.documentElement.scrollWidth document.documentElement.scrollHeight document.docu
Web 標準的な CSS の値変換方法（px → em など）（訂正あり） - IT戦記
はじめに W3C の仕様に CSS の値を変換が可能なオブジェクトが定義されていることに気がついたのでメモしておきます。 まず CSSStyleDeclaration オブジェクトを取得する 例えば、 var decl = element.style; または、 var decl = getComputedStyle(element, ''); http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration CSSStyleDeclaration オブジェクトから getPropertyCSSValue という関数を使って CSSValue オブジェクトを取得する var val = decl.getPropertyCSSValue('width') http://www.w3.org/TR/DOM-Level
JavaScript クロスブラウザに関するメモ - とみぞーノート
IEとFireFoxでのJavaScript(と言うか主にDOMまわり)の挙動の違いに関するメモ書き 1.ウィンドウ/ドキュメント関連 1.1 ドキュメントの幅,高さの取得 IE6 document.body.scrollWidth document.body.scrollHeight NN6,FireFox document.width document.height FireFox12ではdocument.width,heightはundefinedになる。 https://dev.mozilla.jp/2011/06/firefox6-backward-compatibility/ によると、このプロパティは標準化されなかったので、FireFox6以降で削除された模様。 かわりに、以下のようにしてサイズを取得できる。 parseInt(window.getComputedStyle(
Jemplate登場によるMVCアーキテクチャ進化の可能性 - Accept Things
2005年はAjaxが流行ました。AjaxによってWebアプリケーションの操作性が劇的によくなりました。しかしその一方で、Ajaxの登場によってWebアプリケーションのアーキテクチャに歪みが生じました。サーバーサイドのコードはMVCアーキテクチャによって綺麗に各層で役割分担ができていますが、クライアントサイドにおいてはそうではありません。現在多くのAjaxベースのアプリケーションでは、JavaScriptコードの中にロジックとHTMLコードを混在させるやり方でAjaxを実現しているため(恐らく)、メンテナンス性の低下を招いています。 そこで今回はこの問題を解決する新たな動きが最近見えてきたので紹介します。そして、新たに登場したJemplateによるMVCアーキテクチャの進化の可能性について考えてみます。 GoodPicの金子さんの予想 以前、GoodPicの金子さんが書かれた以下のエントリ
jQueryの魔法 - ［JavaScript］All About
JavaScript ガイド：高橋 登史朗 Ajaxなど、何かと最近騒がれているJavaScriptの最新情報とその活用方法を解説します。 掲示板 取材依頼 問合せ jQueryの魔法 1: jQueryの特徴 2: 魔法のメソッドチェーン 3: jQueryのダウンロード 4: 設置 jQueryの特徴 jQueryは、最近急速に人気を増してきているJavaScriptライブラリです。 短いコードで多くの処理を安全で簡単に実行できる優れたライブラリのひとつです。 jQueryは、きわめて簡潔な表現で多彩な機能を実現することに成功しています。 もし、DIVで"testClass"というクラス名のついた要素だけを選んで、文字色を赤にしようとしたら、 一般的なJavaScriptでは、いろいろな書き方はありますが、たとえば、次のような書き方になります。 <div
js-users.jp - 日本の JavaScript ユーザのためのハブサイト
YAPC::Asia 2008 で Michael Schwern は「SEO に有効な独自ドメインを取って、もっと Perl 初心者が集まりやすい nice な Perl の情報を集めたサイトを作れ！」といったそうです。そして「Perl-users.jp - 日本のPerlユーザのためのハブサイト」ができました。それにインスパイアされてas-users.jpも出来たらしい。 これは JavaScript も同じではないのか？ そう思って js-users.jp ドメインを取り、ここに js-users.jp を開始します。完全に as-users.jp にインスパイアされています。本当にありがとうございます。ノープランです。 イベント情報 ajax Experience http://ajaxexperience.techtarget.com/html/index.html 2008年
JavaScriptゲームの作り方
目次 この文書で書いたもの 何を作りたいのか ゲームの流れ 各画面説明 フィールド画面 戦闘画面 ゲームオーバー画面 ルール 主人公移動時ルール 戦闘時ルール ゲームオーバー時ルール どうやって作るか 言語の選択 プログラムの設計 コーディング&テスト キャンバスとなるＨＴＭＬを作ろう クラスの書き方 まずモデルクラスを作ろう ビュークラスを作ろう フィールドビュー 主人公状態ビュー ビュークラスのテスト 入力によってモデルが変化するようにしよう ルール適用しよう モードクラスを作ろう モードクラスとは キーマネージャーを作ろう ゲームモードクラスを作ろう 戦闘画面を作ろう ゲームオーバー画面を作ろう テスト 終了 デバッグ手法 あそぶ 評価 以前作ったランダムマップRPGをWebブラウザ上にベタ移植する webブラ
PHP＋ImageMagick＋JavaScriptで画像を切り抜くサンプル:phpspot開発日誌
Crop & Resize with JavaScript, PHP, and ImageMagick - Monday By Noon PHP＋ImageMagick＋JavaScriptで画像を切り抜くサンプル。 次のように、JavaScriptで領域指定→キリトリ→拡大が可能なサンプル →デモを見る １回アップロードしてしまった画像を再度加工して再利用したい場合に便利そうですね。 ダウンロードはこちら 関連エントリ 画像をサーバ側で好きなサイズにリサイズできるPHPスクリプト
C#やVBのプログラムをJavaScriptにできる「jsc」:phpspot開発日誌
jsc (c# to javascript) What if I could code in one great language and have it self-translate to other similar languages? C#やVBのプログラムをJavaScriptにできる「jsc」。 JavaScriptにすることでC#やVBのプログラムをブラウザで実行できるようになります。 JSCのページで、WarCraft2や、フリーセル、スペースインベーダーなど、多数デモが紹介されています。 どの程度変換がうまくいって使えるものかは分かりませんが、非常に興味をそそられますね。 関連エントリ PHPコードをEXEに変換してスタンドアロンアプリにする方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ingy dt Net / Jemplate-0.10 - search.cpan.org