OmniAICreator/Qiita-1.07M huggingface dataset:
Playでクエリストリングをcase class(自分型、任意のオブジェクト)で受け取る

QueryStringBindableの話です。
配列で受け取る記事を書く際の調べもの中からの思い付きで。
- [Playでクエリストリングを配列(List)や任意の型で受け取る](http://qiita.com/tyahha/items/d85dad9785f19334ca3d)

# ソースコード
https://github.com/tyahha/play-q-obj-test

# 作ったソースの動作仕様的なもの
次のようなクエリからCellsオブジェクトにバインディングする。

## クエリストリング
``` クエリストリング
?cells.colums=4&cells.rows=5
```

## Cellsの定義

``` Cells.scala
case class Cells(columns: Int, rows: Int)
```

## 描画
受け取ったCellsのcolumnsを列、rowsを行として「■」を描画

- 3×4
![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/91779/2100cbbe-d0ba-4ee5-61d3-000d6505d09d.png)

- 2×5
![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/91779/c466a129-d063-6704-676d-d3ea397a737c.png)

# ソースコードのポイント抜粋
## QueryStringBindableの拡張部分

``` Cells.scala
object Cells {
  implicit def queryStringBinder(implicit intBinder: QueryStringBindable[Int]) = new QueryStringBindable[Cells] {
    val columnsKey = "columns"
    val rowsKey = "rows"

    override def bind(key: String, params: Map[String, Seq[String]]): Option[Either[String, Cells]] = {
      for {
        columns <- intBinder.bind(s"$key.$columnsKey", params)
        rows <- intBinder.bind(s"$key.$rowsKey", params)
      } yield {
        (columns, rows) match {
          case (Right(c), Right(r)) => Right(Cells(c, r))
          case _ => Left(s"cell's columns and rows must be Integer.")
        }
      }
    }

    override def unbind(key: String, cells: Cells): String = s"${intBinder.unbind(s"$key.$columnsKey", cells.columns)}&${intBinder.unbind(s"$key.$rowsKey", cells.rows)}"
  }
}
```
### ポイント
- Intのbind,unbindには既存の実装を利用
- エラー処理は簡単のためまとめているが、細やかな制御も可能
- Leftで返したものはどこへいく？（今後調査します）

## routes

```routes
GET     /                           controllers.TestController.index(cells: controllers.request.query.Cells)
```

- CellsのコンパニオンオブジェクトにQueryStringBindableの拡張を定義しておけば、それだけでroutesに記述することができる

# 感想・備考等
- 今回の仕様だとオブジェクトにする必要ないじゃんというツッコミはなしで。。。
- 「行列」なのでCellsのcolumnsとrowsの順番は逆のほうがいいなと後で思いました。。。
 本質的な内容でないため今回は修正せず。。。

# 参考にしたもの
[Play 2.x の QueryStringBindable, PathBindable について](http://tototoshi.hatenablog.com/entry/20130216/1360985707)
[公式ドキュメント](https://www.playframework.com/documentation/ja/2.4.x/api/scala/index.html#play.api.mvc.QueryStringBindable)-
Creating a pull request using Github

This manual is based on the following workflow.

1. Forking the team's branch to your own repository.
2. Getting the latest files from the team's repository.
3. Pushing the changes on your own repository.
4. Creating a pull request from your repository to the teams'.

---

# Preparing your working copy

1. Create a fork of the repository on github. It would look something like `YOUR_USER_NAME/ORIGINAL_REPOSITORY_NAME`.
2. Create a repository and a working copy on your local drive by `git clone YOUR_FORK_URL`.
3. Add the repository you forked from as remote by `git remote add NAME_YOU_CHOOSE_FOR_REMOTE_REPOSITORY ORIGINAL_REPOSITORY_URL`.

---

# Creating a Pull Request

1. Get the most recent information on the original repository by `git pull NAME_YOU_CHOOSE_FOR_REMOTE_REPOSITORY NAME_OF_BRANCH_YOU_WANT_TO_BRANCH_FROM`
2. Create a branch you want to work on by `git checkout -b NAME_FOR_BRANCH NAME_YOU_CHOOSE_FOR_REMOTE_REPOSITORY/NAME_OF_BRANCH_YOU_WANT_TO_BRANCH_FROM`
3. Change whatever you want to in your local drive.
4. Add a new change you want to track in the new commit by `git add FILE(s)_YOU_CHANGED`
5. Create a new commit by `git commit`
6. Push the branch to the fork you created by `git push origin NAME_FOR_BRANCH`. Keep in mind that `origin` is the name given to the repository you cloned from. It should be `YOUR_USER_NAME/ORIGINAL_REPOSITORY_NAME` if you followed this manual.
7. Create a pull request on Github.
three.jsでmtlloaderをhack

#概要
three.jsでobjのmtlを差し替える。
objとmtlは、suketchupで、書き出してる。
#写真
![](http://jsdo-static-contents.s3.amazonaws.com/images/capture/A/0/T/A0T1.jpg?t=1482830984)

#環境
three.js r83

#調査
print_rでobjのプロパティ探したが、マテリアル見つからない。
mtlで見つかったので、いじる。

#調査の実際
http://jsdo.it/ohisama1/c9bq

#仕掛け
mtlloaderで読み込んで、preloadしたら、materialsを書き換える。
        

#hackの実際
http://jsdo.it/ohisama1/A0T1
技術英語 > It worked well [until shortly after] the ink was dry on the second printing.

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

> It worked well **<font color=red>until shortly after</font>** the ink was dry on the second printing.

意訳「本の第二刷が出てすぐのころまではそれは有効であった。」

Deep Learningのフレームワークの１つの発展が速すぎて、最近の本の内容がそのままで動かないということがあるとか。

他のフレームワークでもありそう。

~~directions of preparation~~インストール手順や実行方法を記載して、多くの人にそれを使ってもらうには、安定的に使えるフレームワークを選定する、というのも検討事項かもしれない。

最新を追及することも大切で、かつ多くの人が追従して利用できるということも大切。

選定したTensorFlowはどれほど安定的に使えるのか。v0.12の変更が少し気になる。
http://qiita.com/ornew/items/eea1d194015b9b9a5c3a
[Unity]Firebase DatabaseでValueChangeイベントを使う


# 手順
1. 適当な値をデータベースに書き込む
2. 値の変化を取得したいリファレンスを取得する
3. イベントリスナーを登録する
4. 値を変更する
5. Snapshotで現在の状態を取得


手順1はあらかじめ済ませておく．

手順4は手動で変更した

# スクリプト

```
// 略
using Firebase;
using Firebase.Unity.Editor;
using Firebase.Database;

public class FirebaseManager : SingletonMonoBehaviour<FirebaseManager> {

	private DatabaseReference _databaseReference;
	public static readonly int userId = 1001;


	void Start(){
		Init ();
	}

	void Init(){
		FirebaseApp.DefaultInstance.SetEditorDatabaseUrl ("データベースのURL");
		_databaseReference = FirebaseDatabase.DefaultInstance.RootReference;
		
		// 手順3　Startでイベントリスナーを登録
		// この時点で，一度現在の状態が読み込まれる．
		// このソースだと，Debug.Logで状態が出力される．
		SubscriveUndertakingQuestEvent();
	}
	
	// 手順2　リファレンス取得
	// 書き込み等で何回もアクセスするので，プロパティーにした．
	public DatabaseReference UndertakingQuestReference{
		get{
			return _databaseReference.Child ("users") 
				.Child (userId.ToString ())
				.Child ("UndertakingQuest");
			}
	}

	// 手順3 イベントリスナーを登録
	// RxのSubscribeとやってることは似てる
	// テスト用の関数を用意
	public void SubscribeUndertakingQuestEvent(){
		UndertakingQuestReference.ValueChanged += (object sender, ValueChangedEventArgs args) =>{
			if(args.DatabaseError != null){
				Debug.LogError(args.DatabaseError.Message);
				return;
			}
			// 手順5 Snapshotをjsonにして，Debug
			string json = args.Snapshot.GetRawJsonValue();
			Debug.Log(json);
		};
	}
// 略

}


```
LibreOffice Calcで駐輪場管理

LibreOffice AdventCalendar 2016 12月22日として投稿します。

マンションの管理組合の大きな行事として駐輪場収入があります。
毎年決まった時期に駐輪場の料金を徴収します。

事前に自転車やバイクの台数や期間を記入してマンションの管理組合専用ボックスに投函することになっている。

- シールの必要な枚数が把握できる
- 駐輪場収入がどれくらいの金額なのか大体わかる
- 予め領収書も作成しておける。

きっちりとデータを整理活用できれば…。
これもCalcで管理してみようと思います。

これの作り方を説明すると非常に長くなるので先ずは使ってみてください。
そして分析してみてください。
LibreOffice Calcで楽々会計をマスターされた方であれば何とか理解できると思います。

##駐輪場テンプレート
そして駐輪場テンプレートというものを作ってみました。
下記のurlから駐輪場テンプレートを取得してください。
[駐輪場テンプレート](http://yahoo.jp/box/bXh1jj)

###使い方
申込書を元に [purchase]シートにデータを入力しておく。
日付は入力しない。
購入した時点で日付だけを入力する。
見つけやすいようにオートフィルタを掛けておく。
シールNoは[Ceil_no]シートに部屋番号と共に入力

###集金できた人
[purchase]シートをPivot分析する。
dateに日付が入っているものを抽出するとお金を受け取った集計が出せる。

集金終了時に金種表を使ってお金の集計を行う。

###未収金の人
[purchase]シートをPivot分析する。
dateに日付が入っていないものを抽出すると未収金の方が抽出できる。

###半年分の人
[purchase]シートのPivot分析で、半年一年の項目から、半年分(1)を入力したものを抽出すると半年分しか払っていない人を抽出することができる。

###領収書の元データ
[purchase]シートのPivotテーブルを元にして、領収書の元になるデータを作成しておく。
このデータで差し込み印刷を行えば部屋番号、名前、金額、半年か年額か、等の情報を含めた領収書の印字が可能になる。

##入力しやすいように

###シートの保護
このシートのことを良くわからない人が触っても壊れないようにシートの保護でシートを守っています。

###VLOOKUP
[purchase]シートで部屋番号を選ぶと自動的に住人の名前が出るような仕組みはすべてVLOOKUPを使っています。
これらのデータが壊れないようにシートの保護で保護しています。

###入力規則
[purchase]シートで部屋番号フィールドでは部屋番号以外は入力できないようにしています。
これは入力規則という仕組みを使っています。

##最後に

実際にPCとこのCalcシートを持ってお金とシールの受け渡しをすると、
思った以上に日付を入力するところでつまずくんですよね。

それ以外は

- 売上集計も一瞬
- バイクが何台か自転車が何台かも集計一瞬
- 世帯ごとの請求金額も一瞬でわかる

ので非常に重宝しております。
圧縮されたgitのオブジェクトファイルをzlibを使って展開するサンプル

いつかそのうち、自作gitクライアントで使うかも。

```cpp
#include <stdint.h>
#include <io.h>
#include <fcntl.h>
#include <sys/stat.h>
#include <vector>
#include <zlib.h>

void decompress(uint8_t const *begin, uint8_t const *end, std::vector<uint8_t> *out)
{
	int err;
	z_stream d_stream;

	d_stream.zalloc = (alloc_func)0;
	d_stream.zfree = (free_func)0;
	d_stream.opaque = (voidpf)0;

	d_stream.next_in  = (uint8_t *)begin;
	d_stream.avail_in = (uInt)(end - begin);

	err = inflateInit(&d_stream);

	if (err != Z_OK) {
		throw std::string("failed: inflateInit");
	}

	while (1) {
		uint8_t tmp[65536];
		d_stream.next_out = tmp;
		d_stream.avail_out = sizeof(tmp);
		uLong total = d_stream.total_out;
		err = ::inflate(&d_stream, Z_NO_FLUSH);
		int n = d_stream.total_out - total;
		out->insert(out->end(), tmp, tmp + n);
		if (err == Z_STREAM_END) {
			break;
		}
		if (err != Z_OK) {
			throw std::string("failed: inflate");
		}
	}

	err = inflateEnd(&d_stream);
	if (err != Z_OK) {
		throw std::string("failed: inflateEnd");
	}
}

int main()
{
	std::vector<uint8_t> out;

	char const *path = "C:/develop/Guitar/.git/objects/10/65b5cb2a70b1a8f96ca9df6435bb18fa748c8e";

	int fd = open(path, O_RDONLY | O_BINARY);
	if (fd >= 0) {
		struct stat st;
		if (fstat(fd, &st) == 0 && st.st_size > 0) {
			// ファイルを読み込む
			std::vector<uint8_t> vec;
			vec.resize(st.st_size);
			uint8_t *begin = &vec[0];
			uint8_t *end = begin + vec.size();
			read(fd, begin, end - begin);
			// 展開する
			try {
				decompress(begin, end, &out);
			} catch (std::string const &s) {
				fprintf(stderr, "%s\n", s.c_str());
				return 1;
			}
		}
		close(fd);

		printf("%u bytes decompressed.\n", out.size());
	}
	return 0;
}
```
AWS Step Functionsを実行するためのIAM Policy

Lambda関数からStep Functionsを実行させたいと思い、IAM Policyを設定しようとしたところ、2016年12月29日現在、Policy GeneratorにStep Functionsが含まれておらず、Policyの`Action`の値をどう設定すれば良いかわかりませんでした。

結論としては下記のように、`states:StartExecution`を`Action`に設定すればStep Functionsが実行可能になりました。

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "states:StartExecution",
            "Resource": "*"
        }
    ]
}
```

設定すべき値が`states:StartExecution`であることがわかったのは、Step Functionsを実行するためのLambda関数のIAM Roleに、Step Functionsの実行権限をつけていない状態で実行したときのエラーログからでした。

下記のようなログが出ていたので、必要な権限は`states:StartExecution`であると気づけました。
 
+ エラーログ

```
[AccessDeniedException: 
　　User: arn:aws:sts::<アカウントID>:assumed-role/<Lambda関数名> 
　　is not authorized to perform:
　　states:StartExecution on resource: 
　　arn:aws:states:ap-northeast-1:<アカウントID>:execution:
　　<Step　FunctionsのState Machine名>:xxxxxxxxxxxx] 
```
PhalconでPHPビルトインサーバー時にドハマり

# Phalcon を使ってみた
Phalconは「A full-stack PHP framework delivered as a C-extension」というフレームワークです。
ベンチマークで超絶速度(PHPフレームワークにおいて)をたたき出すポテンシャルを持っています。
[Phalcon 公式はこちら](https://phalconphp.com/ja/)


# Phalcon、PHPビルトインサーバーでも動作するってよ
Phalconの公式ドキュメントはかなり詳細なことまで書かれています。
もちろん、サーバー設定方法まで丁寧に記載されています。

で、PHP5.4から搭載されたPHPビルトインサーバーの設定も書かれていました。
[PHP ビルトインサーバーの利用](https://docs.phalconphp.com/ja/latest/reference/built-in.html#php)

この設定は .htrouter.php というファイル(.htaccess的なもの)で、これを行わないとPhalconのデフォルトと同一の設定になりません。

``` php
<?php
if (!file_exists(__DIR__ . '/' . $_SERVER['REQUEST_URI'])) {
    $_GET['_url'] = $_SERVER['REQUEST_URI'];
}
return false;
```

このファイルを使用してサーバーを起動

``` bash
php -S localhost:8000 -t /public .htrouter.php
```

これで.htrouter.phpを使用してサーバーへアクセするようになります。

# ところがどっこい
さて、これを使用していたもののタイトル通りにここではまってしまいました。
例えばGETにクエリ(パラメーター、Query String...等呼ばれ方はいろいろ)を付与し "/foo/bar?baz=qux" というURLへアクセスすると、ルーティングが上手く動作しなくなります。

変数などをダンプしてみると、
"bar?baz=qux" という文字列がルーティングの判定時に使われています。
本来この時点で取得しなければいけないのは "bar" という文字列だけです。

Phalconのルーティングは、ControllerクラスのActionと呼ばれる関数を使用して動的に呼び出しています。
上記の場合、bar?baz=quxAction()みたいな呼ばれ方をしてしまうということです。
本当はbarAction()を呼ばなければならない。

# ならば正せばいい
実際のところ、このことが全く分からず(むしろ勝手にクエリストリングが分割されると思い込んでいたのも問題だった)、1日ハマって見つけたサイトがこちら。
[Route not matches URI with querystring · Issue #379 · phalcon/cphalcon](https://github.com/phalcon/cphalcon/issues/379)
ハイ、公式のgithubのissuesでした。

このissueを読んで上記のルーティングの仕組みをやっと理解。
出来上がった .htrouter.php はこちら

```php
<?php
if (!file_exists(__DIR__ . '/' . $_SERVER['REQUEST_URI'])) {
    if (!empty($_SERVER['REQUEST_URI'])) {
       $uriParts = explode('?', $_SERVER['REQUEST_URI']);
       $uri = $uriParts[0];
    } else {
       $uri = '/';
    }
    $_GET['_url'] = $uri;
}

return false;
```

このポイントの記事が全く見つからず、きっとPHP ビルトインサーバーをみんなが使ってないだけ俺の知識が浅いんじゃないうんきっとそうに違いない。と自己弁護しつつPhalconライフをお楽しみたいと思います。


追伸: 実はvar_dumpで$_GETとかを見ていればヒントがあった。困ったときはvar_dump。
さくらのレンタルサーバでmysqlにssh接続する方法メモ

さくらのレンタルサーバでmyAdminからSQL文でCREATE TABLEしようとしたら、#1142エラーでできなかったため
SSHからmysqlにログインして試してみた。

以下sshでmysqlにログインする方法のメモ
・ターミナルからssh接続
・下記コマンドでパスワードをたずねられるので入力してログイン

```
% mysql -h mysqlxxx.db.sakura.ne.jp -u ユーザ名 -p DB名
```

こちらでも結局同じエラー・・・
SQL文でCREATE TABLEはできない設定なのかも？
Vue.jsでTODOリスト（クライアントサイドのみ）

今話題になりつつあるVue.jsで、クライアントサイドのみのTODOアプリを作りました。

簡単にするため、スタイルシートは未使用です。

デモ https://acro5piano.github.io/vuejs-todo
ソースコード https://github.com/acro5piano/learn-vuejs

# 実装

```index.html
<html>
  <head id="head">
    <title>Todo list</title>
  </head>
  <body>
    <div id="app">
      <h2>Task list</h2>
      <table>
        <tr v-for="(task, index) in tasks">
          <td>
            <p v-if="!task.editable">{{ task.text }}</p>
            <input v-if="task.editable"
                   v-model="task.text"
                   v-on:keyup.enter="editTask(index, task.text)">
          </td>
          <td>
            <button v-on:click="makeTaskEditable(index)">
              edit
            </button>
          </td>
          <td>
            <button v-on:click="deleteTask(index)">delete</button>
          </td>
        </tr>
      </table>
      <h2>Add new task</h2>
      <input v-on:keyup.enter="addTask" v-model="newTaskName">
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="./app.js"></script>
</html>
```

```app.js
var app = new Vue({
  el: '#app',
  data: {
    tasks: [
      { text: 'Learn JavaScript', editable: false},
      { text: 'Learn Vue' ,  editable: false},
      { text: 'Build todo list', editable: false},
    ],
    newTaskName: '',
  },
  methods: {
    addTask: function () {
      this.tasks.push({ text: this.newTaskName, editable: false})
      this.newTaskName = ''
    },
    deleteTask: function (index) {
      this.tasks.splice(index, 1)
    },
    editTask: function (index, text) {
      this.tasks[index].text = text
      this.tasks[index].editable = false
    },
    makeTaskEditable: function (index) {
      this.tasks[index].editable = true
    },
  }
})
```

`editable`を動的に設定したいです。
が、要素を動的に追加する方法だと、うまく行かなかったのでいったんこれで。

# 感想

`vue.js`は非常にシンプルで分かりやすいですね。

RubyとPHPを主に触る自分でも理解できました。MVCのView概念がそのまま通用する感じです。

`<button v-on:click="deleteTask">`などは、平易なのでjQueryの置き換えにも使えそうです。

あとデータバインディング気持ちいい。

# ブラウザを自動リロード

開発しやすくするため、下記のgulpのタスクを作成しました。
`browser-sync`で、サーバーを立ち上げておけば、保存する度にブラウザが更新されます。

```gulpfile.js
var gulp        = require('gulp')
var browserSync = require('browser-sync').create()

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  })
  gulp.watch("./*").on('change', browserSync.reload)
})
```

```
sudo npm install -g gulp
npm install --save-dev gulp browser-sync
```

した後に

```
gulp serve
```

でOKです。
【質問】PPPoEグローバルIP偽装について教えて下さい。

PPPoEグローバルIP偽装について教えて下さい。

勉強目的で、
グローバルIPを偽装してHTTPリクエストを送信し、かつ、
HTTPレスポンスを受信する方法を調べています。

現時点で、以下の方法で可能かなと思っています。
・送信TCPパケットの送信元IPを任意のグローバルIPにする
・送信TCPパケットのソースルーティングに自ルータのグローバルIPを指定する
・自ルータのDMZ機能等を使用してWANからの受信TCPパケットをLANへ流す

そこで、以下①②をご教授下さい。
片方だけでも構いません。

現在以下の構成です。
「クライアントPC←→自ルータ←→終端装置←→雲←→サーバ」

①グローバルIPを偽装する方法
クライアントPCで発行する送信TCPパケットの送信元IPを任意のグローバルIPにすれば良いのでは？

と考えたのですが、よくよく考えるとこれは多分ダメで、

これはLAN内の話になってしまい、
いくらLAN内で偽装しても、WANから出ていく送信TCPパケットの送信元IPはPPPoEで割り当てられたグローバルIPになってしまって、
任意グローバルIPの偽装が出来ないのでは？と考えました。
※こちら合っていますか？

なので、クライアントPCで発行する送信TCPパケットではなく、
自ルータ君が何かしらの方法で任意のグローバルIPに偽装する必要があるのでは？と考えました。
※こちら合っていますか？

合っている場合、どのようにして任意のグローバルIPに偽装すればいいのでしょうか？
合っていない場合、何が合っていないかを教えて下さい。

②PPPoEに縛られずに送受信を行う方法

NTTの光フレッツでプロバイダを使用してます。
要はPPPoEです。

ここで以下サイトに「PPPoEなどを用いずにEthernetをそのままインターネットなどに接続することも技術的には可能」
とあります。
http://e-words.jp/w/PPPoE.html

PPPoEを使わずにインターネットに繋ぐってどういう方法でしょうか？
この方法を教えて下さい。
若者世代でPPPoEが当たり前なので、このPPPoE以外でインターネットに繋ぐ方法を知りません。

PPPoEだと、どうしてもプロバイダが発行するグローバルIPに縛られてしまい、
仮に偽装が出来てもプロバイダでブロックされてしまうので、
偽装が出来ないとでは？と考えている為です。

プロバイダに縛られない自由な環境があれば、
自由に偽装が可能なのでは？と考えているのです。
Serverless FrameworkでWordPressの記事一覧を表示するページを作る


[Serverless Frameworkでwebページを作る](http://qiita.com/motchi0214/items/56b3780aa5884057fbd5)の続きです。

## できたもの
![スクリーンショット 2016-12-29 0.07.41.png](https://qiita-image-store.s3.amazonaws.com/0/23936/ec2f2159-6561-53dc-cb9c-6b46c7790b6d.png "スクリーンショット 2016-12-29 0.07.41.png")
ソースコード：https://github.com/hideokamoto/sls-wordpress-frontend


## ライブラリのインストール
[node-wpapi](https://github.com/WP-API/node-wpapi)というsuperagentのラッパーライブラリがありますので、それを使います。WP APIの開発にも関わってる方が作られたライブラリなので、WP APIで何かしたい時はとりあえずこのライブラリ使っとくと重宝します。

```bash
$ npm install --save wpapi
```

node_moduleをLambda同梱する必要があるので、以下のようにして指定しておきましょう。

```serverless.yml
package:
  include:
    - node_modules/
