paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

クリック1発でFirebaseにデプロイ!無料のクラウドIDE「Glitch」の新機能を使ってみた!

f:id:paiza:20190220123136j:plain
どうも、まさとらん(@0310lan)です!

今回はブラウザ上でJavaScript / Node.jsの開発環境を構築できる無料のクラウドIDE「Glitch」の新機能をご紹介しようと思います!

その新機能というのは、Glitchから直接Firebaseにプロジェクトを1発でデプロイできる機能のことで、面倒な作業はすべてGlitchが自動的にしてくれるので非常に重宝します。

これにより誰でも簡単にFirebaseプロジェクトをブラウザだけで構築できるようになるので、ぜひ参考にしてみてください!

Glitch

f:id:paiza:20190220123254j:plain

記事後半で、Glitchのコードエディタについて詳細を解説しているので合わせて参考にしてみてください。

■「Glitch」を使ったFirebaseのデプロイ機能について

それでは、クラウドIDE「Glitch」が提供するFirebaseのデプロイ機能がどのようなものなのかを実際に見てみましょう!

今回は、デフォルトですでに用意されているGlitchのプロジェクトをFIrebaseにデプロイしてみます。


…と、言っても方法はとても簡単です!

「firebase.json」ファイルを追加すると自動的に表示される「デプロイボタン」をクリックするだけなんです!

f:id:paiza:20190220131406j:plain

必要なデプロイ作業やコマンドの実行などはすべてGlitch側で自動的にやってくれるので、やることは数秒待つだけ…という手軽さです。


最後に「View Firebase App」ボタンをクリックしてみましょう!

f:id:paiza:20190220131421j:plain


すると、Firebase上にホスティングされたGlitchのプロジェクトが公開されているのが分かります!

f:id:paiza:20190220131605j:plain

あとはこのURLをSNSやメールでシェアすれば、誰でもこのプロジェクトをブラウザから閲覧することができるというわけです。

また、プロジェクトのコードを編集したら再度、デプロイボタンを1クリックするだけでFirebaseのプロジェクトも自動的に更新されます。

このような便利な機能ですが、初めて利用する場合は少し初期設定が必要になるのでもう少し詳しく見ていくことにしましょう!

■Firebaseデプロイ機能を使うための初期設定

それでは、最初に必要となる初期設定について見ていきましょう!

必要な手順は基本的に以下の2つです。

  • FIrebaseプロジェクトの作成
  • firebase.jsonの作成

それぞれ順番に見ていきましょう!


まずはGlitchと連携させるFirebaseプロジェクトを作成します。

そこで、Firebaseコンソールにアクセスして新規プロジェクトを作成しましょう!

Firebaseコンソール

f:id:paiza:20190220131743j:plain


好きなプロジェクト名などの設定をして実行します。

f:id:paiza:20190220131759j:plain


プロジェクトの詳細画面が表示されたらOKです!

f:id:paiza:20190220131816j:plain

Firebase側の設定はこれで終了です。


Glitchのエディタに戻り「+ New File」ボタンからfirebase.jsonファイルを新規に作成します。

f:id:paiza:20190220131833j:plain


このfirebase.jsonの中身ですが、公式サイトに書いている通りのデフォルト構成をまずは記述しておけば問題ありません。

{
 "hosting": {
   "public": "public",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ]
 }
}


f:id:paiza:20190220132110j:plain

注意点としては、公開用のディレクトリを「public」にしている点です。


そのためindex.htmlのディレクトリもpublicにしておきましょう!

f:id:paiza:20190220132129j:plain

(※ファイル名を「views/index.html」から「public/index.html」に変更します)


最後に「デプロイボタン」をクリックします!

f:id:paiza:20190220132147j:plain


初回のみ、Googleアカウントと連携する必要があり、そのあとに先ほど作成したFirebaseプロジェクトを選択します。

f:id:paiza:20190220132207j:plain

これですべての初期設定が完了です!

これ以降は、プログラムを編集したら1クリックでFirebaseにデプロイできるようになります。

■クラウドIDE「Glitch」の特徴について

さて、ブラウザ上からFirebaseプロジェクトを作成できるようになったところで、Glitchの便利な機能についても少し触れておきます!

Glitchは、もともとHTML / CSS / JavaScriptによるフロントエンド開発だけでなく、Node.jsによるサーバサイド開発も可能な統合エディタです。

f:id:paiza:20190220132300j:plain


そのためpackage.jsonファイルから1クリックでNode.jsのパッケージを簡単にインストールできる機能が備わっています。

f:id:paiza:20190220132342j:plain


さらに、ターミナルも搭載されているのでコマンドによる実行もできます。

f:id:paiza:20190220132400j:plain

実は、今回のFirebaseデプロイ機能もコマンドから実行することで同じようなことが可能です。


また、複数人でコラボできるシェア機能も充実しています。

f:id:paiza:20190220132413j:plain

エディタを共有することで同時に編集できるうえ、見せたくないファイルを設定することも可能です。(プライベートにすることもできます)


プロジェクトのソースコードは自動的にバージョン管理も行われます。

f:id:paiza:20190220132432j:plain

バージョンをタイムラインで可視化してくれるので、簡単に過去の状態に巻き戻すことが可能なうえ、リポジトリをインポートした場合は履歴も付与されます。


ちなみに、エディタ自体をそのままWebページに埋め込む機能も用意されています。

f:id:paiza:20190220132514j:plain

自分のブログやWebサイトにエディタを埋め込んだら、ソースコードや実行画面を簡単にシェアできるので便利です。

(※サーバーを起動してそのままGlitch上で公開することも可能)

ログインすることで、プロジェクトを永続的に管理したりテーマカラーを変更したりGitHubへのエクスポートやインポートもできるようになるので便利ですよ。

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

現在、20万ユーザー突破キャンペーンとして、2019年2月25日までの期間限定でpaizaラーニングの全レッスンを無料公開中です!

キャンペーン期間中は人気の「JavaScript入門編」、「Webアプリ開発入門 Django編」、そして「Python×AI・機械学習入門編」など有料プラン対象講座を含むすべての学習動画が無料で受講できます。

■まとめ

今回は、クラウドIDEの「Glitch」から1発でFirebaseにデプロイできる機能についてご紹介しました。

Firebaseを活用することで、ログイン認証やデータベースなどさまざまな機能が使えるようになるので活用範囲が非常に広くなると思います。

Glitchと組み合わせることで、ブラウザからすぐに開発を始められるようになるのでさらにスムーズな作業が可能になるでしょう。

ぜひみなさんも楽しいWeb開発を始めてみてください!





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud