OmniAICreator/Qiita-1.07M huggingface dataset:
UnityとFirebaseを連携してログイン機能を実装しよう

#はじめに
Unityに触り始めてから２週間が経過しました。
C#が全くの分からんちんで苦戦中ですが、先日UnityとFirebaseを連携する機会がありましたので、こちらで共有させて頂きたいと思います。
今回はUnityのダウンロードとFirebaseの登録は済んでいる事を前提にこちらの記事を書きました。


##①Firebase上での下準備
・FirebaseでNewProjectを作成
・SDK（FirebaseのUnityプラグインみたいなイメージ）をPCへダウンロード


##②GitHubでサンプルをダウンロードしよう
・GitHubの[firebaseQuickstartUnity](https://github.com/firebase/quickstart-unity)からAuthのクローンを入手
・UnityHubを開いて「新しく加える」からAuth内のTest.Appを追加


##③Unity上での下準備
・ダウンロードしたファイルを開くと沢山エラーが出ているはずですが、上のタブバーのAsset→Import Packageの中からFirebaseAuth.unitypackageを読み込むとエラーが全て消えます。
・projectからMainSceneを探して、プレイモードを実施。下記の様な表示が出たらオッケーです！
<img width="898" alt="スクリーンショット 2019-06-29 13.25.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357734/183108c6-a578-a6ef-a503-7e3025c51d01.png">


##④UnityとFirebaseとの連携をする
・Unity内からEdit→ProjectSetting→Player 使いたいデバイスのロゴを選択　IOSの場合、identification内のBundle identificationボックス内の文字列をコピー（※好きな文字に変更可能です）
・firebaseへ移動後、TOP画面のUnityのロゴをクリック。regisuterのページで先ほどUnity内でコピーした文字列を入力
・設定ファイル（Google Service-Info.slist）をダウンロード
<img width="772" alt="スクリーンショット 2019-06-28 18.05.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357734/362b6795-c963-adb6-9df1-c8ef6c684bef.png">
・（①でSDKをもしダウンロードしていなかったら）こちらででダウンロード。この記事に沿って連携をしている方は不要です。

・設定ファイル（Google Service-Info.slist）をUnity内のAssetへ読み込み（中身はプロジェクトネームや先ほど入力したキーなどの情報が記述されている）


##⑤Firebaseへ戻ります
・Firebase内の右側のバーにて開発の項から「Authentication（認証）」をクリック
・ログイン方法をクリック
・メール/パスワード、匿名の項をそれぞれアクセス可能へ変更
※SNS認証も対応している様です。


##⑥ビルドをしてみよう
・IOSあるいはアンドロイドにてビルドをし、実際に入力した事項をFirebaseのAuthenticationで確認出来たら成功です！！


##⑦Unity内でのデザイン
ログインシーンを新しく作成し、必要に応じてテキストボックスやボタンを設定&編集することでログイン機能を実装することが出来ます。私は下記の様な形に加工してみました。
<img width="908" alt="スクリーンショット 2019-06-29 17.57.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357734/b6652b23-736c-59ab-56c4-3feea34e5b72.png">


##おわりに
プログラミングの勉強をはじめてようやく３ヶ月が経ちました。
毎日四苦八苦の連続ですが、最近はようやく面白さを感じる時間も増えました。Unityとても楽しい！😄
日々自己研鑽を重ねながら、新しい技術にも積極的に挑戦していきたいと思います！！
firebaseを使ったHP公開/更新方法

はじめまして！
初投稿のwelfare_seと申します！
皆さまフォローよろしくお願いいたします！

今回はfirebaseを使ったホームページの公開･更新方法をお伝えいたします。

こちらのやり方では静的コンテンツしか公開できませんが、超簡単にホームページを公開できるので備忘録として公開します。

1．firebaseの設定
・firebaseへログイン
・Firebase のコンソールに移動
公開するサイトを管理するためのプロジェクトを作成
プロジェクトは公開するサイト1つにつき、1つ必要
国は「日本」を選ぶ
ロケーションは「asia-northeast1」

2．PC内の設定
・プロジェクト用フォルダを作る
・公開したいサイトのフォルダを移動
移動したフォルダ名は必ず「public」とする！

3.Node.jsをインストールしていなかったらインストール
https://nodejs.org/ja/ 
・推奨版をインストール
・コマンドで「node -v」と打ち、インストールされているか確認
   コマンドで「npm -v」と打ち、npmがインストールされているか確認
    Windows PowerShellなら「clear」で画面をクリアにできる

4.Firebaseのコマンドラインツールの導入
・macOSの場合
「sudo npm install -g firebase-tools」
・Windowsの場合
「npm install -g firebase-tools」と打つ
・PCで設定したfirebaseログイン用のパスワードを入力
・「firebase -V」でバージョンを確認
・必要に応じて「npm i -g firebase-tools」でアップデート

5.firebaseへログイン
 ・firebase login 

6.プロジェクト用のフォルダをfirebase用に初期化
・フォルダのあるディレクトリまでコマンドで移動
・「firebase list」と打つ
・Project ID を選択してコピーして必ずメモしておく
・「firebase init --project= プロジェクトID」と打つ
・矢印キーとスペースキーを使ってhostingを色丸にする
・Enterを押す
・公開用のフォルダをどれにするか質問される(publicならそのままEnter)
・あとの設定はデフォルトで

7.サイトの公開
・プロジェクトフォルダに移動する
・コマンドで「firabase deploy」と打つ
・Hosting URLを必ずコピペしてメモする
・URLをchromeのはりつけてページがアップされていれば公開されている

8.サイトの更新
・更新したいファイルを編集
・ターミナル/WindowsPowerShellを起動
・プロジェクトフォルダまでコマンドで移動
・コマンドで「firebase deploy」を打つ
・デプロイの履歴からならロールバックもできる
#babylonjs で意図的にフレームレートを落とす

グラフィカルなデバッグを行う際、数フレームレベルの動作を検証する必要があったりします。

通常の `engine.runRenderLoop` だけでは [window.requestAnimationFrame](https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame) が呼ばれ、モニタのリフレッシュレートに最適化された速度で再生されてしまいます。

Unity では [Time.timeScale](https://docs.unity3d.com/ja/current/ScriptReference/Time-timeScale.html) を利用してスローモーションにすることが出来ますが、 babylon.js にそのような API は存在しません。

そこで、 v4 で実装された `engine.customAnimationFrameRequester: Nullable<ICustomAnimationFrameRequester>` を上書きすることで、フレームレートを落とすことが出来ます。

https://doc.babylonjs.com/api/interfaces/babylon.icustomanimationframerequester

```ts
interface ICustomAnimationFrameRequester {
  renderFunction?: Function;
  requestAnimationFrame: Function;
  requestID?: number;
}
```

これは元々は WebXR のために作られた API です。

WebVR では、 `window.requestAnimationFrame` の代わりに [VRDisplay.requestAnimationFrame](https://developer.mozilla.org/ja/docs/Web/API/VRDevice/requestAnimationFrame) を用いる必要があります。これは外部 HMD とメインモニタとでリフレッシュレートが異なる可能性があるため、アクティブになっている VRDisplay がある場合はそちらのリフレッシュレートを優先して処理します。

※今後置き換わる WebXR Spec では、 [XRSession.requestAnimationFrame](https://www.w3.org/TR/webxr/#xrsession) を利用することになる予定です。

今回はこちらを使ってフレームレートを落とします。

```js
const targetFPS = 30;
engine.customAnimationFrameRequester = {
  requestAnimationFrame: (func) => {
    setTimeout(func, Math.round(1000 / targetFPS));
  },
};
```

単純に、 `1000 / targetFPS` ミリ秒遅延して関数を呼ぶようにするだけです。これは今回フレームの処理時間を考慮していないため、実際には 30 FPS 未満になってしまいますが、 `window.requestAnimationFrame` が実装されていなかった場合のフォールバックが `setTimeout(func, 16)` なのでまあいいとしましょう。

この方法を応用すれば、「ボタンをクリックしたら次のフレームを動かす」という動作も可能です。

```js
    let progressFrame = false;
    document.getElementById('progress-frame').addEventListener('click', () => {
        progressFrame = true;
    });
    const customRequestAnimationFrame = (func) => {
        setTimeout(() => {
            if (progressFrame) {
                func();
                progressFrame = false;
                return;
            }
            customRequestAnimationFrame(func);
        }, 1);
    };
    engine.customAnimationFrameRequester = {
        requestAnimationFrame: customRequestAnimationFrame,
    };
```

※残念ながらフレームを巻き戻すことは今の所出来ないようです。
[UiPath]Parallelの使い方

# TL;DR
- 複数のアクティビティを内部に含め、並列で実行する
- `Condition`の設定によって、全体の挙動を変更することが出来る
    - `Condition = True` ならば、含められたアクティビティのうち**ひとつでも完了すれば**次のアクティビティに遷移する
    - `Condition = False` ならば、含められたアクティビティの**すべてが完了した後に**次のアクティビティに遷移する

# 使いドコロ例
## ログイン済か否かの判定
- Webブラウザで任意のサービスにアクセスするとき、セッションが残っていてログインを求められない場合がある
- しかしながら一定時間が経つと自動でログアウトされ、再度ログイン処理を行わなければならない、というケース

### 実装

1. `Element Exists`アクティビティを2つ用意する。対象となる要素は下記にする
    - a) ログイン前の画面であることを特定できる要素
        - ユーザーIDやパスワードの入力フォームなど
    - b) ログイン後の画面であることを特定できる要素
        - ログイン後にのみ表示されるユーザー名欄やフォームなど
2. 1.で用意したアクティビティのうちいずれかに対して、`Output`を定義する
    - 両方に設定してもよい
    - Outputで定義した変数のDefault Valueが`false`であることが条件
3. 1.で用意したアクティビティを`Parallel`アクティビティに含める
4. プロパティ画面から`Condition = True`に設定する
5. `Parallel`以降で、ログイン前/ログイン後での処理分岐を実装する
    - この分岐判断に、2.で設定したOutputを利用する

### 補足

2.において「いずれか」の実装で良いのは、それぞれのパターンで次のように挙動するため。

 - 例として、次のような実装を考える
    - 実装1.b)に対して、Outputとして`alreadyLoggedIn`を定義する

#### ログイン前の場合

1. ログイン前の画面が表示される
2. アクティビティa)が要素を発見する。これによりアクティビティa)が完了する
3. `Parallel`の設定により、この時点で次のアクティビティへの遷移が確定する
4. 遷移の時点でアクティビティb)は完了していないので、**`alreadyLoggedIn = False`と判定される**

