Monthly Archives: 1月 2017

PhpStorm #007 – ファイル・フォルダ比較

今回は、PhpStormでファイルやフォルダを比較する方法を紹介します。

ファイルやフォルダを比較するためには下記方法でおこないます。

プロジェクトウィンドウで比較したいファイルやフォルダをcommandで複数選択。選択したらcommand + Dで実行。

別ウィンドウで比較結果が表示されました。

PhpStormでは、手軽にファイルやフォルダの比較が可能です。

参考文献
PhpStorm

PhpStorm #006 – ターミナル表示

今回は、PhpStormでターミナルを表示する方法を紹介します。

ターミナルを表示するためには下記方法でおこないます。

表示 → ツールウィンドウ → Terminalを選択。または、option + F12。

ターミナルが表示されました。

普段使っているターミナルと同様の操作が可能です。

ターミナルを複数起動することもできます。

下部だけではなく、上下左右に配置することもできます。

PhpStormの画面内で、ターミナルを起動することができるのでターミナルを操作するために画面を切り替える必要がなくなります。

参考文献
PhpStorm

Riot.js #009 – 名前付き要素を取得

今回は、Riot.jsで名前付き要素を取得する方法を紹介します。v2までは、id属性やname属性等を利用できましたが、v3からはそれらが廃止され、ref属性を利用する必要があります。

名前付き要素を取得するためには下記のように記述します。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>

        <meta charset="UTF-8">
        <title>Riot.js sample</title>

        <script src="./library/riot/riot+compiler.js"></script>

        <script src="./tag/sample.tag" type="riot/tag"></script>

    </head>
    <body>

        <sample></sample>

        <script>riot.mount('*');</script>

    </body> 
</html>

<!DOCTYPE html>

<head>

<title>Riot.js sample</title>

</head>

<body>

</body>

</html>

sample.tag

<sample>

    <form onsubmit={submit}>
        <input type="text" ref="username"/>
        <input type="password" ref="password"/>
        <button type="submit" ref="submit">Go</button>
    </form>

    <style scoped>

        input, button {
            font-size: 20px;
        }

    </style>

    <script>

        this.submit = function() {

            console.log('username: ', this.refs.username.value);
            console.log('password: ', this.refs.password.value);

        }.bind(this);

    </script>

</sample>

</form>

input, button {

font-size: 20px;

}

</style>

this.submit = function() {

console.log('username: ', this.refs.username.value);

console.log('password: ', this.refs.password.value);

}.bind(this);

</script>

</sample>

index.htmlを実行すると下記のようにブラウザで表示されます。任意の値を入力してみます。

ボタンをクリックすると、コンソールに入力した値が表示されます。

ボタンをクリックで名前付き要素取得：
ref → refsで値を取得

<sample>

    <form onsubmit={submit}>
        <input type="text" ref="username"/>
        <input type="password" ref="password"/>
        <button type="submit" ref="submit">Go</button>
    </form>

    <script>

        this.submit = function() {

            console.log('username: ', this.refs.username.value);
            console.log('password: ', this.refs.password.value);

        }.bind(this);

    </script>

</sample>

</form>

this.submit = function() {

console.log('username: ', this.refs.username.value);

console.log('password: ', this.refs.password.value);

}.bind(this);

</script>

</sample>

名前付き要素を取得することができます。v3ではid属性やname属性が利用できなくなっているので注意が必要です。

参考文献
Riot.js

PhpStorm #005 – プロジェクト表示

今回は、PhpStormでプロジェクトを表示する方法を紹介します。

プロジェクトを表示するためには下記方法でおこないます。

表示 → ツールウィンドウ → Projectを選択。または、command + 1。

プロジェクトが表示されました。

PhpStormも一般的なIDEやエディタで表示できるプロジェクト全体のファイル構造を表示確認できます。

参考文献
PhpStorm

Riot.js #008 – イベント処理

今回は、Riot.jsでイベント処理をする方法を紹介します。

