BETA

RTAのノリで作った簡単アプリを実用的なWebサービスに昇華させてみた(テリワンSP配合表)

投稿日:2019-01-07
最終更新:2019-01-07

新年明けましておめでとうございます。今年もよろしくお願いいたします。
年末年始はぐだぐだしつつサイト作成も進めていました。
ほぼ完成しHeroku上にアップしましたので記録しておこうと思います。
サイト名がStSuppoとなっていますが、これはステータス(status)をサポート(support)するという意味合いで付けてあります。いろんなゲームの状況を補助するサイトとしようと思ってますが、今回作成したテリワン以外を作成するかは未定です(^^;)

前置き

先月にWebアプリ作成RTAと題してテリワンSPの配合表をメモ帳に抽出するアプリを作成しました。
ここからさらに、以下の目的を持って検索履歴を持つWebアプリを作成しようと思い至りました。

目的1.メモ帳版配合表の利便性を向上させる

メモ帳版は彼女に使ってもらっていて大変好評なのですが、履歴が見れるとなお便利だと言われました。確かに同じ内容もいちいちCtrl + Fで検索するのもめんどくさいよなぁ・・・

目的2.複数ページを遷移し、またDBを使用するWebアプリの作成経験をもつ

以前作成したMarket Explorerは、一つのページの部分遷移を一時的なオブジェクト情報を元に行っていましたので、DBを使用しない単一ページのサイトでした。
しかし、今後DBは必須になりますし、ページの行き来もすることになります。今回ユーザー登録や検索履歴をもつWebサイトを作成することで、転職活動や今後の業務に確実に役に立つものと思いました。

要件定義

  • こちらの配合表の情報を、モンスターや配合元で検索し、その履歴を保存できるようにする。
  • 検索時はモンスター名があいまいな場合でも対応できたり、履歴を削除できたりするといった、利便性の向上に努める。

出来上がり

モンスター検索画面


初期画面では全モンスターが表示されるように設定しています。

  1. 画面左上のテキストボックスに検索したいモンスター名を入力して検索できます。
    完全一致検索にするとそのモンスター名を、あいまい検索にするとそのモンスター名を含んだモンスター全てが検索され情報が表示されます。
    ・完全一致検索

    ・あいまい検索
  2. 配合元を検索にチェックを入れると、配合元(両親)の情報内からモンスター検索ができます。
    ・完全一致検索

    ・あいまい検索
  3. 画面右上にユーザー登録してある名前を入力しログインボタンを押すと、検索履歴画面に飛べます。
  4. ユーザー新規登録リンクをクリックすると、ユーザー登録画面に遷移します。
  5. 「両親となる回数」は、全モンスターの配合元(両親)欄に、モンスター名が出てきた回数が表示されます。例えばアクバーなら、下記のように配合元に5回でてきますので、両親となる回数は5です。

ユーザー新規登録画面


画面左上のボックスに名前を入力し、新規登録ボタンを押すとユーザー登録ができます。
重複するユーザーは作成できません。

検索履歴画面

テスト画面として初回ログインした場合、以下のような画面に遷移します。

  1. 画面左の検索機能は上記で説明したものと同一になります。
  2. 画面右にはログインユーザー名とログアウトボタンが表示されます。
  3. 下記のように、検索した結果が上に積み重なっていくように表示されます。
    ・ドラゴンを配合元で完全一致検索

    ・ドラゴンを完全一致検索すると一番上に表示される

    ・例えばダースドラゴンとスカルゴンにチェックを入れて「チェック項目を削除」ボタンを押下すると、履歴から削除されます。

簡単な仕様の解説

以下の事項は、今後個別記事を作成し、ソースコードなどを貼り付けつつ詳しくまとめる予定です。

  • 使用したDBは、「User」「Monster」「History」の三種類になります。
    ・「User」は新規登録ページで入力されたユーザー名を管理しています。
    ・「Monster」はあらかじめ抽出しておいた全モンスター情報を持っています。
    ・「History」は中間テーブルとなっており、どのuserがどのmonsterを検索したかを管理しています。
    ・「User」は複数のmonsterを検索し、また「Monster」も複数のユーザーから検索される項目のため、多対多の関係性を持ちます。

  • 検索履歴の削除を少し工夫してあります。検索履歴には同じモンスター名が並ぶことがあるため、チェックされている項目のモンスター名を使ってHistoryをdestoryはできません。ですので、上から何番目の履歴がチェックされているかという見方で削除対象を判別しています。

  • モンスター検索画面と検索履歴画面は、デザインに共通点が多くありますが、削除列やログイン情報など一部が異なっています。
    共通する部分は「custom.scss」、モンスター検索画面特有の箇所は「pages.scss」、検索履歴画面特有の箇所は「session.scss」というように、scssの使い分けをしてみました。

  • 検索結果の表示については、Webページの一部を更新するために、Ajax+(jQuery+Partial)でHTMLを部分更新と同じことをしています。これは前に勉強したことを活かせてよかったです。

まとめ

今回の制作期間は約3週間でした。年末年始はあまり手を付けていなかったですが・・・
Tech Boostで学んだことを活かしながら、目的に沿って楽しく作成でき、彼女にも大変喜んでもらえましたのでかなり有意義なものになりました。
今はHerokuでリリースしていますが、これからAWSの方にも乗せていきます。
そのことや、詳しい仕様についても今後また記事にしていきます。よろしくお願いします。

1/7 21時45分追記
※なんか記事タイトルにインパクトが欲しくなったのでタイトル変更しました(^^;)

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

作ったもの、プログラミングで共有できそうなこと、IT関連でやってみたことなど、なんでも書いていきます。ヤドン可愛い

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!