yoppa.org

芸大 - 人工知能と創作 2024

AIを活用したプログラミング入門

スライド資料

本日の内容

今回の講義では、AIとコーディングの実践的な活用法を学びます。まず、p5.jsを題材に簡単なプログラミングの基礎を紹介します。その後、AIを活用したコーディングの三段階を体験します。第1段階ではChatGPTに質問しながらコードを生成する方法を学び、第2段階ではAI機能を搭載したエディターを活用します。最後に、高度なAIとの連携による、より複雑なプロジェクトの可能性を探ります。これにより、AIを駆使した創造的なコーディングの基礎を築くことを目指します。

  • コーディングの題材: p5.jsの簡単な紹介
  • AIによるコーディング 1 : ChatGPTに質問する
  • AIによるコーディング 2 : AI機能を搭載したエディターを使う
  • AIによるコーディング 3 : さらに高度なAIとの連携

コーディングの題材: p5.jsの簡単な紹介

p5.jsとは

https://p5js.org

  • p5.jsは、ビジュアルアートのためのプログラミング言語「Processing」をJavaScriptに移植したものである。
  • ウェブブラウザで直接実行可能
  • アートやデザイン、インタラクティブなメディア作品の制作に適している
  • 初心者でも直感的に使えるシンプルな構文を持ち、プログラミングの学習にも適している
  • 公式サイトには多くのチュートリアルやリファレンスがあり
  • 活発なコミュニティによるサポート

p5.jsでどんなことができるのか – OpenProcessing

OpenProcessing

  • p5.jsを用いたプログラムをオンラインで作成・共有できるサービス
  • 世界中のクリエイティブコーダーが作成した作品がソースコードを含めて閲覧できる!

簡単なプログラム例

function setup() {
  // 画面全体にキャンバス作成
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  // 背景をグレーに
  background(220);
  // 円を描く
  circle(width / 2, height / 2, 400);
}

※ 現段階では全く意味が分からなくてOK!

実行結果

このようなプログラムをAIの力を借りて生成してみましょう!

AIによるコーディング 1 : ChatGPTに質問する

  • おそらく最も手軽に始められる方法
  • ChatGPTにコーディングの質問をするだけ

例:

ブラウザの画面中央に円を描くプログラムを作りたいです。どのようにすればよいでしょうか？

表示領域はフルスクリーンにしてください。使用する開発環境は、p5.jsを使用してください。

ChatGPT 4oに質問してみました。

p5.js を使用してブラウザの画面中央に円を描くプログラムを作成するには、以下のようにコードを書きます。p5.jsは簡単にキャンバスを作成し、グラフィックを描画できるライブラリです。

以下は、フルスクリーンのキャンバスに円を描くシンプルなコードです。

プログラム例

function setup() {
  // ウィンドウサイズに合わせてフルスクリーンキャンバスを作成
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(220); // 背景色（薄いグレー）

  // 円の色を設定
  fill(100, 150, 255); // 青系の塗り色
  noStroke(); // 円の境界線をなしに

  // 画面中央に円を描く
  let centerX = width / 2;
  let centerY = height / 2;
  let diameter = 100; // 円の直径

  ellipse(centerX, centerY, diameter, diameter);
}

function windowResized() {
  // ウィンドウサイズが変更されたとき、キャンバスを再調整
  resizeCanvas(windowWidth, windowHeight);
}

コードの説明

  1. setup 関数:
    • createCanvas(windowWidth, windowHeight) を使って、ブラウザウィンドウ全体をキャンバスとして利用。
  2. draw 関数:
    • background(220) で背景を塗りつぶし、リセット。
    • ellipse(centerX, centerY, diameter, diameter) を使い、画面の中心に直径 100 の円を描画。
  3. windowResized 関数:
    • ウィンドウサイズが変更されたときにキャンバスのサイズを自動調整。

実行手順

  1. p5.js Webエディタ を開きます。
  2. 上記のコードをコピーペーストします。
  3. 「再生」ボタンを押すと、ブラウザ画面全体に円が表示されます。

必要に応じて円の色やサイズを変更してみてください！

実行結果 (完璧!!)

実習: ChatGPTによるコード生成を試してみる

  • ChatGPTにp5.jsで生成したいコードをリクスト
  • 冒頭で「p5.jsで」などと制作環境を指定すると良い
  • 生成されたコードをp5.js Web Editorにコピー&ペースト
  • コードを実行してみる

