べにやまぶろぐ

技術寄りの話を書くつもり

Chrome 拡張機能『今、どんな気持ち? for Facebook』を公開しました => 一日経たずに公開を中止しました

※ クマーは英語圏では幼児性愛の変態熊 (Pedobear) として認識されているとのご指摘をいただきましたので、広く公開することは不適当と判断し、当日中 (2015/6/7) にウェブストア・GitHubから取り下げました (参考)。


Facebook の『今どんな気持ち?』を見るたびに煽られてる感じがしてたので、いっそそのように書き換えてしまう Chrome 拡張を作りました。

Chrome ウェブストアはこちら。

このプラグインを入れた状態で Facebook の新規投稿欄を見ると

f:id:beniyama:20150607002054p:plain

これが例の AA になります。それだけです。

ソースは GitHub にあります。

例によってシングルページなので onHistoryStateUpdated 駆動が良いのかなと思いつつ、タイミングの問題か遷移後の書き換えがうまくいかなかったので今回は chrome.webNavigation.onCompleted を捕まえて書き換え処理をしています。(参考 : chrome.webNavigation - Chrome Developers

ただ一回の遷移に対して同一の textarea の再描画が複数回走っているように見えるのがやや気持ち悪いです。

『UX、デザイン思考、サービスデザインのためのユーザーインタビュー入門』参加メモ

最近、デザイン思考に興味を持ち始めてきたこともあって、こちらの勉強会に参加させていただきました。

uxd-hcd-waiwai-cafe.doorkeeper.jp

普段 UX 系ど真ん中なイベント(語弊があったらすいません)にあまり参加していないこともあって、デザイナーさんやサービス企画・リサーチに携わる人とお話しができて楽しかったです。UXD/HCD ワイワイCAFE というコミュニティのイベントで、過去にもとても面白そうなイベントをされていたことに今更気づいて後悔しております。もっと早く気づけばよかった。

イベントの内容としては、下記書籍の出版記念も兼ねているということで著者の方々が登壇されて実際にユーザーインタビューのデモンストレーション&解説があったり、参加者同士がワークショップ形式でそのテクニックを試してみたりしました。

その後にもパネルがあって懇親会と続いたのですが、このイベントでは常葉大学の学生の方々がグラフィックレコーディングという手法を用いてリアルタイムにどんどん議論を可視化していました。

例えばパネルディスカッションは

f:id:beniyama:20150523193323j:plain

のようになって、一目で今回のイベントの内容、議論の変遷や要点がわかるようになっています。そもそもそんな手法や研究分野があることを知らなかったので勉強になりました。

とはいえ自分なりにもいろいろメモしましたので、ここに書き残しておきます。

ユーザーインタビューのポイント(ライブデモ)
  • インタビューにかかる見込み時間を相手に伝えて安心感をつくる
    • その後盛り上がってももうちょっといいですか?で時間を延ばせる雰囲気作りに役立つ
  • 『気になっている事』はポジティブなことを思い込んでしまいがちだが、ネガティブなこともあるのでどっちでも大丈夫だという事を最初に明確に伝える
  • 次の質問などいろいろ考えて間ができそうなときはちょっとした言葉を挟んで沈黙しないようにする
  • 誰でもずっと見つめられたら嫌なので、メモをとりながら視線を外すこともする
  • 相づちなどの仕草はインタビューでは大げさにするくらいが良い
  • 自分がきちんと理解しているということを伝える・確認するために『おうむ返し』や『(はいかいいえで答えられる)クローズドクエスチョン』を挟む
  • クローズドクエスチョンだけだとただの選択式アンケートでも良いので、少し考えてもらわないと答えが出てこないオープンクエスチョンも使う
  • その人の考え方に寄り添って話を聞き出す、共感を伝える一言が大事
  • 脱線しそうであっても、一生懸命考えていってくれていることを否定しては駄目なので『ご自身のことを考えてみてください』などとして話を戻すのも大事
  • 笑顔で終わるインタビューが良い
  • 質問によって相手の思考が狭まってしまう事があるので、あえて迂回しながら聞くことも大事
  • インタビューのときは自己紹介をするのが基本
  • ここにいなかったら何をしているかなど、具体的にイメージしてもらうような質問も効果的
  • 『ごろごろしている』についておうむ返しするだけでなく質問を加える(ごろごろするのはなぜなのか?などもう少し聞きたいところ)
  • 相手の話を要約して租借しながら質問する
  • 一生懸命話してくれるときは声小さめでうなづく
  • 仮説をぶつけてみて現状を明確にする
  • 過去の時点について引き出した言葉を使って、未来についての質問をする
  • 会社目線の話から切り離して個人の視点に切り替えて話を聞こうとする時に間を使う
  • 『周りの人』ではなく『会社の後輩』や『同僚』というようにある程度具体的な言葉を使って聞く
パネルディスカッション
  • なんでこの仕事をしているのか?
    • 勝手に作られたものが多い、良いものを作りたい。人の事を知りたいと思って心理学を勉強
    • モノを作る前にいろいろ調べる = リサーチ
    • この会社で必要とされている UX デザインは何なのか、情報はたくさんあるけれど決めるのは自分
    • ユーザの顔が見えていない状況がわかるようになる
    • 毎回会う人が違う
    • 人に話を聞く方が安心していられる
  • インタビューはカウンセリングにも似ている
  • 想定外の事態(デジカメの電源を入れるのに40分かかる)など、計画通りにいかないことがある
  • インタビューの計画ができるようになるには時間がかかる
  • クライアントの意図を聞き出すこと自体がインタビュー
  • 話が合わなかったり盛り上がらないとき
    • 馬鹿のフリをする
    • 少しの反応に解釈を入れて話を広げて探る
    • 無口な若い男子のときなどはお母さんの立ち位置になってみて口を動かさせる
    • 相手とモードを合わせる(ハイな相手にはハイで接するなど温度差を意識する)
    • ただし自己一致していない:自分をつくっているとわかってしまうと相手とのコミュニケーションが崩れる
  • 人によって意味・鄭義の異なる言葉を聞き返したりして明確にしてみたりする

ワークショップ形式だと参加者同士でコミュニケーションが生まれて良いですね。あと、これらの手法や考え方はそのまま面接官にも適用できるのではないかと思いました。採用面接や評価面接もその人となり、または考えていることを聞き出すという意味では一種のユーザーインタビューなのでそういう業務をされている方々も一読の価値ありなのではないかなと。

ざっとメモ載せた感じですが、ワニ好きデザイナーさんのこちらのブログにはもっと丁寧にまとめられています。見習いたい。

takana8.hatenablog.com

『教育をハックする 教育×IT関係者で考える次世代IoTプロダクトをつくるテクノロジー教育の現場』聴講メモ

ここ数日、教育 x IT づいていますが SXSWedu の報告会 に引き続き今回はこちらのイベント、

http://peatix.com/event/82622peatix.com

に行ってまいりました。

先日の SXSWedu 報告会でもありましたが、イギリスのプログラミング必修化と対比して日本の技術家庭科でのプログラミング実習の話もあり、やはり教えられる先生が圧倒的に不足しているという危機感は共有されていました。また今回は SXSW (の Interactive) に関する話でより一層来年は参加してみたいと思える魅力的な講演でした。あと、基礎を教えて出口をきっちり見せると後は勝手に育つというのも印象的でした。

掲載の許諾をいただきましたので、以下講演メモです。

LEGO Education 正規販売代理店 Afrel 渡辺 登 様
  • 元々組み込み系、LEGO League Teacher Training の修了書も持っている
  • レゴマインドストームを活用した様々な活動を行っている
  • ET ロボコン : マインドストームを使いながら UML, MATLAB などのモデリング技術を学ぶ(社会人・大学生)
  • SMART DEVICE GP : リクルートが行っている学生向けコンテスト
  • はこだて未来大学はマインドストームを使ってシステムの要求定義などを学んでいる
  • ムサビデザインスタジオでもワークショップを行っている
  • キミのミライ発見 : 高校生に車のプログラミングの紹介。学校の先生が使いやすいように作った
  • Java for Students : Oracle がマインドストームを使って Java を教えている
  • 技術科の教材を作るなど、LEGO 社が作ったハードに Afrel が付加価値をつけて提供するビジネスモデル
  • World Robot Olympiad 2014
  • 霞ヶ関オープンデイ2014
  • Code for Japan 2014
  • Pile Drive : 小学生の子供達がタブレットを使いながらプログラミングできるような環境を提供する(東大発)
  • EV3 発表会では記者向け体験会を行ったりした
  • 順次・繰り返し・分岐・変数などを覚えていく
  • Arduino / RaspberryPi とマインドストーム EV3
    • EV3 はセンサー、モーター、フレームがあるのが良い
  • 日立ソリューションでワークショップを行ったりもした
  • ETロボコンを教えられる人も育成している
  • 5/17 にトレーナー研修会がある
  • コードでもっと幸せな国にする3年構想を抱えている
東京大学 産学連携本部 助教 菅原 岳人 様
  • アントレプレナーシップの教育者
  • TODAI TO TEXAS
    • 学生を連れて行くと教育効果が高い気がしている(教育をハックしているとも言える)
    • SXSW : インタラクティブだけで 1,100のセッション、2,377名のスピーカー、32,798名の参加者 (インタラクティブセッションのバッジは10万円以上)
    • SXSW Trade Show(4日間) : 568ブース、65,000展の出典
    • 斬新なアイデアやプロダクトがあるなら学生でもスタートアップでも試してみれば良い
  • 下川 俊成 氏 が TODAI TO TEXAS プロジェクト発足のきっかけを作った
    • OpenPool : Kinect を使って大乗にリアルタイム・プロジェクションマッピングするインタラクティブビリヤード
    • 2013夏 募集(〜11月), DemoDay(12月), SXSW出展(3月)
    • 2014 : 3チームを選抜・3チーム自費参加 : SKELETONICS / Moff / AgIC…
      • スケルトニクスがすごい評判だった・現地で超人気バラエティにも出演した
    • 2015 : 6チームを選抜・4チーム自費参加
      • 学部生 Trickey : カスタマイザブルキーボード
    • 電子情報機器学(通称びっくりドッキリメカ)
    • 基礎講義から自主作成まで。必ずイノベーションとは何かを教える。
      • 一度使い始めたら後戻りのできないハードウェアを生み出す事
      • 学生には基礎をしっかり教えて出口さえ示せば間は勝手に埋まる。
      • むしろそれ(つくっているもの)はイノベーションなのか?を何度も自問自答させる事が大事。
    • 東大はものづくり講義が充実している
    • 出展と同時に強制クラウドファンディング
    • 毎日100名くらいの来場者とインタラクション(開発者の学生さんにとっては初めての米国旅行だった)
    • NASA で3Dプリンタ作っている方が通りすがってコメントをくれたりする
  • 参加した学生の感想
    • 良い意味でクレイジーな、世の中を変える人たちの世界がわかった
    • 技術(だけ)ではなくてアイデア一本で世界が変えられることがわかった
    • 人に使ってもらう、買ってもらえる HW を作るのは難しい
  • 自分の作りたいものから世界に影響を与えるものへギアチェンジさせうる、ものづくり教育の一旦を担えないか?
  • SXSW は行くと人生観が変わる。特に TradeShow が重要 : ガチなイノベーターと4日間対峙すると誰でも考え方を変えざるを得ない
LITALICO Qremo事業部 島田 悠司 様
  • LITALICO 3年目でネット通信方式の研究をしていた
  • 小中学生の 6.5% に発達障害の可能性があると言われている
    • 学習や行動面に著しい困難
    • ハリウッドスターや発明家などの中にも識字障害を始めとする発達障害を持つ人がいる
  • Leaf : 多様な子供達に合わせた学習支援
    • ガンダムなど、それぞれの子供が興味のあるものに題材を置き換えて算数を教えたりしている
  • qremo : 興味関心を伸ばすデジタルものづくり教室
    • iPhone アプリを作ってもらうワークショップを行ったとき、学校のクラスで集中できない子供が3時間没頭がきっかけ
    • ソフトウェア・ハードウェア・デザインに横断して触れられるような機会の提供
    • レーザーカッターや 3D プリンタも使っている
    • 数学的に難しい弾幕シューティングを作って来たりする子供もいる
    • 解説1年で生徒数300名、77%が小学生、小学校・低学年が中心(未就学時もいる)。2歳児がタブレットのアプリから 3D プリンタを使ったりしている
  • 小学生の 65% は今存在していない職業に就くと言われている
    • そもそもどんな世界が来るかわからないので今ある知識を総結集して将来を生きる力を教える事が大事
  • 一つの答えを出す知識の教育は終わるのではないか、これからは新しいものを生み出せる力が必要
  • プログラミング教育の本質は創造性を高めること。qremo が目指していきたいのは新しいものをつかって新しい答えをつくりだす力
パネルセッション
  • 10年前、プログラミング教育はどう違っていたか
    • ここ5年くらいで arduino が出て来てだいぶ変わった
    • 組み込み業界がむしろ取り残された
    • 高校生以前に教育を受けてきた人たちはそもそも人種が違う
    • 大学で学ぶ知識は10年もすれば陳腐化する
    • 高校でプログラミングを教えられる先生がそもそもいない。趣味でやっている先生か、あるいは工業高校か工専でしっかりやっているかというのが現状。
    • 学生の IT リテラシー(プログラミングスキル)についても大学に入る前でだいぶ差がつきつつある
    • ライトな層がプログラミング(教室)に関わりつつある、例えば Drone や Pepper を使って開発をするのが子供達のステータスになりつつある。
    • 親の影響も要因だが、今は子供も自分でネットで調べて知識を吸収できる。
    • Minecraft はやはり流行っている
  • 海外との違い
    • マインドストームは普及度合いでアメリカとの差が激しい
    • 中東ではソフトウェア開発を政策としてやりつつあるが、日本ではそういう話が出ていない
    • 大きくなったスタートアップ (Facebook / Google など) の社長はエンジニア出身で、政策にも影響を与えている
      • 日本はエンジニア社長が少ないため経済界におけるエンジニアリングの重要性の認識が海外に比べて劣る
      • 日本は特に HW が絡む部分はまだ戦える
    • イギリスに続いてアメリカもプログラミング必修化が進んでいる。日本も文科省が動いている。
      • 海外では答えではなくクリエイティブさを評価しており、点数化しなくても OK という文化だが日本は必修科した場合は違うだろう。
    • TODAI TO TEXAS に行くメンバーは demo day の審査基準による
      • プロトクオリティ、インパクト、SXSW らしさ(審査員が全員 SXSW 経験者で SXSW に来るような人がまだ見た事ないであろうものを知っている)
  • 生徒が作って驚いたもの
    • マインドストームを使って義足を作ると言った生徒がおり、さらに足りない部分は 3D プリンタで作った
    • 作る過程を重視している、Trickey は過程の中で50個以上いろんなアイデアを出している
    • レシピをクラウドからダウンロードしてシェイカーを動かすハッカソンもあった
      • 例えば Moff には加速度センサしかないが、クラウドと連携することで価値を付加する
  • 子供達のクリエイティビティ
    • iPhone はゲームデバイスではなくツールとして与える
    • 情報系でない先生は講義も大変
    • スマホは GW としての役割・ラストワンマイルを補填することができる
    • WiFi の電波に関するアイデアが出てくるなど、大人が意識していないようなものが見えている
  • 中学校の技術科ではプログラミングが必修になっているがサポートが必要
    • 私立は良いが、公立は専門の先生がいない・プログラミングの面白さを教えられない
    • 先生がプログラミングの実習をスキップしてしまうのでそこを LEGO 社含め何とかしようとしている
  • マインドストームをどのように教師などに教えているか
    • 鳥人間などは顧問の負担が大きいので関わる先生がそもそもいなくなってしまう
      • 教員評価につながらないところを何とかやるように啓蒙する
      • 大学の先生の仕事は部屋で区切られてしまうので、誰かが辞めても引き継がれない可能性が高い
    • Kickstarter にしても基本的に参加者にやらせる、が大人お尻をふいてあげることも大事
    • もぐらたたきなどのようにやりたいと思えるテーマありきで、その中でポインタなど必要な技術を使えるようにしている
  • 生徒をより成長させるためのポイントは何か?
    • 子供達にあった教育、カリキュラムがあったとしてもそこから外れる子供の受け皿が必要
      • すてきな勘違いをしながら背伸びできるのは大事
      • 完璧を求めないでまず始めている人は面白そう、カチカチの事業プランやっている人はあまり楽しくなさそう
    • 普通だったらしゃべれない人としゃべらせるようにする。想像もできないような機会をどれだけ与えられるかに注力している
  • 子供達の間のコミュニティ作りをどう支援しているか?
    • 3人一組でペアプログラミングをやってみた。子供達でも学びがある。チームで作っていく楽しさと難しさを痛感しているようだった。
    • コミュニティとチームワーキングは別の話
      • チームワーキングは誰であろうと難しいが故に学びがある
    • Scratch でつくったプログラミングをシェアして皆がまた改造してという文化が成り立ちつつある
      • ロボコンは競争でシェアではないが、同じ課題に対して複数のアプローチがあることを学ぶことができる
      • ロボコンで自分の子の写真・ムービーだけを撮ってばかりいたら相手を研究できないと子供に怒られた親御さんがいたり、負けて学ぶということもあるので競争の場は大事
    • 大学生は利害関係もなく我が強い、イデオロギーが強くてコミュニティが発達しない
      • 競争の場を与えるとまとまる、大学生には競争の場が重要
  • それぞれが考える IT教育での成果とは
    • SXSW に行けるような子供達を育成できる事、スーパースターだけではなくいろいろな子供に理想の学びの場を提供できる事
    • 教育の成果の回収にはタイムラグがある、大学は最終教育機関なのでアウトプットが出るのは時間がかかる
      • 東大に入るのが官僚になるのではなく SXSW に行けるらしいということが目的になる、そして学生の底上げがされ5年後にグローバルな人材になると良い
    • 東大レゴ部に生徒が入ってくる、読み書きプログラミングと言われるような慣習化
  • 特定企業のリクルーティングに関与する事は悪い事と思われている?
    • インターンに参加させるなどは実質的にはやりづらいがインターンした先で最先端のことをやれるべき
    • シンガポール国立大学はスタンフォードと提携しており、授業を受けてベンチャーで働くと単位になる
  • ハッカソンについて
    • ベンチャー支援者という立場からいうと費用対効果は悪い
    • どちらかというと non profit / civic tech の方で効果を発揮するが、土壌が無いと価値のあるものはできない
    • 教育という意味ではレベル差のある人がチームワークをすることに意味がある。初学者が一緒にモノを作る体験を得る事ができる
  • 既に全てにおいて教師が生徒を上という状況に無い
    • ファシリテーションや発想法などそちらの方が必要になってくると思われる。エンジニアリング力を引き出す方に注力するべき
  • iPhone やアプリが当然だと思っていて裏側の仕組み・低級言語を知らない子供も増える
    • 将来的にそれを学習する機会はどんどん失われていくだろう
    • 開発系HWスタートアップなど競争力を出さないといけない方は低レイヤでのチューニングなどがより必要になる
    • 基礎教育としてやらないといけないか?これからの大学はそういった基礎をやる場になるかもしれない

『SXSWeduへの挑戦結果報告会〜世界の教育最前線から〜』 聴講メモ

先日、デジタルハリウッド大学で開催された SXSWedu 2015 の参加報告を聴講してきました。

http://gs.dhw.ac.jp/news/150413.htmlgs.dhw.ac.jp

昨今の教育事情や世界的な問題意識などキャッチアップできた事が非常に有意義で、来年は是非自分も参加してみたいと思えるような内容でした。

下記、聴講メモなのですが私自身が専門外ということもあり、誤読・誤認または調査不足による誤った記載がある可能性があります。また、参考リンクについては私が勝手に付加したものがあることもご了承ください。

SXSWedu最前線 (デジタルハリウッド大学大学院 佐藤昌宏 教授)
  • SXSW : 87年に音楽祭として開始。
    • Music, Film, Interactive (IT) が大きなテーマでどちらかというと Edu は前座的な位置づけ。
    • PUFFY も全米(世界)デビューのきっかけに使った。今年は Perfume が登場。
    • 場所はオースティン (Sillicon Hills : ベンチャー育成に積極的)、世界へ売り込む発信の場。
    • Todai to TEXAS : 東大の産学連携が SXSW を通して世界に売り込み。
      • 過去にスケルトニクスも売り込んで、逆輸入のような形で今は日本の CM にも出ている。
  • SXSWedu は Education expo - Launch - Playground - Film のようにエリア・セッションが分かれている。
    • 参加者数6,000人, 男女比 5:5, 教育がテーマということもあって7割以上が大学院卒。今年は日本人18人が参加。
    • 15歳でカーボンナノチューブによる膵臓がんの発見手法を確立した Jack Andraka 氏のプレゼンが凄かった 。
      • Jack Andraka | Speaker | TED
      • 200通の手紙を書き199 の大学に断られ、最後のジョンズ・ホプキンス大学に採用された。
    • MIT MediaLab 所長の Joi Ito 氏の妹である Mimi Ito 氏は興味が近い人が集まったときを学習の機会にする Connected Learning を提唱している。
    • KHAN Academy と CollegeBoard の連携が発表された。
      • CollegeBoard が提供する SAT (大学進学適性試験) を受験する上での準備を KHAN Academy が提供する教材を使って中高に行かずとも誰もが無料で行うことができるようになる。
    • Gender gap に関するセッションも多かった。
      • ノーベル賞受賞者でもある Malala 氏が Hour of code を支援している。
      • 女性により受容されるように Art の価値が再確認され、STEM に A を加えた STEMA 教育が注目を集めている。
      • The global gender gap : 北欧が圧倒的に格差が少ない。アメリカは20位、日本は104位。
      • 役員の何割を女性に、というような制度ではなく教育で男女格差を解消しようという背景がある。
      • Linda Liukas 氏と Karri Saarinen 氏がヘルシンキで最初に行ったイベントから端を発したフィンランド発の女性向けプログラミング学習イベントである Rails Girls というものがある。
        • そのメッセージとしては、全ての会社がソフトウェアの会社になる、社会にはもっとたくさんのプログラマが必要というもの。
    • Closing the (middle skill) job gap というのも一つの重要なテーマだった。
      • スキルを3つに大別すると下記のようになる。
        • ハイスキル : 法律家、コンピュータ開発者、金融業など : 所得が激増している。
        • ミドルスキル : 営業・銀行の窓口業務、秘書、機会のオペレータ・工場の監督官、教員など : コンピュータに代替可能であるとされ、所得が減りつつある。
        • ロースキル : ビル管理・食品調理: 所得は微増している。
      • 参考) UK economy shows shift to low-skilled jobs, research finds
      • アメリカでは基本的なデジタル技能を持たない人は事実上、米国経済のどの部門に立ち入る事ができないという主張もある。
      • ミドルスキルにおける労働市場のミスマッチを教育者と EdTech でどう解決するか?
        • 教育が一つのアプローチ (プログラミング、STEM、ICTリテラシー教育) になる。
  • SXSWedu の楽しみ方
    • Meet up
      • Interactive などは規模が大きいこともあって同じテーマを持っている人になかなか出会えない。
      • Social という機能があり、事前につながることもできるのでそれを活用する (edutech タグの人が多かった)。
      • 海外では仲良くなってから名刺、Email -> Linkedin -> facebook の順でつながる事が多い。
    • Austin Startup Crawl
      • Austin に根付くベンチャー企業を回れるような地図をくれる。
      • 先生たちがベンチャー企業を回って学校で使ったり、ベンチャー企業が市場調査をできたりする。日本では深い溝があってまずそういう機会はない。
    • ご飯や移動には Uber などのアプリを使っていた。ホテルが凄い高くなるので宿も Airbnb でとった。
      • 毎日がスマホで始まり、スマホで終わるくらい IT が当たり前に使われている。
      • 日本では教育と IT が別のものとして語られることが多い。
  • SXSWedu2016 : 本気で世界の課題を解決しようとしている教育者と肌感覚で話し合える。
    • 日本の現状を正しく把握できる
    • 起業家は LaunchEDU へ。期間は10日間くらい。日本の EdTech を世界へ!
