OmniAICreator/Qiita-1.07M huggingface dataset:
AWSにRedashを設置

最近、開発の手伝いをしてて、データベースへの接続・データ取得をもっと手軽にしたいと相談を受けまして、AWS環境にRedashを導入しました。

導入って結構手間じゃないかと思っていましたが、
手順さえ分かれば1時間かからないでできるんじゃないかと思います。

ちなみに、今回接続したデータベースの種類は **MySQL** です。

# Redash用のEC2インスタンスをたてる

## 1. AMIの選択

AWSからではなく、Redashの導入方法ページにAMIの選択URLが載っていますので、
接続したいDBのあるリージョンを選択しましょう！

https://redash.io/help/open-source/setup#aws

<img width="755" alt="スクリーンショット 2019-08-12 23.14.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/35191912-cb39-aa3c-e135-b66ae949c02c.png">

## 2. インスタンスタイプの選択

公式の説明書通り、t2.small以上を選択してください
（ケチって、microを選んだら、全く動きませんでしたｗ）

**公式の説明文**
*for small deployments t2.small should be enough*

<img width="803" alt="スクリーンショット 2019-08-12 23.19.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/b0d5d469-7a62-5d21-b365-268082b6c34d.png">

## 6. セキュリティグループの設定

3~5はそのままで進めて、セキュリティグループをここも公式の説明書通りに設定していきます。
SSH、HTTP、HTTPSは接続できるようしておいてね、とのことです。

**公式の説明文**
*When launching the instance make sure to use a Security Group, that only allows incoming traffic on ports: 22 (SSH), 80 (HTTP) and 443 (HTTPS).*

<img width="907" alt="スクリーンショット 2019-08-12 23.24.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/961e8efb-aea3-58ca-f135-8d76fe560e38.png">

インスタンスの設定は以上で、 **起動** をクリックします！


# データベースのセキュリティ設定

続いて、redashがデータベースに接続してデータを取ってくることができるように、
データベースのセキュリティ設定を調整します。

1. **Amazon RDS**
2. 左カラムの**データベース**
3. **接続とセキュリティ**のタブ
4. セキュリティの **VPC セキュリティグループ** のURLをクリックします

そうすると、DB側のセキュリティ設定に遷移しますので、
**インバウンド** タブを選択して、
先ほどredash用のEC2インスタンスをたてたときに使用したセキュリティグループを追加します。

1行目は元から入っていますので、 **ルールの追加** で新しいソースを指定します。

<img width="1142" alt="スクリーンショット 207-25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/003ed72f-066e-bd72-07f8-c4854f0b17cf.png">

# Redashへのログインと設定

redashへブラウザからアクセスをします。
特にドメイン設定などをしていなければ、EC2の説明タブ内にある**パブリック DNS (IPv4)**へアクセスすればOKです。
では初回のログイン（管理ユーザーの作成）とデータベースへの接続作業を進めていきます。

## 管理ユーザーの作成
ここはサクサク埋めていきましょう。
Organization Nameは設定画面で見つからなかったので、一応、ちゃんとしたものを入れておくことをお勧めします。

<img width="582" alt="initial_setup.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/3ae3d79f-7462-9928-732c-da184fc76534.png">

## データベースの設定

管理ユーザーでログインができたら、次はデータベースの接続情報を入れていきます。

1. 左上の **設定**
2. Data Sourcesタブ
3. **+ New Data Source**

<img width="1023" alt="2019-08-13 0.16.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/7733fd7e-e509-671b-4e84-d69937c743bb.png">

次にいろんなデータベースの種類が表示されるので、今回接続先となる **MySQL (Amazon RDS)**を選択します。

<img width="913" alt="2019-08-13 0.23.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/425da583-d1ef-e3ab-5ea8-48b4540b73ae.png">

いよいよデータベースのアクセス情報を入れていきます。
SSLのチェックはなくても大丈夫です。

<img width="422" alt="スクリーンショット 2019-08-13 0.34.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/df925bf9-15ec-df07-482e-15739d0ce937.png">

必須項目を全て入れて、 **Save** すると **Test Connection** というボタンが出ます。
それをクリックして、 **Success** というトーストがぽわっと浮かび上がったら、大成功です！

これで、設定完了です！お疲れ様でした。

楽しいクエリライフをお楽しみください〜
ActiveRecord::NoDatabaseError FATAL: database  does not exist

rails s したらこのようなエラーがでました。

>ActiveRecord::NoDatabaseError
FATAL: database "todo_development" does not exist

データベースがないというご指摘です。

RailsはすでにDBの名前を決めていてくれて、それがないとエラーになるようです。
デフォルトのsqlite3を使っているときは見ていないエラーなので、任意でほかのDBに変えると最初は出てしまいがちな気がします。

データベースを作ります。各種、DBにログインして

```sql
create database todo_development;
```

でも作れますが、Railsはこんな便利なコマンドがあるようです。

```bash
 rails db:create
```

これをたたくとRailsが自動で決まったDB名で作ってくれます。
すごい。