```

## LambdaからWP APIをコールする

以下のようにして、WPAPIオブジェクトにWP APIエンドポイントを指定後、`posts()`メソッドで投稿を取得します。Promiseに対応しているので、thenとcachで処理しちゃいましょう。

```index.js
module.exports.index = (event, context, callback) => {
    const wp = new WPAPI({ endpoint: 'http://wp-kyoto.net/wp-json' });
    wp.posts().then(function( data ) {
      const renderedContent = createListHtml(data)
      const renderedPage = renderFullPage( renderedContent, data );
      callback(null, renderedPage);
    }).catch(function( err ) {
        callback(err);
    });
};
```

あとは取得した値をHTMLに押し込んで、callbackの第二引数に渡せばOKです。

## API Gateway側の設定

API GatewayはデフォルトだとJSONを返すようになっているので、レスポンスヘッダーを書き換えます。

```serverless.yml
functions:
  index:
    handler: src/index.index
    events:
      - http:
          path: v1
          method: get
          integration: lambda
          response:
            headers:
              Content-Type: "'text/html'"
            template: $input.path('$')
```

ここまで実施した後、`sls deploy`すればAPIエンドポイントが表示されますので、動作確認しておきましょう。

## NEXT:React ServerSide Rendering

[Apexでは既にトライ済](http://qiita.com/motchi0214/items/a299ab71753d88cc1bdc)ですが、Serverless Frameworkではまだなのでこちらもやってみます。

[Serverless Webpack の使い方まとめ](http://qiita.com/mikakane/items/bf992dc6cb6f50a70071)という記事が幸いにもこの間出てきたばかりなので、これを参考にwebpackでやる予定。
python + OpenCV2.4 でギョギョッと魚検出をやってみる（未完）

## モチベーション
[Kaggleのコンペ](https://www.kaggle.com/c/the-nature-conservancy-fisheries-monitoring) に参戦してみようと思ったのがきっかけです．
今回の対象は魚だけですし，Deepでない方法でもいけるのではないかという目論見です．
でも勝つのはやはりFasterRCNNだったりするんでしょうか...

## 環境
##### Ubuntu14.04を想定
- python2.7 (Anaconda)
- OpenCV2.4.11（Anaconda環境では下記コマンドで簡単に入る）
    - `conda install opencv`
  
## 参考記事
- [顔検出](http://qiita.com/hitomatagi/items/04b1b26c1bc2e8081427)
    - trainingはしていない
- [猫検出](http://qiita.com/wellflat/items/c6ffae99be35cecc5680)
    - trainingもしている．猫の画像も自分で集めていらしゃって素晴らしい．
    
## 使うプログラム
https://github.com/mrnugget/opencv-haar-classifier-training

を有難く使わせていただく．
基本的にREADMEのInstructionsに従ってやっていけば良い．

#### 注意事項
「1.」 は既に環境構築できているので無視． 「2.」 から始める．
「3.」 と 「4.」は，　positive_imagesフォルダがシンボリックリンクになる場合は， -followオプションを忘れずにつける．
positive_imagesにクロップ済みの魚画像（Kaggleのデータセットはクロップされてないのでクロップ頑張る必要あります汗), negative_imagesに魚が写っていない画像を入れ下記コマンドを実行！
`find ./positive_images -follow -iname "*.jpg" > positives.txt`
「6.」 はエラーが出たら下記コマンドで解決
`find . -empty | xargs rm　-rf`
再来、鋼鉄の蛇神(IronPython)。

♯序

タイトルはネタ。CLR環境上の鋼鉄の蛇神(?)こと、IronPython。

- ビジュアルイメージ(?):
![](http://www.ironpythoninaction.com/images/ironpythoninaction.jpg)

開発が停滞していた時期もあったが、ポスト・モバイル時代にあって、
.NET/Xamarin向け環境も視野にいれてか、再度、開発が活発化している模様。

[これ](http://qiita.com/kmry2045/items/1b5eba69aaf07de9aa66)を書いたついでに，今回は[今月リリースされたIronPython2.7.7](https://github.com/IronLanguages/main/releases)(python2.7.7相当?)を試す。私のwindows 10環境では、インストールのみで数分で使い始めることができた。

IronPython3系がリリースされたのちには、xamarinなどなどに踏み込むとして、今回は死活監視代わりに古き良き.NETの呼び出しを試す。


#.NET Framework 2.0以降のDirectory周りのメソッドを試す。

.NETな世界に生きるIronPythonは、Systemをインポートするだけで.NETのメソッドを呼び出せる。
 
 
```iron1.py
import System
files = System.IO.DirectoryInfo("C:\\Users\kmr\Pictures").GetFiles("*png", System.IO.SearchOption.AllDirectories)

