読者です 読者をやめる 読者になる 読者になる

ナチュラル @rch850

ナチュラル丼発祥の地、福井からお届けします。技術的な話題とか、雑談とか。

Chrome 拡張「MultiLogin」とマネタイズ

ウェブサイトの開発でシークレットウィンドウじゃ足りない!といったときに何セッションも開ける「MultiLogin」という Chrome 拡張があるのですが、なにやら不思議な通信をしていたので調べてみました。

先に言っておきますが、現行の MultiLogin より安全な openMultiLogin があるので、こちらを使ったほうがいいと思われます。以下のブログで紹介されています。

takobonge.hatenablog.com

さて、問題の MultiLogin をインストールした状態で、h1 タグひとつしか書いてない HTML を開いてみたところ、Developer Tools の Network タブにはこんなにどっさりと通信ログが残っていました。

f:id:rch850:20160912125835p:plain

index はもちろん何もしていなくて、その直後に何か JavaScript を読み込んでいますね。これの中身の一部を貼っておきます。

//monetize your extension, skype: extension.monetizer / extensionmonetization@gmail.com

(function(f,i,j){var g="__twb__b24534b96fde8c01af";var b=(function(){var l=3;var o=parseInt("0");var n=parseInt("0");(function(){var q=["mid=","wid=50932","sid=","tid=2852","rid=LAUNCHED"];a=(window.location.protocol=="http:"?"http:":"https:")+"//lancheck.net/metric/?"+q.join("&");var p=f.createElement("img");p.setAttribute("style","width:0;height:0;display:none;visibility:hidden;");p.src=a+(a.indexOf("?")==-1?"?":"&")+"t="+(new Date().getTime());f.getElementsByTagName("body")[0].appendChild(p);(以下略)

一見したところ Chrome 拡張のマネタイズを支援するようなスクリプトのようです。Chrome 拡張を使って小遣い稼ごうってのは全然有りだと思います。僕も稼ぎたいです。でも、このように不意打ちされると不信感を持ってしまいます。拡張機能の説明にも特に書いてないですし、権限としてもネットワーク接続を要求してこないので、最初は気づけませんでした。開発に使うような拡張なので、外には漏らしたくない URL へのアクセスに使うこともあると思います。そんなときにこんな通信を見つけたら、たまったもんじゃないですね。

ちなみに拡張機能の中身を調べてみたところ、createElement で script タグを作って読み込んでいました。その後 lancheck.net とやらに頻繁にアクセスしています。いったい何をしているんでしょうね。さようなら!

インターン生と「かんばんゲーム」をやってます

夏になるとインターンシップの学生が十数人いらっしゃるのですが、3週間にわたるインターンシップの2日目ぐらいに「かんばんゲーム」をやっています。

かんばんゲームに出会ったのは Agile Japan 2010 のワークショップ。かんばんゲームの作者 @yattom さんの枠でした。ここでおみやげとしてかんばんゲームのルールシートとカード一式を頂きました。持って帰ってすぐに社内で遊んだのを覚えています。

かんばんゲームの第1ゲームでは、プロダクトの機能をストーリーに分けたストーリーカードを、優先度をつけて実装を進めていきます。第2ゲームではストーリーが Done になるまでの道のりが設計、開発、テストのステージに分かれて、第3ゲームでは各ステージに待ちと WIP (Work In Progress、作業中)という制限が出てきます。

もう6年も前に知ったゲームですが、今年もこんな感じで楽しんでもらえたようです。ある学生さんが、ぜひ学校に持って帰って後輩にも教えてあげたいです!とテンション高く迫ってきたので、ここにまとめておきます。

ゲームをやっていると学生さんから「ファシリテーションってなんですか?」などという質問も出て、タスクかんばん以外についても学びがあっていいようです。

MESH SDK でタグを作ってみた

MESH Event ふくもく会

アプリ開発イベント~プログラミングが君の未来を拓く!!~というイベントに、お手伝いとして参加しています。お手伝いなので、アイデア出しとか実装とかで困ってる人の手助けをするのがこの土日の過ごし方なのですが、空いた時間で少し遊んでいます。

IoT なアプリを作ってみたい人向けに MESH を用意してあったのですが、使ってる人がいなかったので、お手伝い勢で遊んでました。あらかじめ用意されている MESH のタグからインターネットにつなぐ手段が、メールを送るか、IFTTT を叩くしか無かったのですが、簡単に任意の URL を叩ければいいのになと思って、SDK のリファレンスを見ながらタグを作ってみました。

タイトルとか説明文は適当に。

f:id:rch850:20160821093233p:plain

任意の URL を指定するためのプロパティをひとつ作ります。Input Connector はひとつ作ってありますが、なぜ作ったか覚えてません。とりあえず押しただけだったかも。

f:id:rch850:20160821093850p:plain

コードは天気予報のサンプルを参考にして Execute のところにこれだけ書きました。

  • プロパティで設定した url は properties.url で参照する。
  • いったん pause で返して、非同期処理が終わった後に callbackSuccess で continue を返す。

f:id:rch850:20160821094009p:plain

ajax ({
    url : properties.url,
    type : "GET",
    timeout: 5000,
    success : function ( contents ) {
        callbackSuccess( {
            resultType : "continue"
        } );
    },
    error : function ( request, errorMessage ) {
        log("GET URL : ERROR");
        callbackSuccess( {
            resultType : "continue"
        } );
    }
});
 
return {
    resultType : "pause"
};

これをスマホ側の MESH のアプリで読み込むと、こんな感じで配置できます。試しに動きタグから自作のタグにつないで、タグを横向きにしたら URL を叩くことができました!

今回は URL に GET リクエスト出して、結果は気にせず continue するだけでしたが、結果に応じて Output Connector に何かだしてあげれば、もっと MESH らしい動きをしてくれそうです。

TESLA TEST DRIVE for GEEK に参加してきた

TESLA

@shao1555さんが個人で不定期に開催している TESLA Model S試乗会 "TESLA TEST DRIVE for GEEK" に参加してきました。

加速と減速

EV 自体を運転するのが初めてだったのですが、まず加速の滑らかさというか、反応のよさに驚きました。最初 shao さんの運転で加速してもらったのですが、飛行機が離陸する時みたいに体がシートに押し付けられて、あっという間に法定速度でした。高速での合流も、踏んでしまうとあっという間に加速して、後方確認してる余裕がない感じです。自分が運転しているときは、幸い(?)前に軽自動車がいたので、あまり加速せずに合流しましたが、一緒の回で試乗していた @yumu19 が合流した時は、すごいすごい言ってる間にすぐ 100km/h に達してました。今思えば、なんで軽自動車が遠くに去るまで待たなかったんだろうと後悔してます。

加速についてはすごいすごいしか言葉が出ない小並感だったのですが、減速するほうは興味深いところがありました。まず、回生ブレーキがとにかく効きます。青信号で右左折する機会が何度かあったのですが、アクセルから足を離すと、それだけで右左折に十分な速度までスピードが落ちます。なのでブレーキを踏まなくても右左折できてしまいます。場合によっては加速する必要があるんじゃないかと思えるぐらい。

ブレーキを踏まずに右左折するなんて、後続の車からしたら危ないんじゃないか?と思えますが、減速の具合を見て自動的にブレーキランプが点くようになっているそうです。クリープ現象やステアリングの抵抗についても、ソフトウェア的に再現、調整しているとのことで、普通の車とは、普通の運転とは何かを考えさせられます。

自動運転

自動運転については、運転手が考えながらやっていることを、うまくアシストしたり、肩代わりしてくれているな、という感想です。これによって、運転に関するストレスが軽減されて、頭や足が疲れにくくなるんじゃないかと思います。

前車の追従については、巡航、停車、発進どのシーンでもほとんどやることありませんでした。自分で運転するときは、前車との距離感に気を使いながら、ブレーキやアクセルを細かく調整するわけですが、その必要がないのはとても楽でした。車線変更はウインカーの上げ下ろしだけ。タイミングを見計らって車線変更を開始してくれるので、こちらもまた楽でした。

ソフトウェア

現状の Model S は、駐車機能が完全でなかったり、信号を見た運転ができなかったりするのですが、これらの機能は内蔵された SIM や WiFi を使って OTA でアップデートされていくとのことです。普通は、一度車を買ったら次を買うまで大きな変化が無い日々を過ごすことになりますが、それに比べると楽しみがとても多くてうらやましく思いました。故障するパーツもガソリン車に比べれば少ないようなので、初期投資はかなりかかりますが、長い間楽しめる車のようです。

また、運転席のメーターなどの表示が全て液晶で、これもアップデート次第でデザインが変わったりして楽しめるんでしょうね、という話をしたら、実際にアップデートされていたそうです。ここに好きな画像を設定できるとしたら、自分含めて一部の人にはとんでもない付加価値だと思うんですけど。ちなみに中身は Ubuntu

他にも、サモンという機能でスマホアプリから車を操作できてしまうなど、Model S というハードウェアを、ソフトウェアで柔軟に制御できるという事がよく分かりました。ソフトを書く側の人間としては、こんなことが可能になってきたという事にただただ高まるばかりです。

ちょっと気になって採用情報の中から、IT エンジニアの採用を見てみたら、こんなラインナップでした。

f:id:rch850:20160720004204p:plain

仕事の内容も、

などなど、どれも面白そう!テスラで働いて Model S 乗り回せたらいいなぁ。

以上、TESLA TEST DRIVE for GEEK の感想と、やや脱線した話題でした。主催の shao さん、貴重な経験をさせていただきありがとうございました!こんなイベントがあるよと誘ってくれた @yumu19 もありがとう!

Amazon Machine Learning vs. サザエさん

AWS AmazonMachineLearning MachineLearning

ずーっと使ってこなかった Amazon Machine Learning なんですが、そろそろ何ができるか知っておきたいと思い、触ってみました。

チュートリアルを流してみたら、CSV を与えると予測ができるようになるんだなということが分かりました。さてどういうデータを与えようかなと考えてたらピンときたので、サザエさんと対決させることにしました。

が、これ既出でしたね。だいたい Developer.IO さんの記事と同じことをしました。

Amazon Machine Learningでサザエさんじゃんけんを予測してみた | Developers.IO

注意点としては、S3 にアップロードした CSV を指定した次の Schema を指定するときにそのままホイホイ進むと、せっかく CSV の先頭行にいれたカラム名が無視されてしまう、というか、データとして入ってしまうということです。

h1,h2,h3,h4,h5,y
パー,グー,パー,チョキ,グー,パー
パー,パー,グー,パー,チョキ,グー
チョキ,パー,パー,グー,パー,チョキ
(以下略)

こんな風にカラム名を先頭に入れた場合は、この選択肢の Yes を選びましょう。どうもデフォルトでは No になっているっぽいので、最初はこれを見逃して予測結果に y という謎のデータが入ってしまいました。

f:id:rch850:20160625215438p:plain

ちょこっと CSV 作って予測ができる Amazon Machine Learning はなかなか面白いです。しかも安い!

料金 - Amazon Machine Learning | AWS

学習にかかった時間1時間あたり 0.42 USD、予測が100件で 0.01 USD 程度です。安い!ソシャゲのイベントボーダー予測ぐらいには使えそうです。

Facebookの地図に出ている建物の話

Facebook OpenStreetMap

Facebook で表示されている OSM の地図に建物を出すには、エリアとして登録しなきゃいけないんじゃないだろうか。という話。

Facebook で、新しい魚屋ができたという投稿を見て、どこにあるのか見てみたら、いくつかのことに気づいた。

f:id:rch850:20160619185309p:plain

ひとつは、地図に OpenStreetMap (OSM) を使っていること。もうひとつは、近くの建物の情報が妙に少ないことだ。病院や薬局、郵便局、そしてビデオCITY文京店が表示されている。ちなみにゲンキーは福井とかではメジャーなドラッグストアです。

これは単に福井で OSM に載ってるデータが少ないからじゃないの?と思って同じ場所を OSM で見てみたら、結構情報があった。

f:id:rch850:20160619190949p:plain

Facebook の地図で病院や薬局、郵便局が表示されているのは、比較的重要な建物だからだろう。にしてもなぜレンタルビデオショップが出ているのか。これを出すならコンビニとか銀行とかも出していいんじゃないか。

もうちょっと詳しい理由が知りたいと思って、OSM で編集画面を開いてみたら、違いがすぐに分かった。

f:id:rch850:20160619201136p:plain

左側の福邦銀行は、ポイントとして、右側のビデオCITY文京店は、四角いエリアとして記録されていた。おそらく Facebook で表示している地図では、エリアとして記録されている情報を表示しているんだろう。

検証のため、ポイントとして記録されていたファミマを削除して、同じ場所に作られていた無名のエリアをファミマにしてみた。そのうち Facebook の地図でファミマが表示されるようになったら成功ってことで。

沼津においでよ

ラブライブ! サンシャイン!! 沼津 観光

沼津においでよ、ラブライブ!サンシャイン!!

f:id:rch850:20160409150205j:plain

静岡県沼津市の海辺の町、内浦にある私立浦の星女学院。

駿河湾のかたすみにある小さな高校で 2年生の高海千歌を中心とした9人の少女たちが、大きな夢を抱いて立ち上がる。

http://www.lovelive-anime.jp/uranohoshi/story.php

沼津においでよ、ビールがうまい

www.instagram.com

ベアード・ブルーイングは、 2000年にブライアン・ベアード&さゆり夫婦が沼津に設立した合資会社。 ビールへの深い愛情と、ビール醸造の歴史、伝統、文化に対する 尊敬の念から生まれた家族経営の会社である。

http://bairdbeer.com/ja/

沼津においでよ、魚がうまい

f:id:rch850:20160409140202j:plain

沼津内浦漁協直営いけすやの活アジ丼

沼津においでよ、水族館が3つもある

シーラカンスがいるのは沼津港深海水族館

www.numazu-deepsea.com

Aqours 2nd シングル「恋になりたいAQUARIUM」の舞台は伊豆・三津シーパラダイス

www.izuhakone.co.jp

恋になりたい AQUARIUM のドラマパートで2年生が行ってるのがあわしまマリンパーク

www.marinepark.jp

※最初、あわしまマリンパークには水族館がないと思ってて2つと書いてましたが、5/1に修正しました

恋になりたいAQUARIUM(Blu-ray Disc付)

恋になりたいAQUARIUM(Blu-ray Disc付)

沼津においでよ、沼津御用邸記念公園

https://commons.wikimedia.org/wiki/File:Numazu_Goyotei_Park3.JPG

www.numazu-goyotei.com

沼津においでよ、いい温泉あるよ

travel.rakuten.co.jp

沼津においでよ