読者です 読者をやめる 読者になる 読者になる

とある技術の開発日記

Diary of irregular phrase programmer

Build 2016で発表された、Micorosft Bot Frameworkが楽しそうだったので少し動かしてみた

.NET ASP.NET C# Microsoft

日本時間の昨夜からBuild 2016が開催されました。

Keynoteの様子や全体のまとめはぶちざっきを見ると良いかと思います。

//build/ 2016 Day 1 Keynote | ブチザッキ

//build/ 2016 Day 1 で発表されたリンクあれこれ | ブチザッキ

色々な発表があったのですが、この中で私が注目したのは「Microsoft Bot Framework

ChatOpsという言葉もありますが、最近はSkypeやSlackなどチャットツールの利用頻度が圧倒的に高くなっていますし、Hubotを利用してSlackのBotを作成している方も少なからず居ると思います。

今回発表されたMicrosoft Bot FrameworkではC#やNode.jsを利用して簡単にBotを作成する事ができます。かつ、作成したBotは登録する事で他のWebサービスと簡単に連携する事ができます。

サンプルを少し触ってみたのでご紹介します。詳細な説明は他の方がやってくれることでしょう・・・。

docs.botframework.com

GitHubにサンプルコードもあるので眺めてみるとBot周りのASP.NET WebAPIクラスが増えているのが確認できます。

github.com

ソリューション構成

ASP.NET WebAPIで開発したことある方ならお馴染みのソリューション構成です。 f:id:airish9:20160331094057p:plain

コントローラーの中身はこんな感じ。

using System;
using System.Linq;
using System.Threading.Tasks;
using System.Web.Http;

using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Connector;
using Microsoft.Bot.Connector.Utilities;

namespace Microsoft.Bot.Sample.EchoBot
{
    [BotAuthentication]
    public class MessagesController : ApiController
    {
        /// <summary>
        /// POST: api/Messages
        /// receive a message from a user and reply to it
        /// </summary>
        public async Task<Message> Post([FromBody]Message message)
        {
            return await Conversation.SendAsync(message, () => new EchoDialog());
        }
    }
}

