OmniAICreator/Qiita-1.07M huggingface dataset:
高位合成言語アセンブラを作る。 その6

#概要

高位合成言語アセンブラを作る。
pythonで、真理値表から論理式、求めてみた。

#サンプルコード

```
import sympy as sym

#xor
print (sym.POSform(['a', 'b'], [[1, 0], [0, 1]]))
#or
print (sym.POSform(['a', 'b'], [[1, 1], [0, 1], [1, 0]]))
#and
print (sym.POSform(['a', 'b'], [[1, 1]]))
#nand
print (sym.POSform(['a', 'b'], [[0, 0], [0, 1], [1, 0]]))
#nor
print (sym.POSform(['a', 'b'], [[0, 0]]))

print (sym.POSform(['a', 'b', 'c'], [[1, 1, 1]]))
```

#実行結果

```
(a | b) & (~a | ~b)
a | b
a & b
~a | ~b
~a & ~b
a & b & c

```

以上。
🔰初心者向けこれだけは使えるようになろうGitHubコマンド

#はじめに
現在転職の為に勉強しているのですが、GitHubの知識０から苦労しながら覚えたコマンドを他の初心者の方たちにも共有できたらなと思い記事を作成しました。
かくいう自分も初心者で未経験なので細かいところは間違っているかもしれませんが、その際はご指摘いただけると助かります。

#よくでる単語の意味
①コミット
ファイルの変更や追加を保存すること

②プッシュ
ローカルリポジトリでコミットした内容をリモートリポジトリに反映させるためのプルリクが作れる

③プルリク
プルリクエストの略。
プルリクを作ることで他の方にコードレビューしてもらえる。
GitHubサイトから操作して作成できます。

④マージ
子ブランチから親ブランチに更新内容反映させる。

⑤ローカルリポジトリ・リモートリポジトリ
例えるなら、スマホのストレージと、クラウドストレージみたいな関係。

#コマンド
これから新たに機能実装する状態だと仮定しています。

```
git checkout (master or main) //明示的に親ブランチ指定
git checkout -b 作業ブランチ名 //-bを付けることで作成しつつ移動。
//機能実装完了～～
git status //更新状態確認
git add ファイル名 //statusで出てきたファイル名コピペでOK
git commit -m "コミットコメント" //コメントはプルリク内容が明示されていると尚良
git push origin 作業ブランチ名 //変更点をプッシュする
//WEBサイトにてプルリクエスト作成。マージボタン押してマージしたら
git pull origin 親ブランチ名 //ローカルの親ブランチをリモートと同じにする。
```

#最後に
後発者の方々の参考になれば幸いです。
FirestoreのGUIクライアント一つだけあります

# FirestoreのGUIクライアントはやく言いたい

[SQLTabs](https://github.com/sasha-alias/sqltabs)というGUIクライアントがあります。

インストールして、アドレスバーにFirestoreのDatabaseURLを入力し、service-account.jsonのローカルパスを指定すると、繋がります。

# 機能

普通にJSONでdocを取得もできますが、`select()`でフィールドを指定すればRDBライクに見ることができます。
この状態にしていれば、カラムのところをクリックしてorderもできます。
(`.orderBy()`はできないです)

![Screen Shot 2020-11-01 at 4.05.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174325/b3218376-41d2-2171-5428-ac036e556beb.png)

また、Shareボタンを押せば、クエリの実行結果がweb上に公開されるかたちで共有できます。

![Screen Shot 2020-11-01 at 4.10.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174325/fa0afbc3-7818-ba48-68f4-26eb35dce242.png)

# おわり

FirestoreのGUIクライアントとしてしか使っていませんが、Postgresとかでも使えるようです。
あまり多機能ではないですが、webでShareできるのは便利だと思いました。
FirestoreのGUIクライアントが一つだけじゃなかった場合は教えていただけると嬉しいです。

# 追記

有料のはあります
https://firestudio.app/
ViewModelを使ったAndroidプロジェクトセットアップのチートシート

いつもドキュメントを探してググりまくっているので、ここにまとめる。

## ViewModel

- ViewModelを使いたい
- `val viewModel: MyViewmodel by viewModels()`を使いたい

```gradle
dependencies {
    implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.1'
    implementation 'androidx.activity:activity-ktx:1.2.3'
    implementation 'androidx.fragment:fragment-ktx:1.3.3'
}
```

## Data binding & View binding

どちらか、使いたい方だけ選ぶ。

```gradle
android {
    buildFeatures {
        viewBinding true
        dataBinding true
    }
}
```

Data bindingを使う時は、先頭部分に`kotlin-kapt`の指定も追加する必要があります。

```gradle
plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-kapt' // これを追加
}
```

## Coroutine, Flow

最近はLiveDataよりもCoroutine, Flowを使いたいので、以下も入れるのが良いでしょう。

```gradle
dependencies {
    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.4.2'
    implementation 'androidx.lifecycle:lifecycle-livedata-ktx:2.2.0' // Flow.asLiveData()とか
}
```
【Kotlin】リフレクションで拡張関数を呼び出す/Javaのリフレクションで呼び出す

拡張関数について、`Kotlin`のリフレクションでの取得方法と呼び出し方法、及び`Java`のリフレクションで呼び出す方法をまとめます。
[`companion object`に定義された関数を呼び出す](https://qiita.com/wrongwrong/items/8bc9d0955d0b11014670)のに比べると`EXTENSION_RECEIVER`周りの扱いが少し複雑ですね。

```kotlin
import org.junit.jupiter.api.Assertions.assertEquals
import org.junit.jupiter.api.Test
import java.lang.reflect.Method
import kotlin.reflect.KFunction
import kotlin.reflect.full.memberExtensionFunctions
import kotlin.reflect.jvm.javaMethod

class TargetClass(val i: Int)

fun TargetClass.topLevelTimes(j: Int): Int = i * j

class Test{
    fun TargetClass.instanceTimes(j: Int): Int = i * j

    @Test
    fun test() {
        val target = TargetClass(2)

        // トップレベルに定義/インスタンスから取得した場合
        val topLevelReferenceFun: KFunction<Int> = target::topLevelTimes
        assertEquals(4, topLevelReferenceFun.call(2))
        val topLevelReferenceMethod: Method = topLevelReferenceFun.javaMethod!!
        assertEquals(4, topLevelReferenceMethod.invoke(null, target, 2))

        // トップレベルに定義/クラスから取得した場合
        val topLevelFun: KFunction<Int> = TargetClass::topLevelTimes
        assertEquals(6, topLevelFun.call(target, 3))
        val topLevelMethod: Method = topLevelFun.javaMethod!!
        assertEquals(6, topLevelMethod.invoke(null, target, 3))

        // インスタンスからこの形で取得するのはコンパイルエラーになる
        // val instanceReferenceFun: KFunction<Int> = target::instanceTimes

        // インスタンスに定義した場合（この例ではインスタンス内の拡張関数が1つなためsingleで取得）
        val instanceFun: KFunction<Int> = this::class.memberExtensionFunctions.single() as KFunction<Int>
        assertEquals(8, instanceFun.call(this, target, 4))
        val instanceMethod: Method = instanceFun.javaMethod!!
        assertEquals(8, instanceMethod.invoke(this, target, 4))
    }
}
```
AWSにDBサーバーの構築とWebサーバーとの接続を行う

# はじめに
AWSはAmazon Web Servisesの略で、Amazonが提供しているクラウドサーバーのサービスです。
AWSへの理解度を高めるために、学んだことをアウトプットします。
今回はネットワークとの関係を記載します。


# 今回の流れ
前提として、AWSにVPCとパブリックサブネットはすでに作成している状態とします。
VPCのIP範囲 => 10.0.0.0/16
パブリックサブネットのIP範囲 => 10.0.1.0/24
参考) https://qiita.com/daisuke30x/items/7501f9018386240c09a8

* プライベートサブネットの作成
* DBサーバーの作成
* DBサーバーとWebサーバーとの接続
* DBサーバーへ接続する設定

# プライベートサブネットの作成

### プライベートサブネットとは
インターネットから接続できないサブネットのことです。
インターネットから直接接続してほしくないサーバーを作りたい時に作成します。
例えば、DBはインターネットから直接接続してほしくないものの典型です。

### プライベートサブネットの作成手順

① AWSマネジメントコンソールで「VPC」ページに遷移し、サイドバーの「サブネット」をクリックします。

②右画面の「サブネットの作成」をクリックします。

③「サブネット名」と「アベイラビリティーゾーン」を任意で入力し、「CIDRブロック」に「10.0.0.0/24」の中のIP範囲を入力し、「作成」をクリックします。

※今回はサブネット名に「プライベートサブネット」、「アベイラビリティーゾーン」をパブリックサブネットと同じもの、「CIDRブロック」に「10.0.2.0/24」と入力します。


# DBサーバーの作成

### DBサーバーの作成手順

① AWSマネジメントコンソールで「EC2」ページに遷移し、サイドバーの「インスタンス」をクリックします。

② 右画面の「インスタンスを起動」をクリックします。

③ 「Amazon Linux 2 AMI」を選択します。

④ タイプを「t2.micro」を選択し、「次のステップ」をクリックします。

⑤ 「ネットワーク」に作成したVPC、「サブネット」に上記で作成したプライベートサブネット、「自動割り当てパブリック IP」に「無効化」を選択し、「ネットワークインターフェース」の「プライマリIP」にはサブネット「10.0.2.0/24」の中の好きなIPを入力します。

※「自動割り当てパブリック IP」に「無効化」を選択する理由は、インターネットから直接接続させないため、パブリックIPが不要だからです。
※今回、私は「プライマリIP」は「10.0.2.10」を入力します。

⑥ ストレージの追加は任意でサイズを変更して、「次のステップ」をクリックします。

※私はストレージはデフォルトの8Gのままにします。

⑦ タグの追加には「別のタグを追加」をクリックし、「キー」に「Name」、「値」に「DBサーバー」を入力し、「次のステップ」をクリックします。

⑧ 「セキュリティグループ名」に今回は「DB-SG」という名前を入力し、MariaDBの通信を許可するために、MariaDBの通信ポート「3306」を追加します。

※ 「Amazon Linux 2 AMI」で使われるDBはMariaDBです。
※ 「ルールの追加」をクリックし、「タイプ」に「MYSQL/Aurora」、「ポート範囲」に「3306」、「ソース」に「任意の場所」を入力（「0.0.0.0/0, ::/0」が自動で入ります。）し、「確認と作成」をクリックします。

# Webサーバーとの接続
DBサーバーを作成しましたが、現状Webサーバーからは独立している状態です。
DBサーバーとWebサーバーを接続します。


### DBサーバーとWebサーバーとの接続

①「EC2」ページの「セキュリティグループ」をクリックします。

②作成した「DB-SG」のセキュリティグループを選択し、「インバウンドルール」タブの「インバウンドルールを編集する」をクリックします。

③「ルールを追加」をクリックし、プロトコルに「すべてのICMP IPv4」を選択し、ソースに「任意の場所」を選択し、「ルールを保存」をクリックします。

④Webサーバーのセキュリティグループ（私の場合は「WEB-SG」）でも同様の作業を行います。


# DBサーバーへ接続する設定

DBサーバーはインターネットと接続されていないため、Webサーバーを踏み台として接続します。
要するに、Webサーバーに接続し、そこからDBサーバーに接続します。

①カレントディレクトリのキーペアファイル（私の場合は「my-key.pem」）を、Webサーバーにコピーします。
※WebサーバーからDBサーバーへ接続する場合は、Webサーバーにキーペアファイルを置いておく必要があるため。

```:ターミナル
% scp -i my-key.pem mykey.pem ec2-user@ec2-54-95-164-166.ap-northeast-1.compute.amazonaws.com:~/
(@以下はパブリックIPのDNSで、インスタンスによって異なります。)
```

②Webサーバーにログインします。

```:ターミナル
% ssh -i my-key.pem ec2-user@ec2-54-95-164-166.ap-northeast-1.compute.amazonaws.com
(@以下はパブリックIPのDNSで、インスタンスによって異なります。)
```

③Webサーバー内にコピーしたキーペアファイルの属性を変更します。

```:ターミナル
% chmod 400 my-key.pem
```
参考)https://qiita.com/daisuke30x/items/6928d7ba029698e7e681


