rioRESERVoir

Allajah/Rioの個人ブログ

#kosen10s メンバーが卒業した高専のある都道府県をマッピングしてみる

この記事は #kosen10s Advent Calendarの18日目の記事です。

書きながら実装

この記事ではやったことを書くのではなく、書く内容を先に決めて実装しながら記事を書いていくという手法を取ることにしました。
実装を終わらせてから書き始めると「あ〜あの過程のスクショ撮っておけばよかった〜〜」って思うことが多々あり、 その過程を再現するのが面倒だからです。

解決する問題

#kosen10s には個性豊かな高専生が、全国各地から参加しています。
ふと、「どの地方の高専から来てる人が多い(少ない)んだろう」と気になった時、現在それをスッと確認する手段はありません。
今回は日本地図に「#kosen10sのメンバーが卒業した高専」をマッピングすることにより、「kosen10sには◯◯地方(◯◯高専)の知見がない!」
ということを明らかにしようと思います。

この記事のゴール

高専ごとにマッピングすると、日本地図を市区町村ごとに区切らなくてはいけないので、 今回のゴールは「 kosen10sメンバーがどの都道府県にある高専を卒業していて、どの地方が多くどの地方が少ないのか視覚的に分かりやすくする。」 とします。

注意点

  • この記事では高専別ではなく都道府県別でマッピングしています。たとえば、「神戸高専」と「明石高専」は「兵庫県」、「函館」「苫小牧」「釧路」「旭川」は「北海道」 としてまとめています。
  • 「kosen10sメンバー」という言葉は、便宜上「kosen10sのSlackチームに参加していて、かつ自己紹介シートを記入している人」という意味で用います。

用いる技術

僕のスキルセットの都合上、今回はHTMLとCSSとJS、それからお馴染みのD3.jsを用います

実装

参考記事

日本地図の描画

まずは日本地図を描画します。

1. 地図データの用意

http://www.naturalearthdata.com/downloads/10m-cultural-vectors/ からデータをダウンロード。

2. GDALをインストール

brewで入ります。
$ brew install gdal

3.gdalパッケージに入ってるogr2ogrで sharp ファイルを GeoJSON ファイルに変換

$ ogr2ogr -f GeoJSON -where "adm0_a3 = 'JPN'" pref.json ne_10m_admin_1_states_provinces.shp

4. htmlとjsをザクっと書きます

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
var width = 1200,
    height = 1000;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var color = d3.scale.category20();

var mercator = d3.geo.mercator()
    .center([136.0,35.6])
    .translate([width/2, height/2])
    .scale(1200);

var geopath = d3.geo.path()
    .projection(mercator);

d3.json("pref.json", function(error, jp) {
    svg.selectAll("path")
            .data(jp.features)
            .enter().append("path")
            .attr("class", function(d) { return d.id; })
            .attr("d", geopath)
            .attr("fill", function(d){ return color(d.geometry.coordinates); });
});

5.ローカルサーバーを起動します

$ python -m http.server 5000

6.ブラウザで開きます

f:id:Allajah:20161218231940p:plain

日本地図が表示されました

出身高専データの用意

ここからが本番です。都道府県各地の色を、kosen10sメンバーの人数によって変えたいので、

1.メンバーが卒業した高専と、

2.その高専がどの都道府県に所在しているか

という情報が必要になります。幸い、kosen10sのGoogle Driveに自己紹介シートと言うものが存在しているので、 1は解決します。問題は2です。
高専がどの都道府県にあるのかまとめられたデータがJSONなりCSVなりXMLなりで何処かにあれば嬉しいんですけど、そんなものはないと思ったのと探すのもめんどくさかったので自分で作ります。

f:id:Allajah:20161218232537p:plain

自己紹介シートは、上の画像のように xx高専xx を各々書いていっている形になっています。(これ見た感じ結構偏ってる・・・?)

本当は各高専都道府県の対応表をもっておいて、自己紹介シートを読んで自動でjsonを吐き出すようにしたかったんですが、今回は時間がないので手でやります。

