mottox2 blog

blog

Roppongi.js #4でYoga LayoutのLTしてきた

lt
javascript
mottox2
mottox2
2018/06/29

時間配分で大失敗した回。反省しかない。

6/26(火)にDMM社で行われたRoppongi.js #4でYoga LayoutについてLTしてきました。

スライド

https://speakerdeck.com/mottox2/yoga-with-sketch

Yoga Layoutとは?

Yoga LayoutはFacebookがOSSとして公開しているクロスプラットフォームのレイアウトエンジンです。
あのReact Nativeのレイアウト計算に用いられているライブラリになっていて、Flexible Box Layout (like Flexbox)ベースなAPIを用意しています。

なお挙動としてはYogaのPlaygroundで確認できるので、触ってみると意外と出来がいいことに気づくと思う。

今回はnpmで提供されているyoga-layoutを使ったものを採用した。割とシンプルなAPIなので中を見ていくのも良いと思う。webassemblyな箇所もあって新鮮さも味わえるはず。

デモでつくったJSON to Sketch.appについて

mottox2/json-sketchapp: Sketch Plugin: Convert JSON file to Sketch file

JSONからSketchファイルを作るという、用途不明なデモアプリ。Real Worldで使われる想定はなく、ただflexな感じのAPIを使っていい感じにファイルに落とし込めるというデモ。

このJSONを使った結果例

json
{
  "name": "root",
  "width": 375,
  "height": 667,
  "children": [{
      "name": "Top Bars",
      "height": "auto",
      "children": [{
          "name": "Status Bar",
          "height": 24,
          "backgroundColor": "#E8E8E8"
        },
        {
          "name": "App Bar",
          "height": 56,
          "backgroundColor": "#FFFFFF"
        }
      ]
    },
    {
      "name": "Body",
      "height": 300,
      "flexGrow": 1,
      "backgroundColor": "#F5F5F5"
    },
    {
      "name": "Bottom Navigation",
      "height": 56,
      "backgroundColor": "#6202EE",
      "flexDirection": "row",
      "children": [{
          "name": "Navigation Item",
          "width": 56,
          "backgroundColor": "white",
          "text": "Nav1"
        },
        {
          "name": "Navigation Item",
          "width": 56,
          "backgroundColor": "#40009D"
        }
      ]
    }
  ]
}

スクリーンショット 2018-06-26 16.52.19.png (197.0 kB)

何に応用できそうか

PowerPoint, Excel、図面系などのファイルをプログラムで作ろうとすると自前でレイアウト計算をする必要があるがYogaを使ってレイアウト計算をお任せすることができる。
PowerPointファイルを作るサービス開発をお手伝いしているので、もしかしたらそこで使うかもしれない。

また入力もJSONだけじゃなくJSX、YAMLなどのフォーマットも選べるので、クロスプラットフォームのComponentDSLみたいなこともできるかもしれない。


時間配分に失敗しすぎてとてもつらかったです。5分LTでは自己紹介を最後にします。あとデモは厳しい。

@mottox2フリーランスWebデベロッパー

都内でフリーランスエンジニア・デザイナーとしてWebサービスやスマホアプリを作っています。Ruby on Railsでの新規事業の爆速立ち上げや、使いやすいSPAの開発が得意です。

お問い合わせはこちら