OSS Gate WorkshopをやってOSS開発者率が42.8%になった

5/10, 5/12 の2日間で社内向けOSS Gate Workshop (Closed Kyoto) を開催しました。

OSS Gateとは東京・札幌・大阪で開催されているOSS開発者を増やすための取り組みです。詳しくはこちらの公式ページを御覧ください。そのWorkshopを社内向けに開催しました。

筆者がOss Gate Workshopw@大坂(2017-02-22)へ参加した時の様子を勉強会にて発表したところ、若手メンバーを中心に興味がありそうだったので、社内向けで開催する運びとなりました。

開催後には社員メンバーのOSS開発参加者率が42.8%(3/7)となり、OSS開発参加企業として大きな1歩を踏み出しました。アルバイトや関係者を都合よく含めると60%(6/10)となって過半数を超える結果となりました。

Workshopの流れ

通常のWorkshopは5〜6時間のスケジュールで構成されていますが、就業後に実施するため2日に分けての開催となりました。

1日目ではOSS GateおよびWorkshopの説明を行ない、OSSを動かして作業ログを取り、ミニふりかえりを実施しました。 2日目にOSSへのフィードバックを実際に行い、Workshopのふりかえりを行って終了しました。

両日とも2時間半で構成しました。

1日目の様子

1日目の参加者は6名で、Skype越しに東京からも2名参加してくれました。

アイスブレイクでしっかりと声を出しましょう。

作業ログを取るためのデモの様子。

OSSを選定後、実際に動かしてみます。

最後にミニふりかえりでフィードバックポイントを探して1日目は終了です。

2日目の様子

2日目の参加者は4名で、連続参加出来たのはそのうちの2名でした。 1日目のミニふりかえりで見つかったフィードバックポイントを実際にOSSにフィードバックするのが2日目の目標です。 2日目からの参加者2人は、後追いでOSSを動かして作業ログを取っていました。

Issue作成をする役員を学生アルバイトがサポートします。普段と立場が逆転しています。

後追いの2人もIssue起票のために議論を交わします。

最終的には4名全員がIssueを起票し、2名がPullRequestを行うという結果となりました。

よかったこと

アルバイトメンバーがサポーターとして役員のフィードバック作業を手伝うという、珍しい光景がみられました。社内開催のため和やかな雰囲気で開催できました。就業後の遅い時間に開催してるので、経費でのピザが手配されるなどのサポートもありました。全体的に満足してもらえたようです。

そして、OSS開発の参加者が増えたことが何よりの成果です。

困ったこと

初日にビギナー6人に対しサポーターが2人だったので、十分にサポートができませんでした。そのためOSSの選定に時間がかかってしまったり、フィードバックしづらいOSSを選んでしまったメンバーがいました。また仕事の都合で前半のみ、後半のみなど全てに参加できない人がいたことが残念でした。

皆の成果

それぞれが選んだOSSにIssueやPullRequestの提出を行ないました。

• https://github.com/github/hubot/issues/1324
• https://github.com/intljusticemission/react-big-calendar/issues/390
• https://github.com/intljusticemission/react-big-calendar/pull/391
• https://github.com/dwango/mastodon/issues/58
• https://github.com/dwango/mastodon/pull/60
• https://github.com/tootsuite/mastodon/issues/3009

皆の感想

Issueを提出したりPullRequestを出してMergeされたりと、 参加者それぞれの成果が見える形で残ることで満足してもらえたようです。今後は本家のWorkshopでもサポーターとして活躍してもらえそうです。

進行をやってみて

筆者が進行役を務めての個人的な感想です。ちょうど参加したWorkshopの動画が公開されていたので進行方法についてかなり参考になりました。準備が不十分だった自覚があったので不安はありましたが、参加者には楽しんでもらい満足してもらえたので嬉しい限りです。

OSS Gate 運営の方のサポートも特に受けずに開催できたのでWorkshopとしての完成度はとても高くてすごいなと思いました。OSS Gate 運営のメンバーに参加して京都での開催を進めていきたいと思います。

今回の開催にあたっての運営面については個人のブログに書きたいと思います。

