プロジェクト（金岡グループ）第1回

(1)

プロジェクト（金岡グループ）

第 1 回

金岡晃

(2)

プロジェクトの全体像

シラバスより

実践的なテーマに基づく、情報システム開発の演習を通して、目標設定、計画、実行、評価の基本的な流れを習得する。

情報システム開発の演習を通して、ネットワーク、データベース、

JavaScript、PHPなどのWebサービス開発用の言語についての基礎を習得する。

自ら目標設定し、開発工程を管理し、グループメンバと協力して一つの目標を達成する経験を通して、プロジェクトの推進方法を理解し、メンバーと協力してプロジェクトに参画できるようになる。

授業の目的と学習成果

プロジェクト

1

(3)

金岡プロジェクトテーマ

配布資料より

テーマC 独自チャットボット作成

コミュニケーションツールSlack上で動き回るチャットボットシステムを作成する。シェルスクリプトやJavaScriptなどのスクリプト言語と、外部APIやデータセットの活用により、チームごとに特色のあるチャットボットの実現を試みる。

Slack？

チャットボット？

外部API？データセット？

このあたりを今日解説します

プロジェクト

2

(4)

金岡プロジェクトテーマ

配布資料より

技術要素

なんらかの言語を使ったプログラミング外部リソースの活用

HTTPによるアクセス

プロジェクト

3

(5)

スケジュール

内容

第1回プロジェクトの概要説明、基礎知識の学習（１）

第2回基礎知識の学習（２）、Botデザイン第3回 Botデザインまとめ、発表

第4回開発（１）

第5回開発（２）

第6回開発（３）

第7回成果発表会

プロジェクト

4

(6)

成果報告の形式、提出物

成果報告の形式

• プレゼンテーション

• 狙い、利用した技術、工夫した点や改善した点、残課題

• ライブデモ

プロジェクト

5

(7)

• 出席状況＜プロジェクト参加状況＞

• レポート（個人ごと）＜授業態度、実験成果＞

• プレゼンテーション（チーム）＜授業態度、実験成果＞

• 成果物（チーム）＜実験成果＞

評価

シラバスより

原則として、プロジェクト参加状況50％、授業態度25％、実験成果25％

として評価する。プロジェクトの進め方、成果・作品等は改善点などを講評する。

金岡プロジェクトでの評価

独自性面白さソースコードの質

プロジェクト

6

(8)

金岡プロジェクトテーマ

配布資料より

Slack？

チャットボット？

外部API？データセット？

このあたりを今日解説します

プロジェクト

7

(9)

SLACK とは

プロジェクト 8

(10)

Slack とは

Slack（スラック）

コミュニケーションツール。グループでのチャットを中心として、ユーザ間のダイレクトメッセージやトピックごとのチャットなどが可能な Webサービス

https://slack.com/

類似・近いサービス？

プロジェクト

9

(11)

ブラウザから Slackにログインしたところ

プロジェクト

10

(12)

Slack のポイント（１）

チームごとに作成

• チームごとにSlackの場所を作成可能

• チームには複数のユーザが参加可能（ユーザ数無制限）

• チームごとに独自URLが与えられる

• たとえば金岡研Slackの場合は https://toho-klab.slack.com/

• 上記の”toho-klab”がチーム名

• チームのドメインに使われる名称は重複してはいけない

プロジェクト

11

(13)

Slack のポイント（２）

チャット

• チーム全体

• ユーザ同士（ダイレクトメッセージ）

• チャンネル

• チームのうち特定のユーザが参加したチャットルーム

• 他のチームユーザへ公開するものと、

非公開にするもの（プライベートチャンネル）がある

• チャンネル名のあたまには「＃」が付く

• 厳密にはチーム全体のチャットも

#general というチャンネルになる

プロジェクト

12

(14)

Slack のポイント（３）

ファイル共有

• ドラックアンドドロップで簡単に可能

プロジェクト

13

(15)

Slack のポイント（４）

リンクの貼り付け

• URLを貼り付けると、そのタイトルや要約、サムネイル画像などが出る

プロジェクト

14

(16)

Slack のポイント（５）

スニペット

• 「切れ端」という意味

• ソースコードの一部などを貼り付けて共有可能

プロジェクト

15

(17)

Slack のポイント（６）

対応プラットフォームの充実

• ブラウザから利用可能

• 専用アプリケーション

• デスクトップアプリ：Windows OS, Mac OS X, Linux (Ubuntu, Fedora)

• モバイルアプリ：iOS (iPhone, iPad), Android OS, Windows Mobile

プロジェクト

16

(18)

Slack のポイント（７）

連動アプリケーション

• 連動するアプリケーションが非常に多い

プロジェクト

17

(19)

連動アプリ： Google Hangout

プロジェクト

18

(20)

連動アプリ： Google カレンダー

プロジェクト

19

(21)

コマンド：リマインド

プロジェクト

20

(22)

コマンド：リマインド

プロジェクト

21

(23)

Slack チームを作ろう

プロジェクト

22

まずSlackのページにブラウザでアクセス https://slack.com/

チームの代表者1人が作業しよう

(24)

Slack チームを作ろう

プロジェクト

23

まずSlackのページにブラウザでアクセス https://slack.com/

ここにメールアドレスを入力して

「Get Started」ボタンを押す

(25)

Slack チームを作ろう

プロジェクト

24

(26)

Slack チームを作ろう

プロジェクト

25

ページの下に移動する

「ワークスペースを新規作成」

を押す

(27)

Slack チームを作ろう

(28)

Slack チームを作ろう

さきほど入力したメールアドレスに

6桁のコードが含まれたメールが届いているのでそれを入力

(29)

