OmniAICreator/Qiita-1.07M huggingface dataset:
androidで謎の横幅制限がかかる件


結局、背景画像をあてるというのが正解の模様。
ちなみに、親要素と同じ色をあてても効かないっぽい。transparentとか半透明とか、結果的な描画が変わらない色もあやしい。


http://jumble-note.blogspot.jp/2012/10/androidcss.html
http://www.miyawan.com/2176.html
http://mania-ku.info/?p=304
http://kanonji.info/blog/2013/05/30/android4%E7%B3%BB%E3%81%AE%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7width%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84%E3%83%90%E3%82%B0%E3%81%A8backgro/
http://d.hatena.ne.jp/hateka/20120824/1345816637

## ついでに

```css
-webkit-text-size-adjust: 100%;
```

も忘れずに。
リストの要素からインデックス位置を返す

Elixir Advent Calendar 2014 15日目。
今日もライトなネタを。リストの要素からインデックス位置を返したいと思います。

# やりたいこと

例えば、こういうリストがあるとします。

```elixir
  list = [1, 2, 3, 2, 1]
```

リストとリストの要素パラメタを渡すと、インデックス位置のリストを返します。
例えば、上記リストと1を渡すと、[0, 4] を返します。
与えられたパラメタがリストに存在しない場合、空のリスト [] を返します。

ちなみに、余談ですが、Rubyの場合はこんな感じで実装します。

```ruby
class Array
  def get_index(param)
    self
      .each_with_index
      .select{|x| x[0] == param}
      .map{|x| x[1]}
  end
end
```

# 動機

ElixirのEnumモジュール及びListモジュールには、インデックス位置を引数に取る関数があります。

* ```Enum.at/3```
* ```Enum.fetch/2```
* ```Enum.fetch!/2```
* ```List.delete_at/2```
* ```List.insert_at/3```
* ```List.replace_at/3```
* ```List.update_at/3```

ここで誰もが思うわけです。
「インデックス位置って、どうやって知るんだっけ？」


# 標準関数を眺めてみる

とりあえず、標準関数の処理系を眺めてみます。
```List.keyfind/4```、```Enum.find/3```、```Enum.find_index/2```、```Enum.with_index/1``` あたりを見ればよいでしょうか？（適当）

## List.keyfind/4

```elixir
@spec keyfind([tuple], any, non_neg_integer, any) :: any
def keyfind(list, key, position, default \\ nil) do
  :lists.keyfind(key, position + 1, list) || default
end
```

これはイメージと違いますね。Tupled List専用です。

## Enum.find/3

```elixir
@spec find(t, default, (element -> any)) :: element | default
def find(collection, ifnone \\ nil, fun)

def find(collection, ifnone, fun) when is_list(collection) do
  do_find(collection, ifnone, fun)
end

def find(collection, ifnone, fun) do
  Enumerable.reduce(collection, {:cont, ifnone}, fn(entry, ifnone) ->
    if fun.(entry), do: {:halt, entry}, else: {:cont, ifnone}
  end) |> elem(1)
end

defp do_find([h|t], ifnone, fun) do
  if fun.(h) do
    h
  else
    do_find(t, ifnone, fun)
  end
end

defp do_find([], ifnone, _) do
  ifnone
end
```

Elixirのこういうソースコードはとても美しいと思います。
関数作って第三引数に渡すなりすれば良さそうだと、ぱっと見は思うのですが、それは間違いです。
この関数は、funにマッチした最初の要素の値を返します。

## Enum.find_index/2

```elixir
@spec find_index(t, (element -> any)) :: index | :nil
def find_index(collection, fun) when is_list(collection) do
  do_find_index(collection, 0, fun)
end

defp do_find_index([h|t], counter, fun) do
  if fun.(h) do
    counter
  else
    do_find_index(t, counter + 1, fun)
  end
end

defp do_find_index([], _, _) do
  nil
end
```

関数作って第二引数に渡すなりすれば良さそうだと、ぱっと見は思うのですが、それも間違いです。
この関数は、funにマッチした最初の要素のインデックス位置しか返しません。
（Rubyで言うとArray#indexに相当します。）

## Enum.with_index/1

```elixir
@spec with_index(t) :: list({element, non_neg_integer})
def with_index(collection) do
  map_reduce(collection, 0, fn x, acc ->
    {{x, acc}, acc + 1}
  end) |> elem(0)
end
```

イメージに一番近いのはこれですね。ただ、今回はインデックスだけ返してくれれば良いので、少し冗長です。

# 作ってみる

無い物は作るのみ。こんな感じでいかがでしょう。

```elixir
defmodule EnumX do

  def get_index(collection, param) when is_list(collection) do
    Enum.with_index(collection)
    |> Enum.filter_map(fn {x, _} -> x == param end, fn {_, i} -> i end)
  end

end
```

実行してみます。

```iex
list = [1, 2, 3, 2, 1]

iex> EnumX.get_index(list, 0)
[]
iex> EnumX.get_index(list, 1)
[0, 4]
iex> EnumX.get_index(list, 2)
[1, 3]
iex> EnumX.get_index(list, 3)
[2]
iex> EnumX.get_index(list, 4)
[]
```

意図した通りに動作します。

# まとめ

リストの要素からインデックス位置を返す関数が無かったので、作ってみました。
これでElixirの活用の幅も広がりますね。

明日は @k1complete さんです。
FOSS4G Advent Calendar 2014 に投稿

FOSS4G Advent Calendar 2014 http://qiita.com/advent-calendar/2014/foss4goss4g の 2014-12-15 のエントリとして、http://handygeospatial.github.io/foss4g-advent-calendar-2014/ を作成した。

geojson-vt のサンプルサイトを作成したという話であるが、その話にソーシャルコーディングツールを使った作業のチュートリアルを絡めている。geojson-vt の目的の分析、といったような話は割愛している。ソーシャルコーディングツールを使うプロセスの普及を、分析結果の共有に優先したことになる。
enchant.jsの当たり判定(intersect())について

#intersect()は3種類ある？

enchant.jsを読むと以下のように書いてある。

```js:enchant.js
var _intersectBetweenClassAndInstance = function(Class, instance) {
    var ret = [];
    var c;
    for (var i = 0, l = Class.collection.length; i < l; i++) {
        c = Class.collection[i];
        if (instance._intersectOne(c)) {
            ret.push(c);
        }
    }
    return ret;
};

var _intersectBetweenClassAndClass = function(Class1, Class2) {
    var ret = [];
    var c1, c2;
    for (var i = 0, l = Class1.collection.length; i < l; i++) {
        c1 = Class1.collection[i];
        for (var j = 0, ll = Class2.collection.length; j < ll; j++) {
            c2 = Class2.collection[j];
            if (c1._intersectOne(c2)) {
                ret.push([ c1, c2 ]);
            }
        }
    }
    return ret;
};
```



インスタンス同士だけではなく、クラスとクラスの当たり判定やクラスとインスタンスの当たり判定があると書かれている。

_intersectBetweenClassAndInstanceでは第一引数のクラスのコレクション一つ一つに対して、第二引数のインスタンスと当たり判定を行い、当たっているオブジェクトの配列を返している。
_intersectBetweenClassAndClassでは第一引数のクラスのコレクションそれぞれに対して、第二引数のクラスのコレクションそれぞれと当たり判定を行い、当たっているオブジェクトの配列を返している。

#Example
Class1のインスタンスとClass2のインスタンスが当たったら画面から消すExampleは以下のようになる。

```js:example
//クラス同士の当たり判定
Class1.intersect(Class2).forEach(function(pair){
	//pair[0]: Class1のインスタンス
	//pair[1]: Class2のインスタンス
	scene.removeChild(pair[0]);
	scene.removeChild(pair[1]);
});
```
Certificatesの期限が切れたので更新する in Xcode6


Xcodeで実機ビルドしようとした時に

```
「The identity used to sign the executable is no longer valid.」
```

というエラーを吐いたら、登録したCertificatesの期限が切れています。

Xcode6になって、4.の手順でわざわざ自分で更新されないと適応されなかったので備忘録です。


## 1. キーチェーンアクセスから証明書を発行
1. キーチェーンアクセス->証明書アシスタント->認証局に証明書を要求
2. ディスクに保存,鍵ペア情報を指定にチェックを入れる。
3. CertificateSigningRequest.certSigningRequest を適当な場所に保存する。
4. 鍵サイズ：2048ビット, アルゴリズム：RSAを指定する。

## 2. 証明書を元にCertificatesを更新
1. お馴染みの https://developer.apple.com/membercenter にログイン
2. Certificates -> ALLの画面で「＋」をクリックする。
3. 開発用：iOS App Development, ストア用：App Store and Ad Hoc を指定する。
4. Continueをクリックする。
5. Choose File をクリックし、1-3で保存した「CertificateSigningRequest.certSigningRequest」を選択する。
6. 出来上がったものをダウンロードし、実行する。

## 3. Provisioning Profilesを更新
1. Provisioning Profiles -> All で今まで使っていたものを選択し、Editをクリックする。
2. Certificatesの項目で更新したCertificatesを選択し、Generateする。
3. 出来上がったものをダウンロードし、実行する。

## 4. Xcodeの情報を更新する。
1. Xcode -> Preferences -> Account で使用しているAppleIDを選択する。
2. 登録されているデベロッパー名をダブルクリックする。
3. 左下の更新マークをクリックする。

以上で更新作業が終わりです。
Texで表の中に図を埋め込む


表と図を挿入するのは簡単ですが、その2つを同時に使うときにとても苦労しています。
現在の私の書き方のテンプレートを以下に紹介します。
## 書き方テンプレ

``` tex:Figure 
\begin{table}[h]
  \caption{表タイトル}
  \begin{tabular}{|l|c|r|} % l:左寄せ,c:中央揃え r:右寄せ 
    \hline \rm タイトル1 & \rm タイトル2 & \\ \hline
    \hline
    \begin{minipage}{20mm}
      \centering
      \scalebox{0.5}{\includegraphics{画像名1.拡張子}}
    \end{minipage} &
    \begin{minipage}{20mm}
      \centering
      \scalebox{0.5}{\includegraphics{画像名2.拡張子}}
    \end{minipage} \\ \hline
  \end{tabular}
  \label{ラベル名} % \ref{ラベル名}で表番号を参照
\end{table}
```

