「tldraw」を試す
出てきた頃に少し触ったことはあるのだが、ちゃんとは試してないので、改めて。
生成機能が注目されていると思うのだけど、自分はどちらかというとドローツールとしての使い方について見ていきたい。一応生成機能についても触れる。
ほぼほぼ以下の記事がまとまっていて参考になる。
自分はセルフホストを試してみる。
GitHubレポジトリはここ
READMEに以下のようなメッセージが記載されている。このリンク先はmake-real-starterというセルフホストのレポジトリのようなのだが、どうもメンテされていないように思える。今回はmake-realのレポジトリをクローンすることにする。
If you want to make your own version of Make Real, check out our starter repo.
レポジトリをクローン
https://github.com/tldraw/make-real && cd make-real
自分はmiseでnodeをインストール
mise use node@22
パッケージをインストール
npm install
起動
npm run dev
> make-real-template@0.1.0 dev
> next dev
▲ Next.js 14.0.1
- Local: http://localhost:3000
- Environments: .env.local
ブラウザで3000番ポートにアクセスしてみると以下のように表示されるので、APIキーをセットして保存。自分はモデルもgpt-4o-miniに変えてみた。
試してみてわかったこと。
- オブジェクトの線と塗りはセット。個別に設定はできなさそう。色もプリセットのみ。
- オブジェクトの変形とかはできなさそう。例えば四角を台形にするとか、三角の頂点をずらすとか、そういうことはできない。
- 英語フォントは手書き風だが、日本語フォントは普通。
自分が求めている簡易ドローツールは、いわゆる構成図っぽいものを直感的に書けて、あとはそこで使うオブジェクトを直接イラスト的にも書きやすい、というところ。手元ではExcalidrawを使ってるのだけど、それに比べると少し厳しいかな。まあそういうツールではないのでしょうがないとは思うけど。
あと、Make Realボタンも試してみたけど、生成はされるけど、保存されない。どうやらVercel Postgresが必要な前提で、その設定がないのでエラーになっているみたい。
Make Real機能については、コードは公開されているけども、セルフホストについて想定はされていないので説明もない。
一応セルフホスト想定のmake-real-starterも試したんだけども、まず動かすまでに少し修正が必要な感じ。一応なんとなく動かせるところまでは修正できた。
素直にWebサービスを使うほうが良さそう。