努力の結果こんなjsonができた

{
  "items": [
    {
      "name": "明石",
      "pref": "兵庫県",
      "population": 4
    },
    {
      "name": "津山",
      "pref": "岡山県",
      "population": 2
    },
    {
      "name": "サレジオ",
      "pref": "東京都",
      "population": 2
    },
    {
      "name": "茨城",
      "pref": "茨城県",
      "population": 5
    },
    {
      "name": "福井",
      "pref": "福井県",
      "population": 1
    },
    {
      "name": "産技荒川",
      "pref": "東京都",
      "population": 2
    },
    {
      "name": "松江",
      "pref": "島根県",
      "population": 1
    },
    {
      "name": "群馬",
      "pref": "群馬県",
      "population": 1
    },
    {
      "name": "大阪府大",
      "pref": "大阪府",
      "population": 1
    },
    {
      "name": "沖縄",
      "pref": "沖縄県",
      "population": 2
    },
    {
      "name": "木更津",
      "pref": "千葉県",
      "population": 1
    },
    {
      "name": "久留米",
      "pref": "福岡県",
      "population": 1
    },
    {
      "name": "小山",
      "pref": "栃木県",
      "population": 1
    },
    {
      "name": "金沢",
      "pref": "石川県",
      "population": 2
    },
    {
      "name": "長岡",
      "pref": "新潟県",
      "population": 2
    },
    {
      "name": "鈴鹿",
      "pref": "三重県",
      "population": 1
    },
    {
      "name": "奈良",
      "pref": "奈良県",
      "population": 1
    },
    {
      "name": "米子",
      "pref": "鳥取県",
      "population": 1
    }
  ]
}

温かみのあるkosen10s.jsonができました。茨城多くね?

地図にマッピング

マッピングと言っても、今回は「その都道府県にある高専を卒業して、kosen10sの自己紹介シートを記入した人数」によって色を変えるだけなので、 ここはJSをゴリゴリ書きます。

var kosen10sJson = $.getJSON("./kosen10s.json");

var width = 1200,
    height = 1000;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var color = d3.scale.category20();

var mercator = d3.geo.mercator()
    .center([136.0, 35.6])
    .translate([width / 2, height / 2])
    .scale(1200);

var geopath = d3.geo.path()
    .projection(mercator);

d3.json("pref.json", function (error, jp) {

    for (let i = 1; i < jp.features.length; i++) {
        jp.features[i]["kosen10s_count"] = 0;
        kosen10sJson.responseJSON.items.forEach(item => {
            if (jp.features[i].properties.name_local == item.pref) {
                jp.features[i]["kosen10s_count"] += item.population;
            }
        });
    }

    svg.selectAll("path")
        .data(jp.features)
        .enter().append("path")
        .attr("class", function (d) {
            return d.id;
        })
        .attr("d", geopath)
        .attr("fill", function (d) {
            return `rgb(255,${240 - d.kosen10s_count * 40},${240 - d.kosen10s_count * 40})`
        });
});

結果

こうなりました

f:id:Allajah:20161219002847p:plain

https://allajah.github.io/kosen10s_japan_map/

東北地方・北海道・四国は0ですね。(新潟は東北ではありません)

自己紹介シートに記載してあったところのみカウントしているので、もしかしたらいるかもしれません。 Google DriveAPI叩いて、自己紹介シート読んできてマッピングするとこまでやったら、 http://kosen10s.net に組み込もうかなと思ってます。

さいごに

この記事20:00くらいに書き始めて、23:00くらいには余裕で終わるだろ〜と思ったら、全然終わらなくて結局担当日を過ぎてしまいました。ごめんなさい :bow:
明日はうなすけです!どんな油田ドパドパ話が出てくるのか!お楽しみに!
と書きたかったんですが、今Adventarを見たらうなすけは優秀なので既に記事をあげていました。

qiita.com

