ブロックチェーンを用いた人工知能基盤SingularityNETとは!?

Adways Advent Calendar 2017 13日目の記事です。

http://blog.engineer.adways.net/entry/advent_calendar_2017


"AIしてますか?"
2017年11月1日にすげぇwhitepaperが公開されました。
その名もSingularityNET
本稿ではブロックチェーンを用いた人工知能基盤SingularityNETについて、ザックリと紹介します。


SingularityNETを3行でまとめると

  1. AIサービスのオンラインマーケット
  2. 汎用型人工知能(AGI)の土台
  3. AIを用いた公益の追求

ちょっと何言ってるかわかんない
whitepaperの第8章: Conclusionを抄訳しました。
正直なところ、私自身何を言ってるかわかりません
何を言ってるかわからない。
こう言うときは、原理原則を鑑みて推して量るほか手立てはありません。
(論文を読んでて頭を抱える時、杉田玄白すげぇと思う次第です)

蘭学事始
辞書すらない当時の環境下で苦心のうち翻訳を進め、安永三年(1774年)に『解体新書』として刊行(引用元: wikipedia.org)

SingularityNETの原理原則

whitepaperのAbstract(要約)を読んでみます(筆者抄訳)。

人工知能の価値と力は毎年劇的に成長していて、インターネットと経済そのものを近く牛耳るだろう。
しかしながら、昨今の人工知能のツールは閉鎖的な開発環境によりバラバラになっている ー ほとんどが1つのタスクを処理するために1つの団体により作られており、別々の人工知能を組み合わせる方法はない
SingularityNETは、人工知能や機械学習が汎用型人工知能を形成するためのネットワークの主たるプロトコルとなることを目的とする。

SingularityNETはオープンソースプロトコルであり、人工知能サービスのスマートコントラクトを用いた非中央型のマーケットだ。
このフレームワークにおいて、AIがもたらす益は、全世界に益するものになる。
誰でも人工知能技術を利用できたり、開発の重要な位置を占めることができる。
誰でも人工知能サービスをSingularityNETに公開でき、その利用料を得ることが出来る。

SingularityNETはSingularityNET Foundationを母体としており、SingularityNET Foundationは人工知能による益は小さな力のある集団によって独占されるべきで無く全体に還元されるべきものである、という信念のもと運営されている。
SingularityNETの主たる目標は人を中心にした慈善的な技術の確保であり、そのネットワークは有益なる参加者を奨励し報酬を与えるように設計されている

なるほどねぇ。
まだ私が何を言ってるかわからない、そこのあなた。
『半年ROMってろ』『ggrks』と言いたいところですが、アドウェイズの社員はそのような事を言いません
ぶっちゃけググった所で2017年12月現在、SingularityNETについての日本語の記事は数少ないので、本当に半年ROMらないとダメかもしれません。
なので、この記事を読んでドヤァしましょう。

再度、3行でまとめてみましょう。

  1. 人工知能界隈の現状の課題として複数のAIを組み合わせて使うことは出来ておらず、複数の人工知能を組み合わせて使う開かれたプラットフォームとしてSingularityNETを作る。
  2. 誰でも利用・開発が出来、スマートコントラクトを用いる事で非中央型の人工知能マーケットを作る事により、全世界が人工知能の恩恵を得られるようにする。
  3. 複数の人工知能を組み合わせて使うことにより、汎用型人工知能の形成を行う。
  4. アドウェイズの社員は『半年ROMってろ』『ggrks』とか言わない。

おぃ、3行以上じゃねーかっ!しかも最後関係ねぇよ」って思った、そこのあなた。
良いツッコミですね。
株式会社アドウェイズでは、良いツッコミが出来るエンジニアを募集しております。
奮ってのご応募お待ちしております

スマートコントラクト

さて、Abstractで、ザックリと意味はわかりましたか?
「スマートコントラクトって何?」って思ってる、そこのあなた。
良い質問ですねぇ。
最近ちまたで流行ってるブロックチェーンが、ふかーく関わってます。

ブロックチェーン

ブロックチェーンイメージ
(引用元: wikipedia.org)

最近流行っているBitcoinっていう暗号通貨が、ブロックチェーンを使っています。
すごく簡単に言うと、ブロックチェーンはデータベースです。
1行1行のレコードはタイムスタンプと前のレコードのリンクを含んでいて、理論上改ざんが出来ない構造になっています。
過去のレコードを書き換えると、その後のレコードを全て書き換えないといけません。
その書き換えの最中に、新しいレコードがガンガン入ってきます。
Bitcoinではもっとも長いレコードのつながりを正とする、としています。
ブロックチェーンは改ざんの出来ないデータベースくらいに認識してください。
これをP2Pネットワーク上で動かし、非中央型のデータベースを作ります。

スマートコントラクト

