OmniAICreator/Qiita-1.07M huggingface dataset:
Wordpressで簡易サジェストチェッカーを作ってみた

# やりたいこと
- サジェストのチェックを自作で作りたい
- キーワードを入れると、「該当キーワード」、「該当キーワード＋スペース」、「該当キーワード＋任意の1文字」のサジェストを一覧表示させる

# 完成イメージ
![スクリーンショット 2016-12-31 11.26.45.png](https://qiita-image-store.s3.amazonaws.com/0/117041/8b4d6de4-d1ff-ae7c-69ca-5fc33674b965.png)
※ デザインは適用されているテーマによって異なります。

# 前提
- Wordpress4.7（4.7でなくてもOK）
- テーマ：何でもOK
- [こちら](http://webshufu.com/google-keyword-suggest-tool-of-my-own-in-wordpress/)のサイトを参考にさせていただきました

# 対応１：function.phpにコード追加
```PHP
function get_suggest_list() {
		$checkWord = htmlspecialchars($_GET['check_word']);

		// キーワードが空の場合は処理終了
		if (empty($checkWord)) {
			return false;
		}

		$addWords = array(
			"",
			"a","b","c","d","e","f","g",
			"h","i","j","k","l","m","n",
			"o","p","q","r","s","t","u",
			"v","w","x","y","z",
			"あ","い","う","え","お",
			"か","き","く","け","こ",
			"さ","し","す","せ","そ",
			"た","ち","つ","て","と",
			"な","に","ぬ","ね","の",
			"は","ひ","ふ","へ","ほ",
			"ま","み","む","め","も",
			"や","ゆ","よ",
			"ら","り","る","れ","ろ",
			"わ","を","ん",
			"が","ぎ","ぐ","げ","ご",
			"ざ","じ","ず","ぜ","ぞ",
			"だ","ぢ","づ","で","ど",
			"ば","び","ぶ","べ","ぼ",
			"ぱ","ぴ","ぷ","ぺ","ぽ"
		);

		echo '<table>';
		echo '<thead>';
		echo '<tr>';
		echo '<th>サジェスト元</th>';
		echo '<th>キーワード</th>';
		echo '</tr>';
		echo '</thead>';
		echo '<tbody>';

		// GooleサジェストAPIを使用してサジェストワードを取得
		foreach ($addWords as $addWord) {
			$url = "http://www.google.com/complete/search?hl=ja&output=toolbar&ie=utf_8&oe=utf_8&q=".urlencode($checkWord . ' ' . $addWord);
			$toplevel = simplexml_load_file($url);
			foreach ($toplevel->CompleteSuggestion as $completeSuggestion) {
				$suggest_word_array[] = $completeSuggestion->suggestion->attributes()->data;
				echo "<tr><td>". $checkWord . ' ' . $addWord ."</td>\t<td>".$completeSuggestion->suggestion->attributes()->data."</td></tr>\n";
			}
		}

		echo '</tbody>';
		echo '</table>';
}
add_shortcode('get_suggest_list', 'get_suggest_list');
```

# 対応2：専用固定ページを追加
※ ステータスは非公開で作りましょう
※ form actionの値は作成する固定ページのパーマリンクの値を設定します

```
<form method="GET" action="/suggest-checker/">
<input type="text" name="check_word">&nbsp;&nbsp;<input type="submit" name="send" value="送信">
</form>
[get_suggest_list]
```

# 完成
何とたったこれだけです。
作成した固定ページを開いてみましょう。

１． 検索ボックスが表示されます。
![スクリーンショット 2016-12-31 11.50.18.png](https://qiita-image-store.s3.amazonaws.com/0/117041/025d7e3a-b480-ba2d-6269-c5d5d23d8456.png)

２． 検索ボックスに適当なキーワードを入れて、送信ボタンをクリック
![スクリーンショット 2016-12-31 11.51.53.png](https://qiita-image-store.s3.amazonaws.com/0/117041/795784bc-6372-4b12-40b0-8e9241c11fa4.png)

３． 入力したキーワードのサジェストと、キーワード＋1文字入力された場合のサジェストの一覧が表示されます。
![スクリーンショット 2016-12-31 11.26.45.png](https://qiita-image-store.s3.amazonaws.com/0/117041/39b09b8d-b58f-6f91-0d45-af93b7bb85dc.png)

# まとめ
Wordpress内に簡単なプログラムを埋め込むだけで、サジェストを取得できるようになりました。
これを使ってSEO記事を書く際の参考にしたり、これを応用してサジェストワードをDBに登録してグラフ表示させたりとか、いろいろ出来そうですね。是非一度お試し下さい。
Visual Studio Codeの統合ターミナルでBash on Ubuntu on Windowsをつかう

Visual Studio Code(以下、vscode)の統合ターミナルでBash on Ubuntu on Windows(以下、BoW)を使ってみた。

設定方法は、[このリンク先](http://pjdecarlo.com/2016/06/bash-on-windows-as-integrated-terminal-in-visual-studio-code.html)から。

1. BoWを入れる
2. vscodeを入れる
3. vscodeのユーザ設定を開く
4. 右のカスタマイズ用設定領域で、下記のようにbash.exeを指定する

```json:settings.json
{
  "terminal.integrated.shell.windows": "C:\\WINDOWS\\sysnative\\bash.exe"
}
```

これで、Ctrl+@でbashが開くようになるが、矢印キーが使えない。
そうすると、

- コマンドの修正が大変
- コマンド履歴が出せない

などなどいろいろ大変。[公式リポジトリでもissue](https://github.com/Microsoft/vscode/issues/10163)が上がっていて、困っている人も多そう。

あと日本語入力もおかしな動きをする（キャレットの位置がおかしい？）。

なので、次に[wslbridge](https://github.com/rprichard/wslbridge)を導入。

1. [インストーラ](https://github.com/mintty/wsltty/releases)をダウンロードしてインストール
2. 先ほどbash.exeを指定していたvscodeのユーザ設定で、インストールしたwslbridgeを指定する

```json:settings.json
{
  "terminal.integrated.shell.windows": "C:\\Users\\%USERNAME%\\AppData\\Local\\wsltty\\bin\\wslbridge.exe"
}
```
※ただし%USERNAME%はユーザ名に置き換える

これで矢印キーも使えるし、日本語入力も問題なくできるようになった。

＃ ただどういう仕組みなのか、正直よくわかっていない。。。
fishにgoenvをセットアップ

#手順

##goenvのインストール

```
git clone https://github.com/wfarr/goenv.git ~/.goenv
vim ~/.config/fish/config.fish
```

##config.fishに以下を追記

```vim:~/.config/fish/config.fish
#GOENV
set -x PATH $HOME/.goenv/bin $PATH
goenv rehash >/dev/null ^&1
```

##config再読込

`source ~/.config/fish/config.fish`

##goのインストール

```
goenv install 1.7.4
goenv global 1.7.4
goenv rehash
```


#というか

デファクトどれやねん…

<img width="772" alt="スクリーンショット 2016-12-31 11.48.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/24979/306214f5-a39b-2bb4-0e4e-0bf366a6637f.png">
Windows のパッケージインストールソフト Chocolatey

Stylez Advent Calendar 2016 - Qiita
http://qiita.com/advent-calendar/2016/stylez
のサボっていた13日目です。

Chocolateyの話をしたいわけですが、インストール方法等は、既に以下の方々が詳しく解説されているので、ここでは申しません。便利さや困ったこと等を書きたいと思います。

Chocolatey - The package manager for Windows
https://chocolatey.org/

Chocolateyを使った環境構築の時のメモ - Qiita
http://qiita.com/konta220/items/95b40b4647a737cb51aa

windowsの開発環境は一瞬で整うwith chocolatey - Qiita
http://qiita.com/okamos/items/11f4dc9a23afebbc242c

# 1. Chocolateyの便利なところ。

## 1-1. フリーソフトのインストールが簡単

なんと言っても様々なフリーソフトのインストールが超簡単です。
Chocolateyを使わなかったら、

* ブラウザーで必要なフリーソフトアプリのサイトへ行く。
* インストーラーをダウンロードする。
* ダウンロードしたインストーラーをダブルクリックして起動する。
* インストールウィザードをいろいろOKを押す

という作業が発生しますが、Chocolateyなら、以下のようにコマンド一発です。

```lang:powershell
PS> cinst -y <インストールしたいアプリ名>
```

Chocolateyはバックグラウンドでサイレントインストールが基本なので、放っておけば勝手にインストールされます。

注:Chocolateyにインストーラーが登録されているアプリに限ります。

## 1-2. アップデートが簡単

アップデートも上記と同じで、簡単です。

以下のコマンドでインストールされているアプリが全てアップデートされます。

``` lang:powershell
PS> cup all -y
```

## 1-3. アップデートがないかを逐一調べなくてもいい。

基本的に新しい物は、Chocolateyに随時登録されるので(されないものもある)、
なんでもすぐさまアップデートしてしまう病気の私にはとても便利です。

# 2. Chocolateyの不便なところ

## 2-1. アップデートはパッケージメンテナーさんのマメさ具合による。

これは仕方ないことですが、Chocolateyで整備されているインストールパッケージは、Chocolateyを作っているRealDimensions Software, LLC社が管理しているわけではなくて(管理しているものもあるようです)、基本的にコミュニティが作成しています。

その為、「新しいバージョンが出ていてもパッケージは古いまま」ということがあります。

## 2-2. Chocolateyにないパッケージもある。

これも仕方が無いですね。
以下のようなパッケージはありません。

* ATOK
* ESET NOD
* Hidemaru
* Xshell
* Lhaz

日本の作者のフリーソフトは少ないです。有償版は当然ありません。
日本語パッチやランゲージファイルが必要な場合もインストールできません。

iTunes や Everything はあります。

## 2-3. 自動アップデート機能付きのソフトとは相性が悪い。

例えば、Chromeです。自前でアップデートしてしまうので、すこぶる良くないです。Evernote等もこれにあたりますね。

## 2-4. 設定はChocolateyでは何ともならない。

設定はリストアできません。

# 3. Chocolateyでこんなのをインストールしています。
Chocolateyでインストールしているパッケージです。

```
PS C:\WINDOWS\system32> choco list -lo
Chocolatey v0.10.3
adobereader 2015.007.20033.01
anaconda3 4.2.0.20161112
Atom 1.0.7
cdburnerxp 4.5.7.6452
chocolatey 0.10.3
chocolatey-core.extension 1.0.4
ConEmu 16.12.6.0
crystaldiskinfo 7.0.4.20161011
evernote 6.4.2.3788
everything 1.4.1809
fastcopy 3.26
fastcopy.portable 3.26
fiddler4 4.6.3.50306
git 2.11.0
git.install 2.11.0
Git-Credential-Manager-for-Windows 1.5.0
git-credential-winstore 2.0.0.20151206
hosts.editor 1.0.0
imgburn 2.5.8.00
InkScape 0.91.0.20161126
javaruntime 8.0.101
jdk 8.0
jdk8 8.0.112
jre8 8.0.111
jruby 9.1.2.0
libreoffice 5.2.4
mm-choco.extension 0.0.4.1
procmon 3.20
projectlibre 1.5.9
PyCharm-community 2016.3.1
qbittorrent 3.3.10
rapidee 9.0.931
tortoisegit 2.3.0.0
vagrant 1.9.1
vcredist2010 10.0.40219.2
virtualbox 5.1.12
windirstat 1.1.2.20161210
winscp 5.9.3
winscp.install 5.9.3
XnView 2.39
```

# 4. PackageManagementも忘れないでください。

WindowsのPowershellが持っているパッケージシステムもあります。

Windowsのパッケージ管理システムはPackageManagementを使うと良いらしい - Qiita
http://qiita.com/succi0303/items/205ed51c2d604bdf3cf1

Powershellのお作法に慣れないので使っていませんが。。
CrazyFlieのfirmware開発環境を構築する。

##マシンスペック
<table>
<tr>
<th>マシン</th><th>ThinkStation S310</th>
</tr>
<tr>
<th>CPU</th><th>Intel Xeon E3-1270 3.6Ghz</th>
</tr>
<tr>
<th>メモリ</th><th>40GB</th>
</tr>
<tr>
<th>HDD</th><th>1.8TB</th>
</tr>
<tr>
<th>HOST OS</th><th>Windows10 Pro </th>
</tr>

</table>
##VirtualBox 5.1.12のインストール
 
ここからWindows用のインストラーをダウンロードしインストラーを起動する。
あとはインストラーのデフォルトの指示に従えばOK
https://www.virtualbox.org/wiki/Downloads

##VirtualBox 5.1.12 Extension Packをインストールする。
usb2.0コントロラーを使用可能にするためにExtension Packをインストールします。
Extension PackがインストールされていないとエラーになりVMが起動できません。
VirtualBoxの「ファイル」-->「環境設定」-->「拡張機能」から
ダウンロードしたExtension Packのファイルを選択して完了です。

##VMのイメージをダウンロード（Bitcraze_VM_2016-06.ova）
https://www.bitcraze.io/getting-started-with-the-crazyflie-2-0/
このページの真ん中ぐらいにダウンロードのリンクがあります。

##VirtualBoxの起動とVMイメージのインポート
1. 「ファイル」--「仮想アプライアンスのインポート」からBitcraze_VM_2016-06.ovaを選択する。

2. 起動ボタンでVMを起動する。
以下の画面が表示されればOK
![Screenshot from 2016-12-31 10:40:48.png](https://qiita-image-store.s3.amazonaws.com/0/148248/a3641c5a-5bb8-2fd2-8aaf-090c96e229cc.png)

##firmwareをビルドしてみる。
$ git submodule init
$ git submodule update
$ make PLATFORM=CF2
![Screenshot from 2016-12-31 21:21:33.png](https://qiita-image-store.s3.amazonaws.com/0/148248/39a92beb-a8f2-8fc6-4398-3a192992b3f5.png)

##ubuntu14.0.4
ubuntu14.0.4に同様の開発環境を構築した際、VirtualBox 5.1.12だとBitcraze_VMを起動時にkernel panicになってしまい起動できず、VirtualBox 5.0.30で試してみたらOKでした。
Firefox Developer Edition で JSON をゴニョゴニョ

<a href=https://stedolan.github.io/jq/>jq</a> があれば事足りるんだけど、<a href=https://www.mozilla.org/ja/firefox/developer/>Firefox Developer Edition</a> 気に入っているので書いておいた。

# JSON Viewer
firefox の developer edition には JSON Viewerがついています。
https://developer.mozilla.org/ja/docs/Tools/JSON_viewer

> * JSON ドキュメントをブラウザーに読み込むと、分析して構文をハイライト表示します。配列やオブジェクトは折りたたんで表示しており、"+" アイコンを使用して展開できます。
> * JSON ビューアーには、JSON をフィルタリングできる検索ボックスがあります。
> * 生の JSON データと整形済みデータの両方を確認できます。
> * 最後に、ドキュメントがネットワークリクエストの結果である場合は、リクエストおよびレスポンスのヘッダーもビューアーで表示します。

WebAPIをGETで叩いたり、JSONファイルをぼけーっと眺めるときに威力を発揮します。
例で「政府のIT投資が見える、分かる IT Dashboard」のWebAPIを叩いてみたいと思います！

## GET
IT Dashboardの "情報システム全体" を取得します。
``GET: http://www.itdashboard.go.jp/PublicApi/getData.json?dataset=BasicInformationAll``

![json-001.jpg](https://qiita-image-store.s3.amazonaws.com/0/11595/b38418d0-ea16-9885-fd03-480ab504e3b0.jpeg)

## Filter

情報量が多いので "system_class" でフィルタしてみます。

![json-002.jpg](https://qiita-image-store.s3.amazonaws.com/0/11595/f26ee0b4-bd5c-0c86-a51b-ea549af4b20c.jpeg)


## Rawdata

生データを確認。

![json-003.jpg](https://qiita-image-store.s3.amazonaws.com/0/11595/e0395047-cd6e-2af4-b0d9-413de5619817.jpeg)




なかなか便利です。
普段は コンソール or 好きなエディタ + jq で十分ですが、たまに全体を俯瞰して確認するときは結構便利だと思います。
C#の引数のこと

####引数のこと
プログラムの起動時に引数を取り、それによってプログラムの挙動を変えることができると、ひとつのプログラムをリコンパイルせずに複数の処理をするプログラムにすることができたり、あるいは起動後にデータをいちいち指定しなくても、あらかじめデータを読み込むことができたり、なにかと小回りが利くようになる。コマンドラインのプログラムだけでなく、FormやWPFでも同様だと思う。
たとえば、テキストビューアーが引数でファイル名をとれれば、データアイコンをexeアイコンにドラッグするだけで、異なるテキストを読むことができる。拡張子次第では、データファイルをダブルクリックするだけでもよい。
経路案内のソフトなら、引数に「銀座 新宿」としてそのそれぞれを出発点と到着点としてとれば、起動してから出発点と到着点を指定しなくてもよくなる。
プログラムに条件を渡す方法は、引数以外にもいろいろな方法があるけれど、引数はもっとも手軽なもののひとつだ。

####引数を処理する場所はすくなくとも4つある。
ひとつめは、Main関数。Field。WPF/Formの場合、3つめはコンストラクタ。4つめはLoad時。5つめはコンストラクタかロードで指定したタイマーで。6つめは同様にバックグラウンド処理をして、というものだ。
実行の順番は、Main-Field-コンストラクタ-ロード-タイマーorバックグラウンドとなる。早めに実行したほうがよいかというと、必ずしもそういうわけでもない。というのは、Main関数と、WPF/Formではそもそもクラスが異なるため、Main関数で受けとった引数をWPF/Formで使うにはもう一度引数として渡す必要があるので手間がかかるし、そもそもWPFではMain関数を見つけるのがむずかしいので、Main関数で引数を受けとるという処理じたいを書きにくい。

```csharp
using System;
using System.Windows.Forms;

namespace agentMail {
	static class Program {
		[STAThread]
		static void Main(string[] args) {
			Application.EnableVisualStyles();
			Application.SetCompatibleTextRenderingDefault(false);
			Application.Run(new Form1());
		}
	}
}
```

```csharp
		static void Main() {
```

を

```csharp
		static void Main(string[] args) {
```

とすれば、Mainで引数を取得できる。

```csharp
using System;
using System.IO;
using System.Text;
using System.Windows;

namespace ToDoManager {
	public partial class MainWindow : Window {
		string[] args = Environment.GetCommandLineArgs();
		string FilePath = "";
		public MainWindow() {
			InitializeComponent();

			if (1<args.Length)
				FilePath = string.Join(" ", args, 1, args.Length - 1).Trim();
		}
	}
}
```

こちらはWPFの場合。Fieldで取得して、コンストラクタでなかみの処理を書いている。

####処理の場所
コンストラクタで処理するか、Loadで処理するかは、好き好きだ。処理にすこし時間がかかる場合、コンストラクタで処理すると、ウィンドウが出るまで待たされる。Loadedの場合は、ウィンドウは開くが、なかを描画しないで待たされる。どちらが待たされる感じがあるかというのは個人の感覚なので、なんともいえない。
待ち時間が長くなる場合には、コンストラクタかLoadedでタイマーやバックグラウンド処理をする。その場合、UIである画面と、タイマーやバックグラウンドでは、Threadが異なる場合があって、直接アクセスできなくなるので注意が必要だ。コード的にもやや複雑になり、扱いにくさは微増する。

####Loaded
Loadedでなければならないことのひとつは、たとえば引数でウィンドウの位置やサイズを指定して処理するような場合だ。そもそもLoadedしないかぎり画面にはウィンドウが存在しないので、ウィンドウの位置に応じた処理を書くようなことはできない。
コンストラクタで引数を処理して、さらにClose();で終了するのも、Loadedがあると問題になる。コンストラクタで終了したあとにLoadすると、ウィンドウがそもそも存在しない(終了している)ので、オブジェクトが見つからないとnullのエラーになるのだ。
もうひとつ。Main関数で取得する場合、args[0]にはひとつめの引数が入る。いっぽう、System.Environment.GetCommandLineArgs()の場合は、引数のひとつめはexeファイル自身のフルパスである。引数はargs[1]からだ。

####fullpath
自身のフルパスをとれるということは、ひとつのプログラムの名前を変えて別の動作をすることができる、ということである。たとえばfputとfgetのように。自分自身を引数とできることでバリエーションが広がるのである。

####option
もうひとつ考えたいことは、引数でオプションなどを指定する場合に、そのオプションの先頭文字をどうするかである。よくあるのは、「/」、「-」、「--」などだ。すべてに対応してしまう、という方法もある。
pathに空白を使用できるので、引数の区切り文字が空白とは限らないことも対応が必要な項目のひとつである。
いろいろ考えるところはあるが、引数で容易に挙動を変えることができるので、ぜひ対応したいものである。
cssで簡単にしま模様背景を作る方法について

## この記事でお伝えしたいこと
この記事は、cssで縞模様を作る方法についてです。
普段のコーディングにおいて縞模様は画像にしてしまうことが多いかと思いますが、それだとご承知の通り、色・幅変更などの修正が面倒です。
そのような問題を解決するためにcssでしま模様をつくる方法について記載したいと思います。


## 作り方
### 実際に出来上がったもの
http://jsdo.it/kimura511/gYe5

### 作り方
linear-gradientというプロパティを利用します。
linear-gradientはグラデーションを作るためのプロパティです。[^1]
```css
background: linear-gradient(#c00 50%, #fff 50%);
background-size: 100% 50px;
```

カラーコードの後ろにある50%という部分が「どこからグラデーションをかけていくか？」という個所の設定する数値です。この値を50％に設定し一切グラデーションをかける余地がなくす設定をしたことで急に色が変更され、しま模様をつくることができます。

こちらの方法参考になりましたら幸いです。以上お読みいただきありがとうございました。

### 参考文献
CSSシークレット ―47のテクニックでCSSを自在に操る
http://ur0.biz/AG7B

[^1]: https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient
Python反復処理関連まとめ

# enumerate関数
反復処理する際に一緒にインデックス番号も取得したい場合には、enumerate関数を使う。

```python
names = ["kero", "Fire", "FLOG", "GECO"]

for i, name in enumerate(names):
    print(i, name)
```

0 kero
1 Fire
2 FLOG
3 GECO

## インデックス開始番号を指定する

```python
for i, name in enumerate(names, 1):
    print(i, name)
```

1 kero
2 Fire
3 FLOG
4 GECO



```python
for i, name in enumerate(names, 10):
    print(i, name)
```

10 kero
11 Fire
12 FLOG
13 GECO

#zip関数

zip関数を使って複数のリストなどに対して同時に反復処理を行える。



```python
names = ["kero", "Fire", "FLOG", "GECO"]
ages = [39, 21, 32, 45]

for age, name in zip(ages, names):
    print("Name: {0} Age: {1}".format(name, age))
```

Name: kero Age: 39
Name: Fire Age: 21
Name: FLOG Age: 32
Name: GECO Age: 45


## 要素数が異なる場合

各シーケンスオブジェクトの要素数が異なる場合、少ない要素数に合わせられる。

```python
names = ["kero", "Fire", "FLOG", "GECO"]
ages = [39, 21, 32]

for age, name in zip(ages, names):
    print("Name: {0} Age: {1}".format(name, age))
```


Name: kero Age: 39
Name: Fire Age: 21
Name: FLOG Age: 32

# ディクショナリの反復処理

```python
data = { 'Flog':41, 'Geco':28, 'KERO':32 }

# キーと値を同時に列挙
for key, value in data.items():
    print(key, value)
```
Flog 41
KERO 32
Geco 28

```python
# キーを列挙
for key in data.keys():
    print(key)
```

Flog
KERO
Geco

```python
# 値を列挙
for value in data.values():
    print(value)
```

41
32
28
フロントエンドのビルドをどうしよう

※注：散漫な内容で一切結論は出していません......

# 流動的な状況で流されないようにするには

と、思いっきり流されて溺れそうな状態なのですが。
フロントエンドのビルドツールどうする？
便利ではあろう。
でも、なんかわかりづらくない？
やっぱり、Makefileか？でも、Makefileなんか難しいよね。
Makefileはmkmfあたりしか使ったことないし。
mkmfっぽいのをnodeで作るのがいいのかな？でも、それが、Gruntとかのタスクランナーだよね。
でも、プラグインじゃなくて、直接たたきたい？

# やりたいこと。

- 自分のファイルと外のファイルを別々にまとめる。
- 外のファイルはあまり変えない。
- 外のファイルはnpmでとってきたり、libsに置いたりする。
- 外のファイルはグローバルに使える。(ex.$とか)
- 自分のファイルはよく変える。
- 自分のファイルはpug/riot/babel/uglify/scss/lessあたりは簡単に使いたい。
- 依存関係は誰かにお任せして全体の制御はしたくない。

## 外のファイルを固める

エントリファイルにこれとこれとこれを使うよ。とかく。
イメージとしては、html#headのscriptを並べる感じ。
cdnでいいはずだけど、ネットワークがない場合でも、作業したいし、やっぱり固める。
この辺は、webpackとか使わない方が楽なのかな。
使うにしても、webpack.config.jsに一緒に書くじゃなくて、別建てのが逆にわかりやすいのかも。

## 自分のファイルを固める。

requireで書くとして、webpackが集めてくれる。
ので、それでいいのか？でも、loaderが残念だったりするし。
webpackに依存関係だけ出させて、その依存関係に基づいて何かさせればいいのかも。
それとも、loaderは自分でパッチあてることを覚悟して使った方が楽か。
Django初心者が意識しておくと良いこと

この記事は、[Django Advent Calendar 2016](http://qiita.com/advent-calendar/2016/django) 15日目の記事です。


djangoを本格的に初めて半年近く立ちますが、Djangoにはまとまった本や資料がないので困ったときはグーグル先生頼みになってしまうと思います。

とはいえコピペで乗り切っていくのも限界はすぐに来ます。
なので、初心者が知っておくべき考え方や理屈をちょっとまとめようかなと思います。


##フォルダ構成について
Djangoでプロジェクト立ち上げるとなんちゃら.pyがおおすぎてパニック起こすので整理しようと思います。

まずはプロジェクトを作ります

`django-admin startproject shatiku`

```shatiku/
    manage.py
    shatiku/
        __init__.py
        settings.py　・・・DBの接続情報とかが書かれてる
        urls.py　　　・・・アプリケーションの情報がかかれる
        wsgi.py　　　・・・気にしない
```

ここではsettings.pyとurls.pyだけ見ます、一旦他は気にしなくて良いです。

####urls.pyに書くこと
ttp://damedeah.com/<font color="Red">[この部分]</font>/
この後アプリケーションを作りますが、その時には<font color="Red">[この部分]</font>を作ります。
が、<font color="Red">[この部分]</font>をプロジェクト名/プロジェクト名/urls.pyに書いてあげないとDjangoはそんなの知らんと無視してします。

###アプリケーションを作ろう！
次に<font color="Red">[この部分]</font>に相当するアプリケーションを作ります。

`python manage.py startapp scream`
ttp://damedeah.com/nyaaan/
のscreamの部分がアプリケーションに相当します。
普通は機能単位に作るので。
apiとかcmsとかって名前を付けるみたいです。

そうすると、shatiku配下にこんなフォルダが出来ます。

screamフォルダ

```scream/
    __init__.py
    admin.py    　　 ・・・モデルの管理サイト
    apps.py　　　　　 ・・・気にしない(使ったことない)
    migrations/
        __init__.py
    models.py　　　　・・・モデルの定義を書きます
    tests.py　　　　 ・・・とりあえず気にしない
    views.py　　　　・・・処理を書く
```

また.pyが増えてパニック！

ですが、ここにurls.pyを作ります。

```scream/
    __init__.py
    admin.py    　　 ・・・モデルの管理サイト
    apps.py　　　　　 ・・・気にしない(使ったことない)
    migrations/
        __init__.py
    models.py　　　　・・・モデルの定義を書きます
    tests.py　　　　 ・・・とりあえず気にしない
　　urls.py          ・・・urlを書くよ！
    views.py　　　　・・・処理を書く
```


色々あってパニックですが。
以下の順番で考えていけば大丈夫です。

url.pyにはurlが書かれている。
(例えばscream/urls.pyにはnyaanと書かれるとして)

その状態で、以下のアドレスにアクセスすると(実際には存在しないアドレスです)
http://damedeath.co.jp/scream/nyaan

prject配下のurls.pyが　screamは存在するからOKとしてscreamフォルダを呼んでくれます(多分)
次にscreamフォルダのurls.pyを読んで、nyaanは存在するからOKとしてくれます。

処理としては、そこからnyaanが来たときにはどの処理を呼ぶかをviews.pyに書けば、どの処理が呼ばれるか分かります。

これでもうきっとDjangoのファイル数の多さにパニック起こすことはないでしょう！


##migrateってなんぞ
Django1.7から導入されたマイグレートについてです。
会社で1.6以下を使っているからsouthだよって人は、個人的なものならDjangoバージョン上げましょう、仕事関係なら会社の人に聴いてください。
今新規なら1.9とかから始まるんじゃないでしょうか

これも最初良く分かりませんでしたが、簡単です。

ようは、Model.pyに書かれたテーブル定義をsettings.pyに書かれた接続先のデータベースに作成する作業です。

いくつかの手順を踏みますが
①モデルに宣言された内容を読み取ってmigrationファイルを作る
②migrationファイルの内容をデータベースに反映する
この２点だけです。
しかも、便利なことにmigrationファイルは履歴で管理しているので、データベースの設定を昔の状態に戻すこともできます。(とてもお勧め出来る作業ではありません。)
どこまでmigrationファイルが当たっているかは、実はDjangoにはそれを管理しているテーブルが自動で作られていてそこで管理されています。
いざとなれば、そこをいじることも出来ますが素人にはお勧めしない


##objects.getとかfilterとか分からん

いきなり、クエリの話に飛んでしまい恐縮ですが・・・

objects.get・・・レコードを一枚だけ取ってくる(0枚や複数枚取れたら例外が発生する！)
objects.filter・・レコードを複数枚取ってくる


こんなテーブルがあったとしましょう

```
SabizanTBL
 ユーザー    user(fk)
 年月日　　　work_date       
 サビ残時間　sabizan_time
　
ユーザーと年月日でユニーク
```

Sabizan.objects.get(user="ホワイトさん")
→ホワイトさんはサビ残をしていないのでレコードが取れなかった！エラー


sabizan = Sabizan.objects.get(user="社蓄さん", work_date=2016-12-15)
→一枚だけ取れるのでok
sabizan.sabizan_time ←これで12月15日のサビ残時間が分かる

sabizans = Sabizan.objects.filter(user="社蓄さん")
これで複数枚取れる！
じゃあ、これを一枚一枚にするにはどうしたら良いでしょうか？

```python:sabizan.py
for sabizan in sabizans:
    sabizan.sabizan_time
```

所詮は配列なのでループしてやればおｋです。



とりあえず、adventカレンダーの期限が過ぎていたので、急いで書きましたが、こんなもんでどうでしょうかね？？
指定したフォルダの拡張子Aを拡張子Bに一括置換@Python

備忘録を兼ねて。
ツッコミ等大歓迎です。

使い方 #docフォルダ以下の.xslファイルを全て.zipにする
python rename.py /User/doc/ .xsl .zip

```rename.py
# coding: UTF-8
# 指定したフォルダ以下の[2]拡張子を[3]拡張子に一括置換する。

import sys
import os
import re
import glob

def rename():

    dir = sys.argv[1]
    oldx = sys.argv[2] # 拡張子は.付きで渡してください。
    newx = sys.argv[3]
    catalogFile = re.compile(r"^\._") #Macのカタログファイル

    for file in glob.glob(dir + '/*'+ oldx):

        if catalogFile.match(file):
            continue  #Macのカタログファイルだった場合は処理しない

        root, x = os.path.splitext(file)
        newFile = root + newx
        os.rename(os.path.join(dir, file), os.path.join(dir, newFile)) #フルパスが必要

if __name__ == "__main__":
    rename()
```
最強のフロントエンドの雛形作った (2016/12/31)

https://github.com/mizchi/client-proj-20161231


- yarn
    - とりあえず `yarn install` と `yarn start` だけで動く
    - npm(yarn) scripts
- babel/webpack での多段ビルド
    - build:js はChromeでだけで動くビルドを吐く（デバッグを容易にするため）
    - build:js:production はIE11+
- ava/nyc/istanbul でテストとカバレッジ
- postcssでCSSのビルド
- uglify-js/csswring で圧縮
- CircleCI
    - eslint, flow, ava
    - `release` ブランチに push で gh-pages にデプロイ

## やってないこと

React も Angular も jQuery も何も入ってない。あくまでそれ以前にやることをまとめた。

参考になるだろうけど、人によっては使わないツールも多いと思われるので、適当に削ってください。

こういうのは年に一度スクラッチで作れば満足なので、日付をハードコードした上でこの記事はメンテしない。
PICでAndroid Open Accessoryをつくる:02

#構築環境確認（Lチカ）
構築した開発環境の確認のため、PIC書込用の回路を作成します。
検証用にLEDも搭載します。

##部品
- PIC24FJ64GB002-I/SP<br/>[秋月電子:340円](http://akizukidenshi.com/catalog/g/gI-08168/)(2016/12現在)<br/>AOAを作成するためにこのPICを使用してきます
- ブレッドボード BB-801<br/>[秋月電子:200円](http://akizukidenshi.com/catalog/g/gP-05294/)(2016/12現在)
- ブレッドボードジャンパワイヤ EIC-J-S<br/>[秋月電子:300円](http://akizukidenshi.com/catalog/g/gP-02315/)(2016/12現在)
- カーボン抵抗 1/2W 10kΩ<br/>[秋月電子:100円](http://akizukidenshi.com/catalog/g/gR-07838/)(2016/12現在)
- 抵抗内蔵5mm赤色LED OSR6LU5B64A-5V<br/>[秋月電子:120円](http://akizukidenshi.com/catalog/g/gI-06245/)(2016/12現在)<br/>通常のLEDでも良いですが、ブレッドボードではピン数節約のために重宝します
- PICKit3(互換製品)<br/>[Amazonマーケットプレイス:1889円](https://www.amazon.co.jp/gp/product/B01K26W8FQ/ref=oh_aui_detailpage_o02_s00?ie=UTF8&psc=1)(2016/12現在)<br/>秋月電子さんで純正品が販売されていますが、高価なので安価な互換品を使用しました

##配線
下図の通り配線していきます。
![writer_ブレッドボード.png](https://qiita-image-store.s3.amazonaws.com/0/153698/c0592f75-5a8b-d313-6d0a-9a04917092fb.png)
![writer_回路図.png](https://qiita-image-store.s3.amazonaws.com/0/153698/0dab846c-1a55-b595-3a7d-230be38d017d.png)

##配線結果
![DSC_0088.png](https://qiita-image-store.s3.amazonaws.com/0/153698/8f519f8f-1497-6ff0-8c98-7ad500e6f7e4.png)

##動作確認
- PICKit3をPCと接続します
- MPLAB X IDEを起動します
- 01で作成したプロジェクトが読み込まれていない場合は、プロジェクトを読み込みます
- プロジェクト名を右クリックしてコンテキストメニューを開き、Propertiesを実行します
- Project Propertiesダイアログが開かれますので、Hardwar ToolからPICKit3のシリアルを選択して、「Apply」をクリックします![02-01.png](https://qiita-image-store.s3.amazonaws.com/0/153698/ccd84e63-9422-ca0c-18ae-c3c0ec8e26b3.png)
- CategoriesのConf:[default]の下層の「Simulator」が「PICkit 3」に変わるので選択します![02-02.png](https://qiita-image-store.s3.amazonaws.com/0/153698/b9eceb70-3f4d-1460-789b-66163a035b61.png)
- Option categoriesから「Power」を選択し、「Power target circuit from PICkit3」にチェックをつけ、「OK」をクリックします![image](https://qiita-image-store.s3.amazonaws.com/0/153698/ef502c0b-1325-8779-0c05-54e4b4e48a51.png)
- PICKit3をブレッドボードに接続します<br/>上記回路ではA6にPICKit3の1番ピンが来るように接続します。（下の写真を参考にしてください）
- メニューバーの「Debug」-「Debug Main Project」を実行します<br/>回路や環境に問題がなければ、LEDが点滅します。<br/>![DSC_0092.png](https://qiita-image-store.s3.amazonaws.com/0/153698/aa475e9c-25c4-cba2-96cc-ec715f091126.png)
- ソースコードの2か所のdeleyの値を変更することで、点滅のパターンを変更できます

##今後
これで、PICの開発環境の構築、検証は終了となります。
今回作成した回路はPICへのプログラム書込みのため、引き続き使用していきます。（LEDは必要ありません）
次回からは、赤外線リモコン受信機を作成していきます。

##参考にさせていただいたサイトについて
- 回路<br/>[PICkit3とPIC24FJ64GB002の配線](http://garchiving.com/pickit3_x_pic24fj64gb002/)
- fritzingによる28ピンICの書き方<br/>[Fritzingで一般的なICチップのピン数を変更する方法](http://mikilabo.tumblr.com/post/96622520028/fritzing%E3%81%A7%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%AAic%E3%83%81%E3%83%83%E3%83%97%E3%81%AE%E3%83%94%E3%83%B3%E6%95%B0%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95)
Slack > link > SSLのfingerprintの確認方法 > verifyに失敗

SlackへのHTTPS経由での投稿についてSSLの証明書のあたりはよくわからなかった。

http://www.iotforest.com/2016/3/4/esp8266-arduino-feather-huzzah-using-slack-integration
に以下のような記載があった。

```
// SSL Certificate finngerprint for the host
const char* fingerprint = "‎‎ab f0 5b a9 1a e0 ae 5f ce 32 2e 7c 66 67 49 ec dd 6d 6a 38";
```

> You can also find the fingerprint easily using Chrome if you are curious where this came from. Open up the Slack endpoint from above directly in your browser, then from the developer toolbars security tab you can view the certificate, then details and look for thumbprint (what fingerprint is called in chrome).

Chromeでの確認ができた。

SSLは(無料のSSLサービス使用例として)CloudFlareを使うなどの助言がSlackの利用者のメモで見たことがあるが、不要になったのだろうか。

上記のSSL Certificate でverifyを試みたが失敗した。

<hr>
https://api.slack.com/slash-commands

> Slash command URLs must support HTTPS and serve a valid SSL certificate. Self-signed certificates are not allowed. Check out CloudFlare or Let's Encrypt for easy ways to obtain valid certificates.

とあるので、やはりCloudFlare のようなサービスを使うことになるのだろうか。
認証ありHTTPプロキシを認証なしでプロキシするDockerfile


自動化の敵、認証HTTPプロキシに対して、認証なしの多段プロキシを立てるDockerfileです。

## 環境

* Mac OS 10.12.2
* Docker version 1.12.5, build 7392c3b

> toolboxではなく、Mac Native版を使っています。
> [--build-arg] を使うので、docker v1.9以降が必要です。

## usage

Dockerfile (後述) を保存します。

```console
vi Dockerfile
... (コピペする)
```

docker imageをビルドします。[--build-arg] で親プロキシ (認証あり) を指定します。

```console
docker build -t proxy \
  --build-arg proxy_host={プロキシのIP/URL} \
  --build-arg proxy_port={プロキシのPORT} \
  --build-arg proxy_user={プロキシのユーザーID} \
  --build-arg proxy_pass={プロキシのパスワード} \
  .
```

container を run します。

```console
docker run -d -p 3128:3128 --name proxy proxy
```

ちゃんと立ち上がったか確認。

```console
docker ps

CONTAINER ID  IMAGE     COMMAND                  CREATED           STATUS          PORTS                     NAMES
dfe0181fa385  proxy     "/usr/sbin/squid -N -"   3 seconds ago     Up 2 seconds    0.0.0.0:3128->3128/tcp    proxy
```

あとはブラウザや設定ファイル等に以下の多段プロキシ (dockerホストOS) を指定したらOK。

* [http://{dockerホストのIP}:3128](http://localhost:3128)

> dockerホストOSのport:3128を開けておいてね

## Dockerfile

[alpine linux] に [squid] をインストールして多段Proxy (代わりに認証してくれる) の設定をします。接続先の親Proxy (認証あり) はコンテナビルド時に [--build-arg] で指定します。Image size は 21MB でした。

```Dockerfile
#
# Proxy without user/pass.
#
# Usage:
# $ docker build -t proxy --build-arg proxy_host={url or ip} --build-arg proxy_port={port} --build-arg proxy_user={username} --build-arg proxy_pass={password} .
# $ docker run -d -p 3128:3128 --name proxy proxy
#

FROM alpine:latest
MAINTAINER Yusuke Kawatsu "xxx@yyy.com"

# --build-args
ARG proxy_host
ARG proxy_port
ARG proxy_user
ARG proxy_pass

# Set correct environment variables.
ENV HOME /root
ENV LANG en_US.UTF-8
ENV LC_ALL en_US.UTF-8
ENV HTTP_PROXY http://${proxy_user}:${proxy_pass}@${proxy_host}:${proxy_port}
ENV HTTPS_PROXY ${HTTP_PROXY}
ENV NO_PROXY 127.0.0.1,localhost

# install utility commands.
RUN apk update && \
    apk add --no-cache squid

# edit squid settings.
RUN sed -i -e 's@^# should be allowed$@# should be allowed\n\
never_direct allow all\n\
cache_peer '${proxy_host}' parent '${proxy_port}' 0 login='${proxy_user}':'${proxy_pass}'\n@g' \
    /etc/squid/squid.conf

# expose ports.
EXPOSE 3128

# entrypoint.
ENTRYPOINT [ "/usr/sbin/squid" ]
CMD [ "-N", "-f", "/etc/squid/squid.conf" ]
```


[alpine linux]:https://alpinelinux.org/
[squid]:http://www.squid-cache.org/
[--build-arg]:https://docs.docker.com/engine/reference/builder/#/arg
技術英語 > Python programs range from [one-off scripts] ... to million-line systems. / shot in the arm

@ Introducing Python: Modern Computing in Simple Packages by Bill Lubanovic
(No. 266 / 12833)

> Python programs range from **<font color=red>one-off scripts</font>** -- such as those you've seen so far in this chapter -- to million-line systems.

https://www.merriam-webster.com/dictionary/one%E2%80%93off
> one-off
> :  limited to a single time, occasion, or instance :  one-shot <one–off gigs>

意訳「Python プログラムは一度限りのもの (この章でこれまで見たもの)から数百万行のコードまでの幅を持つ」

<hr>
関連して思い出したのは

shot in the arm
カンフル剤

http://eow.alc.co.jp/search?q=%22shot+in+the+arm%22
Retrofitを使ってAndroidからPHPに画像をPOSTする

## 経緯
研究でAndroidからAzure上のPHPへ画像をPOSTする必要が出てきた
非同期処理等考えずに使えて楽そう！！という短絡的思考でRetrofit2を採用したが意外とハマったのでメモ

## 前提
- 以下コードは http://example.com/upload/index.php にPOSTする前提で書く
- ネットワークアクセスや内部ストレージへのアクセスなどのPermissionは与えているものとする

## ライブラリのインポート
- おなじみの app/build.gradle 下部に以下の一文を追加

```app/build.gradle
dependencies {
        :
        :
    compile 'com.squareup.retrofit2:retrofit:2.1.0+'
}
```

## interfaceの実装
- ベースURLは別で指定するのでPathは相対でOK

```java:UploadService.class
public interface UploadService {
    @Multipart

    // PathはベースURLを抜いたものでOK
    @POST("upload/index.php")
    Call<ResponseBody> upload(@Part MultipartBody.Part file);
}
```

## ServiceGenerator
- [公式](https://futurestud.io/tutorials/retrofit-getting-started-and-android-client)からそのまま引用
- **ベースURL部分だけ書き換えが必要**

```java:ServiceGenerator.class
public class ServiceGenerator {
  
    // ここでベースURLを指定する
    public static final String API_BASE_URL = "http://example.com/";

    private static OkHttpClient.Builder httpClient = new OkHttpClient.Builder();

    private static Retrofit.Builder builder = new Retrofit.Builder().baseUrl(API_BASE_URL);

    public static <S> S createService(Class<S> serviceClass) {
        Retrofit retrofit = builder.client(httpClient.build()).build();
        return retrofit.create(serviceClass);
    }
}
```


## アップロード処理
```java
UploagService service = ServiceGenerator.createService(UploadService.class);  

// POSTする画像・音楽・動画等のファイル
String filePath = "path/to/your/file";
File file = new File(filePath);


RequestBody requestFile = RequestBody.create(MediaType.parse("multipart/form-data"), file);
MultipartBody.Part body = MultipartBody.Part.createFormData("POST先フィールド名", file.getName(), requestFile);

Call<ResponseBody> call = service.upload(body);
call.enqueue(new Callback<ResponseBody>() {

    // ステータスコードが400等エラーコード以外のとき呼ばれる
    @Override
    public void onResponse(Call<ResponseBody> call, Response<ResponseBody> response) {
        // 成功時の処理
        // response.body();でHTMLレスポンスのbodyタグ内が取れる
    }

    // ステータスコードが400等エラーコードのとき呼ばれる
    @Override
    public void onFailure(Call<ResponseBody> call, Throwable t) {
        // 失敗時の処理
    }
});
```

## 参考サイト
- https://futurestud.io/tutorials/retrofit-2-how-to-upload-files-to-server
- http://www.tsurutan.com/entry/2016/10/04/003929
- http://shim0mura.hatenadiary.jp/entry/2015/12/07/010000
Vue.jsでVideoタグを扱う

気付けば単純なことだけど2日程思いつかなかったので書いておく。

## なにがしたかったか
Vueのメソッドの中で動画の再生制御

## 結論: カスタムディレクティブ使え
```js:カスタムディレクティブ
Vue.directive('play',function (el, binding) {
	if(binding.value){
		el.play();
	}else{
		el.pause();
	}
});
```
使うときは

```html:HTML
<video src="sample.mp4" v-play="hoge"></video>
```

audioも一緒。
## 試行錯誤の過程
videoタグを直接扱う方法が思いつかず、メソッド内で

```js
let video = this.$el.querySelector('video');
video.play();
```
なんてやらにゃならんのか汚いなー、それかビデオタグだけcomponentにして

```js:カスタムコンポーネント
Vue.component('custome-video',{
	template:'<video></video>',
	props:{
		playing:false
	},
	created:{
		this.$watch('playing',function(val){
			if(val){
				this.$el.play();
			}else{
				this.$el.pause();
			}
		});
	}
})
```
とかやらにゃならんかめんどいなー、なんてブツブツ考えていたけど2日ほど経ったら思いついた。
Intellij 2016.03でGradle+Java+Jarのプロジェクトを新規作成する方法

Intellij 2016.03を使ってGradle+Javaのプロジェクトを作り、jarファイルを出力する方法についてまとめます。

新規プロジェクトのウィザードを開き、左からGradleを選び、右側でJavaを選択。
![imgTemp-2016-12-31-00-05-41.png](https://qiita-image-store.s3.amazonaws.com/0/5825/97f40c50-ef8b-fe71-6ea9-5fbcb228558a.png)

グループID、アーティファクトID、バージョンを入れる。この値は後から変更出来る。
![imgTemp-2016-12-31-00-14-06.png](https://qiita-image-store.s3.amazonaws.com/0/5825/a3cef169-82ce-9bab-3808-085ebe222507.png)

プロジェクトの設定。Create directories for empty content roots automatically.にチェックを入れるのが重要
![imgTemp-2016-12-31-01-32-35.png](https://qiita-image-store.s3.amazonaws.com/0/5825/7a1d27c4-ccc7-31a8-0968-169ea30c1bf1.png)

プロジェクト名、ディレクトリパスの指定
![imgTemp-2016-12-31-02-43-22.png](https://qiita-image-store.s3.amazonaws.com/0/5825/62f44a4c-282d-73db-4230-7d25f13eb0b0.png)

これでプロジェクトの新規作成完了。こんな画面になる。
![imgTemp-2016-12-31-03-06-28.png](https://qiita-image-store.s3.amazonaws.com/0/5825/ac6c0ad5-3f5b-7052-b2b1-f33c86b19766.png)

次にstatic mainメソッドを呼んで実行可能にする。

* apply pluginにapplicationを追加
* sourceCompatibilityのバージョンを1.8に指定
* mainClassNameを指定
* dependenciesに使うライブラリを指定

![imgTemp-2016-12-31-03-19-12.png](https://qiita-image-store.s3.amazonaws.com/0/5825/4ffb78cf-ca1d-3b0c-bc70-f04947ce7c1a.png)

その後Gradleウィンドウのrefreshを押す。図では既に表示されてるけど、applicationのrunタスクが追加される。

![imgTemp-2016-12-31-03-21-08.png](https://qiita-image-store.s3.amazonaws.com/0/5825/ada61eb4-c6ab-33c1-6fdb-fad8add330c9.png)

そしてサンプルソースを書く。この段階で、外部ライブラリが使用可能になっている事がわかる。処理内容に特に意味はない。

![imgTemp-2016-12-31-03-22-40.png](https://qiita-image-store.s3.amazonaws.com/0/5825/5afde5c1-0f6f-0672-565a-8f08b0a27079.png)

その後、runをダブルクリックで実行される。

![imgTemp-2016-12-31-03-21-08.png](https://qiita-image-store.s3.amazonaws.com/0/5825/ada61eb4-c6ab-33c1-6fdb-fad8add330c9.png)


次にjarファイルを作る。gradleファイルにjarのブロックを追加する。
![imgTemp-2016-12-31-03-26-54.png](https://qiita-image-store.s3.amazonaws.com/0/5825/ce6e8daf-bf29-bbf6-bc52-cc9b65ea724b.png)

その後jarタスクを実行
![imgTemp-2016-12-31-03-27-38.png](https://qiita-image-store.s3.amazonaws.com/0/5825/05be250b-557a-e0b0-b63a-982ef8093a91.png)

jarファイルが作られる。パスがちょっとわかりにくいかも。
![imgTemp-2016-12-31-03-31-06.png](https://qiita-image-store.s3.amazonaws.com/0/5825/2c691019-f500-1587-1780-eaeb75e22e09.png)

実行可能jarになっているので、そのまま実行できる
![imgTemp-2016-12-31-03-32-47.png](https://qiita-image-store.s3.amazonaws.com/0/5825/3135155b-2ea8-0c0c-8f1b-e2bf5422ac44.png)

# おまけ

グループ・アーティファクト・バージョンを再指定するには、以下の部分を書き換える。
アーティファクト(rootProject.name)は書き換えると影響範囲が広いのであまり書き換えないほうが良い。

![imgTemp-2016-12-31-14-31-30.png](https://qiita-image-store.s3.amazonaws.com/0/5825/a1544061-fdc4-8742-97b9-da7070c9e7b0.png)

![imgTemp-2016-12-31-14-30-59.png](https://qiita-image-store.s3.amazonaws.com/0/5825/1a894221-432e-deeb-b1c5-798da49b7c39.png)
ev3dev-lang-jsとsocket.ioを使って簡単なwebアプリを作る

## はじめに
EV3で動くLinux環境ev3devを使って開発します。この記事は、EV3にev3devをインストールし、SSH接続できている状態であることを前提にしています。
環境構築ができていない方はこちらの記事を参考にしてください。
>
[mindstorm-EV3をLinuxで制御しよう! ev3dev OSのインストールととSSH接続](http://qiita.com/murotani/items/46f905bec33b1673c41a)

この記事ではev3dev-lang-jsというnodejsでev3devを制御するためのライブラリを利用します。
ev3dev-lang-jaの入門についてはこちらを参考にしてください。
>
[nodejsでmindstrom-EV3を制御するev3dev-lang-js入門](http://qiita.com/murotani/items/86921723020e4a537ed5)

## つくるもの
なるべくシンプルに、カラーセンサーで取得した色をリアルタイムにブラウザに表示するアプリを作りました。
動画です。
（クリックでで動画再生）
[![YouTube](http://i.ytimg.com/vi/T9n-XgzgbR8/hqdefault.jpg)](https://www.youtube.com/watch?v=T9n-XgzgbR8)

## ev3dev-lang-jsとsocket.ioのインストール

```
robot@ev3dev:~$ npm install ev3dev-lang-js
robot@ev3dev:~$ npm install socket.io
```
## ソースコード
###index.js

```js:index.js
var app=require('http').createServer(handler);
var io=require('socket.io').listen(app);
var fs=require('fs');
var ev3dev=require('ev3dev-lang');

//color sensor PORT 1
var colorSensor=new ev3dev.ColorSensor(ev3dev.INPUT_1);
app.listen(1337);

function handler(req,res){
    fs.readFile(__dirname+'/index.html',function(err,data){
	if(err){
	    res.writeHead(500);
	    return res.end('Error');
	}
    res.writeHead(200);
    res.write(data);
    res.end();
    });
}

var color=io.of('/color').on('connection',function(socket){
    setInterval(function(){
      console.log(colorSensor.color);
      socket.emit('message', colorSensor.color);
    },50);
});
```
EV3のカラーセンサー値を取得するにはColorSensorクラスを利用します。

```var colorSensor=new ev3dev.ColorSensor(ev3dev.INPUT_1);
```
ソケット通信でブラウザに50ミリ秒毎にカラーセンサーが取得した値を送信します。

```
var color=io.of('/color').on('connection',function(socket){
    setInterval(function(){
      console.log(colorSensor.color);
      socket.emit('message', colorSensor.color);
    },50);
});
```
カラーセンサーから取得できる値（0~7）と色との関係は以下の通りです。
0: No color
1: Black
2: Blue
3: Green
4: Yellow
5: Red
6: White
7: Brown

###index.html
サーバー（ev3dev）から受信したカラーセンサー値を元に背景色を切り替えます。

```html:index.html
<!Doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>node</title>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <h1 id="color">Color</h1>
  </body>
</html>
<script>
var colorArray=["gray" , "black" , "blue" , "green" , "yellow" , "red" , "white" , "brown"];

var color=io.connect('http://ev3dev.local:1337/color');
color.on("message",function(data){
  console.log(data);
  //背景色の切り替え
  document.bgColor = colorArray[data];
  //テキスト表示の切り替え 
  if(data==0){
    document.getElementById("color").innerHTML="No color";
  }else{
    document.getElementById("color").innerHTML=colorArray[data];
  }
});
</script>
<style>
h1{
 color:white;
 -webkit-text-stroke: 5px black;
 font-size:100px;
 text-align:center;
 margin-top:300px;
}
</style>
```

##実行
EV3インテリジェントブロックの１番ポートにカラーセンサーを接続後、実行します。

```
robot@ev3dev:~$ node index.js
```
EV3のスペック上、WEBサーバー起動まで少し時間がかかります。
WEBサーバー起動後、ev3devと同じネットワーク内のブラウザで[http://ev3dev.local](http://ev3dev.local)にアクセスすれば完了です。

##参考

[ev3dev-lang-js](https://github.com/WasabiFan/ev3dev-lang-js)

[nodejsでmindstrom-EV3を制御するev3dev-lang-js入門](http://qiita.com/murotani/items/86921723020e4a537ed5)
riotjs-loaderでまだまだはまるよ

# ボタンのスタイルが変わらね！

__disabledとかなっている。でも、cdn使うと、disabledでいい感じで動いてたじゃん！

# riotの不良？

というか、仕様変更があったんだろうと思う。
履歴は追っかけていないので、よくわからないけど、booleanの扱いが、v2とv3で変わったんだろう。
で、何が問題かというと、riotjs-loaderが参照しているriot-compilerがv2系。
でも、riotがv3系。
riotjs-loaderのバージョン固定になっているので変えられない。
riotjs-loader/node_modules/riot-compiler以下に古いのがいらっしゃる。

# 解決するには！

riotjs-loader/node_modulesを削除する！
いいの？知らん！動くのが正義！

現状、pull-requestとかは飛んでいるみたいだけど、忙しいってことみたい。

# じゃあどうする、現実問題として、

簡単にやるなら、riotjs-loaderをforkして、riotjs3-loaderをつくって、それをnpmに上げるってのだろう。

## 愚痴

やっぱり、webpackやめるのがいいのかな......
エラーとかも、いろいろツールをかませるとわかりづらいんだよね。
どのフェーズで何がどうなったかを確認できるといいんだけど......

とはいえ、便利な部分もあるとは多いけど。
＃無駄に変なところにはまっている気がする......

調べればできる？
しらねーよ。調べたいんじゃなくて、使いたいんだ。
とそんな気持ちです。
MySQL client パスワードのエスケープ

```bash
mysql -u user -h hostname -pp(assword
```

p\(assword みたいなパスワードでmysql clientを使ってログインしようとすると以下のようにエラーとなる

```bash
-bash: 期待してない token `(' のあたりにシンタックスエラー
```

バックスラッシュを使ってエスケープしてやればよい

```bash
mysql -u user -h hostname -pp\(assword
```
ファイルのDnDを受けるGUIの雛形

F#でファイルのDnDを受けるプログラムの雛形です。捨てスクリプトなどでファイルを加工することがよくありますが、そういったものと組み合わせればコマンドラインに不慣れな人にも配布しやすくなります。

Windows FormsとWPFの両方で示します。GUIをコードで書くのは辛い面もありますが、この手のものは定型なのでコピペで済みます。

# Windows Forms

```fsharp:DnDWF.fsx
#r "System"
#r "System.Drawing"
#r "System.Windows.Forms"

open System
open System.Drawing
open System.Windows.Forms

[<EntryPoint; STAThread>] do
let w = new Form(Text = "サンプル", AllowDrop = true)
w.Controls.Add (new Label(Text = "ここにファイルを DnD してください。",
                          Dock = DockStyle.Fill,
                          TextAlign = ContentAlignment.MiddleCenter))
w.DragEnter.Add <| fun e ->
    if e.Data.GetDataPresent DataFormats.FileDrop then
        e.Effect <- DragDropEffects.Link
w.DragDrop.Add <| fun e ->
    let files = e.Data.GetData(DataFormats.FileDrop) :?> string[]
    if files = null then () else
    // ここに処理を書く
    for f in files do
        printfn "%s" f
Application.EnableVisualStyles()
Application.Run w
```

# WPF

```fsharp:DnDWPF.fsx
#r "System"
#r "System.Xaml"
#r "PresentationCore"
#r "PresentationFramework"
#r "WindowsBase"

open System
open System.Windows
open System.Windows.Controls

[<EntryPoint; STAThread>] do
let w = Window(Title = "サンプル",
               Width = 300., Height = 200., AllowDrop = true)
let g = Grid()
g.Children.Add (
    Label(Content = "ここにファイルを DnD してください。",
          HorizontalAlignment = HorizontalAlignment.Center,
          VerticalAlignment = VerticalAlignment.Center)) |> ignore
w.Content <- g
w.DragEnter.Add <| fun e ->
    if e.Data.GetDataPresent DataFormats.FileDrop then
        e.Effects <- DragDropEffects.Link
w.Drop.Add <| fun e ->
    let files = e.Data.GetData(DataFormats.FileDrop) :?> string[]
    if files = null then () else
    // ここに処理を書く
    for f in files do
        printfn "%s" f
Application().Run w |> ignore
```

# 開発

私はこの規模のものは次の環境で扱っています。

* [F#開発環境の紹介](http://qiita.com/7shi/items/5fc7d6477d96bbd7a71d) 2016.12.30

# 配布

作ったプログラムの配布方法として、バイナリ配布とスクリプト配布のケースを紹介します。

## バイナリ配布

F#ランタイム付き（`--standalone`）でコンパイルすれば、実行時にランタイムが必要とならないため手軽です。

```text
fsc --standalone --platform:x86 --target:winexe ソース.fsx
```

## スクリプト配布

ランタイムをインストールしておけば、スクリプト配布も可能です。

* [Microsoft Build Tools 2015](https://www.microsoft.com/ja-JP/download/details.aspx?id=48159)
* [Visual F# Tools 4.0 RTM](https://www.microsoft.com/en-us/download/details.aspx?id=48179)

F#スクリプトは直接実行できるため、Visual Studioやビルド作業は不要です。.fsx ファイルをダブルクリックすれば、どのアプリで開くか選択肢が出て来るので、以下にある fsi.exe を指定すれば起動します。

* (64bit OS) `C:\Program Files (x86)\Microsoft SDKs\F#\4.0\Framework\v4.0\fsi.exe`
* (32bit OS) `C:\Program Files\Microsoft SDKs\F#\4.0\Framework\v4.0\fsi.exe`

「常にこのアプリを使って .fsx ファイルを開く」にチェックを付けておけば、次回からはダブルクリックだけで開けるようになります。
特定のドメインでメールアドレスを登録しグループ分けをする実装

特定のメールアドレスでユーザーを保存できたらいいなと思ったことはありませんか？
そのような方のために、今回はバリデーションを使い特定のメールアドレスでUserを登録しグループ分けする実装する方法をまとめました。

##目的
特定のグループでのマッチングアプリ
特定のグループに入るにはあらかじめ登録されている特定のメールアドレスのドメインが必要
グループによって表示される投稿内容をかえたいため

##必要なもの
* gem　'devise'
* 正規表現
* sql文
* groupテーブル（親） :name(group_key),:domain
* userテーブル（子）  :group_id, :email, :password

##DB設計
| name             |            domain |
|:-----------------|------------------:|
| 会社              |                company.ac.jp |
| 大学              |             university.ac.jp|

##やること
* deviseでuserの登録のさいにどこのグループか入力するようにする.


* あらかじめ作成されているグループに属するようにユーザーを登録


* 登録する際は特定のドメインが設定されており、それに合うメールアドレスしか登録できない


* グループ別で管理する

##実装
###gemのインストールand設定

```gem 'devise'
bundle install
rails g devise:install
rails g devise User```


formを拡張する必要があるため
`rails g devise:views`


###deviseのモジュールを設定
application_controller
authentication_keysでgroup_keyを認証
```devise :database_authenticatable, :registerable,:recoverable, :rememberable, :trackable, :validatable, authentication_keys: [:email, :group_key]```

###attr_accessorでgroupテーブルのグループ名を参照
userのカラムにはgroup_keyが存在しない。 
model/user.rbに記述
`attr_accessor :group_key`

###before_validation
validationがかかる前にメソッドを動かし、group_keyを参照し、group_idをuserのテーブルに保存
model/user.rbに記述
`before_validation :group_key_to_id`

###usersのテーブルにgroup_idを保存する
model/user.rbに記述
```def group_key_to_id
    group = Group.where(name: group_key).first
    self.group_id = group.id
 end```
![スクリーンショット 2016-12-31 15.00.20.png](https://qiita-image-store.s3.amazonaws.com/0/118586/ff84ccf5-9e53-4c58-ac41-4e2ba35b381a.png)


###入力スペースを作成。
生成したdevise/registration/new.htmlに記述
`<%= f.collection_select :group_key, Group.all, :name, :name%>`
collection_select :'保存するカラム', '表示させたいカテゴリーの一覧を配列で表示', 'valueとして扱うカラム名', '表示用のカラム名', 'option'

![スクリーンショット 2016-12-30 23.19.15.png](https://qiita-image-store.s3.amazonaws.com/0/118586/2ca1d5ea-5fca-d5f7-d083-8898e96f85bd.png)



###入力した値を保存
applicationcontrollerに以下をを記述する。
 ```def configure_permitted_parameters      devise_parameter_sanitizer.permit(:sign_in, keys:[:group_key])
  end```


####validationをカスタマイズ
複雑なバリデーションを書く時はメソッドを作ってしまう。シンボル型でvalidateの後ろにメソッドを記載できる。
```validate :domain_check```


###特定のドメインで登録
groupにあるnameカラムのvalueを取得し、それとuserが入力したemailを正規表現で真偽を判断。偽ならばエラーをはかせる。
```def domain_check
      ##sql文で特定のドメインをget
    sql = "select domain from groups where name='#{group_key}'"
      ##取得したdomainの配列を除去し、string型で取得
    domain=ActiveRecord::Base.connection.select_all(sql).rows.join
      ##取得したstring型のdomainをemailと正規表現でmatch
    unless /#{domain}/ === email
      errors[:base] << "学校のemailを登録してください"
    end
  end```


###まとめ
今回は、deviseを使用していたために、deviseのコントローラーを使用できず、validationで処理をしました。
普段あまり複雑なvalidationを書かないために勉強になりました。
validationにはたくさんのoptionがあるのでまだまだ可能性がありそうです！
[SEのための図解技術]の学習メモ

本記事は、[SEのための図解技術](http://amzn.to/2hxRVT9)の学習メモです。
#基本的なこと
##主題と文脈を区別する
![スクリーンショット 2016-12-30 12.33.16.png](https://qiita-image-store.s3.amazonaws.com/0/157428/4374e897-b372-b47b-bf97-8d48e7c1984a.png)
##パラレリズム
○
自転車はタイヤで前に進みます。
飛行機はプロペラで前に進みます。
✗
自転車はタイヤで前に進みます。
飛行機は前に進むのにプロペラで進みます。

##etc.
- ピラミッド原則
- MECE(ミッシー)
- ロジックツリー

#テーブル
##デジジョンテーブル  
複数の要因を同時に判断して何かの処理をする場合に、
条件1/2/3をひとつずつ変えていくことですべての組み合わせを網羅できる

|条件１|条件２|条件３|Operation|
|---|---|---|---|
|Yes|Yes|Yes|Aをする|
|Yes|Yes|No|Bをする|
|・・・|・・・|・・・|・・・|
|No|No|No|Cをする|

#関係を表す概念
##因果関係・相関関係
![スクリーンショット 2016-12-30 22.35.49.png](https://qiita-image-store.s3.amazonaws.com/0/157428/ac34678f-6111-5400-ab34-0d9e017aed89.png)

##集合関係（数量的な関係）
![スクリーンショット 2016-12-30 23.01.51.png](https://qiita-image-store.s3.amazonaws.com/0/157428/6f07cdb6-cd7a-7329-4b2f-bd67789e97a1.png)

##集合関係（全体と部分）
![スクリーンショット 2016-12-30 23.02.03.png](https://qiita-image-store.s3.amazonaws.com/0/157428/f3f54ee1-c86f-f0b6-d59c-3b910d149bca.png)

##違うもにには違う図形を選択する
![スクリーンショット 2016-12-30 23.48.49.png](https://qiita-image-store.s3.amazonaws.com/0/157428/7fdf7458-8c39-ab0a-2b14-6808d8582d43.png)

##ER図
![スクリーンショット 2016-12-30 23.59.22.png](https://qiita-image-store.s3.amazonaws.com/0/157428/0eae143f-238b-46d4-2fbc-938d723ab809.png)

#時系列関系
- フローチャート
- アクティビティチャート
- シーケンスチャート

#よく使われるビジュアライゼーション手法
- テーブル型
- ブロックダイアグラム型
- ロジックツリー型
- グラフ型
Chainerでfine-tuningを行う

すでにトレーニングされたモデルからWやbなどの重みを取得することで、より早く学習を進めることができる (fine-tuning)。
モデル自体が完全に同じ場合には当然使えるし、モデルの一部を修正して使用する場合にも、変更の必要がない層に関しては、あらかじめ学習済みのモデルから重みを借用するのが良い。例えば、分類先の画像種類が1000種類から10種類に切り替える場合などは、最終の全結合層のみ切り替える必要はあるが、それ以前の畳み込み層などは変更の必要性は少なく、その部分の重みを使用することができる。

計算時間短縮に結びつく背景には、以下のような点が挙げられる：
 - あらかじめ大量の計算資源を使用して収束した時点の結果を使用するため、それまでの計算時間を省略可能。特に、畳み込み層の第一層はガボールフィルタに近似するという研究も多く、あえてそこを新規で学習させる必要性はあまり感じられない
 - また、各層の平均出力が学習が進むにつれて徐々に変化していく「共変量シフト」が抑えられる。その結果、重み更新が、共変量シフトの追従に費やされなくなり、より精細な係数の設定が進む

# モデルの構造と、初期値の設定の行い方
Chainerにおける各重みは、以下のような場所に保存されている。

``` Python
# Optは、自分で作成したOptimizer
Target = Opt.target # Targetは、(y=予測結果,t=正解)の比較を答えとして持つClassifierクラス
Model = Target.predictor # Modelは、x=入力から、y=予測結果を返すLinkクラス

conv1_W = Model.conv1.W.data # .dataにより、Variableクラスからarrayを取り出す
conv1_b = Model.conv1.b.data
```

なので、モデルの初期化が終わったあとに上記の変数を書き換えて重みを設定すれば良さそう・・・と一瞬考えてしまうのだが、Chainerでは1st iterationの中で、入力ファイルの画像サイズ等を参考にW,bなどが作成されるため、それ以前にアクセスしようと思うとエラーを出す。

そこで、Model定義の中で指定できる`initialW`, `initial_bias`に値を指定することで、設定を行う。

``` Python

class AlexNet(chainer.Chain):
    def __init__(self, class_labels=100,net=None):
		super(AlexNet, self).__init__(
		conv1 = L.Convolution2D(None, 96, 11,stride=4, initialW=net.conv1.W if net else None ,initial_bias=net.conv1.b if net else None),
		...
        )
        return



```

# 重みの固定
重みを読み込んだ層に関して、特に学習の初期には更新が行われないようにした方が、他の層の学習が効率的に進む。そのためには、optimizerのhookに以下のような変更を加えることで、重み更新が起こらないようにできる。

``` Python
from chainer import cuda
class DelGradient(object):
    name = 'DelGradient'
    def __init__(self, delTgt):
        self.delTgt = delTgt

    def __call__(self, opt):
        for name,param in opt.target.namedparams():
            for d in self.delTgt:
                if d in name:
                    grad = param.grad
                    with cuda.get_device(grad):
                        grad = 0

# Mainの中
...                
optimizer = chainer.optimizers.Adam()
optimizer.setup(model)
optimizer.add_hook(DelGradient(["conv2","conv3","conv4","conv5","fc6"]))
...
```

# Caffeモデルからの重みの読み込み
Caffeモデルから重みを読み込む方法には、Chainerの関数を使用するものと、Caffeの関数を使用するものがある。それぞれの特徴は以下の通り:
- **Chainerの関数による読み込み**: コードは簡潔。またprototxtのモデル定義も不要。convolution2Dなどに使われる引数のうち、Caffeにしか存在しないもの ("group"など)に関しても、できるだけ対応できるようコーディングされている。しかしながら必ずしもすべてのモデルに対応しているわけではなく、失敗する場合もある。また、読み込みが非常に遅い
- **Caffeの関数による読み込み**: prototxtのモデル定義が必要なため、若干コードは汚くなる。一方で、読み込みは早く、どのようなモデルも原理的には読み込める。その一方で、上記group引数などによって生じるCaffeとChainerの係数の相違などは、手動で対応しなくてはいけない。


## Chainerの関数による読み込み:
下記でモデルを読み込んだ後、その係数を新しいモデルのinitialize引数に指定する。`net`がpre-trainedなmodelとなる。

``` Python
from chainer.links.caffe import CaffeFunction
net = CaffeFunction("caffe_alexnet_train_iter_85484.caffemodel")
#重みへのアクセス
net.conv1.W.data # W
net.conv1.b.data # b
```

## Caffeの関数による読み込み
以下のようにしてCaffeモデルを読み込む。`net`がpre-trainedなmodelとなる。

注意点として、Classifierの第一引数は、caffeのtestに使用するdeploy.prototxtを指定しなくてはいけない。それ以外だと、エラーを吐く。

``` Python
import caffe
net = caffe.Classifier('deploy.prototxt','caffe_alexnet_train_iter_85484.caffemodel', image_dims = (277, 277))
# 重みへのアクセス
net.params['conv1'][0].data # W
net.params['conv1'][1].data # b
```
Spring boot 1.4.2でSpock1.1rc3でテストをする

まだrcみたいでいろいろハマったのでメモ。
意外とspring boot + spock + gradle の組み合わせの記事がない。

# build.gradle

groovyのプラグインとspock関係の依存を追加。
どうもSpring Boot 1.4.2の新しいアノテーションは、Spock1.1じゃないと対応してないらしいので、しょうがないのでrc版を使う。

以下の記事を参考
  http://qiita.com/AHA_oretama/items/55bbde42cfa4bdbf50a0

```groovy:build.groovy
plugins {
    id 'org.springframework.boot' version '1.4.2.RELEASE'
    id 'java'
    id 'groovy'
}

dependencies {
    compile "org.codehaus.groovy:groovy-all:2.4.1"
    testCompile "org.spockframework:spock-core:1.1-groovy-2.4-rc-3"
    testCompile "org.spockframework:spock-spring:1.1-groovy-2.4-rc-3"
}
```

# テストコード

本当は、@SpringBootTestだけで良いっぽいのだけど、なぜか@ContextConfigurationを追加しないと動かなかった。

```groovy:SpockTest.groovy
package hello

import org.springframework.test.context.ContextConfiguration
import org.springframework.boot.test.context.SpringBootTest
import org.springframework.beans.factory.annotation.Autowired

import spock.lang.Specification
import spock.lang.Unroll

@ContextConfiguration
@SpringBootTest
public class SpockTest extends Specification {

  def "はじめましてSpock"() {
    expect:
      1 > 0
  }
}
```

以下の記事を参考
  http://groovy-coder.com/?p=111