『kosen10sてSlackで何話してんの?』に少しだけ答える

この記事は#kosen10s Advent Calendar 2016 の11日目の記事です。

kosen10sのメイン活動

kosen10sはLT会やったりカレーメシ食べたり旅行したりいろいろやってますが、 「メインの活動は?」と聞かれたら『Slackでしょうもないこと話してる』と、僕は答えます。 この記事では「kosen10sの人たちってSlackで何話してるの?」という誰も抱かないであろう疑問に、少しだけ答えようと思います。

チャンネル達

2015年12月11日現在、kosen10s Slackには31個のpublicチャンネルがあります。 多分前はもっとあったのですが、棚卸しによって、結構減りました。 僕がジョインしてるチャンネルはこんな感じです。

f:id:Allajah:20161210233044p:plain

1つずつ上から雑に紹介していきます。

ah-

出落ち感満載のチャンネル。このチャンネル名の読み方は「あー」よりも「あ゛ぁ〜」って感じ。多分。
みんなが「あー最高。尊い」と思ったコンテンツが上がってくる。twitterやpixivのリンクが載せられる事が多い。

blog

kosen10s Slackに入っている人のブログの新着記事をRSS botが流してくれている。
12月はアドベントカレンダーのおかげもあって、毎日2,3個ぐらい流れてくるので楽しい。

bounen-or-shinen

最近僕が立てたチャンネル。他のチャンネルで「忘年会 or 新年会」したいって言ったら結構な人数ノッてくれたので作った。
飲み会したいって言うと誰かしらノッてくれるのほんとに好き。

design

デザインについて語るチャンネル。最近はweb serviceのレイアウトやロゴデザインを id:denari01 にレビューして貰う人が多い。
冗談抜きで、「でなりすげぇ」ってなるチャンネル。

emoji

最もくだらなく最も重要なチャンネル。 :homuhomu: のように、登録してほしいemojiを投げると、 emoji登録芸人たち(id:puhitakuid:e10dokup ) がカスタムemojiを作ってくれるってこともしばしば。
puhitakuに至っては、emojiにつけるprefixのルールとかを定めたりしていて、emojiに対する心持ちが違う。 kosen10s slack は文字の絵文字(画像参照)が増えすぎて、日常会話の30%くらいはemojiだけで事足りるようになってきている。

f:id:Allajah:20161210234708p:plain

general

LTとかあったときに告知するチャンネル。そんなに使われない。botも含め、61人いる。

hardware

ハードウェアについて語るチャンネル。最近あったトピックはAmazon Dash buttonとかトラ技Jr.とかゲームコントローラーの話。 正直僕はここで話してることの半分くらいはわかってない。

koibana

僕たち若者は青春を謳歌中なので恋もすれば失恋もする。 承認欲求の話とか、デートの定義とか、恋人とセックスフレンドの境界とか、意外と真面目な話が多い。
現在のチャンネルトピックは「ツイッターはストック置き場

miku

初音ミクをはじめとする、VOCALOIDについて、想いを募らせるチャンネル。 詳しくは、 id:sonetsou が書いた9日目の記事 を読むといい。

music

音楽全般について語るチャンネル。多種多様なジャンルの音楽が流れてきて楽しい。
最近あったトピックは、
でなり「イヤフォンほしい」
puhitaku「秋葉原のe イヤホン行きなよ!」
-- 数時間後 --
でなり「アキヨド(秋葉原のヨドバシ)きた」
puhitaku「何でeイヤ行ってないの。アレだけ言ったのに。」
でなり「やばい、1ミリも聞こえてないわそのセリフ」

という、次元のねじれでも起きたんじゃないかと思わせるような会話を繰り広げてた。
ちなみにpuhitakuが「e イヤホン行きなよ」とでなりに言っていたのは僕も聞いてたから、でなりだけ次元の渦に巻き込まれていたという説が有力。

officialsite

