2020/6/11 サイト公開しました！ 下記よりご覧いただけます。
Enchant Search DataBase（ESDB）
今回はマビノギエンチャント検索サイト「ESDB（仮）」の今後と現在の状況についてまとめました。
開発の大まかなスケジュールや各作業工程の説明、
また未公開の開発途中の画像の公開もしております！
ちょっと名前が安直すぎじゃない？
他になんかないの？
…エンチャント検索サイトの名前募集中です！！
開発スケジュール
ざーーーっくりではありますが、スケジュールを作成してみました。
スケジュールの概要
年内いっぱいまでかかんの？
3日で出来ない？
やめてしにたくない・・・
余力持ちつつ進めないと体力が持ちそうにないので、
申し訳ないのですが気長にお待ちいただければと思います。
現在の進捗状況
PC版はデザインモックアップが既に作成完了しました。
あとはPC版のデザインをスマートフォン版にどう落とすかです。
折角なので少しお見せしたいと思います！
デザイン完成しました！
こちらの記事で詳細を公開しているのでよろしければご覧ください。
エンチャント検索ヒット画面
少しヘッダーメニューも変更しました。
現在スマホ版でこのページをどう表現しようか迷っています。
エンチャント詳細ページ作ろうかなぁ・・・
ヘッダー左端（ハンバーガー）メニュー展開
仮置きでもアイコンはちゃんとしたかったんですが、
ホーム横のおうちアイコンや、履歴の横の時計みたいなアイコンが
デザイン作成ソフト内に見つかりませんでした・・・
更新履歴やお問い合わせなんかも作ったんだけど・・・
いや、どうでもいいって使わないってば
ヘッダー右端ボタンクリック
検索画面がしゅっと出てくるイメージにしようかなと思います。
トップで検索した条件が引き継がれているっていうのが理想でしょうか。
設計
基本的にはよくある設計作業をやってく感じになります。
君一人でやるんでしょ？
設計書なんていらなくない？
絶対頓挫するのでダメ、絶対
デザインモックアップ作成
デザインモックアップ作成では、先日投稿した以下2ツイートのように
非常にざっくりしたデザイン案を作成する工程です。
5年前にマビノギエンチャ検索サイトの更新が止まってるので、自分のスキルアップのために新しいサイト立ち上げてみようかなと思い立ちました。 目標はマビノギ全ユーザに気軽に利用してもらえるサイトにすることです。 pic.twitter.com/822w1d4jPc
— kuma (@jackumagic) 2020年5月9日
スマホだとボタンはこうだよな pic.twitter.com/3w5qTkD3qX
— kuma (@jackumagic) 2020年5月10日
本来はワイヤーフレームっていうレイアウト図みたいなものから 作るのですが、面倒くさくて工数削減のため省略しました。
シンプルだしワイヤーフレームも大体頭の中にあったのでここは省略しました。
選定ソフトウェア
- Justinmind Prototyper
というソフトを使用してデザインを作成しています。
こちらのソフトウェアについては後日記事をまとめようと思います。
デザイン設計
この工程ではデザインモックアップで作成したデザインを詳しく定義します。
例えば・・・
- 要素と要素の間の間隔はどのくらい？
- フォントは何使う？
- 各要素の名前（コードを書く際に非常に重要）は何にする？etc…
という実際サイトのデザインを作るときに必要になる情報を定義してあげる工程です。
ページ数は少ないので思ってるよりも早く終わればいいなぁ・・・
データベース設計
これ大事！超大事！
というのも、データの持たせ方がESDBにとって最重要事項だからです。
エンチャント検索データベースっていうくらいですしね・・・
一番力を入れて取り組もうと思ってるので設計期間は長めに設けてます。
なんかこう、そこはかとなくいいかんじによろしく～
（やめろ）
モジュール設計
画面の裏側で動くプログラムの設計です。
実際プログラムはSQL含めてそんなに難しい事しなくていいよなぁと思っているため、 さほど重要視してなかったり。
動作環境検討
これも結構頭を悩ませてます。なぜならお金が絡むからです。
良い環境で提供しようとすると当然良い金額がかかります。
多分公開ギリギリまで悩むだろうなぁ
安くて素晴らしい環境で提供してくれ！
制作
みんな大好きゴリゴリ開発！
なんかすごい事やってる感ない？上の画像
どう見てもただのhtmlとcssなのにね・・・
データベース作成
設計期間の割に作業期間短くね？
設計からテーブルを自動で起こせるしね。
設計書からデータベースのテーブルが起こせるため、
実作業はデータベースインストールとセキュリティの設定くらいです。
動作が遅ければデータベースのチューニングも必要になってきますが、
それはまた別の話・・・
データ入力
データベースにデータを入力する作業です。
単純に作業量が多い為、期間を長めにとってます。
実はこの作業、すごく困っていたんです。
どうやってデータを手に入れる？ という課題が付きまとっていたからです。
とても心強い味方が登場したため、課題解決しました！
この話はまた後日に。
フロントエンド
所謂見た目の開発だよっ！
ホームページとかかじったことのある方ならなじみのあるやつ使います。
私はこの作業は大好きなので 意外と短期間で終わるかもしれません。（フラグ
使用言語
HTML / CSS / JavaScript
バックエンド
所謂裏側のプログラム開発だよっ！
サイトとデータベースの中継や、いろいろな条件を指示出ししたりします。
使用言語はどれにするか決めかねています。
新しい言語使ってみたいなぁ・・・（フラグ
テスト
プログラム正しく動くよね？大丈夫だよね？
という 検査工程です。
ここミスると仕事では大変詰められます・・・
え？テストでは動いてるってなってるよね？
何で動かないの？ちゃんとテストしたの？
プログラムが正しく動くは私一人でもできますが、
使い勝手は皆様に試していただくほかありません。
もしかしたらテストユーザを公募することがあるかもしれません。
その時はどうぞお手柔らかにお願いします。
まとめ
やることたくさんだね～
できるの？
ちゃんと開発進めるので優しく見守っていてください・・・