#### ログイン後の場合

1. ログイン後の画面が表示される
2. アクティビティb)が要素を発見する。これによりアクティビティb)が完了する。要素を発見したので、**`alreadyLoggedIn = True`となる**
3. `Parallel`の設定により、この時点で次のアクティビティへの遷移が確定する
4. 遷移の時点でアクティビティa)は完了していないが、`Output`を定義していないので、**処理には影響を及ぼさない**

## その他の使いドコロ
あったら追記します。
to_iとto_s

#to_iとto_sについて
どっちがどっちか分からなくなることが多いので、まとめます！

＊to_i・・・iの意味はinteger（整数）
＊to_s・・・sの意味はstring（文字列）

#使い分け方法
それぞれの使い方について、詳しくみていきます。

```
number1 = 10 #数値
number2 = "15" #文字
```
上記を利用してそれぞれのメソッドを利用していきます。


##to_iメソッド
文字列オブジェクトに対してto_iメソッドを使うと、その文字列を数値オブジェクトに変換することができる！
つまり、

```
puts number1 + 5  #出力結果　15
puts number2 + 5  #エラー

#numberyyyを出力させるためにto_iメソッドを使うと
puts number2.to_i + 5  #出力結果　20
```
ということになります！

##to_sメソッド
数値オブジェクトに対してto_sメソッドを使うと、その数値を文字列オブジェクトに変換することができる！
つまり、

```
puts number1 + "歳の誕生日です"  #エラー
puts number2 + "歳の誕生日です"  #出力結果　１５歳の誕生日です

#numberxxxを出力させるためにto_sメソッドを使うと
puts number1.to_s + "歳の誕生日です"  #出力結果　１0歳の誕生日です
```
ということになります！

#まとめ
このto_iはgetsメソッドと共に使われることが多いですね。
どちらも似ていて間違いやすいので気をつけて使っていきたいと思います！
vue-multiselect を CDN でつかってみる

Vue.jsで、こんな感じのいけてる入力フォームのUIを探してたのですが

1. 選択肢からフィルタしながら入力
2. 入力した内容はタグになる
3. 複数の値を選択できる

