オリジナルアプリ開発#1 アプリ設計を考える
アプリ開発、まずはいろんな設計を考えよう！
こんにちは、はくたむです。
3月から侍エンジニア塾で学び始めて、今月で3か月目に突入しました！
そして、やっと！オリジナルアプリの開発を始めることになりました！
開発を始めるにあたってMacBookを買ったりしましたので、よかったらこちらの記事も読んでみてください。
ちなみに髪の毛をバッサリ切ってみたり、クールビズになったりしたのでアイコンも変えてみました。笑
アプリ開発の初めは設計からです！
どんなアプリを作りたいのか？どういう機能を持たせるのか？
色んなことを考えてまとめました。
まずは作りたいアプリの案を出そう
こういうの作りたいんだ！！っていう強い思いがあればそれを形にできるのが良いと思いますが私は特にそう言ったものは持ち合わせておらず、そんな中でRuby＆Railsを選んだ人間なので、まずはここまでRailsを学んできたことをベースにして作れそうなアプリは何か？を3案くらい考えました。
これはRailsの基礎を勉強している段階から、日々、こういうの良いな！ってものをメモってあり、その中から下記の項目まで具体的に出せそうなものを選んだ感じです。
- どんなことが出来るアプリ？
- アプリの概要
- ターゲットは？
- 出来るなら絞っておくとデザインのイメージとかしやすいかも
- どんな機能があるの？
- Railsの7つのアクション（index、show、new、edit、create、update、destroy）に当てはめて考えてみる
- この段階で、できれば必要度の高い順に優先順位をつけておくと◎
今回は3案の中で一番作りたかった、自分だけの辞書を作れるアプリを作っていくことにしました！
ちょっと前に作ったこの記事がヒントになっています。
UI設計、DB設計、必要なgemを考える
さて、作りたいアプリが決まったらそのアプリの設計に入ります。
↑で考えた機能をどうやって実装していくか？どういうUIがいいだろうか？実際に自分が使うことを想像しながら考えていきます。
色々盛り込みたい機能はあるでしょうがちょっと待った！！
MVP（実用最小限の製品： minimum viable product）という考え方がある
簡単に言うと、必要最低限の機能実装から始めて徐々に拡張していくやり方。
アプリの開発だったら、まずは動くものを作ってみる→使ってもらう→フィードバックをもらう→新しい機能を考える→作ってみる→…と言うPDCAサイクルを回しながらより良いものを作っていくようなやり方、ですかね？
何でもかんでも盛り込んで、実働までに時間を割くよりは、サクッと作ってみて反応を伺って次を考える方が効率も良さそう！
と言うわけで、
- まずは機能の優先順位付け
- このアプリのコア機能（これがないとアプリとして成り立たない機能）は？必須ー必要ー欲しい…くらいな感覚で機能に優先順位をつけて並べてみた
- 考えた機能は実装可能か？どうやって作る？
- 実装したい機能が決まったら、実装方法（必要なジェムやプラグインなども）を探ろう
- この段階で必須じゃないけど実装が難しいものを後回しにしていった（あとでやる or やらないも含め）
これをするとアプリの完成ラインが見えてきました。
今回の方針としては、まずは機能を目標ラインまで完成させる→デザインを整える→時間があればちょっと難しい機能にチャレンジと言った感じで進めていくことになりました。
UI設計
UI＝ユーザーインターフェースの設計ですね。
デザインではなくて、アプリの骨組みというか…画面のどこで何をしたらどうなるみたいなところを考えていくこと…なのだと理解して、自分が考えたアプリの機能がどこにあって、どういう感じで操作するか？を絵にする感じで考えました。
まずは適当にざかざかっとノートとかに書いてみてからmoqupsというツールを使って作ってみました。
DB設計
アプリに必要なテーブルとカラム、テーブル同士の関連付けを考えていきました。
導入するgemによっては(deviseとか)テーブルを用意してくれたりするのでそこは考えなくても良かったみたいです。
（私の場合はタグテーブルは考えなくて良かった）
gem
導入するgemをまとめます。
以上をアプリ設計とし、今回作るアプリとして私がまとめたものが下記になります。
（先生に提出したもの、そのまんま。笑）
※下記でこの表記になっているものは先生からの指摘・意見を受けて修正した部分になります。
※結局修正は２回入りました。
自分辞書
自分だけの辞書を作れるアプリ
アプリの概要
自分が登録したい単語やメモを登録して一覧表示→詳細確認できるアプリ ※イメージとしてはQiitaが近い
ターゲット
勉強中の学生・社会人
開発環境
Ruby 2.5.0
Ruby on Rails 5.2.0
機能
- ユーザー登録機能
- 任意の言葉、読みがな、メモの登録・編集・削除ができる
- メモにURLを記載した場合別窓でのリンクになる
読みがなで五十音・アルファベット順に並び替え、それぞれをグループとしてまとめる下記検索機能強化によりデフォルトでの表示は登録日時が新しい順とする
- 検索機能がある
検索機能にインクリメンタルサーチを利用
タグ付けができて、タグから探せる検討の結果タグ機能の実装は中止
----------下記検討して実装できるならしたい（難しそう）---------
- 関連語句のリンクが張れる
- メモ中に登録語と合致した文字列があったら自動でそのページに飛ぶリンクになる
- 自分で関連語句を選ぶ方法も考えたが、その方法だと後からのメンテが大変になり使わなさそうなので上記方法で実装できなさそうなら実装は無し
----------目標の完成ライン（以下は完成後に実装検討）----------
----------その他機能案（現時点では実装予定無し）----------
- フォロー機能
- 他人の辞書も閲覧できる
必要なページ
- サービスTOP（サービスの概要）
- 新規登録ページ
- ログインページ
- ユーザーTOP（ログイン後の画面）
- 単語新規登録
- 単語一覧
- 単語詳細ページ
- 単語編集ページ
- ユーザーアカウント設定ページ
UI設計
アプリのTOPページ
- アプリの概要などの説明→新規登録・ログイン画面へのリンク
新規登録・ログイン画面
ログイン後の画面
- 単語新規登録画面がデフォルトで表示される
メニューはアコーディオンで、クリックすると開閉する感じ（登録がないグループは表示されない）- メニューはデフォルトで10件づつくらい表示させて、登録日時が新しい順に並べる。
ログイン後の画面はページ最下部に追加した1カラム案で実装することとする。
登録語詳細画面
- 左のメニューから登録語を選んだ時の画面→詳細ページから編集・削除ができる
- メモ中の下線は自動でリンクが貼られた時のイメージ→ここからかく単語詳細に飛ぶ
- 削除はアイコンをクリック→アラートをYesで削除
- リンク→
何か入力規則を決めてその文字列をサーバー側でHTMLに変換し、リンクとして表示する方法を考える
検索イメージ
- 検索に合致した言葉を昇順で表示（タグは該当タグに所属するもの全てを昇順で表示）
- １０件以上はページネーションを利用する
- 検索にインクリメンタルサーチを使いリアルタイムで検索結果を見ながら探せる
or タグでグルーピングした中から五十音順で探す タグ機能実装は検討の上中止
登録語編集ページ
- すでに登録されている単語の編集
ユーザーアカウント設定ページ
- ユーザー情報の変更ページ（deviseの仕様を確認）
DB設計
users ユーザー
| カラム名 | データ型 | オプション | 説明 |
|---|---|---|---|
| id | integer | :null => false | |
| name | string | :null => false | |
| string | :null => false | ||
| password | string | :null => false |
has_many :words
has_many :tags
words 単語
| カラム名 | データ型 | オプション | 説明 |
|---|---|---|---|
| id | integer | :null => false | |
| user_id | integer | :null => false | |
| word | string | :null => false | 登録する単語 |
| kana | string | :null => false | 単語の読み仮名 |
| content | text | 登録単語のメモ | |
| content_replace | text | 登録単語のメモからHTMLへ変換したもの |
belongs_to :user
has_and_belongs_to_many :tags
オリジナルの投稿(content)と変換して表示用のHTMLに置換えたもの(content_replace)を分けて保存した方が良い
tags タグ
| カラム名 | データ型 | オプション | 説明 |
|---|---|---|---|
| id | integer | :null => false | |
| user_id | integer | :null => false | |
| tag | string | :null => false | タグ名 |
belongs_to :user
has_and_belongs_to_many :words
タグ機能実装中止によりテーブル不要
tags_words タグと単語の中間テーブル
| カラム名 | データ型 | オプション | 説明 |
|---|---|---|---|
| tag_id | integer | :null => false | |
| word_id | integer | :null => false |
※id不要 ※モデル不要
タグ機能実装中止によりテーブル不要
gem
gem 'devise' #ユーザー認証 gem 'kaminari' #ページネーション gem 'bootstrap' #Bootstrap４を使う gem 'jquery-rails' #Rails5.1以上ではデフォルトでjQueryがインストールされないので入れる gem 'pry-rails' # rails consoleでirbの代わりにpryを使う
デバッグ用に"pry-rails"を入れる
タグ機能実装中止により"gem 'acts-as-taggable-on'"削除
プラグイン
タグ機能実装中止によりプラグイン不要
参考URL
Railsでacts-as-taggable-onを使ってタグ管理を行う
acts-as-taggable-onで作るタグクラウド＆効率的なタグ管理
【Ruby on Rails】gem(Kaminari)でページネーション機能を追加する
ログイン後の画面（メイン画面）の案２
１カラムで表示→レスポンシブ対応と言うかスマホでの使い勝手を考えたときにこちらの方が使いやすいのでは？と思った。
新規登録画面はモーダルで表示させるのが良いか。
※モーダルの実装はある程度見栄えが整ってから考える。まずはページ遷移で実装する。
- デフォルト：最新の登録順で１０件ずつくらい表示させる。
- 懸念点として、長い言葉を登録した際の表示崩れ
- 検索窓：インクリメンタルサーチを使用してリアルタイムで検索結果を表示させる
タグ：クリックすると登録タグが表示されるAND検索が可能か？インクリメンタルサーチとの併用は？
使い勝手を考えて、ログイン後の画面はこちらを採用。
タグ検索がインクリメンタルサーチと競合する場合を考えた結果、タグでの検索はなくても良いという結論に至り、タグ機能の実装を中止
今回作るオリジナルアプリの設計は以上です！
次回からはアプリの制作記録のような感じで進捗を少しずつアップしていけたら良いなと思います。
読んでくれてありがとうございました！またね〜
