今回は、「JSP+Servletでアニメーションしたい」を実現してみました。それなりですが、localで動かしているうちはpythonの方が簡単だし、そもそもjsで行けるじゃんが結論ですが、一応いろいろ遊んだので記録しておきます。
今回の参考は以下のとおりです。
【参考】
①js_arrays@JS Tutorial@w3schools.com
②element.style.position - 表示位置設定@JavaScriptist
③一定時間で画像を切り換える@JSすぐに使えるサンプル集
④JSPでの画像ファイル表示
やったこと
・指定した画像を表示する
・アニメーション
・指定した画像を表示する
前回、既に画像表示は出来たので、今回は画面入力で指定した画像を貼れるようにした。
一応、参考④を参考にしている。
何か入力してのテキストエリアに12.pngを入力して送信ボタンを押すと、
以下が出力する。
【参考】もしサーバーポート使用済エラーが出たら、以下参照
ローカル・ポストのTomcat8(Java8)をダブルクリックしてポート番号を適当に変更（10ずつ増やす）
⑤Tomcatが「ポートが使用中」で起動できない場合の対処方法
・コード
JSPは以下のとおり
<body>
<br/>
<p>Servletから"foo"で対応する文字列を表示</p>
<%= request.getAttribute("foo") %><br/>
<p>Servletに"name"文字列を送信</p>
<form method="post" action="./helloPicture">
何か入力して: <input type="text" name="name">
<button type="submit">送信</button>
</form>
<br/>
<p>Servletから"userName"文字列を取得して表示</p>
<%= request.getAttribute("userName") %>
<br/>
<p>Servletから"useName"文字列を取得して対応した画像を表示</p>
<img src="${pageContext.request.contextPath}/media/<%= request.getAttribute("userName") %>" width="400px" height ="400" name="<%= request.getAttribute("userName") %>">
<br/>
</body>
Servletは以下のとおり
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// JSPに適当な文字列を渡す
request.setAttribute("foo", "1.png,2.png,...15.png");
// userNameが何もない場合は"1.png"をuserNameに渡す
String name = (String) request.getAttribute("userName");
if (name == null || "".equals(name)) {
request.setAttribute("userName", "1.png");
}
String view = "/WEB-INF/view/index_simple.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
// JSPにuserNameをdispatchします
dispatcher.forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 文字コードの指定
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
// userNameの中身をnameに渡す
request.setAttribute("userName", name);
// name文字列をconsoleに出力
System.out.println(name);
doGet(request, response);
}
因みに、各要素の配置は以下のとおり
・アニメーション
まず、Gifアニメーションの表示は、通常の画像と同じなので、face_smile11.gifを上記のテキストエリアに入れて押せば以下が上記画像の位置に表示されます。
そして本格的？なアニメーションは
絵が動かないと上と全く同じなので省略
...
こんな感じ、下の大きい方が動きます。
コード
Servletは変更ありません。
つまり、上記の話を別にすると、Servletとのやり取り無しでJSP内で動きます。
※Servletいらないです
<body>
...
<img src="mayuyu.gif" width="400px" height ="400px" name="mayuyu">
<div id="comment"></div>
</body>
<script type="text/javascript">
img_ = new Array("1.png","2.png","3.png","4.png","5.png","6.png","7.png",...); //*1
com_ = new Array("1.png","2.png","3.png","4.png","5.png","6.png","7.png",...); //*2
count_ = -1; //*2
mayuyuTimer();
function mayuyuTimer() {
//画像番号
count_++; //*3
//画像の枚数確認
if (count_ == img_.length) count_ = 0; //*4
//画像出力
document.mayuyu.src = "${pageContext.request.contextPath}/media/"+img_[count_]; //*5
//コメント出力
document.getElementById("comment").innerHTML = com_[count_]; //*3
//次のタイマー呼びだし
setTimeout("mayuyuTimer()",500); //*6
}
</script>
また、途中のimg_ = new Array(...)を記載するのは疲れるので、以下のコードでできることが分かりました。
<script>
var fruits, text, fLen, i;
fruits = ["1.png","2.png"];
fLen = fruits.length;
function myFunction() {
fLen = 26; //fruits.length;
for (i = 3; i < fLen; i++) {
fruits.push( i + ".png");
}
for (i = 1; i < fLen; i++) {
fruits.push( fLen - i + ".png");
}
return fruits;
}
</script>
<script type="text/javascript">
img_ = myFunction();
...
あれ？このコードの方が長く見えますね。しかし、同じ動作の繰り返しが精神的に疲れるので、コードで書いて動くと格別です。
※手で入れるときは10個位で疲れますが、ある意味いくつでも設定できます。上記は26個までの往復51個設定しています。
また、ディレクトリ構成は上記と全く同じです。
まとめ
・ご指名の画像を表示する
・アニメーションをやってみる
・Javascriptを利用してアニメーションの配列をセットする
・もう少し動きのあるものをやってみようと思います