Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブfacebook

2018年4月6日 By KD コメントを書く

FacebookログインをExpressとPassportでサクッと実装する方法

FacebookログインをExpressとPassportでサクッと実装する方法

ソーシャルログインの実装はスタートアップ起業にとっては無くてはならないログイン実装の代替となっています。今回はFacebookログインのAPIを、NodeJSでの一般的な実装方法である、ExpressとPassportを使った実装方法をご紹介します。

はじめに

以前の記事でFacebookログインを確認する簡単なAPIを作りました。簡単なテストとしてはそれで十分なのですが、今回はもう一歩踏み込んで、ExpressとPassportを使って、実際に使えるAPIをサクッと実装する方法をご紹介します。

FacebookログインのJavascriptのSDKをサクッと試す方法

Facebookログインを実装しよう

前提

以下がインストールされている前提で進めます。

  • NodeJS
  • Yarn
  • Docker
  • Robo 3T (任意)

細かいバージョンは「環境」を参照して下さい。

Facebook For Developersでアプリの登録

以前作成した「sample app」を使います。

今回はローカルホストで実行できるように以下の設定をします。

  • アプリドメイン : localhost

13b47f02b0afa6772e34246ac9dd946c

リダイレクト先のURLを設定します。

  • 有効なOAuthリダイレクトURL : http://localhost:3000/auth/facebook/callback

スクリーンショット 2018 02 25 23 42 43

環境の作成

今回用のフォルダとファイルを作って、必要なパッケージをインストールします。

$ mkdir facebook-project
$ cd facebook-project
$ yarn init -y
$ yarn add express cookie-session mongoose passport passport-facebook 
$ mkdir models
$ touch models/user.js
$ touch server.js

MongoDBをDockerイメージで作成

ローカルにMongoDBがインストールされている人はそれでも良いですが、インストールしていない人はこのためだけに環境を構築するのは面倒だと思いますので、Dockerイメージを使いましょう。

$ docker container run -d --rm --name mongo-docker -p 27018:27017 mongo:3.6.2
$ docker container ls
CONTAINER ID        IMAGE               COMMAND                  CREATED                  STATUS              PORTS                      NAMES
447858ed0598        mongo:3.6.2         "docker-entrypoint.s…"   Less than a second ago   Up 15 seconds       0.0.0.0:27018->27017/tcp   mongo-docker
$ docker exec -it mongo-docker mongo --version
MongoDB shell version v3.6.2
git version: 489d177dbd0f0420a8ca04d39fd78d0a2c539420
OpenSSL version: OpenSSL 1.0.1t  3 May 2016
allocator: tcmalloc
modules: none
build environment:
    distmod: debian81
    distarch: x86_64
    target_arch: x86_64

「–rm」オプションを指定しているので、停止するとコンテナは削除されます。ゴミが残らないのでテストにはもってこいです。

「user.js」の実装

const mongoose = require('mongoose');
const { Schema } = mongoose;

const userSchema = new Schema({
  displayName: String,
  facebookId: String
});

const User = mongoose.model('users', userSchema);

module.exports = User;

「server.js」の実装

ソースコードは以下になります。

const express = require('express');
const mongoose = require('mongoose');
const cookieSession = require('cookie-session');
const passport = require('passport');

const PORT = process.env.PORT || 3000;
const FACEBOOK_APP_ID = '{your-app-id}';
const FACEBOOK_APP_SECRET = '{your-app-secret}';
const MONGO_URL = 'mongodb://localhost:27018/test-db';

const FacebookStrategy = require('passport-facebook').Strategy;
const User = require('./models/user');

passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  User.findById(id).then(user => {
    done(null, user);
  });
});

passport.use(
  new FacebookStrategy(
    {
      clientID: FACEBOOK_APP_ID,
      clientSecret: FACEBOOK_APP_SECRET,
      callbackURL: '/auth/facebook/callback'
    },
    (accessToken, refreshToken, profile, done) => {
      if (!profile) {
        return done(null, false);
      }

      User.findOne({ facebookId: profile.id })
        .then(existingUser => {
          if (existingUser) {
            done(null, existingUser);
          } else {
            new User({
              displayName: profile.displayName,
              facebookId: profile.id
            })
              .save()
              .then(user => done(null, user));
          }
        })
        .catch(err => done(err, null));
    }
  )
);

