Archive for the ‘開発’ Category

【JavaScript】フォーカス外れた時に消えるカレンダー

WEB上のカレンダーはマウスで枠外をクリックすると消えます。
でもタブキーでフォーカスを移した時は消えません。
googleだかのカレンダーもそうらしいです。
見てないんでよく知りませんが。

 

以前作った船宿ブログの日付入力カレンダーもそうなってたらしいです。
たしかに自分でもタブでどうのという実装をした覚えがないのでそうなのだろうと思います。

 

確認したらクリックでの非表示は実装してあった。
よかった。

 

今日違うシステムのカレンダー機能でその話になり、
船宿の方もタブで(略)がなかったので実装してみることにしました。

 

今回考えた方法はこれ。
(とは言え最初にキーで見ると言ったのは後輩だが)

 

まずカレンダー表示関数の中で

document.onkeydown = calKeyDown;

 

そして以下関数を追加

function calKeyDown(e) {
	var e = (e)? e : ((window.event)? event : null);
	if(9 == e.keyCode) {
		document.onkeyup = calKeyUp;
	}
}

function calKeyUp(e) {
	document.onkeyup = null;
	var e = (e)? e : ((window.event)? event : null);
	//フォーカスされている要素を取る(左IE,Opera、右FireFox)
	var target = (document.activeElement || window.getSelection().focusNode);
	if(!checkParentNode(target, "calendar", 0)) {
		hideCalendar();
	}
}

hideCalendar() はカレンダーを消す関数です。
必ずカレンダーを消す関数の中で document.onkeydown = null; してあげてください。

 

calKeyUp 関数の中で使っている checkParentNode 関数は
枠外クリック判定の時にも使った関数で
オブジェクトの親を遡って特定のクラス名のオブジェクトがあるかを判定します。

//(判定するオブジェクト, 判定に使うクラス名, 遡っている世代数) as boolean
function checkParentNode(pObj, pClass, pNum) {
	if (pNum>9) {
		return false;
	}
	if (pObj.className==pClass) {
		return true;
	}
	if (pObj.parentNode) {
		return checkParentNode(pObj.parentNode, pClass, pNum+1);
	}
	return false;
}

 

キーダウンですぐに消す判定をしないのは、
タブ押した直後はまだフォーカスが移ってないからです。

 

逆にキーアップのイベントだけを見るとどのキーが押されたのかわかりません。
(当然といっちゃ当然)

 

このコードはあまり汎用的とは言えませんね。
特にonkeydownを占有してるところあたり。

 

jQueryだとイベントも追加できるのでそういったもので作るといいかもしれません。

Eclipseで作るServlet、JSPのHelloWorld!!

前回では Eclipse で JavaServlet や JSP を開発するための環境を構築しました。
まぁ、構築したといってもダウンロードして設置しただけなんですけどね。

今回は Servlet と JSP で HelloWorld を表示させる方法を紹介します。

では、早速 Eclipse を起動してみましょう。

 

Eclipse のインストールディレクトリやバージョンによってアドレスは変わりますが、
C:\Program Files\pleiades-e3.5-java-jre_20090930\eclipse\eclipse.exe
を起動すると、まず workspace はどこかと聞いてきます。

※workspace とは、簡単に言うと「どこにソースを保管するか」ということです。
わかりやすい場所に作りましょう。

Eclipse が開いたら ファイル → 新規 → その他 → Java → Tomcatプロジェクト と選択します。

プロジェクト名に「tomcat_test」といれて、完了をクリックします。
※空白や、全角文字を入れないように注意しましょう。

Tomcatプロジェクトを作成すると、さっき指定したワークスペースに、
tomcat_test というディレクトリが作成されているはずです。

一応確認してみましょう。

※Tomcatのプロジェクトがうまく作れない場合、
Tomcatのインストールディレクトリに空白などが入っていないかどうか、などを確認してください。

次にパッケージとクラスを作ります。
tomcat_test に右クリックをあてて、 新規 → クラス と選択しましょう。

パッケージの項目には、あなたのドメイン(もしくは、あなたの名前でもいいです)を逆からいれてみましょう。
例えば、山田太郎なら、taro.yamada とか。
パッケージについては後々説明したいと思います。

