OmniAICreator/Qiita-1.07M huggingface dataset:
Redmineの検証・開発環境を構築する


[前の記事](https://qiita.com/furandon_pig/items/aaf1fb35293de293f40c)でRedmineの検証・開発環境が必要になったため、必要な手順をメモしてみました。インストール手順はRedmine.JPの[Blog](http://blog.redmine.jp/articles/3_4/install/centos/)で紹介されていますが、このQiitaの記事では小さなRedmine開発環境を手早く構築することに主眼をおいた手順になっています。

## 動作環境のバージョン

動作環境は[前の記事]()と同じ環境になります。

 * CentOS-7
 * Ruby2.6.5p114
 * MariaDB 5.5.64
 * Redmine-4.0.4(2019/10/06時点での最新版)

## 必要なパッケージのインストール

Rubyのインストール(というかrbenvによるRubyビルド)とRedmineの動作に必要なパッケージをあらかじめインストールしておきます。

```sh
$ # rbenvでRubyをインストールする際に必要となるパッケージ。
$ sudo yum install -y git bzip2 gcc make openssl-devel readline-devel zlib-devel sqlite sqlite-devel
$
$ # Redmineをインストールする際に必要となるパッケージ。
$ sudo yum install -y ImageMagick ImageMagick-devel mariadb-server mariadb-devel subversion
```

## Rubyのインストール(rbenv)

最新版のRubyを使用したいので、CentOSのパッケージからではなくrbenvを利用してRubyをインストールします。

```sh 
$ # rbenvのセットアップ
$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
$
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
```

rbenvの準備が完了したのち、以下の手順でRubyをインストールします。今回のケースではRuby-2.6.5を選択しています。

```sh 
$ # インストール可能なRubyのバージョンを確認する。
$ rbenv install --list
  ...中略...
  2.6.5
$
$ CONFIGURE_OPTS="--disable-install-doc --disable-install-rdoc" rbenv install 2.6.5
$ rbenv global 2.6.5
$ rbenv version
2.5.0 (set by /home/seigo/.rbenv/version)
```

## データベースの設定(MySQL/MariaDB)

データベースはMySQL(ここではMariaDB)を使用します。 `/etc/my.cnf` の設定手順は以下の記事に記載しています。具体的には文字コードをUTF-8に変更するという手順になります。

 * [書籍「SQL実践入門」のサンプルコードをMySQLとPostgreSQLで試してみる](https://qiita.com/furandon_pig/items/b3489fcf1169ec736c0f#mysql)

MariaDBを起動したのち、Redmineが参照するデータベースを作成します。

```sh 
$ sudo systemctl start mariadb.service
$ mysql -u root -p 
Enter password: 
...中略...
MariaDB [(none)]> CREATE DATABASE redmine CHARACTER SET UTF8 ;
Query OK, 1 row affected (0.00 sec)
MariaDB [(none)]> \q
Bye
$ 
```

## Redmineのインストール

今回は他のPCからもRedmineにアクセスしたい＋閉じたネットワークでの検証用のみであるため、いったんfirewalldを停止しておきます。

```sh 
$ sudo systemctl stop firewalld
```

以下の手順でRedmineのソースコード取得と必要な設定を行います。

```sh 
$ svn co https://svn.redmine.org/redmine/tags/4.0.4/ ./redmine-4.0.4
$ cd redmine-4.0.4
$ cp config/database.yml.example config/database.yml
$ bundle install --without development test --path vendor/bundle
$ bundle exec rake generate_secret_token
$ RAILS_ENV=production bundle exec rake db:migrate
$ RAILS_ENV=production REDMINE_LANG=ja bundle exec rake redmine:load_default_data
```

Redmineを起動します。起動後 [http://localhost:3000/](http://localhost:3000/) でRedmineにアクセスできます。

```sh 
$ RAILS_ENV=production REDMINE_LANG=ja bundle exec rails server
```

インストール後の初期設定は以下を参照してください。

 * [Redmineを使い始めるための初期設定](http://redmine.jp/tech_note/first-step/admin/)(Redmine.JPドキュメント)

## まとめ

Redmineの検証・開発環境の構築手順を紹介しました。この手順で手元に小さなRedmine環境が構築できるので、ちょっとした検証だけでなく、Redmineの REST APIやテーマの作成、機能追加の実験といった用途にも応用できそうです。

## 参考URL

 * [Redmine(リポジトリ)](http://svn.redmine.org/redmine/tags/)
 * [Redmine 3.4をCentOS 7.3にインストールする手順](http://blog.redmine.jp/articles/3_4/install/centos/)
造型基礎I

造型基础的出发点在于，
对美术设计各专业全学科的共通基础的技能指导。
那么就迎来了基础是什么的课题。
有人觉得是，首先要观察事物然后画下来，这是基础。
还有人觉得在画之前，如何画好一根线，如何涂色，这是基础。
如果站在设计的角度上，这样的基础和实际的设计又是如何建立关联的呢。

結局、全ての人に通用する共通の基礎などというものはなく、基礎とは、
百人百様の考え方、とらえ方があり、その目指す方向によって、いく通りにも考えられるということである。
结果，适用于所有人的共通的基础是不存在的，基础是，百人百样的思维方式和学习方式。
根据每个人不同的方向，有各种各样的不同的道路可循。

絵を描いたり、デザインをしたりする上で、必ずしも直接的に結びつくものではないが、それぞれの人がその実技（演習）をすることによって、今までの粋にとらわれない様々の可能性を見つけてくれたら良い、というのがこの授業科目の開設意図である。
在做这些画画和设计的作品时，可能不是直接与作品相关的，
可是不同的人在这创作中，如果能够认识到至今未能到达纯粹的阻碍在哪里，
这是这个科目开设的最终意义。
Reactの開発環境構築はこれをやってればいいと思う(2019)

# Reactの雛形を作成
```bash
npx create-react-app my-app --typescript
cd my-app
```

# git add時にprettierで自動フォーマットする設定

[prettier](https://prettier.io/)はtypescriptのフォーマットを行うライブラリです。
後からコードを読む際に視認性が高まるため設定しておくことをおすすめします。

```bash
yarn add --dev husky lint-staged prettier
```

`package.json`の末尾に追加

```json:package.json
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write",
      "git add"
    ]
  },
  "prettier": {
    "singleQuote": true
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
```

# Chromeで動かす際にvs codeでデバッグできるようにする
vs codeで`Debugger for Chrome`の拡張をインストールする

インストール後、`launch.json`を作成

```json:.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}
```
`F5`で実行時にChromeが起動し、vs codeで張ったブレークポイントで止まってくれる

# styled-componentsのセットアップ
昔はjsx(tsx)ファイルとcssを分けて記載するCSS Modulesが流行ってましたが、
現在(2019)はjsx内にまとめて書いてしまえるCSS in JSが流行っているようです
Reactでコンポーネントを作らないことはないと思うので、必須環境としてセットアップしましょう

[styled-components](https://www.styled-components.com/)は現在(2019)最も人気のあるCSS in JSのライブラリです

```bash
yarn add styled-components @types/styled-components
```

vs codeで`vscode-styled-components`の拡張をインストールする
シンタックスハイライトや補完ができるようになります

# プロジェクト毎に設定するか選択

銀の弾丸ではないので用法用量を守ってお使いください

- Atomic Design
    - コンポーネントの分割単位や粒度で悩んでる人
    - Containerがファットなんだけどって人
- css-modules
    - javascriptの中にcss書くのヤダって人
    - 使ってるCSS フレームワーク(UI コンポーネント)の都合で仕方なく使う人
- [Redux](https://react-redux.js.org/introduction/quick-start)
    - React標準の[Hooks](https://ja.reactjs.org/docs/hooks-state.html)だけでは制御できない複雑なステートを抱えてる人
- React コンポーネントセット
    - カッコいいデザインのサービスを早く作りたい人
    - [material-components-web-react](https://github.com/material-components/material-components-web-react)
    - [Material-UI](https://material-ui.com/)
    - [React Toolbox](http://react-toolbox.io/)
    - [React Bootstrap](https://react-bootstrap.github.io/)
- Router
    - ページ遷移のあるサービスを開発している人
    - [React Router](https://reacttraining.com/react-router/web/guides/quick-start) (昔使ってた人はv4から結構変わったよ)
    - [Reach Router](https://reach.tech/router)

# さぁ開発だ！！
Navigation+ToolbarでOptionsMenuを出すにはsetSupportActionBarの位置に気をつける

# 概要
JetpackのNavigationの話です。
https://developer.android.com/guide/navigation

タイトルどおりですが、NavigationでToolbarを使ってOptionsMenuを出すときにちょっとしたことでつまずいたので残しておきます。

Navigationのバージョンは以下です。

```gradle
implementation 'androidx.navigation:navigation-fragment-ktx:2.1.0'
implementation 'androidx.navigation:navigation-ui-ktx:2.1.0'
```

# 構成
MainActivityにToolbarがあります。

表示する画面はFragmentで作っており、2つの画面があります。
1つめのFragmentのToolbarには、タイトルだけ表示されています。
2つめのFragmentのToolbarには、1つめのFragmentに戻るnavigationIconとOptionsMenuがあります。

ToolbarのセットアップはActivityで、OptionsMenuのセットアップは2つめのFragmentで行っています。

<img width="300" alt="1つめのFragment" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20276/8a04b898-216d-b952-f910-53d785fbd952.png">
<img width="300" alt="2つめのFragment" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20276/3c983ce2-ab98-eaac-d847-de77939628aa.png">

# Toolbarのセットアップ

```kotlin:MainActivity.kt

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        setupToolbar()
    }

    private fun setupToolbar() {
        val navController = findNavController(R.id.nav_host_fragment)
        val toolbar = binding.toolbar

        // (1) OptionsMenuを出すために必要
        setSupportActionBar(toolbar)
        // (2) タイトル設定、Up navigateボタンのために必要
        toolbar.setupWithNavController(navController)
        // (2)はこちらの書き方でもOK
        // NavigationUI.setupWithNavController(toolbar, navController)
    }
}
```
上記のようにActivityでToolbarの設定を行うと、期待通りの挙動になります。

## OptionsMenuが出ない

```kotlin:

private fun setupToolbar() {
        val navController = findNavController(R.id.nav_host_fragment)
        val toolbar = binding.toolbar

        // (2) タイトル設定、Up navigateボタンのために必要
        toolbar.setupWithNavController(navController)
        // (2)はこちらの書き方でもOK
        // NavigationUI.setupWithNavController(toolbar, navController)
    }
```
setSupportActionBar(toolbar)を呼ばないと、OptionsMenuが出ません。

## Up navigateボタンが効かない

```kotlin

private fun setupToolbar() {
        val navController = findNavController(R.id.nav_host_fragment)
        val toolbar = binding.toolbar

        // (2) タイトル設定、Up navigateボタンのために必要
        toolbar.setupWithNavController(navController)
        // (2)はこちらの書き方でもOK
        // NavigationUI.setupWithNavController(toolbar, navController)
        
        // (1) OptionsMenuを出すために必要
        setSupportActionBar(toolbar)
    }
```
このように、setupWithNavControllerの後に、setSupportActionBar(toolbar)してしまうと、Upボタンは表示されているのに効きません。

なお、Toolbarを使用する場合は、Navigationがナビゲーションボタンのイベントを自動で処理してくれるため、onSupportNavigateUp()をオーバーライドする必要はありません。

# サンプルコード
下記にコードがあります。
https://github.com/iiinaiii/UI-Samples/blob/master/app/src/main/java/com/iiinaiii/uisamples/ui/MainActivity.kt
【HTML】YouTubeの動画を埋め込む方法

#iframeを用いたYouTube動画の埋め込み

##チュートリアル
とりあえず以下のコードをご自身のHTMLソースコードに埋め込んでみてください

```html:sample.html
<iframe width="560" height="315"
src="https://www.youtube.com/embed/vdxoDyNAoH0
?loop=1
&playlist=vdxoDyNAoH0
&autoplay=1
&mute=1
&rel=0
&modestbranding=1"
frameborder="0" allowfullscreen>
</iframe>
````

このようにYouTubeの動画がページ内に埋め込まれているかと思います．
![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377231/20e10611-b1ab-314f-e9b2-6d9edadffd28.gif)


##リクエストパラメータ

ではこの各種リクエストパラメータについて解説していくとしましょう．

|||
|---|---|
|loop|動画を繰り返し再生させます|
|playlist|次の動画のVIDEO_IDを入れます．<br>```loop```で同じ動画を繰り返す場合はその動画のVIDEO_IDをそのまま入れます．<br>VIDEO_IDは```https://www.youtube.com/embed```の後ろの部分です．|
|autoplay|ページを開いたときに自動で再生します．<br>つまり再生ボタンを押す必要がありません<br>ただし```mute```を1に設定しておく必要があります|
|mute|再生時の音声をオフにします<br>ただし操作ボタンを用いて音声の調節は可能です|
|rel|関連動画の表示を行います|
|modestbranding|右下にあるYouTubeのロゴを非表示にします|
|frameborder|フレーム（外枠）をつけます|
|allowfullscreen|フルスクリーンモードでの再生を許可します|



YouTubeの動画を埋め込むためのタグは以下の手順で作成できます．

まず埋め込みたいYouTubeの動画ページを開きます．
（この例ではhttps://www.youtube.com/watch?v=vdxoDyNAoH0)

**共有**をクリックします

<img width="873" alt="スクリーンショット 2019-10-13 10.35.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377231/9da38b5c-4008-8a6a-fe0e-cb47a18f2c01.png">

**埋め込む**をクリック

<img width="831" alt="スクリーンショット 2019-10-13 10.36.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377231/290b990b-062e-94c2-83a1-e456beead625.png">


するとこのような動画を埋めこむためのタグが表示されるので必要な部分をコピペします．
迷ったらとりあえず全部コピペしちゃいましょう．
<img width="1145" alt="スクリーンショット 2019-10-13 10.36.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377231/54507265-71f5-163f-3f37-21c449f3d78e.png">


ちなみに手元にあるmp4などの動画ファイル等は[こちらの記事](https://webliker.info/52510/)を参考に```<video>```タグ使えば同様に埋め込みが可能です．
簡単なのでこちらは省略します．

##参考
[YouTube参考１](https://dekiru.net/article/15155/)
[YouTube参考２](https://tumuguito.com/archives/822.html)
Unityでの.fbxモデルのインポートとその後の処理

Qiita初投稿です。
超基礎的な内容な上、自分用のメモですので、あくまで参考程度に...
環境はmacOS Mojave var10.14.6、unityのバージョンは2018.4.0f1です
##unityでのモデルデータの取り扱い
流れは以下の通りです

1.unityに.fbxファイルをインポートする
2.unity側にモデルがインポートされているのを確認する
3.必要に応じてテクスチャをインポートしてマテリアルを作る
4.マテリアルをモデルにアタッチする

##1.unityに.fbxファイルをインポートする
普通にインポートするだけです。

##2.unityのAssetの欄にモデルがあることを確認する
ここでモデルの色が全身白でも慌てないこと
次のステップでマテリアルを生成してアタッチすればおk(これに気づくまでにめちゃめちゃ時間かかった)

##3.テクスチャをインポートしてマテリアルを作る
調べたところ、基本的に.fbxファイルにはテクスチャデータは含まれていないそうです(含めるためにはblenderとか使ってあーだこーだしないといけない)
僕はblenderにまだ慣れていないので、unity側でマテリアルデータを作ることにしました。

マテリアルデータを新規作成してそのマテリアルのshaderを "unlit/" から　Texture、Transparent、Transparent Cutout の中から選んでください。(custum shaderでテクスチャを指定してもいいですが、それできる人はこの辺りわかるはず)

Transparentに設定することでテクスチャの透明部分も反映してくれます(1敗)

##4.作成したmaterialをモデルのMatrialsにアタッチする
インポートしたモデルを選択するとインスペクターに以下のようなタブが現れます
<img width="275" alt="スクリーンショット 2019-10-13 13.22.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308442/7f20c3b4-d743-0a0c-2c57-8e82f977430e.png">

その中のMatrialsタブを選択すると以下のようになります
<img width="275" alt="スクリーンショット 2019-10-13 13.21.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308442/2c259e7b-9894-87dd-ffec-2a0e78860992.png">

On Demand Remapというところにマテリアルを設定していきます。複数存在する場合はblenderなどモデルの出力に使ったソフト上のマテリアル情報を見ながら合わせていきましょう。

##まとめ
今回はunityでのfbxモデルのインポートとテクスチャ設定を行いました。
基本的なことですが、僕にとっては知らないことでしたのでまとめました。
~~これでVRで嫁といちゃつける~~

参考
http://nn-hokuson.hatenablog.com/entry/2016/06/29/220310
mecab辞書を使うNLPモデルをCloud Runでseverlessでサクサクと動かす！

# 問題
- NLP (自然言語処理)のモデルを作ってもらったが、`mecab-ipadic-neologd`という[mecabの拡張辞書]  (https://github.com/neologd/mecab-ipadic-neologd)がスーパー重い (3 GB以上?)
- しかし、サービスの特性上新しい用語を考慮した方が良いと判断し、`mecab-ipadic-neologd`は外せない
- 人手足りないので、できればクラウド上 (現時点ではGCP) でserverlessで運用したい

# アプローチ
- 先人の知恵を借りてmecabのweb APIをまずforkする。
(`matsulib`さん、ありがとうございました！！)
    - [Github] (https://github.com/matsulib/mecab-service)
    - [Qiita記事] (https://qiita.com/matsulib/items/5249b5f3e832f0311806)
- 上の`mecab-ipadic-neologd`辞書APIをGCPのCloud Run (serverless container deploymentできちゃうもの。GCPで現在ベータ版。AWSでいうとFargate)にデプロイしておく。
    - PORT番号は必ず変更するように！
- 残りのモデルの部分は、辞書部分から切り離して、Dockerfileを書いてコンテナにした上で、Cloud Runにデプロイ
    - ついでに `requirements.txt` を綺麗にしておく (コンテナのイメージサイズを小さくしたいので、


# Cloud Run
ちょうど今年 (2019年)のGoogle Cloud Next 19 Tokyoで取り上げられ始めた印象。
ポート番号さえ変更しておけば、簡単にデプロイできた。

もととなっているのは [Knative](https://knative.dev/) というGoogle+Pivotalなど各社がやっているOSS. Kubernetesをベースとしたサーバプラットホーム。Auto-scalingしてくれるので、リクエストがないときは料金が発生しないし、リクエスト数に合わせてコンテナ数を調整してくれる。

東京リージョンでも使えます！

詳しくは[Cloud OnAir Cloud Run Deep Dive (日本語、公式)](https://www.slideshare.net/GoogleCloudPlatformJP/cloud-onair-cloud-run-deep-dive-gcp-2019912?qid=0f7e7123-3ff2-4ab3-98e8-c5aeb66075df&v=&b=&from_search=1) で


## 利用フロー
Dockerfileを含めたrepositoryを更新 ->  (optionとしてCloud Buildで自動ビルド) -> Google Container Registryにimageをpush -> Google Cloud Runでデプロイされる

## 注意点
- ContainerはGoogle Cloudの [Container Runtime Contract] (https://cloud.google.com/run/docs/reference/container-contract) に準拠しなければならない。
    - ここに書いてある"Listening for requests on PORT"は設定しておかないとcontainerがスタートしない。
    - 具体的に何をやったかというと、server.pyを以下のように変えただけ。
    
```
# BEFORE
app.run(host='0.0.0.0', port=5000, debug=True) 

# AFTER
app.run(host='0.0.0.0', port=int(os.environ.get('PORT', 8080)), debug=True)
```

- Google Container Registryは無料枠ないかも？しかし料金体系はCloud Storageと一緒で非常に安価

## Sample code
 `gcloud` 上で `Docker`を認証しておく。

```
gcloud auth configure-docker
```
先ほど説明したように `mecab-service/flask-mecab/server.py`にPORT関数を入れておく。
> app.run(host='0.0.0.0', port=int(os.environ.get('PORT', 8080)), debug=True)

次にlocalでbuildして走らせてみる。

```
cd flask-mecab && docker build -t mecab-service:test .
docker run -p 5000:8080 -it mecab-service:test
```

ここで、`curl`で適宜リクエスト投げて、ちゃんとレスポンスが返ってきたらOK.
良さそうだったら、GCRにpushしちゃう。
(ここは、必要があればCloud Buildで自動ビルトしても良い)

```
docker build -t gcr.io/$PROJECT_ID/$IMAGE_NAME .
docker push gcr.io/$PROJECT_ID/$IMAGE_NAME
```

Cloud Runにデプロイする。

```
gcloud beta run deploy --image $IMAGE_ID --region $REGION --platform managed
```
サービス名とか聞かれるかもしれないけど、こだわりなければそのままにしておく。
これでデプロイが成功したら、URL (https) が出力されます。

*注意：デフォルトでは非公開です。
公開APIにしたければ、Cloud Runのconsole上でサービスを選択し、右のパネルで `allUsers` を `Cloud Run Invoker` として権限を与えること。
(or: deploy時に `--allow-unauthenticated` フラグをつける)
[SwiftUI] NavigationLinkの遷移先を動的に変更する

https://qiita.com/noppefoxwolf/items/c10c50cbefb7896107fd
で解説したように、型消去を利用することで遷移先の画面を事前に指定することなく動的に与えることが出来ます。
今回はNavigationLinkでも同様のことが出来たので解説します。
一点、NavigationLinkはButtonの機能も有しているため扱いが多少異なります。
このエントリでは、以下のようにEmptyViewを入れることでNavigationLinkをほぼ純粋な画面遷移のObserverとして利用しています。


```swift
NavigationLink(destination: destination, tag: tag, selection: $selection) {
    EmptyView()
}
```

NavigationLinkはsheetと違い、identifarableによって遷移先を変更する機能は無いのですが遷移事態を要求することが出来るイニシャライザが存在します。

```swift

public init<V>(destination: Destination, tag: V, selection: Binding<V?>, @ViewBuilder label: () -> Label) where V : Hashable
```

tagで指定した値がselectionに流れることで、destinationをpushするような挙動になります。
これを利用して、selection代入時に型消去したdestinationを更新することで一つのNavigationLinkを複数の箇所やボタン以外から制御できるようになります。


```swift
struct ContentView: View {
    private let defaultTag: Int = 8888
    @State var destination: AnyView? = nil
    @State var tag: Int? = nil
    
    var body: some View {
        NavigationView {
            VStack  {
                Button(action: {
                    self.destination = AnyView(Text("child 1"))
                    self.tag = self.defaultTag
                }) {
                    Text("tap 1")
                }
                Button(action: {
                    self.destination = AnyView(Text("child 2"))
                    self.tag = self.defaultTag
                }) {
                    Text("tap 2")
                }
                NavigationLink(destination: destination, tag: defaultTag, selection: $tag) {
                    EmptyView()
                }
            }
        }
    }
}
```

原理としては、tagがbindingされているので同じクラスでdestinationを定義すれば、更新時にbodyが呼ばれてNavigationLinkの遷移先が入った状態で遷移するイメージです。
MetaMaskなしでSmartContractを実行する

## 概要
スマホのブラウザでは、お馴染みの拡張機能MetaMaskが使えません。
（DAppsブラウザ機能を搭載するウォレットアプリは各社から出ていますが…）
そこで、web3.jsを使ってMetaMaskなしでスマートコントラクトのメソッドを呼んでみたいと思います。
web3のバージョンは1.2.1、ノードはInfuraのものを使います。

## 手順
web3とmyContractは適当に準備します。また、awaitを使うのでasync function内で実行する必要があります。

``` javascript
// privateKeyをインポート
let account = web3.eth.accounts.privateKeyToAccount(privateKey);
// メソッドのABIをエンコード
let encodedABI = myContract.methods.myMethod(param).encodeABI();
// gas量を適当に計算
let gasAmount = await myContract.methods.myMethod(param).estimateGas({from:account.address}) + 5000;
// 宛先にコントラクトのアドレス、データにエンコードしたABIをセットしたトランザクションを作成
let tx = { to: myContract.options.address, data: encodedABI, gas: gasAmount };
// トランザクションに署名して、そのままnodeに投げる
let signedTx = await account.signTransaction(tx);
let re = await web3.eth.sendSignedTransaction(signedTx.rawTransaction);
```
最初に秘密鍵をインポートしてますが、インポートせずに署名のところで以下のようにしても問題ないです。

``` javascript
let signedTx = await web3.eth.accounts.signTransaction(tx, privateKey)
```

## web3.eth.personal.signTransaction()
上記コードではweb3.eth.accounts.signTransaction()を使いましたが、ドキュメントにはweb3.eth.personal.signTransaction()も存在します。
ネーミングが逆な気がしてしまうのですが、accountsはローカルPC上で署名を行い、personalはノード上のアカウントで署名を行うという違いがあります。
ちなみに、今回使用しているInfuraのノードはpersonalをサポートしていません。
Node.js: StreamをパイプとTransformで変形する方法

この投稿では、Node.jsのストリームのデータをパイプ(pipe)と`Transform`クラスを使って変形する方法を説明する。なお、サンプルコードはすべてTypeScriptで示す。

## Readableストリームは源流

パイプと`Transform`の使い方を見る前に、ストリームの源流となる`Readable`ストリームの最もシンプルな作り方をおさらいしておく。次のコードがその例だ:

```typescript
import {Readable} from 'stream'
const stream = Readable.from(['a', 'b', 'c'])
stream.on('data', data => process.stdout.write(data)) // ストリームのデータを標準出力に書き出す
```

このコードを実行すると、標準出力に`abc`と表示される。

## パイプとはストリームを橋渡しする土管のこと

次に、パイプの使い方を見てみよう。ストリーム処理において、パイプとはその名が示す通り、あるストリームの内容を別のストリームに流し込む土管のような役割をする。Nodeの`stream`では、`Readable`ストリームオブジェクトの`pipe`メソッドとして実装されている。`pipe`メソッドは第一引数に`Writable`ストリームオブジェクトを受け付ける。

```typescript
readableStream.pipe(writableStream)
// readableStreamからwritableStreamにデータが流れるようになる
```

最初のサンプルコードで使った`process.stdout`オブジェクトは、`Writable`ストリームオブジェクトとして振る舞える。なので、`'data'`イベントでわざわざ`process.stdout.write`を呼び出していた箇所は、`pipe`メソッドでシンプルに書き直すことができる:

```typescript
import {Readable} from 'stream'
const stream = Readable.from(['a', 'b', 'c'])
// stream.on('data', data => process.stdout.write(data))
stream.pipe(process.stdout)
```

## `Transform`クラス

### `Transform`はストリームデータを逐次加工できる

ここまでで`Readable`ストリームの作り方と、パイプの使い方を見てきたので、次に`Transform`クラスの使い方について説明する。

`Transform`クラスは`Readable`ストリームであると同時に`Writable`ストリームでもある。つまり、ストリームパイプの途中に入って、上流から流れてきたデータを加工して、下流に流すことができる。

```typescript
// 上流 ---------データの流れ---------> 下流
stream.pipe(transform).pipe(process.stdout)
         // ↑加工
```

### `Transform`オブジェクトの生成方法

`Transform`クラスは抽象クラスのようなもので、インスタンス化するときは`transform`メソッドの実装をコンストラクタに渡す:

```typescript
new Transform({
  // transformメソッドの実装を渡す
  transform(chunk, encoding, done) {
    // ...
  },
})
```

このメソッドでは、上流から流れてきたデータの断片(チャンク)を逐次変形する処理を実装することになる。

### “何も変形しない”`Transform`を実装する

`Transform`の説明をシンプルにするために、何も変形をしない、つまり、データを受け流すだけの`Transform`オブジェクトを実装してみよう:

```typescript
import {Transform, TransformCallback} from 'stream'

// 何も変形しないTransform
const noop = new Transform({
  transform(
    chunk: string | Buffer,
    encoding: string,
    done: TransformCallback
  ): void {
    this.push(chunk) // データを下流のパイプに渡す処理
    done() // 変形処理終了を伝えるために呼び出す
  },
})
```

`noop`トランスフォームをパイプラインに組み込むと次のようになる:

```typescript
import {Readable} from 'stream'
const stream = Readable.from(['a', 'b', 'c'])
stream.pipe(noop).pipe(process.stdout)
```

`noop`は何も変形しないので、出力結果は当然`abc`のままになる。

### アルファベットを大文字する変形する`Transform`を実装する

今度は、`noop`をベースに、流れてきた文字列データを加工する`Transform`を実装してみよう。次のサンプルコードは、アルファベットを大文字するものだ:

```typescript
// アルファベットを大文字にするTransform (変形する)
const uppercase = new Transform({
  transform(
    chunk: string | Buffer, 
    encoding: string, 
    done: TransformCallback
  ): void {
    this.push(chunk.toString().toUpperCase()) // 加工処理
    done()
  },
})
```

これをパイプラインに組み込む:

```typescript
stream.pipe(uppercase).pipe(process.stdout)
```

このパイプラインを実行すると、標準出力の結果は`ABC`になる。

## 参考文献

* [Stream | Node.js v12.12.0 Documentation](https://nodejs.org/api/stream.html)
ParcelでPug + Stylus + TypeScriptの環境構築

WebPack, Gulp, WebPack+Gulp, Preprosなど色々な環境構築で比較した結果Parcelにたどりつきました。

## ソースコード

- https://github.com/usu-blog/parcel-pug-stylus-ts

とりあえずクローンして`yarn`したあと`yarn dev`で動きます。

## Install

インストールするのもは１つだけです。

```bash
yarn global add parcel-bundler
```

## Settings

基本的には、package.json書くだけです。

```json:package.json
{
  "scripts": {
    "dev": "parcel \"pug/**/!(_)*.pug\"",
    "watch": "parcel watch \"pug/**/!(_)*.pug\"",
    "build": "parcel build \"pug/**/!(_)*.pug\""
  },
}
```

`\"`使っている理由は以下の記事に書いてます。 
- [Parcelを使う時にハマったpackage.jsonのscripts](https://qiita.com/usu_blog/items/47119f1127c30227d216)

### Autoprefixerの設定

```js:postcss.config.js
module.exports = {
  plugins: [require('autoprefixer')({ grid: true })],
}
```

### TSの設定

初心者なんでわからないんでどっかで見つけたtsconfig.jsonも入れときます。

```json:tsconfig.json
{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "outDir": "lib",
    "typeRoots": ["node_modules/@typings"]
  },
  "exclude": ["node_modules"]
}
```

## 気になるところ

ブラウザでアクセスした時に`http://localhost:1234`なんですが`http://localhost:1234/index.html`のように`index.html`まで入れないとindexのファイル表示できないです。  
誰か知っていれば教えていただきたいです！
エンジニアスタンプラリー～フロントエンド編＃11

## 企画主旨
[Frontend Developer Roadmap](https://roadmap.sh/frontend)をひたすら巡回する企画 
詳しくは[こちら](https://qiita.com/tonchan1216/items/8d5f072cf769dfe1bc4f)

## 今回の実施内容
ぷろぐれっしぶうぇぶあぷり
PWAの対応。任意のスタンプだが、個人的に興味があったものを抜粋で実施。

## Progressive Web Apps

#### Service Worker
Googleが紹介する[はじめてのプログレッシブウェブアプリ](https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja)を参考にして、今までのサイトをPWAに対応させる。
Service Workerを追加することで、オフライン対応・インストール可能にする。

```javascript:sw.js
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = ['/', '/main.js', '/assets/tenki.json'];

self.addEventListener('install', event => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      console.log('Opened cache');
      return cache.addAll(urlsToCache);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      // Cache hit - return response
      if (response) {
        return response;
      }

      const fetchRequest = event.request.clone();

      return fetch(fetchRequest).then(response => {
        // Check if we received a valid response
        if (!response || response.status !== 200 || response.type !== 'basic') {
          return response;
        }

        const responseToCache = response.clone();

        caches.open(CACHE_NAME).then(cache => {
          cache.put(event.request, responseToCache);
        });

        return response;
      });
    })
  );
});

self.addEventListener('activate', event => {
  const cacheWhitelist = ['pages-cache-v1', 'blog-posts-cache-v1'];

  event.waitUntil(
    caches.keys().then(cacheNames => Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      ))
  );
});
```

#### Using Light House
Chromeの拡張機能からLigh Houseを起動して、パフォーマンス計測を実施。
提案された項目の中から、修正可能なものをピックアップ。
主に、

* JS/CSSの分割と圧縮
* BootstrapをCDNから読み込み
* 背景とのコントラスト

<img width="728" alt="キャプチャ (2).PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101355/1de8b6a7-e759-db53-92b9-46a7502578e4.png">


## 成果物
デザインが変わっていないのに、裏側だけがモダンになっていく。
Nginx等でキャッシュやgzip圧縮ができれば、もっと高みを目指せたかも。
https://github.com/tonchan1216/WDR-frontend/tree/v11
https://tonchan1216.github.io/WDR-frontend/v11/
vbsの作法 その36

#概要

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

#練習問題

中学生でも、使えるrpaツールを作れ。

#環境

windows7 64bit

#方針

取りあえず、電卓を操作する。
インタープリター方式
コマンドがある。
コマンドは'で始まる。
変数が使える。
変数は、$a,$b,$c,$dの4つ。
データは、カンマ区切り。
sendkeysを使う。

#命令文

```
'win 電卓
'{
$a,$b,$c
0,1,2
'}
123{+}
$a
=
```

#命令文の意味

アクティブウィンドウとして、電卓を使う。
変数は、a,b,cを使う
繰り返しは、1回。
操作は、123+変数a=を押す。

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/0b05cd4e-c14b-60e0-5971-8f68b8d1067f.png)


#サンプルコード

```
Dim App6
Dim Appflg
Set App6 = Createobject("OHIcompo6.srv")
WScript.ConnectObject App6, "App6_"
App6.text = "'win 電卓" & vbcrlf & "'{" & vbcrlf & "$a,$b,$c" & vbcrlf & "0,1,2" & vbcrlf & "'}" & vbcrlf & "123{+}" & vbcrlf & "$a" & vbcrlf & "="
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
			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

```

以上。
JSON Schemaの備忘録

## JSON Schemaとは
Json Schema organization によって開発・保守されているスキーマ言語で、JSONデータの構造をJSONそのもので定義するためのもの。**簡単にいうと、JSON File作るとき、やりやすくなるためのもの**

## JSON Schema Definition 入手方法
JSON Schema StoreかGitHubがメインの入手方法になります。もちろん自分で作ってもよい。


- [JSON Schema Store](http://schemastore.org/json/)
- GitHub Action
  - [https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/github-action.json](https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/github-action.json)
- GitHub Workflow
  - [https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/github-workflow.json](https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/github-workflow.json)
- [CloudFormation](https://aws.amazon.com/jp/cloudformation/)
  - https://raw.githubusercontent.com/awslabs/goformation/master/schema/cloudformation.schema.json
- [SAM](https://aws.amazon.com/jp/serverless/sam/)
  - https://raw.githubusercontent.com/awslabs/serverless-application-model/master/samtranslator/validator/sam_schema/schema.json
- [Docker](https://ja.wikipedia.org/wiki/Docker)
  - `https://github.com/docker/compose/tree/master/compose/config`
      - [config_schema_v3.0.json](https://raw.githubusercontent.com/docker/compose/master/compose/config/config_schema_v3.0.json)
      - [config_schema_v3.1.json](https://raw.githubusercontent.com/docker/compose/master/compose/config/config_schema_v3.0.json)
      - [config_schema_v3.2.json](https://raw.githubusercontent.com/docker/compose/master/compose/config/config_schema_v3.0.json)
      - [config_schema_v3.3.json](https://raw.githubusercontent.com/docker/compose/master/compose/config/config_schema_v3.0.json)
      - [config_schema_v3.4.json](https://raw.githubusercontent.com/docker/compose/master/compose/config/config_schema_v3.0.json)
      - [config_schema_v3.5.json](https://raw.githubusercontent.com/docker/compose/master/compose/config/config_schema_v3.0.json)
      - [config_schema_v3.6.json](https://raw.githubusercontent.com/docker/compose/master/compose/config/config_schema_v3.0.json)
      - [config_schema_v3.7.json](https://raw.githubusercontent.com/docker/compose/master/compose/config/config_schema_v3.0.json)
- [Kubernetes](https://github.com/kubernetes/kubernetes)
  - `https://github.com/garethr/kubernetes-json-schema`
  - v1.5.0 ~ v1.14.0 まで、たくさんあります

## JSON Schemaの使い方
[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)の場合、[YAML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml) Pluginをインストールすれば、すぐ使えます。

### 設定の書き方
`pod`から始まるの`yml`,`yaml`ファイルが下記のJSON Schemaが適用されます。

```Settings.json
{
  "yaml.schemas": {
    "https://raw.githubusercontent.com/garethr/kubernetes-json-schema/master/v1.13.0/pod.json": [
      "pod*.yml",
      "pod*.yaml"
    ]
  }
}
```

### 使うイメージ
左上はファイル名、`Ctrl + Space`で左下のように、設定できる項目が表示され、選択される項目は、右に説明も表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160072/b7fc4d74-3db9-c66e-7797-f11077c17ae9.png)
bash: （シェルスクリプト）: /bin/sh^M: bad interpreter: No such file or directoryの原因

#発生した問題
VSCodeで書いたシェルスクリプトを、CentOSで実行した際に
bash: （シェルスクリプト）: /bin/sh^M: bad interpreter: No such file or directoryが発生し
シェルスクリプトが実行できなかった。
#原因
**改行コードがCRLFになっていた。**

とてもシンプルな原因だった。
気をつけましょう・・・
DBの制約

# 目的

- DBのテーブル設計をするにあたり基礎的な知識としての「DBの制約」について知る。

# DBの制約とは？？

- DBのルールのこと。
- リレーショナルデータベース(RDB)で扱うテーブルに対しての決め事や絶対条件を指す。

# 制約の種類

## NOT NULL制約

- 自分でテーブルの列毎に設定することが可能である。
- ただし主キーに当たる列は勝手にDBMS側でNOT NULL制約が設定されている。
- DBにデータを登録するときに、当該レコードの一部カラムにデータが存在していないことがありうる。
- NOT NULL制約を課している列のカラムにデータがない(NULL)状態でDBに登録されようとしているときにSQL側でエラーを返す。
- カラムにデータが入っていないとSQLで問題を起こすことがあるので、基本的にDBのテーブルのすべての列はNOT NULL制約をすることが一般的である。

## 一意制約

- 自分でテーブルの列毎に設定することが可能である。
- テーブル内の列のデータに対して一意性を求めることができる。
- 同じようなテーブル内で一意になる列である、主キーは1テーブルにつき1列しか定義できないのに対し、一意制約では複数の列に対して制約を課すことができる。
- 一意制約がかけられている列でデータ重複を検出した時、SQL側でエラーを返す。

## CHECK制約

- 自分でテーブルの列毎に設定することが可能である。
- テーブル内の列のデータに対して取りうる値の範囲を制限するためのものである。
- 年齢の列に0~130までの値のみ入力可能にするなどの制約を付けられる。
- 一つのテーブルに対しいくつも設定することができるが、列同士の比較はできない。(A列>B列になるようにCHECK制約を課すなどは不可能)
Parcelを使う時にハマったpackage.jsonのscripts

ParcelでPug + Stylus + TypeScriptの環境構築をやっていました。

複数ディレクトリに対応させるためには、
以下のようなスクリプトをpackage.jsonに入れると便利です。

```json:package.json
  "scripts": {
    "dev": "parcel \"pug/**/!(_)*.pug\"",
    "watch": "parcel watch \"pug/**/!(_)*.pug\"",
    "build": "parcel build \"pug/**/!(_)*.pug\""
  },
```
なぜ`\"`を挟んでいるかというと`!`が特殊文字で想定と違う挙動をしてエラーが出てしまうので\"で囲んで文字列にしています。
PureScriptで非同期処理

# はじめに

簡単な例を書きます。

例のために、こんな関数を用意しておきます。

```haskell
alog :: String -> Aff Unit
alog = liftEffect <<< log

delay' :: Number -> Aff Unit
delay' = delay <<< Milliseconds
```

# 例１

Effect内で複数の処理(launchAff_ の中)を非同期で実行します。各処理の最初のログは同時に表示されますが、次のログは各々が持つ遅延処理を終えてからバラバラに出力されます。

```haskell:例１
main :: Effect Unit
main = do
  launchAff_ do
    alog "[1 - 1]"
    delay' 2100.0
    alog "[1 - 2]"

  launchAff_ do
    alog "[2 - 1]"
    delay' 1000.0
    alog "[2 - 2]"

  launchAff_ do
    alog "[3 - 1]"
    delay' 3500.0
    alog "[3 - 2]"

  launchAff_ do
    alog "[4 - 1]"
    delay' 1800.0
    alog "[4 - 2]"
```

# 例２

Effect内で1つの非同期処理(launchAff_ の中)を立ち上げ、その中で複数の非同期処理(forkAff の中)を実行します。結果は例１と同じように見えます。

```haskell:例２
main :: Effect Unit
main = launchAff_ do
  _ <- forkAff do
    alog "[1 - 1]"
    delay' 2100.0
    alog "[1 - 2]"

  _ <- forkAff do
    alog "[2 - 1]"
    delay' 1000.0
    alog "[2 - 2]"

  _ <- forkAff do
    alog "[3 - 1]"
    delay' 3500.0
    alog "[3 - 2]"

  forkAff do
    alog "[4 - 1]"
    delay' 1800.0
    alog "[4 - 2]"
```

# 例３

複数の非同期処理から得た戻り値を使います。

```haskell:例３
main :: Effect Unit
main = launchAff_ do
  f1 <- forkAff do
    alog "[1 - 1]"
    delay' 5100.0
    alog "[1 - 2]"
    pure "[1]"

  f2 <- forkAff do
    alog "[2 - 1]"
    delay' 1000.0
    alog "[2 - 2]"
    pure "[2]"

  _  <- forkAff do
    alog "[3 - 1]"
    delay' 3500.0
    alog "[3 - 2]"

  f4 <- forkAff do
    alog "[4 - 1]"
    delay' 1800.0
    alog "[4 - 2]"
    pure "[4]"

  f2' <- joinFiber f2

  alog $ f2'

  f4' <- joinFiber f4

  f1' <- joinFiber f1

  alog $ f1' <> f2' <> f4'
```

※ ここで、一番時間のかかる処理はf1です。joinFiberによってf1の結果を先に取得しようとすると、f1が終わるまでその先がブロックされてしまいます。
Cassandraのデータタイプ

#はじめに
CassandraはNoSQLの代表的なデータベースシステムです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/d405534a-6b56-e3ba-590b-5e9ef8d1187c.png)


出典：https://db-engines.com/en/ranking

#データタイプ
データタイプは下記の種類があります。メモします。
・native types
・collection types
・user-defined types
・tuple types
・custom types

#native types

- ASCII
- BIGINT：　64bit
- BLOB
- BOOLEAN
- COUNTER
- DATE
- DECIMAL
- DOUBLE
- DURATION
- FLOAT
- INET
- INT：　32bit
- SMALLINT：　16bit
- TEXT：　UTF8 encoded string
- TIME
- TIMESTAMP
- TIMEUUID
- TINYINT： 8bit
- UUID
- VARCHAR：　Textと同じ。UTF8 encoded string
- VARINT:　任意精度の整数

#collection types
ネストしたい場合はコレクション型を定義しても便利です。

- Map

サンプル

```sql
CREATE TABLE users (
    id text PRIMARY KEY,
    name text,
    read_books map<text, text> // isbn:本名
);
```

```sql
INSERT INTO users (id, name, read_books)
           VALUES ('tanaka', '田中 太郎', { '978-4873115290' : 'Cassandra', '978-4873112565' : 'Apacheセキュリティ' });
```

- Set

定義例：　tags set<text> ⇒　値例：　{"２０代", "男性"}
更新例1： tags = tags - { '２０代', '男性' }
更新例2： tags = tags + { '３０代', '女性' }

- List

定義例：　scores list<int> ⇒　値例： [10, 5, 15, 20]。
更新例1： scores = scores - [ 10, 15]
更新例2：  scores = scores + [ 12, 18]
更新例3：  scores[0] = 16


#user-defined types

```sql
CREATE TYPE address (
    street text,
    city text,
    zip text,
    phones map<text, text>
)

CREATE TABLE user (
    name text PRIMARY KEY,
    addresses map<text, address>
)
```

#tuple types
```sql
CREATE TABLE durations (
    event text,
    duration tuple<int, text>,
)

INSERT INTO durations (event, duration) VALUES ('event1', (3, 'hours'));
```

#custom types
推奨されていません

dataypes: http://cassandra.apache.org/doc/latest/cql/types.html

以上
ReactとReduxの理解

自分が勉強していてわからなかった部分をまとめていこうと思います。

#Provider
```sample.js
import { Provider } from 'react-redux';

<Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>
```
Providerを使うことで**子コンポーネントからReduxのstoreにアクセスできる**ようになる。
今回だとConnectedRouter、Appコンポーネントが対象。

#React Routerに関してわかりやすい記事
https://codezine.jp/article/detail/10624
macOSと Windowsを切り替えて使いたい

自身での解決が難しいので、こちらに投稿させていただきます。

普段MacBookを使用しているんですが、macOSとwindowsを切り替えて使いたいなと考えています。
BOOTCAMPを使ってOS自体の切り替えはできるのですが、windowsの方でネットに接続ができない状態です。
因みに自宅にあるルーター（SoftBank Air）を介して接続しようとしています。
トラブルシューティングをしたところ、ネットワークアダブターが検出できないとのことでした。
ネットワークアダプターは以下のようになってます。
[15709322957392842907364735978504.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513219/a48a9063-1b0f-d1d1-3335-c097630a9f80.jpeg)


Wanミニポートでなく、ルーターを使って接続するためにはどうしたら良いのでしょうか。
色々調べてみたのですが、私自身の知識が浅く解決が出来なかったので質問致しました。
よろしければご教授願います。
地味に便利なツール JavaScript's object to JSON を作りました

開発者のみさなん、こんにちは！@shino_tpです。

今回は、Javascript's object to JSON というサービスを作りました。
https://js-to-json.web.app/

# これは何？
![conv.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32950/a071377c-5729-0b8d-cb44-b98609ce4713.gif)

# なぜ作ったか
JavaScirptを使った開発をしていて、以下のようなことをしたことはありませんか？

- JavaScriptで書いたObjectをJSONに変換するために正規表現を使って置換した
- JSONをJavaScriptで扱いたいので、.jsonファイルをrequireし、console.logで出力したものをコピペ

都度変換するために正規表現を書くのも面倒なのでツールを作りました。

その名も、**JavaScript's object to JSON** そのまんまですね。

サイトはこちらです。
https://js-to-json.web.app/

※変換時にAPIに入力データをPOSTなどの処理は行っていないため情報漏えいなどの心配はありません。安心してお使いいただけます。

# 所感
普段Vuetifyを使うことが多いのですが、今回は検証のためElement UIを使ってみました。
Element UIの方がスタイル変更しやすい印象。あとデフォルトのデザインがスタイリッシュ。

# おわりに

何かのお役に立てたら嬉しいです。
ご意見、ご感想などありましたら、SNS通じてご連絡ください！
Happy Coding!
AWSでエッジコンピュティング環境を作るのを真似してみる

#はじめに
AIchi勉強会に参加した時、一番インパクトがあったのがほけきよさんの、AWSでエッジコンピューティングのお話でした。
やってみたいところだけど、試行錯誤する時間が惜しいので、ほけきよさんの記事をそっくり真似してやってみました。

「ぜひぜひ、みなさんも実際に手を動かしながらやってみてください！ではではっ」

と、記事にもありましたので。
参考にしているのは、ほけきよさんのこちらの記事。
[【Part1】AWSでエッジコンピューティング環境を作る(全体像)](https://note.mu/imaimai/n/nbd50a273ff74)

では、自分なりにトレースしてやってみます。

#GreenGrass環境
[【Part2】AWS Greengrassの特徴と環境構築](https://note.mu/imaimai/n/nc1841b2d579f)
AWSのIot拡張機能ですね。単語しか知らないです。
あと、サーバーレスアーキテクチャのLambdaというものは、全く知りません。
「AWSにはLambdaという`FaaS`がある」
もう、何言ってるかわかりません。日本語ですか？
最近、なんとかaaSという
単語が多すぎですね。

FaaS（Function as a Service）・・・サーバーレスでアプリケーション開発が行える仕組み。サーバーレスって言うのは、サーバーを自前で用意しなくても、クラウドから借りれると言うことで、本当に無しで動くわけではないことに注意。（当たり前）

昔はBaaS（Backend as a Service）って言ってたみたいだけど、近年のクラウドプロバイダ側の強化で使いやすくなって、クラウドプロバイダ側で必要なプログラムをうごかすようになって、FaaSに進化したっぽい。

###AWS公式のRaspberryPi環境設定
[AWS Iot GreenGrass](https://docs.aws.amazon.com/ja_jp/greengrass/latest/developerguide/setup-filter.rpi.html)
このまんま、RaspberryPiをセットアップします。
マルウェア Miraiを解析してわかった知識

マルウェアMiraiのソースコードが公開されているというのを知り、どういう風に作られているか単純に知りたかったので、素人ながら解析してみました。
[jgamblin/Mirai-Source-Code: Leaked Mirai Source Code for Research/IoC Development Purposes](https://github.com/jgamblin/Mirai-Source-Code)

特別に悪意あるコードだけでなく、単に私が知らなかった普通に使うUnixコマンドの説明の書いてあります。
ちなみに調査用のコードなので、**悪用は厳禁**です。


# Rootユーザか調べる方法

``` sh:/scripts/cross-compile.sh
if [ "$(id -u)" != "0" ]; then
   echo "This script must be run as root" 1>&2
   exit 1
fi
```

``` sh
# 普通のユーザは数値が返る
$ id -u
501
# rootユーザのときは0が返る
$ sudo id -u
0
```

[Linuxコマンド【 id 】ユーザーIDとグループIDを表示 - Linux入門 - Webkaru](https://webkaru.net/linux/id-command/)

# echo

オプションに`-n`をつけると新しい行で出力されます。

```sh
$ echo -n "Install mysql-server and mysql-client (y/n)? "
Install mysql-server and mysql-client (y/n)?
```

# stty

[Ubuntu Manpage: stty - 端末の行設定の変更や表示を行う](http://manpages.ubuntu.com/manpages/bionic/ja/man1/stty.1.html)

```sh:/scripts/cross-compile.sh
old_stty_cfg=$(stty -g)
stty raw -echo
answer=$( while ! head -c 1 | grep -i '[ny]' ;do true ;done )
stty $old_stty_cfg
```

# electric fenceのインストール

``` sh:/scripts/cross-compile.sh
apt-get install -y gcc golang electric-fence
```

gccはCコンパイラ、golangはGo言語コンパイラはわかったけど、
`electric-fence`は何？ってなった。

メモリ破壊検出ツールです。バッファオーバーフローのときの検出ツール。

> プログラム中の動的配列(malloc等で確保した配列)の開始位置・終了位置を覚えて これらの配列の領域をポインタ等が踏み越えたときにセグフォで停止させてくれる ものです。
ですので、このセグフォによるコア(core)をgdb等のデバッガで確認すれば、 どこで、どの配列の領域侵害で停止したのかが一瞬で分かるようになります。

[C言語：メモリ破壊検出ツール electric fenceの使い方](https://www.phactory.jp/blog/c_electric_fence/)


# 参考

* [米ネットを襲う未曾有のDDoS。アンナ先輩が野に放った｢Mirai｣という名の魔物 | ギズモード・ジャパン](https://www.gizmodo.jp/2016/10/mirai-ddos-anna-senpai.html)
* [IoTデバイスを狙うマルウェア「Mirai」とは何か――その正体と対策：超速解説 Mirai - TechFactory](https://techfactory.itmedia.co.jp/tf/articles/1704/13/news010.html)
32bitマシンでDockerを動かす方法

Dockerのインストールは64bitマシン上で、と公式サイトには提示されていますが、32bitマシンでもインストールライブラリを取得してインストール可能なようです(2019年10月時点)。

[画像] - Ubuntuに関する公式サイトのページ
![001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/b3537268-b693-8965-cfb2-1e0ca9fd9342.jpeg)
今回は32bitマシン(Windows Server 2003)にVM Playerを立て、その上にUbuntu(14.04.6)をインストールしてみました。
# 環境構成
![pic001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/f3bd23fc-5115-8195-e7f5-cac7f0952c0d.jpeg)

# インストール作業
インストール作業をまとめました。
#### (1)VM PlayerへUbuntu14をインストール
VM Playerを起動し、「新規仮想マシンの作成」を選択します(赤枠)。
![pic001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/0d73dc94-f0f3-d01b-eea5-2fdcfe7a41f3.jpeg)
今回使用したVM Playerのバージョンは5.0.3でした。
参照ボタンをクリックします。
![pic001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/2d28d393-454e-f413-954a-25cf65cf034c.jpeg)
ubuntu-14.04.6のisoイメージディスクを選択します。
![pic001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/4f4be171-5dcd-8762-4f73-baf52ba4a1c0.jpeg)
[次へ(N)>]ボタンをクリックし、インストールを続行します。
※以降Ubuntuのインストールは一般的な手順のため、省略します。
インストール後のログイン直後の様子
![pic001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/4c790bda-8b19-a2d0-c8d2-5b5b648cfb8e.jpeg)

#### (2)Dockerインストールのためのイメージデータの取得
```
wget https://gitlab.com/docker-32bit/ubuntu/raw/master/build-image.sh
```
取得結果
![pic001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/f56be8a8-46e3-a317-d0a0-b2934e33c9f5.jpeg)
イメージデータを取得し、root権限で実行します。

```
sudo bash ./build-image.sh
```
インストール後の様子
![pic001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/1513fef3-b798-84a1-ffe9-1a4b61cd8541.jpeg)
#### (3)一般ユーザへの実行権限の付与
Dockerコマンドを一般ユーザで実行できるように設定します。

```
sudo usermod -aG docker $USER
```
一旦ログアウトとログインを行います。

#### (4)Docker実行状況の確認
Dockerのバージョンの確認

```
docker -v
```
![pic001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/83bab1c7-a24d-98a7-c940-e38d0acd47f2.jpeg)
Dockerの実行状況(status)の確認
![pic001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/9b58600d-d6ab-3864-3dc4-0c748b25f746.jpeg)
本記事は以上です。
MAMP環境のWEBページに他PCから接続

MACPCのローカル環境で作成したWordPressなどのWEBページを本番環境の前に他PCからアクセスして、確認してもらう方法になります。

##対象
- MAMP環境の構築ができている方
- あまりインフラに詳しくないフロント/バックエンドエンジニア



##設定方法
- Wifi/ネットワークに接続する
- 接続しているWifi/ネットワークのIPアドレスを確認する
- 確認したIPアドレスをMAMPの⁨「アプリケーション⁩/⁨MAMP⁩/⁨conf⁩/⁨apache⁩」内の「httpd.conf」に記載する
- MAMPの再起動をする
- 記載したIPアドレスにアクセスする

以上５つの手順で完了します。
各項目の詳細は以下になります。

**※他PCからアクセスする場合、同じWifi/ネットワークに接続されていることが条件になります。違うWifi/ネットワークに接続されているPCからは閲覧することはできません。**

　
##Wifi/ネットワークに接続する
ご自身のMACPCでネットを使えるようにWifi/LANでネットワークに接続してください。

##接続しているWifi/ネットワークのIPアドレスを確認する
１：画面左上にある「リンゴマーク🍎」
２：「システム環境設定」
３：「ネットワーク」を選択

そこに記載されているIPアドレスをメモしてください(画像赤枠内)。
<img width="665" alt="スクリーンショット 2019-10-13 9.45.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246668/3a64093a-e583-392b-0fe9-7ff00bc7230e.png">


##確認したIPアドレスをMAMPの⁨「アプリケーション⁩/⁨MAMP⁩/⁨conf⁩/⁨apache⁩」内の「httpd.conf」に記載する
フォルダから、
アプリケーション→MAMP→conf→apacheまで進み
**httpd.conf**をメモ帳などのエディタで開いてください。
<img width="815" alt="select.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246668/60c0db46-2a6d-a86a-ee74-14f833408180.png">

４７行目をコピーして、４９行目にペースト。（画像青枠部分）
先頭の「＃」を削除して、数字部分を先ほどメモしたIPアドレスに書き換えます。（画像赤枠部分）
数字の後ろに「：（コロン）８００１〜８００５までの好きな数字1つ」を記載します。
<img width="304" alt="httod.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246668/79d7d1f7-cb4a-3164-6d4d-1d2536cfedf4.png">

##MAMPの再起動をする
MAMPを起動しいるなら、MAMPを停止して、再起動します。

##記載したIPアドレスにアクセスする
MAMPのサーバーの起動確認後、**httpd.conf**に記載した「IPアドレス：８００１〜８００５の数字１つ」をブラウザに入力して、表示されていれば、完了です。




#####最後まで読んでくださり、ありがとうございました。
Gitの基本用語　初心者

#簡単なGitの説明

①Git(ギット)...分散型バージョン管理システム。オフライン上でもプログラムの変更が出来たり、変更したプログラムの履歴も残すことができる。

バージョン管理システムは、プログラムの変更履歴を残すシステムを指す。

②Gitを使うメリット

- チーム内でファイルの履歴を共有できる。　

- 書いたコードを修正したい時などにGit上で履歴が残すことができるので、遡って過去のファイルまで戻すことができる。


#Gitの仕組み

1..リポジトリ(ローカルリポジトリ、リモートリポジトリ)
2..コミット
3..トラッキング状態  
これら順に説明していくと

----
1..リポジトリとはファイルやディレクトリ、変更履歴が置いてある場所を指す。変更履歴を管理したいディレクトリをこのリポジトリに置いておく事で、中身のファイルやディレクトリを記錄したり変更したりすることができる。
リポジトリには、”ローカルリポジトリ”、”リモートリポジトリ”の二種類がある。

ローカルリポジトリとは開発者一人に用意されたプログラムを保存するリポジトリのこと。
リモートリポジトリとは、チーム内でファイルを共有管理できるリポジトリのこと。

基本普段一人でプログラムを開発するときはローカルリポジトリで行い、変更やチームで情報共有したい時にはリモートリポジトリといった使い分けをする。

ローカルリポジトリの変更をリモートリポジトリに反映させる事をPushと呼び、逆をPoolと呼ぶ。

----
2..コミットとはローカルリポジトリにあるトラッキング状態(後述)のファイルをリモートリポジトリに保存すること。コミットは確定という意味。


----
3..トラッキング状態とは端的に言えば、ファイルを何時でもコミットできる状態にする事。
トラッキング状態にするには”add"を用いる。
トラッキング状態になったファイルやディレクトリはリポジトリとは別のステージング領域と呼ばれる場所に一時的に保管される。
Firestoreでwhereでしているフィールドとorderbyしたいフィールドが違うので複合インデックスを作る


Firestoreはいろいろ制限がある。それでも便利なのでいろいろ試す。


私はポイントバリューを扱うアプリをよく書きます。バリュー操作自体はトランザクション処理もできるので、Firestoreでも安心して処理できます。で、処理時にtransactionsコレクションに下記のようなスキーマのdocumentを処理の度に残すとします。

処理した時間と、どのような処理をしたかを記録するとします。

```js
{
	createdAt: 2019-10-13 09:14:11
	operation: "SEND" // or "Receive"
}
```

### 問題無いケース

全体のログを降順で見たい場合、

```js
db.collection('transactions')
	.orderby('createdAt','desc').get();
```

というようになります。SQLで書くと、下記のような感じとなりますが、

```
select * from transactions order by createdAt desc;
```

この処理は特に問題ありません。

### 問題（というか操作が必要）となるケース

ただ、SEND処理だけを操作時間でソートしたい場合、（何もしないと）エラーになります。

```js
db.collection('transactions')
	.where('operation','==','SEND')
	.orderby('createdAt','desc').get();
```

SQLで書くと、

```
select * from transactions where operation = 'SEND' order by craetedAt desc;
```

という何の変哲もないクエリです。

エラーの原因は、whereの条件で利用しているoperationとorderbyで別のフィールドを利用しているからです。
このクエリを実行すると、下記のようなエラーがでます。

```bash
{ Error: 9 FAILED_PRECONDITION: The query requires an index. You can create it here: https://console.firebase.google.com/v1/r/project/xxxxx/firestore/indexes?create_composite=ClNwcm9qZWN0cy9jd3NlcnZlci02Y2ZiMy9kYXRhYmFzZXMvKGRlZmF1bHQpL2NvbGxlY3Rpb25Hcm91cHMvdHJhbnNhY3Rpb25zL2luZGV4ZXMvXxABGg0KCW9wZXJhdGlvbhABGg0KCWNyZWF0ZWRBdBACGgwKCF9fbmFtZV9fEAI
    at callErrorFromStatus (/Users/xxxx/fire_test/node_modules/@grpc/grpc-js/build/src/call.js:30:26)
    at Http2CallStream.call.on (/Users/xxxx/fire_test/node_modules/@grpc/grpc-js/build/src/call.js:79:34)
    at Http2CallStream.emit (events.js:203:15)
    at process.nextTick (/Users/xxxx/fire_test/node_modules/@grpc/grpc-js/build/src/call-stream.js:75:22)
    at process._tickCallback (internal/process/next_tick.js:61:11)
```

よく読むと、「このクエリにはindexがいるぞ、以下のURLに行けば作れるよ」と親切に書いてくれています。
リンクのURLに行くと、そのまま「作るか？」と聞いてくるので「作る」とすればいいようです。

下記のように適切なindexを作ってくれるようです。

![Kobito.cC66iJ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/4903f38e-54a2-e9e9-6ee4-287e710323ed.png "Kobito.cC66iJ.png")


作成した上で、エラーとなったクエリを実行すると、問題なくクエリが実行されます。
vbsの作法 その35

#概要

vbsの作法調べてみた。
htaやってみた。

#htaの良いところ。

guiがある。マウス、inputbox,textarea使える。

#htaのだめなとこ1

WScriptが、無い。sleepできない。

#htaのだめなとこ2

Provider=Microsoft.ACE.OLEDB.12.0が、無い。mdbをいじれない。


以上。
Sphinxの使い方メモ（MacOSX）

Keras Documentationの美しさに感動して、ホームページや自分が書いたアプリの説明書を、Sphinxで作成することにしました。

# インストール方法
pipでダウンロードできます。

```
$ sudo pip3 install sphinx
$ sphinx-quickstart --version
sphinx-quickstart 1.8.5
```

# 使い方
まずは、`sphinx-quickstart`でフォルダを作成します。作成の際に、色々とオプションを聞かれますが、回答必須なものは、プロジェクト名（Project name）と作者（Author name(s)）のみです。あとは、適当にイエスで大丈夫です。

```
$ mkdir work
$ cd work
$ sphinx-quickstart proceedings
```

# 編集
作成されたフォルダに含まれている`index.rst`をマークダウン記法によって編集してビルドすれば、`_build/html/index.html`にHTML形式に変換されたページができています。

```
$ make html
$ open _build/html/index.html
```
VSCodeでターミナルが起動しなくなった

たぶん同じようなことをするひとはいないと思いますが、ちょっとハマったので記録しておきます。

# 現象
VSCodeのremote WSLを使って、Ubuntuのターミナルを起動しようとしたら、「開始しています」と表示されたままターミナルが起動しない。

![VSCode_terminal_stop_at_startup.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497211/67e171ff-b022-9a56-2b2a-b01f546905aa.jpeg)

# 環境
OS : Windows10
Visual Studio Code : 1.39.1 + remoteWSL 0.39.9
WSLのディストリビューション : Ubuntu-16.04

# 状況
VSCodeを起動して、remote WSLでUbuntu-16.04と接続。
とりあえずワークスペースを作ろうと思って、ワークスペースを保存。
「ターミナル」-「新しいターミナル」でターミナルを開こうとすると、bashが起動しない。

# 原因
いろいろ試した結果、おそらくワークスペースにフォルダが追加されていないのが原因だったようです。
「ファイル」―「フォルダーをワークスペースに追加」してから、ワークスペースを保存すれば問題なくターミナルを起動できました。
WSLだとターミナルを起動するときに、フォルダーをワーキングディレクトリとして開こうとするからでしょうか？
Windowsだと同じことをしても、問題ありませんでした。
Linuxは環境がないので試せていません。

余談：デュアルブート環境を作らなくてもLinuxの開発ができるって素晴らしいです。