WEBサイトってなにでできてるの？

新人研修 カスタマイズ

HTML, CSS, JS

HTML

文章構造をつくる

Webサイトのコンテンツを「文章」として記述するための言語。
Webサイトの骨組みとなる部分。

CSS

装飾

HTMLで作られた「文章構造」の「スタイル」（デザイン）を指定する。

JS

動きを付ける

ブラウザ上で動くプログラム言語。
主にHTMLやCSSだけでは表現できないことを補う目的で使われている。

検証ツールでみる

ブラウザでF12

はてなブログをカスタマイズしてみよう

新人研修 カスタマイズ

はてなブログはカスタマイズできる

毎日報告を書いているはてなブログ、好きなようにカスタマイズできます。
テンプレート（ひな形）もあるが、それ以上のことも。
例えば…
検索してみる。

WEBサイトってなにでできてるの？

WEBサイトの中身は、ブラウザの検証ツールで覗くことができます。
ブラウザで見たいサイトを開いて「F12」を押してみましょう。

続き→

WEBサイトはなぜ見れるの？

WEBサイトはどうやって手元で見られるのか。
手元のデバイスに大量のWEBサイトが保存されているわけではない。
続き→

簡単なWEBサイトをつくろう

  1. テキストエディタでHTMLファイルとCSSファイルを作成する
  2. 研修サーバに置く
  3. ブラウザからアクセスする

例：HTML

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
  <h1>Hello</h1>
  <div>
    <p>This is a paragraph.</p>
  </div>
</body>
</html>

例：CSS

@charset 'UTF-8';

h1{
  /*color: red;*/
}

★お題

  • 文字を太字にしよう
  • 文字を大きくしよう
  • 文字を赤字にしよう
  • 文字をセンター揃えにしよう
  • 背景色を#e0e0e0にしよう

なまのHTML,CSSのサンプル

カスタマイズ 新人研修

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Sample</title>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello</h1>
  <div>
    <p>This is a paragraph.</p>
  </div>
</body>
</html>

+CSS

タイトル色を変更する

  • クラス名を付ける
  • スタイルを定義する
  • リンクさせる
<!DOCTYPE html>
<html>
<head>
  <title>Sample</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
  <h1 class="red">Hello</h1>
  <div>
    <p>This is a paragraph.</p>
  </div>
</body>
</html>
@charset 'UTF-8';

.red{
  color: red;
}

しりとり⇔雑談モード切替

LINE BOT 新人研修

しりとり⇔雑談モード切替

しりとりモードにする

  1. 開始トリガー「しりとりしよう」を受信する。
  2. Template Messageのボタンで「しりとりする/雑談する」を表示する。
  3. ユーザが「しりとりする」を選択する。
  4. ユーザメッセージが「message」ではなく「postback」としてPHPファイルに渡る。 postback, data => action=srtr
    （PHPファイルでは「message」と「postback」でif分岐する。）
  5. 「postback」の「data」を抽出し、action=srtrなので「じゃあしりとりしよう。りからどうぞ。」と返事する。
  6. 外部に置いたテキストファイル「isSrtr.txt」の内容を「true」にする。

雑談モードにする

  1. 開始トリガー「しりとりやめ」を受信する。
  2. Template Messageのボタンで「しりとりする/雑談する」を表示する。
  3. ユーザが「雑談する」を選択する。
  4. ユーザメッセージが「message」ではなく「postback」としてPHPファイルに渡る。 postback, data => action=dialog
    （PHPファイルでは「message」と「postback」でif分岐する。）
  5. 「postback」の「data」を抽出し、action=dialogなので「じゃあ雑談しよう」と返事する。
  6. 外部に置いたテキストファイル「isSrtr.txt」の内容を「false」にする。

※毎度「isSrtr.txt」の中身をみて、trueならmode=srtr;にする。（falseならmode=dialogにする。）

参考

$json_string = file_get_contents('php://input');
$json_obj = json_decode($json_string);

$message = $json_obj->{"events"}[0]->{"message"};
$postback = $json_obj->{"events"}[0]->{"postback"};

$postback_data = $postback->{"data"};

$file = "isSrtr.txt";
$isSrtr = file_get_contents($file);
outputLog("isSrtr: $isSrtr");

if($isSrtr == "true"){
  $mode = srtr;
}else{
  $mode = dialog;
}

