OmniAICreator/Qiita-1.07M huggingface dataset:
ChromeのBookmarkでクリップボードにコピーする


#### JavaScript で指定したテキストをコピーする

```js
javascript:(function(){
  var copyFrom = document.createElement("textarea");
  copyFrom.textContent = 'copy!';
  var bodyElm = document.getElementsByTagName("body")[0];
  bodyElm.appendChild(copyFrom);
  copyFrom.select();
  var retVal = document.execCommand('copy');
  bodyElm.removeChild(copyFrom);
  return retVal;
})();
```

#### LGTMをClipboardにCopyするBookmark。

```js
javascript:(function(){var copyFrom = document.createElement("textarea");copyFrom.textContent = 'LGTM';var bodyElm = document.getElementsByTagName("body")[0];bodyElm.appendChild(copyFrom);copyFrom.select();var retVal = document.execCommand('copy');bodyElm.removeChild(copyFrom);return retVal;})();
```
bashで関数内から関数を呼び出したときの呼び出し元関数の戻り値の罠


bashで関数の戻り値を標準出力で返すということは普通に行うことと思います。
その時に関数の戻り値が予期せぬ値になるケースがありました。
調べたところ、関数内で呼んでいる関数がechoを呼んでいる場合に
戻り値がその出力を含む挙動になっていました。

以下が問題のshellです。

```bash
#!/bin/bash
funcA() {
    echo "a"
}

funcB() {
    funcA
    echo "b"
}

b_result=$(funcB)
echo $b_result
```

上記を実行した場合の期待する出力は"b"ですが実際に実行すると以下のようになります。

```
a b
```

funcAの出力がfuncBの標準出力に含まれてしまいます。
上記を回避するためにはfuncAの呼び出し部分で戻り値を受けるように変更します。

```bash
#!/bin/bash
funcA() {
    echo "a"
}

funcB() {
    local temp=$(funcA) #←戻り値を受けるようにする。
    echo "b"
}

b_result=$(funcB)
echo $b_result
```

これで期待した"b"という戻り値を取得することができます。
パネル風のListのliエリアをaタグの有効範囲にする

