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

(1)

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

第 1 回

2017年4月7日金岡晃

(2)

プロジェクトの全体像

シラバスより

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

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

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

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

授業の目的と学習成果

2017/4/7 ^{プロジェクト}

1

(3)

金岡プロジェクトテーマ

配布資料より

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

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

Slack？

チャットボット？

外部API？データセット？

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

2017/4/7 ^{プロジェクト}

2

(4)

金岡プロジェクトテーマ

配布資料より

技術要素

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

HTTPによるアクセス

2017/4/7 ^{プロジェクト}

3

(5)

スケジュール

内容

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

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

第4回（4月28日）開発（１）

第5回（5月12日）開発（２）

第6回（5月19日）開発（３）

第7回（5月26日）成果発表会

2017/4/7 ^{プロジェクト}

4

(6)

チーム編成

• 人数構成

• 3年生グループ2：14名

• 2年生グループ3：18名

• 4名チーム（3年生2名、2年生2名）が3チーム、5名チーム（3年生2 名、2年生3名）が4チーム

• 編成はランダムに決めます

2017/4/7 ^{プロジェクト}

5

(7)

成果報告の形式、提出物

成果報告の形式

• プレゼンテーション

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

• ライブデモ

2017/4/7 ^{プロジェクト}

6

(8)

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

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

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

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

評価

シラバスより

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

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

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

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

2017/4/7 ^{プロジェクト}

7

(9)

ティーチングアシスタント（

TA

）の紹介

•

緑川達也（

M1

）

•

今井宏謙（

B4

）

2017/4/7 ^{プロジェクト}

8

(10)

チーム編成

2017/4/7 プロジェクト

9

(11)

チーム編成（学番順）

学番氏名 グループID

5515025笠原康平 5

5515026柏木伸夫 3

5515027加瀬貴士 4

5515028片岡敬済 7

5515035北爪みづほ 6

5515036工藤慶明 7

5515037國上寛規 1

5515038倉本奈々 2

5515041桑名健史 3

5515044古山貴大 5

5515045古山祐輝 2

5515051坂井大騎 1

5515054佐藤弘毅 6

5515055佐藤誠人 4

学番氏名 グループID

5516032角田朱 1

5516034輕部響子 4

5516035河合惇丞 5

5516036川﨑大輝 7

5516037仇嘉琦 3

5516040倉持涼 4

5516041阮怡亮 7

5516043小林慶大 5

5516044齊藤岬 5

5516046佐藤健太郎 6

5516048佐藤大河 4

5516049佐藤希美 2

5516051塩崎航成 6

5516052清水瑛功冴 7

5516053下村遥 2

5516055杉野友亮 3

5516057鈴木和輝 1

5516058平良大輝 6

2017/4/7 ^{プロジェクト}

10

(12)

チーム編成（グループごと）

学番氏名

5515037 國上寛規 5515051 坂井大騎 5516032 角田朱 5516057 鈴木和輝

学番氏名

5515038 倉本奈々 5515045 古山祐輝 5516049 佐藤希美 5516053 下村遥

学番氏名

5515026 柏木伸夫 5515041 桑名健史 5516037 仇嘉琦 5516055 杉野友亮

学番氏名

5515027 加瀬貴士 5515055 佐藤誠人 5516034 輕部響子 5516040 倉持涼 5516048 佐藤大河

学番氏名

5515025 笠原康平 5515044 古山貴大 5516035 河合惇丞 5516043 小林慶大 5516044 齊藤岬

学番氏名

5515035 北爪みづほ 5515054 佐藤弘毅 5516046 佐藤健太郎 5516051 塩崎航成 5516058 平良大輝

学番氏名

5515028 片岡敬済 5515036 工藤慶明 5516036 川﨑大輝 5516041 阮怡亮 5516052 清水瑛功冴グループ1 グループ3 グループ5 グループ7

グループ2 グループ4

グループ6

2017/4/7 ^{プロジェクト}

11

(13)

金岡プロジェクトテーマ

配布資料より

Slack？

チャットボット？

外部API？データセット？

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

2017/4/7 ^{プロジェクト}

12

(14)

SLACK とは

13

(15)

Slack とは

Slack（スラック）

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

https://slack.com/

類似・近いサービス？

2017/4/7 ^{プロジェクト}

14

(16)

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

2017/4/7 ^{プロジェクト}

15

(17)

Slack のポイント（１）

チームごとに作成

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

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

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

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

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

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

2017/4/7 ^{プロジェクト}

16

(18)

Slack のポイント（２）

チャット

• チーム全体

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

• チャンネル

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

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

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

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

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

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

2017/4/7 ^{プロジェクト}

17

(19)

Slack のポイント（３）

ファイル共有

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

2017/4/7 ^{プロジェクト}

18

(20)

Slack のポイント（４）

リンクの貼り付け

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

2017/4/7 ^{プロジェクト}

19

(21)

Slack のポイント（５）

スニペット

• 「切れ端」という意味

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

2017/4/7 ^{プロジェクト}

20

(22)

Slack のポイント（６）

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

• ブラウザから利用可能

• 専用アプリケーション

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

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

2017/4/7 ^{プロジェクト}

21

(23)

Slack のポイント（７）

連動アプリケーション

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

