2018-11-13

RAMLの導入を考える

raml

夜中に眠れなくなってしまったので、なんとなくRAMLの導入について考える

RAMLとは

YAMLでRestAPIのAPI仕様を作成できるツール

今私がいる環境

java
spring boot
ddd

何が生成できるの？

YAMLから以下を生成できる

API仕様書
バリデーションチェック(可能性)
スタブ作成
テスト仕様書作成(可能性)

疑問: `RAML => ソース`か`ソース => RAML`か？

RAML => ソースの場合

RAMLは設計書、ソースは製造物と考える

pros

RAMLをしっかりレビューして、そこから差異なく製造することにより品質を担保できる
コンポ図との相性が良い

cons

コードを手で入力したら結局差異が出てバグる (Excel仕様書と差異なし)
RAMLからコードを自動的に生成するのは大変そう
RAMLをjavaに食わせたり出来んの？
テストコードの自動生成ができればいいのかなぁ

ソース => RAMLの場合

ソースは設計書兼製造物と考える
RAMLはそこから出力される何か

pros

RAMLとソースの差異がない

cons

RAML生成までに時間がかかる(実装が必要なため)
- 既存APIへの変更の場合は内部実装も修正しないとRAMLを生成できない
- Requestクラスを毎回新規作成すれば良さそうだが差分がわかりづらくなる
- 仕様書早くくれ〜って他チームから言われると辛い

感想

メンテまで考えるとソース => RAMLは現実的ではなさそう
ただRAML => ソースも自動化をしておかないと旨味を活かせない

疑問: スタブ作成？既存APIはどうすんの？

APIのバージョン管理をしてないと無理
優先低い

こんなこといいな、できたらいいな

spockのテストパタン自動生成

RAMLに記述したテストからspockのwhereとwhenを自動生成する
setupとthenは自力で書く
設計書(RAML)、テストコード、製造の流れが作りやすくなりそう

特に結論もなく以上です

2018-11-03

【SpringBoot】Formクラスのフィールドを値オブジェクトにする

真面目に調べたことがなかったのでメモ

@RestController
public class Api {
    @RequestMapping("/")
    public String index(Form form) {
        return "Greetings from Spring Boot! " + form.name.value;
    }

    // privateでもok
    private static class Form {
        private NameForm name;


        // フォームではセッターで渡す
        public void setName(NameForm nameForm) {
            this.name = nameForm;
        }
    }

    // privateでもok
    private static class NameForm {
        private final String value;

        // 値オブジェクトへはコンストラクタで渡す
        public NameForm(String value) {
            this.value = value;
        }
    }
}

ポイント

Formクラス

メソッド名をAPIのキー名と同じにする
セッターへは値オブジェクトを渡す

値オブジェクト (NameForm)

値はコンストラクタで渡す

その他

Formや値オブジェクトはプライベートクラスにしてもOK

2018-11-01

googleドキュメントにmermaid.jsを書く

googleドキュメントはオンライン上で編集できてとても便利
そこにmermaid.jsも書きたい！ってことでやってみた

ドキュメントを書く

こんな感じ
f:id:naosim:20181101171058p:plain
これを読み込んでHTMLのページ上に図を表示します

スクリプトエディタでプログラムを書く

ツール > スクリプトエディタでエディタを開いてプログラムを書きます

//ドキュメントのID
var DOC_ID = 'YOUR_DOCUMENT_ID';

// HTMLを表示する
function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

// ドキュメントの内容を取得する
function getDocs() {
  var docs=DocumentApp.openById(DOC_ID);
  return {
    title: docs.getName(),
    text: docs.getBody().getText()
  }
}

YOUR_DOCUMENT_IDのところにドキュメントのIDを入れます
具体的にはドキュメントのURLの↓この部分です https://docs.google.com/document/d/!!ココ!!/edit

HTMLを作る

