vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

ng-kyoto Angular Meetup#5で発表してきました

はじめに

3/20に行われたng-kyoto Angular Meetup #5で発表してきました。

ng-kyoto.connpass.com

https://masanori840816.github.io/ngkyoto5/slidepage.html

振り返って

いやぁ、緊張しました(苦笑)。

(完全に言い訳ですが)いつも以上に時間が取れず、
コードの解説にしてもどこを話すか、どこを飛ばすかがまとめきれていなかったと思います。

あと舞い上がりすぎて、今自分がどのぐらいの時間話しているかがわからなくなったり、
PCとスクリーンの画面の位置が逆になっていて、カーソルがうまくスクリーン側に移動できなかった、というのも反省点です。

現在の経過時間については、ストップウォッチアプリを探すか自分で作るかして、
自分のディスプレイで確認できるようにしておくようにします。

ディスプレイの設定(解像度やおそらく配置も)は、設定 > ディスプレイからできるようなので、
次回はちゃんと設定して臨みたいと思います。

いつもながら温かく見守ってくれた皆様には感謝感謝です。

内容について

基本的にはここ最近の記事の内容をまとめた感じになっています。
(というかそのために調べた結果を記事にしていました)

この中でも積み残し課題としていたアニメーションの停止について。

そもそもAngularではアニメーションクラスの元になっているCSSアニメーションを直接書くことも可能、
ということなので、そちらで解決するのも良さそうです。

アニメーションクラスで簡単にまとめて書ける強みもあるので、状況によって切り分ける感じでしょうか。

ただ、アニメーションクラスを使わないとできない表現として、
URLを変えつつ、該当のページがアニメーションで移動してくる、といった表現をする場合が挙げられました。

これはちょっと実装が大変そうではありますが、近いうちに試してみたいところです。

他の方の発表について

Angular自体の話では、Anglar-cli、ver.4.0、DIとところどころ理解が追いつかない部分もありましたが、
どれも今後試してみたい内容でした。

※なお発表を聴いて、こっそりブログ記事の「Angular.js」を「Angular」に直したのは内緒です

ということで、フレームワーク選定のお話でも挙げられたVue.jsやReactが気にはなりつつも、
フロントについてはもう少し続けてAngularを進めたいと思います。

業務で触っていれば良いのですが、現状触れるのがプライベートのみなので…。

WebComponentについてはただただすごいなぁ〜、と思うばかりでした(苦笑)。

まぁ今のJavascriptやHTMLに取って代わるもの、というわけでもないようで、
ChromeFirefoxでの対応もあったということですし、ニュースなどは追いかけるようにしようかな、と思いました。

おわりに

ということで、最初から最後まで楽しい勉強会でした。

次回はver.5.0が出る頃、ということなので、
今回はアニメーションに関連する部分に絞っていましたが、もう少し基本的なところから触っていって、
もし機会があればまた発表にも挑戦してみたいと思います。

主催の皆様、会場を提供していただいたはてな様、参加の皆様、ありがとうございましたm( )m

おまけ

スライドにはRemark.jsを使ってGitHub Pagesを使っているのですが、
スライド資料として認識されないのは少し不便ですね。。。

MarkDown形式で書くだけでそれらしく表示されるため便利ではあるのですが。

AngularのAnimate2

はじめに

前回の続きです。

公式ドキュメントのボタンのように、マウスオーバーした時にボタンが浮き上がって見える、という動きを真似してみます。

マウスオーバーとマウスが離れた時のイベントを取得する

まずはマウスカーソルをボタン上に移動させた場合(マウスオーバー)と、ボタン外に移動させた場合(マウスアウト)とでイベントを取得します。

gui-anime.component.html

< button [@positionState]='state' (mouseover)="onButtonIn()" (mouseout)="onButtonOut()">
タイトル
< /button>

gui-anime.component.ts

〜省略〜
export class GuiAnimeComponent implements OnInit {
  private state: string;
  constructor() { }
  ngOnInit() {
  }
  private onButtonIn(){
    this.state = 'active';
  }
  private onButtonOut(){
    this.state = 'inactive';
  }
}

CSS

影や位置のしていなど、アニメーションで切り替えたい要素以外の装飾については、angular-cliで「ng g component 〜」実行時にhtmlやtsなどと同時に生成されるcssに書くことにします。

gui-anime.component.css

.positionanime{
    background-color: #fff;
    border-radius: 8px;
    width:20vw;
    height: 10vh;
    position: relative;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    margin: 10px;   
}

ボタンの背景色、角丸設定などを行っています。

アニメーション

それでは、アニメーション部分にとりかかります。

今回主に実装するのは下記の動きです。

  • 枠の太さ、色を非アクティブ・アクティブな時で切り替える
  • ボタンが非アクティブなときは小さめの影を、アクティブなときは大きめの影を表示する
  • ボタンを主にZ方向に移動させる

枠の色や太さを指定します。