教育現場に広がるSTEAMの世界 (グリー株式会社 小宮山利恵子氏)
  • STEAM もテーマの一つとして SXSWedu に設定されていた。
    • 4日間で356のセッションがあった中で STEM/STEAM のタグ付けされたセッションは24 (1セッションは10分〜1時間)
  • セッション紹介 1 : How to teach programming
    • イギリスでは5歳から16歳までプログラミング教育が義務化されている。
    • 低学年向けのデバイスを使わないプログラミング教育が普及し始めている。
      • 5歳で簡単なプログラミングとデバッグ。
      • 7歳でプログラミングの設計及び実現。
      • 14歳で2つ以上のプログラミング言語を習得。
    • 低学年のうちに (ロボットなどを通して) physical にプログラミングを理解しておくことが重要。
  • セッション紹介 2 : Robot Edu How robots can transform learning
    • 授業でロボットを用いる事でラーニングカーブが鋭くなった(学習効率が高くなった)
    • ロボットは年齢・性別に関係なく、その楽しさをアピールできる。またプレゼンの能力も向上した。
      • CS 専攻の学生は男性が多かったので STEAM の A を入れたもの(ロボットの Nao を使ったファッションショー)を取り入れた。
      • ロボットはどの層も引きつけている・アピールできるのではないか?という話がされた。
    • いかに民族的マイノリティにアプローチするか?ということも重要。
  • セッション紹介 3 : Motivation and Virtual Learning
    • 子供達は Scratch を使う事で自然と4つの P を実行している
      • Projects
      • Peers (子供達の作品とチュートリアルが掲載されるポータルがある)
      • Passion (ゲームだけでなく母の日のカードや誕生日のカードやレゴで作ったものなどを自発的に作っている)
      • Play (自分が作った者を際限なく遊ぶ)
    • 最近の Scratch はダンスや音と組み合わせて3次元の遊びができるようになった
      • 拍手を使ってコウモリをコントロールするゲーム
    • 将来、21世紀型スキルと呼ばれるこのような能力はもっと必要になる
  • セッション紹介 4 : Degrees vs Micro Credentials
    • コミュニティスクールによる学位よりも、民間が発行する認定書の方が就職に有利という議論が起きている。
    • Nanodegree : Udacity x at&t が提供、既に Google の社員教育としても採用されている。
    • 昇進に関する一つのファクターとなりうる。
    • 職業的な者、スキル的な者がベースとなる社会になったとき、学校以外の期間が発行する認定書は更に役立つ者になる可能性がある。
  • Skype 発祥の地でもあるエストニアにおける IT 政策
    • 教育先進国であるエストニアはバイオおよび IT を国の主要な産業の柱として掲げている。
    • インターネットの個人普及率は76.5%、世帯普及率は70%。
    • 国民 ID カードがあり、若い人はカードすら持たずに携帯に収めている。
    • 政府 CIO (Chief Information Officer) の Taavi Kkta 氏はまだ 35歳。
    • 参考) #ICTSpring 2014 Day 2: 「国の要衝はクラウドにあり」〜世界最先端e国家エストニアが考える、国の守り方
      • 個々の生徒を育成するよりITというツールを使って何ができるようになるか、イノベーションが生まれるかどうかということが重要 (KPI は持てない・それを測る指標は無い)
    • エストニアは高等教育が充実しているので国外への留学生は少ない
    • 小学校1年生のスマホ所持率が91%
    • Pelgulinna School
      • IT はツールでしかないので子供達の五感を用いた授業を多く行っている
      • HITSA (NPO 団体)が先生のケアを一括して行っている
      • IT教育 Smartlab
  • 日本の課題
    • 理系人材の減少 : 97年度から減少を続け、2013年度には21.6%まで低下
    • STEM 教育を支える ICT 教育環境の格差
      • デバイス活用政策 : 700億円の試算 - 行政配布か、自費購入か、BYODか?
      • 2014年度から4年間で6,712億円をICT教育整備として予算措置しているが地域において環境格差が存在する。
      • デバイスに触った事の無い子供達がたくさんいる・公立学校であっても平準化されていない。
      • 地方交付税だが紐づけではないので長の判断で使途が異なる。
