焼きぶろぐ

思いついたことをだらだら書いてます

Tracチケット管理ツールを作る:まとめ

Tracの複数プロジェクトを管理するをまとめました。

Tracチケット管理ツールを作る:要件定義 - 焼きぶろぐ

Tracチケット管理ツールを作る:設計 - 焼きぶろぐ

Tracチケット管理ツールを作る:フレームワーク選定 - 焼きぶろぐ

Tracチケット管理ツールを作る:アクション設計 - 焼きぶろぐ

Tracチケット管理ツールを作る:クラス設計 - 焼きぶろぐ

Tracチケット管理ツールを作る:実装 - 焼きぶろぐ

Tracチケット管理ツールを作る:運用 - 焼きぶろぐ

Tracチケット管理ツールを作る:リファクタリング - 焼きぶろぐ

完成品 github.com

Tracチケット管理ツールを作る:リファクタリング

Tracチケット管理ツールを作る:運用 - 焼きぶろぐの続き

INDEX:Tracチケット管理ツールを作る:まとめ - 焼きぶろぐ

いったんMymy開発シリーズの最終回です。。

実はリファクタリングに関してはQiitaの方で記事にもしました。

qiita.com

安定運用したらリファクタリングする

安定的に運用したソースがあれば、リファクタリングしてみましょう。

実際の業務上だと予算や納期などの制約が合ってなかなかリファクタリングする機会はないものですが、個人開発であればだれにも迷惑をかけないので自由にできますのでやって損はないと思います

リファクタリングで学んだこと

Qiitaの記事で言いたいことはほとんど書いたのですが、しっかり設計をしてからうまく作ったものだと思っていましたが現実はなかなかにひどいごみソースでした。
自分のソースを客観的に見れるいい機会だな・・・と思いながらリファクタリングしたのでした。

一方でこの数か月間安定運用をしてきたので、どのようなIN/OUTが発生するかをしっかり把握していました。
そのおかげでデバッグで発生パターンの検証が担保できていたので、思い切った大幅なリファクタリングすることができました。

本当は単体テストをしっかり組むべきなのですが、いまは正直ちゃんとはできていません。これは今後の課題です。

Mymyとしては今後も機能追加を進めていく予定ですが、突発シリーズ企画としては以上です。 ありがとうございました。

INDEX:Tracチケット管理ツールを作る:まとめ - 焼きぶろぐ

Tracチケット管理ツールを作る:運用

Tracチケット管理ツールを作る:実装 - 焼きぶろぐの続き

INDEX:Tracチケット管理ツールを作る:まとめ - 焼きぶろぐ

いよいよプログラムが完成したのであとは運用するのみ

実行環境構築

会社の個人端末(Windows)で実行環境を構築します。

  1. IISを起こす
  2. SQL Serverインスタンスを作成する
  3. githubからクローンする https://github.com/yakipudding/mymy
  4. vsでソリューションを開いて発行する
  5. IISでアプリケーションプールの作成、アプリケーションに変換して公開する
  6. 必要に応じてポートの設定とかSQLServerTCPの設定とかもろもろやる
  7. localhostで起動できればOK

実際に使ってみる

使い方はgithubの方にのっていますので省略

3月ごろから運用をはじめていま7月なので4か月ほど使いました。それなりに安定はしています。

実際に運用してみて出てきたバグと課題対応

使ってみた感じ

  • チケット管理ツールとしてはいい感じに使える
  • カテゴリでソートをかけたのがよかった。見やすくなった
  • メモ機能やお気に入りチケット登録はよい
  • 過去チケットで検索もいいかんじ

バグ:原因と対応

  • 項目に「,」が入るとCSV読み込みがバグる
    CSVの項目内に,が入ると、CSVA,"B,C",Dという形になるのだが、CSVから読み込む機能でこれを考慮してなかった。
  • カテゴリが未入力だと例外が発生する
    →カテゴリをスペースで分割する機能をつけていたが、nullの時に落ちることを考慮してなかった

・・・などなど他にもいろいろ出たので対応しました。

課題:原因と対応

  • ブラウザを半分に分割して横に並べることがあるので、レスポンシブ対応したい
    →正直UIの幅は意識していなかった(100%で考えていた)。cssで調整する
  • メイン画面から非表示するボタンがほしい
    (アクション設計には書いちゃいましたが、当初は編集画面に遷移しないと非表示にできませんでした)
    →追加機能で対応
  • メイン画面が遅い
    →当初チケットを取得するロジックで無駄なfor分を3回くらいぶん回していた。リファクタリングで対応。
  • 新規担当チケットを取得した際に、自動でカテゴリを付与したい
    →そのうちやる
  • プロジェクト登録で初期条件と表示列の設定をミスるとメイン画面表示で落ちる
    →チェック処理を組み込む(そのうちやる)

