また１からこつこつと

最高はひとつじゃないと信じてまたがんばります。

柏市長選挙のまとめサイトを作った話

2017年10月22日は全国的に衆議院議員総選挙だったけど、実は同時に柏市長選挙も行われてた。
今回の市長選挙は完全に衆院選の裏に隠れてしまっていたので、どうにかみんなに知ってもらえないかと思いサイトを作った。

kashiwa-vote.org

やろうと思ったきっかけ

japanchoice.jp
このサイトを見て、これの柏市長選版あったらいいよなと大学への登校中に思ったのがきっかけ。
そこからなんとなく頭のなかで実装したい機能とデザインを考えて、次の日の朝までにリリースしてやろうと決めた。
ちなみにその日は夜遅くまで会議があって、実際に作業に移れたのは22時を過ぎてからのことだった。

作った機能

主な機能は以下の通り。

  • 3候補の選挙公報から公約を抜き出して掲載
  • 市内の投票所一覧をGoogle Map上にマッピング
  • 投票所番号を入力するとGoogleMap上に投票所を表示
  • 投票所情報をAPIとして公開
  • 得票数をリアルタイムで更新・表示

それぞれ作ってみての雑感を書いておく。

公約の掲載

柏市役所のホームページで選挙公報のPDFが公開されてたので、こちらから情報を取得。
http://www.city.kashiwa.lg.jp/soshiki/230100/p043294_d/fil/senkyokoho.pdf
PDFそのものがモノクロだったので候補者の顔写真も残念ながら白黒になってしまった...
これ、テキストが選択できなかったのですべて手作業で移植した。これがめんどくさかった。

投票所一覧をGoogleMap上にマッピング

drive.google.com
マップ自体はここで見られる。
元データは同じく市役所のHPから。
www.city.kashiwa.lg.jp
ここには投票所番号と住所・建物名が記載されていたので、ひとまずこれをすべてGoogleスプレッドシートにまとめた。
その後、GoogleMapにスプレッドシートのデータをインポートしてマッピングしたが、Googleマップに登録されていない建物名とかがあって結構大変だった。
この作業によってGoogleマップ上に2つの近隣センターが追加された笑

投票所番号を入力するとGoogleマップ上に投票所を表示

どうせやるなら情報まとめるだけじゃなくて何かしらのインタラクションつけたいよねってことで作った機能。
本当ならこれもスプレッドシートから情報持ってきたかったんだけど、とにかく急いでたのでデータベースを作ってそこから情報を持ってくるようにしてしまった。技術的負債...
これもGoogleMapAPI使って、住所を検索させてその情報を表示させてる。

ここまでの結論として、Googleは神。
このサイトはGoogleのサービスなかったら成り立ってない。ありがとうGoogle。

投票所情報をAPIとして公開

http://kashiwa-vote.org/api/
↑で書いた投票所一覧と個々のデータをJSON形式のAPIとして公開した。
オープンデータもどき。
まだ緯度経度情報を更新していないので、返ってくるデータが0なんだけどそこはあとで対応する。

得票数をリアルタイムで更新・表示

f:id:mjk0513:20171023225617p:plain

これも手作業。選管がWeb上で公開してる情報をもとに手入力。さすがにHTMLにベタ書きではないけど。
本当は開票率を表すプログレスバーも作ってたんだけど、まさかの開示されないという。

と、ここまでの作業 + ドメイン取得と移管を 22時から4時くらいまでで終わらせた。
ちなみに全体で使ってるのはBootstrapで、サクッとそれなりのサイトつくるときにはほんと便利なフレームワークだなと改めて思った。
大方のユーザはモバイル端末から見るだろうからレスポンシブ対応はマストだと思ってたので、ほんとお世話になりました。

世間の反応

Facebookに投稿したところ結構みんなシェアしてくれた。友達じゃない方もシェアしてくれたみたいでありがたい限り。
記事も出た。
kashiwa-times.jp