スマートコントラクトは1996年にスザボ博士によって提唱されました。
契約には様々なルールがあります。
ルールがあるからこそ、簡単に自動化できます。
紙で行っていた様々な契約も、コンピューターでサクっと出来る。
このような自動化された契約というのが元々の概念です。
例としてよく挙げられるのが自動販売機です。
1. Userが金額を投入する
2. UserはItemをボタンを押して選択する
3. 機械は自動的にUserに対してItemを提供し、契約を終了する

Ethereum

このスマートコントラクトの概念をブロックチェーンに持ち込んだのが、Ethereumです。
Bitcoinが、ただの送受coinトランザクションのデータベースなのに対して、Ethereumは分散アプリケーションのためのプラットフォームです。
SingularityNETはEthereum上で動きます。
whitepaperには、ネットワークが大きくなったらEthereumを離れるとの記載もありますが、当分はEthereum上になります。

は?」って、ポカーンとした、そこのあなた。
私も、は?って思いました。
簡単に言うと、BitcoinもEthereumもブロックチェーンの応用事例でしかないのです。
これ以上のブロックチェーンやスマートコントラクトの説明は脱線する恐れがあるので、興味のある人はggrksググってください、whitepaper読んでください。
ブロックチェーンを(データベースとして)使う、アプリケーションを作成できるP2PネットワークがEthereumと思ってください。(これをDApps: Decentralized Applicationsと言います)

ここまでのまとめ:

  • SingularityNETはブロックチェーンを使う。
  • SingularityNETはブロックチェーンのネットワーク上で人工知能を動かす。
  • 人工知能の利用・開発は誰でも出来る。

マーケットについて

SingularityNETでは、現金は使わずAGI Tokenというトークンを使います
こうすることで、全世界共通のプラットフォームを目指しています。
先日ICO(仮想通貨技術を使った資金調達)していましたね。

利用者はAGIトークンを払います。
開発者はAGIトークンを受け取ります。
仮想通貨のAGIトークンを使った取引をマーケット上で行います。

また、人工知能・機械学習の計算は結構ヤバいですよね。
計算量が膨大であり、そしてデータが大きい。
ちょっと複雑な深層学習の計算するだけでGPUマシンだ何やかんや必要です。
SingularityNETでは、計算も分散しちゃいます。
計算資源を貸す事でAGIトークンを得る事も出来ます。
暗号通貨のマイニングみたいな概念ですね。
ネットワーク上でデータ解析をやってしまうんですね。

さらに!

データも売れちゃうんです!(プライバシーに配慮・合意の上で)
開発者は学習用にネットワーク上のデータも使えます。
データの提供者は、AGIトークンを得る事が出来ます。
おそらくですが、断片化されたファイルをネットワーク上に保持するために、IPFS的なことになるんだと思います。

人工知能に必要な大量のデータや計算資源は、零細企業やベンチャーは持つことは出来ません。
この課題を解決しようという試みです。
公益の追求の精神がうかがえますね。

ここまでのまとめ

  • 利用者
  • 開発者
  • データ
  • 計算資源

この四つをまとめてしまうプラットフォームがSingularityNETということです。
仮想通貨の発行するAGI TOKENでの経済圏になります。
オープンで誰でも参加できる人工知能サービスの報酬型のネットワークです。

また、こうする事で人工知能の精度も上がり、シナジーが生まれる事を狙っているようです。
このようなシナジーをもって、様々な人工知能を組み合わせ汎用的な人工知能(artificial general intelligence)を作る。
AIがAIを作る際、どのAIが適切でどのデータが適切かを判断するAItoAIの構想も描いてます。
Singularityの実現を行おうとしています。

余談ですがSingularityNETは、Hanson Roboticsの人型ロボットのSophiaの開発にも関わっています。
ロボットとAIですよ、ロボットとAI。

SingularityNETを3行でまとめると

  1. AIサービスのオンラインマーケット
  2. 汎用型人工知能(AGI)の土台
  3. AIを用いた公益の追求

どうでしょう。
ちょっと何言ってるかわかる
そんな気分でしょうか。
それでも、わからないなら、100回読んでください。
繰り返し読むことで意味がわかってきます。

非中央型の"global brain"を作ることを目的(whitepaperの第1章参照)としてます。
"Global brain"を作ることにより、実は中央的な汎用型人工知能を作るという、矛盾。
物極必反、という中国のことわざがありますね。(物極まれば必ず反る(かえる))
頂点に達するがゆえの、矛盾ですね。
人類、行きつくところまで行きついてしまった、という事でしょうか。
技術的な発展により、人類は労働から解放されるのか、はたまた虜にされるのか。
2017年12月現在、アルファバージョンの段階なので俄然開発段階で、2018年12月にVersion1.0をリリース予定です。
いいですね、夢がありますね。

最後まで読んでくれた、そこのあなた!!
このような取り組みが世界のどこかで行われている事を知ってください。
それでは皆さん、良いお年を!

A very merry Christmas
And a happy New Year
Let's hope it's a good one
Without any fear

