Ghostwriterを利用してポートフォリオサイトをカスタマイズする

こんにちは！今回は、ReplitのAIプログラミング機能「Ghostwriter」の紹介記事第二弾になります。

第一弾の記事ではGhostwriterの5つの機能の使い方紹介に主眼を置いていました。今回はGhostwriterを使ってどこまでポートフォリオサイトをカスタマイズできるのかを、プラグラミングに詳しくないノーコーダーである筆者が検証していきたいと思います。
ウェブページ構築方法の選択肢としてGhostwriter活用をご検討していただく際に参考にしていただければ幸いです。
自分でコーディングして開発費用を削減したいノーコーダーさんはぜひ最後までご覧ください！

前提：筆者のプログラミング知識レベル

ご参考に、筆者のプラグラミング知識レベルを簡単にまとめます。

• HTML・CSSを勉強したことがある。
• HTML・CSSのコードは、書き方のルールとコードの意味の大枠は理解しており、見てどんなウェブページかイメージできる。だが自分で一から書くことは難しい。
• IDEは使い慣れていない。

準備

まずは、ReplitでGhostwriterを使えるようにする準備を行います。こちらのページからReplitの新規登録とGhostwriterの有効化を行ってください。手順はGhostwriter第一弾の記事をご参考くださいね。

※Ghostwriterの利用には最低$10/月が必要になります。

Replの作成

Replitの新規登録とGhostwriterの有効化ができたら、今回使用するRepl（Replit内のプロジェクト）を作成します。
Replitにログインしたら、サイドバーのメニューから「Templates」をクリックして、テンプレートの一覧から「Websites」>「Portfolio Site Template」をクリックします。

上記のテンプレートの詳細ページで右上の「Use Template」ボタンをクリックして、このテンプレートからReplを作成します。

Replが作成できるとWorkspaceが開きます。

修正目標の設定

テンプレートから作成したReplの中身を確認して、本記事でどのような修正を加えていくかを決めていきましょう。
まずは右側のPaneに表示されたWebviewをスクロールして全体を確認してみます。

基本的なポートフォリオサイトのコードが既に作成されているのが分かりますね。

左側のPaneでHTML・CSSファイルを見ると、コメント（緑色の文字）でhomeやheaderという区切りが挿入されており、どこの部分に関するコードなのかが分かりやすくなっています。

html

css

テンプレートを確認し、本記事のカスタマイズ目標を下記の通り設定しました。

• デフォルトテキスト・デザインの修正
  サイトタイトル・セクションタイトル・コンテンツタイトル等のテキストの書き換えと日本語変換、ロゴや背景画像の変更、デザインの修正、ソーシャルメディアリンクの変更
• セクションの追加
  「プロフィール」セクションを新規作成
• ページの追加
  「My projects（実績）」セクションのリンク先ページを新規作成、ヘッダーの修正

デフォルトテキスト・デザインの修正

それでは、目標に沿って修正を行っていきます。

テキストの修正

まずはデフォルトで設定されているテキストを修正してみます。
テンプレートでは英語のウェブページになっているので、日本語でお好きな文言にカスタマイズします。

ファイルの中で該当箇所をすぐに見つけられない場合は、ファイル内の検索機能を利用するのがおすすめです。
左側のPaneでindex.htmlを開き、ファイル上のどこかをクリックした状態でCtrlキー+Fキーを押下します。ファイルを開いているPane上部に入力ボックスが表示されるので、ウェブページ上の修正したテキストを入力しファイル内の該当箇所を見つけましょう。

ロゴと背景画像の変更

テキストを一通り修正したら、ヘッダーのロゴやトップの背景画像を変更しましょう。

まずはロゴを変更します。index.html内にlogoという表記を見つけたので、Ghostwriter Chatでその周辺のコードを引用してコードの意味と画像の変更方法を確認します。

上記のやり取りから、ロゴの差し替えには①プロジェクト内にAssets folderを作成してロゴ画像をアップロード、②HTMLコード「img src」の参照先を修正、③HTMLコード「alt」の代替テキストを修正、という手順が必要になると分かります。

では実際に試してみましょう。サイドバーのFile tree上部のフォルダ追加アイコンをクリックし、「assets」という名前を付けてフォルダを作成します。

作成したフォルダにロゴ画像をアップロードします。アップロードしたい画像をFile tree上のAssetsフォルダ上にドラッグ＆ドロップするとフォルダにアップロードできます。

では、ヘッダーのロゴをアップロードした画像に変更しましょう！
Ghostwriter Chatの回答内容に従い、img src部分については<img src="assets/image_name.png">に、alt部分についてはalt="test portfolio logo"に変更します。

