白パケ_エンジニア向けまる見え.mp4

うん、って思うと、うん。

丸紅の目標としては今年の年末までにボタン1個クリックしたら政資金収支報告書が自動でできるところまで行きたいなということ。

どうもこんにちは。

チームみらいの安野たかひろです。

本日はですね、みらいまる見え政治資金のソフトウェアエンジニアをして頂いております伊藤さん、え、通称エディさんに来ていただきました。

他の動画でも出しておりますけれども、今回の動画はですね、よりソフトウェアに、え、興味がある方向け、ソフトウェアエンジニア向けにですね、開発について色々詳しいとこお聞きしていきたいと思っております。

抜粋したものもですね、みらいまる見え政治資金の発表動画の中にも少し入れさせていただきますが、もうちょっとディープな話お聞きしたいと思いますので、興味ある方はこちらの動画も見ていただければと思います。

伊藤さん、エディさんに開発の話を色々伺っていきたいなと思っております。

よろしくお願いします。

まずですね、あの、最初にお伺いしたいのが、開発の工夫した点は難しかった点でどういったポイントがありましたか?

はい、えー、これ結構たくさんいろんなポイントがたくさんあってまあ、たくさんですよね。

はい。

色々あったんですけど、えー、大きくあげると、まずはこう会計的なこう整理の問題会計の整理まあ、短い期間でどう開発するかっていうスケジュールの問題スケジュールねあとこう汎用的なツールとしてこう出す時にどこを個別に作ってどこをこう一般的に作るかっていうはいこうはい整理はいはいの問題最後にあの、工夫した点としてはアクセシビリティに実は結構こだわってるんだよっていうことをお話ししてはいが、どういったところでした?

結構、毛色の異なるような仕組みなんです。

ただ、我々今回ベースとして使っている会計ソフトの方は企業で使われているような複式簿記というのを採用しているので、そこをどうやって変換していくかというところにすごい苦労がありました。

例えば未払い金であるとか、あとはクレジットカードのような形で、実際のサービスの発生と現金の移動が異なるような取引というのが複式簿記ではうまく扱うんですけれども、それを現金主義っぽく短式に変換するというのはデータ的に工夫が必要だったので、そこはかなり会計チームと議論を重ねてうまく動くように作っております。

これ、あまり知られてない事実として、政治家の会計ってめっちゃみんな言うんだけど、政治家の会計の仕組みだけちょっと特殊なんですよね。

短式、複式っていうところもありますし、その非目の分かれ方とかもあります。

ページの分け方で書かれてたりするんで、これ何が問題かというと、一つは日本中で使われてる会計ソフトを使っても政治資金収支報告書はできないってことなんですよね。

ここは会計の専門家の方にも関わってもらいつつ、どういう風にデータを持って変換すれば正当性がしっかりあって、かつ運用にも耐えるようなものができるかというのはすごく議論して工夫したポイントですね。

適用できるようになるので、みんなの目が入りやすくなるわけですよね。

っていうところはやっぱり作っていてより感じた部分ではありましたよね。

ですね。

2つ目、短い期間での開発ということかなと思いますが、いかがでしたか?

100日プランの一部として、今回このツールを作ったわけですけれども、やっぱりチームみらいとして見た時に初めてのアウトプットというか、皆さんへの約束したことをちゃんと守れるかっていう部分だったので、開発チームとしても絶対に遅れるわけにはいかないぞという風な形で、スケジュールにも苦労した部分がありました。

本来サポーターの皆さんも含めてこう一緒に開発をできたら良かったんですけれども、初期的には結構センシティブな情報も含むような会計データを扱うっていうところで、あんまりこう広くオープンにしづらいタイプの開発だったので、限られたメンバーでどういう風にこう、主者選択をしていくかっていうところを苦労して、スケジュール感的にはですね、ちょうど100日プランの中日が9月20日くらいにあるっていうことを計算しまして、そこまでに出せるようにしようというのを当初の目標でやって、その結果当初のデザインよりも磨き分けが進んで良いものとして出せるようになったっていうのがすごい良かったかなと思ってます。

当初のものより、やっぱ考えていくといろんな仕様が必要になって、でもその分、しっかりと磨き込まれたものが出せたなと思って思っています。

いうところで、結構難易度高いプロジェクトでしたよね。

