セキュア・プログラミング講座（Webアプリケーション編）第2弾：マッシュアップ

『セキュア・プログラミング講座（Webアプリケーション編）』第2弾：マッシュアップ(12/13)
http://topse.or.jp/2013/10/2068

に行ってきた！その内容をメモメモ

---

従来のWebアプリケーション
・紙芝居的な画面遷移
　　わりとゆっくりとした動き
AJAX流アプリケーション
・滑らかな画面変化
　　反応速度はやい
構図の変化
　従来は、サーバー側が動的
　AJAXは、ブラウザで動き、サーバーはデータを与える

１．WebAPI
　Webアプリケーションとなに違う？
　　→ユーザーの会話を想定しない
　クライアントへデータや演算結果
・REST
　　Representational State Transfer

　HTTPリクエストと対応付ける
　特徴４つ
　　・ステートレスな通信プロトコル
　　・リソースでステートを表現
　　・簡素化されたオペレーション
　　・URIのパス部分でリソースを識別

　RPC,SOAPはソフト複雑になる
　　→REST風

　Ruby on Railのresourcesタイプルーティング

２．マッシュアップの構図
・マッシュアップ
　　音楽DJの世界におけるマッシュアップ
　→Webにおける「マッシュアップ」
　　　　複数の既存WebAPIを組み合わせ
　　　　新たなWebアプリケーションを作成

　２種類のマッシュアップ
　　クライアント側マッシュアップ
　　サーバー側マッシュアップ

マッシュアップに対する侵害パターン
　　悪意のAPI→ゆーざー
　　悪意のAPI→API
　　無関係のサイト→API
　　無関係のクライアント→API

今回はブラウザが侵害される「悪意のAPI→ゆーざー」を考える

Javascript
　インタプリタ言語
　Javaに似た構造（似て非なる言語）
　動的型言語（実行時に型が決まる）
　オブジェクト指向（プロトタイプを使う）
　リテラル表記の表現力
　関数型プログラミング

制御構造
　分岐
　ループ
　ループから脱出

コンストラクタとプロトタイプ
　コンストラクタ関数／new Foo()　新しいオブジェクト
　　　→プロトタイプオブジェクト
　　　　　　→プロパティ

　コンストラクタはオブジェクトに振る舞いを与える
　プロトタイプがチェーンにより、継承に相当することができる

ブラウザのJavascript実行環境
・ECMAスクリプトオブジェクト
・ブラウザオブジェクト
・DOM
・Javascriptアプリケーションコード

windowとグローバルオブジェクト
・グローバルオブジェクト：
　　すべてを収容するトップレベルオブジェクト
・ブラウザのグローバルオブジェクト＝window
　　document = window.document

４．クライアント側コードに起因するスクリプト注入
・innerHTML
　　スクリプト注入攻撃できる
　　→ID,パスワードを入れるようにさせる＆のっとりできる
　→imgタグで　src=/でかならず、失敗させ、
　　onerrorの先に、実行したいことを記述する。

病理メカニズム
・スクリプトはどこにある
　　head,bodyのscriptタグ
　　イベントハンドラ
・スクリプトはいつ実行されるか？
　　（１）HTMLが読み込まれたとき
　　（２）イベントハンドラ：イベント起きたとき
　　（３）動的に：動的についたとき
　　（４）くっつけたときにイベントが起きればすぐに
　　　　　　→onerror
・スクリプト注入
　外から来た値
　　HTTPリクエスト
　　クッキー
　　WebAPI
　　別のクライアント

　DOM,eval関数→スクリプト動く

・攻撃パターンの入口
　　location
　　クッキー
　　XMLhttpRequest
　　WebSocket：第三者
　　postMessage()
　　Window.name
　　WebStorage

・どこに行くと危ない
　　eval系
　　　eval
　　　function→文字列から関数
　　　settimer
　　scriptタグ
　　IFRAMEタグ→サンドボックス属性,
　　イベントハンドラ
　　innerHTML
　　document.write

対策
・インラインスクリプトを避ける
　　→スクリプトを分離する
　サーバー側コードでスクリプトを出力せず、別ファイルで
・入力を警戒する：仕様を決めて、入力チェックする
・正規表現のバグに注意する
　.+,.*は貪欲なので、工夫する
　.は改行文字にはマッチしない
　　　ユニコード2028攻撃
　^と$を忘れない
　　(\A,\zはjavascriptではサポートされていない）
・タグではなく、テキストとして出力する
・JQueryで$(検索式)→検索式のところで、タグが生成されることも
　　→findを使う
・html()は危ない→innerHTMLと同じ
　　→text()で書く
・$.parseHTML()の使用も避ける

５．同一源泉と他源泉
・これまでの脅威の構図
　　クライアントから脅威
　最近は
　　サーバーが脅威
源泉：Webコンテンツの出所
　スキーム、ホスト、ポートの３つ組み
　これが違うと、源泉が違うかも
　　　例：ポート８０、ポート８０８０

セキュリティ確保のための源泉
・同一源泉ポリシー
　　かつての制約
　　→マッシュアップにとっては不便
抜け道
・JSONP
・iframeの３重
・iframe+postMessage
・webワーカー＋importScript

→XMLHttpRequest level2 XHR2
→IEではXDomainRequest
Originリクエストヘッダー→Access-Control-Allow-Origin
　→サーバーには拒否権がある
　→ブラウザには、歯止めがない
　　　：スクリプト注入攻撃
対策にはCSP
・ContentSecurityPolicy
　　アクセスできる源泉のホワイトリスト
　実装：FireFoxから
　W3CではCSP1.1がドラフト、Androidでもサポート予定

他のマッシュアップ論点
・CSP
・クライアント側マッシュアップにおける
　リクエスト強要（CSRF)
・HTML5の新機能
・javascript向けフレームワーク
・サーバー側マッシュアップ
・IE固有