Slack チームを作ろう

名前（氏名）とユーザアカウント名を入れて、

「パスワードへ進む」を押す

(30)

Slack チームを作ろう

パスワードを入力して「ワークスペース情報へ進む」を押す

(31)

Slack チームを作ろう

こんな感じで入力してください

(32)

Slack チームを作ろう

グループ名を入力

※ここは好きな名前を付けられます

(33)

Slack チームを作ろう

グループ名に従ったURL の決定

※ここの名称はすでに誰かに使われてたらダメ

このURL、メモしておきましょう。

(34)

Slack チームを作ろう

同意しますか？と聞かれているので同意するなら「同意します」を押す

(35)

Slack チームを作ろう

ここで自分以外のユーザを招待（Invite）できるので、他のメンバを招待しましょう。

入力されたメールアドレスにメールが届きますので確認しましょう

(36)

Slack チームを作ろう

(37)

いろいろと SLACK をいじってみよう

(38)

いろいろいじってみよう

プロジェクト

37

まずはみんなでチャットしよう

#general で入力すると、みんなにメッセージが届きます個人同士でメッセージをやりとりしてみよう

DIRECT MESSAGESでユーザ名を選んで、そこで入力すると、そのユーザにメッセージが届きます。

これは他ユーザには見えません。

(39)

いろいろいじってみよう

プロジェクト

38

プロフィール画像の変更

このマークをクリック

(40)

いろいろいじってみよう

“プロフィール＆アカウント”をクリック

(41)

いろいろいじってみよう

“プロフィールを編集する”をクリック

(42)

いろいろいじってみよう

アイコン画像の上に

マウスカーソルを持ってくる

(43)

いろいろいじってみよう

クリックすると

ファイルを選択する画面になるので画像ファイルを選択

(44)

いろいろいじってみよう

“プロフィール写真を保存”で保存

(45)

いろいろいじってみよう

見た目を変えてみよう

いろいろなところの色を変更可能

(46)

いろいろいじってみよう

プロジェクト

45

このマークをクリック

(47)

いろいろいじってみよう

“環境設定”をクリック見た目を変えてみよう

(48)

いろいろいじってみよう

“サイドバー”をクリック見た目を変えてみよう

(49)

いろいろいじってみよう

スクロールバーを下げていくと、

いくつかのパターンが選択できる

(50)

いろいろいじってみよう

細かく色を指定したい場合はここをクリック

(51)

いろいろいじってみよう

“Slackをカスタマイズ”をクリック

絵文字を登録してみよう

(52)

いろいろいじってみよう

その絵文字を出すときに入力する文字列を入力

出力される画像ファイルを選択

(53)

いろいろいじってみよう

画像ファイルは

128ピクセルx128ピクセルまでなので注意

(54)

いろいろいじってみよう

(55)

その他の Tips

引用

入力の最初を”> “で始めると引用の表記になる

装飾系

https://seleck.cc/416

(56)

その他の Tips

「お気に入り」のように使える

Post

スニペットのようなものを、複数ユーザで共同編集できる

(57)

チャットボット

(58)

チャットボット

プロジェクト

57

ボット

チャット上でユーザとして参加してくるボット（プログラム）を作ることができる

プログラムのこと。特に人間に代わって作業を行うものを指すことが多い。マルウェアの用語としての一面も持つ。

SiriやContanaもボットの一種

(59)

さまざまなプラットフォームで利用

プロジェクト

58

LINE

自動的に投稿がされる LINE NEWS や、その他企業や芸能人アカウントなど

• https://matome.naver.jp/odai/2135855964060612201

• http://www.appgaku.com/iphone-

pickup/2013/08/20130806006767.html その他

Skype 、 Facebook Messenger など

(60)

どんなボットがあるか

• 計算してくれる

• ランダムに画像投稿

• StackOverflow

• 猫ボット

• 電車の遅延連絡

プロジェクト

59

代表的な事例

• 天気

• ニュース

• スケジュール

• タスク管理

• レストラン・ホテル予約

変わり種

(61)

Slack ボット：天気

プロジェクト

60

Weather App

“/weather 都市名 ” で天気を表示してくれる

(62)

Slack ボット：ニュース

プロジェクト

61

RSS

各サイトの RSS をチェックして、新着があったらつぶやく

(63)

Slack ボット：スケジュール

プロジェクト

62

Googleカレンダー

Google カレンダーと同期して、予定が入力されたときや、週初め

でのアナウンス、予定直前でのアナウンスなどがされる

(64)

Slack ボット：変わり種

プロジェクト

63

mathbot

http://plus.appgiga.jp/masatolan/2015/07/02/56363/

(65)

Slack ボット：変わり種

プロジェクト

64

猫ボット

http://www.e-agency.co.jp/column/slackbot_ai.html

(66)

簡単なボットならすぐできる

“Slackをカスタマイズ”をクリック

Slackbotへの登録

(67)

簡単なボットならすぐできる

“Slackbot”タブをクリック

(68)

簡単なボットならすぐできる

Botが反応するキーワードを入力

反応するコメントを入力

(69)

簡単なボットならすぐできる

(70)

簡単なボットならすぐできる

(71)

来週は

• より本格的な Slackbot を作るには

• このプロジェクトで Slackbot を作るための環境説明

• どんどん先に進みたい人は、以下のキーワードで調べ物をしておくといいかも

– “Node.js” と“ Slack ボット ”

• JavaScript での Slack ボット開発 – “ Hubot ”と“ Slack ボット”

• Python での Slack ボット開発

• 次回資料も早晩アップするのでそちらも参照しておいてください

プロジェクト

70

プロジェクト（金岡グループ） 第1回