さとうきびの初心者プログラミング日記

Unity,Java,Pythonとかで調べたことをまとめていきます。間違っていることがあったら、コメント等で教えてくれるとありがたいです..!

jsp と サーブレット で値の受け渡しをする。

Java


どんなWebアプリ?

今回は、jspとサーブレットで値の受け渡しを行いました。
作ったのは、足し算をするWebアプリです。

下記のような感じで値の受け渡しを行います。
f:id:yuhgt:20170227202643p:plain

input.jspでユーザから受け取った値をCalculator.javaで計算して、
result.jspで表示します。


さっそく作りましょう！

今回のwebアプリのフォルダ構成は以下のようになります。
f:id:yuhgt:20170227202751p:plain

tomcatのwebappsフォルダに上のようなフォルダ構成を作りましょう。


Calculator.java の作成

まずは値を受け取って計算をする部分を作ります。

Calculator.java

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class Calculator extends HttpServlet {

  public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws IOException, ServletException{

    float num1 = 0;
    float num2 = 0;
    float resultNum;

    try {
      num1 = Float.parseFloat(request.getParameter("num1"));
      num2 = Float.parseFloat(request.getParameter("num2"));
      resultNum = num1 + num2;
    } catch (NumberFormatException e) {
      resultNum = 0;
    }

    request.setAttribute("num1", num1);
    request.setAttribute("num2", num2);
    request.setAttribute("resultNum", resultNum);

    getServletConfig().getServletContext().
      getRequestDispatcher("/jsp/result.jsp").forward(request, response);
  }
}

数字ではない値を受け取った時、一応 ‘0’ を返すようにしています。

request.getParameter()で、ユーザからの根本のデータを受け取り、
request.setAttribute()で、受け取った値を処理してできた情報などを付け加える という感じでしょうか..
しっかりとした理解ができていないので、もっと調べたほうがよさそうです。

web.xml の作成

web.xml

<?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>calculator</servlet-name>
    <servlet-class>Calculator</servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>calculator</servlet-name>
    <url-pattern>/calc</url-pattern>
  </servlet-mapping>

</web-app>

web.xmlです。

自分で作っている時、"calculator"のつづりを
何箇所か"caluclator"にしていて、かなり苦戦しました.. ；；


jspファイルの作成

input.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
  <head>
    <title>input</title>
  </head>
  <body>
    <form method="POST" action="/calculationApp/calc">
      <input type="text" name="num1" size="6"> + 
      <input type="text" name="num2" size="6">
      <input type="submit" value=" = ">
    </form>

  </body>
</html>

ユーザから受け取った値をxmlでマッピングした/calc に送ります。


result.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<html>
  <head>
    <title>result</title>
  </head>
  <body>
    <%= request.getAttribute( "num1" ) %> + 
    <%= request.getAttribute( "num2" ) %> = 
    <%= request.getAttribute( "resultNum" ) %>
  </body>
</html>

サーブレットでrequest.setAttribute()したものを
request.getAttribute()で受け取ることで値を表示します。

完成！

サーバを起動し、以下URLにアクセスしましょう。
http://localhost:8080/calculationApp/jsp/input.jsp

以下、実行結果です。
f:id:yuhgt:20170227215320p:plain

f:id:yuhgt:20170227215356p:plain

f:id:yuhgt:20170227215410p:plain

お疲れ様でした！
ここまで読んでくれてありがとうございます。

参考にしたサイト様

今回は、以下のサイトを参考に進めました。
ありがとうございます。

mamanigo.seesaa.net


Unity で ダメージUI を作る(2D)

Unity

今回は、UnityにてダメージUIを作ってみました。

f:id:yuhgt:20170225162700g:plain

敵に攻撃した際やプレイヤーが攻撃を受けた際に、
受けたダメージの量を出してくれるものです。
出した後は、重力に従い下に落ちて消えます。

いろいろな実装の仕方があると思いますが、
自分がやってみた方法を一つ紹介したいと思います。


DmageTextプレハブの作成

Create Emptyで空のGame Objectを作成します。
名前をDamageTextとします。

f:id:yuhgt:20170225153557p:plain

Add ComponentでText MeshとRigidbody 2Dをつけましょう。

f:id:yuhgt:20170225155126p:plain

Mesh RendererのTextに適当な数字と,
Fontを好きなものに変えます。

完成したらPrefabsディレクトリに入れておきましょう。

今、ゲームの実行画面では、以下のような感じです。

f:id:yuhgt:20170225154138p:plain


DamageTextを飛ばす&消す

次にこのDamageTextのスクリプトを作成します。
Add ComponentでNew Scriptをし、Scriptをつけます。
DamageTextSCR.csという名前にしました。

DamageTextSCR.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class DamageTextSCR : MonoBehaviour {

    // Use this for initialization
    void Start()
    {
        GetComponent<Rigidbody2D>().AddForce(new Vector3(Random.Range(-80, 80), Random.Range(100, 180), 0));
        StartCoroutine(DestroyObject());
    }

    private IEnumerator DestroyObject()
    {
        yield return new WaitForSeconds(0.6f);
        Destroy(this.gameObject);
    }
}

