Googleの機能だけで無料でおみくじ機能をつくる方法

Last updated at 2026-01-11Posted at 2026-01-10

前提条件

以降の手順では、PCのGoogle Chromeブラウザでの操作を基準にしています。

今回使う機能

Google Drive
Google Apps Script
Google サイト
（上2つがキモ。Googleサイトは見栄え良く公開する用です。）

手順

Google Driveを開き、左上の 新規 > 新しいフォルダ から新しいフォルダを作成します。今回は「おみくじ用画像」という名前にします。（好きな名前でOK。任意に読み替えてください。）
1. 新規
2. 新しいフォルダ
3. フォルダ名を入力して「作成」をクリック
作成したフォルダに誰でも見れるアクセス権を付与します。
フォルダの右側の ︙ をクリックし、 共有 > 共有 をクリック。
（またはフォルダを開いた状態で、フォルダ名の右側の下向きの三角をクリックでも同様の設定があります。）
1. 共有ダイアログ
2. 一般的なアクセス を「制限付き」から「リンクを知っている全員」に変更して…
3. 完了 をクリック
作った「おみくじ用画像」フォルダに表示したい画像を全て格納します。
画像の名前は完成した抽選画面の画像の下部に表示されるので、任意で変更しておきましょう。
おみくじであれば対応する運勢などを設定してあげればいいと思います。
今回はお試しなので、手元にあったあやびーちゃん表情差分を突っ込みました。
ページの公開URLを確定させるため、雛形を作ります。
Google Driveの画面左上の「新規」からGoogleサイトを作成します。
新規 > その他 > Google サイト
内容は任意に編集すればいいですが、ヘッダー上部のサイト名は空欄にすると良いです。
今回は単ページの想定で、サイト名がホームへのリンクになるため、あっても邪魔なためです。
デフォルトだとホームの名前が日本語になっていますが、このままだと公開時のURLがやや見栄え悪くなってしまいます。
右側のメニューから「ページ」タブを開いて「ホーム」にマウスポインターを合わせ、右側の ︙ をクリック、 プロパティ を選びます。のをダブルクリックすると名前が変えられるので、英語でhomeに変えておきます
▶ ▶
1. 詳細 をクリックし、カスタムパスに英語で「home」と入力し、 完了 をクリックします。
編集が完了したら、右上の 公開 をクリックします。
ウェブアドレスに使用可能な任意の文字を設定して、サイトを閲覧できるユーザーが「全員」になっていることを確認します。なっていなければ右横の「管理」から設定します。
検索の設定で「一般公開の検索エンジンに自分のサイトを表示しないようリクエストする」にチェックをつけると、Google検索等でアクセスできなくなります。アクセス元を絞りたい場合はお好みでチェックを付けます。
公開 をクリックすると全世界に公開されます。
1. 公開が完了すると、元の画面の 公開 ボタンの右側に下向きの三角がつきます。
2. 下向きの三角をクリックし、 公開したサイトを表示 を選ぶと公開されたWebページが参照できます。
3. ここでURLが想定通りになってるか確認しましょう。
いったん、雛形から離れて、ここからは、おみくじの表示部分を作成します。
「おみくじ用画像」フォルダの外に移動して、今度はGoogle Apps Scriptを作成します。
新規 > その他 > Google Apps Script をクリック。
1. こんな警告が出たら スクリプトを作成 をクリック。
プロジェクト名はそのままでも良いですが、わかり易い名前にかえておくと良いです。
1. プロジェクト名「無題のプロジェクト」をクリックして…
2. 任意の名前、を入力して 名前を変更 をクリック
「コード.gs」に元々書かれてる内容を全て選択して、「code.gs」の内容をコピペします。
- before
- after

設定部分ここから ～ 設定部分ここまで の内容を編集します。