for fi in files :
  print(fi.FullName)
```

ベタな実行結果はこんな風になる。


> IronPython 2.7.7 (2.7.7.0) on .NET 4.0.30319.42000 (64-bit)
Type "help", "copyright", "credits" or "license" for more information.
`>>> import System
`>>> import System
`>>> files = System.IO.DirectoryInfo("C:\\Users\kmr\\Pictures").GetFiles("*png", System.IO.SearchOption.AllDirectories)
`>>>
`>>> for fi in files :
...   print(fi.FullName)
...
C:\Users\kmr\Pictures\py36-1.PNG
C:\Users\kmr\Pictures\py36.PNG
C:\Users\kmr\Pictures\py361.PNG
C:\Users\kmr\Pictures\py362.PNG
C:\Users\kmr\Pictures\キャプチャ.PNG
C:\Users\kmr\Pictures\キャプチャ2.PNG
C:\Users\kmr\Pictures\キャプチャ3.PNG

IronPythonではメソッドの命名規則はC#/.NETの流儀に従うのが吉のようだ。


ここで、System.IO関連のメソッドが長くなってしまっているため２行に分けたくなるかもしれないが、pythonは改行に敏感な言語。、私の場合、改行はメソッド中の()の途中に入れることにしている。例えば，こんな感じに書くとエラーとならない。

