OmniAICreator/Qiita-1.07M huggingface dataset:
[Unity]PostEffectにUIのスプライトを利用する

PostEffectを掛ける際にUIのスプライト（テクスチャでもいい）を利用したかったメモ。
あまりにもニッチな内容だけど、なかなか苦労したのでメモ残しておきます。

#何が問題なのか
ちょっとググれば出るけど、PostEffectを掛けるシェーダーを書く際はまずカメラに処理用のスクリプトを書く。
んで、処理中にRenderTextureを用意して、画面に映ったものをシェーダーで処理してRenderTextureに映す。
シェーダーで描画を実行するにはOnRenderImageで値を渡してGraphics.Blitで描画するんだけど、そのとき_MainTexとして画面のレンダリングイメージが送られる。

_MainTexのUVは画面全体を0-1として送られるので、UIの領域を参照するには画面全体からどうにかして算出しなければならない。

#コード
とりあえず上手く行った（っぽい）コード。
説明の必要部分だけ抜粋します。
UIのポジション変換はこちらを参考にさせて頂きました。
http://karanokan.info/2019/02/03/post-2213/

UVは左下から0-1なので、そこに上手く合わせられるようにする。

##スクリプト側
```csharp
public GameObject imageobj = null;
public Texture AddTexture = null;
public Material mat = null;
private RectTransform trfTarget = null;
private RectTransform rectCanvas = null;
private Vector2 ressize = new Vector2(0f,0f);
private Vector2 piv = new Vector2(0f,0f);
private Vector4 rct;

void OnValidate(){
    if(imageobj != null){
        AddTexture = imageobj.GetComponent<Image>().sprite.texture;
        trfTarget = imageobj.GetComponent<RectTransform>();
        var top = imageobj.GetComponent<RectTransform>().root;
        rectCanvas = top.GetComponent<RectTransform>();
        ressize = new Vector2(rectCanvas.rect.width,rectCanvas.rect.height);
        piv = rectCanvas.pivot;
    }
}

private void OnRenderImage(RenderTexture source, RenderTexture dest){
	mat.SetTexture("_AddTex", AddTexture);
	mat.SetVector("_Rect", rct);
	Graphics.Blit(source, dest, mat);
}

private void Update(){
	//World座標をUI座標へ変換
	Vector2 spos = RectTransformUtility.WorldToScreenPoint(Camera.main, trfTarget.position);
	Vector2 pos;
	RectTransformUtility.ScreenPointToLocalPointInRectangle(rectCanvas, spos, Camera.main, out pos);
	//左下を計算上のpivotにする
	var imgsize = new Vector2(trfTarget.rect.width * trfTarget.localScale.x,trfTarget.rect.height * trfTarget.localScale.y);
	var imgpiv = trfTarget.pivot;
	var imgpos = new Vector2(pos.x - (imgsize.x * imgpiv.x),pos.y - (imgsize.y * imgpiv.y));
	//CanvasのRectTransformから解像度とピボットを取り、左下0にする
	var resetpos = new Vector2(imgpos.x + (ressize.x * piv.x),imgpos.y + (ressize.y * piv.y));
	//リニア化　(minx,miny,解像度xに対する横の割合,解像度yに対する高さの割合)
	rct = new Vector4(resetpos.x / ressize.x, resetpos.y / ressize.y, imgsize.x / ressize.x, imgsize.y / ressize.y);
}
```

##シェーダー側
範囲が分かりやすいようにスプライト部分を黒で塗りつぶしてます。
取得したUIのRect情報でいかにしてUVをずらすか。

```glsl
Shader "UIPostEffect"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_AddTex ("AddTexture", 2D) = "white" {}
	}
	SubShader
	{
		Cull Off ZWrite Off ZTest Always

		Pass
		{
			CGPROGRAM
			#pragma vertex vert_img
			#pragma fragment frag
			
			#include "UnityCG.cginc"
			
			sampler2D _MainTex;
			sampler2D _AddTex;
			float4 _Rect;

			fixed4 frag (v2f_img i) : SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv);
				float2 uv = float2((i.uv.x-_Rect.x)/_Rect.z, (i.uv.y-_Rect.y)/_Rect.w);
				fixed4 addcol = tex2D(_AddTex, uv);
                return lerp(col,fixed4(0,0,0,1),addcol.a);
			}
			ENDCG
		}
	}
	Fallback Off
}

```

##正直上手く説明できない
数学苦手なんでツッコミあったらよろしくお願いします。
Xcode10でAutomatically manage signingだとエラーでる！！

Xcode9にて開発したアプリで、Xcode10で下記の様なエラーがでる場合の対処。
Code signing is required for product type 'Application' in SDK 'iOS 12.0'
Automatically manage signingのチェック外し、下記のような設定とする。
![スクリーンショット 2020-03-16 18.28.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/084229f0-e98e-1e76-aeef-3aa3e7d101aa.png)
Thymeleafを通じて画面に渡された値をVue.jsで利用する

## はじめに
テンプレートエンジンとしてはThymeleaf、フロントの処理にVue.jsを用いているプロジェクトで、行いたいajax処理の関係でどうしてもThymeleafを通じて渡された値をVue.jsで参照したくなり試行錯誤するハメになったのでその記録です。

## 本文
ref要素を用いることで実現可能です。
参照したい値がThymeleafによって埋め込まれたタグにref要素を追加します。
これによって $refs.hogehoge という形で対象タグのDOMを参照することができるようになります。
DOMを通じて、間接的にThymeleafで渡された値を参照するわけです。

