フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
JavaScript ミニライブラリ
■ JavaScript ミニライブラリ ちょっと前から「なくても不便じゃないけど、あったらちょっと便利かもね」っていう JavaScript を書いたりして発表していましたが、一覧とか作ってないからどんなのがあるのかわかりにくかったのでまとめてみました。 onsubmit で disable 以外のスクリプトは全てパブリックドメインとするので、自由に使って下さい。onsubmit のやつはもともと自分が作ったものじゃないので良くわかんない(← 無責任)。 結構作ってるつもりだったけど、並べてみると意外と少ない。 onsubmit で disable にするやつ テキストフィールドのフォーカス時に背景色を変更する JavaScript フォームに入力を促すメッセージを出力する JavaScript パスワードの安全性を教えてくれる JavaScript カーソル位置のセルの上端と横端をハイ
テキストエリアとかリサイズ可能にする JavaScript
■ テキストエリアとかリサイズ可能にする JavaScript 好評の、読み込ませるだけシリーズ の6番目。 このスクリプトを読み込ませるだけで、ウェブ上にある TEXTAREA とかその他色々好きな要素がリサイズ可能なやつに大変身。とりあえずサンプル見るのが手っ取り早いです。 実際の動作サンプル テキストエリアの右下にマウスカーソルを持っていくとカーソル形状がかわるので、そのままドラッグするとサイズも変わります。 自分はグリモンスクリプトで快適なんですが、サービス提供側でこういう機能を提供してくれたら幸せな人が増えるんじゃね？とか思ったので作ってみました。 実際のリサイズ方法に関しては、愛用している Changing <textarea> Size のコードが大変参考になりました。ありがとうございます。 コードは次の通りです。 メイン部分。 var ElementResizer = {
Trac をインストールしてみたよ
Trac の解説書を書いたので、こちらもあわせてよろしくお願いします。 「入門Trac」と言う本を書きました プロジェクト管理システムの Trac を Debian/Sarge なサーバマシンに入れてみました。 どうせ一人で管理しているプロジェクトしかないので、最初は FlexySvn と言う XUL アプリな Subversion browser を入れようと思っていたのですが、PHP5 を要求しやがるので諦めました。PHP4 でも動くように頑張っているみたいなので、そっちを期待しましょう。 で、Trac とは「Wiki(情報共有)」と「BTS(バグ管理)」と「Subversion(ソースコード管理)のフロントエンド」が一体になったなんだか凄そうなシステムです。どう考えても一人で使うようなものではありませんが、セッティングマニアに何言っても無駄！ Debian では標準のパッケージが用意
Greasemonkey 用スクリプト
Greasemonkey は、WEBサイトの閲覧時に特定の JavaScript を自動的に実行するようにしてくれる Firefox 用の拡張です。 これを使うと、例えば全ての target=_blank を無効にしたり、2chの ime.nu リンクを無効にしたり、スクリプトを用意しさえすれば、どんな事でも可能になります。 既存のスクリプトに関しては、Firefox まとめサイト内のページ が詳しいです。 というわけで、私が作ったもの。 特に注意書きがない限りは、全てのスクリプトは BSD ライセンス です。 AccessCountBar (2006-12-27更新) ウェブブラウジングの履歴みたいなものを視覚的に表示する。 livedoorClipRelated (2006-10-03更新) livedoor clip にクリップ追加時にそのサイトの注目のクリップも一緒に表示する。 H
テキストフィールドのフォーカス時に背景色を変更する JavaScript
■ テキストフィールドのフォーカス時に背景色を変更する JavaScript 以下の JavaScript を読み込ませれば、フォームのテキストフィールドにフォーカスした時に、背景に色がつくようになります。今どのフィールドを選択しているのかが視覚的にわかるので便利。 mixi にこの機能がついていたんだけど、onfocus なんてのをいっぱい書いていて非効率的だと思ったので、読み込ませるだけで勝手に全部のフィールドに設定されるようなものを書いてみました。 window.onload = function() { var colorful = new ColorfulInput; colorful.set(); } function ColorfulInput() { this.skip = []; this.color = { 'blur': '', 'focus': '#EEEEEE'
特定のタブの幅を縮めるFirefox用拡張機能 * FaviconizeTab
インストールするとタブのコンテキストメニューに「FaviconizeTab」と言うのが追加されるので、それをクリックするとタブの幅が favicon のサイズまで小さくなります。もう一回 FaviconizeTab をクリックすると元に戻るっていう寸法。 faviconizetab-1.0.6.xpi Firefox Add-ons (English page is here) Source code repository (github) 過去のバージョンなど こんな感じ。 Google Calendar とか Remember the milk とか常駐しておきたいタブが増えてきたんだけど、常駐タブのせいでタブ幅が狭くなるのは癪なので作りました。こいつをインストールしておけばタブバーがすっきりして快適です。 ライセンスは MIT ライセンスを採用しているので、他の拡張への取り込みなど、
onsubmit で disable にするやつ
■ onsubmit で disable にするやつ onsubmit で submit ボタンを disable にしてユーザビリティを良くする フォームを送信した時に、submit ボタンを disabled にして二重送信を防ぎましょう、というのがナウなヤングにバカウケ？ そんでもって、ここに書いてあるやつ なら、そこの JavaScript を読み込ませるだけで、自動的に全てのフォームに対して設定が行なわれるので便利。中止ボタン対策もしてあってグッド。 ただ、Deer Park な Firefox で試した所、戻るボタンで戻った場合は disabled が解除されないし、中止ボタンでの復活も効かない様子。 なので、書き直してみました。 var DisableSubmit = { init: function() { this.addEvent(window, 'load', thi
フォームに入力を促すメッセージを出力する JavaScript
■ フォームに入力を促すメッセージを出力する JavaScript input type="text" なフォームに最初から「ここに入力して下さい」みたいなメッセージを薄い色で表示させておいて入力を促すようなのありますよね。なんか、あれを、現実逃避気味に書いたので。 function inputDefault(elm, msg) { this.elm = elm; this.msg = msg; this.color = '#999999'; this.bgColor = '#F9FFF9'; } inputDefault.prototype.set = function() { this._cleared = false; this._defColor = this.elm.style.color; this._defBGColor = this.elm.style.background
カーソル位置のセルの上端と横端をハイライトする JavaScript
■ カーソル位置のセルの上端と横端をハイライトする JavaScript 好評の、読み込ませるだけで動く JavaScript シリーズの5段目くらいです。このシリーズもたまってきたので、そのうちまとめます。 Excel とかの表計算ソフトって選択しているセルの列番号や行番号がハイライトされたりしてますよね？table タグ上であれと同じものを実現する JavaScript を書いてみました。 こんなようなテーブルを作らなくちゃいけない事になりそうなんだけど…。 実際には15×20くらいはあるので、チェックを入れる時にすごく使い辛そうですよね。なので、カーソルの位置がわかりやすくなるようにハイライト出来たら便利だろうと思ったんです。 実際の動作サンプル rowspan とか colspan を使って複雑にしていると、上端とか横端の位置を取得するのがやたらと面倒になってくるので、画面上のセル
はてなブックマークに追加する時に一緒に注目エントリも表示するよ、Greasemonkey で
■ はてなブックマークに追加する時に一緒に注目エントリも表示するよ、Greasemonkey で ※Greasemonkey は Firefox 用の拡張機能です。詳しくは Firefox まとめサイト で確認して下さい。 HatebRelated.user.js その他のスクリプト はてなブックマークにブックマークする時に、ブックマークしようとしているサイトの注目のエントリを一緒に表示します。こんな感じ。 ブックマーク大好きっ子にお勧め。 注目のエントリじゃなくて人気エントリを表示したい場合は17行目のsort=hotをsort=countに変更したりすればOK。後で はてなグリースモンキー に投稿してみようかなー。 → 掲載された ちなみにこのスクリプトはMITライセンスです。 ところで、この注目とか人気エントリって JSON は無かったよね？JSON 対応してれば、FEEDParse
Remember the Milk のショートカットキーを表示する Greasemonkey スクリプト
■ Remember the Milk のショートカットキーを表示する Greasemonkey スクリプト 最近 TODO は Remember the Milk だよねって事なので使っていましたら、@aka さんの所でキーボードショートカットの日本語訳が書いてあるのを発見しました。 Remember the Milk のショートカット・キー こんなとっても便利な機能があるなんて知らなかったよ！と思って、早速いつでも楽に確認出来るようにと Greasemonkey 化しました。 HTMLデータを丸パクリだったので、言おうか言うまいか悩んだんですが、やっぱり感謝の気持を伝えねばとコメントしたら、公開しちゃって良いよと暖かいお言葉を頂いたので、お言葉に甘えて自分の所で公開しちゃいます。言ってよかった！！どうもありがとうございます。 というわけで、どうぞ。@aka さんに感謝しながら使いましょ
Greasemonkey スクリプトは安全ではありません
■ Greasemonkey スクリプトは安全ではありません Webアプリケーションセキュリティフォーラム の奥さんと高木先生のバトルより。 高木先生 ええと、「クッキーが漏洩する程度なので問題ない」と聞こえたような気がしたんですが。 Greasemonkey には超絶便利な GM_xmlhttpRequest があるので、どのウェブサイト上でスクリプトを動かそうが、あらゆるサイトにアクセスする事が可能です。この観点から考えると、クッキーが漏洩するどころの騒ぎではありませんし、スクリプトを有効にするドメインが限られていた所で大した意味はありません。例えば Google Search を便利にするようなスクリプトに、mixi のパスワードを任意の値に変更させるようなトロイを仕込む事も難しくないでしょう(実際に作って試しました*1)。もちろん対象サイト上に、XSS や CSRF の脆弱性がなく
Greasemonkey 用スクリプト - Deny Rakuten News
■ Greasemonkey 用スクリプト - Deny Rakuten News ※Greasemonkey は Firefox 用の拡張機能です。詳しくは Firefox まとめサイト で確認して下さい。 DenyRakutenNews.user.js (gist) その他のスクリプト 楽天市場 で、注文確定直前の画面に出てくるメルマガ購読のチェックを自動的に全てオフにします。 一応商品の注文に関わる画面なので、なるべく影響が出ないようにと考えて結構キツメの制限をつけてチェックを外すようにしています。なので、漏れがあるかもしれませんから、送信前に本当にチェックが外れているか確認するようにして下さい。 あまり考えられませんが、想定外の所のチェックが外れるという可能性も考慮し、オフにしたチェックボックス付近の背景色を目立つように変更しているので、確認する際に役立てて下さい。 このスクリプト
入力文字数の制限を可視化する JavaScript
■ 入力文字数の制限を可視化する JavaScript 好評の、読み込ませるだけシリーズ の8番目。 maxlength 属性とかアプリケーション側とかでフォームの入力文字数を制限していても、ユーザにとっては自分が何文字くらい入力したかがわからないと不便そうなので、汎用的なのを作りました。 フォームにフォーカスが当たると、入力した文字数と入力可能な文字数が表示され、リアルタイムに更新されていきます。 動作サンプル コードは次の通りでして、prototype.js(1.5.0くらい) に依存してます。 var VisualLength = Class.create(); VisualLength.prototype = { initialize: function(attribute) { this.fields = ['INPUT', 'TEXTAREA']; this.attribute
オレの .vimrc
.vimrc 晒し が流行りそうな予感なので、いち早く晒してみる。 しかしこうしてみると大した事はやっていないな。YYMMDDHH の時間別の自動バックアップと g を使ったキーバインドくらいが他であんまり見掛けない設定のような気がする。 autochdir は知らなかった。後で調べてみよう。 " ------------------- " 色の設定 " ------------------- syntax on colorscheme my highlight LineNr ctermfg=darkyellow " 行番号 highlight NonText ctermfg=darkgrey highlight Folded ctermfg=blue highlight SpecialKey cterm=underline ctermfg=darkgrey "highlight Spec
マトリックス風 twitter
■ マトリックス風 twitter 名付けて matwitter ニコったー を見たら思い付いたから作っただけで、反省はしていない。 http://espion.just-size.jp/files/js/matwitter/matwitter.html デフォルトだと、オレのアカウント+フレンドのメッセージが流れます。あと Firefox でしか見てないから、IE とかだと動かないかも。 もしこれを自分のサイトに置きたいとかそういう奇特な人がいましたら、ご自由にどうぞ。 スクリプトすげえ短いので、マトリックス風に文字を流したい欲求があれば、使いまわしやすいかもね。 ていうか、マトリックスってこんな感じだったっけ？
TinyURL はリンク先を開く前に URL を確認できる
■ TinyURL はリンク先を開く前に URL を確認できる 人気のTwitterにセキュリティ問題、研究者が指摘 に URL 短縮サービスの事が書いてありましたが、だいたい TinyURL ですよね。これは私も気になってたので、ページ内に TinyURL があったら元の URL に戻す Greasemonkey を作ろうと思ったんですが、HEAD リクエストの返答がリダイレクト先のサイトの情報になってしまって、なんかめんどくさくなったので飽きました。 それで、TinyURL の仕様とか確認している時に気づいたんですが、2ch で言う所の ime.nu みたいな確認用のページを挟み込む設定があるようです。とりあえず、当面はこれでしのぐと良いでしょう。 以下からセッティング出来ます。 http://tinyurl.com/preview.php NEW って書いてあるから、まだ新しい機能な
redMine 使ってみる
この前の Rails 勉強会の時にちょっと話題になったのですが、プロジェクト管理ツールの redMine と言うのがありまして、trac の代替になりそうな感じだったのでちょっと試してみました。 複数プロジェクト(SVNリポジトリ)の管理が出来て、ガントチャートも使えるし、ウェブ上の管理機能も充実していてかなり期待が出来そうです。 Rails のプロジェクトなので、Rails を使ってる人ならセットアップも簡単です。 まずは自分の環境を晒してから。 $ ruby -v ruby 1.8.5 (2006-08-25) [i486-linux] $ rails -v Rails 1.2.3 ディレクトリ作って svn でデータを持ってきます。 $ mkdir redmine $ cd redmine $ svn checkout svn://rubyforge.org/var/svn/redm
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