設定箇所	設定内容
フォルダID (FOLDER_ID)	ダブルクオーテーション（"）で括られた中を書き換えます。さっき作った「おみくじ用画像」フォルダを開いて、URLの以下の部分をコピペします： `https://drive.google.com/drive/folders/XXXXX?usp=drive_link` → XXXXXの部分後ろの `?usp=drive_link` は無いこともあります。とにかく `folders/` より後ろ、 `?`マークより前です。`?`マークもなければ一番うしろまでです。
画像サイズ (THUMB_SIZE)	今回は使う画像のサイズが揃ってることを前提にしています。サイズがバラバラの場合は、ここで指定したサイズに合わせて拡大縮小されます。既定では `w1200` にしています。どんな値が指定できるかは、Googleドライブの画像サムネイルURLの sz の仕様を参照を確認してください。ググれば出てきます。もっとも、sz以外の指定の仕方もありますが、ややこしくなるのでここでは割愛します。
ポストメッセージフォーマット (TWEET_FORMAT)	Twitter(X)にポストするリンクのメッセージ内容です。 `@` は画像ファイル名に置換されます。特に、リンク先のURLは必ず書き換えてください。サンプルページに飛んでしまうので。書き換え先のURLは先ほど公開した雛形ページのURLです。 URLなどでよく使われる `/`（スラッシュ）は `\\/` と書いてください。（前に半角バックスラッシュを2個つける）たとえば `https://` は`https:\\/\\/` と書きます。
読み込み画像枚数 (PRELOAD_AHEAD)	キャッシュに画像を読み込む枚数です。だいたい30枚を超えないくらいならば、実際の画像の枚数（「おみくじ用画像」フォルダに格納した画像の枚数）を書いておけばOKです。

コード中の以下の部分の変更はオプションです。おみくじ部分の文字の色やボタンの形などを指定できます。

<style>
    html,body {
      text-align:center;
      background-color: transparent;
    }
    button {
      font-size:16px; /* ボタンの文字サイズ */
      padding:10px 14px; /* ボタンの余白 */
      background-color: black; /* ボタンの背景色 */
      color: white; /* ボタンの文字色 */
      cursor:pointer;
    }
    #tweet {
      color: black; /* 結果をTwitter(X)にポストするボタンの文字色 */
    }
</style>

もし画像の下の画像ファイル名のキャプション表示が不要であれば、</style>の前に次の内容を書き加えます。
```
#name {
  display: none;
}
```

コードを保存し、「デプロイ」を実行します。
1. 画面上部の 保存 アイコンをクリック（またはCtrl+S）
2. 保存されると、「変更が保存されていません」と書かれている部分が「ドライブに保存しました」に変わります。
3. 右上の デプロイ > 新しいデプロイ をクリックします
4. 「新しいデプロイ」が開かれるので、「種類の選択」の 歯車マーク から ウェブアプリ を選択します。
5. 「アクセスできるユーザー」を「全員」に変えてデプロイボタンをクリック。
6. 初回の場合はアクセスの許可を求められるので アクセスを承認 をクリック。
7. このような怪しげな警告ダイアログがでますが、 Advanced をクリックして……
8. Go to おみくじ作成プログラム (unsafe) をクリックします。（おみくじ作成プログラム の部分は設定したプロジェクト名になるはずです）
9. アクセス許可の画面が開かれるので、 Continue をクリック。
10. デプロイを更新しています…
11. 完了するとこのような画面になるので、「URL」をコピーしておきます。
12. おみくじ表示部分の作成はこれで完了です。
  右下の 完了 ボタンを押せば閉じますが、いったんこのままにして外側の部分を作ります。
サイトの雛形に戻ります。
1. 右側の 挿入 より 埋め込む を選んで……
2. URL欄に先程コピーしたおみくじ作成プログラムのURLを貼り付けます。
3. 挿入 をクリックします。
4. 左詰めで挿入されるので
5. 中央に移動します。
6. 画像が表示されたときに切れてしまわないように、高さも広げます。
7. そのほか、任意に編集してください。
8. 編集が完了したら、 公開 をクリックすると、現在の下書きの内容と、すでに公開されている内容の比較画面が表示されます。
  1. 公開 をクリック
  2. 比較画面が表示される
  3. 右上の「公開」ボタンをクリックすると、内容が更新されます。
最後に動作確認です。
1. 公開 ボタンの右の下向きの三角をクリックし、 公開したサイトを表示 を選ぶと公開されたWebページが参照できます。
2. 公開済みのページに遷移
3. 「おみくじを引く」をクリックして「おみくじ用画像」フォルダに保存した画像から、正常にランダムな画像が表示されることを確認します。
  画像が選ばれると同時に、画像下部にキャプションとして画像に設定された名前が表示されます。
  「おみくじを引く」ボタンは「おみくじを引き直す」に変わり、「結果をTwitter(X)にポスト」リンクが表示されます。
4. 「おみくじを引き直す」をクリックすれば画像がランダムに切り替わります。
  「結果をTwitter(X)にポスト」リンクをクリックすればポスト画面に移動すると思います。
  
  実際のポスト文面:
```
おみくじの結果は「喜」でした。

あなたもおみくじを引いてみよう
https://sites.google.com/view/ayebee-omikuji2026/home
```
以上、想定通り公開が完了したら作業は終わりです。
今回作ったおみくじ（？）はここから試せます。
お疲れ様でした。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up