OmniAICreator/Qiita-1.07M huggingface dataset:
Web Applicationの構成要素（サーバーサイド - middle）

## DNS
Domain Name System
インターネットなどのTCP/IPネットワーク上でドメイン名やホスト名とIPアドレスの対応関係を管理するシステム。

- TCP/IPネットワークではIPアドレスで個々のコンピュータやネットワークを識別するが、人間にとって親しみやすい文字や記号の並びで別名を付けることができる。（IPアドレス＝数字の羅列で管理するのは大変！）

## DHCP
インターネットなどのネットワークに一時的に接続するコンピュータに、IPアドレスなど必要な情報を自動的に割り当てるプロトコル。
DHCPで設定情報を提供する機能を持ったコンピュータやネットワーク機器をDHCPサーバという。

- ネットワーク設定を手動で行わなくてもすぐに適切な設定で接続することができ、ネットワークの設定に詳しくないユーザでも簡単に接続できる。
- ネットワーク管理者は多くのクライアントを容易に一元管理することができる。

## SQL server
Microsoft社が販売しているwindows向けのリレーショナルデータベース管理システム(RDBMS)。

RDBの利点

- データの重複が避けられる → データの変更や削除が楽
- 検索がしやすい

SQL serverの特徴

- 基本的な機能以外に、データを活用するための機能が多く備わっている。（レポート作成機能，分析機能 etc...）

## Web server
Webブラウザからのリクエストを受け付けてレスポンスを返すサーバ。

## Application server
ユーザからの要求を受け付けて、データベースなどの業務システムの処理に橋渡しする機能を持ったサーバ。（クライアントとデータベースサーバの中継ぎ）

Webシステムはかつて2階層システム（クライアントとサーバ）が多かったが、3階層システム（ユーザー層、ビジネス層、データ層）では

- ある階層へ変更を加える必要が生じた際にも柔軟に対応できる。（システムのメンテナンス・改修がしやすい）
- データベースへのアクセスの面で、パフォーマンスが向上する。

## Mail server
インターネット上に常に接続され、自ネットワーク内のユーザの電子メールの送信や受信を行うコンピュータ。
他ネットワークのユーザに電子メールを送信するSMTPサーバと、自ネットワーク内のユーザあてに送られてきた電子メールを保管し、ユーザからの受信要求に対応するPOP3サーバやIMAP4サーバなどを合わせた呼び方。

## File server
自身の管理している記憶装置をネットワーク上の他のコンピュータと共有し、外部から利用できるようにするコンピュータ。

- ファイルサーバ上にあるファイルは（許可されていれば）誰でも他のコンピュータから読みこんだり書きこんだりできるため、データの一括管理が可能になる。

## LDAP
Lightweight Directory Access Protocol
インターネットなどのTCP/IPネットワークでディレクトリサービスにアクセスするための通信プロトコルの一つ。LDAPは利用者がクライアントを用いてディレクトリサーバに接続し、その管理する情報を利用するための通信手順を定めている。

- 読み取りが高速
- 高度な検索機能を持つ

## Message Queue
アプリケーションソフト間でデータを交換して連携動作させる際に、送信するデータをいったん保管しておき、相手の処理の完了を待つことなく次の処理を行う方式。

- 一時的に接続が途絶えるような状況が想定される場合でも、アプリケーション側では特に対策を行わなくても確実に相手にメッセージが届く。
- アプリケーション間の相互運用性が向上し、システム全体の耐障害性も向上する。
ガラケーとIE6〜10を除外したい場合、UserAgentに Gecko が無いことで判定すればよさそう