参考にさせていただきました。
[rails db:create でデータベースが作れる]
(https://qiita.com/opiyo_taku/items/7ce6015aa5a03f1acebd)
ゼロから作るディープラーニング　2-3章　まとめ　パーセプトロンとニューラルネットワーク


## ■背景・目的
- 背景
    - ディープラーニングの仕組みを構造的に理解し、ディープラーニングのすごさを自分なりに要点を絞って、整理したい
- 目的
    - 2-3章ではパーセプトロンとニューラルネットワークの違い、ニューラルネットワークの強みがまとめられるので、できるだけ短い文章で本質をまとめる

## ■要点
- ### パーセプトロンとは何か
    
    - 概要
        - 複数の信号を入力として受け取り一つの信号を出力するもの
    - 構成要素
        - 入力値
            - 入力データ
        - 重み
            - 入力の**重要度**をコントロールするパラメータ
        - バイアス
            - 出力信号が**１を出力する度合い**を調整するパラメータ
        - 出力
            - 出力データ
    - パーセプトロンの限界
        - 直線でしか、データを分離することができない（XORゲートは実装できない）
    
- ### パーセプトロンの課題を乗り越えた「ニューラルネットワーク」とは

    - そもそもニューラルネットワークを使う理由
        - 自動で重みを設定してくれるから。例えるなら、自分で勝手に勉強してくれる秀才君（ええ、私の方でやっておきました）
            - それに対してパーセプトロンは、重みは人間が与える必要がある。例えるなら、指示待ち人間（えっと次は何すればいいですか）
    - 概要
        - ニューラルネットワークは入力層、中間層、出力層で構成される
    - 活性化関数とは
        - 入力信号の総和を出力信号に変換するもの
        - 関数一覧と比較
            - 一覧（以下は下の実装パートで実装する）
                - シグモイド関数
                - ステップ関数
                - RELU関数
                - 恒等関数
            - 比較
                - シグモイド関数とステップ関数の比較
                    - 相違点
                        - 滑らかさ
                            - シグモイド関数が入力に対して**連続的に出力が変化する**（つまり滑らか）に対して、ステップ関数は**0を境に断絶的に出力が変わる**
                        - 出力内容
                            - 両者とも出力を0から1の間に押し込める
                    - 共通点
                        - 両者が非線形性を持っているところ
    - 出力層の設計
        - 分類と回帰予測において出力層の活性化関数を選択する
            - 分類
                - ソフトマックス関数
            - 回帰
                - 恒等関数
                    - 入力信号をそのまま出力するだけ




## ■実装内容
### 活性化関数の実装



- シグモイド関数

```python:sigmoid.py
def sigmoid(x):
    return 1/(1+np.exp(-x))
```

- ステップ関数

```python:step.py
#0より大きければ、1を返し、0以下であれば、0を返す
def step_function(x):
    y=x>0
    return y.astype(np.int)
```

- RELU関数

```
#入力が0を超えていれば、その入力をそのまま出力し、0以下ならば0を出力する
def relu(x):
    return np.maximum(0,x)
```

- 恒等関数

```
#入力値をそのまま出力する
def identify_function(x):
    return x
```

- ソフトマックス関数

```
def softmax(a):
	c=np.max(a)
	exp_a=np.exp(a-c)
	sum_exp_a=np.sum(exp_a)
	y=exp_a/sum_exp_a
	return y

```



### ３層のニューラルネットワークの実装

```
＃重みとバイアスの初期化し、returnで配列として返す
def init_work():
    network={}
    network['w1']=np.array([[0.1,0.3,0.5],[0.2,0.4,0.6]])
    network['b1']=np.array([0.1,0.2,0.3])
    network['w2']=np.array([[0.1,0.4],[0.2,0.5],[0.3,0.6]])
    network['b2']=np.array([0.1,0.2])
    network['w3']=np.array([[0.1,0.3],[0.2,0.4]])
    network['b3']=np.array([0.1,0.2])

    return network

＃init_workで定義した入力信号が出力信号へと変換されるプロセス
def forward(network,x):
    w1,w2,w3=network['w1'],network['w2'],network['w3']
    b1,b2,b3=network['b1'],network['b2'],network['b3']

    a1=np.dot(x,w1)+b1
    z1=sigmoid(a1)
    a2=np.dot(z1,w2)+b2
    z2=sigmoid(a2)
    a3=np.dot(z2,w3)+b3
    y=identify_function(a3)

    return y

#ネットワークの実装
network=init_work()
x=np.array([1.0,0.5])
y=forward(network,x)

print(y)
```

#利用ライブラリ
```
import numpy as np
```




## ■疑問、課題点

- ニューラルネットワークを構成する要素は理解したものの、ニューラルネットワークのすごさが何にもわかっていない。（この先の章でわかるはず）to be continued,,,,,

## ■改善点

- 現時点ではないが、指摘等や誤りに築いた際に、記載するようにスペースとっておく

## ■参考

- ゼロから作るDeep Learning――Pythonで学ぶディープラーニングの理論と実装
    - https://www.oreilly.co.jp/books/9784873117584/
Railsにpostgresqlでnewする

一度、mysqlで試して見たのですが、8系のせいかほかの理由なのかエラーが出てしまい、postgresでやってみました。
環境にこだわるよりもコードを早く書きたいという趣旨です。
ちなみに、こんな感じのエラーでした。
軽く調べて回避する方法がありそうでしたが、DBにこだわりがないのでmysqlは一旦諦めました。


>An error occurred while installing mysql2 (0.5.2), and Bundler cannot continue.
Make sure that `gem install mysql2 -v '0.5.2' --source 'https://rubygems.org/'` succeeds before bundling.

>In Gemfile:
  mysql2
         run  bundle exec spring binstub --all
Could not find gem 'mysql2 (>= 0.4.4, < 0.6.0)' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems.


```bash
gem install mysql2 -v '0.5.2' --source 'https://rubygems.org/'

bundle install
```
ちなみに、エラー文内のアドバイスで上記のコマンドを試して見たのですができませんでした。

---

こちらの記事を参考にPostgreSQLをインストールしました。
とてもわかりやすく大変助かりました。

[[macOS High Sierra][Homebrew] PostgreSQL のインストールからDB作成まで]
(https://qiita.com/ksh-fthr/items/b86ba53f8f0bccfd7753)


あとは、いつもようにrails newします。
rails new　するときデータベースを指定するとよしなに設定してくれるらしい。

```bash
rails new todo -d postgresql
```

ぐぐってもこのコマンドが明示的に見つけられませんでした。
メモとして投稿します。
React Nativeの環境構築でつまずいた話：Error: listen EADDRINUSE

# エラー内容
React Nativeの環境構築をしている際、iOS起動時にエラーが出てしまいました。

<img width="419" alt="スクリーンショット 2019-08-12 23.40.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/e1286750-33f7-ac86-078d-06c087eafb25.png">


# 解決

**①どうやら、node.jsを起動しないと行けない模様なので、ターミナルで起動して見ることに。**

```
npm start
```

すると,,,エラーが

```
error listen EADDRINUSE: address already in use :::8081. Run CLI with --verbose flag for more details.
Error: listen EADDRINUSE: address already in use :::8081
```


**②次は、ポートが衝突してるってことで、一度使用しているポート8081を消去してから、再度立ち上げることに**


```
//ポートのPIDを特定する
lsof -i :8081

//消去
kill -9 PID
```

# 結果

もう一度、iOSでrunしてみると、、

<img width="369" alt="スクリーンショット 2019-08-13 0.22.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/5f55d5ff-eadd-b876-a37a-a03ef60aac25.png">


**成功!!!!!**
Java基礎学習内容１（リテラル・変数・定数）

# この記事は？
Javaを基礎から学習し直した際に、今まで理解不足だった点が多いと感じたため、後から見返せるよう学習内容をまとめたものです。

## リテラル
リテラルとは、ソースコード中に値を直接表記したもののことを指す。

| 種類 | 備考 | 例 |
|:---------------------------|:--------------------------------------|:--------------------------------------|
| 整数リテラル | 10進数だけでなく、2進数(0b)・8進数(0)・16進数(0x)でも書ける。 | 10, 0b101, 0752, 0xfe |
| 浮動小数点数リテラル | 10進数・指数を書ける。 | 10.0, 2e3 |
| 文字リテラル | 1文字を表現する。\uから始めるとUnicode値を表現できる。| 'A', '\u0041' |
| 文字列リテラル | 複数文字列を表現する。| "abcde" |
| 理論値リテラル | trueかfalseを表現する。 | true, false |
| nullリテラル | 参照が無いことを表現する。 | null |

## 予約語
識別子(変数やクラスなどにつける名前)に使うことが出来ない、Java言語ですでに使用されている名前。
※「java」は予約語ではない。

## 基本データ型
|型|サイズ|
|:---------------------------|:--------------------------------------|
| byte | 8ビット |
| short | 16ビット|
| int| 32ビット |
| long | 64ビット |
| float | 32ビット |
| double | 64ビット |
| char |16ビット |
| boolean | 1ビット |
[Choco60] なぜかFn+Shiftを押すとキーボードが切断されてしまう現象と、その解決

## 概要

Choco60（または現象に相当するオリジナルキーボード）にて、なぜかFn+左Shiftを同時押しするとキーボードが切断されてしまう。

## 読む前に用意して欲しいもの

[QMK Toolbox](https://github.com/qmk/qmk_toolbox) (CUIのものもあるようですが、今回はこちらを使います。)

## 原因

Fn+左ShiftにRESET機能が割り振られているようでした。

## 直し方

### 方針：ファームウェアを書き換える

#### リポジトリをクローン(orダウンロード)する

最初に[qmk/qmk_firmware](https://github.com/qmk/qmk_firmware)こちらのリポジトリをクローン(orダウンロード)します。

#### クローン後

https://github.com/qmk/qmk_firmware/blob/master/keyboards/choco60/keymaps/default/keymap.c#L38

方針として、以上にある内容を書き換えFn+ShiftでのRESETを無効化しようという感じです。

クローンしたローカルリポジトリ直下の `keyboards>choco60>keymaps`へ移動し、既に存在するdefaultというフォルダを(※利便性の為に)コピーしわかり易い名前をつけます。

次に、RESETを無効化します。

keymap.cをお気に入りのエディタなどで開き、38行目にある `RESET` を他と合わせて `_______` に上書きします。

#### Hexへの変換

[こちらを参考に](https://github.com/qmk/qmk_firmware/blob/master/docs/getting_started_make_guide.md) リポジトリのトップにて、

```
make choco60:xxx
```

を実行します。(xxxには↑の工程でつけたフォルダ名を入れてください)

また、私の環境ではモジュールが足りず、avr-gcc: command not found と怒られてしまったので、

```
brew tap osx-cross/avr
brew install avr-gcc
```

としてインストールしました。( [こちら](https://github.com/osx-cross/homebrew-avr)を参考にさせていただきました)

#### Hexの読み込み

前準備で用意したQMK Toolboxを開き、先程生成したHexファイルを読み込みます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481586/5a27a22f-1716-5173-0334-1142e873060c.png)


読み込んだら、物理RESETボタンを押した後にFlash（ボタン）をしプロファイルを適用します。

#### 終わり
これでFn+Shiftを押してもキーボードが切断されることがなく便利さを存分に発揮することができました。
記事の内容に不備がありましたら、どんどん変更リクエストをいただければと思いますm(_ _)m

ちなみに普段記事は書かないのですが、Choco60を使うのが楽しいので書いちゃいました。買ってよかったです！
俺なら新人エンジニアに最初に教えるのはMarkdown！

# まずはMarkdownでしょ
Qiitaを書くにはまずMarkdownを覚えることですよね。
僕は新人エンジニアに、一番最初にMarkdownを教え、メモ議事録等は積極的にMarkdownで書くように命じます。
中途の人にもMarkdownを知っているか尋ねます。
知らないと答えた場合、非エンジニア判定を下します。
Qiita見てないんかい！GitHubのREADME.mdとか書いたことないんかい！って思います。

いつだか忘れましたが、BacklogがデフォルトでMarkdown記法になったのですが、
僕の会社はレガシーでBacklog記法になっているプロジェクトが数多く存在して発狂したことがあります。
正直恥ずかしいからやめてほしいです。

# Markdownは簡単
Markdownはプログラム覚えるなんて比にならないくらい簡単で、それでいて便利で作業の時短にもなるので良いですよね。
Htmlよりも覚えること少ないので簡単なはずです。
まずこの簡単なところからできるようになることで新人エンジニアのモチベーションも上がっていくはずです。
「テキストベースでも綺麗にまとまって見える」「htmlに変換できてエディタとかで見る機能もある」「テーブルとかかけてすごい」
みたいに思うはずです。
逆にMarkdown覚えて感動しないようであれば、エンジニアに向いてないかもしれません。

# DBに文章をいれる時
システム作ってて記事とかの内容を入れたい時、リッチな記事が必要なければ、僕はマークダウンでDBにいれて、表示側でhtmlに変換して出すように作りますね。
これは案件にもよると思いますが、普通やりたくなりますよね？

# まとめ
Markdownを使いましょう！
pythonでbinanceのAPIを使用可能にする設定(APIエラーにはまった)

#やりたいこと
pythonプログラムから、binanceのアカウントへアクセスしたい

#本稿の投稿経緯
pythonからのAPI利用時にエラーにつかまったので、python,binance両面からやり方をメモ

#事象
APIをつかってアクセスしようとしたら以下のエラーにつかまった。
以下の2つのどっちかに該当するようだ。

- APIキーないしはシークレットキーのset誤り
- 許可されたIPアドレス外からのアクセス

```
APIError(code=-2015): Invalid API-key, IP, or permissions for action.
```

# python側のコード
以下のようにAPIキーとsecretキーをbinanceのclientモジュールにsetしている。
特に問題はなかった

```
from binance.client import Client
class BinanceAPI:
    def __init__(self):
        API_KEY=r'XXXXX'
        API_SECRET=r'XXXX'
        self.client=Client(API_KEY, API_SECRET)
```

エラーをはいたのは以下のUSDT通貨の資産状況の表示の箇所

```
    binance_set = BinanceAPI()
    asset = binance_set.get_asset('USDT')
    print()
```
# Binance側の設定

API KeyとSecretKeyは正しい値で、IPアドレスも自環境のIPを許可していた。(マスキングしている箇所)
実は0.0.0.0というIPはデフォルトでセットされているのだが、自分は、削除した上で、自環境のIPのみを許可していた。これが原因で、不正なIP扱いとなった。(画像は修正後のもの)

![API.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481577/28d9a050-59c0-d8bc-278e-6ee43f360ac7.png)

正しく設定し、無事動作
JavaScriptを学ぶ③（toggle 定数を使ってみよう♪）

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/eb40e352-f0c1-d31e-34a6-757d9e9574f8.gif">

```html
<script>
  'use strict';
  const hitokage = document.getElementById('target');

  hitokage.addEventListener('click',function(){
     hitokage.classList.toggle('circle')
  });
</script>
```
今回、新しく勉強したのは、`toggle`と`定数`です♪
※定数については、ある程度勉強しているので、説明は割愛します。

＜説明＞
addではなく、toggleに変更したことで、
`CSSクラスがついていなかったらつける`
`CSSクラスがついていたら外す`　という状態になります♪


#toggleについて

toggleは、クリックなどの同じ操作によって、
`二つの状態を交互に切り替えられるような仕組み`のことだそうです。
メディアプレーヤーの再生と一時停止を切り替えるボタンなどによく使われるみたい:tv:

今回はアレンジなしにしますが、
toggleの使い方を検索するとメニューの表示・非表示を、
jQueryで使用することが多そうです(^^)
以下の記事がすごく分かりやすかったので、ご参考までに♪
[jQueryのtoggleで表示・非表示を切り替えてみよう](https://techacademy.jp/magazine/9540)

では、続きは次回にしていきましょう:angel:
SQLってなんだろう？

#はじめに

未来電子テクノロジーでインターンをしている宮﨑です。

SQLを学び始めたので、どのようなものなのかざっくりとまとめてみます。
もし誤りがあれば修正するのでどんどん指摘してください。


#SQLとは

###データベース言語の一種！

そもそもデータベースとはどのようなものでしょう。
データベースは、大量のデータを管理するプログラム（DBMS)で集めたデータを整理し、操作できるようにしたものです。

データベース言語は、そのデータベースとやりとりする時に使う言語のことです。
指定した条件に合うデータを見つけ出すもので、プログラミング言語と違ってそれ以上の機能はありません。

###SQLが使えるデータベースはいろいろ！

Oracleや、MySQL、SQLServer、PostgreSQLなどのデータベースで使えます。
上に挙げたものはデータベースの種類のようなもので、WindowsではSQLServerがよく使われたり、MySQLはPHPと仲が良かったりと個性があるようです。

###SQLを使った書き方

基本的に以下のように書きます。

SELECT 列名
　FROM 検索対象の表の名前
　WHERE 検索条件

これに加えて、データベースの内容を削除したり変更したりするなどの文法もあります。

#まとめ

SQLはデータベースとやりとりをする言語です。
マスターするのはなかなか難しいですが、考え方を知っておくだけでも役に立つと思います。
保守系1年目に必要な最低限の知識【テスト投稿】【更新中】

#保守系作業を行う上でよく使うコマンド群
---

1年目にして何もわからないまま放りこまれた状態ですが、
とりあえず知識の覚書としてこの記事を記載します。

使用例等は省いて、現在使っているものを書き留めて、今後見やすい形にしていきます。

※プログラミングよりも、cmdやpowershellを使ったコマンド群の方が
　学生時代には縁がほとんどなかったため、苦労しています。

---
## ①：ネットワーク編
#### ping 【疎通確認】
```
ping ¥¥〇〇〇.〇〇〇.〇〇〇.〇〇〇 -t
```
#### start 【サーバーのCドライブ直下へアクセス】
```
START ¥¥〇〇〇.〇〇〇.〇〇〇.〇〇〇¥c$
/*$を忘れてしまうと何も表示されないので一瞬焦りますね・・・*/
```
#### telnet 【ルーター等にアクセス】
```
telnet ¥¥〇〇〇.〇〇〇.〇〇〇.〇〇〇
/*この後、Ciscoなどのルーター専用のコマンドで操作していきます。*/
```
#### ipconfig 【自身のIPアドレス関連】
```
# 現在のIPアドレスを調べる。(有線/無線)
 ipconfig /all
# DHCPリースを更新する。
 ipconfig /renew
# DNSClientリゾルバのcacheリセット。
 ipconfig /flushdns
```
#### tracert 【network経路調査】
```
 tracert ¥¥〇〇〇.〇〇〇.〇〇〇.〇〇〇
 #疎通不可の際、どこのサーバーで止まってるかを調べる。
```

#### ネットワークドライブの接続/切断
```
##接続
 net use ■: ¥¥〇〇〇.〇〇〇.〇〇〇.〇〇〇¥◇◇◇ /user:▲▲▲▲ ▼▼▼▼
##切断
 net use ■: ¥¥〇〇〇.〇〇〇.〇〇〇.〇〇〇¥◇◇◇ /user:▲▲▲▲ ▼▼▼▼ /delete
##上記で消えない時
 net use /PERSISTENT:NO

/*課内や部内の共有ドライブの設定を入れ込んだbatを作成して、
　スタートアップフォルダ内に入れておくと便利ですね。*/
```

* ■⇒ネットワークドライブ名(任意の大文字1文字)
* 〇⇒ファイルサーバーのIPアドレス
* ◇⇒利用したいフォルダ(フルパス)
* ▲⇒ログイン時のユーザー名
* ▼⇒ログイン時のパスワード

## ②：交換用端末用意編
#### chkdsk【ディスクチェック】
```
chkdsk c:
#不良セクタが出たら、HDD寿命来てます。　すぐにデータ移行しましょう。
```
#### 
### reg query【後乗せプログラム一覧取得】
```
#32bit版
reg query "HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\Uninstall" /s | find "DisplayName"

#64bit版
reg query "HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Windows\CurrentVersion\Uninstall" /s | find "DisplayName"

```

## ③：Windowsコントロールパネル用コマンド
```
(cmd上かpowershell上で実行)
#コントロールパネル
control
#プリンタ一覧
control printers
#ネットワークと共有
ncpa.cpl
#インターネットオプション
inetcpl.cpl
#デバイスマネージャー
devmgmt.msc
#管理ツール
control admintools

/*このあたりをまとめたbatファイルを作って見るといい練習になりますね*/
```

## ⓪：勉強環境（現在　もっと良い勉強方法あるかも・・・）
#### 中古本(BookOffやネットオークション)
　書店に行っても、Windows10からしか使えない機能(ライブラリ)を　当然のように
　使っている本ばかり見受けられます。

　職場環境がまだまだWindows7現役というところもある中では、
　中古本の存在は大きく、大変勉強になります。

#### Google先生の検索結果(個人ブログは〇　 StackOverflowは△　MS公式は×)
・やはり検索サイトが無いと細かいところまでは理解できません。
　その中でも、より有益な情報は、個人ブログやQiitaなどが多いと感じます。
　適度にゆるく、上から目線での解説をしていない人が多いところは、良い情報源になります。
　

・StackOverflowなどのプログラミングの質問・交流サイトは、基礎的な知識を持っていないと
　理解できないトピックが大半だと感じます。
　英語verだと、基礎中の基礎の部分についてのトピックもかなりあるのですが、
　日本語verになると、何故か一気に減ります・・・
　Google翻訳を使いながら頑張ると、偶に、答えに辿り着いて嬉しくなります。



・MS公式は、目的の情報を得るまで、もの凄く時間がかかる上に、
　最悪情報が手に入らない確率が高いと感じています。
　ルールなのか、本題に入るまでの一連の流れが決まっており、時間がかかる印象です。

　⓪：質問者⇒回答者(ここのコードのここが失敗します。)
　①：回答者⇒質問者(開発環境を教えてください。)
　②：質問者⇒回答者(開発環境を教える。)
　③：回答者⇒質問者(環境の不備を指摘)

　この流れをやってからじゃないと本題の部分を話さないうえに、
　最悪、質問者が途中で諦めて、問題が解決しないまま終了しているトピックが山ほどあります。
　

---
Azure PlayFabのアクションとルールを使って自動的にアイテムを配布してみた

## まえがき
ゲーム内でユーザーのランクが上がったりクエストを達成したタイミングで、報酬としてアイテムや魔法石を配布したいことがあると思います。

PlayFab の `アクションとルール` を使うとほぼノンコーディングで実現できるようなので試してみました。

## 成果物
以下のように、ゲームプレイ開始時やユーザーのランクが上がったタイミングで報酬を配ることができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97193/d6170a00-5ac6-4735-ef91-15fefb10998d.png)

## 手順
### 1. 新しいランキングを作成する
ユーザーのランクを統計情報として使用するために新しいランキングを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97193/49905576-257d-1093-8f62-9d3d8a9b7edc.png)

### 2. 新しいコンテナーを作成する
報酬はインベントリに直接付与せず、一旦はギフトとして配布して、ギフトを開くと複数のアイテムや通貨が獲得できることが一般的だと思います。
PlayFab ではコンテナーを使うことでそのような仕組みを実現できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97193/432d8cca-30c3-fff9-7113-b380a53b7fe9.png)

### 3. アクションとルールを設定する
Client や Server から API を使って PlayFab にアクセスすると、その操作に応じたイベントが発生します。
今回は統計情報の更新のイベントをトリガーにするため、イベントタイプを `com.playfab.player_statistic_changed` とします。

条件の項目では StatisticName と StatisticPreviousValue を絞り込みます。
これによりランクが9から10に上がったイベントだけをトリガーにしてアクションを実行できるようになります。

最後にアクションの項目で先に作っておいたコンテナーを付与するように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97193/d38bd86f-eae2-7979-ae97-0c4a95f1ecf1.png)


### 4. ゲーム内から統計情報を更新する
ユーザーのランクが上がったタイミングで PlayFab の API を呼び、統計情報を更新します。
例えば Unity から PlayFab の API を直接呼ぶ場合は以下のようなコードになります。

``` C#
    var statistics = new List<StatisticUpdate> { new StatisticUpdate { StatisticName = "Rank", Value = 1 } };
    var request = new UpdatePlayerStatisticsRequest { Statistics = statistics };

    PlayFabClientAPI.UpdatePlayerStatistics(
        request,
        response => Debug.Log("成功したときの処理"),
        error => Debug.LogError("失敗したときの処理"));
```

1～3までの設定とこのコードだけでユーザーのランクが上がったタイミングで報酬を配ることができました。
とてもお手軽ですね。

ちなみに PlayFab は統計情報を Unity などの Client から直接送信することをデフォルト設定では禁止しています。
趣味の個人制作などでチート対策を気にしない場合は、GameManager で設定を変更して許可することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97193/e35ceaeb-8fad-b8d9-1796-3818c08f2091.png)

## その他
アクションとルールのトリガーにできるイベントは様々なタイプがあります。
例えば `com.playfab.player_created` をトリガーにすると、アカウントが作成されたことをトリガーにして初期アイテムを配布したりすることが可能です。
PlayFab の殆どの挙動をトリガーできると思いますので、目的に応じたタイプを探してみてください。
また、目的に合うものがなければ独自のイベントを仕込んでそれをトリガーにすることも可能です。

またアクションの種類も様々な種類があり、アイテムを配布刷ること以外にはプッシュ通知を送信したり、自分で定義したFunction（CloudScript）を実行したりすることも可能です。

とても便利な `アクションとルール` ですが、無料の Essentials プランでは3個までしか作ることができません。
次に安い IndieStudio プラン（月額$99）なら100個まで作ることが可能です。

月額$99は個人開発者には安くない金額ですが、IndieStudio プランでも 1000MAU までは請求が発生しないとのことですので、PlayFab を試してみるときはとりあえず IndieStudio プランにしてしまうのも良いかもしれませんね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97193/9b460757-7956-97b9-6dc0-38e135d77127.png)


