OmniAICreator/Qiita-1.07M huggingface dataset:
[Angular] ブートストラップ - @NgModuleとは何か (3)

`@NgModule`とはなんなのかを知るシリーズ3回目です。
今回は[Bootstrapping](https://angular.io/guide/bootstrapping)の勝手訳です。

今回の記事を理解するのに、以下の知識を前提としています。
[JavaScriptのモジュール - @NgModuleとは何か (1)](https://qiita.com/sengoku/items/a62cb8d75733b0321706)
[JavaScriptモジュール vs. NgModule - @NgModuleとは何か (2)](https://qiita.com/sengoku/items/52085ad12d85193d65d6)


# 前段

NgModuleは、アプリケーションの各部位がどのように協調するかを記述しています。全てのアプリケーションには、常に最低ひとつのrootモジュールがあります。rootモジュールがアプリケーションを起動するブートストラップです。慣例により、これを`AppModule`と名付けます。

Angular CLIを使ってアプリケーションを新規作成すると、デフォルトでは下記のようなファイルができあがります。[^1]

[^1]: Angular CLI 6.0.6で生成

```ts:app.module.ts
/*
JavaScriptモジュールをインポートしています。
*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

/*
@NgModule修飾子がついたAppModuleクラスです。
*/
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

JavaScriptのインポートに続いて、`@NgModule`がついた`AppModule`クラスがあります。

`@NgModule`修飾子の存在が、クラスをNgModuleとして認識させます。`@NgModule`内のメタデータが、アプリケーションがどのようにコンパイルして起動されるかを示します。

* `declarations` — このアプリケーションのたったひとつのコンポーネントです。
* `imports` — `BrowserModule`をインポートしています。BrowserModuleは、DOMレンダリング、サニタイズ、locationといったブラウザに特化したサービスを持ちます。
* `providers` — サービスプロバイダです。
* `bootstrap` — Angularが生成するrootコンポーネントです。index.htmlウェブページに挿入されます。

CLIによって自動生成されたコンポーネントが、`declarations`と`bootstrap`に列挙されています。

# `declarations`配列

`declarations`配列は、Angularにモジュールの支配下にあるコンポーネントがなんであるかを教えます。新しいコンポーネントを作成したら、`declarations`に追加しないといけません。

`declarations`に記述せずにコンポーネントを使おうとすると、エラーメッセージが出力されます。

`declarations`配列には、宣言可能なクラスのみを列挙できます。宣言可能なクラスとは、コンポーネント、ディレクティブ、パイプです。宣言可能なクラスが属することができるのは、一つのモジュールだけです。ひとつの宣言可能なクラスを異なるモジュールに追加するとエラーとなります。

宣言可能なクラスは、そのモジュール内からのみ見えます。他のモジュールからは見えません。他のモジュールから見えるようにするには、そのモジュールからエクスポートし、他のモジュールでインポートします。

# @NgModuleでディレクティブを使う

ディレクティブ、コンポーネント、パイプを使うには、いくつかやることがあります。

1. それを書いたファイルからエクスポートする。
2. 適切なモジュールファイルでインポートする。
3. `@NgModule`の`declarations`に追加する。

順番に見ていきます。

## クラスをエクスポート

`@Directive`を付けたクラスファイルを作成し、エクスポートします。

```ts:src/app/item.directive.ts
import { Directive } from '@angular/core';

@Directive({
  selector: '[appItem]'
})
export class ItemDirective {
// code goes here
  constructor() { }

}
```

## クラスをインポート

NgModuleがあるファイルにインポートします。

```ts:src/app/app.module.ts
import { ItemDirective } from './item.directive.ts'
```

## `declarations`に追加

`@NgModule`修飾子の`declarations`配列に追加します。

```ts:src/app/app.module.ts
  declarations: [
    AppComponent,
    ItemDirective
  ],
```

# `imports`配列

このモジュール内のコンポーネントから参照されるコンポーネント、ディレクティブ、パイプをエクスポートしているモジュールを列挙します。今回のケースでは、`AppComponent`が`BrowserModule`のコンポーネント、ディレクティブ、パイプを参照しています。


# `provider`配列

アプリケーションが必要とするサービスを列挙します。ここで列挙されたサービスは、アプリケーション全体から使うことができます。詳しくは[Providers](https://angular.io/guide/providers)へ。


# `bootstrap`配列

アプリケーションはroot `AppModule`をブートストラップして起動します。ブートストラッププロセスは`bootstrap`配列に列挙されたコンポーネントを作成し、ブラウザのDOMに挿入します。

各ブートストラップコンポーネントは、そのコンポーネント自身が持つコンポーネントツリーの根元となります。

複数のコンポーネントツリーを配置することもできますが、ほとんどのアプリケーションはただひとつのコンポーネントツリーしか持たず、単一のコンポーネントをブートストラップします。
EC-CUBEのexperimental/sfブランチでプルリク送ったけどInspectionのテストでこけてしまった時の対処方法

EC-CUBEのexperimental/sfブランチでは静的解析が自動テストに組み込まれています。

一定の規約にしたがってコーディングされていないとこの静的解析でエラーとなりユニットテスト以降が実行されません。

静的解析のテストで引っかかった場合は以下のコマンドでコーディング規約にしたがった形に修正してください。

# 修正箇所の確認

```shell
vendor/bin/php-cs-fixer fix --config=.php_cs.dist --dry-run --diff
```

# 修正を実行

```shell
vendor/bin/php-cs-fixer fix --config=.php_cs.dist
```
CentOS7にsupervisorを入れるまでのメモ

Laravel5.5 のキューを本番で使うために、supervisorを利用することにしました。
※[Laravelドキュメント](https://readouble.com/laravel/5.5/ja/queues.html#supervisor-configuration)より
そのための道のりを記したメモです。

# pipのインストール
```
% sudo yum install python-pip
```

# pipのアップデート
```
% sudo pip install --upgrade pip
```

# supervisorのインストール
```
sudo easy_install supervisor
```

以上でした。
Laravel + Vue(Vuex)の多言語対応

Laravel + Vue の構成で、i18n対応をしたい時、Vue側とLaravel側両方で管理するのは大変なため、一つにまとめたくなります。
基本的にLaravel側でlocaleファイルを作成管理して、同じものをVue用に生成するという流れで運用していこうと思います。

## 環境

- Laravel5.6
- Vue2.5.7

## Laravel側

1. laravel-vue-i18n-generatorをインストール。

```
$ composer require martinlindhe/laravel-vue-i18n-generator
```

2. configファイル生成。

```
$ php artisan vendor:publish --provider="MartinLindhe\VueInternationalizationGenerator\GeneratorProvider"
```

3. localeファイルをresources/lang/ja に作る。


4. config/vue-i18n-generator.php をvuex-i18n用に編集。

```
- 'i18nLib' => 'vue-i18n',
+ 'i18nLib' => 'vuex-i18n',
```

5. vuex-i18nで使うjsファイルをlaravelのlocaleファイルから生成。

```
$ php artisan vue-i18n:generate
```

## Vue側

1. vuex, vuex-i18nがなければインストール。

```
$ yarn add vuex vuex-i18n
```

2. Vueのエントリファイル(resources/assets/js/app.js)を編集。

```
.
.

import Vue from 'vue';
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import Locales from './vue-i18n-locales.generated';

Vue.use(Vuex);
const store = new Vuex.Store();
Vue.use(vuexI18n.plugin, store);

// resources/lang で用意したlocaleファイルを追加
Vue.i18n.add('ja', Locales.ja);
Vue.i18n.add('en', Locales.en);

// デフォルトlocaleを設定
Vue.i18n.set('ja');

.
.
.


const app = new Vue({
  store,
  el: '#app'
});
```

## 使い方

例えばlocaleファイルvalidation.phpに

```
return [
.
.
  'date' => ':attributeは、正しい日付ではありません。',
.
.
]

```

のようなものがあれば、


Laravel(Bladeテンプレート)では、

```
@lang('validation.date', ['attribute' => '誕生日'])
```

Vueでは、

```
{{ $t('validation.date', {attribute: '誕生日'}) }}
```

と書け、 `誕生日は、正しい日付ではありません。` と表示されます。

これでLaravelとVueのlocaleファイルを一箇所で管理することできるようになりました。
Dockerが動かない時

PCを再起動するとDockerコマンドが無効になってしまい、困ったので記事にしました。（Docker for macです。）

```
$docker ps
Error response from daemon: Bad response from Docker engine
```

ツールバーにあるクジラアイコンの「Preferences...」をクリック。

<img width="497" alt="スクリーンショット 2018-07-06 11.09.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/202493/cb9f63db-6249-a451-9c07-daa7b8173d6e.png">

「Restart」をクリック。

暫くすると、

```
$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
```

動きました 🎂
GANについて生成モデル初心者が色々調べた感想

#はじめに
Generative Adversarial Network，面白そう！
って思ったんですが，
英論文を本気で読むほどではなかったので
何とか日本語の記事で理解したい．
そんなモチベーションを持っている方に共有したいこの記事．
やったこと書いてありますけど，大事なのはオチなので，
そこだけ読んで頂いても構いません．

#やったこと
##とりあえず色んな記事読んでみました．
https://elix-tech.github.io/ja/2017/02/06/gan.html
https://blogs.nvidia.co.jp/2017/06/21/generative-adversarial-network/
https://qiita.com/taku-buntu/items/0093a68bfae0b0ff879d
http://ventureclef.com/blog2/?p=3423
https://qiita.com/itok_msi/items/b6b615bc28b1a720afd7
他にも読んだと思うのですが，忘れました．

生成モデルと識別器を用意します．
ゴールは
『生成した画像とデータセットの画像の区別がつかなくなることを目指す』
といったとこでしょうか．

##実装もしてみました．
手を動かさないと理解したか示せないと思い，
改造する形で実装してみました．
chainer使っているんですが，バージョンの都合上，
ベースはこの方のを参考にしました．
http://nykergoto.hatenablog.jp/entry/2016/11/24/205301

#おわりに
人工知能学会誌voi.33に載っていた，
『GAN-敵対的生成ネットワーク-の発展』が
超わかりやすかったですっておオチです．
https://ci.nii.ac.jp/naid/190000007321
余計な情報はなく理論だけきっちり押さえられます．
Linuxコマンドのメモ

ディスクの空き領域を調べる

```
df -h --total
```

カレントディレクトリのディスク使用量の合計だけ表示する

```
du -s -h
```

ファイル数をカウントする

```
ls -F | grep -v / | wc -l
```

ファイルを作成日順にソートして表示する　

```
ls -l -lt -c
```

ファイルをサイズが大きい順にソートして表示する　

```
ls -S -l -h
```

dir_name以下のファイルを全て圧縮する。
(ファイルが多くてzip: argument list too longが出る時に)

```
zip -r file.zip dir_name
```

apiとかの結果をとりあえず見る

```
curl "URL"
```


pythonのバックグラウンド処理
pythonでnohupを実行すると、出力がバッファにとどまってしまうので-uオプションをつける必要がある

```
nohup python -u hoge.py > out.log &
```

バックグラウンド処理の停止

```
# PIDを確認する
ps x

# PIDを確認したらkillする
kill PID
```
読みやすいSQL

https://qiita.com/s-age/items/3c21e797ac2b116d52a6

圧倒的我流なんであれなんですけど

・全部小文字（shift押すの面倒だから）
・キーワードは全部左寄せ、中身はインデント揃える　
・短いなら１行で、長くなるなら改行
・joinの条件も改行してインデント
・条件式は基本的に１行１つ
・接続詞は前に持ってくる、演算子を前に持ってくるのといっしょ

```sql
select id from user where id = 1;
```
```sql
select
    u.id,
    u.name,
    case
        when u.gender = 1 then 'male'
        when u.gender = 2 then 'female'
        else 'unknown' end as gender,
    coalesce(g.name, 'free') as group_name,
    array_to_string(array((
        select name
        from product
        where user_id = u.id
    ), ',') as product_names,
    (
        select sum(sales)
        from product
        where user_id = u.id
    ) as total_sales
from
    user u
    left outer join group g
        on g.id = u.group_id
        and g.is_deleted = false
where
    id = 1
    and u.is_deleted = false
order by
    u.created_at desc
limit 10
```
golangのデバッガdelveを使ってtestをデバッグする

#### 前提

delveは既にgo installされてるものとします。
delve自体の使い方は[Golangのデバッガdelveの使い方](https://qiita.com/minamijoyo/items/4da68467c1c5d94c8cd7)を参照

#### やり方

以下のコマンドでgoのテストをデバッグできます。

```
dlv test [package] -- -test.run [test_name]
```

packageはテスト対象のパッケージです。必要があれば指定。
test_nameの部分は、go testの-runで指定するのと同様に動作します。
`--` はdlvではなく、dlvで実行するデバッグ対象のプログラムにオプションを渡す場合に指定するオプションです。

breakpointを置くなり変数見るなりは使い方を参照してください。
[関数系] php_uname を真剣に読んでみた。

# 概要

php_unameについて仕様場面まで考えてみる。
linuxのコマンド「uname」をラップしたメソッドであることは名前からもわかりやすい。unameを知らないとよくわからないが。

# そもそもunameとは？

linuxのコマンド。unix系のコマンド。そのため、macでも使用できる。自分のMacで使用してコマンドを確かめるのも良い。基本的にはOSについての情報を返すコマンドと覚えておけば十分。

以下はオプション無しでMacで実行した場合。

![スクリーンショット 2018-07-06 10.48.55.png](https://qiita-image-store.s3.amazonaws.com/0/183308/03074998-8e47-49ee-4a93-14fc5592e42e.png)

## option

unameコマンドはオプションを付与することで様々な情報を確認することができる。


|オプション|説明|
|:---|:---|
-a（--all）|すべてのシステム情報を表示する。
-v（--kernel-version）|カーネルのバージョンを表示する。
-r（--kernel-release）|カーネルのリリース情報を表示する。
-p（--processor）|CPU情報を表示する。
-m（--machine）|コンピュータのマシンタイプを表示する。
-n（--nodename）|ホスト名を表示する。

# php_unameの仕様

```
PHP が稼動しているオペレーティングシステムに関する情報を返す
```

unameコマンドをphpを通して実行しているという認識さえ間違わなければ大丈夫。


# 参考

[unameコマンドの使い方：オプション含めてまとめました 【Linuxコマンド集】](https://eng-entrance.com/linux-command-uname)
React Native Firebase Starterがiosで動かない場合の対処

## 出たエラー
```
The following build commands failed:
	CompileC /Users/hogehoge/Documents/Project/ProjectName/ios/build/Build/Intermediates.noindex/RNFirebase.build/Debug-iphonesimulator/RNFirebase.build/Objects-normal/x86_64/RNFirebaseFirestoreCollectionReference.o RNFirebase/firestore/RNFirebaseFirestoreCollectionReference.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

Installing build/Build/Products/Debug-iphonesimulator/Helpment.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/Helpment.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
```

## 対処
`pod 'Firebase/Core'` のバージョンの部分を `'~> 5.0.1'` に変更する

```:ios/Podfile
# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'

target 'Helpment' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for Helpment

  # Required by RNFirebase
  pod 'Firebase/Core', '~> 5.0.1'

  # [OPTIONAL PODS] - comment out pods for firebase products you won't be using.
  pod 'Firebase/AdMob'
  pod 'Firebase/Auth'
  pod 'Firebase/Database'
  pod 'Firebase/DynamicLinks'
  pod 'Firebase/Performance'
  pod 'Firebase/Firestore'
  pod 'Firebase/Messaging'
  pod 'Firebase/RemoteConfig'
  pod 'Firebase/Storage'

  pod 'Fabric', '~> 1.7.6'
  pod 'Crashlytics', '~> 3.10.1'
end
```

## 参照
[https://github.com/invertase/react-native-firebase-starter/issues/35](https://github.com/invertase/react-native-firebase-starter/issues/35)
emulatorをコマンドラインから起動する

毎回android studio立ち上げるのが面倒だったので数行scriptを書く

```shell
#!/bin/bash

cd $ANDROID_HOME/tools

if [ $# -eq 0 ]; then
  AVD=$(emulator -list-avds | peco)
else 
  AVD=$1
fi

echo $AVD
emulator -avd $AVD
```

usage

```shell-session
$ avd-run
$ avd-run Nexus_5X_API_25
```
Slack Legacy token generator

すぐ忘れるので備忘録です。

https://api.slack.com/custom-integrations/legacy-tokens

ではなく，

https://api.slack.com/apps

で token を生成するようになったようです。

1. Create New App
2. Add features and functionality で Permission 選択
3. Scopes => Administer the workspace
4. Save Changes
5. Install App to Workspace
6. Tokens for Your Workspace

で xoxp- で始まる token が取得できます。
PhpStormでuseが「...」のように折り畳まれないようにする設定

PhpStormのエディタではデフォルトで`use`が`use ...`のように折り畳まれて表示される。(下図)

<img width="309" alt="alis2___Volumes_casesensitive_alis2__-_____vendor_guzzlehttp_guzzle_src_Middleware_php.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/907807aa-29b8-580c-e124-84b04d41f7fe.png">

折り畳まれないようにするには、PreferenceのEditor→General→Code Foldingの「PHP imports」からチェックを外す。

<img width="1030" alt="Preferences.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/ba180596-ccbd-e781-5060-2dbc1e52cbf7.png">
[ CSS3 ] 疑似要素で表示した文字を transform する

まずリンクの頭に擬似要素を使って >> を付けます。
これで同様のリンク全てにいちいち記述しなくてもOkですね。

---
##HTML

```
<a href="a001.html" class="linkStyleA">リンクA</a>
```

##CSS

```
.linkStyleA::before {
 content: '>>';
}
```

---

これを普通に表示した場合、>> の表示が横に長過ぎると感じる事があると思います。
そこで下記のように CSS3の transform を使用して横幅を調整しようとするわけですが、

```
.linkStyleA::before {
 content: '>>';
 transform: scale(0.5, 1);
}
```

残念ながらこれでは効きません。
以下のようにする必要があります。

```
.linkStyleA::before {
 content: '>>';
 display: inline-block;
 transform: scale(0.5, 1);
}
```

display の指定が追加されているのがお分かりいただけますでしょうか。
本題は以上になります。

【余談】
この指定が可能だと言うことは :hover 時にアニメーションさせることも可能だと言うことですが、それはまた別の機会に。
HerokuにPython Djangoをデプロイするときエラー「No matching distribution found for anaconda-client==1.6...」

DjangoをHerokuにデプロイするときこんなエラーに遭遇しました。

``` Log
$ git push heroku master
Counting objects: 499, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (493/493), done.
Writing objects: 100% (499/499), 1.20 MiB | 576.00 KiB/s, done.
Total 499 (delta 156), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Python app detected
remote: -----> Installing requirements with pip
remote:        Collecting alabaster==0.7.10 (from -r /tmp/build_xxx/requirements.txt (line 1))
remote:          Downloading https://files.pythonhosted.org/packages/2e/c3/xxx/alabaster-0.7.10-py2.py3-none-any.whl
remote:        Collecting anaconda-client==1.6.14 (from -r /tmp/build_xxx/requirements.txt (line 2))
remote:          Could not find a version that satisfies the requirement anaconda-client==1.6.14 (from -r /tmp/build_xxx/requirements.txt (line 2)) (from versions: 1.1.1, 1.2.2)
remote:        No matching distribution found for anaconda-client==1.6.14 (from -r /tmp/build_xxx/requirements.txt (line 2))
remote:  !     Push rejected, failed to compile Python app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !	Push rejected to djangogirlsblog.
remote: 
To https://git.heroku.com/djangogirlsblog.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/djangogirlsblog.git'
```

anaconda-clientが見つかりませんでした、というエラーです。

## 原因
仮想環境を作っていないために、pip freezeコマンドで requirements.txtを作成すると、ローカルにインストールしたライブラリがすべて出てしまうことが原因です。

## 解決策
仮想環境を作って、Herokuに必要なライブラリだけを pip install してから pip freeze でrequirements.txtを作成します。

``` Bash
python -m venv heroku_env       # 仮想環境を作る(Python 3.3からの標準機能)
source heroku_env/bin/activate  # 仮想環境をアクティベート
pip install --upgrade pip       # pipアップグレード
pip install django-toolbelt     # pipにDjangoインストール（他に必要なライブラリがあればそれも入れます）
pip freeze > requirements.txt   # requirements.txtを再作成
git add .
git commit -m 'comment'
git push heroku master          # デプロイ
```

こんな感じになったら成功

```Log
$ git push heroku master
Counting objects: 501, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (495/495), done.
Writing objects: 100% (501/501), 1.20 MiB | 578.00 KiB/s, done.
Total 501 (delta 158), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Python app detected
remote: -----> Installing requirements with pip
remote: 
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote: 
remote: -----> Compressing...
remote:        Done: 65.8M
remote: -----> Launching...
remote:        Released v16
remote:        https://djangogirlsblog.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/djangogirlsblog.git
   8f60f8f..ade1264  master -> master
```

###### Author : 溝江 智徳
コマンドでランダムなパスワードを作る

# 方法

こんな感じで、**英数字 と 記号(+ /) 10文字** のパスワードが作れます。
文字数を変えたい場合には ``fold -w`` の ``10`` を変えてください。

```bash
$ cat /dev/urandom | base64 | fold -w 10 | head -n 1
fE2tgSb16u
```

わたしは``alias``できっちゃってます。

```bash:.bashrc
alias rand='cat /dev/urandom | base64 | fold -w 10 | head -n 1'
```

```
$ rand
fE2tgSb16u
```

完全にランダムなので英字だけの場合もあったりしますので、数字を含む、や、記号を含む、みたいなパスワードが欲しかったらそれが出てくるまで何回か試してください。

# 環境
Linux/Unixのbashならたぶん動きます。

Windowsでやりたい方はCygwinかMingwでどうぞ。
わたしは``Git for Windows``で入ってくれる``gitbash`` ≒ ``Mingw`` でやってます。

# 仕組み

一応解説。

``cat /dev/urandom `` とすることで ``/dev/urandom`` という疑似デバイスを使った乱数を発生させます。 別に ``/dev/random`` でもいいです。 このコマンドだけうつとコンソールが乱数データでいっぱいになりますので、やってビックリしみてください。。Ctrl+Cをたくさんうてば止まります。

```bash
$ cat /dev/urandom
............(自粛)................
```

次に、``base64`` コマンドで乱数データ(バイナリデータ)をそれっぽい英数字記号、つまり、文字に置き換えます。ここがちょっとポイントで ``Base64`` にしているので使われる文字種類が、a～z A～Z 0～9 + / です。このコマンドでのパスワードはこれら文字種で作られます。 もっと記号とか増やしたかったら ``base64`` ではない方法にするとか、``+`` がいやだったら最後に ``sed`` とかで置換してもいいです。
ここまででこんな感じ。

```bash
$ cat /dev/urandom | base64
XsnBKARwMwwOJpT5uFJKKIpepSaX5y0FVDnsNy3OyYWJ3nFdOqG+kBtEEUJXGIYWyOkKn4WYBhF5
bz5gXB3GHGOtNge6sIVINsWdz10VMcZ8WnKjS74/+zlP/qNQ+kMKGrteDYGp7q3PtdPioDry+M0P
INMddrMYmoMU0/fns1HPZppw//GPCd9y8PlmoUJZXlXMpY7X+WqAPCyFvZoXWdxTU70KAR70hTZB
94vyTA149XK2d0Ekntfop+zefSH3WDPMf0S9ewzPK0t60O5lAY3VQEPIUllRc6HVnTSwGgmIcRW4
    :
```

次に、``fold -w 10`` で10文字区切りでテキストを改行します。　``fold`` は指定した文字数で改行してくれるコマンドです。 もしパスワードを8文字にしたければ ``-w 8`` とかにしてください。 ``base64``コマンド自体がデフォルトで 76文字 で改行されるので、76文字 以上のパスワードにするときはご注意ください（ない？）。。もししたかったら ``base64 -w 0`` で改行しないようになど考えてみてください。。。

```bash
$ cat /dev/urandom | base64 | fold -w 10
NGcxhgAFjZ
sYKBzoEqTW
q8abDGE9Pq
gfwXXBAFf1
wx2KHzc4yo
fxvBNoAHdL
Lab8DZRKSA
1/o2we
    :
```

最後に、先頭の１行を取得することで完成です。

```bash
$ cat /dev/random | base64 | fold -w 10 | head -n 1
BOJKAO1Lis
``
RspecでSubjectを複数回実行する方法

# 背景
モデルの操作などで、冪等性をテストしたいけどベストプラクティスがわからない。

例えば

```ruby:model_spec.rb

describe Model, type: :model do
  describe '.do_something' do

    subject { Model.do_something }

    context 'execute twice' do
       it 'not duplicate records' do
         subject
         expect{ subject }.to change{ Model.count }.by(0)
       end
    end

  end
end
```
↑これだと、
subjectはひとつのexample内ではメモ化されるので複数回実行されない。


# 解決策

## 1. subjectの中身をexample内にべた書きする

```ruby:model_spec.rb

describe Model, type: :model do
  describe '.do_something' do

    subject { Model.do_something }

    context 'execute twice' do
       it 'not duplicate records' do
         Model.do_something
         expect{ subject }.to change{ Model.count }.by(0)
       end
    end

  end
end
```

ただ、見通しも悪くなるし
subjectの中身が複数行の場合や、３回以上実行したい場合に行数が増えすぎる問題がある

##　2. subjectの中身をメソッドに定義する

```ruby:model_spec.rb

describe Model, type: :model do
  describe '.do_something' do

    subject { model_do_something }

    def model_do_something
      Model.do_something
    end

    context 'execute several times' do
       it 'not duplicate records' do
         model_do_something
         model_do_something
         model_do_something
         model_do_something
         expect{ subject }.to change{ Model.count }.by(0)
       end
    end

  end
end
```
これがベストな気がする。

もっとスマートなやり方があったら教えてください
API Gatewayの最大ペイロードサイズについて

# 1. まとめ

API Gatewayのペイロードサイズについて確認する．2018/7/2現在，API Gatewayの最大ペイロードサイズは10MBとなっている．本記事では，10MBを超えたときの挙動を確認する．10MBを超えると，`HTTP content length exceeded 10485760 bytes.`のエラーが返却される．最大ペイロードサイズについては上限緩和はできない模様．10MBを超える場合は，S3にデータをアップするなどして回避する必要がある．
        
# 2. 目次

- 1 まとめ
- 2 目次
- 3 確認
- 4 上限緩和
- 5 回避策
- 6 参考リンク

# 3.　確認

API Gatewayのペイロードサイズについて確認する．2018/7/2現在，API Gatewayの最大ペイロードサイズは10MBとなっている．[Amazon API Gateway の制限と既知の問題](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/limits.html)にて確認出来る．実際に10MB以上のファイルを送った場合どうなる確認する．

10MB以上のでかい画像ファイルを準備する．

```bash
$ du -sh scene_large.jpg
 17M	scene_large.jpg
```

[API Gateway+Lambdaでバイナリデータを処理](https://qiita.com/akatsukaha/items/024fbabc9a321665cb23)を参考に，環境を構築する．
サイズが最大容量10MBを超えてるよとエラーが返却される．

```bash
$ curl -X POST -H 'Content-type: image/jpeg' --data-binary "@scene_large.jpg" https://xxxxxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/v1/upload

HTTP content length exceeded 10485760 bytes.
```

10MBはちなみに10485760バイト 
(10MB*1024MB/KB*1024B/KB=10485760バイト)

# 4. 上限緩和

[Amazon API Gateway の制限と既知の問題](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/limits.html)に記載の通り，最大ペイロードサイズについては上限緩和出来ない．

# 5. 回避策

回避策としてS3にデータをアップする方法がある．

下記が参考になる．
- [Uploading Large Payloads through API Gateway](https://sookocheff.com/post/api/uploading-large-payloads-through-api-gateway/)

# 6. 参考リンク

- [Amazon API Gateway の制限と既知の問題](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/limits.html)
- [Uploading Large Payloads through API Gateway](https://sookocheff.com/post/api/uploading-large-payloads-through-api-gateway/)
EquatableなenumでスマートにString比較


## はじめに
コード上にクラスの状態をハードコードで書いていたら、enumを使ってまとめあげたほうが型安全で変更に強いよとレビュアーにご指摘をいただいたので、スマートな書き方のまとめ

## スマートな比較 **Equatable**
swiftのenum、struct、classには**Equatable**というプロトコルがあり、これを使うと
`A == B`
の形で比較ができる

## なるべくスコープを狭くする
時と場合に依りますが、ハードコードを避けるためのenumは基本privateがいいでしょう
Stringを継承しとくと
`"文字列" == .ok`
のような省略が効いてエモいけど、関係ないとこで出てきたらうざいよね

↓だときれいにかけた

```swift
//宣言
enum FriendStatus: String, Equatable {
    // == 時の比較方法
    private static func ==(lhs: String, rhs: FriendStatus) -> Bool {
        return lhs == rhs.rawValue
    }

    case ok = "OK"
    case applying = "APPLYING"
    case pending = "PENDING"
 }

//利用時の例
let pendingFriends = friends.filter({$0.status == .pending})
```
GitLab-CIでビルド準備


# Build Runnerマシンのセットアップ
* Linux VMを作成する(ここではCent OS 7を使用)
* Gitlab Runnerのページで、Gitlab-ciのURLとtokenをメモする
　`ビルド対象のプロジェクトの設定ページ`-> `CI/CD` -> `Runners Settings`

* Gitlab-Runnerをインストールする

```bash
# yumにgitlab-ci-runnerを追加
curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh | sudo bash

## プロンプトで停止した場合はCtrl+Cを入力してパスワードを入力する

# gitlab-runnerのインストール
sudo yum install gitlab-runner

# runnerを登録
sudo gitlab-runner register

Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com/):
## gitlab runnerのページで表示されるgitlab-ciのURLを入力
## runnerからgitlabにアクセスできる様にNSGやファイアウォールを設定しておくこと
Please enter the gitlab-ci token for this runner:
## gitlab runnerのページで表示されるgitlab-ci tokenを入力
Please enter the gitlab-ci description for this runner:
## Runnerの説明を入力
[hostname-01]: 
Please enter the gitlab-ci tags for this runner (comma separated):
## Runnerを識別するタグを入力
Whether to run untagged builds [true/false]:
[false]: 
Whether to lock Runner to current project [true/false]:
[false]: 
Registering runner... succeeded                     
runner=xxxxxx
Please enter the executor: virtualbox, docker+machine, kubernetes, docker-ssh, parallels, shell, docker, ssh, docker-ssh+machine:
docker
Please enter the default Docker image (e.g. ruby:2.1):
node:8.10
```
* Runnersのページで、Active, Can run untagged jobsを選択

# .gitlab-ci.ymlファイルをプロジェクトに追加

```yaml:.gitlab-ci.yml
image: node:8.10

stages:
  - build

build-job:
  stage: build
  script:
    - npm install
```

* script：に記述したコマンドがpush時に実行される

## 参考
* [Install GitLab Runner using the official GitLab repositories \| GitLab](https://docs.gitlab.com/runner/install/linux-repository.html)

* [GitLab-CIを始めるための下準備](https://qiita.com/yurano/items/30de57c163f6edbb42de)

* [はじめてのGitLab-CI](https://qiita.com/yurano/items/a7804d987ccff37b1a9d)
第18話 有限単純群の無限個クラス

この記事は[仮面ライダービルドの数式](https://qiita.com/izmktr/items/e26a624e79bce3edccc9)の第18話です。

```math
\#\{family\ of\ finite\ group\}=18
```

有限単純群の無限個クラスは18種類ある、という意味です。

よく見かける、へんな足し算があります。

薬草＋薬草＝上薬草
イーブイ＋みずのいし＝シャワーズ

こういう、数ではない足し算を扱ってみよう、という考えで生まれたのが群です。
群ってのは、一通り計算ができるようにある程度定めたものです。
その条件は次の通り。

・必ず答えが出る
薬草＋こんぼう＝？　

・順番を入れ替えても同じ結果になる
（薬草＋毒消し草）＋万月草＝薬草＋(毒消し草＋万月草)

・何もしない計算ができる
薬草＋？＝薬草

・合成元でもぴったり当てはまるものがある
上薬草＋？＝薬草

このような条件が整ったものが群と呼ばれます。
モンスターやアイテムを合成するゲームはいろいろありますが、
最後の、合成元でも当てはまるものがある、と言う条件を満たすものはまずないでしょうね。

数学に戻ると、足し算において自然数(マイナスではない整数)は群にはなりません。
次の式を満たすxが自然数ではないからです。

```math
3+x=1
```

なので、足し算と整数なら群になります。
整数同士の足し算では、分数(有理数)や実数はでてきませんね。

さて、整数は無限にあるので、無限群です。
ゲームのアイテムやモンスターは無限に作ることはできないはずなので、有限群になります。

有限群の例はこれです。

```math
\begin{align}
1\times1&=1\\
-1\times1&=-1\\
1\times-1&=-1\\
-1\times-1&=1
\end{align}
```

1と-1の2種類だけで世界が完結しています。
これは2の循環群で、こう書くことが多いです。

```math
\begin{align}
0+0&=0\\
0+1&=1\\
1+0&=1\\
1+1&=0\\
\end{align}
```

最後の、1+1=0、というのが違和感がありますが、
二進数の1桁目だけを取り出したもの、と考えれば良いです。
n進数の1桁目を取り出した足し算は、全部循環群になります。

単純有限群の有限群までわかったところで、最後の単純の意味です。
これは、それ以上分解できないという意味です。
単純有限群は、有限群の素数、みたいに考えて下さい。

そして、有限群は循環群、交換群、リー群の3つにわけられ、リー群はさらに16種類にわけられ、
全部で18種類、というのが冒頭の式です。

群をテーマにした数学は群論と呼ばれ、
第5話で出てきた「5次方程式が解の公式を持たない」というのも、
「5次未満の交換群は循環群でもあるが、5次以上は循環群にならない式で表せない」という
説明で解決されています。 

流石に疲れたと思いますが、あと少しだけ続きがあります。
第26話に続きます。
Rails5にて原因不明のActiveRecord::PendingMigrationErrorをとりあえず解消する方法

#はじめに
Rails5初心者です。
ActiveRecord::PendingMigrationErrorのエラーメッセージにぶつかり、時間を取られたため、"とりあえず"の解消の記録を記します。
#解消までに行ったこと
ActiveRecord::PendingMigrationErrorは、
通常、migrationファイルが生成されるコマンド（rails g scaffold、rails g model、rails g migration）を実行した後にrails db:migrateコマンドを実行していない場合に発生するエラーである。
⇩
rails db:migrateコマンドを実行
⇩
同様のエラーメッセージが表示され、解消されない。
⇩
通常であればrails db:versionで表示されるVersionとmigrationファイルの最新のもののVersionが一致しているらしいとの情報を仕入れる（一致していないことがエラーの原因？）
⇩
rails db:migrate:reset RAILS_ENV=developmentを入力することでDBとmigrationファイルの整合性を保つことができる（※データは消去される）
⇩
"とりあえず"エラー解消
#終わりに
結局根本的なエラーの原因は分からなかったのですが、ニッチモサッチモいかなくてとりあえずなんとかしたい、という方はrails db:migrate:reset RAILS_ENV=developmentを試されてはいかがでしょうか。
#参考URL
[ruby on railsでのエラー： ActiveRecord::PendingMigrationError
](https://ja.stackoverflow.com/questions/32395/ruby-on-rails%E3%81%A7%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC-activerecordpendingmigrationerror)
WordPress 初心者 オリジナルテーマ作り【１】

HTMLとCSSが問題なく出来るようになってきたのでPHPのコーディングを進めていたのですが、
エラーを連発してしまい、自分で解決出来なくなってしまいました。。

もう1度初めから、1個1個の過程を理解しながら進める為にもブログに記録していきます。
※ここでは作りたいページのHTML・CSSが完成しているところから進めます

#1.wordpressがどのように構成されているのか
HTML・CSS・PHPなどのファイルや画像フォルダ、データベースには**MySQL**を利用している。
このファイルやフォルダ群とデーターベースの間で、データを取得し、データを返す、と言う作業を行っており、サーバーへ表示されている。

#2.wordpressのディレクトリ構成
wordpressをインストールしてみると、たくさんのフォルダやファイルが！

**wp-content**
wordpressのテーマやプラグイン、画像などのデータが入っているフォルダ。
オリジナルテーマ作り(私のような初心者)はこのフォルダ内で主に作業します。
※wp-contentの中の**theme**フォルダにテーマが入っています。
このthemeフォルダ内にオリジナルテーマを配置していきます！

**wp-admin**
wordpressの管理画面に関するファイルなどのデータが入っているフォルダ

**wp-includes**
wordpressシステム全体に関するデータフォルダ

**wp-config.php**
wordpressの設定ファイル。

**wp-login.php**
ログイン画面に関するフォルダ

**wp-load.php**
動作に必要なプログラム類のフォルダ

**index.php**
サイトにアクセスされた時に最初に表示されるファイル

その他にもいろいろなファイルやフォルダがあります〜


#3.環境構築
①wordpressのインストール
②データベースのインストール
データベースMySQLを使えるようにするため、ローカル環境としてMAMPをインストールし、その上でwordpressをインストールしました。
そのほかにもLocalやXAMPP、Dockerなど、使用する方の環境（macなのかwindowsなのか）にあったものをインストールしてください。

データベースについてまた詳しく調べてまとめ次第、ブログに書こうと思います。
とりあえず今ここではオリジナルテーマ作成を進めていきましょう。


#4.テーマフォルダを作成
上記にもあるように
wordpress
　∟wp-content
　　∟**theme**
このthemeフォルダの中にテーマフォルダを作っていきます。

ここではmario_themeとします(私の名前のテーマ！)
最小構成としてmario_themeフォルダ内には
**①index.php**
index.htmlをindex.phpにリネームすればOK
**②style.css**
index.htmlに対してのCSSファイル。
これはテーマフォルダの直下ではないといけないルールがあるそうです。
↓
そしてこのCSSファイル内にテーマについての記述をする

Theme name : テーマの名前(必須)　ここではmario_themeとします
Theme URI : テーマのURI(URL)
Description : テーマの説明　例）オリジナルテーマ、など
Version :　バージョン　初めは1.0でいいんじゃないんですかね
Author: 作った人の名前
Author URI: 作った人の URL
License: ライセンス
License URI: ライセンスの URL
などですが、全て記入しなくてもいい

```
/*
Theme name : mario_theme
Theme URL : 
Description : オリジナルテーマ
Version : 1.0
*/
```
こんな感じでCSSファイルの一番上に挿入。

これでひとまずwordpress上にテーマとして表示出来るようになる…
といろいろなサイトで見かけましたが、私の場合はこれで出来ず、
ここで時間がかかったものです泣

**このオリジナルテーマフォルダmario_themeを圧縮しなければいけなかったのです！**
圧縮するって当たり前のことなんですかね？私は全然知らなかったです。

index.phpとstyle.cssがあればページは表示されますが、
テーマを選択する際に、どのテーマなのかわかりやすいように、
そのページのスクリーンショットをサムネイルとして表示させますので、
スクリーンショットをテーマフォルダに保存します。
この時、screenshot.pngとしておくと、自動的にテーマ選択時のサムネイル画像となります。


#5.wordpressの管理画面からオリジナルテーマをインストールする
管理画面(ダッシュボード)
↓
外観
↓
テーマ
↓
新規追加　or 新しいテーマを追加
↓
テーマのアップロード
↓
ファイルを選択
ここで圧縮したZIP形式のテーマファイルを選択
↓
いますぐアップロード

をするとこんな感じになります

![スクリーンショット 2018-07-06 1.47.06.png](https://qiita-image-store.s3.amazonaws.com/0/244183/eb1ad449-a25f-ea41-2379-d9621c9a3934.png)


もともと入っているテーマもありますが、アップロードしたオリジナルテーマmario_themeにカーソルを合わせると
”有効化”と言うボタンが出てくるので、クリックするとオリジナルテーマが適応されます。
これでHTMLとCSSで構成した内容と同じものが、ホーム画面として表示されるはずです。


##ちょっと番外編
管理画面から、とさらっと書きましたが、
私はその管理画面の出し方さえわからずググりました笑
むしろワイのwordpressのページはどこじゃ、状態でした。

https://bazubu.com/how-to-login-to-wordpress-22995.html
こちらを参考にしてみてください。

wordpressの構造を理解した今なので、
ログイン画面はホームのアドレスの後にwp-login.phpをつけることや、
管理画面はwp-adminだってことがわかりました。

バッチバチの初心者だと、本当にわからないことだらけです。
ちなみにスクリーンショットのやり方も知りませんでした笑

そんなこともわからない初心者の私ではありますが、
次の記事では具体的にファイルを作っていきます！！


参考にさせていただきましたのはこちら
https://webst8.com/blog/wordpress-theme-howto-make/
こちらとってもわかりやすいです。神様。。
Macのターミナルでtmuxを使うとペインの大きさが変更できない ※個人用メモ


#症状
painの大きさ変更に割り当てられている”ctrl＋カーソルキー”にデスクトップの切り替え等が割り当てられているので、出来ない。

#対応 - ctrlからaltにprefixを変えよう！

・ターミナルの設定からaltキーを使えるようにする

・設定を記述

``` ~/.tmux.conf
set -g prefix m-b
```
#追記
・iterm2でaltをmetaキーとして使う場合

MacのiTerm2でaltキーをmetaとして認識させる方法
https://qiita.com/DQNEO/items/524724982ef49beb7f56

・ターミナルで使えなくなった(上記方法でitermでは使える)
　　環境設定-プロファイル-キーボード内で
　　操作できない該当のキーの組み合わせを消せば使える(かも)。
　　(これが何の設定かわかる人教えて頂けませんか？)
　　　
　　　さらに追記：消すと動かなくなる？？？？？
　　　（手動で他のプロファイルからコピぺ復元したら動いた


#追記2： 他の方法
ここまで書いてなんですが、　　
mission contrlの方をaltベースにした方がいいかもしれません。
キーボードによっては片手でできるようになるし。
tmuxの設定変えなくていいし。
（システム環境設定→キーボード→ショートカット→mission controlの項で変更可）

#最後に
ArchLinuxWikiとaltキーが使える情報提供してくれたサイトに感謝！
https://wiki.archlinux.jp/index.php/Tmux
macのターミナルが絶望的に見にくいので表示をlinux風にした。(自分用メモ)



#方法
~/.bash_profileに

```
export PS1="\[\e[0;32m\]\u@\h:\W$\[\e[0;0m\]"
```
を追加。

#結果
緑字で

```
ユーザー名＠ｐｃ名：カレントdir$
```
と表示
#おまけ-grepの該当箇所を色分け

``` ~/.bash_profile
export GREP_OPTIONS='--color=auto'
```
#参考
【mac】ターミナルのプロンプトの変更
https://qiita.com/griffin3104/items/0d610ad1a57fa6ad6a09
grepコマンドに色をつける
http://te2u.hatenablog.jp/entry/2013/10/18/222733
ArduinoでNMEAを扱ってみるメモ

#Arduino

```C
#include <TinyGPS++.h>
#include <SoftwareSerial.h>

const int PIN_RX = 8, PIN_TX = 9;

TinyGPSPlus gps;
SoftwareSerial ss(PIN_RX, PIN_TX);

void setup() {
Serial.begin(19200); 
ss.begin(19200);
ss.print("Start!");ss.println("");
}

void loop() {
  while (Serial.available() > 0){
    if (gps.encode(Serial.read())){
      ss.print("LAT=");ss.println(gps.location.lat(),6);
      ss.print("lng=");ss.println(gps.location.lng(),6);
      ss.print("ALT=");ss.println(gps.altitude.meters());
    }
  }
}
```

#メモ
・速度設定だいじ。でもMacだとsttyガン無視してるぽい。

```sh
$ sudo stty -F /dev/ttyUSB0 19200
```

・GPSの特性上、GPSアンテナと受信機をラズパイとかに接続して屋外や屋根に置いといて、RTKLIBにあるstr2strとかstrsvrでwifiで屋内にまで飛ばし、屋内でぬくぬくと実験することが多いかと思います。
そんなひきこもり諸君に朗報。
こんな感じでUSBシリアルにNMEAを投げられます。

```sh
$ sudo sh -c "nc 192.168.1.1 2101 > /dev/ttyUSB0"
```

また、U-blox社の受信機を使っているとNMEA+RTCM3とか、NMEA+UBXとかにしてる人もいるかと思います。その場合バイナリ値が混じってしまって正しく動かないのは想像難しくないですが、こんな感じで簡単に取り除けます。

```sh
sudo sh -c "nc 192.168.1.1 2101 |grep -a -E "^[\$]" > /dev/ttyUSB0"
```
React+styled-componentsのSSRだと部分的にレンダリングされない？

## 前提
* React/Reduxで動くSPAのWebサービス
* ページの構造は簡単なヘッダ、フッタ、サイドバーとメインのビュー構造
* node.jsで、SSRしてstreamで返すようにしてる
* styled-componentsでstyleをあててる

## 現象
<b>SSRされたページのうち、サイドバーとフッタはstyleがあたらない。</b>
正確には、SSRされたコンポーネントはヘッダとメインのリスト表示のみstyleがあたった状態で、サイドバー（右）とフッタはstyleがあたっていない状態で配信されてしまう。ただしその後クライアント側でhydrateされる段階で、styled-componentsのstyleがhtml上に展開されると全てのコンポーネントにstyleがあたる。このため、一瞬styleがあたっていない状態が見えるようなことが発生する。

## 原因
styled-componentsでstreamを使ったSSRを行う場合には、interleaveWithNodeStream()を利用する。これは、reactがSSRする際のreadableStreamをフックするような形で、streamの区切り（chunk）ごとにstyleをあてるtransform関数を適用している。

参考：[Github: styled-components transform](https://github.com/styled-components/styled-components/blob/master/src/models/ServerStyleSheet.js#L80-L98)


しかし、streamのchunkはhighWatermarkの単位で分割されるわけだが、最初のchunkにstyled-componentのtransformが適用されると、それ以降のコンポーネントに対してstyleの適用がsealedされてしまい、そのままSSRされて配信されるためだと思われる。


styled-components v3.1.0の更新が関係してると思われるが、SSRされなくなるといった記載は見当たらない。
ちなみにこの更新は、insertRulesできるようになってjsでstyleを動的に追加するようにしたっていうのと、chunk的に分割して読み込めるようにすることで、SSRされる速度を高速化すると書いてあるように読めた。

参考：[v3-1-0-such-perf-wow-many-streams](https://medium.com/styled-components/v3-1-0-such-perf-wow-many-streams-c45c434dbd03)


ちなみにstreamのchunkで分けられるサイズが大きければ問題が発生しなくなるか確認するために、試しに以下(streamのchunkサイズ)を2倍に変えたら、SSRで全てのコンポーネントにstyleがきくようになった。

参考：[Github: ReactDOMNodeStreamRenderer.js#L23](https://github.com/facebook/react/blob/master/packages/react-dom/src/server/ReactDOMNodeStreamRenderer.js#L23)

```
this.push(this.partialRenderer.read(size * 2));
```


## 解決策

パッと思いつく方法は３つほどある。

1. あててるstyleを減らす
適用しようとしてるstyleの数が多いからchunkで分けられてしまうのであって、単純にcss部分を減らすことができれば問題は起きないと思われる。

2. 何もしない
First-interactiveまでの時間が高速化されているのは事実なわけだし、SSRされたHTMLを開いた瞬間は確かにstyleがあたっていないけど、クライアント側でhydrateされるときにはきちんと表示されるわけだし、何もしないという手もある。

3. 無理やり全てのstyleをあてる
今回は一応、これを選んで試してみてる。具体的には、interleaveWithNodeStream()で受け取ったstreamをstream.on('end' ,...)で読み終えてから、getStyleTags()で改めてcssを取得する。取得したstyleをinlineにHTMLに展開し、そのHTMLコンポーネントをrenderToStaticNodeStream()して配信する。こうすることで、全コンポーネントに対するstyleがきくようになった。

## まとめ
* styled-componentsでSSR難しい＆ややこしい
* 原因や解決策が本当にあっているのか自信があるわけではないので、何か間違っていることなどあればご指摘いただけると嬉しいです。


## 2018/09/12 追記
* 上記styled-componentsのバグは修正されました（v3.4.6）！
* テストが通らないことをIssue/PRとして出したら、修正してもらえました。
* どうやらServerStyleSheetのinstanceが持つtagMapに問題があったようです。
    * SSRするタイミングでスタイルの読み込みをchunkごとにシールドしてtagMapに入れるはずが、
    * コンポーネントを読みこんだ時点でtagMapを作ってしまっていたため、２つ目以降のchunkのstyleを取り込めなかった。
    * 例えば、以下のようにすると動いた。
    * 修正は、tagごとにchunkに取り込んだかどうかのフラグを持たせるようにしたみたいですね。


```
    const sheet = new ServerStyleSheet()
+   sheet.instance.tagMap = {}
    const jsx = sheet.collectStyles(
```

* 対象Issue: https://github.com/styled-components/styled-components/issues/1982
* 対象PR: https://github.com/styled-components/styled-components/pull/1996
GASでesaのwebhookを拾ってslackに飛ばそう！

# 概要
esaでslack連携をした時にメンションがactiveにならなくて困ったのでサクッとGASで作りました。

# 本編

## GASの設定
```javascript
var slack = {
  webhook: '', // Slackのwebhook
}

//esaからのpost
function doPost(e) {
  var params = JSON.parse(e.postData.getDataAsString());

  // mention分岐
  if(params.kind == "comment_mention") {
    var slack_post_data = {
      "text": params.user.name + "がメンションコメントしました。\n" + params.comment.body_md + "\n" + params.post.url,
      "link_names" : 1
    };
  }else{
     var slack_post_data = {
      "text": "esaでなにかが起こった、詳細は@dasisyouyuにきいて。"
    };
  }
  
  var payload = JSON.stringify(slack_post_data);
  
  var options = {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : payload
  };
  
  //slack webhookへpost
  UrlFetchApp.fetch(slack["webhook"], options);
}
```

## esaの設定
team設定のwebhookからGenericを選択し先程作ったGASのwebhookを設定しよう！

## slackの設定
Incoming Webhooksを作成してできたwebhookURLをGASに貼っておく
RailsのAMSについてまとめ_100DaysOfCodeチャレンジ18日目(Day_18:#100DaysOfCode)

# はじめに

この記事はTwitterで人気のハッシュタグ`#100DaysOfCode`をつけて、
100日間プログラミング学習を続けるチャレンジに挑戦した18日目の記録です。

## 動作環境

* ruby 2.4.1
* Rails 5.0.1

## 現在学習している内容のリポジトリ

https://github.com/yuta-ushijima/notebook-api-on-rails

## 本日学んだこと

* AMSについてのまとめ

## AWSについてのまとめ

ここ数日に分けて、AMS(Active_Model_Serializer)について学んできました。

RailsをAPIサーバーとして使う場合、レスポンス形式としてJSONを使うことがほとんどでしょう。

その時にAMSを導入することで、次のようなメリットが挙げられます。

* Jbuilderよりも直感的にコードがかける
* カスタマイズ性が高い
* 関連付けの定義も可能なので、Modelのコード肥大化が防げる
(ただし、AMSはARに依存しているが独立しているので、Modelにも別途関連付けの定義は必要)

## AMSにおけるCRUD操作

AMSで定義したメソッドなどはRails内でどこからでも呼び出すことができます。

そのため、AMSを介してcontrollerでメソッドを定義すれば、Modelと同じようにCRUDの実装が可能です。

## AMS初級編

AMSを導入したら、attributesを定義してみましょう。

attributesによって、レスポンスに表示するフィールドの絞り込みができるので、見通しの良いJSONを作成することができます。

attributesには引数に表示させたいシンボルを渡すだけなので、Jbuilderよりも楽にかけますね。

## AMS中級、上級編

AMSについて概要がわかってきたら、実装例を参考にアプリを作ってみるのもいいですね。

### 実装例の参考

* [RailsとReactでオンライン予約表QRnoteを作って公開した話](https://qiita.com/junara/items/ddba402e277afd5d38b2)
* [Rails: ActiveModelSerializersでAPIを作る–Part 1（翻訳）](https://techracho.bpsinc.jp/hachi8833/2017_09_28/45536)

## AMSについての記事一覧

* [Railsのactive_model_serialiserについて学ぶ_100DaysOfCodeチャレンジ10日目(Day_10:#100DaysOfCode)](https://qiita.com/yuta-ushijima/items/5bb947cedd96c01d75ca)
* [Railsのactive_model_serialiserについて学ぶ②_100DaysOfCodeチャレンジ11日目(Day_11:#100DaysOfCode)](https://qiita.com/yuta-ushijima/items/d503addc7c5061ff3c6b)
* [Railsのactive_model_serialiserについて学ぶ③_100DaysOfCodeチャレンジ12日目(Day_11:#100DaysOfCode)](https://qiita.com/yuta-ushijima/items/78717086bc44f2ead774)
* [Railsのactive_model_serialiserについて学ぶ④_100DaysOfCodeチャレンジ14日目(Day_14:#100DaysOfCode)](https://qiita.com/yuta-ushijima/items/adf91355820927b25cf3)
* [RailsのAMSとforemanについて学ぶ_100DaysOfCodeチャレンジ15日目(Day_15:#100DaysOfCode)](https://qiita.com/yuta-ushijima/items/60e3d3c0e2de6454394e)
* [RailsのAMSについて学ぶ_100DaysOfCodeチャレンジ16日目(Day_16:#100DaysOfCode)](https://qiita.com/yuta-ushijima/items/c3e805aabfc553a4a636)
* [RailsのAMSについて学ぶ(has_many/has_oneとroutes)_100DaysOfCodeチャレンジ17日目(Day_17:#100DaysOfCode)](https://qiita.com/yuta-ushijima/items/8a3e5bc1d702dbf13044)
webpackで開発用/本番用の設定を分ける

# webpackとは
[webpack](https://webpack.js.org/)

謂わずと知れたバンドルツール。
JSのみならず、CSSやimageファイル等をひとまとめにしてくれる便利ツール。

# 設定を分割しない構成

```:ディレクトリ構成
root/
 ├ dist/
 │  └ ビルド後のファイル
 ├ src/
 │  ├ css
 │  └ js　等
 ├ webpack.config.js
 └ package.json

```

```javascript:root/webpack.config.js
// pathとかpluginとか
const path = require('path')

module.exports = {
  entry: {
    // エントリポイント
    app: ...
  },
  output: {
    // filenameとかpathとか
    path: ... ,
    filename: ...
  },
  module: {
    rules: [
      // loaderの設定
      {
         test: ... ,
         loaders: [ ... ],
      } 
    ]
  },
  devServer: {
    // webpack-dev-server用の設定
  },
  plugins: [
    // プラグイン設定
  ]
}
```


```json:root/package.json
"scripts": {
  "build": "webpack",
  "build:prod": "webpack --mode=production",
  "start": "webpack-dev-server --hot --inline",
  "start:prod": "webpack-dev-server --hot --inline --mode=production",
  "test": "jest --watch"
},
```


# この設定でしばらく開発していたが...
* `build`と`start`がそれぞれ`dev`/`prod`とあるのは微妙だし、役割が曖昧
* 開発環境では`--mode=development`でサーバを立ち上げればOK
* 本番環境では`--mode=production`でビルドすればOK
* 開発用/本番用で`webpack.config.js`を分けたい！


# webpackのベストプラクティス
公式にちゃんとあった
[Production - Webpack](https://webpack.js.org/guides/production/)

`webpack.config.js`をマージできるモジュール
[webpack-merge - Merge designed for Webpack](https://github.com/survivejs/webpack-merge)


# `webpack.config.js`を分割した構成
```:ディレクトリ構成
root/
 ├ dist/
 │  └ ビルド後のファイル
 ├ src/
 │  ├ css
 │  └ js　等
 ├ webpack.common.js // 汎用設定
 ├ webpack.dev.js    // 開発用設定
 ├ webpack.prod.js   // 本番用設定
 └ package.json

```

まず、開発用/本番用のどちらでも使う設定を記述する。

```javascript:root/webpack.common.js
// pathとかpluginとか
const path = require('path')

module.exports = {
  entry: {
    // エントリポイント
    app: ...
  },
  output: {
    // filenameとかpathとか
    path: ... ,
    filename: ...
  },
  module: {
    rules: [
      // loaderの設定
      {
         test: ... ,
         loaders: [ ... ],
      } 
    ]
  },
  plugins: [
    // プラグイン設定
  ]
}
```


そして、開発用/本番用それぞれで必要な設定を記述し、`webpack.common.js`とマージする

```javascript:root/webpack.dev.js
const merge = require('webpack-merge') // webpack-merge
const common = require('./webpack.common.js') // 汎用設定をインポート

// common設定とマージする
module.exports = merge(common, {
  mode: 'development', // 開発モード
  output: {
    publicPath: ... ,
  },
  devtool: 'inline-source-map', // 開発用ソースマップ
  devServer: {
    // webpack-dev-serverの設定
    ...
  }
})
```


```javascript:root/webpack.prod.js
const merge = require('webpack-merge') // webpack-merge
const common = require('./webpack.common.js') // 汎用設定をインポート

// common設定とマージする
module.exports = merge(common, {
  mode: 'production', // 本番モード
  output: {
    publicPath: ... ,
  },
})
```


`scripts`でどの設定を呼び出すか指定する必要がある

```json:root/package.json
"scripts": {
  "build": "webpack --config webpack.prod.js",
  "start": "webpack-dev-server --hot --inline --config webpack.dev.js",
  "test": "jest --watch"
},
```


# まとめ
* 開発用/本番用の`webpack`設定は分けよう(公式推奨だし...)
* てかちゃんと公式ドキュメント読もう
* まだまだwebpackは奥が深いので、勉強頑張っていこう
[OutSystems] eSpace(Module)を間違って消した場合の復活手順


1. 適当なアプリまたは eSpace(Module) を開く
2. Dependencies を開く
3. System の中の `Espace` Entity を追加する
4. Publish する
5. Data タブの中の `Espace` Entity を右クリックして `View Data` を選択
6. `Filters` に `Espace.Name like "Sample%"` と設定 (`Sample` は復活させたい eSpace(Module) の名前に置き換える
7. 復活させたい eSpace の `Espace.Id` をメモしておく
8. 次の URL の `<eSpaceID>` に手順7でメモしたIDを入れてブラウザで開く  
   `https://<server>/ServiceCenter/eSpace_Edit.aspx?EspaceId=<eSpaceID>`
9. 最も直近で Publish された eSpace をダウンロードする (.omlファイル)
10. 9でダウンロードした .oml ファイルを開いて Publish する  
    (Publish した eSpace が IndependentModules に入る)
11. IndependentModules の中の eSpace を復活させたいアプリに `Move To` で移動させる

#### 参考URL
- [Accidental Deletion of an eSpace](https://www.outsystems.com/forums/discussion/18403/accidental-deletion-of-an-espace/)


具体的な画面は以下を参照

---

手順3. System の中の `Espace` Entity を追加する
![007.PNG](https://qiita-image-store.s3.amazonaws.com/0/44184/c9e7fb10-8041-6e9f-3a05-8edec933112a.png "007.PNG")

手順6. `Filters` に `Espace.Name like "Sample%"` と設定 (`Sample` は復活させたい eSpace(Module) の名前に置き換える
![008.PNG](https://qiita-image-store.s3.amazonaws.com/0/44184/1de19c76-56b0-2e02-f0bf-197b3fd65d08.png "008.PNG")

手順8. 次の URL の `<eSpaceID>` に手順7でメモしたIDを入れてブラウザで開く `https://<server>/ServiceCenter/eSpace_Edit.aspx?EspaceId=<eSpaceID>`
![009.PNG](https://qiita-image-store.s3.amazonaws.com/0/44184/3ce41dc9-e48f-2c1b-0371-9a5fbc24b74b.png "009.PNG")

手順10. 9でダウンロードした .oml ファイルを開いて Publish する (Publish した eSpace が IndependentModules に入る)
![011.PNG](https://qiita-image-store.s3.amazonaws.com/0/44184/274bf4bb-fd77-6b4e-c07b-b382dc6d627c.png "011.PNG")
高速マルチスレッドping&tracerouteツール【pingkeeper】の紹介

#はじめに
高速マルチスレッドping&tracerouteツール【pingkeeper】の紹介です。

最大100件までの宛先に同時にpingおよびtracerouteを実行できるツールです。

特にtraceroute機能は、100件までの宛先までの経路を同時に表示するだけでなく、自動でログファイルに出力するため、ネットワークの回線切り替え作業時の確認などにとても便利です。

pingの送信間隔、実行回数、送信バイト数、タイムアウト時間、TTL、フラグメント禁止といったオプションを指定することができます。表示列の選択や列幅の変更もできます。これらのオプションは、実行中でも変更することができます。

[pingkeeperの詳細情報(vector)](https://www.vector.co.jp/soft/winnt/net/se514915.html)

![キャプチャ02.PNG](https://qiita-image-store.s3.amazonaws.com/0/262326/ca0f78b1-f38c-10e2-3421-c44807f87668.png)

#■使用用途・目的
最大100件までの宛先に同時にpingおよびtracerouteを実行できます。
100件を超える場合は、宛先リストを分割し、別途pingkeeperを起動して読み込ませることで対応できます。

IPv4 だけでなく、IPv6 にも対応しています。

pingの送信間隔、実行回数、送信バイト数、タイムアウト時間、TTL、フラグメント禁止といったオプションを指定することができます。

表示列の選択や列幅の変更もできます。これらのオプションは、実行中でも変更することができます。

最初に、宛先リストタブ画面にてIPアドレスまたはFQDN(ホスト名)を１行ずつ並べて記述し、ping実行ボタンを押してください。

宛先としてFQDN(ホスト名)が指定されている場合は、名前解決を行ってからICMPリクエストを送信します。

#■特徴

複数の宛先に、同時にpingを実行することができます。
(.NET Framework 4.0 以降がインストールされている必要があります。）

宛先リストは、デフォルトで targetlist.txt を読み込みます。
hostsファイルの形式であれば、それ以外のファイルから読み込むこともできます。

あらかじめテキストファイルを作成して記述しておき、ファイルを読み込ませることもできます。
**宛先リスト画面やping実行画面へのドラッグ**でも読み込ませることができます。

宛先リストの書式は、hostsファイルと同じで、

	IPアドレス		ホスト名（表示名）

のように１行に１件ずつ宛先を並べて記述してください。

'#' 以外に、スペース、タブ、セミコロン(;)もコメント文字として扱われます。

応答までの所要時間、失敗回数のカウント、タイムアウト時の途絶時間を出力させることができます。また、結果をファイルに保存することもできます。

ping結果のログは、各フィールドをタブ区切りとしていますので、テキストエディタやExcel等で開いて確認することもできます。

##tracerouteについて
traceroute処理については、処理速度を優先しているため、timeoutを待たずに次のHopへの問い合わせを行っています。

このため、結果の中に"No Answer"と表示されるHopがある場合は、その後のHop数が多めに出力されている場合がありますが、ご了承ください。

traceroute結果のIPアドレスからFQDNへの逆引きも可能です。
逆引きにはDNSやhostsファイルのほかに、読み込んだ宛先リストを参照することもできます。この場合、DNSやhostsファイルでの逆引きを行う前に、宛先リストが先に参照されます。

送信バイト数、timeout時間、TTLなどの値は、pingと共用しています。

遠隔値のネットワーク等で途中の遅延が大きく、連続応答無しが規定回数を超えると報告される場合は、メイン画面のタイムアウトの数値を増やして再実行してみてください。

tracerouteの結果についても、ログに出力できます。

ログオプションにて、

"traceroute終了後に結果を保存し、tracerouteログファイルを開く"

にチェックを入れておくと、テキストエディタなどですぐにログ出力結果を確認することもできます。

ただし、チェックが外されている場合は、traceroute結果の自動保存はされません。

##表示行数、列幅の変更
１画面に表示する行数や、表示する列の選択、列幅の変更もできます。 

画面左には、参考情報として、ping開始時刻、現在時刻の表示のほか、ネットワークのトラフィック情報（送受信バイト数） も表示しています。ただし、IPv4のトラフィック量のみの表示です。

#■種別
  フリーソフト

#■動作環境
  ・Windows XP 以降
  ・Windows Server 2003 以降
  
なお、実行するには .NET Framework 4.0 以降が必要です。

#■インストール・アンインストール

以下のファイルが含まれています。

    pingkeeper.exe  (本体)
    readme.txt      (説明書) 
    targetlist.txt  (宛先リスト) サンプルの宛先リストです。
    pingkeeper.ini  (各種オプション設定の保存ファイル) 初期設定から変更された場合に自動生成

readme.txt をお読みになったあと、targetlist.txt を宛先に合わせて編集し、pingkeeper.exe と targetlist.txt をお好きなフォルダに配置して、実行してください。

ログフォルダは、pingkeeper.exeが配置されているフォルダに作成されます。
アンインストールは、上記のファイル・フォルダを削除するだけです。

#2020/10/21追記

PingKeeper ver1.06の配布が始まりました。

Pingログ/Statisticsログが（自動保存）されるタイミングを、
Pingkeeper終了時からping終了時に変更しています。

変更に伴い、Pingログ/Statisticsログおよびtracerouteログの保存を、

・自動保存
・名前を付けて保存
・保存しない

から選べるようにしています。

設定は、
[ツール]-->[各種オプション]の
[pingログ/Statisticsログ]タブおよび[traceroute]タブにて
変更できます。

また、ログファイル自動保存時のデフォルトファイル名に、
（複数のPCから同一共有フォルダに保存する場合等の、ファイル名の重複を避けるため、）
Windowsのコンピュータ名を付加するように変更しています。



#参考
[高速マルチIPスキャンツール【MultiIPScan】の紹介](https://qiita.com/gx3n-inue/items/188136aad1b99f556af1)
改行コードの変更

#はじめに
ダウンロードしてきたshellスクリプトが動かない、などで改行コードを変えたい時があります。

改行コード
mac  ： \r
unix ： \n
dos  ： \r\n

mac は ウィキペディアに、バージョンに関連しての違いについて説明がありました。

```text:ウィキペディア
コモドールによるシステム、Apple IIファミリ、Mac OS（バージョン9まで）、OS-9。
```

#発生するエラー

shell scriptを実行しようとすると次のようなエラーがでます。

```console:error
$ ./test.sh.sh
bash: ./test.sh.sh: /bin/sh^M: bad interpreter: No such file or directory
```


#vimで改行コード変更

:set fileformat の略で :se ff が使えます。

```console:vi
変更
:se ff=dos
:se ff=unix
:se ff=mac

現在の改行コード確認
:se ff
```

#tr コマンドで変更

\r\n を \n にしたいことが多いので、そのやり方です。

```console:tr
$ tr -d "\r" < test.sh.sh > test.sh
$ chmod 755 test.sh
$ ls -al test.sh*
-rwxr-xr-x.  1 test    test      22 Jul  5 23:57 test.sh
-rwxr-xr-x.  1 test    test      24 Jul  5 23:44 test.sh.sh
```

#sed で変更
sed で置換するやり方です。

```console:sed
unix > windows
$ sed -e 's/$/\r/g' test.sh > test.sh.sh

windows > unix
$ sed -e 's/\r//g' test.sh.sh > test.sh
```

#Windowsで変更
Windowsではよく使うエディタで変更するのがいいですね。notepad もそのうち対応することが発表されてました。
[Introducing extended line endings support in Notepad – Windows Command Line Tools For Developers](https://blogs.msdn.microsoft.com/commandline/2018/05/08/extended-eol-in-notepad/)


#参考
[Man page of TR](https://linuxjm.osdn.jp/html/GNU_textutils/man1/tr.1.html)
[Man page of SED](https://linuxjm.osdn.jp/html/GNU_sed/man1/sed.1.html)
[Angular] select ボックスで ngModel を使う場合に、初期表示を「選択してください（かつdisable)」にしたい。

`select` で 初期表示を `disabled` だけど選択された状態にしたい時ってありますよね。

普通の HTML なら、 `selected` という Attribute（属性）をつけると選んでくれます。

ただ、 ngModel を使う場合、選択状態は、モデルの値により変わるので、 `selected` は効きません。

## サンプルコード

```
<select [(ngModel)]="test">
    <option disabled="disabled" selected>選択してください</option>
    <option [value]="'test1'">ひとつめ</option>
    <option [value]="'test2'">ふたつめ</option>
</select>
```

上記のようなコードは、

![スクリーンショット 2018-06-27 20.59.46.png](https://qiita-image-store.s3.amazonaws.com/0/67424/d002314e-cc4b-1b9b-4a5b-b925f4292564.png)

こうなって

![スクリーンショット 2018-06-27 21.00.46.png](https://qiita-image-store.s3.amazonaws.com/0/67424/41da8088-0291-9861-0768-2960a9d6e321.png)

こうなります。

本当は、こう↓なってほしい！

![スクリーンショット 2018-06-27 21.03.15.png](https://qiita-image-store.s3.amazonaws.com/0/67424/ec2628e1-2144-a0d5-cc72-2f2497fb2241.png)

![スクリーンショット 2018-06-27 21.03.43.png](https://qiita-image-store.s3.amazonaws.com/0/67424/6399d39d-5d80-14b2-f76d-708786ee7118.png)

## 解決方法

この現象の原因は、 `ngModel` により、 `ngModel` の状態の `option` を選択するためです。
なので、下記のようにしてあげれば動きます。（最初に初期化して `undefined` を入れている場合）

```
<select [(ngModel)]="test">
    <option disabled="disabled" [value]="undefined">選択してください</option>
    <option [value]="'test1'">ひとつめ</option>
    <option [value]="'test2'">ふたつめ</option>
</select>
```

簡単ですね。
node.jsでシングルクォートのURLエンコード

encodeURIComponentで`'`シングルクォートをエンコードすると`'`のままだけど、node.jsのurlモジュールで`url.parse`の結果のpathを見ると`%27`になっている。

## 経緯

とある開発中のREST APIで、`'`シングルクォートが含まれるURLを[request](https://www.npmjs.com/package/request)モジュールからうまく取得できない問題にあたった。（そのAPIがシングルクォートはシングルクォートのままエンコードされずに送られることを想定していた。ブラウザからアクセスしたら問題なく動作してた）

requestモジュールで引数に渡したURLが、内部でnode.jsのurlモジュールで`url.parse`される。そのときに、シングルクォートが`%27`にエンコードされてたみたいだった。

## 結論

REST API側が、decodeURIComponentしてから、シングルクォートを扱ってれば問題なかったので、ちゃんとdecodeURIComponentするよう気を付ける。

## 検証
他の記号も同様の挙動か検証したが`'`シングルクォートだけだった
なぜこうなってるのかは知らない

``` js
const url = require("url");

const letters = '!"$&\'()=-~^|\\`@{}[]+;*:<>,.?/_';
letters.split("").forEach((c) => {
  const parsed = url.parse(c).path;
  const encoded = encodeURI(c);
  console.log(c, parsed, encoded);
});
```

```
! ! !
" %22 %22
$ $ $
& & &
' %27 '
( ( (
) ) )
= = =
- - -
~ ~ ~
^ %5E %5E
| %7C %7C
\ / %5C
` %60 %60
@ @ @
{ %7B %7B
} %7D %7D
[ [ %5B
] ] %5D
+ + +
; ; ;
* * *
: : :
< %3C %3C
> %3E %3E
, , ,
. . .
? ? ?
/ / /
```