次に、同じ方法でウェブページトップの背景画像を変更します。

Ghostwriter Chatでどこをどのように修正すればよいか確認

アップロードした新しい画像ファイル名に変更し、デザインの観点から不透明度「opacity」を20→40に変更

デザインの修正

背景画像を変更したら、Webviewで見栄えを確認しながらフォントやデコレーションのカラーを変更します。

カラーも全体の画像に合わせて一部変更

ソーシャルメディアリンクの変更

続いて、トップメッセージ下部およびお問い合わせセクションのソーシャルメディアリンクを修正します。今回はTwitterのリンクだけ残したいので、Twitter以外のリンクに関するコードは削除します。

トップメッセージ下部、お問い合わせセクション両方のsocial media linkを削除

削除後

次に、アイコンのリンク先を設定します。上記のリンクを設定するコードについてGhostwriterで確認すると、href=の部分で遷移先のURLを設定するということがわかります。

今回は自分のTwitterのプロフィールページを遷移先に設定したいので、プロフィールページのURLをコピーしてきて貼り付けます。

お問い合わせセクションのリンクでも忘れずに設定してくださいね。
設定出来たら、「Run」ボタンをクリックしてWebviewを確認します。Twitterアイコンをクリックして設定したTwitterのページが新規タブで開けば設定完了です。

さて、一通りテキスト・デザインの変更が完了したので、カスタマイズ前後を比較してみましょう！
※左がカスタマイズ前、右がカスタマイズ後の画像です。

セクションの追加

次に、「実績」セクションの上にプロフィールを記載するセクションを追加します。
プロフィールセクションは、セクションタイトル・簡単な自己紹介・主な経歴（年・出来事の組み合わせ）という構成とします。

プロフィールセクションのイメージ

HTML・CSSの複製

それでは、早速セクションを追加していきましょう！index.htmlをコメントを頼りに見ていくと、セクションタイトルとタイトル下の文章の部分はどのセクションでも同じコードの構成になっているようです。

テンプレートのコードを参考にコードを追加してみます。
他のセクションと同様、 <!--───────────────Profile───────────────-->というコメントをsocial media linksとProjectsセクションの間に入力します。入力後にEnterキーを押下するとComplete Code機能でファイルの内容を参考にしたコードが提案されるので、Tabキーを押下して受け入れます。

さらにコードが提案されました。他のセクションと同じ<p>タグを使ったコードですので、Tabキーで受け入れます。

セクションのタイトルとその下の自己紹介文にあたるテキストの部分は実際に作りたいウェブページに合わせて書き換えます。
文章数に合わせて<p>-------</p>を追加してくださいね。

先頭に追加した<div>の名前が「実績」セクションと同じ「projects」になっているので「profiles」に変更します。

ひとまずセクションの複製が完了したので、同じようにCSSも複製しましょう。Workspace左側のPaneでstyle.cssを開きます。
HTMLファイルと同様、どの部分に関するコードかコメントが記載されているので、/*────────────────── projects ──────────────────*/の上に/*────────────────── profile ──────────────────*/とコメントをしるし、/*────────────────── projects ──────────────────*/ にまとめられている#projectsで始まるコードを全てコピーして貼り付けます。

指定しているグループidが「projects」になっているので、「profiles」に修正します。

オリジナル部分の追加

次に、「年・出来事」を記載する部分を作成します。index.htmlを開いて、自己紹介文の最終行（ <p>AIプログラミングの～いただいています。</p>）でさらにEnterキーで改行して、年と出来事を記載するコードをどんどん追加します。

完成イメージの通り、この部分はグループ化し、自己紹介文の部分とは分離して左寄せできるのが理想です。どのようなコードが必要かまずはGhostwriter Chatで確認します。

特有のレイアウトを設定するには、①<div>を使ってグループ化、②名前を付ける、③レイアウトを設定、という手順が必要になるようです。

手順が分かったところでTransform Codeを使って先ほど書いたコードを変換してみます。
年と出来事のコードを選択して右クリックしてコンテキストメニューを表示し、「Transform code」を選択します。

Transform Codeのプロンプト入力ウィンドウが表示されたら、「Grouping.」と入力して「Transform」ボタンをクリックします。

<div>を使用したコードが提案されたら「Replace selection」ボタンをクリックしてコードを変換します。

インデントは手動で整えました

次に、Ghostwriter Chatで提案されたコードを参考にグループにクラス名を付けます。今回は「profile」という名前を付けました。

ここまで出来たら、成果をWebviewで確認してみます。「Run」ボタンをクリックすると、年と出来事のテキストが広めの行間隔で真ん中寄せで表示されています。

