event式autoKana.jsの紹介 - KAYAC Engineers' Blog
すでに若干乗り遅れてる感じもしますが、読み仮名の自動入力がはやっているようなので乗っかってみます。 サンプル （IE7,FF2,safari3.1で動作確認） お気づきの方もいるかもしれませんが、これまでの記事（１，２，３）はこのライブラリを作る過程で発見したことのまとめです。 で、このライブラリも結局は読み仮名の自動入力なんですが、今までのautoKana.jsと違ってsetInterval（or setTimeout）を使用していません。 ではどのようにして読みを取得しているかというと、IE,safariではkeyup、FFではtextイベントを使用してキー入力を取得し、その時点のひらがなから読みを認識しています。 この方法だとtimerをまわす必要がないのでブラウザの負担も軽く、高速でキーを入力されても取りこぼしもなく、イベント駆動なのでコードが短くなる等の利点があります。 ただ、o
書籍『Ajaxセキュリティ』に関する残念なお知らせ - ockeghem's blog
昨年の10月に刊行された書籍Ajaxセキュリティは，発刊直後に購入したが，しばらく積ん読になっていた。最近になって読み始めたのだが，いささかあきれる結果となった。HPの現役エンジニア2名の著作，一人は元SPI Dynamics社(WebInspectの開発元，HPが買収)出身，GIJOE氏の監訳ということで期待していたのだが，残念である。 残念だと思う主要な理由は，脆弱性への対策が十分に示されていないことだ。Ajaxであってもインジェクション系脆弱性が発生する可能性があること，むしろ従来型のWebアプリケーションよりもその可能性が広がることは説明されているが，肝心の対策が不十分だ。 本書第四章の後半には，対策として入力検査（バリデーション）が示されている。 4.6 適切な入力検査 4.7 リッチなユーザ入力のバリデーション しかし，入力検証だけでは，任意の文字入力を許す場合の対策はできない
Yahoo!地図API入門
Yahoo!地図APIはYahoo!地図Webサービスを使用してウェブページやブログに地図を利用したWebアプリケーションの作成するためのAPIです。単に地図を表示するだけではなくアイコンやポリゴンなどの表示の他、イベント処理を行うことも出来ます。 ここではYahoo!地図APIの使い方についてサンプルを作成しながら確認していきます。 関連サイト:Yahoo!デベロッパーネットワーク - Yahoo!地図 関連サイト:Yahoo!デベロッパーネットワーク - クレジット表示 地図の表示 地図の縮尺 地図の種類 測地系 アイコンと吹き出し コントロール ポリライン/ポリゴン 地図の移動 イベント処理
XMLHttpRequestでRefererをセットする - FAX
JavaScript 追記Firefox 3.0で確認したところエラーになった。 Firefox 2.0.0.13で確認しました。 var url = 'http://localhost:8080/index.html'; var referrer = 'http://www.hatena.ne.jp/'; var req = new XMLHttpRequest(); req.open('GET', url, true); req.onreadystatechange = function(){ // 1: 読み込み中 if(req.readyState == 1) req.setRequestHeader('Referer', referrer); // 4: 準備完了 if(req.readyState != 4) return; console.log(req.responseTe
二度押し防止の onsubmit で disable にするやつ :: Drk7jp
もう２年ほど前に話題になったアレなんですけど、今更ながらあるサービスでこの仕組みの導入を検討しています。 onsubmit で submit ボタンを disable にしてユーザビリティを良くする - naoyaのはてなダイアリー submit ボタン disable 技の罠 - naoyaのはてなダイアリー onsubmit で submit ボタンを < disable にしてユーザビリティを悪くするのはやめてください - のヮの うんこ♥ onsubmit で disable にするやつ - 鷹の島 onsubmit の disable 化ですが既に議論が終わっているように、onsubmit disable の実装方法として、 onsubmit イベント発生時に submit 要素を disable にして値をサーバへ渡すための hidden 要素を生成する方法 setTimeou
YUI2.5.0の新機能、Flickr風の複数ファイルアップローダをPHPで実装してみる:phpspot開発日誌
YUI2.5.0の新機能、Flickr風の複数ファイルアップローダをPHPで実装してみる 2008年02月25日- YUI 2.5.0 Released ? Big upgrades to DataTable, new Layout Manager, Flickr-style multi-file Uploader, and more Yahoo! User Interface Blog The YUI Team just released version 2.5.0 of the library. We’ve added six new components ? Layout Manager, Uploader (multi-file upload engine combining Flash and JavaScript), Resize Utility, ImageCropper,
スライドするUIを実現するiSlider.js
iAnime.jsのテスト用に作っていたスライドするUI。書いているうちにライブラリ化したくなったので、これもやはりMITライセンスとしてオープンソース化（Google Code iAnimejsよりダウンロード化）。たて・よこ・ななめ、自由にスライドさせることができることが特徴。"easein", "bounce"などのエフェクトも利用可能。 まずはごく基本的なカード型のUIで横にスライドするもの。 こんどは同じコンテンツを縦にスライドさせるもの。アコーディオンUIと呼ばれることもある。エフェクトに"bounce"を使っている点に注目。 軽いのでiPhone/iPod touchでもサクサクと動くのが特徴。
JavaScriptとAJAXでページ上のマウスの動きを録画・再生するデモ
ページ上で動かしたマウスの軌跡を記録し、再生することが可能になるJavaScriptやAJAXなどの組み合わせデモが公開されています。実際に試してみればわかりますが、記録している際には、特に記録されていると気づくような要素は全くありません。 応用としては、広告バナーのクリックについてアイトラッキング（目の動きを追う）の代わりに、マウスの移動する軌跡を記録して「マウストラッキング」が可能になったり、あるいはAJAXをフルに駆使したサイトにおけるユーザービリティの記録による操作の改善、あるいは各種スパイ行動などにも使えます。 実際のデモは以下から。 Record mouse movement using Javascript and AJAX http://pure.rednoize.com/movelogger/ 上記ページで四角いキューブの辺の周囲をマウスでなんどかぐるぐると回転させてみた
FirebugでPHPをデバッグするツールまとめ
こんにちは、亀本です。最近は体調がすこぶる絶不調です。季節の変わり目なので、皆さんも気をつけてください。 さて、ちょろちょろと話題に上ることの多いFirefoxを使ったPHPのデバッグ手法ですが、いくつか出てきたのでこの辺でサクッとまとめておこうかと思いました。 結果的に、だいぶ膨らみましたが。。。まとめ力ないなorz 1.Buggy クラス AJAX magazine というサイトで公開されていたサンプルスクリプトで、クラス１つだけの小さなライブラリです。 以前、PHPプロ！ニュースでもご紹介した方法です。 この方法は、PHPのエラーをハンドリングし、その内容をscriptタグに出力し、console.info()を用いてFirebugのコンソールに渡す、という仕組みです。そのため、Firebugは必須です。 記事掲載当時は、buggy.class.phpがダウンロードできたのでしょうか
サービス終了のお知らせ
平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
Yahoo!、JavaScriptライブラリー「YUI Version 2.3.1」をリリース
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 9月19日（米国時間）、米Yahoo!はYahoo! User Interface Library（以下YUI）の最新版である「YUI Version 2.3.1」をリリースした。YUIは、米Yahoo!が開発しているJavaScriptライブラリ。今回のリリースは、バージョン2.3.0のマイナーリリースという位置づけ。2.3.1では、12のバグフィックスがほどこされ、いくつかの重要なバグが取り除かれたとのことだ。 主な変更点は以下のとおり。 Dav Glassの深刻なパフォーマンスの問題を解消し、コンポーネントの至るところで改良がなされ、主要な性能改善をもたらしている。 完全なA-Gradeブラウザーサポート。 DataTable (
「拡張子ではなく、内容によってファイルを開くこと」の拡張子は Content-Type ではないことに注意 - 葉っぱ日記
少し前に JSONP が XSS を引き起こすかもしれないという点に関する興味深い記事を奥さんが書かれていました。 Kazuho@Cybozu Labs: JSONP - データ提供者側のセキュリティについて JSONP における Padding 部分(だけでなくJSON部分も。4/5追記)に攻撃者が HTML と解釈可能なスクリプトを注入することにより、JSONP なデータを直接 IE で開いた場合に HTML と解釈され XSS が発生する、という点について書かれています。 ここで、IE が JSONP を HTML と解釈する理由は以下の2点。 IEのよく知られた機能「拡張子ではなく、内容によってファイルを開くこと」により、内容が HTML っぽい場合には、Content-Type: text/javascript が無視され HTML として解釈される。 上述の設定が「無効」に設定
ウェブ閲覧者を攻撃者の手先に変えるツール--研究者が発表へ
無防備なウェブ閲覧者のPCを乗っ取ることなく利用する方法を、セキュリティ研究者が明らかにした。 これは「Jikto」と呼ばれるセキュリティツールを使うことで実現可能となる。Jiktoの開発者でウェブセキュリティ会社SPI Dynamicsの研究者Billy Hoffman氏によると、このツールはJavaScriptで書かれており、何も知らないウェブ閲覧者のPCにウェブサイトの脆弱性情報を収集させることができる。ウェブセキュリティ向上のためにJiktoを開発した同氏は今週後半、ワシントンD.C.で開催されるハッカーイベントShmooConでこのツールを公開する予定である。 Hoffman氏は「このツールはJavaScript悪用の影響範囲を劇的に変えるだろう。JiktoはあらゆるPCをかわいいドローンに変える。あなたのPCがウェブサイトを攻撃し始め、その成果はすべて私に差し出される」と述べた
最速インターフェース研究会 :: JavaScriptでDebugScreenを表示する
デモ、IEかFirefox http://la.ma.la/misc/js/debugscreen/ IEとFirefoxではwindow.onerrorを設定するとJavaScript全体のエラーを補足できます。さらに返値をtrueにすると標準のエラーダイアログを抑制できます。 簡単なサンプルはこんな感じ。 window.onerror = function(mes,file,num){ alert([ "file : " + file, "line : " + num, "message : " + mes ].join("\n")); return true; } あまり細かい情報を取得できるわけではないので、例外処理に使ったりはできないのですが、エラーメッセージを親切にしたりできるかもしれません。 そんなわけで、ファイル名と行番号わかるなら自分自身をXMLHttpRequestで受
20. PHPからJSON作成を扱う
近頃、データ形式のやりとりに「JSON」を使う場面が多くなってきています。 PHPのデータを簡単にJSON形式に変換するライブラリには、「PEAR::Services_JSON」「Zend/Json.php」「php-jsonモジュール」等があります。それらの簡単な使用方法を紹介します。 ●PEAR::Services_JSONの場合 現在このパッケージはPEARに正式登録されていません。 その為、pearコマンドではインストールすることができませんので、 以下のページよりダウンロードを行い、設置してください。 ダウンロード(http://mike.teczno.com/JSON.tar.gz) あとは、非常に簡単なコードでJSON形式のデータに変換することができます。 <?php require_once "JSON.php"; $arr = array( array( "name" =
忘れてはいけない超絶JavaScriptライブラリ「BlueShoes:JavaScript Collection」:phpspot開発日誌
BlueShoes: JavaScript Collection Get all the above components in one package. There is an example that uses most of the components.忘れてはいけない超絶JavaScriptライブラリ「BlueShoes:JavaScript Collection」。 既に紹介したと思っていたJavaScriptライブラリであるBlueShoesの紹介。 ご存知の方も多いと思いますが、知らない人も多いようですね。 ライブラリ、というより、リッチなコンポーネント集といったイメージで、次のような様々なコントロールが使えます。 WYSIWYGエディタ Excel風スプレッドシート ツリービュー スライダーコントロール 他にも下記の様々なリッチコンポーネントが使えます。 入力系コンポーネ
Ajax うきうき Watch 第15回 グーグル検索エンジンを特定ジャンル専用にカスタマイズしよう
Google Co-opは、GoogleのBETA版サービスです。インターネット上のリソースを検索する特定用途専用の検索エンジンを作成するための機能を提供します。といっても、よく分からないと思います。実は私もピンと来なかったので、取りあえず自分で1つカスタム検索エンジンを1つ作ってみました。作ってみると、あまりの面白さに驚かされました。 では、私が作ったカスタム検索エンジンを実例に、Google Co-opとは何かを見てみましょう。私が作ったのは、バンダイ・ナムコの家庭用ゲーム機対応のゲームであるACE COMBATシリーズ専用検索エンジンです。つまり、完全ではありませんが、このシリーズに関係ある情報だけに限定された結果を得ることができる検索エンジンです。 このような検索エンジンにどのような価値があるのでしょうか？ 例えば、ACE COMBAT 2で主人公が属する傭兵部隊の名前は「スカーフ
単体で使えるJavaScriptカラーピッカー「DHTML Color Picker」:phpspot開発日誌
ColorJack: DHTML Color Picker ColorJack Plugin’s main advantages are it’s simplicity. To give you an idea, let’s compare it to a similar (more popular) product named “ColourMod”… the javascript alone is 475% more bloated than ColorJack’s code. 単体で使えるJavaScriptカラーピッカー「DHTML Color Picker」。 prototype.js等の他ライブラリに依存しないので、単体で使えて軽いカラーピッカー用ライブラリとして使えそう。 関連エントリ
Visioのような図が書けるJavaScriptライブラリ「Open-jACOB Draw2D 」:phpspot開発日誌
Visioのような図が書けるJavaScriptライブラリ「Open-jACOB Draw2D 」 2006年11月26日- Open-jACOB Draw2D Create drawings and diagrams with the free Javascript library. The User interface allows interactive drawing by using your standard browser. No additional software; no third party plug ins. Just run it and use it. Visioのような図が書けるJavaScriptライブラリ「Open-jACOB Draw2D 」。 次のような図形描画機能を、ライブラリを使うことで自分のツールに組み込めるのが嬉しいところです。 描画した図形
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
米Yahoo!、開発中の新トップページに新たなUIライブラリを採用