制作したアプリの機能を紹介!

f:id:endoakak:20200912085450p:plain

初めて自分で作ったアプリを、ご紹介したいと思います。この記事ではアプリの機能にフォーカスしています。このアプリを作った背景や込めた思いはこちらの記事で語りました。

endoakak.hatenablog.com

概要

テイルズ「物語への愛を語るサイト」

https://tales-monogatari.com/

好きな物語の好きなところについて投稿するサイトです。

物語のジャンルは小説、映画、マンガ、アニメのどれかならなんでもOKです。

「継続する必要はなく語りたいときにだけ語れる」「批判的なレビューではなくただ良いところを褒め称える」ということを大事にしています。

機能紹介

  • ユーザー新規登録・ログイン
  • 新規投稿
  • 投稿一覧表示
  • 投稿編集
  • 投稿削除
  • マイページ
  • リアクション
  • カテゴリーごとに表示
  • 作品検索
  • ネタバレ投稿非表示
  • お問い合わせ
  • 管理画面

ユーザー新規登録・ログイン

ユーザー登録機能です。deviseを使いました。

なるべく簡単に登録できるようにしたいので、入力はユーザー名、メールアドレス、パスワードのみとなっています。

f:id:endoakak:20200914182406p:plain

f:id:endoakak:20200914182428p:plain

新規投稿

新規投稿機能です。

作品のタイトル、カテゴリー、ネタバレの有無、本文を入力します。カテゴリーは小説、映画、マンガ、アニメの4つから選択するようになっています。アクティブハッシュを用いました。

f:id:endoakak:20200914182659p:plain

投稿一覧表示

投稿を表示する機能です。

ユーザー名などは表示されないので、誰の投稿かはわからないようになっています。投稿者や投稿内容に関係なく新しいものから順に表示されます。

f:id:endoakak:20200914183259g:plain

投稿詳細

投稿の詳細を表示する機能です。

一覧表示から投稿をクリックすると、その投稿の全体を表示します。後述のリアクションボタンや、投稿者には編集・削除ボタンが表示されます。

f:id:endoakak:20200914183741p:plain

投稿編集・削除

投稿を編集・削除する機能です。

投稿者本人だけに、投稿一覧や詳細ページに編集・削除ボタンが表示されます。編集ボタンを押すと編集ページに移動して投稿の編集を、削除ボタンを押すと投稿の削除をすることができます。

f:id:endoakak:20200914184133p:plain

マイページ

ユーザーのマイページです。

自分の投稿の一覧が表示されます。

f:id:endoakak:20200914184622p:plain

カテゴリーごとに表示

ヘッダーのカテゴリー名をクリックすると、カテゴリーごとに一覧を表示することができます。

f:id:endoakak:20200914184415p:plain

作品検索

特定の作品に関する投稿を検索することができます。

入力されたキーワードが作品タイトルに含まれる投稿が表示されます。

f:id:endoakak:20200914184622p:plain

ネタバレ投稿非表示

ネタバレを含む投稿を非表示にする機能です。

チェックボックスにチェックを入れるだけで表示されなくなります。

f:id:endoakak:20200914184809p:plain

リアクション

投稿に対してリアクションをする機能です。Twitterのいいね!みたいなものです。

リアクション内容に合わせて3種類を使い分けることができます。全部押すことも可能です。

ログインしていないユーザーについては、ボタンと総数は表示されますが押すことはできません。

Ajax通信をしています。実装段階で迷走して苦労したところです。

f:id:endoakak:20200914185101p:plain

お問い合わせ

お問い合わせフォームです。

送信されたお問い合わせ内容は、管理人(私)にメールで届きます。

初めてMailerを使いました。smtpサーバーを使ってgmailが送られます。

f:id:endoakak:20200914185358p:plain

f:id:endoakak:20200914185420p:plain

管理画面

管理人専用の画面です。

ユーザーや投稿の一覧が表示され、編集することもできます。

adtive_adminを使いました。

改善・追加したい機能

上げ出したらキリがないのですが、ざっくりと。

レスポンシブ対応

PCよりもスマホからの使用が想定されるので、スマホ画面に対応するべきだと思います。

見た目全般

それこそキリがないですが、はじめにトップページを出す必要はあるのか、新規投稿ボタンを作る、1ページに表示する投稿数を制限する、全体的に質素すぎるなどなど。

ユーザー間の交流

コメント機能はあえてつけていませんが、リアクションボタンだけだと寂しい気がするので、良い方法を考え中です。

通知機能

自分の投稿にリアクションがあったら通知が来るといいかなと思ってます。

まとめ

特にリアクション機能やお問い合わせ機能の実装は、新しいことを学ぶことが多かったので苦労しました。

基本的な投稿機能に少し追加しただけですが、背景にいろいろとこだわりを持って作っているので、よかったら見てみてください。

アプリはこちら。

https://tales-monogatari.com/

背景について語った記事はこちら。

endoakak.hatenablog.com