CSSの修正

今回実現したいレイアウトは、「<p>要素をグループ内で左揃えにする」です。具体的にどのようなコードを追加すればよいか、実際のHTMLコードを引用してGhostwriter Chatで聞いてみます。

回答によると提案されたコードを貼り付けることで理想のレイアウトにできそうです。

style.cssを開き、先ほどプロフィールセクションについて追加したコードの下部に、Ghostwriter Chatが提案してくれたコードを挿入します。

Webviewで確認してみます。「Run」ボタンをクリックし、プロフィールセクションを確認してみると、理想通りのレイアウトができていますね！

ただ、行間隔とprofileグループの上部のマージンが未調整で見にくいので、Complete Codeで調整するコードを追加します。

まずは行間隔を調整します。先ほど追加したCSSの最終行align-items: flex-start;の行でEnterキーで改行し、「/* Line spacing settings */（行の間隔の設定）」というコメントを入力してください。

コメントを入力したらさらにEnterキーで改行します。すると次のようなコードが提案されるのでTabキーを押下して提案を受け入れます。

狭めたいので、1.5になっている数値を0.8に変更して「Run」ボタンをクリックしてWebviewで確認してみます。
調整前と比較すると良い感じに間隔が詰められていますね。
※左が調整前、右が調整後の画像です。

次に、マージンを設定します。上記で追加したline-height: 0.8;の行でEnterキーで改行し、「/* margin top */（上部にマージン）」というコメントを入力してください。

コメントを入力したらさらにEnterキーで改行し、提案されたコードをTabキーで受け入れます。

とりあえず現状のレイアウトを確認してみます。「Run」ボタンをクリックしてWebviewを表示してみます。修正前と比較すると以下のように間隔が空いたのが確認できます。
※左が修正前、右が修正後の画像です。

行間隔とprofileグループの上部のマージンが見やすく設定できました。

ところが、残念ながらテンプレートで使用しているフォントが等幅フォントではないようで、「20〇〇年」の部分の幅がそろっていないためあまりきれいに見えません。今度はフォントを変更してみます。

style.cssでフォントを指定していそうなコードを探して見ると、8行目の部分でフォントを指定しているような雰囲気を感じます。

Ghostwriter Chatでこのコードについて確認してみます。

このコードでフォントを指定しているというのは正解でした。しかし、設定されているフォント2つはどちらも等幅フォントでないことが判明しました。Ghostwriter Chatでフォントの種類と具体的なコードについてアドバイスをもらってみましょう。

提案されたコードは、Yu Gothicを第一、Hiragino Sansを第二フォントとし、どちらも利用できない場合はSans serifを利用するという内容です。
これを参考に先ほどstyle.cssのフォントの部分を書き換えます。

書き換えたら「Run」ボタンをクリックしてWebviewを確認します。フォントの変更前と比較すると、等幅フォントにしたことで「20〇〇年」の部分の幅が揃って見栄えが良くなっています。プロフィール全体を比較すると以下のようになります。
※左がフォント変更前、右がフォント変更後の画像です。

これで「プロフィール」セクションの追加作業は完了です。

ページの追加

次に、「実績」セクションのプロジェクトの詳細ページを作成します。まずは新規ページを追加する手順をGhostwriter Chatで確認します。

手順は①HTMLファイルを作成、②既存のHTMLファイルと①を紐づける、③①をカスタマイズ、
④①とCSSファイルを紐づける、という流れであると分かりました。
この回答を参考にコードを追加していきましょう。

ページの作成とindex.htmlとの紐づけ

まずは、Workspace左側のFile treeから「プロジェクト1」ページ用の新規ファイルを追加します。
File tree上部の「New file」アイコンをクリックしてファイルを追加し、「project1.html」という名前を付けます。

次に、既存のHTMLファイルと上記で作成したproject1.htmlを紐づけます。index.htmlページの「実績」>「プロジェクト1」をクリックして今追加したページが開くように設定します。

index.htmlを開きプロジェクト1の<a href=.....>を探すと、<!--───────────────card───────────────-->の3行下にありました。

提案されたコードにはtarget="_blank"は含まれていなかったので今回は削除して、<a href=>の遷移先をproject1.htmlに修正します。

プロジェクト2～6の遷移先も同様に設定してみてください。

中身の作成

ページの紐づけが完了したので、project1.htmlの中身を作成していきます。左側のPaneでpoject1.htmlを開き、index.htmlの中身をまるまるコピー＆ペーストします。
コピー＆ペーストしたコードのうち、利用したい以下の部分を残して他は削除しましょう。

