Closed4

「tldraw」を試す

kun432kun432

出てきた頃に少し触ったことはあるのだが、ちゃんとは試してないので、改めて。

生成機能が注目されていると思うのだけど、自分はどちらかというとドローツールとしての使い方について見ていきたい。一応生成機能についても触れる。

ほぼほぼ以下の記事がまとまっていて参考になる。

https://zenn.dev/mobdev/articles/c6ca9d902481a5

自分はセルフホストを試してみる。

kun432kun432

GitHubレポジトリはここ

https://github.com/tldraw/make-real

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に変えてみた。

kun432kun432

試してみてわかったこと。

  • オブジェクトの線と塗りはセット。個別に設定はできなさそう。色もプリセットのみ。
  • オブジェクトの変形とかはできなさそう。例えば四角を台形にするとか、三角の頂点をずらすとか、そういうことはできない。
  • 英語フォントは手書き風だが、日本語フォントは普通。

自分が求めている簡易ドローツールは、いわゆる構成図っぽいものを直感的に書けて、あとはそこで使うオブジェクトを直接イラスト的にも書きやすい、というところ。手元ではExcalidrawを使ってるのだけど、それに比べると少し厳しいかな。まあそういうツールではないのでしょうがないとは思うけど。

あと、Make Realボタンも試してみたけど、生成はされるけど、保存されない。どうやらVercel Postgresが必要な前提で、その設定がないのでエラーになっているみたい。

kun432kun432

Make Real機能については、コードは公開されているけども、セルフホストについて想定はされていないので説明もない。

一応セルフホスト想定のmake-real-starterも試したんだけども、まず動かすまでに少し修正が必要な感じ。一応なんとなく動かせるところまでは修正できた。

https://github.com/tldraw/make-real-starter

素直にWebサービスを使うほうが良さそう。

このスクラップは12日前にクローズされました