## 参考にしたドキュメント
[アクションとルール](https://docs.microsoft.com/ja-jp/gaming/playfab/features/automation/actions-rules/)
認識しておくべきlocalStorageに認証情報を入れる危険性

## 認識しておくべきlocalStorageに認証情報を入れる危険性
それは、XSSで簡単に引き抜かれてしまという点です。
例えばcookieであればhttponly属性を付けておけばこのようなことは起こりません。

「ユーザー入力でJavaScriptを実行される可能性はない。対策をしている」という場合でも注意が必要です。
なぜなら、cdnから読み込んでいる無数のscriptの中の、どれか1つにでも悪意のあるscriptが紛れていたら、引き抜かれてしまうからです。

この記事が参考になれば幸いです。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
Goにおける配列とスライスの特徴＆その他まとめ

## 配列の特徴
- 定義の書き方
1次元配列：`var a [5]int{0, 1, 2, 3, 4}`
2次元配列：`var a [2][2]int{ []int{0, 1}, []int{2, 3} }`

- 定義した時点で、中身は自動的に0で初期化されている
- 配列変数は配列全体を示す（×先頭の配列要素）


## スライスの特徴
- 定義の書き方： `var a []int{0, 1, 2, 3, 4}`　　**←長さなし**

- `b := a[1:4]`のように再スライスできる（aが配列でも同様にスライス可能）
- 再スライスされた要素を変更すると`b[1] = 50`、元のスライス（配列）の要素も`a = [0 1 **50** 3 4]`のように変更される

## スライスの長さ（length）と容量（capacity）
- 長さ：含まれる要素数
    - スライスaの長さを求める ⇒ `len(a) = 5`
    - ex ) `len(a[:3]) = 3`,　`len(a[2:]) = 3`