\scaleboxのあとの{}の中で画像のサイズを、\begin{minipage}のあとの{}の中で表のセルのサイズを指定します。
## サンプル

```tex:cat_turtle.tex
% プリアンブル
\documentclass[10pt]{article}
\usepackage[dvipdfmx]{graphicx}

% 本文
\begin{document}
\begin{table}[h]
  \caption{ねこさんとかめさん}
  \begin{tabular}{|c|c|} % l:左寄せ,c:中央揃え r:右寄せ 
    \hline \rm ねこさん & \rm かめさん \\ \hline
    \hline
    \begin{minipage}{50mm}
      \centering
      \scalebox{0.3}{\includegraphics{cat.eps}}
    \end{minipage} &
    \begin{minipage}{50mm}
      \centering
      \scalebox{0.3}{\includegraphics{turtle.eps}}
    \end{minipage} \\ \hline
  \end{tabular}
  \label{cat_turtle} % \ref{ラベル名}で表番号を参照
\end{table}

表\ref{cat_turtle}は，ねこさんとかめさんの表です．
\end{document}
```

これをビルドして出力すると…
![ねこさんとかめさん.png](https://qiita-image-store.s3.amazonaws.com/0/44446/a1ccdaf6-b36f-7365-de0a-c3b96e9d8b2a.png "ねこさんとかめさん.png")


このように表の中に図を埋め込むことができます！

## 本題
同様の出力をするためにもっとスマートな書き方があれば教えて下さいm(_ _)m
また、サイズは出力を見つつ調整してください。
初回レンダリング完了までの時間を短縮するためのpreloadについて


これは [AngularJS Advent Calendar 2014](http://qiita.com/advent-calendar/2014/angularjs) の12/16の投稿です。

この記事はAngularJSってより、フロントエンドフレームワークの新しい手法について書いてあります。
枯れた技術しか好まない方、日本語の記事が揃うまでは何が何でも手を付けたくない方は来年のアドベントカレンダーにご期待ください。

# 概要
AngularJS等のフロントエンドフレームワークにはレンダリング完了までの時間が、通常のページに比べて、DOMの構築する手順が増えた分、とてもコストの多い作業となっています。
それらに関して、Twitter Mobileで採用された１つのアプローチを紹介したいと思います。

# 歴史
昔(と言ってもまだ10年経ってない)からJavaアプレットやフラッシュ、Flex、ASP.NETなど、沢山のブラウザ上で動くリッチなアプリケーションが生まれては大きな堅い企業の一部を除いて消え、を繰り返していた、世界をW3Cはまだ見放しては居ませんでした。彼らはHTML5とCSS3を与え、サイトのデザイナーは覚えることが増えたが、実現可能なデザインの幅が広がり、ブラウザの開発者は他者の実装に遅れまいと必死に実装するのでした。

話が進みすぎてしまったため、時を一旦戻します。
みんな大好きAjax、みんなjQueryを使いたがりますが、私はprototype.jsの方が好きです。
まぁAngularJS登場以降はそれも使うことは無くなってしまいましたが。

Ajaxというワードは遡ること2005年に誕生しました。
Googleを筆頭に、ブラウザのページ偏移無しでアプリケーションがブラウザ上で動く様を魅せつけられました。
しかし、当時の実装はとても面倒くさく、まともなUI/UXを誰でも実現できるというものではなかったです。

時は2009年！！あのAjaxをいち早く導入したGoogleがまたまた爆弾を投下しました。それがAngularJSです。
フロントエンドでもフレームワークを用いることによって、より自由度の高いブラウザアプリケーションを楽に構築できるようになりました。

そして、今現在はSinglePageApplicationと呼ばれる、ベースのHTMLの中で全てのアプリケーションを完結させてしまう手法が主流になっています。

仕組みとしては、ベースのHTMLとJSONなりXMLを返すAPIサーバーとページごとのパーツとして分割されたHTMLに分けられます。

これらは初回レンダリングの際、以下の手法で読み込まれています。
![Untitled Diagram.png](https://qiita-image-store.s3.amazonaws.com/0/45671/ca3e9117-d939-3e0a-05cf-a7035c7f2b8c.png "Untitled Diagram.png")

# 現状の問題点

このような手法での問題点は、ページのベースとなるHTMLのレンダリングが完了してからコントローラーが呼ばれるだけでも重いのに、そこから更にAPIを叩いてから、それをレンダリングするまで多大なコストが掛かることです。
また、第一段階として、ベースのHTMLの読み込みが完了してから、大量のテンプレート用のHTMLを読み込んで、複数個のコントローラーをDLしていると、それも多大な時間がかかります。
快適な光回線ならまだしも、低速な回線や低スペックな端末ですと、いつまでも目的のページが表示されないことがあります。

以下の点についての打開策としては

* そもそもシングルページでやらない
* キャッシュを最大限に活用したり、必要なライブラリ群はminifyしてconcatする
* preloadの利用

まず、一つ目は却下で。

２つ目なのですが、必ずしても良いと思います。某、SF漫画の主人公のようにminifyしてconcatは実行しておくべきだと思います。手動でやっても良いのですが、面倒なのでGruntやGulp等の自動的にファイルの変更を検知してビルドしてくれるツール等を用いると開発が楽になるかと思います。

次に、３つ目なのですが、これが一番効き目があります。
ベースとテンプレートのHTMLがレンダリング完了して初めてAPIを叩きだすのは、初回のレンダリングにはとても重いものとなります。そこで以下のような手法があります。

![Untitled Diagram-1.png](https://qiita-image-store.s3.amazonaws.com/0/45671/563d608e-c03a-b453-67ce-fd819d84c948.png "Untitled Diagram-1.png")

この図ではページHTMLの中に埋め込まれていようように見えますが、実際にはベースとなるHTMLの中に埋め込まれています。
これはHtml5Modeを利用する際に最大限の効果を発揮します。
Html5Modeを使うときにベースのHTMLはどうやって取得していますか？
普段はroutingしてAPI以外はベースのHTMLを返しているかもしれません。
つまり、そのHTMLの中に初回叩かれるであろうAPIを埋め込んでおくことで、ユーザーになるべくはやくレンダリング済みのページを提供することが出来ます。
一度レンダリングが終了してしまえば、後はバッググラウンドでAPIを叩けば良いため、非常に初回レンダリングがスムーズになります。

この手法は今現在、モバイル版のTwitterで導入されています。
昔のTwitterのページは、一度ベースとなるパーツが全て読み込み終わってから初めてAPIを取得していたため、TLの表示がとても遅いものでした。
しかし、今現在のTwitterはpreloadを最大限利用することによってページの表示速度が格段に改善されました。

# preloadを気軽に利用する
一番簡単なのは、node.jsのフレームワークであるSynthを利用することです。
もうここまで書いて面倒になったので、数カ月前に書いた私の記事を参照して下さい。
[AngularJS - Synthってなんじゃらほい？ - Qiita](http://qiita.com/dll7/items/1237539efdc650f8ea5e)

このフレームワークはExpressをベースにしており、また、静的なコンテンツの配信にStを採用していたりと、色々とモダンな実装が多々あり、Expressで開発をする際にの参考にも鳴るかと思います。

また、フロントエンドとバックエンドのライブラリをsynthコマンドで一元管理できるのも利点の一つで、本当はこのアドベントカレンダーに合わせてSails版のSynthを公開したかったのですが、間に合わなかったので、そのうち別途公開します。

# まとめ
* AngularJSではテンプレートやJS部分を極限まで圧縮して一つにまとめる！
* 便利なツールは積極的に使っていこう
* APIに関しては積極的にpreloadを用いることによって初回の表示時間を大きく短縮できる


本日は最後までご覧頂きありがとうございました。
少し細かいBEMい話

# BEMってむずかしい？

2014年はたくさんのサイトで[BEM](https://bem.info/) 、もといBEMな命名規則が採用されたのではないかとおもってます。（[拙著](http://www.amazon.co.jp/dp/4844336355/)でも取り上げてます。）

しかし、実際に導入されているサイトのコードをみてみると、んー、と感じることがあったり、または周りの開発者が、BEMむずかしい、といってるのを聞くことがある。

## 「これで合ってるの？」

むずかしい、と感じるのはたぶん**Block**と**Element**との関係やバランス、あとは**クッソ名前が長くなってしまうことの不安**にあるのではないかと考えてます。

例えば、ふとこのQiitaの記事ページのサイドバーにある、関連投稿モジュールをみてみましょう。

![関連投稿](https://qiita-image-store.s3.amazonaws.com/0/21225/e599af8c-15a8-32d9-d2c8-4c96eb82e893.png)

これをどうマークアップするか、どういうセレクタを書くかっていうのは人やプロジェクトによって全然違うし、このパターンがQiitaの中でどのくらい・どのように存在するかで変わります。

ただBEMを意識しはじめたことだと、次のように書くかもしれません。すごい極端な例。

```
<div class="widget">
  <h3 class="widget__title">関連投稿</h3>
  <ul class="widget__list">
    <li class="widget__list__item">
      <a href="#author" class="widget__list__item__author">
        <img src="author.png" alt="auhtor" class="widget__list__item__author__avatar">
      </a>
      <a href="#post" class="widget__list__item__title">
        記事のタイトル
      </a>
    </li>
    <li class="widget__list__item">
      ...
    </li>
  </ul>
</div>
```

かなり簡素化したHTMLですけど、このWidgetモジュールを構成するツリーをそのままBEMっぽいツリーにしようとすると、こう考えてしまう人はいるかもしれません。

これに対し、次の2点を考えます。

- ElementのElementは冗長になっている
- モジュールとしての単位が大きすぎる

## モジュールを分解する

先ほどのHTMLに手を加えるならば、僕の場合はこうするだろうってのは次のような形です。
（しれっとちょっとdivは追加してる）

```
<div class="widget">
  <h3 class="widget__title">関連投稿</h3>
  <ul class="list">
    <li class="list__item">
      <div class="media">
        <a href="#author" class="media__image avatar">
          <img src="author.png" alt="auhtor">
        </a>
        <a href="#post" class="media__body">
          記事のタイトル
        </a>
      </div>
    </li>
    <li class="list__item">
      ...
    </li>
  </ul>
</div>
```

- widget
- list
- media
- avatar

ちょっと細かめに割っていますが、パターンが増えてくる・見えてくると、こういった形になるのではないかと思います。実際にはもっと複雑で、ユニークなデザインが来るので、こんなにすっきりした形にはならないことも多いですが、設計イメージはこんな感じです。

## 分解できないとすれば？

前述のとおり、分解したって再利用も無いなーみたいなことも多く、そうすると下手に分割をしてもあまり意味ないこともあります。しかし、その場合にも**Element__Element**みたいな命名にはならないようにします。

今度も元のHTMLのいじるならこう。

```
<div class="widget">
  <h3 class="widget__title">関連投稿</h3>
  <ul class="widget__list">
    <li class="widget__listItem">
      <a href="#author" class="widget__listItemAuthor">
        <img src="author.png" alt="auhtor" class="widget__listItemAvatar">
      </a>
      <a href="#post" class="widget__listItemTitle">
        記事のタイトル
      </a>
    </li>
    <li class="widget__listItem">
      ...
    </li>
  </ul>
</div>
```

何が違うかっていうのは、このモジュールの**Blockであるwidgetに対するElementの考え方**です。

元のHTMLの場合、ツリーを意識しすぎて、どんどんElementにしてしまっていたのですが、改めた方では、ルートであるBlockのwidgetにぶら下がるようにしています。

`widget__listItemAvatar`これは、

> ウィジェットの、リストの、アイテムの、アバター...

ではなく、

> ウィジェットの、リストアイテム内のアバター

って感じです。（わかりづらそう

## まとめ

なんでこんなこと書いてみたかというと、[CodeGridの@geckotang氏のCSSConfレポート](https://app.codegrid.net/entry/cssjsconf-2)でも報告があったんですが、CSS設計セッションの中で紹介されてたコード例で、

```
.main-header__nav-list__link {
  ... same stuff ...
}
```

ってのがあって、「ありゃ、そんな名前にするの？」とか思ったからです。（CodeGridの記事の中で、おなじような話を@geckotangが書いているので、読める方はぜひ）

解説したコードが別に正解ってわけでもないですが、Element__Elementなパターンに遭遇したら、立ち止まって考えてみてはいかがでしょーか。
Herokuでハマったこと(no Cedar-supported app detected)

deployするためにherokuを使ってみようと思って、ちょっとハマったのでメモメモ

# herokuの設定について
「herokuとは？」といったことから大まかな流れは下記を参照しました。
　※ http://blog.gufii.net/weblog/archives/10

### ハマリポイント
サイトを見てハマリポイントはだいたい2つ

<br>
#### herokuではDBはPostgreSQL(pg)推奨!!

- developmentやtest環境でPostgreSQL以外を使っている場合は、Production用のDBの設定を変える必要があります。(詳しくは後述のサイト[1*]を参照)
- MySQLを使う場合は、下記のコマンドでアドオンを追加

```
$ heroku addons:add cleardb:ignite 
```
※参考>> http://straitwalk.hatenablog.com/entry/2013/08/11/004648
<br><br>
  
#### index.phpを作成しなければならない
今回ハマったのはコッチ↓↓
下記の2点がポイントです！
- ``git push heroku``した時に、``no Cedar-supported app detected``って出てくる
- index.phpは「.git」のおいてあるディレクトリに作成する

エラーメッセージの意味がよくわからないのですが、index.phpがないと``push``でエラーが起こります。
ファイルには何書いても問題無い。

<br>
その他のトラブルシューティングもここにまとめられています。
1*:http://gam0022.net/blog/2013/09/17/run-rails4-on-heroku/

<br>
追伸：
[Oakbow](http://qiita.com/Oakbow)さん、色々と指摘いただき、ありがとうございます。
一旦気になりだすとたのしい原価率の話

![うまい棒.jpeg](https://qiita-image-store.s3.amazonaws.com/0/58851/39ba32e9-09a7-9ad6-8d0a-12a888a3c1f6.jpeg)

こんばんは、がーでんです。

皆さんの記事の指向とは大分違うので恐縮ですが…

突然ですがちょっと、このまとめを見てみてください。
http://matome.naver.jp/m/odai/2127374075574714001?page=2

これ、**凄い自虐ネタ**に使えそうですね。

**「やーいお前のクリスマス、原価150円〜」**とか悲しすぎる。

てか、スーツの**原価3,000円**て...

**ポテトの粗利125円て...**

その線で行くと、**うまい棒がいかに**

**親切心にあふれた商品か分かりますね。**

"景気の動向は「うまい棒の長さで知れ！」"とかいう本が書けそうな勢いです。

##アプリやWeb制作の原価率って？

さて、僕が書きたいのは「うまい棒」の記事ではなく

最近アプリやWebページ制作の提案をする機会が増えてきて、


意識するようになった**「アプリ制作、Web制作の原価率(粗利率)」の話**です。


例えば原材料が決まっているコーヒーの場合、**豆代や加工費、人件費等を考慮して最終的な価格が決まってくる**と思います。


ですがアプリやWebページの場合、


つぎ込んでるのは**「エンジニアの血と汗」**だと思うので、それって値段付けるの難しくね？と思ったのです。

(時々レッド◯ル代とかも入ってくるかもしれませんが笑)


僕はエンジニアでないので相場感は分かりかねますが、
聞いた話では
###■原価計算
>エンジニアの1日辺りコード単価×労働時間

で大体の原価を計算するそうです。

##アプリ制作の原価見積例
例えばあるエンジニアが"一日コードを書くのに5万円"取ったとすると


制作時間1ヶ月間のアプリを作成した場合の原価は

**5万円×1ヶ月間(30日) ＝ 150万円**

となります。

仮に400万円で発注したとすると
**原価率は150万円 ÷ 400万円 ×100% ＝ 37.5%**
**粗利率は62.5%にとなります。(...よね！？)**

という感じで、基本的には

>■制作工程の確認→どの工程にどれくらい期間が必要か
 

>■エンジニアのコード単価(人件費)→何人がどのくらいのペースで開発するか

の2つが重要になってくるのだと分かりました。

##■感想

ただ丸投げでディレクターへ聞くのではなく

◯◯は出来るけど△△は出来ない。

◻︎◻︎はこういう流れだから、このくらいの期間がかかるな〜というのが分かると、

今後よりスムーズに案件を進められるかも知れないなーと感じました。
SQLiteとMySQLのテーブル操作方法を比較してみた

# SQLiteとMySQLの比較表

SQLiteを使ってみたら、MySQLと使い方の違いがわからなかったので比較します。

|  | SQlite | MySQL |
|:-----------|:------------|:-------------|
| ログイン       | sqlite3 データベース名 | `mysql -u user_name -p` |
| データーベースを作成 | sqlite3 データベース名 | `CREATE DATABASE database_name;` |
| データーベースへ接続     | - |    `USE database_name;`    |
| 接続中データベースを表示 | `.databases` | `SELECT database();` |
| テーブル一覧を表示     | `.ta` <br> `.tables` |   `SHOW TABLES;`    |
| スキーマを表示     | `.schema table_name` |   `DESC table_name;   ` |
| ログアウト | `.quit` <br> `.exit` | `exit;` |

Sqliteではユーザーは無いのですかね(^^ゞ
use utf8は書くべきなのか？

ソースファイルの文字コードがutf8だからといってuse utf8するのは違うらしい
毎回use utf8して、binmode(STDOUT, ":utf8")、binmode(STDIN,  ":utf8");してたけど
そういうことじゃないのね。

use utf-8はほとんどの場合不要。 perlメモ
http://www.rengoku.sakura.ne.jp/program/perl/perl_utf8_001.html

>じゃあ何のためにあるのかと言えば、ｐｅｒｌの処理側に、これはＵＮＩＣＯＤＥ文字として処理するよと教えるだけの物です。
　具体的に書くと、substr（文字分割）、length（文字の長さ取得）と言うような、ＵＮＩＣＯＤＥとマルチバイトで動作が変る関数群などに対して、 どちらの処理方法で処理するかを教えるのがutf8フラグとなります。
　たとえばlengthの場合、フラグ無しだとバイト数が返ってきますが、utf8フラグＯＮだと、文字数が返って来ます。
（中略）
なので、基本的には、文字列操作系の関数を使わない限り、utf8フラグは不要です。
　単純にｐｅｒｌのソースコードをutf8で作成し、読み込む外部ファイル関係もすべてutf8で統一していれば、use utf8は記述する必要無く、そのｃｇｉスクリプトはutf-8化したことになります。

use utf8が必要な場合。 perlメモ
http://www.rengoku.sakura.ne.jp/program/perl/perl_utf8_002.html

Perl で utf8 化けしたときにどうしたらいいか - blog.64p.org
http://blog.64p.org/entry/20080408/1207619640

PerlのCGIのutf-8改造で文字化けしたときの処方箋
http://mycc.s33.xrea.com/data/pc/perl_use_utf8.html

utf8 - ソースコード内に、UTF-8(か、UTF-EBCDIC)を有効/無効にするためのプラグマ - perldoc.jp
http://perldoc.jp/docs/perl/5.8.1/utf8.pod
SSLをサービスに導入する際のngix再起動プロセス

1. Google Analyticsなどで最も影響度の少ない時間帯を調査
2. 時間になったらまずは、影響が出るサービスの現在の訪問者をログで調査 (訪問者に影響を与えないため)
3. nginxを再起動する
4. サービスにアクセスしSSLが動作しているかどうか確認


　2.
　ログは [サービス名].confファイルの中にある、

　server {
  　  access_log  /var/log/nginx/[サービス名].access.log ;
　}

　などの部分。

　3.
　最初にconfigtestでconfigの動作確認を行なう
　/etc/init.d/nginx configtest

　その後ngixを再起動
　/etc/init.d/nginx restart
　(パスは適宜変更して下さい)
Carton時代の必須インストールモジュール(Webアプリ編)


# Cartonとは

@miyagawaさんが作った、Rubyで言う所のBundlerに当たるツールです。
プロジェクト単位で依存モジュールを固定化して利用することができます。

# 高速化された実装

CPANにはXSを用いてCで実装されたモジュールが存在します。
しかし、コンパイルする必要があるため、環境の制約によっては使えない場合もあります。
そのため、幾つかのCPANモジュールはPerlのみの実装と、XSを用いた実装の2つを用意して、XSが利用可能であればそちらを利用するような仕組みを用意しています。
このような背景から、インストールしておくとそれだけで高速化に効くモジュールが幾つか存在します。

## HTTP::Parser::XS

このモジュールはh2oのHTTP1.0向けのParserであるpicohttpparserのPerlバインディングです。
Plack::HTTPParserがバックエンドとして利用しています。
Starletなど、Plack::HTTPParserでHTTPをParseするサーバーを利用する場合は高速化が期待できます。

## Time::TZOffset

現在のタイムゾーンからそのオフセットを高速に求めるモジュールです。Plack::Middleware::AccessLog/Plack::Middleware::AxsLogが依存しているApache::LogFormat::Compilerがさらに依存しているPOSIX::strftime::Compilerが利用しています。
Plack::Middleware::AccessLog/Plack::Middleware::AxsLogを利用する場合でかつ、タイムゾーンをログのフォーマットに含める場合は高速化が期待できます。

## Cookie::Baker::XS

名の通り、Cookieを生成したりParseしたりするモジュールのXS実装版です。
Cookie::Bakerを利用している、HTTP::Session2やPlack::Middleware::Session::Simpleなどを利用している場合、高速化が期待できます。
また、Plack 1.0040以降からPlack::Request/Plack::ResponseでもCookie::Bakerが利用されるようになったのでPlack 1.0040以降を使っている場合も高速化が期待できます。

## WWW::Form::UrlEncoded::XS

Plack 1.0040以降からPlack::RequestでWWW::Form::UrlEncodedが利用されるようになったのでPlack 1.0040以降を使っている場合は高速化が期待できます。

## JSON::XS

名の通り、JSONを生成したりParseしたりするモジュールのXS実装版です。
JSON.pmを利用している場合は高速化が期待できます。

## Cpanel::JSON::XS

Cpanel::JSONで利用できるCpanel::JSON::XSというやつもいます。Cpanel::JSONは[深遠な事情](http://blog.64p.org/entry/2013/07/31/181812)でJSON.pmからforkされたやつですが、たまにCpanel::JSONに依存しているやつがいるので、そんなやつがいたら入れておきましょう。高速化が期待できます。
といってもわからないきがするので、cpanfile.snapshotから`fgrep Cpanel::JSON cpanfile.snapshot`というぐあいで探してあげるといいです。

## YAML::XS

YAML.pmをご利用の方はどうぞ。と言いたいところですが、YAML.pmはべつにYAML::XSを利用しないので、YAML::XSを直接使ってるやつがいない限りこれは入れても意味ないです。あしからず。

# まとめ

ただインストールしておくだけで高速化に貢献してくれるモジュールがいるという紹介でした。特にWebAppを書くときはHTTP::Parser::XSだけでも依存にいれておくとなにかとよいきがします！
Cartonを使う時代になって、これらのモジュールを利用したい場合は明示的にcpanfileに書く必要がでてきており、より意識する必要性が高くなってきたなーということで書いてみました。
Pythonで重複してる文を削除するプログラム

#はじめに
今回大学で課された課題のうちで下準備としての課題で以下のようなものがでました
>①インターネットを用いて、英文1000文を集めたデータベースを作る
ここで、同じ文が無いことを確認せよ。

さすがに1000文もあると目で見て重複文があるかどうかを判断するのが大変なので最近練習してるpythonで書いてみようということを思った上でのプログラムです
#プログラム
```python:check.py

# -*- coding: utf-8 -*-

import sys
str1 =""

try:
    file_name = sys.argv[1]
except IndexError:
    print('Usage: {0} TEXTFILE'.format(file_name))
    sys.exit(1)

with open(file_name, 'r') as f:
    # 集合型にすることで重複が消える（順序は保証されない）
    # .rstrip()することで、一番最後の行に改行を入れる必要がなくなる
    unique_texts = {line.rstrip() for line in f}

for i in unique_texts:
	str1 += i+"\n"

with open(file_name + '.disticted.txt', 'w') as f:
    f.writelines(str1)


```

#最後に
このプログラムはテキストの一文そのまま比較してるから最終文の後に改行しておかないと最後の文が重複した時に削除されない.

##追記
hatchineeさんの編集リクエストを改変して編集し直しました
Intel Edisonに起動スクリプトを登録する

　皆さん[ubilinux](http://www.emutexlabs.com/ubilinux)にしてますよね？そうであれば，Debianの場合と同じです．

　 */etc/init.d/* の中に，以下のようなshスクリプトを作成します．

```bash:myboot
#! /bin/sh
### BEGIN INIT INFO
# Provides:          myboot
# Required-Start:    
# Required-Stop:      
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: My initscript
# Description:       My initscript
### END INIT INFO

case "$1" in
  start)
    #nop
    ;;
  stop)
    #nop
    ;;
  status)
    #nop
    ;;
  restart|reload|force-reload)
    #nop
    ;;
esac

:
```

最後のコロンを忘れないように注意．

　作成したら，
\# insserv myboot
で登録すると，
>$ sudo find /etc/ -name "*myboot"
/etc/rc3.d/S01myboot
/etc/init.d/myboot
/etc/rc2.d/S01myboot
/etc/rc6.d/K01myboot
/etc/rc1.d/K01myboot
/etc/rc0.d/K01myboot
/etc/rc5.d/S01myboot
/etc/rc4.d/S01myboot

と，それぞれのランレベルに一度にスクリプトが登録されました！これらは全てシンボリックリンクなので，/etc/init.d/以下のスクリプトをいじれば，全てのランレベルの起動時に反映されます．

　解除は
\# insserv -r myboot
になります．

　スクリプトの説明をすると，このスクリプトは，システムの起動時や終了時などに呼ばれます．その，自分自身がどのタイミングで呼ばれたのかを，
> case "$1" in

以下で条件分岐しています．
　ここで，起動時に実行したい処理は，start以下に．終了時に実行したい処理はstop以下に記述してください．
土木の世界からインターネット業界に転身した女性として思うこと


こんにちは、okaneyaです。
大学・大学院では土木工学を専攻し、この春卒業してインターネットサービスの会社に就職しました。この組み合わせは珍しいようなので、こちらの世界に来て戸惑ったことや考えたことについて書いてみようと思います。

##「一旦リリースしてみよう」の文化に当惑した
インターネット業界に来て一番当惑したのが、「完成形じゃなくても、一旦世に出してみる」ことができる点です。

橋やダムを「強度が不安だけどとりあえず作ってみようか〜」と言って作ることは絶対に許されません。人が死にます。然るべき手順を踏んで、多くの組織や人が関わって、綿密な計画の上にようやく着工のGOサインが出ます。

一方自分が今関わっているwebサービスは、最初から完璧に作り込まなくても仮説を検証するのに十分なだけのものがあればとりあえずリリースすることができます。まずは最小機能のサービスを作って、人に使ってもらって反応を見ながら改善していこうという考え方は、リーンスタートアップやアジャイル開発という形で手法化もされています。
私の知人に、インターネットで米を買うサービスを立ち上げた人がいます。彼は、購入ボタンが押されたらその都度米屋に米を買いに走って発送するというオペレーションでサービスをスタートさせました。サービスの仕組みとしてはまったく不十分ですが、インターネットで米を買う人がいるという仮説を検証するためにはこれで十分だったのです。

大学で土木の考え方に慣れていた自分は、最初この文化の違いに戸惑いました。「まだだいぶ使いづらい気がするんだけど出しちゃっていいの？」「価値が認められる気がしないんだけど、これ出しちゃうの？」そう思ってリリースをためらっていました。でもやっているうちに、この考え方が理に適っていると思えるようになってきました。今まで存在しなかった新しい価値を生み出すのがインターネットサービスの醍醐味なわけで、前例のないことは試してみないとわからないですね。

「新しいことだからうまくいくかどうかわからない、わからないからとりあえずやってみよう！」
小さく始められるし、だめだったらすぐ撤退できる。試しにやってみることができるのもまた、インターネットの世界の非常に大きな利点であり面白いところだと思います。どんどんやっていこう。

##人と時間の規模感に当惑した
土木工事のプロジェクトには、たくさんの人が関わります。専門性が高くて職種も多岐にわたるため、人数は必然的に多くなります。関係者が多くなるので、意思決定にも時間がかかります。プロジェクトには数年の単位で時間がかかります。大きな仕事をするのには人も時間も必要で、みんなで協力して後世に残るものを作り上げるところにロマンと面白みがあります。

一方、インターネットサービスの世界では数人のチームが当たり前です。一人でサーバー周りからデザインからすべてやってサービスを作り上げる人も珍しくありません。そうして数日とか数週間でサービスリリースまでこぎつけます。

これも最初違和感を感じたところでした。私は、仕事はそれぞれ得意とする人がいるから分業した方が効率的だし質の高いものができる、と信じてきました。ところが、今自分の周りにいる人はちがう考え方を持つ人が結構います。自分の実現したいものを正確に伝えてその通りに作ってもらうためのコミュニケーションコストは高いから自分ですべて実装できるのが最強！という考え方です。もちろんチームで行う部分もあるけれど、主体的に動くことでもっともっと面白いものや思い通りのものができる。やりがいの大きさを実感しました。

その気になればすべて自分でやることができて、自分の手で思いを形にしたり価値を生み出すことができる。自分の思うものを作れるのはこの業界にいる者の特権だと思います。


##女性が少ないのはいっしょ。でも活躍の機会は圧倒的に大きい！
男性に比べて女性プログラマーは非常に少ないと言われています。土木エンジニアの世界も同じです。女性の土木エンジニアはドボジョと呼ばれ、たいへん ~~稀有な~~ 希少な存在です。両者を比べると、女性土木エンジニアに比べて女性プログラマーは圧倒的に活躍の可能性が大きいと感じています。

女性として土木エンジニアを目指す利点は、正直少ないと思います。もちろん職場の多様性を取り入れるという意味で組織にとっての利点はありますし、積極的に女性を採用する流れはあります。が、体力面では男性に適いませんし、女性の受け入れ体制が整っていない現場も多いですし(トイレや更衣室事情)、女性の特長や優位性が活かせる場は多くないのではないでしょうか。

この点、インターネットサービスの世界は女性が活躍するのに非常に良いフィールドだと言えます。身体的・社会的ハンディがないというだけでなく、女性的な視点やアイディアを活かす場がたくさんあるからです。特に、女性を対象にしたサービスでは大いに活躍できます。

私が働くレシピサイトの会社は、ユーザーの9割が女性であるにも関わらずプログラマーは男性がほとんどです。ユーザーの抱える課題や考えや行動をより理解している女性プログラマーの視点は、大変貴重なものであると認識されています。

#まとめ
コードが書ける女性は、活躍の場がすごく広いし人材価値も高そう。やり始めてみると、一人で黙々とPCに向かうプログラマーのイメージとは裏腹に、いろんな人に聞いたり一緒にやることが多くて、いい意味で期待を裏切られました。今の課題は、飽きずにやる気を保つことです。。がんばります。いい方法あったら教えてください。
AMIMOTO AMIに wordpress を引っ越すときの AWS設定

備忘用のメモです。
ほぼ全て、[AMIMOTO](http://ja.amimoto-ami.com/)のブログかFAQに書いてあります。。大事なことが書いてあるかもしれないので、ざっと読んでおいたほうが良さそうです。網元さん万歳！

## AMIMOTO AMI インストール

PVM か HVM か忘れましたが高い方を選びましょう。t2.micro だと１年無料らしいのでそちらを選びました。

２８ページくらいまで下記のとおりやればいい
http://www.slideshare.net/megumithemes/amimoto-40420065

## nginx ユーザで EC2 にアクセスできるように

下記をやる
[nginx ユーザとして ssh 接続できるようにするには? | 超高速 WordPress AMI 網元](http://ja.amimoto-ami.com/2013/11/11/how-to-ssh-as-nginx-user/)

## コンテンツやプラグインの引っ越し

（略。やってないので分かりません）
AMIMOTO だと、wordpress のディレクトリのオーナーは nginx なので、nginx ユーザでファイルの移動とかをしたほうが良いでしょう。

## Route53 (AWS のDNS)を使う

EIPは設定してあったので、下記の Route53の設定からやりました
[Elastic IP アドレスの設定とRoute 53から独自ドメインの割当 | 超高速 WordPress AMI 網元](http://ja.amimoto-ami.com/2013/11/29/elastic-ip-and-route-53/)

## HTTPポートをあけておく

セキュリティグループからInbound HTTP:Anywhere に設定しておきます。
最初これをやっていなかったので、自分の家のルーターからは接続できたけど、、という状態になりサイトを１０分アクセス不可にさせてしまいました（携帯網のアクセスで気づいた）。。。 

## ネームサーバの切り替えをする

いちおうここの手順を全部やりましたが、DNSサーバを切り替えたので最初のほうに書いてあるDNSサーバ設定（Aレコードの変更）は必要なかったと思います。
[【WordPress】素人でも出来た！AWS EC2へのサーバー移行方法9 独自ドメインDNS設定 | 男子風呂（ぐ）](http://danshiblog.com/job/130128-amazon-ec2-server-setting-mu-mu-domain-dns-setting.html)

## 確認

dig コマンドで、設定が変わっていることを確認。ttl=300ms なのですぐ変わってます。
> dig *domainName*

whois でも確認できるみたいです
> whois *domainName* |grep "^Name Server"

ブラウザでアクセスすると、DNSのキャッシュが残っていることがあるようなので
chrome://net-internals/#dns
にアクセスして、clear host cache ボタンを押せばOKです

## 番外編1

朝、Wordpress のページも管理画面もアクセスできなくなっていました。
wp-cli を使おうと思ってあくせくしてたら、HTTP 500 Internal Server Error が出ていて、wp list plugins で使っているテーマの functions.php でエラーが出てたのでその行をコメントアウトしたらみんな動くようになりました。
テーマの設定１つで管理画面も動かなくなるWordpress っていったい。。。

## 番外編2

### 本番EC2 からテスト用サーバをつくる

[AWSでEC2のインスタンスをコピーし、サーバーのバックアップを簡単におこなう方法 | 株式会社LIG](http://liginc.co.jp/web/programming/server/111161)

一般的な create Image -> Launch の手順でつくりました。
セキュリティグループで Anywhere HTTP の設定を削っておくことと、
EIP を新規作成してassociate することを忘れずに。
あと、ドメイン名が書いてある設定も変更する必要があったので、下記に書いてあるようにphpMyAdmin からいじくろうとしたのですが、なぜかphpMyAdmin が使えなくなっていたので同じページに書いてある

> wp search-replace *exmaple.com* *新規作成したEC2のpublic_DNS*

を実行して書き換えました。副作用があるかもしれないので、dry-runしてからやったほうが良いでしょう。あと、キャッシュが効いてしまってたので, wp-contents/cache 以下のファイルを全消ししました。

[網元でのデータベース操作 | 超高速 WordPress AMI 網元](http://ja.amimoto-ami.com/2014/02/28/wp-cli-db/)

## 番外編3

### サブディレクトリに WordPress をインストールし、ルートアクセス時にindex.html に飛ばす

以下のAMIMOTOブログをほぼそのまま実行します
[サブディレクトリへのWPインストール](http://ja.amimoto-ami.com/2014/10/15/to-install-wordpress-in-a-subdirectory/)

今回、仮想ホストはつくっていない前提でサブディレクトリだけ作ってインストールしました。最新の網元だと、/usr/local/bin/wp-setup が無かった（[解消されました！](http://ja.amimoto-ami.com/2014/12/22/ami-hvm-1-1-issues/)）ので、１つ前のバージョンの網元でやっています。

最後にnginx の設定ファイルで
location = / {
    index index.html
}
を location /<sub_dir> {} の前に追加してやれば、ルートアクセス時に index.htmlにアクセスさせることができます。
内積と進行方向〜恋愛の奥義〜

はじめまして、鹿間脩斗（しかましゅうと）です

日付の変更が迫る中、投稿します
全然投稿の仕方がわかりません

「内積」って皆さんご存知ですか？

高校生のベクトルの分野で習うあれです
高校生に赤点というレッテルを無感情に貼り散らすあいつです

Delphiユーザーにとっては"DotProduct"ですね


内積というのはふたつのベクトルによって値が決定されるわけですよね
でも内積ってふたつのベクトルの何を表してるのでしょうか？

答えは「ふたつのベクトルの同じ方向を向いてる量」です
「へー...」そんな反応が画面を通して伝わってきます


じゃあ次は「内積がわかって何が嬉しいか」ですよね
言い換えれば「同じ方向がどれだけか」ってなんの役に立つのかですよね

答えは「進行方向が決まる」です



具体的なコードを示しましょう

ふたつのTVector3D型の変数があったとします
ひとつは入り口の方向を、もうひとつは動いている物体の速度を表しています
enterVector
moveVector

内積を取っちゃうわけです
enterVector.DotProduct(moveVector)

この値で分岐することで進行方向が決まります。やった！

なぜって？
ソースコードっぽく説明しましょう

if DotProduct > 0
begin
　　入り口と同じ向き。入れる。
end
else if DotProduct < 0
begin
    入り口とは逆向き。入れない。
end;

これを利用すれば、「格闘ゲームの攻撃の当たり判定」だったり「ボールの転がる方向」だったりが計算できるわけです

最後にひとつ。先生から教わった「内積」について。
「恋愛はベクトルで表される。だってお互いが同じ方向を向いてる時が最高の状態なんだから。」

以上です
ご精読ありがとうございました
[Vim] Vim Basic Command Memo

|Name|Command|
|:--:|:------:|
|Open previous opened file|<kbd>Ctrl</kbd>+<kbd>o</kbd>|
|Redo|<kbd>Ctrl</kbd>+<kbd>r</kbd>|
|Jump to line end|<kbd>$</kbd>|



Other:

**Comment**

1. <kbd>Ctrl</kbd>+<kbd>v</kbd>
2. Select lines need to comment
3. <kbd>Shift</kbd>+<kbd>i</kbd>
4. Input comment characters. e.g. "#", "//"
5. <kbd>Esc</kbd>
Spring Boot で log4jdbc-log4j2 を使用してSQLを出力する

Spring Boot で log4jdbc-log4j2 を使用してSQLを出力するための手順です。開発時に実行されているSQLを確認したい時に使えると思います。

http://code.google.com/p/log4jdbc-log4j2/ を参照しました。

pom.xml に log4jdbc-log4j2-jdbc4.1 を追加します。

```pom.xml
        <dependency>
            <groupId>org.bgee.log4jdbc-log4j2</groupId>
            <artifactId>log4jdbc-log4j2-jdbc4.1</artifactId>
            <version>1.16</version>
        </dependency>
```

application.properties の設定を変更します。urlのjdbcの後に **:log4jdbc** を追加し、driverClassName を **net.sf.log4jdbc.sql.jdbcapi.DriverSpy** に変更します。

```（変更前）application.properties
spring.datasource.url             = jdbc:mysql://localhost/world
spring.datasource.driverClassName = com.mysql.jdbc.Driver
```

```（変更後）application.properties
spring.datasource.url             = jdbc:log4jdbc:mysql://localhost/world
spring.datasource.driverClassName = net.sf.log4jdbc.sql.jdbcapi.DriverSpy
```

/resources の下に log4jdbc.log4j2.properties を作成します。

```log4jdbc.log4j2.properties
log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator
```

/resources の下に logback.xml を作成します。

```logback.xml
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <include resource="org/springframework/boot/logging/logback/base.xml"/>

    <!-- log4jdbc-log4j2 -->
    <logger name="jdbc.sqlonly"        level="DEBUG"/>
    <logger name="jdbc.sqltiming"      level="INFO"/>
    <logger name="jdbc.audit"          level="INFO"/>
    <logger name="jdbc.resultset"      level="ERROR"/>
    <logger name="jdbc.resultsettable" level="ERROR"/>
    <logger name="jdbc.connection"     level="DEBUG"/>
</configuration>
```

以下の Java Configuration のクラスを作成します。

```java
@Configuration
public class ApplicationConfig {

    @Bean
    @ConfigurationProperties("spring.datasource")
    public DataSource dataSource() {
        return DataSourceBuilder.create().build();
    }

}
```

Spring Data JPA でも MyBatis-Spring でもSQLが出力されます。
QMLでNode.jsのモジュールをrequireできるライブラリを作ってる


**遅刻して申し訳ありません…**

タイトルの通り、QML (Qt Quick) からNode.jsのモジュールをrequireできるライブラリ (いわばQML版Browserifyのようなもの)を開発しています。以前 [RubyからQMLを使えるようにしたという記事](http://qiita.com/seanchas_t/items/ec8b5376b80eee22ea15) を書いたのですが、それと少し似ています。

https://github.com/seanchas116/qmlrequire

ただ今のところ実用レベルには達していないので、ここから書く内容はポエムになります…。

実は同じコンセプトのプロジェクトである[node.qml](https://github.com/trollixx/node.qml)というのがあるのですが (こっちのほうが先です)、Nodeの機能を全部C++で実装するなどつらそうなので、自分でより軽量の実装を作ることにしました。

# 背景

## npmのモジュールをQMLでも使いたい

[npm](https://www.npmjs.org/)というNode.jsのパッケージマネージャがありますが、最近では Browserify / webpack などを経由して、WebフロントエンドJSからも使われるようになりました。
結果的に、(サーバーサイド・Webフロントエンドなどの) 分野を問わず代表的なJavaScriptのパッケージマネージャになりつつあります。

QMLでも、サーバーサイド・WebフロントエンドのJSと同じように、npm経由でインストールしたNode.jsのモジュールを使えるようになれば、Qt Quickでの開発がもっと楽になるのではないか？と考えました。

## ファイル操作などの汎用的な処理をJavaScriptで

Qt Quickを記述するQMLはとても便利で、やることさえ限られていればJavaScriptのみですべてのロジックを記述することができます。

しかし、QML上のJavaScriptは、ファイル操作などの処理をサポートしておらず、C++上のように汎用的な内容を実装することができません。

そんな時にNode.jsの`fs`モジュールや、npmに上がっている便利なライブラリを使えたら便利になりそうです。

# やること

* いわゆるCommonJSスタイルの`require` の実装
  * [Node.jsのrequireアルゴリズムのドキュメント](http://nodejs.org/api/modules.html#modules_all_together)
* Node.js コアモジュールのshim (互換機能)を用意する

# できなさそうなこと

* NodeのC++アドオン対応 (NodeのV8 APIにおもいっきり依存しているのでそれをshimするのは無理そう…)
* Nodeは対応しているけど、QMLのJSが対応していない言語機能に対応

# 目標 (一例)

もっといい記述方法も探しています。

```qml
ApplicationWindow {
    property var path
    Require on path { from: 'path' }
    title: path.join('foo/bar', 'baz')
}
```
GCP エッジキャッシュ

Google Cloud Platformにはエッジキャッシュの機能がある。
あんまりDocumentにも乗ってないので、今回はエッジキャッシュを紹介します。

# エッジキャッシュの特徴

エッジキャッシュはGoogleが利用しているキャッシュサーバに、自分のGCP上のコンテンツも乗せることができる機能です。
GCPのキャッシュサーバは全世界にあるため、日本だけで無く、海外も視野に入れたサービスでも有効です。

## 特徴

* すさまじいキャパシティ
* とっても安価

キャッシュサーバの管理はGoogleで行ってくれる上に、すさまじいキャパシティを誇り、google.co.jpが落ちるぐらいのトラフィックが来ない限りは、問題ないとまで言われています。
料金も非常に安く、うまく使えば課金額を1桁減らしてくれます。

## 注意点

* アクセス制御は使えない
* キャッシュに乗っている時間はベストエフォート
* キャッシュを明示的に消すことはできない

エッジキャッシュは、単純にキャッシュを返すだけで、ロジックを入れることはできません。そのため、アクセス制御はできません。
キャッシュの有効期限は設定できますが、その時間まで必ずキャッシュが生存している保証はありません。また、キャッシュを明示的に削除するAPIはありません。

## 使用感

きめ細やかなコントロールできないけど、安価でキャパシティがでかいのが、GCPのエッジキャッシュです。そのため、誤ったものがキャッシュされるのが怖い場合は、有効期限を数秒程度にしておくと良いでしょう。それでも、同時接続数が多ければ、かなりのトラフィックをキャッシュでさばいてくれます。


# エッジキャッシュを利用できるサービス

エッジキャッシュは以下のサービスで利用可能です。

* Google App Engine
* Google Compute Engine
* Google Cloud Storage

## App Engineでエッジキャッシュを利用する

App Engineでエッジキャッシュを利用する方法は2つあります。

### cache-control header

APIのReponseにcache-control headerを付けることで、Responseをエッジキャッシュに乗せることができます。

この機能を使えば動的生成されたResponseでもエッジキャッシュに乗せることができます。
QueryStringも含めたURLでキャッシュに乗るため、検索条件がQueryに乗っていても、まるごとキャッシュしてくれます。
QueryStringが異なればOriginalを取りに行くため、?time={epoch time}などにすれば、キャッシュを避けてOriginalを取りに行くこともできます。

```java
protected Navigation run() throws Exception {
		response.setHeader("cache-control", "public, max-age=3");
		response.setContentType("text/plain");
		response.getWriter().println("hello edge cache!");
		response.flushBuffer();
		return null;
	}
```

### static-files setting

AppEngineには元々エッジキャッシュ以外に、static resouceを乗せるstatic serverが存在します。
static serverに乗せるためには、appengine-web.xmlに設定を記入します。
この設定を入れると、static serverに乗るだけでなく、エッジキャッシュにも乗せてくれます。

```appengine-web.xml
<static-files>
  <include path="/**.*"/>
</static-files>
```

上記の設定はexpiratinを指定していないので、defaultに従い10minになります。
値を変更したい場合は、expirationを指定します。

```appengine-web.xml
<static-files>
  <include path="/**.png" expiration="4d 5h" />
</static-files>
```

細かい指定については、[Document](https://cloud.google.com/appengine/docs/java/config/appconfig#Java_appengine_web_xml_Static_cache_expiration)を参照してください。

## Compute Engineでエッジキャッシュを利用する

[HTTP(S) LB](https://cloud.google.com/compute/docs/load-balancing/http/)と[Cloud CDN](https://cloud.google.com/cdn/docs/) を利用する

```
gcloud compute backend-services update [BACKEND_SERVICE_NAME] --enable-cdn
```

## CloudStorageでエッジキャッシュを利用する

CloudStorageでpublicなobjectについては、defaultで3600secのCache-Controlが設定されるようになっている。
そのため、publicにしてさえいれば、特に何もしなくても、エッジキャッシュは利用される。
設定を変えたいのであれば、FileUpload時に、ResponseHeaderにCache-Controlを付けるように指定する。

例えば、以下の様に行う。

```bash
gsutil -h "Cache-Control: public,max-age=3" cp -r {your src} gs:{your bucket name}/{your dest}
```

以下でもエッジキャッシュについて、言及されているので参考にどうぞ。

[静的ファイルの配信を Google Cloud Storage に移行しました](http://blog.hidekiy.com/2014/05/google-cloud-storage.html)

また、CloudStorageのACLについては、[こちら](http://qiita.com/sinmetal/items/3b70f09c3d4b61704a1a)にも書いてます。
kortestw


条件によって処理を変えたいとき、maskで挙動を変えるのも良いですが、maskしても命令は実行されるので、SIMD内で全部条件結果が同じだった場合は、片方の処理が完全に無駄になります。


そういうときは、SIMDの処理中でも、if文で分岐したくなります。


kortestw は、マスクレジスタの値をeflagsに持ってくる命令です。
ふたつのマスクレジスタに含まれる全32bitをorして、0ならeflags の ZFが立ちます。ふたつのマスクレジスタをorした16bitが0xffffだった場合、CFが立ちます。


これで、ベクタの全要素で条件が成立しないような場合を分岐で飛ばすことができるようになります。

```cpp
#include <immintrin.h>
#include <stdio.h>

float in0[16] = {1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1};
float in1[16] = {1,1,1,1,1,0,1,1,0,1,0,1,1,0,1,1};
float in2[16] = {0};
int a;

static void
testc(float *p)
{
    __m512 v0 = _mm512_loadu_ps(p);
    __m512 v1 = _mm512_set1_ps(1);

    __mmask16 test0 = _mm512_cmp_ps_mask(v0, v1, _CMP_EQ_OQ);

    if (_mm512_kortestc(test0,test0)) {
        puts("全部1だよ.");
    } else {
        puts("1じゃないのが有るよ.");
    }
}

static void
testz(float *p)
{
    __m512 v0 = _mm512_loadu_ps(p);
    __m512 v1 = _mm512_set1_ps(1);

    __mmask16 test0 = _mm512_cmp_ps_mask(v0, v1, _CMP_EQ_OQ);

    if (_mm512_kortestz(test0,test0)) {
        puts("1が無いよ.");
    } else {
        puts("1が有るよ.");
    }
}

void
test(float *p)
{
    for (int i=0; i<16; i++) {
        printf("%.0f, ", p[i]);
    }
    puts("");
    testc(p);
    testz(p);
}

int
main()
{
    test(in0);

    test(in1);

    test(in2);

}
```

```
 $ ./sde  -- ./a.out  
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
全部1だよ.
1が有るよ.
1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 
1じゃないのが有るよ.
1が有るよ.
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
1じゃないのが有るよ.
1が無いよ.
```

ただ、GCCだと、この例のように両オペランドが同じ値だと、普通に or, cmp 命令になってしまうようです。


```cpp
#include <immintrin.h>
#include <stdio.h>

float in0[16] = {1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1};
float in1[16] = {1,1,1,1,1,0,1,1,0,1,0,1,1,0,1,1};
float in2[16] = {0};
int a;

int
main()
{
    __m512 v = _mm512_set1_ps(1);
    __m512 v0 = _mm512_loadu_ps(in0);
    __m512 v1 = _mm512_loadu_ps(in1);

    __mmask16 test0 = _mm512_cmp_ps_mask(v, v0, _CMP_EQ_OQ);
    __mmask16 test1 = _mm512_cmp_ps_mask(v, v1, _CMP_EQ_OQ);

    if (_mm512_kortestc(test0,test1)) {
        a = 10;
    }
}
```

これだとkortestwになるようですが…

どっちが良いのかは実機がどうなってるかわからないとなんとも言えないですね。(まあGCCのコスト判定作ってるの多分intelの人だからGCCが正しいと思うけど)


明日は @tanakmura が vfpclassps について書きます。
型ごとのゼロ値まとめ

こんにちは、[@Solpha](https://twitter.com/solpha)です。

これまでGoでプログラミングをする際、以下のように変数宣言時に型を指定していましたが、このあと変数に値を入力（初期化）しなかったらどう扱われるのかをまとめてみました。

```
<sample>
var suuzi int --> int型
var mozi string --> string型
```

#ゼロ値まとめ表
|型|ゼロ値|
|:--|--:|
| boonlean  | false |
| int       | 0 |
| float     | 0.0 |
| string    | ""(空文字) |
| pointer   | nil(他言語でいうnullなど) |
| function  | nil(他言語でいうnullなど) |
| interface | nil(他言語でいうnullなど) |
| slice     | nil(他言語でいうnullなど) |
| channel   | nil(他言語でいうnullなど) |
| map       | nil(他言語でいうnullなど) |

#所感

- 詳しくは本家[golang.org](https://golang.org/ref/spec#The_zero_value)に書かれています
- まとめてはみたものの、今の知識でゼロ値を活用するシーンが全く浮かびません(´∀｀；A
pdf-toolsを入れる


大学の課題がPDFで渡されるのでEmacsで見ながらC言語かけたらいいなーって思ってpdf-tools入れたら時間かかったのでメモ。

# 環境
OSX Yosemite
バージョン 10.10.1

# 入れてみる
[Github:axot/pdf-tools](https://github.com/axot/pdf-tools)
を参考にしつつpdf-tools入れようとしたらコケた

依存関係にあるものをHomebrewで入れていざコンパイル

...
...
...

poppler周りでコケる。

```
export PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig
```
上のコマンドで解決するらしいので、再びコンパイル

```
$ cd /path/to/pdf-tools
$ ./autogen.sh
(省略)
$ ./congiure
(省略)
$ make
Making all in src
/Applications/Xcode.app/Contents/Developer/usr/bin/make  all-am
gcc -DHAVE_CONFIG_H -I.    -I/usr/local/Cellar/glib/2.42.1/include/glib-2.0 -I/usr/local/Cellar/glib/2.42.1/lib/glib-2.0/include -I/usr/local/opt/gettext/include  -D_REENTRANT -I/opt/X11/include/cairo -I/opt/X11/include/pixman-1 -I/opt/X11/include -I/opt/X11/include/freetype2 -I/opt/X11/include/libpng15 -I/opt/X11/include -I/usr/local/Cellar/poppler/0.29.0/include/poppler/glib -I/usr/local/Cellar/poppler/0.29.0/include/poppler -I/usr/local/Cellar/glib/2.42.1/include/glib-2.0 -I/usr/local/Cellar/glib/2.42.1/lib/glib-2.0/include -I/usr/local/opt/gettext/include  -I/usr/local/Cellar/poppler/0.29.0/include/poppler  -w -g -O2 -MT epdfinfo.o -MD -MP -MF .deps/epdfinfo.Tpo -c -o epdfinfo.o epdfinfo.c
In file included from epdfinfo.c:33:
./epdfinfo.h:121:13: error: conflicting types for 'poppler_annot_set_rectangle'
extern void poppler_annot_set_rectangle (PopplerAnnot*, PopplerRectangle);
            ^
/usr/local/Cellar/poppler/0.29.0/include/poppler/glib/poppler-annot.h:189:31: note:
      previous declaration is here
void                          poppler_annot_set_rectangl...
                              ^
epdfinfo.c:1887:44: error: passing 'PopplerRectangle' (aka 'struct
      _PopplerRectangle') to parameter of incompatible type 'PopplerRectangle *'
      (aka 'struct _PopplerRectangle *'); remove *
      poppler_annot_set_rectangle (pannot, *area);
                                           ^~~~~
/usr/local/Cellar/poppler/0.29.0/include/poppler/glib/poppler-annot.h:190:29: note:
      passing argument to parameter 'poppler_rect' here
  ...PopplerRectangle *poppler_rect);
                       ^
2 errors generated.
make[2]: *** [epdfinfo.o] Error 1
make[1]: *** [all] Error 2
make: *** [all-recursive] Error 1
```

エラーが大量(涙目)

仕方なくネットの海を彷徨うこと数時間...

解決方法を見つけました

[ここ](https://gist.github.com/akermu/c3f0a3a1a7d2ee88b7c1)を参考にファイルを編集

そしたら無事にコンパイル通りました。一件落着。

PDF表示できるようになりました。
ただ、pdf-misc-auto-fit-minor-modeが上手く動作しないようでウィンドウサイズにPDFが合わされず、ウィンドウ分割すると見難い(悲しい)
素の JavaScript でグローバル汚染しない２つの方法

特に目新しい話ではないのですが、JavaScript で名前空間を汚染せずにライブラリ的な機能を追加したい場合のやり方２種類をまとめました。

基本的な考え方は、「自分用の名前空間を作ってそこにぶら下げる」です。

* サーバサイドの話ではなく、ブラウザからの利用が前提です。
* 「クラス」などの用語は JavaScript での説明としては正確ではないものの、Java の世界の住人としてわかりやすいものを使っています。

# クラスとして提供

使う側が１ページ内で複数のオブジェクトを生成(new)する場合。

例えば以下のようなものの場合。

* オレオレDate型
* ページ内の複数の部品（例では動画プレーヤー）の制御

## 作り方（要するにJavaScriptでのクラスの作り方）
```javascript:player.js
if (typeof myutil === 'undefined') {
  var myutil = {};
}
if (typeof myutil.Player  === 'undefined') {
  // この関数が Player クラスのコンストラクタになる。
  myutil.Player = function(_divName) {
    // インスタンス毎に持つ変数はここで this.xx として宣言する。thisは対象オブジェクト自身
    this.player = window.document.getElementById(_divName);
  };

  // クラスの関数はコンストラクタ外で Player.prototype.xx に追加
  // コンストラクタ内にこの関数を書いてしまうと new のたびに生成されてしまう
  myutil.Player.prototype.play = function() {
    this.player.play(); // thisは対象オブジェクト自身
  };
}
```


## 使い方
```html:player.html
<head>
  <script type="javascript" src="player.js"></script>
</head>
<body>
  <video id="player1" width="360" height="240"><source src="1.mp4" type="video/mp4" /></video>
  <video id="player2" width="360" height="240"><source src="2.mp4" type="video/mp4" /></video>
  <script type="javascript">
    var myplayer1 = new myutil.Player("player1");
    var myplayer2 = new myutil.Player("player2");
    myplayer1.play();
    myplayer2.play();
 </script>
</body>
```


# シングルトンオブジェクトとして提供

一つのページ内に複数のインスタンスが不要なものはこちらの方法で作ります。

向いているもの

* jQuery などのユーティリティライブラリ
* メニューなど画面全体の制御を行うもの

## 作り方
```js:menu.js
if (typeof myutil === 'undefined') {
  var myutil = {};
}
if (typeof myutil.Menu  === 'undefined') {
  // シングルトンは無名関数をその場で呼び出す形で定義できる
  myutil.Menu = (function() {
    // 公開オブジェクト以外は var で宣言し無名関数のスコープの中に隠す
    var items  = [];

    var show = function(menuType) { // function show(menuType) { ... でも同じ
      document.getElementById('menu').innerHTML = '' + items.length + ' items';
    };

    // 公開するものだけをプロパティに持つ Object を生成して return する
    return {
      "show" : show,
      "addItem" : function(item) { items.push(item); } // 短いものはここに書いても良いかも
    };
  }()); 
}
```

## 使い方

```html:menu.html
<html>
<head>
  <script type="text/javascript" src="menu.js"></script>
</head>
<body>
  <div id="menu" width="200" height="50">0 items</div>
  <script type="text/javascript">
    myutil.Menu.addItem('1');
    myutil.Menu.show();
  </script>
</body>
</html>
```
Macのターミナルが地味に便利になるコマンドとショートカット数点

ターミナルで使えるショートカットやコマンドです。
初めて知った時に、｢もっと早く知っておけば｣と思ったのをまとめてみました。

#過去のコマンドを検索【control+r】
ターミナルで過去のコマンドを検索してくれるショートカットです。
これで過去のコマンドを探すために↑を連打する日々からおさらばできます。
control+rと打つと検索モードになるので、そこで文字列を入れると過去のコマンドから検索してくれます。

#カーソルのフォーカス以前の文字を消す【control+u】
これはターミナルでフォーカスより前の文字列を消してくれます。
これは長いコマンドを消すためにback spaceを押しっぱなしにする事から開放してくれます。
逆にフォーカスより後ろの文字列を消すには【control+k】
あとはフォーカス前の1単語を消すには【control+w】、コマンドのオプションだけ削りたいって時に大活躍します。
フォーカスより後ろの1単語を消すには【Esc+d】、便利ですけど地味に押しにくいです。

#現在コマンドで開いている場所をFinderで開く【open .】
openコマンドはFinderを開いてくれるコマンドです。
open .と打てば現在のディレクトリを開いてくれます。
カレントディレクトリにデスクトップから画像をコピーしたいけどmvコマンド打つのもちょっとだるい。。。 って時とかに活躍してくれます。
あとは隠しフォルダの中身をFinderで表示したい時なんかは、ターミナルで隠しフォルダに入ってopen .でフォルダを開くと便利だったりします。
逆にFinderからターミナルを開くには[cd to..](http://staku.designbits.jp/install-cdto/)というアプリを使います。
Rubocop の構文チェックで "Avoid the use of Perl-style backrefs." と警告が表示される


正規表現を使用してマッチした部分文字列を返す際に、```$1, $2``` などを使用すると、Rubocop を使用して構文チェックした場合にデフォルトでは、```Avoid the use of Perl-style backrefs.``` と警告が表示される。

どうも Rubocop は 部分文字列の取得は ```Regexp.last_match[n]``` の使用を推奨しているみたいです。

https://github.com/bbatsov/ruby-style-guide#no-perl-regexp-last-matchers


デフォルトの設定ファイルを確認すると、
https://github.com/bbatsov/rubocop/blob/9b7c8b410d2c7711a91915e6bf251e0bae4c04a2/config/enabled.yml#L452

``` enabled.yml
Style/PerlBackrefs:
  Description: 'Avoid Perl-style regex back references.'
  StyleGuide: 'https://github.com/bbatsov/ruby-style-guide#no-perl-regexp-last-matchers'
  Enabled: true
```

とあるので、自分用の設定ファイル ``` .rubocop.yml ``` に

``` .rubocop.yml
Style/PerlBackrefs:
  Enabled: false 
```

を設定すれば、警告は消えました。
パスワードをDBに保存する時の基礎の基礎的なこと

# はじめに
あるところで軽く説明する必要ができたのでこの文書を書きます。

# 前提
PHPで簡単なシステムを作成している想定です。

# 大事なこと

## DBの中に、パスワードを生テキストのまま保存してはいけません！！
* なぜならDBのデータがなんらかの方法で盗まれてしまった場合に、パスワードが見た瞬間にわかってしまうからです。
* パスワードをあるところから取得して、その内容がわかると、同じユーザが別のサービスで同じパスワードを使っていれば不正アクセスできます（最近チラホラ話題にもなりました）。

## じゃぁどうしたらいいの？
* パスワードはなんらかの方法で暗号化してからDBへ保存します。
* また、パスワードを暗号化する際にSALTを利用することでそれぞれのユーザにとって別の暗号結果を作ることができます。
  * 佐藤さん（SALT:Stt41ou）で「mypassword」を暗号化した結果
  * 鈴木さん（SALT:6rkubel）で「mypassword」を暗号化した結果
  * 上記の2点の暗号化の結果が違う文字列になるということです。こうなっていれば暗号化ロジックの推測が困難になります。

## 暗号化したら、ログインの時どうやってチェックするの？
* 同じ暗号化ロジックを使えば同じ結果が返ってくることを利用します。
* ユーザが入力したパスワードを先に暗号化した方法と同じ方法（SALTも当然同一）で暗号化して、それからDB内で合致するデータを検索します。とにかくパスワードを平文で扱うことはありません。

## SALTはどうやって用意するの？
* 各ユーザごとに別々の値が作られるようにします。
* SALTが何かの情報で変換して作られる（例えばユーザーレコードの作成日時）ようにしたり、ランダムなSALTを作成してユーザーレコードに一緒に保存するなどが有りえます（保存しないと実際のログインの時に**同じ暗号化**が使えません）。

## 例えばどんな風になるの？雰囲気を知りたい。

例えば以下のようにms2satoさんに対してmypasswordで保存します。

```php
$user = 'ms2sato';
$password = 'mypassword';

$salt = createSalt(); //長い何かの文字列を作ります。
$encrypted_password = crypt($password, $salt); // 暗号化される（もっと強くしたければこれだけではダメですが、基本はcryptだと思います）

$insertSql = "insert into user(user_id, encrypted_password, salt) values (?, ?, ?)"
$stmt = $dbh->prepare($insertSql); //PDO利用していると思ってください。
$stmt->execute(array($user,$encrypted_password,$salt));
```

ログインでアクセスされたら下記のように同じ暗号化をしてからチェックします。

```php
$user = 'ms2sato'; //WEBからPOSTされてきたという想定
$password = 'mypassword'; //WEBからPOSTされてきたという想定

$selectSql = "select * from user where user_id = ?";
$stmt = $dbh->prepare($selectSql); //PDO利用していると思ってください。
$stmt->execute(array($user));

while ($data = $stmt->fetch(PDO::FETCH_ASSOC)){
  $salt = $data['salt'];
  $encrypted_password = crypt($password, $salt); //保存時と同じ暗号化

  // パスワードの一致を調べる
  if($data['encrypted_password'] == $encrypted_password){
    echo 'ようこそ！！';
  } else {
    echo 'ID・パスワードが不正です';
  }
}
```
atom + typescript の調査で何の成果も得られませんでした

# はじめに
* お時間に余裕のある方のみ下に進んで下さい。

# 経緯
### 「typescriptの導入記事でも書こうかな」
* 参考：　[TypeScript プログラミング - はじめに - インストール](http://docs.solab.jp/typescript/first/install/)

`npm i -g typescript`

```ts:hello.ts
class Greeter {
    private greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    public greet() {
        console.log("Hello, " + this.greeting);
    }
}
var greeter = new Greeter("TypeScript");
greeter.greet();
```

`tsc hello.ts`

「思ってたより導入簡単だ...」

### 「最近始めたatomとの連携でも調べてみようか」
* [typescriptシンタックスハイライト](https://atom.io/packages/language-typescript)
 * 良い感じだね
* [linterとか関数補完とか](https://atom.io/packages/atom-typescript-tools)
 * あれ、動かない...Windowsだから？（後日Macで試してみるか、仕方ない）
 * ※　紹介では以下のようなimgが貼り付けられています。非常に便利そう。

![ts_autocomplete.jpg](https://qiita-image-store.s3.amazonaws.com/0/59549/6482ab30-509c-4eeb-5aac-edc99ed78c94.jpeg)

### 「もっとこう、、、ビビっとくるものはないのか」
* これだ！ [datafueled/atom-shell-typescript-starter](https://github.com/datafueled/atom-shell-typescript-starter)
* 「cross-platformなデスクトップアプリを **TypeScript** で作れちゃうなんて素敵！」

```shell-session:error
$ git clone git@github.com:datafueled/atom-shell-typescript-starter.git
$ cd atom-shell-typescript-starter
$ ./script/bootstrap
Node: v0.10.26
npm: v1.4.3
Python: v2.7.9
Installing build modules...
gyp
gypnpm ERR! runas@1.0.1 install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the runas@1.0.1 install script.
npm ERR! This is most likely a problem with the runas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get their info via:
npm ERR!     npm owner ls runas
npm ERR! There is likely additional logging output above.
npm ERR! System Windows_NT 6.1.7601
.....
```

_虚しく出力されるエラーメッセージ、私はそっと瞼を閉じて ALT+F4 を押下した。_

# おわりに
* 何かレベルの高い記事ばかりなのに外れを混入させてしまって申し訳ございません。
* いい加減、Macを自宅に導入しようと思います。
npm プライベートモジュール (勝手翻訳)



> 以下は、[リニューアルされたnpmサイト](
https://github.com/npm/newww)で公開されている[npm private modules](https://www.npmjs.com/private-npm) の内容です。2015年初頭の公開ということですが、便利そうなので、発作的に翻訳してみました。

## プロプライエタリなコードも、簡単にパブリッシュ、共有、インストール

プライベートモジュールは普通のモジュールですが、あなたとあなたが選んだ人だけが、閲覧・インストール・パブリッシュできます。あなたは、自分のネームスペースあるいはチームのネームスペースで、パブリッシュすることができます。必要なのは `package.json` で名前を設定するだけです。

```json
{
  "name": "@myuser/mypackage"
}
```

これらは他のパッケージと同様、`npm publish` でパブリッシュすることができます。インストール時もネームスペースを指定すれば良いだけです。

```bash
$ npm install @myuser/mypackage
```

一旦インストールしたら、他のパッケージと同様に、名前で呼び出します。

```javascript
var mypackage = require('@myuser/mypackage');
```

### コードの再利用

複数のプロジェクト間で、あなたはコードを再利用しているでしょう。npmと(公開)レジストリは、世界中で便利なコードの小さなモジュールを、本当に簡単に共有できるようにします。ですが、パッケージの中のコードが、プライベートあるいはセンシティブだったり、単に公開するには特定の用途に特化しすぎたったりすることもあるでしょう。プライベートパッケージはそんなときに最適です。

### プロプライエタリなコードを共有する

チームの中で作業する、あるいはクライアントのために作業しているでしょう。npmの提供する依存管理とバージョン管理で、あなたの作業を簡単に共有したいはずです。誰が閲覧・インストール・パブリッシュできるかを簡単に細かく選択できるようにすることで、プライベートパッケージはこのことを容易にしています。