「GitHubで公開されているしあtubeってどうやって使うの？」
GitHubのページを開いてみたものの、英語が多くて何をすればいいのか分からず、そこで止まってしまった方も多いのではないでしょうか。
実は、しあtubeはソフトをインストールして使うものではありません。
**Google Apps Script（GAS）**というGoogleの無料サービスを利用して、自分専用のWebアプリとして公開することで利用できます。
最初は難しそうに見えますが、実際にやることは
- コードをコピーする
- Google Apps Scriptへ貼り付ける
- 公開する
この3つが中心です。
この記事では、パソコン初心者の方でも迷わないように、画像を使いながら一つひとつ丁寧に解説していきます。
しあtubeとは？
しあtubeは、GitHubで公開されているWebアプリです。
GitHub上に公開されているプログラムをGoogle Apps Scriptで読み込み、自分専用のURLとして公開することで利用できます。
一般的なソフトウェアのようにダウンロードしてインストールする必要はなく、ブラウザだけで利用できるのが特徴です。
GitHubとは？
GitHub（ギットハブ）は、世界中の開発者がプログラムを公開・共有しているサービスです。
簡単にいうと、
「プログラム版Googleドライブ」
のようなイメージです。
便利なプログラムが数多く公開されており、今回利用する「しあtube」もその一つです。
今回使用するGitHubページはこちらです。
GitHub（しあtube）
あとでコードを確認したり、更新情報を見たりするときにも利用しますので、ブックマークしておくと便利です。
Google Apps Scriptとは？
Google Apps Script（GAS）は、Googleが無料で提供しているプログラミングサービスです。
「プログラミング」と聞くと難しく感じますが、今回はコードを書く必要はありません。
この記事で紹介するコードをコピーして貼り付けるだけで設定できます。
Google Apps Scriptはこちらから開けます。
Google検索で
Google Apps Script
と検索しても表示されます。
必要なもの
設定を始める前に、以下を準備しておきましょう。
- Googleアカウント
- パソコン（Windows・Mac）
- Google Chromeなどのブラウザ
- インターネット接続
スマートフォンでも設定できますが、画面が小さく操作しづらいため、パソコンがおすすめです。
GitHub「しあtube」の使い方｜Google Apps Scriptで公開する手順
手順① Google Apps Scriptを開く
まずはGoogle Apps Scriptを開きます。
Googleで
Google Apps Script
と検索するか、
次のURLへアクセスしてください。
Googleアカウントへログインしていない場合は、ログイン画面が表示されます。
ログインが終わるとホーム画面が表示されます。
手順② 新しいプロジェクトを作成する
Google Apps Scriptのホーム画面が表示されたら、
画面左上にある
「新しいプロジェクト」
をクリックします。
すると数秒後にコード編集画面が開きます。
ここから設定を始めていきます。
手順③ 最初からあるコードを削除する
新しいプロジェクトを作成すると、
最初からサンプルコードが入力されています。
「消してしまって大丈夫？」
と不安になるかもしれませんが、
サンプルなので全部削除して問題ありません。
Windowsなら
Ctrl + A
Macなら
Command + A
で全選択できます。
そのままDeleteキーを押せば削除できます。
画面が真っ白になれば準備完了です。
手順④ コードを貼り付ける
次に、GitHubで公開されているコードを利用します。
以下のコードをコピーして、そのまま貼り付けてください。
function doGet() {
const text = UrlFetchApp.fetch(
'https://raw.githubusercontent.com/ajgpw/youtube/refs/heads/main/index.html.txt'
).getContentText();
return HtmlService.createHtmlOutput(text)
.setTitle('しあtube')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
コードは途中の文字やスペースを変更せず、そのまま貼り付けるようにしましょう。
手順⑤ プロジェクトを保存する
コードを貼り付けたら、忘れずに保存しましょう。
画面上部の保存アイコン（フロッピーディスクのマーク）をクリックします。
初回のみプロジェクト名の入力を求められます。
名前は自由ですが、
- しあtube
- GitHub
- YouTube
など、後から見て分かりやすい名前がおすすめです。
ここまで終われば準備は完了です。
ここからは、いよいよ**Webアプリとして公開（デプロイ）**し、実際に利用できる状態にしていきます。
手順⑥ Webアプリとして公開（デプロイ）する
コードを保存したら、画面右上にある
「デプロイ」
をクリックします。
するとメニューが表示されるので、
「新しいデプロイ」
をクリックしてください。
初めて設定する方が一番迷いやすい場所ですが、このあと数回クリックするだけで公開できます。
手順⑦ 「ウェブアプリ」を選択する
「新しいデプロイ」をクリックすると、
「種類を選択」
という画面が表示されます。
ここで
「ウェブアプリ」
を選択してください。
この設定によって、Google Apps Scriptをインターネット上で利用できるようになります。
手順⑧ 公開設定を行う
ウェブアプリを選択すると、設定画面が表示されます。
以下のように設定しましょう。
実行するユーザー
→ 自分
アクセスできるユーザー
→ 全員
または
リンクを知っている全員
設定が終わったら、
「デプロイ」
をクリックします。
Google側で数秒ほど処理が行われます。
手順⑨ Googleの権限を許可する
初めてGoogle Apps Scriptを利用する場合、
Googleから
このアプリは確認されていません
と表示されることがあります。
突然表示されるので驚くかもしれませんが、
これは自分で作成したApps Scriptを初めて実行するときによく表示される画面です。
画面左下の
「詳細」
をクリックすると、
「○○（安全ではないページ）に移動」
という項目が表示されます。
続いて
「許可」
をクリックすれば設定完了です。
手順⑩ 公開URLを開く
デプロイが完了すると、
ウェブアプリURL
が表示されます。
このURLが、自分専用のURLになります。
URLをクリックすると、しあtubeが表示されます。
今後は、このURLをブックマークしておけば、Google Apps Scriptを開かなくても利用できます。
真っ白になる場合の対処法
環境によっては、
ページが真っ白になることがあります。
その場合は、以下のコードへ変更して再度デプロイしてください。
function doGet() {
const text = UrlFetchApp.fetch(
'https://raw.githubusercontent.com/ajgpw/ajgpw.github.io/refs/heads/main/%E3%81%97%E3%81%82tube/index.html'
).getContentText();
return HtmlService.createHtmlOutput(text)
.setTitle('しあtube')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
コードを変更しただけでは反映されません。
次の手順で更新してください。
- デプロイ
- デプロイを管理
- 編集（鉛筆マーク）
- 新しいバージョン
- デプロイ
GitHubページを確認する方法
設定がうまくいかない場合や、最新版の情報を確認したい場合は、GitHubのページを確認してみましょう。
GitHub（しあtube）
開発者によって更新されることがあるため、READMEに新しい手順や修正内容が掲載されることがあります。
よくあるエラー
「このアプリは確認されていません」
Google Apps Scriptでは一般的な表示です。
内容を理解したうえで利用する場合は、
「詳細」→「○○に移動」
から続行できます。
真っ白な画面になる
GitHub側の更新や、一部ファイルの読み込みに失敗している可能性があります。
代替コードへ変更し、再デプロイを試してください。
404エラーになる
ウェブアプリURLを最後まで正しくコピーできているか確認しましょう。
また、デプロイに失敗している場合も404エラーになることがあります。
権限エラーが表示される
アクセス設定が「自分のみ」になっていないか確認してください。
公開範囲を変更した後は、もう一度デプロイが必要です。
よくある質問
学校のパソコンでもできますか？
学校のパソコンでもGoogle Apps ScriptやGitHubのページ自体は開ける場合があります。
ただし、学校ごとに導入されているフィルタリングや利用制限が異なるため、Google Apps Scriptへのアクセスやウェブアプリの公開・実行が制限されていることがあります。
そのため、学校のパソコンで利用できるかどうかは、お使いの学校の設定によって異なります。
自宅のパソコンであれば、このような制限を受けることはほとんどないため、記事で紹介した手順どおりに設定できます。
スマホでも設定できますか？
可能ですが、コードの貼り付けや設定画面の操作がしづらいため、パソコンでの設定がおすすめです。
GitHubのアカウントは必要ですか？
この記事で紹介している方法では、GitHubアカウントがなくても設定できます。
利用料金はかかりますか？
通常の利用であれば、Google Apps Scriptは無料で利用できます。
コードを変更しても大丈夫ですか？
プログラミングの知識がある方は変更できますが、初心者の方はそのまま利用することをおすすめします。
GitHubの「siatube-server」も必要ですか？
この記事で紹介しているGoogle Apps Scriptを使った方法では必要ありません。siatube-serverはサーバーを自分で構築・運用したい方向けのリポジトリです。
実際に使ってみた感想
実際に設定してみると、一番時間がかかったのは「デプロイ」と「Googleの権限許可」の部分でした。
逆に、この2つをクリアできれば、その後は数分で設定が完了しました。
また、一度公開してしまえば、毎回Google Apps Scriptを開く必要はなく、公開URLへアクセスするだけで利用できます。
途中でエラーが出ても慌てず、一つずつ確認すれば解決できるケースがほとんどでした。
安全性について
しあtubeはGitHub上でソースコードが公開されているため、どのようなプログラムなのか確認できる点はメリットです。
ただし、第三者が公開しているプログラムであることに変わりはありません。
利用する前に公開元やコードの内容を確認し、内容を理解したうえで自己責任で利用することをおすすめします。
また、GitHubのリポジトリは更新されることがあるため、今後設定方法やコードが変更される可能性もあります。
まとめ
今回は、GitHubで公開されている「しあtube」をGoogle Apps Scriptで公開する方法を紹介しました。
手順をまとめると、次の流れになります。
- Google Apps Scriptを開く
- 新しいプロジェクトを作成する
- コードを貼り付ける
- 保存する
- デプロイする
- ウェブアプリとして公開する
- Googleの権限を許可する
- 公開URLを開く
一見すると難しそうに感じますが、実際には手順どおりに進めれば10〜15分ほどで設定できます。
この記事が、初めてGitHubやGoogle Apps Scriptを使う方のお役に立てば幸いです。
コメント