OmniAICreator/Qiita-1.07M huggingface dataset:
Monaparty / Counterparty ノードの日々の保守

# はじめに

fednode コマンドを使った、Monaparty (Coutnerparty も)ノードの保守/更新方法が日本語/英語ともに無い(少ない?) ようなので、記録しておきます。

保守方針はノードごとに様々とは思いますが、一般に、本稿の最初に出てくるほうが利用頻度が高く、後ろになるほど低頻度になるはずです。

# 保守用サブコマンド概説

## コンテナのリビルド

`fednode rebuild` これは数週間おきに実行します。
Monaparty の各コンテナのベースイメージは、OS やツールの脆弱性修正を伴う再構築が不定期に行われています。Counterparty の場合は頻繁ではないようですが、Monaparty は、最近 DockerHub の新機能に対応したので、ベースイメージの変更があるたびに自動でリビルドがかかります。
少しでも脆弱性の少ないノード運用を目指したい場合には、定期的な作業をおすすめします。

ベースイメージの変更差分のバイト数は、どのような脆弱性修正が上流で行われたかに大きく依存します。ときには数GBのサイズになることもあります。モバイル回線の場合は、いわゆる "パケ死" や長期の帯域制限に注意してください。
通信量が多いので時間目安も回線の太さに依存しますが、概ね数分から、長くても10分以内の作業になります。
コンテナ・ランタイムの再生成の際にはサービスが止まりますが、イメージ差分のダウンロード中はサービスが継続されます。ダウンタイムは数分程度が目安です。

## ソースツリーのアップデート

`fednode update` これは開発チームから告知があった場合に実行します。
ソースコードを保持している git リポジトリのアップデートがかかります。
ハードフォークを伴うアップデートの場合、これを怠ると開発者指定のブロック以降、ノードが立ち上がらなくなります。
このサブコマンドも、処理の最後にコンテナ・ランタイムが再生成されます。
ダウンタイムは、`rebuild` と同様に数分程度の作業になります。

## チェーンの再同期

`fednode reparse {サービス名}` ローカルのデータベースにある内容を破棄して、チェーンからもう一回読み込みます。`{サービス名}` には `counterparty`, `counterparty-testnet`, `counterblock`, `counterblock-testnet` が選べます。

何らかの理由でチェーンの更新が止まってしまったノードに対し、ソースコードのハンドパッチで応急手当した場合には、念の為おこなっておいたほうが良いでしょう。
再同期には、そこそこ時間(数十分程度)がかかります。その間、サービスは停止しますので、行うタイミングは予め検討したほうが良いです。

## コンテナ・イメージ・キャッシュのお掃除

`fednode docker_clean` ノードのディスク容量の残りが逼迫していない限り実行する必要はありません。`rebuild` サブコマンドで使われなくなったイメージ差分をローカルのキャッシュから削除します。
具体的にはタグのついていないイメージのみを削除するようですが、何を削除するのかは明文化された仕様としては無いようです。ノードを fednode 以外の用途でも使っている場合には、このサブコマンドの実行は控えたほうが良いかもしれません。(docker コマンドを生でつかうほうが結果を想像しやすい)

# まとめ

fednode のコマンドは、バージョンによって微妙に異なる場合があります。しかし、上記のコマンドが変更になることはないはず…ですが、fednode のヘルプも一応参照してください。
HEROKU CLIは何のためにいれるのか？？

#HEROKU CLIってなんだ？

HEROKU CLIはHEROKUを扱うためのCLIになります。
説明になってませんね。失礼いたしました。

こんにちは、しんちゃんです！今回は短めにHEROKU CLIを入れる意味をわかりやすく（個人差）解説していきたいと思います。
そもそも、CLIって何でしたっけ？
というところからスタートしましょう！
わかる方はまあ、この記事を読む必要がないと思うので、速やかに左上（Windowsは右上）にGUIの一つであるマウスを使ってブラウザを閉じてしまっていいでしょう。お疲れ様でした( 'ω')

##CLIって？？
では、CLIについてまずは軽く説明をいたします。
CLI(Command Line Interface)はCUI(Character User Interface)とも言います。これはしばしばGUI(Graphical User Interface)と比較されることが多いです。この「〜ちゃらインターフェース」というのは
**我々がPC（コンピュータ）を扱うにあたってどのように操作するか？**という違いだと思ってくれれば大丈夫です！

え？PCって**マウス**で操作するんでしょ？って思った方、半分正解です！
いまこの文章は何を使って書かれていると思いますか？？
そうです、**「キーボード」**ですよね。CLIというのはいわゆるキーボードを使ってカタカタ打ちながらパソコンを動かしていくことになります。

逆に直感的に**「マウス」**などの操作するものをGUIといいます。

よく映画でPCの前に座っているハッカーが黒い緑色の文字がたくさん出てくる画面でカタカタやりながら、「さーて、かわいこちゃん、ドアお開けてくれよ〜？？」とか言ってやってますよね？（主観なので細かいところはご了承くだされ笑）

その黒い画面を使ってゴリゴリPCを操作していくのがCLI(CUI)になります。

##CLIだと何が便利？？
まだ、CLIに慣れていない人は想像が難しいかもしれませんが、**CLIでのPC操作において基本的にできないことはありません。**（ちょっと盛ったかも…）

よく言われるのが「ファイルのコピーや移動はマウスのほうが便利じゃん！」「（今までのやり方なら）ファイルがどこにあるか一発で分かる。けどターミナル（CLI）だとわからん。」
とかでしょうか？

フフフ（￣+ー￣）
ファイルの移動・コピー？
2秒でできます。
ファイルがどこにあるか探す？
2秒でできます。
※なお、PCのスペックにもよります。

CLIはエンジニアになる上では避けて通れない道であり、なぜならCLIの方が作業がラクで早いからです！
頑なに切符を使っている人を見ると「Felica(交通系IC)便利だよ？」って思いませんか？
毎月コンビニで現金払いで公共料金を払っていると「口座引き落としやクレジットの方がラクだよな？」って思いませんか？
そんな感じです。
慣れればラクなんです！これをきっかけにCLIで操作する環境に慣れましょう！

##HEROKU CLIを入れる理由は？

HEROKU CLIを入れる理由は？という題名でしたが、結果上に書いてあることが全てなんです。「CLIで操作した方がラク」ということなんです。もちろんGUIでも全然いいと思いますが…
HEROKU CLIは他にもメリットがあります！

①作業や操作の記録(log)を残すことができる
②作業などを自動化できる
③やっている作業の共有ができる←コレは便利！

チームで作業を行う時、その作業を共有できないととても面倒ですよね。
リモートでの欠点は作業を共有できないという部分でしたが、そのあたりをしっかりと補填できるHEROKU CLIはかなり便利になります。

上のメリットは初めて使う方には感じづらいと思います。（記録（log）を残せるメリットは感じると思います！）
使っていくうちに便利さには気がつくと思いますので、騙されたと思って(HEROKU) CLIを使っていくことをお勧めします！

今回は以上になります。
題名にあまり触れなかった点、釣りのようになってしまい申し訳ございません。
CLIはどんどん使っていきましょ！というような形になります！

参考になりましたか？
まだまだ、PythonのPの書き始めくらい（「'」これくらい）のレベルですが
Outputとして記事を書いております。是非とも参考にしていただけたらと思います。

間違っている点、わかりにくい点、などあるかと思います。
是非ともご指摘いただけますと、質の向上になります。
よろしくお願いします(´ω｀)

mail:shinchan.tlpu@gmail.com
twitter(最近つくったので):[@shinchan_tlpu](https://twitter.com/shinchan_tlpu)
FlutterでGirdViewを出す


今回はSliverGridViewを使って表示します。

## GridViewにはそもそも２種類ある

FlutterではGridViewは `GridView` と `SliverGridView` の２種類あります。

それぞれには明確な違いがあり、 `SliverGridVew` は `CustomScrollView` にネストしないと表示することができません。
`GridView` はネストしなくても表示できます。


https://flutter.dev/docs/cookbook/lists/grid-lists

## SliverGridViewの実装

実装は下記になります。

```dart

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';
import 'package:flutter/material.dart';

class TimeLine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 5,
              crossAxisSpacing: 5,
              childAspectRatio: 0.5625,
            ),
            delegate: SliverChildListDelegate(
              List.generate(
                30,
                (int i) {
                  return Container(
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: new BorderRadius.all(
                        const Radius.circular(10),
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

```

<img width="375" alt="IMG_8CF85E1F9C9D-1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139360/5b4296bc-0c12-226b-5218-d9b3843ab261.jpeg">

(これはあくまで例です。)

## SliverGridViewの使い所

SliverGriViewの使いどころはいろんな要素のあるViewを表示するときに使います。
例えば下記のような構成のUIがあった場合に一緒に全てをスクロールするときにする場合などに使います。

```
-------------
appbar
list
grid
list
view
----------
```

実装方法としては `CustomScrollView` の `slivers` の中にネストさせて表示したりさせます。


以上です。
備忘録その２：herokuへのUP

やったの二日前なのに、もう忘れそう。
順序が間違ってるかもしれないけど、そこは適宜修正していく形で。

使用言語：nodejsとReact　環境：VSC、PCはWindows

##アップロード
>herokuにUPしたいプロジェクトフォルダのターミナルを立ち上げ、`git init`や`npm init`で
初期処理。そこからソースコードを書くでも書かないでもいいけど、herokuにUPしたい状態に
なったら、まずはターミナルで`heroku login`←これを打つとPress any Keyとか表示されるので
適当にボタン押すとブラウザが立ち上がる。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504697/0f21b057-9aa6-6d74-91e1-487ea1107822.png)
Log inボタン押下後、特にエラーとかでなければ、`heroku create`でheroku上に空プロジェクトが作成されるはず。
***
>`git add`　→　`git commit`など通常のGit操作を行う。（もう終わってるならスルー）
***
>リモート先の情報は`heroku create`で既に追加されている。確かめたいなら`git remote -v`
そんでもって`git push heroku master`すれば、herokuに上がってるはず。DashBoardで
herokuが自動で発行したアプリ名が表示されている。アプリ名はSettingsで変更できるゾ