masayuki14.hatenablog.com

Seleniumというブラウザ操作を自動でやってくれるツールの紹介

どうも、一人暮らし歴１０ヶ月ようやく電子レンジを買いました、いまもんです。
興奮のあまり牛乳を６００Wで３０秒チンして新品の電子レンジ内を牛乳まみれにしてしまいました。
次はゆで卵でリベンジしてやろうと思います。

さて、面白いツール見つけたのでご紹介します。

Seleniumとは

Seleniumはクロスブラウザ、クロスプラットフォームのUIテストツールです。 ブラウザに表示される要素を操作し、取得して想定されうる状態になっているかをテストできます。

macで環境構築しよう

今回はrubyを使うのでgemでinstall かつchromeで動かしたいのでドライバをDLしておきます。

seleniumをinstallする gem install selenium-webdriver

chromedriverをDL https://sites.google.com/a/chromium.org/chromedriver/downloads

DLしてきたchromedriverを/usr/local/bin以下に配置

さあこれで準備が整いました、seleniumを動かしてみましょう。

なにができるのか

Selenium WebDriver — Selenium Documentation

（若干読みづらい）ドキュメントを見てみましょう。 主に要素を検索して中身を書き換えたりクリックさせたりという感じですね、javascriptも実行できるのでn番目の子要素を取得なども可能です！

サンプル

require "selenium-webdriver"

# chrome用のドライバを使う
driver = Selenium::WebDriver.for :chrome

sleep 5 #目視確認用に５秒待つ

# Googleにアクセス
driver.navigate.to "http://google.com"

# `q`というnameを持つ要素を取得
element = driver.find_element(:name, 'q')

# `spookies`という文字を、上記で取得したinput要素に入力
element.send_keys "spookies"

# submitを実行する（つまり検索する）
element.submit

# 表示されたページのタイトルをコンソールに出力
puts driver.title

sleep 5 #目視確認用に５秒待つ

# テストを終了する（ブラウザを終了させる）
driver.quit

参考にした記事 qiita.com

大体こんな感じです。 わかりやすくていいですね。

ちなみにspookiesと検索していますが、titleはgoogleのままなのでgoogleと出力されます。 実行したら裏でChromeが立ち上がるので切り替えて目視確認してみてください。 いい使い道探してます！アイデアあったらどんどん記事にしてください！

twilioとAWS Lambdaで自分に電話をかけてみた

こんにちは。

最近体重の増加が止まりません。秋ですねー。 逆に電話の着信が減った気がします。 前者を治す方法は皆目検討がつきませんが、後者なら解決できそうです。

そこで、 「slackでコマンド命令を与えると、自分の電話が鳴ってカラオケに誘われる。」 ってのをやってみたいと思います。

twilio

twilioとは「クラウド通信企業」であり、プログラムを使って簡単に電話がかけられるAPIを提供している会社です。 本社はアメリカにあり、日本ではKDDIウェブコミュニケーションズさんが代理店としてサービスを提供しています。

お試し期間ならクレジットカード登録もいらないので、気軽に試せますね。

API利用するにあたって必要なもの

1. twilioアカウント登録
2. 050電話番号の取得
   • この番号からかかってくるようになります。（お試しでも取得できました）
3. 認証用AccessTokenの確認
   • コンソールダッシュボードに表示されているのでコピっときます。

サンプルプログラムを試す

ドキュメントもしっかり整備されてます。

今回は、AWSのLambdaにプログラムを置きたかったので、Nodeで書くことにします。 https://jp.twilio.com/docs/quickstart/node/programmable-voice
↑に記載された通りに書き換えてローカルPC上で動かすだけで、電話がかかってきました。

書き換えたのは以下だけ

• accountSid
• authToken
• to
• from

実に簡単。

音声レスポンス命令の作成とアップロード

電話がかかってきた際に、特定の文言を喋らせたり、音楽データを流したり、通話を録音したりすることができます。 それを制御するのが、TWIMLと呼ばれるXMLです。

