OmniAICreator/Qiita-1.07M huggingface dataset:
C++例と課題

#例題

C++今日のエラー
https://qiita.com/kaizen_nagoya/items/9107995df7b36d288603

```c++:a.cpp
#include <iostream>
int main(void){
    std::cout << "main" << std::endl);
    return 0;
}
```
を少し手を入れて。

```c++:a.cpp
#include <iostream>
#include <cstdlib>
using namespace std;
int main(int argc,char * argv[]){
	 cout << argv[0] << endl;
	 return EXIT_SUCCESS;
}
```

#課題1 using namespace std;

using namespace std; の危険性と注意点・代替案【なぜ使わないほうがいいのか】
https://marycore.jp/prog/cpp/de-using-namespace-std/

#課題2
int argcを使っていない。

argv[1]以降を使う場合には、argcがいくつかを確かめる必要がある。
argv[0]は実行時のコマンド文字列が入っている。

#課題3
何をreturnするとよいか。
C++ではなく、OSが決めることかも。
OSが何を返して欲しいか、あるいはOSが何か処理をするかで決まる。
SwiftのNil結合演算子（Nil-Coalescing Operator）

# この記事は何？
Swiftの`??`演算子について、調べました。

> Swiftを基礎から学ぶには
自著、工学社より発売中の「[まるごと分かるSwiftプログラミング](https://amzn.asia/d/7YPWJwl)」をお勧めします。変数、関数、フロー制御構文、データ構造はもちろん、構造体からクロージャ、エクステンション、プロトコル、クロージャまでを基礎からわかりやすく解説しています。

## 環境
Swift5.1
Xcode11 beta5
macOS Mojave

# Nil-Coalescing Operatorの動作
_nil-coalescing_ 演算子（`??`）は、次のように記述します。

````Swift:nil-coalescingの基本
optionalValue ?? defaultValue
````

このコードは...

- `optionalValue`に値がある場合、アンラップする
- `optionalValue`が`nil`の場合、デフォルト値`defaultValue `を返す 

`optionalValue `は常にオプショナル型です。 
`defaultValue `は、`optionalValue `の型と一致する必要があります。
_nil-coalescing_ 演算子は、次のコードの省略形です。

````Swift:三項演算子
optionalValue != nil ? optionalValue! : defaultValue
// optionalValue ?? defaultValue と同じ
````

上記のコードは、三項条件演算子と強制的なアンラップ`optionalValue!`を使用して...

- `optionalValue`が`nil`でない場合、`optionalValue`でラップされた値にアクセス
- `optionalValue`が`nil`である場合、`defaultValue `を返す 

_nil-coalescing_演算子は、この条件付きのチェックとアンラップを簡潔で読みやすい形式でカプセル化する、よりエレガントな方法を提供します。

### 短絡評価
`optionalValue`の値が`nil`でない場合、`defaultValue`の値は評価されません。 
これは _short-circuit_（短絡評価）として知られています。

## ??演算子の使い方
以下の例では、_nil-coalescing_ 演算子を使用して、デフォルトカラーとオプショナルなユーザー定義カラーを使い分けます。

````Swift:コード1
let defaultColorName = "red"
var userDefinedColorName: String?   // 初期値はnil
````

`String?`として定義された`userDefinedColorName`のデフォルト値は`nil`です。 
`userDefinedColorName`はオプショナル型であるため、_nil-coalescing_ 演算子を使用して、使用する前に値を評価できます。 
次のコードは、`??`演算子の結果として、変数`colorNameToUse`に文字列`"red"`が割り当てられます。 

````Swift:コード2
var colorNameToUse = userDefinedColorName ?? defaultColorName
// userDefinedColorName は nil
// よって、colorNameToUse に "red" が割り当てられる
````

`userDefinedColorName`は`nil`であるため、`userDefinedColorName ?? defaultColorName`は、`defaultColorName`の値`"red"`を返します。

`userDefinedColorName`に具体的な値を割り当ててから、_nil-coalescing_ 演算子によるチェックを再度実行すると...
デフォルトの代わりに`userDefinedColorName`内にラップされた値が使用されます。

````Swift:コード3
userDefinedColorName = "green"    // 具体的な値を割り当てると...
colorNameToUse = userDefinedColorName ?? defaultColorName
// userDefinedColorName は nil じゃない
// よって、colorNameToUse に "green" が割り当てられる
```
Swift参考記事まとめ

個人的に定期的に見返したい記事をまとめてみました。

###アニメーション
swiftアニメーション基礎
▶︎https://qiita.com/hachinobu/items/57d4c305c907805b4a53

タップ位置から「吹き出し」を表示する
▶︎https://qiita.com/ddd503/items/2bd35b86313f1761e8e0

###サーバ通信
HTTPリクエスト概要について
▶︎https://github.com/mixi-inc/iOSTraining/blob/master/Swift/pages/day3/4-2_HTTP-request-basic.md

JSONSerializationについて
▶︎https://github.com/mixi-inc/iOSTraining/blob/master/Swift/pages/day3/4-1_JSON.md

Swiftでのサーバ通信のわかりやすい説明
▶︎https://qiita.com/eg_19_/items/552bbe865d97b56d213f

APIからデータを取得してTableViewに表示する流れの説明
▶︎https://qiita.com/dddisk/items/09b46c65434c117f1287

APIから受け取ったJSONデータをCodableプロトコルで構造体にマッピングする
▶︎https://qiita.com/eg_19_/items/95d212a2f1ef14044c2f

Swiftで指定したURLからHTMLのソースコードを取得する
▶︎https://qiita.com/SkyBluePHOENIX/items/31ee08b02b1800b8d509

HTTPリクエスト/レスポンス構成要素のわかりやすい解説
▶︎https://qiita.com/koheiyamaguchi0203/items/5777c4653a01ae4c7b06

###オプショナル
どこよりも分かりやすいSwiftの"?"と"!"
▶︎https://qiita.com/maiki055/items/b24378a3707bd35a31a8
Laravelで１回のリクエストを複数のカラムに分けてDBに登録する方法

LaravelのORMを使って、POST送信されたデータをDBに登録（インサート）する際、１回のPOST送信からデータを複数のカラムに分けて登録する必要がありました。

#状況
例えば
①フォームからこのような送信があったとする

>名前 : 
好きな食べ物１：
好きな食べ物２：
好きな食べ物３：
好きな食べ物４：
...

これらのキーはこのようになっています
>name =>
food1 =>
food2 =>
food3 =>
food4 =>
...

②このデータをDBに保存するのだが、好きな食べ物は何個データが入ってくるかわからないので、**「users」テーブル**と**「foods」テーブル**を作って

**「users」テーブル**
>id
name
created_at
updated_at

**「foods」テーブル**
>id
name
user_id
created_at
updated_at

と２つのテーブルに分けてデータを保存し、かつ『好きな食べ物』に関しては、１つの食べ物につき１つのデータとして保存した。（後々個人のデータを表示するときのことを考えて外部キーとして「user_id」を設定）

この『１つの食べ物につき１つのデータとして保存』の箇所でエラーを吐いてしまったので、その回避方法を紹介します。


#実装

『好きな食べ物』を保存する**「Food」モデル**を作りました

今回モデルとルーティングの記載は省略します。
フォームから送信されると、DBに保存する処理をコントローラに書きます。

実際に実装した処理はこちら

```php:FoodsContoroller.php
<?php
...(namespaceとuse省略)

class FoodsContoroller extends Controller
{
  public function insert（Request $request）
  {
    //...ユーザー情報登録は割愛
    //送信情報を一つ一つのデータとして保存
    foreach ($request->all() as $key => $val){
      //送信されたキー（$key）に「food」を含むものを判定
      if(preg_match('/food/',$key)){
        //モデルをインスタンス化
        $food = new Food;
        //ループさせた$valを入れる
        $food->name = $val;
        //$user_last_insert_idは、ユーザー登録した時に取ってきたid（外部キー）
        $food->user_id = $user_last_insert_id;
        $food->save();
      }
    }
  }
}
```

これで『好きな食べ物』のデータ１つ１つをDBに保存できます

#解説

特に自分が詰まったところを解説します。

```php
foreach ($request->all() as $key => $val){
```
ループ処理をさせることは分かっていたのですが、「$request」をループさせていてエラーになりました。
**「$requestr->all()」**
とすることで、フォームから送られてきた「$request」を配列の形にしてforeachでループできます。

```php
if(preg_match('/food/',$key)){
```
上の処理で「$request」をループで一つ一つ分けましたが、DBの「foodsテーブル」には、「food」のデータのみを保存しなければいけません。
キーが「name」のものは処理したくないので、if文を使って「food」を
含むキー
のみ処理をするようにしました。

「preg_match」 関数の引数にはキーと正規表現を取って、「food」を含むデータのみを抽出しました。

```php
$food = new Food;
```
LaravelでORMを使ってデータを保存する際には、モデルをインスタンス化する必要がありますが、**ループ処理の中で**インスタンス化するようにします。

もしループ処理外でインスタンス化してしまった場合、モデルのインスタンスが一つしかないので、データを複数「food」テーブルに登録することができずに、最後に送られてきた『好きな食べ物』しか登録されません。

以上が、Laravelで１回のリクエストを複数のカラムに分けてDBに登録する方法です。
オルタナティブ・データ（代替データ）とは？どのように使えるか？

![01-franki-chamaki-1k6iqsqbizi-unsplash.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/af2f34c0-513b-91cd-f35a-17ffa69ae994.jpeg)
Photo by [Franki Chamaki](https://unsplash.com/@franki?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/alternative-data?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)


#オルタナティブ・データ（代替データ）とは？ 

オルタナティブ・データ（代替データ）は、大規模で複雑なメトリックであるため、多くの場合、ビッグデータの一種としても認識されています。これらのデータセットは通常、Excelで簡単に処理できる従来のデータよりもアクセスしにくく、構造化されています。 代替データは、主にヘッジファンドやその他の金融業界で採用されています。

この情報爆発時代においては、従来のデータソースは、もはや金融業界の投資分析とリスク管理のニーズを満たすことができません。それに合わせて由来した代替データはさまざまな角度からデータを抽出して、予期できないリスクと潜在的な投資機会を見極めることが重要です。 
![02-data-compare.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/83ae099e-ae0c-f6f4-d594-d93a495c426d.png)


#なぜ代替データはそれほど魅力的なのか？

 

代替データはなぜ投資家にとって魅力的なものになっているかに疑問を持っていませんか。モバイルデータプロバイダーのThasosは、テスラの工場でスマートフォンデバイスから発生した数兆の地理座標を収集し、2018年6月から10月にかけて夜間シフトが30％増加したことを発見しました。その後、Thasosはテスラの株価が上昇すると推測しました。予想どおり、Tesla Model 3の生産量は2倍になり、シェアは9.1％増加しました。 Thasosがトレーダーが在庫移動を予測するのに使用したのは、代替データです。データは直接または関連しているようには見えませんが、戦略的洞察にとって重要です。

最も一般的な代替データは次のとおりです。
![03-gold-rush-article-graphs2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/44065dbf-0c2a-cc3d-6953-2b246687d1b9.jpeg)


1.Webデータ：特定の期間における各アイテムの販売数量と価格に関するeコマースWebサイトのWebデータをスクレイピングします。この情報から、セルサイド企業と小売業者は、次のシーズンに向けて販売するアイテムを決定できます。
2.Webトラフィック：ユーザーの訪問時間、ユーザー数、およびWebページでのユーザーアクティビティ。これらのデータは、マーケティング担当者が消費者の購買決定をオンラインに移行するのに役立ちます。
3.地理位置：地元の小売店の駐車場の衛星画像データは、地元の経済を測定します。  

 

#代替データを取得する方法 

代替データを予測することはチャンレジに富むことです。適切な技術サポートのない、長くて退屈なプロセスであるため、現在のところ、代替データを取得するためのベストプラクティスは、通常Webスクレイピングを使用することです。しかし、人々がデータを取得できない場合があるいくつかの障害があります：

1.高い料金：貴重なデータを取得するには費用がかかります。Thasosの創立者であるスキビスキー氏は、一部の顧客は年間100万ドル以上を支払っていると結論付けました。

2.長時間：一部の代替データには、より長い期間が必要でした。一部の企業では、全期間にわたって資金を調達する資本がない。

3.データ値：経営者は、データがもたらす可能性のある資産を確信していません。急にトレンドを追うと、事業は借金になる可能性があります。

 

#Webスクレイピングはどのように役立ちますか？ 

代替データプロバイダーの数は、ここ10年間で増加しています。この調査は、フリーランスのデータプロバイダーのほとんどは高校学歴であることを示しています。企業がさまざまなソースから大量のデータを取得することは、コンピューティングと法律上の複雑さのために非常に困難な場合があります。これは、データプロバイダーを選択する際の投資決定にリスクがあり、苦痛を伴う場合があります。予算のある企業にとって、Webスクレイピングはデータを取得するための安価な代替手段です。また、不正確なリスクは、データソースプロバイダーからの二次データよりもはるかに低くなります。
![04-provider_count_071119.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/c8bf52f6-945d-49e9-19d8-fc39ffd64cef.png)

Webスクレイピングにより、[データ抽出](https://www.octoparse.jp/DataExtraction)プロセスが自動化され、希望どおりにデータをスクレイピングできます。Octoparseは、世界500大企業に世界クラスのサービスを提供する長い歴史を持つ信頼できるWebスクレイピングプロバイダーです。 また、コーディングスキルを必要としないインテリジェントな[Webスクレイピングソフトウェア](https://www.octoparse.jp/)も提供します。このシナリオでは、Webクローラーを構築して、選択したソースからデータを取得し、APIを介してデータベースに統合できます。
超名作RPG「すいかが食べたい」をプレイする方法

appletが廃止されて久しい昨今、今となってはプレイが困難になったブラウザゲー「すいかが食べたい」をプレイする方法。

●ゲームサイトはこちら
http://www.din.or.jp/~null/game/rpg/game.htm



**【前提条件】**
・JDK8.x系が自分のPCにインストールされている事。(環境変数も通ってる事)

**【環境】**
・動作確認はWindows7。

**【手順】**
１．コマンドプロンプトで「appletviewer」と打って、コマンドが動作する事を確認する。
２．適当な場所に「security.policy」というファイルを作って以下の内容を記述する。

grant {
    permission java.security.AllPermission;
};

３．コマンドプロンプトで以下のコマンドを記述する。

appletviewer -J-Djava.security.policy="[任意の場所]\security.policy" http://www.din.or.jp/~null/game/rpg/game.htm

４．ゲーム画面が起動し、下の待機バーが動けばOK。
Vueでhtmlのタグ属性を動的に作りたい

VueRouterで/users/:useridのルート定義を作って、各ユーザのページに飛ばしたい。
x-templateをつかって定義しています。


v-for内で変数をタグ属性に埋め込んでも下記の失敗例のようになってしまう

```html:失敗
<router-link to="/users/user.id">{{ user.name }}</router-link>
```
```html:結果
<a href="#/users/user.id" class="">kitano</a>
```

v-bind:toと、埋め込みたい属性の前にv-bindを指定してやればうまくいった。

```html:成功
<div v-for="user in users" v-bind:key="user.id">	
  <router-link v-bind:to="'/users/'+user.id">{{ user.name }}</router-link> 
</div>	
```

```html:結果
<a href="#/users/1" class="">kitano</a>
```

***考察***
挙動から察するに、v-bind：属性名　とすることで、v-bind指定した属性のダブルクオートの内部でJSを使えるようにしている？

公式リファレンスを確認したらv-bindはデータバインディングできるようにするよ～って感じの記載があったので納得
KDD2019 聴講まとめ

###KDDとは


> データマイニング - knowledge-discovery in databases（データベースからの知識発見）の頭文字をとってKDDとも呼ばれる。
SIGKDD - アメリカの学会「Association for Computing Machinery」 (ACM) が主催するデータマイニングについての国際会議（この分野では最も権威があるものの一つ）の分科会 (SIG) のひとつ。Special Interest Group on Knowledge Discovery and Data Mining（知識発見とデータマイニングに関する特別分科会）の略称。

>（参考）weblio
 https://www.weblio.jp/content/KDD

KDD2019 @Anchorage in Alaska に参加してきました．
自身の発表は，
http://ml4ed.cc/2019-kdd-workshop/
のワークショップ，ポスター発表
http://ml4ed.cc/attachments/Okada.pdf
です．
このページは，聴講メモ等のまとめです．

##### 注意
- 現在の筆者の英語力，知識での最大限のメモです
- ところどころメモ抜け，メモが追いつかなかった箇所もあります．参考程度にお使いください．

説明できる&解釈可能なAI（explanable,interpretable） や，時系列データを使った予測，（言語含め）に関する発表が多かった印象です．

###個人的に面白かった研究まとめ
https://qiita.com/kotaaaa/items/4f5f2681bd678e839b8a

###キーノートトーク（Keynote talk）
[Plenary Keynote Panel: Why, What & How we Democratize Data Science]
(https://qiita.com/kotaaaa/items/c51fa55419690cf85217)

###ワークショップ(workshop)
[workshop W14: Explainable AI/ML (XAI) for Accountability, Fairness, and Transparency]
(https://qiita.com/kotaaaa/items/5e089f332eb9c9c8296a)

###チュートリアル(tutorial)
[T11: Fake News Research: Theories, Detection Strategies, and Open Problems]
(https://qiita.com/kotaaaa/items/bbf2e95c99aa1a0e0f44)

###研究発表セッション(Research Track Papers)
[Research Track Session RT10: Embeddings II]
(https://qiita.com/kotaaaa/items/f9abeffa96b5fe80c041)
[Research Track Oral Presentations: RT11 Clustering and Visualization]
(https://qiita.com/kotaaaa/items/3673bce00dfbdc7a68d3)
[Research Track Session RT15: Mining in Emerging Applications II]
(https://qiita.com/kotaaaa/items/c8d75656d714b9057bc6)
[Research Track Session RT17: Interpretability]
(https://qiita.com/kotaaaa/items/173e02c70c4445f690b1)



### データサイエンス応用セッション(Applied Data Science Track Papers)
[Applied Data Science Track Session ADS2: Language Models and Text Mining]
(https://qiita.com/kotaaaa/items/05e76a2747e8fdebaf0c)
[Applied Data Science Track Session ADS9: E-commerce and Advertising]
(https://qiita.com/kotaaaa/items/f3d7c507d0dfd1ae94a5)
Ruby で Priority Queue を実装してみたい

厳密にはやらないでラフにやります。

- 集合に対して要素を追加できる
- 集合から最小の要素を取り出せる

この二つの機能を持った class を安直に書いてみる。

```ruby
# 安直につくったもの（パフォーマンス悪い）
class PriorityQueue
  def initialize(array = [])
    @data = []
    array.each{|a| push(a)}
  end

  def push(element)
    @data.push(element)
  end

  def pop
    @data.sort!.shift
  end
end
```

こんな感じで動きます。

```ruby
pq = PriorityQueue.new([3,5,1])
pq.push(4)
pq.pop # => 1
```

heap というデータ構造をつかって書いてみる。
以下、雑なので時間があったら丁寧にしたい。（丁寧版は [こちらの gist](https://gist.github.com/mochizukikotaro/fea36b3c28ac52dea1177a4e58a3bb7d) に書くことにした）

```ruby
# heap を使ったもの（パフォーマンス良い）
class PriorityQueue
  def initialize(array = [])
    @data = []
    array.each{|a| push(a)}
  end

  def push(element)
    @data.push(element)
    bottom_up
  end

  def pop
    if size == 0
      return nil
    elsif size == 1
      return @data.pop
    else
      min = @data[0]
      @data[0] = @data.pop
      top_down
      return min
    end
  end

  private

  def swap(i, j)
    @data[i], @data[j] = @data[j], @data[i]
  end

  def size
    @data.size
  end

  def parent_idx(target_idx)
    (target_idx - (target_idx.even? ? 2 : 1)) / 2
  end

  def bottom_up
    target_idx = size - 1
    return if target_idx == 0
    parent_idx = parent_idx(target_idx)
    while (@data[parent_idx] > @data[target_idx])
      swap(parent_idx, target_idx)
      target_idx = parent_idx
      break if target_idx == 0
      parent_idx = parent_idx(target_idx)
    end
  end

  def top_down
    target_idx = 0

    # child がある場合
    while (has_child?(target_idx))

      a = left_child_idx(target_idx)
      b = right_child_idx(target_idx)

      if @data[b].nil?
        c = a
      else
        c = @data[a] <= @data[b] ? a : b
      end

      if @data[target_idx] > @data[c]
        swap(target_idx, c)
        target_idx = c
      else
        return
      end
    end
  end

  # @param Integer
  # @return Integer
  def left_child_idx(idx)
    (idx * 2) + 1
  end

  # @param Integer
  # @return Integer
  def right_child_idx(idx)
    (idx * 2) + 2
  end

  # @param Integer
  # @return Boolent
  def has_child?(idx)
    ((idx * 2) + 1) < @data.size
  end
end
```

ベンチマークをとってみる

```ruby
# ベンチマークをとってみる
require 'benchmark'

@test_data = 100_000.times.map{rand(100_000)}
@test_cnt = 1_000

Benchmark.bm 10 do |r|
  r.report "Normal" do
    pq = PriorityQueue.new(@test_data)
    @test_cnt.times do
      pq.push(rand(100_000))
      pq.pop
    end
  end

  r.report "Heap" do
    pq = PriorityQueueWithHeap.new(@test_data)
    @test_cnt.times do
      pq.push(rand(100_000))
      pq.pop
    end
  end
end
```

```bash
# 結果
                 user     system      total        real
Normal       5.460000   0.010000   5.470000 (  5.494386)
Heap         0.070000   0.000000   0.070000 (  0.073038)
```

無事早くなって嬉しい。
コードは雑なので、時間があるときに丁寧なものにしたい。

ヒープの構造は蟻本を読んで実装しました。
[Swagger] ASP.NET Core API x Swagger II

前回　[ASP.NET Core API x Swagger](https://qiita.com/syantien/items/b82879afad3b4c18f224)　の続き。 前回はSwaggerをAPIプロジェクトに追加して表示するところまで見ました。今日はもう少し先を見てみます。

## 起動時の「Swagger」ページ表示指定
アプリケーションを起動したら、Swaggerのページを表示したい場合。
プロジェクトの起動ディレクトリーを指定する必要があります。デフォルトは作業ディレクトリーは/api/valueになっているので、プロジェクトを右クリック、プロパティ、デバッグブラウザー起動を空で指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/6a2494a5-d90d-a36e-8859-e25289a139e6.png)


# サマリー

各メソッドの利用方法を簡単に記載します。

```csharp
/// <summary>
/// Redeem Coupon
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpGet("/Reddem/{id}")]
public IActionResult Redeem(string id)
{
　　return NoContent();
}
```

Swagger上にはこのように記載されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/502e9ba5-8c34-cde0-9b08-0a3c98476321.png)

# リマークス

```csharp
/// <summary>
/// Redeem Coupon
/// </summary>
/// <remarks>
/// This is remarks
/// </remarks>
/// <param name="id"></param>
/// <returns></returns>
[HttpGet("/Reddem/{id}")]
public IActionResult Redeem(string id)
{
  return NoContent();
}
```

Swagger上にはこのように記載されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/54b22ef9-7ed4-75b9-faf8-5e35616bc5cb.png)

# レスポンスが jsonである事を表記する

レスポンスがjsonであることを表記するには[Produces("application/json")]を指定します。

```csharp
[Produces("application/json")]
[Route("api/[controller]")]
[ApiController]
public class CouponController : ControllerBase
{
  /// <summary>
  /// Redeem Coupon
  /// </summary>
  /// <remarks>
  /// This is remarks
  /// </remarks>
  /// <param name="id"></param>
  /// <returns></returns>
  [HttpGet("/Reddem/{id}")]
  public IActionResult Redeem(string id)
  {
    return NoContent();
  }
}
```
Swagger上にはこのように記載されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/3425dfe1-2415-f5db-ec87-fafa755f0951.png)

# レスポンスタイプの表記

正常に処理されれば200と値を返すのですが、毎度正常なインプットもしくは処理がされるとは限りません、その際にどんな時どのようなレスポンスタイプがあるのか表記しておく必要があります。

ここでは正常処理200と入力値が空のときのレスポンスタイプ400があることを明記します。

```csharp
/// <summary>
/// Redeem Coupon
/// </summary>
/// <remarks>
/// This is remarks
/// </remarks>
/// <param name="id"></param>
/// <returns></returns>
/// <response code="201">Returns text "hi"</response>
/// <response code="400">If id is null</response>
[HttpGet("/Reddem/{id}")]
[ProducesResponseType(201)]
[ProducesResponseType(400)]
public IActionResult Redeem(string id)
{
　　if (string.IsNullOrEmpty(id))
　　{
　　　　return NotFound();
　　}

　　return Content("Hi");
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/db033db8-33f9-3e32-c284-0e6a4bfd6aee.png)
ザックリまとめ　Andrew Ng先生の論文読み手法

# Andrew Ng先生の講義動画の簡単なまとめ

- Stanford大での論文読みとMLエンジニアとしてのキャリアについての講義です
- 1時間の講義のうち、上記の内容についてそれぞれ30分ずつ話しています
- [こちら(stanford online)](https://www.youtube.com/watch?v=733m6qBH-jI&feature=youtu.be)から元動画が確認できます

## この記事で説明すること
- 論文読みの手法

## この記事で説明しないこと
- MLエンジニアとしてのキャリア選択について

自分の備忘録として残しておこうかなという感じですので、誤訳・スペルミスもあると思いますがご容赦ください。


### 論文読みの手法
論文読みは二つのステップに分けて考えることができます。
1. Compile list of papers
2. One paper reading

#### Compile list of papers
これは読むべき論文をリストアップする段階を指します。
大体の量としては
ベーシック(普通の大学生？)→15~20本のpaper
マスター(専門家？)→50~100本という感じで話されてました。頑張ろう(吐血)

リストアップした論文を一つずつ丁寧に理解していくのではなく、後述する読み方で優先度順で読んでいくのが良いそうです。また、複数の論文を並行で読み進めても良いとのことです。

#### One paper reading
今回の記事の主要な部分です。Andrew Ng先生は段階的に論文を読むことをオススメしています。
具体的には以下のように論文を切り分けて読んでいきます。

1. Title,abst,and figures
2. Intro,conclusion,figures, and skim rest
3. Read but skip(or skim) Math
4. Whole thing but skip parts that don't make sense

※skim → skimming 要点を拾って読む速読手法 　skip→飛ばす

それぞれについてちょっと補足します。

- 1の部分については論文の要旨を把握する読み方です。タイトルと概要、そして論文内の図、特にモデルのArchitectureに着目して読んでいきます。講義内ではDenseNetが例で出されていましたが、Figureにかなりの情報が詰め込まれているので重要だと述べています。
- 2に関しては1よりももう少し広く読む方法で、Intro,related work等の背景知識もざっと見ていきます。特に全く新しい分野の論文を読む際はrelated workを読んでおくと学習がスムーズになります。
- 3では全体を通してより深く理解することを目指します。ただ、この段階では数式表現等はあまり気にせずに読んでくことをすすめています。
- 4でもう一度全体を通して読みます。意味のわからない部分は飛ばして読みます。

以上が効率的に論文を読むための手法になります。概要→詳細という流れです。

また、その論文に対して以下のkey-elementsを答えられるように意識して読むことも推奨されています。

1. 著者は何を達成したかったのか？
2. この論文(手法)の特徴・鍵は何か？
3. 自分なら何に応用できるか？
4. 他に読むべき論文はあるか？

さらに深い理解を得るためには以下の方法が良いと述べられています。
1. 数式を自分で再現する(Re-drive from scratch)
2. 公開されているコードを動かす(Run open-source code)
3. 自分でコードを書いてみる(Re-implementation from scratch)

自分はいつも読むところで終わらせてしまうので、コードを動かす・数式を再現するのにも挑戦していきたいと思いますぅ...

#### 補足・イメージ・教訓
- 頭から読んでいくよりも、数ステップに分けて読む
- 図はモデル構造の理解を助けてくれる
- key-elementsを意識して読む
- 深い理解にはコード実行・実装・数式の再現が良い
- 理解した内容をQiita等にまとめるのもいいんじゃないかなぁと思ってます
- Andrew Ng先生の話はすごい分かりやすいので、ぜひ元の動画を見ていただければと思います(足りない・間違ってる部分を教えていただけると幸いです！)

最後までお読みいただきありがとうございました！
ご質問等あればお気軽にコメントください！
一瞬でvueの双方向バインディングを試すフォーム作成

# この記事の目的

vue.jsってどんなもんなんだろう。vue.jsの特徴の双方向バインディングってどういうの？っていうのを一瞬で体験するためにフォームとそこに入力したら即反映という簡単なものを一瞬で作るための記事。

# 作るもの

* フォームに入力した文字がそのままリアルタイムに反映される

# 作り方

## html、jsファイルの用意

```html:index.html
<!DOCTYPE>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Myvueapp</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="app">
    <p>
      {{ name }}
    </p>
    <p>
      <input type="text" v-model="name" />
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
</body>
</html>
```

```javascript:main.js
(function(){
  'use strict';
  var vm = new Vue({
    el: '#app',
    data: {
      name: 'taguchi'
    }
  });
})();
```

## vue.jsの読み込み

```html
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
```

まずはvueを読み込んでから他のjascriptファイルを読み込む。この順番大切。

## javascript解説

* elでidを指定。この指定されたidのdivタブ内でvueが効く
* dataでプロパティの設定
* nameは上書き可能。デフォルト値の設定になる

## html解説

* idの指定
* v-modelでどのプロパティと紐付けるかを指定する
Leetcode #709: To Lower Case

```swift
func toLowerCase(_ str: String) -> String {
    var s = Array(str)
    for (i, char) in s.enumerated() {
        if char >= "A" && char <= "Z" {
            s[i] =  Character(UnicodeScalar(char.asciiValue!+32))
        }
    }
    return String(s)
}
```
Ubuntu18.04でChromeリモートデスクトップを構成する

#要点
自宅のUbuntu18.04デスクトップPCに外出先からアクセスする際に、Chromeリモートデスクトップを構成しておくと便利。Chrome経由でリモートデスクトップ環境を手に入れることができる。

#環境
・リモート操作対象：
Ubuntu18.04
Chrome 76.0.3809.100
Chromeリモートデスクトップアプリ導入済み

・手元のデバイス：Macbook 2017、Androidスマホ
Chromeリモートデスクトップアプリ導入済み

#問題
2019年8月12日現在、[Google公式](https://support.google.com/chrome/answer/1649523?co=GENIE.Platform%3DDesktop&hl=ja)の手順通りに構成してもChromeリモートデバイスを利用できるようにならなず、リモートデスクトップの起動に失敗する。

#解決策
こちらのサイトを参考にしたが、一部問題があったので修正して実行。
・[外出先から自宅のUbuntu18.04に接続する（Chromeリモートデスクトップ）](http://xvideos.hatenablog.com/entry/chrome-remote-desktop-ubuntu1804)
・[Configuring Chrome Remote Desktop with Ubuntu Gnome 14.04
](https://superuser.com/questions/778028/configuring-chrome-remote-desktop-with-ubuntu-gnome-14-04/850359#850359)


「3．グループ」への追加を実施してしまうとChromeへのログインキーリングの取得が失敗し、Chromeを起動するたびにパスワードを聞かれるようになってしまうので、省略した。それでも問題なくChromeリモートデスクトップを使用可能である。
>3.グループへの追加
>つぎに、カレントユーザをchrome-remote-desktopグループに追加して再起動します。
>sudo usermod -a -G chrome-remote-desktop $USER
>sudo reboot

リモート対象のPCが起動してから数分間は接続できないことがある。
初めて、MySQLもSSLで接続してみた。

#初めてMySQLをSSL接続してみた。
ほんとにAWSと利用して学習の学習はやりやす。ドキュメントが豊富で学習がしやすい。

本日は初めてMySQLへSSL接続をしてみたので、記録に残しておきます。

#tcpdumpでキャプチャー
[tcpdumpでMySQLサーバに流れてくるクエリをみる](https://memo.yuuk.io/entry/2018/01/25/221111)

```
sudo yum install -y tcpdump
sudo tcpdump -tttt -l -i eth0 -A -n -s 0 dst port 3306 | grep -iE "select|update|delete|insert"
```
このコマンド一発でSQL文を観測することができます!!

```
.....I......INSERT INTO books VALUES('210', 'Tom', '', 'hamasaki', 30.75, 0, 1995, 'What a cool book.', 20)
```

MySQLのSSLはUserに対してSSLの利用を要求する形で設定する。という認識でよろしいのかな？

#SSLを利用する
[MySQL DB インスタンスで SSL を使用する](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/CHAP_MySQL.html#MySQL.Concepts.SSLSupport)
私はAWSのRDS,MySQL エンジンバージョン5.7.22を利用していましたが、MySQL 5.7以降のコマンドではエラーが出てしまい、MySQL5.6以前の方のコマンドで実行しました。

手順1　証明書をダウンロードする
手順2　MySQLに接続して、ユーザへSSLの利用要求を設定する

```
# wget https://s3.amazonaws.com/rds-downloads/rds-combined-ca-bundle.pem
# mysql -h <endpoint> --ssl-ca=/rds-combined-ca-bundle.pem --ssl-mode=VERIFY_IDENTITY -u <Adminuser> -D <databasename> -p
Unknown value to --ssl-mode: 'VERIFY_IDENTITY'. Use --ssl-mode=REQUIRED
# mysql -h <endpoint> --ssl-ca=/rds-combined-ca-bundle.pem --ssl-verify-server-cert -u <Adminuser> -D <databasename> -p
Enter password:
Welcome to the MySQL monitor.
mysql> GRANT USAGE ON *.* TO '<Adminuser>'@'%' REQUIRE SSL; 
# mysql -u <Adminuser> -h <endpoint> --ssl-ca=/rds-combined-ca-bundle.pem --ssl-verify-server-cert -p<password> <databasename> < insert.sql
```

これだけでSQL文が平文で流れることがありません。
Filemakerでボタンのタイトル文字を何かのタイミングで変更するには 「マージ変数」が便利

Filemakerでボタンのラベル（タイトル）を変更したい時、当初は編集ボックスを重ねて利用していた。

一様機能していたけど、ボタンのラベル（タイトル）変更の為だけにフィールドを作るって何かスッキリしない。

ので調べるみると「マージ変数」を使う方法を見つけた。この方法だとスッキリする。


**追記１
あとで試したら、ボタン設定に直接マージ変数が利用できた.
ボタンの場合はボタン設定に直接マージ変数を書いたほうがすスッキリする。
[1]ボタンを配置⇒（テキストツールを利用しない場合）を参照**

**追記２
twitterでボタンバーをつかうと「計算式」が使えますよと教えて頂きました。ありがとうございます。ボタンのラベル（タイトル）を条件で変更するなどボタンバー便利そうです。また使い方をまとめたい。**

#手順
###[1]ボタンを配置
<img width="450" alt="スクリーンショット 2019-08-12 9.41.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198997/62b0a198-d515-00ed-389f-7ac4f38a856f.jpeg">

（**テキストツールを利用する場合**）
ボタン設定の文字は入力しない（入力していたら削除する）⇒手順[2]に行く。


（**テキストツールを利用しない場合**）

```マージ変数.
<<$$[マージ変数名]>>
例：　<<$$ボタン文字>>
```

ボタン設定の青枠の中に直接マージ変数を記入する。⇒手順[5]に行く。



###[2]マージ変数を利用する。
<img width="450" alt="スクリーンショット 2019-08-12 9.41.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198997/a02a8968-5402-4cc9-40e5-de5b63852aee.png">

メニュ「挿入」⇒「マージ変数」でマージ変数利用する。
※テキストツールを利用して、直接　<<$$[グローバル変数名]>>　を記入してもOK

###[3]マージ変数に変数名をつける
<img width="450" alt="スクリーンショット 2019-08-12 9.41.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198997/a22c86d4-dc22-5d36-2a80-14383674ef89.png">

はじめは＜＜＄＄＞＞だけ表示されるので、$$の後ろに変数名をつける。
例：（はじめ）＜＜＄＄＞＞⇒（変数名をつけた後）＜＜＄＄ボタン文字＞＞

※「ボタン文字」の部分は好きな文字でOK（たぶん他のグローバル変数名とかぶらないほうがよい）

###[4]マージ変数をよさげな位置に移動する。
<img width="450" alt="スクリーンショット 2019-08-12 9.42.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198997/f614f817-ef4b-d55c-6373-528fc9b0baf0.png">

<<$$ボタン文字>>をボタンで表示したい位置に移動する。


###[5]マージ変数に値をあたえる。
スクリプトでグローバル変数($$ボタン文字)に値を与える。
GitHub、Dockerについて調べた自分の感想を

## まず参考になったページを置いておきます
#### GitHub
- [manabuyasuda/GitHubの使い方](https://gist.github.com/manabuyasuda/f449b313970c7a51b655)
- [GitHubを使ってみよう！👶基本的な操作をざっと確認！](https://qiita.com/mii-chang/items/c6936458751e4e19c117)

#### Docker
- [【図解】Dockerの全体像を理解する -前編-](https://qiita.com/kotaro-dr/items/b1024c7d200a75b992fc)
- [【図解】Dockerの全体像を理解する -中編-](https://qiita.com/kotaro-dr/items/88ec3a0e2d80d7cdf87a)
- [【図解】Dockerの全体像を理解する -後編-](https://qiita.com/kotaro-dr/items/40106f13d47bfcbc2572)

## 衝撃が凄すぎた
「これ、便利すぎない？」「今まで知らなかったことが罪」などの言葉が漏れるほど。

前職はストレージだとかRAIDだとかESXiだとかvMotionだとか、それこそガチガチの基盤のお仕事をしていたのですが
飛び抜けるほど興味が持てなかったので自分の知らない技術を知ろうとすることは無かったです。
「仕事で必要になったら覚えよう」みたいな。モチベーションもゼロに等しかったかなと。
ですが、今はそんな受け身の環境から自分の意志で抜け出して、新しい職場に移り、
新しいことを覚えながら前のめりで色々と調べているところで、それがまぁ楽しい。
「変な宗教にハマった人間ってもしかしてこんな感覚なんだろうか」と自分が怖くなるほどに。

## チーム開発において力を発揮する
最初に書くべきでしたが、私は開発業務未経験です。
転職果たしまた！イエイ！みたいな事書いてましたが、配属ガチャの結果、
今年度末まで仕事でコードを書く機会は無いみたいです。泣きたい。泣いてる。
なのでここから全部想像です。

#### GitHubは単なるコード共有コミュニティでは無かった
誰かの問題を解決し、自分の問題を解決してもらい、複数人で協力しながらモノ作りができる場所。
他の人が書いたコードを自分で確認し、問題が無ければ自分のリポジトリに結合する。そのまた逆も。

気になったAPIがあれば、それをキーワードに検索すると出るわ出るわ。
「これ、どういう使い方するんだろう」といった疑問を持って見ていくともう学びしかない。

トレンドが知れる。
他の人達がどんな事に興味を持っているか、何の言語がよく使われているか、またその用途は。
美味しい書き方はどんな感じかなど。

あとは英語が読めないと危機感がすごい。
「やばいな.....読めない.....あーっと.......やばい....」みたいな感じになる。

#### Dockerは小さい割にすごいヤツ
プログラムの実行環境の構築、つまり自分が前職でちまちまと手作業でやっていたことがすっごい簡単にできちゃう。
そして次のことを知った時に震えた。
「環境をイメージ化して、DockerHubとやらに保存ができる。
　さらにそこから自分のローカル環境にイメージを持ってきて実行環境を再現できる」
ということは、複数の開発者で統一された環境を持つことができることでもあるし
万が一自分の愛用のマシンがイカれちまっても、「まーた最初から環境作り直しかよ」っていうのが無い。
さらに調べてみると本番環境にもDockerを採用するところがあるそう。

となると、本番環境と開発環境で変な差分が出た！とかいうアホみたいな揉め事も無くなるのではないですか？
パラメータシートの更新が遅れてるだの、デグレだの、パラメーターが違うだの。
そういう前提から覆されるカスみたいな出来事は嫌じゃないですか。
あ、あくまで想像ですが、みなさんの所はどうです？

## おわりに
もうここまで来ると自分が積み上げてきた経験や知識が全部ツール一個で代替できてしまうことに驚きと虚無感が。
自分がいかに古い技術しか知らず、「俺はこれができるぜ！」と井の中の蛙大海を知らず状態であったかが
今になってジワジワとジャパニーズホラーの恐怖感のように自覚できています。
おそらく、他の事を調べるにつれてそれらはハッキリとした大きな物になっていくと思います。

でも逆にね、逆に、それを知ることができてるってことは自分を俯瞰できる良い環境に飛び込めたかなって感じがします。
この業界に入りたてのあの時期に戻ったような気持ちに近いです。右も左もわからなかったあの感じ。
【R】irisのデータでSVM【二回目】

以前にもsvmを使った記事を書いたが、
今回はちゃんと予測値を入れ込むところまでやる。

```R
install.packages("kernlab")
library(kernlab)

#trainとpredをつくる
setosa<- iris[iris$Species=="setosa",]
setosa_train <- setosa[1:45,]
setosa_pred <- setosa[45:50,1:4]
setosa_pred_lab <- setosa[45:50,5]

versicolor<- iris[iris$Species=="versicolor",]
versicolor_train <- versicolor[1:45,]
versicolor_pred <- versicolor[45:50,1:4]
versicolor_pred_lab <- versicolor[45:50,5]

virginica<- iris[iris$Species=="virginica",]
virginica_train <- virginica[1:45,]
virginica_pred <- virginica[45:50,1:4]
virginica_pred_lab <- virginica[45:50,5]



iris_train <- rbind(setosa_train,versicolor_train,virginica_train)

iris_pred <- rbind(setosa_pred,versicolor_pred,virginica_pred)
#iris_pred_lab <- c(setosa_pred_lab,versicolor_pred_lab,virginica_pred_lab)
iris_pred_lab <- c(as.character(setosa_pred_lab),as.character(versicolor_pred_lab),as.character(virginica_pred_lab))


iris_svm <-ksvm(as.factor(Species)~.,data=iris_train)
iris_svm
```

```
Support Vector Machine object of class "ksvm" 

SV type: C-svc  (classification) 
 parameter : cost C = 1 

Gaussian Radial Basis kernel function. 
 Hyperparameter : sigma =  0.822694760091157 

Number of Support Vectors : 58 

Objective Function Value : -4.4949 -5.0152 -19.7492 
Training error : 0.02963 
```

デフォルトなのでガウシアンが選択されてる。


```R
res <- predict(iris_svm,iris_pred)

data.frame(right=iris_pred_lab,pred=res)
```

```
        right       pred
1      setosa     setosa
2      setosa     setosa
3      setosa     setosa
4      setosa     setosa
5      setosa     setosa
6      setosa     setosa
7  versicolor versicolor
8  versicolor versicolor
9  versicolor versicolor
10 versicolor versicolor
11 versicolor versicolor
12 versicolor versicolor
13  virginica  virginica
14  virginica  virginica
15  virginica  virginica
16  virginica  virginica
17  virginica  virginica
18  virginica  virginica
```

これで正解と不正解を比較できた。

ksvmのドキュメント

```
https://www.rdocumentation.org/packages/kernlab/versions/0.9-27/topics/predict.ksvm
```
【SQL】CASE文とORDER BYで好きな順番に並び替える

## 問題設定
![スクリーンショット (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481315/807c20d9-a432-1615-f9fc-5325a0110ea9.png)

　　　　　　　　　　　　yk_table

**customer_rank** : 会員ランク
**purchase_store** : 購入店舗
**customer_num** : 利用者数
とある期間において会員ランクごとに、上大岡店のみ、横浜店のみ、両店舗利用それぞれの利用者数が集計済みのテーブルyk_tableがあります。
このyk_tableについて会員ランクごとに、上大岡店、横浜店、両店舗の順番に並び替えます。
## 手順
1. **ORDER BY**でcustomer_rank，purchase_storeを指定する。
2. **CASE文**でpurchase_storeがKAMIOOKAに1,YOKOHAMAに2,BOTHに3を割り振る

## SQL文
```sql
SELECT
    *
FROM
    yk_table
ORDER BY 
    customer_rank
    ,CASE purchase_store
        WHEN 'KAMIOOKA' THEN 1
        WHEN 'YOKOHAMA' THEN 2
        ELSE 3 
    END
;
```
## 実行結果
![スクリーンショット (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481315/ee03f3ad-f8cf-5d0a-95dd-16c2175d9a74.png)
上のように会員ランクごとに、KAMIOOKA、YOKOHAMA、BOTHと並び替えることができました。

## テーブル作成
今回使ったテーブルは

```sql
CREATE TABLE yk_table(
  customer_rank VARCHAR(6),
  purchase_store VARCHAR(8),
  customer_num INTEGER
);
```

```sql
INSERT INTO yk_table VALUES('SILVER', 'YOKOHAMA', 2678);
INSERT INTO yk_table VALUES('BLACK', 'BOTH', 327);
INSERT INTO yk_table VALUES('BRONZE', 'KAMIOOKA', 653415);
INSERT INTO yk_table VALUES('GOLD', 'YOKOHAMA', 213);
INSERT INTO yk_table VALUES('BLACK', 'KAMIOOKA', 342);
INSERT INTO yk_table VALUES('BRONZE', 'BOTH', 37645);
INSERT INTO yk_table VALUES('GOLD', 'BOTH', 2002);
INSERT INTO yk_table VALUES('SILVER', 'KAMIOOKA', 50021);
INSERT INTO yk_table VALUES('BRONZE', 'YOKOHAMA', 49765);
INSERT INTO yk_table VALUES('BLACK', 'YOKOHAMA', 18);
INSERT INTO yk_table VALUES('GOLD', 'KAMIOOKA', 2019);
INSERT INTO yk_table VALUES('SILVER', 'BOTH', 19923);
```

こちらでつくることができます。
#GoogleChrome Developer Tool で 画面のエリアを選ぶと ツール側で自動的に HTMLを選択状態にしてくれるあれは、どうやるんだ！

#If you select an area of the screen with the GoogleChrome Developer Tool, what will you do if the tool automatically selects HTML?


Developer Toole 左上のこの小さなボタンを押せば良いらしい。

![image](https://user-images.githubusercontent.com/13635059/62840242-48ad9400-bcd2-11e9-8855-ee9a789efa1d.png)

![image](https://user-images.githubusercontent.com/13635059/62840241-4814fd80-bcd2-11e9-8d3d-f663ad2d807d.png)



# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2273








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
TableViewではなく、TableViewCellのSeparator Insetを設定すれば罫線が意図した外観になる

今回、TableViewCellの罫線ことSeparatorの隙間を埋めたいことがありました。

※デフォルトで左側に隙間ができます。

いくつか検索してStoryboardのAttribute InspectorでTableViewのSeparator Insetを0にすれば良いことが分かりました。

しかし、早速デフォルトで15となっているLeft Insetを0にしてみると問題がありました。

期待通り、Cellの罫線は左いっぱいまで伸びたのですが、SectionのHeaderまでInsetが0になってしまったようで左の隙間がなくなってしまいました。

## 解決法はTableViewCellのSeparator Insetを0にする

よくよく考えればその通りなのですが、TableViewCellにもSeparator Insetができるので、TableViewではなくCellの方に設定することで期待通りの外観にすることができました。

## まとめ

全Cellの罫線左の空白をなくしたいときは…

**TableViewのSeparator Insetはいじらずに、TableViewCellのSeparator Insetを0に設定**しましょう！

参考：https://stackoverflow.com/questions/21017019/keep-uitableview-padding-on-header-but-no-in-separator-on-ios7
【Git】Git操作手順カンニングシート

データサイエンス系のインターン先でGitを使っていろいろ管理するらしく。Gitでの操作手順を自分用にまとめます。

### Gitとは

誰がいつどのファイルの何を変更したかを管理してくれる。**バージョン管理システム**のこと。  
いつ、誰が、どのファイルのどの箇所を、どういった目的で作成、変更、削除したかという履歴を残し、共有することができる。  
過去の状態を確認したり、その時点に復元したりすることもできるため、誤って削除してしまったファイルも復元することが可能になります。

### 基本的な用語

- **リポジトリ** : ファイルの変更、追加、修正を管理する場所 。一般に１個のディレクトリ。 
- **リモートリポジトリ** :  みんなで共有するリポジトリ  
- **ローカルリポジトリ** :  自分一人のリポジトリ
- **コミット(commit)** :  変更の履歴を記録する  
- **ブランチ** : リポジトリで行う開発の経路  
- **ステージングブランチ** : 開発の元となるブランチ、このブランチから各々ブランチを切って作業を進める
- **マージ** : ブランチをひとつにまとめる  
- **クローン** : リモートリポジトリの内容をダウンロード  
- **プッシュ** : ローカルリポジトリの変更履歴をリモートリポジトリへアップロードする 
- **プル** : リモートリポジトリからローカルリポジトリへ変更履歴を取得する

### 操作手順

１．ソースのクローン(既存のリポジトリのコピーの取得)  

```git
git clone `url project_dir_name`
```

カレントディレクトリにリモートリポジトリで管理されているディレクトリが複製される



２．ディレクトリに移動し、アカウント名とメールアドレスを設定

```git
cd project_dir_name
git config user.name "Diagonal-M"
git config user.email "diagonal-m@mail.com"
```

誰がコミットしたかがわかるようになる



３．ステージングブランチから作業用ブランチを作成してチェックアウト

```git
git checkout -b dev
```

ブランチの作成とチェックアウトを同時に行う



４．作業用ブランチでファイルの追加や修正などを行う

```git
git add .
git commit -m "コメント"
```



５．ステージングブランチを最新に更新する

```git
git checkout staging
git pull
```

他のメンバーがすでにstagingブランチを進めているかもしれないので更新する



６． ステージングブランチをdevブランチにマージ

```git
git checkout dev
git merge master
```

自分のブランチも更新する



７． devブランチをpush

```git
git push
```

初めてpushするブランチの場合は下のようにする

```git
git push --set-upstream origin dev
```



８． ステージングブランチにdevブランチをマージする

```git
git checkout satging
git merge dev
```



９．stagingブランチをpushする

```git
git push
```



よくつかうコマンドと使い方

| **コマンド**            | **説明**                                                     |
| ----------------------- | ------------------------------------------------------------ |
| git status              | Gitに関するカレントディレクトリの状態を表示                  |
| git log                 | Gitリポジトリのログを表示                                    |
| git add                 | ファイルをステージングエリアに追加                           |
| git commit              | 変更をGitリポジトリにコミットする                            |
| git branch -v           | 詳細情報を付与した状態で、ブランチの一覧を表示する           |
| git checkout <ブランチ> | 作業ディレクトリを変更して、既存のブランチを反映させる       |
| git checkout -b         | ブランチの作成とチェックアウトを同時にやる                   |
| git merge <ブランチ>    | ブランチをカレントブランチにマージする                       |
| git diff                | カレントディレクトリ内で追跡されているファイルと、リポジトリ内のファイルに変更があればそれをしめす |
| git diff --name-only    | 変更点を表示するときに、変更があったファイルのパスだけを表示してくれます。 |
| git diff --word-diff    | 差分を文字レベルで表示する                                   |
| git clone               | ソースの位置にあるGitリポジトリのクローンを、複製先ディレクトリに、ペアリポジトリとしてつくる |
| git pull                | 自分のリポジトリを、複製元と同期させる                       |
| git push                | 現在のブランチを、デフォルトのリモート追跡ブランチにプッシュする |
Fortigate, Juniper SSG 5の初期化

自宅のファイアウォール初期化方法のメモ。

# Fortigate
## CLIで初期化
```
> execute factoryreset
```
コマンド実施後、機器が再起動し初期化される。

### ログインパスワードがわからない状態での初期化
　Fortigateはコンソールからmaintainerユーザーでログインすることができるようになっている。 パスワードはシリアル番号で、シリアル番号はFortiGateの底面に書かれている。 

## 機械操作で初期化
fortigateの前面、または後面のどこかに初期化用のボタン穴が開いている。
ボタン穴を爪楊枝とかで30秒ほど長押しすることで 初期化される。

## 初期状態のログインについて
以下の方法でログイン。
・PCとFortigateをLANケーブルでつなぐ。
・ブラウザで https://192.168.1.99/ へアクセス
・ID、パスワードを入力。※初期状態はID:admin,パスワード:なし
※シリアルケーブルがあるならターミナルからアクセスしてCLIでログイン可能。

## 初期の基本設定
・System > Admin > SettingsのView Settingより言語を日本語にする。
・Dashboard > ステータスのシステム情報よりTimeZoneを日本にする
その後ネットワークの設定。

# Juniper SSG 5
## CLIで初期化
シリアルケーブルで接続。以下実行。

```
ssg5-> unset all
Erase all system config, are you sure y/[n] ? y
ssg5-> reset
Configuration modified, save? [y]/n y
Save System Configuration ...
Done
System reset, are you sure? y/[n] y
In reset ...
```

ネットワーク確認

```
ssg5-> get interface
```
group0が192.168.1.1/24になっていること。

### 機械操作で初期化
1.背面のリセットボタンを10秒ほど度押し続ける。
2.前面のstatusランプがオレンジ点滅になり、さらに緑点滅になるまで押し続ける。
3.コンソールに以下表示されたらリセットボタンを一旦離す。
Configuration Erasure Process has been initiated.
Waiting for 2nd confirmation.
4.再度リセットボタンを押し続け、コンソールに以下が表示されればリセット実行。
2nd push has been confirmed.
Configuration Erase sequence accepted, unit reset.

## 初期状態のログインについて
以下の方法でログイン。
・PCとSSGをLANケーブルでつなぐ。
・ブラウザで http://192.168.1.1/ へアクセス
・ID、パスワードを入力。※初期状態はID:netscreen,パスワード:netscreen
（番外編）フーリエ変換は特許出願できたのか？

もし、過去にフーリエ変換が特許が取れるのか、取れた場合にどんな影響があるのか、をまじめに考察してみる。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">もし、Fourier変換が特許をとられていて、使用料をはらわないといけない状況になったら、物理の理論研究者の大半が破産しそう。 <a href="https://t.co/MdL0xkb97u">https://t.co/MdL0xkb97u</a></p>&mdash; 加藤岳生 (@takeokato719) <a href="https://twitter.com/takeokato719/status/1160021186752856064?ref_src=twsrc%5Etfw">August 10, 2019</a></blockquote>

# 結論

- フーリエ級数の概念が公開されたのは、1807年が最初。
- 特許の存続期間は大体20年なので、仮に出願されていても、1827年頃には権利が切れていた。
- アルゴリズムが特許として権利化が認められるのは、1980年後半以後の話なので、1807年当時は難しそう。
- アルゴリズムそのものの検証のためならば、研究目的で利用できそう。


# 出願時期はいつになるのか？存続期間は？

## 出願時
特許には、すでに公知ではない「新規性」が求められる。

フーリエ級数を導入した論文が査読を受けたタイミングを、出願タイミングとみなすならば1807年ですかね……。２世紀前ですよ…。

## 権利終了（存続期間)
特許は発明を公開し、内容を公開して産業発展に寄与する代わりに、しばらくは自分のところで独占的に使うわー、というもの（ものすごく雑ですが）。

よって、権利が行使できる存続期間がある。大体、どの国も出願した日から20年間と。

| 国 | 存続期間 |
|:-:|:-:|
| 日本  | 出願日から20年間  |
| 米国  | 出願日から20年間  |
| フランス  | 出願日から20年間  |


# 権利化できるだろうか？
（ソフトウェアの）アルゴリズム単体で権利化できるかどうか、という議論に関しては、カーマーカー法というキーワードで歴史を確認するとよくわかる。昔は物と密接につながってないとダメだった。

短くまとめると、1985年に出願された数学理論の発明が初めて成立し、それからアルゴリズムも特許として認められるようになりましたと。

https://kaneshin.hateblo.jp/entry/2016/12/06/190000

が！！フーリエさん、フランス人で、発明したときエジプトからフランスに帰ってきているのですよね…。出願するならば、フランスになるんだろうなあ・・・と。

フランスの知的財産法を確認すると、特許から除外する項目に「数学的方法」、ってめっちゃ書かれてる。1807年当時じゃ無理だったんじゃないかなあ…。

https://www.jpo.go.jp/system/laws/gaikoku/document/mokuji/france-chiteki_zaisan.pdf

# 大学ではどこまで利用できる？（研究利用とは）

このあたりはこの論文が非常にわかりやすい。

https://www.ipaj.org/bulletin/pdfs/JIPAJ3-1PDF/3-1_p025-037.pdf

こちらも簡単にまとめると、発明そのものの検証などのために利用するのは、日本・米国ともに認められる（判例次第）。営利などそれ以外の目的になるとグレイゾーンからアウト。

ぎりぎり前処理などで実用に耐えられるのかを検証するために使う分もセーフかもしれない、かなあ……。まあ、判例ベースで考える話なので、いかんともしがたいが。

# まとめ

1807年はどんな時代？

熱力学に関して言えば、まだシャルルの法則とか人工的に水を凍らせるとかレベルですね…。

https://ja.wikipedia.org/wiki/%E7%86%B1%E5%8A%9B%E5%AD%A6%E3%81%AE%E5%B9%B4%E8%A1%A8

歴史背景は、例えばファラデーの人物史みるとわかるが、「貴族」とかの時代と・・・（若干、引く…）

https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%82%B1%E3%83%AB%E3%83%BB%E3%83%95%E3%82%A1%E3%83%A9%E3%83%87%E3%83%BC
YAMAHA RTXルータ, Cisco Catalyst 2960スイッチの初期化

自宅のルータ、スイッチ初期化方法のメモ。

# YAMAHA RTXシリーズ
## 機械操作で初期化
microSD + USB + DOWNLOAD の3つのボタンを押しながら電源を入れることで、工場出荷時の状態に初期化される。

## コマンドで初期化
cold start コマンドを実行すると、工場出荷設定でルータが再起動される。 ただし、管理パスワードの入力が必要。

```
# cold start
```

## デフォルト設定値
デフォルトのConfigについて

```
ip lan1 address 192.168.100.1/24
dhcp service server
dhcp server rfc2131 compliant except remain-silent
dhcp scope 1 192.168.100.2-192.168.100.191/24
```
・LAN1 の IP アドレスが 192.168.100.1/24 になっている。
・DHCP サーバが ON になっている。(192.168.100.2 - 192.168.100.191)
・ログインパスワード・管理パスワードは空白(なし)。
・telnet でログイン可能。
・tftpサーバは起動しているが、全てのアクセスを拒否する設定になっている。
・sshサーバはOFFになっている。 

# Cisco Catalyst 2960スイッチ
## コマンドで初期化
### スタートアップコンフィグ削除

```
Switch# erase startup-config
Erasing the nvram filesystem will remove all configuration files! Continue? [confirm] そのままEnter
Erase of nvram: complete
Switch# reload
System configuration has been modified. Save? [yes/no] no
Proceed with reload? [confirm] そのままEnter
```
　スタートアップコンフィグの削除では、設定レジスタやブート システム設定などのブート変数はクリアされない。"工場出荷状態"に戻したいのであれば以下コマンドを実行する。

```
Switch# write erase
Switch# reload
```

### vlan.datの削除
スタートアップコンフィグを削除してもVLAN情報が削除されていないことがある(show vlanで確認)。
VLANの情報はNVRAM内にある「vlan.dat」ファイルに保存されているので削除。

```
Switch# delete flash:vlan.dat
Delete filename [vlan.dat] そのままEnter
Delete flash:vlan.dat? [confirm] そのままEnter
Switch# reload
Proceed with reload? [confirm] そのままEnter
```

## 参考
http://www.maruko2.com/mw/YAMAHA_RTX1200
https://www.cisco.com/c/ja_jp/support/docs/switches/catalyst-2900-xl-series-switches/24328-156.html
How to use lake formation

# Ready to use Lake Formation

1. [How to use Lake Formation ① (Firsttime Lake Formation)] (https://qiita.com/pioho07/items/a49fcd001a6f0c12cc7b)
When you started lake formation

2. [How to use Lake Formation ② (Data Catalog Authority Control)] (https://qiita.com/pioho07/items/6edbcb9e15826e617e96)
When you want to hide only certain columns or limit the SQL that can be executed

### How to use lake formation(Japanese)

https://qiita.com/pioho07/items/76554a7ac4252858b450

## How to use Glue

https://qiita.com/pioho07/items/32f76a16cbf49f9f712f
※Japanese

## Official document

https://docs.aws.amazon.com/lake-formation/latest/dg/what-is-lake-formation.html

## TIPS

101. [Update history of Lake Formation] (https://qiita.com/pioho07/items/facfb218d822aeca4e56)


## External



### LakeFormation's Birthday

2019/08/09
https://aws.amazon.com/blogs/aws/aws-lake-formation-now-generally-available/
[react-hook-form]を使ってform処理を簡単にする

![](https://raw.githubusercontent.com/bluebill1049/react-hook-form/master/website/example.gif)

## 問題

- Reactでformは辛い。
- [formik][1]も辛い。（ドキュメントを理解するだけで一苦労）
- [yup][2]も理解する必要があって辛い。
- formikのvalidationが実際の`<input/>`と別の場所に書くという[分離]が辛い。


## 解決

[react-form-hook][3]を使う。

1. シンプル（5分で理解、実行できる）
2. inputに直接validationを[書ける][4]
3. hookを使ってる（formikのhook版は現状まだ正式リリースじゃないはず）
4. Contextが[既にある][5]（formはcomponentが深くなりがちなのでまず必要）
5. [examples][6]が一杯あるし、codesandboxだ

[1]: https://github.com/jaredpalmer/formik
[2]: https://github.com/jquense/yup
[3]: https://github.com/react-hook-form/react-hook-form
[4]: https://react-hook-form.com/api#register
[5]: https://react-hook-form.com/api#FormContext
[6]: https://github.com/react-hook-form/react-hook-form/tree/master/examples
url stringからFileオブジェクトを作る

## 問題
`<input type="file"/>`で選択したファイルをプレビュー表示などするために[JavaScript-Load-Image][1]などを使ったりしますが、反対の事をしたい場合どうするのか？

ファイル選択（Fileオブジェクト） -> blob -> URL
を
URL -> blob -> Fileオブジェクト

## 解決
`fetch`を使う。

```tsx
fetch(urlString)
  .then(response => response.blob())
  .then(blob => new File([blob], "image.jpg"))
  .then(file => {
    // fileはFileオブジェクト
  })

```



File周りの良い記事
https://stackoverflow.com/questions/44070437/how-to-get-a-file-or-blob-from-an-url-in-javascript
https://qiita.com/kawa64372358/items/f8f729a29f0b980f7e32
https://qiita.com/TypoScript/items/0d5b08cecf959b8b822c


[1]: https://github.com/blueimp/JavaScript-Load-Image
Scratchでダブルクリックによる二重送信を防止する

# やりたいこと
①問題文・解答の選択肢を表示
②選択肢をクリック
③正誤判定
④次の問題に遷移
というのを作る際に、②でダブルクリックをしてしまっても
次の問題に移れないor2回目のクリックを次の問題の解答として判断されてしまう
ということが無いようにしたい。

↓画面イメージ
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250253/d6b72373-fb21-722e-6ee4-16a890e8efa1.png)

答えだけ欲しいとき
→「できた！」の項目の2枚目の画像

# 問題点
Scratchには既存のイベントや制御にダブルクリック判定が存在しないため
自分でなんとか組む必要がある。
onClickはあるけどonDblClickは無いという状態。


# NG①
選択肢のスプライトをダブルクリックすると、次の問題に移れなくなる。
改めてクリックしても問題遷移できず、最初からやり直すしかなくなる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250253/c9bdf848-3fc8-4f18-7146-494ff87a357b.png)
1秒待っている間に次のクリックが来てしまい、
「次の背景にする」と「statusを0にする」が動いていないっぽい。
ダブルクリック後、statusは1になっていた。

# NG②
NG①で1秒待つのがダメそうだったので、待たないようにしてみた。
すると今度は、2回目のクリックが次の問題の解答として扱われてしまい、2問一気に進んでしまう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250253/eed21950-37db-5693-b4e6-b2d752cf8bc6.png)

## 改善
NG①のelse側に問題遷移とstatusを0にする処理を入れたところ、少しやりたいことに近づいた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250253/b3f8a423-cced-52c1-bb47-502be45028bb.png)

### この時点でのNG
- ダブルクリック後に問題遷移が不可能になることはなくなったが、もう一度クリックする必要がある。
- ダブルクリックしたときに、たまに音が2回再生されて1つの問題で2回解答したことになることがある。

これ以上このソースは改善の仕方が分からなくなったので
設計からやり直し。

# できた!

>①問題文・解答の選択肢を表示
>②選択肢をクリック
>③正誤判定
>④次の問題に遷移

②と③、③と④の間でクリックが割り込んだ場合に、そのイベントを無視すると成功するはず。
ということで、ステータス管理を2種類(問題遷移したか・正誤判定完了したか)にして、
一気に正誤判定や問題遷移をしていたところをメッセージのやり取りに変更してみたら成功した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250253/f7c34fe9-c758-9b1d-1830-7b42106627c3.png)

というところで、このコードだとisCheckFinishedの存在意義が無いことに気づいたので、isCheckedFinishedを削除。
動きました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250253/1246dde3-50b7-960d-9b96-af82ebbe7605.png)

画像だけだと説明が足りないとこを補完

- sendAnswarを送ると別のスプライトがそれを受け取って正誤判定を行い、完了すればcheckFinishedを送ってくれる
- readyを送ると別のスプライトがそれを受け取って問題遷移の処理を行い、ページ変更を送ってくれる

これで、問題遷移が完了するまではいくらクリックしても問題なしのはず。

##NGの何がNGだったのか(理解できたら追記)

NGがそもそもなんで動かなかったのか、改善したやつの改善の何が不十分だったのか。。。
Raspberry PIにFlatツールをインストール

#1.Flatとは？

フラット（「flat」）は、RPiとその他のSBCのdocker活用を助けようと開発している、Web UI管理ツールです。

#2.Using Install Script

ターミナルで以下をコピー、貼り付け、実行します。

>2020/05/10追記
※下記のコマンドを実行する前に次の３つのコマンドを実行しましょう。
①sudo apt-get update
②sudo apt-get upgrade
③sudo apt-get dist-upgrade

```bash
curl http://host.wednus.com/getflat | sh
```

※install動画
https://youtu.be/Z7RKWO5SQ4U

#2.Manual Install
docker-composeを使用します。

- 作業フォルダに移動します。

```bash
cd 〜/
```

 - テキストエディタで「docker-compose.yaml」ファイルを作成します。

```bash
nano docker-compose.yaml
```

- 次の内容を入れて保存します。

```bash
flat：
  container_name：flat
  image：flab / flat
  volumes：
     -  flat-data：/ data
     -  /var/run/docker.sock:/var/run/docker.sock
  ports：
     -  9000：9000＃ウェブUIがポート9000で提供されます。
  restart：always＃リブート後も自動的に実行します。
```

- コマンドラインから次のように実行します。
docker-compose up -d

- これで、Webブラウザで「http：// [PI IP]：9000」に接続して確認します。
 
#3.既知の問題に

 - 「App Template」メニューに用意されたテンプレートは、RPi3でコンパイルされた画像にいくつかのRPi2や1で正常に動作しない場合があります。

#4.公式サイト
http://flat.wednus.com/home

#5.一言
Dockerを学ぶ環境として便利な良いツールでした。
Flatの中では既に提供されているコンテナーが色々ありますので、
皆さんも試してみてください。

#6.Demo Flat
http://xiger.ipdisk.co.kr:9000

>Lamp Demo
http://xiger.ipdisk.co.kr

>RPI Monitor Demo
http://xiger.ipdisk.co.kr:88

>OSJS Demo
http://xiger.ipdisk.co.kr:7000
binding.pryで grepしたい

結論から言うと多分できないのですが、同じようなことをする方法はあります。

「pry grep」とかでググっても出て来なかったので書きました。


```
(何らかの出力結果) | grep hoge
```

ってのはコマンドライン上ではできるのですが、pry上で
出来なくて困っていました。
## 解決策
```ruby
(出力結果).select{ |item| item.to_s.match('絞り込みたいワード') }
```

これでいけます。

grepを使わなくてもRubyのメソッドでどうにでもなりました。


## 具体例

ex.)
binding.pryが止まっているところで、使えるメソッドの中で、'current'と名のつくメソッドだけが知りたい！

```ruby
methods.select{ |item| item.to_s.match('current') }
```

matchには正規表現も使えるので、使いこなせるともっと便利ですね
JavaScriptを学ぶ②（クリックで画像の形やアニメーションをつけよう♪）

クリックして色が変わるアニメーションです:heart_eyes:
動画もqiitaに貼る方法が成功しました！嬉しい(^^)

<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/bcf09ddf-cf3d-214c-0e49-b7ff5400533f.gif">

```html
<script>
  `use strict`;

  document.getElementById(`target`).addEventListener(`click`,function(){
    document.getElementById(`target`).style.background = `pink`;
    document.getElementById(`target`).style.borderRadius = `50%`;
  })
</script>
```
※①のときに、

```
document.getElementById(`target`).style.borderRadius = `50%`;
```
を追加しただけかと思いきや、思わぬ発見が！！！

##CSSとScriptでの表記の違い！（ハイフンは不要？）

border-radiusを
borderRadiusとＲを使って表記しているということは、

background-imageも
backgroundImageと大文字でＩを表示すれば、、、、背景画像を変えられるのでは！？

早速、試してみると、、、

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/bd9c02b2-13b4-5e51-3a74-b41c9486c058.png">

```html
<script>
  `use strict`;

  document.getElementById(`target`).addEventListener(`click`,function(){
    document.getElementById(`target`).style.backgroundImage = `url(imge/btn_3.png)`;
    document.getElementById(`target`).style.borderRadius = `50%`;
  })
</script>
```
いけました～～( ;∀;)♪
こういうアレンジでの疑問点の解消は嬉しいですね(^^)

そして、ここで重大なことにさらに気づいてしまいました(´;ω;｀)
###シングルクォーテーションとバッククォートの違い…
私のコード、、、シングルクォーテーションで囲むところを、
バッククォートで囲ってしまっていました…。
処理上、何も問題はなかったですが、これ以降のコードは書き換えて掲載します！！
はずかしい:sob:

###classList.add('〇〇') ※Ｌは大文字

```html
<script>
  'use strict';

  document.getElementById('target').addEventListener('click',function(){
    // document.getElementById(`target`).style.background = `pink`;
    // document.getElementById(`target`).style.borderRadius = `50%`;
     document.getElementById('target').classList.add('circle')
  })
</script>
```
※コメント部分をすっきりさせるために、
①`document.getElementById('target').classList.add('circle')`の追加。
②`.circle`のクラス追加。
これで、おそらく意味は、
「target要素」を取得・呼び出しをして、
そこに、クリックしたら、「ＣＳＳでcircleクラスを追加するよ～」という意味になるのでしょう！

```css
.box{
  width:100px;
  height:100px;
  background:skyblue;
  cursor:pointer;
  transition:0.8s;
}
.circle{
  background:pink;
  border-radius:50%;
  transform:rotate(360deg);
}
```
※追加したのは、.circleの部分すべて♪
※.classの、`transition`です。
※`transform:rotate(360deg);`の部分は、動画では何も解説なし:stuck_out_tongue_closed_eyes:
調べてみたところ、以下のブログがすご～く分かりやすかったです(^^)
[【初心者必見】要素をくるっと回転！transform:rotate()の全て](https://www.sejuku.net/blog/51548)


では、ここから、アレンジを考えてみましょう(^^)♪


<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/d26a57d5-2f17-dab5-5fa4-539516b9fb75.gif">

```css
.box{
  width:100px;
  height:100px;
  background:rgba(125, 233, 132, 0.69);
  cursor:pointer;
  transition:2.0s;
  margin-left:200px;
  margin-top:100px;
}
.circle{
  width:200px;
  height:200px;
  background:rgba(90, 215, 5, 0.7);
  border-radius:50%;
  transform:rotate(-720deg);
}
```

変えた部分は、width,height,background,transitionの時間,
rotateを反時計周り２周です(^^)

いい感じに仕上がったので、今回はこのへんで:smiley_cat: