OmniAICreator/Qiita-1.07M huggingface dataset:
【Nuxt.js】Vuexを利用したデータのやり取りを追っていく〜ログインデータ編〜【Vue.js】

Vuexのデータのやり取りの流れって何回も移動するので、ややこしくなりますよね。。。。
そんなあなたのために、データのやり取りを仕事に例えて追っていこうと思います。

まずは、おなじみのデータのサイクルから復習しておきましょう

![Vuex](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F11510%2F0d03d653-b2ef-654f-9533-fdd0b4622723.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=a844b05ad2a1def5fdec59296e891664)

> 参考記事
https://qiita.com/nasum/items/d17c0a628e6c32616b85

#メソッドの早見表

|仕事する場所|仕事を依頼する関数|仕事を受け取る関数
|:--|:--|:--
|Vueコンポーネント|this.$store.dispatch(引継ぎ先関数名, データ)|this.$store.getters[stateデータ名]
|actionsプロパティ|context.commit(引き継ぎ先関数名, データ)|関数名(context, payload)
|mutationsプロパティ||関数名(state, payload)

<details><summary>payloadとは</summary>受け取ったデータのこと</details>


#1.Vueコンポーネント

###仕事を依頼する関数(actionsプロパティへ)
`this.$store.dispatch(引継ぎ先関数名, データ)`で、actionsプロパティに引き継ぎさせます。

```vue:
<script>
export default {
  data () {
    return {
      loginForm: {
        email: '',
        password: '',
      },
    }
  },
  methods: {
    loginSubmit (session) {
      this.$store.dispatch('login', {
        email: this.loginForm.email,
        password: this.loginForm.password,
      })
    }
  }
}
</script>
```


#2.actionsプロパティ

###仕事を受け取る関数(Vueコンポーネントから)
`関数名(context, payload)`で、データを受け取る

###仕事を依頼する関数(mutationsプロパティへ)
`context.commit(引き継ぎ先関数名, データ)`で、mutationプロパティにデータを引き継がせる。

```store/index.js
export const state = () => ({
  user: {
    uid: '',
    name: '',
    email: '',
    login: false
  }
})

export const actions = {
  async login ({ commit }, payload) {

    const loginUser = await this.$axios.$post('/api/v1/sessions', {
      session: {
        email: payload.email,
        password: payload.password,
      }
    })

    await commit('getData', {
      uid: loginUser.data.id,
      name: loginUser.data.name,
      email: loginUser.data.email,
    })

    await commit('switchLogin')

    alert(loginUser.data.name)
    this.$router.push({ path: `/users/${loginUser.data.id}` })
  }
}
```

引き継がれたactionsプロパティのloginメソッドの主なお仕事は三つ。
1. 引き継がれたデータをAPIに投げて、帰ってきた値をキャッチする
2. キャッチした値の中のデータを、mutationプロパティに引き継がせる
3. もう一つだけ違う仕事を、同じくmutationプロパティに依頼する


#3.mutationsプロパティ

###仕事を受け取る関数(actionsプロパティから)
`関数名(state, payload)`で、データを受け取る

```store/index.js
export const mutations = {

  getData (state, payload) {
    state.user.uid = payload.uid
    state.user.name = payload.name
    state.user.email = payload.email
  },

  switchLogin (state) {
    state.user.login = true
  }
}
```

mutationsプロパティ内のメソッドのそれぞれの仕事は以下の通り。
1. getDataの仕事は、受け取ったデータをstateデータに格納する
2. switchLoginの仕事は、stateのloginの真偽値をtrueにする

#4.gettersプロパティ

仕事を納品する(Vueコンポーネントへ)

```store/index.js
export const getters = {
  user: state => {
    return state.user
  }
}
```


#5.Vueコンポーネント

納品されたものを受け取る(gettesプロパティから)

```vue:
<template>
  <v-card>
    {{ user }}
  </v-card>
</template>

<script>
・・・
  computed: {
    user () {
      return this.$store.getters['user']
    }
  }
・・・
</script>
```
勢いでMacbook買ってから初めてのiPhoneアプリをリリースするまでのメモ

# はじめに
3月にMacbookProを購入し、独学でプログラミング(Swift)を学習し、8月に初めてのiOSアプリをリリースしました！
今回はアプリリリースまでにどうプログラミングを勉強したのか、どういう教材でアプリ開発を学んだのかを紹介します！

# リリースしたアプリ
~~思いっきり宣伝ですがこちらからダウンロードできます↓~~（現在は配信停止中）
https://apps.apple.com/jp/app/prophecy-%E4%BA%88%E8%A8%80%E3%83%9E%E3%82%B8%E3%83%83%E3%82%AF/id1528918453

記念すべき初のアプリは【手品アプリ】です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620431/37ee5273-a6df-07b5-5f2e-9cde983777fc.png)

iPhoneでお客さんが選んだカードを当てる簡単なマジックです！
実演動画はYouTubeに載せています↓
https://www.youtube.com/watch?v=yabrcQwxoSY

# リリースに向けてSwiftの勉強

まず私のMacbook購入時点のプログラミングスキルですが
・プログラミングの基本文法はわかる。（変数、メソッド、条件分岐、繰り返しなど）
・Java、Javascriptを少し触れたことがある。
・Swiftは一度も触ったことがない。

なので、完璧に初心者というわけではないですが、
Progate(無料のプログラミン技学習サイト)で基本文法を勉強したくらいのレベルだと思います。

以下、私が学習する際に用いた教材を紹介します。

### ①絶対に挫折しない iPhoneアプリ開発「超」入門 第8版 【Xcode 11 & iOS 13】 完全対応
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620431/65f7e04e-a8c7-09ee-b41d-d3404e254977.png)

こちらの本ではiPhoneアプリの開発に必要なXcodeという開発ツールのインストール方法からSwiftの基本文法、いくつかのサンプルアプリの作成手順などが画像付きで載っており、初心者にはオススメです！

ちなみに私がこの本を買った当時は第7版だったので、本の中の画像が一部古かったりもしましたが、
2020年6月に最新の第8版が出たので、今時点では画像に差異はほとんどないかと思われます。

私はこの本を1ヶ月ほどかけて読み終えましたが、本の内容で一部理解が曖昧だったところ（デリゲート、クロージャなど）があったため、別の教材を手に取りました。

### ②【iOS13対応】未経験者がiPhoneアプリ開発者になるための全て iOS Boot Camp

こちらは動画学習サイトUdemyの教材となります。
https://www.udemy.com/course/ios13_swift5_iphone_ios_boot_camp/

こちらの動画では３０個近くのサンプルアプリの作成手順が動画で解説されており、サンプルアプリ開発を通してSwiftの様々な機能について学べます。
Swiftの基本文法はもちろん、GoogleAdmobの広告の付け方までかなり幅広く解説されています。

しかも、動画内でわからないところがあればコメントにて質問することができます。

動画時間は全て合計すると約30時間ほどあるので、毎日1〜2時間視聴したとしても1ヶ月ほどかかります。
私は普段仕事もあったので、週5日1〜2時間ほどのペースで進めており、1.5ヶ月ほどかかりました。
本である程度理解できているところは1.5倍速で見ていました。

①の本で分からなかったところは動画で理解することができ、動画で分からなかったところは本を読み返して理解することができたので、教材は2つ以上あると勉強しやすいのかなと思いました。

### その他
分からないところは随時検索したり、QiitaやYouTubeを見たりしていました。
特にAppleにアプリの申請を行うところなどはたくさん検索しました。
先人様の知恵に感謝です。

# いざオリジナルアプリ開発へ！

アプリの構想自体は②の動画教材を勉強しながらぼんやりと考え始めていました。

構想時点ではあれもこれもと色々機能をつけがちですが、
初心者にとって一番大切なのは**【シンプルでもいいからとりあえず物を完成させる】**ことです。
いきなり自動車を作るのではなく、まずは一輪車を作るようにした方がいいです。

初めからあれもこれもと色々な機能を付けようとすると、思っている以上にうまく動作しなくなります。
そうなってくると開発のモチベーションが下がり挫折してしまいます。
私も最初は多機能アプリの構想を練っていたので、かなり大変でした。。。

なので、今回は画面数も極力減らし、かなりシンプルな画面構成にしてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620431/33786e2e-2212-9da6-a23f-6b809fd72591.png)

結果的にバグもあまり発生せず、かなりスムーズに開発を進めることができました！

# おわりに
今回はアプリリリースまでにどうプログラミングを勉強したのか、どういう教材でアプリ開発を学んだのかを紹介してみました！
リリースしたアプリは正直かなりシンプル構造です。誰でも作れますレベルです。

が、やはり自分で作ったアプリがAppStoreに表示されるともうそれだけで嬉しくなります…！！！

これからiPhoneアプリを作ってみたいという方にぜひ参考になればと思います！
Spacemacsでpyrightを使う