[ユーザーエージェント(User Agent)情報 解析／まとめ](http://www.red.oit-net.jp/tatsuya/java/browser/useragent.htm#hMozilla)

* Gecko が含まれる => iPhone, Android, IE11、Edge, Chrome, Firefox, Safari
* Gecko が含まれない => IE6〜10、ガラケー他
* Android が含まれる => Android製品
* X11 が含まれる => X11
* iPhone, ipod, ipad が含まれる => Apple製品

## 目的

「cssやjavascriptが一切使えないガラケー」向けに作られたサイトがある。
ガラケーからのアクセスはもはやほとんど無い。

そこにスマホ対応としてcssを書きたいがガラケーには一切影響が無いようにしたい。
ガラケーでは`<script>タグ`や`css`がそのまま平文として表示される可能性がある。
auのガラケーならページが真っ白になるかも。

cssに苦しめられるIE6〜10について、今から着手するならIE11以外はサポート終了と考えて良さそう。(vistaも来年までか。)

* [Tech TIPS：一目で分かる、各Windows OSでのInternet Explorerのサポート終了時期 - ＠IT](http://www.atmarkit.co.jp/ait/articles/1503/11/news134.html)

## 判定

* [ユーザエージェント | サービス・機能 | NTTドコモ](https://www.nttdocomo.co.jp/service/developer/make/content/browser/html/useragent/#p09) フルブラウザ

> [P01G](http://kakaku.com/item/J0000013720/)は`Mozilla/5.0 (P01G;FOMA;like Gecko)`

```php:
function is_gecko() {
	if (strpos($_SERVER['HTTP_USER_AGENT'], "Gecko") === false) {
		return false;
	}
	// FOMAのフルブラウザを除外
	if (strpos($_SERVER['HTTP_USER_AGENT'], ";FOMA;") !== false) {
		return false;
	}
	return true;
}
```

```php:
function is_apple() {
        return preg_match('/iPhone|iPod|iPad|Macintosh/', $_SERVER['HTTP_USER_AGENT']);
}
```

* [実例](http://qiita.com/tukiyo3/items/c218967ee97242dad8b4#%E5%AE%9F%E4%BE%8B)


```php:iPhoneでoptionの文字列が長すぎて表示しきれない場合用
<select>
...
<?php if(is_apple()) : ?>
<optgroup label=""></optgroup>
<?php endif; ?>
</select>
```

* [UserAgent調べる君](http://www.baka-ke.com/lab/useragent.php)

```bash:X11
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
```

```bash:w3m(linux)
w3m/0.5.3+git20151119
```
【プログラマーのための数学】行列

## 目次
[プログラマーのための数学 - 目次](http://qiita.com/Esfahan/items/ab63e7c5bcf812dff2a9)

## 行=>横、列=>縦
まずは、行列で、行と列、どちらが縦か横か、下記のように覚えましょう。
行が横で、列が縦です。

![matrix.png](https://qiita-image-store.s3.amazonaws.com/0/105936/45798e2f-809d-5232-8c76-60113e648679.png)

## 行列の式の書き方
![001.png](https://qiita-image-store.s3.amazonaws.com/0/105936/23bc0ebc-d1c4-10e0-f105-da9ce802de0a.png)
出典：[jsciencer.com](http://jsciencer.com/)

行列は上記のように書きます。

それぞれの数字のことを、成分または要素と呼びます。
上記の例でいうと、2x2の行列で、成分は4つとなります。

また、それぞれの成分の位置は、下記のような言い方で表します。

| 場所 | 名称 | 値 |
| :-- | :-- | --: |
| 上段左 | (1,1)成分 | a11 |
| 上段右 | (1,2)成分 | a12 |
| 下段左 | (2,1)成分 | a21 |
| 下段右 | (2,2)成分 | a22 |


## 2つ行列が等しい状態にある時

![002.png](https://qiita-image-store.s3.amazonaws.com/0/105936/cc70058d-e96b-4d92-f613-9bdbc7831411.png)
出典：[jsciencer.com](http://jsciencer.com/)

また、上記のようなAとBの行列があり、`A = B`という条件のとき、
同じ位置にある成分同士は等しくなります。

```
a11 = b11
a12 = b12
a13 = b13
a21 = b21
a22 = b22
a23 = b23
a31 = b31
a32 = b32
a33 = b33
```

## 行列の足し算、引き算
![003.png](https://qiita-image-store.s3.amazonaws.com/0/105936/b50af54f-553c-54cc-38be-30eb9598c543.png)
出典：[jsciencer.com](http://jsciencer.com/)

行列の加減演算は、各成分ごとに行います。
上記の例だと、下記のような結果になります。

| 場所 | 名称 | 式 | 解 |
| :-- | :-- | --: | --: |
| 上段左 | (1,1)成分 | 1+0 | 1 |
| 上段右 | (1,2)成分 | 2+1 | 3 |
| 下段左 | (2,1)成分 | 3+2 | 5 |
| 下段右 | (2,2)成分 | 4+3 | 7 |

引き算も同じです。

行列の和と差は、対応する成分同士での足し引きとなるため、
行数と列数の一致する行列同士でないと計算できません。

## 行列のスカラー倍
行列全体に対して、一つの数を掛けることができます。

![004.png](https://qiita-image-store.s3.amazonaws.com/0/105936/b0a87e1a-33bc-e0da-d8e8-09e1e90d2cd4.png)
出典：[jsciencer.com](http://jsciencer.com/)

| 場所 | 名称 | 式 | 解 |
| :-- | :-- | --: | --: |
| 上段左 | (1,1)成分 | 2x1 | 2 |
| 上段右 | (1,2)成分 | 2x2 | 4 |
| 下段左 | (2,1)成分 | 2x3 | 6 |
| 下段右 | (2,2)成分 | 2x4 | 8 |


## 行列の掛け算
行列の掛け算の仕方は、足し算引き算とは少し違います。
下記の図のように、左側の行と右側の列を対応させて計算します。

![008_line.png](https://qiita-image-store.s3.amazonaws.com/0/105936/f3edacf8-2e74-9921-9222-6257871a7a97.png)

![008_line2.png](https://qiita-image-store.s3.amazonaws.com/0/105936/05f924bd-7f01-19a9-2d0e-38795f721c9e.png)
出典：[jsciencer.com](http://jsciencer.com/)

```
左(1,1)成分 x 右(1,1)成分
左(1,2)成分 x 右(2,1)成分
左(1,3)成分 x 右(3,1)成分

左(2,1)成分 x 右(1,1)成分
左(2,2)成分 x 右(2,1)成分
左(2,3)成分 x 右(3,1)成分
```

このような計算方法になるため、左側の「行」の要素数と、右側の「列」の要素数が同じでないと、計算できません。

下記、他の例を記載しておきます。

![007.png](https://qiita-image-store.s3.amazonaws.com/0/105936/bb386d5c-2c89-544a-de8b-b72be214daf2.png)

![008.png](https://qiita-image-store.s3.amazonaws.com/0/105936/b49434af-be51-1bb7-70e6-a83b5673cb33.png)

![009.png](https://qiita-image-store.s3.amazonaws.com/0/105936/0dffb614-6640-dffa-c028-d0b02222fca8.png)
出典：[jsciencer.com](http://jsciencer.com/)

以上

[参考]
[JSciencer - 行列](http://jsciencer.com/category/higschmath/matrix/)
[東大生が教えるビジュアル数学](http://www24.atpages.jp/venvenkazuya/mathC/matrix1.php)

[関連記事]
[プログラマーのための数学 - 目次](http://qiita.com/Esfahan/items/ab63e7c5bcf812dff2a9)
Windows7上にPythonで機械学習環境を作って動かしてみるまで

# 前置き
機械学習といっても何を入れて何をしたらいいやらなので、試行錯誤したログを残しておく
参考にしたリンクとかも貼っておく
後から見直したときに、どこまで調べたか思い出せるようなメモになることでしょう（願望）

# Python使おうと思い至った理由
「機械学習 チュートリアル」でググった結果の上位に[機械学習初心者が、素早く学べるコンテンツとライブラリ20選（Python編）](http://paiza.hatenablog.com/entry/2015/12/09/%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E5%88%9D%E5%BF%83%E8%80%85%E3%81%8C%E3%80%81%E7%B4%A0%E6%97%A9%E3%81%8F%E5%AD%A6%E3%81%B9%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%A8%E3%83%A9)があったのでね
Python編だしね
あと機械学習用のライブラリで「scikit-learn」って名称を聞いた覚えがあったのでね

# Windows用のPython環境ってどれがいいの…？
一から環境構築するのは辛いので（時間さえあれば楽しいのだけど）、いい感じになっているパッケージを使いたいところ
この辺がいいらしい？のかな？
- [Anaconda](https://www.continuum.io/downloads#_windows)
- [WinPython](https://winpython.github.io/)
- [Python(x,y)](https://python-xy.github.io/downloads.html)

3年位前にPython勉強しよかと思って落とすだけ落としてみたPortablePythonは開発止まっちゃったみたい
Python(x,y)は06/30/2015で更新止まってるし、いまさら2.x系は...と言うことで除外
anacondaだとLinuxに移った後もつかえていいかな、と思ったがレジストリいじらないポータブルスキーなのでWinPythonにしました
Linuxで入れるのに苦労したNumPy,SciPyはもちろん、お目当てのscikit-learnもパッケージングされてるみたいだし、いいんじゃないですかね

そのものずばりな比較ページがあったので参考にしたよ
["Pythonパッケージ集の比較",minus9d's diary](http://minus9d.hatenablog.com/entry/2015/04/19/165721)

# WinPython、君に決めた！
[VC++2015再頒布パッケージ](https://www.visualstudio.com/downloads/download-visual-studio-vs#d-visual-c)がいるよって書いてあるので落としてきて入れる
WinPythonは2世代メンテされているのかな？
今(2016/7/12)の最新は以下2世代っぽい
- WinPython 3.4.4.2
- WinPython 3.5.1.3

深く考えずにバージョン大きいほうを使ってみることにした
マイナーバージョンが奇数だと開発版、みたいな言語があった気がするけどPythonはどんな法則でつけてるのかな？

インストールと言うか単なる展開と言うか、とりあえずCドライブ直下にpyディレクトリ作って入れてやった
インストールディレクトリ変えたくなったら切り取りで移動できるから、ポータブル系は楽でいいよね

# やっとこさ機械学習的なチュートリアル
scikit-learnのページでチュートリアル進めればいいのだけど、英語は…という自分のために日本語でチュートリアル進めてるページを探して一ステップずつ
["scikit-learnによる機械学習入門",たけぞう瀕死ブログ](http://takezoe.hatenablog.com/entry/20150426/p1)

WinPython入れたディレクトリにexeいっぱいあってどれ起動すればいいのかアレなんですが、Jupyter Notebookってやつが対話シェルより便利みたいなのでそいつを動かしてそれっぽくコードを打ち込んでいく

最後、判定結果8が返ってきたのはいいんですが、なんか警告出たんですけど

```
C:\py\python-3.5.1.amd64\lib\site-packages\sklearn\utils\validation.py:386: DeprecationWarning: Passing 1d arrays as data is deprecated in 0.17 and willraise ValueError in 0.19. Reshape your data either using X.reshape(-1, 1) if your data has a single feature or X.reshape(1, -1) if it contains a single sample.
  DeprecationWarning)
```

dataを1次元配列として渡すのはscikit-learnのバージョン0.17から廃止？とか、0.19になったらエラーになるよ、とかって書いてる気がするけど、scikit-learn本家のチュートリアルページ見ても同じコードのままなんで謎

下のコードに変えると警告は止まるんだけど、どういう原理なんだろう…
一応2次元配列に変わってるからその辺が関係してるのかな？

```py3
clf.predict(digits.data[-1].reshape(1,-1))
```

fitに渡す配列を短くすると精度が落ちるのも確認できたし、ひとまず学習したっぽい？のでこの辺まで
続きはまた今度
gmaps.jsで地図状にマーカーを載せる

一つのマーカーを載せる場合
http://buburinweb.wp.xdomain.jp/google-maps-api

複数のせる場合は、
緯度経度を全て配列に入れて、
以下のような形で記載する。

```javascript
    <script>
        window.onload = function(){
            //場所名、緯度・経度を配列に格納
            var markers = [
                ['高知県立美術館',33.56104,133.57295],
                ['牧野植物園',33.54661,133.57790],
                ['高知城',33.56067,133.53147]
            ];
            //地図を表示
            var lat = 33.56104;//緯度
            var lng = 133.57295;//経度
            var map = new GMaps({
                div: "#map",
                lat: lat,
                lng: lng,
                zoom: 13,
            });
            //一つずつマーカーを表示していく
            for (var i = 0; i < markers.length; i++) {
                var name = markers[i][0];
                var lat = markers[i][1];
                var lng = markers[i][2];

                map.addMarker({
                    lat: lat,
                    lng: lng,
                    title: name,
                    icon: "image/map/map_icon.png",//任意の画像名
                    infoWindow: {
                        content: name
                    }
                });
            };
        };
    </script>
```
swift:コードを見やすくするためにMARKなどを使いましょう

OSX Yosemite(10.10.5)
Xcode 7.2.1
Swift version 2.1.1
を使用しております。

Xcodeの上部にあるFunction Menuに見出しを表示することができます。
swiftから始めた人には関係ないと思いますがObjective-Cで使えていた
***#pragma mark***が使えません。
swiftだと下記が使用できます。
(Objective-Cでも使えます。ただし、swiftで使えなくなったものもあります)

```text:swift使用可能
//MARK: *****
//TODO: *****
//FIXME: *****
```

```text:swift使用不可
//!!!: *****
//???: *****
```

Objevtive-Cだと

```
#pragma mark - ***
```
で区切り線が引けました。

swiftで区切り線を引きたい場合は

```text:区切り線表示
//MARK:- *****
//MARK: - *****
//TODO: ***** -
//FIXME: ***** -
```
MARKに区切り線を付けるにはMARK:の後か１つスペースを空け"-"を書き、スペースを空けてコメントを書くことにより行の上に区切り線が引かれます。
TODO、FIXMEはコメント後にスペースを１つ空けて"-"で行の下に区切り線が引かれます。

MARKで使えた書き方は使えません。また逆にMARKはTODO,FIXMEのような書き方はできません。
間違っていれば普通に"-"が表示されます。
※Objective-CではMARKを使用しての区切り線は出ません。

また、Objective-Cですと見出しにMARKという文字が表示されますが
swiftだとMARKという文字は表示されません。

実際は下記ようになります。
<img width="865" alt="スクリーンショット 2016-07-11 16.55.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/120102/67949153-1f85-481a-55d2-0f7500530464.png">
継続渡しスタイルを試してみよう

## はじめに

[前回](http://qiita.com/t-mochizuki/items/dea3c551553915bdc796)、スタックオーバーフローで遊んだときに継続渡しスタイルが少し出てきました。

今回は継続渡しスタイルについて紹介したいと思います。

と言っても難しいことはわからないので入門的な内容になります。

## 継続渡しスタイルとは

要点だけ引用します。

> 継続渡しスタイルとは、関数が、値を返す代わりに、計算した値をどの関数に渡すのかを明示的に指定する 方法です。

> 継続渡しスタイル (continuation passing style) は略して CPS と呼ばれることがあります。

[Scheme 入門 16. 継続](http://www.shido.info/lisp/scheme_cc.html)

## サンプルコード

早速、簡単なサンプルコードを試してみます。

``` scala
def add(x: Int, y: Int): Int = x + y
def mul(x: Int, y: Int): Int = x * y
def addCps[A](x: Int, y: Int, f: Int => A): A = f(add(x, y))
def mulCps[A](x: Int, y: Int, f: Int => A): A = f(mul(x, y))
```

これらの関数を使って`1 + 2 * 5`を計算してみます。

### ダイレクトスタイルの場合

CPSと比べるために用意します。

``` scala
add(1, mul(2, 5))
```

### 手続きの場合

CPSと比べるために用意します。

``` scala
val x = mul(2, 5)
add(1, x)
```

### 継続渡しスタイルの場合

無名関数を使います。

``` scala
mulCps(2, 5, (x: Int) => addCps(1, x, identity))
```

こういうものなのかというほかにありませんね。

## サンプルコード2

先ほどのサンプルコードを少し編集してみます。

``` scala
def add(x: Int)(y: Int): Int = x + y
def mul(x: Int)(y: Int): Int = x * y
def addCps[A](x: Int)(y: Int)(f: Int => A): A = f(add(x)(y))
def mulCps[A](x: Int)(y: Int)(f: Int => A): A = f(mul(x)(y))
```

これらの関数を使って、継承渡しスタイルで計算してみます。

``` scala
mulCps(2)(5) ((x: Int) => addCps(1)(x)(_: Int => Int)) (identity)
mulCps(2)(5) ((x: Int) => addCps(1)(x)(_: Int => Unit)) ((y: Int) => println(y))
```

無名関数がネストしていません。面白くありませんか!?

Scalaは`_`で部分適応すると、型パラメータの型がNothingになります。

そのため型推論が期待しない結果になり、コンパイルエラーになることがあります。

下記はコンパイルエラーになる例です:

```
scala> mulCps(2)(5) ((x: Int) => addCps(1)(x)_) ((y: Int) => println(y))
<console>:12: error: type mismatch;
 found   : Unit
 required: Nothing
              mulCps(2)(5) ((x: Int) => addCps(1)(x)_) ((y: Int) => println(y))
```

今回は型を明示的に指定してコンパイルエラーを回避しています。

一点気をつける点として、ネストしていないのでスコープが別々になっています。

そのため、スコープ外の変数を参照しようとするとエラーになります。

下記はコンパイルエラーになる例です:

```
scala> mulCps(2)(5) ((x: Int) => addCps(1)(x)(_: Int => Unit)) ((y: Int) => println(x))
<console>:12: error: not found: value x
              mulCps(2)(5) ((x: Int) => addCps(1)(x)(_: Int => Unit)) ((y: Int) => println(x))
```

## 参考URL

- [Haskell で継続渡しスタイル (CPS) | すぐに忘れる脳みそのためのメモ](http://jutememo.blogspot.jp/2011/05/haskell-cps.html)

冒頭に`callCC f = Cont $ \k -> runCont (f (\a -> Cont $ \_ -> k a)) k`とあり、来るところ間違えちゃったかなと思ったのですが、簡潔で丁寧な内容でオススメです。

- [継続渡しスタイル - Wikipedia](https://ja.wikipedia.org/wiki/%E7%B6%99%E7%B6%9A%E6%B8%A1%E3%81%97%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB)

Schemeのサンプルコードがあるのですが、それをHaskellで書き直す、もしくは、Scalaで書き直すと理解が深まります。

## まとめ

継続渡しスタイルについて紹介しました。

簡単な例からはじめれば、それほど取り扱いに困ることはありません。
Spring4を使ってみる（・８・）2

## Springおじさんにならなくては

お仕事でSpringを使っていく風潮が出てきたので、設定とかアノテーションとかをさらっておこうと思います。とりあえずJSON返すメソッドが作れたので、viewを返すクラス、メソッドを作ってみます。


## 前回

[最低限の設定ファイルとクラスを書いてJSONをGETしてみた](http://qiita.com/TatsuyaYamamoto/items/d2cc0106855fa07d0564)

## 設定

```ServletContext.java
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.hoge")
public class ServletContext extends WebMvcConfigurerAdapter {
    
    @Override
    public void configureViewResolvers(ViewResolverRegistry registry) {

        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setPrefix("/WEB-INF/views/");
        viewResolver.setSuffix(".jsp");
        registry.viewResolver(viewResolver);
    }
}
```

前回はアノテーションだけだったクラスが、MVCの設定でごにょごにょやってる

- extends WebMvcConfigurerAdapter
    - Viewの設定とかを登録するメソッド(↓)を実装したいので、継承します。
- configureViewResolvers(ViewResolverRegistry registry)
    - viewのテンプレートファイルを置くディレクトリの設定と、ファイルの拡張子の設定

## viewファイル

```index.jsp
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head></head>
<body>
<h2>すぷりんぐ！</h2>
（・８・）${voice}
</body>
</html>
```

- 上記の設定通り、/webapp/WEB-INF/views/に設置する
- ${voice}はviewを返却するメソッドからもらう変数

## Controllerクラス

```ViewController.java
@Controller
public class ViewController {

    @RequestMapping("view")
    public String getView(Model model){
        model.addAttribute("voice", "ちゅん！");
        return "index";
    }
}
```

- @Controller
    - WebAPIを定義したクラスのもの(@RestController)とちがう
    - こちらをアノテートすると戻り値の文字列に対応するパス、ファイル名のviewを返却するようになる
- model.addAttribute()
    - 引数に置いたModel modelに自動的に(!)オブジェクトがインジェクトされてメソッドに渡ってくる
    - Model#addAttribute()で渡したkey, valueはjspから参照出来る


![スクリーンショット 2016-07-13 1.18.44.png](https://qiita-image-store.s3.amazonaws.com/0/55826/71990e49-4455-82c8-fcee-675e351c67d1.png)

やったー（・８・）
EC2のインスタンスタイプを途中で変更する。

# EC2のインスタンスタイプを途中で変更するためのメモ

動機
gitlabサーバを立ち上げていると、どうにも500エラーが頻発するので一つ上のクラスのインスタンスに変更しようと画策。とりあえずやってみることに。

## インスタンスを停止
これをしないとインスタンスのタイプの変更は出来ません。
![スクリーンショット 2016-07-12 22.35.04.png](https://qiita-image-store.s3.amazonaws.com/0/130497/4074d194-1269-b1b1-02d3-eb04ee0dc678.png)
こんな感じで、インスタンスタイプの変更は非アクティブになっています。

## インスタンスタイプの変更
インスタンスの停止が無事終わったら、変えたいインスタンスを選択して
アクション -> インスタンスの設定 -> インスタンスの変更 
を選択する。

すると、インスタンスタイプの変更ダイアログが表示されるので、自分が変えたいインスタンスタイプを選びましょう。  
![スクリーンショット 2016-07-12 22.44.48.png](https://qiita-image-store.s3.amazonaws.com/0/130497/5e65c76f-4237-7e7d-31ea-d86b7da77083.png)

ちなみに、EBS最適化はそれに対応したモデルを選択しない限りは選択できません。
詳しくは
 [EBS最適化インスタンスの効果を知るべくベンチマークを取ってみた](http://dev.classmethod.jp/cloud/aws/ebs-optimization-benchmark/)
を参照の事。
GitHub連携でCloud9を使うのに挫折するまでの流れをキャプチャ付きで詳しく紹介（2016/08/10追記有り）

# 概要
クラウド開発環境というものをはじめて使うにあたってCloud9が良さげだったのでまずGitHub連携しようとしたが、クレジットカード情報入力が必須だったので挫折してしまった手順のメモ
(2016/07/15追記)
Cloud9公式コミュニティにクレジットカード必須化しましたという投稿を見つけました。
詳細は最後の追記に記載します。

# 前提条件
- GitHubにログインした状態のブラウザで操作していること

# 実際の手順
1. Cloud9にアクセス　https://c9.io/

2. 右上のGitHubアイコンをクリック
![2016-07-13_001509.png](https://qiita-image-store.s3.amazonaws.com/0/123420/c472653f-7031-34dc-fc02-14b13eb35e20.png)

3. 左下のAuthorize applicationをクリック 
![2016-07-13_000952.png](https://qiita-image-store.s3.amazonaws.com/0/123420/ea305c76-faaa-2730-e1d1-ca2bf101240d.png)
※ネットで調べるとここまででもうCloud9が使える状態になるとの情報多数・・・

4. 手順3で終わらなかったのでやむをえず右のCreate new Cloud9 accountをクリック
![2016-07-13_001957.png](https://qiita-image-store.s3.amazonaws.com/0/123420/5fc3cf24-b2af-3b8f-b62a-ffe85d0df00b.png)
※左のSign in to Cloud9または右上のSign Inをクリックすると**Cloud9のアカウント**でログインしてねという画面が出るだけで、GitHubアカウントではログインできない。

5. Create an accountという画面が表示され、メールアドレス、名前などなどを入力していく、すると以下のように**入力必須**のクレジットカード情報入力画面が出てくる。
当然、Nextを押しても必須エラーが出るだけで進まず、Skipするようなボタンもどこにもない。その為、ここで挫折orz
![2016-07-13_005133.png](https://qiita-image-store.s3.amazonaws.com/0/123420/00361243-1e3f-37ba-3b61-100307a1a6a8.png)

# 結論
割と最近クレジットカード必須化された？模様。某記事（2016/05/26投稿）では手順5の画面は出ておらず、以下の画面の次が作成完了の画面となっていた。
よく見るとページ下部の●の数がこのときは5個だったけど今は6個になってる・・・
![05-639x399.jpg](https://qiita-image-store.s3.amazonaws.com/0/123420/e00a89ca-b6fd-4c2a-13b4-0d4fb9e7dcbb.jpeg)

公式のDocumentをちらっと確認したけど、それらしい記述は見つけられず・・・誰か知ってる人いたら教えてください（涙目）

# 2016/07/15追記
公式のDocumentでは見つけられなかったのでCommunityを漁ったらクレジットカード必須化についての投稿を発見しました。
https://community.c9.io/t/credit-card-required-for-free-account/7434

### 超ざっくり翻訳と流れをまとめ
2016/07/13　ユーザーの投稿
大学で生徒にCloud9を使って1年くらい教えてたんだけど、新しくアカウント作ろうとするとクレジットカード登録画面が出てきちゃうんだけど回避する方法はない？
↓
2016/07/14　Cloud9社員の投稿
質問ありがとうございます。botがうんたら、乱用する人がうんたら～、だからクレジットカード必須化を始めました。

### ということで・・・
やはり最近必須化されたとのこと。しかも私がアカウントを作ろうとしたまさにその日に起こった模様・・・
「新しくアカウント作ろうとすると」といわれているので、どうも既にクレジットカード無しでアカウント作れた人は使えてるっぽい？
また、他ユーザーからも必須化解除を求める声が挙がっているので、今後解除される可能性もあるかも？

# 2016/08/10再追記
コミュニティの方に色々動きあったようなので追記。
翻訳はテキトーなので偏見や間違い等あるかもしれませんが、ご了承ください。
英語わかる方、ご指摘いただけたら幸いです。

### 超ざっくり翻訳と流れをまとめ
2016/07/15～　ユーザーたちの投稿
・クレジットカード必須化をやめて欲しい！
・教育で使いたいけど困ってます！
・キャプチャとか電話認証とかメール認証とかでどう？
などなど
↓
2016/07/18　Cloud9社員の投稿
やあ！みんな。フィードバックありがとう！（特にそこのキミ、いいね！）
ただ、みんなには知っておいて欲しいんだ、我々は教育に関するユーザーに対しての解決策を持っているということをね。
たぶん、ほとんどの学校が年間で2週間くらい使えればいいんだろうね。
みんなの意見はちゃんと全部聞いてるよ！どうぞ自由に投稿し続けてね！
　※的な感じ？G翻訳したけどいまいちわかりませんでした。
↓
2016/07/19～　ユーザーたちの投稿
・クレジットカード必須化されてとても悲しいです。
・教育に使いたいんです！
・忘れるなよ。クレジットカードが浸透していない国があるということを・・・
・SMS認証がいいんじゃない？
などなど
↓
2016/08/04　Cloud9社員の投稿
やあ！みんな。またまたフィードバックありがとう！いい意見がいっぱいだね！
ただ、みんなが満足する解決策がいまだに見つからないんだ・・・
でもね、教育に関するユーザーに対してはいい解決策を持ってるんだ！
どんな感じで使いたいのかを詳しく書いてメールくれよな！

### ということで・・・
残念ながら必須化解除は期待薄になってしまいましたね・・・
まあ、どうしても使いたければ素直にクレジットカード登録するしかないようですね！
テキストの改行を制御するための2つのcss


振る舞いがごっちゃになりがちなので、おさらい。

```
・word-wrap …… 単語の途中で改行するかどうかを指定する
・word-break …… 行の改行方法を指定する
```

```
word-wrap: break-word; // 単語の途中でも改行する
word-break: break-all; //言語に関係なく表示範囲に合わせて改行される。このため単語の途中で改行されることもある。
```
Android の Chrome で input type=date の ShadowDOM を制御する

## 要約

PC の Chrome ではスタイルの変更が効くが、 Android 上だと効かなかった。
生成される ShadowDOM が異なることが原因で、Android 上では
`` input[type=date]::-webkit-date-and-time-value `` で制御できる。


## 困ったこと

```html
<input type="date" style="width: 7em;" />
```

を Android の Chrome で見ると次のように表示されます。
※Chrome 51.0.2704.81 で確認しています

![Screenshot_basic.png](https://qiita-image-store.s3.amazonaws.com/0/40622/24291779-bb1c-b04e-79f8-cdfbfcaa6ae7.png)

ここで▼を消したいと考え、Chrome のデベロッパー ツールで
ShadowDOM を確認しながら、次のように CSS を書きました。 

```css
input[type=date],
input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
}
```

![Screenshot_before.png](https://qiita-image-store.s3.amazonaws.com/0/40622/7245e074-4f60-9d29-b7c8-eaa2f27ab55e.png)

さて、あとはこの右端のスペースで文字が切れてしまっているのを直せばOK
という話なのですが、__この右側のスペースがなかなか消せませんでした。__
PC の Chrome では消せるのですが、Android の Chrome では消えてくれません。


## 解決策

次の指定でスペースを調整できます。

```css
input[type=date]::-webkit-date-and-time-value { 
   margin-right: 1px;
}
```

![Screenshot_after.png](https://qiita-image-store.s3.amazonaws.com/0/40622/b8568e54-ae69-83ad-2962-c522b73b2f46.png)

無事、文字切れを解消できました。

種明かしをすると、PC の Chrome ( Toggle device toolbar でスマホっぽく表示しても無駄 )
と、Android の Chrome で生成される ShadowDOM が異なることが原因です。

Android の Chrome で生成される ShadowDOM と適用されている style は次の通りです。
PC のものと比べてみてください。結構異なっているはずです。

![shadow_dom.png](https://qiita-image-store.s3.amazonaws.com/0/40622/fccd996b-b3d7-a5b8-2cec-4af1a7ef1a07.png)

![styles.png](https://qiita-image-store.s3.amazonaws.com/0/40622/8bf971de-5018-2fb8-3c49-6fe710e87375.png)

では、どうやってこの DOM と style を知るの？という話ですが、
Android と PC を USB ケーブルで繋げ、 Android 上の Chrome をデベロッパー ツールで覗きます。

ケーブルで繋げる方法についてはネットに情報が載っているので確認してみてください。
一番しっかり書かれているのはたぶんコレ https://developer.chrome.com/devtools/docs/remote-debugging 

いちいち繋げて確認するのは大変なので、どこかに情報がまとまっていれば良いんですけどね。
(2016/07/18 追記)
しっかり確認とれてませんが、あたっている user agent stylesheet の style 一覧は
PC版 https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
Android版 https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
と予想。

## 補足

ShadowDOM は、デベロッパー ツール の Settings の下図の場所にチェックをつけると表示されるようになります。

![show_shadow_dom.png](https://qiita-image-store.s3.amazonaws.com/0/40622/50314fc1-cd71-e464-8a28-7b17e6db4479.png)
iPhoneのキーボードにある「開く」ボタンを制御する方法について



iPhoneのキーボードにある「開く」ボタン、デフォルトの挙動としてはformのsubmitにあたります。
ところが実際には、フォームをまだ最後まで書き終えてない時点で「開く」を押した際、勝手にsubmitされては困りますね。

できれば、submitではなく「キーボードを閉じる」もしくは「次の入力欄へ移る」挙動になっていたほうが良い。

そんなときは、keypressイベントをpreventDefaultしてあげると良いです。
iPhoneの開くボタンも、PCのエンターキーを押すことと同等の扱いのようですね。

```「開く」を押したらキーボードが閉じるようにする.js
(function preventKeyBoardSubmit(){
    if(!isSP()) return;

    // スマホで決定ボタンをおした時にformがsubmitされるのを防ぐ。キーボードを閉じる挙動で代替させる。
    $('input').on('keypress', (e) => {
        if(e.keyCode === 13){
            e.preventDefault();
            
            // 現在フォーカスしている入力欄からフォーカスを外すことで、キーボードを強制的に閉じる
            document.activeElement.blur();
            $('input').blur();
        }
    });
})();
```
【karma】結果の表示色を変更する


# karma-mocha-reporter
karmaの実行結果をmochaみたいな感じで表示してくれます。

表示するときの色は、成功のときは緑、失敗のときとそのエラーは赤、などとデフォルトで決まっています。
背景色によっては見にくい場合もあるかと思います。
そんなときの表示色の変更の方法です。

# 方法
karma.conf.jsに以下を記述します。

```karma.conf.js

// karma-mocha-reporterを使用する場合に必要な設定です
reporters: ['mocha'],

// 表示色を変更するための設定です
mochaReporter: {
  colors: {
    success: 'green',
    info: 'grey',
    warning: 'yellow',
    error: 'red'
  }
},

```

colorsそれぞれが表すもの

| color | 表示するとき |
|:-:|:-:|
|success|成功したとき|
|info|情報を表示するとき(ログなど)|
|warning|警告を表示するとき|
|error|エラーを表示するとき|



# 参考
- https://www.npmjs.com/package/karma-mocha-reporter
Apache Flex/ActionScriptに対応しているIDE

# はじめに

Apache Flex/ActionScriptに対応しているIDEについて記載します。

※2024年3月時点の情報です

# IntelliJ IDEA

最新バージョン：2023.3.5
開発元：JetBrains
対応OS：Windows、macOS、Linux
公式サイト：https://www.jetbrains.com/idea/

- 有償のUltimate EditionにてApache Flex/ActionScriptに対応
- 使い方は [IntelliJ IDEAで作る、初めてのAdobe AIRアプリ](https://qiita.com/lune1122/items/39948627865327a284a4) を参照


# Visual Studio Code（VS Code）

最新バージョン：1.87.2
開発元： Microsoft
対応OS：Windows、macOS、Linux
公式サイト：https://code.visualstudio.com/

- 軽い
- オープンソースであり、GitHubにてソースを参照可能　https://github.com/Microsoft/vscode/
- 以下の拡張機能を入れることでApache Flex/ActionScriptに対応
  - [ActionScript & MXML](https://marketplace.visualstudio.com/items?itemName=bowlerhatllc.vscode-as3mxml)
  - [Debugger for SWF](https://marketplace.visualstudio.com/items?itemName=bowlerhatllc.vscode-swf-debug)
- 使い方は [VS CodeでApache Flexのデスクトップアプリをデバッグする](https://qiita.com/lune1122/items/729eac03da415fd23c49) を参照

# FDT

最新バージョン：1.17.390.1860 Milestone 10
開発元：Interactive Pioneers（Powerflasher）
対応OS：Windows、macOS、Linux
公式サイト：https://fdt.powerflasher.com/

- eclipseベース
- 無償版と有償版があり、無償版は一部機能制限があるが普通に使えそう


# FlashDevelop

最新バージョン：5.3.3
開発元：FLASHDEVELOP.ORG
対応OS：Windows
公式サイト：https://www.flashdevelop.org/

- 軽い
- 設定画面にてLocaleを変えることで日本語化が可能
- オープンソースであり、GitHubにてソースを参照可能　https://github.com/fdorg/flashdevelop


# Flash Builder

最新バージョン：4.7
開発元：Adobe
対応OS：Windows、macOS
公式サイト：https://helpx.adobe.com/jp/support/flash-builder.html

- eclipseベース
- Adobe公式のIDEだが、FlexがAdobeからApacheに提供された後ぐらいから更新はストップしている模様


# Moonshine IDE
最新バージョン：3.3.4
開発元：
対応OS：Windows、macOS
公式サイト：https://moonshine-ide.com/

- 軽い
- オープンソース(ActionScriptで書かれている)であり、GitHubにてソースを参照可能　https://github.com/prominic/Moonshine-IDE
- Adobe AIRアプリとなっている


# Radiate IDE
最新バージョン：4.7.3
開発元：
対応OS：Windows、macOS
公式サイト：https://www.radii8.com/

- IDEと言うよりは画面デザイン用のツール
- ドラッグ＆ドロップでボタン等の画面の部品を配置したりしてmxmlを作れる
- Adobe AIRアプリとなっている
raspiのX画面をmacから見た

参考サイトに感謝
http://www.myu.ac.jp/~xkozima/lab/raspTutorial1.html

raspi側で、下記を実行。

>sudo apt-get install tightvncserver
>vncserver :1 -geometry 1024x768 -depth 24

初回はパスワードが聞かれます。これでサービス開始済。
mac側は、なんといつも使ってるfinderでOK。finderの「接続」を押して、サーバーアドレスに

>vnc://raspiのipアドレスまたは名前:5901

これで画面共有できます。重たいけどね。何かあった時には使えます。
（raspiにjenkinsをインストールしたんだけど、外部ブラウザからアクセスできなくてね。これ使ってraspiのブラウザ上からlocalhost:8080では繋がることは確認できた。原因はなんだろ？）
ニフティクラウドmobile backend のJavaScript SDKでハマった話【早起きアプリ】


ニフティクラウドmobile backendに慣れるべく、サンプルの早起きアプリを作ってみたら少しハマってしまいました。
自分用メモですが、他の私のような初心者さんにも役に立つと嬉しいですね。

ちなみに、ニフティクラウドmobile backendについてはこちらがわかりやすいです。

- [Nifty Cloud Mobile Backendとは？](http://seeku.hateblo.jp/entry/2016/02/14/132410)

公式の基本ガイドもあります。

- [ニフティクラウド mobile backend 基本ガイド Kindle版](https://www.amazon.co.jp/%E3%83%8B%E3%83%95%E3%83%86%E3%82%A3%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89-mobile-backend-%E5%9F%BA%E6%9C%AC%E3%82%AC%E3%82%A4%E3%83%89-%E4%B8%AD%E6%B4%A5%E5%B7%9D%E7%AF%A4%E5%8F%B8-ebook/dp/B016PIZSZ2)

## 動作環境
- MacOS El Capitan　10.11.5
- GoogleChrome バージョン 51.0.2704.103 (64-bit)

ncmbはブラウザあれば動くので、OSは関係ないですが一応。

## 今回作ってみてハマった早起きアプリ
公式サイトからはなくなっていて、動画だけYouTubeにありました。

- [01/14 - ニフティクラウド mobile backendを使ってみよう](https://www.youtube.com/watch?v=omQTM6Dh_Zg&list=PLSNY40p4warleoH7ySP-WMRCOqZTmOTkZ)

全14回で、これのとおりにやっていけばちゃんと完成するようになってます。

私もiPhoneアプリ開発初心者ですので、とりあえずこれのとおりにやってみよう・・・
と思ってやってみたのですが、コード写してるだけなのに動かないぞ・・・？となりました。


### ハマった場所
動画でいうと、10回目ですね。
JavaScript SDKを組み込んだ後に書いた処理が動きませんでした。

```js:index.html
//初期化
  var application_key = 'APIキー';
  var client_key = 'クライアントキー';
  var ncmb = new NCMB(application_key, client_key);

//データの保存
  var WakeUpClass = ncmb.DataStore("WakeUpClass");
  var WakeUpClass = NCMB.Object.extend("WakeUpClass");

  var wakeup = new WakeUpClass();
  wakeup.set("hour", hour);
  wakeup.save().then(function() {
     //データの抽出
     var query = new NCMB.Query(WakeUpClass);
     /*
     query.find().then(function(results) {
     console.log(results);
     });
     */
     query.count().then(function(count) {
     $(".msg").text("You're #" + count + "!");
     });
  });
```
### 原因
調べてみたところ、9回目でダウンロードしたJavaScript SDKのバージョンのせいだとわかりました。
動画だとver1.2.6のようなのですが、2016年7月の時点ではver2.1.1が最新なんですね。
一番古くてもver2.0.0までしかありませんでした。
バージョンが変わったことにより、書き方も少し変わっていたようです。

### 対処
[SDKガイド](http://mb.cloud.nifty.com/doc/current/sdkguide/javascript/datastore.html)を参考に、書き換えてみました。
これが正しい書き方なのかはわかりませんが、とりあえずこれで動きました。
旧バージョンのところはコメントアウトにしてます。

```js:index.html
//初期化
  var application_key = 'APIキー';
  var client_key = 'クライアントキー';
  //NCMB.initialize(application_key, client_key);
  var ncmb = new NCMB(application_key, client_key);

//データの保存
  //var WakeUpClass = NCMB.Object.extend(“WakeUpClass”);
  var WakeUpClass = ncmb.DataStore("WakeUpClass");
  
  var wakeup = new WakeUpClass();
  wakeup.set("hour", hour);
  wakeup.save().then(function() {
     //データの抽出
     //var query = new NCMB.Query(WakeUpClass);
     //QueryはfetchAllと同じ
     //query.find().then(function(results) {
     WakeUpClass.count().fetchAll().then(function(results) {
        $(".msg").text("You're #" + results.count + "!");
     });
  });
```

こんな感じです。
以降は、動画を真似ていればできました。

初心者にとってはバージョンの違いとか気が付きにくいですよね。
これからもお勉強しなくては・・・

## 参考にさせていただいたサイト
[チュートリアルMonacaでクイズアプリを作る（前半）で詰まっています](https://github.com/NIFTYCloud-mbaas/UserCommunity/issues/302)


以上です。なにかご指摘などございましたらよろしくお願いいたします。
youtube-dlアップデート方法

#過去の記事

* [youtube-dlでYouTube動画をダウンロードする方法](http://qiita.com/fantm21/items/8be5c1c5f1b9043269a2)
* [【2015.02.22】youtube-dlが更新され以前のバージョンで使えなくなった件](http://qiita.com/fantm21/items/38b38f07dfac2af00bfe)

#環境

* OS X El Capitan

#アップデート方法

次のコマンドで行います。

```
sudo youtube-dl -U
```
guiflow をソースからビルドしてみた

@hirokidaichi さんの作成した [guiflow](https://github.com/hirokidaichi/guiflow) をソースからビルドしてみた。node.js とかの流儀を詳しく知らなかったのでメモしておきます。(とりあえずのメモです。余裕があれば、加筆修正します。)

# 当方の環境

  * [VineSeed](https://vinelinux.org/vineseed.html) ([Vine Linux](https://vinelinux.org/) 開発版) 64bit
  * [nodebrew](https://github.com/hokaccha/nodebrew) use v5.12.0

# 環境の準備(node.js のインストール)

[Node.jsを管理したくて、nodebrewをインストールする - CLOVER](http://d.hatena.ne.jp/Kazuhira/20150705/1436102050) などを参考に node.js をインストールしました。元々は、Electron を試すためのものでしたが。

# git で clone してできたディレクトリに変更

```
$ git clone https://github.com/hirokidaichi/guiflow.git
$ cd guiflow
```

# 依存パッケージをインストールする

```
$ npm install --global-style
```

# 起動してみる

最新の Electron では `$ electron .` でまともに起動できなかったが、以下の方法で起動できた。

```
$ npm start

> guiflow@0.1.0 start /path/to/guiflow
> DEBUG=true $(npm bin)/electron .

```

# ビルドしてみる

Windows 版をビルドする場合は以下の様にします。Linux でビルドする際には、wine や mono が必要でした。

```
$ ./node_modules/.bin/gulp package:win32
[00:11:40] Using gulpfile ~/path/to/guiflow/gulpfile.js
[00:11:40] Starting 'package:win32'...
Downloading electron-v0.36.12-win32-x64.zip
[============================================>] 100.0% of 50.41 MB (3.15 MB/s)
Packaging app for platform win32 x64 using electron v0.36.12
[00:12:14] Finished 'package:win32' after 34 s
```

どんな gulp ターゲットがあるかは、トップディレクトリにある gulpfile.js を覗いてみてください。

# 参考リンク

  * [Electron API Demos](https://github.com/electron/electron-api-demos)
  * [Node.jsを管理したくて、nodebrewをインストールする - CLOVER](http://d.hatena.ne.jp/Kazuhira/20150705/1436102050)
  * [Electron 1.0でデスクトップアプリ開発超入門――動作の仕組み、基本的な使い方、セキュリティの懸念点 (1/3) - ＠IT](http://www.atmarkit.co.jp/ait/articles/1605/18/news017.html)
  * [npm v3 で Electron のパッケージサイズが大きくなる](http://qiita.com/Kazunori-Kimura/items/bcc1214fd8bc602e06b8)
（仮題）とにかく URL を書き換えたい人のための、5 分で解った気になる mod_rewrite

# Overview

当然タイトルは釣りです。5分で mod_rewrite が「わかる」わけないです。
あと、恐らく永遠に書きかけです。

つまり、この記事は要するにただの私の覚書です。あえて説明を端折ったり簡略化したりしているせいで、もしくは本当に私の理解不足のため、不正確な記述があるかもしれません。
正しい情報を得たければ[公式ドキュメント](http://httpd.apache.org/docs/current/mod/mod_rewrite.html)を読みましょう。

# Let's rewrite

## 単純に書き換える基本形

```apache
RewriteRule ^hoge/ /moge/
```

前の "^hoge/" がマッチさせたいパターン、うしろの "moge" がマッチした文字列に対する変換後の文字列。
マッチさせたいパターンは、あえて厳密でなくざっくりとした表現をすると、「相対パス」に対して検索をかけるので頭に "/" を付けてはならない。
フラグをつけないとリダイレクトにはならない。URL は変わらずに中身だけ変わる。

## 後方参照できる

`RewriteRule` のパターンで "()" で囲った文字は $N(N=0...9) で後方参照できる

```apache
RewriteRule ^hoge/hoge(01.html) /moge/moge$1
```

`RewriteCond` のパターンで "()" で囲った文字は %N(N=0...9) で後方参照できる

```apache
RewriteCond %{QUERY_STRING} filename=(moge01.html)
RewriteRule ^hoge/hoge01.html /moge/%1
```

## クエリストリング

クエリストリングは検索対象に「含まれない」
そのため、以下のような検索は「できない」

```apache
RewriteRule ^hoge/hogehoge.html?rewrite /moge/mogemoge.html
```

クエリストリングを条件に入れたいときは `RewriteCond` を使う

```apache
RewriteCond %{QUERY_STRING} rewrite
RewriteRule ^hoge/hogehoge.html /moge/mogemoge.html
```

### クエリストリングを維持したい

クエリストリングは検索対象には含まれないが、何もしなければ変換後の URL に対しても存在は維持される
つまり、上記の例だと `http://example.com/hoge/hogehoge.html?rewrite` は `http://example.com/moge/mogemoge.html` ではなく `http://example.com/moge/mogemoge.html?rewrite` にリライトされる。

### クエリストリングを置き換えたい

変換後文字列にクエリストリングを含めると、クエリストリングは置き換えられる。

```apache
RewriteCond %{QUERY_STRING} rewrite
RewriteRule ^hoge/hogehoge.html /moge/mogemoge.html?rewritten
```

この場合、`http://example.com/hoge/hogehoge.html?rewrite` は `http://example.com/moge/mogemoge.html?rewritten` にリライトされる。

### クエリストリングを追加したい

```apache
RewriteCond %{QUERY_STRING} rewrite
RewriteRule ^hoge/hogehoge.html /moge/mogemoge.html?rewritten [QSA]
```

フラグ `QSA` をつけると、変換後の文字列にクエリストリングが含まれていても変換元のクエリストリングを消さずに追加するようになる。
つまり、`http://example.com/hoge/hogehoge.html?rewrite` は `http://example.com/moge/mogemoge.html?rewritten&rewrite` にリライトされる。

### クエリストリングを消したい

```apache
RewriteCond %{QUERY_STRING} rewrite
RewriteRule ^hoge/hogehoge.html /moge/mogemoge.html?
```

変換後の URL の末尾に `?` を付けて、「空のクエリストリングを付けます（つまりクエリストリングを付けません）」と明示してあげればよい。

### クエリストリングを部分的に削除したり置き換えたりしたい

`RewriteCond` で後方参照を駆使して頑張ってください。

# Not rewrite

## 何もしない

```apache
RewriteRule ^hoge/ -
```

変換後を - にすると「何もしない」を表す。何もしないので、リライトは、終わる。
SpringSecurityでユーザー認証機能を簡単に作る（2）  -ログイン画面作成とthymeleafの便利な書き方

[前回](http://qiita.com/aikumi/items/256b7892effd5c92a39f)はSpringSecurityでユーザー認証機能をつくるための、
SecurityConfig.javaクラスの設定方法についてまとめました！
今回はログイン画面とそれをつくるために使ったthymeleafの便利だと思った使い方をまとめます！

# ログイン画面の作成

```html:signin.htmlのサンプル
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>ログイン画面サンプル</title>
<link href='/css/src/signin.css' rel='stylesheet' />
<script src='/js/src/signin.js'></script>
</head>
<body>
    <!-- ログイン -->
    <div id="login-form-area">
        <form id="login-form" th:action="@{login}" method="post" autocomplete="off">
            <div th:if="${param.error}" class="error-messages" th:text="#{login.failed}">
            ユーザーIDまたはパスワードが違います
            </div>
            <div class="login-line">
                <div>
                    <div><span class="login-label" th:text="#{login.userId}">ユーザーID:</span></div>
                    <input type="text" name="loginId"/>
                </div>
            </div>
            <div class="login-line">
                <div>
                    <div><span class="login-label" th:text="#{login.password}">パスワード:</span></div>
                    <input type="password" name="password"/>
                </div>
            </div>
            <div class="login-line">
                <div><input type="button" th:value="#{login.signIn}"/></div>
            </div>
        </form>
    </div>
</body>
</html>
```

# SecurityConfigクラスと連携しているところ
* formのactionの指定
    * form
        * th:action="@{login}"
    * SecurityConfig
        * loginProcessingUrl("/login")
* inputのname要素(ユーザーID)
    * inputのname属性
        * \<input type="text" name="loginId"/>
    * SecurityConfig
        * usernameParameter("loginId")
* inputのname要素(パスワード)
    * inputのname属性
        * \<input type="password" name="password"/>
    * SecurityConfig
        * passwordParameter("password")

# 権限付きのメニューの作成
* 名前空間宣言をする
    * これで"sec=xxx"が使えるようになる

```html:namespace
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
```
* admin権限のあるメニューを追加する
    * sec:authorize="hasRole('ROLE_ADMIN')" を追加する
    * ※ DBのroleに「ROLE_ADMIN」が登録されているユーザーのみ

```html:メニュー例
<div>
  <ul>
    <li><a th:href="@{/}">Top</a></li>
    <li sec:authorize="hasRole('ROLE_ADMIN')"><a href="/admin">Admin</a></li>
    <li><a th:href="@{/sample}">Sample</a></li>
    <li><a th:href="@{/signout}">Signout</a></li>
    <li><a th:href="@{/help}">Help</a></li>
  </ul>
</div>
```
* 「Admin」のメニューは権限があるものしか見れない
    * [前回の記事](http://qiita.com/aikumi/items/256b7892effd5c92a39f)のポイント2部分の権限ごとにページのアクセス制限をつける
    * これがないとURL直打ちしてアクセスしてきたユーザーは排除できない

# ログイン失敗のときだけメッセージを出す＋CSSを変える
* [前回の記事](http://qiita.com/aikumi/items/256b7892effd5c92a39f)のポイント2部分にて「.failureUrl("?error")」を指定している場合
* 「?error」のパラメーターを見てエラーメッセージを出してくれる
* class指定もできるのでエラーメッセージだけ赤文字、太文字、などの指定ができる

```html:errorメッセージ部分
<div th:if="${param.error}" class="error-messages">
ユーザーIDまたはパスワードが違います
</div>
```
Sphinx のセットアップまとめ

# 概要
Python パッケージのドキュメント作成には [Sphinx](http://www.sphinx-doc.org/en/stable/) が便利．sphinx-apidoc, autodoc を使えば，docstrings から API リファレンスを自動で作成してくれる．これらを使う時，いつもだいたい同じセットアップが必要なので，備忘録としてまとめておく．

# 前準備
sphinx のインストールとドキュメント用ディレクトリの作成．

```sh
$ pip install sphinx
$ mkdir docs
$ cd docs
```

その結果，次のようなディレクトリ構成になっているとする．

~~~
.
├── README.md
├── docs
├── <your package>
└── tests
    └── テストたち
~~~

# sphinx-quickstart
基本的にはデフォルトで，次の項目だけ設定する．

- source と build は分ける
- autodoc: automatically insert docstrings from modules は yes
- mathjax は必要に応じて yes
- viewcode も必要に応じて yes

# sphinx-apidoc の設定
Makefile を編集して，ドキュメントのコンパイル時に sphinx-apidoc を呼ぶようにする．

まずは，sphinx-apidoc 用のターゲットを作る．sphinx-apidoc で自動生成されたファイルは，ワイルドカードでインポートするために， `source/modules` の中に保存している．

```mf:Makefile
.PHONY: sphinx-apidoc
sphinx-apidoc:
    sphinx-apidoc -f -o source/modules -M "../<module_path>/"
    # glob でインポートする時に邪魔なので削除
    rm source/modules/modules.rst
```

そして，すべてのターゲットの依存関係に sphinx-apidoc ターゲットを追加する．例えば，html ターゲットの場合，

```mf:Makefile
.PHONY: html
# html:
html: sphinx-apidoc # これを追加
    $(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html
    @echo
    @echo "Build finished. The HTML pages are in $(BUILDDIR)/html."
```

# ソースファイルの編集
sphinx のパスに対象のパッケージが含まれるように `source/conf.py` に以下を追加する．

```py:conf.py
import sys
import os
sys.path.insert(0, os.path.abspath("../.."))
```

そして，sphinx-apidoc で生成されたファイルを読み込むために，以下を `source/index.rst` に追加する．

```rst:index.rst
.. toctree::
   :glob:
   :maxdepth: 2

   modules/*

```

最後に，お好みでデザインを変更する．個人的には [Read the docs テーマ](https://github.com/snide/sphinx_rtd_theme) が気に入っているので `source/conf.py` に以下を追加する．

```py:conf.py
import sphinx_rtd_theme
html_theme = "sphinx_rtd_theme"
html_theme_path = [sphinx_rtd_theme.get_html_theme_path()]
```

# コンパイル
コンパイルは `docs` ディレクトリで，

```sh
$ make html
```
AMP対応したページにNewRelicのscriptが埋め込まれてしまう件


## 概要
[AMP](https://www.ampproject.org/)に対応するページには基本的にはjavascriptを入れることができませんが、[New Relic](https://newrelic.com/)を利用していると、自動的にモニタリング用scriptがhtml内に埋め込まれてしまいます。
そのままだとAMPのvalidatorを通らないので、以下のような対応をしました。というメモです

## 対応
調べると公式ドキュメントに対応方法が書いてありました。
（NewRelicはよく使われているので、同じようなトラブルに遭遇した人が結構いたんですね…）


- [Google AMP validator fails due to 3rd-party script | New Relic Documentation](https://docs.newrelic.com/docs/browser/new-relic-browser/troubleshooting/google-amp-validator-fails-due-3rd-party-script)
- [Disable Browser monitoring for specific pages | New Relic Documentation](https://docs.newrelic.com/docs/browser/new-relic-browser/installation-configuration/disable-browser-monitoring-specific-pages)

NewRelicの使い方によって対応は違うようですが、要は特定ページでNewRelicを無効化する処理を入れろ、と。
今回はPHPを使ったプロダクトなので、下記関数を使うことで無効化できるようです

```php
newrelic_disable_autorum()
```

[PHP agent API | New Relic Documentation](https://docs.newrelic.com/docs/agents/php-agent/configuration/php-agent-api#api-rum-disable)



何故かPhalconを使っているので、以下のように対応してみました

```php
if (extension_loaded('newrelic')) {
    $eventsManager->attach('dispatch', function ($event, $dispatcher) {
        if ($dispatcher->getDI()->get('request')->get('amp') == 1) {
            //ampのときはnewrelic無効化
            newrelic_disable_autorum();
            return;
        }
        $controller = $dispatcher->getControllerName();
        $action = $dispatcher->getActionName();
        newrelic_name_transaction($controller . '/' . $action);
    });
}
```

## 所感
- NewRelicを開発環境に入れてないので、ステージングでようやく気付きました…
- AMP対応つらい
MemSQL で空間検索

こんにちは。
MemSQL 5.1 で円領域内の地点の空間検索を試しました。データ読み込みは極めて速かったです（11.5 s、データ数約530万)。

用いた地点データは、

```console
$ head -n 2 points.json
{"type":"Point","coordinates":[135.7182012,34.944685]}
{"type":"Point","coordinates":[135.718176,34.9444206]}
$
```

データ読み込みは、

```mysql
CREATE TABLE `table_with_a_point` (
  `json` text NOT NULL,
  `point` as geography_point(json::coordinates::%`0`,json::coordinates::%`1`)
     persisted geographypoint, index(point)
);
LOAD DATA LOCAL INFILE 'points.json'
INTO TABLE table_with_a_point
LINES TERMINATED BY '\n'
(json);

  Query OK, 5313284 rows affected
  Time: 11.525s
```

空間検索は円領域内検索が容易です（ ```GEOGRAPHY_WITHIN_DISTANCE()```を使用）。しかし検索速度は一桁遅い[^1]と思いました（0.089s）


```mysql
select count(*) from table_with_a_point
  where GEOGRAPHY_WITHIN_DISTANCE(geography_point(135.7182012, 34.944685), point, 200);
+------------+
|   count(*) |
|------------|
|         25 |
+------------+
1 row in set
Time: 0.089s

EXPLAIN | IndexRangeScan test.table_with_a_point, KEY point (point) scan:[geogra
phy_within_distance(point, GEOGRAPHY_POINT(135.7183011,34.9437886), 200)]

select point, GEOGRAPHY_DISTANCE(geography_point(135.7182012, 34.944685), point) as dist
 from table_with_a_point where GEOGRAPHY_WITHIN_DISTANCE(geography_point(135.7182012, 34.944685), point, 200)
 ORDER BY dist asc limit 10;
+---------------------------------+-----------+
| point                           |      dist |
|---------------------------------+-----------|
| POINT(135.71820123 34.94468503) |   0       |
| POINT(135.71820123 34.94468503) |   0       |
| POINT(135.71821128 34.94473569) |   5.70343 |
| POINT(135.71821128 34.94473569) |   5.70343 |
| POINT(135.71817602 34.94442061) |  29.4757  |
| POINT(135.71817602 34.94442061) |  29.4757  |
| POINT(135.71830108 34.94378856) | 100.041   |
| POINT(135.71830108 34.94378856) | 100.041   |
| POINT(135.71830108 34.94378856) | 100.041   |
| POINT(135.71814618 34.94378051) | 100.646   |
+---------------------------------+-----------+
10 rows in set
Time: 0.321s
```

[^1]: 例えばMySQLと比較して：「[MySQL (InnoDB) で空間検索 (st_within)](http://qiita.com/kkdd/items/2e26d9dd25673e52c1af)」
DELL XPS13 (9350 2015/11モデル) Windows10のアップデートでGRUB2を消されてUbuntuが起動しなくなる

[なんとかUbuntuとWindows10のデュアルブート構成をして](http://qiita.com/NewGyu/items/d25cda12e0e1c5259121)、Ubuntuも16.04にアップデートをして組み込みのWifiチップにも対応してしばらく快適に運用していたのですが悲しい事件が起きました。

Windows10のWindowsUpdate( :-1: )にGRUB2を壊されてUbuntuが起動できなくなってしまったのです。(Windows10 Insider Previewにしたのでそのせいかもしれません）

XPS13はUEFIでSSDというところでなかなかうまい参考資料が見当たらず苦戦しました。
（先人たちの資料ではMBRのブートローダーを使う方法だったり、HDD前提だったりでうまくXPS13に合う情報がなかなかありませんでした）

https://wiki.ubuntulinux.jp/UbuntuTips/Others/ReinstallGrub2

こちらの資料が最も参考になりました。

## 手順

### 1. インストールディスクで起動

まず、Ubuntu16.04のインストールディスクが必要です。（15.10の起動ディスクではなぜかうまく起動せず…自分の起動ディスクが壊れているだけかも）

私の場合かれこれ２度食らったので、この先も食らう可能性を考慮して快適な速度で起動するUSBメモリで起動メディアを作成しました。（DVDだと起動するのに10分近くかかりました）

### 2. GRUB2の再構成

起動したらターミナルで以下を実行します。

```shell-session

 $ sudo su
 # mount /dev/nvme0n1p5 /mnt
 # mount /dev/nvme0n1p1 /mnt/boot/efi
 # mount --bind /dev /mnt/dev
 # mount --bind /dev/pts /mnt/dev/pts
 # mount --bind /proc /mnt/proc
 # mount --bind /sys /mnt/sys
 # modprobe efivars
 # chroot /mnt
 # grub-install /dev/nvme0n1
 # update-grub
 # exit
```

### 3. GRUB2のメニューにWindowsも追加

上記の手順でGrub2のメニューにUbuntuは出てくるが、Windowsが出ていない状態だと思います。
一旦Ubuntuにログインしてupdate-grubを実行することでGrub2のメニューにWindowsが追加されます。

```shell-session
$ sudo update-grub
```

## 若干解説

まず、XPS13のデバイス名は毎度おなじみの`sda`とか`sdb`とかではありません。`nvme0n1`というデバイス名になっています。

自分の場合以下のようなパーティション状況になっています。

![Screenshot from 2016-06-26 19-47-14.png](https://qiita-image-store.s3.amazonaws.com/0/31010/b6d27167-1fa4-4880-0e72-472bf62c74c1.png)

|パーティション名|用途|
|---------|--------|
|nvme0n1p1|UEFIのBoot領域|
|nvme0n1p5|Ubuntu|
|nvme0n1p3|Windows|

```shell-session

 # mount /dev/nvme0n1p5 /mnt
 # mount /dev/nvme0n1p1 /mnt/boot/efi
```

で、こうなるわけです。

そして`chroot /mnt` を使って `/mnt` を `/` として扱います。

なぜにchrootを使うのかというと、参考資料にもあるとおり

```
$ sudo grub-install /dev/nvme0n1
  Installing for i386-pc platform.
  grub-install: error: failed to get canonical path of `/cow'.
```

これが出てしまうためです。

あとは、

```shell-session

 # grub-install /dev/nvme0n1
 # update-grub
```

で、 `/boot/efi/EFI/ubuntu/shimx.efi`を再度インストールし、設定ファイルを再構成します。
Perlワンライナー

最近の開発では、Perlは使用されることが少ないですが、
今でもインフラ環境では必須言語であるPerl。

特に、Windows環境では、
・バッチの貧弱さ
・PowerShellのわかりにくさ

から、perlワンライナー知識は今でも必須だと思います。
この記事では、perlワンライナーの自分用まとめと、
perl以外の軽量言語（ruby,python）でのワンライナーについて、
比較していこうと思います。
# perlコマンドのオプション
-e 'code' コードの実行
-w 警告
-n 読み込み（出力しない）
-p 読み込み（出力する）
-l 行末処理
-M'モジュール名' モジュールのロード
-a awkモード
# perlコマンド使い方
-wl 出力を生成
-wnl 入力または入出力を生成
-wnla フィールド処理
-wnlaF'sep' フィールド処理（カスタムセパレータ）
-i.extension バックアップファイルを作成してからファイルを編集
# perl例文
`perl -wl -e 'print 22/7;'` 単純な出力
`perl -wnl -e 'print;' file1 file2` cat風出力

`perl -wnl -e '/RE/ and print;' file1` grep風出力
`perl -wnl -e '/RE/ or print;' file1` grep -v風出力
`perl -wnl -e '/RE/i and print;' file1` grep -i風（大文字小文字を意識しない）
`perl -wnl -e '/RE/ and print $ARGV and close ARGV;' file1` grep -l風出力（該当キーワードが含まれるファイル名を出力）
`perl -wnl -e '/\QSTRING\E/ and print;' file` fgrep風（文字リテラルとのマッチング）

`perl -wpl -e 's/RE/replacement/g;' file1` sed風の置換
`perl -wpl -e '$.==N and s/RE/replacement/g;' file1` N行目のみ置換
`perl -wpl -e 's/RE/$1/g;' file1` 後方置換
`perl -wpl -e '$.>=N and print;' file1` N行目以降を表示

`perl -wnla -e 'print $F[0];' file1` 第一フィールドを表示

`find . -type f -print | perl -nwlaF'/' -e 'print $F[2];' file1` findでカレントディレクトリ以下のファイルを検索し、perlで第二フィールドを表示
Swift リファクタリング実践 Tips1

[Twitter (@eduraaa)](https://twitter.com/eduraaa) や [gist (ezura)](https://gist.github.com/ezura) でちょくちょくコードの考察のようなものを書いています。
今回はその中で、特に反応をいただいた、リファクタリング関係の Tips の一部を紹介します。

この記事のおすすめの読み方
1. before の例を見て、その処理が何をしたいのか概要を読み取る
2. after を見て before との印象の違いをみてみる

## 例 1
```swift:before
if /* condition */ {
    label.text = "a"
} else if /* condition */ {
    label.text = "b"
} else {
    label.text = nil
}
```

```swift:after
label.text = {
    if /* condition */ {
        return "a"
    } else if /* condition */ {
        return "b"
    } else {
        return nil
    }
}()
```

この処理の意味するところは「label.text の値を条件に応じて設定している」なのですが、before の場合、「何か条件分岐してるな」などの伝えたいことの本質とは少し外れたステップを読み手に"最初"に考えさせてしまいがちです。

「ぞれぞれの条件のとき、何がおきるのかな」→「なるほど。label.text の値を設定しているのだろう。いや、もしかして、label.text ではないものに対しての処理も紛れてないか？」→「紛れもなく、label.text の値を設定しているのだ」と、心配させてしまうかもしれません。
一方、after のようにすると、その処理群が何をしたいのか、その本質を一目見るだけでわかります。また、何か処理を付け足したとしても、本来の意図を大きく崩すような処理を書き難いです。


## 例 2
```swift:before
if /* condition */ {
    labelA.text = "a"
    labelB.text = "A"
    labelC.text = "A"
} else if /* condition */ {
    labelC.text = "B"
    labelB.text = "B"
    labelA.text = "b"
} else {
    labelA.text = "c"
    labelC.text = "C"
    labelB.text = "C"
}
```

```swift:after1
(labelA.text, labelB.text, labelC.text) = {
    if /* condition */ {
        return ("a", "b", "c")
    } else if /* condition */ {
        return ("b", "B", "B")
    } else {
        return ("c", "C", "C")
    }
}()
```

```swift:after2
(labelA.text, labelB.text, labelC.text) = {
    if /* condition */ {
        return (labelA: "a", labelB: "b", labelC: "c")
    } else if /* condition */ {
        return (labelA: "b", labelB: "B", labelC: "B")
    } else {
        return (labelA: "c", labelB: "C", labelC: "C")
    }
}()
```

```swift:after3
(labelA: labelA.text, labelB: labelB.text, labelC: labelC.text) = {
    if /* condition */ {
        return (labelA: "a", labelB: "b", labelC: "c")
    } else if /* condition */ {
        return (labelA: "b", labelB: "B", labelC: "B")
    } else {
        return (labelA: "c", labelB: "C", labelC: "C")
    }
}()
```

before では、例 1 のときよりも更に全体を注意深く見なければ、正確に意図を掴みにくいのではないでしょうか。
パッと見て何をやりたいのか察しはつくと思うのですが、それでも、「それぞれの条件下の処理の中で labelA, B, C が全て揃っているのかどうか」不安になりそうです。
一方、after1, 2, 3 では、例 1 の after と同様に、意図がはっきりと読み取れます。書き足した場合も指定漏れの心配もありません。
after1, 2, 3 のどの記述が良いかは、好みと状況によりますが、返り値の tuple の要素にラベルをつけてあげると、それぞれの値が何なのか受取先の tuple を見に行かなくて良いので読む人に優しいと思います。ただ、冗長に感じる場合も多々あるので、使い分けていくことも必要です。


## 最後に
第一回はここまでにします。