ファイル > 新規作成 > HTMLファイルを選択しindex.htmlというファイルを作ります
ファイルの中身はこんな感じ

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://unpkg.com/mermaid@7.1.2/dist/mermaid.js"></script>
  </head>
  <body>
    <h1 id="title"></h1>
    <div id="mermaid" class="mermaid"></div>
    <script>
    function update() {
      google.script.run
        .withSuccessHandler(function(result) {// 戻り値に対する処理
          console.log(result);  
          document.querySelector('#title').innerHTML = result.title;
          document.querySelector('.mermaid').innerHTML = result.text;
          mermaid.init();// mermaidを更新
        })
        .getDocs();
    }
    
    update();// 初回実行
    
    mermaid.initialize({startOnLoad:false});
    </script>
  </body>
</html>

公開する

公開 > ウェブアプリケーションとして導入を選択して必要事項を埋める
アプリケーションにアクセスできるユーザを自分だけにすると自分以外見れないので安心です

作成したサイトのURLにアクセスすると図が表示される

キターー！

f:id:naosim:20181101171300p:plain

まとめ

mermaid.jsが手軽にかけるようになった
markdown + mermaid.jsが表示できるようにしたくなってきた！
開発は続く

2018-10-17

アクションRPG Day5 衝突

game javascript phaser.js actionrpg

f:id:naosim:20181010064547p:plain 前回はアニメーションをやりました

naosim.hatenablog.jp

今回は壁との衝突です
Phaserの衝突は優秀で、プレイヤと壁それぞれに衝突する領域を定義したら後は勝手に計算してくれます

プレイヤーの衝突定義

プレイヤークラスのcreateメソッドをいじります
何も設定しないと判定領域はspriteのサイズ通り32x32になりますが、それだとちょっと大きいのでもう少し小さい領域にします

class Player {
  ...
  create() {
    this.sprite = this.scene.physics.add.sprite(32, 32, 'player');
    this.sprite.body.setSize(16, 24);
    this.sprite.body.offset.y = 8;
    this.sprite.setCollideWorldBounds(true);
  }
  ...
}

sprite.bodyとは物理演算に使うオブジェクトです sprite.bodyは物理演算にarcadeを使っているのでPhaser.Physics.Arcade. Bodyです

Phaser 3 API Documentation - Class: Body

this.sprite.body.setSize(16, 24);

ここで衝突の領域サイズを指定します
領域は中央寄せになります
今回は足が地についたところきっちり判定したいので、足から領域が始まるようにoffsetを指定します

this.sprite.body.offset.y = 8;

Groundの衝突定義

背景はtiledmapで作っていますが、mapの絵に衝突判定して欲しい部分と無視して欲しい部分があるのでそれを指定します Groundクラスのcreateをいじります

Ground {
  create() {
    const map = this.scene.make.tilemap({ data: this.level, tileWidth: 16, tileHeight: 16 });
    this.layer = map.createStaticLayer(0, map.addTilesetImage("ground"), 0, 0);
    this.layer.setCollisionBetween(6, 44);// 追加
  }
}

Phaser 3 API Documentation - Class: StaticTilemapLayer ポイントはsetCollisionBetween(6, 44)
衝突判定するインデックスを範囲指定します
指定の仕方は他にもあるのでいろいろやってみたら良さそう
実は今回はsetCollisionByExclusionの方が正しい気がしてきたし

プレイヤーとGroundの衝突判定をする

createメソッドに1行書くだけです

this.physics.add.collider(player.sprite, ground.layer);

衝突判定はこれで終わり
すげぇ...

以上

jsdo.it

プレイヤーが壁に当たるとちゃんと止まります
ゲームらしくなってきたな

2018-10-14

アクションRPG Day4 アニメーション

f:id:naosim:20181010064547p:plain

前回はプレイヤーを表示しました

naosim.hatenablog.jp

ただ動かした時にアニメーションがなかったので今回はそれを追加します
アニメーションを追加ためにクマが「右方向に歩く絵」と「左方向に歩く絵」が必要なので、プレイヤーの画像を変更しました

preloadで読み込む画像の変更

プレイヤーの画像を変更します

this.load.spritesheet('player', 'http://jsrun.it/assets/W/0/B/U/W0BU0.png', { frameWidth: 32, frameHeight: 32 });

Player.create()でアニメーションを定義する

