crossframe » JavaScript

Bot Framework

admin11 — Sun, 12 Jun 2016 05:03:27 +0000

最近はやりのBot。マイクロソフトもちょっと前にフレームワークを出しましたが、このBotBuilderを使って、まずは標準入出力で簡単に動かせるものを作ってみました。
環境: node ver 4.4.5 / Windows 10

Nodeは下記からダウンロード

https://nodejs.org/en/download/

node-v4.4.5-x64.msi

インストール

npm init
npm install –save botbuilder
npm install –save restify

Botは入力に対して、何かを返すというのが基本ですが、予想していない入力に対しては’?'で返し、ユーザの名前が登録されていないときは名前を尋ね、以後その名前で語りかけるという仕組みをつくったつもりです。

var builder = require('botbuilder');

var dialog = new builder.CommandDialog();

dialog.matches(["Hi", "Hello"], function (session) {
  if (!session.userData.name) {
    session.beginDialog('/getname');
  }
  else{
    session.send("> Hello, " + session.userData.name + "!");
  }
});
dialog.matches("How are you", function (session) {
  session.send("> I'm fine.")
});
dialog.matches("bye", function(session){
  session.send("> See you.")
  session.endDialog();
});

dialog.onDefault(function (session) {
  if(session.userData.name != session.message.text){
    session.send("> " + session.message.text + "?");
  }
});

var bot = new builder.TextBot();
bot.add('/', dialog);
bot.add('/getname', [
  function(session) {
    builder.Prompts.text(session, "> What's your name?");
  },
  function(session, results) {
    session.userData.name = results.response;
    session.send('> Hi, ' + session.userData.name);
    //session.endDialog();
    session.beginDialog('/');
  }
]);

bot.listenStdin();

実行結果

/getnameセッションが終わると、/に戻るかと思いましたが、そうならないためまたセッションを再度開始しています。
まだ調査不足のところがありますが、とりあえずここまでメモしておきたいと思います。

参考:

http://qiita.com/o0h/items/1a51cd0bbd9c38027388

http://www.atmarkit.co.jp/ait/articles/1604/15/news032_3.html

Add-in / Office 2016

admin11 — Sun, 01 Nov 2015 12:29:31 +0000

以前、以下の記事でJavaScriptによるExcelのデータ読み書きのテストをしましたが、VisualStudioを使ったものでした。

「Apps for Office」../../../20131104603/

今回は、共有フォルダからアドインを読み込む方法でテストをしてみました。環境について下記を参照しました。

参考) 「Office 2016で進化したOffice アドイン」http://www.ka-net.org/blog/?p=6213

XMLファイル、JavaScriptプログラムは下記を参考にしました。

参考) https://github.com/OfficeDev/office-js-snippet-explorer

https://github.com/OfficeDev/office-js-snippet-explorer/tree/master/excel-snippets/setValueInRange.js

プグラムは、ボタンを押すとExcelのシートに値を書き込むシンプルなものです。

sample.xml



  6492a0e5-b158-47da-9145-6804c67ed8d9
  1.0
  Microsoft
  EN-US
  
  
  
    
  

  
    

  
  ReadWriteDocument

Idは、

Wscript.Echo LCase(Mid(CreateObject(“Scriptlet.TypeLib”).GUID, 2, 36))

で生成できます。
このファイルを共有フォルダに置きExcelから選択します。
共有フォルダは、Excelを使用するWindowsに、C:\Shareのように作成して、共有設定します。
ここをExcelオプション->セキュリティセンタ->信頼できるアドインカタログのアドレスに追加します。(「メニューに表示する」をチェック)
Excelを起動して、挿入->マイアドイン->共有フォルダで、アドインが現れクリックします。
すると上の画面が表示されます。シート右側に表示されたWeb画面のボタンを押すと、数値が表示されます。
画面ファイルは、xmlファイルに書かれたアクセス先であるWebサーバをどこかに立て、そこに下記ファイルを置きます。

sample.html











Excel Add-in Test

以前もこの件の記事を書いたときに思いましたが、JavaScriptとExcelという組み合わせは、とても可能性を秘めていると感じます。しかしまだ使いにくいと思います。もっと簡単に連携できるしくみが欲しいところです。シート上にWebViewが表示できればベストですが・・

Apps for Office