3つ目のポイントなんですが、個別性と一般性の切り分けというところですけど、これってどういうことでしょうか?

今回作っているプロダクトがオープンソースソフトウェアであるっていうところ、これもまた、あの、頭を悩ませるポイントで、他の政党の方もこう是非利用してオープンなこう政治資金の公開っていうのをこう文化にしていきたいとかっていう風に思ってやっていたわけですけれども、

とはいえ、様々なこうユーザーさんがいるわけではないので、我々のためにまずは作るんだっていうところで、どこまでを一般的にこう扱える、汎用的に作るのか、でも全部を汎用的に作っているともちろん時間が足りなくなってしまうので、どこを個別に作っていくのかっていうところはすごく頭を悩ませたポイントでした。

そこ の あの 切り分け と して は 、 データを扱う部分は、後から変更がしにくいので、結構工夫して、抽象的に作り込んで、一方で、表示部分に近いところをは、利用者によってさっと変えれるってこともやりやすいので、結構ベタ書きをしてしまっているというか、チームみらいの特別用に作っているっていう部分があって、

なの で、 今 すぐ 他 の 政党 も 全部 使える よっていう風には ならないんですけれども、引き合いがあればすぐにでも対応できるような、作り方をしているつもりなので、この動画を見て我々もこのみらいまる見え政治資金やってみたいよっていう方がいたら是非お声かけいただけると頑張りたいと思うので、よろしくお願いしますという感じそうですね。

使っていただければ使っていただくほど、より日本のね、政治資金の問題っていうのが解決に近づくものだと考えているので、興味持っておられる方は是非、あの、使っていただきたいなと思いますし、正直ですね、このやり方をやった方が事務コスト下がりますというところまで我々プロダクト磨き込んでいきたいなと思っております。

例えば、あの、年末に政治資金収支報告書書くのってめちゃめちゃ大変なわけですけど今年の年末までに、まれおれの目標としては、ボタン1個クリックしたら、今あるもののデータをもとに政治資金収支報告書が自動でできるというところまで行きたいなと思っていますので、そこまで、え、行けるといろんな方に使っていただきやすいものになると思うので、是非そこまで行きたい。

そして皆さん、皆さんというのは、議員の方、政治家の方、政党の方、是非こういったもの使うってことを検討いただけるといいんじゃないかなと思います。

そして4つ目がアクセシビリティということでした。

アクセシビリティは、なかなかこう見た目には分かりにくいことかなと思うんですけれども、我々あの、国政制度としてこう広く公開するツールですので、伝わりやすいサイトを作りたいなっていうとこを個人的にはこだわりました。

具体的にはですね、例えばこうスクリーンリーダーというツールがあって、はい目が見えない方でも、え、ウェブサイトをこう読むことができるっていう風な、え、ツールがあるんですけれども、それはあの、サイトの方で適切に対応してないと、え、どこにどういう情報があるのかっていう構造が、え、分からないわけです。

について理解できるように作ったりだとか、そうやってアクセシビリティ機能に対応することで、なるべく多くの方に、我々の政治資金を見ていただけるようなサイト作りを心がけました。

実はこの辺りはAIの支援がすごくうまくできているとはい、そうなんですね。

1回、普通にサイトを作ってみた後に、AIにこのサイトにどういった点が足りないでしょうかって言ったら、アクセシビリティの配慮が足りないよって教えてもらって、それに従って一緒に作っていったことで、最終的にはGoogleスピードインサイトっていうサイトの評価をしてくれるようなGoogleのツールがあるんですけれども、そこでのアクセシビリティの評価でも90点以上というかなり高い点数が出るくらい、きっと理解しやすいサイトになってるんじゃないかと思うので、もちろん至らない部分があるとは思うんですけれども、なるべくそこは多くの方に見ていただけるよう変わったっていうのがありました。

やっぱりアクセシビリティ非常に大事なポイントだと思うので、そこにもこだわっております。

ちなみに、これもざっくり質問なんですけど、開発にどれくらいAIって使ったんですか?

実際の行動を書いている分量で言ったら、体感95%以上はもうAIが書いています。

95%以上がもうAIが書いたプログラムだと。

とは言っても、AIに丸投げしているわけではもちろんなくて、しっかりと品質も高くて、セキュリティ的にも安全なサイトを作るために、設計であったりレビューはかなりしっかりやることを心がけております。