このスクリプトによって、生成時に上に'ぴょんっ'と跳ねて、
0.6秒後に破棄されます。

DamageTextをプレハブから生成する

もうほとんど完成なので、あとはこのDamageTextを
プレハブから生成してあげるだけです。

本来なら、PlayerやEnemyのDamage関数に書けばいいのですが、
今回は試しにButtonが押されたら生成という風にしておきます。

CanvasにButtonを設置し、
DamageButton.csを作成します。

DamageTextScr.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class DamageButton : MonoBehaviour {

    public GameObject DamageText;

    public void OnClick()
    {
        //                      発生位置(本来なら敵のtransform.position)                            発生させたいテキスト
        Instantiate(DamageText, new Vector3(0,0,0), transform.rotation).GetComponent<TextMesh>().text = "1";
    }
}

スクリプトが完成したら、
Buttonの設定をして、DamageButtonスクリプトに
DamageTextprefabをドラッグ・アンド・ドロップで設定してあげれば完成です！

完成！

f:id:yuhgt:20170225163009g:plain

お疲れ様です。
読んでくれてありがとうございました。

もっと良い実装がありましたら、ぜひ教えてください；；！


Tomcat -JSPでカウンターを作ってみる(Mac)

Java


とりあえずHelloWorldしてみる

前回作ったtest/ディレクトリの中に jspSample/というディレクトリを作りましょう

webapps/
├ test/
   ├ jspSample/
   ┗ WEB-INF/
      ┗ classes/


jspSample/の中に.jspファイルを作成していきます。
まずはHelloWorldですね。

jspSample/ディレクトリの中にhello.jspを作成し、
以下の内容を追記します。

hello.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <%
      out.print("Hello World!");
    %>
  </body>
</html>

htmlの中にJavaのコードを埋め込み、
実行できるようになったものがjspみたいですね。

webapps/
├ test/
   ├ jspSample/
   │  ┗ hello.jsp
   ┗ WEB-INF/
      ┗ classes/

.jspファイルは、コンパイルしなくていいので
上記のような構成になっているのを確認したら、URLを開いて確認しましょう。

http://localhost:8080/test/jspSample/hello.jsp

無事HelloWorldが確認できたでしょうか？
サーブレットに比べて、かなり簡単にできたかと思いますが、
jspとサーブレット、どちらが優れているということはないので、
状況によって使い分けていけると良いですね！
今回はとりあえずjspのみで作っていこうと思います。


jspとサーブレットの違いについて、
すごくわかりやすく解説してくださっているサイト様です。



アクセスカウンター

次はアクセスカウンターを作ってみましょう。

その前にdata/ディレクトリをtest/ディレクトリに作ります。

webapps/
├ test/
   ├ data/
   ├ jspSample/
   ┗ WEB-INF/
      ┗ classes/

ここはカウントの値を保存するファイルを格納する場所として使います。


次にjspSample/ディレクトリの中にcounter.jspを作成し、
以下の内容を追記しましょう。

counter.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="java.io.*" %>
<html>
  <head><title>counter</title></head>
  <body>
    <%! int count; %>
    <%
      request.setCharacterEncoding("UTF-8");
      synchronized(this) {
        try {
          String fname ="/usr/local/Cellar/tomcat/8.5.11/libexec/webapps/test/data/counter.txt";
          File file = new File(fname);
          if( file.exists() ) { 
            BufferedReader br = new BufferedReader(new FileReader(file));
            String line = br.readLine();
            count = Integer.parseInt(line);
            count++;
            br.close();
          } else 
            count = 1;
          PrintWriter pw = new PrintWriter(new BufferedWriter(new FileWriter(file)));
          pw.println(count);
          pw.close();
        } catch( Exception e ) { }
      }
    %>
    count :<%= count %><br>
  </body>
</html>

ファイルの内容としては、
ファイルがあればその値を読み取り ++1して上書き、
なければ新しくファイルを作り “1” を書き込むという シンプルなものだと思います。

保存出来たら確認してみましょう！

http://localhost:8080/test/jspSample/counter.jsp



更新をするたびに値が増えていけば、きちんと動作しています。
ここまで読んでくださってありがとうございます！
お疲れ様でした。


参考にしたサイト様

KAZU JAVA/JSP/アクセスカウンター

Tomcat -ServletでHelloWorldしてみる(Mac)

Java


インストールされてない方は前回記事からお願いします。

今回は以下のサイトの流れで進めているので、
こちらのサイトの方も参考にしてください！


管理用のユーザの追加
$ vim /usr/local/Cellar/tomcat/8.5.11/libexec/conf/tomcat-users.xml

/usr/local/Cellar/tomcat/8.5.11/libexec/conf/にある
tomcat-users.xmlというファイルを開きましょう。