- 容量：スライスの先頭から元の配列（スライス）の末尾までの要素数
    - スライスxの容量を求める ⇒ `cap(x) = 5`
    - ex1 ) `cap(a[:3]) = 5`　"スライスの先頭＝元々の先頭" なら容量は元の配列と同じ
    
    - ex2 ) `cap(a[2:]) = 3`　"スライスの先頭≠元々の先頭"

- 必ず(長さ) ≦ (容量) ⇒ スライスを拡張したいときは容量を大きくする

## make関数でスライスをつくる
- `a := make([]int, 5) `　　：長さ5のスライス
`b := make([]int, 2, 5) `　：長さ2、容量5のスライス（長さは0にしてもOK）

- スライス元の配列要素はすべて0 ⇒ スライスの要素もすべて0
    `a = [0 0 0 0 0]`
  `b = [0 0]`

## append関数でスライスに要素を追加する
- 長さ0、容量0のスライスaに要素を追加
`a = append(a, 0, 1, 2)`　：長さ3、容量4のスライス

- 要素を追加するとき元の配列の容量が小さい場合は、より大きいサイズの配列を割り当て直す
Windows の PATH の上限を引き上げる

Windows の PATH の長さは通常 260 文字に制限されていますが、
Windows10 1607以降では、グループポリシーあるいはレジストリを変更することによって上限値を大幅に引き上げることが出来ます。
レジストリを変更する場合、
`HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem` の `LongPathsEnabled` の値を `1` に変更することで適用出来ます。

管理者としてPowerShellを起動して以下のコマンドを実行します。

```powershell
Set-ItemProperty -Path HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem\ -Name LongPathsEnabled -Type DWord -Value 1 -Confirm
```
[メモ] NanoPi NEO2 を Armbian で使う

