OmniAICreator/Qiita-1.07M huggingface dataset:
【adalo】Favoriteボタンを５分で実装する

# 最初に

SNSでは必須ともいうべき「Favoriteボタン」をadaloで実装してみます。
簡単と言われるNoCodeサービスでどれくらい簡単に実装できるのか調べる目的で試して見たのですが、なんと実装時間「５分」で出来てしまいました・・・。

以下、その手順を記載します。

# 環境

MacOS Catalina 10.15.6

# 使用するToggleコンポーネントについて

Favoriteボタンの実装には「Toggle」を使用します。
adaloの「Toggle」は選択したタイミングでデータベースを即時更新します。
更新には以下の２種類があります。

***・該当レコードのTrue/Falseプロパティを更新する。***
関連づけられた項目を即時更新します。
例えば「ListsコレクションのStatusプロパティ」をToggleと紐付けた場合、ToggleのOn/Offに応じて該当プロパティの値を即時更新します。


***・2レコード間の「relationship」を更新する***
関連づけられた「リレーション」を即時更新します。
例えば「Listsコレクション」を作成し複数の「Users」コレクションとリレーションが貼られている場合、該当のToggleをクリックすることでUserがListのメンバか否かを更新します。

Favoriteボタンは後者の方法を使って実装します。

# 実装方法

1）Favoriteボタンを配置するコレクションを作成する
2）Usersテーブルとのリレーションを設定する
3）CustomListを設置しToggleボタンを配置し2)で設定した「リレーション」を割り当てる
4）体裁を整える

の手順で実装します。

### 1）Favoriteボタンを配置するコレクションを作成する

画面左のメニューから「DataBase」を選択し、Name、Imageという項目を持つ「Listsコレクション」を作成します。
![01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/dd6a40fa-c47d-7ce2-3bc4-4f9e5ba7e1f2.gif)

### 2）Usersテーブルとのリレーションを設定する

「Usersコレクション」に「Listsコレクション」との「N対N」リレーションを追加します。

![02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/60231edb-332b-2faa-ae19-d24eefee1e5e.gif)


### 3）CustomListを設置しToggleボタンを配置し2)で設定した「リレーション」を割り当てる

画面に「CustomListコンポーネント」を配置します。「CustomListコンポーネント」は「Listsコレクション」と紐付けます。次に「Toggleコンポーネント」を先ほど追加した「CustomListコンポーネント」の上に配置します。この「Toggleコンポーネント」は「Current List > Users > Includes Logged In User」と紐付けます。

![03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/62155d86-29fb-d7a0-e4ea-844892654cb3.gif)


### 4）体裁を整える

「CustomListコンポーネント」にListコレクションの値を表示させるため、項目を紐付けます。
![05.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/39cecd5d-89a4-0481-4aca-75d38e834e8d.gif)



せっかくなのでToggleをFavoriteボタンっぽく、ハートに変更してみます。
![06.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/ea4c0724-50a2-0cd1-62a6-09fe00a9a257.gif)


また複数のユーザー間でFavoriteボタンをクリックされた数の合計も出力してみます。
![07.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/da09022f-8219-43a1-5b18-411758571e31.gif)


### 実装を確認する

実装結果を確認するために以下のデータを登録しました。

【Usersコレクション】
![スクリーンショット 2020-08-27 12.23.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/afbc5546-2e28-9028-bd1b-11bed5ca8e4f.png)

【Listsコレクション】![スクリーンショット 2020-08-27 12.23.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/b41f5e5c-28f6-89dc-df01-22b0e5df9416.png)

まず、ユーザー「test001@test.com」でログインし、List02のFavoriteボタンをクリックしてみます。
![08.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/f9fe2680-de63-d87a-0cc0-e139aa23ce14.gif)

クリックしたFavoriteボタンのカウントが０→1に変わりました。

次に「test002@test.com」のユーザーでログインします。

ログインするとユーザー「test001@test.com」によりList02のカウントされているため、List02のカウントが「１」になっています。ここで、List01、List02ともクリックしてカウントを上げておきます。
![09.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/b324fae0-2906-46d5-7d84-4ed66c6787b8.gif)

![10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287413/103da426-a81f-47ef-940f-56912e7f3eb9.gif)

うまく行きました！
これで実装完了です。
Enterprise Cloud Service Public Preview on AWS - Enterprise Security 編についてまとめて和訳してみた③

##はじめに
今回は、2020年6月12日に Vinay Wagh 氏と Abhinav Garg 氏によって投稿されました「 Enterprise Cloud Service Public Preview on AWS 」で紹介されている Enterprise Security の1つである「 Secure Cluster Connectivity 」に関する内容を翻訳し、まとめてみました。