イベント処理をするためには下記のように記述します。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>

        <meta charset="UTF-8">
        <title>Riot.js sample</title>

        <script src="./library/riot/riot+compiler.js"></script>

        <script src="./tag/sample.tag" type="riot/tag"></script>

    </head>
    <body>

        <sample></sample>

        <script>riot.mount('*');</script>

    </body> 
</html>

<!DOCTYPE html>

<head>

<title>Riot.js sample</title>

</head>

<body>

</body>

</html>

sample.tag

<sample>

    <h1>h1タグ</h1>
    <h2 if={visible}>h2タグ</h2>
    <p>pタグ</p>
    <button onclick={click}>click</button>

    <style scoped>

        h1 {
            color: #0D47A1;
        }

        h2 {
            color: #8b1014;
        }

        p {
            color: #00AA00;
        }

    </style>

    <script>

        this.visible = true;

        this.click = function() {

            this.visible = !this.visible;

        }.bind(this);

    </script>

</sample>

<button onclick={click}>click</button>

h1 {

color: #0D47A1;

}

h2 {

color: #8b1014;

}

p {

color: #00AA00;

}

</style>

this.visible = true;

this.click = function() {

this.visible = !this.visible;

}.bind(this);

</script>

</sample>

index.htmlを実行すると下記のようにブラウザで表示されます。

ボタンをクリックするとh2タグが非表示になります。もう一度クリックすると表示になります。

ボタンをクリックでイベント処理：

    <button onclick={click}>click</button>

    <script>

        this.visible = true;

        this.click = function() {

            this.visible = !this.visible;

        }.bind(this);

    </script>

<button onclick={click}>click</button>

this.visible = true;

this.click = function() {

this.visible = !this.visible;

}.bind(this);

</script>

クリック等のイベント処理をすることもできます。

参考文献
Riot.js

Riot.js #007 – 条件分岐

今回は、Riot.jsで条件分岐をする方法を紹介します。基本的には「if」を利用しますが、今回は「show」と「hide」についても紹介します。

条件分岐をするためには下記のように記述します。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>

        <meta charset="UTF-8">
        <title>Riot.js sample</title>

        <script src="./library/riot/riot+compiler.js"></script>

        <script src="./tag/sample.tag" type="riot/tag"></script>

    </head>
    <body>

        <sample></sample>

        <script>riot.mount('*');</script>

    </body> 
</html>

<!DOCTYPE html>

<head>

<title>Riot.js sample</title>

</head>

<body>

</body>

</html>

sample.tag

<sample>

    <h1 if={list}>h1タグ</h1>
    <h2 show={list}>h2タグ</h2>
    <p hide={list}>pタグ</p>

    <style scoped>

        h1 {
            color: #0D47A1;
        }

        h2 {
            color: #8b1014;
        }

        p {
            color: #00AA00;
        }

    </style>

    <script>

        this.list = true;

    </script>

</sample>

h1 {

color: #0D47A1;

}

h2 {

color: #8b1014;

}

p {

color: #00AA00;

}

</style>

this.list = true;

</script>

</sample>

index.htmlを実行すると下記のようにブラウザで表示されます。

条件分岐でタグを表示：

if = true/表示、false/削除
show = true/表示、false/display:none
hide = true/display:none 、false/表示

    <h1 if={list}>h1タグ</h1>
    <h2 show={list}>h2タグ</h2>
    <p hide={list}>pタグ</p>

    <script>

        this.list = true;

    </script>

this.list = true;

</script>

ifやshowやhideを利用することによりタグの表示・非表示を操作することができます。

参考文献
Riot.js

Leaflet #027 – ヒートマップ

Leafletでヒートマップを作成するには、「Leaflet.heat」と言うプラグインを利用します。

index.html

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

<head>
    <meta charset="UTF-8">
    <title>Leaflet Sample</title>

    <script src="./library/leaflet-1.0.1/leaflet.js"></script>
    <link href="./library/leaflet-1.0.1/leaflet.css" rel="stylesheet" />

    <script src="./plugin/Leaflet.heat/dist/leaflet-heat.js"></script>

    <link href="./css/stylesheet.css" rel="stylesheet" />