Microsoft.Botの名前空間にBot周りのクラスが定義されています。 BotAuthentication属性やMessageクラス、Microsoft.Bot.Builder.Dialogs.IDialogを実装しているクラス(ここではEchoDialog

Botの主な動作はMicrosoft.Bot.Builder.Dialogs.IDialogStartAsyncを実装してIDialogContext.Wait(ResumeAfter<Message> resume)を呼び出すことで動作します。

ResumeAfterはジェネリクスで指定されている型の引数とIDialogContextのデリゲートです。

public delegate Task ResumeAfter<in T>(IDialogContext context, IAwaitable<T> result);

サンプルソースを参考にして実装するとこんな感じです

        public async Task StartAsync(IDialogContext context)
        {
            context.Wait(MessageReceivedAsync);
        }

        public async Task MessageReceivedAsync(IDialogContext context, IAwaitable<Message> argument)
        {
            var message = await argument;

            // << ここで入力された内容を処理する >>

            // メッセージを返却する
            await context.PostAsync(string.Format("入力したメッセージは {0} ねっ?", message.Text));

            // 入力待ち状態で入力を受け付ける
            context.Wait(MessageReceivedAsync);

        }

デバック方法

BotのEmulatorツールが公開されています。

docs.botframework.com

作成したWeb APIをビルド&デバック状態にしてEmulatorからBotと会話する事が出来ます。(単純に指定したエンドポイントにPOSTリクエストを投げているだけっぽい?)

f:id:airish9:20160331101641p:plain

公開&連携

今回は以下のページを参考にしてAzure WebAppで作ったAPIをホストして、Bot FrameworkのページからBotの登録を行いました。

docs.botframework.com

登録するとAPIIDとKeyが発行されるのでWeb.configを書き換えましょう。

<?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=301879
  -->
<configuration>
  <appSettings>
    <!-- update these with your appid and one of your appsecret keys-->
    <add key="AppId" value="hanayobot" />
    <add key="AppSecret" value="YourAppSecret" />
  </appSettings>

後は管理画面右側の連携したいサービスからADDすれば追加できます。Web Hook対応のサービスからなら登録できるはずなのでBotライフを楽しみましょう

f:id:airish9:20160331104915p:plain

うまくできなかった事

  • 管理画面の「Test connection to your bot」で会話できるはずなのですが、sendボタンを押しても無反応だった・・・
  • Web Chatで作成されたタグを仕込んでもbotが無反応だった。

認証系っぽい…。

GitHub PagesでFacebookとはてなブログ向けにOGP画像を設定した

HTML

発端

福岡のコミュニティであるFukuoka.NET(ふくてん)のサイトはGitHub Pagesで管理しているのですが、作成したままだとOGPタグがないのでSNSでリンクを貼りつけても寂しい感じになっていたのでOGPタグを張り付けて対策しました。

OGP(Open Graph Protocol)とは

普段からFacebookとかはてなブログでURLを参照すると、画像や概要などが表示されますよね?
具体的にはこんなやつです。

Facebook

f:id:airish9:20160328101855p:plain

はてなブログ

f:id:airish9:20160328101937p:plain

これ以外ではTwitter Cardとかもあります。

dev.twitter.com

これはサイトのmetaタグにOGPを設定していると表示されます。

OGPはFacebookで作成されていて、タグの詳細は以下のサイトを見れば確認できます。

The Open Graph protocol

やり方

まずはOGPタグを貼りつけないと始まらないのでページにOGPタグを設定します。
設定する際の詳細は以下のサイトを参考にしました。

OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ! | *Web Design 覚え書き*

ふくてんのサイトで張り付けているOGPはこんな感じ

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
  <<中略>>
  <meta property="og:site_name" content="Fukuoka.NET(ふくてん)">
  <meta property="og:locale" content="ja_JP">
  <meta property="og:title" content="Fukuoka.NET - ふくてん">
  <meta property="og:type" content="website">
  <meta property="og:url" content="http://fukuten.github.io/">
  <meta property="og:image" content="http://fukuten.github.io/img/ogp.jpg">
  <meta property="og:description" content="C#やVB.NETなどMicrosoftの.NETに関するコミュニティです。通称「ふくてん」。">
  <meta property="fb:app_id" content="246980395651503">
</head>

fb:app_idはイイネボタンをおかなかったりFacebookのインサイトを使わない場合は設定しなくていいです。

画像のサイズにハマった…

og:imageで画像を指定しますがサイズの指定でハマりました…。
Facebookの推奨サイズは「1200 x 630」です。推奨の最低サイズは「600 x 315」。最小サイズは「200 x 200」となっています。

詳細はFacebookのドキュメントを確認してください

Best Practices - Sharing - Documentation - Facebook for Developers

推奨サイズに従って「1200 x 630」を設定するとはてなブログで表示する際に正方形にトリミングされるので崩れます。
今回は勉強会用のページなのでコミュニティロゴが切り取られてしまうので困りました。

f:id:airish9:20160328110322p:plain

Facebookでの表示を確認するには確認用のサイトもあるので利用してみると良いかと思います。

ogimage.tsmallfield.com

この問題を解決するには「200 x 200」の最小サイズを貼っておくとFacebookとはてなブログで崩れずに表示されます。

Facebook

f:id:airish9:20160328110538p:plain

はてなブログ

f:id:airish9:20160328110554p:plain

画像を間違えた場合はFacebookにはキャッシュが残るのでDebugページからOGPのキャッシュを更新してください。

https://developers.facebook.com/tools/debug/

はてなブログの方はcdn.image.st-hatena.comドメインのCDNに保存されるのでしばらく待てば変更されます。

離職してから1年経って思った事

雑記 転職

f:id:airish9:20160327004640j:plain:w550

もう、そろそろ春ですねぇ。

桜も咲き始める季節になると、就職・転職・退職のニュースが飛び込んでくるのですが、私も前職を離職して1年経ちました。

2015年3月22日に退職エントリを書いていたのですでに1年と5日になりますw

blog.hamamotsu.jp

これから退職する人、もしくは今年の新社会人の人に少しでも参考になればと思うけどならんやろうなぁ。。。

退職してどうなった?

結局、地元の会社に就職しましたw
その時のエントリはこちら

blog.hamamotsu.jp

一人でのんびり仕事するのは自由ですが、新しい技術を使おうとしている案件に入ろうと思うと個人だと限界があると思います。
中にはスペシャルな個人の方もいると思うので例外はありますが、一般的には個人の限界はあるのかなと思います。

この辺りは各自が求める仕事の仕方が違うのでどちらにすべきだとかは無いですね。

就職してどうだった?

おかげ様で充実した1年になりましたし、無事に2016年の春を迎える事ができました!

現在の社内メンバーは4人と少数精鋭ですが、クライアントさんにも恵まれており、社内で色々と挑戦させてもらっててとても満足です。

今まで学びたい事を自分の余暇の時間を使っていたのですが、実際に仕事の中でやりたいことをできるのは凄く嬉しいですしありがたいです。
何よりも学習する時の密度が違いますし実践で使うので深く学ぶ事ができます。(ただし苦労も多いし責任もある)

転職と直接は関係ありませんが、MicrosoftのMVPを受賞する事もできました。今までは見る側の立場だったのがみられる側の立場にもなりつつあるようです。

これから

今年は学びの年になるかなと思います。

最近、IT技術の進歩はとても早くて、追いかけるのも一苦労なのですが学び続けていかねばと思ってます。

今年から福岡で.NET系のコミュニティも主催しているので、こういったコミュニティの場を上手く使って、学びたい者同士でスキルアップしていけるといいですね。

fukuten.github.io

最後に

結局何事もなるようになるかと思います。人生一度きりなんですし自分の納得のいくように生きて行けば良いのではないでしょうか。(怪しい啓蒙Blogみたいになってしまった…)