2016-06-06

HoloLensお触り会に参加してきました！

勉強会

福岡でHoloLensをお触りする機会がありましたので参加してきました！

hololens.connpass.com

全体のながれ

HoloLensの簡単な操作説明
みんなでHoloLens体験

詳細なレビューは他の方がまとめているのでそちらを参考にされるとよろしいかと。

onoty3d.hatenablog.com

zuvuyalink.net

HoloLensをお触りしてみて

HoloLensをしっかり装着できないと快適に操作するのは難しい。
- 鼻パッドは欧米人とアジア人用の二種類あり
- 頭頂部のサポーターもあり
マウスの操作を頭で行うと思うと比較的に扱いやすかった
HoloLensが歩いた場所がMAP化されるのが凄すぎた（マジで未来を感じる）
今は2台のHoloLensでワールドを共有する機能は無い。
- アプリケーションで相互に座標を共有して開発しないと駄目らしい
- Unityには作りやすくする仕組みがあるらしい
ホログラムで遅延もないので３Ｄ酔いしない
マップとの一体感を楽しむようなアプリが向いてる、没入感を求めるならOculusなど、他の機器の方が良い

以下の動画はMicrosoftのデモ動画になりますが、ゲームやってると本当にこんな感じの体制になりますｗこの動画ではカメラに特殊な仕組みがしてあるのか、ワールドを共有しているように思えますね。

Holy Crap, This New Hololens Demo Is Freaking Crazy

写真はスタートメニューを出してプログラムを選ぶ際に操作に苦労している私。 2本指でしっかり「L字」を作らないと駄目とのこと。

f:id:airish9:20160606185408p:plain

お触りを終えて

最近はWebアプリばっかりでクライアントアプリを作る機会や触れる機会がなくなっているのですが、HoloLensを機会に少しフロント側もお触りしたくなりました。

次はHoloLensハッカソンとかあるといいですねぇ。

2016-03-31

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.IDialogのStartAsyncを実装して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が無反応だった。

認証系っぽい…。

2016-03-28

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>