見出し画像

YAMLでプロトタイプを作る謎ツール「ProtoML」

というものを作っています。

会社で「謎なんですが…」と前置きして見せたら「ほんとに謎ですね…」というリアクションだったので謎なんだと思います。

さて、僕はあまりドラッグ&ドロップが好きではありません。
別にキーボードショートカット大好き!というわけでもなく、普通にマウス(トラックパッド)で操作もします。

ただ、ドラッグ&ドロップだけはどうにも苦手で、再現性というか、確実性というか、そういうののなさが苦手です。くしゃみしたくなったら1回やめなきゃいけないし。

ブラウザのサイズ変更も、

tell application "Safari"
	activate
	set bounds of window 1 to {0, 0, 1028, 720}
end tell

とかやったりします。

iOSでStoryboadじゃなくコードで書きたくなる理由も、ドラッグ&ドロップが苦手なことが大きいかもしれない。
(Androidは結果がXMLですぐ見えるので、何が起きているのかわかって大変よい)

というわけでドラッグ&ドロップなしでプロトタイピングがしたいのです。

さてこのツール、当初は、

nav:
  title: App name
  left:
    icon: gear

みたいな独自のルールに従ったYAMLを書くとアプリのプロトタイプができるという形で実装していました。

実際途中までこの方式で進めていたんですが、このDSLを覚えるのが僕自身でさえ辛かったのでやめました。
むやみにDSLを導入するの、よくない。

また、JSXをそのまま書くパターンも考えたんですが、それはExpo Snackの劣化版にしかならなそうだったので、最終的に書いたYAMLをほぼそのままreact-native-webのViewかTouchableOpacityに渡すという方式にしました。

例えば、

- style:
    borderWidth: 1
    borderColor: grey
  children:
    - style:
        backgroundColor: lightgrey
        height: 20

と書けば、

<View style={{ borderWidth: 1, borderColor: 'grey' }}>
  <View style={{ backgroundColor: 'lightgrey', height: 20 }}>
  </View>
</View>

というビューになります。
https://protoml.netlify.com/examples
でその他の例も見ることができます。

まだとりあえず作ってみたという段階で、自分でも実用してないので、次作るアプリのプロトタイピングに使ってみて、改善していこうと思います。

YAMLのリファレンスやマージでもっと便利になる気がしたんだけど、今の所そうでもなくて残念です。(作り始める前のイメージ通りにならないのはよくあることだけど)

とてもお金儲けできる気はしないし、大事に隠すほどの実装でもないので、ソースコードは以下で公開しています。



この記事が気に入ったらサポートをしてみませんか?