OmniAICreator/Qiita-1.07M huggingface dataset:
nodebrewでNode.js管理はじめたらgulp動かなくなったのでメモ

#nodeのバージョン管理
バージョン管理したいしたいと思いながらも、
いままでパッケージのnode.jsだったので管理なんて全くできてなかった。
今回少し余裕ができたので、
nodebrewを入れて、nodeのバージョン管理することに。

ただアップデートするとgulpうごかなくなるので
次回の対応のためにやったことをメモ。

##nodebrew
参考にさせていただいたのはこちらの記事。
（ありがとうございますありがとうございます）
http://tipsbear.com/homebrew-nodebrew-nodejs/

パッケージでいれてたnode.jsを削除して、
nodebrewいれてnodeを最新版に更新した。すると…

#gulp動かない
一通り作業が終わってgulp立ち上げたら、
gulp動かなくなってた！

エラーはこれ。

```lang:
Error('`libsass` bindings not found. Try reinstalling `node-sass`?');
```
#node-sass使ってる人は注意
**node-sassつかってると、nodeのバージョン変更ごとに
node-sassをインストールしなおさなきゃいけない**
ていう話は聞いてたのと、
前に手動アップデートしたときも同じエラーが出て直せたから、
もっかいインストールすればいいんでしょ勝った！！
って思って下記をひとつずつ実行して確認してみた。

```lang:
$ sudo npm install node-sass
$ sudo npm rebuild node-sass
```

あれ、できない…
いっかいunistall必要なんだっけ。

```lang:
$ npm uninstall gulp-sass node-sass
$ npm install gulp-sass
$ npm install node-sass
```
gulpさんうごかねーよ。。
他にも色々ググって最終的に下記を試してみたら…

```lang:
npm cache clean && node ./node_modules/node-sass/scripts/install.js
```
**参考元URL**
http://stackoverflow.com/questions/36078934/errorlibsass-bindings-not-found-try-reinstalling-node-sass-using-node

エラー内容がこんなのに変わった！できた模様。

```lang:
Error: Cannot find module 'gulp-sass'
```
とりあえずないって言われてるのでローカルにgulp-sassを入れてみる。
これはもしかしたら
そのまえごちゃごちゃやって消したままになってたのかも。

```
sudo npm install gulp-sass
```

gulp起動してくれました＞＜

#homebrewの余談