[Spacemacs](https://github.com/syl20bnr/spacemacs/tree/develop)でLSPの要となる[lsp-mode](https://github.com/emacs-lsp/lsp-mode)のうち[lsp-pyright](https://github.com/emacs-lsp/lsp-pyright)によってPythonの型チェッカー[pyright](https://github.com/microsoft/pyright)が使えるようになったことを最近知ったので使う

(従来の[pyls](https://github.com/palantir/python-language-server)でいいじゃん説はあるが最近なんか重い気がしたので速いと評判のpyrightを試している)


## pyrightインストール
node使ってるならnpmでpyrightをインストールしておく

```bash
$ npm install -g pyright
```


## SpacemacsでPython LayerのLSPサーバをpyrightに指定
`.spacemacs`のlayer設定ではこう書けとあるので書く。
LSPサーバとして指定できる模様

```emacs-lisp:.spacemacs(抜粋)
(defun dotspacemacs/layers ()
  (setq-default
   dotspacemacs-configuration-layers
   '(
     (python :variables 
      python-backend 'lsp 
      python-lsp-server 'pyright)
    )
  )
)
```

cf. https://github.com/syl20bnr/spacemacs/tree/develop/layers/%2Blang/python

Spacemacs側でjediをsetupする必要はなさそう


## LSPプロジェクトのルート下に設定ファイルを作成
Pythonファイルを開くとLSPのプロジェクトルートを決めろと言われるが、そのプロジェクトルートに `pyrightconfig.json`を作っておく。

Ubuntu18.04LTS on WSL2 on Windows10でやったが、たとえばユーザ名 `v2okimochi`でプロジェクトルート `v2project/`に置くならこんな感じ

```json:pyrightconfig.json
{
  "venvPath": "/home/v2okimochi/.local/share/virtualenvs/v2project-ABCDEFGH",
  "stubPath": "",
  "executionEnvironments": [
    {
      "root": "src"
    },
    {
      "root": "tests",
      "extraPaths": [
        "src"
      ]
    }
  ]
}
```

- pipenvというかpyenvを使っている場合は `venvPath`を指定する
    - home directory下の `.local/share/virtualenvs/`あたりにあると思われ
    - これも役立つかも [SpacemacsでPythonの自動補完やlinterなどを効かせる - Spacemacsでpython仮想環境を認識させる](https://qiita.com/v2okimochi/items/db178969165e72d2032f#spacemacs%E3%81%A7python%E4%BB%AE%E6%83%B3%E7%92%B0%E5%A2%83%E3%82%92%E8%AA%8D%E8%AD%98%E3%81%95%E3%81%9B%E3%82%8B)
- 不要なエラーを消すため `stubPath`を空指定
    - `typings is not a valid directory`エラーが出てそれなりに目障り (無害らしいけど)
      cf. [typings.py` file inside a project causes pyright to report that this is not a valid directory. ](https://github.com/microsoft/pyright/issues/777)
- pyrightに読み込んでもらうルートディレクトリを指定する
    - 上の例は、プロジェクトルートに `src/`と `tests/`がある場合
    - `tests/`の指定で `src`も指定しないと、 `tests/`のソースコードで `src/`のソースコードを参照できなさそう


## 3rd partyライブラリを読めてないかも
boto3とか使おうとしたらimport unresolvedエラーだった。

VSCodeでの似たようなエラーは修正されたようだが。。。
cf. [all third party imports not resolved in VS Code](https://github.com/microsoft/pyright/issues/437)

とりあえず `pipenv run pip install boto3`でこっそりインストールしたら解決したけどなんか違う気がする (Pipfileに書いてあるのにインストールされてないとしたらそれはそれで気になる)
form_withの見落とし

Ruby on Railsのdeviseをインストールしカリキュラムのアプリケーションを作成した時の大きな見落としを、自分への注意として書いきます。

ログイン機能を実装していましたが、ログイン動作が出来ないのです。

viewsファイル、modelsファイル、controllersファイルを見直しても原因がわかりません。

1日色々原因を探しましたが分からずに就寝
その時のコードがこちらです。

![= form with , class 'registration-main', local true do Ifl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683447/6f5e1e19-9f3c-df31-6306-1240dbe702d6.png)

次の日に原因究明です！
なんと、form_withの後にモデル名、URLの記述がないのです。
モデル名、URLを記述し無事にログイン動作が出来ました。

![ZNTETLD7A LUA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683447/93e2a854-7769-02e4-7b15-51b5169dee4f.png)

今回の反省点
Gemのdeviseを使っていたとしても、きちんとコードのチェックを実施しなければならないと痛感しました。
C言語の学習 (初心者)

#　この記事について
C言語を学習し始めた初心者がアウトプットのために書いたものです。大半の方にとっては参考にならないと思います。記事の間違った内容があればご指摘いただけると助かります。


# C言語について
そもそもC言語とは
「C言語とは、1972年のAT&Tベル研究所で、ブライアン・カーニハンとデニス・リッチーによって開発された、コンパイル型の汎用プログラミング言語のことである。」
IT用語辞典のBINARYより https://www.sophia-it.com/content/C%E8%A8%80%E8%AA%9E

だそうです。

比較的歴史の長い言語ですが、今尚人気が衰えていないです。
C言語の主な特徴は"コンパイル"という処理が必要なことです。コンパイルとは、人の手で書いたソースコードを機械が理解できる言語に変換する行為です。他の言語と違い既に変換した後なので、早く処理できるというメリットがあります。

# Hello World
新しい言語を学ぶ時に必ず作るものですが、ターミナル上に'Hello World'と表示されるファイルを作成しました。

```sample.c
/*決まり文句みたいなもの*/
#include <stdio.h>
 /*int main(void){}の{}の中に処理を書く*/
int main(void){
/*printf();は文字を標準出力へ出力する関数*/
/*/nは改行を意味する*/
    printf("Hello World\n");
    return 0;
}

```

このファイルをコンパイルする必要があります。コンパイルはターミナルで実行します。ディレクトリは元のファイルと同じディレクトリで行ない、以下のようにコマンドを書きます。

```

% gcc -o hello sample.c
% ./hello

```
gcc(コマンド)は「GNU Compiler Collection」の略です。
-oはオプションで、出力先をfileに設定する。
上記のhelloはコンパイル後のファイル名です。
sample.cは元々のファイル名です。
コンパイルされたファイルを実行する時は"./コンパイル後のファイル名"とコマンドを書くことでできます。

#　変数
C言語にも他の言語と同様に変数という概念が存在します。変数には型が存在しており、変数の定義の時に書くコードが型によって変わります。整数はint、実数(少数も含む)はfloat、1文字はcharです。定義は以下のように行ないます。

```sample.c

#include <stdio.h>

int main(void){
/*データの型　変数名　= 代入する値*/
    int x = 10;
    float y = 4.6f;
    char c = 'Z';
}

```

また、printf関数で変数の値を出力させる方法が決まっているので、それについても纏める。
printfの""内での変数の表し方は、整数の場合%d、実数の場合%f、1文字の場合%cである。

```sample.c

#include <stdio.h>

int main(void){
    int x = 10;
    float y = 4.6f;
    char c = 'Z';
/*""内で変数を%dや%f等で表現し、""の外で実際の変数名を記入*/
/*順番通り書かないとエラーが出る*/
    printf("%d, %f, %c\n", x, y, c);
/*ターミナルでは"x = 10, y = 4.600000, c = Z"と表示される*/
    return 0;
}

```

# 演算子
C言語の演算子は他の言語と似ています(C言語が元祖?)。

```
・四則演算
　+(足し算)、-(引き算)、*(掛け算)、/(割り算)、%(余りの値)

・代入を伴う演算子
　x = x + 5 と　x += 5　は同じ

・単項演算子(1ずつ足したり1ずつ減らしたり)
　++ --

```

```sample.c

#include <stdio.h>
 

int main(void){

    int x = 10 % 3; /*余りは1*/

    x += 3; /*1 + 3 = 4*/

    x++; /*4 + 1 = 5*/

/*5が表示される*/
    printf("%d\n", x);
    return 0;
}

```

# 感想
コンパイルという作業を初めてC言語の学習で知ることができた。これまで学んできた言語と比べると難しそうな印象だが、引き続き勉強を続けたい。
Three.jsでgltfを読み込んだ時に、カリングを有効にする。

#カリングとは
面の片側のみ描画して負荷を下げる方法。
サイコロを現実世界に置いてみればわかると思うが、必ず6面あるうちの3面しか同時に見ることができない。そのため、裏側に位置する3面を描画しないようにする仕組みのこと。

three.jsのデフォルトでは、materialから、表示するsideを指定することになる。

#やり方
blenderで出力したものを読み込んだ時に、カリングがうまくONにならなかった。
多分loader側ではあんまりいじってないので、自前ですべてカリングを有効にしておこう。

```Javascript
(new THREE.GLTFLoader()).load( 'model.glb' , gltf => {
	//キューにすべてのchildrenをいれる。
	const targets = [...gltf.scene.children];

	while(targets.length > 0) {
		let child = targets.pop();
		for(let cc of child.children) {
			targets.push(cc);
		}
		if(child.type == "Mesh" && child.material) {
			child.material.side = THREE.FrontSide;
		}
	}
});
```
Ajax、jsonの仕組みを言語化してみる

Ajaxやjsonと聞いただけで、抵抗がある人が多いのではないだろうか。
この記事では、そんな方人へ向けて記事を書きます。


# Ajaxとは

Asynchronous JavaScript + XML　の略で、Ajax（エイジャックス）といいます。
非同期でページ内容を更新する技術のことを指します。

Ajaxでは、レスポンスのデータにJSONという形式が使われることが多いです。


# jsonとは

Java Script Object Notationの略で json(ジェーソン)といいます。

データのやりとりを行うための記述形式の一種です。
キーとバリューの形式でデータを表現します。

#ajaxとjsonの流れ

通常のHTMLは情報を受け取る(レスポンス)とブラウザは全てのHTML情報を再読み込みします。
しかし、Ajaxは主にjsonという型でレスポンスが行われます。

この時にJavaScriptがサーバーからjson形式で返されたデータをHTMLに形成してブラウザに反映させます。

これで、ブラウザ全体を更新せずに、一部を更新することができます。
初心者がハマったCSSまとめ

#前提
私がハマったcssをまとめた備忘録です

##display
要素の「表示形式」を指定するプロパティ

###ブロックレベル要素　display: block
見出し要素（h1, h2, h3…h6）、p、ul、ol、li、div、table
要素の前後に改行が入り、ブロックが積まれているイメージ

・widthとheightを指定できる
・上下左右にmargin,paddingを指定できる
・text-alignは要素の中身に適応される

###インライン要素 display: inline
ブロックレベル要素の中身として使われる要素(a、span、strong など)
テキストの一部として扱われるため、要素の前後には改行は入らず横に並んでいくイメージ

・widthとheightを指定できない
・左右だけmargin,paddingを指定できる
・text-alignは親ブロックに指定することで適用できる

###display: inline-block
・横に並んでいく
・widthとheightを指定できる
・上下左右にmargin,paddingを指定できる
・text-align を親ブロックに付けることで指定できる。

```
<ul>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
<ul>
```

```
li {display: inline-block;}
a { display: block;}
```

listをインラインブロックで横並びにして、aをブロック要素で表示することでクリックできる範囲を広げる


##overflow
ボックス内に収まりきらない内容の処理を指定するプロパティ

・visible(初期値)：ボックスから内容をはみ出して表示

・hidden：ボックスからはみ出した要素は表示しない

・scroll：ボックスに入りきらない内容はスクロールで表示される

・auto：ボックスに入りきらない内容はスクロールで表示される

autoとhiddenの違い
autoは内容が入りきらない場合にのみスクロールバーが表示
hiddenは内容にかかわらず常に表示される


##position

position: staticが初期値
通常の位置に配置される、topやbottomなどの位置を指定できない

###position: relative
元々配置される位置を基準にtopやleftなどを指定することができる

###position: absolute
通常の位置から外れてbodyが基準になる
親要素にstatic以外の値を設定している場合は親要素の左上が基準の位置になる

```
<div class="container">
  <img href="#">
</div>
```

```
.container{
            position: relative;
          }
.container img{
                position: absolute;
                top: 50%;
                left: 50%;
              }
```

containerを基準にimgの場所を指定できる


##clear

回り込みの解除
floatプロパティで左、右寄せを指定されている要素の回り込みを解除する際に使用

none　初期値。回り込みを解除しない
left　左寄せされた要素に対する回り込みを解除
right　右寄せされた要素に対する回り込みを解除
both　全ての要素に対する回り込みを解除
BitcoinとAoiの"信頼"への考え方

## はじめに

ここでは自分の**信頼**についての考え方をお披露目していこうかと思います。これは、自分だけでなく、民主的な合意形成アルゴリズムなどでも使われている考え方だと思うので、そこら辺をご周知ください。それと、僕が作った**Aoi**も、この考え方に基づくものです。

## だれかを信頼するということ
よく、ブロックチェイン技術について「どこに惹かれたのか」と聞かれたときに色々ありすぎて、数分じゃとても語りきれそうにないことがあります。そのとき「人に対しての信頼から、コード、というかシステムの設計を信頼するだけでいいところです」と愚直に答えると「でも性善説に沿っているんじゃないか」と言われます。確かにPoWは51%攻撃ができるし、答え方に困ります。というか質問に対する僕の答え方が悪いんですが。それもあって、書いときます。


Satoshiはたぶん、性善説をあんまり考えてないと思います。単純に**とあるシステムにおいて、信頼の対象が一人であるより、信頼の対象が複数いたほうが、システム全体としての信頼性は向上する**という考え方ではないかと思います。Bitcoinの場合、一人が持つ計算処理能力より、複数の人が持つ計算処理能力が大きいと考えて、計算処理能力を元にして信頼性を分散させたのではないかと思います。

まあでも、現実的には、マイニングプール等が信頼性の主権を握ってるんですがw [こっち](https://btc.com/stats/pool?pool_mode=year)でみれます。
![スクリーンショット 2020-09-10 20.28.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690284/ca98c8e7-a487-ca22-44d3-d8a5507e73f9.png)

最近の一年、unknown、つまりプールに属さないマイナーが、約3.6%しかいない。この図を見ると、本末転倒(というか、上位4つのプールが協力したら51%超える)じゃねーかwとか思ったりする。今、この状況でBitcoinを持ちたいとは思えないです。なんか、残念、というか悲しいです。資本主義社会なので仕方ないと割り切ってしまえばそれはそうなんですが、割り切りたくもないなあ。

## Aoi
既存のSSO技術は、アプリ側が信頼する対象は単一。Aoiは複数。それも、信頼の対象はアプリ側が決定できる。

## さいごに
信頼、難しいです。例えば、どれくらいの数のノードがいると、対象が単一の信頼より信頼性が高まるのか、とか、条件的な面が、よくわかりません。あたりまえですね。抽象的すぎるんですから。具体的な問題においてにのみ、わかるんだと思います。**信頼学**とでも名付けましょう。面白そうです。すでにある分野でカバーされているのかもしれませんがw

間違ったこと言ってたり、(俺 or わたくし)はこう考える！というのがあったらぜひお願いします。

### P.S 1
有名な方が書かれている記事で、ID暗号でも相手への信頼を下げるために*politically decentralized* な、こんな方法が存在するみたいです。
https://www.atmarkit.co.jp/ait/articles/1508/25/news003.html
界隈じゃわりとメジャーな考え方なのかも。

### P.S 2

今ボケーっと記事読み返してたら、なんかちょっとズレてるんじゃないかと思ってきたので。Bitcoinのシステムとして備わっている悪意抑止機能

1. 信頼の分散
2. インセンティブの合致

他にもあるかな？
1は上に書いてたやつだから省略。

2は
「大半のBitcoinのネットワークに計算処理能力を貸してる人は、Bitcoinが欲しいから。だからその人たちがシステムを壊すようなことをするのはないよね」

「たとえ一握りのサイコパスがいたとしても大半はインセンティブに沿って動くだろう」

そうでした、そうでした。Bitcoinは計算能力の分配と、 **ネットワークへ正しい行いをすることで得られる利益**があるのでした。

であれば、信頼の分散しかないシステムの場合、カオス？

ということで、信頼の分散という性質しか持ち合わせていないAoiはカオスなのかな。Aoiの場合...正しい結果を返さないことで信頼が下がるっていうペナルティは各自で作れるかもしれないけど。 Aoi、結局、正しく働くことで「ネットワークへ正しい行いをすることで得られる利益」に繋がり得るのか。まあでも、弱い気もする。


ちょっと待って。Bitcoin、ネットワークを攻撃することでトランザクション書き換えできてBitcoinを不正に入手できるじゃん。それって結局、インセンティブとしては抑止機能果たしてねーなw何やったんや、疲れてる状態で編集機能を押しちゃうとﾀﾞﾒ。まあちょっとした思考ログとしておいときます。

PoSは2を考慮してんのか。ただ、PoWでも、ハッキングされたらそれなりに通貨の信頼は落ちるわけで、となるとハッキングをしたい人は(Bitcoinがほしいのではなく、)結局Bitcoinを殺したい一部のサイコパスなわけだ。

無意識領域から意識領域に情報を持ってくるの、ﾀｲﾍﾝﾀﾞ。。。
javascript関数ドリル　初級編without関数の実相のアウトプット


##zipObject関数の課題内容
詳細はこちら
　　　↓
https://js-drills.com/blog/without/

##zipObject関数の取り組む前の状態
スプレッド演算子を使う発想がなかった。includeメソットを知らなかった

##zipObject関数に取り組んだ後の状態
理解できた

##zipObject関数の実装コード（答えを見る前）
分からなかった

##zipObject関数の実装コード（答えを見た後）

```js

function without(array, ...values) {
  const newArray = [];
  for(let i = 0; i < array.length; i++) {
    const candidateToPush = array[i];
    // values : [1, 2]
    // array: [2, 1, 2, 3]
    // candidateToPush: 2, 1, 2, 3
    if( !values.includes(candidateToPush) ) {
      newArray.push(candidateToPush);
    }
  }

  return newArray;
}

console.log( without([2, 1, 2, 3], 1, 2) );
// => [3]
```
Javascriptにrangeを入れる方法

Nuxtjsプロジェクトにpythonのrange()のようなやつを入れたかったので以下のとおりで

utils.jsに

```
export function range(start, end) {
  /* generate a range : [start, start+1, ..., end-1, end] */
  const len = end - start + 1;
  const a = new Array(len);
  for (let i = 0; i < len; i++) a[i] = start + i;
  return a;
}
```
使うときは　range(26, 52)
そのままcomponentに追加する時は
range(start, end) {
    /* generate a range : [start, start+1, ..., end-1, end] */
    const len = end - start + 1
    const a = new Array(len)
    for (let i = 0; i < len; i++) a[i] = start + i
    return a
  }
})
seleniumをとりあえずちゃちゃっと動かしてみたい[mac向け]


# はじめに
seleniumっていうwebブラウザのテストツール、
ざっくり言えばちょっとコードを書けばweb画面を自動操作できてしまうというものがあると知って
とりあえず試したかった。


先人の知恵を大いに借りたが、ところどころ躓きポイントがあったのでメモ。

写経に近いものになってしまうが、基本は
[たった3行のpythonで始めるSelenium入門](https://qiita.com/mastar_3104/items/0a1ce2bfa1d29287bc35)
に沿い、躓いたところを記録として残しておく。(2020.9.10時点)


## できること
seleniumを使ってブラウザ画面で
「たぬき　画像」という文字列の検索結果を自動で表示させる

# 環境
* Mac
* python3.8
* Chrome

## 事前準備
* homebrewをインストール
* pythonをインストール

 
※ 上記は[参考記事](https://qiita.com/mastar_3104/items/0a1ce2bfa1d29287bc35)に記載あり。

## 手順

* chromedriverのインストール

```
$ brew install chromedriver

# 上記でインストールできなかったので、エラー文のとおりこちらを試したらいけた
$ brew cask install chromedriver
```

* seleniumをインストール

```
$ pip install selenium
```

* test.pyを作成し、下記を記述する
 
```test.py
from selenium import webdriver

driver = webdriver.Chrome("chromedriverのパス") 

driver.get("https://google.co.jp")
```
chromedriverのパスは、`which chromedriver`で調べられる


* test.pyを実行する

```
$ python test.py
```
ここでポップアップでエラーが出たので、下記を参考にダウンロードしたアプリケーションの実行許可をした。

[seleniumを使用しようとしたら、「"chromedriver"は開発元を検証できないため開けません。」と言われた](https://qiita.com/apukasukabian/items/77832dd42e85ab7aa568)

これでchromeのwebブラウザが開けるはず。

ここまでうまくできたら、下記を記述する

```test.py
from selenium import webdriver 
from selenium.webdriver.common.keys import Keys # 追加

driver = webdriver.Chrome("/usr/local/bin/chromedriver")
driver.get("https://google.co.jp")

text = driver.find_element_by_name("q") # 検索ボックスのname属性を指定
text.send_keys("たぬき 画像")# 文字列"たぬき 画像"をテキストボックスに入力
text.send_keys(Keys.ENTER) # ENTERを押下する特殊キーを使う
```

## 躓きポイント
* 検索ボックスのid属性が見つけられなかった
   
　　→name属性を指定することにした

* click()を使うと、test.pyの実行時に後述のエラーが出た

　　→ (検索ボタンを探してクリックするのではなく、)ENTERを押下する設定にした[^1]

エラー内容

```
 :
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
```


## まとめ

なぜこのようなエラーが出るのかまでは調査できなかったが、
ひとまず、自動でwebブラウザが開き、勝手に検索ボックスに文字が入力され
検索結果が表示されるところまでたどり着くことができた。


[^1]: [seleniumクイックリファレンス](https://www.seleniumqref.com/api/python/element_set/Python_special_send_keys.html)より
コンポーネント間のデータのやりとりを簡単なTODOアプリでまとめる

Vuexに頼りすぎてコンポーネント間のデータの受け渡し方が曖昧だったので、簡単なサンプルアプリでまとめる

また、Vueで開発をしていてコンポーネントを細かく分けない事で以下の問題がよく起こったのでその反省

コンポーネントを分けない問題
・汎用性の悪さ
例えばフォームとボタンを一緒のコンポーネントに作ると、ボタンだけ使い回したい時にフォームまでついてきて汎用性が悪い。

・同じような記述をしたコンポーネントファイルが増えDRYに反する

・1ファイルのコード量が増えて可読性が悪い


## 作成したコンポーネント
・ボタン
・入力フォーム
・ボタンと入力フォームをまとめたコンポーネント

ただ単にクリックイベントとボタン名を使いまわせるボタン

```button.vue
<template>
  <button @click="onClick">{{name}}</button>
</template>
<script>
export default {
  props:{
    name:{
      type:String,
      default:"button"
    },
    onClick:{
      type:Function,
      required:true
    }
  },
}
</script>
```

入力フォーム。
propsの値はv-modelで直接変更するとエラーになる
computedでv-modelの変更を検知し
親コンポーネントへ入力された値(input)を送り、親側でpropsの値を更新する

```Input.vue
<template>
<input type="text" v-model="input">
</template>
<script>
export default {
  props:{
    inputValue:String
  },
  computed:{
    // v-modelのinputの変更を検知
   input:{
     get(){
       return this.$props.inputValue
     },
    //  親コンポーネントにinputを送り出して親側でpropsの値を書き換える
     set(value){
        this.$emit("setValue",value)
     }
   }
  }
}
</script>
```

ボタンと入力フォームが存在するコンポーネント
入力フォームの値をボタンクリックで配列に格納し親コンポーネントへ渡す

```Form.vue
<template>
  <div>
    <!-- $emitで渡ってきたイベントを実行 -->
    <!-- 子コンポーネントのpropsに$emitの引数で受け取った値をセット -->
    <Input
    @setValue="setValue"
    :inputValue = value />
    <!-- Buttonコンポーネントのイベント発火とボタン名を設定 -->
    <Button
    :onClick="postTodo"
    name="add"
     />
  </div>
</template>
<script>
import Button from "@/components/Button.vue"
import Input from "@/components/Input.vue"
export default {
  data(){
    return{
      value:null,
      todos:[]
    }
  },
  components:{
    Button,
    Input
  },
  methods:{
    postTodo(){
      this.todos.push(this.value)
      this.value=""
   //todoが追加された配列を親コンポーネントへ渡す
      this.$emit("setTodo",this.todos)
    },
    setValue(value){
      this.value=value
    }
  }
}
</script>
```

Form.vueから受け取った配列todosをv-forでレンダリング

```App.vue
<template>
  <div id="app">
    <h1>Todo</h1>
    <Form 
    @setTodo="setTodo"
    />
    <hr>
    <template v-for="(todo,index) in todos">
      <li :key="index">{{todo}}</li>
    </template>
  </div>
</template>
<script>
import Form from "@/components/Form.vue"
export default {
  name: 'App',
  components: {
    Form
  },
  data(){
    return{
      todos:null
    }
  },
  methods:{
    setTodo(todos){
      this.todos=todos.reverse()
    },
  }
}
</script>
```

## まとめ
・v-modelの値を渡したい時はcomputedで変更を検知して$emit経由で値を渡して親側からpropsを更新する
・$emitでどんどん親へ親へ渡していく。
・兄弟のデータを使う時は親のdataに保管したものを使う
アプリで取り扱っている画像(UIImage)を端末に保存する

UIImageViewに表示したりするのに使っている画像（UIImage）を端末のアルバムに保存したかったのでやり方を調べました。

まず、Info.plistの`<dict>`の中に`NSPhotoLibraryAddUsageDescription`があるか確認します。なかったら以下のように追加します。パーミッション要求時の文言は、アプリの内容に応じて指定します。

```
<key>NSPhotoLibraryAddUsageDescription</key>
<string>パーミッション要求時の文言</string>
```

そしたら、画像を保存しようとしているところで以下のような処理を実行します。

```swift
func save(image: UIImage) {
    // パーミッションを確認
    PHPhotoLibrary.requestAuthorization { status in
        guard status == .authorized else {
            // 権限がない
            return
        }

        // 保存処理
        PHPhotoLibrary.shared().performChanges(
            {
                // このブロック内でPHAssetCreationRequestを作成すると保存される
                PHAssetCreationRequest.creationRequestForAsset(from: image)
            }, completionHandler: { success, error in
                if let error = error {
                    // エラー処理
                    return
                } else if success {
                    // 保存完了
                } else {
                    // ここに来ることがあるのかどうか、ちょっと調べた限りわからない…
                }
            })
    }
}
```
Railsアプリを独自ドメインでssl公開した手順

##概要
今回そこそこ苦戦しながらポートフォリオのSSL対応したので忘れないうちに手順を書き留めておく。
殴り書き程度なのでこれを読んでSSL対応は難しいと思われます。

参考
https://qiita.com/iwaseasahi/items/1687426add4124899fe3#ec2%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99

https://qiita.com/Yuki_Nagaoka/items/55ed1610cfc1f59398b1#2%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%81%AE%E8%A8%AD%E5%AE%9A

##前提

+ EC２にRailsアプリをデプロイ済
+ Nginx等のWebサーバーでhttpで外部公開している
+ 独自ドメインを取得している。
+ VPCなどで適切なネットワークを構築済
+ httpですでにアプリケーションにアクセスできる
 

##本題
1.
ACMでSSL証明書のリクエストを行う。
ここでリクエストするドメイン名が公開するドメイン名と違うとSSL化しないので注意

<b>リクエストするドメインがRoute53でレコード作成済だとCレコードの登録を勝手にやってくれるボタンが出るので便利</b>

ex) 
実際のサイトのドメイン　www.hogehoge.com
証明書申請したドメイン　hogehoge.com

上の例だとドメインが違うためアウト
おすすめはサブドメインにワイルドカードを指定して　*.hogehoge.com
とすること
こうすることでwww.hogehoge.comやunko.hogehoge.comなど様々なサブドメインに対応できる。


2.
EC2のELB（ロードバランサー）を設定する。

+ リスナー：　https
+ ターゲット：　EC2のインスタンス（http）
+ VPCとサブネット：　設定しているやつを入れとく
+ 証明書：　1で申請した証明書を入れる。

3.
心配な場合はロードバランサーのDNSにアクセスしてアプリケーションが開けるかどうか確認

4.
Route53でロードバランサーへのエイリアスを貼る
www.hogehoge.comとかでロードバランサーにアクセスするようAレコード（エイリアス）を作成する

5.終わり


##補足
・ELBの作成や証明書の認証などこの辺りはやたらと処理に時間がかかる模様で、設定はできてるのにうまく動かないとやたら焦ることもあるが気長に待つとなんかうまくいったりするので待ちの姿勢も重要。

・今回のSSL対応はあくまで外部とロードバランサーとの間をSSL化しているため、アプリケーションとロードバランサー間はhttp通信である。よってEC2側のWebサーバーの設定はhttpのままで一切いじる必要なし。ここを勘違いすると沼る

・当たり前っちゃ当たり前だけどロードバランサーにアタッチするセキュリティグループではインバウンドルールで４４３ポート（https）を許可していないと弾かれてアクセスできない。
ここらへんのセキュリティグループの設定もうまくいかなかったら見直す。

・うまくいかなかったらぐぐる。

##最後に
本当に殴り書きなので間違ってたりおかしかったりするところがあれば連絡ください😭
また、同じような境遇の方がいてもし詳しく聞きたいことがあればできる限りお答えします
こちらのTwitterアカウントのDMやリプで連絡ください
https://twitter.com/TakeWeb1
【GAS】毎日自動で日報の下書きを作る２つの方法

##概要
スプレッドシートを用いて日報の下書きを作るスクリプトを作成。
トリガー設定すれば毎日始業前に日報ひな形が出来てる、幸せ。

訳あって２パターン作成。
①htmlファイルから本文を持ってくる
②スプレッドシートから本文を持ってくる

##本文の前に 宛先と件名
たまに変更する宛先は、都度エディタを開くのが面倒なのでスプレッドシートに入力。
件名には日付を入れたいので、数式で記述。
`=TEXT(TODAY(),"yyyy年mm月dd日の日報")`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/83fca2e6-1fbf-4633-232b-4b0616e3c2d7.png)

##①htmlファイルから
「コード.gs」はこんな感じ。

```javascript
function report() { 
  
  //スプレッドシートをgetValues
  const ss = SpreadsheetApp.getActiveSheet(); 
  const values = ss.getDataRange().getValues(); 

  //B1～B3セルをそれぞれ格納
  const to = values[0][1]; 
  const bcc = values[1][1]; 
  const subject = values[2][1]; 

  //本文.htmlをgetContent
  var body = HtmlService.createHtmlOutputFromFile("本文").getContent(); 
  
  //gmailを操作して下書き作成
  GmailApp.createDraft(to, subject, body ,{bcc: bcc});

}
```
シンプル (o・∇・)o

「本文.html」は、タグなど使わずベタ打ち（笑）

> 1 お疲れ様です
 2 本日の日報を送信します。
 3
 4 【本日のタスク】 
 5 山で芝刈り
 6 川で洗濯
 7
 8 【本日の成果】
 9 大きな桃１個
10
11 【明日の予定】
12 きび団子レシピ改善
13
14 以上、宜しくお願い致します。
15
16 -----------------------
17 あるところ社
18 mukashimukashi.jp
19 -----------------------

※GASで下書きを作ると署名が入らないので、本文と一緒に記述。
###結果！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/cbad1ba0-8e81-4e87-4d5e-c61ecbbd7939.png)
ちゃんと改行も入ってる！
正直タグとか良く分からないから助かる^^;
##②スプレッドシートから
①で十分だったけど、どう言うわけか最近本文を変更する事が多い。
いちいちエディタを開くのが面倒なので、スプレッドシートに本文を記述するよう変更。

前述の通りB1～B3セルまで宛先件名が入っているので、本文はB4から。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/95685738-6712-6bd0-e25b-ad45e5e60eff.png)
今度のコードがコチラ。

```javascript
function report() { 
  
  //スプレッドシートをgetValues
  const ss = SpreadsheetApp.getActiveSheet(); 
  const values = ss.getDataRange().getValues(); 

  //B1～B3セルをそれぞれ格納
  const to = values[0][1]; 
  const bcc = values[1][1]; 
  const subject = values[2][1]; 

  //最終行をget,空のbody（本文）を定義
  var lastrow = ss.getLastRow(); 
  let body = ''; 
   
  //最終行まで繰り返し
  for(let i=3; i<lastrow; i++){ 
    
    //セルに何か入ってたら本文に追記＆改行
    if(values[i][1]){ 
      body += values[i][1] + '\n'; 
    
    //セルが空欄なら改行だけ
    }else{ 
      body += '\n'; 
    } 
  } 
  //繰り返し終了
  
  //gmailを操作して下書き作成
  GmailApp.createDraft(to, subject, body ,{bcc: bcc}); 
  
}
```

結果は①と同じ。

もしかして、セルの中で改行すれば１つのセルに本文全部入ったのでは？
無駄なfor文だったな。

トリガーについては割愛。
###おしまい
Railsでmechanizeを使ってスクレイピング

PythonでWebスクレイピングをやったことありましたが、
Railsもできるんだよねと思い立って、アプリ作る際に導入してみたい！と思いやってみたの記録になります。

今回は、その日の平均株価とかをスクレイピングします。

参考にさせていただいた記事
https://qiita.com/soehina/items/948f7f158a3a2d5be1dc

##下準備
Railsアプリの作成
gem 'mechanize'のインストール

##View

```Ruby:index.html.erb
  <%= @values.join %>
```


##Controller

```Ruby:_controller.rb
  require 'mechanize'

  def index
    @scrps = Scrp.all
    agent = Mechanize.new
    @values = []
    page = agent.get("https://www.nikkei.com/markets/worldidx/chart/nk225/")
    @elements=  page.search('li.m-trend_economic_table_list')
    @elements.each do |element|
      @values << element.inner_text
    end
  end
```

getメソッドとsearchメソッドで、情報を取得し
inner_textで文字を引っこ抜いてくれます。
それをvaluesに入れてあげて、配列にしています。

とても簡単に、スクレイピングができました。
お疲れ様です。おわり！
Javaの変数宣言の文について

# Java 変数宣言
本日からJavaの学習を始めましたので、アウトプットがてら読んでくれた方の参考になれば嬉しいです。

## 先ず変数、及び変数宣言の文とは？
変数とはデータを格納するためにコンピューター内部に準備する箱のような物。
つまり変数宣言とは、コンピューターに対して「新たな変数を用意せよ」と指示する文のこと。

## 変数宣言の文
```
型 変数名 ;
```
型とは変数に入れることができるデータの種類のこと。

## よく使われる型の種類（他にもあるよ）

|分類|型名|格納するデータ|
|:---:|:---:|:---:|:---:|
|整数|int|普通の整数|
|少数|double|普通の小数|
|真偽値|boolean|true か false|
|文字|char|1つの文字|
|文字列|String|文字の並び|

## 使用例
今回は私の愛車を紹介がてら、例にしたいと思います。
[twitter](https://twitter.com/akiiiiio_19/status/897790093368320001/photo/2)

|分類|型名|格納するデータ|愛車（look）で例えると|
|:---:|:---:|:---:|:---:|:---:|
|整数|int|普通の整数|amount:金額|
|少数|double|普通の少数|weight:重量|
|真偽値|boolean|true か false|sell:売るか売らないか|
|文字|char|1つの文字|value:宝|
|文字列|String|文字の並び|comment:愛してる|

実際に書いてみました。
真偽値についてはこれから学習するので省略。

```java:look.java

public class Main {
  public static void main(String[] args) {
    int amount = 700000; //金額の箱に値を代入
    System.out.println(amount); //呼び出す記述
    double weight = 7.9; //重量の箱に値を代入
    System.out.println(weight); //呼び出す記述
    char value = '宝'; //価値の箱に値を代入
    System.out.println(value); //呼び出す記述
    String comment = "愛してる"; //コメントの箱に値を代入
    System.out.println(comment); //呼び出す記述
  }
}
```

## 実行結果

```
700000
7.9
宝
愛してる

```

## 感想
実は記事の投稿は初めてでした。
記事作成の所要時間は2時間です。（めっちゃかかった）
目標として1週間に1回は記事の投稿をしていきます。
最後まで読んでくれた方、ありがとうございます！
Herokuへデプロイ後エラーが出た時の対処法

#問題点
localhostでは動いているのにデプロイ後エラー出現
#解決方法
閲覧履歴データの削除・キャッシュを削除する

#手順・（choromeの場合）　
chrome://settings/　　[chromeの設定画面に移り]
プライバシーとセキュリティ>プライバシーとセキュリティ>閲覧履歴データの削除>データー削除

これでうまくいくかも！私はうまくいきました。。。

#キャッシュとは？

訪問した “ ウェブページの情報 ” を一時的に保存する仕組み。
今回エラーが出現したのは問題あるデーターが保存されたままで
新しいデーターが更新されていなかった。そのためエラーが出現した。
txtファイル読み込みの工夫メモ

自分がtextファイルを読み込む時にいろいろと工夫した時のメモ。

案外、ファイルから読み込むところが1番大変だったりする。

まずは、読み込んだ時に改行で','を入れてリスト化する方法。

```python:read.py

import sys

text_list = [ ]
with open("blog.txt","r",encoding='utf-8') as f:
    a = f.read().replace('\n' , ' , ')
    text_list.append(a)

print(text_list)

```

次、読み込むと改行ごとに配列にして多重配列を作っていく方法。

```python:read_2.py

import sys 

text_list = []
for line in open("blog.txt","r",encoding='utf-8'):
    line = line.strip()
    line = line.split('\n')
    text_list.append(line)
print(text_list)

```
stripe 入金日程　custom

質問しました！
いつも迅速な対応ありがとうございます！
my q
＜ユーザーがお金を払ったsessionについてstripeアカウントに到着するまでのそれぞれの期間をどのように取得できますか？＞

サポート A

決済の作成時から、子アカウントへの送金時までの期間を取得できるAPIはございませんが、ご担当者さまはご自身で計算していただける方法について説明いたします

ご利用のStripeアカウントを調査いたしましたところ、Custom子アカウントとDestination Chargesをご利用いただいているようでございます。その場合は、決済成立と同時に、プラットフォームの手数料を差し引かれた決済金額が子アカウントへ送金されます。

通常ですと、クレジットカード（Visa、Mastercard、American Express）のお支払いは、決済日から入金可能になるまでに、4営業日がかかります。なお、JCB、Discover、Diners Clubカードのお支払いは、決済日から入金可能になるまでに、30日がかかりますことを予めご留意ください。

また、貴社Stripeアカウント（プラットフォーム）上では、’delay_days’ パラメータを指定していただくことで、子アカウントの残高が入金可能になるまでの期間を延長させることができます:
https://stripe.com/docs/connect/payouts#payout-schedule（英文）

以上の挙動により、子アカウントへの送金タイミングが異なります。子アカウントの残高が入金可能となった場合は、ご担当者さまが設定された入金スケジュールにより、直近の入金日に子アカウントのご登録の銀行口座に入金されるかと存じます。ただし、最初の入金は7〜10日遅れる場合がございますので、ご了承ください。

Stripeアカウント上で入金が作成された場合は、予定されている入金日をStripeダッシュボードの「Connectアカウント」タブ、またはStripe APIにてご確認いただけます:
https://stripe.com/docs/api/payouts/retrieve（英文）     

併せまして、Stripe Connectの日本語の資料をお送りいたしますので、入金については26〜30ページをご参照いただけますと幸いです。


Attachments:
1. Stripe_Connect.pdf (https://stripe.zendesk.com/attachments/token/o54fS78L5gLi0Z2tkJNjGFKJZ/?name=Stripe+Connect.pdf)


my q
＜stripeにお金が到着し、銀行に届くまでの期間は$stripe->payouts->retrieve["arrival_date"]から取得できると思います。＞

サポート a

大変恐れ入りますが、Stripe APIの ’arrival_date’ パラメータは、Stripeアカウント上で作成済の入金（Stripeにご登録いただいている銀行への振込）の支払いされた日、または予定されている支払い日を取得できるパラメーターとなっております：https://stripe.com/docs/api/payouts/list#list_payouts-arrival_date（英文）
株価指数の下落率に応じてLINE通知する。(S&P500)

積立投資をしているのですが、暴落時には積み立て金額を増やすのがより効率が良いです。
とある動画で、S&P500が先週対比にて-5%以上の時は買い増すチャンスということを知り、
S&P500の下落率を、LINE通知できる様に実装しました。

前提：
・実行環境:GAS
・LINE notify にてTOCKEN取得済み。
LINE通知等で検索すると、LINETOCKENの取得方法等確認が出来ます。
・S&P500の値は下記APIを利用
https://financialmodelingprep.com/developer/docs/
*1

上記に関してはLINE　notify で検索してみてください

仕様：
昨日と先週のS&P500の終値を通知

## 実際のコード


```js

const lineToken = "*******";
const apiKey = "*******";

function main() {
  const apiUrl = `https://financialmodelingprep.com/api/v3/historical-price-full/%5EGSPC?apikey=${apiKey}`;

  const apiOptions = {
     method : 'get'
  };

  // arrray or string or object なのかを確認する。
  const responseApi = UrlFetchApp.fetch(apiUrl, apiOptions);
  const responseJson = JSON.parse(responseApi.getContentText());
  
  const yesterday = responseJson.historical[0].date
  const yesterdayClosePrice = responseJson.historical[0].close
 
 //日付を元に取得する方が良い。
　const lastWeekDay = responseJson.historical[5].date
　const lastWeekDayPrice = responseJson.historical[5].close

  //変数名がvolatiltyがよい。
  const volatilty = ((yesterdayClosePrice/lastWeekDayPrice)-1)*100;
  //ratio
  const displayRation = Math.round(volatilty * 10) / 10

  console.log(typeof lastWeekDay);
  const message = `\n S＆P500 の対先週終値が【${displayRation}%】です！
  \n先週終値: ${lastWeekDayPrice} (${lastWeekDay.replace(/"/g, '')})\n先日終値: ${yesterdayClosePrice}(${yesterday.replace(/"/g, '')})`;
  console.log(message);
  sendToLine(message);
}

function sendToLine(message) {
  const options = {
    "method": "post",
    "payload": {"message": message},
    "headers": {
      "Authorization": "Bearer " + lineToken
    },
    "muteHttpExceptions" : true,
  };
  UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}
```

*1
公式サイトにある様に無料で叩ける回数が250回まで。
https://financialmodelingprep.com/developer/docs/pricing/
ただ、基本課金ベースのためか、ドキュメントは見易かったです。


## 困った点
一番困った点が無料でS＆P500の終値提供APIが全く見つからなかったことです。
有名どころだと
・[Quandl](https://www.quandl.com/)
・[alphavantage](https://www.alphavantage.co/)

あたりですが、提供しているのが、月毎だったり、そもそも提供していなかったり。。。。

逆に個別株の株価を提供しているAPIは簡単に見つかるので株価指数の需要があまり無いんですかね。。。

週に一度の計算のため1.2年は無料回数範囲に収まるはずですが、
早めに良いAPIは見つけておきたいです。

何か良いAPIがあれば紹介くださると嬉しいです！

あとは、GASだとライブラリとかをそのまま使えないので、書き方がどうしても古いものになってしまうので、
そのせいで実装に無駄に時間をかかりました。
可読性も下がるので、あまり機能を増やしたりデバックするにはあまりおすすめできないです。
`アロー関数`　や `${}`を使えないのは結構辛かった。。。 
*追記
使えるようになっています。

ただ、スケジューラの設定等が楽なのと、本番環境、サーバーの用意等が無料で手軽にできるのはとても楽です。

## pandas

ちなみに、pandasというpythonのモジュールを利用しても、
簡単に株価指数を取得できたのでおすすめです。
https://pandas.pydata.org/


今回はGASを利用したかったので、言語関係なく使えるAPIでデータ取得できるものを探していましたが、
Pythonのライブラリ×herokuでも断然ありだと思います。


もう少し、この書き方をした方がいいよ、とか、間違っている点等あれば気軽にコメントください。
この記事が少しでも参考になった、面白かったという方はLGTMくれると嬉しいです〜！
Git　コンフリクト

##コンフリクトが起きた！
**前提**
・featureブランチで作業
・プルリクを出した
・リモートブランチにてdevelopにマージする
**事象**
・コンフリクトが起きた！
**対応**

 ```
$ git checkout master
$ git pull origin master
$ git checkout develop
$ git pull origin develop
$ git checkout feature
$ git merge develop
コンフリクト解消する
$ git push origin feature
```
[備忘録]オブジェクト指向、オブジェクト、クラス、インスタンスとは？　

この記事では、オブジェクト、クラス、インスタンスの概念をざっくり理解することを目指します。

#オブジェクト指向とは？
ざっくり言うとプログラミングをする上での考え方のことで、
プログラムを手順ではなく、「モノ」の生成と操作として見る考え方になります。
難しく言うと変数と関数をひとまとめにしたクラスを作るプログラミングの手法です。
ちなみにオブジェクトとは「モノ」を意味します。

また以下のプログラミング言語はすべてオブジェクト指向言語です。
・さまざまなプラットフォームで動作するJava
・Webページに動きを与えるRubyやPHPやJavaScript
・Mac OSやiOSのアプリ開発で使われるSwift
・商用のプログラミング言語として定評のあるC++
・WordやExcelのマクロとして使用されているVBA


__オブジェクト指向型のメリット__
仕様変更に強く、実際の開発現場で円滑に作業を進める事ができる点がメリットになります。
ざっくり以下4点になります。

①プログラムのメンテナンスがしやすくなる
プログラムの一つ一つを小さなまとまりで考える事が出来る為、複雑なプログラムが減ります。
改修による影響度が減り、メンテナンスがしやすくなります。

②分業化ができる
システムの規模が大きくなる程、プログラムの実装は膨大になります。大人数で開発作業を並列で行う事が出来ます。処理内容を細かく分類したり他の機能と似通った機能を共通化したり誰かが作った機能を使って、影響を与えずにカスタマイズしたりという事が実現出来る為、開発の生産性が高まります。

③カスタマイズがしやすい
オブジェクト指向型プログラムの特徴である、「継承」や「ポリモフィズム」という考え方を使う事で、既存機能の処理を引き継ぐ事が出来ます。

④プログラムの品質が向上する
プログラムのいたるところが部品化されている為、不具合が発生した場合の問題箇所特定が速くなります。
また、まとまりのあるプログラム仕様の為、コードの可読性が向上します。

__オブジェクト指向型は
「それぞれの持つ共通の情報をまとめたものから個別の情報を持ったものを作る」
ため、変更に強いコードが書けることがメリットになります。__






#オブジェクトとは
オブジェクトはオブジェクト指向の根本であり、プログラミングにおいてはデータと処理の集まりを意味しています。
文字を表現するための文字列オブジェクト、数を表現するための数値オブジェクト、そして「オブジェクトを保管するオブジェクト」である配列オブジェクトやハッシュオブジェクトなどがあります。

前述していましたが、オブジェクトは「モノ」という意味で、
オブジェクト指向で現実のものを例えると、人間もオブジェクトであり、身の回りにあるスマホや車もオブジェクトだと言えます。
車には「メーカー」や「色」といったデータ（個体の情報）があり、「走る」「止まる」といった処理を持っています。
そういうデータや処理が記載された設計図から作った実物がオブジェクトです。

#クラスとは
クラスとはざっくり言うと「ひな形」となるものです。
よく車で例えられますが、クラスは車の設計図で、設計図から作られた実物がオブジェクトです。
深掘りすると、いろんな種類の車が世の中にはありますが、すべての車で共通する部分があります。
「車体、ハンドル、タイヤ」などの個体の情報を持っていることや、
「アクセルで加速する、ブレーキで減速する」など処理があることです。
クラスではこれらの共通している変数や関数をプロパティやメソッドと呼ばれるデータで定義することができます。
関数がクラスの中に含まれている時、メソッドと呼ばれ、変数がクラスの中に含まれている時は属性と呼ばれます

__プロパティ（property）__
オブジェクトが持っているデータのことをプロパティ（属性）と言います。
車の例えだと、車というオブジェクトは「メーカー」、「排気量」、「色」といったプロパティを持っていると言えます。
データにはさまざまな種類があり、たとえば「速度」などといったオブジェクトの状態を示すものもあります。

__メソッド（method）__
メソッド(操作)とは、オブジェクトが持っている処理のことで、車の例だと「走る」、「曲がる」「止まる」など、
オブジェクトが何らかのアクションを起こす処理のことです。

__クラスのメリット__
共通の情報はクラスにまとめ、個別の情報はオブジェクトごとに分けられることで、
開発・管理・保守がし易くなるというメリットがあります。

#インスタンスとは
インスタンスとはクラスを元にして作られるデータのことです。
ちなみにインスタンス(Instance)とは、実体という意味です。
プログラミングで考えてみると、
クラスからデータや処理を引き継いで複製されたオブジェクトがインスタンスです。
またクラス(設計図)からオブジェクトを作ることをインスタンス化といいます。

#まとめ
ざっくりいうとオブジェクトはモノ、クラスはオブジェクトの設計図、インスタンスはオブジェクトの実体というイメージで
す。

参考URL
https://algorithm.joho.info/programming/class-instance/
https://eng-entrance.com/what-oop
https://www.sejuku.net/blog/5973
https://www.vacslab.co.jp/object-orientation/
GitとGitHubの初歩的な使い方を記していく

GitとGitHubに関して簡単にまとめていきます。
随時加筆予定。

# 用語説明
#### Git
バージョン管理システム。
(コンピュータ上で作成および編集されるファイルの変更履歴を管理するためのシステム)
#### GitHub
GitをベースにしたWebサービス。
コードレビューしたり、議論をしたり、並行的に異なる開発をしてマージする一連の流れを簡単に行うことができる。
(マージ・・・結合、統合、合体)
#### リポジトリ
ソースコードを格納する入れ物。
チームでソースコードを管理する為には、GitHubリポジトリを作成する。

# GitHubリポジトリの作成
※まずはGitHubアカウントを作成してください。

①GitHubページのヘッダーより「New repository」を選択。
②リポジトリ名 (+リポジトリ説明文)を入力。
③Createボタンを押す。

# Git, GitHubで管理したいディレクトリの設定 (Macの場合)
※ローカル環境にGitをインストールし、初期設定を行ってください。

①ターミナル上で、管理したいディレクトリに移動。
②**「git init」**コマンドを実行。
「Initialized empty Git repository in /Users/ユーザー名/ディレクトリ名/.git/」みたいな文言が表示される (ローカルリポジトリが作成される)。
③**「git remote add origin [URL]」**コマンドを実行。
ローカルリポジトリとGitHubリポジトリ (リモートリポジトリ)が連携される。
[URL]の部分はGitHubリポジトリのページにある「`https://github.com/ユーザー名/リポジトリ名.git`」というURLを指定。

# GitHubリポジトリにソースコードをプッシュする
#### プッシュ
コミットをローカルリポジトリからリモートリポジトリに送る操作。
コミットとは、ファイルの追加や変更の履歴をリポジトリに保存すること。
***

①**「git status」**コマンドを実行。変更したファイルの一覧を確認。
②**「git add ファイル名」**コマンドを実行。
指定したファイルの変更内容をインデックス (ステージングエリアとも呼ばれる)に追加し、コミットの対象にする。
(**「git add -A」**コマンドでディレクトリ内全てのファイルを対象にできる。)
③**「git commit -m "コミットメッセージ"」**を実行。
指定したファイルの変更内容がコミットされる。
コミットメッセージはチーム内で決まりがあったりする。
**「git log」**コマンドでコミットされたか確認ができる。
**「git commit --amend」**コマンドで直前のコミットのコミットメッセージを修正できる。
④**「git push origin master」**コマンドを実行。

## ブランチの作成方法とプルリクエスト
#### ブランチ
リポジトリ内でコードのバリエーションを複数保持しながら開発する際に、1つのバリエーションを管理する単位となっている概念。
新しい開発を行う場合、「master」と呼ばれるメインのブランチから枝分かれした新しいブランチ (ブランチAとする)を作成し、
ブランチA上で機能追加等を行った際は、最終的にブランチAをmasterブランチに取り込むことになる。

#### プルリクエスト
あるブランチに、別のブランチをマージしてもらうことの要求 (提案)。
***

①**「git checkout -b ブランチ名」**コマンドを実行し、ブランチ作成とそこに移動。
②変更内容がコミットできたら、**「git push origin HEAD」**コマンドを実行。
現在のブランチと同じブランチがGitHub上に作成され、そこにプッシュされる。
③GitHubのリポジトリページに表示されたプルリクエストを作成するリンクを使い、プルリクエスト作成。
プルリクエストからコードの変更内容を確認できたり、変更箇所やプルリクエスト全体にコメントできたりする。
レビューを受け、コードを修正したくなった場合はブランチに修正コミットを積んで新たにプッシュする。
④最終的にその変更を取り込もうという段階になったら、GitHubの画面からブランチのマージを行う。
⑤ローカルリポジトリのmasterブランチに移動し、**「git merge ブランチ名」**コマンドを実行。
指定した作業ブランチの内容で現在のブランチ (masterブランチ)を上書きして最新の状態に更新しておく。

## 参考文献
[現場で使えるRuby on Rails5 速習実践ガイド](https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B-Ruby-Rails-5%E9%80%9F%E7%BF%92%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%E5%A4%A7%E5%A0%B4%E5%AF%A7%E5%AD%90/dp/4839962227)
DB設計図を作りやすいアプリ

【Qiitaテンプレ】

【概要】
----------------------------------------
<b>1.結論</b>

<b>2.どんなことができるのか</b>




1.結論
----------------------------------------
<b>digarams.net</b>がおすすめ！
<br>

2.どんなことができるのか
----------------------------------------

自分が書いた例はこのような形です！

![スクリーンショット 2020-09-10 18.47.17.png]
(https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686400/3a96a8cb-2dff-bbc7-011a-abe409198736.png)

上記のように書くことができます！
特徴を上げると4点あります。
❶テーブル名、PKを含めたテンプレがあり即テーブルをつくれます（デフォルトは3つのカラム名がついてきます。）
❷PKにidを記入できる欄があります。
❸アソシエーションを引くことができ、多種に引くことができます。
（0以上1以下、1以上1以下、1以上で多対多等々）
❹❶のテンプレを合体させてPK2項目で6カラムにすることもできます
❺PKと書いてある下の枠にも記載することができ自由に記載もできます（ex: FK|user_id etc...)

またchromeと連携できたり、上記の設計図を複製したり
pngやpdfで保存することも可能なのでかなりおすすめです！

<br>
【Kubernetes】GKEのContainer Native LoadbalancingのPodのTerminationの注意点

## 概要
最近のGKEはContainer Nativeなロードバランシングを推奨しています。
これは、Alias IP, NEGという仕組みを使って、GCPのロードバランサーがPodのIPに直接ルーティングすることができます。
しかし、適切にPodを設定していない場合、クラスタのメンテナンスなどでノードからPodがevictされたときにダウンタイムが発生してしまいます。
この記事ではContainer Native LoadBalancerの仕組みと、Podの適切な設定について説明していきます。

## Container Nativeなロードバランシングの仕組み
[Container Native LoadBalancing](https://cloud.google.com/kubernetes-engine/docs/how-to/standalone-neg#attaching-ext-https-lb)に記載してある通り、

![イメージ](https://cloud.google.com/kubernetes-engine/images/sneg1.svg)
引用: [Container Native LoadBalancing](https://cloud.google.com/kubernetes-engine/docs/how-to/standalone-neg#attaching-ext-https-lb)

GKEのMasterノードにNEG ControllerというCustom Controllerがいて、特定のAnnotationがついたServiceが登録されたときに、GCPにNEGリソースを作成し、Serviceに紐づくPodをNEGにAttachするという仕組みのようです。
また、zonal network endpoint groupという名前の通り、各ゾーンごとにNEGはつくられ、Podは自分が存在するゾーンのNEGに所属する形になります。

## Podの退避時に纏る注意点
GKEではクラスタを自動アップグレードしてくれるので、ノードがローリングアップデートされます。するとそのタイミングでスケジュールされていたPodは一旦吐き出されて別のノードに再作成されるため、ライフサイクルに注意しないとダウンタイムが発生してしまいます。

## Podが退避されるときのライフサイクル
Podが退避され、一旦NEGから外れてルーティングされなくなる時、下記のようなフローになります。

1. PodがTerminating状態へ
2. 下記が同時に走る
   1. ServiceのEndpointから退避されたPodが外れる
   2. PodのpreStop + SIGTERM処理が走る
3. ServiceからPodが外れたことを検知してNEG ControllerがNEGからPodを外す
4. GCLBが退避されたPodにルーティングされなくなる

つまり、ここで意識しないといけないポイントは2点です。

1. NEGから外れる前にPodが停止しないようにする
2. NEGから外れても処理中のリクエストだけは処理完了させる

## 具体的な対応

1に関しては、PodにpreStopを適切に実装しましょう。
基本的なServiceによるルーティングのときと一緒ですね。
```
lifecycle:
  preStop:
    exec:
      command: ["/bin/sh", "-c", "sleep 20"]
```

2に関しては、GCLBのBackendの設定にコネクションドレインを設定しておきましょう。
また、1は2のドレインタイムより長く設定しておかないとドレインが最悪終わる前にPodが死んでしまうことになるので気をつけましょう。

[コネクション ドレインの有効化](https://cloud.google.com/load-balancing/docs/enabling-connection-draining?hl=ja)

Ingressを使用している場合は、CRDで設定することもできます。
[BackendConfig パラメータによる Ingress 機能の構成](https://cloud.google.com/kubernetes-engine/docs/how-to/ingress-features?hl=ja#draining_timeout)

## 確認方法
locustやApache Benchなどを使って一定負荷をかけつつ、drainコマンドを使ってノードからPodを退避させてもダウンタイム無しで安全に移動ができてることがわかるかと思います。

サンプル

```
kubectl drain gke-service-1-service-1-nodes-320d8165-7p7p --ignore-daemonsets --delete-local-data
```

## まとめ
Container Load Balancingはとても強力な仕組みですが、
基本的なServiceのルーティング、LBの設定の考え方を踏襲し、忠実に設定してあげる必要があります。
1. 【Android/Kotlin】Android Studioインストール

#はじめに
DreamHanksのMOONです。

今回はKotlin言語を使用してAndroidプログラミングの手順について説明していきます。

本来AndroidはJava言語を使って開発されていましたが、
最近はKotlinを使って開発することが多くなってきているので、今回はKotlinを使用していきます。

#開発ツールをインストール
　Androidを開発するためのAndroid Studioをインストールしていきます。
　　　　　　　https://developer.android.com/studio?hl=jp
　上記の公式サイトのリンクから、アンドロイドスタジオのインストールができます。

#Android Studioプロジェクト作成
  インストール後、最初にアンドロイドスタジオを実行すると以下の画面が表示されます。
  一番上の「Start a new Android Studio project」を押してプロジェクトを作成します。
  ![1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/d5e25253-bd99-e8cf-6849-7ed7442aabfe.jpeg)
  プロジェクトテンプレートの中からempty Activityを選択します。

![2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/120c113f-e464-886f-6602-67e4751a1a6b.jpeg)
![3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/8df7d6f3-74da-56c9-96e7-32c483c5ad8f.jpeg)
  「Name」には希望のプロジェクト名を作成。
  「Package name」には自動的にプロジェクト名の前のルートパスが生成されますが、
変更したいときには修正します。
  「Save location」も自動的に生成されます。
  「Language」には今回はKotlinを使用しますのでKotlinを選択します。
  「Minimum SDK」は最小のバージョンを選択します。15バージョンを選択した場合、
　上記画面下のMinimum SDKにあるメッセージのように
ほとんどのデバイスで動作可能です。
　上記の作業が終了しfinishボタンをクリックすれば、完了です。

#プロジェクトの基本要素確認

Activityファイル
![5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/9d03e6d0-67a9-66c9-69ca-b5f87f5dedbb.jpeg)

```kotlin:MainActivity.kt
package com.example.practiceapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}
```
  Android Activityは、画面に表示されるUIを構成するための一番基本となる要素です。 
  Androidアプリは画面にUIを表示するため、最小1つのActivityを持つ必要があり、
  アプリ実行時に指定されたActivityを実行してユーザーにUIを表示させます。


レイアウトのファイル
![4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/ba1be53c-319e-dae3-fba8-34d6e9bef65c.jpeg)

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
</androidx.constraintlayout.widget.ConstraintLayout>
```
  「res → layout」のパースに画面に表示されるxmlファイルがあります。
  layoutのxmlファイルもアプリに画面を表示されるための一番基本となる要素です。

#終わりに
　今回は、アンドロイドスタジオのインストールとプロジェクトの作成の手順について説明しました。

　次回は画面にボタンとテキストを追加し、イベントを設定していきます。
　[2. 【Android/Kotlin】ボタン追加](https://qiita.com/DreamHanks/items/8951b02c72b511699528)

　最新内容については下記のリンク（DreamHanksのブログ）で確認することができます。
　[DreamHanksブログ（Android/Kotlinアプリ開発）](http://blog.dreamhanks.com/android-kotlin%e3%82%a2%e3%83%97%e3%83%aa%e9%96%8b%e7%99%ba/)
【Java開発】JAVA開発のための環境構築 - 1

#はじめに

皆さん。こんにちは！

DreamHanksの254cmです。

今日はJavaプログラミングに必要な環境構築について説明させていただきます。

Java記事のまとめは[こちら](https://qiita.com/DreamHanks/items/6b1996e1f8ed66bbd456)です。


#Javaのインストール

Java言語でプログラムを作成するためにはJDKをインストールする必要があります。

JDKは、Java Development Kitの略になります。このJDKにはJavaプログラミングに必要なものが含まれています。

では、JDKのインストール方法を見ていきます。

###JDKインストーラーのダウンロード

JDKのインストーラーは[こちら](https://www.oracle.com/java/technologies/javase-jdk14-downloads.html)のリンクでダウンロードできます。

このリンクに移動すると

![添付1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/8697c133-b5d7-d115-c97e-211f919e1ae2.png)

上記の画面が表示されます。　

この画面はJDKをバージョンごとにダウンロードすることができる画面です。

今回のJava記事ではJava SE 14を使う予定なのでJava SE 14をダウンロードします。

※SEはStandard Editionの略です。



スクロールすると

![添付2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/14c98c0e-fc32-3aaf-01ee-3ee767f66e21.png)

こういう内容が出てきます。上記の画面が出てくるので、画面にある赤枠「**jdk‐14.02_windows-x64_bin.exe**」を左クリックします。

![添付3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/e23fae9a-2ff6-7d73-2339-60070065fcc3.png)

クリックするとライセンスに対するダイアログが出てくるので、チェックボックスにチェックして

上記の画像にある赤枠をクリックすると、自動でダウンロードに進みます。

ダウンロードされたファイルを右クリックして「管理者として実行」を左クリックします。

![添付4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/be868f30-e6e3-d473-853b-816793184021.png)

上記画面のセットアップウィザードが出てくるので、この画面は次へ(Next)を押して進みます。


![添付5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/d1cc5a0f-51d4-34ab-9a5d-76dfa414faa3.png)

次の画面はJavaをインストールするパースを設定する項目です。

デフォルトのパースが設定されますが、

別途のパースにインストールしたい方は画面の③をクリックしてパースを設定することができます。

①はデフォルトで設定されたインストールパースです。

このパースは次回の記事で扱うので覚えておくと良いでしょう。

設定が終わったら②のボタンを押して次に行きます。

![添付6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/2b81678d-df85-6288-f179-89ff51fc600e.png)

上記画面でインストールの進捗を確認することができます。

![添付7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/65924b72-2547-8f12-d842-f0c1ca23444f.png)


上記画面が表示されるとJDKのインストールは完了です。


#終わりに

今回の記事は以上になります。

次回は[Java開発に必要な環境変数設定](https://qiita.com/DreamHanks/items/02e71a4fe0f2418151d8)について学びましょう。

私たちの最新の記事は[こちら](http://blog.dreamhanks.com/java%e5%85%a5%e9%96%80%e8%ac%9b%e5%ba%a7/)で確認することができます。

ご覧いただきましてありがとうございます。