Google Driveのホスティングサービスが終了したのでFirebaseへ乗り換えてみる

Google Driveのホスティングが使えなくなったため、このブログで使っていたスクリプトやCSSの置き場所が無くなってしまいました。代わりの場所を見つけなくてはなりません。

基本無料で、SSLでアクセスできて、と探します。だんだんと無料サービスが無くなってきてますね。
候補としてGitHubとFirebaseを考えました。
FirebaseはGoogleのサービスです。Webアプリ管理用のサービスっぽいです。最近はなんのサービスだか理解するのも困難になってます。
ホスティングもできるようなので試しに使ってみましょう。





Google Driveのホスティングサービスの代わりを探しました。Googleの案内に代替案の紹介があります。

Reminder: Turn down of Google Drive web hosting coming soon
July 12, 2016
"For those who haven’t switched yet, please consider the following alternatives."
無料で使えそうなFirebaseを使ってみます。

Firebaseでホスティング

Firebase https://firebase.google.com/

そもそもFirebaseって何なのでしょうか?ページを眺めると次のように書いてあります。
Firebase is a mobile platform that helps you quickly develop high-quality apps, grow your user base, and earn more money. 
モバイルアプリ開発用プラットフォームだそうです。何それ?
今回はホスティング目当てなので他の機能は目もくれずに調べます。ページの上にPricingなるタブがあります。え?お金かかるの?
大丈夫です。無料のSPARKプランがあります。SSLもカスタムドメインも使えるようです。ホスティングの容量の制限は次の通り。
Hosting
GB stored    1 GB
GB downloaded 10 GB
どのくらいのアクセス数に相当するでしょうか?
簡単なスクリプトやCSSなどテキストなら1回に50kBほどでしょうか。すると20万回ダウンロードできる計算です。1MBなら1万回です。弱小ブログなら問題ないですね。
最小コードを書くマニアな方は腕の見せ所です。誰も見てないでしょうが・・・。
ところで per Month って書いてないけど一月当たりでいいんですよね?トータルじゃないですよね!

とにかく使ってみましょう。・・・どうすればいいのでしょうか。

Googleのアカウントがあればすぐに使えます。
プロジェクト名を入れて登録しましょう。

ホスティングを使えるようにする

プロジェクトのダッシュボードを開きます。


メニューにHostingとあるのでクリックしてみましょう。

すると何やら表示されます。


スタートガイドとか書いてありますね。素直に従っていきます。

すると次の画面は・・・


おっっと、もう一目見ただけでブラウザを閉じそうになります。何やら面倒くさい感じが!
ですが、やってみたら簡単でした。あきらめないでください。

これから何をやるのか簡単に説明しておきます。私は最初何をやっているかわからず進めましたが、Firebaseでホスティングサービスを使うには少し特殊な方法が使われています。Google Driveのようにブラウザ画面でちょちょいとファイルをアップロードするのとは違います。

自分のパソコンのフォルダにホストしたいファイルを置いておきます。Deployというコマンドを使うとそのフォルダの中身をFirebaseのホスティングサーバへ送ってくれます。サーバに送られたファイルは一般に公開されます。
最初の設定では、自分のパソコンからFirebaseにつながるようにして、自分のパソコンの中に公開するファイルを置く場所を作り、必要ならばサーバへ展開するという作業になります。

最初は、この面倒くさい作業を簡単に実行するためのスクリプトを動かす環境を作ります。

Node.jsのインストール

最初にNode.jsをインストールしろと書いてあります。黙って従います。


なにか2種類ありますね。どっちを入れるんでしょうか?
"Recommended For Most Users"と書いてある方を入れました。
ダウンロードしたら動かしてインストールします。

インストールが完了したらコマンドラインツールとやらを動かします。


スタートメニューのNode.jsの
"Node.js command prompt"でいいようです。

Firebaseツールのインストール

※2016/10/15 修正
この作業は通常のコマンドプロンプトで行った方が良いようです。Node.jsのではエラーが生じる場合があります。
How to resolve 'npm should be run outside of the node repl, in your normal shell' / Stack Overflow
 James Lawruk
"For Windows users, run npm commands from the Command Prompt (cmd.exe), not Node.Js (node.exe). So your "normal shell" is cmd.exe. (I agree this message can be confusing for a Windows, Node newbie.)"

先ほどの画面に出ていたコマンドを入れます。

>npm install -g firebase-tools

いっぱい文字が出た後に終わります。

やっと次の指示へ進めます。

プロジェクト用フォルダの設定

※2016/10/15 追記
ここからの作業は"Node.js command prompt"で行います。

次へをクリックしましょう。