Googleアナリティクスを使ってデータ取ってたのだけど、23日の時点では以下の通り。
f:id:mjk0513:20171023232156p:plain
即席で作ったものにしてはなかなかのインパクトかな。1000ユーザ超えたのは嬉しい。

この後どうするか

自分が柏市に住民票を置いている限り（＝柏市長または市議会議員選挙への選挙権がある限り）は続けようかと思う。
これはあくまでも自分の趣味と捉えるくらいがちょうどいいな。変に大きくするとめんどくさそう。
というわけで、趣味の範囲内でドメイン代も払って細々と続けていく。
3日後くらいにはいまのページをアーカイブページに移行させて、トップページとかもわかりやすくなっているはず。
あと法律周りが調べてもうまく出てこないのでもう少しリサーチしたほうがいいかもしれない。

とにかく、見ていただいた皆様ありがとうございました。
地方選挙こそ身近に感じるべきものなので、みんな投票行きましょうね👍

サンフランシスコ滞在記Day8：AltSchool, DG717

8日目です。もうそろそろ終わる。

AltSchool

AltSchoolとは元Googleの社員の人が作った新しい形のシリコンバレー流な学校。
wired.jp
この記事を前に読んだときから、すごく見てみたいと思っていた。たまたま従兄弟がこの学校の生徒ということもあり、連絡をとって交渉してもらったところ運良く見学OKがでた。
普段はなかなか外部の人間の見学は許可してないらしく、とてもラッキーだった。


学校側から、子どもたちの写真はSNS等にあげないでくれと言われているので、詳しい話は後日自分のやってる勉強会で報告しようと思いますが、とりあえず今まで見たことのないスタイルの学校だった。
少人数教育で、1クラス8人〜12人くらい。朝の会で子どもたちは自分が今日何に取り組むかについて発表する。この日のテーマはSTEAMだったので、それをがんばると言ってる子が多かった。
ChromeBookとGoogle Documentを使ってエッセイを書く授業を見たり、STEAMの授業では子どもたちが川渡り問題をプログラムで解決してたりと、かなり先進的なテクノロジーの使い方をしている様子を見れた。
驚いたのが、みんなタイピングがとてもはやいこと。小学５年生の女の子は自分と同じくらいタイピングできてて、どうしてできるのか聞いたら「ずっと家でタイプしてるからね」とのこと。この学校では、小学校低学年はタブレットを、小学校高学年から中学生はChromeBookを使っている。
とても丁寧にいろいろ説明してくれた先生方、ありがとうございました。大変勉強になりました！

DG717

Digital Garageという日系企業がやっているコワーキングスペースDG717にお邪魔した。
www.garage.co.jp
サンフランシスコにある唯一の日経コワーキングスペース。
いろいろな人にあったほうがいいぞと言われていた外村仁さんにお呼ばれして、シリコンバレーの動向をキャッチアップする勉強会にも参加させてもらった。
日本に帰ってもいろいろなことができそうで、すごくいい時間を過ごすことができた。ありがとうございました！


風邪を引いた

最後の最後で風邪引いた。DG717を出たあたりから本格的にやばくなってきたので、この日はすぐに帰って寝た。
僕のサンフランシスコ一人旅はこれにて終了。SFOからNRTまでは11時間超えのフライトだけど、太陽フレアがこのタイミングでくるとはなかなかにエモい。無事に帰れることを願う。

サンフランシスコ滞在記Day7：GoogleStore, FacebookHQ, Stanford University

7日目です。ついに1週間。そろそろ現地に溶け込んでそう。

Google Store

前回Google行ったのが休日でStoreが空いていなかったので再度訪問。


ここでもまたTシャツやらいろんなグッズを買った。こっちにきてからTシャツ増えまくってる。たぶんスーツケースに入りらない。
Cal Trainに乗るのも慣れたもんで、移動の車内はずっと仕事してる。時差の関係で夜寝ている間に連絡きまくって対応しないといけないことがたくさんある。消化するのに1時間ちょいという時間はとてもちょうどいい。

Facebook HQ


