ポータブルなプロジェクト管理システム: Indie Tracker というのを作りました¶
Updated on 2021-06-02
同じコンセプトで git サポートをやめた代わりに、ブラウザだけで動くようにしたアプリをつくりました
アプリケーションを作ったので紹介とか開発の感想などを書きます。
リポジトリ: Indie Tracker
コンセプト¶
reStructuredText が使えるポータブルなプロジェクト管理システム
課題管理システムというと最近はオンラインのサービスを使うのが主流かと思いますが、 総じてデータをまとめて保存する機能がない、あるいは保存できてもデータがヒューマンリーダブルでない、という問題があります。 これにより一度サービスを選んでしまうと後から移行する事が難しく、選択は慎重に行う必要性が出てきてしまいます。
これからサービス・アプリケーション作るぞという時にそんなことで悩んでいたくない、という事で 「とりあえず情報をまとめる場所として使えて、好きなタイミングでまとめてどこかに保管できる」システムとして Indie-Tracker というのを作りました。
なお、 reStructuredText については趣味です。
特徴¶
データは全て git で管理されます。これによりバックアップや複製が簡単にできます。
課題管理機能とWiki機能が使えます
reStructuredText が使えます
Mermaid が使えます。
で実際どうなの¶
コンセプトは良い線いってると思うのですが、実装としてはまだ概念実証の段階なので個人利用のみの想定です 。具体的な注意点としては、コンフリクトした場合にシステム的に解消する方法がないので手動で git 操作してもらう必要があります。
# 一人で使っている分にはコンフリクトが起こらないので、個人利用想定ということですね。
あとpushについても自動でやる機能がないので、適当なタイミングで git push を行ってください。
さらにはデータ構造は今後変更になる可能性があり、互換性がなくなるかもしれません。それでも良い・お試ししてみたいという方がいらっしゃいましたら使ってみてもらえると幸いです。
ここから内部実装の話¶
以下はまぁ自分の振り返り用と、とりあえず作った結果の共有みたいなものです。
基本設計¶
大枠としては aiohttp + svelte の二つで構成された、ローカルのサーバ + ブラウザで動かすシステムになっている。
aiohttp
Rest API と WebSocket でフロントと通信
dulwich を使って git リポジトリにコミット
docutils で reStructuredText の変換
svelte
GUI
サーバと通信
課題データを indexedDB に入れてフィルタリングができるようにしている
この構成にした理由は
課題のフィルタリングに何かしらdbを入れる必要があるな > indexedDB 使ってみようかな > jsでアプリアプリすることになるから、svelte 使ってみようかな
docutils で reSt を変換するから Python だな > aiohttp 使ってみようかな
という感じで、技術的な素振り目的も多分に入ってこの構成にしたが、サーバ側でオンメモリの sqlite 使って、サーバで html 生成する伝統的なアプリにした方がよほどシンプルになったのでは？という感が否めない。
他の構成案¶
Svelte どうなの¶
個人的にjsのパッケージは「依存パッケージがなるべく少ない」ものを優先しているので、依存0の svelte はかなり気に入っています
ちなみにお使いのパッケージの依存関係は package.json と同じディレクトリ上で
npm ls --allを実行すれば確認できますよ（ニッコリ）
依存がないためか、他と比較してビルドが早いです。このアプリの場合キャッシュなしで2秒ほどです。
複数人でやるような規模のアプリに使うのは現状では厳しいような気がします
コンポーネント化しないとそもそも binding がうまくいかない事があるので、コンポーネント化はしていく前提になるんですが、設計指針みたいなのがないとカオス化することは容易に想像できます
設計指針はコードを書きながら詰めていく段階なので、ある程度基本ができてる状態じゃないと分担できない
サードパーティ製のライブラリもまだ定番と言えるようなのがない
svelte-spa-history-router¶
Svelteで使えるSPAルーターはいくつかあるんですが、HistoryAPI ベースでかつ "/" 入りで正規表現が使えるものがなかったので自作することになりました（Wikiの実装に必要だった)
Svelte全般、よくあるアプリを作る分には何かしらのライブラリが既にあると思いますが、ちょっと道を外れると自前で書く必要があるというか、そういう所感です。
WebSocket¶
indexedDB と git の状態の同期が必要 > WebSocket でリアルタイム性だしとけば良いのかな？という安直な発想で使った
この辺はそもそも「データ同期」が一つのライブラリとして成り立つくらい大変なことなので割と設計ミスってる感が否めない
POST した結果をレスポンスでなく websocket で送り返すっていうパターン（そんなにメジャーなのかは知らないが）をやってみたが 例えば「POSTに成功したら別画面に遷移」などする場合、リクエストに応答した webSocket のメッセージというのを識別する必要があり、 そのためにはクライアント側でリクエストごとに id を振り当て、メッセージで元となるidをエコーバックして結果を処理するプロミスを 発火させる的な実装が必要ということになったが「そんなん自前で作るくらいなら最初からレスポンスで返せば良いな！」となった。
最後に¶
正直にいうと設計的に微妙だなぁという点は開発途中でいくつか感じつつ、個人的には、reSt + mermaid をプレビューしながら書けるという時点で便利なので、この段階で出してしまおうと思った次第です。
個人的な反省としては素振り要素を入れすぎた。
ポータブルなプロジェクト管理システム: Indie Tracker というのを作りました — ykrods note
https://www.ykrods.net/posts/2020/09/16/indie-tracker-0.1.0-released/