SXSWeduからみる世界のEdTechスタートアップの状況 (Viling Venture Partners 栗島祐介 氏)
  • 発表資料
  • Minecraft meetup

    • 満員の会場で半数近くが子供達で熱狂していた。
    • 日本でも流行っている・ひとクラス3・4人はやっているらしい。
      • HIKAKIN 発信から始まった?実況動画に触れて楽しいと思ったのがきっかけの可能性。
      • 探Qチャネルのように動画から学ぶことが当たり前になりつつあるのかもしれない。
    • 参考) Minecraft Official Site | Minecraft Education Edition という試みがある。
  • SXSW に挑戦したベンチャー企業の中で LAUNCHedu Finalist の紹介。

    • Zaption
      • 優勝者であり、映像教材として提供されている動画をつぎはぎして教材を作ることができる。また学生の進捗も確認できる。
    • Pear Deck
      • 多人数向けリアルタイム双方向型授業サービス
      • 同様のアプリで日本発の ロイロノート の方が勝っている印象。
    • 去年のファイナリストは RobotsLab
  • Viling Venture Partners は Education Expo に VC として参戦。
    • 日本から教育スタートアップを連れて行って反応をみた。
    • 海外に置ける日本の教育系スタートアップの進出可能性の調査。
    • 日本発でも勝算があるが超えるべきポイントがある。
    • 洗練されたプロダクト(機能・UI・UX)が必要。
    • 外部の組織の巻き込み方、Global な実績が重要。
  • EdTech : アメリカでは 2013 年に 1,400 億円、2014 年 Q1 に 750 億円もの予算がついている。
    • 幼児教育・K-12教育・STEM(高等)教育
    • 米国における女性エンジニア比率は14%であり、この比率を上昇させる動きとして Art が取り入れられた。
    • テクノロジーの進歩によるミドルスキル層の衰退
      • 銀行窓口業務に IBM の人工知能ワトソンの導入
      • 金融業でもトレーダーが自動化されつつある
  • 日本の現状
    • 教育関係者 x Startup が当たり前にある環境 : △
    • 教育機関・事業会社・投資家の支援体制の確立 : △
    • 伝統的な習い事にも変革が起きつつある。
    • 海外市場に日本の目を向けさせるための方法の模索。
    • SXSWedu のネットワークから日本の教育系 Startup を世界へ(有力者と効率良く繋がれる)。
  • http://www.vilingvp.com/
    • 没頭人材
    • Eduvation Times (EdSurge の日本語版サイト)
    • Accelerator Program