僕が本格的にプログラミングを勉強しはじめたのは、映画「ソーシャル・ネットワーク」を見てFacebook作りたいなと漠然と思ったからで、かなり聖地に近い場所に来ることができてテンションあがっていた。
本社屋は立入禁止なので、外にある看板を撮影するしかない。

これで見たかったオフィスのほとんどを見ることができた。
雑感としては、サンフランシスコにオフィスがある会社はウェイな雰囲気、シリコンバレーにオフィスがある会社はドーンと構えているタイプという感じがした。でもぜんぜんそんなことなくて、例えばGoogleの本社は昔シリコングラフィックスという会社が入っていたけどそこがダメになったから代わりにGoogleが入ってたり、Facebookもサン・マイクロシステムズがもともと入ってた場所にある。だから入れ代わり立ち代わりが本当に激しい場所。すごくのどかな田舎なんだけど、内部では熾烈な争いが繰り広げられてる。

Stanford University

大学のキャンパスに行く前に、ショッピングセンターでお昼を食べた。



ここでよくわからない謎のサラダを食べた後に、キャンパスまで歩いてみることに。
なんかアメリカに来てから距離感覚が全然つかめなくて、GoogleMapで見たとおりに歩いてたら40分くらいかかった😅
暑すぎて熱中症で倒れるレベルのときによくも行軍したなと思いつつ、ショップでキーホルダーだけ買って帰った。

サンフランシスコ滞在記Day6：Best Buy, Exploratorium, Sightglass

6日目です。今日も市内観光。

Best Buy

言わずと知れたアメリカの家電量販店。なんかアメリカにしかないおもしろいガジェットとかあったら買ってみたいなと思い行ってみた。
でも結局のところほとんどの製品は日本でも売ってるからあんまり目新しさはなかった。
と思っていたらGoogle Homeを発見。2017年夏に日本でも発売されるらしいけどAppleのHomePodがでたらどうせそっちを買うので、それまではGoogle Homeを使ってみようということで購入。


日本に帰ったらいろいろと遊んでみよう。すでに弊部屋の電気はコントロールできるので、手始めにこれとGoogleHomeを接続してみよう。

Exploratorium

科学博物館。すごく広大な敷地のなかに100以上の体験展示がある。
主に物理化学についての展示が多くて、大人でも楽しめるものが多かった。
この中に、tinkering studio というワークショップスペースがって、子どもたちが電子工作してた。
f:id:mjk0513:20170906022922j:plain
f:id:mjk0513:20170906023038j:plain
日本ではなかなか定着しないティンカリングという言葉だけど、普通にこういった場所があるのはさすがだなぁという感じ。よさみです。

Sightglass Coffee

サンフランシスコで有名なサードウェーブコーヒーショップ。


コーヒーの味のクオリティはもちろんのこと、店内もおしゃれでかっこよかった。

サンフランシスコ滞在記Day5：Golden Gate Bridge, Fishermans Wharf, Lombard Street

5日目です。今日はサンフランシスコ市内の観光日。

Golden Gate Bridge

サンフランシスコといえばここ、みたいな観光名所。


f:id:mjk0513:20170904152625j:plain
サンフランシスコは霧がすごくて、これでもよくみえてるほうらしい。
3連休の真ん中とあって、観光地だけでなく市内も激混み。駐車場はどこもいっぱいで止めるのがすごく大変だった。

Fisherman's Wharf


f:id:mjk0513:20170904153113j:plain
f:id:mjk0513:20170904153427j:plain
おいしいカニやロブスターが食べられるエリア。ここではクラムチャウダーを食べた。おいしい。クラムチャウダー大好き。
f:id:mjk0513:20170904153324j:plain

Lombard Street


すごくくねってる坂道。ちょうど上の方に位置しているから一望できるポイント。


ここで、暑いのと道路が混みすぎてるので一旦家に戻ることに。風が心地よかったので少しウトウトしてたら3時間経ってた。19時。後半の予定が吹っ飛んでしまった...

夕方のお散歩


