OmniAICreator/Qiita-1.07M huggingface dataset:
React やってみたら超簡単だった話(2020年11月版)

## React / Vue.js / Angular / jQuery
Angularjsが出た時に、jQueryでもういいじゃん新しい言語覚えるのめんどくせーよと思いながらやってみたら、超便利で新しい言語ちゃんと覚えないとダメだなと改心したのが遠い分昔。

その後、Angularの頻繁なバージョンアップに嫌気がさしVue.jsを使ってみたら、Angularより随分整理されてて簡単でびっくりしたのが少し昔。
Vuetify とセットで利用するとほとんどコードを書かずにやりたいことができるし、typescript を使うと記述もシンプルで安全だし、もうこれで新しい言語覚えなくてもいいかと油断したのが少し前。

とは言え、Reactも触っておいた方がいいかなと触ったら、他のフレームワークとは**概念が違い**戸惑ったけれども**超簡単**でびっくりしたのが今日。

触ってみたいけど難しそうだなと思ってる方は是非触ってみてください。


# 特に便利と思ったところ

## jsx/tsx

js/ts に html を直接埋められる。

以下のコードは等価。

``` createElement.js
const header = React.createElement("header", null,
  React.createElement("h1", null, "Hello")
);
```
``` createElement.jsx
const header = <header>
    <h1>Hello</h1>
</header>
```

`React.createElement`の様な書き方しかできないなら`Vue.js`圧勝かなと思ったけれども、そんなことはなかった。Flutterもこの辺融通効くようにならないかな…。

