Embedded Files
2024年末、pixivに上げていた作品のうち翻訳されたシリーズ三作だけ残して非公開にした。2025年からはpixivの代わりにXfolioとPrivatter+で作品を公開した。個人的に使いづらかったXfolioを数ヶ月後には非公開にして、閲覧制限をかけたりある程度ページデザインを自由にできるPrivatter+を好んで使用していた。しかし2026年2月半ば、思い立つ。『毎回タグ組むの面倒だしコピペは間違えやすいし……何より最近Privatter+の広告が目立つようになった気がする……前から何度か考えてたけど、この機会に広告のない個人サイトを作ろう！』
何で作る？
実は過去一度Google Sitesで作品一覧を作ったことがある。でも少し不満があった。
今、個人サイトを作るなら、こうしたい。
よくよく調べると、Google SitesではなくGoogle Apps Script（GAS）でポータルサイトを作っている人がいて、知恵を拝借することにした。以前抱いた上記の不満を解決し、実現したいことができそう……な気がする。これまでの作品データはGoogle Driveにバックアップをとってあり、既存のGoogleアカウントだけで完結できるのが魅力的なのでGASを使うことに決めた。
- 画像やテキストなど入力が全て手作業
- 閲覧制限をうまく設けられなかった
- 作れるフォルダ階層に制限がある
- 1作品1ページにすると長編のスクロールバーが短い
- ページにフォーム埋め込むと二重のスクロールバーが出る
今、個人サイトを作るなら、こうしたい。
- 無料（趣味なので…）
- 作品一覧を保存フォルダから情報取得して自動生成
- 作品カテゴリ別にテンプレを作って作品表示
- フォルダに作品を入れたら一覧を自動更新
- フォームを同じサイトの中に埋め込む
- フォームから貰ったコメントへの返信ページを自動生成
- 広告を出さない
- 一部作品に閲覧制限を設ける
- 各作品で♡押せる、フォームに飛べるようにする（反応もらえると励みになる）
よくよく調べると、Google SitesではなくGoogle Apps Script（GAS）でポータルサイトを作っている人がいて、知恵を拝借することにした。以前抱いた上記の不満を解決し、実現したいことができそう……な気がする。これまでの作品データはGoogle Driveにバックアップをとってあり、既存のGoogleアカウントだけで完結できるのが魅力的なのでGASを使うことに決めた。
作ったもの
ChatGPTとGeminiに手伝ってもらって、このサイトを構築するためにいくつかのファイルを作成した。
作品完成からサイトに反映公開するまでの流れとしてはこう。
一部スプレッドシートに手入力するデータがあるので完全自動ではないものの、これでサイトはほぼ自動更新に近い形として完成！𝕏に載せるのはサムネイルを投稿し、全体をサイトに載せるようにすればいい運用ができそう。
ちなみに、感想フォームまわりもほぼ自動更新できるようにしておいた。
- 作品管理スプレッドシート
- ファイルの軽量化および作品ごとの公開用フォルダ作成＆ファイル格納自動処理スクリプト
- Google Drive上のファイルから作品情報を取得してスプレッドシートに反映するGAS
- 作品情報に合わせてフォームのチェックボックス項目を追加反映するGAS
- フォーム集計や感想コメントをスプレッドシートに転記するGAS
- 作品管理スプレッドシートから個人サイトを構築するGASアプリ
作品完成からサイトに反映公開するまでの流れとしてはこう。
- 完成した作品を特定のフォルダに格納
- 軽量化と公開用フォルダ作成＆ファイル格納自動処理スクリプトを実行
- Google Driveに自動で同期される
- 作品情報取得＆スプレッドシートに反映するGAS実行
- スプレッドシートに追加で必要情報を手入力（パスワード等）
- 自動でサイトに反映される
一部スプレッドシートに手入力するデータがあるので完全自動ではないものの、これでサイトはほぼ自動更新に近い形として完成！𝕏に載せるのはサムネイルを投稿し、全体をサイトに載せるようにすればいい運用ができそう。
ちなみに、感想フォームまわりもほぼ自動更新できるようにしておいた。
- 作品情報をスプレッドシートに反映（上記の項目4）
- フォームのチェックボックス項目を追加反映するGASを実行
- フォーム集計や感想コメントをスプレッドシートに転記するGAS
振り返って
仕事から帰って毎夜ChatGPTかGeminiに話しかける1ヶ月弱を過ごした。実は2月末くらいにGASアプリで作ったサイトの完成だ〜！と喜んだ時にふと気づいた。GASアプリを公開すると、ページ上部に『このアプリはユーザーが作ったものです』の警告文が出てしまう。え？広告なしにしたかったのに、これじゃ台無しである。ぬか喜び……せっかく作ったのに……いやまあ許容できなくないけど嫌じゃない？なんとかならんの？と、再び調べてみるといい知らせが。GASアプリはどこかしらに埋め込んで使えば警告文が消えるらしい。しかも、そのときまで勘違いしていたが、Google Sitesは別のページをコンテンツとして埋め込むだけじゃなくて、GASアプリで作ったページ〝そのもの〟を埋め込めるらしい。え？つまり、作ったGASアプリのページもだけど、Googleフォームもページそのものを埋め込めばいいんじゃん！ということで今の形態に変えてからも再び試行錯誤が始まったのであった。
とにかくめちゃくちゃ苦労した。GASアプリの中でページ遷移するときに勝手にURLが変わるのが一番意味がわからなかった。おそらく計1週間くらいつまづいた。GASアプリの中では感想コメントへの返信を個別にリンク貼ってスクロールさせてたけど、Google Sitesに埋め込んだらiframeが二重になってIDが取得できずに解決しなかった。これも計1週間くらいつまづいた。同じく、GASアプリの中で小説の章を別のページとして作っていたけど、これもまたGoogle Sitesに埋め込んだらiframeが原因で、ページ遷移したら白紙ページが表示されて解決しなかった。一つのページで本文を切り替える方式に変えてなんとかした。他に解決できなかったこととして、作品個別の共有リンクが作れないのが一番大きい。𝕏やBlueskyから直接サイト内の作品ページを見てもらうことが叶わないので…。上記のように妥協点はいくつかあるが、これだけ頑張って作ったのでこのサイトでマイペースに作品公開していきたい。
世の中のプログラマーはすごい。Java Script初心者のため普段使わない脳の領域使った感じがする。でもこのサイト作成を通して頭がよくなった気がする。これを読んだあなたも個人サイト作りませんか？
とにかくめちゃくちゃ苦労した。GASアプリの中でページ遷移するときに勝手にURLが変わるのが一番意味がわからなかった。おそらく計1週間くらいつまづいた。GASアプリの中では感想コメントへの返信を個別にリンク貼ってスクロールさせてたけど、Google Sitesに埋め込んだらiframeが二重になってIDが取得できずに解決しなかった。これも計1週間くらいつまづいた。同じく、GASアプリの中で小説の章を別のページとして作っていたけど、これもまたGoogle Sitesに埋め込んだらiframeが原因で、ページ遷移したら白紙ページが表示されて解決しなかった。一つのページで本文を切り替える方式に変えてなんとかした。他に解決できなかったこととして、作品個別の共有リンクが作れないのが一番大きい。𝕏やBlueskyから直接サイト内の作品ページを見てもらうことが叶わないので…。上記のように妥協点はいくつかあるが、これだけ頑張って作ったのでこのサイトでマイペースに作品公開していきたい。
世の中のプログラマーはすごい。Java Script初心者のため普段使わない脳の領域使った感じがする。でもこのサイト作成を通して頭がよくなった気がする。これを読んだあなたも個人サイト作りませんか？
Google Sites
Report abuse