OmniAICreator/Qiita-1.07M huggingface dataset:
WindowsのFirefoxのフォントレンダリングをきれいにする

# 2018-07-04追記

Stylishという拡張機能を紹介していましたが、以下のようなニュースが発表されました。

[人気のFirefox拡張機能「Stylish」がポリシー違反でブロック、すべての閲覧履歴を収集か](https://forest.watch.impress.co.jp/docs/news/1131143.html)

代替となる拡張機能を使用することを推奨します。

# はじめに

Firefox Developer Editonを使用していて、以前、
[Firefox Developer EditionでMacTypeを有効にする](http://qiita.com/sambatriste/items/1752c3991391e795708c)
という記事を書きました。


バージョンアップを経て、いつのまにか、またもやMacTypeが効かなくなりました。
（現在のバージョンは`54.0a2 (2017-04-11) (64-bit)`です）

いろいろと調べるうちに、MacTypeを使わなくてもそこそこレンダリングが
きれいになる方法があるみたいだったので、試してみました。

## スクリーンショット

坊っちゃん（夏目漱石）
http://www.aozora.gr.jp/cards/000148/files/752_14964.html


### メイリオ

----

![meiryo.png](https://qiita-image-store.s3.amazonaws.com/0/91520/9ad4a304-7328-5773-040a-6753a45641a9.png)

### Migu 1C
----

![migu-1c.png](https://qiita-image-store.s3.amazonaws.com/0/91520/70cf7b8a-80ff-b12f-19eb-a28c804cc19c.png)

----
どうでしょうか？
なかなかきれいではないでしょうか。

# DirectWriteを有効にする

DirectWriteを有効にし、ClearTypeの設定を微調整すると、
かなり違和感がないところまでフォントがきれいになりました。


[Firefoxの設定をabout:configでなくuser.jsで変更する](http://qiita.com/sambatriste/items/cae36d147f07acfd61c4)
で書いたように、`about:config`ではなく`user.js`で設定変更します。

`user.js`に以下のように記載します。

```javascript
/***  coding: utf-8-unix ***/

// http://d.hatena.ne.jp/palm84/20140725/1406290403
user_pref("layers.acceleration.disabled", false);            // default: false
user_pref("layers.acceleration.force-enabled", true);        // default: false
user_pref("gfx.direct2d.disabled", false);                   // default: false
user_pref("gfx.direct2d.force-enabled", true);               // default: false

user_pref("gfx.font_rendering.cleartype.always_use_for_content", true);    // default: false
user_pref("gfx.font_rendering.cleartype_params.cleartype_level", 100);     // default: -1
user_pref("gfx.font_rendering.cleartype_params.pixel_structure", 1);       // default: -1
user_pref("gfx.font_rendering.cleartype_params.rendering_mode", 5);        // default: -1
user_pref("gfx.font_rendering.directwrite.enabled", true);                 // default: true
user_pref("gfx.use_text_smoothing_setting", true);                         // default: false 

user_pref("gfx.font_rendering.cleartype_params.enhanced_contrast", 200);   // default: -1
```

## 参考
- [Windows版 Firefox の DirectWrite を設定してフォントを見やすくしてみたけどいまいちかなぁ。orz](http://d.hatena.ne.jp/palm84/20140725/1406290403)

# Stylishでスタイルをカスタマイズする

上記設定でかなりきれいになるのですが、古い社内イントラシステムだと、MSゴシック、MS明朝などが使われていて、あまりきれいに表示されないことがあります。
（デフォルトよりだいぶましですが）

[Stylish](https://addons.mozilla.org/ja/firefox/addon/stylish/)というAdd-onを使うことで、スタイルを自分で変更することができます。

以下のようにしてスタイルを置き換えてきます。

```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("myintra.example.com") {

  body {
    font-family: "Meiryo";  /* MSゴシックをメイリオで置き換え */
  }
}
```

これで、良く使用するサイトだけ微調整していきます。

## 参考
- [Firefox - DirectWrite + Stylish で MacType 風フォント表示にしてみる](http://www.palm84.com/entry/20161208/1481192861)


# おわりに

がんばって調査すればまたMacTypeを使えるようになるかもしれませんが、
ブラウザはどんどんバージョンアップされていくので、今後のことも考えると、
素直にブラウザの機能でフォントをきれいにしたほうがいいと判断しました。
Windows起動時に

<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 基本的におれよう覚書デス\_(ˇωˇ」∠)_

# <i class="fa fa-windows" aria-hidden="true"></i> Windows起動時に(^o^)

Windows起動時にPageantとVagrantがUPしているといいと思わん？おもうしょ？？だしょ！！
前者はよくKeyの追加し忘れがある。
後者はコマンドプロント、苦手！！めんどう！！どーん！！

### 環境
<i class="fa fa-desktop" aria-hidden="true"></i> Windows 10 Home
シャットダウンの設定もしたかったけど・・・(´・ω・｀)察して
ふ、普段あんまシャットダウンしねーし、スリープだし・・・

※適度自分の環境用に・・・な(^o^)

### Pageant
1,ショートカットを作成
2,プロパティ>リンク先

```
C:\Users\[USERNAME]\[どこか]\pageant.exe "C:\Users\[USERNAME]\[どこか]\VVV.ppk" "C:\Users\[USERNAME]\[どこか]\AAA.ppk"
```
複数あれば半角スペースでだらだら

3,ショートカットを配置

```
C:\Users\[USERNAME]\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup
```

( ･\`ω･´)

### 自動Vagrant Up
1,作る

```:vagrant_up.bat
cd C:\Users\[USERNAME]\Vagrant\Centos7.3
vagrant up
exit
```

2,配置

```
C:\Users\[USERNAME]\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup
```

( ･\`ω･´)

### 半自動Vagrant Halt
1,作る

```:vagrant_halt.bat
cd C:\Users\[USERNAME]\Vagrant\Centos7.3
vagrant halt
exit
```

2,vagrant_halt.batをダブクリ

( ･\`ω･´)

### おわり

こんなことできるんだー(棒)

(*´ω｀)っ お疲れサン♪
OpenStreetMap のデザインをカスタマイズして GitHub Pages でオレオレタイルサーバーを公開する


![](https://www.evernote.com/l/ABUA2ZbTufNEApZ8SjRDxmvqvPLNzh9LPTUB/image.png)

個人的にやっている案件で、観光マップみたいなものをつくらないといけないシチュエーションがあって、タイルサーバーたてるのやだなーと思って色々調べたらスタティックなタイル画像をホストすればいいじゃんということに気がついて、GitHub Pagesでやってみました。

## サンプル

以下の URL でどうぞ。

https://madefor.github.io/static-tile-server/

地図用のタイル画像も含めて GitHub Pages でホストしています。

地図の元ネタは、TileMill というオープンソースの地図用のオーサリングソフトにサンプルでのっているものです。

https://tilemill-project.github.io/tilemill/


## 仕組み

* GitHub に `.mbtiles` フォーマットの地図データをコミット。
* Travis CI で `.mbtiles` をパースして、タイル画像を生成し、GitHub Pages としてプッシュ。

`.mbtiles` というのは、Mapbox という企業が開発した地図データを保存するためのオープンなフォーマットです。

https://www.mapbox.com/help/an-open-platform/

超簡単に説明すると地図を表示するための様々な情報を保存するためのファイル形式で、実態は SQLite なのでプラグラムからとても扱いやすいフォーマットになっています。これ発明した人まじに天才。

`.mbtiles` には、地図のタイル情報以外にも様々なメタデータが保存されています。

今回つくったものでは、JavaScript も生成しており、ズームレベルや地図の表示範囲、索引などもこのメタデータから読み込まれています。


## やりかた

以下のプロジェクトをフォークしてください。

https://github.com/madefor/static-tile-server


```
$ git clone git@github.com:madefor/static-tile-server.git
$ cd tile-server
```

つぎに、Python の pip で [mb-util](https://github.com/mapbox/mbutil) というツールをインストールしてください。

これは、`.mbtiles` をパースしてタイル画像を生成するのに必要です。

```
$ pip install mbutil
```

つぎに依存関係がある npm ライブラリをインストールしてください。

```
$ npm install
```

そしてビルド。これには少し時間がかかるはずです。

```
$ npm run build
```

ローカルで地図を見たい場合は、以下のコマンドを実行すると自動的にブラウザがたちあがって地図がひらくはず。

```
$ npm start
```


### 地図データの変更方法

地図データを変更するには、`open-streets-dc.mbtiles` というファイルを差し替えてください。

ファイル名が変わる場合には、 `gulpfile.js` 内でファイル名を指定していますのでそちらも修正してください。

それらが完了したら以下のコマンドで地図画像を生成してください。

```
$ npm run build
```

地図画像が生成されると、`tiles`というディレクトリ以下にタイル画像と `metadata.json` というファイルが生成されています。

その中の `id` の値をコピーして、`index.html` の中の地図を貼りつけたい要素の id 属性の値にペーストしてください。

```
<div id="open-streets-dc" style="width: 100%; height: 100%;"></div>
```


## この方法のメリット

* Google Map の利用規約等にしばられない。
* デザインが自由自在。
* スタティックな画像をホストするので高速に地図を配信可能。
* タイルサーバーが不要。
* オープンソースのエコシステムを活用できる。

## デメリット

* 大きな地図はむり。最大でも市町村単位ぐらいが限界です。
* そもそも `.mbtiles` を作るのが大変。
* GitHub や Travis CI などのファイルサイズ、ビルド時間などの制限に注意。

`.mbtiles` を作る部分はほんとにめんどくさくて、スタイルを修正するための環境作りも大変だし、それができあがったあとに `.mbtiles` フォーマットでダウンロードするのも市町村単位の地図なら数時間かかってしまいます。

いちおう Docker をつくったので、環境構築はちょっとはマシになりましたがそれでも大変ですね。。。

https://github.com/madefor/docker-tilemill

スタイルの変更作業時はベクタータイルベースでプレビューするようにして、そのあと Apache の `mod_tile` で構築した環境からタイル画像をかきあつめるみたいな開発環境を作ってみようかと思いますが、もし OSM 界隈の人がこの記事をみてこうしたらいいのでは？というアイディアがあればぜひ教えていただけるとうれしいです。
ローカルサーバ内でgit fetch 時にネットワークエラーが発生したときのメモ

#VirtualBoxで立ち上げてるローカルサーバ内でgit fetch 時にエラーが発生
エラー内容としては
>ssh: Could not resolve hostname github.com: Temporary failure in name resolution
fatal: The remote end hung up unexpectedly

対応としては

>service httpd restart
>service network restart

か、ちょっと乱暴だが

>reboot

で解決。

同様のネットワークエラーに遭遇してる方が多いようで、スリープ状態にはいったときにネットワークがきれたのが原因なのか・・・。


※原因をご存知の方いらっしゃいましたら、ご教示おねがいします。
Tier について調べた

https://www.quora.com/Is-there-any-free-SQL-Server-hosting-available
を読んでいて見つけた用語「free tier」

> Sadly, Azure doesn't offer a free tier anymore unless you sign up for the trial, 

tierとは何か?
調べたところ見つけたのは以下。

https://www.backstore.jp/blog/2016/10/06/cloud_backup_security_datacenter/
> Tier レベルはアメリカの民間団体（Uptime Institute）が作成したものです。データセンターの信頼性を表す基準として最も有名なものです。
レベルは1から4まであり、数字が大きいほど信頼性が高いとされています。

http://www.fujitsu.com/jp/products/software/partners/partners/networker/tier/
> Tier（ティア）とは、ソフトウェア製品を導入するハードウェアを、規模（グレードやCPUの数）に応じて階層分けしたものです。 

https://aws.amazon.com/free/?nc1=h_ls
のページは「AWS Free Tier」であり、一方で[その日本語ページ](https://aws.amazon.com/jp/free/)では「無料のクラウドサービス」という表記になっている。

http://its.virginia.edu/hosting/pricingmenu.html
Storageに関してTier1からTier4まである。
Tier1が一番価格が高く、上記の「レベルは1から4まであり、数字が大きいほど信頼性が高いとされています。」とは反対の使い方になっている。
Androidでジョイスティックを作ってみた

# はじめに
Android のゲームで使えそうなジョイスティックコントローラーを作って、気がついたことの個人的備忘録です。

後日、作り方についてまとめようと思っています。

# サンプル

デモ
[<img width=500 src="https://gyazo.com/e7bf29df65aa4598fc232cf7ba30823e.png" />](https://youtu.be/r_naWEuOQz8)

GitHub
[rild/android-joystick-test](https://github.com/rild/android-joystick-test)

# 気付き
「コントローラーを作ってみる」 ことは学習に結構いいのではないかなと感じた。

- イベントハンドリング
    - 関連してスレッド、ハンドラ
- 描画
    - SurfaceView を使った描画
    - Bitmap の扱い (メモリの扱い）
- リソースファイルの読み込み時間

このあたりについて、学びが多かった。

参考元のコードを活用しつつ、イベントの種類を増やしたり、
反応速度をあげたりしていたら結構改変されていた。

# 参考
- [[Android Code] JoyStick Controller](http://www.akexorcist.com/2012/10/android-code-joystick-controller.html)
- [Detecting a long press with Android](http://stackoverflow.com/questions/7919865/detecting-a-long-press-with-android)
- [GitHub: zerokol/JoystickView](https://github.com/zerokol/JoystickView)
Firefoxの設定をabout:configでなくuser.jsで変更する



# はじめに

Firefoxの細かい設定を変更する場合、`about:config`を使用しなければならない場合があります。
この場合、関連する項目をいくつも変更したり、再起動したりして、
一体何の項目を修正したのか、どの変更が有効だったのかよくわからなくなることがあります。

`about:config`を直接修正するのではなく、`user.js`というファイルを使用することで
これらの問題点を回避することができます。

## 参考

- [mozillaZine - User.js file](http://kb.mozillazine.org/User.js_file)

# 置き場所

プロファイルディレクトリ直下に配置します（pref.js等があるディレクトリです）。
Windowsであれば`%APPDATA%\Mozilla`配下にあります。

※プロファイルディレクトリがどこかわからない場合は、[プロファイルの探し方](https://support.mozilla.org/ja/kb/profiles-where-firefox-stores-user-data#w_cucgciaaacceagscauii)を参照

## 例

    C:\Users\hogehoge\AppData\Roaming\Mozilla\Firefox\Profiles\abcdefg.dev-edition-default\user.js


# 書き方

以下のように、JavaScriptとして記述します。
`user_pref`関数を使って設定を行います。

```js
user_pref("layers.acceleration.disabled", false);            // default: false
user_pref("layers.acceleration.force-enabled", true);        // default: false
user_pref("gfx.direct2d.disabled", false);                   // default: false
user_pref("gfx.direct2d.force-enabled", true);               // default: false
```

ファイルエンコーディングは*UTF-8*にしておきます。

# 有効化

ファイルを配置してブラウザを起動すると、`user.js`に記載した設定が反映されています。
`about:config`で確認できます。

# おわりに

中身はJavaScriptなので、コメントでメモを記載することもできます。
また、テキストファイルなので、バージョン管理も簡単です。
環境を引越しするときも、ファイルをコピーするだけで、いいことづくめです。
Python3のマルチプロセスPoolのメソッドはimap_unorderedを使うべし

Python3のマルチプロセスPoolのメソッドが沢山あってどれを使えばいいのか分からなかったので調べました。

#map関数
map関数は全ての結果が出るまでブロックします。

コードを実行してみると

```py3:map.py
from multiprocessing import Pool
from time import sleep
import time

start = time.time()

def do(waitTime):
    print("do waitTime:{} 開始から{}秒経過".format(waitTime,time.time() - start))
    sleep(waitTime)
    return waitTime
 
if __name__ == '__main__':
    waitTimes = [3,2,1]
    with Pool(10) as p:
        for result in p.map(do,waitTimes):
            print("result waitTime:{} 開始から{}秒経過".format(result,time.time() - start))
```
結果は

```
do waitTime:3 開始から0.03541707992553711秒経過
do waitTime:2 開始から0.03555130958557129秒経過
do waitTime:1 開始から0.03568387031555176秒経過
result waitTime:3 開始から3.0372514724731445秒経過
result waitTime:2 開始から3.0373241901397705秒経過
result waitTime:1 開始から3.037338972091675秒経過
```

`for result in p.map(do,waitTimes):`行の戻り値はlist型で**すべてのプロセスが終了するまでfor文は実行されません**

#imap関数
imap関数はmap関数の遅延評価版です。imap関数の戻り値はイテレータを返します。戻り値が確定したプロセスがあれば他のプロセスの完了を待たずにfor文を実行できます。しかし、渡した順番と同じ順番で返さなければならない制約があるために最初のプロセスが終了しなければ、他の処理が終了していてもいつまでたってもfor文が実行されません。

```py3:imap.py
from multiprocessing import Pool
from time import sleep
import time

start = time.time()
 
def do(waitTime):
    print("do waitTime:{} 開始から{}秒経過".format(waitTime,time.time() - start))
    sleep(waitTime)
    return waitTime
 
if __name__ == '__main__':
    waitTimes = [3,2,1]
    with Pool(10) as p:
        for result in p.imap(do,waitTimes):
            print("result waitTime:{} 開始から{}秒経過".format(result,time.time() - start))
```


```
do waitTime:3 開始から0.03740239143371582秒経過
do waitTime:2 開始から0.03748369216918945秒経過
do waitTime:1 開始から0.0376131534576416秒経過
result waitTime:3 開始から3.041029930114746秒経過
result waitTime:2 開始から3.041118621826172秒経過
result waitTime:1 開始から3.0411417484283447秒経過
```

#imap_unordered関数
イテレーターが返す結果の順番が任意の順番で良いと見なされることを除けば imap() と同じです。 


```py3:imap.py
from multiprocessing import Pool
from time import sleep
import time

start = time.time()
 
def do(waitTime):
    print("do waitTime:{} 開始から{}秒経過".format(waitTime,time.time() - start))
    sleep(waitTime)
    return waitTime
 
if __name__ == '__main__':
    waitTimes = [3,2,1]
    with Pool(10) as p:
        for result in p.imap_unordered(do,waitTimes):
            print("result waitTime:{} 開始から{}秒経過".format(result,time.time() - start))
```

```
do waitTime:3 開始から0.03511857986450195秒経過
do waitTime:2 開始から0.035273075103759766秒経過
do waitTime:1 開始から0.035429954528808594秒経過
result waitTime:1 開始から1.0369133949279785秒経過
result waitTime:2 開始から2.0377516746520996秒経過
result waitTime:3 開始から3.038750171661377秒経過
```
おおうっ！処理が完了したプロセスがあれば他の処理を待たずに実行されています!

#まとめ
Python3のマルチプロセスPoolのメソッドはimap_unorderedを使うべし
[git]ファイル名を大文字から小文字に変えた時に困ったこと

#今回起きたこと
とあるプロジェクトで画像の名前を変更したくて、大文字から小文字に修正してgitにpushした。
```
Test.png → test.png
```
が、しかし
差分が表示されなかった。

##解決法
ターミナルで
```
git config core.ignorecase false
```
を実行すれば大文字から小文字にしても差分が表示されるようになった！！

##まとめ
.gitディレクトリの中のconfigファイルに
```
ignorecase = true
```
と記述されており
これは、ファイル名の大文字・小文字の変更は検知しない設定になっており
これをfalseにすることで解決した。
AWS CodeDeploy 導入調査 アプリ側編

[AWS CodeDeploy 導入調査 AWS 設定編](http://qiita.com/ta_ta_ta_miya/items/7fc0e65cb89b367810dc) の続きになります

## 前回のあらすじ
- EC2 インスタンスを作った
- コードアップロード用の S3 Bucket を作った
- デプロイ用の IAM ロールを作った
- CodeDeploy アプリケーションを作った

今回はアプリ側の作業です.

## デプロイ先アプリ構成
Nginx - uWsgi を sudpervisord でプロセス監視
~~Nginx とか supervisord とかは割とどうでもいいのですが~~
サーバー構成はあらかじめ一通り作成しておきます.

さらに CodeDeloy-Agent をインストールしておきます.
http://docs.aws.amazon.com/ja_jp/codedeploy/latest/userguide/codedeploy-agent-operations-install.html


## とりあえずデプロイしてみる
ローカル -> S3 のアップロードは AWS-CLI を使用します.
ローカルプロジェクトのトップディレクトリで, 

```
$ aws deploy push --application-name <<app-name>> --s3-location s3://<<s3bucket-name>>/<<app-name>>.zip --source ./ --region <<region-name>>
```
を実行します.
```<<app-name>>``` は CodeDeploy で作成したアップケーション名です.

- --ignore-hidden-files オプションで隠しファイルを無視します.
- S3 にアップロードするファイル名は本当はなんでもいいです.
- 圧縮時の拡張子は tar.gz でもいけるはず.

アップロードに成功すると以下のように出力されます.

```
To deploy with this revision, run:
aws deploy create-deployment --application-name <<app-name>> --s3-location bucket=<<s3bucket-name>>,key=<<app-name>>.zip,bundleType=zip,eTag=<<eTag>>--deployment-group-name <deployment-group-name> --deployment-config-name <deployment-config-name> --description <description>
```

ただし今回は成功しないと思います.

## appspec.yml の作成
appspec.yml は CodeDeploy によるデプロイ作業を記述したものになります.
まずローカルプロジェクトのトップディレクトリに appspec.yml ファイルを作成し,

```
version: 0.0
os: linux
```
まで記述します. ここで, 
- version は appspec のシステムバージョンで2017/04現在 0.0 のみ有効です
- os はデプロイ先 EC2 インスタンスの OS 種類で windows か linux かを設定します. linux ディストリビューションまで指定する必要はありません.

次に, 

```
files:
   - source: /
     destination: /usr/local/src
```
でファイル配置を設定します.
source はコードパスで appspec.yml があるディレクリの相対パスになります.
なので source: / とした場合はディレクリ構成そのままで EC2 インスタンスの
destination に配置されます.
特定のディレクリ/ファイルのみ配置先を変えたい場合は - source: destination の記述を追加することができます.

さらに, 今回は以下の設定を追加しました.

```
hooks:
  AfterInstall:
    - location: copy_settings.sh
      timeout: 180
      runas: root
    - location: pip_install.sh
      timeout: 180
      runas: root
  ApplicationStart:
    - location: reload_uwsgi.sh
      timeout: 180
      runas: root
```
hooks 以下では CodeDeploy ライフサイクルの各処理にフックしてスクリプトを実行させることができます.
http://docs.aws.amazon.com/ja_jp/codedeploy/latest/userguide/reference-appspec-file-structure-hooks.html

CodeDeploy-Agent は Ruby で記述されており, Ruby コード上で Shell スクリプトを実行します.
今回追加した処理は

- コード配置後に EC2インスタンス内に仕込んでおいた追加設定をコピー
- プロジェクト内の requirements.txt の内容で pip install
- アプリスタート時に uwsgi のリスタート

です. runas は各スクリプトの実行ユーザーです. 
今回は面倒だったので全て root にしました.

## デプロイに再度チャレンジ
ふたたび ローカル -> S3 のアップロード をやってみると今度は成功するはずです.
アップロードが成功したら次は AWS コンソールの CodeDeploy に移動します.

1. ダッシュボードでアプリケーションを選択して "アクション" -> "新しいリビジョンのデプロイ"
2. "アプリケーション", "デプロイグループ" はそのまま, "リビジョンタイプ" は Amazon S3
3. "リビジョンの場所" でアップロードしたソースコードを指定します.
4. その他はそのままで "デプロイ" でデプロイ開始します.

フックスクリプトでエラーにならなければデプロイは成功するはずです.

フックスクリプトでエラーになったので解決した内容は次回
AWS EC2 で Apacheリバースプロキシ設定（http→https）

## やること

```http://hogehoge.jp``` でアクセスした時に ```https://foobar.com``` の内容を表示させます。

## まずはwebサーバを用意

EC2のインスタンスは用意済み・接続済みの前提です。

### Apacheインストール
```
sudo yum install httpd -y
```
### とりあえず起動
```
sudo /etc/init.d/httpd start
```

Apacheを起動したらブラウザから確認してみます。　```http://hogehoge.jp```
Apacheのデフォルトページが表示されれば成功です。

## リバースプロキシ設定（http→https）

### mod_sslをインストール
Amazon Linuxではmod_sslがインストールされていないため必要な作業です。
http→httpのプロキシ設定ならこの手順は不要です。

```
sudo yum install mod_ssl -y
```

### confファイルを作成する
```
sudo vi /etc/httpd/conf.d/hogehoge.jp.conf
```
```
# リバースプロキシ設定
ProxyRequests Off
ProxyPass / https://foobar.com/
ProxyPassReverse / https://foobar.com/

# http→httpsに必要な設定
# http→httpのプロキシならこの設定は不要
RewriteEngine on
SSLProxyEngine on
RewriteRule ^(.*)$ https://foobar.com$1 [P]
```

### Apacheを再起動
```
sudo /etc/init.d/httpd restart
```
再起動後にプロキシされているかブラウザから確認してみます。　```http://hogehoge.jp```
同じURLですが、さっきとは違うページが表示されるはずです。
chef の deprecation warning への対処方法が書いてある場所

# 概要

chef 13 になって、いくつか今まで deprecated だったものが削除されたことによるエラーがでた。
その対処報を調べた

# 結論

以下にまとまっていた

* [Chef Deprecation Warnings — Chef Docs](https://docs.chef.io/chef_deprecations_client.html)

# 感想
ほかのバージョンになってもきっとここに書かれるのではないか？
Chrome Extentionでinlineのjavasciptが書けない

#ChromeExtentionでscriptタグを用いてinlineでjavascriptが書けない
表題の件でハマった。
実際、[ChromeExtentionのドキュメント](https://developer.chrome.com/extensions/content_scripts)には書いてあるのだが、メモしておきます。
以下のようなhtmlは、エラーで動きませんでした。

```html:popup.html
<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>PopupSample</title>
    <link rel="stylesheet" href="css/popup.css" type="text/css">
</head>

<body>
        <script>
        	function log(){
        		console.log("click");
        	}
        </script>
        <button type="button" onclick="log();">クリック</button>
</body>

</html>
```

```json:manifest.json
{
    "name": "Sample",
    "version": "1.0",
    "manifest_version": 2,
    "description": "sample",
    "content_security_policy": "script-src 'self'; object-src 'self'",
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": "images/sample_16.png"
    },
    "permissions": [
        "tabs"
    ],
    "icons": {
        "16": "images/sample_16.png",
        "48": "images/sample_48.png",
        "128": "images/sample_128.png"
    }
}
```

###ボタンを押した際に出力されたエラー
>Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.


##解決策
外にjsを切り出してHandlerを定義するとjavascriptを動かすことができます。

```html:popup.html
<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>PopupSample</title>
    <link rel="stylesheet" href="css/popup.css" type="text/css">
    <script src="popup.js"></script>
</head>

<body>
    <button type="button" class="btn">クリック</button>
</body>

</html>
```

```js:popup.js
function clickHandler(e) {
    console.log("click");
}

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.btn').addEventListener('click', clickHandler);
});
```
EC2で用意されているAMI、CentOS6とAmazonLinuxの挙動の違い

# 前置き

備忘録(ネタ？)です。
随時追加していきます。

# 本編

## 【ssh】初期ログインユーザーの違い

**AmazonLinux** ec2-user
**CentOS6** centos

## 【ssh/sftp】接続先の指定方法の違い

**AmazonLinux** グローバルIPアドレス(例: 50.X.X.X)
**CentOS6** DNS名(例: ec2-50-X-X-X.ap-northeast-1.compute.amazon.com)

## 【iptables】サービス稼働状況

**AmazonLinux** 停止
**CentOS6** 起動

CentOS6では、自動起動(chkconfig)もONに設定されています。

## 【nginx】初期confファイルの違い(※ あいまいです)

**AmazonLinux** virtual.conf
**CentOS6** ssl.conf, virtual.conf, default.conf


## 【SELinux】WEBサーバーで403エラー（nginx）

CentOS6の場合、「403 Forbidden」が出てました。
※ iptablesをOffにした影響などかもしれません。

## 【ImageMagick】挙動の違い

AmazonLinuxの場合、

* ImageMagick7の導入が難しく・・・
（●●●.so.5 ●●●.so.6 ●●●.so.2が見つからない！といったエラーが発生する）

* パーミッションエラーが発生するようになった(ローカルのファイルが読み込めない）

 * policy.xmlの「\<policy domain="coder" rights="none" pattern="MVG" />」を「read」にすると解決したが、真っ白い画像が出力される

 * テスト的にpolicy.xmlのpolicyタグを全てコメントアウトしたが、変わらず真っ白い画像が出力される 

 * 何らかのタイミングで、色もサイズもめちゃくちゃなjpgファイルに変換されることも・・・

## 【pdf2svg】ファイル変換結果の違い

AmazonLinuxの場合、一部のファイルはPDF内の画像が黒くなる（ことがあった）

# 何があったのか

本番環境はAmazonLinuxですが、:heavy_dollar_sign:の関係もあり、
エンジニアの開発はVagrant(CentOS6系)でやってました。

あまり使っているうえで大きな環境の差は感じられなかったのですが、
段々と上記の「pdf2svg」や「ImageMagick」のような挙動の違いに時間を取られるようになってしまった為

「CentOSに統一しよう！」

ということになりました（に、逃げてないし・・・）

# けつろん？

AmazonLinuxは、親切で個人的には凄く好きです。
ただ、やりこんで躓くと情報が(CentOSに比べて)少ないため、
場合によってはCentOS(など、日ごろ慣れているOS）を使うのも手だと思います。

Eenterprise版でなければ、料金も変わらないみたいですしね！
SVN リポジトリの特定のディレクトリから Git リポジトリを作る

SVN から Git に移行する際、ログを残したまま移行する場合に `git svn` コマンドを使うと思いますが、一つのリポジトリに複数のプロジェクトがディレクトリで分けて入っていたので特定のディレクトリの中身だけ取り出す必要がありました。

以下のように trunc, branches, tags にそれぞれ同じディレクトリ名を指定するとそのディレクトリ内から Git リポジトリを作成することができます。

```bash
git svn clone http://<サーバーのドメイン>/<リポジトリのパス> --trunk="<ディレクトリ名>" --branches="<ディレクトリ名>" --tags="<ディレクトリ名>" --username="<SVN のユーザー名>"
```
ラジオボタンをチェックすると、１行分の背景色を変更して、チェックが外れると元に戻したい

HTML

```html
<ul class="table-1">
            <li>
                <div class="table-1-left"><input type="radio" name="table1"><label class="table_txt-blue radio">テキスト1</label></div>
            </li>
            <li>
                <div class="table-1-left"><input type="radio" name="table1"><label class="table_txt-blue radio">テキスト２</label></div>
            </li>
        </ul>
        <ul class="table-2">
            <li>
                <div class="table-2-left"><input type="radio" name="table2"><label class="table_txt-blue radio">テキスト3</label></div>
            </li>
            <li>
                <div class="table-2-left"><input type="radio" name="table2"><label class="table_txt-blue radio">テキスト4</label></div>
            </li>
        </ul>
```

JavaScript

```js
$(function() {
    var $trList = $("li:has(input)"); //liでinputタグをもつものを取得
    $trList.each(function() { //取得したliタグそれぞれに処理を行う
        var $input = $(this).find("input");
        var $checkbox = $(this).find('input[type=checkbox]'); //checkboxを取得
        $(this).click(function() {
            if ($checkbox.prop('checked')) { //checkboxにcheckedがすでにある場合
                $checkbox.prop('checked', false); //checkedを外す
            } else {
                $input.prop('checked', true); //それ以外はchecked付与
                $input.closest('li').addClass('bc_checked'); //それ以外はbc_checkedクラス追加
            }
            $("input:not(':checked')").closest('li').removeClass('bc_checked');//checkedがないliのbc_checkedクラスを削除
        });
    });
});
```
参考
[テーブルの行()をクリックでinputをチェック](http://gomocool.net/gomokulog/?p=695)
Cake3 で IntegrationTestCase を使った Controller のテストで、ComponentをMockしたい

# 前提
・Cakephp 3.3 で IntegrationTestCase を継承したテストを実行する
・Component をどうしてもMockしたい

# 経緯
・以下のようなテストを書いたが、どうしても 独自AuthComponentのメソッドをモックしたくなった。

```php
class RFMatrixControllerTest extends IntegrationTestCase
{
    public function setUp()
    {
        parent::setUp();
        $this->configApplication(null, [CONFIG]);
    }

    public function test_テスト()
    {
        $this->get('/test');
        $this->assertResponseOk();
    }
}
```

# 解決方法
・IntegrationTestCase::get が呼ばれる直前に controllerSpy が呼ばれるので、このメソッドをOverideして、
　その中でComponentをMockしてやる

```php
class RFMatrixControllerTest extends IntegrationTestCase
{
    public function setUp()
    {
        parent::setUp();
        $this->configApplication(null, [CONFIG]);
    }

    public function controllerSpy($event, $controller = null)
    {
        parent::controllerSpy($event, $controller);

        if (isset($this->_controller)) {

            $componentRegistory = new ComponentRegistry($this->_controller);
            $MyAuth = $this->getMockBuilder('App\Controller\Component\MyAuthComponent')->setMethods(['identify', 'user'])->setConstructorArgs([$componentRegistory, []])->getMock();
            $MyAuth->expects($this->any())->method('identify')->will($this->returnValue(['email' => 'test@test.com']));
            $MyAuth->expects($this->any())->method('user')->will($this->returnValue(['email' => 'test@test.com']));

            $this->_controller->MyAuth = $MyAuth;
        }
    }

    public function test_テスト()
    {
        $this->get('/test');
        $this->assertResponseOk();
    }
}
```

以上です。

他になにか良さげな方法があったら誰か教えてください！！
RailsのCMS

ZOMEKI CMS
http://www.moongift.jp/2017/04/zomeki-rails%E8%A3%BD%E3%80%82%E5%9C%B0%E6%96%B9%E8%87%AA%E6%B2%BB%E4%BD%93%E5%90%91%E3%81%91%E3%81%AEcms/
Go 言語の型アサーションの型指定で interface を定義する場合の速度計測


# はじめに

* Go 言語で interface から他の型への変換をする型アサーションの際に interface 型をその場で指定することができるということを最近知った。

```go
out, ok := in.(interface {
  SomeFunc()
})
```

* 型制約をあえてゆるくしたいときに使える場合もあるかもしれないので、よくあるような事前に型を定義しておく場合と比べて遅くなったりしないのか計測してみる。

# テストコード

```go
package main

import "testing"

type struct1 struct {
}

func (s *struct1) Read() {
}

type interface1 interface {
  Read()
}

func func1(in interface{}) bool {
  _, ok := in.(interface1)
  return ok
}

func func2(in interface{}) bool {
  _, ok := in.(interface {
    Read()
  })
  return ok
}

func TestFunc1(t *testing.T) {
  s := &struct1{}
  if !func1(s) {
    t.Error("failed")
  }
}

func TestFunc2(t *testing.T) {
  s := &struct1{}
  if !func2(s) {
    t.Error("failed")
  }
}

func BenchmarkFunc1(b *testing.B) {
  s := &struct1{}
  for i := 0; i < b.N; i++ {
    func1(s)
  }
}

func BenchmarkFunc2(b *testing.B) {
  s := &struct1{}
  for i := 0; i < b.N; i++ {
    func2(s)
  }
}
```

# テスト結果

* 何回か実行してみて有意な差はなさそう

```
BenchmarkFunc1-4        100000000               13.2 ns/op
BenchmarkFunc2-4        100000000               13.7 ns/op

BenchmarkFunc1-4        100000000               12.4 ns/op
BenchmarkFunc2-4        100000000               12.2 ns/op

BenchmarkFunc1-4        100000000               12.4 ns/op
BenchmarkFunc2-4        100000000               12.5 ns/op

BenchmarkFunc1-4        100000000               12.2 ns/op
BenchmarkFunc2-4        100000000               12.7 ns/op
```
新たなenvを追加したときに出る ArgumentError に関して


こちらの記事を参考にいたしました。
http://qiita.com/yusabana/items/a1f4fe2c37b20db2a3f6

僕の場合、デフォルトのenvは以下がありました。

* test
* development
* staging
* production

ここに**local**というenvを追加したい！！！！
と思い、記事が見つかったので、参考にしていったのですが、 `rake aborted`が出ました。
記事を参考に

```
$ bundle exec rake db:create RAILS_ENV=local
```

まで終えた状態が前提条件です。
この次に、もちろんマイグレーションをしますよね。

```
$ bundle exec rake db:migrate RAILS_ENV=local
rake aborted!
ArgumentError: Missing required arguments: aws_access_key_id, aws_secret_access_key
・
・
・
・
・
Tasks: TOP => db:migrate => environment
(See full trace by running task with --trace)


```
エラーです。

途中から関わったプロジェクトだったので、接続先なんて知らないですし、database名追加していったらできるからって言われてやってたんですが、

```
ArgumentError: Missing required arguments: aws_access_key_id, aws_secret_access_key
```

こんなもんが出るから、ググりまくりました。
結局見つからなかったので、test, development, staging, productionが共通して入ってるファイルを漁ったら、原因発見。
`config/setting`配下にlocalだけ `yml`ファイルがありませんでした。
localとtestを同じように作っていったので、こちらもコピーして `local.yml`を作成。
無事、マイグレーションができました。

このエラーメッセージで検索した人の役に立ちますように…。
Docker の nginx オフィシャルイメージで http2 を有効にするには

# Docker の nginx オフィシャルイメージで http2 を有効にするには

タグ `nginx:alpine` を使えば良い(2017/04/13現在)

## 経緯

nginx で http2 を有効にするには、 nginx.conf に次のように書けば良いのだけれど、 `nginx:latest` を使って試してもうまくいかず、エラーも出ない。

```
server {
    listen       443 ssl http2;
    ...
```

nginx 自体は以前から http2 に対応しているが、それだけでは駄目で、 OpenSSL 1.0.2 が必要とのこと。  ところが `nginx:latest` のベースイメージの debian では、 OpenSSL 1.0.1t がインストールされているので、ベースイメージが更新されるまでは対応しないようだ。
`nginx:alpine` なら OpenSSL 1.0.2 系がインストールされており、http2 が使える。

## 参考

https://github.com/nginxinc/docker-nginx/issues/76
AWS CodeDeploy 導入調査 AWS 設定編

社内に CodeDeploy を導入できないか調査したので簡単にまとめます.
## 要件
- デプロイ先: EC2 インスタンス
- git ホスティングサービス は BitBucket
- pip でプライベートリポジトリのライブラリをインストールしなければならない

## AWS 側作業
### ソースコード用 S3 Bucket 作成
現在 CodeDeploy が直デプロイを対応しているホスティングサービスは github だけなので
それ以外はソースコードを zip 圧縮した上で S3 にアップする必要があります.
なのでとりあえず名前はなんでもいいので Bucket を作成します.
当然アクセス権限は非公開です(デフォルト非公開なので大丈夫かもしれませんが)

### デプロイ先 EC2 インスタンス作成
テスト用に EC2 インスタンスを t2.micro で作成しました.

### EC2 -> S3 アクセス用の IAM ロール作成
デプロイ時に EC2 が S3 からソースを取得するのでアクセスできる IAM ロールを作成しました.

ポリシーはテスト時に限って言えば以下の通りで. 
運用で導入する際はちゃんと設定しましょう.

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "s3:Get*",
                "s3:List*"
            ],
            "Effect": "Allow",
            "Resource": "*"
        }
    ]
}
```
ポリシーを作成したら,
"新しいロールの作成 "
-> ロールタイプに Amazon EC2 
-> ポリシーのアタッチで上で作成したポリシーをアタッチ 
-> ロール名を適当につけてロール作成完了です
EC2 インスタンスに作成したロールをアタッチしておきます.

### CodeDeploy サービスロールの作成
CodeDeploy 用のロールも必要なので作成しておきます.
先ほどと同様に, 
"新しいロールの作成 "
-> ロールタイプに Amazon CodeDeploy
-> ポリシーのアタッチに AWSCodeDeployRole
-> ロール名を適当につけてロール作成完了です

さらに作成したロールを選択して
"信頼関係"タブ
-> 信頼関係の編集
-> 

```
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "",
      "Effect": "Allow",
      "Principal": {
        "Service": [
          "ec2.amazonaws.com",
          "codedeploy.amazonaws.com"
        ]
      },
      "Action": "sts:AssumeRole"
    }
  ]
}
```
"Service" に "ec2.amazonaws.com" を追加します(必要そうな気がするんですが不要かも)
-> "信頼ポリシーの更新" で完了

### CodeDeploy にアプリケーション作成
CodeDeploy でデプロイ対象のアプリケーション設定を作成します.

- "デプロイタイプ"はインプレースと Blue/Green デプロイが選択できますがお試しなので今回はインプレースを選択しました.
- "インスタンスの追加" に作成しておいた EC2 インスタンスを登録
- "詳細設定" は今回そのままで
- "サービスロール" に "CodeDeploy サービスロールの作成" で作成したロール ARN を設定
- "アプリケーションの作成" で完了

AWS 側の設定は以上になります.
アプリ側設定は[次回](http://qiita.com/ta_ta_ta_miya/items/89d53d06bfc6ce967501)
Swift3で多次元配列の値をjsみたいに 変数++で一個づつ取得したい

 [財布の中がだらしなくてかなしいです](http://off.tokyo/blog/2017/04/13/swift3-get-multidimensional-array-like-a-javascript/)

# さて


下記の例では、それぞれ二つの値を持つ二階層の多次元配列が定義されています。一階層目の配列には ` 1 ` と `2 `が定義されていて、二階層目の配列には `3`と`4`が定義されています。

この多次元配列に反復処理をかけて、それぞれの配列の`index1`を順番に取りたいと思いました。要は`2 `と`4`だけ順番に取りたいってことです。swift３でインクリメントが無くなって、不便な気持ちになりました。

# 実装

```swift

//関数forEachを使う
var array:[[String]] = [["1","2"] ,["3","4"]]

(0 ..< array.count).forEach { (numm) in
                        
print( "array番号は" + array[numm][1])
}

//array番号は2
//array番号は4
```

# 多次元配列の取得した値を新しい通常arrayに格納したければ

```swift
var array:[[String]] = [["1","2"] ,["3","4"]]
var newValues : [ String ] = []


(0 ..< array.count).forEach { (numm) in
                       
//print( "array番号は" + array[numm][1])

newValues.append( array[numm][1])
                        
print("newValuesは")
print(newValues)
                        
}


//newValuesは
//["2"]
//newValuesは
//["2", "4"]

```
Mastodon のクライアントアプリを .NET Core で作ってみた

Mastodon という「自由で」「オープンソースな」（Twitter のような） SNS がなんか流行りだして、もともとあった [mastodon.cloud](https://mastodon.cloud/) や [@nullkal](https://twitter.com/nullkal) 氏が立てたインスタンス [mstdn.jp](https://mstdn.jp/) に日本人が多くあつまって祭りみたいになってる。

* [ASCII.jp：Twitterのライバル？　実は、新しい「マストドン」（Mastodon）とは！｜遠藤諭のプログラミング＋日記](http://ascii.jp/elem/000/001/465/1465842/)

API ももちろんあって、 .NET 製の APIライブラリもあった。 @kagasu さん :ok_hand:

<blockquote class="twitter-tweet" data-lang="ja"><p lang="tl" dir="ltr">glacasa/Mastonet: C# Library for Mastodon<a href="https://t.co/BwR9n1Eqbd">https://t.co/BwR9n1Eqbd</a></p>&mdash; ♣ ♥ ♠ ♦🍍 (@kagasu) <a href="https://twitter.com/kagasu/status/852206484347912192">2017年4月12日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

で、試しにこの「[Musto.NET](https://github.com/glacasa/Mastonet)」を使って、 mastodon.cloud の連邦？タイムラインを表示するだけのコンソールアプリを作ってみた。

* [amay077/MastoConsoleNetStandard: Mastodon クライアントのサンプルコンソールアプリ for .NET Standard](https://github.com/amay077/MastoConsoleNetStandard)

API はとってもシンプルで、次のような単純なコードでTOOTのストリーミング受信ができる。

```csharp
static async void RunAsync(string email, string password)
{
    var instanceUrl = "mastodon.cloud";

    // MastodonClient.CreateApp で得たものを保存しとく必要があるけど面倒だから UnitTest(MastodonClientTests)のを使わせてもらった
    //var appRegistration = await MastodonClient.CreateApp(instanceUrl, "MastoConsoleStandard", Scope.Read);
    var appRegistration = new AppRegistration 
    {
        ClientId = "ぎっはぶをみてね",
        ClientSecret = "ぎっはぶをみてね"
    };

    var client = new MastodonClient(instanceUrl, appRegistration);
    var auth = await client.Connect(email, password);
    var streaming = client.GetPublicStreaming();

    // Register events
    streaming.OnUpdate += (_, e) =>
    {
        Console.WriteLine("--");
        Console.WriteLine($"{e.Status.CreatedAt.ToLocalTime().ToString()} - {e.Status.Account.AccountName}:");
        Console.WriteLine(e.Status.Content);
    };

    // Start streaming
    streaming.Start();
}
```

アプリは、まず mastodon のインスタンスに``MastodonClient.CreateApp``で「アプリを登録」して、``AppRegistration``を得る必要がある。
これは実際には ``ClientId`` と ``ClientSecret`` で、一度登録したら保存して使う。
mastodon の既定の実装では、特に制限なくすぐにレスポンスが返ってくるが、コードを変更してインスタンス管理者の承認制などにすることもできるのだろう。

そしてアプリの登録は mastodon のインスタンス毎に行わなければならないので、たとえば現在出回っているクライアントアプリは、 mastodon.cloud では使えるが mstdn.jp では使えない、ということもある。

「アプリをインスタンスに登録する」仕組みまで備えたクライアントアプリも作成可能で、[Amaroq for Mastodon](https://itunes.apple.com/us/app/amaroq-for-mastodon/id1214116200) というアプリはそのひとつだと[教えてもらった](https://mastodon.cloud/@fk2000/519030)。

mastodon のユーザーはインスタンス毎に違うので、そのインスタンスで作った email/password で ``connect`` する。
あとは、 ``OnUpdate`` でストリームを受信しておいて、 ``Start`` すればよい、と。

Masto.NET が .NET Standard に対応しているので、 .NET Standard な実行環境,
 Mac/Linux なら .NET Core がインストールされた環境なら動作する。

適切に責務分割された Twitter クライアントなら、それほど手間なく mastodon クライアントアプリになれるかも。
前述のとおり複数インスタンス対応は必要だけど。アプリが対応するインスタンスとその``ClientId`` と ``ClientSecret``の保存のために、サーバーサイド(mBaaS)が必要になると思う。

一応わたしもアカウントつくりました→ https://mastodon.cloud/@amay077
mstdn.jp にも作ったけど、メインはこっちで。頑張ってる人は [応援したい](https://mastodon.cloud/@login/508935) し [応援した](https://mstdn.jp/@nullkal/37086) 。
Rails黒魔術

Railsの黒魔術

少し前の出来事、
大急ぎでシステムを作ろうとしたために、同僚とのコミュニケーション不足で似たような役割のクラスを
全く違う名前で作ってしまった。とりあえずの応急処置としてどうするか。

```ruby:golf_price.rb
class GolfPrice
  # code
  # name
end
```

```ruby:hotel_pack_content.rb
class HotelPackContent
  # handling_code
  # content_name
end
```

```ruby:hotel_pack_content.rb
class HotelPackContent
  def code
    handling_code
  end
  def name
    content_name
  end
end

HotelPrice = HotelPackContent
```

しかし、このままでは`rails c`で先にHotelPackContentを書いた後でしかHotelPriceが使えない。
いきなりHotelPrice.allと書こうものなら、未定義です！と怒られる。
HotelPackContentモデルをコピって以下のようにする。

```ruby:hotel_price.rb
class HotelPackContent
  def code
    handling_code
  end
  def name
    content_name
  end
end

HotelPrice = HotelPackContent
```

これで、`rails c`でいきなり`HotelPrice.all`としても動くようになった。
コピったのを変更したい場合にあっちを編集こっちも編集と二重管理するくらいなら、

```ruby:hotel_price.rb
require 'hotel_pack_content'
```
の方がいいんだろうな〜。…ということで書きました。
Atomカスタマイズ設定まとめ

MacでAtomを使うにあたり、いろいろ設定してみたので忘れないようにメモ。

# 日本語で使う
**japanese-menu**
インストールするだけでメニューバー、コンテキストメニュー、設定画面が日本語になる。
![スクリーンショット 2017-04-11 15.00.54.png](https://qiita-image-store.s3.amazonaws.com/0/169137/d34e7dba-8880-42bd-a73a-c11ce79c99e6.png)


# フォント設定
**Ricty Diminished**
setting->エディタ設定->フォント(font-familiy)
に入力するだけで設定完了。
Oと0がわかりやすいフォントになる。

**Show Invisible（不可視文字を表示）**
setting->エディタ設定->不可視文字を表示（Show Invisible）
チェックを入れておく。
スペースを可視化するフォント。

**Soft Wrap**
setting->エディタ設定->ソフトラップ(Soft Wrap)
長いコードを折り返してくれる。

![スクリーンショット 2017-04-11 15.03.07.png](https://qiita-image-store.s3.amazonaws.com/0/169137/943bb505-6998-c529-0a8a-382a03e4c061.png)


#便利に使う
**highlight-selected**
ダブルクリックで選択したテキストが同ファイル内にある時にハイライトしてくれる。
ハイライトのわりに見づらいのでパッケージの設定を変更。
Hide Highlight On Selected Word
Highlight Background
Light Theme
の3つを有効にした。
![スクリーンショット 2017-04-11 15.24.18.png](https://qiita-image-store.s3.amazonaws.com/0/169137/39a74516-0166-56fa-25b8-10aeafc5ad64.png)

＜有効にする前＞
![スクリーンショット 2017-04-11 15.14.23.png](https://qiita-image-store.s3.amazonaws.com/0/169137/c0808ffa-17c1-d8fb-9537-9a5bef700988.png)
↓
＜有効にした後＞
![スクリーンショット 2017-04-11 15.24.47.png](https://qiita-image-store.s3.amazonaws.com/0/169137/6c4d7cbb-bce1-63a3-5158-92c216c53225.png)


**autocomplete-paths**
ファイルパスを書くときに補完してくれる。

**autocomplete-plus**
言語ごとに存在する。
ファイルの拡張子を決めると補完が使えるようになる。
![スクリーンショット 2017-04-11 15.26.21.png](https://qiita-image-store.s3.amazonaws.com/0/169137/168676be-8b0e-4ea2-06f5-506e5660694d.png)

**open-recent**

**tag**

**file-icons**
拡張子を判別してアイコンをつけてくれる。
インストールして有効にするだけで使用可能。
![スクリーンショット 2017-04-11 14.55.59.png](https://qiita-image-store.s3.amazonaws.com/0/169137/f8dc9cf7-2ea1-9427-b106-83f41cb7adf8.png)

**color-picker**
カラーコードが可視化できる。
command + shift + c
![スクリーンショット 2017-04-11 15.00.14.png](https://qiita-image-store.s3.amazonaws.com/0/169137/94f23972-5951-b0e0-ec1c-966235f35fee.png)

**pigments**
ファイル内のカラーコードに色がつく。
うまく機能しないことがあったが、パッケージの[enable][disable]を何回か切り替えたら機能するようになった。
![スクリーンショット 2017-04-11 18.20.15.png](https://qiita-image-store.s3.amazonaws.com/0/169137/ff799a7d-1242-4805-c2b3-3ce5cf9d5d4b.png)

#もっと便利に使う
**sync-settings**
Atomの設定をgithubにバックアップする。
同期も可能。
atomを開いたときに出るダイアログでRestoreで同期。
[参考ページ](http://qiita.com/__mick/items/b0a98441ed9b1793184a)

**atom-beautify**
ソースコードを綺麗に整形してくれる。
エディタを右クリック->Beauty editor contents

#使えば面白そう
**Remote Edit**
FTPで直接ファイルの編集ができる

**imdone-atom**
trelloみたいにタスク管理ができる。



#便利なショートカット
**困った時のコマンドパレット**
Ctrl + Shift + p

**画面を分割する**
→ペイン
・分割する
①command + k
②→

**作業スペースを移る**
①command + k
②command + ←（行きたい方向）

**ペインを閉じる**
command + w

**マルチカーソル**
・Crtlしながら選択

**行数を指定して移動する**
Ctrl + g

**対応するかっこに移動する**
Ctrl + m

**検索ウィンドウを表示**
command + f
・次にいく
command + g

**ファイルを検索する**
・command + T
検索ウィンドウ表示
[Rails5+Sorcery] Sorcery ログインで users.status をチェックする


## まえがき
Rails のログイン機能を簡単に実装できる gem である Sorcery ですが、たとえば users.status や users.disabled など、ユーザーの特定の状態を考慮したログインチェックを行いたい場合、どのようにすべきでしょうか。
この記事では、カスタマイズのために自分が行った方法を記載します。

Sorcery
https://github.com/Sorcery/sorcery

## どう書くか
`app/controllers/application_controller.rb` など、ログイン後に共通で使用するコントローラーを対象とします。
そこに `not_authenticated` を定義していたりなどしていたら、その近くにでも下記の記述を追加してみましょう。

```ruby:app/controllers/application_controller.rb

    def not_authenticated
      redirect_to login_path
    end

    def logged_in? # <-- 追記するメソッド
      (current_user && current_user[:status] != Settings.user_status_retired)
    end

```

カスタマイズなどと大げさに言いましたが、見ての通り単に Sorcery の呼び出す `logged_in?` メソッドをオーバーライドしているだけです。

## おまけと注意点

オリジナルのソースはこちら。
https://github.com/Sorcery/sorcery/blob/7c5fee441e03779ee2888ecef317440cd10a17e7/lib/sorcery/controller.rb#L76-L78

`Settings.user_status_retired` としている部分は、規模やお好みで変更して下さい。
上記の場合は `config/settings.yml` に判定値を記載した場合の呼び出し例です。
`config/initializers/constants.rb` に記載してもいいかもしれません。

また、応用的に複数のカラムを参照する場合には、以下のようにすれば良いでしょう。

```ruby:app/controllers/application_controller.rb

    def not_authenticated
      redirect_to login_path
    end

    def logged_in?
      (
        current_user \
        && current_user[:status] != Settings.user_status_retired \
        && current_user[:hoge] == "piyo" # <-- ふたつ目の条件
      )
    end

```


この処理は、以下の流れにそっています。

1. Sorcery で通常のログイン処理が行われ、@current_user などがセットされる。
2. `application_controller.rb` の `before_action` メソッドが、Sorcery の `require_login` メソッドを呼び出す。
3. Sorcery の `require_login` メソッドが、同 `logged_in?` メソッドを呼び出す。

つまり `@current_user` **のセットを阻害する働きはありませんし**、ログイン時にセッションを発行している場合には、別途それを `destroy` してやる必要があるかもしれません。

自分の対応例

```ruby:app/controllers/application_controller.rb

    def not_authenticated
      reset_sorcery_session if !!current_user
      redirect_to login_path
    end

```

## User.active_for_authentication? との違い
（※2017年4月14日追記）
投稿後「 `User.active_for_authentication?` を使うと良いのでは」とご指摘をいただきました。
恥ずかしながら devise に明るくなく `active_for_authentication?` を知らなかったので、まず試してみて、もしそれで済むならこの記事をこっそり消そうと思っていました。

devise
https://github.com/plataformatec/devise

具体的には、

```ruby:app/models/user.rb

def active_for_authentication?
  self.status != Settings.user_status_retired
end

```

こういう記述を追加してみました。
その後動作を確認したところ `active_for_authentication?` はログイン時にのみ評価が行われ、すでにログインしているユーザーを強制的にログアウトさせることはできませんでした。

とはいえ、ログイン時にのみ評価して、ログインを拒否するという動作を実装する場合には `app/models/user.rb` に追記するほうがより簡潔に記述でき良いのではないかと思います（教えてくださった twitter@libkenta さん、ありがとうございます！）。
mysqldumpのmax_allowed_packetのデフォルト値は24MB

[PHP（PDO）でファイルをMySQLに保存するときに変更しなければいけない点](http://qiita.com/smzk/items/d1792bcd9657835e21d9)でmax_allowed_packetを24MB以上にしたときの注意点。
#mysqldumpのmax_allowed_packetのデフォルト値は24MB

※MySQL5.6の場合
実際に24MB以上のファイルが登録された場合、夜間のDBバックアップなどでmysqldumpを動かしていると以下のようなエラーが発生します。


>mysqldump: Error 2020: Got packet bigger than 'max_allowed_packet' bytes when dumping table `webpage` at row: 172313

原因はmax_allowed_packetがmysqldとmysqldumpで別々に設定されているからです。

つまり、

```ruby:my.conf
[mysqld]
max_allowed_packet=32MB
```

とした場合、

```ruby:my.conf
[mysqldump]
max_allowed_packet=32MB
#デフォルトは24MB
```

としてやる必要があります。

そしてmysqldは以下のように動的に変更できますが、

>set global max_allowed_packet = 33554432;

mysqldmpは動的な変更が不可能なためmysqlの再起動が必要となります。
再起動できない場合は、以下のように--max_allowed_packetを明示的に指定してやります。

>mysqldmp -u root -ptest --max_allowed_packet=1G --opt --single-transaction --events --hex-blob testDB testTable

mysqldumpにおける--max_allowed_packetは特に制限する必要はないので、MAXの1Gを指定してやるのが一般的です。
cssの:afterや:beforeのcontent内で改行したった

```css
.elm:after {
  content: 'とっても素敵な\A素敵な何か';
  white-space: pre;
}
```

※```white-space:pre;```が無いと改行されなかったので注意！
(参考)
http://ithat.me/2015/09/15/css-before-after-content-line-break
VirtualHostをサーバーにセットする

## step 1

* httpd.confを編集

```config

Listen 8000
<VirtualHost *:8000>
    ServerName localhost
    DocumentRoot "/path/to/web/site/"
    ErrorLog "logs/web_site_error_log"
    CustomLog "logs/web_site_access_log" common
</VirtualHost>

```

## step 2

* iptablesの設定

        vi /etc/sysconfig/iptables
      
* 次を追加
    
```config

-A INPUT -p tcp -m tcp --dport 8000 -j ACCEPT

```

or

* CMD lineで

        iptables -A INPUT -p tcp --dport 8000 -j ACCEPT
        
* 問題点:

> reject-with icmp-host-prohibited の前に追加する事後になると記述が反映されないようになる [参考](https://www.conoha.jp/guide/study-12.php)

## step 3
* reload

```
service httpd restart
service iptables restart

/etc/init.d/iptables save # 変更をセーブ

/etc/init.d/iptables stop # 全体的にストップする
```

## Basic認証を与える

* passwd生成

```
htpasswd -b -c <file name> <userName> <passWd>
```

* httpd.confに追加

```
<VirtualHost>
    <Directory "/path/to/web/site/">
          AuthUserFile <passwd file path>
          AuthGroupFile /dev/null
          AuthName "Basic Auth"
          AuthType Basic
          Require valid-user
    </Directory>
</VirtualHost>
```
Vim でスクロールが遅いときの対処

[ターミナルの描画を爆速にする(mac/linux)](
http://qiita.com/zebult/items/0047b72916383a5c0acf?utm_campaign=popular_items&utm_medium=referral&utm_source=popular_items)を読んで需要ありそうだと思い書きます。
上記の記事だと日本語入力ができないという欠点があるので。

## スクロールが遅くなる原因
私の環境では、画面に表示されている**文字の量**とスクロールの遅さが相関しています。
特に4Kのモニタにいっぱいに表示しているときに遅くなりがちです。

## 対処法
対象法は**シンタックスハイライトをOFFにする**です。妥協案でごめんなさい。
でもハイライトのON/OFFに**キーバインド**を振っておけば意外と快適です。
信じてください。

## ハイライトON/OFF
vimrcにこちらのコード1行を追加すれば「,f」コマンドでON/OFFできるようになりかなり快適です。
`noremap <silent> ,f :if exists("g:syntax_on")\|syntax off\|else\|syntax enable\|endif<CR>`
[MySQL]指定した緯度経度を中心に指定半径内のスポットデータを近い順に取得する（geometry型不使用編）

スポット情報を保存するこんなテーブルがあったとして、

```mysql:
CREATE TABLE `spots` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  `latitude` decimal(8,6) DEFAULT NULL,
  `longitude` decimal(9,6) DEFAULT NULL,
  PRIMARY KEY (`id`)
);
```

緯度 35.6804067、経度 139.7550152 を中心に半径3km以内のスポットを近い順に取得したい場合、下記のSQLで取得ができる。

```sql:
SELECT
  id, name, latitude, longitude,
  (
    6371 * acos( -- kmの場合は6371、mileの場合は3959
      cos(radians(35.6804067))
      * cos(radians(latitude))
      * cos(radians(longitude) - radians(139.7550152))
      + sin(radians(35.6804067))
      * sin(radians(latitude))
    )
  ) AS distance
FROM
  spots
HAVING
  distance <= 3 -- 半径3km以内
ORDER BY
  distance -- 近い順(ASC)
LIMIT 10 -- 最大10件
;
```

取得データサンプル

| id | name | latitude | longitude | distance |
|:--:|:----:|:--------:|:---------:|:--------:|
| 51 | スポット51 | 35.676988 | 139.758881 | 0.5161685844029122 | 
| 49 | スポット49 | 35.679841 | 139.765092 | 0.9123285501120572 |
| 139 | スポット139 | 35.672128 | 139.758912 | 0.9855475862507722 |
| 112 | スポット112 | 35.681382 | 139.766084 | 1.0056121098808728 |
| 115 | スポット115 | 35.681788 | 139.766761 | 1.0719528578851056 |
| 94 | スポット94 | 35.671470 | 139.761512 | 1.1540565221794934 |
| 22 | スポット22 | 35.680924 | 139.768938 | 1.2588424754888945 |
| 21 | スポット21 | 35.670642 | 139.762923 | 1.2996690197721117 |
| 23 | スポット23 | 35.669531 | 139.760409 | 1.3037774084414326 |
| 118 | スポット118 | 35.670436 | 139.763142 | 1.3296837880068584 |

参考: https://developers.google.com/maps/articles/phpsqlsearch_v3
> Finding Locations with MySQL
> 
> To find locations in your markers table that are within a certain radius distance of a given latitude/longitude, you can use a SELECT statement based on the Haversine formula. The Haversine formula is used generally for computing great-circle distances between two pairs of coordinates on a sphere. An in-depth mathemetical explanation is given by Wikipedia and a good discussion of the formula as it relates to programming is on Movable Type's site.
> 
> Here's the SQL statement that will find the closest 20 locations that are within a radius of 25 miles to the 37, -122 coordinate. It calculates the distance based on the latitude/longitude of that row and the target latitude/longitude, and then asks for only rows where the distance value is less than 25, orders the whole query by distance, and limits it to 20 results. To search by kilometers instead of miles, replace 3959 with 6371.
>
```
SELECT id, ( 3959 * acos( cos( radians(37) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians(-122) ) + sin( radians(37) ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < 25 ORDER BY distance LIMIT 0 , 20;
```
kintoneの一覧画面で横スクロール時に列を固定する

[FixedMidashi](http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html)というライブラリが良さそうだったので試してみました。

kintoneの画面に適用すると以下のように横スクロールで列が固定することができます。
![table.gif](https://qiita-image-store.s3.amazonaws.com/0/100438/67ef33ad-2614-ddb6-6090-c4a0e74ac866.gif)

## JavaScriptの設定
以下2つファイルを設定します。 [手順はこちら](https://help.cybozu.com/ja/k/user/js_customize.html)
1. [fixed_midashi.js](http://www.vector.co.jp/soft/other/java/se498696.html)
2. ↓のjs

```js
(function() {
    'use strict';

    kintone.events.on('app.record.index.show', function() {
        var table = document.querySelector('.recordlist-gaia'); // 一覧の要素取得
        table.setAttribute("_fixedhead", "rows:1; cols:3"); // rows:固定する行数, cols:固定する列数
        table.innerHTML = table.innerHTML.replace('<thead>', '<tr>').replace('</thead>', '</tr>'); // theadをtrに書き換え
        FixedMidashi.create();
    });
}());
```

### 注意点
こちらはDOM操作をしているため、製品のアップデートにより動作しなくなる可能性があります。
SpringでLoggerをInjectionする

# はじめに

JavaでLogを出力際には、Log4jやLogbackなどのライブラリを使ったりjava.util.loggingを使ったりします。どのライブラリ・APIでも大抵は以下のようにLoggerインスタンスを取得・生成します。

```Java
Logger logger = Logger.getLogger(Hoge.class);
```

すべてのクラスでこれらを書いていくのは面倒です。
Springを使ってもうちょっとシンプルに書く方法を探してみましょう。

# 元ネタ

ほぼ、このサイトの実装の紹介です。
http://memorynotfound.com/spring-inject-logger-annotation-example/

ありとうございます。

# SpringによるLoggerのInjection

Springを使っている場合、以下のようにアノテーションが付いているfiledに対してLoggerをInjectionすることができます。

```Java
    @Log
    private static Logger logger;
```
記述量は少しですがへりましたし、引数のクラスを明示しなくてもよくなることでLoggerのミス(コピペで時々あるはずです)をなくすることができます。

いかに実装方法を説明していきます。

## Logアノテーション

以下のようにLogアノテーションを作成します。

```Java:Log.java
@Retention(RUNTIME)
@Target(FIELD)
@Documented
public @interface Log {
}
```
ランタイムで参照するので`@Retention(RUNTIME)` 、対象はフィールドなので`@Target(FIELD)`とします。

## LogInjector

Springをつかって、先ほど作成した`@Log`アノテーションが付与されたフィールドに、LoggerをInjectionするコードを書きます。

以下のようにSpringのBeanPostProcessor実装を作成し、その中でLoggerを作成します。

```Java
@Component
public class LogInjector implements BeanPostProcessor {

    @Override
    public Object postProcessAfterInitialization(Object bean, String beanName) throws BeansException {
        return bean;
    }

    @Override
    public Object postProcessBeforeInitialization(final Object bean, String name) throws BeansException {
        ReflectionUtils.doWithFields(bean.getClass(), new ReflectionUtils.FieldCallback() {
            public void doWith(Field field) throws IllegalArgumentException, IllegalAccessException {
                // make the field accessible if defined private
                ReflectionUtils.makeAccessible(field);
                if (field.getAnnotation(Log.class) != null) {
                    Logger log = Logger.getLogger(bean.getClass());
                    field.set(bean, log);
                }
            }
        });
        return bean;
    }

}
```

## 使用方法

これで準備は整いました。あとは以下の手順で使えるようになります。

* LogInjectorをSpring管理下におく。
* LoggerをInjectionしたいクラスのstatic filedに `@Log`を付与する。

これで毎回　`getLogger` しなくて済むようになりました。