```.py
System.IO.DirectoryInfo("C:\\Users\kmr\Pictures"
  ).GetFiles("*png", System.IO.SearchOption.AllDirectories)
```

#Linq

C#で有名なLinqを試す。関数型チックな集合操作だ。
日本語が、若干~~変態~~レトロチックなこちらのサイトのコードを参考とさせていただくと:
http://ameblo.jp/pyclub/entry-11748941978.html

IronPythonからは、こんなテイストで利用できる。

```linq1.py
import clr
clr.AddReference ("System.Core")
from System import Console
import System
clr.ImportExtensions (System.Linq)


def wari100(a) :
  if a.All (lambda c: True if 0 != c else False):
    Console.WriteLine ("ここまではセーフ:")
    for item in a: 
      Console.WriteLine (100/item)
  else:
    Console.WriteLine ("もしかして、変態さんですかぁ？")

```

この安直なwari100メソッドは以下のように実行できる([テーマ曲](http://www.nicovideo.jp/watch/sm10144935))。

>
`>>> wari100([2, 1, 0, -1, 2])
もしかして、変態さんですかぁ？
`>>> wari100([2, 1, 3, 4, -1, 2])
ここまではセーフ:
50
100
33
25
-100
50

#OfficeやVSが入っていれば、Excel操作なども簡単にできる。

このあたりは、dll次第。IronPython自体も数年更新がほぼ止まっていたわけで、数年前の情報を参照しながら、取り組めばそんなに難しくなさそう。

#改めて使いはじめるのはあり。
昔のwebを見るに、IronPythonはmonoでも動いていた模様だが、
monoベースのxamarin経由でiOSやandroidでも動作とは簡単にはいかないだろう。

とはいえ、普通に便利なので、windowsでちょっとしたコードを書くことがある人は、選択肢に入れておいても良いのでは，と。

将来のブーム再来も念頭にしつつ.NETでpython、これはこれで普通に便利:)
ksnctf q31 KanGacha

http://ksnctf.sweetduet.info/problem/31

## やったこと（ネタバレ）
2年くらい前は知らんかったけど今見たら、ハッシュを取る所でHMAC使わずにsaltを先頭にconcatする形式なんでLength extension attackが使える事に一瞬で気付いた。
後はやるだけなんだけど、SHA512_CTXの状態を変えようと思ってバイトオーダー間違えたり、ブロックサイズを512bitと間違えたりして結構時間食った。
特定のディレクトリの下にあるファイルを再帰的に探索したい

とあるディレクトリの下にあるファイルを再帰的に探索する必要が最近ありました。Javaの標準apiにそのような機能が用意されていると思いきや、意外もないとのこと。

__2016-12-29追記___: 「標準にはない」と書いていますが、実はいろいろあるとのご指摘をいただいています。詳しくはコメント欄を参照してください。


たとえば次のような構造のディレクトリがあるとします。

```
D:\>tree D:\temp /f
フォルダー パスの一覧:  ボリューム Data
ボリューム シリアル番号は C4C7-10BC です
D:\TEMP
│  テキスト0.txt
│
├─フォルダ1
│  │  テキスト1.txt
│  │
│  └─フォルダ1-1
│          テキスト1-1.txt
│
├─フォルダ2
│      テキスト1.txt
│
└─フォルダ3
        テキスト3.txt
```

この`D:\temp`の下にあるファイルを再帰的に探索する場合は以下のようにします。
 
```java
package folder;

import java.io.File;
import java.util.ArrayList;
import java.util.List;
import java.util.Stack;

public class FolderUtils {

	public static void main(String[] args) {
		
		String absolutePath = "D:\\temp";
		List<File> files = FolderUtils.findAllFile(absolutePath);
		for (File file : files) System.out.println(file.getAbsolutePath());
			// D:\temp\フォルダ2\テキスト1.txt
			// D:\temp\フォルダ1\フォルダ1-1\テキスト1-1.txt
			// D:\temp\フォルダ1\テキスト1.txt
			// D:\temp\フォルダ3\テキスト3.txt
			// D:\temp\テキスト0.txt

	}


	/**
	 * 与えられたディレクトリの下にあるファイルを再帰的に探索する。
	 * @param absolutePath ディレクトリの絶対パス。
	 * @return ファイルの一覧
	 */
	public static List<File> findAllFile(String absolutePath) {

		List<File> files = new ArrayList<>();

		Stack<File> stack = new Stack<>();
		stack.add(new File(absolutePath));
		while (!stack.isEmpty()) {
			File item = stack.pop();
			if (item.isFile()) files.add(item);

			if (item.isDirectory()) {
				for (File child : item.listFiles()) stack.push(child);
			}
		}

		return files;
	}
}

```

アルゴリズムは深さ優先探索。ディレクトリならその直下を探索し、それ以外ならリストに記録するだけの単純なものです。深さ優先探索と相性のいい再帰呼び出しではなく、スタックを用いた実装にしているのは効率的な実装を目指したから――ではなく、単にJavaにスタックがあることを知って使いたかったからです(´・ω・`) 大した理由がなくてすみません(´・ω・`)
wordpress　自作jQueryファイルの外部読み込み

wordpress ver.4.6.1


```:functions.php
<?php

	//ウィジェットを使用できるようにするコード
	if ( function_exists('register_sidebar') )
		register_sidebar();
	
	
	//ここから自作jQueryファイル読み込みコード
	function my_scripts() {

	//wpのjqueryを読み込まない
	wp_deregister_script('jquery');

	//jqueryの読み込み
	wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', "", "20160608", false );

	//自作jqueryファイル
	wp_enqueue_script( 'jquery-kotori', get_bloginfo( 'stylesheet_directory') . '/jquery-kotori.js', array(), false, true );
	}
	add_action( 'wp_enqueue_scripts', 'my_scripts');
	
	
?>
```

:candy: wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', "", "20160608", false );
google APIのjqueryを読みこまないと、自作jqueryのファイルが利用できないので必ずコードを記述する。


:candy: wp_enqueue_script( \$handle(必須), \$src(任意), \$deps(任意), \$ver(任意), \$in_footer(任意) );
参考url:http://kwski.net/wordpress/780/
参考url:http://rfs.jp/sb/wordpress/wp-lab/wp_enqueue_script.html
ハンドル名が同じだとエラーとなるので、ハンドル名がかぶらないようにする。

:candy: get_bloginfo( 'stylesheet_directory')
stylesheetがあるフォルダと同じ場所という意味

:candy: add_action( \$hook, \$function_to_add(関数名自作), \$priority, \$accepted_args );
特定のアクションに関数をフックする
この関数は add_filter() のエイリアス
このコードでは、
\$hook→wp_enqueue_scripts
\$function_to_add→my_scripts (function my_scripts() {})
※エイリアス→(意)別の名前で参照するシンボル
参考url:https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_action


:doughnut: wordpressではjQueryファイルはphpファイルのようにテーマ編集には表示されない。
&lt;jQueryファイルの確認方法 chrome&gt;
・デベロッパーツール→application→scripts
参考url:http://weback.net/utility/1410/

:doughnut: ダッシュボード→カスタマイズ→ウィジェット
表示され、利用可能
試したところ、functions.phpのjQuery外部読み込みでも、headでのscript読み込みでもどちらでもok
前はheadでのscript記述では、使用不可だったのに。。

:poultry_leg: phpコードの書き方に注意　この書き方はエラーとなる
<?php　
function add_action〜　
?>
<?php
　wp_enqueue_script〜　
?>

解決方法：一つにまとめる
<?php　
function add_action〜　

wp_enqueue_script〜　
?>
js ローマ数字変換

##お題
10進法をローマ数字へ変換する。

```js
function convertToRoman(num) {
//write your code.

 return ;
}
convertToRoman(649);//DCXLIX
```

##出力結果　例

```js
convertToRoman(68) // "LXVIII"
convertToRoman(891) // "DCCCXCI"
convertToRoman(3999) // "MMMCMXCIX"
```

##使ったもの
for文
while文

##考え方
前提　ローマ数字と10進法の対応関係　
1000-M, 900-CM, 500-D, 400-CD, 100-C, 90-XC, 50-L, 40-XL, 10-X, 9-IX, 5-V, 4-IV, 1-I

・変換前の数字と対応関係にある数字1000から順番に小さくなるように比較する。
・対応関係にある数字が含まれていれば、対応するアルファベットを新しい配列に格納する。そのあとに変換前の数字から対応関係にある数字を差し引く。
・差し引いた後の数字と対応関係にある次の数が含まれているか比較する。含まれているものがなくなるまで上記の処理を繰り返す。
・比較するものがなくなったら用意した配列を返しておわり。

例　
649の場合、1000,900は含まれてないので次の比較へ移る。
500は含まれているので、Dを配列に格納して500を引く(変換元149)。
100が含まれているのでCを格納して差し引く（49）。
50は飛ばして、40が含まれているのでXLを格納して差し引く(9)。
10は飛ばして、９に対応するIXを格納して比較するものがなくなる。
結果はDCXLIXになる。

##コード

```js
function convertToRoman(num) {
  var decimal = [ 1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1 ];
  var romanNumeral = [ 'M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I' ];

  var romanized = '';

  for (var i = 0; i < decimal.length; i++) {
    while (decimal[i] <= num) {
      romanized += romanNumeral[i];
      num -= decimal[i];
    }
  }
  return romanized;
}

convertToRoman(649);//DCXLIX
```


###ES6など他のコードが浮かんだ方、コメントお待ちしております。
GISの学習が難しい理由

# はじめに
遅れてすみません。u_kubota と申します。
勢いでAdventCalendarに登録したのに、投稿当日になったらモチベーションがダダ下がって、今日に至りました。。。。
去年はOSMの方に登録したところ、ポエムみたいな文章になったため、Qiitaの運営サイドから非公開にされてしまいましたorz
が、私が何を書くか楽しみにしている人もいたらしいので、遅ればせながら投稿することにしました。
※実はFOSS4GのAdventCalenderへの投稿は２度目です。

# 今更ながら自己紹介
OSMのヘビーマッパーとしてのほうが名が通っているしがないOLです。ちょくちょくマッピングの講習会をやって、マッパーの育成をしていたりもします。昼間の仕事（？）はGISの教育サービスに従事しています。かれこれ10年ほどGIS業界にいて、一度転職もしたり、数回の異動を経験しましたが、気がついたら教育系のお仕事をしていることが多いです。
どうやら向いているのか？それとも他に向いた仕事がないのかもしれません。でも、お客さんと一緒に共に学び、共に成長していくのは楽しいことではあります。
具体的には、トレーニングとかサポート、コンサルティング（活用支援）などです。そこまでスキルは高くないですが、ソフトいじりは好き（というかソフトで使い方が不明点があると気持ち悪いので徹底的に調べたがる）なので、どちらかといえばソフトの使い方を教えることばかりやってます。。。

# テーマの選定理由
まぁ10年もGISをやっていると、私みたいなのでもそれなりの成長はします。しかし、GISのイベントに言って話を聞くとまだGISの人材育成をテーマに議論していることが多いです。
そして私の仕事の方では今、自社製品のサポートをしているんですが、問い合わせ状況を見る限り、わりと初歩的なところで躓いておられるところが多いように思えます。他のGISソフトの講習に潜入したこともあるんですが、そこでも似たり寄ったりですね。


# 早速本題。GISってなぜ難しいの？
### 業務の脇役だから
端的に言うと、GISは**「道具」**だと思っています。だって、GISを使いこなすことが業務の目的になることはそんなにないです。
あえて業務の目的に近いことを挙げるとしたら、地図を作成して公開することかと思います。が、ただ地図を作って公開しても、それで終わりってことはまずありえません。（そうだとしても、おそらくギャラが安いだろうかと・・・）
たいていGISソフトが持っている機能から考えると、位置情報のビジュアライズをしたり解析・集計して、ユーザの業務プロセスを支援することが本来の目的かと思います。地図描いて公開するだけなら、マッピングソフトかドローイングソフトだけで間に合うかも？

### 使用頻度が低いから
GISは他のソフトと違って相対的に使用頻度が少ないかと思います。GISのベンダーや地図製作会社、特定組織のGIS担当者、GISの研究者を除いては、毎日のように使用する人ってそんなにいないのではないでしょうか。
GISユーザによっては、データを他の形式に変換することにしか使わなかったりとか。

### 座標系とか測地系とか
GISの基礎の基礎に座標系とか測地系のことがあります。地理学とか測量とかの知識があったらそこまで抵抗ないかもしれませんが、そうでない人は大抵理解に苦しみます。教え方次第では誤解を招き、それが正しく設定されていないデータを作られることもしばしばです。
簡単にいえば、座標系や測地系を「設定」するのと「変換」することの違いとか意義がわかっていないと駄目なのです。
そんな理解が難しいのが基礎の段階に出てきたら、そりゃぁ、GISは難しい、敷居が高いもんだと思いますよね・・・
OSMのマッピング教える時はこれを教える必要がないので、だいぶ楽に思えますｗ

### GIS用語に、ソフト固有の用語がたくさん
GISは半端なく横文字多いです。それが画面上やヘルプ、ドキュメントに出てくるので、使わざるを得ません。
そして、ユーザさんもその用語を覚えないと、自分が困っていることを正確に相談することができません。
たまにしか使わない人にとっては、脳みそにそれらを収納するのは大変でしょう。
日本でよく使われるGISソフトのほとんどは日本純正のものでなく、日本語にローカライズして使うことになるんですが、たいていは英語をカナ読みにした用語が割り当てられちゃいます。


**結論：そんなにヘビーに使うもんでないのに、簡単に扱えない！** :scream: 


# 最後に
そんな難しいGISでも、ユーザさんの数は着実に増え始めていると思います。それはGISの需要があるためでもあるし、FOSS4G や OSM のような「フリーで使える」ソフトやマップ、サービスの活躍に因るところもあるでしょう。
だからいろんな人がGISを学ぼうとし、その度にセミナー講師など教え手が悪戦苦闘するのです。
**GISは脇役なので、短時間で習得できるものでなければ好んで使ってもらえません。でないと、業務が効率化できるというITの魅力の恩恵を受けることができないからです。**
手っ取り早く理解してもらうノウハウはある程度持っているんですが、ちょっと疲れてきたのでここいらで止めます。
続きは来年かな。。。

後味悪いですが、皆さん、良いお年をお迎え下さい。:earth_asia:
[Docker]docker inspcetコマンドでコンテナの情報を確認する

メモ

# 参考

+ [docker inspect](https://docs.docker.com/engine/reference/commandline/inspect/)
+ [docker inspectでDockerコンテナの情報を取得する - $shibayu36->blog;](http://blog.shibayu36.org/entry/2013/12/28/145019)

# 環境

```bash
$docker ps -a|grep php
c4b8b85ba97c        php:fpm                          "docker-php-entrypoin"   2 hours ago         Up 2 hours          9000/tcp                      ecs-awseb-elasticBeanstalk2-env-multi2-ajn48eitej-1-php-app-d693be93a7babe92cb01
```

事前にコンテナIDを確認しておく

# --format オプションについて

Go の  [text/template package](https://golang.org/pkg/text/template/)を使っているようで詳細はこちらを見れば分かるようです。


# やってみる

## 全部見る

```bash
$docker inspect c4b8b85ba97c

# less で確認しながら
$docker inspect c4b8b85ba97c |less
```

## コンテナで利用しているIPアドレス取得

```bash
$docker inspect --format='{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' c4b8b85ba97c
172.17.0.2
```

## コンテナに設定されている環境変数の取得

```bash
$docker inspect --format='{{range .Config.Env}}{{println .}}{{end}}' c4b8b85ba97c
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
PHPIZE_DEPS=autoconf            file            g++             gcc            libc-dev                 make            pkg-config              re2c
PHP_INI_DIR=/usr/local/etc/php
PHP_EXTRA_CONFIGURE_ARGS=--enable-fpm --with-fpm-user=www-data --with-fpm-group=www-data
PHP_CFLAGS=-fstack-protector-strong -fpic -fpie -O2
PHP_CPPFLAGS=-fstack-protector-strong -fpic -fpie -O2
PHP_LDFLAGS=-Wl,-O1 -Wl,--hash-style=both -pie
GPG_KEYS=A917B1ECDA84AEC2B568FED6F50ABC807BD5DCD0
PHP_VERSION=7.1.0
PHP_URL=https://secure.php.net/get/php-7.1.0.tar.xz/from/this/mirror
PHP_ASC_URL=https://secure.php.net/get/php-7.1.0.tar.xz.asc/from/this/mirror
PHP_SHA256=a810b3f29c21407c24caa88f50649320d20ba6892ae1923132598b8a0ca145b6
PHP_MD5=cf36039303c47f493100afea522a8f53
```
Pythonでpdbを使ったデバッグ

# pdbを使ったPythonコードのデバッグ

`import pdb`とか使えますが，ここではソースコードに変更を加えずにデバッグする方法を紹介します．
よく使うコマンドだけを取り上げます．

# 始め方

```bash
$ python -m pdb XXXXX.py
```
または

```bash
$ python3 -m pdb XXXXX.py
```

# 実行例

## 実行するプログラムの例

```Python:hello.py
msg = "Hello world"

def hello(txt):
	print(txt)

hello(msg)
print("Done.")
```

- pdbの実行例

```bash
$ python3 -m pdb hello.py
> /path/to/current/directory/hello.py(1)<module>()
-> msg = "Hello world"
(Pdb)
```

## pdbの使い方
`(Pdb)`に続いてコマンドを入力することで，デバッグ作業を進めることができます．

- よく使うコマンド

| コマンド | 機能 |
|:--|:--|
| b(reak) [行数または関数名] | 行または関数にブレークポイントをうつ |
| c(ont(inue)) | 次のブレークポイントに当たるまで実行 |
| s(tep) | 現在の行を実行(関数呼び出しで止まる) |
| n(ext) | 現在の行を実行(関数呼び出しであれば関数を実行) |
| q(uit) | デバッガを終了 |

コマンドで，かっこ内の文字は省略できます．

## 実行例

```bash
$ python3 -m pdb hello.py
> /path/to/current/directory/hello.py(1)<module>()
-> msg = "Hello world"
(Pdb) b 6
Breakpoint 1 at /path/to/current/directory/hello.py:6
(Pdb) c
> /path/to/current/directory/hello.py(6)<module>()
-> hello(msg)
(Pdb) s
--Call--
> /path/to/current/directory/hello.py(3)hello()
-> def hello(txt):
(Pdb) s
> /path/to/current/directory/hello.py(4)hello()
-> print(txt)
(Pdb) n
Hello world
--Return--
> /path/to/current/directory/hello.py(4)hello()->None
-> print(txt)
(Pdb) c
Done.
The program finished and will be restarted
> /path/to/current/directory/hello.py(1)<module>()
-> msg = "Hello world"
(Pdb) q
$ 
```

# 参考
http://docs.python.jp/3/library/pdb.html
CGIHTTPRequestHandlerを使って躓いた

#1. やりたいこと、共有したいこと
　簡単なWebアプリケーションを作ってみたいなと思い、Python3を使いCGIが使えるようにしたいと思いました。（この表現正しいかまだ分からないので、間違ってたらご指摘ください）
　本当に、Python3もWebのバックエンドも初心者中の初心者なんですが、CGIを使うときに躓いたところがあったので、共有したいと思います。
　環境はMacOSXで、Python3.6.0を使用しています。

#2. 参考になるページ
　挑戦する前に、プロの方がいろんなノウハウを共有してくださってますので、検索しました。Python3を勉強する上で、結構一貫して実践しながら進められるので、以下のサイトがおすすめです。
http://coreblog.org/ats/stuff/minpy_web/03/02.html
　このURLは、CGIに関して書かれていますが、連載（？）シリーズ（？）になっているので、幅広くわかります。

#3. 早速書いてみた、厳密には動かしてみた
##3.1.ファイルとフォルダを用意する
ここを参考にコードを書きました。まずは、必要なフォルダとファイルを用意します。
server.py
index.html
python
 |-test.py

##3.2.コードを書く
ソースコードは、前述した
http://coreblog.org/ats/stuff/minpy_web/03/02.html
のコードをそのまま使いました。著作権に触れると嫌なので、ここでは書きません。このページ参照してください。

##3.3.動かしてみる
残念ながら動きませんでした。こんな感じでソースコードがそのままwebに出てきます。
![スクリーンショット 2016-12-28 22.33.45.png](https://qiita-image-store.s3.amazonaws.com/0/81253/cbd17623-dd6e-3161-6e62-a23901388d9c.png)

##3.4. なぜ動かないのか
　Python3で、CGIをきちんと理解して使われている方は、「こんな初歩的なミス」と思われると思いますが、僕にはわからなかったんですね。調べても、それと言ったものが出てこないので、仕方がなくマニュアルを見ました。
https://docs.python.org/3.6/library/http.server.html?highlight=cgihttprequest#http.server.CGIHTTPRequestHandler
すると、cgiが動くデフォルトディレクトリというのがあってそれは、"cgi-bin"または"htbin"だよ。と言っていますね。
　つまり、今回"python"というディレクトリの下のファイルを実行した（リクエストした後、無事に実行されてレスポンスが返ってきた）のが間違えだったのです。
　この"python"のディレクトリ名を"cgi-bin"にすると、きちんと動きました。
![スクリーンショット 2016-12-28 22.39.30.png](https://qiita-image-store.s3.amazonaws.com/0/81253/6ba074df-4a5b-4238-6097-245f24eb93c0.png)

#4.おまけ
　けど、この「指定されたディレクトリ名の下でしか、cgiを動かせない」と言うのは気に入らないですよね。（僕だけかもしれませんが）
　そこで、このディレクトリ名を指定できる方法がマニュアルに書いてあるので、紹介したいと思います。

```python:server.py
import http.server

server_address = ("", 8000)
handler_class = http.server.CGIHTTPRequestHandler #1 ハンドラを設定
handler_class.cgi_directories = ["/python"]
server = http.server.HTTPServer(server_address, handler_class)
server.serve_forever()
```

ソースコードは、上のとおりです。何が違うかというと

`
handler_class.cgi_directories = ["/python"]`

こいつですね。このように指定してあげると、pythonのディレクトリの下でも、cgiを使えるようになります。

#5.最後に
　「ここ間違ってるよ！」とか「ここやばいよ！」というのがあれば、ご教授いただけると幸いです。
　この記事に直接メッセージいただけると助かります。よろしくお願いします。
　
#6.参考URL
[「みんなのPython Webアプリ編」のCGI部分](http://coreblog.org/ats/stuff/minpy_web/03/02.html)
[Python 3.6 manual](https://docs.python.org/3.6/library/http.server.html?highlight=cgihttprequest#http.server.CGIHTTPRequestHandler)
TwitterでのOAuth認証

####まえがき
Twitter4Jを使ってTwitterクライアントを作ろうと思ったのですが、OAuth認証についての知識が皆無だったので少しお勉強してみました

####TwitterのOAuth認証
Twitterにはいくつかの認証がありますが、App-Only Authenticationでは、ツイートが呟けなかったり、DMの機能が制限されたりするらしいので今回は通常のOAuthで挑戦します。

######アプリケーションの登録
https://apps.twitter.com/
Twitterのデベロッパーサイトからアプリケーションを登録してAPIキーを取得しておく。

######OAuth認証
Twitterでは、OAuth認証にアクセストークンと呼ばれる鍵を使って処理をします。  
なので、このアクセストークンを取得する必要があります。
アクセストークンを取得するのに必要なものが、リクエストトークン。
リクエストトークンを取得するのに必要なものが先に取得したAPIキーです。

APIキーを使ってリクエストトークン取得 → URLで認証画面へ飛び認証(PIN入力あり) → アクセストークン取得
という手順です

######サンプル
```java
 public class OAuth {
    //フィールド
    OAuthAuthorization OAuth;
    RequestToken reqToken;
    
    //コンストラクタ
    OAuth(Configuration conf) throws TwitterException{
        OAuth = new OAuthAuthorization(conf);
        OAuth.setOAuthConsumer(conf.getOAuthConsumerKey(), conf.getOAuthConsumerSecret());
        //APIキー登録
        reqToken = OAuth.getOAuthRequestToken();
    }

    public void Auth() throws IOException{//URL取得、ブラウザ起動
         String url = reqToken.getAuthenticationURL(); //URL取得
         Desktop desktop = Desktop.getDesktop();
        
         try {
            URI uri = new URI(url);
            desktop.browse(uri);
         } catch (URISyntaxException ex) {
            Logger.getLogger(OAuth.class.getName()).log(Level.SEVERE, null, ex);
         }
    }
    
    public AccessToken getToken(String pin){//PINによるToken取得
        AccessToken accessToken = null;
        while(accessToken == null){
            try{
                if(pin.length() > 0){
                    accessToken = OAuth.getOAuthAccessToken(reqToken, pin);
                }else{
                    accessToken = OAuth.getOAuthAccessToken();
                }
            }catch(TwitterException http){
                if(http.getStatusCode() == 401){
                    System.out.println("PINが正しくありません");
                    break;
                }
            }
        }
    return accessToken;
    }
}

```
####まとめ
認証だけならできました
後は、XMLファイルにアクセストークン登録させて複数アカウントにも対応できるようにできるかなって感じです
Raspberry Pi 2 B+ にArch Linuxを入れる

#どんどん追記していきます。
※RPI・・・ラズベリーパイのこと
#1．インストール
OSのtarを下のサイトからDLします。
http://os.archlinuxarm.org/os/ArchLinuxARM-rpi-2-latest.tar.gz

SDカードへパーティションを作るのは、本家サイトに丁寧に書いてあったのでここでは省略します。（ログが残ってない）
https://archlinuxarm.org/platforms/armv7/broadcom/raspberry-pi-2

今回は手持ちのノーパソ（CentOS6.8）でパーティションを作りました。何度か失敗しましたが、fdisk内で全てやり直せました。

#2．いざ起動
本家サイトには「SDカードを挿したらコンソールなりSSHなりで接続してね！」とありますが、いつまでたってもPINGが届きません。試しにRPIにHDMIを挿してみると画面が黒い・・・。
一度USB電源を引っこ抜いて差し直したらきちんと画面に表示されました。（起動時からHDMI挿さないと出力されないとか？）

後日、電源を入れると再び繋がらない。HDMIを直接さしてみても画面は真っ暗で、もう一度上に書いてある手順を試したら画面が表示されました。この辺は暇な時に懸賞しようと思います。

##2-1．sudoのインストール
入ってなかった？

```
$pacman -S sudo
```

##2-2．IP固定
ifconfigするとeth0が立ち上がってるのですが誰が立ち上げたのかが分からない・・・。netctlもdhcpcdも起動してないしsystemd-networkはなんか見当たらない。
IP固定のやり方はいくつかあるみたいですが、今回はdhcpcdを使います。これも本家に載っています。

以下を追記。

```/etc/dhcpcd.conf
interface eth0
static ip_address=192.168.0.10/24
static routers=192.168.0.1
static domain_name_servers=192.168.0.1
```

dhcpcdサービスの起動／自動起動

```
$systemctl start dhcpcd
$systemctl enable dhcpcd
```
##2-3．IPv6の無効化

職業病です。
以下のファイルを追加。

```/etc/sysctl.d/ipv6_disable.conf
net.ipv6.conf.all.disable_ipv6 = 1
```

##2-4．iptablesの設定

正直iptableの設定に自信がないです。

```/etc/iptables/iptables.rules
*filter
:INPUT DROP [0:0]
:FORWARD DROP [0:0]
:OUTPUT ACCEPT [0:0]
-A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
-A INPUT -p icmp -j ACCEPT
-A INPUT -m conntrack --ctstate RELATED,ESTABLISHED -j ACCEPT 
-A INPUT -i lo -j ACCEPT
-A INPUT -m state --state NEW -m tcp -p tcp -s 192.168.0.0/24 -d 192.168.0.0/24 --dport 22 -j ACCEPT
-A INPUT -p tcp -j REJECT --reject-with tcp-reset 
-A INPUT -p udp -j REJECT --reject-with icmp-port-unreachable 
-A INPUT -j REJECT --reject-with icmp-proto-unreachable 
-A INPUT -j REJECT --reject-with icmp-host-prohibited
-A FORWARD -j REJECT --reject-with icmp-host-prohibited
COMMIT
```

デフォルトでオフみたいなので、自動起動まで設定しておきます。

```
$systemctl start iptables
$systemctl enable iptables
```

##2-5．pacmanの設定
※アーキテクチャをはき違えて試行錯誤してたので、全体的に書き直しました。

ミラーを変えます。
自分の場合は、以下が標準になっていました。

```/etc/pacman.conf
[core]
Include = /etc/pacman.d/mirrorlist
[extra]
Include = /etc/pacman.d/mirrorlist
[community]
Include = /etc/pacman.d/mirrorlist
[alarm]
Include = /etc/pacman.d/mirrorlist
[aur]
Include = /etc/pacman.d/mirrorlist
```

```/etc/pacman.d/mirrorlist
Server=http://mirror.archlinuxarm.org/$arch/$repo
```

/etc/pacman.d/mirrorlistの中にはたくさんのリポジトリがあります。
これも公式に書いてありますが、この中から最速のURLを探します。

１．ミラーリストのコピーを作成し、そのコピー内のテストしたいURLのコメントを全て外します。
２．以下を実行

```
$rankmirrors -n 6 mirrorlist.bak > fastestmirrorlist
```

結果は以下の通り。（※つくばURLは無視してください。）

```
Server = http://mirror.archlinuxarm.org/$arch/$repo
Server = http://ftp.tsukuba.wide.ad.jp/Linux/archlinux/$repo/os/x86_64
Server = https://za.mirror.archlinuxarm.org/$arch/$repo
Server = http://au.mirror.archlinuxarm.org/$arch/$repo
Server = http://br.mirror.archlinuxarm.org/$arch/$repo
Server = http://br2.mirror.archlinuxarm.org/$arch/$repo
```

オーストラリアとかブラジルとかありますが、今回は標準リポジトリのまま使用しようと思います。

#3．今後について
VoIPサーバにするつもりです。Mumbleを乗せる予定ですが、その理由や手順やらはまた後日。
（追記）とある事情によりVoIPサーバは無理となったので、NASにしようと思います（sambaかな）。
cocoapodsのセットアップ時のエラー対応

## エラー内容
```
$ pod setup
Setting up CocoaPods master repo
[!] /usr/local/bin/git clone https://github.com/CocoaPods/Specs.git master

Cloning into 'master'...
error: RPC failed; curl 56 SSLRead() return error -9806
fatal: The remote end hung up unexpectedly
fatal: early EOF
fatal: index-pack failed 
```

## 対応方法
- 移動する

```
$ cd ~/.cocoapods/repos
```

- githubからcloneする

```
$ git clone https://github.com/CocoaPods/Specs.git master
```

- setup成功するようになる

```
$ pod setup
CocoaPods 1.2.0.beta.1 is available.
To update use: `sudo gem install cocoapods --pre`
[!] This is a test version we'd love you to try.

For more information, see https://blog.cocoapods.org and the CHANGELOG for this version at https://github.com/CocoaPods/CocoaPods/releases/tag/1.2.0.beta.1

Setup completed
```

## 感想
何回かcocoapodsのセットアップしたけどこのエラーは初めて。
通信環境悪かったのかな。。
参考になれば幸いです。それではﾉｼ
ゲストOSの時刻をホストOSと同期させるために Guest Additions をインストールする

## CentOSをインストール
- 略

## Guest Additionsをインストール
#### アプリケーションのインストール
```
# yum update
# yum install gcc perl kernel-devel
# reboot
```

#### Guest Additions のインストール
```
# mount /dev/cdrom /media/
# sh /media/VBoxLinuxAdditions.run
# reboot
```

## CentOSの時刻調整
```
(ホストOSと30秒ずれたら時刻補正する)
# /usr/sbin/VBoxService --timesync-set-threshold 30000

(再起動しても上記を有効にする)
# VBoxControl guestproperty set "/VirtualBox/GuestAdd/VBoxService/--timesync-set-threshold" 30000
```
CSP環境でVue.jsを使う

# さきにまとめ
CSP環境（chrome拡張等）でVue.jsを使うときは
[Vue.js　Github　CSPブランチ](https://github.com/vuejs/vue/tree/csp/dist) からコードを取ってこよう.

# はまったこと
Vue.jsを使って簡単にChrome拡張を初めて作ろうとした.

```html:popup.html
<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
</head>
<body>
<!-- CONTENT HERE -->
<div id="app">
    {{ message }}
</div>

<!-- CONTENT END -->
<script src="assets/vendor/vue.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
```
こんな感じで直接vueのソースを拾ってきてテンプレートを直書きした.

```js:main.js
var app = new Vue({
  el: '#app',
  data: {
    message: 'hogehoge'
  }
})
```
これでささっと動くと思ったら

```
It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval.
The template compiler cannot work in this environment.
Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions
```
このようなエラーが出てChromeさんに怒られて何も表示されなかった.
この警告に続いてinvalid expressionとか出てきたから構文間違えたかと思ってそっちのエラーばかり見て時間を費やしたけど直らない

# 解決
載せたエラーをググったら分かった
どうやらChrome拡張とかだとCSPなるもの [解説](http://oxynotes.com/?p=8895)　が適用されてて通常配布されてるバイナリが使えないらしい.

CSP版を落としてねって書いてあったので[Githubのページ](https://github.com/vuejs/vue/tree/csp/dist)からダウンロードして置き換えた.

**結果動かすことができた**

# 学んだこと
一つのエラーに固執せず複数ちゃんと見るようにしないと時間を無駄にする.
Chromeで拡張作るときのはまりどころについてひとつ学んだ.
jsdoでshadertoy sandbox その8

#概要
shadertoyのコードをjsdoでthree.jsを使って、実装してみた。
pure webglより、コードは、短い。たった、55行。

#写真
![](http://jsdo-static-contents.s3.amazonaws.com/images/capture/S/H/a/SHaL.jpg?t=1482928100)

#環境
three.js r83

#成果物
http://jsdo.it/ohisama1/SHaL

#仕掛け
THREE.RawShaderMaterialで、shadertoyのシェーダースクリプトを使っています。
THREE.BufferGeometryで、iResolution、iGlobalTime、iFrameを流し込んでいます。
インクリメントの挙動　Javaの問題をTypeScriptにしてみる3-4

次のプログラムの実行結果を選びなさい

```java:java.java
public class Main{
 public static void main(String[] args){
   int a = 10;
   int b = a++ + a + a-- - a-- + ++a;
   System.out.println(b);
 }
}
```


A.7が表示される
B.32が
C.33
D.43
E.コンパイルエラーが発生する
F.実行時に例外がスローされる

答えはbです。
前置と後置のインクリメント演算子の挙動についての問題です。

++aでは、演算が行われる前にa=a+1がされます。a++では演算の後にa=a+1がされます。
よって
   a = 10;
   b = a++ + a + a-- - a-- + ++a;

   a = 11;
   b = 10 + a + a-- - a-- + ++a;

   a = 11;
   b = 10 + 11 + a-- - a-- + ++a;

   a = 10;
   b = 10 + 11 + 11 - a-- + ++a;

   a = 9;
   b = 10 + 11 + 11 - 10 + ++a;

   a = 10;
   b = 10 + 11 + 11 - 10 +10;

この結果答えは32になります。

これをTypeScriptでやると

```ts:TypeScript.ts
   var a:number = 10;
   var b:number = a++ + a + a-- - a-- + ++a;
   console.log(b);
```

このようになります。
インクリメントなどの演算子の挙動は言語間でおおよそ統一されてますので、同じように使っていくことができます。
2016年 社内で貸し出した書籍まとめ

#はじめに
本棚を見れば、その人の人となりがわかるといいます。

エンジニアにとって情報はネットを通じればある程度入手可能ですが、
体系的な情報を取得したいとなれば、書籍を読んだ方効率的だと考えています。

そこで、会社の本棚を急に充実させるのは、予算や手続きの関係でなかなか難しいので、
自分の持っている書籍を貸し出すようにしました。

現在では8人ほどに貸し出しを行なっており、
管理できなくなってきたことと、他の人にもお勧めできる書籍なので投稿致しました。

#書籍

##技術系
[世界でもっとも強力な9のアルゴリズム](https://www.amazon.co.jp/dp/482228493X/)

[リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック](https://www.amazon.co.jp/dp/4873115655/)

[EFFECTIVE JAVA](https://www.amazon.co.jp/dp/4621066056/)

[新装版 リファクタリング―既存のコードを安全に改善する― ](https://www.amazon.co.jp/dp/427405019X/)

[増補改訂版Java言語で学ぶデザインパターン入門](https://www.amazon.co.jp/dp/4797327030/)

[ノンデザイナーズ・デザインブック](https://www.amazon.co.jp/dp/4839955557)

[Web制作の現場で使うjQueryデザイン入門[改訂新版]](https://www.amazon.co.jp/dp/4048913913)

[７つの言語 ７つの世界](https://www.amazon.co.jp/dp/4274068579/)

[体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践](https://www.amazon.co.jp/dp/4797361190/)

[現場のインフラ屋が教える インフラエンジニアになるための教科書](https://www.amazon.co.jp/dp/4802610432/)

[NOSQLの基礎知識 (ビッグデータを活かすデータベース技術)](https://www.amazon.co.jp/dp/4897978874/)

[人工知能は人間を超えるか](https://www.amazon.co.jp/dp/B00UAAK07S/)

##マネンジメント系
[Team Geek ―Googleのギークたちはいかにしてチームを作るのか](https://www.amazon.co.jp/dp/4873116309/)

[イシューからはじめよ―知的生産の「シンプルな本質」](https://www.amazon.co.jp/dp/4862760856/)

[「納品」をなくせばうまくいく ソフトウェア業界の“常識"を変えるビジネスモデル](https://www.amazon.co.jp/dp/4534051948/)

[みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善ガイド](https://www.amazon.co.jp/dp/4802510209/)

[いまどきエンジニアの育て方](https://www.amazon.co.jp/dp/4863541929/)

[ワーク・ルールズ！―君の生き方とリーダーシップを変える](https://www.amazon.co.jp/dp/4492533656/)

##エモい系
[伝説の新人 20代でチャンスをつかみ突き抜ける人の10の違い](https://www.amazon.co.jp/dp/4087860213/)

[プログラマが知るべき97のこと](https://www.amazon.co.jp/dp/4873114799/)

[ゲームクリエイターが知るべき97のこと](https://www.amazon.co.jp/dp/4873115701/)

[モチベーション3.0 持続する「やる気!」をいかに引き出すか](https://www.amazon.co.jp/dp/4062816199)

[GIVE & TAKE 「与える人」こそ成功する時代](https://www.amazon.co.jp/dp/4837957463/)

[強いチームはオフィスを捨てる](https://www.amazon.co.jp/37/dp/4152094338/)

[ラグビー日本代表を変えた「心の鍛え方」](https://www.amazon.co.jp/dp/4062729296/)

[嫌われる勇気―――自己啓発の源流「アドラー」の教え](https://www.amazon.co.jp/dp/4478025819/)

[幸せになる勇気―――自己啓発の源流「アドラー」の教えII](https://www.amazon.co.jp/dp/4478066116/)

[0ベース思考---どんな難問もシンプルに解決できる](https://www.amazon.co.jp/dp/4478029067/)

[仕事は楽しいかね?](https://www.amazon.co.jp/dp/4877710787/)
転職先を探そう！

下請けCOBOLERとして生きていた頃のノウハウ Advent Calendar 2016の22日目ぐらいの記事です。

今日までろくでもない記事ばかり上げてますが、大規模COBOL現場に派遣される良い点がすこしあります。

それは、色んな会社の人に会えることです。

ITの世界では人の能力は一緒にやってみないと分からないというのがあります。
経歴書めっちゃ読んで10分程度面接したところで能力なんて分かりません。
COBOL現場での能力というのはニアリーイコールで性格だと思います。
(困ったときに人に訊けるか、チームで仲良く出来るか、愛想良く出来るか、指示をきちんと訊けるか・・)

その辺を上手くやっていると、もしかしたら雇い主の会社に転職して給料アップも可能ですし、他に今よりも良い会社もあるかも知れません。

そう言う点ではCOBOL現場で頑張ることも良いことかも知れません。

ちなみに最近ではハッカソンなどをきっかけに転職する人もいるみたいですので、別に職場で頑張らなくても転職の方法は結構あるんじゃないかと思ってます。(筆者は転職経験者ではありませんが)
人間性を破壊するとんでもコードの読み方

下請けCOBOLERとして生きていた頃のノウハウ Advent Calendar 2016の20日目ぐらいの記事です。


##初めてCOBOLの読み方について書きます

と、書きましたが、COBOLというよりクソコードの読み方です。
ひどい書き方なんてものはCOBOLだけの話ではなくすべての言語で書くことが出来ると思います。

まぁとにかくCOBOLは庶民が初めて対峙したプログラム言語の1つなのでひどいものになってしまうのは仕方ないと思います。

とはいえ、21世紀になった今でもそれらを読んで保守しなければなりません。

ちなみに自分が管理していたシステムはとんでもないコードで
ざっくりこんな感じです。(ちなみに2010年代につくられたにも関わらず、メイン処理一本に何万行も詰め込んでモジュール分割していないとんでもソースでした！)
if then
　数百行
else
　数百行
　　if then
     　めっちゃながい
　　　　サブルーチンへ→もちろんめっちゃながい
　　else
　　　　めっちゃながい
   if then
    なんかしょり
　　else
　　　なぜか上と似たようなことをしている(関数化してない)

どこまでがifでどこからがelseかさっぱり分かりません。

変数も（ちなみにCOBOLだと変数ではなく項目と呼びます！）上でしか宣言できなかったり　wk1　wkー2　など意味不明な項目で溢れかえってます。

自分は読むときにどうするかというと

エクセルに貼り付けてました。

そしてIF文単位にセルに色を変えたり、グループ化してたたみ込んだり
紙にだいたいの処理を絵にしたりしてました。

紙に書くというのは結構有効でざっくり処理を理解することに役立ちます。
また、意味不明な項目名もこれはこういう用途だとメモを取っておくと良いと思います。

大切なことは、過去のプログラマー達は何か意味があって意味不明なことをしていることです。

過去のプログラマーと対話するとき、大切なことはこの処理はなんの処理でなにをしようとしたのか、こういう風に作るんじゃないかという推測をすることです。


まぁ、こんなスキルがあっても仕方ないので、クソコードを読まされても、自分はましなコードを書くぞって決意をするぐらいで、本当に良いコードはそれを読まなければ分かりません。