パーフェクトJavaScript
JQuery 9521
古いバージョン（１．６）などは危ない
でも、前のバージョンも修正されている

HTML5でタグ増えた
onの着かない属性：危ない属性

脆弱性をチェックする仕組み
有償の検査ツール：出始めてはいる

性能、負荷テストのかわりに
セキュリティ用のテストがあっていいはず。

Webサーバーからリモートサーバーに、非同期で処理実行

いままで

リモート先でジョブが終わったかどうかを確認する
http://blog.goo.ne.jp/xmldtp/e/cbbdbadaae9c2c8eea8ed8b2ed3cb0dd

や

CentOSでTomcat6
http://blog.goo.ne.jp/xmldtp/e/74e421dcdc3e1e6b2719d79f96d95c2f

を書いてきた目的なんだけど、じつは、こんなことをしたい。

---

■お題

　今、Webサーバーにアクセスして、そことは違う別のサーバー上（以下「リモートサーバー」と記す）で、処理を起動したい。

　しかし、この処理はとても時間がかかるので、（最低数分だが、平均３０分以上、１～２時間かも？）バックグラウンドで処理を実行したい。そして、処理結果をファイル
に書き出し、バックグラウンド処理は終了する。

　その結果をブラウザ上に表示したい

---

■方式の概要

（１－ブラウザ側）
・あるボタンがクリックされると、AJAXで、サーバーのExeActionを起動する。

（１－Webサーバー）
・ExeActionは、バックグラウンドで、SSHを使って、リモートサーバーの
　起動シェルをバックグラウンドで起動する。
　バックグラウンドなので、すぐに戻ってきて、結果をブラウザに返す。

（１－リモートサーバー）
・リモートサーバーの起動シェルは、行いたいジョブをバックグラウンドで
　起動する。この起動シェルは、一意になるような引数が与えられている。
　（たとえば、WebサーバーのセッションIDなど）

　　起動時、起動中ファイルを作成する。
　　起動ファイルは、ファイル名の一部に上記一意の名前を含む
　　（例:一意名12345のとき、job12345.txt)

　　処理を行い、処理終了後、処理内容を、結果ファイルに書き出し、
　　起動中ファイルを削除する。
　　結果ファイルには、ファイル名の一部に上記一意の名前を含む
　　（例:一意名12345のとき、ret12345.txt)

（２－ブラウザ）
・１－Webサーバーで帰ってきたら、setTimeoutを使って、一定時間待ち、
　その後、リモートサーバーの処理が終了したか、AJAXでWebサーバーの
　ChkActionを呼び出す

（２－Webサーバー）
・ChkActionは、リモートサーバーに、ジョブが終了したかどうかを、
　SSHでリモートサーバーのチェックシェルを起動して、尋ねる

（２－リモートサーバー）
・リモートサーバーのチェックシェルは、lsコマンドを実行し、
　grepで、一意になるような引数の起動中ファイルが起動しているか
　どうかをフィルタし、そのような行があれば起動中、無ければ終了
　とみなし、Webサーバーに結果を返す

（２－Webサーバー：返り）
・ChkActionでは、結果を受け取り、処理中ならは、cont、
　終了していたらendを返す

（２－ブラウザ：返り）
・Webサーバーの結果に応じて、もし、cont（処理中）であれば、
　（２－ブラウザ）へ戻り、処理終了までチェックを繰り返す
　もし、endであれば、（３－ブラウザ）へ

（３－ブラウザ）
・処理結果を得るため、AJAXでRetActionを呼び出す。

（３ーWebサーバー）
・RetActionはSSHを使って、リモートサーバーの結果シェルを呼び出し、
　結果ファイルの内容を返すように求める

（３－リモートサーバー）
・結果シェルは、結果ファイルの内容を返した後、結果ファイルを削除する

（３－Webサーバー：返り）
・RetActionは、結果をブラウザに返す

（３－ブラウザ：返り）
・ブラウザでは結果を受け取り、次画面表示

---

以降、これらのプログラムを詳しく見ていく。

CentOSでTomcat6

今、CentOS上でTomcat6を動かそうと思って、いろいろweb見てたら、

Linux/CentOS5/Tomcat
http://pinoki.la.coocan.jp/wiki/?Linux%2FCentOS5%2FTomcat

に当たったんだけど、今、うちのところにはいっているのだと、
ちょっとインストールが違ったので、メモメモ

---

■まずは、ダウンロード

GUIでやります。
rootで入ってください（もしくはsuする）
システム→管理→ソフトウェアの追加／削除

を選択。そうすると、
「パッケージインストーラは特権ユーザーとして稼動しています」
のダイアログが出る。「とにかく続ける」
すると、ダイアログが出る。初めてだと、かなり長い時間がかかるが、まつ。
そうしたら、左側

WebServices→Webサーブレットエンジンを選択。
右に、Apache Servlet/JSP・・・・
とでる。上記の図では、適用がおせそうにないが、実は、
適用がおせるようになるので、そこをクリック

私の場合は、次に

なダイアログが出た。「インストール」をクリック

左端に

　　パッケージをダウンロード中
　　変更のテスト中
　　パッケージのインストール中

などの言葉が出る
インストールが終わると

となる。ちなみにここで、実行ボタンをクリックすると

となるが、コレは見ても、？？なので、X印でダイアログを閉じていく。

もう、これで、インストールは終わっている。

---

■起動前の準備

スタート画面を作っておく。

/usr/share/tomcat6/webapps