nodebrewのインストールは、homebrewを経由すると
良いことがあるよって書いてたので入れてみようとしたけど…
（**ちなみにOS X El Capitanの人はhomebrew使えないので注意！**[参考記事](http://tipsbear.com/homebrew-nodebrew-nodejs/)）
すでにあるっていわれた。




homebrewアップデートされてないぞって怒られたのでアップデート実行したら
さらにエラーがでてきて、そこに**アンインストールのコード**が書かれてて、
軽い気持ちでその通り実行してみたら…

**rubyが消滅した…**

ぎょえー。
プログラマさんに相談したらめっちゃ怒られた(′A')
homebrewは消しちゃダメなやつなんですねごめんなさい！

パッケージからインストールせざるを得ない状態になってて、
とりあえずパッケージからrubyインストール…
その後無事に一通りインストール無事完了。

gulpたちあげるとき、node-gypだけないぞって怒られてしまったけど、
下記で軌道に乗れた。

```
$ sudo npm install -g node-gyp
```

以上書き殴りメモでした。
JavaScriptの記述場所まとめ

HTMLのどこでJavaScriptを記述するか、選択肢が多すぎて迷ったので、まとめてみた。

# head tag
## defer/asyncなし
* HTMLのレンダリング前に**同期的に**ロード・実行
* HTMLのレンダリング前に実行する必要があり、他のJavaScriptと依存関係がある場合のみ使う
* HTMLのレンダリング・他のコンテンツのロードが遅れるのでできるだけ少なくするべし

## deferあり
* HTMLのレンダリングと並行して**非同期で**ロード
* HTMLのレンダリング後に**同期的に**実行
* HTMLのレンダリング後に実行する必要があり、他のJavaScriptと依存関係がない場合
  * 本来はJavaScriptの実行順序は保証されるという仕様だが、保証されないブラウザも存在するらしいので、他のJavaScriptと依存関係がある場合は使えない

## asyncあり
* HTMLのレンダリングと並行して**非同期で**ロード
* HTMLのレンダリングと並行して**非同期で**、ロード完了次第実行
* HTMLのレンダリング状況に依らず実行可能で、他のJavaScriptと依存関係がない場合
  * 例えばdocument.write()などを使っている時は使えない
  * また、HTML5の仕様なので、古いブラウザでは使えない

# body tagの最後
* HTMLのレンダリング後に**同期的に**ロード・実行
* HTMLのレンダリング後に実行する必要があり、他のJavaScriptとも依存関係がある場合
* 一番わかりやすく一般的。迷ったりよくわからなかったらこれ。

# elementの中
* 非推奨

# まとめ

```
if (HTMLレンダリング前に実行が必要？)
  →head tag without defer or async
else if (HTMLレンダリング後に実行が必要？)
  if (他のJavaScriptとの依存関係はある？)
     →body tagの最後
  else
     →head tag with defer
else
  if (他のJavaScriptとの依存関係はある？)
     →body tagの最後
  else
     if (HTML5非対応ブラウザもターゲット？)
         →head tag with async
     else
         →head tag with defer and async
```

# 参考
[scriptのdefer/asyncを理解し、ページの高速化方法を探る](http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/)
[ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）](https://html5experts.jp/yoshikawa_t/877/)
[jQueryをページの最後にロードのススメ](http://golb.hatenadiary.jp/entry/20120328/1332940138)
[scriptタグの位置でもやもや](http://qiita.com/maccotsan/items/69cb241af800f4006d99)
[JavaScriptの記述場所](http://wp-p.info/tpl_rep.php?cat=js-biginner&fl=r2)
[JavaScirptの記入場所](http://www.pori2.net/js/kihon/2.html)
一度移動したディレクトリに対して、ディレクトリ名の一部を入力するだけで移動できるautojump

# autojumpとは
`autojump` は、zshにおける効率的なディレクトリ移動を支援するためのプラグインです。

一度あるディレクトリに移動したあとは、そのディレクトリ名の一部だけを入力すれば移動が出来ます。

たとえば、 `cd /usr/local/apache2/conf/extra` した後、は
`j ex` と入力するだけで、先ほどのディレクトリに移動が出来ます。

コマンドは `j` になります。

複数の該当候補がある場合は、タブを押して選択することが出来ます。

# インストール
まずは、git cloneをします。

```
$ mkdir .zsh
$ cd .zsh
$ git clone git://github.com/joelthelion/autojump.git
$ cd autojump
$ ./install.py   

Please manually add the following line(s) to ~/.zshrc:

        [[ -s /home/sato/.autojump/etc/profile.d/autojump.sh ]] && source /home/sato/.autojump/etc/profile.d/autojump.sh

        autoload -U compinit && compinit -u

Please restart terminal(s) before running autojump.
$ 
```

次に 上記インストールの最後に表示された内容を、`.zshrc`に記載します。

```
[[ -s /home/sato/.autojump/etc/profile.d/autojump.sh ]] && source /home/sato/.autojump/etc/profile.d/autojump.sh
autoload -U compinit && compinit -u
```
BashでいうところのPS1環境変数設定をPowerShellで

# PowerShellでコマンド入力中に、ディレクトリ名が長すぎて困る・・・(´・ω・`)
Powershellの青い画面でコマンドを入力していると、カレントディレクトリ名が長すぎてスクロールしなくちゃならないことがあって嫌でした。
BashでいうところのPS1の変更ができたら、カレントディレクトリの次の行で入力したら便利になるのですが・・・。

# prompt関数
PS1の代わりに、prompt関数を定義しておくといいらしいです。
なお、この関数が文字列を返さない場合は、PS>がでるそうです。

##例1
ログインユーザー名、現在時刻、カレントディレクトリ、その次の行に入力できる場所、とするには、次のようにします。
###関数定義：

```ps1:powershell
function prompt {
    Write-Host "$(whoami) $(get-date) " -BackgroundColor Blue -ForegroundColor White -NoNewline;
    Write-Host "$(pwd)" -BackgroundColor Yellow -ForegroundColor Blue;
}
```
###出力結果：

```
vm-windows81\hiroshi 03/20/2016 17:16:37 C:\Users\hiroshi
PS>
```


## 例2
上記とあまり変わりませんが、PS>の場所に現在時刻を移動させた場合です。
###関数定義：

```ps1:powershell
function prompt {
    Write-Host "$(whoami) " -BackgroundColor Blue -ForegroundColor White -NoNewline;
    Write-Host "$(pwd)" -BackgroundColor Yellow -ForegroundColor Blue;
    return "$(get-date) > ";
}
```
###出力結果：

```
vm-windows81\hiroshi C:\Users\hiroshi
03/20/2016 17:44:25 > 
```

## この関数を書いた後に保存しておく場所
.bashrcでexportする代わりに、
%UserProfile%\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1 にこの関数定義を書いとくと、この設定が自動で反映されます。

# 最後に
bashの環境変数のPS1は、何の略なんですかね。PowerShellの略ではなさそうですが。調べたら、"Prompt statement"の略だそうです。
ややこしいですね。意地悪して、わかりにくく書いたわけではないです。

# 参考
- about_Prompts
-- https://technet.microsoft.com/ja-jp/library/hh847739.aspx
- Windows powershell: changing the command prompt
-- http://stackoverflow.com/questions/5725888/windows-powershell-changing-the-command-prompt
- カレントディレクトリをウィンドウタイトルに表示してプロンプトを短くする
-- http://qiita.com/kmr_hryk/items/424bb80e14f04e762578
- PowerShellでのプロファイル (.bashrcのようなもの)
-- http://qiita.com/bitnz/items/400bb6a0b124b8b3d398
- Bash Shell: Take Control of PS1, PS2, PS3, PS4 and PROMPT_COMMAND
-- http://www.thegeekstuff.com/2008/09/bash-shell-take-control-of-ps1-ps2-ps3-ps4-and-prompt_command/
Dropzone をAngularから使う その1



ng-includeでDropzoneを定義したHTMLを読み込む場合では
サンプルを貼り付けただけではFormがドロップゾーンに変化しないので、
コントローラーから明示的にdropzone()を呼ぶ


```html
<div ng-controller="welcomeCtrl">
    <div class="well">
        <form method="post" enctype="multipart/form-data"
              class="dropzone" id="dropzoneForm">
            <div class="fallback">
                <input name="file" type="file" multiple />
                <input type="submit" value="Upload" />
            </div>
        </form>
    </div>

    <style type="text/css">
        .dz-max-files-reached {
            background-color: red;
        }
    </style>

</div>

```


```js

var app = angular.module('app');
app.controller(fileCtrl', function ($scope, $timeout) {
    $("#dropzoneForm").dropzone({ url: "/FileUpload/SaveUploadedFile/" });
});
PHPStormのファイルの自動保存機能をオフにして動作を軽くする

PHPStorm（IntelliJ）のファイル自動保存機能は、データ喪失を未然に防げるので便利ですが、Sambaなどのリモートサーバ上のディレクトリをマウントしていたり、Grunt Watchでファイル保存をトリガーにビルド実行を行う設定にしている場合、頻繁に保存が走ることになりPHPStormの動作が重くなってしまいます。

そんなときはファイルの自動保存機能をオフにしてしまいます。

#実施環境

- Macbook Pro 15インチ
- Mac OS X 10.10 Yosemite
- PHPStorm 10


#Synchronization設定を行う

Synchronizationとは、PHPStormから別のアプリケーションにフォーカスを移動したときの動作設定を行う設定画面のことです。

設定画面は、Appearance & Behavior > System Settings > Synchronization にあります。


![スクリーンショット 2016-03-20 17.34.40.png](https://qiita-image-store.s3.amazonaws.com/0/39468/07fc2ede-3ec3-18c5-2ed1-946fe56ae8ef.png)


###1. Synchronize files on frame activation

外部変更されたファイルを検出して、ディスクから再読み込みするかどうか。
デフォルト：**オン**

###2. Save files on frame deactivation
編集中のファイルがあるときに、別のアプリケーションにウインドウを切り替えたときにファイル保存をするかどうか。
PhpStormからフォーカスが外れたときにファイルが自動保存される。
デフォルト：**オン**

###3. Save files automatically if application is idle for number sec
編集中ファイルが存在する場合、一定の時間アイドル状態にあるときに自動保存するかどうかを秒単位で指定する。
デフォルト：**オフ**

###4. Use ”safe write” (save changes to a temporary file first)
安全なファイル保存をするかどうか。
デフォルト：**オン**

ぼくは 2 の「Save files on frame deactivation」がわずらわしいのでオフにしています。

PHPStormの動作が重たいと感じている場合は、これら4つのチェック項目すべてオフにしてしまいましょう。

この設定をしておけば、意図して保存「⌘ + S」をしない限りはファイル保存が走らなくなります。
RxJS調査メモ

RXといえば仮面ライダーRXが真っ先に思い浮かびあがるが最近はRxJSなるものが来ているらしいのでちょっと勉強

まずは下記に目を通した
https://github.com/Reactive-Extensions/RxJS
http://qiita.com/erukiti/items/6a82dfd3506e9773d592
http://liginc.co.jp/web/js/151272

RxJSのよいとこは
非同期処理におけるイベントドリブン型の処理を用意に扱えて、エラーハンドリングも行いやすい
といったところか

promiseとの違いは
自分は普段はbluebirdをつかってpromiseを使っているがそことの違いはなんだろうか

callback地獄からの脱却という点ではどちらも同じ方向性のようにみえる

rxは特定のイベントからの処理を扱うという点においてはobserverの作成とfilter等のoperatorはイベントドリブンな処理を書くのは便利そう
自前でpromise作ってthenでfilterすれば同様のことができるがrxのほうがシンプルか

RxJSにはpromiseからの変換もある
http://qiita.com/bouzuya/items/09c43e2f3e502a025bf6

bluebirdでベンチマークがあった
memory使用量みるとrxのほうがかなりでかそう。。。
http://bluebirdjs.com/docs/benchmarks.html

競合のライブラリ
bacon.jsとkefir.jsというものがあるようだ
下記でまとまったいたので参考にする
http://qiita.com/kondei/items/17e5d4867a0652911e52

es7ではstreamの採用の流れがあるようなのでstreamを理解しておいたほうがよいか

早いは正義ということで次はkefir.jsを調べてみる
v3がでているので上記サイトで調査されたときよりは安定してそう

react.js絡み
react.js+refluxでのwebサービス開発していたときにaction/storeが冗長的に感じていた。fluxからRxJS/bacon.jsを使った流れにシフトしていったほうが時代の流れか。てか今ならreduxを使いredux-rxとかか
http://qiita.com/kitfactory/items/6da4dc89822dc59dc389

参考
RxJSから始まっていろいろみていたら下記の内容が非常によくまとめられていてとても参考になった
http://qiita.com/masakielastic/items/e769f111932e9061ffd4
シェルでタブを押さなくても自動で補完できるようにするauto-fu.zsh

# auto-fu.zshとは
シェル操作において、ディレクトリやファイル名を補完をするには、タブキーを押す必要があります。
この時タブを押す行為を無駄だと思ったことはありませんか？

タブを押さなくても自動的に補完をしてくれるのが、` auto-fu.zsh` です。

たとえば、今のディレクトリの下に `test` というディレクトリがあるとします。
`cd t` と入力しただけで、タブを押さなくても`cd test/` という表示まで補完してくれます。

名前の通り、zsh用のツールになります。

# auto-fu.zshのインストール

まずはgit cloneを行います。

```
$ mkdir .zsh
$ cd .zsh
$ git clone git://github.com/hchbaw/auto-fu.zsh.git
$ cd auto-fu.zsh
$ git checkout -b pu origin/pu
```

ブランチを切り替える理由は、シェルを起動したときに以下のメッセージが出ることを防止するためです。

```
Cannot rebind backward-kill-word: user:backward-kill-word-match
Cannot rebind kill-word: user:kill-word-match
```

次に `.zshrc` に `auto-fu.zsh` の読み込みを記載します。

```
source $HOME/.zsh/auto-fu.zsh/auto-fu.zsh
function zle-line-init(){
    auto-fu-init                                                                                           
}                                                                                                             
zle -N zle-line-init                                                                                          
# 「-azfu-」を表示させないための記述                                                                              
zstyle ':auto-fu:var' postdisplay $''
```
Adobe Illustrator CCでオリジナルのカラーグループを保存する

# 概要

「Adobe Illustrator CC」にて、新しく作成したカラーグループを、他のファイルやアプリケーションでも使用できる形式で保存する方法。

# 前提

「スウォッチ」＞「新規カラーグループ」から、オリジナルのカラーグループを作成してあること。

# 保存手順

## 「スウォッチ」内に保存対象カラーグループだけを残す

![01.png](https://qiita-image-store.s3.amazonaws.com/0/95607/2df38c55-f6cd-0829-c34b-b68f0cb38a57.png)

「スウォッチ」内から不要なスウォッチを削除する。
（なお、「なし」「レジストレーション」は削除できない。）

## 「スウォッチ」メニューから保存オプションを選択する

![02.png](https://qiita-image-store.s3.amazonaws.com/0/95607/d44d9129-311d-b285-eb33-1a4fa306eb56.png)

「スウォッチ」ウィンドウ右上のアイコンを押下するとメニューが開く。
「スウォッチライブラリを交換用として保存」を選択する。

## 名前をつけて保存

![03.png](https://qiita-image-store.s3.amazonaws.com/0/95607/214bdb56-c819-1560-4339-3bcb97e3fb6b.png)

交換用スウォッチファイル（*.ase）に名前をつけて保存する。

![04.png](https://qiita-image-store.s3.amazonaws.com/0/95607/f41ee7f9-2581-4460-85cd-482ba1a97eb0.png)

上図ダイアログの通り、他のアプリケーションでは使用できない形式も存在することに注意。
以上で保存は完了。

# 読み込み手順

## 「スウォッチライブラリメニュー」から保存したスウォッチを開く

![05.png](https://qiita-image-store.s3.amazonaws.com/0/95607/60ff81f7-5924-894f-5e69-e8f398e098bb.png)

「スウォッチライブラリメニュー」＞「ユーザー定義」＞（保存したスウォッチ）を選択すると、当該スウォッチが開かれる。

![06.png](https://qiita-image-store.s3.amazonaws.com/0/95607/8a84575d-c2c8-324b-2aab-651fcb6b28ea.png)

カラーグループをダブルクリックすると、編集中のファイルの「スウォッチ」にカラーグループが追加される。

# 動作確認環境

Windows 10 Home 1511
Adobe Illustrator CC 19.1.0

# 参考Webページ

[Illustrator ヘルプ / スウォッチの使用と作成](https://helpx.adobe.com/jp/illustrator/using/using-creating-swatches.html)
案 > USBメモリ形状 > IPアドレス表示

## 仕様

- 形状: USBメモリのようなもの
- 7セグメントLEDまたはOLEDなど表示部を持つ
- 機能: USB接続したWindows PCのIPアドレスを表示する


## 用途

DHCPからIP自動取得するリモートデスクトップ接続用PC（液晶モニタを接続してない状態）のIPアドレスを表示する

## メモ

Raspberry Piで7セグLEDでのIPアドレス表示(自作)を使っている中で、同じことがPCに対してもできたらいいなぁと思った。

- 接続時にpoweshell起動
- powershellでIP取得
- powershellからIPを送信
- IP受信uCが液晶に表示
UnityのAnimatorでコールバックを差し込む方法

```csharp:AnimatorFinishEventTrigger.cs
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// Animator finish event trigger.
/// </summary>
public class AnimatorFinishEventTrigger : MonoBehaviour
{
	/// <summary>
	/// Occurs when on finish animation.
	/// </summary>
	public Action<string> OnFinishAnimation { set; private get; }

	/// <summary>
	/// Awake this instance.
	/// </summary>
	void Awake()
	{
		// Get a reference to the Animator Controller:
		RuntimeAnimatorController ac = GetComponent<Animator>().runtimeAnimatorController;
		string methodName = (OnFinishAnimationTrigger as Action<string>).Method.Name;

		foreach(var clip in ac.animationClips)
		{
			var finishEvent = new AnimationEvent();
			finishEvent.functionName = methodName;
			finishEvent.stringParameter = clip.name;
			finishEvent.time = clip.length;
			clip.AddEvent(finishEvent);
		}
	}

	/// <summary>
	/// Raises the finish animation trigger event.
	/// </summary>
	/// <param name="name">Name.</param>
	private void OnFinishAnimationTrigger(string name)
	{
		if(this.OnFinishAnimation != null)
		{
			this.OnFinishAnimation(name);
		}
	}
}
```

`AnimatorFinishEventTrigger`を貼る。
これをGetComponentか何かで取得して、

```
GetComponent<AnimatorFinishEventTrigger>().OnFinishAnimation = (str)=>{Debug.Log(str)};
```
のようにする。
UnityのAnimatorでコールバックを差し込む方法

```csharp:AnimatorFinishEventTrigger.cs
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// Animator finish event trigger.
/// </summary>
public class AnimatorFinishEventTrigger : MonoBehaviour
{
	/// <summary>
	/// Occurs when on finish animation.
	/// </summary>
	public event Action<string> OnFinishAnimation;

	/// <summary>
	/// Awake this instance.
	/// </summary>
	void Awake()
	{
		// Get a reference to the Animator Controller:
		RuntimeAnimatorController ac = GetComponent<Animator>().runtimeAnimatorController;
		string methodName = (OnFinishAnimationTrigger as Action<string>).Method.Name;

		foreach(var clip in ac.animationClips)
		{
			var finishEvent = new AnimationEvent();
			finishEvent.functionName = methodName;
			finishEvent.stringParameter = clip.name;
			finishEvent.time = clip.length;
			clip.AddEvent(finishEvent);
		}
	}

	/// <summary>
	/// Raises the finish animation trigger event.
	/// </summary>
	/// <param name="name">Name.</param>
	private void OnFinishAnimationTrigger(string name)
	{
		if(this.OnFinishAnimation != null)
		{
			this.OnFinishAnimation(name);
		}
	}
}
```

この`AnimatorFinishEventTrigger`コンポーネントを任意のゲームオブジェクトへ貼る。
これを`GetComponent`等で取得して、

```cs
GetComponent<AnimatorFinishEventTrigger>().OnFinishAnimation = (str)=>{Debug.Log(str)};
```
のようにする。
Rust FFIにおけるZero-length Array / Flexible Array Memberについて

# はじめに
[この記事]()では、Cの構造体におけるいわゆるZero-length Array / Flexible Array Member(このイディオム自体知らなかったわけですが)をRustのFFIから扱う際に`std::mem::transmute`を使って強引にキャストしていました。その後いろいろ試したところ、特に`transmute`が必須というわけでもなかった、ということが分かりましたので、現時点で妥当と思うやり方を書いておきます。
（もっといいやり方がありましたらお教えください）

# Zero-length Array / Flexible Array Member
この記事で扱うのは、以下のようなCの構造体をRustのFFIでどう扱うか、です。

```c
struct line {
    int length;
    char contents[0];
};

// 以下はC99のFlexible Array Memberを使った場合
struct line {
    int length;
    char contents[];
};
```

構造体中で可変長の配列を表現したい場合、普通は配列へのポインタにすると思いますが、構造体の末尾に可変長配列そのものを入れてしまうということが、よく行われるようです。このとき、構造体定義上は配列の長さは分からないので何らかの固定値にしておいて、実際の長さは別途構造体メンバで指定します。この仮の固定値は0でもよくて、これがZero-length Arrayということのようです。
また、C99ではFlexible Array Memberとして標準化されたようです。

# Rustでの`struct`定義
`struct`の定義は以下のような感じが良さそうです。配列サイズを0とする場合は[Zero Sized Types (ZSTs)](https://doc.rust-lang.org/nomicon/exotic-sizes.html#zero-sized-types-zsts)ということになって問題ないようです。

```rust
#[repr(C)]
pub struct line {
    pub length: c_int,
    pub content: [c_char;0],
}

// あるいは
#[repr(C)]
pub struct line {
    pub length: c_int,
    pub content: [u8;0],
}
```

意味的には素直に可変長配列として[Dynamically Sized Types (DSTs)](https://doc.rust-lang.org/nomicon/exotic-sizes.html#dynamically-sized-types-dsts)を使いたいところですが、`struct`全体がUnsizedになってしまう、DSTのメモリレイアウトとZero-length Arrayのそれが一致する保証がなさそう、ということで現時点では使えなさそうです。[こちら](https://doc.rust-lang.org/nomicon/other-reprs.html#reprc)にも`#[repr(C)]`におけるDSTは使えなさそうに書いてあります。

また、Cの`char`はlibcクレートでは`i8`となっていますが、Rustの文字列は`u8`がベースになっているので`pub content: [u8;0]`とするということもできます。若干気持ち悪いですが、ここで`c_char`(すなわち`i8`)としてしまうと後でRustの文字列に変換する際に`transmute`が必要になってしまいます。

# 構造体メンバへのアクセス
以下のようにスライスを作ってやればアクセス出来ます。

`struct`定義で`pub content: [c_char;0]`とした場合、`c_char`が`i8`なので変換には`transmute`が必要になります。

```rust
let line: *const line = ...
let len = unsafe { (*line).length as usize };
let ptr = unsafe { std::mem::transmute::<&[c_char;0], *const u8>( (*line).content ) };
let slice = unsafe { std::slice::from_raw_parts( ptr, len ) };
```

`pub content: [u8;0]`の場合、型変換は`&[u8;0]`から`*const u8`ですが、これは`as`で変換出来ます。

```rust
let line: *const line = ...
let len = unsafe { (*line).length as usize };
let ptr = unsafe { (*line).content as *const u8 };
let slice = unsafe { std::slice::from_raw_parts( ptr, len ) };
```

この2つのどちらがいいかはよく分かりません。結局Cのcharが8bitでなかった時点で、最終的に`slice::from_raw_parts`(あるいはこの後文字列に変換する部分)ではおかしくなるわけで、個人的には見た目重視で`transmute`がない後者かなぁと思います。
PHPStormで自動的にFTP／SFTPアップロードされるようにする

開発サーバとローカルマシン間でファイルを自動的に同期する方法として、Vagrant の synced_folder を利用するのがモダンかつ定番になっています。

ただ、開発サーバがリモートに存在する場合はその方法は難しいですよね。

その場合の代替手法として、PHPStormにはFTP／SFTPサーバへ自動的にアップロードしてくれる機能があります。

しかも、PHPStorm上で編集したファイルだけでなく、SCSS+Compassによって吐き出されたcssファイルやGruntでビルドされたjavascriptファイルなどにも適用できます。

#実施環境

- Macbook Pro 15インチ
- Mac OS X 10.10 Yosemite
- PHPStorm 10

#まず、PHPStormでFTP／SFTPサーバを設定する

あらかじめFTPサーバの接続設定を行います。

環境設定 > Build, Execution, Deployment > Deployment を開きます。

![スクリーンショット 2016-03-20 16.18.28.png](https://qiita-image-store.s3.amazonaws.com/0/39468/7c13702d-a9a5-419a-dcf0-ccc66a004f8e.png)


リモートサーバのFTP情報を入力して［OK］ボタンをクリックします。

この時点ではファイルツリーから都度「Upload to...」を選択しなければアップロードされず、非効率です。

![スクリーンショット 2016-03-20 16.32.25.png](https://qiita-image-store.s3.amazonaws.com/0/39468/3fb2cee5-fcaf-a82c-d5d2-b30b088fbea9.png)


#自動FTP／SFTPアップロードの設定をする

PHPStorm上で編集したファイルと外部ツールによって更新されたファイルの両方を自動的にアップロードされるように設定します。

環境設定 > Build, Execution, Deployment > Deployment > Options を開きます。

![スクリーンショット 2016-03-20 16.10.15.png](https://qiita-image-store.s3.amazonaws.com/0/39468/f28b1265-1792-c54a-d34f-153231ed5a03.png)


###設定項目

 1. Upload changed files automatically to the default server :  **Always**
 2. Upload external changes :  **on**


1で**Always**を設定しておくとファイル保存時とフォーカスが外れたときの両方でアップロードされます。

2でチェックボックスを**オン**にしておくとcompassやGruntなどの外部ツールが更新したファイルも自動アップロードの対象になります。

以上、2つの項目を設定したら［OK］ボタンをクリックします。
（この設定はプロジェクト毎にする必要があります）

![スクリーンショット 2016-03-20 16.42.00.png](https://qiita-image-store.s3.amazonaws.com/0/39468/857dfd8b-6e89-7344-4595-b7bc71e510b6.png)


ファイル保存をしたり、compassがcssを吐き出したりするとPHPStormがすぐさま検知して自動的にアップロードしてくれるようになります。

開発サーバがリモートにあるとは思えないくらいリアルタイムにファイル同期されるのでとても作業が捗り、この設定はとてもオススメです。
Seriesからの正規表現によるデータ一括抽出方法

# 正規表現によるSeirieからの文字抽出
pandasで下記のように","区切りで読み込めないようなファイルから、正規表現で必要な文字列だけを抽出してDataFrameにする方法

以下サンプルデータ、そのままread_csvするとカラム数が違うためエラーとなる。

```test.csv
value1=12333,value2(fuga,hoge),value3=fuga
value1=111,value2(hoge),value3=fugahoge
```

読み取る場合はまず一列のデータとして読み取る。

```py
In[2]: import pandas as pd
In[3]: df = pd.read_csv('test.csv',header=None,sep='\t')
In[4]: df
Out[4]: 
                                            0
0  value1=12333,value2(fuga,hoge),value3=fuga
1     value1=111,value2(hoge),value3=fugahoge
```

正規表現を持ちいた分割にはSeries.str.extract()を利用して分割する。

```py
In[5]: df[0].str.extract('value1=(?P<val1>\d+),value2\((?P<val2>[\w,]+)\),value3=(?P<val3>.*)')
Out[5]: 
    val1       val2      val3
0  12333  fuga,hoge      fuga
1    111       hoge  fugahoge
```

”（）”の中身が実際に抽出する値、”?P\<hoge>”の部分でカラム名を指定できる。
指定しない場合は頭から順番に番号が振られる。

また、抽出した値はobjectとして返されるので、int型等に適宜変更する必要がある。

# 参考
http://sinhrks.hatenablog.com/entry/2014/12/06/233032
rex0220 フィールドコード設定プラグイン

[JSEdit](https://cybozudev.zendesk.com/hc/ja/articles/205452653-JSEdit-for-kintone) をよく使わせてもらっていますが、私も開発時に使えるプラグインを作ってみました。

アプリ作成時に、フィールドコードをほったらかしにしておくと、いざ JavaScript のカスタマイズを始めるときに、とても残念な状態になっています。

そんな時に、役立つプラグインです。

- 簡単にラベル情報からフィールドコードの設定ができます。
- フィールドコード未設定のアプリを、JSカスタマイズする場合に便利です。

手順
1. ラベルからフィールドコード設定
2. 保存する

※計算項目で使用している項目をプラグインで変更するとエラーになり、設定できません。
　計算項目で使用している項目は、フォーム変更で個別にフィールドコードを変更してください。

![fcode01.png](https://qiita-image-store.s3.amazonaws.com/0/100572/d4dccbee-035d-1610-770f-799c5a43acb7.png)

# ラベルからフィールドコード設定

- チェックされた対象項目について、ラベルからフィールドコードを設定
- 使用できない文字（%&#など）は、「_」に変換します
- 変更時に、同一名があった場合、枝番を付与します
- 初期表示では、RECORD_NUMBER, GROUP, SUBTABLE は、対象外


![fcode02.png](https://qiita-image-store.s3.amazonaws.com/0/100572/fa0e84c3-5d0b-651a-e0d1-84cea2262330.png)

# ラベルが同じ場合の、フィールドコード設定値

使用できない文字（%&#など）は、「_」に変換し、枝番を付与します

![fcode03.png](https://qiita-image-store.s3.amazonaws.com/0/100572/998999b1-8e63-312d-63c6-2ce1e73439a6.png)

使用禁止文字列 「 、・。（）,.!@#$%^&*+<>?‘“=~`;:”{}[]\/()」

# マニュアル入力時のチェック

使用できない文字を入力した場合、エラーメッセージが表示されます。
入力内容を訂正してください。

![fcode04.png](https://qiita-image-store.s3.amazonaws.com/0/100572/1fca22e0-e0a4-646f-7a9c-831fc1221ebe.png)

# 保存時のフィールドコードチェック

エラーになった場合、該当項目にエラーメッセージが表示されます。

![fcode05.png](https://qiita-image-store.s3.amazonaws.com/0/100572/9680cb8d-9d63-9892-c25c-3016faaa6643.png)

# フィールドコード設定プラグインの追加

![fcode06.png](https://qiita-image-store.s3.amazonaws.com/0/100572/d330d1ac-dcd5-7fd6-e149-a162444287ab.png)

# 注意事項

既に、JavaScript によるカスタマイズを行っているアプリの場合、フィールドコードを変更すると、
動作しなくなる場合があります。変更前に、影響がないか十分に確認してください。
PySide QFileDialog ディレクトのみ選択する

### PySideでディレクトリのみを選択出来るダイアログを表示
表示して選択して、取得。

```py
# ディレクリのみ選択可能なダイアログを表示(選択した値がdir_pathに入る)
dir_path = QFileDialog.getExistingDirectory(self)

# 第二引数はcaption / 第三引数は初期表示したいディレクリ(以下はユーザーのホーム)
dir_path = QFileDialog.getExistingDirectory(self, 'Open Directory', os.path.expanduser('~') )
```
表示したダイアログにファイルは表示しないようにするにはどうするんでしょうかね？

ファイルの取得は
getOpenFileName
getOpenFileNames
とかあるみたい。

参考：
https://srinikom.github.io/pyside-docs/PySide/QtGui/QFileDialog.html
http://d.hatena.ne.jp/hiramotoys/20101020/1287584018
「共感性」＋「意外性」＝「面白い」

糸井さんのインタビュー

- 「共感性」＋「意外性」＝「面白い」
- 今、食わしてくれるビジネスがあったとしたら、それを「もっと良くしていくことはできないだろうか」と考える。そこに必ずクリエイティブの要素はある。
- よく社員に言うんですが、「君は脳みそから血が出るくらい考えているか」って。僕は「何か始めたら脳みそから血が出るくらい考えるぞ」と。なぜかというと、「脳みそから血が出るくらい考える」方が面白いから。
- お客さんに直接聞いても答えはないんです。なぜならお客さん自身は、未来の自分が何を欲しいのかわかっていないことが多いから。作り手から提示することが必要です。「これが欲しかったでしょ」って。そのために、自分自身に問いかけて「売れるに決まっている」ものを探し続けるんです。
- 「これが売れるかなあ。よし頑張って売ろう」じゃだめなんです。「これは売れるぞ、もう売れるに決まっている！」というものを探して、それが本当に売れるかどうか、自分に問いかけ続ける。それが「仕入れ」です。
- 「市場」とは「お客さん」という意味で使っています。「お客さん」には、お金を持ってきてくれる人と、喜んでくれる人、２つの意味が含まれます。クリエイティブの「仕入れ」は、「市場＝お客さん」に向けたものなんです。
- まず、自分がお客さんになったら喜べるかどうか、本気で考えてみる。「人が嬉しいことって、どういうことか」、とにかくこればっかりをしつこく考える。逆の言い方もありますよね。「自分が嬉しいことって、どういうことか」を、しつこく自問自答してみる。僕らの仕事は、突き詰めるとそこに行き着く。

本当に脳みそから血が出るくらい考えて、「共感性」＋「意外性」＝「面白い」という公式が見えてくるのだと思う
自分の理解や想像力を超えていて、ピンとこないお話も多かった
これぐらい、考え抜く努力をしなくては

参考
[「面白い」をビジネスにする方法：糸井重里さん]
(http://business.nikkeibp.co.jp/atcl/report/15/252773/030900015/?P=3&ST=smart)
[脳みそから血が出るほど考える：糸井重里さん](http://business.nikkeibp.co.jp/atcl/report/15/252773/030900017/?ST=smart)
筋トレ大好きな文系女学生のJava入門〜オブジェクト指向〜

#はじめに
昨日、PS4を遂に購入しました〜 :heart_eyes: :heart_eyes: 
ソフト「龍が如く維新」を購入したんですが、登場人物の毛穴などが鮮明に見えてスッゴク驚きました！！
ストーリー中（龍が如くはストーリが長い）は、ちゃっかり自重筋トレしちゃってます :muscle: :expressionless: 

今回から、オブジェクト指向についてです！！
独学でやってるので、「これはJavaやっていくにあたって役に立つ知識だぞ！！」というのがあれば、コメントして頂けるととても嬉しいです :tulip: :tulip: 


##オブジェクト指向の目的
***人間が把握しきれない複雑さを克服***するためにオブジェクト指向は生まれた :sparkles: ！
オブジェクト指向はプログラムを簡単に変更しやすくさせたり、プログラムの一部を簡単に転用させたりできるのだ。

###オブジェクト指向の本質
***現実世界を参考***にしてプログラム開発していく！！
現実世界の登場人物たちを、コンピュータの仮想世界にオブジェクトとして再現し、現実世界と同じように連携してプログラムを作ることがオブジェクト指向の本質なのだ。

例えば・・・
ネットショッピングは、現実世界のお店を電子化 :computer: したものであり、そのプログラムは従来店員が受け持っていた「商品の検索・注文・決済」などを自動化したもの。



####オブジェクトについて
各オブジェクトは「属性」と「操作」をもっている。
**属性**は、登場人物に関する情報を覚えておくもの（名前やレベルなど）
**操作**は、登場人物が行う行動や動作の手順



今回の例は「筋トレ大好きな文系女学生」が「オブジェクト指向を理解するため」に「GUIプログラムでアニメーションする女子大生ロボット」を考えてみた！


「女子大生 :woman: 」オブジェクトがあるとする。![muscle.jpg](https://qiita-image-store.s3.amazonaws.com/0/105719/36e419dd-a0cd-5daf-96d9-c0ca60cb3400.jpeg)

女子大生オブジェクトは、自分の名前やレベルをしっかり覚えて置かなければならない（情報保持責任）。
もし「食べる」と命令すれば食べ物を食べるし、「腹筋をしろ」と命令すれば腹筋をしレベルアップさせる責任（行動責任）があるのだ！


では、女子大生と同様に、「男子大学生 :boy: 」オブジェクトもみてみよう！![sss.jpg](https://qiita-image-store.s3.amazonaws.com/0/105719/ef958f86-6ed2-aea4-df67-d4aa5604608c.jpeg)

このように、女子大生や男子大学生は複数の操作を持っている。プログラムのmainメソッドや他のオブジェクトから、そのオブジェクトの操作を呼び出すことができるのだ！！


例えば・・・

 プログラムのｍainメソッドから女子大学生に「クロール」という指示を送れば、女子大学生は仮想世界でクロールをしだす。
同様に、男子大学生に対して「クロール」と指示を送れば、仮想世界でクロールをしだす。

![swim.jpg](https://qiita-image-store.s3.amazonaws.com/0/105719/962964eb-8789-ede7-9568-42ab6b8c76b6.jpeg)

また、あるオブジェクトから別のオブジェクトへ操作の指示を送ることも可能！
mainメソッドから男子大学生に「プロテインを渡す」を呼び出す。
すると、女子大生は操作「食べる」を呼びだされ、プロテインを食べます。（実際は飲みますけど、ここはスルーでお願いします・・・ :sob: :sob: ）

![pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/105719/878f1dae-ee94-47a6-f83c-e3d8e2e267a1.jpeg)



---

その他
オブジェクト指向の指向は、「〜を大切にした」「〜を中心に据えた」という意味 :pencil2:
LibYAMLのインストール(Linux / Unix)

LibYAMLは[http://pyyaml.org/wiki/LibYAML](http://pyyaml.org/wiki/LibYAML)で開発・公開されているC言語でYAMLファイルを簡単に扱うためのライブラリです。

# インストール

- Debian Linulx

```コマンドプロンプト
 $ sudo apt-get install libyaml-dev
```

- Cygwin

```コマンドプロンプト
 $ apt-cyg install libyaml-devel
```

apt-cygをインストールしていることが前提で書いてます。


- ソースコードから

```コマンドプロンプト
 $ wget http://pyyaml.org/download/libyaml/yaml-0.1.5.tar.gz
 $ tar zxvf yaml-0.1.5.tar.gz
 $ cd yaml-0.1.5
 $ ./configure --prefix=$HOME/rootfs
 $ make
 $ make install
```

ソースからインストールする場合、「--prefix」を使うと指定したディレクトリにインストールできるので、root権限が公開されていないサーバでもインストールできます。
（apt-getやapt-cygでもパッケージアーカイブをホームディレクトリ等に展開すれば同様のことはできると思います、たぶん。）


# サンプルソースとコンパイル

[A libyaml Tutorial](https://www.wpsoftware.net/andrew/pages/libyaml.html)を開くと、サンプルのyamlファイルと読み込み・書き込みのサンプルソースが公開されています。

## コンパイル方法

- Linuxの場合

```コマンドプロンプト
 $ gcc -lyaml test.c
```

ライブラリの指定はソースファイルの前後どちらでもコンパイルが通ると思います。

- Cygwinの場合

```コマンドプロンプト
 $ gcc test.c -lyaml
```

環境依存かもしれませんが、gccのコマンドオプションの順番が固定のようです。ソースファイル→ライブラリの順でライブラリを指定しないとコンパイルが通りませんでした。
（私のコンパイル環境が特殊なのかもしれませんが。。。）

- デフォルトのファイルパス以外にインストールした場合

```コマンドプロンプト
 $ gcc -I${HOME}/rootfs/include/ -L${HOME}/rootfs/lib/ test.c -lyaml
```

のように、「-I」でyaml.hが格納されているディレクトリパスを指定し、「-L」でlibyaml.aが格納されているディレクトリを指定します。
commonmark.js + highlight.js + mathjax.jsでちょっとリッチなエディタを作ってみた（1/2）

# 概要

[自作ブログ](https://koucs.com)で投稿機能を作る祭に色々なライブラリのまとめが無く困ったことが合ったので、Qiita上に残そうと思います。
エディタを実現しているライブラリは以下の通リで、殆どが外部のものですが組み合わせることで簡単に実装することができます。
**commonmark.js + highlight.js + mathjax.js**



# サンプル（JS Bin）

<a class="jsbin-embed" href="http://jsbin.com/vivimi/embed?output">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.35.11"></script>

# エディタを実現している各種ライブラリ

## ▶ [commonmark.js](https://github.com/jgm/commonmark.js)
- Markdown -> HTMLを実現するJavaScriptライブラリ
- Markdownの形式は[Commonmark](http://commonmark.org/)という記法に則ったものを使用しています。
- 色々派生が多いので迷ったのですが、jsのライブラリで採用されているものが多いということでこれを使用。
- 実装方法はざっと⇣の感じ

``` javascript
// ライブラリからrendereとparserを読み込み
var GL ={};
GL.commonmark = window.commonmark;
GL.writer = new commonmark.HtmlRenderer({sourcepos: true});
GL.reader = new commonmark.Parser();

// Parsing
var textarea = $("#input_area");
var parsed = GL.reader.parse(textarea.val());

// Rendering
$("div#preview_area").html(GL.writer.render(parsed));
```

## ▶ [highlight.js](https://highlightjs.org/)
- \<code\>\<\/code\>の内容をsyntax highlight（IDEのように文法によって色分け）するJavaScriptライブラリ
- このsyntax highlightを実装するjsライブラリも多くの種類があります。
- 実装方法
  - 特に変数や関数のオーバーライドは必要なく、\<code\>タグの要素を順に入れていくだけでOK

``` javascript
  // Syntax Highlight (Use "highlight.js")
  $('pre code').each(function(i, block) {
      hljs.highlightBlock(block);
  });
```

## ▶ [MathJax](https://www.mathjax.org/)
- ”Beautiful math in all browsers”というイカしたキャッチフレーズを持つ数式描画用Javascriptライブラリです。

> MathJax はMathML、LaTeX、ASCIIMathML（英語版）で記述された数式をウェブブラウザ上で表示するクロスブラウザ（英語版）のJavaScriptライブラリである
> （[wikipedia](https://ja.wikipedia.org/wiki/MathJax)より引用）

【コード（テキストエリア上に入力）】

```
$
\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}
\tag{1}
$
```

【実行結果】
$
\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}
\tag{1}
$  

- 実装方法([公式ドキュメント](https://docs.mathjax.org/en/v2.0-latest/typeset.html))
  - typesetというのは、英語的には*属性を明示する*などという意味ですが、[公式ドキュメント](https://docs.mathjax.org/en/v2.0-latest/typeset.html)を見る限り、入力をコンパイル・レンダリングする事を指しているように思いますので、ここではmarkdownを入力としてHTMLを生成し#preview_areaに反映させることを指しているのではないかと考えられます。
  - MathJaxは数式をSVGなどで描画する処理負荷の高いライブラリなので、例えば一文字一文字のTextareaの入力の変化毎に数式を再レンダリングをすることは現実的ではありません。
  - そこでmarkdownを変更したタイミングでtypesetを実施すべき、とこのドキュメントでは言っているのだと理解しています（違ったらコメントください・・・）  

#### HTMLのheadにて明記（

``` html
  <script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'], ['\\(','\\)']],
      processEscapes: true
    },
    CommonHTML: { matchFontHeight: false },
    displayAlign: "left",
    displayIndent: "2em"
  });
  </script>
```

#### markdownをhtmlに反映後に処理

``` javascript
  MathJax.Hub.Typeset(["Typeset",MathJax.Hub, "posts-preview"]);  
```

# まとめ
活用した外部ライブラリは以上です。  
今回作成した簡易エディタは色んなライブラリのごった煮ではあります。しかし、組合せるだけでQiitaが実装しているようなエディタは簡単に実装できるということを紹介するのが本投稿の目的でした。
（もちろん、Qiitaには魅力的な他の機能も多くあります）


その他の機能として、

- drag & dropでの画像アップローダ
- 入力文字の時間差反映 

なども自作しているのですが、少し記事が長くなるので、別日に更新します。
iosでLINE風味にIRBできるようにする


次のバージョンの[PictRuby](http://pictruby.ongaeshi.me/)でチャット風インターフェースを作れるようにしたのでirbを実装した。

<img width="480" alt="pictruby-irb-01.png" src="https://qiita-image-store.s3.amazonaws.com/0/3885/dd4affc9-d711-c4b2-401b-a8216fddc415.png">

コードは以下のような感じに。エラーハンドリングはさすがにObjective-C側に書かないとダメかなと思ったいたのだけど、例外キャッチするだけでうまくいった。Rubyの表現力はやはり高い。

```ruby
# # 10_irb
#
# ## Description
# Interactive Ruby Shell is a REPL.

def chat(input)
  begin
    eval(input)
  rescue Exception => e
    e.message
  end
end
```

とりあえずうまくいったのだけど、なぜかローカル変数を定義できないので他のirbの実装を眺めてみた。

<img width="400" alt="pictruby-irb-02.png" src="https://qiita-image-store.s3.amazonaws.com/0/3885/b4cac003-ed06-917b-58ae-b0999e57a56c.png">

## web-irb
http://joshnuss.github.io/mruby-web-irb/

```
>> a = [1, 2, 3]
=>[1, 2, 3]
=>NoMethodError: undefined method 'a' for main
```

同じ現象が起きている！

```
>> @a = [1, 2, 3]
>> @a
=>[1, 2, 3]
```

メンバ変数として定義するとちゃんと保持される。

## mirb

mruby標準添付のやつ

```
$ git clone https://github.com/mruby/mruby.git
$ rake
$ ./bin/mirb 
mirb - Embeddable Interactive Ruby Shell

> a = 1
a = 1
 => 1
> a
a
 => 1
```

mirbはちゃんとローカル変数が使えるようだ。何か実際に違いがあるのかも。(そのうちソース読もう)

## まとめ

ともあれweb-irbは同じだったのでちょっと安心した(なにが)。メンバ変数を使うという逃げ道も見つかったのでとりあえず実装優先で進める。
Trelloに繰り返しタスクを登録する方法

trelloでタスク管理し始めてしばらくして、繰り返しタスクの登録もしたくなってきた
すこし迷う部分も多かったので、やり方のメモ

## trello自体に繰り返しタスクを登録する機能はない
なので、iftttかZapierを使って実現する必要がある
頑張ってtrelloの設定とか色々探しまわらないように
## iftttでの繰り返しタスク登録方法
- Zapierを使って登録する方法もあるが、登録数の制限や、同期をリアルタイムに近づけようすると有料プランに切り替える必要がある模様。iftttなら完全無料で簡単に実現できるのでおすすめ。

- iftttでは以下のレシピにしたがって登録すればOK
[weekly-trello-card](https://ifttt.com/recipes/395663-weekly-trello-card)

## コツ・ハマりそうなポイント
- 「Trello Which board?」「Trello List name」でボードとリストを指定できる。指定しない場合は、新しく作成される

- 「Title」入力時にiftttからtrelloにタスクを登録したtimestampを入れることができる。これを登録することで、同じ繰り返しタスクでも、いつ登録されたものかひと目でわかるようになる

![Untitled(1).png](https://qiita-image-store.s3.amazonaws.com/0/117937/5a7921a9-b26c-9d89-3146-2c3fc0b640c7.png)

![Untitled(2).png](https://qiita-image-store.s3.amazonaws.com/0/117937/5279af94-6d28-8f83-8e35-1e1da8ef2e9d.png)

## 参考
[毎日絶対やる！と心に決めたタスクを自動でTrelloのToDoに追加する方法](http://tonari-it.com/trello-task-ifttt/)
[ビジュアル思考派にとって画期的なタスク管理ツール『Trello』](http://www.lifehacker.jp/2015/02/150226trello_organize.html)

以上
【Shader Forge】DiffuseとEmissionについて

Shader ForgeというよりShader全般のお話ですが、
DiffuseとEmissionが何なのか分かっていなかったので軽く調べてみました。

<img width="795" alt="スクリーンショット 2016-03-20 13.21.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/67575/bd8a79b6-bc6e-a6c3-6dee-eb81f2782430.png">


##Diffuseについて
英単語として検索した結果、weblioさんの記事によると、

```lang:Diffuse
放散する、広める、普及させる、(あたりに)まき散らす、満ちわたらせる、拡散させる
```
という意味らしいです。


ようは光(ライティング)の影響をめっちゃ受けますよ。ということなのかな。

```lang:引用
モデルが本来持っている色味を表すのがディフューズ（拡散反射光）です。
この色は入力されてきた光の角度によってその強度が変わる性質を持っています。
ある点に対して光がど真正面（0度）で入ってきた場合は最大の跳ね返りを見せるので「ディフューズ色×入力された光の色」でその点が表現されます。
しかし角度が変わると跳ね返る光の量が減ってしまうため暗く見えるようになります。一般にそれを加味した計算式は次のようになります：

　Color += ( Diffuse * Input_Color ) * dot( Normal, -Input_Vector) * Diffuse_Factor

dotとは「内積」です。上では法線と入力光の逆方向の内積を取っています。DiffuseとInput_Colorの掛け算で色味が決まり、内積の部分でその強度が決まっているわけです。Diffse Factorは強度を微調整します。
```
なるほど、外部の光と元々持っていた自分の色によって最終的にカメラから見える自分の色を算出してくれるのね。
だからこそ**ライトの向きが変わると暗明が変わって影ができる**のね。

![3月 20, 2016 13:42.gif](https://qiita-image-store.s3.amazonaws.com/0/67575/55cce756-9c0c-7c18-0645-f9020a8212b1.gif)
(Directional Lightの角度を回転させてます)

##Emissionについて
Emissionは
```
(光・熱・香気などの)放射、発射、放射物、(煙突・車のエンジンなどからの)排気、排出、排出物(質)、射精
```
という意味らしいです。

```lang:引用
エミッシブ（放射光）はモデル自身が放つ光を表します。
太陽や電球などは自分で光っているため真っ暗闇でも明るく見えます。
この光は問答無用の光です。世界が真っ暗でもモデルは光るので、ある点の色は単にエミッシブの色そのものとなります：

　Color += Emmisive
```
Diffuseとは真逆の性質ですね。
外部の光に関わらず、自身の色をカメラに映すことができると。
その代わり影ができないし、のっぺりした表現になる。
![3月 20, 2016 14:19.gif](https://qiita-image-store.s3.amazonaws.com/0/67575/9269b36e-b56a-9f29-a88c-db47a09c3991.gif)
影がないから凹凸も表現できないのか。
2D向けなのかな・・・？
下地の色を表現することに使えそう。


##DiffuseとEmissionを合わせてみた
![3月-20,-2016-14-23-compressor.gif](https://qiita-image-store.s3.amazonaws.com/0/67575/403bc186-5c76-a1aa-0675-578f2a3f57b4.gif)

Diffuseだけだと光の弱い所(光があまり当たっていない所)は黒くなっていたけど、
Emissionで下地をつけたことで、光の弱い所はEmission色がでていた。
(Diffuse色とEmission色は同じにしています)
光が強いところは白っぽくなっていた。
これは、Duffuse色のRBGとEmission色のRBGが加算されて、RBG(255,255,255)の白色に近づいたからだと思います。







参考/引用させていただいた素晴らしい記事
http://www.geocities.jp/neo_ku_ron/HP_NEW/GameProgram/LightCharacter/LightCharacter.html
http://marupeke296.com/FBX_No7_TextureMaterial.html
http://ejje.weblio.jp/content/diffuse
GDC2016で見かけたoctocatたち

[GDC2016](http://www.gdconf.com)で見かけたoctocatたちです。
もしかしたら[Octodex](https://octodex.github.com)にあるものはみんなシール化されているんでしょうか。

![DSC02160.JPG](https://qiita-image-store.s3.amazonaws.com/0/59911/8f71d325-1ef3-73dd-416f-e3e420599473.jpeg)
Pythonのクラスにおける__call__メソッドの使い方


クラスを作るときに、__init__は頻繁に使うけど、__call__って何ってなったときに自分なりに解釈

環境はPython 3.5.1 :: Anaconda 2.5.0 (x86_64)
実行は、Jupyter notebookにて

### ``__call__``は関数っぽく呼び出したら発動
クラス例

```python:class_sample.py
class A:
    
    def __init__(self, a):
        self.a = a
        print("A init")
        
    def __call__(self, b):
        print("A call")
        print(b + self.a)
        
class B(A):
    
    def __init__(self, a, c):
        super().__init__(a)
        self.c = c
        print("B init")
    
    def __call__(self, d):
        print("B call")
        print(self.a + self.c + d)
```

実行例

```
>>> a = A(1)
A init

>>> a(2)
A call
3

>>> b = B(1,3)
A init
B init

>>> b(4)
B call
8
```

インスタンス生成では``__init__``しか呼び出されない。しかし、一度生成されたインスタンスを関数っぽく引数を与えて呼び出せば、``__call__``が呼び出されるという仕組み
もちろん、``__call__``に返り値をつければ,インスタンスから得られた値を別の変数に使ったりもできるということ。
MacにPHP7.0.4,PHPUnit5.0.10を入れる

# はじめに
とりあえず自分のローカルのmacの環境を整えようと、PHP7とPHPUnitを入れた時のメモです。PHPは7を入れる必要性はなかったですが、どうせなら新しいやつ入れておこうということで入れてみました。

# 1.phpbrewのインストール
phpを管理するのに便利です。名前からしてhomebrew的な感じなのかと思います。
[phpbrew](https://github.com/phpbrew/phpbrew)


以下コマンドを順に実行します。

```
$ curl -L -O https://github.com/phpbrew/phpbrew/raw/master/phpbrew
$ chmod +x phpbrew
$ sudo mv phpbrew /usr/local/bin/phpbrew
$ phpbrew init
```

以下を.zshrcに追記(bashの方は.bashrcや.bash_profile)

```
[[ -e ~/.phpbrew/bashrc ]] && source ~/.phpbrew/bashrc
```

.zshrcの再読み込み

```
$ source ~/.zshrc
```

# 2.macportsで必要なパッケージをインストール
PHP7をビルドするにいくつかパッケージを入れる必要があります。基本homebrewを使うのがよいと思うのですが、homebrewでは入れられないパッケージもあるのでmacportsを使います。(yum,apt-getでも大丈夫です。)

こちらを参考にmacportsをインストールします。
→[MacPorts のインストール方法 ( Mac )](http://monopocket.jp/blog/mac/2629/)

macportsからPHP7ビルドに必要なパッケージをインストールします。

```
$ sudo port install bzip2
$ sudo port install readline
$ sudo port install lib
$ sudo port install libiconv
$ sudo port install curl automake autoconf icu mcrypt bison re2c gettext openssl
$ sudo port install php70 
$ sudo port install php70-cgi php70-gd php70-curl php70-intl php70-iconv php70-gettext php70-mbstring php70-imap php70-mcrypt php70-xmlr
```

(正直どこまで入れればいいかよくわからなかったです。。最初phpbrewでPHP7をなかなかビルドできず、macportsからインストールしようとして色々やった結果phpbrewでもビルドできるようになりました。笑)


# 3.phpbrewからPHP7のビルド
先ほど入れたphpbrewを使います。

インストールできるphpのバージョン確認。

```
$ phpbrew known
7.0: 7.0.4, 7.0.3, 7.0.2, 7.0.1, 7.0.0 ...
5.6: 5.6.19, 5.6.18, 5.6.17, 5.6.16, 5.6.15, 5.6.14, 5.6.13, 5.6.12 ...
5.5: 5.5.33, 5.5.32, 5.5.31, 5.5.30, 5.5.29, 5.5.28, 5.5.27, 5.5.26 ...
5.4: 5.4.45, 5.4.44, 5.4.43, 5.4.42, 5.4.41, 5.4.40, 5.4.39, 5.4.38 ...
You can run `phpbrew update` to get a newer release list.
```

ここでは一番新しい7.0.4を入れます。

```
$ phpbrew install 7.0.4 +default
```

ちょっと時間がかかりますが、最終的に```Enjoy!```と出たらOKです。

```
$ php -v                                                                                                 [~/github/qiita-api-library/tests]
PHP 7.0.4 (cli) (built: Mar  4 2016 07:48:50) ( NTS )
Copyright (c) 1997-2016 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2016 Zend Technologies
    with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2016, by Zend Technologies
```

参考：[【PHP】 PHPBrewでPHP7をインストール](http://takafumi-s.hatenablog.com/entry/2016/01/09/084321)

# 4.composerのインストール
PHPUnitを入れるためにcomposerを使います。

```
$ mkdir composer
$ curl -s http://getcomposer.org/installer | php
```

composerの実行ファイルをパスの通った場所に置きます。

```
$ mv composer.phar /usr/local/bin/composer
```
※```/usr/bin/```ではなく```/usr/local/bin```に置きます。
参考：[MacOSX El Capitanでcocoapodsインストールが出来ない時の対処法](http://qiita.com/AcaiBowl/items/4bb4708de03e6ee14a4a)

これで```composer install```が使えるようになります。

参考：[composer イントロダクション](https://kohkimakimoto.github.io/getcomposer.org_doc_jp/doc/00-intro.html)

# 5.PHPUnitのイストール
composer.jsonを作成します。

```
$ vim composer.json

{
    "require-dev": {
        "phpunit/phpunit": "5.0.*"
    }
}
```

インストールします。

```
$ composer install
```

PHPUintのパスを通します。.zshrcに以下を追記します。(bashの方は.bashrcや.bash_profile)

```
$ export PATH=$PATH:~/.composer/vendor/bin/
```

これでOKです。

```
$ phpunit --version
PHPUnit 5.0.10 by Sebastian Bergmann and contributors.
```
Target Display Modeをキー入力なしで行う方法

使わなくなったiMacを外部ディスプレイとして利用する時に、Thunderboltケーブルを挿すだけで自動的にTarget Display Mode(ターゲットディスプレイモードもしくはTDM)にするShell Scriptを書きました。[Source @GitHub](https://github.com/shinsukeimai/dotfiles/tree/master/autoTargetDisplayMode)

## Target Display Modeとは何か
- ref [iMac をターゲットディスプレイモードでディスプレイとして使う](https://support.apple.com/ja-jp/HT204592)
- ref [HHKBとかを繋いだ iMac でターゲットディスプレイモード (TDM)](http://qiita.com/qurage/items/61b6dbb92ae0fcf4294a)

## 特徴
これまではUSB切り替え器などを用いてキーボードをiMacとMacBookに接続していたが、Thunderboltケーブルを挿すだけで自動的にTarget Display Modeになるようにした。

## 使いかた
[Source](https://github.com/shinsukeimai/dotfiles/tree/master/doc/autoTargetDisplayMode)を落としてきて、`auto.sh`を実行するだけ。

```
sh ./auto.sh
```

ただし、「Apple keyboardがUSBでささっている」かつ「ログイン状態」であることが必要。

## 改善
「Apple keyboardがUSBでささっている」かつ「ログイン状態」という制約から逃れたいがどうすればいいかまだわからないので、知っている人がいれば教えていただきたい。

## コードの説明

```auto.sh
#!/bin/bash
    
#スクリーンセーバーを動作させるためのコード
open_screen_saver () {
    open /System/Library/Frameworks/ScreenSaver.framework/Resources/ScreenSaverEngine.app/

}

#Thunderboltが接続されているか確認する(Thunderboltなら全て反応してしまう)
get_status () {
    if [ `system_profiler SPThunderboltDataType | grep "Macintosh:"` ]; then
        status="connected"
    else
        status="disconnected"
    fi
    echo $status
}

#Target Display Modeを開始する。
#command + F2を押す動作をosascriptにより実現
start_target_display_mode (){
    echo "Start target display mode..."
    osascript -e 'tell application "System Events" to key code 144 using command down'
}

#init
echo "Start auto Target Display Mode..."
open_screen_saver;

#working
#Thunderboltが接続されているかステータスを確認する
while :
do
    preStatus=$status
    echo $preStatus
    status=`get_status`
    if [ "$preStatus" != "connected" ] && [ "$status" = "connected" ]; then
        start_target_display_mode;
    elif [ "$preStatus" = "connected" ] && [ "$status" = "disconnected" ]; then
        open_screen_saver;
    fi
    sleep 1
done

```
PHPStorm の Vagrant Support を設定して作業効率UP！

PHPStorm 7からVagrant Support機能が追加されて、PHPStormからvagrant sshを実行できるようになっています。

この機能を利用すればターミナルからvagrantコマンドを打たなくてもGUIから操作することができます。

#実行環境

**■ホストマシン**

 - Macbook Pro 15インチ
 - Mac OS X 10.10 Yosemite
 - PHPStorm 10
 - VirtualBox 5.0.14 r105127
 - Vagrant 1.7.4 + Landrush + vagrant-vbguest
 - Ruby 2.0.0p481 (2014-05-08 revision 45883)

**■ゲストマシン**

 - CentOS 7.1  64bit
 - GuestAdditions 5.0.14

<font color="red">※ Vagrant Support機能を利用するには vagrant設定が整っていることが前提です。あらかじめVirtualBoxのインストールやVagrantのセットアップをお願いします。</font>

#Vagrant Supportを設定する

環境設定から Tools ＞ Vagrant を開きます。

![スクリーンショット 2016-03-20 13.35.10.png](https://qiita-image-store.s3.amazonaws.com/0/39468/70b5572a-07c9-b7a7-2a88-36a60ba020e9.png)


**Vagrant executable:**

```
/usr/local/bin/vagrant
```

**instance folder:**

```
/Users/[ユーザー名]/Documents/website_production/drupal7-test.com/vagrant
```

<font color="red">※自身のvagrantホームディレクトリを指定してください</font>

**Provider:**

```
virtualbox
```

項目3つを入力したら［OK］ボタンをクリックします。

#GUIからVagrantを起動してSSH接続をする

Vagrantゲストマシンを起動するには、メニュー ＞ Tools ＞ Vagrant ＞ up を選択します。

![スクリーンショット 2016-03-20 13.47.26.png](https://qiita-image-store.s3.amazonaws.com/0/39468/2533ddc9-6d00-5bc8-540a-b93062cec4d8.png)


そうするとVagrantコンソールが開いてvagrant up が実行されます。

![スクリーンショット 2016-03-20 13.49.27.png](https://qiita-image-store.s3.amazonaws.com/0/39468/e99cf6c4-f579-bf2d-ef86-889a409b9b30.png)


vagrant upが完了したのが確認できたら、VagrantゲストマシンにSSH接続をします。

メニュー ＞ Tools ＞ Start SSH session... を選択します。

![スクリーンショット 2016-03-20 13.46.51.png](https://qiita-image-store.s3.amazonaws.com/0/39468/3d998781-4ced-3c67-a61a-094ee758fef3.png)


SSH接続できた場合はターミナルが表示されます。

![スクリーンショット 2016-03-20 13.53.22.png](https://qiita-image-store.s3.amazonaws.com/0/39468/2764ea49-0881-cd95-49f3-8504031c9b50.png)


以上です。

その後、Vagrantゲストマシンをシャットダウンしたいときは、メニュー ＞ Tools ＞ Vagrant ＞ halt を選択すればOKです。

ちなみにこの設定をしておけば、PHPStormとPHPUnitを連動させることができたりするので、自動テストの効率化をしたいときにもぜひ設定しておきましょう。（PHPUnitとの連動設定はまた今度書きます）
Electron で "cannot read property 'on' of undefined"と言われたときの対処



参考:[require('electron') can be overridden by "electron" npm module](https://github.com/atom/electron/issues/3708)

## 症状

Electronアプリを作成していて、実行すると"cannot read property 'on' of undefined"というエラーが出ることがある。
似たような症状として、"Cannot read property 'start' of undefined"という場合もあるようだ。

## 簡単な対処

理屈はいらないからなんとかしたい、というときは、

```javascript:main.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
```

となっているところを下記のように書き換えればいけると思う。

```javascript:main.js
const electron = require('electron');
const app = electron.app || require('app');
const BrowserWindow = electron.BrowserWindow || require('browser-window');
```

## 原因

```npm install electron```　とかやってるとなる（？）。
正しくは、```npm install electron-prebuilt```。

正しい対処は、electronモデュールを削除することだと思われるが、削除がなかなかうまくできないこともあるようなので、上記の「簡単な対処」をするのが楽といえば楽。
Raspberry Pi2(Linux Kernel)のブートシーケンスを読む(その1) アーキテクチャ依存部

##目的
Raspberry Pi2のブートシーケンスを調査する事によって、
Linux Kernelのブートプロセスを学びます。
同時に、Linux Kernel内部で使用される各種構造体の役割を理解します。

##使用機器・ソースコード
・Raspberry Pi2 ModelBおよび周辺機器
・[Raspberry Pi(OS)のソースコード rpi-4.1.y](https://github.com/raspberrypi/linux)
・MacBook Air

##電源投入からKernelに制御が移行するまで
今回の目的は、「Kernelを知る事」であり、ブートローダなどの役割を知る事ではありません。
そのため、概略だけを記載します(検証をしていないため、誤っている可能性があります)。

　**Kernelに制御が移行するまで**
　　1）電源を投入
　　2）GPU(Broadcom VideoCore IV)が起動
　　3）GPUがSoCのROMからBootloader(名称不明)を読み込み、実行
　　4）GPUがmicroSDをマウント
　　5）GPUがmicroSDからL2キャッシュにbootcode.binを読み込み、実行
　　6）bootcode.bin内でloader.binをmicroSDカードからRAMへ読み込み、実行
　　7）loader.bin内でGPU firmware(start.elf)を読み込む
　　8）start.elf内でconfig.txt、cmdline.txtとkernel.imgを読み込む
　　　kernel.imgの展開先は0x8000です。
　　　(この3つのファイルは/bootにあります。また、start.elfはGPU binary)
　　9）start.elf内でconfig.txtの内容に従い、ファイルを読み込む
　　10）start.elf内でCPUを起動し、KernelのStart Addressに移動
　　　 (ここから、Kernel内部のコードを処理する事になる)

##疑問点
**1.ARMに関わらず、一般的に多段ブートを行う(複数のBootloaderを使用する)理由**
過去のシステムと互換性を保つために、多段ブートを採用しています。
多段ブートに関して押さえておきたい点は、以下の通りです。
　・(Intel x86系では)[BIOS](http://e-words.jp/w/BIOS.html)がリアルモードで動作する事
　・現代のBootloaderのサイズが、BIOSのロード可能サイズを超えている事

まず、[リアルモード](https://ja.wikipedia.org/wiki/%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%A2%E3%83%BC%E3%83%89)とは16bit動作モードで、
一度にアクセスできるデータサイズは64KB、メモリ空間は1MBです。
前述したように、BIOSがリアルモードで動作するため、
このリアルモードからプロテクトモード(32bit)やロングモード（64bit）に、
CPUのモードを切り替える作業が必要になります。
この作業により、Bootloaderの中身が複雑になります(サイズが大きくなります)。

次に、Bootloaderのサイズが大きい事についてです。
サイズが大きくなる原因は、最近のBootloaderに以下のような機能が加わっているからです。
　・ブート可能なKernelのリストを表示
　・Kernelオプションの指定(編集機能)
　・ファイルシステムから指定のファイルの読み込み
このような機能は、BIOSが読み込めるサイズ(512byte)で実現できません。
この問題を解決するために、多段ブートという手法が生まれました。

BIOS>1段目Bootloader(リアルモード、512Byte)>2段目Bootloader(プロテクトモード)>・・・
　　　　 
　
**2.CPUではなく、GPUがブート処理を行う理由**
ブートコードを隠蔽するため(らしい)。
何故、ブートコードを隠蔽する必要があるのか、という新しい疑問が生まれましたが、
本筋と大幅にズレるため、解決を保留します。

##次回
[「Raspberry Pi2(Linux Kernel)のブートシーケンスを読む(その2)」](http://qiita.com/Mogura1215/items/ed155d21d7fa276a5a60)
Kernel内のENTRY(stext)でCPU IDを取得するまでの説明を記述しています。

##参考サイト
・[第2回北陸ARMU.G.勉強会「Raspberry Piのブートシーケンスについて」](https://www.youtube.com/watch?v=jcfiOgWn-ig)
・[OSdev](http://wiki.osdev.org/Main_Page)
・[Raspberry Piのブートプロセスメモ](http://kernhack.hatenablog.com/entry/2014/01/11/102237)
・[Raspberry PI bare metal Part 1: The Boot Process](http://kariddi.blogspot.jp/2012/08/raspberry-pi-bare-metal-part-1-boot.html)
備忘録_Emmet


ちょこちょこ追加修正しないと・・・

##>　子要素として展開する
ul>li>a

```
<ul>
  <li><a href=""></a></li>
</ul>
```

##+　隣接した要素(隣り合わせ配置)
dl>dt+dd

```
<dl>
  <dt></dt>
  <dd></dd>
</dl>
```

##^　上の階層(続けて配置)
div>p^div

```
<div>
  <p></p>
</div>
<div></div>
```

##IDやクラスをつける
ul#hoge>li.moge

```
<ul id="hoge">
  <li class="moge"></li>
</ul>
```

##IDやクラスを複数つける
p#id1.class1.class2

```
<p id="id1" class="class1 class2"></p>
```

##divの省略
#main^.sub

```
<div id="main"></div>
<div class="sub"></div>
```

##連番と繰り返し
ul>li#item$*5

```
<ul>
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  <li id="item4"></li>
  <li id="item5"></li>
</ul>
```

##降順に番号をつける
ul>li#item$@-*3

```
<ul>
  <li id="item3"></li>
  <li id="item2"></li>
  <li id="item1"></li>
</ul>
```

##開始番号を指定して、番号をつける
ul>li#item$@5*3

```
<ul>
  <li id="item5"></li>
  <li id="item6"></li>
  <li id="item7"></li>
</ul>
```

##まとめて展開する
dl>(dt+dd)*3

```
<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>
```

##属性・値を指定する
a[href=# target=_blank]

```
<a href="#" target="_blank"></a>
```

##文字列を入れる
div>p{テキスト}

```
<div>
  <p>テキスト</p>
</div>
```

ul>li*3>a{メニュー$}

```
<ul>
  <li><a href="">メニュー1</a></li>
  <li><a href="">メニュー2</a></li>
  <li><a href="">メニュー3</a></li>
</ul>
```

##ダミー文章を入れる
lorem

```
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore id minus dolorem architecto, neque voluptatibus et, culpa iste ad, voluptas perspiciatis magni earum. Ex ipsum eum mollitia, eius sint, est.
```

p>lorem5

```
<p>Lorem ipsum dolor sit amet.</p>
```

##|e　特殊文字をエンコードして出力
div>p|e

```
&lt;div&gt;
  &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;
```

##|c　閉じたタグの後にIDやクラスをコメントで出力
#main>p^.sub>p|c

```
<div id="main">
  <p></p>
</div>
<!-- /#main -->
<div id="sub">
  <p></p>
</div>
<!-- /.sub -->
```

##|s　シングルラインで出力
ul>li*3|s

```
<ul><li></li><li></li><li></li></ul>
```

#捕捉機能

##Wrap変換(Ctrl + Shift + G)

特定の範囲を選択し、Emmetのコードを入力するとその前後に開始タグを終了タグを追加してくれる


##展開済みのHTMLを更新(Ctrl + Shift +U)

すでに展開済みのHTMLを更新できる
※出現したウィンドウに入力することで追加できる


##画像の幅・高さ情報を追加(Ctrl + U)

保存済みのHTMLの画像パスのところにカーソルを合わせて「Ctrl + U」で、画像の幅・高さを追加することができる

##編集点間の移動(Ctrl + Alt + ← or →)

属性の値などの編集点を移動するショートカット

#最後に

##Emmetのチートシート

http://docs.emmet.io/cheat-sheet/