Tips のバックアップ(No.5)

このページにはいろいろなTipsを書きます。

[HTML5] テーブルのwidth=100%がはみ出る件
[HTML5] Js Test DriverをNetBeansから使う
[HTML5] 画面全体の大きさの設定
[Servlet] Tomcat7とTomcat8の違いではまったこと
- ServletRequest.getRealPath()の違い
- 文字コードの変換

[HTML5] テーブルのwidth=100%がはみ出る件 †

外側のdivにpadding:8px;などを設定していると、その内部のtableがwidth:100%;ではみ出る。
これは、widthの効果が実際のcontentsだけでなくpaddingにも及ぶことが原因であり、tableがはみ出ているわけではなく、その外側のdivがはみ出ているのである。
これを避けるには、外側のdivにbox-sizing:border-box;を指定する。
これにより、widthがpaddingまで含むようになる。

↑

[HTML5] Js Test DriverをNetBeansから使う †

Js Test DriverはGoogleが提供しているJavaScript用のテスト環境である。

単体でサーバになって、ブラウザ上でのテストを可能にする。

さらに、NetBeans Connectorを使えれば、デバッグでもできるらしい。

詳しい設定方法等はここにある。

ここでは、具体的な手順を中心に説明する。

↑

Js Test Driverの準備 †

上記のサイトからJsTestDriver-X.X.X.jarをダウンロードする。
適当な場所（たとえばProgram Files\javaなど）に置く。

展開する必要はない。

↑

NetBeans側での準備 †

HTML5プロジェクト"Test1"を、なにもオプションを指定せずに作成した場合について述べる。

↑

JsTestDriverの準備 †

「プロジェクト」タブの右にある「サービス｣タブから「JSテストドライバ」を右クリックし「構成｣を選ぶ。
JARファイルの場所に、上でコピーしたJsTestDriver-X.X.X.jarの場所を書く。
サーバURLはそのまま。
テストに使用するブラウザは適当に選ぶ。（複数を選ぶとそれぞれにテストしてくれる)
OKを押す。
もう一度「JSテストドライバ｣を右クリックし｢実行｣を選ぶ。これで、ブラウザが起動し、JsTestDriverと書かれたウィンドウが(複数)開く。

↑

設定ファイルの準備 †

プロジェクトTest1を右クリックし、｢jsTestDriver構成ファイル｣を選ぶ。
「js-test-driver用のJasmineをダウンロードして構成」にチェックが入っていることを確認し、終了する。
これでプロジェクトツリーに｢単体テスト｣というフォルダが作られ、その中にlibとunitという2つのフォルダが作られる。（実際のフォルダ名は"test"である）
- libの中にはJasmineというJavaScriptのテスト用フレームワークの一種に必要なファイルが格納される。
- unitにはテスト用コードを格納する。
｢ファイル」タブに切り替えると、"test"というフォルダと"jsTestDriver.conf"というファイルが出来ていることがわかる。
- このファイルがテスト用の設定ファイル。
- これは後で修正する。

↑

テストの準備 †

プロジェクト名を右クリックし｢プロパティ｣を選ぶ。
カテゴリの「JavsScriptテスト」で、テスト･プロバイダを「JSテストドライバ｣にする。
構成の右端の｢検索｣ボタンを押すと、"jsTestDriver.conf"を自動的に見つけて設定してくれる。（もし見つからない場合は自分で設定する）

↑

ソースコードの準備 †

プロジェクトツリーの「サイトルート｣に"js"というフォルダを作り、その中に"my.js"という以下のJavaScriptファイルを作成する。
```
var TestClass=function(){
    this.add=function(a,b){
        return a+b;
    };
};
```

プロジェクトルートの「単体テスト」の中の"unit"の中に"test.js"という以下のJavaScriptファイルを作成する。