mongoose.connect(MONGO_URL);

const app = express();

app.use(
  cookieSession({
    maxAge: 30 * 24 * 60 * 60 * 1000,
    keys: ['facebook-auth']
  })
);
app.use(passport.initialize());
app.use(passport.session());

app.get(
  '/auth/facebook',
  passport.authenticate('facebook', {
    scope: ['public_profile']
  })
);

app.get(
  '/auth/facebook/callback',
  passport.authenticate('facebook'),
  (req, res) => {
    res.send({ message: 'The user is logging in' });
  }
);

app.get('/api/logout', (req, res) => {
  req.logout();
  res.send({ message: 'The user logged out' });
});

app.get('/api/user', (req, res) => {
  res.send(req.user);
});

app.listen(PORT, () => {
  console.log(`Server is starting on ${PORT}...`);
});

「{your-app-id}」と「{your-app-secret}」には自分のIDとシークレットの値を入れて下さい。データベースのURLは「mongodb://localhost:27018/test-db」にしています。Dockerコンテナ作成時に設定したポート27018ですね。

リソースのアクセス許可の範囲

Facebookのリソースにはアクセス許可の権限が細かく決められています。その設定は「passport.authenticate」の「scope」で行っています。

今回はデフォルトである「public_profile」を設定しています。利用者の公開プロフィールの一部のアイテムを取得できます。

詳しいアクセス許可に関しては公式サイトを確認して下さい。

動作確認

サーバーの起動

それでは、作成した「server.js」を起動しましょう。

$ node server.js
Server is starting on 3000...

ログインの確認

ブラウザを開き、「http://localhost:3000/auth/facebook」にアクセスしましょう。

スクリーンショット 2018 02 26 0 06 58

ログインできました!

データベースの値の確認

次に、Robo 3TからMongoDBに接続します。

スクリーンショット 2018 02 26 0 04 13

スクリーンショット 2018 02 26 0 04 33

「test-db」にユーザ情報が登録されています。

スクリーンショット 2018 02 26 0 09 03

ユーザ情報の取得

「http://localhost:3000/api/user」にアクセスしてみましょう。

スクリーンショット 2018 02 26 0 24 57

データベースに登録されていたユーザ情報と同じ情報が表示されています。

ログアウトの確認

最後に、「http://localhost:3000/api/logout」にアクセスしてみましょう。

スクリーンショット 2018 02 26 0 25 22

ログアウトされました!「http://localhost:3000/api/user」にアクセスしてもユーザ情報は取得できません。

最後に

いかがでしたか?FacebookログインのAPIはPassportを使うことでいとも簡単に実装できます。まさにサクッとです。この簡単なログイン実装を使わない手はありません。何かサービスを作る時にソーシャルログインとして導入してみてはいかがですか?

環境

  • PC : macOS High Sierra 10.13.3
  • Robo 3T : 1.1.1
  • NodeJS : v9.5.0
  • Yarn : 1.3.2
  • express : 4.16.2,
  • cookie-session : 2.0.0-beta.3,
  • mongoose : 5.0.7
  • passport : 0.4.0
  • passport-facebook : 2.1.1
  • Docker : 17.12.0-ce
  • MongoのDockerイメージ : 3.6.2

カテゴリ : 技術 Tips & Tutorials タグ : auth, facebook, login, nodejs

2018年3月30日 By KD コメントを書く

FacebookログインのJavascriptのSDKをサクッと試す方法

FacebookログインのJavascriptのSDKをサクッと試す方法

最近ではスタートアップ企業がログイン機能を付ける場合、名前とメールアドレスを利用した通常のログインを実装するのではなく、ソーシャルログインを実装するのが一般的になっています。これはログイン機能が本質的に価値を提供しないにもかかわらず、必ずサービスには必須なので低コストで実装したいという企業側と、新しいサービスを利用するたびに新しいアカウントを作りたくないというユーザ側の双方にメリットがあるからです。今回はソーシャルログインの中でも最も人気のあるFacebookログインを実装する前段階として、JavascriptのSDKを試す方法を紹介します。

ソーシャルログインとは?