class Player {
  ...
  create() {
    this.sprite = this.scene.physics.add.sprite(32, 32, 'player');

    // ここにアニメーションの設定を追加する    
  }
  ...
}

上記のコメントの部分に下記の4つのアニメーションを追加します

右向きに立ってる絵
左向きに立ってる絵
右向きに歩いている絵
左向きに歩いている絵

右向きに立ってる絵

this.scene.anims.create({
  key: 'turn-right',
  frames: [ { key: 'player', frame: 4 } ],
  frameRate: 20
});

this.scene.anims.createのドキュメントはこれ
Phaser 3 API Documentation - Class: AnimationManager
引数: AnimationConfig
keyには適当な名前をつける
frameに渡す整数は画像をframeWidthとframeHeightで分割した状態で左上から数えた数
今回の画像の場合、右向きの絵は左から５番目で数値はゼロオリジンなので4を指定する

左向きに立ってる絵

考え方は右向きと同じ

this.scene.anims.create({
  key: 'turn-left',
  frames: [ { key: 'player', frame: 3 } ],
  frameRate: 20
});

右向きに歩いている絵

this.scene.anims.create({
  key: 'right',
  frames:this.scene.anims.generateFrameNumbers('player', { frames:[ 5, 4, 6, 4] }),
  frameRate: 10,
  repeat: -1
});

framesの指定でgenerateFrameNumbersを使う
generateFrameNumbers

framesで指定した順番に絵をアニメーション表示してくれる
このメソッドが何を返してるのかが気になったので、戻り値をログ出力してみたらこんなオブジェクトを返してた

[
  {key: "player", frame: 5},
  {key: "player", frame: 4},
  {key: "player", frame: 6},
  {key: "player", frame: 4}
]

要するにただのファクトリメソッドみたいw

frames: [5, 4, 6, 4].map(v => ({key:'player', frame: v}))

これでええやん
まぁいいや

左向きに歩いている絵

ほぼ一緒

this.scene.anims.create({
  key: 'left',
  frames:this.scene.anims.generateFrameNumbers('player', { frames:[2, 3, 1, 3] }),
  frameRate: 10,
  repeat: -1
});

createメソッドの最終形

class Player {
  ... 
  create() {
    this.sprite = this.scene.physics.add.sprite(32, 32, 'player');
    this.lastDirection = 'right';
    
    this.scene.anims.create({
      key: 'turn-right',
      frames: [ { key: 'player', frame: 4 } ],
      frameRate: 20
    });

    this.scene.anims.create({
      key: 'turn-left',
      frames: [ { key: 'player', frame: 3 } ],
      frameRate: 20
    });

    this.scene.anims.create({
      key: 'right',
      frames:this.scene.anims.generateFrameNumbers('player', { frames:[ 5, 4, 6, 4] }),
      frameRate: 10,
      repeat: -1
    });

    this.scene.anims.create({
      key: 'left',
      frames:this.scene.anims.generateFrameNumbers('player', { frames:[ 2, 3, 1, 3] }),
      frameRate: 10,
      repeat: -1
    });
  }

  ...
}

Player.update()でアニメーションを設定する

先ほど定義したアニメーションを動作に合わせて設定します

update () {
  if (this.cursors.left.isDown) {
    this.sprite.setVelocityX(-160);
    // 左向きに歩くアニメ
    this.sprite.anims.play('left', true);
    this.lastDirection = 'left';
  } else if (this.cursors.right.isDown) {
    this.sprite.setVelocityX(160);
    // 左向きに歩くアニメ
    this.sprite.anims.play('right', true);
    this.lastDirection = 'right';
  } else {
    this.sprite.setVelocityX(0);
    this.sprite.anims.play(this.lastDirection && this.lastDirection == 'left' ? 'turn-left' : 'turn-right');
  }

  if (this.cursors.up.isDown) {
    this.sprite.setVelocityY(-160);
  } else if(this.cursors.down.isDown) {
    this.sprite.setVelocityY(160);
  } else {
    this.sprite.setVelocityY(0);
  }
}

