OmniAICreator/Qiita-1.07M huggingface dataset:
ESXiインストーラーがBluemix IaaSのKVMコンソールの解像度に非対応なのを解決する

#はじめに
こんにちは。
みなさんBluemix Infrastructureを使う際にIPMIを利用したことはありますか？

とても便利なツールなのですが、最近どうやらそのKVMコンソールの解像度が変更になったらしく、
ESXiなど一部のインストーラーが対応していないものになりました。（画像参照）

![真っ暗画面.png](https://qiita-image-store.s3.amazonaws.com/0/141025/bb75b15e-cdc9-b5c3-b3d4-b1d90d47d7aa.png)

そこで今回はBluemix Infrastructureのサポート部門にチケットを起票し、
この問題を解決する方法について書こうと思います！

##トラブル時の環境
この問題が起こった際の環境について記述しておこうと思います

- EsxiはVersion6.5
- 2.4GHz Intel Xeon-Haswell (E5-2620-V3-HexCore)

##エラーが起こるに至る状態
- インストールの途中でエラーが起こる
    - SoftLeyerのベアメタルサーバー(BMS)をISOをブートする過程で、ISOをPluginし、PowerResetしても、Rebootした形跡が見えず真っ暗な画面のまま動きがない。

##問題に対する仮定
- 仮定： **Bluemix IaaSのKVMコンソールの解像度がEsxiのインストーラーが必要としているものと合致していないのではないか？**
    - この仮定に基づけばBIOSでUEFIモードをlegacy onlyモードに変更する必要がある。

#結論：Bluemix Infrastructureサポートにチケットを起票する
##1.まず「サポート」タブから「チケットの追加」を選択します
![チケットの追加.png](https://qiita-image-store.s3.amazonaws.com/0/141025/c9cf6570-5cf0-4686-5b4c-1ff9d2a59f3a.png)
##2.チケットのフォーマットを埋める
チケットは要望書のようなものですね。
トラブルや調整・質問などサポートを必要とするときに起票します。
Bluemix Infrastructureの場合英語で起票しなければいけなくなるので、
しんどい人はまずQiitaなどで同じ問題を抱えた同士を探しましょう。割といます。
![チケットの追加（前編）.png](https://qiita-image-store.s3.amazonaws.com/0/141025/95f48743-53b7-c229-fde1-49395de9a213.png)
![チケットの追加（後編）.png](https://qiita-image-store.s3.amazonaws.com/0/141025/b5290028-7981-625d-2679-9d50a3ba57ef.png)

以下至極簡単に書きます
Hello.
I want you to change the IPMI's UEFI mode into legacy only mode.
I wanted to install ESXi, but it didn't work well.
I think there might be a screen resolution problem.
I want to fix it.
I agree to enforcement if you need to reboot the server
Thank you.

返事が返ってきて、再び作業をしてみて、解決したことが判明したら「ありがとうございました」とお礼を書きましょう。解決していなかったら、その旨元のチケットに連ねる形で追加して訴えましょう！

#（追記）Bluemix IPMIへのアクセス方法
以下のリンクをご参照ください
[SoftLayerの歩き方 IPMIへのアクセス方法](https://www.ibm.com/developerworks/community/blogs/560da618-352c-4903-9e75-2dadfda71076/entry/softlayer%25e3%2581%25ae%25e6%25ad%25a9%25e3%2581%258d%25e6%2596%25b9_ipmi%25e3%2581%25b8%25e3%2581%25ae%25e3%2582%25a2%25e3%2582%25af%25e3%2582%25bb%25e3%2582%25b9%25e6%2596%25b9%25e6%25b3%2595?lang=en)
＊SoftLayerはBluemix Infrastructureの旧称です。
Visual Studio 2017でXamarinを初めて触ってハマった点

緊急にiOSとAndroid両方で動くアプリを書く必要が出てきてしまい，そういえばVS2017からXamarinがデフォルトになったなということで使ってみたところ案外あっさりできて喜んでいたのですが，その中でもちょっとはまったポイントのメモ．

# iOSのアイコン
Project.iOs/Resources以下に入っているデフォルトアイコンが壊れていて，これを消さないとiOS向けのビルドができません．こっちは直してほしいですね．

# フルパスの文字数
AndroidとUWPにて，ビルド中の中間ファイルやアセットのフルパスが240文字に制限されてました．「ビルド中の中間ファイルのフルパス」というのが難儀で，プロジェクト自体を深い階層に置いたりプロジェクト名を長くするとこの制限に引っかかります．
AWS WorkSpacesで日本語IMEを利用する場合の注意

# はじめに
現在（2017/04/07）、WorkSpacesで日本語を利用する場合、一部問題が発生します。
問題と対策を記載します。

## 問題点
Tokyoリージョンで日本語のWorkSpaceを起動し利用する分には問題は発生しません。
ただし、WorkSpaceからイメージを作成し、そのイメージをバンドルに登録しWorkSpaceを作成した場合に問題が発生します。

起動時にはキーボードが英語となり、日本語IMEにはならず設定が必要となります。
察するにイメージ作成時のSysprepの仕様に問題があるように思われます。

## 対策方法
Sysprepの応答ファイルの設定を行います。
エクスプローラーからc:\と入力しCドライブを開きます。

以下のファイルをデスクトップにコピーします。
C:\Program Files\Amazon\Ec2ConfigService\sysprep2008.xml

コピーしたファイルを編集します。

```sysprep2008.xml編集前
・・・
<InputLocale>en-US</InputLocale>
<SystemLocale>en-US</SystemLocale>
<UILanguage>en-US</UILanguage>
<UserLocale>en-US</UserLocale>
・・・
```

```sysprep2008.xml編集後
・・・
<InputLocale>ja-JP</InputLocale>
<SystemLocale>ja-JP</SystemLocale>
<UILanguage>ja-JP</UILanguage>
<UserLocale>ja-JP</UserLocale>
・・・
```

編集したファイルをC:\Program Files\Amazon\Ec2ConfigService\sysprep2008.xmlに上書き保存します。
イメージを作成し、WorkSpaceを起動します。
日本語になっていれば成功です。

# おわりに
たぶん、AWS側の問題だと思うけど、以上の対策で解決できます。
他の言語を設定する場合など、応答ファイルを設定すると様々な変更がきるのではないでしょうか。
MySQLでサービスを停止せずにslaveを追加する


#はじめに
MySQLでslaveを新しく追加する際、レプリケーションを設定するわけですが、ネット上では下記のように、

```
mysql > FLUSH TABLES WITH READ LOCK;
mysql > SHOW MASTER STATUS;
```

テーブルをロックしたうえで現在のログポジションを調べるという手順が多いような気がします。

この方法だと、短時間ではあってもサービスに影響してしまいます。
そこで、テーブルロックを可能な限り短くしてレプリケーションを定義する方法をまとめます。

#前提
データベースエンジンにInnoDBを使用していること

#概要
###1.masterにてmysqldump

下記オプションを指定することで、ダンプ時にバイナリログを切り替え、ダンプファイルにログポジション情報が記録されます（常に切り替えたバイナリログの最初のポジションとなる＝間違えるリスクが小さい）。
また、トランザクションが有効になるため、オンライン状態でも一貫性を保持したダンプが可能となります。
--single-transaction
--flush-logs
--master-data=2


###2.slaveにインポート


###3.slaveにてレプリケーション定義

ダンプファイルの最初にログポジション情報が記録されているので、それをもとにレプリケーションを設定します。

##手順
###1. masterにてmysqldump
masterDBをダンプ

```
$ mysqldump -uroot -p**** \
   --all-databases \
   --opt \
   --flush-logs \
   --add-drop-table \
   --single-transaction \
   --master-data=2 \
 | gzip > DUMPFILE.gz
```

####オプションの意味

--single-transaction
　→ 一貫性を保持してダンプ
--flush-logs
　→ バイナリログをダンプ時に切り替える
--master-data=2
　→ ダンプ時点でのバイナリログポジション情報を記録

###2. slaveにインポート
```
$ zcat DUMPFILE.gz | head -n 25

dumpファイルのログポジションを確認
(以下の記述を確認。-- CHANGE MASTER TO MASTER_LOG_FILE='mysql-bin.XXXXXX', MASTER_LOG_POS=YYY;)

masterのダンプデータをインポート
$ zcat DUMPFILE.gz | mysql -uroot -p****
```

###3. slaveにてレプリケーション設定
```
mysql> change master to
 master_host='XXX.XXX.XXX.XXX', <-------- masterのIPアドレス
 master_user='repl', <------------------- レプリケーション用に作成したアカウント
 master_password='********', <----------- 上記アカウントのパスワード
 master_log_file='mysql-bin.XXXXXX', <--- dumpfileのMASTER_LOG_FILE
 master_log_pos=YYY; <------------------- dumpfileのMASTER_LOG_POS

レプリケーション開始
mysql> start slave;

スレーブの状態確認
mysql> show slave status\G
```

#注意
mysqldumpの--single-transactionオプションは、ロックを発行することなくdumpが可能ですが、本手順のように--master-dataオプションをつけるとFLUSH TABLES WITH READ LOCKが発行され、一瞬ですがロックが発生します。
しかし、手作業でロックを発行し、ログポジションを調べるのに比べてはるかに短い時間で済みます。
一瞬のロックも許容できないシステムはXtraBackupなどの利用をご検討ください。

#まとめ
稼働中のMaterDBに新たにslaveをぶら下げる時に有用と思われます。
CSSでリンクの前後についている90度以上の矢印アイコンを作りたい

# ＞　> とかリンクの前後についている三角の作り方
・三角形の場合
・え？これ角度が広いけど？？90度以上の矢印を作りたい場合　←こちらの方に向けての記事です。

# 結論：三角形をずらして表示させる
お時間ある方は下へ↓

# 過程 

## 三角形の場合
例えばこんなデザインの場合
![スクリーンショット 2017-04-07 10.28.56.png](https://qiita-image-store.s3.amazonaws.com/0/132966/27a624d2-6cd1-d9f4-5529-baa871d0f26b.png)

borderで□を作ってそれを回転させる
これは角度が90度限定
![スクリーンショット 2017-04-07 10.14.54.png](https://qiita-image-store.s3.amazonaws.com/0/132966/e3301192-cf6a-a413-229d-94d83a777599.png)

個人的には回転（rotete）は苦手です。topの位置が変わってしまうから。

## 90度以上の矢印を作りたい！場合
例えばこんなデザインの場合
この90度以上の□はどうやって作るんだろうか。□の角度が90度以上って？
![スクリーンショット 2017-04-07 10.28.38.png](https://qiita-image-store.s3.amazonaws.com/0/132966/f1c30b0a-c54e-fbc6-cb37-6e217f00ff5e.png)

発想の転換が必要でした。
### ＞を2つ重ねる！
borderで作る三角を２つ作って、左右にずらして設置します。
1つはアイコンの色、もう一つは背景色で作って、いらない部分を見えなくしてしまいます。
ずらす分が＞の太さになります。こちらは太さが2pxの場合。
![スクリーンショット 2017-04-07 10.28.25.png](https://qiita-image-store.s3.amazonaws.com/0/132966/6d5f33b7-5642-8f3b-8e4b-5b290fca8d35.png)


# 便利ツール
[CSS triangle generator](http://apps.eky.hk/css-triangle-generator/)
幅と高さを図って数値を入力するだけで、CSSを書き出してくれます
Equilateral：正三角形
Isosceles：二等辺三角形
Scalene：不等辺三角形　これが便利！

![スクリーンショット 2017-04-07 10.20.03.png](https://qiita-image-store.s3.amazonaws.com/0/132966/ed0b65d7-2b76-fb65-cb54-268621afe2a1.png)
Javadocでは<P>タグの閉じタグを書かないのが主流？

```java

    /**
     * Returns a stream consisting of the elements of this stream, sorted
     * according to natural order.  If the elements of this stream are not
     * {@code Comparable}, a {@code java.lang.ClassCastException} may be thrown
     * when the terminal operation is executed.
     *
     * <p>For ordered streams, the sort is stable.  For unordered streams, no
     * stability guarantees are made.
     *
     * <p>This is a <a href="package-summary.html#StreamOps">stateful
     * intermediate operation</a>.
     *
     * @return the new stream
     */
    Stream<T> sorted();
```
```java.util.stream.Stream#sorted() ``` のコードですが、着目したいのは Javadoc です。


Javadoc をぼーっと眺めていて気がついたのですが、\<P\> タグの閉じタグを書いてないんですよね。
Javadoc は HTML でリッチに書けますが、マークアップすればするほどコーダーが読みづらくなるというのがジレンマでした。


この書き方はスッキリしていて良いなと思いました。
個人的に目から鱗だったので、最近のマイブームです。
【PHP】warnning:file_get_contents()-----localhostで動かない対策

画面上warnningのメッセージから、file_get_contents()が失敗したことをわかっているが、原因は一体どこからか、単純にwarnningの追跡メッセージからわからなくて、詰まっていた。問題解決次第、以下を纏めました。ちなみに、私はDomain設定の方法で解決しました。

##現象：

```ruby:file_get_contents
//Warnning(Warnning)
file_get_contents('http://localhost/index.php');
//OK
file_get_contents('http://www.google.com/');
```

##対策：
###１．php設定チェック：
(先頭に「;」がないことをチェック)

```ruby:php.ini
extension=php_openssl.dll
allow_url_fopen=On
allow_url_include=Off
```
###２．Domain設定：
以下を追加するだけでＯＫかもしれませんね。

```ruby:/etc/hosts
192.168.0.103 domain
```
###３．firewallチェック：
firewallがlocalhostの接続をブロックしているかもしれない、一旦filewallの設定を外して見てみよう。

###４．万一...
どうしても動かない場合、ソースの書き方を検討しましょうか。

```ruby:sample1
//localhostを避けましょう。
//file_get_contents('http://localhost/index.php');
file_get_contents('index.php');
```

```ruby:sample2
//代わりに他の関数を使いましょう
function curl_get_contents($url)
{
    $ch = curl_init();

    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_URL, $url);

    $data = curl_exec($ch);
    curl_close($ch);

    return $data;
}
//※参考から引用だけ、試していない、ご自由にトライしてください。
```


*参考：*
・[PHP file_get_contents does not work on localhost](http://stackoverflow.com/questions/8423404/php-file-get-contents-does-not-work-on-localhost)


`---I Love PHP (｡･ω･｡)ﾉ♡`
Node.jsの関数を作る

#とりあえずコードを書く

AWS Lambda開発者ガイドにコーディング例があるのでCopyします

Lambda 関数 → Lambda 関数のビルド→ プログラミングモデル→プログラミングモデル (Node.js)→ハンドラー (Node.js)
のあたりです。

で、書いたコードをLambda関数として登録します。

#deployする

トリガーの設定（Javaの時と同じ）に続き関数の設定をします。
簡単なソースコードはインラインで編集出来ます。

※ここで「ロール」にJavaのlambda関数で使用した既存のロールを設定したのですが
![Node-dep2.png](https://qiita-image-store.s3.amazonaws.com/0/169729/2157aecb-4607-6140-b458-b33ede4980e7.png)


出来上がった関数を実行すると、ログが出ない．．．
![node4.png](https://qiita-image-store.s3.amazonaws.com/0/169729/0a38f557-1821-f5ca-1154-271e997e6cd4.png)

~~何故でしょうね？
仕方ないのでロールを「テンプレートから新しいロールを作成」に変えるとログが出ました。
IAMのポリシー的に違いは無い気がするのですが．．．~~

ロールを摘要する際に「テンプレートから新しいロールを作成」で作成した場合、CreateLogStreamのResouseにLambdaの関数名を含んでいるため、別の関数に適用できません。
![role.png](https://qiita-image-store.s3.amazonaws.com/0/169729/4533010d-ca53-6b70-c0e6-8ac89f04de5d.png)
関数毎にRoleを作るか、すべての関数に適用できるRoleを作っておくことをお勧めします。



実行結果のログですが、undefinedで出力されてるのが気になります。
![Node5.png](https://qiita-image-store.s3.amazonaws.com/0/169729/215527db-7083-f351-62d2-bd715687abe9.png)

適当にコピペしたコードなので、eventがS3のputをトリガーにしたeventと違う使い方なのだろうと思いますが、オブジェクトの仕様がわかりません。

いろいろ探しましたが、答えはLambda関数を作成する際の「設計図の選択」にありました。

![S3設計図.png](https://qiita-image-store.s3.amazonaws.com/0/169729/95fd069d-6cf5-1038-435f-b4a32053fbe8.png)

ここで作りたい関数の設計図をダウンロードすれば関数が受け取るオブジェクトの仕様を大体知ることが出来ます。
S3をトリガーとした関数のサンプルだとこんな感じです。

```js:index.js
'use strict';

console.log('Loading function');

const aws = require('aws-sdk');

const s3 = new aws.S3({ apiVersion: '2006-03-01' });


exports.handler = (event, context, callback) => {
    //console.log('Received event:', JSON.stringify(event, null, 2));

    // Get the object from the event and show its content type
    const bucket = event.Records[0].s3.bucket.name;
    const key = decodeURIComponent(event.Records[0].s3.object.key.replace(/\+/g, ' '));
    const params = {
        Bucket: bucket,
        Key: key,
    };
    s3.getObject(params, (err, data) => {
        if (err) {
            console.log(err);
            const message = `Error getting object ${key} from bucket ${bucket}. Make sure they exist and your bucket is in the same region as this function.`;
            console.log(message);
            callback(message);
        } else {
            console.log('CONTENT TYPE:', data.ContentType);
            callback(null, data.ContentType);
        }
    });
};
```
再deployして実行すると、うまくいきました。
![無題.png](https://qiita-image-store.s3.amazonaws.com/0/169729/6559e515-ebb6-37ac-8208-afe84ae6b402.png)
ちなみにメモリー消費は36MBでした。

スクリプト言語なので動かすまで構文エラーがわからないのは理解できますが、
**私としては、そういう所が好きになれないんですよね．．．**
ということで、今後はAPI Gatewayからの関数呼び出しと、データベースとの連携をやってみたいと思います。
これも設計図を使えば割と簡単にできそうです。
CarrierWaveのファイル読み書きをもう少し詳しく。

```
uploader = AvatarUploader.new
my_file = open('my_file.txt')
uploader.store!(my_file) #carrierwaveのstore_dirに保存される
my_file2 = open('my_file2.txt')
uploader.store!(my_file2) #carrierwaveのstore_dirに保存される

uploader.retrieve_from_store!('my_file.txt') #保存されたファイルを表に持ってくる
puts uploader.file.read                      #表に持ってきたファイル(my_file.txt)を読み出し

uploader.retrieve_from_store!('my_file2.txt') #保存されたファイルを表に持ってくる
puts uploader.file.read                       #表に持ってきたファイル(my_file2.txt)を読み出し
```
マーチャントバリデーションのsession.onvalidatemerchantのURLが名前解決できない時

ベータ版のiOS使ってませんか？w
curlError: "Couldn't resolve host 'apple-pay-gateway-sh-pod1.apple.com'"

リリース版で試すと名前解決できるURLが返って来ますよ。
validationURL: "https://apple-pay-gateway-pr-pod2.apple.com/paymentservices/startSession"

謎なのはベータ版でもiPadは正しいURLなんですよね。。

おまけ
XMLHttpRequestでサーバサイドにPOSTする前にキャッシュ消したほうが幸せになれます。

```
xhr.open('GET', 'apple_pay_comm.php?u=' + valURL);

xhr.setRequestHeader('Pragma', 'no-cache'); 
xhr.setRequestHeader('Cache-Control', 'no-cache'); 
xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT'); 

xhr.send();
```

しかしApple Payの情報少なすぎ
Ubuntu16.04 LTSでVagrant up時にエラーが発生しゲストOSが起動しないとき

# エラーが発生した環境
- ホストOS Ubuntu 16.04 LTS
- ゲストOS Centos7.3
- Vagrant 1.9.3
- VirtualBox 5.1

# エラー
Ansibleで環境構築する際のテストをしようとVirtualBoxとVagrantをインストール。
VirtualBoxはオラクルのサイトからバージョン5.1を、Ansibleはapt-getでインストール。
しかし、起動しようとすると以下のようなエラーが発生し起動できない。

```
default: Booting VM... There was an error while executing  VBoxManage, a CLI used by Vagrant for controlling VirtualBox. The command and stderr is shown below.

Command: ["startvm", "0399f946-6a87-4310-a22d-c1a4525ae2f0", "--type", "headless"]
```

# 対処法
オラクルのサイトにあるVirtualBox 5.1ではなくUbuntu SoftwareにあったVirtualBox5.0をインストールしたら無事に起動した。バージョンによる問題なのだろうか？
おそらくapt-getやオラクルのサイトにあるVirtualBox5.0をインストールしても解決するだろう。
書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter3】

# 関連記事

* [書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter1】](http://qiita.com/laineek/items/50282a1d152098f42e15)
* [書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter2】](http://qiita.com/laineek/items/121a9a20d5eb26fb56f4)
* 書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter3】　★今ここ
* [書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter4】](http://qiita.com/laineek/items/408dc12e2c5f8c86d48c)
* 書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter5】
    * 特にありませんでしたので、作成していません。
* [書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter6 最終回
】](http://qiita.com/drafts/871a0b93b4cbd82c8e2a)

# 私の環境

* Windows 10 Home 64bit
* Ruby 2.2.6
* Rails 5.0.2

# つまずきやすいポイント

## [p.159] SQLiteコマンドラインツールの終了コマンド

終了コマンドが記載されていないので補足。

```
.exit
```

ちなみに、SQLiteはメモリ上で動いているDB（ライブラリ型DB）なので、コマンドラインツールを終了すると、操作していたデータは消えます。一方、これ以降のRailsアプリから登録するデータは、データファイルにデータが保存されるように設定されているため消えません。

## [p.185] フォームヘルパーが生成するものを確認するとエラー発生

書籍の順番通りに進めて、Webブラウザで見ようとすると次のエラーが発生します。

```
ActionView::Template::Error (First argument in form cannot contain nil or be empty):
    1: <h1>People#Add</h1>
    2: <p><%= @msg %></p>
    3: <table>
    4:  <%= form_for(@person, url:{controller:'people', action:'create'}) do |form| %>
    5:  <tr><th>Name</th>
    6:          <td><%= form.text_field :name %></td></tr>
    7:  <tr><th>Age</th>
```

原因は、4行目の @person がActionから渡ってきてないからです。次のページ（p.186)の「コントローラの修正」の章まで実施すると、エラーは解消されます。（書籍の順番が前後してしまっているようです。）


# 誤植

## [p.175] 中段ほど

* 誤） iパラメータ 
* 正） idパラメータ

# 今後

引き続き、詰まりやすそうかなあというポイントがあればまた投稿します。
Windows 8.1 > link > ディスクアクセス100%の対処 > IPv6のチェックを外す

```txt:動作確認
VMware(R) Workstation 12 Pro on Windows 10 Pro
Windwos 8.1 pro(64bit) on VMware
```

### 症状

Windows 8.1にてディスクアクセスが100%のままとなる症状が出ていた。

[VMware > Windows 8.1 > ディスクアクセス100%の対処](http://qiita.com/7of9/items/56bfbd4e08db96f5f7bf)
に記載した方法でセーフモードにしたが解消できなかった。

別途以下を見つけた。
[【Windows8、Windows10】タスクマネージャーのディスク使用率が100％になる](https://www.pcdepot.co.jp/cm_g/trouble/windows10_disk_usage_trouble.html)
> 「ピアネットワーク」を無効にする。またはインターネットプロトコルの「バージョン6（TCP/IPv6）」のチェックを外す

IPv6のチェックを外したところ、問題が解消した。

情報感謝です。
PostCSS SortingでCSSの@ルールやプロパティの記述順を整理

PostCSSはいろんな拡張があって煩雑になりやすい印象を受けます。複数人で開発するとプロパティの順番が統一されない可能性が高く見通しが悪くなってしまいます。CSScombでもプロパティを並び替えをおこなえますが、今回はPostCSS独自の拡張機能にも対応したPostCSS Sortingで並び替えできるようにしましたので、紹介します。

## PostCSS Sorting

[ドキュメント](https://github.com/hudochenkov/postcss-sorting)

>PostCSS plugin to keep rules and at-rules content in order.
>Also available as Sublime Text plugin, Atom plugin, and VS Code plugin.
>Lint style sheets order with stylelint-order.

Google翻訳すると、

規則とat-rulesの内容を順番に保持するPostCSSプラグイン。
サブライムテキストプラグイン、Atomプラグイン、VSコードプラグインとしても利用できます。
リントスタイルシートは、スタイルリントオーダーで注文します。

そういうことです。

## 必要なパッケージ

* postcss
* postcss-cli
* postcss-sorting
* stylelint-order


## パッケージのインストール

```
$ yarn add -D postcss postcss-cli postcss-sorting stylelint-order
```

## 設定ファイルの作成

並び替えの順番を記述しておく設定ファイルが必要です。
今回は`postcss-sorting.json`で作成します。
※設定ファイルはルート直下に格納しないと反応しません。


| オプション | 内容 |
| --- | --- |
| order | 宣言ブロック内のコンテンツの順序を指定します。 |
| properties-order | 宣言ブロック内のプロパティの順序を指定します。 プロパティグループの前に空行を指定できます。 |
| unspecified-properties-position | プロパティーオーダーで指定されていないプロパティーの位置を指定します。 |

上記の他にプロパティのまとまりごとに空行を入れられます。


記述例

```js:postcss-sorting.json
{
  "order": [
    "at-rules",
    // ...省略...
    {
      "type": "at-rule",
      "name": "util",
      "hasBlock": true
    },
    // ...省略...
    "custom-properties",
    "declarations",
    {
      "type": "at-rule",
      "name": "media",
      "hasBlock": true
    },
    "rules"
  ],
  "properties-order": [
    {
      "properties": [
        "position",
        "z-index",
        "top",
        "right",
        "bottom",
        "left"
      ]
    },
    {
      "properties": [
        "display",
        "visibility",
        "float",
        "clear",
        "overflow",
        "overflow-x",
        "overflow-y",
        "-ms-overflow-x",
        "-ms-overflow-y",
        "clip",
        "zoom",
        "flex-direction",
        "flex-order",
        "flex-pack",
        "flex-align"
      ]
    },
    // ...省略...
  ],
  // ...省略...
  "unspecified-properties-position": "bottom"
  }
}
```

一から設定するのは辛いし時間がかかりすぎるので、以下を参考にして作成すると良いと思います。
https://github.com/hudochenkov/postcss-sorting/tree/ee71c3b61eea8fa11bc3aa2d26dd99a832df6d54/configs


実際に作成したファイルは以下
https://gist.github.com/buchiya4th/75bacfe828d13c85e13ae182ae48306a


## エディタの設定

[ドキュメント](https://github.com/lysyi3m/atom-postcss-sorting)

Atom、VSCodeは`postcss-sorting`パッケージを入れます。

Sublime Textは設定が違うようです。
以下に掲載されているので、そちらをご参照ください。
https://github.com/hudochenkov/sublime-postcss-sorting


## 実行してみる

これで一通り設定は完了です。
実際に実行するのは以下のショートカットや手順を踏むだけ。

* Atom:`Ctrl+Shift+S`
* VSCode:F1でコマンドパレットを開き`PostCSS Sorting: Run`を選択

簡単ですね。


## さいごに

@utilや@media等の位置を指定できてスッキリしました。
@util同士の順番指定はむずかしいかもしれませんが、そこは今後よくなっていくことを期待しましょう。
これでオレオレ記述でイラっときて順番書き換え合戦になることもなくなりますね。
コードが汚いと上で記述してたのを見落として下に同じようなことを書いて上書きしてしまう、なんてこともあると思います。
コードが読みやすいと不毛なバグも起こりづらく効率的に開発に集中できると思います。
キレイなコードを保つように心がけていきましょう。
長さの違う振り子のシュミレーション その3

#概要
長さの違う振り子のシュミレーションやってみた。
box2djsは、シンクロしない。

#写真
![](http://jsdo-static-contents.s3.amazonaws.com/images/capture/Q/f/X/QfXl.jpg?t=1491518668)


#成果物
http://jsdo.it/ohisama1/QfXl
長さの違う振り子のシュミレーション その2

#概要
長さの違う振り子のシュミレーションやってみた。
liquidfunは、シンクロしない。

#写真
![](http://jsdo-static-contents.s3.amazonaws.com/images/capture/K/W/U/KWUD.jpg?t=1491478209)

#成果物
http://jsdo.it/ohisama1/KWUD
Python > 4つ以上の項目を複数のグループとして返す関数 > Named tuple

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 14.04 LTS desktop amd64
TensorFlow v0.11
cuDNN v5.1 for Linux
CUDA v8.0
Python 2.7.6
IPython 5.1.0 -- An enhanced Interactive Python.
gcc (Ubuntu 4.8.4-2ubuntu1~14.04.3) 4.8.4
GNU bash, version 4.3.8(1)-release (x86_64-pc-linux-gnu)
```

Pythonで4つ以上の項目を複数のグループとして返す関数を作ってみる。

### 方法1 tupleをtupleする
tuple packingを使ってみた。

```test_python_170407a.py
def get_tuple():
    return (3.1415, 2.718), (6.022, 10.23)

agrp, bgrp = get_tuple()
print(agrp, bgrp)

pi, napier = agrp
print(pi, napier)

avogadro_mantissa, avogadro_exponent = bgrp
print(avogadro_mantissa, avogadro_exponent)

```

```txt:結果
$ python test_python_170407a.py 
((3.1415, 2.718), (6.022, 10.23))
(3.1415, 2.718)
(6.022, 10.23)
```

一度グループとしてtuple unpackingしたものから、個々の変数を受け取るためにさらにtuple unpackingしている。

### 方法2 Named tuple

以下にNamed tupleを使った例がある。
http://stackoverflow.com/questions/354883/how-do-you-return-multiple-values-in-python

試してみた。

```test_python_170407b.py
import collections


def get_tuple():
    Agroup = collections.namedtuple('Agroup', ['pi', 'napier'])
    agrp = Agroup(3.1415, 2.718)
    Bgroup = collections.namedtuple('Bgroup', ['mantissa', 'exponent'])
    bgrp = Bgroup(6.022, 10.23)
    return agrp, bgrp

agrp, bgrp = get_tuple()
print(agrp, bgrp)

print(agrp.pi, agrp.napier)
print(bgrp.mantissa, bgrp.exponent)
```

```txt:結果
$ python test_python_170407b.py 
(Agroup(pi=3.1415, napier=2.718), Bgroup(mantissa=6.022, exponent=10.23))
(3.1415, 2.718)
(6.022, 10.23)
```

関数呼び出し時の左側の記載が短くでき、かつ、.piや.napierのようにして、各変数の参照もしやすい。
技術英語 > A deque (pronounced deck)

@ Introducing Python: Modern Computing in Simple Packages by Bill Lubanovic
(No. 3233 / 12833)

> A deque (pronounced deck) is a double-ended queue,

てっきり「デキュー」かと思ったら違った。

I just thought it was pronounced dekyu.
参考 http://eikaiwa.dmm.com/uknow/questions/882/

Merriam Websterに掲載の発音が似た単語としては tuque
https://www.merriam-webster.com/dictionary/tuque
> \ˈtük, ˈtyük\

je ne comprends pas ce que vous m'avez dit maintenant
のce queの[k]と覚えた。
( あなたが今言ったことは理解できません。)
マーティン・ファウラーのリファクタリング 個人的まとめ（第８・９章）

## 新装版　リファクタリング ~既存のコードを安全に改善する~
- 読みました。
- 忘れないうちに、それぞれの手法について一言くらいでメモしていきます。

<table  border="0" cellpadding="5"><tr><td valign="top"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/427405019X/ryskiwt-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/I/51RWpUlhNxL._SL160_.jpg" border="0" alt="新装版 リファクタリング―既存のコードを安全に改善する― (OBJECT TECHNOLOGY SERIES)" /></a></td><td valign="top"><font size="-1"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/427405019X/ryskiwt-22/" target="_top">新装版 リファクタリング―既存のコードを安全に改善する― (OBJECT TECHNOLOGY SERIES)</a><br />Martin Fowler 児玉 公信 <br /><br />オーム社  2014-07-26<br />売り上げランキング : 22428<br /><br /><a href="http://www.amazon.co.jp/exec/obidos/ASIN/427405019X/ryskiwt-22/" target="_top">Amazonで詳しく見る</a></font><font size="-2"> by <a href="http://www.goodpic.com/mt/aws/index.html" >G-Tools</a></font></td></tr></table>

## 第８章　データの再構成
### 自己カプセル化フィールド
- Getter/Setter のこと
- コンストラクタで設定するfinalだけのクラス（VOとか）は正直なくていい

### オブジェクトによるデータ値の置き換え
- `string` とか `int` とかもできるだけ色つけて振る舞い持たせる

### 値から参照への変更 / 参照から値への変更
- 実体がひとつかどうかで判断する

### オブジェクトによる配列の置き換え
- 配列の中身に、異なる意味合いをもつ値をいれるのはダメ
- 名前、体重、身長...とか
- まずやらない

### 観察されるデータの複製
- 階層が違ったり、異なるクラスだけど取り扱うデータは同期したい場合
- Observerパターンを使う

### 単方向関連の双方向への変更 / 双方向関連の単方向への変更
- 相手を保持し、相手に自分を保持するよう指示する
- 1対多対応で参照し合う場合は、参照を１つ持つ側が主
- コンポジションの場合は集約元が主
- 多対多の場合はどっちでも良い

### シンボリック定数によるマジックナンバーの置き換え
- よくやる `SOME_CONSTANT` ってやつ

### フィールドのカプセル化
- フィールドは基本隠蔽する
- メソッドでアクセスする

### コレクションのカプセル化
- コレクション本体をget/setさせない
- 渡した先でどう扱われるかコントロールできなくなる

```java
public ArrayList<String> getList() {
  return this.List; // NG
}
```

### ~~データクラスによるレコードの置き換え~~
- 構造体をクラスで置き換えるよって話
- 不要

### ~~クラスによるタイプコードの置き換え~~
- enumを使おう

### ~~サブクラスによるタイプコードの置き換え~~
- enumを使おう

### State/Strategyによるタイプコードの置き換え
- アルゴリズムの取り替えをしたい -> Strategy
- 状態が変わる（状態によって処理が変わる） -> State

### ~~フィールドによるサブクラスの置き換え~~
- サブクラスを分けているけど返す定数が違うだけ、の場合はフィールドで済ます

## 第９章　条件記述の単純化
### 条件記述の分解
- 条件式の判定、{}内の処理それぞれメソッドとして抽出して適切な名前をつける

### 条件記述の統合
- 処理が同じ分岐は統合する
- 条件式をメソッドで置き換えて適切な名前をつける

### 重複した条件記述の断片の統合
- 同じコードが複数の分岐内に散在するときはまとめる

### 制御フラグの削除
- return したり break したりで回避する

### ガード節による入れ子条件の置き換え
- メイン処理を本流とする
- 頻度の低い処理、例外的な処理はガード節で書いて、早期リターン

### ポリモーフィズムによる条件記述の置き換え
- オブジェクトの種類によって処理が違う場合
- ×オブジェクトの種類判定 -> 処理を変更
- ◯そもそもオブジェクトに処理をもたせる

### ヌルオブジェクトの導入
- インターフェースは実装するけど何もしないオブジェクト(NullCustomerとか)をつくる
- 空の場合のチェック・条件分岐とかを回避できる

### 表明の導入
- エラーとアサーションは明確に分ける
- アサーション
    - 前提条件の確認
    - 本来は呼び出し側で実施すべきもの
    - ドキュメントなどに表現される
    - 開発段階では、前提条件に合わない場合はエラーとしたい（開発者の効率のため）
    - 稼働段階では、条件判定したくない（パフォーマンスを下げる要因になるため）
    - とにかく開発者のためのチェック
- エラー
    - ユーザー入力の値、アプリの内部状態、タイミング次第で起きうる事象
    - 続行すると問題が発生する場合
    - 開発段階でも稼働段階でもチェックしなければいけないもの
マーティン・ファウラーのリファクタリング 個人的まとめ（第６・７章）

## 新装版　リファクタリング ~既存のコードを安全に改善する~
- 読みました。
- 忘れないうちに、それぞれの手法について一言くらいでメモしていきます。

<table  border="0" cellpadding="5"><tr><td valign="top"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/427405019X/ryskiwt-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/I/51RWpUlhNxL._SL160_.jpg" border="0" alt="新装版 リファクタリング―既存のコードを安全に改善する― (OBJECT TECHNOLOGY SERIES)" /></a></td><td valign="top"><font size="-1"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/427405019X/ryskiwt-22/" target="_top">新装版 リファクタリング―既存のコードを安全に改善する― (OBJECT TECHNOLOGY SERIES)</a><br />Martin Fowler 児玉 公信 <br /><br />オーム社  2014-07-26<br />売り上げランキング : 22428<br /><br /><a href="http://www.amazon.co.jp/exec/obidos/ASIN/427405019X/ryskiwt-22/" target="_top">Amazonで詳しく見る</a></font><font size="-2"> by <a href="http://www.goodpic.com/mt/aws/index.html" >G-Tools</a></font></td></tr></table>

## 第６章　メソッドの構成
### メソッドの抽出
- ひとつの目的を達成するための、ひとまとまりのコードを括りだす
- 空白行で区切って、空白行でまとめるくらいなら、意味のある名前をつけたメソッドに抽出する

### メソッドのインライン化 / 一時変数のインライン化
- 一時変数に入れるまでもない、メソッドとして括るまでもない単純な処理は元に戻す

### 問い合わせによる一時変数の置き換え
- ×一時変数に保持して呼ぶ
- ◯メソッドで毎回計算する
- 一時変数のスコープを狭めるのに有効
- メソッドであれば、オブジェクトのどの箇所からでも同じ値が使用できる
- リファクタではパフォーマンスは一旦気にしない（わかりやすくしてから、ボトルネックを最適化する）

### 説明用変数の導入
- 一見して計算結果が分からないような式に名前をつける
- 特に条件判定部分で有効
- `isContained` とか `isValid` とか

### パラメータへの代入の除去
- 入力引数への代入、置き換えはしない

```java
void someMethod(Object foo) {
  foo.someMethod(); // OK
  foo = bar;        // NG
}
```

### メソッドオブジェクトによるメソッドの置き換え
- あるメソッドだけを持つクラスを作り、実行を委譲する
- 一時変数をフィールドに昇格させる
- リファクタの途中でほぐしていく段階で使用する

#### アルゴリズムの取り替え
- 同じことを達成できるならできるだけ簡単で分かりやすいアルゴリズムを使う

## 第７章　オブジェクト間での特性の移動
### メソッドの移動
- 自分のフィールドではなく、他オブジェクトのフィールドを頻繁に参照するメソッドは、そのオブジェクトに移動する

### フィールドの移動
- 自分のメソッドではなく、他オブジェクトのメソッドから頻繁に参照されるフィールドは、そのオブジェクトに移動する

### クラスの抽出 / クラスのインライン化
- 単一責任出ない場合はクラスを分割
- 同じ責任を分担してやっているクラスや、大したことやってないクラスは統合

### 委譲の隠蔽 / 仲介人の除去
- あるクラスが保持するクラスのメソッドを直接呼び出しているときは、適切に委譲メソッドを作成し、依存関係を整理する
- 委譲先のメソッドが多い場合などは、委譲のためだけに仲介クラスに大量メソッドを書かないといけないので直接呼ぶようにする

### 外部メソッドの導入
- 外部ライブラリ等、変更できないクラスを拡張する場合
- そのクラスを第一引数にしたメソッドを作成する

```java
public void someMethod(Object someObj, int param, int param2) {
  // 何か処理
}
```

### 局所的拡張の導入
- 外部メソッドが多くなった場合
- ラッパークラス or サブクラス で対応する
マーティン・ファウラーのリファクタリング 個人的まとめ

## 新装版　リファクタリング ~既存のコードを安全に改善する~
- 読みました。
- 忘れないうちに、それぞれの手法について一言くらいでメモしていきます。

<table  border="0" cellpadding="5"><tr><td valign="top"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/427405019X/ryskiwt-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/I/51RWpUlhNxL._SL160_.jpg" border="0" alt="新装版 リファクタリング―既存のコードを安全に改善する― (OBJECT TECHNOLOGY SERIES)" /></a></td><td valign="top"><font size="-1"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/427405019X/ryskiwt-22/" target="_top">新装版 リファクタリング―既存のコードを安全に改善する― (OBJECT TECHNOLOGY SERIES)</a><br />Martin Fowler 児玉 公信 <br /><br />オーム社  2014-07-26<br />売り上げランキング : 22428<br /><br /><a href="http://www.amazon.co.jp/exec/obidos/ASIN/427405019X/ryskiwt-22/" target="_top">Amazonで詳しく見る</a></font><font size="-2"> by <a href="http://www.goodpic.com/mt/aws/index.html" >G-Tools</a></font></td></tr></table>

## 第６章　メソッドの構成
- メソッドの抽出
- メソッドのインライン化
- 一時変数のインライン化
- 問い合わせによる一時変数の置き換え
- 説明用変数の導入
- パラメータへの代入の除去
- メソッドオブジェクトによるメソッドの置き換え
- アルゴリズムの取り替え

## 第７章　オブジェクト間での特性の移動
- メソッドの移動
- フィールドの移動
- クラスの抽出
- クラスのインライン化
- 委譲の隠蔽
- 仲介人の除去
- 外部メソッドの導入
- 局所的拡張の導入

[マーティン・ファウラーのリファクタリング 個人的まとめ（第６・７章） - Qiita](http://qiita.com/ryskiwt/items/546a146db2eb10b0d96e)

## 第８章　データの再構成
- 自己カプセル化フィールド
- オブジェクトによるデータ値の置き換え
- 値から参照への変更
- 参照から値への変更
- オブジェクトによる配列の置き換え
- 観察されるデータの複製
- 単方向関連の双方向への変更
- 双方向関連の単方向への変更
- シンボリック定数によるマジックナンバーの置き換え
- フィールドのカプセル化
- コレクションのカプセル化
- データクラスによるレコードの置き換え
- クラスによるタイプコードの置き換え
- サブクラスによるタイプコードの置き換え
- State/Strategyによるタイプコードの置き換え
- フィールドによるサブクラスの置き換え

## 第９章　条件記述の単純化
- 条件記述の分解
- 条件記述の統合
- 重複した条件記述の断片の統合
- 制御フラグの削除
- ガード節による入れ子条件の置き換え
- ポリモーフィズムによる条件記述の置き換え
- ヌルオブジェクトの導入
- 表明の導入

[マーティン・ファウラーのリファクタリング 個人的まとめ（第８・９章） - Qiita](http://qiita.com/ryskiwt/items/a8afca1018ebba6f0266)

## 第１０章　メソッド呼び出しの単純化
- メソッド名の変更
- パラメータの追加
- パラメータの削除
- 問い合わせと更新の分離
- メソッドのパラメタライズ
- 明示的なメソッド群によるパラメータの置き換え
- オブジェクトそのものの受け渡し
- メソッドによるパラメータの置き換え
- パラメータオブジェクトの導入
- setメソッドの削除
- メソッドの隠蔽
- Factory Methodによるコンストラクタの置き換え
- ダウンキャストのカプセル化
- 例外によるエラーコードの置き換え
- 条件判定による例外の置き換え

## 第１１章　継承の取り扱い
- フィールドの引き上げ
- メソッドの引き上げ
- コンストラクタ本体の引き上げ
- メソッドの引き下げ
- フィールドの引き下げ
- サブクラスの抽出
- スーパークラスの抽出
- インターフェースの抽出
- 階層の平坦化
- Template Methodの形成
- 委譲による継承の置き換え
- 継承による委譲の置き換え
C#で再生デバイスを指定してサウンドを再生

NAudioを使用しますので、Nuget等を使ってプロジェクトに組み込んでください。

## 再生デバイスの取得

以下の感じでさくっと取得。
capabilitiesの中にはGuidやらいろいろ入っていますが、今回は特に使わないです。結局あとで必要になるのは「再生デバイスのindex」だけっぽいので、とりあえず名前だけ返却しましょう。

```csharp
public List<string> GetDevices()
{
    List<string> deviceList = new List<string>();
    for (int i = 0; i < WaveOut.DeviceCount; i++)
    {
        var capabilities = WaveOut.GetCapabilities(i);
        deviceList.Add(capabilities.ProductName);
    }
    return deviceList;
}
```

## デバイスを指定して再生

NAudio(というかWaveOut)の仕様では、indexを指定することでデバイスを特定するようです。

```csharp
public void PlaySound(string filePath, int index)
{
    var waveReader = new NAudio.Wave.WaveFileReader(filePath);
    var waveOut = new NAudio.Wave.WaveOut();
    waveOut.DeviceNumber = index;
    waveOut.Init(waveReader);
    waveOut.Play();
}
```

## その他

普段はヘッドホンで音を出している私が、特定のタイミングでモニターから音を出したいケースが発生したので調べてみたところ、思いのほかはまったのでメモしときました。

最初はXAudio2を使って再生しようと思い、SharpDXやSlimDXを試していたのですが、XAudio2のバージョン2.8以降はデバイスの特定に「デバイスインターフェースID」的なものが必要になるようです。
しかしローレベルAPIが理解できないライトちゃんには、再生デバイスのインターフェースIDなんてわかりまてん。とっとと諦めてこちらの方法に切り替えました。

あんまり無い要件かと思いますが、誰かの助けになれば・・・
画面の色反転 - 目が疲れた時のために

# 目がつかれたら画面描画色の反転が良い
長時間モニターを眺めていると目が疲れてくる
疲れないようにする方法としては，バックライトを弱くしたり，ブルーライトカットなどがある
しかし，可読性が落ちたり，結局モニターの光で目が乾いてしまったりと，根本的な解決ではないと考えられる
目が疲れてしまっては作業可能な時間が減ってしまう

普段エディタの背景を黒系にしている人は多いと思うが，情報収集(PDFやWebを読む)をしていると，白系の背景で目が疲れてしまう

この問題の解決に有効なのが画面の描画色反転だ

## 描画色反転の方法
### Chromeの場合
Chrome Extension の[ハイコントラスト](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph)でChromeの描画色を反転

### Linuxの場合
**xcalib**で画面全体の描画色を反転

`xcalib -i -a`
画面の描画を反転する

### Window7の場合
コントロールパネル > 個人設定
↑の中からハイコントラストテーマを選択

※ コントロールパネル > コンピュータの簡易操作センター > コンピュータを見やすくします
↑にはハイコントラストを切り替えるショートカットキーの有効/無効などの設定もある
   

## Chrome Extension vs xcalib
個人的にはxcalibの勝利

### xcalibの良い所
- Chromeで表示したpdfも反転する
- Chrome以外のpdfやスライドなどの描画も反転する (画面全体)

### xcalibの悪いところ
- Terminalの設定を黒系背景にしていると反転されて見づらい
- 同じくvimなどのエディタの背景を黒系にしていると反転されて見づらい

### Chrome Extensionの良い所
- 反転した結果(Webページ)はChrome Extensionの方が綺麗(な気がする)
- 色が反転した状態で印刷(PDF化も)できる

### Chrome Extensionの悪いところ
- PDFの描画は反転しない
- 描画が重くなる

## Windows7の良い所・悪いところ
- 文字を何色にするかなど，テーマを編集することで細かく設定することが可能
- 反転対象が画面全体ではない (gVimやpdf viewrなどはそのまま，パワポは反転など)
munin pluginの書き方Tips

# negative graphの書き方
## ethernet I/F のトラフィック状況表示の様に「0基準で上下(-/+)」にグラフ表示させる
例えばこんなの
<img width="360" alt="スクリーンショット 2017-04-07 01.30.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/12014/7e074904-0b59-9287-2755-3e2f055452ac.png">

```test.pl
if ($ARGV[0] and $ARGV[0] eq "config") {
   print "plus.type GAUGE\n";
   print "plus.min 0\n";
   print "plus.draw LINE1\n";
   print "plus.info Net Out\n";
   print "plus.label bps\n";
   print "minus.info Net In\n";
   print "minus.label bps\n";
   print "minus.graph no\n";
   print "plus.negative minus\n";
} else {
   print "plus.value " . $out . "\n";
   print "minus.value " . $in . "\n";
}
```
- negative の使い方
- 
`print "minus.graph no\n";`
`print "plus.negative minus\n";`
呪文を唱えるように「`プラス値label名.nagative マイナス値label名`」が必至である

- ラベル表示を合わせよう

`print "plus.label bps\n";`
`print "minus.label bps\n";`
ラベル表示内容は同一で！

### 注意点としては　for文 などを使って label名 を配列などから持ってくる際には分岐をきちんと行い「不要なlabel」を出力しない必要性がある（最初に出力したlabel名が有効になるためコードを端折るとハマります
Google MapやYoutubeをレスポンシブ対応させる方法


WebサイトにGoogle Mapを埋め込んだり、Youtubeの動画を埋め込んだりすると、スマホで見た時等に表示が崩れる…YoutubeやGoogle Mapのwidthに合わせるために本体が細くなったり、逆に横スクロールバーが出たりなどします。

その解決策と詰んだ部分をシェアしたいと思います。

# YoutubeやGoogle Mapを埋め込み、レスポンシブ対応させる

YoutubeやGoogle Mapを埋め込むコードを`div`で囲みます。
CSSで指定するためにクラス名を適当につけてくださいね。

```html
<div class="google-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3280.1066533798594!2d135.4937565508161!3d34.70248979053399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e68d95e3a70b%3A0x1baec822e859c84a!2z5aSn6Ziq6aeF!5e0!3m2!1sja!2sjp!4v1491495576526" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
```

```css
.google-map {
    position: relative;
    width: 100%;    /* 左右に余白が必要なら値を変更してもOK */
    height: 0;
    padding-bottom: 56.25%;    /* padding-topでもOK */
    overflow: hidden;
}
.google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;    /* 必要であれば!importantを付けてください */
    height: 100%;    /* 必要であれば!importantを付けてください */
}
```

paddingでレスポンシブを実装しています。
アスペクト比が16:9の場合は56.25%、4:3の場合は75%です。
（16:9の場合→9 / 16 * 100 = 56.25）

Youtubeの場合、iframeの他にも追加しないといけませんが、今回は省略。

# display:flex;が適応されている部分での使用は避ける

この方法で何度やってもGoogle Mapを埋め込んだ直下に記載したテキストが埋もれてしまうので詰んでました。
そして気づきました。
この方法でiframeなどをレスポンシブ対応させる解説にはなくて、私の製作中のファイルにはある違いを。

CSS3からのフレキシブルボックスが便利すぎるので利用していたんですが、この手法を使いたい場合、親要素にフレキシブルボックスが適応されていると、上手く表示しないです。

代用として、この部分だけ`float`で指定して回避しました。

# まとめ

同じようなことで詰んでしまった方が居るんじゃないかと思ったのでまとめてみました。
個人的に`float`よりも`flex`を利用することが多いので同じような躓きポイントをシェア！

最後までご閲覧ありがとうございました。
JavaScript ES2015の分割代入 


##分割代入(配列)
分割代入(Destructuring assignment)とは、配列/オブジェクトを分解し、
配下の要素/プロパティ値を個々の変数に分解するための構文のこと。

従来では個々の要素にアクセスしなければならない。

```script.js
var data = [56,40,26,82,19,17,73,99];
var x0 = data[0];
var x1 = data[1];
var x2 = data[2];
//要素の数だけ列挙する
```

これらを分割代入によって下記のようにまとめることができる。

```script.js
let data = [56,40,26,82,19,17,73,99];
let [x0,x1,x2,x3,x4,x5,x6,x7] = data;

console.log(x0);//56
console.log(x7);//99
```
一度変数に入れてから代入（分割代入）する。

分割代入では右辺の配列が個々の要素に分解されて、それぞれ対応する変数に代入される。代入先の変数も配列のようにブラケットでくくること。


###[...]演算子(スプレッド演算子)を利用することで、個々の変数に分解されなかった残りの要素をまとめて配列として切り出すことも可能。

```script.js
let data = [56,40,26,82,19,17,73,99];
let [x0,x1,x2, ...other] = data;

console.log(x0);//56
console.log(x1);//40
console.log(x2);//26
console.log(other);//[82, 19, 17, 73, 99]
```

###変数の入れ替え
分割代入を利用することで、変数の値を入れ替えることもできる。
従来であれば、いずれかの変数をいったん別の変数に退避させる必要がある。

```scipt.js
let x = 1;
let y = 2;
[x,y] = [y,x];

console.log(x,y);//2,1
```
[Swift] ブロックの後ろについてる()はなに


最近SwiftでiOSアプリの開発をし始めたので、`The Swift Programming Language`を読みつつ、OSSなライブラリやアプリを見つけてはソースを読んで参考にしていました。
そんな時によく出ててくる表現としてこんなものがあります。

```swift
class Player {
    
    static let defaultPosition: Position = {
        let x = arc4random()
        let y = arc4random()
        return Position(x, y)
    }()
    
}
```
これを見た時に、乱数でできた座標を持つ`Position`のインスタンスを返してくれる、ということはわかります。ただ、最後の`()`はなんだったっけとなってしまいました。

結論から言うとこれはクロージャーを用いた表現になります。
例えば`Position`インスタンスを返すだけのクロージャーは以下のように書くことができます。

```swift
static let createPosition = { () -> Position in
    let position = Position()
    return position
}
```
これを使って先ほど`defaultPosition`を初期化すると以下のようにします。

```swift
static let defaultPosition: Position = createPosition()
```

これでは初期化するために`createPosition`を定義しなければならないので、無名のクロージャーを使うとこうなります。

```swift
let defaultPosition: Position = { () -> Position in
    let position = Position()
    return position
}()
```

つまり問題になっていた`()`は無名クロージャーを実行するための記号だったということになります。


定数の初期化時になにかしらの処理を行うようなことをしたい場合には、こういう書き方で実現できるのでよく出てくる表現だと思います。

ちなみに`let`は定数宣言なので、以下のように`computed property`のような書き方をするとコンパイルエラーとなってしまいます。

```swift
class Player {
    
    let defaultPosition: Position {
        let x = arc4random()
        let y = arc4random()
        return Position(x, y)
    }
    
}
```
memo Oracle pdb

Oracle12c起動してログインするまでの手順をすぐに忘れるので備忘録

```terminal
$ # OS ログインする権限があることを確認
$ id 
uid=xxxx(oracle) gid=yyyy(oinstall)...
$
$ # Oracleのプロセスが起動していないことの確認
$ ps -ef | grep -i ora 
...
$ 
$ # SID がセットされていることを確認
$ echo $ORACLE_SID
orcl
$ 
$ # sqlplus の起動
$ sqlplus /nolog
SQL> 
SQL> -- sys でアイドルインスタンスに接続
SQL> conn / as sysdba
接続されました。
SQL> 
SQL> -- Oracle起動
SQL> startup
...
SQL> exit
$ 
$ # Oracleのプロセスが起動していることを確認
$ ps -ef | grep -i ora
$ 
$ # PDB の起動
$ sqlplus / as sysdba
SQL> show con_name
CON_NAME
------------------------------
CDB$ROOT
SQL> 
SQL> -- PDB の一覧を取得
SQL> select PDB_ID, PDB_NAME, STATUS from DBA_PDBS;
    PDB_ID PDB_NAME        STATUS
---------- --------------- ---------
         4 PDB1            NORMAL
SQL> 
SQL> -- PDB の起動/接続
SQL> alter pluggable database PDB1 open;
SQL> alter session set container = PDB1;

セッションが変更されました。

SQL> show con_name
CON_NAME
------------------------------
PDB1

```

PDB に sys 以外のユーザで接続するにはリスナーを経由する必要がある。
辞書の値のアクセス（dot access to dictionary fields）

こんにちは。
"[A better Python object for JSON take 2](https://nelsonslog.wordpress.com/2016/01/10/a-better-python-object-for-json-take-2/)" を見ますと、辞書の値をアクセスする方法について書かれていました（下記ソースのようにアクセスできます）。なお同様なものが作られ、昔から話題になっているようです：

* [addict](https://github.com/mewwts/addict)
* [easydict](https://pypi.python.org/pypi/easydict/)
* [dotmap](https://pypi.python.org/pypi/dotmap/)

> 1. Dot access to fields instead of []

```python
>>> from easydict import EasyDict as edict
>>> x = edict({'cos':1})
>>> x
{'cos': 1}
>>> x['cos']
1
>>> x.cos
1
```

```python
>>> x['sin']
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
KeyError: 'sin'
>>> x.sin
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
AttributeError: 'EasyDict' object has no attribute 'sin'
```
SOFT SKILLSざっくりまとめ

↓今回は下記の本のまとめ記事です

[SOFT SKILLS　ソフトウェア開発者の人生マニュアル|ジョン・ソンメズ (著), 長尾 高弘  (翻訳), まつもとゆきひろ (監修)](https://www.amazon.co.jp/SOFT-SKILLS-%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E9%96%8B%E7%99%BA%E8%80%85%E3%81%AE%E4%BA%BA%E7%94%9F%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB-%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%BB%E3%82%BD%E3%83%B3%E3%83%A1%E3%82%BA-ebook/dp/B01GDS0994)

今月からプログラマーとしてのキャリアがスタートするので
参考に購入。
話題になってて気になって読んでみたんですが
色々参考になったので,そのメモです。


#ポモドーロ
タスク管理において
1)25分間集中して取り組み
2)その後5分休憩
を1ポモドーロという単位で計算する。
こうすることで「今日はこれに○ポモドーロ,それに△ポモドーロ作業しよう」「今週は~~ポモドーロ作業しよう」といった感じでタスク管理を効率化できる。習慣化も容易になる。

#kanbanFlow
[KanbanFlow](https://kanbanflow.com/)
ポモドーロを行うのに適したサービス。
タスク管理表に加えて
ポモドーロタイマー(25分計測)があるので
とても良さげ

#BufferでSNS対策
ついつい見てしまうSNS。
iPhoneの言語をアラビア語にして見づらくして対処したりもアリですが
一度に複数のSNSに投稿できる[Buffer](https://buffer.com/)を使えば
頻繁にSNSをチェックしたりする習慣を無くせそう
ちなみに筆者は作業の集中を途切らせないため
週に1時間以内だけSNSに書く内容をまとめて考えて
あとは全部予約投稿しているらしい。
[Unity5 x Xcode8] itune connectにアップロード中にInvalid Image Path

# 問題

Unity5からiOS用のプロジェクトを出力→Xcodeでarchive作成しitune connectにアップロード中に、

> ERROR ITMS-90032:“Invalid Image Path - No image found at the path referenced under key 'CFBundleIcons':AppIcon40x40”

![90099-unity-problem.jpg](https://qiita-image-store.s3.amazonaws.com/0/29775/efa4fb9c-9f6d-7d39-08a3-0566c46f0adb.jpeg)

のようなメッセージが出る。

# 原因

指定のアイコンファイルがない。
Unityから出力してくれるはずなのだが、なぜか一部が空っぽ。

# 解決方法(暫定)

Info.plistに手動で実在するアイコンパスを記入。

<img width="461" alt="Info_plist3.png" src="https://qiita-image-store.s3.amazonaws.com/0/29775/9b19cda4-8de5-4dfe-0300-d5254e5fee24.png">

これでアップロードは通るようになったが、Unityから出力するたびに、このinfo.plistを書き換えないといけない...
根本解決、求む(*_*)
itune connectにビルドをアップロード後にThe app's Info.plist must contain an NSCameraUsageDescription key...というメールが届いた時

# 問題

ビルドをitune connectにアップロードして、"Upload Successful!"と出て安心していたら、
直後に以下のようなメールが届いていました。

> Missing Info.plist key - This app attempts to access privacy-sensitive data without a usage description. The app's Info.plist must contain an NSCameraUsageDescription key with a string value explaining to the user how the app uses this data.



# 原因

iOS10からカメラや連絡先を使用する場合は、その理由をinfo.plistに記入しないといけないとのこと。

# 解決方法

info.plistのPrivacyの欄に、指摘されたキーと理由を書きます。
理由は「this app uses camera」とかでOKぽい。

<img width="448" alt="Info_plist2.png" src="https://qiita-image-store.s3.amazonaws.com/0/29775/c669cda5-2dee-a7d8-aefe-55ea05f8c7a2.png">


## Unityの場合

自分の場合Unity5でiOSビルドした時に発生しました。
cameraとか使ってないんだけどな、、

Unityの場合Player settingの↓の欄に理由を記入すればOK。
そうすればビルド時にinfo.plistに反映されます。

<img width="303" alt="Unity_5_5_2f1__64bit__-_LoginScene_unity_-_hug-wedding-mobile-viewer_-_Android__OpenGL_4_1_.png" src="https://qiita-image-store.s3.amazonaws.com/0/29775/b3667fc2-cd23-eaee-f8e2-be76185cca52.png">

LocationやMicrophoneの警告が出た場合も同様に、このPlayer settingの該当欄を埋めればOK。
macにSSH鍵を移植

新しく買ったmacにSSH鍵を移植するための方法をメモ代わりに記事にしました

# 手順
1. homeディレクトリの直下に.sshディレクトリを作成  
  `mkdir .ssh`
2. .sshディレクトリに移植したいssh鍵を移動
3. .sshディレクトリとssh鍵の権限の変更  
  `chmod 700 ~/.ssh`  
  `chmod 600 ~/.ssh/*`
4. sshコマンドを使って接続  
  `ssh -i ~/.ssh/秘密鍵 ユーザ名@ipアドレス`  
  -i で用いる秘密鍵を宣言

# 補足
sshコマンドでユーザ名とipアドレスを毎回タイプするのが煩わしく思う人はconfigファイルを作成することで簡単に接続することができる  
以下に雛形を記述しておく
## 設定
.sshディレクトリの下にconfigファイルに雛形をコピーペーストし編集

``` text:config
Host hg
  HostName ipアドレス
  User ユーザ名
  IdentityFile ~/.ssh/秘密鍵
```
## 接続方法
Hostで指定した名前でsshに接続
`ssh hg`


# 参考資料
- [WindowsのputtyからmacのターミナルにSSHの秘密鍵を移行してログインするまで](http://tanaka8.com/2012/11/putty-terminal-ssh-privatekey/)
- [ssh公開鍵認証設定まとめ](http://qiita.com/ir-yk/items/af8550fea92b5c5f7fca)
- [SSHの鍵認証設定](http://qiita.com/gotohiro55/items/36a22516de2b381b3c6e)
僕なりのフロントエンド開発環境2017年版

2016年版を書いてからもう1年もたってさらに古くなってきたので、今の環境に合わせてバージョンアップ
[僕なりのフロントエンド開発環境2016年版 - Qiita](http://qiita.com/koh110/items/83cb29f8ecc2738ea8bb)
[僕なりのフロントエンド開発環境2016年版v2 - Qiita](http://qiita.com/koh110/items/f6ecbdc03093675a9527)
https://github.com/koh110/minjsapp

# 2016年版からのバージョンアップ点
* webpackをv2に
* vendor.jsの切り出しかたをgulpからwebpackに
* gulpfileにあったwebpackのconfigをwebpack.config.jsに切り出し
* 環境変数にパスを切り出し

## webpackをv2に
webpackのv2がついにリリースされたので移行。
古い環境はどんどんとおいていかれるのでなるべく早めにやったほうが最終的な移行コストは低くなると思います。

## vendor.jsの切り出し方をgulpからwebpackに
今までは依存するライブラリ（jQueryなど）はgulp-concatでファイル連結していました。
webpackで依存関係を保ちながらvendor.jsだけ分割できるというのは知っていましたが、当時webpackが本当に本流になるかは読めなかったので、必要最小限のタスクに留めようと思いgulp-concatにしていました。
逆に1年経った今ではgulp v4リリースの兆しも見えなくなり、こっちの依存を最小限にするべきだと判断しました。

webpack内に内包されているCommonsChunkPluginというのを使うと勝手にお互いのファイルの依存関係を判断してファイルを出力してくれます。
下記の例でいくとvendor.jsにjqueryの内容を出力して、app.jsはvendor.jsに吐き出されたjqueryを利用するようになります。

```webpack.config.js
  entry: {
    app: `${__dirname}/app.js`,
    vendor: `${__dirname}/vendor.js`
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor']
    })
  ]
```

```vendor.js
require('jquery/dist/jquery.min.js');
```

```app.js
const $ = require('jquery/dist/jquery.min.js');

const txt = $('.hello').text();
console.log(txt);
```

## gulpfileにあったwebpackのconfigをwebpack.config.jsに切り出し
webpackが出始めた頃はまだwebpackがなくなるリスクがあると思っていました。（Browserifyが台頭する可能性など）初めてみた人がwebpackを使っていることを意識しなくてすむような形にしようと考えました。
また、これは今も完全には解決してないですがディレクトリ直下に謎のファイルが増えすぎるのは好きではないです。
今はもう十分一般化されたと思うので逆に切り出した方が理解しやすくなるという判断で今回は切り出しました。

## 環境変数にパスを切り出し
gulpfileの中にwebpackのconfigを入れるメリットは、成果物を吐き出すパスを入れた変数などを共有できるとかもありました。
しかし、今回はwebpack.config.jsを切り出すと決めたので、それぞれにnpm scriptで呼び出すときに環境変数としてパスを渡す仕様にしました。

```package.json
  "scripts": {
    "start": "SRC_PATH=./app DIST_PATH=./dist gulp",
    "build": "SRC_PATH=./app DIST_PATH=./dist gulp build",
    "lint": "gulp lint"
  },
```

```gulpfile.js
const path = require('path');
const SRC_PATH = path.resolve(process.env.SRC_PATH);
const DIST_PATH = path.resolve(process.env.DIST_PATH);

gulp.task('html', () => {
  return gulp.src(`${SRC_PATH}/index.html`)
    .pipe(gulp.dest(DIST_PATH));
});
```

```webpack.config.js
const path = require('path');
const DIST_PATH = path.resolve(process.env.DIST_PATH);

module.exports = {
  output: {
    path: DIST_PATH
  },
...
};
```

webpackを使おうがgulpを使おうが基本的にnpm scriptsにまとめるというのはやったほうがいいです。
今回のようにビルド方法のコマンドの内容が変わった時にも同じコマンドのまま修正ができるし、npm scriptsに書いたコマンドはnode_modulesにインストールしたものを利用してくれるので、webpackのバージョンがv1 -> v2に上がっても自分のグローバルにインストールしたものとかぶらずにすみます。

# まとめ
今回はほとんどwebpackのバージョンアップ対応だけですみました。
少しフロントエンドのタスクの環境も落ち着いてきた気がします。
年々gulpはただnodeのmoduleを呼び出すだけになり依存するものを減らしていくのが特徴になりつつあります。
全部npm scriptsにまとめりゃgulpいらないじゃんという声もありますが、タスク同士の依存関係とかを書くのにはまだgulpが楽かな、というのとnpm scriptsが散乱しがちなのでそれをgulpfileにまとめるメリットはあると僕は思います。
疎結合にするというのは健全な道だと思いますが、逆に複雑度が増していってとっつきづらくなっているのはなんとかならんもんかなぁと思いました。
初めての Scrapy+LINE BOT+AWS lambda（ポプテピピックの更新通知BOT）

ポプテピピックの最新話を通知してくれるLINE BOTを作ったよ！
→ [ここから実際に使えます](https://line.me/R/ti/p/%40bqy3622a)

ソースコードは[Github](https://github.com/hiroga-cc/pptp_scrapy_line_notify)にあります。

※私が勝手に作った非公式botです。竹書房様、大川ぶくぶ先生は無関係です。
※もし問題があればすぐに停止します。

## 目次
1. 何を作ったか？
2. どうして作ろうと思ったか？
3. どうやって作ったか？
4. 参考にさせていただいた記事
5. 今後の展望


## 何を作ったか？

1. Scrapy Hubで更新情報をゲット → dynamodbに格納 → lambdaからLINE BOT APIを叩く
2. Webhookでユーザのメッセージを受信 → AWS API Gateway → lambdaでランダム返信を作成 → LINE BOT APIを叩く


## どうして作ろうと思ったか？

* AWSとLINE BOT APIを使ってみたかった。
* 会社の勉強会でScrapyを教わったので、復習がしたかった。
* ポプテピピックの最新話がいつ更新されているのか分からなかったので、通知システムが欲しかった。


## どうやって作ったか？

アーキテクチャーはこんな感じです。

1.更新通知機能
![0406.PPTP_architecture01-2.png](https://qiita-image-store.s3.amazonaws.com/0/96286/64b538bd-e2e2-cf30-c21e-0aff323cbafa.png)

2.ランダム返信機能
![0406.PPTP_architecture02-2.png](https://qiita-image-store.s3.amazonaws.com/0/96286/0da2b40a-e0b0-f0d4-e396-96e6fa4e1118.png)


### 苦労したところ
* つなぎが大変
  Scrapyからdyanamodb, lambdaからLINE BOT APIなどなど...
  偉大な先人のQiitaと、github/gistで見つかったコードの切れ端に大いに助けられました。
　-> つなぎ込みの処理だけgithubにアップしている人もいる！まずは探して、可能なら拝借しよう！
  
* 初めてのnode.jsが大変
  非同期処理、コールバック、アロー関数...
  普段使わない概念がたくさん出てきて大変。でも勉強になりました。
  
* テストが大変
  疎通確認をするのにもインターネット経由（bot作りのの宿命...?）
  毎回統合テストちっくなので、バグ混在箇所を探すのが大変
  -> まずはcurlを使おう！


## 参考にさせていただいた記事
* Scrapyの使い方とか
http://blog.mudatobunka.org/entry/2016/12/18/205833
* ScrapyからAWSの接続。この記事がなかったらできませんでした！
http://qiita.com/imunew/items/0786fd5c9255d4c9a18c
* LINE BOTとAWSの接続
http://dev.classmethod.jp/cloud/build-line-bot-api-using-lambda/


## 今後の展望
いずれLINE BOTでもクリエーターズスタンプを使えるようになるのかしら...?
その暁にはこのBOTからポプテピのスタンプを送りたい所存。
Dockerfileで任意の引数を受ける(--build-args)


# 目的
Dockerでコンテナイメージをビルドする環境の都合上、
同一Dockerfileを使いながら内部のパラメータを変更したいことがある。
そんな事象にどうやって対応するかを説明。

# 前提

- Ubuntu 16.04.1
- Docker 1.13.0

# 概要
Dockerfileの中でARG句(?)を用いることで
--build-argによる設定を受け付けられるようにでき、
コンテナイメージをビルドする際に任意のパラメータを含めることができる。



# 具体例

```text:Dockerfile
FROM busybox:latest
ARG REPO="www.example.com"
RUN echo $REPO
```

ARG REPOの部分で、REPOにwww.example.comを与えている。
何もせずにビルドするとwww.example.comの文字列が表示される。

ARG REPO='www.example.com'の部分で、REPOのデフォルトの値として
www.example.comを指定している。

```bash:--build-argを指定せずにビルド
$ sudo docker build -t arg_sample:default .
Sending build context to Docker daemon 2.048 kB
Step 1/3 : FROM busybox:latest
 ---> 00f017a8c2a6
Step 2/3 : ARG REPO="www.example.com"
 ---> Running in e79c545c3047
 ---> 2ec3517ca6c3
Removing intermediate container e79c545c3047
Step 3/3 : RUN echo $REPO
 ---> Running in cde7f37ccdb7
www.example.com
 ---> aba88a71e772
 ```
 
 では、次に--build-argでREPOに対して値(www.example.**org**)を入れる。
 
 ```bash:--build-argを指定してビルド
 $ sudo docker build -t arg_sample:arg_given --build-arg REPO='www.example.org' .
Sending build context to Docker daemon 2.048 kB
Step 1/3 : FROM busybox:latest
 ---> 00f017a8c2a6
Step 2/3 : ARG REPO="www.example.com"
 ---> Using cache
 ---> 2ec3517ca6c3
Step 3/3 : RUN echo $REPO
 ---> Running in bbcd61d682ac
www.example.org
 ---> 3e540692c9ff
Removing intermediate container bbcd61d682ac
Successfully built 3e540692c9ff
 ```
 
echo $REPOの部分で、www.example.**org**が表示されている。
FreeBSDでBrotherのプリンタMFC-8520DNに印刷できるようにする

# linuxulatorの準備

Brotherが用意しているドライバはLinux用のバイナリなので、linuxlatorを動かしておく必要があります。既に動いている場合はスキップしてください。

emulators/linux_base-c6 をインストールしておきます。c7でもいいかもしれませんが、試していません。

```
# pkg install linux_base-c6
```

必要かどうかわかりませんが（将来必要になるかもしれないので）、インストール時に（あるいは `pkg info -D linux_base-c6` で）出力されるメッセージどおりに /etc/fstab に設定しておきます。

/etc/rc.conf に次の1行を加えます。

```
linux_enable="YES"
```

# CUPSの準備

まあいろんなアプリから設定をいじりつつ印刷するなら、CUPS一択でしょう。既に動いている場合はスキップしてください。

printer/cups と printer/cups-filters をインストールしておきます。さらに、CUPSについてくる`lp*`系コマンドも使いたいことがあるので、/usr/bin にあるオリジナルが実行されないようにしておきます。

```
# pkg install cups cups-filters
# chmod 000 /usr/bin/lp*
```

標準的なプリンタドライバを全部入れておきたい場合は print/foomatic-db なども入れておくといいかもしれません。

/etc/rc.conf に次の1行を加えます。

```
cups_enable="YES"
```

# 再起動

それぞれ、手動でも動かせますが、めんどくさいのでサクッと再起動しておきます。

# ドライバの入手とインストール

http://www.brother.co.jp/ から、ソフトウェアダウンロード → レーザー複合機 → MFC-8520DN → Linux (rpm) に進みます。

ここで、「LPRプリンタードライバー」と「CUPSwrapperプリンタードライバー」をダウンロードします。

/opt あたりに展開して、/usr/local に必要なファイルをシンボリックリンクで持ってくるのがよいでしょう。`tar`はrpmなども展開できるのでとても便利ですね。

```
# tar xf <downloaddir>/mfc8520dnlpr-3.0.0-1.i386.rpm -C / ./opt
# tar xf <downloaddir>/mfc8520dncupswrapper-3.0.0-1.i386.rpm -C /
# ln -s /opt/brother /usr/local/share/cups/model/.
# ln -s /opt/brother/Printers/MFC8520DN/cupswrapper/brother_lpdwrapper_MFC8520DN /usr/local/libexec/cups/filter/.
```

# プリンタの登録

ブラウザで http://localhost:631/admin/ にアクセスすると、CUPSの設定ができます。設定変更等には、途中で認証を求められますが、rootとそのパスワードを入れます。

Administration → Add Printer に進みます。

Discovered Network PrintersにMFC-8520DNが含まれているはずなので、それを選択します。ただし、プリンタ側で設定したNode Name（http://(printer)/net/wired/nodename.htmlで設定、http://(printer)/net/net/net.htmlで確認）が /etc/hosts に入っている必要があります。/etc/hosts を変更したくない場合は、LPD/LPR Host or Printerを選択して次のページで`lpd://<ipaddress>/BINARY_P1`を入力してください。

その次に進んで、プリンタ名、説明、設置場所を設定します。このプリンタ名（Name）だけは変更できません。変更するには、削除して追加するしかありません。

次のページで、ModelとしておそらくBrother MFC-8520DN for CUPSが選択されているはずですので、Add Printerで登録完了です。

# デフォルトオプションの設定

登録さえしてしまえば各種アプリから好きなオプション設定で印刷できるようになります。しかし、CUPS未対応アプリやlprを直接使いたい場合はオプション設定できないので、そのデフォルトを設定しておく必要があります。

Administration → Manage Printers と進んで、目的のプリンタを選びます。

Administration と書かれたプルダウンメニュー（上のAdministrationとは別。ややこしい）からSet Default Optionsを選びます。

次のSet Printer Optionsのページで、General を開くと、印刷オプションがいくつかあるので、好みに設定します。長辺綴じ両面印刷→DuplexNoTumble、遅いけど高解像度→1200dpiなどです。