見出し画像
Photo by jniimi

フォトスピーチ用スクリプト作成の舞台裏を公開！

directeye


今日は三連休の中日です。
時間があったので、ちょっと自分の webサイトの舞台裏をお見せしようと思います。


英語スピーチ台本作成作業の概要

私は 朝活で英語学習をしています。
英語学習の中でフォトスピーチ (photo description speech) という練習をしています。
フォトスピーチに使用している写真素材は Engoo の "Describing Pictures"を使用しています。
Engoo 写真描写問題を英語スクリプトにする作業フローは以下のような形です。

スピーチ台本作成の作業フロー

自分のWebサイトに最終的には投稿するのですが、その前に写真描写スクリプトを何度も草稿したり、オンライン英会話の講師の先生から native check を受けて、表現を修正したりするのに、リアルタイムに修正できないと困ります。
私が使用している hugo は静的なwebページを生成するツールなのです。

ただ、このツールを用いて、何度もフォトスピーチのスクリプトの草稿を重ねたり、オンライン英会話の先生とコラボレーションしながら、スクリプトを完成させるのに、このhugoをどのように使うかを今回公開いたします！

Note PCでの英語スピーチ台本作成作業

hugoサーバをローカル起動

編集は VS Code を使用しており、Webサイト表示はChrome で行っています。
VS code のターミナルの中で、hugoサーバを起動する。

❯ hugo server --buildDrafts --watch

hugo をローカルサーバで起動した場合の webページは http://localhost:1313 で起動します。
ただし、私は設定で http://localhost:1313/docsy/ をトップページのURLにしています。

hugoローカル起動でWeb表示

サンプルページを追加

サンプルページを追加してみます。hugoの記事は、マークダウン形式でページを追加して、HTMLをhugo内で生成してくれます。

sample.md の内容はこちら

---
title: "Sample script"
linkTitle: "Sample script"
date: 2024-09-15 12:00:00 +0900
weight: 01
description: >
  Sample Script for Photo Description Speech
---

## Photo Title

{{<card header="**Script**">}}
In this section, describe the scene shown in the photo or any thoughts and insights you can draw from the picture.
{{</card>}}

追加したサンプルページはこちら。

サンプルページを追加

ドラフト更新状況のリアルタイム反映

最終的なスクリプトが完成するまで何度も草稿すると思いますが、その結果をリアルタイムにWeb表示を確認しながら作業をすることができます。

sample.md を以下のように加筆します。
Cardタグの最後の行を追加しています。

---
title: "Sample script"
linkTitle: "Sample script"
date: 2024-09-15 12:00:00 +0900
weight: 01
description: >
  Sample Script for Photo Description Speech
---

## Photo Title

{{<card header="**Script**">}}
In this section, describe the scene shown in the photo or any thoughts and insights you can drow from the picture.<br/>
Changes can be reflected in real-time.
{{</card>}}

これを保存した時のWeb表示の更新状況を示します。

草稿したスクリプトのリアルタイム反映

実際にこのような形で、自分のWebサイトでどのように表示されるか確認しながら作業をしています。

オンライン英会話講師とのコラボレーション方法

オンライン英会話の講師に、自分のスクリプトが自然な英語か Native チェックを受けているのですが、その時にこのWeb画面を共有したいと考えています。
その場合、ngrok を使うことで、自分のローカルで構築中のWebサイトを一時的にインターネットで外部公開することができます。

ngrok 起動方法

ngrok は以下のように起動します。
hugo は ポート番号 1313 を使用するので、これをngrok コマンドで指定します。

❯ ngrok http http://localhost:1313

ngrok を起動したら、ローカルWebアクセスに対して、公開URLアドレスが付与されるので、その公開URL を使って、アクセスできるようになります。
私の場合は、　https://[公開URL]/docsy/ という形でアクセスするようにしています。

ngrok でローカル環境を外部公開

ngrok でのドキュメント更新方法

オンライン講師から英語スクリプトのNativeチェックを受けていて、修正が入った時、ローカルのスクリプトを修正しても、講師が開いているブラウザでは反映されません。

例えば、以下のように sample.md を修正したすると

---
title: "Sample script"
linkTitle: "Sample script"
date: 2024-09-15 12:00:00 +0900
weight: 01
description: >
  Sample Script for Photo Description Speech
---

## Photo Title

{{<card header="**Script**">}}
In this section, describe the scene shown in the photo or any thoughts and insights you can drow from the picture.<br/>
Changes can be reflected in real-time.<br/>
When using ngrok to reflect changes, you'll need to reload your browser.
{{</card>}}

手元のノートPCでスクリプトを修正して保存した後、講師の開いているブラウザをリロードしてもらうように依頼します。

Please reload your browser to update my website.

この一連の作業を以下に示します。

ローカル環境でスクリプトを修正後、ngrok側でも反映

このようにすることで、インタラクティブにオンライン英会話の授業中に、講師と一緒に確認しながらスクリプトを修正することができます。

今日のまとめ

自分が普段、hugo や ngrok を使って、フォトスピーチのスクリプト集をまとめたサイトを構築するのに、自分のPCのローカル環境でどのような草稿をしているか、また、オンライン英会話講師の方からNativeチェックを受けられるようにするため、そのローカル環境を一時的にWebに公開する具体的な具体的なやり方を公開しました。
ただ、文章やコマンドを見せるだけだと雰囲気が伝わりづらいなと思ったので、実際の作業状況をアニメーションgif も埋めこんでみました。
note でアニメーションGIFを埋め込むのが色々と制限があり、なかなかアップロードできずとても苦戦しましたが、何とか記事にすることができてよかったです！
どなたかの参考になればと良いなと思います！


いいなと思ったら応援しよう！