開発チーム(s.w)こんにちは。タグボード開発チームのワシヅカです。今年もあっという間で特に頑張ったという記憶もなく...。残り1ヶ月を有意義に過ごして「終わりよければすべてよし」に持っていきたいです。明日から本気出す、です。今日は、今まで使ってきたサンプルプロジェクトにもう少し手を加えて、Thymeleafというテンプレートエンジンを使ってHTMLにデータを出力したいと思います。やっていきましょう!0.前提1回目を参考に、STSのインストールを終えていること2回目を参考にサンプルプロジェクトのインポートを終えていること3回目、4回目を読んでいなくても、プロジェクトの実行は可能ですが、読んでおくとより理解が早いと思います。Javaのバージョンは1.8を利用していること1.pom.xmlを修正するまずは、pom.xmlを修正して、Thymeleafのライブラリをインポートしましょう。下の画像を参考に、<dependencies>~</dependencies>の間と、<properties>~</properties>に設定を追加しましょう。<java.version>1.8</java.version>はもともと定義されていると思いますので、消さないように注意しながら修正を加えてください。--><thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version></properties>修正後のイメージは下の画像のようになります。pom.xmlに修正を加えて、ctrl+sキーで上書き保存すると、上で付け加えたライブラリがダンロードされ、再ビルドが実行されます。proxy」のようなキーワードでググってみると良いかもしれませんMavenがリモートリポジトリからライブラリのダウンロードを完了すると、STSの「Maven依存関係」のリストに先ほどpom.xmlに追加したThymeleaf関連のライブラリが表示されますので、サクッと確認してください。2.フォルダを追加するThymeleafはデフォルトで「resources」配下の「templates」というパスを参照するようになっていますので、そのパスを作ってあげます。パッケージ・エクスプローラーから「src/main/resources」を右クリックし、[新規]→[その他]を選択します。ウィザードが表示されたら、下の画像の様に「フォルダ」と検索すると「一般>フォルダー」が表示されますので選択して「次へ」ボタンをクリックします。下の画面が表示されたら、フォルダの作成パスが合っていることを確認し、フォルダ名に「templates」と入力して「完了」ボタンをクリックしてください。次に作成した「templates」フォルダの中にHTMLを作成します。先ほど同じようにパッケージエクスプローラーから「templates」フォルダを右クリックし[新規]→[その他]を選択します。ウィザードが表示されたら「html」と入力して、表示された「HTMLファイル」を選択し、「次へ」ボタンをクリックします。HTMLのファイル名を入力する画面が表示されるので、今回は「hello.html」と名前を付けておきます。3.hello.htmlを編集するhello.htmlは、すでに基本的なHTMLが記述された状態で生成されますので、下の画面を参考に1行追加してください。th:text="${message}"></p>です。ポイントは「th:text=”${message}”」です。<p>は、ご存知、HTMLの<p>タグです。今回は使いませんが、「resources」フォルダの下に「static」フォルダを作成し、更にその下に「js」、「css」、「images」フォルダを作っておくと良いかと思います。Javascriptファイルなどの格納場所として利用します。画像ファイル4.MainController.javaを編集する次に「MainController.java」を編集します。処理を簡単に解説しますと...まず、@GetMappingアノテーションで”/”のパスにマッピングします。渡すことで自動的にインスタンスが生成されるので、そのmavインスタンスにaddObjectメソッドで”message”というキー文字列でmessageStringを格納しています。View名は先程作った”hello.html”に設定します。最後にreturnでmavを返却しています。mav;}5.デバッグモードで実行するさて、デバッグモードで実行して、ブラウザでアクセスしてみましょう。URLはhttp://localhost:8080/demo/となります。※なぜ/demo/が付くのかは第3回目の「5.URLとのマッピングを確認する」をご覧頂けると理解が早いかと思いますが、クラス自体にマッピングが行われているためです。ブラウザで上記のURLへアクセスすると、事前に仕掛けておいたブレイクポイントで止まりました。mavインスタンスのmodelにKeyとValueで値が格納されたことが分かります。viewにもしっかり”hello.html”が格納されていますね。F8キーを押して処理を続行しましょう。th:text="${message}"></p>の部分が置き換わっていることがわかります。modelに格納された”message”とhello.htmlで記述した${message}が一致し、変換処理が行われていることが分かります。うまくいきましたでしょうか?!いよいよHTMLを出力できるところまでやってきました。PM始めましてspringの学習で1回から5回までをやってみましたが判りやすくて良い感じです。5回以降のリンクが無いのですが未だ作成されて無いのでしょうか?作成されて無いとなると続きの予定はあるのですか?続きを予定しているなら、いつごろアップされるのでしょうか?是非とも6回以降をやりたいので、宜しくお願いします。PM仲里さんはじめまして、開発チームのワシヅカです。́ω`*)現在、現場に出ておりまして、なかなか記事を書けません...。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。