gui-anime.component.ts

import { Component,
  Input,
  trigger,
  state,
  style,
  transition,
  animate,
  AnimationPlayer,
  OnInit } from '@angular/core';

@Component({
  selector: 'app-gui-anime',
  templateUrl: './gui-anime.component.html',
  styleUrls: ['./gui-anime.component.css'],
  animations: [
    trigger('positionState', [
      state('active', style({
        border: '3px solid #2196F3',
        boxShadow: '0px 5px 6px 3px #CECECE',
        transform: 'translate3d(-1px, -1px, 50px) scale(1.02)',
        zIndex: 30
      })),
      state('inactive',   style({
        border: '1px solid #CECECE',
        boxShadow: '0px 1px 3px 1px #CECECE',
        transform: 'translate3d(0px, 0px, 0px) scale(1)',
        zIndex: 10
      })),
      transition('active => inactive', animate('200ms ease-in-out')),
      transition('inactive => active', animate('200ms ease-in-out'))
    ])
  ]
})
〜省略〜
  • 枠の太さの指定方法として、px指定の他にも「thin」や「medium」などを使うこともできます。
    が、今回のようにアニメーションさせる場合は一瞬枠が指定より太くなるなどの問題が発生するため、pxなどで指定しておいた方が良さそうです。

影は「boxShadow」で指定します。

gui-anime.component.ts

〜省略〜
  animations: [
    trigger('positionState', [
      state('active', style({
        border: '3px solid #2196F3',
        boxShadow: '0px 5px 6px 3px #CECECE',
        transform: 'translate3d(-1px, -1px, 50px) scale(1.02)',
        zIndex: 30
      })),
      state('inactive',   style({
        border: '1px solid #CECECE',
        boxShadow: '0px 1px 3px 1px #CECECE',
        transform: 'translate3d(0px, 0px, 0px) scale(1)',
        zIndex: 10
      })),
      transition('active => inactive', animate('200ms ease-in-out')),
      transition('inactive => active', animate('200ms ease-in-out'))
    ])
  ]
})
〜省略〜
  • 指定する値は 1:影のX座標値 2:Y座標値 3:ブラー(値が大きいほど広くぼんやりした影になる) 4:影の大きさ 5:影の色 です。

移動

アニメーションで要素を移動させたい場合、「translate」を使用します。 X、Y、Zの特定方向のみに移動させるときは「translateX」「translateY」「translateZ」、すべてを移動させる場合は「translate3d」を使います。

gui-anime.component.ts

〜省略〜
  animations: [
    trigger('positionState', [
      state('active', style({
        border: '3px solid #2196F3',
        boxShadow: '0px 5px 6px 3px #CECECE',
        transform: 'translate3d(-1px, -1px, 50px) scale(1.02)',
        zIndex: 30
      })),
      state('inactive',   style({
        border: '1px solid #CECECE',
        boxShadow: '0px 1px 3px 1px #CECECE',
        transform: 'translate3d(0px, 0px, 0px) scale(1)',
        zIndex: 10
      })),
      transition('active => inactive', animate('200ms ease-in-out')),
      transition('inactive => active', animate('200ms ease-in-out'))
    ])
  ]
})
〜省略〜
  • 上記では位置の指定をpxでしていますが、X、Yについては%を使って指定することもできます。
  • translateとscaleなど、「transform」に複数の要素を指定したい場合、上記のようにそれぞれをスペース区切りで指定します。

Z-Index

今回は必要ないのですが、例えばボタン同士がひっついていて、マウスオーバー中のボタンを前に出したい、という時に、うまく該当のボタンが前に出てくれない場合があります。

そのような場合、「z-index」を使い、マウスオーバー時の値をそれ以外より大きく設定することで解決できます
(※CSSで「position: relative;」などの指定をする必要があります)。

gui-anime.component.ts

〜省略〜
  animations: [
    trigger('positionState', [
      state('active', style({
        border: '3px solid #2196F3',
        boxShadow: '0px 5px 6px 3px #CECECE',
        transform: 'translate3d(-1px, -1px, 50px) scale(1.02)',
        zIndex: 30
      })),
      state('inactive',   style({
        border: '1px solid #CECECE',
        boxShadow: '0px 1px 3px 1px #CECECE',
        transform: 'translate3d(0px, 0px, 0px) scale(1)',
        zIndex: 10
      })),
      transition('active => inactive', animate('200ms ease-in-out')),
      transition('inactive => active', animate('200ms ease-in-out'))
    ])
  ]
})
〜省略〜

ngFor

さて、このボタンを1つだけではなく複数並べてみたいと思います。

ただし、全く同じ動作をするものをコピペでは作りたくない。。。
ということで、interfaceを作ってボタン表示に必要な要素を持つ配列を作り、「ngFor」を使って並べてみることにします。

interface

「ng g interface AnimeButton」をTerminalで実行して、interfaceを作成します。

