可視化と可視化と可視化 とrclone Tomoaki Teshima tomoaki_teshima tomoaki0705 tomoaki_teshima tomoaki0705

Agenda •可視化 •可視化 •可視化 • rclone 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 2

Sankey diagram サンキー・ダイアグラム（英語: Sankey diagram）は ⼯程間の流量を表現する図表である。⽮印の太さで流 れの量を表している。特にエネルギーや物資、経費等 の変位を表す為に使われる。 Sankeyの名前の由来は 1898年に初めてこの形式の表を⽤いた公刊物 （Minutes of Proceedings of The Institution of Civil Engineers中の蒸気機関におけるエネルギー効率につ いての記事）の著者であるアイルランド⼈ヘンリー・ フィニアス・リオル・サンキーに因む。 1) サンキー・ダイアグラム フリー百科事典『ウィキペディア（Wikipedia）』 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 3

Tools • SankeyMATIC: Make Beautiful Flow Diagrams 2) https://sankeymatic.com/build/ • ブラウザ上でインタラクティブにSankey Diagramが作れる 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 4

Pros and Cons •内訳を表すのに向いている •視覚的に太さで流⼊出量がわかる •⽐で表される数字は向いていない （ ex:ゲインが5倍、シンクロ率400%） •⼊出流量の総和が合わない数字には向いていない 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 5

Contents to Visualize 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 6

これでもう（確定申告）怖くない！ • 年収768万円 • ⼊院、治療費などで⾃⼰負担33万円 • フリマサイトでレトロゲームコレクションを売ったら30万円で 売れた（取得費2万円） • ふるさと納税10万円分 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 7

⼯夫した点 Sankeymaticでは [その他すべて]が指定できる 課税対象から課税額を 計算するのは不向きな[割合] ふるさと納税は寄付額から2000円⾃⼰負担分を差し引いた額を控除 医療費控除は負担額から100,000円⾃⼰負担分を差し引いた額を控除 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 8

Engineering • 可視化→嬉しい • 図をメンテナンスするつもりは⽑頭ない • SankeyMaticはテキストでデータを記述する • →そもそも⼊⼒のデータに多数の計算が必要（控除額etc..) • →残業代などで給与が変動すると全て計算し直しになる 給与収入 [5812000] 所得 給与収入 [1868000] 給与所得控除 雑所得 [280000] 所得 雑所得 [20000] 取得費用 自己負担額 [2000] ふるさと納税 所得 [98000] ふるさと納税 : 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 9

結果 • ⾃分専⽤確定申告エクセルの できあがり • ！！注意！！ • データは適当な値 • 計算結果は保証しません • ご⾃⾝の確定申告はご⾃⾝で eTax等ご利⽤ください 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 10

Agenda •可視化 (Sankey Diagram) •可視化 (Plotly) •可視化 (Kingraph) • rclone 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 11

⾦⽥⼀少年の事件簿 •連載開始は1992年の10⽉ •では連載終了はいつ？ A. 2001年 B. 2013年 C. 2017年 D. 2024年 •正解はWikipediaには書いてある 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 12 5) ⾦⽥⼀少年の事件簿 フリー百科事典『ウィキペディア（Wikipedia）』

実はどれも正解と⾔える 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 13

2025年1⽉から新シリーズ開幕 A. 2001年→最初の連載終了 B. 2013年→20周年記念シリーズの連載終了 C. 2017年→R（リターンズ）の連載終了 D. 2024年→37才シリーズの連載終了 6) ⾦⽥⼀パパの事件簿 - 天樹征丸/さとうふみや / Ｆｉｌｅ１ めざせ名探偵 | コミックDAYS https://comic-days.com/episode/2550912965038855674 よりバナーを引⽤

⾦⽥⼀⼀族の家系図 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 15

Gantt chartとKingraph • 特定の期間を複数表すガントチャート • エンジニアにとってのガントチャートは⼯程表＝各⼯程の間に依存関 係があるものだが、今⽇紹介するのは純粋に期間だけを表す • 親族の関係を表す家系図 • 婚姻/出産などの関係を表す家系図 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 16

Gantt Chartを描画するPlotly •Pythonのパッケージ •Matplotlibに依存 •ガントチャートに限らず数多の グラフを扱える 7) Plotly Python Graphing Library https://plotly.com/python/ 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 17

歴代xxに向いているデータ •⾃分の引っ越し履歴 •⾃分の歴代スマートフォン •⾃分の職歴 •笑点の⼤喜利メンバー変遷 •歴代総理⼤⾂の在任期間 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 18

