yamablo » Javascript http://yamablo.com Just another WordPress weblog Sun, 01 Aug 2010 02:53:20 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 現在使用しているブックマークレット http://yamablo.com/2010/01/24-222633.php http://yamablo.com/2010/01/24-222633.php#comments Sun, 24 Jan 2010 13:26:33 +0000 yama3 http://yamablo.com/?p=1098 ブックマークレットとは、JavaScriptで記述された（比較的）小さなプログラムである。主に、ブラウザのブックマークに登録して利用することから、この名称がついている。このブックマークレットを最近はどんどん使っているため、自分の使っているブラウザ(Chromeブラウザ)のブックマークバーは多くのブックマークで溢れそうな状態です。自分は基本的にウェブページをブックマークすることはなく、普段からよくアクセスするサイト（20～30サイトほど）を見ようとするときは、直接アドレスバーにURLを打ち込むという特殊な使い方（？）をしていたため、全くブックマークを使っていなかったのですが、このブックマークレットを多く使い始めてからはブックマークの量が少しずつ増えてきました。

ということで、この記事では自分が使っているブックマークレットの中で便利なものをいくつか紹介しようかと思います。

ブログを書く人ならeMiniA

ブログを書く人ならこのeMiniAというブックマークレットは手放せないツールになるでしょう。自分自身もこのeMiniAによって、ブックマークレットの世界に引き込まれました。このブックマークレットは、今自分が見ているウェブページのURLとページタイトルを元に、そのページへのリンクタグを生成してくれるブックマークレットです。ブログを書いていて、ちょっと引用したいなぁとか、リンクを貼りたいなぁというときに、URLをコピペして、リンクタグを書いて、href属性にURLをペーストして・・・と毎回毎回やるのは大変ですよね。そんなブロガーの方にはオススメです。ちなみに、自分が使っているeMiniAはtarget属性に_blankを付加したリンクタグを生成し、eMiniAとは別にeMiniBというブックマークレットはtarget属性が設定されていないタイプです。eMiniAをご利用予定の方は以下のURLからどうぞ。

RSSをGoogle リーダーで読む人ならReader登録

RSSリーダーを使ってブログを読む人も最近は増えてきました。こういったRSSリーダーでブログを読む人の煩わしい点はブログのRSSリーダーへの登録でしょうか？もしGoogle リーダーを用いてRSSを購読しているのであれば、Google リーダー登録用のブックマークレットがありますので、それを使用すると、Google リーダーへのRSSの登録が簡単になるでしょう。

JavaScriptベンチマーク用ブックマークレット

このブックマークレットは、ウェブブラウザの性能比較の際に最近よく使われるようになったJavaScriptのベンチマークを行ってくれるブックマークレットです。各ブラウザのアドオンにより同様のベンチマークを行うことのできるものも存在するのでしょうが、このベンチマークの目的は、ほかブラウザとの比較なので、ブックマークレットだけでできるというのは、どのブラウザでも構わない（厳密には実装によるが）というのはベンチマークという目的上妥当ではないでしょうか？

短縮URL用ブックマークレット

短縮URLと言えば、twitterなどですっかりお馴染みになったようですが、様々な短縮URLサービスが出ています。そんな中で自分はBit.lyの短縮URLサービスのブックマークレットを利用しています。普段twitterに投稿するときは、Google Chromeのアドオンの1つであるChromed Birdを使っているので、簡単にできるのですが、Chromed Birdの調子が悪い時や、別の目的で使うときなどこの短縮URL用のブックマークレットにはお世話になっています。

ウェブクリップ Evernote

Evernoteの公式日本語版アプリケーションがリリースされるとのことで、一部では話題になっているEvernoteにもブックマークレットが存在します。ウェブページ上で、必要な箇所をドラッグ＆ドロップで選択し、ブックマークレットをクリックすれば、選択した箇所をEvernoteによりクリップします。これはとても便利ですね。これは各ブラウザ用のアドオンなどによって実現されていることも多いので、もしもアドオンのほうが使い勝手が良ければそちらを選択するほうがいいかもしれませんが、ブラウザのアドオンの使い勝手が悪いなぁと感じている人にとっては利用するといいかもしれませんね。