NEXT:Tracチケット管理ツールを作る:リファクタリング - 焼きぶろぐ

INDEX:Tracチケット管理ツールを作る:まとめ - 焼きぶろぐ

Tracチケット管理ツールを作る:実装

Tracチケット管理ツールを作る:クラス設計 - 焼きぶろぐの続き

INDEX:Tracチケット管理ツールを作る:まとめ - 焼きぶろぐ

一通り設計が終わったので実装を行います。

開発環境作成

MVCはVS同梱なので新規作成>プロジェクト>Web>ASP.NET Webアプリケーション>MVCでOK
EntityFrameworkも同梱なのですが最近は初期参照から外れたようで?なかったらPackageManagerからインストールします。

テンプレート選択

大がかりなものであればテンプレートはきちんと決めたほうが良いですが、シンプルなMVCでなんとかなるので標準のテンプレートから作成しました

開発中のすすめたやり方

  1. とりあえずテーブルを作成する

    1. WebConfigの接続情報を自分でたてたSQLServerのものに設定しておく(DBのインスタンスは作成しておく)
      ※これはLocalDB使いたくなかったから
    2. Modelのクラスを作成する
    3. 自動マイグレーション機能をONにする
    4. マイグレーションを実行し、テーブルが作成されたことを確認する
  2. とりあえずメイン画面の表示を目指す

    1. メイン画面のController、Viewを作成する
      (Controllerを作成するときの自動生成でOK)
    2. SSMSかVSでテーブルにテスト値を更新しておく
      (プロジェクト1つとチケット1つ)
    3. ControllerでDBからチケットを取得するロジックを書く
    4. View(Index)でチケットを表示するcshtmlを書く
      (TicketのControllerを生成しておき、そのIndexViewを流用)
    5. とりあえず初期表示されることを確認する
  3. Tracに接続する箇所の実装を作成する

    1. このあたりからControllerのロジックをLogicクラスに分離する
    2. Tracから取得するロジックを書く
    3. ・・・あとはクラス設計の通りにすすめる

こんな感じで少しずつ実装が完了しました。
(リリースは発行してIIS設定するだけなので割愛)

実装が完了したら、githubにコミットします github.com

NEXT:Tracチケット管理ツールを作る:運用 - 焼きぶろぐ

INDEX:Tracチケット管理ツールを作る:まとめ - 焼きぶろぐ

Tracチケット管理ツールを作る:クラス設計

Tracチケット管理ツールを作る:アクション設計 - 焼きぶろぐの続き

INDEX:Tracチケット管理ツールを作る:まとめ - 焼きぶろぐ

※実際はクラス設計はしっかりせずに実装をごりごりすすめていたので、実質設計なしからつぎはぎで実装していました
※本記事はリファクタリング後の結果です。とはいえ今見るとまだ改善の余地があるので、まだ試行錯誤中です。。。

Controller

リクエストの受付とDB接続を担当(DB接続は切り離してもよかったかも)

  • メインController
    • 初期表示時:TicketLogic.GetTicketメソッドを使用してチケットを取得。(DB情報は取得しておいて渡す)
    • メイン画面のViewに渡す
  • チケットController
  • プロジェクトController
  • プロジェクトカスタム項目Controller

Logic

Tracとの接続やチケットデータの加工などのロジックを分離

  • TicketLogic
    • GetTicketメソッド:初期表示用のチケット取得
    • Tracに発行するURLを作成してリクエス
    • Tracから取得したCSVをTicketクラスのインスタンスに変換してListにつめる
    • DBから取得したIDと比較してDB登録/Trac再問合せ&上書きをする
    • Listを返却(Projectの中にListが入っている)
  • CommonLogic
    • HttpRequestしてGetするところとかStreamからCSVに変換するところとか一般的なもの

Model

Tracチケット管理ツールを作る:設計 - 焼きぶろぐのモデル設計参照

View

  • メイン画面
  • 過去チケット
  • 各DBに対するIndex/Create/Edit/Delete/Details(自動生成)

NEXT:Tracチケット管理ツールを作る:実装 - 焼きぶろぐ

