IBM DeveloperIBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.
デスクトップからドラッグされたファイルをjavascriptで扱う【html5】
html5ではFileApi が用意されています。 これを使うとファイル情報をjavascript で操作できます。 今回はデスクトップからドラッグドロップでファイルを選択し、サーバに保存といった流れをやってみます。 グーグルクロムでしか動きません【2011年7月31日現在】 今回のデモ (※要クロム) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>fileAPI サンプル - html5</title> <script src="js/file_api.js"></script> </head> <body> <p>画像ファイルを下にドロップしてください</p> <form action="send.php" method="post"> <img src="images/first_
PhantomJSを使ってWebSocketの開発を行う - スコトプリゴニエフスク通信
「Webアプリケーションの開発はEmacs(emacs-nox)で行うべき」というは幼稚園児でも知っている常識だが、JavaScript中心のアプリケーションではどうしてもフォーカスがブラウザに行ってしまう。そこで、PhantomJSを使えばターミナルから離れる必要がなくなり、生産性が格段に上がるのではないかと考えた。当方の環境はUbuntu 11.04。PhantomJSのインストールは難しくない。Ubuntuの場合、ここに書いておるとおり、 $ sudo apt-get install libqt4-dev libqtwebkit-dev qt4-qmake $ wget http://phantomjs.googlecode.com/files/phantomjs-1.2.0-source.zip $ unzip phantomjs-1.2.0-source.zip $ cd pha
JavaScriptを使ったクライアントサイドのテキスト差分表示ライブラリ·Pretty Diff MOONGIFT
Pretty DiffはJavaScriptでテキストの差分を表示するライブラリ。 Pretty DiffはJavaScript製のフリーウェア（ソースコードは公開されている）。人は間違うものだ。現実世界では一度破壊してしまったものを復元するのは難しい。だがデジタルの世界であれば、バックアップを使ったり履歴管理をしておくことで以前の状態に戻すことができる。 差分表示 最近のサービスでは履歴管理が次々に取り入れられている。Dropbox、WordPress、Wikiエンジンなど様々だ。そんな履歴管理された内容をグラフィカルにチェックできるのがPretty Diffだ。 Pretty DiffはWebベースの差分表示ライブラリだ。JavaScriptやCSS、各種言語に対応する他、CSVの差分表示もできる（ただしCSVは各項目ごとに改行されて表示される）。差分表示はインライン、またはサイドバイ
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
Closure Library & HTML5 Presentation
Closure Library & HTML5 自己紹介 伊藤千光（いとう ちひろ） @webos_goodies http://webos-goodies.jp フリーで Web 開発やってます Gadgets API Expert Closure Library 本書きました→ Agenda Closure Library について Closure Library 入門 Closure Library の HTML5 関連機能 Closure Library について Closure Libraryの特徴 Googleの主要なプロダクトで利用されている 豊富なUIコンポーネント どうでもいいよね Closure Library のアイデンティティ GoogleのJavaScript開発ノウハウの結集 量より質の改善 体系化された構造 メンテナンス性の向上 大規模開発への対応 実行効率を
Closure Library 超入門 〜データソース編〜 - present
はじめに .NET 歴が長いので、データソースと聞くとデータバインドを連想してしまいます。でも残念ながら、Closure Library の UI フレームワークはデータバインドを提供していません。今後に期待。 Google Closure のデータソース機能は goog.ds 名前空間で提供されていて、 データソース データマネージャー エクスプレッション という3つの要素で構成されています。 データソース データソースを使えば、JavaScript オブジェクトも JSON も XML も同じ方法でアクセス可能。データソースの種類は JsDataSource の他にも XmlDataSource や JsonDataSource などがあります。よく使うのはおそらく JsDataSource。 ノードを取得して値の取得または設定、というのが操作の基本。ノードにはオブジェクトだけでなく配
present
特に気になった点をメモ。 ジェリーは「⚪︎⚪︎をなくしたい」という、いわゆる「回避目標」を目指しています。 「もし仮にストレスがなくなったら、ストレスの代わりに何が得られると思いますか？」 「休養です。頭を休められます。プロジェクトの企画や何やらがなくなって、落ち着きを取り戻せます。ストレスなしに、みんなで和気あいあいと仕事をする余裕が生まれます。」 (...中略...) 対話の初めの段階では、ジェリーは自分が何を避けたいかをより明確に意識していましたが、途中で焦点は何を望んでいるかに移っています。これを「接近目標」といいます。 「いやなこと、やりたくないことを徹底的に話す」に通じるものがある。いやなこと・やりたくないことが無くなったらどうなるか、という風に話をもっていけばいいんだろうか。 コーチングの対話における聴き手の役目は、「この人はどんなロジックに則って生きているのだろう？」と探索
グーグル、Google Apps ScriptのGUIビルダー発表。統合開発環境のクラウド化が進む
グーグルは、Google Appsのプログラミング言語「Google Apps Script」に、ドラッグ＆ドロップでユーザーインターフェイスを自由に構築できる「GUI Builder」機能を追加したと、Google I/O 2011のセッション「Developing Apps, Add Ins and More with Google Apps Script」で明らかにしました。 GUI Builderは無料でGoogleドキュメントを利用しているユーザーでも利用可能になっています。Googleドキュメントから任意のスプレッドシートを開き、［ツール］メニューから［スクリプトエディタ］を選択。起動したスクリプトエディタの［ファイル］メニューの［ユーザーインターフェイスを構築…」を選択すると、GUI Builderが起動します。 左側のオブジェクト一覧から、ボタンやラベル、テキストボックス、
PHPとJavaScriptでHTTPストリーミングする話(Transfer-Encoding: chunked編) - id:anatooのブログ
HTTPレスポンスをajaxでストリーミング的に受け取りたいとき、要するにHTTPストリーミングをしたい時には、Transfer-Encoding: chunkedなレスポンスを生成してやるとよい。こうするとAjaxではHTTPレスポンス全体を受け取るのを待たずに、レスポンスの中身にアクセスすることが出来るようになる。従って、一つのHTTPコネクションでサーバ側から任意のデータを好きなタイミングでプッシュすることが出来る。 コード 一秒ごとに生成されるJSONをストリーム的に受け取るデモのコードが以下。 <?php // push.php function output_chunk($chunk) { echo sprintf("%x\r\n", strlen($chunk)); echo $chunk . "\r\n"; } header("Content-type: applicati
JavaScriptのいろいろなコーディングルールをまとめてみた
JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合) 有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました JavaScript style guide – MDC Docs Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。 多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。 jscsにこのコーディングルールをチェックするプリセットが用意されています。 Google JavaScript Style Guide Google JavaScript Style Guide 和訳 — Goo
jQuery UI でダイアログ表示 - Pyro Memo
別の記事でも書いたけど、個人で開発しているWebアプリでは、だいたいjQuery UIを使用してる。 今回はその中でもよく利用しているdialogの使い方をまとめておく。dialog機能を使うと、割と簡単にエラーダイアログやフォーム表示用のサブウィンドウを作成することができる。http://jqueryui.com/demos/dialog/ 僕の使い方としては、あらかじめ使用するダイアログやサブウィンドウをHTML内に非表示で埋め込んでおき、必要な時にダイアログとして表示する、という方法をとっている。1つのファイルにまとまってると、本体のHTML、ダイアログ、サブウィンドウを区別なく編集できるので結構楽だと思う。 OKダイアログ（通知やエラー表示用）、確認ダイアログ、フォームダイアログをそれぞれ表示できるサンプルを書いておく。よく使うOKダイアログや確認ダイアログは関数化しておくと便利。
Javascriptの開発手法について社内でプレゼンしました — Aduca
About this Entry Javascriptの開発手法について社内でプレゼンしました was posted on 5月 18th, 2011 at 1.23pm and is filed under Programming. This entry has no comments (yet). You can follow any responses through the RSS 2.0 Feed. Recent Post Javascriptの開発手法について社内でプレゼンしました Javascriptが難しくてわからないので誰か教えてください Nerineを作り直したい話 新宿にて配信の記録 機材購入 Category livestream non-category Programming thinking Meta ログイン 投稿の RSS コメントの RSS Wor
Any+Time DatePicker/TimePicker AJAX Calendar Widget - HTML5, AJAX, JSON and XML Consulting and Training by Andrew M. Andrews III (SM)
Commercial use is now permitted under a JS Foundation-style (MIT-style) license! Download Sexy is OVER-RATED. Let's try USER-FRIENDLY. It seems like there's a million calendar and clock widgets out there, and when you look past the eye-candy, they all have one thing in common: they're tedious at best. At worst, counter-intuitive. Sure, a picker that uses sliders or spinners, or looks like an analo
[jQuery]日付・時刻のフォーマット・整合性をチェックするプラグインを作ったよ » TECH Matari
申し訳ございません。 只今メンテナンス中です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Welcome to nginx!
IBM Developer
Home - Mgallery-JQ
d3.js - Data-Driven Documents
Lucian Slatineanu :: Think. Design. Make.
