Roppongi.js #4でYoga LayoutのLTしてきた
blogjavascriptlt時間配分で大失敗した回。反省しかない。
6/26（火）にDMM社で行われたRoppongi.js #4でYoga LayoutについてLTしてきました。
> スライドスライド
https://speakerdeck.com/mottox2/yoga-with-sketch
> Yoga Layoutとは？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についてデモでつくったJSON to Sketch.appについて
mottox2/json-sketchapp: Sketch Plugin: Convert JSON file to Sketch file
JSONからSketchファイルを作るという、用途不明なデモアプリ。Real Worldで使われる想定はなく、ただflexな感じのAPIを使っていい感じにファイルに落とし込めるというデモ。
この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"
}
]
}
]
}
> 何に応用できそうか何に応用できそうか
PowerPoint, Excel、図面系などのファイルをプログラムで作ろうとすると自前でレイアウト計算をする必要があるがYogaを使ってレイアウト計算をお任せすることができる。
PowerPointファイルを作るサービス開発をお手伝いしているので、もしかしたらそこで使うかもしれない。
また入力もJSONだけじゃなくJSX、YAMLなどのフォーマットも選べるので、クロスプラットフォームのComponentDSLみたいなこともできるかもしれない。
時間配分に失敗しすぎてとてもつらかったです。5分LTでは自己紹介を最後にします。あとデモは厳しい。
ウェブ技術で縦書きを含む画像を生成したい
ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現
Netlify Formsで問い合わせフォームを作ったら簡単だった
追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ
翻訳でHacktoberfestに参加しました
毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数（4つ）の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