OmniAICreator/Qiita-1.07M huggingface dataset:
【定番】 新しいWebサービスを開発・運営するときに使いたいサービス 【2016年末版】

[トレタ アドベントカレンダー](http://qiita.com/advent-calendar/2016/toreta)3日目担当の増井です。

最近、新しいサービスリリースに少し関わることがあり、そこに向けてオススメした開発で役に立つサービスをここでもまとめてみることにしました。

私が、実際にトレタやキタヨンを作るときに使ったサービスを中心に上げています。特に使った方がいいサービスには [必須]を書いてみました。
他にもオススメのサービスがあったら、コメントで教えていただけると嬉しいです！

## 開発
### BrowserStack [必須]

https://www.browserstack.com
http://qiita.com/tags/BrowserStack

言うなら"Browser as a service"。色々なブラウザをリモートで操作してWebの動作確認をしたり、指定したURLのスクリーンショットを多種多様なブラウザで撮ってきてくれるサービス。
Chrome Extensionを入れることで、localhostで動いているページもスクリーンショットが撮影可能。
Selenium Remoteと連携することで、複数のブラウザでの自動テストも行える。

Webページを開発するときには必須のサービスです。

[![https://gyazo.com/049864e57c6e77c5beff49afa72c85fd](https://i.gyazo.com/thumb/400/_9720b5c676f177a42bcca8bc2a180f13-png.jpg)](https://gyazo.com/049864e57c6e77c5beff49afa72c85fd)
### CircleCI [必須]

https://circleci.com
http://qiita.com/tags/CircleCI

言わずと知れたCIサービス。テストの自動実行は最低実行しておかないと後々つらいので必ずテストコードとCIはリリース前に回しましょう。
いろいろなCIサービスがあるけど、とりあえず実績やノウハウの多いCircleCIはハズレなし。OSX HostもありiOSのビルドなどもできるし。


### SideCI

https://sideci.com
http://qiita.com/tags/SideCI

コードの品質を担保する様々なLinterを実行してくれるサービス。
`.rubocop` などの設定がちょっとめんどくさいけど、最初から入れて綺麗なコードを書くのを癖にしておくのがオススメ。汚いコードを直すPull Requestを勝手に作ってくれたりもします。

### ペライチ

https://peraichi.com

サービスを作ったら説明のページなどを作る必要がありますが、そこにあまりリソースは避けない！という場合には、簡単にページを作れるペライチがオススメ。とりあえずこれで運用して、もっと高度なことがやりたくなったらイチから製作してもいいかも。

[![https://gyazo.com/34ef555c2b6207692654c200952021b7](https://i.gyazo.com/thumb/400/_c4d5352f335b1285f8c35845b2227a1e-png.jpg)](https://gyazo.com/34ef555c2b6207692654c200952021b7)

### Gyazo

https://gyazo.com/

スクリーンショットをクラウド管理するサービス。

サービス作成をしているとデザインや文言指示など、スクリーンショットを起点に話をすることが増えてますが、とっちらかりがちなスクリーンショットの管理や、コメントを入れるのを一括して管理できるGyazoの導入がオススメです。


## サーバ運用

### NewRelic [必須]

https://newrelic.com
http://qiita.com/tags/newrelic

RailsやPHP, Javaなど多様なアプリケーションサーバの監視を行ってくれるサービス。フレームワークごとにプラグインが用意されているので簡単にインストール可能。

レスポンスタイムやエラーのトレースなどの収集だけでなく、遅いSQLやメソッドの発見などパフォーマンス改善やバグ修正にも多大なる威力を発揮します。

プロダクションでしか再現しない問題を追うときには非常に便利なので絶対オススメ。ちょっと高いけど、リリース後の数ヶ月だけでも入れるといいです。

### Pingdom + Pagerduty [必須]

https://www.pingdom.com
https://www.pagerduty.com
http://qiita.com/tags/pingdom

サーバの死活監視ツールのPingdomと、電話などへ通知してくれるPagerdutyの組み合わせ。

サーバの返答がなくなると電話で連絡がきます。これで寝ていても大丈夫！

サーバの状態だけでなく、上流回線やDNS、SSLなどの問題でサービスできない時にも通知が来るのてサービスの可用性を上げたい時には必須。


### mackerel + Pagerduty

https://mackerel.io
https://www.pagerduty.com
http://qiita.com/tags/Mackerel

メモリやディスク、プロセス状態など、サーバの中の情報を収集して記録や監視をするmackerelと、異常時に通知をしてくれるPagerdutyのセット。

ディスクの残量が少ないとか、実際にサービが止まる前に警告が出るので、サービス公開時には設定できなくても、すぐ設定しておきたいところ。


### fluentd + BigQuery

http://www.fluentd.org/
https://cloud.google.com/bigquery/
http://qiita.com/tags/fluentd
http://qiita.com/tags/bigquery

ログ収集ツールのfluentdと、データ解析ツールのBigQueryの組み合わせ。

アクセスログは後で解析できるようにfluentdでまとめて、BigQueryに入れておくのがオススメです。httpdのログにログインしているユーザ名などを入れておけば、後で時間帯別ユニークユーザ数を調べたり、障害時の問題範囲を特定するのに役立ちます。fluentdはサービスではありませんが組み合わせて使うととても便利なのでここに上げておきました。
【MySQL】dumpのやり方をさくっと確認するためのメモ

MySQLでのdumpについてです。dumpのやり方をサクッと確認できるためのメモです。

#すべてのDBをdump
```
mysqldump -u <USERNAME> -p > <OUTPUTFILENAME>
```
- \-u \<USERNAME>
    - アクセスするユーザー名を指定
- \-p
    - パスワードを指定(コマンド実行後に入力を求められる)
- \<OUTPUTFILENAME>
    - 出力するファイルの名前を指定


#DBを指定してdumpする
```
mysqldump -u <USERNAME> -p <DBNAME> > <OUTPUTFILENAME>
```
- \<DBNAME>
    - dumpするデータベース名を指定


#テーブルを指定してdump
```
mysqldump -u <USERNAME> -p <DBNAME> <TABLENAME> > <OUTPUTFILENAME>
```
- \<TABLENAME>
    - dumpするテーブル名を指定


#リストア

```
mysql -u <USERNAME> -p [<DBNAME>] < <OUTPUTFILENAME>
```
OSXのBlenderでの全画面表示切り替え

忘れないようにメモ。

`option + F10`

全画面表示ボタン押したらメニューも全部消えちゃって、戻すまでに30分くらいこのショートカットを探し続けた。

`control + ↓`ってのも、ググったら出てきたけど、ダメだった。
DynamoDBの監視をMackerelでやって苦労したとこ

# Advent Calendarっぽいことを

昨日までは、HaiToによる記事二連発です。明日は期待の若手がまた何か深いことを書いてくれそうです。
僕は、自分の仕事内容について社内LTで話したときの内容をまとめてみました

# DynamoDBとは

DynamoDBは、AWSによって管理されるNoSQLサービスです。
データとトラフィックが多数のサーバで分散されて管理されます。
利用者は容量の増加やパフォーマンスに関する心配事を減らすことができます。

より詳細にDynamoDBを知りたい方は、ぜひおググりいただければと思います。
一応、ドキュメントへのリンクを置いておきますね。

[Amazon DynamoDB ドキュメント](https://aws.amazon.com/jp/documentation/dynamodb/)

# Mackerelとは

Mackerelは、はてなが開発したサーバ管理・監視ツールです。
いい感じの見た目をしていて、APIであれこれできたり、Goで書かれたCLIツール(mkr)があったりします。
個人的には、監視設定をmkrコマンドで pull/push できる機能が好きです。

Mackerelについても詳しく知りたい方は、ぜひおググりいただければと思います。

# DynamoDBならではなところ

DynamoDBの料金は、確保したキャパシティの量が関わってきます。
CloudWatchでは、確保したキャパシティの量と、消費したキャパシティの量を取得することができます。
そして、確保したキャパシティを超えたリクエストは失敗してしまうので、
現在のキャパシティ消費率が気になるところでしょう。
後述しますが、このキャパシティ消費率を計算してMackerelにサービスメトリクスとして投稿するようにしています。

ところで、DynamoDBの料金については
わたしもそう思います

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">Dynamo DB も「確保した量」じゃなくて「使用した量」に課金してくれるようになると使いやすくて嬉しいんだけどなー <a href="https://twitter.com/hashtag/serverlesstokyo?src=hash">#serverlesstokyo</a></p>&mdash; もっぱら (@toricls) <a href="https://twitter.com/toricls/status/796295029920628736">November 9, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

# 監視をする上で工夫したところ

実際のコードなどは載せませんが、工夫した点をざっとまとめました

- DynamoDBのキャパシティ消費率に関するメトリクスがないため、Lambdaで計算する
  - CloudWatch→Lambda→Mackerelという流れでメトリクスを収集している
  - 各テーブルのRead/Writeそれぞれについて
    - `(Consumed[Write/Read]Capacity / Provisioned[Write/Read]Capacity)*100` を計算して割合としてMackerelに送信
- CloudWatchが5分以上昔のDynamoDBメトリクスを送ってくるため、0で埋める
  - タイムスタンプを見て、古い値は0で埋めてMackerelに送るようにした
- CloudWatchのDynamoDBメトリクスが歯抜けすることがあるため、0で埋める
  - 歯抜けしてるメトリクスがあれば、0で埋めてMackerelに送るようにした

- DynamoDB StreamのラベルにMackerelで使用できない文字が入るため、問題ない文字列に置換して送信する
  - DynamoDB Streamは、ラベル名に `2015-05-11T21:21:33.291` と日時が入ってしまう
     - [http://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/Streams.html]
  - Mackerelのサービスメトリックに使えるのは、 `（[a-zA-Z0-9._-]+）` 
     - [https://mackerel.io/ja/api-docs/entry/service-metrics#post:title]
     - つまり、そのままMackerelに送るとエラーになってしまう
  - `2015-05-11T21:21:33.291` がメトリクス名に入っても意味不明なのでStreamだよってわかりやすい名前に置き換えて送った

# さいごに

サーバーレス時代のイケてる監視について、知見を深めていくぞい！
CentOS GUI環境の構築

## ConoHaでCentOSのGUI環境を構築してみた
　メモ書き程度の内容です。紙だけだとなくすので、バックアップ的なノリで入れておきます。

　GUIを実行するためには、2つのパッケージが必要になる。インストールは以下のとおり。

　　　`sudo yum groupinstall -y "X Window System" "GNOME Desktop"`

　しかし、これだけだと再起動したあとに、ユーザーの作成が求められて面倒だったりする。
　ので、`adduser [ユーザー名]`でユーザーを作成してしまう。

　　　`adduser [ユーザー名]`
　　　`passwd [ユーザー名]`

　このあとに続けて、任意のパスワードを2回、続けて打ち込む。

　　　`visudo`で、`[ユーザー名]`に`sudo`権限を与えてやる。
　　　`## Allow root to run any commands anywhere.`
　　　`root　　　　　　　　　　ALL=(ALL)　　　　　　ALL`
　　　`[ユーザー名]　　　　　　ALL=(ALL)　　　　　　ALL`

となるようにファイルを編集する。`Esc`+`:wq`コマンドでvimを終了させる。
デフォルトでGUI起動させる場合には、以下のコマンドも追加で打っておく。

　　　`sudo systemctl set-default graphical.target`
　　　`systemctl get-default`
　　　`graphical.target`と表示されれば切り替わっています。
　　　`multi-user.target`となった場合は、CUIのままになっています。

最後に、

　　　`shutdown -r now`で再起動させる。

次に起動したときには、見慣れたGUI画面が出てきます。
IntelliJ IDEAで間違って登録してしまったArchetypeを修正・削除する方法

Mavenプロジェクトの作成画面から間違ったArchetypeを登録してしまうと、現在のIntelliJのインターフェースでは、変更したり削除したりすることができません。

![wrong-archetype.png](https://qiita-image-store.s3.amazonaws.com/0/10290/a6fcfd9f-895f-03ec-b281-f48aac8bd122.png)

正しい名前で登録し直せばいいじゃん！という考えもありますが、間違って登録してしまった方が残っていると、精神的に気持ち悪いし、忘れた頃にうっかり使ってしまう可能性があります。変更できるといいですね。

参考: [MAINTAINING THE LIST OF MAVEN ARCHETYPES IN INTELLIJ IDEA](https://pharsfalvi.wordpress.com/2014/10/27/maintaining-the-list-of-maven-archetypes-in-intellij-idea/)

## 方法

**UserArchetypes.xml** というファイルを開いて編集します。(2016.11時点で最新の2016.3の場合の例)

* Windows:
`ホームディレクトリ\.IntelliJIdea2016.3\system\Maven\Indices\UserArchetypes.xml`

* MacとLinux:
`~/Library/Caches/IntelliJIdea2016.3/Maven/Indices/UserArchetypes.xml`

冒頭の例の場合、次のようなXMLになっています。

```xml:UserArchetypes.xml
<?xml version="1.0" encoding="UTF-8"?>
<archetypes>
  <archetype groupId="org.glassfish.jersey.archetypes" artifactId="jersey-quickstart-webap" version="2.24.1" />
</archetypes>
```

`<archetype />`の行を消して、エントリを削除することもできます。

正しく編集し終わったら、IntelliJ IDEAを再起動します。

![valid-archetype.png](https://qiita-image-store.s3.amazonaws.com/0/10290/13d97410-d670-b1dd-959e-f2f745a34089.png)

きちんと直りました。Mavenリポジトリからのダウンロードも上手くいくようになっています。
なるほどわかった！Moodleプラグインの種類(2)

<img width="401" alt="moodle.png" src="https://qiita-image-store.s3.amazonaws.com/0/116241/396391a4-8516-8d93-3d04-f9f19825460d.png">

# その他のMoodleプラグイン

昨日はMoodleのプラグインの種類について[ざっくり](http://qiita.com/yue/items/50d85381863b07ec31cf)と書かれていましたが、今日はそこには名前すら上がっていなかった、さらに別のプラグイン「レポート」について書きます。

# レポート(report)

Moodleにはコース管理者や管理ユーザ(admin)が見られるレポートの機能があります。

コース管理者は、標準ではコンピテンシーブレイクダウン(Moodle3.1以降)、ログ、ライブログ、活動レポート、コース参加者といったレポートを表示できます。
ここにプラグインを追加して、コース内の見たい情報を表示させることができるのがレポートプラグインです。

<img width="200px" alt="20161203_121847#00.png" src="https://qiita-image-store.s3.amazonaws.com/0/116241/dfae4e52-64bb-47f5-ff58-b55539683f02.png">


管理ユーザには、システム全体の状況をレポートで表示できる機能がありますが、ここにもレポートプラグインで機能を追加することができます。

<img width="200px" alt="20161203_121924#00.png" src="https://qiita-image-store.s3.amazonaws.com/0/116241/d652a0a4-90cd-4e13-3fe3-d838aaafd6d7.png">

# 注意点

コース内で利用できるレポートプラグインは、特に制限をしない限り、全てのコースで表示されます。
ですので、特定のコースだけで利用したいものは、ブロック(block)プラグインなどにして、コースごとに追加するのが良いでしょう。
逆に、全てのコースで利用したいものはレポートプラグインが適しています。

状況に合わせてどのタイプのプラグインを作るかを選択するのが良いですね。

# サンプル

レポートプラグインの[ひな形的なもの](https://github.com/shinotra/moodle-report_my_report)を公開しました。
インストールすると上図の「俺のレポート」が追加されます。
ただし、特に機能はありません。またMoodle2.7以上での動作を想定していますが、ご利用による結果については自己責任でお願いします。
Macでdocker terminalが動かない時

#docker terminalが全然動かない


何をやっても下記のエラーが出る


```

docker: Cannot connect to the Docker daemon. Is the docker daemon running on this host?.

```

↑ ﾊｧ?（゜Д゜）


まあ、結論から言ってしまうと ``` 再起動せよ ``` ということらしいので、下記のコマンドで再起動をさせ、その後普通にdocker terminal開いたら無事起動できた。めでたしめでたし


```

sudo shutdown -r now

```


<img width="501" alt="スクリーンショット 2016-12-03 12.40.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/135794/6321999c-ff59-b9ac-8332-4c3391cb4c77.png">





#参考記事

###dockerをインストールしたのに動かない時
http://qiita.com/kumagi/items/720d4f6daefc789ca346

###LinuxのUbuntuでシステムをシャットダウン・再起動するコマンド
http://www.miuxmiu.com/archives/2011/03/19/linux_ubuntu_system_shutdown_restart_command.html
内部向けChrome拡張機能にFirefoxアドオンの署名をする話

# 概要
内部向けのChrome拡張機能作った。
　　↓
Firefoxでも使いたいお。
　　↓
WebExtensionsのおかげで、少し直すだけで動いた！
　　↓
「一時的なアドオンを読み込む」だと、ブラウザ閉じたら消えるから面倒くさいお。
　　↓
署名するか←今ここ

# 署名に必要なもの
[Add-ons for Firefox - Mozilla](https://addons.mozilla.org/ja/firefox/)にアカウントを作るだけ。
お布施は必要ないので、登録用メールアドレスだけあればOK。

# 署名の方法
0. Add-onsの「ユーザー登録」をクリックし、メールアドレスなど入力してアカウントを作る。
![ws_000001.JPG](https://qiita-image-store.s3.amazonaws.com/0/25044/f606d1bd-686c-91cf-f412-de3605611f81.jpeg)

0. 登録できたら「ツール」>「新しいアドオンを登録」をクリックし、規約画面が表示されるので同意する。
![ws_000003.JPG](https://qiita-image-store.s3.amazonaws.com/0/25044/707b280b-338b-6803-69ab-82ad88355d46.jpeg)

0. 内部向けなので「On your own.」を選択する。
![ws_000004.JPG](https://qiita-image-store.s3.amazonaws.com/0/25044/ff5cb0da-6029-f1ca-952e-20301776ea93.jpeg)

0. manifest.jsonを含めて、ソースを全選択してzipファイルを作成する。
![ws_000000.JPG](https://qiita-image-store.s3.amazonaws.com/0/25044/fdc508f8-a001-7f49-ca99-7c39d8401620.jpeg)

0. 「ファイルを選択」をクリックして圧縮したzipを選択する。
![ws_000005.JPG](https://qiita-image-store.s3.amazonaws.com/0/25044/1c6d3a99-ab21-3c8f-ab8f-cffea4b466e1.jpeg)

0. 自動で検証されるので、エラーが表示されたら修正してください。
エラーがなければ「アドオンを署名」をクリックする。
![ws_000006.JPG](https://qiita-image-store.s3.amazonaws.com/0/25044/a49f3ee8-7721-7c13-ca5d-b16cd549f7f7.jpeg)

0. xpiファイルがダウンロード出来るようになるので、ダウンロードして配布する。
![ws_000007.JPG](https://qiita-image-store.s3.amazonaws.com/0/25044/98db75a4-b5ff-897b-a0f1-943b77715252.jpeg)

# 注意点
- zipファイルを作るときにフォルダごと圧縮しちゃうと「Add-on missing manifest」エラーになる。
- 圧縮に使ったソフトによっては「アーカイブ内のファイルがサイズ制限を超えています」エラーになる。

以上です。
選択式のプルダウンで、選択項目によってもう一方の選択を変える場合サファリで無理なのでこのやり方で

メーカーの選択後に、その選択したメーカーの商品を選ぶみたいなとき

```
<select name="maker">
<option name="A社" value="a-company"></option>
<option name="B社" value="b-company"></option>
(略）
</select>

<select name="product">
<option name="商品1" class="a-company">商品1</option>
<option name="商品2" class="b-company">商品2</option>
(略）
</select>

```

んで、サファリ以外は以下で商品の絞り込みが、class名で動作可能である。

```
$('select[name="maker"]').change(function () {
    var makerName = $('select[name="maker"] option:selected').attr("class");
      if ($(this).attr("class") != makerName) {
        $(this).hide();
      } else {
        $(this).show();
      }
});

```

だが、サファリはダメである。

その場合
フォームの初期状態を記憶しておき、一旦初期のマックス状態に戻してから
それを削るという方法で実装すればサファリでも動作可能である。

```
var options = function () {/*
<option name="商品1" class="a-company">商品1</option>
<option name="商品2" class="b-company">商品2</option>
(略）
*/
}.toString().split("\n").slice(1, -1).join("\n")

```
みたいな感じで、JSの変数だのにオプションのマックス状態を記憶しておき

```
 $('select[name="maker"]').change(function () {
    //オプションの初期化！
    $('#select-product').html(options);
    var makerName = $('select[name="maker"] option:selected').attr("class");
    $('#select-product option').each(function (index, element) {
      if ($(this).attr("class") != makerName) {
        $(this).remove();  //実削除
      } else {
        $(this).show();
      }
}

```
という形で実装することで、サファリ系でも動作可能である。
ちなみにJSの中のオプションの持ち方をバッククオートで持つのが今どっキーなのだが、その場合IEでエラーが出るので、そんな実装100年はえーよ、ということも言及しておく。

これが今の所のベストであることは信じて疑っていない。
さくらレンタルサーバーのWordPressで最大アップロードサイズ: 2 MBを変更しました

さくらレンタルサーバーにインストールしたWordPressはサーバーの設定でファイルアップロードサイズに上限があります。

# php.iniを変更する
さくらレンタルサーバーのコントロールパネルから**PHP設定の編集**をタップします。

この画面からphp.iniを変更できるようになります。

こちらデフォルトですと2MBなので制限を20MBに変更しました。20MBは例の数字です。お使いの運用に

```bash:php.ini
post_max_size = 20M
upload_max_filesize = 20M
```
**post_max_size** と **upload_max_filesize** を変更しました。

<img width="494" alt="さくらレンタルサーバーのphp.iniの変更" src="https://qiita-image-store.s3.amazonaws.com/0/1624/9e1763b8-d6e9-3d1e-0f85-4959c727ebf3.png">

# アップロード制限を確認
WordPressの表示が2MBから20MBに変わりました。
<img width="209" alt="最大アップロードサイズが20MB" src="https://qiita-image-store.s3.amazonaws.com/0/1624/c9ec7637-252e-ef72-890a-560044381d68.png">
ブライトレスをCSSでアニメーションさせる方法（ピカッから普通にするアニメーション）

jqueryだけ実装しようとしたら、filterをアニメーションさせるのが
なんかめんどくさそうだったのでCSSで画像を光ってる状態から
普通の状態にアニメーションさせた時のメモ。

```
.catch{
	-webkit-transition:-webkit-filter 0.4s ease-in-out;
	-webkit-filter: brightness(2);
	-webkit-filter:brightness(2);
	-moz-filter:brightness(2);
	-o-filter:brightness(2);
	-ms-filter:brightness(2);
	filter:brightness(2);
}

.bright{
	-webkit-filter: brightness(1);
	-webkit-filter:brightness(1);
	-moz-filter:brightness(1);
	-o-filter:brightness(1);
	-ms-filter:brightness(1);
	filter:brightness(1);
}

```
これでcatchクラスをもつ要素を

```
jqueryでaddClass("bright");

```
としたら、ピッカッとしてから普通に戻るアニメーションができる。

```
-webkit-transition:-webkit-filter 0.4s ease-in-out;

```
という部分でタイミングやイージングをいい感じに設定してください。
このやり方でjQueryでディスパッチなりなんだのした後でも、アニメーションの制御はCSSだができる。
colorboxで外側に閉じるボタンを付ける場合のTIPS

親側（モダールを立ち上げる方）からは、そのモーダルの外側に閉じるボタンを置くことは
不可能である。

よって、閉じられるモーダル側に実装する（iframeだろうが、divのコンテンツだろうが一緒）
そして開く側で、その分を加味したサイズで開けばよい。
そしてサイズ分ネガティブマージンを持つ。

実際のサイズが1130 X 920で閉じるボタンが
右に20px、縦に20pxほどはみ出ている場合は、
開く側では、

```
  $(".detail").colorbox({
    onOpen:function(){
      $("#overlay").fadeIn(fadeTime);
    },
    onClosed:function(){
      $("#overlay").fadeOut(fadeTime);
    },
    iframe: true,
    innerWidth: 1150,
    innerHeight: 940,
    opacity: 0,
    transition: "fade",
    speed: 500,
    scrolling: false
  });

```

```
    innerWidth: 1150,
    innerHeight: 940,
```
の部分を大きめに開く。

そして開かれる側のモダールのhtml内で（対象となる閉じるボタンのクラスをcloseとすると）

```
 $('.close').click(function () {
   parent.$.colorbox.close();
 });

```
この時、colorbox.jsの読み込みは必須なので、読み込みも記述すること。

このようにして、モーダルサイズ外側の閉じるボタンは実装できる。
freee初の開発合宿（60人規模）を行いました

この記事は [freee Engineers Advent Calendar 2016](http://qiita.com/advent-calendar/2016/freee) の 3 日目です。

こんにちは、freeeでエンジニアをやってます @yo_waka です。
先日弊社で初の試みとなる開発合宿を1泊2日で実施しました。初めてなのに小規模開催ではなく開発全員で開催した結果いろいろと得たものも多かったので、そのときのブログでも書こうと思います。

## やりたいこと

- みんなが楽しんで開発だけに集中できること
- 開発全員（およそ60人）で行うこと
- 初ということもありまだ実績がないので予算はなるべく抑えること

1番目のは開発合宿なので当然として、2番目と3番目は予算と規模は相反するものなので折り合いをつけるのが大変なやつ。
予算の具体的にいくらだったのかはお弁当制度（会社の社食に招待できる）があるので直接聞いてくださいw

## 場所について

前述の予算感などと合わせ、今回の拠点は[千葉県にあるリソル生命の森](https://www.seimei-no-mori.com/study_training/room.html)になりました。
敷地内でWi-Fiが使えること、100人クラスの会議室、宿泊施設が併設されていることなどもろもろの条件を満たしていたことが採用の理由となります。
また、弊社はお子さんがいるエンジニアも多いので、会社がある五反田との2箇所開催としています。

なお、宿の候補やプランについては旅行代理店を通してやりとりをしていました。一定以上の規模の場合は宿選びのコストも馬鹿にならないので、全体感としてはお得です。

## みんなが楽しんで開発だけに集中できること

### 自分で考えたものを作るということ

自分が作りたいと思うものを作るのが楽しいに決まっています（もちろん業務にまったく関連性がないものをやるのはNGですが）。
事前にスプレッドシートを用意して各エンジニアには当日やろうと思っていることを書いていってもらうようにしました。
たった1日でこんなにアウトプット出るのというボリュームと期待感を共有できる、というのと、もし似たようなことをやろうと思っていたり、やってみたいことが書かれていたりしたらその人と一緒にやってみるという動きも期待していました。実際数人のチームもいくつか生まれて、1人では厳しい課題にチャレンジしていたところもありました。

### 集中できるということ

普段はカスタマーサポートやセールスからの問い合わせなどSlackで来ることが多いのですが、事前にこの日は開発合宿を行いますというアナウンスをしていたためか、当日はまったく問い合わせがなかったという奇跡。
集中が途切れないというのは特に1泊2日という短い合宿においては本当に大切で、弊社のbiz&サポートチームの開発への理解があっての合宿でもありました。

## 様子です

会議室での開発の様子です。ルータは持ち込んで自分たちで設置などしました。
![IMG_20161007_131707.jpg](https://qiita-image-store.s3.amazonaws.com/0/44455/d984b885-ba3a-3e08-7d04-ed1ed847c67d.jpeg)

屋外での開発も気持ちよさそうでした。
![DSC_0387.JPG](https://qiita-image-store.s3.amazonaws.com/0/44455/77c7f03e-2f65-ac4e-b371-3b58db4026cd.jpeg)

ご飯は予算を削って自分たちでカレーを作るなどしました。結果としてチームビルディングにもなってよかったです。
![IMG_20161007_181828.jpg](https://qiita-image-store.s3.amazonaws.com/0/44455/6f9fec14-f09a-9aa7-d7e8-9845844c34db.jpeg)

夜はロッジ内で開発してました。ある意味ここからが本番でした
![DSC_2008.jpg](https://qiita-image-store.s3.amazonaws.com/0/44455/7c932970-4035-c3b1-1854-d6d75d0eb597.jpeg)

## 成果

たくさんのアウトプットが実際にユーザーさんの元にデプロイされていますが、僕は同僚の @nasa4w と組んでサービスのパフォーマンスチューニングを行い、API周りのレスポンスタイムを全体的におよそ2倍速にしました。

下はとあるAPIのNewRelicレポートですが、緑のエリアは各APIで共通で叩いていた処理で、とあるタイミング（合宿前/後）で綺麗に無くなっています。
![Pasted image at 2016_10_25 19_57.png](https://qiita-image-store.s3.amazonaws.com/0/44455/57f9fbe6-90ca-5605-9de7-6ab70984b635.png)

その他にマイクロサービスの叩き方を見直すなどして大幅なパフォーマンス改善を実現しました。


内部的な成果として、合宿後に取ったアンケートでは、概ね満足度の高かった模様です。
![スクリーンショット 2016-12-03 11.52.40.png](https://qiita-image-store.s3.amazonaws.com/0/44455/594f92e7-491a-ca39-78ff-a35d9236bf3a.png)

また、「いつかやりたいと思っていたことを終えることができて、スッキリした」、「普段の働き方を見直すきっかけになった」という人もいたり、「集中して開発することの価値を再考できた」という人も多くて嬉しい限りでした。

逆に改善点としては、「ガチで集中してるので頻繁にやるのは無理」「温泉がほしい」「遠方はしんどい」「現地と五反田の空気の違い」などが挙げられました。
特に家庭の事情などで現地に来れない人たちがいるのを考えると、2拠点で同じ温度感を共有できるような仕掛けは次回以降の改善点かなと思っています。

開発合宿は楽しいし気づきも多いので、いろんな会社でもやってみるといいと思います！

## まとめ

開発合宿は2年くらい前からやりたいやりたいと騒いでいたので、とてもやりたかったことだったのですが、開発が20人、40人と人数が増えるに従ってだんだんと開催が難しくなってきていました。
そんな中で今年からeng-hmctという社内のエンジニアのためのイベントを企画・運営するチームが立ち上がり、LT大会や打ち上げといった全員で行うイベントを運営するノウハウが溜まるようになり、これで組織立って開発合宿を実行できる機運が高まりました。
開発合宿やりたいけど、1人ではちょっと・・という場合にチームでもって企画や説得にあたれるのは心強いです。

freeeではサービスの開発も、開発組織を楽しく運営するためのイベントも運営してみたい[エンジニアを募集しています](https://jobs.freee.co.jp/)！

4日目となる明日は、freeeが誇るERPデータ設計の巨匠こと @yebihara さんです。お楽しみに！
ランキングコンテンツ作成時のテーブル設計や個別の順位取得する時の参考

年に数回の頻度であるが、ランキングのコンテンツはある程度やっております。
投票テーブルから（下記でいうところのvote）毎回sumして結果を出すのも
なんだかなと思ったので、今回はカウントアップしつつ、ログも残すという方法を試してみた。

以下、簡単に説明を記述する。
実装はcakephp2.xを使ったが、別に言語やフレームワークは関係なく
ランキングの実装法として参考にしてもらえれば幸いである。
（ポイントやお金が絡む場合はもう少し実装を深く考える必要があるので、そのケースは除いて欲しい）

まず、前提として
・特に投票に制限はない（制限があっとしてもアプリ側でcookie 使うなりなんなりしてください）
・投票はその商品に対して投票ボタンみたいなものを押せば投票完了とする。
ものとする。

まずテーブル構成から、トリガやビューとかは使わないものとして

```
table : products
id | name | count
------------------
1  | a    | 0
2  | b    | 0
3  | c    | 0
4  | d    | 0
(略）
```

みたいなテーブルを用意し、これとは別で投票テーブルを持つ（なんだかんだ履歴残しておいた方が安心だから）

```
table : vote
id | product_id | createdate
--------------------------------------
1  | 1　　　　　 | 2016/12/1 00:00:00
2  | 2　　　　　 | 2016/12/1 00:00:00
3  | 3　　　　　 | 2016/12/1 00:00:00
4  | 5　　　　　 | 2016/12/1 00:00:00
(略）
```

それで投票ボタンが押された時に、voteテーブルへInsertしてかつ
productのテーブルの該当商品のcountを一個づつ、プラスしていく。

この方式であれば、個別の順位が知りたい時は
```
SELECT (SELECT COUNT(*) FROM products AS b WHERE a.count < b.count) + 1 AS rank FROM products AS a WHERE id = ".$id." ORDER BY a.count DESC";
```
を実行すれば個別の順位が取得できる。

一点注意が必要で、上記SQLは、同列順に対応しているので、ランキング一覧を出す時は
```
SELECT * FROM products ORDER BY count DESC;
```
などしてcountが多い順でデータを取得したのちに、個別にループさせて
```
SELECT (SELECT COUNT(*) FROM products AS b WHERE a.count < b.count) + 1 AS rank FROM products AS a WHERE id = ".$id." ORDER BY a.count DESC";
```
を実行し、結果を配列等に入れてviewへ渡す、必要がある。

表示件数にもよるが、1ページあたりの表示数がしれている場合はあんまり重たくなりにくいだろうし
これぐらいの実装で良いのではないかと思う。
Linux版 VMware Horizon ClientをFedoraにインストールしてみる

インストール後にエラーが出たので、その修正手順も併せて記載しておきます。

- Horizon Clientのバージョン：4.2.0 64-bit
- Fedoraのバージョンは21です。

# ダウンロード
VMwareサイトより、Horizon Client for Linuxをダウンロードする。
今回ダウンロードしたファイルは、`VMware-Horizon-Client-4.2.0-4329640.x64.bundle`

# インストール
ダウンロードしたファイルをインストールする

```
# bash ./VMware-Horizon-Client-4.2.0-4329640.x64.bundle
```

インストール後、シェルからコマンドで起動すると、ライブラリlibudev.so.0が無いとのエラーが表示された。

```
# vmware-view
/usr/lib/vmware/view/bin/vmware-view: error while loading shared libraries: libudev.so.0: cannot open shared object file: No such file or directory
```

解決方法として、libudev.so.1へのシンボリックリンクを設定する。

```
# ln -s /usr/lib64/libudev.so.1 /usr/lib64/libudev.so.0
```

これで、起動できるようになった。
メイリオの等幅フォントを生成する方法

# はじめに
「Windowsのフォントでメイリオが一番好きだけど、等幅じゃないのがな…」と思っている人は多いと思います。私もその1人です。
しかし、通常のメイリオから等幅フォントを生成するパッチを作ってくださった素晴らしい方がいらっしゃいます。
これでプログラミングにも使用できるし、メールのレイアウトが崩れることもなくなります！
※ライセンス的に個人でのみご使用ください。

# 環境
- OS：Windows 8.1 Pro 64bit

# 生成方法
## 生成パッチのダウンロード
[こちら](http://www.geocities.jp/meir000/meiryoKe/)から生成パッチをダウンロードし、解凍します。
私はWindows 8.1なので、「meiryoKe_gen_6.20rev1.zip (519KB) - Windows 8.1」を選択しました。

## オリジナルフォントのコピー
私の環境だと、オリジナルのフォントをコピーしないと生成に失敗したため、「meiryoKe_gen_6.20rev1.exe」と同じフォルダにメイリオのオリジナルをコピーします。
コントロール パネル→デスクトップのカスタマイズ→フォント→メイリオ(右上の検索からだと早く探せます）
から「メイリオ レギュラー」と「メイリオ ボールド」をドラッグ&ドロップしてコピーします。

## 生成パッチの実行
「meiryoKe_gen_6.20rev1.exe」を実行します。
「正常完了」と表示され、以下の2つのファイルが生成されていたらOKです。

| ファイル名 | サイズ |
|:---|:---|
|meiryoKe_620r1.ttc|11,229,948 byte|
|meiryoKeB_620r1.ttc|10,922,588 byte|

## 生成したフォントのインストール
エクスプローラーでTTCファイルをダブルクリック→インストール
2ファイルともインストールします。
フォントに以下の4つが追加されたらOKです。

|フォント名|
|:---|
|MeiryoKe_Console レギュラー|
|MeiryoKe_Gothic|
|MeiryoKe_PGothic|
|MeiryoKe_UIGothic|

あとは各ソフトウェアごとにフォントを設定してください。
4つほど生成されましたが、「MeiryoKe_Console」を使用するのがいいと思います。

# 注意点
オリジナルに比べて行間が狭いため、ソフトウェアによっては行間を調整する必要があります。
Thunderbird（メーラー）だとStylishで以下のように記述し、行間を1.5emほど空けるといい感じになりました。

``` css
*{line-height:1.5em !important;}
```
PostCSSのASTを操作する

PostCSSには2日目で説明した、ASTを簡単に操作するためのAPIが用意されています。ASTはJavaScriptのオブジェクトなので、JavaScriptの構文で直接変換させることもできますが、より便利に、そして効率の良い処理をするためにも提供されているAPIを使います。

また、PostCSSの全てのAPIはAPIドキュメントで確認することができます。

http://api.postcss.org/

## ノードの種類

まずはASTのノードの種類です。PostCSSのASTのノードは以下の5つです。

- `Root`ノード: ASTの1番上のノード（`Root`ノードは親ノードがない）
- `Rule`ノード: 1つのルールセット
- `AtRule`ノード: 1つの`@`ルール
- `Declaration`ノード: 1プロパティ宣言
- `Comment`: 1つのコメント

これらは実装的には PostCSSの `Node` クラスを継承したもので、`Node.type` を参照することで、それが何のノードかを知ることができます。

## ノードの探索

次にノードを探索するAPIを見てみましょう。以下の `input.css` を入力としたときの例を挙げます。

```css
.foo {
  font-size: 1.2rem;
}

.bar {
  color: pink;
}

@media (max-width: 415px) {
  .foo {
  	font-size: 1rem;
  }
}
```

### `Rule`ノードの探索

`Rule`ノードは `container.walkRules([selector], callback)` というAPIを使って探索することができます。 `container` というのは「子ノードを持つことができる（親ノードになることができる）ノード」である `Container` クラスのインスタンスです。`Root` ノード、`Rule` ノード、`AtRule`ノードがそれに当たります。


```js
var css = fs.readFileSync('./input.css');
var root = postcss.parse(css); // `input.css`をパースしてASTを返す

root.walkRule(function (rule) {
  // 全てのルールセットを探索
});
```

`walkRules()` は第一引数にセレクタ名を文字列（または正規表現）で指定することもできます。

```js
root.walkRules('.foo', function (rule) {
  // 全て`.foo`セレクタのルールセットを探索
});
```

### `AtRule`ノードの探索

`AtRule`ノードは `container.walkAtRules([name], callback)` というAPIを使って探索することができます。第一引数に`@`ルール名を指定することもできます。

```js
root.walkAtRules('media', function (atrule) {
  // `@media` の@ルールを探索
});
```

### `Declaration`ノードの探索

`AtRule`ノードは `container.walkAtRules([prop], callback)` というAPIを使って探索することができます。第一引数にプロパティ名を指定することもできます。

```js
root.walkDecls('font-size', function (decl) {
  // `font-size`プロパティのプロパティ宣言を探索
});
```

### `Comment`ノードの探索

`AtRule`ノードは `container.walkAtRules([prop], callback)` というAPIを使って探索することができます。

```js
root.walkComments(function (comment) {
  // 全てのコメントを探索
});
```


## ノードの挿入・移動・削除

`container.insertBefore(exist, add)`, `container.insertAfter(exist, add)` はそれぞれ、ノードの指定した子ノードの直前と直後に新しくノード(`add`)を追加するためのAPIです。

```js
rule.insertBefore(decl, { prop: 'color', value: 'pink' }));
```

`node.moveTo(newParent)` は、そのノードを削除し、指定したノードの子要素に追加するものです。

```js
atrule.moveTo(atrule.root());
```

`node.remove()` はノードを削除するためのAPIです。

```js
if ( decl.prop.match(/^-webkit-/) ) {
  decl.remove();
}
```

---

今日はPostCSSのASTを操作するためのAPIをいくつか紹介しました。これらのAPIを使って、ASTを変換するプラグラムがPostCSSのプラグインです。簡単なプラグインの実装を読んでみると、さらに理解が深まると思います。

明日は、これらのAPIを使って実際にPostCSSのプラグインの書き方を説明します。
CircleCI + KnapsackProでRailsのテストを高速化させる

# CircleCIのテスト並列実行
* CircleCIは複数のコンテナを利用してテストを並列実行させることができる。
* コンテナを増やすとお金がかかる。
* コンテナを増やすだけテストを早く終わらせることができる。

# 問題点
* コンテナに割り振ったテストの実行時間にばらつきがあると、**最終的なテストの完了時間＝最もテストに時間がかかってるコンテナ**となってしまう。

# 解決策
* テストファイル毎の実行時間を保存して、再度テストする際は前回の実行時間を元に各コンテナにテストファイルを配分する。

# Knapsack Proとは
* https://knapsackpro.com
* 各種CIサービスに対応した**テストを分割する**ことだけに特化したサービス。
* [CircleCIのドキュメント](https://circleci.com/docs/parallel-manual-setup/)にさり気なく書かれている。

# 使い方
基本的には https://github.com/KnapsackPro/knapsack_pro-ruby にかかれている通り設定を行えばよい。

## Gemfile

```ruby
group :test, :development do
  gem 'knapsack_pro'
end
```

## bundle install

```
$ bundle install
```

## Rakefileの最終行に追記

```ruby
KnapsackPro.load_tasks if defined?(KnapsackPro)
```

## 修正方法の確認

```
$ bundle exec rake knapsack_pro:install
```

このコマンドで何かがインストールされるわけではない。質問に答えていくと修正すべきソースの箇所を教えてくれる。
rspecを利用している場合はspec_helper.rbに次のコードを書けばよい。

```ruby
require 'knapsack_pro' #先頭

# 略

KnapsackPro::Adapters::RSpecAdapter.bind #最後あたり
```

# circle.ymlの修正
次のように修正する。私の場合は`Turnip`を利用しているので、環境変数`KNAPSACK_PRO_TEST_FILE_PATTERN`でテストファイルのパターンを指定している。`rspec`のみであれば環境変数の指定は不要。

```yaml
test:
  override:
    - KNAPSACK_PRO_TEST_FILE_PATTERN="spec/**/*{_spec.rb,.feature}" bundle exec rake knapsack_pro:rspec:
        parallel: true

```

# TOKENの取得と登録
* https://knapsackpro.com からユーザー登録を行いTOKENを取得する。
* CircleCI -> Projectの設定 -> Environment VariablesにKNAPSACK_PRO_TEST_SUITE_TOKEN_RSPECというNameでTOKENを設定する。
![project_setting.png](https://qiita-image-store.s3.amazonaws.com/0/15147/065bfa12-2c5c-bbf0-ac72-e6879565c63c.png)

# ハマった箇所
* vcr.gemを利用している場合`spec_helper.rb`に次のコードを書くように指示されるが、私の環境ではうまく動かなかった。

```ruby
WebMock.disable_net_connect!(:allow => 'api.knapsackpro.com') if defined?(WebMock)
```

[こちらに](https://github.com/KnapsackPro/knapsack_pro-ruby/issues/6)書かれているように`Rakefile`の最後に書くことによってうまく動作した。

# 効果
## before
29分37秒
![before.png](https://qiita-image-store.s3.amazonaws.com/0/15147/137c2fb1-397a-2d04-b19f-7fbae45366bc.png)

## after
22分50秒
![after.png](https://qiita-image-store.s3.amazonaws.com/0/15147/c33e8d09-b28c-021d-37c6-ea09fa29fbcb.png)

# まとめ
完璧ではないが、そこそこいい感じに実行時間が平均化される。
https://knapsackpro.com/dashboard で各テストの実行時間を見ることができるので遅いテストの発見に役立つ。
xcode8 のカーソル色変更

xcodeのsource editorは「dusk」にしているので、黒いカーソル見えない。

xcode 7.3の時は下記のやり方でカーソルを白くしたが、xcode8はうまくいかない。
curl -L https://raw.githubusercontent.com/egold/better-xcode-ibeam-cursor/master/install.sh | bash

ネットで調べたら、xcode８のやり方を見つけたので、メモしておく。

１、Mousecape（フリーのMac カーソル管理ツール）をダウンロード
　　https://github.com/alexzielenski/Mousecape/releases/tag/0.0.5

２、カーソルをダウンロード
　　https://gist.github.com/alpriest/1fb8ab2c7406c7520b147a30f3f99c6b

３、ダウンロードしたカーソルをMousecapeにimport

![image](https://qiita-image-store.s3.amazonaws.com/0/113437/f049fca4-3d30-78c0-1990-41a80e9fee12.png)

4、再起動後も効くようにMousecapeをMacのログインアイテムに追加
　Macの「システム環境設定」　→　「ユーザとグループ」　→　「ログイン項目」にMousecapeを選択

以上で変更設定完了。
WP Super Cacheの導入で、パーマリンク構造エラーと言われました

WordPressにWP Super Cacheを入れたらエラーが出ました。

# WP Super Cache導入でエラー
インストールをして有効にしたところ下記の絵ラガー出ました。

```bash:パーマリンク構造エラー
パーマリンク構造エラー

A custom url or permalink structure is required for this plugin to work correctly. Please go to the Permalinks Options Page to configure your permalinks.
```

<img width="968" alt="WP Super Cacheでパーマリンク構造エラー" src="https://qiita-image-store.s3.amazonaws.com/0/1624/69b2407b-f399-1ea9-4bd5-ae66c7c94f4c.png">


カスタムURLかパーマリンクの構造が必要ですと書いてあります。
パーマリンクに行けともありますね。

# パーマリンクを投稿名に変更
「設定」 > 「パーマリンク設定」から、『共通設定』の見出しにあるチェックボックスを、**投稿名**に変更しました。

# 再度確認
パーマリンク構造エラーの表示が消えました(☝ ՞ਊ ՞)
QIITA 韓国のコミュニティを作成しました。

QIITA 韓国のコミュニティを作成しました。
https://plus.google.com/u/0/communities/117103269653022549734

IT 会社を運営しています
WWW.NEXPLE.NET

DRUPAL 韓国のコミュニティ 会員 462人U
http://cafe.naver.com/drupalgroup

AQUIA 公式パートナー
https://www.acquia.com/partners/showcase/nexple

DRUPAL マニュアル(韓国語) PDF 30 PAGE
http://cafe.naver.com/drupalgroup/274

PYTHON 韓国のコミュニティ 会員 352人
http://cafe.naver.com/pythongroup
PYTHON マニュアル(韓国語) PDF 51PAGE
http://cafe.naver.com/pythongroup/238

http://www.insubstory.com/ja

日本語のウェブサイトです。(Drupal 8)
littleBitsを3DプリンターやオリジナルBitを作るときの参考サイト

littleBitsを3DプリンターやオリジナルBitを作るときの参考にしていたサイトの技術情報です。

![image_20161203_112802_7.jpg](https://qiita-image-store.s3.amazonaws.com/0/56170/69cea4aa-bfec-a5b2-b9c4-fdb2e6057770.jpeg)

# 経緯

以前、私のブログで以下のような記事を書いていました。

* <a href="http://www.1ft-seabass.jp/memo/2015/11/07/nakano-3dprinter-stl-data-1st/" target="_blank">中野「あッ3Dプリンター屋だ!!」さんにSTLデータをお願いしたメモ – 1ft-seabass.jp.MEMO</a>
* <a href="http://www.1ft-seabass.jp/memo/2015/11/02/dmm-make-littlebits-lego/" target="_blank">DMM.makeでlittleBitsとLEGO連携パーツ（フリーCADデータ）を出力したメモ – 1ft-seabass.jp.MEMO</a>
* <a href="http://www.1ft-seabass.jp/memo/2015/11/10/littebits-lego-3dprinter-try-and-error-1/" target="_blank">littleBitsマウントボードと連携するLEGOパーツの試行錯誤メモ 前編 – 1ft-seabass.jp.MEMO</a>
* <a href="http://www.1ft-seabass.jp/memo/2015/11/10/littebits-lego-3dprinter-try-and-error-2/" target="_blank">littleBitsマウントボードと連携するLEGOパーツの試行錯誤メモ 後編 – 1ft-seabass.jp.MEMO</a>

流れの説明の意味合いが強く情報を見つけるのは大変かなと思い再度まとめます。

# なんといっても寸法情報

なにをはじめるにも正確な寸法が重要です。普通に探すとあまり見つけられなかったのが良い思い出です。

<a href="http://littlebits.cc/tips-tricks/3d-printed-parts-and-accessories" target="_blank">Tips &amp; Tricks: 3D Printed Parts And Accessories</a>

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/7c5fc17d-75eb-5d3c-863f-9646460e0b69.png)

下部のリンク集から拾うことができます。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/b8a0395f-4156-97c8-fa50-e20ccbee95c5.png)

個人的おすすめは、Vectorファイルの方。

![image](https://qiita-image-store.s3.amazonaws.com/0/56170/9222391e-eabb-1aec-ede6-1beafe9daf2c.png)

Illustratorデータで取り出しやすいです。Autodesk 123DにはSVG取り込みがあるのでIllustratorデータから変換で使うか、Illustratorで見る寸法が0.1ミリ単位で正確な印象なので、値だけを参考に寸法通りのボックスを作って当たりをつけるのも良いと思います。

<a href="https://dotstud.io/blog/cocoabit-littlebits-milkcocoa-nefry/" target="_blank">電子回路を簡単に学べるlittleBitsをインターネットに繋げよう！「CocoaBit」を開発中</a>にある、わみさんが作られたCocoaBitでの開発に情報をお伝えするときにもこの寸法情報を使いました。

# 3DプリンターとlittleBitsのいろいろな情報を知るなら

上記のTIPS集にも書かれていますが、3Dプリンターの3Dデータモデルを共有するサイトが多々あり、そこでlittleBitsで検索すると情報が出てきます。

<a href="http://www.shapeways.com/search?q=littleBits&type=" target="_blank">littleBits - Shapeways 3D Printing Search Results</a>

<a href="http://www.thingiverse.com/littleBits/designs" target="_blank">About littleBits - Thingiverse</a>

ただ、難しいところとしては、ある遊びや用途が特化しすぎのものもあって扱いにくい場合があること。また、寸法も手持ちの3Dプリンターの癖に合わせて、多少盛ったり削ったりしていて厳密な調整をしたいときに、苦労するかもしれません。

使うときは、上記を納得して使うか、シンプル目のものを参考にちょっとずつ改良するようにしましょう。

個人的にはyeggiという3Dデータ検索サイトで3Dデータモデル共有サイトを横断検索をして、たまにアイデアの参考にして幸せな気持ちになっています。

<a href="http://www.yeggi.com/q/littlebits/" target="_blank">&quot;littlebits&quot; 3D Models to Print - yeggi</a>

# littleBitsはいろいろなものにつながる

このように、littleBitsを扱っているとlittleBitsと工作や電子工作という広がりますが、さらに工作から外側のを面白くしたくなり3Dプリンターや3Dモデリングの入り口にも入ることができます。（いつの間にやら案内されてしまったというのもありますが！）

使いながら学びの幅が広がっていくlittleBits。是非使ってみて下さい。
Markdownの良く分からなかったことまとめ

# Markdownの良く分からなかったことまとめ

## [目次](#目次)

1. [記号](#記号)
1. [HTMLタグ](#htmlタグ)
1. [体裁](#体裁)


## [記号](#記号)

### 特殊記号の入力
　特殊記号(\*_\\\`\#\+\-\.\!\[\]\{\}\(\))をそのまま表示したい場合はバックスラッシュ"\\"でエスケープすること。
※環境によっては円マークと書こうとしたら、そもそもUnicodeで書くから円マークのわけはなかった…。
参考：[Markdownで特殊文字をそのまま表示する](http://step-learn.com/markdown/20141022-special-char.html)

### バッククォートをインラインコードに含めたい

　ここが詳しい：[Markdown でバッククオートを含むインラインコードを書くには \- Qiita](http://qiita.com/uasi/items/251f4e66ceb95c043b3d)

　例：``` `` ```（バッククォート2個）を書きたい場合は以下のようにする

	\`\`\` \`\` \`\`\`


## [HTMLタグ](#htmlタグ)

### &lt;br&gt;を入力する
　半角スペース2個を行末に入れる。
※QiitaのMarkdownの場合は改行1個に続けて書くと&lt;br&gt;と同じ効果になる模様
参考：[Markdown、行末に半角スペース2つで&lt;br&gt;が挿入できる \- ももいろテクノロジー](http://inaz2.hatenablog.com/entry/2013/05/25/231204)


## [体裁](#体裁)

### 目次
　Markdownの場合、以下のように目次（doctoc）をつけることができる。表示ブラウザによっては日本語の目次が使えないことがあるため注意。また、大文字と小文字は区別される。たとえばQiitaでは大文字の見出しのアンカーは全て小文字に変換されるため、アンカーを小文字にするとよい。
　タイトルをクリックしたときに、そこが画面の一番上になるように、個人的には以下のようにタイトルを記載している。

```Markdown:doctocの例
	- [hoge](#hoge)
	- [fuga](#fuga)
	
	...(中略)...	
	
	## [hoge](#hoge)
	## [fuga](#fuga)
```

　Markdownを解釈するシステムによっては、Markdownだけでアンカーがうまく効かない場合がある(Markdown Preview Plusはこれに該当)。
　その場合は、\<a\>タグを利用し、アンカーをつける。

```Markdown:doctocの例（アンカーがうまくいかない場合）
	- [hoge](#hoge)
	- [fuga](#fuga)
	
	...(中略)...	
	
	<a id = "hoge"></a>
	## [hoge](#hoge)

	<a id = "fuga"></a>
	## [fuga](#fuga)
```

参考：[Markdownでのアンカーリンクの活用と目次の作成方法（テンプレ） \- それわかるぅ〜](http://emeraldwar.hatenablog.com/entry/2015/08/26/235955#anchor2)

※Qiita + Firefox45.5.1では、このページの日本語の目次がきちんと作用することを確認済。


### 番号による箇条書き
　番号をつけるときは接頭辞に「1.」とだけ書くのが楽で後からの追加・削除が楽。

```Markdown:番号による箇条書きの例
1. hoge
1. fuga
1. mogu
```

このように記載しても、次のように正しく番号がつけられる。

1. hoge
1. fuga
1. mogu

### 注釈の[^注釈]: は、最後の半角スペースまでが必要
　コロンの次に続けて注釈文を書くと正しく解釈されない（ハマった）

### 注釈と箇条書きは両立しない

　少なくともQiita上では注釈と箇条書きは両立しない模様。


```Markdown:注釈と箇条書きを両立させようとする書き方（成立しない）
　いろはにほへと[^1]

- [^1]: ちりぬるを
```

### 注釈の文字列は、連番ではなく意味を持たせたほうがよい

　後から内容を入れ替えたときに対応できるように、説明内容に即した文字列にしておいたほうがよい。


```Markdown:後から内容を入れ替えたときに、注釈文字列と注釈の番号がずれる例
　沖縄と大阪を入れ替えると、注釈文字列が1→3→2と並んで分かり辛い。直すのも面倒。
　　北海道[^1]
　　沖縄県[^2]
　　大阪府[^3]

```

```Markdown:後から内容を入れ替えても影響の少ない例
　沖縄と大阪を入れ替えても注釈の文字列は順番を示していないため、入れ替えの影響を受けない
　　北海道[^HOK]
　　沖縄県[^OKI]
　　大阪府[^OHS]
```


### 表の書き方

　こちらが大変分かりやすいです：[Qiitaのテーブルの書き方についてまとめた](http://qiita.com/zakuroishikuro/items/f33929eab9d55c5bd073)


### 表の整形したいよね的話
　tidy-markdownがとても便利そう。（自分で作ろうとしたが既にあったか……）

- [ATOMエディタでMarkdownを編集する時に役立つプラグイン \| cupOF Interests](http://co.bsnws.net/article/136)
- [Atom Proxy環境 Windows7 でいくつかのPackageがインストールできない問題の解決法 \- momolog](http://momocus.hatenablog.com/entry/2016/07/12/212705)
フィボナッチ数と素数の実装(python)

復習。。。

```python
from numpy import *
```
してます。

## フィボナッチ数

再帰なし

```python
def Fibonacci(x):
    if x == 0:
        return array([0])
    prepre, pre = 0, 1
    lst = [0, 1]
    for i in range(1, x):
        pre, prepre = pre + prepre, pre
        lst += [pre]
    return array(lst)
```

再帰あり

```python
def Fibonacci_recursive(x):
    lst = []
    def f(x, lst, is_add=False):
        if x > 1:
            if is_add:
                lst += [f(x-1, lst, True) + f(x-2, lst)]           
            return f(x-1, lst) + f(x-2, lst)
        elif x == 1:
            if is_add:
                lst += [0, 1]
            return 1
        else:
            if is_add:
                lst += [0]
            return 0
    f(x, lst, True)
    return array(lst)
```

## 素数

```python
def prime(N):
    a = arange(2, N+1)
    for i in range(2, N+1): 
        a = a[where((a <= i) + (a% i != 0))]
    return a
```

for文を使わず実装する方法を思いつきたいです。
MySQLのユーザ一覧表示でエラーが出た

MySQL5.7.16を使っていて、ユーザ一覧表示しようとして、

```
mysql> select Host, User, Password from mysql.user;
``` 
と入力したら、

```
ERROR 1054 (42S22): Unknown column 'Password' in 'field list'
```
となって、驚いた。壊してしまったかと思いました。

MySQL5.7から、パスワードを格納しているカラムが「password」から「authentication_string」に変更されたんですね。


なので
```
select Host,User,authentication_string from mysql.user;
```
でいつものように表示されました。

+----------+------+--------------+
|　Host　　　|User|authentication_string |
+----------+------+--------------+
|　localhost　|root|#################|
+----------+------+---------------+
heroku に selenium 利用目的で Chrome を入れる

# buildpack 
heroku の buildpack でchromeを追加する

## buildpack の元
https://github.com/dwayhs/heroku-buildpack-chrome

## buildpack の指定方法
"Using a custom Buildpack"
https://devcenter.heroku.com/articles/buildpacks#using-a-custom-buildpack

## こうなる
```
heroku buildpacks:set https://github.com/dwayhs/heroku-buildpack-chrome --app something_my_appname
```
Rails で金額、小数点、Decimal を扱う

# 小数点の問題

消費税計算でありがちな浮動小数点問題
http://easyramble.com/rails-migration-with-decimal.html

# BigDecimal の指定
Railsマイグレーションでdecimal型の精度（桁数）を指定
http://easyramble.com/rails-migration-with-decimal.html

# 通貨型
Postgresqlのデータ型一覧とRailsのマイグレーションの指定方法
http://ruby-rails.hatenadiary.com/entry/20150607/1433606267
通貨型良さそうだが、、pg向けか。

# Migration
Rails API PostgreSQL money
http://api.rubyonrails.org/classes/ActiveRecord/ConnectionAdapters/PostgreSQL/ColumnMethods.html#method-i-money
pg依存？

# Gem
Money Rails
https://github.com/RubyMoney/money-rails
ちょっと複雑か気がする。。
[Qiita改善案AdventCalendar] Organization一覧ページをContribution順に並び替えてほしい


タグページにそのタグに関する投稿で、多くのContributionを得ているOrganizationが表示されるようになりました。
http://blog.qiita.com/post/153888164959/organization-ranking-on-tag-page

その機能を実装するのでしたら、こちらのOrganization一覧ページもOrganizationのContribution数で並び替えて表示してほしいです。
http://qiita.com/organizations

Aboutが記載されている組織を絞り込む機能はすでにありますが、Aboutが記載されていることよりも、Contributionが多いことの方がその組織の情報発信力が強いのではないのかと思います。

明日は@bezeklikさんの「「いいね」が使えないのはどう考えてもQiitaが悪い」です。

# 余談
皆様から沢山のいいねを頂いたおかげで、12/2の時点でAdventCalendarランキングの5位になることができました！！
それだけ、皆さんがQiitaを良くしていきたいということだと思います。

まだまだこのAdventCalendarには空きがありますので、Qiitaについての改善案をお持ちの方をお待ちしております。

http://qiita.com/advent-calendar/2016/ranking/feedbacks

![スクリーンショット 2016-12-02 23.39.33.png](https://qiita-image-store.s3.amazonaws.com/0/74551/b17dbe5b-f485-9b5d-5849-55c29eea231c.png "スクリーンショット 2016-12-02 23.39.33.png")
create-react-appのbuildディレクトリをzipで共有する

# 概要
create-react-appでモックアップを作った。
「zipを解凍してindex.htmlを開けばOKですよ！」と言って共有したい。

# 解決策
package.jsonにhomepageを追記する。

```js:package.json
{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "devDependencies": {
    "react-scripts": "0.7.0"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
```

あとは普通にbuildして、zip圧縮して渡せばOK。
以上です。
第１回 デザイナー＆エンジニアの為の"さんすう"入門 メモ

2016/12/02 コワーキングスペース coedoにて
講師 うえだうえおうぇあ 上田氏

# はじめに

エンジニアでもさんすうの基本をわからずにやっていることが多い。
改めて、基本の基本に立ち返ってみようというスタンスの勉強会です。

# 漢数字・ローマ数字・アラビア数字の違い

アラビア数字がすごい
桁が増えるたびに種類が増えない
数字の順番が確定しているから、n進数にも対応しやすい。
↓
アラビア数字自体よりも、位取り記数法がすごい。

あたりまえじゃんではなく、これはどういうことかを考える

# 位取りとはなんぞや

1000 = 10 x 10 x 10 = 10^3
100 = 10 x 10 = 10^2
10 = 10  = 10^1
1 = 10・・・？ = 10^0

0乗を1とすると数式などが立てやすいので、定義された

1234(10) = 10^3 x 1 + 10^2 x 2 + 10^1 x 3 + 10^0 x 4

111001 = 2^5 x 1 + 2^4 x 1 + 2^3 x 1 + 2^2 x 0 + 2^1 x 0 + 2^0 x 1 

分配法則の証明は次回！

# n進数の変換

10進数から2進数の変換を割り算のあまりで計算する方法、やり方だけで満足していない？

やっていることは分配法則で各項に割り算を分配している

1234(10) = 10^3 x 1 + 10^2 x 2 + 10^1 x 3 + 10^0 x 4

1234 / 10 = 10^2 x 1 + 10^1 x 2 + 10^0 x 3 あまり 4
123 / 10 = 10^1 x 1 + 10^0 x 2 あまり 3
12 / 10 = 10^0 x 1  あまり 2
1 ・・・最後にのこる

ひたすら割ってあまりを並べると外見上その数が並んでいくね！
同じ考え方で2進数にすることができますね。という説明ができる。

＜10進数→2進数変換の割り算の絵がはいりつつ＞

57(10) = 111001(2)

# 単位のお話

bitとbyte

bit 2進数の1桁分
→ 64bit CPU 1度の計算で2進数64桁が扱える

byte 2進数の8桁分
2^8 - 1 = 255までの整数が表現可能

# コンピュータでの計算

コンピュータで2で割るとは
1101(2) / 2 = 0110(2)
0110(2) / 2 = 0011(2)
0011(2) / 2 = 0001(2)
右シフト あまりは消える
**あまりを退避する処理が入ると一気に重たくなる**

2倍は左シフト

# 図形

円の定義

中心から等距離の点の集合
半径は常に同じ長さ

円周上を点が移動すると、角度が生まれる
→ 三角関数へ

ピタゴラスの定理
a^2 + b^2 = c^2
1 = sin^2θ + cos^2θ

＜b=5,10,15とした図＞

図形記述は、ベクトル座標で表現できる。

三角関数の組み合わせで空間座標も表現できる。。。はず！

# 伝えたいこと

記述する上で、自分だけの言葉ではダメ
数え方というのはものの基本
位取り記数法の原理を理解して話さないと共通の言葉になりません。

# 次回予告

かけ算
りんごが２個乗ったお皿が３皿あります。
りんごは全部で何個ありますか？

# 雑感

先日初学者にn進数について教える機会があったとき似たような説明をしたことを思いだした。
初学者に教えるときに持つべき観点を確認するとともに、自分自身が基礎をとばしている箇所もあるということに気づけてよかった。
次回も都合がつけば参加していく。
Magento開発環境VAM2がMagento2.1.2に対応しました

[Magento Advent Calendar 2016](http://www.adventar.org/calendars/1372)の2日目担当[@kzkiq2nd](https://twitter.com/kzkiq2nd)です。

<= 1日目 [2016年版・Magento2セットアップガイド](https://principle-works.jp/blog/magento2-setup-guide-2016-edition)
=> 3日目 [--](http://www.adventar.org/calendars/1372)

リリースから1年が過ぎ、目に見えて精度が高まっているMagento2もついに2.1系がリリースされましたので、
[Magento日本](https://github.com/Magento-Japan)リポジトリで管理している[VAM2](https://github.com/Magento-Japan/VAM2)をリニューアルし最新版であるMagento2.1.2+PHP7+MySQL5.7 on CentOS7.2に対応しました。

[Magento-Japan/VAM2 （VagrantAnsibleMagento2)](https://github.com/Magento-Japan/VAM2)

# Magento開発環境VAM2とは
VAM2は開発者に向けた開発環境の配布と[公式ドキュメント](http://devdocs.magento.com/)の精査を目的としたVagrant上で動くMagento2の開発環境Ansibleスクリプトです。公式ドキュメントへの準拠に加え、Magento2.1.2時点でのいくつかの公式ドキュメントの誤りに対応しています。（iusのphp7はphp70uじゃなくてmod_php70uとかphp70u-mysqlは無いとか、そういった類い。）

# 利用の注意点
利用方法について詳しくはREADMEを読んでいただくとして、構成における大きな注意点は[ベリテワークスさんの報告](https://principle-works.jp/blog/magento2-setup-guide-2016-edition)にもあるように、日本語環境においてCentOS6,7 + PHP7/5.6の組み合わせはintl拡張とlibicuのバージョン問題によって様々な箇所、例えば日本語入力した内容が消える・開発モードに切り替えた途端エラーとなり停止するなどの相性問題が発生しています。

PHP5.6環境であればlibicuをビルドインストールしintl拡張をPHPに読ませれば対応できるのですが、PHP7.0の場合はpecl経由のintl拡張がmake failするというPHP側の現象（バグ報告あり）が発生しており、PHP7.0を利用しているVAM2でもこの問題は克服できていません。

上記はすでにMagento公式が改修に取り掛かっているということなので現時点だけの現象と考えられます。
本体や公式ドキュメントに修正があり次第、あわせて当スクリプトも修正します。

# その他の構築案内
1. [公式](http://devdocs.magento.com/guides/v2.1/install-gde/bk-install-guide.html) & [日本語ガイド](https://principle-works.jp/blog/magento2-setup-guide-2016-edition)
とにかく厚みのある公式情報と、ベリテワークスさんの手順解説です。

2. [AWS lightsailイメージ起動](https://aws.amazon.com/jp/blogs/news/amazon-lightsail-the-power-of-aws-the-simplicity-of-a-vps/)
東京リージョンはまだですが、今週発表されたAWSのVPSの起動イメージにMagento2が含まれています。

3. [中の人謹製のDockerとCLI](https://alankent.me/gsd/introduction-to-docker/)
実験的な内容ですが、保存サイズが大きくなりがちなMagento2を、Dockerコンテナで軽量に扱おうとするアイデアです。

# 早め早めの素振りで楽しいMagento2ライフを
Magento2.1では早くもPHP5.5への対応を終了し、PHP7+MySQL5.7を推奨環境として挙げています。MySQL5.7もこれまでと初期設定から方法が変わってきていますので、早め早めに触れておくことがMagento2開発には肝要です。

まだまだ地雷は残っていますが、構築の参考にVAM2をぜひご活用ください。


12月も始まったばかり！MagentoAdventCalendar2016、3日目もよろしくおねがいします！
書籍「機械学習と深層学習」のソースコードをRubyに書き換えてみる（nn.c編）

# はじめに

書籍「[機械学習と深層学習](https://www.amazon.co.jp/gp/product/4274218872/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4274218872&linkCode=as2&tag=howtouseexcel-22)」を購入して勉強していたら、C言語で書いてあるプログラムが簡単そうだったので、Rubyで書き換えてみることにしました。

ちなみに、書籍で紹介されているソースコードは以下のURLからダウンロード可能です。

http://www.ohmsha.co.jp/data/link/978-4-274-21887-3/

# nn.c

第4章 ニューラルネット
4.1 ニューラルネットワークの基礎

上記のnn.cをRubyで書き換えてみました。
なお、完全に同一ではありませんので悪しからず。

```rb:nn.rb
# ライブラリの読込
include Math

# 定数の定義
$inputno = 3
$hiddenno = 2
$maxinputno = 100

# 学習データの読み込み
def getdata()

  e = [
    [0.0,0.0],
    [0.0,1.0],
    [1.0,0.0],
    [1.0,1.0]
  ]
  
  return e
  
end

# 順方向の計算
def forward(wh, wo, hi, e)
  
  u = 0.0
  o = 0.0
  
  (0..$hiddenno-1).each do |i|
    u = 0.0
    j = 0
    e.each do |e_val|
      u += e_val * wh[i][j]
      j += 1
    end
    u -= wh[i][j]
    hi[i] = f(u)
  end
  
  o = 0.0
  
  (0..$hiddenno).each do |i|
    o += hi[i] * wo[i]
  end
  
  o -= wo[wo.length-1]
  
  return f(o)

end

# 中間層の重みの初期化
def initwh(n_of_hidden, n_of_row)
  
  w = Array.new(n_of_hidden).map{
    Array.new(n_of_row + 1)
  }
  
  w[0][0] = -2.0
  w[0][1] = 3.0
  w[0][2] = -1.0
  w[1][0] = -2.0
  w[1][1] = 1.0
  w[1][2] = 0.5
  
  return w
  
end

# 出力層の重みの初期化
def initwo(n_of_hidden)
  
  w = Array.new(n_of_hidden + 1)
  
  w[0] = -60.0
  w[1] = 94.0
  w[2] = -1.0
  
  return w
  
end

# 中間層の出力の初期化
def inithi(n_of_hidden)
  
  hi = Array.new(n_of_hidden + 1).map{ 0.0 }
  
  return hi
  
end

# 伝達関数
def f(u)
  
  x = 0.0
  
  if u >= 0.0
    x = 1.0
  else
    x = 0.0
  end
  
  return x
  #return 1.0 / (1.0 + exp(-u))
  
end

# メインプログラム

e = getdata()

wh = initwh($hiddenno, e[0].length)
wo = initwo($hiddenno)
hi = inithi($hiddenno)

n_of_e = e.length

puts "データの個数:#{n_of_e}"

o = 0.0

e.each do |vals|
  o = forward(wh, wo, hi, vals)
  puts "入力: #{vals}, 出力: #{o}"
end
```

# 実行

```sh:
$ ruby nn.rb
データの個数:4
入力: [0.0, 0.0], 出力: 0.0
入力: [0.0, 1.0], 出力: 1.0
入力: [1.0, 0.0], 出力: 1.0
入力: [1.0, 1.0], 出力: 0.0
```

できた！
Aurelii-cliをcloud9で


aureliaって流行ってない？まだまだこれから？流行らなかった？
あまり情報出てこないのはさておいてcloud9で試した際のメモ

# aurelia-cliについて

何も設定せず
`au run --env dev`
とかして起動するとport9000で立ち上がるのがデフォルト。

package.jsonやaurelia_project以下をみる限り、ビルド周りのツールは

* Gulp
* Karma
* BrowserSync

といったあたりをラップしているのがaurelia-cliらしい

# cloud9での実行

## 準備
以下workspaceはBlankで作成。
ターミナル上で
`au new --here`
した環境。

## 設定

`echo $PORT`
してポート番号を確認。
au helpしても特にポート設定は無いようなので、以下のファイルを開いて直接変更
（TypeScriptを選択しない場合はrun.jsなのかも？）。

* aurelia_project/tasks/run.ts

## 実行

RunnerにShell commandを選択して、以下を実行
`au run --env dev --watch`
画像圧縮/スプライト生成


# PNGをJPGに変換する

ディレクトリ以下のpngを全部jpgに変換する（画質60で）

```
mogrify -format jpg -quality 60 *.png
```

mogrify がなかったら

```
brew install imagemagick
```

# PNGの容量を減らす

pngquantを入れる（ImageAlphaの中身で使ってるソフト）

```
brew install pngquant
```

ディレクトリ以下のpngを全部圧縮する

```
find . -name "*.png" | xargs pngquant 256 --force --skip-if-larger --speed 1 --ext .png
```

imageOptimも良い
[追加/変更分だけimageOptimする](http://oosugi20-blog.tumblr.com/post/61224719027/%E8%BF%BD%E5%8A%A0%E5%A4%89%E6%9B%B4%E5%88%86%E3%81%A0%E3%81%91imageoptim%E3%81%99%E3%82%8B)

# JPEGの容量を減らす

jpegoptimを入れる

```
brew install jpegoptim
```

ディレクトリ以下のjpgを全部圧縮する

```
find . -name "*.jpg" | xargs jpegoptim --strip-all --max=90
```

## 画像サイズを縮小する

50%にする

```
mogrify -resize 50% *.png
```


# スプライトをつくる



```
convert -append -background transparent *.png sprite.png
```

`-append` : 縦連結
`+append` : 横連結

http://knowledge.sakura.ad.jp/tech/1727/


用意した素材サイズが偶数でない場合、SP用に2で割った際に整数でなくなってしまうので[evenizer](https://github.com/katapad/evenizer)を使う

```
evenizer -i *.png
```


> 参考
http://qiita.com/egnr-in-6matroom/items/fa86208e525444c43420
複数ユーザーが共通のRealm Object Serverを参照する方法

[Realm Advent Calendar 2016](http://qiita.com/advent-calendar/2016/realm) 3日目の[かっくん](http://qiita.com/fromkk)です。

9/27にRealm Mobile Platformが発表され、10/18に自社で[Firebase.ebisu #1](http://firebase.connpass.com/event/41745/)というイベントを開催したのですが、そこでFirebase Databaseの対抗馬として[Realm Mobile Platformを紹介](https://speakerdeck.com/fromkk/try-realm-mobile-platform)しました。

その際に簡単な[チャットアプリ](https://github.com/fromkk/RealmChat)を作成し、そこで得たナレッジを共有出来ればと思います。

---

# Realm Mobile Platform とは

[公式サイト](https://realm.io/jp/)が詳しいので詳細はそちらにお任せしますが、簡単に言うとサーバーサイドにもRealmをインストールしてクライアントと完全同期してしまうプラットフォームです。  
対応プラットフォームもCentOS 6/7, Ubuntu, macOS, AWSと幅広く対応していますしインストールも簡単です。

完全同期なので、何万人ものユーザーを抱える様なサービスを1つのデータベースで同期してしまうとファイル容量が一気に膨れ上がってしまいます。
その為、Realmではユーザー毎にデータベースを作成する事を推奨している様です。

## ユーザーの作成・ログイン

```swift
// create user
let authURL = URL(string: "http://localhost:9080")!
let realmURL = URL(string: "realm://localhost:9080/~/realm")!
let credential = Credential.usernamePassword(username: "user@example.com", password: "hogehoge", actions: [.createAccount])
SyncUser.authenticate(with: credential, server: authURL) { (user, error) in
    if let user = user {
      let configuration: Realm.Configuration = Realm.Configuration(syncConfiguration: (user, realmURL))
      Realm.Configuration.defaultConfiguration = configuration
      //login success!
    } else if let error = error {
      print("user create failed \(error)")
    }
}
```

ログインは `.createAccount` を `.useExistingAccount` に変更すればログイン出来ます。

但し、今回作ったチャットアプリの場合、複数のユーザーが1つのデータベースを参照する必要があったので、こちらの方法は利用しませんでした。
共通のデータベースを参照する場合、管理者アカウントが必要です。

```swift
let authURL = URL(string: "http://localhost:9080")!
let realmURL = URL(string: "realm://localhost:9080/realm")!
let credential: Credential = Credential.accessToken("ADMIN TOKEN HERE", identity: "ADMIN USER IDENTITY HERE")
SyncUser.authenticate(with: credential, server: authURL, timeout: 30.0) { [weak self] (user, error) in
  if let user = user {
    let configuration: Realm.Configuration = Realm.Configuration(syncConfiguration: (user, realmURL))
    Realm.Configuration.defaultConfiguration = configuration

    //login success!
  } else if let error = error {
      print("login failed \(error)")
  }
}
```

`realmURL` のパスが通常は `/~/realm` ですが、共通データベースは `/realm` になっているのがポイントです。
Linuxのパスと同様に `/~` が該当ユーザーのフォルダである事を示します。

これでアプリ上の `SyncUser` は1人(管理者のみ)として扱う事が出来、アプリ側でユーザーの仕組みを作成すれば複数ユーザーで同じデータベースを参照する仕組みの完成です。

後は通常通りアプリを作成するだけです！

---

### 注意事項

冒頭にも述べた通りこの仕組を利用してしまうとユーザー数が膨大になった際、全てのデータが同期されてしまうので容量には注意が必要です。
例えばサーバー側で1GBのデータベースファイルになってしまった場合、各ユーザーも1GBのデータベースを保持する事になってしまう為です。
対処方法としては今回の場合、各チャットルーム毎に保持するメッセージ数の上限を設定して古いものから削除したり、チャットルームも一定期間やり取りの無いものは自動的に削除する等の仕組みを入れる事で解消出来るかもしれません。

---

## まとめ

やはりRealmとしてはユーザー毎にデータベースを保持する方法を推奨している気がします。
そちらの方がセキュリティも高く、データベースの容量の心配もそんなに無い為です。
そう考えると個人で使う日記やTodoアプリ等のツール系アプリには非常に親和性が高い様に感じます。
一方で今回の様に複数ユーザーで同じデータベースを参照する方法も一応あるという事は知っておいても良いかもしれません。

まだ、Realm Mobile Platformを活用したアプリのリリースは聞いたことが無いですが、これから色んなアプリが出て来るのを楽しみにしています！