本記事のリンクは下記参照。
■リンク
 ・[Secure Cluster Connectivity](https://docs.databricks.com/security/secure-cluster-connectivity.html?_ga=2.100416094.193700485.1598426096-2077488611.1586312155)
・[Enterprise Cloud Service Public Preview on AWS](https://databricks.com/jp/blog/2020/06/12/enterprise-cloud-service-public-preview-on-aws.html)


##エンタープライズセキュリティ
今回の AWS 上での Databricks のエンタープライズクラウドサービスにおけるエンタープライズセキュリティの主な内容は以下の4つです。
今回は、この5つの内の「セキュアなクラスタ接続」について、紹介したいと思います。

■エンタープライズセキュリティ
①Data Lake の真のポテンシャルを妨げないセキュリティ
②顧客管理VPC
③セキュアなクラスタ接続
④Notebook の為の顧客管理キー
⑤IAM 証明パススルー

##セキュアなクラスタ接続
###概要
いくつかのデプロイメントタイプと Databricks サブスクリプションには、安全なクラスタ接続がオプションで含まれています。安全なクラスタ接続により、顧客の VPC には開いているポートも無く、Databricks ランタイムワーカにはパブリック IP アドレスもありません。一部の API では、これはパブリック IP（NPIP）と呼ばれます。

- ネットワークレベルで各クラスタは、クラスタ作成中にコントロールプレーンセキュアクラスタ接続リレーへの接続を開始
- クラスタはポート 443（HTTPS）を使用してこのセキュアな接続を確立し、Web アプリケーションや REST API に使用されるものとは異なる IP アドレスを使用
- 新しい Databricks ランタイムジョブの開始やクラスタ管理の実行など、コントロールプレーンが論理的に開始するアクションはリバーストンネルを介してクラスタへの要求として送信される
- データプレーン（お客様のVPC）には開いているポートが無く、Databricks ランタイムワーカにはパブリック IP アドレスは無い

###クラスタ接続のメリット

- 簡単なネットワーク管理
  - セキュリティグループでのポート構成やネットワークピアリング構成が不要
- より簡単な承認
  - 優れたセキュリティと単純なネットワーク管理のため、情報管理チームが Databricks を PaaS プロバイダとして承認するのがより簡単に
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321349/b137224f-1b1f-d9b0-e3f0-27bce13e0bd6.png)

###安全なクラスタ接続の使用
セキュアなクラスタ接続をワークスペースに利用する場合は、マルチワークスペース API を使用し新しいワークスペースを作成する必要があります。既存のワークスペースにセキュアなクラスタ接続の追加はできません。


##おわりに
セキュアなクラスタ接続についての紹介は以上です。詳し内容については、本記事をご参照ください。
TypeScriptでのコンストラクタ(constructor)の表現まとめ

# はじめに

Typescriptを書いていて、そういえばコンストラクタ(constructor)でこういう書き方もできたなと書き方をど忘れしていたことがあったので、備忘としてTypescriptのいろんな形式のコンストラクタ(constructor)をまとめます。

# 基本のコンストラクタ(constructor)
基本的なコンストラクタ(constructor)の記述です。
これを少しずつ色々な形に変形していきます。

```typescript:greeter.ts
class Greeter {
  greeting: string;
  name: string;

  constructor(message: string, name: string) {
    this.greeting = message;
    this.name = name;
  }

  greet() {
    return this.greeting + this.name;
  }
}

let greeter = new Greeter("Hello, ", "Taro");
console.log(greeter.greet()) // => Hello, Taro 
```

# コンストラクタ(constructor)のパラメータをOptional(任意)にしてみる

一部のパラメーターを必須のパラメーターから`Optional(任意)`のパラメーターにします。
下記の例では`message`が任意になっています。
あってなくてもいいプロパティがある `config`のような`class`を作成する場合に利用します。
(* `Optional`のパラメーターは`constructor`に限らず通常の`function`の記述でも利用できます。)

```typescript:greeter.ts
class Greeter {
  greeting: string;
  name: string;

// 任意のパラメーターは必須のパラメーターより先に記述することができないので、messageが後になっています。
  constructor(name: string, message?: string) {
    this.greeting = message ?? '';
    this.name = name;
  }

  greet() {
    return this.greeting + this.name;
  }
}

let greeter = new Greeter("Taro"); //  => messageは任意のプロパティなので、なくてもエラーにならない
console.log(greeter.greet()) // => Taro
```

# constructorでPartialを利用して、オブジェクトを引数にする

`Partial<T>`はTが持つすべてのプロパティを`Optional(任意)`のプロパティとした型 を提供します。
constructorの引数を`Partial<T>`とすることで、オブジェクトを引数として初期化することができます。

```typescript:greeter.ts
class Greeter {
  greeting: string;
  name: string;

// init は {greeting?:string, name?:string } の型として振舞います。
  constructor(init :Partial<Greeter>) {
// Object.assign(this, init) とするとスマートに記述できます。
    this.greeting = init.greeting ?? ''
    this.name = init.name ?? ''
  }

  greet() {
    return this.greeting + this.name;
  }
}

let greeter = new Greeter({name: "Taro"}); //  => Objectをconstructorに渡せます。
console.log(greeter.greet()) // => Taro
```


# Parameter propertiesでプロパティ宣言をシンプルにする
Parameter propertiesを利用することで、プロパティの宣言とconstructorの引数をシンプルに記述できます。

```typescript:greeter.ts
class Greeter {
  //Parameter propertiesで宣言を行う場合には、アクセス修飾子は必須
  constructor(
    private message: string,
    private name: string
  ){}

  greet() {
    return this.message + this.name;
  }
}

let greeter = new Greeter("Hello, ", "Taro");
console.log(greeter.greet()) // => Hello, Taro 
```
# おわりに
コンストラクタ(constructor)の表現だけでいろいろと便利な表現ができるので、TypeScript面白いな〜と改めて思いました！

# 参考記事
[TypeScriptのclassをオブジェクトで初期化する](https://qiita.com/Tsuyoshi84/items/e74109e2ccc0f4e625aa)
[TypeScript:Partial](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype)
[TypeScript:Parameter properties](https://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties)
GraphQLのテストいろいろ

# はじめに
最近、Graphql-rubyでAPIを実装しています。
当然、graphqlのテストを書く必要があるんですが、いろいろ方法がありそうなので忘備録としてまとめておきます。
# 実際にapiを叩く方法
まず、実際にapiを叩く方法を説明します。
以下が例になります。

```spec.rb
RSpec.describe User, type: :request do
  describe 'user' do
    it '指定したusrが取得できること' do
      user = create(:user)

      post '/graphql', params: { query: query(id: user.id) }
      json = JSON.parse(response.body)
      data = json['data']['user']

      expect(data).to include(
        'id' => user.id
      )
      end
    end
  end

  def query(id:)
    <<~GRAPHQL
      query {
        user(id: "#{id}"){
          id
          name
        }
      }
   GRAPHQL
  end
end
```
queryを実際に定義して、ローカルのapiにpostするという実直な実装です。
しかし、これだと以下のようにいくつか面倒な点があります。

- expectするためにいちいちパースとかjson形式で確認するのは面倒
- contextを指定できない(current_userが指定できない)
- query書くの面倒

# executeを叩く方法
続いて、executeを直接叩いてやる方法です。
こちらもまずは例から

```spec.rb
RSpec.describe User, type: :request do
  describe 'user' do
    it '指定したusrが取得できること' do
      user = create(:user)
      
      # AppSchemaは定義されているスキーマ名に変えてください
      ret = AppSchema.execute(query(id: user.id) context:{current_user: user})
      data = ret['data']['user']

      expect(data).to include(
        'id' => user.id
      )
      end
    end
  end

  def query(id:)
    <<~GRAPHQL
      query {
        user(id: "#{id}"){
          id
          name
        }
      }
   GRAPHQL
  end
end
```
jsonにパースやレスポンスを受け取って記述がなくなり少しすっきりしました。
また、引数にcontextを渡せるのでテストがしやすいです。
一方、queryを書いたり、json形式からidを抜き出したりするのは面倒です。
特にクエリが複雑化してネストが深くなるとjson形式はかなり不便です。

# resolverだけ叩く方法
では、早速例をみてみましょう。

```spec.rb
RSpec.describe User, type: :request do
  describe 'resolver' do
    it 'userが取得できること' do
      user = create(:user)

     # class_nameはロジックが書かれてるresolveのクラス名
      mutation = [class_name].new(field: nil, object: nil, context:{current_user: user})
      ret = mutation.resolve(id: user.id)
      expect(ret).to eq user
    end
  end
end
```

だいぶ、すっきりしました。
見ればわかるかと思いますが、resolveが書いてあるクラスをnewして直接resolveメソッドを読んでいます。この方法ですと、戻り値はuserオブジェクトになるのでテストが非常に書きやすいです。

# どれつかう？
自分の場合は、ObjectTypeなどのフロントとのインターフェイスをテストするときにはexecuteを直接呼ぶ方法、それ以外のロジックをテストする場合は、resolverを直接呼ぶ方法を使っています。最初のapiを叩く方法はほとんど使いません。

以上、自分が知ってるテスト方法をまとめてみました。他にも良い方法あるよって人はコメントいただけると嬉しいです。
今日の曜日が、どの曜日かによって会話を変化させる

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

<b>2.Dateクラスとは</b>

<b>3.どのように書くのか</b>

<b>4.ここから学んだこと</b>





1.結論
----------------------------------------
❶”Dateクラス”
❷todayメソッド
❸wdayメソッド
❹配列
❺if文

を使う！

<br>
2.Dateクラスとは
----------------------------------------
"Dateクラス"とはRubyのライブラリに備わっている
標準機能です！
こういったものを使うには"require"メソッドが必要になります。

もし今日の曜日を出したい場合は"Date.today.wday"で今日の曜日の数字が出せます。
”Dateクラス”に”todayメソッド”と”wdayメソッド("日〜土"で戻り値が”0~6”が割り当てられています)”を組み合わせることで”今日”とその日の”曜日”が出せます！
<br>
3.どのように書くのか
----------------------------------------
では実際にどうプログラムしていくのか見ていきましょう！
今回は土日前を控えた金曜日はテンションが上がるので、
”金曜日だけ特別な文言”にしましょう！
また、休日も特別にしましょう。

```ruby:今日の曜日出力
require"date" ❶                    

 week = ["日", "月", "火", "水", "木", "金", "土"]❹

 now_week_num = Date.today.wday❷❸
 now_week_char = week[now_week_num]
（配列の添字は❷❸で変数になっているので、今日の曜日ごとに添字の数字は変化します）
　
❺
if now_weekday_num == 5
 puts "今日は#{now_week_char}曜日‼︎飲みに行くしかないでしょ先輩!!!"
elsif now_weekday_num == 6 || now_weekday_num == 0
 puts "今日は#{now_week_char}曜日だね、デートにいこっか♪"
else
 puts "今日はまだ#{now_week_char}曜日だ・・・。いつになったら休みが来るんだ・・・。"
end



```
❶Dateクラスを呼び出し
❷❸今日の曜日を変数now_week_num に代入
❹配列で曜日を添字で出力できる形
❺if elsif文で金曜日と休日を特別な文言にしています。
金曜日は数字でいうと"5"にあたります。

このような形で、
”今日”が”どの曜日”かによって”文言”を
変化させることができます！

<br>

4.ここから学んだこと
----------------------------------------
このプログラムは、よくゲームに出てくる
会話の選択肢によってストーリーが変化するモノなんじゃないかなと思いました。もちろんもっと複雑ですが、基本的な部分に触れたと思いました。
（AWS)WinScp：ec2-user証明書で接続後にroot化したい。


# ゴール
　ec2-user証明書を使って、Windows環境から、root権限のフォルダ/ファイルにGUIでアクセスしたい。

# WinScpを起動する

## １．転送プロトコルを　「SCP」に変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204514/24fa6981-32d2-e4f0-3ca4-69f5d239db60.png)


##　２．[環境→SCP/シェル]　シェルを　「sudo su - 」に変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204514/254c7084-6d18-2d64-7abd-959bb9cee504.png)

##　３．[SSH→認証] 認証条件の秘密鍵を設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204514/c3192a98-c9e4-720e-3193-5b79521f8774.png)

##　４．ec2-userで接続して　/root となっていればOK！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204514/e2582425-b40b-eb37-065a-24bc2e57962a.png)


# あとがき
転送プロトコルが「SFTP」では上記手順でroot化できなかった。


以上。
adb のコマンド備忘録

個人的な備忘録 ( いつも忘れるんだよね )

## 提供元不明アプリのパッケージ名取得方法
```
adb shell pm list package | grep 絞り込みワード
```

自社アプリとかで jp.co.hogehoge みたいにある程度決まってるならより絞り込みやすい

```
adb shell pm list package | grep jp.co.hogehoge
```

---

## Android端末にダミーファイルを作成する
ストレージギリギリの時の動作テストとかでダミーファイルを作成してストレージを埋めたい場合がある
ダミーを作成して転送するより shell で端末に入り直接生成した方が早い

ダミーの作成には dd コマンドを利用する

```
adb shell
cd sdcard/download
dd if=/dev/zero of=dummy.txt bs=1g count=1
```

こんな感じで作成する、sdcardのdownloadフォルダに 1GBのdummy.txtファイルを生成している


---


## adbで接続している端末の再起動

```
adb reboot
```

---

## adb で接続している端末の電源を落とす

```
adb shell reboot -p
```

-p は poweroff

---
## 起動しているアプリを停止する
アプリの操作が効かなくなった時用

```
adb shell am force-stop アプリのpackageName
```

---

## UnityのDebug情報をlogcatで取得する

```
adb logcat -s Unity ActivityManager PackageManager dalvikvm DEBUG 
```

ログをテキストファイルに出力したい場合は > ファイル名.txt をしていすれば良い、この時はコマンドライン上にはログは流れないがちゃんとファイルに出力される

```
adb logcat -s Unity ActivityManager PackageManager dalvikvm DEBUG > hoge.txt 
```


## インストールしたアプリのバージョンを調べる

```
adb shell dumpsys package アプリのパッケージ名
```
versionNameあたりにバージョン名が表示される

## インストールする際に権限を付与する
-g オプションを追加することでアプリインストールする際にマニフェストに記述されている権限を全て付与する  

```
adb install -g *.apk
```
[Python]時刻データと数値データの変換メモ


# 数値データの時刻データへの変換

自分用メモ

dataframeでの数値と時系列データの変換に何度も間違えるのでメモ。
以下のようなデータ（秒）を時刻に直すような変換

```{python}
> df['Time']
0        30620.5
1        39226.0
2        81318.5
3         3438.0
4        11108.5
          ...   
40916     3544.0
40917    37506.0
40918    23386.0
40919    37884.5
40920    24607.5
Name: Time, Length: 40921, dtype: float64
```

```{python}
> df['Time']=pd.to_timedelta(df['Time'], unit='S') + pd.to_datetime('1900-01-01')
> df[Time]
0       1900-01-01 08:30:20.500
1       1900-01-01 10:53:46.000
2       1900-01-01 22:35:18.500
3       1900-01-01 00:57:18.000
4       1900-01-01 03:05:08.500
                  ...          
40916   1900-01-01 00:59:04.000
40917   1900-01-01 10:25:06.000
40918   1900-01-01 06:29:46.000
40919   1900-01-01 10:31:24.500
40920   1900-01-01 06:50:07.500
Name: Time, Length: 40921, dtype: datetime64[ns]
```

[Ref : pandas.to_timedelta](https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.to_timedelta.html)

> unit 
str, optional
Denotes the unit of the arg for numeric arg. Defaults to "ns". 

>Possible values
 - ‘W’
 - ‘D’ / ‘days’ / ‘day’
 - ‘hours’ / ‘hour’ / ‘hr’ / ‘h’
 - ‘m’ / ‘minute’ / ‘min’ / ‘minutes’ / ‘T’
 - ‘S’ / ‘seconds’ / ‘sec’ / ‘second’
 - ‘ms’ / ‘milliseconds’ / ‘millisecond’ / ‘milli’ / ‘millis’ / ‘L’
 - ‘us’ / ‘microseconds’ / ‘microsecond’ / ‘micro’ / ‘micros’ / ‘U’
 - ‘ns’ / ‘nanoseconds’ / ‘nano’ / ‘nanos’ / ‘nanosecond’ / ‘N’
 
 > Changed in version 1.1.0: Must not be specified when arg context strings and errors="raise".
Sassの@useで何が変わったか

### @useって何？

2019年にSassに新たに導入されたモジュールシステムに `@import` の代わりとなる `@use` というルールが登場しました。 `@use` の使用によって、他のファイルで定義した CSS変数、関数、ミックスインを名前空間をつけて呼び出すことができます。

```jsx
@use "variables";

.element {
  background-color: variables.$body-bg;
}
```

### @importとの違い

名前空間をつける以外にも以下の点で挙動の違いがあります。

- `@use` で読み込んだ変数等は読み込んだファイルでしか使えない
- `-` か `_` で始まる変数等はPrivate Membersとなり宣言したファイルでしか使用できない

`@use` を使えばグローバル空間を汚染せずにすみそうですね。

### 名前空間をつけるメリット

改めて、Sassで名前空間をつけるメリットとしては

```jsx
同じ名前で変数を定義した場合でも、独立した変数として扱うことができる
```

事ですね。

それでは最初に、名前空間をつけない場合（ `@import` で読み込んだ場合）を見ていきます。

```
// _follow-button-component.scss
$width: 100px;

// _like-button-component.scss
$width: 80px;
```

```
// style.scss
@import 'follow-button-component';
@import 'like-button-component';

.follow-button {
    width: $width; // 80px
}

.like-button {
    width: $width; // 80px
}
```

名前空間をつけないと、後から定義した変数のみ使用されるようになります。

これに対して、名前空間をつける場合（ `@use` で読み込んだ場合）は、

```jsx
// style.scss
@use 'follow-button-component';
@use 'like-button-component';

.follow-button {
    width: follow-button-component.$width; // 100px
}

.like-button {
    width: like-button-component.$width; // 80px
}
```

それぞれ定義した変数を使用することが出来きます。

上記のコードを見て分かるとおり、変数を定義したファイル名が名前空間になっています。

ファイル読み込み時に `as` を使えば好みの名前空間に変更できるので、ファイル名が長くなった時など使用すると良いですね。

```jsx
// style.scss
@use 'follow-button-component' as follow;
@use 'like-button-component' as like;

.follow-button {
    width: follow.$width; // 100px
}

.like-button {
    width: like.$width; // 80px
}
```

### Private Members

名前空間をつける以外にも、変数等をプライベートメンバーにする機能が追加されました。

名前の最初に`-` か `_` を付けることでプライベートメンバーになります。

プライベートメンバーは通常の変数のように使用することができますが、外部ファイルから読み込まれた時は参照できません。(参照した場合、コンパイルエラーが発生します。)

```jsx
// _buttons.scss
$-btn-width: 10px;

.btn {
  width: $-btn-width; // 10px
}
```

```jsx
// style.scss
@use "buttons";

.btn {
  width: $-btn-width;
	// This is an error! $-btn-width isn't visible outside of `_buttons.scss`.
}
```

### まとめ

`@use` を使うことで変数等の競合やモジュール間の依存関係の問題を解消することができます。

2022年には `@import` のサポートが終了するので、新規プロジェクトでは `@use` を使用した方が良いですね。

### 参考記事

- [the-module-system-is-launched](https://sass-lang.com/blog/the-module-system-is-launched)
「国税eTax」をスティック型パソコンに隔離した。

Appleの「インテル離れ」を受けて、
「国税eTax」が筆頭、intel搭載Windowsでしか動かないアプリ、
これらの行末が不安になりました。

intel搭載Macが無くなったら、
※２年以内に無くなる模様
どうしよう。。

そこで、スティック型パソコンに隔離することとしました。
　https://www.asus.com/jp/Stick-PCs/VivoStick-PC-TS10/

<H1>【パソコン環境】</H1>
　　（Before）　　　　　（After）
　　x86アプリ(eTax等) 　　→ x86アプリ
　　Windows10 Home 　　→ Windows10 Pro
　　ParallesDesktop　　　→（使う理由が無くなった）
　　Macbook 　　　　　　→ スティック型パソコン(リモート接続)

<H1>【隔離までの履歴】</H1>
１．自宅に入出力デバイスが無い！
　　ゆえに、ネットルーム　https://manboo.co.jp/netroom.php で、
　　　（モニター、キーボード、マウスを借りて、）
　　初期設定。
 (1) Windows10を「ネットルームのwifi」に接続
 (2) MSリモート接続を許可させる　　
　　※ 自宅でリモート接続するため
 (3) Windows10を「iPhoneのインターネット共有」に変更
　　※ iPhoneにテザリング

２．帰宅後、Windows10を「自宅wifi」に変更
 (1) MacbookからMSリモデ（iphone経由）

<H1>【リモート接続とICカードリーダー】</H1>
 sonyのRC-S330やRC-S380をスティック型パソコンに接続し、
リモート接続した結果がこちら↓

 Microsoft Remote Desktop　　→ ❌（理由は分からん）
 Brynhildr（ブリュンヒルデ）　→ ○（Mac経由）
 SpaceDesk　　　　　　　　　→ ○（iPad経由）
 Chrome リモート デスクトップ　→ ○（Mac経由）2020-10-28追加

<H1>【感謝した記事】</H1>
Windowsのリモートデスクトップでマイナンバーカードを読めない 　　 
 https://ameblo.jp/datezou/entry-12443891324.html
「伊達ぞー」さんのブログより、
「リモートデスクトップ接続前に、スマートカードにチェック↓を入れておくと使えるという噂がありますがたぶんデマです。」

Brynhildr（ブリュンヒルデ）
　http://blog.x-row.net/?p=2455
 IchiGekiさん、リモートデスクトップエンジニアのブログ

Qt Brynhildr　※Macからリモート接続
　http://mcz-xoxo.cocolog-nifty.com/
　（ふんふん）さんのブログ 

SpaceDesk　※iOS(iPadやiPhone)からリモート接続
  https://spacedesk.net/

↓2020-10-28追加
Chrome リモート デスクトップ　※Macからリモート接続
　　　　　　　　　　　　　　　 ※iOS(iPadやiPhone)からリモート接続
  https://support.google.com/chrome/answer/1649523?co=GENIE.Platform%3DDesktop&hl=ja
以　上
SNS認証を導入した時のエラー

一瞬で終わる記事です。

下記のGemを追加して、SNS認証の導入の準備
[![Image from Gyazo](https://i.gyazo.com/c3cb1c87828164bad7e41a932d83b6ba.png)](https://gyazo.com/c3cb1c87828164bad7e41a932d83b6ba)


bundle installを行って環境変数の設定など色々行い、
localhost:3000にアクセスしたらこちらのエラーが出ました。↓↓↓↓↓

[![Image from Gyazo](https://i.gyazo.com/6719e1e04c00924491688066d7a5f861.png)](https://gyazo.com/6719e1e04c00924491688066d7a5f861)



愚直に

```
cannot load such file -- omniauth
```

で検索かけて解決策を探したのですが全くヒットしなくて..
GemfileもGemfile.lockも確認したが問題なさそう..

そこで、困った時の

```
bundle update
```

このコマンドを打つだけで自分の環境ではうまく動作しました。

##bundle update とは?
Gemのバージョンの噛み合わせが悪い時に出るエラーが発された時、バージョンの噛み合わせが良くない部分に関して良い感じに更新してくれるコマンド

---

ってことらしいので、とりあえず打っておけばオッケー

同じようなエラーに直面された方の一助になれば幸いです。
pythonのzip関数の使い方

Qiita初投稿です。
優しく見守ってくれるとありがたいです。
大学の研究でpythonを扱うことになり、プログラミングを一度も触ったこともなかった僕が躓いたことや学習したことを忘れた時の為にアウトプットをしようと思いました。
誰かのお役になれたら幸いです。
#python zip関数ってなんで使うの？
pythonを学習してきてzip関数が出てきたのですが、初めて見た時は「なんだこれ」となりました。調べてみると
>「zip関数は複数のリストを同時に取得したい場合に使用する関数です。」https://www.sejuku.net/blog/66268

ふむふむ…僕には難しいです。とりあえず、複数のリストを同時に取得できるのか…でも、実際どんな時に使えて何がいいのかわからない！というわけで自分なりにzip関数のいいところを考えてきました。
自分の感覚的にzip関数はコードを簡略化できるところなのかなと思うので、実際に実行したい問題に対してzip関数を使う場合と使わない場合について書きたいと思います。
#問題
各人物の名前と性別とどこに住んでいるのかを一度に知りたい。
※各人物の名前と性別とどこに住んでいるのかはもう用意してあると仮定します。
##zip関数を使わない。
zip関数を使わないでコードを書こうとするとこうなります。

```no_zip.py
name = ['Noah','Emma','James']
gender = ['men','woman','men']
address = ['tokyo','chiba','nagoya']

for i in range(len(name)):
    print(name[i],gender[i],address[i])
```
出力が

```out
Noah men tokyo
Emma woman chiba
James men nagoya
```
となります。
まず、配列を作りfor文で変数nameの数だけ（0～2）を回してあげます。そのためほかの変数gender,addressも対応する要素を出力します。
##zip関数を使う。
次にzip関数を扱った場合です。

```yes_zip.py
name = ['Noah','Emma','James']
gender = ['men','woman','men']
address = ['tokyo','chiba','nagoya']

for n,g,a in zip(name,gender,address):
    print(n,g,a)
```
出力が

```output
Noah men tokyo
Emma woman chiba
James men nagoya
```
となります。
変わったところはfor文のところかと思います。zip関数のところのnameでは配列の一番最初のところである'Noah'をピックアップしてnにいれ、gebderでも最初の'men'をピックアップをしてgに入れています。つまり、zip関数は「二つ以上のリストのインデックスを取得」することができます。
#####コードを見て直感的にわかりやすいのはzip関数なのではないかと思います。
今回使ったコードは
https://github.com/Kimiaki619/zip-/blob/master/zip.ipynb
に乗せてあります。
#最後に
Qiita初投稿で、今までブログなどの情報発信をしたことがないためわかりにくい文章になっているかもしれません。
これから、情報発信をしていき文章力をつけていきたいと思います、また技術で遊べる人間になるのが僕の夢なので温かい目で見守っててください。
これから、よろしくお願いします。
Laravel × vueでリアルタイムチャット

# やりたいこと
laravelとvueでリアルタイムチャット(LINEみたいな)を実装したい

# 使用技術
* Laravel関係
    * Laravel Echo
    * イベント・リスナ
    * ブロードキャスト
* Vue関係
    * axios
    * Laravel Echo
* その他
    * Pusher

# ロジック
1. メッセージ送信時にイベント発火
2. イベント内でPusherに通知（ブロードキャスト）
3. Pusherへの通知をLaravel Echoが感知
4. Laravel Echoでメッセージ再読み込み

# 実装手順

# **今回の例はpusherへ通知を行うとすべてのクライアントでメッセージ再読み込みが行われるため、複数の1対1同時接続を再現するには修正が必要です！！！！**
　　→[ハッシュ化ユーザーID]みたいなチャンネル名でブロードキャストすればできそう

## (web)Pusherに登録
👉[Pusher 登録ページ](https://dashboard.pusher.com/accounts/sign_up)

## (Laravel)Pusherへブロードキャストする設定をする

1. `.env`に記述 


```.env
BROADCAST_DRIVER=pusher
# 以下pusherからコピペ
PUSHER_APP_ID=******
PUSHER_APP_KEY=********************
PUSHER_APP_SECRET=********************
PUSHER_APP_CLUSTER=***
```

2.`cinfig/app.php`の`BroadcastServiceProvider`のコメントアウトを解除
3.必要パッケージのインストール

```bash
$composer require pusher/pusher-php-server "~3.0"
```

## (Vue)Pusherの監視をするLaravel Echoの設定をする

1.必要パッケージのインストール

```bash
$npm install --save laravel-echo pusher-js
```

2.Laravel Echoをアクティブに

`resources/js/bootstrap.js`のlaravelEchoに関するコメントアウトを解除

```resources/js/bootstrap.js
import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});
```

## (Laravel)Pusherへの通知イベント実装

1.イベント作成

```bash
$php artisan make:event MessageCreated
```

2.pusherへ通知する部分の実装

 `app/Events/MessageCreated.php`の`ShouldBroadcast `インターフェースの実装

```app/Events/MessageCreated.php
<?php

namespace App\Events;

use App\Message;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class MessageCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Message $message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('chat');
    }
}
```

3.メッセージ送信時にイベント発火するように

```Controller.php
public function create(Request $request) {

    $message = \App\Message::create([
        'body' => $request->message
    ]);
    event(new MessageCreated($message));

}
```

## (Vue)Laravel Echoでメッセージ再読み込み実装

```vue.js

mounted() {
    this.getMessages();
    Echo.channel('chat')
        .listen('MessageCreated', (e) => {
            this.getMessages(); // 全メッセージを再読込
        });
}
```

# 参考
Laravel+Vueでリアルタイム・チャットをつくる（ダウンロード可）[最終更新:2019/06/03]
https://blog.capilano-fw.com/?p=1418#Ajax
手軽にD3.jsでSVG凸包を描画する

# 凸包とは？

>出典: フリー百科事典『ウィキペディア（Wikipedia）』
ナビゲーションに移動検索に移動
赤で表される集合の[凸包(Wiki)](https://ja.wikipedia.org/wiki/%E5%87%B8%E5%8C%85)は、青で表された凸集合である。
数学における凸包（とつほう、英: convex hull）または凸包絡（とつほうらく、英: convex envelope）は、与えられた集合を含む最小の凸集合である。例えば X がユークリッド平面内の有界な点集合のとき、その凸包は直観的には X をゴム膜で包んだときにゴム膜が作る図形として視認することができる。

![凸包](https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/ConvexHull.svg/330px-ConvexHull.svg.png)


# 凸包を描画

凸包に関するアルゴリズムはたくさんあると思いますが、どれもシンプルとはいえないので、ここではD3.jsを利用した凸包描画方法を紹介いたします。サンプルコードではSVGになっていますが、D3.jsはCanvasの描画もサポートしているため、ちょっと書き方を変えればCanvasでも描画可能です。

## HTMLとCSS定義

```html:html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.14.2/d3.min.js"></script>
</head>
<body>
<div class="graph-area"></div>
</body>
</html>
```
```css:css
.graph-area {
  width:500px;
  height:500px;
  border:1px solid blue;
}
```
## STEP1

ランダムの点の座標を生成する。

```javascript:javascript
// グラフィックエリアサイズ500*500px
let width = 500;
let height = 500;
// ランダムX座標
let randomX = d3.randomNormal(width / 2, 60);
// ランダムY座標
let randomY = d3.randomNormal(height / 2, 60);
// 100組ランダム座標を作成
let dataset = d3.range(100).map(function() {
  return [randomX(), randomY()];
});
```
## STEP2

サンプル点を描画する

```javascript:javascript
// SVGタグ初期化
let svgContainer = d3.select("div.graph-area")
.append("svg")
.attr("width", width)
.attr("height", height);

// サンプルポイント描画
dataset.forEach(function(val,idx,arr){
  svgContainer.append("circle")
  .attr("cx", val[0])
  .attr("cy", val[1])
  .attr("r", 2);
});

```

## STEP3

D3.jsで凸包の座標を計算し、描画する。

```javascript:javascript
// 凸包データ生成
let hulldata = d3.polygonHull(dataset);

// 凸包描画
let beforePoint = hulldata[hulldata.length - 1];
hulldata.forEach(function(val,idx,arr){
  svgContainer.append("line")
  .attr("stroke", "black")
  .attr("x1", beforePoint[0])
  .attr("y1", beforePoint[1])
  .attr("x2", val[0])
  .attr("y2", val[1]);
  beforePoint = val;
});

```

## 結果
![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83580/b2925e46-ead6-21bf-6755-3098b4b4f7eb.png)


[デモページへ(jsfiddle)](http://jsfiddle.net/kgph4967/3)
デフォルトブランチを取得する

## はじめに

これまでgitのデフォルトブランチは`master`というのが常識でしたが、
2020年10月1日以降に新規作成したGitHubリポジトリではデフォルトブランチに`main`が指定されるようになります。

> Set the default branch for newly-created repositories
> https://github.blog/changelog/2020-08-26-set-the-default-branch-for-newly-created-repositories/

これからgitを扱う再利用可能なスクリプトを書く際には、リポジトリのデフォルトブランチが`master`なのか`main`なのか知りたくなる場面があるかと思います。

## 方法

GitLabの`CI_DEFAULT_BRANCH`のような変数が予め用意されている場合はそれを使えば十分ですが、
そうでない環境では何らかの手段でデフォルトブランチを調べることになります。

gitとsedが使える環境では、以下のコマンドを実行するとデフォルトブランチがわかります。

```console
$ git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@'
master
```

別解として、cutとrevを使うと次のようにかけます。

```console
$ git symbolic-ref refs/remotes/origin/HEAD | rev | cut -d/ -f1 | rev
master
```

```console
$ git symbolic-ref refs/remotes/origin/HEAD | cut -d/ -f4
master
```

もっといいやり方があったら教えて下さい。
【Ruby on Rails】link_toメソッドの使い方。URLの指定方法まとめ

#【Ruby on Rails】link_toメソッドの使い方。URLの指定方法まとめ

Railsのviewファイルに動的なリンクの設置はRailsのビルドインヘルパーの一つである、link_toメソッドを使う。


`<%= link_to 'アンカーテキスト', パスの指定 %>` 

パスの指定方法は複数ある。

1. [コントローラー名で指定(アクション指定なし)](#1-コントローラー名で指定アクション指定なし)
2. [コントローラーとアクションを指定](#2-コントローラーとアクションを指定)
3. [コントローラーとアクションとidを指定](#3-コントローラーとアクションとidを指定)
4. [pathで指定](#4-pathで指定)
5. [pathで指定（idを指定）](#5-pathで指定idを指定)
6. [URLで指定](#6-urlで指定)
7. [パスを指定しない場合](#7-パスを指定しない場合)
8. [パスとアンカーテキストを指定しない場合](#8-パスとアンカーテキストを指定しない場合)
9. [実際の記述例](#実際の記述例)


<br>
###1. コントローラー名で指定(アクション指定なし)
コントローラー名で指定する場合はオプションに下記を設置する。

`controller: 'コントローラー名'`

アクションの記載をしない場合はindexが指定される。
「コントローラー名#index」に該当するページへのリンクが設置される。


```erb
`<%= link_to 'アンカーテキスト', controller: 'コントローラー名' %>` 
```


<br>
###2. コントローラーとアクションを指定

`controller: 'コントローラー名', action: 'アクション名'`

指定した「コントローラー名#アクション名」に該当するページへのリンクが設置される。



```erb
`<%= link_to 'アンカーテキスト', controller: 'コントローラー名', action: 'アクション名' %>` 
```


<br>
###3. コントローラーとアクションとidを指定
`controller: 'コントローラー名', action: 'アクション名', id: id番号`

指定した「コントローラー名#アクション名」の該当するページの末尾に指定したid番号がついたページへのリンクが設置される。


```erb
<%= link_to 'アンカーテキスト', controller: 'コントローラー名', action: 'アクション名', id: プロパティ名.id %>`
```

id番号は整数でも指定可能
　┗例　`id: 1`
 


<br>
###4. pathで指定
ルーティングにはパス（末尾「_path」）が設定されている。このパスを指定することで該当ページへのリンクを設置できる。

`[パスprefix]_path`

パスはコマンド`rails routes`で確認できる。
       
       
| Prefix | Verb | URI Pattern | Controller#Action|
|:-:|:-:|:-:|:-:|
|articles_index| GET|/articles/index(.:format)|                                                                articles#index |


```erb
<%= link_to 'アンカーテキスト', [prefix]_path %>`
```


<br>
###5. pathで指定（idを指定）
pathを指定した後にカッコでidを格納した変数を記述すると、指定したidに該当するページへのリンクが作成される。

`[パスprefix]_path(id番号)`


```erb
<%= link_to 'アンカーテキスト', [prefix]_path(id番号) %>`
```



<br>
###6. URLで指定

URLのフルパスで指定することも可能。

```erb:静的
<%= link_to 'アンカーテキスト', 'URL' %>`
```

<br>
変数展開を使うことで動的にURLを指定することも可能。

・ダブルクオテーションで囲む。
・`#{　}`で記述する。

```erb:動的
<%= link_to 'アンカーテキスト', "https://~/#{変数や式}" %>`
```


<br>
##7. パスを指定しない場合
パスを指定しない場合、
**現在のコントローラーのアクション**へのリンクが設置される。（リロード）


```erb:
<%= link_to 'アンカーテキスト' %>`
```


<br>
##8. パスとアンカーテキストを指定しない場合
link_toのみで、パスとアンカーテキストを指定しない場合、

**▼パス**
「現在のコントローラーのアクション」（リロード）

**▼アンカーテキスト**
「コントローラー名/アクション名/」

となる。


```erb:
<%= link_to %>`
```

＜↓例＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/080d7d62-a056-1082-3b40-743b00ee13b7.png)




<br>
##実際の記述例

```erb
<%= link_to '一覧ページ', controller: 'articles' %><br>

<%= link_to '編集ページ', controller: 'articles', action: 'new' %><br>

<%= link_to 'id：1の詳細ページ', controller: 'articles', action: 'show', id: 1 %><br>

<%= link_to 'テックアカデミー(静的)', "https://techacademy.jp/magazine/7286" %><br>

<% number = '7268' %>
<%= link_to 'テックアカデミー(動的)', "https://techacademy.jp/magazine/#{number}" %><br>

<%= link_to %><br>
<%= link_to 'パス指定なし' %><br>
```



<br>
以上。
【JavaScript】var/const/letの使い分け

![javascript.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698437/4516c302-39cb-7130-e962-313f4c9238da.jpeg)

先日会社の先輩から、JavaScriptの変数宣言で混同していることをご指摘頂いたので、せっかくの機会なのでQiitaに初投稿してみます。

具体的には定数で欠ける箇所を変数で書いてしまっており、業務に支障が出ることもあるそうなので、理由もセットで解説していきます。

##var/const/letとはそもそもなんなのか
###varについて
JavaScriptの変数宣言はもともとvarのみでした。そのため古いブラウザの場合でもエラーを出さずに動きます。

しかし今では、定数の場合はconst、変数の場合はletと役割ごとに使い分けられているので**特別にvarを使う必要はなくなりました。**

###定数constについて
定数constの特徴は、**再代入をするとエラーになるという点**です。

つまりconstを使用する場面としては、**再代入が不要な場合**、または**再代入されたくない場合**になります

###変数letについて
反対に変数letの特徴は、**再代入が可能という点**です。

ということはもちろん変数letを使用する場面は、**再代入が必要な場合**になるわけです。

##再代入とは

定数constと変数letは、再代入があるかないかで使い分けることができることはわかりました。

では**そもそも再代入とはなんなのか？**

ここがわからないと使い分けられないので、簡単な例をお見せしながら解説していきます。

###再代入なし
再代入なしの例として、税込価格を計算するプログラムを用意しました。

```javascript:JavaScript
const cost = 1000;
const tax = 1 / 10
const price = cost + (cost * tax);
const message =　`原価${cost}円の商品の税込価格は${price}円です。`

console.log(message);
```
見ての通り一度costやtaxを決めてしまえばそれらが**書き換わることありません。こういう場合は定数constを使うわけです。**

###再代入あり
再代入ありの例として2桁の自然数を並べて表示するプログラムを用意しました。

```javascript:JavaScript
for(let i = 0; i < 100; i++){
    console.log(i);
}
```
for文のループが実行されるたびにiが書き換わっています。

このように繰り返しが出てきて、**値が何度も書き換わる場合は変数letを使います。**

###例

ではループ中の変数宣言はどのようにすれば良いのでしょうか。

簡単な例として3の倍数を並べて表示するプログラムを用意しました。

```javascript:JavaScript
for(let i = 0; i < 100; i++){ 
    ??? value = i * 3
    console.log(i);
}
```
valueは値が変わるので一見変数letを使うように思えますが、

再代入はされていません。valueは**もともとのi * 3という定義で書き換わっていません。**

よって???にはいる**答えは定数のconst**です。

つまり繰り返しのfor文が出てきても、**変数宣言をした後にそれを書き換えるようなプログラムでない限り定数constを使う**ということです。

##【番外編】なぜconst/letを使い分ける？
ここまで読んで下さった方の中にはもしかしたら、**「とりあえず全部再代入OKのletを使っておけばいいじゃん」**と思った方もいるかと思います。

確かに一人で開発している場合は特に問題はないかもしれません。

しかし複数人での開発で他の人がみた時仮に、**定数でいいところを変数で書いていたら、この後再代入されるのかと誤解を招き作業効率が悪くなります。**

自分も先輩からこの話を聞いた時はなるほどそういうことかと思い、この記事を書くきっかけになりました。

##まとめ

上のような話をした後に何ですが、Web制作の分野ではほとんど変数letが必要なことはないかと思います。

自分もWeb制作をやっているので、今回の記事の内容が難しいと感じた方は、とりあえずconstでも良いかと思います。

最後にまとめておくと

・基本的にvarは使わない
・const/letは再代入があるかないかで使い分ける
・再代入とは宣言後に値を書き換えること

参考にした記事：[https://sbfl.net/blog/2016/07/14/javascript-var-let-const/](https://sbfl.net/blog/2016/07/14/javascript-var-let-const/)

この記事が少しでも役になったという方は、[Twitter](https://twitter.com/yuni_1016)でもWeb制作について発信しているので、フォローしていただけると嬉しいです。
[Docker]WSL distro stopped whiile waiting for Lifecycle serverの解決法

# 前置き
僕はDockerにもWSLにも詳しくありません。なので、この記事に間違っている場所があったらコメントなどで教えてくださいm(_ _)m

# 環境
OSの環境

|項目|詳細|
|---|---|
|エディション|Windows 10 Home Insider Preview|
|バージョン|2004|
|OSビルド|20197.1000|

Docker

```
> docker --version
Docker version 19.03.12, build 48a66213fe
```

# 事の経緯
いつも通りにパソコンを起動すると次のようなエラーが表示されました。

![Docker_Desktop_WSL_distro_stopped.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678998/c3796e1b-6368-0f0b-63d2-18f55f233957.png)

詳細は次の通りです。

```
WSL distro stopped while waiting for Lifecycle server.
  >Stdout:

  >Stderr:
2020/08/27 02:10:49 resolving /mnt/host/c/Program Files/Docker/Docker/resources/wsl/docker-wsl-cli.iso...
Error: mounting wslCLIDest: stat /mnt/host/c/Program Files/Docker/Docker/resources/wsl/docker-wsl-cli.iso: no such file or directory
2020/08/27 02:10:49 stat /mnt/host/c/Program Files/Docker/Docker/resources/wsl/docker-wsl-cli.iso: no such file or directory
mounting wslCLIDest
main.doRun
	/go/src/github.com/docker/pinata/linuxkit/pkg/wsl-bootstrap/main.go:224
main.run.func1
	/go/src/github.com/docker/pinata/linuxkit/pkg/wsl-bootstrap/main.go:83
github.com/docker/pinata/vendor/github.com/spf13/cobra.(*Command).execute
	/go/src/github.com/docker/pinata/vendor/github.com/spf13/cobra/command.go:762
github.com/docker/pinata/vendor/github.com/spf13/cobra.(*Command).ExecuteC
	/go/src/github.com/docker/pinata/vendor/github.com/spf13/cobra/command.go:852
github.com/docker/pinata/vendor/github.com/spf13/cobra.(*Command).Execute
	/go/src/github.com/docker/pinata/vendor/github.com/spf13/cobra/command.go:800
main.main
	/go/src/github.com/docker/pinata/linuxkit/pkg/wsl-bootstrap/main.go:25
runtime.main
	/usr/local/go/src/runtime/proc.go:203
runtime.goexit
	/usr/local/go/src/runtime/asm_amd64.s:1357
```

# (たぶんこれが)原因
Dockerが起動時にWSL2を動かすためのメモリが足りず、エラーが発生しているようです。

# 解決策
Vmmemがメモリをめちゃくちゃ使うので、`.wslconfig`を使いメモリを制限していました。この制限によって、Docker起動時にメモリが足りなくなったと考えられます。なので、[こちらの記事](https://qiita.com/yoichiwo7/items/e3e13b6fe2f32c4c6120)を参考に書き直します。

書き直し前

```ruby:.wslconfig
[wsl2]
memory=6GB
swap=0
```

書き直し後

```ruby:.wslconfig
[wsl2]
memory=10GB
swap=0
```

`memory=6GB`から`memory=10GB`に直し、再起動したらうまくいきました。10GBにした理由は特にないので、この方法でうまくいかない場合は、他の方法探すか、増やすメモリの量を変えてみてください。

もしくは、ためしていませんが、`swap=1`にすることでも解決できるかもしれません。`swap=1`の意味は[こちらの記事](https://qiita.com/yoichiwo7/items/e3e13b6fe2f32c4c6120)を参考にしてください。

# さいごに
ここまで読んでくださり、ありがとうございます。記事に間違いがあればコメントなどで教えてください。
webpack備忘録

フロントエンド開発時の個人的な設定（主にwepback.config.js）を備忘録として記録します
# ディレクトリ構成
`node_modules`も入っていますが構成からは外しています

```bash:ディレクトリ構成
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── assets
│   │   ├── css
│   │   ├── images
│   │   └── js
│   │       └── bundle.js
│   └── index.html
├── src
│   └── main.js
└── webpack.config.js
```

# 基本
`main.js`をエントリーファイルとしてまとめて出力先の`public/js`ディレクトリに`bundle.js`という名前で出力するようにしています

```javascript:webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: 'bundle.js'
  }
}
```

# 開発サーバー
状況に応じて`http-server`または`webpack-dev-server`を使っています

## http-server
いつでもどこでも簡単に起動できる

```bash:http-server
$ http-server
```

```bash:http-server+options
$ http-server -a 192.168.2.140 -p 8000 public/
```

## webpack-dev-server
- `--hot`オプションをつけることでファイルの変更を検知して自動的にコンパイル（トランスパイル）してくれる
- 実際にはコンパイルしたファイルの出力までは行わない（メモリ上に展開されるらしい
- 下記の`devServer.publicPath`は`仮想的なディレクトリ`となっていて、実際には存在しないですがHTMLから指定できます

```bash:実際のディレクトリ構成
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── assets
│   │   ├── css
│   │   ├── images
│   │   └── js
│   │       └── bundle.js
│   └── index.html
├── src
│   └── main.js
└── webpack.config.js
```

```html:index.html(仮想的にできるディレクトリのファイルを参照)
<script src="./dev/js/bundle.js"></script>
```


```javascript:webpack.conifg.js
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'public/assets/js'),
    filename: 'bundle.js'
  },
// 以下の設定を追加
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    publicPath: '/dev/js/', // 仮想的なディレクトリ
    port: 8000
  }
}
```

### サーバーを起動する
```json:package.json
"scripts": {
  "serve": "webpack-dev-server --mode=development --hot"
}
```

```bash:npmスクリプトでサーバーを起動
$ npm run serve
```
スクリーンショットの保存先変更方法（Mac編）

# はじめに
デスクトップ画面がスクリーンショットの画像に埋め尽くされてウザいので、別の保存先を指定できないか調べました。

# 保存先の変更方法
Terminalを起動して以下のコマンドを入力することで
/ユーザー名/Pictures/
というフォルダにスクリーンショットが保存されるようになりました。

```
defaults write com.apple.screencapture location ~/Pictures/;killall SystemUIServer
```
`~/Pictures/`の記述を変更することで好きな保存先を選べました。

# 元の設定に戻す方法

特段必要はないけど、元に戻す方法を調べたので記載しておきます。

```
defaults delete com.apple.screencapture location;killall SystemUIServer
```

# 参考文献
https://book.mynavi.jp/macfan/detail_summary/id=90165
vagrant up 出来ない　エラー　

windowsPCで
vagrant up をしたら

```
Bringing machine 'default' up with 'virtualbox' provider... 
An action 'up' was attempted on the machine 'default', but another process is already executing an action on the machine. Vagrant locks each machine for access by only one process at a time.
 Please wait until the other Vagrant process finishes modifying this machine, then try again.
```
こんなエラーが出てきてvagrant up できない。。。


##原因（推測）
こんなエラーがでて、いつものようにvagrant upできません。
この前にvagrantfileを変え、vagrant reloadしたときに、
見慣れないエラー？が出てきたのでCtrl + C で強制的終了させたのが原因かもしれません。

##対処法
windowsPCのタスクマネージャーを開いて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462069/d55c7bae-9100-b671-7d2a-d67430796eec.png)

↑私の場合Ruby Interpreter というもの

「ruby」とかかれている項目を探します。
それを右クリックてしてプロセスを終了させ、
またvagrant upしたら無事エラーなく実行できました！







こちらの記事を参考にさせていただきました
https://gyagya1111.blogspot.com/2015/07/vagrant-haltsuspend.html
コピペで使えるSVGアイコン探し

### System UIcons
- System UIcons https://systemuicons.com
![System_UIcons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/9f4a0f39-e8ef-ed2a-ff70-1610d5ed5b00.png)

### Tabler Icons
- Tabler Icons - 550+ Highly customizable free SVG icons https://tablericons.com
![Tabler_Icons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/c05cc55a-e801-0734-5ca6-ce2f4c4e8400.png)

### Heroicons
- Heroicons https://heroicons.com
![Heroicons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/adc582a8-3b72-b5fe-b93b-507ea7471b19.png)

### Forge Icons 
- Forge Icons - 300 right mix of SVG icons for use in e-commerce, travel, social media, app design and much more. https://icons.theforgesmith.com
![Forge_Icons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/31a7c0c8-24f7-8759-4a5a-5badf484458d.png)

### Basicons
- Basicons - Basic icons for product design & development https://basicons.xyz
![Basicons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/8f6eb159-5c8a-ee22-6d9c-e751de2e5058.png)

### Teenyicons
- Teenyicons — Tiny minimal 1px icons https://teenyicons.com
![Teenyicons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304/639add99-4d62-de79-b9b4-1d69035b0d9c.png)
【oracle】スキーマのコピーをPCで実行する

# はじめに
筆者はなんちゃってDBAをしています。
個人の感想ですが、開発者に任せてもいいかなと思っていたことを、メモとして残したいと思います。

開発時にDBスキーマとかテーブル定義などデータ環境は、DBAが作ってくれますよね。
複数人での開発の場合、使うテーブルが重複して窮屈だったりします。
そのような時、テスト用の個人スキーマを準備してくれる現場もあると思います。
今回はあくまでも、そのような環境でかつテストDBを前提に記述します。

**※勝手にやると怒られるかも知れないため、ルールが不明なときはDBAに確認しましょう。**

DBスキーマのコピーは、`データパンプ（datapump）`を使うのが一般的だとおもいますが、DBサーバーに入れないためDBAにいちいちお願いするのが面倒だったりしませんか。

そんな時、`PC`から`インポート（imp）/エクスポート（exp）`を使ってスキーマをコピーするとこができます。
※PCにオラクルのクライアントがインストールされている前提です。

ここで利用するツールは、下記です。
**・sqlplus**
**・exp（エクスポート）**
**・imp（インポート）**

# 手順（sqlplus）
まずは、個人用スキーマを準備します。
`コマンドプロンプト`で実行していきます。
**①SYSTEM権限でログイン**
sqlplusにログインします。

```
sqlplus system/[パスワード]@[接続先名]
set linesize 1000  //おまじない
set pagesize 0 //おまじない
show user //おまじない
```

**②接続確認**
これからドロップする個人用のスキーマに接続している人がいないか確認します。接続中だとスキーマをドロップできないため接続を切ってもらいます。
表示されている情報で誰がつないでいるかわかります。ほとんどの場合、一人事故です。自分がアプリ立ち上げていたり、参照ツールが接続していたりします。

```
SELECT USERNAME,OSUSER,MACHINE,PROGRAM,status FROM V$SESSION where username = '[個人スキーマ名]';
```

・強制的に接続を切るには、`kill`コマンドを使います。

```
select sid, serial#, username, program, status from v$session where username = '[個人スキーマ名]';
//SIDとシリアルNoを確認します。列名は、(sid, serial#)です。
alter system kill session '404, 116';   //(sid, serial#)をセットして実行します。
```

**③スキーマのドロップ（削除）**
個人用のスキーマを削除します。
初めて作る場合は、削除対象がないので飛ばします。

```
drop user [個人スキーマ名] cascade ;
```

**④スキーマの作成**
個人用のスキーマを作成します。

```
CREATE USER [個人スキーマ名] IDENTIFIED BY [パスワード（個人スキーマ接続用）]
DEFAULT TABLESPACE "DATA"
TEMPORARY TABLESPACE TEMP
QUOTA UNLIMITED ON "DATA";
```

**⑤権限付与**
個人スキーマは、何ができるかを権限付与します。テスト用なので色々つけておきます。

```
GRANT
 ALTER SESSION,
 CREATE SESSION,
 SELECT ANY SEQUENCE,
 RESOURCE,
 EXECUTE ANY PROCEDURE,
 DBA,
 CREATE TABLE,
 CREATE MATERIALIZED VIEW
TO
  [個人スキーマ名];
```

ここまでで、個人用スキーマの準備ができました。
exitでsqlplusを終了します。

# 手順（インポート/エクスポート）
sqlplusは、終了しましたか。

ここからが、コピーの開始です。
コマンドプロンプトで`インポート（imp）/エクスポート（exp）`をします。

**①エクスポート（exp）**
データをPC上に`エクスポート`する。

```
exp system/[パスワード]@[接続先] file=[PC上のパス]\[エクスポートファイル名].dmp owner=[コピー元のスキーマ名] log=[PC上のパス]\[エクスポートログファイル名].log
```

**②インポート（imp）**
`エクスポート`したファイルを参照して、個人用スキーマに`インポート`する。

```
imp system/[パスワード]@[接続先] file=[PC上のパス]\[エクスポートファイル名].dmp fromuser=[コピー元のスキーマ名] touser=[個人スキーマ名] ignore=y log=[PC上のパス]\[インポートログファイル名].log
```

# 最後に
これでコピー元のスキーマから、個人スキーマにレコードも含めてまるまるコピーできました。
できたけどアプリの実行中にエラーが出るっていう場合は、権限不足のことが多かったです。
oracleは何をするにも権限が必要なのでDBAに確認しましょう。


以上ですが、参考になれば幸いです。
インスタンス変数 と attr_* について


## 概要

便利な機能であっても、少なからずデメリットも発生することがあると思います。

なので使う側はメリット・デメリットのバランスを判断して、適切に実装を行うことができるようになる必要があるのでは？
と思い、記事にまとめてみました。

実際に保守しづらさ のほうが勝っているケースがあり、改めて必要性があるのか？を検討するための参考になればと思います

## まずattr_*を使うとどうなるか？

`attr_reader :name` とすることで引数の名称でgetterメソッドが定義されます

```ruby
def name
  @name
end
```

`attr_writer :name` とすることで引数の名称でsetterメソッドが定義されます

```ruby
def name=(val)
  @name = val
end
```

`attr_accessor :name` はreaderとwriterの複合メソッドです

通常、インスタンス変数はインスタンスの内部にて `@hoge` でアクセスできるものがpublicでメソッドが定義されるため外部からインスタンス変数の値を触ることができるようになります。

この時`private`を使用することによってprivateでメソッドを定義させることも可能です。

```ruby
private
attr_reader :hoge
```

## メリットとデメリットについて

### メリット

#### 外部からの呼び出し

本来の用途である、`public`メソッドとして切られるため外部からの使用ができます
※privateにもできます

ここは皆さんご存知のとおりでしょう。

#### 改修のしやすさ

```ruby
class Hoge
  private
  attr_accessor :hoge

  def initialize(hoge:)
    @hoge = hoge
  end

  def connect
    Service.call(hoge: hoge) # <- ココ
  end
end
```

このような実装になっているとき、

```ruby
def hoge
  @hoge + 1
end
```

のように改修する必要が出たときにオーバーライドすることで修正はしやすくなります。

### デメリット

#### スコープの意識

`public`か`private`かなどを正しく考える必要がでる

#### メソッドの定義

メソッドを不用意に定義することで、メソッド名が競合してしまう可能性

#### 可読性

- オーバーライドできるということは、メソッドがオーバーライドされていないか？を確認する必要がでる => 可読性が下がる

## 例

```ruby
class Hoge
  include Hoge::XXXable
  include Hoge::ZZZable

  private
  attr_accessor :hoge

  def initialize(hoge:)
    @hoge = hoge
  end

  def connect
    Service.call(param: param)
  end
end

module Hoge::XXXable
  include ::YYYable
  def param
    {
      hoge: hoge # <- ココ
    }
  end
end
```

このように対象のクラスにincludeされる前提のモジュール（切り出しモジュール）に対して
インスタンス変数を参照しているだけだがメソッド呼び出しにできます

これが 

```ruby
module Hoge::XXXable
  include ::YYYable
  def param
    {
      hoge: @hoge # <- ココ
    }
  end
end
```

となっていれば「includeして読み込まれるクラスのインスタンス変数をセットしている」とモジュール内のソースを見るだけでパッとわかります。
※インスタンス変数をほかのクラスやモジュールで直接触るようなものは書きたくない　という意味であれば気持ちは分かりますが。

しかし、これがattrのgetterメソッドとなっていることによって、`XXXable`のモジュールを見るだけだと、`hoge`は一体どこで定義されているメソッドなのか？が分かりません。
そのため下記のどこか？を探す作業が発生してしまいます。
- `XXXable`内で定義されているか
- `XXXable`にてincludeやextendされているモジュールの中
- `XXXable`をincludeしている側のクラスやモジュール
- `XXXable`をincludeしている側のクラスやモジュールが読み込んでいるモジュール

## 結論

メリットで挙げた、**保守がしやすくなる** というのは上書きが簡単 という意味では当てはまりますが、
その必要性が現段階で想定できないようなケースであれば、逆に **保守がしにくく** なっていないでしょうか？


使う際には こうしたデメリットが大きくなるケースではないか？ を今一度考えながら使用するかどうかを検討していき
よりよいプログラムを書いていきたいなと思います
leafletを鍛える。その31

#概要

leafletを鍛えてみた。
植生地図が欲しい。

#写真

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/cb0abf77-9ce2-f0ef-5df8-4a60e80463e1.jpeg)

#サンプルコード


```

var map = L.map('map').setView([37.9748331, 140.057], 7);
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/gmld_ptc2/{z}/{x}/{y}.png', {
    attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
}).addTo(map);


```

#成果物

https://embed.plnkr.co/plunk/4UxJgkJlp185XqDB

以上。
近況

何か月もなんも書いていなかった。
3週間シフトで2週間在宅ワークしてんのに、あまりQiitaにかけるような事していない。

<h1>保守しかやってねえ！</h1>
仕事だから仕方ないんだけど。
作業はつまらないし、3次受け下流SIerなのでプロパーに提案の一つも通せないYesマンモードになってしまっている。

<h1>PCは触ってるけどハードばかりやん！</h1>
ついにPCが発光し始めました。MOD PCとして人に見せられるまで頑張ります。
とりあえず次はフル水冷。
あとラズパイほぴぃ。

<h1>そもそも技術的な種が頭から出てこない</h1>
Qiita見てるとポンポンアイデアが出てくる人が多くてうらやましいです。
これが若さか・・・。

何も書かないとQiita運営にBANされたら怖いので書きました。
もしかしたら技術的な記事じゃないじゃんって記事がBANされるかもしれません。

しかし、記事を書こうと思い立つときはいつも古戦場の時期だなぁ。
Windowsフォームアプリで黒字が白字になる謎現象との闘い（ActiveCaptionText）

あるWindowsフォームアプリケーションでtooltipを使っています。
ユーザーからtooltipの字を大きくできませんか？と要望がありました。

以下の方法で対応
tooltip.OwnerDraw=True
としてから、
tooltip.Drawイベントのハンドラに

```
        Dim sf As StringFormat = New StringFormat()
        sf.LineAlignment = StringAlignment.Center
        sf.FormatFlags = StringFormatFlags.NoWrap
        Dim f As Font = New Font("MS UI Gothic", フォントのサイズ)
        e.DrawBackground()
        e.DrawBorder()
        e.Graphics.DrawString(e.ToolTipText, f, Brushes.ActiveCaptionText, e.Bounds, sf)
```

としました。

Win10の開発環境で確認してリリースしたところ「tooltipに文字が表示されてないです（枠と背景と枠は表示される）」との報告が。

この事象が発生したのはWin7のマシンで、しかも全部でなく一部、という非常に嫌なパターンです。

「tooltipに文字が表示されてない」の画面を、よーーーく見ると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249926/d1103452-9408-92a3-3661-69eaabd9ebf8.png)

なんかシミ（笑）のような白いのがうっすら見えるようなみえないような…
これ、文字は表示されています。でもなぜかフォントカラーが白い（開発時は黒だった）。

DrawStringで使用した

```
Brushes.ActiveCaptionText
```
これが悪さをしていました。

Win10や通常のWin7ではこれは黒です。
しかしWin7のディスプレイの個人設定のテーマで「クラシック」を選んでいると、白になってしまいます。

```
Brushes.Black
```
としましたら、解決。
なんで最初からこうしなかったのかというと、どこかのサンプルからコードをコピペしたからです。気を付けないと。

Windowsのシステムカラーが環境によってどう変化するかをまとめているサイトがあればと思ったのですが、見つかりませんでした。機会があればもう少し調べようと思います。
【初心者】java開発ツールをcloud9 開発環境にインストールする。

# はじめに

AWScloud9の導入編はこちら
https://qiita.com/tu-kun/items/d7b4f1fa19cc93bc5b75

java開発ツールのインストールにあたって、参考にさせていただいた記事等はこちら
https://qiita.com/tu-kun/items/91efb172f7dd7501602e


わかりやすくて、とても助かりました。ありがとうございます。

#この記事ですること
####【目的】
javaを学習するため、javaの開発ツールをインストールする。
※駆け出しの私が、どんな風に調べて作業していくかを逐一書いています。
※<脱線></脱線>：個人的な脱線。即スクロール推奨。

####【開発環境】
筆者：駆け出し（プログラミング学習２ヶ月め。元々Ruby、初java）
MacBookpro
cloud9


#下調べ（インストール作業に移るまで）
####【ぐぐる】
　インストール方法をぐぐる。
　キーワードは「java、cloud9」。
　すると、いくつか検索結果が出てきました。

####【何はともあれAWS公式サイト様】
　一番トップに出てきたのが、AWSの公式サイトだったので、クリック。
　中身をざっと見て、基本的にこの流れに沿って、インストールしていくことに。
　...がその前に。

####【もう少し他の記事も見てみよう】
　とりあえず、AWSの公式サイト以外で、インストール方法の記事をチェックします。
　もちろん、AWS公式サイト様を疑ってるわけじゃないんです。

　私の場合、これまでの経験上一つの記事だけで独断先行してしまうと、あんまりいい結果になった試しがない...。流石に学習しました。

#作業開始

　ここからは、AWS公式サイトの説明書通りにインストールしていきます。
　途中で予想外の出来事が起こった場合に、再度ググることとします。

####【作業の流れ】
　・前提となる開発環境確認
　・java開発ツールが既にインストール済か確認
　・最新のセキュリティ更新、バグ修正がインストール済か確認
　・java開発ツールであるOpen JDKをインストール
　・デフォルトの Java 開発ツールセットを OpenJDK 8 に切り替えるか、アップグレード
　・バージョン確認

　 <脱線>
　 　ん？切り替える作業...インストールして終わりでは？
　 　そうです（←記事みた）。
　 　インストールしたら、「切り替える」作業が待っています。
　 　早とちりしてはいけません。私がよくやってしまうことです。
 　</脱線>


####【前提となる開発環境確認】
１、既存のAWS cloud9 EC2 開発環境がある。　→YES

　<脱線>EC2って何？　cloud9を使っているのに、理解していない。それが私。
　「Amazon Elastic Compute Cloud」の略称
　「Elastic」：弾力性のある、伸縮性のある
　AWSで利用できるシステムの一つ。仮想サーバを構築することができる。
　ユーザの必要に応じてスペックを変化させることができる。
　</脱線>

２、既存の環境に既に開いている AWS Cloud9 IDE がある。　→YES

####【java開発ツールが既にインストール済か確認】
　まず、cloud9のターミナルを開き、以下のコマンドを実行します。

```
$ java -version
```

　出力に Java(TM)、Java Runtime Environment、Java SE、J2SE、または Java2 から始まる値が含まれている場合は
 ・OpenJDK がインストールされていない
 ・デフォルト Java 開発ツールセットとして設定されていない
というケースになるので、インストールが必要です。

　ということで、実行後、結果を見てみると...

java 確認

```
$ java -version
java version "1.7.0_181"
OpenJDK Runtime Environment (...)
OpenJDK 64-Bit Server VM (...)
```

javac確認

```
$ javac -version
javac 1.7.0_181
```

これで「インストールされていない！！」ということが、無事確認できました。

####【最新のセキュリティ更新、バグ修正がインストール済か確認】

　最新のセキュリティ更新およびバグ修正がインストールされていることを確認します。
　update コマンドを使用して yum ツール (Amazon Linux 用) または apt ツール (Ubuntu Server 用) を実行する。
　
<脱線>
　私の場合は「Amazon linux」で良かったような？？
　念のため、確認。

``` 
　$ cat /proc/version
  Linux version 4.14.186-110.268.amzn1.x86_64 (...)
```
　よし、ちゃんとlinux。
  </脱線>

　 yum ツール実行。

```
　 sudo yum -y update
```

####【java開発ツールであるOpen JDKをインストール】

OpenJDK 8 をインストールします。

```
sudo yum -y install java-1.8.0-openjdk-devel
```

####【デフォルトの Java 開発ツールセットを OpenJDK 8 に切り替えるか、アップグレード】

　--config オプションを使用して update-alternatives コマンドを実行します。

　まず、javaから。

```
　sudo update-alternatives --config java
```

　こちらを実行すると、一番下あたりに、

```
*  1           /usr/lib/jvm/jre-1.7.0-openjdk.x86_64/bin/java
 + 2           /usr/lib/jvm/jre-1.8.0-openjdk.x86_64/bin/java

Enter to keep the current selection[+], or type selection number:
```

と出力されます。
　今回、「１.８...」の方を入れたいので、「number:」の後ろに「２」を入力します。

```
Enter to keep the current selection[+], or type selection number:2
```
　
実行して完了。

　javacも同様に実行します


####【バージョンの確認】

```
java -version
javac -version
```

#完了
java開発ツール無事、インストールできました。
AWS公式サイトの説明書には続きがありますが、インストール作業自体は一旦ここまで。