HTMLを無料で簡単にアップロードする！【Firebase Hosting】
どうも、Nattonzです。
最近、様々なツールを使ってホームページを作ることができるようになりました。
WixやGoogle Sites等、初心者でも簡単にホームページを作れるようになっています。
しかし、多くは使いたい機能が見当たらなかったり、作ったサイトに広告が入ったりします。
そこで、ご紹介したいのがFirebase Hostingです。
Firebase Hostingはざっくり言えばHTMLを無料＆広告表示無しで簡単にアップロードできる優れものです。
さらに、今回はFirebase Hostingにしか触れませんが、ほかにもFirebase DatabaseやFirebase Storage等があり、これらを組み合わせることでオリジナルの掲示板やファイル置き場など、他のサイトでは実装することができなかった機能を無料で簡単に実装することができます(もちろんプログラミングの知識が必要ですが(;'∀'))。
では、早速本題に入っていきたいと思います♪
～目次～
準備
1.Googleアカウントにログイン
FirebaseはGoogleアカウントがないと始めることができません。
なので、事前にログインしておいてください。
また、一つのアカウントにログインした状態にしてください。
複数のアカウントにログインした状態だと後々面倒なことになるかもしれないので...
2.Firebaseでプロジェクトを作る
まず、Firebaseでプロジェクトを作っていきましょう！
下のURLからFirebaseのコンソール画面に飛んでください。
https://console.firebase.google.com/
「プロジェクトを作成」を押して進めましょう。
プロジェクト名を入力しましょう。
ここで注意！ここで入力したプロジェクト名が後のサブドメインになります。
(サブドメインとは...nattonz.web.appがURLだとすると、「nattonz」の部分です)
一度設定したら二度と変更することはできないので慎重に～
今回はプロジェクト名を「mytest-web」に設定しました。
下の鉛筆マークのとなりに設定したプロジェクト名がそのまま書いてあればOKです。
もし同じではなく、設定した名前の横にさらに何か付いていたりしたら既に同じサブドメインがほかの人に取られているということです。
そのまま「続行」を押すこともできますが、鉛筆マークのとなりに書いてある文字列がサブドメインとなります。
設定が完了したらチェックボックスにチェックを入れて「続行」を押しましょう。
これもそのまま「続行」
「アナリティクスの地域」を「日本」に設定し、下の二つのチェックボックスにチェックを入れ「プロジェクトを作成」をポチっと！
「続行」を押して、
この画面が出てきたらOKです！
次の工程に移ります～
3.Firebase CLIをダウンロード
次に、HTMLを先ほど作成したプロジェクトにアップロードするために「Firebase CLI」というソフトを使います。
下のURLからインストールしてください。
ソフトを使うOSに応じてインストールしてください♪
※今回は私の環境がWindowsなのでWindowsのインストール方法をご紹介します。
「Windows用のFirebase CLI バイナリ」をクリックしてダウンロード！
あらかじめフォルダを作っておき、そこにダウンロードしたものを入れましょう。
＜注意＞この時、フォルダの名前が日本語だとうまくいかないことがあります！
4.Firebase CLIでの設定
入れたらexeファイルを起動！
Windowsだとこんな画面が出るかもしれません。
「詳細情報」を押して、無視してそのまま起動しましょう。
また、ウイルス対策ソフトも反応することがありますが無視して起動！
すると真っ黒な背景に英語が表示されます。
クラッシュレポートなどを運営に送信するか聞かれますが、特に気にしなければそのままEnterキーを押しましょう。
(選択肢が表示されている場合、何も打たずにEnterを押した場合大文字の方が実行されます)
そのままログインして「許可」しましょう。
もしログイン画面が表示されずにコマンド入力待ち状態になってしまったら
firebase login
と入力してログインしてください。
ログイン出来たらまたあの黒い画面(Firebase CLI)に戻りましょう。
無事ログインできたら、コマンド入力待ち状態になります。
ここで
firebase init
と入力しましょう。
ここから色々設定していきます。
You're about to initialize a Firebase project in this directory:
<ファイルが生成されるディレクトリ>
? Are you ready to proceed? (Y/n)
ファイルが生成されるディレクトリがここでいいか？と聞かれています。
OKならそのままEnterを押してください。
ダメならFirebase CLIを閉じてファイルを生成したいディレクトリに先ほどのexeファイルを移動させてそこで再度起動させてください。
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
＞( ) Database: Deploy Firebase Realtime Database Rules
( ) Firestore: Deploy rules and create indexes for Firestore
( ) Functions: Configure and deploy Cloud Functions
( ) Hosting: Configure and deploy Firebase Hosting sites
( ) Storage: Deploy Cloud Storage security rules
( ) Emulators: Set up local emulators for Firebase features
ここで、下キーを三回押してスペースキーを押してください。
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
( ) Database: Deploy Firebase Realtime Database Rules
( ) Firestore: Deploy rules and create indexes for Firestore
( ) Functions: Configure and deploy Cloud Functions
＞(*) Hosting: Configure and deploy Firebase Hosting sites
( ) Storage: Deploy Cloud Storage security rules
( ) Emulators: Set up local emulators for Firebase features
こんな風になったらEnterキーを押してください。
=== 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
そのままEnterキー。
? Select a default Firebase project for this directory: (Use arow keys)
> mytest-web (mytest-web)
ここで、Firebaseで作ったプロジェクト名が表示されます。
私の方では「mytest-web (mytest-web)」と表示されています。
そのままEnterキーを押します。
=== 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)
htmlファイルを入れるフォルダ名を入力します。
何も入力しなければ「public」という名前でフォルダが作られます。
今回はそのままEnterキーを押します。
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
そのままEnterキー。
+ 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 CLIをそのままにしてフォルダを確認してみましょう。
HTMLのアップロード
1.アップロードするHTMLを入れる
exeファイルを入れたフォルダを見ます。
色々生成されていますね。
ここでHTML入れのpublicを開いてみると...
こんな感じで既にindex.htmlと404.htmlが生成されています。
ご存じの通り、index.htmlは最初に開かれるページで、404.htmlは表示するページがない際代わりに開かれるページです。
ここで、ちゃんとアップロードされるかどうか試してみるためにindex.htmlの中身を編集してみましょう。
<html>
<head>
<title>テストサイト</title>
</head>
<body>
テストサイト完成！
</body>
</html>
ものすごく雑ですがテストなのでこんなものでいいでしょう。
もう既にアップロードするHTMLが決まっている方はそれをこのpublicフォルダに入れてください。
では早速アップロードしてみましょう。
2.アップロードする
先ほど開きっぱなしにしたFirebase CLIの画面に戻って
firebase deploy
と入力してEnterキーを押します。
そしてしばらく待つとこんな画面が出ます。
早速アップロードしたHTMLが反映されているか確認するために一番下の行に表示されているURLにアクセス！
無事反映されているようです。
再度アップロードする際も同じように
firebase deploy
を入力しましょう。
※再度アップロードしても反映されない場合、キャッシュが原因の可能性があります。キャッシュを削除して再読み込みしてみてください。
3.ドメインについて
先ほどアクセスしたURLのドメイン(firebaseapp.com)以外にもう一つドメインがあります。
早速確認してみましょう。
まず、Firebaseのプロジェクトの画面に戻ってください。
左上の「開発」→「Hosting」をクリック
すると二種類のドメインのURLが表示されました。
この二つのURLのどちらからでもアップロードしたHTMLを開くことができます。
カスタムドメインを使用する際は右上の「カスタムドメインを追加」をクリックしましょう。
4.アップロードのサイズ制限
アップロードできるHTMLのサイズには制限があります。publicフォルダが1GBを超えないようにする必要があります。
現在どれほど容量を使っているかは先ほど開いたページの「使用状況」から確認することができます。
超えないように注意しながらアップロードしましょう♪
ということで、今回は以上です！
他にも様々な機能がFirebaseにはあるので、是非そちらも確認してみてください♪
Firebaseは開発者の間ではかなり有名なので調べてみれば結構色んな紹介サイトが見つかると思います。
ちなみに、Firebaseは実はウェブではなく基本的にアプリのサーバーとして使われていることが多いです。
私が作成しているアプリもほとんどFirebaseを利用しています♪
是非こちらも見ていってください！
サンショウウオ放置ゲーム公開！
どうも、Nattonzです。
今回は、新作アプリサンショウウオ放置ゲームを公開しました！
名前の通り放置ゲームです♪
サンショウウオを集めて強化してお金を稼ぐ！
このゲームではサンショウウオがお金を稼いできてくれますΣ（・□・；）
マップは六つあります...
全部解放してみてね♪
それぞれのマップには限定サンショウウオがいます！
放置すればサンショウウオは勝手に出現するので放置しよう！
ゲットしたサンショウウオは強化できるよ！
強化するとそれぞれが毎秒稼ぐお金が増えるよ！
目指せ億万長者♪
今回ももちろんランキング機能付き！
「草刈り放置ゲーム」と違ってランキング登録の際にダイヤは必要なし！
一分おきに自動的に自分の記録がランキング上に反映され、ランキングを見ている間も10秒おきに自動的に更新され誰がオンラインか分かります！
また、現在初公開を記念してガチャでイベントを開催中！
ウーパーサンショウウオが10倍で排出されるよ！
【#サンショウウオ放置ゲーム】
— Nattonz (@NattonzApps) March 15, 2020
<<初公開を記念してガチャでイベント発生中>>
アイコンキャラクター「【SR】ウーパーサンショウウオ」のガチャ排出率が10倍！(一回1ダイヤ)
この機会にラックアップしよう！#放置ゲーム #イベント #ガチャhttps://t.co/UZ4PiyG1kt pic.twitter.com/BsqbOEHuOV
また、今年三月末まで、インストールした人全員に50ダイヤ配布中！
是非インストールして遊んでみてください♪
SharID公開！
どうも、Nattonzです。
今回は、新作アプリSharIDを公開しました！
どんなアプリかといいますと、ゲームの招待IDを管理できるアプリです！
例えば、友達とゲーム内でフレンドになりたい！というときにフレンド招待IDを確認するために毎回ゲームを開けて長いロード時間を待つことがあると思います。
そんな長い待ち時間を解消するために「SharID」を作りました！
SharIDでは自分がプレイしているゲームを登録してゲーム内の名前やフレンド招待ID、クランの招待URLまで様々な情報を登録することができるアプリです！
もちろん、ゲームだけではなくTwitterやLineなどのアプリを登録することができます。
また、「仮登録」というシステムを使うことで、GooglePlayに登録されていないアプリでも登録することができます。
実は、「SharID」には自分のゲーム情報を登録する以外にもう一つ特徴があります！
それは、SharID内の「フォロー」システムです。
自分のゲーム情報を登録したらSharID内で公開すると、自分のことをフォローした人が簡単にそのゲーム情報を見ることができる！というシステムです。
もちろん、フォローをしていなくても「グローバル検索」(指定したアプリの情報を公開しているユーザーを検索できる)から自分の登録した情報を見てもらうことができます。
また、現在(2020/01/19)、Twitterにて「お年玉企画」を開催中！
ツイートをリツイートすると「SharID」内でプロモーションに使えるポイントがもらえます！
【2020年 #お年玉 企画！】
— Nattonz (@NattonzApps) January 5, 2020
🎍明けましておめでとうございます🎍
突然ですが、「草刈り放置ゲーム」とゲーム招待ID管理＆共有アプリ「SharID」でお年玉企画！
草刈り放置ゲーム:全員に50ダイヤ + (5ダイヤ×リツイート数)
SharID:リツイートした方全員に500ポイント！
#プレゼント
締切:1/31(金)
この企画は1月末までなのでお早めに！
以上です！
ゲーム招待IDなどの情報を一括管理したい方や色んな人に公開したい方は是非「SharID」をインストールしてみてください！
ワードウルフメーカーのレイアウトを変えてみました！
どうも、Nattonzです。
突然ですが、前までのレイアウトが雑だったので今回は変えてみました！
今回は影とツールバーを利用し、いい感じに仕上げました。
他の画面のレイアウトも変えてアップデートしましたので、ほかのレイアウトも見たい方は是非下のリンクをクリックしてください♪
また、レイアウトの変更と同時に、様々な重要な機能をプロフィール画面に入れてみました。プロフィール画面では新たにニックネームの変更もできるようになっています。
今後もよろしくお願いします！
Any計算機のインストール数500突破！
どうも、Nattonzです。
今回はAny計算機のインストール数が500を突破したという報告です♪
インストールしてくださった皆様ありがとうございます。
今後もAny計算機、またNattonzをよろしくお願いします！
■
どうも、Nattonzです。
今回は新しいアプリをリリースしたので、報告しに来ました！
その名も「ワードウルフメーカー」！
名前の通り、ワードウルフのワードを作れるアプリです。
ワードウルフを知らない方は是非調べてみてください！
三人以上から遊べる楽しい遊びです♪
今まで、ワードウルフをプレイするだけのアプリはありましたが、
「作る」というアプリはなかったので、作ってみました。
ワードウルフメーカーでは作ったワードをアプリ内に投稿でき、
そのワードを他の人にプレイしてもらうことができます。
また、そのワードをいつでも何回プレイされたのか、何回高評価をされたのかを確認できます。
また、プレイするときも、
三つのフィルターがあります。
①高評価フィルター
②ワードメーカーフィルター
③ワードフィルター
の三つです。
これらのフィルターによってワードを限定することができます。
ワードをプレイし終わるとそのワードのプレイ回数情報やメーカー情報が表示され、評価することができます。
ワードウルフが好きな方は是非インストールしてみてください！
