2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

FireBaseをWordpressと連携してみた

Last updated at Posted at 2020-05-26

WordPress上で運営している資格学習サイト、資格のいろはにFireBaseを連携してみたところ、無事動作を確認しユーザの管理が出来るようになったのでここで共有しておきたいと思います。

FireBaseとは

FireBaseはGoogleによって提供されているデータベースシステムで、アプリ開発からWebサービスの運用にまで様々な用途があります。

リアルタイムでのデータの同期や読み取り書き込み、認証等様々な事が実現可能で、それでいて個人で運用する分においては殆ど無料で利用することが出来るため費用も抑えることが出来て使い勝手が良いです。

機能は多岐に渡るのですが、筆者が使用した機能は以下の通りです。

Authentication

アカウントの認証機能ですね。

Googleアカウントとの連携をはじめ都市、SNSやメールアカウント、電話番号による認証を利用することが出来ます。

Wordpress内でのユーザ登録制にすれば良いかなと最初考えていたのですが、Xserverの容量的に将来オーバーフローするのが嫌だったこともありこちらを利用するに至りました。

DataBase

ユーザのデータを保持する目的で利用しています。

階層がコレクション>ドキュメント>フィールドとなっており、データ型を自由に決めることが出来るNoSQLでのデータ管理となっています。

1Gまで無料で利用することが可能です。

FireStore

リアルタイムで同期できるデータベースで、ネットワークの遅延やインターネット接続に関係なく接続することが可能です。

FireBaseを使うに至った理由

資格学習サイトを作りこむにあたって、ユーザ毎に学習進捗率を保存する事は必至でした。

最初はWordPress内で登録できるユーザ情報にそれぞれの進捗率を保持させようとしたのですが、そもそもどのようにデータが格納されているのか、定義をすればよいかが分からず二の足を踏んでいる状態でした。

また、先ほど触れた通り容量の問題もあったので・・・

FireBaseを使ってどう変わったか

FireBaseを使用してみて改めて、外部にデータを送り、DOM操作によりWordPress内のテキストを変換してやれば簡単に進捗率を表記できるため驚きました。

データの型や構造を自分で決めることが出来た点も魅力的で一定容量までなら無料で使用できるので開発コストが低い点も非常に嬉しいですね。

それなりにドキュメントが用意されており、技術的に躓いた場合でも参照できる、というのも嬉しいポイントでした。

FireBaseをWordPressに載せる際に苦労した点

WordPress上でFireBaseを動作させる際、ヘッダ部にJavaScriptでFireBaseを呼び出す記述を書いてやればよいのですが、始め中々連携がうまくいかずにてこずってしまいました。

WordPressのテーマによっては高速化のためにJavaScriptを圧縮するものもあり、その関係で動作に不具合が起きていたようです。

テーマやプラグインでJavaScriptを始めコードに影響を与えるものがある場合要注意です。

FireBaseの良かった点

実際に使用してみて、思うような動作を実現することが出来、現在は簿記3級やITパスポートの独学用サイトを作ることが出来ました。

ユーザが以前解いた問題や日時を記録することで、再度ページを訪問した際に何処を復習すべきかが一目瞭然になっています。

簿記3級のページ

self-study-support-n3-5.png

このようにユーザを囲い込めるような機能を比較的容易に(と言っても数か月はかかりましたが)実現可能なので、Wordpress上でシステムを構築したい方は是非とも利用してみて下さい。

まとめ

是非とも一度、FireBaseを触ってみて頂きたく思います。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?