日本の教育系スタートアップによるSXSWed挑戦報告 (株式会社baton 衣川洋祐 氏)
  • 最も興奮する、100秒の勉強法マッチ
  • 教育 x 対戦型ゲームアプリ
  • 問題意識 : PISA (学習到達度調査)の調査では数学的リテラシーや読解力などは日本は高い、が興味関心・動機付けは非常に低い。
  • SXSW で失敗する10の挑戦
    • SXSW を調べない。
    • 直前に英語を詰め込む。
    • 学ランを着る(あまりウケなかった)。
    • 英語版サンプルのデモだけじゃだめ、U.S. リージョンのストアに出してその場で誰でもインストールできる状態にしておくべき。
    • 日本の教育を伝えるという気概だけではだめ。アジアの一国としての日本を求められる(アジア市場でのポテンシャル、中国などとの比較)
    • SXSWedu に全力を注いでしまうのはだめ。 Interactive に Perfume もいたし、面白い新しいサービスがいっぱいあるので残りも滞在するべき。
    • SXSW を満喫してしまうとだめ。時差の関係で現地で日本と仕事ができる時間が限られる。
    • 一人で乗り込むのはだめ、3人はいて欲しい。
    • しっかり食べるとだめ、時差ぼけを解消するためには機内食など24時間食べないといいらしい?
    • 自身をもたない、すぐ砕けるのはだめ。穴だらけでもとりあえず持っていく。

