Spring Bootによるウェブアプリ開発: オンラインフォトアルバム（アプリ開発例）

ポイント:

  • ファイルをアップロードする
  • フォームで日付を扱う

ソースコード

静的コンテンツ

詳しくは27.1.5 Static Contentを参照せよ。

ファイルをそのままサーバから送信するにはsrcと同じ階層に「static」というフォルダを作り、そこのファイルをおく。

static

例えば、
static/lecture12/ThumbsUp.jpgというファイルは、
http://localhost:18080/lecture12/ThumbsUp.jpgでアクセスすることができる。

また、src/main/resources/staticというフォルダも用意されており、こちらに置いたファイルにもアクセスすることができる。ただし、このフォルダの場合は、アプリ起動後に追加したものは表示できない（起動時にファイルを含めたJARファイルを作っているから）。

コントローラからこのフォルダを操作する場合そのpathを知る必要があるが、その方法の1つとしてResourceHttpRequestHandlerから得る方法がある（コントローラの53〜63行目）。ただし、この方法が標準的な方法かどうかはわからない。

画像のアップロード

  • テンプレート（add.html）
    • 11行目: ファイルを送る場合はform要素に「enctype=”multipart/form-data”」という属性をつける。
    • 16行目: 「type=”file”」とするとファイルアップロード用のフォームができる。
  • コントローラ（Lecture12Controller.java）
    • 99行目: ファイルはMultipartFile型で受け取ることができる。
    • 101〜108行目: 受け取ったファイルは、サーバ上のテンポラリ領域に置かれるファイルなので、transferToメソッドを使って実際に使う場所にファイルを移す。移す先をFileクラスのインスタンスで指定する。このtransferToメソッドは検査例外（教科書P.66）が発生する可能性があるので、例外処理を行う。

なお、フォームで送ることのできるデータのサイズには制限がある。これを変更するには以下の2行をapplications.propertiesに加える。これは、リクエスト全体のサイズ（デフォルトは10MB）を100MBまで、リクエストに含まれる1ファイルのサイズ（デフォルトは1MB）を10MBまでに変更する設定である。

今回は画像のアップロード時にサムネイルを生成することする。
画像のスケーリングには、imgscalrを使うが、特にこれがおすすめというわけではない。また、ファイル名から拡張子を取得するのは単純な文字列処理ではあるが、今回はApache Commons IOを使うことにする。これらを使うためにbuild.gradleに次を追加する。

サムネイル生成のプログラムについては今回の主題ではないので解説は省略する。

画像の表示

  • テンプレート（index.htmlとview.html）
    • img要素（タグ）を使う
    • th:srcでsrc属性を動的に生成する
    • th:hrefと同様に@構文を使う
    • alt属性はつけよう。

日付の扱い

  • テンプレート（add.html、index.html、view.html）
    • フォームによる入力は「type=”date”」とすると対応ブラウザなら日付ピッカー等の適切なUIで入力することができる。
    • 出力する時にフォーマットするには、「th:text=”${#dates.format(photo.date, ‘yyyy年MM月dd日’)}”」等とする（Using Thymeleaf（Expression Utility Objects 日付）)
  • コントローラ（Lecture12Controller.java）
    • 100行目: Date型で受け取ることができる。「@DateTimeFormat(pattern = “yyyy-MM-dd”)」でブラウザが送ってくる文字列のパターン（フォーマット）を指定する。