AIによるコーディング 2 : AI機能を搭載したエディターを使う

もっと高度な機能を利用したい!

  • よりインタラクティブに生成結果をみながらAIのサポートを受けたい
  • エラーが発生した際にもAIに助けて欲しい
  • あらかじめ作成したコードをAIに改良して欲しい

p5.CodingWithAIを使ってみる

  • https://app.kyabe.net/p5-coding-with-ai/
  • きゃべ / Masaya Kurahashiさん作
  • ChatGPTとの連携機能を搭載した自作のp5.jsのWebエディタ
  • ユーザーが自然言語でAIにリクエストを送信すると、AIが解説とともにリクエストに合わせたコードを提案する。
  • 提案されたコードを基にユーザーが工夫を凝らし、作品を創作することで、人間とAIの共創の実現性を探求。

詳細な使用方法は、実際にデモをしながら解説していきます!

ちなみに先程と同じChatGPTにした質問をp5.CodingWithAIに送ってみました
→ 完璧!

実習: p5.CodingWithAIでコード生成

  • 最初にプロンプトから基本となるコードを生成
  • もしくは、OpenProcessingなどから気になるコードをピックアップしてコピー&ペースト
  • 質問をくりかえしながら、徐々に自分の好みの生成結果に近づけていく
  • 提案されたコードを受け入れるかは、その都度吟味する
  • 最終的にどのようなコードが完成するのか!?

AIによるコーディング 3 : さらに高度なAIとの連携

Github Copilotを使用してみる

GitHub Copilotは、OpenAIのCodexを基盤としたAIペアプログラミングツールである。主にプログラマーのコード作成を支援することを目的としており、エディタ内でリアルタイムにコード提案を行う。コード補完、関数生成、コメントからのコード生成など、多様な支援機能を備える。主要なIDEやエディタ（Visual Studio Codeなど）に統合可能で、多言語対応であることも特徴である。効率的なコーディングを実現し、初心者から上級者まで幅広いユーザーに対応するツールである。

https://github.com/features/copilot

GitHub Copilotの主な機能

  • コード補完：開発者がコードを入力する際、次に来るであろうコードを予測し、提案する。
  • 関数生成：関数名やコメントから、対応する関数のコードを自動生成する。
  • コメントからのコード生成：自然言語で記述されたコメントを基に、対応するコードを生成する。
  • 多言語対応：Python、JavaScript、TypeScript、Rubyなど、複数のプログラミング言語に対応する。
  • 主要なIDEとの統合：Visual Studio Code、Visual Studio、Neovim、JetBrains製品など、主要な統合開発環境と連携可能である。
  • テストコードの生成：既存のコードに対するテストコードを自動的に生成し、テストの効率化を支援する。
  • コードのリファクタリング提案：既存のコードに対して、より効率的な書き方や改善点を提案する。
  • プルリクエストの概要作成：プルリクエストの変更内容を分析し、その概要を自動生成する。
  • チャット機能：開発者が自然言語で質問や指示を入力すると、AIが適切なコードや情報を提供する。
  • マルチモデル対応：Anthropic、Google、OpenAIなど、複数のAIモデルを選択して利用できる。

Github Copilotを使用するための事前準備

使用のための手順

  1. Githubへのユーザー登録
  2. Github Copilotのトライアル版登録
  3. Visual Studio Codeのインストール
  4. Visual Studio Codeの環境設定

環境設定が完了するとVSCodeとGithub Copilotが統合された最強のコーディング環境が実現されます!

生成された「かわいいキャラクター」!

Github Copilotを使用したコード生成

詳細は、ハンズオン：AIを使ったコード生成 (YCAMワークショップ 2024) の資料を参照してください

次回までの課題

この講義も前半が終了しました。後半は履修者のみなさんそれぞれの専門分野に生成AIを用いた創作を応用できるような内容にしていきたいと考えています。そこで以下のような内容を次週までに考えてきてください。

  • 興味を持った生成AIの分野
    • 文章の生成、チャット
    • 画像生成
    • 動画生成
    • 音楽生成
    • コード生成 …など
  • 自身の専門分野の創作にどのように生かすことが可能そうか
  • 現時点でのこの講義の最終制作に向けてのアイデア

上記の内容を下記のフォームに記入して提出してください。締切は11月28日(木)までとします。

アンケート

本日の講義に参加した方は以下のアンケートに回答してください。

https://x.gd/AH9V3