INDEX:Tracチケット管理ツールを作る:まとめ - 焼きぶろぐ

Tracチケット管理ツールを作る:アクション設計

Tracチケット管理ツールを作る:フレームワーク選定 - 焼きぶろぐの続き

INDEX:Tracチケット管理ツールを作る:まとめ - 焼きぶろぐ

要件おさらい

  • 管理するチケットの対象
    • 複数プロジェクトの担当チケットを一画面で表示したい
    • プロジェクトによっては、自分が表示させたいチケットを登録したい
    • 自分が過去担当していたチケットは表示させておきたい
  • 表示する項目
    • プロジェクトごとに表示する項目を変えたい
    • チケットごとにメモとかリンクとかを保存して表示したい
  • 画面
    • メイン画面:今担当しているチケット一覧が見たい
    • 過去チケット一覧画面:過去に担当していたチケットを一覧で見たい。検索もしたい

メイン画面:担当チケット一覧画面

初期表示時

  1. チケット情報取得:プロジェクトごとにループする
    1. Tracから担当チケットを取得する
      (プロジェクトテーブルに登録された初期表示条件URLを使用)
    2. DBからプロジェクトに紐づくチケット一覧を取得する
    3. Tracから取得したチケットのうちDBで取得したチケットに存在しない者があったらDBに登録する
    4. DBで取得したチケットで表示フラグが立っているもののうち、Tracから取得したチケットに含まれていないものがあれば、Tracから最新情報を取得して上書きする
  2. メイン画面Viewに返却

新規リンク(+アイコン)押下時

チケット新規画面へ遷移(プロジェクトに紐づくチケットを新規登録可能。お気に入り登録のこと)

編集リンク(チケットタイトル)クリック時

チケット編集画面へ遷移(カテゴリ、状為、メモが登録可能)

過去チケット一覧リンク(三みたいなアイコン)押下時

過去チケット一覧画面へ遷移

過去チケット一覧

  • パラメタ:プロジェクトID

初期表示時

プロジェクトに紐づくチケットの一覧を表示する

検索ボタン押下時

検索フォームに入力されたタイトル、カテゴリ、表示状態(表示のみ・非表示のみ・すべて)の条件で抽出した結果が表示される

プロジェクト一覧画面

プロジェクトの一覧が表示される。新規・修正・削除・照会画面への遷移が可能

(プロジェクト新規・修正・削除画面はそのままなので省略)

プロジェクトの照会画面

プロジェクトの情報とプロジェクトカスタム項目一覧が表示される。カスタム項目の新規・修正・削除が可能

NEXT:Tracチケット管理ツールを作る:クラス設計 - 焼きぶろぐ

INDEX:Tracチケット管理ツールを作る:まとめ - 焼きぶろぐ

Tracチケット管理ツールを作る:フレームワーク選定

Tracチケット管理ツールを作る:設計 - 焼きぶろぐの続き

INDEX:Tracチケット管理ツールを作る:まとめ - 焼きぶろぐ

ある程度設計が固まってきたところでフレームワークを選定する。

アプリの種類

Webアプリ

チケット管理アプリとしてはデスクトップアプリで制作しても何の問題もないのですが、業務がWeb系なので勉強がてら。

サーバ環境(OSとMW)

Windows×IIS×SQLServer

今回は会社の自分の端末(Windows)で完結する環境を考えていたので、Windows一択です。
(開発部権限によりIISSQLServerを自分で建てることができたのが大きい。これらは普段の開発でも使っているため)

ちなみにWebアプリとして公開するとなると、逆にLinuxになるんじゃないかと思います(レンタルサーバの関係で)
LinuxとなるとHerokuとかを使えばOSとかMWまわりを一元管理できる?みたいなのでそういう選択肢がありますね。

言語とフレームワーク

C#×ASP.NET MVC5×EntityFramework

WindowsでWeb開発やるならということで。。経験あるし。
EntityFrameworkはちょっと遅かったりするのですが個人開発においてはAutoMapperと自動マイグレーション機能が便利なので採用しました

まぁここは個人開発レベルでは悩んでもしょうがないのでさっさと決めましょう。
勉強したいのであれば頑張って未知の領域にチャレンジするのも大切です(2017夏休み開発はまさにそんな感じでした。。)

NEXT:Tracチケット管理ツールを作る:アクション設計 - 焼きぶろぐ

INDEX:Tracチケット管理ツールを作る:まとめ - 焼きぶろぐ