またまた、ブラウザを閉じたくなる画面が出ます。画面右下に"終了"の文字が見えます。我慢して続けましょう。

ここでは先ほど少し説明したFirebaseへの接続、ローカルでのファイル置き場所としてのプロジェクトフォルダの指定とサーバへの展開を行います。

順番にやってみましょう。まずはログイン。コマンドを打ちます。
ファイアウォールのセキュリティ警告が出たら許可します。Firebaseへつながるとアクセス許可を求められるので許可します。

>firebase login
? Allow Firebase to collect anonymous CLI usage information? (Y/n)

なにやら聞いてきました。最近おなじみの情報収集を許可すかですね。お好きな方を。
ログインに成功すると次のように表示されます。

Waiting for authentication...
+  Success! Logged in as xxxx@gmail.com

次はホスティングに関する設定になります。自分のパソコンでFirebaseのプロジェクトとしてファイルを置いておく場所を決めます。そのフォルダの下にホスティングするファイルを置くフォルダが作られます。
例えばマイドキュメントの下とかですかね。エクスプローラで普通にフォルダを作ってください。
フォルダを作ったら"Node.js command prompt"でそのフォルダへ移動します。コマンドプロンプトの命令は使えます。cdで移動してください。

移動したら次のinitコマンドを実行します。このコマンドを実行したフォルダがFirebaseのプロジェクトと関連付けられます。
C:\xxx>firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\xxx

Before we get started, keep in mind:

  * You are initializing your home directory as a Firebase project

? Are you ready to proceed? (Y/n)
フォルダの場所を確認して、良ければ"y"と入力しましょう。

次にどんな機能を割り当てるか聞かれます。
? What Firebase CLI features do you want to setup for this folder?
 (*) Database: Deploy Firebase Realtime Database Rules
>(*) Hosting: Configure and deploy Firebase Hosting sites

DatabaseとHostingが最初からチェックされています。カーソルの上下で選択、スペースキーでチェックの切り替えができます。
ホスティングだけが目的ならDatabaseは要らないでしょう。でも良くわからないのでデフォルトのまま、素直にエンターを押しました。

