GWT Material Designというものが面白そうなので試しに触ってみたときの備忘録です。
あとGWTの記事が少なすぎるので誰かの参考になれば...。
必要なもの
- IntelliJ Ultimate
- Maven
- サンプルプロジェクトの取得
※基本的には公式サイトに書かれてる通りに実施すればOK。以下細かく手順を載せていきます。
IntelliJ Ultimateのインストール
https://www.jetbrains.com/idea/downloa
ここからIntelliJ Ultimate（有償版・トライアル期間30日）をインストール。
有償版でないとGWTのコンポーネントが使えないので注意。
Mavenのインストール
$ brew install maven
$ mvn -v
サンプルプロジェクトを取得
$ mvn archetype:generate -DarchetypeGroupId=com.github.gwtmaterialdesign -DarchetypeArtifactId=gwt-material-archetype -DarchetypeVersion=2.1.1
このときいろいろ聞かれますが適当でOK。
- groupId:
- artifactId:
- package:
- description:
- moduleName:
- projectName:
IntelliJでビルド
IntelliJでさきほど取得したプロジェクトを開き、ビルドします。
実行/デバッグ構成を開く。
「+」ボタン押して
「GWT Configuration」を選択し
適当に名前をつけてあげてから「Apply」→「OK」
さきほど作成した実行/デバッグ構成を選択していビルド開始すると
できた
簡単ですね。
これで環境は整いました（たぶん）。
あとはXMLファイルを編集して画面を作りこんでいきましょう。
最後に、GWTをいじってみる理由など...
WEBシステムを作る上でなにを重視するかはエンドユーザあるいは開発者自身の思いに依るとことですが、どんな現場でも「見た目＝UI」をあーしたいこーしたいだの議論が白熱するあまりプロジェクトがスムーズに進まないということを経験してきました。
UIを練り練りするのもそれはそれで楽しいですが、一度ある程度の水準までガイドラインを決めてしまえば、あとはシステムの中身のことを考える時間に回したほうがスピーディに事が進むのになあとも思ったりします。
この「ガイドラインを先に作っていこうぜ！」っていうのをデザインシステムっていうらしいですが、あまり導入経験がないのでもっと勉強したいなと思ってます。その1つとして今回はGoogleが提供しているマテリアルデザイン、そしてこれを簡単に実装できるらしいGWTというフレームワークを利用してみます。理由としては、フロントサイドの実装にHTML/CSS/JS等は使わず、ルールに則ってXMLを記述すれば自動的にデザインを適用してくれるらしいというメンドくさがりな私にはピッタリのシンプルなところが魅力的だったので。
概要とかは追々調べていくとして、まずは弄ってみたい。
今回の記事ではまず環境構築まで行い、次回から GWT公式サイトに載っている機能をあれこれ試していきたいと思います。