変数とは…？

LINE BOT 新人研修

変数とは

変数とは、コンピュータに値を記憶させるための「入れ物」。

例えば、人間が「１＋２」という計算をするとき
一つ目の数字（「１」）を「覚える」という処理をしている。

（図書くとよい）

しりとりをするときは、、ひとつ前の単語を覚えている。
コンピュータでも、それと同じ処理が必要になります。
 

変数を使う

[書き方]

$num = 5;

変数に値をセットします。「=」は代入演算子。イコールではなく代入という意味。

実際に動かしてみる

  1. エディタで「test.php」を作成する
  2. 「test.php」に以下のコードを記述する
<?php  
  $text="Hello World";  
  echo $text;  
?>
  1. 研修用サーバに「test.php」を置く
  2. ブラウザで見る

おまけ

<?php  
  $aa = 10;   
  $bb = 20;   
  $cc = $aa + $bb; //$cc = 30になる  
　echo $㏄;  
?>

LINE BOTの仕組み

新人研修 LINE BOT

LINE BOTが返答するまでの道のり

LINE BOTがユーザのメッセージを受けてから返答するまで、どのような道のりをたどるのでしょうか。

BOT_02

  1. ユーザ(私)がLINEでメッセージを送る（例えば「おはよう」）
  2. 「おはよう」がLINE Messaging APIに渡る
  3. 「おはよう」がxxx.phpに渡る
  4. xxx.phpが「返事(●●)」を用意する（Botが実際に返した言葉を出して説明）←ここをいじります
  5. 「返事」がLINE Messaging APIに渡る
  6. 「返事」がユーザに渡る（LINEアプリ上に表示される）

つまり、どこで「返事」を作っているかというと…
　xxx.php

好きな返答を返したい

　xxx.phpの「返事」を作っている部分を書き換えればよい。

phpファイルのどこで返事を作っているか

PHPのソースコード説明する

  1. ユーザ(私)が送ったメッセージ(例えば「おはよう」)を受け取る部分
  2. 返事を作る部分←ここをいじります
  3. 作った返事を返す部分

返事はどこにある？
“text” => $rep_text ←ここにユーザ(私)に返すメッセージ（オウム返しなので「おはよう」）が入っている

※最初はわからないこともあるかもなので細かいところは省略
　この辺でオウム返しから、好きなメッセージを決めてもらって、直書きしてもらう
（2個ぐらいして、ここが返事だと理解で来たらOK。「じゃねぇよ!」へ進む） 　　

要点

「$○○」は変数。値を入れる箱のようなもの

補足情報

●変数とは？

オウム返しBOTを動作させる手順

新人研修 LINE BOT

オウム返しをするLINE BOTを作成します。

準備（環境構築）

以下を各自PCにインストールする（クリックするとダウンロードページに飛びます） 。

サーバーを用意する（済）

研修用に用意してもらいました。

LINEビジネスアカウント登録

LINE BUSINESS CENTER から利用登録・各種設定を行う。

1.LINE Messaging API利用登録

  1. Messaging API > Developer Trialを始める
  2. 自分のLINEアカウントにログインする
    パスワードを忘れていた場合
  3. 各種設定してLINE BUSINESS CENTERにログイン

2.LINE@MANAGER設定

  1. アカウント設定 > Bot設定 > API利用する
  2. リクエスト設定 >　Webhook送信 利用する
  3. 詳細設定> 自動応答メッセージ 利用しない

3.LINE Developers設定

  1. Basic information> WebhooURL指定（メールでお伝えします）
  2. Channel Access Tokenをメモする

参考に…
LINEビジネスアカウント登録の方法

プロジェクト作成（初日は用意したものを使う）

PHPファイル作成

  1. ファイル冒頭「$access_token=・・・」の・・・部分を自分のBOTのChannel Access Tokenに書き換える
  2. デスクトップに保存する

●PHPとは？
WEBアプリ開発で使用される人気のプログラミング言語のひとつ。
WEBアプリとは…ブラウザでインターネットを介して使用することが出来るプログラムのことで、SNSや電子掲示板のようなもののこと。

サーバー上に置く

  1. WinSCPで研修用サーバにログインする
  2. デスクトップに保存したphpファイルを、研修用サーバ上にコピーする

動作確認

  1. 自分のBOTと友達になる
  2. 話しかける

LINE BOTのざっくりとした説明

新人研修 LINE BOT

LINE BOTとは？

LINE社が提供するbot機能を持つアカウント。

●bot機能とは？
robot（ロボット）の短縮形・略称で、転じてコンピュータやインターネット関連の自動化プログラムの一種のこと。

簡単に言うと…
LINEで自動返信とかできるアカウントを自分で作れる、ということ。

何ができる？

ユーザが送ってきたメッセージ（テキストでも画像でも何でもいい）に対して自動的にメッセージを返す。

BOT_01

例えば…
芸能人の公式LINEアカウント。
ユーザが何かを送ると一定の法則で返事が返ってくる。

必要なものは？

「LINE BOT API」と、LINE BOT APIに呼び出されることができる（コールバックを受けられる）環境。

※研修用にこの「環境」を作ってもらったので、これを使います。
　個人でやってみたい場合は自分で用意しなければならないです。

●APIとは？

APIは自己のソフトウェアを一部公開して、他のソフトウェアと機能を共有できるようにしたものです。

