OmniAICreator/Qiita-1.07M huggingface dataset:
新卒一年目に気づいた10のこと

## 背景
[株式会社FiNC](https://finc.com/)というスタートアップでAndroidの開発をしていて、初期の頃から開発に携わっています。
エンジニアとして全くの初心者でインターン生としてFiNCにジョインしました。

今新卒2年目で(インターン1年 + 新卒1年)、毎日Androidをセカセカ実装しています。
FiNCでは月に一回 Demo dayというエンジニアの1ヶ月の成果物の発表会があります。
結構カジュアルになんでも発表していいんですが、新卒として1年を振り返って欲しいと言われて発表したプレゼンが意外と反響があって(ウケテ？)ざっくばらんですが、メモ用として書き残しました。

## 結果がすべて 〜 Just Do It 〜
何事も結果が全てだということ。
結果を残していないスキルのないインターンの話は説得力もないし、誰も動かせない。
誰も動かせない人には、何も大きなことができない。
まずは結果を出して認めてもらう。そのためには泥臭く仕事をしていくことが何より重要であるということ。


## 極限状態で人は成長する 〜 Extreme Situations Make Humans Wild Animals 〜
エンジニアがたくさん集まっている現在とは違い、開発初期は人も少なく、誰も頼る人いなかったです。
そんな中での開発は大変でした。
技術力もない、頼れる人もいない。
そんな中でも会社を成長させるために、極限状態に追い込まれながらプロダクトを作っていました。
そういった状況に追い込まれた人間はなりふり構わず頑張るし、目の前のことに本気で集中できるんだなと感じました。
そしてそうなった状態が本当に人を成長させるんだなと思っています。
精神と時の部屋に入った気分でした。

## 健康第一 〜 Pursing Your Own Health 〜 
なにはともあれ健康が一番大事だなと感じています。
元々身体は強いんですが、FiNCに入って知識をつけることで、より健康になりました。
自分が仕事に集中できている今の状況はまさしく「健康」であるからです。
生活の糧である仕事において「健康」をコントロールすることは、全てのビジネスマンの課題です。
ちなみに[バターコーヒー](http://debusotsu.jp/3065)を毎朝飲んでいます。

## 旅の恥はかきすて 〜 Once Over The Border, One May Do Anything 〜
旅先では開放的になって普段より大胆になれます、普段やらないことをやります。
よくLife is a long journeyと言われますが、人生は旅です。
人生を旅と思うと普段より積極的に行動できる気がして、いつもその意識でいます。
それが失敗を恐れないことに繋がっています。

## 突破力は命綱 〜 Breakthrough Force Is The Only Lifeline 〜
頼れる人がいない戦場で頼りになるのは自分の問題解決能力と戦略。
これが低いと戦場で死ぬことになります。
初期のリソースが少ないスタートアップで働くと痛感するんですが、突破力は命綱です。
自分の武器を作ることはキャリアを形成していくことと繋がっているはずなので、ここも意識的に取り組んでいます。


## 筋トレは覚醒剤 〜 Workout Makes Your Work Time Unlimited 〜
僕は筋トレが趣味で、よくジムに通っているんですが、人と違うことをすることは非常に価値があると思っています。
筋トレは覚醒剤とよくわからない言葉を使っているんですが、自分にとって価値のあることを実行することは、自分のアイデンティティを深く知ったり、他人との差異を明確にする上で重要なプロセスです。

## ロールモデルの発見 〜 Google And Catch Your Role Model 〜
やっぱり自分で０から想像するより、ロールモデルを見つけて、パクって魔人ブウ並みに吸収するのが一番効率がいいです。
頼れる人にどんどん質問して、吸収して成長したときの成長率はかつて自分が一人でやっていたときと桁違いでした。

## 多様性はカオス　〜 Diversity is Chaos 〜
外国人の割合が結構高い会社なんですが、これは批判というわけでなく、英語、日本語という母国語が違う中で、共通の言語を持つ必要があるよということです。
多様性はすごくいいことなんですが、共通の基準を持たないと何が正しいかわからなくなったりするわけです。
もちろん会社の"ビジョン"がそれだったりするんですが、実際の実務においてはもっと粒度の細かいベーシックスキルやコンセプチュアルスキルを定義してあげたほうが混乱が生じることなく、ことが運びます。

## 仕事の8割はコミュニケーションの効率化 〜 Almost All Issues Come From Communication Mistakes 〜
企業が急激に成長するためには、ある程度カオスな状態であるということが必須なんじゃないかと思っています。
おそらくスタートアップが急激に成長する段階で問題となるのが、コミュニケーションラインの増加と未整備です。
FiNCは密にコミュニケーションをとっているので比較的うまくいっているなーと感じていますが、重要なことは"仕組み"でコミュニケーションラインを減少させること、未整備なラインを整備することです。

## 自分を信じること 〜 Believe In Yourself 〜
最後は何と言っても自分を信じてください。
結局正しい、正しくないという概念は、環境に依存した副産物です。
自分の思考を表現していきながら整理していくことが重要です。
(人のアドバイスを聞かないとは全く別の話です。)
上記以外の環境に依存しない要素を"真理"と僕は呼んでいますが、一つでも多くの真理にいきつくために日々精進しています。
emacsのgfm-modeで日本語入力がエラーになったのをなんとかした

コメント欄のとおり @syohex さんにご対応いただけました！ありがとうございました！

> ごめんなさい、全然うそです。なおってません・・・。なんでだろ。

> emacs の gfm-mode において、普段使っているときは特に問題ないんだけれど、コードブロック(バッククォート3つから始まるアレ)を書いて、日本語入力していると `out of range x, y` などと表示されて、全然まともに仕事にならないことがあった。

> なんだかパースエラーなんじゃないかなぁ・・・ということで、調べてみたら、おそらくコードブロックに、gfm-mode の知らない言語を指定されているとこのようなことになってしまうようだ。

> この gfm-mode の知っている言語一覧はバッククォート3つを入力すると、自動的に「どの言語の code なのか？」と問い合わせがでるのを tab を2度叩けば取得できる。めちゃくちゃある。

> この Qiita では `shell-session` なんてのがあるが、 gfm-mode にはない。こういう存在しないものを指定しているとエラーになってしまうようだ。

> # 解決方法

> 1. `M-x` で `customize-mode` を実行
> 2. `Major mode` をきかれるので `markdown-mode` と入力
> 3. 設定一覧があるので、`Markdown Gfm Additional Languages` の項目に行き、`INS` にカーソルをあわせて `enter キー`
> 4. `String:` に `shell-session` を入れてやる
> 5. 最上段に戻って `Apply and Save` を選択すればOK
npmでTypeScriptの型定義を管理できるtypesパッケージについて

どうも、らこです。

Angular 2の開発リポジトリでは型定義ファイルの依存解決に関して、最初はtsdだったのが途中でtypingsに移り、そして最近またtsdに回帰していたのですが、ついにtsdすらも使わず、npmだけですべてを解決するようになってました。

いったいどうやって？というのが今回のお話で、結論から言うと `@types` スコープから公開されているパッケージがdevDependenciesとして依存されるようになっていました。

## `@types`

https://www.npmjs.com/~types

typesという名前のユーザーで、明らかにbotだけど中身はMicrosoftの人らしい。(メールアドレスから)
どのパッケージもだいたい 2016/5/17 に最初のpublishがされているらしく、最近始まった取り組みのようです。

現在1700超のパッケージが公開されてますが、すべて型定義ファイルのパッケージです。型定義は https://github.com/DefinitelyTyped/DefinitelyTyped と自動で同期されているらしく、 DefinitelyTypedの1ライブラリが、typesの1パッケージに対応している感じです。
例えばAngularJSの型定義ファイルが欲しければ次のようにインストールします

```
$ npm install -D @types/angularjs
```

当然ながら、使うときはnode_modulesの中からd.tsファイルを読み込みます。
すべてのパッケージをチェックしたわけではないですが、基本的には `index.d.ts` がエントリポイントになっているようです。

```
/// <reference path="../node_modules/@types/angularjs/index.d.ts" />
```

## 所感
[tsd](https://github.com/DefinitelyTyped/tsd)しかり、 [dtsm](https://github.com/vvakame/dtsm)しかり、[typings](https://github.com/typings/typings)しかり、DefinitelyTypedから型定義ファイルをダウンロードするツールは、どのライブラリの型定義を得ようとしてもあの巨大なリポジトリを一度pullして、その中から一部を取り出すということが必要で、長いインストール時間にイライラしたことは皆さんあると思います。
typesの型定義パッケージを使うと個別になっているので自分が依存した分だけのダウンロードが行われて、いろいろと幸せそうです。
npmの仕組みに乗れるのでバージョン管理も楽ですし、コンフィグファイルの読み方を覚え直す必要もありません。

この取り組みが本当に公式にしっかりサポートされていくものなのか、ある種の実証実験でまだ乗っからないほうがいいのかわからないのですが、もしMicrosoftやTypeScriptの内部事情に詳しい人がいて知っていたら教えてほしいです。
AnsibrestをDockerにのせてみた

こんにちは。Ansible初心者エンジニアです。
最近仕事でもプライベートでもAnsibleに触れる機会が増えてきました。
そんな時 [SAKURAインターネットさんのブログ](http://knowledge.sakura.ad.jp/knowledge/4794/) で [Ansibrest](https://github.com/muddydixon/ansibrest) が紹介されているのを見て、
これは便利そうだ！ということで

# 試してみた
AnsibleでPlaybookを作成するときに、まずはlocalhostで試すことが多いと思います。
初心者な自分は思わず環境を破壊してしまうこともしばしば…
「それならDockerコンテナに閉じ込めてしまえば、何度でも初期化できて良いんじゃないか？」
と考えてDockerfile化してみました。

## コンテナ起動
[Dockerhub](https://hub.docker.com/r/panage/ansibrest/) (およそ320MegaBytes)

```bash
# コンテナ側2400ポートをホスト側の12400ポートにひも付け
docker run -d -p 12400:2400 --name ansibrest panage/ansibrest:latest
```

## ブラウザでアクセス
http://docker-machine-ip:12400/ へアクセス…
![image](https://qiita-image-store.s3.amazonaws.com/0/102563/b3c5ef06-8385-e278-0ffe-301032efe61c.png)
表示されました！

## サンプルのPlaybookを実行
Playボタンを押すと…
![image](https://qiita-image-store.s3.amazonaws.com/0/102563/6f35ae9e-4f4a-4e8a-d5bd-464ef485b3a9.png)
実行できました！

## APIにアクセス
```bash
# sample2.ymlを実行
curl -X POST "http://docker-machine-ip:12400/api/playbook/sample2.yml"
```

標準出力に…

```json
{"stdout":"\n
PLAY [Sample 2 use roles] ******************************************************\n\n
TASK [setup] *******************************************************************\n
ok: [localhost]\n\n
TASK [sample2/1 : Playbook 2 Role 1 Task 1] ************************************\n
ok: [localhost] => {\n
    \"groups\": {\n
        \"all\": [\n
            \"localhost\", \n
            \"172.0.0.1\"\n
        ], \n
        \"development\": [\n
            \"172.0.0.1\"\n
        ], \n
        \"local\": [\n
            \"172.0.0.1\"\n
        ], \n
        \"ungrouped\": [\n
            \"localhost\"\n
        ]\n
    }\n
}\n\n
TASK [sample2/1 : Playbook 2 Role 1 Task 2] ************************************\n
ok: [localhost] => {\n
    \"inventory_hostname\": \"localhost\"\n
}\n\n
TASK [sample2/2 : Playbook 2 Role 2 Task 1] ************************************\n
ok: [localhost] => {\n
    \"groups\": {\n
        \"all\": [\n
            \"localhost\", \n
            \"172.0.0.1\"\n
        ], \n
        \"development\": [\n
            \"172.0.0.1\"\n
        ], \n
        \"local\": [\n
            \"172.0.0.1\"\n
        ], \n
        \"ungrouped\": [\n
            \"localhost\"\n
        ]\n
    }\n
}\n\n
PLAY [Sample 2 not use roles] **************************************************\n\n
TASK [setup] *******************************************************************\n
ok: [localhost]\n\n
TASK [debug] *******************************************************************\n
ok: [localhost] => {\n
    \"inventory_dir\": \"/usr/local/lib/node_modules/ansibrest/ansible/inventories\"\n
}\n\n
PLAY RECAP *********************************************************************\n
localhost                  : ok=6    changed=0    unreachable=0    failed=0   \n\n
","stderr":""}
```
出ました！

# まとめ
Ansibleを使うことで何度でも同じ作業を間違いなく実施できます。
そこにAnsibrestが加わることで、ChatOpsにも取り込みやすくなりました。
さらにそれをDockerコンテナに閉じ込めることで、開発フェーズのテストを何度でも最初からやり直せるようになりました。
これからも、もっともっとAnsibleを使っていこうと思います。
超簡単 VimでBOM削除

ComposerでPSR-4を、、、って話はどうでもいいか。

とりあえず、namespaceをファイルの先頭に記述したときに、

```
Namespace declaration statement has to be the very first statement in the script
```

ってなったので、BOMが存在していると思いました。

コマンド以外でBOMを削除できないかと思い、たどり着いたのが以下の方法。

```
vim -b filename
```

Vim (Viでもいいけど) で当ファイルをバイナリモードで開き、BOMの16進数である、`<feff>` が先頭にあるので、それを消して保存するだけ。

簡単でしょ？
WebGL(OpenGL)の行列の並び方で躓いた事

#行列の並び順

```math
\begin{pmatrix}
0 & 1 & 2 & 3 \\
4 & 5 & 6 & 7 \\
8 & 9 & 10 & 11 \\
12 & 13 & 14 & 15
\end{pmatrix}
```

WebGLを勉強していて引っかかったのが行列の並び順。

DirectXなら上記のような並び方なのだが、
WebGL（OpenGL）では以下のような並び方で配列に格納される。

```math
\begin{pmatrix}
0 & 4 & 8 & 12 \\
1 & 5 & 9 & 13 \\
2 & 6 & 10 & 14 \\
3 & 7 & 11 & 15
\end{pmatrix}
```

行列同士の積のやり方は特に変わらず、
左項は行（横）方向、右項は列（縦）方向で計算される。
（【例】左項：a e i m、右項：A B C D）

```math
\begin{pmatrix}
a & e & i & m \\
b & f & j & n \\
c & g & k & o \\
d & h & l & p
\end{pmatrix}
\times
\begin{pmatrix}
A & E & I & M \\
B & F & J & N \\
C & G & K & O \\
D & H & L & P
\end{pmatrix} \\
=
\begin{pmatrix}
aA+eB+iC+mD & aE+eF+iG+mH & aI+eJ+iK+mL & aM+eN+iO+mP \\
bA+fB+jC+nD & bE+fF+jG+nH & bI+fJ+jK+nL & bM+fN+jO+nP \\
cA+gB+kC+oD & cE+gF+kG+oH & cI+gJ+kK+oL & cM+gN+kO+oP \\
dA+hB+lC+pD & dE+hF+lG+pH & dI+hJ+lK+pL & dM+hN+lO+pP
\end{pmatrix}
```
SlickGridメモ

# 固定列(固定行）対応版のバグ
SlickGridは複数のforkが存在しており、例えば以下は固定列（固定行）対応のものだったりする。
https://github.com/JLynch7/SlickGrid/tree/gh-pages
ただし、列固定を行った場合、ある条件下（例えば、非固定列が非常に長く、そこで列幅変更をした場合など）で固定部の値が消えるというバグがある。
slick.grid.js を修正することで対応できる(見た感じケアレスミス）。

```js
// appendCellHtml(stringArrayL, row, i, colspan); //Remove this line
appendCellHtml(stringArrayL, row, i, colspan, d); //Add this line
```

参考
https://github.com/mleibman/SlickGrid/issues/1002
http://stackoverflow.com/questions/31536065/slickgrid-freeze-column-issue-on-vertical-scrolling

# マウスホバーによるハイライト処理
拾ってきたスクリプトを直したもの。

```js
// var slickgrid = new Slick.Grid(...);
// hover時のcss切り替え(bg-yellow)
slickgrid.onMouseEnter.subscribe(function(e,args) {
  var cell = self.slickgrid.getCellFromEvent(e),
      param = {},columnCss = {};
      for(var index in columns){
          var id = columns[index].id;
          columnCss[id] = 'bg-yellow';
      }
      param[cell.row] = columnCss;
      // キー row_hoverと紐付けてcss設定
      slickgrid.setCellCssStyles("row_hover", param);
      e.preventDefault();
});
slickgrid.onMouseLeave.subscribe(function (e) {
      // キー row_hoverと紐付けられたcssを削除　　
      slickgrid.removeC　ellCssStyles("row_hover");
      e.preventDefault();
})
```
WordPressのwp_postsデータのIDを連番にする移行用MySQL文

comment_countに旧IDを仕込んで新wp_postsにINSERTするためのSQL。
post_date順にして、投稿データとattachmentデータを連続で並ぶようにする。

```sql:MySQL
SELECT
	ID,
	post_author,
	post_date,
	post_date_gmt,
	post_content,
	post_title,
	post_excerpt,
	post_status,
	comment_status,
	ping_status,
	post_password,
	post_name,
	to_ping,
	pinged,
	post_modified,
	post_modified_gmt,
	post_content_filtered,
	post_parent,
	guid,
	menu_order,
	post_type,
	post_mime_type,
	comment_count
FROM
	(SELECT
		ID,
		post_author,
		post_date,
		post_date_gmt,
		post_content,
		post_title,
		post_excerpt,
		post_status,
		comment_status,
		ping_status,
		post_password,
		post_name,
		to_ping,
		pinged,
		post_modified,
		post_modified_gmt,
		post_content_filtered,
		post_parent,
		guid,
		menu_order,
		post_type,
		post_mime_type,
		ID AS comment_count
	FROM
		wp_posts
	WHERE
		post_type != 'attachment'
	ORDER BY
		post_date
	) AS A
UNION
	SELECT * FROM
		(SELECT
			B1.post_parent AS ID,
			B1.post_author AS post_author,
			B2.post_date AS post_date,
			B2.post_date_gmt AS post_date_gmt,
			B1.post_content AS post_content,
			B1.post_title AS post_title,
			B1.post_excerpt AS post_excerpt,
			B1.post_status AS post_status,
			B1.comment_status AS comment_status,
			B1.ping_status AS ping_status,
			B1.post_password AS post_password,
			B1.post_name AS post_name,
			B1.to_ping AS to_ping,
			B1.pinged AS pinged,
			B1.post_modified AS post_modified,
			B1.post_modified_gmt AS post_modified_gmt,
			B1.post_content_filtered AS post_content_filtered,
			B1.post_parent AS post_parent,
			B1.guid AS guid,
			B1.menu_order AS menu_order,
			B1.post_type AS post_type,
			B1.post_mime_type AS post_mime_type,
			B1.ID AS comment_count
		FROM
			wp_posts AS B1
		LEFT JOIN
			wp_posts AS B2
		ON
			B1.post_parent = B2.ID
		AND
			B2.post_type != 'attachment'
		WHERE
			B1.post_type = 'attachment'
		ORDER BY
			ID
		) AS B
	ORDER BY
		post_date,
		ID
```
React.jsのformタグは 正:encType  誤:enctype


## Reactでファイルアップロードするなら注意
React.jsでformタグをつかってマルチパートデータとしてファイルアップロードするとき、
属性名は以下にしないといけない。
正：encType
誤：enctype

## 実例

### 正しい例

```js
// ソース
var SomeComponent = React.createClass({

  ...
 
  render: function() {
    return (
        <form action="/upload" method="POST" encType="multipart/form-data">
          <input type="file" name="file_input" />
          <input type="submit" value="Upload" />
        </form>
    );
  }
});
```

```html
<!-- レンダリング結果 - enctype属性が存在する😊 -->
<form action="/api/file" method="POST" enctype="multipart/form-data">
  <input type="file" name="file1">
  <input type="submit" value="Upload">
</form>
```

### 誤り

```js
// ソース
var SomeComponent = React.createClass({

  ...
 
  render: function() {
    return (
        <form action="/upload" method="POST" enctype="multipart/form-data">
          <input type="file" name="file_input" />
          <input type="submit" value="Upload" />
        </form>
    );
  }
});
```

```html
<!-- レンダリング結果 - enctype属性が存在しない！😢 -->
<form action="/api/file" method="POST">
  <input type="file" name="file1">
  <input type="submit" value="Upload">
</form>
```


## 理由
- HTMLタグに指定できる属性として、enctypeではなくencTypeが定義されている
  - Document - [Tags and Attributes](https://facebook.github.io/react/docs/tags-and-attributes.html) - [HTML Attributes](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes)

## 補足
- Reactのプロパティ名は、DOMのプロパティ名を基にしてないの？質問しているissueもあった
  - Issue [#4653](https://github.com/facebook/react/issues/4653) **Some DOM props do not match the spec. Do we "fix" them or give up saying props match the DOM spec?**
HTML5 canvasを使った矩形選択と選択範囲塗りつぶし

# 概要
- お絵かきアプリでよくある矩形選択→選択範囲塗りつぶしをcanvasとjavascriptを使って再現してみた。
- 備忘録として載っけておく。
- 業務で使うかも。


# 動作
![rectangleSelect.gif](https://qiita-image-store.s3.amazonaws.com/0/29247/fa747333-da28-4d5d-cbb1-764a364c833b.gif)


# ソース
```js:app.js
var app = (function (){
    //キャンバスエレメント
    var _displayLayer;
    var _drowingLayer;
    //描画コンテキスト
    var _ctxDisplayLayer;
    var _ctxDrowingLayer;

    // キャンバスサイズ
    var _canvasY;
    var _canvasX;

    // コンストラクタ
    var app = function (_display, _drowing) {
        _displayLayer    = _display;
        _drowingLayer    = _drowing;
        _canvasY         = _drowingLayer.clientHeight;
        _canvasX         = _drowingLayer.clientWidth;
        _ctxDisplayLayer = _display.getContext("2d");
        _ctxDrowingLayer = _drowing.getContext("2d");
        _drowingLayer.addEventListener("mousedown", onMouseDown, false);
        _drowingLayer.addEventListener("mouseup"  , onMouseUp  , false);
    };

    // 矩形オブジェクト
    var _rectangle = {
        startY:0,
        startX:0,
        endY:0,
        endX:0,
        clear:function () {
            this.startY = 0;
            this.startX = 0;
            this.endY   = 0;
            this.endX   = 0;
        }
    };
    function onMouseDown (e) {
        _rectangle.startY = e.clientY;
        _rectangle.startX = e.clientX;
        _drowingLayer.addEventListener ("mousemove", onMouseMove, false);
    };

    function onMouseMove (e) {
        _ctxDrowingLayer.clearRect(0, 0, _canvasX, _canvasY);
        _rectangle.endY = e.layerY - _rectangle.startY;
        _rectangle.endX = e.layerX - _rectangle.startX;
        _ctxDrowingLayer.strokeRect (_rectangle.startX, _rectangle.startY, _rectangle.endX, _rectangle.endY);
    };

    function onMouseUp (e) {
        _ctxDisplayLayer.fillRect(_rectangle.startX, _rectangle.startY, _rectangle.endX, _rectangle.endY);
        _rectangle.clear();
        _ctxDrowingLayer.clearRect(0, 0, _canvasX, _canvasY);
        _drowingLayer.removeEventListener ("mousemove", onMouseMove, false);
    };
    
    return app;
})();
```

```html:ImageEditTest.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>canvasを用いた画像編集アプリ</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div class="main">
        <canvas id="display" class="display" width="1280" height="720"></canvas>
        <canvas id="drowing" class="drowing" width="1280" height="720"></canvas>
    </div>
    <script type="text/javascript">
        var display  = document.getElementById("display");
        var drowing  = document.getElementById("drowing");
        var instance = new app(display, drowing);
    </script>
</body>
</html>
```

```css:main.css
.display{
    border: solid 1px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.drowing{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
```
エンジニア視点から見るWebサービスの全体像

初投稿です。ここ１年webサービスを作ったり案を練ったり勉強したりしたことを踏まえて現在のWebサービスの形についての記事を書いていこうと思います。

## 目的

技術的な視点でWebサービスの全体の設計を大雑把に解説考察することにより、全体像を非エンジニアにも理解してもらう。

WebAPIの役割と重要性について理解してもらう。


## 現在と過去のWebサービスの形

過去、現在のWebサービスの形は下図のようになっています。

![WebService - New Page.png](https://qiita-image-store.s3.amazonaws.com/0/125325/78b52038-8183-9299-64ac-47242544434b.png)

### 用語解説

- DB・・・データベース（個人情報などデータを格納する場所）

- WebAPI・・・特定のURLに値とともにアクセスするとデータベースから必要なデータを取ってきてそれをクライアント（ユーザー側）にそのデータを送信する。

- PC・・・パソコンのアプリケーション

- Browser・・・InternetExploreやChromeといったブラウザのこと

- Developer・・・WebAPIを利用する外部の開発者

- Phone・・・スマートフォンのネイティブアプリケーション

- Analyze・・・データ解析

- WebSite・・・静的webサイト


### 過去

- ブラウザからWebサイトにアクセスして、WebサイトはDBと一体になっていて必要になり次第DBからデータを引っ張ってくる。

- ある程度DBにデータが溜まったら、そのデータを解析してWebサイトに反映させたりマーケティングに活かしたりする。

### 現在

- DBからデータを引っ張ってくるための玄関口としてWebAPIを用意する。

- WebAPIからデータを引っ張ってきてフロントエンド(Webサイト)を構築する。

- WebAPIを多種多様なプラットフォーム（例：PC,SmartPhone）から叩けるよう(データを引っ張ってくる)にし、ネイティブアプリを作る。

- WebAPIを叩き(データを引っ張ってくる)、DBにあるデータを解析してマーケティングに活かす。

## 現在のWebサービスの中核にあるものは「WebAPI」である

WebAPIとはDBからデータを引っ張ってくるための玄関口であり、上図のように様々なプラットフォームからアクセスすることができます。これにより、汎用度もあがり、また開発の仕事の分担も楽になります。

## WebAPIのメリット

- WebAPIを作ることによって多種多様なプラットフォームからアクセスできるようになり、サービスの拡張がしやすくなる。

- WebAPIを外部に公開することによって、外部の開発者が使えるようになり、宣伝にもなり、またそのサービスに新たな価値が見出される可能性がある。

- サーバーサイドとそれ以外を分けることにより、仕事の分担が楽になる。

- WebAPIはバージョン管理ができるので、古いものと競合せずに新しいものが作れる。

- 処理が分けられてるのでバグが起きた時に特定しやすい。

## WebAPIのデメリット

- 大勢の目前に晒されるのでセキュリティに細心の注意が必要になるし、エンジニアの能力も必要になってくる。

- ブラウザやスマホからWebAPIを叩く（データを引っ張ってくる）時の通信の処理を書く分、エンジニアの能力が必要になってくる。

## 結論

WebAPIを使うことによって多少のデメリットがあるものの、開発面でもマーケティング面でも非常に多くのメリットがある。

## 最後に

これは自分が今まで学んできたことなので正しいとは限りません。多くの批判コメントが来ることを望んでいます。
Xcodeのrun scriptで、iOSアプリのビルド番号を手軽に自動採番する

会社のプロジェクトでCircle CIなどのCIサービスは使えない、
でもiOSアプリのビルド番号を自動採番したい！ってケースがあったので、
scriptを書いてみました。
~~El Capitanから`PlistBuddy`が使えなくなったため、
`defaults`コマンドと`plutil`を使っています。~~
El CapitanからPlistBuddyが使えなくなったというのは私の勘違いでした。。。
10.11.5で確認したところ、/usr/libexec/PlistBuddyに存在しています。
ご指摘くださった@takasekさん、ありがとうございます！

## やり方
以下のscriptの`path/to/Info`と`path/to/Info.plist`を自分のプロジェクト用に
書き換えて、Xcodeのrun scriptに追加するだけです。
1行目の`path/to/Info`もInfo.plistへのpathなのですが、拡張子は不要です。

```bash
build_number=$(defaults read "path/to/Info" CFBundleVersion)
build_number=$((build_number + 1))
/usr/bin/plutil -replace CFBundleVersion -string $build_number "path/to/Info.plist"
```

今まで通り、PlistBuddyを使って以下のようにも記述できます。(10.11.5で動作確認済)

```bash
build_number=$(/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "path/to/Info.plist")
build_number=$(($build_number + 1))
/usr/libexec/PlistBuddy -c "Set :CFBundleVersion $build_number" "path/to/Info.plist"
```

## その他
かっこよくバージョニングしたいならこちらのほうが良いかもしれません。
[これがXcodeでのバージョニングの決定版になるかも](http://www.tokoro.me/2014/05/19/xcode-versioning/)
Atomのscript packageをインストールする際に発生したエラーへの対処

Atom の script package は エディタ内で各種プログラムを実行可能にする便利なPluginです。
このPluginをインストールしようとしたところエラーが発生したのでその解決方法をまとめます。

## <i class="fa fa-warning" style="font-size:1em;"></i> エラー
![install1.png](https://qiita-image-store.s3.amazonaws.com/0/43480/70ed47f6-bf3d-31fd-135a-b780a76be9a4.png)
![install2.png](https://qiita-image-store.s3.amazonaws.com/0/43480/1ee0aad4-f024-8a93-d3b5-f1066713ebbc.png)

## <i class="fa fa-list" style="font-size:1em;"></i> 対策
### <i class="fa fa-cube" style="font-size:1em;"></i> ステップ1
atom-script を GitHub から https で直接 clone します

```bash
$ git clone https://github.com/rgbkrk/atom-script.git
```

### <i class="fa fa-cube" style="font-size:1em;"></i> ステップ2
* ~/.gitconfig に以下を追加

```
[url "https://"]
    insteadOf = git://
```

* atom-script プロジェクトの root フォルダで `npm install`

```
$ cd %atom-script%
$ npm install
```

以上でインストール完了です。 Atom を再起動してください。

* ~/.gitconfig に追加した内容を削除する

後片付け。

## <i class="fa fa-play-circle" style="font-size:1em;"></i> デモ
script package の動作確認です。
Ruby,Crystalのスクリプトをそれぞれエディタ内で実行しています。

![atom-script.gif](https://qiita-image-store.s3.amazonaws.com/0/43480/b25024dc-06cc-4904-6a2f-3285761024b6.gif)

## <i class="fa fa-book" style="font-size:1em;"></i> 関連情報
* [atom script package](https://atom.io/packages/script)
* [atom script package - GitHub](https://github.com/rgbkrk/atom-script)
（跡地）CSVと文字エンコードで悩んで、後からUTF-8に変換した、ruby力低い話


#　注意

内容がグダグダなので、以下に書き直しました。

Ruby文字エンコードに悩まされ、直接指定やnkfによる推測などを試した
http://qiita.com/rojiuratech/items/9d40cb294eb08f2204ac

# 概要

RubyでUTF-8ではないCSVを読み込み、取り扱う話。
直接読み込もうとしたらダメだったが。一旦変換掛けててから扱えば
すんなりと通った。



# 環境

- ruby 2.2.3

# CSVライブラリで、UTF-8でないCSVが読み込めない。

他部門はWindowsPCを使っており、MS-ExcelでCSVファイルを保存しようとすると、Shift_JISで保存されてしまいます。

ところが、Rubyに最初からあるCSVクラスで、UTF-8以外のファイルを開こうとすると・・・。

```bash:エラー抜粋
/ruby/2.2.0/csv.rb:2007:in `=~': invalid byte sequence in UTF-8 (ArgumentError)
rom read_csv.rb:3:in `<main>'
```

などというエラーが発生。

```bash:エラーが発生したソースファイル
require "csv"

data = CSV.read(ARGV[0])

data.each do |str|
  p str.toutf8
end
```

UTF-8的に正しくないバイトシーケンスが混じっていて、そこでコケたようです。

この辺りは下記リンクでも述べられています。

sonnets:blog
Ruby の invalid byte sequence in UTF-8 例外を encode("UTF-8", "UTF-8") で回避するのはおかしいよ、という話

http://blog.livedoor.jp/sonots/archives/23652294.html

。

# 過去やっていた、ひどい対応

CSVファイルをエクセルで読み込んで、それをxlsx形式で保存し、
roo（ruby上でスプレッドシートを扱うGem）を使って読み込みインポート・・・。などの、やむをえないけど意識低いことをやってた。

# 先日のkawasaki.rbで、文字コードの変換話が出た

パーフェクトRubyで、文字列の文字コードを変換して、同じ値か比較する・・・。みたいな話が出てきた。

なら、文字エンコードを変換して与えれば良いのでは？！

# 方針

読み込むCSVファイルは、ただのテキストファイルとして読み込む。
この時、文字コードをUTF-8にして読む。
UTF-8に変換後のデータを、CSVクラスで扱う。

追記！　正しくは `File.read` です。

```ruby:CSVファイル読み込み、変換スクリプト
# 使用するライブラリを読み込む
require 'kconv'
require 'csv'

#読み込み対象ファイルのパスを受け取る
read_file = ARGV[0]

# 読み込み対象ファイル
raw_str = ""

#読み込み対象のファイルを、一度に読み込む
raw_str = File.read(read_file)


# raw_str = File.open(read_file)
#　読み込んだものを配列化
mod_str = CSV.parse(raw_str)

#1行ずつ表示する
i = 0
mod_str.each do |str|
  p i
  p str
  i = i + 1
end
```

ためしによみこむファイル

```csv:読み込み対象
品名,種類,値段
棍棒,武器,60
薬草,drug,10
毒草,drug,1
,(空欄）,2000
いつもの,何か,45くらい
,,
```

```bash:実行結果
$ ruby read_sjis.rb fake_euc.csv
0
["品名", "種類", "値段"]
1
["棍棒", "武器", "60"]
2
["薬草", "drug", "10"]
3
["毒草", "drug", "1"]
4
[nil, "(空欄）", "2000"]
5
["いつもの", "何か", "45くらい"]
6
[nil, nil, nil]
```


# このやり方が真価を発揮するのは・・・

セル内改行を含むケース。だと思う。
Raspberry Pi＋USBカメラで簡易ライブカメラ

# Spec.
- Raspberry Pi 3
- 適当なUSBカメラ
- [Motion](http://www.lavrsen.dk/foswiki/bin/view/Motion/WebHome) Version 3.2.12+git20140228

# インストール〜起動

```
$ sudo apt-get install motion

$ vi ~/motion.conf
width 640
height 480
framerate 2
minimum_frame_time 5
stream_port 8081
stream_localhost off
output_pictures off

$ motion
```

適当なWebブラウザから `http://<IPアドレス>:8081/` にアクセス。

上記設定は5秒に1回の映像更新でファイル保存なし。
- ストリーミング動作中（上記URLアクセス）のCPU使用率は5〜10％程度。
- 非アクセス時はプロセスのCPU使用率2％以下。
Python 那些事儿 (二)



# mod_wsgi って


正如我们常说的,对于` mod_wsgi` 来说,他对于 apache 来说就是一个` module`.
而对于它的使用和配置,通常会有两种选择,

1. 嵌入模式
2. daemon 模式

第一个模式简单说就是它有关 python 的东西请求过来就🈶它负责了.而这个都是有 apache 的普通 worker 进程来处理的.

第二种就是 `mod_wsgi` 它自己本身会启动进程来处理请求, 当apache 服务器接到 python 的请求处理时,就委派给这些常驻进程来处理了, 这样做的好处有很多, 和 apahce 的 worker 进程分离,不需要重启 apache 当我们修改了 python 的脚本, 或者性能不会影响 apahce 本身因为往往一个 apahce 会负责好多子进程.

今天这里先来说说第一个嵌入模式, 其实这个很简单了. 就是

1. 安装 apache 如果没有
2. 安装 mod_wsgi 模块
3. 配置 vhost( 假设我们要通过 vhost 的方式)
4. 重启 apache


---

下面就是一个参考链接:
1. http://www.cyberciti.biz/faq/linux-install-and-start-apache-httpd/
2. https://www.digitalocean.com/community/tutorials/installing-mod_wsgi-on-ubuntu-12-04
3. 这里算是本文的重点,当然只是相对来说,毕竟对于安装 apache 或者 mod_wsgi 来说都是很简单的.

```bash
<VirtualHost *:80>
    ServerName python.xiangzhuyuan.com:80

    WSGIScriptAlias / /var/www/flaskdemo1/flaskdemo1.wsgi

    <Directory /var/www/flaskdemo1>
        Order deny,allow
        Allow from all
    </Directory>
</VirtualHost>
```

### How to setup Embedded mode

这里就是一个简单的嵌入模式了. 假设我们配置一个` python.xiangzhuyuan.com`的子域名,
然后就是映射具体的` URL` 到` WSGI` 文件. 关于如何书写这个 WSGI 文件, 这个主要是遵循`PEP333`接口定义,一个接受2个参数,返回一个可遍历结果的名为` application` 的函数.
如最简单的` hello world` 例子
:+1: 


```python
def application(environ, start_response):
    status = '200 OK'
    output = 'Hello World!'

    response_headers = [('Content-type', 'text/plain'),
                        ('Content-Length', str(len(output)))]
    start_response(status, response_headers)

    return [output]
    
```

这个就是. 试着跑一下吧.

### How to setup daemond mode

再看看怎么配这个吧,和刚才的类似,我们这样配:

```bash
<VirtualHost *:80>
    ServerName python.xiangzhuyuan.com:80

    WSGIDaemonProcess flaskdemo1 user=matt group=matt processes=2 threads=5
    WSGIProcessGroup flaskdemo1
    WSGIScriptAlias / /var/www/flaskdemo1/flaskdemo1.wsgi

    <Directory /var/www/flaskdemo1>
        Order deny,allow
        Allow from all
    </Directory>
</VirtualHost>
```

这里主要的变化就是:

```
    WSGIDaemonProcess flaskdemo1 user=matt group=matt processes=2 threads=5
    WSGIProcessGroup flaskdemo1
```

详细看 http://modwsgi.readthedocs.io/en/develop/configuration-directives/WSGIDaemonProcess.html . 这具体的目的就是当配置为 daemon 模式之后, apache 会启动单独的进程用来处理 apache 委托给它的请求. 具体怎么启动这个进程, 起多少这些就在这里声明.

是不是很简单. 不过虽然它跑起来了, 而对于程序员来说, 还是有很多地方需要深入. 怎么调优 apache 和 `mod_wsgi` 之间的协作关系, 多少进程线程这都是需要优化的.
VHDL入門 > CLKの立ち上げ時に反転する

参考: VHDLによるFPGA設計 & デバッグ by 松村謙 & 坂巻 佳壽美


## 実装

CLKの立ち上がりを検出して、FLIPという信号(Qに接続)をH/L反転する

## code

http://www.edaplayground.com/x/5vyz

`if (CLK'event and CLK = '1') then`で立ち上がりを検知。

http://qiita.com/nYaaJee/items/7404a387f9e404757869
で別の方法も合わせて詳しい。


```design.vhd
library IEEE;
use IEEE.std_logic_1164.all;

entity CLOCK is
port ( CLK: in std_logic;
       Q : out std_logic);
end CLOCK;

architecture RTL of CLOCK is
    signal FLIP : std_logic := '0';
begin
  Q <= FLIP;
  process(CLK)
  begin
    if (CLK'event and CLK = '1') then
      if (FLIP = '0') then
        FLIP <= '1';
   	  else
        FLIP <= '0';
      end if;
    end if;
  end process;
end;
```

```testbench.vhd
library IEEE;
use IEEE.std_logic_1164.all;

entity testbench is
end testbench;

architecture SIM of testbench is
    signal I_CLK : std_logic := '1';
    signal I_Q : std_logic := '0';
component CLOCK
    port ( CLK: in std_logic;
       Q : out std_logic);
end component;

begin
    process begin
        I_CLK <= '1';
        wait for 10 ns;
        I_CLK <= '0';
        wait for 10 ns;
    end process;

    process begin
        wait for 100 ns;
        -- to end the testbench
        assert false
        report "end." severity FAILURE;
    end process;

    U1: CLOCK port map(CLK => I_CLK, Q => I_Q);
end SIM;
```

## 結果

CLKの立ち上がり時にFLIP(=Q)が反転した。

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/02303dfd-8ead-f2ca-84e7-489d640694b9.png)
Docker for Mac(beta)を入れてswagger-editorを動かしてみた

# ベータ使用の申請
1. [dockerベータのサイト](https://beta.docker.com/)よりDocker IDでログインし、幾つかの情報を入力して「Submit」を押して申請。
2. メールが届くまで待つ

# Docker for macのインストール
1. メールに記載のリンクからアクセスし、「Docker for mac」をダウンロードする。
2. ダウンロードしてきたDocker.dmgを開いて、ApplicationsにDockerをドラッグしてインストールする。
3. Docker.appを開く。
![DockerForMacInstall_01.png](https://qiita-image-store.s3.amazonaws.com/0/43800/6cc863c2-c24a-ed99-ddca-5aace6cc88e3.png)

4. メールに記載されていたトークンを入力する。
![DockerForMacInstall_02.png](https://qiita-image-store.s3.amazonaws.com/0/43800/7110cd21-0083-873d-42bb-07e5a1364674.png)

4. 開いてDockerが起動していると、ステータスバーにクジラのアイコンが表示されます。
![DockerForMacInstall_04.png](https://qiita-image-store.s3.amazonaws.com/0/43800/bd801147-f1c6-096a-b7fe-78bb02354ec3.png)

# swagger-editorを動かす
適当なディレクトリを作成し、その配下にdocker-compose.ymlを作成する。

```yaml
version: '2'
services:
  swagger-editor:
    image: swaggerapi/swagger-editor
    ports:
      - "80:8080"
```

docker-composeで起動する。

```zsh
$ docker-compose up -d
```

ブラウザでlocalhostにアクセスしたらswagger-editorを使用できるはずです。

<img width="1246" alt="スクリーンショット 2016-05-26 21.55.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/43800/d66c77eb-2cd0-1988-310d-8bf5ac972590.png">
VHDL入門 > CLK生成

参考: VHDLによるFPGA設計 & デバッグ by 松村謙 & 坂巻 佳壽美

## 実装

- 10nsごとにH,Lを切替えるCLKの生成
- 100nsで停止する

## code

上記の本の情報を元に、自分なりに考えてみた。

http://www.edaplayground.com/x/bju

```design.vhd
library IEEE;
use IEEE.std_logic_1164.all;

entity CLOCK is
port ( CLK: in std_logic);
end CLOCK;

architecture RTL of CLOCK is
begin
end;
```

```testbench.vhd
library IEEE;
use IEEE.std_logic_1164.all;

entity testbench is
end testbench;

architecture SIM of testbench is
	signal I_CLK : std_logic := '1';
component CLOCK
	port ( CLK: in std_logic);
end component;

begin
    process begin
    	I_CLK <= '1';
       	wait for 10 ns;
        I_CLK <= '0';
       	wait for 10 ns;
   	end process;
    
    process begin
    	wait for 100 ns;
        -- to end the testbench
        assert false
        report "end." severity FAILURE;
  	end process;
    
    U1: CLOCK port map(CLK => I_CLK);
end SIM;
```

testbenchの1つめのprocess beginでCLKを生成しつつ、2つめのprocess beginでシミュレーションを停止する時間を100nsとしている。

## 結果

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/3ebf3cfb-6556-e7d6-932f-cc8fb2458413.png)
Sketchはじめよう

# はじめに
- UI作成に特化したツールです。([SketchApp](https://www.sketchapp.com/))

# Sketchの特徴
- UIに特化し機能がシンプル（イラレほど多機能ではないですがUI用途ならちょうどいいです）
- 書き出しが楽！（多デバイスへの書き出しが超楽です）
- 価格も比較的安い（買い切りで1万くらいなので比較的安い）

[参考：UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由](http://liginc.co.jp/web/tool/mac-iphone/165286)

# まずはここから
- まずはとっかかりとしてこのチュートリアル一度やってみることをオススメします。
- これをやれば最低限の使い方が分かります。
- http://ascii.jp/elem/000/001/032/1032101/

# 基本的な使い方
- こちらがわかりやすくまとめてあります。

[Sketchを買ったら読んでおきたい！基本的なことからちょっとした小技、ショートカットまとめ](
http://memo.goodpatch.co/2013/05/sketch-tips/)

# 便利なPlugin
- Content Generator for Sketchは一度お試しあれ。
- http://matome.naver.jp/odai/2142461092267246101

# オススメ連携アプリ
## Prott
- Prottと連携すると更に便利！画面遷移など一連の動作の流れを作ることができます。
- https://blog.prottapp.com/post/ja/sketch-integration

## Zeplin
- Sketchで作ったデザインをWebブラウザ上から簡単に確認できるツールです。
- 余白の距離やパーツの縦横、カラーコードを取得できるのがZeplinのメイン機能です。
- 画像出力などディレクション時に使うと最強です。
- https://zeplin.io/

# 探してみよう
- UIやアイコンのサンプルなど豊富にあります
- http://www.sketchappsources.com/
自作した自宅用メインマシンをKVMホストにした

## 概要
[前回記事](http://qiita.com/omakenoyouna/items/cfc9cfd74f02342e397c )で自作したメインマシンにCentOSをインストールし、KVMのホストとしました。
機能が限定的な無償版のESXiを入れるのは諦めました。

## ESXiとKVMについて
前回記事まではESXiを入れるつもりだったのですが、RAIDを認識してくれないことが判明したのでやめました。

サポートしているI/O製品が検索できます。
https://www.vmware.com/resources/compatibility/search.php

今回使おうとしていたのはマザーボードによるRAIDで、ハードウェアRAIDとソフトウェアRAIDの中間にあるFakeRAIDです。
OSの設定で実現するソフトウェアRAIDとは違い、OS側で特別な設定を意識せずにRAIDが組めますが、RAIDボード上でRAID処理を実現するハードウェアRAIDとは違い共用のCPUでRAID処理を行います。
とは言えCPUに命令を出すのはOSなので、そこにオンボードのRAID回路が影響を与えるのは少し気持ち悪い気もしているのですが...
そう考えるとRAID諦めてもう普通に定期的バックアップで運用したほうが良い気もしてしまいます。
https://www.centos.org/forums/viewtopic.php?t=1365

いつかハードウェアRAIDにしたいなと思いつつ、これでスタートします。

ESXi-FakeRAIDに関してはこんな報告もいろいろあります。
http://serverfault.com/questions/407305/getting-vmware-esxi-5-0-0-with-raid-using-the-intel-x79-chipset-to-work

## UEFI

下記マニュアルに従ってRAID設定を行います。
せっかくなのでUEFI Setup Utilityでの設定を行いました。
ftp://europe.asrock.com/Manual/RAID/H170M%20Pro4/English.pdf

UEFIを利用するか、BIOSを利用するかで異なるようです。

マニュアル通りに問題なく設定できました。

ついでにUEFIについて色々触りました。新鮮。
BIOSを規格化し、また16bit時代の名残を一新したものだそうです。
http://orumin.blogspot.jp/2014/12/whats-uefi.html?m=1

## CentOS

CentOSをUSBで焼きます。
参考サイトが7系で実施していたため、あえて7系でやってみました。

注意点として、USBからインストーラ起動時にUEFIブートを明示的に選択しない場合、OSがBIOSモードでインストールされます。
grubのディレクトリ構造が異なるため、そうするとUEFIでブートできなくなります。

というわけで上記だけひっかかって、CentOSのインストールを通常通り完了させました。

## 以降の予定

KVMを入れてみます。
VHDL入門 > ORを取る実装 | assert false | processの使用

参考: VHDLによるFPGA設計 & デバッグ by 松村謙 & 坂巻 佳壽美


## 実装

入力AとBのORを取る実装 (ORing: オアリング（オーリングではない））

ここでは以下の学習もした

- processでのI_A, I_Bの時間操作
   - wait for X nsの使用
- assert falseでのprocessの抜け方
   - assert falseをいれないと無限ループに陥る

## code

http://www.edaplayground.com/x/3B_c

- design.vhd : 設計した回路
- testbench.vhd : 回路のテスト用

```design.vhd
library IEEE;
use IEEE.std_logic_1164.all;

entity ORing is
port ( A,B : in std_logic;
		Y : out std_logic);
end ORing;

architecture RTL of ORing is
begin
	Y <= A or B;
end;
```

```testbench.vhd
library IEEE;
use IEEE.std_logic_1164.all;

entity testbench is
end testbench;

architecture SIM of testbench is
	signal I_A : std_logic := '0';
	signal I_B : std_logic := '0';
	signal I_Y : std_logic := '0';
component ORing
	port( A,B : in std_logic;
    		Y : out std_logic);
end component;
begin
	process begin
    	I_A <= '0';
        I_B <= '0';
        wait for 10 ns;
        I_B <= '1';
        wait for 10 ns;
        I_A <= '1';
        I_B <= '0';
        wait for 10 ns;
        I_B <= '1';
        wait for 10 ns;
        -- to end the testbench
        assert false
        report "end." severity FAILURE;
	end process;
    
    U1: ORing port map(A => I_A, B => I_B, Y => I_Y);
end SIM;
```

## 結果

A, BのORを取れている。

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/16be27dc-4ebf-1c9a-e98b-ff8338764a70.png)
EDA playground > testbench.vhdのentityはtestbenchにする / 初めてのVHDL

VHDLのonline実行ツール
http://qiita.com/7of9/items/0057dc6a7faca63ee2d8

XORのVHDLコードを実装してみた。
http://www.edaplayground.com/x/dgE

最初、entity名を以下のようにXOR_TESTとして、ファイル名をtestbench.vhdというテストベンチにしていた。そうするとRunした時に testbenchが見つからないというエラーが出ていた。

```
entity XOR_TEST is
end XOR_TEST;
```

テストベンチのentityをtestbenchに変更すると、エラーは出なくなった。
ファイル名とentity名は同じにした方がいい、と今日読んだ本に書いていたのを思い出した。

しかし実行した所で波形が出るわけでもないので、実装が成功しているのかはいまいち分からない。

。。。と思っていた時期が自分にもありました。

Open EPWave after runのチェックをオンにするとRunの後に波形が出た。

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/63877295-7592-3e36-0c4c-8777e74c31e5.png)
Safari のページタイトルとURLをクリップボードにコピーする AppleScript

### Sarari のURLとタイトルをコピー
 Safari で表示しているページをメモしたりするときに、ページのタイトルとURLをセットで使いたいですよね。

　手動だと、ページタイトルを選択してコピー、それを何処かに貼り付けておいて、URLを選択してコピーして、貼り付けるという手順になって結構面倒。

　なので、だいぶ前に AppleScript でこんなコードを書いて、最近まで使っていました。

```AppleScript:URLcopy.scpt
tell application "Safari"
	set thisURL to URL in front document
	set thisTitle to do JavaScript "document.title" in front document
	set the clipboard to thisTitle & return & thisURL
end tell
```

### Safari のバージョンアップでエラーが出る！
　ところが、最新の Safari では JavaScriptの実行が制限されて、エラーで動かなくなってしまった。（「開発」メニューの「Apple Events からの JavaScript を許可」を選択すると実行するようにはなる）

　ということで、AppleScript の Safari拡張である do JavaScript を使わないバージョンに変更したのがこちら。

```AppleScript:URLcopy2.scpt
tell application "Safari"
	set thisURL to URL in front document
	set thisSource to source in front document
	ignoring case
		set titleBegin to the offset of "<TITLE>" in thisSource
		set titleEnd to the offset of "</TITLE>" in thisSource
	end ignoring
	set thisTitle to characters (titleBegin + 7) thru (titleEnd - 1) of thisSource as string
	set the clipboard to thisTitle & return & thisURL
end tell
```

HTML ソースから title タグを探しているので、HTMLの書き方によっては上手く行かないかもしれませんが、ま、大体は動くということで。

ちなみに、こんなブックマークレットでも実現できるのだが...

```JavaScript:URLcopy.js
javascript:prompt('Title%20%28Return%29%20URL',document.title+'%20%3d%3d%3e%20'+location.href);
```
ダイアログが表示されたら編集メニューでコピーするとタイトルとURLがクリップボードにコピーされます。（prompt では改行コードが入れられなかったので、代わりに「 ==> 」で区切るようにしました）
Scalaをはじめてみるメモ MacにScalaをインストールするところから


[Scalaハンズオン](http://connpass.com/event/30007/)に向けて予習しようかと思い試してみたメモです。
対象はMacです。

## Scalaコマンドのインストール

ターミナルでscalaコマンドを実行確認すると`not found`な感じですね。

```bash
$ scala
bash: command not found: scala
```

ダウンロードしてきましょう。

http://www.scala-lang.org/download/

`Scala2.11.8`を選択してダウンロードして解凍します。

![](https://i.gyazo.com/d823580a2d369dbec069b3aeeff3c1a3.png)

### パスを通す

僕は`~/tool/`にscalaフォルダを設置したのでこんな感じで`export`したり`.bashrc`に書き込んだりでパスを通します。

```bash
$ export PATH=$HOME/tool/scala/bin:$PATH
```

### JDKがなかった

scalaコマンドが使えるようになりますが...

```bash
$ scala
No Java runtime present, requesting install.
```

JDKをインストールしろと怒られました。
![](https://i.gyazo.com/7a8e4f6245c5373343d09a7290a2fdf7.png)

[こちら](http://www.oracle.com/technetwork/java/javase/downloads/index.html)からJDKをダウンロードしましょう。

![](https://i.gyazo.com/ba6a69bb07ba05bbbc32824f35528f3d.png)

ライセンスの許諾をして`MacOS X`を選択してDLします。
![](https://i.gyazo.com/4385910d09c13ff93ccecfd60f603e5a.gif)


DLした`jdk-8u91-macosx-x64.dmg`を実行してscalaのインストールをします。 (時期やバージョンによってファイル名などは変動すると思います)
![](https://i.gyazo.com/93f66bffe7582dcd3f680160f048bf39.png)

```bash
$ scala
Welcome to Scala 2.11.8 (Java HotSpot(TM) 64-Bit Server VM, Java 1.8.0_91).
Type in expressions for evaluation. Or try :help.

scala>
```

**scalaコマンドが動きましたね！**

## ハローワールド

以下のファイルを作成します。 Hello Wroldです。

```hello.scala
object HelloWorld {
  def main(args: Array[String]) {
    println("Hello, world!")
  }
}
```

`hello.scala`というファイル名にしましょう。
実行します。

```bash
$ scala hello.scala

Hello, world!
```

これでハローワールドできましたね。

##感想

JDKをいれてなかった件はWebやってた人がScala入る時のあるあるなのかなぁって思ったりしました笑
はてな匿名ダイアリーのトラックバックを全部オープンするtampermonkey Script

[Tampermonkey](http://tampermonkey.net/) というuserScript用

三角の下ボタンを全部押してるだけ。半手動だから許して

```js
// ==UserScript==
// @name         増田のリンク全部オープン
// @match        http://anond.hatelabo.jp/*
// @grant        GM_registerMenuCommand
// ==/UserScript==
GM_registerMenuCommand("増田のリンク全部オープン",openAll);
function openAll(){
    var nodes=document.querySelectorAll("a[onclick^='toggleTBContent']");
    for(var i=0;i<nodes.length;i++){
        var onc=nodes[i].getAttribute("onclick");
        var match=onc.match(/toggleTBContent\('(.+?)'\)/);
        if(!match){
            continue;
        }
        var id=match[1];
        toggleTBContent(id);
    }
}

```

このスクリプトを登録して、増田を開いて、トラックバックが伸びてるエントリーだったらchrome拡張のボタンからこれをクリック

![imgTemp-2016-05-26-20-03-07.png](https://qiita-image-store.s3.amazonaws.com/0/5825/8cba2702-31b7-6c44-9cb6-d9e071efdc97.png)
UE4 Timelineでコンポーネントを動かす

#Timelines ノード

## 公式ドキュメント
Timelines ノード
https://docs.unrealengine.com/latest/JPN/Engine/Blueprints/UserGuide/Timelines/index.html

## タイムラインノードを使ってコンポーネントを動かす

**ブループリント Timelinerを作成する**
1. ブループリントクラスの作成
2. アクターを選択
3. 名前を[Timeliner]に設定する

**コンポーネントに[球]を追加する**
![ｓ20160526_Qiita_UE4OSC_018.png](https://qiita-image-store.s3.amazonaws.com/0/111261/1bfa990e-c6a7-ef53-cfb9-0b25a27f79cc.png)

**タイムラインを追加する**
![ｓ20160526_Qiita_UE4OSC_017.png](https://qiita-image-store.s3.amazonaws.com/0/111261/d36b0fca-30ee-26de-3bf5-9d4040e7e5c5.png)

**作成したタイムラインをダブルクリックする**
![ｓ20160526_Qiita_UE4OSC_019.png](https://qiita-image-store.s3.amazonaws.com/0/111261/cf9dd8c3-68d5-ff2c-1892-38b6a2dfea22.png)

**フロートトラックの追加**
![ｓ20160526_Qiita_UE4OSC_020.png](https://qiita-image-store.s3.amazonaws.com/0/111261/a79acb51-f2a7-2682-7cc5-4e4ed4ff5786.png)

**キーの設定**
![ｓ20160526_Qiita_UE4OSC_021.png](https://qiita-image-store.s3.amazonaws.com/0/111261/fb0b990d-f4ad-f5fa-1c18-f356649abfe8.png)

**行って帰ってくるような線にする**
ループにチェックを入れるとループする
![ｓ20160526_Qiita_UE4OSC_022.png](https://qiita-image-store.s3.amazonaws.com/0/111261/880c07c9-9378-ef77-323f-b677fffb77f0.png)

**アクターの動きをタイムラインで更新する**
![ｓ20160526_Qiita_UE4OSC_023.png](https://qiita-image-store.s3.amazonaws.com/0/111261/ba98433e-c876-feb8-a79d-66e682a0b135.png)

**プレイすると球が行ったりきたりする**
![ｓ20160526_Qiita_UE4OSC_024.png](https://qiita-image-store.s3.amazonaws.com/0/111261/9a2a90dc-f2a2-7f39-22b9-b1b595edc87f.png)
Docker GUIを使用してWordPress(+MySQL)構築

今更感満載ですが、巷でDockerが流行っているようなので、WordPressを構築してみる！
（Dockerって何？？という話は割愛）

今回はKitematic(カイトマティック)というDocker GUIを使用します。
## Docker toolboxのインストール
https://www.docker.com/toolbox

## Kitematicを起動
- こんな画面が立ち上がります。
![スクリーンショット 2016-05-26 17.05.06.png](https://qiita-image-store.s3.amazonaws.com/0/122036/b8455062-db52-c2ff-45ba-00ce332b60a8.png)


##  MySQLコンテナの作成
- 検索ボックスにmysqlと入力。officialのコンテナを作成します。
![mysql.jpg](https://qiita-image-store.s3.amazonaws.com/0/122036/1620d6fe-812d-8b41-877c-cdf661c06836.jpeg)

- 作成するとコンテナが起動します。
- コンソールに「rootパスワードを設定して下さい」とエラーが表示されます。
![スクリーンショット 2016-05-26 17.09.31.png](https://qiita-image-store.s3.amazonaws.com/0/122036/3cc2694f-8a99-0d66-ff72-39b1abb31b08.png)

- Settingsタブから環境変数を追加します。
 - MYSQL_ROOT_PASSWORD に 'password（任意なパスワード）' を設定します。
 - Saveで保存。

![mysql2.jpg](https://qiita-image-store.s3.amazonaws.com/0/122036/79a813f9-0f4c-2ebe-36fd-06b33048ea12.jpeg)


- Homeタブでコンソールに戻るとMySQLが起動できたようです。

![スクリーンショット 2016-05-26 17.28.40.png](https://qiita-image-store.s3.amazonaws.com/0/122036/9a650401-9487-823a-862d-6ca5473623e1.png)


## WordPressコンテナの作成
- 上記同様の手順でWordPressのコンテナを作成・起動します。
- MySQL接続情報を環境変数に追加。

| KEY | VALUE |
|:------------|:------------|
|WORDPRESS_DB_HOST|192.168.99.100:32798|
|WORDPRESS_DB_PASSWORD|password|


- 保存後、プレビューにWordPressのインストール画面が表示されます。
![wp1.jpg](https://qiita-image-store.s3.amazonaws.com/0/122036/b362bf48-e1ac-c80e-9b8e-06724d05a21a.jpeg)

- ブラウザからも確認できます。（おおっ！！）
![スクリーンショット 2016-05-26 17.55.20.png](https://qiita-image-store.s3.amazonaws.com/0/122036/b23e6355-0cec-3da4-27e5-9a293635562f.png)

##  共有フォルダの設定
- Volumesの右側のボタンから設定画面を開きます。

![share1.jpg](https://qiita-image-store.s3.amazonaws.com/0/122036/a8711ca6-9d5f-5fff-5158-924f0ed8c4b6.jpeg)

- CHANGEボタンからフォルダを指定。

![share2.jpg](https://qiita-image-store.s3.amazonaws.com/0/122036/cafc6954-d972-a97a-a24b-8e0ae9255bbc.jpeg)

- フォルダを開くとWordPressのソースコードが確認できます。
<img width="727" alt="スクリーンショット 2016-05-26 18.22.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/122036/f0bf9e5c-3dbf-0504-023c-7ade78dac2d1.png">


##つまづいたところ
- 共有フォルダ設定後、ブラウザをリロードしたところ「Failed to load resource error」が発生。
- 設定を確認すると、WordPressコンテナのポート番号が 32805→32807　に変更されていたので元に戻したところ解消されました。（なんだろう・・・）





## まとめ
こんなに簡単にサーバー構築できるとは・・・
コマンドからも使えるようにもなりたいですね。

![スクリーンショット 2016-05-26 18.06.32.png](https://qiita-image-store.s3.amazonaws.com/0/122036/75fd840e-ebab-9e0e-d11d-f63ea0e69676.png)
BottomSheetDialogFragmentのPeekHeightを変更する方法


## 概要
BottomSheetBehaviorを使用してBottomSheetを実装する場合には ```setPeekHeight()``` を使うことでPeekHeightが変更できますが、
BottomSheetDialogFragmentを使用してModalのBottomSheetを実装する場合には少しやり方が異なるため、今回はその方法を紹介します。

## 方法
以下のようなStyleを作成し、BottomSheetDialogFragmentを継承したクラス内で設定すれば、PeekHeightを変更することができます。

```style.xml
<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
</style>

<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
    <!-- この値がPeekHeightになります。デフォルトだと256dpです。 -->
    <item name="behavior_peekHeight">312dp</item>
</style>
```

```CustomBottomSheetDialogFragment.java
public class CustomBottomSheetDialogFragment extends BottomSheetDialogFragment {

    public CustomBottomSheetDialogFragment() {
    }

    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // style.xmlに作ったStyleをセットする
        setStyle(BottomSheetDialogFragment.STYLE_NORMAL, R.style.BottomSheetDialog);
        return super.onCreateDialog(savedInstanceState);
    }

    @Override
    public void setupDialog(Dialog dialog, int style) {
        // 省略
    }
}
```

## 参考資料
http://stackoverflow.com/questions/35634292/how-do-i-change-the-default-height-of-a-bottomsheetdialog
メモ: Electron久々に使ってみた

Version 9 が出ていたので再度使ってみた。

* https://www.electronjs.org/docs

## インストール

```sh
# Clone the repository
git clone https://github.com/electron/electron-quick-start

# Go into the repository
cd electron-quick-start

# Install dependencies
npm install

# Run the app
npm start
```

```sh:パッケージング
npm install -g asar
```

## APIなど

### 印刷

```sh
# 印刷
webContents.print()

# pdf
webContents.printToPDT()
```


### UserAgent

```go
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) electron-quick-start/1.0.0 Chrome/83.0.4103.64 Electron/9.0.0 Safari/537.36
```

> Electron/9.0.0

## Download

* https://github.com/electron/electron/releases から実行ファイルをダウンロード

## プロジェクトの準備

* [electron/quick-start.md](https://github.com/electron/electron/blob/v1.1.3/docs/tutorial/quick-start.md)を参考に

* app1ディレクトリを作成し、その中に以下ファイル作成
    * package.json
    * main.js
    * index.html

```json:package.json
{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}
```

* main.js内で設定を行う。[BrowserWindow](http://electron.atom.io/docs/api/browser-window/)を参照

```js:main.js
const electron = require('electron');
const {app} = electron;
const {BrowserWindow} = electron;

let win;

function createWindow() {
  win = new BrowserWindow({width: 800, height: 600});

  win.loadURL(`file://${__dirname}/index.html`);

  win.setFullScreen(true); //起動時にfullscreen
  win.setMenu(null); //メニューを非表示

  //win.webContents.openDevTools();

  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});
```

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>
```

## 起動

```text:
electron.exe ..\app1
```

![ok.png](https://qiita-image-store.s3.amazonaws.com/0/25728/ce8b8e7d-646e-949c-19e0-7454a4dec5a6.png)
ProductFlavorごとに署名する証明書を変えたい

# 背景

内容は（タイトルも）ほぼ下記の既存記事とあまり変わらないのですが，仕様変更がされたのか上手く署名を切り換えることができませんでした．

[[Android][Gradle]product flavorごとに署名する証明書を変えたい](http://qiita.com/wasnot/items/2303668406cd1309e636)

# 環境

gradle plugin: 2.1.0

# やりたいこと

各 product flavor および build type で署名を変えます．
今回の場合， (flavor x2) * (build type x2) で，4つの証明書を切り換えることになります．

- signingConfigs
    - trialDebug
    - trialRelease
    - productDebug
    - productRelease

各シーン毎にそれぞれの署名を行いたいというケースです．

# signingConfigs ブロック

下記各ブロックに署名設定を記載します．

```
signingConfigs {
    trialDebug{
        // 略
    }
    trialRelease{
    }
    productDebug{
    }
    productRelease{
    }
}
```

# productFlavors ブロック

product flavorsには，flavorだけ書いておきます．
今回は署名を切り換えるだけですが，もちろん通常のflavor設定を書いてもかまいません．

```
productFlavors {
    trial {
    }
    product {
    }
}
```

# signingConfigs ブロック

ここに罠が追加されていました．

上に紹介した記事や [StackOverFlow](http://stackoverflow.com/a/32810290) を見る限り，以下の指定でイケそうな感じです．

```
buildTypes {
    release {
        debuggable false;
        productFlavors.trial.signingConfig signingConfigs.trialRelease
        productFlavors.product.signingConfig signingConfigs.productRelease
    }
    debug {
        debuggable true;
        productFlavors.trial.signingConfig signingConfigs.trialDebug
        productFlavors.product.signingConfig signingConfigs.productDebug
    }
}
```

しかし，これでビルドして `keytool -list -printcert -jarfile app-trial-debug.apk` してみると…

```
署名者番号1:

署名:

所有者: CN=Android Debug, O=Android, C=US
発行者: CN=Android Debug, O=Android, C=US
```

デフォルトの debug.keystore によって署名されてしまっています．

## 解決

もう少し Stackoverflow を探っているとこんな記述を見つけました
http://stackoverflow.com/questions/29618363/signing-config-per-flavor-not-working

```
 It seems that by default, Android has a signingConfig set on the debug build type (the android debug keystore), 
and when the signingConfig is set for the build type, the signingConfig is ignored for the flavor.
 The solution is to set the signingConfig to null on the debug build type. 
Then the signingConfig given for the flavor will be used instead:

デフォルトでは debug.keystore を持っていてflavorのsigningConfig指定は無視される． 
やりたいなら最初に signingConfig に null を詰めておけ
```

と，いうわけで

```
buildTypes {
    release {
        signingConfig null // ★ 追加
        debuggable false;
        productFlavors.trial.signingConfig signingConfigs.trialRelease
        productFlavors.product.signingConfig signingConfigs.productRelease
    }
    debug {
        signingConfig null // ★ 追加
        debuggable true;
        productFlavors.trial.signingConfig signingConfigs.trialDebug
        productFlavors.product.signingConfig signingConfigs.productDebug
    }
}
```

指定は単純だったのに，スゴく調査に時間かかった…．