OmniAICreator/Qiita-1.07M huggingface dataset:
AWS LambdaでS3にアップロードされたファイルの情報を取得する

## 流れ

* S3にファイルをアップロードする
* アップロードイベントをLambdaで補足し、ログを出力する

## S3にバケットを作成する

* [Create Bucket]をクリックする
* [Bucket Name] を入力する
* [Create]をクリックする

![image](https://qiita-image-store.s3.amazonaws.com/0/116449/ad4b33d3-a05d-2c34-d8f9-19de6df4c1fa.png)


## Lambda functionを作成する

### Step 1: Select blueprint

* [s3-get-object]を選択する

![image](https://qiita-image-store.s3.amazonaws.com/0/116449/73a3c5f6-6f68-bbfe-b2ab-bec163c6358f.png)

### Step 2: Configure event sources

* [Bucket]は最初に作成したバケット名を選択する
* [Event type]は[Object Created(All)]>[Put]を選択する

![image](https://qiita-image-store.s3.amazonaws.com/0/116449/282be572-9d4b-aed8-a4ae-f3e491395d05.png)

### Step 3: Configure function

* [Name]を入力する
* [Role]はプルダウンより[S3 execution role]を選択して、IAMロールを作成する

![image](https://qiita-image-store.s3.amazonaws.com/0/116449/7be97d3d-2eec-f6bf-842c-5326a3a47e9e.png)

* [S3 execution role]を選択すると、別画面が開くので、何も変更せずに[Allow]をクリックする

![image](https://qiita-image-store.s3.amazonaws.com/0/116449/d6cc9b47-008e-d2c2-6d1b-c04c67b37073.png)

* その他の項目は何も変更せずに[Next]をクリックする

### Step 4: Review

* すぐに使いたいので[Enable event source]を[Enable now]に変更して、[Create function]をクリックする


## 動作確認

* S3にファイルをアップロードする
* S3へのアップロードイベントを検知すると、LambdaのMonitoringタブのグラフに反応がある

![image](https://qiita-image-store.s3.amazonaws.com/0/116449/bd7696b6-55ed-4bf3-7c2d-7c15efb1fe47.png)

* CloudWatchのログを確認する

Monitoringタブ右上の[View logs in CloudWatch]のリンクより、CloudWatchのログを確認できる

## 引き続き・・・

* 動作確認ができたら、Lambdaのコードをカスタマイズしていく
電子工作 > Link > オシロスコープ > sin(x)/x での補間

@ トランジスタ技術 2009年5月号

> でも実際の表示波形はスムーズな曲線ですね。これは、多くのオシロスコープが、sin(x)/xで補間しているからです。

[keysight資料 > オシロスコープのサンプリング・レートと
サンプリング忠実度の評価：正確なデジタル測定の方法](https://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwixhc72zPPLAhWFmZQKHdiEC3IQFggbMAA&url=http%3A%2F%2Fliterature.cdn.keysight.com%2Flitweb%2Fpdf%2F5989-5732JAJP.pdf&usg=AFQjCNG6gccP0ydyThaOzidmapKfd4USGA&sig2=lG-QzssUBw7zksQtV8dzng&bvm=bv.118443451,d.dGo)


sin(x)/xで補間する利点は未消化。
級数展開の性質がいいのだろうか?
ELBを使うとセッションが保持されない問題


ELBでEC2 2台にアクセスを分散させていたのですが、ユーザのTwitterログインフローがおかしな挙動をするようになり、ハマりました。

結論としては、 **サーバーが分散することによりセッションの状態維持が保証されず**、
ログインしているはずなのにログアウト状態に戻ってしまうとか、そもそもTwitter OAuth認証のコールバックの時点で 「Session Expired」エラーが出るといった問題が起きてしまっているようでした。

これを解決するためには、
ロードバランサーの「ポート構成」から、
「ロードバランサーによって生成された Cookie による維持を有効化」
にチェックを入れると良いようです。

![2979c6bda0939325a2b9f7be4407154c.png](https://qiita-image-store.s3.amazonaws.com/0/43677/66b44929-1129-aa85-ef2b-7f451b77bf19.png "2979c6bda0939325a2b9f7be4407154c.png")


こうすることで、同一ユーザからのアクセスは同一のサーバーにアクセスを流すことが可能となり、セッション状態が破綻することがなくなりました。
Type annotation missing in pattern

```
class weakTest {
    private let id //Type annotation missing in pattern
    //private let id: Int

    init(id: Int) {
        self.id = id
        
        print("called initializer")
    }
}
```

🍄解説🍄
変数宣言時に初期値を与えると型を省略できます。（型推論）
初期値を与えない場合は、型を指定しないとType annotation missing in patternが発生します。
EC2をAWSの無料SSL証明書を使ってhttps化してみた


AWSは現在SSLの証明書を無料で発行していますが、まだいくつかの制約があります。
例えば、

* 証明書を適用できるのはCloudFrontとELBに対してのみ
* さらにELBの場合、リージョンがバージニア北部でないといけない (バージニア北部だと、日本からのアクセスの場合東京リージョンと比べて300msほどレスポンスが遅くなるらしい)

今回httpsはどうしても必要だったので、最悪300msのレイテンシを我慢してでもELBに証明書を適用させるか、
もしくはAWS以外で証明書をとるか考えていましたが、どうやらELBの手間にCloudFrontを挟んで、
CloudFrontからELBにhttpでつなぐようにすればhttps化を実現できることがわかりました。

つまり、
クライアント <---- https ----> CloudFront <---- http ----> ELB <---- http ----> EC2
ということですね。
クライアントからサーバーのエンドポイントへの通信がhttpsであれば、URLとしてはhttpsとしてアクセスが可能のようです。


上記の、

CloudFront <---- http ----> ELB


の部分を実現するには、CloudFrontの設定で
Origin Protocol Policy (CloudFront ⇔ ELBのProtocol)をHTTP Onlyにすれば良いです。

そして、

クライアント <---- https ----> CloudFront


の部分を実現し、httpでURLアクセスされたリクエストもhttpsに飛ばすためには、

Viewer Protocol Policy (クライアント ⇔ CloudFrontのProtocol)をRedirect HTTP to HTTPS

にしておくと実現できました。

ちなみに、CloudFrontはAWSサービスの中でも更新したときの反映が遅いので注意が必要です。
また、CloudFront、ELB、EC2にはそれぞれ固有のIPアドレスやAWSが発行するURLが振られているので、DNSを変える前に一度それぞれのURLで問題なく動くことをテストすることが可能です。
技術英語 > Cornerstone:What something is built upon. / Milestone: a measure of success

http://qiita.com/7of9/items/b52c73d43fd3e4f3116a
で出てきた cornerstone.

似たような用語で milestone がある。

違いについてのリンク
https://www.englishforums.com/English/CornerstoneMilestone/bpnbq/post.htm

> Cornerstone is a foundation. What something is built upon.
>
Milestone is a measure of success. One passes many milestones before finally succeeding.
gentooでemacs-eclim

#install
このオーバーレイのeclim
https://github.com/andjscott/overlays/tree/master/dev-util/eclim
と依存関係で必要になるeclipseを
https://github.com/jorgicio/jorgicio-gentoo/tree/master/dev-util/eclipse-sdk-bin
のebuildを使ってインストール

さもなくば，この２つのebuildをコピーしてまとめてある
https://github.com/niitsuma/niitsuma-overlay
から
emerge eclim

最後にemacsからM-x package-installでemacs-eclimをインストール

#設定

.barhrc　 にeclipseのインストール先のパスを追加

```bash
export ECLIPSE_HOME=/opt/eclipse-sdk-bin-4.5
export PATH="$ECLIPSE_HOME:$PATH"
```


.emacs

```elisp
(require 'eclim)
(add-hook 'java-mode-hook 'eclim-mode)
(require 'eclimd)
```


#起動
emacs から
M-x start-eclimd
M-x eclim-project-mode
で~/workspaceのプロジェクト一覧が表示される
CLIでもWinMergeのように綺麗に比較したい（emacsのediff-merge）

普段GUIにおいて、2つのファイルを比較する場合、WinMergeを利用しています。LinuxなどCLIで作業する場合において、ファイルを比較する場合「diff」や「sdiff」コマンドを使って確認します。しかし、ファイルの差異が少ない場合は良いですが、１０００行を超えるテキストファイル同士を比較して、何十箇所も差異があった場合標準出力に大量の出力が出て、出力のどこに違いがあるのかわからずヒエッとしてます。できれば、余計なパッケージを入れることなく、綺麗に比較できるツールがあれば良いなと思っていましたが、emacsのediff-mergeが私のイメージに合いました。

#emacsのediff-merge
emacsの一機能であり、2つのファイルを比較して、差異をハイライトで見ることのできるツールです。2つのファイルを並べて、差異ごとに異なる箇所を確認でき、キーで1箇所ずつ自身のペースで確認できます。

#ediff-mergeで比較する
インストール方法にもよりますが、Linux系などemacsが使える環境であれば使えます。では使って見ます。まず、以下のようなファイルを準備しました。

**比較ファイル1**

```main.html
<!DOCTYPE html>
<html lang=“ja”>
  <head>
    <meta http-equiv="content-language" content="ja">
    <meta charset="UTF-8">
    <meta name="robots" content="noindex,nofollow">
    <title></title>
    <script type="text/javascript"><!-- alert("");--></script>
    <style>body {background: #ffffff;}</style>
    <script type="text/javascript" language="javascript" src=""></script>
    <link rel="stylesheet" type="text/css" href="" />  
  </head>
  <body></body>
</html>
```

**比較ファイル2**

```other.html
<!DOCTYPE html>
<html lang=“ja”>
  <head>
    <meta http-equiv="content-language" content="ja">
    <meta charset="UTF-8">
    <meta name="robots" content="noindex,nofollow">
    <title></title>
    <script type="text/javascript"><!-- alert("");--></script>
    <style>body {background: #ff0000;}</style>
    <script type="text/javascript" language="javascript"></script>
    <link rel="stylesheet" type="text/css" href="" />  
  </head>
  <body></body>
</html>
```

**Linuxのコマンドラインからemacsを起動する**

```sh
#emacsが入っているか確認
$ which emacs
/bin/emacs

$ emacs
```

**emacsで比較する**
※すでにご存知だと存じますが、emacsの「M-x」はエスケープキーを押下した後、xキーを押下します。

```el
$ M-x emacs-version
GNU Emacs 24.3.1 (x86_64-redhat-linux-gnu, GTK+ Version 3.8.8) of 2015-11-21 on worker1.bsys.centos.org

$M-x ediff-merge
File A to merge (default ~/): ~/main.html
File B to merge (default main.html): ~/other.html
```

**比較画面**
![スクリーンショット 2016-04-04 2.19.15.png](https://qiita-image-store.s3.amazonaws.com/0/110457/3dd878ca-6d38-608a-3fc7-1cc1d62f5e6c.png)

画面が3分割され、左上にはmain.htmlを表示、右上にはother.htmlを表示、下には2ファイルの差異を表示しています。

**ハイライトさせる**
「h」キー
![スクリーンショット 2016-04-04 2.22.30.png](https://qiita-image-store.s3.amazonaws.com/0/110457/c6257935-1254-3d54-f2af-b523fc58ce28.png)

差異がある箇所をハイライトしています。それぞれ差異がある箇所に色をつけています。

**差異部分をなぞる**
「p」キー（進む）、または、「n」キー（戻る）
ショートカットによって、次の差異箇所に移動します。

**ediff-mergeから抜ける**

```el
qキーを押下
Quit this Ediff session? (y or n) 
```

抜けた直後、3分割したemacs画面になります。
emacsを抜ける、分割画面で作業するなど選んでください。
![スクリーンショット 2016-04-04 2.28.46.png](https://qiita-image-store.s3.amazonaws.com/0/110457/cfa8c330-1b5f-43d3-6eb5-6c5428a58ed2.png)
SharedPreferencesをいい感じに扱うライブラリSpotを書いた

# SharedPreferences辛い

SharedPreferences周りのコードが大分辛い感じになってきたので、リファクタリングしようと思って色々と調べたところ、偉大な先人の方々のありがたい教えを発見しました。

http://qiita.com/operandoOS/items/8af20ac09a9d6acb075e
http://qiita.com/rejasupotaro/items/e112350e5a7db2febc74

SharedPreferencesをいい加減に使ってるとどう辛いかは、上の記事で十分説明されているので割愛します。

# 解決するライブラリ

で、解決策として上の記事で紹介されているライブラリ（[Garum](https://github.com/operando/Garum), [kvs-schema](https://github.com/rejasupotaro/kvs-schema)）を使おうかと思ったのですが、 ちと今のプロジェクトにそのまま使いにくい事情（後述）があったので、三番煎じですがSpotというライブラリを作りました。

https://github.com/kobakei/spot

SharedPreferences用のObject data mapperです。
Garumやkvs-schemaも同じ用途で開発されていて人気もありそうなので、プロジェクトごとの事情に合えば勿論これらを使ってもよいと思います。

Spotはまだ開発途上なのでAPIなどまだ変わる可能性大ですが、基本機能が一通り動いたので以下に紹介します。

# Spotの紹介

## 簡単な使い方

まず、Entityクラスにアノテーションを付けます

```java
@Pref(name = "foo")
public class MyEntity {

  // Integer field
  // defaultValue can be omitted.
  @PrefInt(name = "hoge", defaultValue = 1)
  public int hoge;

  // String field
  // defaultValue can be omitted.
  @PrefString(name = "fuga", defaultValue = "Hello")
  public String fuga;

  // Default constructor is needed.
  public MyEntity() {}
}
```

そして、ビルドします。ビルド後、`***SpotRepository`というリポジトリが生成されるので使います。

```java
// Get
MyEntity entity = MyEntitySpotRepository.getEntity(context);

// Put
entity.hoge = 123;
entity.fuga = "Goodbye"
MyEntitySpotRepository.putEntity(context, entity);
```

以上。ね、簡単でしょ？

## Spotの特徴

### POJOサポート

これが今回Spotを作ろうと思った動機です。上のサンプルでも見たとおり、SpotではEntityがベースクラスを継承する必要はありません。

自分のプロジェクトでは、他のライブラリの都合でEntityがベースクラスを継承しないといけないライブラリは使いづらかったので、SpotではEntityクラスは継承しなくてよい設計にしました。

### Annotation processing

パフォーマンスを落としたくないため、すべてannotation processingで関連クラスをビルド時に生成しており、ランタイムでリフレクションを内部で一切使っていません。とはいえ十分なパフォーマンス測定はできてません（そのうちやりたい）

### 任意のタイプを保存可能

SharedPreferencesでサポートされている型は、`int`, `long`, `float`, `boolean`, `String`, `Set<String>` だけですが、これらの型との変換クラスを用意することで任意のクラスを保存できます。

例えば、Dateクラスを使いたい場合、こんな感じでDate <=> Longの変換をするtype converterを用意すればよいです。

```java
public class DateTypeConverter extends TypeConverter<Date, Long> {
    @Override
    public Date convertFromSupportedType(Long t) {
        return new Date(t);
    }

    @Override
    public Long convertToSupportedType(Date t) {
        return t.getTime();
    }
}
```

そして、Entityのアノテーションでtype converterを指定しましょう。

```java
@Pref(name = "foo")
public class MyEntity {
    @PrefLong(name = "date", converter = DateTypeConverter.class)
    public Date date;
}
```

これだけで、SharedPreferencesに読み書きするときはLongに変換してくれます。使う側は気にせずDateが入っているEntityを操作できます。

# 余談：苦労した点

ライブラリ自体は対して大きくないのですんなり実装できたのですが、ライブラリの公開がとにかく苦労しました。

普段開発している他のライブラリでは[bintray-release](https://github.com/novoda/bintray-release)というプラグインを使ってデプロイしてるのですが、aptを使ったライブラリによくある2 modules in 1 projectという構成だと、aptのcompiler(processor)の方のモジュールがデプロイされるがjcenterで公開されないという問題があって結局解決できず。。。WebUIから手動で公開だけすることもできるんですが、めんどくさいので諦めました。

で、手っ取り早い方法で[JitPack.io](https://jitpack.io/#kobakei/spot)での公開にしました。JitPackマジ最高。

※似たような問題／解決策ご存知のかたいらっしゃいましたら教えて下さいmm

# まとめ

- SharedPreferencesをいい感じに扱うライブラリを作りました
    - POJOサポート、リフレクションなし、任意のタイプサポート
- aptを使ったライブラリをうまくjcenterにデプロイできなかった
Raspberry piのNode.jsをアップデートする

# Raspberry PiのNode.jsをアップデートする手順

Raspbian初期状態だとNode.jsのバージョンがv0.10.xで古そうなので、最新(記事記載時点:v5.10.0)にアップデートする手順を記載。

基本、[オフィシャルのdebian系の手順](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions)を参照。

## 環境
* Raspberry Pi2 Model B
* Raspbian Jessie

## 手順
1. `$ curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -` ... Node.jsをv5系の最新に紐づける
2. `$ sudo apt-get install -y nodejs` ... Node.jsをインストールする

これだけ

## 動作確認

* `$ node -v`
* `$ nodejs -v`
* `$ npm -v`

などとやってみてバージョンが更新されていることを確認する。
underscoreコードリーディング（uniqueId）



underscoreに詳しくないので、勉強半分でソースコードを読む。



##利用するバージョン
[underscore.js(v1.8.3)](https://github.com/jashkenas/underscore/tree/1.8.3)


##uniqueIdとは


###[underscorejs.orgのuniqueId](http://underscorejs.org/#uniqueId)

こんな説明。
>####_.uniqueId([prefix]) 
>Generate a globally-unique id for client-side models or DOM elements that need one.
>If prefix is passed, the id will be appended to it.


```javascript

_.uniqueId('contact_');
=> 'contact_104'

```

------------- 
クライアントサイドのモデルやDOMで必要なグローバルなユニークIDを生成します。
prefixが渡された場合、それをIDの前につけます

###[underscore.uniqueId](https://github.com/jashkenas/underscore/blob/1.8.3/underscore.js#L1373)
コード的にはこのあたり。

```javascript
  // Generate a unique integer id (unique within the entire client session).
  // Useful for temporary DOM ids.
  var idCounter = 0;
  _.uniqueId = function(prefix) {
    var id = ++idCounter + '';
    return prefix ? prefix + id : id;
  };
```
idCounterを0で定義します。
idをidCounterを前置インクリメントしたものをStringで代入します。
prefixがある場合はprefix+idを、ない場合はidのみを返します。
別ディスクでUbuntu 14.04とWindows 10のデュアルブート環境を構築

初投稿です。


うちの自作タワーPCはWindowsマシンで、
Linux環境がほしい時はVMWareとかを使ってたんですが、
最近は機械学習フレームワークとかをCPUフルに使ったりGPU使ったりで動かしてみたくなったので
デュアルブート環境を構築しました。
2つほど詰まったとこがあったのでメモします。

マシンスペックは以下。
- CPU: Intel Core i7 6700
- メモリ: Crucial DDR4 8GB x2
- マザーボード: ASUS H170 PRO GAMING
- グラフィックボード: ELSA GLADIAC GTX 560 Ti mini
SSD: Intelの200GBでSATA2のやつ
このSSD単体でデュアルブート環境を作ろうとしたんですがゲームで容量パンパンだったので、
タブレットPCを買ってからほとんど使わなくなった[UL20A](https://www.asus.com/jp/Notebooks/UL20A/ "UL20A")くんに刺さってた
たしかCrucialの120GBのSSDにUbuntuを入れて新たに搭載することにしました。


# 1.インストールメディア作成
家に空のCD-RがなかったんでUSBメモリで作りました。
Live USBを作ってUSBブートすれば、それにインストール機能も内包されているので大丈夫です。
[Ubuntu UNetbootin その2 - USB起動ディスクを作成する](http://kledgeb.blogspot.jp/2012/10/ubuntu-unetbootin-2-usb.html)
[Ubuntu 14.04 インストール準備 その4 - WindowsでUSBメモリーのライブメディアを作成する](http://kledgeb.blogspot.jp/2014/04/ubuntu-1404-4-windowsusb.html)
このへんを参考にしました。実際には下のUniversal USB Installerを使って作りました。

新しく繋いだ120GBのSSDにそのままクリーンインストールしても大丈夫かな？と思ったのですが、
念の為、Windowsの管理ツールからフォーマットして空にしてからやりました。
このとき、管理ツールからefiパーティションは消せなかったのですが
[EFIシステムなど削除できないパーティションを手動削除する方法](http://nasunoblog.blogspot.jp/2012/07/efi.html)
ここの記事を参考にしてdiskpartを使って消せました。

# 2.インストール後、ネットワークにつながらない
無事インストールできたのはいいんですが、ネットワークにつながってませんでした。
「利用できるネットワークデバイスがありません」みたいなことをぬかしてやがるので、NICを認識してないようです。
H170 PRO GAMINGはWindows7/8/8.1/10にしか対応してないんで当然といえば当然です。
[UbuntuでNICを認識しない場合の対応](http://rainbowdevil.jp/?p=1164)
ここを参考にIntelのLinux用イーサネットドライバをインストールしたところ、繋がりました。

物理的にディスクが分かれてるので、BIOSのブートメニューで起動しわけてますが、
ぼーっとしてF2連打するの忘れるとWindowsが起動しちゃうので注意が必要ですね。
普段はWindows使うから別にいいんですけど、Ubuntuの更新→再起動の時とかにWindowsが立ち上がると悲しくなります。
毎回ブートメニューを表示する方法って無いんでしょうかね？

何はともあれ、これで論理8コア/RAM16GBに加えGPUもフルに使ってエンジニアリングできますね。
ただ、グラボはちょっと古いのでかえたいところです。
最近の仮想マシンは高性能ですし、Windows10でネイティブにbashが使えるなんて話も出てきたところで、
WindowsユーザがわざわざLinuxのネイティブな環境を構築する必要は薄いかもしれませんけど、需要はあると思います。
MeCab の出力を学校文法に適合する方法（古文）２

桜が満開な今日この頃です。

近々リリース予定の中高生向け「古文の文節区切りアプリ」に読み上げ機能を実装中なのですが、今回 AVSpeechSynthesizer 関連で大小２つの不具合を発見しました。
<hr>
【1.些細な問題】
和歌モードでは、5-75-77の読み上げで、（-で区切られた）チャンクの末端の音を伸ばすようにしました。ところが、ナ行／ヤ行は「ー」では妙な発音になるので、段に応じて適宜母音を補うことで問題回避できました。これは単にバグでそのうち改善するでしょうから許容範囲です。
<hr>
【2.どうしようもなく酷い問題】
「アウ」を「エーユー」と発声するので、仕方なく「アフ」と発声させるようにしました。これはとても許容でない仕様です！！
<hr>
※最近のアップルは守銭奴みたい。
Terraformを通して学ぶAWSの設計メモ

## About
TerraformでのAWS環境を作って行く上で、どんなことを考えながらやったかまとめる試みです。まだまだ穴がありそうなので、適宜更新していきたいなーと思っています。間違っている部分あればご指摘いただけると嬉しいです(>ω<)

## 機能ごとに
### VPC
* VPCは大枠のネットワークのイメージ。
* `cidr_block`はなんでもいいけど、IPをたくさん使えるようにクラスAを採用。VPNの設定とかが絡んでくると社内ネットワークとの関係があるので、クラスBにしたりする必要がありそう。基本的にクラスAでよいはず
* `enable_dns_hostnames`はプライベートのDNS設定。Defaultがfalseなので、trueに設定しておくとよい。
* tagは重要なのでつける。project名・stage名・terraformで作られていることを明示するとよい。これはどのリソースでも使う

### subnet
* VPC内をsubnetで分ける設定
* 大きくpublicとprivateなsubnetに分ける。
* IPのレンジをどうするかっていうのがあるので、`/24`にするとしても今後の拡張を考えてある程度間隔を開けておくとよさそう。
* public/privateともにMulti-AZにしておいて、耐障害性を高めるようにした方が無難。速度命であれば、どちらかのAZに寄せた方がよいが、この時点では両方作っておけばいいと思う。
* subnetを分けすぎるとroutingの設定とかが増えるので、分ける際は要注意

### internet gateway
* vpcは初期状態では外への通信ができない。そのためにインターネットに繋がるためのgatewayが必要になる。
* vpcにつける

### aws_route/aws_route_table
* subnetからの通信を制御する
* publicなsubnetにはinternet gatewayをつける
* privateなsubnetにはnatインスタンスを付けて、nat経由で外部通信ができるようにする。
* nat instance/gatewayがこの時点ではないので、コメントアウトしておく。

### security_group
* EC2などを所属させ、そのサーバへの通信を制御する。iptables的なもの
* 基本的にprivate subnet上では同じIPレンジからの通信は許可
* publicサブネット上では利用するものだけ最低限許可
* ELBを外部に置けばwebサーバもprivateにおけるので、bastionサーバ用のSSHポートのみ許可すればよい。SSHポートは厳重に守りたいので、固定IPからの接続のみ許可、公開鍵認証にするなどするといい。
* ELB/Elasticache/RDSのSGも作成が必要。特にElasticache/RDSへのアクセスはセキュリティ上必要なレンジからのみアクセスさせる設計がベター。

### aws instance
* 通常のEC2インスタンス（オートスケーリングでない）
* タグは柔軟につけたほうがいい
* disposalなサーバであれば、delete_on_terminationをオプションで付けて、サーバ削除したらボリュームを削除するようにしておいた方が、運用が楽。


### launch configuration
* auto scaling groupでサーバを作成するときの起動設定。この設定を元にインスタンスが作成される。
* 各role毎にblue/greenを分ける
* 設定はなるべく変数に逃がす

### auto_scaling_group
* オートスケーリングする単位ごとに作成
* placement_groupは単一AZ内のインスタンスを論理的にグループ化したもの。10Gbpsのネットワークが利用できるので、スループットが高い場合や、レイテンシーが低い場合に使えるとのこと。インスタンスタイプの制限などあり。
* max_size/min_size/desired_capacityはインスタンスの数を決めるパラメータ。desired_capacityは今起動していて欲しい数という認識。minとmaxを書いておけばとりあえずいいんじゃないかな。


### managed service系
* RDS/Elasticacheはコンソール上でメンテ作業などをすることが多いため、terraform管理外にしています。
メモ：type=fileで指定した音声ファイルの再生

```html
<input type="file" class="fileSelector">
```

```js
document.querySelector('.fileSelector').addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (!(file instanceof File)) {
        window.alert('Please upload file.');
    } else if (file.type.indexOf('audio') === -1) {
        window.alert('Please upload audio file.');
    } else {
      var src = window.URL.createObjectURL(file);
      var audio = new Audio( src );
      audio.play();
    }
}, false);
```
OmniAuthTwitterでコンシューマーキーを複数使う

※ 技術的に可能か調べただけなので、やる場合は自己責任でお願いします。

TwitterAPIのリクエスト制限を回避するために色々考えまして、タスクやユーザーごとにコンシューマーキーを切り替えられたらいいなと思いました。

# omniauth-twitterについて

`omniauth-twitter`は、`omniauth`と併用することにより、Twitter認証を簡単にしてくれるgemです。コンシューマーキー等の設定は、以下のように書きます。

```rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :twitter, "consumer_key", "consumer_secret_key"
end
```

こうすることで`/auth/twitter`にアクセスするとtwitter認証が走り、`/auth/twitter/callback`にリダイレクトされごにょごにょと色々できるようになります。とても便利ですよね。

# API制限の回避方法

TwitterAPIには、リクエスト数に制限があります。
作ったサービスのユーザー数が増えた時や、(APIリクエストの回数的な意味で)重い処理が走る場合にすぐに制限がかかってしまいます。そこで、 1アプリケーション内で複数のコンシューマーキーを利用することができないかと考えました。

## request_path, callback_path の落とし穴

omniauth-twitterには、`request_path`と`callback_path`なるものがあり、
\<request_path>にアクセスすると、\<callback_path>にリダイレクトされ、ごにょごにょできるようになるはず…なのですが、どうやらうまく動いてくれないようで、色んな方がこれに悩んでいました。

- [env['omniauth.auth'] is nil when customizing callback_path](https://github.com/intridea/omniauth/issues/767)

# 解決方法

## path_prefixを使い振り分ける

path_prefixを使うと、`/auth/twitter`となっていた`/auth`の部分を他のパスに置き換えることができます。 例えば、`path_prefix: "/hogehoge"`と設定すると、`/hogehoge/twitter`にアクセスするとTwitter認証が走り、リダイレクト先が`/hogehoge/twitter/callback`になります。これを用いて、どのコンシューマーキーでTwitter認証したかをルーティングパラメーターで判断し、Userモデルにそれを判別させるテーブルを用意してあげることで複数のコンシューマーキーをアプリ内で利用することが可能になりました。以下はその設定例になります。

```rb:config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :twitter, Settings.twitter.alpha_consumer_key, Settings.twitter.alpha_consumer_secret_key, path_prefix: '/alpha'
  provider :twitter, Settings.twitter.beta_consumer_key, Settings.twitter.beta_consumer_secret_key, path_prefix: '/beta'
  provider :twitter, Settings.twitter.gamma_consumer_key, Settings.twitter.gamma_consumer_secret_key, path_prefix: '/gamma'
end
```

```rb:routes.rb 
Rails.application.routes.draw do
  get '/:type/:provider/callback', :to => 'sessions#callback'
  post '/:type/:provider/callback', :to => 'sessions#callback'
  # 省略
end
```

```rb:sessions_controller.rb
Class SessionsController < ApplicationController
  skip_before_action :login_required, only: [:callback, :sign_in, :check]

  def callback
    auth = request.env['omniauth.auth']
    user = User.find_by_provider_and_uid(auth['provider'], auth['uid']) || User.create_with_omniauth(auth)
    user.update(api_type: params[:type])
    redirect_to user_path(user.screen_name)
  end
  
  #省略
end
```

以上です。どなたかのお役に立てると幸いです。
Railsのviewの保守性を保つ

## viewの保守性を保つには
以下２つが重要だと思う
- viewではレイアウトのことだけ考えられるようにする
- 適切な単位でパーシャルに切り出す

## viewではレイアウトのことだけを考えるようにする

###何も考えずに書く場合 

```html:output.html
<!--こんな感じのviewを出したい時を想定-->
<div class="hoge">
  hoge
</div>
```
```haml:bad.html.haml
.hoge
  - if @article.value == 'hoge'
    = 'hoge'
  - elsif @article.value == 'hoge1' 
    = 'hoge1'
  - elsif @article.value == 'hoge2'
    = 'hoge2'
  - else
    = 'dont`t hoge'
-# viewにロジックを埋め込むとviewの仕事(表示)以外が膨らんで、見難くなるし、ファイルが大きくなり、該当箇所を見つけるのも一苦労する
```
### helperに切り出す
helperに切り出すことで、rubyコードとして書きやすくなる（viewで書くための冗長なコードがなくなる）
このような形でヘルパーに切り出せばviewは最終的な出力と形がおなじになり、どこをどう修正すればいいのかが分かりやすくなる

```ruby:good_helper.rb
def article_hoge_contet article
  if article.value == 'hoge'
    'hoge'
  elsif article.value == 'hoge1' 
    'hoge1'
  elsif article.value == 'hoge2'
    'hoge2'
  else
    'dont`t hoge'
  end
end
```
```haml:good.html.haml
.hoge
  = article_hoge_content(@article)
```

### モデルに関係するロジックであるならば、decoratorに切り出す
デコレーターに切り出すことで、オブジェクト指向な記述でviewにシンプルに記述できる。
また、helperの名前空間での衝突を考慮しなくてよくなる。

```ruby:article_decorator.rb
def hoge_value
  if value == 'hoge'
    'hoge'
  elsif value == 'hoge1' 
    'hoge1'
  elsif value == 'hoge2'
    'hoge2'
  else
    'dont`t hoge'
  end
end
#引数の記述がなくなり、オブジェクト指向に記述できる
```

```haml:good.html.haml
.hoge
  = @article.hoge_value
-#articleに関するメソッドとして直感的に記述できる
```


## 適切な単位でパーシャルに切り出す
コレクションを描画するときは、各要素のレンダリングをパーシャルに分けて、railsが提供しているrenderメソッドを用いよう
切り分けることで、個々のリストのviewの編集を行う時に見やすく編集を行いやすい。
リストページをそのまま１枚のviewで書いていると、どこが切れ目なのかわからないし、インデントの階層も深くなり、ミスが起きやすい。
切り分けると、個々の要素を編集しているのか、リストの周りを編集しているのかを考える必要がなくなり、インデントの階層も浅くなりミスが起きにくい。

### そのまま書く

```haml:bad_index.html.haml
%h2 article_title
.style_class
  - @articles.each do |article|
    .style_row
      = article.title
```
シンプルな例でわかりづらいですが、インデントがどうしても深くなってわかりづらい（実際はstyle classなどを当てたり、インデントの階層がもっと深くなる）
また、繰り返し出力される部分（リストの１行）との境目が複雑になるとわかりづらくなる

### パーシャルに切り出す

```haml:good_index.html.haml
%h2 article_title
.style_class
  = render @articles
```
リストの１行に関するもので切り出されるので見やすく、インデントも０からスタートして分かりやすい。
ファイルいる名や、パーシャル内で使える変数もコレクションの単数系が自動設定されるので分かりやすい。

```haml:_article.html.haml
.style_row
  = article.title
```
メモ：rafでdelay処理

```js

function delay(cb, delayTime, everyTimeCb){
  var cancel = false;
  delayTime = delayTime || 0;
  (function(){
    var baseTime;
    var raf = window.requestAnimationFrame;
    raf(function(now){
      baseTime = baseTime || now;
      var elapsedTime = now - baseTime;
      if(elapsedTime >= delayTime){
        cb(now);
      }
      else{
        everyTimeCb( elapsedTime );
        cancel || raf(arguments.callee);
      }
    });
  })();
  return function(){
    cancel = true;
  };
};
```

使い方

```js
// 5秒後に実行
var cancel = delay(function(){ ... }, 5000);

// 中止
cancel();

// 経過時間をみる
delay(function(){ ... }, 5000, function(elapsedTime){
  console.log(elapsedTime + 'ms経過');
});
```
TableViewをスワイプしたらボタンを表示させる


TableViewでスワイプしたらメニューボタンを出す機能を実装する方法。

## 環境

|環境|バージョン|
|---|---|
|Xcode|7.3|
|Swift|2.2|

## 参照

[UITableViewDelegate](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableViewDelegate_Protocol/index.html#//apple_ref/occ/intf/UITableViewDelegate)
[UITableViewRowAction](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableViewRowAction_class/index.html#//apple_ref/swift/cl/c:objc(cs)UITableViewRowAction)

## 実装

```swift
    // Buttonを拡張する.
    func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [UITableViewRowAction]? {
        // Shareボタン.
        let myShareButton: UITableViewRowAction = UITableViewRowAction(style: .Normal, title: "Share") { (action, index) -> Void in
            
            tableView.editing = false
            print("share")
            
        }
        myShareButton.backgroundColor = UIColor.blueColor()
        
        // Archiveボタン.
        let myArchiveButton: UITableViewRowAction = UITableViewRowAction(style: .Normal, title: "Archive") { (action, index) -> Void in
            
            tableView.editing = false
            print("archive")
            
        }
        myArchiveButton.backgroundColor = UIColor.grayColor()
        
        // Deleteボタン.
        let myDeleteButton: UITableViewRowAction = UITableViewRowAction(style: .Normal, title: "Delete") { (action, index) -> Void in
            
            tableView.editing = false
            print("delete")
            
        }
        myDeleteButton.backgroundColor = UIColor.redColor()

        return [myShareButton, myArchiveButton, myDeleteButton]
        
    }
```

## ぼやき
逆スワイプでボタンを表示したい場合はどうするんだろうか・・・

swiftじゃないけど、[こういうの：SWTableViewCell](https://github.com/CEWendel/SWTableViewCell)を使えばいいのかなー？

※追加@2016/4/5※
SWTableViewCellを使って逆スワイプにも対応する方法を書きました。
[SWTableViewCellを使ってTableViewで右スワイプだけではなく左スワイプにも対応する](http://qiita.com/katzhide/items/d97d2e0f4e8b823c0460)
カフェでトイレに行ってるときに、Macが盗まれそうになるとGet Wildが流れるようにする

# 概要
* https://gist.github.com/jay3sh/41d5f10293ba2aaa4019ec93766f4fdf
* [[iOS]部屋の灯りが消えたら自動でGet Wildを再生してGet Wild退勤する](http://qiita.com/oubakiou/items/b9b78b00906415d056b2)
* 上記のインスパイアです。
* スクリプトを起動してる際に、MacBookを閉じるとGetWildがなります。

# ①NoSleepアプリのcliのインストール
https://github.com/integralpro/nosleep/releases
こちらからインストール

# ②スクリプトを書く

* osascriptでitunesから再生しようとしましたが、停止ボタンで止められたら困るので<br>音楽ファイルを直接再生することにしました

```bash
#!/bin/sh

MUSIC_PATH="/tmp/GetWild.m4a"

checkNoSleepCtrl()
{
  if [ ! -f $(which NoSleepCtrl) ]; then
    echo "Please install NoSleepCtrl from "
    echo "  https://github.com/integralpro/nosleep/releases"
    echo " "
    echo "Install it with CLI included in it. It's necessary to prevent"
    echo "your macbook from going to sleep when somebody closes the clamshell."
    echo "When you launch this script it will automatically turn the 'NoSleep'"
    echo "mode ON and when you exit the script with Ctrl-C, the 'NoSleep' mode"
    echo "will automatically be turned OFF."
    echo "(You are not required to be running it in the tray)"
    echo " "
    exit
  fi
}

forceVolume()
{
  local volume=$(osascript -e "(get volume settings)'s output volume")
  local muted=$(osascript -e "(get volume settings)'s output muted")
  while :; do
    NoSleepCtrl -a -s 1
    NoSleepCtrl -b -s 1
    osascript -e "set volume 100"
    sleep 0.1
  done &
  local pid=$!
  trap "
    NoSleepCtrl -a -s 0
    NoSleepCtrl -b -s 0
    kill $pid
    osascript -e 'set volume output volume $volume'
    osascript -e 'set volume output muted $muted'
    exit
  " SIGINT
}

isClamshellOpen()
{
  [ $(
    ioreg -r -k AppleClamshellState -d 4 |
    grep AppleClamshellState |
    head -1 |
    cut -d = -f 2
  ) = Yes ]
}

getWildAndTough()
{  
  # Check NoSleepCtrl available
  checkNoSleepCtrl

  # Init local variables
  local intrusion_detected=false
  local counter=0

  # Launch volume forcer
  forceVolume

  # Execution loop
  while :; do
    if $intrusion_detected || $(isClamshellOpen); then
      let counter=5
      say -v Otoya "爆破スイッチが起動されました"
      say -v Otoya "5秒後に爆発します"
      while [ $counter -gt 0 ]; do
        say -v Otoya $counter
        let counter-=1
        sleep 1
      done
      afplay $MUSIC_PATH
      intrusion_detected=true
    fi
    sleep 1
  done
}

getWildAndTough
```

# ③あとは起動してトイレに行くだけです

* Let's try！


# 追記
* @mpyw さんより、下記改善頂きました！
* 元の音量とミュート状態をリストアするように改善
* 実行中に音量やミュート状態を操作されても爆音を強制するように強化
Rubyでshellのパイプみたいなことをやる

RubyでもElixirの`|>`みたいなことをやりたかった。
RubyでShellのようなパイプ演算がしたいという動機は実は無かったのだが、Rubyで定義出来るオペレーターの都合上`|`を利用することになり、まぁそれってShellのパイプだよね？ということで本投稿のタイトルは「shellのパイプみたいなことをやる」としている。

## こんなコードが書ける

`|`オペレーターは`Array`や`Fixnum`で既に定義されているので、影響範囲を局所化するためにrefinementの機能を用いて実装した。
なので、使うためには`using`キーワードが必要になる。

```rb
require 'json'
require 'net/http'

using Pipe

get_url_name = URI('http://qiita.com/k-motoyan.json') \
                 | Net::HTTP.method(:get) \
                 | JSON.method(:parse) \
                 | [:fetch, 'url_name']

get_url_name.call # => 'k-motoyan'
```

改行したい場合は末尾に`\`が必要だとか、引数の必要なProcを呼ぶときは配列にしないといけないとか、処理を実行するときには`call`を呼ばないといけないとかElixirとかShellと較べてちょっとあれだけど、それっぽいことは実現出来ました。

# 実装

コードがDryでないとかは黙って見過ごして欲しい。

やっていることは簡単で、

1. `|`の左辺に渡されたMethod（シンボルでも良い）をProc化する。
2. 1で生成するProcの第一引数に`|`の右辺に渡されたオブジェクトを適用する。
3. 2の処理を返すProcを生成する

ということをやっているだけ。

```rb
module Pipe
  def self.build_proc(proc, apply_proc, *args)
    -> { proc.to_proc.call(apply_proc.call, *args) }
  end

  refine Object do
    def |(arg)
      if arg.is_a? Array
        proc_or_method = arg.shift
        Pipe.build_proc proc_or_method, -> { self }, *arg
      else
        Pipe.build_proc arg, -> { self }
      end
    end
  end

  refine Array do
    def |(arg)
      if arg.is_a? Array
        proc_or_method = arg.shift
        Pipe.build_proc proc_or_method, -> { self }, *arg
      else
        Pipe.build_proc arg, -> { self }
      end
    end
  end

  refine Fixnum do
    def |(arg)
      if arg.is_a? Array
        proc_or_method = arg.shift
        Pipe.build_proc proc_or_method, -> { self }, *arg
      else
        Pipe.build_proc arg, -> { self }
      end
    end
  end

  refine Proc do
    def |(arg)
      if arg.is_a? Array
        proc_or_method = arg.shift
        Pipe.build_proc proc_or_method, -> { call }, *arg
      else
        Pipe.build_proc arg, -> { call }
      end
    end
  end
end
```

# 使ってみたいという奇特な人へ

勢い余って[shelike-pipe](https://github.com/k-motoyan/shelike-pipe)というGemにしてしまったので、`gem install shelike-pipe`とかやれば使えると思う。
ここで書いた内容より、多少高機能になっています。
mac rails環境セットアップ

  505  mkdir ligareus
  506  ruby -v
  507  rbenv versions
  508  rbenv -h
  509  rbenv install 2.6.5
  510  rbenv install --list
  511  brew update
  512  brew upgrade ruby-build
  513  rbenv install --list | grep 2.6
  514  rbenv install 2.6.5
  515  ruby -v
  516  rbenv local 2.6.5
  517  rbenv rehash
  518  ruby -v
  519  bundle -v
  520  gem update bundler
  521  mysql -v
  522  which mysql
  523  which mysql2
  524  ps -ef | grep mysql
  525  git
  526  git status
  527  ls
  528  cd visa
  529  ruby -v
  530  cd ..
  531  ls
  532  cd ligareus/
  533  ruby -v
  534  bundle init
  535  code .
  536  bundle install --path vendor/bundle
  537  be rails -v
  538  bundle exec rails new . --skip-test --skip-bundle -d mysql --skip-turbolinks
  539  bundle install --path vendor/bundle/
  540  git init
  541  subl ./../visa/
  542  git status
  543  git add .
  544  git commit -m "initial commit"
  545  pwd
  546  history
masayuki-no-MacBook-Air-2:ligareus masayuki$
  547  bundle exec rails webpacker:install
  548  git status
  549  be rails s
  550  be rake db:create

iTerm
https://www.iterm2.com/
homebrew
http://brew.sh/

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

rbenv
https://github.com/rbenv/rbenv

brew update
brew install rbenv ruby-build
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
source ~/.bash_profile 


ruby
rbenv install --list
rbenv install 2.3.0
rbenv global 2.3.0

Mysql5.6
brew install homebrew/versions/mysql56
mkdir -p ~/Library/LaunchAgents

cp /usr/local/Cellar/mysql/5.6.23/homebrew.mxcl.mysql.plist ~/Library/LaunchAgents

launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql56.plist

Sequel Pro
http://www.sequelpro.com/

atom
https://atom.io/

プロジェクト作成
$ gem install bundler
$ mkdir project
$ cd project
$ bundle init
Writing new Gemfile to /path/to/project/Gemfile
$ vi Gemfile
A sample Gemfile

source "https://rubygems.org"
gem "rails"
$ bundle install --path vendor/bundle

$ bundle exec rails new . --skip-test --skip-bundle -d mysql --skip-turbolinks

Gitにプロジェクトを登録
git init
git add .
git c -m "initial commit"
Gemを導入
cp gem file
bundle install --path vendor/bundle
gemの設定
rails g config:install
development.rbを更新
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
address: "localhost",
port: 25,
domain: "localhost.localdomain"
}
# Specify what domain to use for mailer URLs
config.action_mailer.default_url_options = {host: "localhost:3000"}
config.after_initialize do
Bullet.enable = true
Bullet.alert = true
Bullet.bullet_logger = true
Bullet.console = true
Bullet.raise = true
Bullet.add_footer = true
end
6.規約準拠確認
bundle exec rubocop
--auto-correct
必須jquery
jquery.bootstrap-growl.min
jquery.livequery.min
rails g scaffold user --skip-view-specs --skip-controller-specs --skip-routing-specs --skip-request-specs --skip-jbuilder --skip-stylesheets
windows10のPythonで3次元グラフを描画するまで

# Pythonで3次元グラフの描画
なんかいい感じに3次元のグラフを書いてほしいと要望があり，「いい感じに書くにはどうしたらええんや・・・」と調べたら，Pythonのmatplotlibで描画できると出てきました．
なので，今回はPythonのインストールから3次元グラフを描画するまでを書きます．

# Python2.7インストール
インストールについては，たくさんの記事があるので，割愛します．
僕は，以下を参照して入れました．

[windows環境へのpythonインストール](http://qiita.com/maisuto/items/404e5803372a44419d60)

ただ，Windows 10が悪いのか自分のPCが悪いのか，環境変数にPythonのPathが通らないので，以下のパスを追加します．

```bash
C:\\Python27
```

## pipのインストール
いつの間にか超かんたんになってました！
以下のサイトに行って，「get-pip.py」をダウンロードして実行するだけで入ります．

[Installing with get-pip.py](https://pip.pypa.io/en/latest/installing/)

コマンドプロンプトを起動して，get-pip.pyをダウンロードした場所に移動して，以下のコマンドで実行するとpipが入ります．

```py
python get-pip.py
```

## 必要なもののインストール
データ整理用にnumpyと描画用にmatplotlibをインストールします．

```py
python -m pip install numpy
python -m pip install matplotlib
```

これで，準備ができました．

# 描画プログラム
描画プログラムは以下のサイトを参考にさせていただきました．
[matplotlibで3Dグラフを描画する](http://d.hatena.ne.jp/white_wheels/20100327/p3)

```py
from mpl_toolkits.mplot3d import Axes3D
import matplotlib.pyplot as plt
import numpy as np

#範囲と間隔の設定
x = np.arange(-5, 5, 0.25)
y = np.arange(-5, 5, 0.25)

#メッシュ描画設定
X, Y = np.meshgrid(x, y)

#計算
Z = np.sin(X)+ np.cos(Y)

fig = plt.figure()
ax = Axes3D(fig)

#プロット
ax.plot_wireframe(X,Y,Z)

plt.show()
```

# 実行結果
![figure_1.png](https://qiita-image-store.s3.amazonaws.com/0/104675/88b55a35-0699-266a-c104-03c2b9c155c4.png)

ここまでできれば，あとはnumpyの扱いさえ覚えればいけそう・・・かな？
なんとか3次元描画の方法がわかったので，これにOpenCVで処理した結果をプロットするために奮闘中です．
HTML,CSS勉強メモ #9 〜min-heightとheight他〜

本日の勉強。

##**進度**##
これまでに残った課題

- #6:`min-height:100%;`と`height:100%;の両方を指定する理由。
- #8:submenuがsidebarの中央に配置されてしまう。
- #8:レッスンでは表示されないビュレットが表示される。

##**メモ**##

- `min-height:100%;`と`height:100%;の両方を指定する理由。

色々調べてみましたが、どうやらIE6などの`min-height`がうまく機能しないブラウザへの対策ではないかと思われます。
IE6ではこれを指定しても中身が少ないと100%に満たない表示になってしまうそうです。
そのため、

```css
#container {
    min-height: 100%;  /*他のブラウザ用*/
    height: 100%;      /*IE6用*/
}
```

と記述する必要があるようです。
でもレッスン内では結構ブラウザ毎の表示への配慮については一先ずとばして来ているように思えるので、
本当にこれだけが理由かは定かではありません。
なので今後も色々調べるときに気にかけてみようと思います。


- #8

この二つは敢えて一緒に書きますが、どうやら原因は`CSS`のリセットにありそうです。
まずsubmenuが中央配置になる理由ですが、これはリスト要素にデフォルトで付いている左の余白と、
`list-style:none;`で消したビュレット用の領域のようです。
そこで`li`の親要素である`ul`に`margin:0; padding:0;`を付けてリスト要素のスタイルをリセットしたところ、
見事余白がなくなりました。

次にビュレットが表示される件ですが、こちらは前述した余白と同じでデフォルトでついているものです。
そしてレッスンでは一番最初に`HTML`に`CSS`のリセットとしてYahoo!CSS Resetを使っています。
私も同じようにしたつもりだったのですが、なんとコピーするアドレスを間違っていました…
つまり、リセットされていなかったわけですね。
しかしそこも一応疑って、試しに以前のレッスンでダウンロードしたnormalize.cssも使ってみたのですが、
結果が変わらなかったのでそこではないと判断しました。
つまり…normalize.cssもキチンとダウンロードできていなかった模様。

いつかこんな事もあったと懐かしく思えるようになる日が来ることを願います・・・
全くためにならない内容を投下して申し訳ありません。
回路シミュレーション LTspice の使い方(5) 「プッシュ・プル回路」

## 概要
入力インピーダンスの低い負荷をドライブする

(アナログ回路の勉強中)

## はじめに

たとえば、高音質なヘッドフォンは、入力インピーダンスが異常に小さい。
http://www1.tcue.ac.jp/home1/takamatsu/104483/071207.htm
(『兜』とも称されるキワモノヘッドフォンは 3Ω )
iPhone 直結では、かなり音割れしているはず。

入力インピーダンスの低い負荷をドライブするには、どうすればいいか。

## 回路
非反転 10倍 の増幅を考える。
40Ω 程度の負荷をかけてみる。

## 改善前
ドライブ能力が不足している状況。
まったく、波形が歪んでいる。

![スクリーンショット 2016-04-03 22.32.45.png](https://qiita-image-store.s3.amazonaws.com/0/69410/9a008c2d-9317-23ad-a5e4-dfa7f8544806.png)

![スクリーンショット 2016-04-03 22.37.53.png](https://qiita-image-store.s3.amazonaws.com/0/69410/cb8bfae3-4a44-6f5f-4135-a64a93c7093c.png)


## 改善後
プッシュ・プル回路を追加することで、ドライブ能力を改善。

![スクリーンショット 2016-04-03 22.52.12.png](https://qiita-image-store.s3.amazonaws.com/0/69410/bfb7975d-90d8-671c-ccd2-7ff94ad7e9b7.png)

![スクリーンショット 2016-04-03 22.31.11.png](https://qiita-image-store.s3.amazonaws.com/0/69410/e99fba1a-85bb-8c53-fb7f-c0101c90b146.png)


## まとめ
 - コンプリメンタリなトランジスタを1セット使うことで、ドライブ能力を大きく改善できる。
削除できない画像オブジェクトができてしまった時の対処

2Dモードでオブジェクトにスプライトをドラッグ＆ドロップすると、Hierarchy上に画像オブジェクトが表示されず、Scene上からも画像オブジェクトを選択・削除することができなくなります(Unity5.3.4f1現在)。

##再現方法
- Unityの新規プロジェクトを２Dで作成します
- Projectに画像をドラッグ＆ドロップします
- ProjectからSceneに画像（スプライト）をドラッグ＆ドロップします
- Hierarchy上に画像が表示されます　←これはOK
![スクリーンショット 2016-04-03 23.01.31.png](https://qiita-image-store.s3.amazonaws.com/0/59911/e7395e33-b54e-89b7-9834-492866b08ac4.png)

- Hierarchy上から一旦画像オブジェクトを削除します
- CubeをCreateします
- Projectから**Scene上のCube**に画像をドラッグ＆ドロップします
![スクリーンショット 2016-04-03 23.02.21.png](https://qiita-image-store.s3.amazonaws.com/0/59911/4a5fe34d-9e89-8710-1e94-3b06c01f38be.png)
**!?**
Hierarchy上に画像オブジェクトがありません。
Scene上からも画像オブジェクトを選択・削除することができません。
Cubeを削除しても画像オブジェクトは消えません。
Hierarchy上のすべてのオブジェクトを削除しても画像オブジェクトは残ります。

##対処法
- Projectから当該の画像を選択します
- TextureType を Sprite から Textureに変更してApplyします
![スクリーンショット 2016-04-03 23.03.02.png](https://qiita-image-store.s3.amazonaws.com/0/59911/b7593b13-216a-cd6d-4d55-ed9d90a6964c.png)

Scene画面上から画像が消えました。

##ついでに３Dモードに変更する
- Editメニュー > Project Settings > Editor > Mode を 2Dから3Dにする

これだけだと背景が単色のままなので、

- Window > Lighting でライティングウインドウを表示
- Environment Lighting > Skybox の右側の◉をクリック
- Default-Skybox を選択すると Game画面上が空色グラデーションになる
- Scene タグすぐ下にある絵のアイコン（Gizmosの左隣）をクリックして反転
![スクリーンショット 2016-04-03 23.31.16.png](https://qiita-image-store.s3.amazonaws.com/0/59911/9edb51aa-d8d5-6ca4-2a72-70b04f6f24a6.png)

Scene上も空色グラデーションになりました。
Googleスプレッドシートで一行ごとにセルを色分けする方法

# 概要
行数が多い資料などで、一行ごとに色分けして見やすくする方法
エクセルと同様に条件付き書式を利用し、奇数偶数で色分けすることで実現
すぐ忘れるのでメモ

# やり方
1. 色分けしたい範囲を選択
2. 右クリックメニューより「条件付き書式」を選択
3. 「カスタム数式」を選択し、以下数式を入れる

```
=MOD(ROW(),2)=1
```
# 参考
[Googleドライブスプレッドシートを奇数偶数で色分け](http://sys-guard.com/post-2856/)

以上
Akka HTTPのごく最低限のWEBサービスに必要なルーティングDSL

#スコープ
タイトル通り、とりあえずAkka HTTP使ってみたい人が最初に使うルーティングのDSLについてのメモ。ごくごく最低限です。
（実践寄りのAkka Streamのソースとして使うとかはこの記事で触れないのでその辺知りたい方はそっ閉じでOKです :ok_hand: ）

#とりあえず書いてみた
```scala:build.sbt(一部だけ)
libraryDependencies += "com.typesafe.akka" %% "akka-http-experimental" % "2.4.2"
```

```scala:Main.scala
import java.util.concurrent.ConcurrentHashMap

import scala.collection.convert.decorateAsScala._

import akka.actor.ActorSystem
import akka.stream.ActorMaterializer
import akka.http.scaladsl.Http
import akka.http.scaladsl.server.Directives

object Main extends App {
    implicit val system = ActorSystem("my-system")
    implicit val materializer = ActorMaterializer()

    val piyoMap = new ConcurrentHashMap[Int, Map[String, List[String]]]().asScala

    import Directives._
    val route = path("hoge") {
        (get | post) {
            getFromResource("moge.txt")
        }
    } ~ pathPrefix("piyo" / ".+".r) { str =>
        pathEnd {
            sys.error("bomb!!")
        } ~ path(IntNumber) { num =>
            get {
                val piyoOpt = piyoMap.get(num)
                complete(s"${str}, ${num}, ${piyoOpt}")
            } ~ post {
                formFieldMultiMap { form =>
                    piyoMap.put(num, form.toMap)
                    complete(s"${str}, ${num}, ${form}")
                }
            }
        }
    }

    Http().bindAndHandle(route, "localhost", 8080)
}
```

#要約
* akka.http.scaladsl.server.Directives._ をimportしたらDSLが使える
* パス情報の構文(pathなど)とHTTPメソッドの構文(get postなど)で絞り込んでネストしてルーティングを作る
* パスの文字列を取りたい時は正規表現やIntNumber構文などをパスの引数に仕込めばOK。次のネストでラムダのパラメータとして使える。
* ルーティングを追加する構文： ~
* パス情報をネストしたい時の構文： pathPrefix
* パス情報をネストしたがここでマッチさせたい時の構文： pathEnd
* クエリパラメータをとりたい時の構文： formFieldMultiMap
* 500 InternalServerErrorを返す構文： sys.error
* ルーティングがマッチしなければ、404 Not Found が返される
* もっと細かいことがしたければ公式文書みてください　http://doc.akka.io/docs/akka/2.4.2/scala/http/routing-dsl/index.html


#個人的な感想
お手軽だけど自分はあまり使わない・・かも？？ :sweat_smile:

個人的には、どっちかっていうとこの手のルーティングは設定ファイルに持たせたい派。
コンパイル言語のハードコードのDSLだし運用面のメリットは特にないかも・・的な印象を途中から感じ始めた。
もし本番で使うんだったら、(使い方やリリース頻度によるけど、)できればこのへんは動的にリロードしたいところ。

せっかくなので、次はakka-http-coreの方勉強しようと思います。
失敗は成功の元



プログラマーとして、就職して、早くも３年になりました。

この３年間、色々な事がありましたが、今、思う事について、書いてみたいと思います。

# 人の言うことは気にしない

社会人になると、色んな事で小言を言われます。
真に受けないようにしましょう（）

私も昔から、人の言った事をずっと、反芻して、すぐごめんなさい、と謝って落ち込んでいく、という無限ループをずっと繰り返してて、それで、ミスを怖がって、怒られないように、怒られないように、生きておりました。。

落ち込んだところで、バグが治るわけでは無いですし、起こしたミスも取返しようがないので、もう気にせず、解決方法を考える方に回すようにしましょう。

心が病まないように、自分を大切に。

# 失敗は成功の元

ミスや困った事、すべては自分の糧になるな、と思います。

バグが発生した時、何故発生したのか、調べに調べると、それについて、詳しくなります。何か困ってそれについて、調べに調べて、それについて、少し詳しくなります。

そういうのを積み上げれば、積み上げるほど、自分のエンジニアとしての幅は広がるな、と思います。  新人というある意味ミスを許される期間にいっぱいミスをしていけばよいと思います。

# プログラマーの差

私がいつも思っている事ですが、
プログラマーという職業は、若手がどんどん活躍できる職業だと思います。

PG歴10年の人が書いた、`console.log(1);` と 今までプログラムを書いた事が無い人が書いた `console.log(1);` 、「1という数字をコンソールに出力する。」と全く同じ動きをします。

コピペしたコードを動かすと(実行環境が同じであれば)、同じ動きをします。

プログラマーの差は、知識と経験だと思います。

一年目にしっかり、アピールして二年目以降、しっかり実力を買ってもらって、色んなチャレンジをさせてもらえるようなポジションにのし上がって、どんどん、知識や経験を蓄積していきましょう！

# 最後に
くれぐれも体と心は大切にしていきましょう(´・ω・`)

(※意味深ですが、特に私になにかあったワケではありません。)
cron参考まとめ

* [crontabの書き方 ](http://www.server-memo.net/tips/crontab.html)
* [cron の意外な落とし穴！](http://moro-archive.hatenablog.com/entry/2015/03/17/011823)
* [cronの読みは"クロン"](http://takuya-1st.hatenablog.jp/entry/20100502/1272827685)
RMS WEB SERVICE（楽天WebAPI）新認証方式をPHPで利用する際の変更点

楽天が提供するWeb APIのうち、店舗向けAPIである「在庫API」と「受注API」の認証方式が変わりました。（在庫APIは2015年10月から。両APIとも2016年9月30日までは旧認証方式も利用可能）
公式ドキュメントの投げやり具合に挫折した人向けに、受注API (Order API)利用時の変更点を説明します。


## エンドポイントの変更
```php:コード
// 旧認証方式
// define('WSDL_URL', 'https://orderapi.rms.rakuten.co.jp/rms/mall/order/api/ws?wsdl');

// 新認証方式
define('WSDL_URL', 'https://api.rms.rakuten.co.jp/es/1.0/order/ws?WSDL');
```

## AuthKeyの変更
旧認証方式ではここで発行時にのみ入手可能でした。
> https://order.rms.rakuten.co.jp/rms/mall/rj/vc?__event=AM00_001_001 （要ログイン）

新認証方式ではここで手に入るserviceSecretとlicenseKeyを使います。

> RMS WEB SERVICE > 4.基本設定 の 4-1.利用設定
> https://webservice.rms.rakuten.co.jp/merchant-portal/configurationApi （要ログイン）

```php:コード
define('AUTH_KEY', 'ESA ' . base64_encode(serviceSecret . ':' . licenseKey));
// serviceSecret, licenseKeyをそれぞれ置き換えてください。
// 定数AUTH_KEYがリクエストに含めるauthKeyになります。
```

## 利用するAPIの選択
公式サイトの移行方法には記述されていない事項です。新規利用ではなく移行の場合は見落としやすいのではないでしょうか。

ここで利用するAPIを選びます。
> https://webservice.rms.rakuten.co.jp/merchant-portal/configurationApiEdit （要ログイン）

元から新認証方式に対応するAPIはたくさんあるので、受注APIはその一部になります。
※「利用可能」と表示されているのを確認すること。



以上です。
情弱な私が調子乗ってUSキーボードのmacを買ったら日本語入力できなくなった件

# はじめに
先日macを購入する機会がありました。ちょっと粋ってUS配列のキーボードで購入したため、
日本語入力が可能になるまで、別のwindowsPCで調べながらmacをセットアップするという悲しい感じになりました。
以下日本語入力のセットアップ方法をまとめておきます。

# 手順１　日本語入力を可能に
- 左上のアップルマーク→システム環境設定→キーボード→入力ソースタブ
- 左下の➕から日本語を追加
- この状態だとcontrol+spaceで切り替えができます。

# 手順２　キーボードの日本語切り替えを便利に（USキーボードの場合）
- [Karabiner](https://pqrs.org/osx/karabiner/index.html.ja)　をインストールをダウンロード
- ダウンロードされたdmgファイルをダブルクリック
- インストールを実行
- LaunchPadからKarabinerを起動
- アクセスコントロールの設定が表示されるので許可（左下のロックを解除する必要があるかも）
- KarabinerのForJapanese→左右のコマンドキーを・・・・・→コマンドキーの動作を優先モードにチェックを入れる
- デフォルトの変換を停止するためにシステム環境設定→キーボード→ショートカット
- 前の入力ソースを選択、入力メニューの次のソースを選択のチェックボックスを外す。
- この状態だと、左のcommandで英字、右のcommandで日本語入力になります。
- 今がどっちの状態か考えなくて良いので便利ですね。
非イラストレータが初めてPCでイラストを描いた話


# 概要
筆者は仕事でPCを用いてプログラムしたりExcel使ったりインターネットしてたりしますが、あまりペイントツールを用いて画像の編集であったり、もしくは新しいデザインを作るということがないのでちょっと勉強がてらに絵を描いてみたという話になります。

こんなアイコン画像を作ってみた

![カエル.png](https://qiita-image-store.s3.amazonaws.com/0/89599/7ab0547e-1cbe-ed24-46be-e093589bdd85.png)

# 使ったソフト

[MediBangPaintPro](http://medibangpaint.com/)
メディバンペイントと読みます。
Windows、Macにも対応しているようです。

このソフトで絵を描こうとした理由ですが
この手のツールの良さをまだ吟味したわけではないので特に理由はありません。
ただMac版のGimpやKritaはバグが多いような気が...

どのくらい互換性があるか未知ですがメディバンはPhotoShopで作成されるPSDファイルを読み込むことが可能のようです。

# 機能

上記のアイコン画像を作成した時の機能になります。

## レイヤー

![スクリーンショット 2016-04-03 22.10.26.png](https://qiita-image-store.s3.amazonaws.com/0/89599/e3798fcd-71ac-7b70-56a8-5e5d2a848faf.png)

1枚の画像を作る為にサンドイッチの構造のように絵を重ねて作ることができます。
上記の画像では背景画像と別の画像を分けて構成しています。
使用しないレイヤーの時はレイヤー名の左横にある●を押して消すことで非表示できます。

![スクリーンショット 2016-04-03 22.15.32.png](https://qiita-image-store.s3.amazonaws.com/0/89599/5d3b2e59-58fa-8feb-e061-0471e019fc85.png)

## 定規

円形や平行線であったり定規の線からはみ出ないように線を引くことができる機能です。

![スクリーンショット 2016-04-03 22.18.35.png](https://qiita-image-store.s3.amazonaws.com/0/89599/59dff448-6e4e-d301-caf7-d45a8e77af93.png)

アイコンの絵はペンタブを使わずに定規の機能で描いた絵です。

## 切り取り

もしレイヤー分けがされていない画像のとき一部だけ取り除きたい場合があるかと思います。
いろいろな機能を合わせて行う技になりますが、輪郭がしっかりしていれば比較的に簡単に抜き取ることが可能です。
手順として下記になります。

1.自動選択ツールを使用します。

![スクリーンショット 2016-04-03 22.29.43.png](https://qiita-image-store.s3.amazonaws.com/0/89599/0caf5cc8-aab5-cfb4-a671-6f5d92bdebfa.png)

2.切り抜きたい範囲を選択していきます。

切り抜きたい箇所が複数ある場合は「Shift」を押しながらクリックすることで選択できる箇所が増えます。

![スクリーンショット 2016-04-03 22.31.33.png](https://qiita-image-store.s3.amazonaws.com/0/89599/e6e706a1-196e-5862-dc27-0fe86346b481.png)

3.コピーする
「Ctrl + C」もしくは「Command + C」

4.レイヤー上で貼り付ける
「Ctrl + V」もしくは「Command + V」
これで別のレイヤーに切り抜いたものを配置することができます。

![スクリーンショット 2016-04-03 22.36.07.png](https://qiita-image-store.s3.amazonaws.com/0/89599/e98b3cef-a58a-b078-d437-c2e16676cc6a.png)

# 所感・感想

簡単なサイトのデザイン画像とかも定規機能を使えばすぐに作れそう
こういったツールの使い方とか割と一般の人でも需要ありそう！
[memo]AngularJsのDirectiveでパスワードとconfirmの比較をさせる。

- パスワードを変更した場合、確認用と比較して判定してくれる。
- 確認用を変更した場合、パスワードと比較して判定してくれる。

こんな事をしてくれるディレクティブが欲しくなり、どこか公開してる方がいないか探してました。
一つのディレクティブで、上記二つを同時にしてくれるディレクティブを公開してるところが見当たらなかったので、簡単に作ってみたのでメモ。


# HTML
```
<input type="text" name="password" ng-model="input.password" ng-minlength="8" ng-required="true">
<input type="text" name="passwordConfirm" ng-model="input.passwordConfirm" compare-with="input.password" ng-required="true">
<div ng-show="signUpForm.password.$touched && signUpForm.passwordConfirm.$touched" ng-messages="signUpForm.passwordConfirm.$error">
  <div ng-message="compareWith">Password Not Matched</div>
</div>
```

#Directive

```
app.directive( 'compareWith', function (){
  return {
    require : "ngModel",
    scope   : {
      compareWith: '='
    },
    link:
      function( scope, element, attrs, ngModelCtrl ){

        scope.compare  = function( origin, value ){
          if( origin !== ngModelCtrl.$viewValue ){
            ngModelCtrl.$setValidity( 'compareWith', false );
          }else{
            ngModelCtrl.$setValidity( 'compareWith', true );
          }
          return value;

        };

        scope.$watch( 'compareWith', function( origin ){
          return scope.compare( origin, ngModelCtrl.$viewValue );
        } );

        ngModelCtrl.$parsers.unshift( function( viewValue ){
          return scope.compare( scope.compareWith, viewValue );;
        } );

      }
  };
} );
```

# 参考
- [AngularJS 1.2 日本語リファレンス | js STUDIO](http://js.studio-kingdom.com/angularjs/guide/forms)
CakePHPでテスト自動実行


## Cake2.xでのテストモジュールを使う

[公式ドキュメント]([http://book.cakephp.org/2.0/ja/development/testing.html) だとUnixで動かすことが前提なので、備忘録をかねてメモする


1. xampp\php上で、cmd.exeから ```phpunit --version``` とコマンドを入力し、何らかのバージョン番号が帰ってくることを確認する。
    ![image](https://qiita-image-store.s3.amazonaws.com/0/42407/cc5935ed-37f7-f26f-fd86-1c68c1230754.png)
2. バージョン番号が確認できない場合、xampp\phpにファイルphpunitの存在を確認した上で、なければ、(https://phar.phpunit.de/)からphpunit.pharをダウンロードし、phpunitと名前を変えて保存
3. テスト用データベースを設定し、database.phpを編集する
```
public $test = array(
    'datasource' => 'Database/Mysql',
    'persistent' => false,
    'host'       => 'dbhost',
    'login'      => 'dblogin',
    'password'   => 'dbpassword',
    'database'   => 'test_database'
);
```
4. ウェブランナー ```http://localhost/[appname]/test.php``` にアクセスして、こんな画面が表示されれば成功
    * ![image](https://qiita-image-store.s3.amazonaws.com/0/42407/860fed7c-92a6-d057-27ab-8061fd54cc91.png)
5. ディレクトリ ```app/Test/Case/[Type]```というディレクトリに、```○○○Test.php```というファイルを作成し、CakeTestCase、または ControllerTestCase, PHPUnit_Framework_TestCaseを継承したクラスを作る

## エラーの対応 PHPUnit_Framework_TestCase::__construct() must be of the type array

* こちらは何のこと無い、テストクラスに Testをつけていなかったため、controllerと同じクラス名になってしまっていた。テストクラスを生成しようとしてもControllerを継承していなかったので上記の感じなエラーとなった
ssh-agent 自動起動（毎回パスフレーズ聞かれるのがうっとうしい人向け）

* windows7
* cygwin
* vagrant
* centos

環境で開発してる際・・・・

winだから？cygwinだからか？
ssh-agentが自動起動しておらず、毎回sshでパスワード聞かれるのがうっとうしい。。。。
ので、bashに下記追記で地味にラクになった。

```
KEY_FILENAME='hogehoge'   # 秘密鍵ファイル
PASSPHRASE='XXXXXXXXXX' 

eval `ssh-agent`

expect -c "
set timeout -1
spawn ssh-add /home/Username/.ssh/$KEY_FILENAME
expect {
    \"Enter passphrase for\" {
        send \"$PASSPHRASE\r\"
    }
}
expect {
    \"denied\" { exit 1 }
    eof { exit 0 }
}
"

```

早くmacに変えたい。