ソーシャルログインとは、Facebook、Google、Twitter、LINEなどのSNSをすでに使用しているユーザが、新しいサービスを利用する時に新しくアカウントを作らずに、元々持っていたSNSアカウントを利用してログインを実現する仕組みです。

スタートアップ企業はログイン機能を自前で実装せずにソーシャルログインを実装することが多いです。Instagramが良い例です。

Facebookログインとは?

Facebookが提供しているソーシャルログインの仕組みです。ユーザはFacebookアカウントさえ持っていれば、別のサービス用に新しいアカウントを作ること無く、そのサービスにログインできます。今回はこの機能を実装します。

FacebookログインのJavascriptのSDKを軽く実装してみよう

まず、前提としてFacebookアカウントは持っているものとして進めます。持っていない人はいないと思いますし、実名でFacebookログインを実装したところでFacebookの人にしかばれないので大丈夫です。

Facebook For Developersでアプリを登録する

それでは、Facebook For Developersのサイトに行き、「ログイン」からFacebookアカウントでログインします。初めての場合は「スタート」ボタンに変わるので、クリックしましょう。

スクリーンショット 2018 02 21 13 33 04

FacebookログインはアプリケーションごとにIDを発行する形式になっているので、任意のアプリケーション名を決めて入力して下さい。今回は「sampleapp」として進めます。

ドメインを登録する

アプリ名を入力したら、以下のようにアプリのダッシュボードが表示されます。「設定 -> ベーシック」から「アプリドメイン」を入力して「変更を保存」をクリックして下さい。アプリドメインは後でも変えられるので、今回は「sampleapp.com」とします。この時にアプリIDをメモしておいて下さい。後で使います。

スクリーンショット 2018 02 21 13 44 01

プラットフォームを選択する

次に、プラットフォームを選びます。「プラットフォームを追加」をクリックします。

スクリーンショット 2018 02 21 13 51 25

すると、プラットフォームを選択する画面が表示されます。今回は「ウェブサイト」を選択しましょう。

スクリーンショット 2018 02 21 13 51 50

「サイトURL」を入力して、「クイックスタート」をクリックします。サイトURLも後で変えられるので、今回は「http://sampleapp.com」としましょう。

スクリーンショット 2018 02 21 13 52 22

すると、以下のクイックスタートのページが表示されます。

スクリーンショット 2018 02 21 13 53 03

SDKを設定し、動作確認する

ここで、SDKの設定と動作確認をするためにはHTMLが必要なので、今回用のフォルダを作って簡単なHTMLを作成します。今回はNPMのパッケージを利用するためのYarnを使います。

$ mkdir facebook-login
$ cd facebook-login
$ yarn init -y
$ yarn add static-server --dev
$ vi package.json 
...
  "scripts": {
     "start": "node server.js"
     "static": "static-server -i public/index_test.html -p 3000"
  },
...
$ mkdir public
$ touch public/index.html

クイックスタートの画面を見ていくと、最初に「Facebook SDK for Javascriptの設定」が表示されています。このコードをまるっとコピーして、「index.html」のbodyタグのすぐ下に設定します。

スクリーンショット 2018 02 21 13 53 31

次に、動作確認用のボタンのコードがあるので、これもまるっとコピーして、「index.html」の適当な場所に設定します。

スクリーンショット 2018 02 21 13 54 59

そうすると、「index.html」の中身は、以下のようになります。「{your-app-id}」は自分のアプリIDに置き換えて下さい。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Hello Facebook Auth!</title>
</head>

<body>
  <script>
    window.fbAsyncInit = function () {
      FB.init({
        appId: '{your-app-id}',
        xfbml: true,
        version: 'v2.12'
      });
      FB.AppEvents.logPageView();
    };

    (function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) { return; }
      js = d.createElement(s); js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>

  <h1>Hello Facebook Auth!</h1>
  <div>
    <div class="fb-like" data-share="true" data-width="450" data-show-faces="true">
    </div>
  </div>

</body>

</html>

では、Yarnを使って静的サーバ上で「index.html」を起動します。

$ yarn static
...
* Static server successfully started.
* Serving files at: http://localhost:3000
* Press Ctrl+C to shutdown.

ブラウザから「http://localhost:3000」にアクセスして、以下の画面が表示されればSDKとの連携は完了です。

スクリーンショット 2018 02 21 0 48 29

