OmniAICreator/Qiita-1.07M huggingface dataset:
xreaにSSH接続する方法（具体例あり）

##用意するもの
- Mac：ターミナル/itermなど
- Windows：teraterm/puttyなど

##必要な接続情報
- ホスト：（例：○○.xrea.com）
- アカウント：（xrea申込み時に決めたuserID）
- パスワード：（コントロールパネルのサイト設定 or xreaからのメールに記載）

##事前準備
xreaでSSH接続を許可する必要があります。
以下の手順でSSH接続を許可します。

1. コントロールパネル
2. サイト設定
3. ツール・セキュリティ
4. SSH接続IP許可
5. 「SSH接続のIPを許可する」

※家庭用のインターネットサービスプロバイダーでは動的IPが一般的に採用されており、
定期的にIPアドレスが変わります。
久しぶりにSSH接続するなどの時は再度上記の手順で現在のIPアドレスの接続を許可する必要があります。

##実行するコマンド
筆者はMac環境なのでMacで接続する場合のコマンド例を以下に記述しておきます。
ターミナルを起動して以下コマンドを入力します。

```
$ ssh アカウント@ホスト
```

例：laravelというアカウントでホストs1234.xrea.comに接続する例

```
$ ssh laravel@s1234.xrea.com
```

次にパスワードを求められるのでパスワードを入力したら接続完了です。
パスワード入力はもちろんコピペOK。

##シェルをrbashからbashに変更
xreaではデフォルトではrbashになっていて一部コマンドに制限がかかっています（cdなど）。
以下コマンドでシェルをbashに変更しておきましょう。
<font color="Red">※入力箇所は１、３、４、６行目</font>

```
$ chsh
アカウント のシェルを変更します。
新しいシェル [/bin/rbash]: /bin/bash
パスワード:
シェルを変更しました。
$ bash
```

##私の使用用途
Laravelで作った成果物をとりあえずアップロードしています。
無料で使えるので学習初期にはおすすめです。

ただし<font color="Red">無料版では広告が表示される＆無料なので突然アカウント削除される危険性があります。</font>
就職活動で見せるポートフォリオはAWSやHerokuを使うか、有料版に切り替えるのがベターです。

##追記：vimのインストール
今の状態では接続できただけでvimも使えません。
後々のことを考えてvimくらいはインストールしておくのがおすすめ。
インストール手順は以下リンク先を参考にしてください。