AIが書いてきたコードのテストであったり、動作確認であったり、もしくはコードレビューはかなり責任持って人間がやるっていうふうに、コードを書く部分だけをAIに任せるという感じでうまくやりました。

その設計ドキュメントっていうのもどのくらいのものを書いたんですか?

GitHubというところに、あの、我々の今回作ったソースコード公開するんですけれども、そのドキュメントディレクトリに実際に使われたドキュメントがありまして、見ていただくと分かりやすいと思うんですけれども、オープンソースなんでね。

その部分も全部を公開されてます。

例えば、サイトの全体の構成であったりだとか、もしくは会計の変換のロジックはまずこういう変換を行って、こういうチェックを行って、こうやって取り込むんですっていう手順であったりだとか、そういったものをAIと会話しながら日本語で文章を作って、それに従ってコーディングをしてもらうっていうことをやりました。

実現したいことがしっかりと表現されていると、AIの支援っていうのも受けやすくなるけれども、ないとふわふわしちゃうっていうことなんですね。

デザインの部分っていかがでしたか?

デザインのご実装もまだAIにとっては難しいと考える方もいるんじゃないかと思うんですけれども、ほとんどの部分をAIにやってもらってます。

AIを使ってデザインの部分を実装するっていうイメージがない方いらっしゃると思うんですけど、これもできるんですね。

人間ですね。

実は、あの、愛知県から立候補していた山根さんがデザインをしてくれているんですけれども、ヒグマのMCPというツールがあって、これはAI向けにデザインをこんな感じだよっていうのをこう提供してくれるようなサービスなんですけれども、MCP経由でAIがデザインをこう見に行って、なるほどこういう線の太さなんだとか背景の色なんだってことをAIが理解してそのまま実装するっていうのがかなりうまくいきました。

すごい。

はい。

ほとんど僕は見てちょっと色違うんじゃないとかっていう風に、あの、指示をするだけでデザインもほぼできていますね。

うん。

あんまりご存知ないエンジニアの方もたくさんいらっしゃると思うんで、フィグマプラスMCP結構いけるんだっていうのは是非試してみるといいと思います。

ちなみにはその世の中的にはAIをプログラムかけるようになってきてるけど実際の現場で使うのまだまだ大変じゃないかっていう意見もたくさんあると思うんですけど、今回95%って結構使えたと思うんですが、それってなんでなんですか?

これは、どの、え、現場でもそういう風に使えるってわけでは決してないと思っていて、今回我々が作ったものがですね、まず新しく作って、あの、既存のコードとのこう整合性を取る必要があんまりなかったっということもありますし、あとは使っているライブラリーであったりとかフレームワークっていうものが、こう、AIに得意な、あの、Next JSっていうものを使っているので、ま、AIにとってはこう理解しやすい環境、で、そういった現場だったからこそ95%使えたんじゃないかなといううん。

うん。

感じですかね。

たというところがあると。

ちなみにこの技術スタックについても是非聞いてみたいなと思うんですけど、今ネクストJSっていう話ありましたか?

全体どういった技術で作っているんですか?

サイトを、えっと提供しているソースコードが動いているところはバーセルを使っていて、その後ろで、え、バックエンドとして、えっとデータを保存しているところや、え、認証機能を提供してる部分は、こう、スパベースを使っています。

うん、うん、うん。

スパベース、バーセル、ネクストJSみたいな、あ、そこうんうんうんに関してはどういった選定だったんですか?

その背景はあの、ネクストJSとバーセルの部分に関しては、ま、1つは我々のこう作っていくサービスというものがちゃんとこう検索された時に引っかかりやすいものを作りたいなっていうのがあって、このバーセルの提供している機能を使うとリッチなウェブサイトなんだけれども、それ検索にも引っかかりやすい。

うん。

ちょっとだけ専門的なことを言うと、サーバーサイドレンダリングはいとかISRと呼ばれるようなこう技術スタックで検索エンジンにとってもこう理解しやすいサイト提供しやすいっていうのが、えっとバーセルを使ってる理由ですね。

多分、あの、この動画のここまで見てる人は、あの、専門的なことをもうん知りたい人だと思うので。

はい。

もうちょっとだけ聞くと、ISRってちなみに何ですか?

