SONUB にもどる バイブコーディング
バイブコーディング

書くだけでできるコーディング、バイブコーディング

コードを知らなくても大丈夫。作りたいものをチャットに書くだけで、リエンがすぐにアプリを作って画面に見せてくれます。気に入らなければ、また書いて直せます。

私の作品

ログイン · プロジェクトを保存するにはログインしてください。

まだ保存した作品がありません。

こんなものが作れます

下をタップすると、リエンがすぐに作り始めます。

バイブコーディングとは?

作りたいものの雰囲気や動きを文章で説明し、と一緒に結果をすぐ見ながら直していくの方法です。

いつ使うの?

アイデアをすばやく試したり、小さなWebアプリやゲームを作ったり、・・を楽しく学ぶときにぴったりです。

どうやるの?

① 何を作るか書く → ② リエンがコードを作る → ③ プレビューを確認 → ④ また書いて直す。これをくり返します。

リエンに上手に頼むコツ

リエンは、あなたが書いた言葉どおりに作ります。頼む文で思い描いた姿がはっきりしているほど、最初の結果が想像に近くなり、直す回数も減ります。

四つの段階が輪になっている。人がチャットの吹き出しに願いを書き、親切なAIの助っ人がカラフルなブロックを組み立て、プレビュー画面にネコと星の小さなゲームが映り、その人がまた小さな修正を書く。
はくり返しです。書いて、リエンが作り、プレビューを見て、小さな修正をまた書きます。一周するたびに、思い描いた形に近づきます。
  1. 何なのかを言う

    まず種類を書きましょう。ゲーム、クイズ、タイマー、ホームページなどです。「8歳の弟が遊ぶ」のように、誰のためのものかも添えましょう。

  2. 見た目を言う

    色・大きさ・位置を書きましょう。「濃い青の背景」「大きくて丸いボタン」「点数は上の隅に」。友だちに話すときの言葉で十分です。

  3. 何が起きるかを言う

    押したとき、キーを打ったとき、時間切れになったとき、どうなりますか?「スペースキーを押すと、ネコがジャンプする。」ルールがあると、絵がアプリに変わります。

  4. 一度に一つずつ直す

    最初の結果が出たら、メッセージ一つにつき直してほしいことを一つだけ頼みましょう。「ネコをもっと大きく」、その次に「音を入れて」。何かが壊れても、どの頼みが原因かすぐに分かります。

同じアイデア、二通りの頼み方

ぼんやりしすぎ

ゲームを作って。

はっきり

矢印キーで動くネコが、落ちてくる星を集めるゲームを作って。点数は上に表示して、30秒たったら終わるようにして。

ぼんやりした頼みが間違いというわけではありません。リエンはそれでも何かを作りますが、残りを推測するしかないので、結果は思いがけないものになります。はっきりした頼みは、その推測に前もって答えてくれます。

うまく動かないとき

はっきり頼んでも、アプリが思ったとおりに動かないことがあります。それは普通のことです — プログラマーはだれでも、何度も直しながら作ります。抜け出す道は三つあります。

  1. リエンにエラーを直してもらう

    プレビューにが出ると、リエンがそのエラーの文を受け取って、一度は自動で直そうとします。それでもエラーが残っていれば、ボタンを押してもう一度任せられます。全部で3回試してもうまくいかなければ、止まってあなたに尋ねます。同じ直し方をくり返しても、うまくいくことはめったにないからです。

  2. 見えたことを言う

    期待したことと実際に起きたことの違いを書きましょう。「スペースキーを押しても何も起きない。ネコがジャンプするはず。」リエンにはあなたの画面が見えないので、言葉で描いた絵がいちばん早い直し方です。プレビューの横のにはエラーが並びます。一つをコピーしてチャットに貼りましょう。

  3. うまく動いていたバージョンに戻る

    保存するたびに — あなたが保存しても、リエンが保存しても — 新しいバージョンができ、プロジェクトごとに最新の50個が残ります。変更で前より悪くなったら、履歴を開いて、うまく動いていたバージョンに戻しましょう。戻したことも新しいバージョンとして保存されるので、何も失われません。

保存した場面が写真のように、一本のひもに左から右へ並んでつるされている。いちばん右の最新の一枚にはひびが入り、曲がった矢印が真ん中の明るく無傷な一枚へ戻っている。
保存するたびに、戻れる場面が一つ増えます。最新の変更でアプリが壊れたら、最後にうまく動いていたものに戻しましょう。

安全に共有する

プロジェクトを作ったときは、共有はオフになっています。オンにすると、アドレスを知っている人ならだれでもアプリを開いて動かせます。オフにするとそのアドレスは開けなくなります。もう一度オンにすると、実行アドレスはそのままもう一度開き、共有画面のアドレスだけが新しくできます。共有したアプリは別の鍵のかかった箱の中で動くので、だれのSONUBアカウントにも届きません。それでも、共有するアプリにパスワードや個人情報を絶対に入れないでください。ほかの人のアプリにも入力しないでください。

リエンが書いたコードが気になりますか?

リエンが作るアプリは、CSSとJavaScriptが入ったHTMLファイル一つです。始めるときは読まなくても大丈夫です。一行を自分で直したいときや、なぜ壊れたのか知りたいときは、次のページが役に立ちます。

中でどう動いているか知りたいなら? 学ぶ

まだ何もありません。

作ったゲームを Cadeplay に出す

これはゲームには見えません — Cadeplay はゲームだけを受け付けます。下のリンクでの共有はそのままできます。

Cadeplay は何もインストールせずブラウザで遊べるゲームの場所です。出すには先にそろえるものがあります。

Cadeplay が求めるもの

  • 親指ひとつで遊べること — 多くの人はキーボードのないスマホで遊びます。
  • 21の言語で表示されること — ストアの紹介もゲーム内の文字も。
  • アイコン・カバー・スクリーンショットが必要です — 中身の薄い紹介ページは押されません。
  • コンテンツ調査と審査を通します — 公開後は審査の承認がそのまま更新の配信になります。

Cadeplay のアカウントはご自身のものが必要です

Cadeplay のトークンはゲーム単位ではなくアカウント全体に効きます — 持っている人は他人のゲームも消せます。だから共用のものはお渡しできません。ご自身で登録すれば、ゲームの持ち主もご自身になります。

このプロジェクトはあなただけが見られます。共有するとリンクができます。