OmniAICreator/Qiita-1.07M huggingface dataset:
UbuntuにAnsibleでmackerel-agentをインストールする


### mackerel-agentをubuntuにインストールするときに作成したansibleのめも


- 環境
  - ubuntu16.04
  - ansible2.5
  
- やったこと
  - Ubuntu環境のため、Ubuntu以外で実行したらFailさせる 
  - AutoScaling環境を使うため、Mackerelの機能である自動退役モードを設定する
     - https://mackerel.io/ja/docs/entry/howto/auto-scaling 
  - PackerでAMIを作成するため、インストール・設定後にidファイルを削除する
  - (※ mackerel_agent_apikeyはansible-vaultで暗号化する必要あり)
 

- 参考: AnsibleでインストールするためのMackerel公式のGitHubがある
  - https://github.com/mackerelio/ansible-mackerel-agent 


```roles/mackerel/tasks/main.yml
---
- name: Import mackerel GPG key v2
  apt_key: url=https://mackerel.io/file/cert/GPG-KEY-mackerel-v2 state=present
  failed_when:
    - ansible_distribution != 'Ubuntu'
  become: yes


- name: Add repository mackerel v2
  apt_repository: repo='deb http://apt.mackerel.io/v2/ mackerel contrib' state=present update_cache=yes
  failed_when:
    - ansible_distribution != 'Ubuntu'
  become: yes


- name: Install mackerel-agent
  apt:
    name: mackerel-agent
    state: latest
    update_cache: yes
    force: yes
    dpkg_options: 'force-confdef,force-confold'
  become: yes


- name: Install mackerel-agent-plugins
  apt:
    name: mackerel-agent-plugins
    state: latest
    update_cache: yes
    force: yes
    dpkg_options: 'force-confdef,force-confold'
  when: mackerel_use_plugins
  become: yes


- name: Install mackerel-check-plugins
  apt:
    name: mackerel-check-plugins
    state: latest
    update_cache: yes
    force: yes
    dpkg_options: 'force-confdef,force-confold'
  when: mackerel_use_plugins
  become: yes


- name: Update agent config
  template:
    src: mackerel-agent.conf.j2
    dest: /etc/mackerel-agent/mackerel-agent.conf
  become: yes


- name: Set auto-retirement agent
  template: src=auto-retirement.conf.j2 dest=/etc/default/mackerel-agent
  become: yes


- name: Apply mackerel-agent conf
  systemd:
    name: mackerel-agent.service
    state: reloaded
  become: yes


- name: Enable mackerel-agent
  systemd:
    state: started
    daemon_reload: yes
    enabled: yes
    name: mackerel-agent.service
  become: yes


- name: Wait until created mackerel-id file
  wait_for:
    path: /var/lib/mackerel-agent/id
    timeout: 30


- name: Stop service mackerel-agent if running for createAMI
  systemd:
    name: mackerel-agent.service
    state: stopped
  become: yes


- name: Check mackerel-id file for createAMI
  stat:
    path: /var/lib/mackerel-agent/id
  become: yes
  register: mackerel_id_file


- name: Delete mackerel-id file if exist for createAMI
  file:
    state: absent
    path: /var/lib/mackerel-agent/id
  become: yes
  when: mackerel_id_file.stat.exists

```



```roles/mackerel/templates/auto-retirement.conf.j2
AUTO_RETIREMENT=1
```


```roles/mackerel/templates/mackerel-agent.conf.j2
apikey = "{{ mackerel_agent_apikey }}"
include = "/etc/mackerel-agent/*"
```


```roles/mackerel/defaults/main.yml
mackerel_use_plugins: yes
mackerel_agent_start_on_setup: yes
```
Apache CamelのEclipse用プラグインがありました（VS Code用も）

# Apache CamelのEclipse用プラグイン

XML DSL、Java DSLでURI要素を補完してくれるEclipse用のプラグインがあったので使ってみました。

[Language Support for Apache Camel](https://marketplace.eclipse.org/content/apache-camel-language-server#group-external-install-button)

インストールは上のサイトの「Install」ボタンをEclipseにドラッグするだけ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179607/6c10352a-0e6b-103a-ed95-56c04e14c76a.png)


「from uri=」で、「uri="fi」と入力すると以下のように「file:directoryName」が候補に現れ、ドキュメントも表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179607/bd326b00-f079-7fc7-c2d2-40579f183569.png)

そらに、「from uri="file:./input/?no」と入力すると、候補に「noop」が表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179607/1fbc3d02-2a29-abca-4648-f7d8c33b7332.png)

Java DSLでも同様の補完ができます。

特にXMLの場合はコンポーネントの名前やオプション名がなかなか覚えられないので、保管されると便利でした。

昔からCamelを使っているのに、どうしてプラグインに気づかなかったのかとおもったら、リリースされたのが今年でした。


# 動画

「Language Support for Apache Camel」プラグインの導入方法と補完を紹介した動画がyoutubeにあがっていました。
1分35秒程度ですので、こちらを見るのが導入と使い方を知るのには1番早いかと思います。英語ですが、英語が分からなくても問題ないです。