admin11 — Mon, 04 Nov 2013 12:14:50 +0000

VisualStudio 2013のプロジェクトテンプレートに、Office 2013用アプリというテンプレートがC#の下にあります。
これを以下のサイトを参考に、Apps for Officeをつくってみました。(Excel)

How to: Create your first task pane or content app by using Visual Studio

http://msdn.microsoft.com/library/office/fp142161%28v=office.15%29

その前に、これに取り組もうと思ったのは、なんとJavaScriptでExcelのCellを読み書きできてしまうからです。どのように使うものなのかということより、まずこれを試したかったからです。
(しかしいつもネーミングが汎用的でわかりづらいですね。(ストアアプリとかも)　日本語だとOfficeアプリ? Office Web Appsと似ている・・など、もう少し機能が明確化できる名前だといいのですが。)

Office用アプリの作成で、「Excelのコンテンツアプリ」を選びました。参考サイトとは違うのですが、作業ウィンドウという特別なところにおかれるのではなく、画像やグラフのように任意の場所に置きたかったからです。

環境 VisualStudio 2013, Office 2013 / Windows 8.1
Home.js

(function () {
    "use strict";
    Office.initialize = function (reason) {
        $(document).ready(function () {
            app.initialize();

            $('#btnWrite').click(writeText);
            $('#btnRead').click(readText);
        });
    };
    function writeText() {
        Office.context.document.setSelectedDataAsync($('#wtest').text(),
            function (asyncResult) {
                if (asyncResult.status === "failed") {
                    $('#result').text(asyncResult.error.message);
                }
            }
        )
    }
    function readText() {
        Office.context.document.getSelectedDataAsync("matrix",
            function (asyncResult) {
                if (asyncResult.status === "failed") {
                    $('#result').text(asyncResult.error.message);
                }
                else {
                    $('#rtest').text(asyncResult.value);
                }
            }
        );
    }
})();

Home.html





    
    
    
    

    
    

    
    
    

    
    


    Apps for Office Test
    
    
    123456789
    ---
    
    message :

デフォルトでjQueryサポートです。最近つかいまくってますね。またC#のプロジェクトなのにC#はどこにもでてきません。

初期画面

‘Write Text’をクリック(表示領域をあらかじめ選択してからも可。コードを変更して配列を書き込むことも可)
そして選択箇所そのままで’Read Text’をクリック

値を入力後、範囲を指定して’Read Text’をクリック

範囲を指定して’Write Text’をクリック

配列を書き込むようにしていないのでエラー

オフラインローカルのExcelファイルとしては使えないみたいですが(まだ調査不足ですが)、それがちょっと残念です。(ExcelシートにWebViewが埋め込まれ、相互データ連携ができると、Webの柔軟性からかなり用途が広がるのですが)
でもなかなか面白い機能です。

(追記:2014/09/27)SharePointに登録して、Officeアプリとして挿入が可能。

LINQ and jQuery

admin11 — Sat, 18 May 2013 14:40:33 +0000

最近LINQを使っていて、いろいろと調べていたところJavaScriptでの実装があることを知りました。

jQueryと「linq.js」を連携させてDOMをLINQにより処理するには？

http://www.atmarkit.co.jp/fdotnet/dotnettips/1059linqjquery/linqjquery.html

jQueryのオブジェクトに変換できるということなので、すごく興味がありテストしてみました。
jQueryは、メソッドチェーンで少ないコーディング量で複雑な処理が記述できることでとても好きなのですが、LINQもメソッドチェーンが使えることから、とても相性がいいと感じました。

環境:IE9 / Windows7

ボタンを押すとそれぞれのカラムのデータでソートして表示します。

LINQの特徴の一つとして、DBのSQL文を文字列として分断して記述するのではなく、プログラム言語の一部として記述できる点があります。これもいいのですが、私はDBのSQL文がメモリのデータに対して使える点が便利に思っています。(LINQのクエリ式とSQL文はイコールではありませんが)　SQL文と同じことをプログラム言語で書き換えようとすると、結構手間だったりするからです。

このlinq.jsライブラリは、jQueryとLINQとオブジェクトが相互変換可能なので、一つのメソッドチェーンで記述が可能です。これ、すごい!

