OmniAICreator/Qiita-1.07M huggingface dataset:
VS Code で Javaプログラムをデバッグ実行してみる

月一ペースで怒涛のごとく進化を続ける[Visual Studio Code](https://code.visualstudio.com/)(以下VS Code)だが、最近、Javaのデバッグ実行ができるようになったらしいので、試しにやってみる。

# 必要なもの
- Visual Studio Code
    - 今回は1.17.2を使用。
- Java Development Kit
    - 今回は1.8を使用。
- Javaアプリケーションプロジェクト
    - Maven/Gradle/Eclipseのいずれか。
    - 今回はMavenプロジェクトを使用。

# 手順
## VS Codeを起動

## 拡張機能`Java Extention Pack`をインストールする
- 拡張機能ビューを開く(Ctrl+Shift+X or ⇧⌘X)
- 入力欄に`java pack`とか入力して、`Java Extention Pack`を探す。
- `インストール`をクリック
- インストールが終わったら`再読み込み`をクリック
- なお、`Debugger for Java`と`Language support for Java for Visual Studio Code`も一緒にインストールされる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/72d775ff-6da3-c1ab-a9ac-c5410178bb53.png)

## Javaプロジェクトを開く
- 実行させたいJavaプロジェクトをVS Codeで開く。
- この時、「Java runtime could not be located」と怒られたらJDKの設定を行う。怒られなかったら先に進む。

## JDKの設定
- ユーザー設定の画面を開く(Ctrl+, or ⌘,)
- 入力欄に`javahome`と入力すると設定項目`java.home`が見つかる。
- `java.home`の左横に表示されるペンのアイコンをクリックし、「設定にコピー」をクリックすると、右側に編集可能な設定がコピーされるので、自分の環境のJDKのパスを記入して保存する。
- VS Codeを再起動するか、プロジェクトを一旦閉じて再度開き直す。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/b10d01ce-fd73-86bd-d249-4faff48128e4.png)

# 実行
- デバッグビューを開く(Ctrl+Shift+D or ⇧⌘D)。
- ビュー上部の歯車アイコン（launch.jsonを開く）をクリックし、「Java」を選択。
- .vscode/launch.jsonファイルが作られ、プロジェクト内の実行可能なクラスごとに設定を自動的に作ってくれる。
- 実行したいクラスを切り替えたい場合は、デバッグビュー上部にあるリストボックスで選択する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/824b5c44-1d3b-bef0-4045-f023ad2e5ae5.png)

- F5を押してデバッグを実行させる。
- 動いた！
実行結果はデバッグコンソールに表示される。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/4f26ad92-942b-a9f3-6460-385e99e639a7.png)

- ブレークポイントは行番号の左横をクリックすると付く。
- 再度F5で実行するとちゃんと指定箇所で処理が止まり、左側に変数の値も表示される。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/ca341436-444f-ee4b-5881-bc305e4f3b42.png)

- SpringBootとかもちゃんと動くし、ちょっとした調査とか動作確認程度だったらIDEAとかじゃなくてこっちでも良さそう。

# 使っていて気になったこと
- resourcesフォルダ配下にxmlとかの設定ファイルを置いている時、それらのファイルを更新してもビルドが行なわれない。プロジェクトを読み込み直すと反映される。
- とりあえずは設定ファイルを修正したタイミングで同時に何らかのjavaファイルも更新することで手動対応。
JUnit5を利用するためのGradle設定

GradleでJUnit5を利用するための`build.gradle`サンプル。