まぁ、この辺りのことは[ドキュメント](https://devcenter.heroku.com/categories/nodejs-support)に全部載ってるけど、英語だからね……

##データベース(herokuのPostgres)
ここは更にうろ覚え……しかも自分のやり方、絶対スマートじゃないし。
マイグレーションうんぬんは***sequelize*** と ***sequelize-cli*** を使用。
前提として[sequelizeドキュメント](https://sequelize.org/master/manual/migrations.html#creating-first-model--and-migration-)のモデル作成まで実行済み。

>`heroku addons:create heroku-postgresql:hobby-dev`でheroku上でデータベースが使用
可能な状態になるっぽい(末尾のhobby-devとかはプラン名。自分の場合、無料プラン)
herokuで下記の画像の部分を開くとDBの設定情報が表示されるので、それをconfig.jsonに
反映させる。heroku上ではproductionの部分が設定として使われるみたい。pgAdminとかで
確認する場合にもここの情報を使うことになる。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504697/45033ea6-1d26-3f10-f4f3-cc6442006da0.png)

>ここからが正直スマートじゃない方法なので、もっと楽な方法はないかと思うのだけれど
上記作業まで終わったら一度、herokuへpush。
その後`heroku run npx sequelize-cli db:migrate`でデータベースとテーブルが作成される。
そしたらローカルでseedファイルを作成して、herokuへ再度push。
`heroku run npx sequelize-cli db:seed:all`でデータが作成されるはず。

一応、[ドキュメント](https://devcenter.heroku.com/articles/heroku-postgresql#provisioning-heroku-postgres)。まあ、とりあえず無事デプロイできたみたいなのでよかったよかった。
私が書くLaravelの記事について

## 執筆者の紹介
初めまして。ふじじゅんと申します。
執筆時点で、北海道札幌市にある自称ベンチャー企業のシステム開発会社で５年目のエンジニアです。
従業員も私の入社した頃と比べても多くなり、会社では今後の規模拡大に向けた様々な動きが行われています。

昨今ではPHPの`WAF`の一種である`Laravel`が注目されはじめ、採用している企業の話も多く聞くようになりました。
弊社においても新入社員やパートナー企業さんを同フレームワーク案件にアサインすることが多くなりました。
また幸いにも、社内で`Laravel`歴が長い私は、メンターとしてアサインされる機会にも恵まれました。

そんな中、とある理由で`Laravel`の記事を書くことになりました。

## 執筆理由
パートナー企業さんや新人をエンジニアに対して、`Laravel`で開発してもらうにあたり、ふと思い出すだけでも何点か気になることがありました。

- `Laravel`ですでに用意されている機能を、再発明する人が多い。
- １つの目的を達成するために複数の手段存在する。
- SQLを考えることができても、`Eloquentモデル`で考えることが難しい人が人が多い。
- ドキュメントをちゃんと見ていない人が多い。

`Laravel`は いわゆるフルスタックフレームワークに分類され、フレームワークのアーキテクチャや思想、各種機能を把握している人は開発規模に関係なく使いたくなるようなフレームワークです。
`Laravel`でWEBアプリケーションを開発をするにあたりヒントになるような記事を執筆し、まずは知人や同僚向けにサクサクと`Laravel`で開発を行ってもらい、今後も広く利用されるように"一石を投じよう"というのが執筆の理由です。

今後はLaravelの基本的なことや"こんなことをやってみた"的なことなど、幅広く扱っていければと考えております。
PSR-2 ～きれいなソースコードを書くための指南書～

# まず初めに

<b>PSR-2</b>については、以下のページが分かりやすくておすすめです。

▼PSR-2について詳しく解説している記事

- RitoLaboさんの[「【PHP】PSR-2 Coding Style Guide（コーディングスタイルガイド）」](https://www.ritolab.com/entry/92)

▼PSR-2染まりすぎないようにするために参考になる記事

- Qiitaユーザ@tadsanさんの[「PSRの誤解」](https://qiita.com/tadsan/items/942a381e952e12a8fa5a)

本記事はPSR-2になじみのないPHP技術者の方向けのもので、上記の記事を読んだ後の感想となります。

# PSR-2とは結局何？

一言で表現すると<b>「PHPできれいなソースコードを書くための指南書」</b>だと思います。

もちろん拘束力なんてないし、PHPは蛇言語のようにコーディングスタイルが原因でシンタックスエラーになることだってありません。
これは個人的な見解ですが、PHPの技術者として最低限の知識として知っておいた方が良いものがPSR-2だと考えております。

世の中にはPHPを全社的に使っており、歴史も信頼も厚い企業はたくさんあります。
こういったPHPに特化している会社の一部では、独自の開発ルールやコーディング規約についてのナレッジ/ノウハウが存在しているところも多いでしょう。
洗練されているものも多くあり、PSRに取り込まれても遜色ない完成度のものも存在すると思います。
こういった "オリジナルで優秀な指南書" がある会社に勤め、先輩の働き方を真似て自然ときれいなソースコードが書けるようになるでしょう。

私の勤めている会社では、残念ながらオリジナルで優秀な指南書はありません。
でもPHPの世界には、PSR-2という素晴らしい指南書があります。
この指南書をしっかりと読み込み、頭で消化できれば自信に繋がることでしょう。

さて、<b>PSR-2で書けるようになる</b>ということは、どのようなメリットがあるのでしょうか？

## 指南書（PSR-2）に沿って書くことのメリット

- きれいなソースコードが書けるようになる
- きれいなソースコードが読めるようになる

あらゆる文章において句読点や段落がない場合、読む人間のパフォーマンスを著しく低下させます。
プログラムのソースコードも同じです。
普段からPSR-2を順守するということは、<b>他人や未来の自分にきれいな "メッセージ" を書くということ</b>に他なりません。
少し優しくなった気になれます。

またComposerで取得できるパッケージでも同じことが言えます。
PHPはインタプリタ言語なので、利用したいComposerパッケージのソースコードを手元に取得することができます。
「何か挙動がおかしいな…」という時に、サクッと中身を見ることができます。
事実、`Laravel`もPSR-2に準拠しているため、困った時に役に立つかもしれません。

普段からPSR-2になれておくことで損することはないはずです。
ただし慣れていないことで苦労することはあるかもしれません。

## フォーマッターに依存してはいけない

エディタやIDEのようなフォーマッター付きのツールを利用している人は、ショートカットコマンド一発できれいに整形してもらえます。
これで解決…というのは甘い考えです。

例えば`PSR-2`からかけ離れた書き方をしている人が、フォーマッターを実行してしまうとどうでしょうか。
自分の書いたソースコードが、見る影もなく変わってしまうかもしれません。
動作自体は同じかもしれませんが、それはもはや自分の書いたソースコードではありません。
後で見返した時や修正する際に戸惑うことになるでしょう。

普段からPSR-2に慣れることが必要で、PSR-2をベースとした書き方で書く必要があります。

## PSR-2をベースとした書き方を習得する

1. 普段からソースコードを書く際はPSR-2に準拠するように書く。
2. 書き上げた後にIDEやエディタのフォーマッターでPSR-2に整形しなおす。
3. どの程度変わったのかを確認する。
4. 変わった箇所を次から意識する。

はじめの間は上記の1～4を反復しましょう。
慣れてきたらフォーマッターを利用せず、ソースコードをプロジェクトにコミットする際に自身で添削しましょう。
また、プレーンなPSR-2のフォーマットで、気に食わない箇所があれば随時アレンジしていくと良いでしょう。
（アレンジする場合は、ちゃんとアレンジ後の書き方の優れている点を考えましょう。）

# 結論: PSR-2は、これから本格的にPHPで開発を始める人に読んでほしいもの

PHPとの出会いがどんな形であれ、それを仕事としたりOSSを作成する際の登竜門のようなものです。
プライベートでPHPを触る人であれば正直全くと言っていいほど無視してもいいと思います。
ただ、ビジネスでの名刺交換やメールの文面のように、お作法として身に着けることで恥をかかずに済むかもしれません。

例えば以下のような人です。

- 仕事上でPHPを使い始める人
- PHPで作ったものを、インターネット上（ブログやGithub、コミュニティ等）で披露する人
- PHPのコーディング規約がない会社で開発を行う人

以上
OpenAIのGPT2で人工知能が記事を生成するメディアを作ってみた

<img width="1155" alt="スクリーンショット 2019-10-13 14.44.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264684/a0299143-2891-be9e-f725-bd0eba95f286.png">

#　ソースコード
文字と画像を生成し、wordpressのAPIにpostするソース
https://github.com/seiyatakahashi/airi-news-python


# 使用した技術
### news api
公式web: https://newsapi.org/
概要: 
世界中のネットメディアから記事データを収集してる、API

使用用途: 
Airi Newsに投稿する記事のタイトル、画像、内容などを一部使用しています。


### fast-style-transfer
github: https://github.com/lengstrom/fast-style-transfer
概要； 
fast-style-transferはtensorflowを使用して、画像を絵画風にしてくれます。

使用用途:
メディアの記事の画像をそのままAiri Newsにアップロードすると著作権侵害になってしまうので、メディアの記事の画像を一時的にダウンロードして、fast-style-transferで元画像を絵画風して生成。

参考URL: https://www.htmllifehack.xyz/entry/2018/06/06/210000

### gpt2
github: https://github.com/openai/gpt-2

概要； 
800万のWebページのデータセット（40GB)を使って学習されたモデルで、短い文章から、長い文章を生成してくれます。フェイクニュースが作りやすいので、学者などから危険だと言われています。

使用用途:
元記事の最初の140文字から、その後の1000文字〜2000文字の文字列を生成させています。

参考URL: http://cedro3.com/ai/pytorch-gpt-2/


# 自動化したフロー
![見出しを追加.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264684/c178a1a1-1d8c-03f2-429b-cf71a98401e0.jpeg)

#### 1.  news apiでデータを取得
NewsAPIで日本のビジネス、エンターテイメント、健康、スポーツ、テクノロジー、サイエンス分野のトレンド記事を取得

### 2. 記事を生成
GPT2は短い文章から1000文字〜2000文字の長い文章を生成するため、記事の内容の最初140文字を抽出。
GPT2は英語の生成のみ対応しているため、抽出した140文字を英語にgoogle翻訳APIを使用して、翻訳。
翻訳したデータをからGPT2で英語の記事を生成。
英語の記事データをGoogle翻訳APIで日本語にする。


### 3. 画像を生成
News apiから取得した記事の画像のURLから、サーバーに画像をダウンロード。
ダウンロードした画像から、fast-style-transferを使用して、画像を編集。

### 4. 記事と画像を投稿
Airi Newsはwordpressで構築しているため、wp rest apiを使用して、記事と画像をpostする。


# 反省点
GPT2は英語しか対応していないため、Google翻訳APIで日本語から英語、英語から日本語に変換するため文字が読みずらくなる。なので日本語を学習データにして、機械学習モデルを作っていかないといけない。

GPT2は過去の記事データを元に記事を生成しているので、ニュースのような新しいデータの生成にはあっていない。
Androidアプリ開発まとめ

##公式
https://developer.android.com/guide/

##EditTextの枠線
http://kuuur.net/tech/android/kadomaru
https://asky.hatenablog.com/entry/2016/05/04/194303
http://www.s-watanabe.work/article/461362131.html

##直線を描画する方法
https://qiita.com/rochefort8/items/70b99862b4d99d89308a

##フォントのサイズを変更
https://original-game.com/develop-android-app-8/

##タブ（画面下）
https://qiita.com/neonankiti/items/8f5a4b9039914192a948
https://www.gstatic.com/material/spec/jp/components.pdf
※公式ドキュメントを読んだ方が早い…

##Gitとの連携
https://blog.codecamp.jp/programming-androidstudio-github

##四捨五入とか
http://y-anz-m.blogspot.com/2018/04/kotlinmath.html

##タイトルバーを非表示にする

```diff:MainActivity.kt
- class MainActivity : AppCompatActivity() {
+ class MainActivity : Activity() {
```
https://qiita.com/Mocacamo/items/9849d5590d2109eaf4b8
※FragmentActivityにしないとFragmentが使えなくなるので注意

##タブでFragment切り替え
http://android.techblog.jp/archives/9965810.html
https://qiita.com/aki_design_1988/items/fc15c0b4caa20da04ddd
https://qiita.com/gitboku/items/515cc8e3e75ba2081950

##ActivityからFragmentの取得
supportFragmentManager.fragments[９９９９９９] as XXXXXXFragment


##RecyclerViewで一覧表を作りつつ間にヘッダー（セクション）を入れる方法
https://qiita.com/ijichi_y/items/0c1a463057f618e3eff3
https://qiita.com/cattaka/items/22e07f96b3d016548d92

##SharedPreferencesに出力したデータの確認
https://qiita.com/ochim/items/dc4d77d478e87c1449ad

##Kotlin のコレクション使い方メモ (Stream APIみないなの)
https://qiita.com/opengl-8080/items/36351dca891b6d9c9687#any
ローカルのGitリポジトリをGItHub等他サービスに丸ごと移植する

## はじめに

最近のGitHub等Gitサービスはとても高機能になっており、Wikiやsnipetでのノウハウシェア、CI/CDとの連携、issue作成によるタスク管理等開発に役立つ機能が満載です。更に大抵はrepositoryを作成する際に既存repositoryのimportが出来るようになっています。とても便利

ただ、こういったリポジトリの移行をしたいプロジェクトというのは、意外に外部公開していないリポジトリを使用していたりするため、 **サービスが提供しているimport機能が使えない！** ということが多々あります。なので、ローカルサーバーからもimportする方法をまとめました。
(他サービスに `fork` する感じ)

## スクリプト

[github.com/developer-kikikaikai/import_repository](https://github.com/developer-kikikaikai/import_repository) にLinux/Macで使えるスクリプトを作りました。使い方は以下

1. import先のリポジトリを作成しておく。
2. `servers.json` にimport元と先のrepository urlを(repository名除く)記載する。
3. `./import_on_unix.sh 　import元repository import先repository`

元repositoryの全branch、tagをimportします。default branchはmasterに設定しています。

例えば `ssh://localserver/repos/sample_local.git` を  `github.com/developer-kikikaikai/sample_github.git` に移植する場合は、

1. GitHubの`+` -> `New repository` でsample_github.gitを作成
2. `servers.json`をアップデート
3. `./import_on_unix.sh sample_local.git sample_github.git`

```json:servers.json
{
        "src": "ssh://localserver/repos",
        "dist": "git@github.com:developer-kikikaikai"
}
```

これだけ。

## 実際にやること

こんなイメージです。remoteのrepositoryを `git remote add` で追加して、元からfetch -> 先にpushする感じ
<img width="800" alt="repos.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252277/8a6a9cd9-4334-882f-60cf-ca95d4dc7543.png">


### `git remote add` で対象のリポジトリを登録する。

```
git remote add srctag ssh://localserver/repos/sample_local.git
git remote add disttag github.com/developer-kikikaikai/sample_github.git
```

### `git fetch` でbranch, tagを取得する

`git remote add` で設定した名前を指定することで、登録したrepositoryのbranch, tagが取得できます。

```
git fetch srctag 
```

### `git fetch` で落としてきたbranchをpushする

`git fetch` はremoteのbranch情報を取得しただけでlocal環境にはまだbranchが出来ていません。なのでまずbranchを作成します。

```
git branch local_branch_name srctag/remote_branch_name
```

後はbranchをpushするだけ。`:` でくくると `localのbranch名:remote側にpushするbranch名`という指定に使えます。

```
git push disttag local_branch_name:remote_branch_name
```

### `git fetch` で落としてきたtagをpushする

tagは `--tags` でまとめてpush出来ます。

```
git push ${DISTTAG} --tags
```

## 参考

Gitのイメージをつかむのに使えます: [GitとGitHub用語について、改正してデジ絵にしました！](https://twitter.com/098ra0209/status/1163424568544907265)
丸っとimportならこんな感じでシンプル: [Gitリポジトリの中身を、ブランチとタグも含めて別リポジトリにコピーする](https://qiita.com/1000k/items/2a5dcda5fd41f38fd5d5)
tagのpush [git で branch を push しただけじゃ tag は push されない話](https://qiita.com/aki_55p/items/530754ac6e861122f29b)
Pythonでクリックを自動化した


# 環境準備
Python2.7をダウンロード[^1]
[^1]: Python3でも動くのかどうかはわからない
https://www.python.jp/install/windows/install_py2.7.html

記載されている指示に従い
Windows x86-64 MSI installer
をインストール。

こちらの指示に従い、pipでpyautoguiをインストール。
https://qiita.com/hirohiro77/items/78e26a59c2e45a0fe4e3

動作確認も
https://qiita.com/hirohiro77/items/78e26a59c2e45a0fe4e3
に記載の通り、コマンドプロンプトからPythonを呼び出して、一個ずつimportして、まず座標の取得ぐらいをやってみる。

今回の自分の目的では簡単な確認だけで良いので

~~~ Python
import pyautogui
a = pyautogui.position()
a
~~~

を１つずつ打って、現在のマウスの座標が取得できるかどうか確認する。
確認できたら、Ctrl＋Z＋EnterでPythonを抜ける。

# クリック自動化
下記のコマンドでクリック動作をプログラム上に記載することができる。

~~~ Python
import pyautogui
pyautogui.click(x,y) # x,yにはpyautogui.position()で取得した値を自分で入れる
~~~

また、クリックとクリックの間に時間開けた方が良い場合には、

~~~ Python
import time
time.sleep(w) # wには待ち時間[秒]を入れる
~~~

# exe化
exe化について全くの初心者だったため、下記を参照。
https://techacademy.jp/magazine/18963

~~~ Python
pip install pyinstaller
~~~

のコマンドについては、VScode上のターミナルからは実行できず、Windowsのコマンドプロンプトからは実行できた。

~~~ Python
pyinstaller ファイル名.py
~~~

でexe化に成功。できたファイルは
C:XXX/Python27/Scripts/build/ファイル名/ファイル名.exe
に保存されている。

***

参考にしました
https://dropoutgs.com/python-operation-auto/
https://pyautogui.readthedocs.io/en/latest/mouse.html#mouse-clicks
https://www.python-izm.com/introduction/execution/
https://techacademy.jp/magazine/18963
RealSense Depth Cameraを使用した、擬似エコーロケーションシステム

この記事は、個人の主観による実験結果のため、学術的な価値はありません。

#はじめに
[前の記事ではチャンキングについて説明](https://qiita.com/pipe_render/items/7f53f2cbe2fe677811ec)を行いました。
では実際にチャンキングを使ったシステムをご紹介します。

#結論

RealSense Depth Cameraを使用した、疑似エコーロケーションシステム
![F51257B1-84CC-4567-84DA-8EF1E05F1300.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461091/6e2ea8b3-e7a2-0034-3929-2362a0339a68.jpeg)
[YouTube:疑似エコーロケーション](https://www.youtube.com/watch?v=1PQFr9jNUUw)

このシステムの長所はコストパフォーマンスが高いことです。
高価な機材を用いずに、より効果的にセンサーの出力を人間の行動に習慣づけることが可能です。

#説明

[VR内での疑似触覚の確認](https://qiita.com/pipe_render/items/cdf21f1d6b7cfd52f9bd)で、頭部を中心とした重要な臓器は無意識の身体的防御反応を持っていて、それがVR感覚の元になっているのではないか？という仮説を立てました。

VRChatをやっていて、とりわけ頭皮や髪の毛に対する刺激が物体との衝突判定と相性が良さそうだと感じました。

このシステムはそれを実証するためのものです。

1. RealSense D435iを使用して、Unityで解像度の低いDepth画像(以下の画像右側)を生成する。
![043A7202-38C3-49FE-B38C-352F49E1F8B3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461091/611e8634-40c0-d327-9fa2-ad0dd50cbbfb.jpeg)
(※最終的に生成したのは8x5のDepth画像です。)

2. Depth画像のうち中央の8x1のみチェックする。
3. 距離が閾値以内だった場合、アセットのUduinoで振動モーターをONにする。
![CF819304-73B3-4B4F-AC05-878F72B2FD39.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461091/32e54b0a-cd63-8690-dbf0-63f134b7c92d.jpeg)

#これから

私は以前、ロボットに付けた圧力センサーから背中のバッグに搭載したサーボーモーターを経由して疑似触覚を得るシステムを作成しました。
しかし、痛いくらいのモーターの刺激があってもあまり効果的なロボット操作の学習は行われませんでした。
![A51854A4-B12A-4DF6-AD1D-F14430D961CF.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461091/f6b62a33-427a-65fb-9387-b2e66e250e6b.jpeg)
![01F6ED2E-856F-4355-A89B-167F848DE31E.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461091/919baabe-905a-efdf-ce09-5520124c140a.jpeg)

今回作成したシステムを利用することで、ロボットの操作も効率的になるのでないかと期待しています。
チャンキングについて

この記事は、個人の主観による実験結果のため、学術的な価値はありません。

#はじめに

[前の記事](https://qiita.com/pipe_render/items/49a15c51e945849745b5)で説明した習慣の構築を応用すると、全く関係のない複数の作業をつなぎ合わせることができます。

#結論

‪[VRは脳をどう変えるか? 仮想現実の心理学   Jeremy Bailenson](https://www.amazon.co.jp/dp/4163908846/ref=cm_sw_r_tw_dp_U_x_1gRODbPRQ4JSB‬)でチャンキングという用語の説明がありました。

#説明

チャンキングについて

(“VRは脳をどう変えるか? 仮想現実の心理学”より抜粋)
> 例えば 、自転車の乗り方を初めて習ったときを思い出してほしい 。最初あなたはすべてのパ ーツを意識していたはずだ 。腕を意識し 、足を意識していた 。だが 、試行錯誤を繰り返して経験を積むに従い 、わずかなことだけに意識を集中すればよくなる 。さらにスム ーズに乗れるようになると 、自転車に乗るという作業を一つの大きな 〝チャンク （かたまり ） 〟として意識するようになる 。脳が効率的にその作業をこなせるようになるのだ 。最後には 、まったく意識せずに自転車に乗れるようになる 。

他にも、クロスモーダルという用語もあります。
[感覚間の相互作用を利用した バーチャルリアリティの技術と その可能性](https://www.iias.or.jp/wp/wp-content/uploads/46066c18ee96f6b3b6d8620405a7ebfb.pdf)

#これから
次に[チャンキングを利用した、疑似エコロケーションシステム](https://qiita.com/pipe_render/items/d0743476c2006745e6dc)を紹介します。
DjangoでHTMLファイルを表示させる (初学者がどこまで理解できるか(3))

#DjangoでHTMLファイルを読み込んでみよう
[Djangoでデータベース構築 (初学者がどこまで理解できるか(2))](https://qiita.com/nn24nHi/items/11886c33cbfee3a0d180) の続きです。
今回は、ビュー画面にHTMLファイルの内容を表示させてみます。
##まずはビューページがクラス毎に表示されることを確認

[DjangoでHello world (初学者がどこまで理解できるか(1))](https://qiita.com/nn24nHi/items/334b0b1a7e406186a386)　で、
`http://127.0.0.1:8000/myapplication`にアクセスした際に、"Hello world"を画面に表示させましたね。

今回は、`http://127.0.0.1:8000/myapplication/detail`など、`myapplication/`以下のURLにアクセスがあった際の、ビューページを表示させます。

```py
#### practice/myapplication/views.py

from django.http import HttpResponse

#index関数にHTTPリクエストがあったら、"Hello, world."のHTTPレスポンスを返す
def index(request):
    return HttpResponse("Hello, world.")

#detail関数にHTTPリクエストがあったら、"This is detail page."のHTTPレスポンスを返す
def detail(request):
    return HttpResponse("This is detail page.")
```

```py
#### practice/myapplication/urls.py

#path関数を呼び出し
from django.urls import path
from . import views

#URLに、「myapplication/」の後に何も指定しなければ、views.pyに記載の、index関数が呼び出される
#「myapplication/」の後に「detail」が指定されると、views.pyに記載の、detail関数が呼び出される
urlpatterns = [
    path('', views.index, name='index'),
    path('detail/', views.detail, name='detail')
]
```
開発サーバーを起動すると、`http://127.0.0.1:8000/myapplication/detail`にアクセスし、`http://127.0.0.1:8000/myapplication`と異なるビュー結果であることが確認できます。

##index.htmlを表示してみよう
ビューの表示の仕方はわかりました。
それでは続いて、HTMLファイルを表示するにはどうすればよいかを記載していきます。

```py
#### practice/myapplication/
$ mkdir templates
$ mkdir myapplication
$ touch index.html
```
アプリケーションのフォルダに、`templates`、`myapplication`、`index.html`を作成します。
views.pyに記載の内容と、htmlファイルの接続口が、`templates`フォルダです。

```html
<!-- practice/myapplication/templates/myapplication/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>This is text from HTML<h1>
  </body>
</html>
```
index.html には、文字列が表示できるようにしておきましょう。

```py
####practice/myapplication/views.py

from django.shortcuts import render

#templatesの内容を読み込んで、HttpResponseする、render関数を使用
def index(request):
    return render(request, 'myapplication/index.html')
```
views.pyを、上記のように書き換えてみましょう。
この状態で開発サーバーを起動し、`http://127.0.0.1:8000/myapplication`にアクセスして、index.htmlの内容が表示されればOKです。

##さいごに

次は、データベースの内容を、htmlに反映させたいと思います。
powershell でも slack のカスタム絵文字を一括ダウンロードする

---------- ↓追記 2019/12/07 ----------
slack のセキュリティが変更になったようで、以下のコードのままではエラーになるようです。 `$profile` に下記を加筆するなどして TLS 1.2 を有効化すれば引き続き問題なく動作します。

```powershell
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.SecurityProtocolType]::Tls12
```
参考： [PowerShell で GitHub に wget(Invoke-WebRequest) できない場合の対処方法（Qiita）](https://qiita.com/tikkss@github/items/4db7bec95a7337ca826d)
---------- ↑追記 2019/12/07 ----------

# 事前準備
前もって `emoji:read` のスコープでアプリケーションに権限を付与しておきます。

![201910132153310.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501098/de479d44-ffcf-c363-9a92-37faab1c4db7.png)

# 実行
取得した “OAuth Access Token” を下記コードの `xxxxxxxxxxxxxxxxxxxxxxxxxxxx` の部分と置き換えて実行すると、作業フォルダ内に “emojis” というフォルダが新規作成されてその中にカスタム絵文字が画像ファイルとしてダウンロードされます。

```get_slack_emoji.ps1
$check = Read-Host "'emojis' というフォルダを作成してすべてのカスタム絵文字をダウンロードします (y/n)"
if ($check -ne "y") {
    return
}
New-Item -Path "emojis" -ItemType Directory

$url = "https://slack.com/api/emoji.list?token=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
$res = Invoke-WebRequest $url
$json = $res.content | ConvertFrom-Json
$emojis = $json.emoji.PSObject.Properties
$failed = @()
foreach ($emj in $emojis) {
    $name = $emj.Name
    $emjUrl = $emj.value
    if ($emjUrl -match "^alias") {
        continue
    }
    $extension = $emjUrl -replace "^.+\.","."
    $fileName = $name + $extension
    try {
        Invoke-WebRequest $emjUrl -OutFile (".\emojis\{0}" -f $fileName)
        Write-Host ("downloading: {0}" -f $fileName) -ForegroundColor Cyan
    }
    catch {
        $err = "{0} from {1}" -f $name, $emjUrl
        $failed += $err
    }
}

$failed | ForEach-Object {
    Write-Host ("failed to download {0}" -f $_) -ForegroundColor Red
}
```

# ハマったポイント
`ConvertFrom-JSON` で JSON をオブジェクトに変換すると各キーがオブジェクトの `NoteProperty` になってしまい、そのままでは foreach のループで処理できません。
`Get-Member -MemberType NoteProperty` で対処はできるのですが、それだと絵文字の URL を抜き出すために `Definition` から余計な部分を取り除かなくてはならないのが気持ち悪いです。

```
TypeName   : System.Management.Automation.PSCustomObject
Name       : hogehoge
MemberType : NoteProperty
Definition : string hogehoge=https://emoji.slack-edge.com/XXXXXXXX/hogehoge/~~~~~~~~~~~~~~~.gif
```

調べ回ったところ、スクリプトで生成された自作オブジェクトのプロパティを配列として取得するには `.PSObject.Properties` という隠しプロパティを使用するとのこと。
タブ補完も効かないので見つからないわけです……

```
MemberType      : NoteProperty
IsSettable      : True
IsGettable      : True
Value           : https://emoji.slack-edge.com/XXXXXXXX/hogehoge/~~~~~~~~~~~~~~~~.gif
TypeNameOfValue : System.String
Name            : hogehoge
IsInstance      : True
```
参考：[Stack Overfrow: Iterate over PSObject properties in PowerShell
](https://stackoverflow.com/questions/37688708/iterate-over-psobject-properties-in-powershell)
Jetpack Composeを試す

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">後で試す / “Jetpack Compose binaries are now available to everyone : androiddev” <a href="https://t.co/HHUIxw8nCA">https://t.co/HHUIxw8nCA</a></p>&mdash; id:laiso (@laiso) <a href="https://twitter.com/laiso/status/1183259167508717573?ref_src=twsrc%5Etfw">October 13, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


TwitterでJetpack Composeが使えるようになったという情報が流れてきたので早速試してみる。

https://www.reddit.com/r/androiddev/comments/dggpqy/jetpack_compose_binaries_are_now_available_to/

上記のコードだけではエラーがビルドできなかったので、下記のコードを追加した。

```gradle:app>build.gradle
android {
    kotlinOptions {
        jvmTarget = '1.8'
    }
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-reflect:$kotlin_version"
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52019/05b61beb-9923-4521-a871-6c840cbcd45c.png" width=320 alt="jetpack_compose" />

動いた！
SQLのそもそも話　～SQLの設計思想～

##対象
SQLに触れて１年経ちました～！
知れば知るほど奥の深いSQLの世界で学んだことを共有できればと思います！

##結論
SQLと他言語の違いは以下の通りです。

| 言語 | グループ |
|:-----------|:------------|
|**SQL**|**集合指向言語**|
|Python|手続き型言語|
|PHP|手続き型言語|
|Ruby|手続き型言語|
|---|---|


手続き型言語にはさまざまな種類がありますが、
SQLはそれらと一線を画した**集合指向言語**なのです。

##手続き型言語と集合指向型言語の違いって何？

* 手続き型言語<br>多数の異なる手続きの実行順序を記述する。<br>言語思想的にいうと「データを繰り返して処理するために、ループ構文が簡単に書けます！！」という考え。<br>例）和食の大将が一品一品こだわって料理を作っていくイメージ。一品に対する調理手順が決まっている感じ。

* 集合指向型言語<br>指定範囲して同じ操作を一度に適用する。<br>言語思想的にいうと「ループ構文使わないで、繰り返し処理ができるように、データを定型化しよう！！」という考え。<br>例）洋食のシェフが厨房で大量の料理を作っていくイメージ。大将のように一品一品料理していたら時間がないため、食材Aと食材Bまでは同じ手順で調理、それ以外は別の手順で調理する感じ。

##最後に
僕の今回の学びは「SQLは他言語と設計思想が違う」ことです。
まだまだ見習いシェフですね。
やっぱりSQLって面白いです。
google: android messengerアプリ導入失敗

機材：Sharp SH-RM02
Android: 5.02
カーネル: 2.4.0: sharp@TG832612#2 Web Feb 2801:49.02 JST 2018

android アプリ導入で

Messenger をダウンロードに何回か失敗したが、インストールに進んだ。

>Messenger インストールできません。
もうお一度お試しください。それでも問題が解決しない場合は、問題を解決するための一般的な方法をご確認ください。

クリックすると

Play ストアでアプリの起動、読み込み、ダウンロードを行えない
https://support.google.com/googleplay/answer/7513003?hl=ja

手順 1: 安定した Wi-Fi 接続またはモバイルデータ接続があることを確認する

手順 2: Play ストアのキャッシュとデータを削除する

>これにより、余分なデータがない状態でアプリを起動でき、問題が解決される場合があります。
端末の設定アプリ 設定 を開きます。
[アプリと通知] 次に [アプリをすべて表示] をタップします。
下にスクロールして、Google Play ストア Google Play をタップします。
[ストレージ] 次に [キャッシュを削除] をタップします。
次に [データを消去] をタップします。
Play ストアをもう一度開き、再度ダウンロードをお試しください。

 設定 を開いた。
[アプリ]を開いた。[アプリと通知]はない。
[すべて]を開いた。[アプリをすべて表示]はない。
[Google Play ストア]を開いた。[ストレージ]はない。
[キャッシュを消去]した。[キャッシュを削除] はない。

キャッシュを消去しても少し残る。

[データを消去] 
合計　86.73MB
アプリ　82.85MB
データ3.88MB
 
>アプリのデータを削除しますか？
このアプリのすべてのデータ（ファイル、設定、アカウント、データベースを含む）が完全に削除されます。　キャンセル　OK

OKを押す。

キャッシュもデータも0になる。

手順 3: 端末を再起動する

Google Play での問題を解決するための追加手順
https://support.google.com/googleplay/answer/7512202

Google Play 開発者サービスからキャッシュとデータを削除する

>Android 搭載のスマートフォンやタブレットで、設定アプリ を開きます。
[アプリと通知] をタップします。
[ダウンロード マネージャー] をタップします。アプリが表示されない場合は、[アプリをすべて表示] または [アプリ情報] をタップします。
Google Play 開発者サービスを開きます。
[ストレージ] 次に [キャッシュを削除] をタップします。
[ストレージを消去] 次に [データをすべて消去] 次に [OK] をタップします。
Google Play ストア アプリ Google Play を開きます。
5 分ほど待ってから、もう一度ダウンロードをお試しください。


 設定 を開いた。
[アプリ]を開いた。[アプリと通知]はない。
[すべて]を開いた。[アプリをすべて表示]はない。
[Google Play 開発者サービス]を開いた。[ストレージ]はない。

[キャッシュを消去]した。[キャッシュを削除] はない。
35.72MBが12.00KBになった。

[容量を管理]を押し[データをすべて消去]を押した。
137MBが2.03MBになった。

ねんのために、再起動した。５分待った。

ダメだった。



# 参考資料(reference)
スマフォのデータ移行に必要な技術
https://qiita.com/kaizen_nagoya/items/81b8ba4f2fa5d5615887

四重苦：Wi-Fiが繋がらない。google playがloginできない。携帯が繋がらない。＜３解決＞電話出れない＜１未解決＞
https://qiita.com/kaizen_nagoya/items/cb208dae9a9b8fbedb91

# 文書履歴(document history)
ver. 0.01 初稿 20191013
ver. 0.02 追記 20191014
AndoroidStudioとXcodeのショートカット集

|アクション	|AndroidSutudio|Xcode
|---|---|---|
ファイル検索|Shift　二回押す|Command + Shift + O
コマンドの検索と実行	|Cmd + Shift + A|
コードの予測出力	|Cntl + スペース|
コードのフォーマット	|Option + Cmd + L|Ctrl + i
自動インポート	|Cntl + Option + O|
ドキュメントの表示	|F1|
メソッドの作成	|Cmd + N|
ソースへのジャンプ	|Cmd + ↓|
呼び出し元一覧	|Cntl + Option + H|右クリック⇨Find Call Hierarchy
行の削除	|Cmd + Backspace|
シンボル名による検索	|Option + Cmd + O|
ビルド	|Cmd + F9|Cmd + B
ビルドして実行	|Cntl + R|
デバッグ	|Cntl + D|
プロジェクトウィンドウの表示/非表示	|Cmd+ 1|
タブの切替	|Cmd + Shift + [|
デバッグ中の式の実行|Option + F8|デバッグエリアで po <式>   expression <式> = <値> 
作業中のブランチ名	|右下|左上の対角線のある□の中に○があるアイコンをクリックして出る画面の左上
同じファイルを開く|ファイルのタブを右クリック→SplitVerticaly|
GREP	|command + shift + F|command + shift + F
メソッド一覧|Cmd + F12|
メソッドの抽出|右クリック　→　Refactor　→　Extract　→　Function|
ウインドウの分割|ファイルのタブで右クリック→Split Vertically|右上の□□と＋が合わさったアイコンクリック
Nullの時演算子|:?|??
表示ファイルの戻る次へ||cmd＋ctrl＋←or→

プレーンテキストでの貼り付け　command + shift + F
参考：https://dev.classmethod.jp/smartphone/android/android-studio-basic/
#エラー解消 rails newできない Running `bundle update` will rebuild your snapshot from scratch, using only the gems in your Gemfile, which may resolve the conflict.

`$rails new`ができない｡



```ruby:エラーメッセージ
Bundler could not find compatible versions for gem "sprockets":
  In snapshot (Gemfile.lock):
    sprockets (= 4.0.0)

  In Gemfile:
    sass-rails (~> 5.0) was resolved to 5.1.0, which depends on
      sprockets (< 4.0, >= 2.8)

    rails (~> 5.2.3) was resolved to 5.2.3, which depends on
      sprockets-rails (>= 2.0.0) was resolved to 3.2.1, which depends on
        sprockets (>= 3.0.0)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.
         run  bundle exec spring binstub --all
Could not find gem 'sqlite3' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems.
```

Running`bundle update`と記載があるので
`$bundle update`したら進みました｡


```ruby:
Bundle updated!
Post-install message from chromedriver-helper:

  +--------------------------------------------------------------------+
  |                                                                    |
  |  NOTICE: chromedriver-helper is deprecated after 2019-03-31.       |
  |                                                                    |
  |  Please update to use the 'webdrivers' gem instead.                |
  |  See https://github.com/flavorjones/chromedriver-helper/issues/83  |
  |                                                                    |
  +--------------------------------------------------------------------+

Post-install message from sass:

Ruby Sass has reached end-of-life and should no longer be used.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:
  https://sass-lang.com/blog/posts/7828841

```



```
signedなしで符号付き演算

昔signedとかないVerilog 95での開発していた時、符号付き演算をどうしていたかを残しておこうと思う。
さすがに現代においてVerilog 95縛りで開発とかはないと思うのであまり需要はないかもしれないけど何かの参考になればと思う。

```verilog:verilog95で符号付き演算
module mult (a, b, out);
  input  a, b;
  output out;
  wire[ 7:0] a, b;
  wire[15:0] out;
  integer int_a, int_b;

  always(a)  int_a = {24{a[7]}, a}; 
  always(b)  int_b = {24{b[7]}, b}; 

  assign out = int_a*int_b;

endmodule
```

と、こんな感じで32ビットに拡張してintegerで符号付き演算ができる。integerがsigned（最上位ビットが符合ビット）だからである。ビット拡張で32ビットの巨大乗算器になってしまわないか心配になるかと思うけどそこは大丈夫。コンパイラがきちんと入出力のビット幅を見て適切なビットサイズの乗算器にしてくれます。わざわざ最上位ビットでif文で分けて…みたいな事をするよりよっぽど効率の良い回路になる。

さすがに最近の開発ではsigned使うだろうと思っていたら、つい最近signed使わずに正に最上位ビットを見て絶対値算出して、演算して、符号を戻して…とやっている人がいた。signed使わないのならせめてこの記事のようにintergerで符号計算してね。こんな記事書いても参考にならないだろうなと思っていたがまだまだ参考になる事もあるのね。。。
vbsの作法 その37

#概要

vbsの作法調べてみた。
練習問題やってみた。

#練習問題

中学生でも、使えるrpaツールを作れ。
メモ帳で、hello.txt作れ。

#環境

windows7 64bit

#方針

インタープリター方式
コマンドがある。
コマンドは'で始まる。
sendkeysを使う。sleep使う。

#命令文

```
'win メモ帳
hello warld^s
helllo.txt{tab}{tab}{tab}{enter}
```

#命令文の意味

アクティブウィンドウとして、メモ帳を使う。
^s    コントロール+S
{tab}　タブ
{enter}　エンター

#サンプルコード

```
Dim App6
Dim Appflg
Set App6 = Createobject("OHIcompo6.srv")
WScript.ConnectObject App6, "App6_"
App6.text = "'win メモ帳" & vbcrlf & "hello warld^s" & vbcrlf & "helllo.txt{tab}{tab}{tab}{enter}"
Sub App6_exit()
	Appflg = 2
End Sub
Sub App6_ok()
	Dim sh
	Dim m
	Dim lines
	Dim win
	Dim n
	Dim a(100)
	Dim b(100)
	Dim c(100)
	Dim d(100)
	Dim line
	Dim lin
	Dim i
	Dim j
	Dim v0
	Dim v1
	Set sh = CreateObject("WScript.Shell")
	lines = Split(App6.text, vbCrLf)
	For i = 0 To UBound(lines)
		If Left(lines(i), 4) = "'win" Then
			win = Mid(lines(i), 6)
			lines(i) = ""
		End If
		If Left(lines(i), 2) = "'{" Then
			v0 = i + 1
			lines(i) = ""
		End If
		If Left(lines(i), 2) = "'}" Then
			v1 = i - 1
			lines(i) = ""
		End If
	Next
	If v0 > 0 Then
		line = Split(lines(v0), ",")
		For i = 0 To UBound(line)
			If line(i) = "$a" Then
				For j = v0 + 1 To v1
					lin = Split(lines(j), ",")
					a(j - v0 - 1) = lin(i)
				Next
			End If
			If line(i) = "$b" Then
				For j = v0 + 1 To v1
					lin = Split(lines(j), ",")
					b(j - v0 - 1) = lin(i)
				Next
			End If
			If line(i) = "$c" Then
				For j = v0 + 1 To v1
					lin = Split(lines(j), ",")
					c(j - v0 - 1) = lin(i)
				Next
			End If
			If line(i) = "$d" Then
				For j = v0 + 1 To v1
					lin = Split(lines(j), ",")
					d(j - v0 - 1) = lin(i)
				Next
			End If
		Next
		For i = v0 To v1
			lines(i) = ""
		Next
		n = v1 - v0 - 1
	End If
	m = sh.AppActivate(win)
	If m Then
		For j = 0 To n
			For i = 0 To UBound(lines)
				If lines(i) = "" Then
				ElseIf lines(i) = "$a" Then
					sh.SendKeys a(j)
				ElseIf lines(i) = "$b" Then
					sh.SendKeys b(j)
				ElseIf lines(i) = "$c" Then
					sh.SendKeys c(j)
				ElseIf lines(i) = "$d" Then
					sh.SendKeys d(j)
				Else
					sh.SendKeys lines(i)
				End If
				WScript.Sleep 500
			Next
			'msgbox j
		Next
	Else
		MsgBox "ウィンドウが見つかりません。" 
	End If
	Set sh = Nothing

End Sub
Do
	WScript.Sleep(100)
	App6.ping
Loop until Appflg = 2
Set App6 = Nothing



```

以上。
httpサーバのcache動作を目視確認する

webサーバのキャッシュ動作を確認する。apache,nginxは同じ動作となった。

httpヘッダの技術解説。最近よくアクセスする。
[If-Modidied-Since](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/If-Modified-Since)
[If-None-Match](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/If-None-Match)


# キャッシュ動作の基本

初回アクセスで、コンテンツの最終更新日やハッシュ値がレスポンスヘッダで応答される

- Last-Modified:
- ETag:

２回目のアクセスで、リクエストヘッダにこの値を設定して自分が持っているキャッシュが最新かどうかを確認する。

- If-Modified-Since: Last-Modifiedの値
- If-None-Match: "ETag値" 
 
最新であれば（リクエストヘッダの設定値が妥当であれば）、 ```304 Not Modified```　が応答されるので、自分が持っているキャッシュを使う。

# 動作の目視
curlを使い、リクエストヘッダを指定してレスポンスヘッダを確認する。

## 結果サマリ

| No | If-None-Match<br>ETag | If-Modified-Since<br>Last-Modified | サーバ応答 |
| :---: | :--- | :--- | :--- |
| 1 | 一致 | 一致 | 304 Not Modified |
| 2 | 一致 | 指定なし | 304 Not Modified |
| 3 | 指定なし | 一致 | 304 Not Modified |
| 4-1 | 一致 | 古い | 200 OK |
| 4-2 | 一致 | 新しい | 304 Not Modified |
| 5 | 不一致 | 一致 | 200 OK |

## コマンド例
ETag値は```"```で囲む必要があるので引数自体は```'```で囲む。
```--header 'If-None-Match: "****"'```

```bash:

curl -L $URL -v -o $URL.html 2> $URL.log

(0)初回
URL=(your-url)
curl -L $URL -v -o $URL.html

> GET / HTTP/1.1
> Host: (your-url)
> User-Agent: curl/7.54.0
> Accept: */*
> 
< HTTP/1.1 200 OK
< Server: nginx
< Date: Sun, 13 Oct 2019 04:56:03 GMT
< Content-Type: text/html
< Content-Length: nnnn
< Connection: keep-alive
< Last-Modified: aaa, DD MMM YYYY hh:mm:ss GMT
< ETag: "****"
< Accept-Ranges: bytes

(1) Etag, If
curl -L $URL -v -o $URL.html --header 'If-None-Match: "****"' --header "If-Modified-Since: aaa, DD MMM YYYY hh:mm:ss GMT" 

(2) Etag
curl -L $URL -v -o $URL.html --header 'If-None-Match: "****"' 

(3) Etag, If
curl -L $URL -v -o $URL.html --header "If-Modified-Since: aaa, DD MMM YYYY hh:mm:ss GMT" 

(4-1) ETag, OLD-DATE
curl -L $URL -v -o $URL.html --header 'If-None-Match: "****"' --header "If-Modified-Since: aaa, DD MMM YYYY hh-:mm:ss GMT" 

(4-2) ETag, NEW-DATE
curl -L $URL -v -o $URL.html --header 'If-None-Match: "****"' --header "If-Modified-Since: aaa, DD MMM YYYY hh+:mm:ss GMT" 

(5) ETag, If
curl -L $URL -v -o $URL.html --header 'If-None-Match: "++++"' --header "If-Modified-Since: aaa, DD MMM YYYY hh:mm:ss GMT" 
```
僕が初学者にVimを薦める理由

# 対象となる読者

これからWeb系サーバーサイドエンジニアとして、開発の案件に携わっていく方、もしくは、そうありたいと考えている方。
Linuxコマンドを実務で使いこなせていない方。
プログラミングの勉強をする上で、エディタに迷っておられる方。

# 結論から言います

Vimを使えば、必然的にLinuxコマンドも使えるようになる！です。

### というかVimって？

超簡単に言うと、コンソール上で開けるエディタです。
今回はVimについての具体的な内容については記述しないです。
やってみようって方は自分で調べてみてください！

### Linuxコマンド？？？

Linuxコマンドとはコマンドライン（いわゆる黒い画面）でコンピュータに命令して、いろいろやり取りするためのものです。

実務でこれが使えない、慣れていないとかなり苦しい（仕事にならない）ことになります。
なので、学習中にこの辺りも慣れて使えるようにしてしまおうという話です。

### Vimは楽しい！

完全に主観なのですが、Vimは楽しいです。
特に最初のほうはゲームの操作方法を覚えるような感じでやれると思います。
なので、ゲーム好きな方は割とハマるのでは！と考えてます。

# 付随する利点

面接のときなどで、Vimを使ってますと言うと、高確率で「コイツ、やってるな！w」と思われます。いい意味でw
あと、作業中は黒い画面を叩くことが増えるので、端からみると仕事できそうな雰囲気を出せます。

あと、どのエディタを使っていてもViコマンドを使わざるを得ない状況はでてくるんですよね。その時にvimの操作を知っておけば簡単に仕事がこなせるようになります。

# 逆にデメリット部分を考える

とっつきにくい印象が強いです。
調べた方ならわかると思うのですが、けっこう癖強いです笑。
癖に慣れるまで一定期間は必要であると考えています。
ただ、一度慣れてしまえば、ほかのエディタに戻れなくなるくらい面白いエディタです。

# 終わりに

初学者ほどVimから始めるメリットは大きいと考えています。
とはいってもVimの導入からつまづく可能性もあるので、
どうしても導入がうまくいかない！って場合は、仕方ないこともあるのかなと思います。効率は下がりますが。
最悪、ツイッターでDMいただければ、何かしらレクチャーします。
SQLiteをバージョンアップする

vagrantの仮想マシン上でRailsアプリを起動したい。

下コマンドを打つと、
$rails server
$rails db:migrate 

これが返ってくる。
rails aborted!
Your version of SQLite (3.6.20) is too old. Active Record supports SQLite >= 3.8.
/home/vagrant/rails_lessons/myapp/bin/rails:9:in `<top (required)>'
/home/vagrant/rails_lessons/myapp/bin/spring:15:in `<top (required)>'
bin/rails:3:in `load'
bin/rails:3:in `<main>'
Tasks: TOP => db:migrate
(See full trace by running task with --trace)

SQLiteのバージョンが古いって返ってくる。3.8以上じゃ無いといけないっぽい。

この記事の通りにコマンドを打つと解決。
https://qiita.com/8zca/items/175efb0612070530d186

ついに通りました。
$rails db:migrate
System Verilogでの数値＜＝＞文字列変換まとめ

シミュレーションしてデータをファイルダンプする際にファイル名に連番で番号振ったり、逆に連番で名前の付いたファイルを順番に読み込みたいなど数値＝＞文字列の変換をしたい機会が結構あると思う。また、同様に文字列＝＞数値変換をしたい場合もあると思う。なので以下、System Verilogでの数値＜＝＞文字列変換の方法をまとめてみたので参考にされたし。

# 数値＝＞文字列変換
1の`$sformatf()`が一番お手軽だと思う。これが使えない場合は他を考えれば良いと思う。

### 1 `$sformatf()`で文字列出力

```verilog:$sformatf()
for(int i=0; i<10; i++)
  $display("%s", $sformatf("%d", i));  
```
`$sformatf()`は**S**tring **Format** **F**unctionの意味。functionなので返り値があり、formatされたstringを返す。
因みに返り値が無いtaskバージョンは`$sformat(<string>, <format>, <argument list>)`(**S**tring **Format**)。返り値が無いので引数にフォーマット後のstringを指定する。

### 2 stringの`itoa()`を使用

```verilog:itoa()
string str;
for(int i=0; i<10; i++) begin
  str.itoa(i);
  $display("%s", str);
end
```
### 3 ASCIIコードで処理

```verilog:ascii_code
byte code0 = "0";
for(int i=0; i<10; i++)
  $display("%c", code0 + i);
```

# 文字列＝＞数値変換
こちらは2のstringのatoi()が簡単なんじゃないかと思う。

### 1 `$sscanf()`で整数読み取り

```verilog:$scanf()
string number[10] = '{"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"};
int val;
for(int i=0; i<10; i++) begin
  $sscanf(number[i], "%d", val);
  $display("%d", val);
end
```
`$sscanf()`は**S**tring **Scan** **F**unctionの意味。
因みにstringからではなくファイルから読み取るバージョンは`$fscanf()`(**F**ile **Scan** **F**unction)。[これ](https://qiita.com/takeru0x5569/items/b054cdcf9e014f332edd#fscanf)とか参照。

### 2 stringのatoi()を使用

```verilog:atoi()
string number[10] = '{"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"};
for(int i=0; i<10; i++)
  $display("%d", number[i].atoi());
```
### 3 ASCIIコードで処理

```verilog:ascii_ccode
byte code[10] = '{"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"};
for(int i=0; i<10; i++)
  $display("%d", code[i] - "0");
```
【Rails】「link_to」でaタグ内に画像を設置したい

##開始タグ
画像リンクを設置したくて色々と調べたのでメモ。

##方法

###画像リンク
シンプルで`link_to`内のテキスト部分を`image_tag`に置き換えるだけ。

```ruby:sample.html.erb
  <%= link_to image_tag("img_logo.png"), "/" %>
```

###画像（imgタグ）にclass名をつける
その場合は引数を追加すればOK。

```ruby:sample.html.erb
  <%= link_to image_tag("img_logo.png", class:"image_switch"), "/" %>
```
※複数のクラス名をつけたい場合は、スペースを１個入れて書いてあげればOK

###dataから始まる属性値を追加したい
試しに`data-action`とそのまま追加してみましたが、エラーが出て上手くいかず・・・。
どうやら`data:`オプションで指定してあげれば`data-`以降の属性値は自由に設定できるみたい。

```ruby:sample.html.erb
  <%= link_to image_tag("img_logo.png", data: { test: "test_tekitou" }, "/" %>
```
というか単純に「`link_to`内でできることは、imgタグへ対しても適用できる」ということだよね。
慣れてきたらまとめよう、うん。

##追加で学んだこと
・`link_to`はヘルパーメソッドと呼ばれるもの。
・「ヘルパーメソッド」とは、ビューファイルに記述できるメソッドのこと。

・「ただリンクさせるだけならaタグ使えばいいんじゃ？」
→`link_to`を使用することでrailsに最適化したaタグをコンパイルしてくれるようですので、今後迷わず`link_to`を使用していこう。

##参考サイト
[Ruby on Rails5で画像に対してリンク設定 | サマンサ](http://samancha.com/archives/1486)
[[Rails 5][Rails 4] &#039;link_to&#039; APIドキュメント完全翻訳](https://techracho.bpsinc.jp/hachi8833/2017_04_25/39061)
[Railsでaタグのリンクを作成するlink_toメソッドの使い方 - Rails Webook](https://ruby-rails.hatenadiary.com/entry/20140727/1406439331)
Raspberry Pi から Slack に投稿する

# はじめに
Raspberry Pi から Slack に投稿できるようにする。
ゆくゆくは、ボタンを押したら投稿するようにしたいのだが、とりあえず普通に投稿できるようにする。

プログラムは Ruby を利用する。

# WebHook の準備

slackの左下にある「Add more apps」をクリックして、検索で「incomming webhook」と入れると出てくるので「インストール」をクリック
※）もうインストール済みなので「表示」と書かれている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/4117a305-ab44-5ea4-ad6a-7c454a6cb024.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/31be1ae9-530d-df4f-5cb9-7b5722e713fe.png)


ブラウザが立ち上がって Incomming WebHookの画面が出るので「設定の追加」を押す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/9b65b1d2-9c13-ede5-7678-d510f383ee58.png)

チャネルを選んで、「Incomming WebHookインテグレーションの追加」を押す
ここで選択するチャネルは何でもよいので、なにか選んでおく。（プログラムで、どのチャネルに投稿するか決められる）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/40557cf7-e7c3-b316-086b-69cccc914772.png)

Webhook URLが出てくるので、これをコピペしておく。


# Rasberry Piの確認
Raspberry Pi 3B+ を Full でインストールすると、Rubyもインストールされているはずだが、とりあえず確認する。

```bash
# ruby -v
ruby 2.5.5p157 (2019-03-15 revision 67260) [arm-linux-gnueabihf]
```

よしよし、インストールされている。

# slack-notifier のインストール
ruby のライブラリである slack-notifier を gem コマンドを利用してインストールする。
※）gem とは RubyGemsが公開しているライブラリのこと。

```bash
# gem install slack-notifier
Successfully installed slack-notifier-2.3.2
Parsing documentation for slack-notifier-2.3.2
Installing ri documentation for slack-notifier-2.3.2
Done installing documentation for slack-notifier after 1 seconds
1 gem installed
```


# slack に送信するプログラムを作る

いたって簡単。
WEBHOOKURL に Incomming WEBHook で取得したURL、CHANNEL に送信したいチャネルを記載する。

```ruby
require 'slack-notifier'

# slack Incomming Webhookの設定
WEBHOOKURL = "＜Incomming Webhook で取得したURL＞"
CHANNEL = "#＜送信したいチャネル名＞"
USERNAME = "＜Slackに投稿するユーザ名（表示されるユーザ名）＞"

# 通知内容
attachment = {
  color: "good",
  text: "送信完了！",
}

notifier = Slack::Notifier.new  WEBHOCKURL, channel: CHANNEL, username: USERNAME
notifier.ping '', attachments: [ attachment ]
```

ちなみに attachments の color にプリセットされているものは以下の3つ。

- good
- warning
- danger
【vue.js】 componentの中身(html)を親から子に送る【slotの使い方】


#１部分の転送
まずは親コンポーネントの外観から

```app.vue
<template>
  <div class="row">
    <div class="col-12 text-center">
      <app-component>
        <p>this is blue</p>
      </app-component>
    </div>
  </div>
</template>
<script>
import Comp from "./components/child.vue";
export default {
  components: {
    appComponent: Comp
  }
};
</script>
```

ここでタブの中子コンポーネントに贈りたいhtmlを書く。

(※ちなみにappComponentがapp-component担っているが、
htmlは大小文字を識別できないので大文字を-として互換性があるらしい)


```vue
<app-component>
   <p>this is blue</p>
</app-component>
```


```child.vue
<template>
    <div>
        <slot></slot>
    </div>
</template>
```

以下のslotの部分で上のｐ要素を受け取っている。

```vuejs

<slot></slot>
```

#複数転送したいとき

```app.vue
<template>
  <div class="row">
    <div class="col-12 text-center">
      <app-component>
        <p slot="slotfirst">this is blue</p>

        <div slot="slotsecond">
           <button class="hogehoge"></button>
        </div>
      </app-component>
    </div>
  </div>
</template>
<script>
import Comp from "./components/child.vue";
export default {
  components: {
    appComponent: Comp
  }
};
</script>
```

ポイントはここslot=""でslotの名前を決めている事がわかる

```vue
<p slot="slotfirst">this is blue</p>

<div slot="slotsecond">
     <button class="hogehoge"></button>
</div>
```



指定したslotはnameで呼び出せる

```child.vue
<template>
    <div>
        <slot name="slotfirst"></slot>
        <slot name="slotsecond"></slot>
    </div>
</template>
```
過去のコミットのコメントを修正する

いつも忘れるので個人メモ。操作はVimやターミナルなどお好みで。

# 過去のコミットのコメントを修正する
## 1. 変更対象のコミットを選択する
コミットIDを指定してrebaseを実行する。
※変更対象が```直前のコミット```の場合、このステップはスキップしてOK。

```terminal
$ git rebase -i <コミットID>
```

コミットの一覧が表示される。
コメントを修正したいコミットIDの行の```pick```の文字を```edit```に変更し、保存・終了。

```terminal
pick aaaa1234 hogehoge comment
↓
edit aaaa1234 hogehoge comment
```

## 2. コメントを修正する
```terminal
$ git commit --amend
```

コメントの編集画面が表示される。
コメントを修正し、保存・終了。

```terminal
hogehoge comment
↓
hogehoge comment new
```

## 3. rebaseのeditを完了する(変更のFIX)
```terminal
$ git rebase --continue
```

## (参考)rebaseを中断する
```terminal
$ git rebase --abort
```
macOS Catalinaでnode.jsをインストール

#Catalinaにしたらnode.jsが入らない…？

MacBookのクリーンインストール試みたところ、新しいOSが。
新macOSのCatalinaをインストールし、もろもろアプリもインストール。
いつものようにgulpを使おうと思いnode.jsをインストールし始めたら、、

あれ？

なんかいつもと違う？？


#macのデフォルトがbashではなくzshになりました。
Apple公式サポートサイト（英語）
https://support.apple.com/en-ca/HT208050

どういうこと？






#node.jsの導入

私はgulpで開発環境を作るため、この書籍を参考にしました。

####gulpではじめるWeb制作ワークフロー入門
https://nayucolony.github.io/gulp-support/
gulpの導入について丁寧に説明されており、terminalでの作業に慣れていない私でもわかりやすい良書です。

Catalinaでも、こちらの書籍にある手順通りにnode.jsをインストール。
しかし、nodebrewではnode.jsのバージョンが表示されるのに
実際にはnode.jsがインストールされていないという現象が発生。

↓一見成功しているように見える

```
$ nodebrew list
v10.16.1
 
current: v10.16.1
```
↓しかし、node.jsはインストールされていない。

```
$ node -v
zsh: node: command not found
```



#HomebrewでインストールしたnodebrewではNode.jsやnpｍが使えない
全く同じ現象が、こちらのサイトで紹介されていました。

**HomebrewでインストールしたnodebrewではNode.jsやnpｍが使えない - webdev**
http://webdev.jp.net/homebrew%e3%81%a7%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e3%81%97%e3%81%9fnodebrew%e3%81%a7%e3%81%afnode-js%e3%82%84np%ef%bd%8d%e3%81%8c%e4%bd%bf%e3%81%88%e3%81%aa%e3%81%84/


Homebrewからインストールしたnode.jsを一応アンインストール

```
$ nodebrew uninstall v10.16.1
$ nodebrew clear v10.16.1
```

nodebrewもアンインストール

```
$ brew uninstall nodebrew
```

curlコマンドでnodebrewをインストール

```
$ curl -L git.io/nodebrew | perl - setup
```

Node.jsをインストール（v〇〇の部分は任意のバージョンを入力）

```
nodebrew install v10.16.1
```

node.jsがインストールされているか確認

```
$ node -v
v10.16.1
```
node.jsのインストール完了！


#まとめ
正直、bashとzshの違いについてはよく分かっていません。。
一応、私の環境では上記の流れでgulp環境が作れました。