2年くらい前に買った NanoPi NEO2 Complete Starter Kit の OS を Buster ベースの [Armbian](https://www.armbian.com) に変えてみました。その際のメモです。

![98147422-6E14-45D5-A625-106BFD3151D0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18365/8fa5aff5-f366-5152-4158-9c0f560df21d.jpeg)


# MicroSD の作成

https://www.armbian.com/nanopi-neo-2/ より、 "Armbian Buster" をダウンロード。 MicroSD にイメージを書き込みます。

# 起動

Armbian の SD を NanoPi に挿入し起動します。OLED はまだ使えませんので、NanoPi が取得した IP アドレスを別途調べて、ssh でログインします。root のパスワードは [FAQ](https://www.armbian.com/nanopi-neo-2/#faq-section) に記載されています。

初回ログイン時に root のパスワード変更と作業ユーザーについて聞かれるので、適宜設定します。

# OS の初期設定

いずれも armbian-config コマンドで設定できます。

- タイムゾーン
- ホスト名
- mDNS (Avahi を有効化)
- I2C (i2c0 を有効化)

# NanoHat OLED を使えるようにする

NEO2 Complete Starter Kit には OLED hat がついていて、[ベンダー提供のイメージ](http://wiki.friendlyarm.com/wiki/index.php/NanoHat_OLED#Run_pre-enabled_NanoHat-OLED_ROM) だと、OLED に時間や IP アドレス、CPU load を表示できたり、ボタンでシャットダウンさせたりできます。

OLED hat を使えるようにするため、[Enable NanoHat-OLED manually](http://wiki.friendlyarm.com/wiki/index.php/NanoHat_OLED#Enable_NanoHat-OLED_manually) に書かれているように、NanoHatOLED をインストールします。

```shell-session
sudo apt install python-setuptools libjpeg-dev
git clone https://github.com/friendlyarm/NanoHatOLED.git
cd NanoHatOLED
sudo -H ./install.sh
```

再起動して OLED の動作を確認します。ボタンで表示切替やシャットダウンが行えるかどうかも確認します。

![29E18EFA-050D-4926-A121-548C2A8CFC0F.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18365/250b0924-5c27-4795-73e3-604da7879b9a.jpeg)

以上です。

この NanoPi は SoftEther で使うことにしました。
[続き](https://qiita.com/sgr@github/items/d28e230242783f9023a1) です。
ASP.NET MVC利用環境

# ASP.NET MVC利用環境

## 利用環境
### HTTP Server
IIS Expressの利用が一般的
- IIS(Internet Information Service)と同様の設定、拡張モデルの利用が可能
- 実行時管理権限不要
- 標準のIISと同居が可能

### DB Server
SQL Serverがおすすめ

### Visual Studio


## APS.NET のソースコード

[CodePlex Archive](https://archive.codeplex.com/?p=aspnetwebstack)

## API Reference
[ASP.NET Web Frameworks for Visual Studio 2013 \| Microsoft Docs](https://docs.microsoft.com/en-us/previous-versions/dn467680(v=vs.108))
React Router の使い方

#はじめに

プログラミング歴2ヶ月の素人が書いています。（間違っていたらご指摘ください）

WesBos.com のオンラインビデオコースでReactを学習しています。
動画は以下から。
https://reactforbeginners.com/

「React Router」についての学習メモです。


#そもそもRouterとは

Reactに限らず、webページは『クライアントサイドからのURLリクエスト』と、『サーバーがそれに答えるレスポンス』によって成り立っている。

```

　＝＝URLリクエスト＝＝　 < このページくれ )
　　　　↓　　↑
＝＝サーバからのレスポンス＝＝　< おっけ〜 )

```

どのURLが、どのリクエストに紐づいているのかを設定するのが、Routerの役目です。


#React Routerについて

以下コマンドでインストールできます。

* ウェブで開発する場合は`react-router-dom`を、

* アプリで開発する場合は`react-router-native`を使います。

```terminal
$ npm install -S react-router-dom
```

また、以下のようにimportして使います。
（`BrowserRouter`, `Route`, `Switch`の３つをインポート）

```react
import { BrowserRouter, Route, Switch} from 'react-router-dom';
```


#Routerの使い方

```react:Router.js
const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={StorePicker} />
            <Route path="/store/:storeID" component={App} />
            <Route component={NotFound} />
        </Switch>
    </BrowserRouter>
);
```

##`<BrowserRouter>`について

React Routerは`<BrowserRouter>`か`<HashRouter>`というコンポーネントを使います。
前者はHTML5のhistory APIを使っており、後者はwindow.locationを利用しています。
古いブラウザもサポートしなければならない場合は、後者を利用する必要があります。

前者のhistoryオブジェクトはルーティング先のコンポーネントでpropsとして受け取ることができます。



##`<Switch>`について

`<Switch>`内にルーティングを記述することで、urlにマッチされた最初のルーティングだけがレンダリングされます。（これを「Exclusive(排他的)」という）

仮に`<Switch>`が無かった場合、一致するすぺてがレンダリングされてしまう。


##`<Route>`について

```xml:Router.js
<Route exact path="/" component={StorePicker} />
```

* path="URL"　：リクエストURLです（ルートからのパス）

* exact path="URL" :完全一致させるとき

* component={コンポーネント名}　：　URLがマッチしたときにレンダリングするコンポーネントです

* パスを指定しない場合　：　404 Page Not Found に利用されます


##`history`プロパティについて

`Router`に紐づけられたコンポーネントには、`history`というプロパティが自動的に付与されます。

ブラウザの検証ツールでも確認できます。いくつかのメソッドが組み込まれていることがわかります。



![スクリーンショット 2019-08-12 23.18.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/16351938-cb6b-dfe5-84b5-21d1f3ebea63.png)


historyオブジェクトはルーティング先のコンポーネントでpropsとして受け取ることができます。

###`props.history.push()`メソッドについて

子コンポーネントからルーティングにアクセスしたいときに使います。


```react
props.history.push(`/store/123`); //引数はルートからのパス
```




#まとめ

React Routerについてまとめました。
今後もRouter関係について調べたらココに追記していきます。
Chromebookで開発環境を構築する（挫折編）

# Chromebookで開発環境を構築する（挫折編）

## プロローグ
スマホ並みの手軽さで、すっかり日常使いのツールとして定着したChromebook。  
crostiniが登場してから早一年と幾月。vscodeも導入できちょっとしたjavascriptベースでの開発ならなんとなくこなせるけど、あんなことやこんなこともしてみたいと欲望が増すばかり。

## 余談１
ChromebookのCPUはIntelのものとARM系のものがある。  
crostiniはどちらでも動くけどARM系は開発環境を構築する上では既製のバイナリが少ない状況。ソースコードからビルドするにもCPUパワー不足やビルドするためのストレージが不足するなど苦難が待ち受けています。

## 何はともあれDockerを入れねば
aptでいとも簡単に導入できます。  
調子にのってimageをpullしているとあることに気づくはずです。ストレージが不足していることに。。。

## 余談２
よくあるChromebookのスペックでは16〜32Gバイトの内蔵ストレージであることがほとんどです。
最近は64Gバイトのものもちらほら見かけますがまだ少数派です。　　
128Gバイト超えのものはPixelbookぐらいじゃないでしょうか。おそらくPixelbookならばここで書く悩みにはぶち当たらないのでしょう。

## ストレージを増やす方法
Chromebookには外付けSDカードがついています。最近はcrostiniから直接アクセスするための機能が追加されています。いざマウント。。。これで128Gバイト追加されました。
意気揚々と/etc/systemd/system/docker.serviceを修正してサービス再起動

```
[Service]
Type=notify
# the default is not to use systemd for cgroups because the delegate issues still
# exists and systemd currently does not support the cgroup feature set required
# for containers run by docker
ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock --data-root /mnt/chromeos/removable/SD
ExecReload=/bin/kill -s HUP $MAINPID
TimeoutSec=0
RestartSec=2
Restart=always
```

そしてエラー。  
SDカードがFAT32でフォーマットされているため必要なパーミッションの設定ができないこと原因。

## 余談３
[ここ](https://support.google.com/chromebook/answer/183093?hl=ja)でも説明されていますがChromebookで利用可能な外部デバイスのファイルシステムではEXT4などLinuxで一般的に利用しているものは使えません。

## FUSEを使ってマウント
そこでSDカード上にディスクイメージを作ってFUSEでマウントしてみました。

```
$>sudo apt-get install fuse2fs
```

SDカードにディスクイメージを作成し、EXT4でフォーマットしたのちDockerのデータディレクトリにFUSEでマウント。そしてサービスを起動。

```
$>dd if=/dev/zero of=disk.img bs=1G count=20
$>sudo mkfs.ext4 disk.img
$>sudo fuse2fs disk.img /var/lib/docker/ -o allow_other 
$>sudo sytemctl start docker
```

うまく起動しました。
ドヤ顔でhello-worldをrun。動きました。でもモッサリ。。。  
他のimageもpull。。。遅すぎる。

ディスクイメージに書き込みをテストしてみたら3MB/sぐらいしかでていません。いちをCLASS10のSDカードなのでもうちょっと速いことを期待していたのですが。。。

今回はこれで詰みました。

## まとめ
- crostini環境でもdockerは動きます。（ARM系も）
- SDカードの領域を使ってEXT4のファイルシステムをマウントできます。（遅いけど）
- ローカルであれもこれもしたいと思うのはまだ修行が足りない証拠である。

次回へ続く
Qiitaを書く

# Qiitaにはすごくお世話になっています
業務中１日１回は絶対見てると思う。
それぐらい、プログラミングってわからないこと多いってことですよね。
でも記事が見つかるということは、逆にわかる人がいて、それを自分の備忘録や他に同じとこで躓く人のために書いてくれている人がいるということ。
すばらしい。

# 見る専門を卒業するぜ！
僕は見る専門に甘んじていましたが、プログラム教育する立場になって偉そうに「アウトプットせい」とか言ってます。
言い訳すると、Qiitaに書いてないだけで、自分でみるノートには書いてたの。
１日１つ頑張って書くを２年ほど続けたけど、どっかのタイミングで疲れてやめました。
今読み返すとすごくためになることいっぱい書いてる。これってもったいないのかも。
もし外部に公開して、他の人のためになっていたら、僕自身ももっと頑張って書こうという気になれたのかも。

どうなんでしょうか。
答えはわかりませんが、モチベーションを取り戻すべく、今日からQiita頑張って書くぜ！

こんな記事はなんの訳にも立たないけど、もし見た人がいたら、Qiitaを書く理由とか、どういうモチベーションとか教えてくれるとうれしいです。
Reactで超簡単な心理テストを作ってみました

#はじめに
[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしているにのみやです。

プログラミング初心者なので、間違いも多いと思います。
間違いがあれば、ぜひ教えてください。
最近Reactの勉強を始めたのですが、何か作ってみたいと思い超簡単な心理テストを作ってみました。
ちょっとずつ改善していきながら理解を深めていきたいと思っています。
今回作成したものは[Progate](https://prog-8.com)のReactコースの1を参考にして作りました。

#コード

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="ninomiya-miraidenshi" data-slug-hash="JgqYzJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="JgqYzJ">
  <span>See the Pen <a href="https://codepen.io/ninomiya-miraidenshi/pen/JgqYzJ/">
  JgqYzJ</a> by ninomiya-miraidenshi (<a href="https://codepen.io/ninomiya-miraidenshi">@ninomiya-miraidenshi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
seleniumでxpath使って要素を取得する

#メモ
pythonでselenium使ってスクレイピングしたり色々してた時、idとかclassやらなんやらが無くてXpathで指定しようってなった時にエラー出てきたのでメモ



```example.py
driver.find_element_by_xpath("//*[@id="example"]")
```

こんな感じにしていてSyntaxError: invalid syntaxって怒られてた、、
ダブルクォーテーションが二重になってたからダメだったっぽい

```example.py
driver.find_element_by_xpath('//*[@id="example"]')
```

こうすれば治った
npm run devでエラーになった時にやった事

# 状況
Vue.jsやNode.jsは全くの初心者。
プライベートでVueを使う必要が出てきたので、プロジェクトをクローンして動かそうとしたところ、エラーとなりハマったので備忘としてやった事を書いていく。（間違っている方法かもなのでご容赦ください。）

# エラー内容
`npm run dev`を実行した際にエラー。

```terminal
$ npm run dev
....(省略)....

 ERROR  Failed to compile with 2 errors                                                                                                                                           friendly-errors 10:04:04

Module Error (from ./node_modules/vue-loader/lib/index.js):                                                                                                                       friendly-errors 10:04:04

Vue packages version mismatch:

- vue@2.6.6 (/Users/******/node_modules/vue/dist/vue.runtime.common.js)
- vue-template-compiler@2.6.10 (/Users/******/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

friendly-errors 10:04:04
Module build failed (from ./node_modules/vue-loader/lib/index.js):                                                                                                                friendly-errors 10:04:04
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (/Users/******/node_modules/@vue/component-compiler-utils/dist/parse.js:14:23)
    at Object.module.exports (/Users/******/node_modules/vue-loader/lib/index.js:67:22)

....(省略)....
```
よく分からないので、とりあえず調べる。

# 参考記事
- [[Vue.js]npm run devのエラー解決方法[vue-cli]](https://qiita.com/Shoryu_N/items/9ae2417489c9faaa271c)
- [Vue packages version mismatchがでた場合](https://qiita.com/fgkm/items/c863263ee6816a4f4a09)
- [How do I fix a “Vue packages version mismatch” error on Laravel Spark v4.0.9?](https://stackoverflow.com/questions/43397688/how-do-i-fix-a-vue-packages-version-mismatch-error-on-laravel-spark-v4-0-9)

# やった事
エラーになった時の↓の文言に対応方法っぽい事が書いてあった。

```terminal
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
```
`vue-loader`のバージョンによって対応方法が違うもよう。
`vue-loader`のバージョンを確認してみる。

```terminal
$ npm info vue-loader version
15.7.1
```
10.0以上なので、`vue-template-compiler`をupdateしてみる。

```terminal
$ npm update vue-template-compiler
```
しかし、エラーは解消せず。
エラー文言を読んでいくと、以下のように書かれていたので、


```terminal
 WARN  node-fetch@^2.6.0 is recommended but node-fetch@1.7.3 is installed!
 WARN  vue@^2.6.10 is recommended but vue@2.6.6 is installed!
```
対象のバージョンにしてみる。

```terminal
$ npm i vue@2.6.10
$ npm i node-fetch@2.6.0
```
すると解決。
3/31と4/1の日付比較しようとしたら同じ日扱いされた恥ずかしい話[Java/Calendar]

#日付オブジェクトを比較する

入社日と退社日の前後チェックを実装しようと思い、GregorianCalendar（Calendarの具象サブクラス）で以下のように日付オブジェクトを生成しcompareToで比較した。


```dateCheck.java

Date march = new GregorianCalendar(2019,3,31).getTime(); // 2019年03月31日(日)
Date april = new GregorianCalendar(2019,4,1).getTime(); // 2019年04月01日(月)
System.out.println(march.compareTo(april)); // 実行結果：0
```
compareToメソッドの返り値（2つのCalendarオブジェクトで表される時間値(元期からのミリ秒単位のオフセット)を比較）
・参照オブジェクト < 引数オブジェクト → 0未満の値
・参照オブジェクト > 引数オブジェクト → 0より大きい値
・参照オブジェクト = 引数オブジェクト → 0

3月31日より4月1日の方が基準時間からの経過ミリ秒が大きい（日付が後）なので、0未満の値で返ることが望ましい。
**しかし、結果は0(同じ)に。**

#日付を確認してみる

二つの日付オブジェクトをコンソールに出力してみる。

```
Wed May 01 00:00:00 JST 2019
Wed May 01 00:00:00 JST 2019
```
どちらも2019年5月1日(水)になっている。ここで「あっ」と気づいた。

#月は0から始まる

これを完全に忘れていた。
つまり、**3月31日→4月31日、4月1日→5月1日**として日付換算される。
4月31日は存在しないが、そんなのお構い無しで経過ミリ秒だけで判断するらしい。

なので、1引いた値を月に設定するとちゃんと思い通りに換算される。

```dateCheck.java

Date march = new GregorianCalendar(2019,2,31).getTime(); // 実行結果：Sun Mar 31 00:00:00 JST 2019
Date april = new GregorianCalendar(2019,3,1).getTime(); // 実行結果：Mon Apr 01 00:00:00 JST 2019

System.out.println(march.compareTo(april)); // 実行結果：-1
```


#Calendarクラスの厳密と非厳密モード

ちなみに[リファレンス](https://docs.oracle.com/javase/jp/8/docs/api/java/util/Calendar.html)を見てみると、Calendarはカレンダ・フィールドを解釈する際、**厳密と非厳密の2つのモード**を使用するらしい。

厳密モード：カレンダ・フィールド内に不一致があると、Calendarは例外をスロー
非厳密モード：Calendarはそれ自身が生成する値よりも広範なカレンダ・フィールド値を受け入れる

デフォルトでは非厳密モードになっているが、厳密モードに変更して範囲外の日付をセットしてみると、4月31日を受け入れないようになる。

```dateCheck.java
Calendar march = new GregorianCalendar();
Calendar april = new GregorianCalendar();
april.setLenient(false); // 厳密モードに切り替え
march.setWeekDate(2019,3,31); // 成功
april.setWeekDate(2019,3,31); // 失敗：java.lang.IllegalArgumentException: invalid dayOfWeek: 31
```

以上、めちゃくちゃ恥ずかしいが超超初心者ならあることかも？と思い書き残す。
私的ACCESSめも集

お仕事で使っているACCESSめもが貯まってきたので、通ってきた道を共有したいと思う
超初心者向け
メモなので割と雑、信ぴょう性が…

#型
VBAではVariant型にしかNULLが入らない、あとオブジェクト
テーブルでは日付、数値、テキスト…でオートナンバー以外には入る気がする

#テーブルのデータ取得
面倒なSELECTとかRecordsetのオブジェクトを指定せずに、テーブルから値を取る方法
DLookup("列", "テーブル名","条件")

■プロパティから設定するとき
DLookup("[項目名]", "テーブル名", "[項目名]='" & seq & "'")
■VBAでやるとき
DLookup("ID", "テーブル名")
DLookup("コード名称", "コードマスタ", "コード区分=1 AND コード= 1")
他にもDSumとかある

#データがないときの挙動
DCOUNT→0
DMAX→NULL
DMIN→NULL
DSUM→NULL

#VBA入力候補
Ctrl+spaceで入力候補が出る
決定はenterでも出来るが直後に改行される
tabキーで改行無しの確定ができる

#プロパティのフォーマット
■書式に書く場合
〒@@@-@@@@
ggge\年m\月d\日
\#,##0
■コントロールソースに書く場合
=Format(Now(),"ggg" & " 年 月 日")
□注意
FormatとかReplaceの戻り値は文字列かVariantだからいろいろと注意

ところで金額の書式って\#,#でも行ける気がするんですが


#式に未定義関数xxxがあります
SQLで関数を使おうとしてた時に、関数名が日本語だと発生したんだけど
発生しない場合もあるので詳細原因は謎
「式に未定義関数Nzがあります」と言われたこともある
こちらはACCESS修復かなんかで直った気がする

#プロシージャ移動
ctrl+↑↓
ctrl+↑↓で前後のプロシージャに移動できる
しんせつせっけい

#サブフォーム内の関数とかを呼び出す
Call Me.Fs_サブフォーム名.Form.関数名
ただし関数とかはpublicにしておく必要がある

#配列の初期化
Erase 配列名

#べき乗の書き方
A = 2 ^ 10
　　　↑^の前後に必ずスペースが必要

#このオブジェクトに値を代入することはできません
Form_Open時のイベントで連結項目に値を代入しようとするとなる気がする
値を代入するときはForm_Load時にやる
あとレコードソースに関数指定したら起こった

#桁数チェック
数値項目で桁が大きすぎると指数表示になる
桁数チェックをlenでやると引っかからなくなってしまうので、lenの前でformat(チェック対象コントロール,"0")にするといいらしい

#更新前処理
更新前処理でcancel=trueにすると更新後イベントに行かない

#レコードに検索キーが見つかりませんでした
フィルターをセットするときに発生
SELECT DISTINCTにしたのが原因っぽい
クエリにしてごまかそうとしたけどダメだった

#四捨五入
Format関数で四捨五入できるらしい
strText = Format(12.345, "0.00")とすると結果は
12.35になるらしい
参考
http://www.openreference.org/articles/view/522

#MoveLastとMoveFirst
Recordset.MoveLastはテーブルが空の場合落ちる気がする

#AfterUpdateイベント
AfterUpdateイベントで入力チェックとかやった場合、SetFocusがうまくいかない
詳細はここ
http://accessclub.jp/bbs/0071/beginers26922.html

#メインフォームからサブフォームのコントロールを参照
str=Me.サブフォーム名!txt_あああ

#VBA内で別フォームの項目を変更
Forms![フォーム名]![txt_項目] = "あああ"
↑ただし参照するフォームが開かれていないといけない
ラズパイゼロで作る天気予報モニター

#1.モチベーション
今日の天気や明日の天気を知りたい時は、スマホの専用アプリで天気を調べることが多いと思いますが、スマホのアプリであると画面から数多くのアプリの中からお天気アプリを探し立ち上げるという作業が必要になります。この作業をいつも億劫に感じていました・・。そこで常時天気予報を表示しているモニターがあれば、わざわざ立ち上げる手間も省け便利だと思い、今から紹介する作品を作りました。

#2.製作した作品

* 現在時刻が15時より前ならば、本日の天気と最高気温と最低気温を表示する。
* 現在時刻が15時以降ならば、明日の天気と最高気温と最低気温を表示する。
* 1時間に1回情報が自動更新される。
* 「更新」ボタンをクリックすれば情報が更新される。
* モニターに天気予報は常時表示されている。

![57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/528a4285-e989-2fb2-4af6-b5e88bc31388.jpeg)



#3.システム構成

Vue.jsは表示部分を担当し、APIにアクセスしお天気データを取得する動作はnode.js上で動かすjsファイルにて実装することにしました。CORS policy(ajaxをクロスドメインで実行しようとするとAPI側でアクセス拒否される)によりVue.jsから直接外部のお天気APIにアクセスはできません。よって、node.js上のjsファイルを介して、お天気APIよりお天気情報を取得することにしました。
APIにアクセスしお天気データを取得する動作はnode.js上のjsファイルにて実装することにしました。Vue.jsからnode.js上のjsファイルにはライブラリ[axios](https://github.com/axios/axios)を使用しております。vue.jsにてPromise形式にてAPIにアクセスするライブラリとしては定番のものです。また使用しているお天気APIは、[livedoorのお天気WebサービスAPI](http://weather.livedoor.com/weather_hacks/webservice)です。使用方法は、[リンク先](http://weather.livedoor.com/weather_hacks/webservice)に記載されていますのでご覧ください

![58.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/ed3a3dcc-710b-9063-fdd4-bf93de81ef26.jpeg)



#4.使用したデバイス

ラズベリーパイゼロWHと、ラズベリーパイ専用3.5インチモニターを調達してきました。
下記サイトより購入することができます。

・[ラズベリーパイゼロWH](https://www.switch-science.com/catalog/3646/)
・[ELECROW 3.5インチ HDMI液晶モニター ](https://www.amazon.co.jp/gp/product/B078GC8132/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1)

ELECROW 3.5インチ HDMI液晶モニター の設定方法はここでは言及しませんが、[こちら](http://nomolk.hatenablog.com/entry/2018/02/06/223000)のサイトに設定方法が書いてあります。


#5.ソースコード

## 5-1 Vue-CLIのインストール

環境構築には、Vue-CLIのインストールが必要です。[Vue-CLIのインストールはこちらに記載しています。](https://qiita.com/NT1123/items/fda5c66f9ffdba878c8a#12-vue-cli%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)

Vue-CLIのインストールが完了すると、下記図にて記載のディレクトリが生成されていると思います。

![59.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/b83b6f18-7a81-9279-a010-c30d001d2454.jpeg)


## 5-2 コードファイルの配置

[こちら](https://github.com/fdfpy/otenkivue)に必要ファイルをアップロードしました。
Otenki.vueは、Vue-CLIの /scr/componentsに配置してください。
otenki.jsは、node.jsが動作する任意の場所にインストールしてください。
UE4でいい感じの２Dカメラを作る

#はじめに
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">奥の方にタイマー表示できた！<br>大きいから急かされてる感が増していいかもしれない<br>あとは、簡単にステージ全体の色相が変わるようにしてみた<a href="https://twitter.com/hashtag/UE4?src=hash&amp;ref_src=twsrc%5Etfw">#UE4</a> <a href="https://t.co/LU2SRsufDy">pic.twitter.com/LU2SRsufDy</a></p>&mdash; Naotsun@C++&amp;UE4勉強中 (@Naotsun_UE) <a href="https://twitter.com/Naotsun_UE/status/1156212402758701056?ref_src=twsrc%5Etfw">July 30, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
現在作っている2Dのパズルゲームを作っていて、いい感じの2Dカメラができたので紹介します。

具体的にどんなカメラかというと、

・独立したアクターで実装
・指定したポイント（アクター）へ追従させることができる
・なんかいい感じにふわっと追従してくれる（上の動画を参照してくださいw）
・カメラの移動範囲を指定できる

みたいな感じです。
#作ってみる
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325493/aaabe5a8-07ba-aa71-53ea-5d1c384398dd.png)
1. まず、現在プレイヤーのクラスのコンポーネントで実装されているカメラを削除する。（削除しなくても動作しますが必要ないので消します）
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325493/9d7db173-92b0-5dab-b03f-b1477979cf24.png)
2. 独立したカメラにするのでカメラ用のアクタークラスを作成します。
![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325493/44a0a636-1810-0066-27fd-6f49d96b5543.png)
3. 作成したクラスのコンポーネントを上の画像のようにします。プレイヤーのクラスにあったものと同じ構造です。
![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325493/9af117a5-b06f-f86a-e95b-1dcba3da3a8a.png)
4. BeginPlayイベントからこのように処理を作ります。SetViewTargetWithBlendノードを使用すると使うカメラを切り替えることができます。
![5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325493/d3619dcd-3ae0-3bb3-44e7-24d565a186b0.png)
5. 次に使用する変数を作成しておきます。TargetActorはActor型で、その他は全てfloat型です。
～Limmitは上下左右の移動できる範囲を座標で指定します。
AimSpeedはカメラが追従する速さです。
TargetActorは名前の通り追従する対象のアクターです。
![6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325493/4bfdd2a8-898d-7fff-b3c9-15207dc47d1b.png)
6. 次にTickイベントからこのように処理を作ります。処理の流れとしては、

- IsValidノードで対象のアクターがあるかを確認
- そのアクターの座標を取得
- Clampノードで移動範囲より外側に行かないように制御
- VInterpToノードのCurrentにカメラの座標、Targetに対象のアクターの座標、DeltaTimeにTickイベントのDeltaSeconds、InterpSpeedに先程作成したAimSpeedを接続（AimSpeedはなくてもいいですが後から値を変える時に楽なので変数にしました）
- SetActorLocationノードを使用して、VInterpToノードの戻り値の座標へ移動

となります。VInterpToノードのInterpSpeedについて少し注意点があり、数値が小さいほどゆっくり追従するようになりますが0の時は止まるのではなく対象のアクターの移動に合わせて動くようになります。（プレイヤーのクラスに実装されているカメラみたいな動き）
#おまけ
###移動範囲制限無しバージョン
![7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325493/f4770e74-b332-6e59-5e3e-870d5e68296a.png)
###2Dアクションゲームでよくある向いてる方向よりのカメラ
![8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325493/a6099dee-bd2e-94b2-498a-755b32fada17.png)
プレイヤーのクラスにカメラに追従させるためのクラスを追加してプレイヤーの前方に配置し、TargetActorにこのクラスを指定する。
![9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325493/41da077c-1f68-d31e-786a-6b0f046e4156.png)
↑ 向いている方向に寄ったカメラ                  
↓ が普通の状態のカメラ
![10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325493/eb582720-2664-3e27-3b5f-1cdb05e5df13.png)
#おわりに
UE4ではプレイヤーのクラスにカメラが実装されていますが、UE4以外では独立して実装するのが一般的だそうです。また、独立しているため追従する対象を動的に変更することができるため、注視するような処理なども作りやすくなるかと思います。
まだReduxで消耗してるの？Redux公式ライブラリ「Redux Starter Kit」でReduxアレルギーから解放されよう！

# まだReduxで消耗してるの？
Reduxって、そのお作法のせいで、無駄にコードの記述量が多いし、学習コストが高いですよね。

Reduxで消耗しているそこのあなたや、
学習途中で挫折してReduxアレルギーになってしまったそこのあなたには、
[Redux Starter Kit](https://redux-starter-kit.js.org/)
という、Redux公式パッケージの利用を強くオススメします。

この[Redux Starter Kit](https://redux-starter-kit.js.org/)は、Reduxをいい感じにラップしてコード記述量を抑えてくれつつ、必要最低限のベストプラクティスなライブラリも一緒にバンドルしてくれているオールインワンのライブラリ群です。

この感動を乱暴に例えると、古き良きXML定義時代のSpringFrameworkに対して生まれたSpringBootに出会ったときみたいな感覚です。

具体的に何が良いのかを詳細に説明しようと思いましたが、すでに分かりやすく説明してくださってる人がいらっしゃったので、↓をご参照ください。

- [Redux Starter KitでHooksとReduxを使いこなそう](https://qiita.com/uehaj/items/f91d68ea4ef8450fc45c)

# なぜこの記事を書こうと思ったか
Redux公式のライブラリであることや、[GitHub](https://github.com/reduxjs/redux-starter-kit)での更新頻度、スター数を見ても、これから伸びてスタンダードになっていく可能性は高いと思います。

しかし、[Qiitaのredux-starter-kit関連記事](https://qiita.com/tags/redux-starter-kit)を見てみたところ、少なくともまだ日本(の少なくともQiita民の中)では認知度が低めで、まだ十分に活用されていないのかなと思いました。

名前がStarter Kitなので、ボイラープレートと勘違いする人が多いかもしれませんが、実態としてはライブラリです。
正直、名前の付け方を変えればもっと早く流行ると思います。
個人的に名前をつけるとしたら「ReduxBoot」って名付けたい。

ぜひもっと盛り上がって、デファクトスタンダードになってほしいライブラリです。

気になったら
[Redux Starter Kit](https://redux-starter-kit.js.org/)
のGET STARTEDからぜひ試してみてください。
インターネットの仕組み　パート１

<h1>概要</h1>
　インターネットの仕組みを理解する上で欠かせない内容をまとめました！
技術を取得する前に、最低限知っておきたい内容を１から簡単に説明していきます。
<h2>ネットワークの仕組み</h2>
　ネットワークとは、複数のパソコン等が相互に繋がっている状態のことをいいます。
ネットワークには「クライアント・サーバ」と「P2P」という２つの仕組みが存在する。
<h2>インターネットとは</h2>
　インターネットはこのネットワークを相互に接続することで構築された巨大なネットワークです。このインターネット上にサーバーと呼ばれるサービスがあることで私たちは様々な恩恵を受けています。
<h2>サーバーとは</h2>
　サーバーには様々な種類があります。Webコンテンツを提供してくれる「Webサーバー」や、メールの送受信をする時に使用する「メールサーバー」などがあります。

| 種類 | 機能 | ソフトウェア |
|:-:|:-:|:-:|
|Webサーバー|Webコンテンツを提供|Apache, nginx|
|メールサーバー|メールの送受信を行う|postfix,dovecot|
|DNSサーバー|ドメイン名・IPアドレスを変換してくれるサービス|bind,unbound|
|FTPサーバー|ファイルの送受信を行う|vsftpd,samba|
|データベースサーバー| データを保管し管理する|MySQL,PostgreSQL|

<h2>プロトコルとは</h2>
 プロトコルは、コンピュータ同士が情報のやりとりをする際の共通言語、ルールです。TCP/IPという標準化されたプロトコルが使用されています。

| 種類 | 機能 |
|:-:|:-:|
|HTTP|ホームページの閲覧|
|SSL|暗号化通信|
|POP3|メールの受信|
|SMTP|メールの送信|
|FTP|データの送受信|
|SSH|リモートコンピュータ|
|DNS|ドメイン名をIPアドレスに変換|

<h2>最後に</h2>
　今回はインターネットの仕組みの一部を紹介しました。次回はこの続きを紹介して行きます。
[HIG] アクセシビリティ - テキストサイズとウェイト

この記事は Apple の Human Interface Guideline の Accessibility - [Text Size and Weight](https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/text-size-and-weight/) の部分を翻訳したものになります。正確な情報は公式ページを御覧ください。なお、言葉遣いには気をつけているつもりですが、不適切な部分がありましたら編集リクエストをください。

# テキストサイズとウェイト

インクルーシブなアプリを設計する場合、明瞭さと読みやすさを確保するためにテキストサイズ、ウェイト、レイアウトを意識してください。色とコントラストがアプリの読みやすさに与える影響については、[Color and Contrast](https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/color-and-contrast/) を御覧ください。

**Dynamic Type を使用し、アプリのレイアウトがすべてのアクセシビリティフォントサイズに適応しているか確認しましょう。** Dynamic Type を使用すると自分に合ったフォントサイズを使うことができます。テキストとグリフの両方について、拡大縮小ができること、すべてのアクセシビリティフォントサイズで読みやすいことを確認しましょう。（サイズについては [Larger Accessibility Type Sizes](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/#larger-accessibility-type-sizes) を御覧ください）

**フォントサイズの拡大とともにテキストが切り捨てられないようにしてください。**デフォルトサイズで見えているのと同じ量のテキストがスクロールして見える状態がベストです。残りのコンテンツを読むために別のビューを開くことができないなら、テキストを切り捨てないでください。

**フォントサイズと一緒に、重要な意味を持つグリフのサイズも大きくなるようにしてください。**重要な情報を伝えるためにグリフを使っているのであれば、フォントサイズと同様に大きなサイズにして見やすくなるようにしてください。

**ユーザのフォントサイズ選択に関係なく、情報階層が一貫している状態を保ってください。**例えば、フォントサイズが非常に大きいときでも要素が欠けて見えないように主要な要素は画面の上部に置いたままにするなどの対応が挙げられます。

**アプリではレビュラーかヘビーのフォントウェイトを使用してください。**フォントウェイトは Regular、Medium、Semi-Bold、Bold を使って下さい。そうすることで見やすくなります。UltraLight、Thin、Light  のフォントウェイトは見づらい場合もあるので避けるようにしてください。

**ユーザが太字テキストを選択したときでもアプリが正しく反応し、見栄えがよくなるようにしてください。**ユーザはアクセシビリティ設定で太字テキストをオンにして、テキストやグリフが見やすくなるようにできます。これに応じてアプリ側はすべてのテキストを太字にし、すべてのグリフのストロークの太さを大きくする必要があります。

**カスタムフォントが見やすくなっているか確認してください。**カスタム書体は時に読みにくくなります。ブランディングやゲームへの没入感などのために必要な場合を除き、普段はシステムフォントを使うことが望ましいです。もしカスタムフォントを使いたいなら、小さいサイズでも読みやすくなるようにしてください。

**両端揃えは避けてください。**両端揃えによって空白ができると、テキストを読むのが難しくなったり、テキストを読むのに集中できなくなったりする可能性があります。左揃え（右から左に記述する言語では右揃え）はディスレクシアなどの学習問題を抱える人々でも馴染みやすいです。

**長い文章には斜体や全大文字を使わないようにしましょう。**斜体や全大文字は時々強調する分には効果的ですが、使いすぎると読みにくくなります。
[HIG] アクセシビリティ - ベストプラクティス

この記事は Apple の Human Interface Guideline の Accessibility - [Best Practices](https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/best-practices/) の部分を翻訳したものになります。正確な情報は公式ページを御覧ください。なお、言葉遣いには気をつけているつもりですが、不適切な部分がありましたら編集リクエストをください。

# インクルーシブデザインのベストプラクティス

インクルーシブデザインは、誰もがアプリを使用、理解できるようにすることで、より多くの人にアプリを楽しむチャンスを与えられます。インクルーシブなアプリを作るには、以下の3つのベストプラクティスが役立つでしょう。

# アクセシビリティを考慮したデザイン

アクセシビリティは障害を持つユーザが情報を得られるようにするだけを指すのではありません。能力や状況によらず、すべての人が情報を得られるようにすることを指します。アクセシビリティを念頭に置いてアプリをデザインするということは、異なる能力を持つユーザ、様々な方法でデバイスを用いるユーザを除け者にすることがないよう、シンプルさ、知覚しやすさを優先しつつ、全てのデザイン的決断をすることを意味します。

シンプルさ：複雑なタスクが簡単になったり、操作がわかりやすくなるように、インタラクションを馴染みのあるもの、一貫性のあるものにします。

知覚しやすさ：視覚、聴覚、触覚のどれを使っていようと、すべてのコンテンツが知覚できるようにします。

# サポートのパーソナライズ

あらゆる状況、全てのデバイスでアプリを楽しめるよう、デバイスの向き、画面サイズ、解像度、色域、スプリットビューなどの様々な要因にアプリが適応できるようにしましょう。ユーザが自分に合ったデバイス操作ができるようアクセシビリティ機能を組み込むには、最小限の努力で可能です。

標準コントロールを使ってアプリのUIを実装すると、テキストやインターフェイス要素は自動的に太字テキスト、大きいテキスト、色反転、コントラスト強化などのいくつかのアクセシビリティ設定に適応させることができます。

# アプリのアクセシビリティについての検証、テスト

アプリ内の全ての要素を調べることで、修正すべきリストを全体的に洗い出すことができます。テストでは、どのような方法でデバイスを操作するかによらず、全てのユーザがアプリ内の重要タスクを完了できるかを確認するのに役立ちます。

アクセシビリティ機能をオンにして重要なユーザフローをテストすると、様々な方法でデバイスを操作するときの課題を認識することができます。また、優れたユーザ体験を提供できていない箇所を発見することもできます。

例えばソーシャルメディアアプリの一般的なユーザフローは、「コメントに対するリプライを書き込む」ことです。このフローを構成するタスクには、次のものが含まれます。

* 投稿されたコメントを読む
* リプライする投稿を選択する
* リプライを書く画面を開く
* リプライを編集する
* リプライを投稿する

アプリにおける重要なユーザフローごとに VoiceOver、視差効果を減らす機能、文字サイズを拡大する機能などのアクセシビリティ機能をオンにし、全てのフローを問題なく完了できるかどうかを確かめます。うまくできなかった部分を修正したら、今度は異なるアクセシビリティ機能をオンにして、再度ユーザフローを検証します。

Xcode の Accessibility Inspector は、アプリの検証、テスト、修正をするときに役立ちます。
[HIG] アクセシビリティ - イントロダクション

この記事は Apple の Human Interface Guideline の Accessibility - [Introduction](https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/introduction/) の部分を翻訳したものになります。正確な情報は公式ページを御覧ください。なお、言葉遣いには気をつけているつもりですが、不適切な部分がありましたら編集リクエストお願いします。

# アクセシビリティ

人々は透明度を下げる機能、VoiceOver、テキストサイズの拡大機能などの Apple のアクセシビリティ機能を利用して、自分に合ったデバイスとの付き合い方を身につけていきます。アクセシビリティ対応がされたアプリは、そのようなパーソナライズされた機能を提供したり、あらゆる人に素晴らしいユーザ体験を提供することができます。これは、アプリの機能やデバイスの使い方には依存しません。

# 機能障害と適応

世界の約7人に1人の人が機能障害や能力障害を抱えており、それが周りやデバイスとの関わり方に影響を与えています。人はあらゆる年齢、あらゆる期間、様々な重症度で障害を経験する可能性があります。車の運転、明るい日のハイキング、静かな図書館での勉強などの一時的な状況下での障害は、デバイスを操作するほとんどの人に関わる可能性があります。

障害の4つの主要なカテゴリと、それらに対応するアクセシビリティ機能を知り、全ての人にとって包括的でアクセシブルなアプリになるようデザインしていきましょう。

## 視覚

視覚機能障害には失明、色覚異常、画面を見るのに不快感や困難を感じたりする問題や状況が含まれます。

視覚障害のあるユーザ向けに、Apple は全てのプラットフォームに VoiceOver を提供しています。また、色反転機能、テキストの拡大機能、ズーム機能、拡大鏡機能などの表示機能も提供しています。

## 聴覚

聴覚障害にはあらゆるタイプの聴覚欠如に加え、映画館でデバイスから音を出したくない状況なども含まれます。

Apple はクローズドキャプション、視覚・触覚通知、Siri などの機能を通じて、聴覚インタラクションに代わるものを提供しています。

## 身体、運動

身体、運動上の問題を持つ人は、デバイスを持ったり操作したりするのが困難な場合があります。

Apple は細かい動作をせずともデバイスを使用できるように、いくつかの仕組みを用意しています。

* Switch Control は iPhone、iPad、Mac、Apple TV のどのデバイスでも使えます
* Siri を使えば音声を使ってアプリやデバイスを操作できます
* Assistive Touch により、標準ジェスチャーをより簡単に実行できます

## 読解記述力と学習

読解記述力と学習に関する問題には、話すこと、読むこと、複雑なものの解釈、集中力の維持に対する難しさが挙げられます。