結局何もかも自動コーディングって話

以前のブログで、このブログページが、Google Sheetsにより自動でコーディングされているということを紹介しました。

↑その時の記事はこちら

実は、自動でコーディングされているのは、ブログページだけではないんです!!!最初にあのシステムをGoogle Sheetsで作った後、その楽さに気づいた私は、結局色々なところで自動コーディングシステムを自ら作成し利用しています。

今回は、それらの自動コーディングシステムを簡単に紹介します。

1.ギャラリー

このウェブページに使用されている全ての写真が並ぶギャラリー。それぞれの写真には提供や引用元、撮影場所が付けられており、クリックすることで、その写真に関連するページへ飛ぶことが出来ます。

↑実際のギャラリーページ

しかし、これほど大量の写真それぞれにソースやリンクを付けるのは至難の業、できたとしても、ミスが０な訳がありません。そこで私はブログページと同じように、Google Sheetsで自動コーディングシステムを作成し、かかる時間を大幅に削減しました。

こちらが、実際のシステムの「入力シート」部分になります。

入力シートには、画像名、提供・撮影場所、(関連するページの)リンク、を入力する欄があります。オートフィル機能などもあるため、単なるテキストの入力だけでも、大変時間の削減になります。

こちらが、実際のシステムの「処理シート」部分になります。

先程入力シートで入力した情報の間に、ウェブサイトを作るために必要なHTMLのコードを、事前に設定した通りに配置していきます。.htmlやimg/など、拡張子やファイルの場所はここで自動で追加してくれるので、わざわざ入力シートで追加する必要はありません。

そして最後こちらが、「出力シート」

コピペしてHTMLのコードに張り付け。ただそれだけで、ギャラリーページ完成です。いや～、便利。

2.参考文献

参考文献のページも、自動コーディングシステムを使っています。

↑実際の参考文献のページ

ただ、こちらはどちらかというと自動コーディングというより、データ処理の補助。Google Sheetsで作るには、条件分岐が多く、いろいろと操作がややこしいため、単純な処理だけGoogle Sheetsにやってもらって、あとは手作業です(笑)

↑参考文献のシステム

3.用語集

用語集ページも、自動コーディングシステムを使っています。こちらも参考文献のように完璧に全自動というわけではありませんが、まあおおよそはそうです。

↑実際の用語集ページ

こちらが、実際のシステムの「入力シート」になります。

用語名と読み、解説、それと画像ファイル名を指定します。用語名と解説はさておき、なぜ「読み」と「画像ファイル」を入力する必要があるのかと思った人もいると思います。

「読み」については、シートに入力された語句を、用語集ページにおいて、あいうえお順で表示させるために入力する必要があります。漢字だと読みが分からないものが多く、処理も難しいので...

そして、「画像」については、実は、用語集ページ内では使用していません。「用語解説機能」というやつで使用しています。そう、青色の用語にマルスカーソルを当てるとその用語の解説が出てくるあの機能です。

↑実際の用語解説機能

この機能は完全にこの用語集とリンクしているので、同じくこのGoogle Sheets内で処理しちゃってます。そして、用語集内では説明画像はありませんが、用語解説の吹き出しだとちょくちょく使っているので、入力する必要があるというわけです。つまりこのGoogle Sheetsは、用語集ページと用語解説機能用の吹き出しの両方のコーディングを同時に自動で行っているというわけです。

こちらが、実際のシステムの「処理1シート」になります。

自分でも、なぜ一つしかないのに処理の後に「1」を付けたんだか...今考えてみると謎です...こちらでは、先ほど説明したあいうえお順への並び替えと、あとは他のと同じように、ウェブサイトでの表示に必要なHTMLを追加しています。で、「出力シートないやんと」思う方もいるかもしれませんが、どういうわけか「入力シート」内にあります。なぜそうしたんだ...。

というわけで「入力シート」に戻ります。画像ファイル名の列のすぐ右隣りにあるのが、用語解説機能用の出力です。こいつをコピーしてその用語の上に張り付けて上書きしてあげるだけでOK。楽だ...で、その右隣のが用語集のページ用。こっちは少々この後追加の処理を手動でしてあげないとですが、まあ大した時間はかかりません。という感じです。

4.クイズページ

そして最後にクイズページ。こっちはもはや自動コーディングじゃなくて、自動プログラミングです。クイズページ用のJavaScriptを全自動で作成しています。

↑実際のクイズページ

こちらが、実際のシステムの「入力シート」になります。

クイズの問題文と答え、不正解の選択肢を入力する感じです。あとは、解答解説用に解説と関連ページも入力します。答えや不正解の選択肢は、実際にクイズページで表示される時には、自動で順番が並び変えられますが、その話はまた後日しようかなと思います。

こちらが、実際のシステムの「処理シート」になります。

簡単に説明すると、各問題をswitch文の条件分岐のcaseに割り当てて、その中に問題文や選択肢、解説等を入れ込んでいます。というのも、クイズページの問題は、事前に設定された100問の中からランダムで出題されるので...一番上の列に書いてあるプログラムの欠片が、「入力シート」で入力された情報の間に割り込まれていきます。

そして最後にこちらが「出力シート」です。

コピーして、JavaScriptのファイルの指定地に貼り付ける。それだけ...

以上が私がGoogle Sheetsで新たに自動コーディングしたページです。Google Sheetsが無ければ、私たちはこれほど膨大な量の未来プリンター内のコンテンツを管理することは出来なかったと思います。本当に感謝の念で一杯です！

「結局何もかも自動コーディングって話」完

Google Sheets is a trademark of Google LLC.

“Google and Google Sheets are trademarks of Google LLC and this website is not endorsed by or affiliated with Google in any way.”