Blog

Play Framework with WebJars で管理画面をサクッと作ってみる


こんにちは!DynalystというDSPプロダクトでエンジニアをやっている瓜生と申します。

はじめに

Dynalystの管理画面は Play Framework + AdminLTE で作られています。
AdminLTE は、select2datetimepicker と言った JavaScript の plugin も含まれる巨大なCSSフレームワークです。
それらの plugin を使う時に、わざわざ AdminLTE のソースをダウンロードして、
JavaScript や CSS を Play Framework のプロジェクトにある public ディレクトリ以下にコピーして使っているのですが、
これがなかなかにツラい…
なんかいい方法ないもんかと模索している時に、今回の WebJars を今更ながら見つけたので、導入手順と共に紹介したいと思います。

WebJarsってなに?

WebJars はリンク先の紹介文にもある通り、クライアントサイドのライブラリたちをJARにした Java ライブラリです。
Java のライブラリですので、Grails や Spring Boot でも利用できるようです!

導入

WebJars の紹介はココらへんにして、早速導入していきます!

SBT

はじめに SBT の設定です。
WebJars 本体、jQuery、AdminLTE と AdminLTE で必要になるパッケージを入れてみましょう!

Play Framework のプロジェクトで

これを追加するだけです。

アプリケーション

次にアプリケーション側の修正です。
まずは、conf/routes に下記を追加します。

このように宣言することで、SBT で設定された AdminLTE 等の JAR に存在するファイルにアクセスすることができます。

次に、Controller を追加します。

View は長いですがこんな感じのものを追加します。

アプリケーション側の修正は以上です!
これだけでこのような画面を作ることができます。

スクリーンショット 2016-08-10 21.07.53

バンザイ WebJars!バンザイ AdminLTE!

後は使いたいパッケージをこちらから検索し、libraryDependencies に追加すれば、同じ要領で利用可能です。

ハマった点

1. webJarAssets.locate の文字列って何渡せばいいの?

WebJars のドキュメントなどには、こう書けば使えるよという感じでしれっと書いてあるのですが、
実際やってみると、あれ?何渡せばいいの?って感じで戸惑いました。
WebJars のページで検索したパッケージの横にある「xxx Files」というリンクをクリックすると、
そのパッケージ内にあるファイルのパス一覧がポップアップで表示されます。
その一覧に表示される使いたいファイルパスの「META-INF/resources/webjars/」以下の文字列を渡せば良いようです。
スクリーンショット 2016-08-10 22.43.02

スクリーンショット 2016-08-10 22.43.26

2. 追加したパッケージのファイルが読めない!

WebJarsのパッケージを追加する時の注意点として、Play Framework を起動したままパッケージを追加すると、下記のようなエラー画面が表示されてしまいます。

スクリーンショット 2016-08-10 20.34.01

起動したままなので、追加したパッケージをロードされていないためにファイルが見つからないよ!と言われるわけですね。
なので、この時は Play Framework を再起動すれば、追加したパッケージを使えるようになります。
SBTで管理されているため、ファイルが無い時にエラーになってくれるのもイイですね!

WebJarsの実装

最後に、 WebJars 内の実装簡単に説明します。
利用している at, locate の method を下記に抜粋します。

  • locate → SBTで設定したパッケージのJARファイルから「META-INF/resources/webjars」を除いたパスをフルパスで返してくれる。
  • at → Play Framework の at を利用し、「META-INF/resources/webjars」で始まる引数の file の Contentsを返す。

となっていて、シンプルな実装になっているなーと感じました。

パフォーマンスってどうなるの?

http://hipfinger.net/posts/nginx_play_frontend_proxy/
こちらに nginx + Playframework のベンチマークがありますが、キャッシュがなくてもパフォーマンスにそこまで遜色ないことが分かります。
WebJars も Playframework の Assets のラッパーのようなものなので、WebJars を使ってもパフォーマンスが劣化することはなさそうです。

最後に

WebJars には様々なフロントエンド用のライブラリがこれでもかというほどありますし、SBT でバージョン管理もできるので、
これは是非使うべき代物だということが分かりました!
WebJars のドキュメントはあるものの、AdminLTE などのパッケージを利用した情報はあまりないようですので、
一例として参考にしていただけたらと思います。

Author

アバター
kazuya

関連記事