これで今日が終わるのはもったいないので、ちょっと1人でふらふら散歩してみることに。
近くのスタバまでいってコーヒー飲んで、スーパーマーケットに行った。地元の普通のスーパー行くとそこの文化とか風土がわかるってよく聞く。まあアメリカのスーパーの雰囲気はコストコに近いから、慣れてるっちゃ慣れてるけど、この雑多な感じがやはり新鮮ではあった。
このMEGA MONSTER気になる。

サンフランシスコ滞在記Day4：シリコンバレー, Computer History Museum

4日目です。もうずっといるような気がしてきた。

シリコンバレー探訪

今日は知り合いとなった方が車でシリコンバレーのTech企業をいろいろ見せてくださるということで、朝一の電車にのってサンノゼへ。





この近くには自動運転を研究している会社がたくさんあって、百度もそのひとつらしい。本当に中国版Googleを目指してるんだなぁ。
ここ結構おもしろくて、インキュベーション施設なんだけどメンタリングサポートとかはとくにない。でも環境は整ってて、泥臭いところでイノベーションを起こそうとしている人たちが集まっている。Dojoという名前にすごく親近感がわいた。


NASAの研究施設。ここではスペースシャトルをどうやって飛ばすかということが研究されてて、下の写真のような施設で大きな風をおこして実際に飛ばしてみるらしい。
f:id:mjk0513:20170903235633j:plain

Google探訪

GooglePlexはGoogle本社の愛称みたいなもので、街の一角がすべてGoogle関係オフィスだからこう名付けられたそうだ。まじでデカイ。


次期AndroidOSのバージョンはOreoだから、Oreoを身にまとったドロイドくんがいた。
f:id:mjk0513:20170904000033j:plain
この自転車はGooglePlex内に大量にあって、好きに乗って好きに放置していくスタイルらしい。
あきらかに観光客も乗ってたからそこらへんも寛容なのかな...?
f:id:mjk0513:20170904000328j:plain


大量のドロイドくんがいるところもある。

Computer History Museum

いろいろな人から行ったほうがいいぞとオススメされていた、Comouter History Museum。シリコンバレーを中心としたコンピュータの歴史について展示されている博物館。


コンピュータオタクはまじで楽しめる場所だと思う。すごく楽しかった。まず、パンチカードが出てきた時点でテンションあがるよね。話には聞いてたけど実際に見たのは初めて、みたいな展示が多々ある。

実際に使われていたパンチカード

f:id:mjk0513:20170904000910j:plain

ストレージの大きさの変容

f:id:mjk0513:20170904001012j:plain

プログラミング言語の変容（Squeakがあった）

f:id:mjk0513:20170904001035j:plain

ムーアの法則

f:id:mjk0513:20170904001053j:plain

Pixarがつくったアニメーション用のコンピュータ

f:id:mjk0513:20170904001137j:plain

Alto（Xerox）

現代のコンピュータの形の原型となった最初のコンピュータ。
f:id:mjk0513:20170904001318j:plain

最初のマウスのプロトタイプ

f:id:mjk0513:20170904001424j:plain

AppleⅠ

スティーブ・ウォズニアックが作った最初のAppleのコンピュータ
f:id:mjk0513:20170904001457j:plain

AppleⅡ

f:id:mjk0513:20170904001539j:plain

Macintosh

はじめてのMac
f:id:mjk0513:20170904001622j:plain
https://cdn.vox-cdn.com/thumbor/qPV-sMXCIdM5pYqTqR0Z7LUbVhs=/2x0:607x403/1520x1013/filters:focal%282x0:607x403%29:format%28webp%29/cdn.vox-cdn.com/assets/2061339/steve-jobs-macintosh.jpg
このJpbsがもってるのコンピュータが初代Macintosh

Lisa

これはコケたんだよね。
f:id:mjk0513:20170904001738j:plain

PowerBook

f:id:mjk0513:20170904002110j:plain

Dynabook

我々の業界では超有名なAlanKayのDynabookプロトタイプ。これを拝める日が来るとは。
f:id:mjk0513:20170904001920j:plain

Google Server

f:id:mjk0513:20170904002156j:plain