TestCase('Test1',{
    setUp:function(){
        this.test_class=new TestClass();
    },
    'test Test1-1':function(){
        assertEquals(this.test_class.add(2,3),5);
    },
    'test Test1-2':function(){
        assertEquals(this.test_class.add(1,2),5);
    }
});

さらに、｢ファイル｣タブに切り替え、"jsTestDriver.conf"を以下のように修正する。

server: http://localhost:42442

load:
  - test/lib/jasmine/jasmine.js
  - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
  - public_html/js/my.js
  - test/unit/*.js

exclude:

↑

テストの実行 †

プロジェクト名を右クリックして｢テスト｣を選ぶ。
自動的に"test.js"が実行され、結果が下側の「テスト結果｣に表示される。
- 上記の例の場合、成功が1個、失敗が1個あるはず。

↑

[HTML5] 画面全体の大きさの設定 †

ブラウザ画面全体に広がっているアプリを作ろうとすると、ベースとして全画面のdivタグがほしい。

が、以下のCSSでhtmlとbodyを全画面に広げると、なぜか横にスクロールバーが登場する。

"AllScreen.css"

html,body{
    width:100%;
    height:100%;
}
div#all_area{
    width:100%;
    height:100%;
    background-color:yellow;
}

"AllScreen.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>All Screen</title>
    <link rel="stylesheet" href="AllScreen.css"></link>
  </head>
  <body>
    <div id="all_area">
      this is all_area.
    </div>
  </body>
</html>

上記のコードを実行すると、div領域の周りに白い枠が出て、スクロールバーも表示される。

これは、bodyにmarginとして8が設定されていることが原因である。（ChromeとIE11では8だった）

したがって、CSSを下記のように修正すれば、ブラウザ全体のdiv領域を得ることができる。

"AllScreen.css"

html,body{
    margin:0px;
    width:100%;
    height:100%;
}
div#all_area{
    width:100%;
    height:100%;
    background-color:yellow;
}

これでブラウザ画面全体が黄色のdiv領域となり、スクロールバーは表示されなくなる。

↑

[Servlet] Tomcat7とTomcat8の違いではまったこと †

Javaセミナー2014ではTomcat7を使っているが、最新のTomcat8を入れたら、挙動がだいぶ違う。

↑

ServletRequest.getRealPath()の違い †

Tomcat7
- getRealPath("reservation.data")で、".../K07/reservation.dat"へのパスが得られた。
- "reservation.dat"が存在しない場合では、そのパスが返る。
Tomcat8
- 存在しないファイルを指定するとnullが戻るようだ。
- getRealPath("/")とすると、現在のフォルダへのパス".../K07"が帰ってくるので、それにつなげて、getRealPath("/")+"/reservation.dat" とすると、正しいバスを得ることができる。

↑

文字コードの変換 †

Tomcat7
- tmp=getParameter()でパラメータの値が得られるが、これはブラウザ側の文字コードなので、new String(tmp.getBytes("8859_1"),"JISAutoDetect")で文字コードを適切に変換できる。
Tomcat8
- Tomcat側で勝手にパラメータの文字コードを変更するもよう。
- したがって、getParaemter()ではすでに何らかの変換された文字列が返される。（おそらくは"Latin-XX"系）
- これがすでに文字化けしているので、new String(...)で変換しようとしてもダメ。
- postメソッドで送る場合、事前に
```
request.setCharacterEncoding("UTF-8");
```
- でOKで、この場合、その後の変換処理は不要。
- getメソッドの場合、上記の設定は無視される。ので、コネクタに
```
<?xml version="1.0" encoding="UTF-8"?>
<Server port="8005" shutdown="SHUTDOWN">
  <Service name="Catalina">
    <Connector port="8080" protocol="HTTP/1.1" useBodyEncodingForURI="true" />
  </Service>
</Server>
```
- という設定を加える必要があるようだ。（http://www.mclnet.co.jp/tech/java/tomcat-howto.html#connector_get_japanese）

渕田のセミナー