参考：[無料サーバー XREA vim設定](https://qiita.com/Youz/items/c1b798af6ce414c82b20)

Laravelを使う人でgitにソースをためている人は以下の記事も参考になるかも。

参考：[Laravelのプロジェクトをgit cloneしたときの手順](http://vdeep.net/laravel-git-clone)
パスの書き方について

#ルートディレクトリ
最上位のディレクトリ

#サブディレクトリ
root以外のディレクトリ

#カレントディレクトリ
現在いるディレクトリ

#絶対パス
ルートディレクトリからのパスを表記する

#相対パス
カレントディレクトリからのパスを表記する

./   →　現在の階層を表す
../  →　１つ上の階層を表す

#例１
カレントディレクトリをdir-Bとする。

###問い
file-1の位置を絶対パス、相対パスで表記せよ。

```bash
root
├── dir-A
│   ├── file-1
│   └── file-2
└── dirB　　　　　　　　　←　ここにいる
    ├── dir-C
    │   ├── file-3
    │   └── file-4
    ├── dir-D
    │   ├── file-5
    │   ├── file-6
    │   ├── file-7
    │   ├── file-8
    │   └── file-9
    └── dir-E
        ├── file-10
        └── file-11
```
###解答

絶対パス　→　root/dir-A/file-1

相対パス　→　./dir-A/file-1 または　dir-A/file-1

#例２
カレントディレクトリをdir-Dとする。

###問い
file-２の位置を絶対パス、相対パスで表記せよ。

```bash
root
├── dir-A
│   ├── file-1
│   └── file-2
└── dirB
    ├── dir-C
    │   ├── file-3
    │   └── file-4
    ├── dir-D　　　　　　←　ここにいる
    │   ├── file-5
    │   ├── file-6
    │   ├── file-7
    │   ├── file-8
    │   └── file-9
    └── dir-E
        ├── file-10
        └── file-11
```
###解答

絶対パス　→　root/dir-A/file-２

相対パス　→　../dir-A/file-2
BINGO「Webツール」の構成を考える 

-- 目次はこちら。[PythonでBINGOの「Webツール」をつくる](https://qiita.com/wacky3/items/ab684c40c80de08b1c50)
-- 記事作成：2019年12月、訂正：2020年6月

## 「Webツール」の構成を考える

前々回インフラ屋がお題として「Webツール」を開発することになったが。。
BINGOゲームの抽選機と表示器を作成することとして、「Webツール」作成用の環境を考えるから、前回はWebワークフレームのFLaskをインストールしました。
今回は、「Webツール」の構成を考えていきます。

### 画面構成

FlaskでWebを起動した場合、http://localhost:5000/ にアクセスする。
以下の様な構成を作る。

トップページ
　｜　BINGO Webツールの説明
　｜　抽選状態の概要
　｜　各種機能へのリンク
　｜
　＋－ー 直近の抽選結果の表示
　｜　｜　直近の抽選数字を大きく表示　
　｜　｜　
　｜　＋　抽選　⇒ 直近の抽選結果表示へ
　｜　＋　過去抽選表示へ
　｜　＋　トップページへ
　｜　
　＋－ー 過去抽選結果表示
　｜　｜　最初から直近までの抽選数字を表示
　｜　｜　
　｜　＋　抽選　⇒ 直近の抽選結果表示へ
　｜　＋　直近の抽選結果の表示へ
　｜　＋　トップページへ
　｜　
　＋－ー BINGOカード登録
　｜　｜　登録者名＋カードを登録　
　｜　｜　　　登録時にカードの有効性を確認(JavaScript？)
　｜　｜　※カードを画像認識して登録できるとBEST！
　｜　｜　登録後⇒登録者BINGOカード表示へ
　｜　｜　
　｜　＋　トップページへ
　｜　
　＋－ー BINGOカード配布
　｜　｜　登録ユーザ名よりBINGOカードを作成
　｜　｜　作成後⇒登録者BINGOカード表示へ
　｜　｜　
　｜　＋　トップページへ
　｜　
　＋－ー BINGO！一覧表示
　｜　｜　登録カードからBINGO、リーチなどの順位を表示
　｜　｜　直近の抽選でBINGO者の表示
　｜　｜　
　｜　＋　トップページへ
　｜
　＋－ー 登録者BINGOカード表示
　｜　｜　登録者名のビンゴカードを表示
　｜　｜　抽選途中の状態（当選状況）を表示（JavaScript？）
　｜　｜　再表示で内容を更新
　｜　｜　
　｜　＋　トップページへ
　｜


### プログラムの構成（検討中）
△は後日追加機能
error処理、ログ機能は後日

main.py
　#Flask + jinja2 ＋ BINGOツール
　初期設定
　　　抽選したボールの置き場を用意する。
　　　ビンゴゲーム状態
　　　カード置き場（登録者名、カード情報、当選情報を記録）
　状態保持
　　　結果を保存するファイルを用意する
　　　カードの情報を保存
　共通処理
　　　抽選したボール置き場が７５個あればBINGOは終了状態とする。
　（/）トップページのりクエスト
　　　ビンゴゲーム状態を表示
　　　トップページのHTMLを返す
　（/ball）直近の抽選結果の表示
　　　抽選したボール置き場の最後尾の値を表示
　　　　△上記の値でビンゴしたカードの枚数
　　　　△上記の値でリーチしたカードの枚数
　（/get_ball）抽選のリクエスト
　　　ビンゴゲームの終了状態が終了のときは（/）を表示
　　　乱数で１～７５の数字を作成
　　　抽選したボール置き場に同じ数字があれば再度やり直し
　　　なければ、抽選したボール置き場の最後に置く
　　　　△抽選したボール番号と、カード置き場の各カードの当選処理をする。
　　　抽選したボール置き場が７５個あればビンゴゲーム状態を終了とする。
　　　（/ball）を表示する
　（/list_ball）過去抽選結果表示のリクエスト
　　　抽選したボール置き場の数値と以下の表中の数値が同じものを反転色等にする
　　　以下の並びは縦で表示する。
　　　Ｂ：　１～１５
　　　Ｉ：１５～３０
　　　Ｎ：３１～４５
　　　Ｇ：４６～６０
　　　Ｏ：６１～７５
　（/card）BINGOカード登録
　　　入力フォームを表示
　　　検査用JavaScriptの埋め込み
　（/card_input）
　　　登録者名、カード情報をカード置き場に登録　
　　　登録後（/card_self?name=登録者名）で開く
　（/card_self）
　　　nameの値のカードを表示
　　　抽選したボール置き場の値とカードの値が同じときは反転表示
　（/list）
　　　一覧表示をする。
　　　登録カードからBINGO、リーチなどの順位を表示
　　　直近の抽選でBINGO者の表示
　　　各カードへのリンクを付ける。

次回は、[BINGO「Webツール」の抽選機のみ(デザインなし)を作成する。](https://qiita.com/wacky3/private/cb4de2eac011212428c6)

-- 目次はこちら。[PythonでBINGOの「Webツール」をつくる](https://qiita.com/wacky3/items/ab684c40c80de08b1c50)
AWS の Lambda で npm install するには 圧縮ファイルをダウンロード・アップロードする必要があるようなのでチャレンジして失敗 

# にわかには信じられなかった

なので方法を知ってもしばらく手が止まるぐらいだった。深い深い事情があるのだろうきっと。

サーバーレスのサービスってさすがに自由にパッケージインストールはさせてくれないものが多いのだろうか？

# 参考

ほとんどこの記事のまま。

[Lambda の Node.js でもっといろんなパッケージを使いたいとき – SIOS Tech. Lab](https://tech-lab.sios.jp/archives/9017)

# デプロイパッケージをダウンロードする

![image](https://user-images.githubusercontent.com/13635059/68100905-10eb6c80-ff0e-11e9-8ff9-311d2ef3f53c.png)
![image](https://user-images.githubusercontent.com/13635059/68100908-11840300-ff0e-11e9-9a60-4225e9bb6daa.png)

![image](https://user-images.githubusercontent.com/13635059/68100922-2791c380-ff0e-11e9-9518-f115035e1bf5.png)


# てきとうなディレクトリに展開する

```
mkdir ~/Downloads/lambda
```

# index.js とは？

既存のコードが入ってた。

ということは何もLambdaに設定していない初期状態であれば、このダウンロードの手順はスキップできるかもしれない。

```
$ cat index.js

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox']});
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();
```

# 同じディレクトリで npm install する

```
npm install puppeteer
```

# installed

```
$ ls -la
total 48
drwxr-xr-x   6 yumainaura  staff    192 Nov  4 14:24 ./
drwx------@  7 yumainaura  staff    224 Nov  4 14:23 ../
-rw-r--r--@  1 yumainaura  staff   6148 Nov  4 14:23 .DS_Store
-rw-r--r--@  1 yumainaura  staff    285 Nov  4 05:03 index.js
drwxr-xr-x  43 yumainaura  staff   1376 Nov  4 14:24 node_modules/
-rw-r--r--   1 yumainaura  staff  11783 Nov  4 14:24 package-lock.json
```

# 圧縮する

![image](https://user-images.githubusercontent.com/13635059/68101058-0da4b080-ff0f-11e9-9075-8c587ce057e5.png)

# 関数コードをアップロードする

![image](https://user-images.githubusercontent.com/13635059/68101080-2e6d0600-ff0f-11e9-8847-1df84d21f1d5.png)

![image](https://user-images.githubusercontent.com/13635059/68101073-23b27100-ff0f-11e9-8d67-df053993df55.png)

# やったぜ！

容量オーバーでした。

![image](https://user-images.githubusercontent.com/13635059/68101088-388f0480-ff0f-11e9-88aa-d20c228a55dc.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2668








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
九九で計算できる数値かどうかを判定する

## 前提
とある数値が入力されたとして、その数値が九九（1-9までの掛け算表）で計算が可能な数値かを判定します。
もし入力された値が計算可能であれば `Yes` と出力し、計算不可能であれば `No` と出力します。
言語は JavaScript です。

## コード

```javascript

function Main(input) {
  input = parseInt(input);
  let canBeCaluculated = "No";

  for (i = 1; i <= 9; i++) {
    for (j = 1; j <= 9; j++) {
      if (i * j === input) {
        canBeCaluculated = "Yes";
      } else {
        break;
      }
    }
  }
  console.log(canBeCaluculated)
}

Main(10); // => YES
Main(300); // => NO

```

## 解説
やり方は2通り考えられます。

1. 九九を全て試して入力値と同じものがあれば Yes を出力
2. 入力値を1-9まで順番に除算していき、割り切れてかつ商が1以上9以下の整数であれば Yes を出力

今回は1でやりました。 for 文で掛ける側と掛けられる側を回して、入力値と同じであれば `Yes` に変更してループを抜けるようにしています。

2のほうがスマートですし、計算回数も少ないので処理も速いですが、九九（合計81回の評価）しか行わないのであれば誤差です。
処理方法を迷ったときはなるべく簡単な方を選ぶように、、（自戒）
React＋TypeScriptでもLIFFしたい

# はじめに
[LIFF v2](https://developers.line.biz/ja/reference/liff/)が新しく発表されたりしたわけですが、これを**React**と**TypeScript**でできないかと色々と試してみたのでそれを記事にしてみました。今回は導入方法に重点を置いたので、v2の機能は試さずに`SendMessage`ができるかどうかをやってみました。
つくったコードは[こちら](https://github.com/ufoo68/react-liff)に置いてます。

# まずはテンプレート作成
[こちら](https://qiita.com/Panda_Program/items/33bd7882233fa6d1cb48)を参考に`create-react-app`をしました。まずはプロジェクトを作成します。

```
yarn create react-app react-liff --typescript
```

次にTypeScriptやら諸々を入れます

```
yarn add typescript @types/node @types/react @types/react-dom @types/jest
```

# liff-typeを入れる
この[liff-type](https://www.npmjs.com/package/liff-type)を入れることで、TypeScriptでもエラーを吐くことなくLIFFのライブラリをコンパイルすることができます。まずは`yarn add`します。

```
yarn add -D liff-type
```

そして次に`.tsconfig`に以下のものを足します。

```js
{
    "compilerOptions": {
        "types": ["liff-type"]
    }
}
```

これで、`window.liff`と入力してもエラー表示しなくなり、LIFFの予測変換が使えます。

あとは、HTMLファイルの中に以下のタグも入れるのを忘れずに。

```html
<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
```

# SendMessageをしてみる
まずは、[line-message-builder](https://www.npmjs.com/package/line-message-builder)を入れます。

```
yarn add line-message-builder
```

また、v2では`liff.init()`のときに`LIFF-ID`が必要みたいです。今回は`.env`で環境変数を作ります。どうやら`create-react-app`は`dotenv`なしで環境変数が呼びだせるみたいです。条件として、先頭に`REACT_APP`をつける必要があります。以下のような感じで`.env`ファイルをつくって、プロジェクトのルートディレクトリ直下に置きます。

```:.env
REACT_APP_LIFF_ID="LIFF-ID"
```

そして、`App.tsx`を以下のように書き換えます。

```react
import React from 'react'
import './App.css'
import { buildReplyText } from 'line-message-builder'

const App: React.FC = () => {
  const sendMessage = () => {
    liff.init({ liffId: process.env.REACT_APP_LIFF_ID as string }).then(() => {
      if (!liff.isLoggedIn()) {
        liff.login({})
      }
      liff.sendMessages(buildReplyText(['Send Message']))
    })
  }
  return (
    <div className="App">
      <button className="button" onClick={sendMessage}>
        Send Message
      </button>
    </div>
  )
}

export default App
```

# 公開する
LIFFでウェブページを取り込むには、何かしらの方法で公開してURL化をする必要があります。今回は[この方法](https://reactgo.com/deploy-react-app-github-pages/)を使ってGitHub Pagesで公開しようと思います。

準備として`create-react-app`でのプロジェクト名と同じ名前のGitHubレポジトリを作成して、`remote`で接続できる形にします。また、`package.json`に以下の要素を足します。

```js
{
    "homepage":"https://yourusername.github.io/repository-name"
}
```

`homepage`のURLは自分のつくったレポジトリのGitHub PagesのURLに合わせます。次に`gh-pages`をインストールします。

```
yarn add gh-pages
```

インストールできたら`package.json`の`scripts`に以下のものを足します。

```js
{
    "scripts":{
        "predeploy": "yarn build",
        "deploy": "gh-pages -d build",
    }
}
```

あとはそのまま以下のコマンドでデプロイします。

```
yarn deploy
```

あとは、LIFFの設定ページで公開したURLを紐付ければ完了です。

# デモ
こんな感じで「Send Message」と表示されれば成功です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209689/448c13de-4d08-2a52-0749-255681b409b9.png" width="300px">


# さいごに
`liff-type`を使えば自分の慣れ親しんでる**React**と**TypeScript**でLIFFが使えることがわかったので、これから色々と機能を試してみようかと思います。
VSCode + goenv + depでGo開発環境を整える

# はじめに
Go言語の開発環境を新規で構築するに当たり、自分用の備忘録とチーム展開するためにまとめました。
対象の環境はMacです。

Homebrewでgo自体をインストールしてしまうと最新バージョンになってしまい、
GCPで使えなかったりしたのでgoenvを導入しました。

## goenvの設定
### goenvのインストール
Go言語のコンパイラのバージョン管理を行ってくれるgoenv。Homebrewでインストールする。

```
$ brew install goenv
```

以下をシェルの設定ファイルに書き込む。

```
export PATH="$HOME/.goenv/bin:$PATH"
eval "$(goenv init -)"
```

### goコンパイラのインストール
goenvでインストール可能なバイナリを確認する。

```
$ goenv install -l
 1.2.2
 1.3.0
 .
 .
 1.11.4
```

任意のバージョンのバイナリをインストールする。

```
$ goenv install 1.11.4
```

インストールしたバイナリをPC上に設定する。

```
$ goenv global 1.11.4
```

オプションを`global`ではなく`local`にするとディレクトリ以下だけに設定することができる。
再度シェルの設定ファイルを開いて、`GOPATH`を追加する。

```
export GOPATH=$HOME/workspace/go
```

### depのインストール
パッケージの依存関係を解決してくれるツール。Homebrewでインストールする。

```
$ brew install dep
```

インストールが完了したら、任意のプロジェクト以下で下記コマンドを実行する。

```
$ dep init
```
以下のファイルとディレクトリが生成されている。

```
$ ls
Gopkg.lock  Gopkg.toml vendor
```

## VSCodeの拡張機能をインストール
VSCodeの拡張機能タブから、Microsoftの提供するGoプラグインをインストールする。
https://github.com/Microsoft/vscode-go

インストール自体はすぐできるが、これだけでは何も機能がアクティブになっていないみたい。

続いて、VSCodeのコマンドパレット（cmd + shift + p）を開き、`GO: Install/Update tools` を選択する。
すべてを選択してインストールを開始する。
<img width="400" alt="スクリーンショット 2019-11-04 16.57.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266914/3a0f3f17-e1f4-d0df-bfb4-dc6f77eda1ec.png">
インストールが完了したら再起動すればOK．

## 参考
- https://qiita.com/awakia/items/7bf03fd96a74502073b8
- https://qiita.com/Azizim_A/items/66564b5dc7597717932b
- https://qiita.com/melty_go/items/c977ba594efcffc8b567
WebStormでChrome attach debug

[English](https://dev.to/wataash/chrome-attach-debug-with-webstorm-328p)

[vscode-chrome-debug - Attach](https://github.com/microsoft/vscode-chrome-debug#attach)と同じことをWebStormでやる方法です。公式ドキュメント含め誰も書いてないっぽいのでメモ。

[vscode-chrome-debug - Attach](https://github.com/microsoft/vscode-chrome-debug#attach)の方法でChromeを起動して、Port 9229でChrome Debugging protocolをlistenさせます。Linuxの場合は `google-chrome --remote-debugging-port=9229` 実行後、以下のコマンドでちゃんとlistenしているか確認。

```sh
$ netstat -an | grep 9229
tcp        0      0 127.0.0.1:9229          0.0.0.0:*               LISTEN

$ lsof -i :9229
COMMAND   PID USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
chrome  18347  wsh  132u  IPv4 729759      0t0  TCP localhost:9229 (LISTEN)
```

WebStormでConfiguration "Attach to Node.js/Chrome" を作成：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167409/2d45d2cc-d993-8633-3113-cfd90c1a3096.png)

作成したConfigurationでDebugを開始すると、Chromeで開いているタブ一覧が表示されるので、デバッグしたいタブを選びます。今回は[FirebaseチュートリアルのFriendly Chat](https://github.com/firebase/friendlychat-web)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167409/a9310b13-1e14-27dc-170d-1cc7ef565d0a.png)

無事ブレークポイントにヒットして人権を手にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167409/c5470ab2-e9b0-1ed7-c4bc-606eb4cfe38d.png)
ベイズの定理を図示してみた

#はじめに

PRMLを参考にしながら、ベイズの定理を図示してみました。

#ベイズの定理の式

任意の確率変数を$ X,Y $とすると、以下の式がなりたちます。

$$ P(Y | X) = \frac{P(X|Y)P(Y)}{P(X)} $$

ここで$P(Y|X)$はXが起こった時にYが起こる確率で、$P(X|Y)$はYが起こった時にXが起こる確率を表しています。
、、、とは言ったものの、なぜこの式が成り立つのかイメージしずらいですよね。(少なくとも私はそうでした...)
なので、なるべく図を用いてこの式を紐解いて行こうと思います。

#それぞれの確率の図示
具体的な例として、以下のような黒い玉と白い玉が入っている赤箱、青箱、黄箱、緑箱がある状況を考えてみます。
![箱.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/05ca91b5-fe46-8068-5489-dc969c380ab1.png)
これらの箱から玉を取り出す場合、どの箱を選ぶか、どの玉を選ぶか、という二つの選択が必要です。これらの二つの選択がそれぞれ確率変数$X,Y$とすると、以下のように表すことができます。
$$ X = {青箱,赤箱,黄箱,緑箱}$$
$$ Y = {黒玉,白玉} $$



この状況の中で、目を閉じて玉をどれかの箱から取り出したら、黒玉が出てきました。この時、選んだ箱が黄箱である確率$P(X=黄箱|Y=黒玉)$を求めてみましょう。
まず、確率変数$X,Y$の具体数ををまとめてみます。
![ベイズ_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/752037cc-5698-072a-48bb-b6b854975590.png)

ここで、黄箱に含まれる玉の個数を緑の網かけ、黒玉の全数を黄色の網かけ、黄箱かつ黒玉を選ぶ個数を赤丸で表します。すると、黒玉を選んだ時に、黄箱である確率は以下のように表せます。
![ベイズ_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/f14eb6eb-addc-184c-cfc3-0455021d129f.png)
ここで、オレンジ色の格子は全ての玉の数となります。
上図を式で表すと以下のようになります。

$$ P(X=黄箱|Y=黒玉)=\frac{P(Y=黒玉|X=黄箱)P(X=黄箱)}{P(Y=黒玉)}  $$

実際に計算すると以下のようになります。

$$ P(X=黄箱|Y=黒玉)=\frac{\frac{1}{4}\frac{4}{16}}{\frac{9}{16}}=\frac{1}{9}$$


#終わり
最後の方が駆け足になってしまったので説明が雑になってしまいました。もっと研鑽します、、、
xcodeのアップデートが進まない場合の対処方法

#はじめに
xcodeをアップデートするためにAppStoreからxcodeのアップデートを押してもずっとくるくる回っているだけでダウンロードが進まないことがよくあります。少なくとも初めてMacを買った２０１７年頃から何度も発生しています。
私の環境で成功率が高い対象方法があるので備忘録として残しておきます。

#手順

１．「/アプリケーション/xcode.app」のファイル名を変えます。
２．LaunchPadでxcodeのダウンロードが開始されたことを確認します。
３．「/アプリケーション/xcode.app」のファイル名をもとに戻します。


#さいごに
こんな対処を毎回しているのも虚しくなるので根本的解決方法をご存じの方がいっらしゃいましたら情報をぜひください。
typescriptでfile-loaderを入れようとして躓いた話

#はじめに
こんにちは。当方、駆け出しのフロントエンドエンジニアです。
初めて記事に書き起すので拙い点あるかと思いますが、コメントにてご指摘いただけますと大変ありがたいです。

#環境
- node v12.13.0
- webpack ^4.33.0
- webpack-cli ^3.3.4
- typescript ^3.5.2
- file-loader ^4.2.0
- react ^16.10.2
- npm ^4.1.2

#目的
画像ファイルを読み込みたい！！！！！！！！！！

#目的のために必要なこと
- file-loaderを導入
- 画像ファイルを使いたい場所でimport
- 画像ファイルの型解決

#前提
- 画像ファイルは適当な場所にすでに置いてあります
- 適宜読み替えてください

**ファイル構成**

```
front-end/
├── node_modules/
├── package-lock.json
├── package.json
├── dist            // バンドルしたファイルをここに吐き出す
│   └── index.html
│   └── index.js
├── src               // バンドルする前のソースコードをここへ
│   ├── index.js      // 起点となるファイル
│   ├── index.html      
│   ├── components
|   |    └── icon
|   |         └── constant.tsx   // インターフェースや定数などを書く
|   |         └── index.tsx   // iconを表示するコンポーネント
│   └── static        // 好きな画像を入れてくだちい
│        └── calender.svg
|        └── file.svg
├── types
|   └── index.d.ts        // 型定義ファイル
|
├── .babelrc          // babelの設定ファイル
├── tsconfig.json    // typescriptの設定ファイル 
└── webpack.config.js // webpackの設定ファイル
```

#手順
### 1.file-loaderを導入
npmを使用してインストールします。

```
npm install file-loader --save-dev
```

webpackにloaderを適用するための設定を書きます。

```javascript:webpack.config.js
module.exports = {
  module: {
    rules: [
      // 省略
      {
        // iフラグを使うと大文字小文字を区別しない
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: "file-loader",
      },
    ]
  },
  // 省略
};
```
### 2.画像ファイルを使いたい場所でimport

失敗例: importしてないのでうまく行かない・・

```typescript:failure.tsx
type IconList =
  | "calendar"
  | "file";

export interface IconProps {
  name: IconList;
}

export const IconListDict: { [P in IconList]: string } = {
  calendar: "../../static/calendar.svg",
  file: "../../static/file.svg",
};
```

成功例：

```typescript:success.tsx
import calendar from "../../static/calendar.svg";
import file from "../../static/file.svg";

type IconList =
  | "calendar"
  | "file";

export interface IconProps {
  name: IconList;
}

export const IconListDict: { [P in IconList]: string } = {
  calendar: calendar,
  file: file,
};

```


### 3.画像ファイルの型解決

javascriptだと手順２でおしまい！にできるのですが、typescriptだとvscode上でエラーを吐くのでもうひと手間必要です。
なぜエラーになるかというと、typescriptのdeclaration space に *.svg なんてものはないからです。（宣言されてない）

ないのであれば宣言しましょう！
型定義ファイルを作成します。

```typescript:index.d.ts
declare module "*.svg" {
  const src: string;
  export default src;
}
```

typescriptの設定ファイルに先ほど作成したファイル(index.d.ts)を読み込むように追記します。

```json:tsconfig.json
{
    "compilerOptions": {
      // 省略
      "typeRoots": ["types", "node_modules/@types"]
    },
    // 省略
}
```


#躓いたこと
**どの記事を見てもfile-loaderを導入する方法（手順１）までしか載ってない**

typescript側の記述がないので、何が不足しているのか気が付かずに無駄に時間を消費してしまいました・・orz
qiitaなど人様が書いた記事のほうがわかりやすく読みやすいのでいつも公式から逃げてしまうのですが、それが完全に裏目に出た良い例ですね。
参考にするなという話ではなく、まず公式ドキュメントを読みましょうね、ということです。深く反省しています。

#まとめ
**公式ドキュメントちゃんと読もうな！！！！！！！！！！！！！！（血涙）**

#参考資料
https://github.com/webpack-contrib/file-loader
https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations
gitのコマンド備忘録

仕事柄、利用している「git」について混乱する部分をまとめました。

####merge(マージ)とは
　別ブランチの作業を自ブランチに取り込む

```
$ git checkout X
$ git merge Y
      A---B Y             A---B Y
     /             =>    /     \
    C---D---E X         C---D---E---F X
```
####rebase(リベース)とは
　自ブランチでの作業を指定したブランチの作業として新しく追加する

```
$ git rebase X
$ git rebase X Y
      A---B---C Y                        A'--B'--C' Y
     /                =>                /
    D---E---F---G X        D---E---F---G X
```
####cherry-pick(チェリーピック)とは
　特定の作業を自ブランチに取り組む

```
$ git rebase C
      A---B---C Y           A---B---C Y
     /                =>   /
    D---E---F---G X       D---E---F---G---C' X
```

####まとめ
作業するときによく忘れるコマンドを集めてみました。

####参考サイト
[Git - Reference](https://git-scm.com/docs)
ReactPlayer+SafariでgetUserMediaするとReactPlayerで再生していた動画が再生される

ReactPlayerでビデオを再生した後、
navigator.getUserMediaを実行すると、何故かReactPlayerで再生していたビデオが再生されます。
(iOS＋Safariの場合のみ)
なお、通常のvideoタグ等による再生では発生しませんので、ReactPlayer限定の現象です。

# 対応策
``ReactPlayerのproperty playingにfalseを渡す。``
unmountされる前に、ReactPlayerの``playing``にfalseを渡す必要があります。
仮にReactPlayerがunmountされても、画面がreloadされない限り何故か情報が残存し、getUserMediaを行ったタイミングで再生されてしまいます。

なお、playingをfalseにするためにReactPlayerを保持しているコンポーネントのcomponentWillMountを使ってもダメです。
componentWillMountが呼ばれた後にrenderが走らないためです。
Componentをunmountさせる処理の前に差し込みましょう。
Github desktop でログインできなくなったら。　Github Desktop login keychain Error

# Github desktopにログインできなくなったら
Github Desktopをいじっているとこんなエラーが出てきてpushも何もできなくなり、焦りました。
<img width="596" alt="loginerror.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513524/214b869c-afd0-503e-c7cc-4f24ca121362.png">
Error文によるとキーチェーンにあるアカウントトークンが保存できない。”ログインキーチェーンを解除したか確認してね”と。

### Error 
GitHub Desktop was unable to store the account token in the keychain. Please check you have unlocked access to the 'login' keychain.

色々調べて解決できたので今回はこのエラーの解決方法をご紹介します。

###1.Finder/アプリケーション/ユーティリティ/キーチェーンアクセス　アプリを開く。
<img width="668" alt="utility.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513524/7cd60e8c-4fa2-96d1-0b3f-3ec95cc4d2ae.png">

###2.左のメニューの "ログイン" を右クリック
###[キーチェーン"ログイン"を解除]となっているのでクリックして解除状態にする
もう一度右クリックして下の図のようになっていたらなにもしなくてOK
鍵のマークが開いた状態でOK

<img width="371" alt="keychain-lock.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513524/66571e4e-24b1-d190-c82e-041cdd6d9ef6.png">

###3.Github　Desktopに戻り、メニューバーのPreferencesからSign inを試してみてください
<img width="440" alt="スクリーンショット 2019-11-04 16.43.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513524/1fd2d166-0790-ff56-6cd3-62c02b6208f5.png">

以上
これでサインインできたはずです。
PowerToysでウインドウをいろいろな並べ方にする

# 何がしたいのか
課題：Windows 10のデフォルト機能では画面を十字型に分けた四分割しかできない。
やりたいこと：もっとたくさん、いろいろな画面分割をしたい

これを実現するのが、**PowerToys**に含まれる機能の一つである、**FancyZones**です。

こんな感じです↓
![これをこう.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86935/17b0aca0-7083-da07-6091-f97cc9b1180e.png)


# PowerToysとは？
Microsoftがオープンソースとして公開しているツール群。

[窓の杜][1] さんの記事によると、Windows 95やXPの時代に活発に開発されていたものとのこと。

Windows 10が成熟してきたこともあるためか、このPowerToysがOSSとして復活し、少しずつ便利ツールをリリースし始めている。

# インストール
[GitHub][2]経由でインストールします。

https://github.com/microsoft/PowerToys/releases/

1. リンク先から「PowerToysSetup.msi」をダウンロード
<img width="602" alt="コメント 2019-11-04 161343.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86935/16d68690-f8ea-6640-3fe2-fa107f6da3b1.png">

2. インストーラを起動して指示に従う。

以上！簡単！

# 実行
インストールしたら、実行します。

すると、タスクバーに見慣れぬアイコンが表示されます。

<img width="344" alt="コメント 2019-11-04 162952.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86935/a9600973-3548-9c56-dc32-9e16c147ff26.png">

これが表示されれば、準備おｋです。


# 使い方
アイコンが確認出来たら、アイコンをダブルクリック。
すると、以下の画面が表示されます。

<img width="506" alt="コメント 2019-11-04 163216.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86935/e7d4b6a3-e96c-f6a7-27bb-41c9bde40cda.png">

ここから、今回は「FancyZones」を選択。そして、「Edit Zones」をクリックすると、いかにもウインドウ分割できそうな編集画面が表示されます。

<img width="608" alt="コメント 2019-11-04 163442.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86935/a3cbeeaa-ccc3-97d8-9081-4d64f7cf2e85.png">

今回は分割数を示す数字を「３」、分割方法は「Columns」を選択して「Apply」をクリック。

<img width="608" alt="コメント 2019-11-04 163616.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86935/10e02692-ce06-942f-ff76-0fc4b0867535.png">

すると元の画面に戻ります。
そして、おもむろに**Shiftキーを押しながら**適当なウインドウを動かすと、画面に箱が表示されます。
<img width="957" alt="コメント 2019-11-04 164200.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86935/e98210c6-58e8-693e-e129-9c348504c227.png">

後ろに表示されている箱に合わせてマウスを離すと、箱の形の通りにウインドウが変形します↓こんな感じに。
<img width="957" alt="コメント 2019-11-04 164323.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86935/e0df878d-dbf8-3b6c-b1bc-6e195d7ac0e4.png">

これで、基本の使い方はマスターです。

# ちょっと応用

もし、Shiftキーを押さなくても箱に合わせてウインドウを変形したい場合、FancyZones Settings画面のオプション「On: Hold Shift key to enable zones while dragging」をオフにします。

# まとめ
Windowsで十字以外のウインドウ分割を簡単に実現できました。
画面分割数も今回は「３」でしたが、現時点で最高40まではいけました。これで将来16Kディスプレイが登場しても安心ですね。

今後もPowerToysが増えていくとうれしいです！

[1]: https://forest.watch.impress.co.jp/docs/news/1205693.html
[2]: https://github.com/microsoft/PowerToys/releases/
plunkerでtensorflow.js その16

#概要

plunkerでtensorflow.jsやってみた。
lstm使ってみた。
abならc、bcならd、xyならzと学習させて、
abでcが出たら、bcにして、推定繰り返して、
abcを答えさせる実験。

#サンプルコード


```
tf.setBackend('cpu');
let index2alphabet = [];
let alphabet2vector = {};
let trainXArray = [], 
  trainYArray = [];
for (let i = 0; i < 26; i++) 
{
  index2alphabet[i] = String.fromCharCode('a'.charCodeAt(0) + i);
}
for (let i = 0; i < 26; i++) 
{
  alphabet2vector[index2alphabet[i]] = Array(26).fill(0);
  alphabet2vector[index2alphabet[i]][i] = 1;
}
trainXArray.push([alphabet2vector['y'], alphabet2vector['z']]);
trainYArray.push(alphabet2vector['a']);
trainXArray.push([alphabet2vector['z'], alphabet2vector['a']]);
trainYArray.push(alphabet2vector['b']);
for (let i = 0; i < 26 - 2; i++)
{
  trainXArray.push([alphabet2vector[index2alphabet[i]], alphabet2vector[index2alphabet[i + 1]]]);
  trainYArray.push(alphabet2vector[index2alphabet[i + 2]]);
}
const trainX = tf.tensor3d(trainXArray);
const trainY = tf.tensor2d(trainYArray);
const model = tf.sequential();
model.add(tf.layers.lstm({ 
  units: 64,
  returnSequences: false,
  inputShape: [2, 26]
}));
model.add(tf.layers.dense({
  units: 64, 
  activation: "relu"
}));
model.add(tf.layers.dense({
  units: 26, 
  activation: "softmax"
}));
model.compile({
  optimizer: 'adam',
  loss: 'categoricalCrossentropy'
});
model.fit(trainX, trainY, {
  epochs: 160,
  verbose: 0,
  validationData: [trainX, trainY],
}).then(() => {
  let i = 0;
  let p0 = 'y';
  let p1 = 'z';
  for (i = 0; i < 26; i++)
  {
    let testXArray = trainXArray;
    testXArray[0] = [alphabet2vector[p0], alphabet2vector[p1]];
    const testX = tf.tensor3d(testXArray);
    const predicts = model.predict(testX);
    const predictsArray = predicts.argMax().arraySync();
    const predictAlphabet = String.fromCharCode('a'.charCodeAt(0) + predictsArray[0]);
    document.write(predictAlphabet);
    p0 = p1;
    p1 = predictAlphabet;
    alert(p0 + ' ' + p1)
  }
});

```

#成果物

https://embed.plnkr.co/8NZDUG8JJOjX1eo7iGlS/

以上。
【ASP.NET Core MVC】ASP.NET Core MVCであみだくじを作ってみる 1 (開発環境の準備)

# 概要
ASP.NET Core MVCを学習したときの備忘録です。
あみだくじを引ける簡単なアプリを作成していきます。
Razorとcssの学習も同時に行います。

ASP.NET Core MVCについては[こちら](https://docs.microsoft.com/ja-jp/aspnet/?view=aspnetcore-3.0#pivot=core)を参照しました。

# 開発環境をつくる
私が以前投稿した記事 [Visual Studioインストール](https://qiita.com/plusM/items/c859c5d54ac56a6e80e5#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B)
この手順の3.で「ASP.NETとWeb開発」を選択します。
![インストーラ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/12b5b55f-3dc5-133a-035d-05cdc9d29407.png)
インストール後、「Visual Studio Community 2019 起動」→「新しいプロジェクトの作成」と進みます。
「ASP.NET Core Webアプリケーション」を選択します。
![プロジェクト作成.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/326c53ca-33b7-77cc-38d2-70734c9f1ea8.png)
プロジェクト名、ソリューション名を「Amidakuji」と命名しました。
![プロジェクト構成①.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/9d20dcb1-fbdc-3f5a-0250-65ae09e87296.png)
MVCでアプリを作成するので「Webアプリケーション(モデル ビュー コントローラー)」を選択します。
![プロジェクト構成②.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/402d98e7-8c3a-1bd5-1c28-f41e04850814.png)
プロジェクトが完成しました。実行してみます。
![プロジェクト完成.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/87d56e05-3fb7-0732-e171-fa963ea65d80.png)
ブラウザが起動して、下図のように表示されれば成功です。
![実行.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/8cb2b884-c6d6-ba42-2ab8-90d0f1fa1b4d.png)
# まとめ
今回は、ASP.NET Core MVCの開発環境の準備までを行いました。
次回は、ビューを追加してHome画面から呼び出せるようにします。
次回分はこちら⇒[ASP.NET Core MVCであみだくじを作ってみる 2 (ビュー,コントローラーの追加)](https://qiita.com/plusM/items/fc23683bd81a0a568f00)
golangを試せる環境を気軽に作れるリポジトリを作りました

golangを試しにやってみたい人や今の環境を汚したくない人とか向けに気軽にgolangを試せる環境作成のリポジトリを作りました。

https://github.com/rspepe/docker-compose-go

docker-composeが動作する環境であれば動くと思います。
※Windowsは知らない。

READMEにあるとおりですが

```
docker-compose up
```

だけでライブリロードされる環境が立ち上がります。

main.goファイルを編集保存すると自動で再ビルドが走り、実行結果が標準出力でコンソールに表示されます。

お試しあれ
CentOS7のruby on railsでテストページを表示させる

# はじめに

- 以前書いた記事の続きです。
  - https://qiita.com/masayoshist/items/5f74aac828915352d9a8
- 漫然と入れたらRails6.0.0が入りました。

# 必要パッケージのインストール
いろいろ入っていないのでインストールする。

```
(node.js)
$ curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -
$ sudo yum install nodejs

(wget)
$ sudo yum install wget

(yarn)
$ sudo wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
$ sudo yum install yarn

(WebPacker)
$ rails webpacker:install
```


# rails serverを起動する（その１）
起動時に`--bind`の`-b`オプションで0.0.0.0を指定しないと他のサーバから繋げられない。

```
$ rails server -b 0.0.0.0
```
→起動はするけど、アクセスするとSQLiteのバージョンが古い…と怒られる。

# SQLiteの最新版インストール

SQLite自体のインストール

```
$ wget https://www.sqlite.org/2019/sqlite-autoconf-3290000.tar.gz
$ tar zxvf sqlite-autoconf-3290000.tar.gz
$ cd sqlite-autoconf-3290000
$ ./configure --prefix=/opt/sqlite/sqlite3
$ make 
$ sudo make install
```

gemの再インストール

```
$ gem uninstall sqlite3
$ gem install sqlite3 -- --with-sqlite3-lib=/opt/sqlite/sqlite3/lib
```

# rails serverを起動する（その２）

```
$ rails server -b 0.0.0.0
``

やっとテストページ表示できた…

# 参考にした記事
- https://qiita.com/libertyu/items/1eb74adc817ab8971100
- https://qiita.com/daskepon/items/16a77868d38f8e585840
- https://qiita.com/seiyamaeda/items/18439866acf9ded9a2de
- https://qiita.com/8zca/items/175efb0612070530d186
重複確認

set型は重複を削除してくれることを利用する。
下記の例だとtest1-5の変数にそれぞれ何らかの値が入っている想定。
例えばtest1とtest4が全く同じ値の時とかに重複判定される。

```python:test.py
a = {test1, test2, test3, test4, test5}
b = [test1, test2, test3, test4, test5]
if len(a) != len(b):
    print('重複あり')
else:
    print('重複無し')
```
Windows 10 (1903) KB4517389 の既知の不具合

<font color="blue">以下の不具合は [KB4522355](https://support.microsoft.com/en-us/help/4522355) で解消するとの報告が挙がっています。最新のアップデートを試してみてください</font>

2019年10月8日-KB4517389（OSビルド18362.418）の更新で様々な不具合が発生しているようです。
例としては、「Microsoft Edgeが起動しない」など。
これらの不具合はMicrosoftの社内では発生しないとのことで、いわゆる「おま環」のようですが、筆者のPCでも同様の不具合が発生しています。

では、発生している不具合をクリティカルな順に列挙してみます。

##スタートメニューをクリックすると「重大なエラー」と表示される。
「スタートメニューが動作していません。次回サインイン時に修正を試みます。」

[KB4515384 Windows 10 causes Critical error with Start Menu](https://answers.microsoft.com/en-us/windows/forum/all/kb4515384-windows-10-causes-critical-error-with/e09f04e3-a107-4160-9306-6c3b167bde76)

##Microsoft Edge が起動しない
Edgeのショートカットアイコンをダブルクリックしても起動しない。(Windowsヘルプ内のURLをクリックすると起動できるらしい)

[Edge doesn't work](https://answers.microsoft.com/en-us/edge/forum/all/edge-doesnt-work/8ee36166-a84c-41fb-9306-24c81232ee84)

##タスクバーの「インターネットアクセス」が表示できない為、WiFiを切り替えることができない
タスクバーのボタン類が無反応になる現象による不具合の一つです。

##時計をクリックしてもカレンダーが表示されない
タスクバーのボタン類が無反応になる現象による不具合の一つです。
タスクバーの右側の時計を左クリックするとカレンダーが表示されるはずですが、アップデート後にこの機能が使えなくなります。

##タスクバーのアプリケーションアイコンの右クリックが無反応
ピン留めされたアプリケーションや、起動中のアプリケーションを右クリックしても、コンテキストメニューが表示されず、「ピン留めの追加」、「新しいウィンドウで起動」などの機能が使えなくなっている。

#「インストールされた更新プログラム」で「KB4517389」をアンインストール
これらの不具合は、KB4517389 をアンインストールすると回復するとの報告があります。
<font color="red">以下の操作は自己責任で行ってください。</font>

##「Windowsの設定」からアンインストール

歯車アイコンの「Windowsの設定」
→「更新とセキュリティ」を押す
→　真ん中あたりにある「更新の履歴を表示する」をクリック
→ 画面の上のほうにある「更新プログラムをアンインストールする」のリンクをクリック
「インストールされた更新プログラム」で「KB4517389」を選択し「アンインストール」を押します。

##「コントロールパネル」からアンインストール
スタートメニュー->コントロールパネル->プログラムと機能->インストールされた更新プログラム
で「KB4517389」を選択し「アンインストール」を押します。
Android端末からMacのlocalhostに接続する際に苦戦した件

# やりたいこと
Android端末からMac Book Airのlocalhostにアクセスしたい。

Mac Book AirでWebページを開発中。Android端末とMac Book AirをUSB接続し、AndroidのChromeにて、http://localhost ... とアクセスするとlocalhostにアクセスできる状態にする。

# 環境

```
Mac OS: Mac OS 10.14.3
Android: バージョン7.0
端末機種: FTJ162D
```

# 苦戦した箇所
USBケーブル不良でAndroid端末を認識しなかったのが要因であった。
どういう場合に、USBケーブル不良を疑うべきか記録する。

# 実施したこと

### Mac Book AirがAndroid端末を認識しているか知りたい

1. [Android File Transfer](https://www.android.com/filetransfer/) をインストール

2. `Android File Transferを起動。

3. 以下の画面が表示された場合、Mac OSは、Androidを認識していない。
![スクリーンショット 2019-11-04 14.50.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131286/14b5ac02-35e4-656e-a754-a4463723f45b.png)

4. 以下の画面が表示された場合、Mac OSは、Androidを認識している。
![スクリーンショット 2019-11-04 14.49.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131286/e942b056-52f4-de68-7017-b355ba78f7c2.png)

### 「端末のストレージにアクセスできません」のエラーが出る。

Android端末をUSB接続した際に、以下のメッセージが表示される。
![スクリーンショット 2019-11-04 14.56.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131286/842d6304-cd20-8edb-fdce-2492a0b398d9.png)

このメッセージにて、「ファイルを転送する」を選択する。
そうすると、「Android File Transer」が正常に起動する。

### AndroidをUSBデバッグモードにする

▼以下のURL通りに操作することで完了
[Android端末を「デバッグモード」(USBデバッグ)に設定する方法](https://tunesgo.wondershare.jp/android/debug-mode.html)

### localhostに接続する設定をする

▼以下のURL通りに操作することで完了
[Androidの実機からPCのローカルサーバにアクセスする](https://www.suzu6.net/posts/141-android-to-pc-localhost/)

※上記記事では、OSがWindowsになっていますが、Macも同様の操作でできる。

# 番外編: Androidで画面キャプチャを取る方法
本記事を書くために調べた。

撮影したい画面で、

```
1.「電源ボタン」長押し
または
2.「電源ボタン」+「音量小ボタン」長押し
```
Python で flatten

# 環境
関数等は特に使わないのでなんでもよい．

```python3
import sys
print(sys.version)
# 3.6.4 |Anaconda custom (64-bit)| (default, Jan 16 2018, 18:10:19) 
# [GCC 7.2.0]
```

# Code
```python3
nested = [[1, 2, 3],
          [4, 5, 6],
          [7, 8, 9]]

flatten = []
for inner in nested:
    flatten += inner

flatten
# [1, 2, 3, 4, 5, 6, 7, 8, 9]
```
Sublime Text で Processing ができない問題 in  Linux

# Sublime Textを使ってProcessingができない問題(を解決)

ある時、[この方の記事](https://qiita.com/tsukumaru/items/abf24c1ae0496dd99e91
)を見てProcessingをSublime Textでやろうとしたことがある。

環境はLinux(Lubuntu)

すると何故か上手く行かなかった。具体的には

```terminal:result
[Errno 2] No such file or directory: 'processing-java'
[cmd: ['processing-java', '--force', '--sketch=~/App/processing/texts/test', '--output=~/App/processing/texts/test/build-tmp', '--run']]
[dir: ~/App/processing/texts/test]
[path: /usr/local/bin:/usr/local/bin:/home/rei/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin]
[Finished]
```

これを見るとどうやらprocessing-javaがないらしい。

他の記事を見て回ると

```terminal:termial
$ which processing-java
```

をしてみろと。すると返事が帰ってくる。

```terminal:terminal
/home/userName/App/processing/processing-java
```
ターミナルで実行しようとすると当然のようにできるのだ。これは困った。。。
。
。
。
と、よく知ってる人なら変だとすぐ気づくかもしれない。

実際、私は気づかなかった。

記事を見てやっていたのだが、その際エイリアスを作る場面で下記のように作っている(引用)

```terminal:terminal
$ sudo ln -s /opt/processing/processing-java /bin/processing-java
```

resultの部分にあるpathというものを今一度よーく見てみると。。。？

```terminal:result
[path: /usr/local/bin:/usr/local/bin:/home/rei/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin]
```

エイリアスを作った/binがpathの中に入っていないのだ。これは大きな問題である。
というわけで

```terminal:.bashrc
export PATH=$PATH:"/bin"
```

と書いてsourceして完了

#まとめ

Pathはちゃんとしなきゃいけないですね
これで解決できたのでProcessingを遊ぼうと思います。
それでは(｀･ω･´)ﾉｼ
npm install --save で JSON.parse エラーが出る場合は package.json が壊れているので 空 JSON でも書き込もう #npm #node

# Error

```
$ npm install --save puppeteer
npm ERR! file /Users/yumainaura/.ghq/github.com/GuildWorks/insides/insides-api/package.json
npm ERR! code EJSONPARSE
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected end of JSON input while parsing near ''
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yumainaura/.npm/_logs/2019-11-04T04_04_46_126Z-debug.log
```

# 解決

```
echo '{}' > package.json

npm install --save puppeteer
```


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2665








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
有償ゆえにかゆいところに手が届く、ローポリ化 Asset の Mesh Simplify を使ってみた

Unity Asset でハイポリのオブジェクトをローポリに変換するものはいくつかあると思いますが、そのうちの一つの候補である [Mesh Simplify](https://assetstore.unity.com/packages/tools/modeling/mesh-simplify-43658) を使ってみました。

無償版のローポリ化 Asset である Mesh Optimizer を使ってみた記事は[こちら](https://qiita.com/matchyy/items/a4b1e232c3531ab8272a)です。

# TL;DR
少しお高い感じがするものの、簡単にハイポリをローポリに変換できる Asset です。かゆいところに手がとどいてる感じがするのが有償 Asset というところでしょうか。一気に削減することも、削減した mesh を戻すのも、ボタン一つでOKです。

# mesh simplify とはどういう Asset？
ハイポリの3Dモデルをローポリに変換することができる Asset です。

# 使い方
## 簡単
とても簡単、3ステップ。
1. Mesh Simplify をアタッチして
2. Vertex % を設定して
3. Compute mesh ボタンを押す
だけ。

![2019-10-31_09h27_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/c2e3daa3-8260-3f7b-6e32-64f8f8df5aad.png)

これだけで、Quality に設定した値にポリゴン数が削減されます。

# 実際に使ってみた
## 頂点数を削減できる
比較してみてみましょう。見た目はほとんど変わりありませんが、Stats を見ると減っているのがわかります。
※今回は各メッシュ毎に削減しています

項目  | 削減前 | 削減後 | 削減率 
------|--------|--------|--------
Tris  | 1.0M   | 245.0k |  23.9% 
Verts | 586.0k | 151.1k |  25.8% 
* 削減前
![2019-10-30_09h46_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/c3d55cc8-4ca4-44b0-9364-da94a9de7499.png)
* 削減後
![2019-10-30_09h46_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/8c54645e-4e8b-fb78-36d4-75cf641d18c1.png)

## 近くで見てみる
左が削減前、右が削減後です。その差がわかりますか？
![2019-10-30_09h47_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/c6f7b689-edb2-88ea-4187-448096a9a61e.png)

### 備考
赤い Cube がカメラの位置です。鳥居が 10mx10m ぐらいのサイズなので、かなり近くから見ています。
![2019-10-28_09h45_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/4e91e594-c89d-2984-16d6-325da96e1a16.png)

# 所感
## 一つずつ丁寧に削減できる
メッシュが6か所にあるので、Recurse にチェックを入れて、親から一回で削減することもできますが、
今回の鳥居の例では一つずつ削減しています。
これには理由が二つあります。
1. 形が特殊（鳥居は単純な四角や丸とかというわけではない）なので、少し削ると穴が空いてしまうため
2. メッシュ毎に削減することで削減率を変えてより削減に貢献できるため

## オプションが豊富
* Recurse Into Children があるので、親にScriptをアタッチすればすべて一気に削減できます。
  とりあえず試したいときはこれでやってみるのもありだと思います。
* Keep Borders というオプションがあります。
  これはxxするためのもので、削減率を上げても壊れにくくなります。

## Try and Error が簡単に試せる
見た目が壊れてしまっても、Restore ボタン一つで戻すことができます。
何回も簡単に試すことができますね。

## 削減にそこそこの時間がかかります。
今回の銅鑼のメッシュを15%にするのに、90秒程度かかりました。
（PCスペックに依存すると思います。）

# まとめ
メッシュ削減のためにはとても有用な Asset だと思います。
有償ならではのかゆいところに手が届くオプションや機能を備えていると感じました。

* 簡単。誰でもすぐできる。
* かゆいところに手が届く機能が多い。
  * 一気にまとめてやることもできるし、一つずつ丁寧に削減していける
  * 壊れても Restore Original Mesh... ボタン一つで戻せる
* オプションがあるので削減率を上げても壊れにくい

# おまけ
この Asset は Automatic LOD を購入すると、Asset に含まれています。
私は Automatic LOD を購入して使っています。
（言い換えると単体で買っていないので、違うものだったらどうしよう。。。）
try-with-resourcesのclose時例外

```java

public class Main {
    public static void main(String... args) throws Exception {
        try (Closable1 c1 = new Closable1(); Closable2 c2 = new Closable2()) {
            // none
        }
    }

    static class Closable1 implements AutoCloseable {
        @Override
        public void close() throws Exception {
            System.out.println("1 close.");
            throw new Exception("1 failed");
        }
    }

    static class Closable2 implements AutoCloseable {
        @Override
        public void close() throws Exception {
            System.out.println("2 close.");
            throw new Exception("2 failed");
        }
    }
}
```
std-in

```
2 close.
1 close.
```
std-error

```
Exception in thread "main" java.lang.Exception: 2 failed
	at com.company.Main$Closable2.close(Main.java:23)
	at com.company.Main.main(Main.java:8)
	Suppressed: java.lang.Exception: 1 failed
		at com.company.Main$Closable1.close(Main.java:15)
		at com.company.Main.main(Main.java:6)
```
LightGBM UserWarning: Using categorical_feature in Dataset

機械学習で定番の Gradient Boosting Decision Tree の定番のライブラリ LightGBM でカテゴリー変数を扱う場合について。執筆時点の LightGBM バージョンは 2.3.0.


## 結論

カテゴリー変数を指定する方法は少なくとも３つあるけど、これを書いている時点では (3) `dtype='category'` が良さそう。(1) (2) もよく使われているけど UserWarning が出る; 最近、非奨励になった？

## ３つの方法

### 1. Dataset に categorical_feature を設定

```
lgb_train = lgb.Dataset(X_train, y_train, categorical_feature=['A'])
```

`X_train` は `pandas.DataFrame` で `'A'` はカテゴリー変数の column 名。

UserWarning がでる:

```text
python3.7/site-packages/lightgbm/basic.py:1243: UserWarning: Using categorical_feature in Dataset.
  warnings.warn('Using categorical_feature in Dataset.')
```

はい、Dataset で categorical_feature を指定しましたが何か？


### 2. train() に categorical_feature を設定

```python
gbm = lgb.train(params,
                lgb_train,
                categorical_feature=['A'],
                )
```

UserWarning:

```text
python3.7/site-packages/lightgbm/basic.py:1247: UserWarning: categorical_feature in Dataset is overridden.
New categorical_feature is ['A']
```

そうですか、ここで categorical_feature を設定するのは非奨励？ (1) の `Dataset` と (2) の `train()` 両方で設定すれば UserWarning がでないけど、無駄に重複している気がする。

### 3. dtype='category' を使用

```python
X_train['A'] = X_train['A'].astype('category')
```

これだと UserWarning は出ない。最初に category 型にしておけば (1) の場合のように train と validation で２回 categorical_feature を指定しなくていいのも良い。category型は内部でほどよく小さい整数型を使うので、RAM にも優しい。これが良さそう。


この UserWarning がいつから出るようになったのか、今後も続くのかは不明。ネットで情報を見つけられなかったのでこの記事を書きました。最近の変更と思われる。
Stringに変換するときは何を使う？

##Stringに直すときって結構多くない？
おおくね？
特にPrimaryKeyとかは
intとかlongのこと多いだろうけど
API通信挟むときStringになったりとかするだろうし

ってことで変換は`String.valueOf`か`Object.toString`ですかね

```.java
package test;

import java.util.stream.Collectors;
import java.util.stream.IntStream;

/**
 * test
 *
 * @author me
 *
 */
public class Test1 {

	/**
	 * main
	 * @param args
	 */
	public static void main(String[] args) {
		System.out.println("-------計測開始-------");
		Long start1 = System.currentTimeMillis();
		run1();
		Long end1 = System.currentTimeMillis();
		System.out.println("String.valueOf() : " + (end1 - start1) + "ms");
		Long start2 = System.currentTimeMillis();
		run2();
		Long end2 = System.currentTimeMillis();
		System.out.println("Object.toString() : " + (end2 - start2) + "ms");
		System.out.println("-------計測終了-------");
	}

	/**
	 * {@link String#valueOf()}
	 */
	private static void run1() {
		IntStream.range(0, 5000000).boxed().map(String::valueOf).collect(Collectors.toList());
	}
	/**
	 * {@link Object#toString()}
	 */
	private static void run2() {
		IntStream.range(0, 5000000).boxed().map(Object::toString).collect(Collectors.toList());
	}

}

```

```結果
-------計測開始-------
String.valueOf() : 2024ms
Object.toString() : 904ms
-------計測終了-------

```

え、そんなちがうんだ...

まぁ`Object.toString`はプリミティブ型に使えないし、うーんって感じだ...

ちなみに

```.java
package test;

import java.util.stream.Collectors;
import java.util.stream.IntStream;

/**
 * test
 *
 * @author me
 *
 */
public class TestT {

	/**
	 * main
	 * @param args
	 */
	public static void main(String[] args) {
		System.out.println("-------計測開始-------");
		Long start1 = System.currentTimeMillis();
		run1();
		Long end1 = System.currentTimeMillis();
		System.out.println((end1 - start1) + "ms");
		System.out.println("-------計測終了-------");
	}

	/**
	 * いいのこれ？
	 */
	private static void run1() {
		IntStream.range(0, 5000000).boxed().map(v -> v + "").collect(Collectors.toList());
	}

}
```

```結果
-------計測開始-------
3021ms
-------計測終了-------

```

だめですねｗ
IOSTのハンズオンでのトークンコード

IOSTで HANDS ON TOKEN という名前のトークンを作成します．
発行はコントラクトからのみ可能で，コントラクトは発行の際にコントラクトのオーナー権限をチェックします．
トークンは自由に送信できます．
注意すべき点は，このコントラクトにもトークンが送られてくる可能性があることです．このコントラクト独自のtransferメソッドを用意することで，このコントラクト宛に送られてきたトークンの送信を可能にします．transferメソッドも，外部から自由に呼び出しできないように，コントラクトオーナー権限をチェックします．

```js

// このパラメータは書き換えてください
const tokenSymbol = 'hot';
const fullName = 'HANDSON_TOKEN';
const decimal = 6;
const totalSupply = 96000000;
class HandsOnToken {
    init() {
        // トークンの作成
        blockchain.callWithAuth('token.iost', 'create', [
            tokenSymbol,
            blockchain.contractName(),
            totalSupply,
            {
                fullName,
                decimal,
                canTransfer: true,
                onlyIssuerCanTransfer: false,
            }
        ]);
        // コントラクトのオーナーの設定
        storage.put('owner', tx.publisher);
    }
    can_update(data) {
        // オーナーの権限をチェック
        this._checkOwner();
        return true;
    }
    // トークンの発行
    issue(to, amount) {
        this._checkOwner();
        // 桁数を合わせる
        amount = this._amount(amount);
        // トークンの発行
        return this._callWithAuth('token.iost', 'issue', [tokenSymbol, to, amount]);
    }
    // このコントラクトからのトークン送信
    transfer(tokenSymbol, to, amount, memo) {
        this._checkOwner();
        amount = this._amount(amount);
        return this._callWithAuth('token.iost', 'transfer', [tokenSymbol, blockchain.contractName(), to, amount, memo]);
    }
    // トークンをいくらもっているか
    balanceOf(id) {
        return this._call('token.iost', 'balanceOf', [tokenSymbol, id]);
    }
    // 今までいくらトークンを発行したか
    supply() {
        return this._call('token.iost', 'supply', [tokenSymbol]);
    }
    // トークンの総発行枚数
    totalSupply() {
        return this._call('token.iost', 'totalSupply', [tokenSymbol]);
    }
    _amount(amount) {
        return new BigNumber(new BigNumber(amount).toFixed(decimal));
    }
    // コントラクトの権限を追加せずに呼び出し
    _call(contract, api, args) {
        const ret = blockchain.call(contract, api, args);
        if (ret && Array.isArray(ret) && ret.length >= 1) {
            return ret[0];
        }
        return null;
    }
    // コントラクトの権限を追加して呼び出し
    _callWithAuth(contract, api, args) {
        const ret = blockchain.callWithAuth(contract, api, args);
        if (ret && Array.isArray(ret) && ret.length >= 1) {
            return ret[0];
        }
        return null;
    }
    // オーナー権限の確認
    _checkOwner() {
        let owner = storage.get('owner');
        this._requireAuth(owner);
    }
    // 権限の確認
    _requireAuth(id) {
        if (!blockchain.requireAuth(id, 'active')) {
            throw new Error('permission denied');
        }
    }
}
module.exports = HandsOnToken;

```
どちらも触ったこと無いけどReactNativeとFlutterを雑に比較して考えたことメモ

## 比較の目的

- 社で `はやいプロダクト開発` という目標というかテーマができそう
    - 作るのが早い
    - 動作・パフォーマンスが速い
- 作るのが早いと言う点で、クロスプラットフォームを検討してみたい
    - 社ではネイティブの開発は結構がっつりやっているが、クロスプラットフォームはやっていない
        - iOS/Androidのネイティブのエンジニアはそれぞれいる
        - react, vueを触るwebフロントエンドのエンジニアもいる


## 私のスペック

- iOSネイティブ開発やっている
    - Android開発はほとんどやったことない
- react, typescriptのwebフロント開発やっている

## とても参考になった記事

- https://qiita.com/Cat_sushi/items/5644443516ebb79b9ab3
- http://nnsnico.hatenablog.jp/entry/2018/03/29/170701


このまとめがかなり示唆に富んでいる感あるなと思いました
<img width="843" alt="スクリーンショット 2019-11-04 14.39.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7694/3b1e4e4c-7207-2d8d-9782-e5a9b3f0a14f.png">

## 雑な感想

### 作るのが早い
- どんな経験値の人がやるのかによって変わりそうな気はした

#### Flutter

- ネイティブアプリ経験者ならflutterの方が初速は出そう
    - モバイルSDKの再発明と捉えると、両OSでライフサイクルが違っているところとかをいい感じに吸収して実装コスト下げれそう
    - モバイル開発の延長っぽい気がしていて、モバイル開発の知見が多少必要そう・活きるイメージ
    - react, vueやってた人が始めようと思うと学習コストは高そう？
        - でも宣言的UIの考え方はネイティブアプリには無い&reactと近く、むしろreact, vueやった人の方が学習が早い？
- ネイティブ開発者の中で閉じてスピードアップを考えるならFlutterの方が良さそう


#### ReactNative

- webフロントエンドの手法をインポートしているので、ネイティブ開発者には学習コスト高そう。短期的にはスピード落ちそう
- 社内のwebフロントエンドエンジニアにアプリ開発に参加してもらえるようになるので、フロントエンジニアが多いなら一気にアプリ開発者の人数を増やせそう
- 細かいところで各OSの専門知識は必要になる
    - react書ける人だけでは難しそうで、各ネイティブの専門知識わかる人は必要になりそう
- フロントエンド開発者まで巻き込んでスピードアップを考えるならReactNativeは良さそう
- fluxなどのアーキテクチャについて多くの知見が既に存在していて、その辺を持ち込めるのは強い
    - Flutterより大規模開発の知見が厚いイメージ


#### 当然だが、要件次第ではある

- ネイティブな機能をゴリゴリ使うアプリだとネイティブで書いた方がたぶん早い
    - でもそういう案件って実はあんまり無く、クロスプラットフォームで行ける案件は多いイメージ
- webアプリ版も作りたいとなるとFlutterWebよりReactNativeWebの方が強そうなイメージはある
    - ReactNativeなら、別途react.jsで作り直すにしても再利用できるコードが多そう

### 動作が速い
- 普通に考えるとネイティブアプリが最速なので、どこまで許容できるのか的な視点
- とはいえ、よほど複雑な画面とかで無い限りあんまり問題にはならず、ほとんどの場合は許容できる範囲な気がする


## まとめ

想像ばかりなのであまり身がない記事ですが...

- ネイティブ開発者にとってはFlutter良さそう
- webフロント開発者にとってはReactNative良さそう
- どちらも宣言的UIだし、そういう時代だなぁ
- 雑に社でも相談してみよう
alias（エイリアス） の設定の仕方


bash の場合は、基本的に `~/.bash_profile`、
zshの場合は `~/.zshrc` に記述するのがスタンダードです。

試しに登録してみましょう。（zshの場合）
`$ vim ~/.zshrc`

以下のような記述を追記します(これは例ですので、自分の好きに登録してOKです)。

```
alias gs="git status”
alias gd="git diff”
alias gc="git checkout”
alias gb="git branch”
alias gl="git log”
alias rs=“rails s”
alias rc=“rails c”
```

で、

`$ source ~/.zshrc`
を実行すると、使えるようになる。
コンストラクタで失敗してもインスタンスはある？

```java
public class Main {

    public static Main me;

    public Main() throws Exception {
        this.me = this;
        throw new Exception("constructor error.");
    }

    public void method() {
        System.out.println("It's me");
    }

    public static Main main() {
        return me;
    }

    public static void main(String... args) {
        try {
            Main main = new Main();
        } catch (Exception e) {
            System.out.println("constructor failed.");
        }

        Main main = Main.main();
        main.method();
    }
}
```

結果

```
constructor failed.
It's me

```
【解説動画リスト】React Router

![eyecatch-added-learning-movie-contents-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289248/17b894bf-0ab8-37e1-d7f6-f617e15620ad.png)


# 概要

以下の内容が学べる解説動画のリストを作成しました^^

- React Routerの概要
- BrowserRuter, HashRouterについて
- Redirectについて
- history, location, matchについて
- GitHub Pagesを活用した、Reactアプリの無料公開の方法
    - →ポートフォリオを無料でどんどん作れる


---

詳細は以下のリンクを参照していただけたらと思います^^
↓　
https://tsuyopon.xyz/2019/11/04/added-learning-movie-contents-12/?ref=qiita