アニメーションを再生するplayメソッドの仕様はこれ
play(key [, ignoreIfPlaying] [, startFrame]) 今の実装ではupdateが呼ばれるたびに毎回playメソッドをコールするので、playメソッドの第２引数のignoreIfPlayingをtrueにしておきます
そうしないと例えば右ボタンを押してる時はupdateのたびに右・右・右...と実行されるので、画面上は右に歩くアニメの1フーレム目がずーっと表示されることになり、歩く感じになってくれません
ここらへんをフレームワークで吸収してくれるのは助かるなぁ

以上

jsdo.it

プレイヤーが左右に歩くアニメーションができました
次回は壁の衝突判定をやります

2018-10-12

アクションRPG Day3 プレイヤー

actionrpg phaser.js game

f:id:naosim:20181010064547p:plain

前回はフィールドの表示をしました

naosim.hatenablog.jp

今回はプレイヤーを表示して移動させます
画像はいつものenchantのクマです

画像をpreloadで読み込む

フィールド読み込みの後に追加します

function preload() {
  // 背景画像の読み込み 16x16のマップチップの画像
  this.load.image('ground', 'http://jsrun.it/assets/K/e/w/N/KewNo.png');
  // プレイヤー 32x32
  this.load.spritesheet('player', 'http://jsrun.it/assets/e/N/V/L/eNVLk.png', { frameWidth: 32, frameHeight: 32 });
}

プレイヤーを表示する

プレイヤーもクラス化します

Playerクラスを使う側の実装

まずは使う側から

var player;// グローバルに定義
function create() {
  const ground = new Ground(this);
  ground.create();
  
  // キャラクタの生成
  player = new Player(this);
  player.create();
  player.cursors = this.input.keyboard.createCursorKeys();
}

function update() {
  // フレーム単位の処理
  player.update();
}

今回作るPlayerはcreateメソッドとupdateメソッドから利用するため、player変数をグローバルに作っておきます
(あんまり嬉しくないけどしょうがない)
そしてcreateメソッド内でplayerを生成し、テンキーでプレイヤーを移動させるためにcursorsをセットします
updateメソッドでplayer.update()を呼びます
player.update()の中で、カーソルの状態に応じてプレイヤーを移動させます

Playerクラス

プレイヤー画像の表示と移動をします

class Player {
  constructor(scene) {
    this.scene = scene;
    this.sprite = null;
    this.cursors = null;
  }

  create() {
    this.sprite = this.scene.physics.add.sprite(32, 32, 'player');
  }

  update () {
    if (this.cursors.left.isDown) {
      this.sprite.setVelocityX(-160);
    } else if (this.cursors.right.isDown) {
      this.sprite.setVelocityX(160);
    } else {
      this.sprite.setVelocityX(0);
    }

    if (this.cursors.up.isDown) {
      this.sprite.setVelocityY(-160);
    } else if(this.cursors.down.isDown) {
      this.sprite.setVelocityY(160);
    } else {
      this.sprite.setVelocityY(0);
    }
  }
}

createの中身

createメソッドでspriteを生成します
このタイミングで画面にプレイヤーが表示されます

this.scene.physics.add.sprite()

これはsprite生成のメソッドですが、ドキュメントによると
"Creates a new Arcade Sprite object with a Dynamic body." だそうです
物理演算対象のスプライトを生成するってことですかね
戻り値はSpriteです

Phaser 3 API Documentation - Class: Factory

Phaser 3 API Documentation - Class: Sprite

前回のGroundクラスではphyisicsを意識してなかったけど大丈夫か...？
まぁいいや

updateの中身

上下左右に押されたらその方向に速度をセットします
ただこの値の単位がわからない...
px/frameだとすると、1フレームごとに160px移動するから早すぎるし...
なので勝手にpx/secということにするw

今日はここまで
jsdo.it ここまででプレイヤーを画面に表示して移動させることができました
PCのテンキーで操作できます(スマホの人はごめんなさい)
ただ現段階では移動中のアニメーションや壁との衝突判定がないのでそれは次回以降実装します

2018-10-11

phaserでアクションRPG Day2 フィールドの作成

game actionrpg javascript phaser.js

