【個人開発】Qiitaで投稿を断念してしまった私が、3ヶ月越しに「初学者向けの技術記事アプリ」を作成しました！💐

はじめに

初めまして。
2024年1月よりプログラミングスクールRUNTEQに通っている、sayaと申します。
今回スクールの卒業制作として、技術記事投稿したことがない/投稿に苦手意識を感じている方向けの技術記事投稿アプリを作成しました。

①投稿へのハードルが低いこと
②第三者からの反応内容を確認できること
③継続して投稿できること
を目的に、約２ヶ月に渡り開発を行ってまいりました。

サービスURL：　Miniita(ミニータ)

GitHub：　リポジトリ

３ヶ月前にQiitaで記事を投稿するのを断念してから、この度このような形で記事を投稿できることをとても嬉しく感じております。
初学者のため分かりづらい点等あるかと思いますが、ご了承いただけますと幸いです。

Miniitaを開発した理由

開発に至った経緯は、このアプリ内でも記事投稿しておりますので気になる方は、こちらも合わせてご覧いただけますと幸いです。

このアプリを作成した1番の理由は、Qiitaで記事投稿を断念してしまったからです。
ちょうどスクールで学習を開始してから、５ヶ月経過した時に外部で学習内容をアウトプットしたいという思いからQiitaを開きました。

しかし、投稿したい内容があるのに時間ばかり経過し、結局投稿できませんでした。
その理由は大きく分けて2つあります。
1つ目は、どのような形式で記事を書き進めればいいか、わからなかったため。
2つ目は、自分の書いている内容に、不安を感じていたためです。

1つ目に関して、Qiita内にも多くの方が記事投稿のための雛形を書いてくださっていますが、どの雛形を選択するかに時間ばかり取られてしまい、結局投稿できませんでした。
2つ目は、内容を調べながら書いているものの間違っていたらどうしよう、という気持ちばかり大きくなり、投稿を断念してしまいました。

スクール内では積極的に外部サイトを使用し、技術記事を投稿している方が多くいらっしゃいます。
そんな中で投稿できない自分に悔しさを感じたこと、他の方も同じように感じているのであれば、その悩みを解決できるようなアプリを開発したいと思い、このアプリ作成を決意しました。

アプリのご紹介

ここからは実際のアプリのご紹介をさせていただきます。
基本的な記事投稿機能に加え、本アプリでは複数のいいね機能、チャットボット機能(基本的な送信内容設置)、マークダウン記法のモーダル表示、継続サポート機能、ユーザーバッジ機能を搭載しています。

投稿機能	下書き保存
記事の投稿時、マークダウン記法で投稿でき、内容も即座にプレビュー画面で反映します。	記事を下書き保存できます。下書きに入れた記事は、マイページ上から再編集可能です。

マークダウン使用法、MiniitaBot	検索機能
マークダウン記法の使い方を確認できます。MiniitaBotでは、投稿中の不安な点をサポートします。	本文、タイトル、投稿者名で検索をかけることができます。

ソート機能	複数のいいね機能
新規順、古い順でソートをかけることが可能です。（デフォルトは新規順で表示）	5つのいいねボタンを設置しており、其々の内容に合わせていいねボタンを選択できます。

コメント機能（投稿・編集・削除）	コメントへのいいね機能
記事に対するコメントを投稿できます。投稿・編集・削除すべて非同期処理で実装しています。	コメントへいいねを押すことができます。コメントへのいいねも非同期処理で実装しています。

プロフィール編集	投稿済、下書き記事の閲覧
メールアドレス、名前を変更することができます。	自分の投稿した記事、下書きした記事を確認できます。ここから詳細・編集ページに飛ぶことができます。

いいね済の記事の閲覧	ユーザーバッジ画面
いいねした記事を一覧で確認できます。其々の記事詳細画面へ遷移することも可能です。	1,3,5,10,20,30記事投稿した段階で、ユーザーバッジが付与されます。（現在は0投稿のため、バッジは付与されていません）

