妻の黒い画面への憧れについて
【その2】妻・夫を愛してるITエンジニア Advent Calendar 2016 の7日目の記事です。
@shimpeiwsです。
元同僚の@koudaiiiさんの3日目の記事に、これはうちも書かねばと触発されたので、
放置しっぱなしのブログの埃を払って書きに来ました。
結婚して5年経ちました
我が家は、Webエンジニアの僕、事務員兼秘書のような仕事をする妻、そして1歳半になった娘の3人暮らしです。
早いもので結婚して5年がたちました。
我が家の日常でちょっとエンジニアっぽくて、楽しげな部分をご紹介したいと思います。
妻の黒い画面への憧れ
Webエンジニアという仕事がら、いわゆる黒い画面を開いて作業することが多々あります。
そして、これもまたウェブエンジニアという仕事がら、家でも仕事をすることがあったり、趣味のコードを書いたりすることがあります。
食卓でPCを開いて黒い画面を広げていると、たまに妻が寄ってきます。
「なに、その色がついたのがふぁーって出てくるの、やりたい!」
そうかー、と思って"llって打つといい"とか、"上キー押してエンター押すと良い"、と教えるのですが、
「もっといろんなの出したい」
と言って不満げで、未だに妻は満足していないようです。
妻が打てるくらい簡単で、それっぽい出力が得られるコマンドがあれば、ぜひ教えていただきたいです。
技術用語知ったかぶりコント
これもWebエンジニアという仕事柄、日常的にプログラミング系の技術書や、WEB+DB PRESSなどの雑誌を読みます。
自宅のソファーなどで本を読んでいると、
「ああ、Elixirね、私も前から注目してた」
と知ったかぶって妻が話しかけてくることがあります。
我が家でたまに発生する定例のコントのようなもので、
また来たか、と思い、それらしい会話を続けますが、
技術を理解しているわけではないので、あまり続きません。
ただ端々で私が話すキーワードを覚えていて、次の会話では進歩して帰ってきます。
「ああ、Elixirね、並列性ね、関数型ね。前ちょっと使ってたことがある。」 という具合です。
妻にとっては全くの不要な知識のはずなので、無駄な努力です。
特にオチもない会話なのですが、そんなやりとりが僕は妙に気に入っていて、
また妻がしかける技術用語知ったかぶりコントにのってしまうのです。
娘とエスケープキー
一歳半になった娘も最近PCに興味津々です。
僕がPCを触っているとニコニコしながら寄ってきて、エスケープキーをバシバシと叩いて満足気に帰っていきます。
今は一日中覚えたての「あんぱんまーん」を連呼していますが、
来年のクリスマスあたりにルビィの冒険をプレゼントすれば、
Ruby3.0が出る頃には二人で並んでコードが書けるようになることでしょう。
先週までデスマーチの只中に置かれてなかなか家にも帰れず、家事や育児の負担と心配をかけた妻に向けて、
いつもの毎日にとても満足しているんだよ、と感謝の気持ちを示したくて書きました。
どうか、これからもよろしく。
「オープンハードウェア ワークショップvol.01 by Mashup Awards」に行ってきた
オープンハードウェア ハッカソンに行ってきた
3/29・30と、Mashup Awards主催のハッカソンに行ってきました。
http://mashupawards.doorkeeper.jp/events/9824
概要
ハードウェア提供企業さんのプロダクトを使って、
その場で結成したチームでプロトタイプを作って発表する、というハッカソンです。
Tempescope
自分は3名チームを組んで、TempescopeというデバイスをHackしました。
Tempescopeは、去年のMashup Awardsでハードウェア賞をとっている作品で、
天気を再現してくれるデバイスです。
アイデア
Tempescopeに拡張モジュールを付けて、
デジタルフォトフレームのようなものを作りました。
Flickrから写真を取得して、そのexif情報から当時の天気を再現したり、
雰囲気に合わせた音楽を流したりする、というのがプランでした。
自分の担当
サーバ側のAPI作成と、スライド作りをしてました。
サーバ側のAPI
Sinatraで作ってHerokuにデプロイしてます。
http://only-yesterday.herokuapp.com/
今回はハード的・時間的な制約で、かなり限定的なところしかつくっていなくて、
緯度経度のパラメータをもらって、天気のステータスコードを返す、
というのを作りました。
作成したデバイスにwifiモジュールが付いているので、
デバイス側からGETリクエストが来て、JSONでデータを返して、
デバイス側でパースしてもらう使い方を想定して作りました。
プレゼンスライド
bespoke.jsを使って作ってみました。
http://shimpeiws.github.io/only-yesterday-presentation/
成果
Github上に成果物をまとめています。
https://github.com/shimpeiws/only-yesterday-presentation
まとめ
今回はハードウェアができる方とチームが組めたので、
できる事がかなり広がって、充実した制作ができました!
またハッカソン行ってみたいなー
Sinatraで作ってHerokuにデプロイ
Railsより規模が小さくて、さくっと作りたいもの用にSinatraを触ってみる。
動的なものはHerokuにデプロイしておくのがイマドキな感じがするので、
初めてのHerokuもやってみた。
Sinatraインストール
$ gem install sinatra
sinatra (1.4.4)がインストールされた。
Hello Worldアプリケーション
Getting Started with Ruby on Heroku
続きを読むD3.jsで地図の描画
データのビジュアライゼーションで地図にのせたいところがあったので、
D3.jsを使って地図をかいてみた。
参考、というよりも以下の内容をそのままやってみた感じです。
書いたコードはGitHubに。
shimpeiws/d3-map@GitHub
データの用意
データは国土数値情報のものを使います。
国土数値情報
今回は広島県のデータを使います。
GeoJSONへの変換
ダウンロードしてきたフォルダ内の、.shpのファイルをGeoJSONに変換します。
GDALというライブラリをHomebrewでインストール。
ogr2ogrコマンドを使います。
$ brew install gdal
インストールが終わったら...
$ which ogr2ogr /usr/local/bin/ogr2ogr
パスも通っているようなので、使ってみます。
$ ogr2ogr -f GeoJSON hiroshima.json N03-13_34_130401.shp
「hiroshima.json」ができました!
中身は緯度・経度情報が頂点座標のように並んでいるようなかんじでしょうか。
D3.jsで描画
コードは参考サイトそのまま。
1つだけ細かくはまったのは、
5行目で変数のgに空オブジェクトを追加しておかないと、
JavaScriptにコンパイルしても、varがつかなくなってしまうところ。
できあがりはこんなかんじ
GitHub Pages
静的なものはGitHub Pagesで見れるようにしておくのがイマドキな気がするので、
GitHub Pagesを使ってみた。
「gh-pages」というブランチを作って、pushすれば良いみたい。
$ git checkout -b "gh-pages" $ git push -u origin gh-pages
今回の出来上がりはこちらで見れます。
しかし、自分の環境からだと、
FireFoxとSafariでは見れるけど、Chromeで見れない…
[参考]
GutHub Pagesの使い方
Knockout.js Live Examples
MVVMとは何だろうか、と思って、
Knockout.jsのチュートリアルのLive ExamplesをCoffeescriptで書いてます。
データをバインディングしておくためのViewModel(振る舞いももっている)を定義しておいて、
Knockout.jsがオブザーバーパターンで監視してくれていて、
データの変更がViewに反映される、というのが今のところの理解です。
書いたものをGitHubに置いてます。
今のところサンプル3つ分ほど書いた状態で、少しずつ増やして行こうと思います。
Knockout.js Live examples by Coffee Script
CoffeeScriptで毎回「無名関数の書き方」と「returnで何を返すべきか?」で迷うのでメモ
DevLOVE.Visualization#02 「ビジュアルコンプレキシティ -The Power of Visualization-」
DevLOVE.Visualization#02 「ビジュアルコンプレキシティ -The Power of Visualization-」に行ってきた。
データビジュアライゼーションに関しての、通史的&網羅的な内容で、 とても充実の内容でした。
「莫大なデータをビジュアライズして、新たな知見を得る(今まで見えていなかったものが見える)」って やっぱりすごい興味のある分野なので、自分でも手を動かして作って見ようと思う。
備忘録的にメモ書きをあげておきます。
0. Introduction
- 自己紹介
- パーソンズでデザインを学んで、NYに写ってBlogvizを作った
- 情報の伝わり方にフォーカスする中で、ビジュアライゼーションを集めだしたvisualcomplexity.com
- Nokia(UXデザイン)やMS(Bingのデザイン)で働いてた。今はCodeacademyで働いてる
1. The Historical Evolution of Data Visualization
- 9-16世紀を「Middle Aes」18-19世紀を「Golden Ages」20世紀からを「Modern Ages」と呼んで通史的にビジュアライゼーションを見る
ビジュアルコミュニケーションの原則
- Spatical Orientation(空間の定位)
- Order(順序)
- Limited sets or Chunking(情報をいくつかの塊にまとめる)
- Association(関連性、別のコンセプトと関連して覚えた方が思い出しやすい)
- Affect(感情とつなげる)
- Repetition(反復)
18-19世紀ごろから各種グラフなどが発明され、研究が進められていき、 オープンデータ・コンピュータストレージの大容量化などで、 インタラクティビティを含む新たなビジュアライゼーションに進化した。
2. Taxonomy of Data Visualization
- データビジュアライゼーションの分類学
ビジュアライゼーションのためのテクニックの分類
- CHARTS
- Maps
- Index Charts
- Flow Diagrams
- Trees
- Networks
- Matrix Charts
- Infographics
3. Principles of Network Visualization & Group Exercise
Principles of Network Visualization
- ビジュアライゼーションは複雑になりがちなので、シンプルさを保つ事が大事
ネットワークビジュアライゼーションの8つのポイント
1: Start with Question
- 質問から始めよう
- 富獄36景のようにたくさんのview pointを持って問題に望むこと
2: Look for Relevancy(関連性)
- Data Source + visualization Method
- Data Source(データのどこに着目するか?)
- Visualization Method(どういう質問をするか? 見る人のコンテキストとニーズ)
3: Enable Multivariate Analysis
- Edward Tufte
4: Embrace Time
- staticな関係は一時的なモノなので、時間の流れを意識すること
5: Enrich Your Vocabulary
- 語彙を豊かにすること(利用できる手法はいろいろある)
6: Expose Grouping
- グルーピングを表面に出す、関係性を強化
- Law of Similarity
- Law of Proximity(近接の法則)
- Law of Common Fate(感情やインタラクション、同じ方向に向かっているもの)
7: Maxmize Scaling
スケールを変えて考える事
- マクロ分析(pattern)
- 関係性分析(connectivility)
- マイクロ分析(entities)
8: Manage Intricacy
- 複雑性の管理
- 拡大する(zooming)
- 概要と詳細
Group Exercise
10人1グループで30分のディスカッション + プレゼンテーション
[課題] - 複雑になりすぎたFaceBookの友達ビジュアライゼーションをどう改善できるか?
[アウトプット] - ダイアグラムでもワイヤーフレームでも箇条書きでも可能
