paiza開発日誌

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

今すぐ始められる!FIrebaseをブログのCMSに変える「Flamelink」を使ってみた!

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

今回は、Googleが提供するバックエンドサービスのFirebaseを誰でも簡単に扱えるブログのCMSに変えてくれる便利なWebサービスをご紹介します!

使い方によってはWordPressよりも簡単に記事コンテンツを管理できて、JavaScriptから自由に操作できる柔軟性も大きな魅力です。

なお、JavaScriptはpaizaラーニングの「JavaScript入門編」(完全無料)で学ぶことができます。そちらも合わせてチェックしてみてください。

Flamelink

f:id:paiza:20181121111232j:plain

Firebaseとの連携を含めて、導入するための手順が少し多いのでこのあたりを中心に解説していきます!

■「Flamelink」の使い方

まずは、「Flamelink」のトップページにアクセスして画面上部にあるボタンをクリックします。

f:id:paiza:20181121111323j:plain


「ユーザー登録フォーム」が表示されるので、メールアドレスやパスワードを設定しましょう。

f:id:paiza:20181121111342j:plain

登録したメール宛に認証用のリンクが送られてくるのでクリックして再度ログインします。


すると、Flamelinkの初期設定画面が表示されます!

f:id:paiza:20181121111409j:plain


ここでFlamelinkの画面はこのままにしておいて、新規タブでFirebaseを開いてプロジェクトを作成します。

f:id:paiza:20181121111432j:plain


任意のプロジェクト名を設定しておきましょう。

f:id:paiza:20181121111447j:plain


次に、「Storage」メニューの「スタートガイド」をクリックします。

f:id:paiza:20181121111504j:plain


ルールの設定はあとで書き換えるので、このまま「OK」をクリック!

f:id:paiza:20181121111519j:plain

これで、ひとまず「Flamelink」と「Firebase」の準備ができました。

ここからは、両方のサービスを行ったり来たりしながら連携作業をするので混乱しないように進めていきましょう!

■「Flamelink」と「Firebase」の連携方法

まず最初はFirebaseのプロジェクト画面から「コード」アイコンをクリックします。

f:id:paiza:20181121111609j:plain


設定用のコードが表示されるのでコピーしておきましょう。

f:id:paiza:20181121111628j:plain


次にFlamelinkの画面に戻り、先ほどコピーしたコードをそのまま貼り付けます!

f:id:paiza:20181121111647j:plain


そして、「REALTIME DATABASE」を選択して1つ目のチェックを入れます。

f:id:paiza:20181121111702j:plain

(赤字の注意書きはFirebase側のバグについてなのですがこれは後述します…)


Firebaseの画面で「Database」メニューにあるRealtime Databaseの作成ボタンをクリックします。

f:id:paiza:20181121111726j:plain


ルールについてはあとで書き換えるので、ひとまずそのまま「有効にする」ボタンをクリックします。

f:id:paiza:20181121111741j:plain


データベースが作成できたら、最初に何でもいいので適当なテキストデータを1つ入力しておいてください。

f:id:paiza:20181121111755j:plain

これは、2018年11月時点で何も入力しないままだとRealtime Databaseの初期設定が消えるというバグが発生しているためです。(近いうちにこの問題は解消されると思います…)


Flamelinkの画面に戻り、2つ目のチェックを入れて画面右側のコピーボタンをクリック!

f:id:paiza:20181121111818j:plain


先ほど作成したFirebaseのデータベースにある「ルール」の箇所に、コピーしたコードを貼り付けます。

f:id:paiza:20181121111836j:plain

これでデータベースとそのデータを扱うためのルール設定が完了しました。


Flamelinkの画面で3つ目のチェックを入れて、同じくコピーボタンをクリックします!

f:id:paiza:20181121111854j:plain


Firebaseの「Storage」メニューにあるルールの箇所に、コピーしたコードを貼り付けます。

f:id:paiza:20181121111911j:plain

これにより、ストレージを扱うためのルール設定が完了します。


Flamelinkの画面に戻り、最後の4つ目にチェックを入れます。

f:id:paiza:20181121111945j:plain


Firebaseの「Authentication」メニューにある「ログイン方法」タブを開き、メール・パスワードの項目をクリックします。

f:id:paiza:20181121112005j:plain


「有効にする」をチェックして保存します。

f:id:paiza:20181121112018j:plain


これですべての準備が完了したので、「ADD PROJECT」ボタンをクリックします!

f:id:paiza:20181121112037j:plain

■スキーマ(データ構造)の作り方

ここからは、簡単なブログ記事を作成してWebに表示するまでを見ていきましょう!

まずは、Flamelinkのダッシュボード画面から先ほど作成したプロジェクトにログインします。

f:id:paiza:20181121112139j:plain

(初回のみパスワード設定画面が表示されます…)


最初にデータの構造を作成するために「スキーマ」を作る必要があるので、「NEW SCHEMA」をクリックします。

f:id:paiza:20181121112156j:plain


分かりやすい「スキーマ名称」を決めておきましょう!(今回は「myposts」にしておきました)

f:id:paiza:20181121112220j:plain


「Add Fields」タブに切り替えると、さまざまなデータ形式があらかじめいくつかのブロックにまとめられているのが分かります。

