Ajaxライクに非同期でファイルをアップロードできるjQueryプラグインつくりました。 同様のプラグインやライブラリはいくつかありますが、Flashを使用しないシンプルな実装で jQueryのスタイルを踏襲しているものがなかった（要は好みじゃなかった）ので再実装しました。 デモ ダウンロード サンプル ファイルの選択と同時にそのファイルをアップロードする場合は下記のようになります。 $('input[type=file]').change(function() { $(this).upload('/action/to/upload', function(res) { // アップロード完了時の処理 }, 'json'); }); upload(url, [data], [callback], [type]) url: アップロード先のURL data: 追加で送信するパラメータ call

JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath

jOpenSocialを試しつつjQuery事始めを目的としてmixiアプリを作成しました。 何を作ったかというと、うちで飼っている十姉妹のこいつのアテレコする、というとても個人的なアプリです。出来上がった画面がこちら。 言いたいことも言えないこんな世の中で、心に秘めた叫びをこの小鳥に言わせようというアプリです。機能はこんな感じ。 -入力したメッセージを女子高生風のフォントにした画像にして小鳥の画像に重ねて表示 -メッセージの画像と小鳥の画像を重ね合わせた画像をダウンロード -メッセージを音声に変換して再生 ** 画像の重ね合わせイメージ ** アプリの概要図 今回のアプリの概要はこんな感じです。 + javascriptライブラリを読み込む + jOpenSocialを使いOpenSocialコンテナとやりとり + 外部APIを使ってメッセージを画像(base64)に変換 + swfにメ

JavaScriptを用いて、ローカルで使うちょっとしたツールが書けたら便利だろうなあと思ったことはありませんか？ 本稿ではJavaScript向けのwxWidget実装である「wxJavaScript」というライブラリおよびJavaScript実行環境を用いて、JavaScriptで作るちょっとしたデスクトップアプリの実装法について可能な限り多くの実装例を交えながら解説したいと思います。 はじめに JavaScriptを用いて、ローカルで使うちょっとしたツールが書けたら便利だろうなぁと思ったことはありませんか？ JavaScriptはオブジェクト指向、正規表現、匿名関数などをサポートする強力なスクリプト言語です。 しかし、その利用範囲はほぼウェブ開発に限定されています。 最近でこそ兄弟言語とも言えるActionScriptがAIRテクノロジの登場によってデスクトップ分野に進出しましたが、

JavaScriptの開発環境は、テキストエディタを除外すると、主にデバッガやインスペクタとしてWebブラウザに内蔵されているのものと、Webブラウザのアドオンになっているもの。そして単独のアプリケーションとして統合開発環境となっているものの3つに大別できるでしょう。 特にWebブラウザのアドオンは手軽かつ一般のプログラミングには十分な機能を備えたものが登場しており、よく使われているようです。 2008年6月に書かれた以下の記事が、現状でのWebブラウザに関するHTML/CSS/JavaScriptのデバッガの状況を捕らえています。 Webデバッガ最強はFirebugだが、ほかのブラウザでは... | エンタープライズ | マイコミジャーナル In-browser Development Tools: Firebug Still King （英語） では以下から、ツールごとに関連する記事を

最近ではライブラリも多数リリースされ、様々な所で使われている「Ajax」簡単に高度なエフェクトや動作が導入可能ですが、今日紹介する「20 More Excellent AJAX Effects You Should Know」はAjaxで実現するエフェクトをまとめたエントリーです。 GlassBox 様々なAjaxのサンプルが紹介されていますが、今日はその中からいくつか気になった物を紹介したいと思います。 詳しくは以下 ■LightWindow YouTubeに動画、画像、PDFファイルと様々なメディアに対応したライトボックスエフェクト。 ■Unobtrusive Table Actions テーブルの各ブロックにエフェクトを付与できるAjax。データを見せるページには便利に使えそうです。 ■iCarousel plugin イメージをスライダー形式で表現できるAjax。 ■Validat

これのこと。 AJAXサイトをスピード化するMXHR - huixingの日記 Digg the Blog » Blog Archive » DUI.Stream and MXHR どこにも解説が無かったので、詳しく読んだ。 上の記事から引用すると、「サーバーとクライアント間で、ただひとつだけのHTTPコネクションを開く。これによりサーバーがページのどのパーツを先行して読み込むかをコントロールすることが可能になり、ユーザーにとってはページ読み込みがほぼ一瞬で済むことを意味する。」という技術。XMLHttpRequest を使って複数のデータを受信する場合に効果がある。 まずデモから デモ1は10個のテキストをダウンロードして表示するもの。 デモ2は300個の画像をダウンロードして表示するもの。 どちらも左側 (MXHR 有効) が完了した後に右側 (MXHR 無効) を開始するので驚かない

最近はよくjQueryを使うのだが、他の人がどんな風に使っているかに興味がある。 もしあなたが同じように思っているならjQuerySTYLEが参考になるだろう。 このサイト、jQueryが使われているサイトのギャラリーである。 また、それぞれのサイトでjQueryのどの機能（Ajaxだとかナビゲーションだとか）が使われているかもアイコンで一目でわかるようになっている。自分の興味にあわせて覗いてみるといいだろう。 自分が使っているものを他の人がどう使っているか。そんなことに気づかせてくれるこうしたサイトはいいですね。

特定のテーマに関する情報を集めた、ポータル的なWebサイトを作りたい――。そんなとき、JavaScriptを使って、他のWebサイトのフィードから情報を得て、そのサイトの最新情報を表示できると便利です。 しかし、普通の方法ではできません。というのも、JavaScriptでフィードを読み込むのに使う「XMLHttpRequest」オブジェクトでは、セキュリティ上、異なるドメイン（クロスドメイン）とのやり取りが制限されているためです。そこで、「Google AJAX Feed API」を使いましょう。 Google AJAX Feed APIは、指定したフィードをGoogleのサーバー側で取得し、JSON（JavaScript Object Notation）と呼ばれるJavaScript専用のデータ形式に変換します。変換されたデータは、JSONP（JavaScript Object Nota

はじめに 最近は、ネットワーク上に存在するデータがますます増えており、その形式や場所もさまざまです。こうした傾向から、ビジュアル分析、つまりネット上のデータから必要な情報を抽出して一目で分かるように提示する機能が重要になっています。開発者の多くは、このようなデータを集めて分析し、ダッシュボード、レポート、グラフのようなフォームにまとめて公開する役割も担っています。その際に威力を発揮するのが、表現力の高い画像や図表です。 こうした新たな要求に応えるために、Google Visualization APIは、開発者がビジュアル分析を行う一元的な方法と、データをビジュアル化するほとんどの状況に対応できる豊富なグラフィックコンポーネントやグラフ作成コンポーネントを提供します。このAPIは、データ交換の仕様と一連のライブラリで構成されています。これらのライブラリを利用することで、開発者は、構造化され

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 「第二回」では、グレー文字入り入力欄という課題への解答例としました。 プログラムの設計といったものがどんなものなのか、その面白さが少しでも伝わっていれば幸いです。 とはいえ、動いてさえいればあとはどれも似たようなもので、あとはプログラマの自己満足の世界です。その中での創意工夫はプログラマに閉じた世界とはいえ、ポケットの中に広がった空ではないかと思っています。 前回の最後の問題の答えを示す前に一つ重要なことを忘れていました。 そうです、使ってもらう為にはライブラリ化が必要でした。 ＊ 三回目となるこの記事からは、皆さんお待ちかねの関数化・ライブラリ化といったプログラムを隠す手法を試していこうと思います。ロジックの複雑化や高機能化につ