の下が、いわゆるTomcat のwebappsに相当する。
（/var/lib/tomcat6/webappsというフォルダもある）
そこで、このページにはじめの画面をつくる。

まず、そこにいく
cd /usr/share/tomcat6/webapps

そしたら、helloというディレクトリを作成して、そこにいく

mkdir hello
cd hello

index.jspという初期画面を作成する。

vi index.jsp

（vi内で１行「Hello World」と書いて保存）

---

■起動

本当は自動設定するんだろうけど、今回は

/etc/rc3.d/K20tomcat6 start

と入力する。そうすると、起動する。
（OKと出るはず）

そうしたら、ブラウザを開いて
http://127.0.0.1:808/hello
と指定する

となる。

ajaxでdocument.write→document.readyが通らない対策２つ

環境はIE、WindowsXP。
どうもAJAXで、読んできた内容をdocument.write()させると、
（いや、それ自体良くないという話も１つ、２つあるが、まあ、それは置いておいて）

$(function(){

// ここの中が、通らない！

});

みたい。つまり、JQueryのdocument.ready()が通らない。
この下に、functionとか書くと、そこは通る。

このとき、上記の通らない部分を通す方法（対策）２つ

---

■まず、事例（御題）

たとえば、以下のdatepickerを表示するプログラムを実行すると

<!doctype html>
<html>
<head>
  <title>Datepicker</title>
  <link rel="stylesheet" 

href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>

$(function(){
    $( "#datepicker" ).datepicker({
	dateFormat: "yy/mm/dd"
    });
});

function getdate()
{
	val = $( "#datepicker" ).val();
	alert(val);
}
  </script>

</head>

<body>
<p>Date: <input type="text" id="datepicker" /></p>
<BUTTON onclick="getdate()">date</BUTTON>
 </body>
</html>

のように、当然のことながら、そこにカーソルを入れれば、
datepickerが出る。

ところが、以下のAJAXを使ったプログラム

<HTML>

<head>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>

$(function(){ 

  $("#bt1").click(function () {

	$.ajax({

   		type: "POST",

   		url: "date.htm",

		dataType:"html",

   		success: function(msg){

			document.write(msg);

   		}

	});	

  });

}); 

</script>

</head>

<body>



<BUTTON id="bt1">AJAX</BUTTON>



</body>

</html>

を、（「AJAX」ボタンをクリックして）実行し、
AJAXから、上記プログラムを呼び出すと・・・