http://kosen10s.net/について、たまーに話すチャンネル。「作りたい作りたい」とは常々言ってる。 たまーにリポジトリにPull Requestが飛ばされる。

ogiri

大喜利をするチャンネル。僕はいっつも「おにぎり」に空目する

r-18

公序良俗に反するエロ的な意味の"R-18"に見せかけといて、なんてことはなく、普通にそういう話をするチャンネル。
最近あったのは新素材の避妊具がよさそうって話。

f:id:Allajah:20161211001050p:plain

random

全員が入ってる雑談チャンネル。チャンネルトピックは「最高イナフ」。
突然盛り上がったりするので注意が必要。

ruby

プログラミング言語Rubyについてのチャンネル。メインで発言してるのは2,3人くらい。
僕自身最近Rubyの情報キャッチアップ出来てないので、このチャンネルもっと活用したいなと思ってる。

smartphones

バイスの話とAndroid開発の話が中心。アプリデベロッパー、kosen10sにはあんまりいないっぽい。

subcul

アニメを中心とした、サブカルチャーについて話すチャンネル。 #ah- との使い分けは、
感情を言葉で表せる -> #subcul
最高すぎて語彙を失う -> #ah- って感じ。

tech

テクノロジー全般について。特に新技術や新サービスについてキャッチアップされることが多い。
最近だと、AWS SnowmobileとかWindows10アップデートとか

tsurami-dustbox

「やなことは全部ゴミ箱に捨てちゃえ〜」というチャンネル。悲しいかな、このチャンネルが活発な気がする。

very-cute-girl-3

#ah- の3次元版という感じ。以前は僕が一人で好きな女性有名人の画像を上げるだけだったが、最近は活発化して、 みんなのお気に入りな画像が流れてくる。
一番最近ピックアップされたのはウクライナのアーチェリー選手、「アナスタシア・パブロア」選手

web-tech

web周りのことについて話すチャンネル。Angularなどのフロントエンドの話題から、AWSの話題まで。ネットワークの話もする。 Q&Aがあったりおすすめ記事が上がってきたりする。

まとめ

  • どのチャンネルもゆるふわ。テキトーにjoinしたり作ったりして飽きたらleaveやarchiveすればいいので気楽。
  • 僕がお気に入りのチャンネルは #ah- #emoji #koibana #r-18 #subcul #very-cute-girl-3 #web-tech 高専に2010年入学した人で、インターネットでこんな雑な会話したい〜って思ってる人いたら下記のinvite linkからどうぞ https://kosen10s-invite.herokuapp.com/

雑感

このブログ、気づいたら1年以上放置してたっぽい。
dailyで20アクセスくらいあるの謎。
最後のエントリー見たら、GithubSSH接続出来なくて困ってた。かわいそう。
この久々の更新を機に1週間に1記事あげるくらいで記事書きたい。
それがしばらく続いたらProにあげようかとも思ってる。

GitHubにSSH接続できなくなった