</head>
<body>

    <div id="map"></div>
    <script src="./js/script.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Leaflet Sample</title>

</head>

<body>

</body>

</html>

stylesheet.css

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
}

html, body {

height: 100%;

padding: 0;

margin: 0;

}

#map {

z-index: 0;

height: 100%;

}

script.js

var mierune_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
    attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
});

var mierune_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
    attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
});


var map = L.map('map', {
    center: [35.6831925, 139.7511307],
    zoom: 12,
    zoomControl: true,
    layers: [mierune_mono]
});

var heat = L.heatLayer([
    [35.6831, 139.7500, 50],
    [35.6831, 139.7550, 10],
    [35.6831, 139.7600, 50],
    [35.6831, 139.7650, 10],
    [35.6831, 139.7700, 50],
    [35.6881, 139.7500, 10],
    [35.6931, 139.7500, 50],
    [35.6981, 139.7500, 10],
    [35.6781, 139.7500, 50],
    [35.6731, 139.7500, 10]
], {
    radius: 30
}).addTo(map);

var Map_BaseLayer = {
    "MIERUNE MONO": mierune_mono,
    "MIERUNE Color": mierune_color
};

L.control.scale({
    imperial: false,
    maxWidth: 300
}).addTo(map);

L.control.layers(Map_BaseLayer, null, {
    collapsed: true
}).addTo(map);

var mierune_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {

attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."

});

var mierune_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {

});

var map = L.map('map', {

center: [35.6831925, 139.7511307],

zoom: 12,

zoomControl: true,

layers: [mierune_mono]

});

var heat = L.heatLayer([

[35.6831, 139.7500, 50],

[35.6831, 139.7550, 10],

[35.6831, 139.7600, 50],

[35.6831, 139.7650, 10],

[35.6831, 139.7700, 50],

[35.6881, 139.7500, 10],

[35.6931, 139.7500, 50],

[35.6981, 139.7500, 10],

[35.6781, 139.7500, 50],

[35.6731, 139.7500, 10]

], {

radius: 30

}).addTo(map);

var Map_BaseLayer = {

"MIERUNE MONO": mierune_mono,

"MIERUNE Color": mierune_color

};

L.control.scale({

imperial: false,

maxWidth: 300

}).addTo(map);

L.control.layers(Map_BaseLayer, null, {

collapsed: true

}).addTo(map);

index.htmlを実行すると下記のようにブラウザで表示されます。

example

サークル半径変更：

var heat = L.heatLayer([
    [35.6831, 139.7500, 50],
    [35.6831, 139.7550, 10],
    [35.6831, 139.7600, 50],
    [35.6831, 139.7650, 10],
    [35.6831, 139.7700, 50],
    [35.6881, 139.7500, 10],
    [35.6931, 139.7500, 50],
    [35.6981, 139.7500, 10],
    [35.6781, 139.7500, 50],
    [35.6731, 139.7500, 10]
], {
    radius: 50
}).addTo(map);

var heat = L.heatLayer([

[35.6831, 139.7500, 50],

[35.6831, 139.7550, 10],

[35.6831, 139.7600, 50],

[35.6831, 139.7650, 10],

[35.6831, 139.7700, 50],

[35.6881, 139.7500, 10],

[35.6931, 139.7500, 50],

[35.6981, 139.7500, 10],

[35.6781, 139.7500, 50],

[35.6731, 139.7500, 10]

], {

radius: 50

}).addTo(map);

ぼかし変更：

var heat = L.heatLayer([
    [35.6831, 139.7500, 50],
    [35.6831, 139.7550, 10],
    [35.6831, 139.7600, 50],
    [35.6831, 139.7650, 10],
    [35.6831, 139.7700, 50],
    [35.6881, 139.7500, 10],
    [35.6931, 139.7500, 50],
    [35.6981, 139.7500, 10],
    [35.6781, 139.7500, 50],
    [35.6731, 139.7500, 10]
], {
    radius: 30,
    blur: 1
}).addTo(map);

var heat = L.heatLayer([

[35.6831, 139.7500, 50],

[35.6831, 139.7550, 10],

[35.6831, 139.7600, 50],

[35.6831, 139.7650, 10],

[35.6831, 139.7700, 50],

[35.6881, 139.7500, 10],

[35.6931, 139.7500, 50],

[35.6981, 139.7500, 10],

[35.6781, 139.7500, 50],

[35.6731, 139.7500, 10]

], {

radius: 30,

blur: 1

}).addTo(map);

ヒートマップ機能を実装したい時に便利なプラグインです。

参考文献
leaflet
Leaflet.heat

Riot.js #006 – 外部JSON読み込み

今回は、Riot.jsで外部JSONを読み込む方法を紹介します。

外部JSONを読み込むには下記のように記述します。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>

        <meta charset="UTF-8">
        <title>Riot.js sample</title>

        <script src="./library/jquery-2.1.4/jquery-2.1.4.min.js"></script>

        <script src="./library/riot/riot+compiler.js"></script>

        <script src="./tag/sample.tag" type="riot/tag"></script>

    </head>
    <body>

        <sample></sample>
        <sample2></sample2>

        <script>riot.mount('*');</script>

    </body> 
</html>

<!DOCTYPE html>

<head>

<title>Riot.js sample</title>

</head>

<body>

</body>

</html>

sample.tag

<sample>

    <p each={list}>{name} {age}</p>

    <style scoped>

        p {
            color: #00AA00;
        }

    </style>

    <script>

        fetch('./json/sample.json')
            .then( function(data) {
                return data.json();
            })
            .then( function(json) {
                this.list = json;
                this.update();
            }.bind(this));

    </script>

</sample>

<sample2>

    <h2 each={list}>{no} {value}</h2>

    <style scoped>

        h2 {
            color: #0D47A1;
        }

    </style>

    <script>

        $.getJSON("./json/sample2.json", function(json){
            this.list = json;
            this.update();
        }.bind(this));

    </script>

</sample2>

p {

color: #00AA00;

}

</style>

fetch('./json/sample.json')

.then( function(data) {

return data.json();

})

.then( function(json) {

this.list = json;

this.update();

}.bind(this));

</script>

</sample>

<h2 each={list}>{no} {value}</h2>

h2 {

color: #0D47A1;

}

</style>

$.getJSON("./json/sample2.json", function(json){

this.list = json;

this.update();

}.bind(this));

</script>

</sample2>

sample.json

[
    {
        "name": "山田",
        "age": "20"
    },
    {
        "name": "佐藤",
        "age": "30"
    },
    {
        "name": "近藤",
        "age": "25"
    }
]

