ペットの情報がもっと広く公開されている環境と飼い主とペットをサポートすることでより共存しやすい環境を目標にサービスをリリースしました。
bibyブログというサービスです。
本サービスのリンクはこちらです。
https://diary.biby.live/
bibyブログでできること
bibyブログはペットの何気ない日常や思い出を投稿できるブログサービスです。登録は誰でも可能で、無料で利用することができます。ブログには画像も自由にアップロードできるので、大切なペットとの写真をブログで公開することができます。
PayPal.Meのアカウントをお持ちの方は、アカウント名をあらかじめ入力しておくことでブログの終わりに応援ボタンを設置することができます。
さらにPWA対応済みなので、スマホのホーム画面に追加していただくとアプリと同じような操作感で利用することができます。
開発に至った経緯
去年から流行している新型コロナの緊急事態宣言で、在宅時間が増えたことや自粛のストレスからペットに癒しを求める人が増え、ペットの購入が増えたそうです。2020年には新たに購入された犬と猫が前年より6万匹以上も増加したとされています。
しかし、購入しても「ほえるから」「仕事が忙しくなった」などの理由や、売り手から受けた説明とのギャップに悩み飼育放棄をする人が増えているというニュースを見かけました。所感ですがここ数ヶ月こういったニュースが徐々に増えている気がします。
株式会社Wizleapの調査によると、**ペット購入後に知識不足だと感じた人は56%**もいるそうです。どちらともいえないを入れると、4分の3がペットへの知識をしっかり付けずに購入に至っています。
おそらく、ペットについての知識不足から購入後に後悔をしている人が一定の割合存在しており、コロナをきっかけに飼育放棄が増加したのではないかと思います。
せっかく迎え入れたペットを身勝手な都合で放棄してしまうのは、とても残念でペットにとっては理不尽すぎるのではないでしょうか。ペットを飼うこと自体は否定しないのですが、そのペットがどんな生き物でどんな性格なのかを知らずに安易に飼うことはあってはならないことです。
飼育放棄をする前に、どうしてもペットの面倒を見る時間がなければペットシッターやペットホテルに預けるなどもできますし、しつけが大変ならトレーナーに訓練してもらうこともできるはずです。
ただし、いずれにせよ費用がかかってしまいます。飼育放棄する人の中には、思っていたより費用がかかるという理由でペットを手放す人も多くいるようです。たしかに、お金の問題は大きいでしょうし、人間と同じで病気や怪我をすると予期せぬ費用がかかってしまいます。
そこで、ペットの情報がもっと広く公開されている環境と飼い主とペットをサポートすることでより共存しやすい環境が必要なのではないかと考えbibyブログを開発しました。
bibyブログは犬や猫だけに寄らず多種多様なペットのブログ投稿を歓迎しています。そのため、様々なペットの情報が公開されることで、多くのユーザーにとって有益なペットの情報源となります。
また、まだ開発途中なのですが、ユーザーがペットのファンを増やして収益化できるような機能を考えています。よくあるファンクラブのようなイメージです。自慢のペットをもっと広めるきっかけや、少しでも飼い主とペットのサポートになれればと思います。
システム構成
前置きが長くなってしまいましたが、技術的な話題に入ります。
bibyブログはReactとDjangoで開発しました。サーバーはAWSのEC2とAmplifyを使っています。画像はS3に保存しています。
少し前にリリースしたbiby diaryが基盤となっているので、構成はこちらの記事で紹介したものとほとんど変わりありません。
https://qiita.com/nisyuu/items/92bea2e0491865f48a45
新しく追加した機能について、使用したプラグインや悩みの技術について少しだけ紹介します。
フロントエンド
リッチテキストエディタ
リッチテキストエディタはDraft.jsというプラグインを使用しています。調べてみるとReactのテキストエディタはDraft.jsがよく利用されているいるらしく、Wantedlyでも使われているみたいです。
Draft.jsはサードパーティが充実しており、htmlやMarkdownの変換を行ってくれるものもあります。
他にも優れたリッチテキストエディタのプラグインはたくさんあるので、検討している方や気になる方はこちらを参考にしてみてください。
Top 5 Rich Text Editors for React in 2021
PWA
以前はReact Create Appでプロジェクトを作成するとPWA化に必要なファイルが生成されていたのですが、新しいReactのバージョンだと自分で指定しなければ作られません。
指定の仕方はこのようになります。
npx create-react-app my-app --template cra-template-pwa
TypeScriptだとこのように指定します。
npx create-react-app my-app --template cra-template-pwa-typescript
参考
https://create-react-app.dev/docs/making-a-progressive-web-app/
もし実行し忘れた場合は、GitHubに公開されているserviceWorkerRegistration.jsとservice-worker.jsを追加することでPWA化できます。
index.jsでserviceWorkerRegistration.register();の追加もお忘れなく。
GitHub
https://github.com/cra-template/pwa/tree/master/packages
CSSフレームワーク
biby diaryではReact Spectrumを使って画面を実装したのですが、bibyブログはTailwind CSSを使いました。Tailwind CSSはあらかじめマージンやフォントサイズなどの定義がされているCSSフレームワークです。Bootstrapと違ってコンポーネントが定義されておらず、自分で定義されたスタイルを使ってコンポーネントを作っていくため細かい設定が可能です。
Create React Appへのインストール
Create React App以外でReact環境を構築している方は、紹介するインストール方法でセットアップできるか分からないので各々調べてみてください
Tailwind CSSとPostCSSをインストールしてください。
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Tailwind CSSとPostCSSをインストールしただけでは使用できないので、Create React Appの設定を上書きできるCRACOというプラグインをインストールします。
yarn add @craco/craco
startやbuildなどのコマンドはcraco仕様に変更するため、package.jsonのscripts内を書き換えます。
{
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
}
Tailwind CSSを読み込むために、craco.config.jsをルートディレクトリに作成して読み込ませます。このとき、autoprefixerも追加しておきましょう。
autoprefixerはベンダープレフィックスを自動で追加するものです。
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
Tailwind CSSをファイルに適応させるための設定が必要なのでtailwind.config.jsを作ります。
こちらもルートディレクトリに作成します。
npx tailwindcss-cli@latest init
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
index.cssとindex.jsにTailwind CSSを読み込ませます。
@tailwind base;
@tailwind components;
@tailwind utilities;
import React from 'react';
import ReactDOM from 'react-dom';
mport './index.css'; // 追加
mport App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
以上で、環境をstartさせるとTailwind CSSが使えるようになります。
メタタグ
bibyブログはブログサービスなので記事によってメタタグの情報を変える必要があります。
メタタグの変更はreact-helmetで可能なのですが、リンク貼り付け時に読み込みができませんでした。SPAのサイトなのでどうにかレンダリングできないかと考えています。
prerender-spa-pluginとかでできるのでしょうか。この問題にいて過去に調べたことがあるのですが、ベストプラクティスがなかったのでどうするべきか分からずじまいです。
前に調べた時はかなりコストがかかりそうな問題だったのですがprerender-spa-pluginでできたりするのでしょうか。誰がいい方法をご存知であれば教えてください！
ちらっと見たprerender-spa-pluginの情報
https://webnooboegaki.com/javascript/reactjs-prerender-spa-plugin
バックエンド
S3
DjangoでS3を使うときの定番プラグインboto3とdjango-storagesを使用しました。
Django側の設定は簡単で、こちらを追加するとすぐにS3と連携できました。
REST_FRAMEWORK = {
...
'DEFAULT_FILTER_BACKENDS': ('django_filters.rest_framework.DjangoFilterBackend',)
...
}
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
AWS_ACCESS_KEY_ID = 'xxxxxxxxxxxxxxxxxxx'
AWS_SECRET_ACCESS_KEY = 'xxxxxxxxxxxxxxxxxxx'
AWS_STORAGE_BUCKET_NAME = 'xxxxxxxxxxxxxxxxxxx'
AWS_S3_REGION_NAME = 'xxxxxxxxxxxxxxxxxxx'
settings.pyへのシークレットキーなどの直書きはセキュリティ上好ましくないので、django-environなどを使って環境変数にしておきましょう。
画像ファイルはページ読み込みの速度に大きく影響するので、圧縮するなどの対応をしておくとベストです。圧縮はフロントから送信するときか、AWSだとS3に画像がアップロードされたらLamndaで自動圧縮することもできます。
アップロード可能な容量を制限することも選択肢としてありますが、UXの観点からあまり好ましくありません。
複合主キー
いいね機能を作るときに、ユーザーとブログの組み合わせで複合主キーにしたかったのですが、Djangoでは複合主キーはサポートされていないとのことでした。複合手キーにしたいことはたまにあると思うのですが、いいね機能にそもそも複合主キーを使用するのは間違いなのか、何か別の手段があるのか分かりませんでした。Railsでは複合主キーを実現する方法があるようです。
こちらも誰か知っている方いたら教えてください！
ソース
https://gijutsu.com/2021/01/19/django-composite-primary-key/
今後の開発について
bibyブログでは飼い主とペットとのよりよい共存を目標としているので、まずは前述したファンクラブの機能開発を進めていきたいと考えています。
他にもブログとしてまだまだ足りない機能がたくさんあるので、随時開発を進めていきます。
多くの方にbibyをご利用いただければ幸いなので、ご声援いただけると大変、励みになります。
ご意見・ご相談も大歓迎です。
一応ロードマップのようなものも作っているのでご覧ください。
bibyロードマップ