④DBサーバーにSSH接続します。

```:ターミナル
% ssh -i my-key.pem ec2-user@10.0.2.10
```

これで、DBサーバーへログインできました。

#　次回
DBサーバーにMariaDBのインストール方法を説明します。

追記
AWSのEC2インスタンスにMariaDBをインストールし、DBサーバーにする方法
https://qiita.com/daisuke30x/items/3f71d95b30c317595d67

# 参考
「Amazon Web Services 基礎からのネットワーク＆サーバー構築」
著者：大澤文孝、玉川憲、片山暁雄、今井雄太

# 最後に
本投稿が初学者の復習の一助となればと幸いです。
Vue + TypeScript の linter 設定メモ

# はじめに
ライブラリの検証や学習のために Vue CLI でサンプルアプリケーションを作るのですが、初期設定だと思うようにフォーマットすることができなかったので色々模索してみた結果をまとめます。

# 方針

- できるだけシンプルに
- `<template>` は Vue.js の公式スタイルガイドに合わせる
- `<script>` は ESLint と Prettier でしっかり整形

# 結論
```package.json
{
  "name": "vue-linter-setup",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.6.0",
    "@typescript-eslint/parser": "^4.6.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "eslint": "^7.12.1",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-prettier-vue": "^2.1.1",
    "eslint-plugin-vue": "^7.1.0",
    "prettier": "^2.1.2",
    "typescript": "~3.9.3",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}
```

```.eslintrc.js
module.exports = {
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/recommended",
    "plugin:prettier-vue/recommended",
    // <template> に prettier を適用したくない場合は下記を記述しない
    // "prettier/vue"
  ],
  rules: {
    "prettier-vue/prettier": [
      "error",
      {
        semi: false,
      },
    ],
  },
  settings: {
    "prettier-vue": {
      SFCBlocks: {
        template: false, // <template> に prettier を適用しない
        script: true,
        style: true,
      },
    },
  },
  env: {
    node: true,
  },
}
```

