OmniAICreator/Qiita-1.07M huggingface dataset:
table要素を指定してCSVでダウンロードしたい

って要件があって、ちょっと書いてみた。

jQuery使ってるサイトに使う予定だったのでjQuery.mapとか使って書いてたけど、なんかうまく配列を作れなかったのでライブラリ非依存な感じにしてみた。  
古めなサイトに使う用なので、トランスパイルもしない方針で書いた。ArrowFunctionは使っても良かったかもなぁ・・・

```js:Table2CSV.js
var Table2CSV = function($table, tbodyTrSelector, theadTrSelector) {
  var __map = Array.prototype.map;
  var strToCSVStr = function(str) {
    return '"' + str.replace(/"/g, '""') + '"';
  }
  var convertToCSVValue = function(str) {
    if (str.match(/^-?[\d]+$/)) {
      return parseInt(str);
    } else if (str.match(/^-?[\d]+\.[\d]+$/)) {
      return parseFloat(str);
    } else {
      return strToCSVStr(str);
    }
  }
  var convertToText = function(elem) {
    var text = $(elem).text();
    text = text.replace(/\\|¥|,|%/g, '').trim();
    return convertToCSVValue(text);
  }
  var mapIt = function(baseElem, selector, converter) {
    var mapped = __map.call(baseElem.querySelectorAll(selector), function(e, i) {
      var converted = converter ? converter(e) : e;
      return converted;
    });
    return mapped;
  }
  var CSVJoin = function(arr) {
    return arr.reduce(function(prev, v) {
      prev.push(v.join(','));
      return prev;
    }, []).join("\n");
  }
  var $header = mapIt($table, theadTrSelector, function(e) {
    return mapIt(e, 'th,td', convertToText);
  })
  var $body = mapIt($table, tbodyTrSelector, function(e) {
    return mapIt(e, 'th,td', convertToText);
  })
  var csv = CSVJoin($header.concat($body));

  var dl = function(name, content, withBOM) {
    content = content || this.csv;
    withBOM = (typeof(withBOM) === 'boolean') ? withBOM : true;
    var bom = withBOM ? new Uint8Array([0xEF, 0xBB, 0xBF]) : '';
    var blob = new Blob([bom, content], { type: 'application/csv;charset=utf8'});
    var a = [
      ['href', window.URL.createObjectURL(blob)],
      ['download', name]
    ].reduce(function(_a, attr) {
      _a.setAttribute(attr[0], attr[1]);
      return _a;
    } ,document.createElement('a'));
    var clickEvent = new MouseEvent('click');
    a.dispatchEvent(clickEvent);
  }

  return {
    csv: csv,
    dl: dl
  }
}
Table2CSV.getTableNode = function(selector, index) {
  index = index || 0;
  return document.querySelectorAll(selector).item(index);
}

/*
var t2c = new Table2CSV(Table2CSV.getTableNode('table'), 'tr');
t2c.dl('hoge.csv')
*/
```

DLのとこはIEでは動かなかったりするはず。  
mapとかreduceとか使ってるけど最近のChromeとかFirefoxなら動くはず。動かなかったらpolyfillで対応できると思う。

---

### 追記

