OmniAICreator/Qiita-1.07M huggingface dataset:
サマーウォーズで「けんじ君」は「なつき先輩」の誕生日の曜日をどうやって特定したのか??

みなさんご存知サマーウォーズで、けんじ君となつき先輩が曽祖母の誕生会のための電車で移動中、けんじ君がなつき先輩の誕生日から曜日を当てるシーンがある。

僕が初めてサマーウォーズを見たのが、中学生(おそらく)の時で「え?なんでわかるん?すごくない？」となったのを今でも覚えている。さらに、けんじ君が「モジュロ演算ってのを使って！」と言っており、「あ、この人やばいわ。」となったのも覚えている。

なぜか今更になって、「あれどうやったんやろ？」と思ったので、調べて実装した。

## ツェラーの公式
「日付」「曜日」「特定」などでググると簡単に公式が出て来た。ツェラーの公式というもので、年・月・日から曜日がわかるらしい。

[ツェラーの公式 wikipwdia](https://ja.wikipedia.org/wiki/%E3%83%84%E3%82%A7%E3%83%A9%E3%83%BC%E3%81%AE%E5%85%AC%E5%BC%8F)

## 実装
数式ははmarkdownでうまく書けなかったので、Rubyで実装した。色々な形があるが、その中の一例。

```ruby

year = 2019 # <= 西暦
month = 12 # <= 月
day = 10 # <= 日

# ツェラーの公式
def Zeller(year, month, day)
  weeks = ["Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
  remainder = (day + (month + 1) * 26 / 10 + year % 100 + (year % 100) / 4 + (year / 100) / 4 - 2 * (year / 100) ) % 7
  weeks[remainder]
end

p Zeller(year, month, day)
```

```
Tuesday
```

正しくできた。

土曜日が基準になっているようだが、7で割る前の数を調整すれば、日曜日・月曜日から始まる配列でも対応できる。


公式がわかったから曜日すぐわかるやん！とはならず、計算するには電卓を叩きたくなる。

## 曜日の基準っていつ?
ここで素朴な疑問として、曜日の始まりって何曜日?が出て来た。

### 仮説　西暦1年1月1日って日曜日？？
実際にツェラーの公式で計算すると、**Sutuday**らしい。。微妙な。。。

***追記***
wikipediaに以下の説明があった.

```
西暦4年3月1日以前は閏年の規則が異なるので、ユリウス暦の公式も適用できない。
```

ということで、西暦1年にはこの公式は利用できなかった。。。

### 結果　
調べるとwikipediaに以下の説明があった。

```
日付から曜日を特定するには、ある1日についてそれが何曜日かを決めておく必要がある。

これは古代からデファクトスタンダード（事実上の標準）として暗黙裏に広く認められ使われていたが、あらためてISO 8601で「2000年1月1日を土曜日とする」と定義された。
日本ではJIS X 0301がそれに従っている。
```
[wikipedia 曜日](https://ja.wikipedia.org/wiki/%E6%9B%9C%E6%97%A5#%E6%9B%9C%E6%97%A5%E3%81%AE%E5%9F%BA%E7%82%B9)

結構最近定義されたんやな。。

2000年を基準として、公式をもっと簡約化できそうな気もする。


### まとめ
けんじ君はすごい。

「よろしくお願いしまぁぁぁぁぁす!!!!!!」のシーンでRSA暗号暗算で解読することに比べたら朝飯前なのか。。。
[Kotlin] isEmpty(), isBlank()などの違い早見表

## 背景
そもそも、なぜこの記事を書こうと思ったのかと言うと、PHPのメソッドの早見表はあるのに、Kotlinが無いな・・・。って思っただけです。

## 文字比較の早見表

書き方のフォーマットは、この記事参考にしてます。「[PHP isset, empty, is_null の違い早見表](https://qiita.com/shinichi-takii/items/00aed26f96cf6bb3fe62)」

|値|isEmpty|isNotEmpty|isNullOrEmpty|isBlank|isNotBlank|isNullOrBlank|orEmpty|
|:--|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
|var=""|**true**|*false*|**true**|**true**|*false*|**true**|空文字列|
|var=" "|*false*|**true**|*false*|**true**|*false*|**true**|スペース|
|var=null|*Error*|*Error*|**true**|*Error*|*Error*|**true**|空文字列|
|var="1"|*false*|**true**|*false*|*false*|**true**|*false*|1|
|var="0"|*false*|**true**|*false*|*false*|**true**|*false*|0|

* Errorとある箇所についてはそもそもコンパイルエラーを起こします。
* null禁止ですね

isNullOrBlank()が最強な気がしてきた・・・w

# 参考リンク
* Kotlin言語仕様
    * https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.text/index.html
* PHP isset, empty, is_null の違い早見表
    * https://qiita.com/shinichi-takii/items/00aed26f96cf6bb3fe62
Genetic Programmingに前処理は必要なのか？

#はじめに
今回は、Genetic Programming(GP)に前処理が必要なのかを検証します．
GPが何なのかは、[以前の記事](https://qiita.com/shinjikato/items/9c336d2cf25aa7fbdec8)で解説しています．

なお，ここでいう前処理は，正規化や標準化を指しており，欠損値埋めや分布の変形は含みません．


#どういうこと？
機械学習で関数近似を行う場合は，一般的に**正規化**や**標準化**といった前処理を挟みます．

これは，一般に機械学習における入力の定義域が一定に想定されていることに起因します．例えば，Neural Networkにおいて，最小処理単位である活性化関数は以下のような形をしています(イメージ図です)．

![Untitled Diagram.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219048/2021d913-06bd-cf67-f143-13a77cf64523.jpeg)

このとき，0入力で値が大きく変化することや，-3~3の間以外では大きく変化しないことを考えると，前処理の一つの目的は，この暗黙的な定義域に，入力データの分布を持ってくることにあります(もしも前処理をしない場合には，bias項が過度に重要なパラメータとなってしまう)．

![Untitled Diagram-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219048/c429ce1c-4e32-dd7c-3a65-c8ead75b8096.jpeg)


つまり，前処理というものは機械学習のために存在するのです．一方で、遺伝的プログラミングでは前処理を必須としていません(理論上)．なぜなら，遺伝的プログラミングにおける最小処理単位のノード関数は，汎用的数学関数なために定義域が存在しないのです．例えば，四則演算や三角関数に定義域は存在しません(logを除く)．

![Untitled Diagram-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219048/00bafff1-ca4d-3bbb-b4eb-2891ba284dff.jpeg)



むしろ，三角関数やExp関数では，入力の定義域を[0.0, 1.0]とした場合は，線形演算に近づいてしまうため，演算子そのものの意味を成していません．さらに，標準化によって0を平均値にすると，除算関数には発散点が存在するため，関数近似がバグります．

![Untitled Diagram-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219048/512edcd4-9561-d955-a7e4-b18da05df16d.jpeg)

実際，古いGPの文献を見ていると，前処理の記述はありません．最近になって，機械学習とフェアに競うために前処理をしている印象を受けます．これは，前処理をする手法としない手法は，真の意味で比較できないためです(前処理の妥当性についての議論が始まってしまうため)．

#実験
##目的
GPに前処理が必要なのかを調べたのですが，GP **で** 機械学習の前処理する文献しか見つけることができなかったので，実際に実験して確かめてみます．

##実験内容
bostonおよびdiabetesの回帰問題に対して，次の結果をとります．

- 正規化(MinMaxScaler)を前処理とするGP
- 標準化(StanderdScaler)を前処理とするGP
- 前処理をしないGP

このとき，前処理をしたGPは，関数近似した後にその関数の出力に逆変換をかけます．これにより，生データのスケールで出力が得られます．

![Untitled Diagram-5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219048/46d197b5-9de7-5757-c057-69b809f9935b.jpeg)

今回のGPのパラメータは以下のとおりです．

- Max Generation : 200
- Population Size : 500
- Crossover : subtree swap
- Crossover rate : 0.8
- Mutation : subtree recreate
- Mutation rate : 0.2
- Selection : Batch Tournament Selection
- Batch Size : 8
- Tournament Size : 64
- Depth Limit : 6
- Function Nodes : [＋，-，×，÷，sin, cos, exp, log]
- Terminal Nodes : [$x_i$, ERC]
- ERC range : [0.0, 1.0]

また，実験では各GPを10試行し，平均値で比較します．データのスプリットは7:3です．

##実験結果
以下では学習データ(training)とテストデータ(test)におけるMAE誤差を比較します．

###Boston Dataset

|       |training|test  |
|-------|--------|----- |
|正規化GP|22.310  |22.250|
|標準化GP|22.236  |22.563|
|GP     |20.560  |22.145|

思った以上に差がついてないです．前処理ありとなしで結果が大きく変わると思っていたのですが...
結果的には前処理なしGPが最も良い結果ですが，testのMAEはほとんど変わりません．

###Diabetes Dataset

|       |training|test   |
|---    |--------|---    |
|正規化GP|155.389 |152.868|
|標準化GP|147.185 |144.136|
|GP     |150.205 |150.049|

こちらのほうが，スケールが大きいので差が明確です．なんと標準化GPがもっとも良い結果でした．正直，ゼロを平均とする標準化はGPにとって悪影響が出ると思っていたのですが...．

#おわりに
結論から言うと，**問題依存なので，すべての方法を試すべき**ということがわかりました．実験する前には，前処理しない方がいい結果を出す気がしていたのですが...．

今後，問題数を増やして一般性を試してみたいと思います．また，今回の結果は10試行平均なので，ちょっと乱数の影響が見えます．本当は100か1000試行平均をするべきなので，次回への課題としておきます．

さらに，今回の結果はほとんど差がつかなかったことを考えると，**機械学習では前処理は必須**ですが**GPでは必須でもない**ということも言えます．これはちょっと面白い結果です．
TortoiseGitでBitBucketのリポジトリをクローンする

### TortoiseGitの資格情報を設定
TortoiseGitのログインユーザー設定をBitBucketのアカウント情報に合わせる
TortoiseGitの設定→Git を選択したときに表示されるダイアログでOKを押下
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147857/08f3f098-5c12-4813-3619-402ec4264a31.png)

ユーザー情報にBitBucketのアカウント情報を設定して適用ボタンを押下
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147857/2b3a08d3-d3e6-fa19-c5e6-f0a553c7064a.png)

BitBucketのリポジトリトップページから「クローンの作成」でhttpsパスをコピー

コマンドプロンプトを起動し、リポジトリを配置したいディレクトリまで移動して以下コマンド実行
git clone https://<<リポジトリパス>>

BitBucketアカウントのパスワードを入力するダイアログが表示されるので、パス入力するとリポジトリがクローンされる
新しいFragmentTemplateをためそう

- この記事はAndroid 初心者向け Advent Calendar 2019 の13日目の内容です:snowman2:

# はじめに
- Android Studio 4.0 Canary バージョンで新しいFragmentTempleteが追加されました。
- 追加されたTempleteを試してどのように適応されるか確認していきましょう。

## 事前準備
- [Android Studio 4.0.5](https://developer.android.com/studio/preview)（記載時点の最新バージョン）
- 任意のAndroidプロジェクト

## 追加されたFragmentTempleteは？

|Android Studio 3.5|Android Studio 4.0|
|---|---|
|![fragment_template_3_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495289/8ac06129-9252-34d3-a972-4728a7a698ca.png)|![fragment_template_4_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495289/abcd4860-5f35-5077-66d5-307031acf564.png)|

### LoginFragment

![スクリーンショット 2019-12-10 23.30.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495289/07a97579-bc56-cf47-227e-15b3f4c446fe.png)


- 名前の通り、ログイン風UIが生成されるテンプレート

#### 追加ファイル（View関連）

- LoginFragment.kt
    - Viewを構成するFragmentファイル
- fragment_login.xml
    - LoginFragmentで使用しているレイアウトファイル
- LoggedInUserView.kt
    - 認証済みユーザー情報

#### 追加ファイル（ViewModel関連）

- LoginViewModelFactory.kt
    - LoginViewModelを生成する為のFactoryクラス
- LoginViewModel.kt
    - ViewModelの処理を実装しているクラス
- LoginResult.kt
    - Repositoryの処理を返却するためのデータクラス
- LoginFormState.kt
    - UIの入力状態を返却するためのデータクラス

#### 追加ファイル（Model関連）
- LoginRepository.kt
    - Repositoryの処理を実施するクラス
- LoginDataSource.kt
    - ログイン処理を実施するクラス
- LoggedInUser.kt
    - ログイン情報を返却するデータクラス
- Result.kt
    - DataSourceからの処理結果を返却するクラス

#### 良い点:relaxed:

- MVVMを意識した形でクラスの構成がされている:ok_hand:
- ログイン処理の役割を分担をどうするか参考に:thumbsup:
- ログイン結果をResultクラスの形で返している部分が:smiley:

### SettingFragment

![スクリーンショット 2019-12-10 23.30.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495289/070b8e1d-2b3f-43b4-8c8d-c833183753ff.png)

- 設定画面を簡単に生成できるテンプレート

#### 注意:weary:
- テンプレート適応後に必要となるライブラリの設定が書き込まれないので注意

- `app/build.gradle`に以下を追加する必要があります

```
dependencies {
    implementation 'androidx.preference:preference:1.0.0'
}
```

#### 追加ファイル

- SettingsFragment.kt
    - PreferenceFragmentCompat を継承したクラス
    - XMLのレイアウト要素を読み込ませることで、画面が作成される
- root_preferences.xml
    - レイアウト要素を構成しているファイル
    - 各要素の`key`を元に自動的に設定が保存される

#### 良い点:relaxed:
- PreferenceFragmentCompatがすぐ理解できる:grinning:


### まとめ
- すべてのFragmentTemplateを試すことはできていませんが、実装の参考にすることはできると思います！
- 気になるテンプレートがあれば試してみましょう。


これからも楽しいアプリケーション開発を:dancers:
Python + ZeepでGaroon SOAP APIからユーザー情報取得

備忘録。

xsdの部分で何日か詰まったので自分用にメモ。

###参照
【cybozu developer network】Garoon SOAP APIの共通仕様
https://developer.cybozu.io/hc/ja/articles/202228464
【cybozu developer network】ユーザー情報を取得する
https://developer.cybozu.io/hc/ja/articles/202283324

###ソース
```python

from zeep import Client
from zeep import xsd

client = Client(wsdl='https://(サブドメイン名).cybozu.com/g/index.csp?WSDL')

header = xsd.ComplexType([
                xsd.Element('Action', xsd.String()),
                xsd.Element('Security', 
                    xsd.ComplexType([xsd.Element(
                        'UsernameToken',
                        xsd.ComplexType([
                            xsd.Element('Username', xsd.String()),
                            xsd.Element('Password', xsd.String()),
                        ])
                    )]
                )),

                xsd.Element('Timestamp', 
                    xsd.ComplexType([
                        xsd.Element('Created', xsd.String()),
                        xsd.Element('Expires', xsd.String()),
                    ])
                ),

                xsd.Element('Locale', xsd.String()),
            ])

header_value = header(
        Action="BaseGetUsersById", 
        Security={'UsernameToken':{'Username':'','Password':''}}, 
        Timestamp={'Created':'2010-08-12T14:45:00Z','Expires':'2037-08-12T14:45:00Z'},
        Locale="jp")

request_data  = {
    'parameters': {'user_id':[3, 4, 5]}
}
try:
    response = client.service.BaseGetUsersById(**request_data, _soapheaders=[header_value])
except:
    import traceback
    traceback.print_exc()

```

###出力結果
list型で返却される

```python
[{
    'photo': None,
    'organization': [
        {
            'id': 'x',
            '_attr_1': {
        }
        }
    ],
    'acl': None,
    '_value_1': None,
    'key': '6',
    'version': 'XXXX',
    'order': XXXX,
    'name': 'XXXX',
    'status': 0,
    'reading': 'XXXXXXX',
    'url': None,
    'email': 'xxxxx@xxxx.co.jp',
    'phone': 'xxx-xxxx-xxxx',
    'birth_date': '1970-01-01',
    'join_date': '1970-01-01',
    'employee_number': None,
    'extension_number': None,
    'employment_pattern': None,
    'title': None,
    'office': None,
    'description': None,
    'primary_organization': '0',
    '_attr_1': {
        'login_name': 'xxxx'
    }
}]
```

・サブドメインの変更
・request_dataのidは適当に変える。
・header_valueのUsernameとPasswordの値を入力する。
q コマンドで日付を取り扱う－CSVでもSQLでデータ抽出したい！

本記事は、 [エムスリーキャリア Advent Calendar 2019](https://qiita.com/advent-calendar/2019/m3c) に穴が空いてしまったとき用の予備の記事として作成されたものですが、皆様の頑張りによって穴が空くこと無く完走しました。

よって、供養のために本日26日目の記事として公開します。

## TL;DR

- CSVを扱うなら、`q`コマンドでSQLで宣言的にデータ操作した方が、作業が楽。
    - 宣言的にデータ操作ができるので、手続き型言語でやるより便利。
- qコマンドで使えるSQLはSQLiteの方言。
    - SQLiteにはdate型、time型はない。CSVを読み込んだときはTEXT型などの別の型なので、適切に変換する。

## はじめに

普段はRailsアプリをいじってます。ですが、なんでもシステム化するのは工数の兼ね合いなどでできませんので、本番データの抽出などの運用業務も担うことが多々あります。

その際に重宝している `q` コマンドを紹介します。

## `q` is 何？

- CSVからSQLでデータ抽出するためのコマンド。
- python 2.5以上の環境で動く。3系はまだ未対応。（まだ対応作業中のようです） 
  - （追記）２０２１年６月現在、version `2.0.9` で、Python 3.7 に対応済みとのことです。やったね。
- `q` コマンドの基本的な使い方は [公式サイトの翻訳](https://harelba.github.io/q/ja/usage.html)

### なんでSQLがいいの？

rubyなどの手続き型言語でCSV処理をしてしまうと、ファイル形式が複雑だったり、抽出条件が複雑になった時追いにくい。

SQLならデータについて宣言的にデータ操作ができるので、より高い抽象レベルで作業に専念できる。

データ抽出条件のレビューをしてもらうときにも、効率的にやってもらえる。

## 使えるSQLの方言や関数

- 使えるSQLは [SQLiteの方言](https://www.sqlite.org/lang.html)。 
    - [データ型にdate型、time型、datetime型がない代わりに、関数を使って変換します](https://www.sqlite.org/datatype3.html#date_and_time_datatype)。
    - サポートされている命令は SELECTのみ。JOINによる内部結合・外部結合がサポートされている。

### 日付・時刻を扱う際の注意点

`q`コマンドで日付・時刻を扱う場合、CSV上では[**ISO8601**形式の文字列、またはUNIX時刻の数値かユリウス通日の数値である必要があります](https://www.sqlite.org/datatype3.html#date_and_time_datatype)。

CSVでそうなっていない場合、事前にこの形式に変換しておきます。

## コマンドの実行例

### 使用するバージョン

`q` version 1.7.1 + python 2.7.15 で動作させています。
（OSは、Windows 10でWSL 1のUbuntu 18.04 LTS上で動作させています）

### サンプルデータ

| id|      name|    birthday|
|:-:|--------:|---------:|
|  1|  狡噛慎也|2084-08-16|
|  2|    常守朱|2092-04-01|
|  3|宜野座伸元|2084-11-21|
|  4|  征陸智己|2058-06-27|
|  5|    縢秀星|2090-12-03|
|  6|六合塚弥生|2090-09-28|
|  7|唐之杜志恩|2085-05-25|

<details><summary>CSV形式のデータはこちら</summary><div>

```text:sample.csv
id,name,birthday
1,狡噛慎也,2084-08-16
2,常守朱,2092-04-01
3,宜野座伸元,2084-11-21
4,征陸智己,2058-06-27
5,縢秀星,2090-12-03
6,六合塚弥生,2090-09-28
7,唐之杜志恩,2085-05-25
```

</div></details>

### コマンド

ここでは、2090年以降に生まれた人を抽出し、早く生まれた順に並べます。

```bash
q -d, -H "
select 
  t.name, 
  strftime('%Y/%m/%d',t.birthday) 
from 
  sample.csv as t 
where 
  date(t.birthday) >= date('2090-01-01') 
    order by date(t.birthday) asc
"
```

### 実行結果

```text
六合塚弥生,2090/09/28
縢秀星,2090/12/03
常守朱,2092/04/01
```


## 補足： q コマンド内部の処理の流れ

q コマンドのソースコードを斜め読みすると、処理の流れは以下のようになっている。

- 入力されたSQLからFrom句を解釈し、CSVを読み込んで
- sqlite3のDBをメモリ上に動的に作成
- 入力されたSQLを処理

## qコマンドで業務はどう変わった？

sed + awk より可読性が高いし、LLより短いコードで手軽にデータ処理ができるようになった！

しかもSQLなら、大抵のエンジニアは教養として知っているので、sed + awkよりも手順を引き継ぎもしやすい！

## 参考にした記事

1. [SQLiteで日付時刻を扱う際のポイント](https://qiita.com/TomK/items/132831ab45e2aba822a8)
Rails6.0.1 + MySQL8.0.18をDockerで動かす（メモ）

**Rails6.0.1** + **MySQL8.0.18**を**Docker**で起動できたので、メモを残したいと思います。
本当に起動しただけなので、問題があるかもしれません。

* 開発環境
 - macOS Catalina 10.15.1
 - Docker Version 2.1.0.5(40693)

# プロジェクトディレクトリの下にファイルを用意する 
myapp/
　├ .env
　├ docker-compose.yml
　├ Dockerfile
　├ Gemfile
　└ Gemfile.lock

```:.env
MYSQL_PASSWORD=password
```

```yml:docker-compose.yml
version: '3'
services:
  db:
    image: mysql:8.0.18
    command: "--default-authentication-plugin=mysql_native_password"
    environment:
      - MYSQL_ROOT_PASSWORD=password
    ports:
      - '3316:3306'
    volumes:
      - ./db/mysql/volumes:/var/lib/mysql

  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    env_file: .env
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
```
**MySQL8**から認証方式が変わり、下記の行が必要に。
`command: "--default-authentication-plugin=mysql_native_password"`

```dockerfile:Dockerfile
FROM ruby:2.6.3
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update -qq \
    && apt-get install -y nodejs yarn
RUN mkdir /myapp
WORKDIR /myapp
ADD Gemfile /myapp/Gemfile
ADD Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
ADD . /myapp
```
**Rails6**から**webpacker**が標準になったことで、**yarn**のインストールが必要に。

```:Gemfile
source 'https://rubygems.org'
gem 'rails', '6.0.1'
```

``` Gemfile.lock
```

# rails new

```
$ docker-compose run web rails new . --force --database=mysql --no-deps --skip-test --webpacker
```
`--webpacker`でwebpackerを入れている。

# database.ymlを修正

```yml:database.yml
  .
  .
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: <%= ENV.fetch("MYSQL_PASSWORD") %>
  host: db
  .
  .
```

# db:create
```
$ docker-compose run web rake db:create
```

# 起動
```
$ docker-compose up
```

`http://localhost:3000`にアクセス
![スクリーンショット 2019-12-10 22.46.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283537/81587de4-7a8a-5317-5ec5-fb5d91db0189.png)
jQueryのmodal メモ

#HTML
```html:filename.html
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-git.js"></script>
  <title>modal</title>
</head>
<body>
  <!-- モーダルウィンドウを開くボタン -->
<p><a href="#modal01" class="modalOpen">Open</a></p>
 
<!-- モーダルウィンドウ -->
<div class="modal" id="modal01">
 
    <!-- モーダルウィンドウが開いている時のオーバーレイ -->
    <div class="overLay modalClose"></div>
 
    <!-- モーダルウィンドウの中身 -->
    <div class="inner">
    モーダルウィンドウ
    <a href="" class="modalClose">Close</a>
    </div>
 
</div>

<script>
  $(function(){
    
$(".modalOpen").click(function(){
        
    var navClass = $(this).attr("class"),
    href = $(this).attr("href");
      
    $(href).fadeIn();
    $(this).addClass("open");
    //cssアニメーションの記述を追加する
    $(href).children(".inner").css("animation","modal 0.5s forwards");
    return false;
 
});
    
$(".modalClose").click(function(){
      
      $(this).parents(".modal").fadeOut();  
      $(".modalOpen").removeClass("open");
     //cssアニメーションの記述を追加する
      $(this).parents(".modal").children(".inner").css("animation","modalClose 0.5s forwards");
      return false;
 
});  
    
});
</script>
</body>
</html>
```

#CSS
```css:filename.css
body {
  position:relative;
}
 
/* モーダルウィンドウのスタイル */
.modal {
  position:absolute;
  width:100%;
  height:100vh;
  top:0;
  left:0;
  display:none;
}
 
/* オーバーレイのスタイル */
.overLay {
  position:absolute;
  top:0;
  left:0;
  background:rgba(200,200,200,0.9);
  width:100%;
  height:100vh;
  z-index:10;
}
 
/* モーダルウィンドウの中身のスタイル */
.modal .inner {
  position:absolute;
  z-index:11;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
```
Ansible PlaybookのTagsが混乱するのでまとめた

`ansible-playbook`にはTagsという機能があり、実行時に指定することで特定のタスクを実行しないようにしたり、実行させるようにしたりできます。
このTags、どう指定するとどう動くのかややこしい部分があるので、まとめることにしました。

原典: https://docs.ansible.com/ansible/latest/user_guide/playbooks_tags.html

## まとめ

* 実行時にタグ未指定の場合(=`all`指定の場合)は`never`以外のすべてのタスクが動く。
* タグ指定時には、そのタグが指定されているタスクのみが動く。
* 実行時に`untagged`を指定すると、タグが指定されていないすべてのタスクが動く。
* 実行時に`tagged`を指定すると、`never`タグが指定されていない、タグが指定されているすべてのタスクが動く。

## 実行時パラメータとタグ指定のマッピング

行が`ansible-playbook`で`--tags`で指定するパラメータ。
列がタスクについているタグです。oが実行されるタスクで、xは実行されないタスクです。

|                    | 未指定 | foo | foo,bar | always(※) | never(※) | debug | never,debug |
|-------------------:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| 未指定              | o | o | o | o | x | o | x | 
| foo                | x | o | o | o | x | x | x |
| bar                | x | x | o | o | x | x | x |
| never(※)           | x | x | x | o | o | x | o |
| debug              | x | x | x | o | x | o | o |
| untagged(※)        | o | x | x | o | x | x | x |
| tagged(※)          | x | o | o | o | x | o | x |
| all(※)             | o | o | o | o | x | o | x |
| all,never          | o | o | o | o | o | o | o |
| --skip-tags=foo    | o | x | x | o | x | o | x |
| --skip-tags=always | o | o | o | x | x | o | x |

※: Ansibleの仕様で定められている特殊なタグ。

たとえば、`ansible-playbook --tags bar`でPlaybookを実行した場合(3行目)に動くタスクは

* `foo`と`bar`が両方ついたタスク(3列目)
* `always`がついたタスク(4列目)

で、動かないタスクは

* タグ未指定(1列目)
* `never`だけがついたタスク(5列目)
* `debug`だけがついたタスク(6列目)
* `never`と`debug`がついたタスク(7列目)

です。

## おまけ

```ansible-playbook site.yml --list-tags```のように```--list-tags```を付けるとPlaybook内で使われているタグがほぼ出力されます。
`never`と同時にしか使っていない場合など、出力されないケースがあることは覚えておく必要があります。

後からタグを洗い出すのは若干辛いので、Tagsを使うPlaybookを作る場合は絶対に、絶対にドキュメント化しましょう。
Rubyチャレンジはじめました

この記事は[アラタナアドベントカレンダー](https://qiita.com/advent-calendar/2019/aratana)の12日目の記事です。



昨日は、新原くんの[超便利ホスティングサービス Netlify](https://qiita.com/niihara_megumu/items/db8c53f0f5de9f377976) でした！


## はじめに
この記事は、個人のブログまとめです。
最近RubyとRailsのお勉強をはじめたのでその記事を貼ります。

## 期間
2019/12/6〜

## 場所
おうち

## 記事まとめ

- [Rails Challenge Day1](http://amyamyamy.hatenablog.jp/entry/2019/12/07/005415)
- [Day1 Feedback](http://amyamyamy.hatenablog.jp/entry/2019/12/08/204944)
- [Rails Challenge Day2](http://amyamyamy.hatenablog.jp/entry/2019/12/08/Ruby%28on_Rails%29_Challenge%28Day_2%29)
【AWS】CloudWatch Agentを使ってカスタムメトリクスを取得する手順

# はじめに
CloudWatchでEC2のメトリクスを監視したい。
だけど、ディスク使用率、メモリ使用率などのメトリクスは元々ない。
→カスタムメトリクスで取得する必要があるため、その手順をまとめました。
[【AWS】CloudWatchでの監視項目まとめ](https://qiita.com/iron-breaker/items/a53c88e1082a0c333ea4)


ちなみに、
EC2インスンタンスのどの項目がデフォルトで取得できる、もしくはカスタムメトリクスで取得できるかは、
こちらの公式から見ることができます。
[CloudWatchにてデフォルトで収集できるメトリクス]
(https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/viewing_metrics_with_cloudwatch.html)
[CloudWatch Agentにより収集できるカスタムメトリクス](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/monitoring/metrics-collected-by-CloudWatch-agent.html)


# 流れ
１，CloudWatchAgentを実行するためのロールをEC2にアタッチ
２，対象のEC2にCloudWatch Agentをインストールする
３，インストールしたAgentの設定を行う
４，CloudWatch Agentの実行
５，CloudWatch でカスタムメトリクスが取れているか確認


# １，CloudWatchAgentを実行するためのロールをEC2にアタッチ
AWS ＞ サービス ＞IAM ＞ ロールから、

・AmazonSSMFullAccess
・AmazonEC2ReadOnlyAccess

が適用されているロールを作成します。

EC2メニューに移動。
インスタンス ＞ 対象のインスタンスを選択 ＞ アクション ＞ インスタンスの設定 ＞ IAMロールの割り当て
から、対象のEC2に、作成したロールをアタッチします。

# ２，対象のEC2にCloudWatch Agentをインストールする
AWS ＞ サービス ＞ AWS Systems Manager > コマンドの実行から、
右上の Run Command を選択します。

* コマンドのドキュメントは、 AWS-ConfigureAWSPackage
* コマンドのパラメータ

```Action： Install```
```Name ：AmazonCloudWatchAgent```
```Version： latest```

* ターゲット→対象のインスタンスを選択する（IAMロールが正しく割り当てられているインスタンスが表示されている）
* 他の設定はそのままに、実行をします。

# ３，インストールしたAgentの設定を行う
コマンドで、クラウドウォッチエージェントの設定ウィザードを立ち上げます。
対象のEC2に入って、

```
sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-config-wizard
```

を打つと、
画面に質問と選択肢が表示されるので、答えていきます。

```
What paramater store name do you want to use to store your config?
```
これは、何の名前でこの設定ファイルを保存するか聞いていて、後々こちらの名前を使います。

```
Which default metrics config do you want?
１．Basic
２．Standard
３．Advanced
４．None
```

ここで、
```３. Advanced``` を選び、 カスタムメトリクスの取得を伝えます。


# ４，CloudWatch Agentの実行

```
sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl -a fetch-config -m ec2 -c ssm:[設定時の名前] -s
```

このコマンドで設定したファイルを実行します。もし、後に
```ssm```の後は、
```
What paramater store name do you want to use to store your config?
```
で設定した名前を使います。

名前を確認するには、 
 AWS ＞ サービス ＞ AWS Systems Manager ＞ パラメータストア 
に、設定したファイルがパラメータストアとして保存されているため、名前を確認できます。





# ５，CloudWatch でカスタムメトリクスが取れているか確認
AWS ＞ サービス ＞ CloudWatch > メトリクス
ここに、
<img width="518" alt="スクリーンショット 2019-12-10 20.13.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408619/df86765f-f21b-d450-02bb-9996f65f0204.png">
このようにカスタムメトリクスが出ていれば、成功です。

中に、設定したカスタムメトリクスが存在するので、これでディスク使用率、メモリ使用率などの項目を監視することができました。

#参考資料
https://www.geekfeed.co.jp/geekblog/aws-cloudwatch#4
https://dev.classmethod.jp/cloud/aws/cloudwatchagent-nocli-install/
[Docker][Rails] Dockerを使ってRailsアプリを作る~rails newするまで~


今回は初めてDockerを使い、Railsアプリを作っていくことにしました。

手順をメモしておきます。
手順は以下の方を参考にさせていただいております。

[[Rails] DockerでRails + MySQLの開発環境をつくる手順](https://qiita.com/jshimazu/items/ba13ce87dfdb11e2d1d9)

開発環境はmacで、Docker for macをインストール済みです。
1.アプリを置くディレクトリを作る
2.4つのファイルを作る
3.rails new する
4.ブラウザで表示させるまで

## 1.アプリを置くディレクトリを作る

```ruby
mkdir matatabi_app(アプリの名前)
```
まずはアプリを置きたいところにディレクトリ作ります。

## 2.4つのファイルを作る
`Dockerfile
 docker-compose.yml
Gemfile
Gemfilelock`
この４つのファイルをmyappの下に作っていきます

```ruby
vi Dockerfile
```
中身はこのように書きました。

```ruby
FROM ruby:2.4.1
ENV LANG C.UTF-8

RUN apt-get update -qq
RUN apt-get install -y build-essential
RUN apt-get install -y libpq-dev
RUN apt-get install -y nodejs

RUN mkdir /matatabi_app
WORKDIR /matatabi_app

ADD Gemfile /matatabi_app/Gemfile
ADD Gemfile.lock /matatabi_app/Gemfile.lock

RUN gem install bundler
RUN bundle install
ADD . /matatabi_app
```
続いてdocker-compose.ymlを書いていきます

```ruby
vi docker-compose.yml
```

```ruby
version: "3"

services:
  web:
    build: .
    ports:
      - "3000:3000"
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/matatabi_app
    depends_on:
      - db
  db:
    image: mysql
    environment:
      MYSQL_USER: root
      MYSQL_ROOT_PASSWORD: ＊＊＊(passwordを書く)
    ports:
      - "3306:3306"
    volumes:
      - ./db/mysql/volumes:/var/lib/mysql

```
次に、Gemfileを作成

```ruby
vi Gemfile
```


```ruby
source 'https://rubygems.org'
gem 'rails', '5.1.7'
```

Gemfile.lock は作成のみです。

```ruby
touch Gemfile.lock
```

これで、４つのファイルができました。`ls`などして確認しておきます。

## 3.rails new する

 `rails new`しようと、以下のコマンドを打ってもうまくいきませんでした。

```ruby
docker-compose run web rails new . --force --database=mysql
```
いろいろと調べ、一旦dockerを立ち上げてrails newすることにしました。

```ruby
docker-compose up
rails new . --force --database=mysql --skip-bundle
docker-compose build
```
うまくいきました。

## 4.ブラウザで表示させるまで
rails newすることでいろいろとファイルが増えました。
その中にある　database.ymlを編集します。

```ruby
-----途中省略-------------------
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root　←docker-compose.ymlで書いたusernameを記入
  password: ***　←docker-compose.ymlで書いたpasswordを記入
  socket: /tmp/mysql.sock
  host: db

-----途中省略-------------------
```

再度dockerを起動します。

```ruby
docker-compose up 
```



![ 2019-12-10 23.43.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532695/e4c39fb4-fc32-3677-864c-654ddc4cebe9.png)

このような表示が出れば、OKです。
localhost:3000にアクセスすると
`Yay! you are on rails`が表示されています！！

ここからbundle install などしていくのですが、エラーにはまってしまったので
次回に回します！
以上です！
BlenderでUnrealEngine4向けSkeletalMeshを作る方法～2019年版～

# 前フリ

Blenderで作ったモデル（SkeletalMesh）をUE4へインポートするために、解決しなければならない問題があります
それは**Scale100倍問題**です

Blenderでの通常手順でMeshを作り、Armatureを作成し、SkinningしてFBX形式でExportしてUE4にImportすると、なんとSkeletonのScaleが100倍になってしまいます
この状態になるとUE4上でのAnimationの扱いに大きな問題が生じます
（例えばSkeletonに対してAnimationがものすごく小さい…など）

他にも問題はありますが、一番大きな問題がコレでしょう


# 手作業で作る
まずは先人の知恵をもとに、手作業でUE4用のFBXを作る方法を整理しましょう

参考資料
http://kanianthi.hateblo.jp/entry/2018/06/10/174124

まずScale問題そのものを解決する手法ですが、以下の一連の操作が必要になります

- 通常通りMeshを作り、Armatureを作り、ParentしてSkinningする
- ArmatureのScaleを100倍する
  - この時点でMeshの大きさが100倍になる
- ArmatureのScaleを適用（Apply）する
- ArmatureのScaleを0.01倍する
    - この操作でMeshの大きさがもとに戻る
- Meshだけを選択して、Scaleを適用する
    - このとき、ArmatureのScaleは0.01になっていること

Animationを作る場合は、この一連の操作をした**後で**行います
先にAnimationを作ってしまうと、ArmatureのScaleを操作した影響でLocationの変化を伴うAnimationが破綻してしまいます

そしてこの手順、結構面倒な問題を抱えています
それは、Armatureのスキニングのやり直しが容易でないことです

ちょっとスキニングをやり直したい、とか、モデルを作り直したい、とか思ったとしても、一旦Parentを解除してしまうともう一度この手順を最初からやり直すことになります
変更したScaleを

また、手戻りを少なくするには、Animationを作る前にScaleを修正する必要があり……


もうちょっとなんとかならないものか、と思ってしまいます



# AutoRigProがあるじゃないか

[Auto-Rig Pro - Blender Market](https://blendermarket.com/products/auto-rig-pro)
よく知られているBlenderアドオンの一つに、AutoRigProがあります
このAutoRigProにはGameEngine向けのFBXExporterが実装されており、これを使えばArmatureのスケール問題は解決できます
UE4のHumanoidRig…いわゆるEpicSkeletonにもしっかり対応されているため、人形のキャラクターを作る際はぜひコレを使うと良いでしょう

ただし、このアドオンに実装されているExporterはあくまでAutoRigPro用のExporterであり、それ以外のArmatureには対応していません
つまり、独自に作ったArmatureに関しては、別の方法で対応する必要があります


# めんどくさいから自動で解決したい


めんどくさい手順をすべて省くため、UnrealEngine4向け特化のFBXExporterを作りました

X4UE: Exporter for UnrealEngine
https://github.com/Indie-us-Games/X4UE


現在、Indie-us GamesのOSSとして公開しています
使い方は簡単

- アドオンをBlenderにインストールする
- MeshとArmatureを通常のScaleでセットアップする
- 通常のScale(1, 1, 1)のままActionを作成する
- ExportするArmatureを選択し、メニューから`Export > FBX for UnrealEngine`を選択する

これだけです
Scaleを手動で100倍にしたり0.01倍にしたりする必要はありません

Blender上でScaleを変更しないので、Armatureの取り外しも気軽にできますし、Animationを作ったあとでのSkinning修正も通常通り行えます

また、ArmatureやAction関連であったらいいな、と思う便利機能もいくつか実装しています

- Actionの完全削除
- Armatureの1ButtonUnbind


なお、今後も機能追加していくつもりなので、こういう機能がほしい、というのがあればIssueを投稿してください
もちろんOSSですので、改造もOK、フィードバックも大歓迎です
PytorchでWord2Vecを作ってみた

PytorchでWord2Vecを実装します．
# Word2Vec
Word2Vecを組もうと思った時に，gensimの記事は多くヒットするのですが，Pytorchを使ってWord2Vecを実装している記事が少なかったので載せることにしました．Word2Vecを解説する記事は多いため，解説の手短にします．

# Skip-gram

<img width="260" alt="Screen Shot 2019-12-01 at 14.25.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290596/d4a92f9f-f41e-c665-ad22-546592941d80.png">

skip-gramは入力単語$w(t)$が与えられた時に，その周辺単語系列${,w(t-1),w(t+1)}$の出力確率を最大化します．したがって最小化する目的変数は次のようになります．

```math
\begin{align}
E 
&= -log p( w_{t-1},w_{t+1} | w_{t} ) \\
&= -log p(w_{t-1},w_{t})*p(w_{t+1},w_{t}) \\
&= -log \prod_{i}\frac{exp(p(w_{i},w_{t}))}{\sum_{j}exp(p(w_{j},w_{t}))}
\end{align}
```

ここで分子はwindowサイズ分の単語ですが，分母は全ての単語数計算する必要があります．それは無理なので，ネガティブサンプリングで近似します．


# ネガティブサンプリングのコード
ネガティブサンプリングで出力される単語は，参考文献[1]のように単語の出現頻度で決めます．プログラムは次のようになります．

```python
def sample_negative(sample_size):
    prob = {}
    word2cnt = dict(Counter(list(itertools.chain.from_iterable(corpus))))
    
    pow_sum = sum([v**0.75 for v in word2cnt.values()])
    for word in word2cnt:
        prob[word] = word_counts[word]**0.75 / pow_sum
    words = np.array(list(word2cnt.keys()))
    while True:
        word_list = []
        sampled_index = np.array(multinomial(sample_size, list(prob.values())))
        for index, count in enumerate(sampled_index):
            for _ in range(count):
                 word_list.append(words[index])
        yield word_list
```


# モデルの作成
単語の入力はOnehotで単語を表現する方法もありますが，それだと単語の数だけ次元が大きくなってしまうため，Embedding Layerを使って単語ベクトルに変換した後に，EncoderとDecoderにかけます．評価は単語ベクトル同士の内積をとりログシグモイド関数で出力します．計算式は次のようになります．

```math
L= \sum_{i} log \sigma({v'}_{w_{i}}^{T}v_{w_{I}})+\sum_{i}log \sigma(-{v'}_{w_{i}}^{T}v_{w_{I}})

```

```python
class SkipGram(nn.Module):
    def __init__(self, V, H):
        super(SkipGram, self).__init__()
        self.encode_embed = nn.Embedding(V, H)
        self.decode_embed = nn.Embedding(V, H)
        
        self.encode_embed.weight.data.uniform_(-0.5/H, 0.5/H)
        self.decode_embed.weight.data.uniform_(0.0, 0.0)
        
    def forward(self, contexts, center, neg_target):
        embed_ctx = self.encode_embed(contexts)
        embed_center = self.decode_embed(center)
        neg_embed_center= self.encode_embed(neg_target)

        # 内積
        ## 正例
        score = torch.matmul(embed_ctx, torch.t(embed_center))
        score = torch.sum(score, dim=2).view(1, -1)
        log_target = F.logsigmoid(score)
        
        ## 負例
        neg_score = torch.matmul(embed_ctx, torch.t(neg_embed_center))
        neg_score = -torch.sum(neg_score, dim=2).view(1, -1)
        log_neg_target = F.logsigmoid(neg_score)

        return -1 * (torch.mean(log_target) + torch.mean(log_neg_target))
```

EncoderとDecoderのEmbeddingは別にするのが一般的らしいです．最大化問題なのでマイナスを掛けています．


# 結果
![Screen Shot 2019-12-10 at 17.02.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290596/04520d4b-2c88-bc60-d8a2-566fa8dadc4a.png)

全体的に精度がいまいちで，Schedulerとか学習率とかを適切に設定する必要があります．

コードを整理してないんで，全体コードは整理してから公開します．

# 参考文献
[1] Distributed Representations of Words and Phrases and their Compositionality
[2] word2vec Parameter Learning Explained
macosでopenFrameworksのProjectGeneratorをビルドする

openFrameworks 0.11.0がリリースされましたね！
公式にVSCodeサポートが追加されて、MacでもWindowsでも嬉しいアップデートになったんじゃないかと思います。

さて、公式サイトの[download](https://openframeworks.cc/ja/download/)ページにあるリリース版のoFをダウンロードして使ってる方はすんなり新バージョンのPGが使えたと思いますが、GitHubからoFをcloneして使っている方だと、これまでの方法でビルドするといざプロジェクトを作ろうとしたときにエラーを吐くようになってしまっているのではないかと思います。

（これまでの方法とはこれのつもり）

```bash
git submodule update --init
cd apps/projectGenerator/frontend
npm install
npm run build:osx
```

この記事では、macos上でちゃんと使えるoF0.11.0時代のProjectGeneratorをビルドする方法を紹介します。

## 前提
いきなりアレですが、特に興味や必要がない人はリリース版のzipをDLして、PGだけコピーしてきてください。

## 環境
macos 10.14.6
oF(tag 0.11.0) [b674f7ec1](https://github.com/openframeworks/openFrameworks/tree/b674f7ec1f41d8f0fcfea86e3d3d3df3e9bdcf36)
PG(記事執筆時点での最新版) [5f9f625](https://github.com/openframeworks/projectGenerator/tree/5f9f6255e1ef8933ccb213d5f039dc15eb2a937c)

## TL;DR

- submoduleがupdate済みであること(ProjectGeneratorが`OF_ROOT/apps/projectGenerator`にclone済みであること)
- `OF_ROOT/scripts/osx/download_libs.sh`が実行済みであること
- `OF_ROOT/libs/openFrameworksCompiled/lib/osx/openFrameworks.a`が存在すること
- `OF_ROOT/libs/openFrameworksCompiled/lib/osx/openFrameworksDebug.a`が存在すること

を確認のうえ下記を実行
_※`OF_ROOT`は環境によって変えてください__

```
cd OF_ROOT
wget https://gist.githubusercontent.com/nariakiiwatani/f3f18a0587f214c4ec5c8c889d51edda/raw/a25e785d7622f895b2122a3c01a3299cbc3237f6/BuildPG.sh
chmod +x BuildPG.sh
./BuildPG.sh
rm BuildPG.sh
```

（要はちょっと編集したBuildPG.shを実行するだけです）


### これ以下は検証時の四方山話

`projectGenerator/scripts/osx/BuildPG.sh` というファイルがあります。
これを叩くとビルドできるのかと思いきや、エラーが出ます。
ちなみにreadmeにはないので、こいつが果たして直接叩くことを想定されてるスクリプトなのかは謎です。

```bash
cd ProjectGenerator
scripts/osx/BuildPG.sh
```
```bash
clang: error: no such file or directory: 'ほにゃほにゃ/libs/openFrameworksCompiled/lib/osx/openFrameworksDebug.a'
Command Ld failed with a nonzero exit code
```

スクリプトの中を見ると、PGのコマンドライン版をリリースビルドしようとしているようなので、なんでデバッグ版のライブラリが求められてるのかわかりませんがとにかくこれで失敗します。
`commandLine/commandLine.xcodeproj`をXcodeからビルドしようとしても同じエラーが起こるので、多分Dependencyの設定まわりのバグ？という気がします。([Issue建てました](https://github.com/openframeworks/projectGenerator/issues/229))

で、適当なプロジェクトをビルドするとかして`openFrameworksDebug.a`を作って、参照されてるパスにコピーして再度実行しようとしてもやっぱりダメでした。
どうやら`BuildPG.sh`内で毎回新たにoFをGitHubからcloneしてくるようになっているようで、それが原因のようです。

ということで、いちいちcloneさせずにすでにあるoFを使うように修正したものがTL;DRに書いたものです。

以上！

あとは[この記事](https://qiita.com/73_ch/items/fa56c951bba0e8218537)を参照してoF on VSCodeライフを楽しんでください。
VSCodeでビルドできるプロジェクトがサクッと作れるのは本当に嬉しい。
あと地味だけどmain.cppをGLのバージョンだとかno windowだとかで指定できて作り変えてくれるのも地味に便利そう。必要になるたびに毎回ググってたので・・・。

ちなみに、
- オプションでは`Emscripten`が選べるけど未対応っぽい？普通にXcodeのmacアプリをビルドするプロジェクトが作られた。
- `Git Ignore`という選択肢もあるけどなんなんだろう・・・。これも普通にXcodeのプロジェクトが作られた。
【Tor】9050ポートを利用。IPアドレスを隠してPythonスクレイピング

<img width='300' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348026/59f6aa5d-86be-e2bb-207a-397026627da5.jpeg'>

## TL;DR
今までTorを使うときはブラウザだけで使っていたのですが、Pythonでスクレイピングする際にもTorが使えたらいいなーと思い立ち、やってみたら若干ハマった(かつ、忘れそうかもと思った)のでメモ


## 環境
- macOS
- Python 3.7.5
- Homebrew 2.2.1

## やろうとしたこと

9050ポートを通すことで、IPアドレスを変更してwebページにアクセスする、みたいなことをやりたい（参考：[こちら](https://lets-hack.tech/programming/languages/python/tor/)の記事など）

※以下、Pythonを実行できる環境は自分で用意できるものと思って進めます。わからない場合、ターミナルでさっくり実行できるiPythonとかがオススメです。ググってね。

では行きます。

```python
import requests
 
proxies = {
        'http':'socks5://127.0.0.1:9050',
        'https':'socks5://127.0.0.1:9050'
        }
```
↑まずは写経しましょう（参考：上で紹介した記事）

```python
res = requests.get('http://httpbin.org/ip').json()
print(res)
```
↑普通にやると普通に自分のIPアドレスが返ってくる(ここまでは順調)


## ハマったこと

```python
res = requests.get('http://httpbin.org/ip',proxies=proxies).json()
print(res)
```
↑プロキシ刺すと、「ほーら、ipアドレスが変わってるでしょ！」って感じらしいんですが、

僕の場合はごっついエラーが出ます↓

```
ConnectionError: SOCKSHTTPSConnectionPool(host='ipinfo.io', port=443): Max retries exceeded with url: / (Caused by NewConnectionError('<urllib3.contrib.socks.SOCKSHTTPSConnection object at
0x10d57fe10>: Failed to establish a new connection: [Errno 61] Connection refused'))
```

これ、ポートが開いてないよってことらしい。
ので、ポートを開放します。

## 解決！！
```
brew install tor
```
↑それは、そう。

```
brew services start tor
```
<font color="Crimson">↑これが一番大事</font>

同じことをやってみる。

```
res = requests.get('http://httpbin.org/ip',proxies=proxies).json()
print(res)
>> {'origin': '46.165.245.154, 46.165.245.154'}
```
おお！！でけた！！

ちなみにtorを止めたい時は

```
brew services stop tor
```
これですね。めでたしーー

## 結局なんだったんですかね
ここまでの流れ、常識なんですかね、

```
sudo service tor start
```
とかでtorを起動してください。とかでさらっと終わってること多いのですが、
僕のMacOSは、これをやっても、serviceコマンドが見つかりませんの一点張りでした。serviceコマンド、~~いつどういう環境で使えるものなのか、いまだにわかってない~~ 頑張って理解したい。

今は、
ExcludeExitNodes等のtorrcファイルの設定など、ブラウザでやってるレベルのセットアップに挑戦しているので
ガンガンTor開拓の記事を書いていきたい。(書くとは言ってない)

### 参考記事
[Torを使って個人情報をコントロールする方法](https://qiita.com/syuHomebrew.2.1i/items/ebd6734a8102c7906cc1)
[【悪用厳禁】Torを使ったスクレイピングでIPアドレスを分散させるテクニック – Python](https://lets-hack.tech/programming/languages/python/tor/)
管理者画面の作り方　admin　Rails 

##アプリの管理者と一般ユーザーで使える画面を分けたい！！
*なぜこんなことがしたいか?*
例：不適切なユーザーなどがいたら、管理者のみそのユーザーを削除したい。このようなケースを想定して管理者画面と一般ユーザー画面を作る必要があります。


***もともとあったController(例：postscontroller)とは別に /admin のURLにアクセスすると、 
postsの一覧が出るようにしましょう（こちらは管理者がpostを管理するための画面。一般ユーザーはアクセスできない）***

1 . コントローラーを作成    [参考](https://kurose.me/namespace-admin/)

 ```
bundle exec rails g controller admin::posts
```

2 . routingを作成(indexも作成しといてください)

```rb
 get "/admin" => "admin/posts#index"
  namespace :admin do
    resources :posts
  end
```

3 . admin/posts/indexにposts/indexのコードコピー(scaffold)
ここで少し触ってみるとリンクを触ったところでエラー！！

```rb
<div id=list_index> 
<span><%= link_to 'Show', product %></span> 
<span><%= link_to 'Edit', edit_post_path(product) %></span> 
<span><%= link_to 'Destroy', post_path(product), method: :delete, data: { confirm: 'Are you sure?' } %></span> 
```
下記のように修正後エラー解消！link_toメソッドについての理解が必要
(https://web-camp.io/magazine/archives/16857)


```rb
<div id=list_index> 
<span><%= link_to 'Show', post_path(product) %></span> 
<span><%= link_to 'Edit', edit_admin_post_path(product) %></span> 
<span><%= link_to 'Destroy', admin_post_path(product), method: :delete, data: { confirm: 'Are you sure?' } %></span> 
```
4 . 管理者と一般ユーザーを定義する

*enumでnormal一般ユーザー,staff管理者とし、staffのみが/adminに入れるようにしたい*

```rb
class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  has_many :posts
  enum role: { normal: 0, staff: 1 }
end
```
seed.rbで初期ユーザーを作っておくと確かめやすいです！

```rb
user1 = User.create!(id: 1, email: "user1@example.com", password: "password", name: "huuma", role: :normal)
user2 = User.create!(id: 2, email: "user2@example.com", password: "password", name: "gggg", role: :staff)
user3 = User.create!(id: 3, email: "user３@example.com", password: "password", name: "user3", role: :normal)
```
**5 .どのように選別するかを考える (重要)**
/adminに遷移する時、staffかそうでないかを判断しないといけない。
そこでbefore_actionを自分でAdmin::PostsController に定義する。

```rb

def admin_check
        unless user_signed_in? && current_user.role == :staff
            redirect_to root_path
            flash[:notice] = "管理者画面です"
        end
    end
```

ここで僕が陥っていた失敗を紹介します。一見行けそうに見えるが、これだと/adminで永遠ループしてしまいます。(リダイレクトループが止まらなかったという結果)

```rb
def admin_check
    if user_signed_in? && current_user.role == "staff"
        riderect_to new_admin_product_path
    else
        render action: :edit
        flash[:alert] = "管理者画面です"
    end
    end
```

redirect_toメソッドの理解も必要ですね！
【ElasticSearchエラー】Elasticsearch\Common\Exceptions\NoNodesAvailableException  : No alive nodes found in your cluster/ Could not parse URElasticsearch

elasticsearch-phpとLaravelを繋いで使ってた。


ローカルでやるのとAWSで使うのとで設定を多少変える必要があるので、
エラー出て一瞬ハマったのでその時のメモ。
結論.envに環境変数を入れれば良い。



```:.env
ELASTICSEARCH_ENABLED=true
ELASTICSEARCH_HOSTS="localhost:9200"

SEARCH_ENABLED=true
SEARCH_HOSTS=localhost:9200
```
あとはローカルの時。dockerとかで立ち上げてcurl通ることを確認。


AWSのelasticSearchクラスタ立ち上げてからcurl通ることを確認して
セキュリティグループでポート開けて下記の設定する。


```:.env
ELASTICSEARCH_ENABLED=true
ELASTICSEARCH_HOSTS="https://vpc-hoge.ap-northeast-1.es.amazonaws.com:443"

SEARCH_ENABLED=true
SEARCH_HOSTS=https://vpc-hoge.ap-northeast-1.es.amazonaws.com:443
```


### 参考

https://github.com/elastic/elasticsearch-php/issues/812
【Vue.js】v-forでkeyが指定された場合とされなかった場合の違いについて

## はじめに
Vue.jsで`v-for`を使ったとき、`key`が指定された場合とされなかった場合の違いについて考えてみました。

keyについての公式ドキュメントは[こちら](https://jp.vuejs.org/v2/api/#key)

## この記事が役に立つ方
- Vue.js初心者

## この記事のメリット
- `v-for`で`key`が必要な理由が分かる

## 環境
```
- macOS Catalina 10.15.1
- Vue.js: 2.6.10
```

## `key`とは？
公式ドキュメントでは、
> key 特別属性は、主に古いリストの代わりにノードの新しいリストを差分算出する VNode を識別するために Vue の仮想 DOM アルゴリズムに対するヒントとして使用されます。キーがない場合、Vue は要素の移動を最小限に抑えるアルゴリズムを使用し、可能な限りその場で同じタイプの要素にパッチ適用/再利用しようとします。キーがある場合は、キーの順序の変化に基づいて要素を並べ替え、そして、もはや存在しないキーを持つ要素は常に削除/破棄されます。

とあります。

ん〜、よくわかりません:weary:

シンプルに、**データに一意性を持たせる**と解釈しましょう！

## `v-for`を使うときは必須
### 理由：**処理速度**向上のため。

なぜ処理速度が早まるんでしょうか？

以下のような、フルーツの価格を表示するだけの簡単なコードがあります。
`Delete`ボタンを押して、**2番目の要素`banana`**を削除したときの動きを例にします。

```html:index.heml
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="./style.css">
    <title>Fruits</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in list" :key="item.id">
          <p>{{ item.name }}： {{ item.price }}円</p>
          <button @click="doRemove(index)">Delete</button>
        </li>
      </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
  </body>
</html>
```

```javascript:main.js
var app = new Vue({
    el: '#app',
    data: {
        list: [
            { id: 1, name: 'apple', price: 100 },
            { id: 2, name: 'banana', price: 150 },
            { id: 3, name: 'orange', price: 200 }
        ]
    },
    methods: {
        doRemove: function(index) {
            this.list.splice(index, 1)
        }
    }
})
```

このプログラムで`Delete`で`id:2のbanana`が削除された場合、配列の中身はこうなります。

【Before】

|配列のインデックス|id|name|price|
|:-:|:-:|:-:|:-:|
|0|1|apple|100|
|1|2|banana|150|
|2|3|orange|200|
↓
【After】

|配列のインデックス|id|name|price|
|:-:|:-:|:-:|:-:|
|0|1|apple|100|
|1|3|orange|200|

### 1.keyがない場合

要素の中の**文字**が変更されたと解釈されてしまうため、
`orange`は**別な要素とみなされる**ので`id`・`name`・`price`が**更新される**。

### 2.keyがある場合
`id:3のorange`の**インデックス**は変わるが、**同じ要素とみなされる**ので`id`・`name`・`price`には**更新されない**ので早い。


配列要素の、**順番が入れ替わったとき**の処理が短縮されるから早くなるということですね。

## 参考：Vue.js スタイルガイド
[スタイルガイド — Vue.js](https://jp.vuejs.org/v2/style-guide/index.html)

## おわりに
最後まで読んで頂きありがとうございました:bow_tone1:

今回、３つだけのリストを例にして考えてみましたが、これが大量のデータになってくると処理速度は相当変わりそうですね:thinking:

万が一解釈に誤り等あればご指摘頂ければと思います。


## 参考にさせて頂いたサイト（いつもありがとうございます）
[スタイルガイド — Vue.js](https://jp.vuejs.org/v2/style-guide/index.html)
Power BI勉強帳：SharePointリストをPowerQueryで読み込む（自分的まとめ）

諸先人方の記事にある内容なのですが、簡単な部分だけ備忘としてまとめました。

**１．リストで列を作成するときは、英語名（1バイト文字）で作成してから、日本語に直す
２．ソースのURLは「リストURL」ではなく「サイトURL」を指定する
３．第1選択として「FieldValuesAsText」列を使うとよい（特に日付時刻）
４．各リストアイテムへのリンクを作成することができる**

## 1．リストで列を作成するときは、英語名（1バイト文字）で作成してから、日本語に直す

SharePointリストの列名は、作成後に自由に変更することができます。
ですが、Power Queryで読み込まれるときは、「**1番最初につけた列名**」で表示されます。
かつ、**「日本語（2バイト文字）の列名」は、表示が分かりにくく**なってしまいます。

ですので、列の作成時に、英語名（1バイト文字）で列名をつけておくとよいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221646/6f381c1d-bb99-ce54-6c6e-5e19cb772eef.png)


なお、Power AppsやPower Automateでの利用を考えても、1バイト文字で最初の列名をつけておくとよいです。現在日本語の列名対応は、かなりされてはいるのですが、部分的にそうでない場面で助かります。


##2．ソースのURLは「リストURL」ではなく「サイトURL」を指定する。

読み込むコネクタには、「SharePoint Online リスト」または「SharePoint リスト」を選びます。
すると出てくるダイアログに親切に「**サイトURL**」と書いてあるのですが、つい「**リストのURL**」を入れてしまいがちです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221646/fbfb6300-be99-8ba9-8e09-f289b2a3c6df.png)


入れるべき「**サイトURL**」は、リストを表示させたときの**「/Lists/」より前の部分**と考えると、見分けやすいです。
（あるいはサイトトップに移動してURLをコピーしてもいいと思います）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221646/503ac8e2-5237-1640-2418-328aa01da7c4.png)


###（補足）読み込むリストが選びづらいとき
次のステップで、リスト名の一覧を含むダイアログが出ます。
このとき、リスト名は、作成されたときの名前ではなく、編集後の最新の名前が表示されます。
リストの数が多かったり、リスト名が被っていると、どれを選んでよいかわからなくなります。

このような場合は、プレビューで内容を確認して選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221646/8a41bc13-eba7-3e96-aeea-a7ba8e456921.png)

###（補足）間違えて違うリストを読み込んでしまったとき
コネクタの選択からやり直さなくても、読み込んだリストを選びなおすことができます。

1.ステップ「ソース」を選択。リスト一覧が左ペインに表示される
2.内容を確認したいリストのItems列セルの余白（文字のないところ）をクリック
3.内容のプレビューを見て選びなおしたいリストを確認
4.読み込みなおしたいリストの「値（table）」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221646/0d83d40a-b7d4-5096-dec4-97e1aea95154.png)


##3．第1選択として「FieldValuesAsText」列を使うとよい（特に日付時刻）

SharePointリストをPower Queryで使いづらい点として、サイトの地域設定を日本にしてあっても、「日付時刻」が「**太平洋標準時（米国およびカナダ）**」で出てきてしまうという点があります。太平洋標準時は「サマータイム」があって、季節によって時差が変わるため、とっても扱いにくいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221646/c05233f7-f524-26da-e3ba-477363d5d5fb.png)

この問題は**「FieledValueAsText」列**を使用することによって解決できます。
**「FieledValueAsText」には、リストに含まれる全列が入れ子になっていて、「SharePointリスト表示どおりの値（サイトの設定が日本なら日本時間）」が入っています。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221646/5a341e9a-f030-d18b-27b9-f76cac0363c0.png)


###ユーザー列の場合
**「FieledValueAsText」列には、ユーザーも見たままの値**で入っていて、展開する必要がありません。
逆に**「ユーザーの部署・メールアドレスを取得したい」という場合は、本来の列**を使えば取得できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221646/2347d658-6552-9a3c-fe3f-345bd6ceb3e6.png)

以上のことから、SharePointリストをPower Queryで読みこむときには、まず**「FieldValuesAsText」列だけを残して展開する方針とし、それ以外の情報が欲しいときだけ他の列にあたる**というアプローチがよいかなと思います。

##4．各リストアイテムへのリンクを作成することができる

ID列をつかって、各アイテムを単独表示するリンクを作成することができます。
ビューアー的な使い方のときに便利です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221646/2e45f10e-f92c-5dc9-a9b0-4546b3599e03.png)

###Power BIでの利用イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221646/3857b66c-891a-79de-9347-647ddf3fea8b.png)
Github学習してたら出てきたターミナルって何？

###ターミナルってなんだ？

Githubを使う事になり、その設定をする為にターミナルを使う事になった。

で、githubを設定するにあたり「ターミナル」を使う事になった。

![スクリーンショット 2019-12-10 23.21.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546679/dbbbb1bb-1715-a3ad-f5b6-631cda6c234a.png)
こんな感じの奴。
マトリックス！？

ターミナルは、コマンドと呼ばれる命令文を用いてMacの操作や設定をおこなうためのツールのことである。
これにより、,<b>リポジトリ</b>（ファイル）の変更や保存、移動も実はできる。

我々が使っているフォルダやFinderはあくまで「ソフト」に過ぎず、可視化できてわかりやすくしている物だと言う事だ。

##リポジトリ
ファイルに近いもので、保管場所の事。フォルダに近いもの　らしい。

###最後に
こんなのMac使っている文系大学生なんて一生使う事がないであろうリスト上位５位には入るであろう。

で、今回Githubを使う事でこのターミナルを使う事で色々とできる事があるそうなので教えて頂いた！

けど、ターミナルもGithubも学習コストが高く、同時並行で学ぶのは大変だという話も一方で聞いた。

Githubとターミナルの説明をしたいが、かなり記事が長くなるので、また次回に。
さすがだぞ！VS Code をリモートホストで動かす方法をばっちり理解しているんだな！

*この記事は KAYAC Advent Calendar 2019 の10日目です！*

VSCode には Remote Development という、SSH でつないだホストや、Docker コンテナ上の環境を、あたかもローカルの環境下のように扱うことのできる公式の Extension があります。最近は、ずっとこれをつかって、Docker 上で作業をしていたのですが、Mac や Windows だと Docker 遅いし、いっそリモートホスト上に VSCode の作業場所を作っておけばいいのでは？と思い至り、この記事を書くことにしました。

### リモートホスト上で VSCode を動かすメリット

* 貧弱なクライアントや、Windows 環境でも快適にビルドなどができる
* npm モジュールのダウンロードとかが概ね早い
* VSCode がインストールされていて、SSH さえつながれば、すぐに開発環境を整えることができる

### リモートホスト上で VSCode を動かすデメリット

* 金がかかる

## 用語集

| 用語 | 概要 |
|---|---|
| VSCode | Visual Studio Code というエディタ。イケてる |
| AWS | Amazon Web Services というクラウドのサービス。イケてる |
| AWS EC2 | AWS の VPS サービス。イケてる |

## 環境を作る

### 1. EC2 のインスタンスを作る

ちょっと、インスタンスの作る手順をことこまかに解説しようと思ったのですが、お金かかるし責任取れないので、割愛します！ポイントを箇条書します。

* この記事では Amazon Linux 2 AMI で解説します
* インスタンスタイプは、t3a.medium ぐらいあれば快適に動く（主観）印象です
* セキュリティグループは SSH(ポート22) だけ開けてください

### 2. SSH config を書く

SSH config を書いてください。下記は一例です。

```
Host vscode
  HostName xxxxxxxxxxxxx.amazonaws.com
  User ec2-user
  IdentityFile ~/.ssh/vscode.pem
  LocalForward 3000 127.0.0.1:3000
```

後述しますが、リモートホスト側で `localhost:3000` に開発サーバを立てるので、ローカルフォワードをしておきます。

### 3. VS Code で Remote Development の Extension をインストールする

ポチポチしたらインストールできるので、入れてください

### 4.  VS Code から SSH で接続する

左下にある「><」みたいなアイコンをクリックし、出てきたメニューから、「Remote-SSH: Connect to Host」 を選択します。

選択すると、さきほど SSH Config に書いたホストが出てくるので、それを選択します。

新しいウィンドウが立ち上がり、接続が完了すれば、環境づくりは OK です。

## create-react-app を使ってみる

create-react-app でアプリを作ってみましょう。

### 1. node をインストールする

好みの方法でいいのですが、node をインストールしてください。
僕は [nvm](https://github.com/nvm-sh/nvm/) で入れました。

### 2. `create-react-app` を実行する

ホームディレクトリなどで、 `npx create-react-app app-name` を実行し、React のアプリを作成します。通信はインスタンス上で行われるので、テザリングとかでも安心してできるのがいいところ。

### 3. React の開発環境を立ち上げる

先ほど、作成したアプリのディレクトリに移動し、`npm start` で開発サーバを立ち上げます。開発サーバはホストの `localhost:3000` に立ち上がりますが、ローカルフォワードを設定しておけば、クライアント側の `localhost:3000` で確認することができます。HMR もちゃんと動きます！

![スクリーンショット 2019-12-10 23.16.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101688/58314c12-8f59-991e-4b66-07dea4bccc86.png)

やった！これで特に不自由なくフロントエンド開発はできると思います。

## おわりに

退職してるのに勝手にカレンダーに登録して書きました。日付が変わってないので、ギリギリセーフだと思います。飛ぶ鳥跡を濁さず。えらい。カヤックはいい会社です。

次回は [ken39arg](https://github.com/ken39arg) さんの「フルマラソンでサブスリーする方法を書く」です！
Laravelで.vue単一ファイルコンポーネントを使う①

#そのままでは動かない
Vue.js自体はjQueryやcss同様、適切にライブラリをロードすればそのまま使えるのですが、拡張子.vueの単一ファイルコンポーネントを使おうとするとコンパイルする必要があります。知らずにハマってしまいteratailで教えてもらいました。

#手順
webpackというコンパイラ（？）とNode.jsのライブラリがいるらしいのですが、筆者の場合はNode.js入れた時にはwebbpackも入ってました。あやふやですいませんが、Laravelのプロジェクト作った時に初めからwebpackはあったかもしれない。

```
node -v
npm -v
```
でバージョンが出ればnode.jsのライブラリは入ってます。
出なかったら
Node.js日本公式サイト(https://nodejs.org/ja/)
でダウンロードしてGUIからダブルクリックとかでインストールする。

次に

```
npm install -g vue-cli
```

とやるとVue CLIがインストールされる。・・はずがそうならなかった。
エラーメッセージでググると権限がなくてpermission errorになってるとかで、下記のコマンドを打てばいけると書いてあったので
それからもう一度上のコマンドを実行したらできました。
※メチャクチャ時間かかるコマンドなので注意。私はパッと読んで、「ふーむ、npmをインストールしたディレクトリの配下を再帰的にオーナー権限帰るんだな」と思って実行したら、ユーザーディレクトリ全部見てるの！？って感じの動きになり、30分以上かかりました。途中で放置してシャワーしてきたので正確にはわからないけどすっごくかかります。もっといいコマンドあるかも。

```
sudo chown -R $(whoami) $(npm config get prefix) / {lib/node_modules,bin,share}
```

で、できたらまた

```
npm install
```

しないとなんかエラー出てた。

続きはまた書く予定です。
【jQuery】スムースscroll　メモ

#HTML
```html:filename.html
<a href="#">
  <button class="scroll-top" id="js-button">
    <i class="fa fa-chevron-up" aria-hidden="true"></i>
  </button>
</a>
```

#CSS
```css:filename.css
/*scroll-top*/
.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  background-color: #999;
  opacity: .8;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  color:  #fff;
}
.scroll-top:hover {
cursor: pointer;
opacity: 0.8;
}
```

#JavaScript
```js:filename.js
$(function(){
        // #で始まるリンクをクリックしたら実行されます
  $('a[href^="#"]').click(function() {
    // スクロールの速度
    var speed = 500; // ミリ秒で記述
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
    });
  });
```