anime-buton.ts

export interface AnimeButton {
    id: number;
    pageTitle: string;
    discription: string;
    state: string;
}

で、Componentでこのinterfaceの配列を作ります。

gui-anime.component.ts

export class GuiPositionanimeComponent implements OnInit {

  private animeButtons: AnimeButton[] = [
    {id: 0, pageTitle: 'Page1', discription: 'Page No.1', state: 'inactive'},
    {id: 1, pageTitle: 'Page2', discription: 'Page No.2', state: 'inactive'},
    {id: 2, pageTitle: 'Page3', discription: 'Page No.3', state: 'inactive'},
  ];

  constructor() { }
  ngOnInit() {
  }

  private onButtonIn(targetId: number){
    this.animeButtons[targetId].state = "active";
  }
  private onButtonOut(targetId: number){
    this.animeButtons[targetId].state = "inactive";
  }
}

これをHTMLにセットします。

gui-anime.component.html

< section class='animeButtons'>
  < div *ngFor="let aButton of animeButtons">
    < button class='positionanime' [@positionState]=aButton.state (mouseover)="onButtonIn(aButton.id)" (mouseout)="onButtonOut(aButton.id)">
    {{aButton.pageTitle}}
    < /button>
  < /div>
< /section>
  • まず親となるタグで「class=‘animeButtons'」(「animeButtons」はComponentで定義した変数名)を指定し、
    「*ngFor=“let aButton of animeButtons"」でC#のForeach文のように値を取り出しています。

これで比較的シンプルに複数ボタンが表示できます。

f:id:mslGt:20170316024419j:plain

疑問点

ngForから値を取り出す部分で、「{{aButton.pageTitle}}」のように値を取り出すサンプルは見つかったのですが、 「[@positionState]=aButton.state」の「aButton.state」部分のような書き方は見つけられませんでした。

とりあえず動作はしているのですが、これで正しいのかが不安なところです。

これについては正誤が判断つき次第追記します。

参考

角丸

移動

z-index

AngularのAnimate

はじめに

前回に続いてAngular.jsのお話。

昔Angular.jsの弱点としてアニメーションが挙げられていた気がしていたので(別のものと混同している恐れもあります)、
ちょこっと調べてみたところver.1.14位からちゃんと対応されていました。

というわけで今回は、公式ドキュメントを中心に試してみたことをメモることにします。

あ、ちなみに扱うのはver.2系だけです。

アニメーションさせてみる

まずはボタンをクリックした時に、ボタンのサイズ変更、及び背景色を変更するサンプルを試してみました。

前回作成したプロジェクトに、「ng g component gui-anime」でコンポーネントを追加し、それをあれこれいじっています。

まずはコードから。

Htmlにアニメーションのターゲット兼トリガーとなるボタンを追加し、
Typescript側でアニメーションとアニメーション開始のトリガーとなる要素(State)を作成します。

gui-anime.component.html

< p>
  gui-anime works!
< /p>
< button [@buttonState]="state" (click)="onAnimeButtonClicked()">Anime< /button>

gui-anime.component.ts

import { Component,
  Input,
  trigger,
  state,
  style,
  transition,
  animate,
  OnInit } from '@angular/core';

