今回は、PhpStormでファイルやフォルダを比較する方法を紹介します。
ファイルやフォルダを比較するためには下記方法でおこないます。
プロジェクトウィンドウで比較したいファイルやフォルダをcommandで複数選択。選択したらcommand + Dで実行。
別ウィンドウで比較結果が表示されました。
PhpStormでは、手軽にファイルやフォルダの比較が可能です。
- 参考文献
PhpStorm
今回は、Riot.jsで名前付き要素を取得する方法を紹介します。v2までは、id属性やname属性等を利用できましたが、v3からはそれらが廃止され、ref属性を利用する必要があります。
名前付き要素を取得するためには下記のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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> |
index.htmlを実行すると下記のようにブラウザで表示されます。任意の値を入力してみます。
ボタンをクリックすると、コンソールに入力した値が表示されます。
ボタンをクリックで名前付き要素取得:
ref → refsで値を取得
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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> |
名前付き要素を取得することができます。v3ではid属性やname属性が利用できなくなっているので注意が必要です。
今回は、Riot.jsでイベント処理をする方法を紹介します。
イベント処理をするためには下記のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<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> |
index.htmlを実行すると下記のようにブラウザで表示されます。
ボタンをクリックするとh2タグが非表示になります。もう一度クリックすると表示になります。
ボタンをクリックでイベント処理:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<button onclick={click}>click</button> <script> this.visible = true; this.click = function() { this.visible = !this.visible; }.bind(this); </script> |
クリック等のイベント処理をすることもできます。
今回は、Riot.jsで条件分岐をする方法を紹介します。基本的には「if」を利用しますが、今回は「show」と「hide」についても紹介します。
条件分岐をするためには下記のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<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> |
index.htmlを実行すると下記のようにブラウザで表示されます。
条件分岐でタグを表示:
if = true/表示、false/削除
show = true/表示、false/display:none
hide = true/display:none 、false/表示
1 2 3 4 5 6 7 8 9 |
<h1 if={list}>h1タグ</h1> <h2 show={list}>h2タグ</h2> <p hide={list}>pタグ</p> <script> this.list = true; </script> |
ifやshowやhideを利用することによりタグの表示・非表示を操作することができます。
Leafletでヒートマップを作成するには、「Leaflet.heat」と言うプラグインを利用します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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> |
1 2 3 4 5 6 7 8 9 10 |
html, body { height: 100%; padding: 0; margin: 0; } #map { z-index: 0; height: 100%; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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); |
index.htmlを実行すると下記のようにブラウザで表示されます。
サークル半径変更:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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); |
ぼかし変更:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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); |
ヒートマップ機能を実装したい時に便利なプラグインです。
今回は、Riot.jsで外部JSONを読み込む方法を紹介します。
外部JSONを読み込むには下記のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[ { "name": "山田", "age": "20" }, { "name": "佐藤", "age": "30" }, { "name": "近藤", "age": "25" } ] |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[ { "no": "1", "value": "aaa" }, { "no": "2", "value": "bbb" }, { "no": "3", "value": "ccc" } ] |
index.htmlを実行すると下記のようにブラウザで表示されます。
Fetch APIでJSON読み込みpタグで表示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
jQueryでJSON読み込みh2タグで表示:
1 2 3 4 5 6 7 8 9 10 |
<h2 each={list}>{no} {value}</h2> <script> $.getJSON("./json/sample2.json", function(json){ this.list = json; this.update(); }.bind(this)); </script> |
外部JSONを読み込む場合は、Fetch APIやXMLHttpRequestを利用可能です。外部ライブラリとも競合が少ないのでjQueryでJSON読み込みも可能です。
今回は、Riot.jsで繰り返し処理をする方法を紹介します。
繰り返し処理をするためには下記のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<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> |
index.htmlを実行すると下記のようにブラウザで表示されます。
繰り返し処理でオブジェクトをpタグで表示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<p each={list}>{name} {age}</p> <script> this.list = [ { name: '山田', age: '20' }, { name: '佐藤', age: '30' }, { name: '近藤', age: '25' } ]; |
繰り返し処理で配列をh1タグで表示:
1 2 3 4 5 6 7 8 9 10 11 |
<h1 each={add in list}>{add}</h1> <script> this.list = [ 'aaa', 'bbb', 'ccc' ]; </script> |
eachを宣言することによりオブジェクトや配列を繰り返し処理することができます。
今回は、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」モジュールが必要なので事前にインストールしておきます。
1 |
npm install request |
そして、下記のようなスクリプトを記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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部分に表示内容を記述
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」モジュールをインストールします。
1 |
npm install request |
そして、開発 → コードに下記のようなスクリプトを記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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が作成できそうです。
今回は、Riot.jsで値の代入をする方法を紹介します。
値の代入をするためには下記のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<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> |
index.htmlを実行すると下記のようにブラウザで表示されます。
変数「comment」の値をh1タグで表示:
1 2 3 |
<h1>{ comment }</h1> this.comment= "Riot.js sample"; |
変数「comment2」の値を設定:
1 |
<sample2 comment2 = "Riot.js sample2"></sample2> |
取得した変数「comment2」の値をpタグで表示:
1 2 3 |
<p>{ comment2 }</p> this.comment2= opts.comment2; |
{}内にJSが記述できるので、変数を設定してhtml → tag内での値の代入をすることもできます。
今回は、Riot.jsでカスタムタグを複数読み込む方法を紹介します。
カスタムタグを複数読み込むためには下記のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<sample> <h1>h1タグ表示</h1> <style scoped> h1 { color: #00AA00; } </style> <script> console.log('Riot.js Sample'); </script> </sample> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<sample2> <h3>h3タグ表示2</h3> <p>pタグ表示2</p> <style scoped> p { color: #0D47A1; } </style> <script> console.log('Riot.js Sample2'); </script> </sample2> |
index.htmlを実行すると下記のようにブラウザで表示されます。
tagファイルを複数読み込み:
1 2 |
<script src="./tag/sample.tag" type="riot/tag"></script> <script src="./tag/sample2.tag" type="riot/tag"></script> |
カスタムタグを指定:
1 2 |
<sample></sample> <sample2></sample2> |
カスタムタグをマウント:
*を記述することにより読み込んだtagファイルを全てマウントすることができます。
1 |
<script>riot.mount('*');</script> |
tagファイルを複数読み込んでマウントすることができます。また、1つのtagファイル内に複数のカスタムタグを定義することもできます。
今回は、PhpStormでテーマをインストールする方法を紹介します。
テーマをインストールするためには下記方法でおこないます。
既存テーマを選ぶこともできますが、テーマの種類が少ないためColor Themesというサイトから好きなテーマをダウンロードしてPhpStormにインストールすることをおすすめします。まず、好きなテーマを選択します。
詳細ページに移動したら、ダウンロードボタンをクリックします。
Configure → 設定をインポートを選択します。そしてダウンロードしたファイルを選択します。
インポートするコンポーネントを聞かれるので全て選択して実行します。
再起動を聞かれるので再起動します。
Configure → Preferencesを選択します。設定画面で「色とフォント」を選択するとインストールしたテーマが既に選択されていることを確認できます。
あとは、作業プロジェクトを開くとインストールしたテーマが適用されているのが確認できます。
PhpStormは、たくさんのテーマをインストールすることが可能です。また、インストールしたテーマは、さらに細かく設定することも可能です。
今回は、Riot.jsでカスタムタグでHTML・CSS・JSを定義する方法を紹介します。
カスタムタグでHTML・CSS・JSを定義するためには下記のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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> |
index.htmlを実行すると下記のようにブラウザで表示されます。
HTML・CSS・JSの全てが認識しているのを確認できました。
CSSの記述追加:
h1タグとpタグの色を変更。 <style scoped>を宣言することにより「sample.tag」ファイル内のみスタイルが適用されます。
1 2 3 4 5 6 7 8 9 10 11 |
<style scoped> h1 { color: #00AA00; } p { color: #0D47A1; } </style> |
JSの記述を追加:
コンソールに出力。
1 2 3 4 5 |
<script> console.log('Riot.js Sample'); </script> |
カスタムタグを利用することで、HTML・CSS・JSを1つのファイルとしてコンポーネント化することができます。