継続サポート画面	通知機能
総いいね数、総文字数が表示されます。また5記事以上投稿すると、MiniitaBotから総評をもらうことができます。	記事へのいいね/記事へのコメント/コメントへのいいね/ユーザーバッジ付与時に通知が入ります。未読の場合は青いマークがつき、確認するとマークが消えます。

技術構成

時間の制約があったため、スクールで学習していたRuby on Railsを使用しアプリ開発を行いました。
実装機能、gemの選定理由に関しては、Zennにて投稿しておりますので、詳細はこちらもご覧いただけますと幸いです。

カテゴリー	使用技術
フロントエンド	Rails 7.1.3.4(Hotwire/Turbo), JavaScript, CSS, TailwindCSS, DaisyUI
バックエンド	Rails 7.1.3.4 (Ruby 3.2.2 )
インフラ	Render.com
DB	PostgreSQL
開発環境	Docker
API	OpenAI API

こだわった点

今回こだわった点は下記4点です。
①投稿へのハードルを下げる機能の実装
②第三者からの反応内容を確認できるような実装
③継続して投稿できるような工夫
④UI/UX

①投稿へのハードルを下げる機能の実装

今回のアプリ開発の核となる部分です。
私自身が投稿を挫折した経験から、ハードルを下げる機能としてテンプレート機能と、チャットボット機能を作成しました。

テンプレート機能
チャットボット機能で、「テンプレート作成依頼」をクリックすると下の画像のような文言が表示され、投稿したい内容を鉤括弧内に入力し送信します。
当初はこちらで複数のテンプレートを用意する方式をとっていましたが、ユーザーからのFBを受けてこのような形式に変更しました。

チャットボット機能
テンプレート機能と同じく、チャットボット機能内で不安に思った点をその場で確認できます。
「誤字脱字の添削依頼」「内容の確認依頼」はデフォルトで選択できますが、それ以外の質問に関しても送信できる形式にしています。

②第三者からの反応内容を確認できるような実装

自分の投稿した内容にいいねボタンを押していただけるのは嬉しいですが、技術記事の場合どの点にいいねをいただけたのかが気になりました。海外の技術記事サイトDEV Communityのいいね機能がわかりやすいと感じたため、こちらを参考にいいねボタンを5つ作成しました。

現在は、「参考になった、学びが深まった、解説が丁寧、独自の視点、詳細を知りたい」の文言を採用しています。

③継続して投稿できるような工夫

私自身は現在Zennを中心に毎日何かしらのアウトプットを行うようにしています。
継続サポートページでは、総いいね数、総文字数という客観的な情報を確認できます。

またいいね数では内訳表示もされるため、自分がどのいいねを多く受け取っているのか、また受け取っていないのかが可視化できます。
5記事以上投稿すると、ChatBotで総評を受け取れます。金銭的な関係上、今回はタイトルの総評のみですが、ゆくゆくは本文総評も入れたいと考えております。

④UI

技術記事アプリは日本国内であれば、QiitaやZennがメインかと思われます。
できるだけ多くの方に使用していただきたいという思いから、UI/UXにも力を入れました。
特に背景色では落ち着いて記事を投稿できるよう、青系のbackgroundーimageを採用、文字等は黒白は極力避けております。

またその他具体的に意識した点に関しては、下記にまとめました。
こちらも参考になりましたら幸いです。

今後の展望

すでにスクールの方を始め、多くの方にアプリを触っていただいており本当に感謝の気持ちでいっぱいです。
改めて、ありがとうございます。

今後追加検討している機能は、閲覧数表示機能、タグ機能などです。
ただ時間の制約もあるため、リファクタリング・不具合解消・テストコードを書くことをメインに、余力があれば機能を今後も追加していきたいと考えております。

最後に

３ヶ月前にQiitaで投稿できず悔しい思いをしましたが、このような形でリベンジでき本当に嬉しい気持ちでいっぱいです。
今後も自分自身の技術力向上のために、記事を投稿し続けたいと思います。
最後までご覧いただきありがとうございました。