看護師向けのブックマークサイト「NursePicks」をリリースしました

nursepicks

本日11月7日に、看護記事ブックマークサイト「NursePicks」をリリースしました。

はじめに

フィヨルドブートキャンブ(以下、FBC)で学習中の@garammasala29です。
このたび最終課題である「Webサービスを作って公開する」にて、自作サービス「NursePicks」を作りました。
本記事では、サービスの紹介とリリースまでの振り返りをしていきます。

サービスの概要

NursePicksはWeb上にある看護記事を投稿・閲覧できる看護師向けのサービスです
一言で言えば、看護記事のまとめサイトです。

  • 記事の投稿
    Google、もしくはTwitterのアカウントがあれば、ユーザー登録でき、記事の投稿ができます。
    投稿した記事・論文が他のユーザーから評価され、評価が上がると多くのユーザーに注目されることになります。
    記事に対してコメントをしたり、いいねをすることができます。

  • 記事の閲覧
    アカウントなしでもサイトを閲覧することができ、リンクからサイト外の看護記事へと飛ぶことができます。
    記事に付けられたコメントも読むことができます。

サービスを作ったきっかけ

私自身、昨年の6月まで看護師として働いていました。
ここ5年くらいでWeb上に看護記事や論文、YouTubeが増えてきているという体感があり、その記事や論文を手元でブックマークする機会が多くなりました。
疾患について詳しく解説してくれている記事や看護処置のエビデンスが細かく書かれた記事などがあり、実際の現場で活用できる記事も多数見受けられました。
そのような良質な看護記事があるにも関わらず、拡散されずに読まれないのは勿体無い!と思い、この問題を解決するためのサービスを作ろうと思いました。

このあたりの背景や熱い気持ちはまだまだ語れますが、長くなるので今回はこのあたりにしておきます😂
もう少し詳しい話は、看護師向けリリースブログの方に記しています。

機能の紹介

使い方の動画を撮影しました

www.youtube.com

看護記事の閲覧

トップページです。投稿された看護記事一覧を確認することができます。
ユーザー登録していれば、記事にいいねを押すことができます。 top-page

看護記事の投稿

トップページにあるモーダルからURLを貼り付けることで記事を投稿することができます。 post-modal

コメントの投稿

記事詳細ページより記事についてコメントができます。 post-page

ユーザーページ

ユーザーが投稿した記事、コメント・いいねした記事の一覧が見れます。 user-page

技術スタック

こだわりポイント

匿名性の担保

看護師さんは守秘義務の中で活動しており、公式のSNSアカウントを持っている方は数少ないです。
ユーザー登録する上で、プライベートのSNSアカウントで登録することも多いと予想されるので、名前が変更できたり画像を選択できるようにしました。

signup-page
ユーザー登録ページ

また、SNS認証って怖いものなのでは?と思われる方(実際に看護師さんに使ってもらい判明した)に対して、安心して活用できるようユーザー登録部分には説明文を付け加えています。

signup-modal
ユーザー登録ボタンのモーダル

記事の検索

看護師といっても診療科(外科、内科、精神科など)や対象(高齢者、小児、妊婦など)で役立つ記事はそれぞれが違ってきます。
そのため、記事のタイトル、サイト元、タグから、必要な記事を検索できるようにしました。
また、FBCのアプリ内にて自身で導入したChoices-js を使って、インクリメンタルサーチできるようにしています。

https://user-images.githubusercontent.com/69446373/199777691-240a41ee-6b93-4b27-9883-ecb7166c4ab6.gif

勉強になったこと

omniauthを使ったSNS認証

初めてdevise gemを使わずにSNS認証を実装しました。
上述の匿名性を担保するため、ユーザー登録の際に名前やアイコンを変えるページを1枚挟むことになります。
認証ボタンはサインアップ、サインイン共に同じurlを返すので、どのタイミングでレンダリングさせればいいのか、セッションをどこで発行させるかなどに悩みました。
こちらはフローチャートを作成することで頭の整理ができ、解決することができました。

RailsとVue.jsの連携

FBCのチーム開発にてRailsAPIを作成し、Vue.jsで表示する経験を1度していましたが、環境構築から自分で行い導入していくのは初めてでした。
思うように画像やCSSが反映されないことへの対応や、Vue側でいいね機能を使えるようにすることが難しかったです。
また、チーム開発でVue.jsはバージョン2が使用されていましたが、今回は3を使うことにしたので、書き慣れない部分があり学習しながらの導入となりました。

デザイナーさんとのやりとり

今回のロゴやアイコンのデザインは知り合いのデザイナーさんに依頼しました。
一緒にイラストを作りあげていく体験はとても面白いものでした。
一方でイメージをテキストにするのが難しく、結局対面でやりとりしたことも多かったです😅

今後改善したいこと

本日リリースする前にベータ版としてリリースし、看護師仲間に使ってもらうことでフィードバックを得て修正していました。
おかげさまで、アジャイル開発の「少しずつ作る(=インクリメンタル)」、「少しずつ反復して作る(=イテレーティブ)」を感じ取れた気がします。
ユーザーからの意見は「一緒にサービスをより良くしていこう」という感じがとれて嬉しかったです。ポジティブな気持ちで機能を反映していくことができました。
まだ取り組めてない、今後改善していきたいことは以下の通りです。

人気順にスコープをつけたい

現状では人気順、新着順のみで看護記事を並び替えするようにしていますが、1日、1ヶ月、1年などのスコープをつけた人気順を表示できたらトレンドも追いやすくなるのかなと思います。

匿名いいねができるようにしたい

ユーザー登録をしなくても「いいね」をつけれるようにして、より気軽にサイトを楽しんでいただけたらと思います。

看護記事のタグ選択による記事絞り込み

記事が増えてくると、なかなかお目当ての記事に辿り着けないという状況になってしまうので、記事につけた「循環器」「論文」などのタグをうまく活用して、より読みたい記事を探しやすいようにしていきたいです。

おわりに

看護師さんには、ぜひこのNursePicksを使っていただけたらなと思います。
そして、もしあなたの身の回りに看護師さんがいましたら宣伝していただけると幸いです。

このフォーマットを利用して、ニッチな「〇〇Picks」を作っても面白いなとも思いました。
改善点や要望などありましたら、@garammasala29にDMやリポジトリへのissue登録、プルリクをお願いします。

最後に、リリースに至るまで何度も相談させていただいたり、ペアプロをして下さった@komagataさん、@machidaさん、@cafedomancerさん、ありがとうございました!
加えて、FBCを卒業するまで、メンターの方々や受講生・卒業生のみなさんには大変お世話になりました。
特に日々の輪読会でご一緒させていただいている方々には、感謝してもしきれません。本当にいつもありがとうございます。

残すは就職活動のみとなりましたので、引き続き頑張っていこうと思います!