f:id:paiza:20181121112236j:plain

このブロックを選ぶだけで、メール・時間・メディア・テキスト…などのデータを簡単に扱えるようになっています。


さらに、画面下部にはテンプレートも用意されており、今回作るブログに最適化された形式もあるのでこちらをドラッグ&ドロップしましょう!

f:id:paiza:20181121112335j:plain


すると、記事のタイトルや日付・テキストエディタなどが配置されたのが分かります。

f:id:paiza:20181121112353j:plain

各ブロックは選択することで詳細な設定も可能で、不要なものがあれば削除して整理することもできます。

(今回は簡単にするため「タイトル」「日付」「テキストエディタ」だけを残しました)

■サンプル記事を投稿しよう!

スキーマの作成ができたので、今度は実際に記事を書いてみましょう!

「Content」メニューを開くと先ほど作ったスキーマが表示されるのでクリックします。

f:id:paiza:20181121112427j:plain


画面右上にある「NEW ENTRY」ボタンをクリック!

f:id:paiza:20181121112446j:plain


すると、スキーマのデータ形式に合わせた投稿画面が表示されるので、自由に記事を書いていきましょう!

f:id:paiza:20181121112502j:plain


ひとまず3本の記事を作成してみました。

f:id:paiza:20181121112516j:plain

あとは、この記事データをJavaScriptから取得してWebに表示できるようにしてみましょう!

■記事コンテンツを取得してみよう!

FlamelinkではJavaScriptからデータを操作するためのライブラリが提供されているので、簡単な記述ですぐに始められるのが特徴です。

<flamelink.jsのライブラリ>
https://unpkg.com/flamelink/dist/flamelink.js

そこで、HTMLファイルのBodyタグ内に次のような記述をしておきましょう!

<div id="contents"></div>

<script src="https://www.gstatic.com/firebasejs/5.5.4/firebase.js"></script>
<script src="https://unpkg.com/flamelink/dist/flamelink.js"></script>

<script>
    //ここに処理を記述する
</script>    

「scriptタグ」でFirebaseとFlamelinkのライブラリを読み込むようにして、取得した記事コンテンツを「divタグ」へ表示するようにしてみます。


JavaScriptの初期設定としては、コンフィグ情報を次のように記述します。

const contents = document.getElementById('contents');

const config = {
          apiKey: "【APIキー】",
          authDomain: "【認証ドメイン】",
          databaseURL: "【データベースURL】",
          projectId: "【プロジェクトID】",
          storageBucket: "【ストレージバケット】",
          messagingSenderId: "【メッセージングID】"
};

const firebaseApp = firebase.initializeApp(config);
const app = flamelink({ firebaseApp });

APIキーなどは自分の環境に合わせたものへ置き換えてみてください。

ここまでくれば、あとはFlamelinkで用意されているAPIを使って記事コンテンツを取得するだけです!

ただし、本来であれば認証処理などを実装する必要があるのですが、今回はFlamelinkからどのようにコンテンツを取得するかを試したいだけなのでパスしておきましょう。


データベースのルール設定の箇所で、「read」の部分を「true」にしておきます。

f:id:paiza:20181121113403j:plain
これで、ひとまず「認証なし」でデータを取得できるようになります。

(運用段階では認証処理を実装するようにしましょう…)


Flamelinkでは「content.get()」メソッドを使うことで、簡単に記事コンテンツを取得できるようになっています。

app.content.get('myposts')
.then(posts => {
    Object.keys(posts).forEach(function(data) {

          contents.innerHTML += posts[data].title + posts[data].content + '<hr>';

    })
})

「content.get()」の引数にはスキーマIDを指定してください。


オブジェクトデータで記事コンテンツの一覧が取得できるので、タイトルとコンテンツをそれぞれ指定の「divタグ」に出力しています。

f:id:paiza:20181121113510j:plain

もちろん、記事を1つずつ取得したり内容を更新・削除するようなAPIも提供されているので、ある程度の処理をJavaScript側ですることも可能です。


JavaScriptフレームワークとの連携もしやすいので、Angular / React / Vueなどと組み合わせてブログを作るのも楽しいでしょう。

(詳細なドキュメントも公開されています)


また、Bootstrapで公開されているテンプレートなどを使えば、簡単に見た目の良いブログサイトを作れるのでオススメです。

f:id:paiza:20181121113729j:plain

こちらのサンプルコードは以下のリンクからすべて閲覧可能ですので、ぜひ参考にしてみてください!

github.com

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


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

Python入門編」「C#入門編」「JavaScript入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、Firebaseでブログを構築できるCMSサービス「Flamelink」について駆け足でご紹介しました!

Flamelinkを使うと、ブログに限らずさまざまなWebコンテンツを構築することができるので活用範囲が非常に広いと感じます。

また、今回は紹介できなかった機能もたくさんあり、現在も日々活発にアップデートされているので今後できることはさらに増えてくると思います。

Firebaseの活用にご興味ある方は、本記事を参考にぜひ挑戦してみてください!


<参考>



 

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

詳しくはこちら

paizaラーニング

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

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

詳しくはこちら

paizaのスキルチェック





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

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

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

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編

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

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

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

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

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

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

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