2017/4/7 ^{プロジェクト}

22

(24)

連動アプリ： Google Hangout

2017/4/7 ^{プロジェクト}

23

(25)

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

2017/4/7 ^{プロジェクト}

24

(26)

コマンド：リマインド

2017/4/7 ^{プロジェクト}

25

(27)

コマンド：リマインド

2017/4/7 ^{プロジェクト}

26

(28)

Slack チームを作ろう

2017/4/7 ^{プロジェクト}

27

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

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

(29)

Slack チームを作ろう

2017/4/7 ^{プロジェクト}

28

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

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

「Get Started」ボタンを押す

(30)

Slack チームを作ろう

2017/4/7 ^{プロジェクト}

29

(31)

Slack チームを作ろう

2017/4/7 ^{プロジェクト}

30

ページの下に移動する

「Create a new

team」を押す

(32)

Slack チームを作ろう

31

(33)

Slack チームを作ろう

32

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

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

(34)

2017/4/7 プロジェクト 33

(35)

Slack チームを作ろう

34

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

「Continue to Password」を押す

(36)

Slack チームを作ろう

35

パスワードを入力して「Continue to Team Info」を押す

(37)

Slack チームを作ろう

36

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

(38)

Slack チームを作ろう

37

グループ名を入力

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

(39)

Slack チームを作ろう

38

グループ名を入力

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

(40)

Slack チームを作ろう

39

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

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

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

(41)

Slack チームを作ろう

40

(42)

Slack チームを作ろう

41

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

(43)

Slack チームを作ろう

42

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

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

(44)

Slack チームを作ろう

43

(45)

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

44

(46)

いろいろいじってみよう

2017/4/7 ^{プロジェクト}

45

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

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

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

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

(47)

いろいろいじってみよう

2017/4/7 ^{プロジェクト}

46

プロフィール画像の変更

このマークをクリック

(48)

いろいろいじってみよう

47

“Profile & account”をクリックプロフィール画像の変更

(49)

いろいろいじってみよう

48

“Edit Profile”をクリック

(50)

いろいろいじってみよう

49

アイコン画像の上に

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

(51)

いろいろいじってみよう

50

クリックすると

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

(52)

いろいろいじってみよう

51

“Save Profile Photo”で保存

(53)

いろいろいじってみよう

52

見た目を変えてみよう

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

(54)

いろいろいじってみよう

2017/4/7 ^{プロジェクト}

53

このマークをクリック

(55)

いろいろいじってみよう

54

“Preferences”をクリック見た目を変えてみよう

(56)

いろいろいじってみよう

55

“Sidebar Theme”をクリック見た目を変えてみよう

(57)

いろいろいじってみよう

56

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

(58)

いろいろいじってみよう

57

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

(59)

いろいろいじってみよう

58

絵文字を登録してみよう

(60)

いろいろいじってみよう

59

“Customize Slack”をクリック

(61)

いろいろいじってみよう

60

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

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

(62)

いろいろいじってみよう

61

画像ファイルは

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

(63)

いろいろいじってみよう

62

(64)

その他の Tips

63

引用

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

装飾系

https://seleck.cc/416

(65)

その他の Tips

64

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

Post

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

(66)

チャットボット

65

(67)

チャットボット

2017/4/7 ^{プロジェクト}

66

ボット

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

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

SiriやContanaもボットの一種

(68)

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

2017/4/7 ^{プロジェクト}

67

LINE

自動的に投稿がされる

LINE NEWS

や、その他企業や芸能人アカウントなど

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

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

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

Skype

、

Facebook Messenger

など

(69)

どんなボットがあるか

•

計算してくれる

•

ランダムに画像投稿

• StackOverflow

•

猫ボット

•

電車の遅延連絡

2017/4/7 ^{プロジェクト}

68

代表的な事例 •

天気

•

ニュース

•

スケジュール

•

タスク管理

•

レストラン・ホテル予約

変わり種

(70)

Slack ボット：天気

2017/4/7 ^{プロジェクト}

69

Weather App

“/weather

都市名

”

で天気を表示してくれる

(71)

Slack ボット：ニュース

2017/4/7 ^{プロジェクト}

70

RSS

各サイトの

RSS

をチェックして、新着があったらつぶやく

(72)

Slack ボット：スケジュール

2017/4/7 ^{プロジェクト}

71

Googleカレンダー

Google

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

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

(73)

Slack ボット：変わり種

2017/4/7 ^{プロジェクト}

72

mathbot

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

(74)

Slack ボット：変わり種

2017/4/7 ^{プロジェクト}

73

猫ボット

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

(75)

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

2017/4/7 ^{プロジェクト}

74

(76)

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

75

Slackbotへの登録

“Customize Slack”をクリック

(77)

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

76

“Slackbot”タブをクリック

(78)

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

77

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

反応するコメントを入力

(79)

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

78

(80)

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

79

(81)

来週は

•

より本格的な

Slackbot

を作るには

•

このプロジェクトで

Slackbot

を作るための環境説明

•

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

– “Node.js”

と“

Slack

ボット

”

• JavaScript

での

Slack

ボット開発

–

“

Hubot

”と“

Slack

ボット”

• Python

での

Slack

ボット開発

2017/4/7 ^{プロジェクト}

80

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