• <head>~</head>

<body>~</body>のうち

• <!--────────────────Header───────────────-->
• <!--─────────────────Home────────────────-->
• <footer>~</footer>
• <script>~</script>

次に、ページ上に表示される文言を修正します。ページのタイトル部分と説明の部分を修正しましょう。

修正前

修正後

トップイメージの画像もindexページのままになっているので変更します。変更方法をGhostwriter Chatで確認してみましょう。

<div id=>で設定したhomeを指定してCSSコードを設定するようです。project1ページのトップのグループ名homeをpro1topに変更します。

変更したら、style.cssで設定されている#homeのコードを全てコピーしてstyle.cssの最下部に貼り付け、#homeを#pro1topに変更します。さらに、background: url('assets/top_image.jpg') no-repeat;をプロジェクト1のカードで使用した画像に変更します。

さて、コードの複製・修正が完了したのでWebviewで確認してみます。「Run」ボタンをクリックしてWebviewが更新されたら、「実績」>「プロジェクト1」をクリックします。

文言や画像が変更した通りに表示されています。しかし少し文字が読みにくいので、背景画像の不透明性を下げましょう。
#pro1top .filter{~}のうちのopacity:.40をopacity:.10に変更します。

再度Webviewを確認してみます。プロジェクト1ページを開くと以前よりは文字が読みやすくなっていますね。
※左が不透明性の修正前、右が修正後の画像です。

ヘッダーの修正

ここで、ヘッダーのセクション名をクリックしてみても遷移しないことが分かります。続いてはヘッダーを修正してみましょう。

コメントheaderの部分がヘッダーに当たります。

遷移先を書き換えます。
まず「ホーム」のリンクを修正します。24行目をすべて選択し、画面上を右クリックしてコンテキストメニューの「Transform code」をクリックします。

プロンプトの入力欄が表示されるのでLink destination to the home section of index.html.（リンク先をindex.htmlのhomeセクションに。）と入力し、「Transform」ボタンをクリックします。

提案されたコード案では、#homeの前にページのファイル名index.htmlが付け足されていますね。ひとまず「Replace selection」ボタンをクリックして提案を受け入れます。

では正しくリンク先が設定されたかWebviewで確認してみます。「Run」ボタンをクリックしてWebviewを表示します。「実績」から「プロジェクト1」ページを表示し、ヘッダーの「ホーム」をクリックしてindexページのトップが表示されれば成功です。

うまくいったので、ヘッダーの「実績」、「お問い合わせ」のリンクも同様に書き換えます。

さらに、「プロフィール」へのリンクも追加します。「ホーム」のリンクの行でEnterキーで改行し、下の行で提案されたコードを受け入れて提案してみます。

コードの追加が完成したら、Webviewで動きを確認してみます。

プロジェクト1ページのヘッダーからすべてのリンクで指定の遷移先に遷移するのが確認できれば完了です！

最後に追加したプロフィールセクションへのリンクを、index.htmlのヘッダーの同じ箇所にも追加しましょう。このとき、遷移先のファイル名index.htmlは削除します。

ウェブページのビフォーアフター比較

それでは、ウェブページ全体のカスタマイズ前後を左右で比較してみます。

• index
  
  
  
  

• project1
  

プログラミング知識がほぼない状態でもこのレベルまでカスタマイズすることができました。

Ghostwriterでできたことまとめ

ここで、今回Ghostwriterの機能でできたこと・してくれたことを機能別にまとめます。

• Ghostwriter Chat
  …画像の差し替え方法の確認（IDEの使い方を含む）、HTML中のあるグループに対する特定のレイアウトの設定方法（グループ名の設定コード、左寄せレイアウトのコード）、フォントの特徴（等幅フォントであるか否か）の確認とおすすめフォントの提案、フォントの設定コードの確認

• Complete Code
  …ファイル内の他の場所を参考にしたコードの提案、行間隔を設定するコードの提案、マージンを設定するコードの提案

• Transform Code
  …グループ化されたコードへの変換、同一ページ内のリンクから別ページへのリンクへの変換

※今回はウェブページのプロジェクトのためExplain Codeの出番はありませんでした。

まとめ

今回はGhostwriter Chatで問題や手順を確認し、提案を参考にComplete CodeやTransform Codeでコードを修正するという流れが多かったですね。

テンプレートのコメントに助けられた場面も多かったですが、簡単なウェブページならプログラミング知識がほぼなくてもGhostwriterの助けを得てカスタマイズできそうです。ノーコーダーさんもGhostwriterを選択肢の一つとしてぜひ検討してみてくださいね！