アプリやゲームを作ってみたいけれど、プログラミングは難しそう。
そんな不安はありませんか？
私も同じでしたが、Canvaのコード生成なら、日本語の指示だけで作れます。
この回では、Webアプリ4本とゲーム4本の作例と、うまく動かないときの直し方を紹介します。
まずは遊び感覚で、ぜひ試してみて下さい！
タスク管理アプリ：ブラウザで動く道具の入り口
Webアプリとは、ブラウザ上で使えるアプリケーションのことです。
文字数を数えるツールや、タスク管理ツールが代表例です。
アクセスするだけで使えるので、初心者にも向いています。
パスワードを設定すれば、自分だけのオリジナルアプリにもできます。
HTMLやCSSが分からなくても、日本語で指示を入れれば作れます。
最初に作ったのは、ToDoリスト風のタスク管理です。
カラフルで使いやすく、チェックボックス付き。
女性が楽しく使えるおしゃれなデザインで、月〜日の曜日別セクションに分けるよう頼みました。
タスク名を入れて「追加」を押すと一覧に入り、「○」にチェックすると完了、右の「×」で削除できます。
毎日の小さなタスクを入れるのが、ちょっと楽しみになる作りです。
その後、今週の日付を自動で反映させ、1日を1行で表示するよう直してもらいました。
文字数カウンターとポモドーロタイマー
2つ目は、文字数カウンターです。
テキストエリアに文字を入れると、下に文字数が出る仕組みを頼みました。
デザインは「スタイリッシュに」とだけ指定しています。
入力するたびに、正確に数えてくれます。
Xのように文字数に制限がある文章を書くときに便利です。
3つ目のポモドーロタイマーは、25分の作業と5分の休憩を繰り返して、集中力を保つ時間管理術に使います。
指示では、使いたい条件を、そのまま並べています。
- 25分作業→5分休憩を繰り返し、4回ごとに15分の長い休憩
- 残り時間を表示するカウントダウン
- スタート／ポーズ／リセットのボタン
- ネイビーブルー、グレー、モスグリーン、ベージュなど落ち着いた配色
- パソコンでもスマホでも見やすいレスポンシブ対応
- コードは1つのHTMLファイルにまとめる
実際に動かすと、しっかり動作しました！
配色やデザインも、追加の指示で変えられます。
「若い女性が好む配色に」「もっとおしゃれに」「フォントを可愛く」と頼むだけです。
カラーパレットと、うまくいかなかった例
4つ目は、カラーパレットです。
HEXやRGBのカラーコードを入れて、コピーや保存ができるようにしました。
保存した色はブラウザに残り、再び開いても消えません。
カラーピッカーも付いてきて、配色づくりに便利です。
保存した色が大きく表示されて場所を取ったので、「長方形にして、左に色、右にカラーコード」と頼んで直しました。
さらにコンパクトにしたいなら、同じ要領でもう一度頼みます。
最後に、補色・類似色・トライアド・テトラード・モノクロマティックから、ランダムに5色を作る機能も追加しました。
ただ、すべて思いどおりになるわけではありません。
タイピングアプリは、作ったものの、うまく動きませんでした。
タスク管理では、データの一括クリアやCSVの書き出しを頼みましたが、何度指示してもできませんでした。
カラーパレットの「すべて削除」ボタンも、動きません。
本格的なスケジュール管理までは難しくても、ちょっとしたタスク管理なら十分に使えます。
仕事に活かそうと意気込むより、まずは遊び感覚で作ってみて下さい。
遊びの中から、ビジネスのアイデアが出ることもありますよ。
ゲーム1：神経衰弱は条件を細かく指定する
ここからは、ゲームです。
最初は神経衰弱で、4行×7列の合計28枚、14種類のアイコンを2枚ずつ使うよう頼みました。
ゲーム全体を1つのHTMLファイルにまとめること、スマホでも遊べるレスポンシブ対応であることも、条件に入れています。
動きの条件は、次のとおりです。
- カードをクリックすると裏返り、アイコンが出る
- 2枚めくって一致したら開いたまま
- 一致しなければ1秒後に裏へ戻る
- 全部そろうと「クリアおめでとう！」と表示する
雰囲気は、シンプルで可愛いパステル調にしました。
ところが、絵文字の絵柄が見づらく、配色も気になりました。
そこで、「配色を柔らかく」「絵柄を絵文字ではなくSVGアイコンに」と頼んでいます。
すると今度は、少し暗い配色になってしまいました。
2回目の指示で、ピンクの柔らかい配色と、カードまわりの調整を足しています。
- カードの表と裏のアイコンを大きくする
- カードの比率をトランプと同じにする
- カード同士の間隔を少し空ける
3回目で、ようやく見やすくなりました。
ゲーム2：もぐらたたきは最小の構成で頼む
もぐらたたきは、あえて最小限の構成で頼みました。
3×3の9個の穴に、もぐらがランダムに1匹ずつ出ます。
制限時間は15秒で、終わるとスコアとリトライボタンが出ます。
見た目は、穴ともぐらを丸いdivで作るだけで十分としました。
もぐらは0.8秒ごとに出てきて、1匹たたくと1点です。
効果音は「ボコッ」と鳴らす指定でしたが、実際には音が鳴りませんでした。
それ以外の機能は、問題なく動いています。
クリックしたときの変化が分かりにくかったので、成功すると背景の円が2秒間、薄いピンクに変わるよう、追加で頼みました。
ゲーム3：シューティングは項目を分けて頼む
シューティングは、項目を分けた構造化プロンプトで作りました。
宇宙が舞台の縦スクロールで、HTMLが画面、CSSが見た目、JavaScriptが動きと当たり判定という役割分担です。
自機は矢印キーかWASDで動き、スペースキーでショットを連射します。
敵は上から降りてきて、弾が当たると消えて、スコアが入ります。
自機が敵に当たると、ゲームオーバーです。
動きはしますが、敵が攻撃してこず、ボスもいないので、物足りない出来でした。
そこで、「敵が攻撃してくる」「ボスを登場させる」「ボスを倒したらゲームクリア」と追加で頼みます。
敵が弾を撃つようになり、スコアが80に達するとボスが現れるゲームになりました。
ゲーム4：じゃんけんは仕様を箇条書きで渡す
じゃんけんは、仕様を箇条書きにして渡しました。
プレイヤーとコンピュータが対戦し、選択肢はグー・チョキ・パーです。
コンピュータは、ランダムに手を選びます。
勝敗は画面に出し、「あなた：グー、相手：パー → 負け」のように、双方の手も表示します。
追加オプションとして、勝ち・負け・あいこの数のカウント、リセットボタン、勝敗に応じた絵文字を頼みました。
ロジックはJavaScriptだけで完結させ、外部ライブラリは使いません。
ソシャゲやFPSのようなゲームも楽しいですが、たまにはこうしたレトロなゲームもいいものです。
作ったゲームは公開して、友人や家族といっしょに遊べます。
想像力は無限大で、その力が楽しい未来をつくります。
夢と希望を持って、日々を楽しく過ごしましょう。