なぜか急にGitHubSSHで接続できなくなった.(原因まったく身に覚えがない

全然解決しなくて,仕方ないので公開鍵,秘密鍵のペアを作成しなおして,Githubに公開鍵を登録.

$ssh git@github.com

すると

$ssh git@github.com
git@github.com's password:

って聞かれる.これ,GitHubのログインPasswordでいいのか?と思って入れてみたけど違うっぽい.

$ssh git@github.com
git@github.com's password:
Permission denined. Please try again
git@github.com's password:

ってまた聞かれるだけ.~/.ssh/host_knows のGitHubの行消してもう一回鍵作りなおしてみたりしたけど全然ダメだった.なんなんだこれ・・・ググっても同じ症状出てこないし,めっちゃ困る(´・ω・`)

有識者の方教えてください・・・

長岡高専生がkosen10sLTに参加して感じたこと

5/4にkosen10sLT #01に参加してきた.kosen10s.doorkeeper.jp
1ヶ月前くらい(?)にでなりくん(id:denari01)が話を持ち出してきて,ちょうどGW中東京に行く予定があったので参加させてもらった.
発表内容は参加者のみんなが書いてくれてるので僕は自分の感じたことだけ残しておくね.
発表内容とか会場とかの詳しい内容はこの辺を見るといいと思う.(手抜きdenari01.hatenablog.com
marin72.hatenablog.com
#kosen10s LT 01に参加した | うなすけとあれこれ
zopfcode.hateblo.jp

Thanks for 運営メンバー

でなりくん,どぅーすーくん(@do_su_0805),おくもとくん(@falcon8823),なっちゃん(id:marin72_com)を中心にSlackで運営が進んでた.
会場の手配したり下見したりロゴやら名刺やら作ったり...とてもスムーズに進んでたので,すげーって気持ちで見てた.

僕はたまに意見出したりSlackのrandomチャンネルで雑に談笑したり,飲み物をインターネットでポチポチと選んだりしてた.カクヤスめっちゃ便利!!www.kakuyasu.co.jp

企画運営で動いてくれたみなさんありがとうございましたっ!!

Thanks for 参加者

最初10人前後だと予想されてたけど,当日15人も参加してた.良い.
(当初17人だったけど2人来れなくなってしまった・・・どちらも一方的に知ってはいるけど
あんま話したことない人達だったから残念)
同じ高専生でも色々な高専生がいた.
高専時代をデザインにほぼ注いだ元高専
・ルータ芸人高専
・卒業後教職の道へ進んだ元高専生(2名もいた.教職の道に進んだ人初めて出会ったのでびっくり)
・BL好きの男子元高専生(BLが好きな男性も初めて出会ったのでびっくりした.異文化交流って感じ)
アイカツおじさん
とか,みんな個性豊かだった.
自己紹介LT,フリーLT通して思ったのが,みんな技術力が高くて,目指すものとかやりたいことがしっかり定まってた.しかも面白くて,場を盛り上げる力がある.スペック高い・・・.
僕は割と自分の好きなことを勉強して,学校の授業の方は必要最低限しかやってなかった.他の参加者は筑波とか電通に進学してたり,一流企業に就職してたり高専時代主席だったりして,自分の好きなことをやりつつ,そういうとこもしっかり勉強出来てた.すごい尊敬する.

遠くからこのために来てくれた人たちもいっぱいいた.交流出来て本当によかった.ありがとう!!
関東〜西日本の高専出身者が多かったので,次回は東北とか北海道出身の高専生も参加してくれると嬉しい.ぜひ!

kosen10sLT is 最高

今回のLT会,正直今まで参加したLT会の中で一番たのしかった.
先輩・後輩っていう概念がないと,気にせずいきなりタメ口で話せるし距離もグッと縮まる.
LTとかしてても,気兼ねなくツッコめたりしてとても楽しい
あとは,個人的に日本の過剰な上下関係とか敬語文化ってあんま好きじゃないので,こういう場すごい好き.

高専生のイベントは他にもたくさんあるけど,一度にこんなにたくさんの同期とお話出来る機会って早々ないと思う.
同期高専生で集まって何かするの最高なのでぜひ先輩方・後輩各位にもやってみてほしい.

hope for 後輩

自分より出来る人の話を聞いても自分の分野からちょっと外れる話を聞いても知見は広がるし,学べることは必ずある.自分の得意なことを発信することで,他の人から「それすごい!!」って讃えられたり,「今,〜〜で困ってるんだけどどうしたらいい?」って聞かれたり,逆に自分の困ってることを発信することで「そこは〜〜すればいいんじゃない?」ってアドバイスをもらったり出来る.
能力を身につけて誰かに見つけてもらうのを待ってるんじゃなくて,「僕こんなことできます!」って発信したほうが知見も広がるし力も伸びると思う.
後輩各位にはぜひ自分の好きなことを自分で勉強して能力を身につけて外に出てって欲しい.
老害っぽい(?)

Matlab,simulinkのsimplot

今日講義で躓いたのでメモ.
講義でもらった資料が古いバージョンのもので,最新のMatlabでは使い物にならなかった.
やりたいことはSimulinkを用いたバネマスダンパ系のシミュレーション.手順はこんな感じ
1.simulinkを起動してブロック図を配置
2.パラメータを与えてScopeで結果を見る
3.Scopeパラメータウィンドウ->データ履歴でデータをワークスペースに"時間付き構造体"で保存する設定にする.
4.シミュレーションを再実行する
5.Matlabワークスペースでsimplotを用いてグラフを描画する
6.legendやtitle,xlabelなどでタイトルや軸のラベルを挿入する.
以前のバージョンだとこれでよかったぽいけど,現在のバージョンだと5で描画してほしいグラフが描画されない.
例えばデータ履歴をstateという名前の時間付き構造体で保存していたら,グラフをプロットするには以下のようにする.

plot(state.time,state.signals.values)

描画するグラフの個数が合わないみたいなErrorが出た時は,
Muxで複数のグラフがすべて同じ平面上にプロットされているか確認する.

手元にMatlabがないので,余裕があったらスクショとって載せます.

【WordPress プラグイン】MTS Simple Booking C でカレンダーをクリックした時にページトップに戻らないようにする.

Word Pressで予約を受け付けるプラグインの一つにMTS Simple Booking Cというものがある.
導入はこちら参考にするといい.
www.nishi2002.com
予約の時に入力させる項目を増やすときはここを参考にした.
medical-index.jp
この2つを参考にして導入できたはいいが,一つ問題が残った.

問題点

ページに表示されたカレンダーの◯をクリックすると,ページの一番上に戻ってしまい,
もう一度カレンダーのとこまでスクロールしないといけなかった.

解決法

予約カレンダーを

<div id="booking">
<?php 
echo do_shortcode("[monthly_calendar id=1]"); 
?>
</div>

のように適当なidをつけた領域にいれる.この場合はbookingというidを付与した.

wp-content/plugins/mts-simple-booking-c/mtssb-front.phpの300行目あたりの

    if ($mark == 'vacant' || $mark == 'low') {
      echo $linkurl ? ('<a class="calendar-daylink" href="' . $linkurl . '">') : '';

を以下のように変更する.

    $jump_to_booking_str="#booking";
    if ($mark == 'vacant' || $mark == 'low') {
      echo $linkurl ? ('<a class="calendar-daylink" href="' . $linkurl . $jump_to_booking_str . '">') : '';

カレンダーがクリックされた時にジャンプするURLに予約カレンダーのidを最後につけることで,ページのトップではなくカレンダーの領域にジャンプするようにした.

解決法を見つけるまで

Google Chromeデベロッパツールでカレンダーの◯のリンク先を確認したところこんな感じになってた.
f:id:Allajah:20150323013928p:plain
vimを起動して, :vimgrep calendar-daylink ** して,mtssb-front.php内の処理を見つけた.

vimgrep便利

File.openがうまくいかない

発生した問題

RubyTwitterクライアントを作りたい.
コンシューマーキーやらアクセストークンを.ymlファイルから読み込んでる.

 keys=YAML.load(File.open('./settings.yml'))

=>動作OK

 keys=YAML.load(File.open('~/programming/ruby/twitter/settings.yml')) #(僕の環境の場合)

=> `initialize': No such file or directory @ rb_sysopen - ~/key_setting.yml (Errno::ENOENT)

なぜか絶対パスだとうまくいかない・・・

解決策

もしかしたら,階層が深すぎると読み込めない?と思ってsettings.ymlをホームディレクトリに置いて

 keys=YAML.load(File.open('~/settings.yml'))

としたけどやはりダメ.分からない・・・

追記

歯磨きしてたら思いついた.
あれ,Rubyで”~”なんて使えないんじゃね?
ということで

 keys=YAML.load(File.open('/Users/USER_NAME/settings.yml'))

としたらうまく動いた.良かった