OmniAICreator/Qiita-1.07M huggingface dataset:
webプログラミング初学者がAWS Cloud9を使い始める

# この記事を書こうと思ったきっかけ #
ローカルに環境を用意しなくても開発が始められるという統合開発環境(IDE)Cloud9を始めてみようと思いましたが、ネットで調べてもAWS版のcloud9がリリースされる前の情報が多く、いろいろと戸惑ったこともありましたので記事を書くことにしました。

# AWS Cloud9を始める #
## AWSからCloud9を登録する ##
https://c9.io/ から、「cloud9を使い始める」をクリック
私はAWSに登録済みだったのでAWSにログインしてcloud9をサービスに追加しました。
（普通にAWSの管理画面からサービスを追加でも大丈夫だと思います。）
リージョンは「シンガポール」を選択しました。
*git-hubアカウントでログインができる、という情報もありますが、新規登録はできないようです。*

## Cloud9のコンソールから環境を設定する ##
cloud9のコンソールから「Create environment」をクリック
![スクリーンショット 2018-01-18 13.32.48.png](https://qiita-image-store.s3.amazonaws.com/0/125664/4dfa4bf6-20b9-4a3d-02ae-3968779ccaa4.png)

### 環境の名前を入力する ###
「Name environment-Environment name and description」の画面で環境の名前を「Name」欄に入力します。
名前は適当で大丈夫です。今回は「sample_env」としてみました。
Descriptionは省略しました。必要に応じて説明を入力します。
![スクリーンショット 2018-01-18 14.54.48.png](https://qiita-image-store.s3.amazonaws.com/0/125664/f9e4d4c1-ad78-56bd-249d-e216af95c554.png)

「next step」をクリック

### インスタンスの種類などを選ぶ ###
「Configure settings-Environment settings」
今回はEnvironment type に「EC2」、Instance type 「t2.micro」、Cost-saving setting 「After 30 min」を選択しました。（全てデフォルト）
ネットで検索するとAmazon買収前の情報なのか、ここでアプリケーション毎のテンプレートが選べる、と言う情報がありますが、テンプレートはありません。

*インストール後調べてみると、cat /etc/system-release　の結果は「Amazon Linux AMI release 2017.09」でした。 
python2.7,python3.6,Rails 5.1.4,PHP 5.6などがデフォルトでインストールされていて、web開発ならそのままの状態である程度のことは始められそうな印象です。*

![スクリーンショット 2018-01-18 14.54.17.png](https://qiita-image-store.s3.amazonaws.com/0/125664/8c5ae311-5fd3-348e-324c-33c4493161f4.png)

### 設定内容を確認する ###
「Next step」をクリックでReview(確認)画面になります。
![スクリーンショット 2018-01-18 15.07.57.png](https://qiita-image-store.s3.amazonaws.com/0/125664/d905d2ee-b2e9-fdbd-6ad2-ccac81b56c54.png)

### ログイン済のコンソールが立ち上がる ###
内容を確認できたら「Create environment」をクリックしてしばらく待つとコンソール画面になります。

![スクリーンショット 2018-01-18 15.09.56.png](https://qiita-image-store.s3.amazonaws.com/0/125664/91a29431-2b34-87b5-196f-0e3abd90a879.png)
~/environment　にログインした状態でコマンドが使えるようになります。
(左サイドバーにあるファイルツリーで「Sample_env」と表現されているディレクトリが~/environmentになります。）

###あとはお好きに###
あとは好きなようにいじり倒してみて下さい。
よくわからなくなったらすぐに同じ手順で環境を作り直すことができます。

##ネットにあった情報と違っていて戸惑った点まとめ ##
- git-hubアカウントで新規登録することはできないようです。
- インスタンス作成時にアプリケーション毎のテンプレートは選べません。
- パッケージ管理はapt-getではなくyumを使います。
Rustでファミコンのスプライトを書き出すツールを書いてみた 

## はじめに

https://qiita.com/bokuweb/items/1575337bef44ae82f4d3

こちらの @bokuweb 氏の記事を見かけて「そういえばエミュレータってどうなっとるんじゃろ？」と気になったので、

「まずはスプライト書き出す簡単なツールだけでも書いてみようかな」
「触り始めたばかりだし、せっかくだからRustでやってみよーっと」

ということでタイトルのとおり

## 作ったやつ

https://github.com/yamash723/rust-nes-sprites2png

せっかくのRustの勉強なのでいろいろ試したりしてたら最終的にこうなった
スプライト吐き出すだけならもっと短いシンプルなコードでよかったなーと

![hello_world.png](https://qiita-image-store.s3.amazonaws.com/0/41164/d202630d-c403-ecb0-0269-23bc84920923.png)
サンプルROMから吐き出してみたスプライト

## 作ってみて

実際に書いてみると「ファミコンのROMってこうなってるのか・・・！」という感慨深いものがある
仕様的な部分は冒頭の @bokuweb 氏の記事や、記事内の参考サイトを見てもらうのがいいのかと

Rustで書いてみた感想としては

* 慣れるまでは大変だけど慣れたらむしろ楽
* いろいろと厳密なので、つまらないミスはコンパイラ様が容赦なくツッこんでくれるので精神的に楽
* ボローチェッカだけはもう少し仲を深める必要がある感じ
* なんというか書いてて楽しい

といったところ

ちょっと気になるのはテストの場所
今回はとりあえず同一ファイル内にテストコード書いちゃったけど、実際にはどんな感じにするのがいいのやら

## 今後

せっかくなので次はサンプルROM(HelloWorld)を動かせるものを作ってみたいと思う
Windows Server 2016 で Java の Web アプリケーション　を作ってみるの巻

#目的
CloudWatch での監視に向けて、
Windows Server 2016 で、 Java のWeb アプリケーションを作る。

#目標
javac で、今日の日付を出力するコードを作成する

#環境の設定
今回は、EC2 の無料枠で作成。
VPC や EC2 の詳細は、どこでも転がってるので、省きます。

開発環境のセットアップのため、下のサイトを参照。
https://www.ibm.com/developerworks/jp/opensource/library/os-eclipse-tomcat/index.html

一つずつ導入するのは手間なので、All in one を使おう
http://mergedoc.osdn.jp/

今回は、
Eclipse 4.7 Oxygen の Windows 64bit Full Edition Java を選択
14GB ほどの容量があるので、15分ぐらい待つ

後述の 7zip を使って、解凍して、 Eclipse.exe を実行してエラー出なければ完了。

解凍ソフトを導入
今回は、7zip を選択
※一部の解凍ソフトで、Eclipse のパス長設定に耐えれず、エラーが発生する場合がある

公式サイトへアクセス
http://7-zip.org/

今回は、
Download 7-Zip 16.04 (2016-10-04) for Windows　を選択
bit は、64 を選んだ。

ダウンロード完了後、インストーラを実行して、
エラーなければ導入完了。
p5jsを記事に埋め込んでみた

# 自分も新機能を試したかった
https://qiita.com/Qiita/items/edae7417214c8e957f54

# p5jsでフルサイズ表示を試してみた
<p data-width="500" data-height="500" data-theme-id="0" data-slug-hash="baQWdB" data-default-tab="js,result" data-user="tkyko13" data-embed-version="2" data-pen-title="p5jstest" class="codepen">See the Pen <a href="https://codepen.io/tkyko13/pen/baQWdB/">p5jstest</a> by takayukiono (<a href="https://codepen.io/tkyko13">@tkyko13</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

data-width="500"
一番最初のpタグ内にこのプロパティも追加してみました
この記事投稿エディタ内のプレビューに実行結果が表示されないので少し不安

[投稿後追記]
data-widthプロパティはやっぱり効かないですね
PCのブラウザだと、ブラウザの横幅によって決められます
今回はフルサイズ表示の処理は起動時のみ行っていますが、p5js内にwindowのりサイズイベントが取れるのでそのタイミングでキャンバスのリサイズを行ったほうがよさそうですね。

例えば

``` javascript:p5jstest.js
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  y = windowHeight/2;
}
```

こんな関数を追記してみるなど...
CodeMirror Addon の hint/show-hint.js でスニペット実装

`CodeMirror` `AutoComplete` で検索すると以下のコードがヒットするんですが、もう少し単純なサンプルが欲しかったので実装してみました。

- [CodeMirrorでEmoji AutoCompleteする](https://qiita.com/yymm@github/items/6aa5b869ef8c22683ccc)
- [CodeMirrorでAutoCompleteする](https://qiita.com/mizchi/items/15441d0e285f86125b0a)

## CodePen

エディター上で `Cmd-E` もしくは `Ctrl-E` すると、コンテキストメニューみたいなものが出てきて入力出来ます。

<p data-height="450" data-theme-id="dark" data-slug-hash="BJGpqG" data-default-tab="js,result" data-user="_kkeisuke" data-embed-version="2" data-pen-title="CodeMirror Addon hint/show-hint.js sample" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/_kkeisuke/pen/BJGpqG/">CodeMirror Addon hint/show-hint.js sample</a> by kkeisuke (<a href="https://codepen.io/_kkeisuke">@_kkeisuke</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

## 補足

候補を絞り込んでいるのは以下の行で仕組みは単純です。

```ts
// snippets は { text: string, displayText: string }[] みたいな感じです。
const list: any[] = snippets.filter(function (item): boolean {
  return item.text.indexOf(currentWord) >= 0
})
```

もう少し細かい制御をしようと思うと大変そうです。冒頭の記事をご参考ください。

[CodeMirror](http://codemirror.net/) は英語、日本語ともにサンプルが少ないですね :disappointed_relieved:
Pythonで classmethod、staticmethod を使う

### いつ使うと良いか

- インスタンス変数やインスタンスメソッドにアクセスしないとき(メソッド内でselfを使わないとき）は `classmethod`、`staticmethod`を使おう。
- `classmethod`: クラス変数にアクセスすべきときや、継承クラスで動作が変わるべきときは classmethodを使おう。
- `staticmethod`: 継承クラスでも動作が変わらないときはstaticmethodを使おう

どちらもデコレーターで定義できる。`classmethod`では第一引数に`cls`を与えて定義する。

### 例

```python
class Student:
    def __init__(self, name, school):
        self.name = name
        self.school = school
        self.marks = []

    def average(self):
        """平均成績を返す
        
        インスタンス変数にアクセスしたいのでinstancemethodを使う。
        """
        return sum(self.marks) / len(self.marks)

    @classmethod
    def friend(cls, origin, friend_name, *args):
        """同じ学校の友達を追加する。
        
        継承クラスで動作が変わるべき(継承クラスでは salaryプロパティがある)
        なのでclassmethodを使う。
        子クラスの初期化引数は *argsで受けるのがいい
        """
        return cls(friend_name, origin.school, *args)
        
    @staticmethod
    def say_hello():
        """先生に挨拶する
        
        継承しても同じ動きでいいのでstaticmethodを使う
        """
        print("Hello Teacher!")

class WorkingStudent(Student):
    def __init__(self, name, school, salary):
        super().__init__(name, school)
        self.salary = salary

hiro = WorkingStudent("Hiro", "Stanford", 20.00)
mitsu = WorkingStudent.friend(hiro, "Mitsu", 15.00)
print(mitsu.salary)
```

ご利益：可読性があがる
スニペットのウェブアプリ SnippetNOTE を作りました(PHP7対応）

![alt](https://raw.githubusercontent.com/mikiakira/imageArchive/master/img/sn01.jpg)

GitHub: [https://github.com/mikiakira/SnippetNOTE](https://github.com/mikiakira/SnippetNOTE)

---

# 使っている機能
 - PHP 5.6+ (PDO必須)
 - [Idirom](https://github.com/j4mie/idiorm)
 - SQLite
 - [Ace](https://ace.c9.io/)
 - Bootstrap 3.x
 - jQuery 2.x
 - jQuery UI 1.x


---


# 主な機能

スニペットの表示には、Atom などで使われている Ace を利用しています。
何も選択しなければ、デフォルトでは MarkDown のフォーマットで保存されます。
その他には、 HTML, CSS, SCSS, JS, PHP, Ruby, Python, json, xml を選べます。
行番号をデフォルトでオンにしています。

## ラベルの管理
「Add Label」 で単語を登録するラベル名を作成します（カテゴリに相当します）。
「Edit Label」で、登録済みで、ラベルリストで選択されているラベル名をリネームできます。
ラベルリストは、「Article」のタイトル名を使って自動的にソートされて一覧で表示されます。

## スニペットの管理
「Snippet Add」  で、カテゴリを選択した後、「Article」に表題と、本文を入力します。
スニペットを入力したら、「Save」ボタンで保存します。
「Copy」ボタンでクリップボードにコピーされます。
「Delete」で登録したスニペットを削除できます。


#  インストール方法
 - app.template.db をコピーして、app.db にリネームします。
 - config/define.php を開いて、パスワード（デフォルト: admin）と、セッション名を（適当に）変更して下さい。
 - ※現状、英語版のみです。
 - app.db はファイルですので、コピペでバックアップできます。

# ライセンス
MIT です。
これをベースにして、保存先を MySQL などのデータベースに変更し、
チームで使ってもいいと思います。
また、私はスニペット管理ツールとして作成しましたが、使い方は自由です。
サーバで使わず、ローカルで「ミニノート」としても活用できるでしょう。

# あとがき

『スニペット管理』、プログラマなら大好きな機能だと思います。
作りこんだコードを再利用するためのツール、として利用している方は少なくないでしょう。

Windows のフリーソフトとしては、クリップボードの機能を拡張するものが古くからあります。
よく知られたものでは、クリップNOTEや、PhraseXpress、Clibor。

クリップボードにコピーされたデータは、OS標準では1個だけなのを、何百件と増やすことができ、
よく使う単語（複数行も可）をカテゴリ別に登録することができます。
私は現在では、カテゴリ数をたくさん増やせるので、Clibor を使っています。

実際、プログラマに限らず、文章をたくさん入力するためには、
作業マシンに、以下の機能を持つことが必須と考えています。

① クリップボードの履歴を大幅に拡張する
② カテゴリ別に単語（あるいは複数行の文を）登録し、簡単に呼び出せる

クリップボードの履歴を拡張するだけなら、どのフリーソフトを使っても問題はありません
（というか、なぜいつまでも、どの OS もクリップボードのコピー数は1個なのでしょうか…）。

悩みの種なのは、② です。

自宅で作業するとき、仕事先で作業するとき、作りこんだデータを同期するか、それまでのものを利用したい。

Google 日本語入力で、辞書ファイルを Dropbox に置いて同期する方法もありますが、
上場しているような企業では、情報セキュリティの観点から、
Google や Dropbox などの外部サービスを一切使わせない、というところもあります。
実際にそんな会社で仕事をしたことがありますが、正直やりにくかったです。
こんな時、スニペットをどう管理したらいいのでしょう？
せめて、こう説明して、セキュリティ課の人を説得したいと思いました、
「自作のツールを『ダウンロード』するだけです。アップロードはしません」

あちこち出向先が変わる人間にとっては、スニペットの管理は死活問題ではないでしょうか？
作業場が変わるたびに、一から登録し直す？　地獄です。
ブログに書く？　使いたいときにいちいち検索したり、タグをつける？　疲れます…。
IDE の中にはクラウドに保存するものもありますが、そのサービスが停止していたり。

そこで、ウェブ上で動く、「シンプルな」スニペットツールを作ろう、と思い立ちました。
Google や　Dropbox など、「巨人」たちの力を借りられないなら…と。

シンプルに使えるものにしたかったので、データベースは不要、
ファイルベースの SQLite で管理できるアプリ、というのを前提に設計しました。

開発にあたり、ベースになったのは、2017年に公開した Trello のクローン(php-simple-kanban)です
（GitHub:　https://github.com/mikiakira/php-simple-kanban ）
ログイン、ログアウト、データの CRUD の仕組みを構築していたので、応用して、3～4日で出来ました。

実は　php-simple-kanban を公開した時点で、すでに開発ツールとして使い始めていました。
kanban を公開して、どんな反応があるのか未知数だったのと、ちゃんと使えるか確認したかったのです。

一定の試用期間を経て、これならいけるかな…と見極めがついたので、公開いたしました。

Bootstrap3 を使っているので、モバイルでも使えないことはありませんが、
PCで仕事をする時のツール、と割り切っているので、そこまでは考慮していません。
しかし、Bootstrap3 が入っていますので、ちょっと工夫すればできるでしょう。
また、Electron でデスクトップアプリにもできるかも知れません。
いろいろなアイデアの土台となっていれば、幸いです。

※個人的にはこれ以上機能を追加するモチベーションは今のところありませんが、GitHubのスターが増えたり、色々ご意見を頂けたら、モバイル対応や検索機能など加えてみようかなと、ぼんやり思っています。なにぶん、一人で開発しているので、ちょっとでも意見を頂けると喜びます。

※現在[エックスサーバ](https://px.a8.net/svt/ejp?a8mat=1CAT7X+DJ0U3U+CO4+609HU) で使っていますが、快適です…。
a == 1 and a == 2 and a == 3 がTrueになるPythonスクリプト

Qiitaで[Ruby版](https://qiita.com/shiozaki/items/53c66cea655bef08b9ea)の記事を見かけたので，Pythonでも作ってみました。

## ソースコード
```python3
>>> class Test:
        def __eq__(self, foo):
                return True

>>> a = Test()
>>> if a==1 and a==2 and a==3:
        print('Hello Qiita')

Hello Qiita
>>> 
```
## ポイント（？）
作るにあたって，少し学んだことがあったのでメモしておきます。

###```==```演算子について
Pythonでは，```==``` 演算子は```__eq__```メソッドで定義されています。もし，定義されていない場合，```==```は```is```と同じ扱いになります。

```python3
>>>class Test2:
        pass

>>> b = Test2()
>>> c = Test2()
>>> d = b
>>> b == c
False
>>> b == b
True
>>> b is b
True
>>> b == d
True
>>> b is d
True
```


## 参考

- [[StackOverflow] Can (a ==1 && a== 2 && a==3) ever evaluate to true?](https://stackoverflow.com/questions/48270127/can-a-1-a-2-a-3-ever-evaluate-to-true)
- [[Qiita] a == 1 && a == 2 && a == 3がtrueになるRubyスクリプト](https://qiita.com/shiozaki/items/53c66cea655bef08b9ea)
- [[Pytho-izm] == と is の違い](https://www.python-izm.com/tips/difference_eq_is/)
新レイアウトになってQiitaに投稿するときに気をつけること あるいは過去記事の修正

[Qiita のデザインが新しくなりました - Qiita Blog](http://blog.qiita.com/post/168173551204/qiita-design-update)

# バージョン表記を本文にもってくる

[記事にタグを設定する - Qiita:Support](https://help.qiita.com/ja/articles/qiita-tagging#%E3%82%BF%E3%82%B0%E3%81%AB%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF)

[投稿画面のUIを改善しました - Qiita Blog](http://blog.qiita.com/post/122468604259/improved-editor-ui)

旧(魚拓)

![2018-01-18_13h42_00.png](https://qiita-image-store.s3.amazonaws.com/0/62354/200447b0-ceac-fb5a-147b-82bf7da797ac.png)

新

![image.png](https://qiita-image-store.s3.amazonaws.com/0/62354/809a8d33-5641-a79e-37bd-203468ee4896.png)

旧版にあった`PHP:5.4`というバージョン表記が無い。
もちろん新バージョンでも編集画面にはタグのバージョンを入れている。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/62354/b65aa3a2-1ca8-cc21-96b5-07a83fbd75cf.png)

自分が動かすPHPやLaravelは現行バージョンより低い[^1]ので、文法や動きの違いを惑わさないようにバージョンを入れていた。
(すごく真面目なときで複数のライブラリなどが絡む場合などは本文に書きますが、タグだけで済む場合はタグのみ)


不審な動きの調査系などもバージョンが重要なことが多いので積極的に入れていたが、
新レイアウトではバージョンが見えないので、本文に書いたほうがいい。

タグアイコンも…文字を見なければいけなくなったが、さして重要ではない。

**これは自分がする投稿というよりは、自分が困ってQiitaに来たときにバージョンが書いてあれば助かるという話**
なので、自分の記事も気をつけておく。


***

>「読む人が記事に集中して読めること」をコンセプトとして設計しました。

なのでごちゃごちゃさせないことが目的かも知れない。
[Increments Advent Calendar 2017 - Qiita](https://qiita.com/advent-calendar/2017/increments)
気になる話埋まらないかなー

***

まだ新レイアウトの記事画面に慣れていないので、他に気づいたら増やしていく。


[^1]: かつ有効に使われているタグなので
MACのUSキーボードのcommandキーを英数・かなキーに変更する

# 概要
普段Mac miniではJISキーボードを使っていて、最近USキーボードのMacbookを手に入れたんですが、日本語切り替えが使いずらかったのでいろいろ調べていたらいい記事がありました。↓
[Mac用 Apple英字配列キーボードにおける日本語入力切替のおすすめ：Commandキーのみで実現](https://qiita.com/daichi87gi/items/ded35e9d9a54c8fcb9d6)

こちらの記事の情報が古かったので現時点での設定方法を説明します。

# 動作環境
macOS High Sierra 10.13.2
MacBook Pro(Retina, 13-inch, Early 2015)

# 手順
この記事ではUSキーボードの左commandキーに英数キーを、右commandキーにかなキーを設定していきます。(普段どおりcommand+cでコピーなどはできます。)

## Karabinerをインストール
[Karabiner-Elements-11.5.0](https://pqrs.org/osx/karabiner/)

## Karabinerの設定
インストールできたらアプリケーションからKarabiner-Elementsを起動します。

タブのComplex Modificationから左下のAdd ruleボタンを押します。
<img width="1112" alt="スクリーンショット 2018-01-18 15.35.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/173800/7b36e1b3-60d8-5075-4171-a48b6e4c0b54.png">

Import more rules from the Internet (open a web browser)ボタンを押します。
<img width="1112" alt="スクリーンショット 2018-01-18 15.37.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/173800/12a900c8-ee5b-a298-72a9-7c16074e38c2.png">

するとブラウザでKarabiner-Elements complex_modifications rulesが開かれるので、Table of Contentsの中のInternational (Language Specific)をクリックします。
<img width="1026" alt="スクリーンショット 2018-01-18 15.35.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/173800/eeba89f4-68ee-83f0-bd75-1332a5c7646f.png">

International (Language Specific)の中にFor Japanese (日本語環境向けの設定) (rev 3)という項目があるので、それをImportします。
<img width="959" alt="スクリーンショット 2018-01-18 15.36.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/173800/be6f304c-c42d-eb4d-fdcc-6c1101c90f20.png">

ここで、「このページで“Karabiner-Elements”を開くことを許可しますか?」と聞かれるので許可します。
<img width="466" alt="スクリーンショット 2018-01-18 15.37.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/173800/75a8b5fc-40fe-fbe0-5b9e-696ed879188b.png">

Karabiner-Elementsに戻って、Importボタンを押します。
これで、「コマンドキーを単体で押したときに、英数・かなキーを送信する。・・・略」をEnableにすれば完了です。
<img width="1112" alt="スクリーンショット 2018-01-18 15.35.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/173800/d8113897-3732-6899-72a6-df812721377f.png">

# まとめ
いやー、これは便利。
testingなパッケージをAlpineに入れるとき

Dockerでの備忘録。

# リポジトリ追加

https://wiki.alpinelinux.org/wiki/Alpine_Linux_package_management#Packages_and_Repositories

`/etc/apk/repositories` へ `@testing` としてレポジトリを追加する。

```bash:/etc/apk/repositories
http://dl-cdn.alpinelinux.org/alpine/edge/main
http://dl-cdn.alpinelinux.org/alpine/edge/community
@testing http://dl-cdn.alpinelinux.org/alpine/edge/testing
```

# Dockerfileメモ

下は `ufw` だが、こんな感じで追加可能。

```dockerfile:Dockerfile
FROM alpine:edge

# install ufw
RUN echo "@testing http://dl-cdn.alpinelinux.org/alpine/edge/testing" >> /etc/apk/repositories
RUN apk --update add ufw@testing && \
    rm -rf /var/lib/apt/lists/* && \
    rm -rf /var/cache/apk/*

ENTRYPOINT ["ufw"]
CMD ["-h"]
```
JUnit備忘録

JUnitの備忘録を記載していく。

# Assert

```java
import static org.hamcrest.Matchers.is;
import static org.hamcrest.Matchers.not;
import static org.hamcrest.MatcherAssert.assertThat;
import static org.junit.Assert.fail;

// actual = expectの場合、正常
assertThat(actual, is(expect));
// actual != expectの場合、正常
assertThat(actual, is(not(expect)));
// エラー
fail("error reason");
```

# Mockito

##### mockオブジェクトの作成

```java
import static org.mockito.Mockito.mock;
import static org.mockito.Mockito.spy;

// オブジェクト全体をモック化する場合
Target targetMock = mock(Target.class);
// モック設定したメソッドのみをモック化する場合
Target targetMock = spy(Target.class);
```

##### voidメソッドのmock化

```java
import static org.mockito.Matchers.any;
import static org.mockito.Matchers.anyString;
import static org.mockito.Mockito.doNothing;
import static org.mockito.Mockito.doThrow;

// 正常終了させる
doNothing().when(targetMock).targetMethod(anyString(), any(Parameter.class));

// 例外をスローする　※対象メソッドがThrowsする例外またはRuntimeExceptionが指定可能
doThrow(new RuntimeException()).when(targetMock).targetMethod("01");
```

上記の場合、targetMethodメソッドが引数"01"で呼び出された時に例外をスローする。
任意の引数が渡された場合にモックを動作させる場合は、Stringの場合はanyString()、オブジェクトの場合はany(クラス名)などを指定する。

##### 戻り値のあるメソッドのmock化

```java
import static org.mockito.Matchers.anyString;
import static org.mockito.Mockito.when;

// 戻り値に"ok"を返却する
when(targetMock.targetMethod(anyString())).thenReturn("ok");

// 1回目と3回目の実行に"ok"、2回目の実行に"ng"を返却する
when(targetMock.targetMethod(anyString())).thenReturn("ok", "ng", "ok");

// 例外をスローする　※対象メソッドがThrowsする例外またはRuntimeExceptionが指定可能
when(targetMock.targetMethod(anyString())).thenThrow(new RuntimeException());
```

##### mockメソッドのassert

```java
import static org.mockito.Mockito.times;
import static org.mockito.Mockito.verify;

// メソッド実行回数の確認
// targetMethodメソッドが1回だけ実行されたことを確認する
verify(targetMock, times(1)).targetMethod(anyString(), anyString());
```

##### Mockitoの注意点
- publicメソッドのみmock化が可能

- staticメソッドはmock化できない

- @InjectMocksによるモックのインジェクションは@InjectMocksで指定したクラスの直のプロパティに対して摘要される。
つまり、@Injectオブジェクトの中の@Injectに対してはモックをインジェクションしてくれない。
実現したい場合は、リフレクションを使ってモックを直接、変数に突っ込む必要がある。
【サルが書く】cakephpのInflectorを覚えたい

# サルなのでInflectorが覚えられない！



Inflector は文字列の複数形や大文字への変換を取り扱うクラスです。
cakephpが標準で搭載してくれているライブラリですよ。
キャメルケースからスネークへ、また逆など変換をしてくれる便利なものですね。

詳しくは[公式リファレンス](https://book.cakephp.org/2.0/ja/core-utility-libraries/inflector.html)へ

## Inflector::pluralize($singular)→複数形に変える
複数形に変形してくれます。
multipleとか言うので、マルチ...複数だなって覚えています。

- 入力: Apple, Orange, Person, Man
- 出力: Apples, Oranges, People, Men

※いつでも正しいとは限らないらしいです

## Inflector::singularize($plural)→単数形に変える
単数形にしてくれます。
シングルは一つってイメージしやすいですね。

- 入力: Apples, Oranges, People, Men
- 出力: Apple, Orange, Person, Man

※いつでも正しいとは限らないらしいです

## Inflector::underscore($camelCase)→キャメルケースをスネークケースへ
　キャメルケースの文字列をアンダースコアに変換してくれます。

- 入力: saruIsCool
- 出力: saru_is_cool

## Inflector::camelize($underscored)→スネークケースをキャメルケースへ
　アンダースコアの文字列をキャメルケースに変換してくれます。

- 入力: saru_is_cool
- 出力: saruIsCool


## Inflector::tableize($camelCase)→キャメルケースをスネークケースに、そして複数形に
　キャメルケースの文字列をアンダースコアに変換してくれます、そして複数形に。

- 入力: UserProfileSetting
- 出力: user_profile_settings
Excelのシート名を一括変更するマクロ

使い方
１．コード1を実行してシート名一覧を作成する
２．シート名一覧のC列(変更後のシート名)を書き換える
３．コード2を実行する

```vbnet:コード1
'シート名を取得して新規シートに一覧出力する
Sub getAllSheetsName()
    
    Dim sname: sname = "シート名一覧_あとでこのシートは消してね"
    
    '作業用シートが存在していたら削除する
    Dim ws As Worksheet
    Dim flag As Boolean
    For Each ws In Worksheets
        If ws.Name = sname Then
            flag = True
            Exit For
        End If
    Next ws
    If flag = True Then
        Application.DisplayAlerts = False
        Worksheets(sname).Delete
        Application.DisplayAlerts = True
    End If
    
    
    '作業用シートを作成する
    Sheets.Add
    ActiveSheet.Name = sname
    
    'シート一覧を作成する
    Dim ss: Set ss = ActiveSheet
    ss.Cells(1, 2) = "シート名"
    ss.Cells(1, 3) = "変更後のシート名"
    Dim r: r = 2
    For Each ws In Sheets
        If ws.Name <> sname Then
            ss.Cells(r, 2) = ws.Name
            ss.Cells(r, 3) = ws.Name
            ss.Cells(r, 4) = "=B" & r & "=C" & r
            r = r + 1
        End If
    Next ws
        
    '見た目整理
    Columns("B:B").EntireColumn.AutoFit
    Columns("C:C").EntireColumn.AutoFit
    Range("B1:D1").Select
    With Selection.Interior
        .Pattern = xlSolid
        .PatternColorIndex = xlAutomatic
        .ThemeColor = xlThemeColorAccent5
        .TintAndShade = 0.799981688894314
        .PatternTintAndShade = 0
    End With
    
    ss.Cells(1, 1).Select
End Sub
```

```vbnet:コード2
'シート名を一括変更する
Sub ChangeSheetName()
    Dim map As Dictionary: Set map = New Dictionary
    
    Dim sname: sname = "シート名一覧_あとでこのシートは消してね"
    Dim ss: Set ss = Sheets(sname)
    Dim r
    '// 変更前シート名をキー、変更後シート名を値としてマップに設定
    For r = 2 To 2000
        '変更前シート名無しの場合、終了
        If ss.Cells(r, 2) = "" Then
            Exit For
        End If
        
        '変更後シート名ありの場合、mapに保存
        If ss.Cells(r, 3) <> ss.Cells(r, 2) Then
            Call map.Add(ss.Cells(r, 2).Value, ss.Cells(r, 3).Value)
            ss.Cells(r, 2) = ss.Cells(r, 3)
        Else
        End If
    Next
    
    
    Dim sht         As Object       '// シート
    '// 全シートループ
    For Each sht In Sheets
        If map.Exists(sht.Name) Then
            sht.Name = map.Item(sht.Name)
        End If
    Next
End Sub

```
ランダムな数字四桁を生成するワンライナーたち

映画をよく観ます。
最近の映画館は、チケットをネット予約できるのがありがたいのですが、友人とよく行く、

- [シネ・リーブル神戸](http://www.ttcg.jp/cinelibre_kobe/)
- [塚口サンサン劇場](http://www.sunsun.info/)

などでは、予約時にチケットを発券するのに使う数字四桁のパスワードを設定する必要があります。
これを毎回考えるのがめんどくさい。いつも同じパスワードでいいじゃない、と言われるかもしれませんが、そこはそれ、いちおうシステム運用屋ですから。

で、調べ物の合間にチケット予約する時にパスワードを生成するために、OSXの ~/.bash_profile, Ubuntu の ~/.bashrc に仕込んでいるワンライナーたち。

```
alias rn4="cat /dev/urandom | LC_CTYPE=C tr -dc '0-9' | fold -w 4 | head -n 1"
alias rn4rb='ruby -e "puts (0..9).to_a.sample(4).join"'
alias rn4py='python -c "import random; print \"\".join(random.sample(map(str, range(10)), 4))"'
alias rn4ps='powershell -Command "(Get-Random -InputObject (0..9) -Count 4) -join \"\" "'
```

<dl>
  <dt>rn4</dt>
    <dd>OSX では、LC_CTYPE=C が必要だが、Ubuntu では不要。この方法だと四つのうちに同じ数字が出ることもある。</dd>
  <dt>rn4rb</dt>
    <dd>(0..9).to_a は、[*0..9] と書いてもいいわけで。四つの数字に同じものは出ない。</dd>
  <dt>rn4py</dt>
    <dd>ruby と同じロジックを書いても、python では括弧が多重しがちになるなのがちょといや。</dd>
  <dt>rn4ps</dt>
    <dd>仕事で powershell をよく使うので、Macbook や Ubuntu にも PowerShell をインストールしてある。作ってみたが非常に遅い。</dd>
</dl>

いちばん軽く動くので、結局、/dev/urandom を使った rn4 ばかり使っているような。
fishでcondaの環境切替時にエラーが出るときの覚書

このへんで議論されている話と一緒。
同じようなところで詰まっている人は沢山いるんだなーと
https://github.com/conda/conda/issues/2611

### 環境
```
$fish --version 
fish, version 2.7.1
$conda --version
conda 4.4.7
```

### 事象
`source activate <ENV_NAME>`がエラーになる

```
$source activate test1                                
source: Error encountered while sourcing file 'activate':
source: No such file or directory
```

### 対応
`vi ~/.config/fish/config.fish `して
`source (conda info --root)/etc/fish/conf.d/conda.fish`
を追加

### 使い方
`conda activate <ENV_NAME>`で切り替えできる

```
$ conda activate test1 # test1が有効
$ conda activate test2 # test2が有効
$ conda deactivate # test1が有効
$ conda deactivate # OS標準
```

環境がスタックされる（複数を同時利用すること無かったから気にしなかったけど前から？？）
複数のGeotiffを１枚にマージして、かつ１バンドのみを取り出す

[こちら](https://qiita.com/naru-T/items/b87c83fad05634919532)ではgdal_merge.pyをつかって分割されたGeotiffをマージしました。

今回ここでやりたいことは、分割されているそれぞれのGeotiffに複数のバンドが格納されており、またそれぞれでデータタイプが異なるため、１枚のGeotiffにマージしつつ、バンドをごとのGeotiffを作成することです。


```
#gdalbuildvrtでvrtファイルを作成する
# -b でバンドを指定
gdalbuildvrt OUTPUT_b01.vrt -b 1 INPUT1.tif INPUT2.tif INPUT3.tif 
gdalbuildvrt OUTPUT_b02.vrt -b 2 INPUT1.tif INPUT2.tif INPUT3.tif 
gdalbuildvrt OUTPUT_b03.vrt -b 2 INPUT1.tif INPUT2.tif INPUT3.tif 

#gdal_translateでvrtファイルをtifに変換する
#band1をByteタイプでエクスポート
gdal_translate -co COMPRESS=LZW -co BIGTIFF=YES -ot Byte -a_nodata 0 OUTPUT_b01.vrt OUTPUT_b01.tif

#band2をInt16タイプでエクスポート
gdal_translate -co COMPRESS=LZW -co BIGTIFF=YES -ot Int16 -a_nodata 0 OUTPUT_b02.vrt OUTPUT_b02.tif

#band3をFloat32タイプでエクスポート
gdal_translate -co COMPRESS=LZW -co BIGTIFF=YES -ot Float32 -a_nodata 0 OUTPUT_b03.vrt OUTPUT_b03.tif

```

参考：[gdal_translate](http://www.gdal.org/gdal_translate.html), [gdalbuildvrt](http://www.gdal.org/gdalbuildvrt.html)
windowsサーバーでgithubのWebhooksから自動で同期する

# githubにプッシュするとサーバーで自動デプロイしてほしい
本番サーバにデプロイする時にクライアントでpushして本番サーバにログインしてgit pull
ってのは面倒くさい

いろいろググると出て来るのはLinuxサーバーでPHPを扱うパターンの話
Windowでやるためのメモ書き

## サーバーのIPの穴あけ設定
githubのIPはhttps://api.github.com/meta
で取得できるらしいので
githubのAPIで叩かれる穴あけの設定をする必要があります

## IISの設定
後述しますが管理者権限でgitコマンドを実行したいのでアプリケーションIDを
私の環境だとApplicationPoolIdentityからadministratorに変える必要がありました
①アプリケーションプールの追加
↓
②WEBHOOKなど適当な名前で設定
↓
③追加後右クリックで詳細設定を開く
↓
④プロセスモデルにあるIDをクリックしてカスタムアカウント設定
↓
⑤administratorに変更

## APIの設定
叩かれるプログラムを書くのですが
私はC#.Netで適当に

```Default.aspx.cs
public partial class _Default : System.Web.UI.Page
{
	protected void Page_Load(object sender, EventArgs e)
	{
		やりたいこと
	}
}
```

こんな感じの受信装置を作りました。
使い慣れた言語を使えばよいと思います

## やりたいことの設定
git コマンドを実行したいのでgit for windowsのインストール時に
コマンドプロンプトからgitコマンドの許可（git.exeにPathを通す）してあるなら
コマンドプロンプトを起動してgitコマンド書けばよさそうです

```C#.Netでの例
System.Diagnostics.Process p = new System.Diagnostics.Process();
p.StartInfo.FileName = System.Environment.GetEnvironmentVariable("ComSpec");
p.StartInfo.UseShellExecute = False
p.StartInfo.RedirectStandardInput = True
p.Start()
System.IO.StreamWriter sw = p.StandardInput;
sw.WriteLine("cd C:\クローンしたフォルダ");
sw.WriteLine("git pull");
sw.WriteLine("exit");
p.Close()
```

受信装置をwwwrootにおいてさっき設定したIISのアプリケーションにする

## Webhooksの設定
https://github.com/（チーム）/（リポジトリ）/settings/hooks
で設定できる。リポジトリのsettingsタブをクリックしてWebhooks

Payload URLにさっき作った受信装置のURLを書いて
Just the push event.にチェックの上登録

登録時にgithubからテストでキックされるので結果を確認する

## fetchが上手くいかないことに気がつく
上記の設定だとgit fetchが上手くいかないのでpullもうまくできない
いろいろ調べたがwindowsの仕様でログインしているユーザーが居ない時に
ネット接続等に制限が有りできないらしい
サーバーに常にログインしている状態にしておくことで解決。

私はサーバーで作業が終わったらサインアウト等したいので
タスクスケジューラで無名ユーザーに何かを常にやらせておくことで誰かがログインしている状態を維持しています

## その他
### github WebHooksのSecretを使いたい
JSON形式で送られてくるPayloadを取得してHMACSHA1を使ってkeyと暗号化したものが
X-Hub-Signatureのヘッダー情報と一致していれば良いらしいが
なぜかうまくできない。ググると出て来るRubyで書かれているコードやPHPのコードをC#に移植したが上手くいかなかった。今後の課題。
私は
Payloadにある "commits": ["author": {"name":"ほげほげ"}]で特定のユーザーのCOMMITだけに反応するようにできるのでそれを鍵扱いにしています。URLにGETでKEYを足すのも簡単で良い。
### 特定のブランチのプッシュにだけ反応してほしい
Payloadの"ref"にブランチの情報があるので比較すると良い
### 自動で同期した差分が欲しい
コマンド実行のgit pullのところでpullせずに
git fetch -p
git diff HEAD origin/master >> diff.txt
git reset --hard origin/master
で差分が簡単に手に入るかと思います。
JSのArray.prototype.filter.callとArray.from().filterどっちが早いか

JavaScriptのArray-Likeオブジェクトにはfilterなどが用意されていない事があるので
以下の２つの方法での実行を検討してベンチマークを行いました。
* `Array.prototype.filter.call(obj,fn)`
* `Array.from(obj).filter(fn)`

## 結論
`Array.prototype.filter.call`の方が早かったです.

`Array.from(obj).filter`の方はArray-LikeをArrayに変換する処理が入るのでそこがボトルネックになっているのだと思います.

ただ2048字の文字列を4096回処理してこの差なので、一般的な状況では致命的な速度差にはならないと感じました(単純な文字列比較だからかもしれませんが).

## ベンチマーク内容
### 環境
* macOS Sierra 10.12.6
* Google chrome 63.0.3239.132（Official Build） （64 ビット）

chromeを再起動後実行

### コード
```js
(function(){
  function randomArrayLike(length){
    let c = "abcdefghijklmnopqrstuvwxyz0123456789";
    let cl = c.length;
    let r = "";
    for(var i=0; i<length; i++){r += c[Math.floor(Math.random()*cl)];}
    return r;
  }
  let loop = 4096;
  let length = 2048;
  var junk;
  let fn = function(x) {
      if( x=='a' || x=='n' || x=='0'){return true}else{return false}
  };
  function bench_filtercall(arraylike){
    for(let i=0;i<loop;i++){
      let b = Array.prototype.filter.call(arraylike, fn);
      junk = b.length;
    }
  }
  function bench_fromfilter(arraylike){
    for(let i=0;i<loop;i++){
      let b = Array.from(arraylike).filter(fn);
      junk = b.length;
    }
  }

  let arraylike = randomArrayLike(length);
  console.time('filter.call1');
  bench_filtercall(arraylike);
  console.timeEnd('filter.call1');

  console.time('from.filter1');
  bench_fromfilter(arraylike);
  console.timeEnd('from.filter1');

  arraylike = randomArrayLike(length);
  console.time('from.filter2');
  bench_fromfilter(arraylike);
  console.timeEnd('from.filter2');

  console.time('filter.call2');
  bench_filtercall(arraylike);
  console.timeEnd('filter.call2');
})();
```
### 結果
```
filter.call1: 669.18798828125ms
from.filter1: 1072.364013671875ms
from.filter2: 1052.09716796875ms
filter.call2: 617.71875ms
```


## おまけ(map)
## コード
``` js
(function(){
  function randomArrayLike(length){
    let c = "0123456789";
    let cl = c.length;
    let r = "";
    for(var i=0; i<length; i++){r += c[Math.floor(Math.random()*cl)];}
    return r;
  }

  let loop = 4096;
  let length = 2048;
  var junk;
  let fn = function(x) {
      return Number(x) * 2 + 3
  };

  function bench_mapcall(arraylike){
    for(let i=0;i<loop;i++){
      let b = Array.prototype.map.call(arraylike, fn);
      junk = b.length;
    }
  }
  function bench_frommap(arraylike){
    for(let i=0;i<loop;i++){
      let b = Array.from(arraylike).map(fn);
      junk = b.length;
    }
  }

  let arraylike = randomArrayLike(length);
  console.time('map.call1');
  bench_mapcall(arraylike);
  console.timeEnd('map.call1');

  console.time('from.map1');
  bench_frommap(arraylike);
  console.timeEnd('from.map1');

  arraylike = randomArrayLike(length);

  console.time('from.map2');
  bench_frommap(arraylike);
  console.timeEnd('from.map2');

  console.time('map.call2');
  bench_mapcall(arraylike);
  console.timeEnd('map.call2');
})();
```
### 結果
```
map.call1: 1472.779052734375ms
from.map1: 1132.084228515625ms
from.map2: 1067.93310546875ms
map.call2: 1426.677978515625ms
```
JavaScriptで画像処理 - 画像比較

#サンプル
同じサイズの画像2つ選択して、compareボタンを押してください。
異なる箇所が赤く表示されます。
<p data-height="600" data-theme-id="0" data-slug-hash="ZvmBpo" data-default-tab="js,result" data-user="olj611" data-embed-version="2" data-pen-title="Compare" class="codepen">See the Pen <a href="https://codepen.io/olj611/pen/ZvmBpo/">Compare</a> by Shinichiro Maki (<a href="https://codepen.io/olj611">@olj611</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
#画像比較のロジック
ピクセルの色を比較するだけなので、特筆すべきことはありません。
今回のサンプルは、画像のサイズが一致する時のみ画像比較しています。
離散生存決定木 分析

離散生存決定木(Discrete-Time Survival Trees)を使うかもしれないのでおさらい。
RのパッケージだとDStree packagesを使う事になる。

簡単なサンプルコード

```
library(DStree)
# モデル構築
fit<- DStree(spell~ui+age+tenure+logwage,status="censor1",data=UnempDur,control=list(cp=0.0075))
# 決定木を描画
plot(fit)
summary(fit)
```


面白いと思ったのは決定木の各ノードに中央値年齢みたいなものが入っているためわかりやすいなと思った。

![生存決定木.PNG](https://qiita-image-store.s3.amazonaws.com/0/161216/bdee7df0-34ab-3392-0848-18b210ec0408.png)
スレッド情報

スレッド情報出力方法。
忘れないように。

```
int availableWorkerThreads = 0;
int availableCompletionPortThreads = 0;
int maxWorkerThreads = 0;
int maxCompletionPortThreads = 0;
System.Threading.ThreadPool.GetAvailableThreads(out availableWorkerThreads, out availableCompletionPortThreads);
System.Threading.ThreadPool.GetMaxThreads(out maxWorkerThreads, out maxCompletionPortThreads);
```
［Ruby/Rails］プログラミング実務未経験の元リクルート営業が、Railsで顧客管理アプリを作成した件

# プログラミング実務未経験の元リクルート営業が、Railsで顧客管理アプリを作成
![スクリーンショット 2018-01-18 14.13.10.png](https://qiita-image-store.s3.amazonaws.com/0/199441/754e102a-77b1-0c59-6f89-631bb0c66261.png)

## 共有すること
① プログラミング未経験でも、Railsで短期間でWebアプリを作成できる
②「あったら良いなあ」と思っていたアプリを自分に作れるようになると、自信に繋がる

## 作成したアプリ：顧客管理アプリ
![スクリーンショット 2018-01-18 13.49.09.png](https://qiita-image-store.s3.amazonaws.com/0/199441/d840c630-adbb-38f6-028d-428875a49f8e.png)

###《どんなアプリ？》
どのスタッフが、どんな方法で、いつクライアントと接触したか管理するアプリ

###《このアプリでどんな課題を解決できるか？》
#### 1.営業活動量を可視化できる
グラフで営業活動量を可視化することで、
電話・メール・アポイントが、どう売り上げに繋がったのか客観的に理解できる。

→ どう営業活動を行えば効率的に成果を挙げられるか、逆算できる。

#### 2.外出先からも利用可能
Webを閲覧できる環境があれば、社内・社外そしてPC・タブレット・スマホからアクセス可能

→ 事務作業時間・勤務時間の削減
→ 顧客に向かう時間の増大

## 利用した技術

### Ruby
役割：サーバーサイドで動くプログラミング言語。わかりやすく最近人気。

### Rails
役割：Rubyで作られたフレームワーク。Webアプリを作成することが可能。

### jQuery
役割：アプリに動きを与える

### BootStrap
役割：CSS/JavaScript/jQueryのライブラリ

### Chartkick
役割：Rails上でグラフを表示するために利用

### BCRypt
役割：ログイン時に必要なパスワードの暗号化に利用

## その他
制作費用： ¥0-.
制作日数：約10日

## このアプリを作る上で、身につけた技術
### 正規表現
条件に合わない数字の文字列は、電話番号として登録させない。

```ruby:models/customer.rb
  validates :telephone,{presence:true,uniqueness:true,format:/\d{2,5}-\d{1,4}-\d{4}/}
```
（メールアドレスも同様）

```ruby:models/customer.rb
validates :email,{format:{with:/\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i}}
```

### 検索機能の実装
特定の語句と合致するデータを取得し、一覧表示。
（参考資料:[［Ruby/Rails］Gemを利用せずに検索機能を実装する方法](https://qiita.com/tanakadaichi_1989/items/a32812fc31f4b52972ec))

### グラフの導入
Chartkickを利用して、数値を可視化

## コード
[GitHub](https://github.com/tanakadaichi1989/customer_management
)でコードを公開しています。

## モデル
### Staffモデル
自社スタッフの名前・メールアドレス・パスワードを管理

|Column|Data type| 
|-----------------|------------------|
| name | String |
| email | String |
| password_digest | String |


### Customerモデル
顧客の担当者名・会社名・連絡先・住所を管理

|Column|Data type| 
|-----------------|------------------|
| name | String |
| company | String |
| email | String |
| tel | String |
| address | String |

### Contactモデル
自社スタッフが顧客と、いつ・どういった方法で・どんな内容の接触をしたかを管理

|Column|Data type| 
|-----------------|------------------|
|staff_id|Integer|
|customer_id|Integer|
|contact_day|Date|
|contact_way|String|
|memo|text|
|contacted_staff_id|Integer|


## 備考
このアプリのデータベースにある名前・電話番号・メールアドレス・会社名・住所は、全てダミーです。

## アプリを作成した感想
プログラミング未経験でも、勉強すればアプリを作成できる。
作りたいものをアプリとして形にしたのは、自信になった。
3D Face ReconstructionとHoudiniで写真から顔モデルを作ろう

HoloLens感謝祭で[和製キップマンチャレンジ](https://hololens.connpass.com/event/74632/)が開催されたので、それに合わせて
写真から顔モデルを作ってくれるAIサービス[”3D Face Reconstruction from a 
Single Image”](http://cvl-demos.cs.nott.ac.uk/vrn/)とHoudiniでプロシージャルに顔を作る流れを作っていきます。

大本のデータはこの画像を利用します。

![kip3.JPG](https://qiita-image-store.s3.amazonaws.com/0/151589/1ff60572-0477-18c0-269e-db06daf56d0b.jpeg)

やり方は超簡単。[”3D Face Reconstruction from a 
Single Image”](http://cvl-demos.cs.nott.ac.uk/vrn/)にアクセスし、アップロードするファイルを選択して
![キャプチャ1.JPG](https://qiita-image-store.s3.amazonaws.com/0/151589/38fca0e8-5e3d-7d21-915d-f6edb2adbe22.jpeg)

私はロボットではありません　にチェックを入れてUpload Imageを押すだけです。
![キャプチャ2.JPG](https://qiita-image-store.s3.amazonaws.com/0/151589/cca43d87-82a4-c3fc-b2a2-3f2948e2cca0.jpeg)

すると、なんということでしょう。1枚の画像から顔モデルができてしまいました。
Download Wavefront OBJ Fileからobjファイルをダウンロードすることができます。

なんだHoudiniいらねーじゃんって思われるかもしれません。
しかし、objファイルを開いてみてください。

なんと、テクスチャが張り付いているわけではなく、Cd情報つきの擬似ボクセルになっているではありませんか。
![キャプチャ3.JPG](https://qiita-image-store.s3.amazonaws.com/0/151589/a375d415-3627-6263-c035-65d32c24a13c.jpeg)

このままでは色んな用途で利用できません。そこでHoudiniを利用します。
![キャプチャ4.JPG](https://qiita-image-store.s3.amazonaws.com/0/151589/8e93343d-f847-62e7-e76b-065bccc128d3.jpeg)

まずobjファイルをFileSOPからReadします。
ちょっと元データが大きすぎるのと、顔の向きが正面でないのでtransformで微調整します。

そして、VDBfromPolygonでVDBに変換してconvertVDBでポリゴンに戻します。
すると、先ほどまでガタガタだった表面がなめらかになりました。
顔の裏側は邪魔なのでclipで除外します。

VDBに変換すると、Cdのattributeが失われます。そこでattribtransferで
Cd情報を変換前の状態から変換後のモデルに戻します。

ただ、やはりCdではなく、テクスチャを利用したいところ。
UVを指定して、テクスチャベイクを行います。
![キャプチャ6.JPG](https://qiita-image-store.s3.amazonaws.com/0/151589/15c90201-7acf-48e7-7e1e-73947af798ec.jpeg)

テクスチャベイクは、BakeROPを利用してマテリアルを適用したモデルのbasecolorを出力します。
詳しくは日本語情報ブログの[ここを参照](http://houdini.indyzone.jp/blog/bake-texture-rop-%E3%81%A7%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%AE%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%92%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B/)
baseにチェックを行ったらレンダリングします。

出力が完了したら、photoshopで微調整を行います。

調整が完了したら、テクスチャを読み込んで余分なCd情報を削除します。
そして最後の調整としてpolyreduceを行います。
![キャプチャ5.JPG](https://qiita-image-store.s3.amazonaws.com/0/151589/97dfe040-571a-6be9-d342-8d280c7db66d.jpeg)

Houdini16.5から、以前よりもUV情報が崩れずにポリゴン削減ができるようになっています。すばらしいですね。

最後にobjを出力して完了です。hipデータは[こちら](https://drive.google.com/open?id=1FgKzLSH4cKxDv68onObJyw9N19kUwRe3)

色んな人の顔を作ってみて下さい。
pyenvでpythonをインストールするときに必要なこと

pyenvはpythonをインストールするとき依存ライブラリを解決してくれない，しかも場合によってはそのままインストールしてライブラリを使う段階で文句を言いだすので，事前にインストールするべきライブラリをメモしておく．
環境はubuntuなのでaptを使う．
python3の場合なので2だと違ったりするかも．

```shell
sudo apt-get -y install zlib1g libbz2-dev tk-dev libssl-dev libreadline-dev libsqlite3-dev libffi-dev
```

これで少なくとも警告やエラーは出ない．

追記
libffi-devを追加した.
【Numba】Python高速化 ~Numpyをfor文で回す時~

# はじめに

pythonのコードを高速化するためには、いくつか手法がある。

JIT(Just In Time)コンパイラという技術を利用したNumbaについてまとめました。

~~~
Numba gives you the power to speed up your applications with high performance functions written directly in Python. With a few annotations, array-oriented and math-heavy Python code can be just-in-time compiled to native machine instructions, similar in performance to C, C++ and Fortran, without having to switch languages or Python interpreters.

Numba works by generating optimized machine code using the LLVM compiler infrastructure at import time, runtime, or statically (using the included pycc tool). Numba supports compilation of Python to run on either CPU or GPU hardware, and is designed to integrate with the Python scientific software stack.
~~~

簡単にいうと、

- アノテーションを使って高速化する

ということっぽい。

[詳しくは...](http://numba.pydata.org/index.html)



# 使うために

anacondaを使っていれば

~~~
conda install numba
~~~

でいけるようです。



# 簡単な実験

~~~Python:sum2d.py
from numba import jit
from numpy import arange

# @jit
def sum2d(size):
    arr = arange(size**2).reshape(size, size)
    M, N = arr.shape
    result = 0.0
    for i in range(M):
        for j in range(N):
            result += arr[i,j]
    return result
~~~

sum2dというメソッドで行列の要素の総和を計算してみます。  

この行列の大きさを変えていき、時間の違いを見てみます。  

**Numbaで実行する場合は、関数の前に```@jit```をつければいいようです。**

|    要素数    |       単純実装時time       |     Numba実装時time      |
| :-------: | :-------------------: | :-------------------: |
|    100    | 0.0001380443572998047 |  0.09325718879699707  |
|   10000   | 0.003622770309448242  | 7.510185241699219e-05 |
|  1000000  |   0.341188907623291   | 0.0029540061950683594 |
| 100000000 |  30.807491064071655   |  0.2906472682952881   |

要素数が100000000の時に顕著に差が出ました。





# 注意

- 内包表記を使えない
  - for文に書き換える必要がある
- 空リストを使えない
- [numpyで使える関数](http://numba.pydata.org/numba-doc/0.14/numpy_support.html)
  - Numbaで対応してなければ、一から書くと高速化になるかもしれない




# まとめ

- **for文とnumpyの組み合わせを高速化できるっぽい**
- さらに応用した使い方があれば追記していきます。
SourceTree For Windows UIの文字化け対策

#SourceTree For Windows UIの文字化け対策
##ファイルステータス、ブランチ、タグ、リモート等の部分が□□で表示された場合の対策

![sourcetree.png](https://qiita-image-store.s3.amazonaws.com/0/156988/cf0d5f2d-6f1b-049d-6575-bfd09eb52902.png)

##Windows Update (KB4055532)が原因
https://support.microsoft.com/ja-jp/help/4074906/typeinitializationexception-or-fileformatexception-error-in-wpf-apps-t
を参考に

## KB4055002をアンインストール → KB4054183をインストール
###KB4055002をアンインストール
![4055002.png](https://qiita-image-store.s3.amazonaws.com/0/156988/ef322872-2519-3f09-94cb-953aa1edb657.png)

###KB4054183をインストール
[Windows7 SP1 および Windows Server 2008 R2 SP1 (x86システム)用の.NET Framework4.6、4.6.1、4.6.2、4.7、4.7.1 のセキュリティのみの更新プログラム(KB4054183)](http://download.windowsupdate.com/d/msdownload/update/software/secu/2018/01/ndp47-kb4054183-x86_301cb3d6591b572786c8349c12a28e5ec5d2d334.exe)

[Windows7 SP1 および Windows Server 2008 R2 SP1 (x64システム)用の.NET Framework4.6、4.6.1、4.6.2、4.7、4.7.1 のセキュリティのみの更新プログラム(KB4054183)](http://download.windowsupdate.com/d/msdownload/update/software/secu/2018/01/ndp47-kb4054183-x64_a022ad5109b1208dff502d1be4477668b4fa258d.exe)

インストール後、再起動
phpbrewをAWS EC2環境にインストールし、php7.2を実行できる様にした作業記録


EC2にphpbrewインストールする際、ライブラリなど色々必要になったのでメモ

```bash
# ダウンロード
curl -L -O https://github.com/phpbrew/phpbrew/raw/master/phpbrew
# 権限付与
chmod +x phpbrew
# 実行できる事を確認
./phpbrew

# /usr/binにインストール　
sudo mv phpbrew /usr/bin/
phpbrew init

# phpbrew init の結果を有効化するために
echo "source ~/.phpbrew/bashrc" >> ~/.bashrc
source ~/.phpbrew/bashrc

phpbrew known
phpbrew install 7.2 +default

# エラーがでたので色々ライブラリインストール
sudo yum install gcc libxml2-devel openssl-devel curl-devel readline-devel libxslt-devel

# openssl のライブラリはパスを指定する必要があったので、指定しました。
phpbrew install 7.2 +default +openssl=/usr -- --with-libdir=lib64
```

参考: 
phpbrew install時OpenSSLが見つからない場合: https://qiita.com/dimgraycat/items/6154cd3a19b0b6cb8c17
Visual Studio 2017で自作プロジェクトテンプレートを読み込んだらファイルが消えた

# 事の発端
1.　テンプレート作ったぞー！
2.　インポートしてみるぞー！
3.　あれ・・・ファイルが表示されない・・・

# 結論

.vstemplateに下記コードを追加したら解決

```XXX.vstemplate
  <TemplateData>
　　・・・
    <CreateInPlace>true</CreateInPlace>
　　・・・
  <TemplateData>
```

# 詳しく
 [msdnの記事](https://msdn.microsoft.com/ja-jp/library/xkh1wxd8.aspx)に従って
1.プロジェクトをつくる（今回はCloss-platform Appをもとに作成）
![1.png](https://qiita-image-store.s3.amazonaws.com/0/110295/cab939e5-e02b-83f4-4a97-9f2a46af9a65.png)

Blank-App（Xamarin.Forms - .Net Standard）
![2.png](https://qiita-image-store.s3.amazonaws.com/0/110295/74a2c76d-f6da-d157-9f0b-409aa6a7a833.png)

できた
![3.PNG](https://qiita-image-store.s3.amazonaws.com/0/110295/49fbd484-be4a-0cbe-9395-dd27b47efac2.png)

2.テンプレートの出力
![4.png](https://qiita-image-store.s3.amazonaws.com/0/110295/93b2f913-f65c-fd4b-650f-c2c99579b34b.png)

![5.png](https://qiita-image-store.s3.amazonaws.com/0/110295/e9d3ecf1-8e3f-0d4a-1e91-aa65b097d4b9.png)
うんできた！
![6.png](https://qiita-image-store.s3.amazonaws.com/0/110295/618e85c1-6c48-1ab0-cfaa-4f776cb9bb70.png)


3.さあ読み込むぞ
![8.png](https://qiita-image-store.s3.amazonaws.com/0/110295/35abc069-91cf-38a5-185c-556b5a1c8e00.png)

あれ？ファイルがない！！！
![9.PNG](https://qiita-image-store.s3.amazonaws.com/0/110295/bffeb9b6-5e6d-1af3-c251-2d29debabcd4.png)

というわけで出力されたテンプレートファイル内の.vsprojectに下記コードを追加して保存

```XXX.vstemplate
  <TemplateData>
　　・・・
    <CreateInPlace>true</CreateInPlace>
　　・・・
  <TemplateData>
```

4.再度テンプレートからプロジェクトを作ると・・・
![10.png](https://qiita-image-store.s3.amazonaws.com/0/110295/3f3a385e-9d4a-dffd-ffa0-20bdf92e66fe.png)

ファイルが出てきた！！！

# CreateInPlace
詳細は[msdnドキュメント](https://msdn.microsoft.com/en-us/library/ms247196.aspx)で。



ここで結構な時間を費やしてしまったため、備忘録として投稿させていただきました。
Promise.then() で引数を与えたい

`Promise` の `then` で呼び出す際に引数が与えたいと思ったことがある。

## 引数付きPromiseチェイン

与えた引数のミリ秒数 だけ `setTimeout` で `resolve()` する `Promise` のコードは下記

```js:code.js
var wait_msec = function (timeout) {
  return function () {  // *1
    return new Promise((resolve) => {  // *2
      setTimeout(()=>{
        resolve();
      }, timeout);
    });
  };
};
```

ポイントは、 `*1` と記述のある `return function(){...}` を先に記述し、 その中で `*2` の記述のある `return new Promise(...)` を行う。

これにより、上記 `wait_msec` は下記のように `Promise.then(...)` の中で引数付きで呼び出せる。

```js:code2.js
var main = function(){
  Promise.resolve()
  .then( wait_msec(1000) )  // 1秒待つ
  .then( ()=>{ console.log("1000 msec"); })
  .then( wait_msec(2000) )  // 2秒待つ
  .then( ()=>{ console.log("2000 msec"); })
  ;
}
```
ポイントとして、 `Promise` の一番最初は `Promise.resolve()` で開始することである。
代わりに `wait_msec(1000)().then(...)` ということもできるが可読性が落ちると思うのでお勧めしない。


十分な検証はとっていないので指摘歓迎です。


## 個人的な疑問
CodePenで下記のようなコードを書いている。引数を守る必要があるかと思い 42行目あたりのコメントアウトでクロージャー版を記述したが、クロージャーしなくても期待通りに動いている。クロージャーは不要なのだろうか。
[CodePen - anon/pen/opaOyJ](https://codepen.io/anon/pen/opaOyJ?editors=0012)
JSで日付と時刻表示

#HTMLファイル
表示するHTMLにはspanタグで数字の入れ物を用意。それぞれidを設定しておきます。

```HTML:index.html
<div id="time">
	<span id="year"></span>.<span id="month"></span>.<span id="day"></span> <span id="hour"></span>:<span id="minute"></span>:<span id="second"></span>
</div>
```

#JSファイル
各変数に日付と時刻を代入していきます。
その後、innerHTMLでHTMLに設定します。年以外は数字が1桁の時に先頭を0で埋めて2桁をキープ。
実行は最初のclock();でHTML読み込み時に表示。その後、setInterval(clock, 1000);で1秒毎に再帰的に表示します。

```javascript:datetime.js
(function(){
	
	clock();
	
	function clock(){
		
		var date;
		var year;
		var month;
		var day;
		var hour;
		var minute;
		var second;
		
		date = new Date();
	
		year = document.getElementById('year');
		month = document.getElementById('month');
		day = document.getElementById('day');
		hour = document.getElementById('hour');
		minute = document.getElementById('minute');
		second = document.getElementById('second');
		
		year.innerHTML = date.getFullYear();
		month.innerHTML = (100 + date.getMonth()+1).toString().slice(-2);
		day.innerHTML = (100 + date.getDate()).toString().slice(-2);
		hour.innerHTML = (100 + date.getHours()).toString().slice(-2);
		minute.innerHTML = (100 + date.getMinutes()).toString().slice(-2);
		second.innerHTML = (100 + date.getSeconds()).toString().slice(-2);

	}
	
	setInterval(clock, 1000);
	
	
})();
```
Mini-batch-k-means とk-means

使う必要が出てきたのでMini-batch-k-meansとk-meansとの比較お勉強し、備忘録
[Béjar Alonso, Javier. "K-means vs Mini Batch K-means: a comparison." (2013).]
(https://upcommons.upc.edu/bitstream/handle/2117/23414/R13-8.pdf)

どうやらk-meanと比べると同時にデータセットを分析に使わず固定されたサイズで
部分分にやる事で大規模データへの高速化をしているようだ。

![ml_map-680x424.png](https://qiita-image-store.s3.amazonaws.com/0/161216/47819b2c-35fa-671f-46d3-f943621f3a00.png)

ただしPythonのScikit-learnのクラスタリングの使い分けを見ると小規模データ
への適用のときに勧められるアルゴリズムがMini-batch-k-means法になっている。
論文の最後の方にも１０未満のクラスターは２％クオリティーが落ち、２０以上のクラスターは８％クオリティーが落ちるとあり、大きなクラスタリングのときや精度を求められる際には不向きであるのかなと思ってしまう。
ただしここでいうクオリティーとは何を持って言っているのかは不明である。
Hugoを最新バージョンにした

[Debian8にHugoの環境を構築してみた](https://qiita.com/or2/items/ac9472a1e5f2cf5d8b32)で導入したHugoを最新バージョンにした

以前

```
$ sudo dpkg -i hugo_0.19-64bit.deb
```
でインストールしていたので、次の手順を踏んだ

* 最新版のパッケージを取得する

```
$ wget https://github.com/gohugoio/hugo/releases/download/v0.32.4/hugo_0.32.4_Linux-64bit.deb
```

* インストールする

```
$ sudo dpkg -i hugo_0.32.4_Linux-64bit.deb 
```

* バージョンの確認

```
$ hugo version
Hugo Static Site Generator v0.32.4 linux/amd64 BuildDate: 2018-01-11T17:58:37+09:00
```
GolangでBLE (Bluetooth Low Enagy)を使う

私が使ったライブラリを紹介します。

https://github.com/currantlabs/ble

最初は以下のものを使用していたのですが、数分後に接続が切れるという症状がでて解決できなかったため上記にのりかえました。

https://github.com/paypal/gatt

##必要なカーネルのパッチ

https://github.com/paypal/gatt に書いてあるとおり、カーネルがv3.14よりも古い場合は以下のパッチをバックポートする必要があります。

> On Linux:

> To gain complete and exclusive control of the HCI device, gatt uses HCI_CHANNEL_USER (introduced in Linux v3.14) instead of HCI_CHANNEL_RAW. Those who must use an older kernel may patch in these relevant commits from Marcel Holtmann:

```
Bluetooth: Introduce new HCI socket channel for user operation
Bluetooth: Introduce user channel flag for HCI devices
Bluetooth: Refactor raw socket filter into more readable code
```

私が最初に試したときには 3.4のカーネルを使用していたので、上記をがんばってバックポートしました。

##cgoを使っていない利点

この2つのBLEライブラリはどちらもpure goでcgoを使用していません。そのためクロスコンパイルが楽チンです。

まずはPC Linuxで確認。(BLEで目的のデバイスを発見して、全ての項目をダンプさせる)
次にクロスコンパイルして、ラズベリーパイ(カーネルは4.x)で同じように動作するか確認。
次にカーネル3.4のARM Linuxで同じように動作するか確認。(カーネルパッチがうまくいっているか)
これらが完全に同一のソースコードでできました。
viでもブラウザでも文字化けする。Ubuntu

# 文字化け

lightsailというawsの素晴らしすぎる機能を使ってMAMP環境を作ったらブラウザでも日本語が文字化けするし、viでも日本語が文字化けしてしまった。lightsailのサイトの説明は日本語対応しているのにlightsailで立ち上げた仮想サーバーは日本語対応してないという（苦笑）

```
$ cat /proc/version
Linux version 3.13.0-123-generic (buildd@lcy01-10) (gcc version 4.8.4 (Ubuntu 4.8.4-2ubuntu1~14.04.3) ) #172-Ubuntu SMP Mon Jun 26 18:04:35 UTC 2017
```
# これでブラウザは日本語対応になる

```
$ vi /etc/default/locale

LANG="en_US.UTF-8"
LANGUAGE="en_US:"
```
# これでviで日本語が使える

```
$ vi ~/.vimrc
set encoding=utf-8
set fileencodings=iso-2022-jp,sjis,utf-8
```


# 参考
[自分のサーバのOSのバージョンがわからなくなった時に調べる方法](https://qiita.com/ritukiii/items/60a3ac4734fc52748cee)
[Ubuntu で日本語文字化けが発生した場合](https://qiita.com/hayashiki/items/4f8cbda2d5c1dea176ea)
[【linux】viエディタが文字化けして困る](https://www.softel.co.jp/blogs/tech/archives/2203)
ajaxでpostがgetにrewriteされる

## 結論
**`$.ajax()`の`url:`の末尾のスラッシュを削除する。**

- `url:'/item/favorite/'`=>`url:'/item/favorite'`

## 現象
- ajax通信でPOSTを投げているが、ブラウザconsoleに404が返ってくる

## 環境
- Apache

## なぜか
`.htaccess`の設定値に問題あり

```
...
    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]
...
```
Redirect Trailing Slashesの設定が入っているため、
末尾に`/`があるとPOSTで通信しても301にwriteされてしまう。

## 雑感
ローカル環境がnginxだったがサーバー環境がapacheだったため、環境設定に差分が出てしまって原因追求が大変だった・・・。
調べても全然情報がなかった印象です。
Golangでシリアルポート(UART)を使う

私が使ったライブラリを紹介します。

https://github.com/goburrow/serial
私の環境ではボーレート230400 baud でも使用できました。
readのときのタイムアウトを指定することができ、それを超えるとEOFが返ってきます。


最初は以下のものを使用していたのですが、ボーレートが115200まではよかったのですが、230400ができなかったのでやめました。
https://github.com/tarm/serial
ユーザー単位でchrootする(sftp)

# 概要

SFTPで接続する際にChrootし、上の階層に行けないようにするが
他の権限のないユーザーからも編集をしたいというケースの備忘録


# 設定

## SSHD

```conf:sshd.conf
Subsystem sftp internal-sftp

Match User tarou,jirou
        ChrootDirectory /home/chroot/%u
        AllowTcpForwarding no
        ForceCommand internal-sftp
```

## ユーザ領域の設定

Chrootをする場合、rootからのみ書き込みできるようにしなければならなくなってしまうため
Chrootの領域を別に設定し、編集してもらいたい領域をバインドする

```
# mkdir -p /home/chroot/{tarou,jirou}/html
# mount -B /var/www/vhosts/html/tarou  /home/chroot/tarou/html
# mount -B /var/www/vhosts/html/jirou  /home/chroot/jirou/html
```

これでtarou,jirouはログイン後にhtml以下にファイルをあげると
/var/www/vhosts/html/tarou以下にあげていることになるので

/var/www/vhosts/html以下を編集できるユーザーからも編集が出来る
**nologin等のシェルにするのも忘れずに**
cronでログファイルの出力先を間違えたので一括削除した

1.lsしたらログファイルの出力場所が間違ってることに気づいた

2.一応消したいファイル一覧を参照して確認
findコマンドで"*.csv"ファイルのみの一覧を表示
※-maxdepthオプションでサブディレクトリを除外

3.rmでファイル削除
-fオプションで強制削除

```
$ ls -1
hoge.php
hoge.css
log1.csv
log2.csv
log3.csv
.
.
.
$ find ~/dir -maxdepth 1 -name "*.csv"
~/dir/log1.csv
~/dir/log2.csv
~/dir/log3.csv
.
.
.
$ rm -f *.csv
$ ls -1
hoge.php
hoge.css
```