Webサイトを作りたいんじゃ！（part1）～tLdraw × make realで落書きがWebサイトに！？～
秋ですね～
どうもこんにちわ。だいぶ秋らしくなり、過ごしやすい季節がやってまいりました。
まぁちょっと涼しいを通り越して、肌寒いぐらい
…と思ったら次の日には、めっちゃ日が差してきて暑い時もありますよね。
秋の日差しってなんか強い。
そんでもって、夏が暑すぎて動けなかった蚊が、秋になって急に元気になって、今になってめっちゃ蚊に刺されまくるというね。
えぐいんじゃ最近の秋ッ！！松茸もってこい！！
Webサイトが作りたい
さて、そんな蚊に刺されを搔きながら思うことがあるのですが
唐突にWebサイトが作りたい！と言ってみる。
男子なら一回はWebサイト作りたいなぁって思いますよね！（そうでもない）
そして、せっかくならおのれの力で一から制作したいという憧れもあります。でもゴリゴリは書きたくない（どないやねん）
とりあえず面白ツールを見つけて、試して、失敗してと、じっくりと時間をかけてWebサイトの制作をしていきたいのです。
その中で、みなさんが参考になるツールがあればこれ幸いと言うわけです。
その第一弾でございます！（第二弾は10年後かも）
tLdraw
と言う事で、落書きをすると、Webサイトを生成してくれる面白ツールがあると噂を聞きつけ、やってまいりました。（実際はパソコンの前にいるだけです）
それがこちら「tLdraw」です。
リリースされたのが結構前なので、若干古い情報になってしまいましたね。
これは大変申し訳ありません …と言うと思いましたか？
そんなことは関係ないんですよ、みなさん！！
今！役に立つかどうかがポイントなんです。
今役に立つと思ったあなた方は、ぜひ見てください。
そう思わなかった人は、黙って「スキ」を押してコメントに「とても良かった」と書いて退出してください。
tldrawとは？
Reactライブラリを使用して出来ている、ホワイトボードアプリです。
tLdraw自体はお絵描きができるだけなのですが、すごいのが「make real」というサービスです。ChatGPTのAPIが活用され、手書きのラフスケッチからWebデザインやHTMLコードを瞬時に生成可能なんですってよ。奥さん。
まぁ能書きはいいので、早速やってみましょうか。
tLdrawと検索するとすぐに「tldrawだけのサイト」も出てくるんですが、そのサイトをクリックすると、「make real」が出てこないんですよね。
まぁなんかすれば出てくるんでしょうけどね。
[tldraw make real]と一緒に検索してあげてください。
下記のこいつをクリックしましょう。
そうするとこのようなホワイトボードチックな画面が現れ
右上にも「Make Real」の文言が出てきました。
では落書きしていきますね。
なかなか良く描けておりますね！！可愛くできました。
…って「あん・パン男」を描いて喜んでいる場合ではありませんでした。ﾃﾍﾍﾟﾛ
手始めにうちのサイトのトップが再現可能かやってみようと思います。
かきかき…
どうでしょうか。まぁまぁの落書き具合ですね。
ほんとうにこんな感じで、生成してくれるのでしょうか。
一応こちらの{Make Real}ボタンから生成してくれるようです。
ぽちっとな。
…シーン
はい、出ました！「返事がない… ただの屍」状態ですよ。これは！
非エンジニアは、ここからが長いんすよ。勘弁して。
調べ調べ… 30分後。
どうやら[APIキー]が必要なようです。
いやもう、そりゃそうよ。
ChatGPTのAPIが活用され、手書きのラフスケッチからWebデザインやHTMLコードを瞬時に生成可能なんですって。
自分でも言ってるし。
APIキーの作成
確かにこんな事、AIの力なしでできるわけありません。
右上の歯車の[設定]を押下するとAPIキー入れろってめっちゃ出てきます。
OpenAIのサイトに行ってAPIキーを作成しましょう。
これは以前APIキーを使ったことあるので、知ってるんですよ私。
[ダッシュボード]からの[APIキー]を押下します。
これでAPIキーの作成ができました。
この後あなただけのAPIキーが出てくるので、大切に保管しましょう。
ここから二度と出てきません（いやマジだからね。）
私の大事なAPIキーだから、誰にも教えません。みんさんも内緒にしましょう。
早速設定をクリックしてAPIキーをぶちこんじゃります。
オルゥア！！！
再度挑戦です。どらどら…
いい加減にせーよ屍がぁーー！！
しかたなく調べ調べ… 30分後。
どうやら支払い情報の登録をしていなかったようです… ﾁｬﾝﾄｼﾛ!
OpenAIとChatGPTの支払いは別物なので、既に有償版のChatGPTを利用している場合でも別途登録する必要があったんですね。
あっれー前からそうだったけか？ ←まだ言い訳するやつ
OpenAIのAPIを利用するための料金をチャージをします。
チャージしていなくてもAPIキーの作成はできてしまうので
意外とここで「なんで？」ってなってる人多いかもしれませんね。
…いや俺だけか？
Webサイト生成
登録も完了したので、次はできるはず！
どうなるでしょうか？ザンｯ
出来ましたね！
なんか最初の一歩でめっちゃ時間かかってもうた気がするけど。
簡易ではありますが、結構それっぽくできるもんです。
一からコーディングすると結構時間かかっちゃいますもんね。
細かく指示をしてあげればもっと良くなりそうな、そんな予感だけはするぜ。
またサイズを変えると、そのサイズに合わせて配置を変えてくれます。
つまりレスポンシブにも対応してるってことですね。
これも有能な機能ですね～
またこちらHTML（中身）が書いてあるので、そちらをコピーすることも可能です。
まぁそうでないと困るのですが…
細かい部分は直接修正も可能って事ですね、
たたき台で作れるだけでも、優秀なツールと言えるのではないでしょうか。
ん、待てよ。これ、この画像のままつっこんだらどうなるんだろう。
[Make Real]を押下すると、どうなるでしょうか。
どん！
自分で書くのもいいのですが、いいなと思ったサイトがあるならスクショしてぶち込むのが、一番早いかもしれませんね。
横の「あん・パン男」も喜んでいます。
ちなみにこれはおまけですが、
絵文字のいるかにジャンプを指示させてることもできますみたいですよ。
可愛いよイルカ。
他にも電卓を作れたり、ミニゲームなんかも作れるようです。
いや～楽しそうですな。← 趣旨変わってるがな。
反省
ちょっと今回あまり時間がなく（支払いの登録で時間を使い過ぎてしまった）内容が薄かったかもしれません。
まぁツールってのは、とにかくいじってみるのが醍醐味ですからね。
消化不良の方は、是非とも自分でいじってみろい！
「Webサイトを作りたいんじゃ」第一弾という事で、今回はこんなところで、ご勘弁下さい。
ただ次回はやりたいことが決まっていて、この「tldraw」と「Cursur」を使って、今度こそWebサイトを構築したいと思います。
乞うご期待です！
この記事が気に入ったらサポートをしてみませんか？