DevLOVE関西 『農業の「現場」から生まれた業務改善サービス「houren.so」の話を聞いてみる』聴講メモ #DevKan

農業 IT の取り組み事例について勉強したいという事で、大阪で開催された下記イベントに参加してきました。

devlove-kansai.doorkeeper.jp

スライドも公開されています。

www.slideshare.net

農作業などの現場で、写真による 1. 簡単で、2. 十分に内容が伝わる 必要最低限の報告を可能にしたのが 現場を強くする報告連絡相談ツール「houren.so(ホウレンソウ)」 です。

農業 IT の事例という視点だけでなく、シンプルながら現場に必要なソリューションを提供するというものづくりの方法論として参考になったと思います。

スライドに書かれている事とほとんど重なりますが、以下、聴講メモです。

  • 発表者 : 株式会社日本情報化農業研究所 斎藤 毅 様
    • 細胞生物学専攻 : 遺伝子組み換えなどの研究をやっていた
  • houren.so : 2週間前に正式リリース
    • 建築・宿泊・食品・農業など「現場」に特化した、現場の問題をスムーズに解決するツール
    • IT をほとんど触れない人向けのグループウェア
  • 写真を投稿するだけでオーナーと従業員の両方の要件を満たすことができる
    • 小さい会社だと従業員がトイレを掃除する
    • 汚いと会社の好感度が下がるので上司が気になる
    • 掃除後の写真を撮影して投稿する事で (Exif から) 誰がいつどこの箇所を掃除したかを知る事ができる
    • houren.so では矢印をつけて気になる点にコメントを残す事ができる
  • 写真一枚で報告するアプリが開発された経緯
    • 農家で勉強させてもらっていた7年前はずっと畑にいて栽培と出荷をしていた
    • 日々の作業が終わった後、業務アプリに本日の作業(日報)をまとめるのがきつすぎた
    • ブログ形式で自由に記述をしていたため(思い出した)時間も適当だった
    • 一般的な業務報告アプリも負担だった
    • 誰も読まないのに出さないとサボりとみなされるので日報自体が不毛な作業になり、睡眠時間も削られていった
    • 農業は前に向かって転倒すると死ぬような機械があったりするので睡眠不足は致命傷・死亡事故につながる
    • 雨の日はメモはとれないし、寒い日は手袋を外したくない。そもそも水回りの作業が多すぎてメモは現実的ではない
    • 真夏の農薬散布は8月でも重装備が求められる(散布する人が一番危ない・年間5人は中毒事故がおきる)
    • 情報を保持しているものとしてデジカメに着目してみた
    • 農業従事者は写真を見ると大体の広さがわかる
    • 使用した機械と作業開始前後の写真を見せただけで責任者はほとんどのことがわかった
      • 大事な事は写真だけで大半が伝わるということがわかった
    • 写真を見ただけで技術を習得できた人もいた
    • 丁寧に作業日報を投稿されても真剣に読まないし、販促で使える写真が合った方が現状把握よりも遥かに有利
      • テキストではなく写真のデータの方が欲しくなった
    • どんな写真が使えるかはわからないので日報を兼ねて写真を撮ってもらった
    • 何となく撮った写真でも問い合わせが合ったりした。ちょっとした写真が使えたりした。
  • houren.so では写真を並べて日付だけ出すような形にしている
    • 同じ日に撮影した写真を並べて作成する簡易的な日報機能がある
    • 業務報告アプリは管理者の欲しい情報ではなく作業者の投稿のしやすさを優先することで真価を発揮する
    • 写真内の Exif を使っているので後日投稿しても情報は落ちない
  • 肥料を与えたのに元気の無いニラがあった
    • 写真一枚である程度わかった
    • 矢印とコメントで指示することができた
    • 熟練者は問題の早期発見ができる
      • 追加で写真をとるこてより追求する事ができる
      • 熟練者が目をつけているところがログに残る
    • 機械いじりが得意な人はメータを撮り始める
    • ノウハウが貯まり始めると強い
    • 投稿のハードルを下げた事でメンバーの特徴が見えてきて、それを共有する事で個々人が意識すると有利な視点を鍛える事ができた
    • 負の要因を一つ一つ見ていくと強いものになる
  • 農場の事務作業の低減の取り組みは SOY Shop
  • 個人に紐づく情報はほとんどない(名前とアイコンくらい)
  • 天気情報は欲しいと考えている
  • 公開前に自社で1年動かしていた、ベータ稼働していたのも半年