Facebookログインボタンを実装する

Facebookが提供しているウィジェットはいくつかあるのですが、今回はもちろん「ログイン」を選びます。

スクリーンショット 2018 02 21 13 55 31

すると、いろいろなサンプルのある画面が表示されるのですが、今回は下の方にある「詳細なコードサンプル」のソースコードをそのまま使うことにします。全部まるっとコピーして、「index.html」を上書きして下さい。この時に「{your-app-id}」の部分を自分のアプリIDに置き換えて下さい。

スクリーンショット 2018 02 21 13 55 48

これだけで実装は完了なのですが、Facebookログインは最初の設定画面で設定したドメインからしか利用できないため、このままだとローカルで動作確認ができません。そこで、hostsファイルを変更することで対応します。

$ sudo vi /private/etc/hosts
...
127.0.0.1   sampleapp.com
...

これでローカルでもFacebookログインの動作確認ができるようになりました。

それでは確認していきましょう。

先ほどと同じように静的サーバを起動します。

$ yarn static

ブラウザから「http://sampleapp.com:3000」にアクセスします。すると、以下のようにログインボタンが表示されます。ログインボタンをクリックしてみましょう。

スクリーンショット 2018 02 21 15 10 00

いつものFacebookログインの画面が表示されるので、ログインをクリックします。

スクリーンショット 2018 02 21 15 10 33

以下が表示されれば成功です!

スクリーンショット 2018 02 21 15 10 52

ここまでで、もしうまくいかない場合は、ドメイン名を確認してみて下さい。Facebookのデベロパーページのアプリに設定したドメイン名と、hostsファイルのドメイン名が完全に一致している必要があります。加えて、ソースコード上のアプリIDも正しい値が設定されている必要があります。

NodeJSでログイン状態を確認するAPIをスクラッチで実装しよう

Facebookログインの実装が完了したところで、今度はNodeJSでFacebookのAPIを利用して、ユーザのログイン状態を確認していきましょう。

アプリケーションの準備

まずはフォルダやファイルを作り、必要なパッケージをインストールしましょう。

$ yarn add express request
$ touch server.js
$ mkdir helpers
$ touch helpers/facebook_auth.js
$ tree -L 2 -I node_modules
.
├── helpers
│   └── facebook_auth.js
├── package.json
├── public
│   └── index.html
├── server.js
└── yarn.lock

Facebookのログイン状態確認用機能を実装する

Facebookのログイン状態の確認にはFacebookのGpaph APIを利用します。APIドキュメントを確認すると「https://graph.facebook.com/me」にアクセストークンを用いてアクセスすればユーザIDとユーザ名を取得できます。ログインされている状態ではアクセストークンが有効なので、アクセストークンを利用してユーザIDとユーザ名が取得できれば、ログインしていることが判断できます。

「facebook_auth.js」は以下の実装になります。

const request = require('request');
const FACEBOOK_GRAPH_URL = 'https://graph.facebook.com/me?access_token=';

verifyToken = (userId, accessToken) => {
  return new Promise((resolve, reject) => {
    request.get(FACEBOOK_GRAPH_URL + accessToken, (err, res) => {
      if (err) return reject(err);

      const id = JSON.parse(res.body).id;
      if (id === userId) {
        resolve(true);
      } else {
        resolve(false);
      }
    });
  });
};

module.exports = { verifyToken };

単にGraph APIのレスポンスにユーザIDが含まれているかを確認しているだけのシンプルなコードです。

Expressでサーバーを実装する

「server.js」はExpressを使って以下のように実装します。

const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

const facebookAuth = require('./helpers/facebook_auth');

app.use(express.static('./public'));

app.get('/api/auth', (req, res) => {
  const userId = req.query.userId;
  const accessToken = req.query.accessToken;

  if (!userId) {
    return res.status(400).send('User ID NOT provided');
  }
  if (!accessToken) {
    return res.status(400).send('Access token NOT provided');
  }

  facebookAuth
    .verifyToken(userId, accessToken)
    .then(isValid => {
      if (isValid) {
        res.status(200).json({ message: 'The user is logging in' });
      } else {
        res.status(401).json({ message: 'The user is NOT logging in' });
      }
    })
    .catch(err => {
      res.status(500).send(err);
    });
});