ISRはですね、サイトにアクセスした時に基本的にはキャッシュを使って素早く表示をするんだけれども、その時にキャッシュの期限が切れていたら、次の分のレンダリングを裏で走らせつつすぐ返すことにああよって、どんなアクセスにもめっちゃ早くキャッシュを返せるようにするっていうSSGをさらにこう効率化したような仕組みですうんね。

うんうんうん。

がやりやすい。

そうですね。

それはなぜかと言うと、毎回データベースからデータを取ってくると、レンダリングに時間がかかってしまったりだとか、結局ユーザー体験が悪くなってしまうというところがあるんですけれども、今回ほとんど即時に返せるような構成になっているので、さっきのページスピードインサイトのユーザビリティとか表示速度でもほぼ99点とか、かなり高い数字を出せていて、多分SEO的にはだいぶ強いんじゃないかと思っています。

検索エンジン側からの評価も高いページになるということですね。

はい。

ちなみにスパーベースっていうのは何ですか?

はい。

スパーベースはですね、いわゆるMバースと呼ばれる製品カテゴリーに属するような、バックエンドのサービスでデータベースであったりとか認証であったりとかファイルのホスティングをノーコードで実現できるようなサービスになってます。

で、今回何でスパーベースを使ったかというと、イメージとしてはファイアベースとかに非常に近いんですけれども、データベースの形式が違っていて、主にはポスグレのリレーショナルデータベースを使えるっていうのがファイアベースと大きく違うところで、なぜそれを採用したかというと、移植性が高いからっていうところで選定理由にしています。

作っているので、そのほかの環境でこう利用しやすい方が現れた時にうまく対応しやすいようにってところが採用理由ですね。

後からMySQLに変えるとかそういったこともインターフェイスかましてからできるよということですね。

はい、その通りです。

はい。

ちなみに開発中でここがポイントだったっていうことってありますか？

はい、1個ありまして、サンキーーズという1番こう目玉のチャートのところで、え、詳細の区分、我々独自の区分と、え、法律上の区分を選べるようにしたよっていうのがあると思うんですけれども、実はこれ元々法律上の区分しかなかったんですうんよね。

ま、こう見ていただければ分かるんですけれども、法律上の区分ってこう政治活動費の中に、え、選挙活動費と組織活動費と宣伝費があるっていうような項目分けになっていて、正直分かりやすくはないなと。

こう生々しく何に我々がお金を使ってるのかっていうのがこう見えるわけではないな。

気持ちは湧かないですよね。

うん、そう、気持ちが湧かなかったんですよね。

そこでこうなんとかできないかっていうところで中盤で、え、こういうのがいいんじゃないっていう話が持ち上がって、せっかく我々は包括な区分を、あの、データ的には持っているので、それを出せるようなビューを作った方がいいんじゃないかっていう話になって、仕様をこう追加することで、え、今の詳細の区分というタブができています。

で、これとあの、ビラ、ポスター、印刷費ってこんなにかかってるんだとか、広告費ってだとか、こう、気持ちが湧くようになってはいし、て、自分でもこう手応えができたなっていうのがすごく印象に残ってますね。

気持ちが湧くように作って行っております。

まだこれ完璧なものだと我々も思ってなくて、今後も引き続き開発というのは進めていきたいなと思っているんですけれども、何か皆さんも思うところがあったらコメントなどいただければと思っております。

ソースで公開しているので、もっとこうした方がいいんじゃないかっていう部分があったら、ぜひぜひプロリクエストという形で、変更提案を送っていただいても大歓迎です。

ライセンスはAGPLになると思うので、他の方が代わりにフォークと呼ばれるものとしてまず持ってきた上で、自分たちなりにカスタマイズして使うこともできるようになってますので、そういったことやりたい方もいたら全然やっていただいて大丈夫というところでございます。

何卒よろしくお願いします。

よろしくお願いします。

ということで、今回は視聴者を振り切ってソフトウェアエンジニア向け、興味がある方向けに動画を撮らせていただきました。

チームみらい、本当に本気でソフトウェア開発もしているんだなということが伝わったらいいなと思っております。

是非、今後も引き続き、チームみらい応援していただけると嬉しいです。

チャンネル登録と高評価是非よろしくお願いします。

お願いします。