OmniAICreator/Qiita-1.07M huggingface dataset:
disabled属性のbuttonで発火しなくなるイベントのブラウザによる違い

disabled属性のbuttonはclickイベントなどが発火しなくなりますが、どのイベントが発生しなくなるのかはブラウザごとに異なります。

| ブラウザ | 発生しなくなるイベント |
|:--|:--|
| Chrome | click, focus/blur |
| Firefox | click, focus/blur, mouseup/down |
| Safari | click, focus/blur, mouseup/down, <br>mouseenter/move/leave |
| IE11,Edge | 無し* |
| iOS Safari | click, focus/blur |
| Android Chrome | click, focus/blur |

*IE11,EdgeはaddEventListenerによるものでは発火しなくなるイベントはありませんが、onclick属性は実行されなくなりますし、formのbuttonでのsubmitは発火しなくなります。

以下のコード書けばIE11,EdgeでもaddEventListenerのclickの実行を回避できます。

```js
window.addEventListener('click', function (e) {
	if(e.target.disabled) {
		e.preventDefault();
		e.stopPropagation();
	}
}, true);
```

[検証デモ](https://ksk1015.github.io/disabled-btn-event/)
golang で 2 Way SQL

空いていたので穴埋め。

# はじめに

データベースを扱うプロジェクトでは、オンコードで SQL を書く事が割と多いのですが、そういったソースコードに埋め込まれた SQL はプレースホルダを使って値を取るので直接実行する事は出来ません。

```sql
select * from foo where id = :id and bar = :bar
```

RDBMS によっては `:変数名` ではなく `?` や `$1` といった表記をする物もあります。こういった SQL は直接実行できない為、どうしても結果がイメージし辛くなるのですが、2 Way SQL という方法を使う事で解決できる事があります。

# 2 Way SQL とは

2 Way SQL は SQL のコメントに IF や ELSE、END といった制御構文を埋め込む事で、直接実行する事も出来るし、プレースホルダを使ったオンコード用の SQL としても使う事ができるといった物です。筆者が知る限り明確な仕様は見当たらないのですが、昔は Doma/S2Dao といったデータベースの抽象化レイヤと合わせて利用されて来ました。

```sql
select * from foo where id = /*id*/5 /* IF enabled */and bar = /*bar*/'foo' /*END*/
```

この SQL を実行するとコメントは無視される為、実際は以下が実行されます。

```sql
select * from foo where id = 5 and bar = 'foo'
```

このコメントに記述された IF/ELSE/END と、値の直前に書かれたコメントが 2 Way SQL です。

# 2 Way SQL のルール

```sql
select * from foo where id = /*id*/5 /* IF enabled */and bar = /*bar*/'foo' /*END*/
```

この SQL に制御パラメータ `enabled` を true 渡すと IF 文が有効になるため、id と bar による抽出が有効になります。また false で渡すと IF 文が無効となるため id のみの抽出となります。

```sql
select * from foo where id = :id
```

この様に `/*bar*/'foo'` はプレースホルダ `bar` に置き換えられます。

# 2 Way SQL の実装

随分前ですが golang で実装しました。

https://github.com/mattn/ways2go

以下の様に使います。

```go
env := make(map[string]interface{})
env["enabled"] = true

sql2way := `
select
  *
from
  foo
where
  id = /*id*/5
/* IF enabled */
  and bar = /*bar*/3
/*END*/
`

sql, err := Eval(sql2way, env, ways2go.Question)
```

正常に評価されると以下の SQL を得る事が出来ます。

```sql
select
  *
from
  foo
where
  id = ?
  and bar = ?
```

データベースによってはプレースホルダの形式が異なります。ways2go では以下の形式をサポートしています。

|識別    |プレースホルダ|
|--------|--------------|
|Question|`?`           |
|Dollar  |`$1`          |
|Colon   |`:foo`        |

これを使えばサンプルとして実行する事もでき、プログラムから実行する事もできる SQL を同じファイルで管理する事が出来ます。

# まとめ

大規模なプロジェクトで SQL が散乱する様なコードベースでは SQL を外部ファイルに切り出すことでソースコードがスッキリするかもしれません。ただし実は筆者も昔に作ったまま時間が経っており、テストは書いてあるのですが実務で使った事がありません。皆さんからの PR や機能追加をお待ちしております。
CloudFormationでDynamoDBのBillingModeを切り替えて作成する

# これは何？

re:Invent2018でプロビジョニングが不要なDynamoDBのリクエストごとの支払いが可能になりました。

[AWS Blog(日本語)](https://aws.amazon.com/jp/blogs/news/amazon-dynamodb-on-demand-no-capacity-planning-and-pay-per-request-pricing/)

これに対応したCloudFormationのTemplateのサンプルです。

# テンプレート

``` yaml
AWSTemplateFormatVersion: "2010-09-09"
Parameters:
  SampleTableBillingMode:
    Type: String
    Description: DynameDB Billing mode 'PROVISIONED' or 'PAY_PER_REQUEST'
    AllowedPattern: "^(PAY_PER_REQUEST|PROVISIONED)$"
    Default: PROVISIONED
  SampleTableReadCU:
    Type: String
    Default: "1"
    AllowedPattern: "^[0-9]+$"
    Description: Ignore if BillingMode set 'PAY_PER_REQUEST'
  SampleTableWriteCU:
    Type: String
    Default: "1"
    AllowedPattern: "^[0-9]+$"
    Description: Ignore if BillingMode set 'PAY_PER_REQUEST'

Conditions:
  # SampleTableの請求モードがProvisionedCapacityかどうかのCondition
  IsSampleTableProvisionedBilling: !Equals [!Ref SampleTableBillingMode, "PROVISIONED"]

Metadata:
  AWS::CloudFormation::Interface:
    ParameterGroups:
      - Label:
          default: "SampleTable Configuration"
        Parameters:
          - SampleTableBillingMode
          - SampleTableReadCU
          - SampleTableWriteCU
    ParameterLabels:
      SampleTableBillingMode:
        default: "BillingMode"
      SampleTableReadCU:
        default: "Read Capacity Units"
      SampleTableWriteCU:
        default: "Write Capacity Units"
Resources:
  SampleTable:
    Type: AWS::DynamoDB::Table
    Properties:
      AttributeDefinitions:
        - AttributeName: "Key"
          AttributeType: "S"
      KeySchema:
        - AttributeName: "Key"
          KeyType: "HASH"
      BillingMode: !Ref SampleTableBillingMode
      # 請求モードがPROVISIONEDではない場合は、このプロパティは設定しない（NoValue）
      ProvisionedThroughput:
       Fn::If:
        - IsSampleTableProvisionedBilling
        - ReadCapacityUnits: !Ref SampleTableReadCU
          WriteCapacityUnits: !Ref SampleTableWriteCU
        - !Ref "AWS::NoValue"

```


## 何をしている？

`AWS::DynamoDB::Table`に新しいプロパティ`BillingMode`が追加されています（2018-12-13現在、日本語のCloudFormationドキュメントには追加されていません）。
このプロパティは`PAY_PER_REQUEST|PROVISIONED`のいずれかの値をとりますが、
`PAY_PER_REQUEST`の場合は`ProvisionedThroughput`が設定されているとエラーになります。

そのため、`Conditions`セクションで判定し、その値を使っています。

``` yaml:抜粋
      ProvisionedThroughput:
       Fn::If:
        - IsSampleTableProvisionedBilling
        - ReadCapacityUnits: !Ref SampleTableReadCU
          WriteCapacityUnits: !Ref SampleTableWriteCU
        - !Ref "AWS::NoValue"
```

`!Ref "AWS::NoValue"`により、`ProvisionedThroughput`は`IsSampleTableProvisionedBilling`が満たされていない場合は、そのプロパティ自身が設定されません。



`Metadata`セクションは、Management Console上でStack Parametersを見やすく表示するために使っているだけなので、無くても構いません。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117772/232949b9-c333-320c-f960-fce2af6c2789.png)

このような感じに表示されます。

これを使ってStackを作成すると、どちらの請求モードのテーブルでも作ることができます。また、請求モードをStack Parameterから変更することも可能ですが、テーブルの利用状況によっては、制限に引っかかる可能性があるので注意してください。

[プロビジョニングされるスループットを減らす](https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/Limits.html#default-limits-capacity-units-provisioned-throughput)
Google Cloud Certified Professional Cloud Architect認定で勉強したこと

###Google Cloud Certified Professional Cloud Architectとは
google Cloudに関する認定資格です。

###試験に合格(2018/12)しましたが...
意外に、試験に関する情報が少なく、本当に困りました。
有資格者も受験者も、身近には居ない部署でしたので。
受験料も安くないし、勉強していても「これで良いのかなぁ？」と。

##この記事で書くこと
私の試験勉強の内容について。
推奨や保証はしません、ご了承ください！
私は過去にGoogle Cloudを触った経験はあるものの、最近ではBigQueryをツールとして使う程度です。

##この記事で書かないこと
試験問題については試験利用規約に従い、触れません。

##受験後の反省
**1.模擬試験（後述）の内容程度ができれば良いと思い、勉強時間が不足していた**
「え！こんな問題なの？？、予想していた問題が全く出ない...」（受験中の心の声）

**2.サービスの説明を読むだけでなく、Googleが推奨する方法をシナリオで検討しておけば良かった**
どのようなソリューションでサービスを採用するのか、どのような構成/作業になるのか、もう少し踏み込んで整理しておけば良かった。
試験時間内で考えるとなると、色々迷ってしまった。

**3.ケーススタディの事前準備はしたつもり、実際には不足していた**
時間を割き、各ケーススタディに対して色々なサービス観点で検討しておけば良かった。
試験では想定していた問題と違い、焦ってしまった。

#勉強したこと
**Cloud onBoardに参加**
本来は初めての方向け、基本的な内容をまとめて整理できました。
また、説明を聞きながら、ドキュメントをチェックしたり、頂いた資料にどんどん追記していきました。
開催は[Google Cloud Platform Japan Blog](https://cloudplatform-jp.googleblog.com/)などでアナウンスされると思います。

**[プログラマのためのGoogle Cloud Platform入門 Kindle版](https://www.amazon.co.jp/dp/B0721JNVGT/)を読んだ**
あまりGoogle Cloudの本が無いので、買った方も多いのではないでしょうか。
この本だけでは試験勉強は難しいと思います。
私はCompute EngineとKubernetes Engineについて整理したかったので、分かりやすく非常に参考になりました。

**[Cloud Architect 模擬試験](https://docs.google.com/forms/d/e/1FAIpQLScPUE0lwEdJdZNOzfNpt14Q135Qw_vG3FQeIHgKTLWOe7Zwnw/viewform
)に挑戦**
間違った箇所を見直ししました。
無料ですので、勉強の間が空いてしまった際に、確認テスト的に定期的に挑戦していました。

**[Google Cloud Platform のドキュメント](https://cloud.google.com/docs/?hl=ja)**
サービスの説明のうち、項目「お勧め(の方法)」は特にチェックしていました。
不安になり、英語（にしかない内容も出るんじゃないかと）のドキュメントもチラチラ見てしまう、時間ないのに。

**[GOOGLE CLOUD CERTIFIED](https://cloud.google.com/certification/guides/professional-cloud-architect/)の「試験ガイドとケーススタディ」読込みとソリューション検討**
少なくとも内容は把握しておかないと、試験中に確認作業が多く焦ります。
2018年11月09日より前の受験では4つ、それ以降は3つになっています。

**[Google Cloud](https://cloud.google.com/)で実験**
サービス間の関係を確認する程度、課金怖いです。

**試験直前**
サービスの概要を主に復習していました。
模擬試験の繰り返しで、変な自信が付いたからかも知れません。
今考えると、googleが推奨する方法を再度チェックし、小さなシナリオで構成を検討してみる　などを直前まで続ければ良かったと思います。
試験時間中に、それをやる羽目になったので。

#不合格になれば、勉強するつもりだったこと
他の学習で利用（有料）予定のため、1回受験してからと考えていました。
どちらも余裕があれば、またはGoogle Cloudを触った事がないなら、受講されるのが良いと思います。
**[Coursera Google Cloud](https://ja.coursera.org/googlecloud)**
**[Qwiklabs](https://qwiklabs.com/)**

##参考資料
[GOOGLE 認定資格 Google 認定プロフェッショナル](https://cloud.google.com/certification/cloud-architect)
[Google Cloud Platform のドキュメント](https://cloud.google.com/docs/?hl=ja)
[AWS]今はNATインスタンスって使わないらしい

# はじめに
ソリューションアーキテクトの試験範囲の中にNATインスタンスの考慮点についてがあり、色々勉強していました。
（プライベートサブネットからインターネットに接続するためのものだとか、パブリックGWへのルーティングや送受信チェックを外す必要だとか）

ところが今はNATインスタンスに代わるNATゲートウェイというサービスが提供されていて、そっちを使う方が遥かに楽、というBlackBeltのセミナー動画を見ていて知りました。今更ながら。

NATゲートウェイ
https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/vpc-nat-gateway.html

NATインスタンスとの比較ならこちらのページ。
https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/vpc-nat-comparison.html

AWSは更新が早いので、新しいリリースを追いかけていないと知識がすぐに陳腐化してしまいますね。
Webサイトの流入経路を知ることは、ユーザーのモチベーションを知ること

# はじめに

Adventカレンダー「エンジニアのためのWebマーケティング」の12日目です。
サクッと読める記事を目標に。異論・ツッコミ大歓迎。
できるだけ専門用語を使わないように気をつけます。

「サクッと」と言っている割に、結構ダラダラ長いので短くまとめるのをもっと意識して・・・

それでは参りましょう


# Webサイトの流入経路

自分がWebサイトを運営している時に、「どこからユーザーが来訪してくるか」を把握することはとても大事になってきます。

何故なら、**流入経路を把握することは来訪者のモチベーションがどこにあるかを把握すること**につながるからです。

# デフォルトチャネル

無料の分析ツールである**Google Analytics**では、定義している標準の流入経路（＝デフォルトチャネル）があります。

以下の**10種類**がそれに該当します。

* **ノーリファラー**
    * お気に入りやURL直打ちで来訪
* **オーガニック検索**
    * GoogleやYahooの検索結果からの来訪でリスティング広告来訪を除いたもの
* **ソーシャル**
    * Facebook、Twitter、InstagramなどのSNSから来訪
* **メール**
    * メールマガジンなどの媒体から来訪
* **アフィリエイト**
    * アフィリエイト広告から来訪
* **参照元サイト**
    * ブログやはてブなどの第3者のWebサイトの投稿から来訪
    * ちなみに、Qiitaから来たらこれになります
* **有料検索**
    * GoogleやYahooの検索結果から、リスティング広告をクリックして来訪
* **ディスプレイ**
    * ディスプレイ広告から来訪
* **他の広告**
    * 上記以外の広告から来訪
* **その他**
    * どのチャネルの定義にも一致しない来訪

これは、Webサイトでマーケティング施策をするにあたり、**どの経路から来たかを見分けることが大事**であることから、このように定義されています。

言い換えれば、この10種類のチャンネルはすべて**来訪のモチベーションが違う**ことを表しています。

## 例えば・・・

SNSからくるユーザーが多いときは、流行りに乗っかろうとしている「一過性はあるが、非常に興味を示しているユーザー」かもしれませんし、

お気に入りからくるユーザーは、自身のサイトを巡回している「ファン属性の高いユーザー」かもしれません。

逆に、広告を出しているときは「本当にその広告を経由して来てくれているのか」の判断にも繋がります。

昨日の[投稿記事](https://qiita.com/ssaita/items/96ef450573b7c71012a2)のように、広告が「直接的な効果を出している」のか「関節的な効果を出しているのか」の違いの把握にも繋がります。


# 来訪者を正しく把握しよう

例えば、

* emailから飛ぶWebサイトのアドレスには、それがわかるようにパラメータを設定しておく
* 「Facebookで共有する」のボタンはそれ専用のURLにしておく
* それらの設定がめんどくさいなら、効果計測ツールを使ってそれを把握する

などなど。


自分のWebサイトが、どういうモチベーションで人が来ているか。
それが分かれば、アプローチの仕方も見えてくるのではないでしょうか。


# どうでもいい話

「チャンネル」と「チャネル」って呼び方が2つありますが、語源は両方とも同じ「channel」です。
チャンネルが物理とか電気とかのイメージが有り、チャネルが概念とかシステムの話とかで使われている感じがします。

# おわりに

明日は、「カスタマージャーニー」についてです


# 参考

* Analytics Help - [Default channel definitions](https://support.google.com/analytics/answer/3297892)
【Node-RED】nodeの設定ダイアログを活用しよう（後編）

この記事は[SRA Advent Calendar 2018](http://qiita.com/advent-calendar/2018/sra)の21日目の記事です。
（今日は息子の2歳の誕生日です）

こんにちは！　関西事業部の佐々木です。

# node-red-dashboard
node-red-dashboardというカスタムノードをご存知でしょうか？
簡単にレスポンシブなUIを作ることが出来る便利なノード（群）です。
![WS000001.JPG](https://qiita-image-store.s3.amazonaws.com/0/100799/c315f15c-b035-45de-cde3-405a21284c75.jpeg)

## node-red-dashboardのtemplateノード
node-red-dashboardのノード群のなかにtemplateノードというのがあります。
![WS000057.png](https://qiita-image-store.s3.amazonaws.com/0/100799/690562c1-e373-4783-4ba7-0303f72e5006.png)
(Node-REDのインストール時に標準で入っているtemplateノードというのもありますが、それとは別物です）

templateノードはHTMLやAngularのタグなどが記述でき、かなり自由に画面を作成することができます。

## node-red-dashboardのカスタマイズ
templateノードが自由に画面を作ることが出来る一方、node-red-dashboardで用意されているノードで作った画面はこまかなレイアウトやスタイルの調整などはできません。
例をみてもらう前にnode-red-dashboardの画面構成について簡単に説明します。
node-red-dashboardでは画面の部品は「グループ」に配置され、グループは「タブ」の中に配置されます。
例えば以下のような画面は「テキスト部品」というタブの中に「グループ１」と「グループ２」という２つのグループが配置され、それぞれのグループの中にテキスト部品が配置されています。
![WS000065.png](https://qiita-image-store.s3.amazonaws.com/0/100799/a49c4de5-4ec7-275c-de69-15c52fc405ea.png)

そして左上のハンバーガーアイコンをクリックするとタブの選択メニューが現れます。
![WS000067.png](https://qiita-image-store.s3.amazonaws.com/0/100799/2405cc64-1fab-d7a3-b6eb-5d0ab4a152b2.png)

「ゲージとチャート」タブを選択するとそのタブに配置されているグループ／部品が表示されます。
下の例では「グループ１」にゲージが、「グループ２」にチャートが配置されています。
![WS000066.png](https://qiita-image-store.s3.amazonaws.com/0/100799/88c1c900-13a2-ee35-f75a-fbf480992630.png)

ここで「タブ」に長い名前をつけてみた場合どうなるかを見てみましょう。
![WS000070.png](https://qiita-image-store.s3.amazonaws.com/0/100799/667ba14e-db4b-90b2-0e41-156ca11eb602.png)
タブにつけた名前が改行されてなんとも不細工ですね。

ここでtemplateノードの出番です。
templateノードの設定ダイアログをよく見ると「Template Type」という項目で「Added to site <head> section」というのが選択できることが分かります。
これはhtmlのheadタグの中に追記ができます。
ということはスタイルの設定が書けるということですね。
そして下記のような設定を追加してみます。
![WS000072.png](https://qiita-image-store.s3.amazonaws.com/0/100799/b0bfc439-22c1-195e-d576-01ee4bbcc5b3.png)

これでデプロイをして画面を確認してみましょう。
![WS000073.png](https://qiita-image-store.s3.amazonaws.com/0/100799/0c892c05-5082-3242-dd11-4006f5c725bc.png)
タブの幅が広がって見た目が良くなりました。

## まずは設定ダイアログ
実はこのtemplateノードでheadタグ内に追記できることは最近知ったのですが、何とかしてタブメニューの幅を広げられないかと思った時に、とりあえず設定ダイアログを調べてみると上記の設定を見つけることができました。
Node-REDで困ったときはまず「設定ダイアログを調べる」ということを最初にするのがいいと思います。

以上、「nodeの設定ダイアログを活用しよう（後編）」でした。
【Node-RED】nodeの設定ダイアログを活用しよう（前編）

この記事は[SRA Advent Calendar 2018](http://qiita.com/advent-calendar/2018/sra)の20日目の記事です。

こんにちは！　関西事業部の佐々木です。

# 設定ダイアログを見直す
Node-REDに慣れてくると、ポンポンnodeを置いてサクサクつないでflowを書けるようになってきます。
さらにcustom node（Node-REDのインストール時に入っているnode以外のnode）を追加して利用したりもできるようになってきます。
確かに色々なnodeを使いこなすことも大事ですが、今使っているnodeを深く理解することもflowを書く上で役に立ちます。
特にnodeをダブルクリックして開く設定ダイアログについて、いつもデフォルトのままだという方は一度じっくりとその内容を確認してみてはどうでしょうか。

## switch node
![WS000000.png](https://qiita-image-store.s3.amazonaws.com/0/100799/4fbe3df2-82d6-acfc-adf4-cef7d6c2ad97.png)
例えば、switch nodeで下のような設定をしたとき

![WS000002.png](https://qiita-image-store.s3.amazonaws.com/0/100799/106bdb42-59de-78cd-24e3-1c8fad3a057b.png)

上級者ならムムと思う設定ですが、msg.payloadの値（数値）が

* 100以下ならoutput1から
* 200以下ならoutput2から
* 300以下ならoutput3から

出力されます。
では、もしmsg.payloadに50が入っていたらどうなるでしょう？
実はこの場合、output1、output2、output3全てが出力されます。
この動作を期待しているのなら別にこれでいいのですが、もしも

* 100以下ならoutput1のみから
* 100より大きく200以下ならoutput2のみから
* 200より大きく300以下ならoutput3のみから

出力したい場合は設定ダイアログで「最初に合致した条件で終了」を選択します。
![WS000003.png](https://qiita-image-store.s3.amazonaws.com/0/100799/434d21a9-f9eb-aea9-b7fd-76688ab46a24.png)
こうすることで条件を満たした場合はそれより下の条件を判定することがなくなります。
switch nodeはNode-REDを始めてすぐに使い始めることが多く、その後も使う頻度が多いため、あまりじっくり調べないのかもしれませんが、この設定をデフォルトのままにしておくことが多いように思えます。
処理コスト的にもこの設定は常に選択しておくほうがいいと思うので、期待する動作に差支えがなければ設定しておくクセをつけておくことをお勧めします。

## http request node
![WS000004.png](https://qiita-image-store.s3.amazonaws.com/0/100799/4c629740-3d65-c6bc-73f5-fd4222de941c.png)
http request nodeで外部のAPIに簡単にアクセスできるのは非常に便利です。
そして最近ではWeb APIではJSONでデータをやり取りすることも多いです。
レスポンスのJSONを文字列を扱いやすいようにオブジェクトに変換するには以下のようにJSON nodeをつなげればOKです。
![WS000006.png](https://qiita-image-store.s3.amazonaws.com/0/100799/024ad402-b293-cac5-4ffa-c8eba0b5a12e.png)
ところが、http request nodeの設定ダイアログで出力形式「JSON」を選択すればJSON nodeは必要ありません！
![WS000005.png](https://qiita-image-store.s3.amazonaws.com/0/100799/19035b5e-30e5-fb8d-8763-aeace698059e.png)

## debug node
他にも知っておいて欲しいのはdebug nodeの設定です。
「さすがにdebug nodeは使いこなしているよ」という人も多いかもしれませんが、Node-REDのバージョン0.18から「ノード状態（32文字）」という設定が増えています。
![WS000007.png](https://qiita-image-store.s3.amazonaws.com/0/100799/4b712936-4cfe-87c4-75ae-21f866febfa6.png)
この設定をONにするとnodeのstausとしてdebugの内容が（最大32文字）表示されます。
![WS000056.png](https://qiita-image-store.s3.amazonaws.com/0/100799/74f57e66-3283-7e4a-37db-dbf1871bd9c0.png)
これが実は意外と便利で、デバッグウィンドウにたくさん表示されている場合でもこのdebug nodeに（最後に）表示されている内容がすぐに確認できるし、デバッグウィンドウの内容はNode-REDのフローエディタを開いていないと表示されませんが、このstatusは後でフローエディタを開いても（最後に）表示された内容を見ることができます。

今回は3つのnodeについて設定ダイアログを活用することについて述べましたが、もう少し紹介したいnodeがあるので続きを別記事で書きます。
Cloud DatastoreのCLIツールを作った

[GoogleCloudPlatform](https://qiita.com/advent-calendar/2018/gcp) [シェアフル](https://adventar.org/calendars/3523) Advent Calendar 2018 13 日目の記事です。

みんな大好きCloudDatastore。もちろん私も大好きなのですが、コマンドラインで操作（データの抽出とか削除とか）が出来ないのが個人的な不満点でした。
そこで、CloudDatastoreをCLIで操作するGo製のツール [datastore-tools](https://github.com/keitaro1020/datastore-tools) を作成しました。何番煎じかわからないくらい他にもありそうなツールですが、せっかく作ったし、おまけに年末でもありますからツール供養がてらご紹介させて頂きたいと思います。

# 何が出来るの？
- エンティティを出力（Json形式、テーブル形式）
- エンティティを更新
- エンティティをtruncate

# インストール方法
Goが入っている環境であれば、

```bash
$ go get github.com/keitaro1020/datastore-tools
```

でインストール出来ます。また、[Windows/Mac/Linuxのバイナリ](https://github.com/keitaro1020/datastore-tools/releases)も用意しています。

# 使い方
## 事前準備
CloudDatastoreにアクセスするために `gcloud auth` をするか、`datastore.user` のロールを持ったサービスアカウントを作成しキーファイルをダウンロードしておく必要があります。

## エンティティを出力
`datastore-tools select` でエンティティを検索し、出力することが出来ます

```bash
$ datastore-tools select -p [project-name] -k [kind-name]
[
  {
    "__key__": {
      "Kind": "Fruits",
      "ID": 5634612826996736,
      "Name": "",
      "Namespace": ""
    },
    "description": "オレンジ",
    "name": "orange"
  },
  {
    "__key__": {
      "Kind": "Fruits",
      "ID": 5643096528257024,
      "Name": "",
      "Namespace": ""
    },
    "description": "りんご",
    "name": "apple"
  }
]
```

json形式で出力されるので、jqコマンドと組み合わせれば加工も容易です。
-tオプションをつけると、テーブル形式で出力することも出来ます

```bash
~ $ datastore-tools select -p [project-name] -k [kind-name] -t
+------------------+--------+-------------+
|       KEY        |  NAME  | DESCRIPTION |
+------------------+--------+-------------+
| 5634612826996736 | orange | オレンジ    |
+------------------+--------+-------------+
| 5643096528257024 | apple  | りんご      |
+------------------+--------+-------------+
```

## エンティティを更新
`datastore-tools update` でエンティティを更新することが出来ます。
-sオプションに `Property=value` の形式で値を指定します。
-wオプションで条件を指定し、指定した条件の値のみを変更することも出来ます。

```bash
~ $ datastore-tools update -p [project-name] -k [kind-name] -w name=apple -s description="りんご とても美味しい"
~ $ datastore-tools select -p [project-name] -k [kind-name]
[
  {
    "__key__": {
      "Kind": "Fruits",
      "ID": 5634612826996736,
      "Name": "",
      "Namespace": ""
    },
    "description": "オレンジ",
    "name": "orange"
  },
  {
    "__key__": {
      "Kind": "Fruits",
      "ID": 5643096528257024,
      "Name": "",
      "Namespace": ""
    },
    "description": "りんご とても美味しい",
    "name": "apple"
  }
]
```

## エンティティをtruncate
`datastore-tools truncate` でエンティティを全件削除することが出来ます。

```bash
~ $ datastore-tools truncate -p [project-name] -k [kind-name]
truncate finish, count = 2 
~ $ datastore-tools select -p [project-name] -k [kind-name]
[
]
```

# まとめ
以上が現在の `datastore-tools` で出来ることになります。まだまだ至らない点もたくさんあるかと思いますが、多くの方に使っていただけたら嬉しいです。
もし不具合や改善提案等ありましたら、Githubのissueとかに書いてもらえれば順次対応していきます。
React Nativeのマイナーコンポーネントを発掘してみた。


こんにちは。りさえです。
React Nativeに出会って7ヶ月が経ち、ようやく思い通りのUIを作れるようになってきました。
今回は「これわりと便利なのになんでgithubのスター少ないん？」というコンポーネントをご紹介します。

## View・レイアウト系

### react-native-image-view
画像をかっこよくプレビューできるライブラリ。
カスタマイズすれば、動画再生系のアプリも作れそうです。
![imageview.gif](https://qiita-image-store.s3.amazonaws.com/0/204818/9339d673-7a71-0bc9-b42f-05ec5811bf87.gif)
https://github.com/antonKalinin/react-native-image-view

### react-native-masonry-layout
Pinterest風のUIも簡単に作れます。
react-native-masonryよりもバグが少ないです。
![preview.png](https://qiita-image-store.s3.amazonaws.com/0/204818/65cd226a-7cc5-1c0e-58bf-a92d79e9eae2.png)
https://github.com/fengmu456/react-native-masonry-layout

### react-native-image-header-scroll-view
今どきのSNSで流行っている「ひっぱるとヘッダー画像がぐいーんと伸びるやつ」。
![demoAndroid.gif](https://qiita-image-store.s3.amazonaws.com/0/204818/b162606e-df4e-05fa-f6cd-504cc1862812.gif)
https://github.com/bamlab/react-native-image-header-scroll-view



### react-native-carousel-component
Viewのカルーセル。ぬるぬる動きました。
![68747470733a2f2f6a61636b6c616d3731382e6769746875622e696f2f72656163742d6e61746976652d6361726f7573656c2d636f6d706f6e656e742f6173736574732f6361726f7573656c2d636f6d706f6e656e742e676966.gif](https://qiita-image-store.s3.amazonaws.com/0/204818/61d37895-c1d8-f308-eff2-ae1abce484c8.gif)
https://github.com/jacklam718/react-native-carousel-component

## アニメーション系

### react-native-animated-ui
ハートや星などのアニメーションが用意されています。
ふぁぼアニメーションにどうぞ！
![68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f6c347054736a72426b6c494533695a41512f67697068792e676966.gif](https://qiita-image-store.s3.amazonaws.com/0/204818/dd503d9b-9403-4c03-5245-fc7fa03f7e90.gif)
https://github.com/DaniyarJakupov/react-native-animated-ui

### react-native-text-ticker
文字が流れる！ ただそれだけだが、地味に使える。
![text-ticker.gif](https://qiita-image-store.s3.amazonaws.com/0/204818/a7f2ce81-4afd-57b7-886e-639224b37264.gif)
https://github.com/deanhet/react-native-text-ticker

## 便利系

### react-native-thumbnail
動画からサムネイルを切り取ってgetできる。
https://github.com/phuochau/react-native-thumbnail


 （随時追記します）
phpフレームワークSlim3を導入しよう、のまえにComposerを導入しよう

# 目次
[Slim3_PHP Advent Calendar 2018](https://qiita.com/advent-calendar/2018/slim3_php)
こちらから順番に追えます。

- 前回
    - 無し（これが初回です）
- 次回
    - [人生初のphpフレームワークでボクがLaravelでなくSlim3を選択した理由](https://qiita.com/http_kato83/items/71b1c80ff53d9095461a)

# はじめに

初めてのadventcalendar初日。
さて、やってみましょうか。

phpに興味を持ち、勉強を進めていくと実際にWebアプリケーションを作ってみたいと思うとおもいます。
そんなあなたにSlim3という軽量なフレームワークを紹介します。

いきなりLaravelでもいいのですが、初心者にはなかなかハードルが高いと思います。
まずは軽量でシンプルなSlim3というフレームワークでフレームワークを使う意義、良さ味を感じ取ってみては？

# 筆者環境

下記環境で進めていきます。

- Windows10 Version 1803
- XAMPP Version: 7.2.2

XAMPPはすでにインストール済みという前提で進めます。
Composerは入れていない人も多いと思うので今回はComposerの導入をしてみましょう。

Composerを導入すると他のフレームワークやライブラリの導入も楽になるので、このタイミングで導入してしまいましょう。
~~てか、Composerを使わないSlim3の導入方法がわからない~~

# Composerインストール

[Composer（公式サイト）](https://getcomposer.org/)からDownloadボタンを押下

何やらいろいろ書かれています（コマンド入力でComposerをインストールする方法が書かれている）が、exeファイルでも配布されていますのでそちらを使っちゃいましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/158800/645e3bcb-d380-fdc2-9914-5fd49d016d0a.png)

ダウンロードしたexeファイルを実行、基本的にNextを押して行けば問題ないです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/158800/637158c6-db49-a6b5-d798-e7324100fd25.png)
XAMPPをインストールしておけば自動的にパスを指定してくれてるみたいです、ありがたい。

インストール完了したらコマンドプロンプト（又はWindows PowerShell）で

```shell
composer -V
```

で、エンター。
すると以下のような文字（下一行、バージョンが記載された文）が返ってきたらインストール成功です。

```shell
PS C:\Users\ユーザー名> composer -V
Composer version 1.7.2 2018-08-16 16:57:12
```

※『composerなんてコマンド無いわ』みたいなエラーが出たら正しくインストールできていないかもしれないです、詳しく導入方法が書かれているサイトを探してそちらを参考に進めるといいかもしれないです。

次は実際にSlim3のインストールとなぜLaravelでなくSlim3を推奨するのかを紹介いたします。
Nexus7 2013(LTE)にUbuntu Touchをインストールしたお話

# はじめに＆結論

この記事を参考にしてインストールする・・・・おしまい！
https://qiita.com/somainit/items/a61941acd4e575f1aee7

・・・というのは流石にやりすぎなので補足します。

※といっても、この記事は「Nexus7, 2013(LTE), Ubuntu Touch, インストール 」というキーワードとその記事を紐づけることが一番の目的です（そこに辿りつくまでに時間の大部分を要したことは事実ですので）

#### 補足
            
UBports Installerにて、手動でデバイス選択「Select device...」を行い、「Nexus7(wifi)」を選択します（下の写真参照）
![Nexus72013LTE.png](https://qiita-image-store.s3.amazonaws.com/0/155449/0d7a0849-fd1c-123f-7ef1-ee29c83185b7.png)

最初「Nexus7 2013(LTE）」を選択してもエラーで失敗してしまうので上記のように変えてみたところなんとインストールできました。
　
その理由は追求できていませんが、Androidのブートローダ―画面に下の写真のように「BOOTLOADER VERSION FLO-XX.XX」という表示がありました。なんとなくですが、それが関係してそうな気がします。（FLOはnexus7 2013(Wi-Fi)のコードネームなので）![ブートローダ―画面.jpg](https://qiita-image-store.s3.amazonaws.com/0/155449/68ccb5af-e937-f0a7-d666-d7d3c58f1a0e.jpeg)（もうUbuntuにしちゃってスクショとれないので、画質の荒い写真ですがご容赦を・・・）

・・・ということで、これだけ上記の参考記事の操作から変えることでインストールできました。

※もし実施する場合は、OSが起動しなくなる・デバイスのデータが消えるといったリスクを伴います。バックアップを取ったり実施することによるリスクを覚悟した上で「自己責任」でお願いします！

# 終わりに

シンプルな結論にいたるまでの道のりは険しいということで、
　・今のPCにLinuxインストールしたくないからラズパイやVirtualBox使ってみたけどNG
　・団体が活動していなくて？リポジトリからインストールできなかった
　・コードネーム(grouper, tilapia, flo, deb)にだまされた
　・Nexus7(2012)やWi-Fi版の情報が多くて惑わされた
などなど、今回も色々ありました。

あと、タッチデバイス用のOSなので公開されているアプリを使う場合の使い心地は良いのですが、GCCやG++は入っておらず、ファイルシステムはReadOnlyでソフトのインストールしづらく（マウントしなおせばOK?）、ということで快適にプログラミングするためにはこれから色々ありそうですが、まぁ気長にやろうと思います。

тнайк чoμ_〆(・ω・｡)
RubyWorld Conference 2018でmruby/cについて話してきました

この記事は、[Business Bank Group Developers Advent Calendar](https://qiita.com/advent-calendar/2018/bbg_developers) 13日目の記事です。

　10/31〜11/2に、島根県松江市で行われたRubyWorld Conference 2018に参加してきました。ちょっと時期外れではありますが、振り返ってみたいと思います。

# RubyWorld Conferenceとは

　島根県松江市で毎年行われている、Rubyのカンファレンスで、2日間で延べ1000人程度が参加するカンファレンスです。（https://2018.rubyworld-conf.org/）

　毎年10〜15件程度の発表の公募があり、採択されると15分・もしくは30分の発表枠をもらえます。私もmruby/cを教育に適用したという発表ネタがあったため、発表申し込みをしたところ、採択されたため島根まで発表に行ってきました。

# 発表内容＆資料

　先日ちょうど資料が公開されたということで、リンク貼っておきます。
　資料： https://2018.rubyworld-conf.org/files/B-3-2.pdf
　発表： https://youtu.be/l3aEMQe9BmA

　概要としては、中高生にプログラミングを教える教材として、安価なArduinoデバイスにmruby/cを乗っけてirbでインタラクティブに機器制御できたら、これ教育的には結構イケてるんじゃない？という旨の話をしてきました。個人的な感想としては、Cが書ける組込エンジニアの人はmruby/cを渡されてもどう使ってよいのか悩ましい、というお話を聞いたのですが、Cがメイン言語でないWeb開発者からしてみると、rubyで組込機器が制御できるというのは魅力的ですし、Webエンジニアが組込機器を制御するなら、それは当然自分の得意なWebの領域に絡めて何か作るだろうと思うので、そこに何かこれまでに無いアイデアが出てくる余地があるんじゃないかなぁ、と思っています。



 発表の時に[リポジトリ](https://github.com/kirikak2/nodemcu32s-meets-mrubyc)も公開しまして、今はmruby/cのバージョンアップが行われた時に、ちゃんと動くかどうかを確認するための個人用の開発リポジトリとなってますが、何かmruby/cの発展に寄与できるといいなぁと思っています。

　今回の記事では、あまり内部に踏み込んだ話は行いませんが、もしリクエストがあれば別の記事でmruby/cの話を書きますので、コメントしてください。

# おまけ： mrubycKaigi #1

　今回島根県で発表することが決まった後、RubyKaigi 2018でmruby/cの発表をされていた、[羽角さん](https://twitter.com/hasumikin)からのお声掛けで、RubyWorld Conference前日にmrubycKaigi#1をやろうというお話があり、参加してきました。

![IMG_0832.jpg](https://qiita-image-store.s3.amazonaws.com/0/213990/c2b7b2ba-65a1-e7cc-2197-b95d1277259d.jpeg)

　内容としては、mruby/c開発者の東さんによるmruby/c開発背景の話、九工大のmruby研究者である田中先生による、今後の動向のお話、羽角さんによる組み込み開発あるあるLT、@kishimaさんによる[技術書典5でmruby/cの同人誌を書いた話](https://silentworlds.info/2018/09/17/post-620/)などのお話を聞きました。私も発表資料のネタバレにならない程度に、開発したデバイスの動作デモをやりました。

![IMG_5682.JPG](https://qiita-image-store.s3.amazonaws.com/0/213990/37b97949-a673-21a4-86bb-7072c740f8af.jpeg)

 こちらも、次回開催時に自分のアップデートをお話できるように、色々やっていきたいですね。

# 明日の担当

　明日は最近Jestにハマっているらしい@tronperidotの担当です。
Docker for Windows で CentOS 7 を起動するまで

## はじめに
Windows 10 にインストールしたDocker for Windowsで、CentOS 7 のイメージを検索、ダウンロード、起動、接続するまでの流れです。


## CentOS 7 のイメージを検索
```
PS C:\> docker search --limit 5 centos
NAME                          DESCRIPTION                                     STARS               OFFICIAL            AUTOMATED
centos                        The official build of CentOS.                   5034                [OK]
jdeathe/centos-ssh            CentOS-6 6.10 x86_64 / CentOS-7 7.5.1804 x86…   102                                     [OK]
openshift/base-centos7        A Centos7 derived base image for Source-To-I…   36
pivotaldata/centos-gpdb-dev   CentOS image for GPDB development. Tag names…   8
pivotaldata/centos            Base centos, freshened up a little with a Do…   2
```
| オプション | 説明 | 
|:---|:---|
|--limit| 検索結果の表示数を指定した値に制限 |

名前空間が表示されていないcentosは公式リポジトリのイメージ。
以降では公式リポジトリのcentosを使用する。

## CentOS 7 のイメージをダウンロード
```
PS C:\> docker image pull centos:centos7
```
公式リポジトリからcentosをダウンロード。
タグはcentos7を指定（省略可、もしくは任意のタグ）。

## CentOS 7 のイメージを確認
```
PS C:\> docker image ls
REPOSITORY                 TAG                 IMAGE ID            CREATED             SIZE
centos                     centos7             1e1148e4cc2c        4 days ago          202MB
```

## コンテナの作成と実行

```
PS C:\> docker container run --privileged -d --name TEST centos:centos7 /sbin/init
85ffcedeccc9ac1dcbd578fd1edfea30926b947861a54b87a20102230de51900
```

| オプション | 説明 | 
|:---|:---|
|--privileged| このコンテナに対して拡張権限を与える |
|-d| コンテナをバックグラウンドで実行し、コンテナIDを表示 |
|-name| コンテナに名前を割り当て |

TESTという名前のコンテナをsystemctlが使用可能な状態で作成。


## 実行中のコンテナに接続

```
PS C:\> docker container exec -it TEST /bin/bash
[root@85ffcedeccc9 /]# 
```

| オプション | 説明 | 
|:---|:---|
|-i| コンテナ側の標準入力との接続を継続する |
|-t| 擬似端末を有効にする（ttyの割当） |

実行中のTESTコンテナ内に新しいBashセッションを作成。
SSHで接続しているような感じで操作可能に。
[cocoa][swift]ターミナルでgitの状態を表示する

<p>ターミナルでgit操作をしている際に、プロンプトにgitの状態が表示されると便利だ。</p>

<p>Appleが提供する開発環境は、App Store経由で入手できるXcodeをインストールするだけで完了するが、開発者サイトから個別にダウンロードできるCommand Line Tools for Xcodeをインストールしたのちに、以下の対応を行うと、プロンプトにgitの状態が表示される。</p>

<p>.bashrcに以下を記述する。</p>

<pre><code># Git
 
if [ -f /Library/Developer/CommandLineTools/usr/share/git-core/git-completion.bash ]; then
	source /Library/Developer/CommandLineTools/usr/share/git-core/git-completion.bash
fi
 
if [ -f /Library/Developer/CommandLineTools/usr/share/git-core/git-prompt.sh ]; then
	source /Library/Developer/CommandLineTools/usr/share/git-core/git-prompt.sh
fi
 
GIT_PS1_SHOWDIRTYSTATE=true
GIT_PS1_SHOWUNTRACKEDFILES=true
GIT_PS1_SHOWSTASHSTATE=true
GIT_PS1_SHOWUPSTREAM=auto
 
PS1="\h:\W \u\$(__git_ps1)$ "
 
# End Of File
</code></pre>

<p>これで完了だ。</p>

【関連情報】
<a href="https://qiita.com/advent-calendar/2018/cocoa">Cocoa Advent Calendar 2018</a><br />
<a href="https://cocoa-kanto.connpass.com/event/111294/">Cocoa.swift 2019-01</a><br />
<a href="https://cocoa-kanto.connpass.com/">Cocoa.swift</a><br />
<a href="https://www.facebook.com/groups/cocoa.kanto/">Cocoa勉強会 関東</a><br />
<a href="http://www.bitz.co.jp/weblog/">Cocoa練習帳</a><br />
<a href="https://qiita.com/m_yukio">Qiita</a><br />
iperf3の結果をJSONで出力して色んなところに投げつけたい

この記事は武蔵野アドベントカレンダー2018の12日目のようです。

## TL;DR

- iperf3の結果をJSON/httpで色んな所に投げつけるワンライナーを提案

## はじめに

iperf3という、ネットワーク帯域を簡易に測定したりするツールがあります。
実はこのツール、json形式でアウトプットできるんですが、この機能普段全然使わないんです。
iperfを打ちたいときってテキストであっさり確認できればそれでいい場合が多いですしね。

でも、iperfで打った結果をワンライナーでhttpで投げつけられたら
もしかしたら便利なんじゃないかと思い、やり方を探ってみたいと思います。

## 事前準備

環境はUbuntu18.04LTSを想定しています

```
$ sudo apt update
$ apt install iperf3
```

## おもむろにiperf3の結果をJSON/httpで投げる

```
iperf3 -c <iperfの宛先> -t 3 -J | curl -XPOST -H 'Content-Type:application/json' <JSON/RESTの投げ先URL> -d @-
```

これで好きな宛先にiperf3の測定結果をjsonで投げつけることができるようになります。

## おわりに

やっぱり使わないかもしれない。
【ClamAV】clamdエラー

## ClamAVの`clamd`コマンドでエラー

### 前提条件
- 下記の設定を終了している必要がある。

1. ClamAV のパッケージを[Homebew](http://brew.sh/)を使ってインストールする。
2. `/usr/local/etc/freshclam.conf` を作成し、`freshclam` を実行する。
3. `usr/local/etc/clamd.conf` (linuxは`/etc/clamd.comf`) を作成する。
4. ソケット（プログラムでネットワーク通信部分を担当する）ディレクトリを用意する。
5. PATHに`/usr/local/sbin`（/usr/local/はシステム管理者が自分でコンパイルしたアプリケーションをインストールする場所）があるか確認する。

- 参考：[[Linux] /usr/local/の使い方まとめ](http://dqn.sakusakutto.jp/2011/08/linux_usrlocal.html)

### clamdとは
> ウイルススキャナデーモン

（デーモン：常駐プログラム。UNIX系ではファイル名の接尾辞として`d`を付けることが多い。）

- 参考：[DAEMON](http://d.hatena.ne.jp/keyword/daemon)

だからclam`d`なのか:thinking:

> clamdscanとセットで使う。
> あるいはメールのスキャンなどに。

ふむ。

> clamdscan
> clamdとセットで動くウイルススキャナ。
> 指定されたファイルのパスをclamdに教えると、clamdがスキャンしてくれる。
> clamdは定義ファイルをメモリ展開しているのでclamscan（clam*d*scanじゃなく）よりもスキャンが断然速い。

とのことです。

### エラー内容
- `clamd`コマンドでclamdのプロセスを実行しようとしたところ、エラーになる。

#### 第一のエラー

```
%clamd                                                                            [2.5.1]
LibClamAV Error: cli_loaddbdir(): No supported database files found in /usr/local/Cellar/clamav/0.100.2/share/clamav
ERROR: Can't open file or directory
```
ファイルもしくはディレクトリを開けないと言われる。

下記のサイトで`sudo freshclam`を実行しろと書いてあるので
素直に従う。

- 参考：[Fixing LibClamAV Error: cli_loaddbdir(): No supported database files found in /var/lib/clamav](https://nitstorm.github.io/blog/clamav-first-run-update-database/)

#### 第2のエラー

```
%sudo freshclam                                                                   [2.5.1]
ERROR: Can't create temporary directory /usr/local/Cellar/clamav/0.100.2/share/clamav/clamav-d957cc8bfd246997c6037a88b8d0d2a7.tmp
Hint: The database directory must be writable for UID 82 or GID 82
```
次はディレクトリを作成できませんと言われた…
下記のサイトを参考に
`chown -R 498:499 /usr/local/etc/clamav`
を実施する。

- 参考：[CentOS - Clam AntiVirus でパーミッションエラー！](https://www.mk-mode.com/octopress/2013/06/14/centos-clam-antivirus-permission-error/)

#### 結果

- 無事起動を確認

```
%clamd                                                                            [2.5.1]
clamd  10.80s user 0.57s system 99% cpu 11.371 total
```
#### エラー原因
パーミッションが`clamav`から`clamd`に変更されたことが原因とのこと。
だとすると、`chown -R`で`clamd`を指定してあげると直りそうだけどな…

調べてみます。
PyFunctionalでPythonでもRubyやJSみたいにメソッドチェーンでラクラク配列操作する

# TL;DR
PythonでもPyFunctionalってライブラリを入れれば楽に配列操作できるよってお話

# 注意書き
この記事は基本的にPython3の話です。

# インストール方法
```bash
pip3 install pyfunctional
```

# 使用例
Pythonは配列操作がRubyやJSと違って大変です。

例えば、**0から9までの数字で偶数のものを2乗した配列**が欲しいとします。
（お題は適当に考えたから深く気にしないで）

## 例：Ruby
Rubyだと以下のように書けます。
すごく楽でいいです:relaxed:

```ruby
numbers = (0..9).select { |n|
  n % 2 == 0
}.map { |n|
  n * n
}

print numbers
# [0, 4, 16, 36, 64]
```

## 例：JavaScript
JavaScriptだとこうなります。
JavaScriptにも連番作る関数ください。

```javascript
var numbers = [...Array(10).keys()]
                .filter(n => n % 2 == 0)
                .map(n => n * n)

console.log(numbers)
// [0, 4, 16, 36, 64]
```

### 例：Python
pythonだと以下のようになります。
辛い……:sob:

```python
numbers = []
for n in range(10):
  if (n % 2 == 0):
    numbers.append(n * n)

print(numbers)
# [0, 4, 16, 36, 64]
```

### 例：Python(lambda)
lambdaを使うと以下のようになります。
括弧の対応も改行どこでしていいのかもわからない……:sob:

```python
numbers = list(map(lambda n: n * n, filter(lambda n: n % 2 == 0, range(10))))
print(numbers)
# [0, 4, 16, 36, 64]
```

### 例：Python + PyFunctional
満を持して、PyFunctionalを使うとRubyやJSのようにメソッドチェーンで書けます。

```python
from functional import seq

# 改行のために括弧で挟む。
numbers = (seq(range(10))
            .filter(lambda n: n % 2 == 0)
            .map(lambda n: n * n)
          )

# 括弧じゃないほうがいいなら、行末にバックスラッシュをつける。
numbers = seq(range(10))\
            .filter(lambda n: n % 2 == 0)\
            .map(lambda n: n * n)

print(numbers)
# [0, 4, 16, 36, 64]
```

使い方を簡単に言うと、`seq`に配列を渡して、それに必要なメソッドをチェーンしていく感じです。
感覚はRubyと同じですよね。

使えるメソッドに関してはGithubにある公式リポジトリで確認してください。
[PyFunctional - Github](https://github.com/EntilZha/PyFunctional)

# まとめ
PyFunctionalで快適な配列ライフを！:grin:
カスタマーエンジニアがデザインに目覚めた話

diffeasy（ディフィージー）でカスタマーエンジニアの松田です。


普段はカスタマーエンジニアとしてお客様サポートをしつつ、サービスの機能改善のプログラムを書いたりもしています。

そんな私、最近、アビリティが新たに増えました。

なんとデザインです！

社内で雑談をして落書きをしていたのがきっかけで目覚めました。

これから経験を積んでこのアビリティを輝かせねばです。

#デザインで大切なこと
恥ずかしながら、ついこの間まで素人にありがちな**良いデザイン=カッコいい**という考えでした。

そんな私を目覚めさせてくれたのが、おなじdiffeasyの仲間である「わかりやすくするデザイナー」片岡さんです。

片岡さんはWebサイト上でユーザーが感じるであろう**操作性**や、どういう**体験を味わうか**をリアルに把握します。
(ご本人はこの時”イタコ”になっているそうです。)

Webデザイン用語でいうとUI/UXを"イタコ"になって感じとれということですね。

すみません。UI/UXってわかっているようでわかっていません。まとめます！！

###UIとは
> 別名：ユーザインタフェース,【英】User Interface
>ユーザーインターフェースとは、コンピュータシステムあるいはコンピュータプログラムと人間（ユーザー）との間で情報をやり取りするための方法、操作、表示といった仕組みの総称である。
出典｜[IT用語辞典バイナリ](https://www.sophia-it.com/content/%E3%83%A6%E3%83%BC%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9)

UIデザインとはユーザーが接触する全てのことをユーザー目線で考えられたものと認識しました。
UIデザインを考える上で大事であろうポイントを、ここ最近得た知見で5つ挙げます。

①**どんなユーザーがどんな目的を達成したいのか**
②**ユーザーが直感的に操作できる仕組み**
③見やすい文字フォントと文字サイズ
④読めばわかるポイントをおさえた説明文
⑤色が持つイメージや意味を考えた配色

①②は目には見えないので特にしっかりとユーザーになりきって考える必要があると感じました。


###UXとは
> 別名：ユーザエクスペリエンス,【英】user experience
>ユーザーエクスペリエンスとは、製品やサービスを利用を通じて得られる体験（experience）の総称である。
出典｜[IT用語辞典バイナリ](https://www.sophia-it.com/content/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%AA%E3%82%A8%E3%83%B3%E3%82%B9)

UXデザインは満足、感動などポジティブな感情をユーザーに与えられるように考えられたものだと理解しました。
UXデザインを考える上で大事であろうポイントも5つ挙げます。

①目的達成がスムーズで気持ちいい
②予想以上な働きで驚き
③迷わない設計で安心
④画面がきれいで感動
⑤ユニークな仕掛けで楽しい

感情なのでポイントとしてまとめるのがむずかしいけどこういうことかなと思いました。

#まとめ
デザインは、これが正解なんて無いとよく耳にしますが本当にその通りだと改めてわかりました。
カスタマーサポートで得た経験値もデザインに大いに活かせるなとも感じたので、将来はカスタマーデザイナーになろうと思います。
BitVisorのAVX512命令対応

先月のBitVisor Summitにおいて，BitVisor上でAVX512命令を使うとillegal instructionになるという話をしたのですが[^1]，改めて調べると原因が分かりました．

[^1]: 正確にはVMWare上でBitVisorを動かした時，という話をしたのですが，VMWare関係ない話だと思います．環境の問題で実機での確認ができていませんが．

## 原因
extended control register(XCR)というレジスタがあり，この0番(XCR0)に浮動小数点機能の有効状態等の情報が格納されています．

XCRへはXGETBV/XSETBV命令でアクセスします.XSETBV命令はVMEXITが発生することになっており，この対応をBitVisorは`core/xsetbv_pass.c`でおこなっています．

BitVisorではXCR0の中のSSE及びAVX stateに関するbitに関してパススルーしていましたが，AVX512では新たに3つのstate bitが追加されました．ゲストがこの3つのstate bitを設定することができなかったため，AVX512命令を実行するとillegal instructionとなっていました．

## 対策

SSE, AVXの場合と同様にAVX512のstate bitもパスルルーするようにして対応してあげれば良いのではないかと思います．

[修正差分](https://bitbucket.org/mmisono/bitvisor/commits/dd0a7173203a2488ef08142a50abb51b90de956e)

## 問題発覚の経緯
そもそもの事の発端は，AVX512をサポートするCPUでUbuntu18.04をBitVisor上で起動した際に，起動時に読み込まれるraid6のカーネルモジュールがAVX512命令を使用しており，そこでパニックするという問題でした．

IntelのSDMでは，AVX512が利用可能かどうかの条件として，以下の3つを挙げています(SDM Vol1. 15.2).

- CPUID.1:ECX.OSXSAVE[bit 27] = 1
- XCR0のAVX512関連のstateが有効になっている (XCR[7:5] = 111b, XCR[2:1] = 11b)
- CPUID.7:EBX.AVX512F[bit 16] = 1

しかしながら，[Linuxのraid6のモジュールはXCRを参照せず，CPUID.7の結果のみでAVX512が利用できるかどうかを判断しています](https://elixir.bootlin.com/linux/v4.19/source/lib/raid6/avx512.c#L39)．
XCR0のAVX512のstate bitが利用可能かどうかは，CPUID.7とは別に，CPUID.0xdに格納されています．そして，BitVisorはもともとAVX512のstate bitはマスクして利用不可能として通知するようにしていました(`core/cpuid_pass.c`)．

したがって，本来であればXCR0のAVX512 stateが利用できないこと，ひいてはAVX512命令が使用不可なことは分かるはずなので，AVX512命令を勝手に使うraid6のモジュールが悪いということになります．といっても現実的にCPUID.7でAVX512命令のサポートを示しておきながらXCR0のAVX512 stateが使えないプロセッサがバグ以外に存在するのかは分かりませんが..

逆に言うと，AVX512を隠蔽したいならCPUID.7もマスクしてあげたほうが親切かと思います．

## ちなみに
BitVisorではVMENTRY/VMEXITに伴う浮動小数点関連のレジスタの退避/復元はしていません．もしBitVisor側から浮動小数点命令を実行したい場合は自分で退避/復元する必要があります．

以下が参考になるかもしれません．

- Yasushi Shinjo, [[BitVisor-devel:91] 保護ドメインでの浮動小数点の利用](http://www.bitvisor.org/archives/bitvisor-devel/2016-December/000090.html), 2016.
GASを触って気づいたtips

この記事はロボP Advent Calendar 2018の12日目の記事です．

ロボPではありませんが、今年はインターンなどでかなりGoogle Apps Script(以下GAS)を
使うことが多々あったので、そこで得た知見をご紹介したいと思います。

# 1. Logger.log動きませんけど...?

おなじみ、メニューの「表示」から「ログ」でログ確認できるLogger.logですが
こんな罠があります。

- doPost()
- doGet()
- 自作トリガー関数

これらの関数内ではLogger.logが動かないのです。

-> console.logを使いましょう。
Google Cloud Platform上のStackDriver Loggingで確認できます。

# 2. トリガーいつ動くん...?

時間主導型でのトリガーには、月・周・日・時・分・特定日時で動作タイミングを設定できます。

このうち時刻を設定するもので午前1時~2時のような選択肢がありますが、
トリガーが動作されるのはこの範囲内のどこかのタイミングになるので厳密な時刻設定ではありません。

-> 俺は毎週何時何分にこの関数を動かしたいんだ！って人は大人しくコードを書きましょう。
トリガー設定の関数が用意されています。

# 3. Webブラウザ上でコード書きたくないんだけど...

GASをそのまんまWebブラウザ上でコード書き続けるのは正直しんどいです。
インデントはズレるし、変数ぐらいの最低限箇所にしか色がつかないし...

-> clasp使いましょう。
あなたの好きなエディタで書けます。

# 4. 版を管理...?

最初見た時、Google翻訳でもかかっているのかな？ってぐらいに無理やり語訳された感が強すぎる。

現状のGASプロジェクトのスナップショットのようなものです。　バージョン管理とは...?

ちなみに以前のバージョンに復元することもできません。
また、バージョン番号は勝手にインクリメントされるだけなので、好きな数字とかは使えないです。

-> claspでローカルに落としてGitHubなどを使おう
claspを使えばGAS上のコードもGit管理できます。

# 5. ライブラリと版の関係性

版を作成すると、そこで使われている関数をライブラリとして別のGASでインポートして使用することができます。

ここで注意することは、インポートしている版を削除してしまうとインポート先で関数が読み込めなくなり、サーバーエラーで全て動作不能になってしまいます。
僕はこれでスプレッドシート共々作り直したことがあります。

-> ライブラリ管理している版は消さないようにしよう。
ご利用は計画的に.

# 最後に
また知見が溜まり次第、追記していきます。
Vue.js の slot が name により表示位置が集約される (Vue.js v2.5 まで)

# Vue.js の slot が name により表示位置が集約される

下記のような `slot` 使用のコンポーネントを用意します。

* default となる `slot`
* `name` に `named` とした名前付き `slot`

```vue:hello-slot.vue
<template>
  <div class="hello-slot">
    <slot /> <br />
    <slot name="named" />
  </div>
</template>
```

そのコンポーネントを下記のようにしようします。

* タグで囲っていない `1`
* `named` の `slot` を指定した `2`
* タグで囲っていない `3`
* `named` の `slot` を指定した `4`

```vue:App.vue
<template>
  <div id="app">
    <HelloSlot>
      1 slot <br />
      <div slot="named">2 named slot</div>
      3 slot <br />
      <div slot="named">4 named slot</div>
    </HelloSlot>
  </div>
</template>
```

[こうなりました](https://codesandbox.io/s/8zxlm29o2j)

```
1 slot 
3 slot 

2 named slot
4 named slot
```
やる気が起きない時に役立つアプリを作りました

こちらは[クソアプリ Advent Calendar 2018](https://qiita.com/advent-calendar/2018/kuso-app)の1２日目の記事です。

# 作ったもの
<img width="874" alt="スクリーンショット 2018-12-12 23.22.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/224108/f7acc31c-2858-b3d8-98ab-b291d542e4c4.png">

[公開中](https://anchor-cable.github.io/2018k-app/)

# ユースケース
我々はエンジニアとして日々楽しい仕事に取り組んでいますが、
明日のご飯を食べるための仕事が全部楽しいという日々を送られている方は稀かと思います。  

* 証跡の画面ショット取ってExcelに貼り付けたり
* 同じコマンドを打って結果を眺めたり
* 画面の内容を紙の書類に書き出したり
* 紙の内容を画面に打ち込んだり

おっとこの辺にしておこうか。

とにかくそういうつまんない仕事にモチベなんか上がるハズもなく。
気付けば10分、15分がだらだら過ぎている事もしばしば...

そういう時に
「5分だけ仕事ガチでやるぞ！！！！」
と奮起して一気に片付けるためにこのアプリは生まれました。

５分だけ取り組むタスクを予め入力し、開始ボタンを押すとタイマーがスタートするだけのアプリです。
本気で５分だけやろう、と手を動かし始めれば大抵５分以上働けるかも、という事を実感いただけるかもしれません。

なお効果には個人差があります。
5分でタスクが片付かない場合も製作者は責任は負いません故ご容赦を。
あと１分や２分で集中が切れるなら思い切って寝た方がいいんじゃないかと。

# 使った技術・ソース
jQueryを頑張って書きました。

ソースはこちらに公開しています。
まだまだ勉強中の身故に上手く書けているとは到底言えないのですが。。。

[ソース](https://github.com/anchor-cable/2018k-app)

# 学んだこと
今日の１８時に、それまでずっと書いていたDjango製クソアプリ公開を諦めました。
それから６時間、ほぼぶっ通しで書いてました。
ソース書くの楽しいです。来年もやりたい。
来年は技術的にドヤれるもの作りたいなあ。

# 最後に

主にTwitterで活動していることが多いです。良ければフォローください。
[@anchor_cable](https://twitter.com/anchor_cable)

ブログもやってるので良ければ覗いてみてください。
アドカレは残り１つです。今の所ギリギリどの記事も期日以内。
[dassimen.log](https://dassimen-engineer.hatenablog.com/)

来月から転職活動本格化すると思います。
勉強も頑張るんで応援よろしくおねがいします。
GitLab + reveal-ck でスライドの CI/CD

# はじめに

スライドを Markdown で書いてバージョン管理したり、CI/CD っぽいことをしてみました。

## やったこと

* Markdown で記述
* reveal-ck でスライドに変換
* GitLab でバージョン管理
* GitLab Pages にホスティング
* GitLab CI で CI/CD (push するたびに Pages にホストしたスライドも更新)

## サンプル

* サンプルスライド: https://otuhs_d.gitlab.io/slide-cicd
* サンプルリポジトリ: https://gitlab.com/otuhs_d/slide-cicd

# reveal-ck のインストール

reveal-ck の説明はここでは割愛します。

```bash
$ gem install reveal-ck
```

でインストール。

あとは

* `slides.md` にスライドの中身を書く
* `config.yml` に設定内容を書く

## ローカルでスライドの確認

```bash
$ reveal-ck generate
```

で `slides` ディレクトリが作成され、その中にコンテンツが自動生成されます。

```bash
$ reveal-ck serve
```

でサーバを立ち上げてプレビュー。

http://localhost:10000 で確認できます。

> * `slides.md` を更新すると自動で更新される。すごく便利。
> * `slides/` 以下はバージョン管理する必要ないので `.gitignore` にいれておいていいかも。

# .gitlab-ci.yml の作成

作成したジョブは以下2つ。

* `reveal-ck generate` で Markdown から スライドを生成するジョブ
* 生成したスライドを GitLab Pages にホスティングするジョブ

```yaml:.gitlab-ci.yml
stages:
  - build
  - deploy

build:
  # デフォルトの Ruby Image だと上手くいかない。詳しくは後述。
  image: registry.gitlab.com/xxx/yyy
  stage: build
  script:
    - reveal-ck generate
  # 次のジョブに成果物を受け渡すために artifacts 定義
  artifacts:
    paths:
      - slides/ # reveal-ck generate で slides/ 以下にコンテンツが生成されるのでコレを指定

# ここは GitLab Pages のお作法のとおり
pages:
  stage: deploy
  dependencies:
    - build
  script:
    - mv slides/ public/ # 上で生成された slides/ をそのまま public/ に
  artifacts:
    paths:
      - public
```

# Docker Image の作成

デフォルトの Ruby Image だと文字コードが `US-ASCII` なので、`slides.md` に日本語が入っているとエラーになってしまいます。

```bash
$ reveal-ck generate
error: slides.md is not valid US-ASCII
Generating slides for 'slides.md'..
ERROR: Job failed: exit code 1
```

というわけで、Docker Image 作って GitLab の Container Registry に push して使うことに。

* ベースは `ruby:2.5`
* 文字コードを `UTF-8` に
* `reveal-ck` もインストールしておく

```ruby:Dockerfile
FROM ruby:2.5
ENV LANG C.UTF-8
RUN gem install reveal-ck
```

## Conteiner Registry に push

手順は GitLab のプロジェクトページ > `Registry`  に記載されているとおり。

GitLab の Container Registry にログイン

```bash
$ docker login registry.gitlab.com
```

Image の build と push

```bash
$ docker build -t registry.gitlab.com/xxx/yyy .
$ docker push registry.gitlab.com/xxx/yyy
```

# おわりに

かなり雑な説明になってしまったけど、結構いい感じな環境を作れた気がしています。
後輩ができたら薦めてみよう。。。
ペアプロ・モブプロの際、覚えておきたいVimバインド

はじめまして。今年の4月に謎の集団Zeneloへ新卒で入団したMarcyです！
Qiitaへ投稿するのも初めてなので、暖かい目で読んでいただけるとありがたいです！

今回、普段の開発における生産性的な問題（精神衛生上的な問題？）に関わるかもしれないことについてのことを書きました!

**この記事のゴール**
- 普段Vimバインドではない方が、ペアプロ・モブプロの際に何も打てない状況にはならないこと
- **少しでも多くの方がVimバインドを使ってみようかなと思えること**

※エディタ自体をVimに変えようというのではなく、普段使っているエディタをVimバインドにしてもいいよというモチベーションです

## この記事を書こうと思った経緯
僕は普段ScalaやTypeScriptをVimバインドのIntelliJで（本当はneovimで書きたいけどScalaのLSPがまだまだなので仕方なく...）書いています。
最近のZenelo集団では、ペアプロ・モブプロで開発をする機会が増え、色んな方のPCでコードを書く機会が増えてきました。
そこで、僕のPCで開発をする度にVimバインドをオフにしていたり、他の方のVimバインドではない環境で開発する際に全く慣れる気配がなかったからです。

なので、少しでも多くの方がVimバインドに慣れて欲しい！（むしろ使ってほしい）
てことでVim初心者のための基本Vimバインド講座いってみましょー！
※とりあえずこれだけ覚えておけば不自由なく開発できそうなことだけ書くので、普段Vimバインドの方には物足りないかもしれないです。

## 基本的なVimバインド講座
の前に、`caps lock`キーは殺しましょう！
わざわざほとんど使うことのないキーを残しておくよりも`ctrl`キーにしておく方がVimmerにとっても、そうでない方にとっても打ち間違いが少ないからですね。（macのデフォルトキーバインドではemacsバインドが使われており、`ctrl`を多様するので、それも素晴らしいキーバインドだからです）（できるだけホームポジションから移動したくないニートですね）

気を取り直して基本的なVimバインド講座行きます！

**まずはじめに知っておくべきこと**
Vimには3つのモードがあります。
1. **normal**モード・・・基本的にesc押せばこのモードになります
  - コマンドを打つモードです（ex. 保存する、文字列を置換する）
2. **insert**モード・・・normalモードから`i`を押すとこのモードになります
  - 文章を書くモードです
  （最悪このモードにいれば何も書けないことはないかと）
3. **visual**モード・・・normalモードから`v`を押すとこのモードになります
  - 複数行の文字を削除/コピーしたいときなどに使用するモードです
このモード管理によって**今**何がしたいのかが明確に分けることができ、究極に手の移動を少なくすることができます。
今回は特に2. の**normal**モードについて説明していきます！

### normalモード
主に開発をしていて、やりたいこととしては**移動/保存/削除/コピー&ペースト/検索** ですね。

**移動**
- ←は`h`
- ↓は`j`
- ↑は`k`
- →は`l`

**保存**
- 保存は`:w`
- 保存してファイルを閉じるは`:wq`

**削除**
- 一文字→削除は`x`
- 一文字←削除は`X`
- 一行削除は`dd`
- カーソル位置から文末までの削除は`D`

**コピー&ペースト**
- 一行コピーは`yy`
- コピーしたもののペーストは`p`

**検索**
- `/検索したい文字列`

これだけでも、macユーザであれば`cmd + shit + 矢印 + ○`みたいな操作がなくなったり、エディタ特有の機能を覚える必要がなくなりましたね。

※もし色々試していて、訳がわからなくなっても`esc`を押しておけば、殆どの場合このモードに戻ることができます

# 応用編
**置換**
- ファイル内の文字列すべてを置換したいときは`:%s/対象文字列/置換したい文字列/g`
ちょっとめんどくさいですね...

僕的にはVimバインドで最も強いところはジャンプ機能だと思っています！
**ジャンプ**
- ファイル先頭にジャンプしたいとき `gg`
- ファイル末尾にジャンプしたいとき `G`
- 例えばPRレビューのコメントをもらって、その箇所にジャンプしたいとき `:○行`
これだけで、対象ファイルの○行目にジャンプすることができます。
- 一行内で対象の文字にジャンプしたいとき `f ○`
- `easymotion` （これが最強だけど、プラグインを使うので詳しくは調べてください...）
例えばファイル内の任意の文字列（ここでは）`Inject`にジャンプしたいときに、
<img width="812" alt="スクリーンショット 2018-12-12 23.35.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/139914/4e97c804-eecf-f27b-16c5-df02417f16ce.png">

23行目まで移動して `Inject` まで移動しないといけないですが、
**easymotion**を使い頭文字`I`に飛びたいとすると
<img width="693" alt="スクリーンショット 2018-12-12 23.36.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/139914/106da041-811f-53d0-e869-cd642acfe96a.png">
このように、`Inject`にアルファベットが割り当てられ、簡単にジャンプすることができます。


# おわりに
今回、ペアプロ・モブプロで使用するキーバインドがVimバインドだった際に、困らないために**これだけは覚えておいてほしい**ことだけを書きました。

本来、Vimを使う上で一番楽しいところは自分の使いたいように`vimrc`や`config/nvim`を育てていくことや、新しいpluginを試していくことだと思っていますので、少しでも興味を持っていただいた方はぜひともVim教へ入信していただけるとありがたいです！
【GCP】CLOUD NETWORKINGサービスの概要

##Google Cloud Networking サービス
個人的に頭に入りにくい内容だったので、簡単にそれぞれのサービスをまとめておく。
~~横文字使った説明多くない？~~

##Google Virtual Private Cloud(VPC)ネットワーク
GPC上のリソースをプロビジョニングし、リージョン別またはグローバルでどのように接続されるかを柔軟に調整、制御することができる。
>プロビジョニング
>>必要に応じてネットワークやコンピュータの設備などのリソースを提供できるよう予測し、準備しておくこと

Cloud Platform、オンプレミス、その他のパブリッククラウドインフラストラクチャ（AWSなど）で、ネットワークポリシーを細かく定義することも可能。
詳細なIPアドレス範囲選択、経路、ファイアウォール、仮想プライベートネットワーク（VPN）、Cloud Routerなど、Googleのマネージドネットワーク機能を利用できる。

##Google Cloud Load Balancing
GCPのロードバランサー。GCE（Google Compute Engine）上のアプリケーションをアイドル状態からフル稼働まで一気にスケール可能で、プレウォーミングは不要。
リソースを地理的にユーザーに近いリージョンに分散して配置する。

##Google Cloud DNS
Googleと同じインフラストラクチャで動作するDNS。
>DNS(Domain Name Systemの略)
>>ドメインとIPアドレスを対応付けて管理するシステムのこと

プログラムによる操作が可能。
Googleが提供するUI、コマンドライン、API を使って管理ができる。

##Google Cloud Interconnect
いわゆる専用回線。既存のインターネット接続より可用性が高く、レイテンシの低い接続が可能。
この接続は、Carrier Interconnect サービス プロバイダパートナーが提供している。

##Google Cloud CDN
Google Compute Engine上で実行されるウェブサイトやアプリケーションのコンテンツを高速配信するサービス。
世界に90か所以上のキャッシュポイントが存在しているので、ページの読み込みが速くなることが期待できる。
SSLの追加費用は不要。
>SSL(Secure Sockets Layerの略)
>>インターネット上でデータを暗号化して送受信する仕組み（プロトコル）
全て与えられてきた新人が自力でフロントエンド環境構築［2］

# おさらい
この記事は**macbook air**でフロントエンド環境構築を行った経緯を記しています。
[「全て与えられてきた新人が自力でフロントエンド環境構築［1］」](https://qiita.com/oniam/items/c7ddb32836a7317af434)から読んでいただけると幸いです。
今回も私なりに噛み砕いて、頑張って書いていこうと思います。

### この記事のゴール
EJS,scssを使ってコーディングしたい
→ EJSからhtmlに、scssからcssに変換（コンパイル）しなければならない。
→ コンパイルする方法の一つに、Gulpのプラグインを使う方法がある。
→ まず、Gulpの実行環境を整えよう！

### ゴールに向けて必要なこと
**［1］ OSのアップデート
［2］ xcodeのインストール（homebrewのインストールの為）**
［3］ homebrewのインストール（nodebrewのインストールの為）
［4］ nodebrewのインストール（node.jsのインストールの為）
［5］ node.jsのインストール（Gulpのインストールの為）
［6］ Gulpのインストール
［7］ Gulpのプラグインを使うための設定
［8］ ゴール！

**Gulpの実行環境を作るために、前記事で[2]までの手順を終えています。**
今回の記事では、[3]以降の手順について記述します。

###［3］ homebrewのインストール
#### homebrewとは
homebrewとは、MacのOS上で働くパッケージ管理ツールです。
パッケージ管理ツールとは、パッケージの導入（インストール）と削除（アンインストール）、ソフトウェアやライブラリとの依存関係を管理するものだそう。

>**パッケージとは**
ソフトウェアに関する複数のファイルををまとめたもの

>**ライブラリとは**
凡庸性の高いプログラムの集まり。
ライブラリのみでは動かず、他のプログラムに呼び出されて使われることが多い。

#### インストール作業
前記事でXcodeのCommand Line Toolsが入手出来たので、[homebrew](https://brew.sh/index_ja.html)をインストールする準備が出来ました。
ターミナルで、下記コマンドを入力しましょう。
（2018年12月現在のhomebrewのサイト[https://brew.sh/index_ja.html](https://brew.sh/index_ja.html)のスクリプトを使用しています）

```
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

homebrewインストールのための上記コマンドを入力すると、さらに入力を求められます。

```
Press RETURN to continue or any other key to abort
==>
```
→ Enterで進みます。

```
Password:
```
→ OSのパスワードを入力、Enterで進みます。

```
==> Installation successful!
```
と出たら、インストール完了！

#### インストールしたhomebrewをチェック

次に、インストールしたhomebrewに問題がないか確認します。

```
$ brew doctor
```
と入力し、

```
Your system is ready to brew.
```
と出れば問題ありません。
これで、nodebrewをインストールする準備ができました！

###［4］ nodebrewのインストール

#### nodebrewとは
nodebrewとは、node.jsのバージョン管理ツールです。
Node.jsのバージョンをプロジェクトによって変えたり、最新のバージョンにアップデートする作業を簡単にしてくれます。




・
・
・