次にデフォルトのプロジェクトを選択します。Firebaseの登録時に入れたプロジェクト名を選んでエンターを押します。
? What Firebase project do you want to associate as default?
  [don't setup a default project]
> YOUR_PROJECT (yyyyyy-xxxxx)
  [create a new project]

次はデータベースの設定を聞かれます。デフォルトでエンターを押します。

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? (database.rules.json)

次はホスティングするファイル用フォルダの名前を聞かれます。initコマンドを起動したフォルダの下にホスティング用フォルダが作られます。
デフォルトでは"public"ができます。他の名前にしたければここで入れます。

そしてそのフォルダには初期ファイルが2つ作られます。index.htmlと404.htmlです。
上書きするか聞かれます。デフォルトの"n"で良いでしょう。

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
+  Wrote public/404.html
+  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!

これでホスティングを使う準備は完了です。

まだ"deploy"ってのが残ってますね。

ファイルを公開する

ホスティングするファイルをどうやってFirebaseに置くの? ここで戸惑う方も多いと思います。FirebaseはWebブラウザで動くダッシュボードがあります。ダッシュボードでアップロードできるのかなぁ・・・? 残念! できません!

公開したいファイルは、エクスプローラで先ほど指定したフォルダに置きます。今まで説明した手順に従うとマイドキュメントの下のほにゃららフォルダの下のpublicフォルダです。
このpublicフォルダにファイルをコピーしましょう。

これだけではFirebaseには反映されません。Firebaseに反映させるのが"deploy"コマンドです。

試しに何かpublicフォルダにテキストファイルを置いてください。例えば"YourSampleFile.txt"というファイルだとします。
"Node.js command prompt"でdeployします。

C:\xxx>firebase deploy

=== Deploying to 'yyyyyy-xxxxx'...

i  deploying hosting
+  database: rules ready to deploy.
i  hosting: preparing public directory for upload...
+  hosting: public folder uploaded successfully
+  hosting: 2 files uploaded successfully
i  starting release process (may take several minutes)...

+  Deploy complete!

Hosting Site: https://yyyyyy-xxxxx.firebaseapp.com
Dashboard: https://console.firebase.google.com/project/yyyyyy-xxxxx/overview

Visit the URL above or run firebase open

これでファイルがFirebaseのサーバへ展開されました。もう公開されています。

ブラウザで 例えば
https://yyyyyy-xxxxx.firebaseapp.com/YourSampleFile.txt
が開ければ成功です。

今後のファイルの修正・追加や削除は自分のパソコンのpublicフォルダで行います。そしてプロジェクト用フォルダでdeployコマンドを実行します。"Node.js command prompt"を使わず普通のコマンドプロンプトでも良いようです。プロジェクト用フォルダに"firebase deploy"と書いたバッチファイルを作ると良いでしょう。

initコマンドは一度だけやればいいです。もしも違う場所にプロジェクト用フォルダを移したい場合は新しいフォルダでinitコマンドを実行しましょう。

こちらのビデオも参考になるでしょう。


まとめ

半ば緊急対応ですが、どうやらFirebaseでホスティングを使えるようになったようです。
容量や通信量制限がありますが弱小ブログには十分です。httpsで呼べるのでSEO的にも良いですね。もしも大化けしたら通信量に合わせたプランに変更すれば良いでしょう。

しばらくはFirebaseで様子を見てみます。Google Driveに比べてファイルの更新が面倒なのが欠点ですね。ファイルの更新はほとんどないので使い方を忘れそうです。

このサービスはいつまで続いてくれるだろうか・・・その前にBloggerの方が怪しい?

コメント

  1. わかったわ!これは魔道書ね!(理解するのが大変だと思った人)

    返信削除
    返信
    1. 詠唱が難しいです。
      魔法使いたちには呪文を簡単にする術式を作ってほしいですね。

      削除
  2. (´・ω・`)エラー出まくりだから……諦めて他の方法で妥協しますお……

    返信削除
    返信
    1. Node.jsさえ動けばほとんどエンター押すだけでいけるはずなんですけどねぇ。コマンド入力例でちょっと悩んだんですけど、コマンドの先頭に"$"とか">"とか入れちゃってますか?英文字から入れればOKですよ。

      削除
    2. (´・ω・`)$を外しても
      rqm should de run outside of the node repl, in your normal shellとか出て、先に進まない現実……

      削除
    3. npmではネットからツールをダウンロードします。ファイヤーウォールの許可がないのかも。

      削除
    4. (´・ω・`)ファイヤーウォール関連のサイト見て、全部やっても、何やってもNode.jsからエラーでるから、完全に諦めたパルメ

      (ノ゚ω゚)(ノ゚ω゚)諦めるなよ!

      削除
    5. npmは普通のコマンドプロンプトで実行した方が良いようです。ついでに管理者としてコマンドプロンプトを開くと安心かも。
      こちらが参考になるかも。
      http://stackoverflow.com/questions/24476805/how-to-resolve-npm-should-be-run-outside-of-the-node-repl-in-your-normal-shell
      私もどっちでコマンドを入れればいいか迷ってました。記事の手順を修正した方がよいのだろうか。
      エラーメッセージもちゃんと見ると、node replの外でnpmを動かせ、と書いてある。node replって何!? と思うけど。

      削除
    6. (´・ω・`)おお、動いたっ……!
      コマンドプロンプトでやったら動いたっ……!

      削除
    7. Error:no project active Run with

      (´・ω・`)firebase deployで入力すると出る、このラスボスさんを倒せば。きっと全て解決だお……

      削除
    8. Error: No project active. Run with --project or define an alias by
      running firebase use --add

      (´・ω・`)日本語サイト検索で探しても、同じエラーがないせいか一件も出てこない……

      削除
    9. 活発なプロジェクトでない。
      走られます-重砲基地使用を走らせることによって、別名を計画するか、定めます ― 加わる ―

      (´・ω・`)翻訳すると、謎の暗号さんが出てきてなんか面白い

      削除
    10. https://translate.googleusercontent.com/translate_c?depth=1&hl=ja&prev=search&rurl=translate.google.co.jp&sl=en&u=http://stackoverflow.com/questions/37392166/firebase-run-firebase-use-default-to-activate-project-app-name&usg=ALkJrhiyk_n-Bj4YquWz-zQyfKHQj3JUgQ


      (´・ω・`)英語のこのサイトを見て、publicって入力したら、なんとかなった。

      削除
    11. (´・ω・`)ファイルを全部up。
      しかし5ファイルがアップロードされている状態が分かるだけで、そのページの開き方が分からないパルメ

      デプロイの履歴
      ステータス 時刻 デプロイ ファイル
      grade
      現在

      2016/10/14
      15:58

      suliruku94@gmail.com
      90mrwH
      5

      削除
    12. https://sonna-5a230.firebaseapp.com/

      できた、ありがとう。
      一つ一つ確認するの大変だから、全部リンクした。

      削除



    13. (´・ω・`)これの存在忘れていた……やっと動いた……

      削除
    14. 詠唱成功術式発動おめでとうございます。私の手順のせいで混乱させてしまいましたね。再確認しにくい手順なのが困るのですが記事も少し修正します。
      プロジェクト名はFirebaseのアカウントを作るときに入れたのをinit時に選択するだけです。一度成功した後に手順をもう一度読み直すと何をしていたか分かりやすくなると思います。

      削除
    15. (´;ω;`)一応、自己解決したけど報告します。
      一度に表示するコメント数が多すぎると、エラーになるようです。



      isMobile: /[?&](m=1)[&]?/g.test(location.href),
      itemCount: 50, //大きな数字を入れると表示されない。
      // daysNew: 7,
      // timeout: 1500




      (´;ω;`)他の最新コメントのシステムでも試してみましたが、50と設定したのに25個のコメントが表示されるから……blooger側が負担を軽減するために、仕様を変更したのかなぁと思いました。

      削除
    16. 報告ありがとうございます。
      feedの件数を多くすると表示に時間がかかるのでお勧めしませんが、ユーザとのお手軽コミュニケーション用に使っておられるのですね。
      これが関係あるかもしれません。フィードの数が150件になってしまったようです。
      http://upa-pc.blogspot.jp/2015/12/blogger-feed-500to150.html
      フィード数が要求した数に満たなかった場合の処理をしてなかったかもしれません。見直してみます。とはいえ、もう忘れちゃったかも・・・

      削除
    17. コメント数を大きくしてもエラーになりそうな処理が見当たりませんでした。
      コメント取得数は500件で制限をしています。取得できた件数に合わせて処理をするので150件で返ってきても問題ないと思われます。
      コメント先の記事タイトルを取得するためBloggerへのリクエストが記事毎に発生します。多くの記事へのコメントがあるとタイムアウトする可能性も考えられます。現在は1500 15秒です。
      無料のホスティングサービスが無くなってきたり、最近は通信量を減らそうとしてるみたいですね。

      削除
    18. (´;ω;`)どんどん、表示されるコメント数が減らされていく。
      たぶん、通信量が多いとか、そういうのが原因だと思います。


      今まで、50件表示しても大丈夫。

      つい先日、25件


      いま、16件以上の設定にすると、作動しない。



      現在の設定
      isMobile: /[?&](m=1)[&]?/g.test(location.href),
      itemCount: 15,
      // daysNew: 7,
      // timeout: 5000

      削除
    19. こちらで試すと21件でした。start-indexを指定しても残りのコメントは取得できません。投稿は150件出ます。
      検索しても似たような症状の報告は見あたりません。しばらくウォッチします。何が起きてるんでしょうね。
      前回のタイムアウトは1.5秒の間違えでした。5000なら5秒です。

      削除
    20. URLを変えたら件数増えました。コメント取得のURLを次の様にしてみて下さい。
      https://www.blogger.com/feeds/blogID/comments/default
      "www.blogger.com"にして、"blogID"をご自分のブログの番号にします。番号は管理画面のURLでわかると思います。

      削除
    21. jQuery(document).ready(function () {
      jQuery('#TRC').ThreadedRecentComments({
      yourURL: "www.blogger.com/feeds/3485498547150525198/comments/default",
      isMobile: /[?&](m=1)[&]?/g.test(location.href),
      itemCount: 15,
      // daysNew: 7,
      // timeout: 5000


       (´;ω;`)色々と試してみたけど、タイムエラーか、Uncaught Error.がでて全く動かない。
      迷惑かけてすいません。




      https://www.blogger.com/feeds/3485498547150525198/comments/default

      削除
    22. Internet explorerで
      https://www.blogger.com/feeds/3485498547150525198/comments/default?max-results=100
      と入れると100件見れますね。
      コード見直してみます。

      削除
    23. あっ、URLの決め打ちをしてました。URLを変更できないですね。
      修正は可能です。少し時間ください。

      削除
    24. コードを修正してVer.1.40としました。ダウンロードして試してみてください。
      https://drive.google.com/open?id=0B_bSun58DClid1N4SGFuaURocjg

      ファイル名は
      ThreadedRecentCommentsV140_mini.js
      です。
      firebaseの使い方忘れていました・・・deployしてください。
      ブログから呼び出すjsファイル名の変更をお願いします。

      yourURLの指定は無くなります。代わりに

      BlogID: "123456789012345678",
      itemCount: 10,
      daysNew: 7,

      というように BlogID を数字だけ空白無しで指定してください。

      タイムアウトはミリ秒指定です。混乱して間違えまくりでした。
      しばらく様子をみてから修正記事を書く予定です。昔の記事の表示も壊れ気味でしたね。ごめんなさい。

      削除
    25. (´;ω;`)やった。何回か導入に失敗したけど、たくさんコメントが表示できる。
      ありがとうございます。たぶん、プログラムの改造とかで何十時間も迷惑かけたと思います。

      削除
    26. こちらこそバグ出しの協力ありがとうございました。軽い使い方だと気づかない問題がありますから助かります。
      ですが、今回のURLは古い仕様のようなので近いうちに問題が起きるかもしれません。Ver2へ向けて新しい情報を仕入れておきます。

      削除
    27. (´;ω;`)両方のサイトで、最新コメントにタイムアウトエラーが表示されて動かなくなっちゃった……

      削除
    28. (´;ω;`)と思ったら、表示されるようになった。
      たぶん、時間帯によってbloogerの回線が重くなったり、軽かったり、それが影響しているのかも。

      削除
    29. タイムアウト時間を30秒くらいにしていいと思います。
      timeout 30000 ,
      ですね。利用者側でなかなか表示されないというのは変わりませんが・・・

      削除
  3. http://suliruku.blogspot.jp/p/1#HTML10

    (´;ω;`)ありがとう

    返信削除
    返信
    1. (^◇^)にぎやかでうらやましいです

      削除
    2. (´;ω;`)サイトの雰囲気がガラリッと変わった……。
      (サイドバーに色々と置きたい派の人)

      削除
    3. (´;ω;`)あと最新コメントは、やはり、blooger側から規制でもかかっているのか。
      毎回、修正しても修正しても、しばらくすると、10記事までしか表示できないようになっている。(前は20記事くらいまで表示できたけど、どんどん表示できる数が減ってる)

      削除
    4. 新しくレスポンシブなテンプレートが追加されたので試してます。ますますスマホユーザが増えるので縦長対応をせざる得ない流れが。
      古い記事は表示がおかしいかも。何をしたか憶えてない・・・
      コメントの吹き出しがスマホの幅に合ってないことに気づいてしまいました。CSSを修正してるんですが、これまたロストテクノロジー (^^ゞ

      削除
    5. 私のところでパルメさんのフィードをIEで見ると150件見えます。時間当たりの転送量とか制限があるんでしょうかね。
      Google Feedbunnerというフィードを加工できるGoogle謹製サービスがあります。これでバッファのようにワンクッション入れると良いかもしれません。
      TRC V.1.4ではFeedbunnerのURLを入れられないので、まずはFeedbunnerに登録しIEで開いて様子を見てはいかがでしょうか。行けそうならコード少し変えますよ。

      削除
    6. パルメさんサイトのソースのぞいてみました。
      // timeout: 10000
      タイムアウト時間を指定するときは頭の"//"を消してください。コメント行の印です。デフォルト15秒が設定されています。タイムアウトは30000(30秒)くらいにしていいと思います。

      削除
    7. >TRC V.1.4ではFeedbunnerのURLを入れられないので、まずはFeedbunnerに登録しIEで開いて様子を見てはいかがでしょうか。行けそうならコード少し変えますよ。


      (´;ω;`)なんとか、イケそうな感じです。

      http://feeds.feedburner.com/blogger/UJOB
      (FeedBurnerフィード)


      削除
    8. feedbunnerの出力ではコメントの親子関係の情報が異なる形に加工されてしまうようです。親コメントを見つける手掛かりが消えちゃう?
      feedbunnerの設定や他の方法など検討しないといけないようなので時間がかかりそうです。

      削除
    9. (´;ω;`)ありがとうございます。
      しばらくは、FeedBurnerフィードを使ったコレと併用する事で、やっていこうと思います。

      http://suliruku.blogspot.jp/p/blog-page_29.html

      削除
    10. ブラウザのキャッシュのせいで原因がわかりにくいですね。
      V.140は古い仕様を使っているので、V.132へ戻して改めて動作を見てみます。
      パルメさんのフィードをテストで表示しています。1週間ほどおいておきますので時々見てみてください。
      https://signal-flag-z.blogspot.jp/p/test_4.html
      問題が起きないのでデバッグにならない・・・

      削除
  4. (´・ω・`)ちょっと報告
    Firebase、セキュリティルールを変更しないと、自働で無効化される仕様になったらしいので、

    {
    "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
    }
    }

    ↓ (´・ω・`)こんな感じに変更しました

    {
    "rules": {
    ".read": "auth != true",
    ".write": "auth != true"
    }
    }

    返信削除
    返信
    1. ありがとうございます。
      なにかFirebaseからメールが来ていたけど使い方をすっかり忘れて放置してました。
      特に何もしていませんが、まだ動いているようです。

      削除

コメントを投稿

最近のコメント

Threaded Recent Comments will be here.