Nginx で http も https も IP 直打ちのアクセスを弾きたい

XXX.XXX.XXX.XXX mysite.com という A レコードを持つサイトを運用していて、http と https でのアクセスを受け付けているとします。

Nginx では下記のようなサーバブロックがあるイメージです。

server {
    listen 80;
    server_name mysite.com;
    return 301 https://$server_name$request_uri; #https にリダイレクト
}

server {
    listen 443 ssl;
    server_name mysite.com;
…
}

そして IP 直指定で飛んでくる不審なリクエストには応答したくないので Nginx 内の公式ドキュメント Server names を参考に下記のようなサーバブロックを追加してみます。

server {
    listen       80  default_server;
    server_name  _;
    return       444;
}

このとき、当然 http://XXX.XXX.XXX.XXX へのリクエストには 444 が返るのですが、https://XXX.XXX.XXX.XXX は SSL 証明書の警告が出るもののアクセスできてしまいます。

How nginx processes a request によれば

もし “Host” ヘッダがどのサーバ名ともマッチしない場合、またはリクエストにこのフィールドがまったく含まれていない場合は、nginxはこのリクエストをデフォルトサーバに振り向けます。上記の設定ではデフォルトサーバは最初のもので、これは nginx の標準的なデフォルトの挙動です。

ということで 443 に対するディレクティブが mysite.com のものしかない場合、https へのリクエストは全て mysite.com のサーバブロックで処理してしまうようです。