ソフトウェアの一部をWEB上に公開することによって、誰でも外部から利用することができるようになります。

それによって、自分のソフトウェアに他のソフトウェアの機能を埋め込むことができるようになるので、アプリケーション同士で連携することが可能になるのです。

www.sejuku.net

●コールバックとは？

他の関数（プログラム）に呼び出されて、呼び出された先で実行される関数（プログラム）

関数に引数として渡される関数だよ

wa3.i-3-i.info

はじめに

新人研修

概要

2017年度の新人研修。

  • テーマ
    プログラミング楽しい
  • コンテンツ
    LINE BOT実習、WEB系実習

研修スケジュール

期間 内容 目的
5/8-5/17 LINE BOT作成 プログラミング基礎を学ぶ(PHP)
5/18-5/31 ブログカスタマイズ WEBに触れる(CSS)
6/1-6/1 最終報告 プレゼンをする

スケジュールは変更する可能性があります。

内容

LINE BOT実習

最初にオウム返しをするBOTを渡し、2週間かけて雑談対話ができるBOTに成長させていく。

WEB系実習（以下、案）

日報を書くブログを、より読んでもらえるようにカスタマイズする。

研修スケジュール

全体像

期間 内容 目的
5/8-5/17 LINE BOT作成 プログラミング基礎を学ぶ(PHP)
5/18-5/31 ブログカスタマイズ WEBに触れる(CSS)
6/1-6/1 最終報告 プレゼンをする

日別の予定

5/8（月）

オリエンテーション
  • 自己紹介
  • 研修の流れ説明
  • 開発課の業務
LINE BOT導入
LINE BOT実習（基礎）
報告について説明、書く

5/9（火）

LINE BOT実習（基礎）
報告

以下、報告は略

5/10（水）

LINE BOT実習（基礎）

5/11（木）

LINE BOT実習（基礎）

5/12（金）

LINE BOT実習（応用）

※1週目終了：遅れた場合、選択肢フォームまでを目標とする

5/15（月）

LINE BOT実習（応用）
  • 雑談とそれ以外に場合分けする
    • 例：「角野」に対し「角野卓造じゃねぇよ!!」、その他に対し雑談を返す、など
  • しりとりモードを追加する
  • 雑談モードとしりとりモードを選択肢フォームで切り替える

5/16（火）

LINE BOT実習（応用）
  • 近藤春菜以外のキャラに改造する
    • 好きな画像をひたすら返すBOT、動画を紹介してくれるBOT、など
    • 挑戦したければ、お天気とか別のAPIと連携させてもよいと思う(簡単なAPIに限る)
  • 実装

5/17（水）

LINE BOT実習（応用）
  • 実装
  • まとめ、復習
    • LINE BOTの仕組み、変数、条件分岐、配列、関数が使えていればOK

※LINE BOT実習終了：遅れた場合、雑談しりとりモード切り替えまでを目標とする

5/18（木）

ブログカスタマイズ導入

5/19（金）

ブログカスタマイズ実習
  • はてなブログを検証ツールで見る
    • 昨日のサイトが複雑になったものである、とつなげる
  • はてなブログの編集方法を説明
    • HTMLとCSSを見る場所
    • CSSを外部に出して編集しやすくする

  • CSSを編集するお題をいくつか出す

  • 日報ブログをカスタマイズする

    • 今後の流れ説明（カスタマイズ、フィードバックもらいに行く、発表）
      • 編集前のスクリーンショットを撮っておく
      • 発表の見せ方とか話す内容も意識しつつやった方がいいかも

  • レイアウト考案（紙に書いてみる）

    • 誰が見るか、より見てもらうには？
    • UI, UXという考え方がある（昨年度デザイン課研修のスライド使って説明）
    • 世の中のサイトやブログを参考にする
    • 個人の「色」を出すような工夫をする（二人のレイアウトがかぶらない、一目でどちらのブログかわかるように）

5/22（月）

ブログカスタマイズ実習
  • レイアウト考案
    • 紙に書く
    • なぜそのレイアウトにしたのか話す、ディスカッション
    • 例になりそうなサイトを探す
    • 具体的に実現できそうか調べる
  • 実装

5/23（火）

ブログカスタマイズ実習
  • 実装

5/24（水）

ブログカスタマイズ実習
  • 実装

5/25（木）

ブログカスタマイズ実習
  • 実装
  • 「ブログデザイン変えました」記事更新

5/26（金）

ブログカスタマイズ実習
  • 先輩方にフィードバックもらいに行く
  • フィードバックを踏まえて再検討
  • レイアウト決める
  • 実装

※3週目終了：遅れた場合、「ブログデザイン変えました」記事更新までを目標とする

5/29（月）

ブログカスタマイズ実習
  • 実装

5/30（火）

ブログカスタマイズ実習
  • 実装
  • 「ブログデザイン変えました」記事②更新

【予備日】

  • JSについて
    • LINE BOTで使ったPHPと同じく、ifとかforとか出てくるよ、とか
    • カスタマイズ導入時に作ったHTMLに簡単なJSを実装する
      • alert(), confirm(), prompt()くらい

5/31（水）

ブログカスタマイズ実習

【予備日】

6/1（木）

プレゼン準備
  • プレゼン準備
    • 資料作成
    • 話す内容決める
    • 練習

6/2（金）

プレゼン