//POSTBACK
if(strpos($postback_data, 'action=') !== false){
  switch($postback_data){
    /*mode切り替え*/
    case "action=dialog":
      file_put_contents($file, "false");
      $rep_text = "じゃあ雑談しよう";
      $type = "text";
      break;
    case "action=srtr":
      file_put_contents($file, "true");
      $rep_text = "じゃあしりとりしよう。しりとりのりからどうぞ。";
      $type = "text";
      break;
  }
//MESSAGE
}else{
}

//以下略//

雑談APIと しりとり をしたい

LINE BOT 新人研修

しりとりモードを追加する

modeにsrtrを指定

function chat($text) {
  // docomo chatAPI
  $api_key = 'xxxxxxxxxxxxxxxx';
  $api_url = sprintf('https://api.apigw.smt.docomo.ne.jp/dialogue/v1/dialogue?APIKEY=%s', $api_key);
  $req_body = array(
    'utt' => $text,
    't'=> 20,
    'mode' => srtr
    );
  $headers = array(
      'Content-Type: application/json; charset=UTF-8',
  );
  $options = array(
      'http'=>array(
          'method'  => 'POST',
          'header'  => implode("\r\n", $headers),
          'content' => json_encode($req_body),
          )
      );
  $stream = stream_context_create($options);
  $res = json_decode(file_get_contents($api_url, false, $stream));
  return $res;
}

雑談モードとしりとりモードを切り替える

  1. はじめるとき
    • トリガーをきめる（例：しりとり）
    • ifで分岐、「しりとりモードにしますか？-yes/no」を出す
    • yesの場合、処理をしりとりモードへ/noの場合、処理を雑談モードへ
  2. やめるとき
    • トリガーをきめる（例：やめ）
    • ifで分岐、「しりとりモード？-yes/no」を出す
    • yesの場合、処理を雑談モードへ/noの場合、処理をしりとりモードへ

会話にならない

LINE BOT 新人研修

公式リファレンスが"使える"ことを知ってほしい

docomoAPI Reference

会話の文脈"context"を保持しなければならない

現段階では毎回「見知らぬ誰か」に話しかけられている。
ユーザメッセージと一緒に、前回の会話の文脈を渡すことで「前回こういう会話をした人」に話しかけられる状態になる。

https://line.f-logic.jp/img/BOT_docomo_context.jpg

docomoAPIから"context"を抜き出す

docomoAPIからレスポンスを受け取る部分に追記する。

docomoAPIへ前回の"context"を渡す

docomoAPIにユーザメッセージを渡す部分に追記する。

※docomoAPIからの'context'をログファイルに出力した結果※

渡す'context'の中身 会話
なし 「おはよう」のみ/単発の会話(雑談をふってくる)
前回のcontext 単発の会話(雑談をふってくる)
前回のcontext+LINEユーザID 継続した会話(キーワードを覚えて使ってくる)
LINEユーザID 継続した会話(キーワードを覚えて使ってくる)

雑談APIを導入しよう！

LINE BOT 新人研修

docomoが提供する雑談対話APIとは

雑談対話APIは、ユーザの発話テキストを受け付け、その入力に対して自然な会話となる雑談を提供します。

データの流れ

https://line.f-logic.jp/img/BOT_docomo.jpg

導入の流れ

  1. docomoAPI利用申請
    雑談対話API申請
    API key取得
  2. callback.phpを編集する
    1. docomoAPIへユーザーメッセージを渡す
    2. docomoAPIからレスポンス（雑談の返答）を受け取る
    3. 2をLINE APIに渡す

コードにいれる

  1. 以下のコードを使う
  2. コードの解説（ざっくりどの部分でなにをしてるか）
  3. GETした返答をユーザに返したい。いままでのコードでどこで返してた？
/*docomoAPIからデータ取得する*/
function chat($text) {
  // docomo chatAPI
  $api_key = 'xxxxxxxxxxxxxxxx';
  $api_url = sprintf('https://api.apigw.smt.docomo.ne.jp/dialogue/v1/dialogue?APIKEY=%s', $api_key);
  $req_body = array(
    'utt' => $text,
    't'=> 20,
    );
  $headers = array(
      'Content-Type: application/json; charset=UTF-8',
  );
  $options = array(
      'http'=>array(
          'method'  => 'POST',
          'header'  => implode("\r\n", $headers),
          'content' => json_encode($req_body),
          )
      );
  $stream = stream_context_create($options);
  $res = json_decode(file_get_contents($api_url, false, $stream));
  return $res;
}