日頃の作業ログはobsidianで管理しているのですが、ログをグラフィカルに見直したり、便利機能を書きたかったのでオレオレpluginを書くことにしました。
こんな感じの作業ログ作成に対して便利機能を提供する予定です。
13:00 - 14:00::お昼 今日はチキン南蛮を食べた。 うまい 15:00 - 18:00::研究 いい感じにPythonを書いた
例えば、timestampのsnnipetを入れたり、お昼や研究などのカテゴリーをまとめて、1day,1week,etc.. で何時間それを費やしたのかグラフィカルに表記したい感じです。
やることは決まったので、早速書いていきます。
まず、plugin-templateがあるのでそこからコピーします。
GitHubのuse this template ボタンを押すといい感じにやってくれます。
次にREADMEに従ってローカルに落とします。
.obsidian/plugins/ くらいに置いておけば良さそうです。
フォルダの中に入って、npm i と npm run devを実行します。
ここまで設定すると、あとはobsidianからプラグインを有効化します。
環境構築は一旦終了!! 結構楽に環境構築できます。
あと、hot-reloadを入れておくと便利です。 デフォルトだとtsコードを書いてjsに変換したあとに、obsidianを再起動するかpluginをリロードしないと変換したjsが反映されません。 hot-reloadのプラグインがあると、jsを勝手に読み込んでくれます。めちゃいいです。
では、早速timestampを実装していきます。
this.addCommand({
id: 'assam-tea-timestamp',
name: 'Timestamp をえいやー',
editorCallback: (editor: Editor, view:MarkdownView)=> {
const date = new Date();
const timestamp = `#### ${date.getHours()}:${date.getMinutes()}\n`
editor.replaceSelection(timestamp);
}
});
コマンドパレットから timestamp あたりで呼び出すとこのコマンドが実行されます。
次にカテゴリーをまとめて、1day,1week,etc.. で何時間それを費やしたのかグラフィカルに表記します。 そのために、mdを読み込む必要があります。
// 1行ずつ読み込みできる
const doc = editor.getDoc();
for(let i=0; i<doc.lineCount(); i++){
console.log(doc.getLine(i));
}
あとは、正規表現でも書いてカテゴリ抽出すればいい感じです。 んで、カテゴリ抽出はできたんですが、chart.jsで引っかかりました。 tree shaking と呼ばれる Webpackのdead code を排除する機能に引っかかったようです。 あんまりよくわからない...
とりあえずrefをもとに回避して、いい感じに出力されることを確認しました。
現在は一日ごとにしかグラフを生成できないので、任意の日数で作れるように改造する予定です。