注意すべき事項として、
「$refs.hogehoge」の利用（代入や演算はもちろんエイリアスの作成など）は[コンポーネントライフサイクル](https://jp.vuejs.org/v2/guide/instance.html)のmounted以降でないといけません。
理由はもちろん、DOMが作られたあとでなければ参照のしようがないためです。
createdの段階で利用しようとすれば[undefined]となります。

```sample.html
<html>
  <!-- ヘッダ省略 -->
  <body>
  <div id="wrapper">
　　  <!-- ユーザ名を表示するような場合 -->
  　　<span th:text="${username}" ref="username"></span>
  </div>
  <script>
  const app = new Vue({
    el: '#wrapper',

    created() {
      // [undefined]
      console.log(this.$refs.username.textContent);
    },

    mounted() {
      // ${username}の中身がコンソールに表示される
      console.log(this.$refs.username.textContent);
    }

  });
  </script>
  <body>
</html>
```

## おわりに
Thymeleafのみならず、他のテンプレートエンジンでも応用可能です。
もっとも、 "ajax処理でテンプレートエンジンから渡された値を用いる" こと事態避けるべきものではあります。
Dockerコンテナへローカルファイルのダンプをコピーしてリストアする

私自身の覚えが良くないのもあり、何度も複数コマンドをググって辛みだったため、備忘録として。
まだエンジニアとして8ヶ月ですので、何かミスなどあればマサカリいただければと。


##1. ローカルファイルディレクトリへ移動
```bash
cd your/local/dump
```

##2. (docker起動中で)dockerのデータベースコンテナのIDを調べる
コンテナIDは 「23fd80dl」のような文字列です。

```bash
docker ps
```

##3. ローカルからコンテナへコピーする
```bash
docker cp ローカルダンプファイル コンテナ名:/ダンプファイル名
```

例えばこんな感じ

```bash
docker cp qiita.20200316.dump  コンテナ名:/tmp/qiita.20200316.dump
```

##4. 起動中のデータベースコンテナに入る
docker-composeを利用していて、かつ、bashの場合(docker-compose.yml直下で)

```bash
docker-compose exec データベースサービス名 bash
```

##5. ダンプファイルをcpしたディレクトリへ移動

３.で /tmpへコピーしたので移動

```bash
cd tmp
```

##6. ダンプする
lsしたら、dockerコンテナへコピーしたダンプファイルが直下に見えることを確認してください。

```bash
mysql -u ユーザー名 -pパスワード -D データベース名 < ダンプファイル名
```

以上です〜
XQuartzでウィンドウがどっか行く


#いつも忘れる
メモです。

##インストール
```bash
brew install wmctrl
```

##これで帰ってくる(例)
```bash
% wmctrl -G -l 
0x01200003  0 1112 45   742  934  remote Mozilla Firefox
...

% wmctrl -i -r 0x01200003 -e 0,1280,0,640,360
```

`wmctrl -G -l`で対象のWindow IDを調べて、
`wmctrl -i -r $(Window ID) -e 0,1280,0,640,360`で移動って感じですね。

##対象のウィンドウが一つだけの時
この一行

```zsh
 wmctrl -G -l|cut -d ' ' -f 1|read id|wmctrl -i -r $id -e 0,1280,0,640,360 
```
zshでないと動かないらしい？
NLog設定ファイルの記述方および配置場所

# はじめに
ロギングのフレームワークにNLogを使おうと思い調べてみたのだが、使い方を簡単に説明しているページが検索上位にきていてリファレンスとして使えるようなページが見つからなかったので、自分のメモ用にこのブログを作成します。
公式のwikiを要約した部分が多いので、英語に抵抗のない人は[そちら](https://github.com/nlog/nlog/wiki)（もしくは[このあたり](https://github.com/nlog/nlog/wiki/Configuration-file#configuration-file-locations)）を参考にしたほうが良いです。

# NLogの設定ファイルに関して
NLogの設定ファイルとして、以下のような内容のNLog.configファイルを作成(自動生成される？)するような記事が多いですが、後述する通り設定ファイルは既定のルールに従って探索されるため、いくつかの場所で指定することが可能です。

```xml:NLog.config
<?xml version="1.0" encoding="utf-8" ?>
<nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

  <targets>
    <target xsi:type="File" name="targateName" fileName="logfile.log" />
    <target name="logconsole" xsi:type="Console" />
  </targets>

  <rules>
    <logger name="*" minlevel="Info" writeTo="logconsole" />
    <logger name="*" minlevel="Debug" writeTo="logfile" />
  </rules>
</nlog>
```
## 設定ファイルの場所
設定ファイルは、以下のような手順で探索されます

### .exe形式の実行ファイルの場合
1. アプリケーションの構成ファイル(通常 application.exe.config)
2. 実行ファイルと同じフォルダに配置された<applicationname>.exe.nlogファイル
3. 実行ファイルと同じフォルダに配置されたNLog.configファイル(★上記の例はこれ)
4. NLog.dllと同じフォルダに配置されたNLog.dll.nlogファイル(GACに登録されているdllでない場合に限る)

### ASP.NETアプリの場合
1.web.configファイル
2.web.configと同じフォルダに配置されたweb.nlogファイル
3.アプリケーションディレクトリに配置されたNlog.configファイル
4.Nlog.dllと同じフォルダに配置されたNlog.dll.nlogファイル(GACに登録されているdllでない場合に限る)

## configファイルの書式
### NLog.configの場合
NLog.configファイルを使う場合のファイル書式は、上にある例のように記述する。

### applicaton.exe.configなどに記述する場合
application.exe.configやweb.config内にNLogの構成を記述する場合は、以下のように**configSections**セクションで新しくnlogセクションを定義し、後続のセクションとして**nlog**セクションを追記すればよい。

```xml:app.config
<configuration>
  <configSections>
    <section name="nlog" type="NLog.Config.ConfigSectionHandler, NLog"/>
  </configSections>
  ...
  <nlog
    xmlns="http://www.nlog-project.org/schemas/NLog.xsd" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <targets>
       <target name="logconsole" xsi:type="Console" />
    </targets>
    <rules>
       <logger name="*" minlevel="Info" writeTo="logconsole" />
    </rules>
  </nlog>
</configuration>
```

NLogのxmlは特別に指定しない限りケースインセンシティブ(大文字小文字を区別しない)となっている。
hypothesisでサンプルCSVデータを作成する方法


[hypothesis](https://hypothesis.readthedocs.io/en/latest/) は、テストケースより有効的にユニットテスト書けるライブラリです。

テストに使う値を幅広く試したりすることができるらしい。ただし、今回は、hypothesisのデータ生成機能を使って、サンプルデータを簡易作成できるかをたましてみたいと思います。

## 課題

ファイル形式（CSV）を決まった範囲や制限内のデータを生成したい。

やってみます！

まず、データの定義したいですね。[hypothesis](https://hypothesis.readthedocs.io/en/latest/)を作成してほしいデータは、[strategy](https://hypothesis.readthedocs.io/en/latest/data.html#core-strategies)というものをつかって定義します。

今回は、pythonの標準ライブラリ `csv` を使うので、DictWriterのためのDict作成しちゃいば、簡易書き出せるので、dictを作成の場合、[fixed_dictionaries](https://hypothesis.readthedocs.io/en/latest/data.html#hypothesis.strategies.fixed_dictionaries) というstrategyがあるので、これは、このようにできるようです。

そのなかで、作りたいdictのキーいれて、さらに値を作成するstrategyを決めて、定義ができます！

```python
from hypothesis import strategies as st

DictRowDataModel = st.fixed_dictionaries({
    'k_id': st.none(),
    'w_id': st.none(),
    '項目１': st.integers(min_value=1, max_value=7),
    '項目2': st.integers(min_value=1, max_value=5),
    '項目３': st.integers(min_value=1, max_value=16)
})
```

次にわかりずらかったのが、これをつかってどうやって、データ生成すること。
通常ユニットテスト内で使われる作りのようなので、この使用例がないようです。

テストケース使う例：

```python
from hypothesis import given
import hypothesis.strategies as st

@given(st.integers(), st.integers())
def test_ints_are_commutative(x, y):
    assert x + y == y + x
```


でも探してみると、strategyに`example()`のメッソドが用意されていて、それが使えるようです：


```python

import csv
from hypothesis import strategies as st

d = {
    'k_id': st.none(),
    'w_id': st.none(),
    '項目１': st.integers(min_value=1, max_value=7),
    '項目2': st.integers(min_value=1, max_value=5),
    '項目３': st.integers(min_value=1, max_value=16)
}

DictRowDataModel = st.fixed_dictionaries(d)

samples = 3
with open('sample.csv', 'w', encoding='utf8') as out:
    writer = csv.DictWriter(out, fieldnames=tuple(d.keys()))
    for i in range(samples):
        sample = DictRowDataModel.example()
        writer.writerow(sample)
         
```

自分が範囲生成のコード書けずに済みました。嬉しい。


## 結論

`strategy` の`.example()` を使えば、楽にCSVデータ作成ができました〜　:tada:

> こちらのWarningが出ますが、テストの速度などの注意点の用なので、とりあえず、作成されます。今のところ無視しています：

```
NonInteractiveExampleWarning: The `.example()` method is good for exploring strategies, but should only be used interactively.  We recommend using `@given` for tests - it performs better, saves and replays failures to avoid flakiness, and reports minimal examples. (strategy: fixed_dictionaries(...),
```
スコープ関数どれを使う？

# はじめに
kotlinにはスコープ関数といった関数があり、代表的なものとして、let、run、apply、alsoの4つがあります。
それぞれの違い、どれを使用するのか解説したいと思います。

## レシーバーの違い
スコープ関数では、レシーバーを`it`か`this`で表すことができます。
使用できるレシーバーは決まっており、
`it`は`let`、`also`
`this`は`run`、`apply`
となります。

レシーバーについて、実際のコードで説明すると、

```kotlin
val hogehoge = hoge.let { it -> 処理 }
```
上記のコードのhogeの部分を`it`や`this`で表現しています。
`it`と`this`では、
・itは名前を変更できる。
・thisは省略して書くことができます。

## 戻り値の違い
スコープ関数では、戻り値にも違いがあります。
戻り値を指定できるのは`let`と`run`
対象オブジェク(hogeの部分をさします)になるのは`apply`と`also`

# どれを使用したらいいのか
それぞれの違いは解説しましたが、実際にどれを使用すればいいのでしょうか？
ここからは、私の解釈となりますので、絶対正しいとは限りませんのでご了承ください。

レシーバーである`it`と`this`ですが、`this`には問題があります。
例で説明すると、

```kotlin
fun main() {
    var text = "HOGE"
    val button = Button(context).apply {
        //thisを省略
        text = "hogehoge"
    }
    //出力はHOGE
    println(button.text)
}
```
上記の場合、Buttonのtextを変更したかったのに、違うtextが変更してしまっているパターンです。
thisで省略して書いてしまうと予想外の処理になってしまう可能性があります。

名前を変更できる`it`なら、名前をパッと見て何を示しているのかわかるので、
レシーバーが`it`である、`let`と`also`をオススメします！

# おわりに
今回、スコープ関数の代表的な4つについて解説いたしました。
実際にどれを使用するかは本人次第ですが、他の方と一緒にコーディングする際は、
あらかじめ決めておいた方がいいのかもしれません！
最後まで読んでいただきありがとうございました！！
leisim/logger をつかってログ出力を行う



Flutter で使用できる、ログ出力をサポートする [leisim/logger](https://pub.dev/packages/logger) についてまとめます。
※ 使用バージョン logger 0.8.3

この投稿は、これらの記事をミックスしまとめました。
- [A Guide to Setting up Better Logging in Flutter by Dane Mackier](https://medium.com/flutter-community/a-guide-to-setting-up-better-logging-in-flutter-3db8bab2000e)
→ 使用バージョンが古いため、最新バージョンではコードが機能していない
- [How to update to 0.8.0 and keep the same LogPrinter](https://github.com/leisim/logger/issues/31)


# 使い方

## インストール
```pubspec.yaml
  # dependencies:に追記
  logger: ^0.8.3
```
VSCodeを使っている私は、追記を追加し保存をすれば、自動的にインストールが完了。
自動インストールがされない場合は、[pub get](https://pub.dev/packages/logger#-installing-tab-) する。


## 基本的な使い方
```dart
import 'package:logger/logger.dart';

final logger = Logger();

logger.v('You don\'t always want to see all of these');
logger.d('Logs a debug message');
logger.i('Public Function called');
logger.w('This might become a problem');
logger.e('Something has happened');
```
このような出力となる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6327/cdc4bd5b-b43c-aded-ec98-ef143e87567e.png)

## ログの出力をカスタマイズする
標準の出力の場合、行数がかなり多くなってしまうので１行で表示するように調整します。
Classを準備します。

```simple_log_printer.dart
import 'package:logger/logger.dart';

class SimpleLogPrinter extends LogPrinter {
  final String className;
  SimpleLogPrinter(this.className);

  @override
  List<String> log(LogEvent event) {
    AnsiColor color = PrettyPrinter.levelColors[event.level];
    String emoji = PrettyPrinter.levelEmojis[event.level];
    return [color('$emoji [$className]: ${event.message}')];
  }
}
```

作成したClassを以下のように用います。

```dart
import 'package:logger/logger.dart';

final logger = Logger(printer: SimpleLogPrinter('MyClass'));

logger.v('You don\'t always want to see all of these');
logger.d('Logs a debug message');
logger.i('Public Function called');
logger.w('This might become a problem');
logger.e('Something has happened');
```

このような結果となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6327/24889109-a1a1-e1d0-0ee8-2d44965fbe88.png)
【bash】文字列比較で、スペースを文字としてカウントしない方法

## 文字列比較の落とし穴
bashにおいて、スペースのみを変数に代入した時も文字有りと判断されてしまう。

```bash
string=' '
test -n "${string}" && echo yes || echo no
# 比較演算子 n は1文字以上かを判定する。結果は yes
```
## 今回求める挙動
スペースだけで構成される文字列は、空(文字数0)と判定して欲しい。

## 求める挙動の実現方法
tr コマンドでスペースを除去した状態で判定する、だけ。

```bash:
test -n $( echo "${string}" | tr -d " " ) && echo yes || echo no
# 結果は no
```
基本情報22週目(03/16週)

# 目標と結果
### 目標
- 参考書をみる。
- [基本情報技術者試験ドットコム](https://www.fe-siken.com/)を使う。
- 午後で通用する様に内容を理解する。
- 情報セキュリティの勉強をする。
- アルゴリズムの勉強

### 結果
- https://www.fe-siken.com/kakomon/28_haru/pm04.html
    - イーサネットを介した通信
        - ルータから向こう側は見えない
            - ブリッジは同じセグメントなので問題なし
        - MACアドレスを見つけるためにIPアドレスを手がかりにする(ARP)
- https://www.fe-siken.com/kakomon/30_haru/pm04.html
    - クラウドサービス上でのシステム構築
        - レプリケーションサーバの利点
            - ストレージサーバに障害が起きてもサービスが継続できる(検索)
            - アクセスが増加しても大元のストレージサーバに負荷がかからない
- https://www.fe-siken.com/kakomon/29_haru/pm01.html
    - ファイルの安全な受渡し
        - メールでファイルを送るときは盗聴されてると想定する
            - 公開鍵暗号で送るとしても相手の公開鍵の真正性にも注意
- https://www.fe-siken.com/kakomon/21_aki/pm06.html
    - インシデント及び問題の管理
        - インシデントの通報とフォローのプロセス

# 振り返り
### Keep
- セキュリティの勉強は続ける

### Problem
- アルゴリズムと表計算

### Try
- アルゴリズム
CentOS 8にEC-CUBE 4をインストールした時の自分用メモ

さくらクラウドにCentOS8のサーバを立てました。
テスト用で使えればよかったので手順の精査とかはできていません。
そのままでは動かないところありますので察してください。

# Apache httpd

```sh
dnf update -y
dnf install -y httpd postgresql postgresql-server
dnf list installed | grep httpd
httpd -v
systemctl status httpd
systemctl start httpd
systemctl status httpd
which httpd
systemctl is-enabled httpd
systemctl enable httpd
systemctl is-enabled httpd
firewall-cmd --list-all
firewall-cmd --add-service=http --permanent
firewall-cmd --reload
firewall-cmd --list-all
```

これで `/var/www/html/index.html` にファイルを置くとブラウザで表示できる。

# PHP

```sh
dnf info php php-mbstring php-xml php-xmlrpc php-gd php-pdo php-mysqlnd php-json php-pgsql php-pecl-apcu php-pecl-zendopcache php-mbstring php-intl php-zip
dnf install -y php php-mbstring php-xml php-xmlrpc php-gd php-pdo php-mysqlnd php-json php-pgsql php-pecl-apcu php-pecl-zendopcache php-mbstring php-intl php-zip
dnf list installed | grep php
php -v
cp -p /etc/php.ini /etc/php.ini.bak
echo 'date.timezone = Asia/Tokyo' >> /etc/php.ini
systemctl restart httpd
```

これで `/var/www/html/index.php` にファイルを置くとブラウザで表示できる。

# composerのインストール

```sh
wget https://getcomposer.org/installer -O composer-installer.php
php composer-installer.php --filename=composer --install-dir=/usr/local/bin
composer --version
rm composer-installer.php
```

# postgres

```sh
postgres --version
/usr/bin/postgresql-setup --initdb
# 認証方式の設定
vi /var/lib/pgsql/data/pg_hba.conf
systemctl status postgresql
systemctl start postgresql
systemctl status postgresql
systemctl is-enabled postgresql
systemctl enable postgresql
systemctl is-enabled postgresql
```

# EC-CUBEのインストール

```
cd /var/www/html
git clone https://github.com/EC-CUBE/ec-cube.git
cd ec-cube
composer install

# DATABASE_URL と DATABASE_SERVER_VERSION を適宜変更
# sed -i -e 's/DATABASE_URL=sqlite:\/\/\/var\/eccube.db/DATABASE_URL=postgres:\/\/postgres@127.0.0.1\/eccube/g' ./.env
# sed -i -e 's/DATABASE_SERVER_VERSION=3/DATABASE_SERVER_VERSION=10/g' ./.env

bin/console e:i --no-interaction
```
セッションの話

普段何気なく使っている機能や言葉を整理する備忘録第２弾です。
第１弾はこちら=> [Cookieの話](https://qiita.com/Ohtak/items/5414dafc7a2633dc397d)

HTTPプロトコルでのセッションについてまとめます。

#参考
https://qiita.com/hththt/items/07136ad74127999df271
https://www.ipa.go.jp/security/awareness/administrator/secure-web/chap6/6_session-1.html
https://techracho.bpsinc.jp/hachi8833/2018_09_19/61260
https://umaroidblog.com/webtechnology1

#セッションとは？
あるユーザーがあるサイトにログインしたとき〜ログアウトするまでの一連の操作のこと。
（語弊があるかもしれませんが、あくまでイメージとしてということで…）

例えばあるユーザーがログインしたあと、サイトのTOPページが表示されたとします。
この時点で接続が切れていますが、HTTPはステートレスなため、前の接続の状態を記憶しません。
よってもう一度ページにアクセスがあってもそれが先ほどログインしてきた人かどうかはわかりません。

これを実現するための仕組みを一般的に「セッション管理」と言います。
よく使われるのがセッションIDを照合する方法です。

1. クライアントからサーバーに接続するときに無作為な英数字（これがセッションID）を生成、サーバーに送ります。
2. サーバーでこのIDを保存します。
3. 接続があるたびに保存してあるIDと照合し、それと合致するユーザーとして認識します。

この際セッションIDのやりとりにCookieがよく使われます。

#cakephp3で使うならこんな感じ
公式ドキュメントこちら
https://book.cakephp.org/3/ja/development/sessions.html

##設定
`/config/app.php`にsession情報をどう保存するかの設定ができます。
大抵PJを作ったらデフォルトで設定されてるはず

```php
Configure::write('Session', [
    'defaults' => 'php',
    'ini' => [
        'session.cookie_path'     => '/',                //情報の保存先パス
        'session.cookie_domain'   => '.yourdomain.com'   //対象のドメイン
        'session.cookie_lifetime' => 1800                //タイムアウト時間
    ]
]);
```
な感じ。

##主な操作

```php
$session = $this->getRequest()->getSession();

//読み込み
$name = $session->read('User.name'); 

//書き込み
$session->write('Config.language', 'en'); 

//存在チェック
if ($session->check('Config.language')) {
    // Config.language が存在し null ではない。
}

//破棄
$session->destroy();
```
[C++] フィボナッチ数列をメモ化再帰でn=93までを高速で出力する

#[C++] フィボナッチ数列をメモ化再帰でn=93までを高速で出力する

フィボナッチ数列の出力をメモ化再帰を用いて高速に出力しました。

c++の`unsigned long long`型を用いて$n=93$までを出力できるようにしました。

$n=94$以降は`unsigned long long`型の最大値$18446744073709551615$を超えてオーバーフローしてしまいます。

また、フィボナッチ数列とは次の漸化式を満たす正の整数列です。

$n$を正の整数として、

```math
A(0) = 0,\ \ \ A(1) = 1 \\
```
```math
A(n) = A(n-1) + A(n-2)\ \ \ \ \ \ \ \ \ (n>=2)
```

つまり、

```math
A = \{ 0,\ 1,\ 1,\ 2,\ 3,\ 5,\ 8,\ 13,\ 21,\ ... \}
```

となる数列である。

##実装 [C++]

###再帰のみで実装

単純に実装すると、次のようになります。

```cpp
#include <bits/stdc++.h>
using namespace std;
typedef unsigned long long ull;

ull fibonacci(ull a);

int main() {
    ull n;
    cin >> n;

    ull ans = fibonacci(n);

    cout << ans << endl;

    return 0;
}

ull fibonacci(ull a) {
    if (a == 0 || a == 1) {
        return a;
    } else {  
        return fibonacci(a-1) + fibonacci(a-2);
    }
}
```

C++で実装する際に、いくらC++が高速な言語であっても愚直に再帰で解こうとすると計算複雑性は$O(2^n)$となるので$n=50$程度で計算時間が数秒ではなくなってしまいます。

###メモ化再帰を利用する

そこで、すでに計算されたフィボナッチ数を記録しておき、それぞれのフィボナッチ数を求める前にすでに計算されいているか確認するようにしました。

もし、すでに計算されていれば、その値を参照するようにします。

次のようになります。

```cpp
#include <bits/stdc++.h>
using namespace std;
typedef unsigned long long ull;

ull fibonacci(ull a);

map<ull, ull> fibomap;

int main() {
    ull n;
    cin >> n;

    fibomap[0] = 0;
    fibomap[1] = 1;

    ull ans = fibonacci(n);

    cout << ans << endl;

    return 0;
}

ull fibonacci(ull a) {
    if (a == 0 || a == 1) {
        return a;
    } else {
        if (fibomap.find(a-1) != fibomap.end()) {
            if (fibomap.find(a-2) != fibomap.end()) {
                return fibomap[a-1] + fibomap[a-2];
            } else {
                fibomap[a-2] = fibonacci(a-2);
                return fibomap[a-1] + fibomap[a-2];
            }
        } else {
            if (fibomap.find(a-2) != fibomap.end()) {
                fibomap[a-1] = fibonacci(a-1);
                return fibomap[a-1] + fibomap[a-2];
            } else {
                fibomap[a-1] = fibonacci(a-1);
                fibomap[a-2] = fibonacci(a-2);
                return fibomap[a-1] + fibomap[a-2];
            }
        }
    }
}
```

メモ化再帰することで計算複雑性は$O(n)$になり高速で計算できます。

しかし、今回はC++の`unsigned long long`型を使用しているので$n=94$でオーバーフローしてしまいました。

もし、$n=94$以降も高速で求められる方法がありましたら、ぜひコメントで教えてください。
mysqlにcsvを読み込み


- 環境

　mysql Ver 14.14
　ubuntu16.04

csvを用意しておく

```
# mysqlにログイン
$ sudo mysql -u root -p

# database作成
mysql> create database database_name

# databaseを選択
mysql> use database_name

# テーブルを作成し、カラム情報も同時に設定
mysql> create table table_name(
    -> id int,
    -> name varchar(255),
    -> ...
    -> ); 

mysql> load data local infile "file_path/file.csv " into table table_name fields terminated by ',' optionally enclosed by '"';

```

下記のようなログが出ていれば多分OK

Query OK, XXX rows affected, YYY warnings (ZZZ sec)
Records: XXX  Deleted: 0  Skipped: 0  Warnings: YYY

```
# テーブルを確認
mysql> show tables;

# テーブルの中身まで確認したい場合
mysql> desc table_name;
```

参考：
http://shiningcureseven.hatenablog.com/entry/2018/08/03/122221
WebRTCで副音声システムを構築

テレビには副音声や二か国語放送がある番組もあります。
Web上でのライブ配信ストリーミングでも
・エンタメ系：メインの配信と裏配信の組み合わせ
・教育系：メインが英語、副音声でリアルタイム翻訳
という配信形態が生まれてくると思われます。
そこで副音声システムのサンプルを作成しました。

サンプルは[こちら](https://github.com/fu-jimoto/AgoraIO-Second-Sound-Channel)にあります。
agora.io WebSDK3.0.1に内包されているサンプルをベースに修正しています。

##基本的な仕様
![無題の図形描画-5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/60b4cdce-76ec-552e-2a2d-3e84beaf3a38.jpeg)
この図の通り、登場人物は「メインチャンネル」「サブチャンネル」「視聴者」となります。
システムの仕様によってはサブチャンネルの映像、音声をメインチャンネルが受け取る必要が無い場合もありそうです。

視聴者は音声について１度に受け取るチャンネルを１つになるよう実装をします。

##具体的な実装方法
###初回アクセス時の処理
視聴者は初回アクセス時にメインチャンネルの音声のみを受信

```javascript:index.html

// Occurs when a user subscribes to a remote stream.
  rtc.client.on("stream-subscribed", function (evt) {
    var remoteStream = evt.stream;
    var id = remoteStream.getId();

    rtc.remoteStreams.push(remoteStream);
    addView(id);

    if(id==2000){ //サブチャンネルのuidを2000に固定しています
      remoteStream.setAudioVolume(0);//サブチャンネルのボリュームを0にします
    }
    remoteStream.play("remote_video_" + id);
    Toast.info('stream-subscribed remote-uid: ' + id);
    console.log('stream-subscribed remote-uid: ', id);
  })
```
###音声の切り替え
Switchボタンで音声のみ切り替えを実施します

```javascript:index.html

  $("#switch").on("click", function (e) {
    console.log("switch")
    e.preventDefault();
    if(currentAudioID == 1000){
      for(var i in rtc.remoteStreams){
        if(rtc.remoteStreams[i].getId() == 1000){
          rtc.remoteStreams[i].setAudioVolume(0);
        }
        if(rtc.remoteStreams[i].getId() == 2000){
          console.log("switch to 2000")
          rtc.remoteStreams[i].setAudioVolume(100);
        }
      }
      currentAudioID = 2000;
    }else{
      for(var i in rtc.remoteStreams){
        if(rtc.remoteStreams[i].getId() == 1000){
          console.log("switch to 1000")
          rtc.remoteStreams[i].setAudioVolume(100);
        }
        if(rtc.remoteStreams[i].getId() == 2000){
          rtc.remoteStreams[i].setAudioVolume(0);
        }
      }
      currentAudioID = 1000;
    }
  });
```


#最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=53d4dfae1a2b23b88368)
[<img width="912" alt="スクリーンショット 0001-08-15 13.41.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5d815376-9b89-08fa-9434-6fa7e8e67bcf.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=53d4dfae1a2b23b88368)
新型コロナウイルス対策サイトをコードを1行も触らずクローンして、触ってみた

#はじめに

本投稿はプログラマーじゃないけど、自分が住む地域の「新型コロナウイルス対策サイト」に関わりを持ちたい方へ向けたエントリです。
取り敢えずサクッと環境を作ってみんなもOSSプロジェクトに参画しよう！

**※うまくいくと全部で１０分程度で表示まで可能です。
　その分、詳細な手順は少なめです（ペコリ）**


##環境構築

東京都の新型コロナウイルス対策サイトは、バリバリ稼働しています。
なので、まずはGithubとNetlifyというサービスを組み合わせて、自分専用の検証環境を準備する必要があります。
自分専用の検証環境であれば色々触ってみて壊してしまっても誰にも迷惑をかけません。

###■Git環境の準備
東京都の新型コロナウイルス対策サイトのソースコードはGithubに公開されています。
Githubを使うためにはGitHubのアカウントとGitのインストールが必要です。
今回はGit For Windowsを使うことでGUIでGitの操作を行います。

####（手順）
・GitHubのアカウント登録
https://github.co.jp/

・Git For Windowsのインストール
https://gitforwindows.org/


このあたりは特に予備知識も必要なくサっといけると思います。
Git For Windowsがインストールできたら早速環境をコピーしましょう。

###■プログラム一式のコピー
Git使える環境ができたらGit hubの自分のアカウントに既存の環境を複製して、
複製した環境（クラウド）からさら自分のPC（ローカル）に複製します。

####（手順）
**・Fork**
これはGit hubにログインした状態で、対象のページで「Fork」というボタンを押すだけです。
※私は東京都からForkをせずに、既にForkされてた某環境からForkしました。

**・ローカルにClone**
Git For Windowsを使ってローカル環境にCloneします。
今度は「Clone or download」というボタンを押して表示されるURLをコピーして、
Git For Windowsの「File > Clone Ripository」のURL欄にペースト。
コピーするフォルダを指定してCloneボタンを押すと数十秒で複製完了しました。


###■Netlify環境の準備
新型コロナウイルス対策サイトはNode.jsな環境なので普段プログラムを書かない私にとっては、
Node.jsの環境構築からとなるとチョット大変です。
そこでNetlifyというサービスを使って環境を作ります。

自分のパソコンに環境を構築すると無料なのがメリットなのですが、
Netlifyも今回は無料の範囲で使えますのでご安心ください。

####（手順）
**・Netlifyのアカウント登録**
先程作ったGithubアカウントを使って登録できます。
https://www.netlify.com/

**・GitHubアカウントとの連携**
「New site from Git」から連携しましょう。


以上で環境構築は完了です。
ここで設定が間違っていると正常にサイトが表示されません。
「Page Not Found」となる場合は設定を見直すか、
一度「Push」を行うと正常に表示される事があります。

次は、実際にソースコードをいじってみます。

###ソースコード変更環境の準備
ソースコード変更と言うとハードルが高いように思えますが、
コードの中にはプログラムだけでなく、日本語や画像なども含まれます。
今回は、サイトの一番上に注意書きを足してみました。

####（手順）
**・ファイル検索**
ぶっちゃけファイル数が多く、どのファイルを触っていいか分からないです。
今回は「秀丸」と呼ばれる高機能なテキストエディタを使用し、
編集したい日本語が含まれるファイルを検索しました（grepという機能）。

**・編集**
検索でヒットしたファイルを任意のテキストエディタで開いて該当部分を編集します。

**・Git For Windowsで「Push」**
Git For Windowsは複製した環境に変更があると表示され、
「Push」を行うことでクラウド上の環境にローカルの変更を反映することができます。

変更の反映には数分かかる場合があります。
少しHTML/CSSの知識があると↓のような文言を追加することも可能です。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273740/aa0ddfc1-a95f-1b12-a77a-760ce728b673.png)

※検証環境とはいえ、URLを叩けば対策サイトが表示されるので、勘違い・誤情報の拡散を防ぐために大きく注意書きを挿入しました。


##終わりに

OSSプロジェクトって知らない人達と関わる事が多く、
その中で自分の役割がわからないと一言も発すること無くプロジェクト終了してしまったりあると思います。

「まずはREADMEくらい読んでくれ」と言われて心を痛めることもあるかと思います（痛めました）。

実際はやれリポジトリだプルリクエストだと分からない言葉が出てくると思うのですが、
「README読んで、ForkしてCloneして確認してたらわからないことがあって・・・」と聞くと皆さん教えてくれるし、
「タイポ見つけたんで修正しときました！」って言えるだけでもカッコいいと思います。

プログラムは書けないけど日本語の修正できるだけで、コントリビューターになるチャンスはあるので、
今後も積極的に参画していきたいと思います。

逆に自分主体でOSSプロジェクト立ち上げたい時も、
一通り触ってるだけでプログラマのメンバーも勧誘しやすくなると思います。
ls をオプションつけずに実行する方法

## 概要
Linux系OSで、ls コマンドを多用する。
OS によっては、ls コマンドに alias を設定していてくれる。

例） CentOS

```
$ alias
alias l.='ls -d .* --color=auto'
alias ll='ls -l --color=auto'
alias ls='ls --color=auto'
```

すると、ls コマンドを実行したディレクトリ配下にファイルが多かった場合に
結果が返ってくるのに時間がかかってしまうときがある

そういうときは、`ls -f` オプションをつけると、
何もソートやカラーなど余計なオプションをつけずに ls を実行してくれる
【Rails】setupメソッド

#setupメソッド
テストファイル上で記載するメソッドで、各テストが走る前に実行されるメソッド。
またsetupメソッドでインスタンス変数を定義すれば全てのテスト内で、そのインスタンス変数が使用可能になります。

##実行例

```test/models/user_test.rb
require 'test_helper'

class UserTest < ActiveSupport::TestCase

  def setup
    @user = User.new(name: "Example User", email: "user@example.com")
  end

  test "should be valid" do
    assert @user.valid?
  end
end
```
こうすることでテストである`should be valid`が走る直前に`set up`が実行されるようになります。
`assert @user.valid?`の`@user`は`set up`から持ってきています。
Vulkan texture mapping のメモ


# texture wrap mode

OpenGL での glTexParameteri での GL_TEXTURE_WRAP_S(_T, _W) 相当

VkSamplerAddressMode で指定する. U, V, W それぞれに設定する.

https://www.khronos.org/registry/vulkan/specs/1.2-extensions/man/html/VkSamplerAddressMode.html
疑似要素、疑似クラスについて

# まず疑似要素、疑似クラスって何？
CSSでよく使われている疑似要素と疑似クラス。
よく使われる物としては::afterや:hoverなどがありますよね。
ちなみに::afterは疑似要素、:hoverは疑似クラスとなっています。
ではそれぞれの違いについてまとめていきたいと思います。

#疑似要素とは？
「擬似要素とは、選択された要素に対してスタイルを適用することができます。」
これだといまいちわかりづらいと思いますので例をあげたいと思います。
例えば以下のように擬似要素を使わずに文字の最初の文字だけ色を変えたい場合はこうなります。

```html:html
<h1><span>サ</span>ンプルテキスト</h1>
```
```css:css
span{
 color: #f00;
}
```

しかし擬似要素を使えばこうなります。

```html:html
<h1>サンプルテキスト</h1>
```

```css:css
h1::first-letter{
 color: #f00;
}
```

無駄なspanタグを記述しなくてよくなりました。
このように選択された要素の特定の部分を指定して修飾するものを擬似要素と言います。
ちなみにCSS3から疑似要素は疑似クラスとの区別をつけるためにコロンを２つ付けるようになりました。
(ですが１つでも表示はされます。)

##どんな擬似要素があるか
- ::before
- ::after
- ::first-letter
- ::first-line

など

実際に擬似要素を適用させたのがこちら
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="gb-sweep" data-slug-hash="YzXLNxK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Pseudo-elements">
  <span>See the Pen <a href="https://codepen.io/gb-sweep/pen/YzXLNxK">
  Pseudo-elements</a> by taka (<a href="https://codepen.io/gb-sweep">@gb-sweep</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>





#疑似クラスとは？
擬似クラスは選択される要素の特定の状態の時にスタイルを適用させるものです。
こちらはまだわかりやすいとは思いますがもう少しわかりやすく説明するならば、
よく使われるa:hoverがあると思います。リンクをホバーした際にそのスタイルが適用されます。
このようにaの要素にカーソルが合わさった(特定の状態)時にスタイルが適用されるものが擬似クラスといいます。

##どんな擬似クラスがあるのか
- :hover
- :active
- :checked
- :nth-child(n)

など

実際に擬似要素を適用させたのがこちら
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="gb-sweep" data-slug-hash="MWwGoOQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Pseudo-classes">
  <span>See the Pen <a href="https://codepen.io/gb-sweep/pen/MWwGoOQ">
  Pseudo-classes</a> by taka (<a href="https://codepen.io/gb-sweep">@gb-sweep</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#最後に
擬似要素と擬似クラスについて書かせていただきました。
今回紹介させていただいた擬似要素と擬似クラス以外にもたくさんのものがありますのでそれらを活用していけば様々な表現をすることができると思います。
また「CSSだけで描いてみたシリーズ」でもよく使われていますのでもし興味のある方は、これらの擬似要素や擬似クラスを使ってCSSだけで何か描いてみるのも面白いかもしれません。

##共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくは[Wantedly](https://www.wantedly.com/projects/134741)からお問い合わせください。
VBは、言語の発展は終了へ。今後の、.NET Coreの新機能には対応しない。

VBは、言語としては終了へ。今後の、.NET Coreの新機能には対応しない。

[「Visual Basic」は.NET Coreでもサポートを継続 ～ただし、言語としての発展は終わり](https://forest.watch.impress.co.jp/docs/news/1240998.html)

とのことで、これを告知したMicrosoftのページのコメント欄は、ユーザーの声で大荒れです。

- VBのみを利用していて事足りて、他の言語までは必要ないユーザー
- C#の記法よりも、VBの方が分かりやすいのでVBを愛しているユーザー
- 仕方ないね、とあきらめているユーザー

など、ユーザーごとによって、VBを利用している理由が違うんだなぁ、というのが分かります。
[Visual Basic support planned for .NET 5.0](https://devblogs.microsoft.com/vbteam/visual-basic-support-planned-for-net-5-0/)

このコメント欄は、以前、FileMakerProでランタイム版が廃止になる件で、ランタイムを利用していたユーザーがそれを利用できなくなると困るとの声とそっくりです。その時、私もFileMakerから離脱する決断をしたので、このコメント欄に書かれている気持ちはよく分かります。
1つのプラットフォームが無くなる（無くなるというよりは、機能が追加されないので、進化が止まるということですが）のは、それを利用している人にとっては、大問題ですよね。

英語が母国語で無ければ、C#も、VBも、初学者にとっては、どちらも習得の難易度は同じかもしれません（根拠はありません）。であるなら、今後、ビギナーは、C#からスタートするのがいいかもしれません。
プラットフォーマの方針の変更に振り回されたくは無いのですが、オープンソースも更新されず放置されてしまえば同じ（自分でやれというのは困難）ですし、言語にしてもフレームワークにしても、何を採用するのかは難しい。何が正解だったかは、数年あるいは十数年経って分かる感じです。
heroku上のファイルをローカルにコピーする方法（備忘録）

#heroku上のファイルをローカルにコピーする方法

**＜コマンド＞**
`heroku git:clone -a <アプリ名>`


##手順

1. フォルダを保存したいディレクトリに移動
2. クローンのコマンドを入力（heroku git:clone -a <アプリ名>） 




##補足
・現在のフォルダ直下にDLフォルダが作成される
・DLしたフォルダはコミット前
(調査中)WebRTC on RPi4で動かないUSBカメラ

# 状況
[ML2Scratch](https://github.com/champierre/ml2scratch)を、Raspberry Pi 4で動かそうとしたら、動かないUSBカメラがあった。結論から言うと、WebRTC on RPi4 with Busterが、Logitech c270では動かないようである。そして、古い型のカメラのようなのでWebRTCでは当面動く気がしない。暫定回避策として、別のカメラを使っている。

## 切り分け
Scratch3では、Javascriptで書かれている。その延長で、WebRTCを呼び出している(scratch-vmとscratch-gui経由)。ML2Scratchかブラウザかどうかの問題の切り分けのため、WebRTC画面のみのテストを行った。なお、Windows on Intel x86では普通に動くので、Raspberry Pi 4のLinuxかその下のソフトの出来が悪いのかな？とは思う。
WebRTCのみの以下の画面を表示すると、真黒になる。なお、ML2Scratchで見ると、黒いバックグラウンドと猫の画面になる。

- [WebRTC samples getUserMedia](https://webrtc.github.io/samples/src/content/getusermedia/gum/)

試してみた結果は以下のとおりである。

|機種名|USB2|USB3|luvcview|
|:--:|:--:|:--:|:--:|
|Logitech C270|×|×|〇|
|Elecom UCAM-C520FEBK|〇|〇|〇|

## 状況
[RaspberryPi Forum(2020/3/18)に投げてみた。](https://www.raspberrypi.org/forums/viewtopic.php?f=28&t=268250)結構たくさん問題が上がっているようなので、放置される気がする。
時間があったら調べてみたいが、時間がないので残念ながらペンディング中。

# 付録
## デバイスの確認
デバイスは、LinuxのコマンドおよびChromeで確認することができる。Linuxの場合は以下のコマンドで見ることができる。

### Linuxの場合

```bash
$ lsusb
```
動いているドライバーのリスト

```bash
$ lsmod -v
```

### Chromeの場合
Chromeだと、以下でメディアの状況を確認することができる。しかし、普通に認識されている。

- [chrome://media-internals](chrome://media-internals/)
- [chrome://webrtc-internals](chrome://webrtc-internals/)

Raspberry Piで動いているカメラの有志によるリストを確認してみる。Logitech C270は、相性問題があり動かない時がある模様である。

- [RPi USB Webcams](https://elinux.org/RPi_USB_Webcams)

最後に、Chromiumの障害リストを見てみる。ここではChromiumの74から78まで修正らしきものが入った様子はない。

- [Chromium WebRTC](https://bugs.chromium.org/p/webrtc/issues/list?sort=-modified)

## Raspberry Pi 
- [Troubleshooting](https://www.raspberrypi.org/forums/viewforum.php?f=28)
   - [WebRTC is not working on chromium-browser with logitech c270 on RPi4 (Buster)](https://www.raspberrypi.org/forums/viewtopic.php?f=28&t=268250)

## Linuxのソフトスタック
- [USB Video Class Gadget Library - libguvc](https://developer.ridgerun.com/wiki/index.php?title=USB_Video_Class_Gadget_Library_-_libguvc#UVC_and_libGuvc)

## Scratch3の呼び出しパス
VideoSensingから、通って最終的にJavascript([getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia))を呼び出している。このため、WebRTC依存である。

- [scratch-vm/src/extensions/scratch3_video_sensing/](https://github.com/LLK/scratch-vm/tree/develop/src/extensions/scratch3_video_sensing)
- [scratch-gui/src/lib/video/camera.js](https://github.com/LLK/scratch-gui/blob/develop/src/lib/video/camera.js)
Go言語でSliceに要素が存在するか調べるには、要素個数を見るだけで良い ( #go : Error:  slice index out of range <nil> )

```golang
if len(mySlice) > 3 {
    // ...
}
```

[How to check if a slice has a given index in Go? - Stack Overflow](https://stackoverflow.com/questions/27252152/how-to-check-if-a-slice-has-a-given-index-in-go)

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
GoogleAppsScript CacheService PropertiesService

GASでデータの保存方法の２つのやり方を備忘
どちらも文字列での保存になるけど、Javascriptなら文字列化とその復号は簡単なので問題ないかと。

#1.PropertiesService
[リファレンス](https://developers.google.com/apps-script/reference/properties/properties-service)
DocumentとScriptとUserとあるけど、普段はScriptを使っている。

```javascript
  let scriptProperties = PropertiesService.getScriptProperties();
  let props = scriptProperties. getProperty("property-key");
  ...
  ...

  scriptProperties. setProperty("property-key",props);
```
あまり特別なことはない。
***スクリプトプロパティにセットした値は、スクリプトエディターで確認できる。***
永続的に使えるので、ソースコードやスプシに書かない設定等でつかっている。

#2.CacheService
[リファレンス](https://developers.google.com/apps-script/reference/cache/cache-service)
こちらも、DocumentとScriptとUserとある。
ユーザー共通のキャッシュデータはScriptキャッシュ、ユーザー固有のキャッシュはUserキャッシュ、となるだろうか。（ScriptキャッシュでもUserごとにキーに付け加えればできちゃうけど）

```javascript
  let cache = CacheService.getScriptCache();
  let cacheData = cache.get("cache-key");
  ...
  ...

  cache.put("cache-key",cacheData,3600);

```
propertiesがgetProperty、setPropertyなのにcacheはget、put。
put時には、expirationInSecondsのオプションがあるので、何秒キャッシュするか設定する。

こちらは、かなり短期、少量のデータキャッシュとなるけど、他のシートのデータを一時的に保存したり、シートを扱ってるユーザーのデータなどをキャッシュするのにはよいのでは。
キーの長さ：２５０文字
データ：１００ｋｂ
最大保存期間：21600秒（ただしキャッシュ溢れで削除の可能性あり）

リファレンスのソースにあるように、キャッシュにあったらキャッシュをかえし、なかったらデータを取りに行くようなコードがメインになると思います。

キャッシュデータを見る方法は自分でコードから取る以外なさそう。
部分テンプレートとは？

## 部分テンプレートってなんなの？？
部分テンプレートとは・・・
`複数のビューファイルの中で使われている部分を一つのビューファイルとして管理すること。`

つまりどういうことかというと複数回使うビューをテンプレート化してしまうことで冗長な記述が必要なくなるというとっても便利かつ簡単なテクニックです。


## 部分テンプレートを作成する

部分テンプレートのビューを作成するときの注意点としてビューファイルのファイル名の先頭の部分に`_ (アンダーバー）`をつける必要があります。
例えば、呼び出したい部分テンプレートファイルが`header.html.erb`だとすると、
`_header.html.erb`と書き換えましょう。

## 部分テンプレートの呼び出し方

当たり前ですが、実際に部分テンプレートを呼び出すためのメソッドがあります。それが
`renderメソッド`　です.

```ruby:_header.html.erb

render 'ファイル名'  #'ファイル名'で部分テンプレートの呼び出し

render partial: 'ファイル名' #partialはつけてもつけなくても可

```

このように記述していくことで部分テンプレートが使用できて、同じようなコード再度記述していく必要がなくなります！便利ですよね。

`haml`で書くとどうなるのかというと

```ruby:_header.html.haml

= render 'ファイル名' #=でくくってあげちゃうだけ

```



`renderメソッド`にはもっと活用できるオプションがあるみたいなので詳しく知りたい方は検索してみましょう（優秀なエンジニアに丸投げ）


以上です。至らない点があればコメントお願いします。
Mix usage of Promise async-await and then-catch

# Reference
http://blog.kueiapp.com/en/programming/understand-promise-in-5-minutes-javascript/

```js

function myPromise(val) {
  return new Promise((resolve, reject) => {
    if (val > 5) {
      resolve("resolved"); // ok
    }
    else {
      reject("rejected"); // rejected
    }
  });
}

// just use async-await
async function apicall() {
  try {
    const result = await myPromise(3)
    console.log(result)
  }
  catch (error) { // undefined & exception
    console.log(error)
  }
}

// use async-await and then-catch
async function apicall2() {
  const result = await myPromise(9)
  .then((re) => { return re; })
  .catch((error) => {
    console.log(error)
    return Promise.reject([]);
  })

  console.log(`result2: ${result}`)
}

async function apicall3() {
  const result = await myPromise(8).catch((error) => {
    console.log(error)
  })

  console.log(`result3: ${result}`)
}

apicall3();
apicall2();

apicall();

```

Those ways are avaliable to perform, but I personally prefer apicall3() because async-await is a wrapper to return resovled data back.

It make more sences and be clearer than apicall2() when you want to use both await and Promise.then() methods.

```js

async function apicall0() {
    const result = await myPromise(3)
    if(result===undefined){
        console.log('error')
    }
    console.log(result)
// DeprecationWarning: Unhandled promise rejections are deprecated. 
//In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
}

apicall0(); // terminated in error
```
# Reference
http://blog.kueiapp.com/en/programming/understand-promise-in-5-minutes-javascript/
Hamlとは

##Haml
HTMLよりも簡単に書くためのビューテンプレートエンジンです。
Hamlを使用することで、「綺麗に」、「読みやすく」、「生産的に」ビューを作成することができます。
##HamlのGem
Haml記法を可能にするhaml-railsというGemが提供されています。このGemをプロジェクトにインストールすることで簡単にHamlを導入することができます。また、既存のerbファイルをHaml記法に変換することもできます。
Gemfileの一番下に記述します。

```
gem "haml-rails"
```
```
bundle install
```
ターミナル

```
$ rails haml:erb2haml
```
でerbのファイルをhamlに変換します。
##Hamlの記述(タグ)その１
【例】HTMLの場合

```
<form>
  <input type="submit">
  </input>
</form>
```
【例】Hamlの場合

```
%form
  %input{type: "submit"}
```
##Hamlの記述(タグ)その２
【例】HTMLの場合

```
<% messages.each do |message| %>
  <%= @message.content %>
<% end %>

<%= link_to messages_path, class:"contents" do %>
  <%= @message.name %>
<% end %>
```
【例】Hamlの場合

```
- messages.each do |message|
  = message.content

= link_to messages_path, class:"contents" do
  = @message.name
```
##Hamlの記述(クラス)
【例】HTMLの場合

```
<div class="top">
</div>

<div class="main center">
</div>

<form class="down">
</form>
```
【例】Hamlの場合

```
.top

.main.center

%form.down
```
プロキシ環境配下にてOpenShiftをデプロイするには

# 前提

OpenShiftをデプロイしようとすると、インターネットへ非常に多くの通信が発生する。
このとき、デプロイ先がプロキシ環境配下にある場合、まず間違いなくデプロイが失敗する。
そりゃ外部に通信できないのだから当たり前。

# 環境

* OpenShift v4.3.3

※ただしv4.2.xでも動作実績あり

# 方法

ばっちりな内容が既に日本語で公開されている。さすがRedHat様。ありがとうございます。

* [https://rheb.hatenablog.com/entry/openshift42-proxy-upi](https://rheb.hatenablog.com/entry/openshift42-proxy-upi)

基本的には↑を見れば解決するのだけど、手っ取り早く何をやれば良いのかを記しておく。

install-config.yamlに下記を追加する。

```install-config.yaml
proxy:
  httpProxy: [proxy_server_url]
  httpsProxy: [proxy_server_url]
  noProxy: 127.0.0.0/8,10.0.0.0/8,172.16.0.0/12,192.168.0.0/16
```

noProxyにはプロキシを経由させたくないIPアドレスやサブネットなどを指定する。
Linuxの環境変数におけるno_proxyと違ってネットワーク単位で指定可能。
なので、プライベートネットワークのCIDRを丸ごと指定してしまうと便利だと思う。
もちろん、プライベートネットワーク内でもプロキシ経由しないと通信できない場所があるのなら話は別だけど。

また、プロキシをHTTPSで構成している場合、SSL証明書を組み込まないと通信できない可能性がある。
そのときは、`additionalTrustBundle`を使って指定する。

```install-config.yaml
additionalTrustBundle: |
    -----BEGIN CERTIFICATE-----
           [cert_pem]
    -----END CERTIFICATE-----

proxy:
  httpProxy: [proxy_server_url]
  httpsProxy: [proxy_server_url]
  noProxy: 127.0.0.0/8,10.0.0.0/8,172.16.0.0/12,192.168.0.0/16
```

# 参考

改めて。助かりました。ありがとうございました。

* [https://rheb.hatenablog.com/entry/openshift42-proxy-upi](https://rheb.hatenablog.com/entry/openshift42-proxy-upi)
【JavaScript】スクロールで要素をフェードアウトさせる


```main.js
window.onscroll = function(){
  function fadeOut(el, duration) {
    var node = document.getElementById(el);
    var start = performance.now();
    requestAnimationFrame(function tick(timestamp) {
      // イージング計算式（linear）
      var easing = (timestamp - start) / duration;
      // opacityが0か1から変数easingを引いた値をopacityに渡す
      node.style.opacity = Math.max(1 - easing, 0);
      // イージング計算式の値が1より小さいとき
      if (easing < 1) {
        requestAnimationFrame(tick);
      }
      else {
        node.style.display = 'none';
      }
    });
  }
  var scrollTop = window.pageYOffset ;
  if(scrollTop = 0) fadeOut('fadeout', 100);
}
```
```index.html
 <div id="fadeout">フェードアウトさせる要素</div>
```

##解説
ページトップのときの要素を非表示にさせる処理。
requestAnimationFrameの中の処理はeasingが1より小さい値のときに、取得したDOM要素が

- opacity:0;
- display:none;

になる処理をする。
###timestamp
perfomance.now()よりは取得する速度は遅い。でもどうやって取得してるかがわからない。

##おわりに
逆に解説していただけたらありがたいです。一応コピペで使えます。
Go言語でSliceを要素に持つStructを定義する例 ( #Go )

```golang
package main

import "fmt"

type Card struct {
	Names []string
}

func main() {
	card := Card{[]string{"Ace", "Jack", "King"}}

	fmt.Println(card.Names[0]) // Ace
	fmt.Println(card.Names[1]) // Jack
	fmt.Println(card.Names[2]) // King
}

```

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Go 言語の 文字列・数値変換で使う  Atoi や Itoa の名前の由来はなんなのか？ ASCII to Integer / Integer to ASCII の略ですね。

あとい、、？ いとあ、、？

最初何かと思っていたけれど。

いろいろと略すのがGo流っぽい。

[c - Where did the name `atoi` come from? - Stack Overflow](https://stackoverflow.com/questions/2909768/where-did-the-name-atoi-come-from)

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
[Unity] 不要なパーミッションを削除する話

アプリをアップロードしようとしたら，こんな警告が出てしまった．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487681/946bf5a0-843e-1c6b-0890-81abb24af262.png)

意図してないところで，`READ_PHONE_STATE`の権限がついてしまっていたらしい．警告なので無視して，ストアにアップロードすることはできけど，不必要なので削除することにします．

## 削除方法
今回は`AndroidManifest.xml`で上書きして削除する方法をとりたいと思います．
書き換える`AndroidManifest.xml`は, `プロジェクト/Assets/Plugins/Android/`にあるものを書き換えます．

ここにないよ！って方は,　いったんアプリをビルドした後に，`プロジェクト/Temp/StagingArea/AndroidManifest.xml`の中身をコピーして置いてください．

次に削除する記述を書きます．

``` AndroidManifest.xml
<uses-permission android:name="android.permission.READ_PHONE_STATE" tools:node="remove" />
```

これを記述する位置は，

``` AndroidManifest.xml
<manifest ...>
  ...ここの位置
  <uses-permission android:name="android.permission.READ_PHONE_STATE" tools:node="remove" />
  <application ...> 
```

になります．もうすでにほかの権限を与えているときは，`<uses-permission android:name=...>`があると思うので，その近くに書いてあげるといいと思います．

これでビルドしたときに，`XmlException: 'tools' is undeclared namespace.` みたいな toolsってやつがないよっていうエラーが出た場合は，以下のものを追記してください．

```AndroidManifest.xml
xmlns:tools="http://schemas.android.com/tools"
```

追記する位置は`<manifest>`の中に書きます．

これでビルドすると`READ_PHONE_STATE`の権限が外れた状態でビルドができていると思います．

`READ_PHONE_STATE`以外の権限も消したいときにも消したい権限を書き換えればできます．
## 参考
https://forum.unity.com/threads/sudden-error-unable-to-merge-android-manifests.490096/
Qiitaにtwitterを埋め込む方法

#Qiitaにtwitterを埋め込む方法

twitterのメニューから、「ツイートを埋め込む」でコードをコピーし貼り付けるだけ。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Qiitaの「いいね」が「LGTM」に変わります。<br>詳しくはこちらの記事をご確認ください💁‍♀️<a href="https://t.co/ToqYDaVFLB">https://t.co/ToqYDaVFLB</a></p>&mdash; Qiita (キータ) 公式 (@Qiita) <a href="https://twitter.com/Qiita/status/1238019414378680321?ref_src=twsrc%5Etfw">March 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<br>
##埋め込み用コードのコピー手順

**①twitter右上のメニューをクリック**

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/ebf01bfd-c3e3-4567-c473-efea6b73682a.png)|
|:--|

<br>
**②「ツイートを埋め込む」を選択**

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/6be65be6-3a95-73eb-ec58-457badabc2e6.png)|
|:--|

<br>
**③「Copy Code」をクリック**

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/5307aa48-bde0-f661-466f-e701a96376e8.png)|
|:--|

<br>
**④Qiitaに貼り付け**
プレビュー上では引用でテキスト部のみが表示される

```
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Qiitaの「いいね」が「LGTM」に変わります。<br>詳しくはこちらの記事をご確認ください💁‍♀️
<a href="https://t.co/ToqYDaVFLB">https://t.co/ToqYDaVFLB</a></p>&mdash; Qiita (キータ) 公式 (@Qiita) <a href="https://twitter.com/Qiita/status/1238019414378680321?ref_src=twsrc%5Etfw">March 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
```


<br>
以上
Go 言語で declared but not used のエラーを回避したい。未使用変数だが名前はつけておきたい時は？  ( #go )

未使用変数を無理やりアンダースコアに代入してエラーを防ぐ。

```go
package main

func main() {
	foo := "bar"

	_ = foo
}
```

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
SKYSEAのリモート機能がESETで遮断される

#SKYSEAのリモート機能がESETで遮断される
ESETのファイアウォールでSKYSEAを除外する方法を調べるのに時間がかかったので、対応方法をメモします。

###クライアント側の操作
まずはSKYSEAでクライアントにリモート接続を行い、リモートが遮断された端末にRDPでログインします。そしてESETの画面を開き、「設定 -  ネットワーク」をクリックします。
![2020-03-16_15h19_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/3359fb59-0bec-4fb5-97f0-f008169789c7.png)

"トラブルシューティングウィザード"をクリック
![2020-03-16_15h19_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/6266aa53-52e4-bd97-c524-71fdd7ad5a8f.png)

"詳細"をクリック
![2020-03-16_15h19_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/4cab5d1c-3d2c-66d3-321b-64787d8132cc.png)

ブロックされたアプリケーションのフルパスが表示されているので、これをメモします。
(この内容をESETのポリシーに記載して配信します)
![2020-03-16_15h20_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/f0071ac2-c2d2-2f3e-fa05-3bed00179c6a.png)

###ESET管理者画面にログインします。

既存のポリシーがある場合は編集、ない場合は追加を行います。
![2020-03-16_15h26_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/31b072ed-6d87-b95c-ed79-777543c12f1f.png)

既存のファイアウォールポリシーの編集を行います。(ない場合は追加)
![2020-03-16_15h28_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/89090d15-8ff9-4084-5991-5fa6deb787ac.png)

ファイアウォールルールを編集します。(ない場合は追加)
![2020-03-16_15h30_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/3bdd1f4c-ca50-bca5-6e0d-ee1d8fb8eb1a.png)

ファイアウォールのルールで"ローカル"タブを開き、アプリケーションに先程メモした"ブロックされたアプリケーションのフルパス"を入力します。
![2020-03-16_15h31_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/5e87a51f-ef9a-5267-4a0d-1b07a214e3fa.png)

###ポリシーを即時反映したい場合

コンピュータから即時反映したい端末を選択して左クリック。
"ウェイクアップコールの送信"をクリックする。
通常は20分に1回の通信だが、即時通信が実行される。
![2020-03-16_15h35_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/f2918ef9-8af0-94bf-09b6-b321d182582d.png)
RubyとPythonにおける、外部ソースコードを読み込む書き方の違い

# これは何？

RubyとPythonの両方でプログラムを書いていると、外部ソースコードを読み込む書き方が「どっちがどっちだっけ？」と混乱することがあります。そうした場合に向けての備忘録です。

# Rubyの場合

```ruby:
require './foobar'
```

* モジュール名を含むパス全体を`require`の後に書く
* モジュール名を引用符で囲う必要がある

# Pythonの場合

```python:
from . import foobar
```

* パス指定でモジュールをインポートする場合、モジュール名を除くパスを、`from`の後・`import`の前に書く
* モジュール名は`import`の後に書く
* モジュール名を引用符で囲う必要はない

Pythonの場合、「パッケージ」やらなんやらの関連概念があるが、今回はそうした項目には触れない。