- リポジトリ
  - [Gradle + JUnit5 + Java9 Template Project](https://github.com/seijikohara/gradle-junit5)

```groovy:build.gralde
buildscript {
    ext {
        junitPlatformVersion = '1.0.1'
        junitJupiterVersion = '5.0.1'
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath "org.junit.platform:junit-platform-gradle-plugin:${junitPlatformVersion}"
    }
}

repositories {
    mavenCentral()
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'idea'
apply plugin: 'org.junit.platform.gradle.plugin'

compileTestJava {
    sourceCompatibility = targetCompatibility = 9
    options.compilerArgs += '-parameters'
}

dependencies {
    // JUnit Jupiter API and TestEngine implementation
    testCompile "org.junit.jupiter:junit-jupiter-api:${junitJupiterVersion}"
    testRuntime "org.junit.jupiter:junit-jupiter-engine:${junitJupiterVersion}"

    // To avoid compiler warnings about @API annotations in JUnit code
    testCompileOnly 'org.apiguardian:apiguardian-api:1.0.0'

    // Only needed to run tests in an (IntelliJ) IDE(A) that bundles an older version
    testRuntime "org.junit.platform:junit-platform-launcher:${junitPlatformVersion}"
}

task wrapper(type: Wrapper) {
    gradleVersion = '4.2.1'
    distributionType = Wrapper.DistributionType.ALL
}
```

- 参考
  - [junit-team/junit5-samples](https://github.com/junit-team/junit5-samples/tree/r5.0.1/junit5-gradle-consumer)
CentOS 7にSqlServerをインストールする



記事作成日:2017/10/24

必要に迫られて、CentOS 7にSQL Serverのインストールを行った。
（MySQLやPostgreSQLに比べると、SQL Serverの参考サイトは少ないな。。。何でだろう）

幾つかのサイトを参考にさせて頂いたが、
最新版は微妙にコマンドが変わっている様なので、記録しておく。
結局は、本家サイトを参照にした。
下記を一字一句違わずに(?)入力すればインストールできるはず。


## 最初にCentOSを起動する
 起動してください。はい。


## 本体（mssql）のインストール

```
#sudo curl -o /etc/yum.repos.d/mssql-server.repo https://packages.microsoft.com/config/rhel/7/mssql-server-2017.repo
#sudo yum install -y mssql-server
#sudo /opt/mssql/bin/mssql-conf setup
	2:Developer (free, no production user rights)
	pass : ************
#systemctl status mssql-server

ポートを開く
#sudo firewall-cmd --zone=public --add-port=1433/tcp --permanent
#sudo firewall-cmd --reload
#firewall-cmd --list-all
```

https://docs.microsoft.com/ja-jp/sql/linux/quickstart-install-connect-red-hat
https://dev.classmethod.jp/server-side/db/get-started-sql-server-on-linux/


## ツール(mssql-tools)のインストール

```
#sudo su
#curl https://packages.microsoft.com/config/rhel/7/prod.repo > /etc/yum.repos.d/msprod.repo
#exit
#sudo yum remove unixODBC-utf16 unixODBC-utf16-devel
#sudo yum install mssql-tools unixODBC-devel
	y
	YES
	YES
#sudo yum check-update
#sudo yum update mssql-tools

#echo 'export PATH="$PATH:/opt/mssql-tools/bin"' >> ~/.bash_profile
#echo 'export PATH="$PATH:/opt/mssql-tools/bin"' >> ~/.bashrc
#source ~/.bashrc
```

https://docs.microsoft.com/ja-jp/sql/linux/sql-server-linux-setup-tools

## ローカル接続

筆者の場合は、VM上にインストールしたので、
localhsotだと接続できななかった（それが原因かは分からないが）。
ipアドレスは、ifconfigで確認する。
ipは動的に変わる。

```
	#cd /root
	#ifconfig
	#sqlcmd -S 192.168.***.*** -U SA -P '<YourPassword>'
```

## 接続後

PASS変更
```
sqlcmd -S <host> -U <user> -P <current-password> -Z <new-password>
```

DB指定
```
use <database-name>;
go
```

DB一覧を表示する
```
select name from sys.databases;
go
```

DB作成
```
create database <database-name>;
go
```

DB削除
```
drop database <database-name>;
go
```

DB名変更
```
USE master;  
GO  
ALTER DATABASE DbNameBase  
Modify Name = DbNameNew ;  
GO  
```


TBの一覧を表示する
```
select name from sysobjects where xtype = 'U';
go
```

TB作成
```
CREATE TABLE 表 ( 列1 データ型 制約 ,列2 データ型 制約 );
go
```

TB削除
```
DROP TABLE 表;
go
```

TB定義表示
```
sp_help テーブル名
```

PK定義表示
```
sp_pkeys @table_name = N'****';
go
```

追記
SQL Serverって、エンコードがややこしい。
UTF-8を使用する場合は、クオテーションの前にNを付けるって何？
N"moji"
クエリが変わってしまう(T T)
【備忘録】sass の変数、配列、マップ（連想配列的な？）


## 変数

```sass
// 変数hogeに色セット
$hoge: rgb(255,255,255);

// 使うときは↓こう
a {
    background-color: $hoge;
}
```

変数名の頭には `$` を付ける。
`=` ではなく、 `:` で値代入。

## 配列

```sass
// 変数itemsにカンマ区切りで複数指定
$items: itemA, itemB, itemC, itemD;

// 使うときは↓こう
@each $item in $items {
    .#{$item}-bg {
        background: url(./img/#{$item}_bg.png) 0 0 no-repeat;
    }
}
```

## マップ（連想配列的な？）

マップはsass **v3.3** から実装された機能のようです。

```sass
// マップ（テーマカラーセット）を準備
$theme-colors: (
  primary: #ffffff,
  secondary: #cccccc,
  success: #28a745,
  info: #aaaaaa,
  warning: #ffc107,
  danger: #dc3545,
  light: #f8f9fa,
  dark: #343a40
);

// 使うときは↓こう（単体利用）
a {
    background-color: map-get($theme-colors, 'primary');
    color: map-get($theme-colors, 'dark');
}

// 使うときは↓こう（each利用）
@each $key, $color in $theme-colors {
	.#{$key} {
		background-color: $color;
	}
}
```
Android - Launch Mode

# 1. standard
Always create a new instance.

# 2. singleTop
This mode just only search instance on the top in the task stack. If instance already existed, then reused it. If not, then create a new instance.

# 3. singleTask
This mode will search task stack(each app had their own task stack). If instance existed, then used it and pop other upper instances in the task stack.

# 4. singleInstance
Instance is always at the top of the task stack and it is the only one in the whole task stacks(all apps task stacks).

https://stackoverflow.com/questions/3219726/android-singletask-or-singleinstance-launch-mode?noredirect=1&lq=1
https://stackoverflow.com/questions/23033550/difference-between-singletask-and-singleinstance
https://hit-alibaba.github.io/interview/Android/basic/Android-LaunchMode.html
http://ascii-iicsa.blogspot.tw/2011/07/activity-androidlaunchmode.html
【iPhone X対応】Safe Area外の上下領域にコンテンツを配置

# はじめに
初心者向けに記述しております。
ご了承ください。

対象：Xcode9

# やりたいこと
<img width="1792" alt="Screen Shot 2017-10-24 at 11.06.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/128344/066d1728-1517-f264-f327-315ba3fa36fa.png">
今回はContainerViewを用いた例で説明を行いますが、UIViewのみを使用した場合も同じように対応することができます。上記画像では、UIViewControllerにContainerViewを設置し、UIViewの色をピンクに設定しています。なお、コード側には何も手を加えていません。
初期状態ではSafe Areaの下側が表示されていません。上記画像のガイド線を見るとわかると思います。

<img width="1680" alt="Screen Shot 2017-10-24 at 11.07.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/128344/97cb1bcc-4a62-108f-9852-fd90974be897.png">
実際にiPhone XのSimulatorで起動すると、Safe Areaの下側までViewが表示されていないことがわかると思います。そこで、**Safe Areaの下側までUIViewが表示されるように変更したい**と思います。

# 解決策
<img width="1792" alt="Screen Shot 2017-10-24 at 11.08.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/128344/7041d542-e54e-7822-efc0-1ebe0762d2ab.png">
上記画像の、赤枠部分でiPhone Xサイズを選択するとStoryboard上のUIもiPhone Xのものに切り替わります。

<img width="1680" alt="Screen Shot 2017-10-24 at 11.08.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/128344/967aae4a-a0fc-cc97-972b-9bb505c9c02e.png">
切り替えを行うと、Safe Areaの下側まで表示されるようになるので、コンテンツを下まで引き伸ばし、~~制約をアップデートします~~。Containerを利用する場合はContainerView側を上記のように変更します。
**【追記】この場合、制約をSafe Areaに対してつけてはいけないので、アップデートを使わず手動で制約をつけ直したほうがいいです。**

<img width="1680" alt="Screen Shot 2017-10-24 at 11.08.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/128344/f71d1683-a65a-829d-1b00-e2bcfc7a110f.png">
すると、上記画像のようにiPhone Xの全画面にUIViewが表示されるようになりました。
なお、Safe Area外のデザインに関してはガイドラインに従う必要があります。アプリのリリースを検討している方は、Apple公式のガイドラインに一度目を通しておきましょう。
Front-End-Checklist (個人的な)補足メモ

[Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist) の[日本語訳](https://qiita.com/miya0001/items/8fff46c201bf9eaeba4a#%E7%9B%AE%E6%AC%A1)を読んで、補足っていうか自分の知らなかったものとか、あれ?これなんだっけ??ってのを まとメモ

## Head
### ・X-UA-Compatible
制御パラメータを利用して古いブラウザの機能をエミュレートさせることができる。
content=”IE=edge”はIEの最新バージョンの標準モードで表示するという設定。

### ・Description
ページの内容をあらわす概要を記述する。
検索結果のスニペットで使われる事がある。

### ・Canonical
複数の重複 ページが存在している場合に、 検索エンジンに優先させるべき ページを伝えることでそれ以外のページは重複 ページであることを伝える事ができる。

#### なぜ URLの正規化が必要か

1. どれを インデックスに登録するか判断できない
1. リンクポピュラリティが分散する

などがある

### ・Noopener
target="_blank" で外部リンクを使用する際、rel="noopener" 属性をつけて Tabnabbing 脆弱性を防ぐ。

#### Tabnabbing 脆弱性
スクリプトにより非アクティブのタブ上のページを偽のページに書き換え、ユーザがそのタグに移動したとき、偽のページを利用してパスワードなど情報を盗み出す。


## JavaScript
### ・Modernizr
[modernizr.js](http://modernizr.com/)というJavaScriptのライブラリ。
閲覧者のブラウザがどのような機能をサポートしているかをチェックして、HTMLタグにサポート状況を判別できるクラスを付与し、その結果を記録したmodernizrグローバルオブジェクトを生成してくれる。

閲覧者の使用しているブラウザごとに判別してクラスを付与して、追加されたクラスを使うことで、ブラウザの対応状況に応じたCSSを記載することができるようになる。
たとえばcanvasが利用可能な場合は「canvas」とクラス名を付与する。canvasが利用できない場合は、頭にno-がついた機能名、「no-canvas」 というクラス名を付与する。

### ・ESLint
JavaScript のための静的検証ツール。
コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立つ。

#### 特徴
- すべての検証ルールを自由に on/off できる
- 自分のプロジェクトに合わせたカスタムルールを簡単に作れる
- 豊富なビルトイン ルール (4.0.0 時点で 247 個) に加えて、たくさんのプラグインが公開されている
- ECMAScript 2015 (ES6), 2016, 2017 を標準サポートしている
- JSX 記法 をサポートしている
- Babel と連携することで、仕様策定中の新しい構文や Flow 型注釈にも対応できる

参考：[ESLint 最初の一歩](https://qiita.com/mysticatea/items/f523dab04a25f617c87d)

## セキュリティ
### ・Content Type Options
`X-Content-Type-Options: nosniff`
ファイルの内容からファイルの種類を決定できないようにするヘッダフィールド。
Content-typeを’text/plain’と指定した場合には指定通り
テキストとしてと表示されるようになる。
これによってクロスサイトスクリプティング(XSS)が防止できる。

### ・X-Frame-Options (XFO)
iFrameを使って他のサイトから自分のサイトが読み込まれないようにするヘッダフィールド。
クリックジャッキングを防ぐ。
#### クリックジャンキングとは
悪意のあるサイト上の特定箇所をクリックさせ、他のサイトの設定情報を変更させること。
他のサイトは、iframeを使って読み込まれた上で、視覚的に見えなくしてある。

参考：[HTTPレスポンスヘッダによるセキュリティ対策
](https://qiita.com/mint__/items/a4039d3cc659959d9231)

## 用語以外


>Cookie size: もし Cookie を使用しているなら、4096 バイトを超えていないこと、20以上の Cookie を使用していないこと。

これは知らんかった...Cookie関連(キャッシュとか諸々)まだ知らんことが多い...(｡ŏ﹏ŏ)
[Drupal7]複数のタグで検索可能なフォームを設置する

#実装したい機能
・タクソノミーのタームをチェック項目として配置し、複数のタグ検索が可能
・ヘッダーにフォームを設置し、サイト内全てのページから検索が可能


##Viewsでページを作成する
1) + Add new view
2) View name [Taxonomy Sort] -> Create a page : on / Create a block : off -> Continue & edit
3) フォーマット、FIELDSはお好みで設定
4) FILTER CRITERIA -> Add 検索に利用したいタクソノミーのフィールドを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135373/38e65c6f-49cb-d3c3-10ba-ae8e9a29ae42.png)

5) Expose this filter to visitors, to allow them to change it　にチェック
6) Filter type to expose -> Grouped filters
7) ターム名をラベルにしてVALUEで同じものを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135373/5bfbf923-d279-e27d-c955-951ed3ad004c.png)

##ブロックでフォームを独立して表示する
1) 先ほど作成したViewsの設定
EXPOSED FORM -> Exposed form in block　を「はい」に
Exposed form style -> 基本　リセットボタンの表示などここで設定
OTHER -> Machine Name 名前をつける（ここでは[taxsort]）
2) Blockモジュールの設定
先ほど保存したViewsが[Exposed form: sort-taxsort]として表示されるので、表示させたいブロックを選択

##Grouped filtersチェック時にAllow multiple selectionsを選択するとラジオボタンにならない
Views -> Configure filter criterion
Filter type to expose : Grouped filtersを選択
Allow multiple selectionsを選択
....ウィジェットタイプをRadiosにしてもセレクトタイプで表示されるよ！の問題解決

/modules/views/handlers/views_handler_filter.inc  LINE748

```
$form[$value]['#type'] = 'select';
を以下に変更
$form[$value]['#type'] = 'checkboxes';
```
※参考
https://drupal.stackexchange.com/questions/84617/views-grouped-filters-turns-radiobuttons-into-select
Swift3でタプルの配列をソートする