app.listen(port, () => {
  console.log(`Server is starting on ${port}...`);
});

「/api/auth」にGETされた時にユーザIDとアクセストークンをリクエストから受け取る仕組みです。より実践的にはクッキーを使うと良いでしょう。

ログイン状態を確認する

やっとここまできました。それでは、Yarnからサーバーを起動してログイン状態を確認しましょう。

$ yarn start
...
Server is starting on 3000...

ブラウザから「http://sampleapp.com」にアクセスし、「Option+Command+I」でブラウザのコンソールを開きます。ログインしていれば「userID」と「accessToken」が確認できますので、メモします。

スクリーンショット 2018 02 21 16 09 18

後は、ブラウザもしくはコマンドラインから「http://sampleapp.com/api/auth」にアクセスしてログインされているか確認できれば完了です。

今回はコマンドラインから確認してみましょう。もちろん「{userID}」と「{accessToken}」は先程メモした値に置き換えて下さい。

$ curl "http://sampleapp.com:3000/api/auth?userId={userID}&accessToken={accessToken}" | jq
...
{
  "message": "The user is logging in"
}

ログインされていると返ってきています!

これで簡単ではありますが、NodeJSで作った自作APIでログイン状態を確認することができました。

おまけ

Facebookログインのテストはローカルホストでもできる

今回はドメインを「sampleapp.com」として進めましたが、実は「localhost」のままでもテストできます。

スクリーンショット 2018 02 22 21 58 56

実際のAPI実装にはPassportを使う

今回は簡単に動作確認をするAPIをスクラッチで作りましたが、一般的にはPassportのライブラリを使って実装し、コールバックURLでログイン後の画面に飛ばします。気になる方はPassportのサイトを見てみて下さい。

参考ですが、Passportでの実装時にコールバックURLの設定を忘れた場合に「URLを読み込めません: このURLのドメインはアプリのドメインに含まれていません。このURLを読み込むには、アプリ設定のアプリドメインにすべてのドメインとサブドメインを追加してください。」というエラーが出ます。というか、やりがちです。その場合は、以下のように「有効なOAuthコールバックURL」(画像の設定値は例です)を設定すればOKです。

スクリーンショット 2018 02 22 22 02 12

最後に

いかがでしたか?FacebookログインはSDKを使えば実装は簡単ですよね。あまりにもサクッと実装できてしまうので、サービスがヒットしてログイン機能を自前で実装する必要が出てきたら嫌になるほどです。今後何かサービスを立ち上げる時はFacebookログインなどのソーシャルログインを試してみて下さい。次回は、ExpressとPassportを使ってもう少し踏み込んだ実装を紹介します。

環境

  • PC : macOS High Sierra 10.13.3
  • NodeJS : v9.5.0
  • Yarn : 1.3.2
  • static-server : 3.0.0
  • express : 4.16.2
  • request : 2.83.0

カテゴリ : 技術 Tips & Tutorials タグ : auth, facebook, nodejs

2018年2月5日 By KD コメントを書く

ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門

ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門

AIの流行りと共に人気が出ているChatbotですが、最近ではサービスを使って簡単に作れるようになりました。今回はChatbotサービスであるChatfuelを紹介します。

Chatfuelとは?

ChatfuelはFacebookメッセンジャーを使ったChatbotを簡単に作れるサービスです。Chatbotは、人とコンピュータがインタラクティブに会話するプログラムのことですね。

Chatbotの始まりは1966年のELIZAと言われており、その後にIBMのWatson、MicrosoftのTay(問題発言で24時間で停止したのは有名な話)などが発表されてきました。最近では、iPhoneのSiriやGoogleのOk GoogleもChatbotです。チャットと言うより音声認識ですけどね。

また、少し古い記事ですが、BUSINESS INSIDERの「Messaging apps are now bigger than social networks」という記事によれば、SNSアプリよりChatアプリの方がアクティブユーザが多いそうです。私の場合はSNSは時間の無駄なのでほとんど見ていませんが、Chatアプリは毎日見ていますので、感覚的にも合っています。Chatbotが流行っているのは当然というわけです。

Chatfuelの始め方

それでは、ChatfuelでChatbotを作っていきましょう。

Facebookのアクセスを許可する

Chatfuelのサイトに行き、GET STARTED FOR FREEをクリックして下さい。

