Monthly Archives: 2月 2017

Leaflet #028 – ズームレベルで背景地図切り替え

 

Leafletでズームレベルで背景地図を切り替えるには、「Leaflet.MultiTileLayer」と言うプラグインを利用すると便利です。

 

index.html

 

stylesheet.css

 

script.js

 

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

leaflet_028_02

example

 

切り替わるズームレベル変更:

 

ズームレベルで背景地図を切り替えしたい時に便利なプラグインです。

 
 

 

PhpStorm #012 – TODOリスト

 

phpstorm_001_01

 

今回は、PhpStormでTODOリストを利用する方法を紹介します。

 

TODOリストを利用するためには下記方法でおこないます。

 

コメント箇所の頭に「TODO」を追加します。

phpstorm_012_01

 

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

phpstorm_012_02

 

コメントアウトでTODOと記述した箇所のみTODOリストとして一覧表示されます。

phpstorm_012_03

 

PhpStormのTODOリストを利用すると、コメントアウトをTODOリストとして管理できるのでとても便利です。

 
 

 

PhpStorm #011 – 一括コメントアウト

 

phpstorm_001_01

 

今回は、PhpStormで一括コメントアウトする方法を紹介します。

 

一括コメントアウトするためには下記方法でおこないます。

 

コメント → 行コメントの適用・ブロックコメントの適用を選択。もしくは、command + /かoption + command + /。

phpstorm_011_01

 

行コメントの適用を選択した場合は1行単位でコメントアウトされます。

phpstorm_011_02

 

ブロックコメントの適用を選択した場合はブロック単位でコメントアウトされます。

phpstorm_011_03

 

コメントアウトした箇所に同じように、command + /かoption + command + /を実行するとコメントが解除されます。

phpstorm_011_04

 

PhpStormのでコメントアウトする時は、一括機能以外に1行単位とブロック単位も指定可能です。

 

 

PhpStorm #010 – 全部検索

 

phpstorm_001_01

 

今回は、PhpStormで全部検索を利用する方法を紹介します。

 

全部検索を利用するためには下記方法でおこないます。

 

shiftを2回押す。

phpstorm_010_01

 

検索画面が表示されたら、検索したいファイル名や変数名などを入力します。

phpstorm_010_02

 

PhpStormのSearch Everywhere機能を利用すると、ファイル名や変数名や関数名など様々なテキストをキーワードで検索することができるので便利です。

 
 

 

Soft #008 – Runstant

 

soft_008_09

 

HTML・CSS・JSをWeb上で公開できるサービスはCODEPENが有名ですが、今回はRunstantというWebサービスを紹介したいと思います。Runstantは日本の方が作られたWebサービスです。

 

管理画面はこんな感じです。新規でプロジェクトを作成する場合は電球マークをクリックします。

soft_008_01

 

プロジェクトが作成されました。

soft_008_02

 

HTML・CSS・JSをそれぞれタブで記述します。今回はLeafletのサンプルを記述してみます。

soft_008_03

soft_008_04

soft_008_05

 

コードの記述が終わったら、実行ボタンをクリックします。地図もきちんと描画されています。また、コンソールでの確認もすることも可能です。
soft_008_06

 

そのまま管理画面に戻ると登録されたプロジェクトを確認することができます。サンプルも登録されているのを確認できました。

soft_008_07

 

シェアボタンを押すと、URLや埋め込みやSNSでのシェアをすることも手軽にできます。

soft_008_08

 

blogの埋め込みもこんな感じで簡単にできます。

 

RunstantなどのWebサービスを利用することにより、手軽にコードや実行結果をWeb上で公開することができます。

 
 

 

PhpStorm #009 – メニュー検索

 

phpstorm_001_01

 

今回は、PhpStormでメニュー検索を利用する方法を紹介します。

 

メニュー検索を利用するためには下記方法でおこないます。

 

ヘルプ → Find Actionを選択。または、command + shift + A。

phpstorm_009_01

 

実行すると検索画面が表示されます。

phpstorm_009_02

 

知りたい文字で検索してみます。今回は「縦」と入力しました。すると、「縦に分割」メニューが検索されました。

phpstorm_009_03

 

PhpStormのFind Action機能を利用すると、様々なメニューをキーワードで検索することができるので便利です。

 
 

 

Riot.js #010 – カスタムタグの入れ子

 

riot-js_001_01

 

今回は、Riot.jsでカスタムタグを入れ子にする方法を紹介します。

 

カスタムタグを入れ子にするためには下記のように記述します。

 

index.html

 

sample.tag

 

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

 

親タグで子タグを読み込み:

 

親タグの中に子タグを記述することによりカスタムタグを入れ子にすることができます。その場合は親タグが読み込まれた時に子タグもマウントしなくても読み込まれることになります。

 
 

 

PhpStorm #008 – 変数・関数検索

 

phpstorm_001_01

 

今回は、PhpStormで変数・関数検索を利用する方法を紹介します。

 

変数・関数検索を利用するためには下記方法でおこないます。

 

検索したい変数や関数の上でcommand + クリック。または、command + B。

phpstorm_008_01

 

選択した変数や関数に関係する場所にジャンプします。

phpstorm_008_02

 

ファイル構造で検索したい場合は、編集 → Find → 使用箇所の検索を選択。または、option + F7。

phpstorm_008_03

 

検索結果を一覧で確認できます。

phpstorm_008_04

 

PhpStormの変数・関数検索を利用することにより、変数や関数がどこで使われているか関係性を知ることができます。便利です。