ベタのhtmlに近い形で記述できるVue.jsの方がデザイナとの協業に強いと思っていたのだけど、[Storybook](https://storybook.js.org/)を併用して開発すれば問題ないようにも思えた。


## Function Component

状態を持たないコンポーネントは class ではなく、function で定義できる。
Flutter の、StatefulWidget / StatelessWidget をすごくシンプルにした感じ。

以下のコードは等価。

``` class-component.jsx
class Square extends React.Component {
  render() {
    return (
      <button
        className="square"
        onClick={() => this.props.onClick()}
      >
        {this.props.value}
      </button>
    );
  }
}
```
``` function-component.jsx
function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}
```

記述がシンプルなだけでなく、このコンポーネントは状態を持たないことが読み手に一瞬で伝わるのが素晴らしいと思った。


## チュートリアル

React公式のチュートリアルが、ステップバイステップでサンプルコードを修正していくものとなっており、Reactの素晴らしさを簡単に理解できる作りとなっていた。

[チュートリアル：React の導入](https://ja.reactjs.org/tutorial/tutorial.html)


### 準備

チュートリアルのソースコードは code pen にあるため、ローカルの開発環境作成は必須ではない。
ローカルの開発環境を作成する場合、node と create-react-app のインストールを行う。

``` 
choco install nodist
nodist + 10.23.0
nodist 10.23.0
npm i -g create-react-app
```

2020/11/14時点では、node 8, 10, 12 で動作すると記載があったが、8.17.0, 12.19.0 では動作しなかった。


### プロジェクト作成と実行

```
# js版作成
npx create-react-app my-app
# ts版作成
npx create-react-app my-app --typescript
# 実行
yarn start
```

以後は、src以下のファイルを全部消して、チュートリアルの指示通りファイルを作成し、一つずつ修正をしていけば完了します。

コンポーネント単位でファイルを分けるなども簡単にできました。


## おわりに

とにかく**超簡単**でした。
vue-cli もそうであるが、webpack.config を手で書かなくて良くなったので誰でも気軽に始められるのでぜひお試しください。

以下の記事もあわせて読んでおくとよいと思います。

- [MDN web docs : Reactをはじめる](https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
- [フロントエンドのコンポーネント設計に立ち向かう](https://qiita.com/seya/items/8814e905693f00cdade2)
- [綺麗なReactコンポーネント設計でモノリシックなコンポーネントを爆殺する](https://qiita.com/teradonburi/items/6828635d2e70dba6637d)
bundle install で起きたエラーについて ~ puma Gem ~

##はじめに
・投稿者は初学者ですので誤った情報を投稿してしまうことがあります。その時はぜひ、遠慮会釈なしにご指摘いただけると幸いです。

##エラーの内容
エラーが発生したのは唐突で、ローカルサーバーを再起動するために`rails s`を行ったところ、以下のようなエラーが発生しました。

```
Could not find puma-4.3.3 in any of the sources
Run `bundle install` to install missing gems.
```

Gemfile を弄った記憶がなかったため混乱しました。念のため、GitHub Desktopで変更履歴があったか調べましたが、やはりサーバー再起動前と何も変わっていませんでした。

とりあえず、 `Run bundle install` とあったので素直に実行したら、またエラーが発生しました。

```
An error occurred while installing puma (4.3.3), and Bundler cannot continue.
Make sure that `gem install puma -v '4.3.3' --source 'https://rubygems.org/'` succeeds before bundling.
```

赤文字でターミナルが怒ってきました。

##エラー解決の方法

エラーの文の中に、`gem install puma -v '4.3.3'` （pumaのバージョンを4.3.3にしろ）という指示があったのでGemfileを修正しました。
それから、Gemfile.lockを削除し、`bundle install`を実行したところ、正常にインストールされ、サーバーの起動もできました。

##まとめ
なぜ、急にGemfile を弄っていないのにエラーが起きたのかわからなかったため、puma というGemについて色々と調べましたが、<b>Webサーバーに関係するGem</b>ということしかわかりませんでした。悔しいですが、またpumaのせいで動かないという時がきたら、改めて調べ尽くしたいと思います。
「レガシーコードからの脱却」読書メモ その3

レガシーコードからの脱却
ソフトウェアの寿命を延ばし価値を高める9つのプラクティス

David Scott Bernstein 著
吉羽 龍太郎、永瀬 美穂、原田 騎郎、有野 雅士 訳
オライリー・ジャパン 2019年
https://www.oreilly.co.jp/books/9784873118864/

---
第Ⅱ部　ソフトウェアの寿命を延ばし価値を高める9つのプラクティス
　7章　プラクティス3 継続的に統合する
　8章　プラクティス4 協力しあう
　9章　プラクティス5 「CLEAN」コードを作る
を読んだメモ

---
# プラクティス3 継続的に統合する

---
# 従来のやり方
最後に統合する
→最後になってバグや不具合が出る
**修正のコストが膨大になる**

---
# 発想を変える

---
# 早期から頻繁に統合する
統合するのが遅れるほど面倒になる
**→頻繁に統合し、問題が小さなうちに対処する**

---
# いつでもリリース可能にする
・顧客が実際に目にするまで、それが「欲しかったもの」かどうかわからない
・いつ何をリリースするかはビジネス側の領域

---
# やり方について
・ビルド、テスト、受け入れテストの自動化
　→継続的インテグレーションのツールを活用
・バージョン管理
　→ソースコードだけでなく、ビルドに必要なすべてを管理
　→ブランチは避ける(フィーチャーフラグでの無効化)

---
# プラクティス4 協力しあう

---
# ソフトウェア開発は社会的活動
コミュニケーションと協働が必要不可欠

---
# プログラミングは1人でやる作業？

---
# ペアプログラミング、スパイク、スウォーム、モブ...などもある

---
# ペアプログラミング
チームに知識を広げる最も早い方法
割り込みが減ってコーディングに集中できる
コードの共同所有をする
→一人で作るとコーディングスタイルが統一されず保守性が下がる

---
# コードレビュー
コーディングしたペアだけでなく、他のメンバーにもコードを理解してもらう
→コードの共同所有をする(2回目)

---
# ふりかえり
何をやったか、どうやったか、なぜやったか、もっとうまくやるにはどうするか
対応可能な課題を発見し、チーム全体を改善する

---
# 知識を広げチームと共有する
学ぶ最高の方法は教えること
常にメンター、メンティーであれ
> ソフトウェア業界に、これ以上秘密結社はいらない。

---
# プラクティス5 「CLEAN」コードを作る

---
# 良いソフトウェアの土台となるコード品質

---
# 1つのことだけをやる
Cohesive: 凝縮性
限られた機能を持つ小さなクラスからプログラムを構成する
凝縮性が高いオブジェクトは命名しやすい
抽象-詳細の階層を持つ

---
# 取り換え可能にしておく
Loosely Coupled: 疎結合
抽象クラスやインターフェースを使用して実現
※密結合が絶対悪ではない。「意図的でない結合」が良くない。

---
# やり方は言わない
Encapsulated: カプセル化
やろうとしていること(インターフェース)とどうやってやるか(実装)を切り離す
呼び出し側の視点で設計する

---
# 自分は自分、他人は他人
Assertive: 断定的
対義語は「好奇心旺盛」
自分自身の仕事を他のオブジェクトに肩代わりさせない
他のオブジェクトをいたずらに参照しない

---
# 同じことを別の所でしない
Nonredundant: 非冗長
冗長性とは**意図**の繰り返し

---
# 明日のベロシティのために今日品質を上げる
「CLEAN」なコードはテストがしやすい
「CLEAN」は互いに関連しており、ある1つの観点で改善すれば他も改善される
→著者のおすすめは「凝縮性」(適切な名前は理解を助ける)
**コード品質を高めることで、ソースコードは理解しやすくなる**

---
# 私には汚くする時間がない
著者の友人である料理人の言葉
速く働けば働くほどきれいになる

---
# つづく
Firestoreでidのわからないdocumentを取得したいときはどうすればいいのか

[firestore](https://firebase.google.com/docs/firestore?hl=ja)はフロントエンドエンジニアが個人でwebサービスを作る際に、わざわざデータベースを一から作っていく必要がなく、数行のコードでデータを保存したり、取得したりととても便利なサービスです。

ただ、使いはじめの頃、必ずと言っていいほど`idのわからない(または自動で付与されたidの)documentをどうやって取得するのか`という壁が立ちはだかります。

[公式ドキュメント](https://firebase.google.com/docs/firestore/query-data/get-data)では`firebase.firestore.collection("cities").doc("SF").get()`で取得できると書いてあるけど、この例でのSFと言うidがそれ以外、もしくは複数のドキュメントをgetしたい場合にはどうすればいいのかと言う話です。

## 結論：docを使わなくてもdocumentの取得は可能

[公式リファレンス](https://firebase.google.com/docs/reference/js/firebase.firestore.QuerySnapshot)をみていただければわかると思いますが、データの取得に使う`get()メソッド`は返り値として`QuerySnapshot`を返します。

この`QuerySnapshot`は`documentのid`を持っていますし、このsnapshotからdocumentを取り出すことが可能です。

### documentの取り出し方の一例を紹介
ここでは僕のパターン(React)を紹介します。

```Example.jsx
const getPosts = () => {
    //空の配列postsを準備します
    let posts = []
    //firebaseお決まりのメソッドでコレクションからデータを取ってきます
    //ここでのポイントは「doc()がいらないこと」です
    db.collection('posts').get()
    //getしたデータに対し、
    .then(snapshot => {
        //docsプロパティ(※)を指定しforEachで各データを取り出します。
        snapshot.docs.forEach(doc => {
            const data = doc.data()
            //準備しておいた配列に取り出したデータをpushします
            posts.push({
                authorName: data.authorName,
                content: data.content,
                createdAt: data.createdAt,
                title: data.title,
                id: doc.id
            })
        })
        //ここはhooksなので気にしなくてOK
        setCurrentPost(posts)
    })
}

```

※マークをつけたdocsプロパティは、get()メソッドの返り値QuerySnapshotが持つ、プロパティで指定したcollectionのデータを配列として持っています。複雑ですね...w
この辺の返り値や持っているプロパティなどに関しては英語しかありませんが[firebaseの公式リファレンス](https://firebase.google.com/docs/reference/)に細かく説明が載っています。

### 番外編：documentのidを自動的に付与する方法について
ここも少し迷ったところなので、一応紹介します。

今度は逆にデータを保存する方法についてなのですが、firestoreでは自動idが推奨されていますが、この自動のdocument idをどのようにつけるのかというと、`add()`を使います。

```Form.jsx
    db.collection('posts').add({
      title: title,
      content: content,
      authorName: authorName
    })

```
このように`add`を使えばデータを保存する時に自動idを生成してくれます。

ちなみにデータを追加する時に`set()`と言うメソッドも使いますが、これはdocumentのidを指定する必要がありますし、idを自動で生成してくれません。

「じゃあ使わなくていいじゃん」と思うかもしれませんが、これはこれで、データの編集の際に`{ merge: true }`と引数に指定することで、値が変わっているところだけ更新するので、無駄な書き込みが無いなどのいいところもあります。

このようにしてデータの追加の際はaddにすれば自動でidが生成されるのです。

## firebaseは公式ドキュメントを読めば結構理解できる
firebaseはかなり公式のドキュメントが充実しています。

今回のようなわからないメソッドなどがあった場合はリファレンスを見れば、大切なところが全て書いてありますし、導入部分の簡単な使い方については日本語のドキュメントがあります。

ですので、`firebase関連でわからないことがあったら、とりあえず公式ドキュメントをみましょう`と言うお話でした😅

## 参考

[Firebase公式ドキュメント](https://firebase.google.com/docs)
Elmer/Iceのインストール（Ubuntu on WSL）

##Elmer/Ice
まず、Elmerは偏微分方程式を解く有限要素法（FEM）のソフトウェアです。
Elmer/Iceは氷河・氷床の流動に特化したパッケージを指します。

以前Windows 10にElmer/Iceを入れようと挑戦したときには、Elmerは入れられたけどElmer/Iceは入れられなかったので、Ubuntu on WSLで試してみたものです。
使い方などはまだ勉強中なので、これはElmer/Iceをインストールするまでを記載します。
日本国内で氷河の流動を計算したいという人はとてつもなく限られた人だと思われますが、誰かの役に立てばいいなあという覚え書きです。

##環境
Windows 10 Home 64bit
Ubuntu 20.04 LTS on WSL1

##手順
https://github.com/ElmerCSC/elmerfem
ここ↑から全てDL、適当なディレクトリに保存。
（普段WSL ubuntuで作業した後Windowsでいじりたいことが多いいのと、WSLのホームディレクトリが変わったりするのがだるいので私はなんでもかんでもDドライブに置いている。）

とりあえず何も考えず言われた通りに、

```
$ sudo apt install git cmake build-essential gfortran libopenmpi-dev libblas-dev liblapack-dev
```
その後書いてある通りやって失敗しまくっていたので以下の手順を踏んだ。

```
$ cd /hoge/elmerice-devel/
$ mkdir build
$ cd build
$ cmake -S /hoge/elmerfem-devel/ -B . -DWITH_OpenMP:BOOLEAN=TRUE -DWITH_ElmerIce:BOOL=TRUE
$ make
$ sudo make install
```

ElmerSolverなどが```/usr/local/bin/```の中にできていればとりあえずOK。

振り返ってみるとこれだけかよという感じだけど、これにたどり着くまで時間がかかりました。
Web上にあるインストールガイドでは```cmake .. -DWITH_OpenMP:BOOLEAN=TRUE```とかなんとか書いてありますが、別のところにあるCMakeListを参照していることがあります（ありました）。


また、「-DWITH_ElmerIce:BOOL=TRUE」これ入れないとElmerだけ入ってここまででは気が付きません（めっちゃ困る）。
```/usr/local/share/elmersolver/lib/```にElmerIceSolvers.soがあれば本当にOK。

##その後
gmshとParaviewをインストールしました。Paraviewはwindowsに入れた。

チュートリアル通りに実行後Paraviewでちょっといじってみるときれいな図を作ってくれる。自己満足に浸れます。
![Elmer.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324057/0d471614-81fc-6f2c-7e3f-3c7dc8d24ba4.png)
これからこいつを使って氷河の流動について理解を深めていきたいものですね。
Elmer/Iceを一緒に勉強する仲間が欲しいところです。
GASをHackして業務を効率化しよう(Google Docs/DocumentApp)

# GASをHackして業務を効率化しよう(Google Docs/DocumentApp)

## 注意事項と本家

<dl>
  <dt>2020/11/14 : 準拠</dt>
  <dd>2020/11/14時点の下記リファレンスドキュメントを参考に書いています。</dd>
  <dt>Class DocumentApp  |  Apps Script  |  Google Developers</dt>
  <dd>https://developers.google.com/apps-script/reference/document/document-app</dd>
</dl>

## 書いた経緯

業務でGoogleのBuisiness suiteを利用している会社は少なくないはず。
しかし、そこにGoogle Apps Script(GAS)を使った効率化を施しているという話は（日本だと）少ないような気がしています。
というわけで、この記事はそんなGASの中でもさらに利用が少ないと思われるDocumentAppを少し掘ろうと記事を書きました。
というか、自分で作業している間のメモみたいなものです。
（ちなみに、執筆時点でDocumentAppについてQiitaで検索を書けても89件しかヒットしませんでした）

## 用語

<dl>
  <dt>Google Docs</dt>
  <dd>Googleが提供しているDrive内の文書作成エディタ機能。</dd>
  <dd>（偏見：出向先の会社がWordを使っていると、まれによく表示やライセンスの関係で問題が発生する）</dd>
  <dt>GAS</dt>
  <dd>Google Apps Scriptのこと。JavaScriptを使えるならワリと手軽に、かつ無料でDrive内部のデータを自動化に組み込める。</dd>
  <dd>(メンターがいればJS初心者の教材としても良いかもしれないけど、いないなら敬遠したい程度の難易度)</dd>
  <dt>DocumentApp</dt>
  <dd>Google DocsをGASから操作する時に主軸となるAPIクラス。</dd>
  <dt>インスタンス</dt>
  <dd>オブジェクト指向的な用語。「実体」と置き換えるとよさげ。</dd>
</dl>

## Google Docsとは

Google DocsはGoogleが提供する文書作成エディタで、いわゆるMSのWordに近い機能を提供してくれます。
ドライブの権限を共有している相手となら、極めて簡単に以下のような恩恵を受ける事ができます。

- 複数ユーザーによる文書のリアルタイム同時編集
- コメントによる非表示データの埋め込み
- バージョン管理（特定のタイミングに巻き戻しする機能、命名も可）

とはいえ、今回の主題はその先です。
「GASを使った自動化でどんな役割を持つのか」をメインとして、その主軸になるDocumentAppまわりについて整理します。

## class DocumentApp

このクラスは三つの機能の窓口になっています。
（経由するとブラウザのエディタ上でCtrl+Spaceによる補完ができます)

1. Google Docsファイルのインスタンスへのアクセス
2. エディタUIインスタンスへのアクセス
3. インスタンスとやり取りするための定数(Propertiesとして保持)の提供

(私見：定数の分類、とくにAttributeに関して雑じゃないかな？　あと段落のスタイルを定数にした人とはじっくりお話したい)

### Google Docsファイル関連

<dl>
<dt>create(name) : Document</dt>
<dd>ドライブ内へのファイル新規作成と、そのインスタンス取得</dd>
<dt>openById(id | url) : Document</dt>
<dd>ドライブ内ファイルを指定したドキュメントのインスタンス取得</dd>
<dt>getActiveDocument() : Document</dt>
<dd>特定のファイルに紐づいている(container-bound)場合のみ利用可能。</dd>
<dd>呼び出しユーザーが開いているファイルのドキュメントを取得。</dd>
</dl>

### UI関連

<dl>
<dt>getUi() : Ui</dt>
<dd>特定のファイルに紐づいている(container-bound)場合は、そのファイルを編集するエディタ内のUser-Interfaceに干渉できる。</dd>
<dd>紐づいていない場合は調べてないです。（暇があればいつか)</dd>
</dl>

### 定数 : 型情報/判定
<dl>
<dt>enum ElementType</dt>
<dd>各種インスタンスの型情報を判定する時に使う。</dd>
</dl>

### 定数 : 段落スタイル

<dl>
<dt>enum ParagraphHeading</dt>
<dd>段落ごとに設定できる「スタイル（書式に名前を付けたもの）」のデータを扱う際に使う。</dd>
<dd>(私見：どうしてWordのような拡張性を持たせなかったのか、とても納得できない)</dd>
</dl>

### 定数 : 文字列表示位置
<dl>
<dt>enum TextAlignment</dt>
<dd>行内で文字の上下寄せに関する定数</dd>

<dt>enum HorizontalAlignment</dt>
<dd>段落の水平寄せに関する定数</dd>

<dt>enum VerticalAlignment</dt>
<dd>埋め込みセル内部における文字列寄せの定数（らしい。こちらも後回し）</dd>

<dt>enum PositionedLayout</dt>
<dd>埋め込んだ画像に対して、ドキュメントのテキストがどのように振舞うかを指定。</dd>
<dd>PositionedImageに対して、テキストを囲むように画像を表示する場合などに使う。</dd>
</dl>

### 定数 : その他

<dl>
<dt>enum GlyphType</dt>
<dd>箇条書きで先頭に表示する数値や丸などを表現する定数。柔軟な表示をしたければ使うかも。</dd>

<dt>enum Attribute</dt>
<dd>文字列要素に対する属性的なものをまとめて突っ込んでいる。</dd>
<dd>書式：太字、イタリック、下線、フォント</dd>
<dd>位置：マージン、パディング、スペーシング</dd>
<dd>大きさ：画像の大きさ、セルの大きさ</dd>
<dd>背景色：ドキュメント全体、テーブル、段落</dd>
<dd>その他</dd>
</dl>
セミコロンのつけ忘れを、JSはどこまで許してくれるのかを試してみた

# はじめに

IT初心者の私ですが、普段はJavaScript, Node.js（以下JS）を使った開発をしています。
ここ数日、Javaを学び直そうとしているのですが、とにかくセミコロンをつけ忘れてはコンパイラに怒られています。

「JSなら実行してくれるのに・・」

**むしろ逆にJavaScriptがセミコロンのつけ忘れに寛容すぎるのでは？**

そのような背景もあり、JavaScriptがどこまでセミコロンのつけ忘れを許してくれるのかを、簡単に検証してみました。


# この記事でわかること

- JSだとOKだけどJava先生は怒る状態はどういうものか
- JSが怒らないセミコロンのつけ忘れのギリギリのライン

# 実行環境

- Java : paiza.io (openjdk version "15" 2020-09-15)
- JS : paiza.io(Node.js v12.18.3)

# Javaで怒られたソースコード

まずこちらがJava学習中に怒られた案件です。

```Java
import java.util.*;
import java.util.ArrayList;

public class Main {
    public static void main(String[] args) throws Exception {
        // Your code here!
        List<Integer> names = new ArrayList<Integer>();
        
        names.add(1);
        names.add(2);
        System.out.println(names.get(0));
        System.out.println(names.get(1))  // ここのセミコロンつけ忘れで怒ってる
    }
}
// Main.java:12: error: ';' expected
//        System.out.println(names.get(1))
//1 error
```

「後ろに何も処理書いてないんだからいいじゃん！セミコロンなしでも分かってくれよ～！わかるだろ～！？」と、
セミコロンを忘れがちな私は思うわけです。
実際JSでは、後ろに処理がなければ実行できる（できてしまう）のだし。

# 実際JSだとどこまで許されるのか


```JS
const a = "hoge";
console.log(a);
// hoge
```

```JS
const a = "hoge";
console.log(a)
// hoge
```

```JS
const a = "hoge"
console.log(a)
// hoge
```

```JS
const a = "hoge"console.log(a)
// SyntaxError: Unexpected identifier
```

```JS
const a = ("hoge");console.log(a)
//hoge
```



セミコロンがなくとも、最悪改行さえしていれば実行できるようですね。
そしてこれはJavaも同様ですが、セミコロンで区切りさえすれば問題なく実行できます。

# おわりに

これらの仕様に対して、良し悪しの解釈は人により分かれると思いますが、
「実行できる」とはいえ、私はセミコロンを書き込む癖をつけようと感じました。
WebIdentityFederationとCognito

# Web Identity Federationとは？

例えば、`DynamoDB SDK`を使って`DynamoDB`にアクセスする際にアクセスキーが必要となりますが、アプリに埋め込むのは当然ながら非推奨デス。

これをいい感じに解決しAWSリソースに対するアクセスを許可させる方法が`SecurityTokenService(STS)`を用いた`Web Identity Federation`です。

>①ユーザーに一般的なサードパーティー ID プロバイダー (Login with Amazon、Facebook、Google、OpenID Connect (OIDC) 2.0 互換の任意のプロバイダーなど) を使用したサインインを求めることができます。②,③そのプロバイダーの認証情報を AWS アカウントのリソースを使用するための一時的なアクセス許可に変換することができます。 [IAM の一時的なセキュリティ認証情報](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_credentials_temp.html#sts-introduction)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550573/6f69b39b-ddf9-bdc0-3c92-3e149744c6d2.png" width=80%>

①amazonのアカウントにログイン、amazon(IdP)からtokenが返ってくる。
②そのtokenをSTSに渡すとSTSは期限つきのIAMロール(AssumeRole)を発行
③AssumeRoleを使いDynamoDBにアクセス

①が**認証**、②③が**認可**という関係になりますね。
簡単に書きましたが実装にはIAM側での設定などが必要になります。[IAM ID プロバイダーの作成](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_roles_providers_create.html)

そんな`Web Identity Federation`をアプリケーションで使う際に推奨されているのが`AWS Cognito`！

# AWS Cognitoとは？
ウェブアプリケーションやモバイルアプリケーションの認証、許可、ユーザー管理をサポートしてくれます！

## Cognitoのコンポーネント
コンポーネントは主に**ユーザープール**、**IDプール**の２つで構成されています。

### ◯ユーザープール
ユーザープールはユーザーの認証と管理を行うコンポーネント

##### ■ 認証方法

- ユーザー名 (設定でメールアドレスや電話番号も使用可) とパスワードを入力してログイン認証（Cognitoユーザープールが提供する認証機能）

- 外部IDプロバイダーと連携した認証(Facebook, Google, Amazon, Apple)

Cognitoユーザープールが提供する認証機能はユーザー自身がサインアップを行い登録、また管理者が事前に登録する事もできます。

##### ■ 認証されたユーザー情報はどこに登録される？
認証されたユーザー情報はユーザープールに登録されます。
認証された証として`IDトークン`が発行され、この`IDトークン`を使い、アプリケーションがユーザーを特定したり、他のサービスとの連携を行うことが出来ます。

### ◯IDプール
外部IDプロバイダーによって認証されたIDに対して、AWSへのアクセス権限を持つ`一時クレデンシャル`を返すコンポーネント

##### ■ 認証方法
- 外部IDプロバイダー認証(**Cognitoユーザープール**, Amazon, Facebook, Google, Twitter, OIDCに準拠したプロバイダー, SAMLに準拠したプロバイダー)

##### ■ ユーザープールとの違いは？
- ユーザープールは**認証**を行うコンポーネント
- IDプールは**認可**を行うコンポーネント

どちらのコンポーネントも外部プロバイダー認証(IdP)を使えますが、IDプールでは認証後に付与される`一時クレデンシャル`を使い、アクセスが許可されているAWSリソースに対してアクセスすることができます。

### ◯ユーザープールとIDプール
IDプールのIdPにユーザープールを指定可能です。つまり、ユーザープールトークンとIDプールトークン (STS)は交換することが可能です。

下の図を見るとわかりやすいと思います！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550573/4b12ea5f-d4d4-8513-8d75-0505c8a6cb6e.png" width=80%>


①アプリにアクセスするとログイン画面にリダイレクト認証を行う
②IDプールのIdPとしてユーザープールを指定することでユーザープールのIDトークンから一時クレデンシャルを返す
③一時クレデンシャルを使いアクセスが許可されているAWSリソースに対してアクセス

ハンズオンも書く予定でしたが疲れたので次回にします:innocent:笑
Cognito初心者なので間違ってるところあれば教えてください！
### 参考
[ウェブ ID フェデレーションについて]
(https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_roles_providers_oidc.html)
[AWS再入門ブログリレー Amazon Cognito編
](https://dev.classmethod.jp/articles/re-introduction-2020-amazon-cognito/)[[AWS Black Belt Online Seminar] Amazon Cognito 資料及び QA 公開](https://aws.amazon.com/jp/blogs/news/webinar-bb-amazon-cognito-2020/)
Rを用いた重回帰分析結果の可視化

#はじめに
Rによる重回帰分析を方法と、プロットを出力するまでの流れをまとめます。
自分が調べたかぎり、2020/11時点では重回帰分析の結果をプロットしてくれる機能はなさそうだったので、力ずくで行いました。

#1　重回帰分析とは
ある「目的変数」を複数の「説明変数」で表すために行います。
身近な例として、目的変数を「体育の評定」とします。
仮に、50m走が速い学生は体育の成績が高い傾向があるとします。
しかし50m走が遅くても握力が大きい学生、1500mが速い学生も存在しており、そうした学生も高い評定を得る可能性があります。
このような場合に"50m走"、"1500m走"、"握力"、"反復横跳び"、"立ち幅跳び"、"前屈"、"ハンドボール投げ"といった複数の項目から評価することで、より精度の高い予測を行うことができます。

今回は"遺伝子発現"を目的変数、"外部環境要因"を説明変数とした重回帰分析を行いました。

#2 重回帰分析
```R
setwd("/Volumes/~/~") #作業ディレクトリの指定
data <- read.csv("Gene_Environment.csv", sep = ",", header = TRUE) #用いるデータの読み込み
z <- scale(data) #scaleで標準化（平均0、標準偏差1に）
z <- data.frame(z) #データフレーム形式に変換
m <- lm(MEpurple~., z) #lm関数で重回帰
summary(m) #結果を表示
m2<-step(m) #AICをもとに説明変数の選択を自動で行ってくれる
summary(m2)#変数選択後の結果を表示
sink("multi_regression.txt") #summaryをテキスト形式で作業中のディレクトリに保存 #"　"の文字を変えることでつけたい名前をつけられる
print(summary(lm(m2))) #出力内容をR上で確認
sink() #出力を解除
```

#3 プロット表示の考え方
得られた説明変数の係数に対して各説明変数を乗じたものの和が、各サンプルにおける予測値である。
全てのサンプルにおいて予測値を算出し、予測値-目的変数の散布図を描くことが目的。

```R
a<- c() #空のベクトルを用意
for (i in 2:11){
  x <- 説明変数係数[i,1]*サンプル固有値[1,i]
  a<- c(a, c(x))
}
a
sum(a)
```

#4 重回帰予測値プロット作成

```R
write.csv(z, file = "standarized_gene_env.csv") #標準化されたデータセットを用意、書き出しの必要は特にない
co <- data.frame(m2$coefficients) #重回帰分析した結果の中から係数のデータセットを抽出し,"co"に格納

ad <- c() #空のベクトルを用意
for (j in 1:100){　#今回用いたものは、サンプル1~100まで存在するため1:100
  for (i in 2:11){　#説明変数が10種類存在した　#1行目には説明変数、2~11行目に目的変数があるため2:11
  x <- co[i,1]*z[j,i] #係数*サンプル固有値を全サンプルでループして行う。(sample1の目的変数10項目を算出 -> sample2の目的変数10 -> sample3.... -> sample100)
  ad<- c(ad, c(x)) #計算過程をベクトルに格納
  }
}
ad #結果表示、この時点で計算ミスないか検算したがいい
ad2 <- matrix(ad, nrow=100, ncol=10, byrow=T) 　#現在は1列のベクトルデータになっているため100行×10列の行列に変換、byrowにより左から右へ格納していく（今回は1行目10列分を埋めたら、２行目に移る…の繰り返し）
ad3 <- rowSums(ad2) #行の和を算出 (10個の値の総和)
ad3 <- data.frame(ad3) #データフレームにする
ad4 <- ad3 + (co[1,1]) #切片のデータを全てのデータに足す（これにより各サンプルの予測値の準備完了）
ad5 <- cbind(z[,1], ad4 )  #ModuleEigengeneと予測値データをまとめた行列の作成
colnames(ad5) <- c("eigengene", "Prediction") #各列のデータラベルを指定

plot(Module_eigengene ~ Prediction, data = ad5,pch = 21,
     bg = "pink",main= "Multiple regression analysis of eigengenes with factors",
     xlab = "Prediction by multiple regression", ylab = "eigengenes",bty="L" ,cex = 1.5)

result <- lm(Module_eigengene ~ Prediction, data = ad5) # 回帰分析を行う
abline(result,lty = "dotted", lwd = 2) # 推定回帰直線を描く
summary(result)  
```

もし重回帰分析後のデータからすぐにプロットを出力できる関数、機能等ありましたら教えて頂けるとありがたいです。

#5 参考
http://cse.naro.affrc.go.jp/takezawa/r-tips/r/10.html
英語を学びたいエンジニアへ　DEVのススメ

### DEVの紹介
皆さんはDEVというサイトをご存知でしょうか？
海外版のQiita（Qiitaが日本版のDEVなのか？笑）のようなもので使い方はQiitaを普段使っている人なら普通に使えるようなUIになっていると思います。（いいねボタンの下にあるユニコーンの意味は謎ですが:sweat_smile:）
海外のエンジニアがどのようなことを考えているか学べたり、様々な技術の話題があり、英語学習をしているエンジニアにとっては技術も英語も学べて一石二鳥だと思います。
[dev.to](https://dev.to/)

技術はやはり海外の方が早いので海外の方の発信には特に注目したいですよね。
英語も技術も同時に学んで素敵なエンジニアライフを送りましょう！！


P.S.
最近writingの勉強も兼ねてDEVで初めて投稿しました！
こちらもよろしければご覧ください！
[Let's graduate GUI and Live in Terminal!!](https://dev.to/gangelion/let-s-graduate-gui-and-live-in-terminal-4jie)

普段Qiitaで記事を書いている方は英語での記事投稿にも挑戦してみてはいかがでしょうか？
新しい世界が開けるかもしれませんよ:grin:
【備忘録】ルータ(Cisco892J)でVLANの設定をやってみた

#ネットワーク構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536529/be718e9e-c9f9-baec-9e6f-6000445519d3.png)

2台のパソコンが、ルータを間に挟んだ状態でお互いに接続可能になるように設定していきます。
インターネットには接続しない、ローカル同士の疎通確認になります。

#準備したもの
・Cisco892J
・パソコン2台(Windows10とUbuntu)
　※2台あればOSは何でもいいです。
・LANケーブル2本
・USB to RS-232変換ケーブル
・コンソールケーブル

#ルータの設定
Cisco892を初期状態にして、以下のコマンドを入力し、設定しました。
一行ずつ、なにをやったのかを備忘のために記載します。

```cisco:config
Would you like to enter the initial configuration dialog? [yes/no]: no
Router>enable
Router#configure terminal
Router(config)#vlan 10
Router(config-vlan)#exit
Router(config)#interface vlan 10
Router(config-if)#ip address 192.168.1.2 255.255.255.0
Router(config-if)#ip address 192.168.1.3 255.255.255.0
Router(config-if)#no shutdown
Router(config-if)#exit
Router(config)#interface fastEthernet 0
Router(config-if)#switchport access vlan 10
Router(config-if)#exit
Router(config)#interface fastEthernet 1
Router(config-if)#switchport access vlan 10
Router(config-if)#exit
```

対話モードで設定を進めるか聞かれるのでnoと入力

```
Would you like to enter the initial configuration dialog? [yes/no]: no
```

起動直後は、ユーザーEXECモードになっているので、特権EXECモード(enableモード)に切り替える

```
Router>enable
```

さらにグローバルコンフィグレーションモードに切り替える

```
Router#configure terminal
```

VLAN 10を作成する
※数字は自由に決められる

```
Router(config)#vlan 10
```

VLANの作成により、VLANコンフィギュレーションモードに自動的に
切り替わっているため、グローバルコンフィグレーションモードに戻る。

```
Router(config-vlan)#exit
```
作成したVLAN10の設定をするためにインターフェイスコンフィギュレーションモードに
切り替える

```
Router(config)#interface vlan 10
```

VLAN10にパソコン2台それぞれのIPアドレスを設定する。
※IPアドレスを手動で設定して、以下のIPアドレスにしておく。
　通常は、IPアドレスを自動的に取得する設定になっている。

```
Router(config-if)#ip address 192.168.1.2 255.255.255.0
Router(config-if)#ip address 192.168.1.3 255.255.255.0
```

VALN10のインターフェイスを立ち上げる

```
Router(config-if)#no shutdown
```

グローバルコンフィグレーションモードに戻る

```
Router(config-if)#exit
```

物理インターフェイスにVLANを紐づける
今回は、FastEthernet0とFastEthernet1の2つを使用。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536529/67481847-88f0-dca2-2b13-bf163931d4f3.png)

```
Router(config)#interface fastEthernet 0
Router(config-if)#switchport access vlan 10
Router(config-if)#exit
Router(config)#interface fastEthernet 1
Router(config-if)#switchport access vlan 10
Router(config-if)#exit
```

#疎通確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536529/d4a7a593-9065-359f-e756-4b441776bb34.png)
パソコンAからパソコンBに接続可能か、pingコマンドにて試したところ、
無事、疎通がとれていることを確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536529/fb27eed4-a4f5-892e-9dbe-3e91eea24484.png)

#おわりに
初歩の初歩の設定ですが、ネットワーク初心者の私にとっては、
ciscoの基本コマンド、モードの切り替え、IPアドレスの具体的なイメージなどが
身に付く良い機会となりました。
無理に難しい設定をこなそうとせず、簡単なものから地道に練習していきたいと思います。
Rails Webサーバーとアプリケーションサーバー

#はじめに
普段何気なく使っていたコマンド「rails s」。このコマンドにより、何がどう動いていたのか改めて認識したので、書き記します。

**補足**
rails sはローカルサーバーを立ち上げるコマンドです。

#目次
1.Webサーバーとアプリケーションサーバー
2.ローカル環境
3.本番環境

#1.Webサーバーとアプリケーションサーバー
処理の負荷を分散する(高速処理)ため、サーバーは機能ごとに分業されている。

**Webサーバー**
クライアントサイドからのリクエストを全て受ける。リクエストの内容が静的(HTMLやCSS)な場合、Webサーバーがブラウザ(クライアント)へレスポンスを返す。リクエストの内容が動的(データベースから情報を検索する等)な場合、アプリケーションサーバーへリクエストを渡す。

**アプリケーションサーバー**
Webサーバーから渡されたリクエストを受け取り、対応するコントローラーのアクションを実行する。その後、処理結果をWebサーバーに返す。

#2.ローカル環境
ターミナルでrails s と入力するとサーバーが立ち上がる。そのときターミナルにはpumaが表示されている。これはRails用のアプリケーションサーバーであり、Webサーバーとの分業化されていない。

```bash:ターミナル
=> Booting Puma
=> Rails 6.0.3.4 application starting in development 
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 3.12.6 (ruby 2.6.5-p114), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop
```

#3.本番環境
本番環境において、Webサーバーとアプリケーションサーバーを分業化する。理由は先述した通り、アクセスが集中する等のサーバー負荷対策のためである。Nginx(Webサーバー)やUnicorn(アプリケーションサーバー)等を組み合わせ、本番環境を構築する。

参考ページ
[なぜrailsの本番環境ではUnicorn,Nginxを使うのか? 　~ Rack,Unicorn,Nginxの連携について ~【Ruby On Railsでwebサービス運営】](https://qiita.com/takahiro1127/items/fcb81753eaf381b4b33c)

以上
VS2019 VC++ ATLでCOM DLLを作ってみた

#はじめに
[Visual Studio 2017 Visual C++ による ATL の基本]
(https://qiita.com/tadnakam/items/7ce3dc76ba66892231d8)
を参考にさせて頂きました。圧倒的感謝……！
COM DLLはActiveXコントロール（旧 OLEコントロール）とも言うようだ。

#環境
実行環境：Windows 10 Home (64bit)
開発環境：Visual Studio Community 2019
C++ によるデスクトップ開発
最新の v142 ビルド ツール用 C++ ATL (x86 および x64)
オプションにチェックが入っていること。

#プロジェクトの作成
プロジェクト テンプレート：ATL プロジェクト [C++]
プロジェクト名：ATLProject1
[ATL プロジェクト]ダイアログはデフォルト。

ATLProject1PSというプロジェクトも作られるが今回はノータッチ。

#クラスの追加
ソリューション エクスプローラーの ATLProject1 に新しい項目を追加する。
種類：Visual C++/ATL/ATL シンプル オブジェクト
名前：ATLSimpleObject

[ATL シンプル オブジェクト]ダイアログ
ProgID：Simple.Obj
その他はデフォルト。

#メソッドの追加
メニューから表示→クラス ビューを選択する。
クラス ビュー
ATLProject1/IATLSimpleObject にメソッドを追加する。

[IDL メソッドの追加]ダイアログ
メソッド名：Hello
パラメーター
[in] BSTR msg

#メソッドの実装
クラス ビュー
CATLSimpleObject を選択すると下の枠に Hello(BSTR msg) が表示されるのでダブルクリック。

```ATLSimpleObject.cpp
STDMETHODIMP CATLSimpleObject::Hello(BSTR msg)
{
	MessageBox(nullptr, msg, L"ATLSimpleObject", MB_OK);
	return S_OK;
}
```

#ビルド
ソリューション構成：Release
ソリューション プラットフォーム：x64
ソリューションのビルド。

識別子 "CLSID_ATLSimpleObject" が定義されていません
というエラーが出るようならソリューションの再スキャン。

管理者権限の PowerShell やコマンド プロンプトでレジストリに登録する。
`regsvr32 "C:\Projects\vc++\ATLProject1\x64\Release\ATLProject1.dll"`

`regsvr32 "C:\Projects\vc++\ATLProject1\x64\Release\ATLProject1.dll" /u`
で登録解除。

#テストプログラム

##JScript
```hello.js
var simple = new ActiveXObject("Simple.Obj");
simple.Hello("hello, JScript");
```
というファイルを用意しダブルクリックする。
クラスの追加で指定した ProgID を指定。

##C＃
プロジェクトに参照を追加する。
[参照マネージャー]ダイアログ
COM/ATLProject1Lib をチェックする。

ソリューション プラットフォーム：x64

```Form1.cs
        private void button1_Click(object sender, EventArgs e)
        {
            var simpleObject = new ATLProject1Lib.ATLSimpleObject();
            simpleObject.Hello("hello, C#");
        }
```
SQL 月別で月初10日だけの集計方法

#はじめに
SQLで月別月初10日間だけのデータだけを抽出する方法について書きます。
月別だけなら参考記事がたくさんあるのですが、月初10日間だけの抽出方法についての記事が見つからなかったので、自分用のメモも含め共有します。

#データ
以下のデータを例にします



| user_id | visited_date | 
|:-----------|------------:|
| 1       | 2020-10-03 11:43        | 
| 2     | 2020-11-02 11:49      | 
| 2       | 2020-11-03 17:22        | 
| 3         | 2020-11-09 15:21          |
| 3       | 2020-11-11 09:32      |
| 3    | 2020-11-20 20:30     | 

取り出したいデータが各月の月初10日までのデータなので以下が取り出したいデータで抽出できればOKです

| user_id | visited_date | 
|:-----------|------------:|
|1|2020-10-03 11:43|
| 2     | 2020-11-02 11:49      | 
| 2       | 2020-11-03 17:22        | 
| 3         | 2020-11-09 15:21          |


#抽出方法
実際のコードがこちらです

```sql:
SELECT *
FROM visit_log
WHERE to_char(visited_date, 'YYYY-MM-DD') <= concat(to_char(visited_date, 'YYYY-MM'), '-10')
and to_char(visited_date, 'YYYY-MM-DD') >= concat(to_char(visited_date, 'YYYY-MM'), '-00')
```

#解説
2020年10月といったような特定の月だけの月初１０日間のデータ抽出なら

```sql:
SELECT * 
FROM visit_log
WHERE visited_log <= '2020-10-00 00:00:00'
and visited_log >= '2020-10-10 00:00:00'
```
で十分ですが、何ヶ月にも渡ってデータを抽出したいならWHERE文を一般化しなくてはいけません。

まずはto_charでDATETIME型からDATE型に変換します。
比較の部分では、'YYYY-MM-00' <= 'YYYY-MM-10'　の範囲で月初１０日間だけで条件付けしたいのでconcat関数でくっつけます。

すると一般化したWHERE文ができます。
月初7日間だけにしたいならconcat関数の部分をconcat(to_char(visited_date, 'YYYY-MM'), '-07')
に変更するだけでOKです。



#追記

```sql 

SELECT *
FROM visit_log
WHERE EXTRACT(days from visited_date) <= 10 

```
こちらのコードで十分でした。ご指摘していただいた@youmil_rainさんありがとうございます。
AWS12ヵ月無料利用期間終了後の高額予想額表示（2020年11月）

私がAWSアカウントを作成してから1年が経過しました。
AWSには[無料利用枠](https://aws.amazon.com/jp/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc)があります。その中でも「[12ヵ月無料利用枠](https://aws.amazon.com/jp/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=tier%2312monthsfree)」というものがあり、これを経過したあとに課金された悲劇の記事は幾度となく目にしてきました。

例えば以下のようなEC2サービスやS3サービスがそれにあたります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561572/3d9ae5ea-f49d-3639-42e8-7c7a0b52a0a3.png)

私は先人の失敗を糧として、10月中に不要なリソースはすべて削除しておきました。


#恐怖体験
そして、迎えた無料期間終了後の11月。
私はログインして「請求情報とコスト管理ダッシュボード」で状況を確認してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561572/7fb82d20-52aa-b167-df3f-a6fd1e4ea44f.png)

えっ、
<H1>『＄ 438.71』（1ドル110円換算で48,258円）</H1>

…
…
…
…
![pose_koshi_nukeru_kowai_man.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561572/4206fb56-38c2-7975-3715-09b9eed6c317.png)
11月の「予想」額が5万円近くになっていたのです・・・・
久々に焦りました。
不要なAWSサービスはすべて消したはずなのに、何故予想額がこんな金額に！！！
まだ消し忘れているサービスがあるのでは？？？

かなり焦って色々と調べました。

#結論
原因は「WorkSpaces」と「[請求情報とコスト管理ダッシュボード](https://docs.aws.amazon.com/ja_jp/awsaccountbilling/latest/aboutv2/billing-what-is.html)」の「予想」機能の仕様でした。

私は「WorkSpaces」を検証中のため残していたのですが、「WorkSpaces」は月額固定利用なので月頭に月額$28が課金されています。どうやら「請求情報とコスト管理ダッシュボードの「予想」機能は月額のサービスかどうかは関係なく、その期間の利用料で11月中使用し続けた場合の金額を単純に算出しているだけのようなのです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561572/b018ad18-422e-c8a6-c552-d2aea189bbfb.png)

当初の予想は11月3日時点のものでしたが、11月14日時点では『＄ 56.73』（1ドル110円換算で6,240.3円）まで落ちていました。日夜予想額は下がっていっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561572/d4934177-f38e-6bea-635d-e311fb3cb1cb.png)

AWSの「予想」機能は月額固定利用サービスとか関係なしの様です。
![pose_anshin_man.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561572/1cb757bc-b1de-f4bf-5481-95623f729a66.png)

とにかく、かなり驚かされました。
同じ失敗をしない為にも、ここに記録を残しておきます。
無料利用枠が終了する方は、私と同じ点で驚かないようにご注意ください。
プログラミングにおけるスニペットとは

プログラミングをやるために必須のツールの一つにテキストエディタがあります。

コーディングしやすいようにテキストエディタのおすすめプラグインやショートカットなど検索していると、「スニペット」という聞き慣れない単語をよく目にします。

今回はこの「スニペット」について、プログラミング初心者であるぼくが調べてまとめてみました。

あくまで初心者が調べたことなので、中級者以上の方からみると間違った認識かもしれませんが、お気づきの方はご指摘いただけると嬉しいです。

## 結論：プログラミング版の辞書登録機能

PCを頻繁に使う人であれば単語の辞書登録機能って使ったことありますよね？

「あ」と打ったら「ありがとうございました。」と出るように事前に登録しておけば、

「あ」と打ってtabキーを押せば「ありがとうございました。」と出せるやつです。

スニペットは、この辞書登録機能のプログラミング版です。

スニペット（snippet）は「断片」という意味で、プログラミングではソースコードやテキストの一部を指すそうです。

下記は、RubyのフレームワークであるRuby on Railsで使うテンプレートエンジン「html.erb」で使用するスニペットを登録したものです。

```erb.json
{
	"embedded Ruby": {
		"prefix": "erb",
		"body": [
				"<% $1 %>"
		]
	}
}
```
|コード内の言葉|意味|
|:-:|:-:|
|embedded Ruby|スニペットのタイトル|
|prefix|短縮語|
|body|短縮語を入力してtabキーを押すと変換されるコード|

こんな感じで登録しておくと、余計なキー入力を減らせて、ミスも減り、コーディングの時短になるので、積極的にスニペットを増やしていきたいですね！

## おまけ：Visual Studio Codeでスニペットを登録する方法
現在ぼくが使用しているテキストエディタ「Visual Studio Code」で、上記のhtml.erbのスニペットを登録する方法をお伝えします。

ちなみにPC環境はMacです。

1.Visual Studio Codeを開き、左上の「Code」→「基本設定」→「ユーザースニペット」の順にクリック。
![スクリーンショット 2020-11-14 16.41.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849306/2d33585d-6225-06b5-1798-3f5a466ec6e1.png)

２.「erb」をクリック。
![スクリーンショット 2020-11-14 17.26.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849306/0f209cfc-14f8-9994-c623-587a612395c1.png)

このようにerb.jsonが開けました。
![スクリーンショット 2020-11-14 17.26.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849306/af809977-5fd7-daef-cad7-284d1d2eab08.png)
上記のようにスニペット登録すれば、短縮語を入力するだけで長いコードなども簡単に入力することができます。

## 参考資料
[VSCodeにコードスニペットを登録して効率的にコーディング！](https://haniwaman.com/vscode-snipet/#:~:text=VSCode%E3%81%A7%E3%81%AF%E5%90%84%E6%8B%A1%E5%BC%B5%E5%AD%90,%E3%81%84%E3%81%8F%E3%81%A4%E3%81%8B%E3%81%82%E3%82%8B%E3%81%AF%E3%81%9A%E3%81%A7%E3%81%99%E3%80%82)
Railsで非同期通信で実装する投稿機能

##はじめに
今回は非同期通信による投稿機能を実装していきます。
今回は非同期処理を行う事にフォーカスを当てるためすでに画面遷移ありの投稿機能が実装されている状態からのスタートとなります。
jsの理解のため、素のjsでの記述となります。
また初学者のため間違え等ありましたらご指摘頂けると幸いです。

##手順１ remote: tureを追加
入力フォームにremote: tureを追記しましょう！

```
<%# タスク入力フォーム %>
<div class="task-contents">
    <%= form_with model: @category, id: 'new_tasks', class: 'new_tasks' do |f| %>
     <div class="task-field">
       <%= f.text_field :task %>
     </div>
     <div class="task-actions">
       <%= f.submit "+" %>
     </div>
    <% end %>
</div>

```

ここでどこにremote:tureがあるんだ？と思う方もいると思うのですがform_withを使うとデフォルトでajax通信を行う仕様になっているのでform_withを使う場合は特に記述は不要です。逆にajax通信にしない場合はlocal: trueにすると通常のリクエストになります。
form_forを使う方はremote: trueオプションを忘れずに追記してください。
心配な方は開発ツールなどで確認するとdata-remote="true"となっているはずなので確認してみると良いと思います。

## 手順２ コントローラーの記述

```ruby
def create
      @category = Category.new(category_params)
      @category.save
      @categories = current_user.categories.all
end
```

一般的な保存機能を行う記述ですが@categories = current_user.categories.allの記述はこの後のjsに渡す情報として必要なので記述しています。


## 手順３　create.js.erbにJavaScriptの記述をする
remote: trueにより返却される内容がHTMLではなくアクション名.js.erbファイルが読み込まれるようになっているのでcreate.js.erbファイルを作成します

```
(function(){
  document.querySelector(".task-lists").innerHTML =  '<%= j(render 'categories/index', categories: @categories) %>'
  document.querySelector("#category_task").value = ''
})();
```
.innerHTMLでHTMLの中身を書き換えています。

'<%= j(render 'categories/index', categories: @categories) %>'
ここで@categoriesを渡すために手順2で定義しています。
document.querySelector("#category_task").value = ''
この記述により入力入力フォームを空にしています。

## 最後に
以上で非同期での投稿機能が完成です！
重要なのはajax通信のデータの流れを理解できればそれぞれの処理はシンプルなので理解しやすいかなと思います。
初学者のためもっと良い記述があればご教授頂けると幸いです。

非同期削除などの記事もよければどうぞ〜
https://qiita.com/shantianchengyilang316/items/10ab2d84f6cfcfd29def
[Android]Material Designを導入したときに初めにつまづいたこと

AndroidにMaterial Designを導入したときに、何度もつまづいたので、メモ。

## 初めての導入

build.gradleに以下を記載します。

```
    implementation 'com.google.android.material:material:1.3.0-alpha03'
```

Gradle Syncした後にMaterial Buttonを使ってみます。

```
<com.google.android.material.button.MaterialButton
  style="@style/Widget.MaterialComponents.Button"
  ...
  />
```

## 実行、そしてクラッシュ

このボタンがあるActivityを起動すると、以下のエラーで落ちました。

```
Error inflating class com.google.android.material.button.MaterialButton
```

## 解決方法

`res/values/styles.xml` をMaterial Design用に変えないといけない。

```
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
```

↓

```
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
```

## 参考

https://qiita.com/susu_susu__/items/67f86582188ff28ad910
https://material.io/develop/android/docs/getting-started
【Python】pythonで簡単に機械学習入門(SVM)

# はじめに
機械学習に関する入門サイト見ていると、難しいことが書いてあったりして、知識０の人がとっつきにくい印象があります。
まあテーマとして確かに難しいのでしょうがないですが....
「数学や機械学習の知識が0でも、pythonの知識さえあれば誰でも実装できる」というのを目標に記事を書いていきたいと思います。
今回の記事では難しいことは説明せず、とりあえず機械学習というものに触れてみるというスタンスで、進めていきます。
# 対象者
・pythonがある程度わかる
・機械学習に興味があるけど、何も知らない
・大学の授業で概要は学んだけど、実際にどう実装すればいいかわからない
# 環境
python 3.8.5
scikit-learn  0.231
# まずはインストール

```
pip install scikit-learn
```

csvファイルの読み込みにnumpyを使うのでインストール済みでない方はインストールしてください。

```
pip install numpy
```

# 用語解説
### scikit-learnとは
scikit-learn （サイキット・ラーン）(旧称：scikits.learn) はPythonのオープンソース機械学習ライブラリ[2]である。サポートベクターマシン、ランダムフォレスト、Gradient Boosting（英語版）、k近傍法、DBSCANなどを含む様々な分類、回帰、クラスタリングアルゴリズムを備えており、Pythonの数値計算ライブラリのNumPyとSciPyとやり取りするよう設計されている。(wikipediaより）

うん、まあこれを見ても意味がわからないと思うので、今回は簡単に、「**機械学習をサポートしてくれるライブラリ**」と覚えておきましょう。

### SVMとは
サポートベクターマシン（英: support vector machine, SVM）は、教師あり学習を用いるパターン認識モデルの一つである。分類や回帰へ適用できる。
サポートベクターマシンは、現在知られている手法の中でも認識性能が優れた学習モデルの一つである。サポートベクターマシンが優れた認識性能を発揮することができる理由は、未学習データに対して高い識別性能を得るための工夫があるためである。（wikipediaより）

簡単に言うと、下記の画像のように**線を引いて、データを分類していく機械学習手法***のことです。
一口に機械学習といっても様々な方法が存在します。
SVM(サポートベクターマシン)はその一つです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/842766/fe59a11c-af1b-d40c-21f0-a6c39d6b4f03.png)
https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Kernel_Machine.svg/2880px-Kernel_Machine.svg.png
(wikipediaより)

### 目的変数とは
機械学習で予測したい対象です。
例えば、天気を予測したいときの目的変数は晴れや、曇りや雨などになります。

### 説明変数とは
予測するために必要な情報のことです。
例えば、天気を予測したいときに必要な、降水量や湿度などがこれにあたります。

# データ
データは基本的には数が多いほど精度が高くなりますが、今回はお試しなので、少なめのデータを用意します。
このデータは今年の天気のデータです。
まあ天気データは気象庁のHPにいくらでもあるので、興味が湧いたら見てみてください。
左から、
**気温**、**降水量**、**日照時間**、**湿度**、**天気(0:晴れ、1:曇り、2:雨)**
を表しています。
このデータで言うと、**気温**、**降水量**、**日照時間**、**湿度**までが説明変数、**天気(0:晴れ、1:曇り、2:雨)** が目的変数です。


```data.csv
6.6,0,8.2,47,0
7.1,0,5.7,57,1
7.1,0,9.3,62,0
8.1,0,4.7,53,1
6.5,0,9.7,54,0
8,0,8.1,42,1
6.6,1.5,0.5,68,2
5.7,21.5,2.7,94,2
11.2,0,9.3,47,0
9,0,7.9,57,1
8,0,4.5,66,1
7.7,0,1.8,66,2
9.1,0,9.3,70,0
9.1,0,8.3,70,0
7.8,11.5,3.6,79,2
7.6,0,4.4,46,1
7.6,0,3.6,58,1
3.8,13.5,0,87,2
7.3,0,8,62,1
8.3,0,9.7,60,0
```

# ソースコード
weatherを自分の好きな値に変えることで、その条件の時の天気を予測することができます。（ただ、データ数が少ないので、精度は悪いです）
weatherの中でも左から順に
**気温**、**降水量**、**日照時間**、**湿度**
で並んでいるので、この順に条件を入れてみてください。


```weather_learn.py
import numpy as np
from sklearn import svm

# csvファイルの読み込み
npArray = np.loadtxt("data.csv", delimiter = ",", dtype = "float")

# 説明変数の格納
x = npArray[:, 0:4]

# 目的変数の格納
y = npArray[:, 4:5].ravel()

# 学習手法にSVMを選択
model = svm.SVC()

# 学習
model.fit(x,y)

# 評価データ(ここは自分で好きな値を入力)
weather = [[9,0,7.9,6.5]] 

# predict関数で、評価データの天気を予測
ans = model.predict(weather)

if ans == 0:
    print("晴れです")
elif ans == 1:
    print("曇りです")
elif ans == 2:
    print("雨です")


```

# 実行結果
```
$ python3 weather_learn.py 
晴れです
```

# おわりに
今回もお疲れ様でした。
実際に自分が作ったものがこうして結果を吐いてくれるのは嬉しいものがありますよね。
自分が機械学習に初めて触れたときはあまりの情報量の多さに行き詰まったことが何度もありました。
この記事では、「知識はないけど、機械学習に触れてみたい」という方に向けてわかりやすく書いたつもりですが、疑問点やミスがありましたらコメントください。
SQLについて

<h1>SQLとは</h1>

SQL(Structured Query Language)はデータベース言語と言われるもので
データベースへの指示を伝えるもの。

※データベースとは情報が整理された集まりのことで、代表的なデータベースとしては
Oracle、MySQL、FileMaker、PostgreSQLなどがあります。


<h2>SQLにおけるtableについて</h2>

以下の表のことをテーブル(table)といい、縦方向をカラム(column)、横方向を行(row)と読んでいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794525/3c96edda-e09d-c2d5-a9ae-018227e1f20e.png)

	
			
例えばですが、nameがSuzukiとなっているところに関してはidが１、emailがsuzuki@sample.com、Genderがmaleということになります。


表１のようなテーブルを作成するためには


<b>CREATE TABLE users(
  id int,
  name varchar,
  email varchar,
  gender varchar
);

というSQL文を書く必要があります。


※VARCHARという単語が出てきていますが、データ桁数が変動する可能性のあるものはVARCHAR、変動しないものはCHAR型というデータ型になります。


上のSQL文でテーブルを作成したあとは実際にテーブルに
id、name、email、genderの情報を入れていくためにはINSERTで以下の通り記述します。

<b>INSERT
  INTO テーブル名
  VALUES 
    (1, 'Suzuki',  'suzuki@sample.com', 'male'),
    (2, 'Tanaka',  'tanaka@sample.com', 'female'),
    (3, 'Sasaki',  'sasaki@sample.com', 'male'),
    (4, 'Sato',  'sato@sample.com', 'female'),
    (5, 'Ito', 'sato@sample.com', 'male');</b>


INSERTはテーブルにデータを追加する際に使用します。
INTOの後がデータを追加するテーブル名になります。





<h2>テーブルの中から特定の条件のデータのみ取得する方法</h2>

特定の条件にはてはまるデータだけを抽出する際はWHEREを使います(構文は以下の通り)

SELECT フィールド名(フィールド名とはエクセルでいうセルに該当します)
FROM テーブル名 
WHERE 条件式



![表１ mysql.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794525/b2f7dfe1-e31b-df21-6768-1685c6f2b585.png)


例えば、今回の表でgender(性別)が男性だけのものを抽出したい場合には

SELECT * 
FROM users
WHERE gender ==  'male';


とWHEREの後に抽出の条件を記載します。


<h2>テーブルにデータを追加する方法</h2>


表１に対して、６行目のKatoさんを追加する場合には
INSERT INTO users VALUES(6, 'Kato', 'kato@sample.com', 'female');と記述します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794525/91ebc778-05d3-5613-c8d0-52cca527077f.png)


ここでもINSERTでデータを挿入します(INTOの後にテーブル名)


<h2>テーブルのデータを更新する方法</h2>


既存のテーブルの内容を更新する場合以下の通り、記述します。

UPDATE users SET name = 'Yamada'  WHERE id = 1;

今はID 1の名前はSuzukiになっていますが、Yamadaに変更できます。


![表１ mysql.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794525/d88d8683-e8de-1d70-6d96-d6a8430b7a26.png)



<h2>テーブルのデータを削除する方法</h2>

既存のテーブルの内容を削除する場合は以下の通り、記述します。

例えば、genderがmaleになっているrow(列)を削除したい場合、

DELETE FROM users WHERE gender == 'male';と記述します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794525/d193599f-b324-cb34-9695-37963cf25f71.png)


削除後は以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794525/14158f75-ab15-e253-1155-a9aba6f833e9.png)


<h2>テーブルのデータを昇順又は降順に並びかえる方法</h2>

順番の並びかえに関しては、ORDER BYを使います。
昇順の場合はASC、降順はDESCを使います。

idでの降順の場合は
SELECT * FROM users ORDER BY id DESC;と記述します(昇順はASC)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794525/0124549a-2471-ecf4-82c1-ec74ad0dbda3.png)


※ASCはascending order、DESCはdescending orderのことです。


<h2>まとめ</h2>


今回はSQLの基本的な構文を説明しました。今回紹介した以外にも色々な構文がありますので徐々に使い方に慣れていきましょう。

SQLを実際に記述して、練習などをする場合、repl.itがオススメですので使用してみてください。

リンク先:https://repl.it/

SQLはサーバーサイドを目指す人にとっては、必須の内容なので実際に現場に入る前に必ず基礎知識をつけておきましょう！
Homebrewのインストール時にエラー


macOS Big Sur
(2020/11/14にアップデート)

##Homebrewのインストール　エラー

エラーになる前に３回程パスワードの入力を間違えました。
恐らく、caps lockを押したまま入力していたのが原因です。

以下、エラー内容です。
![スクリーンショット 2020-11-14 16.45.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474793/ab1fc793-dbda-8101-d7b2-dc142c5619b9.png)

再度、インストールし直してみるとこのように成功いたしました！
==> Installation successful!
![スクリーンショット 2020-11-14 16.50.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474793/56790357-3ca6-cc00-34a0-1ebc0a51327e.png)


## 余談
ターミナルを動かそうと思った時に、色々な記事をみて、＄をつければターミナルは動くんだなと勘違いして、＄をつけて入力してしまい反応がなく焦ってしまいました。

最低限の操作も、よく分からずに触るのは良くないなと勉強になりました。笑
何かアドバイスなどあればよろしくお願いいたしますっ！
Javascript基礎知識＃1

##はじめに
この記事は私の脱コピペを目指すために書いている自分用のメモです。

※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。




##目次
・前提知識
・Javascriptとは
・実際にできること
・用意するツール
・記述方法（二種類）






##前提知識
HTML および CSS の基本的な理解。

##Javascriptとは
・ブラウザで実行され、ブラウザを操作できる。
・HTMLやCSSでは作れない動的なサイトを作ることができえる。
・HTMLやCSSをリアルタイムで書き換えることができる。


####実際にできること

例）・写真スライドさせるスライダー
　　・入力欄のエラー表示
　　・テキストの書き換え


```javascript:main.js

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('名前を入力して下さい');
  para.textContent = 'Player 1: ' + name;
}
```
こんな感じのコード。理解できなくてよい。（MDN参照）

##用意するツール
・ブラウザ（chrome, firefox, IE, Safariなどなんでもオッケー（筆者はChrome））
・テキストエディタ（VScode, Atom　などなんでもオッケー（筆者はVScode））



##記述方法
JavaScriptの記述方法は、次の2種類ある。

・HTMLファイルに直接記述する
・専用の別のファイルにJavaScriptのみ記述する(main.jsなど)

```html:index.html
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script>
      let x = 1;
      console.log(x);
    </script>
  </body>
</html>
```

↑HTMLファイルにscriptタグを書いて記述する。

```html:index.html
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>
```
```javascript:main.js
let x = 1;
console.log(x);
```

↑HTMLファイルとは別のmain.jsファイルを作り、HTMLファイルでmain.jsを読み込む。
whereを用いたparamsの例

こちら完全に備忘録です。。。
見苦しいですが一度投稿させてください。
後で修正いたします。

#アソシエーション

```ruby:user.rb
has_many :hoges
has_many :hoge_events
```

```ruby:hoge.rb
belongs_to :user
has_many :hoge_events
```

```ruby:hoge_events.rb
belongs_to :user
belongs_to :hoge
```

#ビュー
画面（ビュー）には以下の様なリンクがある。

①hoge_event
②hoge_event
③hoge_event
④hoge_event

例えば、現在操作中のユーザーが③のイベント詳細をクリックすると、③に関する情報全てが表示される様に。
①のイベント詳細をクリックすれば、①に関する情報全てが表示される様にしたい。（paramsもしっかり渡されていることとする）

#コントローラー

```ruby
  def show
    @hoge_events = current_user.hoge_events.where(hoge_id: params[:hoge_id])
  end
```

イベントごとの詳細を画面に表示できた。
Accessに接続時のワイルドカード対応｜Power Query

現段階で分かっていることを投稿しておきます。
##ワイルドカード周りの仕様
Power QueryからAccessに接続する場合、下記のような仕様となっているようです。

- Power QueryからAccessにSQLコードを投げる場合、ワイルドカードにはAccess既定の`*`ではなく`%`を使わないといけない。
- Accessでワイルドカードを含むクエリを作ってPower Queryに読ませる場合、Accessクエリには`ALike`と`%`を使わなければならない。

なお、Accessの「SQLサーバ互換構文」はOFFのままテストしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/0104cd7e-07a3-42be-14ca-55ae07e1127d.png)

##実例
###例1：AccessにSQLを投げる場合
このサンプルテーブルを題材に試してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/b7fbfc72-eb18-a860-0fbe-babd9a2c6bc4.png)


普通にAccess記法で書くと、取れない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/565b1911-4c03-cedc-3a86-8acd35eb0397.png)


ワイルドカード記号を`%`とすると、取ってこれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/be3367a1-71dc-0fa5-82c2-ccc780c3f289.png)

###例2：Accessクエリを読みに行く場合
こんなAccessクエリを3種類作ってみます。クエリ名は画像の通りです。
↓普通のクエリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/39de5172-e44c-65a8-5c75-02dcbdb9adfe.png)
↓`ALike`と`%`を使ったクエリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/e2d4b8f7-0760-84ca-8705-a73b040494c0.png)
↓ワイルドカードだけ`%`にしたクエリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/80615d93-1a67-2aa1-9083-6a13a4c45bcb.png)

