GUI環境でWeb の UIを構築する開発ツールを作りたい

qiita.com

という記事を書いた。 要約としては、「今こそGUIでWebのUIを生成できるような開発環境を目指すべき」みたいな話。

概念

Web の GUIの概念を分解すると

  • JS はViewとしての実装を持つプレゼンテーションレイヤー、ロジック注入のコンテナーレイヤーに分割して考える
  • HTML/CSS は、レイアウト定義のレイヤー、そのレイアウト領域を占めるエレメントのレイヤーに分割して考える

この考え方に基づくと、GUI開発環境で作るべきものは、

  • テンプレートへのJSロジックのつなぎ込み
  • レイアウトエディタ
  • 個別のエレメントの装飾

となる。

JSロジックのつなぎこみはヘヴィにJSだからまだコードで書く方がいい。作るならノードベースのエディタになりそう。 エレメントの装飾は自力で頑張るより Sketch から生成できないか試したい。後回し。

レイアウトエディタは今でも作れそう。作った。

レイアウトエディタを作った

css grid layout を用いて、GUIでポチポチやることで、レイアウト生成をある程度自動化する。

https://mizchi-sandbox.github.io/grid-generator/ で試せる。

見ての通り、非常に雑だが、css grid layout としての表現力は試すには一通り機能は揃ってると思う。

https://i.gyazo.com/fd5f6f75b5f577b18ec276c1655ff80d.png

サンプルで用意した HolyGrail レイアウトだと、こんな感じのCSSが生成される

.gridContainer {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 120px 4fr 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas: 'header header header' 'left content right' 'footer footer footer';
}
.headerArea {
  grid-area: header;
}
.leftArea {
  grid-area: left;
}
.contentArea {
  grid-area: content;
}
.rightArea {
  grid-area: right;
}
.footerArea {
  grid-area: footer;
}

この辺命名ルールがプロジェクトごとに違うので、うまい感じで表現するのが難しい。とりあえず適当。 注意点として、IE11 で動かすには postcss の autoprefixer などを通す必要がある。

作ってみた感触

まだPoCレベルの品質だが、レイアウト定義ツールとして発展性がある土台が作れたので、あとは欲しいものを気合で作っていくとどうにかなりそうな気がする。 2次元空間の連結処理を愚直に書いてると、まるでゲームプログラミングのようだった。こういうの辛いけど割と好き。

TODO

  • メディアクエリによるレスポンシブ対応
  • ドラッグで範囲指定で連結
  • 指定したgrid-areaをさらに子コンポーネントとして分割できるようにする
  • 指定したgrid-area へ React Component を埋め込んでプレビュー
  • 生成コードにpostcss通しておく
  • Atom プラグイン化

思いつく限りだとこんな感じだろうか。 本気で作るなら patreon とかで gittip 使うべきか。あとで考える。