[`vue-multiselect`っていうのを見つけて](https://vue-multiselect.js.org)、これが良さそう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32540/5b4b5597-3891-114e-db0b-58c8f8499c42.png)


さっと確認するには、JSはCDNで読み込んで試したいのですが、多くのVueのライブラリはCDNの時の使い方の例をちゃんと書いてないですね...

幸い、今回の`vue-multiselect` は `components: { Multiselect: window.VueMultiselect.default }` ってやるだけでいけました

```Javascript:vue-multiselect.html
<!DOCTYPE HTML>
<html>
<head>
  <title>Timeline</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>

<style> body { font-family: 'Arial' } </style>

<body>
<div id="app">

<div>
  <multiselect
    v-model="value"
    placeholder="city name?"
    label="city" track-by="city_ascii"
    :options="options"
    :multiple="true"
    :taggable="true"
  ></multiselect>
</div>

<pre class="language-json"><code>{{ value  }}</code></pre>

</div>
</body>


<script>
var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
      value: [],
      options: [
                 {
                   "city": "San Martin",
                   "city_ascii": "San Martin",
                   "lat": -33.06998533,
                   "lng": -68.49001612,
                   "pop": 99974,
                   "country": "Argentina",
                   "iso2": "AR",
                   "iso3": "ARG",
                   "province": "Mendoza",
                   "timezone": "America/Argentina/Mendoza"
                 },
                 {
                   "city": "San Nicolas",
                   "city_ascii": "San Nicolas",
                   "lat": -33.33002114,
                   "lng": -60.24000289,
                   "pop": 117123.5,
                   "country": "Argentina",
                   "iso2": "AR",
                   "iso3": "ARG",
                   "province": "Ciudad de Buenos Aires",
                   "timezone": "America/Argentina/Buenos_Aires"
                 },
                 {
                   "city": "San Francisco",
                   "city_ascii": "San Francisco",
                   "lat": -31.43003375,
                   "lng": -62.08996749,
                   "pop": 43231,
                   "country": "Argentina",
                   "iso2": "AR",
                   "iso3": "ARG",
                   "province": "Córdoba",
                   "timezone": "America/Argentina/Cordoba"
                 }
               ]
    }
  }
})
</script>
```

作者に感謝。誰かの時間の節約になればと思い、[CodePenをそっと置いておく。](https://codepen.io/narutaro-the-reactor/pen/rEJbRz)

Cheers,
レポート（機械学習）

第１章：線形回帰
・機械学習の「教師あり」学習である「分類・回帰」の「回帰」にあたる。
・入力データはｍ次元のベクトルの説明変数（特徴量ともいう）であり、それに対する出力は目的変数（スカラー値）である。
・線形回帰は、データの塊を線形式で表す（近似する）ものであり、その線形式を表すパラメータ（未知パラメータ）を最小二乗法により推定する。つまり、データの各点と線形式で表される直線との誤差の総和が最も小さくなるパラメータを推定することである。
・式で表すと、ｙ＝w0+w1ｘ1+ε　となり、ｙ：目的変数、ｘ：説明変数、w0：切片、w1：回帰係数を表す。εは、各データが回帰直線上に無い場合に、その誤差を表すものである。
・上記の説明は、ｍ次元が１次元の場合の説明である。多次元の場合は、行列式を構築し、同じ最小二乗法で近似する。ただし未知パラメータは次元に沿って増える。
・データの分割は、構築した回帰式の正確さを検証するためである。一般的に、全データの８０％を学習用に、２０％を検証用に使う。
・最尤法を用いて分散法を使う。「最もらしい値」を求めるのが最尤推定法であり、尤度関数を求めて、それが最大となる値を求めることである。

第２章：非線形回帰
・データが線形に並んでいる場合は少なく、一般的に複雑にプロットされている。そのため非線形回帰モデルが使われる。しかし、使われている理論は、線形回帰モデルと同じであるため、未知パラメータを求める手法も同じく、最小二乗法や最尤法を用いる。
・相違点は、基底関数と呼ばれる非線形関数を使い、パラメータを１つだけ使う線形では表しきれない多項式を表す。
基底関数には、多項式関数、ガウス型基底関数、スプライン関数等がある。
・学習データに対して、誤差が小さくならない状態を未学習、学習データとの誤差は小さいが、検証データとの誤差が小さくならない状態を過学習という。過学習を抑制する方法として正則化を使う。
・正則化では、正則化項付きの最小二乗法における目的関数を最小化することを目的としている。その方法として、Ｌ２ノルムを利用したRidge推定量（係数の値を小さくする正則化）と、Ｌ１ノルムを利用したLasso推定量（値を０とする係数を多くする正則化）等を使う。
・ホールドアウト法は、全データを学習用とテスト用（検証用）に分け、予測精度や誤り率を推定する。ただし、一方のデータ量を多くして精度を上げたとしても、他方の精度が落ちる問題があり、全データが多く存在する場合に効果が得られる。
・交差検証は、ホールドアウト法の欠点を補う方法で、全データを複数のデータのグループに分割し、全てのグループが１回、検証用データとして使われるように学習を繰り返し、誤差率の平均を性能予測値とする。この予測値が小さい手法（モデル）が最も良いモデルと推定できる。

第３章：ロジスティック回帰
・教師あり学習で、分類問題を解く方法であり、出力関数にシグモイド関数を使う。
・シグモイド関数は、入力Ｘに対して、０～１の間の出力をする関数であり、微分をした場合、シグモイド関数自身で表現することができる。  f’(x)=f(x)*(1-f(x))
・ｘ＝０の時、Ｙ＝０．５とことを利用し、出力Ｙを確率とみなし、０．５以上なら１、以下なら０として、分類問題を解く。
・最尤推定法とは、最も尤もらしくなるようにパラメータを選択する方法である。
・勾配降下法とは、学習によりパラメータを更新し、最適値を求める手法
・確率的勾配法とは、ランダムにデータを１つ選び更新する。勾配降下法は、Ｎ個のﾃﾞｰﾀにつき、１回更新するところを確率的勾配法では１個のﾃﾞｰﾀにつき１回で更新できる。


・モデルの評価は、選択したモデルに対する性能評価であり、以下の４つの項目で評価する。
　正解率：全体のデータの中で正解した割合（(TP+TN)/(TP+FN+FP+TN)）
　再現率：誤りがあっても、漏れを少なくしたい場合の指標（TP/(TP+FN)）
　適合率：見逃しがあっても、正確な予測をしたい場合の指標（TP/(TP+FP)）
　Ｆ値：再現率と適合率がトレードオフの関係であるため、両者の最適値を求める指標

	     予測：Positive	予測：Negative
実際：Positive	ＴＰ	         ＦＮ
実際：Negative	ＦＰ	         ＴＮ


第４章：主成分分析
・多変量データを次元削減して、より少数個の指標にまとめることである。
・次元削減をしても、全体のデータの情報損失をできるだけ小さくする、
・主成分は、固有方程式を解くことで求められ、固有値と分散値は一致する。また、最大固有値に対応する固有ベクトルで線形変換された主成分を第一主成分と言う。
・次元削減する方法はいくつかあり、主成分分析の他に、カーネル主成分分析、自己符号化器（オートエンコーダ）、多次元尺度構成法がある。


第５章：アルゴリズム
・Ｋ近傍法：「教師あり・分類問題」を解く手法で、新規データと「距離（ｋ）が近い」既存データの数によって、クラス分類を行う。ｋの値を事前に決定し、それによって、分類されるクラスが決定される。
・Ｋ平均法：「教師なし・クラスタリング」手法で、全データをｋ個のクラスタに分類する手法である。各クラスタの中心との距離を計算し、最も距離が小さいクラスタにデータを割り当てる。その後、再度中心（各クラスタの平均ベクトル）を計算し、再度クラスタの割り当てを行う。これを繰り返して最適なクラスタに分類する。

第７章：サポートベクターマシン
・２クラス分類を行うための手法である、決定境界を決めた時に、より大きなマージンが得られるようにする方法である。マージンとは、決定境界と最も近いデータとの距離である。
・マージンを最大化する目的関数は、線形識別関数を、Z＝W1*X1+W2*X2とした場合、勾配が緩い関数、つまり、W1,W2においてＬ２ノルムが小さい場合を求めることと同じである。よって、1/2||W||2　が最小となる場合を求める。
Excelで選択中の画像を縦並びに整列させる



##概要
Excelで画像を複数貼り付けた場合に、デフォルトだと斜めに重なってに並んでしまうので、縦並びに整列したい。
手作業だと時間が掛かってしょうがないので、マクロ化しました。

##コード
```vb:選択中の画像整列.vbs
Sub 選択中の画像整列()
    Dim isFirst As Boolean: isFirst = True
    Dim left As Integer: left = 0

    Dim shp As Shape
    '選択中の画像内で一番左端の座標を取得
    For Each shp In Selection.ShapeRange
        If isFirst Then
            '最初のオブジェクトの左座標を初期値とする
            left = shp.left
            isFirst = False
        End If
        left = Application.WorksheetFunction.Min(shp.left, left)
    Next shp

    Dim befourButtom As Integer
    befourButtom = 0
    For Each shp In Selection.ShapeRange
        If befourButtom <> 0 Then
            '重ならないように、前のオブジェクトの少し下に配置する
            shp.Top = befourButtom + 5
        End If
        '左座標は一番左のものに合わせる
        shp.left = left
        befourButtom = shp.Top + shp.Height
    Next shp
End Sub

```
##実行結果
実行前
![WS000010.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340597/d97a7a75-fa0c-de60-cdc6-46d2eb14a675.jpeg)
実行後
![WS000013.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340597/63db58ec-6aa3-0375-9615-fe3be5b1512a.jpeg)
![WS000014.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340597/e2e576f1-4f66-e66b-05eb-9aa1c77cfc57.jpeg)


##課題
画像は座標順ではなく挿入順でソート並ぶ為、現在の座標でソートさせたい場合は改修が必要
レポート（応用数学）

#線形代数

###固有値と固有ベクトル

　ある行列Aに対する特殊なベクトル「x」と右辺の係数「λ」において、「Ax = λx」が成立する場合、「x」を行列Aに対する固有ベクトル、λを固有値という。固有値ベクトルは、Ax = λx ⇒「 (A-λI)x = 0, x ≠ 0」より|A-λI| = 0 を解くことで求められる。

###固有値分解

　ある実数を正方形に並べて作られた行列Aが固有値「λ1,λ2・・・」と固有ベクトル「v1, v2・・・」を持った時、この固有値を対角線上に並べた行列（それ以外の成分は0）「𝛬」とそれに対応する固有ベクトルを並べた行列「V」を用意したとき、それらは「AV = V𝛬」となる。
　したがって「![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451282/336dc482-89af-4a6b-cd33-9e0a6a9aa033.png)」と変形できる。
このように正方形の行列を上述のような３つの行列の積に変換することを固有値分解という。
（これにより、行列の累乗計算が容易になる。）

###特異点分解

　正方行列以外の行列に対する固有値分解（に似たもの）で、
Mv=𝜎u・Mu=𝜎vの場合に、「![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451282/711a19ea-7223-a8f4-ee41-d1f288508251.png)」として特異点分解することができる。
また、「![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451282/15451043-a650-3d33-ce9e-fe523448af59.png)」を固有値分解することでその左特異ベクトルと特異値の２乗を求めることができる。

#確率統計

###確率の種類

　・頻度確率（客観確率）　⇒　発生する頻度
　・ベイズ確率（主格確率）　⇒　信念の度合い

###条件付き確率と独立した事象の同時確率

　・条件付き確率
　　ある事象X=xが与えられた下で、Y=yとなる確率
　　P(Y=y|X=x) = P(X=x)P(Y=y)/P(X=x)

　・独立した事象の同時確率
　　事象X=xと事象Y=y（XとYに因果関係はない）が同時に発生する確率
　　P(X=x,Y=y)=P(X=x)P(Y=y)=P(Y=y,X=x)

###ベイズ則
　・事象X=xと事象Y=yについて以下が成り立つ
　　P(X=x|Y=y)P(Y=y) = P(Y=y|X=x)P(X=x)

###確率変数と確率分布
　・確率変数
　　事象と結びつけられた数値
　・確率分布
　　事象の発生する確率の分布
　・期待値
　　その分布における確率変数の平均値（ありえそうな値）
　　![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451282/1dee0d27-0d3c-13d4-9457-4668572ae9fb.png)
　　![image5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451282/3ed230fc-80bc-9f7e-4642-f683e6fa2771.png)　※連続値の場合


###分散と共分散
　・分散
　　データの散らばり具合（期待値からのズレを平均したもの）
　・共分散
　　２つのデータ系列の傾向の違い
　　正の値：似た傾向、負の値：異なる傾向、ゼロ：関係性に乏しい

###様々な確率分布
　・ベルヌーイ分布（２択（表裏など）で成立）
　・マルチヌーイ（カテゴリカル）分布（複数選択（さいころのような）で成立）
　・二項分布（ベルヌーイ分布の多試行版）
　・ガウス分布（釣鐘型の連続分布）


#情報理論

###自己情報量
　以下の式で表される
　I(ｋ) = -log(P(x)) = log(W(x))

###シャノンエントロピー
　自己情報量の期待値
　H(x) = -Σ(P(x)log(P(x)))

###カルバック・ライブラー（KL）　ダイバージェンス
　同じ事象・確率変数における異なる確率分布P,Qの違い
　![image6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451282/b3ff988c-ff1e-0c92-e47a-533dbfffd546.png)


###交差エントロピー
　KLダイバージェンスの一部分を取り出したもの
　⇒ Qについての事故情報量をPの分布で平均
　![image7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451282/12dc5b4b-c99b-81ea-e635-ecf70ca8e5ba.png)
　![image8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451282/a655853c-80e5-bc3d-4b86-be064014fce3.png)
Fortran 90/95 で "Hello, world!"

# はじめに
環境は macOS Mojave (10.14.5) で Homebrew の `gcc (gfortran)` を使っています。
他のOSでも大きな問題はないはずです。

初心者向けに、何回かに分けてFortranの記事を書くつもりでいます！
（私自身、バリバリFortranを使っているわけではないので、ゆっくり更新になると思います）

## Fortranって何？

https://ja.wikipedia.org/wiki/FORTRAN にはこう書いてあります。

>FORTRAN（フォートラン）は、1954年にIBMのジョン・バッカスによって考案された、コンピュータにおいて広く使われた世界最初の高級言語である。

だそうです。

直感的には「__数値計算__が得意な言語」です。

そのため、大学の研究室や、研究施設ではまだまだ使われています。
（もちろんC++にすでに置き換わっていたり、Pythonを使っていたりする場合もありますが...）

余談ですが、私は物理出身です。
私自身は最近Fortranを使っていないのですが、友人はバリバリ使っています。

## 「Fortran」 vs 「FORTRAN」

これは些細な問題ですが...
大文字で「FORTRAN」と書いたときはレガシーな FORTRAN 77 を指します。
小文字表記で「Fortran」と書いたときはモダンな Fortran 90/95 以降を指します。

今回は、よりわかりやすくてモダンな Fortran 90/95 を対象に記事を書いていくので小文字表記になっています。

# Fortran 90/95 で "Hello, world!"

本題です。
以下のファイル「hello_world.f90」を作りましょう。

```fortran:hello_world.f90
program hello_world
    write(*,*) 'Hello, world!'
end program hello_world
```

ターミナルでコンパイルをして...

```Terminal:Terminal.app
$ gfortran hello_world.f90
```

「a.out」というプログラムができているはず

```Terminal:Terminal.app
$ ls
a.out           hello_world.f90
```

実行すると！

```Terminal:Terminal.app
$ ./a.out
 Hello, world!
```

# おわりに

お疲れ様でした。
次回は、コメントアウトの方法などを記事にしたいなぁとなんとなく考えています。

間違いなどありましたら、コメントで教えていただけるとありがたいです！

__2019年7月8日(月)追記__：
次回はこちら「[Fortran 90/95 で コメントアウトをする & ループ処理で足し算][2]」
[2]:https://qiita.com/TakuroKoike/items/fe886c14a44d9d4c3bbe
mongoDB のレプリカセットをスタンドアローンに戻す方法

スタンドアローンのサーバをレプリカセットに登録する方法はドキュメントに書いてあったんですが、その逆のレプリカセットの設定を削除する方法が載っていなかったので、ここにまとめておこうと思います。


### mongod.conf からレプリカセットの設定を削除

レプリカセットを構築する時に書いた `replication.replSetName` の項目を削除します。また、もし `net.bindIp` をフルオープンにしていた場合（本当はちゃんと制限した方がよいです）、その設定も元に戻しましょう。コメントアウトしてる場合もあると思うので、その場合はコメントアウトを外しましょう。

```
$ sudo vim /etc/mongod.conf
net:
  # bindIp: 127.0.0.1  # Listen to local interface only, comment to listen on all interfaces.

replication:
  replSetName: "hoge"
```

ここで `sudo service mongod restart` をして `mongo` を実行すると以下のような警告が出ます。

```
** WARNING: mongod started without --replSet yet 1 documents are present in local.system.replset
**          Restart with --replSet unless you are doing maintenance and  no other clients are connected.
**          The TTL collection monitor will not start because of this.
```

これは `local` というデータベースの中にレプリカセットの設定が残っているのが原因です。なので、 `local` をふっとばしましょう。

### local を db.dropDatabase()

```
> use local;
> db.dropDatabase();
{ "dropped" : "local", "ok" : 1 }
```

これで OK です（こわ）。

### mongod を再起動

最後に mongod を再起動して終了です。

```
$ sudo service mongod restart
Stopping mongod:                                           [  OK  ]
Starting mongod:                                           [  OK  ]
```

再起動を含むので本番環境でこれをやるのは避けたいところです。メンテモードに移行してから実行した方が安全ですね。不要になった SECONDARY や ARBITER のサーバを落としておくのも忘れないようにしたいです。

### 参考文献
https://stackoverflow.com/questions/17544713/encountered-a-mongodb-warning-after-converting-a-replica-set-to-stand-alone-serv
【RDS for Oracle】サプリメンタル・ロギングの有効化

#DBレベルのサプリメンタルロギングの有効化（デフォルト無効）

```sql
SQL> SELECT supplemental_log_data_min FROM v$database;

SUPPLEME
--------
NO

SQL> exec rdsadmin.rdsadmin_util.alter_supplemental_logging('ADD');

PL/SQL procedure successfully completed.

SQL>
SQL> SELECT supplemental_log_data_min FROM v$database;

SUPPLEME
--------
YES
```

#DBレベルのサプリメンタル・ロギング無効化

```sql
SQL> exec rdsadmin.rdsadmin_util.alter_supplemental_logging('DROP');

PL/SQL procedure successfully completed.

SQL> SELECT supplemental_log_data_min FROM v$database;

SUPPLEME
--------
NO
```

#補足
サプリメンタルロギングのタイプの有効な値は 'ALL'、'FOREIGN KEY'、'PRIMARY KEY'、または 'UNIQUE' 

#参考
[Oracle DB インスタンスの一般的な DBA ログタスク](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/Appendix.Oracle.CommonDBATasks.Log.html#Appendix.Oracle.CommonDBATasks.SettingForceLogging)
CircleCIの知らなかったお役立ち機能について

先日、こちら( https://circleci.connpass.com/event/134220/ )に参加してきて、有用な情報もあったので補記も含めて以下メモを残しておく。

# ■ワークフローのタイプ
・スケジューリング： ナイトリービルドのように決まった時刻に実行(スケジューリング設定が可能と言う話)
・マニュアル承認： ワークフローの一部で自動実行を中断し、手動による承認によって再開
・ブランチ指定： ブランチの指定が可能
・タグの指定： gitのタグで指定可能

マニュアル承認の存在は初めて知ったが、承認出るまでWorkflowをデプロイ前でHold状態にできる機能だ。
上場企業のIT監査にも耐えれそうなレベルかは確認必要だが、便利なCIツールだと思う。
https://circleci.com/docs/ja/2.0/workflows/#%E6%89%BF%E8%AA%8D%E5%BE%8C%E3%81%AB%E5%87%A6%E7%90%86%E3%82%92%E7%B6%9A%E8%A1%8C%E3%81%99%E3%82%8B-workflow-%E3%81%AE%E4%BE%8B

# ■SSHデバッグ
Rebuild with SSHを選択すると、ビルド終了後2時間、もしくはSSHセッションが終わって10分はコンテナが行きているのでアクセスして直接確認が可能

# ■ビルドの高速化
・同一ジョブ間のキャッシュ、同一ワークフロー内の異なるジョブ間でキャッシュを共有できる
・並列処理（例： 10個のテストを4分割して実行）

# ■設定のパッケージングと再利用(Orbs)
- OrbsはOrbsレジストリ上で誰でも公開する事ができ誰でも利用できるが、private利用ができないので注意。

# ■Orbs Registry(https://circleci.com/orbs/registry/)
以下、３種類のOrbsがある
- Certified(CircleCI)
- Partner(CircleCI認定パートナー)
- 3rd party(その他)

世界で一番使われているのは、大規模開発している3rd partyが作ったもの。ソースのビルドに時間がかかってしまうので自作したスクリプトを混ぜているそう。

各Orbsには使い方の事例が掲載されているので、導入もしやすい。

※AWS-CLIのOrbs：　色々とAWS関連のコマンドをCircleCI上で実行できそう。
![5421419d8675319328f19f4f521d28f1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429583/53c69e05-4463-b241-1f82-169cd07f7695.png)

※Jira用のOrbs： 色々設定すればJiraに通知できそう。
![3d854f5a83ed05b8fc5ddd41d26342a6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429583/32cb74ca-041f-87da-6dcf-5edfbcfc001d.png)


# その他概念的な話
### ■CI/CDのCDについての各社の捉え方
CDという意味は２つの意味合いで活用されている。（会社によって意味合いが分かれる）

1. Continuous Delivery(継続的デリバリー)
・リリース直前までは自動化してリリース時は人の手で行う

2. Continuous Deployment(継続的デプロイメント)
・リリース作業に人間の意志が介在しない

### ■CircleCI 5metrics
https://www2.circleci.com/rs/485-ZMH-626/images/5-Key-Metrics-Engineering.pdf
→ 以下の時間を意識しましょうと言う話
・`コードがコミットされてからデプロイされるまでの時間` 
・`CIビルドにかかる時間` 
・`CIビルドが始まるまでに待たされるまでの時間` 
・`Masterブランチが壊れている時間(いかに早くリカバれるかの時間)` 
・`ツールのメンテナンスなど開発以外にかかっている時間` 

# まとめ
既知の話もあれば新規の話もあり、話聞けて良かった。
新機能が出る度、話を聞きに外出するのもアリだと思った。
Azure CosmosDB でJavaSDKから Delete All (全削除)


#概要
文書を取得してから、文書のIDとPartitionKeyを指定して削除する。

#コード

```java

		// Azure Cosmos DB Libraries for Java
		// https://docs.microsoft.com/ja-jp/java/api/overview/azure/cosmosdb?view=azure-java-stable

		FeedOptions queryOptions = new FeedOptions();
		queryOptions.setEnableCrossPartitionQuery(true);

		String host = "yourhost";

		// Get key from Azure Web Console
		// read write key
		String key = "yourkey";

		DocumentClient client = new DocumentClient("https://" //
				+ host //
				+ ".documents.azure.com:443", key, //
				new ConnectionPolicy(), ConsistencyLevel.Session);

		String collectionLink = String.format("/dbs/%s/colls/%s", DATABASE_ID, COLLECTION_ID); // 適当に指定する

		String q = "SELECT * FROM container1";
		// 全文書
		List<Document> results = client //
				.queryDocuments(collectionLink, q, queryOptions).getQueryIterable().toList();

		for (Document doc : results) {
			System.err.println(doc);
			String documentLink = doc.getSelfLink();
			RequestOptions options = new RequestOptions();
			// check your configuration of cosmos db container
			String partitionKey = ((org.json.JSONObject) doc.get("item")).getString("xxx");
			options.setPartitionKey(new PartitionKey(partitionKey));

			client.deleteDocument(documentLink, options);
			System.err.println("deleted: " + documentLink);
		}
		client.close();


```

#所感
Patitionのキーを指定するのではなく、値を指定する必要があります。
「SELECT * FROM c」ができるのだから「DELETE * FROM c」ができてもよさそうなのだが、できないらしい。
はじめてのreact

## 作業ログ

```aidl
$ npx create-react-app my-app
$ cd my-app
$ npm start
```

Chromeブラウザが立ち上がって地球のまわりに衛生が回る軌道みたいなページが表示されたらOK

アクセスしているURL：http://localhost:3000/

下記ファイルを書き換えて保存すると高速で反映される（くそはやい）

IDEによってはJSXの表示に切り替える事をしてあげたほうが見やすい。

my-app/src/App.js

```aidl
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

## 非reactからreactに移行する
rendarに既存のHTMLを突っ込んでエラーになってる箇所を順番に解決してみる
[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja)このツールが必須。

## 置き換える場合の注意点
- imgタグは閉じタグ(/img)が必要
- <!-- コメントアウトは削除 -->
- inputタグにも閉じタグが必要
- brタグにも閉じタグが必要
-  target="_blank"になってるリンクは rel="noreferrer noopener"をつけてあげないとエラーになる
- style="float:left" は駄目で style={{float:left}}にしないといけない
- etc... etc... etc...

道のりは長い

## 参考
- [初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！](https://webkikaku.co.jp/blog/javascript/react-start/)
- [既存のWebアプリをReactで書き換えた話（＋ES6の困った点）](https://parrot.hatenadiary.jp/entry/2016/02/28/113310)
- [Reactでaタグの中にtarget='_blank'を書いたらESLintに怒られた話](https://qiita.com/togana/items/e739e1ec943862a71757)
【RDS for Oracle】FORCE LOGGINGモード（強制ロギング／強制ログ作成モード）の有効化

#FORCE LOGGINGモードの有効化（デフォルト無効）

```sql
SQL> select force_logging from v$database;

FORCE_LOGGING
---------------------------------------
NO

SQL>
SQL> exec rdsadmin.rdsadmin_util.force_logging(p_enable => true);

PL/SQL procedure successfully completed.

SQL>
SQL> select force_logging from v$database;

FORCE_LOGGING
---------------------------------------
YES
```

#FORCE LOGGINGモードの無効化

```sql
SQL> exec rdsadmin.rdsadmin_util.force_logging(p_enable => false);

PL/SQL procedure successfully completed.

SQL>
SQL> select force_logging from v$database;

FORCE_LOGGING
---------------------------------------
NO
```

#参考
[Oracle DB インスタンスの一般的な DBA ログタスク](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/Appendix.Oracle.CommonDBATasks.Log.html#Appendix.Oracle.CommonDBATasks.SettingForceLogging)
Amazon Linux 2018.3で最新バージョン(1.17.1)のNginXにアップデートする

[nginx.repo](http://nginx.org/en/linux_packages.html#RHEL-CentOS)を`/etc/yum.repos.d/`以下に作成します。このとき各項目に`priority=1`を追加しましょう。

```repo:/etc/yum.repos.d/nginx.repo
      [nginx-stable]
      name=nginx stable repo
      baseurl=http://nginx.org/packages/centos/6/$basearch/
      priority=1
      gpgcheck=1
      enabled=0
      gpgkey=https://nginx.org/keys/nginx_signing.key

      [nginx-mainline]
      name=nginx mainline repo
      baseurl=http://nginx.org/packages/mainline/centos/6/$basearch/
      priority=1
      gpgcheck=1
      enabled=0
      gpgkey=https://nginx.org/keys/nginx_signing.key
```


そして`yum --showduplicate list nginx`で

```shell-session
$ yum --enablerepo=nginx-mainline --showduplicate list nginx
Installed Packages
nginx.x86_64                                   1.17.1-1.el6.ngx                                     @nginx-mainline
Available Packages
nginx.x86_64                                   1.9.0-1.el6.ngx                                      nginx-mainline
nginx.x86_64                                   1.9.1-1.el6.ngx                                      nginx-mainline
(中略)
nginx.x86_64                                   1.15.12-1.el6.ngx                                    nginx-mainline
nginx.x86_64                                   1.17.0-1.el6.ngx                                     nginx-mainline
nginx.x86_64                                   1.17.0-1.el6.ngx                                     nginx-mainline
```

利用可能なパッケージのバージョンの一覧が表示されるのですが、この中のパッケージを指定して新しいバージョンにアップデートしようとしても

```shell-session
$ sudo yum --disablerepo=amzn-updates install nginx-1.17.1-1.el6.ngx.x86_64
Loaded plugins: priorities, update-motd, upgrade-helper
1 packages excluded due to repository priority protections
Package nginx-1.17.1-1.el6.ngx.x86_64 is obsoleted by 1:nginx-all-modules-1.12.1-1.33.amzn1.x86_64 which is already installed
```

と表示されてしまい、アップデートできません。
`Package XXX is obsoleted by YYY which is already installed`と表示されてしまう原因としてyumが本来古いはずのNginxのパッケージを最新版と認識するために古いバージョン扱いとなるパッケージがインストールできないようです。ということで

```shell-session
$ yum --disablerepo=amzn-updates --enablerepo=nginx-mainline downgrade nginx-1.17.1 -y
```

これでインストール(アップデート)できます。



## おまけ

ElasticBeanstalk(およびCloudFormation)用の設定ファイルです。

```.ebextensions/upgrade_nginx.config
commands:
  update_nginx:
    command: |
      NGINX_VER=$(yum list nginx | grep nginx | awk '{print $2}')
      if ! [ NGINX_VER = "1.17.1-1.el6.ngx" ] ; then
        yum --disablerepo=amzn-updates downgrade nginx-1.17.1 -y
      fi
      nginx -V

files:
  /etc/yum.repo.d/nginx.repo:
    mode: "000644"
    owner: root
    group: root
    content: |
      [nginx-stable]
      name=nginx stable repo
      baseurl=http://nginx.org/packages/centos/6/$basearch/
      priority=1
      gpgcheck=1
      enabled=1
      gpgkey=https://nginx.org/keys/nginx_signing.key

      [nginx-mainline]
      name=nginx mainline repo
      baseurl=http://nginx.org/packages/mainline/centos/6/$basearch/
      priority=1
      gpgcheck=1
      enabled=1
      gpgkey=https://nginx.org/keys/nginx_signing.key
```
オフショア開発での留意点

ウォーターフォールでオフショアを活用しようとしていたときに気がついたことのメモ。

## インフラ初期構築
構築初期にはインフラ作業が多く発生します。
拠点間のIP開放、VPN構築、SSL証明書の適用などを誰がどこまでやるか決めておき、要因の確保をしておくとよいでしょう。

## オフショア先の回線事情
日本の回線事情はとても優秀です。
それと比較して海外(特に途上国)では、通信インフラ安定してない地域もあります。
イメージファイルなどの大容量ファイルのダウンロードを行うと、タイムアウトしてしまうことがあります。
開発環境の構築手順など、現地の環境で実施できるか確認しましょう。

## 転職は頻繁
海外ではキャリアアップのため頻繁に転職します。
日系の最大手の企業の現地子会社であろうがお構いなしです。
オフショア先の担当が、突然転職しても対応できるように検討しておくとよいでしょう。

## 翻訳御衣有無
現地の人は、必ずしも日本語ができるとは限りません。
日本語を標準語とした場合、翻訳作業が重なり翻訳者がボトルネックとなることがあります。
体制やどれだけ処理できるかキャパシティなどを事前に確認しておくとよいでしょう。
Oculus Questでオブジェクトを両手でつかんで拡大・縮小する

# はじめに
Oculus Integrationには様々なサンプルシーンが含まれていて勉強になるのですが、最近はDistanceGrabのシーンをベースに手を加えています。
このシーンにはバグがあり物を掴んだ時に吹き飛ばされてしまうのですが、以下ページに対処法やシーンの説明があり、大変参考になりました。
[【Oculus Quest開発メモ】離れた場所にある物を掴む Distance Grabber & Grabbable編【Unity】]
(https://raspberly.hateblo.jp/entry/OculusQuestDistanceGrabberGrabbable)

DistanceGrabでは、片手で物をつかんで操作できるのですが、両手でつかんで操作する機能はありませんでした。
スクリプトを見たところ、結構改造しないとできなさそうな雰囲気でした。
どうしようか検討していたところ、すでにそのようなものを作成されている人がいましたので、試しに使わせていただいたところ、自分がやりたかったイメージ通りで非常に使いやすかったです。
[VR 向けの自作 Grabber を作ってみた]
(http://tips.hecomi.com/entry/2017/07/30/234658)

#開発環境
Unity 2019.1.7f1
Oculus Integration for Unity - 1.37
VrGrabber-v0.0.3

# 試したこと
ダウンロードしてきた"VrGrabber-v0.0.3.unitypackage"をOculusQuest向けに作成したプロジェクトにインポートするだけで、そのままサンプルシーンを動作させることができました。
また、DistanceGrabのシーンのオブジェクトのスクリプトを元の"DistanceGrabbable.cs"から"VrgGrabbable.cs"に差し替えて、DisatanceGrabHandLeft/RightをVrg Left/Right Grabberに差し替えることで両手で操作できるようになりました。
ただ、"DistanceGrabbable.cs"にはアウトライン・クロスヘアー対応の機能があり、外しただけではオブジェクトのアウトラインの表示が見えたままになってしまうため、表示を消すようなスクリプトを追加しました。

```C#:VrgGrabbableExtend.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

namespace VrGrabber
{
    public class VrgGrabbableExtend : VrgGrabbable
    {
        public string m_materialColorField;

        Renderer m_renderer;
        MaterialPropertyBlock m_mpb;

        void Start()
        {
            m_renderer = gameObject.GetComponent<Renderer>();
            m_mpb = new MaterialPropertyBlock();
            m_mpb.SetColor(m_materialColorField, Color.white);
            m_renderer.SetPropertyBlock(m_mpb);

        }
    }
}
```

# 動作例
こんな感じになります。画像は離れたところから操作する例ですが、直接つかんで操作することもできます。
![com.oculus.vrshell-20190701-143118_Trim_320x320_fps10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215278/18cde89b-5108-6dde-9c6d-c6be0c2d7ebf.gif)


これまでadbからコマンドでキャプチャしていたため２眼の画像になってしまい見にくかったのですが、メニュー画面上からの操作で録画すると普通に１眼の画像になることにいまさらですが気が付きました・・・
jsでのDOM操作（初学で詰まったとこ）

#jsでのDOM操作（初学で詰まったポイント）
今日からjavascriptを学習し始めました。C系しか触ったことないので
混乱しています。🐬

**DOM操作つまづきポイント：**
・querySelectorで複数要素を取れるか？🐬
・データ属性も取れるのか？🐬
・querySelectorは該当したものが複数ある場合どうしているか？🐬
・独自のセレクターも取れるのか？🐬
・getElementsByClassNameは常に複数なのか？🐬
・子要素をつけたり外したりはどうするのか？🐬

🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊

##querySelectorで複数要素を取れるのか？🐬
⇨取れません。
querySelectorの指定方法で複数要素をとりたいときは**querySelectorAll**を使うようです。

```javascript
var elements = document.querySelectorAll('.iruka');
```

これでirukaクラスが全て取れます。

##データ属性も取れるのか？🐬
⇨取れました。
**データ属性**・・・ユーザごとが自分で作れる独自のHTMLの属性。

```HTML
<div data-animal="iruka">🐬</div>
```
data-animalなんて属性は聞いたことがありません。これがデータ属性らしいです。接頭辞にdata-をつけます。
データ属性は以下の記法で取得できます。

```javascript
var element = document.querySelector('[data-animal="iruka"]');
```

##querySelectorは該当したものが複数ある場合どうしているか？🐬
例えば,

```HTML
<div class="iruka">バンドウイルカ</div>
<div class="iruka">アマゾンカワイルカ</div>
```
というHTMLだった場合に、

```javascript
var element = document.querySelector('.iruka');
```

としたとき、elementの中はバンドウイルカなのでしょうか？アマゾンカワイルカなのでしょうか？

正解は、querySelectorは最初の要素（＝上の方に書かれた要素）を取得するので
**バンドウイルカ**になります。

##独自のセレクターも取れるのか？🐬
→普通に取れます。

```HTML
<skin>キュッキュ</skin>
```
こんな独自のセレクターが現れた場合はこうです。

```javascript
var element = document.querySelector('skin');
```

独自セレクターも普通のセレクターと同じ扱いです。

##getElementsByClassNameは常に複数なのか？🐬
→いつだって複数です。なので注意が必要な場合があります。

```HTML
<div class="alone">🐬</div>
```
このようにaloneクラスがドキュメント全体で一個しかない場合でも、複数扱いになります。よって

```javascript
var element = document.getElementsByClassName('alone');
element.style.display = 'none';
```
としても、イルカは消えません。
消すには、element[0]と要素指定してあげるか、querySelector('.alone')でとってあげましょう。


##タグをつけたり外したりはどうするのか？🐬
忘れそうなのでメモ。

```javascript
element.appendChild(追加する子要素）;
element.removeChild(除去する子要素);
```

今日は以上です。
ちなみにイルカも好きですが、シャチの方が好きなので、シャチの絵文字が出ないかな〜
といつも思ってます。🐬
CP/Mの開発

CP/M用のプログラムを8080アセンブラを使って作る方法は以下のようなパターンが考えられます。

EDなどのCP/M上のエディタで8080のアセンブラを書きASM.COMでアセンブルする方法

![8080asm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/219797cd-bc41-f272-57e1-19c3f5db8d8e.png)

ASMはMac上のエディタで作成して、それをCP/Mに転送してASM.COMでアセンブする方法。CP/Mの改行コードはDOSと同じCR+LFです。

![8080asm2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/68418e58-9c0c-fa57-47c5-50f2cbc8e4dd.png)

ASMをMac上のエディタで作成して、Mac上のasm8080でアセンブルしてHEXファイルをCP/Mに転送する方法

![8080asm3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/590c83b9-60e6-f976-dbbd-db5ecbd1f240.png)

[hex2bin](http://hex2bin.sourceforge.net)を使ってcomまでMac上で作ってcomを転送することもできます。

![8080asm4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/aa5e71f1-0d5d-3065-a0bb-fd2e73f234da.png)

```
$ asm8080 hello.asm
$ hex2bin -m 80 -p 0 -e com hello.hex 
hex2bin v2.5, Copyright (C) 2017 Jacques Pelletier & contributors

Allocate_Memory_and_Rewind:
Lowest address:   00000100
Highest address:  00000211
Starting address: 00000100
Max Length:       274

Binary file start = 00000100
Records start     = 00000100
Highest address   = 00000211
Pad Byte          = 0
Extended
Highest address:  0000027F
Max Length:       384
```

これでも良いのですが、asm8080が吐くbinファイルはパディングされてませんが、中身はcomと同じものなのでbinをそのままでも大丈夫そうです。

cpm8266のxmodemコマンド(xs,xr)はlrzszではうまく動かないことがあったので、Mac用のコマンドを簡単に作ってみました。

https://github.com/yamori813/xm

送信のxs.cは128バイトのあまり部分に0x1aを埋めていますが、xr.cはそのままにしてます。xmodemでバイナリを送信する時にバイナリの終端に0x1aがあると削られてファイルが壊れます。おそらく当時はこの問題が起きないように圧縮するなり、なんらかのテキストエンコードで送っていたのではないでしょうか。

xmodemは最後のブロックのあまりに0x1aを埋めるのですが、受信している時にそのブロックが最後かはわからず、次のブロックのリクエストがSOHではなくてEOTだと、その前のブロックが最後だったのがわかる仕組みになっています。なので0x1aを削る処理はEOTを受けてからしかできず、面倒なんので実装しませんでした。

xmodemでは受信側が最初のバイトの送信を行います。xr.cは自分がバイトを送信した後にシーケンスが続くので普通に実装しましたが、xs.cは送られてきているデータを処理することを考えてkqueueを使っています。今の所あまり必要なさそうですが、またいじる時にはなにかの役に立つかもしれません。

2022/7: xs,xrコマンドに標準入力のサポートを入れました。引数が一つでデバイス名がない場合は標準入出力で処理します。

Z80のニモニック(命令の文字列)は8080と違っているので、Z80では別のツールを使う必要があります。

Z80の事は以下のページに詳しく書いてありました。

http://www.yamamo10.jp/yamamoto/comp/Tiny_BASIC/Lesson_2/index.php

マイクロソフトがCP/M用のアセンブラとして販売していた、MACRO-80は8080とZ80に対応していて中間ファイルの生成をおこない、LINK-80でバイナリにしていました。MACRO-80の最終バージョンは3.44だったようです。

8080の最初の頃の開発環境はPDP-11などクロスアセンブラでした。CP/Mが出てきた事で、セルフでの開発ができるようになりました。CP/Mは非常に重要なターニングポイントであったと思われます。
GoogleのAIYキットとは何ですか？また、それらを使用して何ができますか？

これらのキットはすべて何についてですか？

グーグルは、人工知能で動作することができる装置を作ることを可能にするであろう安価な部品を買うための「メーカー」のための方法としてAIYプロジェクトを昨年明らかにした。 グーグルはそのブログ記事の中で、キットは人工知能について子供たちを教育したい学生と学校のために設計されていると言った、そしてそれはテクノロジー産業においてもっと広い場所にある。
![582069-google-aiy-maker-kits-2018.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/005690be-7c1d-2823-da9e-2daf48acc7cc.jpeg)


Googleが販売しているキットの数

Googleは月曜日に2つのキットを発表した：Voice KitとVision Kit。

Voice Kitは、会社のGoogle Assistantをサポートするスピーカーを作成するためのオールインワンキットです。 キットは段ボールから作られているので、それは棚の上で最も見栄えの良い機器にはなりませんが、それはGoogleのアシスタントを介して完全な音声支援を提供します。 それは作り付けのスピーカー、ワイヤーおよびあなたがあなたのスピーカーを作成するのに必要なすべての回路を持っています。
![微信截图_20180829113439.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/b5e0efe2-2dda-1449-340b-bf99139aaa19.png)


Vision Kitもそのデザインはボール紙に頼っているが、オブジェクト、顔、そして感情を識別できる「インテリジェント」カメラが内蔵されているとグーグルは言った。 それはまたあなたがそれが探しているものや方法をカスタマイズすることができますさまざまな画像認識ニューラルネットワークと互換性があります。

キットには何が付属していますか？

Googleが昨年発売したキットとは異なり、今年のAIYキットには、仕事を終わらせるために必要なものがすべて揃っています。 たとえば、ボイスキットには、スピーカー、ワイヤ、およびラズベリーパイゼロWHがあります。 事前にプロビジョニングされたSDカードもバンドルに含まれています。

Vision Kit側でも、同様にRaspberry Pi Zero WHが見つかります。 ラズベリーパイカム2と事前にプロビジョニングされたSDカードもあります。

![微信截图_20181109142012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/a19b5d66-cbbd-f103-d9dd-69beb4007b9f.png)


いずれにせよ、すべてのコンポーネントを組み立てて、それを稼働させるためにエクスペリエンスをカスタマイズする必要があります。

アプリはありますか？

もちろんです。 しかし、今のところ、Google PlayにはAndroidアプリしかありません。 グーグルは、iOSとChrome用のアプリに取り組んでおり、近いうちにそれらを提供する予定だと述べた。

アプリでは、選択したキットをワイヤレスでセットアップして構成できます。 アプリを操作するためのAndroidデバイスがない場合は、キーボード、ビデオ、マウスを接続して設定を調整することでキットを設定できます。

キットはどこで購入できますか？

GoogleはすでにGravitylink（ https://store.gravitylink.com/global ) でVoice and Visionキットを提供しています。
SQLの処理の流れ

Oracleの基本的なアーキテクチャについては[こちら](https://qiita.com/ghogho-seki/items/3a7a5ba97a83f4ca4fcd)

#SQLの処理の流れ
##共有プール
1. SQLが発行されるとサーバプロセスがそのSQLを受け取り、SQLの処理を行う。
2. まずは、共有プール上でSQLの解析結果が無いかチェック。
3. 解析結果があれば、それを再利用（ソフトパース）。なければ、解析を行い解析結果を共有プール上に保持（ハードパース）。
<img width="528" alt="スクリーンショット 2019-07-01 14.55.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449014/a3e5181f-7d03-91a3-78b7-9eb7f2d8c6b2.png">

##データベースバッファキャッシュ
1. 共有プールで処理がされたあと、DBバッファキャッシュにSQLを処理するためのデータがあるかチェック。
2. 必要なデータがあればそれを再利用。なければ、DBWR（データベース・ライター・プロセス）がデータファイルから必要なデータをDBバッファキャッシュ上に読み込む。
3. 今回発行されたSQLがデータの検索（select）であれば、そのまま結果をユーザプロセスに返す。検索ではなく、変更処理（DML（insert/update/delete））であれば、DBバッファキャッシュ上でデータの変更を行う。
<img width="506" alt="スクリーンショット 2019-07-01 14.56.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449014/d77f4a9d-7711-1654-50b1-06e8d3946123.png">

##REDOログバッファ（※変更処理の場合）
1. データを変更すると、その変更履歴（REDOレコード）が生成され、REDOログバッファにためられる。
2. REDOログバッファにある程度の変更履歴がたまると、LGWR（ログ・ライター・プロセス）がオンラインREDOログ・ファイルに変更履歴を書き出す（未コミットも含め書き出す）。
<img width="505" alt="スクリーンショット 2019-07-01 14.56.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449014/cd0d2397-6558-6566-38e0-e179e82833b1.png">

##データベースバッファキャッシュ（※変更処理の場合）
1. DBバッファキャッシュ上の変更済みのデータはDBWRがデータファイルに書き出す。
<img width="507" alt="スクリーンショット 2019-07-01 14.56.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449014/20b64173-45b8-9d1d-ed9c-2633d6db1a99.png">
【Composer】インストールしたパッケージの中で最新バージョンがリリースされているか確認する

備忘録として残します。



#■やり方
カレントディレクトリのプロジェクトを確認する場合は、
`composer outdated`で確認ができます。

グローバルを確認する場合は、
`composer global outdated`で確認ができます。

```
C:\projects\hogehoge>composer outdated

egulias/email-validator         2.1.8             ! 2.1.9              A library for validating emails against several RFCs
filp/whoops                     2.3.1             ! 2.4.0              php error handling for cool kids
laravel/framework               v5.8.24           ! v5.8.26            The Laravel Framework.
nesbot/carbon                   2.19.2            ! 2.20.0             A simple API extension for DateTime.
phpdocumentor/reflection-common 1.0.1             ~ 2.0.0              Common reflection classes used by phpdocumentor to reflect the code structure
phpdocumentor/type-resolver     0.4.0             ~ 0.7.1             
phpunit/php-code-coverage       6.1.4             ~ 7.0.5              Library that provides collection, processing, and rendering functionality for PHP...
phpunit/phpunit                 7.5.13            ~ 8.2.3              The PHP Unit Testing framework.
sebastian/global-state          2.0.0             ~ 3.0.0              Snapshotting of global state
symfony/console                 v4.3.1            ! v4.3.2             Symfony Console Component
symfony/css-selector            v4.3.1            ! v4.3.2             Symfony CssSelector Component
symfony/debug                   v4.3.1            ! v4.3.2             Symfony Debug Component
symfony/event-dispatcher        v4.3.1            ! v4.3.2             Symfony EventDispatcher Component
symfony/filesystem              v4.3.1            ! v4.3.2             Symfony Filesystem Component
symfony/finder                  v4.3.1            ! v4.3.2             Symfony Finder Component
symfony/http-foundation         v4.3.1            ! v4.3.2             Symfony HttpFoundation Component
symfony/http-kernel             v4.3.1            ! v4.3.2             Symfony HttpKernel Component
symfony/mime                    v4.3.1            ! v4.3.2             A library to manipulate MIME messages
symfony/routing                 v4.3.1            ! v4.3.2             Symfony Routing Component
symfony/translation             v4.3.1            ! v4.3.2             Symfony Translation Component
symfony/var-dumper              v4.3.1            ! v4.3.2             Symfony mechanism for exploring and dumping PHP variables

C:\projects\hogehoge>
```
[勉強用] React hooksで非同期処理を書く (ステップ5)

## はじめに

[前ステップ](https://qiita.com/daishi/items/873dca99cd18bb86239c)から続き、勉強用のuseFetchを書いていきます。今回のテーマはキャンセル処理です。

## 課題

URLを変更すると、クリーンアップ処理が走り、新しいデータ取得が走りますが、ブラウザが処理をしている前のデータ取得の処理を止めることができたわけではありません。例えば、長いデータを転送中だったり、サーバからの応答を待っていたり、サーバの名前解決をしていたりする場合は、データ取得の処理は継続しています。fetchはpromiseベースのAPIですが、[AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)を使うことで処理をキャンセル(abort)することができます。

## ステップ5: キャンセル処理

```javascript
const useFetch = url => {
  const [result, setResult] = useState({});
  useEffect(() => {
    let cleanedUp = false;
    const abortController = new AbortController();
    const fetchData = async () => {
      try {
        const response = await fetch(url, {
          signal: abortController.signal
        });
        if (!response.ok) throw new Error(`status: ${response.status}`);
        const data = await response.json();
        if (!cleanedUp) {
          setResult({ data });
        }
      } catch (error) {
        if (!cleanedUp) {
          setResult({ error });
        }
      }
    };
    setResult({ loading: true });
    fetchData();
    const cleanup = () => {
      cleanedUp = true;
      abortController.abort();
      setResult({});
    };
    return cleanup;
  }, [url]);
  return result;
};
```

念のため、cleanupでresultも初期化するようにしました。(一瞬以前のresultで描画されるを防ぐため)

## 動作確認

実際に動くコードはこちらです。[codesandbox](https://codesandbox.io/s/vibrant-mclean-qjsm1)
キャンセルの動作はUIで直接は分かりませんので、Chrome DevToolsでNetworkタブを確認してください。

<img width="378" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63327/9cd5849d-d9ea-9117-518b-6a0cc8e3c126.png">

このように、ローディング中にURLを変更すると、canceledとなっていることを確認できると思います。

## おわりに

本コードは勉強用ですので、そのままでは使わないでください。(ちゃんとした実装は[こちら](https://qiita.com/daishi/items/f12f524e9d1df0b52d2b))
さらなる課題と解決は[次のステップ](https://qiita.com/daishi/items/091cd4f8bb86cb5347fa)へ。
pythonでcsvファイルを扱ってみよう

ちょっとCSVファイルを取り扱うことがあったので調べてみました。
モジュールが用意されていて、公式ドキュメントにも使い方が載っています。
[csv --- CSV ファイルの読み書き](https://docs.python.org/ja/3/library/csv.html?highlight=csv#module-csv)

CSVファイルとして次のような内容を想定します。

| 1列目|2列目|3列目|
|:--|:--|:--|
|HOGE|FOO|BAR|
|1|2|3|

ドキュメントの使用例通り、`with open`を使って開いたファイルを`csv.reader`で読み込みましょう。

```動作確認してません.py
import csv

with open('hoge.csv', newline='') as csvfile:
    rows = csv.reader(csvfile, delimiter=',', quotechar='|')
    for row in rows:
        print(row)
# ['\ufeffHOGE', 'FOO', 'BAR']
# ['1', '2', '3']
```

以上のように、行一つが配列一つに対応して出力されます。
`delimiter`パラメータに渡す文字を変更することで、タブ区切りのファイルなども読み込むことができます。

ところで気になるのは`\ufeff`という謎の文字列。当然ながら、元のCSVファイルには含まれていないものです。
これはBOMと呼ばれる「テキストの始まりをプログラムに伝える」ことを目的とする目印なんだそうですね。
以下のようにエンコードを指定するパラメータを渡してあげると、この余計な文字は読み込まれなくなります。

```
with open('hoge.csv', newline='', encoding='utf-8-sig') as csvfile:
```

参考：[\ufeffって？？？](https://qiita.com/msk02/items/c3a1c4a1e1ef94c37228)
Swiftでも直和型したい

- 直和型欲しいよね
  - TypeScriptでいう `let a : string | number` みたいな奴
- Swiftにはありません
- でも `enum` で似たような事ができます


```swift
enum Foo {
    case a(Int)
    case b(String)
}
 
// Fooの値にはInt, Stringどちらも持たせられる
let fooA = Foo.a(123)
let fooB = Foo.b("hello")
 
// パターンマッチで値を取り出す
let printFoo = { (foo: Foo) in
    switch foo {
    case .a(let a):
        print(a)
    case .b(let b):
        print(b)
    } 
}
printFoo(fooA) // 123
printFoo(fooB) // hello
 
// if letで値を取り出す
if case let .b(b) = fooB {
    print(b) // hello
} 
```

## 使用例

### Result

```swift
enum Result<T> {
    case Result(T)
    case Error(Error)
}
```

エラーが出るまで処理を繰り返す、みたいなコードを書いてみる

```swift
enum Result<T> {
    case success(T)
    case failure(MyError)
}

enum MyError: Error {
    case tooSmallError
}

// 10%の確率で失敗する処理
let doit: () -> Result<String> = {
    let n = Float.random(in: 0..<1)
    if n < 0.1 { 
        return .failure(.tooSmallError)
    }
    return .success("SUCCESS!")
}

// 失敗するまで繰り返す
loop: while true {
    switch doit() {
    case .success(let msg):
        print(msg)
    case .failure(let err):
        print(err)
        break loop // 失敗したのでループを抜ける
    }
}
```

### Option

Swiftはoptional value (`Int?`)があるので要らんけど

```swift
enum Option<T> {
    case Some(T)
    case None
}

let printIfSome = { (opt: Option<T>) in
    switch opt {
    case .Some(let x):
        print(x) 
    case .None:
        print("NONE")
    }
}

printIfSome(.Some(123)) // 123
printIfSome(.None) // NONE
```


## 参考URL

- https://qiita.com/hachinobu/items/392c96820588d1c03b0c
- https://mislavjavor.github.io/2017-04-19/Swift-enums-are-sum-types.-That-makes-them-very-interesting/
Oracle Databaseの基本的なアーキテクチャ

#アーキテクチャ（3大要素）
<img width="524" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449014/107b6dd1-7fc5-5be3-ec69-d0bfff979574.png">

|要素|内容 | 
|-----------------|------------------|
|メモリ側 　　　　| SGA、PGA |
|ディスク側　　　　| データベース | 
|プロセス側　　　　|ユーザプロセス、サーバープロセス、バックグラウンドプロセス|

#ディスク側
|要素|内容 | 
|-----------------|------------------|
|データファイル 　　　　|ユーザのデータを保持　（例）社員情報など |
|オンラインREDOログ・ファイル　　　　| DB内で行われたすべての変更履歴を保持　（例）障害からの復旧などで使われる | 
|制御ファイル　　　　|DBを稼働させる上で必要な情報を保持　（例）DB名など|

#プロセス
|要素　　|内容 | 
|--------------------|------------------|
|ユーザプロセス　　　　　　　　|クライアント側で生成される。SQLの発行を行う。 |
|サーバプロセス　　　　　　　　|DBサーバ側で生成される。発行されたSQLを受け取り→処理→SQLの結果をユーザプロセスに返す。 | 
|バックグラウンドプロセス　　　　|Oracleの内部的な処理を行う。　（例）メモリ上で変更されたデータをDB側に書き出すなど|

#メモリ側
|要素　　|内容 | 
|--------------------|------------------|
|SGA　　　　　　　　|共有メモリ領域。 |
|PGA　　　　　　　　|ユーザ固有の非共有メモリ領域。主にソート処理でつかわれる。この領域を使ってもソートが終わらなければ、ディスク側でソート処理を行う | 

|SGAの中身　　|内容 | 
|--------------------|------------------|
|データベース・バッファ・キャッシュ　　　　　　　　|データファイル上のデータを読み込み、データの変更処理をおこなうところ。|
|REDOログ・バッファ　　　　　　　　|データの変更履歴を保持するところ。 | 
|共有プール　　|SQLの解析や解析結果を保持するところ。|

`※解析とは、SQLの構文に間違いが無いかや、指定された表などにアクセスする権限があるかなどの様々なチェックのこと`

#共有プールの中身
|共有プールの中身　　|内容 | 
|--------------------|------------------|
|ライブラリ・キャッシュ　　　　　　　|SQLやそのSQLの解析結果、実行計画を保持（共有SQL領域）。|
|ディクショナリ・キャッシュ　　　　　　|SQLを解析するために必要なデータ・ディクショナリの情報を保持。 |
`※実行計画とは、データにアクセスするための最適な方法 (例)全表スキャンを使うのか、索引スキャンを使うのかなど`

`※データ・ディクショナリとは、DB内の管理表。Oracleの中でも最も大事な表。`

<img width="332" alt="スクリーンショット 2019-07-01 15.31.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449014/2b959d78-54d0-93c6-29de-e1d93e2caf32.png">

SQLの処理の流れは[こちら](https://qiita.com/ghogho-seki/items/5105afe10fdab8345026)