【Ringee開発記 #8】開発支援機能の実装【夏休み毎日投稿 Day20】

こんにちは。小川智也です。

今回はDay20ということで、前回に引き続きRingeeの開発を行っていきます。今回は開発を楽に進める支援機能を実装していこうと思います。

開発支援機能とは

まず初めに、今回実装していく開発支援機能をご紹介します。

今回実装していく開発支援機能は以下のとおりです。

• 本番環境と開発環境を楽に切り替えることができる機能
• 開発環境の場合わかりやすく教えるバナーが表示される機能
• 各ページに導入するフレームワーク等を一括で管理できる機能
• タイトルやOGP、robotなどの情報を一括で生成してくれる機能

要するに欲しい機能盛り合わせみたいな感じです。

前回導入したVue.jsみたいに、同じようなところをまとめて管理してコードの可読性と保守性を高めていくような感じです。

環境切り替え＆フレームワーク一括管理

ということで早速、環境切り替え＆フレームワーク一括管理から作っていきます。

.envという環境変数ファイルにこんな感じで書いておくと、PHP側がそれを読み取ってエラーログの表示設定であったりとか、Vue.jsの本番版・開発版を切り替えてくれるようになりました。

tagLoadという関数でタグの読み込みやCSSを全部一括でしてくれるようになってます。

開発環境の場合わかりやすく教えるバナーが表示される機能

お次は、開発環境の場合わかりやすく教えるバナーが表示される機能です。

こんな感じでナビゲーションバーの上やフッターの上にアラート表示用のスクリプトを置いとくと...

こんな感じで「これは開発環境だよ！！」と警告してくれます。

タイトルやOGP、robotなどの情報を一括で生成してくれる機能

最後に、タイトルやOGPを生成してくれる機能を実装して今日は終わりたいと思います。

サイトにタイトルやOGP画像をつけようとなったとき、一般的には上記のようにこれでもかとコードを書かなければいけないのですが、今回作った関数を使うと...?

こんな感じで、タイトルを渡すだけで全部タイトルタグやOGP関連のタグを生成してくれます。

pageThemeというところの数字を変えることで、タイトルの生成の仕方であったり、Googleなどの検索エンジンにページをクロールさせるか・させないかを選択することが出来ます。

まとめ

いかがだったでしょうか。今回はDay20ということで、Ringeeに開発支援機能をちょろっと実装してみました。

なんと夏休み毎日投稿も今日で20日目です！直近かなりサボってたこともあって、個人的にはこの2週間ちょいかなり頑張ったと思います。

次回は請求管理画面の実装を行っていこうと思います！乞うご期待

最後まで見ていただき、ありがとうございました。