<Say>: 発信者にテキストを読み上げます。
<Play>: 発信者に音声ファイルを再生します。
<Record>: 通話や通話の一部を録音します。
<Gather>: 発信者がダイヤルした数字を取得します。
<Dial>: 相手の電話番号またはカンファレンスに電話をかけ、発信者を接続します。
<Sms>: 通話中に SMS メッセージを送信します。

自分で設定した音声レスポンスを使う場合はアップグレードが必要みたいです。 管理画面から、クレジットを登録して、2000円だけ入れてみました。

今回は カラオケに誘われる 為に、以下の内容のxmlファイルをサーバ（amazon S3）にアップロードし、公開設定を行いました。

<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Say voice="alice">let's go karaoke</Say>
</Response>

プログラム書き換え

xmlのアップロードが完了したので先程のプログラム内の url 箇所を S3にアップしたxmlの公開urlに書き換えます。

client.calls.create({
    url: 'https://xxxxxx.xxxxxx/xxxxxx.xml',

Debugger

プログラムを動かしたら電話はかかってきたのですが、 「アプリケーションエラーが発生しました」とアナウンスされました。

おやおや？と悩んでいたら、twilioの管理画面にDebugger機能があったので見てみました。

むむ？POSTでアクセスに行っているではないか・・。 デフォルトではこのような挙動になるようです。

プログラムを修正して、methodにGETを指定します。

client.calls.create({
    url: 'https://xxxxxx.xxxxxx/xxxxxx.xml',
    method: 'GET',
    ...

これで無事に読み上げてくれました。

AWS Lambdaにプログラムを配置

Lambdaは最近よく聞くサーバレスアーキテクチャ。 リクエスト待受するために常にサーバを立てておくのではなく、必要な時に呼び出されて実行プログラムが起動する仕組み。イベントドリブンな感じ。

今回は、

• API gateway
• Lambda

を組み合わせ、作成したURLが叩かれた時に先程のプログラムが動くようにしました。

Lambda関数

Lambda関数として動かす為に、先程のプログラムに handler の関数名を指定します。

exports.handler = function(event, context) {
    // プログラム
    ...
}

https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/nodejs-prog-model-handler.html

NodeプロジェクトとしてZip圧縮

Lambdaでは、node_modulesも含めてアップする必要があるため、zipに固めます。

$ zip -r index.zip index.js node_modules

Lambdaにアップロード

1. Select blueprint templateのようなものですかね。今回はAPI Gatewayと連携するので「api-gateway-authorizer-nodejs」を選びました

2. Configure triggers API Gatewayを選択

3. Configure function

Name: callme
Runtime: Node.js 4.3
Code Entry Type: Upload a .ZIP file
    先程固めたzipをアップロード
Hander: index.hander // 先程のプログラム（index.js）をhandlerの名でexportしたので。ファイル名やhandler名が異なってるとエラーになるので注意。
Role: create new role from template
Role Name: test
残りはデフォルト

API Gateway

1. APIを作成して、GETをLambdaで作成したcallmeファンクションと紐付け
2. APIのデプロイで、公開（stageは新規作成） するとURLが手に入ります！！

slackのコマンドでプログラムを呼び出そう

さて、呼び出しURLが決まったので、これを直接呼び出してもいいんですが、 どうせならSlackから特定のコマンドを入力した時に、呼び出すようにしてみましょう。

slackのAppDirectoryで Slash Commands を選択。

叩いてみたら 電話かかってきましたー

まとめ

少し今更感もありますが、twilioもLambdaも興味あったけど使ったことがなかったので遊んでみました。

サービスでアカウント登録後に電話がかかってきて、音声で流れてきたコードを入力して完了という流れがたまにありますが、twilio使ってるんですかね？

コールセンターや受付サービスなどたくさんの事例があるみたいです。
サーバ監視で障害発生したら電話で叩き起こすってのもよくありですが、いいですね。
遅刻メンバーを叩き起こす・・。

さて、寒くなってきましたが、皆さん風邪にはお気をつけください。
では一人カラオケへ行こうかな。いやジムですかね。
それでは、失礼します。

Three.js を用いてインタラクティブなコンテンツを作ってみよう

　こんにちは、モリタです。

最近、Web上で3Dグラフィックを描画できるjsライブラリであるThree.jsに魅了されています。

three.js では、以下のようにシーンオブジェクトにライトオブジェクト、ボックスオブジェクトなどを追加することで3D空間をつくりだすことができます。

$(function(){
    // create scene
    var scene = new THREE.Scene();
    // create camera
    var width  = 600;
    var height = 400;
    var fov    = 60;
    var aspect = width / height;
    var near   = 1;
    var far    = 1000;
    var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );

    // マウスでうごかせるようにする
    var controls = new THREE.OrbitControls(camera);
    
    // set renderrer
    camera.position.set( 0, 0, 50 );
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( width, height );
    $("body").append( renderer.domElement );
    
    // add light
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 0, 0.7, 0.7 );
    scene.add( directionalLight );

    // create box
    var geometry = new THREE.CubeGeometry( size_x, size_y, size_x);
    var material = new THREE.MeshPhongMaterial( { color : Math.random() * 0xffffff } );
    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(pos_x,pos_y,0);
    scene.add( mesh );
        
    // rendering
    controls.update();　
    renderer.render( scene, camera );

    // オブジェクトを回転させる
    ( function renderLoop () {
    requestAnimationFrame( renderLoop );
     mesh.rotation.set(
          0,
          mesh.rotation.y + .008,
          mesh.rotation.z + .008
        );
    renderer.render( scene, camera );
  } )();
});

three.jsの公式サイト には素晴らしいデモが沢山紹介されています。 早速いくつか紹介してみましょう

Ellie Goulding – Lights

イギリスのシンガーソングライター、エリー・ゴールディングの曲に合わせて、光の球が輝きます。 光はユーザのクリックに反応し、インタラクティブなミュージックライブ体験ができます。

WorldPopulation

年別に世界の人口密度が視覚的にわかるデモです。地球をスクロールすることで回転することができます。 学術的なコンテンツにもこういった技術が多用されていく予感がします。

The Boat

スクロールすると背景のアニメージョンとともに、イラストと文章が表示されます。インタラクティブな「動くマンガ」といった感じです。新しいwebマンガのスタイルになりそうな予感がします。

The Fallen of World War Ⅱ

通常の動画の中にインタラクティブタイムというものが設けられており、この間はユーザがグラフを選択して、詳細を見ることができます。 内部でどう処理されているのか気になります！

3D図書館

自分でもインタラクティブな3Dコンテンツを作ってみよう、ということで、3D図書館を作ってみました！

外部のwebAPI から今月のマンガの新刊を取得して、表示するようにしています。 本にカーソルを合わせると、本が飛び出し詳細情報が表示され、クリックするとアマゾンの商品ページに飛ぶようにしました。 たまに商品画像が取得できないものがあり、この場合、デフォルトの画像を表示するようにしたかったのですが、うまい方法が見つかっていません。 画像サイズが0かどうか調べればよさそうですが、画像を取得するのにタイムラグがあるため、画像を張り付けた平面オブジェクトを作成し、画像のロードが完了したタイミングで画像サイズを調べるコールバックを設定する、なんてまわりくどいやり方しか思いつきません。どなたかいい方法ご存じないですかね？

さらに最近のVRブームのもと、webVRなんてのも登場しています。webにVRを持ち出す必要性があるのかな、という気もしますが、箱スコなどスマホ向けのVRコンテンツに利用価値があるみたいです。URLだけでコンテンツを共有できれば手軽です。Three.js のサンプルにはwebVRに対応したサンプルもいくつかあるので、今後試したいなと考えています。

以上、Three.js の紹介でした！

【LINE BOT API】食べるなら動け、動かぬなら食べるな【カロリーと運動とお店】

こんにちは。登山と美味しいものとお酒が好きです、高野です。

（2015.9.2 槍ヶ岳山頂にて。一緒に上ってくれる方を大募集です！）

海か山かと聞かれれば山派でして普段は波には乗らないのですが、Botの波がやってきたということで少し乗ってみることにしました。

Microsoft Bot Framework、Facebook Messenger Platform、LINE BOT API と、Bot関連の大きな波が来てから早2ヶ月以上が過ぎましたが、まだ乗れますよね？

【LINE】「LINE BOT API Trial Account」の追加募集を開始

ということで、追加募集に参加してみました。

各所にすばらしい関連記事はまとまっていますが、備忘録も兼ねて作成までの流れを書きます。

LINE BOT API では何ができる？

• LINE BOT API Trialでできる全ての事を試してみた
• LineBotの事例を21個まとめてご紹介

APIベースのメッセージ送受信

あなたのアカウントに対して友だちになってくれたユーザーにメッセージを送受信することができます。 メッセージのやり取りはすべてAPIベースとなっています。

リッチメッセージ

サイトのサムネイルとリンクを含んだメッセージを配信することができます。 サイトへの誘導効果が大きく見込める機能です。

利用条件

料金	友だち数上限
無料	〜50人まで ※トライアルのため友だち数を制限しています。

Botを作ろう

ところで、社内ではジムブームというものがあったようですが、いまいちピンときていません。（最初に会員登録した。2ヶ月行っていない）

日頃の運動ももちろん大事ですが、食事から生活を整えていくことも大事ではないでしょうか。現代人は、常に食べ過ぎ飲み過ぎだとも言われています。外食が多い生活だと尚更ですよね。

そんな日常を背景に、スプーくんという救世主（Bot）は現れました。 私たちの食べたいものを伝えると、

• 目安カロリー
• カロリー消費に必要な運動量
• 関連するおすすめのお店

を教えてくれます。

食べた量に対して自分がどれだけ運動しなければいけないのかを把握できれば、自分にあった運動量から食べる量も調節できるというわけです。

決して運動したくないわけではありませんよ。

アカウント作成

基本的なユーザー情報と、Botの名前・画像を登録します。

Botは、Spookiesのマスコットキャラである「スプーくん」をイメージに、お腹すいた感じの名前にしておきます。（特に腹ペコキャラではない）

以下は、登録後の画面イメージ。

• Channel ID
• Channel Secret
• MID

上の３つをAPIでも使います。

サーバー用意

今回は、Heroku上にアプリを作成することにします。

固定IPが必要になるので、 HerokuのアドオンであるFixieをインストールしておきます。

（無料ですが、事前にHerokuへのクレジットカード登録が必要です。）

コマンドからインストールする場合は以下。アドオンの追加とともに、Outbound IPsが出力されます。

$ heroku addons:create fixie:tricycle

Outbound IPsは、

「HerokuのDashboad」>「作成したアプリの詳細ページ」>「Add-ons」>「Fixie」

と辿っていっても確認可能です。

Server IP Whitelist登録

Outbound IPsを確認できたら、「Server IP Whitelist」にIPを追加します。以下では、Fixieで確認した２つのIPを登録しています。

Callback URL登録

また、「Basic Infomation」にCallback URLも登録しておきます。

「HerokuのDashboad」>「作成したアプリの詳細ページ」>「Settings」 > 「Domains」 > 「Heroku Domain」

でURLが確認できます。

その際、SSL通信必須でポート番号の指定も必要なことに注意します。

https://[Heroku Domain]:443/linebot/callback.php

(今回は、PHPで実装しました。)

Channel ID等をHerokuへ登録

アカウント作成時に確認した以下の項目は、コード内部に埋め込まずHerokuに環境変数として外部化しておく。

• Channel ID
• Channel Secret
• MID

「HerokuのDashboad」>「作成したアプリの詳細ページ」>「Settings」 > 「Config Variables」>「Reveal Config Vars」より設定

さて、準備は整ったのであとはAPIを実装していきましょう。

API作成

基本的に、以下の項目は固定となります。

||| |API URL | "https://trialbot-api.line.me/v1/events" （POST）| | toChannel |"1383378250"（固定値） | | eventType | "138311608800106203" （固定値）|

(詳細：Getting started with BOT API Trial)

あとは、CallbackURLで指定した箇所にAPIを実装したファイルを配置するだけになります。

しかし。。。。

callbackが返ってこない

（怒涛のKS（既読スルー）。無意味に投げ過ぎ。）

期待した応答がBotから無い場合、主な原因は以下の通りです。

• Callback URLの反映が遅れている
• Server IP Whitelistの反映が遅れている

これらは、設定から反映までに数十分から1日程度かかることがあるようです。ゆっくり待つのも一手。

まずはレスポンスを確認。

$ curl -H "X-Line-ChannelID: [CHANNEL ID]" -H "X-Line-ChannelSecret: [CHANNEL SECRET]" -H "X-Line-Trusted-User-With-ACL: [MID]" "https://trialbot-api.line.me/v1/profiles?mids=[MID]"

{"statusCode":"427","statusMessage":"Your ip address [XXX.XXX.XX.XX] is not allowed to access this API. Please add your IP to the IP whitelist in the developer center."}

この場合は、Heroku・FixieのproxyURLが設定できていませんでした。

• CURLOPT_HTTPPROXYTUNNEL
• CURLOPT_PROXY
• CURLOPT_PROXYPORT

上記を踏まえて実装を見直すと、

{"contacts":[{"displayName":"はらぺこスプーくん","mid":"[MID]","pictureUrl":"http://dl.profile.line-cdn.net/xxxxxxxxxxx","statusMessage":""}],"count":1,"display":1,"pagingRequest":{"start":1,"display":1,"sortBy":"MID"},"start":1,"total":1}

問題なさそうですね。

その他では、ログを埋め込んだり、herokuのログを確認しつつ進めると分かりやすいです。

 $ heroku logs -t

（オウム返しで試してみた）

「きたー（嬉）」

完成

• 食べ物をつぶやくと以下の情報が返ります。
  • 類似の食べ物のカロリー値
  • カロリー消費に必要な運動量
  • つぶやいた食べ物のありそうな店一覧（スプーキーズ京都本社より500m圏内のみ）

これで、健康的な身体まっしぐらですね！

腕立ての回数は、最低限やってくださいね！（筋トレはカロリー消費が少ない。。）

上記のQRコードからスプーくんとともだちになれます。

よろしければ一緒に昼食へ連れて行ってあげてください。

制限

現行では、以下の制限があるのでご注意ください。

• Line Bot API Trialでは友達登録50人まで。
• Fixieのtricycleプランではリクエストは500/月まで。

API

その他APIとしては、以下の２つを使用させていただいています。

• 食べ物のカロリー値・・・project manequinecoのカロリーAPI
• 店舗検索・・・ぐるなびのレストラン検索API

また、カロリー消費に必要な運動量は、カラダカラ の消費カロリーの参考例にて[男、20~29歳、65kg]の値を基に計算させていただいています。

どうなるBotの波

最近でも、カスタマーサポートをBotで置き換えて人件費が削減されたという話をちらほら聞くようになりました。 １企業に１Botが当たり前になれば、Botを通してのブランディングも当然起こりうるかと思います。 ゆるキャラブームから企業でもいろんな個性を持ったマスコットキャラを推す流れができましたが、Botの普及でより個性的なBotが登場してくることもあるでしょう。 これからBotを取り巻く環境はますます成熟していくでしょうが、多様なBotが世に出ていくのが楽しみですね！

社内でも以前よりSlackでHubotを運用していますが、外と繋がるBotでも面白い試みをしていきたいところです。

みなさま、健康にはお気をつけ下さいませ。

参考

• LINE BOTを試してみる(Cloud9 + Heroku)
• LINE BOT APIを使ってPHPで画像検索BOT作ってみました
• PHP + HerokuでLINE BOTを試してみる＆ハマったこと
• Getting started with BOT API Trial

関連

Microsoft Bot Framework

Your bots — wherever your users are talking.

Facebook Messenger Platform

900 million people are on Messenger Now you can interact with them where they already are

LINE BOT API

BOT API Trial AccountではあなたのサービスとLINEユーザーの 双方向コミュニケーションを可能にするAPI開発をお試しいただけます。