わかりにくいが、カーソルをテキストエリアにいれても、
datepickerにならない。
つまり、datepickerの設定をしている、
$(function(){
の部分、いいかえると、document.readyは通らないように見える。

一方、functionの部分は、「date」ボタンをクリックすると

のように表示されるので、プログラムは読まれているはず。

---

■原因らしきこと・・・？

ということは、document.write()では、document.ready
の状態（に対応するイベント）が起きないということ？

---

■対策１：外部参照させたら、なぜかうまく行った・・・

これは、偶然うまく行ったことで・・・
（対策２を紹介しようとしたら、
　いや、これで出来ますよ！といわれて、
　本当に出来たことなので、紹介）

（１）．まず、ajaxの呼び出し側で、
document.open(),document.close()をして、
ちゃんと、documentを開いて、そこに書かせるようにする。

<HTML>

<head>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>

$(function(){ 

  $("#bt1").click(function () {

	$.ajax({

   		type: "POST",

   		url: "date1.htm",

		dataType:"html",

   		success: function(msg){

			document.open();

			document.write(msg);

			document.close();

   		}

	});	

  });

}); 

</script>

</head>

<body>



<BUTTON id="bt1">AJAX</BUTTON>



</body>

</html>

（赤字が主要な変更点。青字は、都合上変更した点）

（２）そして、呼ばれるほう(data1.htm)は、
　　document.ready部分を、外部ファイルに追いやる。
　　以下のとおり

<!doctype html>

<html>

<head>

  <title>Datepicker</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script src="datescript.js"></script>

  <link rel="stylesheet" href="/resources/demos/style.css" />

  <script>



function getdate()

{

	val = $( "#datepicker" ).val();

	alert(val);

}

  </script>



</head>

<body>

 

<p>Date1: <input type="text" id="datepicker" /></p>

<BUTTON onclick="getdate()">date</BUTTON>

 

</body>

</html>

$(function(){
の部分が抜けて、そのかわり、datescript.jsを呼び出している。

（３）document.ready部分を別ファイルに記述
この別ファイル、datescript.jsの内容は、以下のとおり。

$(function() {

    $( "#datepicker" ).datepicker({

	dateFormat: "yy/mm/dd"

    });

});

こうすると、なぜか動く。
（動作結果は、上記のイメージと同じく、
　datepickerが出るだけなので、省略）

---

■対策２：onloadで読み込む

対策１は、外部ファイルにしないといけないため、
動的に生成する場合に問題があるかも・・・

というか、はじめに、こっちのほうを思いついて、
これを紹介しようと思ったんだけど・・・

（１）．まず、ajaxの呼び出し側で、
document.open(),document.close()をして、
ちゃんと、documentを開いて、そこに書かせるようにする。
（対策１とここまでは同じ）

<HTML>

<head>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>

$(function(){ 

  $("#bt1").click(function () {

	$.ajax({

   		type: "POST",

   		url: "date2.htm",

		dataType:"html",

   		success: function(msg){

			document.open();

			document.write(msg);

			document.close();

   		}

	});	

  });

}); 

</script>

</head>

<body>



<BUTTON id="bt1">AJAX</BUTTON>



</body>

</html>

（赤字が主要な変更点。青字は、都合上変更した点）


（２）そして、呼ばれるほう(data2.htm)は、
$(functon()
部分を、関数にしてしまい、その関数をonloadで読み込む

<!doctype html>

<html>

<head>

  <title>jQuery UI Datepicker</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <link rel="stylesheet" href="/resources/demos/style.css" />

  <script>

function syoki()

{

    $( "#datepicker" ).datepicker({

	dateFormat: "yy/mm/dd"

    });

}



function getdate()

{

	val = $( "#datepicker" ).val();

	alert(val);

}

  </script>



</head>

<body onload="syoki()" >

 

<p>Date2: <input type="text" id="datepicker" /></p>

<BUTTON onclick="getdate()">date</BUTTON>

 

</body>

</html>

（赤字が主要な変更点）

こうすると、動く。
（動作結果は、上記のイメージと同じく、
　datepickerが出るだけなので、省略）

---

■対策にならない（失敗）例：表示側を変更しない

document.open();、document.close();の追加だけを行い
（つまり、AJAXの呼び出し側だけ修正し）
呼ばれる側は、何の修正もしない(data.htmのまま）と、
$(function()
の部分は、実行されない（つまり、何も変わらない）。

Eclipseでのプロパティエディタの利用（２）編集

前回の

Eclipseでのプロパティエディタの利用（１）インストール
http://blog.goo.ne.jp/xmldtp/e/b935be5c9b63c12306a916e75170460d

で、インストールを行ったので、今回は、そのつづき、
プロパティファイルを作成し、編集します。

---

■プロパティファイル作成

プロジェクトの１つを右クリック

新規→その他を選ぶと

になるので、Java→プロパティファイルを選ぶ

新規ファイルのダイアログで、
WEB-INFの下、classesを選び、
ファイル名を入れて「完了」

---

■ファイルを表示する

このままだと、パッケージからは、
（図の左）WEB-INFのclassesは見えない。


そこで、ナビゲート→表示→ナビゲーター
すると、ナビゲーターからWEB-INFのclassesが見えて、
プロパティファイルが選べる

---

■編集

ダブルクリックすると、以下のように書ける画面になるので

てきとうに書く

日本語で普通に書いて入力してOK
（プログラム的に勝手に変換される）

保存するときは、普通のファイルとおなじく、
フロッピーアイコンをクリック。

すると、保存先を見ると

のように、書かれている

---

おしまい。

Eclipseでのプロパティエディアの利用（１）インストール

JSPでもStruts2でもなんでも？よく使うプロパティファイル。
native2asciiしなくても、編集した日本語がそのままエスケープしてくれる、
プロパティエディタで作ったほうが早い。

そこで、Eclipseのプラグインのプロパティエディタをインストールする
方法について、メモメモ
（これで出来たというだけで、これが正しいというわけではない）

今回は、インストール編

---

■インストール
（１）Eclipseを立ち上げる

（２）ヘルプ→新規ソフトウェアのインストールを選択

（３）でてきたダイアログで「追加」ボタンクリック

（４）リポジトリーの追加ダイアログで
　ロケーションに


http://propedit.sourceforge.jp/eclipse/updates/

と入力
（インストールにupdatesってのもへんだけど、
　まあ、これでうまくいく。名前は入れても入れなくても可）

OKボタンをクリックすると

（５）「保留中」になり


（６）いろいろ出てくるので、最後の
　「プロパティエディター」を選択して「次へ」

（７）そうすると、こんな画面になり

（８）となったら、「次へ」

（９）「使用条件の条項に同意します(A)」を
チェックして、「完了」をクリック

（１０）eclipseの右端に、進行状況が出る
（「ソフトウェアのインストール中　％」

（１１）以下のダイアログがでたら

OKをクリック

（１２）終わると

というダイアログが出る。
「今すぐ再始動」をクリックして再起動する

---

これでプロパティエディタはインストールされた。
次回は、使い方

違う入力項目に、同じ種類の入力チェックするJavascript

複数の入力項目があって、

入力項目が、数字項目だったら、入力後、数字チェックをして
　　エラーなら、入力項目の近くにエラーメッセージを出す

入力項目が、アカウントだったら、入力後、アカウント文字種チェックをして
　　エラーなら、入力項目の近くにエラーメッセージを出す

入力項目が、文字列だったら、入力後、文字チェックをして
　　エラーなら、入力項目の近くにエラーメッセージを出す
　　　　　　　：
　　　　　　　：
というようなJavascriptのチェック方法について
以下のようにするとできる。

---

■概要

・クラス名に、
　　　数字ならnum,
　　　アカウントならacc,
　　　文字列ならstr
　のように、チェックしたい内容に応じて、クラス名をつける

・エラーメッセージを出力するところのIDを、項目名＋"err"
　のように、固定に決める

・javascriptで、

　　$(".クラス名").blur(function(){
　　　　　エラーチェック
　　　　　エラーなら、this.name+"err"にエラーセット
  });

のような、エラーチェックを書く。

　なお、blurは、フォーカスを失ったときに実行するイベント

---

■ソースコード

こんなかんじ。クラスnumは数字チェック、
accは、アカウント名チェックで、アカウントに; , " ' \があると、
エラーになる。

<HTML>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" 



type="text/javascript"></script>



<script>

$(function(){ 



//------------------------------//

//	数字クラスチェック	//

//------------------------------//

  $(".num").blur(function(){

	myname = this.name;

	chkval =document.f1[myname].value;

	if (chkval.length == 0 )

	{

		$("#"+myname+"err").text("入力されてない");

		return;

	}



	for(i=0; i < chkval.length ; i ++)

	{

		c = chkval.charAt(i);

		if ( ( c < '0' ) || (c > '9') )

		{

			$("#"+myname+"err").text("入力値が数字じゃない");

			return;

		} 



	}

	$("#"+myname+"err").text("");

  });



//------------------------------//

//　アカウントクラスチェック	//

//------------------------------//

  $(".acc").blur(function(){



	myname = this.name;

	chkval =document.f1[myname].value;



	if (chkval.length == 0 )

	{

		$("#"+myname+"err").text("入力されてない");

		return;

	}



	for(i=0; i < chkval.length ; i ++)

	{

		c = chkval.charAt(i);

		switch(c)

		{

		case	';':

		case	',':

		case	'"':

		case	'\'':

		case	'\\':

			$("#"+myname+"err").text("許されない文字がある");

			return;

		} 

	}

	$("#"+myname+"err").text("");



  });

}); 

</script>



<body>

<form name=f1>

<INPUT type="text" name="text1" class="num"><SPAN id="text1err"></SPAN><BR/>

<INPUT type="text" name="text2" class="num"><SPAN id="text2err"></SPAN><BR/>

<INPUT type="text" name="text3" class="acc"><SPAN id="text3err"></SPAN><BR/>

</form>

</body>

</html>

Struts2等におけるプロパティファイルの参照方法

Struts2では、プロパティファイルの参照方法として、３種類（細かくは４種類）くらいに分けられる。


（１）ActionSupport（を継承したクラス）で見る
（２）JSP内で見る
（３）sタグを使う
　　　　s:propertyを使う
　　　　s:textを使う

以下、順にみていく

---

■前提
プロパティファイルを
WEB-INF/classes
の下に、「global_ja.properties」というファイル名で作成する。
内容は

sample.title=This is global screen.

また、struts.xmlで、以下のように

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC

	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"

	"http://struts.apache.org/dtds/struts-2.3.dtd">



<struts>

    <package name="struts2test" namespace="/" extends="struts-default">

        <action name="test" class="struts2.test.TestAction">

            <result name="success">/kekka.jsp</result>

        </action>

    </package>

    <constant name="struts.custom.i18n.resources" value="global"/>

</struts>

（赤字のところが、今回の説明対象）
プロパティファイルは宣言されているものとする

---

■ActionSupport（を継承したクラス）で見る
ActionSupportを継承したクラスで、getText(プロパティ名)で見れる

package struts2.test;



import com.opensymphony.xwork2.ActionSupport;

//	参考：http://ameblo.jp/tyoku123/entry-10439370680.html



public class TestAction extends ActionSupport{

	private static final long serialVersionUID = 1L;



	public String getMsg() {

		return msg;

	}



	public void setMsg(String msg) {

		this.msg = msg;

	}



	private String msg;

	

	public String execute() 

    {

		setMsg(getText("sample.title"));

		

        return SUCCESS;

    }



}

赤字のところが、今回の説明対象

---

■JSP内で書く

これは、struts2に限ったことではないが、ResourceBundle.getBundle
したResourceBundleオブジェクトに対して、getString(プロパティ名）
すると、値が取れる。

このサンプルは、「sタグを使う」とまとめて、後述のJSPサンプル内
にある。

---

■sタグを使う

s:propertyの場合には、value="getText('プロパティ名')で、
s:text name="プロパティ名"で
それぞれ取ってこれる。

「JSP内で書く」と合わせて、JSPサンプルは、こちら！

<%@ page contentType="text/html; charset=Shift_JIS" import="java.util.*" %>

<%@ taglib prefix="s" uri="/struts-tags" %>

<html>

<body>

<%



	Locale		objLcl	=	request.getLocale();

	ResourceBundle	objRb	=	ResourceBundle.getBundle("global",objLcl);

	String		str	=	objRb.getString("sample.title");



%>

Actionから　：<s:property value="msg"/><BR/>

JSPで　　　　：<%=str%><BR/>

s:propertyで：<s:property value="getText('sample.title')"/><BR/>

s:textで　　：<s:text name="sample.title"/><BR/>

</body>

</html>

結果

なお、このJSPは、前述のActionSupportの後に来ているJSPで、
ActionSupportの属性msgをs:property value="msg"で表示
している

---

■参考サイト

１．クラスライブラリを攻略「ユーティリティ編」 (1/5)
http://www.atmarkit.co.jp/ait/articles/0309/09/news002.html

２．Struts2:properties（プロパティファイル）の設定と取得
http://ameblo.jp/tyoku123/entry-10439370680.html

「Struts2等のOGNLによる、カンマのための３桁区切り」で、あれこれ

Struts2等でカンマ区切りするために、OGNLによる３桁区切りの例に関しては、


[struts2][ognl]金額をカンマ区切りで表示する
http://www.sorich.jp/blog/shimamura/2009/01/struts2ognl.html

に載っている。

つまり、以下のアクションを通ったとき

package struts2test;

import com.opensymphony.xwork2.ActionSupport;

public class MyAction extends ActionSupport{
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private String systemName;
	private String sv1;
	private int i1;
	private Integer iv1;
	
　　　　　　：
　　　　　　：

　　　（以下、setter,getterは省略）

iv1,i1,sv1(数字文字列）に数値がセットされる場合、この値を
カンマ区切りで出したいときのOGNL式は、以下のように
記述する。

<%@ page language="java" import="java.util.*,struts2test.MyStatic" pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags" %>

<html>

<head>

    <title>３桁くぎり</title>

</head>

<body>



<s:set name="decimalFormat" value="%{new java.text.DecimalFormat('#,###')}" />  

<s:set name="mynum1" value="%{new java.lang.Integer(i1)}" />  

<s:property value="%{#decimalFormat.format(#mynum1)}" /> <BR/>

参考：http://www.sorich.jp/blog/shimamura/2009/01/struts2ognl.html<BR/>



</body>

</html>

このとき、

＜s:set name="mynum1" value="%{new java.lang.Integer(i1)}" /＞

でnewして数字にしているけど、こうしておくと、型がわからないとき便利。
ためしに、上記のi1をiv1(型はInteger),sv1(型はString)に変えても動く。

---

この理由は、Integerのコンストラクタの引数は、intもStringもとり、
Integerを渡した場合は、オートボクシング機能により、自動的にint
に変換される。

また、それ以外の型の場合は、toString()を利用すれば、かならず
文字列になる（toString()はObject型にあり、Objectはすべての型
が継承しているので、かならずtoString()はある。もっとも、
toString()で思った数字になるとは、限らないが・・・）

なので、この書き方だと、どんな型を受け取ったとしても、いろいろ
変形して、どうにかなりそう・・

---

一般にStringをベースに、必要に応じて
処理を変えるほうが、考えやすいと思う
toString()があるので、どんな型でも
Stringには、変えやすい。

・・・ってこと、書いたっけ、どっかに？

IEでも、１つの画面で複数の文字コードの内容を表示できるケース

ちょっと、

１つの画面で複数の文字コードの内容を表示する－IE以外なら可能
http://blog.goo.ne.jp/xmldtp/e/27209b083d1e64f6f940a70491856642

で書いた書き方が、誤解を生みそうなので、ちょっと補足。

IEで表示できない（文字化けする）のは、「テキストファイル」のとき。

HTMLであれば、「IEでも、１つの画面で複数の文字コードの内容を表示できる」

---

具体的に言うと、以下のコードをEUCで保存し、euc.htmとする。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
</head>
<body>
日本語テストだよ（EUC)
</body>
</html>

また、SJISのテキスト、UTF-8のテキストを同じフォルダに
sjis.txt,utf8.txtというファイル名で作成する。

さらに、これと同じフォルダに以下のようにHTMLを書き

<html>

<head>

<title>インラインフレーム内に文字を表示する</title>

</head>

<body>

<H1>文字コードが違う場合(このページはSJIS)</H1>

<iframe src="sjis.txt" name="myFrame1" width="320" height="240"></iframe>

<iframe src="utf8.txt" name="myFrame2" width="320" height="240"></iframe>

<iframe src="euc.htm" name="myFrame3" width="320" height="240"></iframe>

</body>

</html>

コレを表示すると、

なかんじになる。
つまり、iframe内に、metaタグで、Content-Typeをeucと送れれば、
IEでも文字化けしない。

OGNLでの、日付の出し方

「OGNL　日付」で検索して、このブログにきちゃった人がいるみたい。
ごめんよ～、

日付などの０埋めあれこれ
http://blog.goo.ne.jp/xmldtp/e/ff7004ce513cececd20b8e135294ccdb

には、OGNLでの、日付の書き方は、書いていないのだよ・・・


こうやってやるんだ！

（１）SimpleDateFormatをつくる
　　　＜s:set name="dateFormat" value="%{new java.text.SimpleDateFormat('yyMMdd')}" /＞

（２）Dateを発生
　　　＜s:set name="mydate1" value="%{new java.util.Date()}" /＞

（３）（１）で（２）を表示
　　　＜s:property value="%{#dateFormat.format(#mydate1)}" />

（もちろん、＜　＞は、本当は半角）

ソースコードは、こんなかんじ

<%@ page language="java" import="java.util.*,struts2test.MyStatic" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>日付がんばる！</title>
</head>
<body>

<s:set name="dateFormat" value="%{new java.text.SimpleDateFormat('yyMMdd')}" />  
<s:set name="mydate1" value="%{new java.util.Date()}" />  
<s:property value="%{#dateFormat.format(#mydate1)}" /> <BR/>

日付変える<BR/>
<s:set name="mydate2" value="%{new java.util.GregorianCalendar(2013,5,10)}" />  
<s:property value="%{#dateFormat.format(#mydate2.getTime())}" /> <BR/>

</body>
</html>

結果は、こんなかんじ

yyMMdd(MMは大文字）、月は０から始まるので１増えている

クラス名を@で囲む・・って、まじ（＠＿＠！） struts2等のOGNL式でのstatic表示

いや～OGNL式、想定の斜め上いくわ～

Struts2での話。今、以下のようなクラス

package struts2test;

public class MyStatic {
	public static String staticName = "my name is static.";

	public static String getStaticName() {
		return staticName;
	}

	public static void setStaticName(String staticName) {
		MyStatic.staticName = staticName;
	}


}

があって、「staticName」を、s:propertyタグで出したいとする。
どうやって書くか・・・

すなわち、staticの値をどうやって書くかということなんだけど・・・

---

seasarのOGNLガイド
http://s2container.seasar.org/2.4/ja/ognl.html
に載っていたんだけど（以下太字は上記サイトより引用）、
まじ、びっくり！！


staticフィールド
staticフィールドにアクセスするには，クラス名の前後を'@'で囲んで，その後にフィールド名を記述します．クラス名はパッケージ名で修飾した完全限定名を指定する必要があります (java.langパッケージの場合は省略することが出来ます)．



まじっすか（＠＿＠！）
まじに、＠で囲むんっすか・・・

・・・本当か？

やってみた。
JSP

<%@ page language="java" import="java.util.*,struts2test.MyStatic" pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags" %>

<html>

<head>

<title>staticのテスト</title>

</head>

<body>



s:propertyタグでstatic　－　<s:property value="%{@struts2test.MyStatic@staticName}" /><BR/>

参考文献　http://s2container.seasar.org/2.4/ja/ognl.html<BR/>



</body>

</html>

結果


ほんと～だ～

日付などの０埋めあれこれ

日付が、たとえば2013年5月6日のような場合、

20130506

という風に月、日の前に０を埋める。
このようなときの注意点あれこれ

---

■【日付のみ】Datepickerは日付、フォーマットチェックしない。

DatePickerのdateformatを指定しても、
かならずしも、そのフォーマットで受け取れるとは限らない。

DatePickerが出ているのに、そのDatePickerをまったく無視して、
入力欄に不正の文字をいれてしまうと、その入力を受け取ってしまう。

例えば、

http://jqueryui.com/datepicker/

のview sourceで出てくるソースを以下のように修正し、

<!doctype html>
<html>
<head>
  <title>jQuery UI Datepicker</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
	dateFormat: "yy/mm/dd"
    });
  });
function getdate()
{
	val = $( "#datepicker" ).val();
	alert(val);
}
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker" /></p>
<BUTTON onclick="getdate()">日付</BUTTON>
 
 
</body>
</html>

でたらめな日付を入れて、

「日付」ボタンをクリックすると

ちゃんと値が取れる＝入ってしまっている。

つまり、Datepickerは入力支援をしてくれるだけであり、
入力値の保証は無いみたいに見える。

---

■if文で１０以下なら０をつける場合

比較するとき、完璧に数字で比較しているならいいんだけど、
文字で"10"と比較してしまうと、
６は、１０より「小さい」数字だけど、
６は、１０より「大きい」文字なので（６と１を比較するので、６のほうが大きい）
となり、大小関係がおかしくなる。
たとえば、

<!doctype html>

<html>

<head>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>

function chk()

{

	val = $( "#id1" ).val();

	if ( val > 10 )

	{

		alert(val+"は10より大きい数");

	}

	else

	{

		alert(val+"は10よりちいさい数");

	}

	if ( val > "10" )

	{

		alert(val+"は10より大きい文字");

	}

	else

	{

		alert(val+"は10よりちいさい文字");

	}

}

</script>

</head>

<body>

<p><input type="text" id="id1" name="id1" /></p>

<BUTTON onclick="chk()">チェック</BUTTON>

</body>

</html>

で、６とか入れてみると判る。

このように数字と文字を10,"10"と明示してある場合には
間違えないが、これを変数に入れてしまったりしたときに、
気がつかないことがありえる。

---

■キレイな０うめ

ここで、キレイな０埋めの例を見たので、メモメモ。


【JavaScript】ゼロパディング(ゼロ埋め)
http://www.ore-memo.com/447.html


val = 9; // 9にち
val = ("00"+ val).slice(-2);

0埋めしたい最大数分0をたし、桁数分-で値を入れる。
今回は2桁なので、00と-2

こうすると、1234のように、もともと幅が長い場合は34のように
下２桁が切られるが、ちゃんと２桁になる。

サンプル

<!doctype html>

<HTML>

<head>

<script>

function zero2(val)

{ 

	return ("00"+val).slice(-2);

}

</script>

<body>

<Button onclick="alert(zero2(12))">12</BUTTON><BR>

<Button onclick="alert(zero2('2'))">2</BUTTON><BR>

<Button onclick="alert(zero2(''))"></BUTTON><BR>

<Button onclick="alert(zero2(1234))">1234</BUTTON><BR>

http://www.ore-memo.com/447.html

</body>

</html>

１つの画面で複数の文字コードの内容を表示する－IE以外なら可能

ある画面がSJISないしUTF８で、その画面にLinuxのログを表示したい。
LinuxのログはEUC-JP
なんていう場合、１つの画面に、SJISとEUCのように、複数の文字コードを
表示しないといけないことになる。

これは、可能なのか？

結論から言うと

・ログのようなテキストファイルを送る場合、
　　IE以外なら可能

・IEの場合は、
　　サーバ側で「Content-Type:」で文字コードを指定できないとX
　　→つまり、テキストでは、そういうことができない（たぶん）。
　　　PHPとか、JSP,サーブレットなどで処理する必要がある

---

■基本的方針

　IFRAMEを使うと、IFRAMEの中に、文字なりHTMLを書き出すことが出来る。
　そこで、この

　　　　IFRAMEの中の文字コードをSJISに変えれば、SJIS文字列が
　　　　IFRAMEの中の文字コードをUTF8に変えれば、UTF8文字列が
　　　　IFRAMEの中の文字コードをEUCに変えれば、EUC文字列が

　表示できるはずです※・・・めでたしめでたし・・・


　・・・とはならないのです。
　この文字列をajaxを使って受け取り、表示させようとすると、
　なぜか勝手に、UTF-8と思って処理してくれます。
　なので、UTF-8以外のコードの文字列では、おかしな文字に変換されてしまいます。

　この変換を、断固として、阻止しなければなりませぬ！

※なお、EUC以外のSJIS,UTF-8は、IFRAMEのSRCに指定すると、IEでもChromeでも判断して
　　表示してくれる

---

■どこで、判断しているのか？

どうも、変換してしまうのは、ヘッダーの

　　　　　Content-Type: text/html;charset=shift-jis

のところの指定が、ないからのようです。
そりゃー、テキスト表示してるんですから、ここは、操作できませんもんね。

なので、ここを、強制的に

beforeSend: function(xhr){
xhr.overrideMimeType("text/html;charset=EUC-JP");
},

と送ってしまい、その内容を表示させればいいようです
・・・・IE以外は・・・

---

■でもIEは・・・

ここがうまく行かないようです。
なので、現状、UTF-8でしかいきません。
IEで、うまく表示させるには、
サーバー側で、
　　　　　Content-Type: text/html;charset=shift-jis
を送らないといけないということですかね・・・

---

■サンプルコード

<html>
<head>
<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<title>インラインフレーム内に文字を表示する</title>
<script language="JavaScript"><!--
$(function(){ 
	$.ajax({
		type:"POST",
		url: "sjis.txt",
		datatype:"text",
		beforeSend: function(xhr){
     			xhr.overrideMimeType("text/html;charset=Shift_JIS");
		},
		success: function(msg){
			myFrame1.document.open();
			myFrame1.document.charset='Shift_JIS';
			myFrame1.document.write(msg);
			myFrame1.document.close();
 		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			alert(errorThrown);
		}
	});

	$.ajax({
		type:"POST",
		url: "utf8.txt",
		datatype:"text",
		beforeSend: function(xhr){
     			xhr.overrideMimeType("text/html;charset=UTF-8");
		},
		success: function(msg){
			myFrame2.document.open();
			myFrame2.document.charset='UTF-8';
			myFrame2.document.write(msg);
			myFrame2.document.close();
 		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			alert(errorThrown);
		}
	});

	$.ajax({
		type:"POST",
		url: "euc.txt",
		datatype:"text",
		beforeSend: function(xhr){
     			xhr.overrideMimeType("text/html;charset=EUC-JP");
		},
		success: function(msg){
			myFrame3.document.open();
			myFrame3.document.charset='EUC-JP';
			myFrame3.document.write(msg);
			myFrame3.document.close();
 		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			alert(errorThrown);
		}
	});

}); 
// --></script>
</head>
<body>
<H1>文字コードが違う場合(このページはSJIS)</H1>
<iframe name="myFrame1" width="320" height="240"></iframe>
<iframe name="myFrame2" width="320" height="240"></iframe>
<iframe name="myFrame3" width="320" height="240"></iframe>

</body>
</html>

なお、「document.charset」は、それをしてもだめだめということを
示すためにやっているだけで、その行を削除しても、以下の表示は
変わらない（つまり、
myFrame1.document.charset='Shift_JIS';
myFrame2.document.charset='UTF-8';
myFrame3.document.charset='EUC-JP';
の３行は不要）。

このコードのほかに、このコードと同じフォルダ（ディレクトリ）に
SJISで書いたsjis.txt
EUCで書いたeuc.txt
UTF-8で書いたutf8.txt
の３種類のファイルを用意する（その内容が書き出される）

---

■結果

Chrome

IE

---

参考サイト
・インラインフレーム内に文字を表示する
http://www.openspc2.org/reibun/javascript/frame/007/index.html


・複数の文字コードをformからCGIへ送信する方法
http://search.web-sun.com/zatu/charset.html

・jQuery.ajax で overrideMimeType する方法Add http://d.hatena.ne.jp/teramako/20080913/p1

・AjaxでShift_JISのファイルを取得する
http://www.polidog.jp/2010/06/07/ajax%e3%81%a7shift_jis%e3%81%ae%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%92%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b/

「BtoB市場におけるWebマーケティングの支援手法」という話を聞いてきた

中小企業診断士更新研修で、

「BtoB市場におけるWebマーケティングの支援手法」
講師　中小企業診断士　遠藤康浩　先生

（中小企業診断士の敬称は、「先生」らしい。私は、「いたずら先生」ですね。
　それはさておき・・・）
のお話を聞いてきたので、営業妨害にならない程度にメモメモ

---

■話の内容
・BtoB市場のwebマーケティングの要点
　　営業プロセスの切り分け
　　キーワードとメッセージの整合性
　　戦略の構築

・新規事業への応用
・実際の支援

---

■BtoB市場のwebマーケティングの要点

【営業プロセスの切り分け】

営業の流れ

　　ファーストコンタクト　－
　　　　　↓　　　　　　　　｜HPでできること
　　　ヒアリング　　　　　－
　　　　　↓　　　　　　　－
　　　見積もり　　　　　　↓　のこりは人間
　　　　　↓
　　　クロージング
　　　　　↓
　　　　成約

・誰から、どんなメッセージを、どのタイミングで
　受け取ればいいか

・売れる商品　　→　　HP
　売りたい商品　→　　人間が売る
　を分ける

【キーワードとメッセージの整合性】

成約までのWebの流れ

　　検索エンジン表示　　　－

　　　　　　　　　　　　　　｜　　A

　　ホームページアクセス　－



　　問い合わせ　　　　　　－

　　　　　　　　　　　　　　｜　　B

　　成約　　　　　　　　　－

Aはお金で解決できる戦術レベル（SEO対策）
Bは、戦略レベル

【戦略の構築】
HPを決める→ホームページ基本設計書

---

■新規事業への応用

・HP基本設計書：基本戦略からwebページ作成まで

【手順】
　　現状把握
　　全社戦略
　　営業戦略
　　ホームページの検討

【検討内容】
　　目標成約数→アクセス数がきまる
　　ターゲット決定→アイキャッチがきまる
　　～入門→問い合わせの敷居を下げる

　　メッセージの整合性
　　ターゲットが興味を示すコンテンツの誘導
　　出口への誘導：電話入れたほうがいい

【注意すること】
　安く売りたいのでなければ、「コストダウン」と書くな
　　→言質とられて、安くさせられる

---

■実際の支援

・出口をはっきりさせる
　　HPの予算ばらばら→予算にあったものを
・Webページ＝投資
・コンサルの対象は社長
・維持管理の体制、構築
・Web制作のよきパートナーを見つける
・SEO対策は信頼できるプロに
・ライター、カメラマンの確保
　　　専門用語の連発は良くない

---

本当はこのほかに具体的な事例が有り、
もっと詳しく教えてくれたんだけど、
それを書くと、営業妨害になりそうなので、省略。

ちなみに、この講師のサイトは、以下のとおり

合同会社　ENコンサルティング
http://www.en-consulting.jp/

のひとです