MacのChromeで試してみたらうまくクリックイベントが発火しなかったので　[FileSaver](https://github.com/eligrey/FileSaver.js) を参考にして `MouseEvent` のインスタンスを作って渡すようにした。

```js:before
var clickEvent = document.createEvent('HTMLEvents');
clickEvent.initEvent('click', true, true);
```

```js:after
var clickEvent = new MouseEvent('click');
```

自宅の環境がLinuxMintだったからなのか、Chromeのバージョンが古かったのか、どっちかだと思う。あとはWindowsでちゃんと動いてくれればいいんだけど・・・
はじめての人工知能。インストールされている Tensorflow のバージョンを確認する方法。

# Tensorflow のバージョンを確認する方法
python をインタプリタで起動します。

```
# python
```

python が立ち上がったら、次のコマンドを打ちます。

```
>>> import tensorflow as tf
>>> tf.__version__
'0.10.0rc0'
```

# pip でインストールした場合
こちらのコマンドでも確認できます。

```
# pip show tensorflow

--
Metadata-Version: 2.0
Name: tensorflow
Version: 0.10.0rc0
・
・
・
（略）
```
[Visual Studio 2015 C#] 置換の正規表現がかなり便利

正規表現を用いての置換なんてものは、今更（常識）なんでしょうが、
投稿があまり見当たらなかったので、中途半端な記事ですがあえて投稿します。

使い方は簡単。
置換する際に、検索する文字列を入力する欄（上側）に「.*」を用いるだけ。

※置換文字列を入力する、すぐ下の星マークボタン（Alt+E）を押して、正規表現を有効にする必要あり。
また、()や{}など、下記構文で用いられている文字列は「\」（￥の半角）を用いてエスケープするも必要あり。

※その他の構文は以下参照
https://msdn.microsoft.com/ja-jp/library/ae5bf541(v=vs.100).aspx


例えば、

```csharp:sample.cs
Test a = new Test();
Test b = new Test();
```

を以下のように変えたいときに

```csharp:sample.cs
var t = new List<Test>{ new Test(), new Test() };
```

「Test .* = new」を検索文字列として、空白に置換すれば前半部分が消えます。
そして、tを宣言して、「;」を「,」に置き換えれば、出来上がりというわけです。
（空白を「,」に置換してもよいです）
Vim の grep を pt (The Platinum Searcher) で実行して QuickFix をファイルパスでソートする


vimrc に以下を記述する。

```vim
augroup vimrc
  autocmd!
augroup END

" grep プログラムに pt を指定
let &grepprg = 'pt /nogroup /nocolor /column /S'
" /column で桁を表示しているので %c も使うパターンを追加
set grepformat^=%f:%l:%c:%m
" grep 後に quickfix-window を表示
autocmd vimrc QuickFixCmdPost *grep* cwindow

" http://stackoverflow.com/questions/15393301/automatically-sort-quickfix-entries-by-line-text-in-vim
" pt で grep を実行した後に結果をパス順にしたかったので sort
autocmd! vimrc QuickFixCmdPost * call s:SortQuickfix('s:QfStrCmp')
function! s:SortQuickfix(fn)
  call setqflist(sort(getqflist(), a:fn))
endfunction
function! s:QfStrCmp(e1, e2)
  let [t1, t2] = [bufname(a:e1.bufnr), bufname(a:e2.bufnr)]
  return t1 <? t2 ? -1 : t1 ==? t2 ? 0 : 1
endfunction
```
Redmine + Agileプラグイン の All in one パッケージ入れてみました

# 概要

Redmine にAgileプラグイン(redmine_agile)がワンセットになっているAll-in-oneパッケージを見つけたので入れてみました。

![toppage.png](https://qiita-image-store.s3.amazonaws.com/0/23455/6e5f0c02-441c-2ac4-627d-897117d5903b.png)


## 導入環境

| 項目 | 値 |
|:--|:--|
|OS|[CentOS 7 Minimal](http://buildlogs.centos.org/rolling/7/isos/x86_64/CentOS-7-x86_64-Minimal.iso)|
|Redmineパッケージ|[Bitnami Redmine+Agile](https://bitnami.com/stack/redmine-plus-agile)|

## Redmine環境

| 項目 | 値 |
|:--|:--|
|Redmine version|3.3.0.stable|
|Ruby version|2.1.9-p490 (2016-03-30) [x86_64-linux]|
|Rails version|4.2.6|
|Environment|production|
|Database adapter|Mysql2|

## プラグイン情報

| 項目 | 値 |
|:--|:--|
|redmine_agile|1.3.12|


# 導入手順

## perl, perl-Data-Dumper インストール

CentOS7の場合、[これをやっておかないとインストールプロセス中のMySQLインストールでコケるの](hhttp://qiita.com/wukann/items/e05f7a1177d9f57e8e8b#%E8%BF%BD%E8%A8%98)で注意。

``` shell
# yum -y install perl perl-Data-Dumper
```

## インストーラダウンロード＆インストーラ実行

[こちら](https://www.redminecrm.com/pages/bitnami_links)からインストーラ(redmineplusagile-3.3.0-0-linux-x64-installer.run)をダウンロードし、適当なディレクトリに配置し、実行権限を付与して実行します。

``` shell
# chmod +x redmineplusagile-3.3.0-0-linux-x64-installer.run
# ./redmineplusagile-3.3.0-0-linux-x64-installer.run
```

あとは対話形式でインストールを進めていけばOKです。bitnamiパッケージは導入が楽でいいですね。


# 機能

正直、自分はアジャイルに関する知見に乏しいので、これからアジャイル自体を勉強しつつ使っていこうかと。。。[こちら](https://www.redminecrm.com/projects/agile/pages/1)にプラグイン自体の機能・スクリーンショット・動画が掲載されています。

すこしいじってみた感じでは、

- Agile board 上でチケットのステータス・担当者をドラッグ＆ドロップで操作できる
- burndown 表示可
- 以下機能は有償版へのアップデートが必要な模様。
    - burnup
    - Velocity
    - Lead time
    - Trackers cumulative flow

![agile-board.png](https://qiita-image-store.s3.amazonaws.com/0/23455/3e22f96c-0a70-1ce6-6969-d748613362d5.png)
Tensorflow入門 - Linear RegressionのHypothesisとCostについて

#学習目標

線形回帰(Linear Regression)で仮説を立てる理由について理解する
Hypothesis（仮説）の線を作る
正解に近い仮説を特定できるCost Functionについて理解する


#用語説明


|用語|説明|
|---|---|
|Linear Regression|線形回帰|
|Hypothesis|仮説|

|用語|説明|
|---|---|
|H(x)|仮説（Hypothesis）|
|Wx|傾斜(W（なんの略か不明確warpかな）)|
|b|偏差(bias)|



#線形回帰(Linear Regression)で仮説を立てる理由

シンプルに説明するため、以下のようなトレーニングデータを用意しました。


|x|y|
|---|---|
|1|1|
|2|2|
|3|3|

これを線形に表現すると以下のようになります。


<img width="330" alt="スクリーンショット 2016-08-21 14.02.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/60120/59d00c46-0eb7-a428-c57e-18cf6dceccde.png">


世の中にこのような線形で予測できるものがたくさんがあります。
たとえば、以下のようなものです。

> 家の家賃を予想したい場合（家が広いほど、家賃が高い）
> 試験の成績を予想したい場合（勉強に与えた時間が多いほど、成績が高い）

などなどです。



#仮説の線を立てる方法

それでは仮説を立てる線を作ってみましょう
トレーニングデータのxと任意のデータ
W,bを入れて作ります。




式では以下のように書きます。

<img width="213" alt="スクリーンショット 2016-08-21 14.21.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/60120/ba67c37e-f925-b83a-fb57-efc13e262e23.png">




#Cost Functionとは


以下の図は三つの仮説を立てて線形にしたものです。


<img width="408" alt="スクリーンショット 2016-08-21 14.10.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/60120/62777c95-6daa-5142-970f-78797f5be7f8.png">


トレーニングデータがｘ=1,y=1, x=2,y=2, x=3,y=3のため
目でみると青い線がトレーニングデータに当てはまるのがわかります。（仮説も三つしかないし）
でも俺らはパソコンにわかってもらえるように数学的に求める方法が必要です。




そのため、Cost Functionというものを利用します。

Cost Functionとは大雑把に言うと
「仮説で立てた線」と「正解の線」の立ての距離(y)を比べてその距離が短ければ短いほど正解の線だろう特定することです。

以下図のように立ての距離を比較します。

<img width="325" alt="スクリーンショット 2016-08-21 15.07.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/60120/a1dd660e-7598-dc34-674e-c9605d6a651f.png">


「仮説で立てた線」　- 「立ての距離(y)」なので
今言ったことを式で書くと以下のようになります。

<img width="115" alt="スクリーンショット 2016-08-21 15.13.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/60120/9f857213-1a5d-8e1a-0db3-7ea3941b02b0.png">

ただ、これだと　
仮説で立てた線よりｙが大きければ
マイナスになってしまうので二乗をします。

※二乗することで＋、ーと関係なく正数のデータを出せるし差が多ければペナルティーを与えることが可能です。


<img width="156" alt="スクリーンショット 2016-09-04 15.51.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/60120/3e4f1b5a-47ae-603c-e4a0-d85536b46378.png">




この式を今回のトレーニングデータに適用してみると以下のようになります



<img width="360" alt="スクリーンショット 2016-08-21 15.23.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/60120/c2d7ec35-5bcc-c01b-d30f-fce9684413a7.png">

トレーニングデータは三つのため３で割りました。




何百万件のトレーニングデータにも使える式で表現するには以下のように表現します。


<img width="303" alt="スクリーンショット 2016-08-21 16.44.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/60120/03915c28-60cc-e9a4-a4d0-bf1ca1550c18.png">


ここでHは
<img width="213" alt="スクリーンショット 2016-08-21 14.21.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/60120/ba67c37e-f925-b83a-fb57-efc13e262e23.png">
の結果でしたよね
ので以下のようにも表現できると思います。

<img width="409" alt="スクリーンショット 2016-08-21 16.48.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/60120/0f8e62ac-1215-f05d-3553-b42848ea9f16.png">



また、このcostの値（W,b)が小さければ小さいほど正解に近い仮説を特定することが可能です。
よって以下のように表現します。



<img width="360" alt="スクリーンショット 2016-08-21 16.47.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/60120/31eae2e5-4068-70e3-b62e-87a45e1e3eb9.png">

#ここまでの結論


トレーニングデータと任意のW,b値を利用して仮説の線を作る
Cost(W,b)の値が小さければ小さいほど正解の線に近い
rails5でDBに保存しないモデルでバリデーションしたい

DBに保存しないモデルを定義したいときってありますよね？
そんなときは↓のように`ActiveRecord::Base`、rails5だと`ApplicationRecord`を継承せずにクラス定義します。

```ruby
class Book
  attr_accessor :title, :price, :page
end
```

でも「railsの機能のバリデーションのメソッドを使って、バリデーションを使いたいなー」というとき、どこを`include`すればいいんだろう？ってなりません？

```rb
class Book
  attr_accessor :title, :price, :page
  include ActiveRecord::Validations
  include ActiveRecord::Reflection
  validates :title, presence: true
  validates :price, presence: true
  validates :page, presence: true
end
```

↑のように `ActiveRecord::Validations`と`ActiveRecord::Reflection`を`include`すると`valid?`が使えるようになります。

```rb
book = Book.new
book.price = 567
book.valid?(true)
```
技術選定の時に気を付けること

新技術の話をしたときに、僕がいつも話すことをまとめてみました。気になるところとか、突っ込みどころがあれば、コメントいただきたいですm(_ _)m

# 技術選定時に気を付けること

* 現場に残る人たちが使いこなせるのか？（選定した人が抜けても機能するか？）
* ブラックボックス的に使うなら、十分に枯れているか？（[10年以上が節目？](http://japanese.joelonsoftware.com/Articles/GoodSoftwareTakesTen.html)）
* シンプルさや、使用感の統一性、既存技術との乖離性（手続き型と関数型など）などを考慮
* 高負荷時の動作など大丈夫なものか？（高負荷になるとバグが出たりします。。。）
* 既存技術と比べて大きな優位性があるのか？
* 頑張って選んでも、数年後には古いと言われます。。。
* 影響範囲が狭くて、修正頻度が極端に低いのであれば、とりあえずGoでもおｋかと。
* スケールアウト出来るとはいえ、実行速度が速い言語のほうが良いと思います。（プロトタイプ制作なら作りやすいものが良いかもですが。。。）

など、色々と考えたほうが良いかなぁと。

# C言語は今でも価値のある言語か？
https://www.infoq.com/jp/news/2013/01/C-Language

> CouchDBでは当初Erlangを多用していたが，
> "Erlang VMのクラッシュのせいで２人月以上を" 浪費した

など、言語そのものなど、ブラックボックス的に使う部分に不具合があると、マジ大変です（言語のコミッターが居るとかなら良いのでしょうが、そういうことは稀だと思います。。。）さらに、業務要件を実装するのも大変なのに、言語自体のバグにも悩まされるのは本質的では無い気もします。

# 新言語の導入失敗
担当者が新言語を導入したいと願って、導入したは良いが、その担当者が会社辞めてしまって、残ったエンジニアが、メンテ出来ないorしたくなくて、結局別言語でリプレイスされたというのはありました。（残された人たちの恨みが大きかったです。）

# 導入担当者への信頼
若い子に新技術を導入したいと言われたときに、不安な気分になったのですが、実績のあるベテランが導入したいと言った場合、特に何も感じませんでした。この違いは何かなぁと考えたときに、自分に影響があるのか無いのか？の違いだと思いました。現場のことも考えて普及活動も含めて、最後までケツ持てるのかどうか？という違いは大きいなぁと思います。（逆に言えば、そこまでやる気も無いのに導入されるとちょっと。。。）

# 型の無い言語のバージョンアップ
テストが無いと、どこで影響が出るのか分からず、バージョンアップがものすごく怖いです。Node.jsで実装していた時も、テスト必須だと思ってテスト駆動開発で実装していました。（Node.jsは、テスト駆動開発がしやすいので、テスト駆動開発おすすめです。）

# まとめ
色々と書きましたが、新技術導入自体は良いと思っています。ですが、システムが動かなくなる危険があるので、リスク・リターンを見極めて、慎重に導入していってほしいと思います。（けっして流行っているからとか、今時のモダンスタイルがどうのとか、そんな軽いノリでやらないでほしいです。）
SB Admin 2 でjQueryのdatepickerを使うと表示位置がずれる場合

SB Admin 2 でjQueryのdatepickerを使うと、カレンダーの表示位置がずれる。

ちょっと上にずれて表示される。

Firebugで確認すると、表示位置のtopがelement.styleで指定されていることがわかる。

element.styleで指定されているということは、javascriptで設定しているということなので、

miniの付かない　bootstrap-datepicker.js　を開いてみる。

すると　677行目に

top = offset.top - appendOffset.top;

という部分が見つかった。

上にずれるということは、少ないということなので、怪しい。

その行の下に

top = offset.top;

を追記すると、適切な位置に表示されるようになった。

SB Adminでは、他にもfooterが下に表示されてしまう現象もあったので、
何かあるのかもしれない。
Cloud9からFirebase Hostingを使って無料で静的サイトを公開 

Cloud9でサイトを開発していてめちゃめちゃ簡単にデプロイできたので紹介します。
Googleに買収された
[Firebase](https://firebase.google.com/)
をつかっていきます。
サインアップは済ましておいてください。

これで開発環境(Clooud9)、プロダクト環境(Firebase)も全部準備いらずでしかも無料！クラウドサービスは便利ですね。

#Firebase CLIをインストール

Cloud9ですでにnpmが使えるはずなので

```
$ npm install -g firebase-tools
```

でグローバル環境にfirebase CLIをインストール。


#ログイン

公式サイト通りだとローカル環境用の説明だったのでCloud9やオンライン開発環境用にコマンドを入力します。

```
$ firebase login --no-localhost
```

するとターミナルにURLが表示されグーグルへログイン、ターミナルでトークンを聞かれるのでそこへ行ってコピペします。


#初期化

```
$ firebase init
```

でいろいろ聞かれるんで答えていってください。
（CLIの使用情報を送っていいかとか、参照するディレクトリ名はどれにするだとか）

そうすると

`firebase.json`という設定ファイルが生成されるので、詳しいことは[Customize Hosting Behavior](https://firebase.google.com/docs/hosting/url-redirects-rewrites)

を読んでください。

`database.rules.json`とかもあるんですがデータベース使わないならきにしないでください。
（本当はドメイン名さえわかれば簡単にアクセスできるのでちゃんと設定したほうがいいんですが、、、）


#デプロイ

デフォルトだとpublicディレクトリなんですがそこにindex.htmlがあり、それが最初に読み込まれる形になるので,
public以下にイメージファイルだのjavascriptだのcssだのをすべて置いてください。

あとは

```
$ firebase deploy
```


でサイトを公開することができます。ターミナルにサイトURL（<YOUR-FIREBASE-APP>.firebaseapp.com）が表示されます。
FirebaseのコンソールのHostingページで履歴を確認することができます。
URLもそこからかわかります。ロールバックもできます。



1GBまでのファイルなら無料アカウントでいけるそうなので、ぜひ使ってみてください。
Qiitaを紹介した

海外の数値計算グループにQiitaを紹介した。

もともとメーリングリストでやり取りをしていたのだが、メールの中で「あの数式のxxx」や「このコードのooo」というのは読みにくいと感じていた。

数式と関連コードが投稿されるようになったら、スパムではないので、誤って消されないようお願いいたします。

どれくらいの方が使うのかは未知数です。
【Inkscape】Inkscapeで簡単に迷彩柄を作る方法

#0.すぐ出来る迷彩柄
案外簡単にできて、結構リアルで
驚いたので記事にした。
プラグインは何も使っていないです。

インストールしたばかりのInkscapeでできます。

(ちなみにバージョンは0.91です)


#1.山の画像を用意する
山と言ってもいろいろありますが、

![0.jpg](https://qiita-image-store.s3.amazonaws.com/0/139300/1b40b650-600c-a079-b87b-8ec2eb94aab6.jpeg)

↑こんな感じの緑の木が生い茂っている山を用意します↑
(ちなみに画像は　石鎚天狗岳1982m　石鎚山から撮影)
(撮影日付　2016年　8月　1日)


#2.Inkscapeを起動させる。

![image](https://qiita-image-store.s3.amazonaws.com/0/139300/29a3158c-ad0a-1c1a-1344-b0c5c4e355dc.png)
↑起動させるとこういう画面が出てくると思います。

#3.ファイル(F)->開く(O)

画像を開きます。

![image](https://qiita-image-store.s3.amazonaws.com/0/139300/a7b074bc-13b8-7f26-1a46-782b9e4dd495.png)
開くときに何かよくわからない↑この↑画面が出てきますが、
何もいじらずに OK を押す

#4.Ctrl+Aで画像を全範囲選択する

![image](https://qiita-image-store.s3.amazonaws.com/0/139300/f3abf73c-15d8-bb59-bc02-9a489f063e07.png)

↑のように八方に「矢印」が表示されますが、
矢印には　"触らないで"　くださいね

#5.Shiftキー+Altキー+Bキー同時押し

![image](https://qiita-image-store.s3.amazonaws.com/0/139300/601b820c-ad38-1601-b96b-b552f9401a76.png)
すると、
ビットマップのトレースというウィンドウが出てきます。

#6．多重スキャン:パスのグループを作成

多重スキャン:パスのグループを作成という下の方にある項目の
**色数**にチェックを入れる。
**スキャンを積み重ねる**にもチェックを入れる。

更新を押すと編集後のプレビューが見れます。

![image](https://qiita-image-store.s3.amazonaws.com/0/139300/0b50d2b3-19ed-e8fc-c9ec-6e0c3c9083cb.png)

**スキャン回数**は、空が写っていると、空に色をとられるので、
**24-32**くらいがいいと思います。

山の一部の写真であれれば、
**8-12**くらいでいいと思います。

**お好みで増やしたり減らしたりしてください**
**回数を増やすと時間がかかります**

#7.オプション　のタブを開く

![image](https://qiita-image-store.s3.amazonaws.com/0/139300/c196a7c9-4839-d7ea-825b-e2eee8c30122.png)
赤丸の所です。

スペックルを抑制・角を平滑化・パスを最適化を全て最大値にします。

![image](https://qiita-image-store.s3.amazonaws.com/0/139300/d059df9c-d6f1-294b-b88d-1bdad670f840.png)

上から
1000
1.34
500
です。

そうしたら、 OK を押す

#8.処理の確認
Inkscapeは処理しているのか停止しているのかわかりにくいですが、
↓ここ(赤丸)↓を見ればわかります。

![image](https://qiita-image-store.s3.amazonaws.com/0/139300/b167a23f-1fda-e2bd-077e-a23dd4fedf2d.png)

グループ化なんちゃら・・・

というのができたら完了です。
小さいウィンドウを閉じて画像を保存します。

**できた画像を拡大すると・・・・？**
![image](https://qiita-image-store.s3.amazonaws.com/0/139300/9e8b7a1f-b2e2-75d5-94f5-238fb4d23233.png)
**どうでしょう！　迷彩っぽくないでしょうか？**

**SVGにすると拡大しても、なめらか！**
画像を保存します。

**ファイル(F)から　PNG画像にエクスポートを選択して、
適当なサイズ(Full　HDとか)を指定して保存で完了！**

SVGは名前をつけて保存
↓

**！完了！**
お疲れ様でした。


#9.おまけ

10色くらいですると
これまたいい感じの写真ができます。
![g3380.png](https://qiita-image-store.s3.amazonaws.com/0/139300/2902b7dd-9b25-ed14-273c-d04d08a4fc0c.png)

エメ●ンやモン●ルのロゴも頑張れば作れそうです。

富士山でやってみると(スキャン回数7)

[Before]
![s-09.04.2120E3839BE38386E383ABE381AEE5BAADE3818BE38289E5AF8CE5A3ABE5B1B1-23b92.jpg](https://qiita-image-store.s3.amazonaws.com/0/139300/44dfc66c-7639-b26d-a65c-bb1194e4e644.jpeg)

↓

[After]

![fuji.png](https://qiita-image-store.s3.amazonaws.com/0/139300/58d8f387-200a-6a32-adc5-43c9a8a83c78.png)

ちょい編集後(詳細記事を上げます)
結構似てると思う![reszhgfhd.png](https://qiita-image-store.s3.amazonaws.com/0/139300/f88ba585-08f6-197a-9519-0dd43a29bb91.png)


#**-完-**
ありがとうございました
VMware上のCentOSにSambaを用いてMacとの共有フォルダを作る


## 概要

実行環境はLinuxで、コーディングは使い慣れたMac上のエディタで行いたい。

そこで、VMware Fusion上のCentOSにSambaで共有フォルダを作り
Mac上でファイルの編集できるようする。

## 環境

Mac OS X 10.11.6
CentOS 7.2.1511 

## sambaのインストール

```
sudo yum install samba
```

```
# 自動起動
systemctl enable smb
# sudo chkconfig smb on # CentOS6以前
```


## 共有ディレクトリを作成
```
mkdir /home/samba
sudo chmod -R 0777 /home/samba/
sudo chown -R nobody:nobody /home/samba
```

SELinuxの設定しないと上記で権限を変更しても、読み書きができない

```
# SELinuxの設定
sudo chcon -t samba_share_t /home/samba/ # 特定ディレクトリへのアクセスを許可
# あるいは
# setsebool -P samba_enable_home_dirs on # home以下へのアクセスを許可
```


## sambaの初期設定
```
# smb.confをバックアップ
sudo cp -ap /etc/samba/smb.conf /etc/samba/smb.conf.bk
```

```
# smb.confを編集
sudo vi /etc/samba/smb.conf
```

```smb.conf
; ===== 以下を追記 =====
[samba]
        comment = samba directory
        path = /home/samba
        public = yes
        browseable = yes
        writable = yes
        hosts allow = 127. 192.168. # 内部からのアクセスのみ許可
```

```
# smb.confの記述ミスをチェック
testparm
```

## ユーザーの追加

```
# 既存ユーザ「user-name」を追加
sudo pdbedit -a user-name
```

```
# sambaを再起動
systemctl restart smb
# /etc/init.d/smb restart # CentOS6以前
```

## パケットフィルタリングの設定

CentOS7からはiptablesからfirewalldへと移行したらしい。
どちらかを使う。

### 1. firewalldの場合（CentOS7）
```
firewall-cmd --permanent --zone=public --add-service=samba
firewall-cmd --reload
```

### 2. iptablesの場合
```
# firewalldを無効に
systemctl stop firewalld # CentOS7
systemctl disable firewalld # CentOS7
```

```
# iptablesのインストール
sudo yum install iptables-services
```

```
# iptableを編集、あるいは作成
sudo vi /etc/sysconfig/iptables
```



iptablesの内容は[ここ](http://tweeeety.hateblo.jp/entry/2014/09/22/173823)に書かれているものをそのまま使いました。

```
# 自動起動
systemctl enable iptables
systemctl start iptables
# sudo /etc/init.d/iptables restart # CentOS6以前
```

## Mac側から接続
Finder→「サーバへ接続」からマウントできれば成功

## 参考

- [Mac(OS X)とVMWare Fusion7(CentOS5.3)で開発環境を作る-Samba設定、iptables編集、からの共有フォルダにアクセスする]
(http://tweeeety.hateblo.jp/entry/2014/09/22/173823)
- [sambaサーバによるファイル共有環境の構築手順メモ]
(http://www.virment.com/config-sambaserver/)
- [CentOS上でSAMBAサーバを立ちあげてWindowsからアクセスするためのメモ]
(http://futurismo.biz/archives/1390)
- [CentOS7, iptables設定でハマった]
(http://mosuke5.hateblo.jp/entry/2014/09/20/180326)
シーザー暗号で遊ぼう

暗号とかパスワード系は１年ちょっと前に
<a href="http://befool.co.jp/blog/ayumegu/unity-study-CreateSaveCode/" target="_blank">ファミコン時代のセーブ用のパスワード作ってみる</a>で遊んだっきりだたので、
今日はシーザー暗号で遊びます＾＾
ワンタイムパッドとかってのもきになったけど簡単なのから遊ぶ。

<a href="https://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%BC%E3%82%B6%E3%83%BC%E6%9A%97%E5%8F%B7" target="_blank">シーザー暗号(wikipedia)</a>
小さい頃に秘密のお手紙とか言って遊んだような気もする。

##概念的な
やりかたはとってもシンプル。文章全体を何文字かシフトさせるだけ。
たとえば　ayumegu　なら + 1　で bzvnfhv となります。
シフトする関係上英語とかひらがなとかになるかな。漢字は表つくるのしんどそう・・・。

##まずは変換テーブル？みたいなものを定義
この変換テーブルをめっちゃくちゃにしたらより解析難易度が上がってもっとわけわかんなくなりそうで面白そうだけど・・・
解読してくれる相手もテーブル知ってなきゃいけないもんね・・・・。
あ、でもそこまでしても長い文章になると頻度解析とかで結構わかるっぽいですね。
英語の文章の場合E,T,A,O,I,Nがよく使われるってあったな。
あ、でも日本語ならかなり大丈夫なんじゃないかな・・・。なんて。
ひらがなをローマ字にしてこれをやるのもいい感じなきがするな。
英単語だとどうしても単語と単語の間にスペース入っちゃうからね〜・・・。

まぁ今回はこんな感じにしてみました。
abcdefghijklmnopqrstuvwxyz0123456789

##作成
シンプルだからあっという間に完成。

```csharp

public class CaeserCipher : MonoBehaviour {

	public const string TABLE = "abcdefghijklmnopqrstuvwxyz0123456789";

	void Start()
	{
		Debug.Log(CreateCaeserCipher(1,"ayumegu"));
	}

	// 暗号文作成と解析
	public string CreateCaeserCipher(int no, string str)
	{
		string result = "";
		for(int i = 0; i < str.Length; i++)
		{
			int charNo = GetCharNo(str.Substring(i, 1));
			if(charNo != -1)
			{
				int tableNo = charNo + no;
				if(tableNo >= TABLE.Length) tableNo -= TABLE.Length;
				if(tableNo < 0) tableNo += TABLE.Length;
				result += TABLE[tableNo];
			}
			else
			{
				Debug.LogError("使用できない文字が使われています" + str);
				return null;
			}
				
		}

		return result;
	}

	// 文字が何番目か取得
	public int GetCharNo(string str)
	{
		for(int i = 0; i < TABLE.Length; i++)
		{
			if(TABLE[i].ToString() == str)
			{
				return i;
			}
		}
		return -1;
	}
}
```

実行結果はこんな感じ
<img width="342" alt="スクリーンショット 2016-09-04 14.22.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/aa98025e-d29b-facc-84e1-07bc8dc8f9e2.png">

もどすときはこうしてあげれば元の文字にもどります。

```csharp
CreateCaeserCipher(-1,"bzvnfhv");
```

あ、大文字小文字の考慮わすれてたけどまぁいいや。
これはここまで。
iOS Swift で RealmSwift を使えるようにする前準備（初心用）


Realm　を iOS,Swift で使いたいけど、何から始めていいかわからない人向けです

#手順
1.Xcodeで新規プロジェクトを作成
2.ターミナルからcocoapodsをインストール
3.ターミナルからpod initを実行してPodfileを作成
4.RealmSwiftをインストールするようPodfileを編集する
5.ターミナルからpod install してcocoapodsでRealSwiftをインストール

ここまで
簡単ですね。
次にRealmを実施に使ってみるコーディングをしたいのですが、続きは次回にすること位して、手順を補足します

#1.Xcodeで新規プロジェクトを作成
適当な名前でプロジェクトを作成します
今回はRealmSampleとします
Product nameでRealmSampleを指定すればいいでしょう

#2.ターミナルからcocoapodsをインストール

```
sudo gem install -n /user/local/bin cocapods
pod --version
```

#3.ターミナルからpod initを実行してPodfileを作成

ターミナルでプロジェクトを生成したファイルに移動してpod initを実行

```
cd RealmSample
pod init
```

#4.RealmSwiftをインストールするようPodfileを編集する

vim Podfile でPodfileを開いて、end の前に
pod 'RealmSwift' を追加しましょう

```
$ cat Podfile
# Uncomment this line to define a global platform for your project
# platform :ios, '9.0'

target 'RealmSample' do
  # Comment this line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for RealmSample0904
  pod 'RealmSwift'//⭐︎これを追記

end
```


#5.ターミナルからpod install してcocoapodsでRealSwiftをインストール

ターミナルからpod install すればOK

```
$ pod install
Analyzing dependencies
Downloading dependencies
Installing Realm (1.0.2)
Installing RealmSwift (1.0.2)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `RealmSample.xcworkspace` for this project from now on.
Sending stats
Pod installation complete! There is 1 dependency from the Podfile and 2 total
pods installed.
```
RPGツクールMVに「指定したキャラクターの方へ歩く」があった件

![move.png](https://qiita-image-store.s3.amazonaws.com/0/135524/ce9b84ff-8873-9790-0e05-13b23b2f15e9.png)
「移動ルートの設定」には「スクリプト」を書ける機能があります。
どうやって活用するか迷われる方も多いと思いますが、その有効活用例を見つけたのでお伝えします。

既存の「移動ルートの設定」には「プレイヤーに近づく」というボタンがあります。（半分隠れてますが上図にも写ってますね）
しかしながら、ゲームを作っていると「特定のマップイベントに近づく」ボタンもほしいなあ…とか思ったりします。
（例えば「ランダムに歩くマップイベントを追跡するマップイベント」とか）
こんな時は「スクリプト」ボタンを押し以下のように記述してみましょう。

```
this.moveTowardCharacter($gameMap.event(1))
```

なんとこれだけの記述で「イベントID:001のマップイベントに向かって（一歩）歩く」という機能を実現できます！ほぼ英語の意味そのままですね！

じゃあ「マップイベントID:001から遠ざかる」は…？もちろん可能です！

```
this.moveAwayFromCharacter($gameMap.event(1))
```

少し書き換えただけですね！
さらに、「指定したマップイベントの方を向く」は`this.turnTowardCharacter(マップイベント)`、「指定したマップイベントの逆を向く」は`this.turnAwayFromCharacter(マップイベント)`で可能です！

ちなみにこのスクリプト、読んで分かる通りカッコの中にはキャラクター（マップイベントやプレイヤーなど）を指定するルールになっています。
が、実は内部処理的にはx座標とy座標しか使用していません。
ですので以下のように、座標しか持っていない偽装キャラクターでも正常動作します。

```
this.moveTowardCharacter({x: 3, y: 4})
```

座標(3,4)に向かって（一歩）歩く、という移動ルートになりますね。
これだけではピンと来ないかもしれませんが、これを少し変形して
「座標（変数１番,変数２番）に向かって歩く」とするとめちゃくちゃ応用性が高まります。
書き方は以下。

```
this.moveTowardCharacter({x: $gameVariables.value(1), y: $gameVariables.value(2)})
```

たった一行でもスクリプトを活用すれば随分簡単に作りたいことが作れます。
食わず嫌いせずにいろいろためしてみるといいと思いますよ～

---

余談

ただし「スクリプトすげえ！！英語で書いたことが何でも実行できるんだ！」とか思ってはいけません…
「moveTowardCharacter」などの４種類の機能は「ツクール本体のスクリプトの中には眠っていたものの、エディタからは選べなかった機能」です。
もっと言うと、移動ルートの設定の「プレイヤーに近づく」は本体内部でこういう形で記述されていました。

```
this.moveTowardCharacter($gamePlayer)
```

つまり「プレイヤーに近づく」は「指定したキャラクターに近づく」と「指定したキャラクター＝プレイヤー」の２つの記述の組み合わせで構成されていたわけです。
そしてこの「指定したキャラクターに近づく」ですが…なんと他のどの部分でも使用されていませんでした！！
こんなに色んな用途に使える機能なのに、「移動ルートの設定の、プレイヤーに近づく」という限られた用途にしか用いられていなかったのです。もったいなさすぎるっ（笑）

…というわけで今回たった一行で新たな機能が使えたのは、
あくまで「ツクールの中に眠っている機能を掘り起こしただけ」だったからなのです。
以前投稿した[RPGツクールMVで「キーが押された瞬間」だけ条件分岐](http://qiita.com/krmbn0576/items/0152c4149739c112e6f7)でも
たった一行で機能を実現していましたが、これも同様に掘り起こした機能です。

もしあなたがツクールにない新しい機能をスクリプトで実現したい時は…
たぶん一行ではすまないと思いますのでそこだけはご了承ください。
Ruby on Rails で bundle が失敗した

結論からいうと、 sqlite3-devel がなかったようです。
他にやったことは、パーミッションの設定。

他の方が書いた同じような[記事](http://blog.sojiro.me/blog/2014/11/10/making-first-app-with-rails-number-1-setup-rails/)。

環境：
CentOS 5.11
Rails 5.0.0.1
Ruby 3.2.1

なぜか bundle コマンドがうまく行かない。

`An error occurred while installing sqlite3 (1.3.11), and Bundler cannot continue.`

sqlite3 がない？おかしいなぁ。

`Installing sqlite3 1.3.11 with native extensions`

`Gem::FilePermissionError: You don't have write permissions for the /vendor/bundle/ruby/2.3.0 directory.`

su になってやってみると、警告メッセージのあと、何かやっているがやっぱり失敗する。

`Don't run Bundler as root. Bundler can ask for sudo if it is needed, and installing your bundle as root will break this application for all non-root users on this machine.`

root でバンドラーを走らせるな。バンドラーは sudo が必要なら聞くし、root としてバンドルをインストールすると、このマシンの root じゃない他のユーザーのこのアプリケーションを破壊するだろう。

（なぜ訳したw）

えー。パーミッションがないからスーパーユーザーにしたのに・・・。なんか ruby や rails のインストールからおかしかったのか？　普通のユーザに戻って、必要なときに sudo して作業を続けることに。

エラーメッセージをよく確認してみると、

`An error occurred while installing sqlite3 (1.3.11), and Bundler cannot continue.
Make sure that `gem install sqlite3 -v '1.3.11'` succeeds before bundling.`

じゃぁ、gem install をすればいいのね。

gem install sqlite3 -v '1.3.11

`ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /usr/local/lib/ruby/gems/2.3.0 directory.`

・・・結局これか。

じゃぁ、このディレクトリに書き込み権限を追加してやってみる。
またなんか出てきた。

`Gem::FilePermissionError: You don't have write permissions for the /vendor/bundle/ruby/2.3.0 directory.`

ん？　今度は /usr/local じゃなくて、 /vendor/bundle/ruby となっている。
なんかユーザ以外のディレクトリのパーミッションを緩めるの嫌だなぁ。インストールのときに何か間違ったのかな？

仕方ないので、また chmod とかやってみる。

またなんか出た。

`Installing sqlite3 1.3.11 with native extensions`

`Gem::Ext::BuildError: ERROR: Failed to build gem native extension.`

`    current directory: /vendor/bundle/ruby/2.3.0/gems/sqlite3-1.3.11/ext/sqlite3
/usr/local/bin/ruby -r ./siteconf20160904-8569-xpja3s.rb extconf.rb
checking for sqlite3.h... no
sqlite3.h is missing. Try 'port install sqlite3 +universal',
'yum install sqlite-devel' or 'apt-get install libsqlite3-dev'
and check your shared library search path (the
location where your sqlite3 shared library is located).`

ヘッダーがない？　あぁ、sqlite3 自体はあるのに、開発用のパッケージはないということか。

yum install sqlite-devel

とかやって、もういっかい bundle コマンドを打つ。

・・・
`Installing rails 5.0.0.1
Installing sass-rails 5.0.6
Bundle complete! 15 Gemfile dependencies, 63 gems now installed.
Bundled gems are installed into /vendor/bundle.`

できた！

しかし、ruby関連のどのパッケージをユーザ毎にすればよかったのか、疑問が残る。
誰か教えてください。
CSVファイルの読み込み


# スクリプト

```csharp:CSVLoader.cs
using UnityEngine;
using System.Collections;
using System.IO;

public class CSVLoader : MonoBehaviour {

	// Use this for initialization
	void Start () {
		int i=0, j;
		TextAsset csv = Resources.Load ("CSV/sample") as TextAsset;
		StringReader reader = new StringReader (csv.text);
		while (reader.Peek () > -1) {
			i++;
			Debug.Log (i+"回目");
			string line = reader.ReadLine ();
			string[] values = line.Split (',');
			for (j = 0; j < values.Length; j++) {
				Debug.Log (values [j]);
			}
		}
	}
}
```

# 処理の流れ
1. TextAsset型にCSVファイルをロードする．
2. StringReader型でCSVファイルを読むやつを作成する．
3. reader.Peek()>-1になるまで以下の処理
4. string line に　reader.ReadLine()で一行ずつ読み込む
5. values[]に列を格納
6. valuesの値をどっかにいれる

# 注意点
- CSVの日本語が文字化けする  
対処法探し中
- using System.IO;
[Xcode] 右ペインのアイコンで示されている各タブの名称

# 左から順に列挙

|タブ名|アイコン|
|:----|:-----:|
|File Inspector|<img width="260" alt="File Inspector.png" src="https://qiita-image-store.s3.amazonaws.com/0/130316/6f626154-e9aa-786f-5507-f340316f287a.png">|
|Quick Help Inspector|<img width="260" alt="Quick Help Inspector.png" src="https://qiita-image-store.s3.amazonaws.com/0/130316/995c1fd1-36ce-0244-737b-41d65517b331.png">|
|Identity Inspector|<img width="260" alt="Identity Inspector.png" src="https://qiita-image-store.s3.amazonaws.com/0/130316/b7cc050a-afa1-cc7a-d76f-83e9c4756f25.png">|
|Attributes Inspector|<img width="260" alt="Attributes Inspector.png" src="https://qiita-image-store.s3.amazonaws.com/0/130316/6765649e-f414-26ce-81c1-2074319135b4.png">|
|Size Inspector|<img width="261" alt="Size Inspector.png" src="https://qiita-image-store.s3.amazonaws.com/0/130316/f14b78a1-32ba-8c9d-032d-0fc4f257c627.png">|
|Connections Inspector|<img width="261" alt="Connections Inspector.png" src="https://qiita-image-store.s3.amazonaws.com/0/130316/4db69a9b-2362-9922-39e2-596c39db69c4.png">|
|Bindings Inspector|<img width="260" alt="Bindings Inspector.png" src="https://qiita-image-store.s3.amazonaws.com/0/130316/bd91299d-000d-068f-35a3-9a708ffbfcef.png">|
|View Effects Inspector|<img width="260" alt="View Effects Inspector.png" src="https://qiita-image-store.s3.amazonaws.com/0/130316/5de4de1b-68d8-179f-bd4b-6231923fbd91.png">|

# 初学者がTipsを見ても理解できない問題

OSXのアプリを開発しようとTipsを見ていたところ躓いたので書きました。
Xcodeで「右ペインのタブを選択して項目のプロパティを設定する」という内容の説明をする場合、次のように書かれていることが多いです。
「〇〇 Inspectorの△△を□□を設定」
タブを開いても「〇〇 Inspector」といった文字は無いので、どのタブか分からず私は一度詰まりました。

アイコンにカーソルを合わせて数秒待つとツールチップで名称が表示されます。
コンピュータは数学者になれるのか？①

# コンピュータは数学者になれるのか？①
読んでいる本
https://www.amazon.co.jp/コンピュータは数学者になれるのか-数学基礎論から証明とプログラムの理論へ-照井一成/dp/4791768515
まとめスライド①
<iframe src="//www.slideshare.net/slideshow/embed_code/key/jQZpU737699D2K" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/SoheiArisaka/computation1" title="Computation1" target="_blank">Computation1</a> </strong>
Raspberry Piで植物をつぶやかせる

# Raspberry Piで植物をつぶやかせる

+ スライド
<div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/SoheiArisaka/raspberry-pi-65667653" title="Raspberry piで遊んでみた" target="_blank">Raspberry piで遊んでみた</a> </strong>  

+ 参考文献 
 + ラズパイを買ったらそのあとは？地獄の初期設定をしよう【OSインストール・日本語設定編】
 + http://liginc.co.jp/261317
 + Raspberry PiをIBM Watson、Bluemix、Node-REDに接続して活用する
 + https://www.webprofessional.jp/2016/06/2584/
 + AWS IoTとRaspberry Pi使って、プランターの野菜を救う！
 + http://qiita.com/hase-ken/items/8d2d66e002625ca46e11
 + Raspberry Piでプランターの水やりを自動化してみた
 + http://qiita.com/kwt514/items/33483238b25aafd1dc6a
 + Analog Inputs for Raspberry Pi Using the MCP3008
 + https://cdn-learn.adafruit.com/downloads/pdf/reading-a-analog-in-and-controlling-audio-volume-with-the-raspberry-pi.pdf
 + Bluemix の Cloudant サービスを使ってみる
 + http://dotnsf.blog.jp/archives/1007728395.html
公理的集合論

# 公理的集合論
<iframe src="//www.slideshare.net/slideshow/embed_code/key/vS6lfpaGBbp6ut" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/SoheiArisaka/ss-65667700" title="公理的集合論と独立性証明" target="_blank">公理的集合論と独立性証明</a> </strong> 
<iframe src="//www.slideshare.net/slideshow/embed_code/key/DXpL6k1uDG9R0e" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/SoheiArisaka/five-element-basis" title="非可算線形順序のfive element basis問題" target="_blank">非可算線形順序のfive element basis問題</a> </strong>
Goのビルドツールgbでビルド＆ブラウザでHello world

## インストール
`$ go get github.com/constabulary/gb/...` 


## リポジトリからソースコードを取得
git cloneしたあとのディレクトリ構成は以下の通り。

```
$ tree
.
├── src
│   └── hello
│       └── main.go
└── vendor
    └── manifest
```

main.goの中身は以下の通り。
GoのWAFの1つであるGojiのサンプルを拝借。[GitHub - zenazn/goji](https://github.com/zenazn/goji)

```go
$ cat src/hello/main.go
package main

import (
        "fmt"
        "net/http"

        "github.com/zenazn/goji"
        "github.com/zenazn/goji/web"
)

func hello(c web.C, w http.ResponseWriter, r *http.Request) {
        fmt.Fprintf(w, "Hello, %s!", c.URLParams["name"])
}

func main() {
        goji.Get("/hello/:name", hello)
        goji.Serve()
}
```

manifestファイルの中身は以下の通り。
プロジェクトに追加済みのライブラリが記載されている。

```go
$ cat vendor/manifest
{
	"version": 0,
	"dependencies": [
		{
			"importpath": "github.com/goji/param",
			"repository": "https://github.com/goji/param",
			"revision": "0b4aa9fcd96f890c0ae685fc425d85b80a7bed52",
			"branch": "master"
		},
		{
			"importpath": "github.com/zenazn/goji",
			"repository": "https://github.com/zenazn/goji",
			"revision": "4d7077956293261309684d3cf1af673f773c6819",
			"branch": "master"
		}
	]
}
```


## ライブラリの取得

以下コマンドを実行し、ライブラリを取得。
`$ gb vendor restore`


## ビルド＆実行
`$ gb build all`

binディレクトリ配下に作成されたバイナリファイルを実行。

```go
$ ./bin/hello
2016/09/04 02:45:23.341341 Starting Goji on [::]:8000
```


## ブラウザから以下URLにアクセス
Hello, world!と表示されればOK。
`http://[サーバのIPアドレス]:8000/hello/world`


## （おまけ）共有リポジトリで管理するためのgitignoreファイル
gitignoreとは、gitの管理に含めないファイル/ディレクトリを指定するファイル。
今回は追加したライブラリおよびビルド時に作成されるファイルをgitで管理しないように以下の通り記載。

```
$ cat .gitignore
# Compiled Object Files, Static and Dynamic libs(Shared Objects)
*.o
*.a
*.so

# Folders
bin/*
vendor/*

# manifestファイルは共有する
!/vendor/manifest
```


## （おまけ）ライブラリを追加するとき
`$ gb vendor fetch [パッケージ名]`
Cygwin環境でjavacコマンドの出力が文字化けするのを改善する

# 環境

Windows 10 + Cygwin + ConEmu

Cygwin環境+Tabを実現するため、ConEmuを使用している。

# 問題点

javac(Gradle経由を含む)を実行すると、エンコーディングの問題で出力が文字化けしてしまう。

IDEでは正しく表示されるので実害はあまりないし、年単位で放置し続けていたが、気持ち悪いので直すことにした。

```
豕ｨ諢・荳驛ｨ縺ｮ蜈･蜉帙ヵ繧｡繧､繝ｫ縺ｯ髱樊耳螂ｨ縺ｮAPI繧剃ｽｿ逕ｨ縺ｾ縺溘・繧ｪ繝ｼ繝舌・繝ｩ繧､繝峨＠縺ｦ縺・∪縺吶・
豕ｨ諢・隧ｳ邏ｰ縺ｯ縲・Xlint:deprecation繧ｪ繝励す繝ｧ繝ｳ繧呈欠螳壹＠縺ｦ蜀阪さ繝ｳ繝代う繝ｫ縺励※縺上□縺輔＞縲・
豕ｨ諢・蜈･蜉帙ヵ繧｡繧､繝ｫ縺ｮ謫堺ｽ懊・縺・■縲∵悴繝√ぉ繝・け縺ｾ縺溘・螳牙・縺ｧ縺ｯ縺ｪ縺・ｂ縺ｮ縺後≠繧翫∪縺吶・
豕ｨ諢・隧ｳ邏ｰ縺ｯ縲・Xlint:unchecked繧ｪ繝励す繝ｧ繝ｳ繧呈欠螳壹＠縺ｦ蜀阪さ繝ｳ繝代う繝ｫ縺励※縺上□縺輔＞縲・
Internal Error : missing async record in profiling stack
```

# 直し方

cmd.exeの場合は `chcp` コマンドを投げるように案内されている。
Cygwin環境の場合は下記のようにコマンドを打つと改善される。

```
chcp.com 65001
```

上記実行後は出力が正しく行われる。

```
注意:一部の入力ファイルは非推奨のAPIを使用またはオーバーライドしています。
注意:詳細は、-Xlint:deprecationオプションを指定して再コンパイルしてください。
注意:C:\cygwin\work\ace-v3\app\src\main\java\com\eaglesakura\andriders\util\AppUtil.javaの操作は、未チェックまたは安全ではありません。
注意:詳細は、-Xlint:uncheckedオプションを指定して再コンパイルしてください。
```

常に有効化したいので、 `~/.bashrc` の最初にコマンドを書いておくと捗る。
「機械学習」まとめ連載（其の２・基本式「ｙ＝ｗTx」）

#基本式「ｙ＝ｗTx」

こんにちは、mucunです。

今回は、機械学習の基本式「$y=w^Tx$」の紹介をした上で、
MATLABでの簡易の機械学習方法について紹介したいと思います。

[前回](http://qiita.com/mucunwuxian/items/016b4f80925783cc1a3a)の記事では、以下内容の話をさせてもらいました。

* **識別のための「重み」を算出するのことが「機械学習」**
* **「重み」を算出すれば、未知のデータで予測ができる**

しかし、うーん、、、
文章の説明を見返すと、何だか分かりづらいですね。
ですが、これ、数式で表現すると非常に分かりやすくなります。

##数式で、機械学習を説明する

先に言っておくと「$y=w^Tx$」で表現される機械学習手法は、
最も基本となる単純な手法となります。

ただ、全ての機械学習はこの式の応用で表現できますので、
先ずは基本を押させておきましょう。

機械学習手法基本の登場人物についてまとめると、

1. $x_{known}$ : 結果が既知の学習用データ
1. $y_{known}$ : 学習用データに結びつく何かしらの結果
1. $w$ : 学習サンプルデータとその結果から算出した重み
1. $x_{unknown}$ : 結果が未知のデータ
1. $y_{forecast}$ : 結果が未知のデータの予測結果

以上、５つです。

この登場人物と数式を用いて、機械学習の説明をすると、

--------

機械学習とは、

　$y_{known}=w^Tx_{known}$

が成立する「$w$」を算出し、算出した「$w$」を用いて、

　$y_{forecast}=w^Tx_{unknown}$

という計算を行い、予測を実施する。

--------

となります。

どうですか？
分かりやすくないですか？

##データの性質を確認

ここで、登場人物のデータの性質を確認します。

1. $x_{known}$ : 特徴次元「$d$」×学習用サンプル数「$n_{known}$」の行列
1. $y_{known}$ : 学習用サンプル数「$n_{known}$」のベクトル
1. $w$ : 特徴次元「$d$」のベクトル
1. $x_{unknown}$ : 特徴次元「$d$」×未知のサンプル数「$n_{unknown}$」の行列
1. $y_{forecast}$ : 未知のサンプル数「$n_{unknown}$」のベクトル

以上です。
未知のサンプル何れについても、共通の重み「$w$」を掛け合わせることで、
予測が実施できるという訳です。

##基本原理を知らなくても、とりあえず「ｗ」を求める方法

「$w$」を算出する際の基本的な概念は、
学習用サンプルにおいて、「$y_{known}$」と「$w^Tx_{known}$」の差が、
最も小さくなるように「$w$」を求めるというものです。
（※「$y_{known}$」と「$w^Tx_{known}$」は、基本的には一致しません）

差分を最小化するためには、少し込み入った処理が必要なのですが、
実は、MATLABを使えば簡単に「$w$」を求めることができます。

それを実現しているMATLABコードが以下です。

```Matlab:solve_weight.m
clear all;
rng(0);

% make data
n_sample   = 50;
d          = 30;
x_sample   = randn(d, n_sample);
y_sample   = randn(1, n_sample);

% solve weight
w          = (y_sample / x_sample)';

% check result
y_approach = w' * x_sample;

figure;
plot(y_sample,   '--r', 'linewidth', 2); grid on; hold on;
plot(y_approach, '-b',  'linewidth', 2);
legend({'y\_sample', 'y\_approach'});
```

プログラムを実行すると、下記のような結果が出ます。
<img width="500" src="https://qiita-image-store.s3.amazonaws.com/0/126499/646f419f-59ef-7d24-5e54-c4d4957249b5.jpeg">

ここで行っていることは、

　$y_{sample}=w^Tx_{sample}$

という式を変形して、

　$y_{sample}/x_{sample}=w^T$
　$(y_{sample}/x_{sample})^T=w$
　$w=(y_{sample}/x_{sample})^T$

として、「$w$」を求めてしまおう、というものです。
プロットは、正解値の「$y_{sample}$」と、
求めた「$w$」から「$w^Tx_{sample}$」を計算した「$y_{approach}$」との比較です。
パッと見、結果ベースで割とフィッティングできている気がします。

ここで「$x_{sample}$」は行列なので、
本来、単純に両辺を割ることができないのですが、
そこは MATLABが上手いこと解釈してくれるので、
上記のような行列での割り算ができてしまいます。
どんな解釈をしてくれているかは、次回以降詳しく説明をします。

今回の記事はここまでとなります。
読んで下さった方、ありがとうございました。('◇')ゞ
メモ exim4 mailq 手動削除

root@system:/var/log/exim4# mailq
15m   420 xxx-00084i-CT <test@destination.com>
          test@local.com

 9m   420 xxx-0008DB-Fn <test@destination.com>
          test@local.com

root@system:/var/log/exim4# 
root@system:/var/log/exim4# exim -Mrm xxx-00084i-CT
Message xxx-00084i-CT has been removed
root@system:/var/log/exim4# exim -Mrm xxx-0008DB-Fn
Message xxx-0008DB-Fn has been removed
root@system:/var/log/exim4#
Kodingで Dockerを利用して WordPressを立ち上げる

[Koding](http://www.koding.com/)を利用して、Docker-Composeで WordPressをインストールしてみました。

Kodingに Stackと VMを作るところは省略。

## docker, docker-composeをインストール

apt-getでは、最新版が入らないと言うことで、以下のエントリーを参考に最新版をインストール。

- [DockerとDocker Composeをインストール \- Qiita](http://qiita.com/taroshin/items/22bb360b18a0a24871dd)

```
sudo su -
wget -qO- https://get.docker.com/ | sh
docker version

curl -L https://github.com/docker/compose/releases/download/1.7.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose
docker-compose version
```

## docker-compose.ymlファイルを作成

ファイルを作成して、以下の内容を書き込む。

```
version: '2'
services:
  db:
    image: mysql:5.7
    volumes:
      - "./.data/db:/var/lib/mysql"
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    links:
      - db
    ports:
      - "80:80"
    volumes:
      - ./wordpress:/var/www/html
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_PASSWORD: wordpress
```

## docker-composeを起動する

以下のコマンドで、docker-composeを起動する。

```
sudo docker-compose up -d
```

これで、Dockerが起動して 80番ポートで WordPressが起動します。「wordpress」フォルダが作成され、このファイルと同期されます。

## パーミッションを変更

インストールされた WordPressは「www-data/www-data」ユーザーで作成されるため、そのままでは Kodingで編集できません。そのため、必要に応じてパーミッションを変更します。

```
chmod 777 -R wordpress/wp-content/themes
```

※ 他にも必要な場所があるかも

## IPを調べる

VMの設定を確認するか、以下のコマンドで IPアドレスを調べる。

```
curl inet-ip.info
```

後はブラウザーに、IPアドレスを入れれば WordPressが見られます。

## 課題

おそらくこの状態だと、VMを落としたときにIPが変わってしまうので、別途 Elastic IPなどを使って IPを固定する必要がありそう。
【Processing】ロータリーエンジンのスクリーンセーバーをProcessingでつくる

随分前に作ったので
解説ができませんが・・・


MAZDAロータリーエンジンの仕組みのスクリーンセーバーを作ってみました。

コピペで作れます。

```processing:roter.pde
int rt_cx;    //rotery center x
int rt_cy;    //rotery center y

int base_r;
int ig_r;    //inner gear radius
int st_r;    //stationally gear radius
int di_r;    //difference between ig_r and st_r

float rot_cen_posx,rot_cen_posy;  //rotation center point


float base_rt=1;  //base rotatetion degree volume
float now_rt;    //now rotation degree

float r;

float pi=3.14159265358979;

int i;

float dw,dh,smer;      //smer=smaller

int s;
int m;
int h;
String t;

void setup(){
  dw=displayWidth;
  dh=displayHeight;
  
  if(dw>=dh){
    smer=dh;
    base_r=(int) (smer/13.5);
    
    ig_r=base_r*3;  st_r=base_r*2; di_r=base_r;
    r=7.5*base_r;
    now_rt=0;
    rt_cx=displayWidth/2-st_r; rt_cy=displayHeight/2-st_r;
  }
  
  else if(dw<dh){
    smer=dw;
    base_r=(int) (smer/13.5);
    
    ig_r=base_r*3;  st_r=base_r*2; di_r=base_r;
    r=7.5*base_r;
    now_rt=0;
    rt_cx=displayWidth/2-st_r; rt_cy=displayHeight/2-st_r;
  }
  
  size(displayWidth,displayHeight);
  background(0);
  frameRate(60);
  noFill();
  
  
  
  
}

void draw(){
  
  
  
  rtt();
  
  s = second();
  m = minute();
  h = hour();
  t = nf(h, 2) + ":" + nf(m, 2) + ":" + nf(s, 2);
  text(t, dw-(smer/18)*5,dh-(smer/18)-20, (smer/18)*6, (smer/18)+20);
  
}

void rtt()
{
  background(0);
  noFill();
  strokeWeight(4);
  stroke(#FFFFFF);
  
  rot_cen_posx = rt_cx;
  rot_cen_posy = rt_cy;
  now_rt+=(base_rt*3);
  
  
  
  ellipse(rt_cx+st_r,rt_cy+st_r,st_r*2,st_r*2);    //stationally gear
  ellipse(rt_cx+st_r+di_r*cos((now_rt*3)*pi/180) , rt_cy+st_r+di_r*sin((now_rt*3)*pi/180) , ig_r*2 , ig_r*2);    //inner gear
  ellipse(rt_cx+st_r , rt_cy+st_r , di_r*2 , di_r*2 );    //excentric gear
  
  
  arc(rt_cx+st_r+di_r*cos((now_rt*3)*pi/180)+r*cos((now_rt+240)*pi/180) , rt_cy+st_r+di_r*sin((now_rt*3)*pi/180)+r*sin((now_rt+240)*pi/180) , r*cos(30*pi/180)*4, r*cos(30*pi/180)*4, ((now_rt+30)/180)*pi , ((now_rt+90)/180)*pi);    //roter line 1
  arc(rt_cx+st_r+di_r*cos((now_rt*3)*pi/180)+r*cos((now_rt+0)*pi/180) , rt_cy+st_r+di_r*sin((now_rt*3)*pi/180)+r*sin((now_rt+0)*pi/180) , r*cos(30*pi/180)*4, r*cos(30*pi/180)*4, ((now_rt+150)/180)*pi , ((now_rt+210)/180)*pi);    //roter line 1
  arc(rt_cx+st_r+di_r*cos((now_rt*3)*pi/180)+r*cos((now_rt+120)*pi/180) , rt_cy+st_r+di_r*sin((now_rt*3)*pi/180)+r*sin((now_rt+120)*pi/180) , r*cos(30*pi/180)*4, r*cos(30*pi/180)*4, ((now_rt+270)/180)*pi , ((now_rt+330)/180)*pi);    //roter line 1
  
  i=0;
  
  while(i<1080){        //roter housing
    point(rt_cx+st_r+di_r*cos((i)*pi/180)+r*cos((i)*pi/540) , rt_cy+st_r+di_r*sin(i*pi/180)+r*sin((i)*pi/540));
    i++;
  }
}
```

詳しくは
山本ワールド
http://yamatyuu.net/
http://yamatyuu.net/car/new_engin/rota.html
に載っています
３ヶ月でMVPを作る - Week 1

進歩
-スクリーンショット
![Screen Shot 2016-09-04 at 10.38.33 AM.png](https://qiita-image-store.s3.amazonaws.com/0/104858/d35df1ac-93bb-d435-27fc-e4ba00d56788.png)

-ブレインストーミング
![01.jpg](https://qiita-image-store.s3.amazonaws.com/0/104858/c171fa25-f0f0-563e-5b9b-3c4f217de3c0.jpeg)

-ワイヤーフレーム
![Screen Shot 2016-09-04 at 10.38.04 AM.png](https://qiita-image-store.s3.amazonaws.com/0/104858/8ab82e6b-5d9d-a362-cbb5-ea09a36efabf.png)

-Dos&Don'tsのリストアップ
>Do
>-ユーザーログイン機能（facebook, email）
>-テキスト検索機能
>-場所（北海道、東京、京都）による検索機能
>-アクティビティ（考え中）による検索機能
>-near by locationによる機能
>-Ajaxによるガイドへのメッセージ機能
>-カレンダーによる日程選択機能（Jquery?）
>-写真のアップデート機能

>Others
>-analytics toolの導入（google analyticsかmixpanel）
>-支払い機能（paypalかbraintree）
>-地図情報（google map API）
>-ユーザー登録通知メール（deviseかな）
>-データベース（mysql）
>-チャットによるフィードバック機能（zopim）
>-AWS (EC2, RDS, Route53, S3)  < かなりの勉強が必要

>Later
>-ガイド、ツアーへのレビュー機能（コメントと５段階評価）
>-ガイドページを追加する必要あり
>-I wish this wasのフィードバック機能
>-サービスのセキュリティの強化
>-SEOなどのグロースハック

>Don't
>-javascript, Jqueryを使わないこと（リリースしてから考える）
>-websiteのデザインにこだわりすぎない
>-テストを書かない（ユーザーが増えてから）
>-コードの綺麗さにこだわらない（ユーザーが増えてから）
>-circle ci, capistrano, ansible, docker, terraformなどは使わない


やったこと
-ローカルのmysqlを作成・接続
-sequel proでguiで確認
-to doのリストを作成
-完成予想図のフレームワークを作成
-bootstrapのnavbarを追加


学び
-非エンジニアがサービスをリリースするまで
https://www.youtube.com/watch?v=hUwNgxwN_pE﻿
-モチベーションとなった記事
http://qiita.com/Dronetube/items/fa0dba519b39cc8407e2
-Railsセキュリティ対策
http://qiita.com/Jxck_/items/ec8e928f69d099b25764﻿
-Macにインストールするべきアプリたち
http://tech.basicinc.jp/Mac/2014/04/20/mac_app_engineer/﻿
-bootstrap4ではうまくいかなかったので、昔のバージョンを使う
https://github.com/twbs/bootstrap-sass﻿

（全てのの学びはここに👇）
https://plus.google.com/u/1/107221871269602934448

これから
-devise gemを使って認証システムを実装する
-サインアップが完了したらsendgridなどでメールを飛ばす
-AWSのEC2、S3の使い方を理解する、あとセキュリティも
-まずはランディングページを実装する

感想
-一つの機能を実装するにしても、少なくとも２、３回つまづいてしまう。
-その時はstackoverflowやqiitaからのコードの意味を理解してからコードをコピペする。
-やっぱり最初からゴールが見えているとやる気が出てくる。
-あとはゆっくりでも前進している感じを楽しみたい。
さよならSqueel

Railsのクエリを書く上で、Squeelというgemを便利に使っていたのですが、別なものに乗り換えることにしました。

# Squeelとは

ActiveRecordには各種のクエリメソッドがありますが、それだけでは不足する部分もあります。たとえば、「`created_at`が2週間前以前」というような条件をかけようとすると、以下のようになります。

```rb
# その1：文字列で書く
Model.where('created_at < ?', 2.weeks.ago)

# その2：Arelを使う
Model.where(Model.arel_table[:created_at].lt 2.weeks.ago)
```

ただ、これらの方法にはデメリットがあります。

* 文字列で書くと、あとあとの再利用に差し支える場合もありえますし、なにより美しくありません。
* Arelで書くとかなり長くなるし、記法はややこしいし、（Rails 5.0以前では）内部APIなので外から積極的に使っていいものか疑問もあります。

ということで、もっと綺麗に書けるgemとして「Squeel」というのがあります。これはArelをラップして、RubyのDSLとして書けるようにしたものです。

```rb
Model.where { created_at < 2.weeks.ago }
```

# Squeelの問題点
Squeelはたしかに便利なのですが、大きな問題点として「ActiveRecordを大胆にモンキーパッチしている」ということがあります。その結果、ActiveRecordがバージョンアップするたびに、大規模な対応作業が必要となってしまう、という構造上の欠点があります。

そんな事情でRails 5対応が遅れていることもあって、「このまま継続して使うわけにも行かないな」と思えてきました。

# Squeelなしでできること
ということで、ブロックを渡しているActiveRecordメソッドを調べてみたのですが、意外とSqueelなしで書けるものも多かったです。

* 単なる等値比較
* シンプルなサブクエリ
* 範囲比較

また、ORクエリについてはRails 5から加わることを前提に、現状の4.2では[`.where.or`で書けるようにして](http://qiita.com/QUANON/items/d6772127ffc0e7b78759)Squeelから離れることができました。

# BabySqueel
それでも書けないものも多いので（日付の大小比較など）、Squeelの後継として[BabySqueel](https://github.com/rzane/baby_squeel)に乗り換えようと考えています。こちらは、ブロックを取る`where`を`.where.has {}`のように別メソッドとすることで、もともとのActiveRecordメソッドをモンキーパッチするコストを削減しています。

# 教訓
モンキーパッチしたものを維持するには、相応のコストがかかる
案 > Windows > プログラム監視 > batによる解法を教えていただいた | tasklistによるプロセス存命の確認

何かの理由で数時間に1回落ちるプログラムがあるとする。
落ちる条件はまだ見つかっていない。

IDEで落ちる時をとらえるようにすればいいが、別のプロジェクトでそのIDEを使うので、これはできない。

別のWindows上でプログラムを実行しつつ、落ちた時点に通知する仕組みがあれば、落ちるタイミングについての情報だけは集めることができる。

案は以下。

1. プロセスを監視し続ける
2. 落ちた時に指定のgmail(slack)に通知する

プロセス監視のC++実装は未学習。

ソフト自体にログ機能を実装できれば、そちらの方が詳細情報を得られるが、それができない場合に上記は有効だろうか。

## code v0.1 

### 試してみた

@mt08 さんの[コメント](http://qiita.com/7of9/items/41d57b8fb2b16a280915#comment-1b559cc189ab559f1359)を実装してみた。

起動するプログラムは

- Project1.exe
- Project2.exe

両者ともにCloseボタンがあるのみ。

```foo.bat
:LOOP

start /wait Project1.exe
start /wait Project2.exe

GOTO LOOP
```

### 結果

Project1.exeが終了した時点で、Project2が起動する。
GOTO LOOPが有効なので、Project2が終了したらProject1が起動する。

Project2にgmail送信やslack通知のソフトを入れればソフト終了時に通知できる。
Project2側では通知が終われば自動終了する、にすればProject1が再起動するようになる。

この仕組みは将来的にたくさん使いそうです。

@mt08 さんに再度感謝。

### code v0.1b > 終了日時だけ表示

通知の実装までしなくとも、「いつ落ちたか」を表示するには以下で良い。

```foo.bat
:LOOP

start /wait Project1.exe
echo %DATE% %TIME%

GOTO LOOP
```

### code v0.1c > ループしない

PAUSEで止めておく。PAUSEがないとProject1終了直後にコマンドプロンプトが閉じてしまう。

```foo.bat
start /wait Project1.exe
echo %DATE% %TIME%

PAUSE
```
AngularJSまとめ ~ディレクティブ~

ディレクティブについていまいちわかっていなかったのでまとめました。

# ディレクティブとは
AngularJSではビューとしてHTMLをベースとしたテンプレートエンジンを採用しています。
そこでは、標準的なHTML構文だけではなく、AngularJS固有の要素や属性、自分で作成した要素や属性を利用することでHTML構文を拡張できます。
このようなカスタム要素、属性のことをディレクティブ<**directive**>といいます。

例えば、`{{book.title}}`といったangular式や`ng-app`、`ng-repeat`などはAngularJSにデフォルトで組み込まれたディレクティブです(これらはHTML構文として存在しておらず、HTML構文に対する拡張です)。

```lang:sample.js
<input type="text" ng-model="value" />
```

上記の`ng-model`はAngularJS標準のディレクティブです。HTML構文として存在しているわけではありません。AngularJSが独自に`ng-model`を解釈しています。
`ng-model`を使用することによって、入力フィールドとモデルを結びつけることができます。


# ディレクティブの自作
AngularJSにはたくさんの標準ディレクティブがありますが、開発者も自作することができます。

## ディレクティブの種類
ディレクティブにはいくつか種類があります(記述できる場所が複数あります)。
上記で登場した`ng-model`のような「属性」や、`ng-repeat`のような「要素」があります。

例:my-directiveディレクティブを自作したとする。

| 記述できる場所 | 例 |
|:-:|:-:|
| 要素 | \<my-directive>\</my-directive> |
| 属性 | \<div my-directive="test">\</div> |
| クラス | \<div class="my-directive">\</div> |
| コメント | <!--directive:my-directive--> |


## ディレクティブの定義
「こんにちは」と表示させるディレクティブを作成します。

```lang:sample.js
angular.module('myApp', [])
  .directive('myDirective', function(){
    return {
      restrict: 'E',
      template: '<div>こんにちは</div>'
    }
  });
```

```lang:sample.html
<my-directive></my-directive>
```

```lang:ブラウザ
こんにちは
```


以下、詳しく説明します。


**directiveメソッド**

```lang:directiveメソッド
directive(name, factory)

name: ディレクティブの名前
factory: ディレクティブ生成のためのファクトリー関数
```

Moduleオブジェクトのdirectiveメソッドを使用することによってdirectiveを定義することができます。
factoryでは、ディレクティブを定義するオブジェクトを生成し、戻り値として返す必要があります。
ディレクティブを定義するオブジェクトではプロパティを指定できます。
上記のサンプルでは`restrict`と`template`が指定されています。

以下、オブジェクトに指定してるプロパティについてです。

**restrict**
ディレクティブの種類(適用先)を指定します。
今回は「要素」として使用したいため、`E`を指定します。
その他の種類の指定する値です。

| 種類 | 指定する値 |
|:-:|:-:|
| 要素 | E |
| 属性 | A |
| クラス | C |
| コメント | M |

デフォルトは`EA`(要素、属性、どちらでも使える)となります。

**template**
ディレクティブで利用するテンプレートを指定することができます。
templateではテンプレートそのものを文字列として定義することができ、手軽に書くことができます(ハードコーディングということですね)。

**templateURL**
templateURLというプロパティを使用すると、テンプレートとして使用するファイルを指定することができます。
先ほどのsample.jsの`<div>こんにちは</div>`をhello.htmlに書き、`templateURL：hello.html`という指定を行うことが可能です。


他にもたくさんのプロパティが準備されています。
AutolayoutでViewを全画面表示させる。


上下左右のスペースを0にしたのに、なぜか全画面表示にならない・・・


![iPhone_6s_Plus_-_iPhone_6s_Plus___iOS_9_3__13E230_.png](https://qiita-image-store.s3.amazonaws.com/0/99731/50104338-a432-fcfb-efd5-4dc6ae8592d9.png "iPhone_6s_Plus_-_iPhone_6s_Plus___iOS_9_3__13E230_.png")

# Main.storyboardを選択

![1.png](https://qiita-image-store.s3.amazonaws.com/0/99731/dd691e1a-dee9-ed1b-c8cd-2e7301e37380.png "1.png")


# Viewを追加
![2.png](https://qiita-image-store.s3.amazonaws.com/0/99731/86682c0d-ed04-2527-044b-c9d2aada7853.png "2.png")


# 背景色を黒にする。
白だとわかりにくい。

![3.png](https://qiita-image-store.s3.amazonaws.com/0/99731/ef901f5d-9048-4b24-7a28-08419efe4bf6.png "3.png")


# 制約を決める
Constrain to marginsのチェックを外して、上下左右のスペースを0にして
「Add 4 Constraints」ボタンを押す。

![4.png](https://qiita-image-store.s3.amazonaws.com/0/99731/83f35fe3-0bf2-8354-292b-0157b42f8a8e.png "4.png")


# ビルド

![5.png](https://qiita-image-store.s3.amazonaws.com/0/99731/39bf7ca8-2e60-564f-4c2a-ab48d77e50ba.png "5.png")