ESDB

【ESDB】今後の開発作業について&ちょびっと進捗【マビノギ】

2020/6/11 サイト公開しました! 下記よりご覧いただけます。
Enchant Search DataBase(ESDB)

今回はマビノギエンチャント検索サイト「ESDB(仮)」の今後と現在の状況についてまとめました。

開発の大まかなスケジュールや各作業工程の説明、
また未公開の開発途中の画像の公開もしております!

キャステ

ちょっと名前が安直すぎじゃない?
他になんかないの?

クマリオ

…エンチャント検索サイトの名前募集中です!!

開発スケジュール

ざーーーっくりではありますが、スケジュールを作成してみました。

スケジュールの概要

キャステ

年内いっぱいまでかかんの?
3日で出来ない?

クマリオ

やめてしにたくない・・・

余力持ちつつ進めないと体力が持ちそうにないので、
申し訳ないのですが気長にお待ちいただければと思います。

現在の進捗状況

PC版はデザインモックアップが既に作成完了しました。
あとはPC版のデザインをスマートフォン版にどう落とすかです。

折角なので少しお見せしたいと思います!

デザイン完成しました!
こちらの記事で詳細を公開しているのでよろしければご覧ください。

【ESDB】マビノギエンチャント検索サイトのデザイン完成したので公開してみるマビノギエンチャント検索サイト(ESDB)の主要デザイン案を全公開...

エンチャント検索ヒット画面

少しヘッダーメニューも変更しました。
現在スマホ版でこのページをどう表現しようか迷っています。
エンチャント詳細ページ作ろうかなぁ・・・

ヘッダー左端(ハンバーガー)メニュー展開

仮置きでもアイコンはちゃんとしたかったんですが、
ホーム横のおうちアイコンや、履歴の横の時計みたいなアイコンが
デザイン作成ソフト内に見つかりませんでした・・・

クマリオ

更新履歴やお問い合わせなんかも作ったんだけど・・・

キャステ

いや、どうでもいいって使わないってば

ヘッダー右端ボタンクリック

検索画面がしゅっと出てくるイメージにしようかなと思います。
トップで検索した条件が引き継がれているっていうのが理想でしょうか。

設計

基本的にはよくある設計作業をやってく感じになります。

キャステ

君一人でやるんでしょ?
設計書なんていらなくない?

クマリオ

絶対頓挫するのでダメ、絶対

デザインモックアップ作成

デザインモックアップ作成では、先日投稿した以下2ツイートのように
非常にざっくりしたデザイン案を作成する工程です。

本来はワイヤーフレームっていうレイアウト図みたいなものから 作るのですが、面倒くさくて工数削減のため省略しました。

クマリオ

シンプルだしワイヤーフレームも大体頭の中にあったのでここは省略しました。

選定ソフトウェア

  • Justinmind Prototyper

というソフトを使用してデザインを作成しています。
こちらのソフトウェアについては後日記事をまとめようと思います。

デザイン設計

この工程ではデザインモックアップで作成したデザインを詳しく定義します。
例えば・・・

  • 要素と要素の間の間隔はどのくらい?
  • フォントは何使う?
  • 各要素の名前(コードを書く際に非常に重要)は何にする?etc…

という実際サイトのデザインを作るときに必要になる情報を定義してあげる工程です。

ページ数は少ないので思ってるよりも早く終わればいいなぁ・・・

データベース設計

クマリオ

これ大事!超大事!

というのも、データの持たせ方がESDBにとって最重要事項だからです。
エンチャント検索データベースっていうくらいですしね・・・

一番力を入れて取り組もうと思ってるので設計期間は長めに設けてます。

キャステ

なんかこう、そこはかとなくいいかんじによろしく~

クマリオ

(やめろ)

モジュール設計

画面の裏側で動くプログラムの設計です。
実際プログラムはSQL含めてそんなに難しい事しなくていいよなぁと思っているため、 さほど重要視してなかったり。

動作環境検討

これも結構頭を悩ませてます。なぜならお金が絡むからです。
良い環境で提供しようとすると当然良い金額がかかります。

クマリオ

多分公開ギリギリまで悩むだろうなぁ

キャステ

安くて素晴らしい環境で提供してくれ!

制作

みんな大好きゴリゴリ開発!

キャステ

なんかすごい事やってる感ない?上の画像

クマリオ

どう見てもただのhtmlとcssなのにね・・・

データベース作成

キャステ

設計期間の割に作業期間短くね?

クマリオ

設計からテーブルを自動で起こせるしね。

設計書からデータベースのテーブルが起こせるため、
実作業はデータベースインストールとセキュリティの設定くらいです。

動作が遅ければデータベースのチューニングも必要になってきますが、
それはまた別の話・・・

データ入力

データベースにデータを入力する作業です。
単純に作業量が多い為、期間を長めにとってます。

実はこの作業、すごく困っていたんです。
どうやってデータを手に入れる? という課題が付きまとっていたからです。

クマリオ

とても心強い味方が登場したため、課題解決しました!
この話はまた後日に。

フロントエンド

所謂見た目の開発だよっ!
ホームページとかかじったことのある方ならなじみのあるやつ使います。

私はこの作業は大好きなので 意外と短期間で終わるかもしれません。(フラグ

使用言語

HTML / CSS / JavaScript

バックエンド

所謂裏側のプログラム開発だよっ!
サイトとデータベースの中継や、いろいろな条件を指示出ししたりします。

使用言語はどれにするか決めかねています。
新しい言語使ってみたいなぁ・・・(フラグ

テスト

プログラム正しく動くよね?大丈夫だよね?
という 検査工程です。

クマリオ

ここミスると仕事では大変詰められます・・・

キャステ

え?テストでは動いてるってなってるよね?
何で動かないの?ちゃんとテストしたの?

プログラムが正しく動くは私一人でもできますが、
使い勝手は皆様に試していただくほかありません。

もしかしたらテストユーザを公募することがあるかもしれません。
その時はどうぞお手柔らかにお願いします。

まとめ

キャステ

やることたくさんだね~
できるの?

クマリオ

ちゃんと開発進めるので優しく見守っていてください・・・