では、80 に加えて 443 に対する default_server も足してみると良さそうです。

server {
    listen       80  default_server;
    server_name  _;
    return       444;
}

server {
    listen       443  ssl default_server;
    server_name  _;
    ssl_certificate /path/to/mysite.crt
    ssl_certificate_key /path/to/mysite.key
    return       444;
}

最初、https://mysite.com へのリクエストまでもが 444 でドロップしてしまっていたのですが ssl_certificate と ssl_certificate_key を記載していなくて

no "ssl_certificate" is defined in server listening on SSL port while SSL handshaking, client: x.x.x.x, server: 0.0.0.0:443

とエラーになっていただけでした。このデフォルトサーバの証明書はオレオレでも構わないと思います。

あるいは

stackoverflow.com

の回答にあるような

server {
    listen 443;
    server_name mysite.com;

    if ($host != "mysite.com") {
        return 444;
    }
    ...
}

でも IP 直のアクセスを落とすことができますが、server_name を指定しているのにもう一度チェックしていて若干冗長な感じがあります。

あとこちらでは前段に HAproxy を置いてそこで落としているようです。

security.stackexchange.com

今回のサイトは IP とドメインが1対1なので SNI 云々については気にする必要がありませんでしたが、複数ドメインをホストするようなサービスだと default_server での直 IP リクエストドロップが良さそうです。