ほかには？

ブックマークレットはウェブ上に多く存在するので、ここに掲載したもの以外にも便利なブックマークレットを見つけたら実際に使ってみるといいでしょう。ブックマークレットを探すときは以下のサイトを参考にしてみては？

関連記事

]]> http://yamablo.com/2010/01/24-222633.php/feed 0 HTML5における新しいフォームのマークアップ http://yamablo.com/2009/12/30-185101.php http://yamablo.com/2009/12/30-185101.php#comments Wed, 30 Dec 2009 09:51:01 +0000 yama3 http://yamablo.com/?p=945 現在使われているWEBのマークアップ言語HTMLの新バージョン5の仕様がいろいろなところで公開されています。このHTML5では、今までのバージョン4と比べ、非常に多くのタグを利用可能になっております。これらのHTML5で新しく使えるようになったタグの多くは、セマンティック・ウェブの実現、インタラクティブなウェブページの開発を容易にすることに目を向けたタグになっています。そこでこの記事では、HTML5で新しくなったものの1つであるフォームについて解説しようと思います。

なお、当記事は、<html>5 doctor::Designing a blog with html5の記事を、自分なりに和訳して理解したものを書いています。場合によっては和訳が間違っており、正しくないことを書いてしまっている場合もあります。もし、おかしな点などございましたら、上記サイトから、該当箇所を確認していただくか、コメント欄やtwitter(@1987yama3)までご連絡いただけたらと思います。

inputタグのバリデーション

inputタグといえば、今までは、さまざまな入力フォームを生成するタグでした。今まではそのtype属性にtextと入れてテキスト入力を、reset, submitなどでボタンといったように見た目だけを変更することはできたのですが、そのロジック（論理部分）は変えることができませんでした。それが今回のHTML5では、大幅に強化され、様々な指定ができるようになりました。

具体的には、今まで入力されたデータが開発者の意図したものとなっているか
どうかをチェックするのに、サーバーサイド・スクリプトでバリデーションを行ったり、JavasScriptを記述してバリデーションを行ったりしていました。これをブラウザ側でバリデーションを行うことができるようになった点が新しいと思われます。例えば、inputタグのtype属性にemailを記述することで、該当のテキスト・フォームに入力された値がemailであるかどうかがチェックされます。このようなバリデーションを行うことができる入力は、email以外にもurl（Web上のURL）やnumber（数字であるかどうか）などが存在します。また、デフォルトで設定できなくても、正規表現によるバリデーションも規定されるようですので、開発者にとって、開発をスムーズにできるようになります。

日付入力の支援

Web上のフォームに何らかの日付を入力してもらう、という場面はよくあります。このような日付入力の際、その方法は開発者が決めています。その入力方法は
大きく分けると

  • テキストボックスに記述方法を指定する、
  • ドロップダウンリストから年・月・日を選ばせる、
  • カレンダー・ウィジェットのようなGUIを利用する(JavaScriptを利用)、

の3通りかと思います。この3つは、上にあるものほど実装が簡単で、下に行くほど実装が複雑になります。逆に、上にあるものはエラー入力が多く、下にあるものほどエラー入力が少なくなり、ユーザにとっても便利な実装です。

今までは日付入力の際に、ユーザの利便性を採るか、開発の容易性をとるかで選択を迫られていましたが、HTML5ではそのどちらも犠牲にすることはありません。具体的には、簡単なHTMLを記述するだけでブラウザ側がウィジェットを出力するようになります。具体的には、inputタグのtype属性をdateに設定することで、該当のテキストボックスにフォーカスが移動された際にブラウザがそのテキストボックスの付近にカレンダー・ウィジェット（DATEピッカー）を表示してくれます。そのため、開発者側は、input type=”date”とするだけ、ユーザにとっても、日付入力はどのサイトでもカレンダー・ウィジェットから指定できる統一性というメリットがあります。/p>

