Monthly Archives: 1月 2017

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

 

phpstorm_001_01

 

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

 

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

 

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

phpstorm_007_01

 

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

phpstorm_007_02

 

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

 
 

 

PhpStorm #006 – ターミナル表示

 

phpstorm_001_01

 

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

 

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

 

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

phpstorm_006_01

 

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

phpstorm_006_02

 

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

phpstorm_006_03

 

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

phpstorm_006_04

 

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

phpstorm_006_05

 

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

 
 

 

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

 

riot-js_001_01

 

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

 

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

 

index.html

 

sample.tag

 

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

 

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

 

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

 

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

 
 

 

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

 

phpstorm_001_01

 

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

 

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

 

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

phpstorm_005_01

 

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

phpstorm_005_02

 

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

 
 

 

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

 

riot-js_001_01

 

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

 

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

 

index.html

 

sample.tag

 

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

 

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

 

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

 

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

 
 

 

Riot.js #007 – 条件分岐

 

riot-js_001_01

 

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

 

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

 

index.html

 

sample.tag

 

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

 

条件分岐でタグを表示:

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

 

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

 
 

 

Leaflet #027 – ヒートマップ

 

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

 

index.html

 

stylesheet.css

 

script.js

 

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

example

 

サークル半径変更:

 

ぼかし変更:

 

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

 
 

 

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

 

riot-js_001_01

 

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

 

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

 

index.html

 

sample.tag

 

sample.json

 

sample2.json

 

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

riot-js_006_01

 

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

 

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

 

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

 
 

 

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

 

riot-js_001_01

 

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

 

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

 

index.html

 

sample.tag

 

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

riot-js_005_02

 

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

 

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

 

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

 
 

 

PhpStorm #004 – 画面分割

 

phpstorm_001_01

 

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

 

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

 

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

phpstorm_004_01

 

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

phpstorm_004_02

 

画面分割ができました。

phpstorm_004_03

 

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

 
 

 

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

 

try_005_99

 

今回は、Node.jsAzure 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」を選択。
try_005_01

 

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

 

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

 

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

 

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

 

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

try_005_06

 

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

script.js

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

try_005_16

 

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

index.js

 

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

 

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

 

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

 

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

 
 

 

Riot.js #004 – 値の代入

 

riot-js_001_01

 

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

 

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

 

index.html

 

sample.tag

 

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

riot-js_004_01

 

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

 

変数「comment2」の値を設定:

 

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

 

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

 
 

 

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

 

riot-js_001_01

 

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

 

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

 

index.html

 

sample.tag

 

sample2.tag

 

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

riot-js_003_01

 

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

 

カスタムタグを指定:

 

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

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

 

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

 
 

 

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

 

phpstorm_001_01

 

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

 

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

 

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

phpstorm_003_01

 

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

phpstorm_003_02

 

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

phpstorm_001_02

 

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

phpstorm_003_03

 

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

phpstorm_003_04

 

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

phpstorm_003_05

 

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

phpstorm_003_06

 

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

 
 

 

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

 

riot-js_001_01

 

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

 

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

 

index.html

 

sample.tag

 

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

riot-js_002_01

 

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

 

CSSの記述追加:

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

 

JSの記述を追加:

コンソールに出力。

 

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