こんにちは！今回は、世界で使用されているIDE「Replit」に搭載されたAI機能「Ghostwriter」の概要と使い方をご紹介します。
実際にReplitでコーディングしながら具体的な使用方法をご紹介していきます。Ghostwriterは5つのAI機能の集まりですが、それぞれの機能の特長も一緒に学んでいただければ幸いです。
本記事ではノーコードでどこまでできるかを検証したいので、なるべく自力でコーディングしないように紹介を進めていきます。ノーコーダーの皆様もぜひご一緒にお試しください！
※Ghostwriterを利用するのに必要なサービスはReplitのみです。また、GhostwriterはReplitの有料機能のため、本記事の内容を試すには$10（1ヶ月分のサブスクリプション）必要になります。
Replit「Ghostwriter」とは
Replit
Replitはブラウザで利用できるオンラインIDE（統合開発環境）です。IDEと言えばVisual StudioやAndroid Studioが有名ですね。ソフトウェアを効率的に開発するためのソフトウェアの編集、構築、テスト、パッケージ化などの機能を一つのアプリケーション上で利用できます。Python、Ruby、JavaScript、HTML、CSSなど50以上の言語に対応しています。
スマホブラウザ・スマホアプリからも利用できます。
Replitのおすすめポイントとしては、ブラウザでも利用できること、様々な言語のテンプレートを使用したソフトウェア・ウェブサイト・ゲームの開発ができることがあげられます。
Replit料金プラン
Replitの料金プランは個人向けプランとチーム向けプランがあり、個人向けの「Development plan」ではFree、Hacker、Proの3種類が用意されています。
出典：https://replit.com/pricing
無料のFreeプランの懸念点として、Repl（Replit内のプロジェクト）がpublic状態（Replit上の誰もが見ることができる状態）であること、比較的早い段階でRepl当たりに設定されているメモリとCPU使用上限に達して速度制限が適用されるといった懸念点がありますが、Replitをまず始めたい方には十分なプランです。
Development planの他にDevelopment optionも用意されています。現在（2023年5月24日）はパフォーマンス強化に役立つオプションが利用できます。
出典：https://replit.com/pricing
Ghostwriter
Ghostwriterは、Replitでの開発体験を向上させる組み込みのAI機能群で、Complete Code、Generate Code、Transform Code、Explain Code、Ghostwriter Chatという5つの機能からからなります（詳細は下部）。一般に公開されているコードで訓練されており、Replitによって調整された大規模言語モデルから生成された結果を返します。インターネットには接続されていません。
Ghostwriterは有料機能です。利用方法には、Proプランに加入するか、Cycle（サイクル）というReplitの仮想トークンでGhostwriter単体をサブスクリプションで利用する（$10/m）という2つの方法があります。
【5つの機能の概要】
- Complete Code…現在のファイル内のコードに基づいて提案するコード補完機能です。コーディングを始めると候補がインラインで表示されます。コメント機能を使って補完機能を強化することもできます。Ghostwriterのフラッグシップ機能です。
- Generate Code…入力された自然言語のプロンプトに対してコードブロックを提案してくれる機能です。
- Transform Code…入力された自然言語のプロンプトに基づいて、選択したコードブロックの書き換え案を提案する機能です。別言語での書き換えも可能です。
- Explain Code…選択したコードブロックの内容をステップバイステップで分かりやすく説明してくれる機能です。
- Ghostwriter Chat…コーディングに関する質問に対して、Workspace上で回答してくれるAIアシスタント機能です。
Ghostwriterは、効率的にコーディングができるようにするだけではなく、自分の書いたコードを添削・アップデートするなどの目的で学習ツールとして活用することもできます。
また、ReplitはGhostwriterの学習用チュートリアルを提供しています。Workspaceの左側でチュートリアルテキスト、右下（位置・サイズ調整可）でチュートリアル動画を確認しながら、実際にコーディングしてGhostwriterの使い方を学ぶことができます。
比較：Github Copilot
ReplitのGhostwriterに似ているAI機能にGithub Copilotがあります。
Github CopilotはOpenAI Codexを利用したGithubのAIペアプログラマーで、主な機能はオートコンプリートスタイルでのコード提案機能と自然言語のコメントによるコード生成機能です。機能はGhostwriterのComplete Codeに似ているようですね。
CopilotはVisual stuioなどのエディターと統合できるとのことなので、自分が慣れ親しんだエディターでAI既往を利用したい場合は検討してみても良いかもしれません。
プライバシー
公開状態がpublicになっているReplは、Ghostwriterのトレーニングに使用される可能性があります。トレーニングで使用されたくないReplは公開状態をprivateにしましょう（Hacker以上の有料プランに加入する必要があります）。
Ghostwriterを試す準備
ReplitでGhostwriterを試すのに必要な準備を行います。皆さんもぜひ一緒に試してみてくださいね！
Replitの新規登録
まずはこちらのページの「Sign Up」ボタンをクリックし、登録方法を選択してReplitに新規登録します。
登録完了後、アンケートが表示されるので回答します。
チュートリアルは必要に合わせて選択してください。
アンケートに回答すると、ReplitのHomeが開きます。新規登録・ログインの完了です。
Ghostwriterの有効化
次に、Ghostwriterを有効化します。Ghostwriterの利用方法はPro planの加入とCycleでのサブスクリプションの2種類がありますが、今回はCycleでGhostwriterサブスクリプションに加入して有効化する方法を紹介します。
Homeのサイドバーのメニュー>「My Cycles」をクリックします。
まずは1ヶ月利用できるように1,000Cycles購入します。画面右側に「Ghostwriter 1,000/month」と表示されていますね。
「1,000Cycles」を選択して「Buy 1,000 Cycles」ボタンをクリックします。
Stripeのチェックアウト画面が表示されるので、カード情報を入力して購入します。
Cycleの購入完了後、My Cyclesトップページに遷移します。所有しているCycleの下部でGhostwriterを有効化できます。Ghostwriter欄の「Activate」ボタンをクリックします。
「Use 1,000 cycles/month」ボタンをクリックしてGhostwriterを有効化します。
次にGhostwriterの紹介ポップアップが表示されるので、「Next」ボタン、最後に「Get started」ボタンをクリックしてポップアップを閉じます。
購入したCycleが使用されてGhostwriterのトグルボタンがオンになっていれば、有効化完了です。
サンプルの作成
次に、Ghostwriterを試すためのサンプルをテンプレートで用意します。サイドメニューの「Templates」をクリックしてTemplatesページを開きます。
「Websites」>「HTML, CSS, JS」をクリックします。
このテンプレートは、動きのあるウェブページを制作するときに便利なテンプレートです。
右上の「Use Template」ボタンをクリックします。
選択したテンプレートで新規Replが作成され、Workspaceが開きます。
Workspaceの見方
Workspaceは、Replの編集、デバッグ、管理を行う画面です。Replはテンプレートから作成する他、サイドメニューの「Create Repl」ボタンから作成することもできます。
ここで、簡単にWorkspaceの見方を紹介します。
| No. | 名前 | できること |
|---|---|---|
| ① | File tree | Repl内のファイルがここに表示されます。 |
| ② | Tools | Shell、Webvewなどツールの一覧が表示されます。Ghostwriter Chatもここから起動できます。 |
| ③ | Repl Resources | Replの処理能力、メモリ、ストレージを確認できます。 |
| ④ | PaneとTab | File treeやToolsからクリックまたはドラッグ＆ドロップで選択したファイル・ツールを開くことができます。上記の画像では左右で2つのPaneを表示していますが（左：index.htmlファイルTab、右：Webview Tabを表示中）、もっと分割することも可能です。また、Pane表示部の上部でそのPaneで表示するTabを切り替えることができます。 |
| ⑤ | Run | ボタンをクリックしてコードを実行することができます。右側のPaneで表示しているWebviewに構築したコードの実行結果を表示します。 |
サンプルの確認
開いたWorkspaceでサンプルの中身を確認してみましょう。今回はHTML, CSS, JSのテンプレートを使用したので、File treeにindex.html、script.js、style.cssが並んでいます。
File tree上のファイル名か左のPane上部のファイル名をクリックして、表示するファイルを切り替えて各ファイルの中身を確認しましょう。
index.htmlとstyle.cssはウェブページの表示内容とデザインに関するファイルですが、既にコードが書き込まれています。script.jsはウェブエージ上でアニメーションやコンテンツの更新などの動きをJavaScriptで書き込むファイルですが、現時点では空欄です。
Webviewを見ると、真っ白のページの上部に「Hello world」と表示されているだけであることから、ウェブページに最低限必要なコードの一部のみがテンプレートに含まれていたと考えられます。
Ghostwriterの使い方
それでは、Ghostiwriterの使い方をご紹介していきます！
※これから紹介するGhostwriterの応答や提案は一例です。必ず一言一句同じ応答が得られるわけではありませんのでご了承ください。期待した応答が得られない場合は、具体的かつ詳細なプロンプト・コメントで再チャレンジしてみることをおすすめします。Ghostwriterを使いこなすコツです。
Ghostwriter Chat
まず、Ghostwriter Chatを使って一般的なウェブページを作るのに必要なHTMLコードを提案してもらいます。
Tools>「Ghostwriter」をクリックしてGhostwriter Chatを開きます。今回は、画面右側のPaneでGhostwriter Chatが開きました。
下部の入力欄にプロンプトを入力し、チャットの送信ボタンをクリックします。
今回プロンプトには「Does the current index.html contain the code required for a typical web page? Please suggest code to fill in the missing pieces.」（訳：現在のindex.htmlでは、一般的なウェブページに必要なコードが書き込まれていますか？足りない部分を補うコードを提案してください。）と入力しました。
コードの提案を含めて次のような応答が返ってきました。
応答によると、現在のindex.htmlファイルにはHTMLの基本的な開始コードが含まれているが、ヘッダーやフッターなど一般的な要素が欠けているため、それらを含むコードを提案したとのこと。
本当にそうなのか確認してみましょう。提案されたコードブロックの右上のクリップボードアイコンをクリックしてコードをコピーします。
index.htmlファイルのコードを全て削除して、コピーしたコードを貼り付けます。貼り付けたら「Run」ボタンをクリックして実際のウェブページを確認します。
右側のPaneが「Ghostwriter」から「Webview」に変わり、新しいコードが反映されたウェブページが表示されました。
ページタイトル、ヘッダーセクション（ページのリスト）、セクションタイトル・本文、著作権表示という構成に変わりましたね！
このように、Ghostwriter Chatはプロンプトに対してコードを即座に提案してくれます。コードの提案と一緒に補足コメントももらえるので、コードの提案のみだと不安・物足りないと感じる場合におすすめの利用機能です。
Pane上部の「Ghostwriter」横のごみ箱アイコンをクリックすると、Tabと一緒に履歴も消えてしまうので気を付けてくださいね。
Ghostwriter Debugger
デバッグのサポートとしても利用できます。Console Tabの右上のGhostwriterアイコンをクリックすると、Ghostwriter Chatの形式で問題解決に役立つステップバイステップのガイダンスやヒントをくれます。
※上記はGhostwriterチュートリアル5日目の内容です。
Generate Code
ウェブページの基本的なコードを反映出来たところで、Generate Codeを使って問い合わせフォームを追加してみましょう。
今回は、Ghostwriter Chatの提案で追加したセクション内（「Section Title」と「Section content goes here!」と表示されている部分の下）に問い合わせフォームを追加します。
index.html上の<p>Section content goes here!</p>の行でEnterキーを押下して改行し、空白行を右クリックしてコンテキストメニューを表示します。さらにコンテキストメニューの「Generate code」をクリックするとGenerate Codeウィンドウが開きます。
入力ボックスに、問い合わせフォームのコードを生成させるプロンプトを入力して、「Generate」ボタンをクリックします。
今回プロンプトは、「Generate code for a contact form with input fields for name, email address, and body.」（訳：名前、メールアドレス、本文の入力フィールドを持つコンタクトフォームのコードを生成します。）と入力しました。
プロンプトを詳細に作成すればするほどより精度の高いコードが表示されます。
今回は以下のようなコードが返ってきました。「Insert in editor」ボタンをクリックして、作成中のコードにこの結果を反映させます。
ちなみに、提案に不満な場合は再度「Generate」ボタンをクリックして再提案してもらうこともできます。
インデントは手動で整えました
問い合わせフォームができたかWebviewで確認してみましょう。Workspace上部にある「Run」ボタンをクリックします。
右側のPaneのWebviewで、新しいコードが反映されたウェブページが表示されました。
名前・Email・本文の入力欄が横一列で改行されずに表示されていますね。
Generate Codeは、提案してほしいコードを自然言語で端的に要求できて、複数の提案パターンを素早く確認したい場合におすすめの機能です。
「Generate」を繰り返すことで複数の提案コードを確認できます。
Transform Code
Transform Codeを使って、横一列で見にくい問い合わせフォームを、入力項目ごとにグループ化・改行されたフォームに変換します。
index.htmlで先ほど挿入した<form>.....</form>のコードを選択した状態で画面上を右クリックしてコンテキストメニューを開き、「Transform code」をクリックします。
Transform Codeのウィンドウが開くので、コードを書き換えるプロンプトを入力して「Transform」ボタンをクリックします。
今回プロンプトは、「Each entry field should be grouped and divided into new lines.」（訳：各入力項目はグループ化して改行してください。）を入力しました。
次のような応答が返ってきたので、ウィンドウ右下の「Replace section」ボタンをクリックして置き換えます。
ちなみに、提案に不満な場合は再度「Transform」ボタンをクリックして再提案してもらうこともできます。
以下のようにindex.htmlの<form>の部分が置き換わりました。
入力項目ごとに改行されているのかWebviewで確認してみます。Workspace上部の「Run」ボタンをクリックしてWebviewを確認しましょう。
インデントは手動で整えました
項目ごとに改行された問い合わせフォームになりましたね！
Transform Codeは、不足や要改善箇所のあるコードブロックに対して複数の修正案を提案してほしいときに便利な機能です。
Complete Code
Complete Codeで、CSSにコードを追加してデザインをアップデートします。
File treeまたは左側のPaneの上部で「style.css」をクリックして開きます。
3行目（width: 100%;）でEnterキーで改行すると、4行目にインラインでbackground-color: #f0f0f0;という背景色を設定するコードが提案されました。
提案を受け入れそのまま現在のファイルに反映させたいのでTabキーを押下します。
提案されたコードが反映されましたね。
提案を無視する場合はEscキーを押下するかコードを手動で入力します。
同様にEnterキーで改行→Tabキーで提案の受け入れを繰り返していくだけで、ここまでコードを入力することができました。
では、どんなデザインになったのか確認してみましょう。Workspace上部の「Run」ボタンをクリックしてWebviewを確認します。
デザインをアップデートすることができました。
コメント機能を利用したComplete Code
Complete Codeのより高度な使い方に、コメント機能を利用するというものがあります。この方法で問い合わせフォーム部分にのみ背景設定をして、さらにデザインをアップデートできるか試してみましょう。
なお、CSSファイルには以下の書き方でコメントを書きます。
/* ここにコメントが入ります */
style.cssの14行目でEnterキーで改行し、15行目に/* background only for the form */ （訳：フォームにのみ背景）と入力します。
Enterキーで改行すると、16行目にインラインでform {というコードが提案されました。
Tabキーを押下して提案を反映し、再度Enterキーで改行します。すると以下のような詳細な設定が提案されました。
Tabキーで提案を受け入れます。
どのようなデザインになったのか確認してみましょう！「Run」ボタンをクリックしてWebviewを確認します。
問い合わせフォーム部分にのみ個別で背景デザインが設定されていますね。もちろんコードのカラーコードや数値を変更して異なるデザインを適用することもできますよ。
Complete Codeは、有効化にしておくことでファイルの文脈を踏まえてコードを提案してくれます。機能を利用するためにウィンドウを開いたりする必要がなく、素早く利用できるので便利ですね。
Complete Codeのオン・オフ切り替え
Complete Code機能はオン・オフの切り替えが可能です。
「Tools」>「Settings」をクリックして「Settings」を開き、「Ghostwriter Complete Code」を「disabled」にするとオフに、「enabled」にするとオンにできます。
Complete CodeとGenerate Codeの違い
Complete CodeとGenerate Codeはコメントやプロンプトに対してコードを提案するという点で似ている機能ですが、2つは少し異なります。
Complete Codeは、機能を有効化している限り、プログラミングしている間中積極的にコードを提案してくれる機能です。一方、Generate Codeは、機能を呼び出してからコードを説明する言葉を入力して、コードを表示させる機能です。また、この2つの機能は異なるモデルを使用しています。
Explain Code
Explain Codeで、動きをつけるコードの内容をステップバイステップで確認します。
Explain Codeが使えるのは動きが発生するコードです。今回の例でいうと、HTMLやCSSでは動きが発生しないので使えません。
まずは、動きが発生するコードをコメント機能を利用したComplete codeを使って追加します。今回は、「Webページを表示して5秒後にブラウザのポップアップを表示する」コードを追加します。
File treeまたは左側のPaneの上部で「script.js」をクリックして開き、CSSのコメントと同じ書き方で1行目に次のコメントを入力します。
/* show popup after 5 seconds */
入力したら、Enterキーで改行します。すると、2行目にインラインで以下のようにコードが提案されました。
Tabキーを押下して提案を受け入れます。
コードが追加できたので、コメント内容に合ったコードが追加されたのか確認してみましょう。追加したコード全体を選択して画面上で右クリックします。コンテキストメニューが表示されるので、「Explain code」をクリックします。
Explain Codeのウィンドウが表示され、ステップ1、2でコードの説明がされています。
翻訳すると、選択されたコードは以下を意味しているとのこと。
- このコードは、5秒のタイムアウトを設定します
- 5秒後、アラートボックスが表示され、"Hello, World!"というメッセージが表示されます。
では、実際にWebページを表示して確認してみましょう。Workspace上部の「Run」ボタンをクリックします。
Webviewでページが再読み込みされてからおよそ5秒後にブラウザのポップアップが表示されました。
Explain codeの説明通りに動きが実装できているようですね。
Explain Codeは、コードの動きをステップごとに確認したいときに使える機能です。複雑なコードほど正しく書けているか慎重に確認したいですが、そんな時に手軽に第三者目線でコードをチェックできます。
まとめ
Ghostwriterはコードの文脈を理解して提案を行ってくれるので、要求に対してかなり精度の高い提案や回答をしてくれましたね。
プログラミングの基本的な知識があり、分からないことは調べながらやる余力がある方にとっては最強のサポートツールになるかもしれません。
また、プログラミングの勉強に使える機能であることもお分かりいただけたかと思います。$10/月でAIの先生を利用してみるのはいかがでしょうか。
Discussion