OpenAI公式からこのようなポストがあり、論文、レジュメ、リファレンス、チュートリアルやガイドなどなんでも文書作成をしてくれる素晴らしいモデル、ChatGPT 4o with canvasがChatGPT Plusユーザーに解放された事を伝えています。

使うには、ただフルダウンからChatGPT 4o with canvaswp選択するだけ。初期設定は左カラムがChatGPTとのやりとり様、右カラムが文書作成キャンバスになっています。

必要に応じて、左カラムだけを表示させることができます。

使用感は、GPTs制作のプログラム無し版みたいな感じですね。「ライティングとコードで共同作業できる」と書かれている通り、部下に指示を与えて文書制作を依頼している感じです。人間の部下と違うのは指示待ちでは無く自主的にどんどん制作していくのと、出来上がった後にさらに右に追加する項目を提案してくる事です。その上、どの項目も修正指示を与えると直ぐに取り掛かり一瞬で修正がおわります。

とりあえず下記に制作例として、筆者がインストラクターをしているのwebフロントエンドのカリキュラムガイド「Remix.jsを使ったWebサービス開発カリキュラム」を作ってもらったのでこれを例に話していきましょう。

ChatGPT 4o with canvas制作の学習ガイドを修正していく

まず、ChatGPT 4o with canvasはマークダウン形式で文書を作成していく事を覚えて置いてください。右上のボタンを押して文書をコピーすると、

こんな感じになっています。（1以下省略）

### Remix.jsを使ったWebサービス開発カリキュラム

ReactとRemix.jsを活用して、受講生によりダイナミックなWebサービスを作るスキルを身につけてもらうことを目指したカリキュラムです。段階的に学びながら、最終的に自分のオリジナルプロジェクトを公開できるレベルまで進めていきます。

### カリキュラム概要: Remix.jsを使ったWebサービス開発

#### 1. **導入と環境設定** (Week 1)

- **目標**: ReactやRemix.jsの概要を理解し、開発環境を整え、簡単なWebサービスの基礎を構築する。最終的に、Hello Worldのプロジェクトを完成させることを目指す。
- **内容**:
  - Remix.jsの特徴とアーキテクチャの説明（例: サーバーサイドレンダリングがデフォルトでサポートされており、SEOやパフォーマンス向上に効果的）。
  - Node.jsとnpmをインストールする。
  - VSCodeのインストールと設定。
  - 初めてのRemixプロジェクトを作成。

ChatGPT画面上では下記の通り生成された形（レビュー状態）で表示されているのでスライドなどを制作する時はスクショをとってペタッと貼ればすぐできますね。

使用方法もその場で聞けてマニュアル見る必要無

内容修正だけでなく、ChatGPT 4o with canvasの仕様についての質問にも答えてくれます。

仕上がった上で追加項目を提案してくる

また、右カラムのさらに右にピンポイントで追加の提案をしてきます。

コードの差し込みを依頼する

文書中に必要に応じてコマンドラインを追加する事が出来ます。

筆者は「ここにコード例を差し込んだりできるの？」としか聞いていないのでコードを制作したのはChatGPT 4o with canvasです。

ChatGPTとのペアプログラミングの要領

ChatGPTでGPTビルダーを使ってGPTsを制作した事がある人はあの感覚をおもいだすかもしれません。しかし、より一層ユーザーへの寄り添い度が増している様に感じられるのは以下の理由からです。

GPT 4o with Canvasはパーソナライゼーションメモリを参照

下記の様に聞いてみたら、パーソナライゼーションメモリを参照しているが、GPT 4o with Canvas上での作業はメモられないそうです。

絵文字の追加機能

今回は学習ガイドを制作したので、絵文字が加わると俄然フレンドリーさが増して学習意欲もわきます。下記の手のアイコンをクリックすると、見出しの左にアイコンが追加されます。

アイコンはGPT 4o with canvasの判断で選択されるようです。

コピーしてきたマークダウン文書にもしっかり絵文字が付いています。

### 🚀 Remix.jsを使ったWebサービス開発カリキュラム

ReactとRemix.jsを活用して、受講生によりダイナミックなWebサービスを作るスキルを身につけてもらうことを目指したカリキュラムです。段階的に学びながら、最終的に自分のオリジナルプロジェクトを公開できるレベルまで進めていきます。

### 📋 カリキュラム概要: Remix.jsを使ったWebサービス開発

#### 🛠️ 1. **導入と環境設定** (Week 1)

- **目標**: ReactやRemix.jsの概要を理解し、開発環境を整え、簡単なWebサービスの基礎を構築する。最終的に、Hello Worldのプロジェクトを完成させることを目指す。
- **内容**:
  - Remix.jsの特徴とアーキテクチャの説明（例: サーバーサイドレンダリングがデフォルトでサポートされており、SEOやパフォーマンス向上に効果的）。
  - Node.jsとnpmをインストールする。
  - VSCodeのインストールと設定。
  - 初めてのRemixプロジェクトを作成。
- **課題**: 開発環境を構築し、初期のHello Worldプロジェクトを作る。

#### ⚛️ 2. **React基礎とコンポーネント設計** (Week 2-3)

- **目標**: Reactの基礎を理解し、コンポーネントベースでUIを設計する。
- **内容**:
  - Reactの基本概念（JSX、コンポーネント、プロップス）。
  - ステート管理とイベントハンドリングの基礎。
  - UI設計の基本、コンポーネントの再利用性について。
- **課題**: 簡単なユーザーインターフェースを作成し、ユーザー入力を受け取るフォームを作る。

#### 🌐 3. **Remixのルーティングとページ遷移** (Week 4)

- **目標**: Remixのルーティング機能を使って複数のページを作成する。
- **内容**:
  - Remixのファイルベースルーティングの仕組み。
  - リンクを使ったページ間の遷移の実装。
  - パラメータを使った動的ルーティング。
- **課題**: 複数のページを持つミニブログサイトを作成。

読解レベルの調整

この機能は大変ありがたく、制作した文書を対象者に応じてリライトできる事です。対象者レベルは大学院・大学・高校・中学・幼稚園があり、何故か小学校がありません。

下記のスクショは高校生レベルです。これから幼稚園レベルに変更します。

下記が幼稚園レベルに変更されたところです。漢字交じりでとても幼稚園生には理解できそうもありませんが、小学四年生位なら理解できそうですね。

付録

サム・アルトマンの自慢の機能らしくこんな質問をしています。

もはやAGI？！

サム・アルトマンが下記のポストをリポストしていますが、彼女はChatGPT 4o with canvasをAGIと呼んでいます。動画を見たらわかるように、この寄り添い方は人間以上かもしれません。実に頼りになるモデルです。