名前は、いつものとおり、 HelloWorld をいれます。
パッケージと名前を入れたら、完了をクリックします。

では、Servlet の表示のための Java のコードを書いていきましょう。

Eclipse のパッケージエクスプローラに、HelloWorld.java があると思います。
そこをクリックしてソースコードを表示させ、以下をコピペして(HelloWorld.javaの部分に)上書き保存しましょう。
先頭の taro.yamada の部分はさっき設定したパッケージの名前に置き換えてくださいね。

package taro.yamada;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class HelloWorld extends HttpServlet {
 public void doGet(HttpServletRequest request,
  HttpServletResponse response)
  throws IOException, ServletException
 {
  response.setContentType("text/html");
  PrintWriter out = response.getWriter();
  out.println("<html>");
  out.println("<head>");
  out.println("<title>HelloJavaServlet</title>");
  out.println("</head>");
  out.println("<body>");
  out.println("<h1>Hello World!!</h1>");
  out.println("</body>");
  out.println("</html>");
  out.close();
 }
}

つづいて、JSP ファイルです。

tomcat_test に右クリックをあてて、 新規 → その他 → Web → JSP と選択します。

ファイル名に HelloWorld.jsp といれて、完了をクリックしたら、
以下をコピペして(jsp_test.jspの部分に)上書き保存しましょう。

<html>
  <head><title>JSP Test</title></head>
  <body>
    <h1>HelloWorld!! </h1>
    <%=new java.util.Date()%>
  </body>
</html>

以上でコードの作成は完了しましたが、今作った Servlet のクラスを使えるようにするため、
web.xml ファイルに情報を追加しなければなりません。

Eclipseのパッケージエクスプローラのtomcat_testにWEB-INFに右クリックをあてて、新規→ファイルを選びます。

ファイル名を web.xml といれて、完了をクリックし、以下をコピペして(web.xmlの部分に)上書き保存しましょう。
<servlet-class>taro.yamada.HelloWorld</servlet-class>の部分は、さっき設定したパッケージ名に置き換えてくださいね。

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
 http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
 version="2.4">
<servlet>
 <servlet-name>hello</servlet-name>
 <servlet-class>taro.yamada.HelloWorld</servlet-class>
 </servlet>

 <servlet-mapping>
  <servlet-name>
   hello
  </servlet-name>
  <url-pattern>
   /servlet/hello
  </url-pattern>
 </servlet-mapping>

</web-app>

早速確認してみましょう。

Eclipse 画面のメニュー下の猫のマーク(起動)をクリックして Tomcat を起動しましょう。

コンソールの一番下に

情報: Server startup in 3246 ms

のように出ればTomcatサーバーの準備完了です。(数字は経過秒数)

以下のURLでサーブレットを実行。
http://localhost:8080/tomcat_test/servlet/hello

以下のURLでJSPを実行。
http://localhost:8080/tomcat_test/jsptest.jsp

表示されましたか?

※404エラーがでる場合は、ファイル名や web.xml のスペルに間違いがないか確認してください。

寝ながらServlet、JSPの開発環境を構築する。

JavaServlet と JSP(JavaServerPage) の Eclipse 開発環境を寝ながら構築してしまおうという試みです。

 

ここでの前提条件は、Apache サーバーが導入されていること。それだけ。

 

まず、Pleiades という Eclipse の All in One パッケージを ここから 落としてきます。

 

現在の最新バージョンは Eclipse 3.5.1 Galileo です。
特にバージョンのこだわりがなければ最新バージョンを落としましょう。
Java の Full All in One (JRE あり) というやつです。

 

これは、Eclipse で Servlet や JSP の開発をするのに必要なツールを全部強引に連携させたものです。
JDK 、J2EE、Tomcat、その他諸々が一通り入っています。

 

落としたら、解凍して C: ドライブなどにフォルダをまるごと設置しましょう。
C:\Program Files\pleiades-e3.5-java-jre_20090930\
こんな感じです。

 

以上で Eclipse の開発環境が完成しました。
次回はいよいよ HelloWorld の表示です。