2021年4月度 マナリンクリリース7選【Web】

オンライン家庭教師マナリンクCTOの名人です。

今日は4月末日なので、今月のマナリンクリリースをまとめます！

ちょっとリリースが多くてまとめるのが大変なので、Webのリリースかつ主要なものをピックアップしていきます。※アプリも開発しているのでそちらのリリースもあります。

初めて月額課金の指導コースをご利用いただいたユーザーさんに書画カメラの案内メールを送る

主な利用技術：Laravel、AWS SES、ECS（タスクのスケジューリング）

さっそく一風変わった機能ですが、月額課金の指導コースをご利用いただいたユーザーさんに書画カメラの案内メールを送信する、というものです。

オンライン指導においては生徒さんの手元が先生から見えにくいため、書画カメラと呼ばれるカメラをZoomに接続して利用するのが定石です。弊社としても月額500円程度で書画カメラをレンタルできるサービスを提供しているのですが、こちらの案内を自然に読んで頂く作戦として、営業職から直接メールするといったことが行われていました。

普通のご家庭はまず書画カメラを予め持っていないため、こちらは自動通知の形を取っていいのではないか、ということでこの施策を実装しました。

Carbon::now()を安易に利用しすぎないようにテストコードをリファクタリング

以下のように、Carbonを使った日付の足し引きの実装にはバグ（というか直感的ではない挙動）があります。

https://zenn.dev/meijin/articles/d87e087a96978e646cc9

これに関連して、テストコードで安易にCarbon::now()を使うと時期によってテストコードの結果が変わりかねない（それはそれで上記のようなバグに気がつけるのですが）ということで、

Carbon::setTestnow(Carbon::create(2000, 3, 1, 10));

のように明示的に日付を指定してsetTestnow()するようにちょっとだけリファクタリングしました。

領収書のPDFダウンロード時に宛名を埋め込めるようにする

以前、弊社のマナリンク上で決済いただいたユーザーさんがいつでもPDFで領収書をダウンロードできる機能をリリースしました。

https://zenn.dev/meijin/articles/85cb7f39021ed88a535a

これの改善案として、宛名を毎回ユーザーさんがダウンロード前に入力してその宛名にする、といった要件を実装しました。マナリンク上のユーザー名が本名とは限らないし、宛名をメールアドレスにするとユーザーさんによっては避けたいと思うからです。領収書生成をHTMLからPDFに変換するように実装していてよかったと思った瞬間ですね。

感謝の声に返信できる機能

利用技術：Nuxt.js、Laravel、vue-apollo

マナリンクには感謝の声という、先生へのある種のレビューのような機能があります。この感謝の声は長らく貰いっぱなしという形態でしたが、先生から返事ができる機能を追加しました。

以下のページまたはスクリーンショットをぜひご覧ください。

https://manalink.jp/teacher/11011/thanks-messages/81

感謝の声機能はとても良い機能だと思っていて、上記の画像のようにかなりご家庭側が想いを込めて書いてくれます。

先生側が管理画面上で返信を入力すると、先生のプロフィールなどでも返信を込みで感謝の声が表示されます。また、返信した内容の編集だったり、削除もできるように実装したり、ある程度感謝の声を頂いている先生はページネーションして感謝の声一覧を取得できるように実装し直すなどいろいろとCRUDの面で機能追加が有りました。

細かいところだと、管理画面上で返信をPOSTすると画面全体をリロードするのではなく該当箇所だけ書き換わるようにSPAらしく実装したところがちょっとしたこだわりです。

また、感謝の声ページには、感謝の声を投稿した生徒さんがどんな指導コースを利用していたかが合わせて表示されます。

これにより、どんなコースが感謝の声に結びついているのかがわかり、より新規のユーザーにとって先生を選ぶ参考点になりそうです。

チャット画面にファイル一覧 & 画像一覧機能

利用技術：Nuxt.js, vue/composition-api, Firebase

続いてはマナリンク上で指導を受講中のご家庭と先生がやり取りするチャット画面の改修です。

こんな感じで、チャットでやり取りしたファイルを一覧で見ることができます。

画像も見れます。正方形のタイル状に画像を表示するのがちょっとだけ大変でした。

React Native製のアプリでも同様のチャット機能を実装しました。

Dart Sassの導入

利用技術：Nuxt.js, sass, sass-loader, fibers

@import記法がいずれ廃止されるScssの変化をうけ、このタイミングでDart Sassを導入しておくことにしました。

さっそく@useを使ってみましたが、Node.jsのようにドット記法でモジュール化されたスタイルを引っ張ってこれるので、慣れればこちらのほうがよほど直感的であると感じました。

少なくともNuxt2.14系であれば以下のように関連ライブラリをインストールするだけで事足ります。

npm install --save-dev sass sass-loader@10 fibers 

利用規約、プライバシーポリシー、特商法のmicroCMS移行

利用技術：microCMS, Nuxt.js, aspida

弊社では1年以上microCMSを使っているのですが、このたび利用規約などのデータもmicroCMSに保存し、API経由で随時引っ張ってくるようにしました。

こうすることで、利用規約等の変更に伴って毎回リリースする必要がなくなり、開発工数の削減になります。

microCMSでは記事ごとに閲覧編集権限を設定できるので、セキュリティ的にも安心です。

今月は特に感謝の声への返信機能が大型アップデートだったかなと振り返って思います。同時に、開発環境の刷新に関しても、新しいエンジニアのジョインに伴ってローカル環境のSSL化など随時取り組んでいます。

カジュアル面談などの申込みを随時歓迎しておりますので、お気軽にご連絡ください！