前回、「[Tableのtdエリア全体をaタグの有効範囲にする](http://qiita.com/Yoko3/items/936efbb5c2385b4778bb)」というのをメモしましたが、今度は同じような見た目をListで作成して、liエリア全体をaタグの有効範囲にしたいと思います。

#パネル風のListを作る

```ruby:html

<ul>
  <li><a href="http://test">Test01</a></li>
  <li><a href="http://test">Test02</a></li>
  <li><a href="http://test">Test03</a></li>
</ul>
```


```ruby:css
ul{
  text-align: center;
  }

li{
  display:table-cell;
  border: 2px solid #fff;
  background-color: #ccc;
  vertical-align: middle;
  width:150px;
  height:150px;
}

li a{
  font-size: 20px;
  text-decoration: none;
  color: #fff;
}

li a:hover{
  background: #666;
}
```
![スクリーンショット 2017-08-09 10.04.05.png](https://qiita-image-store.s3.amazonaws.com/0/55407/161bcc86-3c0f-0ce1-43a2-ff26a1518dfe.png)

aタグの有効範囲は、文字の上だけです。狭い。


#aタグの有効範囲を広げる

```ruby:css

  ・
  ・
  ・

li a{
  font-size: 20px;
  text-decoration: none;
  color: #fff;
  
  margin: -75px;
  padding: 75px 75px;
}

  ・
  ・
  ・

```
![スクリーンショット 2017-08-09 10.08.30.png](https://qiita-image-store.s3.amazonaws.com/0/55407/ae4b2b74-e90f-639d-83d7-03fce936219f.png)

aタグの有効範囲を枠よりも大きくします。

#liエリアからはみ出した部分を見えないように

```ruby:css
  ・
  ・
  ・

li{
  display:table-cell;
  border: 2px solid #fff;
  background-color: #ccc;
  vertical-align: middle;
  width:150px;
  height:150px;
  
  overflow: hidden;
}
  ・
  ・
  ・
```

![スクリーンショット 2017-08-09 10.12.49.png](https://qiita-image-store.s3.amazonaws.com/0/55407/982da0e7-e036-5f7f-8f85-f25f640c4af2.png)

liエリアからはみ出した部分は表示されないようにします。liエリア全体をaタグの有効範囲にできました。完成！

これはTableの時でも使えるのかな。
dockerコンテナからローカルのMySQLを使う場合にすること


## 環境

Mac OS Sierra バージョン 10.12.6

MySQLはbrewでインストール　Server version: 5.7.18 Homebrew

## Docker

docker-compose.yml

このAPIコンテナからローカルのMySQLにつなぎたい

```
version: "3"
services:
  web:
    build:
      context: ./web
    container_name: web
    command: npm start
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development
    volumes:
      - ./web:/home/web
  api:
    build:
      context: ./api
    container_name: api
    command: npm start
    ports:
      - "3010:3010"
    environment:
      - NODE_ENV=development
    
    volumes:
      - ./api:/home/api
  nginx:
    build:
      context: ./nginx
    container_name: nginx
    ports:
      - "8080:80"
      - "443:443"
    environment:
      - NODE_ENV=development
  ```


## Macですること

Aliasをきる

 ```
sudo ifconfig lo0 alias 10.200.10.1/24
 ```
## MySQLですること

外部からのアクセスを許可するため、bind-addressの設定をすること
外部からのアクセスができるユーザーを作成すること

- my.cnf

 ```
bind-address = 10.200.10.1
 ```

- my.cnfの罠にはまらないように

どのファイルを読み込んでいるかをみる。

 ```
$ mysql --help | grep my.cnf
                      order of preference, my.cnf, $MYSQL_TCP_PORT,
/etc/my.cnf /etc/mysql/my.cnf /usr/local/etc/my.cnf ~/.my.cnf
 ```

/etc/my.cnfから、順に読み込まれていくが上書きされてしまうので、最優先が ~/.my.cnfだったりする。
/etc/my.cnfに書いていた設定が、/usr/local/etc/my.cnfの設定でうわが枯れてしまってハマりました。



- MySQL自動起動設定を一度止めておいた方がいいかも

落としたのに、蘇っている。。。とかある

 ```
 brew services stop mysql
 ```


- 外部からアクセスできるユーザーを作成すること

 ```
GRANT ALL ON *.* TO user@'%' IDENTIFIED BY 'password' WITH GRANT OPTION;

 ```


## APIですること

hostとユーザー名を上記で設定したのにすること


 ```
module.exports = {

  development: {
    client: 'mysql',
    connection: {
      host : '10.200.10.1',
      database: 'test_db',
      user:     'user',
      password: 'password'
    },
    pool: {
      min: 2,
      max: 5
    },
    migrations: {
      tableName: 'knex_migrations'
    }
  },
 ```


### 余談

bind-address=0.0.0.0でもいけるかも
自分の環境ではmy.cnfにその設定を入れると起動しなかったので、上記のようにしています。

要は、MySQLが外部（コンテナ）からの接続を受け入れるようにしておくことがキモです。
shellscript でログデータを加工した時のメモ

AWS S3 に保存している tar.gz 形式で保存している json のログデータを加工する必要があった時以下のような shellscript で対応したというメモ

```
COPY_FROM=/path/to/copy_from
COPY_TO=/path/to/copy_to

cd COPY_FROM=/path/to/copy_from
aws s3 sync s3://target_bucket/target_data/ .


for nested_dir in $(ls -1 $COPY_FROM );; do
	if [ ! -d $COPY_TO/$nested_dir ]; then
		mkdir -p $COPY_TO/$nested_dir
	fi

	for target_file in $(ls -1 $COPY_TO/$nested_dir ); do
		zcat $COPY_TO/$nested_dir/$target_file | \
			jq -c 'del(.target_delete_key)' | \
			gzip -c > \
		$COPY_TO/$nested_dir/$target_file
	done
done
```
space, tabの色を変更する

あまり情報がなかったのでメモ。

実行環境
ATOM: Version1.19.0

メニューバーの「ATOM」-> 「Stylesheet…」でstyles.lessを開く

```less:styles.less
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}
```

に下記のように追記する。

```less:styles.less
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
  .indent-guide.leading-whitespace {
    color: yellow; // spaceの色
    &.hard-tab {
      color: red; // tabの色
    }
  }
}
```

こんな感じになる。

![atom white-space highlight.png](https://qiita-image-store.s3.amazonaws.com/0/37319/a3ee9a50-33f0-de13-bae4-d3c17bf54691.png)
CFアプリ開発と管理#9 cf scale によるアプリのスケール

ユーザーの負荷やアプリケーションによって実行されるタスクの数や性質などの要因によって、アプリケーションが使用するディスク領域とメモリが変更される可能性があります。 多くのアプリケーションで、使用可能なディスク領域またはメモリを増やすと、全体のパフォーマンスが向上します。 同様に、アプリケーションの追加インスタンスを実行することで、アプリケーションがユーザーの負荷や同時要求の増加を処理できるようになります。 これらの調整は、アプリケーションのスケーリングと呼ばれます。

`[cf scale](http://cli.cloudfoundry.org/ja-JP/cf/scale.html)`を使用すると、トラフィックや需要の変化に合わせてアプリケーションを拡大/縮小することができます。

*注意事項: この記事は、Cloud Foundry Documentaion [Scaling an Application Using cf scale](https://docs.cloudfoundry.org/devguide/deploy-apps/cf-scale.html) (last updated: December 3, 2016) からの独自の翻訳とコメントです。内容を保証するものではありません。*


## 水平スケーリング (スケール・アウト）
アプリケーションを水平にスケーリングすると、アプリケーションのインスタンスが作成または破棄されます。

アプリケーションへの着信要求は、アプリケーションのすべてのインスタンスに自動的に負荷分散され、各インスタンスは他のすべてのインスタンスと並行してタスクを処理します。 より多くのインスタンスを追加することで、アプリケーションは増加したトラフィックと需要に対応できます。

`cf scale APP -i INSTANCES` を使用してアプリケーションを水平に増強します。 Cloud Foundryは、INSTANCESと一致するようにアプリケーションのインスタンスの数を増減します。

~~~
$ cf scale myApp -i 5
~~~

## 垂直スケーリング （スケール・アップ）
アプリケーションを垂直に増強すると、Cloud Foundryがアプリケーションのすべてのインスタンスに適用するディスク容量の制限またはメモリの制限が変更されます。

`cf scale APP -k DISK`を使用して、アプリケーションのすべてのインスタンスに適用されるディスク領域制限を変更します。 DISKは、メガバイトの場合はM、ギガバイトの場合はGのいずれかの整数でなければなりません。

~~~
$ cf scale myApp -k 512M
~~~

`cf scale APP -m MEMORY`を使用して、アプリケーションのすべてのインスタンスに適用されるメモリ制限を変更します。 MEMORYは、メガバイトの場合はM、ギガバイトの場合はGのいずれかの整数でなければなりません。

~~~
$ cf scale myApp -m 1G
~~~
[クイズ]javascriptと仲良くなるための一歩　第２４話「メソッド」

#問題

ECMAScriptの言語仕様にメソッドは存在する？しない？

a: 存在する。
b: 存在しない。

:mouse:
:cow:
:tiger:
:rabbit:
:dragon_face:
:snake:
:horse:
:sheep:
:monkey_face:
:bird:
:dog:
:boar:
:mouse:
:cow:
:tiger:
:rabbit:
:dragon_face:
:snake:
:horse:
:sheep:
:monkey_face:
:bird:
:dog:
:boar:

正解はa。ECMAScriptの言語仕様にメソッドは存在する。

ECMAScriptでは、
プロパティの値としての関数を、メソッドと呼んでいます。

参考：https://tc39.github.io/ecma262/#sec-method

```
4.3.31method
function that is the value of a property

NOTE
When a function is called as a method of an object,
the object is passed to the function as its this value.
```
CFアプリ開発と管理#7 アプリ・コンテナのライフサイクル

このトピックでは、Diegoアーキテクチャ上で実行されているCloud Foundry（CF）デプロイ時のアプリケーション・コンテナのライフ・サイクルについて説明します。

*注意事項: この記事は、Cloud Foundry Documentaion [Application Container Lifecycle](https://docs.cloudfoundry.org/devguide/deploy-apps/app-lifecycle.html) (last updated: January 31, 2017)からの独自の翻訳とコメントです。 内容を保証するものではありません。*


## デプロイメント（配置）
アプリケーションのデプロイメント・プロセスには、コンテナ内でのアプリケーションのアップロード、ステージング、および起動が含まれます。アプリは一定の期間内にこれらの段階のそれぞれを正常に完了する必要があります。フェーズのデフォルトの時間制限は次のとおりです。

* アップロード：15分
* ステージ：15分
* 起動：60秒


注：管理者はこれらのデフォルトを変更できます。アプリのデプロイメントに設定されている実際の時間制限については、管理者に確認してください。


開発者は、アプリケーション・マニフェストまたはコマンドラインからアプリケーションを起動する時間制限を変更できます。詳細については、「アプリケーション・マニフェストを使用したデプロイメント」および「アプリケーション・ヘルスチェックの使用」の「タイムアウト属性」セクションを参照してください。

## クラッシュイベント
アプリ・インスタンスがクラッシュした場合、別のコンテナにインスタンスを起動を3回試みることで、自動的にインスタンスが再起動されます。 3回とも再起動が失敗すると、CFは30秒間待ってから別の再起動を試みます。待機時間は、9回目の再起動まで再起動ごとに2倍になり、200回目の再起動までその期間にとどまります。 200回再起動すると、CFはアプリ・インスタンスを再起動しようとしなくなります。


## エバキュエーション(避難)
特定のオペレータアクションでは、アプリケーション・インスタンスをホストするコンテナを使用してVMを再起動する必要があります。たとえば、stemcellを更新するオペレーターや新しいバージョンのCFをインストールするオペレーターは、デプロイメント内のすべてのVMを再起動する必要があります。 CFは、エバキュエーションと呼ばれるプロセスによってシャットダウンしているVM上のインスタンスを自動的に再配置します。 CFは別のVM上のappインスタンスを再作成し、正常になるまで待ってから、古いインスタンスをシャットダウンします。避難中、開発者は短時間の間、アプリのインスタンスが重複した状態になることがあります。

## シャットダウン
'cf scale APPNAME -i NUMBER-OF-INSTANCES' というコマンドに応答して、またはシステムイベントのためにCFがアプリ・インスタンスのシャットダウンを要求すると、Cloud Foundry はコンテナ内のアプリ・プロセスをSIGTERMに送ります。プロセスは正常にシャットダウンするのに10秒かかります。プロセスが10秒後に終了しなかった場合、Cloud Foundy はSIGKILLを送信します。

アプリは、SIGTERMを受け取ってから10秒以内に、アプリがSIGKILLでアプリを終了する前に、終了処理を完了する必要があります。たとえば、Webアプリケーションは既存のリクエストの処理を完了し、新しいリクエストの受け入れを停止する必要があります。
VPNの仕組み（いったんメモ書き）

## VPN
+ Virtual Private Network
+ 種類
  + インターネットVPN：インターネットアクセス回線を利用するVPN
  + IP-VPN：通信業者の提供する閉域網のネットワークを利用するVPN
+ インターネットVPNの仕組み
  + トンネリング
    + パケットに新しいヘッダを付けてカプセル化している
  + 暗号化
    + データリンク層：L2TP、PPTP
    + ネットワーク層：IPsec
    + トランスポート層：SSL/TLS(秘密鍵暗号方式+公開鍵暗号方式)
    + アプリケーション層：PGP、S/MIME、SSH
+ IP-VPNの仕組み
  + MPLS（Multi Protocol Label Switching）
    + パケットに「ラベル」と呼ばれる2種類のヘッダ情報を付与する
      + 1つ目のラベルは転送経路を示す
        + 結果、ルータ側での経路選択処理をする必要がなくなり速くなる
      + 2つ目のラベルでユーザーのネットワークを識別する
        + ユーザごとの論理的なネットワークを構築でき、暗号化が不要
+ IPsecの仕組み
  + トンネリング：中のヘッダやユーザデータもすべて暗号化して、ESP（Encapsulating Security Payload）という独自の制御パケットでカプセル化される
  + 通信相手の認証：「事前共有鍵」と呼ばれる同一のパスワードを登録し、トンネル構築時に照らし合わせるのが一般的
  + パケットの暗号化：
    + 「DES（Data Encryption Standard）」、「3DES」、「AES（Advanced Encryption Standard）」などの共通鍵アルゴリズムを用いて暗号化を行ない、経路上での盗聴や改ざんなどを防ぐ
    + これらの共通鍵アルゴリズムを用いる限りは、つねに盗聴の危険性が伴うが、IPsecでは交換される数値がネットワーク上で漏えいしても鍵が復元できない「Diffie-Hellman法」という方式で乱数交換を行い、共通鍵自体をネットワーク上に流さなくとも、暗号化のための鍵を両者で生成できる
  + 改ざん検知：「MAC（Message Authentication Code）」という値をパケットに付与することで実現する
    + MACはハッシュ関数によって算出されたパケットのダイジェストである
    + 受信側はパケットに付けられたMACと、自身が算出したダイジェストを比較することで、悪意の第三者による改ざんの有無を検知できる
    + このハッシュの算出に関しては、「MD5（Message Digest 5）」と「SHA（Secure Hash Algorithm）」という2つのアルゴリズムが用意されている
  + 設定情報の自動更新
    + 実際のトンネルを構築する前に、VPNルータ同士が各種の設定を交換する必要があるが、IPsecでは「IKE（Internet Key Exchange）」というプロトコルを用いて、暗号や認証のパラメータを自動的に交換・更新する
    + IKEを使うと、鍵生成に必要な情報が安全に交換され、さらに一定時間が経つと自動的に更新される
  + まとめ：IPsecは、拠点間のLAN接続VPNとして利用されるのが一般的。理由はIPsecはトンネル構築するIPを固定化する必要があるため
+ リモートアクセスのためのVPN
  + PPP（Point-to-Point Protocol）
  + SSL-VPN
    + SSL-VPNゲートウェアを構築し、認証データベースにアクセスを許可するユーザを登録
    + ユーザは接続先のSSL-VPNゲートウェイをURLで指定し、認証する
composerでPHPのバージョンを制限したい

探せば良いドキュメントはたくさんありますが、ハマった上になかなか検索ワードにヒットする記事が見つからなかったので、スキマを埋めるためにあえて書きます！

# なにがしたいか？

例えばこのようにした時、

```
composer require phpunit/phpunit
```

composerさんは自動的に「最新バージョン」のphpunitを取ってきてインストールしてくれますが、プロジェクトの本番環境がなんと**今更PHP5.3.3だった**、PHP5.3.3に対応したphpunitが欲しいんだ！というケース。

# 結論

## config.platform を書く

composer.json に下記の通り書きます。
※便宜上コメントを入れていますが、JSONなので実際にはコメントは書けません

```coffeescript:composer.json
{
    "require": {
        #依存パッケージ
    },
    "config": {
        "platform": {
            "php": "5.3.3" #開発・リリース環境のPHPバージョン
        }
    }
}
```

# 解説

## composer は composer を実行した環境に入っているPHPのバージョンを見ている

最初の `composer require phpunit/phpunit` を実行したとき、プロジェクトの本番＆テスト環境がPHP5.3.3なのに、 `require:{"php":">=7.0"}` というパッケージをインストールするので、[]が使えないよ！とか怒られてしまっていた。
composerが管理するパッケージには、ほとんど `require:{"php":">=5.5.9"}` と書かれていて、うまいこと管理をしてくれていると思っていたのに、これはどういうことだ！

それはね、composer を実行していた**手元のPCに入っていたのがPHP7.1だったから**だよ。だからcomposerは安心して、7.0以上で使える新しいパッケージを選択してくれたみたいです。

そうじゃなくて！
手元のPCはPHPの7.1だけど、実際に**このプロジェクトの本番環境はPHP5.3.3**なんだ！ だからPHP5.3.3までで動くパッケージを探してきてほしい。ということをcomposerに指示するのが、`config:platform`のようです。platformは実際の動作環境を指示する、結構大事な設定。むしろいつも必ず入れておいたほうがいい設定と言えます。

これを指定しておけば、phpunitって、PHP5.3.3で動くバージョンってなんだっけ？と調べなくても、`composer require phpunit/phpunit` とするだけで、Ver.4.8.x を見つけてインストールしてくれます。

# 余談

**2019-04修正**
@shouchiku さんありがとうございます。

コマンドラインで設定する場合はこのように！
やったー。（個人的に好きな）コマンドラインでできました！😆

```
composer config platform.php 5.3.3
```
kintoneで合計欄が「#N/A!」となってしまうときは、空白の項目に注意

kintoneで「計算」フィールドを使って、合計を計算するとき「#N/A!」というエラーメッセージが表示されることがあります。
これは数字のフィールドに空白のフィールドがあるため。

![2017-05-01_9-37-38.png](https://qiita-image-store.s3.amazonaws.com/0/3977/516e230a-57fc-e93b-2675-19bae181e82d.png)

kintoneでは、空白のフィールドを「0」として扱うことができません。そのため、未入力の場合でも必ず 0を挿入しましょう。

入力し忘れを防ぎたい場合は、アプリ制作の時にフィールドの初期値として、「0」を入れておくと良いでしょう。

![2017-05-01_9-41-32.png](https://qiita-image-store.s3.amazonaws.com/0/3977/c6eaa1ce-0407-aed0-1925-4736161ffdee.png)

- [kintone導入・開発支援 \| H2O space](https://h2o-space.com/service/kintone/)
Canvasでテキストがオーバーフローしない角丸吹き出しを作る

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Canvasでテキストがオーバーフローしない角丸吹き出しを作る</title>
<script type="text/javascript">
window.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.height = 500;
    canvas.width = 500;
    document.body.appendChild(canvas);


    // 基本設定
    var originX = 200;// 矢印X座標
    var originY = 100;// 矢印Y座標
    var boxWidth = 100;
    var padding = 5;
    var radius = 5;// 円弧の半径
    var text="テストテストテストテストテスト\nテス\nト";


    var context = canvas.getContext("2d");
    context.fillStyle = "#b7e6ff";

    // テキスト設定
    var limitedWidth = boxWidth - (padding * 2);
    var size = 12;
    context.font = size + "px ''";

    // テキスト調整　行に分解
    var lineTextList = text.split("\n");
    var newLineTextList = [];
    lineTextList.forEach(function (lineText) {
        if (context.measureText(lineText).width > limitedWidth) {
            characterList = lineText.split("");// 1文字ずつ分割
            var preLineText = "";
            var lineText = "";
            characterList.forEach(function (character) {
                lineText += character;
                if (context.measureText(lineText).width > limitedWidth) {
                    newLineTextList.push(preLineText);
                    lineText = character;
                }
                preLineText = lineText;
            });
        }
        newLineTextList.push(lineText);
    });
    var lineLength = newLineTextList.length;

    // 矢印
    var arrow = {
        "x" : originX,
        "y" : originY,
        "width" : 20,
        "height" : 10,
    }
    context.beginPath();
    context.moveTo(arrow.x, arrow.y);
    context.lineTo(arrow.x + arrow.width / 2, arrow.y + arrow.height);
    context.lineTo(arrow.x - arrow.width / 2, arrow.y + arrow.height);
    context.fill();

    // 角丸
    var width = boxWidth;// 枠の幅
    var height = (size * lineLength) + (padding * 3);// 枠の高さ
    var toRadianCoefficient = Math.PI / 180;// 角度からラジアンへの変換係数
    // 角丸原点（左上座標）
    var boxOrigin = {
        "x" : arrow.x - (width / 2),
        "y" : arrow.y + arrow.height,
    }
    // 円弧から円弧までの直線は自動で引かれます、角度は回り方によって変わります。
    // arc(中心x, 中心y, 半径, 開始角度, 終了角度, 反時計回り)
    context.beginPath();
    context.arc(boxOrigin.x + radius, boxOrigin.y + radius, radius, 180 * toRadianCoefficient, 270 * toRadianCoefficient, false);// 左上
    context.arc(boxOrigin.x + width - radius, boxOrigin.y + radius, radius, 270 * toRadianCoefficient, 0, false);// 右上
    context.arc(boxOrigin.x + width - radius, boxOrigin.y + height - radius, radius, 0, 90 * toRadianCoefficient, false);// 右下
    context.arc(boxOrigin.x + radius, boxOrigin.y + height - radius, radius, 90 * toRadianCoefficient, 180 * toRadianCoefficient, false);// 左下
    context.closePath();
    context.fill();
    
    // テキスト描画
    context.fillStyle = "#000000";
    newLineTextList.forEach(function (lineText, index) {
        context.fillText(lineText, boxOrigin.x + padding, boxOrigin.y + padding + (size * (index + 1)));
    });
}
</script>
</head>
<body></body>
</html>
```

https://jsfiddle.net/m0wjvbbz/
Laravel Tips #2 表示・非表示について

誰も「非表示機能を作ってください」って頼まれたことはあるんでしょう？
Laravelでのその機能について話をします。

一番簡単はやり方で考えると、こうなりますね：

```php 
// GET /products/1 
public function show(Product $product)
{
    abort_unless($product->isVisible(), 404);

    // コントローラー用のロジック
}
```

`/products/1`にリクエストがあるとき、Laravelのコンテーナーが1のIDを持つProductを探して、裏で `Product::findOrFail(1)` をやってくれますね。
商品を出すのはそこだけだったら別にいいんですけど、きっと商品があるシステムは商品が中心で、色んなところに出るんでしょう。
使うたびに表示のチェックを行うのがよくないですね。

それを解決するにはクエリースコープを作るのがいいですね。
でも、クエリースコープを作ると、コンテーナーからのバインディングを失うね。
それでも上のチェックよりは良く見えますね。findOrFailで見つからない場合は、ModelNotFoundExceptionを投げて、それで404になりますね。


```php
// GET /products/1 
public function show($productId)
{
    $product = Product::visible()->findOrFail($productId);

    // コントローラー用のロジック
}
```

行数を減らして、Ifも消えたけど、それでも正しく思えないんですね…
どうしてもコンテーナーから解決して欲しいんですね！

グローバルスコープにしたら解決できそうですから、やってみましょう！

```php 
class Product extends Eloquent
{
    protected static function boot()
    {
        parent::boot();

        static::addGlobalScope('visible', function ($query) {
            $query->visible();
        });
    }    
}

// GET /products/1 
public function show(Product $product)
{
    // コントローラー用のロジック
}
```

これですべてのProductには非表示だったらコンテーナーからの404になりますね！やった！
…と思うかもしれないけど、管理者が非表示の商品を取得したい場合はどうなるんでしょうか？

```php
// GET /products/1 
public function show($productId)
{
    $product = Product::withoutGlobalScopes()->findOrFail($productId);

    // コントローラー用のロジック
}
```

前と同じような問題ですが、表示だったときの問題を、非表示のときに移動してしまっただけですね。

## 両方コンテーナーから解決してもらう方法

表示でも非表示でもコンテーナーから解決してほしいことになったなら、オブジェクトレベルで解決したほうがいいですね！
ここまで来たなら、明らかにProductっていうクラスが責任をたくさん溜まっていますね。2つの役を演技できないようですね。

```php
class VisibleProduct extends Product
{
    //
}

// GET /products/1 
public function show(VisibleProduct $product)
{
    // コントローラー用のロジック
}

// GET /admin/products/1 
public function show(Product $product)
{
    // コントローラー用のロジック
}
```

VisibleかかっていることがProductには当たり前だと感じたら、逆も可能ですね。
恐らく管理者により、一般ユーザーにProductを表示するほうが珍しくないんでしょう。

```php
// 名前は任せます
class UnscopedProduct extends Product
{
    //
}

// GET /products/1 
public function show(Product $product)
{
    // コントローラー用のロジック
}

// GET /admin/products/1 
public function show(UnscopedProduct $product)
{
    // コントローラー用のロジック
}
```

こうすると普通のユーザーに表示するときはデフォルトで守られているし、ガードを下げたい場合は綺麗にできますね。

ただ、一つあるのですが、Eloquentはクラス名から色んなプロパティーを仮定として出していますね。
例えば、UnscopedProductっていうクラスには unscoped_products っていうテーブルを期待しますね。
リレーションシップ用にも unscoped_product_id などを期待するので、是非それぞれのプロパティーはクラスを書いてください。

```php
class UnscopedProduct extends Product
{
    protected $table = 'products';

    // getForeignKey()なども
}
```

## 結論

もちろん、マスターでしか編集しないキーワードなどの表示・非表示なんかにわざわざ別モデルを作成することなんて言ってないんですが、ドメインに関するモデルでしたら、是非やってみる価値あると思いますね。
間違いで気づかずに非表示の商品や、出版されるはずのない記事などを、ミスって公開してしまう可能性は減るんでしょう。コードがDRYになるのがボーナスですね。
Laravel Tips #1 もし何かの逆だったら…

下記のコードを見てください。

```php 
public function show(Product $product)
{
    if(!$product->isVisible()) {
        abort(404);
    }
}
```

`もし（商品が表示状態）の逆だったら、404になれ`と読みますね。
これは複雑じゃないけど、インデントを外したい場合はヘルパーファンクションの `abort_if` で更に読みやすくなりますね！

```php 
public function show(Product $product)
{
    abort_if(!$product->isVisible(), 404);
}
```

まだ`もし（商品が表示状態）の逆だったら、404になれ`と読みますが、コードの1行で。
「何かの逆」でチェックするのは考えづらいので、 `abort_unless` でやってみると…  

```php 
public function show(Product $product)
{
    abort_unless($product->isVisible(), 404);
}
```

`商品が表示状態でなければ、404になれ`となりますね。

同じくBlade Templateで：

```php 
@if (!$something)　
より 
@unless ($something)
```

ちょっとだけの差なんですが、こうした方が英語の文章っぽく読みやすくて、理解しやすいと思います。
みんなさんはどうでしょうか？
Arch Linux で GRUB の待機時間を変更する

# はじめに
ブート時にOSの選択画面が表示されるが，何も選択しない場合にデフォルトのOSが選択されるまでの時間を変更する．

# 手順
## 1. 待機時間を変更
**/etc/default/grub** の中の **GRUB_TIMEOUT** の値(秒)を変更する．

## 2. GRUB の設定を更新する
[Arch Wiki](https://wiki.archlinuxjp.org/index.php/GRUB#.2Fetc.2Fgrub.d.2F40_custom_.E3.81.A8_grub-mkconfig_.E3.82.92.E4.BD.BF.E3.81.A3.E3.81.A6.E8.87.AA.E5.8B.95.E7.94.9F.E6.88.90.E3.81.99.E3.82.8B) によると，**grub-mkconfig** を実行して
 **/boot/grub/grub.cfg** を更新もしくは生成する．

```shell-session
# grub-mkconfig -o /boot/grub/grub.cfg
```
---
以上で次のブート時から **GRUB_TIMEOUT** で設定した値(秒)だけ待つようになる．
iOSで品詞分解がしたかったときの話 (NSLinguisticTagger)

iOSアプリで日本語の品詞分解をしたくて調べたのですが、結局使えなくて[Yahooが提供している日本語形態素解析API](https://developer.yahoo.co.jp/webapi/jlp/ma/v1/parse.html)を利用するに至ったときのメモです。


iOS5.0から文章を分解してくれるNSLinguisticTaggerがというクラスが用意されています。
https://developer.apple.com/documentation/foundation/nslinguistictagger

NSLinguisticTagSchemeLexicalClassがトークンを品詞に分類してくれるスキームらしいので、以下のようなサンプルコードで品詞分解を試してみたところ...

```
let tagger = NSLinguisticTagger(tagSchemes: [NSLinguisticTagSchemeTokenType, NSLinguisticTagSchemeLanguage, NSLinguisticTagSchemeScript, NSLinguisticTagSchemeLemma, NSLinguisticTagSchemeLexicalClass, NSLinguisticTagSchemeNameType, NSLinguisticTagSchemeNameTypeOrLexicalClass], options: 0)

let str = "Welcome to Wikipedia,the free encyclopedia that anyone can edit. This service is being provided in Austin."
let range = NSRange(location: 0, length: str.characters.count)
tagger.string = str
tagger.enumerateTags(in: range, scheme: NSLinguisticTagSchemeLexicalClass, options: [.omitWhitespace]) { (tag, range1, range2, stop) in
    let nsStr = str as NSString
    print("\(tag) : \(nsStr.substring(with: range1))")
}
```

```
Verb : Welcome
Preposition : to
Noun : Wikipedia
Punctuation : ,
Determiner : the
Adjective : free
Noun : encyclopedia
Preposition : that
Noun : anyone
Verb : can
Verb : edit
SentenceTerminator : .
```
ちゃんと分類してくれました。

ただし、以下のコードで利用可能なスキームを列挙してみるとわかるのですが...
残念ながらNSLinguisticTagSchemeLexicalClassは日本語に対応していないので使えません、無念。

```
NSLinguisticTagger.availableTagSchemes(forLanguage: "ja").forEach { (klass) in
    print(klass)
}
```

```
TokenType
Language
Script
// LexicalClassがない!!!
```

他にも、何種類か分解用のスキームが用意されていますが、今回は用途に合わなかったので詳しくは見てません。

### NSLinguisticTagSchemeNameType

人名、地名、団体名を判別してくれるらしい(けど期待した結果は出せず)

```
OtherWord : Welcome
OtherWord : to
OtherWord : Wikipedia
Punctuation : ,
OtherWord : the
OtherWord : free
OtherWord : encyclopedia
OtherWord : that
OtherWord : anyone
OtherWord : can
OtherWord : edit
SentenceTerminator : .
```

### NSLinguisticTagSchemeNameTypeOrLexicalClass

NameTypesとLexicalClassのあわせ技

```
Verb : Welcome
Preposition : to
Noun : Wikipedia
Punctuation : ,
Determiner : the
Adjective : free
Noun : encyclopedia
Preposition : that
Noun : anyone
Verb : can
Verb : edit
SentenceTerminator : .
```

### NSLinguisticTagSchemeTokenType

単語、空白点、空白に分けてくれる

```
Word : Welcome
Word : to
Word : Wikipedia
Punctuation : ,
Word : the
Word : free
Word : encyclopedia
Word : that
Word : anyone
Word : can
Word : edit
Punctuation : .
```

### NSLinguisticTagSchemeLanguage

BCP-47に従った言語コードを判別してくれる

```
en : Welcome
en : to
en : Wikipedia
 : ,
en : the
en : free
en : encyclopedia
en : that
en : anyone
en : can
en : edit
 : .
```

### NSLinguisticTagSchemeScript

ISO 1592に従ったコードを判別してくれる

```
Latn : Welcome
Latn : to
Latn : Wikipedia
 : ,
Latn : the
Latn : free
Latn : encyclopedia
Latn : that
Latn : anyone
Latn : can
Latn : edit
 : .
```

### NSLinguisticTagSchemeLemma
lemma、よくわからず。

```
welcome : Welcome
to : to
Wikipedia : Wikipedia
 : ,
the : the
free : free
 : encyclopedia
that : that
anyone : anyone
can : can
edit : edit
 : .
```
Javaのソースで見つけた CHECKSTYLE:OFF って何？から知るCheckstyle

ハイパー初心者でないとあまり疑問に思わないことです・・・Checkstyle知るキッカケとなったので。

### はじまりは、`CHECKSTYLE:OFF`でした。
Javaのソースを見ていたらこんなのを見つけました。

```java
//CHECKSTYLE:OFF
Javaのコード
//CHECKSTYLE:ON
```

なに？これ？がはじまりでした。

### `CHECKSTYLE:OFF`はCheckstyleをOFFするものです。
「Java CHECKSTYLE:OFF」でぐぐってみると1件目からいい感じでした。

- [敢えて規約を破るケース（Checkstyleの警告抑制） - 都元ダイスケ IT-PRESS](http://d.hatena.ne.jp/daisuke-m/20090914/1252946741)

ページに記載されているような記載が自分のプロジェクトにある checkstye.xml にもあった！

```xml
<module name="Checker">
  <property name="severity" value="warning"/>
  <module name="TreeWalker">
    <module name="FileContentsHolder"/>
    <module name="JavadocMethod">
 <省略>
  <module name="SuppressionCommentFilter"/>
  <module name="SuppressWithNearbyCommentFilter">
    <property name="commentFormat" value="CHECKSTYLE IGNORE THIS LINE"/>
  </module>
</module>
```

ということで「CHECKSTYLE:OFF」は・・・

> コード内にコメントを書くことによってCheckstyleの警告を抑制できます。
> <省略>
> `System.out.println(123); // CHECKSTYLE IGNORE THIS LINE`
> さらに、数行の範囲にわたって抑制したい場合は、以下のように書くこともできます。
> `// CHECKSTYLE:OFF`
> `System.out.println(123);`
> `System.out.println(456);`
> `System.out.println(789);`
> `// CHECKSTYLE:ON`
> [敢えて規約を破るケース（Checkstyleの警告抑制） - 都元ダイスケ IT-PRESS](http://d.hatena.ne.jp/daisuke-m/20090914/1252946741)

### Checkstyleはコーディング規約をチェックするための静的解析ツールです。
![Screen Shot 2017-08-09 at 0.28.20.png](https://qiita-image-store.s3.amazonaws.com/0/159761/85554b5e-221a-de39-8755-51811b8c00cf.png)
> Checkstyle is a development tool to help programmers write Java code that adheres to a coding standard. It automates the process of checking Java code to spare humans of this boring (but important) task. This makes it ideal for projects that want to enforce a coding standard.
> [checkstyle &#x2013; Checkstyle 8.1](http://checkstyle.sourceforge.net/)

![Screen Shot 2017-08-09 at 0.13.21.png](https://qiita-image-store.s3.amazonaws.com/0/159761/fe99155b-c03a-548c-01ec-763df78bb723.png)

>プログラムの作成途中（Just In Time）でチェックが可能です。Eclipse上で実行する場合にはファイルの編集や追加のたびに、チェックが実行されます。これによりコードを書いた直後に誤りを修正できます。
> [Eclipseで使えるテストツールカタログ（2）：Eclipseで使える静的解析ツール - ＠IT](http://www.atmarkit.co.jp/ait/articles/0604/15/news015_2.html)

世の中にはコーディング規約がたくさんありますが、チェックに使うコーディング規約は自作もできるそうです。
![Screen Shot 2017-08-09 at 0.20.14.png](https://qiita-image-store.s3.amazonaws.com/0/159761/747f04c7-0025-44ec-3116-e5515e8e765e.png)
RancherでLDAPとRocket.Chatを構築する (5)Rocket.Chatを構築する

## はじめに
[前回](http://qiita.com/gldn/items/19116548743a85c85ddf)の続きです。

RancherでRocket.Chatを構築します。

## 構築方法の選択

Rancherでは、カタログを使用できます。
テンプレートとして公開されているdocker-compose.ymlを使用して、コンテナを作成できます。

今回は、カタログからRocket.Chatコンテナを作成します。

# カタログ画面を開く

![カタログ.PNG](https://qiita-image-store.s3.amazonaws.com/0/194385/d9db1dc1-13cf-9093-bee2-15b15807ea86.png)

検索ボックスに「RocketChat」を入力する

RocketChatの「View Details」を押す

最下部の「Launch」を押す

少し待ちます...

...できた！

![rancherCreate.PNG](https://qiita-image-store.s3.amazonaws.com/0/194385/eb39e817-7b49-13a7-428a-ed13fca904be.png)

**Rancherはすばらしい。**

## Rocket.CHatにアクセスしてみる
ブラウザで以下にアクセスします。
http://(ホストOSのIPアドレス):3000

![chat_init2.PNG](https://qiita-image-store.s3.amazonaws.com/0/194385/fc4167b7-8616-23bd-9138-f7b4a847b090.png)


「新しいアカウントを登録」→管理者アカウントの情報を入力します。
私は、下記を入力しました。

* 名前：admin
* メール: admin@service.local
* パスワード: adminPassword

## LDAP連携設定
ログイン後、左上のユーザアイコンをクリック→管理
検索窓に「LDAP」を入力 → LDAPの設定画面を開きます。
下記項目を編集します。

### デフォルトから変更する項目

* 有効にする:はい  
* ホスト;ldap 
* ドメインベース: dc=ldap,dc=service,dc=local  
* ドメイン検索ユーザ: cn=admin,dc=ldap,dc=service,dc=local  
* ドメイン検索のパスワード: secret_password  
* ドメイン検索ユーザー ID: uid  
* ドメイン検索の objectclass: inetOrgPerson  
* ドメイン検索の objectCategory: (空欄にする)
* ユーザー名フィールド: uid  
* データを同期する: はい  
* Import LDAP users: はい

右上「変更を保存」→「接続をテスト」

**ldapに接続できないエラーが発生します**

これは、「ldap」(OpenLDAPコンテナのホスト名)へのlink設定なしでRocket.Chatを起動したため、
Rocket.Chatからホスト名「ldap」が見つからない状態になっています。
これはまずい。


## コンテナ間のリンクを設定する
問題を修正するための方法を考えます。
(1) カタログのdocker-compose.ymlにlink設定を追記する
(2) 後付けでlinkを設定する

普段なら(1)を選びますが、今回は(2)を実施してみます。

### Rancherからlinkを設定する
Rancher Cliを使って設定できると思いますが、
コマンドを調べるのがしんどいのでGUIでお手軽に設定します。

ブラウザでRancher画面を開き、
「Stacks」→「rocket-chat」→　「rocketchat」→右上を選択
![ldap_touroku.PNG](https://qiita-image-store.s3.amazonaws.com/0/194385/11441703-837d-3456-f305-75aa3bf51ecf.png)


「Edit」→「(+)Service Links」→ 「ldap」を選択 → 「Save」


![ldap_touroku2.PNG](https://qiita-image-store.s3.amazonaws.com/0/194385/0ac086ab-5609-99f8-aae9-4249e835bce8.png)

### 再テスト
Rocket.ChatのLDAP設定画面に戻り、再度「接続をテスト」すると、成功しました。

## LDAPユーザでログインする
別なブラウザを使用して、
前回作成したtestユーザでログインします。

![test_login.PNG](https://qiita-image-store.s3.amazonaws.com/0/194385/53418771-cfbb-421c-5ac8-23cb402f6d36.png)

LDAPに登録したユーザでログインできました。


あとは、同じように多種多様なWebアプリを立ち上げるだけですね！

## 目次: RancherでLDAPとRocket.Chatを構築する 

[(1)仮想マシン構築](http://qiita.com/gldn/items/565adc5158a3c1d57ef3)
[(2)Dockerインストール](http://qiita.com/gldn/items/813e56722c6de3119e7f)
[(3)Rancherを構築する](http://qiita.com/gldn/items/f5168cf0e09fa8562e31)
[(4)OpenLDAPサーバを構築する]
(http://qiita.com/gldn/items/19116548743a85c85ddf)
[(5)Rocket.Chatを構築する](http://qiita.com/gldn/items/c611e2eb49c481f58a40)
Rails5とVue.jsでおうちNetflix

RailsとVue.jsで、Netflixっぽく家のビデオライブラリをブラウザから見れるアプリ [Frickake](https://github.com/juntaki/flickake)を作りました。

https://github.com/juntaki/flickake
![demo.gif](https://qiita-image-store.s3.amazonaws.com/0/69350/3299ee7d-f700-8fca-d45f-473ebe3b3681.gif)

[Streama](http://dularion.github.io/streama/)より、もっとお手軽に、単にNASで管理してたようなのをブラウザで見れればいいという人向けです。

#使い方

## デプロイ

Dockerでデプロイします。設定はmp4ファイルが置いてあるディレクトリパスを指定するだけです。
ログは必要なければ設定しなくてもOKです。その他、ポート番号などはお好きに変更してください。

起動したら、http://hostname:3000/ へアクセスします。

~~~
docker pull juntaki/flickake
docker run -d --name=flickake -p 3000:3000 \
           -e SECRET_KEY_BASE=YOUR_SECRET \
           -v /path/to/movie_library:/app/files juntaki/flickake \
           -v /path/to/log:/app/log
~~~

## ライブラリのスキャン

ナビゲーションバーから"Scan"を押すか、下記のコマンドを定期実行すると良いです。

~~~
docker exec flickake rails movies:scan  
~~~

# 作ったときにはまった場所

## HTML5 videoのロード

[videoタグのはなし - クラウドワークス エンジニアブログ](http://engineer.crowdworks.jp/entry/2016/03/16/121353)
[570755 - 206 Partial content is ignored and mozilla does not seek for additional video content](https://bugzilla.mozilla.org/show_bug.cgi?id=570755)

ChromeやFirefoxはビデオのsourceに対して、長さを指定しない(range=0-)206 Partialリクエストを送ってきます。サーバ側で応答を短い長さで切ってしまうと（RFC的にはOK）、、Chromeでは問題ないのに、Firefoxは次のリクエストを出してくれなくなります。動画をシークすることを考えると、ある程度細切れにしたほうがクライアントのレスポンスは良さそうですが・・・。
と、色々実験していたら256MB程度の大きさで返すと、Firefoxも受け取ってくれるようです。謎です。

動画だけはnginxなどでホストしておくと負荷が少ないのかもしれませんが、レスポンスの中身を細かくコントロールしたかったのと、シンプルな構成を目指していたので今回はRailsで動画ファイルをメモリ上に読んでレスポンスを組み立てています。

## Fullscreen API

[javascript - How to detect when a page exits fullscreen? - Stack Overflow](https://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen)

これはブラウザごとにprefixが必要なAPIなので、シンプルに書けない部分です。一般的には状態変更をfullscreenchange相当のEventで取得し、その時のfullscreenElementの有無で現在の状態を取得する、という方法が良さそうです。（それ以外の方法ではfullscreenをESCキーで抜ける遷移にhookできない）
Flickakeではコントローラを表示するときに毎回fullscreenElementの有無を調べてます。

## Vue.js + Rails

[RailsのTurbolinksとVue.jsを共存させる方法 - Qiita](http://qiita.com/jidosyabu/items/66e87f9199ca4b79840a)

RailsのTurbolinksもDOMを書き換えるため、相性が良くないようです。戻るボタンを押すとレイアウトが崩れる現象が起きてハマりました。大したページもないのでTurbolinksをOFFにしてしまっています。

## Globalなキーイベントをとる

[How to add @keyup globally with VUE?](https://laracasts.com/discuss/channels/vue/how-to-add-atkeyup-globally-with-vue)
[イベントハンドリング - Vue.js](https://jp.vuejs.org/v2/guide/events.html#イベント修飾子)

ふつうにjavascriptでwindows.addEventListenerするのが良いようです。
クリックと同じようにキー入力が取れる感じでVueのガイドに書いてありますが、キーイベントはinput要素などフォーカスが当たる要素にしか発生しないようです。
git resetで直前のコミット／ステージを取り消す

git resetの影響範囲を忘れがちなので、ざっくりとまとめました。

## 直前のコミットを取り消す

```bash
$ git reset --soft HEAD^
```

直前のコミットのみ取り消す。ステージとワーキングツリーはそのまま。

## 直前のステージを取り消す

```bash
$ git reset HEAD
```

ステージを取り消す。ワーキングツリーはそのまま。

## ワーキングツリーを取り消す

```bash
$ git reset --hard HEAD
```

ステージとワーキングツリーを取り消す。
ファイルの変更自体がなかったことになるので要注意。

以上になります。
コマンドプロンプトの起動に関するTIPS

今までコマンドプロンプトを起動するには`Win + r`で「ファイル名を指定して実行」を開いて`cmd`と入力していた。  

目的のディレクトリまで`cd`するのにエクスプローラのアドレスバーからコピペしたり……
とても怠い。

# エクスプローラからコマンドプロンプトを開く
エクスプローラのアドレスバーに`cmd`と入力することで表示中のディレクトリをカレントディレクトリとしてコマンドプロンプトを起動できる。
アドレスバーへは`Alt + d`でフォーカスできるので、
`Alt + d` → `cmd` → `Enter`
とすればよい。かなりスムーズ。

# コマンドプロンプトからエクスプローラを開く
逆にコマンドプロンプトのカレントディレクトリをエクスプローラで開くには`explorer .`または`start .`と入力すればよい。
こちらも結構使える。
【JavaScript】文字列を反転する方法いろいろ

## **この記事で共通して使う変数**

```JavaScript
const word = 'プログラミングJavaScript';
```
この記事では上記の文字列を以下のように反転させたいと思います。
```プログラミングJavaScript -> tpircSavaJグンミラグロプ```

## **forループとpushとpop で頑張ってみる**
```javaScript
const converted = [];    // 文字を格納する配列を用意する。
for (let i = 0, len = word.length; i < len; i++) {
  const char = word.charAt(i);    // インデックスの位置の一文字を取得する。
  converted.push(char);           //  要素を追加する。
}

let reversed = '';    // 反転された文字を入れる変数を用意する。
for (let i = 0, len = converted.length; i < len; i++) {
  const popped = converted.pop();    // 配列の末尾から1つ取り出す。
  reversed += popped;                // 文字を繋げる。
}
console.log(reversed);    // tpircSavaJグンミラグロプ
```
原始的でコーディングミスも起こしやすそう。（ループの終了条件など）
処理を追わなければ何をしているかわからないし、状態が複雑であまり美しくないです。

## **for...ofとunshiftで頑張ってみる**

```JavaScript
const converted = [];
for (let char of word) {    // 一文字ずつ処理する
  converted.unshift(char);    // 配列の先頭に追加する。
}
let reveresed = '';
for (let char of converted) {
  reveresed += char;
}
console.log(reveresed);    // tpircSavaJグンミラグロプ
```

ループ部分が先ほどよりスッキリしました。
Stringはイテラブルなのでfor...ofで扱うことができます。
けれどまだイケてるとはいいがたいです。

## **StringのメソッドとArrayのアクセサメソッドを使う**

```JavaScript
const reversed = word.split('')    // 空文字で分割して配列に
                     .reverse()    // 配列を反転して
                     .join('');    // 空文字で連結する
console.log(reversed);    // tpircSavaJグンミラグロプ
```

メソッドチェーンで繋げていますが以下と同じです。

```JavaScript
const converted = word.split('');
const reversedArray = converted.reveresd();
const reveresdString = reversedArray.join('');
```

forループを使わないコードなら簡潔に書けるし間違いが入り込む要素がぐっと減ります。
見ただけで何をしているかわかります。

## **スプレッド演算子とArrayの反復メソッドとアロー関数を使う**

```JavaScript
const reversed = [...word].reduceRight((p, c) => p + c);　// 配列に変換し右から左へたたみ込む。
console.log(reversed);    // tpircSavaJグンミラグロプ
```

ES6で記述したのでレガシーブラウザで動かす場合Babelなどでトランスパイルが必要かもしれません。
文字列はイテラブルなのでスプレッド演算子で展開でき、さらに配列に格納することで、文字列を配列にできます。
reduceRightでたたみ込み演算をし匿名関数はアロー関数でシンプルに記述します。

新しいシンタックスについては以下が参考になりました。

- [スプレッド演算子 - MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator)
- [JavaScript アロー関数を説明するよ](http://qiita.com/may88seiji/items/4a49c7c78b55d75d693b)
- [JavaScriptでforEach, filter, map, reduceとか](http://qiita.com/itagakishintaro/items/29e301f3125760b81302)

ありがとうございました！
ルーターの向こう側のLinuxマシンにssh接続してメンテナンスする

#課題：実家に設置したRaspberyPiをリモートでメンテナンスする
実家に置いたLinuxサーバーを管理したいけど、固定IPじゃないしルーターの向こう側なので、外からアクセスするのはVPNでも使わないと無理。そこで、実家のLinuxサーバーから固定IPのレンタルサーバーにssh接続して reverse port forwarding でトンネルを掘ることにしました。

##概略
実家に置いたRaspberyPi（リモート側）から借りているレンタルサーバー（ローカル側）にssh接続して、reverse port forwardingを行い、レンタルサーバーから実家のRaspberyPiに接続できるようにする。
レンタルサーバーのアドレスは仮にlocal.server.com、reverse port forwarding に使うポートは仮に 99922 とする。

###ローカル側の設定
インターネットの切断などでsshが途切れてしまうとポートが占有されたままになってしまう事があり、そういう場合には残ったプロセスを殺す必要がある。そこでリバースポートフォワーディングを受け入れるローカル側に以下のようなスクリプトを仕込む。

```killZombieConnection.sh
#!/bin/bash
# reverse port forwarding に使いたいポートが使われていたらそのプロセスを殺してOKを返すプログラム
# インターネット回線が途中で途切れたりするとプロセスが残っていたりするのでこの工程は必須
pid=`sudo lsof -i:99922 | grep 99922 | sed "s/  */\t/g" | cut -f 2`
if [ "$pid" = "" ]
then
    echo OK
else
    kill $pid
    if [ $? -eq 0 ]
    then
        echo OK
    fi
fi
```

リモート側からこのプロセスをキックするために RAPPORT_KEY と紐づけられているauthorized_keys の中身に以下を追記する。

```txt:authorized_keys
command="/home/user/program/killZombieConnection.sh" ssh-rsa AAAAB3............. user@remote.com
```

###リモート側の設定
実家側のRaspberyPiには起動したらcrontabを使ってreverse_ssh_forwarding.sh を実行させる。
そうするとインターネット接続ができるようになるのを待ってから私が管理するサーバーへreverse port forwardingを行う。

実家に設置したRaspberyPiはLEDとスピーカーが付いているので、インターネット接続が確立出来たらLEDを点灯させ、ポートフォワーディングが張れたらLEDを消灯することにする。また、IPアドレスを実家のJSAYにしゃべらせる。

``` reverse_ssh_forwarding.sh
#!/bin/bash
LOG="/home/pi/log/sshlog.txt"
SSH_KEY="/path/to/ssh/key" # reverse port forwarding 用の秘密鍵
RAPPORT_KEY="/path/to/ssh/rapport/key" # 接続したら同じポートを使っているプロセスを殺してOKを返してすぐに接続を切るスクリプトと紐付けた秘密鍵
SERVER="local.server.com" # 母艦となるサーバーのアドレス
USER="user" # ユーザー名
PORT="99922:127.0.0.1:22" # 99922 は任意のポート番号
LED=16 # LED につながっているGPIOのピン番号
JSAY="/home/pi/programs/talking/jsay.sh" # jsay へのパス
gpio -g mode $LED out

rm -f $LOG

# 試しに母艦にssh接続してみる。つながるようになったら reverse port forwarding を張るステップに進む
rapport=0
while [ "$rapport" != "1" ]
do
    sleep 2
#    echo "checking"
    gpio -g write $LED 0
    rapport=`ssh -i $RAPPORT_KEY -l $USER $SERVER 2>&1 | grep -c OK`
    gpio -g write $LED 1
done

ADDRESS=""
times=0
while [ "$ADDRESS" = "" ]
do
    echo "Checking address"
    ADDRESS=`/sbin/ifconfig | grep "inet addr" | tail -1 | sed "s/.*addr://" | sed "s/ .*//"`
    times=`expr $times + 1`
    if [ $times -gt 5 ]
    then
        break
    fi
    sleep 1
done
echo "IPアドレスは $ADDRESSです。IPアドレスは $ADDRESSです。" | $JSAY

message="Connecting"
while [ true ]
do
    sleep 5
    #echo "$message"
    echo "接続します" | $JSAY
    gpio -g write $LED 0
    # start reverse port forwarding 
    ssh -v -o ExitOnForwardFailure=yes -o ServerAliveInterval=60 -o ConnectTimeout=5 \
        -o TCPKeepAlive=no \
        -N -i $SSH_KEY -l $USER -R $PORT $SERVER >> $LOG 2>&1
    wait
    # ssh 接続が切れたら少し待ってまた接続しに行く
    gpio -g write $LED 1
    message="Re-connecting"
done
```

##追記
帰省した時に話を聞いてみると、ルーターを再起動したときにはこのスクリプトでも再接続できない場合があるようです。Reverse port forwarding をする直前にも
rapport=`ssh -i $RAPPORT_KEY -l $USER $SERVER 2>&1 | grep -c OK`
を呼び出して残ったプロセスを殺す必要があるようです。
スクリプトが完成したらまた更新します。
kintoneのsubmit系イベントではreturn falseするとキャンセルできる

## 最初に結論から
kintone JavaScript APIによるカスタマイズで、レコードの保存時に
「confirmダイアログを出して、キャンセルされたら編集画面に戻る」
という処理を実装しました。

以下のようにハンドラ内で `return false` すればOKでした。
submit系の3種類のイベント共通で使えます。

```js
(function() {
  var events = ['app.record.create.submit', 'app.record.edit.submit', 'app.record.index.edit.submit'];
  kintone.events.on(events, function(event) {
    if (!window.confirm('保存してもよろしいですか？')) {
      // falseを返すと単なるキャンセルができる
      return false;
    }
  });
})();
```
kintoneの公式ドキュメントには、↑のやり方載ってないんですよ。
これ試行錯誤してて偶然発見したんだけど、仕様だったらちゃんと載せてほしいなー。
なもんで突然挙動が変わっても許してくださいね :sweat_smile: 

## もう少し詳しく

公式ドキュメントにはこうあります。
[レコード追加イベント#フィールドの値を書き換える](https://developer.cybozu.io/hc/ja/articles/201941984#step4)
> ハンドラーが record オブジェクトのフィールドの値を書き換えて event オブジェクトを return した場合、その値でフィールドの値を更新します。

[レコード追加イベント#レコードにエラーを表示する](https://developer.cybozu.io/hc/ja/articles/201941984#step7)
> ハンドラーが event オブジェクトの error にエラーメッセージを代入して event オブジェクトを return した場合、フィールドの値の書き換えと編集可／不可の設定はキャンセルされ、画面の上部にエラーメッセージが表示されます。

なので、confirmでキャンセルしたい時も以下のように書けば動くんですが、

```js
if (!window.confirm('保存してもよろしいですか？')) {
  event.error = 'キャンセルされました。';
  return error;
}
```

キャンセルしたのは自分なのだし、赤文字でエラーが出るのもビミョーなので、
冒頭のように`return false`がスマートではないかと。

### ハンドラ内でreturnする場合の4種類の挙動

僕が確認できたSubmit時の挙動は、以下の4種類です。

* eventオブジェクトをreturn
    * errorプロパティなし（eventオブジェクト変更を反映してSubmit）
    * errorプロパティあり（エラー表示付きキャンセル）
* falseをreturn（静かにキャンセル）
* その他をreturn[^1]（eventオブジェクト変更を無視してSubmit）

[^1]: 「return文を書かない」「returnに何も渡さない」はどちらも`return undefined`と同義なので、「その他をreturn」と一緒ね。

そのうち3種類を試せるコード書いてみました。

```js
(function() {
  var events = ['app.record.create.submit', 'app.record.edit.submit', 'app.record.index.edit.submit'];
  kintone.events.on(events, function(event) {
    if (window.confirm('エラーを出してもよろしいですか？')) {
      // 公式のエラー表示＆キャンセル方法
      event.error = 'エラーを出しました！';
      return event;
    }
    if (!window.confirm('保存してもよろしいですか？')) {
      // falseを返すと単なるキャンセルができる
      return false;
    }
    // eventとfalse以外は何を返しても一緒
    return true;
  });
})();
```

### 「その他をreturn」の時に何をreturnすると読みやすい？
```js
return
return undefined
return null
return ''
return 0
return 1
return true
```
などどう書いてもkintone上の挙動は一緒なんですが、
`return false`がキャンセルなので、それと対にして
`return true`が分かりやすいじゃないかなーと個人的には思います。
まぁこの変は趣味ですね。

ではまた〜。
EthereumをAWSで掘ってみる

#結論

暗号通貨のバブルを見て昨日思いついてやってみましたが無理でございました。
同じことしないように宜しくお願い致します。

以下を参考にしましたが根拠がないです。みんなだまされるなぁ
[Ethereum Mining with Google Cloud (Nvidia Tesla K80) actually works and is highly profitable](https://steemit.com/ethereum/@grunzwanzling/ethereum-mining-with-google-cloud-nvidia-tesla-k80-actually-works-and-is-highly-profitable)


#なんでEthereum

Bitcoinの採掘はもやは専用の装置ができあがりバブルもあってかなり高額で売られています。
そして専用装置のスペックは普通のPCのCPU,GPUではとても追いつかないスペックになっています。
Ethereumはbitcoinに次ぐ取引量を持つ通貨だそう。
EthereumはGPUによる採掘が主流で、専用装置などは作りにくい構造らしいのでほんじゃEthereumでやってみるかって安易な考えです。



#口座をつくる

[coincheck](https://coincheck.com/ja/) を利用しました。
本人確認書類の提出は必要ですが、提出後12時間位で使えるようになりました。
書類提出確認後入金できるようになります。
「コインを受け取る」から「入金用アドレス」をつくります。

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/198768/42b2146a-e250-aa11-5967-4bda2155f101.png)

番号みえてますが入金しかできないはずなので大丈夫じゃないかしら。

#採掘するソフトをダウンロードする
Claymore's Dual Ethereum AMD+NVIDIA GPU Miner v9.8 (Windows/Linux)
を使用しました。
[bitcoin forum](https://bitcointalk.org/index.php?topic=1433925.0)

![dd.png](https://qiita-image-store.s3.amazonaws.com/0/198768/3399ec06-7149-ae02-00d6-4d1cbaba17c4.png)
zip圧縮してダウンロードするとChromeにはじかれたりしないで済みました。

#Claymoreを手元で実行してみる。

以下をテキストファイルで書いてClaymoreと同じディレクトリに保存しファイル名を[eth.bat]とかにします。

```
setx GPU_FORCE_64BIT_PTR 0
setx GPU_MAX_HEAP_SIZE 100
setx GPU_USE_SYNC_OBJECTS 1
setx GPU_MAX_ALLOC_PERCENT 100
setx GPU_SINGLE_ALLOC_PERCENT 100
EthDcrMiner64.exe -epool eu1.ethermine.org:4444 -ewal 0x63c47e9c73f91ba4691ff2c85f17892257e9b3e4 -epsw x
```

入金用アドレスは自分のに書き換えてください。
あとは[eth.bat]をダブルクリックすれば採掘開始。簡単でござる。

#AWSに移動
p2.xlarge　windows serverで試しました。
spot instanceで 0.3usd/h　位のお値段。
70万円ぐらいするNVIDIA K80 GPUが１個ついてます。
ちなみにp2.16xlargeにすると16個ついてます。マンション買えるね。
dllがないとかなんとか怒られたので[DUDA 8.0](https://developer.nvidia.com/cuda-downloads)をインストールしたら動きました。
手元で実行したときと同じように検証。

12Mh/s ぐらいしかでねえ。
Mh/sとは採掘速度でGPUやCPUのGHzとは異なります。

電気代をspotinstance代とおなじになるように[CryptoCompare](https://www.cryptocompare.com/mining/calculator/eth?HashingPower=12&HashingUnit=MH%2Fs&PowerConsumption=1000&CostPerkWh=0.3)で損益計算したら毎日-6USDです。

#考えがシンプルすぎた
まずNVIDIAよりRADEONのほうがEthereumの採掘に向いているそうです。
GPU70万円分の採掘速度はでてません。今だともはやグラボも高騰していますが3万円のRADEONの方が採掘速度はやかったりするみたいです。
バブルに乗り遅れたなあ。

ちなみにリグ（採掘場）をもう自分で持ってて儲かってる人で電気代が鬼みたいになってる人はレオパレスの電気代込みのやつとか貸しオフィスの電気代込みのやつとか借りたらどうなんだろうと思いました。自己責任でオナシャス！
vendor/assetsに配置したファイルの読み込み方(assetpipeline)

超初心者向けの記事です。
vendor/assets/javascript/jquery.mobilemenu.js
というファイルを読み込みたい場合、application.jsに
//= require "jquery.mobilemenu"
//= require_tree .
などと記述。
cssの場合は、
vendor/assets/stylesheets/style.css
というファイルを読み込みたい場合、application.cssに
 */
@import "layout"
などと記述。
コトハジメ

## 内容
基本的にはお勉強したことをブログ的に書く。
クソド素人なので基礎 of 基礎 of 基礎。

## 目的
後から見返す機会は少ないかもだけど、鳥頭なので目に見えるものとして残しておきたい。
フロントエンドをメインに触っていきたい（かも

## 場所
Qiitaを選んだ理由は、気軽そうなのと業務の調べ物で良く見かけるから。
特に気軽さがないと1000%続かない。気軽さがあっても続かない。

## ついでに
どんなものを作りたいかもなんとなく考えていきたい。

## あとがき
この記事につけたいタグがない。
ちょっとずつ読むドメイン駆動設計 第一部 ドメインモデルを機能させる 第一章 知識をかみ砕く5

# ドメインエキスパートもコードが読める
貨物予約アプリケーションの例より

> プログラマは、ビジネスエキスパートに技術的な成果物を見せることができる。コードさえも見せられるのだ。(第一部 第一章)

先日、DevOpsDaysTokyoというイベントに参加した際、どのセッションだったかは忘れてしまったが、あるフレーズがとても頭に残っています。

> 経営層がソースを見る時代が来る


ドメイン駆動設計を突き詰めれば、ソースコードはドメインを要約したものになっているはずで、宣言的で明示的なソースコードは極端ではなく、経営層・ドメインエキスパートさえ理解できるはずだと思っています。

仕様書ではなく、ソースコードからビジネスルールが正しいかどうか検証できるようになります。

経営層がソースコードを見る時代にドメイン駆動設計を突き詰める。
新人あるある(Dosバッチのお作法編)

これは私が新人SEとして現場配属されてまだ2か月しかたっていませんが
直面した出来事をつらつらと書いて後世の新人に語り継いでいこうと思い書いています
今後もちょいちょい増やして後世の開発のヒントになれば幸いです
先輩方はこんなことあったなｗって感じで見ていただけると嬉しいです

さて題目にもあるように今回のテーマはDosバッチです
ITの技術職に就く前に趣味とかで触られた方はお作法がわかっているとは思います
じゃあ誰向けに書いたかって?
ここで私の経歴を
大学までずっと文系、しかも数学が大の苦手で就活も金融系を目指していたほど
ひょんなことからITに携わることになり研修を受け現場でヒーヒー言いながら
ググって仕事してます

Javaを研修で学んだ以外はプログラミングなんてしたことありません
しかし同期には私みたいな人ばかりだったので今後もそういう人増えていくんじゃないかなって勝手に思ったってわけ
だからこれ書いてるんです
つまり、お作法を知らない人にこれを見ればお作法が何なのかわかっちゃって上司にドヤ顔できて定時で帰れるよっていう目的

前置き長くなっちゃいましたね、ごめんなさい
後世の新人がはよ帰らせろっていう声が聞こえた気がしました

ではまずDosバッチとは何ぞやってところから

ざっくり言えば「書いたコマンドを実行してくれるファイル」です
いちいちCMDに命令打つのめんどくさいでしょ
それをファイルをクリックするなり設定した時間になったら実行してねっていうこともできちゃうわけ

こんな感じですDosバッチってのは

先輩方がいろいろDosバッチに関する記事を書かれているので技術的なことはそちらを参照に…

ここではあくまでお作法をば
先輩方が当たり前にやっていることを丁寧に説明していこうかなと思います

ではまずはechoから行きましょうか
echoっていうのはログファイルとかに出力したい際に出力してくれるやつ
JavaでいうSystem.out.println("hoge");だね

こいつのどこに気をつけなきゃいけないんじゃって思う方は読み飛ばして結構
私が躓いたことの一つでもあるので誰かしらは躓くと思って書いてるんです

こいつは出力したい行一つ一つに書いてあげないと出力してくれないよ
\nができない不器用な子です

例えば命令の最初に
echo ipconfig /all
てかくとこの命令自体がログに出力できるって話

でもこれが
echo ipconfig /all
     ping www.google.co.jp/
てかくとpingの部分が出力されないわけ

じゃあなんでこんなこと、いつ使うのっていう話になるけど
これ使うよ

なぜなら

"一つのバッチファイルで実行する命令は必ずしも一つだけとは限らないから"

ここで察したあなたはこれからも頑張れるけどまあ無理
私も無理だったから大丈夫

システムとかプログラムってのは証跡を残すことが一種の習慣というかそんな感じでずっとつきまとってきます
というのも何かしらのエラーが出た際にログファイルみたいな証跡があるとどこが問題かがすぐわかって修正がスムースに行くから

複数処理を書いた場合
"どのプログラムでエラーはいたかがわかる"っていうお話

私の上司は"処理の前後にそれぞれの処理の開始と終了を明示する文をつけてどの処理を行ってるか明示的にしなさい"と教えてくれました

現場ではこういったことも教えられるんですよ
保守する側はこれがあったほうが楽ちんですからね


ここまでで言いたいことが伝わっているといいけどとりあえずまとめておきます

echoのお作法

・出力したい各行につける必要がある
・処理の開始と終了が明示的になりどこでエラーはいたかが判明できる

この2点が理解できたらDosバッチ使いこなす第一歩に立ったといってもいいでしょう
でもまだまだいろいろありますよDosバッチ
私もまだ躓いてない部分もありますしネタもまだ尽きてないし(ここで尽かしたら読んでもらえないので小出しに…)

いろいろここで書くと長くなるし新人寝ちゃうからこんなところで
次回はechoやったし出力に関するお作法でもやろうかな
【Java】StringBufferとStringBuilderの違い

# 教科書的な解説
## StringBuffer
可変の文字列を扱う。
Stringクラスは、文字列を変更するたびに新しいオブジェクトを生成するが、StringBufferは、生成されたオブジェクトに文字列を追加していく。
つまり、生成されるオブジェクトは１つだけになる。

## StringBuilder
可変の文字列を扱う。
JDK1.5でリリースされたクラスで、StringBufferと同じメソッドを持っているし、使い方もStringBufferと同じ。
StringBufferとの違いは「スレッドセーフではない（同期化しない）」こと。
**同期化しないので、処理が早い**。

# どっちを使えばいい？
## 新人研修の場合
研修の課題で処理速度が求められることはまずないので、どっちを使ってもいいと思う。
意味が分からなくてもいいから、違いを聞かれた時にパッと答えられれば（新人:beginner:なので）それでいい・・・と私は思ってる。
どちらかというと、StringBuffer/StringBuilderが使えるようになってほしい:star:

## 業務での場合
既存プログラムの改修であれば、すでに多用されている方を使った方がいい。
お作法的にNGだったとしても、その後のメンテナンス性を考慮すると、あえて既存を踏襲した方が良いことの方が多いので。
１から新規で作るなら、（個人的には）速度性を重視してStringBuilderを使う。
【Wordpress】javascriptでテーマディレクトリの絶対パスを取得する方法

昔困ったことがあったので同じように困っている人がいれば...

#どういう時に必要になるか
例えば、Google Maps APIを使う時にピンをオリジナルの画像にしたい場合に、画像ファイルのパスを絶対パスで取得したい...!!
`/wp-content/themes/`とか書いてもいいんだけどメンテナンスを考えると宜しくない

#じゃあこうしよう
HTML5のカスタムデータ属性を使います
テーマディレクトリのパスを`get_template_directory_uri()`で取得します

```html:header.php
<body id="l-body" data-tmpdir="<?php echo esc_url(get_template_directory_uri()); ?>/">
```
こうすればjsから参照できます

```javascript:script.js
// map icon
var mapicon = $('#l-body').attr('data-tmpdir') + 'assets/images/mappin.png';
```
AV1 specification を読む (出力処理・参照フレーム更新処理)

#AV1 specification 日本語訳

デコードしたフレームを、どのように出力し、どのように参照フレームとしてほぞんするかです。
非常にシンプルにできているようです。

----

##出力処理

この処理は、フレームを選択的に表示するために呼ばれます。

show_existing_frame==1 ならば、デコーダは以下のように過去のデコードされたフレームを出力します。

 * w    = RefFrameWidth[frame_to_show_map_idx]
 * h    = RefFrameHeight[frame_to_show_map_idx]
 * subX = RefSubsamplingX[frame_to_show_map_idx]
 * subY = RefSubsamplingY[frame_to_show_map_idx]
 * Yプレーンは w x h 画素で、座標 x,y の画素は FrameStore[frame_to_show_map_idx][0][x][y] です (x=0..w-1, y=0..h-1)
 * Uプレーンは (w+subX)>>subX x (h+subY)>>subY 画素で、座標 x,y の画素は FrameStore[frame_to_show_map_idx][1][x][y] です (x=0..w-1, y=0..h-1)
 * Vプレーンは (w+subX)>>subX x (h+subY)>>subY 画素で、座標 x,y の画素は FrameStore[frame_to_show_map_idx][2][x][y] です (x=0..w-1, y=0..h-1)
 * 各画素のビット深度は RefBitDepth[frame_to_show_map_idx]

そうではなく、show_frame_==1 ならば、デコードは以下のようにカレントフレームを出力します。

 * w = FrameWidth
 * h = FrameHeight
 * subX = subsampling_x
 * subY = subsampling_y
 * Yプレーンは w x h 画素で、座標 x,y の画素は CurrFrame[frame_to_show_map_idx][0][x][y] です (x=0..w-1, y=0..h-1)
 * Uプレーンは (w+subX)>>subX x (h+subY)>>subY 画素で、座標 x,y の画素は CurrFrame[frame_to_show_map_idx][1][x][y] です (x=0..w-1, y=0..h-1)
 * Vプレーンは (w+subX)>>subX x (h+subY)>>subY 画素で、座標 x,y の画素は CurrFrame[frame_to_show_map_idx][2][x][y] です (x=0..w-1, y=0..h-1)
 * 各画素のビット深度は BitDepth


##参照フレーム更新処理

この処理は、フレームをデコードする際の最終ステップとして呼び出されます。

この処理の入力は、カレントフレーム CurrFrame[plane][x][y] の画素です。

この処理の出力は、更新された参照フレームと動きベクトルのセットです。

以下の手順を適用します。

 1. i=0..NUM_REF_FRAMES-1 について、refresh_frame_flagsのビットiが1である場合に、下記の手順を適用します（つまり、(refresh_frame_flags>>i)&1==1）
  * RefFrameWidth[i]   = FrameWidth
  * RefFrameHeight[i]  = FrameHeight
  * RefSubsamplingX[i] = subsampling_x
  * RefSubsamplingY[i] = subsampling_y
  * RefBitDepth[i]     = BitDepth
  * FrameStore[i][0][y][x]     = CurrFrame[0][y][x], x=0..FrameWidth-1, y=0..FrameHeigtht-1
  * FrameStore[i][plane][y][x] = CurrFrame[plane][y][x], plane=1..2, x=0..((FrameWidth+subsampling_x)>>subsampling_x)-1, y=0..((FrameHeight+subsampling_y)>>subsampling_y)-1
 2. show_existing_frame==0 ならば、以下を適用します。
  * PrevRefFraes[row][col][list] = RefFrames[row][col][list], row=0..MiRows-1, col=0..MiCols-1, list=0..1
  * PrevMvs[row][col][list][comp] = Mvs[row][col][list][comp], row=0..MiRows-1, col=0..MiCols-1, list=0..1, comp=0..1