家系図のメンテナンス • 10年以上家系図をこっそりメンテナンスしている • 図をメンテナンスするつもりは⽑頭ない • ⾃前のCSVとGraphvizで描画 • Node.jsを使うkingraphに移⾏ • その間実⾏環境もHWも何度も壊れている 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 19 8) rstacruz/kingraph: Plots family trees using JavaScript and Graphviz https://github.com/rstacruz/kingraph

家系図のしくじり • ⾃前のCSV→dot⾔語 →Graphvizで可視化 • 直⾓の線を描くのに失敗 • 離婚した親戚のために全部設計 しなおし • Kingraphは養⼦/元夫婦など のにも柔軟に対応 2025/2/24 20

親戚の結婚や出産、何回ありましたか？ • 次回家系図を更新するときに家系図を⽣成する環境がない • Dockerを利⽤すればSW的環境はキープできる • しかし、HWの更新が必要なレベルで更新の間隔があく • そうだ、Github Actionsを使おう 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 21

Github Actionsの概要 push commit clone/fetch git checkout docker pull ghcr.io/xxxxx/xxxxx:latest mkdir artifacts for file in *.yaml; do docker run ghcr.io/xxxx/xxxx I > hoge.png done Pros VS Cons • 無料枠内で使える • HWのメンテナンスから解放される • Dockerのイメージ、DockerfileもGithubに置ける 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 22 9) GitHub Actions ドキュメント - GitHub Docs https://docs.github.com/ja/actions

Agenda •可視化 (Sankey Diagram) •可視化 (Plotly) •可視化 (Kingraph) • rclone 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 23

Github Actionsでビルドした図は？ • 今までArtifactとしてまとめて、ダウンロードしていた • バックグラウンドでDropboxに降ってきてくれたら嬉しいのに • DropboxのAPIをセットアップすれば可能 • 何か⾯倒くさそう • →そこでrclone！！ 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 24

rclone とは • あらゆるクラウドストレージに対応している フロントエンドCLIツール • Amazon S3、Box、Cloudfare、Dropbox、 Microsoft Azure Blob/Files storage、OneDrive 、 Google Drive、Google Cloud Storage、Google Photo • FTP、HTTP、SMB、SFTP、WebDAV 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 25 10) Rclone 公式サイト https://rclone.org/

rclone VS Dropbox API • Dropbox API • トークンを発⾏してWebブラウザ経由でアクセスして。。。 • →⾃分にはバーが⾼く感じた • rclone • URLが表⽰され、そのURLにDropboxにログインしたブラウザでアク セスするだけ • →リモートの場合はセットアップ済みのconfig.jsonを埋め込めばアク セス可能 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 26

Github Actions Marketplace push commit clone/fetch git checkout docker pull ghcr.io/xxxxx/xxxxx:latest mkdir artifacts for file in *.yaml; do docker run ghcr.io/xxxx/xxxx I > hoge.png done rclone copy artifacts dropbox:xxxxx Dropbox 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 27

Summary • 可視化 (Sankey Diagram) • SankeyMaticというWebアプリを紹介 • ついでに⾃前確定申告計算Excelを作成 • 可視化 (Plotly) • Gantt Chartを作るPlotlyを紹介 • 可視化 (Kingraph) • Node.jsで作られたKingraphを紹介 • ⻑期にわたってメンテナンスするアイディアを紹介 • rclone • あらゆるクラウドストレージをコマンドラインから操作 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 28

参考⽂献 1) サンキー・ダイアグラム フリー百科事典『ウィキペディア（Wikipedia）』 2) SankeyMATIC: Make Beautiful Flow Diagrams https://sankeymatic.com/build/ 3) 令和6年分 確定申告特集 https://www.nta.go.jp/taxes/shiraberu/shinkoku/tokushu/index.htm 4) 【e-Tax】国税電子申告・納税システム(イータックス) https://www.e-tax.nta.go.jp/ 5) ⾦⽥⼀少年の事件簿 フリー百科事典『ウィキペディア（Wikipedia）』 6) ⾦⽥⼀パパの事件簿 - 天樹征丸/さとうふみや / Ｆｉｌｅ１ めざせ名探偵 | コミックDAYS https://comic-days.com/episode/2550912965038855674 7) Plotly Python Graphing Library https://plotly.com/python/ 8) rstacruz/kingraph: Plots family trees using JavaScript and Graphviz https://github.com/rstacruz/kingraph 9) GitHub Actions ドキュメント - GitHub Docs https://docs.github.com/ja/actions 10) Rclone 公式サイト https://rclone.org/ 2025/2/24 第63回 コンピュータビジョン勉強会＠関東 29