[Language Support for Apache Camel in Eclipse Desktop IDE - Installation and basic completion](https://www.youtube.com/watch?v=cf6Z-sR05gA)

再生回数は22回だけでしたが・・・そもそもこの動画があることに気がつくことが難しそう。


# VS Code用プラグイン

こちらは使っていませんが、VS Code用のプラグインがありました。

[Language Support for Apache Camel](https://marketplace.visualstudio.com/items?itemName=camel-tooling.vscode-apache-camel)
SATySFiでFizzBuzz

[生成されたPDF](https://gist.github.com/hanachin/f021b3674d1c2f3ff326bb42ed3ef12a#file-fizzbuzz-pdf)

```ml:fizzbuzz.saty
let-inline ctx \fizzbuzz m = script-guard Latin (embed-math ctx m) in

let ctx = get-initial-context 440pt (command \fizzbuzz) in

let fizzbuzz-str n =
  match ((n mod 3), (n mod 5)) with
    | (0, 0) -> `FizzBuzz`
    | (0, _) -> `Fizz`
    | (_, 0) -> `Buzz`
    | _      -> arabic n
in

let fizzbuzz-line n = line-break true true ctx (read-inline ctx (embed-string (fizzbuzz-str n))) in

let fizzbuzz n upto =
  let-rec iter i acc =
    if i == upto then
      acc +++ fizzbuzz-line i
    else
      iter (i + 1) (acc +++ (fizzbuzz-line i))
  in
  iter 1 block-nil
in

page-break
  A4Paper
  (fun pbinfo -> (|
    text-height = 842pt;
    text-origin = (0pt, 0pt);
  |))
  (fun (pbinfo) -> (|
    header-content = block-nil;
    header-origin = (0pt, 0pt);
    footer-content = block-nil;
    footer-origin = (0pt, 0pt);
  |))
  (fizzbuzz 1 100)
```
CentOS 6.XにGoogle Chromeをインストールする方法

# 動機
* CentOS 6系サーバでSelenium Web Driverを使ったブラウザ操作自動化をしたい。
* ChromeDriverを使うPGを書いていたので、サーバにもインストールが必要。

# 手順

* yumレポジトリを追加する

	``` bash
	cat << EOS > /etc/yum.repos.d/google-chrome.repo
	[google-chrome]
	name=google-chrome
	baseurl=http://dl.google.com/linux/chrome/rpm/stable/\$basearch
	enabled=0
	gpgcheck=1
	gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub
	EOS
	```

* インストール

	``` bash
	yum -y install google-chrome-stable --enablerepo=google-chrome
	```
	
# 確認

* インストール先、バージョンを確認

	``` bash
	which google-chrome
	# responce: /usr/bin/google-chrome
	
	google-chrome --version
	# responce: Google Chrome 69.0.3497.100
	```
AWS 10分間チュートリアル実績(2018/09/29)

AWSには10分間チュートリアルというものがあります。
https://aws.amazon.com/jp/getting-started/tutorials/

2018年9月29日時点では以下の41項目あります。
手を動かしたことがあるものに◯をつけてみました。やばい、全然やってない。

[◯] Linux 仮想マシンの起動
[　] 仮想マシンにコードをデプロイする
[　] WordPress ウェブサイトの起動
[　] ドメイン名の登録
[　] Docker コンテナのデプロイ
[◯] MySQL データベースを作成し接続する
[◯] ファイルの保存と取得
[◯] クラウドへの複数ファイル一括アップロード
[　] "Hello, World!" をサーバーレスで実行
[　] 継続的デプロイのパイプラインをセットアップする
[　] EC2 インスタンスでリモートからコマンドを実行する
[　] サーバーレスアプリケーションの構築
[◯] Windows 仮想マシンの起動
[◯] PostgreSQL データベースを作成し接続する
[　] NoSQL テーブルを作成してクエリを実行する
[　] E メールを送信する
[　] ウェブアプリケーションを起動する
[　] 顔を検出、分析、比較する
[　] MariaDB データベースを作成し接続する
[　] ウェブアプリケーションの更新
[　] Microsoft SQL Server データベースを作成し接続する
[　] 分散されたアプリケーション間でメッセージを送信する
[　] WordPress で作成したウェブサイトに音声を追加する
[　] ファンアウトイベント通知を送信する
[　] コンテンツを迅速に配信する
[　] トピックに公開されたメッセージをフィルタリングする
[　] ネットワークファイルシステムの作成
[　] ウェブアプリケーションのデプロイと管理
[　] コマンドラインのセットアップ
[　] テキストの感情を分析する
[　] AWS DeepLens プロジェクトを作成する
[　] AWS DeepLens プロジェクトを拡張する
[　] AWS DeepLens プロジェクトを構築する
[　] 動画分析とリッチメタデータ抽出
[　] 言語間でテキストを翻訳
[　] AWS 深層学習 AMI の起動
[　] 機械学習モデルの構築、トレーニング、デプロイ
[　] サーバーレスワークフローの作成
[　] サーバーレスアプリケーションでのエラーの処理
[　] サーバーレスワークフローのスケジューリング
[　] Serverless MySQL データベースの設定と接続

これでAWSエンジニアは名乗れないですね。これから2週間くらい強化月間として頑張っていきます。
シンボリックについて

#これを書こうと思った理由
LinuxでCTFの勉強をしていた際、gccのバージョンをさげたいと思い、シンボリックが分からなかったため、この記事をかこうと思いました。


#シンボリックとは
Linuxで使用されるファイルシステムの機能の1つです。あるファイルやフォルダを示す別のファイルを作成して、そこを通じて本体のファイルやフォルダを参照出来るようにする仕組みです。


#lnコマンド
ln…ファイルのリンクを作成するコマンドです。
```ln [オプション] ファイル名　リンク名```
オプションは-sが一番使うのでsを覚えていればいいと思います。
![Shimokita.php](https://viral-community.com/wp-content/uploads/2014/01/symbolic-link.png)

#gccのバージョンのさげ方
```
$sudo add-repository ppa:ubuntu-toolchain-r/test
```
```
$sudo apt-get update
```
```
$sudo apt-get install gcc-4.7
```
```
$rm /usr/bin/gcc
```
```
$sudo ln -s /usr/bin/gcc-4.7 /usr/bin/gcc
```
今回はgccのバージョンを4.7にしましたけど、自分の違うバージョンでも大丈夫です。
ラーメン屋メニューカタログアプリ

ラーメン屋メニューカタログアプリは僕と後一人友達と一緒に初めて開発したモバイルアプリです、このプロジェクトで僕はUIのデサインとワイヤーフレーム後開発担当しました。でこのアプリの目的は来店するお客様のために、お料理のメニューを表示します。表示言語は、現時点では英語と日本語の切り替えを可能とします。

![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/286745/2bb96b1a-e8ec-9922-3382-291ec0eb104b.jpeg)

###(1)　メニュータイプ選択画面 (Menu Type)
アプリ起動後に表示される最初の画面です。ユーザーは二つのメニュータイプを選択することが出来ます。
メニュー：すべてのメニューを表示します。
おすすめ：おすすめのメニューを表示します。

###(2)　メニューカテゴリ画面 (Menu Category)
お料理のカテゴリを選択する画面です。
例：そば、ご飯もの、飲み物など。

###(3)　メニュー (Menu Layout)
選択されたカテゴリに属するお料理が表示されます。
A - 一覧画面 (List)
メニューが一覧で表示されます。画面には料理名、簡単な説明、料理の写真、値段が表示されます。

B - 写真一覧画面 (Grid)
メニューが写真中心で表示されます。画面には料理名、料理の写真、値段が表示されます。

![1113.jpg](https://qiita-image-store.s3.amazonaws.com/0/286745/2d2eff4b-ed64-f9d2-10a7-0f0b0a6f4c78.jpeg)

###(4)　お料理説明画面 (Menu Details)
各料理の詳細情報を表示する画面です。画面には料理名、料理の説明、料理の写真、材料、成分の情報が表示されます。

###(5)　おすすめメニュー (Recommended Menu)
お店でおすすめの料理が表示されます。
A - おすすめ一覧画面 (List)
メニューが一覧で表示されます。画面には料理名、簡単な説明、料理の写真、値段が表示されます。

B - おすすめ写真一覧画面 (Grid)
メニューが写真中心で表示されます。画面には料理名、料理の写真、値段が表示されます。

###フローチャート
![asss.jpg](https://qiita-image-store.s3.amazonaws.com/0/286745/c49e3dae-41d5-9b5d-9e8e-c13a999d3e8f.jpeg)
ネットワーク分析 : ネットワーク指標まとめ

ネットワーク分析の基礎指標となる値についてまとめます。
「これなんだっけ」となりがちだったので、直感的なメモとして。

- 次数
- 次数分布
- 最短経路長
- 平均経路長
- 次数相関
- クラスタ係数

# 次数
ある頂点に繋がっている辺の本数を、その頂点の**次数**という。

下図でいうと頂点④の次数は**3**

<img width="393" alt="スクリーンショット 2018-09-28 8.51.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/242744/5cea4268-a511-32e5-f31a-62e46369acb3.png">


# 次数分布
ネットワークに含まれる各ノードの次数がどのように分布しているかを表す次数。

ごく簡単に言えば

**横軸に次数kにとり、縦軸にそのノード数をとったもの**。
下図のような感じ。

<img width="265" alt="スクリーンショット 2018-09-28 9.01.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/242744/161f9288-9801-ea47-5bcc-652ffcd59d21.png">


ノード数が大量にある時、次数分布の形によってネットワークの特徴がわかる。

e.g.
下図の崖みたいに下がってるのが**スケールフリーネットワーク**、山なりになっているのが**ランダムネットワーク**の特徴である。

<img width="577" alt="スクリーンショット 2018-09-28 9.03.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/242744/e73c0555-896e-e947-4863-e5a84ee69d62.png">



#最短経路長
あるノードとあるノードの間の最短経路のこと。
最短パス長ともいいます。

下図でいうと頂点⑥と頂点①の最短経路長は**3**

<img width="393" alt="スクリーンショット 2018-09-28 8.51.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/242744/5cea4268-a511-32e5-f31a-62e46369acb3.png">


# 平均経路長
ネットワークに含まれるノードの全ペアの最短経路長を平均した値。
平均最短距離・平均パス長・直径ともいいます。

# 次数相関
あるノードの次数と、そのノードが隣接するノードの次数がどのような相関を持つかの指標。
高い次数のノードが高い次数のノードとリンクを持ちやすい場合は**次数相関性は正**となり、
高い次数のノードが低い次数のノードとリンクを持ちやすい場合が**次数相関性は負**となる。

e.g.
SNSでおおくの友達を持つ人の友達が、同様におおくの友達を持っている場合は次数相関性が正と言えるでしょう。

# クラスタ係数

####あるノードに対するクラスタ係数

あるノードに対するクラスタ係数は、
あるノードの次数をvとして、

```
(あるノードと隣接するノード同士のリンクの数) / v(v-1) /2
```

となる。これだとよくわからない。

わかりやすく言えば、**「SNSで自分の友達100人いたら、自分以外の友人たち同士での繋がりはいくつあるのだろうか」**という話。
100人の中でつくり得る友達関係は、

```
100 * (100- 1)/2 = 4950 通り
```
ある。

この4950通りの中で、たとえば50通りの友達関係があるなら、クラスター係数は

```
 50 / 4950 = 0.0101...
```
となるので、0.01くらいである。

####ネットワークのクラスタ係数
**全ノードのクラスタ係数の平均**がネットワークのクラスタ係数。
クラスタ係数が高いとネットワークの密度が高い。

小さなサークルの交友関係などの「全員が友人同士のネットワーク」は、クラスタ係数が1になるのは想像がつくと思う。


#参考資料
https://gci.t.u-tokyo.ac.jp/tutorial/network/
https://www.nii.ac.jp/userdata/shimin/documents/H19/071113_6thlec.pdf
http://syrinx.q.t.u-tokyo.ac.jp/tori/lecture/complex/network2.pdf
https://ja.wikipedia.org/wiki/%E8%A4%87%E9%9B%91%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF
JavaScriptは比較演算子"も"推移関係が成り立っていない件

※この投稿は 2010/07/21 に [こちら](https://yanother.blogspot.com/2010/07/javascript.html) に投稿した記事の転載です。

タイトルの通りのおはなしです．

# 推移関係 is 何？

推移関係 (transitive relation) っていうのは，「風が吹けばほこりがたつ」「ほこりがたてば(略)桶屋が儲かる」だから「風が吹けば桶屋が儲かる」っていう三段論法みたいなやつですね．

一般的には関係 *R* が，どんな組み合わせの a, b, c についても下のように言えるとき，*R* は推移的であるといいます:

    a R b で b R c なら a R c

数値の大小比較が推移的だというのは直感的にわかるはず．

    a < b で b < c なら a < c

ですもんね．

で，上で使った `<` 演算子が，JavaScriptでは推移的ではないよ，というのが本題．

# 証明

推移的でないことを示すのは簡単で，ひとつでもいいから上の法則が成り立っていない a, b, c の組み合わせを見つけてやればいいだけ．

ここで以下の組み合わせを考える:

    a = 1;
    b = "2";
    c = "three";

これをブラウザのコンソールで実行してみると、結果は以下のとおり:

![Screenshot_1.png](https://qiita-image-store.s3.amazonaws.com/0/100577/b0efc395-080a-7d38-1018-13a1960e336c.png)

見事に反例を示すことが出来ました．


# なぜこんなことに…？

なんでこんな結果になるのかというと，JavaScriptの `<` は，両辺が文字列だった場合は文字列の辞書順で大小比較をするんですね．
どちらか片方でも文字列でなかった場合は，数値に変換して比較するわけです．
そのため，値の型が揃っていない場合にはこんな珍妙なことが起きるというわけですね．

そういえばタイトルに「"も"」と書きましたが，JavaScriptでは同様に `==` 演算子も推移関係を満たしていないのですよ．
これは ECMAScript 3rd Edition の仕様書で言及されているくらい有名な(?)事実:

> NOTE 3 The equality operator is not always transitive. For example, there might be two distinct String objects, each representing the same String value; each String object would be considered equal to the String value by the == operator, but the two String objects would not be equal to each other.

文章で読むとなんだかわかりにくいですが，こういう意味ですね↓

    a = new String("hoge");
    b = "hoge";
    c = new String("hoge");

として，皆さんも実行してみてください:

![Screenshot_3.png](https://qiita-image-store.s3.amazonaws.com/0/100577/4b37751d-9301-656e-1adf-c3b9b0e3a7d7.png)

ほらね！

だったら `<` についてもNOTEしておけよ！とか思ったのは，別の話(ぉ
React Native新プロジェクト作成で@babel/runtimeに関するエラーが発生する

## 概要

React Nativeを使って新規プロジェクトを作成し、iOS向けにビルドしようとしたが失敗した。
解決方法が乗ったissueを見つけたためメモを残しておく。


## 実行環境

* node v10.9.0
* npm v6.2.0
* watchman 4.9.0


## 実行したもの

```sh
$ npm install -g react-native-cli
$ react-native init SampleApp
$ cd SampleApp
$ react-native run-ios
=> エラー発生
```

## エラー内容

```
Module `@babel/runtime/helpers/interoprequireDefault` does not exist in the Haste module map
```

<img width="559" alt="スクリーンショット 2018-09-29 1.51.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/174052/beb6eab9-a84b-d91d-b4df-e23c4a57794e.png">


## 解決方法

作成したプロジェクト直下で以下を実行する

```sh
$ npm add @babel/runtime
$ npm install
```

これを実行したのちに

```sh
$ react-native run-ios
```

を実行するとビルドに成功した

## 参考

[Module @babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map · Issue #21310 · facebook/react-native](https://github.com/facebook/react-native/issues/21310)
スキャナでアンケートを読めるSQSが使えない→javaのver変えたら使えました

# SQS is 何
- 普通紙をマークシートの用紙にしてくれる
- 回収したらドキュメントスキャナでtiffかjpgにし、マークリーダーにかけるとマークを読み取れる
- 今回は[AWS](https://aws.amazon.com/jp/sqs/)の方ではない

Javaで作られているのでWinでもMacでもLinuxでも動く。やったぜ。

cf. 岩手県立生涯学習支援センター - SQS
http://www2.pref.iwate.jp/~hp1595/kyousin/sqs.html

# 使えなくなった経緯
中学校の技術科教員をやっていたときの話。

約340人分の授業評価アンケートを紙で集計するとかいやーキツイっす。
↓
そういや岩手県でSQSとかいうアンケート集計ソフトあったな。
↓
回収したプリントを、ドキュメントリーダーで読んでマークリーダーにかける。
↓
javaのバージョンが合わないらしく、落ちる。

# 状況・解決
どうやら```$ java -version```が1.7以下(1.6がベスト)でないと使えないらしい(現：1.8)
このため，バージョンの変更が必要
当職はmacなので~/.bashrcに

```shell
export JAVA_HOME=`/System/Library/Frameworks/JavaVM.framework/Versions/A/Commands/java_home -v "1.7"`
PATH=${JAVA_HOME}/bin:${PATH}
```
と設定(上記"1.7"部分がバージョンに相当)
この後、
```$ sudo java -jar /マーク/リーダーの/パス.jar```
することで起動できた

めでたしめでたし。

# 最後に
ここまで読んでいただいた方はずっと心に引っかかっていたことでしょう。
技術科教員のくせに『なぜWebではなく紙でアンケートをやっているのか』と。
PC室も使えることは使えるのですが、

- 学校では未だに紙ベースでやっている部分が多いこと
- フィルタリングガチガチでPCが使えない
- そもそも技術の時間数が少なく、持ち帰って休み時間に書くという荒業を使うため

ということで、こうせざるを得ませんでした。
義務教育の現場も電子化していってほしい。
そういった願いも込めて、戦う先生方のためにまとめてみました。
まだまだこのソフト使えますので、使ってみてください。

# 参考
OSXでJavaのバージョンを切り替える - Qiita
http://qiita.com/ringo/items/db58b34dc02a941b297f
Unityのマイアセットを持ちすぎた人のための処方箋

#はじめに

いきなり挑戦的なタイトルですみません。自戒を込めてこのタイトルにしました。

UnityのAssetStoreは、有料無料問わずよさげなアセットがたくさんあるじゃないですか(UnrealEngineのマーケットもだいぶ増えてきましたが、まだまだといった感が(あくまでも個人的な基準です))。
で、気になるアセットを脇目も振らずダウンロード(DL)してしまうわけです。そしたら…

**アセットの容量が２００ギガ目前までいきました**

はい、バカです。私バカです。取り込みすぎました。

しかも、DLしすぎただけならまだしも、管理するとなると、

**マイアセットをリストアップするだけで数分**

といった間抜けな弊害もあるわけでして…。

というわけで、私が色々試行錯誤して見つけた策を伝授したいと思います。

#前提

本記事は、新アセットストアを使用していると想定しています

#Web版アセットストアとの併用

さて、Unityのサイトにアセットストアも含まれているのはご存知でしょうか。まぁ、トップページから移動できるのでご存知のかたも多いとは思いますが、活用はされていますでしょうか。アセットストアのURLを添付しておきます。ブラウザで開いてみましょう。

https://assetstore.unity.com/

このリンクを踏むと、アセットストアに直接移動できます。あ、ログインは忘れないでくださいね。

Web版のアセットストアも、エディタと同じくアカウントに紐付けられたマイアセットをリストアップできますので、マイアセットから探すのが楽になるときがあります。とはいえ、全部こちらで済ませられるかと言うとそうじゃない

**アセットのDLやインポートはエディタのアセットストアからやるべし**

Web版では、「ダウンロード」や「インポート」ボタンが出る代わりに「Unityで開く」ボタンが現れ、対応するエディタのアセットストアを開いてしまいます。そして、エディタにフォーカスして云々…うん、少々手間ですね。

ただ、ここで「つかえねー！」と投げ捨てるのは勿体無いです。Web版には、エディタ版に無い有利な仕様があります。それは、

**アセットを登録・購入してもすぐにダウンロードしない**

ところです。登録・購入すれば、エディタのほうを再表示すればリストアップされます。これはのちにボディーブローのように影響していきます。

# エディタ版マイアセットリストのからくり

さて、エディタ版でマイアセットをリストアップすると、アセットの構成によりますが数分かかることがあります。試行錯誤の結果、これは

**(1)最新バージョン情報リストをダウンロードする**
**(2)ダウンロードしてるパッケージファイルに収められているバージョン番号を一つ一つ調べる**

ことにより、新バージョンがあるかどうかを識別しているようです。ファイルが数千あると…これは時間が勿体無い！

# マイアセットリスト高速化のコツ

じゃあ、どうすればいいのか？　答えは簡単でした。

**パッケージファイルをダウンロードしなきゃいい**

わけです。調査対象のファイルが無いわけですから、調べるすべがないわけです。そして、必要なファイルだけDLすれば無問題なわけです。このコツを深く掘り下げてみます。

## DLしてしまってたファイルの処置

さて、のべつ幕なしにDLしたファイル。これらをどうすればいいのか？　手っ取り早く**削除しちゃいましょう**。もしくは**別のフォルダにバックアップ**してもいいですし、バックアップしたフォルダからパッケージを取り込めます。

マイアセットのファイルを保存している場所は以下です。パッケージファイルが肥大化してきたと思ったら、以下のパス以下にあるファイルをまるっと削除します（念の為、Unityは落としておきましょう）。削除しても影響はありません。

```C:\Users\%USERNAME%\AppData\Roaming\Unity\Asset Store-5.x```

参考： http://d.hatena.ne.jp/nakamura001/20120312/1331567986

さあ、これでマイアセットリストを表示させると…劇的に早くなりました。やっぱりDLが影響しています。あとは、必要最低限のパッケージをDLします。簡単ですね？

## 新規で登録・購入するアセットの対処

では、新規で追加するアセットはどうすればいいのでしょう？　こここそ、さっき紹介した**Web版アセットストアを使う**ことっで解決できます。

Web版ではDLをせずにマイアセットとして登録するだけです。無料のときは「マイアセットに追加する」ボタン、有料のときは「(値段)」ボタンをクリックして、登録だけしておきましょう。

注意すべき点は異常です。簡単でしょ？

# まとめ

アセットの登録・購入は節度を持って楽しく創作！

# おまけ

ここでは、未登録の無償アセットを探しやすくするコツを伝授します…と言いたいところですが、今のアセットストアはだいぶ便利になり、以下のURLをブックマークしておけば、いつでも無料アセット一覧を確認できます。

https://assetstore.unity.com/?free=true&orderBy=3&rows=96

また、登録済みのアセットはその旨表示されるようになっていますので、無料アセットを登録順(アップデート順)に表示させていれば、最近追加された未DLのアセットが見つかりやすくなります。

では、楽しいUnityアセットライフを！
Canvas#drawTextの落とし穴

# あ…ありのまま今日起こったことを話すぜ！
AndroidのCanvasを使って画像やらカメラのプレビューに別の画像やらテキストを乗せるって言うのをやってたんだけど、
変なハマり方をして30分位悩んだのでここに備忘録として残しておく。

現象としては、Canvas#drawBitmapでは想定したとおり画像が表示されるのだが、
Canvas#drawTextではテキストが表示されないという事象が発生した。
ちょうどこんな感じである。
![Screenshot_1538150860.png](https://qiita-image-store.s3.amazonaws.com/0/93242/1af543af-20b6-1576-b813-e614d7d38be4.png)
ちなみにこれ、
`        canvas.drawBitmap(bmp, 0f, 0f, paint)
        canvas.drawText(str, 0f, 0f, paint)
`
として、両方共(0, 0)に描画している。

# 原因
上の画像をよく見ると画面の左上にうっすらと黒いものが見切れているのに気づく。
この見切れに気づかなくて悩んでたんだけど、どうやら画像とテキストで原点の位置が違うということに気づいた。
画像は左上、テキストは左下が原点なのだと。

# 対策
じゃあテキストの高さ分だけY座標に足したらええやんってことで以下のように修正
`
        val rect = Rect()
        paint.getTextBounds(str, 0, str.length, rect)
        canvas.drawText(str, 0f, rect.height().toFloat(), paint)
`
これで無事テキストも表示できるようになりましたとさ。
![Screenshot_1538151669.png](https://qiita-image-store.s3.amazonaws.com/0/93242/461b4483-9ff1-6b6e-8214-e31724b9553c.png)
tinyemuでlinux

#RISCVの開発環境揃えたい
この記事見てどうやらtinyemuを使えば簡単にriscv用のlinuxがエミュレータ上に構築できそうだったので手順の記録
http://msyksphinz.hatenablog.com/entry/2018/09/24/040000
#buildrootはノーパソじゃ辛い
記事通りにbuildrootやってみたがノーパソじゃ非力すぎて全然終わらないし、Ubuntu Bionicだとcopy_file_rangeって箇所でerror吐かれるって問題がそれなりに普遍的に発生してるっぽいので面倒なので諦めた。
#コンパイル済みイメージがある
普通にコンパイル済みイメージも公開されていることがわかったのでそれでやってみる。公式のreadmeに従った。
https://bellard.org/tinyemu/readme.txt

``mkdir tinyemu
cd tinyemu
curl -L https://bellard.org/tinyemu/diskimage-linux-riscv-2018-09-22.tar.gz | tar xz
curl -L https://bellard.org/tinyemu/tinyemu-2018-09-15.tar.gz | tar xz
cd temu-2018-09-15
sudo apt install -y libssl-dev libcurl4-openssl-dev libsdl-dev
sudo make -j3 install
cd ../diskimage-linux-riscv-2018-09-22
temu root-riscv64.cfg``
これで多分動く。installしてるのはreadmeに書いている依存関係解決のため。-j3なのはLXD上でやってるので、全部コア使われるとフリーズすることがあるから。といってもそんな重いコンパイルではないようだが。
Terraformで"should be a list"

こういうvariable(list type)

```
variable "hoge_ids" { type = "list" }
```

でこういう値を入れて

```
hoge_ids = [
  hogehoge,
  hugahuga
]
```

moduleの方でこう呼ぶとダメ。

```
hoge_ids = "${var.hoge_ids}"
```



いや。listやん。いや。って思う。

解決策はこれ。

```
hoge_ids = ["${var.hoge_ids}"]
```

感覚と違いすぎてよくわからない。Terraformにおけるlist[]は子listを入れても勝手にflatten的なことをしていい感じにしてくれるらしい。それはありがたいけど、変数展開した時点でlistだったことを忘れてしまうのはやめてほしい。
ではGraphQLがDeclarativeとはどういう意味？そこには力関係がひそんでいる・・・

# DeclarativeなAPI？

[前記事](https://qiita.com/Hiroyuki_OSAKI/items/f3f88ae535550e95389d)では`Declarative`とは何なのかを、個人的偏見も込みで解釈しました。

要は、トップダウンで、目的だけ一言で言う、ようなクエリです。

GraphQLがDeclarativeと呼ばれる理由は何なんでしょうか。
そこには以下のような力関係があると思います。

# これまではAPI利用者はAPI提供者の仕様に従っている？

従来、API利用者とAPI提供者の力関係はどちらかというと

|API利用者|API提供者|
|---|---|
|エンドポイントにリソース名だけ付けて要求|エンドポイントに対し**あらかじめ決まった処理**を実行|
|レスポンスの中身は変えられない|レスポンスは**あらかじめ決まった形式**で返答|
|たくさんのレスポンスが必要なら何回もリクエストを投げる|リクエストに対して**あらかじめ決まった個数**だけレスポンスを返す|

力関係　**API利用者 ＜ API提供者**

API提供者に柔軟性がないばかりに、**API利用者は言われるがまま**の状態です。

# ではGraphQLは？

|API利用者|API提供者|
|---|---|
|エンドポイントに**「何が欲しいのか（条件など）」**を付けて要求|リクエストに合わせて柔軟に処理を変更|
|レスポンスの中身を**必要な分だけ指定して**要求（フィールドなど）|レスポンスは要求通りの形式で返答|
|レスポンスの中身がたくさんあるかどうかは**気にしないで条件だけ**送る|条件に当てはまったものはたくさんでもちゃんと返す|

力関係　**API利用者 ＞ API提供者**

出ましたね！　利用者側はかなり空気を読んでません。

その代り、API利用者がすごく強くて楽なわけです。

なので、フロントエンド開発者がやりやすくするためのBackend For Frontend (BFF) のAPIとして期待されているわけですね。
私はローカルで再帰的に画像を圧縮したかったメモ

# 使ったもの

* Mac(homebrew入り)
* pngquant・・・png圧縮するやつ。有名らしい
* mozjpeg・・・jpeg圧縮するやつ。mozillaのやつとgoogleのやつで悩んだけどmozillaのほうが良さそうなので

# インストール

```
$ brew install pngquant mozjpeg
$ echo 'export PATH="/usr/local/opt/mozjpeg/bin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile
```

# ワンライナーでいまのディレクトリ以下を捜索して上書きしてくれるやつ

## png

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

## jpg

mozjpegにはいくつかのbinがあるのですがワンライナーで書きやすそうなjpegtranを利用しました。

```
find . -name "*.jpg" | xargs -I@ -P4 jpegtran -copy none -optimize -outfile @ @
```

実際は他のコマンドを使ってqualityを指定した圧縮をしたほうが良いのかもですが、とりあえずロスレス圧縮しただけ。

終わり。
webpackとbabelを使った環境構築の設定の仕方

#なぜやったのか
　これまではcliで作られたファイルをちょくちょく手を加えながら作っていたが、上達をしてきてそろそろ製品にしていいかもしれない物を作りたくなってきたからだ。そこでやるなら、おもしろい言語のほうがいいから、node.jsを使ったサイトを作ろうと思い、環境設定をしていた。
　だが、今日は一日かけて環境設定をすることになった。正直、だいたいの構想をメモするだけに今日が終わってしまった。
　こんな思いをするのは今日だけでいいと思いこの記事を書くことにした。

#構造
```
.
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── src--app.js
└── webpack.config.js
```

```json:package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "express": "^4.16.3",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1"
  }
}
```

```javascript:app.js
import express from 'express'
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))
```
とりあえずこんなかんじでやっていく。

#webpack.config.jsのソースコード

``` js:webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/app.js',
  devtool: 'source-map',
  target: 'node',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
  },
  resolve: {
    extensions: ['.js']
  }
};
```

#webpackの詳細説明

mode: モードとは、本番か開発をわかるようにしている。これは、本番の環境設定と開発の環境設定で開発時のエラーなどをわかりやすくするためにある。今回はdevlopにしておいた。本番開発になったらproductionとして別にwebpackの設定ファイルを用意すればいい。

entry:これは最初にどれをロードするのかを設定する。このファイルを基点にどのファイルをロードするのかをwebpackは判断する。

devtool:コンパイルされる前と後の関係性を記したファイルを指定する。オフィシャルではほかにもサポートされてはいるが、最初はsource-mapを使ったほうがいいと思う。

target：これはどの処理系かを設定しておく。この設定はブラウザに変えたりすることで、自動的にブラウザ向けのｊｓに変換してくれる。

output:webpackがまとめてくれたjsの格納場所を設定する。pathが格納先のフォルダとファイルの場所を指している。filenameはまとめてくれたjsの名前をしていてくれる。

module:どの変換ツールを使うのかを設定してくれる。ここはそれぞれの変換ツールのホームページに書き方が書いてあるので、それを参考にするといい。最初は第三者が書いた記事を当てにするよりは、本家のサイトを当たってみるほうがいい。

resolve: moduleの関係性を解消してくれるもの。これがない場合、例えばexpressをロードしようとしてもロードがされない状況が生まれる。

#苦労したところ。

　試しに、webpackのチュートリアルはできた。いまブラウザで採用されているｊｓのコンパイルはうまくいっていた。
　だが、厳しかったのはその後だった。
　なぜか、babel-loaderがexpressを認識してくれなかった。日本語のサイトでは埒が明かなかったので、海外の質問サイトで同様のエラーがないか探したが、どれもこれも「expressがインストールされてないのでは？」と返答が多かった。
　疲れ切って、試しにbabelの本家にあるとおりにやったら、動いた。
　正直これに大体５時間はかけた。
　これから得られた教訓は「最初に本家サイトに行くべし」だった。基本だけれども、どうしても初心者が再現を試みようとすると、誰かが作ったものを使いたがる性などだと思う。
#これを読んでいる初心者たちへ

　以上の教訓から、自分がベストだと思う手順を書く。おそらくこのプロセスを踏めば、うまく行くと思う。良ければ使ってほしい

1. 本家のget startを読んで再現する。
2. もしget startで再現できなければgoogleで今の年をつけて検索して良さげなサイトのコードを再現する。 例（webpack 2018)
3. そこで再現できなければ、1を参考にしながら、2に手を加える

僕が行ったのはこのプロセスだ。こういうことに時間を費やすよりも、みんなには作って楽しんでもらいたい。
uGUIのInputFieldで編集できない入力フォームを作る

# 検証環境

Unity2018.2.1f1

# 解説

<img width="358" alt="sふぁsfさdふぁs.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/d88b6cf0-3ad4-7905-9d58-f0557b01dc92.png">

InputFieldコンポーネントの設定を変更することで実現可能です。

| プロパティ | 説明 |
|---|---|
|Interactable | UI要素を選択する機能の有効/無効を切り替える。デフォルトで有効。 |
|ReadOnly | 読み取り専用の有効/無効を切り替える。デフォルトで無効。 |


https://docs.unity3d.com/ja/current/ScriptReference/UI.InputField-readOnly.html


## 挙動

上から、

- Interactable = true && ReadOnly = false
- Interactable = false&& ReadOnly = false
- Interactable = true && ReadOnly = true


![fasdfas.gif](https://qiita-image-store.s3.amazonaws.com/0/55365/02c32190-a8c4-c44c-dbeb-450d4bd70fed.gif)


Interactableがfalseだと選択自体が出来なくて、ReadOnlyがtrueだと選択は出来るけど変更が加えられない挙動をします。

用途に応じて使い分けるとよいかと思います。参考にしてみてください。
宣言的？ Declarative?どういうこと？

# なぜこれを書いたか＝結局よく分からない言葉だから

`Declarative programming`というパラダイムや、`GraphQL`という`Declarative API`。
この`Declarative`は、日本語では「`宣言的`」とどの辞書も教えてくれる。
が、ちょっと待ってほしい。。。
**「宣言的」という言葉を私は日常会話で発したことがない。**
どういう意味なのか分からない言葉に訳されても、**誰に説明できない。**
納得できる説明はないのだろうかーーー

# Wikipedia先生曰くDeclarative programmingは

```
宣言型プログラミング（英: Declarative programming）は、プログラミングパラダイムの名称だが、
主として2種類の意味がある。第1の意味は、処理方法ではなく対象の性質などを宣言することで
プログラミングするパラダイムを意味する。第2の意味は、純粋関数型プログラミング、論理プログラミング、
制約プログラミングの総称である。
```

ごめんなさい、やっぱりこれでは他人に説明できない。

# StackOverflowの Declarativeのいい答え

https://stackoverflow.com/questions/129628/what-is-declarative-programming

```
Declarative programming　は　どうやってやるかじゃなくて
何をやりたいか　を書くようなプログラミング方法。
どうやってやるかはコンパイラが勝手に決める。
例としてはSQLとかProlog。
```

何をやりたいか。**目的**かな？

# 対義語は

Declarative ⇔ Imperative (命令的,指示的)

なるほど、対義語のImperativeは**いちいち細かく指示をする**こと。。
それなら、**Declarativeはいちいち細かく指示しない**ということか。
では指示しないで何をするのか。

# Declarative vs Imperative

https://tylermcginnis.com/imperative-vs-declarative-programming/

- Declarative = **WHAT** you want
- Imperative = HOW you want

つまり、**Declarative は　結局何がしたいのか、という目的だけを説明する**。

マイクロマネージメントという言葉があるが、それの反対でビジョンを示すリーダー的なやり方かな。
もしくは**トップダウン**ということか。

# 私が一番理解できた説明

http://minotaur.badwitch.io/declarative-programming/

```
Declarativeなプログラムの場合、「コーヒー頂戴」と言うだけです。
```

コーヒーの作り方は言わないで、「コーヒー頂戴」と一言で済ます。

要はこの、**一言で済ます**、というのが大事なのではないか？

つまり、

「**目的を一言（一文）で表す** 」
こまごまとはしゃべらない。

これがDeclarativeということなのでしょう。

# Declarativeな言語

どうやってやるかを決めないで、目的だけを一文で書く言語としては、SQLなどのクエリ言語がはまります。

以下のような特徴があります。

- **周りの状況を気にしない = 空気を読まない**（部下がいくらコーヒー豆は欠品なので調達が必要ですと言おうが、俺はコーヒーが欲しいんだ、で終わらせる）
- 処理の仕方はコンピュータに任せるので、**コンピュータが賢ければどんどん最適化される = 自分はバカのまま**（コーヒーと水が欲しい、という目的だけ決めるので、やり方は自由。①コーヒーを用意して次に水を用意するのか、②逆の順にするのか、③両方並列処理するのかはコンピュータが決める）

# 秀逸なアナロジー
2020/6追加

こちらのツイートを御覧ください。

https://twitter.com/gethackteam/status/1268892357027663873

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96277/4b26f074-7ff5-b9c2-afff-e26b72ea799b.png)

左はオートマティック、右はマニュアルのギアです。特にこのインターフェースだけを見てください。

ツイートでは、左が宣言的、右が命令的であると指摘しています。私もこの意見に賛成です。

オートマティックでは「R　後ろ、N　動かない、D　前に動く、P　駐車」これしか人間が指定しなくていいわけです。これを指定してアクセルを踏むだけで、望む動きが実現されます。やりたいことだけを指定しています。内部でギアを変更する処理は隠蔽されています。

対して、マニュアルでは「1-6のどのギアに接続するか」を指定しなくてはいけません。また、実は書かれていないけども真ん中は「N　ニュートラル」になっています。なので、前に加速するには、「1→N→2→N→3...→6」という順番での作業を覚えて実施しなくてはいけません。

でも、それぞれにいいところはあるわけです。
オートマティックはギア変更という作業を隠蔽化し容易化されています。内部は基本的には自動です。(M+ M-があるものもありますが) 簡単なのがいいところです。
対してマニュアルは、こまめにギア変更を指定し加速するなど、自分好みの作業を忠実に実現できるのがいいところです。そもそも楽しい、という人もいるでしょう。

では、どちらがドライバーにとっていいのでしょうか。これは非常に判断が難しくなってきます。

一般的なドライバーの大半はオートマティックのほうが簡単で良い、と言うでしょう。
ただ、レースドライバーは、アクロバティックなカーブを実現するためにマニュアルでなくては困ります。

したがって、どちらのインターフェースがよいかを議論するときには、**対象は誰なのか**を考えておく必要があるのだと思います。
もしかすると、宣言的であるべきか、命令的であるべきか、を考えるときには、ユーザは誰なのか、その人の目的は何なのか、を考えておくことが大事なのかもしれません。
ずんだの縦読み問題 Perlワンライナー編

ずんだの縦読み問題をPerlワンライナーで実装しました。
**元ネタ**

- [ずんだの縦読み問題 Ruby編](https://qiita.com/tbpgr/items/90abccf8297be0e42f8c)
- [ずんだの縦読み問題 php編](https://qiita.com/higuyume/items/7d3c03ddbbd6f4ad7aa1)
- [ずんだの縦読み問題 Java 12 Early-Access 版](https://qiita.com/neko_the_shadow/items/67e96e613b7f06ddc5fc)
- [ずんだの縦読み問題 Go編](https://qiita.com/kentfordev/items/d9a78e34d1e8bf2e703a)
- [ずんだの縦読み問題 ShellScript編](https://qiita.com/VTRyo/items/8b353631711ac7e059bf)
- [ずんだの縦読み問題 Nim編](https://qiita.com/kentfordev/items/c256eaba2f32f89049e1)
- [ずんだの縦読み問題 JavaScript編 @erukitiさん](https://qiita.com/erukiti/items/49ccb0211a18b6bef44a)
- [ずんだの縦読み問題 JavaScript編 @clown0082さん](https://qiita.com/clown0082/items/941f231486e95c219e75)
- [ずんだの縦読み問題 Python編](https://qiita.com/Aizack/items/60ebd4d1e25ed671b86a)
- [ずんだの縦読み問題 Brainf**k編](https://qiita.com/angel_p_57/items/dade937b14eef2f4d866)


# Perl
```perl
echo -e "忙しくてついったいじれない\nさみしい\nつらい" | perl -CIO -nle '$a.=substr($_,0,1);END{print $a}'
```

※Bashで実行してください。
GASでXPATHを使いたかったらスプレッドシート関数IMPORTXMLがあるよ

# 過去の失敗

* [Google Apps ScriptでHTMLテキストからDOMオブジェクトを生成したいが無理だった](https://qiita.com/tamaki-kz/items/c9f1e8a3df089083492d)

しかし、素晴らしいスプレッドシート関数を知った。

# IMPORTXML関数



> 例
>   IMPORTXML("https://en.wikipedia.org/wiki/Moon_landing", "//a/@href")
> 概要
>   XML、HTML、CSV、TSV、RSS フィード、Atom XML フィードなど、さまざまな種類の構造化データからデータをインポートします。
> URL
>   検証するページの URL です。プロトコル（「http://」など）も含めます。
> XPathクエリ
>   構造化データで実行する XPath クエリです。

# 解析したいページの要素をスプレッドシート上に展開

サンぷるとして適当に新宿の安全ナビを開いて、
https://www.gaccom.jp/safety/search/?p=13&c=104

Chromeあたりの開発モードで必要な箇所を見てみると、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202646/b4e0e2e5-83ba-0f9f-eda1-353dcfe562a7.png)

だいたいのclassがわかります（今回の場合は、liタグのmdl-list__itemクラス）


ここまで来たら、スプレッドシート上に1行、関数を書くだけです。

` =IMPORTXML("https://www.gaccom.jp/safety/search/?p=13&c=104", "//li[@calss='mdl-list__item']//h5[@calss='info_title']")`

![image.png](https://qiita-image-store.s3.amazonaws.com/0/202646/504c9655-f44a-df2a-566e-5fe2fbe39b81.png)

# スクリプトエディタからスプレッドシート上のセルと読み込むだけ

```javascript
function hoge(){
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("test");
  var arr = sheet.getRange(1, 1, sheet.getLastRow(), 2 ).getValues();
  
  arr.map(function(e) {return e.filter(function(f) {Logger.log(f)})});
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/202646/904efe4f-ed88-e154-27cd-3192f689d595.png)

**すっごい楽！**
WindowsユーザがMacOSを使う時にやると便利な設定


Macをクリーンインストール時に自分が毎回やる設定です。が、初めてMacを使う人にも役に立つかもしれないです。

# キーボード

以下の場所で変更します。

システム環境設定　→　キーボード　

## capsキー変更（日本語キーボード）

macは、windowsでのショートカットで利用するCtrlの役割がcommandになる。
（例：command+C コピー）

windowsのCtrlの位置がmacのcapsの位置にあるので、同じ配置でできるように変更する

修飾キー
　 Caps Lock を Commandに変更

## ファンクションキーの動作を変更

* Touch Barに表示する項目 -> F1.F2などのキー
* Fnキーを押して -> Control Stripを表示
     

<img width="500" alt="keyboard1" src="https://qiita-image-store.s3.amazonaws.com/0/10494/f9e06599-50c5-9803-9dee-b84ff8d07d1e.png">

## Windowの切り替え

Windowsと同じようにalt+Tabで同じアプリで開いているWindowの切り替えができるようにします。

→ ショートカットタブ で

次のウィンドウを操作対象にするをデフォルトの⌘ + F1から変更する

<img width="500" alt="keyboard2" src="https://qiita-image-store.s3.amazonaws.com/0/10494/02d4e2bb-1267-ecc9-5798-500710e82a38.png">

## Spotlightのショートカット無効化

他のアプリのショートカットと被りやすいのでなくしておきます

# Finder

以下の場所で変更します。

Finder →　環境設定

## 一般タブ

### 新規Finderで開く先を変更

一般タブで「新規Finderウィンドウで次を表示」でホームを選択する

<img width="400" alt="finder1" src="https://qiita-image-store.s3.amazonaws.com/0/10494/6e534ee7-1711-3e5f-0714-b3fc61014fca.png">


## サイドバータブ

Finderで常に表示する項目です。

![env-finder2.png](https://qiita-image-store.s3.amazonaws.com/0/10494/420818ea-a3eb-d535-26f7-23503f47e84c.png "env-finder2.png")

## 詳細タブ

### 拡張子を表示
「すべてのファイル名拡張子を表示」をチェック

### 検索実行時の検索対象を変更
「検索実行時」を「現在のフォルダ内を検索」

<img width="400" alt="finder3" src="https://qiita-image-store.s3.amazonaws.com/0/10494/fd22c511-2577-6070-d35b-b1c4deeb8004.png">


## コマンドで変更する内容

ターミナル.appなどで変更します。

コマンド実行後は必ず以下をしないと反映されません。

```
$ killall Finder
```

### 隠しファイルを表示する

デフォルトではFinder上で「.」ファイルは不可視なのでこれを変更する

```
$ defaults write com.apple.finder AppleShowAllFiles -boolean true
```

### 終了できるようにする

デフォルトではFinderに終了がないのでこれを変更する

```
$ defaults write com.apple.finder QuitMenuItem -bool true
```

### タイトルにフルパスを表示する

ウインドウタイトルにもパスを表示する

```
$ defaults write com.apple.finder _FXShowPosixPathInTitle -bool true
```

### ネットワーク上に.DS_Storeを作らない

Mac OS Xでは、フォルダの表示形式を変更すると「.DS_Store」という不可視ファイルができるが、これをネットワーク上には作らなくする

```
$ defaults write com.apple.desktopservices DSDontWriteNetworkStores -bool YES
```

# Dock

以下の場所で変更します

システム環境設定→　Dock

## Dockを自動で隠す

<img width="600" alt="dock" src="https://qiita-image-store.s3.amazonaws.com/0/10494/243fd4d1-fc4a-58b4-1d5b-bdec56a80d93.png">



## コマンドで変更する内容

### 隠しているアプリを半透明で表示する

```
$ defaults write com.apple.Dock showhidden -boolean true
```

```
$ killall Dock
```

# Mission Control

以下の場所で変更します

システム環境設定 →　Mission Control

<img width="600" alt="missioncontrol" src="https://qiita-image-store.s3.amazonaws.com/0/10494/061eed30-13ec-ee55-6a66-43a43b2fef5b.png">


# その他

残バッテリーを表示する

システム環境設定→　Dockとメニューバー→　バッテリー

「割合（%）を表示」にチェック

以下はBigSur以前

<img width="300" alt="battery.png" src="https://qiita-image-store.s3.amazonaws.com/0/10494/da90c8d1-e97b-8d8a-c6b4-d20fd1d9716c.png">
Webページ作成時に使ってみたいCSSフレームワークメモ

## いろいろ入った満足パックタイプ
### フラットUI/Bootstrap系

#### Bootflat
Bootstrap 3ベース
公式サイト:http://bootflat.github.io/

#### Bootstrap
めっちゃ有名・コンポーネントたくさんある・ググりやすい
公式サイト:https://getbootstrap.com/

#### Bulma
公式サイト:https://bulma.io/

#### Flat UI
公式サイト:http://designmodo.github.io/Flat-UI/

#### Foundation
公式サイト:https://foundation.zurb.com/

#### Siimple
公式サイト:https://siimple.juanes.xyz/

#### Spectre
公式サイト:https://picturepan2.github.io/spectre/

### マテリアルデザイン

#### Materialize
公式サイト:https://materializecss.com/

#### Material-UI
公式サイト:https://material-ui.com/

#### Material Design Lite
公式サイト:https://getmdl.io/

### その他
#### UNY
公式サイト:https://unys.github.io/uny/index_ja.html
#### lit
公式サイト:https://ajusa.github.io/lit/
#### Milligram
公式サイト:https://milligram.io/

## 一つの要素に特化したタイプ

### ナビゲーションバー
#### Luxbar
公式サイト:https://balzss.github.io/luxbar/

### モーダル
#### Remodal
公式サイト:http://vodkabears.github.io/remodal/
nginxへの接続をCloudFlareからのアクセスに限定させるには？

# nginxへの接続をCloudFlareからのアクセスに限定させるには？

	$ sudo su -
	# cd /etc/nginx
	# curl https://www.cloudflare.com/ips-v4 | perl -nlE 'say "allow $_;"' > cloudflare-ipv4-only.conf
	# echo 'deny all;' >> cloudflare-ipv4-only.conf

あとは、任意のnginx.confの location の部分で cloudflare-ipv4-only.conf を include すればよい。
Google OAuth2で提供されるID tokenの詳細（翻訳）

なかなか正式な情報を見つけられなかったので、メモ。

ID tokenはJWTで以下のサンプルのようなjsonで提供される。

```json
{"iss":"accounts.google.com",
 "at_hash":"HK6E_P6Dh8Y93mRNtsDB1Q",
 "email_verified":"true",
 "sub":"10769150350006150715113082367",
 "azp":"1234987819200.apps.googleusercontent.com",
 "email":"jsmith@example.com",
 "aud":"1234987819200.apps.googleusercontent.com",
 "iat":1353601026,
 "exp":1353604926,
 "nonce": "0394852-3190485-2490358",
 "hd":"example.com" }
```

それぞれのクレームは以下のような意味がある。

<pre>Claim        </pre> | <pre>Provided</pre> | Description
---|---|---
iss|always|レスポンスの発行者の発行者識別子。GoogleのID tokenでは常に`https://accounts.google.com`または`accounts.google.com`。
at_hash||access tokenのハッシュ。access tokenとID tokenが結び付けられているかどうかを検証できる。サーバーフローの中でID tokenがaccess tokenと共に発行されている場合は、常に含まれている。CSRF攻撃に対する防御のための代替的なメカニズムとして利用することができるが、[Step1](https://developers.google.com/identity/protocols/OpenIDConnect#createxsrftoken)と[Step3](https://developers.google.com/identity/protocols/OpenIDConnect#confirmxsrftoken)に従っているのであれば、access tokenの検証は必要ない。
email_verified||ユーザーのメールアドレスが検証済みであればtrue、そうでなければfalse。
sub|always|ユーザーの識別子であり、全てのGoogleアカウントの間で唯一かつ再利用されない。Googleアカウントは異なる時点で複数のメールアドレスを持つことができるが、`sub`は変化することがない。アプリケーションの中でのユーザーの固有識別子としては、`sub`を使う。
azp||承認済みプレゼンターのclient_id。このクレームは、ID tokenを要求する当事者がID tokenのオーディエンスと同じでない場合にのみ必要となる。これは、WebアプリケーションとAndroidアプリのclient_idが異なるが、同じプロジェクトを共有するハイブリッドアプリのような場合に該当する可能性がある。
email||ユーザーのメールアドレス。これは唯一のものではない可能性があり、ユーザーの主キーとしては適さない。Scopeに`"email"`を含んでいる場合にのみ提供される。
profile||ユーザーのプロフィールページのURL。次の場合に提供される。<br>・ リクエストしたscopeが`"profile"`を含んでいる<br>・ ID tokenがトークンリフレッシュから返されている<br>`profile`クレームが存在する場合、あなたのアプリのユーザーレコードを更新するためにこれを利用できる。このクレームが存在することは保証されていないことに注意。
picture||ユーザーのプロフィール画像のURL。次の場合に提供される。<br>・ リクエストしたscopeが`"profile"`を含んでいる<br>・ ID tokenがトークンリフレッシュから返されている<br>`picture`クレームが存在する場合、あなたのアプリのユーザーレコードを更新するためにこれを利用できる。このクレームが存在することは保証されていないことに注意。
name||表示可能な形式の、ユーザーのフルネーム。次の場合に提供される。<br>・ リクエストしたscopeが`"profile"`を含んでいる<br>・ ID tokenがトークンリフレッシュから返されている<br>`name`クレームが存在する場合、あなたのアプリのユーザーレコードを更新するためにこれを利用できる。このクレームが存在することは保証されていないことに注意。
aud|always|このID Tokenが対象としているオーディエンスの識別子。あなたのアプリケーションのOAuth 2.0 クライアントIDの一つでなければならない。
iat|always|ID Tokenが発行された時刻。Unix time（整数秒）で表現されている。
exp|always|ID Tokenの有効期限が切れる時刻。Unix time（整数秒）で表現されている。
nonce||認証リクエストの中であなたのアプリから提供されたナンスの値。この値が一度だけ表示されるようにすることで、リプレイ攻撃に対する保護を強化する必要がある。
hd||ユーザーのホストされているG Suiteドメイン。ユーザーがホストされているドメインに属している場合にのみ提供される。

"[OpenID Connect](https://developers.google.com/identity/protocols/OpenIDConnect)" by Google is licensed under [CC BY 3.0](https://developers.google.com/identity/protocols/OpenIDConnect)

ところで、1、2列目が細くなりすぎるのでヘッダを`<pre>`で囲ってみたら一応なんとかなったんですが、他に方法ないんでしょうか…？
Rails フォーム（form_for,nested_form,fields_for） による複数同時投稿（親子、親子孫、他人）

#index
### 1.親子同時投稿
### 2.他人同時投稿
### 3.親子孫同時投稿

railsの投稿において大事なことは２つあると思います。どのようにしてパラメータを送るかと、それをどういうストロングパラメータによってコントローラーで受け取るかです。そのためここではformの書き方、ストロングパラメータの書き方だけを紹介します。自分でjsを書くなどといったことは一切やらず、出来るだけシンプルにやっています。モデルや、コントローラーなどは単体で投稿する時とほとんど変わらないです。

# 1.親子同時投稿

ここではgem 'nested_form'を使う。cocoonでも同じことが出来ます。

```erb
<%= nested_form_for @post do |f| %>
 
	<%= f.label :title %>
	<%= f.text_field :title %>
  
  	<%= f.fields_for :post_images do |t| %>
	    <%= t.label :image %>
	    <%= t.attachment_field :image %>
	    <%= t.link_to_remove 'delete' %>
	<% end %>
  <%= f.link_to_add 'add', :post_images %>
  <%= f.submit %>
<% end %>
```


ストロングパラメータ

```rb
private
	def post_params
		params.require(:post).permit(:title,post_images_attributes: [:id, :image, :comment, :_destroy])
	end
```

### 2.他人同時投稿
これはpostが送られなさそうだが、パラメータをみて見るとちゃんと送られています。

```erb
<%= form_for(@book) do |f| %>
	<div>book_title</div>
	<div><%= f.text_field :title %></div>
	<div>book_body</div>
	<div><%= f.text_field :body %></div>

	<%= fields_for(@post) do |t| %>
		<div>post_title</div>
		<%= t.text_field :title %>
	<% end %>
	<%= f.submit "toukou" %>
<% end %>
```

```
 Parameters: {"utf8"=>"✓", "authenticity_token"=>"#####", "book"=>{"title"=>"ddd", "body"=>"dd"}, "post"=>{"title"=>"ddd"}, "commit"=>"toukou"}
```

ストロングパラメータは二つのモデルに対して、別々に書けばいいだけです。

# 3.親子孫同時投稿
これがもっとも難しかったです。1.と同じくnested_formというgemを使って作ります。group
が親、memberが子、petが孫です。
new.html.erb、_member_fields.html.erb、_pet_fields.html.erbという３つのviewページが必要です。全て同じディレクトリにおきます。

```erb:new.html.erb
<%= nested_form_for(@group) do |f| %>
	<%= f.label :group_name %>
	<div class="group_name"><%= f.text_field :group_name, class: "field" %></div>
	<div class="members_field">
		<div class="member_name"><%= f.fields_for :members %></div>
		<div class="member_name"><%= f.link_to_add 'member_add', :members %></div>
	</div>
	<%= f.submit %>
<% end %>
```

```erb:_member_fields.html.erb
<div class=""><%= f.label :member_name %></div>
<div class=""><%= f.text_field :member_name,class: "field" %></div>
<div class="pet_name"><%= f.fields_for :pets %></div>
<div class="pet_name"><%= f.link_to_add 'pet_add', :pets %></div>
```

```erb:_pet_fields.html.erb
<div class=""><%= f.label :pet_name %></div>
<div class=""><%= f.text_field :pet_name, class: "field" %></div>
```

こういう感じのネストされたパラメータが送られます。

```
Parameters: {"utf8"=>"✓", "authenticity_token"=>"###", "group"=>{"group_name"=>"group1", "members_attributes"=>{"0"=>{"member_name"=>"member1", "pets_attributes"=>{"0"=>{"pet_name"=>"pet1-1"},
 "1538144621725"=>{"pet_name"=>"pet1-2"}, "1538144623037"=>{"pet_name"=>"pet1-3"}}}, "1538144619585"=>{"member_name"=>"member2", "pets_attributes"=>{"1538144620711"=>{"pet_name"=>"pet2-1"}, "1538144624584"=>{"pet_name"=>"pet2-2"}}}}}, "commit"=>"Create Group"}
```

ストロングパラメータはこんな感じです。

```rb
params.require(:group).permit(:group_name,:members_attributes => [:id, :member_name, :_destroy, :pets_attributes => [:id, :pet_name, :_destroy]])
```

以上で終わりです。まだいい方法がありそうなので、あったら教えてください。
2018年9月第4週　今週気になった記事まとめ

# 今週気になった記事まとめ
##■Amazonのスマートコンセント「Amazon Smart Plug」はスマートホームハブ機能搭載で25ドル
http://www.itmedia.co.jp/news/articles/1809/21/news075.html
見た感じは電力のON/OFFしか制御できなそうだけどどうなんだろうか。
個人的にはAlexa対応の赤外線コントローラをオフィシャルで廉価に出してくれると色々活用できてありがたい。

##■過重労働対策に？定時になると手元から逃げる残業防止ロボットマウス「Balance Mouce」
https://techable.jp/archives/83969
捕まえるのに時間食ってより残業する未来が見える。

##■プログラマーはなぜ夜遅くに仕事をするのか？という3つの理由
https://gigazine.net/news/20130117-midnight-programmers/
ちょっと疲れているのが一番効率的ってのが意外で、そしてどうやって再現できるのか難しそう。

##■ルービックキューブが勝手に動いて自分で色をそろえてくれる「全自動ルービックキューブ」のすさまじいムービーが公開中
https://gigazine.net/news/20180925-self-solving-rubiks-cube/
最高に無意味な技術だ（良い意味で）

##■歩くと安くなる保険で、歩く人続々。北米最古の生命保険会社がウェアラブル端末を無料で配布
https://www.gizmodo.jp/2018/09/insuarance-walking-and-free.html
利用者は健康になって安くなるし、保険会社は保険金を払う可能性を減らしつつ長期間支払いをゲットできる。
2重でWin-Winになっている構造はすごいなぁ。

##■[アップデート] RDS および Aurora に削除保護機能がつきました！
https://dev.classmethod.jp/cloud/aws/rds-and-aurora-deletion-protection/
単純なオペミスを防ぐのに有用な設定なので、他のサービスにも普及することはありがたい。

##■指紋、顔、網膜…。生体認証って、実際みんな使ってる？
https://www.gizmodo.jp/2018/09/mugendai-biometrics.html
種類によってばらつきはあるにせよ、生体認証がだいぶ一般化してきている。
ちょっと前なんて虹彩認証とかをデータセンターで見かけるくらいだったのだが。
こういう関連の仕事も増えてくるのかな。

##■あなたの残業、本当に必要ですか？
http://www.itmedia.co.jp/business/articles/1809/28/news024.html
感覚としては持ってたけれど、仕事の密度を高めるっていう言葉で定義できていなかったので読んで良かった。
この筆者の本は持っていてまだ読んでないので、読んでみようと思う。
RxSwiftで2つのobserveをまとめて、処理を1回しか流れないようにする

ちょっとタイトルだけだと何を言っているかわからないかもしれない

# 2つのデータの更新を購読していた時に困った

```komatta.swift
UserDefaults.standard.rx.observe(String.self, "foo")
    .subscribe(
        onNext: {
            // イケてるかもしれない処理を呼び出す
        }
    )

UserDefaults.standard.rx.observe(String.self, "bar")
    .subscribe(
        onNext: {
            // イケてるかもしれない処理を呼び出す
        }
    )
```

とまぁ、こんな感じです。
そして、この上の2つの関数はそれぞれ同じ関数……しかも外部APIを叩く系の処理を呼び出しているんですね。
普段であれば問題なかったんですが……

# そして事件は起きた

```jiken.swift
UserDefaults.standard.archive(key: "foo", value: "foo_value")
UserDefaults.standard.archive(key: "bar", value: "bar_value")
```

そう、fooとbarを関数内で同時に更新する処理が現れてしまったのです……
subscribeしていたのもあって、2つそれぞれ実行されてしまうことに:skull:

# ambだとダメだったよ……

排他制御を考えて実装する等、アプローチは色々とあることにはあります。
ただ、そこはさすがのRxSwiftでした。ちゃんと問題を解決する機能が用意されています:blush:

```kawano_nagare_wo_hitotu_ni.swift
let foo = UserDefaults.standard.rx.observe(String.self, "foo")
let bar = UserDefaults.standard.rx.observe(String.self, "bar")

foo.amb(bar).subscribe(
    onNext: {
        // イケてるかもしれない処理を呼び出す
    }
)
```

ambについては[ここ](http://reactivex.io/documentation/operators/amb.html)で！


と、ウキウキルンルン気分で実装していたんですがダメでした:joy:


```bakuhatsu.swift
// fooの方が先なので、fooの購読のみ有効になる
let foo = UserDefaults.standard.rx.observe(String.self, "foo")
let bar = UserDefaults.standard.rx.observe(String.self, "bar")


// ...略

// barだけで更新すると、fooの購読だけが有効になっているので動かない！
let bar = UserDefaults.standard.rx.observe(String.self, "bar")
```

:sob::sob::sob:

# 今度こそ1回しか実行されないようにする

@kakajika さんに指摘していただいて答えが見つかりました。
コメント本当にありがとうございます:bow::bow::bow:

```kondo_koso_kawano_nagare_wo_hitotu_ni.swift
let foo = UserDefaults.standard.rx.observe(String.self, "foo")
let bar = UserDefaults.standard.rx.observe(String.self, "bar")

Observable.of(firstObserve, secondObserve).merge()
    .flatMapFirst {
        // 非同期処理を返却
    }
    .subscribe(
        onNext: { result in
            // 非同期処理の結果を元に、イケてるかもしれない処理を呼び出す
        }
    )
```

まず[merge](http://reactivex.io/documentation/operators/merge.html)で、fooとbarのobserveを1つにしてみました。
このままだと、更新される度に2回呼ばれることは変わりないので、
flatMapFirstを入れて非同期処理が実行中であれば後続の処理を呼び出さない！　という風にしています。

[debounceやthrottle](http://reactivex.io/documentation/operators/debounce.html)でもいいかな？と思ったのですが、時間の設定が必要であり、変更の反映までほんの僅かですが時間がかかりそうだったので、このパターンではflatMapFirstだけにしています。

これで正常に動作するかどうかは……要テストなので、テストしてきます:joy:
Herokuの複数のAppのアプリケーションログをPaperTrailで収集するメモ

# 前提
- Heroku上にAppを2つ作成していること
    - 	[小さなRailsアプリをHerokuにデプロイするメモ](Qiita https://qiita.com/kure/items/aac9bf700b03d8d3ca28) のイメージ
- PaperTrailのアカウントが作成済であること

# メモ

HerokuからPaperTrailにログを収集させるには

- PaperTrailのAdd-onを使う方法
- PaperTrailのAdd-onを使わずHerokuのDrainでPaperTrailのエンドポイントにログを流すよう設定する方法

の2種類あるらしい。
前者の場合は、一つのAppにつき、PaperTrailのダッシュボードが1つの紐づけとなる（？。ように思えた。もしかしたら設定方法があるのかもしれない）ようなので、後者の方法で設定を行う。

## 手順

1. PaperTrailにログイン、ダッシュボードの右上にある「Add Systems」を押下する
2. 上部のプルダウンの「I'd like to aggregate」の部分で「Heroku]を選択する
3. 左部の選択画面で「Method2: Standalone」を選択する
4. 右部の「Setup Heroku drain」に記載のコマンドをコピーする
5. 手元のコンソールでプロジェクトディレクトリにて、コピーしたコマンドを実行する。これでPaperTrailにそのAppのログが流れるようになる
6. もう一方のプロジェクトでも同様に実行する

基本は以上。
後は、必要に応じて先程のPaperTrailの画面の続きの「3. Name the app」を参照して、PaperTrail上の名前を変更したり、グループを作成、アラートを作成する。
Lightningコンポーネント（JSテクニック）

#### Base64データをFileに変換する

```
changeBase64ToFile: function(base64) {
    // decode base64
    var bin = atob(base64.replace(/^.*,/, ''));

    // convert to binary
    var buffer = new Uint8Array(bin.length);
    for (var i = 0; i < bin.length; i++) {
       buffer[i] = bin.charCodeAt(i);
    }
    // create a File object
    return new File([buffer.buffer], name, {type: "application/vnd.ms-excel"});
}
```

#### ダイアログボックスを開いた時に背景のHTMLをスクロールしないようにする

自前でモーダルダイアログを表示した際に、背景のHTMLがスクロールしないようにするには、bodyタグのoverflow属性で制御する。

ダイアログを表示する時
`document.body.style.overflow = 'hidden'`

ダイアログを閉じる時（これをやらないと、親画面のスクロールができないままになる）
`document.body.style.overflow = 'null'`
MbedでCppUTestを試す

Mbed環境を使用してCppUTestを動かした時の備忘メモ。基板はSTMicroelectronics社のNucleo F401REを使用した。

## 準備

Mbed環境を使用するにはラインセンス登録をする必要がある。ライセンス登録～プログラムの作成は下記を参考にした。

[mbedではじめよう](http://make.bcde.jp/armmbed/mbed%E3%81%A6%E3%82%99%E3%81%AF%E3%81%97%E3%82%99%E3%82%81%E3%82%88%E3%81%86/)

以降、リンク先で示されているLチカのプログラムが作成された後の作業を記載する。

## CppUTestライブラリのインポート

Mbed環境にポート済のCppUTestライブラリがあるため、今回はそれを使用した。

プログラムワークスペースにあるNucleo_blink_ledを選択した状態で[インポート]を選択する。[ライブラリ]タブを選択し、検索ウィンドウに「cpputest」と入力する。

![import-cpputest.PNG](https://qiita-image-store.s3.amazonaws.com/0/167057/923306be-17d8-746d-4e2b-9dceb14a90e8.png)

同じ作者でCpputest-mebed-portとcpputestの2つのライブラリが表示されるが、違いがわからなかった。

[Mbedの公式ページ](https://os.mbed.com/users/PrzemekWirkus/notebook/mbed-sdk---cpputest-usage/)では、cpputestの方が紹介されていた(Do I need CppUTest port for Mbed SDK?の項参照)ので、今回はこちらをインポートする。

## 動作確認

main.cppを下記のように変更する。

``` cpp
#include "CppUTest/CommandLineTestRunner.h"

TEST_GROUP(FirstTestGroup) {};

TEST(FirstTestGroup, FirstTest) {
   FAIL("Fail me!");
}

int main(int ac, char** av) {
    return CommandLineTestRunner::RunAllTests(ac, av);
}
```

ビルドしたところ、下記のようなエラーが出た。

`Error: Undefined symbol console (referred from ../../build/cpputest/src/Platforms/armcc/UtestPlatform.NUCLEO_F401RE.o).`

[cpputestライブラリ](https://os.mbed.com/users/rgrover1/code/CppUTest/)のページを確認したところ、テストレポートをコンソール出力するには、UtestPlatform.cppを変更する必要があるかも、との記述有。

コンソール出力するには、`console`の定義をする必要があるため、main.cppに`Serial console(SERIAL_TX, SERIAL_RX);`と、mbed.hのインクルードを追加する。

ビルドが通った。あとは、バイナリをデバイスに保存すると、TeraTermなどで出力を確認できる。

![test-report.PNG](https://qiita-image-store.s3.amazonaws.com/0/167057/12dff6bf-fe5f-9118-a7e5-8a875c250867.png)
fatal: Not a valid object name: 'master'. て言われたときどうした？

```
$ git branch master
fatal: Not a valid object name: 'master'.
```

master ブランチを作ろうとしたら怒られたので、

```
$ git add .
$ git commit -m "First commit."
```

コミットすることで master ブランチを作って迂回したっす:relaxed:
ES6でGulpを書きたかったから試した

最近Node.jsの勉強をしていて、その一環でGulpを使うことがありました
個人的にES6が好きなのでGulpをES6で書けないかな〜
と思ったらあっさり動きました
メモがてらQiitaに初挑戦

[こちら](https://markgoodyear.com/2015/06/using-es6-with-gulp/)を参考にしました
ちなみに私はGulpは理解していますがBabelは理解してません
Babel使います

# 前提
npmとgulpのバージョンは以下の通りです

```
$ npm -v
6.4.1
$ npx gulp -v
CLI version 3.9.0
Local version 3.9.0
```

なんか3.9.1だと`Failed to load external module @babel/register`と怒られてしまうので、`npm i gulp@3.9.0 -D`とバージョンを明示してインストールしました
3.9.1で上記のエラーの解決方法をご存じの方がいらっしゃったら教えてください

# 下準備
まずはプロジェクトを作成しましょう

```
$ mkdir hoge
$ cd ./hoge
$ npm init -y
```

続いてモジュールのインストール
GulpとBabelを入れます
今回はとりあえず文字列を表示することを目標としますので
それ以外は何も入れません

```
$ npm install gulp babel-core babel-preset-es2015 -D
```

# Babelの設定
次にBabelの設定
Babelに関しては何も知らないので
これを設定と言っていいのかわかりませんが
rcがついているので設定ファイルでしょう(適当)

`.babelrc`を作って、そこにES6を使う旨を記入します

```json:.babelrc
{
    "presets": ["es2015"]
}
```

# Gulpfileの作成
では本題のGulpfileを作成します
`gulpfile.js`ではなく、`gulpfile.babel.js`であるところに注意
ここを忘れてて動かないっていう記事をどっかで読んだ気がします

```javascript:gulpfile.babel.js
'use strict';

import gulp from 'gulp';

const hoge = "hogehoge";

gulp.task("default", () => {
    console.log(hoge);
});
````

納得のいくGulpfileが書けました
では実行

```
npx gulp
[16:15:37] Requiring external module babel-core/register
[16:15:37] Using gulpfile ~/test-gulp-es6/gulpfile.babel.js
[16:15:37] Starting 'default'...
hogehoge
[16:15:37] Finished 'default' after 155 μs
```

無事実行もできました♡

昨日今日で身につけた知識で書いているので、もし間違えがあれば教えてください