サンプルは以前JavaScriptのフレームワークでこんな機能を使っていたと思いだし、作ってみました。JavaScriptでサーバからデータをJSONで取得してそれをブラウザで加工するということは、結構あります。そういった用途に使えそうです。ちなみに最新のJQuery 2.0.0では、IE9上で動作しませんでした。Firefox,ChromeはOKです。

ライブラリの中には詳しいリファレンスと実行テストができるファイルがあります。LINQの勉強するのにとてもいいかもしれませんね。

C++/CX WinRTコンポーネントとJavaScript

admin11 — Sat, 27 Apr 2013 16:34:56 +0000

WinRTと呼ばれるWindowsストアアプリのランタイムライブラリが、Windows8の大きな特徴になります。これは、MS-DOS、Windows、.NETという変化に匹敵するものだと思います。
これまでの環境との互換性のしくみはなかなか複雑です。C++/CLIとC++/CXの違いについて誤解しやすいので、このあたり実際にプログラムを作りながら理解を深めているところです。
これら二つは共存できないもので、入れ替えるのもののようです。しかしコードはとてもよく似ています。C++/CLIの特徴であったマネージ領域のポインタの代替えのトラッキングハンドラ(キャレット文字(ハット記号)で表す)が使われます。
今回は、JavaScriptのストアアプリからC++/CX関数への値の受け渡しのテストをしました。C++/CXをランタイムコンポーネントとしてビルドして、これをストアアプリのプロジェクトから参照をします
前回も、JavaScriptからC++/CXを呼び出すことをしていますが、意味的にはかなり違っていると思います。
サンプルは、JavaScriptで配列をつくり、C++/CX側で合計を計算して引数の値と掛け合わせたあと、JavaScriptに値を戻しています。

環境 : VisualStudio2012 / Windows8

C++側
プロジェクトで、C++ -> ストアアプリ -> Windowsランタイムコンポーネントを選択します。

Class1.cpp

#include "pch.h"
#include "Class1.h"

using namespace cppStoreRunCompo02;
using namespace Platform;

Class1::Class1(){}

int Class1::arrSum(const Array^ arr, int num)
{
    int sum = 0;
    for(int i = 0 ; i < arr->Length; i++)
    {
        sum += arr[i];
    }
    return sum * num;
}

JavaScript側
プロジェクトで、JavaScript -> ストアアプリ -> 空のアプリケーションを選択します。

default.js

(function () {
    "use strict";
    WinJS.Binding.optimizeBindingReferences = true;
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            } else {
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
    app.oncheckpoint = function (args) {
    };

    app.start();

    var cpp = new cppStoreRunCompo02.Class1();
    var arr = new Array(10);
    for (var i = 0; i < arr.length; i++) {
        arr[i] = i;
    }
    var sum = cpp.arrSum(arr, 2);
    alert("SUM : " + sum);
})();
function alert(str) {
    var md = new Windows.UI.Popups.MessageDialog(str);
    md.showAsync();
}

WinRTは、C++/CXを使う以外にも、標準C++でWRT(Windows Runtime C++ Template Library)というものから使えるようです。試しにC++/CLIでWRTを使おうとしましたが、やはりだめでした。
これはCOMの改良版ということのようですが、.NETから進化しているものなのか、それともシンプル化したものなのか、そしてこの先どの方向に進んでいくのか、とても気になります。
このWinRTの存在は、今後のWindowsを占う上でも、とても重要なものとなりそうです。

C++/CX + XAML WebViewでストアアプリ

admin11 — Sat, 27 Apr 2013 13:15:23 +0000

Windowsプラットホームの開発でいろいろと気になったことをテストしてきましたが、いよいよWindowsストアアプリの開発をしようということで、いろいろと準備を始めました。(本当はWindows Phone 8アプリの開発をやりたかったのですが、端末がないのでそれまではストアアプリでやれることはやっておこうと・・)
しかしこのストアアプリ、どんな言語で開発したらいいか、WindowsPhoneアプリへの移行がスムースのスタイルは、過去のライブラリを使う方法等、選択肢がいろいろとある分迷ってしまいます。JavaScript+HTML5かC#+XAMLか、と迷っていたらXAMLでWebViewを使う方法があると知ったので、テストしてみました。

環境: VisualStudio2012 / Windows8

