Alterbo Inc.
お問い合わせ

BLOG

SpringFrameworkを使用したシステム改修

こんにちは、ひっしーです。

今回は、java SpringFrameworkで作成された書籍・携帯端末の在庫管理システムを改修・機能追加を行いましたので、私の担当した追加機能とそれに伴い使用した技術について備忘録としてまとめていきます。

SpringFramework の理解

java Spring Frameworkについて、今回初めて触ることになりましたので、まずはこのフレームワークの理解からスタートいたしました。

こちらのフレームワークは、javaでwebアプリケーションを作成する際により効率よく作成できるように特化したツールになります。

web画面側の操作、javaを使用した処理、データベースの操作
これらを分けて作成でき、且つ簡単に連携させることができるものになります。

通常はBeanのインスタンス化は自分で変数の中身をインスタンス化して指定する必要がありますが、SpringFlameWork内のSpring MVCによって、型と変数名を指定するだけでSpringの管理下にある適切なインスタンスを自動的にインスタンス化してくれます。

プロジェクト内のどこからでも自由に行うことができるので、効率よくサーバーの処理を記述できるようになりました。

今回は、実際にSpringの機能を使用してシステム改修を行っていきました。

追加機能/メールアドレスの判定(Java側)

今回改修したシステムでは利用者の情報を登録して一覧表示する機能があります。

登録情報の中にメールアドレスを記入する欄がありますが、メールアドレス以外の文字列も打ち込める状態でした。

こちらを正しくメールアドレスとしての表記になっているものしか入力が通らないように改修を行いました。

@Patternを使用した入力チェック

今回のメールアドレスを判定するにあたり、Springで使用できる「@Pattern」のアノテーションを用いて入力チェックを行いました。

使用方法としては以下のようになります。
チェックしたい変数の上に@Patternを記載して使用してください

@Pattern(regexp = "判定の条件を記入",message="エラー時に表示させたい文字") 
private String email;//判定したい変数

このように、入力のチェックを行いたい変数の上に@Patternを記載することで中身のチェックをしてくれます。

例えば以下のように書いた場合は5桁から10桁までの数字を入力できるようになります。

@Pattern(regexp = "^\\d{5,10}$")
private String test;

regexp =で「^\d{5,10}$」という条件を指定しています。
この 「^\d{5,10}$」 は 5桁から10桁までの数字 のみを認めるという意味になります。
このような表記の仕方を正規表現といいます。
正規表現の詳しい内容については今回は割愛しますので調べていただけると幸いです。

ここまで分れば後は、メールアドレスの正規表現を使用することでアドレスの入力判定が実装できそうです。

メールアドレスの正規表現については調べるといろいろ出てきますので是非参考にしてください。
今回はこちらを使用します。

"^([\\w])+([\\w\\._-])*\\@([\\w])+([\\w\\._-])*\\.([a-zA-Z])+$"

この正規表現を利用して実際に実装したコードがこちらになります。

@Pattern(regexp = "^([\\w])+([\\w\\._-])*\\@([\\w])+([\\w\\._-])*\\.([a-zA-Z])+$",message="有効なメールアドレスではありません")
private String email;

こちらを実装することでメールアドレスとして正しく入力できていない文字列は入力できないように改変することができました。

機能追加/一覧のソート機能(HTML/jQuery側)

次に一覧として表示された社内の備品（本や携帯など）をソートして表示させる機能を実装しましたので、方法について解説していきます。

今回は、もともと出来ていたシステムにソート機能を追加することになりましたので、出来合いのものは変えずに最小限の変更でソートを実装しようと考えた結果、jQueryを用いた機能の実装を試みました。

jQuery　 tablesorter を利用したソートの実装

jQueryにはさまざまなプラグインがある為、使用用途に合わせてインポートすることで便利な機能を使用することが可能になります。

今回、私は一覧のソートを行いたかったので tablesorter というプラグインを使用してソート機能を実現させました。

tablesorter

tablesorter はHTMLで作られたテーブルにソート機能を実現できるものになります。

利用するには、まずHTMLファイルにjQueryと tablesorter を読み込ませます。
HTMLのhead部分に以下のコードを挿入します。

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js"></script>
</head>

これで、 tablesorter を使用するための準備ができましたので、次に実行部分を記入します。

<script>
　　$(document).ready(function() {
　　$('#sample').tablesorter();
　　});
</script>

上記をHTMLファイルに追加することで「sample」という名前でID指定されたテーブルに対してソートの機能を付けることができます。

<pre><code>
<table id="sample" class="table table-striped">
  <thead>
    <tr> <th>番号</th><th>名前</th><th>年齢</th> </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>田中</td><td>22</td></tr>
    <tr><td>2</td><td>竹内</td><td>24</td></tr>
    <tr><td>3</td><td>佐藤</td><td>30</td></tr>
  </tbody>
</table>
</code></pre>

こちらは例ですが、上記の様にtableにid=”sample”で指定することで、このテーブル内の一覧にソート機能を付与することが可能になります。

後は、HTMLを表示させた際に、一覧のヘッダー部分をクリックするだけでソートされた並べ替えが行えます。

まとめ

社内管理システムのwebアプリケーションの改修をさせていただくことでwebアプリケーションに対する理解がかなり深まりました。

SpringFlameworkを使用してのデータベースへのアクセスやweb画面入力フォームの入力値の受け渡し、入力された値のバリデーションチェックなど今後、使用頻度が高そうなものばかりです。

javaの基礎知識についても再確認できました。
少し忘れていた部分がありましたので知見が深まりました。

HTML/CSS/jQuery/javascriptについても併せて理解が深まりました。
今回の改修を経験する前は、HTML/CSSについてコードを見ても理解できないことがほとんどでしたが、今は簡単なwebページであれば自身でコードを組み表示させるまで可能になったと思います。

java Spring Flameworkを使うためにjava/HTML/CSS/jQuery/Thymeleafの知識が必要になるので初めは少し重荷を感じていましたが、使い方と連携方法を覚えればかなり便利なフレームワークであることに気づきました。

今後も、便利な機能をしり込みせずに使えるよう精進していきたいと思います。

BLOGトップへ戻る