忘れそうなのでメモ

通常の配列のソートについては以下を参照
[[iOS8] Swiftで配列をソート（昇順・降順・逆さま）する方法](https://qiita.com/hiroo0529/items/5a5064d353fffa5867c6)

# 例

例えばこんな感じにnameとdistanceの二つのタプル配列があったとする

```
var List:[(name:String,distance:Int)] = [
    (name:"A",distance:13),
    (name:"B",distance:43),
    (name:"C",distance:1),
    (name:"F",distance:53),
    (name:"E",distance:53),
    (name:"D",distance:53),
]
```

これをdistanceの昇順に並べる際には

```
List.sort { (A, B) -> Bool in
            return A.distance < B.distance
        }
```
このAとBについては変更可能で、第一引数が前の値、第二引数が後ろの値に対応していると考えてsortに条件式を書いていく
そのあとに「.タプルの要素名」で扱う

ただしこのコードで並べ換えると以下のような並びになる
![スクリーンショット 2017-10-24 11.49.45.png](https://qiita-image-store.s3.amazonaws.com/0/204184/773ce9b6-95c2-31fa-91df-da14c5ac650c.png)

これを見るとdistanceが53であるDEFの三つはnameの昇順で並び替えて欲しくなるので次のように複数の条件でソートさせた

```愚直に書くと.sort
List.sort { (A, B) -> Bool in
    if A.distance == B.distance {
        return A.name < B.name
    }else if A.distance < B.distance{
        return true
    }
    return false
}
```
![スクリーンショット 2017-10-24 11.53.00.png](https://qiita-image-store.s3.amazonaws.com/0/204184/8fd7014e-a9b2-4dc5-7015-15247466c876.png)

これでOKのはず・・・
ただfalseを忘れるとエラー吐いてコンパイル通らないので注意
なので「return 条件式」で書くといいかもしれない

```同じ内容でreturn条件式書き.sort
List.sort { (A, B) -> Bool in
    if A.distance == B.distance {
        return A.name < B.name
    }
    return A.distance < B.distance
}
```

以上です。
[メモ]WindowsでElectronで開発し、ffiを立ち上げるまで

一度開発して起動・パッケージ化までできていたのに、ファイル軽量化のためにnode_modulesとpackage.json等をまるごと削除してインストールしなおそうとしたら、node-ffiのインストールさえ出来なくなってしまったため忘備録。

結論から言うとここに書かれてている内容を上から順番にやったら成功した。
それぞれのコマンドの意味はいろんなページで細かく書いてる人がいるためここでは書きません。
コマンドでググれば出てくるんじゃないかな（てきとう）

---

```
npm init
npm install electron
```

このタイミングで作成された
package.jsonに以下を追記・書き換えする。

```js:package.json
{
//~~色々書いてある
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}
```

そしたらセーブして保存。
またターミナルを起動して以下のコマンドを順番に入力

```
npm install //←いらないかも
npm config set msvs_version=2015
npm install node-gyp
npm install ffi
```

やっとffiの導入は完了。
しかし起動するとまだエラーを吐いたため以下の処理も追加

```
npm install ref
npm install electron-rebuild --save-dev
.\node_modules\.bin\electron-rebuild.cmd
```

ここまでやってやっと終了です。お疲れ様でした。
git shellにhistory機能を追加する

# git shellにhistory機能を追加する(Windows)
`Github for windows`をインストールするとついてくる`git shell`、パワーシェルを使用しているはずが再起動するとコマンド履歴がリセットされてしまう。

## 環境

 - windows 10
 - git shell
 
## 原因
windows 10ではdefaultでインストールされているはずの`PSReadLine`が読み込まれていない。これはシンタックスハイライトやキーバインドを管理したりするコンソール拡張のモジュールらしい。もちろんコマンド履歴保存機能もある。

https://github.com/lzybkr/PSReadLine

## PSReadLineをインストールする
[PowerShellGet](https://docs.microsoft.com/ja-jp/powershell/gallery/psget/get_psget_module) がインストールされていない場合は先にインストールしておく。

```
Install-Module PSReadline
Import-Module PSReadLine
```

終わり。

## おまけ
power shellでは`.bash_profile`はないが似たようなものはある。
```
C:\Users\xxx\AppData\Local\GitHub\PoshGit_xxxxxxxxxxxxxxxxxxxxxxx\profile.example.ps1:
```
がgit shell独自で読み込まれるもので、追記するとシェル起動時に実行される。
JavaのMapでValueからKeyを逆引き

JavaのMapが双方向じゃないので、KeyからValueを取り出す事はできても逆にValueからKeyを取り出すことができない。
なんかそれ用のリスト型のライブラリもあるっぽいけど、うまいやり方はないものか…

```Java
Stream.of(fooMap)
    .takeUntil(fooItem -> fooItem.getValue() == targetValue)
    .findLast().get().getKey();
```

Lightweight-Stream-API使ってこう書いてやってるけど、これがあってるのかどうかもよくわからない。
というかできればO(1)で探したいんだけど…やっぱり逆向きのMapを作ってやるしかないのかなあ？
MATLABでのベクトルのシャッフル


## 基本
```matlab:shuffle.m
vec = [5,7,9]
shuffled_vec = vec(randperm(length(vec)))
```

## seedを決めるとき

```matlab:shuffle.m
vec = [5,7,9]
seed = 42
rng(seed)
shuffled_vec = vec(randperm(length(vec)))
```
node-sassでnode-sass-globbingを使う時の設定方法

# node-sass-globbingとは

node-sass-globbingを使うと
globパターンを使えるようになるので

scss内で
`@import "hoge/*.scss";`
↑の用に記述するとhogeフォルダ内のscssファイルを全て見てくれるようになります。

main.scssなどのファイルを作り

```
// =====================================
// common
// =====================================

@import 'common/*.scss';

// =====================================
// variables
// =====================================

@import 'variables/*.scss';

// =====================================
// pc/foundation
// =====================================

@import 'foundation/*';
@import 'pc/foundation/*';
```
このように設定するとscssファイルが増えても修正する必要がないのでとても便利です。

gulpでの使い方はよく見ますが
https://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34
（gulpの場合はこちらの記事がすごくわかりやすいです）

npmでの使い方があまり載ってなかったので自分用のメモも兼ねています。

# 必要なパッケージをインストール
ひとまずnode-sassは必須なのでインストールします
`npm i node-sass --save`

そしてnode-sass-globbingもインストールします
`npm i node-sass-globbing --save`

インストール後package.jsonに記述をします。

# package.jsonの記述方法

package.jsonのscriptsに以下の用に追加します。
```
"scripts": {
    "build:sass": "node-sass --importer node_modules/node-sass-globbing/index.js -o 書き出すフォルダ/styles
  }
```
node-sassに--importer node_modules/node-sass-globbing/index.jsを
追加することでnode-sass-globbingが使えるようになります。
Homebrewで古いバージョンのdylibにswitchする

``mpv``を使おうとすると

```
dyld: Library not loaded: /usr/local/opt/jpeg/lib/libjpeg.8.dylib
  Referenced from: /usr/local/bin/mpv
  Reason: image not found
Trace/BPT trap: 5
```

# /usr/local/opt/jpeg/libを見ると

バージョンが上がっている

```
drwxr-xr-x 5 yukpiz admin    170 10 24 11:19 .
drwxr-xr-x 9 yukpiz admin    306 10 23 11:17 ..
-r--r--r-- 1 yukpiz admin 207280 10 23 11:17 libjpeg.9.dylib
-r--r--r-- 1 yukpiz admin 276744  1 17  2016 libjpeg.a
lrwxr-xr-x 1 yukpiz admin     15  1 17  2016 libjpeg.dylib -> libjpeg.9.dylib
```

# 古いバージョンが手元に残っているか調べる

8dが残っている

```bash
$ brew info libjpeg
jpeg: stable 9b (bottled)
Image manipulation library
http://www.ijg.org
/usr/local/Cellar/jpeg/8d (19 files, 713.8KB)
  Poured from bottle on 2016-12-16 at 19:52:28
/usr/local/Cellar/jpeg/9b (20 files, 725.2KB) *
  Poured from bottle on 2017-10-23 at 11:17:58
From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/jpeg.rb
```

# 8dに切り替える

```bash
$ brew switch libjpeg 8d
Cleaning /usr/local/Cellar/jpeg/8d
Cleaning /usr/local/Cellar/jpeg/9b
17 links created for /usr/local/Cellar/jpeg/8d
```

# 9bにも戻せます

```bash
$ brew switch libjpeg 9b
Cleaning /usr/local/Cellar/jpeg/8d
Cleaning /usr/local/Cellar/jpeg/9b
17 links created for /usr/local/Cellar/jpeg/9b
```

# 参考

https://qiita.com/honeniq/items/778cc08d2db78e6774d8
jQueryで開いた要素の外をクリックしたら閉じる処理

jQueryで開いた要素の外をクリックしたら閉じる処理を作ったのでメモ。

```
<div class="_trigger">表示</div>
<div class="_target" style="display:none;">クリックしたら表示される要素</div>

$('._trigger').on('click', function(){
    $('._target').show();

    $(document).off('click.outsideclose').on('click.outsideclose', function(ev) {
        if (
            $(ev.target).closest('._trigger').length
            || $(ev.target).closest('._target').length
        ) return;
        $('._target').hide();
    });
});

```
API ConnectでAPIキーを生成する方法

# はじめに

API Connectでは、APIキーを用いてアクセス制御を行うことが可能です。このAPIキーを生成する方法としては、以下の2通りの方法があります。

1. 開発者ポータルでAPIキーの生成

開発者ポータルでAPI利用者がセルフサービスでAPIキーを生成します。


2.API ManagerでAPIキーの生成


API利用者が少数で開発者ポータルを用意しない場合など、API管理者がAPIキーを生成させることができます。

以下では、2通りの方法について記述します。

# 前提
IBM API Connect v5.0.8.0, IBM DataPower Gateway v7.6.0.2 の組み合わせ(オンプレミス環境)で動作を確認しています。

# 1. 開発者ポータルでAPIキーの生成
利用するAPIの存在する開発者ポータルに、API利用者でログインします。メニューの「アプリケーション」を選択します。アプリケーションでは、APIを利用するアプリケーションを登録します。「新しいアプリケーションの作成」をクリックします。
![スクリーンショット 2017-10-24 10.33.34.png](https://qiita-image-store.s3.amazonaws.com/0/121209/364c1d1d-f7e9-135d-45bc-e51c900e0901.png)

アプリケーションに必要な情報を入力し、「送信」ボタンをクリックします。
![スクリーンショット 2017-10-24 10.37.05.png](https://qiita-image-store.s3.amazonaws.com/0/121209/d172ac6e-74f7-9ac9-693e-893988d12090.png)

送信が完了すると、APIキー(クライアントID、クライアント・シークレット)が生成されます。文字列については、それぞれ「クライアント・シークレットの表示」「表示」チェックボックスにチェックを入れると確認できます。クライアント・シークレットは、この画面で一度しか確認できません。どこかに保存するなどが必要です。忘れた場合は、図下にある「リセット」を押すとリセットすることが可能です。
![スクリーンショット 2017-10-24 10.38.49.png](https://qiita-image-store.s3.amazonaws.com/0/121209/d4500f06-454d-4d8f-9250-ea174ad03370.png)

開発者ポータルでAPIキーを生成する方法は以上です。

# 2. API ManagerでAPIキーの生成
API Managerにログインし、ダッシュボードで該当APIが公開されているカタログを選択します。「コミュニティー」タブをクリックします。左メニューに開発者組織、アプリケーション、サブスクリプションが確認できます。この画面で、開発者組織、アプリケーション、サブスクリプションの管理が可能です。
![スクリーンショット 2017-10-24 11.12.24.png](https://qiita-image-store.s3.amazonaws.com/0/121209/c0665f54-a148-22aa-84d9-afa6e01cdd82.png)

「アプリケーション」を選択し「追加」をクリックします。必要な情報を入力し、「追加」をクリックします。
![スクリーンショット 2017-10-24 11.16.47.png](https://qiita-image-store.s3.amazonaws.com/0/121209/13102df6-fc70-e240-10e1-1e151f32861b.png)

画面下にAPIキー(クライアントID、クライアント・シークレット)が生成されていることが確認できます。
![スクリーンショット 2017-10-24 11.17.58.png](https://qiita-image-store.s3.amazonaws.com/0/121209/657bc126-6997-377b-eec2-e716cf3dccf2.png)

以上で、API ManagerでAPIキーを生成する方法は終了です。
ubuntuにAIDEをインストール

## インストール

* 参考: [SqueezeにAIDEを導入 - labunix の ラボゆにっくす](http://d.hatena.ne.jp/labunix/20130413)
* aide.wrapper を使うのが気が付かなかった。

```sh:
sudo apt install -y aide

# 20分くらいかかる。/var/lib/aide/aide.db.new が生成される。
sudo aide.wrapper --init

# 手動でdbをコピー
sudo cp -a /var/lib/aide/aide.db.new /var/lib/aide/aide.db

# 変更されたファイル確認 (initと同じく時間かかる)
sudo aide.wrapper -C
```

ログ: /var/log/aide/aide.log


## エラー例

```sh:aide.wrapperを使わなかった時のエラー
$ aide --init
/var/lib/aide/please-dont-call-aide-without-parameters/aide.db.new
```


```sh:一般ユーザーで実行したエラー
$ aide.wrapper --init
dotlockfile: /var/run/aide.lock: permission denied
cannot obtain lock /var/run/aide.lock, stale lock?
```
ISUCON7参加記録とふりかえり #isucon

## ISUCONとは

> ![ISUCON7](http://isucon.net/parts/logo.png)
> お題となるWebサービスを決められたレギュレーションの中で限界まで高速化を図るチューニングバトル、それがISUCONです。過去の実績も所属している会社も全く関係ない、結果が全てのガチンコバトルです。 
> [ISUCON公式ブログ](http://isucon.net/archives/50188676.html)

## チーム

バナナマンさんというチームで去年と同じメンバーで参加。
去年の参加記録　[ISUCON6参加記録とふりかえり](https://qiita.com/asflash8/items/3a4e99861db34a42b586)

役割も大きく変わらず

- ぴろ：DB周り担当
- ちゃんまー：アプリ改修担当
- 自分：インフラ・ミドルウェア・プロファイリング担当、時間があったらアプリ

言語はGoも候補にあったけど慣れているRubyで。

## 今回のお題

チャットアプリケーション。だけど画像配信をいかに捌くかが肝のシステム。

## 結果

本戦出場にはまったく手が届かず・・・:cry:

| 初期スコア | icon静的化| N+1解消| 複数台化+インデックス付与 | ベスト | 最終スコア |
|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|
| 4097 | 12438 | 15558 | 23297 | 29758 | 27279 |


今回は全体順位も公開されていて、それによると407チーム中143位。
http://isucon.net/archives/50961437.html

自分たちの位置がわかるのはとてもありがたいです。運営のみなさんの配慮に感謝

## タイムライン

以下私の視点での記録。チームメンバーの視点は以下からどうぞ。

[ISUCON7に参加したのでその雑記](https://qiita.com/yamamoto_hiroya/items/ce31e8aaf5d1ab4fa291)

### 事前準備

去年のISUCON参加記事を読んだり、[夏期講習](http://isucon.net/archives/50648750.html)を見たりといった感じ。

### 当日

9:30にオフィスに集合するも、開始が遅れたのでよいクラを3人で視聴しつつ、レギュレーションを読んだり役割分担を確認したりして過ごした。

- 13:13〜14:30
    - ssh周りやアプリケーションコードをbitbucketに移したり、データのバックアップを一応取ったり。この辺は慣れてきた
    - 計測ツールの導入（kataribe,pt-query-digest,newrelic）。今回はNewRelicを入れてアプリケーション全体のパフォーマンスが見えるようにしてみた。便利
    - 初期状態（Python参考実装）でベンチ：7263、結構高い！ここで瞬間最高1位！
    - ![スクリーンショット 2017-10-21 13.53.07.png](https://qiita-image-store.s3.amazonaws.com/0/1823/d6e3f542-34b5-f475-1cbe-f9b573baae3e.png)

    - Rubyに切り替えてベンチ：4097。まあこんなもんかなと言う感じ
- 14:30〜15:30
    - 自分は計測ツールを一通り入れ終わったので/iconsに取り掛かることに
    - プロフィール画像をDBにバイナリで持っていて、毎回SQLで取得していたのでindexを貼る。これで1台構成でも4000台に。
       - `ALTER TABLE image ADD INDEX idx_image_name(name);`
    - その後DB内のデータをファイルに書き出しで12438！ここまでは調子が良かった・・・
- 15:30〜17:00
    - 初期データのみファイルに書き出していたので新規登録時もファイルに書き出す実装に取り掛かるもベンチが通らない・・・結局原因つかめず
    - 新規は諦めて/iconsに来たときになければファイル作成に修正
    - アプリ担当がN+1を修正
- 17:00〜18:00
    - DB担当がmessageとhavereadにindexを付与（19904）
    - 2台構成に戻す（23297）
    - ここから何をすればいいかわからず迷走しはじめる
- 18:00〜20:00
    - /fetchの`sleep 1`を外してみるも効果なし
    - /iconsのファイル書き出しを新規登録時に再チャレンジするもうまくいかず・・・すみませんすみません。
    - 今回インデックスを貼って以降DBがボトルネックになっていなそうだったので放置していたDBの設定を見直すも効果なし
    - ベンチガチャで29000台を出すもその後有効な手を打てず
    - 上位チームは40万とか出ててどうなってんの？と言ってた気がする
- 20:00〜終了まで
    - アプリ担当がキャッシュで改善のためRedis導入を試みるも効果がでるところまではたどり着かずフィニッシュ


## ふりかえり

### Good

- 役割分担はいい感じだった
- オリジン弁当美味しかった
- 瞬間最高1位！！！
- 初動はだんだんスムーズになってきた
- NewRelic++

### Bad

- 計測ツールを活かせていない
- 修正ポイントを見つけるまではいいが実装が遅い
- ローカル環境を全員分整備すればよかった
- キャッシュするための知識不足（HTTPのヘッダー：Cache-Controlとか）
- アプリケーションの分析が足りず自分のところばかり見てた
- nginxの設定の素振りが必要だった（去年も言ってた気がする）

## まとめ

今年も本戦出場には遠く及ばなかったけど、年に1度エンジニアとしての腕試しに参加できて楽しかったです。運営のみなさん本当にお疲れ様でした！

できたこと、できなかったことをふりかえって（普段の仕事にも活かしつつ）去年の自分よりは成長しているようにがんばっていこうと思えた一日でした。
javascript 文字列を数字に変換する


# `Number()`は数字文字列以外が来たとき、NaNが返る
最近まで**文字列→数字は`Number()`使えばいいかな**と思っていましたが、よくよく調べてみるとあまりよろしくないことがわかった。
理由は**数字以外が来たとき、NaNが返る**ということ。

```js
Number('94');    // 94
Number('94aba'); // NaN
```

バグって動かなくなってしまう可能性が残るのは怖い。
他にいい方法がないか調べた。


# newは選択肢に無し
```js
var hoge = new Number('49')
```
これでも数字になるんだけど、newを使わなくても他に選択肢があるし、型がオブジェクトになってしまうので無し。

# 暗黙の型変換は選択肢に無し
```js
'100' - 0; //100
```
結構これしている記事を見かける。
文字列に文字を足したら暗黙的に数字になるというやつ。
ちょっといいかなーと思ったけど、動作が速い遅い関係無く

* ぱっと見て何しているのか分からない。
* コメントが書かれていて初めて「これは数字に変換する方法の１つなのか」ってわかるのはダメ。
* そもそも暗黙の型変換なのでバグの元になる

っていう理由で無し。

# 今回の結論
`parseInt`と`parseFloat`を使い分けるのがいいかなという結論。

```js
parseInt('9.4', 10);    // 9
parseFloat('9.4');      // 9.4
parseFloat('94aaas2');  // 94
```


`parseFloat`って書くのが長い？面倒？

* バグを防ぐ
* コードがわかりやすい

以上の2点から、僕はparseInt,parseFloatを使おうと思います。←こちらに関してはコメントを頂いて考えを改めました。
xampp 複数インストール時の覚え書き

XAMPPインストール時、すでに `C:\xampp` に別バージョンのxamppをインストールしていたのでディレクトリを `C:\xampp_php7` としたら正常に動作しませんでした。

シェルを開いて `$ php -v` を実行すると一部モジュールのロードに失敗していた。
`php.ini`の設定を確認するとモジュールのインクルードディレクトリが`\xampp`のままになっていたのが原因の模様。
`php.ini`の各設定ディレクトリを修正したらモジュールロード失敗は解決されたけど他ファイルも修正が必要みたいなので一度アンインストールしてインストールディレクトリを`C:\php7\xampp`にすることで正常にインストールできた模様。。

とりあえず、インストールディレクトリは`xampp`にしておかないといけないのか不明ですが、今後はそうしておこうかと。
Python Chainerを初めた時の問題解決

本来Chainerは `pip install chainer` のコマンドのみで簡単に始められるはずなのですが、
初めで躓いたのでその原因を紹介します。

##問題点

```
/System/Library/Frameworks/Python.framework/Versions/2.6/bin/python2.6 /Users/ユーザー名/PycharmProjects/Chainer/test.py
Traceback (most recent call last):
  File "/Users/ユーザー名/PycharmProjects/Chainer/test.py", line 2, in <module>
    import chainer
ImportError: No module named chainer

Process finished with exit code 1
```

```test.py
import numpy as np
import chainer

x1 = chainer.Variable(np.array([1]).astype(np.float32))
x2 = chainer.Variable(np.array([2]).astype(np.float32))
x3 = chainer.Variable(np.array([3]).astype(np.float32))

z = (x1 - 2 * x2 - 1)**2 + (x2 * x3 - 1)**2 + 1
print(z)
```

python  version 3.6.3
`pip install chainer` 済み

##原因1つ目
Pythonを参照するPATHが間違っていた。

```
>>> pyenv versions
  system
* 3.6.3 (set by /user/local/...)  
>>> python -V
Python 2.7.5
```

pyenvでもデフォルトのPython2.x系ではなく、3.6.3を指定されていますが、
括弧の中の参照しているpathに問題がありました。 (誤っていた頃のpathを忘れてしまいましたが、 `.pyenv` を参照していなかったら問題です。)

##解決策

```
>>> vim .zshrc

下記3行を追加
export PYENV_ROOT=“$HOME/.pyenv”
export PATH=“$PYENV_ROOT/bin:$PATH”
eval “$(pyenv init -)”
```

自分の環境のshellがzeshなので、`.zshrc` を編集します。
`$HOME` pathの直下に `.pyenv` を指定してください。
Pythonのバージョンは.pyenv下で管理しているからです。

```
>>> pyenv versions
  system
* 3.6.3 (set by /Users/ユーザー名/.pyenv/version)
>>> python -V
Python 3.6.3
```

正しく.pyenv下のpathを参照されていて、これで問題なく実行出来る。

**しかし上記のエラーコードが消えない…**

##原因2つ目
問題の1行目

```
/System/Library/Frameworks/Python.framework/Versions/2.6/bin/python2.6 
```

ここのpathが間違っている。すなわち自分の今使用している統合開発環境PyCharmの参照しているpythonのpathが誤っている。

##解決策
PyCharm > Preferences(⌘,) > Project Interpreter
参照しているpathを `.pyenv` 下のpythonに指定してあげる。
![スクリーンショット 2017-10-24 9.43.25.png](https://qiita-image-store.s3.amazonaws.com/0/168714/2a11622e-e663-b7d1-41bf-d49206397664.png)



これで上記のエラーが消え問題なく実行できた！！

##まとめ
今回の問題を経て、Pythonのインストール自体は簡単であるが、
PATHの指定などどこにインストールしているのかや、pyenvの役割等を理解せずに進めてしまうと問題に陥ってしまうため、
プログラミング初心者には少々難しいのかなと感じました。
Google検索結果の広告をCSSで消す

Google検索の結果の頭の方に出てくる広告、間違えてクリックしませんか？
私はよくします。

なので、これらを消すCSSを考えました。

広告類は、`id`が`taw`というdiv要素の子要素なので（2017年10月24日現在 horihiro調べ）、こいつをまとめて`display: none;`にしてしまいます。

```CSS
#taw {
  display: none;
}
```

これだけです。
実行するにはStylishなど、自前のCSSを追加適用できる拡張機能を使いましょう。
ボリューム名からドライブレターを取得する


## FilterGetDosNameを使う。

### コード
```
wchar_t driveLetter[15] = { 0 };
//ボリューム名
wchar_t volumeName = L"¥¥Device¥¥HarddiskVolume3";

FilterGetDosName(volumeName, driveLetter, sizeof(driveLetter) / sizeof(WCHAR));
printf("%ls",driveLetter); // >> D:
````

### 参考
```
https://msdn.microsoft.com/en-us/library/windows/hardware/ff540492(v=vs.85).aspx
```
Clojureで.cljファイルを作るときにやらかした件について

# 問題
Clojureで、clj-test.core空間を作るために、clj-test.cljを作成したところ、leinにめっちゃ怒られた。

# 解決
clj-test.clj をclj_test.cljに、 名前空間をclj-test.coreに変えると上手く行きます。

# 原因
パッケージ名のハイフンをエラーにしてしまうのはjava の仕様らしいです
debian9でgym_torcs

#概要
debian9でgym_torcsやってみた。
インストールしてみた。

#写真

![Screenshot from 2017-10-24 07-35-01.png](https://qiita-image-store.s3.amazonaws.com/0/18104/368c1e78-4eaf-7ef6-3548-3fb1fafb39c8.png)

#環境
debian-9.0.0 amd64
python 3.5
tensorflow 1.2.1

#ダウンロード
https://github.com/ugo-nama-kun/gym_torcs

#準備
./configureする。
エラーが出るので、ライブラリーを入れる。
apt-get install

```
xautomation
freeglaut3-dev
libplib-dev
openal-dev
libalut-dev
libxi-dev
libxmu-dev
libxrender-dev
libxrandr-dev
zlib1g-dev
libpng-dev

```

#コンパイル
makeする。
エラーを吐く。
isnanが無いと言う、無いはず無いので、std::isnanにする。

#インストール
make install
make datainstall


#動作確認
torcs

以上
KotlinとSparkでWebアプリケーション②（パラメーターを受け取る編

# 検証環境
この記事の内容は、以下の環境で検証しました。

* Intellij IDEA ULTIMATE 2017.2
* Kotlin 1.1.4-3
* Spark 2.6.0
* Gradle Projectで作成

# 目標
送られてきたパラメーターを受け取る

# 今回の流れ
* パラメーターを受け取る２つの方法
* 実装
* 実行
* まとめと次回の予定

# パラメーターを受け取る２つの方法

パラメーターを受け取るには２つの方法がある。
パスパラメーターかクエリーパラメーターで受け取る。

パスパラメータはURLの一部をパラメーターとして取得する。
クエリーパラメーターはURLの末尾に付与した「?名前=値&名前=値」の「名前」を指定して取得する。


# 実装
## ソースの全貌

```kotlin:SparkSample.kt
package jp.co.casareal.kotlin_spark

import spark.Spark.get

fun main(args: Array<String>) {
    get("/hello") { request, response -> "Hello World!" }
    get("/bye") { request, response -> "Bye!" }

    get("/parameter/:name"){
        request, response ->
        val age = request.queryParams("age")
        val name = request.params("name")


        "query param={name:${name},age:${age}}"

    }
}
```

## パスパラメーター
### 設定方法
パスパラメータの設定はgetメソッドやpostメソッドの引数に設定するURLに記述する。

```kotlin
get("/parameter/:name"){・・・省略・・・}
```
「:パラメータ名」で設定する。
上記の設定では、「http://localhost:4567/parameter/taro」 でアクセスすると、「taro」が取得できる。
### 取得方法
パラメータを取得するには、HttpServletRequestオブジェクトのparams関数を呼び出す。
引数に設定したパラメータ名を指定する。


```kotlin
val name = request.params("name")
```

## クエリーパラメーター
### 取得方法

「http://localhost:4567/parameter/taro?age=25」 でアクセスした場合、パラメータ名はageです。
取得するにはqueryParams関数でパラメータ名を指定して取得する。

```kotlin
val name = request.params("name")
```

# 実行

実行して下記にアクセスします。パラメータが表示されれば成功！

```text
http://localhost:4567/parameter/taro?age=25
```
![スクリーンショット 2017-09-29 17.00.19.png](https://qiita-image-store.s3.amazonaws.com/0/99960/e6fa0e27-bc41-4417-d5b5-35759a595e03.png)



# まとめと次回の予定
パラメータの取得方法はいたって簡単！


この時点では日本語に対応出来てないので、次回は、文字コードの設定を行う！
無限リスト的な何かをGoで

Goで無限リスト(遅延リスト)的なものが欲しくなった。

前提：channelとgoroutineは使わない方針。

クロージャ使うとこんな感じ。

```go
func nums() func() int {
	var n int
	return func() int {
		n++
		return n
	}
}
```

https://play.golang.org/p/nz4Z_wga71

値と一緒に次の値を返す関数を返すならこんな感じ。

```go
type nums func() (int, nums)

func newNums(n int) nums {
	return func() (int, nums) {
		return n+1, newNums(n+1)
	}
}
```

https://play.golang.org/p/aYQYnimA71

前者のほうがシンプルに見えるけど、後者のほうが変に状態を状態を持たなくて良さそう。

struct作ってメソッド生やしてってやるのもいいけど、高階関数と多値返せることを活かしてなるべく純粋に書こうと心がけてる。
はじめてのKotlin:高階関数の定義と利用

# 高階関数とは
　関数を引数や戻り値に取るような関数は、**関数に関数を積み重ねている** 事から、建物の2階建て、3階建て構造に見立てて高階関数(Higher Order Functions)といいます。

+ 英語表記を直訳するとおおよそ **ハイレベルな関数呼び出し** となりますが、日本語訳の建物の比喩の方が個人的にはわかりやすいと感じます

## Kotlinの高階関数
　Kotlinでも高階関数をサポートしています。関数は第１級オブジェクト(1st object)としてあつかうことができます。

## 第１級オブジェクトができること
　ここで、第１級オブジェクトは以下のようなことができます。

- 無名関数、すなわち関数リテラルとして表現できます
- 変数に代入することができます
- 関数の引数に渡すことができます
- 関数の戻り値として返すことができます

　ここでは高階関数のコード例をもとにして高階関数の定義と利用方法についてかんたんに説明します。

### 関数リテラルとは
　関数リテラルとは、関数を **fun** キーワードで定義しないで、直接、波括弧 「{ }」 内に記述する記法です。関数リテラル記法で記述すると、コードが即座にそのまま式として渡せます。この式のことを **ラムダ式** といいます。

　なお、関数リテラルは、関数定義による関数名を持たない無名関数を記述するときにも用います。

# 高階関数の例
　以下の例は、関数 **readList()** の引数に、別の関数 **someFunction()** を与えて定義する例です。

```kotlin:HigherOrderFunc.kt
fun <A>readList(
  members: List<A>, someFunction: (A) -> Unit ) {
  for( person in members ) {
    someFunction( person )
  }
}
 
fun main( args: Array<String> ) {
  val members = listOf(
         "Tom", "Jerry" ,"Bob", "Olibia" )
  val numbers = listOf( 1, 3, 5, 7 )

  readList( members, { member -> println( member ) } )
  readList( numbers, ::println )
}
```
## 実行結果
```
Tom
Jerry
Bob
Olibia
1
3
5
7
```
## 機能
　この関数 **readList()** は、第1引数に与えられた **List** 型のコレクションのメンバーを、第2引数に与えられた関数 **someFunction()** で処理する関数です。

## 処理内容
　関数 **readList()** の処理内容は、第1引数に与えられた **List** 型の要素を順番に取り出して、第2引数に与えられた関数 **someFunction()** に渡して処理しています。

## 引数に与えられた関数の定義
　型パラメータ **<A>** を指定することによって型を規定しています。ここでは型は **A** になるとしています。　

　具体的には、第2引数に与えられた関数 **someFunction()** は引数に型 **A** を取り、戻り値に何も返さない( **Unit** )という定義をしています。

　なお、型 **A** は、関数 **readList()** の第1引数に与えられた **List** 型の要素の型と同じであると定義しています。

### ジェネリクス(型パラメータ)とは
　このコード例ように、関数の引数や戻り値の型を規定する(縛る)ことをJavaではジェネリクス(Generics:総称型)といいます。
　Kotlinが言語仕様を決めるのに参考にしたと言われる関数型プログラミング言語Scalaでは型パラメータと呼ぶことがあります。Kotlinでも同じようにジェネリクスまたは型パラメータというようです。

## 高階関数の利用
　リスト型のコレクションオブジェクトを ファクトリ関数 **listOf()** を用いて定義しています。

　1つ目が文字列をメンバーに持つコレクションの定義です。

　2つ目が整数をメンバーに持つコレクションの定義です。

　これらのコレクションを関数 **readList** の第1引数に与えています。第2引数はこれらのコレクションの要素を引数に持つ **println()** 関数を渡しています。

## 1つ目の関数渡し:ラムダ式
```kotlin
{ member -> println( member ) }
```
　これは、ラムダ式による引数への関数渡しを行っています。ラムダ式は、波括弧 「{ }」 内に記述します。

　このラムダ式の意味は、
>コレクション **members** の各要素が **member** として渡されるので、渡された要素を **println()** 関数で出力せよ！

ということです。

### ラムダ式とは
　ここで、ラムダ式は、上で説明した **関数リテラル** 形式で記述された式のことです。この例のように、関数を波括弧 「{ }」 内に直接記述したものです。

## 2つ目の関数渡し:関数への参照渡し
```kotlin
::println
```
　**println()** 関数への参照を渡しています。高階関数を引数として渡す場合には、このように関数への参照を **::** 記号を関数の先頭に付加します。

　ここで、**println()** や **println** のように関数名のみで **::** 記号を付けないで引数に渡すとコンパイルエラーになりますので注意が必要です。

## Kotlin Playgroudで実行してみましょう

[本記事のKotlin Playgroud　https://pl.kotl.in/Z_gw0x7fM![スクリーンショット 2020-11-07 23.56.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124810/635d0187-8847-6b11-91f4-b2862df1f4d5.png)
](https://pl.kotl.in/Z_gw0x7fM)
GitbookでCSVファイルを表示する

## はじめに

Gitbook便利ですよね。みなさん使ってますか？

Gitbookで設計書とか書く場合に、外から投げつけられた一覧的なファイル(コード一覧とか、処理対象一覧とか、そういう類のやつ）をそのままGitbook上にインポートして表で表示したいことってありませんか？

ということで、CSVファイル(or CSV形式のテキスト)をインポートして表形式で表示するプラグインを作ってみました。

[gitbook-plugin-include-csv](https://github.com/TakuroFukamizu/gitbook-plugin-include-csv)

## 導入方法

他のプラグインと同じです。npmでインストールして `book.json` に追記するだけです。

```sh
$ npm install --save gitbook-plugin-include-csv
```

```json:book.json
{
    "plugins": ["include-csv"]
}
```

## 使用方法

ページ内で、 `includeCsv` タグを使用してください。
`src` にファイル名を相対パスで指定した場合は、ファイルを読み込んで表形式(table)で表示します。

```markdown:page1.md
{% includeCsv src="./train.1.csv" %}{% endincludeCsv %}
```

<img width="794" alt="sample_file.png" src="https://qiita-image-store.s3.amazonaws.com/0/52410/4bbea6cc-e4f6-3778-c45e-9f862b0c13da.png">


タグの中にCSV形式でテキストを記載した場合は、その内容を表形式(table)で表示します。

```markdown:page2.md
{% includeCsv %}
hoge,fuga
a,0001
b,002
{% endincludeCsv %}
```
<img width="788" alt="sample_tagbody.png" src="https://qiita-image-store.s3.amazonaws.com/0/52410/ce84ea5b-276e-13e7-c3f5-0fcfbe4d1bb4.png">

## オプションの使い方

`useHeader` オプションを有効にすると、CSVの1行目を列のヘッダーとして扱います。

```markdown:page3.md
{% includeCsv useHeader="true" %}
c1,c2,c3
1,1,1
2,2,2
{% endincludeCsv %}
```

<img width="804" alt="sample_tagbody_withoption.png" src="https://qiita-image-store.s3.amazonaws.com/0/52410/86fa92c1-6983-f114-5b55-9eb28915110f.png">


`encoding` オプションで文字コードに `shift_jis` を指定すれば、Excel等で作成したShift_JISな日本語CSVファイルも読み込めます。

```markdown:page4.md
{% includeCsv src="./hoge.csv", encoding="shift_jis", useHeader="true" %}
{% endincludeCsv %}
```

<img width="798" alt="sample_file_withoption.png" src="https://qiita-image-store.s3.amazonaws.com/0/52410/c13a5000-8266-dd10-f076-376fbf4cb02b.png">

CSVファイルに列のヘッダーが含まれない場合、`exHeaders` オプションにカンマ区切りで指定することで表示することができます。
また、 `limit` オプションで行の数を指定すれば、指定した件数のみ表示します。

```markdown:page4.md
{% includeCsv 
    src="./train.1.csv", 
    exHeaders="PassengerId,Survived,Pclass,Name,Sex,Age,SibSp,Parch,Ticket,Fare,Cabin,Embarked",
    limit=2 %}
{% endincludeCsv %}
```

<img width="827" alt="sample_exheader_limit.png" src="https://qiita-image-store.s3.amazonaws.com/0/52410/9d64dd2f-e429-cf41-7dd5-593e730cefd2.png">


## まとめ

- 資料とかのCSVファイルを簡単にGitbookに表示できるよ。
- ExcelもCSV変換すれば埋め込めるよ。
- 行数が多くてmarkdownの表のフォーマットがだるい時のエイリアスとしても使えるよ。
- 眠いのでREADMEの方の文章はあとで直すよ。
Java実行時にJVMの情報を出力する（jstat、CentOS）

稼働中のコンピューティングリソースを蓄積・監視することは、機器の状態を確認して障害を事前に防ぐという意味でも、将来の機器拡張計画を立てるという意味でも、安定稼働に凄く効果があると思います。近年OSSのソフトウェアがあったり、簡単に導入できて安価なクラウド蓄積サービスがたくさんできて、導入しやすくなっています。

今回、CPUやメモリといったコンピューティングリソースの中でも、JVMのメモリ使用率の取得と蓄積に焦点を当てたいと思います。JVMはOSから見た場合、起動時に設定したメモリ量を確保しています。JVMはその中で割り当て、解放を繰り返し、確保量に対して空き容量が不足したら、（JVMのパラメータにもよりますが）追加でメモリを確保します。JVMのメモリ利用量の推移を可視化してみます。

JVMのメモリ利用推移を蓄積するソフトウェアはたくさんありますが、今回はjdkに付属しているjstatで出力したいと思います。

**jdkを導入**
最新版を取得していれます

```shell-session
$ curl --header "Cookie: gpw_e24=http%3A%2F%2Fwww.oracle.com%2F; oraclelicense=accept-securebackup-cookie" -OL http://download.oracle.com/otn-pub/java/jdk/9.0.1+11/jdk-9.0.1_linux-x64_bin.rpm
$ sudo rpm -ivh jdk-9.0.1_linux-x64_bin.rpm
$ java -version
java version "9.0.1"
Java(TM) SE Runtime Environment (build 9.0.1+11)
Java HotSpot(TM) 64-Bit Server VM (build 9.0.1+11, mixed mode)
```

**Javaのサンプル**
数十秒の期間JVMを動かすようなプログラム

```java
import java.util.Calendar;
public class Test {
  public static void main(String[] args) {
    System.out.println("start:" + Calendar.getInstance().getTime());
    String ss = "test!";
    try{
      for (int i = 0; i < 1000000; i++) {
        if ( i % 100000 == 0 ) Thread.sleep(2000);
        ss = "test!!";
      } 
    } catch(Exception e) {
      System.out.println("catch");
    }
    System.out.println("end  :" + Calendar.getInstance().getTime());
  }
}
```

**Javaの実行と、jstatの出力**
もう少しヒープの動きが見えるプログラムにした方が良かったかも。

```shell-session
$ java Test
start:Tue Oct 24 03:09:43 JST 2017
end  :Tue Oct 24 03:10:03 JST 2017

$ jstat -gc `pgrep -f java` 2000
 S0C    S1C    S0U    S1U      EC       EU        OC         OU       MC     MU    CCSC   CCSU   YGC     YGCT    FGC    FGCT     GCT   
512.0  512.0   0.0    0.0    4416.0   2954.9   10944.0      0.0     4480.0 1143.5 384.0   82.4       0    0.000   0      0.000    0.000
512.0  512.0   0.0    0.0    4416.0   2954.9   10944.0      0.0     4480.0 1143.5 384.0   82.4       0    0.000   0      0.000    0.000
512.0  512.0   0.0    0.0    4416.0   2954.9   10944.0      0.0     4480.0 1143.5 384.0   82.4       0    0.000   0      0.000    0.000
512.0  512.0   0.0    0.0    4416.0   2954.9   10944.0      0.0     4480.0 1143.5 384.0   82.4       0    0.000   0      0.000    0.000
512.0  512.0   0.0    0.0    4416.0   2954.9   10944.0      0.0     4480.0 1143.5 384.0   82.4       0    0.000   0      0.000    0.000
512.0  512.0   0.0    0.0    4416.0   2954.9   10944.0      0.0     4480.0 1143.5 384.0   82.4       0    0.000   0      0.000    0.000
512.0  512.0   0.0    0.0    4416.0   2954.9   10944.0      0.0     4480.0 1143.5 384.0   82.4       0    0.000   0      0.000    0.000
512.0  512.0   0.0    0.0    4416.0   2954.9   10944.0      0.0     4480.0 1143.5 384.0   82.4       0    0.000   0      0.000    0.000
512.0  512.0   0.0    0.0    4416.0   2954.9   10944.0      0.0     4480.0 1143.5 384.0   82.4       0    0.000   0      0.000    0.000
512.0  512.0   0.0    0.0    4416.0   2954.9   10944.0      0.0     4480.0 1143.5 384.0   82.4       0    0.000   0      0.000    0.000
```

visualVM/java flight recorderなど綺麗に出力できるツールが利用できれば言うことないですが、JMXによるリモート接続が利用できない環境など、手間はかかるものの情報を蓄積する手段として利用できそうです。
Vue.js で d3.jsを使う その1（svgのcircleを表示）

Vue.jsのフレームワークの中でd3.jsを使う場合どうすればいいのか困ったので、メモとして投稿します。
Vue.jsを触ったことのある人、かつd3.jsを触ったことある人を対象にしています。
※ Vue.js v2.5.2 / d3.js Version 4.11.0にて確認
# コード全文

```index.html
<head>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>

  <div id="vue">
    <svg id="circle-001" :width="width" :height="height"></svg>
    <div>r: {{ r }}</div>
  </div>

  <script>
    new Vue({
      el: '#vue',
      data: {
        width: 500,
        height: 500,
        r: 75
      },
      mounted: function(){
        var svg = d3.select('#circle-001');
        this.circle = svg.append('circle')
                          .attr('cx', this.width/2)
                          .attr('cy', this.height/2)
                          .attr('r', this.r)
                          .style('fill','rgba(0, 0, 0, 0.8)')
      }
    })
  </script>

</body>
```

# 結果
<img width="518" alt="スクリーンショット 2017-10-24 2.03.13.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/127527/a4928544-bfc6-dffa-0dcc-df092131cb4a.jpeg">




# コードの解説


## ①まずはライブラリを読み込みます

```html
<head>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
```

ここは説明不要ですね。

## ②svgの表示エリアを作成します
```html
  <div id="vue">
    <svg id="circle-001" :width="width" :height="height"></svg>
    <div>r: {{ r }}</div>
  </div>
```
Vueの支配下に置きたいdiv（#vue）を用意し、その下に円を表示するためのsvgエリアを記述しておきます。
ついでに円の半径px（r）を表示するエリアを作っています。

また、svgエリアはあとでd3からselectできるように「#circle-001」というidを振っています。
svgのwidthとheightは、この後出てくるVueインスタンスのdataである「width」および「height」とバインドします。



## ③Vueインスタンスを作成します

```html
  <script>
    new Vue({
      el: '#vue',
      data: {
        width: 500,
        height: 500,
        r: 75
      },
      mounted: function(){
        var svg = d3.select('#circle-001');
        this.circle = svg.append('circle')
                          .attr('cx', this.width/2)
                          .attr('cy', this.height/2)
                          .attr('r', this.r)
                          .style('fill','rgba(0, 0, 0, 0.8)')
      }
    })
  </script>
```

まずは「el: '#vue'」で「#vue」をVueの支配下に置くことを宣言します。
dataとしてはsvgの横幅、高さ、およびcircleの半径を持つこととします。

さて、「#vue」を完全にVueの支配下に置いたところからd3.jsの出番となります。
「mounted:」で指定した関数は、Vueがelを完全に支配下に置いたタイミングで実行されます。
（参考→ https://jp.vuejs.org/v2/guide/instance.html ）

「mounted」の中に書き慣れたd3.jsのコードを書きましょう。
「mounted」が実行されるタイミングではすでに（「#vue」の子供の）「svg#circle-001」がVueの支配下に置かれていますので、mountedの中の関数から「#circle-001」を呼び出すことができます。
d3.selectで「#circle-001」を選択し、そこにcircleをappendすれば、ブラウザに円が表示されます。
レキシカルスコープ変数の意味とか使い方が良くわからなかったのでメモ

###・失敗例

```php
$message = 'hello';

// "use" がない場合
$example = function () {
    var_dump($message);
};
$example();
```
```
Notice: Undefined variable: message in /example.php on line 6
NULL
```

###・成功例

```php
$message = 'hello';

// useを使う場合、$message を引き継ぎます
$example = function () use ($message) {
    var_dump($message);
};
$example();

// 引き継がれた変数の値は、関数が定義された時点のものであり、
// 関数が呼ばれた時点のものではありません
$message = 'world';
$example();
```
```
string(5) "hello"
string(5) "hello"
```


参考
http://php.net/manual/ja/functions.anonymous.php
csv2json for Python3

# CSV2JSON

## できること
csvファイルのcsvデータをjson形式に変換後、jsonファイルとして保存する。
形式は、ヘッダーにkeyとなる行を作り、2行目からValueデータ。

### 環境
- python3
- iMac (Retina 5K, 27-inch, 2017)
- プロセッサ 4.2 GHz Intel Core i7
- メモリ 64 GB 2400 MHz DDR4
- グラフィックス Radeon Pro 580 8 GB
- macOS High Sierra バージョン 10.13

#### csvデータの内容

```text:csv.csv
zip_code,zip_sub,ad_id,city_kan,zip_id,address_code,prefecture,city,street,prefecture_kan,street_kan
101,1,1101,札幌市中央区,60,600000,ﾎｯｶｲﾄﾞｳ,ｻｯﾎﾟﾛｼﾁｭｳｵｳｸ,ｲｶﾆｹｲｻｲｶﾞﾅｲﾊﾞｱｲ,北海道,以下に掲載がない場合
101,1,1101,札幌市中央区,64,640941,ﾎｯｶｲﾄﾞｳ,ｻｯﾎﾟﾛｼﾁｭｳｵｳｸ,ｱｻﾋｶﾞｵｶ,北海道,旭ケ丘
101,1,1101,札幌市中央区,60,600041,ﾎｯｶｲﾄﾞｳ,ｻｯﾎﾟﾛｼﾁｭｳｵｳｸ,ｵｵﾄﾞｵﾘﾋｶﾞｼ,北海道,大通東
....
...
..
.

```

## Pythonコード

```py:csv2json.py
import csv
import linecache , re
import json
from io import StringIO

def csv2json(csv_File):
	if csv_File[-3:] == 'csv':
		csv_data = open(csv_File)
		out = json.dumps([ rd for rd in csv.DictReader(csv_data)], sort_keys=True, ensure_ascii=False, indent=2)
		jsonfile = open('./tests/csv2json.json', 'w')
		jsonfile.write(out)
		return out

if __name__ == '__main__':
	csv_File = './tests/csv2json.csv'
	csv2json(csv_File)



```

追記予定。
組込型にメソッドチェーンっぽいものを繋げてみる(D, C#, VB.Net, JavaScript, Python3)

よく組み込みのメソッドで付いてる、

```js
(50).toString();
//=> "50"
```
みたいなプリミティブ型から繋げられるチェーンを
D, C#, VB.Net, JavaScript, Python
で試してみた。

## サンプルプログラム仕様
数値*x*に対し、buyメソッドを繋げる。
buyメソッドは数値xの値を2倍にして返すものである。

## D言語
D言語ではbuy(*x*)と*x*.buyが等価であるため、
特別なことは何も行わなくても実装が可能。

```d:
import std.stdio;

template buy(T){
	int buy(T x){
		return cast(int)x*2;
	}
}

void main(){
	writeln(10.buy.buy);
	readln();
}
```

## <span>C#</span>
C#には[拡張メソッド](https://docs.microsoft.com/ja-jp/dotnet/csharp/programming-guide/classes-and-structs/extension-methods)と言われる、
疑似的にチェーンメソッドを作成できる仕組みが用意されているのでこれを利用。

```csharp:
using System;
using static System.Console;

static class Program{
	static int buy(this object x){
		return (int)x*2;
	}

	static void Main(){
		WriteLine(10.buy().buy());
		ReadLine();
	}
}
```

## VB.Net
C#と同様に[拡張メソッド](https://msdn.microsoft.com/ja-jp/library/bb384936(v=vs.110).aspx)が利用できる。

```vbnet:
Option Strict On
Imports System.Console

Module Program
	<System.Runtime.CompilerServices.Extension()> 
	Function buy(x As Object) As Integer
		Return CInt(x)*2
	End Function

	Sub Main()
		WriteLine(10.buy.buy)
		ReadLine
	End Sub
End Module
```

## JavaScript
Numberオブジェクトに直接prototypeを生やすことで可能。
globalオブジェクトに直接手を加えることになるので余り良い手では無さそう。
なお、数値をNumberオブジェクトと認識させるためには括弧で囲む必要がある。

```js:
"use strict";
const rl=require("readline").createInterface(process.stdin,process.stdout);
const ReadLine=()=>new Promise(res=>rl.once("line",v=>res(v)));

Number.prototype.buy=function(){
	var x=0|this.valueOf();
	return 0|x*2;
};

(async function main(){
	console.log((10).buy().buy());
	await ReadLine()
	process.exit();
})()
```

## Python3
素の数値型(int,float)に対してのチェーンを繋げることは不可能っぽい。
クラス自体のオーバーロードや拡張も許されていない様子。
そのため、適当なクラスに数値型を継承してメソッドを拡張させることで疑似的に対応することは可能。
今までint関数だと思っていたけど、これはintオブジェクトのコンストラクタだったということなのかな。

```py3:
class i_(int):
	def buy(self):
		return i_(self*2)

if __name__=="__main__":
	print(i_(10).buy().buy())
	input()
```

## あとがき
rubyとか見てると何でもチェーンしているイメージだったので、
他の言語だとどうなるのか試してみた次第。

意外にやろうと思えばできたけど、
僕は普通に関数使っていればいいのかなぁと思った。
メソッドチェーンカッコいいけど。
Ubuntu 16.04.3 + AMDGPU-Pro で X11 headless な OpenCL 環境を構築する

漢なら AMD GPU + amdgpu-pro で OpenCL 計算環境作りたいですよね!

しかし AMD GPU だと, デフォルトの X11 Desktop 環境では一度 graphical window manager でログインしないと OpenCL が動かないので ssh コンソールログインで OpenCL 計算できなくてつらい...
(NVIDIA GPU だと動くのですがね)

そこで X11 headless 環境を作って画面を出さなくても OpenCL がつかえるようにしましょう!

OpenGL も利用するなら x11vnc + VirtualGL あたりを使うのが良さそうですが, 今回は OpenGL は必要ないので, マイニングでの設定環境を参考にします.

How To Build a 6 GPU Zcash Headless Mining Rig on Ubuntu 16.04 Using Claymore

https://blockoperations.com/build-6-gpu-zcash-headless-mining-rig-ubuntu-16-04-using-claymore/

## 前提条件

* Ubuntu Desktop 版 16.04.3 最新がインストールされているものとします(23 Oct, 2017 では kernel 4.10.0-37).
* amdgpu-pro ドライバ 17.40 beta(blockchain/compute 用, http://support.amd.com/en-us/kb-articles/Pages/AMDGPU-Pro-Beta-Mining-Driver-for-Linux-Release-Notes.aspx 23 Oct, 2017 時点) を `--compute` でインストールしているものとします.
* headless 運用時は AMD GPU にはディスプレイケーブルは繋いでいないものとします(もしくは, CPU 内蔵 GPU でマザーボードの HDMI にディスプレイケーブル挿しているとか)
 
## grub

KMS あたりがからんでいるようで grub をグラフィカルにすると問題がありそうなので, テキストモードで grub が起動するようにします.

```
$ sudo vi /etc/defaults/grub
```

```
GRUB_CMDLINE_LINUX_DEFAULT=""

GRUB_TERMINAL=console
```

```
$ sudo update-grub
```

## group

自身のユーザアカウントを `video` に所属させます.

```
$ sudo usermod -a -G video $LOGNAME
```

これでリブートすれば ssh コンソールログインからでも OpenCL を利用できます(`clinfo` でデバイスを確認)

X11 dummy は不要のようです.
(もしかしたら grub の変更は不要で, `video` グループにユーザアカウントを追加だけでいいのかもしれません)

Happy OpenCL programming!

## TODO

* amdgpu-pro ドライバだと GPU の powertune ができませんが, 17.40 blockchain driver でもそうなのか確認する
* ROCm 環境も試す.