自分はvimで開いたため上のコマンドを使用しましたが
テキストエディタで開いて構いません。

  <role rolename="manager-gui"/>
  <user username="tomcat" password="tomcat" roles="manager-gui"/>

tomcat-usersというタグ内に追記してください！
追記できたら保存してサーバの起動を行いましょう。

起動
$ /usr/local/Cellar/tomcat/8.5.11/bin/catalina start

http://localhost:8080/

起動できたらTomcatの画面で画面右のManager Appというボタンを押します。
先ほど追記したusernameとpasswordを入力し、管理画面が表示できれば設定完了です。


アプリケーションの構成

Webアプリのルートとなるディレクトリを作ります。
/usr/local/Cellar/tomcat/8.5.11/libexec/webapps/の中にtestというディレクトリを作りましょう。

webapps/
├ test/


さらにtestの中に以下のようにディレクトリを作成しましょう。

webapps/
├ test/
   ┗ WEB-INF/
      ┗ classes/

test/の中にWEB-INF/、
そのWEB-INF/の中にclasses/という感じです。
これがアプリケーションの構成になります。

サーブレットの作成

サーブレットってなんだろう？と自分も思いました。
以下のサイトがすごくわかりやすかったので紹介しておきます。

簡単に言うとサーブレットとは

「WEBアプリを開発するために作られたJavaプログラムの部品」

とありますね！

HelloWorld.javaを作成していきます。

HelloWorld.java

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>Hello World!</title>");
    out.println("</head>");
    out.println("<body>");
    out.println("<h1>Hello World!</h1>");
    out.println("</body>");
    out.println("</html>");
  }
}


ファイルが完成したら適当な場所に保存しコンパイルします。

$ javac -classpath "/usr/local/Cellar/tomcat/8.5.11/libexec/lib/servlet-api.jar" HelloWorld.java

-classpath " "の部分はインストールした環境によって異なるので
自分がインストールした場所を指定しましょう。

出来上がった HelloWorld.classファイルを
先ほどのclasses/ディレクトリに置きましょう。

webapps/
├ test/
   ┗ WEB-INF/
      ┗ classes/
         ┗ HelloWorld.class

classファイルはclassesディレクトリに保存します！


次に，WEB-INF/ディレクトリ内に，下記のような web.xml を作成します。

web.xml

<?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>HelloWorldName</servlet-name>
    <servlet-class>HelloWorld</servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>HelloWorldName</servlet-name>
    <url-pattern>/HelloWorldPage</url-pattern>
  </servlet-mapping>

</web-app>


記述の仕方に関しては、以下の記事がすごくわかりやすいです！

現在のフォルダ構成は、以下のようになります。

webapps/
├ test/
   ┗ WEB-INF/
      ├ web.xml
      ┗ classes/
         ┗ HelloWorld.class


ここまできたら、あとは実行できるか確認してみます！
以下のURLにアクセスしてみましょう。
http://localhost:8080/test/HelloWorldPage



f:id:yuhgt:20170224005040p:plain

HelloWorldできたら、完成です。
お疲れ様でした。
すごく長かったですね；；

参考にしたサイト様


Tomcat -HomeBrewを使ってインストール(Mac)

Java

Tomcatをインストールする機会があったので
自分が行ったインストール手順をメモしておこうと思います。


tomcatがあるか調べて見る
$ brew search tomcat
tomcat    tomcat-native    tomcat@6
tomcat@7    tomcat@8.0

ありました！

インストール
$ brew install tomcat
==> Using the sandbox
==> Downloading https://www.apache.org/dyn/closer.cgi?path=tomcat/tomcat-8/v8.5.
==> Best Mirror http://www-eu.apache.org/dist/tomcat/tomcat-8/v8.5.11/bin/apache
######################################################################## 100.0%
🍺  /usr/local/Cellar/tomcat/8.5.11: 631 files, 12.5M, built in 2 minutes 12 seconds

/usr/local/Cellar/tomcat/8.5.11 にインストールされました。

起動
$ /usr/local/Cellar/tomcat/8.5.11/bin/catalina start

Tomcat started.と出てくれたら起動したはずなので確認してみましょう ブラウザから以下のURLにアクセスしてください。

http://localhost:8080/

変な猫がいるサイトが見れれば起動しています。
f:id:yuhgt:20170223134824p:plain
(可愛くない…)

停止
$ /usr/local/Cellar/tomcat/8.5.11/bin/catalina stop


一応停止させておきましょう。
停止させるとサイトが見れなくなるので、
またこの画面に来る時は起動のコマンドを打ちましょう！

ありがとうございました。
次は、設定の方をしていきたいですね。



参考にしたサイト様



はじめまして

雑談

 

はじめまして。

プログラミングやUnityのことで調べたことをすぐに忘れてしまうので

メモの代わりにとブログを作ってみました。

 

マークダウン記法も一緒に学べたらいいなと思っています。

 

よろしくお願いします！