2016-10-15

HTMLとCSSをEmmetで書いてみる！：Visual Studio Code

Emmet VSCode

　Emmetとは、HTMLとCSS を省略記法で、効率よく書くためのプラグインです。
　Visual Studio Code（以下、VSCode）では、標準で使えます。
　例えば、

html:5

と入力して、Tabキー（＊VSCodeの場合）を押すと

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

↑のようにコードが展開されます。
　もう一例、

table>tr>th+td

と入力して、Tabキーを押すと

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

となります。
　という風に、少ない文字数で書くことが出来ます。
　VSCodeの他にも、Atom等、プラグインを導入することでEmmetが使用できるコードエディタは多数あります。

2016-10-13

『/（スラッシュ）』１つで切り替え可能なコメントの書き方

JavaScriptプログラミング JavaScript

　『/（スラッシュ）』を１つ書いたり消したりするだけで、コメントアウト部分を切り替え可能なコメントの書き方です。

書き方

　早速ですが、これ↓です。

//*
    a = 1; 
/*/
    a = 2; // こっちがコメントアウト
//*/

　↑の１行目の先頭の『/（スラッシュ）』を１つ消すと

/*
    a = 1; // こっちがコメントアウト
/*/
    a = 2;
//*/

　コメントアウトの部分が切り替わります。
　
　単行コメント『//』と複数行コメント『/* */』を上手く組み合わせています。

あとがき

　普通のコメントの書き方で事足りるのですが、ふと使いたくなる時があります。
　そんな時はいつもうろ覚えなので、メモとして記事にしました。
　
　JavaScripの他にも、コメントの書き方が同じ言語なら使えますね。
　尚、CSSは、複数行コメント『/* */』しかないという罠。
　

2016-06-21

Tiledのマップデータから物理空間を作成する！：Cocos Creator

Tiled Chipmunk Cocos Creator

　Cocos Creatorは、物理エンジンのChipmunkを使用できます。
　物理エンジンとは、物体が落下したり衝突したりした時の動きを計算してくれるものです。
　アクションゲーム等を作る際に利用出来ます。
　Tiledのマップデータから、アクションゲームのステージを作成するには、壁・床・ブロック等がそれぞれ物理的に認識される必要があります。
　
　今回は、Tiledで壁・床・ブロックとしてオブジェクトを配置し、Chipmunkを利用して、これらがプログラム上で物理的に認識されるようにします。
　 f:id:mmorley:20160620173045p:plain:w500
　下図はプロジェクトの実行画面です。
　タッチした位置に丸い物体が生成されるようにしています。
　壁・床・ブロックに対して、跳ねたり、転がったり、留まったりします。
　 f:id:mmorley:20160620174258p:plain:w300
　下記に動くデモがあります。

2016-05-27

Tiledのオブジェクトのデータの中身を見る！：Cocos Creator

Cocos Creator Tiled

　Tiledについては、こちらの記事で基本的なマップの作り方やオブジェクトデータの取得方法について説明しています。
mmorley.hatenablog.com
　Tiledでは、下記のオブジェクトを配置出来ます。

	四角形
	楕円形
	ポリゴン
	ポリライン

　これらをCocos Creatorで読み込んだ時のデータの中身について調べました。

2016-05-26

replace()の機能のまとめ！『正規表現、function()、arguments、RegExp()』：JavaScript

JavaScriptプログラミング JavaScript

　『replace()』は、文字列の置換を行う関数です。
　基本的な使い方は、下記の通りです。

var text = "abcabc";
var result = text.replace(/a/g, "1"); // "abcabc"内の"a"を最後まで検索して"1"に置換する
// 結果：resultは"1bc1bc"になる

　『replace()』の第１引数の『/a/g』は、検索する文字列を正規表現で表したものです。

正規表現では、検索する文字列を『/（スラッシュ）』で囲みます。
末尾の『g』は、最後まで探すというフラグです。
フラグには下表のようなものがあります。

フラグ意味

g １個目だけでなく最後まで検索します。

i 検索の際に大文字と小文字を区別しません。

m 複数行に渡って検索します。

＊『g』フラグを付けないと１個目しか置換しません。
＊また『text.replace("a", "1");』のように通常の文字列で検索すると１個目しか置換されません。
```
var text = "abcabc";
var result = text.replace(/a/, "1");  // resultは"1bcabc"になる（１個目だけ置換）
var result = text.replace("a", "1");  // resultは"1bcabc"になる（１個目だけ置換）
```
　
　正規表現を使う利点は、"文字のパターン"で検索出来ることです。
　例えば、『"'abc','de',f"』で'abc'と'de'を1に変えたい場合、『'（シングルコーテーション）で囲まれている文字列』というパターンで検索することで、文字の種類、長さが異なる'abc'と'de'を一度に置換することが出来ます。実際にどうやるかは後述しています。
　
　また、『replace()』の第２引数にコールバック関数を指定すると、見つかった文字ごとに違う処理を行うことが出来ます。
　
　上記の例を含めて『replace()』の様々な使い方をまとめました。
続きを読む

フラグ	意味
g	１個目だけでなく最後まで検索します。
i	検索の際に大文字と小文字を区別しません。
m	複数行に渡って検索します。