最近こういうサイトを作成しました。ざっくり言うと、議員さんに関する情報や発言などを分かりやすく見るためのサイトです。

　この発信をして以降、自分の自治体でも作ってみたいよ！というありがたい声をいただいたので、どの程度再現性があるかあまり自信はありませんがどういった構成でどういったサービスを使ったのかなどについて書いていきます。

　と言いつつ、こんな記事をのんびり書いている間に新しいものが出ました！江東区バージョンが爆誕してました。本当に光栄なことです。

サイトの構成

全体の概要

　まず、サイト全体のおおまかな構成について図示したのがこちら。

　大きく2つのwebサービスを使っています。アクセスした先のページはGlideを使って作成。そして、このサイトの肝であるワードクラウドの生成はStreamlitを利用。後は、各種SNSなどへのリンクがあるという感じになってます。

　次に、わたしが作成した部分についてもう少し詳細に書いていきます。

フロントページ：Glide pages

　最初に表示されるサイトとしてはGlide（正確にはGlide pages）というサービスを使ってます。これは何かというと、Webサイト作成の知識一切なしに、Googleスプレッドシートのデータだけを用いてノーコードで（プログラミングのコードを書かずに）ちょっとイケてるwebサイトが作れちゃうというサービスです。

　このサイトの見た目は、以下のようになっています。まぁ、なんかそれっぽいwebサイトの顔をしています。

　しかし、その元になっているデータはこんな無味乾燥なスプレッドシートなのです。

　ちょっと中身を見ていただくと各行に議員の名前があって、その列にその議員に関する情報があれこれ入っています。この各列のデータをどこに配置するのかをGlide pagesの管理画面でセットしていくと、画面が表示されるというのが基本的な作り方。

　たとえば、このサイトでは議員ごとのページがありますが、このページを構成しているデータは先ほどのスプレッドシートの1行のデータ。一部を示すとこんな感じです（矢印ごちゃごちゃでわかりにくいですね）。

　どのデータを「どの場所に」「どのような形式で」配置するかについての設定は画面上からぽちぽちやっていきます。詳細な説明はしませんが、「テキスト」とか「画像」とか「マップ」とか、どういう項目を作るかをまず画面の左側で選択、それに対してスプレッドシートのどの列を割り当てるかを画面の右側で選択する、というのが基本的な操作。

　こんな感じでぽちぽちやっていくと、最終的にこういうちゃんとしたwebサイトっぽいものを簡単に作ることができます。

　いわゆるレスポンシブ対応という奴で、特別な設定をすることなくPCで見てもスマホで見ても良い感じに見せてくれます。スマホで見るとこんな感じかと思います。

ワードクラウド生成：Streamlit

　次に、このサイトの肝であるワードクラウドの部分。これは、pythonでコードを書いて、Streamlitというサービスで動かしています。このStreamlitはpythonのコードだけでwebサービスが公開できてしまう、というスゴいサービスです。

　どの辺がスゴいかというと一般的にwebサイト作成に必要なHTMLの知識が不要ということです。皆さんが通常見ているwebサイトはHTMLという言語で書かれています。普通だとpythonでプログラムを書いたとしても、HTMLの知識がないとwebサービスは公開できないのです。しかし、このstreamlitというサービスを使うと、pythonのコードを読み込むだけで良い感じのwebサイトとして公開してくれちゃうのです。

　Streamlitへのリンクはフロントページ（Glide）の中にボタンとして置いてます。

　ボタンをポチっと押すと、Streamlitのページに飛びます。こんな画面です。このページは一見すると普通のwebサイトのように見えますが、pythonのコードだけで書かれています。これがStreamlitのスゴいところです。

　ここで実現しているのは主としてワードクラウドの作成。MeCabで対象の文字列を形態素解析して名詞のみを抽出、このテキストを使ってワードクラウドを作成してます。この部分は「python ワードクラウド」とかで検索するといっぱい情報が出てきます。

　ただ、作り出すと色々気になってくるもので、以下のような機能も作り込んでます。

　これらの具体的な実装方法は、また別記事でより詳細に書きます。

掲載データ

　掲載するデータについてもざっと書いておきます。このデータの準備がこのサイトを作るにあたって一番大変だった部分で、この部分が他の自治体で横展開するにあたっての大きな障壁になると思われます。

議事録に関するデータ

　今回の肝となる議事録に関するデータは、中央区議会のwebサイトからHTMLファイルをごっそりごっそりダウンロードしてきて、これをガチャガチャExcel上で加工して作成しました。最終的なフォーマットとしてはこのような構成。

　このデータの作成についても別記事で書きます。スクレイピングで持ってこれたらカッコよかったのですが内実はメチャクチャ泥臭いです。なぜ泥臭いのかというと、元になっているHTMLファイルがまったく構造化されていなくて無理くり整理せざるを得ないためです。

議員に関するデータ

　議員に関するデータは、区議会のWebサイトなどで拾ってきた情報です。これはどちらかというとおまけに近い情報ですが、ワードクラウドで関心を持った方について基礎的な情報を知りたくなるだろうということで集められる情報はまとめてみました。

最後に

　今回は、わたしが作成した中央区の区議会での議事録がざっくり見られるサイト「議員見える化プロジェクト@東京都中央区」の構成について書いてみました。

　なお、上記のpythonのコード全文も含め、このサイトを構成するすべての要素はGitHubに公開しています。Streamlitで作ったサービスを公開するためにはGitHubで公開しておく必要があるらしいためです。

　ということなので、そっくりそのままコピーして、議事録データだけを別の自治体のものに差し替えてしまえば、簡単にクローンサイトを作ることができるはずです（多分）。

　「あれ、これはこの書き方で良いんだっけ？」「ちょこっといじって動かなくなったら困るから一応元の記述残しとこう」とかのゴミコードがたっぷりで恥ずかしいですが。

　最後に、どういう思いでこのサイトを作ったのかについては以下の記事をご覧ください。