@Component({
  selector: 'app-gui-anime',
  templateUrl: './gui-anime.component.html',
  styleUrls: ['./gui-anime.component.css'],
  
  animations: [
    trigger('buttonState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.5)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]
  
})
export class GuiAnimeComponent implements OnInit {
  public state: string;
  constructor() { }
  
  ngOnInit() {
    this.state = "inactive";
  }
  private onAnimeButtonClicked(){
    this.state = (this.state === "active")? "inactive": "active";
  }
}

イベント

Angularではクリックなどのイベントは()で囲まれます。

今回はボタンクリックのイベントを取得したいため、gui-anime.component.htmlで「(click)」を設定しています。

(click)="onAnimeButtonClicked()"

アニメーションのトリガーとなる要素(State)の指定と値の変更

上記のコードでは、クリックしたらアニメーションが始まるのではなく、gui-anime.component.tsで設定している「buttonState」が特定の値(inactive、active)に変更された場合に開始されるようになっています。

これをボタンに設定して、クリックイベントで「state」の中身を入れ替える、という処理を行っています。

[@buttonState]="state"

[@〜]とすることで、コンポーネントの持つ要素(今回はアニメーションのトリガーとなる「buttonState」)の「state」との関連付けができるようです。

[]は下記のPropertyBindingか?とも思うのですが、確信が持てず。。。
この辺りは追って調べてみることにします。

アニメーション

さて、今回のメインであるアニメーションです。

animations: [
    trigger('buttonState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.5)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]

ここでは2つのstateが指定されており、
先ほど登場した「buttonState」の値が「inactive」または「active」(それぞれのstateの第一引数)に変更された時に、
第二引数でそれぞれ指定しているCSSの値(背景色、スケール値)が適用される内容となっています。

で、その後ろに連なる2つのtransitionによって、「inactive」から「active」またはその逆への変化がアニメーションで繋げられる、という処理が行われます。

transitionの第二引数にてアニメーションの時間と後述するEaseTypeが指定されています。

EaseType

transitionで指定されているEaseType。

これを指定することで、アニメーション(今回は拡大・縮小)する速度が一定ではなく最初だけゆっくり(ease-in)や、最後だけゆっくり(ease-out)といった変化をつけることができます。

UnityのTween系でも登場しますね。
そちらでは覚えきれない位たくさんの種類のEaseTypeから目的に合致したものを利用することができます。

ではAngularではどうかというと、実は今回使っているアニメーション、というのはAngular独自のものではなくCSSのアニメーションです。

で、CSSで使用できるものはというと、下記のみです。

  • ease(デフォルト)
  • linear(はじめから終わりまで一定)
  • ease-in(最初だけゆっくり)
  • ease-out(最後だけゆっくり)
  • ease-in-out(最初と最後だけゆっくり)
  • cubic-bezier()(カスタム)

SCSSなどであればEasing Function 早見表で紹介されているようなEaseTypeが使えるようなのですが、
CSSでは種類がかなり少ない(またはカスタムで作成する)ようです。

カスタムについては次回辺りためしてみたいと思います。

アニメーションの開始・終了イベント

複数のアニメーションを連続で実行したい、アニメーションの実行後に何か処理をしたい、といった場合に、それを検知するイベントが欲しいところ。

そのような場合は、クリックイベントのように「start」「done」イベントを設定します。

Start

< button [@buttonState]="state" 〜省略〜(@buttonState.start)="onAnimeStarted()">Anime< /button>

Done

< button [@buttonState]="state" 〜省略〜(@buttonState.done)="onAnimeFinished()">Anime< /button>

アニメーションのトリガーである「buttonState」に紐付けられていますね。

あとはクリックイベントと同じく、gui-anime.component.tsに「onAnimeStarted()」や「onAnimeFinished()」を追加するだけです。

参考

Animation

EaseType

UbuntuでAngular

はじめに

突然ですがラップトップのOSをUbuntuに変更しました。

VirtualBoxXubuntuを入れたりして遊んでいたのですが、Gnome3を使ってみたくなったので。

Unityの正式版がないことだけが問題なのですが、外で書くことは少ないため、
まぁMac miniで書くことにしても良いかと。

開発版Unityは依存関係の問題でインストールに失敗したのですが、こちらもおいおい試してみる予定です。

まぁ以前もXubuntuなどを使っていたこともあり、概ね問題なくやっぱり新しいマシンで表示するときれいだな〜と思ってはいるのですが、一点ディスプレイが時々点滅するのが気になってはいます。
Gnome3だけでなく、Unityにした場合も、Waylandにした場合も再現するため、ディスプレイマネージャーの問題ではないのか。。。?と思っています。

こちらも問題が解決すれば記事にしたいと思います。

さてさて、今回の本題ですが、ふとAngular.jsに挑戦してみることにしました。
ver.1系は以前少しだけ触ったことがありましたが、今回は2系です。

Angular-cliを使ってHello world(正確にはApp works)を表示するところまでをまとめることにします。

設定

ディレクトリ名

とりあえずディレクトリ名を英語に変更します。

Mozc

また、Gnome3の場合デフォルトだと日本語入力(Mozc)が起動しないようです。

設定 > 言語サポート で追加のパッケージをインストールし、「キーボード入力に使うIMシステム」を「fcitx」に変更します。
一旦ログインし直すとMozcが使えるようになる。。。はず。

ショートカット

設定 > キーボード > ランチャー で、「ホームフォルダ」のショートカットを「Super + E」にします。
これでWindowsと同じくWindowsキー + Eキーでファイルエクスプローラが開きます。

開発ツール

開発するにあたって使用するエディタはVisual stutio codeとします。

以前参加した勉強会でもおすすめされていたので、まずはそこに乗っかってみようかと。
インストール自体はdebパッケージをダウンロードして、ダブルクリックでインストール。

https://code.visualstudio.com/download

ということで、細かいことを考えなければほとんどWindows同様にインストールが可能になります。

プラグインとしては「Angular 2 + Snippets」をインストールしました。

Node.jsのインストー

Angular.jsの環境を整える前に、まずはNode.jsのインストールですね。

ここを参考にaptでインストールしてみることにします。

パッケージマネージャを利用した Node.js のインストール - Node.js

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt update
sudo apt install -y nodejs

完了後、「node -v」や「npm -v」でバージョン番号が返ってくるかを確認しておきます。

Angular-cliのインストールに失敗する

さて、準備が整ったらAngular-cliをインストールします。

npmを使ってインストールするだけなので、簡単簡単…。

npm install -g @angular/cli

※「npm install -g angular-cli」としている情報が多いのですが、実行してみるとそれはDeprecatedになったから「@angular/cli」にしてね、とWarningが出ていました。

失敗しましたorz

エラーメッセージをたどると、どうやら権限エラーの様子。

ググッてみたら出てきました。

私の場合は「対策2」で解決できました。
Node.jsのインストールを管理者として行っているから…?

インストールに成功したら、「ng help」でヘルプが表示されることを確認します。

問題がなければ「ng new プロジェクト名」でプロジェクトを作成します。

IP Addressで開く

作成したプロジェクト直下で、「ng serve」を実行すると「localhost:4200」で「App works!」というページが表示されます。

これだと他の端末(スマホとか)からアクセスできないので、「localhost」部分をIP Addressに変更してアクセスしてみよう!

失敗しましたorz

どうもアクセスが拒否されている様子。

う〜ん、と思っていつつググったら方法が見つかりました。

ng serve --host 0.0.0.0

全ホストからのアクセスを許可することで、他の端末からでもアクセスすることができるようになりました。

そういえばSinatraでも同じ仕様で、同じ対処法を適用した覚えが…。

とにかくこれで、PC・スマホからアクセス可能になりました。

次回からは実装部分のお話になる…はず。

参考

Ubuntu設定

Node.js

Angular.js

【Unity】カメラを回転させるメモ

はじめに

とあるきっかけで、マウス操作などに合わせてカメラをあれこれ回転させてみたくなったので、そのメモを残します。

カメラを回転させる

まずは画面上をマウスの左クリックボタンでドラッグしたときに、カメラが回転するようにしてみます。

using UnityEngine;

public class MainCtrl : MonoBehaviour {
    public Camera MainCamera;
    private Vector3 lastMousePosition;
    private Vector3 newAngle = new Vector3(0, 0, 0);

    private void Update () {
        if (Input.GetMouseButtonDown(0))
        {
            // マウスクリック開始(マウスダウン)時にカメラの角度を保持(Z軸には回転させないため).
            newAngle = MainCamera.transform.localEulerAngles;
            lastMousePosition = Input.mousePosition;
        }
        else if (Input.GetMouseButton(0))
        {
            // マウスの移動量分カメラを回転させる.
            newAngle.y -= (Input.mousePosition.x - lastMousePosition.x) * 0.1f;
            newAngle.x -= (Input.mousePosition.y - lastMousePosition.y) * 0.1f;
            MainCamera.gameObject.transform.localEulerAngles = newAngle;

            lastMousePosition = Input.mousePosition;
        }

    }
}

これでカメラを中心に回転させることができます。

オブジェクトを中心に回転させる

例えばこれを、何らかのオブジェクトを中心に回転させたい場合。

その中心となる場所にGameObject(表示が不要なら空でOK)を置き、カメラはその子どもにし、回転処理を親オブジェクトに対して実行すればOKです。 (↑のコードのCameraをGameObjectに変更してください)

f:id:mslGt:20170218073417j:plain

対象物に向けて回転させる

マウス操作でカメラや親オブジェクトを回転させたあと、何らかのきっかけで元の角度に戻してみます。

一瞬で元に戻すだけであれば、ターゲット(今回はCube)に対してLookAtをしてあげればOK。
なのですが、今回は滑らかに動かしたかったため、DOTweenを使って実現してみました。

using UnityEngine;
using DG.Tweening;

public class MainCtrl : MonoBehaviour {
    public GameObject MainCamera;
    public GameObject TargetObject;

    private Vector3 lastMousePosition;
    private Vector3 newAngle = new Vector3(0, 0, 0);

    private void Start()
    {
        DOTween.Init(false, true, LogBehaviour.ErrorsOnly);
    }
    private void Update () {
        if (Input.GetMouseButtonDown(0))
        {
            newAngle = MainCamera.transform.localEulerAngles;
            lastMousePosition = Input.mousePosition;
        }
        else if (Input.GetMouseButton(0))
        {
            newAngle.y -= (Input.mousePosition.x - lastMousePosition.x) * 0.1f;
            newAngle.x -= (Input.mousePosition.y - lastMousePosition.y) * 0.1f;
            MainCamera.gameObject.transform.localEulerAngles = newAngle;

            lastMousePosition = Input.mousePosition;
        }

        if (Input.GetMouseButtonUp(1))
        {
            var rotation = Quaternion.LookRotation(TargetObject.transform.position - MainCamera.transform.position);

            MainCamera.transform.DORotateQuaternion(rotation, 0.5f)
                .SetEase(Ease.InOutBounce)
                .OnComplete(()=> Debug.Log("Finished"));
        }
    }
}

【Spring boot】サンプルを Doma + log4j2 + Gradle + PostgreSQLで置き換えてみた

はじめに

はじめてのSpring Bootをサンプルの写経をしながら読みました。

ここでは、そのときのサンプルを元に、前から気になっていた下記を使って置き換えてみたときのメモを残します。 * Doma * log4j2 * Gradle * PostgreSQL

Gradle

サンプルではMavenを使っていますが、今回はGradleを使うことにしました。
AndroidなどでもGradleを使いますし、多少こちらの方が慣れているかと思ったので。

※下記の説明に合わせて順番に試していく場合は一度に置き換えるのではなく、1つずつ追加・変更していってください。

build.gradle

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'

sourceCompatibility = 1.8

buildscript {
    ext {
        springBootVersion = '1.5.1.RELEASE'
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    }
}
jar {
    baseName = 'loginlogout'
    version = '0.0.1-SNAPSHOT'
}
repositories {
    mavenCentral()
}
dependencies {
    compile('org.springframework.boot:spring-boot-starter')
    compile("org.springframework.boot:spring-boot-starter-web")
    compile ("org.springframework:spring-jdbc")
    runtime('org.postgresql:postgresql')
    compile("org.bgee.log4jdbc-log4j2:log4jdbc-log4j2-jdbc4.1:1.16")
    compile "org.seasar.doma.boot:doma-spring-boot-starter:1.1.0"
    compileOnly "org.projectlombok:lombok:1.16.12"
    testCompile('org.springframework.boot:spring-boot-starter-test')
}

後述するDomaやlog4j2、PostgreSQLも追加しています。

PostgreSQL

サンプルではDBとして組み込みのH2を使っていますが、今回はAmazon RDS上に作成したPostgreSQLのテーブルにアクセスすることにしました。

まずSoftware Design 2016年10月号の記事などを参考にRDSにPostgreSQLのDBを「customerdemo」という名前で作成します。

DBが使用可能になったら、GradleにPostgreSQL(runtime(‘org.postgresql:postgresql’))を追加し、src/main/resourcesにあるapplication.propertiesを下記のように変更します。
※あとでDomaを使用するときにConfigクラスに移動させます。

application.properties

spring.datasource.url=jdbc:log4jdbc:postgresql://DBのエンドポイント:DBのポート番号/customerdemo
spring.datasource.username=DB作成時に設定したユーザー名
spring.datasource.password=DB作成時に設定したパスワード
  • 「customerdemo」はDBの名前です。

このまま実行すると、テーブルが見つからないとエラーになるため、src/main/resourcesに「scheme.sql」を作成します。

scheme.sql

CREATE TABLE IF NOT EXISTS customers(
  id SERIAL NOT NULL,
  first_name VARCHAR (50),
  last_name VARCHAR (50)
);

scheme.sql」は起動時に自動で実行される、ということなので、テーブルが存在しなかった場合は追加するようにします。
実行して、エラーが出ることなくページが表示されればOKです。

log4j2

サンプルではログを取得するために「log4jdbc-remix」を使用しています。
しかし開発がストップしているとのこと。

ということで、「log4jdbc-log4j2」を使ってみます。

まずはGradleのlog4jdbcを変更します。

 compile("org.bgee.log4jdbc-log4j2:log4jdbc-log4j2-jdbc4.1:1.16")

そしてapplication.propertiesを下記のように変更します。

application.properties

spring.datasource.driver-class-name=net.sf.log4jdbc.sql.jdbcapi.DriverSpy

spring.datasource.url=jdbc:log4jdbc:postgresql://DBのエンドポイント:DBのポート番号/customerdemo
spring.datasource.username=DB作成時に設定したユーザー名
spring.datasource.password=DB作成時に設定したパスワード

logging.level.jdbc=OFF
logging.level.jdbc.sqltiming=DEBUG

また、application.propertiesと同じくsrc/main/resourcesに「log4jdbc.log4j2.properties」と「logback-spring.xml」を作成します。

log4jdbc.log4j2.properties

log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator

logback-spring.xml

< ?xml version="1.0" encoding="UTF-8"?>
< configuration>
    < include resource="org/springframework/boot/logging/logback/base.xml"/>
    < logger name="jdbc.sqlonly"        level="DEBUG"/>
    < logger name="jdbc.sqltiming"      level="INFO"/>
    < logger name="jdbc.audit"          level="INFO"/>
    < logger name="jdbc.resultset"      level="ERROR"/>
    < logger name="jdbc.resultsettable" level="ERROR"/>
    < logger name="jdbc.connection"     level="DEBUG"/>
< /configuration>

最後に、Configクラスを作成します。今回は「MainConfig」というクラスを作成しました。

MainConfig.java

package jp.example.config;

import org.springframework.boot.autoconfigure.jdbc.DataSourceBuilder;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.jdbc.datasource.TransactionAwareDataSourceProxy;

import javax.sql.DataSource;

@Configuration
public class MainConfig{
    @Bean
    @ConfigurationProperties("spring.datasource")
    public DataSource dataSource() {
        return DataSourceBuilder.create().build();
    }
}

実行してエラーが出ることなくログが取得できればOKです。

Doma

Domaはデータベースにアクセスするためのフレームワークです(カンペを見ながら)。
「はじめてのSpring Boot」ではJPAを使って実装していた部分を置き換えます。

実は去年勉強会に出てからずっと気にはなっていたのですが、 触る機会がないままだったので、ここぞとばかりに試してみることにしました。

まずSpring Boot用のものを使うため、Gradleに「compile “org.seasar.doma.boot:doma-spring-boot-starter:1.1.0"」を追加します。

Domaを利用する上で最低限必要となるクラスが下記の3つです。

Configクラス

接続先のDBのURLなどを指定します。つまり先程application.propertiesに書いていた内容をこのクラスにまとめます。

MainConfig.java

package jp.example.config;

import org.seasar.doma.jdbc.Config;
import org.seasar.doma.jdbc.SimpleDataSource;
import org.seasar.doma.jdbc.dialect.Dialect;
import org.seasar.doma.jdbc.dialect.PostgresDialect;
import org.springframework.boot.autoconfigure.jdbc.DataSourceBuilder;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import javax.sql.DataSource;


@Configuration
public class MainConfig implements Config {
    private static final SimpleDataSource dataSource;
    private static final Dialect dialect = new PostgresDialect();

    static {
        dataSource = new SimpleDataSource();
        dataSource.setUrl("jdbc:log4jdbc:postgresql://DBのエンドポイント:DBのポート番号/customerdemo");
        dataSource.setUser(DB作成時に設定したユーザー名);
        dataSource.setPassword(DB作成時に設定したパスワード);
    }
    @Override
    public DataSource getDataSource(){
        return dataSource;
    }
    @Override
    public Dialect getDialect(){
        return dialect;
    }
    
    @Bean
    @ConfigurationProperties("spring.datasource")
    public DataSource dataSource() {
        return DataSourceBuilder.create().build();
    }
    
}
  • グレーの部分は先程log4jdbc-log4j2で設定した部分です。
  • 本当であれば「spring.datasource.driver-class-name=net.sf.log4jdbc.sql.jdbcapi.DriverSpy」などもこちらにまとめることができると思うのですが、まだ方法が分からなかったのでそのままapplication.propertiesに残しています。

Entityクラス

DBのテーブルのデータを持つためのクラスです。クラス名、変数はDBのテーブル、カラム名と同じである必要があります。
「はじめてのSpring Boot」のサンプルにおけるDomainクラスの役割だと考えています。
(DomaでもDomainクラスは使用するのですが、今回はスキップしています)

Customers.java

package jp.example.entity;

import org.seasar.doma.Column;
import org.seasar.doma.Entity;
import org.seasar.doma.GeneratedValue;
import org.seasar.doma.GenerationType;
import org.seasar.doma.Id;

@Entity
public class Customers {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id")
    public long id;
    public String first_name;
    public String last_name;
}
  • 「@GeneratedValue(strategy = GenerationType.IDENTITY)」を付けることでInsert時に自動的に値を付与できます。
  • 「@Column(name = “id”)」でカラム名を指定できます。これがないと正しく「id」というカラム名を見つけられず、エラーになっていました。

Daoインターフェイス

InsertやUpdate、SelectのようにDBにアクセスするためのメソッドを持ちます。

CustomerDao.java

package jp.example.dao;

import jp.example.config.MainConfig;
import jp.example.entity.Customers;
import org.seasar.doma.Dao;
import org.seasar.doma.Insert;
import org.seasar.doma.Update;
import org.seasar.doma.Delete;
import org.seasar.doma.Select;
import org.seasar.doma.boot.ConfigAutowireable;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@ConfigAutowireable
@Dao(config = MainConfig.class)
public interface CustomerDao {
    @Insert
    @Transactional
    int insert(Customers entity);
    @Update
    @Transactional
    int update(Customers entity);
    @Delete
    @Transactional
    int delete(Customers entity);
    @Select
    List selectAll();
    @Select
    Customer selectById(Integer id);
}

呼び出し

例えばControllerでルートURLにアクセスした場合に全アイテムを表示する、という場合の呼び出しは以下のようにできます。

MainController.java

package jp.example.controller;

import jp.example.dao.CustomerDao;
import jp.example.entity.Customers;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;

@RestController
public class MainController {
    private final CustomerDao customerDao;

    @Autowired
    public MainController(CustomerDao customerDao) {
        this.customerDao = customerDao;
    }

    @RequestMapping(path = "/")
    List selectAll(){
        // ルートURLにアクセスしたらアイテムを全て表示.
        return customerDao.selectAll();
    }
}
  • 今回は特に表示部分を作成していないため、検索結果がJson形式で表示されます。
  • IntelliJ IDEAではAutowiredの部分で「Could not autowire.~」とエラーとなりますが、実行自体は問題なくできます。

SQL

Select文については、実行するためのSQLファイルを作成する必要があります。

例えば「selectAll()」というメソッドを追加したい場合、以下の場所に「selectAll.sql」というファイルが必要です。

src/main/resources/META-INF/jp/example/dao/CustomerDao

※jp/example/daoの部分はCustomerDao.javaのパッケージに揃えます。

selectAll.sql

SELECT /*%expand*/* FROM customers

なお、「selectById(Integer id)」のように引数を持つ関数の場合は、SQLの中でも引数の値を使用しないとエラーとなります。

selectById.sql

SELECT /*%expand*/* FROM customers WHERE id = /* id */0

エラー内容

SQLファイル[META-INF/jp/example/dao/CustomerDao/selectById.sql]の妥当検査に失敗しました。メソッドのパラメータ[id]がSQLファイルで参照されていません。

SQLが見つからない

DAOインターフェースにSelect文を追加した時、SQLが見つからない、というエラーが発生しました。

ここでちょっとハマりました。

CustomerDao.java上では上記で正しくSQLを認識してくれるのですが、ビルドするとSQLが見つからないとエラーが発生します。

Error:(25, 20) java: [DOMA4019] ファイル[META-INF/jp/example/dao/CustomerDao/selectById.sql]がクラスパスから見つかりませんでした。ファイルの絶対パスは"~省略~loginlogout\build\classes\main\META-INF\jp\example\dao\CustomerDao\selectById.sql"です。

・・・なんかパスが違う?

対策を調べたところ、Project Structure > Modules > プロジェクト名_main > Paths > Compiler outputを、「Use module compile output path」ではなく、「Inherit project compile output path」に変更することでエラーが無くなりました。

「Rebuild Project」を実行すると元に戻ってしまったりするため、完全とは言えないのですがとりあえずこれでうまく動作するようになりました。

おわりに

とりあえず前から気になっていたものを使ってみる、ということで、正直ほとんどコピペで切って貼っただけ、というもやもやした内容となっています。

まぁ何にせよまず動く環境が手に入ったので、あれこれ試しつつそれぞれ突っ込んで調べてみたいと思います。

参考

Spring Boot

PostgreSQL

Amazon RDS

log4jdbc-log4j2

Doma

Groovyでテキストファイル操作

はじめに

やりたいこと:

  • ローカルに置いてあるテキストファイルに、一定時間ごとに書き込む。
  • 「q」と入力したらストップ。

ちょっと上記のような処理が必要になったため、入門がてらGroovyで書いてみることにしました。

書き込みとタイマー

ベラっと書きたかったのでベタ打ちでパス指定したテキストファイルに、2種類の内容を交互に書きます。

class WriterTask extends TimerTask{
    def targetFile = new File("test.txt")
    boolean flag = false
    void run(){
        targetFile.text = (flag)? "Test1": "Test2"
        flag = !flag
    }
}
Timer timer = new Timer()
timer.schedule(new WriterTask(), 0, 5000)

あまりJavaと変わらない気がするのは気のせいです。
(そもそもTimerやTimerTaskは、Javaのものを利用しているので仕方ないところがあります)

以下のimport文が不要なのは、Groovyではデフォルトでインポートされているから、ということでよりコード量が抑えられていますね。

import java.util.Timer
import java.util.TimerTask

さて、動作自体はこれで問題ないのですが、一度スタートさせると止まらない、という問題点があります。
特にGroovyConsoleで動かすとInterruptボタンも押せず、タスクマネージャーで無理やり止めたりしていました。

これはこれで気になるのですが、ここでは標準入力を受け取って、「q」が入力されたらストップさせる、ということにします。

入力を受けつける

ターミナルなどからの入力を受け付ける場合は、BufferedReader使うのが良さそうです。

class WriterTask extends TimerTask{
    def targetFile = new File("C:\\Users\\masanori\\test.txt")
    boolean flag = false
    void run(){
        targetFile.text = (flag)? "Test1": "Test2"
        flag = !flag
    }
}
def getInput(){
    def reader = new BufferedReader(new InputStreamReader(System.in))
    reader.lines().any{ line ->
        if(line == "q") {
            System.exit(1)
        } else {
            return true
        }
    }
}
Timer timer = new Timer();
timer.schedule(new WriterTask(), 0, 5000)
getInput()

おわりに

Twitterで話題になっていたこともあり挑戦したGroovyですが、今回のようにサッと書いて動かしたい、という場合に便利そうです。
(規模が大きくなる場合は、慣れの問題もあるとは思いますが、静的に型を持っている言語の方が今のところは良いかな、と思っています)

お手軽度で言えばGroovyConsoleで書いて実行、というのが良さそうですが、IntelliJの入力補完も便利で、慣れや処理の規模に合わせて選択するのも良さそうです。

あと個人的にGroovyに触れる機会が多いと思っているGradleについてももう少し調べてみたいところ。

ということで、のんびりペースにはなると思いますが、あれこれ試していきたいと思います。

参考