OmniAICreator/Qiita-1.07M huggingface dataset:
UMD を babel-preset-es2015 で transpile すると UMD として機能しなくなる

例えば次のような js (UMD script) があったとします。

```js:umd.js
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.foo = factory());
}(this, (function () {
  'use strict';

  class foo {}

  return foo;
})));
```

これを babel の es2015 preset で変換すると次のようになります。

```js:transpiled.js
'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

(function (global, factory) {
  (typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : global.foo = factory();
})(undefined, function () {
  'use strict';

  var foo = function foo() {
    _classCallCheck(this, foo);
  };

  return foo;
});
```

ここで問題は、global パラメータに渡っている `this` の部分です。この this はスクリプトのトップレベルの this のため、babel の変換をかけると、undefined に置き換えられます (ES module のトップレベルの this は undefined になる、という仕様があるためです。)

UMD はこのトップレベルの this に依存して、グローバル変数にモジュールをエクスポートしているため、この変換がかかると UMD として機能しなくなってしまいます。

# 対応策

この現象を回避するためには、以下のように es2015 プリセットに対して下のようにオプションを渡すことで現象を回避することができます。

```json:.babelrc
{
  "presets": [
    [   
      "es2015",
      {   
        "modules": false
      }   
    ]   
  ]
}
```

上のように `{ modules: false }` オプションを与える事で、UMD スクリプトが ES module として解釈される事を防ぐことができ、トランスパイルの結果は下のようになります。

```js:transpiled.js
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

(function (global, factory) {
  (typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : global.foo = factory();
})(this, function () {
  'use strict';

  var foo = function foo() {
    _classCallCheck(this, foo);
  };

  return foo;
});
```

このように `this` が消されることが防がれるため、UMD としての機能を維持することができます :sparkles: :thumbsup: 

参考:
- https://github.com/babel/babel/issues/5082
木構造の親または子を再帰的に取得する


注意: 以下のクエリはPostgreSQLにより動作確認を行っています。

```sql
postgres=# select version();
                           version
-------------------------------------------------------------
 PostgreSQL 9.6.1, compiled by Visual C++ build 1800, 64-bit
(1 行)
```

***