とまあこのように、コンピュータオタクには申し分のない内容になってる。
まだまだ載せていない写真もたくさんある。いまは有名所しか紹介していないけど、ほんとにコアなところまで展示されてるのですごくおすすめです。ぜひ行ってみてほしい。
ちなみにプランをSuper Geek Packageにするといろんなグッズもついてくるのでよさみです。
Hours & Admission | Computer History Museum

サンフランシスコ滞在記Day3：CalTrain, IntelMuseum, Apple Infinite Loop

3日目です。

CalTrain

サンフランシスコ市街地とシリコンバレー地域を結ぶ電車。Theアメリカを感じることができる。


f:id:mjk0513:20170903001047j:plain
CalTrainに乗るためには切符を買うかClipper Cardという日本でいうSuicaてきなカードを使う。
Clipper Home
CalTrainだけではなくバスとかの公共交通機関でも使えるのでとても便利。

ちなみにサンフランシスコ市街地とシリコンバレーは結構離れてる。
柏から都内にでるのと同じくらいの感覚（快速的なものにのれば、ちょうど1時間20分くらい）。
途中にある駅は聞いたことがある地名ばかり。


Lawrenceという駅で下車。周りにはなにもない。
トイレに行きたかったんだけど。駅周辺にはなにもない。
f:id:mjk0513:20170903001035j:plain
仕方なくUber使ってIntel museumへ向かう。

Intel museum

www.intel.com
"シリコンバレー"という名が示すとおり、このエリアはもともとコンピュータの半導体を作っていたわけで。
Intelがどうやって半導体を作ってきたか、などといった展示がされてる簡単なミュージアム。入館は無料。
英語もそこまで難しくなかったので結構楽しめた。
ゴードン・ムーアの話とかも当然でてくるし、そもそも半導体ってなんなのみたいな展示もある。
子供向けワークショップをするエリアもあって、休日はここでハンズオンとかやってるらしい。
ショップも併設されててたくさんグッズ買ってきた。CoderDojoの子どもたちに配るよ。

外の看板の前で自撮りしてたらIntelの社員さんが撮ってくれた！
f:id:mjk0513:20170903001846j:plain

Apple Infinite Loop

アニメ好きな人が舞台となった地を訪れることを聖地巡礼と言うけど、それとまったく同じ感覚。
AppleオタクがAppleを訪れてしまった。



キャンパスの中にはいることもできて、カフェテリアでランチも頂いた。
f:id:mjk0513:20170903002318j:plain
このピザのケースは特許とってるらしいｗ
iphone-mania.jp
注文してから焼いてくれるので、すごくおいしかった。

基本的に本社内は撮影禁止。撮影が許されているのは唯一このJobsの言葉の前だけ。
f:id:mjk0513:20170903003447j:plain

キャンパス内の社員さんの多くがAirPodsとApple Watchをつけてたのも印象的。道行く人の40%くらいつけてたと思う。

本社の一角でマジックをしてる人がいて、よくよく聞いてみるとすごく有名な人だった。
Appleの研究セクションにいらっしゃる人っぽい。
www.youtube.com
自分が作ってるBioMapのiOS版をデモさせてもらって、いろいろアドバイスもらえたのはすごく嬉しかった。
あと案外自分が作ってるものの説明ならすらすら英語でてくるんだなとということもわかった。
そりゃ文法とかはひどいけど伝わったみたいでよかった。

併設されてるAppleStoreには、本社ストアにしかないグッズがあるのでたくさん買ってしまった。


暑すぎるサンフランシスコ

普段のサンフランシスコはかなり涼しいことで有名らしいんだけど、ちょうど僕の滞在期間はかなり暑くなってる。


警報がなるレベルなのでかなりだと思う。
ただ、日本みたいにジメッとした暑さではなくカラッとしているので、そこがまだ救いかもしれない。
とはいえ、まじで暑い。焼けてるわーって感じがする。
日本と違い自動販売機が全然ないし、駅にコンビニが併設されているわけでもないので水分の確保がけっこう難しい。
脱水症状手前くらいになりかけてた。ここは注意しないとやばいです。