OmniAICreator/Qiita-1.07M huggingface dataset:
DjangoでHello World

[django始めるまでの手順メモ](http://qiita.com/1-AizawaSatoshi/items/0ab49423794944195155)のつづき

##appsをつくる

```
$ cd プロジェクト名
$ python manage.py startapp app名
```

この段階で、

- プロジェクト名
    - プロジェクト名
    - app名

となっているフォルダができる

##コードを書く

app内で

```views.py
from django.shortcuts import render
from django.http import HttpResponse


def home(request):
    return HttpResponse("Hello, World")
```

プロジェクト内で

```settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app名'←加える
]
```

```urls.py
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'', 'app名.views.home')
]
```

サーバー立ち上げて完成
PHPを用いたシンプルな画像ギャラリー

# 参考にさせて頂いたページ
http://www.lateralcode.com/create-a-simple-picture-gallery-using-php/
PHPはこちらのページを参考にアップデートされたlightbox2に合わせて少し改変しました。またサムネイル画像の生成は省略しています。

http://huddletogether.com/projects/lightbox2/
lightboxの本家です。
# 目的
サーバにアップロードした画像の管理を行うアプリ開発の為の情報収集
# 環境
1. raspberry pi2(jessie)
2. Apache/2.4.10 (Raspbian)
3. PHP 5.6.20-0+deb8u1 + GD Library
4. FireFox 46.0.1 [クライアント]

# 内容
## 0. GDライブラリ
サムネイル画像を生成しないので不要です。ちなみにGDライブラリとはPHP スクリプトからグラフィックを直接操作するためのモ ジュールです。PHPと同様、apt-getを用いてインストールできます。
$ sudo apt-get php5
$ sudo apt-get php5-gd
infophp();を含んだphpスクリプトで確認できます。

```info.php
<?php phpinfo(); ?>
```
GD Supportはenabledになっていることを確認。
## 1. html5で作っていきます

```index.php(その1)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UFT-8">
<title>PHPを用いたシンプルな画像ギャラリー</title>
</head>
<body>

</body>
</html>
```
## 2. JSとCSSの参照を追加します
lightboxがjQueryを使っているとの事なのでそちらも追加。

```index.php(その2)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UFT-8"/>
<link rel="stylesheet" href="./dist/css/lightbox.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<title>PHPを用いたシンプルな画像ギャラリー</title>
</head>
<body>

<script type="text/javascript" src="./dist/js/lightbox.js"></script>
</body>
</html>
```
## 3. Body
ちょっとした説明とPHP関数の呼び出しをBodyに追加します。

```index.php(その3)
    <section id="gallery" class="gallery">
      <h1>アップロード画像一覧</h1>
      クリックすると拡大表示されます<br>
      <hr>
      <?php getPictures(); ?>
    </section>
```
## 4. PHPの記述
$img_dirで定義したディレクトリをOpenし、readdir()で順にエントリ名を取得してはecho()でhtml側に出力して行きます。アンカーにはlightbox2でページ内表示を行う為のアトリビュート"data-lightbox"を追加します。
またサムネイル画像の変わりに"width"属性を使っています。(大量の画像、サイズの大きな画像を扱う場合や回線が遅い場合、参考サイトのようにサムネイルを使用するべきかもしれません。)
サポートするフォーマットの画像ファイル外は、getPictureType()で拡張子を調べてフィルタリングしています。

``` index.php(その4)
<?php
$img_dir = './uploads/';
function getPictures() {
    global $img_dir;
    if ( $handle = opendir($img_dir) ) {
        echo '<div class="images">';
        echo "\n";
        while ( ($file = readdir($handle)) !== false ) {
            $path = $img_dir . $file;
            if ( !is_dir($path) ) {
                $split = explode('.', $file);
                $name = $split[0];
                $ext = $split[count($split) - 1];
                if ( ($type = getPictureType($ext)) == '' ) {
                    continue;
                }
                echo '<a class="image-link" href="'.$path.'" data-lightbox="imgs" ';
                echo 'data-title="'.$name,'">';
                echo '<img class="image" src="'.$path.'" width="240" alt="'.$file.'">';
                echo "</a>\n";
            }
        }
        echo '</div>';
        echo "\n";
    }
}

function getPictureType($ext) {
    if ( preg_match('/jpg|jpeg/i', $ext) ) {
        return 'jpg';
    } else if ( preg_match('/png/i', $ext) ) {
        return 'png';
    } else if ( preg_match('/gif/i', $ext) ) {
        return 'gif';
    } else {
        return '';
    }
}
?>
```

以上
watchify でファイルを監視して差分だけ build する

[こちらの記事](http://qiita.com/tanaka0325/items/43d105d7c341b8431983)で browserify を導入したのですが、
watchfiy というライブラリを使うとファイルを監視して差分だけビルドしてくれるみたいです。

[公式](https://github.com/substack/watchify)によると browserify の watch mode とのことなので、基本的な使い方は browserify と同じ感じだと思われる。

## watchify のインストール

```bash
$ npm install --save-dev watchify
```

## package.json にコマンドを定義

browserify もですが、毎回長いコマンドを打つのもめんどくさいので、
package.jsonにコマンドとして定義しておきます。

```js:package.json
 ...
  "scripts": {
    "build": "browserify src/js/app.js -t babelify -o lib/js/app.js",
    "watch": "watchify src/js/app.js -t babelify -o lib/js/app.js -v",
  },
 ...

```

これで下記コマンドでそれぞれ browserify, watchify によるビルドができるようになります。

```bash
# browserify
$ npm run build
# watchify
$ npm run watch
```

ちなみに watchify の -v オプション（--verbose）はビルドにかかった時間とかの情報を表示してくれるようになります。
VagrantでSSH鍵の設定 - [Authentication failure. Retrying…]の対処策

## 概要

vagrant起動時に、下記のエラーが出る場合の対処方法。

`Authentication failure. Retrying…`

## 原因・対処策
vagrant起動時に生成されるSSH秘密鍵と、OS上の公開鍵がマッチしてないのが原因なので、公開鍵を生成して、OS上にセットしなおす。

## 環境
- Vagrant 1.8.1


## SSH公開鍵を生成

秘密鍵から公開鍵を生成し、対象パッケージのOSの中に設置する。


### 1.秘密鍵を確認

```
$ vagrant ssh-config
  (**snip**)
  IdentityFile xxxx/vagrant_private_key
  (**snip**)
```

  
### 2.公開鍵を生成

IdentityFileに表示された秘密鍵ファイルを使って、公開鍵を生成する

```
$ ssh-keygen -yf xxxx/vagrant_private_key > public_key
$ ls | grep public_key
public_key # 生成されたことを確認
```

### 3.ゲストOSに生成した公開鍵を設定する

ユーザーのホームディレクトリの`~/.ssh/authorized_keys`の中身を、先ほど生成した公開鍵に書き換える。

```
$ vagrant ssh
$ cd ~
```

#### vagrantユーザー以外でログインする場合は、該当ユーザーのホームディレクトリ直下に.sshディレクトリを作る。パーミッションは重要なので、下記の通りにする。

```
$ mkdir .ssh
$ chmod 700 .ssh
$ chmod 600 authorized_keys
```

生成した公開鍵に書き換える。

```
$ vi authorized_keys
$ exit
```


### 4.Vagrantfileに追記

```
$ vi Vagrantfile

# ログイン情報、鍵の設定
config.ssh.guest_port = 22
config.ssh.username = "vagrant" # vagrantユーザーでない場合は指定
config.ssh.host = "127.0.0.1"
config.ssh.private_key_path = "xxxx/vagrant_private_key"
```

### 5.Reload

```
$ vagrant reload
```

以上

[参考]
[Package化したboxを使うときによく出るエラー](http://blog.10rane.com/2015/08/28/errors-out-when-using-to-package-the-box/)
[Vagrant で作った VM にやってはいけない2つのこと](http://qiita.com/megane42/items/1d8ae7444d8c1b10bbd7)


[関連記事]
[Vagrantのインストール、設定手順](http://qiita.com/Esfahan/items/41c4469f28f6011ab33b)
[Vagrantでboxファイル作成](http://qiita.com/Esfahan/items/46da3ce1893a67789b58)
HTML5でのタグのルールとか

備忘録

# br要素
文章にスペースを取りたいがために[br要素](http://www.tohoho-web.com/html/br.htm)を使用するのはNG。
代わりに、CSSの「margin」や「padding」プロパティを使う。
br要素はあくまで文章の改行に使うもの。

同様の理由で、`&nbsp;`を使うのもNG。

# label要素
文言を出力するために[label要素](http://www.tohoho-web.com/html/label.htm)を使用するのはNG。
label要素はフォーム内でフォームの部品と見出しを関連付けるために用いる。
代わりに、[span要素](http://www.tohoho-web.com/html/span.htm)とか使う。

# cavas要素
[vanvas要素](http://www.tohoho-web.com/html/canvas.htm)の大きさを変更する際に
CSSの「width」や「height」プロパティを使わないこと。
大きさの変更は変更されるが、canvasのデフォルト値である。「300,150」から相対的に引き延ばされる。
例)幅、高さを300にCSSで300に指定すると、高さが2倍だけみょーんってなる。なぜかはわからない

##対応策1：canvas要素に直接指定する。
```html:canvas-test1.html
   <canvas id="c1" width="300" height="300"></canvas>
```
[参考にしたサイト](http://mitublog.blog.eonet.jp/default/2010/08/html5-15b1.html)

上記でうまくいったので、背景色を変えようとCSSで背景色を変えたところ…

```html:canvas-test2.html
   <canvas id="c1" width="300" height="300" class="canvas.css"></canvas>
```
なぜかわからないが、canvasの大きさがまたうまく表示されなくなる。

##対応策2：javascriptを使ってcanvas要素の大きさを変更する。
[canvas要素](http://www.tohoho-web.com/html/canvas.htm)を[div要素](http://www.tohoho-web.com/html/div.htm)でラッパーしてその大きさに変更する。

```html:canvas-test3.html
<div class="wrapper">
   <canvas id="c1"></canvas>
</div>
```
```css:canvas.css
.wrapper{
  width: 300px;
  height: 300px;
}
```
```js:canvas.js
$(document).ready(function() {
    var w = $('.wrapper').width();
    var h = $('.wrapper').height();
    $('#c1').attr('width', w);
    $('#c1').attr('height', h);
});
```
[参考にしたサイト](http://qiita.com/ShinyaOkazawa/items/9e662bf2121548f79d5f)

ラッパーの方のdiv要素の背景色を変更することで、対応策1でやりたかったcanvas要素の背景色変更を疑似的に達成できた。

・気になったこと
javascriptのattrで大きさを変更した際に、canvasの要素のプロパティが初期化されているみたい…

```js:canvas.js
var canvas = document.getElementById('c1');
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(255,0,0,0.25)';
```
と指定していたのだが、attrを実行した過程で、fillStayleが初期値の黒に戻ってしまう。
例に漏れずなぜかはわからない。
propでも駄目でした。
Consul Web UIで画面が表示されない時の対処法

# tl:dr
「net::ERR_CONTENT_LENGTH_MISMATCH」 が出たら `proxy_max_temp_file_size 0` を試してみよう

# 概要
Consulの [Web UI](https://www.consul.io/intro/getting-started/ui.html) をnginxでリバースプロキシしようとしたらなぜか `/ui/static/application.min.js` で 「Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH」 とエラーが出て真っ白な状態に :scream_cat: [^example]

[^example]: ドメインが consul.example.com なのはローカルPCの /etc/hosts で直接IP指定しているからです

![image](https://qiita-image-store.s3.amazonaws.com/0/8059/c7b52bbe-69b2-b327-9ebd-7eb043c45f09.png)

ローカルだと再現しなかったのでおそらくnginx側の設定の問題だろうと推測。

# 設定ファイル
```/etc/nginx/sites-enabled/consul.conf
upstream consul {
  server 127.0.0.1:8500;
}

server {
  listen  80;
  server_name consul.example.com;
  root /var/www/consul;

  location / {
    proxy_read_timeout 60;
    proxy_connect_timeout 60;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://consul;
  }
}
```

# エラー内容
```/var/log/nginx/error.log
2016/05/31 15:19:00 [crit] 42702#0: *15 open() "/var/lib/nginx/tmp/proxy/3/00/0000000003" failed (13: Permission denied) while reading upstream, client: xxx.xxx.x.xxx, server: consul.example.com, request: "GET /ui/static/application.min.js HTTP/1.1", upstream: "http://127.0.0.1:8500/ui/static/application.min.js", host: "consul.example.com"
```

`/var/lib/nginx/tmp/` 配下をパーミッション777にしたり、ディレクトリを作り直してnginxを再起動しても同様のエラーが出て解決せず。。。

# 解決方法
書き込みできないのなら一時ファイルを書き出さない設定はないかと思ってたら [proxy_max_temp_file_size](http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_max_temp_file_size) に行きつきました。 

最終的には `proxy_max_temp_file_size 0;` をつけることでWeb UIを表示できるようになりました :smiley: 

![image](https://qiita-image-store.s3.amazonaws.com/0/8059/c99fadae-0df3-fba8-3c8e-4bc61305ae70.png)

# 最終的な設定ファイル
```/etc/nginx/sites-enabled/consul.conf
server {
  listen  80;
  server_name consul.example.com;
  root /var/www/consul;

  location / {
    proxy_read_timeout 60;
    proxy_connect_timeout 60;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://consul;
    proxy_max_temp_file_size 0; # <- 【これを追加】
  }
}
```
CodeCommitをWindowsでGUI操作する手順(SourceTree使用)

この文章はCodeCommitをWindowsからGUIで操作する際の環境構築手順をまとめたものです。
大まかな実施事項は以下のとおりです。

* Gitのインストール
* 資格情報の設定
* CodeCommitへの接続とレポジトリのクローン
* SourceTreeのインストール

## Gitのインストール
1．以下のサイトにアクセスし、インストールファイルをダウンロードし実行する。
https://git-for-windows.github.io/

2．以下の２箇所以外はすべてデフォルトで設定していく。

*  ｢Adjusting your PATH environment｣では｢Use Git from the Windows Command Prompt｣を選択する。

* ｢Configuring extra options｣では｢Enable Git Credential Manager｣のチェックを**外す。**

## 資格情報の設定
1．以下のソフトをインストールする。既にインストール済みの場合はそちらを利用してください。

* putty.exe
* plink.exe
* puttygen.exe
* pageant.exe

2．システム環境変数にputtyまでのパスを通す。(例：c:\Program Files (x86)\PuTTY)

3．以下のコマンドを実行し、plink.exeまでのパスを通す。(例：C:\Program Files (x86)\PuTTY\plink.exe)

```bat
setx Git_SSH "plink.exeまでのパス"
```

4．SSHキーを作成する。
　1. puttygen.exeを起動する。
　2. ｢Parameters｣で｢SSH-2 RSA｣を選択する。
　3. ｢Number of bits in a generated key｣に｢2048｣と入力する。
　4. ｢Generate｣を押した後、ウィンドウ内でマウスを動かす(ステータスバーが延びきるまで)。
　5. キー作成後、 ｢Key passphrase｣と｢Confirm passphrase」の欄にお好きなパスワードを入力する。
　6. ｢Save private key｣を押してPrivateKeyを保存する。
　7. ｢Public key for pasting into Open SSH authorized_keys file｣に記載された内容を
   　　全選択してテキストエディタに貼り付け、PublicKeyを保存する。
　8. pagent.exeを起動し、タスクトレイに表示されるアイコンを左クリックし｢Add Key｣を選択する。
　9. 保存したPrivateKeyを選択して｢開く｣を押す。

5.保存したPublicKeyをIAMユーザに登録する。
　1. AWSコンソールにアクセス。
　2. IAMのページに移動して、自分のユーザ名を選択。
　3. ｢認証情報｣タブに移動して項目：｢AWS CodeCommitのSSHキー｣ の｢SSH公開キーのアップロード｣を押す。
　4. PublicKeyの内容を全選択して貼り付けて、｢SSH公開キーのアップロード｣を押す。
　5. 表示されている｢SSHキーID｣をメモる。

6.デスクトップに以下の内容でファイルを作成する。拡張子は｢.reg｣とすること。作成後、実行する。

```bat
Windows Registry Editor Version 5.00
  [HKEY_CURRENT_USER\Software\SimonTatham\PuTTY\SshHostKeys]
  "rsa2@22:git-codecommit.us-east-1.amazonaws.com"="AAAAB3NzaC1yc2EAAAADAQABAAABAQCdut7aOM5Zh16OJ+GOP75O7x5oyHKAiA1ieuySetj/hAq4VrAuZV5R2TypZJcKBaripOtTc/Sr0FOU4YvxUla40PPH8N1lbDp6Pnc4BexKsrt2kz++TqIKx5FHmUQV3mit16kxRwHey3dv030+qXBDo3WPQjm2+JLoq0XcadpnCAMCd3ChaBnDRM+51GZbuEFilpZsxUchUzl0gseC+shYOBd7TqxTlIhj/56d/YF1kq7RMZYrwBnyYdVhpLeUJCeYjyx/O6FPSezNTLiinz5jjioWZATgn+G8feL/hIsk8g+7JoIcb2muUlymdxs+8l2lS+8MXqT0q9ohT+Knhb2j"
```

7.コマンドラインからputty.exeを起動し、PuTTYの設定を行う。
　1. ウィンドウの左側に表示されているカテゴリーをConnection→ Dataと辿っていき、｢Auto-login username｣に先ほどメモしたSSHキーIDを入力する。
　2. カテゴリーをConnection→SSH→Authと辿っていき、｢Authentication parameters｣の｢Browse｣を押す。表示されたウィンドウではPrivateKeyを選択し｢開く｣を押す。
　3. カテゴリーのSessionを選択し、｢Host Name｣と｢Saved Sessions｣に｢type git-codecommit.us-east-1.amazonaws.com｣と入力する。入力後、｢Save｣を押す。

8.コマンドラインを開き、以下のコマンドを実行して接続を確認する。｢Your-SSH-Key-ID｣には先ほどメモしたSSHキーIDを入力する。

```bat
%Git_SSH% -ssh (メモしたSSHキーID)@git-codecommit.us-east-1.amazonaws.com
```

## CodeCommitへの接続とレポジトリのクローン
1.AWSコンソールにアクセスし、CodeCommitを開く。

2.レポジトリを選択し、｢Clone URL｣の｢SSH｣を押して表示されたURLをコピーする。

3.コマンドプロンプトを開き以下のコマンドを実行してレポジトリをクローンする。

```bat
git clone ssh://(メモしたSSHキーID)@git-codecommit.us-east-1.amazonaws.com/v1/repos/(レポジトリ名) (レポジトリのコピー先のパス)
```

## SourceTreeのインストール
1.以下のサイトにアクセスし、インストールファイルをダウンロードし実行する。
https://ja.atlassian.com/software/sourcetree

2.利用規約同意画面では利用規約に同意する。

3.アカウント登録画面では新規アカウント作成を選択する。
(無料なので課金されたりはしません。)

4.GitHubやBitBucketとの連携の設定画面ではスキップを選択する。

5.｢Gitが見つかりませんでした｣の画面が表示されたら、Gitを使いたくないを選択する。
(既にgitをインストール済みなため)

## おしまい
「この証明書の発行者は無効です」と表示された時

# 何が起きたか？
 * 以前KeyChainに入れたApple Worldwide Developer Relationsの中間証明書が2/15に期限切れになりました。

# 対応方法
 * KeyChainから古いApple Worldwide Developer Relationsを消します
    * ツールバーの「表示」 → 「有効期限の切れた証明書を表示」
    * 「ログイン」の項目から削除
    * <Font color="red">「システム」の項目から削除　←　重要</font>
 * 新しいApple Worldwide Developer Relationsを入れる
    * https://developer.apple.com/certificationauthority/AppleWWDRCA.cer
CreateJSでSpriteSheetアニメーションに個別でフレームレートを設定したいとき

[CreateJS](http://www.createjs.com/)では、[Adobe Animate CC](http://www.adobe.com/jp/products/animate.html)などで書き出したSpriteSheetをコマアニメーションのように表現できます。アニメーションの開発をしていると、全体のフレームレートは60fpsにしたいけど、個別のアニメーションは30fpsくらいに抑えたいということがあります。**コンテンツ全体のfpsと個別のアニメーションのfpsを分ける方法を備忘録として残しておきます。**

# 全体のフレームレートの設定
コンテンツを適度にヌルヌル動かすために60fpsを全体のフレームレートとして設定します。

```js
createjs.Ticker.setFPS(60);
```

# 個別のアニメーションのフレームレートを設定
`Sprite`クラスの`framerate`パラメーターにフレームレートを数値で設定します。ここでは30fpsとしました。

```js
var animation1 = new Animation1();
animation1.framerate = 30;
```

# 毎フレームで描画【ここが肝】
CreateJSで処理した内容をcanvasに描画するためには、毎フレーム`stage.update()`を実行します。ここで肝なのが、**`update`メソッドに`event`オブジェクトを渡すとうことです。**これがないと、個別のアニメーションのフレームレートは反映されず、全体のフレームレートで再生されます。

```js
createjs.Ticker.on("tick", handleTick);
function handleTick(event) {
  stage.update(event);
}
```
DNS環境構築 (Centos6.x)

# DNSサーバ構築
```
yum install bind bind-utils
vi /etc/named.conf
```
以下のように変更(変更点のみ記載)
```
Options{
   allow-query   { 127.0.0.1; 192.168.0.0/24};
   forwarders {
        'DNSクエリを送りたいDNSサーバを記載'
   };
};

zone "ファイル名(ゾーン名)" IN {
   type master;
   file "同上";
   notify yes;
};
MongoDBにpythonのdatetimeオブジェクトを保存した時の挙動

気になったので実験メモ。


```py
from pymongo import MongoClient
from datetime import datetime
client = MongoClient()
col = client.db.collection
item = col.insert_one({ 'date': datetime.now() })
```

[adminMongo](https://github.com/mrvautin/adminMongo)で見たらこんな感じに。
dateキーに挿入されている日付はISODateオブジェクトです。

<img width="418" alt="スクリーンショット 2016-05-31 15.08.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/62541/45347f1d-5cc1-86ab-8ab0-aa3609a66507.png">

ちなみにpythonでこのデータを読み込むと

```py
items = list(col.find())
items
#[{'_id': ObjectId('574d28258cc7157fb9c98b40'),
#  'date': datetime.datetime(2016, 5, 31, 14, 59, 1, 572000)},
# {'_id': ObjectId('574d28e88cc7157fb9c98b41'),
#  'date': datetime.datetime(2016, 5, 31, 15, 2, 16, 862000)}]
```

という感じにdatetimeオブジェクトで返ってきます。
AWS EC2インスタンスのタグ名取得

bashでmeta-dataから一発で取る方法もあるようだけど、
rubyコード内に長いコマンド書くのもなあ･･･というね。

というわけでRails 4.1.5から。
aws-sdk要ります。
なお、わざとまだるっこしい書き方をしているので突っ込みは勘弁
エラー処理なども全部省略

<pre>
def yeah
  require 'aws-sdk'
  me = `wget -q -O - http://169.254.169.254/latest/meta-data/instance-id`
  cli = Aws::EC2::Client.new(region: 'しかるべきレギオンを入れる')
  aws_resources = Aws::EC2::Resource.new(cli)
  resource = aws_resources.instances.find {|instance| instance.id == me }
  resrouce.tags
end
</pre>

これでtagの一覧のKVが取れるので欲しいkeyのvalueをﾌﾟﾋｰ
なおタグ名はNameってkeyです

sdkのバージョンによって色々変わりそうなので動かなかったらごめんね
【Eagle】複数の基板を安く発注するためのデータ作成法

## 概要

P板.comさん等で、基板を安く発注するための作業手順です。
なお開発環境は以下を想定しますが、その他の環境でも大丈夫かと思います。

- Windows 8.1
- Eagle 6.5.0


## 基板発注手順
### 1. デザインルールチェック(DRC)の実行
DRCには、P板.comより配布されている**pban_5mil-l2.dru**を使用します。

### 2. パネライズ
複数枚の基板を1枚の大きな基板に割り付けることで、
多くの基板製造業者で製造価格を抑えることが可能です。

Eagleでは、部品をコピーした際**tNames**, **bNames**が自動でインクリメントされてしまいます。
これを防ぐ方法として、**tNames**, **bNames**を別レイヤーにコピーし、
コピー先レイヤーを部品番号レイヤーとして使用することが考えられます。

Tools -> Panelize... とクリックし、Executeボタンをクリックすることで以上の処理を行うことができます。

セクション3を参考に必要なレイヤーのみ表示した状態で元基板をコピーした後、
新規に`*.brd`を作成し貼り付けていきます。
(この際、**tOrigin**, **bOrigin**レイヤーもライブラリ類のコピーのために必要となります。)

### 3. ガーバーデータの出力
**gerb274x[4L].cam**を使用し、下表に従ってレイヤーを書き出します。

- `*.cmp` (部品面パターン)
    - Top
    - Pads
    - Vias
- `*.sol` (半田面パターン)
    - Bottom
    - Pads
    - Vias
- `*.plc` (部品面シルクデータ)
    - tPlace
    - _tNames (パネライズ済み部品番号レイヤー)
- `*.pls` (半田面シルクデータ)
    - bPlace
    - _bNames (パネライズ済み部品番号レイヤー)
- `*.stc` (部品面レジストデータ)
    - Pads
    - tStop
- `*.sts` (半田面レジストデータ)
    - Pads
    - bStop
- `*.out` (外形線データ)
    - Dimension (外形線は0.2mm, Vカットは0.5mmの線幅で作成します。)

### 4. ドリルデータの出力
**excellon.cam**を使用し、下表に従ってレイヤーを書き出します。

- `*.drd`, `*.dri` (ドリルデータ, ドリルリスト)
    - Drills
    - Holes

### 5. ガーバーデータの確認
しかるべき面データが書き出されているか、ガーバービューワで確認します。
(おすすめのガーバービューワは[gerbv](https://osdn.jp/projects/sfnet_gerbv/)です。)

また、以下も考慮すべきポイントです。

- Dimensionレイヤーに、線幅0.0mmの外形線が含まれていないか。(ルーター誤作動を防ぐため。)
- シルク同士，およびシルクとレジスト開口部が重なっていないか。(部品実装業者の混乱を防ぐため。)
- Vカット線とスルーホールの距離は板厚分ほど離れているか。(割れを防ぐため。)
python > 3つの小数を".3f, .3f, .3f"形式で表示 / [-1:1]の範囲の座標値を3つ取得

3つの乱数を取得して、C言語でいうところの"%.3f, %.3f, %.3f"のような形式で表示を試みた。

http://ideone.com/WGaHJR

```py
import numpy as np
from numpy.random import *

pos = tuple( rand(3) )

frm = '%.3f, %.3f, %.3f'
print pos

print frm % tuple(pos)
```

```txt:結果
(0.076222111784701618, 0.76602747950227201, 0.13864621611927097)
0.076, 0.766, 0.139
```

参考 http://stackoverflow.com/questions/7568627/using-python-string-formatting-with-lists


## v0.2

座標値を[-1,1]の範囲に変更。

http://ideone.com/PZPfxe

```py
import numpy as np
from numpy.random import *
 
 
for loop in range(15):
	pos = tuple( rand(3) * 2 - 1 )
 
	frm = '[ %.3f, %.3f, %.3f ],'
	# print pos
 
	print frm % tuple(pos)
```

(追記)
上記よりも @shiracamus さんのコメントの方が良いです。
Chrome Custom Tabsで使うアイコンにVectorDrawable(SVG)が使えない問題を解決する

この記事はAndroidアプリ開発者（Java)向けの記事です。

## Chrome Custom Tabs(以下CCT)とSVG準拠のdrawable
Google I/O 2015の時に発表された[CCT](https://developer.chrome.com/multidevice/android/customtabs)。
Androidのアプリを普段開発されているかたは低速なWebViewの代替策としてなどでCCTを使ってみた方も居られるのではないかと思います。

次に2014年秋あたりから、Android5.0以上でSVG準拠のdrawableを使った画像を使えるようになり、ピクセルの密度に対応した画像を作らないで、リソース一つで画像の一部を表現できるようになりました。


そして、たまたまちょっと前にCCTを使う時に、BottomBarにアイコンが必要なので
SVG準拠のdrawableファイルを使おうとしたら、10分ほどはまったので共有します。

## 失敗
```java
        Bitmap shareDrawable = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_share_white_24dp);
        CustomTabsIntent customTabsIntent =  new CustomTabsIntent.Builder()
                .setShowTitle(true)
                .setToolbarColor(ContextCompat.getColor(context, colorId))
                .addToolbarItem(1, shareDrawable , "share url.", sharePendingIntent)
                .build();
        customTabsIntent .launchUrl(getActivity(), uri);
```

これだとCCTは開きますがBottom Barが表示されないです。

## 原因

理由は[CCTではVectorDrawableをつかったBitmapはサポートされいない](http://stackoverflow.com/questions/36183376/does-chrome-custom-tab-support-vectordrawable)のが原因で、BitmapFactory.decodeResourceをするだけではだめなようです。


なので、
[android - Getting Bitmap from vector drawable - Stack Overflow](http://stackoverflow.com/questions/33696488/getting-bitmap-from-vector-drawable)
[VectorDrawableをBitmapに変換する](http://qiita.com/konifar/items/aaff934edbf44e39b04a)
を参考にして、VectorDrawableをcanvasに投影(drawBitmap)する時につかったBitmapの参照を使ってみることにしました。

## 対策

以下のコードを上記を参考に作りました。

```java:BitmapUtil.java
public class BitmapUtil {
    public static Bitmap convertBitmapFromVector(VectorDrawable vectorDrawable) {
        Bitmap bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(), vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        vectorDrawable.draw(canvas);
        return bitmap;
    }

    public static VectorDrawable getVectorDrawable(Context context, @DrawableRes int drawableId) {
        return (VectorDrawable) ResourcesCompat.getDrawable(context.getResources(), drawableId, null);
    }
}
```

それを失敗したコードに適用します。

```java
        VectorDrawable shareDrawable = BitmapUtil.getVectorDrawable(context,  R.drawable.ic_share_white_24dp);
        Bitmap shareBitmap = BitmapUtil.convertBitmapFromVector(shareDrawable);
       
        CustomTabsIntent customTabsIntent =  new CustomTabsIntent.Builder()
                .setShowTitle(true)
                .setToolbarColor(ContextCompat.getColor(context, colorId))
                .addToolbarItem(1, shareBitmap, "share url.", sharePendingIntent)
                .build();
        customTabsIntent .launchUrl(getActivity(), uri);
```

これで解決します。
Arduino M0 Pro でマルチタスクプログラミング : 基本API

# はじめに
[TOPPERS/R2CA](http://dev.toppers.jp/trac_user/contrib/wiki/rtos_arduino)は，[Arduino M0 Pro](http://www.arduino.org/products/boards/4-arduino-boards/arduino-m0-pro) (以下，M0)上で，Arduinoライブラリ+[TOPPERS/ASPカーネル](http://www.toppers.jp/asp-kernel.html)ベースのマルチタスクプログラミング環境を提供するパッケージです．

この記事では，[優先度・スケジューリング](http://qiita.com/exshonda/items/e4b09f299f647a2b7018)で紹介したAPIの詳細について説明します．開発環境のインストールやビルド＆実行方法は[こちら](http://qiita.com/exshonda/items/093870ecdcda6c79678c)の記事を見て下さい．

# 使用可能なAPIとリファレンス
R2CAで使用可能なAPIはTOPPERS/ASPカーネルで使用可能なAPIです．API仕様はOSの仕様書にまとめられています．

- [TOPPERS新世代カーネル統合仕様書](https://www.toppers.jp/docs/tech/ngki_spec-171.pdf)


事例を用いてAPIの使い方等を勉強したい方は，以下のテキストが無償でダウンロード可能なので，参考にして下さい．

- [組込みソフトウェア開発技術の基礎](http://www.nces.is.nagoya-u.ac.jp/NEP/materials/)

## ID

ITRON仕様ではタスクに対するAPIはタスクIDを指定して発行します．R2CAではすでに各タスクのIDは定まっており次の通りです．

|タスク|タスク名|
|:-----:|:---:|
|メインタスク|R2CA_MAINTASK|
|タスク1 |R2CA_TASK1|
|タスク2 |R2CA_TASK2|
|タスク3 |R2CA_TASK3|
|タスク4 |R2CA_TASK4|
|タスク5 |R2CA_TASK5|

セマフォ等のオブジェクトは後述の静的APIで指定したマクロ名により指定します．

## 静的API

オブジェクトの生成は静的APIと呼ばれる記法により，r2ca_app.cfg に記載します．例えばセマフォを1個生成する場合は次のように記述します．

```r2ca_app.cfg
CRE_SEM(SEM1, {TA_NULL, 1, 1});
```

SEM1が生成したセマフォの名前でAPIではこの名前(実際にはマクロで数値となっている)を指定してAPIを発行します．

TA_NULLはセマフォの属性，次の1はセマフォの初期資源数，最後の1はセマフォの最大資源数です．

静的APIはビルド時にコンフィギュレータと呼ばれるツールにより処理

## 割込みハンドラからのAPI呼び出し

幾つかのAPIは割込みハンドラから呼び出し可能です．呼び出し可能なAPIについては，API名の頭に'i'が付いています．

# APIの説明 

代表的なAPIについて説明します．

## 割込み禁止許可

割込みを禁止・許可します．割込みを禁止した状態では他のAPIを呼び出せないので注意して下さい．

```
API
 dis_int() : 割込みの禁止
 ena_int() : 割込みの許可
```

## ディスパッチ禁止許可

ディスパッチを禁止・許可します．割込み禁止許可と異なり割込みは禁止しません．タスク間で排他制御する場合に使用します．

```
API
 dis_dsp() : 割込みの禁止
 ena_dsp() : 割込みの許可
```

## 起床待ち

タスクを起床待ちするAPIとタスクを起床をするAPIです．タスクのみが呼び出すことが可能です．slp_tsk()を呼び出すると起床待ち状態となり，wup_tsk()により起床されるまで実行されません．実行されている状態のタスクに対してwup_tsk()を実行すると起床要求がキューイングされます．この状態でslp_tsk()を呼んでも起床待ち状態になりません．

```
API
 slp_tsk()  : 起床待ち
 wup_tsk()  : タスクの起床
 iwup_tsk() : タスクの起床(割込みハンドラ)
```

## セマフォ

タスク間で排他制御を実現するためのオブジェクトです．数に制限がある資源を使用する際にwai_sem()を呼び出して資源を取得します．資源がない場合は，セマフォ取得待ちになります．資源を使用した後はsig_sem()を呼び出して資源を返却します．返却時にセマフォ待ちのタスクがいれば起床させます．

セマフォの初期値と最大値はセマフォ生成時に静的APIのパラメータとして宣言します．初期値と最大値をシステムに合わせて正しく設定しないと正しく排他制御できないので注意して設定する必要があります．

```
API
 sig_sem(SEMID) : セマフォ取得
 wai_sem(SEMID) : セマフォ返却
```

```
静的API
 仕様)
  CRE_SEM(ID semid, { ATR sematr, uint_t isemcnt, uint_t maxsem })
 例)ID : SEM1, 属性 : TA_NULL, 初期値 : 1，最大値 1
  CRE_SEM(SEM1, {TA_NULL, 1, 1});
```

## データキュー

32ビットのデータをやりとりするためのオブジェクト．いわゆるFIFOです．送信は割込みハンドラからも可能です．送信時は，バッファに空きがあればデータを格納してリターンします．空きがなければ待ち状態になります．受信時はバッファにデータがあれば取得してリターンします．バッファにデータが無ければ待ち状態となります．それぞれ反対に待ち状態のタスクがいれば起床させます．

バッファの個数は静的APIで設定します．

```
API
 snd_dtq(DTQID, data) : データキューへの送信
 ipsnd_dtq(DTQID, data) : データキューへの送信(割込みハンドラ)
 rcv_dtq(DTQID, *data) : データキューからの受信
```

```
静的API
 仕様)
   CRE_DTQ(ID dtqid, { ATR dtqatr, uint_t dtqcnt, void *dtqmb })
 例)ID : DTQ1, 属性 : TA_NULL, バッファ数 4
  CRE_DTQ(DTQ1, {TA_NULL, 4, NULL});
```

# おわりに

代表的なAPIの使い方について説明しました．次回はこれらのサンプルを作ってみたいと思います．
Chart.jsでLegendをチャートの横に配置する方法

Chart.jsを使うと簡単にチャートが作成できて嬉しくなる。
サイト内にチャートを配置したいみたいな案件があったので、Chart.jsを使おうと思ったのだが、困ったことがでてきた。

<img width="162" alt="SS_ 2016-05-31 14.30.35.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/32100/19afac23-5264-efc4-7b49-fa5e064b7766.jpeg">

チャートの下に「男性」とか「女性」とかある。(Legendと呼ぶらしい)
このLegendのポジションを操るオプションがあるのだが、まさかの`top`と`bottom`しか選択できず`left`や`right`には配置できないらしい。

```
公式ドキュメント 「Position of the legend. Options are 'top' or 'bottom'」
ぼく 「ほえー...」
```

さらにChart.jsはCanvasを使用して作られているためDOMを弄くり倒すことも難しい。
辛い。

## 解決方法

```
myChart.generateLegend();
```

すれば

```
<ul class="0-legend"><li><span style="background-color:rgba(54, 162, 235, 0.2)"></span>男性</li><li><span style="background-color:rgba(255, 99, 132, 0.2)"></span>女性</li></ul>
```
のような、便利なHTMLが吐き出されるからそれをinnerHTMLだとかでDOMに突っ込めばOKっぽい。めでたい。
django-filter: order_by に複数指定可能にする


- [alex/django-filter](https://github.com/alex/django-filter) ([doc](https://django-filter.readthedocs.org/en/latest/))
- ソート条件を複数指定できるようにする

~~~
/events?o=opening_on&o=-title
/events?o=-presenter&o=-opening_on&o=title
~~~

## 順序フィルター: OrderingFilter

~~~py
class EventFilter(django_filters.FilterSet):
    # https://github.com/carltongibson/django-filter/blob/develop/docs/migration.txt
    o = django_filters.OrderingFilter(
        choices=(
            ('-opening_on', _('Opening On Desc')),
            ('opening_on', _('Openning On Asc')),
            ('-title', _('Title Desc')),
            ('title', _('Title Asc')),
            ('presenter', _('Presenter Asc')),
            ('-presenter', _('Presenter Desc')), ))

    class Meta:
        model = models.Event
~~~          

## テンプレートタグ: ordering

- `query` でクエリ文字列を返す
- `direction` に `asc` / `desc` を返す

~~~py
@register.assignment_tag(takes_context=True)                                        
def ordering(context, field, key='o'):                                              
    qdict = context.get('request').GET.copy()                                              
    rfield = '-' + field                                                            
    q = qdict.getlist(key)                                                            
    if rfield in q:                                                                 
        q.remove(rfield)                                                            
        direction = "asc"                                                           
    else:                                                                           
        if field in q:                                                              
            q.remove(field)                                                         
        field = rfield                                                              
        direction = "desc"                                                          

    q = [field] + q                                                                 
    qdict.setlist(key, q)                                                             
    return dict(query=qdict.urlencode(), direction=direction)   
~~~  

テンプレート:

~~~html
{% load mytags %}

<thead>
  <tr>
    <th>
      {% ordering 'opening_on' as opening_on_order %}
      <a href="?{{ opening_on_order.query }}">
        <span class="sort-{{ opening_on_order.direction }}">{% trans 'Opening On' %}</span></a></th>

    <th>
      {% ordering 'title' as title_order %}
      <a href="?{{ title_order.query }}">
        <span class="sort-{{ title_order.direction }}">{% trans 'Event Title' %}</span></a></th>
  </tr>
</thead>

~~~

スタイル:

~~~html
<style>
.sort-asc:after{content: "↓"}
.sort-desc:after{content: "↑"}
</style>
~~~
2. Node.jsでECHONET Lite空気清浄機をコントロールしてみよう的な話

前回はechonet-liteモジュールのサンプルをそのまま動かしてみて，ネットワーク内の機器を発見してみた．

前回
「[1. Node.jsのJavaScriptでECHONET Liteっていうネットワーク家電をコントロールしてみよう的な話](http://qiita.com/Hiroshi-Sugimura/items/28bce5212c3cff30a42b)」

今回は実際に空気清浄機を動かしてみたいとおもうのです．


# 前提条件

- Windows
- Node.jsはインストール済み
- 記事時点でのバージョンは，
    - node v4.4.5
    - npm v 2.15.5
    - echonet-lite v0.0.12

- 使用する空気清浄機は，
    - [Sharp KI-EX100](http://www.sharp.co.jp/kuusei/products/kiex100.html)
    - [家電ワイヤレスアダプター HW-A01](http://www.sharp.co.jp/kuusei/products/kiex100-feature.html)
    - ECHONET Liteモード設定のために，スマートフォンとスマートフォン専用アプリ「ココロボ～ド」

[エコーネットコンソーシアム 認証機器紹介のページ参照](https://echonet.jp/introduce/gz-000152/)


# 空気清浄機の設定
Sharp KI-EX100はECHONET Lite対応していますね．
Webサイトにもマークがついています．

しかし，この機器は最初シャープクラウドモードになっているので，ECHONET Liteモードに設定を変更する必要があります．

シャープ公式WebサイトのHW-A01のECHONETLite機能について解説されているページをそのまま参照して設定しましょう．

[HW-A01のECHONETLite機能について]
(http://www.sharp.co.jp/support/hms/doc/econetlite01.html)

1. 無線LANボタンを押しながら電源スイッチを入にしてください。電源ランプと無線LANランプが点灯します。
2. そのまま無線LANボタンを離さず3秒待つと、無線LANランプが点滅します。
3. ボタンから手を離してください。以下のどちらかの状態になれば、「ECHONETLiteモード」に設定されています。


# Node.jsでのECHONET Liteプログラミング

今回もNPMのechonet-liteモジュールを使っていきます．

[echonet-liteモジュール](https://www.npmjs.com/package/echonet-lite)

Node.jsで簡単なECHONET Lite通信プログラムを作ってみましょう．
まず，新しいフォルダを作ってそのフォルダに移動しておきます．
ここでは下記のフォルダを作業フォルダとして進めます．

     C:\SimpleEL2

echonet-liteというモジュールを利用しますが，このモジュールはインターネットでインストールする必要があります．
プログラムのフォルダにインストールするので，新しいプログラムを作るたびにインストールが必要です．
下記コマンドでインストールしましょう．

    C:\SimpleEL> npm install echonet-lite


下記のようなプログラムを「SimpleEL2.js」として作成してみます．
文字コードはUTF-8Nで改行コードCrLfが僕は好きです．


```JavaScript:SimpleEL2.rb
//////////////////////////////////////////////////////////////////////
// EL最小構成
var EL = require('echonet-lite');

var objList = ['05ff01'];

var elsocket = EL.initialize( objList, function( rinfo, els ) {
	console.log('----');
	console.log( 'Found facilities are ' );
	console.dir( EL.facilities );
});


//////////////////////////////////////////////////////////////////////
// 全て立ち上がったのでINFでコントローラONの宣言
EL.sendOPC1( '224.0.23.0', [0x05,0xff,0x01], [0x0e,0xf0,0x01], 0x73, 0x80, [0x30]);

// ネットワーク状況の検索と把握
EL.search();

// 空気清浄機操作をONにする
EL.sendOPC1( '192.168.2.150', [0x05,0xff,0x01], [0x01,0x35,0x01], 0x61, 0x80, [0x30]);
```



このスクリプトを動かすために下記のコマンドをコマンドプロンプトで実行します．

    C:\SimpleEL> node SimpleEL.js

いかがでしょうか，ネットワーク内にあるECHONET Lite機器の状態を取得して出力できましたか？
もしECHONET Lite機器を持っていないのでしたら，次節のエアコンエミュレータを作成して別のパソコンで実行しておくとテストできます．


# 実行してみよー

こんな感じです．


![EL空気清浄機.MTS.gif](https://qiita-image-store.s3.amazonaws.com/0/120396/160ea928-a96a-9e85-a8ee-b72ad8638ae4.gif)


# ほそくー

今回は空気清浄機192.168.2.150のIPを持っていて，0ef001の中にいくつかプロパティ，013501の中にいくつかプロパティがあるのが分かります．

0ef001はノードプロファイルオブジェクトといってECHONET Liteノードとして生きていく中で必ず必要なものです．モジュールの中で自動的に処理してくれます．空気清浄機も持っていますね．

013501はECHONET Lite規格において空気清浄機と決まっています．
規格書のAppendixってのを見ると書いてあります．


次はECHONET LiteのJSONをもうちょっと人間にわかりやすいJSONに変換するプログラムあたりを記事にしてみたいです．
研究室で学生がTensor flowを扱うために

今流行りのディープラーニングを「研究室」で手早く設定するためのメモ。（初心者のメモなので、眺める程度にどうぞ）

1.OSはUbuntu

研究室の事情もあり、CentOS6.5で設定を試みたのだが、バージョン等の影響で環境構築に非常に手間がかかった。これらの問題がUbuntu 14.04 LTSでは嘘のようにさっと設定ができる。他のソフトとの連携も考えるとUbuntuを強く推奨。

2.png等の画像を扱えるコードを用意しておく

ディープラーニングのお試し等で大変なのが、統一的なデータセットのフォーマットがないこと。学部生に一々バイナリ読ませるのは結構、酷。そこで、画像ファイルを一枚一枚読み込めるコードを持っておく。
http://kivantium.hateblo.jp/entry/2015/11/18/233834
で紹介されているコードが分かりやすい。
このコードを持っておくと、試したい画像をお手軽に試せる。

(2016/10/12追記）
3.GPUは占有するもの
研究室の皆で使う・・・となるとこの問題が発生します。Deep LearningはGPUをほぼ占有して行うことがあるため（というか画像系やるとわりとメモリ足りなくなる）誰かが動かしていると、他の人が動かせないなどの問題が発生します。どうしても皆でというならば、KVM等で仮想化するのも手ですが、結構難易度高めです。なので、ハードディスクごと入れ替えたりという事例もしばしば・・・。あとはクラウドという手段もありますが、時間課金制なことが多いのもあって、研究室では使いづら問題もあります。ただ、今はgtx1080もあれば大抵のタスクがこなせるので、１５万くらい予算あればいけるかも？

4.GPUのメモリ問題
その後の指摘でGTX960なら余裕なはず・・・とご意見をいただいたのでただいま検証中・・・。
6/13改訂
Web上にあるTensorflowのコードを拾って改造すると、GPUのメモリエラーが発生することがある。たとえば、

W tensorflow/core/common_runtime/bfc_allocator.cc:271] Ran out of memory trying to allocate 5.57GiB.  See logs for memory state.
W tensorflow/core/framework/op_kernel.cc:900] Resource exhausted: OOM when allocating tensor with shape[59635,28,28,32]

shape[59635,28,28,32]を見ると、59635枚の画像はそれぞれ28*28のサイズになっていて、最初のたたみ込みで、それぞれ32通りの画像を生成する・・・の意味（であってるはず）。

これだけの量がGPUメモリに展開され、60000(約)*28*28*32=1.5G そして、1.5*4=6G 且つ計算用に取った諸メモリを組み合わせると、7Gくらいになり、7G-1.9G=5.1Gで、なんとなく5.58GiB足りないよって出てくるのだと想像。

、普通のGPUだとRan out of memoryを引き起こしてしまうことがある。画像の数を減らせば解決できるのだが、データ量が鍵となる場合、どうにかしないと前に進めない。

これと同じ問題を抱えて解決している記事がこちら
http://qiita.com/ikki8412/items/6784370f73dc7734372a
筆者の前の記事のコードとdiffを見ながらコードを改善する・・・。




----------------------------------------------------------------------
~~ディープラーニングの話で大体出てくる、MNIST。（計算すればわかりきっていることだが）研究室に余ってるGTX960(メモリ2GB)とかで回すと、~~

~~W tensorflow/core/common_runtime/bfc_allocator.cc:271] Ran out of memory trying to allocate 5.57GiB.  See logs for memory state.~~

~~とかでて、全然足りないことがわかる。よく研究室でTITAN X を見かけるが、今だったらGTX1080が一本あるといいかもしれない。また、GTX1080の影響で安くなった980Tiを買っちゃえーとかやると結局メモリ不足に陥りそうなので注意？~~
Watson IoT Platform - MQTT - CleanSessionの確認

初めてWatson IoT Platformを使ってみよう、というかたのためのガイドです。
[Watson IoT Platformを使ってみる](http://qiita.com/egplnt/items/af867711a7191923b2ff)でIoTアプリを準備しました。
[MessageSightを動かす](http://qiita.com/egplnt/items/246205f6574cde268712)でMQTTブローカーとしてMessageSightを準備しました。
[Node-REDをローカル環境で稼働させる](http://qiita.com/egplnt/items/39f4794504fc27823bb4)
と[Watson IoT Platform - MQTT - Node-REDからpub/subする](http://qiita.com/egplnt/items/2105158291f4857aa7b0)でNode-REDからpub/subできるようにしました。

#CleanSession=false(durable subscription)機能の確認
- MQTTのCleanSession=false(durable subscription)機能により、サブスクライバー（受信者）は接続時にCleanSession=falseを指定することにより、自分が非接続中に配信されたメッセージについても再接続時に受信することができるようになります。
- [Node-REDのフローをコピーする方法](http://qiita.com/egplnt/items/84b244a50d8bdaced324)を参照して以下のフローをコピペし、MQTTノードのアドレスを自環境に合わせます。
 
```lang:CleanSession=falseの確認
[{"id":"42b340e4.dc4bd","type":"mqtt-broker","z":"375326d0.fda38a","broker":"192.168.100.100","port":"1883","clientid":"","usetls":false,"verifyservercert":true,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willRetain":null,"willPayload":"","birthTopic":"","birthQos":"0","birthRetain":null,"birthPayload":""},{"id":"418d3097.c29d28","type":"mqtt out","z":"375326d0.fda38a","name":"","topic":"/abc/def/ghi","qos":"","retain":"","broker":"42b340e4.dc4bd","x":250,"y":520,"wires":[]},{"id":"fec77fc6.405f2","type":"inject","z":"375326d0.fda38a","name":"","topic":"","payload":"こんにちは","payloadType":"str","repeat":"","crontab":"","once":false,"x":100,"y":520,"wires":[["418d3097.c29d28"]]}]

```
![スクリーンショット 2016-05-31 13.48.10.png](https://qiita-image-store.s3.amazonaws.com/0/125842/2fa7661f-56bf-3627-211f-4bafce1944e5.png)

- 下記のプログラムを使ってサブスクライブします。

```py:CleanSession=falseの確認
#!/usr/bin/python
# -*- coding: utf-8 -*-

import paho.mqtt.client as mqtt

topic = "/abc/def/ghi"
clientID = "subTester"
broker = "192.168.100.100"

def on_connect(client, userdata, flags, rc):
    print("connected")
    client.subscribe(topic)

def on_message(client, userdata, msg):
    print(msg.topic+" "+str(msg.payload))

mqttc = mqtt.Client(clientID,clean_session=0)

mqttc.on_connect = on_connect
mqttc.on_message = on_message

mqttc.connect(host=broker, port=1883, keepalive=60)

mqttc.loop_forever()

```

- このプログラムを実行して、MQTTブローカーに対して接続しいったん`/abc/def/ghi`トピックへサブスクライブします。
- Node-REDのフローからこの`/abc/def/ghi`トピックへメッセージを送信し、メッセージがこのプログラム（サブスクライバー）によって受信される事を確認します。
- 次にこのプログラムをいったん終了します。
- 再度Node-REDのフローを用いて（必要に応じてinjectノードから送信される文字列を「こんばんは」などへ更新するなどして）、`/abc/def/ghi`トピックへメッセージを送信します。
![スクリーンショット 2016-05-31 13.53.24.png](https://qiita-image-store.s3.amazonaws.com/0/125842/110160d2-96ed-248d-279a-e12a33fcafad.png)

- 上記のサブスクライバープログラムを再度実行し、再接続時に保存されていたメッセージが受信される事を確認します。
![スクリーンショット 2016-05-31 13.53.39.png](https://qiita-image-store.s3.amazonaws.com/0/125842/0c8c5056-abb9-f8b8-7c20-44f80c225e26.png)
browserify、react、babelの環境を作る

（色々と同じような記事がたくさんあるのだけれど、最近のフロントエンド開発周りについて行けてないので、ちゃんと理解するために自分用に記事にまとめる）

react の公式でも browserify or webpack の使用を勧めてるっぽいので、browserify を使って react を使う環境を整えてみる。


## browserify とは？

[browserify](http://browserify.org) とは簡単にいうとブラウザでモジュールの依存管理周りをよしなにやってくれて1ファイルにまとめてくれるやつ。
詳しくは下記のリンクが詳しいです。

- [Browserifyとは | CodeGrid](https://app.codegrid.net/entry/browserify-1)
- [話題のbrowserifyについてちゃんと調べてみた](http://shibe97.tumblr.com/post/101898380392/話題のbrowserifyについてちゃんと調べてみた)
- [browserifyを試してみる](http://qiita.com/makotot/items/d524941fc6b8b4493de2)\

### browserify をインストール

```bash
$ npm install --save-dev browserify
```

試してみる。

```bash
$ ./node_modules/.bin/browserify src/test.js -o lib/bundle.js
```

ちゃんとファイルが生成されていれば OK。

## babel での JSX, ES2015 コンパイルを同時にやる

browserify で依存解決と1ファイルにまとめると同時に babelでの jsx,es2015 のコンパイルを同時にやる。

babel の環境構築については[こちらの記事](http://qiita.com/tanaka0325/items/f0d217e4e967286046a0)参照。

browserify は -t オプション(--transform オプション)で指定したものでコンパイルしてくれる。
ここで指定できる babel モジュールが babelify という別モジュールになってるので、
それをインストールする。

```bash
$ npm install --save-dev babelify
```

さっきのコマンドで -t オプションを試してみる。

```bash
$ ./node_modules/.bin/browserify src/test.jsx -t babelify -o lib/bundle.js
```

問題なく実行できれば OK。

## 次の課題

今回はとりあえず最低限のところまでをやってみましたが、browserify には他にも色々機能があるみたいです。
例えば下記。

[Browserifyのオプションつけるとどんな出力になるのかを検証する。](http://qiita.com/inuscript/items/1fe19d32011e39ed8e2b)

まだ僕はそこまでの需要がないので必要になったらまた調べてみます。
それよりも先に webpack に移行する可能性もありますが。。。

~~でもとりあえず次は gulp 周りについて調べてみようと思ってます。~~
（追記）
色々調べた結果、gulpは必要なさそうな気がしてきた。
とりあえずは npm の scripts で事足りそうなので、それで事足りなくなったら（そんな日が来るかわからないけれど）必要に応じで導入を検討しようかと思う。

npm の scripts は普通の unix コマンドらしいので、gulp 使わなくて済むのであればそっちのほうがありがたい。

gulp が必要ないと思った参考リンクを幾つか貼っておきます。

- [[意訳]私がGulpとGruntを手放した理由](http://qiita.com/chuck0523/items/dafdbd19c12efd40e2de)
- [[WIP] npm-scripts を使い倒そう!](http://qiita.com/mysticatea/items/e9bf581fb28c5f1cd660)
- [How to Use npm as a Build Tool](http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/)

## (おまけ)webpack について

browserify と同じようなツールに webpack というものがあります。
webpack のほうが後発で、複数ファイルを出力できたり、色々と柔軟な設定ができるみたいで、最近では webpack のほうが流行りみたいです。

初めは webpack でやろうと思ったのですが、
何処かの記事の webpack.config.js を見た時にかなりハードルが高いと感じたので、
一旦シンプルそうな browserify を題材にし、ある程度理解が進んだら webpack に移行しようと思ったのです。

そのうち webpack についても調べてまとめようと思ってます。
Unityの.metaファイルとは何か？

Unityでは、Projectタブに下記のいずれかを追加すると、
`追加したファイル名 + .meta`という名前のファイルが作成されます。

- .unityファイル(Unity)
- .prefabファイル(Prefab)
- .matファイル(Material)
- .cs, .jsファイル(Script)
- フォルダ

## .metaファイルとは何か？
[Unityの公式ドキュメント](http://docs.unity3d.com/ja/current/Manual/BehindtheScenes.html)を読んでみると、以下の記述があります。

1 ユニーク ID の割り当て

```
テキストなどのアセットを Assets フォルダーに置くとき、Unity は最初に、新しいファイルが追加されたことを察知します 
(中略...)

まず、Unity は一意の ID をアセットに割り当てます。
```

2 .meta ファイルの作成

```
Unity が各アセットに割り当てる ID は、Unity がアセット ファイルと一緒に作成した .meta ファイル内に保管されます。この .meta ファイルは、関連するアセット ファイルと一緒にしておかなければなりません。
```

## まとめ
まとめると

- UnityはユニークIDを各アセットに割り当てて管理している。
- UnityはユニークIDを.metaファイルに分散して保存している。

といった感じですね。
iOSだと、`project.pbxproj`で全て管理されますが、それが分散して管理されているイメージです。

Unity初心者なので、何か間違いがあれば指摘して頂ければと思いますm(_ _)m


## 参考
- [Unity マニュアル - アセットの内部処理](http://docs.unity3d.com/ja/current/Manual/BehindtheScenes.html)
Unityのプロジェクト構成

最近、Unityを始めましたが、全体像の理解があやふやだったので、
全体像を理解するためにプロジェクト構成をまとめてみました。

## Assetsフォルダ
Assetsフォルダは以下のファイルを格納するためのフォルダです。

- .unityファイル(Unity)
- .matファイル(Material)
- .prefabファイル(Prefab)
- .cs, .jsファイル(Script)

## Libraryフォルダ
インポートされたアセットのローカルキャッシュを格納するためのフォルダです。

## obj, Tempフォルダ
obj, TempフォルダはMonoDevelopやUnityの使用中、またはビルド中に生成される一時ファイルを格納するためのフォルダです。

## ProjectSettingsフォルダ
Unityの[Edit] > [Project Settings]で編集された情報を保存するためのフォルダです。

## 終わりに
Unity初心者なので、何か間違いがあれば指摘して頂ければと思いますm(_ _)m

## 参考
- [Mastering Unity Project Folder Structure - Version Control Systems](https://unity3d.com/jp/learn/tutorials/modules/beginner/architecture/folders-in-version-control)
delba/Log で Swift.print() と同じ感覚で Log 出力する

# [DaveWoodCom/XCGLogger](https://github.com/DaveWoodCom/XCGLogger)

XCGLogger はとても便利なのだが、 log 出力する内容を string で渡さないといけないのを不満に思っていた。

```swift
var text = "log"
log.debug("\(text)")  // こんな感じで string にして渡さないといけない
```

そうではなくて、 `Swift.print(text)` みたいに変数とかオブジェクトそのまま渡して出力してくれる Log ライブラリを探してたら見つけたので紹介。

# [delba/Log: An extensible logging framework for Swift](https://github.com/delba/Log)

半年くらい前に出てきたライブラリ。
Log という名前なのでググラビリティが低い...

Use Log just as you would use print. とある通りの使い勝手でいける。

## Usage

中で出てくる `#if DEBUG` が何かとか、 `log` が `Optional` になってる理由は [XCGLogger で DEBUG の時だけ log を出す - Qiita](http://qiita.com/star__hoshi/items/b630a122a6a06d83cbbe) を参考にして欲しい。 

### AppDelegate.swift

```swift
import Log

let log: Logger? = {
  #if DEBUG
    let Log = Logger(formatter: .Detailed, theme: .TomorrowNight)
    return Log
  #else
    return nil
  #endif
}()
```

### ViewController.swift

```swift

  override func viewDidLoad() {
    super.viewDidLoad()
    let one = 1
    let warning = "warning!!!!!!"
    let error = "error!!!!!!"
    log?.trace("Called!!!")
    log?.debug("Who is self:", self)
    log?.info(one)
    log?.warning(warning, separator: " - ")
    log?.error(error, terminator: "😱😱😱\n")
  }
```

### 結果

String だろうと変数であろうと、 `Swift.print()` の感覚でログ出力できてめでたい :congratulations: 

![スクリーンショット 2016-05-31 13.14.17.png](https://qiita-image-store.s3.amazonaws.com/0/5678/7165a34d-63cf-6aec-088c-07926c063b0d.png)
Watson IoT Platform - MQTT - Retainの確認

初めてWatson IoT Platformを使ってみよう、というかたのためのガイドです。
[Watson IoT Platformを使ってみる](http://qiita.com/egplnt/items/af867711a7191923b2ff)でIoTアプリを準備しました。
[MessageSightを動かす](http://qiita.com/egplnt/items/246205f6574cde268712)でMQTTブローカーとしてMessageSightを準備しました。
[Node-REDをローカル環境で稼働させる](http://qiita.com/egplnt/items/39f4794504fc27823bb4)
と[Watson IoT Platform - MQTT - Node-REDからpub/subする](http://qiita.com/egplnt/items/2105158291f4857aa7b0)でNode-REDからpub/subできるようにしました。

#Retain機能の確認
- MQTTのRetain機能により、同一トピックの最新（最終）メッセージをブローカー内に保持することができます。
- Retainはパブリッシュする際にパブリッシャー（送信者）がメッセージ毎に指定可能です。
- サブスクライバー（受信者）は
    - 接続されていればパブリッシュされた時にすぐ受信できます（当然）。
    - あとからサブスクライブしても、ブローカー内にRETAIN（保持）されている最終版をサブスクライブした時に受信することができます。
- - [Node-REDのフローをコピーする方法](http://qiita.com/egplnt/items/84b244a50d8bdaced324)を参照して以下のフローをコピペし、MQTTノードのアドレスを自環境に合わせます。
 
```lang:Retainの確認
[{"id":"42b340e4.dc4bd","type":"mqtt-broker","z":"375326d0.fda38a","broker":"192.168.100.100","port":"1883","clientid":"","usetls":false,"verifyservercert":true,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willRetain":null,"willPayload":"","birthTopic":"","birthQos":"0","birthRetain":null,"birthPayload":""},{"id":"418d3097.c29d28","type":"mqtt out","z":"375326d0.fda38a","name":"","topic":"/abc/def/ghi","qos":"","retain":"true","broker":"42b340e4.dc4bd","x":250,"y":520,"wires":[]},{"id":"fec77fc6.405f2","type":"inject","z":"375326d0.fda38a","name":"","topic":"","payload":"こんにちは","payloadType":"str","repeat":"","crontab":"","once":false,"x":100,"y":520,"wires":[["418d3097.c29d28"]]},{"id":"796ea0f6.918108","type":"debug","z":"375326d0.fda38a","name":"","active":true,"console":"false","complete":"false","x":630,"y":520,"wires":[]},{"id":"9520efe5.348c9","type":"mqtt in","z":"375326d0.fda38a","name":"","topic":"/abc/def/ghi","broker":"42b340e4.dc4bd","x":450,"y":520,"wires":[["796ea0f6.918108"]]}]

```
![スクリーンショット 2016-05-31 12.48.18.png](https://qiita-image-store.s3.amazonaws.com/0/125842/e9224700-1c5a-a598-11d7-e0bdbb2281d8.png)

- まずデフォルトのRetainを`false`にしてデプロイし、injectノードの左側のボタンを押すと、Debugノードからメッセージが出力される事を確認します。
- 次に、mqtt outノードのRetainを`true`にして一度メッセージを送付（injectノード左側のボタンを押下）します。
- 続いて、右側のmqtt inノードを開いてなにか編集（例えばノードのName欄に名前を入力するなど）し、デプロイし直すと、
![スクリーンショット 2016-05-31 13.06.14.png](https://qiita-image-store.s3.amazonaws.com/0/125842/d9e4b2fa-07e5-46c2-0e2f-8375af17e428.png)


このタイミングでDebug出力へ保存されていたRetainメッセージが送達される事を確認します。
![スクリーンショット 2016-05-31 13.09.57.png](https://qiita-image-store.s3.amazonaws.com/0/125842/29568799-f436-078f-f00b-5b7686b3cd0a.png)

- Retainメッセージをブローカーから削除するには、同一トピックに対してブランクのペイロードを送付することで削除されます。
- 下記のようにinjectノードの送付メッセージをブランクに変更し、デプロイします。
![スクリーンショット 2016-05-31 13.09.19.png](https://qiita-image-store.s3.amazonaws.com/0/125842/74bc3293-c2dc-9aa2-aca4-3cd41966f5da.png)

- デプロイ後、上記と同様の操作でmqtt inノードを編集しデプロイしなおしても、前に保持されていたRetainメッセージが送達されなくなった事を確認します。
Windowsに移植されたＵＮＩＸのｄａｔｅコマンドについて質問があります。

2016年5月30日まで使えていた「dateコマンド」が
2016年5月31日に使ったら、異常終了するようになりました。

「来月」や「末日」が簡単に出てくるので重宝してたのですが困りました。

代わりをと思い、こちらで紹介されていた「ＢｕｓｙＢｏｘ」を試したら
「来月」等のオプションが有りません。

ならば「Ｃｙｇｗｉｎ」だ、とやってみたら２カ月単位しか出ません。
Ｃｙｇｗｉｎに関しては、ＥＸＥと最低限必要なＤＬＬだけ集めて実験したので
設定が何か足りないかもしてません。

そこで質問です。

１．本家「ＵＮＩＸ」や「ＬＩＮＵＸ」でもこの状況でしょうか？
２．Ｃｙｇｗｉｎをちゃんと入れれば、１カ月単位で出せるのでしょうか？
３．他に正常に動くＷＩＮ版のバイナリは有るのでしょうか？
　　※　出来ればＥＸＥ１個で動くもの

この３つでお願いします。

試した内容はこちらになります。

---------------------------------------------

ttp://downloads.sourceforge.net/project/unxutils/unxutils/current/UnxUtils.zip
の　date.exe を dateunix.exe に変更

20160531 の日に
コマンドプロンプトで
dateunix "+%Y%m01" -d "7 month ago" ← 20151001
dateunix "+%Y%m01" -d "6 month ago" ←   異常
dateunix "+%Y%m01" -d "5 month ago" ← 20151201
dateunix "+%Y%m01" -d "4 month ago" ← 20160101
dateunix "+%Y%m01" -d "3 month ago" ←   異常
dateunix "+%Y%m01" -d "2 month ago" ← 20160301
dateunix "+%Y%m01" -d "1 month ago" ←   異常
dateunix "+%Y%m01" -d "0 month"     ← 20160501
dateunix "+%Y%m01" -d "1 month"     ←   異常
dateunix "+%Y%m01" -d "2 month"     ← 20160701
dateunix "+%Y%m01" -d "3 month"     ← 20160801
dateunix "+%Y%m01" -d "4 month"     ←   異常
dateunix "+%Y%m01" -d "5 month"     ← 20161001
dateunix "+%Y%m01" -d "6 month"     ←   異常
dateunix "+%Y%m01" -d "7 month"     ← 20161201

---------------------------------------------

ttp://ring.maffin.ad.jp/archives/pc/gnu-win32/x86/release/coreutils/coreutils-8.25-2.tar.xz
の　date.exe を Cygdate.exe に変更

cyggcc_s-1.dll
ttp://ring.maffin.ad.jp/archives/pc/gnu-win32/x86/release/gcc/libgcc1/libgcc1-5.3.0-3.tar.xz

cyggcj-16.dll
ttp://ring.maffin.ad.jp/archives/pc/gnu-win32/x86/release/gcc/libgcj16/libgcj16-5.3.0-3.tar.xz

cygintl-8.dll
ttp://ring.maffin.ad.jp/archives/pc/gnu-win32/x86/release/gettext/libintl8/libintl8-0.19.5.1-2.tar.xz

cygwin1.dll
ttp://ring.maffin.ad.jp/archives/pc/gnu-win32/x86/release/cygwin/cygwin-2.5.0-0.10.tar.xz

cygiconv-2.dll
ttp://ring.maffin.ad.jp/archives/pc/gnu-win32/x86/release/libiconv/libiconv2/libiconv2-1.14-3.tar.xz

のＥＸＥとＤＬＬを同じフォルダに入れて

20160531 の日に
コマンドプロンプトで
Cygdate "+%Y%m01" -d "7 month ago" ← 20151001
Cygdate "+%Y%m01" -d "6 month ago" ← 20151201
Cygdate "+%Y%m01" -d "5 month ago" ← 20151201
Cygdate "+%Y%m01" -d "4 month ago" ← 20160101
Cygdate "+%Y%m01" -d "3 month ago" ← 20160301
Cygdate "+%Y%m01" -d "2 month ago" ← 20160301
Cygdate "+%Y%m01" -d "1 month ago" ← 20160501
Cygdate "+%Y%m01" -d "0 month"     ← 20160501
Cygdate "+%Y%m01" -d "1 month"     ← 20160701
Cygdate "+%Y%m01" -d "2 month"     ← 20160701
Cygdate "+%Y%m01" -d "3 month"     ← 20160801　？？？
Cygdate "+%Y%m01" -d "4 month"     ← 20161001
Cygdate "+%Y%m01" -d "5 month"     ← 20161001
Cygdate "+%Y%m01" -d "6 month"     ← 20161201
Cygdate "+%Y%m01" -d "7 month"     ← 20161201

---------------------------------------------

バッチを組むしか能がない小生に救いの手を！
Petalinux > Link > DTSでカスタム文字列をbootargsに追加

## xilinx情報

bootargsにて`MEM=768M`のようなパラメータを追加する方法。
http://japan.xilinx.com/support/answers/57052.html


## petalinux-config

上記とは別に、petalinux-configコマンドを試した。

Kernel Bootargs --> 
[ ] generate boot args automatically
というチェックがついている。その下に`(console=ttyPS0,115200 earlyprintk)`なる文字がある。

[ ] generate boot args automatically
のチェックを外して
() user set kernel bootargs
を選択すると`user set kernel bootargs`という入力画面が出てきた。

以下のように入力してみた。
`console=ttyPS0,115200,MEM=512M`

petalinux-buildしてQEMUで起動したら512MBにはなっていない。

```
Kernel command line: console=ttyPS0,115200,MEM=512M
PID hash table entries: 4096 (order: 2, 16384 bytes)
Dentry cache hash table entries: 131072 (order: 7, 524288 bytes)
Inode-cache hash table entries: 65536 (order: 6, 262144 bytes)
Memory: 897784K/1048576K available (4623K kernel code, 239K rwdata, 1588K rodata, 3600K init, 210K bss, 150792K reserved, 0K highmem)
```
モナドメモ

# メモ
- 表の世界とモナドの世界
- 表の世界を「モナド」でラップしたもの
- 「ラッパー」という概念を、構成的にではなく外側から見た振る舞い（≒インターフェース）によって定義したものと理解することが可能
- つまり、「ラッパー」の中は直接的に見ることができないのだけれども、外側からどのような刺激を与えるとどのような反応を返すべきか（あるいは返さないか）は観測できるものとして定義する
- モナド界のオブジェクトがあったとして、必ずしもそこから表層界のオブジェクトを取り出せるとは限らないということ
- 外界に対して副作用を及ぼすようなモナドについては、むしろその中は観測不能であるべき
- 実際のところ、表の世界だけの道具だてでモナドを構築する限りにおいては、中が観測可能なものしかできないように思われる
- システムが用意してくれる裏世界モナドを使うことで、我々表世界のプログラマもある程度裏世界をあやつれるということか

# モナド則
- モナドは、それに関係する二つの演算子 bind と return で特徴付けられる
- return は、ある表世界の型 t からモナド界の型 M t への関数。 return: t → M t
- bind は、表層界からモナド界への関数 : t → M u をモナド界の関数 : M t → M u にマップする。

--------

![image](https://qiita-image-store.s3.amazonaws.com/0/121763/3bfac4e7-1472-1880-2eee-734dabbf1aeb.png)


--------


![image](https://qiita-image-store.s3.amazonaws.com/0/121763/ec161cbc-b0ef-3e8f-bd6c-6312e5c55025.png)