また、開発者側にとっての一番のメリットは、ユーザの環境を考える必要がない、ということでしょうか。今までもJavaScriptを利用してカレンダー・ウィジェットを使うことはできたのですが、JavaScriptを利用できないユーザーにはこのカレンダー・ウィジェットを使ってもらうことができません。今回のHTML5のカレンダー・ウィジェットはJavaScriptを利用していないため、ユーザがJavaScriptを利用しているか否かに関わらず同一の操作性を提供することが可能になります。

まとめ

今までJavaScriptを書いて、入力フォームのロジックを変更していた部分が、今回のHTML5ではHTMLタグだけで、しかも簡単な記述で行うことができるということでなかなか便利になることが期待できます。問題は、HTML5への移行がいつくらいになるかでしょう。しかし、移行のタイミングがいつであったとしても、必ずその時期はやってきます。早い時期からHTML5を用いた適切なマークアップを勉強してみてはいかがでしょうか？

参考サイト

関連記事

]]> http://yamablo.com/2009/12/30-185101.php/feed 0 [Ajax勉強中] パスワード確認欄のチェック機能 http://yamablo.com/2009/05/02-102105.php http://yamablo.com/2009/05/02-102105.php#comments Sat, 02 May 2009 01:21:05 +0000 yama3 http://yamablo.com/2009/05/02-102105.php 昨日に引き続きAjax勉強中に関する記事になります。とりあえず昨日作ってみたJavascriptによる
パスワード確認欄のチェック機能です。いろいろなサービスの新規登録時に
パスワード、パスワード（確認用）の2回パスワードを入力することが多いのですが、この入力した
２つのパスワードが一致するかどうかをリアルタイムで確認する機能になります。今まではこの機能を
実装すべきときは、PHPを使ってサーバー側で処理をしていたのですが、これだと一度入力した全データを
サーバー側に送らなければいけないのでユーザとしては不便です。それをクライアントPC上で完結させるために
Javascriptの出番となるわけです。

スクリプト(register.js)

  1. /* ***************************************
  2.  * パスワードチェックを行うスクリプト。
  3.  * <input type=”password” id=”passwd” />
  4.  * と
  5.  * <input type=”password” id=”passwd_conf” />
  6.  * の入力ボックス内に変化があったときに関数passwd_checkが
  7.  * 発動し、２つのパスワードが一致しなかった場合には、
  8.  * id=resultの要素にその旨のメッセージを出力する。
  9.  * *************************************** */
  10. function passwd_check() {
  11.   // パスワード入力ボックス内の文字を取得する。
  12.   var passwd = $F(“passwd”);
  13.   var passwd_conf = $F(“passwd_conf”);
  15.   // パスワード入力ボックス内の文字を比較する。
  16.   if( passwd != passwd_conf ) {
  17.     $(‘result’).innerHTML = ”パスワードが一致しません。”;
  18.   } else {
  19.     $(‘result’).innerHTML = ”";
  20.   }
  21. }
  22. window.onload = function() {
  23.   // inputタグ（パスワード用）に変更があればパスワードチェックを行う。
  24.   new Form.Element.Observer(
  25.     ’passwd’,
  26.     1,
  27.     function (element,value){passwd_check();}
  28.   );
  29.   new Form.Element.Observer(
  30.     ’passwd_conf’,
  31.     1,
  32.     function (element,value) {passwd_check();}
  33.   );
  34. }

HTML(register.html)

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3.   <head>
  4.     <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
  5.     <title>sample</title>
  6.     <script src=”./js/prototype.js” type=”text/javascript”></script>
  7.     <script src=”./js/register.js” type=”text/javascript”></script>
  9.     <script type=”text/javascript”>
  10.     </script>
  12.   </head>
  13.   <body>
  14.     <form method=”post” action=”./register.html” id=”register”>
  15.       <table>
  16.         <tr>
  17.           <td>パスワード</td>
  18.           <td><input type=”password” id=”passwd” /></td>
  19.         </tr>
  20.         <tr>
  21.           <td>パスワード（確認用）</td>
  22.           <td><input type=”password” id=”passwd_conf” /></td>
  23.           <td id=”result” style=”color: red;”></td>
  24.         </tr>
  25.       </table>
  26.       <input type=”submit” value=”送信” />
  27.     </form>
  28.   </body>
  29. </html>

