OmniAICreator/Qiita-1.07M huggingface dataset:
【Index】マルチスケールシミュレーション特論

\![Mac OS X-10.15.7](<https://img.shields.io/badge/MacOSX-10.15.7-brightgreen>) \![ruby-2.7.1p83](<https://img.shields.io/badge/ruby-2.7.1p83-brightgreen>) 


# Introduction

マルチスケールシミュレーション特論の講義メモです．Rubyの講義メモを中心に投稿しています．


# Class\_Check <span class="timestamp-wrapper"><span class="timestamp">&lt;2020-12-29 Tue&gt;</span></span>

-   [X] **qiita link** (+60)
-   [X] **roman numerals, google recruit or both** (+10)
-   [X] **qiita public** (max +20)
-   [ ] **pull\_request or issue on my\_help or qiita\_org**
-   [X] **Tsutaya project** (+20)


# Class\_Articles

1.  [【Week 5】bash, ruby\_first](<https://qiita.com/e79a93e5b7b1/items/abb9b4c1d44a315f187d>)

2.  [【Week 6】my\_help, ruby\_second](<https://qiita.com/e79a93e5b7b1/items/6a0ffe8d8d091fdbae9d>)

3.  [【Week 7】gem, ruby\_third](<https://qiita.com/e79a93e5b7b1/items/1aa7a74fa2b8c40658e3>)

4.  [【Week 8】rake, ruby\_fourth](<https://qiita.com/e79a93e5b7b1/items/e5ffc97bbb29a4d810e5>)

5.  [【Week 9】rubular, ruby\_fourth](<https://qiita.com/e79a93e5b7b1/items/d011c1ffc49c77698b4c>)

6.  [【Week 10】recursion, ruby\_fifth](<https://qiita.com/e79a93e5b7b1/items/6e2f8b5e3f615e009aa5>)

7.  [【Week 11】class, ruby\_sixth](<https://qiita.com/e79a93e5b7b1/items/c3eccd52473b556b8386>)

8.  [【Week 12-13】thor, robocop](<https://qiita.com/e79a93e5b7b1/items/2a1624f01b94364b664c>)


# Class\_Assignment

1.  [【extra 1】roman numerals](<https://qiita.com/e79a93e5b7b1/items/f25fb746c8d9459c7cbe>)

2.  [【extra 2】google recruit](<https://qiita.com/e79a93e5b7b1/items/bb28052be369380f7615>)

3.  [【refactoring】TSUTAYA Project](<https://qiita.com/e79a93e5b7b1/items/43b9e03034866cf4b446>)


# Memorandums

1.  [【Memo】github & Qiita](<https://qiita.com/e79a93e5b7b1/items/db0f19a038c99135f5b3>)

2.  [【Memo】Emacs key-bind](<https://qiita.com/e79a93e5b7b1/items/5ec47e7e1f1be9439f1a>)

3.  [【Memo】Emacs Org-Mode](<https://qiita.com/e79a93e5b7b1/items/d04df89cbdfada25cbab>)


# Directory\_tree

    $ pwd
    ~/grad_members_20f/members/e79a93e5b7b1
    
    $ tree
    .
    ├── README.md
    ├── README.org
    ├── Rakefile
    ├── codes
    │   └── 講義プログラム(.org, .md)
    └── posts
        ├── class
        │   └── 講義メモ(.org, .md)
        └── memo
            └── 備忘録(.org, .md)

.org ファイルを整理しようとディレクトリにまとめたら，講義ページの『作業達成の目安』から弾かれてた．

そういえば各ユーザのディレクトリ直下に README.org をおかないといけないんだっけ．

どうしようもないので上記の構成で整理していく．



------
 - **source** ~/grad_members_20f/members/e79a93e5b7b1/README.org
グーグルドライブAPIを使ってスプレッドシートをxlsxでダウンロード、pythonで

グーグルドライブAPIというものがありこれを使えばブラウザにアクセスしなくてもダウンロードできるぞと書いてあったが思いの外手こずったのでメモ


APIキーやOAuthを手に入れる方法は他にあるので割愛
また、コードはpythonで書く。
調べてみたところやれることはスコープによって変わるようだ

```python
# これでダウンロードや書き込み、読み込み、その他諸々が自由になる。
SCOPES = ['https://www.googleapis.com/auth/drive', 'https://www.googleapis.com/auth/drive.metadata.readonly']
```

```python
from googleapiclient.discovery import build
from googleapiclient.http import MediaIoBaseDownload
from google_auth_oauthlib.flow import InstalledAppFlow 
from google.auth.transport.requests import Request


def getfile():
    """
    ファイルをダウンロードするだけの簡単な関数。
    """
    with open('token.pickle', 'rb') as token:
        creds = pickle.load(token)

    service = build('drive', 'v3', credentials=creds)
    file_id = '1lllnzSFApok_umno0gsXotykBSjOOBgCr85F6gM1ed4'
    file_name = 'chatwork_test.xlsx'
    request = service.files().export_media(fileId=file_id, mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
    fh = io.BytesIO()
    downloader = MediaIoBaseDownload(fh, request)
    done = False
    while done is False:
        status, done = downloader.next_chunk()
        print("Download %d%%." % int(status.progress() * 100))
    
    fh.seek(0)

    with open(os.path.join('./resultFile', file_name), 'wb') as f:
        f.write(fh.read())
        f.close()


if __name__ == '__main__':
    getfile()
```

コードを見るとわかるように

```python
request = service.files().export_media(fileId=file_id, mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
```
ここの`mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'`でspreadsheetをexcelファイルに変換し、

```python
file_name = 'chatwork_test.xlsx'
fh = io.BytesIO() # ファイルをバイナリで開く、エクセルファイルはバイナリだから
downloader = MediaIoBaseDownload(fh, request)
done = False
while done is False:
    status, done = downloader.next_chunk()
    print("Download %d%%." % int(status.progress() * 100))
```
ここで実際にダウンロードを行うわけだがここの処理をよく理解していなかった。
このあたりの処理はいわゆる`f.open('hoge', 'rb')`しただけと大体一緒なのでその後に書き込む処理をしなければならなかったのだ。
つまり「ダウンロードしました（ダウンロードしたとはいってない）」と同じ状態なのである。したがって。

```python
    fh.seek(0)

    with open(os.path.join('./resultFile', file_name), 'wb') as f:
        f.write(fh.read())
        f.close()
```
これらの処理が必要になる。
正直この`fh.seek(0)`の意味がよくわかっていない、
# 参考になった動画

[Google Drive API in Python | Download Files](https://www.youtube.com/watch?v=FzH_F6e2CJE&t=309s) (注：英語）
Reactでfor文を使う

#したかったこと
JSX内で表の列をfor文を用いることで、繰り返し処理する。
理由）デザインを変える時に、一つ一つ変更するのが面倒だった。

```react:解決前のコード

<tr>
  <th style={{fontWeight: 'bold',fontSize:40}}>1set</th>
  <th><input style={{height:52, width:80,borderStyle:"none", borderRadius:4}}/><span style={{fontSize:40}}>kg</span></th>
  <th><input style={{height:52, width:70,borderStyle:"none", borderRadius:4}}/><span style={{fontSize:40}}>回</span></th>
</tr>
<tr>
  <th style={{fontWeight: 'bold',fontSize:40}}>2set</th>
  <th><input style={{height:52, width:80,borderStyle:"none", borderRadius:4}}/><span style={{fontSize:40}}>kg</span></th>
  <th><input style={{height:52, width:70,borderStyle:"none", borderRadius:4}}/><span style={{fontSize:40}}>回</span></th>
</tr>
<tr>
  <th style={{fontWeight: 'bold',fontSize:40}}>3set</th>
  <th><input style={{height:52, width:80,borderStyle:"none", borderRadius:4}}/><span style={{fontSize:40}}>kg</span></th>
  <th><input style={{height:52, width:70,borderStyle:"none", borderRadius:4}}/><span style={{fontSize:40}}>回</span></th>
</tr>
```

##解決策
・即時関数を使う。
・for文のループで出力された列を作成したリストにプッシュし、最後にリストを返す。（これをしないでfor文内で値を返すと、１ループ目で値を返してしまいました。）

```react:解決後のコード
{(() =>{
  const item=[];
  for(let i=1; i <5; i++) {
    item.push(
    <tr>
      <th style={{fontWeight: 'bold',fontSize:40}}>{i}set</th>
      <th><input style={{height:52, width:80,borderStyle:"none", borderRadius:4}}/><span style={{fontSize:40}}>kg</span></th>
      <th><input style={{height:52, width:70,borderStyle:"none", borderRadius:4}}/><span style={{fontSize:40}}>回</span></th>
    </tr>
    )
  }
  return(item)
})()}
```
###結果
![スクリーンショット 2020-11-28 17.44.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849084/791c71a3-5a23-1331-53ee-e053e1a02002.png)



[参考にした記事 - Qiita](https://qiita.com/yu_okuda/items/a88d697f34ac4037cd12)
ServiceNow - ラベルを非表示にする

#概要
通常にフィールドを定義すると入力フィールドの上にラベル（下の例では「Field 1」）が表示される。このラベルをUIページで非表示にする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/c7555269-110a-b2e3-e26c-dabd59536b2a.png)

注意：
1. 本手順はDOM操作を行います。XSSの危険があるため、ServiceNowはDOM操作を推奨していません。
2. DOM操作はUIページでは有効ですが、サービスポータルではエラーになります。

#手順
1. フィールドを定義して「Try It」でページを表示する
2. 入力フィールドを右クリックして「要素の調査」を選択（Firefoxの場合）<br/>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/8b3d4871-12da-ce93-3093-d990d081928f.png)
3. ページの下にHTMLソースコードが表示される。入力フィールドのコードがハイライトされる。そのフィールドの上のidが「label」から始まるdivを探す。<br/>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/8bf03d00-e39a-8668-2ae6-8d0ef1ee76ee.png)
4. 「label」から始まるdivを右クリックして「コピー」－「XPath」を選択して内容をテキストエディタに張り付ける<br/>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/9100a5fb-6e01-d1a3-5eaf-4f855b9cde5c.png)
5. 新しいonLoadクライアントスクリプトを作成する。
6. 「Isolate script」のチェックを外して、次のスクリプトを追加する。document.getElementById()の内容は上で取得した内容を張り付けてID以外の部分は削除する<pre>function onLoad() {
    document.getElementById("label_IO:9e7fa2bc2fb8e0103c515e972799b6d5").style.display = "none";
}</pre><br/>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/c493beb5-d86f-cc60-042b-0a63a174c00e.png)
7. ページを再表示してラベルで表示なことを確認する<br/> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/5522ba03-23ff-861e-5a32-e7960ab6d081.png)

 
便利機能：
「document.getElementById」の代わりに「gel」で省略することが可能。

```
function onLoad() {
    gel("label_IO:9e7fa2bc2fb8e0103c515e972799b6d5").style.display = "none";
}
```

以上
firebase google認証でログインユーザーを選べない問題

# 概要

とある日、React.js x firebase でgoogle認の実装をしておりました。
documentを参照しながら、実装をしていたら、以下の問題がおきました。

`一度google認証でサインインをすると、次回のサインインを別のユーザー(別のgoogleアカウント)で行うことができない。別のgoogleアカウントでもサインインしたいのに。。。`


## 問題のコード
```
const signInByGoogle = () => {
   try {
      const googleProvider = new firebase.auth.GoogleAuthProvider();
      firebase
        .auth()
        .signInWithPopup(googleProvider)
        .then((res) => {
          const user = res.user;
          if (user) {
            console.log(ok!!!)
          }
        });
    } catch (e) {
      console.log('error', e.code);
    }

}
```

こんな感じのコードが公式のドキュメントにも書いてあります。このコードで通常にログインはできますし特に問題はありません。
しかし、他のgoogle アカウントを選択してログインすることができません。

ではどうするのか。以下解決方法です。

## 解決方法

googleProviderのインスタンスのoptionに追加指定します。

```
const signInByGoogle = () => {
   try {
      const googleProvider = new firebase.auth.GoogleAuthProvider();
      googleProvider.setCustomParameters({
        prompt: 'select_account', // 追加
      });

      firebase
        .auth()
        .signInWithPopup(googleProvider)
        .then((res) => {
          const user = res.user;
          if (user) {
            console.log(ok!!!)
          }
        });
    } catch (e) {
      console.log('error', e.code);
    }

}

```

どうやらgoogle側の仕様のようです。1つのアカウントでサインインし続けるのがまあ普通なんですけどね。
JavaScriptの関数の様々な利用方法

#はじめに
脱初心者にむけてアウトプットをしていこうと思って記事を書いております。
私は、まだ現場に出たことのない完全にど素人です。
間違ったことがありましたら、ぜひコメントいただけると幸いです。


##この記事の目的
JavaScriptの関数についてわからない方に向けて、わかりやすいようにまとめております。私自身、初心者で同じ境遇の方々もいると思うので、そういう方にむけてわかりやすく解説できたらと思っています。
####関数にはいろいろな使われ方があり、今回がそのうちの3つを紹介しようと思います。


#サブルーチンとしての関数
サブルーチンとしての関数とは繰り返しおこなわる機能をまとめ、それに名前をつけて参照するだけでその機能を実行可能にしてくれるもの。
つまり、特定のタスクを行うための「アルゴリズム」をひとまとめのユニットにする目的で使われる。

#####例えば
```
const year = new Date().getFullYear();  //年（西暦）を得る
if(year % 4 !== 0) console.log(`${year}年は閏年ではない。`)
else if(year % 100 !== 0) console.log(`${year}年は閏年である.`)
else if(year % 400 !== 0) console.log(`${year}年は閏年ではない。`)
else console.log(`${year}年は閏年である。`);
```
このような閏年を判断するアルゴリズムがあり、
この文を何回も使用する機会があった場合、何度もこの記述を書くことは可読性を下げることになります。
また仕様変更があった場合に、記述した全ての箇所で、修正をしなくてはなりません。
こういったことを避けるために、「サブルーチン」として使う方法です。

```
function printLeapYearStatus() {
  const year = new Date().getFullYear();  //年（西暦）を得る
  if(year % 4 !== 0) console.log(`${year}年は閏年ではない。`)
  else if(year % 100 !== 0) console.log(`${year}年は閏年である.`)
  else if(year % 400 !== 0) console.log(`${year}年は閏年ではない。`)
  else console.log(`${year}年は閏年である。`);
}

printYearLeapStatus();
```
こうすることで、関数を呼び出すだけで済みますし、変更したい場合も、一つのサブルーチンの内容を変えるだけで済むので、圧倒的に楽なのです。


##値を返すサブルーチンとしての関数
一つ目に紹介したサブルーチンとしての関数は実は経験を積むことで使うことが少なくなっていくらしい、、、
そして、その次の段階として「値を返すサブルーチン」としての関数です

#####例えば
```
function isCurrentYearLeapYear() {//今年は閏年か?
  const year = new Date().getFullYear();
  if(year % 4 !== 0) return false;
  else if(year % 100 !== 0) return true;
  else if(year % 400 !== 0) return false;
  else return true;
}

console.log(isCurrentYearLeapYear());  //実行結果：true
(2020年は閏年なので)
```
この文章に変えたとして、
先のサブルーチンとしての使われ方との違いは。
1.　HTMLで出力できる
2.　ファイルに書き出せる
3.　if文で条件判定ができる
4.　他の処理のために今年が閏年かどうか知れる
他にもメリットがありと思います。
つまり、いろいろ汎用性がある値として返すサブルーチンの方が役に立つ時が多いいということです。


##純粋関数
純粋関数とは、同じ入力に対しては同じ出力を返します。
副作用を持たない、つまりプログラムの状態を変えない。
使うことのメリットとは、テストが簡単で理解が容易で可搬性が上がることです。


いろいろ調べると、純粋関数でいろいろな議論がされているみたいなので、私にとってまだまだ早い領域だと気付きました。

ただ僕なりの解釈として、関数と純粋関数の違いについては、
constとletの違いと似てる！と感じました。
constは定数でletは変数、使用する目的は、そのうち値が変わりそうなものにはletを、constは今後値が変わらないものに使うので、
そういう意味ではこれらの違いとあんまり違わないのかなと思っています。


##最後に、
まだまだ難しいことがあるなと感じました,
この記事を見ていただいて、間違っていると感じたら、ぜひコメントいただければと思います。

最後までご覧いただいありがとうございました。
【GitHub】Branch protection ruleの運用ルールを作った話

この記事は[MicroAd \(マイクロアド\) Advent Calendar 2020 \- Qiita](https://qiita.com/advent-calendar/2020/microad)の6日目の記事です。

---

# 前書き
この記事では、自分の所属しているチームが主に開発している`GitHub`[^ghe]リポジトリに関して`Branch protection rule`の運用ルールを作った話についてまとめます。

[^ghe]: 正確には`GitHub Enterprise`ですが、ややこしいので`GitHub`と書いています。

## 背景
弊チームでは元々`Branch protection rule`をなんとなくで運用していましたが、`rebase`等の操作に伴って外したプロテクションの戻し忘れが発生したり、手伝いに入って貰った別チームから「うちは個別の`Branch protection rule`で運用したい」といった要望が出たため、正式に運用ルールを整えることにしました。

# 設定した運用ルール
運用ルールは最終的に以下のような形になりました[^branch]。

[^branch]: `hotfix`系などは`*_feature`と同様のプロテクションをかけていますが、記事中では省略します。

- よく使う名前のブランチは包括的にプロテクションをかけておく（これらのルールは編集禁止）
  - `master`
  - `release`
  - `*_feature`（個別の案件系ブランチ）
- 特殊な操作・運用が必要な場合、個別のブランチに関するプロテクションを立て、そちらで制約を緩める
- 不要になったプロテクションはなる早で削除する

これらのプロテクションを入れると以下のようになります[^protection]。
![スクリーンショット 2020-11-28 16.56.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/361c6515-c8b3-1db1-db5a-e0c5d4b7b1c5.png)

[^protection]: 形だけ再現したものなので`Currently applies`が0になっていたりしますが、実際はここにプロテクションが当たっているブランチの数が出ます。

以下に機能面での解説をします。

## 正規表現を用いたプロテクション
弊チームでは、個別の案件系ブランチには`${案件の識別番号}_feature`という名前を付けています。
これらのブランチは並行で複数存在するため、基本的なプロテクションはワイルドカード構文を用いて行うこととしました。

これによって、`feature`ブランチを作る度に一々プロテクションを作る必要が無くなります。

## 個別のブランチプロテクション
正規表現を用いたプロテクションは、より具体的な名前のプロテクションで上書きすることができます。

例えば、`hoge_feature`という名前のブランチに対して`hoge_feature`と`*_feature`というプロテクションが有った場合は前者が優先的に適用されます。
つまり、`*_feature`プロテクション内で`force push`が禁止されていても、`hoge_feature`内で`force push`を許可することで、`hoge_feature`への`force push`を可能にするようなこともできます。

これによってチームごとにプロテクションルールを設定したり、個別のブランチに対する操作の間だけ制約を緩めるようなことができます。

今回の運用ルール制定前は全体へのプロテクションを弄って制約を緩めるようなこともしていましたが、戻し忘れた際の影響が大きいということで、必要になった場合だけ個別に立ててすぐ消すという運用に落ち着きました。

# おまけ
`feature`ブランチに実際に設定している`Branch protection rule`を載せます。
![スクリーンショット 2020-11-28 17.10.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/99e98453-6f23-b9a2-0a49-50d2a0c4be23.png)

## 主に設定していること
- マージ前に1人以上のレビュー必須
- `CI`（テストと`lint`）の成功必須
  - このリポジトリには2種類の`CI`が設定されていて、`feature`ではチェックを付けている片方のみ動かしているため、チェックは動かしている方にだけ付けています
- マージ前の`rebase`必須
- 管理者にもルールを適用
- `push`禁止（`force push`だけでなくブランチへの`push`そのものを禁止）

# 終わりに
今回は`Branch protection rule`の運用ルールを作った話に関してまとめました。
合わせて`Branch protection rule`そのものも整備しましたが、色々な事故のリスクが減って良かったです。

明日は@taka_maenishiによる「`PySpark`で`array<struct>`のフィールドを操作する」記事です。

- [MicroAd \(マイクロアド\) Advent Calendar 2020 \- Qiita](https://qiita.com/advent-calendar/2020/microad)

# 公式資料
- [保護されたブランチを設定する \- GitHub Docs](https://docs.github.com/ja/free-pro-team@latest/github/administering-a-repository/configuring-protected-branches)
Reactを学んだ(2) ~Lifecycle Events~



# Lifecycle Events

- 以下のようなものたちがある。
- `componentDidMount` is only called once in the lifecycle of any component, re-render will not reinitialize the component. `componentDidUpdate` is triggered after re-rendering DOM.

## ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534442/01154c82-6d49-cf46-4b4d-0b28f793bd5e.png)

- API Callをしたい時には、`componentDidMount()ライフサイクルメソッド`内で行い、それによって得られたデータの変更をstateに反映させる。
- これによって、`render()メソッドはレンダリングだけが責務になる`し、`まずstateは最新ではないものがコンテンツの枠組みを最初に表示することができる`。

- 以下のような感じ。

```jsx
import React, { Component } from 'react';
import fetchUser from '../utils/UserAPI';

class User extends Component {
 constructor(props) {
   super(props);

   this.state = {
     name: '',
     age: ''
   };
 }

 componentDidMount() {
   fetchUser().then((user) => this.setState({
     name: user.name,
     age: user.age
   }));
 }

 render() {
   return (
     <div>
       <p>Name: {this.state.name}</p>
       <p>Age: {this.state.age}</p>
     </div>
   );
   }
}

export default User;
```
React + TypeScriptでコネクト4を作った（クラスコンポーネント）

こんにちは、フロントエンドエンジニアの[てりー](https://twitter.com/teriteri_code)です。
僕の詳しいプロフィールは[こちら](https://terrblog.com/about/)


Reactを仕事で使いこなしたい人、Reactの知識に不安がある人に向けて、具体的な勉強方法のロードマップをまとめました。

https://terrblog.com/react-typescript-how-to-master/

# はじめに
ブラウザゲームを作る経験がしたくて、「遊び大全」の中で一番好きなゲームがコネクト4を自分で作ってみました。
リアクティブに画面の状態が変わり、ゲームが進行するので、
初学者向けのReact + TypeScriptの練習としては良い題材だったと思います。

この記事では作成の大まかな流れと学んだ知識などを書いています。
最初はチュートリアル記事にしようかと思ったのですが、いちいち説明しなくてもgithubにコメントを入れたので、それで伝わるかなーと判断しました。

また最近Reactを触り始めたこともあり、関数コンポーネントでしか今まで制作物を作っていないので、今回はあえてクラスコンポーネントで作りました。

# 作った物
コネクト4です。
日本語でいう四目並べですね。
縦横斜めのいずれかで4つ連続でコマを先に並べた方が勝ちとなります。

実際のゲームはこんな感じです。https://www.mathsisfun.com/games/connect4.html
※今回はオンライン機能の実装はしません。

で、今回作ったものがこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397606/6d703188-d8b4-c658-de73-1369f6ca1c04.png)


# 作り方
## 仕様を決める
最初の必要機能などからざっくりしたアウトラインを作りました。

- UI：6×7のセルを作る　
- セル：クリックしたら、その列の一番下が選択される　相手のプレイヤーの番になる
- ゲーム：縦、横、斜めで4つ揃ったら勝利

## UI：6×7のセルを作る
6×7のセル作成ですね。
セル1つ1つにplayer,indexというデータを持たせて、indexで配置が決まり、playerでどちらかに既に選択されているセルなら色が変わるようにしました。

## セル：クリック時のアクション
セルクリック時のアクションでは以下の機能をつけました。
- クリックしたセルのindexから列を判定して、その列で空いている一番下のセルが選択される処理
- セル選択後にplayerTurnが変わる処理

## ゲーム：縦、横、斜めで4つ揃ったら勝利
ここは理論の部分でどうすれば良いのか苦労しました。

あーだこーだ悩んだ結果、

横：連続する4つのindexを持つセルが並んでいる
縦：index、index + 7、index + 7 * 2、index + 7 * 3が並んでいる
斜め：index、index + 7 – 1、index +7 * 2 – 2、index + 7 * 3 – 3が並んでいる

で配列を切り出し、それらPlayerが全て一致しているかどうかをboolean型で返す関数を作り判定しました。

## 完成まで諸々
デザインを修正したり、文言を入れたり、コメントで簡単な説明を入れたりして完成です。
作成自体は3~4時間ほどかかりました。

# 感想
ブラウザゲームを作る経験ができたのが嬉しかったです。
いつか遊び大全にあるゲームを全て作りたいな！！(ピアノはなしで)

クラスコンポーネント縛りをしたのですが、好みは関数コンポーネントだなと改めて感じました。
現在はこのコネクト4をクラス→関数コンポーネントのリファクタリングをしているので、関数コンポーネントでの作り方、リファクタリングの方法などは今後まとめていく予定です。


最後まで読んでいただきありがとうございました。

#### もし現状の仕事に不満があるなら

転職ドラフトに登録して見てはいかがでしょうか？

実際に企業からのオファーを受ける事で、企業から見た自分の強みや市場価値などポジティブな発見がたくさんあります！！

https://terrblog.com/job-draft-merit/
Lightningフローの決定要素演算子「設定済み」について


今回はLightningフローについて実際に僕が陥ったミスついて述べたいと思います。

# 判定条件の「設置済み」について

フローを扱う際に決定要素の分岐条件はビジネスロジックを生成するにあたり使用されることが多いかと思います。

条件の設定として、「次の文字列と一致する」「次の文字列と一致しない」などの選択肢がありますが、なんとなく日本語から想像ができるかと思います。
その中でひとつ誤解を産みやすいものとして「**設定済み**」という選択肢があります。
「設定済み」は文面通り受け取ると、Not Null(Is Not Blank)だと思われがちですが実は違うんです。

Salesforceのドキュメントをよく見てみると、このように記載されていました。
>[リソース] の値が**レコード変数の項目**であり、**フローでその項目に少なくとも 1 回値が入力されている**。

そうなんです！
「設定済み」が適用されるのは**レコード変数に対して**となります。

# 「設置済み」についてフロー動作を確認する

実際に言葉だけだと分かりづらいため、決定要素の「設定済み」の動作を確認するためにフローで検証してみました。

まずは、レコード変更フローでレコードが作成される前のトリガにしてフローを作成します。

今回は2つのパターンで確認します。
1つめは、レコード変数を定義してレコード変数の項目に値を割り当てた時のその前後の設定済み状態を調べます。
![スクリーンショット 2020-10-24 2.00.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699607/ca14e23e-9874-89f0-cdbf-f9b9077e4574.png)

設定済みと判定された場合に以下のテキスト型カスタム項目に記録します。

* レコード変数設定前→項目の割り当てを行う**前**に判定し、設定済みがYesであれば「設定済み」を書き込み
* レコード変数設定後→項目の割り当てを行う**後**に判定し、設定済みがYesであれば「設定済み」を書き込み

2つめは、レコード変数フローで使用されるトリガレコード（$Record）の項目に対して値を割り当てた時のその前後の設定済み状態を調べます。
![スクリーンショット 2020-10-24 2.02.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699607/acebbe1f-1b4c-d43d-c1ee-e2a1fcd7b728.png)

こちらは設定済みと判定された場合に以下のテキスト型カスタム項目に記録します。

* トリガレコード設定前→項目の割り当てを行う**前**に判定し、設定済みがYesであれば「設定済み」を書き込み
* トリガレコード設定後→項目の割り当てを行う**後**に判定し、設定済みがYesであれば「設定済み」を書き込み

これで、レコード作成時にフローが動作した時にどのような状態となっているかを確認してみます。

結果は以下のようになりました。
![スクリーンショット 2020-10-24 5.56.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699607/b701e8e1-3b56-45d7-6e63-eac1abf77338.png)

この通りレコード変数に対しては「設定済み」の判定が機能するのがわかりましたが、**$Record変数に対しては項目の設定有無に関わらず「設定済み」と判断されてしまうことになります**。

# まとめ
フロー演算子の「設定済み」についてまとめると以下のようになります。

* 演算子の「設定済み」はNot Nullではなく、レコード変数の項目に対してフロー内で値が設定されていたかをチェックするもの
* 設定済みは$Record グローバル変数に対しては全て「設定済み」として扱われる（有用な判断ができないため注意！）

僕は「設定済み」がNot Nullだと誤解していました。
そのため、分岐条件を全部書き換えるハメに…。
ちなみに、<font color="Red">Not Nullで条件分岐したい場合はフロー演算子に「null」という選択肢があるので、値をFalseにすることで判定が可能</font>です。
![スクリーンショット 2020-10-24 7.55.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699607/9ae24880-62e1-2e81-1532-3ff1aac07d2f.png)
JavaScriptにおけるCookieにデータを保存・参照する方法

# Cookieにデータを保存する方法

```
document.cookie = 'id=1';
```

# Cookieのデータを参照する方法

```
alert(document.cookie);
```

# サンプルコード
```index.html
<section class="cookie">
    <h2>クッキー</h2>
    <button class="btnSave">保存する</button>
    <button class="btnRead">読み出す</button>
</section>
```

```main.js
// 「保存する」ボタンをクリックしたとき
document.querySelector('.btnSave').addEventListener('click', () => {
    // クッキーを保存する
    document.cookie = 'id=1';
    document.cookie = 'age=30';
    document.cookie = `name=${encodeURIComponent('あいうえお')}`;
})

// 「読み出す」ボタンをクリックしたとき
document.querySelector('.btnRead').addEventListener('click', () => {
    // クッキーを読み出す
    const obj = convertCookieToObject(document.cookie);
    console.log(obj);
    //  オブジェクトを JSON 文字列に変換して表示する
    alert(JSON.stringify(obj, null, ' '))
})

/*
    クッキーをObjectに変換する。
    @param cookies クッキー文字列
    @return 連想配列
*/
function convertCookieToObject(cookies) {
    const cookieItem = cookies.split(';');
    const obj = {};
    cookieItem.forEach((item) => {
        // 「=」で分解
        const element = item.split('=');
        // キーを取得
        const key = element[0].trim();
        // バリューを取得
        const value = decodeURIComponent(element[1]);
        // 保存
        obj[key] = value;
    });
    return obj;
}
```
Progate　JavaScript　V 

前回のIVと比べたら比較的簡単、ボーナスセクションでした。
インポート、エクスポートという言葉はゲームをインストールするときに体験したことがあったので、イメージしやすい分野でした。
ただ、すごい不思議な概念ですよね。誰が発案したのかとかを考えると面白いというか趣深いというか・・。
パッケージの部分はプログラミングの壮大さを感じましたね！
世界中の人が作ったモノをインポートして、自分のコードをカスタマイズできる機能が魅力的に感じました。
JavaScriptが奥深いというのは、こういった部分があるからなのでしょうか・・。
まだまだ勉強してもし足りない気分にもなりました(*´꒳`*)。
Next.jsで「document is not defined」と怒られたときの対処法

Next.jsを使っていると様々なエラーに遭遇します。その中でも

- `document is not defined`
- `window is not defined`
 
これらのエラーは良く見るので対処方法を解説します。
エラー画面は以下のようなものです。
![WS000006.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621361/83d7ed81-4306-6695-0ad7-2eca4d7b7af2.jpeg)


## documentの未定義エラーの対処方法

「document is not defined」の対処方法は2つあります。

### 1.documentの定義判定

1つ目は**グローバル変数にdocumentがあるのかの存在判定**です。
`document`が定義されている場合のみプログラムを実行するので`if (typeof document !== 'undefined') {} `でくくります。今回のプログラムでは`document`オブジェクトを使って、クッキーに値をセットしています。

```index.jsx
export default function Index() {
  //document変数が定義されているときのみ
  if (typeof document !== 'undefined') {
    //クッキーに値をセット
    document.cookie = "クッキー";
  }

  return (
    <div style={{textAlign: "center", marginTop: "50px"}}>
      {/* 値の表示 */}
      <h1>値：{typeof document !== 'undefined'?document.cookie:""}</h1>
    </div>
  )
}
```

![WS000001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621361/80162217-f46d-c23f-9f5c-857886c5cb07.jpeg)

### 2.ブラウザ実行判定

2つ目の方法はブラウザで動いているかの判定です。ブラウザで動いているときのみ、`document`を使った処理を実行します。`process.browser`がtrueの場合はブラウザで動いている証拠です。一方、`undefined`の場合はサーバーでの実行になります。

```index.jsx
export default function Index() {
  //ブラウザ実行時のみ
  if (process.browser) {
    //クッキーに値をセット
    document.cookie = "クッキー";
  }

  return (
    <div style={{textAlign: "center", marginTop: "50px"}}>
      {/* 値の表示 */}
      <h1>値：{process.browser?document.cookie:""}</h1>
    </div>
  )
}
```


##なぜ「documentが定義されていない！」と怒られるのか？

なぜ`document`や`window`が定義されていないと怒られているのかというと、**サーバーサイドでブラウザ用のグローバル変数を使おうとしているため**です。

Next.jsはサーバーサイド、クライアントサイド両方で動くフレームワーク。そのため、定義したソースはサーバー、ブラウザ両方の環境で実行されます。

そして、`document`や`window`はクライアントだけで定義されているグローバル変数です。サーバー環境で動かそうとすると「そんなグローバル変数は定義されていない！」とエラーが発生します。

なので、`if (process.browser)`でブラウザのみの判定を入れればサーバー環境での実行時には無視され、クライアント環境だけで動くのです。
Vuejsの学習のまとめ

<h1>Vuejsの学習のまとめ</h1>
目次
1.　Vuejs2でのthisの使い方
2.　上記の親ファイルのコード
3.　データ渡しのメソッドについて
4. props, $emitをEventManagement.vueに書く

<h2>Vuejs２でのthisの使い方</h2>

```javascript
<template>
<div>
<p>Good({{ halfNum }})</p>
<button @click="increment">+3</button>
</div>
</template>

methods: {
    increment() {
      this.$emit("my-click", this.number + 3);
}
  }
};

```
<h2>上記の親ファイルのコード</h2>
v-bindまたは:{{オブジェクト名}}を記述する。
### テンプレートにイベントを登録する
```javascript
<template>
<div>
  <GoodHeader></GoodHeader>
  <p>{{ number}}</p> 
  <GoodNum :number="number" v-on:my-click="number = $event"></GoodNum> 
//$eventとnumberをレンダリング
  <GoodNum :number="number" ></GoodNum>
</div>
</template>

```

<h2>データ渡しのメソッドについて</h2>
親から子へのデータの受け渡しで、$eventとして、登録でき
テンプレートを作成する。

```javascript
  methods: {
    increment() {
      this.$emit("my-click", this.number + 3);
    }
  } 
};

```
<h2>$emitを子から親へデータの受け渡しを設定する</h2>

###親側のコード
```javascript
<template>
<div>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
  <div>
   <h2>イベント管理</h2>
   <EventManagement v-model="eventData.title"></EventManagement>　
</template>
export default {
  data() {
    return {
      currentComponent: "sample"
      eventData: {
        title:"入力内容"
      }
    };
  },
  components: {
    sample,
    EventManagement
}
```
<h2>props, $emitをEventManagement.vueに書く</h2>
親ファイルのテンプレートのコードを省略できる。

```javascript
<template>
    <div>
        <label for="title">Theme</label>
        <input
         id="title"
         type="text"
        :value="value"
        @input="$emit('input',$event.target.value)" 
        >
        <pre>{{ value }}</pre>
    </div>
</template>

<script>
export default {
    props: ["value"]
};
</script>
```
【初心者向け】点滅するアニメーションをCSSで作る

# どうも7noteです。点滅するアニメーションの作り方

シンプルな点滅のアニメーションの作り方です。

**見本**

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/6b75ae44-837d-9d67-01c7-21367d2153b8.gif)

## ソース

```index.html
<p>ゲームを始める<span>TAP!!</span></p>
```

```style.css
span {
  color: #f00;
  font-size: .8em;
  vertical-align: top;
  animation : blinking 1s;             /* アニメーションを1秒間隔で行う */
  animation-iteration-count: infinite; /* 繰り返し回数を無限にする */
  animation-direction: alternate;      /* アニメーションを最初から、最後から交互に再生する */
}

/* アニメーション（右から左に移動） */
@keyframes blinking{
  0% { 
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
```

## 解説

アニメーションを1秒ごとに再生します。
1秒は0%→100%に行くのが1秒なので、往復設定をしているアニメーションでは1周するのに2秒かかっています。

`animation-iteration-count: infinite;`を指定して、無限に繰り返しを行っています。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】HTML・CSSのちょいテク詰め合わせ](https://qiita.com/7note)
Log Analytics Linuxエージェントコマンド集

# はじめに
エージェント経由でLog Analyticsへログを収集する作業が時たまあるのですが、コマンド忘れがちなのでコマンド集としてまとめておきます。

# エージェントのインストール要件
https://docs.microsoft.com/ja-jp/azure/azure-monitor/platform/agent-linux#agent-prerequisites

# インストール
```
# 通常のコマンド
wget https://raw.githubusercontent.com/Microsoft/OMS-Agent-for-Linux/master/installer/scripts/onboard_agent.sh && sh onboard_agent.sh -w <YOUR WORKSPACE ID> -s <YOUR WORKSPACE PRIMARY KEY>

# プロキシサーバがある環境下でのコマンド
wget https://raw.githubusercontent.com/Microsoft/OMS-Agent-for-Linux/master/installer/scripts/onboard_agent.sh && sh onboard_agent.sh -p [protocol://]<proxy user>:<proxy password>@<proxyhost>[:port] -w <YOUR WORKSPACE ID> -s <YOUR WORKSPACE PRIMARY KEY>
```

# エージェント再起動
```
sudo /opt/microsoft/omsagent/bin/service_control restart [<workspace id>]
```

# エージェントのアップグレード
```
sudo sh ./omsagent-*.universal.x64.sh --upgrade
```

# 現在登録されているワークスペースの確認
```
sudo /opt/microsoft/omsagent/bin/omsadmin.sh -l

Primary Workspace: <workspaceId> Status: Onboarded(OMSAgent Running)
```

# 現在登録しているワークスペースを削除
```
/opt/microsoft/omsagent/bin/omsadmin.sh -X
```

# ワークスペースの再登録
```
/opt/microsoft/omsagent/bin/omsadmin.sh -w <workspace id> -s <shared key> [-d <top level domain>]
```

# エージェントの削除
```
wget https://raw.githubusercontent.com/Microsoft/OMS-Agent-for-Linux/master/installer/scripts/onboard_agent.sh && sh onboard_agent.sh --purge
```

# 参考
[Linux コンピューターに Log Analytics エージェントをインストールする](https://docs.microsoft.com/ja-jp/azure/azure-monitor/platform/agent-linux)
[Windows および Linux での Log Analytics エージェントの管理とメンテナンス](https://docs.microsoft.com/ja-jp/azure/azure-monitor/platform/agent-manage)
[Linux 用 Log Analytics エージェントに関する問題のトラブルシューティング方法](https://docs.microsoft.com/ja-jp/azure/azure-monitor/platform/agent-linux-troubleshoot)
生成しないenum

Qiita Advent Calendar 2020 Swift 2日目のエントリーです。

1日目[「Swiftに搭載予定のC++相互運用機能」](https://kateinoigakukun.hatenablog.com/entry/2020/12/01/083949) は、
C++コードをSwiftコードとして呼び出せるようになる夢のような話でした。
ますますSwiftの時代ですね。

# 書いたこと

case値を持たないenumは生成することが出来ません。
その特性を利用して、enumは以下のような使い方も出来ます。

* 名前空間としてのenum
* 演算子の型を表すenum

# 名前空間としてのenum

SwiftはObjective-C同様、名前空間は正式サポートされていませんが、標準スタンダードライブラリーで用意されている[Unicode](https://swiftdoc.org/v5.1/type/unicode/)のようにUtility的な機能や定数をまとめる際に、名前空間としてenumが使用されます。

enum内部では以下の宣言が出来ます。

* `typealias`
* `struct` / `enum` / `class`
* `static let` / `static var` / `static func`

使い所としては、以下のような場面が想定されます。

* 定数をまとめる
* Utility的な機能をまとめる

例1: 定数をまとめる

```enumで定数をまとめる.swift
enum 👮 {
    static let name = "Mike"
    static let age = 32
    static let gender = 0
}
print(👮.name);
```

例2: Utility的な関数をまとめる

```enumでUtility的な関数をまとめる.swift
enum Qiita {
    // URLを返す
    static func commentURL(_ commentId: String) -> URL {
        return URL(string: "\(scheme)://\(host)/\(Path.comments)/\(commentId)")!
    }

    // 定数をまとめる
    private static let scheme = "https"
    private static let host = "qiita"
    private enum Path {
        static let comments = "comments"
        static let users = "users"
        static let tags = "tags"
    }
}


print(Qiita.commentURL("14159265359"))
```

# 演算子の型定義

Arrayの添字に、`...`演算子を渡すことが出来ます。

```Arrayはカスタムな演算子を添え字に渡せる.swift
let fruits = ["🍎", "🍌", "🍊", "🍐", "🍉"]
let sliced = fruits[...] // ArraySlice<String>  ["🍎", "🍌", "🍊", "🍐", "🍉"]
```

これは以下のように[メソッドが定義](https://developer.apple.com/documentation/swift/array/3017543-subscript)されているためです。

```array.swift
subscript(x: (UnboundedRange_) -> ()) -> ArraySlice<Element> { get set }
```

この`UnboundedRange_`がenumです。

```UnboundedRange_.swift
public enum UnboundedRange_ {
  public static postfix func ... (_: UnboundedRange_) -> () {
    fatalError("uncallable")
  }
}
```

`UnboundedRange_`内で、`(UnboundedRange_) -> ()`型が返すカスタム演算子`...`が定義されています。

これによって`(UnboundedRange_) -> ()`で宣言された引数に、`...`演算子を渡すことが出来ます。


# まとめ

正式に名前空間がサポートされているC++、C#、PHPでは、名前空間を省略するための機能も用意されています。
(C++,C#ならば、`using`、PHPならば、`use`)

Swiftではどちらかというと上記の役割はモジュールが担っているところがあり、複雑になりかねないためサポートに踏み切れない理由がありそうです。

# 参照

以下の記事をまとめました。

https://qiita.com/takasek/items/3497188559fbf717751b
→ 「なぜ名前空間としてenumが使われるのか」について詳細に解説されています。

https://qiita.com/ysn/items/29363f0f6cc78d1d6561
→ カスタムの演算子の型の作り方を解説しています。

https://qiita.com/YOCKOW/items/dd409b9588f4be72f58f
→ UnboundedRange_型についてはこちらで詳しく解説されています。Array[...]の存在はこちらの記事でしりました。
今日の積み上げ python 学習記録#2　+　{}[]キーの位置知らんかった人向け(笑)

#本日の学習15:00～16:30
15：30からprogate有料版のpython編を引き続きやってましたが僕にとっては重大なことを発見しましたのでメモ代わりに記事を上げときます。
プログラミングしている方やパソコンスキルがある方や無い方でも僕以外の人間であればもしかしたら当たり前すぎな事だと失笑されるかもしれません(失笑)
excelVBAは多少経験があって()　丸括弧というのでしょうか？これはVBAの時でもrange("A1")のようによく使用していたのでpythonでも何も問題は無かったのですが問題はこれ➡[[[[[]]]]]]]{{{{{{{}}}}}}}}
角括弧、波括弧というのでしょうか？リストや辞書を作るときに使用するあれです！今までこの二つを使用するときは全角モードにして一々shift+8を押して候補から選んでました(笑)
知らないって恐ろしいですね、pythonの勉強を初めておそらく合計30時間くらい経ちましたが今までエンターの左側にあるのを気付かずに上記の方法でずっとやってました。youtubeやUdemyで講師の方達がこの括弧をうつのが早すぎて僕はセンスが無いわ～って思ったりこれがめんどくさくてめんどくさくていつか挫折する時はこれが原因一位やなって思ってました。
いや、ぐぐれよって話でしょうけど常識的すぎて記事がみつからなかったんです～(笑)
万が一僕と同じような人いたらいけないのと、僕が忘れたらいけないので記事上げときます。引き続き学習頑張ります！！
PowerShellによるChocolateyのインストール方法

#インストール方法
英語が苦手な方向けにWindows版のChocolateyのインストール方法を残しておきます。

1.PowerShellを**管理者権限**で実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490777/388c4453-80c3-eafa-4bc4-cf5bb7003a06.png)

2.PowerShellで下記を入力します。

```
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
```

3.PowerShellで、chocoと打って、バージョン情報が出てくればインストール完了です。

2,3の実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490777/55fa5a27-6b72-0744-868c-03718a691fd4.png)


#参考サイト
https://chocolatey.org/install
LXDE・TightVNC・noVNCをインストールしてブラウザ経由でリモートデスクトップ環境を構築してみる 

リモートでの障害対応する時の作業環境として、リモートデスクトップ環境を構築した時のメモとなります。Amazon Workspacesでも良かったのですが、OSはWindowsとAmazonLinuxしか選択肢がないので、Ubuntu上にLXDE・TightVNC・noVNCを設定して、ブラウザ経由でリモートデスクトップ環境を構築してみました。

# 環境
- AWS
- Ubuntu Server 20.04 LTS（AMI: ami-0f2dd5fc989207c82）

# インストール手順
## パッケージアップデート
- 起動直後のUbuntuを最新の状態にする

```
sudo apt update
sudo apt upgrade
```

## LXDEインストール
- LXDEのインストール（最小限の機能が問題ないのであれば `lxde-core` のインストール）

```
sudo apt install lxde
sudo reboot
```

## TightVNCインストール
- vncサーバとしてTightVNCをインストール

```
sudo apt install tightvncserver
sudo apt install xfonts-base
vncserver :1
cp -p ~/.vnc/xstartup ~/.vnc/xstartup.bk
chmod +x ~/.vnc/xstartup
vi ~/.vnc/xstartup
*** 最終行に追記
-----
lxsession -s LXDE &
-----

vncserver -kill :1
vncserver :1
```

## TightVNC自動起動設定
- サーバ起動時に自動的に起動するよう設定

```
sudo vi /lib/systemd/system/vncserver@1.service
*** 新規作成
---
[Unit]
Description=Start TightVNC server at startup
After=syslog.target network.target

[Service]
Type=forking
User=ubuntu
Group=ubuntu
WorkingDirectory=/home/ubuntu

PIDFile=/home/ubuntu/.vnc/%H:%i.pid
ExecStartPre=-/usr/bin/vncserver -kill :%i > /dev/null 2>&1
ExecStart=/usr/bin/vncserver -depth 24 -geometry 1280x768 -localhost :%i
ExecStop=/usr/bin/vncserver -kill :%i

[Install]
WantedBy=multi-user.target
---

sudo systemctl enable vncserver@1.service
sudo systemctl start vncserver@1.service
```

## noVNCインストール
- ブラウザ経由でアクセスするためにnoVNCをインストール

```
sudo apt install novnc websockify python-numpy
websockify -D --web=/usr/share/novnc/ 6080 localhost:5901
```

## noVNC自動起動設定
- サーバ起動時に自動的に起動するよう設定

```
sudo vi /lib/systemd/system/novnc.service
*** 新規作成
---
[Unit]
Description=noVNC startup

[Service]
Type=simple
ExecStart=/usr/bin/websockify -D --web=/usr/share/novnc/ 6080 localhost:5901
ExecStop=/bin/kill ${MAINPID}
Restart=always
User=ubuntu
Group=ubuntu

[Install]
WantedBy=multi-user.target
---

sudo systemctl enable novnc.service
sudo systemctl start novnc.service
```

## ブラウザ経由で接続してみる
- `http://<IP Address>:6080/vnc.html` にアクセス
![](https://makaaso-tech.com/wp-content/uploads/2020/11/Screen-Shot-2020-11-28-at-14.30.45-1024x623.png)

- vncserver初回起動時に設定したパスワードを入力
![](https://makaaso-tech.com/wp-content/uploads/2020/11/Screen-Shot-2020-11-28-at-14.30.58-1024x623.png)

- リモートデスクトップ環境にログイン完了
![](https://makaaso-tech.com/wp-content/uploads/2020/11/Screen-Shot-2020-11-28-at-14.31.12-1024x622.png)

# 感想
- ブラウザ経由でアクセスできるのは便利ですね。セキュリティを考えると認証をどうするか・SSL通信で暗号化する必要があるなどの課題があると思います。

# 参考
- [まかあそてっく](https://makaaso-tech.com/aws-ubuntu20-04-lxde-tightvnc-novnc/)
過去に実行したコマンドを検索

historyを使うと過去に実行したコマンドがこのように検索できる。

```terminal
 (base) xxx@yyy:~/katayama/DeepIE3D/DeepIE3D_Training$ history
    1  systemctl status nvidia-persistenced.service 
    2  systemctl start nvidia-persistenced.service 
    3  clear
    4  vi /lib/udev/rules.d/40-vm-hotadd.rules
    5  ls /etc/udev/
    6  vi /etc/udev/rules.d/
    7  sudo cp /lib/udev/rules.d/40-vm-hotadd.rules /etc/udev/rules.d
    8  sudo sed -i '/SUBSYSTEM=="memory", ACTION=="add"/d' /etc/udev/rules.d/40-vm-hotadd.rules 
    9  sudo /usr/bin/nvidia-persistenced --verbose
   10  journalctl -xe
   11  dkms status
   12  nvidia-smi 
   13  cd nakamoto/pre_exp/evolo/
   14  clear
   15  ./darknet 
   16  systemctl status nvidia-persistenced.service 
   17  clear
   18  nvidia-smi
```

grepと組み合わせるとコマンドの検索も可能。

```terminal
(base) xxx@yyy:~/katayama/DeepIE3D/DeepIE3D_Training$ history | grep dart
  494  dart --version
  566  history | grep dart
```
ターミナルからVSCodeをカッコよく起動する方法

# はじめに
わりとメジャーなやり方らしいので、有名かと思います。自分はこれまで知らず使っていたので、まだ知らない方にもぜひ使っていただけたらと思います。

## 手順
1.VSCodeを起動した状態で `Shift(⇧)`+ `option(⌥)` + `Command (⌘) `で`コマンドパレット`を起動(もしくは左下の歯車のマークからコマンドパレットをクリック)
2.shellと入力すると `シェルコマンド: PATH内に 'code' コマンドをインストールします`という項目があるので、クリック
3.これでパスが通るので`code`コマンドでVSCodeを立ち上げることが出来る

### 補足
以下のように、引数に`.(ドット)`を渡すことで、カレントディレクトリをワークスペースとして起動することが出来る。

```terminal
code .
```
【備忘録】Swift 実践入門について　第3章

Swift 実践入門のまとめ。
分からない部分の抜粋も記載し、解決できたら随時更新していきます。
なお、ここに記載している以外でも「わけわからん…」となっている部分も多々ありますが、
今は必要ない、と言い聞かせて飛ばしています。


第3章
型（Intなど）
理解度：80％くらいか

3.2
Bool型の論理積…true or falseの世界で、2つのBool型がともにtrueの場合のみtrueと考えること。&&で記入する。
Bool型の論理和…true or falseの世界で、2つのBool型のどちらかがtrueの場合trueと考えること。||で記入する。

3.3
数値型は以下のように変更することができる。
let a : Float = 1.0
let b : Double = Double(a)  //このDouble(a)の部分をイニシャライザと呼んでいる。
これはString型でもString(a)で“1.0”のように可能。

3.4
文字列リテラルでは特殊文字を使うことで改行などを可能にしている。
＼n　これで改行　などなど

3.5
Optional型は何となく理解している感じがする。これって「こんな設定を切り分けて作っていくのかスゲー！」って感動しそうだけど、そこまでなってない。実践で実感がわかないとダメかな。
アンラップ…値の取り出し→if-let文、??演算子、強制アンラップ
プロパティ名?、メソッド名?は、値があれば?以降のプロパティやメソッドへアクセスし、
nilならアクセスしない。

3.6
Any型について。どんな型も取れるが、四則演算などのその型でできることができなくなる。

3.7
タプル型について。複数の型を指定することができて、値を取り出すことも容易。
let tpl = (123, "ABC", true)
print(tpl.0) //123
print(tpl.1) //"ABC"
print(tpl.2) //true

3.8
キャストについて。ある型を別の型として扱う操作をキャストという。Any→IntやInt→Anyなど。
アップキャスト（具体から抽象へ）…123 as Any
ダウンキャスト（抽象から具体へ）…any as? Int もしくは any as! Int

3.9
値の比較のためのプロトコル
プロトコルとは…プロパティやメソッドなどが持つ最低限のルール。
ここでは==とComparableプロトコル（<>などの比較）


安全性を保つためにそれぞれの値にはそれぞれの型がある。Any型をどこで使うかは実践が必要。
除外リスト

#リストから除外したい文字列を含むものを除く

すらすらかけなかったから、メモとして残す。（頭固いな。。。）

```python
exclude_list = ["hoge", "fuga", ] # sources からhoge, fugaを含む要素を除去
sources = filter(lambda e: all(x not in e for x in exclude_list), sources)
print(list(sources))
```

正規表現とかでも書けるけど、pythonの正規表現は行儀が良すぎて使いにくい。perl,sedのように"~"で書けると楽なんだけど。。。
NVM→Nodeインストール："command not found: nvm" となってしまう

#結論
①`touch ~/.bash_profile`を実行
②再度NVMインストール
③`source ~/.bash_profile`を実行
④Nodeインストール
→無事完了
※Mac環境

#失敗した経緯
npmを利用するに当たって、
NVM→Nodeの流れでインストールをしようとしました。
1.NVMインストール
[NVMドキュメント](https://github.com/nvm-sh/nvm#install--update-script)の”Install & Update Script”にある”curl〜”から始まるコマンドをコピーしてローカル上のターミナルから実行。
難なく成功（のように思われた）

2.Nodeインストール
 同じく[NVMドキュメント](https://github.com/nvm-sh/nvm#usage)から今度は”Usage”というところにあるコマンド
`nvm install node`
をターミナルで実行。
そしてタイトルのこれ↓になる。

```
command not found: nvm
```

#原因と問題解消方法
上記1.NVMインストールにてコマンド実行後、NVMがインストールされるのと同時に
ローカル上のホームディレクトリにある「.bash_profile」というファイルに下記のような文が生成されます。

```:.bash_profile
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
```
※インストールしたタイミングやローカルの環境によって内容は若干異なるかもしれないです。

しかし、".bash_profile”ファイルがそもそも存在しなかったらインストール時に上記文が生成されないのです。
NVMコマンド利用時にこの".bash_profile”の設定値を見にいっている様で、上記のような文が生成されていないと、NVMコマンドが認識されないということみたいです。
つまり、NVMインストールの前にtouchコマンドで".bash_profile”を作っておく必要があります。（ホームディレクトリ上に）
`touch ~/.bash_profile`
そして再度NVMインストールで無事”.bash_profile”ファイルに上記文が生成されました。
これで一安心・・・するにはまだ早いようで、上記”.bash_profile”ファイルの設定値を反映させるためのコマンドを実行する必要があります。
`source ~/.bash_profile`

これでようやく上記2.Nodeインストールがうまくいきました。
expressでOpenAPI仕様のAPIを実装するときのTips

## 要点

1. express-openapiを使おう (openapi-generatorではなく)
2. security handlerの実装には、シンプルにOpenAPIのinitializeメソッドに引数securityHandlersを渡すのが良い。(openapi-security-handlerは、必要ない)

## express-openapiを使おう (openapi-generatorではなく)

OpenAPI仕様のYAMLファイルを Swagger Editor (https://editor.swagger.io/) などを用いて作った後、openapi-generator (https://github.com/OpenAPITools/openapi-generator) を使ってスケルトンを作れそう...と思うのですが、openapi-generatorの出力するNode.js向けのスケルトンは、あまり良い感じではないです。

むしろexpress-openapi (https://www.npmjs.com/package/express-openapi) の方が、使う機能だけ使って書くように考えられているので、やりたいことに集中できるように思います。

## security handlerの実装には、シンプルにOpenAPIのinitializeメソッドに引数securityHandlersを渡すのが良い。(openapi-security-handlerは、必要ない)

APIサーバを実装するとき、ほとんどの場合、セキュリティのことも考えることになると思います。

このとき、express-openapiのHighlightsを見ると、こういうことが記述されています。

> Leverages security definitions for security management.
> * See openapi-security-handler

openapi-security-handlerを使う必要があるのかな...と感じますが、必要ありません。

express-openapiでセキィリティハンドラを実装するときは、initializeメソッドの引数secuurityHandlersを渡すのが正解です。

```javascript
initialize({
  apiDoc: apiDoc,
  app: app,
  securityHandlers: {
    keyScheme: function(req, scopes) {
      return Promise.resolve(true);
    }
  }
});
```

reqはexpressでおなじみのもので、scopesには、以下のようにAPIの定義のsecurityでスキーマ別に定義するスコープ配列が渡ってきます。

```yaml
security:
- keyScheme: [admin]
```

セキュリティハンドラの戻り値は、即値でbooleanを返すか、booleanを返すPromiseとします。

trueが認証OKで、falseがNGです。
【無料プロジェクト管理ツール】ClickUpが最高過ぎて、Asanaの記事を書いたばかりだけど一瞬で乗り換えた話

## はじめに
先週、QiitaにAsanaすごい便利という記事を書きました。
[【Asana】ペアチケッティングしたらものすごい効果があった話](https://qiita.com/kaku3/items/99db85f64fbe1296d9fe)

が、その後 ClickUp というプロジェクト管理ツールがあるのを知りまして少し試したところ、Asanaで不満に思っていた点がおよそ解消されていた上に地味に快適だったので、~~ClickUp では残念ながらリアルタイムで全ユーザーがチケットの更新確認はできませんが、~~乗り換えることにしました。
(2020/11/30追記 : リアルタイム更新確認できました。ペアチケッティングし放題です)

一週間使ってみて、日々の基本的な管理工数が大幅に下がった様に思えたので、今週は ClickUp の記事を書きたいと思います。

[ClickUp](https://clickup.com/onboarding)


## Asana(無料) で不満だったけど ClickUp(無料) で解決している点

- ~~Gantt が無料~~(2021/05/08追記 : Gantt は100回使うと有料になってました)
- List の概念が快適
- Workspace / Folder / List 単位で閲覧制限ができる
- ステータスの概念がある
- プロジェクトを横断してチケットを見れる

ClickUpはたまにバグっぽい挙動も見られたりしましたが、操作感はAsanaとほぼ同じでした。
ただ、全体的な機能としては向上している印象でした。

また、Workloadとpdf出力等が有料という絶妙な設定で、主に**DXしない**偉い人向けの機能が有料になっている印象でした。現場は回るけど報告がめんどくさいなんとかしたいってなるとお金がかかる感じでした。


## Gantt が無料 / プロジェクトを横断してチケットを見れる

Asanaでは、instagantt 連携でガントチャートを見ることもできました。(3プロジェクトまで無料)
ただし、Sectionの処理がうまく表現できていないのかカンバンのプロジェクトをガントチャート表示すると進行に合わせてグダグダになってしまってい実用的とは言えない状態でした。

ClickUpではステータスでカンバンを実現しており、ガントチャート表示に影響せず実用レベルに思えました。

また、Workspace や Folder 等の選択範囲以下のガントチャートやカレンダーが見られる仕様が、プロジェクト掛け持ち勢にとっては最高に便利でした。
プロジェクト単位でFolderを作成しておけば、Workspaceを選択した際に、プロジェクトを横断したガントチャートやカレンダーが確認できます。

![00_gantt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/b2e884ec-e39d-3c7c-f9e4-0a270c197e5c.png)

![00_calendar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/4d6bb2ae-d6b1-fb76-749d-4c3d468a55ef.png)


## List の概念が快適

個人的には、調査チケットが解決済みになってからしばらくして「あの調査内容なんだっけ？」となった時にチケットを発掘できなくて困る経験がよくありました。
調査が完了したチケットは調査Listに移動してClosedにし、調査Listのみ「Closed のチケットも表示」とするとこの問題が解決されて快適でした。
また、QAなど回答がもらえる時期が不明瞭なもの、保留、見積、など一回スコープ外に消えてから時間をおいて再度問い合わせが来るタスクも別Listに入れるのが快適そうです。

![02_list.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/5f4a7f5b-77e4-55a8-b847-85212e2a6c19.png)


## Workspace / Folder / List 単位で閲覧制限ができる

共有をする際に、Folder やListを共有すればそれ以外のFolderやListは表示されず安全に共有できます。
Asanaではこれができなかったため、社外のユーザーと気軽に共有ができませんでした。


## ステータスの概念がある

Redmine に慣れ親しんだユーザーであれば移行しやすいと思いますし、実際便利でした。
ステータスの種類は、Normal, Kanban, Scram 等から選択可。Customで自分で設定も可能です。

変にいじらない方が自動で標準化されて良さそうに思います。

※スクリーンショットは Scrum のもの

![01_status.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/8c37e66d-f87f-0786-3122-99a76a76ffbd.png)


## おわりに

本文では紹介しませんでしたが、Asana他からのチケットインポート機能も充実しており、移行は一瞬でした。
他にもTimeTrackingや、チケットとbitbucket のコミット連携など、細かく行き届いた機能も盛りだくさんです。

Redmineで消耗しているけどJiraにお金が払えない、Bitbucketの課題管理は重いしイマイチだった、trello も使ってみたけどカンバンが意識高すぎて長続きしなかった、ToDoとか細かくアプリ使ってるけど全部まとめたい、などなどありましたら、ぜひ試してみて頂きたいです。

[ClickUp](https://clickup.com/onboarding)
python from import*使い方を解説

# python from import*使い方を解説

### importとは、別のファイル（モジュール）に記載されたpythonコードを取り込む機能のこと。

以下のようなファイルamod.pyがあるとする

def a_method():
pass
a_var = None

別のファイルbprog.pyでは、以下のようにamod.pyのメソッドや変数を参照できる。


pythonには、公式、サードパティ製のモジュールが多数存在し、多様な機能を提供している。
プログラムの冒頭でモジュールをインポートすることでそれらモジュールを活用できる。


「from import *」の意味は？
上述のように、 <module>.<method>, <module>.<variable> のような記法で、モジュールのメソッドや変数を参照できます。
さらに、 from <module> import <method>, from <module> import <variable> という記法を用いると、モジュール名を省略できるようになります。  
from amod import a_method
from amod import a_var
a_method()
a_var
  加えて 「*」(ワイルドカード)を用いると、モジュール内で定義されているメソッドや変数をまとめてインポートできます。  
from amod import *
a_method()
a_var
Markdownの練習をしてみる。

# はじめに
試しに何か投稿してみようと思ったら、Markdownとやらで記述する必要があるらしいので、[Qiita Markdown 書き方 まとめ](https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1)というページを丸写しして、Markdownの練習をしてみました。
なるほどなるほど。

# ＊見出し

>\#見出し1
\##見出し2
\###見出し3

↓
# 見出し1
## 見出し2
### 見出し3


# ＊コードを書く
>\`\`\`python:sample.py
    def sample():
     print("hello qiita")
\`\`\`

↓
```python:sample.py
    def sample():
    print("hello qiita")
```

・・・
>\`print`

↓
>`print`

# ＊リンク
>\[Qiita](http://qiita.com/)

↓
>[Qiita](http://qiita.com/)

# ＊画像
>!\[Qiita](http://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png)

↓
![Qiita](http://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png)

# ＊引用
>\>引用

↓
>引用

# ＊文字修飾
>\_イタリック_
\*イタリック*
\__太字__
\**太字**
\~~打ち消し~~

↓
_イタリック_
*イタリック*
__太字__
**太字**
~~打ち消し~~

# ＊リスト
>\* リスト

>\+ リスト

>\- リスト

>1\. リスト
2\. リスト

↓
* リスト

+ リスト

- リスト

1. リスト
2. リスト

# ＊水平線
>\***
\---

↓
***
---

# ＊テーブル
>\|ヘッダ！！！|ヘッダ！！！|ヘッダ！！！|
|:---|:---:|---:|
|左揃え|中央揃え|右揃え|

↓
|ヘッダ！！！|ヘッダ！！！|ヘッダ！！！|
|:---|:---:|---:|
|左揃え|中央揃え|右揃え|

# ＊エスケープ
>\\#見出し1

↓
\\#見出し1
WebAuthn 概要

[FIDO学習](https://qiita.com/KWS68810828/items/4adbfa7c5aa717c02089)の流れで、WebAuthについても概要（概念や大まかな処理の流れ）をまとめる。

## WebAuthnとは

* WebAuthn(WebAuthenticationの略。「ウェブオースン」と読む。)はFIDO認証をベースとした、ブラウザ経由でパスワードレス認証を行うための仕組み。
* WebAuthnを実現するために用意されているJavaScript APIをWebAuthn APIと呼ぶ。


## WebAuthnの概念

* **サーバ**
  * サービスやRelying Party(RP)とも呼ぶ。
  * 認証情報の登録、認証結果の検証を行う。
* **認証器(Authenticator)**
  * 秘密鍵と公開鍵の作成を行い、秘密鍵をセキュア領域に保存しておく機能を持つ主体。
  * 認証時に本人性の検証結果に対して秘密鍵を用いた署名を行う。

## WebAuthnの仕組み

### 登録

![](https://mdn.mozillademos.org/files/16189/WebAuthn_Registration_r4.png)



※WebAuthn による登録手順と各アクションでのデータのフロー図([MDN](https://developer.mozilla.org/ja/docs/Web/API/Web_Authentication_API)より引用)

**⓪ ユーザはWebAuthn登録情報をサーバに送信し、ユーザ登録を要求する。(ユーザ/認証器登録開始)**
**① サーバはフロントエンドアプリ（Javascript Application）に対して、レスポンスを返却する。**

* チャレンジ生成→チャレンジ＋ユーザ情報を保存。
* チャレンジ, RP情報などを含めてレスポンスを返却。

**② フロントエンドアプリはWebAuthn APIを呼び出し、認証器に認証データを生成させる。**
**③ 認証器はユーザ確認を行い、公開鍵とAttestationを生成する。**

* Attestation:認証器の正当性を証明する情報。
* ブラウザは、認証器を選択し、本人確認を行うことを促す。

**④ 認証器は生成した公開鍵とAttestation等の認証情報をブラウザに返却する。**
**⑤ フロントエンドアプリは、受け取った認証情報をサーバに送信する。**
**⑥ サーバは認証情報を公開鍵を用いて検証し、正当性を確認できた場合に登録成功とする。**
### 認証

![](https://mdn.mozillademos.org/files/15802/MDN%20Webauthn%20Authentication%20(r1).png)

※WebAuthn による認証手順と各アクションでのデータフロー図([MDN](https://developer.mozilla.org/ja/docs/Web/API/Web_Authentication_API)より引用)

**⓪ ユーザはサーバへ認証を要求する。**
**① サーバはユーザの登録済みチェックを行い、フロントエンドアプリに対して、レスポンスを返却する。**
**② フロントエンドアプリはサーバから返却されたレスポンスからWebAuthn API を呼び出し、認証器に認証データを用意させる。**
**③ 認証器はユーザ確認を行い、Assertionを生成する。**
* Assertion : 認証器が署名した、チャレンジやRPの情報を含んだ情報。

**④ 認証器はAssertionに署名した認証情報をブラウザに返却する。**
**⑤ フロントエンドアプリは認証器から受信した認証情報などを含めたリクエストをサーバーに送信する。**
**⑥サーバは認証情報を公開鍵を使って検証し、正当性を確認できれば認証を成功とする。**

## 参考情報

* [Web Authentication API](https://developer.mozilla.org/ja/docs/Web/API/Web_Authentication_API)
* [WebAuthnことはじめ](https://engineering.mercari.com/blog/entry/2019-06-04-120000/#%E6%A6%82%E8%A6%81)
* [Yahoo! JAPANでの生体認証の取り組み（FIDO2サーバーの仕組みについて）](https://techblog.yahoo.co.jp/advent-calendar-2018/webauthn/#webauthn%E3%81%A8fido%E8%AA%8D%E8%A8%BC%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
【Unity  ARFoundation】平面検知した場所にドアを置く&タップしてドアを開閉する

#はじめに
UnityのAR Foundationを使って「平面検出した場所にタップしてドアを置く&そのドアをタップすると開閉する」というものを作ってみました。

#やろうとしたこと
平面を検出する
↓
検出した平面にドアを配置
↓
ドアをタップするとドアが開く、閉じる

#結果
完成したものはこちらです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ARFoundationの勉強中。作ってみました。<br>「平面検知した場所にドアを置いて、タップしてドアを開閉する」<a href="https://twitter.com/hashtag/Unity?src=hash&amp;ref_src=twsrc%5Etfw">#Unity</a> <a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://twitter.com/hashtag/ARFoundation?src=hash&amp;ref_src=twsrc%5Etfw">#ARFoundation</a> <a href="https://twitter.com/hashtag/AugmentedReality?src=hash&amp;ref_src=twsrc%5Etfw">#AugmentedReality</a> <a href="https://t.co/sBPFKDFUro">pic.twitter.com/sBPFKDFUro</a></p>&mdash; AR (@AR93290915) <a href="https://twitter.com/AR93290915/status/1332583992860708866?ref_src=twsrc%5Etfw">November 28, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#補足
・デフォルトの平面検出のPlane（AR Default Plane）が好きではなかったので、Shaderを使用して変更しています。
こちらのサイトを参考にしました。
↓
[【Unity】AR Foundationの平面認識のPlaneをカスタマイズする](https://www.wwwmaplesyrup-cs6.work/entry/2020/08/06/004546#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%AE%E6%96%B9%E6%B3%95)

・ドアを設置したあとも平面検出のPlaneが残ったままなので、ドアを設置したら平面検出のPlaneを消すようにしました。

・タップした場所にパーティクルエフェクトを入れました。


#感想
もともとARに関してはSwiftのARKitを勉強していて、Unityは最近はじめたばかりで理解が浅く、かなり時間がかかりました。
特にタップしてドアを設置した後にドアをRaycastで開閉するところでかなり苦戦しました。