新しいプロジェクトで、Visual C++ -> Windowsストア -> 新しいアプリケーション(XAML)　を選びました。
(C#でもいいのですが、新しいC++/CXにも触れたかったので)

MainPage.xaml

MainPage.xaml.cpp

void MainPage::OnNavigatedTo(NavigationEventArgs^ e)
{
	String^ html = "Test Program
Message area from C++ Program. Press button.\n" +
		"" +
		"";

	WebView1->NavigateToString(html);
}
void cppxamlWebView1::MainPage::Button_Click_1(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
	WebView1->InvokeScript("jsFunc1", nullptr);
}
void cppxamlWebView1::MainPage::wv_notify(Platform::Object^ sender, Windows::UI::Xaml::Controls::NotifyEventArgs e)
{
	TextBox1->Text = e.Value;
}

VisualStudioのデザイナーで作成すると、自動的にたくさんコードを生成するので、重要な部分のみ引用しました。(デフォルトのファイルからこれに関連する部分も修正する必要はあります)使用するXAMLコントロールは、ボタン、テキストボックス、WebViewの3つです。
ボタンを押すと、WebViewのJavaScript関数を呼び出し、divの内容を書き換えます。WebView内のボタンを押すと、JavaScriptがC++の関数を呼び出しテキストボックスを書き換えます。

起動時

変更後

偶然、最近のWebViewがらみの話題の延長みたいになってしまいました。

QtWebKit.QWebView を使ったPython、JavaScript連携

admin11 — Sat, 20 Apr 2013 14:07:57 +0000

前々回、WebViewでのC#、JavaSCript間の連携の話題、そして前回IronPythonを使ったWebページの話題という流れて、どうしてもテストしておきたかったのが、Qtを使ったWebViewのPython、JavaScript間相互呼び出しです。
Qtは、LinuxZaurusの開発で経験がありますが(組み込みLinux用なのでQtopiaと呼ばれていましたが)、C++でクロスプラットフォームのGUIアプリケーションを開発できます。歴史は古いのですが、まだまだ現役のようです。最近また触れる機会があり、いろいろと調べてみたところ、WebKitを使ったプログラムが面白そうだということで、ちょっとはまっています。PySideというライブリを使って、Pythonからダイレクトに操作できる点も魅力です。
次の例は、起動するとPythonのプログラムからJavaScript関数を呼び出し、表示されたボタンをクリックすると、Python関数を呼び出すというものです。これはコンソールにメッセージを出力します。

環境: Python 2.7.3 + PySide 1.1.2 / Windows7


import sys
from PySide import QtWebKit,QtGui,QtCore

html = """






"""
 
class jsTest(QtCore.QObject):
	def __init__(self, parent=None):
		super(jsTest, self).__init__(parent)
	@QtCore.Slot(str)
	def console(self, msg):
		print msg

app = QtGui.QApplication(sys.argv)
view = QtWebKit.QWebView()
frame = view.page().mainFrame()
js = jsTest()
view.setHtml(html)
frame.addToJavaScriptWindowObject('pyObj', js)
frame.evaluateJavaScript("jsFunc('from py Function');")
view.show()
sys.exit(app.exec_())

他にも、クリックイベント等をフックできるので、デバッグやその他いろいろと楽しいことができます。
自分ブラウザみたいなものを作ってみたくなりますね。

SilverlightでIronPython or BrythonのPython / WebBrowser

admin11 — Fri, 12 Apr 2013 14:06:02 +0000

(いまさらですが)SilverlightはFlashと同じように、ウェブブラウザにプラグインをインストールして、リッチコンテンツを動作させることができます。アニメーションやゲームなど、JavaScriptでは難しかったことができました。またFlashには、Flashムービ(コンテンツ)だけでなく、ActionScriptを使ったFlexというWebリッチクラアントの開発もできます。Silverlightも同様のことができます。後発なだけに、Flexでは既存HTMLと完全に分断してしまっているところを、HTMLとの親和性が高い設計になっています。どちらも個人的には、ウェブブラウザがリッチになるというよりも、インターネットクライアントアプリとしての自由度の高さがとても好みでした。しかし、最近はこれら(ブラウザプラグインによるリッチアプリ機能)がちょっと脇役にまわりつつある傾向にあります。
(ブラウザにプラグインを導入できないようにする傾向にある)
最初に顕在化したのは、iPhone,iPadによるFlashの排除したのが始まりでした。消費電力やセキュリティの問題が理由のようですが、PCだけでなくスマホ、タブレットを含めた未来を考えたとき、ある意味必然だったのかもしれません。
ブラウザ上で動かすリッチコンテンツには、ただリッチなだけでなく、マルチプラットホームで同じアプリケーションを走らせるという目的もあります。このマルチとは、Windows,Mac,Linuxというカテゴリーでかたられてきましたが、スマホ、タブレットといったものを含んで考えると、またちがったプラットホームを考える必要がでてくるのでしょう。
そこで最近勢いがあるのが、JavaScriptです。実行速度の向上により最近あらゆるものがJavaScriptで記述されるようになり、万能化しているようにさえ感じます。(Flashもコンバートできたり、ゲームエミュレータまでも)
CPUの違い、OSの違いがあっても、マルチプラットホームで動作するアプリケーションは、長年開発者がめざしてきたところです。
最近はJavaScript+HTML5という組み合わせが現実的に、その答えとなってきているようです。
Javaや.NETの中間レイヤーでマルチプラットホームを実現する方法も、中間言語レベルの互換性から記述言語レベルの互換性になったりするかもしれませんね。.NETのDLRはまた違った可能性を感じるのですが・・
と、いままでになく前置きが長くなりましたが、Silverlightのような環境が残って欲しいな、という思い(言語、実行環境に自由度が欲しいという観点)から、SilverlightによるIronPythonを使ったWebページと、JavaScriptの勢いを示す意味から、JavaScriptライブラリによるPythonを使ったWebページを同じプログラムでテストしてみました。
Silverlight

JavaScript Library

どちらも日時を表示するだけのプログラムです。インターバルタイマの記述に大きな違いがあります。
SilverlightでIronPythonを実行する環境には、Gestaltを使いました。

http://www.visitmix.com/labs/gestalt/

これは2009年11月から更新がありません。

Pythonが実行できるJavaScriptライブラリは、Brythonを使いました。

http://code.google.com/p/brython/

最新バージョンは、2013年3月ですから、まだピチピチですね。

Silverlightの方が起動に時間がかかります。どちらもFirefox18でテストしました。
比較した感想ですが、将来性はBrython、わくわく度はSilverlightといったところでしょうか。。

WebBrowser WindowsFormでJavaScriptからC#呼び出し

admin11 — Mon, 08 Apr 2013 12:27:58 +0000

iPhoneやAndroidでは、WebViewを使って、ネイティブの機能をJavaScriptから使うことができたり、ネイティブコードからJavaScriptが実行できます。これと同じことをWindowsでもやってみました。(まだやってませんがWindows Phoneでも同様なのかな)
これは何かと便利で、Titanium Mobileのようにスマホアプリをハイブリッドで開発できるのも、このしくみを利用するからですね。

環境:VisualStudio 2010 / Windows 7

まず、以下のようにブラウザをC#で簡単につくれます。(フォームにツールボックスからWebBrowserをはりつけ)


namespace CSbrowser
{
    [System.Runtime.InteropServices.ComVisibleAttribute(true)]
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            webBrowser1.ObjectForScripting = this;
            webBrowser1.Navigate(new Uri("http://localhost/test.html"));
        }
        public void CSfunc1(string value)
        {
            MessageBox.Show(value);
        }
        private void button1_Click(object sender, EventArgs e)
        {
            object[] args = { "arg1" };
            webBrowser1.Document.InvokeScript("JSfunc1", args);
        }
        private void button2_Click(object sender, EventArgs e)
        {
            string js = "alert('Click!')";
            webBrowser1.Url = new Uri("javascript:" + Uri.EscapeDataString(js) + ";");
        }
    }
}

次は、読み込むhtmlファイルです。(test.html)







Test Page for C# WebBrowser.

test.htmlをローカルのWebサーバで読み込めるようにして(XAMPPなど)、C#ソースをビルドしてたちあげると、

このような画面になります。

中央の”btn1″ボタンをクリックすると、C#のCSfunc1()が呼ばれます。また、Windowsフォームの”button1″ボタンを押すと、JavaScriptのJSfunc1()が呼ばれ、”button2″ボタンを押すと、JavaScriptのalert()関数が実行されます。

まだいろいろと応用が考えられそうですね。