解説？

スクリプトのほうは、最初の部分のコメントの通りで、
<input type=”password” id=”passwd” />
と
<input type=”password” id=”passwd_conf” />
の入力ボックス内に変化があったときに関数passwd_checkが
発動し、２つのパスワードが一致しなかった場合には、
id=resultの要素にその旨のメッセージを出力します。
また、入力ボックス内に変化があったかどうかは1秒ごとにチェックしています。これを変更するには、

    new Form.Element.Observer(‘passwd’, 1,function (element,value){passwd_check();});

の部分の第2引数が1となっているところ（青字の部分）の数字を変更すればOKです。

あとは、HTMLのほうで、formタグのidをregisterにし、二つのパスワード入力ボックスの
idをそれぞれ、passwd, passwd_confにする必要があります。

最後に、これら２つのファイルを同じ階層に置くようにしましょう。（もし、違う階層に置く必要がある場合にはregister.htmlの
scriptタグでregister.jsを指定している場所を変更してください。

おそらく、これくらいでOKのはずです。

感想

思っていたよりも簡単にできた。まぁ、ロジックが単純だからだとは思うけど。
あと追加すべきとしては、今は入力時にしかチェックしてないけど、これを送信時にもチェックすべきですね。
送信時にクライアントPC上でチェックして、もし２つのパスワードが異なっていればサーバに送信する前に
クライアントPC上でエラー出力するようにするのが一番ですね。

サンプルページ

関連記事

]]> http://yamablo.com/2009/05/02-102105.php/feed 0 [Ajax勉強中] インストールからテストまで http://yamablo.com/2009/05/01-193014.php http://yamablo.com/2009/05/01-193014.php#comments Fri, 01 May 2009 10:30:14 +0000 yama3 http://yamablo.com/2009/05/01-193014.php 最近、Ajaxでもやってみたいなと思い、Javascript, Ajaxの勉強を少しはじめてみました。使っているライブラリはprototype.jsです。prototype.jsを選んだ理由としては、とりあえず、メジャーらしいので日本語のドキュメントが揃っているだろう、と考えたからです。

ということで、以下が、prototype.jsのダウンロードからテストまでの一連の流れです。ここまででおよそ30分程度でしょうか？

インストール

http://prototypejs.org/assets/2007/1/18/prototype.jsをダウンロードし、ドキュメント・ルートに配置する。

動作確認

以下の内容でindex.htmlファイルをドキュメント・ルートに配置。このとき、文字コードはUTF-8にする。その後、同じフォルダにinput.datというファイルを作成し、ファイルの中に適当に文字を書き込み保存する。

index.htmlをブラウザで開き、ボタンをクリック。すると、「ここがターゲット」と書かれていた部分にinput.datの中身が上書きされます。

  1.     <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” 
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2.     <html xmlns=”http://www.w3.org/1999/xhtml”>
  3.         <head>
  4.             <meta http-equiv=”Content-Type” 
    content=”text/html; charset=UTF-8″ />
  5.             <title>sample</title>
  6.             <script src=”prototype.js” type=”text/javascript”></script>
  7.         </head>
  8.         <body>
  9.             <p id=”blk”>ここがターゲット</p>
  10.             <input type=”button” value=”ボタン” onclick=”new Ajax.Updater(‘blk’,'input.dat’,{method: ’get’});”/>
  11.         </body>
  12.     </html>

解説

pボタンがクリックされると、rototype.js内のAjax.Updater関数を呼出し、テキストファイル内のデータを出力します。

Ajax.Updater

第1引数
ターゲット部分のid値を指定
第2引数
出力したいデータが記載されたファイルへのパス
第3引数
HTTPリクエストの方法

参考サイト

関連記事

]]> http://yamablo.com/2009/05/01-193014.php/feed 0