f:id:naosim:20181010064547p:plain

前回phaserのセットアップをしました

naosim.hatenablog.jp

今日はフィールドを表示してみます

で...いきなり壁...
コードをcodepenで書いてたけどcodepenは画像を扱えなかった...
ワークアラウンドはあるけど本質的じゃないコードが入るといやなのでjsdo.itへお引越し
今回はでほぼ体力使い切った...

画像をpreloadで読み込む

まずはフィールドのマップチップ画像を読み込みます

function preload() {
  // 背景画像の読み込み 16x16のマップチップの画像
  this.load.image('ground', 'http://jsrun.it/assets/K/e/w/N/KewNo.png');
  // thisはSceneクラス
  // https://photonstorm.github.io/phaser3-docs/Phaser.Scene.html
  
}

いきなりthisが出てきてビックリしますが、thisはSceneクラスです
Phaser 3 API Documentation - Class: Scene

Phaserのver2ではグローバル変数にgameオブジェクトをいれておいて使うのが定石ぽかったけど、ver3からはthisを使うんですねー
グローバル汚染が減ってよくなった

背景を表示する

次にGroundクラスを作ります
phaser系の記事を読むとだいたいcreateメソッドの中に直にいろいろ書いてますが、それだと辛くなってくるのでクラス化しておきます

Groundクラスを使う側の実装

function create() {
  const ground = new Ground(this);
  ground.create();
}

newしてcreateを呼んで終了
create()と同時に背景画像が表示される想定です
phaserはcreateと同時に表示する仕様がある意味特徴なのでそれに合わせます

他のフレームワーク(例えばenchantとか)だと、生成後にaddChild()すると表示されますが、phaserは一気に表示まで処理が進みます
強気だなぁと思うけど、慣れればまぁそんなもんって感じですね

Groundクラス

次にGroundクラスの実装です

class Ground {
  constructor(scene) {
      this.scene = scene;
      this.level = [
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  0,  0,  0,  0,  0,  0,  0,  0,  0,  6],
        [  6,  6,  6,  6,  6,  6,  6,  6,  6,  6,  6],
      ];
      this.layer = null
  }

  create() {
    const map = this.scene.make.tilemap({ data: this.level, tileWidth: 16, tileHeight: 16 });
    this.layer = map.createStaticLayer(0, map.addTilesetImage("ground"), 0, 0);
    // ここで背景画像が配置される
  }

ただの壁のある箱です
createStaticLayerを呼ぶとlayerが生成されて画面にフィールドが表示されます
ただ...createStaticLayerの意味がよくわからん...

Phaser 3 API Documentation - Class: Tilemap

他にもcreateDynamicLayerてのもある
何がStaticで何がDynamicなのか...物理演算的なやつかな... とりあえず今はStaticで実装しておきます

以上、

jsdo.it

ここまでで箱っぽいフィールドができました

RAMLとは

今私がいる環境

何が生成できるの？

疑問: RAML => ソースかソース => RAMLか？

RAML => ソースの場合

pros

cons

ソース => RAMLの場合

pros

cons

感想

疑問: スタブ作成？既存APIはどうすんの？

こんなこといいな、できたらいいな

spockのテストパタン自動生成

ポイント

Formクラス

値オブジェクト (NameForm)

その他

ドキュメントを書く

スクリプトエディタでプログラムを書く

HTMLを作る

公開する

作成したサイトのURLにアクセスすると図が表示される

まとめ

プレイヤーの衝突定義

Groundの衝突定義

プレイヤーとGroundの衝突判定をする

preloadで読み込む画像の変更

Player.create()でアニメーションを定義する

右向きに立ってる絵

左向きに立ってる絵

右向きに歩いている絵

左向きに歩いている絵

createメソッドの最終形

Player.update()でアニメーションを設定する

画像をpreloadで読み込む

プレイヤーを表示する

Playerクラスを使う側の実装

Playerクラス

createの中身

updateの中身

画像をpreloadで読み込む

背景を表示する

Groundクラスを使う側の実装

Groundクラス

疑問: `RAML => ソース`か`ソース => RAML`か？