[

{

"name": "山田",

"age": "20"

{

"name": "佐藤",

"age": "30"

{

"name": "近藤",

"age": "25"

}

]

sample2.json

[
    {
        "no": "1",
        "value": "aaa"
    },
    {
        "no": "2",
        "value": "bbb"
    },
    {
        "no": "3",
        "value": "ccc"
    }
]

[

{

"no": "1",

"value": "aaa"

{

"no": "2",

"value": "bbb"

{

"no": "3",

"value": "ccc"

}

]

index.htmlを実行すると下記のようにブラウザで表示されます。

Fetch APIでJSON読み込みpタグで表示：

    <p each={list}>{name} {age}</p>

    <script>

        fetch('./json/sample.json')
            .then( function(data) {
                return data.json();
            })
            .then( function(json) {
                this.list = json;
                this.update();
            }.bind(this));

    </script>

fetch('./json/sample.json')

.then( function(data) {

return data.json();

})

.then( function(json) {

this.list = json;

this.update();

}.bind(this));

</script>

jQueryでJSON読み込みh2タグで表示：

    <h2 each={list}>{no} {value}</h2>

    <script>

        $.getJSON("./json/sample2.json", function(json){
            this.list = json;
            this.update();
        }.bind(this));

    </script>

<h2 each={list}>{no} {value}</h2>

$.getJSON("./json/sample2.json", function(json){

this.list = json;

this.update();

}.bind(this));

</script>

外部JSONを読み込む場合は、Fetch APIやXMLHttpRequestを利用可能です。外部ライブラリとも競合が少ないのでjQueryでJSON読み込みも可能です。

参考文献
Riot.js
Riot.jsでAjaxではなくFetchを使って標準的なやりかたでAPIを取得する

Riot.js #005 – 繰り返し処理

今回は、Riot.jsで繰り返し処理をする方法を紹介します。

繰り返し処理をするためには下記のように記述します。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>

        <meta charset="UTF-8">
        <title>Riot.js sample</title>

        <script src="./library/riot/riot+compiler.js"></script>

        <script src="./tag/sample.tag" type="riot/tag"></script>

    </head>
    <body>

        <sample></sample>
        <sample2></sample2>

        <script>riot.mount('*');</script>

    </body> 
</html>

<!DOCTYPE html>

<head>

<title>Riot.js sample</title>

</head>

<body>

</body>

</html>

sample.tag

<sample>

    <p each={list}>{name} {age}</p>

    <style scoped>

        p {
            color: #00AA00;
        }

    </style>

    <script>

        this.list = [
            {
                name: '山田',
                age: '20'
            },
            {
                name: '佐藤',
                age: '30'
            },
            {
                name: '近藤',
                age: '25'
            }
        ];

    </script>

</sample>

<sample2>

    <h1 each={add in list}>{add}</h1>

    <style scoped>

        h1 {
            color: #0D47A1;
        }

    </style>

    <script>

        this.list = [
            'aaa',
            'bbb',
            'ccc'
        ];

    </script>

</sample2>

p {

color: #00AA00;

}

</style>

this.list = [

{

age: '20'

{

age: '30'

{

age: '25'

}

];

</script>

</sample>

h1 {

color: #0D47A1;

}

</style>

this.list = [

'aaa',

'bbb',

'ccc'

];

</script>

</sample2>

index.htmlを実行すると下記のようにブラウザで表示されます。

繰り返し処理でオブジェクトをpタグで表示：

    <p each={list}>{name} {age}</p>

    <script>

        this.list = [
            {
                name: '山田',
                age: '20'
            },
            {
                name: '佐藤',
                age: '30'
            },
            {
                name: '近藤',
                age: '25'
            }
        ];

this.list = [

{

age: '20'

{

age: '30'

{

age: '25'

}

];

繰り返し処理で配列をh1タグで表示：

    <h1 each={add in list}>{add}</h1>

    <script>

        this.list = [
            'aaa',
            'bbb',
            'ccc'
        ];

    </script>

this.list = [

'aaa',

'bbb',

'ccc'

];

</script>

eachを宣言することによりオブジェクトや配列を繰り返し処理することができます。

参考文献
Riot.js

PhpStorm #004 – 画面分割

今回は、PhpStormで画面分割する方法を紹介します。

画面分割するためには下記方法でおこないます。

ウィンドウ → Editor Tabs → 縦に分割・横に分割を選択。

または、ファイルタブの上で右クリック。縦に分割・横に分割を選択。

画面分割ができました。

PhpStormの画面分割は縦横どちらでも可能でしかもいくつでも分割可能です。これは結構便利かも。

参考文献
PhpStorm

Try #005 – Node.jsとAzure FunctionsでSlack botを作ってみた

今回は、Node.jsとAzure Functionsを利用してSlack botを作ってみようと思います。

Azure Functionsとは、サーバーレスで小規模なコードをクラウドで手軽に実行できる仕組みです。言語はC#・F#・Node.js・Python・PHPなどが利用できます。コードが実行された時間に対してだけ料金を支払うので必要に応じてスケールもできます。

下記流れで進めていこうと思います。

① SlackでWebhook URLを取得
② Node.jsでSlack bot実装
③ Azure FunctionsでSlack bot実装

まずは、SlackにアクセスするためにWebhook URLを取得する必要があります。Slack botを作成したいSlack上で「Configure Apps」を選択。

次に、検索窓で「Incoming Webhooks」を検索。

検索できたら、「Add Configuration」を選択。

登録画面が表示されるので、適用するチャンネルを選択して「Add Incoming Webhooks integration」を選択。

すると、「Webhook URL」が表示されます。あとでコード内にパラメータで指定することも可能ですが、今回はここで事前にbot名やアイコンなども登録しておきます。

「Webhook URL」を取得できたので次に、Node.jsでSlack botを実装してみます。
まず、「request」モジュールが必要なので事前にインストールしておきます。

npm install request

1	npm install request

そして、下記のようなスクリプトを記述します。

script.js

var request = require('request');

var options = {
    url: 'https://hooks.slack.com/services/キー',
    form: 'payload={"text": "テスト"}',
    json :true
};

request.post(options, function(error, response, body){
    if (!error && response.statusCode == 200) {
        console.log('送信完了!');
    } else {
        console.log('error: '+ response.statusCode + body);
    }
});

var request = require('request');

var options = {

url: 'https://hooks.slack.com/services/キー',

form: 'payload={"text": "テスト"}',

json :true

};

request.post(options, function(error, response, body){

if (!error && response.statusCode == 200) {

console.log('送信完了!');

} else {

console.log('error: '+ response.statusCode + body);

}

});

url:に取得した「Webhook URL」を記述
form:のtext部分に表示内容を記述

スクリプトを実行してみます。

Slack上でbotがコメントしたのが確認できました。

Node.jsで実装ができたのでそのコードを移植して、Azure Functionsで実装してみたいと思います。
ちなみにAzure Functionsは下記リンクからお試しでも利用できます。

今回は、本番のAzureで実装していきたいと思います。Azureで「Functions App」を検索して選択します。

選択されたら、作成ボタンを押します。

詳細情報が表示されるので、アプリ名やリソースグループやプランなどを任意で選択して作成ボタンを押します。

デプロイされたら、「Functions App」が起動するのでシナリオと言語を選択して実行します。今回は、タイマーとJavaScript(Node.js)を選択しました。

実行すると、タイマートリガーが作成されるのでこれを1つのプロジェクトとして実装していきます。
統合 → スケジュールからスクリプトを実行するスケジュールを設定します。今回は、1分おきにスクリプトを実行する設定にしました。

次にAzure FunctionsでもNode.jsで記述する場合には、「request」モジュールが必要なので事前にインストールしておきます。
Functions Appの設定 → 開発者コンソールを開くを実行します。

するとコンソールが開くのでここで「request」モジュールをインストールします。

npm install request

1	npm install request

そして、開発 → コードに下記のようなスクリプトを記述します。

index.js

module.exports = function (context, myTimer) {
    if(myTimer.isPastDue)
    {
        context.log('Node.js is running late!');
    }
    var request = require('request');

    var options = {
        url: 'https://hooks.slack.com/services/キー',
        form: 'payload={"text": "そろそろ寝る時間ですよ!!"}',
        json :true
    };

    request.post(options, function(error, response, body){
        if (!error && response.statusCode == 200) {
            context.log('run!');
        } else {
            context.log('error: '+ response.statusCode + body);
        }
    });

    context.done();
};

module.exports = function (context, myTimer) {

if(myTimer.isPastDue)

{

context.log('Node.js is running late!');

}

var request = require('request');

var options = {

url: 'https://hooks.slack.com/services/キー',

form: 'payload={"text": "そろそろ寝る時間ですよ!!"}',

json :true

};

request.post(options, function(error, response, body){

if (!error && response.statusCode == 200) {

context.log('run!');

} else {

context.log('error: '+ response.statusCode + body);

}

});

context.done();

};

url:に取得した「Webhook URL」を記述
form:のtext部分に表示内容を記述

スクリプトを保存して実行してみます。

Slack上でbotが1分おきにコメントしたのが確認できました。

シンプルなbotであれば、手軽に実装できることが確認できました。SlackだけではなくLINEや他のチャットでも応用できそうです。bot作成にはGUIで操作できるサービスなどもありますが、Node.jsやAzure Functionsを利用することでよりカスタマイズ性の高いbotが作成できそうです。

参考文献
Azure Functions
Node.js
Azure Functions NodeJS 開発者向けリファレンス
 Azure Functions におけるタイマートリガー
 node.jsでSlackのBotにポストする簡単なサンプル

Riot.js #004 – 値の代入

今回は、Riot.jsで値の代入をする方法を紹介します。

値の代入をするためには下記のように記述します。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>

        <meta charset="UTF-8">
        <title>Riot.js sample</title>

        <script src="./library/riot/riot+compiler.js"></script>

        <script src="./tag/sample.tag" type="riot/tag"></script>

    </head>
    <body>

        <sample></sample>
        <sample2 comment2 = "Riot.js sample2"></sample2>

        <script>riot.mount('*');</script>

    </body> 
</html>

<!DOCTYPE html>

<head>

<title>Riot.js sample</title>

</head>

<body>

</body>

</html>

sample.tag

<sample>

    <h1>{ comment }</h1>

    <style scoped>

        h1 {
            color: #00AA00;
        }

    </style>

    <script>

        this.comment= "Riot.js sample";

    </script>

</sample>

<sample2>

    <p>{ comment2 }</p>

    <style scoped>

        p {
            color: #0D47A1;
        }

    </style>

    <script>

        this.comment2= opts.comment2;

    </script>

</sample2>

<h1>{ comment }</h1>

h1 {

color: #00AA00;

}

</style>

this.comment= "Riot.js sample";

</script>

</sample>

<p>{ comment2 }</p>

p {

color: #0D47A1;

}

</style>

this.comment2= opts.comment2;

</script>

</sample2>

index.htmlを実行すると下記のようにブラウザで表示されます。

変数「comment」の値をh1タグで表示：

<h1>{ comment }</h1>

this.comment= "Riot.js sample";

<h1>{ comment }</h1>

this.comment= "Riot.js sample";

変数「comment2」の値を設定：

<sample2 comment2 = "Riot.js sample2"></sample2>

1	<sample2 comment2 = "Riot.js sample2"></sample2>

取得した変数「comment2」の値をpタグで表示：

<p>{ comment2 }</p>

this.comment2= opts.comment2;

<p>{ comment2 }</p>

this.comment2= opts.comment2;

{}内にJSが記述できるので、変数を設定してhtml → tag内での値の代入をすることもできます。

参考文献
Riot.js

Riot.js #003 – カスタムタグを複数読み込む

今回は、Riot.jsでカスタムタグを複数読み込む方法を紹介します。

カスタムタグを複数読み込むためには下記のように記述します。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>

        <meta charset="UTF-8">
        <title>Riot.js sample</title>

        <script src="./library/riot/riot+compiler.js"></script>

        <script src="./tag/sample.tag" type="riot/tag"></script>
        <script src="./tag/sample2.tag" type="riot/tag"></script>

    </head>
    <body>

        <sample></sample>
        <sample2></sample2>

        <script>riot.mount('*');</script>

    </body> 
</html>

<!DOCTYPE html>

<head>

<title>Riot.js sample</title>

</head>

<body>

</body>

</html>

sample.tag

<sample>

    <h1>h1タグ表示</h1>

    <style scoped>

        h1 {
            color: #00AA00;
        }

    </style>

    <script>

        console.log('Riot.js Sample');

    </script>

</sample>

h1 {

color: #00AA00;

}

</style>

console.log('Riot.js Sample');

</script>

</sample>

sample2.tag

<sample2>

    <h3>h3タグ表示2</h3>
    <p>pタグ表示2</p>

    <style scoped>

        p {
            color: #0D47A1;
        }

    </style>

    <script>

        console.log('Riot.js Sample2');

    </script>

</sample2>

<p>pタグ表示2</p>

p {

color: #0D47A1;

}

</style>

console.log('Riot.js Sample2');

</script>

</sample2>

index.htmlを実行すると下記のようにブラウザで表示されます。

tagファイルを複数読み込み：

<script src="./tag/sample.tag" type="riot/tag"></script>
<script src="./tag/sample2.tag" type="riot/tag"></script>

1 2	<script src="./tag/sample.tag" type="riot/tag"></script> <script src="./tag/sample2.tag" type="riot/tag"></script>

カスタムタグを指定：

<sample></sample>
<sample2></sample2>

1 2	<sample></sample> <sample2></sample2>

カスタムタグをマウント：

*を記述することにより読み込んだtagファイルを全てマウントすることができます。

<script>riot.mount('*');</script>

1	<script>riot.mount('*');</script>

tagファイルを複数読み込んでマウントすることができます。また、1つのtagファイル内に複数のカスタムタグを定義することもできます。

参考文献
Riot.js

PhpStorm #003 – テーマインストール

今回は、PhpStormでテーマをインストールする方法を紹介します。

テーマをインストールするためには下記方法でおこないます。

既存テーマを選ぶこともできますが、テーマの種類が少ないためColor Themesというサイトから好きなテーマをダウンロードしてPhpStormにインストールすることをおすすめします。まず、好きなテーマを選択します。

詳細ページに移動したら、ダウンロードボタンをクリックします。

Configure → 設定をインポートを選択します。そしてダウンロードしたファイルを選択します。

インポートするコンポーネントを聞かれるので全て選択して実行します。

再起動を聞かれるので再起動します。

Configure → Preferencesを選択します。設定画面で「色とフォント」を選択するとインストールしたテーマが既に選択されていることを確認できます。

あとは、作業プロジェクトを開くとインストールしたテーマが適用されているのが確認できます。

PhpStormは、たくさんのテーマをインストールすることが可能です。また、インストールしたテーマは、さらに細かく設定することも可能です。

参考文献
PhpStorm
Color Themes

Riot.js #002 – カスタムタグの定義2

今回は、Riot.jsでカスタムタグでHTML・CSS・JSを定義する方法を紹介します。

カスタムタグでHTML・CSS・JSを定義するためには下記のように記述します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>

    <meta charset="UTF-8">
    <title>Riot.js sample</title>

    <script src="./library/riot/riot+compiler.js"></script>

    <script src="./tag/sample.tag" type="riot/tag"></script>

</head>
<body>

    <sample></sample>

    <script>riot.mount('sample');</script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Riot.js sample</title>

</head>

<body>

</body>

</html>

sample.tag

<sample>

    <h1>h1タグ表示</h1>
    <h3>h3タグ表示</h3>
    <p>pタグ表示</p>

    <style scoped>

        h1 {
            color: #00AA00;
        }

        p {
            color: #0D47A1;
        }

    </style>

    <script>

        console.log('Riot.js Sample');

    </script>

</sample>

<p>pタグ表示</p>

h1 {

color: #00AA00;

}

p {

color: #0D47A1;

}

</style>

console.log('Riot.js Sample');

</script>

</sample>

index.htmlを実行すると下記のようにブラウザで表示されます。

HTML・CSS・JSの全てが認識しているのを確認できました。

CSSの記述追加：

h1タグとpタグの色を変更。　<style scoped>を宣言することにより「sample.tag」ファイル内のみスタイルが適用されます。

   　<style scoped>

        h1 {
            color: #00AA00;
        }

        p {
            color: #0D47A1;
        }

    </style>

h1 {

color: #00AA00;

}

p {

color: #0D47A1;

}

</style>

JSの記述を追加：

コンソールに出力。

    <script>

        console.log('Riot.js Sample');

    </script>

console.log('Riot.js Sample');

</script>

カスタムタグを利用することで、HTML・CSS・JSを1つのファイルとしてコンポーネント化することができます。

参考文献
Riot.js
とりあえず試してみたいって方のための Riot.js 入門