で、これをPower Queryで読んだ結果が下記の通りです。`ALike`と`%`を使えば、AccessもPower Queryも動くわけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/db72a0f0-cf1b-2b99-c031-cc955d6d7f39.png)
##参考
・Power Queryの[Value.NativeQuery関数](https://docs.microsoft.com/ja-jp/powerquery-m/value-nativequery)は、Accessに接続して得られる下記のようなテーブルを`target`引数とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370992/9c3b492b-797b-fc7a-7772-00bccdd77d76.png)
・ALikeについては下記の記事が参考になります。
　[Using the Right Wildcard Characters in SQL Statements | Microsoft Docs](https://docs.microsoft.com/en-us/previous-versions/office/developer/office-xp/aa140104(v=office.10)?redirectedfrom=MSDN)

##テストした環境
Microsoft365のAccess、Excel（バージョン2011、64bit）
Power Query　2.87.224.0（64bit）
Kotlin: 配列の直積を返すSequenceを作ってみた

「[JavaScript: 配列の直積を返すジェネレータを作ってみた](https://qiita.com/ttatsf/items/73f32125bb25e573e4ab)」に倣い、
[順列組み合わせ](https://qiita.com/sdkei/items/1fecaebeeff3e39f8299)の次には直積をやってみる。
こちらは元記事とは異なるアルゴリズム。

```Kotlin

/** 直積（可変長引数版） */
fun <T> product(vararg optionsArray: List<T>): Sequence<List<T>> {
    if (optionsArray.isEmpty()) {
        return emptySequence()
    }

    return productInternal(optionsArray.asList())
}

/** 直積（リスト版） */
fun <T> List<List<T>>.product(): Sequence<List<T>> {
    if (isEmpty()) {
        return emptySequence()
    }

    return productInternal(this)
}

private fun <T> productInternal(optionsList: List<List<T>>): Sequence<List<T>> {
    if (optionsList.isEmpty()) {
        return sequenceOf(emptyList())
    }

    return sequence {
        optionsList.first().forEach { first ->
            productInternal(optionsList.drop(1)).forEach {
                yield(listOf(first) + it)
            }
        }
    }
}
```

使用例：

```Kotlin
fun main() {
    product(listOf(0, 1), listOf(2, 3), listOf(4, 5))
        .also { println(it.toList()) }
    // > [[0, 2, 4], [0, 2, 5], [0, 3, 4], [0, 3, 5], [1, 2, 4], [1, 2, 5], [1, 3, 4], [1, 3, 5]]
}
```

／以上
【Kinesis】Kinesis とは

## Kinesisとは
外部システムから送られてくる大量のストリーミングデータをリアルタイムで収集・処理・分析することが出来るマネージドサービス

- データの暗号化には AWS KMS マスターキーを使用

### ユースケース
- IoT用の大量の端末やセンサー装置から送られてくるデータの処理
- 大量のユーザーが同時にアクセスしているWebサービスやゲームの情報分析
- 大規模なサーバーで運用しているログやメトリクスの収集・解析

## Kinesis Data Streams
送信側から大量に送られてくるデータをストリーム内に保持し、そのデータを受信側がストリームから取得することで後続処理を可能にするサービス
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/edcbb915-ab39-33c1-2264-1c324e19330f.png">

- データの種類や処理の用途に応じて予めストリームを作成する
- ストリームは1つ以上の **シャード** で構成される
- データの保存期間はデフォルトで **24時間**、最長 **7日間**
　<br>→ データを長期保存するような処理には向いていない

**データレコード**：Kinesis Data Streamsに保存されたデータの単位
**シャード**：ストリーム内の一意に識別されたデータレコードのシーケンス

## Kinesis Data Firehose
ストリームデータをS3、RedShift、Elasticsearch Serviceなどに直接配信するサービス
Lambdaと連携することでETLとしても機能する

**ETL**：抽出（Extract）、変換（Transform）、書き出し（Load）に由来し、雑種多様な情報（Data Source）をDWHにまとめる処理のこと

## Kinesis Data Analytics
既存の標準的なSQLクエリを利用してストリームデータをリアルタイムで分析出来るサービス

- ストリーム上のデータに直接SQLを発行し、分析することが可能
セキュリティ超初心者だけどCTFやってみたい

#はじめに
CTF、1年前くらいから気になっていたけど全然手を出せていなかった。
不正アクセスのニュースがあると情報セキュリティ界隈の人たちがガヤガヤしているのを見て楽しそうだな、と思ったり。※不謹慎ですみません
単純にハッキングってかっこいいじゃんと言う憧れもあり。
最近少し時間や心身に余裕が出てきたので、まずCTFの概要や何をすれば良いかをまとめる。やってやるぞ！

#CTFとは何か
「Capture The Flag」の略で「旗取りゲーム」の事。
情報セキュリティでのCTFとは、クイズ形式でセキュリティスキルを用いて隠された答え＝旗を探し出していく技術競技。
大会はいくつもあって界隈の学生・社会人が参加している。
参加すると順位や点数が付けられる。
いつでも挑戦できる常設タイプと日時を決められたイベントタイプがある。

#初見、まず初心者には敷居が高い！
一番有名なCTFと言えば「Security Contest（SECCON）」。
試しにSECCON参加者のwriteupをいくつか見てみたところ。
**全く何も分からない(´Oﾉ`o)**
全部呪文か異国の言葉に見える。
でもみんなすごく楽しそう。
闇雲に参加しても確実に挫折すると思ったので超超超初心者向けの入門情報を探した。
※ちなみに私のセキュリティ知識レベルは基本情報技術者どまり。
「クロスサイトスクリプティング」→分かる
「ブルートフォース攻撃」→分かる
「パケットフィルタリング」→……イメージはでき…る…
「ではこのテストサーバに侵入してみてください」→？？？何をしたら？？？？
と言う感じです。

#超超超✖️1000初心者は何から始めたら良いのか
まず超初心者向けCTFにチャレンジしてみる。
常設タイプで練習を重ねてイベント参加を目標にしてみよう。
・cpawCTF（常設）
・ksnCTF（常設）→cpawCTFより難しいらしい
・SECCON BeginnersCTF（イベント）

登竜門的な本を読む
・通称ハリネズミ本（セキュリティコンテストチャレンジブック）
　https://www.amazon.co.jp/dp/B017X3D3GE/
　初心者おすすめ本らしいけどそれでも界隈外の人間が見ると意味不明らしい…ごくり
　その他ジャンルごとに色々あるみたいだけど頭もお金も追いつかないのでそっ閉じ。

#おわりに
「セキュリティ」と言うとどうも「防御する側」の立場で考えてしまい全然興味がそそられないけど、攻撃となると俄然と興味が湧いてくるので不思議〜。
闇のハッカー目指して頑張るぞ。
flexについて

flex:0(flex-grow) 0(flex-shrink) 320px(flex-basis=基本幅）;
flex-growを１にすると余白を埋める
flex-shrinkを0にすると幅が自動的に縮まらなくなる
flex-basisで設定した幅は完全固定ではなくほかの指定との兼ね合いでコンテンツに自動的に収まるように自動調整される
Unity オブジェクトの移動

## Unity オブジェクトの移動

オブジェクトを上方向に移動させる際の手順をメモ。
オブジェクトは取得できている事が前提。



オブジェクトを上方向に移動させる。

```c#:test
    void Update()
    {
        // オブジェクトのtransform情報を取得
        Transform objTransform= hogeObject.transform;
        // その中からposition情報を取得
        Vector3 pos = objTransform.position;
        // 上方向成分を加算
        pos.y += 0.001f;
        // 反映
        objTransform.position = pos;
    }
```