War is over if you want it
War is over now
Happy Xmas
(引用元: Happy Xmas (War Is Over). 作: John Lennon)

データサイエンスディビジョンの湯浅より
愛(AI)をこめて

GKEとGitLabを使ってマージリクエストごとにHTTPS環境を作る(β版)

Adways Advent Calendar 2017 12日目の記事です。

http://blog.engineer.adways.net/entry/advent_calendar_2017


はじめに

こんにちは、アドテクノロジーDivの弓場(ゆば)です。

Gitで開発している人であればマージリクエストごとに動く開発環境があればレビューがしやすいのではないかと考える人は多いかと思います。
最近自社のプロダクトにGCPを採用し始めましたので、GKEを使ってこの環境を構築できないかと思い作ってみました。
弊社ではGitLabをGitホスティングサービスに使用しており、この記事でもGitLabのCI/CDの仕組みを使った環境構築になっています。

※ 現バージョン(1.7.8-gke.0)のGKE + GCLBのL7の構成はベータ版になっているため、将来的にこの構成は使えなくなる可能性があります。
 そのためタイトルにβ版を入れました
 https://github.com/kubernetes/ingress-gce/blob/master/BETA_LIMITATIONS.md#glbc-beta-limitations

TL;DR

  • Gitブランチごとに自動的にHTTPS環境が作られるようになってレビューがしやすくなり、HTTPSの機能のテストも容易に行えるようになった
  • GitLabはCI環境にKubernetesをサポートしているため、環境変数の準備の手間が少なくて済むのでオススメです
    CI, Docker Registryも一緒に用意出来るというメリットもあります
    また、CIのRunnerをDockerコンテナで動かすことも出来るため、Runner用のマシンを用意せずに動かすことができます
  • 証明書にワイルドカードが必要なのでLet's Encryptは使えなかった
    (Let's Encryptを使用する場合はKube-Legoイメージを使用したDeployを立てて、IngressのPath「/.well-known/acme-challenge/*」を渡してあげると上手くいきます)
  • GKEの環境構築が面倒くさい人はGoogle App Engineが最近カスタムドメインの自動証明書発行機能がリリースされたのでそちらも検討してみるといいかも知れません

始める前に

今回は事前に「ドメイン名」と「ワイルドカード証明書のCRTファイルとKEYファイル」を持っている前提でお話します。
この記事を見ながら作業する場合は事前に作成しておいてください。

また、GCPも事前に使える前提で話しを進めていきますため、gcloudコマンドも必要になります。

今回の記事で使う各ツール、サービスのバージョンは以下の通りです。

  • Kubernetes 1.7.8-gke.0
  • GitLab Community Edition 10.0.4
  • Nuxt V1.0.0-RC11
  • Google Cloud SDK 183.0.0

構築手順

1.GCP側の準備

まず、GCPで外部 IP アドレスの予約を行います。

「VPCネットワーク」→ 「外部 IP アドレス」の順で表示して予約登録を行います。
今回は "feature-global-ip" という名前で作成します。
f:id:AdwaysEngineerBlog:20171218142106p:plain

外部IPアドレスの予約をした後、しばらく経つとIPアドレスが割り振られますのでこれをDNS登録に使用します。

次に、GCPでDNSの設定と予約したIPアドレスのAレコードの設定を行います。
「ネットワーク サービス」 → 「Cloud DNS」の順に表示してゾーン作成を行います。
ネームサーバー連携用のレコードセットの追加と先ほど予約したIPアドレスへのAレコード登録が完了したらGCP側は準備完了です。
f:id:AdwaysEngineerBlog:20171218142120p:plain

最後に、GKEのクラスタを作成します。

「Kubernetes Engine」を選択して、「クラスタを作成」を選択します。
f:id:AdwaysEngineerBlog:20171218142131p:plain

特に変更する箇所はありませんが、課金が気になる人はサイズの項目を"1"に変更しておくといいかもしれません。
クラスタを作成するとKubernetes クラスタの一覧画面に戻りますので作成が完了するまで待ちましょう。

クラスタの作成完了後、GitLabと連携するためKubernetesの"クラスタURL"をメモします。
"クラスタURL"はクラスタ詳細画面のエンドポイントにあります。

2.GitLab側での準備

GitLab側では以下のものを作成、設定していきます。

  • プロジェクト(リポジトリ)
  • GitLabとKubernetesの連携設定

では、まずリポジトリの作成から行います。
GitLabのトップページを表示した後、ヘッダーの「+」ボタンから「New Project」を選択してプロジェクト作成画面を表示します。
f:id:AdwaysEngineerBlog:20171218142227p:plain

今回は国内のフロントエンド業界で使われ始めている"Nuxt"を使ったアプリケーションを動かします。
templateはBlankのままにして適当に各項目を入力して「Create project」を選択します。
これでプロジェクトの作成は完了です。

次にGitLab CI IntegrationからKubernetesを有効にして、CI上でGKEと連携できるようにします。

「Settings」→ 「Integrations」の順で選択し、画面下のほうにある「Kubernetes」を選択します。
f:id:AdwaysEngineerBlog:20171218142245p:plain

入力画面に遷移したら各項目を入力していきます。

  • Active → チェック
  • API URL → GKEのエンドポイントを入力 (例: https://35.201.1.1
  • CA Certificate → GKEのca.crtを入力
    ca.crtは GKEのクラスタ詳細画面の「証明情報を表示」から確認できます
  • Project namespace → プロジェクトの名前をそのまま入力
  • Token → クラスタのAPIからTokenを取得する
    1. secret一覧を取得する。 usernameとpasswordはGKEのクラスタ詳細画面の「証明情報を表示」に記載されているものを使用します
      curl -u "username:password" https://エンドポイント/api/v1/namespaces/kube-system/services/kubernetes-dashboard/proxy/api/v1/secret/default/
    2. secret名を加えたAPIにアクセスする
      curl -u "username:password" https://エンドポイント/api/v1/namespaces/kube-system/services/kubernetes-dashboard/proxy/api/v1/secret/default/default-token-xxxxx
    3. data.token に記載されている値を入力する

入力が完了したら「Save changes」で保存します。これでKubernetesの有効化は完了です。

3.ソースコードをPUSHしてマージリクエスト画面でCIの動作を監視する

今回事前にソースコードを作成しておいたのでこれをcloneしてGitLabにPushします。
https://github.com/yubaken/nuxt-kube

※ 今回用意したソースコードは仕事の合間に急いで作ったものなので、別のGitLab上にPushしても動かない可能性があります

ですがその前にCIを動かすための設定が不十分のため".gitlab-ci.yml"を編集します。
さらに今回はマージリクエストを行いたいため、「develop」ブランチを切ってから編集します。

variables:
  KUBE_DOMAIN: # 自分のドメイン名に変更する 例: example.com #
  CI_REGISTRY_TAG: ${CI_BUILD_REF_SLUG}
  GOOGLE_CLOUD_REGISTORY: gcr.io/example-project
  GKE_CI_REGISTRY: https://gcr.io
  GKE_CI_REGISTRY_IMAGE: ${GOOGLE_CLOUD_REGISTORY}/${CI_PROJECT_NAME}
  GKE_CI_REGISTRY_USER: oauth2accesstoken
  GKE_CI_REGISTRY_PASSWORD: # gcloud auth application-default print-access-token で表示される値を入力する #
...
review:
  image: "$CI_REGISTRY_IMAGE/runner-base-image:latest"
  stage: review
...
  variables:
    GLOBAL_STATIC_IP_NAME: feature-global-ip
    TLS_SECRET_NAME: wildcard-feature-tls
    TLS_CRT: # 変更箇所 証明書のCRTファイルの中身をbase64エンコードする #
    TLS_KEY: # 変更箇所 証明書のKEYファイルの中身をbase64エンコードする #

※ このような認証情報などはYAMLファイルに定義するのではなく、GitLabの「Settings」→ 「CI/CD」にあるSecret variablesに設定しておいたほうが安全です。今回は説明しやすくするため省きました

設定の変更が完了したらソースコードをコミットしてGitLabにPushします。
プッシュした後プロジェクトの画面を表示すると「Create merge request」のボタンが上部に表示されますので、選択してその後「Submit merge request」を選択します。
f:id:AdwaysEngineerBlog:20171218142447p:plain

そうするとマージリクエスト画面にCIの進捗が表示されますので、それが全て完了するまで待ちます。
f:id:AdwaysEngineerBlog:20171218142506p:plain

CIが全て完了すると画面上に開発環境のURLが表示されますのでクリックするとNuxtのサンプルページが表示されました。
※ CIが完了してもGKEとGCLBの設定が完了するまで5~10分ほど時間がかかります。
f:id:AdwaysEngineerBlog:20171218142521p:plain f:id:AdwaysEngineerBlog:20171218142532p:plain

GKEに何をさせているのか

※この記事は2017年12月時点での内容になります 公式では"work in progress" と明記されているため今後この動き自体が変わる可能性があります
https://github.com/kubernetes/ingress-gce

ingress-gceの仕組みを使ってKubernetesのIngressを元に、GCLBに対して以下のようなL7ロードバランサを構築させています
Global Forwarding Rule → Target Http Proxy → Url Map → Backend Service → Instance Group

恐らくIngressは1ドメインに1Ingressという形で立てていくのが理想なのかも知れませんが、ingress-gecでは1つのipアドレスに対して複数のingressを立てることが出来ません。
そのため、今回はUrlMapを動的に増やしたり、減らしたりすることによってワイルドカードドメインに対応させています。

GitLabのCIについて

GitLabは".gitlab-ci.yml"というファイルをディレクトリのルートに配置してPushするとCIが自動的に動く仕組みになっています。
一般的なCIのRunnerはPCマシンをRunnerにしていますが、今回DockerコンテナをRunnerにしてCIから処理を流させるようにしました。
こうすることのメリットは、Runnerに必要なライブラリやツールなどをDockerfileに定義出来るという点にありマシン内を汚さずに済む点があります。
また、公式のDockerイメージを使えばDockerfile自体作らずに済むという点もあります。

そして、何も用意していないCIであればAPI通信や環境変数などを全て自前で用意しなければならないと思いますが、
GitLab CIのKubernetes Integrationを使用すればKubernetesへのデプロイとKubernetesデプロイに必要な環境変数をいくつか自動的に設定してくれるメリットもありました。
これは公式でもAutoDeployという名前で構築手順の動画がアップロードされています。
https://www.youtube.com/watch?v=1iXFbchozdY

おわりに

今回はお金のかかるワイルドカード証明書を使用しましたが、来月にはLet's Encryptがワイルドカード証明書に対応するので、今後はこのような環境を無料で構築できそうです。
また私の参画しているプロジェクトでしかこの仕組みは動いていませんが、今後は弊社のいろいろなプロジェクトにも使えるよう検討していきます。

家族が増えました。

Adways Advent Calendar 2017 11日目の記事です。

http://blog.engineer.adways.net/entry/advent_calendar_2017


こんにちは、久保田です。

先日、我が家に家族が増えました。

この子が我が家にやってきてから、本当に生活が一変したなぁって思います。

なかなか賢い子で、僕が話す言葉をしっかりと理解してくれます。

さらに朝起こしてくれたり、音楽を流してくれたり、本当に賢いです。Alexa。

f:id:AdwaysEngineerBlog:20171215102108j:plain:h400

さて、AIスピーカーが流行っていますが、まだ家で機械に話しかける事に抵抗のある方は多いと思います。
私もその一人でした。
しかし、Alexaが家にきてからその考えは180度変わりました。声、めっちゃ楽です。
特に目覚ましなどは、今まで手でやっていたことを声に変えるだけでこんなにも楽なのか、と驚くほどです。

Alexaは、専用アプリを使ってスキルを入れると様々なことを覚えてくれます。
生活に役立つスキルから、ピカチュウが来てくれるスキルなど、本当に多種多様です。

すでに多くの企業が参入しており、公式スキルがたくさんあるのですが、
僕も一応開発者の端くれ、ここは何か1つ作ろうと思い色々と試しました。

スキルを開発する

スキルを開発するための情報はすでにかなりまとまっています。

https://developer.amazon.com/ja/alexa-skills-kit

webの開発とはだいぶ違うようで、大きく分けて以下の流れになります。(大体です。本当はもっと細かいです。)

設計

  • 台本を用意する
    • ユーザーとAlexaの会話を想定する。話し言葉で用意しておく。
  • 対話フローの作成
    • 会話の結果、Alexaが実行するインテント(実際に動くプログラム)をマッピングする。
    • ユーザーヘルプなどを考える。

開発

  • 設定

    • 単語やフレーズの用意
    • インテントの決定
  • インテントを作る

    • lambda もしくは エンドポイントを用意する。

という感じになりそうです。

用語がかなり多く、それを理解するのに結構時間がかかってしまいます。

設計

まだ完成していないのですが、現在、「ラーメンタイマー」を作成しています。
カップラーメンの名前をいい、そのカップラーメンの時間を計ってくれるタイマーです。
今回は完成まで行けないのですが、Alexaからリクエストを受け取るまでの流れを書かせていただきます。

台本の用意

はじめに一番理想的な対話を想定します。

ユ「Alexa, 〇〇の時間を計って」
A「はい、〇〇の時間を計ります。△分お待ちください」
ユ「Alexa, ラーメンタイマー起動して」
A「はい、どのラーメンを作りますか?」
ユ「〇〇」
A「はい、〇〇の時間を計ります。△分お待ちください」

〇〇の部分にはカップラーメンの名前が入ります。どん兵衛とかです。

次に、少しイレギュラーな対話を想定します。

ユ「Alexa, ラーメンタイマー起動して」
A「はい、どのラーメンを作りますか?」
ユ「〇〇」(知らない名前)
A「すいません、〇〇というラーメンは知りません。3分でよろしいですか?」
ユ「はい」

大体のものは3分なので、わからない場合は3分にしておきます。

対話フローの作成

今回必要なインテントは、時間を計るインテントのみです。
SetTimerとしておきます。
会話の最後にSetTimerが動く感じです。

開発

設定

こちらから登録をして、色々設定します。

https://developer.amazon.com/edw/home.html#/skill/create/

やる事としては、

  • Skill自体の設定
  • 呼び出し名の設定
  • 予想する対話とインテントのマッピング
  • インテントとlambdaやエンドポイントのマッピング
  • アイコンなどの設定

です。

対話の設定はjsonで書くこともできますし、「SKILL BUILDER BETA」を使うこともできます。

対話の設定にSYNONYMSなどを設定すると、複数の文言を同じものとして扱うことができます。

そして、メニューを全てOKの状態にすると、Echoの実機でテストが行えます。
僕はアイコンの設定が必須だと気がつかず、かなり時間を取られたので、ご注意ください。

f:id:AdwaysEngineerBlog:20171215102225p:plain

インテントを作る

lambdaにSetTimerインテントが実行する関数を用意します。

カップ麺と時間をマッピングしておき、対応する時間だけ待つようにします。
(早くGolangで書きたい!!)

まず、lambdaの方のトリガーにAlexaを設定しておく必要があるので、ご注意を。
今回は、実際のコードではなく、とりあえず返事をするだけのコードを用意しました。

var ramenTime = {
    'どん兵衛': 5
}

exports.handler = function(event, context, callback) {
    var res = {
        "version": "1.0",
        "response": {
            "outputSpeech": {
                "type": "PlainText",
                "text": ramenTime[event.request.intent.slots.ramen.value] + '分お待ちください。'
            },
        }
    }
    
    callback(null, res);
    context.done(null, 'Hello from Lambda');
};

event.requestにrequestの情報が色々と詰まっています。
どんな情報が来るかはSkillの対話設定をどうするか次第です。

僕の場合は、ramenという引数を設定しており、そこにカップ麺の名前が来るようになっています。

上のコードでは、カップ麺の名前と時間をマッピングしている変数がありますが、これはSYNONYMSで削る予定です。

現在タイマーが計れるところまではできているので、今後は音楽を返すようにしたいです。
あとは、待っている時間に何かをおすすめしたり。

そこまでできたら公開したいなぁと思います。

まとめ

Alexaは、他にもsessionを扱ったり、Alexaアプリと連携したり、家電と連携したり、色々なことができるようです。
僕はAIスピーカーは一般家庭にも浸透すると信じているので、今後も研究を続けていくつもりです。

では今日はこんなところで。
良いクリスマスを!

Supersetを導入して、DBを可視化してみた

Adways Advent Calendar 2017 10日目の記事です。

http://blog.engineer.adways.net/entry/advent_calendar_2017


はじめに

12月14日を担当します、井古田です。

普段は広告関連の業務をやりつつ、ちょろっとだけマネジメントをかじってます。
最近は忘年会のビンゴでもらった Google Home Mini で何か便利なものが作れないかなって考え中なので、何か良い案があれば教えてくださーい( ´∀`)

概要

今回はチームの可視化ツールに Superset を導入したのでその紹介をしたいと思います。
可視化ツールにSupersetを選んだ理由は特にありません。強いて言うならまだ他のチームが使ってなかったから、 検証しよう的なノリで導入したのがきっかけです。

Supersetってなんぞ?

SupersetはAirbnbが開発しているOSSのBusiness Intelligence Tool(BIツール)です。
RedashやTableauに似ています。

導入

今回はdocker-composeを使ってSupersetの環境を構築したいと思います。docker便利ですね!
(※Dockerの導入に関しては割愛させていただきます)

では、さっそく進めていきましょう!

$ git clone https://github.com/amancevice/superset.git
$ cd superset
$ ls
examples  superset  Dockerfile  LICENSE  README.md  docker-compose.yml

examples以下に各ミドルウェアごとのdocker-composeの設定ファイルがあるので、好きなものを選んで試してみるのありかと!
では、さっそくSupersetの環境を作ってみます。

$ docker-compose up -d

# 初期設定
$ docker-compose exec superset superset-demo
Username [admin]: admin
User first name [admin]: admin
User last name [user]: admin
Email [admin@fab.org]:
Password:
Repeat for confirmation:

上記はアカウントの初期設定になるので、適当なもの設定してください
(※今回はデモデータがある状態でSupersetの環境を構築してます)

上記のアカウント設定が完了後、 http://localhost:8088 にアクセスすると以下の画面が表示されます。 f:id:AdwaysEngineerBlog:20171214130244p:plain

ここでは先ほど設定したアカウント情報を入力してください。
また、画面右上に国旗が表示されてる部分をクリックして日本語に切り替えることも可能みたいです!
(※最近知りましたw)

ログインすると、ダッシュボード画面に遷移します。

f:id:AdwaysEngineerBlog:20171214130257p:plain

なにかしらクリックしてダッシュボードを確認すると、なんかイケてる画面が出てくると思います!

f:id:AdwaysEngineerBlog:20171214130311p:plain

こんな感じでダッシュボードが表示されれば導入は完了です。

設定

続いて、実際にDBと連携にさせてみます。
上部メニューの[ソース]-[データベース]クリックすると以下の画面に遷移します。

f:id:AdwaysEngineerBlog:20171214130324p:plain

右上の+からクリックして、データベースを作成します。

f:id:AdwaysEngineerBlog:20171214130422p:plain

  • Database の項目にDBの名前をつけます。
  • SQLAlchemy URI の項目にDBのURIを設定します。
    (※mysqlの場合、mysql://[ユーザー名]:[パスワード]@[URI]/[DB名]のような設定になります。その他はこちらから設定方法を確認してください。)
  • Expose in SQL Lab にチェックを入れるとSQL Labからアクセス出来るようになります。

だいたいこんな感じの設定で大丈夫だと思います!(笑)
これで保存するとデータベースが作成されます。

f:id:AdwaysEngineerBlog:20171214130530p:plain

次はテーブルを作成します。

上部メニューの[ソース]-[テーブル]クリックすると以下の画面に遷移します。

f:id:AdwaysEngineerBlog:20171214130550p:plain

右上の+からクリックして、テーブルを作成します。

f:id:AdwaysEngineerBlog:20171214130609p:plain

  • Database は先ほど作ったデータベースを選択してください
  • スキーマ は必要があれば指定してください
  • テーブル名 はDBにあるテーブルを指定してください

今回は試しにusersテーブルを作成します。

f:id:AdwaysEngineerBlog:20171214130628p:plain

テーブルの定義は以下のようになります。

f:id:AdwaysEngineerBlog:20171214130647p:plain

ちょっと雑に設定していますが、許してください(笑)
以上で設定は終わりです!

グラフ化してみよう

続いて、usersテーブルを使ってログイン回数の多い人をグラフ化してみます。
必要となるカラムは以下になります。

  • nickname
  • sign_in_count

先ほど作成したusersテーブルをクリックすると、スライスを作成する画面に遷移します。

f:id:AdwaysEngineerBlog:20171214130706p:plain

左サイドメニューの設定

  • Datasource & Chart Type

    • Datasourceは参照元となるデータを選択するので、今回はusersになります。
    • Visualization Typeからどのように可視化したいかグラフを選んでください。今回はPieChartを選びます。
  • Query

    • Metricsの部分ではグラフ化する指標を選択してください。(※sum_sign_in_countを選択してください)
    • Group by で選択した対象でグルーピングします。今回はユーザーごとのログイン回数をみるので、ここではnicknameを選びます。

以下は任意でいろいろいじってみてください(笑)
期間やグラフのラベルなど、結構いろいろといじれるので楽しいですよ!

  • Time
  • Chart Options
  • SQL
  • Filters

最後に左上のRun Queryをクリックすると更新がかかります。
以下のようなグラフが完成しました!( ^∀^)

f:id:AdwaysEngineerBlog:20171214130728p:plain (※Chart Optionsとかをちょろっといじってます)

あとは、左上のSaveボタンを押すとスライスを保存することができます。
これでいつでも確認できるようになりました!

ダッシュボードをつくってみる

ダッシュボードの画面に遷移して、右上の+ボタンをクリックすると以下の画面に遷移します。

f:id:AdwaysEngineerBlog:20171214130751p:plain

  • タイトル
  • スライス

好きなタイトルを記入し、スライスには先ほど作成したスライスを選んで保存をクリックするとダッシュボードの完成です!
以下が作成したダッシュボード画面になります。

f:id:AdwaysEngineerBlog:20171214130809p:plain いい感じでダッシュボードが作れたかと思います。

最後に

SupersetはRedashと比べるとグラフの種類とかも豊富で、いろいろと楽しいグラフとかを作れるな〜と個人的に感じています。
私のチームでは、日毎や月間のユニークユーザー数や売上、広告の設定情報などを可視化してたりします。
広告の配信ターゲットなどで、どんなキーワードが多く設定されているとかを確認すると結構楽しいです。(下図)

f:id:AdwaysEngineerBlog:20171214130823p:plain

また最近では、リリースした機能のテーブルを可視化して監視し、しっかり使われているかなどのKPIにも使うことがあります。

いかがでしたでしょうか? みなさんがこの記事を読んで無事にダッシュボードを作れていることを祈っていますmm
最後までお読みいただきありがとうございました。

jQuery初心者がwindowsのイルカ作ってみた

Adways Advent Calendar 2017 9日目の記事です。

http://blog.engineer.adways.net/entry/advent_calendar_2017


おはようございます、17新卒SEの礒部です!
広告運用系の部署にいます。最近体重が5キロ増え、運動しなきゃなぁと思っています。

皆さんこのイルカのキャラクターをご存知でしょうか?

f:id:AdwaysEngineerBlog:20171213145134j:plain

windowsお助けキャラクターのカイル君といいます。
話しかけたり、色々することができる元大人気キャラクターです。

この子をjQueryの勉強をしつつ実装してみたいと思います。
(私はjQuery超初心者です)

実装機能

  • 画面上をランダムに動く
  • クリックすると喋る

実装開始!

イルカの画像は自分で描きました。(これが一番時間かかった)
f:id:AdwaysEngineerBlog:20171213145303g:plain
まずは基本のイルカを配置し、移動範囲を作ります。

<body>
    <div>
        <img id="iruka" src="images/iruka.gif">
    </div>
</body>

このままだと動かないので、どんどんjQueryで要素を追加していきます。
まずは画面上を動くようにしたいので、以下の3つを使用してみます。

setInterval # 指定した間隔で処理を実行する
animate     # スタイルを指定し、アニメーション効果を実行させる
attr        # 要素を変更させる。画像のパスを変更させる
$(function() {
    setInterval("move()",2000); // 2秒間隔で実行
});

function move() {
    var rand  = Math.round(Math.random() * 4);
    if(rand == 0){    //右
        move_right();
    }else if(rand == 1){ //左
        move_left();
    }else if(rand == 2){ //下
        move_bottom();
    }else if(rand == 3){ //上
        move_top();
    }
}

function move_left() {
    $('#iruka').animate({left: '-=100px'},1000);
    $("#iruka").attr("src","images/iruka_left.gif");
}

function move_right() {
    $('#iruka').animate({left: '+=100px'},1000);
    $("#iruka").attr("src","images/iruka_right.gif");
}

function move_top() {
    $('#iruka').animate({top: '-=100px'},1000);
    $("#iruka").attr("src","images/iruka_top.gif");
}

function move_bottom() {
    $('#iruka').animate({top: '+=100px'},1000);
    $("#iruka").attr("src","images/iruka_bottom.gif");
}

2秒ごとにランダムに移動しつつ、画像が切り替わるようになりました。


しばらく眺めていると画面外に消えてしまったので移動範囲を指定してみます。

#range {
    border:3px solid #6e6eff;
    width:600px; 
    height:600px;
}
/* 移動範囲を600pxとする */
position # 親要素からの現在位置をtop・leftの2つ形式で取得する
var range = $('#iruka').position();

if(range.left <= 400){
    move_right();
}else{
    move_left();
}

上記のような分岐を各方向に入れてあげます。画面内にとどまらせることに成功しました。
他にも色々やり方はあると思います。

f:id:AdwaysEngineerBlog:20171213145647g:plain


次に、クリック時に動きを止めてみます。

clearInterval # setIntervalの解除
click         # クリック時に処理を実行させる
stop          # 実行中のアニメーションを中断させる
setTimeout    # 関数の実行タイミングを遅らせることができる
$(function() {
    var move = set_timer();

    $("#iruka").click(function(){
        stop_timer(move);
        $(this).attr("src","images/iruka.gif").stop();
        setTimeout('set_timer();', 3000);
    });
});

function set_timer() {
    var move = setInterval("move()",3000);
    return move;
}

function stop_timer(move) {
    clearInterval(move);
}

上記で、クリック時に3秒間止まるようになりました。


次に、話しかけてくれるようにしてみます。
jquery.balloon.js という、簡単に吹き出しを作成できるプラグインを使ってみます。

balloon  # マウスオーバー時に、吹き出しとして表示
contents # balloonのオプション。表示内容を指定できる

githubからjsファイルをcloneし、実装してみます。

git clone https://github.com/urin/jquery.balloon.js
<script src="jquery.balloon.js"></script>

$("#iruka").click(function(){
    stop_timer(move);
    $(this).attr("src","images/iruka.gif").stop();
    $(this).balloon({contents: 'Enjoy Life Adways!'}); // 吹き出しの表示
    setTimeout('set_timer();', 3000);
});

f:id:AdwaysEngineerBlog:20171213153751p:plain

話してくれました。
contents要素を変えれば、ランダムで話すこともできそうですね。


話せるようになったものの、クリックした後にマウスをホバーし続けないといけない挙動になってしまいました。

f:id:AdwaysEngineerBlog:20171213162821g:plain

元のソースがマウスホバーで動く仕様で作られているのが原因です。
jquery.balloon.jsのソースを見たところ、balloonメソッドで下記の2つのメソッドをマウスホバー時に呼び出していました。なので個別に呼んでみます。

showBalloon # 吹き出しを作る
hideBalloon # 吹き出しを消す
$("#iruka").click(function(){
    stop_timer(move);
    $(this).attr("src","images/iruka.gif").stop();
    $(this).showBalloon({contents: 'Enjoy Life Adways!'});
    setTimeout('$(\'#iruka\').hideBalloon();', 2000);
    setTimeout('set_timer();', 3000);
});

マウスホバーしなくてもクリックで吹き出しが出るようになりました!

f:id:AdwaysEngineerBlog:20171213165003g:plain


本当はセリフを変えてみたり、デザインを変えてみたり色々やってみたかったのですが時間がないのでいったんここまでで。

jQuery、痒いところにまで手の届く予約関数が多くて勉強していて非常に楽しいですね!
またjQuery縛りで何か作ってみたいです。

研修レベルの内容ですが、レベルの高い記事は大先輩にまかせるとして息抜きとしてこの記事を楽しんでいただけたら嬉しいです。
それではまた!

f:id:AdwaysEngineerBlog:20171213154924p:plain