# ポイント
### `<template>` には ESLint のみを適用
`plugin:vue/recommended` を設定すると、[Vue スタイルガイド](https://jp.vuejs.org/v2/style-guide/index.html)の優先度 A-C のすべてのルールが適用されます。 `<template>` のフォーマットはこれだけで十分だと感じました。むしろ prettier を実行するとこの良い感じのフォーマットが崩されてしまいます。

色々探してみた結果、eslint-plugin-prettier を拡張した [eslint-prettier-vue](https://github.com/meteorlxy/eslint-plugin-prettier-vue) を導入し、

```.eslintrc.js
  settings: {
    "prettier-vue": {
      SFCBlocks: {
        template: false, // <template> に prettier を適用しない
        script: true,
        style: true,
      },
    },
  },
```
と設定することで `<template>` のみ prettier の対象外とすることができました。

この時 `prettier/vue` を edtends に記述するとうまく動かないので注意してください。

```.eslintrc.js
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/recommended",
    "plugin:prettier-vue/recommended",
    // <template> に prettier を適用したくない場合は下記を記述しない
    // "prettier/vue"
  ],
```

### 行末のセミコロンは付けない
これは好みの問題ですが、prettier はデフォルトだとセミコロンを行末に付けてしまうのでオフにしました。今後他にも追加、除外したくなるオプションはいくつかあるかもしれません。

```.eslintrc.js
  rules: {
    "prettier-vue/prettier": [
      "error",
      {
        semi: false,
      },
    ],
  },
```

### VSCode で保存時の自動整形を有効にしておくとより良い

```settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```

# おわりに
linter の世界は流行り廃りが早いのでこの設定もすぐに使えなくなるかも...。もしくはもう既に非推奨かもしれません。自分のために書きましたが誰かの参考になれば幸いです。
OutlookスケジュールのTeams会議URLのQRコード化

OutLookにエントリーしているTeams会議URLをQRコード化します。
※必要になったので作りました。

■処理内容
・表示しているメール/スケジュールからTeamsURLを抽出します。
・抽出したURLをExcelを使用してQRコード化します。

■使い方
・QRコード化したいスケジュール/メールを表示してください。
・ALT+F8でマクロを起動してください。

■マクロ
以下をOutlookの標準モジュールに配置してください。

■その他
・Office365で稼働します。
・「microsoft Access BarCode Control 14.0」の参照設定は不要です。

```
Sub QRcodeCreate()

'--- 開いているメール、スケジュールを対象にする ---
Set a = Application.ActiveInspector
Set b = a.CurrentItem


'--- TemamsのURLを取得 ---
Set r = CreateObject("VBScript.RegExp")
r.Pattern = "Microsoft Teams 会議に参加[^<]+<([^>]+)>"
r.IgnoreCase = True
r.Global = True

Set x = r.Execute(b.Body) '--- URL取出し ---

For Each y In x
    c = y.SubMatches(0)  '--- サブマッチ ---
    Exit For
Next y


'--- Excel起動 ---
Set bk = CreateObject("Excel.Application")
bk.Application.Visible = True
bk.Application.Workbooks.Add


'--- 上部のメニュー非表示 ---
If bk.Application.CommandBars.GetPressedMso("MinimizeRibbon") = False Then
    bk.Application.CommandBars.ExecuteMso "MinimizeRibbon"
End If


'--- URL貼り付け ---
Set st = bk.WorkSheets.Item(1)
st.cells(15, 1) = c
With st.Range("A15:G25")
    .WrapText = True
    .MergeCells = True
End With


'--- QRコード貼り付け ---
'ClassType,FileName,Link,DisplayAsIcon,IconFileName,IconIndex,IconLabel,Left,Top,Width,Height
With st.OLEObjects.Add("BARCODE.BarCodeCtrl.1", , , , , , , 20, 20, 200, 200)
    .Object.Style = 110
    .LinkedCell = "A15"
End With


'--- 後処理 ---
Set st = Nothing
Set bk = Nothing
Set x = Nothing
Set r = Nothing

End Sub
```

おまけです。「VBS⇒EXCEL」で実行するVBS版です。(入力はOutllookでなくExcelです）

```
Set bk = CreateObject("Excel.Application")
bk.Application.Visible = true
bk.Application.Workbooks.Add()


If bk.Application.CommandBars.GetPressedMso("MinimizeRibbon") = False Then
  bk.Application.CommandBars.ExecuteMso "MinimizeRibbon"
End if


Set st = bk.WorkSheets.Item(1)
st.cells(15,1) = "http://ddff"  '☆☆←ココにURLをセットして。

'ClassType,FileName,Link,DisplayAsIcon,IconFileName,IconIndex,IconLabel,Left,Top,Width,Height
'ClassType:="BARCODE.BarCodeCtrl.1",,, Left:=20, Top:=20, Width:=150, Height:=150

Set bb = st.OLEObjects.Add("BARCODE.BarCodeCtrl.1",,,,,,,20,20,150,150)
bb.Object.Style = 110
bb.LinkedCell = "a15"

Set bb = nothing
Set st = nothing
Set bk = nothing


'microsoft Access BarCode Control 14.0は不要。
```

さらにおまけでExcel単独の場合です。「microsoft Access BarCode Control 14.0」の参照設定は不要です。

```
Sub aa() 
    Set bb = ActiveSheet.OLEObjects.Add(ClassType:="BARCODE.BarCodeCtrl.1", Left:=20, Top:=20, Width:=150, Height:=150)
    bb.Object.Style = 110
    bb.LinkedCell = "a15"  '☆☆←ここにURLがセットされているセルを指定
End Sub
```
【Swift】キャプチャ・リスト

#この投稿は何？
Swiftプログラミングにおけるキャプチャ・リストについて、[公式ドキュメントの内容](https://docs.swift.org/swift-book/ReferenceManual/Expressions.html#ID393)を独自に翻訳したものです。

###環境
macOS 10.15.7
Xcode 12.1
Swift 5.3

#キャプチャ・リストとは
既定の動作として、クロージャ式は「その周囲のスコープにある定数および変数」を**強い参照**によってキャプチャします。キャプチャリストを使用すると、クロージャで値をキャプチャする方法を明示的に制御することができます。

キャプチャ・リストは、パラメータのリストの前に、「角括弧で囲まれたカンマで区切ったリスト」として記述されます。キャプチャ・リストを使用する場合、パラメータ名、パラメータおよび戻り値の型を省略していても、`in`キーワードを常に使用します。

`{ [value1, value2, ...] in STATEMENT }`

キャプチャ・リストのエントリは、クロージャ作成時に初期化されます。キャプチャ・リストの各エントリとなる定数は「周囲のスコープで同じ名前を持つ定数または変数」の値に初期化されます。
例えば、以下のコードでは、`a`はキャプチャリストに含まれていますが、`b`は含まれていません。

````swift:
var a = 0
var b = 0
let closure = { [a] in    // aは0で初期化される
    print(a, b)           // スコープ外でaを変更しても、影響しない
}

a = 10                    // この変更は、キャプチャ・リストのaに影響しない
b = 10
closure()
// Prints "0 10"
````

スコープ内の`a` は、クロージャが作成されたときに「スコープ外の`a`の値」で初期化されますが、それらの値は特に繋がっているわけではありません。つまり、スコープ外の`a`を変更しても、スコープ内の`a`には影響しませんし、クロージャ内の`a`への変更がクロージャ外の`a`に影響することもありません。対照的に、スコープ外には`b`という名前の変数が1つしかないので、その変更はクロージャの内側と外側のどちらにも影響します。

ただし、キャプチャされた変数が「参照型のデータ」だった場合、この区別はありません。
例えば、以下のコードでは、「スコープ外にある変数」と「スコープ内にある定数」に、の2つの`x`がありますが、どちらも参照型データなので同じオブジェクトを参照しています。

````swift:
class SimpleClass {
    var value: Int = 0
}
var x = SimpleClass()          // ひとつめの変数x（x.valueは0で初期化される）
var y = SimpleClass()
let closure = { [x] in         // ふたつめの定数x（x.valueは0で初期化される）
    print(x.value, y.value)    // スコープ外でxを変更すると、影響する
}

x.value = 10                   // スコープ外での変更が、キャプチャ・リストのxにも影響する
y.value = 10
closure()
// Prints "10 10"
````

式の値の型がクラスの場合、式の値への「弱い参照」をキャプチャするために、キャプチャ・リストで式を`weak`でマークできます。また、「所有されていない参照」をキャプチャするためには、キャプチャ・リストで式を`unowned`でマークできます。

````swift:
myFunction { print(self.title) }                    // 「強い参照」による値のキャプチャ（暗黙的）
myFunction { [self] in print(self.title) }          // 「強い参照」による値のキャプチャ（明示的）
myFunction { [weak self] in print(self!.title) }    // 「弱い参照」による値のキャプチャ
myFunction { [unowned self] in print(self.title) }  // 「所有しない参照」で値をキャプチャ
````

また、キャプチャ・リスト内の値に名前を付けて、任意の式をバインドすることもできます。「バインドした式」はクロージャが作成されたときに評価され、値は指定された強度でキャプチャされます。
例えば、以下のようになります。

````swift:
// "parent"として、弱い参照で"self.parent"をキャプチャする
myFunction { [weak parent = self.parent] in
    print(parent!.title) 
}
````

クロージャ式の詳細と例については、[クロージャ式](https://docs.swift.org/swift-book/LanguageGuide/Closures.html#ID95)を参照してください。
キャプチャリストの詳細と例については、[クロージャの強い参照サイクルの解決](https://docs.swift.org/swift-book/LanguageGuide/AutomaticReferenceCounting.html#ID57)を参照してください。
C#の配列

C#を始めたばかりで簡単なことも身についていないのでメモっておく。
プログラムにはつきものの配列。その配列について、本当に簡単なことをまとめてみた。

##初期化

```c#:その&nbsp;(1)
 // 普通に初期化
 // array (配列)
 string[] arr = { "トヨタ", "ホンダ" };
```

```c#:その&nbsp;(2)
 // 例えば Main(string args[]) の引数テストで代入したいときなど
 // args は arguments (引数) の略
 // VBと違い要素数が2つなら、そのまま2と書く
 string[] args;
 args = new string[2] { "日産", "マツダ" };
```

```c#:その&nbsp;(3)
 // 2次元配列の初期化
 string[,] arr = { { "GM", "フォード" }, { "BMW", "ベンツ" } };
```


```c#:その&nbsp;(4)
 // 要素数ゼロ
 string[] arr1 = { };
 string[] arr2 = Array.Empty<string>();
```

##要素数を数える

```c#:C#
 // forループなどで使う
 var hoge = arr.Length;
 hoge = arr2.GetLength(0); // 1次元
 hoge = arr2.GetLength(1); // 2次元
```

##繰り返し処理

```c#:C#
 foreach (string s in arr) 
 {
   // 何かの処理
 }

 // VBと違ってマイナスしなくていいのがいいね!!
 for (int i = 0; i < arr.Length; i++)
 {
   // 何かの処理
 }
```

##インデックス

```c#:3つの要素を持つ配列
 // 初期化時は要素数を3とする
 // 3つの要素なら、インデックスは 0、1、2
 string[] arr; 
 arr = new string[3] { "男", "女", "マツコ" }
 var hoge1 = arr[0];
 var hoge2 = arr[1];
 var hoge3 = arr[2];
 // var hoge4 = arr[3]; はエラー

 arr[2] = "009"; // 値設定
 var cyborg = arr[2]; // 値取得
```

```c#:2次元配列で値取得・設定
 arr[0][0] = "007"; // 値設定
 var SeanConnery = arr[0][0]; // 値取得
```

##ジャグ配列

```c#:C#
 // ジャグ配列の初期化
 string[][] arr = { new string[3] { "あ", "い", "う" },
                    new string[2] { "か", "き" },
                    new string[4] { "さ", "し", "す", "せ" } };

 // 2次元のサイズを後で決める
 string[][] arr2 = new string[3][];
 arr2[0] = new string[3];
 arr2[1] = new string[2];
 arr2[2] = new string[4];
```

##サイズ変更

```c#:C#
 // 要素数を10に変更する
 // VBの「ReDim Preserve」と等価で代入済みの値を維持する
 Array.Resize(ref arr, 10);
```

Arrayクラスでまだまだ色々できそうだが、今回はここまで:laughing:
【HTML】複数のclassの持たせ方

HTMLでclassを2つ以上持たせたいときは、以下のように記入します。

```html
<div class="class1 class2 ...classN">
```

コンマやセミコロンは使用せず、クラスとクラスの間にスペースを開けるだけ！

参考元
[How to assign multiple classes to an HTML container? [closed]](https://stackoverflow.com/questions/8722163/how-to-assign-multiple-classes-to-an-html-container)
【2020.12最新】PHPでGoogle Suggestを読み取る方法

こちらのGoogle Suggest APIを使って、
https://so-zou.jp/web-app/tech/web-api/google/suggest/
XMLを取得して簡単にデータ取れる！って思ってたんですが、初心者だからか引っかかる部分があり、変に時間を要してしまったので記録を残します。

https://yululy.com/google_suggest_api/
このブログの通りに入力し、phpで実行したら... なぜか実行できない。

何も表示されない＋こういうエラーが出る..。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/ffe107c9-25df-fc86-ec02-530027c69a43.png)


```
Uncaught TypeError: Cannot read property 'src' of null
    at Module.<anonymous> (commons.js:83)
    at __webpack_require__ (content.js:1)
    at Object.<anonymous> (commons.js:83)
    at __webpack_require__ (content.js:1)
    at Object.<anonymous> (commons.js:83)
    at __webpack_require__ (content.js:1)
    at Object.<anonymous> (commons.js:83)
    at __webpack_require__ (content.js:1)
    at Object.<anonymous> (commons.js:83)
    at __webpack_require__ (content.js:1)
(anonymous) @ commons.js:83
__webpack_require__ @ content.js:1
(anonymous) @ commons.js:83
__webpack_require__ @ content.js:1
(anonymous) @ commons.js:83
__webpack_require__ @ content.js:1
(anonymous) @ commons.js:83
__webpack_require__ @ content.js:1
(anonymous) @ commons.js:83
__webpack_require__ @ content.js:1
checkDeferredModules @ content.js:1
(anonymous) @ content.js:1
(anonymous) @ content.js:1
```

そして、たまたまHTMLの基本的な形のを入力したら普通に読み取ることができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/94a589d5-f093-b3aa-9c5c-d53d2ae49698.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/544dd735-f394-270b-5095-d42b0fd8b1b0.png)

phpって単体だと動作しないのかな..？
ありがとうございました。
Processing video library Windowsでも使えん問題

# 背景
以前MacOS(Catalina)にて[Processing Video library使えない問題について](https://qiita.com/kikpond15/items/9cb21d9091034bd3ae71)記事をまとめました。最近windowsPCを購入しProcessingのセットアップをしていましたら、windowsでも同じくvideo libraryが使えませんでした。

自分なりに原因を調査し、一応動くとこまでいったので、この記事にて共有したいと思います。
正直ちゃんとした原因が分かっておらず、その場しのぎの解決になっております。

#環境
windows10
Processing3.5.4
video library version2

#原因がよくわからない
video libraryのバージョンアップデートがProcessingIDEの方で出ていたので１から２へアップデートしましたら動かなくなりました。

と思ったら、たまに動く、、、

そしてまた動かなくなる、、、

#エラー内容
```
Could not find any devices
```
デバイスが見つからないと。

#試したこと
###認識されるカメラのリストをプリントしてみる。

```java
println(Capture.list());

//結果
//HD Webcam
```
一応カメラは認識されている模様。

###カメラデバイスを指定してやってみる

```java
cam = new Capture(this, 640, 480, "HD Webcam");
```
or

```java
String[] cameras = Capture.list();
cam = new Capture(this, 640, 480, cameras[0]);
```
動いた、、、けど二回目以降動かなくなる。
再接続するのに時間がかかってるのか？

###カメラリストが追加されまで繰り返す。
```java
String[] cameras = Capture.list();
while(cameras.length == 0){
  cameras = Capture.list();
}
cam = new Capture(this, 640, 480, cameras[0]);
```

とりあえずこれで連続で実行停止を繰り返してもエラーが出ませんでした。
本当に見つからない場合は無駄に繰り返し続けるので、時間などでbreakしてください。

#まとめ
とりあえず、その場しのぎの方法をとりましたが、他の解決方法などありましたら、また共有したいと思います。他に解決方法知っている人がいましたらコメントお願いします！

Processing４もベータ版出たんで、今後にも期待したいところですね。
Cookieとは

こちらの記事は簡潔に短くわかりやすい内容で投稿しますので、もっと詳しい内容について知りたい方は最後の参考元リンクよりご覧ください。
##結論
`Cookie`とは`クライアント(PCやスマホ)に保存された情報`のことです。
Cookieに似た機能として`SESSION`がありますが、これはCookieと違って`サーバー上に保存`されています。

・Cookieに保存されている情報
→Cookie名、訪問サイト、訪問回数、Cookieの有効期限など。

##Cookieが必要な理由
Webサイトは、`クライアント(PC)`が`サーバー`に`リクエスト(依頼)`し、`サーバー`が`レスポンス(返信)`することでブラウザに表示させています。
そして、この1往復で通信が完了される為、サーバーはどのページからアクセスされたのか`前の情報を知りません。`この状態を`ステートレス`と言います。
クライアントがリクエストする時に、前の情報をサーバーに教えて上げることで、サーバーは`前の情報を把握`する(`ステートフル`)ことができます。
この、前の情報をサーバーに教えてあげるのに`Cookie`が必要ということなのです。

##Cookieの事例
わかりやすい例で言うと、誰もが1度は経験のある通販サイトでの購入です。
購入までに、ログイン、商品をカートに入れるなどの様々な過程がありますよね。
普段は何気なくログイン、ログアウト、カートイン、購入数の変更などを行っていますが、Cookieが無いと前の情報を把握出来ない為、全ての機能が動作しないということなのです。

##まとめ
1.CookieはPCやスマホなどの`クライアント`に保存される。
2.`Cookieが無いと前の情報を把握出来ない`為、ログイン、カートイン、購入などの一連の動作を行うことが出来ない。

参考元はこちら
(https://qiita.com/7968/items/ce03feb17c8eaa6e4672#cookie%E3%81%A3%E3%81%A6%E4%BD%95)
(https://service.plan-b.co.jp/blog/dmp/13662/)
プロゲート【JavaScriptⅢ 学習コース】関数の基礎

# prorate:JavaScript 学習コース Ⅲ
## 関数
```javascript

// 関数の定義の仕方

const 定数名　= function(引数){
	// まとめたい処理
};

// 例

const introduce = function(){
	console.log("こんにちは");
	console.log("私はにんじゃわんこです");
};

introduce(値); // 関数の呼び出し

// アロー関数　ES6から導入された書き方
function() = () =>　

```


```javascript

// 引数を使った例

const introduce = function(name){
	console.log("こんにちは");
	console.log(`私は${name}です`);
};

introduce("ニンジャワンコ");
introduce("ひつじ仙人");

```

### 複数の引数を受け取る関数の呼び出し


```javascript

const introduce = function(name,age){ // コンマで区切る
	console.log("こんにちは");
	console.log(`私は${name}です`);
};

introduce("ニンジャワンコ",14); // コンマで区切る
introduce("ひつじ仙人",65);

```

## 戻り値

```javascript

const add = (a,b) =>{ 
	return a+b ;
};

const sum = add(1,3);
console.log(sum);

```

```javascript

const half = (number) => {
  return number / 2; // ()不要
};

const result = half(130);

console.log(`130の半分は${result}です`);


```

### true falseの戻り値

```javascript

const half = (number) => {
  return number % 2 === 0; // 2の倍数
};

console.log(check(6)); // true
console.log(check(7)); // false

```

##### returnの性質
※returnは、戻り値を返すだけでなく、関数の処理を終了させる性質も持っています。よって、returnの後にある関数内の処理は実行されない

```javascript

const check = (number) => {
   return number % 3 === 0; // 3の倍数
};

// if文の条件式で、checkを呼び出す
if (check(123)) {
  console.log("3の倍数です");
} else {
  console.log("3の倍数ではありません");
}

```

### 関数の中の定数

> 関数の引数や、関数内で定義した定数や変数は、その関数の中でしか使うことができません。
> 下の図の場合、introduceの中で定義されている定数nameは、この関数の中でしか使うことができません。このようなそれぞれの定数や変数の使用できる範囲のことをスコープと呼びます。
> 一方、関数の外で定義した定数や変数は、関数の中でも使うことができます。
> if文やwhile文でもスコープを作ります
> [-progate-](https://prog-8.com)


```javascript

const name = "にんじゃわんこ"; // 関数外の定数

const introduce = (name) => {
  // 「わたしは〇〇です」を出力してください
  console.log(`わたしは${name}です`);
  
};

introduce("ひつじ仙人"); //関数内の定数


console.log(name);　// 関数外の定数

```


## 総合演習

```javascript

const number1 = 103;
const number2 = 72;
const number3 = 189;


const getMax = (a,b,c) => {
  let max = a;
  
  if(max < b){
    max = b;
  }
  if(max < c){
    max = c;
  }
  
  return max;
  
}

const max = getMax(number1, number2, number3);
console.log(`最大値は${max}です`);


```
Microsoft 365 Outlookのメッセージフォント設定

# 前提

確認バージョン： 2009 (build 13231.20262) 64bit

# 設定場所

 > オプション→「簡単操作」→「ドキュメントの表示オプション」項→「ひな形およびフォント(F)」

# 備考

他のバージョンでは当該場所に存在しない可能性はあり。
イントラネットでOutlookの新バージョン配布を抑止している場合あり。

バージョンは「アカウント」ページ右下部を確認。

# その他参考

メッセージをプレーンテキストに強制するための設定が、以下に存在する

 > 「トラストセンター」→「トラスト センターの設定」ボタン→「電子メールのセキュリティ」行を選択→「テキスト形式で表示」項→「すべての標準メールをテキスト形式で表示する」チェックボックス
WSL2でDNSエラーを回避しつつGUIアプリを起動出来るようにする

# 目的
[以前の記事](https://qiita.com/chilchil0/items/9c7c56ad1cdafef389c4) でWSL2のdocker環境からGUIアプリを起動する方法について解説しました。

ただ、WSL2の正式版でDNSエラーでapt update時にerrorが出る問題を解決した際にWSL2で毎回DISPLAY設定を行わないとGUIアプリが起動出来なくなってしまったので、今回はその対応方法について解説します。（一応DNSエラーの回避策も記載しておきます。）
※WSL2の正式版の前からこの問題はあったかもしれませんが、その辺りは調べていません。

ちなみに前の記事はWindows HOMEで今回はProですが、HOMEでも同様に出来ると思います。
また、今回はWSL2上でのGUIアプリの起動であり、docker環境では確認していません。ただ、恐らく同様に出来ると思います。

# 参考にさせて頂いた記事
https://github.com/microsoft/WSL/issues/4285
https://cartman0.hatenablog.com/entry/2020/07/16/https://cartman0.hatenablog.com/entry/2020/07/16/WSL2でネットワークのドメインを解決できない場合
https://stackoverflow.com/questions/61110603/how-to-set-up-working-x11-forwarding-on-wsl2
https://github.com/microsoft/WSL/issues/4106

# 作業環境
* Windows10 Pro
  * バージョン:2004
  * OSビルドバージョン:19041
* WSL2 Ubuntu18.04

# 解決方法
## WSL2でネットワークのドメインを解決できない問題
いつ頃からかWSL2でapt updateを実施した際に以下のエラーが発生するようになりました。（正式版から？良くわかりません）

```
Err:1 http://archive.ubuntu.com/ubuntu bionic InRelease
  Temporary failure resolving 'archive.ubuntu.com'
Err:2 http://security.ubuntu.com/ubuntu bionic-security InRelease
  Temporary failure resolving 'security.ubuntu.com'
Err:3 http://archive.ubuntu.com/ubuntu bionic-updates InRelease
  Temporary failure resolving 'archive.ubuntu.com'
Err:4 http://archive.ubuntu.com/ubuntu bionic-backports InRelease
  Temporary failure resolving 'archive.ubuntu.com'
～以下略～
```

これはwsl2ではDNSサーバの設定であるresolv.confが自動的に生成されますが、その際の設定がHOST IPになる為、正常に名前解決が出来ません。（恐らく）
これを解決する為、以下のページで紹介されている方法を実施します。
https://cartman0.hatenablog.com/entry/2020/07/16/WSL2でネットワークのドメインを解決できない場合
簡単に記載しておきます。

* wslを起動して`/etc/wsl.conf`ファイルを作成します。ファイルの中身は以下です。

```
[network]
generateResolvConf = false
```
これで`resolv.conf`が自動生成されなくなります。

* 作成されている`resolv.conf`（恐らくシンボリックリンクとして作成されている）を削除し、新たに`resolv.conf`を作成します。ファイルの中身は以下です。

```
nameserver 8.8.8.8
```

GoogleのパブリックDNSを使用するように変更します。
上記設定後WSLを再起動する（ウィンドウを閉じて開きなおしても良い。）。
※もしうまく行かない場合はPCを再起動してみて下さい。

これでDNSサーバの設定ができドメイン名が解決できるようになります。

## DISPLAY設定でのエラーによりGUIアプリが起動できない
[以前の記事](https://qiita.com/chilchil0/items/9c7c56ad1cdafef389c4) では以下のようにHOST IPをdisplayに設定していました。

```
LOCAL_IP=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}')
export DISPLAY=$LOCAL_IP:0
```
前項で解説しましたが、`resolv.conf=8.8.8.8`に設定している状態ですので、DISPLAY設定は`8.8.8.8:0`になります。これではHOSTのDisplayをオープンできずにエラーが発生します。
その為、以下のように`ip route`コマンドを使用してHOST IPを取得するようにします。

```
export DISPLAY=$(ip route  | awk '/default via / {print $3}'):0
```

（補足）
これだとうまくいかないことがあるかもしれません。

参考ページ
https://github.com/microsoft/WSL/issues/4106
https://stackoverflow.com/questions/61110603/how-to-set-up-working-x11-forwarding-on-wsl2

これを`.bashrc`に設定しておけば毎回DISPLAYの設定などせずにWSL2でGUIアプリが使用できます。（この問題を放置していた頃は毎回HOST側でIPを確認して、DISPLAY設定していた。。。）
Gatsbyで「error Looks like develop for this site is already running, can you visit http://localhost:8000 ? If it is not, try again in five seconds!」での対処

# 事例

```gatsby develop```を実行すると以下が表示された

```
error Looks like develop for this site is already running, can you visit http://localhost:8000 ? If it is not, try again in five seconds!
```
http://localhost:8000
を調べても何も表示されないし５秒まっても再び実行しても同じエラー

何回か```gatsby develop```を実行した際に

```
Something is already running at port 8000
✔ Would you like to run the app at another port instead? … yes
```
とか出てたので他のポートで実行されているのかと思い
http://localhost:8001
http://localhost:8002
を確認して見たが何も表示されない

# 解決方法 
localhostを使用しているnodeのプロセスをkillする。

```
 $lsof -i | grep node
node    15390 user   18u  IPv6 182160      0t0  TCP *:50402 (LISTEN)
node    15404 user   20u  IPv6 182176      0t0  TCP *:33269 (LISTEN)
node    18498 user   42u  IPv4 225478      0t0  TCP localhost:8000 (LISTEN)
node    18984 user   42u  IPv4 225478      0t0  TCP localhost:8002 (LISTEN)
node    18938 user   42u  IPv4 225478      0t0  TCP localhost:8001 (LISTEN)
node    18938 user   44u  IPv6 223182      0t0  TCP *:38749 (LISTEN)
node    18951 user   18u  IPv6 223200      0t0  TCP *:50400 (LISTEN)
node    18958 user   25u  IPv4 224178      0t0  TCP localhost:34455 (LISTEN)
node    18965 user   20u  IPv6 223192      0t0  TCP *:42389 (LISTEN)
```

プロセスをkillする

```
$kill -9 18498
$kill -9 18984
$kill -9 18938
```

### 環境

- gatsby: 2.24.85
- ubuntu: 20.04.1 LTS
- node: 14.2.0

### 参考
https://github.com/gatsbyjs/gatsby/discussions/26869
gem の rake test で特定のファイルだけ実行する方法

既存の記事には見当たらず（探し方が悪いだけかも），リファレンスでも見つけるのが困難だったので記事にする。

gem を開発していて，テストを実行するには，

```shell
rake test
```

とすればよい。
おっと，前提条件として，

```shell
bundle gem hoge
```

のようにして作った，典型的な構成の gem とする。

特定のテストファイルだけを実行したいときにはどうするか？
以下のようにしてファイルを指定すればよい。

```shell
rake test TEST=path/to/some_test.rb
```

このことは Ruby 公式リファレンスの
[class Rake::TestTask (Ruby 2.7.0 リファレンスマニュアル)](https://docs.ruby-lang.org/ja/2.7.0/class/Rake=3a=3aTestTask.html)
に「test ターゲットの使用例」として書いてあった。
うーん，しかし，このページにたどり着くのはなかなか難しいな。それに「例」として 1 行掲載されているだけで説明が無いし。

実験したところ，`TEST` の指定にはワイルドカードが使えるようだった。
よって，ディレクトリーや拡張子を書くのが面倒なら

```shell
rake test TEST=**/*/some_test*
```

のようにすることもできる。

ちなみに `bundle gem hoge` で作った gem だと `test` がデフォルトタスクなので，`test` を略して

```shell
rake TEST=**/*/some_test*
```

と書くこともできる。
フィボナッチ数列にお世話になりました。

こんにちは。
自分なりに書き方を色々検討してみました。

参考にして頂ければ幸いです。
以下の記述はよく見る奴です。

```fib_1.py
def fib(n):
    if n == 1:
        return 0
    if n == 2:
        return 1
    else:
        return fib(n-1) +fib(n-2) 
```

こんな書き方もあると思います。

```fib_2.py
def fib(n):
    if n == 1 or n == 2:
        return n-1
    return fib(n-1) +fib(n-2) 
```

シンプルな記述に最適化が出来て、手を叩いて喜びましたが、
重複する計算が多いので、何とか最適化したいです。
有識者のアドバイスを参考にするとメモを用意し、
該当するものから取り出すことで計算を削減できるそうです。

```fib_3.py
class fib:
    def __init__(self):
        self.table ={}
    def cal(self,n):
        if n <= 2:
            return n-1
        
        if n in self.table:
            return self.table[n]
        
        self.table[n] = self.cal(n-2)+self.cal(n-1)
        return self.table[n]

fib_sequence = fib()
```

再帰処理 + メモ、なるほど。
こんなことも出来るんですね。
ちょっといじりました。

```fib_4.py
def fib(n):
    if n <= 2:
        return n-1
    
    if n in memo:
        return memo[n]
    memo[n] = fib(n-2)+fib(n-1)

    return memo[n]

memo = {}
```

メモで簡略化する以外にも貪欲法というアプローチがあるようですが、
それはまた今度にします。

やりたいことをイメージし、
アプローチを色々試してみる事は楽しいです。

[ココ](https://qiita.com/dovedove/items/3456c4f317a5c680f437)には for 文を使った方法もありました。素晴らしい!!

イメージが付かなくて困っている方は、ワンランクレベルを下げて、
[こちら](https://qiita.com/drken/items/23a4f604fa3f505dd5ad) の記事で準備運動をすると良いと思います。
参考になります、これも素晴らしい記事でした。
yukicoder contest 275 参戦記

# yukicoder contest 275 参戦記

## [A 1291 小手調べ](https://yukicoder.me/problems/no/1291)

答えは0以上の整数なので、1桁にトラップがあるので注意. d<sub>i</sub>≦100 なので、素直に整数で答えを計算すると int64 の範囲を超えますね. Python だから何も考えずに計算できるけど.

```python
N, *d = map(int, open(0).read().split())

for i in range(N):
    if d[i] == 1:
        print(10)
    else:
        print(9 * 10 ** (d[i] - 1))
```

まあ、文字列で計算しても難しくはないですが.

```python
N, *d = map(int, open(0).read().split())

for i in range(N):
    if d[i] == 1:
        print(10)
    else:
        print('9' + '0' * (d[i] - 1))
```

## [B 1292 パタパタ三角形](https://yukicoder.me/problems/no/1292)

それぞれの辺 s<sub>i</sub> について、対称移動で各辺がどこに行くかを手書きで図示すれば、規則性があることはすぐ分かる. 各移動を重心を上下左右のどちらかに動かすものだと考えれば、各移動ごとの x, y 座標が決まるので、後はセットを使えば簡単に解ける.

```python
S = input()

x, y = 0, 0
t = {(0, 0)}

s0 = [(-1, 0), (0, -1), (1, 0), (-1, 0), (0, 1), (1, 0)]
s1 = [(-1, 0), (0, 1), (1, 0), (-1, 0), (0, -1), (1, 0)]

for ch in S:
    if ch == 'a':
        if y % 2 == 0:
            dx, dy = s0[x % 6]
        else:
            dx, dy = s1[x % 6]
    elif ch == 'b':
        if y % 2 == 0:
            dx, dy = s0[(x + 4) % 6]
        else:
            dx, dy = s1[(x + 4) % 6]
    elif ch == 'c':
        if y % 2 == 0:
            dx, dy = s0[(x + 2) % 6]
        else:
            dx, dy = s1[(x + 2) % 6]
    x += dx
    y += dy
    t.add((x, y))
print(len(t))
```

## [C 1293 2種類の道路](https://yukicoder.me/problems/no/1293)

都市 i から行けるところを考える. 自動車専用道路を通って、都市 i から行ける都市の集合S(都市 i 自身も含む)に含まれる都市を j とすると、都市 j から歩行者専用道路通っていける都市(都市 j 自身も含む)の集合の和集合が、都市 i から行ける都市の集合となる. また当然ながら同じ集合Sに含まれる都市から行ける都市は全て同じである. つまり各集合S毎に、集合Sに含まれる都市の数だけ処理をするので *O*(*N*) となり解ける.

```python
from sys import setrecursionlimit, stdin


def find(parent, i):
    t = parent[i]
    if t < 0:
        return i
    t = find(parent, t)
    parent[i] = t
    return t


def unite(parent, i, j):
    i = find(parent, i)
    j = find(parent, j)
    if i == j:
        return
    parent[j] += parent[i]
    parent[i] = j


readline = stdin.readline
setrecursionlimit(10 ** 6)

N, D, W = map(int, readline().split())

car = [-1] * N
for _ in range(D):
    a, b = map(lambda x: int(x) - 1, readline().split())
    unite(car, a, b)

walking = [-1] * N
for _ in range(W):
    c, d = map(lambda x: int(x) - 1, readline().split())
    unite(walking, c, d)

xs = [i for i in range(N) if car[i] < 0]
cs = {}
ss = {}
for x in xs:
    cs[x] = 0
    ss[x] = set()

for i in range(N):
    a = find(car, i)
    b = find(walking, i)
    if b in ss[a]:
        continue
    ss[a].add(b)
    cs[a] -= walking[b]

result = 0
for x in xs:
    result -= car[x] * (cs[x] - 1)
print(result)
```
文字列を配列に入れる方法

##splitメソッド
文字列に使うことのできるメソッド。
文字列を分割して、配列に入れる事ができる。

```ruby
str = "Ruby PHP"
ary = str.split(' ') #半角の空白で区切る時は、ちゃんと半角の空白を作る。（半角空白で区切る場合は、引数の省略可）
#=>ary = ["Ruby","PHP"]
```
('')空白で区切ったり、(,)カンマで区切ったりを引数で指定できる。

配列にすることで、使う事ができるメソッドが変わる。
`gets`で入力されたものを配列に入れるときにも使える。
YouTubeのLiveStreamingAPIによるliveChat取得を諦めた

## 前回
前回の話は[こちら](https://qiita.com/DevIwatan/items/165abd6e834caf78ee18)

## 結論
### チャットの取得は諦めました。理由としては以下
- その後の追調査により、activeLiveChatIdが動画配信終了5分後までは存在し続けることを確認した。
- activeLiveChatIdを元にliveStreamingAPIのliveChat/messagesを取得するが、想定通りの件数でない(maxResults通りでなく70～75は変わらず)
- [APIドキュメント](https://developers.google.com/youtube/v3/live/docs/liveChatMessages/list)を参照し、レスポンスの pollingIntervalMillis を元にwaitしてからnextPageTokenを指定して取得すると、リクエストを送ったタイミングからの差分コメントが取得できてるっぽい
- つまりliveChat/messagesでは配信開始～配信終了のチャットを取得することは不可能(最初の一発だけは最初から70件だけ取得できるっぽい)
- よって、配信開始からポーリングし続ける必要がある。
- 約5秒(pollingIntervalMillisが大体それくらい)に1回APIを発行しなければならず、クォータ消費量がやばそう(liveChatのクォータ数が不明な件は解決していない)

## 雑感
- スパチャは別に取得しなくても、と思ったがコメント自体を取得すると何か価値が付けられるのでは、と思ったが無理そうなので諦め。
- クォータ数を買う(買えるのかしら？)レベルまで入り込むならやってもいいとは思う。
【jQuery~hoverイベント~】勉強メモ④

jQueryについて学習中。
今回はhoverイベントについて。
ほぼ自分の勉強メモです。
過度な期待はしないでください。


hover機能
-
- hoverイベント
　マウスを乗せたときにイベントを発生させる。

```.text:基本構造
$( セレクタ ).hover(function(){
　　// マウスを乗せたときの処理
}, function(){
　　// マウスを離したときの処理
});
```
<br>


- コードサンプル

```.html:HTML
<div class="modal">hoverイベント</div>
```

```.js:jQuery
$(function() {
  //マウスを乗せたら発動
  $('modal').hover(function(){
    //マウスを乗せたら色が変わる
    $(this).css('color', '#FF11FF');
  //ここにはマウスを離したときの動作を記述
  },function() {
    //色指定を空欄にすれば元の色に戻る
    $(this).css('color', '');
  });
});
```

　-こんな実装
![image](https://i.gyazo.com/62caf43d7916c6723d727a1bfdad5186.gif)
<br>

- コードサンプル2

```.html:HTML
<div class="modal">hoverイベント
  <p class="contents">要素取得</p>
</div>
```

```.js:jQuery
$(function(){
  $('.modal').hover(
    function() {
      // 子要素の「.contents」の要素を取得し、activeクラスをつける
      $(this).find('.contents').addClass('active');    
    },function() {
      // 子要素の「.contents」の要素を取得し、activeクラスを外す
      $(this).find('.contents').removeClass('active');
    }
  );
});
```

```.css:CSS
.contents{
  display: none;
}

.active{
  display: block;
}
```

　-こんな実装
![image](https://i.gyazo.com/d68c10dacebee25deef43cc4b621d057.gif)
　-addClassメソッド
　addClassメソッドを用いると、指定した要素にクラスを追加することが出来る。
　指定するクラス名の前にドットは不要。

　-removeClassメソッド
　removeClassメソッドを用いると、指定した要素から指定したクラスを取り除くことが出来る。

　-findメソッド
　findメソッドは、全ての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得する。


<br>
過去投稿記事
-
[【jQuery~書き方と各メソッド~】勉強メモ①](https://qiita.com/k-yasuhiro/items/dfe305ff337e6ac8b406)
[【jQuery~準備(読み込み)~】勉強メモ②](https://qiita.com/k-yasuhiro/items/c5f8aa277bd572d89cb4)
[【jQuery~モーダルの表示・非表示~】勉強メモ③](https://qiita.com/k-yasuhiro/items/15449ad19f85275393e8)
AWS Railsの再起動手順

この度Railsで開発中のアプリをAWSへ開発中アプリをデプロイしましたが、
今後本番環境のサーバー再起動を行う頻度は高いだろうと思い
備忘録としてUnicornの再起動手順をまとめていきたいと思います。


EC2インスタンスにログインしている前提で進めていきます。

まずは ps aux | grep unicorn コマンドでプロセスIDを確認します。

```ruby:ターミナル
[ec2-user@ip-172-31-33-238 <対象リポジトリ>]$ ps aux | grep unicorn
ec2-user 26995 17.4 10.7 475732 108272 ?       Sl   13:55   0:01 unicorn_rails master -c config/unicorn.rb -E production -D
ec2-user 26999  0.0 10.0 476748 101508 ?       Sl   13:55   0:00 unicorn_rails worker[0] -c config/unicorn.rb -E production -D
ec2-user 27002  0.0  0.0 119436   908 pts/0    S+   13:55   0:00 grep --color=auto unicorn
```

この時 unicorn_rails master と表示されているプロセスが Unicorn のプロセスとなっているので、今回の場合は 26995 がPIDとなります。

PIDが確認できたら killコマンドを使ってプロセスを止めます。

```ruby:ターミナル
[ec2-user@ip-172-31-33-238 <対象リポジトリ>]$ kill 26995
```

ps aux | grep unicornコマンドで実際に止まっているのか確認します。

```ruby:ターミナル
[ec2-user@ip-172-31-33-238 <対象リポジトリ>]$ ps aux | grep unicorn
ec2-user 27345  0.0  0.0 119436   964 pts/0    S+   14:27   0:00 grep --color=auto unicorn
```

上記のような表示になっていればプロセスは止まっています。

確認が取れたら下記コマンドを入力しUnicornを起動させます。

```ruby:ターミナル
[ec2-user@ip-172-31-23-189 <対象リポジトリ>]$ RAILS_SERVE_STATIC_FILES=1 unicorn_rails -c config/unicorn.rb -E production -D
```

以上で再起動は完了しました。

EC2インスタンスに紐付けたElasticIPを使ってブラウザにアクセスすると、正常に表示されているか確認ができます。
RailsアプリのActive Storageの保存先をlocalからAmazon S3へ変更する

# この記事を読んでできるようになること
**RailsアプリのActive Storage（画像）の保存先を local から Amazon S3 へ変更できる**ようになる。
# 前提条件
・**Active Storageを導入済み**であること
・**AWSに登録済み**であること
・**S3へのアクセス権限を持ったIAMユーザーを作成済み**であること
・**Macでの操作手順**であること
# Amazon S3とは
Amazon Simple Storage Serviceの略称で、インターネット用のストレージサービスのこと。AWSの一つ。
# Active Storageの保存先をlocalからAmazon S3へ変更する手順

## ①バケットの作成
**バケットとは、オブジェクトのコンテナのこと。画像などを保存するための箱のようなイメージ。**

-1. AWSマネジメントコンソールよりAmazon S3へ移動する。
-2. ダッシュボードでバケットを選択し、`バケットの作成`（オレンジのボタン）をクリック
![スクリーンショット 2020-11-06 13.44.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807318/5701924a-7eb5-c846-f908-90ed53e6f03a.png)
-3. 画像のように入力し、`バケット作成`をクリック（チェックは1番上を外した後、画像の3箇所をチェックする）
![スクリーンショット 2020-11-06 13.49.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807318/e4249d64-f410-1eb6-7764-20e5184d20c2.png)
![スクリーンショット 2020-11-20 22.04.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807318/74f22e76-c1e7-5c89-16c4-b98e32d68da7.png)
![スクリーンショット 2020-11-06 13.49.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807318/f7cf7a14-dbed-3ab7-8344-8060a29c6f91.png)
-4. 作成したバケットをクリックする
-5. アクセス許可のタブを選択し、バケットポリシーの`編集する`をクリック
![スクリーンショット 2020-11-20 22.04.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807318/07f84496-3055-4645-4039-0949d37724f2.png)
-6. バケットARNをコピーし、`ポリシージェネレータ`をクリック
![スクリーンショット 2020-11-20 22.04.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807318/f4f6ae8b-e496-e89a-40fd-cd0d20eb5e50.png)
-7. 画像のように入力し、`Generate Policy`をクリック（ユーザーのARNは、作成済みのIAMユーザーのものをコピーする：3枚目を参照してください）
![スクリーンショット 2020-11-06 23.15.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807318/35e098b6-91a5-c037-2e94-990c7b723034.png)
![スクリーンショット 2020-11-06 23.16.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807318/12e51544-f8d5-5f98-a26d-2d2cf4c238a0.png)
![スクリーンショット 2020-11-20 22.35.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807318/18a216a5-664b-6b9b-fa22-8546bb595b80.png)
-8. 画像のようにポリシーを入力したら、`変更の保存`をクリック
![スクリーンショット 2020-11-06 23.17.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/807318/fda29220-dbb9-4b6d-8dab-9dc16e595364.png)
これでバケットの作成は完了です。

## ②Railsアプリの画像の保存先の変更
-1. Gemを導入する
 
```
<Gemfile>
gem "aws-sdk-s3", require: false
```
-2. バンドルインストールする

```
% bundle install
```
-3. 画像の保存先を変更したい環境の設定ファイルの保存先を :amazon に変更する

```
<config/environment/development.rb> または <config/environment/production.rb>
config.active_storage.service = :amazon
```
-4. ストレージの設定を追加する
 
```
<config/storage.yml>
local:
 service: Disk
 root: <%= Rails.root.join("storage") %>

↓↓これを追加
amazon:
 service: S3
 access_key_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>
 secret_access_key: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
 region: ap-northeast-1 （リージョンに合わせて変更）
 bucket: 作成したバケット名
```
-5. 環境変数に`AWS_ACCESS_KEY_ID`と`AWS_SECRET_ACCESS_KEY`を追加する（本番環境でS3を使用する場合は、本番環境の環境変数に追加する）

```
<ターミナル>
% vim ~/.zshrc

i を押して入力モードにし、以下を追加
export AWS_ACCESS_KEY_ID="*****************"
export AWS_SECRET_ACCESS_KEY="*****************"

esc を押して、:wq を入力し保存して終了する
```
これで、S3に画像を保存できるようになりました。本番環境で環境変数を設定するのを忘れることがあるので注意しましょう。
Serializerで画像のurlをjsonで返す際に発生したエラー

###環境
ruby '2.6.5'
rails '~> 6.0.3'
###エラー発生状況
activestrageに保存している画像のurlを取得して
jsonで返した時に発生した時のエラー
https://gyazo.com/7fbc1048f6017017c67d8415deed84d6
###エラー内容
エラー画像
https://gyazo.com/809103569c8d64a84eeab91e81b4a020

###エラーコード
```
Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true
```
###エラー和訳
リンク先のホストがありません! host パラメータを指定するか、default_url_options[:host] を設定するか、 :only_path を true に設定してください。

###解決策
まずホストってなんだっけ？ってなったので検索
参考記事
URLの構造~ホスト名、パス、パラメータ、ハッシュの成り立ちとSEO
https://www.marketechlabo.com/url-structure-for-marketer/

https://www.example.com/audio/list.php?page=2&sort_by=price
上記のurlを例にすると
https:// の部分がプロトコル
audio/list.php?がパス名(pathname)
page=2&sort_by=price がクエリ文字列となっている
他にもurlの要素はあるが今回urlを例にすると上記の構成でurlが成り立っている
他の要素もあるので見たい方は上記の参考記事を見てください

ってことで
エラー文は
rails_blob_path(object.avatar)はどこに飛ばせばいいんだ！とエラーが言っているので
下記の記事を参照して
http://sato-s.github.io/2018/08/25/active-storage-in-API.html

```
config/environments/development.rbに以下のコードを記述

Rails.application.routes.default_url_options[:host] = 'localhost'
Rails.application.routes.default_url_options[:port] = 3000
```

二つのコードを追記すればエラーが解消されました
C++ 入門の私的まとめ ビット演算まで

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
[新・明解C++入門](https://www.amazon.co.jp/gp/product/B0787YH4L2/ref=ppx_yo_dt_b_d_asin_title_o00?ie=UTF8&psc=1)

#関数

```
返り値型 関数名 (引数...){
//関数本体
}
```
という形で`int main(){}`の外に書く
っていうかこのmainも関数だよな..


関数呼び出しはPHPと変わらない

###main関数
- mainでreturnするとプログラムが終了する
- 0を返すと正常終了。そうでないときは0以外を返す
- main関数の最後に`return 0`が自動で追加される

####引数
- main関数は受け取るもの、受け取らないものがある

####実行
- プログラムが実行されるとmain関数が実行される
- 呼び出す関数はmain関数の前に書く

###void関数
- 返り値がない関数

仮引数の方とは違い方を渡す、例えばint型の仮引数へdouble型を渡すと暗黙の型変換が行われる

###ビット論理演算

|論理演算|説明|
|---|---|
|論理積|両方とも1なら1|
|論理和|一方でも1なら1|
|排他的論理和|一方のみ1なら1|
|補数|0なら1。1なら0|

###シフト演算
ラズパイのエアコンの赤外線コードを解析するときにシフト演算使ってみてフォクのfor文が楽にかけたって思ったけど今はもう忘れてしまった

|演算子|説明|
|:-:|---|
|<<|全ビットを左へシフト|
|>>|右へシフト|


```bash
#左シフト  8<<4
01010101
↓
01010000

#右シフト 8>>4
01010101
↓
00000101

```
gas + google spreadsheet メモ

https://tonari-it.com/gas-dialog-basic/
上記を元にgoogle spreadsheetでダイアログを出して、ボタンを押すと実行されるような仕組みを実装。

```javascript:gas
function showDialog() {
  const html = HtmlService.createHtmlOutputFromFile('dialog');
  SpreadsheetApp.getUi().showModalDialog(html, 'tweet取得');
}

function getTweet(){
  Logger.log("tweet取得しました");
}
```


```html:html(dialog用)
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  　<p>過去7日間のtweetを取得します。</p>
   <p style="color: red;">シート上のデータは上書きされますので必要に応じて別の場所に保存してください。</p>
    <button onclick="getTweet();">tweet取得</button>
    
    <script>
      function getTweet() {
        google.script.run.withSuccessHandler(() => {
           google.script.host.close();
           alert('tweet取得に成功しました');
        }).withFailureHandler(() => {
           alert('tweet取得に失敗しました');
        }).getTweet();
      }
    </script>
  </body>
</html>
```
AWS RDSにローカルから接続できない

#エラー内容
データの検証のため、RDSにローカルのwindowsから接続しようと試みました。

```
mysql -u root -p -P 3306 -h <RDS>
```
すると・・・

```
ERROR 2003 (HY000): Can't connect to MySQL server on '<RDS>' (10060)
```

ncも試してみる。

```
nc <RDS>
nc: can't connect to remote host (<RDS IP>)
```
ncもダメ・・・

# 解決方法
RDSインスタンスの「パブリックアクセス可能」を「あり」にする
![e124141.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480987/0ea7aec1-57e0-d483-e9cb-fc59abd07a11.png)

参考：https://aws.amazon.com/jp/premiumsupport/knowledge-center/rds-connectivity-instance-subnet-vpc/

これでローカルから接続できるようになりました。
TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

#【備忘録】
私自信TypeScriptに詳しくなかったのでこれでなぜ解決したかなど理由は分かりませんが、探すまで時間がかかったので、忘れないようにと残しておきます。

## エラーまでにやったこと
```
$ npx create-react-app アプリ名 --template typescript
$ cd アプリ名
$ yarn start  <-  ここでエラー発生
```
## エラー内容
```
$ yarn start
yarn start
yarn run v1.21.1
warning ../../../package.json: No license field
$ react-scripts start
アプリまでのパス/アプリ名/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (/アプリまでのパス/アプリ名/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (/アプリまでのパス/アプリ名/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

## 解決策（参考URLも載せます）
```/アプリ名/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
変更前
238: } else if (parsedCompilerOptions[option] !== valueToCheck) {

変更後
238: } else if (parsedCompilerOptions[option] !== valueToCheck && option !== "jsx") {
```

**こちらが参考URL**
[4.0.0 breaks with typescript (all versions) #9868](https://github.com/facebook/create-react-app/issues/9868)

**他の方で違う方法で解決されている記事もありましたので共有します**
https://qiita.com/makishy/items/913e20dff7caf458c965
MacのDockerでUbuntu+ROSを動かす

自動運転車やロボットを動かすならROSだよね。ということで。
まずはMacでROSを動かしてみたいと思います。
# DockerでUbuntuを動かす
参考：https://qiita.com/yasuoka_dev/items/073f7e8c7dba75993323

```
$ docker pull ubuntu:18.04
```
ユーザを作って、sudoできるようにしておく。

# UbuntuにROSを入れる
参考：http://www1.meijo-u.ac.jp/~kohara/cms/technicalreport/ubuntu18-04_ros_install

## aptへのROSのダウンロード先の登録
```
$ sudo sh -c 'echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release -sc) main" > /etc/apt/sources.list.d/ros-latest.list'
```
sudoがない。。

```
$ apt-get update
$ apt-get install vim
$ apt-get install sudo

```
lsb_releaseがない。。
しかもこの状態でapt-get installしようとすると下記のファイルにゴミが残っているようでエラーに。。

```
E: Malformed entry 1 in list file /etc/apt/sources.list.d/ros-latest.list (Component)
E: The list of sources could not be read.
E: Malformed entry 1 in list file /etc/apt/sources.list.d/ros-latest.list (Component)
E: The list of sources could not be read.
```
ファイルを消してあげる。
しかもlsb_releaseでなく、lsb-releaseに変わっている。。罠が多すぎ。

```
$ rm /etc/apt/sources.list.d/ros-latest.list
$ sudo apt-get install lsb-release
```

最初から、sudo入れて、lsb-release入れて、その後にやろう。

## ダウンロードのための公開鍵の取得
```
$ sudo apt-key adv --keyserver 'hkp://keyserver.ubuntu.com:80' --recv-key C1CF6E31E6BADE8868B172B4F42ED6FBAB17C654
```
gnupgがない。

```
$ sudo apt-get install gnupg
```
できたっぽい。

## ROSのインストール
```
$sudo apt update
$sudo apt install ros-melodic-desktop-full
```
すごい数のパッケージ。1416パッケージ。
途中でなぜか都市の選択が。6:Asia＞79:Tokyo を選択。
完了。

あと、rosdepのインストールは別途手動で必要なようなので、下記で入れる。

```
apt install python-rosdep
```
catkin_ws まで作成。
試しにパッケージを入れてみる。

```
$ sudo apt-get install -y ros-melodic-joystick-drivers
```
ros-tutorialsパッケージもいいかも。

日本語のチュートリアルドキュメントもあった。
https://github.com/tork-a/tork_moveit_tutorial/releases/tag/0.0.10

DockerだとGUIがないので、ブラウザから立ち上げるタイプもあった。
https://qiita.com/karaage0703/items/957bdc7b4dabfc6639da

```
$ docker run -p 6080:80 --shm-size=512m tiryoh/ros-desktop-vnc:melodic
```
コマンド一発。簡単すぎる。