Azureの小ネタ (改)

~Azureネタを中心に、色々とその他の技術的なことなどを~

自分的な最近のNode事情

分裂したり再統合したり、Nodeの情報が古くなっていたため色々と備忘録

最新

現時点で最新は二つ。

  • 8.1.3
  • 6.11.0 LTS

https://nodejs.org/ja/ から入手可能

環境切り替え

Windows版は以下から取得可能は、https://github.com/coreybutler/nvm-windows から入手可能

> nvm list

  * 8.1.3 (Currently using 64-bit executable)
    6.9.4

WebStorm

良いプログラムは、良い開発環境からということで、WebStorm が 2017になってました。

https://blog.jetbrains.com/webstorm/tag/webstorm-2017-1/

VS CODEで環境を作るのもありですが、ちゃんと特化のIDEになっているので、(有償ですけど)楽チンです。

言語仕様

いろいろ新しくなってました。サポート状況は、以下で確認できます。

気になるところは、

アロー関数

くそみたいなfunctionかかなくて済むし、thisの縛りがなくなるのが良い感じ。

'use strict'
class Sample {
    constructor() {
        this.hoge = 'hoge';
    }

    usefunc() {
        setTimeout(function() {
            console.log(this.hoge);
        }, 10);
    }

    usearrow() {
        setTimeout(() => {
            console.log(this.hoge);
        }, 10)
    }
}

var s = new Sample();

s.usefunc();  // undefined
s.usearrow(); // hoge

クラス

上で書いたけど、クラスが書ける。従来の書き方のシンタックスシュガーぽいですけど便利。

Promise

非同期(非道期)を使いやすくするためのもの。

setTimeout(()=> {
    console.log('おまえの');
}, 1000)
setTimeout(()=> {
    console.log('かあちゃん');
}, 100)
setTimeout(()=> {
    console.log('でべそ');
}, 10)

でべそ
かあちゃん
おまえの

となるところを同期してくれて、

Promise.resolve()
.then(() => new Promise((resolve, reject) => {
    setTimeout(()=> {
        console.log('おまえの');
        resolve();
    }, 1000)
}))
.then(() => new Promise((resolve, reject) => {
    setTimeout(()=> {
        console.log('かあちゃん');
        resolve();
    }, 100)
}))
.then(() => new Promise((resolve, reject) => {
    setTimeout(()=> {
        console.log('でべそ');
        resolve();
    }, 10)
}));

おまえの
かあちゃん
でべそ

になる。resolve で次へ、rejectで例外ハンドリングできる。お約束を覚えればかったるいけど、ネスト地獄からは脱出できる気もする。他のも多数便利な機能あり。

async/await

追加されるとは聞いていたけど、追加されてた。結局のところこれもPromiseのシンタックスシュガー的な感じ?

'use strict'

function timeout(ms, text) {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(text);
            resolve();
        }, ms);
    });
}

async function main() {
    await timeout(1000, 'おまえの');
    await timeout(100, 'かあちゃん');
    await timeout(10, 'でべそ');
}

main();

当然、await とると待ってくれない。

これでブラウザ側も色々追従してくれるとうれしい感じになるのだろうか。

Bot Framework の Dialog で画像を表示させる

Bot Frameworkのチラ裏メモ。Dialog 中に画像を返したかったので、調べたメモ。

画像そのものじゃなくて、Card(という名のよくあるUI部品)を使えば返せるっぽい。

docs.microsoft.com

説明は端折りますが、いくつかカードの種類があります。

HeroCardとかを使うと

A card that typically contains a single large image, one or more buttons, and text.

なので、画像を返せる感。

Bot Emulator で実行すると、以下。 f:id:StateMachine:20170609184941p:plain

下記のようなコードで実現できた。

 var message = context.MakeMessage();
            message.Text = "Hello!";
            message.Locale = "ja";
            message.Attachments.Add(
                new HeroCard
                {
                    Title = $"ライオン",
                    Images = new List<CardImage>
                    {
                        new CardImage
                        {
                            Url = "http://free-photos-ls04.gatag.net/thum01/gf01a201503290600.jpg"
                        }
                    },
                }.ToAttachment());

            await context.PostAsync(message); 

埋め込みイメージの場合、Attachement を以下のようにすれば、大丈夫です。

                var imageData = Convert.ToBase64String(image.ToArray());

                return new Attachment
                {
                    Name = "small-image.png",
                    ContentType = "image/png",
                    ContentUrl = $"data:image/png;base64,{imageData}"
                };

以上