スクリーンショット 2018 01 21 0 10 00

すると、Facebookのアクセス確認の画面になりますので、「許可」をして下さい。

Facebookのページを作る

次に、Facebookのページを作るように促されるので、それに従って進みます。

スクリーンショット 2018 01 20 17 35 20

Facebookページはどれを作っても構いません。

スクリーンショット 2018 01 20 17 36 15

今回は「慈善活動またはコミュニティ」のページを作成します。

スクリーンショット 2018 01 20 18 28 58

ページ名は任意でOKです。「スタート」をクリックしたらページ作成は完了です。

ChatfuelとFacebookページを接続する

後は、「CONNECT TO PAGE」をクリックして、先程作ったFacebookページをChatfuelに接続します。

スクリーンショット 2018 01 20 18 30 02

接続が完了すると、作ったBotのページが表示されます。

スクリーンショット 2018 01 20 18 30 27

自動メッセージを設定する

次に、ユーザの入力に応じて返答するメッセージを設定していきましょう。

最初の挨拶とデフォルトの返答を設定する

右のメニューの「Automate」を選択します。

スクリーンショット 2018 01 20 22 39 09

「Welcome messege」を選びます。

スクリーンショット 2018 01 20 22 36 59

今回は以下のようにメッセージを設定してみました。SuperBotManとは我ながらセンスのない名前を付けてしまいましたが、このメッセージはこのBotが最初に表示するメッセージです。

スクリーンショット 2018 01 20 22 37 59

次に、「Default answer」を選びます。

スクリーンショット 2018 01 20 22 37 16

今回は以下のようにメッセージを設定しました。このメッセージは、ユーザの入力した内容に対して返答が用意されていない場合に、全て使われます。iPhoneのSiriがたまに言う「すみません、何とおっしゃったのかわかりません。」と同じです。

スクリーンショット 2018 01 20 22 38 47

自動の返答を設定する

それでは、ユーザの入力に合わせて返答していくルールを作っていきましょう。右のメニューの「Set UP AI」を選択します。

スクリーンショット 2018 01 20 22 39 24

今回は、デフォルトのグループを使い、日本語での会話にします。右上の言語を「Japnanese」にして下さい。

スクリーンショット 2018 01 20 22 44 10

「ADD AI RULE」でルールを設定していきます。右の「RANDOM」にチェックを入れると、返答のメッセージをランダムで表示することができます。

スクリーンショット 2018 01 20 22 43 47

この調子でいくつか返答を設定してみましょう。

スクリーンショット 2018 01 20 22 48 12

Facebookメッセンジャーで試す

オリジナルのBotができたので、Facebookメッセンジャーを使ってChatbotとして機能しているか確認していきましょう。

右上の「TEST THIS CHATBOT」をクリックします。

スクリーンショット 2018 01 20 23 16 15

すると、以下のようにFacebookログインの画面が出るのでログインします。

スクリーンショット 2018 01 20 23 16 27

その後で、先程の「TEST THIS CHATBOT」のボタンが「VIEW ON MESSANGER.COM」に変わっているので、クリックします。

スクリーンショット 2018 01 20 23 16 59

今度はFacebookメッセンジャーへのログイン画面が出るので、ログインします。

スクリーンショット 2018 01 20 23 17 09

これで、FacebookメッセンジャーのオリジナルBotのページが表示されます。試しに、メッセージを入力してみましょう。

スクリーンショット 2018 01 20 23 19 04

最初のランダムの挨拶で「お疲れ様です」が出てしまったので、少し変な会話になっていますが、想定通りの返答が返ってきていますね。

また、自分のFacebookページの右下にもMyBotのメッセンジャーが表示されていますので、通常のFacebookメッセンジャーと同じように入力できます。

スクリーンショット 2018 01 20 23 20 10

いろいろ設定を加えていけば、SiriのようなChatbotができそうですね。

最後に

いかかでしたか?自分のオリジナルのChatbotを作るのは面白いですし、開発面ではChatOpsに応用することが可能です。ではまた。

カテゴリ : 技術 Tips & Tutorials タグ : chatbot, facebook

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • Go言語のためのVisual Studio Codeの設定方法
    Go言語のためのVisual Studio Codeの設定方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes