OmniAICreator/Qiita-1.07M huggingface dataset:
Play FrameworkでScala.jsを使いたい

Play FrameworkでScala.jsを使うためのセットアップ手順です。

[play-scala-scalajs](https://github.com/jimmy00784/play-scala-scalajs#master)というテンプレートがあるので利用する。

```
activator new new-ui play-scala-scalajs
```

次のファイルが作成される。

```
.
├── LICENSE
├── README.md
├── activator
├── activator-launch-1.3.2.jar
├── build.sbt
├── play ... Play Frameworkのプロジェクト
│   ├── app
│   │   ├── controllers
│   │   │   └── Application.scala
│   │   └── views
│   │       ├── index.scala.html
│   │       └── main.scala.html
│   ├── conf
│   │   ├── application.conf
│   │   └── routes
│   ├── public
│   │   ├── images
│   │   │   └── favicon.png
│   │   ├── javascripts
│   │   │   └── hello.js
│   │   └── stylesheets
│   │       └── main.css
│   └── test
│       ├── ApplicationSpec.scala
│       └── IntegrationSpec.scala
├── project
│   ├── build.properties
│   └── plugins.sbt
└── scalajs ... Scala.jsのプロジェクト
    └── src
        └── main
            └── scala
                └── hello.scala
```


作られたプロジェクトでactivatorを起動する。

```
cd ./new-ui
./activator
```

ライブラリのダウンロードが行われるので終わるまでしばらく待つ。ダウンロードが完了したら早速サーバを立ち上げてみる。

```
run
```

コンパイルに少々時間がかかる。コンパイルが終わったら、 http://localhost:9000/ をブラウザで開く。



## テンプレートでScala.jsを呼び出している部分

`main.scala.html`の`@playscalajs.html.scripts("scalajsclient")`がScala.jsを読み込んでいる部分です。

```scala:play/app/views/main.scala.html
@(title: String)(content: Html)
@import play.api.Play

<!DOCTYPE html>

<html>
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
        @playscalajs.html.scripts("scalajsclient")
    </head>
    <body>
        @content
    </body>
</html>
```

HTMLではこのようにレンダリングされています。

```html
<script src="/assets/scalajsclient-fastopt.js" type="text/javascript"></script>
<script src="/assets/scalajsclient-launcher.js" type="text/javascript"></script>
```

## JavaScriptのコードはどこに生成されるか？

上のHTMLの`<script>`タグからファイル名を手がかりに探してみると、`play/target/web/public/main`に生成されていることが分かります。

```console
% find . -name scalajsclient-fastopt.js
./play/target/web/public/main/scalajsclient-fastopt.js
./scalajs/target/scala-2.11/scalajsclient-fastopt.js
```


## Scala.jsは自動でコンパイルされる

activatorで`run`している状態であれば、Scala.jsに書いたコードは自動的にJavaScriptにコンパイルされて配置されます。

```scala:new-ui/scalajs/src/main/scala/hello.scala
import scala.scalajs.js
import scala.scalajs.js.Dynamic.global

object Hellp extends js.JSApp {
  def main(): Unit ={
    if (!js.isUndefined(global.window.console)) {
      global.console.log("Welcome to your Play application's JavaScript!")
      global.console.log("書き換えてみた！") // この行を追加
    }
  }
}
```

この状態で、 http://localhost:9000/ を開き、インスペクタのコンソールを見ると「書き換えてみた！」が表示されているはずです。
AndroidStudioでwebからのコピペがエラーになる場合の対処方法

##web上で拾ってきたサンプルコードをコピペした際に起こりやすい下記エラーについての対処方法です。

###エラー
*Error:(XX, YY) 繧ｨ繝ｩ繝ｼ: 縺薙?譁?ｭ励?縲√お繝ｳ繧ｳ繝ｼ繝?ぅ繝ｳ繧ｰUTF-8縺ｫ繝槭ャ繝励〒縺阪∪縺帙ｓ*

###対処方法
下記画像の文字コード欄をUTF-8にする
![クリップボード01.png](https://qiita-image-store.s3.amazonaws.com/0/80238/9cbb97f4-a7ba-4003-b9f3-2eb59504d3f8.png)
homebrew で入れた tomcat を Eclipse サーバーランタイム環境に追加する

　基本的には参考記事に従ってやるだけなんですが、ランタイム環境の追加で「不明なバージョンのTomcatが指定されました」というメッセージが出たりします。なんだか手間取ったのでメモ。

1. `brew install tomcat`
2. [Eclipse公式](http://www.eclipse.org)から "for Java EE Developers" を落とす (もしくはインストール済みEclipseの `ヘルプ > 新規ソフトウェアのインストール` から頑張る)
3. Eclipseを起動して `環境設定 > サーバー > ランタイム環境` を開く
4. ランタイム環境を設定する。このとき、Tomcat インストールディレクトリーとして `/usr/local/Cellar/tomcat/x.x.x/libexec` を選ぶ

　brewは便利ですけど、こういう場合ちょっと戸惑いますね。

# 参考
* [MacにTomcatをインストールする](http://qiita.com/polidog/items/913bb91f82fe6fa31555) @polidog
* [Eclipseでサーブレット開発環境を作る(Tomcat編)](http://homepage1.nifty.com/y-osumi/works/code/eclipse/)
CaKePHP3　DBタイムゾーン設定


DBのcreatedやmodifiedの時間がデフォルトだとUTCだったので『Asia/Tokyo』に変更しました。

# ソース変更
変更箇所は以下の２ファイル
* config/app.phpのDatasources

```
'Datasources' => [
        'default' => [
            'className' => 'Cake\Database\Connection',
            'driver' => 'Cake\Database\Driver\Mysql',
            'persistent' => false,
            'host' => 'localhost',
            /**
             * CakePHP will use the default DB port based on the driver selected
             * MySQL on MAMP uses port 8889, MAMP users will want to uncomment
             * the following line and set the port accordingly
             */
            //'port' => 'nonstandard_port_number',
            'username' => 'user',
            'password' => 'password',
            'database' => 'test',
            'encoding' => 'utf8',
            'timezone' => 'Asia/Tokyo',
            'cacheMetadata' => true,

            /**
             * Set identifier quoting to true if you are using reserved words or
             * special characters in your table or column names. Enabling this
             * setting will result in queries built using the Query Builder having
             * identifiers quoted when creating SQL. It should be noted that this
             * decreases performance because each query needs to be traversed and
             * manipulated before being executed.
             */
            'quoteIdentifiers' => false,

            /**
             * During development, if using MySQL < 5.6, uncommenting the
             * following line could boost the speed at which schema metadata is
             * fetched from the database. It can also be set directly with the
             * mysql configuration directive 'innodb_stats_on_metadata = 0'
             * which is the recommended value in production environments
             */
            //'init' => ['SET GLOBAL innodb_stats_on_metadata = 0'],
        ],
```

* config/bootstrap.php

```
date_default_timezone_set('Asia/Tokyo');
```

# MYSQL設定

自分の場合、DBエラーが発生しましたがそれはMYSQLに必要な設定をしていなかったせいでした。

```
SQLSTATE[HY000]: General error: 1298 Unknown or incorrect time zone: 'Asia/Tokyo'
```
解決法
・コマンドにて実行
参考：http://mysql.stu.edu.tw/doc/refman/5.1/ja/time-zone-support.html

```
mysql_tzinfo_to_sql /usr/share/zoneinfo | mysql -u root mysql -p
```
node.js から mongodb接続時にconnect ECONNREFUSED

# 事象
node.jsからmongodbに接続しようとプログラムを作成して実行したところ
以下エラーがでてまう。

```
[vagrant@localhost nodejs]$ node mongo.js 
{ name: 'MongoError', message: 'connect ECONNREFUSED' }
```

プログラムは以下

```
var MongoClient = require('mongodb').MongoClient,
    settings = require('./settings');
MongoClient.connect("mongodb://"+settings.host+"/"+settings.db, function(err, db) {
    if (err) { return console.dir(err); }
    console.log("connected to db");
    db.collection("users", function(err, collection) {
        var docs = [
            {name: "taguchi", score: 40},
            {name: "fkoji", score: 80},
            {name: "dotinstall", score: 60}
        ];
        collection.insert(docs, function(err, result) {
            console.dir(result);
        });
    });
});

```

# 解決方法
* まず、そもそも/data/dbをつくっていなかったので、つくりました。

```
$ sudo mkdir -p /data/db
```

* mongodbに接続して、プログラム実行前に、nodedbデータベースおよびusersコレクションを作りました。

```
$ mongo nodedb
 > db.createCollection('users')
```

* プログラム中の以下の記述を

```
MongoClient.connect("mongodb://"+settings.host+"/"+settings.db,
```

```
MongoClient.connect("mongodb://localhost:1337/"+settings.db,
```
に変更しました。

これで接続できるようになりました。


good ruck!
スプリントを振り返ろう

スプリントサイズはだいたい９営業日(２週)か１８営業日(４週)が一般と聞いたんだけど本当のところどうなんですかね
一度北米勢に聞いてみたいところ

今日はスプリントについて振り返ってみましょう
種本はアジャイルレトロスペクティブ
たしかアジャイルサムライ刊行記念イベントで池袋JUNK堂で買った本でした。

小飼弾はクソミソに言っていましたがいい本ですよ。特に使う状況になれば。

余談だけどあのとき川口のたぬきでアルコールを入れた後に池袋に移動して、監訳者のひとり西村さんから「川口で著者のジョナサンが酔いつぶれている。でも私もだいぶ酔っているので迎えに来て欲しい。」ともうひとりの監訳者角谷さんに伝言した覚えがあります。当然そんな無理筋が通るわけもなくいんだれさんがジョナサンを宿泊先の秋葉原まで送りました。
この面白伝言を運べたことは私のアジャイル人生の輝かしいイベントです。なお角谷さんは死ぬほど迷惑そうな顔をしていました。

振り返りはスプリントの最終日に行われます。
やることは２つ
スプリントレビューとスプリントレトロスペクティブ

# スプリントレビュー
このスプリントでリリース結果について振り返ります。
フィードバックを受けたり質問を飛ばしたりします。
参加者はチームメンバーとステークホルダーが出席します。
主に目的を再共有し、コンテクストのズレがあればそれを参加者間で共有、反映することも重要な目的の一つです。
ここが詳しいです。
http://qiita.com/harakachi/items/77a7a71ab693e8bceb1b

主力施策のリリースは思ったより当たらなかったけど、単なるUX改善で出した機能が思ったよりフィーバーしている、みたいな感じのこともここで話し合います。

# スプリントレトロスペクティブ
主にチーム内メンバーによる開発プラクティスについて振り返ります
前回のKPTからスプリントに投入されたプラクティスの実施結果の検証
KPTの作成による新しいプラクティス実行計画の作成
プラクティスの中止なり完了なりはここで判断されます。

# やってみてオモタ
## スプリントレビュー
「この機能がリリースできた」「ベロシティはこんだけ」というのは「事実」ですが開発体制がリーンに近づき市場インパクトの結果まで気にし始めると「この機能はこのユーザー層に刺さった」というのは数字の動きという「事実」と分析による「意見」に分かれます。
事実を扱う部分と意見を扱う部分とを分けないと効率的な議論ができないように思います。
また、意見や仮説に基づいて、より詳しい数字を拾うためのアクションが軽視されやすいので、意見の確度的なものは気にする必要があります。
 
## スプリントレトロスペクティブ
これをやらないと開発効率の上昇が鈍くなり、またここでの開発プラクティスをちゃんと扱うか扱わないかで開発効率の伸びがかわり、それが長期開発の後半でボディーブローのように効いてくるのでこれはかなり重要です。
QGISの新規インストール方法（Mac OSX）

# 対象環境
OS: OS X Lion以上/64-bit only
Python: 2.7

# インストール方法
QGIS本体のインストール前に、必要なソフトウェアを先にインストールしておきます。

http://www.kyngchaos.com/software/qgis
このページが公式サイトで、必要なソフトウェアへのリンク一覧が掲載されています。

今回インストールするソフトウェアを別の機会などですでにインストールしている場合には、注意する必要があります。GDAL Complete 1.11 framework packageはSQ Liteをインストールしますがすでにインストール済みである場合などですね。上書きインストールは避けた方がいいのと、QGISが利用を想定しているものとヴァージョンが合っているかどうかを個別に確認する必要があります。

下記にリストされている順にインストールしていきます。

# インストールするもの

## 必須なもの
- GDAL Complete 1.11 framework package
    - GDAL、GEOS、PROJ、SQLite、UnixImageIOがまとめてインストールされるパッケージ。いずれかをインストール済みの場合は個別にインストールする必要があります。
- Matplotlib
    - QGIS用にビルドしたものが必要とのことなので、以前にインストール済みでも今回公式サイトからインストールする必要があります。QGIS用にビルドされたものと、別なものとの同一Mac上での使い分けについては検証していないので不明です。

## 必須ではないもの（プラグインをインストール&利用するのに必要）
- NumPy
- SciPy
- PIL
- psycopg2
- RPy2
- PySAL

## QGIS本体

# GDALのコマンドパスを通す
bash_profileに一文を追記します。

ターミナルで以下を実行すると、テキストエディタでbash_profileが開くので、vimなどに慣れていない場合は操作が楽になります。
`$ open ~/.bash_profile`

追記する一文は以下の通りです。

`export PATH=/Library/Frameworks/GDAL.framework/Programs:$PATH`
boot2dockerで[client and server don't have same version]というエラーが出たら

自分用メモ。

homebrewでboot2dockerを入れていて、久しぶりにboot2dockerを起動して、docker buildしようとしたら、clientとserverのバージョンが違うよ！というエラー。

```
rsakamoto% docker build -t centos_sample .
Sending build context to Docker daemon 2.048 kB
Sending build context to Docker daemon
FATA[0000] Error response from daemon: client and server don't have same version (client : 1.18, server: 1.15)
```

boot2dokerにはupgradeがあるので、それをするだけ。

```
rsakamoto% boot2docker upgrade
docker is up to date (1.6.2), skipping upgrade...
boot2docker is up to date (v1.6.2), skipping upgrade...
Latest release for github.com/boot2docker/boot2docker is v1.6.2
Downloading boot2docker ISO image...
Success: downloaded https://github.com/boot2docker/boot2docker/releases/download/v1.6.2/boot2docker.iso
        to /Users/hogehoge/.boot2docker/boot2docker.iso
Waiting for VM and Docker daemon to start...
...............ooo
Started.
Writing /Users/hogehoge/.boot2docker/certs/boot2docker-vm/ca.pem
Writing /Users/hogehoge/.boot2docker/certs/boot2docker-vm/cert.pem
Writing /Users/hogehoge/.boot2docker/certs/boot2docker-vm/key.pem
Your environment variables are already set correctly.
```


無事にビルドが始まりました。


```
rsakamoto% docker build -t centos_sample .
Sending build context to Docker daemon 2.048 kB
Sending build context to Docker daemon
Step 0 : FROM centos:latest
latest: Pulling from centos
6941bfcbbfca: Pull complete
41459f052977: Pull complete
fd44297e2ddb: Already exists
centos:latest: The image you are pulling has been verified. Important: image verification is a tech preview feature and should not be relied on to provide security.
Digest: sha256:c4b99180376b1b898a5d4f2a1c86edb45690cf69034eef211d1c503b43487a62
Status: Downloaded newer image for centos:latest
 ---> fd44297e2ddb
```
gitで変更箇所を文字単位で表示


`git`に同梱の`diff-highlight`を使うことで、行単位から文字単位で変更を表示できる。

## `diff-highlight`へPATHを通す。

Homebrewでgitを入れている場合

### zsh,bashの場合

#### Intel Mac
```bash
$ export PATH=$PATH:/usr/local/share/git-core/contrib/diff-highlight
```

#### Apple Silicon
```bash
$ export PATH=$PATH:/opt/homebrew/opt/git/share/git-core/contrib/diff-highlight
```


### fishの場合

#### Intel Mac
```fish
$ set -x PATH $PATH /usr/local/share/git-core/contrib/diff-highlight
```

#### Apple Silicon
```fish
$ set -x PATH $PATH /opt/homebrew/opt/git/share/git-core/contrib/diff-highlight
```

## .gitconfigに設定を追加する
~~~ ~/.gitconfig
log = diff-highlight | less
show = diff-highlight | less
diff = diff-highlig | less
~~~

## 結果
    $ git diff Gemfile

![1___tmux_turing_local__zsh__4_0____turing_local__tmux_.png](https://qiita-image-store.s3.amazonaws.com/0/489/5cc68090-6501-2a2e-6f02-d7eb883cfdab.png)

便利。
python2系とpython3系のdict.keys()の違い

自分用メモ

## python2系でのdict.keys()

```
In [25]: D = dict(a=1,b=2,c=3)

In [26]: D.keys()
Out[26]: ['a', 'c', 'b']
```
普通にlistが返ってくる。
なので、そのままイテレータとして使える

```
In [27]: for key in D.keys(): print "key:{}, value:{}".format(key, D[key])
key:a, value:1
key:c, value:3
key:b, value:2
```

## python3系でのdict.keys()

```
In [3]: D = dict(a=1,b=2,c=3)

In [4]: D
Out[4]: {'b': 2, 'c': 3, 'a': 1}

In [5]: D.keys()
Out[5]: dict_keys(['b', 'c', 'a'])
```

listではなく、dict_keysというオブジェクトになっている！
Go言語でSensuのStatusPage「chikurin」を作った


Sensuホストの状態をStatusPage形式で表示するWebアプリをGo言語で作ってみました．

  - [hico-horiuchi/chikurin](https://github.com/hico-horiuchi/chikurin)

## 名前の由来

[前回](http://qiita.com/hiconyan/items/d82cee8e891bb5b0341e)のSensu CLIでは`ohgi`(扇)でした．
今回も`sensu`(扇子)に関係する単語ということで，`chikurin`(竹林)にしました．

## Uchiwaとの比較

Sensu標準のダッシュボードである[Uchiwa](https://uchiwa.io/)は，管理者向けではないかと思います．
(EventやClientの削除ができる，ClientやCheckの詳細情報を閲覧できる，など．)

そこで，一般ユーザ向けに[StatusPage.io](https://www.statuspage.io)のように表示できないかと考えました．
現在発生中のEventに限り，「いつから」と「監視結果」を見られるようにします．
各自に関係するサーバのページだけ教えておき，何かあったら見て貰うようにします．

![status.png](https://qiita-image-store.s3.amazonaws.com/0/58742/4a075fdc-762c-f52a-c804-f4ee21eecd62.png "status.png")

## Clientなどの一覧表示

Sensu配下にあるClientの一覧表示と，絞り込みも実装しました．
また，複数のSensu API(Datacenter)にも対応しているので，その一覧表示も可能です．

この機能は設定(`~/.chikurin.json`)で有効・無効を切り替えられます．
(`show_datacenters`と`show_clients`．)
無効にすることで，関係しない・隠したい情報へのアクセスを制限できます．

![clients.png](https://qiita-image-store.s3.amazonaws.com/0/58742/6d6958b6-aa33-e726-9675-647003a1fd77.png "clients.png")

## chikurinの使い方

[Releases](https://github.com/hico-horiuchi/chikurin/releases)から最新版をダウンロードし，[README](https://github.com/hico-horiuchi/chikurin/blob/master/README.md)を参考に設定を書いてください．
`chikurin`を実行すると，デフォルトで8000番ポートで起動します．
`/`がDatacenter一覧，`/:datacenter`がクライアント一覧，`/:datacenter/:client`がStatusPageです．

また，`chikurin {start|stop|status}`でデーモンとしても使用可能です．
設定の`log`でログファイルを指定すると，`goji`のログを吐き出します．

```
Sensu status page by golang
https://github.com/hico-horiuchi/chikurin

Usage: 
  chikurin [flags]
  chikurin [command]

Available Commands: 
  start       Start chikurin daemon
  stop        Stop chikurin daemon
  status      Show status of chikurin daemon
  version     Print and check version of chikurin
  help        Help about any command

Flags:
  -h, --help=false: help for chikurin

Use "chikurin help [command]" for more information about a command.
```

## 使ったライブラリ

[mattn/gom](https://github.com/mattn/gom)

  - Rubyのbundlerライクにライブラリを`_vender`にインストールする．
  - ライブラリを`Gomfile`に列挙，グルーピングも可能．

[zenazn/goji](https://github.com/zenazn/goji)

  - シンプルなWebアプリケーションフレームワーク．
  - `net/http`と両立可能，`Middleware`を簡単に実装できる(らしい)．

[yosssi/ace](https://github.com/yosssi/ace)

  - SlimライクなHTMLテンプレートエンジン， `template`を生成．
  - 後述のgo-bindata対応なのが嬉しい．

[VividCortex/godaemon](https://github.com/VividCortex/godaemon)

  - プログラムを簡単にデーモン化できるが，機能は最小限．

[jteeuwen/go-bindata](https://github.com/jteeuwen/go-bindata)

  - Assets(CSS, JS)やTemplateをバイナリに同梱する．
  - Webアプリでもバイナリだけでデプロイ可能になる．

## 参考文献

  - [アセット的なアレを実行バイナリ内に入れる話。](http://blog.satotaichi.info/one-binary-using-go-bindata/)
  - [go-bindataでまとめたファイルをhttp.FileServerで配信する - Qiita](http://qiita.com/sfujiwara/items/b84cc2a7b326b04e0edb)
[*その他*] ChromeにてAjaxでローカルファイルにアクセス

# はじめに
ローカルにあるjsonファイルを`$.getJSON`で読み込んで、それを使ってあれこれやりたかったが、
Chromeで以下が発生。
ローカルファイルにAjaxリクエストを送ると怒られる。

![スクリーンショット 2015-05-24 10.19.03.png](https://qiita-image-store.s3.amazonaws.com/0/48912/99ed3e8b-412f-c620-0c04-bc4f27832454.png)

```
XMLHttpRequest cannot load file:///Users/test/Documents/json/contents.json.Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
```

これが発生すること自体は知っていたが、特に今までChromeじゃないと困るってことは無かったのでエラーが起きないFirefoxを使ってローカルで確認していた。
今回Chromeの方がいい事情があり、解決策を調べてみた。
ローカルサーバーをたてるとかそういうのは面倒くさいのでしたくなかった。

# 解決
調べてみるとChromeではセキュリティ上の都合でローカルファイルへのAjaxリクエストはできないようになっているらしい。
`--allow-file-access-from-files`をつけてChromeを起動すればいけると書いてあったのでやってみたものの、動かず。

最終的にMacではsudoつけたらいけた。

```bash
$ sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args -allow-file-access-from-files
```

Windowsも調べてChromeのショートカットを右クリック→PropertiesでTargetの後ろに`--allow-file-access-from-files`を付けてChromeを起動したがうまく動いてくれなかった。
それで管理者権限でコマンドプロンプト起動して`Chromeのパス --allow-file-access-from-files`でいけた。
次からはショートカットダブルクリックしただけ動くようになってた。

見ていたところに管理者で実行しないといけない系のことは書いてなかったのでそんなことは思いつかず、現行バージョンではダメになったのかな〜ってちょっとの間悩んだ。



2018/02/16
簡易的なローカルサーバー立てるのもそこまで手間でもないのでもういっそローカルサーバーでも良さそう。

```bash
$ npm install -g live-server
$ cd <ドキュメントルートとするディレクトリ>
$ live-server .
# http://localost:8080/でブラウザからアクセス可能
```

# 参考

* [【小ネタ】Chromeのローカルセキュリティポリシーの回避](http://dev.classmethod.jp/etc/chrome-localfile-security/)
* [Google Chrome でAjaxを利用しローカルファイルにアクセスする](http://d.hatena.ne.jp/E_Mattsan/20110203/1296733948)
C言語で一時ファイルの作成

[mkstemp](http://kazmax.zpp.jp/cmd/m/mkstemp.3.html)関数を使うと他の名前がかぶらない一時ファイルのファイルディスクリプタが取得できます。

```C
int mkstemp(char *template);
```

`template`は`XXXXXX`で終わる文字列です。

# 例

```C
#include <stdio.h>
#include <stdlib.h>

int main() {
  char template[] = "/tmp/testXXXXXX";
  int fd = mkstemp(template);
  FILE* fp = fdopen(fd, "w");
  fprintf(fp, "Hello temporary file!\n");
  fclose(fp);
  return 0;
}
```

３回ほど実行したら次のファイルが作成されていました。

```
testbUU96t
testmJBD7R
testsjjNAU
```
関数の名前付け > getXXX() か XXX() か? 

関数の名前付けで時々迷うことがある。

XXXという値を得るための関数を
- getXXX()
- XXX()

どちらにするか。

getXXX()はreadable codeなどではlightweight functionとしてすぐに値を返す関数として使う、というような記載がある。

一方で、Effective c++を読む中で、オブジェクトIDを返す関数名はobjectID()などとしてgetなしでの例がある。


getXXX()とした場合の利点は、その関数が値を返すことがわかることだろう。
一方で、getXXX()の欠点は、getで始まる関数ばかりになってしまうということだろう。

XXX()とした場合の利点は、getで始まる関数ばかりにならないことだと思う。
XXX()の欠点は、...何だろうか?
wineとwinetrickのバグ報告方法

間違えたのでメモ。

# wine

## Bugzillaのアカウントの作成

![w1.png](https://qiita-image-store.s3.amazonaws.com/0/25728/c06ded89-3d54-4d57-c5a2-31a2c1b0f3b9.png)

* https://bugs.winehq.org/ にて `Create a login account`
* 確認メールがくる。メールアドレス、パスワードでログイン。

## New

![w2.png](https://qiita-image-store.s3.amazonaws.com/0/25728/eb997b40-18fd-618a-3388-b175a506869b.png)

![w3.png](https://qiita-image-store.s3.amazonaws.com/0/25728/0d0d05ac-22f3-e319-fcf4-7a8a84ff2944.png)

* Summaryを入力すると`Possible Duplication` に似たような事例が出てくる。これはすごい

* 投稿

## 返信

```
https://bugs.winehq.org/show_bug.cgi?id=38630

Austin English <austinenglish@gmail.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
             Status|UNCONFIRMED                 |RESOLVED
         Resolution|---                         |INVALID

--- Comment #1 from Austin English <austinenglish@gmail.com> ---
Your winetricks is out of date, works here:
[austin@localhost ~]$ winetricks --version
20150416 - sha1sum: c4fc8c3abe52300da9c8ab062ec0c83d43d03449

Note that winetricks bugs belong at https://github.com/Winetricks/winetricks,
not in wine's bugzilla.
```

これはwineのバグではないので https://github.com/Winetricks/winetricks で報告してねとのこと。



# winetrick

https://github.com/Winetricks/winetricks/issues

で報告すればよい。
PHPでのファイルアップロードのおさらい


素のPHPでアップロードする方法をおさらいして、Laravelでのやり方も調べる。
DBに格納もできるが、とりあえずファイルとして保存。

##素のPHPでのアップロード

###HTML

いまさらですが、enctype="multipart/form-data"とする。

```html
<!doctype html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>test</title>
</head>
<body>
<form method="post" action="res.php" enctype="multipart/form-data">
ファイル:<input type="file" name="up_file"><br>
<input type="submit" value="upload">
</form>
</body>
</html>
```

###PHP

エラーチェックをすればキリがないが、一番簡単なのはこんな感じ。

```php
<?php
	
	//一字ファイルができているか（アップロードされているか）チェック
	if(is_uploaded_file($_FILES['up_file']['tmp_name'])){

		//一字ファイルを保存ファイルにコピーできたか
		if(move_uploaded_file($_FILES['up_file']['tmp_name'],"./".$_FILES['up_file']['name'])){
			
			//正常
			echo "uploaded";

		}else{
		
			//コピーに失敗（だいたい、ディレクトリがないか、パーミッションエラー）
			echo "error while saving.";
		}

	}else{
	
		//そもそもファイルが来ていない。
		echo "file not uploaded.";

	}
```

覚えておく変数？は、

* $_FILES['up_name']['tmp_name']
* $_FILES['up_ename']['name']
* $_FILES['up_name']['size']

くらいでしょうか（up_nameはform側のname）。

###その他

同時に\<input type="text" name="email">等を送りたい場合は、普通にformに追加し、$_POST['email']で受ける。

##Laravel

Laravelで受ける。

###HTML(View)

私はHelperは使わない派なので、素です。csrf_token()をhiddenで送る必要があるくらい。

```php
<!doctype html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>test</title>
</head>
<body>
<form method="post" action="upload" enctype="multipart/form-data">
ファイル:<input type="file" name="up_file"><br>
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
<input type="submit" value="upload">
</form>
</body>
</html>
```

###Laravel（本当はControll）

本当はControllに書くのですが、めんどいのでRouteに全部書きました。もっともシンプルなパターン。
getとも載せてますが、受けてるのはpostの方。

```php
//get 
Route::get('upload',function(){
	return view('upload');
});

//post（受け取り）
Route::post('upload',function(){

	$file = Request::file('up_file');

	$name = $file->getClientOriginalName();

	$move = $file->move('./',$name);

	if($move){
		return "uploaded";
	}else{
		return "error";
	}
});
```

覚えておくべきプロパティ名は、

* getClientOriginalName()
* getClientSize()
* guessClientExtension()

などでしょうか。あとはmove()メソッド。引数が、move(保存先DIR名,保存ファイル名）とちょっと癖がある。
L4ではInputが主だったようですが、L5ではRequestに統一？されたのかな。Inputも使えますが。

###その他

同時に\<input type="text" name="email">等を送りたい場合は、普通にformに追加し、Request::input('email')で受ける。

###備忘

Intervention Imageというのを使うと、いろいろと加工ができるみたい。また別の機会にためします。

[Intervention Image](http://image.intervention.io/getting_started/introduction)
機能をServiceに切り出す


サンプルは可読性のために、１つのファイルに書くことが多いが、実際はserviceに分割する。
value,factory,service...の違いはおいておいて、切り出し方を。

一気に書いたこの機能を切り出してみる。

```html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>

var app = angular.module('myApp',[]);

app.controller('hogeCtrl',function($scope,$http){

	//読み込み中を表示
	$scope.loading = true;

	//データ取得
	$http.get("http://localhost/data.php")
	.success(function(response){
	
		//データ取得
		$scope.status = response.status;
		$scope.users = response.data;

		//読み込み中非表示
		$scope.loading = false;
	});

});
</script>
</head>
<body>

<div ng-app="myApp" ng-controller="hogeCtrl">
<!-- 読み込み中エリア -->
<div ng-show="loading">
読み込んでいます。。。
</div>
<!-- status -->
{{status}}<br>
<!-- loop -->
<ul>
	<li ng-repeat="user in users">
	{{user.name + ' ' +user.age}}
	</li>
</ul>

</div>
</body>
</html>
```

###ファイル構造

これ！というのが決まっているのかどうかわからないが、

```bash
root/
    ∟index.html
    ∟js/
        ∟controllers/
          ∟mainController.js
        ∟services/
          ∟mainUtil.js
```

とした。

###HTML

各種jsを読み込んでいるだけ。

```html:index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="js/services/Utilities.js"></script>
<script src="js/controllers/mainController.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="hogeCtrl">

{{name}}

</div>
</body>
</html>
```

###アプリの起動

同じアプリにしてもよかったが、モージュールを分離して呼び出してみた。

```js:app.js
angular.module('myApp',['mainCtrl','mainUtil']);
```

依存モジュールにDIされているUtilitiesを含むmainUtilモジュールを指定しなくてもよいようだ。

###controller

```js:mainController.js
angular.module('mainCtrl',[])
.controller('hogeCtrl',function($scope,Utilities){

    Utilities.getName()
    .success(function(res){
    	$scope.name = res.name;
    });

});
```

###service(factory)

今ひとつ書き方が腑に落ちないが、そのうち理解できるだろう。

```js:mainUtil.js
angular.module('mainUtil',[])
.factory('Utilities',function($http){

	return{

		getName: function(){

			return $http.get('http://localhost/res1.php')
			.success(function(response){

				return response;
				
			});
		}

	}
	
});
```
ubuntuをdocker buildするときaptのキャッシュを削除し容量を小さくする

## 参考

[achild/bugzilla](https://registry.hub.docker.com/u/achild/bugzilla/dockerfile/)

## やり方

```bash:
RUN DEBIAN_FRONTEND=noninteractive \
    apt-get install -q -y ～ && \
    rm -rf /var/lib/apt/lists/*
```

`DEBIAN_FRONTEND=noninteractive`で入力画面をスキップ
Effective C++ (3rd) > 33項 > 継承時に関数の隠蔽が起きる例 > usingで回避

引用: Effective C++ 第3版

```cpp
class Base {
private:
  int x;
public:
  virtual void mf1() = 0;
  virtual void mf1(int);
  virtual void mf2();
  void mf3();
  void mf3(double);
  ...
};
class Derived:public Base {
public:
  virtual void mf1();
  void mf3();
  void mf4();
  ...
}; 
```

Baseにあるmf1とmf3はDerivedのmf1とmf3により隠蔽される。

```
Derived d;
int x;
...
d.mf1();
d.mf1(x); // エラー! (Derived::mf1がBase::mf1を隠蔽するため)
d.mf2();
d.mf3();
d.mf3(x); // エラー! (Derived::mf3がBase::mf3を隠蔽するため)
```

> 基底クラスや派生クラスの関数の引数型が異なっていても、名前の隠蔽は行われるのです。

対策の一つの方法としてはusingを使うとのこと

```cpp
class Derived:public Base {
public:
  using Base::mf1; // Baseのmf1とmf3という名前のものは、
  using Base::mf3; // すべてDerivedのスコープで可視にする
  virtual void mf1();
  void mf3();
  void mf4();
  ...
}; 
```

> 「オーバーロードされた関数を持つクラス」を継承する場合、そして、それらの関数のいくつかを派生クラスで再定義する場合、隠蔽されてしまう名前を可視にしておきたければ、その名前に対してusing宣言しておけばよいのです。
技術英語 > seemingly random numbers

Code Completeに出ていたと思う。

seemingly random numbers

http://eow.alc.co.jp/search?q=seemingly&ref=sa
> seemingly
> 一見したところ


[Quora](http://www.quora.com/How-can-a-very-right-brained-person-get-over-the-seemingly-impossible-task-of-learning-writing-code-for-web-design-And-please-those-who-find-coding-simple-and-true-creativity-impossible-need-not-respond-thanks)
> seemingly impossible task


[facebook](https://www.facebook.com/pages/codingthinking-of-how-to-make-what-is-seemingly-impossible-possible/133400406677903)
> how to make what is seemingly impossible possible.

一見したところ不可能なものを可能にする方法

<hr>
random numbersについては、rand()を使っているとseemingly random numbersで擬似乱数と言われるもの。詳細は以下に詳しい (2章など)。

[C言語による乱数生成](http://www.sat.t.u-tokyo.ac.jp/~omi/random_variables_generation.html)
Cocos2dx 2.2.6のコードを3.6に移行（経過）

今回は、cocos2dx v2.2.6のソースをv.3.6にする経過です。

以下のサイトを参考にさせていただいています（ありがとうございます！）。

cocos2d-x version2.2.3からversion3.2rc0への移行メモ - よく寝てちょっと食べる
http://d.hatena.ne.jp/laynts/20140804/p1

cocos2d-x v2.2からv3.3への移行 
http://miyano-harikyu.jp/sola/devlog/2014/11/10/post-265/

【cocos2dx】モーダルレイヤーを作成する。 | 
albatrus.com http://albatrus.com/main/cocos2d/6318

移行作業は、v2.2.6のコードをv3.6をclassesに突っ込み、
データをResourceに突っ込んでおもむろにビルド。
エラーやワーニングが出たところで、各サイトを参考にしながら修正していきました。

* AppDelegateについて

初期化の処理が割と変わっているので、前のソースを上書きする前に取っておいて、
そこだけ書き換えたほうがいいでしょう。

* 大まかに修正していく

まずはプレフィックス（前置詞）であるCCを置換で削除すればいいや、と考えるとハマります。
USING_NS_CCという記述があったりするので気をつけるのと、ccpとかのマクロを先に置換しておいたほうがいいですね。

cocos2dxのv3.6は親切なことに「deprecated（この関数は非推奨だよ）」というワーニングを出してくれるように
なっているので、deprecatedが出たら、

その関数名を選択して右クリック > open declaration (F3キー)

を押すことで定義部分に飛ぶことができ、そこで置き換える関数名が分かります。

大半はそういう感じで置き換えていけますが、CCStringなど周辺を見ながら
慎重に変えないといけない部分もあるので、それは残しつつ、まずは大雑把に修正します。

ワーニングが出る関数は、置き換えないでもしばらくは使えると思いますが、
（CCのプリフィックスを取らなくてもそのままいける配慮がされてます）
後々のために置き換えていったほうがいいでしょう。

* cocos2dフォルダに出るエラー

ここでひとつ注意したいのが、エラーがプロジェクトの中の「cocos2dフォルダ」にも出る
ということです。

「ライブラリに不具合が！　また調査対象が増えた…」みたいな感じで焦りますが、
どうやらプロジェクトのソースのエラーが、なぜかライブラリの定義部分に出る症状らしく、
プロジェクトのコードを修正すればあっさりとエラーは消えてくれます。

* 削除されたdefine

一部あって、それは前の2.2.6のワークスペースに戻って、open declaration すれば定義内容が
わかるので持ってきます。
具体的には、メニュープライオリティ関係の kCCMenuHandlerPriority が未定義になっていました。
（3系からはmenuの処理が変わって設定しなくても良くなったようです）


こんな感じで進めています。

ちなみにv3系からbox2dは廃止になり、Chipmunk2Dが採用されたようです。
（外部から入れられるとは思いますが）
PageMenuで1つ目のUIViewControllerのレイアウトが崩れる

Swiftのライブラリである[PageMenu](https://github.com/uacaps/PageMenu)を使って横スクロールでUIViewControllerを複数閲覧出来るアプリを作っていたのですが、どうも1つ目のVCだけAutoLayoutが思うように動いてくれませんでした。

調べたところ、PageMenu本家のDemoでもAutoLayoutを使用したUIViewControllerを1つ目に設定するとレイアウト崩れするようです。

![before.png](https://qiita-image-store.s3.amazonaws.com/0/69585/ea568163-6ee7-6460-a92d-433c52fd3e54.png)

"UIViewController"の文字がAutoLayoutでHorizontal Center in Container指定されているはずが中央からズレています。
ちなみに、別のVCへ移動して戻ってくると

![after.png](https://qiita-image-store.s3.amazonaws.com/0/69585/58786d5f-0909-c62f-7ca1-569236bce18c.png)

今度はぴったり中央に合っています。

どうも1つ目のVCを初めて表示したときのサイズが上のメニューバー分大きくなっているようです。
根本的解決では無いような気がしますが仕方なく以下のコードをVCに追加して手動でリサイズしました。

```swift:TestViewController.swift
override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    let superSize   = self.view.superview!.frame.size
    let rect        = self.view.frame
    let size        = self.view.frame.size

    self.view.frame.size = CGSizeMake(size.width, superSize.height - rect.origin.y)
}
```

これで無事正しいサイズで最初から表示され、レイアウト崩れは起こらなくなりました。
PC に接続した Android 端末が認識されなくなった場合の対処法

![computer_smartphone_connect.png](https://qiita-image-store.s3.amazonaws.com/0/6881/9d0c6536-151b-5141-4091-ca8378d21a98.png)

# 共通の対処法

:one: 接触不良の可能性があるので micro USB ケーブルを挿し直してみる
:two: 別の差込口に挿し替える
:three: PC を再起動してみる :computer:
:four: それでもダメな場合は Android 端末の空き容量を確認してみます。空き容量が 10 % を切っていると、端末が認識されたりされなかったりを繰り返すようになりました
:five: それでもダメな場合は micro USB ケーブル自体に問題があるかも知れません。古いケーブルでは認識されず、新しく購入したケーブルを使うと認識されるようになった事があります :ok_woman_tone1:

# [Android Studio](https://developer.android.com/studio/index.html) で実機ビルドしているとき

## シチュエーション

ログに「device not found」と表示され「No Connected Devices」になった場合など :cry:

## 考えられる原因

:gear: 設定の [**開発者向けオプション**] > [**USBデバッグ**] が OFF になっている可能性があります（電源を切る度にUSBデバッグが OFF になる Android 4.2.2 端末がありました）。

# [Android File Transfer](https://www.android.com/filetransfer/) を利用しているとき

PC に接続後、端末側でアクセス許可が必要になるパターンがあります :iphone:

## [Galaxy S8](http://www.galaxymobile.jp/galaxy-s8/)

<img src="https://qiita-image-store.s3.amazonaws.com/0/6881/9faebe1a-861b-f80f-a0ae-113c0881ed1a.png" width="350px" />

## [Nexus 7 (2013)](https://www.asus.com/jp/Tablets/Nexus_7_2013/)

[**ファイル転送**] を選択する必要があります :radio_button:

<img src="https://qiita-image-store.s3.amazonaws.com/0/6881/14fe03c2-b8b6-acc7-c4b0-b804112b43d5.jpeg" width="350px" />
直しても'pod spec lint'がWarningになる。


CocoaPodsにSwiftライブラリを登録する前に
'pod spec lint'確認でWarningが発生して直したはずなのに永遠にWarningが出る。

以下のようにCocoaPodsのCacheを削除してから試したら解決できた。

```bash
rm -rf ~/Library/Caches/CocoaPods/
```

参照サイト : http://www.cocoanetics.com/2013/01/digging-into-cocoapods/
apache2 + git-http-backendの設定でハマったこと

`connection refused`

 * ポート80が使えなかった。
 * リポジトリを配置していた場所がread権限なかった。

`fatal: unable to access 'http://...' The requested URL returned error: 500`

 * パスワードファイルを読めてなかった。read権限なかった。

`fatal: repository 'http://...' not found`

 * git update-server-infoしてなかった。
Ubuntu Realtek r8168-dkms package upgrade

Ubuntu には Realtek のNIC用に r8168-dkms と言うパッケージが用意されていますが、
中身が 8.039 なので最新の 8.040 に入れ替える。

http://www.realtek.com/downloads/downloadsView.aspx?Langid=4&PNid=13&PFid=5&Level=5&Conn=4&DownTypeID=3&GetDown=false#2

r8168-8.040.00.tar.bz2 をダウンロードして /export に置いてある。

```bash
# パッケージを再構築するのに必要なものを入れる。
sudo apt-get install devscripts debhelper dh-autoreconf linux-headers-generic build-essential dkms
 
# 作業用ディレクトリの作成
mkdir nic
cd nic
 
# ソースパッケージの取得
apt-get source r8168-dkms
 
# ソースファイルの名前がそのままだとdebhelper が見つけられないので変更
cp /export/r8168-8.040.00.tar.bz2 r8168_8.040.00.orig.tar.bz2
 
# 展開
tar jxvf r8168_8.040.00.orig.tar.bz2
cd r8168-8.040.00/
 
# パッケージ作成用のファイルをパクる
tar xvf ../r8168_8.039.00-1.debian.tar.xz
 
# changelog に追記。正しく書かないとこけるので注意！
dch -i
 
# パッケージ化実行。あくまで自分用なので、署名とかは気にしないｗ
debuild -us -uc
 
# インストール
cd ..
sudo dpkg -i r8168-dkms_8.040.00-1ubuntu1_all.deb
 
# 確認
lspci -v
modinfo r8168
 
sudo /sbin/reboot
```

尚、このパッケージはそのままDebianでも使える。

```bash:Debianに入れる手順。
sudo apt-get install linux-headers-amd64 build-essential dkms
sudo dpkg -i r8168-dkms_8.040.00-1ubuntu1_all.deb
```
gemのインストール先を確認するコマンド

gemのインストール先を知りたくなったら

```bash

gem environment
```

こちらで確認できます。


参考
http://qiita.com/h5y1m141@github/items/74029cab9706971c8dbe

手元のPCなどローカル環境(development)で複数プロジェクト作るんならgemは"/vendor/bundle"ディレクトリを作ってそこにいれよう！
CefSharp(ChromiumBrowser) や GeckoFX で起動する FlashPlayer がデバッグバージョンで、ActionScript エラー時にダイアログが開いてつらいのを何とかする

# 経緯

ちょっとしたカスタムブラウザを作成していたら、FlashPlayer がなぜかデバッグバージョンで立ち上がるらしく、ActionScript にエラーがあるとダイアログが出てうっとうしかった。
Chromium だとまだ閉じれば良いだけなのだが、GeckoFX だとダイアログが出ると Flash がクラッシュしてしまって使い物にならない。

# 対策

なかなか見つけられなかったけど、http://www.senocular.com/?entry=475 にあった。

対策は単純で、`mm.cfg`に以下の記述をすれば良い。

```
SuppressDebuggerExceptionDialogs=1
```

mm.cfg は https://helpx.adobe.com/flash-player/kb/configure-debugger-version-flash-player.html によれば、Windows ならば `%HOMEDRIVE%\%HOMEPATH%` 以下にあるとのこと（要するにC:\Users\{username}\mm.cfg）。
Railsでconfig/routes.rbを見てもルーティングが不明なときに確認する方法

例えば、認証機能のgemとして [plataformatec/devise](https://github.com/plataformatec/devise)
を使った場合


```config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  get 'home/index'
  root "welcome#index"
```
devise_forによってどこにルーティングされているのか
routes.rbを見てもわからない。
そんなときは以下のコマンドで確認

###実行するコマンド
```bash
bundle exec rake routes
```

###出力結果
```
                  Prefix Verb     URI Pattern                            Controller#Action
        new_user_session GET      /users/sign_in(.:format)               devise/sessions#new
            user_session POST     /users/sign_in(.:format)               devise/sessions#create
    destroy_user_session DELETE   /users/sign_out(.:format)              devise/sessions#destroy
 user_omniauth_authorize GET|POST /users/auth/:provider(.:format)        devise/omniauth_callbacks#passthru {:provider=>/facebook/}
  user_omniauth_callback GET|POST /users/auth/:action/callback(.:format) devise/omniauth_callbacks#:action
           user_password POST     /users/password(.:format)              devise/passwords#create
       new_user_password GET      /users/password/new(.:format)          devise/passwords#new
      edit_user_password GET      /users/password/edit(.:format)         devise/passwords#edit
                         PATCH    /users/password(.:format)              devise/passwords#update
                         PUT      /users/password(.:format)              devise/passwords#update
cancel_user_registration GET      /users/cancel(.:format)                devise/registrations#cancel
       user_registration POST     /users(.:format)                       devise/registrations#create
   new_user_registration GET      /users/sign_up(.:format)               devise/registrations#new
  edit_user_registration GET      /users/edit(.:format)                  devise/registrations#edit
                         PATCH    /users(.:format)                       devise/registrations#update
                         PUT      /users(.:format)                       devise/registrations#update
                         DELETE   /users(.:format)                       devise/registrations#destroy
              home_index GET      /home/index(.:format)                  home#index
                    root GET      /                                      welcome#index
```
ftpコマンドをバッチから実行してみた


## 0.なぜ作った？

AS/400上で動くバッチをテストしていた際、
エビデンスを取得するのに都度コマプロからftpコマンドを叩いていたが
タイムアウトが多発したりで非常にストレスフルだった。
どうにか自動化できないかと思って作成。

## 1.bat側のコード

どんなもんだろうと書いてみたらアラ簡単
ftpコマンドの引数でテキストファイル渡せば良いだけだった。

```bat:getLog.bat

ftp -s:getLogCmd.txt

pause

exit

```

## 2.テキストファイル側のコード

基本的にコマプロでやってたことを転記するだけ。
cdとlcdで場所指定してget。
quote typeはAS/400用なので接続先次第で変更要。

```text:getLogCmd.txt

open ***.**.*.***
id
password
quote type C 943

lcd C:\
cd  /QTest/logs/

get stderr.log
get stdout.log

bye

```

## 3.実行

1～2で作成したbatファイルとtxtファイルを同じフォルダに入れて、
batファイルを実行すれば終わり。
これでもうタイムアウトにイライラさせられない！
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり)

## mermaid.jsとは

JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。

http://knsv.github.io/mermaid/
サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。

## 僕の使い方
JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。

### Haroopad
http://pad.haroopress.com/

フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。
v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。
mermaid.jsのグラフの書き方は、コード表記で、言語を`mermaid`にしてあげるだけ。簡単。

![Untitled__Edited_.png](https://qiita-image-store.s3.amazonaws.com/0/52410/f1f02559-d8ca-93db-3bba-4cc0b47148f1.png)


### Gitbook
https://github.com/GitbookIO/gitbook

MarkdownでHTMLや電子書籍(用途のpdfやepub)が作成できるGitbookも、mermaid.jsのラッパープラグインがある。

https://github.com/JozoVilcek/gitbook-plugin-mermaid

ただし、こっちはimportされてるmermaid.jsのバージョンがちょっと古いので、ganttは使えない。(v0.0.4現在)

Gitbookでドキュメント書いていると、途中の図を作るために他のエディタ開いて画像でexportしてgitbookのディレクトリに持ってくるのすら怠くなるので、このmermaidプラグインがとても重宝する。

## 実例

実際にいままで書いたことのあるパターンから、参考になるかもしれないものを改変して紹介する。

### Sequence Diagram
Sequenceって書くのが面倒(主に微妙な位置合わせ作業とか)で、以前ってわりと避けてたところあったけど、mermaid.js使い始めてからはガンガン書いている。

![Untitled__Edited_.png](https://qiita-image-store.s3.amazonaws.com/0/52410/8d0c6953-745a-6ecc-bccc-c236cbf1ccca.png)

こんな感じに、かなり詳細に書き込んでも手数少ないし、Note機能もあるので、シーケンス図だけでかなり表現できる。
(すでにシーケンスじゃねーよという話も飛んできそうだけど。)

### Flowchart
Flowchartは普通に流れ図書いてもいいんだけれど、データフロー的な表現もできる。

![Untitled__Edited_.png](https://qiita-image-store.s3.amazonaws.com/0/52410/1ce93f12-1935-f9fc-3bae-44d1c8e5b77e.png)

こんなかんじで、データの変換フローとかね。
というか、クラスの相関図とかデータフローとか本来の使いかと違うのばっかり書いているので、本来の流れ図向けの使い方は公式のデモで見て欲しい。

http://knsv.github.io/mermaid/demos.html

### Gantt
ガントもサイトのデモでは素敵な配色で出てるんだけど、mermaid.jsをそのまま持ってきただけだと真っ黒のイケてないかんじになる。

http://knsv.github.io/mermaid/gantt.html

公式だとmermaid.jsをインポートした後にjsでごにょごにょしてるっぽい。まぁgantt自体も最近追加されたばかりなので、今後に期待ということでどうか。

#### 追記(2015/5/25)

サイトのデモソースをちゃんと追ったら、`numberSectionStyles`を1以上に設定したら、色設定がされるようになった。

```js
mermaid.ganttConfig = {
    numberSectionStyles: 3 // 0:モノクロ, 1以上:色分けあり。数字は色分けするセクションの数。
};
```

![Menubar_and_index_html_-__Users_PC-1301231-N_KC_HC_src_KCH_TsucStub_Android_webconsole_-_Atom.png](https://qiita-image-store.s3.amazonaws.com/0/52410/7d086b2a-374c-5043-4dab-3b29d826c78e.png)

ここらへん、公式サイトの`ganttConfig`の説明のところが記載何もないので、今後バージョンアップに合わせていろいろ書いてくれることを期待ということでどうか。


## おわりに。

mermaid.jsに限らず、markdownのレンダラーと組みわせて使える製図ライブラリ/プラグインをちょくちょく見るようになった気がするので、多くの開発現場が、Wordの図形ツールでマウスを駆使して流れ図や構成図、シーケンス図を書く苦痛から、1日も早く解放されることを切に願います。

### 追記(2016/2/24)

gitbook & mermaid環境を久しぶりに一から作ったら戸惑ったのでメモりました。
[gitbook-plugin-mermaid-2の導入](http://qiita.com/uzuki_aoba/items/e0e27ab623b97a678a7e)

### 追記(2017/3/13)

Gitbook3でmermaid.jsを使うために、新しいプラグインを試してみました。また、Gitbookで仕様書とか書くために、簡単に始められるように [Boilerplate を作ってみました。](https://github.com/TakuroFukamizu/gitbook-specification-boilerplate) 
詳しくは以下の記事で。
[Gitbook 3でmermaid.jsを使う](http://qiita.com/uzuki_aoba/items/006340ab88cfb3a4c857)
Angular.jsのcontrollerをBabel使ってclass記法にすると"Controller not a function, got undefined"と怒られた件

##controllerをクラス化すると "Controller not a function got undefined"が出た

個人的なものなのかは知りませんが、今までcontrollerは次のように書いていました。

```controller.js
//moduleへcontrollerを登録した後でその中身をfunctionに分離して記述、
angular.module('myApp', [])
    .controller('FirstCtrl', FirstCtrl)

function FirstCtrl(){...}
```

それを単純にES6のクラス記法に直したのが↓　エラーが出ます。

```controller.js
// 単純にクラスに直したもの。"Controller not a function, got undefined"と言われるorz
angular.module('myApp', [])
    .controller('FirstCtrl', FirstCtrl)

class FirstCtrl{
    constructor(){...}
    ....
}
```

このエラーが出るのは単純な理由で、Babelでコンパイルした後のソースは↓のようになってるから。

```controller.js(Babelでコンパイル後)
angular.module('myApp', [])
    .controller('FirstCtrl', FirstCtrl)

// FirstCtrlは変数として宣言されてる
var FirstCtrl = function FirstCtrl() {
    _classCallCheck(this, FirstCtrl);
};
```

".controller('FirstCtrl', FirstCtrl)"で使われるとき、（Hoistingのせいで）変数FirstCtrlは存在してるけど、この時点では”undefined”だから、"not a function"と怒られるのも当然！

だからclassの宣言は、controllerの宣言より上に書かないといけない

```controller.js
// ちゃんとうごくやーつ
class FirstCtrl{
    constructor(){...}
    ....
}
angular.module('myApp', [])
    .controller('FirstCtrl', FirstCtrl)
```

これで小一時間くらい悩んでた orz
こういう初心者ぽいミスはあんまりしたくないなあ
GoogleドライブでWebサーバ

**Googleドライブでウェブページをホストする。**
---

[公式ドキュメント](https://support.google.com/drive/answer/2881970?hl=ja)
※この記事は、通称:「新しいGoogle Drive」を扱った内容です。

####**ざっとした流れ**
---
1. フォルダを共有 (既存または新規フォルダを共有化する。)
2. index.html を配置
3. フォルダのリンクを取得
4. URLを書き換えてブラウザでアクセス

####**やってみた**
---
1. [Google Drive](https://drive.google.com/drive/my-drive) にブラウザでアクセス
2. 今回は新規フォルダ **public_html** を作って共有化した。
フォルダをクリックして指定、そして共有アイコンをクリックする。
![共有化イメージ](https://qiita-image-store.s3.amazonaws.com/0/79419/4167c679-ff0a-3679-1674-00f68b54055b.png)

3. 他のユーザーと共有ダイアログボックスが表示されるので右下の詳細設定をクリックする。
    + **非公開 - 自分だけがアクセスできます** を **ウェブ上で一般公開 - インターネット上の誰でも検索、閲覧できます** に変更
4. このフォルダ**public_html**を開き**index.html**をドラッグまたはアップロード
5. **ドキュメント IDの取得とURLの書き換え** 私流はブラウザURLを参照する。
    1. **public_htmlフォルダを開きブラウザのURLをコピーする**
    2. 頭の　https://drive.google.com/drive/folders/ を www.googledrive.com/host/ に置き換える。

**そしてこのURLにアクセスすればとても他の人には語れない長いURLで表示される。**

####**注意事項**
---
+ CDNの読込みURLは、**//** から始める
    http:やhttps:があればブロックされる。
+ 相対パス参照はきっちりと、**./** を付ける。
    例えば`src="example.js"` とせず `src="./example.js"` にする。
+ 閲覧者にダウンロードを許可しない にチェックを入れると読込まれないので注意。
    `一度試してみてほしい。`

#####**雑感**
---
無料でとにかく手軽なのが嬉しい。
やはり短縮URLを使わないとメールに貼り付けるのはどうも。
キャッシュサーバ経由の為か最初は若干時間がかかる。
App Engine を使わずとも「俺のCDN」が実現する。けどURLがなぁ..

**以上です。**
uGUI スクロールビューを分割毎にスナップする


放置でしたが、最新のUnityに合わせて、更新しました。

https://github.com/imatomix/ScrollRectSnap

# ScrollRectSnap
ScrollRectにはページング機能やスナップ機能は付いてなかったので、デザイナーなりに考えた。


![ScrollRectSnap.gif](https://qiita-image-store.s3.amazonaws.com/0/47457/5f93ef7b-05c1-9959-ef07-929dbaac5770.gif)



- スクロール位置は[normalizedPosition](http://docs.unity3d.com/ScriptReference/UI.ScrollRect-normalizedPosition.html)から0f〜1fで取得/入力できるので、各ページ位置は以下で取得。

    > ページ数/ページ総数

- スクロール位置と各ページ間の中間地点比較して、越えていたら次ページ位置をスナップ位置に指定

    > ページ間の中間地点
(2*ページ数-1)/((ページ総数-1)*2)  
- スナップモーションは[Vector2.Lerp](http://docs.unity3d.com/ScriptReference/Vector2.Lerp.html)で。

# スクリプト
```csharp:ScrollRectSnap.cs
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class ScrollRectSnap : ScrollRect {
	public int horizontalPages = 3; // horizontalの分割数
	public int verticalPages = 3;  // verticalの分割数

	[SerializeField] private float smooth = 10f;  // スナップ係数
	private Vector2 targetPosition; // スナップ先座標
	private bool isDrag = false; // フラグ

	protected override void Start(){
		base.Start ();
		normalizedPosition = content.GetComponent<RectTransform> ().pivot;
		targetPosition = FindSnapPosition ();
	}

	void Update(){
		if (!isDrag && normalizedPosition != targetPosition) {
			normalizedPosition = Vector2.Lerp (normalizedPosition, targetPosition, smooth * Time.deltaTime);
		}
	}

	public override void OnBeginDrag(PointerEventData eventData){
		base.OnBeginDrag (eventData);
		isDrag = true;
	}

	public override void OnEndDrag(PointerEventData eventData){
		base.OnEndDrag (eventData);
		targetPosition = FindSnapPosition ();
		isDrag = false;
	}
		
	// スナップ先座標を取得する
	Vector2 FindSnapPosition(){
		float x = 0, y = 0;
		Vector2 center;

		if(horizontal){
			if(horizontalPages > 1){
				for (int page = 0; page < horizontalPages; page ++) {
					center.x = (2f * page - 1f) / ((horizontalPages - 1f) * 2f);
					if(horizontalNormalizedPosition >= center.x){
						x = page / (horizontalPages - 1f);
					}
				}
			}
		}else{
			x = horizontalNormalizedPosition;
		}

		if(vertical){
			if(verticalPages > 1){
				for (int page = 0; page < verticalPages; page ++) {
					center.y = (2f * page - 1f) / ((verticalPages - 1f) * 2f);
					if(verticalNormalizedPosition >= center.y){
						y = page / (verticalPages - 1f) ;
					}
				}
			}
		}else{
			y = verticalNormalizedPosition;
		}
		return new Vector2 (x, y);
	}
}
```
上記だけだと追加したpublic変数がInspectorに表示されないので、以下をAssets/Editorに追加

```csharp:ScrollRectSnapEditor.cs
using UnityEngine;
using UnityEditor;

[CustomEditor( typeof(ScrollRectSnap))]
public sealed class ScrollRectSnapEditor : Editor {
	
	public override	void OnInspectorGUI(){
		DrawDefaultInspector ();
	}
}
```

# 使い方

- ScrollRect の代わりに上記スクリプトをコンポーネントに追加。
- Horizontal Pages に水平方向のページ総数を入力 (Horizontal がオンになっていないと効かない)
- Vertical Pages に垂直方向のページ数を入力 (Vertical がオンになっていないと効かない)
- Smoothでスナップモーションを調整
飛行機内で楽しむGearVRコンテンツ制作のアンチパターン


カンタス航空が機内エンターテイメントに導入するという話題も出ていますが、海外便エコノミークラスでGearVRを使ってみて気になった点をまとめます。

[Samsung's Gear VR will entertain Qantas' first-class passengers](http://www.engadget.com/2015/01/29/samsung-gear-vr-qantas/)

## インターネット接続が必要

GearVRはスマートフォンと接続して使うので常時オンラインであることが多い環境です。ですが、機内ではオフラインとなるので通常時とはいろいろと変わってきます。

- そもそもOculus Home上でソフトのアイコンなどが表示されない
- Oculus Cinemaのショートムービーが見れない
- オンラインハイスコアなどは動かない

ネット接続を使うことでアプリサイズの削減やオンライン機能などの実装ができるのは利点ですが、機内での利用を想定するのであればオフライン時の挙動も考慮に入れたほうが良さそうです。

## 視点を使ったカーソル操作が必要

飛行機内は安定していても細かく振動しています。この為、視線をつかった注視カーソルは操作が困難でした。同じ場所を見つめずにカーソルなどを動かす代替手段があると操作がしやすいです。

## 環境音やBGMが弱い

飛行機内はかなり騒音が激しく、ノイズキャンセリングヘッドホンを使っても完全には防ぎきれません。外部の音が聞こえるとどうしても没入感が落ちてしまうので、BGMや環境音などが適度に発せられていると快適です。
特に3次元的なサウンドが再生されると実際の空間よりも広く体感できるので効果が高いようです。

## 見回して画面を広く見ることが必要

飛行機内は狭く、隣の乗客もあるので自由にあちこちを見回すというのはかなり難しいです。
ゲームの進行などに見回す操作が必須になっているとプレイ不可能といって良い状況です。これはあくまで正面だけを見ればよい形式やゲームパッドでの代替方法があると良さそうです。



あくまで飛行機内でGearVRをプレイした際の気付きですが、通常の状態でも遊びやすいコンテンツを作る助けになりそうです。
Apache で複数の Django プロジェクトを扱う (WSGIDaemonProcess)

複数の Virtual Host でそれぞれ異なる Django プロジェクトを扱うときの conf の書き方です。

```
<VirtualHost *:80>
ServerName project-1.com
WSGIDaemonProcess project-1 python-path=/path/to/foo:path/to/bar
WSGIProcessGroup project-1
WSGIScriptAlias / /path/to/wsgi.py process-group=project-1
...
</VirtualHost>

<VirtualHost *:80>
ServerName project-2.com
WSGIDaemonProcess project-2 python-path=/path/to/foo:path/to/bar
WSGIProcessGroup project-2
WSGIScriptAlias / /path/to/wsgi.py process-group=project-2
...
</VirtualHost>
```
JSON ScemaからAPIドキュメントを作成するGoのコマンド書いてみた

https://github.com/hiroosak/gendoc

PRMDのように、JSON Schemaからドキュメントを生成するものを作ってみました。

# 使い方

## インストール

```bash
go get github.com/hiroosak/gendoc
```

## JSON Schemaを用意する

`init` で テンプレートがymlで出力されるので、それを使ったりしながらリソースごとに編集します。

```bash
$ gendoc init user > src/user.yml
$ gendoc init article > src/article.yml
# 編集
$ vim src/{user,article}.yml

# ドキュメント作成
$ gendoc doc -src src  > doc.html
```

HTMLができます。

![image](https://qiita-image-store.s3.amazonaws.com/0/3163/64cd96ed-c869-d3b2-61c7-403d3c2b3664.png)
http://hiroosak.github.io/gendoc/sample.html

# JSON Schemaのサンプル

リソースごとに[JSON Hyper-Schema](http://json-schema.org/latest/json-schema-hypermedia.html)形式のjsonを書いていきます。

```yaml:user.yml
---
$schema: "http://json-schema.org/draft-04/hyper-schema"
id: "user"
title: user
type: object
definitions:
  id:
    type: integer
    description: resource id
    example: 1
  name:
    type: string
    description: user name
    example: Ken
links:
- description: List existing users.
  href: "/users"
  method: GET
  rel: instances
  title: List
properties:
  id:
    "$ref": "#/definitions/id"
  name:
    "$ref": "#/definitions/name"
required:
- id
- name
```

* いまのところ `id` の設定は必須です。

# metaとoverview

ドキュメント生成時にJSONファイルを用意して、ドキュメントの内容を少しだけ変更できます。

### meta

```json
{
  "title": "ドキュメントのタイトル",
  "base_url": "APIのベースのURL",
  "headers": [
    "リクエスト時のヘッダー"
  ]
} 
```

デフォルトは

```json
{
  "title": "API Document",
  "base_url": "http://localhost",
  "headers": []
} 
```

### overview

ドキュメントの頭に何かhtmlを入れたい場合に使います。

```bash
$ echo '<h1 class="page-header">ドキュメント</h1>' > overview.html
$  gendoc doc -meta meta.json -overview overview.html -src src  > doc.html
```

# tips

## 他のスキーマファイルを読み込む

例えば、`article`の結果に`user`のJSONデータを入れたい場合は
`$ref`に`user.json`を設定しておけば、ドキュメント上でuser以下の階層が表示されるようになります。

```yaml:article.yml
---
$schema: "http://json-schema.org/draft-04/hyper-schema"
id: "article"
title: article
type: object
definitions:
  id:
    type: integer
    description: resource id
    example: 1
links:
- description: List existing articles.
  href: "/articles"
  method: GET
  rel: instances
  title: List
properties:
  id:
    "$ref": "#/definitions/id"
  user:
    "$ref": "user.json"
required:
- id
- user
```

結果

![image](https://qiita-image-store.s3.amazonaws.com/0/3163/f1a671a0-7950-c299-cf2f-dd285fb8e9e3.png)

## yamlからjsonに変換する

`gen` でyamlからjsonに変換できます。
他でJSON Schemaファイルを使いたい場合に変換したものを置いておきます。

```bash
$ gendoc gen -src src -dst dst
$ tree src/ dst/
src/
├── article.yml
└── user.yml
dst/
├── article.json
└── user.json
```