シンプルな Web サイトの作り方
シンプルな Web サイトは Firebase のホスティング機能を利用すると簡単に作成できます。HTML と CSS で必要なページを作成して公開する方法です。各ページの中身（コンテンツ）を作成すれば、簡単にインターネットで公開で s きます。
この Web サイトの作成に必要なのは以下の項目です
＊ 基本的な HTML と CSS の記述方法
＊ Google アカウント（Firebase を利用するには Google アカウントが必要です）
＊ Web サイト作成用の PC（Windows/Mac/Linux）
＊ インターネットアクセス費用は基本的に無料です
Firebase プロジェクトの作成
Firebase のホスティング機能を利用して公開するので、Firebase のプロジェクトを作成する必要があります。 Firebase は Google が提供するサービスで利用するためには、Google アカウントが必要です。 まだ、Google アカウントをお持ちでない場合は、最初に Google アカウントを作成してください。Google アカウントはこちらのサイトから作成できます。
Google のアカウントの準備ができららFirebase コンソールにアクセスします。Firebase の利用が初めての場合は、以下のような画面が現れますので、「_Create a project_」をクリックします。
Firebaseプロジェクト作成画面
次に表示する画面では、プロジェクト名を入力します。
Firebaseプロジェクト名入力画面
次の画面は Google Analytics を有効にするか聞いてきますので選択します。 （標準では利用することが推奨されています） Google Analytics利用の確認
これで Firebase のプロジェクトは作成されるので、次の表示画面の「Conitnue」をクリックします。
プロジェクト完了画面
開発 PC の準備
Firebase のプロジェクトが作成できたら、Web サイトを作成する PC にプロジェクトフォルダを作成します。 まず、Firebase CLI(コマンドライン ツール)をインストールします。
このインストールを行う場合、Node.js が開発用の PC にインストールされている必要があります。 Node.js はオフィシャルサイトから無料でダウンロードできます。 予めダウンロードして Web サイトを作成する PC にインストールします。（Node.j のインストールはオフィシャルサイトを参照してください。）Windows・Mac・Linux など一般的な OS で動作可能です。
$ sudo npm install -g firebase-tools
(*) Windowsでは、「sudo」は不要で、「npm install -g firebase-tools」でインストールできます
続いて、以下のコマンドを実行します。
$ firebase login
$ firebase init
「firebase login」で作成した Google アカウントのユーザー名とパスワードを利用してログインします。コマンドを実行すると、Web ブラウザが開いて Google アカウントにログイン画面が立ち上がるので指示に従ってログインします。
次に、プロジェクトフォルダの初期化と Firebase の初期設定を「firebase init」を実行して行います。
$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/TomonoriHirai/Documents/projects/sv-sw/blog
? Which Firebase features do you want to set up for this directory? Press Space
to select features, then Enter to confirm your choices.
(optionally) provision default instance
◯ Firestore: Configure security rules and indexes files for Firestore
◯ Functions: Configure a Cloud Functions directory and its files
❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub
Action deploys
◯ Hosting: Set up GitHub Action deploys
◯ Storage: Configure a security rules file for Cloud Storage
(Move up and down to reveal more choices)
ホスティングを選択します。 その後で、利用する Firebase のプロジェクトを選択します。 今回の例ではプロジェクトを既に作成しているので、作成したプロジェクト（test-68cee）を選択します。 ここで、新しいプロジェクトを作成することもできます。
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
あとは、いくつかの設問に答えるだけです。 基本的に、デフォルトの設定で問題ないかと思います。
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: test-68cee (test)
i Using project test-68cee (test)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔ Wrote public/404.html
✔ Wrote public/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
i Writing gitignore file to .gitignore...
✔ Firebase initialization complete!
以上で設定は完了です。
標準設定では、「firebase init」で作成された、「public」のフォルダに必要な HTML ファイルと必要なファイル（CSS や画像情報、必要な場合は Javascript）のファイルを作成します。このフォルダに保存された情報が Web サイトとして公開されます。
HTML の作成
あとは、Web サイトに必要な HTML ファイルを作成します。
HTML のサンプルの例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap -->
<link
href="h t t p s://cdn.jsdelivr.net/npm/bootstrap＠5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link
href="h t t p s://cdn.jsdelivr.net/npm/bootstrap＠5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Sample Page</title>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Sample</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<h1>Firebaseのホスティング機能を利用したホームページ</h1>
<p>このページはFirebaseのホスティング機能を利用して作成されています</p>
<h2>Firebaseのホスティング機能を利用するのに必要な事</h2>
<ul>
<li>基本的なHTMLとCSSの記述方法</li>
<li>
Googleアカウント（Firebaseを利用するにはGoogleアカウントが必要です）
</li>
<li>Webサイト作成用のPC(Windows/Mac/Linux)</li>
<li>インターネットアクセス</li>
<li>費用は基本的に無料です</li>
</ul>
</div>
<div class="footer">
<footer>
Copyright(c) 2021 by Silicon Valley Super Ware, all rights reserved.
</footer>
</div>
</body>
</html>
「BootStrap」などの、フロントエンドアプリケーションのフレームワークを利用すると、Web ページでよく利用される「部品」の装飾に自分で CSS を書く必要がなく、Web ページ作成を効率的に行う事ができます。 「BootStrap」の利用には、Web ページのヘッダー部分で CDN(Contents Delivery Network)のリンクを指定するだけで、ボタンやナビゲーションバーの標準的な部品を利用できます。
開発中のページの確認と公開
開発中のページを確認するには、作成したプロジェクトフォルダで以下のコマンドを実行して、Web ブラウザで「localhost:5000」を指定すると、開発中の Web ページの閲覧が可能になります。この開発用の Web サーバーを利用して、Web ページの記述を行います。
$ firebase serve
開発したプロジェクトフォルダで以下のコマンドを実行すると、「public」のフォルダの下に作成した Web サイトの情報がインターネット上で公開されます。
ご自分のドメインを所有している場合、そのドメインに Web サイトを割り当てる事ができます。詳細の設定方法は別の記事でお伝えする予定です。
まとめ
HTML と CSS を自分で記述して、Web サイト（Web ページ）を作成できる方ならば、Firebase のホスティング機能を利用すれば、簡単にご自分の Web サイトを立ち上げる事が可能です。
WordPress 程は、簡単に Web サイトを作成するというわけには行きませんが、特別な Web ホスティングの契約なしで、Web サイトを立ち上げる事ができるのは魅力です。 Firebase は利用量（Hosting の場合は、Web サイトで利用するファイルのサイズとアクセス回数）によって利用料金が決まるシステムですが、一定の利用量に達しない場合は無料で利用できます。個人が運営するサイトの場合は、サイト立ち上げ時のアクセス数は限定的な場合が多いので無料の範囲で利用可能な場合が殆どです。
今回は紹介していませんが、React や Vue といったフロントエンドのフレームワークと組み合わせるとちょっとしたアプリを Firebase のホスティングで公開・利用できます。
