プロジェクト（金岡グループ）第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

5516060高松晃希

7

5516061高安真由

4

5516062高山裕介

2

5516065田中亜実

2

5516066田辺瑞貴

3

5516068寉岡昂佑

4

5516069戸井成美

6

5516070都倉誠

6

5516071戸沢元紀

5

5516072富山麟太郎

5

5516074中田美花

4

5516076中山晃希

1

5516077中山道裕

5

5516078長岡亜理沙

6

5516079長沼慶弥

7

5516080鍋谷佑

7

5516084羽田大弥

1

5516088陳沢広

3 2017/4/7

10

(12)

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

学番氏名

5515037 國上寛規 5515051 坂井大騎 5516076 中山晃希 5516084 羽田大弥

学番氏名

5515038 倉本奈々 5515045 古山祐輝 5516062 高山裕介 5516065 田中亜実

学番氏名

5515026 柏木伸夫 5515041 桑名健史 5516066 田辺瑞貴 5516088 陳沢広

学番氏名

5515027 加瀬貴士 5515055 佐藤誠人 5516061 高安真由 5516068 寉岡昂佑 5516074 中田美花

学番氏名

5515025 笠原康平 5515044 古山貴大 5516071 戸沢元紀 5516072 富山麟太郎 5516077 中山道裕

学番氏名

5515035 北爪みづほ 5515054 佐藤弘毅 5516069 戸井成美 5516070 都倉誠 5516078 長岡亜理沙

学番氏名

5515028 片岡敬済 5515036 工藤慶明 5516060 高松晃希 5516079 長沼慶弥 5516080 鍋谷佑グループ

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

Pin

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

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

への登録

“

Slackbot

”タブをクリック

(78)

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

77

Slackbot

への登録

Bot

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

反応するコメントを入力

(79)

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

78

Slackbot

への登録

(80)

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

79

(81)

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