OmniAICreator/Qiita-1.07M huggingface dataset:
Flutter カメラの映像を表示させるサンプル


## 実現したいこと
カメラの映像を表示させる

## 動作の様子
![IMG_5443.2020-01-20 21_56_06.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6327/ccc5050b-c816-b43c-08a9-e485dbe3821e.gif)

## 動作コード
こちらに一式用意しています。
https://github.com/quqjp/flutter-test

コード箇所はこちら。
https://github.com/quqjp/flutter-test/tree/master/lib/sample3

## 利用プラグイン
Camera Plugin
https://pub.dev/packages/camera

installing に従い導入する
https://pub.dev/packages/camera#-installing-tab-

## コード
そのまま CameraPreview widgetを取り付けると、表示の比率がおかしくなってしまったので、カメラの描画の比率でAspectRatio widget作ってその中で表示させることでうまくできた。

```dart
//dart package
import 'package:flutter/material.dart';

//third party package
import 'package:camera/camera.dart';

//my package

//same package

//
// カメラの映像を表示させるサンプル
//
class Sample3Page extends StatefulWidget {
  Sample3Page({Key key, this.title}) : super(key: key);

  // タイトル
  final String title;

  @override
  _State createState() => _State();
}

class _State extends State<Sample3Page> {
  //カメラリスト
  List<CameraDescription> _cameras;

  //カメラコントローラ
  CameraController _controller;

  @override
  void initState() {
    super.initState();

    initCamera();
  }

  //
  // カメラを準備
  //
  initCamera() async {
    _cameras = await availableCameras();

    if (_cameras.length != 0) {
      _controller = CameraController(_cameras[0], ResolutionPreset.high);
      _controller.initialize().then((_) {
        if (!mounted) {
          return;
        }

        //カメラ接続時にbuildするようsetStateを呼び出し
        setState(() {});
      });
    }
  }

  ///
  ///
  ///
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      //
      body: Container(
        alignment: Alignment.center,
        child: _controller != null && _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: CameraPreview(_controller),
              )
            : Container(),
      ),
    );
  }
}
```
【Sentry】Vue.js Integration まとめ

#【Sentry】Vue.js まとめ

## 1. Setup

```js:entry.js
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  integrations: [new Integrations.Vue({ Vue, attachProps: true })]
})
```

## 2. Set user info
```js:auth.js
const user = data.user
Sentry.configureScope(scope => {
  scope.setUser({
    id: user.staff_id,
    username: user.account,
    email: user.email_account
  })
})
```

## 3. Catch api error
```js:action.js
try {
  dispatch('get api')
} catch (error) {
  Sentry.captureException(error)
}
```
__init__.py を省略してはいけない

Python 3.3 から `__init__.py` を省略して良いと思っている人が多いですが、 **省略しないでください。**


## なぜ勘違いが起こったのか