![木構造.PNG](https://qiita-image-store.s3.amazonaws.com/0/105859/a9415d47-f51b-b384-73f1-00da391328aa.png)

上のような木構造のデータを次のように表現したとします。

```sql
     id     |   parent
------------+------------
 A          |
 B          | A
 C          | A
 D          | C
 E          | C
 F          | E
 G          | E
 H          | G
 I          | G
```

つまり自分自身と自分自身の親を示す情報を隣接リスト風に持っておくわけですね。__このような構造のテーブルはナイーブツリー(Naive Tree)などと呼ばれ、有名なアンチパターンのひとつ__なのですが、アンチパターンだからといって設計を見直したりなどできないのが「システムエンジニア」の悲しいところ。それはさておき、親や子を再帰的に取得するクエリは「再帰クエリ」(with-recursive)を利用して次のように書くことができます。

```sql
-- treeテーブルを生成&初期化する。
create table tree (
	id char(10) not null primary key,
	parent char(10) 
);
insert into tree values
	('A', null),
	('B', 'A'),
	('C', 'A'),
	('D', 'C'),
	('E', 'C'),
	('F', 'E'),
	('G', 'E'),
	('H', 'G'),
	('I', 'G');

-- id = 'I'の先祖をたどるクエリ。
with recursive ancestor (depth, id, parent) as (
		select 0, tree.id, tree.parent from tree where tree.id = 'I'
	union all
		select 
			ancestor.depth + 1,
			tree.id,
			tree.parent
		from ancestor, tree
		where ancestor.parent = tree.id)
select depth, id from ancestor order by depth;

/*
 depth |     id
-------+------------
     0 | I
     1 | G
     2 | E
     3 | C
     4 | A
(5 行)
*/

-- id = 'C'の子供の一覧を取得するクエリ。
with recursive child (depth, id, parent) as (
		select 0, tree.id, tree.parent from tree where tree.id = 'C'
	union all
		select
			child.depth + 1,
			tree.id,
			tree.parent
		from tree, child
		where tree.parent = child.id)
select depth, id from child order by depth;

/*
 depth |     id
-------+------------
     0 | C
     1 | D
     1 | E
     2 | F
     2 | G
     3 | H
     3 | I
(7 行)
*/
```

今回は単なる`select`だったので、簡単にクエリを書くことができましたが、`update`や`delete`となると途端に複雑化します。また再帰を利用するため、階層が深くなってくるとパフォーマンスのことも考える必要がありそうです。一見するとシンプルだが、実際の運用はかなり大変。このあたりがアンチパターンたるゆえんでしょうか。

なおMySQLのように「再帰クエリ」をサポートしていないDBMSを利用している場合は――あきらめましょう(´・ω・｀) とはいえ「再帰クエリ」は標準SQLの反中なので、将来的サポートされる可能性が高い構文ではあります。
assertWPErrorでPHPUnitでのユニットテスト中にWP_Errorをテストする



`WP_UnitTestCase`を利用している場合、`WP_Error`オブジェクトを正しく返して居るか否かのテストに`assertWPError`が利用できます。


```php
        function test_is_wp_error() {
                $test = new WP_Error( 'something happen' );
                $this->assertWPError( $test );
        }
```


ちなみに`assertNotWPError`を使うと、「WP_Errorではないこと」をテストできます。

```php
	function test_is_not_wp_error() {
		$test = 'nothing happen';
		$this->assertNotWPError( $test );
	}
```

こちらはWordPress4.5.4だと`PHP Fatal error:  Call to undefined method`が出ましたので、利用には要注意です。

## おまけ：両関数のソースコード

ソースコード：http://develop.svn.wordpress.org/trunk/tests/phpunit/includes/testcase.php

```php
	function assertWPError( $actual, $message = '' ) {
		$this->assertInstanceOf( 'WP_Error', $actual, $message );
	}

	function assertNotWPError( $actual, $message = '' ) {
		if ( is_wp_error( $actual ) && '' === $message ) {
			$message = $actual->get_error_message();
		}
		$this->assertNotInstanceOf( 'WP_Error', $actual, $message );
	}
```

PHPUnitの[assertInstanceOf()と、assertNotInstanceOf()](https://phpunit.de/manual/current/ja/appendixes.assertions.html#appendixes.assertions.assertInstanceOf)のラッパーになっています。
Django 静的ファイル (static) 関係の設定まとめ

# 環境
Python 3.4.3
Django 1.10
uwsgi
Nginx
CentOS7.2@さくらVPS

# なぜ

Djangoを本番環境にデプロイするときに静的ファイル関係の設定でいろいろはまったので，まとめる．
基本的に以下の5つあるようだが，上から3つだけ使用していたので，それらに関してまとめる．
ちなみに以下のそれぞれの定数はsetting.pyで設定する．

+ STATIC_ROOT
+ STATIC_URL
+ STATICFILES_DIRS (Prefixes (optional))
+ STATICFILES_STORAGE
+ STATICFILES_FINDERS

> https://docs.djangoproject.com/en/1.10/ref/settings/#id17

# STATIC_ROOT
これを正しく設定しておかないと本番環境では静的ファイルがうまく動かなかった．
実際に管理サイトや通常サイトのcssや画像などが適用されなかったり，表示されなかった．

自分の場合は，以下のように設定してある．
STATIC_ROOTが指すのは，実際のLinuxでの絶対パスになる．

```python:setting.py
# Fetch Django's project directory
DJANGO_ROOT = dirname(dirname(abspath(__file__)))
# Fetch the project_root
PROJECT_ROOT = dirname(DJANGO_ROOT)

STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')　# /path/to/project_directory/static
```

>デプロイ環境のためにcollectstaticが静的ファイルを集めるディレクトリへの絶対パス
> The absolute path to the directory where collectstatic will collect static files for deployment.

>Example: "/var/www/example.com/static/"

# STATIC_URL¶
とりあえず /static/にしておけばよい．
すると静的ファイルを domain/static/　に読みに行ってくれるようだ．

> STATIC_ROOTのなかに置かれた静的ファイルを参照するときに使われるURL
> URL to use when referring to static files located in STATIC_ROOT.
> Example: "/static/" or "http://static.example.com/"


# STATICFILES_DIRS¶
たぶんアプリごとに追加の静的ファイルがあるようなときに設定する必要がある．
自分の環境ではひとまずアプリごとの静的ファイルは必要なかったので，設定せず．
Wordさんの疲れ表示スクリプト

# はじめに

[Wordさんは今日もおつかれです](http://qiita.com/kaityo256/items/c15889dbb7acb2632c6e)を書くのに使ったスクリプトを

https://github.com/kaityo256/wordlookstired

に置いておきます。何かの参考になればと思って。

# 仕組み

まず、docxファイルをテンポラリディレクトリに展開します。Rubyからunzipするのは地味に面倒なので、外部コマンドとしてunzipを呼んじゃうのが楽です(本番コードでやっちゃだめよ)。

で、REXMLでファイルを読み込んで、`REXML::Formatters::Pretty`で表示させると良い感じです。

以上を行う手抜きスクリプトはこんな感じになります。

```ruby:showdoc.rb
require 'rubygems'
require 'tmpdir'
require 'rexml/document'

def show(dir)
  f = open(dir + '/word/document.xml') 
  doc = REXML::Document.new(f.gets(nil))
  formatter = REXML::Formatters::Pretty.new
  e =  REXML::XPath.first(doc.root,'w:body/w:p')
  formatter.write(e, $stdout)
  puts
end

if ARGV.size ==0
  puts "Please specify input file"
  exit
end
inputfile = ARGV[0]

Dir.mktmpdir(nil,'./') do |dir|
  `cd #{dir};unzip ../#{inputfile}`
  show(dir)
end

```



例えば、先のgithubのcase1ディレクトリにあるtest1.docxの中身はこんな感じになっています。

![4c537b77-740c-6d82-ca56-6f36dac6b99a.png](https://qiita-image-store.s3.amazonaws.com/0/79744/64960f94-01a6-b23d-a86c-844d9c02ea5d.png)


これを

```shell-session
$ ruby showdoc.rb test1.docx
```

としてスクリプトに食わせると、

```xml
<w:p>
  <w:r>
    <w:rPr>
      <w:rFonts w:hint='eastAsia'/>
    </w:rPr>
    <w:t>
      あいうえお
    </w:t>
  </w:r>
  <w:bookmarkStart w:id='0' w:name='_GoBack'/>
  <w:bookmarkEnd w:id='0'/>
</w:p>
```

みたいに表示されます。Dir.mktmpdirのブロック内でunzipすると、ブロック終了時にいらないファイルがごそっと消えて地味に便利。

# 箇条書きの表示

箇条書きの表示も同様です。単に開くファイルが`/word/document.xml`から`/word/numbering.xml`になるだけです。略記の為に、attributesとか使ってみましょう。

```ruby:shownumbering2.rb
require 'rubygems'
require 'tmpdir'
require 'rexml/document'

def show_pretty(e)
  formatter = REXML::Formatters::Pretty.new
  formatter.write(e,$stdout)
  puts
end

def show(dir)
  f = open(dir + '/word/numbering.xml') 
  doc = REXML::Document.new(f.gets(nil))
  formatter = REXML::Formatters::Pretty.new
  REXML::XPath.each(doc.root,'w:abstractNum') do |e|
    print "<w:abstractNum " 
    e.attributes.each do |k,v|
      print " #{k}='#{v}'"
    end
    puts "> ... </w:abstractNum>"
  end
  REXML::XPath.each(doc.root,'w:num') do |e|
    show_pretty(e)
  end
end

if ARGV.size ==0
  puts "Please specify input file"
  exit
end
inputfile = ARGV[0]

Dir.mktmpdir(nil,'./') do |dir|
  `cd #{dir};unzip ../#{inputfile}`
  show(dir)
end
```

これを先のgithubのリポジトリのcase2ディレクトリで、以下のように実行します。

```shell-session
$ ruby shownumbering2.rb test3.docx 
```

実行結果はこんな感じになります。

```xml
<w:abstractNum  w:abstractNumId='0' w15:restartNumberingAfterBreak='0'> ... </w:abstractNum>
<w:abstractNum  w:abstractNumId='1' w15:restartNumberingAfterBreak='0'> ... </w:abstractNum>
<w:num w:numId='1'>
  <w:abstractNumId w:val='0'/>
</w:num>
<w:num w:numId='2'>
  <w:abstractNumId w:val='1'/>
</w:num>
```

役に立つかわかりませんが、他にもdocxファイルの疲れの可視化とかしたい人とかの参考になれば。
.ssh 関連 Permission まとめ

毎回調べなおすし、間違った情報が混じっているのでまとめておく。

|File(Dir)|Permission|
|---|---|
|.ssh/                 | 700 |
|.ssh/id_rsa          | 600 |
|.ssh/id_rsa.pub      | 644 |
|.ssh/authorized_keys | 600 |
Maximaで円と円の交点

Maximaで円と円の交点計算
the intersection of two circles
solve([(x-x1)^2+(y-y1)^2=r1^2,(x-x2)^2+(y-y2)^2=r2^2],[x,y]),x1=0,y1=0,r1=10,x2=10,y2=0,r2=10;
solve([(x-x1)^2+(y-y1)^2=r1^2,(x-x2)^2+(y-y2)^2=r2^2],[x,y]);

最初のsolveの結果は、[[x=5,y=-5√3],[x=5,y=5√3]]
あとのsolveの結果がでてこない
いい方法があったら教えて下さい。

(参考)Maxima や ぁあ Maxima やっ/円と円の交点は・・・実験中です。
http://sky.geocities.jp/lite_and_seen_lite/gaihen_maxima.html
IPSecは「普通のトンネル」ではない

基本的なところから入りますが、IPSecはGREやPPPoE、L2TPのような「普通」のトンネルではない、というところが重要です。「普通」とはどういうことかというと、例えばL2TPの場合、トンネルの終端デバイス上で、ppp0とかそういった名前の仮想インターフェースが立ち上がりますよね。その仮想インターフェースは、手動の場合もあればIPCP等の自動割り当ての場合もあるでしょうがIPアドレスを割り当てることができて、そのIPアドレスがデバイスのルーティングテーブルに乗るのであって、データの伝送にトンネルを使うかを決定するのはルーティングテーブルです。つまり、普通のインターフェースのように扱えます。

<img width="667" alt="20170110-ipsec-1.png" src="https://qiita-image-store.s3.amazonaws.com/0/99231/e840bcb6-5491-de2c-f047-3d06b981db55.png">

IPSecは違います。IPSecトンネルを使うかどうかを決めるのは、レイヤ的にはIPより上、処理順序としてはルーティングテーブル検索より前に発生するService Policy Database (SPD) の検索です。SPDは、対向IPアドレスごとにBYPASS（何もしない）、DISCARD（パケットを破棄）、SECURE（暗号化）の３つしか選択肢がないという素っ気ない表です。この表を検索して暗号化するかを決め、さらにSecurity Association Database (SAD) の鍵データを使って暗号化した後にやっとルーティングテーブルで検索して出方路が決まります。

<img width="674" alt="20170110-ipsec-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/99231/46541844-dfc3-f502-b9f9-706c1a11d8cf.png">

そんなわけで、IPSecトンネルにはipsec0みたいな仮想インターフェースはないし、それ用にIPアドレスを割り当てることもないのです。今となっては、なんとまあ面倒なことをしてくれたと思いますが、[RFC2401](https://tools.ietf.org/html/rfc2401) ([Google翻訳](https://rfcs.web.fc2.com/rfc2401.html)) が世に出た1998年当時としては、これが自然な発想だったのかもしれません。

#NATトラバーサル

いちばん簡単な、IPSecトランスポートモードで一対一で通信するモデルで説明します。例えばこんな構成。

<img width="498" alt="20170110-ipsec-3.png" src="https://qiita-image-store.s3.amazonaws.com/0/99231/b74dc18b-b03b-ac98-9e47-76cec1f77eee.png">

serverとIPSecを喋っているpc1と同じNATの下に、同じserverと普通のTCPを喋るpc2がいます。往路、つまりpc2からserverへのトラフィックはちゃんと通るのです。問題は復路、つまりserverからpc2への応答トラフィックがserverのSPDにヒットしてしまい、ESPに暗号化されて返ってくるのです。当然pc2との通信は成立しません。そんなわけでpc1とserverがIPSec通信している間だけpc2とserverの通信が途切れます。。。（イマココ）

#参考文献

RFC3947
T. Kivinen, et al. (2005)
Negotiation of NAT-Traversal in the IKE
https://tools.ietf.org/html/rfc3947 ([Google翻訳](https://rfcs.web.fc2.com/rfc3947.html))
クオータニオンの値から回転軸と角度を求める

3Dグラフィックのプログラミングをしていて、デバッガーで回転量の値を見たけどクオータニオンで表されていていったいどのような回転を表すのか全然わからない……と思ったので考えてみました。

クオータニオンで回転を表現する場合、各成分には次のような値が入っています。

```
axis = 回転軸
radian = 角度

q.x = axis.x * sin(radian / 2);
q.y = axis.y * sin(radian / 2);
q.z = axis.z * sin(radian / 2);
q.w = cos(radian / 2)
```

したがって、逆に`axis`,`radian`を求めるように式を変形すれば良いのです。
`q.w = cos(radian / 2)`の式から`radian / 2 = acos(q.w)`というふうに変形できるので、これを残りの三つに代入するだけです。

```
axis.x = q.x / asin(acos(q.w));
axis.y = q.x / asin(acos(q.w));
axis.z = q.x / asin(acos(q.w));
radian = acos(q.w) * 2;
```

参考: http://qiita.com/kenjihiranabe/items/945232fbde58fab45681
Google Cloud DataflowでPipelineのjarファイルを作成して実行する

Dataflowの公式ページではmvnやEclipseからPipelineジョブを実行する例はあるが、実運用を考えたとき、実行するノードでわざわざmavenを入れるとコンテナのサイズが増えたりするので、jarファイルから実行できる方が好ましいケースがある。
そこでmavenから実行可能なjarファイルを作成する方法を記載する。

実行可能なJARファイルをmavenで作成するには"maven-assembly-plugin"プラグインを"build"宣言に記載する必要がある。

```pom.xml
<build>
  <plugins>
    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-assembly-plugin</artifactId>
      <version>2.4.1</version>
      <configuration>
      <!-- get all project dependencies -->
      <descriptorRefs>
        <descriptorRef>jar-with-dependencies</descriptorRef>
      </descriptorRefs>
      <!-- MainClass in mainfest make a executable jar -->
      <archive>
        <manifest>
          <mainClass>com.mycompany.app.App</mainClass>
        </manifest>
      </archive>
    </configuration>
    <executions>
      <execution>
        <id>make-assembly</id>
        <!-- bind to the packaging phase -->
        <phase>package</phase>
        <goals>
          <goal>single</goal>
        </goals>
      </execution>
    </executions>
    </plugin>
  </plugins>
</build>
```

以下のコマンドでJARファイルを作成
```
mvn package
```
下記コマンドで実行する。

```
java -jar xxx.jar --project={GCPプロジェクト}
```
Electron アプリで起動時に真っ白なウィンドウが一瞬出てしまうのを避ける

```js
let win = new BrowserWindow({
  width: 600,
  height: 800,
});
win.loadURL(path_to_html_file);
```

このようにすると，アプリのサイズが大きい場合に HTML の読み込みが終わるまでウィンドウが真っ白になってしまいます．画面が真っ白になってしまうと見栄えも悪いですし，目にも良くなさそうです．Electron ではこれを抑制する方法があるのですが，ちょっとぐぐった感じあまり知られていなかったようなのでメモしておきます．

これを抑制するために [`ready-to-show`](https://github.com/electron/electron/blob/master/docs/api/browser-window.md#using-ready-to-show-event) というイベントが `BrowserWindow` にあります．

これは HTML の描画が終わり，画面が真っ白でなくなったタイミングで起こるイベントで， `dom-ready` よりも後に発火します．下記のように使います．

```js
let win = new BrowserWindow({
  width: 600,
  height: 800,
  show: false,
});
win.once('ready-to-show', () => { win.show(); });
win.loadURL(path_to_html_file);
```

注意点として，もちろんアプリ起動までの時間が速くなったりするわけではないです．

起動直後の真っ白いウィンドウが気になってしまった場合はお試しください．

## 注意

`ready-to-show` はなるべく `BrowserWindow` のインスタンスを生成してからすぐにコールバックをセットしてください．当然ですが，コールバックをセットする前に `ready-to-show` のタイミングが過ぎてしまうと発火しません．
大文字入力が標準noSql

前回のログイン説明では，簡単すぎた．
URL先のページを確認すれば良いと思うのだが，ログイン直後に呪文を唱えることを此処で説明する．
前回：http://qiita.com/chesscommands/items/7801f61bae05c17a2e5d

4DDAMにログインした場合の標準設定では，大文字入力が標準になっている．
そのため，通常入力のように，小文字入力をするためには，以下のコマンドを実行する必要がある．

``` :大小文字反転コマンド
pterm case noinvert
```

このコマンドで小文字入力が標準になるため，Shiftキーを押下しながら文字入力しなければ，大文字入力が出来なくなる．
[Wordpress] WP-CLIでwordpressのインストール〜セットアップまで

インストールはこちらを参考に
http://wp-cli.org/docs/installing/

### 1. ディレクトリを作成

```
mkdir wp
```

### 2. wordpressをインストール

```
cd wp
wp core download --locale=ja
```

### 3. wp-config.phpを作成

コマンドじゃなくて、wp-config-sample.php をコピーして作成でもOK

```
wp core config --dbname=hoge --dbuser=hogeuser --dbpass=hogehoge --dbhost=localhost --dbprefix=hoge_
```

### 4. configからDB作成

```
wp db create
```


### 5. アカウント・サイト設定

初めてブラウザでアクセスしたときにでてくるフォームで設定するアレをワンライナーで。

```
wp core install --title=test --admin_user=admin --admin_password=password --admin_email=test@example.com --url=http://localhost:3000/
```


あとはブラウザでlocalhost:3000にアクセスすればwordpressサイトが表示されるはず。

タンタンッターン！ってできて気持ちいい。
整数の循環queueを実装してみる

　初めまして。プログラムの練習で整数の循環queueを実装してみました。
　独習C++という本を買ったので、その中の練習問題2.1の1.（サイズ100の整数の循環queueを実装せよ）を解いてみた次第です。
　今回はテスト投稿ですので、今後どういう投稿をするのかわかりませんが、とりあえずマークダウン方式に慣れるためにも投稿してみます。なにぶんプログラムを始めたばかりの初心者ですので、至らぬ点も多々あると思いますが、宜しくお願いします。

　早速classを定義してみます。

```cpp
class queue{
    static const int queue_size = 100+1;  //isFullの都合で+1しないといけない
    int Q[queue_size];
    int head,tail;
public:
    queue();
    void enqueue(int x);
    int dequeue();
    bool isEmpty();
    bool isFull();
};
```

　ここで、

```cpp
static const int queue_size = 100+1;
int Q[queue_size];
```

　の部分を

```cpp
const int queue_size = 100+1;
int Q[queue_size];
```

　にすると、

```
Invalid use of non-static data member 'queue_size'
```

　というエラーが出ました。とりあえずstaticを付ければいいんだなと思って、付けたらエラーは出なくなりました。仕組みはよくわかってません。どなたか教えていただけるとありがたいです。またサイズが100の整数の循環queueにするのですが、後述のisFull関数の実装の都合上、+1をする必要が出ました。後述します。

　メンバ関数の中身を書いていきたいと思います。

```cpp
queue::queue(){
    head = 0;
    tail = 0;
    cout << "queueを生成しました。\n";
}

void queue::enqueue(int x){
    if (isFull()) {
        cout << "enqueue要求がありましたが、Qがいっぱいです\n";
        return;
    }
    Q[tail] = x;
    tail++;
    tail %= queue_size;
}

int queue::dequeue(){
    if (isEmpty()) {
        cout << "dequeue要求がありましたが、Qが空っぽです\n";
        return 0;  //ここで何を返せばいいのだろう？
    }
    int result = Q[head];
    head++;
    head %= queue_size;
    return result;
}
```

　問題はdequeue関数です。queueが空っぽの時、何もせず終了したいのですが、関数の返り値がintのため、何かint型の値を返さなくてはいけません。苦し紛れに0を返すことにしていますが、何か良い解決方法があれば教えてください。
　関数の中身の続きです。

```cpp
bool queue::isEmpty(){
    return head==tail;
}

bool queue::isFull(){  //headの後ろにtailが来た時（重なるひとつ手前）
    return (tail+1)%queue_size==head;
}
```
　isEmptyは単純にheadとtailが重なっている時ということにしました。isFullはtailがぐるりと回って、headのひとつ後ろに来た時（重なるひとつ手前）で判断することにしました。このせいで、サイズnのqueueを作ろうとすると、領域としてはn+1確保しないといけなくなりました。（headのひとつ後ろのポジションへはenqueueできない）これも、もっと綺麗な方法があれば教えていただきたいです。

 main関数内で以下のコードを実行したところ以下の結果を得ました。

```cpp
    queue Q;
    for (int i = 0; i < 100; i++) {
        Q.enqueue(i);
    }
    Q.enqueue(100);  //Qは一杯のはずなのでエラー文が出るはず。
    for (int j = 0; j < 100; j++) {
        Q.dequeue();
    }
    Q.dequeue();  //Qは空っぽのはずなのでエラー文が出るはず。
```
---
```
queueを生成しました。
enqueue要求がありましたが、Qがいっぱいです
dequeue要求がありましたが、Qが空っぽです
```

　うまく動いているようです。いろいろ分からない点はありますが、なんとか実装できたようです。

　また、何か実装したら投稿することにします。お読みいただいてありがとうございました。
QiitaとKobitoについての要望：ストックのContributionへの加算＆Kobitoのdarkテーマの改善


# Qiitaについて：ストックもContributionに加算してほしい

自分のやったことの記録を書いただけの低レベルな投稿しかしていないので、こういうことを言うのは厚かましいですが、ストックもContributionに加算してほしいです。これについて思うのは、

* いいね と ストックの違いが明確ではない
* 寧ろストックの方が「ストックし、後々参照するのに値する情報を提供した」という点で、いいね よりも貢献度が高い
* UIが分かりづらくなった

ということです。何卒検討よろしくお願いします。

# Kobitoについて：darkテーマ使用時のタグ入力スペースのカーソルが見えづらい
Markdownを記述する際に、Kobitoエディタを使用させていただいておりますが、それについて、一点だけ要望があります。
ウィンドウの一番下にタグ入力スペースがあるかと思いますが、darkテーマを使用していると、カーソルも黒色なのでとても見づらいです。

## カーソルが表示されていない状態
![カーソルなし](https://qiita-image-store.s3.amazonaws.com/0/129740/27244493-4256-df93-0478-88e2e49bba7d.png)

## カーソルが表示されている状態
![カーソルあり](https://qiita-image-store.s3.amazonaws.com/0/129740/d72c9d1a-78f2-872f-413d-73146d6ad707.png)

個人差の問題かもしれませんが、改善していただけると、助かります。
swiftのUnitTestで海外への渡航、サマータイムなどタイムゾーンが変わる時のテストを書く

サマータイムや渡航によって、保存されている時間データと、現在時刻のタイムゾーンにズレが生じる。それによって、所定の時間に通知がこない。コンテンツが更新されない。などはよくある話です。
今回、そのよくある話に見事はまったので、そのテストを書きました。

## サマータイムは同じ場所に居ながら、時差が変更される

サマータイムとは、夏は早く明るくなるんだから、一日をちょっと早く開始すればみんな活動時間伸びていいじゃん。っていうアレです。
システム的には、サマータイム中とサマータイム外だと、同じ場所にいるのに時差が変わります

```
# シドニーの場合
2016/11/19 00:00:00 UTC+11
2017/06/20 00:00:00 UTC+10

# シドニーの場合（UTCで保存）
2016/11/18 13:00:00 UTC+0
2017/06/20 14:00:00 UTC+0
```

## "Australia/Sydney"のサマータイム中に登録したデータのサマータイム外での挙動をXCTestで書く

NSDateFormatterのtimeZoneを設定することで、サマータイムを発生させます。

```swift

class TimezoneTests: XCTestCase {
    override func setUp() {
        super.setUp()
    }

    override func tearDown() {
        super.tearDown()
    }
    
    func testTimezoneChange {
        let formatter = NSDateFormatter()
        formatter.timeZone = NSTimeZone.init(name: "Australia/Sydney")
        formatter.calendar = NSCalendar(calendarIdentifier: NSCalendarIdentifierGregorian)
        formatter.dateFormat = "yyyy/MM/dd"
        
        let registerDate = formatter.dateFromString("2016/11/19")
        
        /*
         *   ここにregisterDateをDBに保存するコードを記載
         */ 
         
        let targetDate = formatter.dateFromString("2017/06/20")
        timeTravel(to: targetDate) {
            print(registerDate) //=> 2016-11-18 13:00:00 +0000
            print(targetDate)   //=> 2017-06-19 14:00:00 +0000
            
            /* 
             *   ここにタイムゾーンが変わったとき、どうあるべきかを記載
             */
             
        }
    }
    
    private func timeTravel(to date: NSDate, block: () -> Void) {
        let customDateBlock: @convention(block) (AnyObject) -> NSDate = { _ in date }
        let implementation = imp_implementationWithBlock(unsafeBitCast(customDateBlock, AnyObject.self))
        let method = class_getInstanceMethod(NSClassFromString("__NSPlaceholderDate"), #selector(NSObject.init))
        let oldImplementation = method_getImplementation(method)
        method_setImplementation(method, implementation)
        block()
        method_setImplementation(method, oldImplementation)
    }
}
```
Android ThingsのDeveloper Preview 1リリースノートを翻訳

# What's this?

https://developer.android.com/things/preview/releases.html#developer_preview_1
の翻訳です

# Developer Preview 1
Date: December 2016
Build Number: NIF73/NIF74

プレビューAPIドキュメント: [ダウンロード](https://developer.android.com/things/downloads/com.google.android.things-docs-dp1.zip)

この開発者向けプレビューは開発者およびアーリーアダプター向けに開発及び、ハードウェアのコンパチビリティテスト為に提供しています。以下の２点について注意して下さい

- 開発者プレビュー１には安定動作しない問題が潜んでいる可能性があります。バグを発見した場合はバグレポートをお願いします
- 開発者プレビュー1は**Intel Edison, NXP Pico, and Raspberry Pi 3**で実行することが出来ます

# 既知の問題点
- システムパワーマネジメントは無効化されています。デバイスはサスペンドされません
- Bluetooth APIは無効化されています
- USB APIは無効化されています
- [Dangerous パーミッション](https://developer.android.com/guide/topics/security/permissions.html#normal-dangerous)は次回のデバイス再起動まで付与されません。新規インストール及び既存アプリのアップデートでも同様です
- **Google Play Services API**を使用するアプリはSDKバージョンが10.0.0以上である必要があります
- 初回起動時、Google Play Servicesはdexファイルの最適化のために2〜3分要します。アプリのインストールはその間ブロックされます。

# 周辺装置入出力(Peripheral I/O)
- 周辺装置は **close()** を実行してもクリアされたりリセットされることはありません。継続的にデータを送り続けます
- 一度入力用として有効にしたGPIOピンは出力用として使用することが出来ません。デバイスを再起動することで入出力を切り替えることが出来ます

# ドライバー(User Drivers)
- ユーザーセンサーを手動で解除することは出来ません。アプリのプロセス終了時に自動的に解除されます
- ユーザーセンサーは定期的にデータを送り続ける**continuous**と値が変更されたタイミングで送信する**on-change**をサポートしています。**One-shot**など、その他の特別なモードで動作するセンサーは動作しない場合があります

Reporting modes ( continuous and on-change )
https://source.android.com/devices/sensors/report-modes.html

# Edison
- **オーディオ**: 録音はサポートされていません
- **入出力(I/O)**: GPIOピンの**GP77**はPeripheralManagerServiceにリストされていますが、アプリからアクセスすることは出来ません
- **リセット**: Arduinoブレークアウトボードにあるリセットボタンは正しく動作しません。ボード上にあるリセットボタンの代わりに電源の抜き差しで再起動して下さい

# Pico
- **ネットワーク**: イーサネットは無効です
- **入出力(I/O)**: GPIOピンが出力用に設定されている場合Gpio.getValue()は常にfalseを返します

# Raspberry Pi
- **ネットワーク**: インターネットアクセス無しでイーサネットに接続している場合、Wi-Fiでインターネットに接続することは出来ません
- **グラフィック**: ハードウェアグラフィックスアクセラレータは無効です
- **カメラ**: CameraCaptureSessionは複数の出力サーフェースを作成することは出来ません
- **カメラ**: CameraCaptureSessionの初回実行時は常に二つのイメージがキューに入ります
- **入出力(I/O)**: **BCM13/PWM0** と **BCM18/PWM1** は一度PWNとして有効にするとデバイスを再起動するまでGPIOピンとして使用することは出来ません
パスワード入力画面作成の際に気を付ける点について

JSSECが公開している『Androidアプリのセキュア設計・セキュアコーディングガイド』の2016-09-01版を共有用にまとめているもののうち、「5.1. パスワード入力画面を作る」のものとなります。
詳細やサンプルコードについては原著の方を参考ください。

## チェックポイント
- [ ] 入力パスワードはマスク表示している
- [ ] パスワードを平文表示させるオプションが存在する
 * 誤入力や、簡単なパスワードを避けさせるため
- [ ] パスワード表示オプションの危険性の注意喚起を行っている
 * 覗き見される可能性等の危険性のため
- [ ] 平文表示は一定時間で、自動的にマスクをかけ直すようにしている
- [ ] Activity起動時はパスワードをマスク表示にする
 * 意図せずに表示されて、パスワードが漏れる可能性を防ぐため
- [ ] ログイン失敗時のメッセージが、IDが存在しない場合も、パスワードが違う場合も同じである
- [ ] スクリーンキャプチャを無効にしている(推奨)

自動入力時は上に加え

- [ ] 前回入力したパスワードがある場合、固定桁数のダミーマスクを表示する
 * 第三者にパスワードのヒントを与えないようにするため
- [ ] 前回ダミー表示時に、平文表示を押した場合、前回入力パスワードをクリアしている
- [ ] 前回ダミー表示時に、ユーザがパスワード入力しようとした場合、前回入力パスワードをクリアしている

## Tips
### 自動ログインに関して
自動ログインは、便利ですが、盗難されたときに、第三者に悪用されるリスクが伴います。そのため、第三者に悪用された場合の被害が受け入れられる用途か十分なセキュリティ対策が可能な場合にのみ、利用することができます
例えば、クレジット決済など、特定の機能を使用する場合、再度パスワード入力を求める、ユーザーに注意喚起と端末ロックを促すなどが考えられます
 
### パスワード変更に関して
パスワード変更を行う時は、現在のパスワード、新しいパスワード、確認用の新しいパスワードを用意すべきです

## 参考
『Android アプリのセキュア設計・セキュアコーディングガイド』【2016年9月1日版】
https://www.jssec.org/dl/android_securecoding.pdf
PythonでnosaltなAES暗号化をする

opensslで次のようなAES-256のCBC暗号化で'-nosalt'オプションを付けたような暗号化をPythonでも実現したい時。

``` shell
echo "this is secret"|openssl enc -aes-256-cbc -e -base64 -pass pass:hogehoge -p -nosalt
```

こんな感じでできました。

``` python
def encryptAes(str, encKey, key_length=32, iv_length=16):
    d = d_i = ''
    while len(d) < key_length + iv_length:
        d_i = md5(d_i + encKey).digest()
        d += d_i
    key = d[:key_length]
    iv = d[key_length:key_length+iv_length]
    cipher = AES.new(key, AES.MODE_CBC, iv)
    _str = str + (iv_length - len(str) % iv_length) * chr(iv_length - len(str) % iv_length)
    return base64.b16encode(cipher.encrypt(_str)).lower()
print encyptAes("this is secret","hogehoge")
```
備忘録的に残す。
swift3移行時の参考記事

swift3へ移行するときに、差分を知るための情報ソースです。
公式(1次ソース)ベースです。

他になにかよいソースあれば教えてください🙇🏻

- [Migration Guide (swift.org)](https://swift.org/migration-guide/)
- [XCode Release Notes](https://developer.apple.com/library/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html#//apple_ref/doc/uid/TP40001051-CH1-SW78)
- [CHANGELOG.md (swift repository)](https://github.com/apple/swift/blob/master/CHANGELOG.md)
- [Revision History (Swift Programming Guide)](https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/RevisionHistory.html#//apple_ref/doc/uid/TP40014097-CH40-ID459)
- [Revision History (Using Swift with Cocoa and Objective-C (Swift 3.0.1))](https://developer.apple.com/library/content/documentation/Swift/Conceptual/BuildingCocoaApps/RevisionHistory.html#//apple_ref/doc/uid/TP40014216-CH14-ID142)
- [APIReference (apple)](https://developer.apple.com/reference)
- [API diff Foundation](https://developer.apple.com/library/content/releasenotes/General/iOS10APIDiffs/Swift/Foundation.html)
- 種々依存ライブラリのMigration Guide
privateなGithubレポジトリをbundle installする

# 結論

personal access tokenで作って`bundler config`に加えます。

# やりかた

Gemfileには形式は`git`でプロトコルは`https`を指定します。
(`github`形式だと`git`プロトコルになってしまったので、その対応です)

Gemfile

```ruby
gem 'private', git: 'https://github.com/myoan/private.git'
```

Githubでpersonal access tokenを作ります。
(tokenをどこかにメモしてください。)

![スクリーンショット 2017-01-10 17.50.30.png](https://qiita-image-store.s3.amazonaws.com/0/19783/c703abc4-d9ba-f287-2908-3bad3b94581b.png)


`bundle config`でbundlerに設定を加えます。

```bash
-> % bundle config https://github.com/myoan/private.git myoan:<PERSONAL_ACCESS_TOKEN>
-> % cat ~/.bundle/config
---
BUNDLE_BUILD__NOKOGIRI: "--use-system-libraries"
BUNDLE_BUILD__MYSQL2: "--local --with-opt-lib=/usr/local/opt/openssl/lib --with-opt-include=-I/usr/local/opt/openssl/include"
BUNDLE_HTTPS://GITHUB__COM/MYOAN/PRIVATES__GIT/: "myoan:<PERSONAL_ACCESS_TOKEN>"
```

この状態でbundle installを実行。
うまくいったら成功です！

# 参照

https://github.com/bundler/bundler/pull/3898
Gulpを使ってsassを自動コンパイル&ブラウザリロード&JS,CSS圧縮(備忘録)

※Node.jsとGulpがインストールされている前提

ディレクトリ構成は下記の通り

```
├── css
├── js
    ├── jquery
        ├── **.js
├── sass
    ├── header
        ├── **.scss
    |
|   ├── **.scss
|   └── **.scss
├── index.html
```

ターミナル、コマンドプロンプトで作業ディレクトリまで移動して、下記コマンドを入力していく

```
npm init
```

```
npm install gulp --save-dev
```


```
npm install gulp-sass --save-dev
```

```
npm install --save-dev gulp-sourcemaps
```


```
npm install --save-dev gulp-plumber
```

```
npm install browser-sync
```

```
npm install gulp-uglify --save-dev
```

```
npm install gulp-clean-css --save-dev
```

```gulpfile.js
const gulp        = require('gulp');
const sass        = require('gulp-sass');
const plumber     = require('gulp-plumber');
const sourcemaps  = require('gulp-sourcemaps');
const browserSync = require('browser-sync');
const uglify      = require('gulp-uglify');
const cleanCSS    = require('gulp-clean-css');

// sassコンパイルタスク
gulp.task('sass', function(){
  gulp.src('./scss/**/*.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css/'));
});

// ブラウザリロード
gulp.task('browser-sync', function() {
    browserSync({
        server: {
             baseDir: "."       //対象ディレクトリ
            ,index  : "000_top.html"      //インデックスファイル
        }
    });
});
gulp.task('bs-reload', function () {
    browserSync.reload();
});

//JS圧縮
gulp.task('minify-js', function() {
    return gulp.src("./js/**/*.js")
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/')); //別ディレクトリ
        //.pipe(gulp.dest('./js')); // overwrite
});

//CSS圧縮
gulp.task('minify-css', function() {
    return gulp.src("./css/*.css")
        .pipe(cleanCSS())
        //.pipe(gulp.dest('./dist/css/')); //別ディレクトリ
        .pipe(gulp.dest('./css')); // overwrite
});

// watchタスク(html,js,sassファイル変更時に実行するタスク)
gulp.task('sass-watch', ['sass','browser-sync'], function(){
  let watcher = gulp.watch('./scss/**/*.scss', ['sass']);
  gulp.watch("./*.html",['bs-reload']);
  watcher.on('change', function(event) {
    console.log('コンパイルOK!');
  });
  gulp.watch("./scss/**/*.scss",['bs-reload']);
  gulp.watch("./js/**/*.js",['bs-reload']);
});

gulp.task('default', ['sass-watch','browser-sync']);
gulp.task('build',['minify-css','minify-js']);

```

```
gulp
```
を入力して、実行

```
gulp build
```
を入力して、JS,CSS圧縮を実行
Galaxy の database_connectionで、UTF-8を設定する方法

# 概要

Galaxyのサーバーを立てるときに、データベースとの設定を行うときに、UTF-8を使うように明示的にしたい

# 結論

[SQLAlchemy](http://www.sqlalchemy.org/)の設定で指定できる

## 参考

* [Engine and Connection Use](http://docs.sqlalchemy.org/en/latest/core/engines_connections.html)

## MySQL

ソケットだとこんな感じ

```
database_connection = mysql://galaxy:galaxy@localhost:3306/galaxy?unix_socket=/var/run/mysqld/mysqld.sock&charset=utf8
```

## PostgreSQL

サーバーの場合

```
postgresql://galaxy:galaxy@localhost:5432/galaxy?client_encoding=utf8
```

## 環境変数で指定もできる

```
GALAXY_CONFIG_DATABASE_CONNECTION='postgresql://galaxy:galaxy@localhost:5432/galaxy?client_encoding=utf8'
```

```
run.sh
```
diffの基本技いろいろ

個人メモの域を出ないですが
diffコマンドの基本とか。


## 基本
-uを入れるとdiff結果が見やすい
> diff -u file1 file2


## Sortしてからdiffをとる
<と(の間はスペース入れない
> diff <(sort file1) <(sort file2)


## Zipファイルの中身を解凍しないで直接比較
けっこう便利っす
> diff <(unzip -p a.zip) <(unzip -p b.zip)



## ディレクトリごと比較
.(カレントディレクトリ）を比較することも可
後述の -qと一緒に使うことも多い

> diff -r dir1 dir2


## 差があるファイル名だけ表示
差が大きいとき、ずらずら表示しないので便利
> diff -q file1 file2


## その他
- colordiff ってのがあるらしい。勝手に入れられない現場なので我慢。
- vimdiff　ってのも見やすそう。vimさえあれば。うちは無いので我慢。

結局diffは、差分があるか否かを素早く判断するためのコマンドで、
それ単体ではガチで差分を確認するのは不向きですね。
ProgrammerWidget: QiitaとTeratailとGithubのプロフィールを表示するWeb Widgetを作ってみた

自作サイトにプログラミング関係のウィジェットを付けてみたくなったので、タイトルの通りQiitaとTeratailとGithubのプロフィールを表示するウィジェットを作ってみました。
今回はTypeScriptを使ってみました(**普段はAndroidアプリ開発とかC#使ってるWeb系素人なので間違いとか不具合とかあるかもしれないです**)

# デモ
![programmerwidget_ss.PNG](https://qiita-image-store.s3.amazonaws.com/0/51176/725741c5-d0ae-9061-0697-6a07de485f55.png)
*デモサイトのスクショです、こんな感じのレイアウトで他にTeratailとGithubのウィジェットを用意しています*

[デモサイトはこちら](https://meilcli.github.io/ProgrammerWidget/)

# ウィジェットについて

## 概要

- TypeScriptで作成しECMAScript6に変換しています
 - そのためECMAScript6に対応していない非モダンなブラウザでは表示されないです
 - ~~このウィジェットを見てほしい人種(プログラマー)ならモダンなブラウザ使ってるでしょ~~
- 普通にAPIにリクエスト投げてたら規制まっしぐらなので、ローカルストレージに1時間キャッシュします
- レスポンシブ対応、、、になってたらいいな(小声)
 - (widthが小さすぎるとレイアウトが崩れる模様)

## 必要なもの

- ECMAScript6に対応してるブラウザ！(あとCSSのcalcにも対応してるので)
- Qiitaの投稿付きウィジェットを使う場合は[Font Awesome](http://fontawesome.io/icons/)
- Teratailの回答付きウィジェットを使う場合は[Font Awesome](http://fontawesome.io/icons/)
- Githubのアクティビティ付きウィジェットを使う場合は[Octicons](https://octicons.github.com/)

## 使い方

上記のデモサイトに置いてるコードを付けるだけです
デモサイト上のコードはGithub Pagesに置いてるcss/jsファイルを参照してるのでトラフィック的にも使用するサイトにcss/jsファイルを置いてあげるといいです
[リリースページはこちら](https://github.com/MeilCli/ProgrammerWidget/releases)

## RateLimitについて

*ぱっと調べた感じなので間違いとか変更とかあるかもしれないです*

Qiita APIについてはRateLimit的にも取得できるデータ的にもv1のほうがいいのでv1を使っています
そのため表示は「いいね」じゃなくて「ストック」です

| サービス| 1IPに対しての1時間当たりのリクエスト回数 |
|:--|:--:|:--:|
|Qiita|150|
|Teratail|30|
|Github|60|

| ウィジェット| 1回表示する際のリクエスト回数 |
|:--|:--:|
|Qiitaウィジェット|2|
|Qiita投稿付きウィジェット|2|
|Teratailウィジェット|4|
|Teratail回答付きウィジェット|4 + 回答数(最大10)|
|Githubウィジェット|2 + リポジトリ数(最大10)|
|Githubアクティビティ付きウィジェット|3 + リポジトリ数(最大10)|

## ロゴ部分について

ロゴ部分は文字なんかじゃなくてロゴ画像使いたかったんですけど、Teratailのブランドガイドラインが見つけられなくて(たぶんない)デザインの統一性的に文字にしました

# 最後に
ソースコードは[Github](https://github.com/MeilCli/ProgrammerWidget)で公開しています
conoha イメージでディスク作った時にすること

centosでイメージからサーバーを立てる時がある。

その時、やること。
サーバーが完成したら・・・

・サーバーにログイン
・cronの内容を変更し、止める
・いらないフォルダを削除
・nginxのdefault.confを空に
・nginxのdefault.conf に最低限のサーバーの記述
・conoha DNS で ドメインをこのサーバーに向ける
・DB(phpmyadmin)にログインして、DBの名前を すべて hoge_dummy と変更
・元のサイトを見てバグってなければ上記のデータを全て削除
Amazonで一年間に使った金額と、注文履歴のTSVを出力するブックマークレット【2016年版】

８カ月以上経過してしまったので備忘録的な公開

Amazonで一年間に使った金額と、注文履歴のTSVを出力するブックマークレット【2015年版】
http://qiita.com/koyopro/items/d8b259f1eb75a01d3a0b#comment-3a99ff0688f2d928e9ef
こちらのコメントで公開してから８か月経ち、もう動くかわかりませんが・・・
＊2017/6/14動作確認。問題有り

https://github.com/Libitina/AmazonRecord2016/blob/master/2016/amazon_record.js
違いは
・デフォルトの年号を2016に変更。
・商品URLに余計なパラメータが含まれているので削る。
・紅茶等の食品や家電にはautherが無いので、autherの代わりにpriceをTSV出力。
・単純にautherをpriceに変更するとその決済時の合計金額が入っているので、個別の値段を取得するようにする。
・「○個すべての商品を表示」のような一度に多数個発注した場合の省略表示だと個別の内容を全て取得出来ていないのに対応。
です。

Amazonさん、Androidアプリでもすでに購入してます通知してくれないかな。


追記
下のコードをブックマークレットとして登録すればサーバーとか用意しなくても動作確認できます。
rawgithub.com経由参照：
javascript:(function(){var a=document.createElement("script");a.src="//rawgithub.com/Libitina/AmazonRecord2016/master/2016/amazon_record.js";document.body.appendChild(a)}());

2017/6/14追記
同じものを同時に複数個発注している場合に、
品名項目では「数量：2」のような記載があるが、金額部分は単価で出力されているので合計金額が間違っている可能性が高い。
kintone 電子回路シミュレータ ストップウオッチ作成

#kintone 電子回路シミュレータ ストップウオッチ作成

カウンターの次に、その応用でストップウオッチを作成してみます。
10進カウンターと6進カウンターを組み合わせた 60進カウンターを使います。

![2017-01-10_16h49_13.gif](https://qiita-image-store.s3.amazonaws.com/0/100572/222dbec1-e4b5-012b-14ed-8228fdff7d71.gif)

#10進カウンター

前回作成した10進カウンター

![2017-01-09_16h58_48.png](https://qiita-image-store.s3.amazonaws.com/0/100572/7a5405cc-dc74-601a-15b9-64923b47b9c1.png)

#6進カウンター

6進カウンターだと、FF が３個になります。

![2017-01-10_16h46_21.png](https://qiita-image-store.s3.amazonaws.com/0/100572/28d0592d-38b0-6362-bea5-5bf46fdc6fe1.png)

#60進カウンター

10進カウンターと6進カウンターを組み合わせると60進カウンターになります。

![2017-01-10_16h57_07.png](https://qiita-image-store.s3.amazonaws.com/0/100572/76d32b9e-ea66-ad86-42fb-a27b5b19b451.png)

#60進カウンターの部品化

入出力端子を追加して、部品化します。
電源DCの扱いがよくわからなかったので、これも外部入力にしました。

![2017-01-10_17h01_43.png](https://qiita-image-store.s3.amazonaws.com/0/100572/42fb8c07-0e07-3a2b-f3af-2d8fee66f2af.png)

#ToolBox へ60進カウンター登録
部品グループアプリのサブテーブルに、部品として登録します。

![2017-01-10_17h04_03.png](https://qiita-image-store.s3.amazonaws.com/0/100572/186254da-511c-cd69-793c-24fd5a9163fc.png)

#60進カウンター部品のテスト
作成した60進カウンターに入出力端子を追加して、動作検証します。

![2017-01-10_17h08_22.png](https://qiita-image-store.s3.amazonaws.com/0/100572/0e673791-ec0d-75b8-b463-30a60cba240c.png)

#ストップウオッチ作成
60進カウンター部品を二つ組み合わせると、60分まで計測できるストップウオッチになります。


![2017-01-10_17h13_33.png](https://qiita-image-store.s3.amazonaws.com/0/100572/acf4363f-916e-6593-e5d4-e904accd4daa.png)

#ストップウオッチ作成(0.1sec)
さらに60進カウンター部品を追加して、0.1秒単位に計測できるストップウオッチにしました。
10進カウンター部品を作ってもよいのですが、部品の種類が少ないほうがいいこともあります。

![2017-01-10_21h42_19.png](https://qiita-image-store.s3.amazonaws.com/0/100572/11b35a00-7223-34f8-1a95-54097b7f424e.png)
iOSアプリ向け通信スタブの使い方

iOSアプリ向けの通信スタブに関する、簡単なまとめです。

## Stubライブラリ
- [OHHTTPStubs](https://github.com/AliSoftware/OHHTTPStubs)
    - アプリtargetでも使える。APIKitなどで使用されている。
- [Mockingjay](https://github.com/kylef/Mockingjay)
    - テスト用targetのみ(?)。アプリtargetでは使えない(?)
    - （詳しくは調べていないのですが、XCTestと統合されている、との記述がありました）
- [Moya](https://github.com/Moya/Moya) 
    - 通信ライブラリ+ スタブ
    - 1回試したが、APIKitの方が好みでした。


## OHHTTPStubsの使い方
https://github.com/AliSoftware/OHHTTPStubs/wiki/Usage-Examples
ここにいろいろあります。

（以下は全てUsage-Examplesより引用）

#### jsonを返す
``` swift
stub(isHost("mywebservice.com")) { _ in
  let obj = ["key1":"value1", "key2":["value2A","value2B"]]
  return OHHTTPStubsResponse(JSONObject: obj, statusCode: 200, headers: nil)
}
```

`isHost`, `isPath`,  `isMethodPOST` などを使って条件を設定する


#### レスポンス時間を変える
```swift
stub(isHost("mywebservice.com")) { _ in
  return OHHTTPStubsResponse(JSONObject:someDict, statusCode:200, headers:nil)
    .requestTime(1.0, responseTime: 3.0)
}
```

#### エラーを返す
`statusCode` をエラーコードにする

## 使用するメリット
- サーバー実装を待たなくていい
    - 仕様だけあれば開発が進められる。
- テストコードが書きやすい
    - 実際のAPIだと、認証処理などが必要な場合が多く、テストコードを書くのが難しい。
- エラー条件のテストができる
    - API毎に設定可能。
- レスポンス時間を調整できる
    - API毎に設定可能。

## 開発がどう変わったか？
開発の順番が変わり、モデルレイヤーからボトムアップ的に作れるようになりました。
（それまでは、画面を作る→対応するAPIを作る→実際にアプリを動かして確認　という感じだった）

#### 今の開発フロー
stubを作る
↓
entityを作る
↓
Request（APIKit）を作る
↓
テストを書く　※ 画面を作らなくても動作確認できる！
React Native で TextInput がソフトウェアキーボードに隠れてしまう問題の対処方法

[【React Native】TextInputがキーボードに隠れてしまう問題の解決法について](http://qiita.com/YutamaKotaro/items/d66377eb0ce8d8da55f5) にて npm で簡単に解決する方法があります。package.json の dependencies を増やしたくない方はこちらをどうぞ。

## 現象

スクリーンショットにある様に ScrollView の下の方に TextInput が配置されていると、ソフトウェアキーボードが表示されると TextInput が隠れてしまいます。

<img width="487" alt="スクリーンショット 2017-01-10 16.04.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/47686/c92b2ede-a09b-2d78-b259-6319dffced94.png">

これは困った。

<img width="487" alt="スクリーンショット 2017-01-10 16.04.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/47686/5e9a6806-6697-62d1-0923-4d9cded2ca5e.png">

勝手にこのようになってもらいたいものですよね。

<img width="459" alt="スクリーンショット 2017-01-10 16.04.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/47686/9e0f2cac-7cc6-5881-42e5-70083eb417ea.png">

## 解決方法

以下、サンプルソースコード。

```js
import React, {Component} from 'react';
import ReactNative, {
  Keyboard,
  ScrollView,
  StyleSheet,
  TextInput,
  View
} from 'react-native';

export default class MyComponent extend Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this._handleKeyboardWillShow.bind(this));
  }

  componentWillUnmount() {
    this.keyboardWillShowListener.remove();
  }

  render() {
    return (
      <ScrollView
        ref={(component) => this._scrollview = component}
        style={styles.container}
      >
        <View
          style={styles.dummy}
        />
        <TextInput
          ref={(component) => this._textinput = component}
          style={styles.input}
        />
        <View
          style={styles.dummy}
        />
      </ScrollView>
    );
  }

  _handleKeyboardWillShow() {
    const responder = this._scrollview.getScrollResponder();
    responder.scrollResponderScrollNativeHandleToKeyboard(
      ReactNative.findNodeHandle(this._textinput),
      100,
      true
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  dummy: {
    height: 1000
  },
  input: {
    height: 44,
    borderWidth: 1,
    borderColor: '#000000'
  }
});
```

keyboardWillShow でソフトウェアキーボードが表示されたかどうか監視します。表示されたら ScrollView から `getScrollResponder()` して `scrollResponderScrollNativeHandleToKeyboard()` します。第一引数に TextInput の node handle が必要になりますので、`ReactNative.findNodeHandle()` で取得しましょう（`React.findNodeHandle()` は削除されているので `ReactNative` の方を使ってください）。第二引数でキーボードからどのくらい上にスクロールさせるか offset を指定できます。0 にするとちょうど見えなくなってしまいますので、ご自身で良い感じの数値を指定してください。今回は 100 を指定しています。第三引数を true にしておけば、算出されるスクロール値がマイナスになった時 0 にしてくれます。

ちなみに、TextInput の onFocus でスクロールさせようとしてはいけません。ソフトウェアキーボードがまだ表示されていないにも関わらず、フォーカスが当たった時点でスクロールさせようとしてしまいます。結果、正常なスクロール値が算出できず、期待通りに動いてくれません。setTimeout() でタイミングをずらしてあげてもよいのですが、せっかく keyboardWillShow があるのでそちらを使いましょう。

## まとめ

`getScrollResponder()` とか `scrollResponderScrollNativeHandleToKeyboard()` は Docs に記載されていません。IDE を使っているとコードジャンプしてくれるので楽に辿ることができます。この機会に React Native 自体のソースコードを見てみるのも良いですね。
また、そもそも ScrollView に配置されていないとスクロールさせることはできませんので、TextInput は ScrollView と併用ですね。今回は ScrollView ですが、ListView でも同様のことができると思います（未検証ですが）。
RCS(Revision Control System)の簡単な使い方

## RCSとは

RCS(Revision Control System)は最初期のバージョン管理システム。RCSがロックしたファイルを解除して編集、コミットすることでまたロックさせるという構造を持っている。

直接運用しているファイルを書き換える文化がある場合には効果的。

今更ながら最近ちょくちょく触る機会が増えてきたので最低限これを覚えれば使えるって操作をまとめる。gitで言い換えが可能なものは互換コマンドも記載する。

## よく使うコマンド

### 編集を行う(ロックの解除)

```
$ co -l file
```

### 編集の確定を行う(ロックの復帰)

`git commit`に相当。

```
$ ci -u file
RCS/file,v  <--  file
new revision: 1.1; previous revision: 1.0
enter log message, terminated with single '.' or end of file:
>> hoge
>> .
done
```

### 特定のリビジョンに移動する

`git checkout [rev]`に相当。

```
$ co -r1.0 file
```

### 編集中のファイルの内容を破棄し、ロックを返す

`git checkout file`に相当。

編集を破棄してチェックアウトし直すか、といったダイアログが出てくる

```
$ co -u -r1.0 file 
```

### 編集中のファイルのdiffを確認する

`git diff`に相当。

```
$ rcsdiff file
```

### 特定リビジョン間のdiffを確認する

`git diff [rev] [rev]`に相当。

```
$ rcsdiff -r1.0 -r1.1 file
```

### 変更ログを表示する

`git log`に相当。

```
$ rlog file 
```
スマホの縦画面と横画面でCSSを分ける方法

https://allabout.co.jp/gm/gc/458504/

```

@media screen and (orientation: landscape) {
   /* 横向きの場合のスタイル */
}
@media screen and (orientation: portrait) {
   /* 縦向きの場合のスタイル */
}

```
新MBP(with touch bar)でスクリーンロック

タッチバー付き新MBP（Late 2016)、みなさんもう使っていますか？
賛否両論あるマシンですが、いずれにしろ使わざるを得ない方も多いと思います。
旧MBPとの違いに戸惑うことも多いですが、スクリーンロックもその一つ。
みなさんどうしていますか？

旧MBPでは `control + shift + power` のショートカットキーでスクリーンロックをすぐに行うことができました。
しかしこれ、新MBPでは使えないみたいなんですよね。
はたと困りましたが、タッチバーを使うことで昔より手軽になっています。
やり方は簡単。

システム環境設定 -> キーボード　-> キーボード（タブ） -> Control Strip をカスタマイズ... ->

と行くとこんな画面に進みます。

<img width="1329" alt="スクリーンショット 2017-01-10 16.37.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/17339/ddb8c5be-e36a-b447-8ecc-6da4ca630b66.png">

「画面をロック」がありますよね。
こいつをドラッグ&ドロップでタッチバーの好みの位置に放り込んでやるだけ。
「完了」を押せば設定完了で、以降は簡単にスクリーンロックできるようになります。

液晶画面から「画面をロック」のボタンがタッチバー上にドラッグ&ドロップできるの、画面から現実世界に物理キーが飛び出してきたような異次元体験でちょっと「おお？！」ってなっちゃいます。
ちょっと面白いです。

私はついでに「スクリーンショット」を追加しました。
押すとこんな風にメニューがタッチバー上に展開します。

![IMG_8766.JPG](https://qiita-image-store.s3.amazonaws.com/0/17339/aa2fce78-8c9b-36b3-31c4-d2019cc4d2e4.jpeg)

実は上の画面のタッチバーそのものを編集する画面は旧来の `command + shift + 4` を使う必要がありましたが、それ以外ではおおむね有効なようです。
いまどきの SSH 鍵の作り方メモ

```
ssh-keygen -t ecdsa -b 521 -C "username@example.com"
```

あるいは

```
ssh-keygen -t ed25519 -C "username@example.com"
```

みんな大好き [WinSCP / PuTTYgen](https://winscp.net/) もサポートしています。
find で検索したファイルを一括で移動（mv）させる

色々なところにファイルが散らばっているときに一括で移動させたい場合は
以下のようにコマンドを叩けば移動できます。

```
find `path` -name `ファイル名のパターン` | xargs -I% mv % `path`
```

# やってみる

例えば以下の様にファイルが置かれていて

```
% tree
.
├── fuga
│   ├── image10.png
│   ├── image8.png
│   └── image9.png
└── hoge
    ├── fugafuga
    │   ├── image6.png
    │   ├── image7.png
    │   └── text3.txt
    ├── hogehoge
    │   ├── image4.png
    │   └── image5.png
    ├── image1.png
    ├── image2.png
    ├── image3.png
    ├── text1.txt
    └── text2.txt
```

一括で現在いるディレクトリに画像ファイル（png ファイル）を移動させたい場合は

```
find ./ -name '*.png' | xargs -I% mv % ./
```

という感じ。

実際に叩くと

```
% ls
fuga/        image1.png   image2.png   image4.png   image6.png   image8.png
hoge/        image10.png  image3.png   image5.png   image7.png   image9.png

% tree
.
├── fuga
├── hoge
│   ├── fugafuga
│   │   └── text3.txt
│   ├── hogehoge
│   ├── text1.txt
│   └── text2.txt
├── image1.png
├── image10.png
├── image2.png
├── image3.png
├── image4.png
├── image5.png
├── image6.png
├── image7.png
├── image8.png
└── image9.png
```

できた！
scikit-learnのMLPClassifierで得た重みとバイアスを使って、自分でニューラルネットワークを構築した時にどハマりした事


どハマりした内容
---

scikit-learnに実装されている多層パーセプトロン（MLPClassifer)で予測した内容と、あらかじめ学習して取得していた重み、バイアス行列を使った自作のニューラルネットーワクの予測が全く合わなかった。


先に結論
---

入力データの標準化をしていなかった...


どハマりした経緯
---

* 学習モデルの構築にPipelineを使って標準化、トレーニング、テスト（汎化性能）のチェックをしていた。
* <font color="red">最終的な重みとバイアスだけで、標準化をしていないデータにも対応できると勝手に思い込んでいた（恥）</font>



おまけ：MLPClassifierで取得した重み、バイアスでニューラルネットワークを構築
---

~~~
import numpy as np
import os
import sys
import pandas as pd # dataFrameを扱うライブラリ
from math import exp, expm1

input = [[入力データの配列]]
input = np.array(input)

df = pd.read_csv("入力データの標準化に使うデータ（学習させた時のデータ）")
df_x = pd.get_dummies(ダミー変数を生成したい列)

# 標準化！（ここを忘れていた）
sc = StandardScaler()
sc.fit_transform(df_x)
input = sc.transform(input)

bias0 = pd.read_csv("MLPClassieferから出力されたバイアスcsv", header=None)
bias0 = bias0.iloc[1:,1:].as_matrix()

weight0 = pd.read_csv("MLPClassieferから出力された重みcsv", header=None)
weight0 = weight0.iloc[1:,1:].as_matrix()

# 重み・入力 + バイアス
layer0 = np.dot(weight0.T, dummy.T) + bias0

# 隠れ層の活性化。今回はランプ関数で活性化した。
layer0 = np.clip(layer0, 0, np.finfo(layer0.dtype).max, out=layer0)

~~~


隠れ層だけ、入力と重みの線形結合を活性化関数に流して。。。
最後の出力層では、シグモイド関数で活性化

~~~
output_layer = np.dot(最後の隠れ層の重み, 最後の隠れ層に入るデータ) + 最後の隠れ層のバイアス

# シグモイド関数で活性化
1 / (1 + exp(-output_layer[0, 0]))
~~~

ここで[0, 0]になっているのは、２値問題を扱っているからだと思います。
GitHubの二段階認証が有効な環境でSourceTreeを使う

セキュリティ上の観点からGitHubの2段階認証を有効にしている方はいらっしゃるかと思います。しかし、この設定ではGitの認証が通らないためSourceTreeのアカウント認証がうまく行えない問題が発生します。ここではGitHubの２段階認証を有効にしている環境でも正常にSourceTreeを使えるようにします。要は自分がやらかしたのでメモとして残しているだけです。

# 1. トークンを発行する
簡単に言うとこのステップでトークンと呼ばれるパスワードの代替となる文字列を発行し、この文字列をSourceTreeで使用します。Googleアカウントでも似たようなものがありますね。

GitHubにログインして[アカウント設定画面](https://github.com/settings/profile)を開き、[Personal access tokens](https://github.com/settings/tokens)をクリックします。
![ScreenShot1](https://qiita-image-store.s3.amazonaws.com/0/69399/30953a54-2551-047f-a706-a7e033a9840b.png)

Generate new token(新しいトークンを作成)をクリックします。
![](https://qiita-image-store.s3.amazonaws.com/0/69399/e239ce9c-f4e2-c38a-0c7d-14bcfa767ece.png)

トークンの作成画面が開きます。Descriptionには分かりやすい名前をつけておきましょう。SourceTreeをインストールした端末の名前などお好きなもので構いません。
どこまでのアクセスを許容するかを指定しますが、**repoとuserにチェックを入れます。**これがミソです！
![スクリーンショット_2017-01-10_15_19_56.png](https://qiita-image-store.s3.amazonaws.com/0/69399/9366b598-5b3c-385e-e181-9e85ba346cea.png)


最後に、画面下部の
![](https://qiita-image-store.s3.amazonaws.com/0/69399/ce500656-c035-804b-ecfa-abce5fe5c342.png)
をクリックしてトークンを作成します。

トークンが生成されると謎の文字列が表示されます。この文字列は**一度しか**表示されないため、一通り作業が終わるまではこのまま開いておくべきです。(一通り作業が終わったら忘れて構いません。覚えていてもムダになるだけです。)
![](https://qiita-image-store.s3.amazonaws.com/0/69399/71bb7d9d-fbf8-b95b-4776-79957d567ad8.png)
もし何らかの理由で失ってしまった場合は再度発行したらオッケーです。

# 2. 発行したトークンでアカウントをリンクする

## :apple:macOSの場合
歯車のアイコンをクリックし、Accounts...を選択してアカウント設定画面を開きます。
![スクリーンショット_2017-01-10_14_38_37.png](https://qiita-image-store.s3.amazonaws.com/0/69399/8eb89072-b7a6-c83c-0559-1bff40e1c50a.png)

左下の[Add...]をクリックし、次のように入力します。

- ホストはGitHubを選択
- Auth TypeはBasicを選択
 - もしOAuthが使えるならおそらくこの記事は読む必要がありません
- ユーザー名はGitHub IDを入力
- パスワードに**先ほどのトークンを**入力

![スクリーンショット 2017-01-10 15.28.46.png](https://qiita-image-store.s3.amazonaws.com/0/69399/dbb5a20f-77f4-511f-e05a-dc2b535a3af8.png)

できたー！！✌('ω')✌三✌('ω')✌三✌('ω')✌
![スクリーンショット 2017-01-10 15.37.41.png](https://qiita-image-store.s3.amazonaws.com/0/69399/d34292a1-30ca-b646-155b-83ece7bd14f1.png)

これで、プライベートリポジトリを含む全てのリポジトリにアクセスできるようになりました！お疲れ様でした。

## :frame_photo:Windowsの場合

1. [新規・クローンを作成する]をクリックします。
2. :earth_asia:をクリックします。

![スクリーンショット (356).png](https://qiita-image-store.s3.amazonaws.com/0/69399/faf86ab6-2080-49ba-652c-8892d3332a43.png)

1. クローンできるリポジトリのリストが表示されます。[アカウントを編集]をクリックします。
2. ホストアカウントの一覧が表示されます。[追加]をクリックします。
3. ホスティングサービスにGitHubを選択します。
4. ユーザー名はGitHub IDを入力します。入力後少しだけ待つとログイン画面が表示されます。

![スクリーンショット (358).png](https://qiita-image-store.s3.amazonaws.com/0/69399/4e4be478-760d-93b2-a418-a07ae7a545e7.png)

このパスワード欄に先ほどのトークンを入力して[Login]をクリックします。
![スクリーンショット (360).png](https://qiita-image-store.s3.amazonaws.com/0/69399/d9654b84-d264-e605-7271-22a24daf6640.png)

できたー！！✌('ω')✌三✌('ω')✌三✌('ω')✌
![スクリーンショット (361).png](https://qiita-image-store.s3.amazonaws.com/0/69399/a5c43298-5009-cd3d-caa7-0523e90a3bda.png)

プライベートリポジトリを含んだ全てのリポジトリが表示されていますね！お疲れ様でした。
![スクリーンショット (362).png](https://qiita-image-store.s3.amazonaws.com/0/69399/b7f8f9d4-d977-f8a4-a9c0-1f69f07e6136.png)