JavaScriptを外部ファイル化するためGitHub Pagesを利用
以前作成したJavaScriptは、ソースコードをBloggerのテーマをHTML編集することで、直接追加しました。
しかし、この方法では、今後、JavaScriptが増えることで次のデメリットがあります。
- JavaScriptの管理が煩雑になる
- ブログが表示されるまでの時間が長くなる
そこで、JavaScriptを機能ごとにファイルにまとめ、SCRIPTタグでそのファイルを指定する方法に切り替える方法を検討しました。
ブログの記事内
<script src="https://aaa.bbb.ccc/JavaScriptFile.js"></script>
この方法を使用するには、Bloggerの記事が参照可能な場所にJavaScriptファイルを公開する必要があります。
無料で実行可能な方法を調べたところ、GitHub Pagesを利用してみることにしました。
Googleドライブでも良さそうだったのですが、一度GitHubを使ってみたいと思っていたので、GitHub Pagesを選択しました。
ちなみに、GitHubとは、プログラム、等のバージョン管理が可能で、かつ、管理されているプログラム、等を他のユーザーと共有が可能なサービスです。
また、Github Pagesとは、GitHubが提供している静的サイトのホスティングサービスです。
静的サイトとは、ユーザーの操作で表示内容が変更されない、また、いつアクセスしても表示内容が変更されないサイトのことです。
一方、静的サイトとは逆の動的サイトとは、検索サービス、掲示板やブログのコメント、等のことです。
GitHub Pagesの登録方法はお約束に注意
GitHub Pagesを利用するには、アカウントの作成が必要になります。
予め、適切なアカウント名とメールアドレスを用意すれば、簡単にGitHubのアカウントが作成できます。
私がハマったのはGitHub Pagesの登録方法、特に、リポジトリの作成です。
GitHub Pagesを登録する作業手順は次の通りです。
- リポジトリの作成
- README.mdの登録
- index.htmlの登録
- ページの公開
- 作成したJavaScriptファイルの登録
詳細を順に説明します。
リポジトリの作成
リポジトリとは、英語で「貯蔵庫」、「収納庫」を意味します。
ソフトウェア開発でのリポジトリとは、システムを構成するデータやプログラムの情報が納められたデータベースを指します。
GitHub Pagesを利用する場合、リポジトリ名には、次のルールがありますのでご注意ください。
リポジトリ名: アカウント名.github.io
リポジトリの作成手順は、次の通りです。
1. リポジトリ名を入力
2. Publicを選択
3. Create a new repositoryをクリック
README.mdの登録
README.mdの登録手順は、次の通りです。
1. READMEをクリック
index.htmlの登録
index.htmlの登録手順は、次の通りです。
1. Add fileをクリックした後、Create new fileをクリック
2. ファイル名としてindex.htmlと入力
3. ファイルの内容として下記のHTMLコードを入力
<!doctype html> <html> <head> <title>This is the title of the webpage!</title> </head> <body> <p>This is an example paragraph.</p> </body> </html>
4. Commit new fileをクリック
ページの公開
ページの公開は、次の通りです。
1. Settingsをクリック
2. Pagesをクリック
3. Your site is live at https://アカウント名.github.io/ と表示されていればOK
4. サイト名が表示されていなければ、Branchにmainが選択されているかを確認
サイトにアクセスできるようになるまでには、多少の時間が必要かもしれませんので、ご注意ください。
作成したJavaScriptファイルの登録
作成したJavaScriptファイルの登録手順は、次の通りです。
1. Codeをクリック
2. Add fileをクリックした後、Upload filesをクリック
3. Drag files here...と記載されたエリアにファイルをドラッグ&ドロップ
(または、Choose your filesでファイルを選択しても良い)
4. Commit changesをクリック
JavaScriptファイルの参照方法
GitHub Pagesに登録したJavaScriptファイルの参照方法は、次の通りです。
https://アカウント名.github.io/ファイル名.js
ブログ内でスクリプトを利用するには、次のように記載します。
<script src="https://アカウント名.github.io/ファイル名.js"></script>
これで、GitHub Pagesに登録したJavaScriptファイルをBloggerから参照できるようになります。