Python 3.3 から、 [PEP 420](https://www.python.org/dev/peps/pep-0420/) で Implicit namespace package が追加されました。

**Namespace package とは普通の package ではありません。** 特殊な用途のもので、ほとんどの人にとっては **知る必要すらない** ものです。

どうしても知りたければ、上の PEP 420 と [packaging guide](https://packaging.python.org/guides/packaging-namespace-packages/) を読んでください。

## `__init__.py` を省略する弊害

普通の package で Implicit namespace package を乱用すると弊害があります。

### import が遅くなる

通常の package とは違うので import が package 内のモジュールを探すのが遅くなる可能性があります。
また、確率は低いですがその探索順序の違いによってなにか問題が起こる可能性もあります。


### ツールが対応していない

例えば標準ライブラリの unittest で test モジュールを自動で探す機能は `__init__.py` がないディレクトリの中を探しに行きません。 (https://bugs.python.org/issue29642 を参照)

**もし対応しようとしたら、 `__init__.py` がないディレクトリも全部再帰的に探索しないといけなくなります。そのディレクトリは node_modules で数十万のファイルやディレクトリが入っているかもしれません。そのディレクトリがネットワークマウントされていたりしたらどれだけ遅くなるでしょうか。**

Implicit namespace package を通常の package として **乱用するユーザーのためにそんな速度低下は到底受け入れられません。**

同じ理由で lint 等のツールでも、自動でパッケージやモジュールを探すような機能が Implicit namespace package を探してくれると期待してはいけません。

背景を知らずに要望を受け入れて対応しているツールもあるかもしれませんが、「対応すべき」「対応しろ」というIssueやPull Requestを送るのはメンテナや他のユーザーに迷惑なのでやめましょう。
Cypress で form 送信後の画面を待ち受けたい

既存の WP 製システムにリグレッションテストを作っていく際に必要になったので調べました。

```js
// form を submit で送信
cy.get('#my_submit_button').submit()

// `location.pathname` に
// 指定の文字列 (/path/to/new/page) が現れる事をテストする (ここでは最大10秒待つ指定)
cy.location('pathname', {timeout: 10000})
    .should('include', '/path/to/new/page')

// 遷移後の画面のテスト
cy.click('#new_page_button')
```

## 参考

- [How to wait for page finish reloading after click? · Issue \#1805 · cypress\-io/cypress](https://github.com/cypress-io/cypress/issues/1805)
- [location \| Cypress Documentation](https://docs.cypress.io/api/commands/location.html#Syntax)
- [should \| Cypress Documentation](https://docs.cypress.io/api/commands/should.html#Syntax)
- [Assertions \| Cypress Documentation](https://docs.cypress.io/guides/references/assertions.html#BDD-Assertions)
CREATE TABLEで失敗した話（メモ）

## やったこと

[これ](https://techacademy.jp/magazine/5113)の動画を参考にして

```
mysql> creata table book {
  id int,
  b_name varchar(255),
  name varchar(255),
  c_name varchar(255),
  year char(30)
};
```

で実行してみたがダメだった。

[これ](https://qiita.com/knife0125/items/bb095a85d1a5d3c8f706)を参考にしてみたら

```
mysql> CREATE TABLE `book` (
  `id` int(10),
  `b_name` varchar(255),
  `name` varchar(255),
  `c_name` varchar(255),
  `year` char(30)
);
```

`Query OK, 0 rows affected, 1 warning (0.02 sec)` で成功。


データベース作成のベースとなった記事は[こちら](https://qiita.com/knife0125/items/bb095a85d1a5d3c8f706)
Linux上でIntelliJを使っていて、日本語入力ができなくなった時の話

# TL;DR

* IntelliJを使っている時に、気づくと日本語入力ができなくなっていた（IMEが切り替わらない）
* IntteliJを起動する時のJavaを切り替えると直った


# 環境

Ubuntu Linux 18.04 LTS。

```shell
$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 18.04.3 LTS
Release:	18.04
Codename:	bionic
```

IntelliJのバージョン。

* 2019.3 Community Edition


# 事象と解決方法

起こっていた事象は、TL;DRに同じ。日本語入力に切り替えられなくて、困っていました。

IMEは、Mozcを使っています。

少し調べたら、以下のような記事を見つけたので、IntelliJの起動に使うJavaを切り替えて試してみました。

[IntelliJ IDEA 2019.2等でmacOS環境において日本語入力中に発生する問題と回避策](https://blog.jetbrains.com/jp/2019/07/30/2025)

IntelliJにバンドルされている（デフォルトで起動に使われる）Javaは、こちら。

```shell
jbr/bin/java --version
openjdk 11.0.5 2019-10-15
OpenJDK Runtime Environment (build 11.0.5+10-b520.17)
OpenJDK 64-Bit Server VM (build 11.0.5+10-b520.17, mixed mode)
```

以下のドキュメントを見て、今回は環境変数で設定する方法を選択。

[Change boot Java runtime for IntelliJ IDEA](https://www.jetbrains.com/help/idea/switching-boot-jdk.html)

[IntelliJ IDEAの起動Javaランタイムを変更する﻿](https://pleiades.io/help/idea/switching-boot-jdk.html)

OpenJDK 8で起動するようにしました。

```shell
$ IDEA_JDK=/usr/lib/jvm/java-1.8.0-openjdk-amd64
```

今回は、これで解決、と。
新旧Edge共存環境で旧Edge(レガシー)が起動しない！

## 概要

巷の情報通りに新旧Edgeの共存環境を作ったが、Windows Update後に旧Edgeが起動しなくなったので情報共有。無理やりな対処法も分かったので紹介。

## モチベーション

新Edge(Chromium)の正式版が公開され、webアプリ開発をしていた者としては、色々な思いを抱きますね。とにもかくにも新Edgeを試したいわけですが、旧Edge(Legacy)も引き続き動作テストで起動したい。しかし、普通にWindows Updateで配布されると、旧Edgeは消えてしまうそうです。

これに関して、巷の情報で出回っている対策は２つ：

1. 自動Updateのブロック[^1]
2. 新旧Edgeの共存ポリシー設定[^2]

これらを行ってから、新Edgeをインストールすると、"Microsoft Edge レガシー"なるショートカットがスタートメニューに姿を現します。最初はこれで旧Edgeも立ち上がりました。

## Windows Updateの悪夢

数日後、Windows Upadateによって、KB4528760, KB890830がインストールされました。再起動を要求され、その後、旧Edge(レガシー)は件のシートカットからは立ち上がらなくなったのです。

試行錯誤を記録しておくと、

- 新Edgeをアンインストールすると、旧Edgeが復活し、起動するようになる。
- 新Edgeをアンインストールせず、KB4528760をアンインストールしても旧Edgeは起動できない。KB4528760はシステム関係らしいので怪しんでいたのですが。
- KB890830のアンインストールは試していません。KB890830は「悪意のあるソフトウェア削除ツール」。これが原因だとすると、旧Edgeには悪意があるんかい！

## 旧Edgeを無理やり起動させる方法

上記のKB4528760も新Edgeもインストールされた状態で、旧Edgeを無理やり起動させる方法。今のところコマンドプロンプトで次のコマンドを打つと上手く起動する。

```
# 空のページを開く場合
cmd.exe /C start microsoft-edge:

# 指定のURLページを開く場合
cmd.exe /C start microsoft-edge:https://qiita.com

```

これは旧EdgeがUWPアプリであることを利用した方法の模様[^3]。ショートカットを作ってこのコマンドをスタートメニューに登録してもいいですね。

## なんだかんだで旧Edge好き

旧Edgeはずっと使ってきたので、やはり愛着があります。IMEのcomposition系eventでろくな情報を返さなくても、その七転八倒の対策がWin32API時代からのWindowsっぽくて好き。プログラミングって根性だと感じる瞬間ですよね。あとは、Chromium系よりもデバッガーがVisual Studioに近くてが使いやすいと感じます。

Legacyってのも、それはそれでポケgoユーザーには響くネーミングでいいですよね。


## 参考リンク
[^1]: [Microsoft Edge の自動配布を無効にするための Blocker Toolkit](https://docs.microsoft.com/ja-jp/deployedge/microsoft-edge-blocker-toolkit)

[^2]: [Access Microsoft Edge Legacy after installing the new version of Microsoft Edge](https://docs.microsoft.com/en-US/deployedge/microsoft-edge-sysupdate-access-old-edge)

[^3]: [Microsoft Edgeをコマンドラインから起動する](https://news.mynavi.jp/article/win10tips-86/)
Vue CLIのパッケージマネージャーがnpmからyarnに変わっていて苦労した

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


昨日、Vue CLIで新しいプロジェクトを作ろうとしてたら、予想以上に苦労しました。
結論から言うとnpmからyarnにしとこうね！！って話だったんですが、
Vue CLI4でvue createが上手くいかない！！って人は参考になるかもしれないので、詳しくまとめておきます。

# Vue CLIでプロジェクトを作る！！



まず、Vue CLIをインストール

```
npm install -g @vue/cli
```



続いてVue cli-service-globalのインストール

```
npm install -g @vue/cli-service-global
```



これで、Vue CLIを動かす準備OK！！
プロジェクトを作っていきます。


```
vue create hoge
```



すると、以下のエラー文が出てプロジェクトを作れません！！

```
Error: spawn yarn ENOENT
```



？？？

`spawn yarn ENOENT`的な物は見た事ないし、ググってみても日本語の文献が少なすぎて全く意味がわからない！！


#Error: spawn yarn ENOENTはなぜ？？


Vue CLIのインストールの段階で、Warningにcore.js3より前のものがVueCLIに含まれてるけど、良くないよー！！的なものはあったけど、これはVueCLI側がまだフォローできていない所っぽいので、今回は無視！！


nodeやnpmのバージョンを最新にupdateしてもエラーは消えないので、依存関係は原因ではなさそう。

# yarnがなんか怪しそう！！

エラーコードにあったyarnを調べてみるとこんな記述が

>Yarnはnpmに代わるパッケージマネージャーとして発表された後発のパッケージマネージャーで、npmが抱えていた多くの改善点を改善したパッケージマネージャーです。


yarn知らんかった！こんなものがあったのか。
Vue CLIの設定(~/.vuerc)を調べてみると、、、

```
{
  "useTaobaoRegistry": false,
  "packageManager": "yarn"
}
```

パッケージマネージャーのデフォルトが`yarn`に設定されていました！！
yarnじゃなくてnpmを使ってたからうまくいかなかったんですね。


デフォルトがyarnなので、本当はyarnをインストールして進めていくのが良いのですが、今回は設定をnpmに変えて進めていくことにしました。

```
 "useTaobaoRegistry": false,
  "packageManager": "npm"
```

で、もう一回vue create hogeしたら上手く行きました！！！

めでたしめでたし。

時間見つけてnpmからyarnに切り替えよう。
【初心者向け】Pythonによる簡単な文書作成

Pythonを業務自動化するために使いたいという方は多いのではないでしょうか。
そこで、Pythonによって文書を作成する方法を具体例と共に初心者向けに解説しました。
私が試行錯誤して苦労した点をわかりやすく説明したいです。
例としてはリストから文書作成

　Python3系で動作します。
# 例1:リストから文書作成
■■やりたいこと■■

```python:list.py
 Name = [“Anago”, ”Ikura”, ”Unagi”]
```

みたいなリストから

```t:text0.txt
 Hello, I am Anago
```
```t:text1.txt
 Hello, I am Ikura
```
```t:text2.txt
 Hello, I am Unagi
```
っていう感じのファイルを作りたい。

■■実装■■
次のように書けます。

```python:say_hi.py
 Name = ["Anago", "Ikura", "Unagi"]
 for i, name in enumerate(Name):
     with open(f"text{i}.txt", "w") as file:
         file.write(f"Hello, I am {name}")
```
■■解説■■
■１行目 Name = ["Anago", "Ikura", "Unagi"]
　ただの文字のリストです。

■２行目　for i, name in enumerate(Name):
　enumerateという組み込み関数(importなしに使える関数)を使っていて、
これはリストをあたえると、何番目の要素であるかを表すインデックスと要素を返してくれます。
インデックス、要素の順です。
ループ内でi, nameがそれぞれインデックス、要素を表す変数になります。

■３行目　with open(f"text{i}.txt", "w") as file:
　ここは複雑です。
まず、with構文を使っています。
本当はファイルをopenをしたらcloseをしなければいけないのですが、これを省略することができます。
open(f"text{i}.txt", "w") as file
はopenでファイルを開く処理をして、得られたファイルオブジェクト（ファイルを表す変数のようなもの）というものにfileという名前をつけています。
openは２つの引数を取っています。
１つめはファイル名を表しています。
f"text{i}.txt"はf-stringsというもので、""でくくった文字列中の{i}で変数iが代入されます。これによって、ループによって異なるファイル
text0.txt
text1.txt
text2.txt
に書き込むことができます。
２つめの"w"は、１つめの引数で指定したファイル名のファイルがなければ、新規作成、あったら上書き保存することを表しています。

■４行目　file.write(f"Hello, I am {name}")
file.write
は3行で得たファイルオブジェクトfileに対して書き込むことを表しています。
中身のf"Hello, I am {name}"はこれもf-stringsで{name}によってnameが代入されます。





#参考文献
参考にさせていただいたサイト

[ファイル読み書き file open read write ](https://python.civic-apps.com/file-io/)

[pythonでファイルの読み書き](http://python-remrin.hatenadiary.jp/entry/2017/05/02/182203)

[python for文を初心者向けに解説！for文基礎はこれで完璧](https://udemy.benesse.co.jp/development/python-for.html)

[f-strings の使用例]
(https://qiita.com/QUANON/items/77ce3a9e7e33dbed489b)
styled-componentsのas propとforwardedAsについて整理してみた

# はじめに
styled-componentsの```as prop```と```forwardedAs```への理解がふわっとしていたため、この機会に整理してみた。
特に```forwardedAs```は本家サイトを見ても理解しにくかったので、、、今回ちゃんと整理した。

# as propってなに？
v4から追加された機能で、レンダリングする要素のタグを動的に変更できる機能。
styled-componentsでスタイルは使い回して、レンダリングされるタグだけ変更したい場合に利用する。

「ボタンとリンクを別で実装するが、同じスタイルを適用したい」などのユースケースで非常に役立つ。
同じスタイルのコンポーネントを作り分けなくてよくなるのはありがたい。

# as propはどうやって書く？
## ざっくり書くとこんなかんじ
```javascript
Hoge = styled.div``;    // .Hoge(div)
Piyo = styled(Hoge)``;  // .Piyo(Hoge + Piyo)(div)
<Piyo as="h1" />  　　　 // .Piyo(Hoge + Piyo)(h1)

Hoge = styled.div``;    // .Hoge(div)
Piyo = () => <Hoge />;  // .Piyo(() => <Hoge /> + Piyo)(div)
<Piyo as="h1" />  　　　 // .Piyo(() => <Hoge /> + Piyo)(h1)
```
## 具体的に書くとこんなかんじ
```javascript
import styled from "styled-components"
import { Link } from "react-router-dom"

// divなど、汎用的なタグで定義しておくと使い回しやすいかも。
const Base = styled.div`
  color: red;
`;

// divのまま使ってもOK
<Base>Hello World!</Base>

// spanとして定義
<Base as="span">hoge</Base>

// linkとして定義
<Base as={Link} to="home">hoge</Base>

// 継承も可能
const FontBold = styled(Base)`
  font-weight: bold;
`;

<FontBold as="span">hoge</FontBold>
<FontBold as={Link} to="home">hoge</FontBold>

// 継承はこんな書き方もできる
const FontLarge = styled(() => <Base />)`
  font-size: large;
`;
```

# forwardedAsってなに？
v4.3から追加された機能で、```styled（）```に```as prop```を渡す場合に利用する機能。
別コンポーネントをラップする場合、```forwardedAs```を使用してラップされたコンポーネントに```as prop```を渡すことが可能。
※拡張スタイル付きコンポーネントでは```as prop```を使用しても親スタイルは継承されない。

# forwardedAsはどうやって書く？
```javascript
import styled from "styled-components"

const Cell = styled.td`
  background-color: ${props => props.bgColor || "blue"};
`;

const StyledCell = styled(Cell)`
  color: red;
`;

const SomeCell = ({ as, ...props}) => {
  return <StyledCell forwardedAs={as} {...props} />;
};

const ExtendedCell = styled(SomeCell)`
  border: 1px solid red;
`;

render(
  <table>
    <tr>
      <ExtendedCell bgColor="orange" forwardedAs="th">
        hoge
      </ExtendedCell>
    </tr>
  </table>
);
```

# まとめ
モヤモヤが少しスッキリした気がする。
あと、複雑なコードを極力書かないで済むような設計にしたいと改めて思った。
Spring BootでSSE

Spring BootでSSE（text/event-stream）やりてえ〜。やりてえよね。

ということでおあつらえ向きな`SseEmitter`がある。

## 簡単な使い方

1秒ごとに現在日時を返すやつ。非同期実行自体は https://qiita.com/takkkun/items/1364fdaac8ae2b9fdc01 を参照。

```kotlin
@Service
class SseService {

  @Async
  fun emitDateTime(emitter: SseEmitter) {
    var finished = false
    while (!finished) {
      TimeUnit.SECONDS.sleep(1)

      try {
        sse.send(LocalDateTime.now().toString())
      }
      catch (e: IOException) {
        finished = true
      }
    }
  }
}

@Controller 
class SseController(private val service: SseService) {

  @RequestMapping(/* ... */)
  fun sse(): ResponseBodyEmitter {
    val emitter = SseEmitter()
    service.emitDateTime(emitter)
    return emitter
  }
}
```

これで以下のようなレスポンスが返ってくる。

```
$ curl -i 'http://localhost:8080/sse'
HTTP/1.1 200
Content-Type: text/event-stream;charset=UTF-8
Transfer-Encoding: chunked
Date: Mon, 20 Jan 2020 07:01:31 GMT

data:2020-01-20T16:01:32.155751

data:2020-01-20T16:01:33.164949

data:2020-01-20T16:01:34.168721

data:2020-01-20T16:01:35.174836

data:2020-01-20T16:01:36.179743

...
```

## タイムアウト

デフォルトのタイムアウトはSpring Bootが定めている。具体的には`spring.mvc.async.request-timeout`というプロパティで。単位はミリ秒。

もしくは`SseEmitter`のコンストラクタでも指定できる。この場合、コンストラクタに与えた値が優先される。

無期限にしたい場合は`0`を指定。

実際にタイムアウトが起きた場合は、`SseEmitter#onTimeout`で指定したコールバックが呼ばれ、`AsyncRequestTimeoutException`が投げられる。

## クライアントから切断

クライアントから切断された瞬間にそれを検出する術はない、と思う。

ただ、クライアントから切断されている状態で`SseEmitter#send`を呼び出すと、`IOException`（実際はそのサブクラスの`ClientAbortException`なはず）が投げられるので、それで検出することは可能。

最終的に`SseEmitter#onError`で指定したコールバックが呼ばれるので、それでも良いかな？

ちなみに`@Async`の中でハンドルされていない例外が発生すると、非同期処理実行の仕組みの方でログを記録するので、ちゃんとハンドルしてあげた方がベターだと思う（Javaだと`IOException`がチェック例外なので強制されると思うけど）。

## サーバーから完了

`SseEmitter#complete`を呼ぶとレスポンスが完了する。

クライアントから切断することがほとんどだとは思うけど、用途によってはあり得るので一応。
Flask-Python实现简单网页

#例子1：最简单的web启动
##最简单实现helloworld
```hello.py
# start source block
from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
	return 'Hello World!'

def main():
	# 开发用web服务器启动
	app.run(host='127.0.0.1', port=5678, debug=False)


if __name__ == '__main__':
	# 调用main启动函数
	main()
# end source block
```

上面代码保存为hello.py
命令行运行 $ python hello.py
在浏览器访问地址：http://localhost:5678
正常页面显示 Hello World!

#例子2:Blueprint启动views目录下的py文件和html模板

##目录结构
>hello/
--app.py
--views/
----__init__.py # 作为软件包定义
----view_hello.py
--templates/
----view_hello.html

##主启动app.py文件
```app.py
# start source block
from flask import (
    Flask,
    Blueprint,
)

# 导入目标页面的view
from views import view_hello

app = Flask(__name__)

# 注册目标页面的子app 所有对象页面都会在根地址root_url/hello/出现
app.register_blueprint(view_hello.app, url_prefix='/hello')


def main():
    # 开发用web服务器启动
    app.run(host='127.0.0.1', port=5678, debug=False)


if __name__ == '__main__':
    # 调用main启动函数
    main()
# end source block
```

#html数据先是用服务器端处理view_hello.py
```view_hello.py
# start source block
from flask import (
    Flask,
    Blueprint,
    render_template,
)

app = Blueprint(
    'views.hello',
    __name__,
    template_folder='templates',
)


@app.route('/sayhello')
def say_hello():
    page_title = 'hello world'
    page_html = 'view_hello.html'

    res = {
        'page_title': page_title,
        # 'data_lst': data_lst, 其他页面表示数据
    }

    return render_template(
        page_html,
        res=res,
    )
# end source block

__init__.py
# start source block
# package
# 只有注释
# end source block
```

#前端表示用view_hello.html
```view_hello.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>{{res.page_title}}</title>

  </head>
  <body >
你好 世界！   
  </body>
</html>
```
命令行运行 $ python app.py
在浏览器访问地址：http://localhost:5678/hello/sayhello
正常页面显示 标题：hello world! 页面内容：你好 世界！
TypeScriptについて学ぶ

## TypeScriptって？
マイクロソフトが開発したJSのスーパーセット！
静的型付け、クラスベースが特徴。

->うっかり者の私みたいな人はぴったり！（普段からJSよりC#の方が好き..とか思っている）
TSについてざっくり学んでみます。
【公式】 https://www.typescriptlang.org/docs/handbook/basic-types.html
（基本的に公式に書いてあることまんまです、自分のメモ的感覚なのでご了承ください）


## 5分で始めるtypescript
【参考】https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

😨typescriptとか、どうせあれでしょ、設定が大変なんでしょ

と思っていましたが、5分で始めるステキチュートリアルがあったのでやってみます。

##　インストール
Visual Studioのプラグインでもインストールできるそうです。（すごいな）
今回はNPMからインストールしてみます。

```
npm install -g typescript
```

hello.tsファイルを作って`console.log('hello,TS!')`
と書いておきます。
拡張子が`.ts`でも普通のJSは通常通り使えます。まさにスーパーセット！

次のコマンドを使ってコンパイルします。

```
tsc hello.ts
```

###　余談
問題なく進んだ人は次に進んで大丈夫です。
私は`tsc: command not found`の洗礼を受けました。。
https://stackoverflow.com/questions/39404922/tsc-command-not-found-in-compiling-typescript
同じ疑問のところにいい解決方法が書かれていたので引用させていただきます。

>restart the terminal
restart the machine
reinstall nodejs + then run npm install typescript -g
If it still doesn't work run npm config get prefix to see where npm install -g is putting files (append bin to the output) and make sure that they are in the path (the node js setup does this. Maybe you forgot to tick that option).

- terminalの再起動（私はこれで治りました）
- PC自体の再起動
- nodejsを再インストールし、またtypescriptをインストール
- パスとファイル場所のミス
一番最後に関しては https://qiita.com/quzq/items/ac5a9258ea671d0a07e4
この辺を参考にすればいけるんじゃないかと思います。

### 型を使ってみる
無事コンパイルできたら、型を早速使ってみます！

```ts
function greeter(person: string) {
  return `Hello,${person}`
}

const user = 'Tom Hanks'
console.log(greeter(user))
```
関係ありませんが、トムハンクスが出る映画は面白いですね。
`person: string`　で文字列の型をしています。（これをType annotationと呼ぶようです。）

試しにuserに数値の`111`を入れると、コンパイル時ちゃんとエラーになります。

```
hello.ts:8:21 - error TS2345: Argument of type '111' is not assignable to parameter of type 'string'.

8 console.log(greeter(user))
```
ちなみにエラーであってもコンパイルはちゃんと行われます。

### インターフェース
オブジェクトの型を定義する使い方をみてみます。

```ts
interface Person {
  firstName: string
  lastName: string
}

function greeter(person:Person) {
  return `Hello,${person.firstName} ${person.lastName}`
}

const user = { firstName: 'Tom', lastName: 'Hanks'}

console.log(greeter(user))
```
greeterの引数の型定義を、interfacrのPersonがまかなってくれています。

### クラス
アクセス修飾子の`public`ですが、省略可能です。
クラス外からその引数にアクセスすることができます。
`private`を指定するとクラス外からアクセスできなくなります。

```javascript
class Student {
  fullName: string
  constructor (
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ){
    this.fullName = `${firstName} ${middleInitial} ${lastName}`
  }
}

interface Person {
  firstName: string
  lastName: string
}

function greeter(person: Person) {
  return `Hello, ${person.firstName} person.lastName`
}

const user = new Student('Jane', 'M.', 'User')

console.log(greeter(user))
```

５分チュートリアルの内容は以上になります。

## ReactにTSを導入したい
このリポジトリで練習します。
おなじみのReactチュートリアルをTSに変換するというものです。
【参考】https://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide

日本語で良さそうなのも見つけました。https://qiita.com/m0a/items/d723259cdeebe382b5f6

TSは入り口はとても易しいですね。
Teratermで自動SSHログインするためにとりあえずttlファイルにこれを書く

TeraTermでLinuxサーバにログインするときに聞かれるユーザー名とパスワードを、いちいち入力することが面倒な時は、自動ログインマクロを作っておくと楽です。

以下、SSHでログインする場合のソースを置きましたので、コピー＆ペースト後、username,hostname,passwordを各々書き込んで、「ttlファイル」に保存してご利用ください。

鍵が必要であったり、プロキシを通過するようなケースですと、別個編集が必要となります。


```
username = '' #ログインユーザー名
hostname = '' #ホスト名（IPアドレスの場合が多い）
password = '' #ログインパスワード

msg = hostname
strconcat msg ':22 /ssh /2 /auth=password /user='
strconcat msg username
strconcat msg ' /passwd='
strconcat msg password
connect msg
```
カスタムビューの実装でよく使うヘルパー関数を晒す

カスタムビューの実装など、 `onDraw` を継承して描画を自前で行う場合には、自分で描画位置の計算をしないといけないので計算量が多くなりがちです。

そういった場合に自前でちょっとしたヘルパー関数を用意しておくと便利なので、自分が使っている関数を紹介します。
（ `Float` のバージョンのみを記載していますが、状況に応じて適宜 `Int` のバージョンなども作ると便利です。）

## constrain()
`value` が `min 〜 max` の間に収まるようにする関数です。こいつを一つ挟んでおくことでバリデーションになるので非常に重宝しています。

```kotlin
fun constrain(value: Float, min: Float, max: Float): Float {
    return max(min(value, max), min)
}
```

## map()
`srcStart 〜 srcStop` の範囲にある値を `dstStart 〜 dstStop` の範囲に変換します。グラフを描画したいけれど、グラフの座標系と画面上の座標系が違う...といった場合にサクッと変換を書けるので非常に便利です。（後述する `lerp` と `norm` は `map` の変化系です。）

```kotlin
fun map(value: Float, srcStart: Float, srcStop: Float, dstStart: Float, dstStop: Float): Float {
    if(srcStop - srcStart == 0f) {
        return 0
    }
    return dstStart + (value - srcStart) * (dstStop - dstStart) / (srcStop - srcStart)
}
```

## lerp()
`lerp` は `0.0f 〜 1.0f` の範囲の値を `start 〜 stop` の範囲に変換します。 例えば、２点間を3:1に分割した点の座標を求めたいといった場合に `lerp(0.75f, 0, 100f)` のように書けば、すぐに座標を計算できます。

```kotlin
fun lerp(amt: Float, start: Float, stop: Float): Float {
    return start + (stop - start) * amt
}
```

## norm()
`norm` は `lerp` の反対で、 `start 〜 stop` の範囲にある値を `0.0f 〜 1.0f` の範囲に変換します。

```kotlin
fun norm(value: Float, start: Float, stop: Float): Float {
    return value / (stop - start)
}
```

## おわりに
ヘルパー関数の部分だけを他の描画ロジックから分離することでコードの見通しが良くなり、テストも容易になるのでおすすめです。

自分のプロジェクトではこんなヘルパー関数を使っているよ、などコメントで教えていただけると喜びます :pray:
displayについて


<h1>displayについて</h1>
<b>displayには4種類があります。</b>
・block
・inline
・inline-block
・none

<img width="370" alt="block.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556803/497d56b4-859e-cc34-037a-44ab6f3e5954.jpeg">

<img width="372" alt="inline.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556803/c996ba6d-bdfe-49ea-c4ae-4a5674c82c84.jpeg">

<img width="375" alt="inline-block.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556803/c1b258ef-b7c7-af46-2216-c74a40591176.jpeg">

***

display:inline	　　　
指定した要素をインライン要素にする	
改行なくなり横並びにできる。幅・高さ・上下余白を指定できない

display:block	　　　
指定した要素をブロックレベル要素にする
改行ができて縦並びになる。幅・高さ・余白を指定できる

display:inline-block　
指定した要素をインラインとブロックレベルの中間の性質にする	
インライン要素のように改行がつかず横並びになるが、ブロックレベル要素のように幅・高さ・余白を指定できる
Spring Bootで非同期に処理を実行する

ミドルウェアを使って非同期とかではなく、単にSpring Boot単体で非同期に実行する方法。以下の点を守ればOKなはず。

- `@Configuration`なクラスに`@EnableAsync`アノテーションを付与
- 非同期実行用のスレッドをどう生成するかを定めるため、`Executor`を定義
- 非同期に実行したいメソッドに`@Async`アノテーションを付与

## `@Configuration`なクラスに`@EnableAsync`アノテーションを付与

`@EnableAsync`アノテーションがないと非同期実行できないため、必ず付与する。

```kotlin
@Configuration
@EnableAsync
class AsyncConfig {
  // ...
}
```

`@Configuration`なクラスなら何でも良いため、以下でもOK。

```kotlin
@SpringBootApplication
@EnableAsync
class SomeApplication
```

が、`Executor`を定義するためにも専用の設定に切り出しておいた方が何かと便利だと思う。

## 非同期実行用のスレッドをどう生成するかを定めるため、`Executor`を定義

デフォルトだと非同期実行をしようとするたびにスレッドを生成する仕様。スレッドプールなどを使用するには、そうなるよう定義を加える必要がある。

```kotlin
@Configuration
@EnableAsync
class AsyncConfig : AsyncConfigurerSupport() {

  @Bean
  override fun getAsyncExecutor(): Executor {
    val executor = ThreadPoolTaskExecutor()
    // initialize executor
    return executor
  }
}
```

## 非同期に実行したいメソッドに`@Async`アノテーションを付与

そのまんま。

```kotlin
@Service
class SomeService {

  @Async
  fun execute() {
    // ...
  }
}
```

ちなみにクラス自体に`@Async`アノテーションを付与すればメソッドすべてが非同期実行になる。

## 余談

動作確認のために超適当に以下のようなコードを書いたら非同期実行にならなくて困った。

```kotlin
@Controller
class SomeController {
  @RequestMapping(/* ... */)
  fun execute(): String {
    // ...
    val service = SomeService()
    service.execute()
    // ...
  }
}
```

これは`SomeService`のインスタンスを直接生成しているのが原因。普通は下記のようにDIコンテナ経由で取得するのが自然なはずなので、困ることないとは思うけど一応。私がSpring Bootに不慣れというのがバレバレだな！

```kotlin
@Controller
class SomeController(private val service: SomeService) {
  @RequestMapping(/* ... */)
  fun execute(): String {
    // ...
    service.execute()
    // ...
  }
}
```
1.Salesforce Training(開発)

#【前言】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/de52dfb7-eccf-2235-fa2c-1b6f97fbfedd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/9e985d06-7648-0c02-373b-ee396917569b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/3a6ce9f2-0992-6c6f-16c1-3b36640f1d05.png)

#【Training概要内容】
##第 1 次课（時間：8時間）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/9ca6effb-8e5d-fe7f-1d68-532f1b5a49e0.png)

##第 2 次课（時間：8時間）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/9b5248ca-91d6-93da-8591-3d092245fbf2.png)

##第 3 次课（時間：8時間）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/bcceb245-c177-5618-7046-07ad663803f4.png)

##第 4 次课（時間：8時間）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/0f9416cd-0781-e2b4-a608-d631c66b956d.png)

#【部分课件内容】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/ceff48a4-5fd7-7781-95e8-f888b2f3a7f9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/5ce17d52-77ed-8f78-0386-b0413e98cce5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/c3c013e5-ec94-d29e-294e-aaa2205dff13.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/d2046806-edf6-415f-a79d-aeade27a101c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/b1b3036a-bdbb-8f48-e14e-fb810a8ff036.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/27bb8b4a-c0e7-f364-a008-4ee6ffead3ce.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/b760721d-1de2-7812-8e52-a2adb9ac6396.png)

#【Fly Ahead】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/cac02be7-1292-f9a5-f5eb-ed53749544fa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548773/ad9a705b-a9b2-6f53-b967-f09b44b679be.png)
Microsoft Certified: Azure Security Engineer Associate を取得しました

Azure Security Engineer Associate を取得しました。
試験の概要や勉強したことなどをまとめておきます。

# Azure Security Engineer Associate とは
2019年夏頃に Azure のロールベースの資格体系に追加された、セキュリティエンジニア向けの資格です。
大別して以下の4トピックのスキルを評価するものとなっています。
- アイデンティティ管理
- IaaS/PaaSのセキュリティ
- セキュリティの運用管理
- アプリケーションのセキュリティ

詳しくは以下を参照ください。
https://www.microsoft.com/ja-jp/learning/azure-security-engineer.aspx

# 認定パス
Azure Security Engineer Associate の認定には、AZ-500 の合格が必要となります。
以前の資格体系(MCP, MCSA, MCSE等)では資格と試験科目が1:1の関係ではなく、一つの資格を取得するために複数の科目の合格が必要であったり、その組み合わせに選択の余地を持つケースが多くありました。
一方で、新しいロールベースの資格体系では資格と試験科目が1:1の関係となっているものが比較的多くなっています。

AZ-500 の試験が正式にリリースされたのは2019年の夏頃でしたが、そこから4ヶ月程度経った2019年12月には試験範囲がアップデートされています。
以前の資格体系と比べて、Azure の各種機能追加/リリースに合わせた試験内容のアップデートは以前よりも短いサイクルで回るようになっていると見受けられます。

https://www.microsoft.com/ja-jp/learning/exam-AZ-500.aspx

# 受験概要
上記のとおり、今回は AZ-500 の試験を受験してきました。

受験時間　　210分
試験問題数　明記されていないようです（私が受験したときは44問でした）
合格ライン　700点
受験言語　　日本語

# 勉強方法
まずは [AZ-500](https://www.microsoft.com/en-us/learning/exam-AZ-500.aspx) の試験案内で公開されている評価観点（Skills measured）を読んで試験範囲を把握することになりますが、その際は英語版のページを優先的に確認することをおすすめします。 
日本語版のページでも評価観点は記載されているのですが、内容が変更される際は英語版の情報がまず最初にアップデートされ、他言語のページは後からアップデートされる、という場合が多くあります。 
実際に、私が今回 AZ-500 を受験したタイミングでも、日本語版のページでは昨年末に行われた試験範囲のアップデートの反映が間に合っていなかったようで、英語版の評価観点と差分が生じていました。

[Azure Solutions Architect Expert を取得した](https://qiita.com/polar3130/items/1cb18d626276c12e90c0)際と同様に、まずは各サービスの公式ドキュメントで新機能や最新の制約事項を確認し、Azure で実際に各サービスを構成して動作を確認しました。
馴染みのないサービスが試験範囲に含まれているようであれば、[Microsoft Learn](https://docs.microsoft.com/ja-jp/learn/)や公式のチュートリアルを活用することで基本操作の流れを確認することから始めると良いかと思います。
この試験に限ったことではありませんが、手を動かすのが理解を深める早道と考えています。

# 受験記録
Azure のセキュリティ関連サービスに対して幅広い理解を求められた印象です。
試験範囲にもあるように、アイデンティティ管理は Azure におけるセキュリティの大きな柱のひとつとなっていますので、概念から操作方法まで重点的に理解しておく必要があるかと思います。
また、今回の試験範囲全体に言えることですが、サービスの概要や概念だけでなく、それらのリソースを操作する際の代表的なコマンド（Bash/Powershell）の使い方も理解しておくと良いかと思います。
git authentication failed

| 日付 | 対応 |
|-----|:---:|
| 2019年9月30日  | 初期データ移行。<br> この時、CSBの契約成立日をhokanの始期日として取り込み。  |
| 2019年10月  | hokanシステムがTnetからの成立契約取り込みで申込契約を更新していた時期にTnet取り込みしたため、申込契約のデータの一部がTnet契約で上書きされる。<br> この時、hokanの始期日はTnetの始期日で更新された。  |
| 2019年10月12日  | hokanシステムがTnetからの成立契約取り込み時、申込契約を更新しないよう本番反映。  |
| 2019年11月8日  | 契約成立日が入っていないとFLPから問い合わせを受け対応。<br> 2019年9月30日にhokanの始期日にCSBの成立日を入れていたため、hokan始期日→hokan成立日への移行を行なったが、hokan始期日は2019年10月のTnet取り込み時に上書きされているため、hokan成立日にTnet始期日が取り込まれた。  |
| 2020年1月  | FLPから問い合わせを受け判明。当初のCSBデータに戻るよう本チケットで対応。  |
【Rails】Pryを使ったメソッドのデバッグ方法

Rails案件で「pry」を使って実装したメソッドをデバッグする機会があったので、使い方の備忘録

## pryとは

REPLで対話的にプログラムを実行したり、ActiveRecordを利用したDB操作や、変数の中身を調べることができるコマンドラインツール  
※ Laravelで言うところの「tinker」とほぼ同じような使い方ができる、超便利なデバッグツール

## サンプル
サンプルとして、以下のメソッドを例に解説

```ruby:app/lib/utils/test_sample.rb
module Utils
  module TestSample
    class << self
      def sample_method(param)
        data = [1, 2, 3, 4, 5]

        data.each do |r|
          if r == param
            return true
          end
        end

        return false
      end
    end
  end
end
```

## メソッドのデバッグ方法

#### `bundle exec rails c`で、コンソールを立ち上げる

```pry
$ bundle exec rails c
Loading development environment (Rails 6.0.0)
[1] pry(main)> 
```

#### ソースコードの「ブレークポイントを貼りたい箇所」に`binding.pry`を差し込む

```diff:app/lib/utils/test_sample.rb
module Utils
  module TestSample
    class << self
      def sample_method(param)
        data = [1, 2, 3, 4, 5]        

        data.each do |r|
+         binding.pry
          if r == param
            return true
          end
        end

        return false
      end
    end
  end
end
```


※ 変更を加えた際の反映は、pryのコンソールに`reload!`を入力してリロードすること

#### コンソールから、デバッグしたいメソッド指定して実行する

```pry
[1] pry(main)> reload!
Reloading...
=> true
[2] pry(main)> Utils::TestSample.sample_method 3

From: /Users/nakano_shingo/Documents/minnshu-gms/app/lib/utils/test_sample.rb @ line 8 Utils::TestSample.sample_method:

     4: def sample_method(param)
     5:   data = [1, 2, 3, 4, 5]
     6: 
     7:   data.each do |r|
 =>  8:     binding.pry
     9:     if r == param
    10:       return true
    11:     end
    12:   end
    13: 
    14:   return false
    15: end
```
※ 引数を指定したい場合は、上記のようにスペースの後に引数を渡す

#### その時点の変数の値を確認したい場合は、コンソールに変数名を入力する

```pry
[1] pry(Utils::TestSample)> param
=> 3
[2] pry(Utils::TestSample)> r
=> 1
```

pryのコマンドは、以下のようにコンソールから`help`を入力すると使い方を教えてくれる

```bash
pry> help <コマンド>
```

#### よく使うコマンド

|コマンド|説明|
|---|---|
|next|次の行を実行|
|step|次の行かメソッド内に入る|
|continue|プログラムの実行をcontinueしてpryを終了|
|finish|現在のフレームが終わるまで実行|
|exit/quit|実行中のステップを終了し、次のステップ(binding.pry)まで処理を実行|
|!!!|pryのコンソールを抜ける|
※ 参考: [Pryコマンドまとめ - Qiita](https://qiita.com/muran001/items/e88819681f5325fc44e0)


### 「next」や「step」などのコマンド実行時、以下のエラーが出る場合
```
SyntaxError: (eval):2: Can't escape from eval with next
```
[こちら](https://qiita.com/ryuuuuuuuuuu/items/bc4ab817d733960de734)を参考に`pry-nav`のgemを追加で導入すればOK

---

スクリプト言語でも、デバッグ時に手軽にステップ実行ができるのはとても便利ですね
ディレクトリのシンボリックリンクを補完した時，末尾に"/"をつける

## スラッシュつかない問題

シンボリック作成

```
$ ln -s /path/to/target/dir_name ~/dir_name 
```
2回Tabを押さないとスラッシュがつかない。

```
$ cd dir_na
[Tab]
$ cd dir_name 
[Tab]
$ cd dir_name/
```

## 解決

ホームディレクトリの`.inputrc`に`set mark-symlinked-directories on`を記述。
私はファイル自体がなかったので作りました。

```
$ echo "set mark-symlinked-directories on" >> ~/.inputrc
```

## 若干の弊害

シンボリックを`rm`する時に`/`がついてしまうと、実態を消そうとしてしまう。
誤って実体を消してしまわないように注意。

```
# これのつもりが
$ rm dir_name

# 間違える可能性
$ rm dir_name/
rm: cannot remove 'dir_name/': Is a directory
```


## 参考文献

[lsを読まずにプログラマを名乗るな！](https://books.google.co.jp/books?id=kuKoDwAAQBAJ&lpg=PT76&dq=%E3%82%B7%E3%83%B3%E3%83%9C%E3%83%AA%E3%83%83%E3%82%AF%E3%83%AA%E3%83%B3%E3%82%AF%20%E8%A3%9C%E5%AE%8C&hl=ja&pg=PT76#v=onepage&q&f=false)
Unityでファイル差し替えに対応する 

　会場の雰囲気とかみて現場で動画とか音声を差し替えたいんだよねって言われたときに、oFとかだとファイルを入れ替えるだけでよかったんですが、Unityでassetにインポートしてあるとファイル差し替えできませんでしたので試行錯誤してみました。
検索しても、対応策があまり見つからなかったので書いてみたいとおもいます。

　Unityはあまり慣れてないので、別の方法があったらご指摘いただきたいです。

　Windows
　Unity 2018.4.14f1

##準備
　差し替えたいファイルをStreamingAssetsフォルダにコピーする
　StreamingAssetsフォルダはビルドした後特定のフォルダにそのままコピーされます
　なければフォルダを作成します

##動画の場合
　`Application.streamingAssetsPath`でビルド後のStreamingAssetsのパスが取得できるので、ファイル名を追加してから、VideoPlayerのurlに設定します


###サンプル
　uGUIのRawImageに動画再生させます

1. AssetにRenderTextureを作成（ムービーと同じサイズ）
2. RawImageをHierarchyに作成
3. 作成したRawImageがちゃんと見えるかRect Transformを確認
4. 3で作成したRawImageのTextureに1で作成したRenderTextureをアタッチ
5. 3で作成したRawImageにVideoPlayerをアタッチ
6. 3で作成したRawImageにC#スクリプトをアタッチ
7. 5でアタッチしたVideo PlayerのTarget Textureに1で作成したRenderTextureをアタッチ

~~~
using UnityEngine;
using UnityEngine.Video;

public class LoadMovie : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        VideoPlayer videoPlayer = GetComponent<VideoPlayer>();
        videoPlayer.url = Application.streamingAssetsPath + "/movie.mp4";
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}
~~~

##音声の場合
　半日ぐらい検索しても見つかりませんでした。
　有料アセットのEasy Saveを使うとAudioClipとして読み込みができますので、StreamingAssets内のパスを動画と同様の方法で取得したのちAudioSourceのclipに指定すればよいです。

~~~
                    string url = Application.streamingAssetsPath + "/" + file.Value;

                    AudioClip audioClip = ES3.LoadAudio(url, audioType);
                    audioClip.name = file.Value;
                    if(audioClip !=null) {
                        audio.clip = audioClip;
                    }
~~~
【CSS】transition

## transition
:sunny: マウスのポインタを要素の上に置いたときに変化する時間を指定できる
:sunny: 多くの場合は hover と一緒に使用する

[【CSS】hover](https://qiita.com/mikimikiman/items/898009393b57a17c1bd0#hover) のときに下記の動画を載せました。

![ezgif.com-crop (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/a605ce65-041e-38e3-08f9-4132eeb28b01.gif)

これに transition を追加して少し変化を加えてみたいと思います:smile:

```例.css
p:hover {
  background-color: red;
}

p {
  transition: all 5s;
}
```

どうなるかというと・・・

![ezgif.com-crop (1)のコピー.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/d8b9c2b8-946e-fb69-714a-8916244117f1.gif)

背景色がゆ〜っくり変化しました:laughing: 

```
セレクタ {
  transition: 変化の対象 変化にかかる時間;
}
```

となります:smile:
今回でいえば

変化の対象 ・・・ all
変化にかかる時間 ・・・ 5s

です。

all は指定したセレクタ全て変化させます。
反対に none だと変化させない設定にできます。

5s は 5秒かけて変化し 5秒かけて戻ります。
5s の s は second（秒） の s です。
【unity】oculusをビルドすると真っ暗な世界になる

<img width="480" alt="スクリーンショット 2020-01-02 0.21.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348026/efd5d6fd-636b-e4f1-05ed-4ccfef3112c9.png">



---
！下に追記あります地味に方法変わってます。地味ですが。！

##ハマったこと
- Oculus Questでビルドすると、真っ暗な画面が表示されます
- [こちら](https://framesynthesis.jp/tech/unity/oculusquest/)こ記事などを参考に普通のにビルドの際にすべき設定はしたはずです
- エラーも特に出ません

##やったこと
Window > Package Managerから、
Oculus Androidをinstallする。以上です。

<img width="701" alt="スクリーンショット 2020-01-20 15.11.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348026/b1112606-55b2-418a-4193-5016382a6997.png">

(上の写真はインストール済みのものです)


素晴らしいですね。~~(中身ない記事になりすぎて困惑している)~~


#### 追記1(20210313)
地味に結構みられているので追記。上の方法、unity2019では非推奨、unity2020では完全になくなっている対応になっているはず。
Project SettingsのPlayerのところから、XR Plugin Management([リンク](https://docs.unity3d.com/ja/2019.4/Manual/com.unity.xr.management.html))というものをどうのこうのする対応が良いです。これ自体もPackage Manegerからインストールするものなので、根幹の、「真っ暗になったら、Package入ってるか確認する」ということは変わってなさそうですね。
PHP関連のアドベントカレンダーを持ち寄って紹介して話し合う【Web x PHP TechCafe 3杯目】

# PHP × Web Tech Cafe

『Web×PHP TechCafe』は、WebやPHPに関わるITエンジニアがスキルアップのために開発や勉強、LTをするコミュニティです。オフィスをスキルアップの場としてご提供します。

本コミュニティは以下の2部構成になっています。

1. Lightning Talks 発表
2. ワーキングテーマに基づき参加者で議論

connpassのページは[こちら](https://rakus.connpass.com/event/162981/)

今回は PHP × Web Tech Cafe 1月の内容をまとめてお伝えします！！

# 1. Lightning Talks

## Zvalについて

* 下記のQiita記事作成中に、PHP.net に記載されていた内容が古いことが分かったので、zvalについて改めて調べてみた
  * 【PHP7.4新機能】弱参照(WeakReference）をキャッシュに使うってどういうことよ、を考えてみた
    * https://qiita.com/miracle-FJSW/items/807d60c09d194609e6a4

* PHP変数は「zval」というコンテナに保管される
  * PHPは参照されるたびに参照カウントがカウントアップされる
    * ０になったら解放される

* [PHP.net に記載されている内容](https://www.php.net/manual/en/features.gc.refcounting-basics.php)が古い
  * $a = "new string"; の参照カウントを調べたらカウント数が表示されない（internedと表示）
    * PHP.net には refcount=1　になるとある
      * v5.6 では 1になる
      * v7.4 では internedと表示
      * phpが7系になったタイミングでパフォーマンス改善のためにzvalの構造が大きく変わったため

* PHPコア開発者の[Nilitaさんのスライド](https://www.slideshare.net/nikita_ppv/php-7-what-changed-internally)を参照
  * 新しいzvalでは構造の見直しによってサイズが小さく、かつ効率よくメモリアクセスされるようになった
    * 数値型はrefcountなどで管理せず、代入されるたびに新しくメモリ領域が確保され、メモリアクセス回数が減った
    * 文字列は、3段階のアクセスを行っていたが2段階に減った、など
  * PHP7以降は、参照を使うとむしろ無駄なメモリ消費が発生する
    * メモリ領域にリファレンス情報を保持させなければならなくなったため

# 2. ワーキングテーマ

本日のテーマは以下です

> PHP関連のアドベントカレンダーで気になった・面白い記事を持ち寄って、記事の紹介＋その記事をネタに色々議論する

## 議論内容

### 1件目

#### phpenv/php-build の小ネタ集

* https://qiita.com/kunit/items/b0b9dfabcadcc7f67829

#### 内容

* phpにもxxxenvがあるとは知らなかったが、この記事を見て初めて知ったので紹介
  * PHPのバージョンを切り替えるのを楽にするのが目的
    * nodenv, pyenvのPHP版
  * 使ってみたが、切り替えが簡単になるが各バージョンのPHPをインストールする際に苦労した
    * PHPのユーザーグループのslackでも最新バージョンのビルドが通らなくて苦労しているようだ
    * 個人開発する程度ならDockerでも代用可能
  * ただし、Dockerなどの仮想化技術を使わずにOSに直接インストールしたPHPを利用したい場合はphpenvが良さそう

* 本番環境で7.4を利用しているとして、開発環境でphpenvで7.4 と 7.1 を併存するのは大丈夫なのか？
  * それは問題ないはず。内部的にはPHPのバイナリの参照先を変えているだけなので

* それだと何が環境構築が難しいのか
  * PHPのバージョンに対応したライブラリを入れるのが大変
  * 結局バージョンに対応しているライブラリをすべて入れていかなければならず、OSのリポジトリが対応していない場合などもある

* 逆にDockerだとどうやってやればいいのか
  * DockerHubから落としたいPHPのバージョンのイメージを落としてRunするだけ
  * DockerはDockerで知識が必要だし、本番運用するならそれなりの知識が必要

### 2件目

#### Laravel で Christmas Illumination

* https://qiita.com/mpyw/items/d20500d5cca26b6f92f6

#### 内容

* Laravel にある Illuminate という名前空間をモチーフにしてイルミネーションを作ったという記事
  * センスが面白い
* Laravel の作者が Illuminate で PHP界を明るくしたいという意図があったらしい
* Laravel はナルニア国物語の国名が由来。テンプレートエンジンはBladeで、剣と魔法の世界。
  * artisan（職人）とか、ネーミングが素敵

### 3件目

#### 【PHP7.4】PHP7.4がリリースされたので新機能全部やる

* https://qiita.com/rana_kualu/items/50f9f5735321fe995ff5

#### 内容

* 前回のWeb × PHP Tech Cafe でも PHP7.4 の新機能について話していた
  * PHP7.4の新機能を'もっと'追う【Web x PHP TechCafe 2杯目】

    * https://qiita.com/MasaKu/items/f295584f7005accdc456

* その時には気づかなかったその機能の使い方について説明があり興味深かった
* mb_str_split でZWJシーケンスも分割できるため👨‍👩‍👦‍👦の文字も分割して、「👨」「👩」「👦」「👦」のようにできる

### 余談

#### Laravelのここが便利

* 認証処理
  * フレームワーク上で認証機能を作ってくれる
* バリデーション
  * 画面のバリデーションチェックから項目値の挿入まですべてやってくれる
* ルーティングのグルーピング
  * ルートをグルーピングしてmiddleware を一括で登録することができる
* セッション管理
  * Flashセッションなど、手書きで実装しようとすると大変そうな機能が全てやってくれる
* ルートモデルバインディング
  * コントローラ内の処理を実行するときにモデルを渡すことができる
* マイグレーション
  * スキーマ管理しやすい
Redis のキューに定期的に複数プロセスから重複なしで値を追加

resque のキューに定期的にタイムスタンプを追加して、cron 的に使いたかったのだが、キューに追加する処理を 1 つのプロセスでやるのは可用性が低いので、(複数のサーバに分散した) 複数のプロセスから重複なしで値を追加したかった。

下記の方法でうまくいきそう。

1. 最後に値を追加したときのタイムスタンプを保持しておき、追加前にチェックする
2. 1 だけだとほぼ同時に実行される場合に重複する可能性があるので Redis のトランザクション機構を利用する

下記は 1 秒ごとにタイムスタンプをキューに追加する例。

```ruby
# cron.rb
require "redis"
require "json"

QUEUE_NAME = "per_sec" # キューの名前
TIMESTAMP_NAME = "per_sec_timestamp" # 最後にキューに値を追加したときのタイムスタンプ

redis = Redis.new

loop do
  t = Time.now.to_i

  redis.watch(TIMESTAMP_NAME) # TIMESTAMP_NAME の値が exec までに変わっていれば multi - exec 間のコマンドを失敗させる
  last = redis.get(TIMESTAMP_NAME).to_i

  if last < t
    redis.multi
    redis.rpush(QUEUE_NAME, t)
    redis.set(TIMESTAMP_NAME, t)
    redis.exec ? puts("set #{t}") : puts("transaction fail")
  end
  sleep 0.1
end
```

上記のスクリプトを 2 プロセス立ち上げて、`while true; do redis-cli lpop per_sec; sleep 0.1s; done` でキューの内容を pop しつづけると下記のようになり、重複なしでキューに追加できていることがわかる。

![redis.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4191/3dea0eaa-fc06-6528-855a-f88a401c36e9.gif)

# Redis のクラスターモードへの対応

クラスターモードの場合 MULTI - EXEC 間の操作はキーが同じハッシュスロットにある場合に限定される ([参考](https://aws.amazon.com/jp/premiumsupport/knowledge-center/elasticache-crossslot-keys-error-redis/))。
これに対応するにはタイムスタンプを保存するキーのハッシュに使う文字列をキューのキー名にすればよい。

```ruby
TIMESTAMP_KEY = "{#{QUEUE_KEY}}:updated_at".freeze
```

`CLUSTER KEYSLOT per_sec` と `CLUSTER KEYSLOT {per_sec}:updated_at` が一致する = 同じハッシュスロットに保存されるので MULTI - EXEC が使える。
実践Terraformを写経してみたらよかったって話

[実践Terraform　AWSにおけるシステム設計とベストプラクティス](https://nextpublishing.jp/book/10983.html)のコードを写経してみたらよかったので感想をば。

## 実践Terraformを読んだ動機

> 本書は、Terraformを使ってAWS上にシステムを構築するノウハウを、200以上のサンプルコードとともに紹介する、Terraform初級者から中級者向け解説書です。

引用元：実践Terraform　AWSにおけるシステム設計とベストプラクティス, https://nextpublishing.jp/book/10983.html, （検索年月日：2020年1月20日)

この本は上記紹介文にあるようにAWSとTerraformについて学べる本です。
AWSは自社で利用されているので理解を深めたかったというのと、Terraformは前から興味があったのでやってみました。

以下のものを構築するので、個人でサービスを作るときにTerraformでコード化しておけば、さっとインフラを作れそうだというのもやる動機となりました。

* MultiAZ環境
* LoadBalancer
* アプリやバッチをコンテナで実行できるECS
* RDSやインメモリデータストア
* GitHubと連携しているCI/CD環境

## 感想

自分はTerraformもAWSもちょっと触ったことがある程度の経験しかありませんでした。

* Terraform:[Get Started](https://www.terraform.io/intro/getting-started/install.html)をちょっとやった。
* AWS:業務で使っているけど、構築はインフラチームの人がやってもらっているのもあってしっかり理解しているかは怪しい。

という感じです。まあほとんど初心者ですね。

写経してみた結果とても学べることが多い良書でした。

* TerraformもAWSも丁寧に説明があり、ひとつひとつの章、節は短くまとめてくれている。
* 説明に対して細かくサンプルコードがあり、どれもちゃんと実行できる。
* 説明を読んではコードを書いて実行できるため、読んだ内容理解できているか細かい頻度で確認しながら進められる。
* AWSを使ったwebサービスの基本的なアーキテクチャを設計から学べられる。

という点がよかったです。

## わがままをいうと

良い本だったとはっきり言えるのですが、わがままを言うと以下の点が改善されたらさらによいなと思いました。

1. サンプルコードでリソース名やデータ名など名前をつけるところがほぼexampleとなっているため、コードのどことどこが一致していなければいけないのかということは、本の文章を注意深く読まないとすぐにわからなかった。

2. よく作られそうなアーキテクチャで環境構築をできるようになっているのはとてもよい。LoadBalancerを立てて、ECSでコンテナを実行して、RDSやインメモリデータストアをたてる。ただ、LoadBalancerでリクエストを受けて、アプリが実行されてRDSを更新とかそういう連動するところまでは実施しない。実施されていたらより実用的だなと思いました。（GitHubと連携したCI・CD環境も構築するけど、実行するところの詳細までは書いていなかった。）

## 読んでどうなった？

TerraformについてはAWSプロバイダーで書かれたコードならある程度読めるようにはなったかなと。あとはひたすら書いていけば身につきそうです。
ただ、わがまま2の点で書いたとおり写経してできたコードは欲しかったインフラを構築できるではありませんでした。しかし、そういうものを作ろうとしたらあとどうすればよいのか？とイメージはできるぐらいになりました。

AWSについてはVPCやEC2、Route53、S3、ELB、ECSなど各サービスの理解は深まったと思います。たとえばVPCであれば、サブネットやインターネットゲートウェイなど、どういう構成要素があって、どう関連しているかわかったかなと。
ただ、改めてAWSコンソールでVPCを作ると戸惑うところはあるので、AWSコンソールで作るのは別で練習したほうがよいなと思いました。

TerraformもAWSもある程度知識を得られて、あとは手を動かしていけば使いこなせるようになれそうでした。一冊で2つの技術についてこの段階までいけるのはとても価値ある本でした。

これからどんどんどちらも使っていこうと思います！！

著者の野村 友規さん @tmknom に感謝!!

2020/01/25：追記
学びになったことは[こちら](https://qiita.com/1021ky@github/items/a1998c88e2a79f08fd28)に、ハマったことは[こちら](https://qiita.com/1021ky@github/items/ca80df4610aee35e2f5d)に書いてみました。
こちらも読んでいただいて参考になれば幸いです。
Org Mode + grip-mode で Github の README をきれいに書く

# リアルタイムにREADMEをプレビューしながら書きたい！
README.org だったり README.md だったり README.txt だったり色々ありますが、こいつらは改行やらスペースやらで稀に変な動作をすることがあります。

それに伴って、毎回変な `update document` とかの commit をしなければならないのは効率が悪いですし、コミットログが汚くなりますよね？

今回紹介するのは Emacs の [grip-mode](https://github.com/seagle0128/grip-mode) というパッケージです。これは Org-mode で書かれたファイルを Github のレンダリングでリアルタイムプレビューできる機能を提供してくれます。

例えばこんな感じ

![ezgif-1-82261399a5ce.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147520/c90320dd-402d-34ad-5305-8ceb172ebc28.gif)

# インストール
package-install を導入している Emacs や Spacemacs (recommend) を使って `M-x package-install grip-mode` でインストールできます。

Spacemacs を使っている場合は、`~/.spacemacs` の `dotspacemacs-additional-packages` に grip-mode を追加してください。

```emacs-lisp:.spacemacs

     ;; List of additional packages that will be installed without being
     ;; wrapped in a layer. If you need some configuration for these
     ;; packages, then consider creating a layer. You can also put the
     ;; configuration in `dotspacemacs/user-config'.
     dotspacemacs-additional-packages '(
                                        grip-mode ;; Please Add here line
                                        )

```
vimのターミナル機能で画面外にロールアウトした実行結果を確認する

# コマンドの出力結果が多い場合、ターミナル機能では画面外にロールアウトしてしまう
vimのターミナル機能は元々表示領域に制限があり、例えばプログラム言語のコンパイラーが大量にエラーを出力した場合などは、最初のエラーはあっという間に画面外にロールアウトしてしまう。
以下の実行結果はコンパイル時の警告が出力されているが、最初のメッセージが画面外にロールアウトされ、見えなくなっている。
<img width="447" alt="202001201407.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466853/df25be69-b6dc-1052-b88b-a7dc8791f738.png">
このままではロールアウトした結果を確認する事が出来ない。これってターミナル機能を利用することで逆に作業が非効率になる。

## ターミナルもvimの一部なのでvimコマンドが利用できる
ターミナルを起動すると、スクロールバーが存在しないことに気が付く。このままでは一度画面外にロールアウトした結果は確認する事が出来ない。
だが、vimはあくまでvim、vimコマンドでターミナルの表示も制御できるらしい。それが「ctrl-w」「shift-n」だ。
<img width="897" alt="202001201420.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466853/d5898eec-9561-703a-cb80-7fbc5b6aae20.png">
上記は、ターミナルで「ctrl-w」「shift-n」を実行し、その後「k」でロールアップしたり、「/」で「Expected」を検索した結果である。この時、ターミナルはコマンドモードとなっている。

もちろん、vimなのだからコマンドモードの状態で「i」を入力すると挿入モードになり、カーソル位置が直前のプロンプトの位置に自動的に戻る。

結果をターミナル上で検索できるし、即座にプロンプトに戻れる。
やっぱvimは素晴らしい。。
計算グラフ

ネットワークが複雑になった場合は、大量に計算式を書くことになるので、行列で書いたとしても訳が分からなくなってしまいます。そういった場合は、計算グラフというものを使うと計算がしやすくなります。計算グラフというのは、演算を数式では無く、ただ絵に書いて表現しただけの物なのですが、いくつかの行列演算について順伝播と逆伝播のルールをまとめておくと、複雑なネットワークになった場合でも楽に計算ができるようになります。すなわち、数式より絵を用いて表現した方がわかりやすいということです。ここではいくつかの行列演算ルールを計算グラフでまとめて、最後に多層パーセプトロンの順伝播と逆伝播を計算グラフで表してみたいと思います。
順伝播時に行列$A$と$B$を足して$C$とした場合を考えます。
これを計算グラフで書くと次のようになります。
![スクリーンショット 2020-01-20 13.34.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554960/03cf6319-8597-eab7-23a4-9a3419bb6444.png)
次に、逆伝播で$\frac{\partial L}{\partial \mathbf{C}}$がどのように$\frac{\partial L}{\partial \mathbf{A}}$と$\frac{\partial L}{\partial \mathbf{B}}$に展開されていくか見ていきましょう。

$\displaystyle
\begin{eqnarray*}
\frac{\partial L}{\partial \mathbf{A}}
&=&
\frac{\partial L}{\partial a_{ij}}
\\
&=&
\sum_{k} \sum_{l}
\frac{\partial L}{\partial c_{kl}}
\frac{\partial c_{kl}}{\partial a_{ij}}
\\
&=&
\sum_{k} \sum_{l}
\frac{\partial L}{\partial c_{kl}}
\frac{\partial (a_{kl}+b_{kl})}{\partial a_{ij}}
\\
&=&
\frac{\partial L}{\partial c_{ij}}
\frac{\partial (a_{ij}+b_{ij})}{\partial a_{ij}}
\\
&=&
\frac{\partial L}{\partial c_{ij}}
\\
&=&
\frac{\partial L}{\partial \mathbf{C}}
\\
\end{eqnarray*}
\tag{3}
$$
同様に計算すると
$$\displaystyle
\begin{eqnarray*}
\frac{\partial L}{\partial \mathbf{B}}
&=&
\frac{\partial L}{\partial \mathbf{C}}
\\
\end{eqnarray*}
\tag{4}$$
これを計算グラフで表すと、
![スクリーンショット 2020-01-20 13.49.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554960/a6ce99c2-c58c-3d06-25cb-dff3f144aec2.png)
すなわち、順伝播の行列の和は、逆伝播では分岐になります。

次に全結合の閾値計算の、順伝播時に、行列$A$と横ベクトル$b$を足して行列$C$とした場合を考えます。
$C=A+b$
これを計算グラフで書くと、
![スクリーンショット 2020-01-20 14.02.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554960/75be5a5f-1437-0e3b-06ea-d4206811e7a7.png)
逆伝播時は
$$\displaystyle
\begin{eqnarray*}
\frac{\partial L}{\partial \mathbf{A}}
&=&
\frac{\partial L}{\partial a_{ij}}
\\
&=&
\sum_{k} \sum_{l}
\frac{\partial L}{\partial c_{kl}}
\frac{\partial c_{kl}}{\partial a_{ij}}
\\
&=&
\sum_{k} \sum_{l}
\frac{\partial L}{\partial c_{kl}}
\frac{\partial (a_{kl}+b_{l})}{\partial a_{ij}}
\\
&=&
\frac{\partial L}{\partial c_{ij}}
\frac{\partial (a_{ij}+b_{j})}{\partial a_{ij}}
\\
&=&
\frac{\partial L}{\partial c_{ij}}
\\
&=&
\frac{\partial L}{\partial \mathbf{C}}
\\
\end{eqnarray*}
\tag{7}$$
$$
\displaystyle
\begin{eqnarray*}
\frac{\partial L}{\partial \mathbf{b}}
&=&
\frac{\partial L}{\partial b_{j}}
\\
&=&
\sum_{k} \sum_{l}
\frac{\partial L}{\partial c_{kl}}
\frac{\partial c_{kl}}{\partial b_{j}}
\\
&=&
\sum_{k} \sum_{l}
\frac{\partial L}{\partial c_{kl}}
\frac{\partial (a_{kl}+b_{l})}{\partial b_{j}}
\\
&=&
\sum_{k}
\frac{\partial L}{\partial c_{kj}}
\frac{\partial (a_{kj}+b_{j})}{\partial b_{j}}
\\
&=&
\sum_{k}
\frac{\partial L}{\partial c_{kj}}
\\
&=&
\left[1,\cdots,1 \right]
\frac{\partial L}{\partial \mathbf{C}}
\\
\end{eqnarray*}
\tag{9}$$
これを計算グラフでかくと
![スクリーンショット 2020-01-20 14.17.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554960/02ad5611-5e79-90fe-bc7f-35322268311d.png)

今回は、簡単な例だけを取り上げましたが、このように計算グラフで表すと、多層パーセプトロンなどの構造が非常にわかりやすくなります。
時間があれば取り上げようと思います。