Colored Hashtag for Trello を v1.0.5 に更新しました

どうも Trello のデザインが変わったせいか動作しなくなっていたので Colored Hashtag for Trello を更新しました。

chrome.google.com

Chrome プラグインだと公開するだけで勝手にユーザの環境も更新されるから開発者的には有難いですね。気軽にバグ修正ができます。

この Colored Hashtag for Trello ですが、Plus for Trello というプラグインと一緒に使っても動作するように作っています(チームで導入しているため)。

chrome.google.com

このプラグインを使うと下図のようにハッシュタグが強調表示されるのですが、デザインが変更されるということは DOM の構成、または属性が変更されるということなのでセレクタを使う場合はそこを意識してあげる必要があります。

f:id:beniyama:20150321131156p:plain

実際、Plus for Trello 使用前後を比較してみると

<div class="list-card-details u-clearfix">
  <div class="list-card-labels u-clearfix js-card-labels"></div>
  <a class="list-card-title js-card-name" href="/c/XXXX/1-101">
    <span class="card-short-id hide">#1 </span>#101 プラグインの更新記事を書く
  </a>  
  ...
</div>

という DOM(一部抜粋)が下記のようになっていることがわかります。

<div class="list-card-details u-clearfix">
  <div class="list-card-labels u-clearfix js-card-labels"></div>
  <a class="list-card-title js-card-name agile_hidden" href="/c/XXXX/1-1-story-1">
    <span class="card-short-id hide">#1 </span>#101 プラグインの更新記事を書く
  </a>
  <a class="list-card-title js-card-name agile_clone_title" href="/c/XXXX/1-1-story-1">
    <span class="card-short-id hide">#1 </span> プラグインの更新記事を書く
  </a>
  ...
  <span class="agile_hashtags"><span class="badge agile_badge agile_badge_hashtag_primary">101</span></span>
  ...
</div>

元々一つしか無かった .list-card-title が二つになり、オリジナルは .agile_hidden クラスが付加されて不可視に、ハッシュタグ部分を別 span に分離したクローン(.agile_clone_title が付加されている)がその後ろに差し込まれています。

Colored Hashtag for Trello では(どうせ DOM 操作によるスタイル変更を行うので) Trello API を使わずにタイトル中のテキスト(上図で言うと「#101 プラグインの更新記事を書く」の部分)からハッシュタグを検出しているのですが、ここでオリジナルのものを破壊されてしまうと Plus for Trello の有無で処理を変えないといけません。しかしながら、ちゃんと元の構造のまま残してくれているのでその必要はなく、代わりに .list-card-title で引いたときに最初のもの(オリジナル)だけ取得するようにすれば良いだけです。この辺は、他のプラグインのことも考えて Plus for Trello は作られているなと関心しました。

v1.0.4 までは first-child 疑似クラスで .list-card-title 要素を指定していた(つもりだった)のですが、http://web-dd.net/?p=278 でも書かれているように .list-card-title:first-child としても「最初の .list-card-title 要素」が選択されるのではなく、「最初の要素が .list-card-title だったときのみマッチする」のでその前に他の要素が同レベルで現れるとひっかかりません。今回はおそらく .list-card-labels の div が差し込まれるようになったために first-child.list-card-title でなくなったことが原因かなと考えています。

結局、今回は代わりに first-of-type 疑似クラスを使う事で解決しました。E:first-of-type-CSS3リファレンス によれば

E:first-childの場合には、種類に関係なく要素を数えるため、 最初に来る要素がE要素であった場合にスタイル適用の対象になります。

一方、E:first-of-typeの場合には、途中で別の種類の要素が入る場合にはそれを数えずに、 指定した種類の要素のみを数えるため、最初に来るE要素がスタイル適用の対象になります。

とのことで、これでめでたく最初の .list-card-title だけ取得することができるようになりました。