OmniAICreator/Qiita-1.07M huggingface dataset:
ドキュメントヘッダーを設定する

# ドキュメントのヘッダー作成
Asciidocにはドキュメントのヘッダーを記載するマークアップがあります。
PDFで出力した時、HTMLで出力した時で動作は異なるみたいですが、マークアップ自体は共通の用です。

| MarkUp |メモ(自己解釈の説明|
|:-----------|:------------|
| lang|文書の言語？<恐らくメタ情報>|
| doctype     |文書の種類(恐らくこれの指定でマークアップの表現が変化する？)|
| toc       |目次の位置指定？|
| toclevel|目次へ出力する見出しのレベル|
| toc-title| 目次のタイトル
| sectnum       |章見出しを出力するか？|
| sectnumlevels|見出し番号を出力するレベル　1.1.1 の場合は"3"|
| sectlinks    |見出しにリンク(アンカー)を設定するか|
| icons    |恐らくICONを文字で表示するかの指定？|
| example-caption    | サンプルブロックのプリフィックス　例:例1     | aligned      |
| table-caption   |表タイトルのプリフィックス 例:表1      |
| figure-caption  |画像タイトルのプリフィックス 例:図1      |
| docname  | ドキュメントのタイトル     | aligned      |
| author  |作成者||
| revnumber  |改定番号|

サンプルとしてはこんな感じです。

```sample.adoc
:lang: ja
:doctype: book
:toc: left
:toclevels: 6
:toc-title: 目次
:sectnums:
:sectnumlevels: 6
:sectlinks:
:icons: font
:example-caption: 例
:table-caption: 表
:figure-caption: 図
:docname: サンプルAsciidoc
:author: author<autho.example.com>
:revnumber: 0.1
:revdate: 2017/12/25
```

# Gitで表示した時のサンプル
GitHubやGitLabにPushすると、良い感じに表示されました。

![](http://capture.heartrails.com/120x120/cool?https://github.com/asz2145/AsciidocSample/blob/master/Sample01/titleheader.adoc) [GitHubで表示したときのサンプル](https://github.com/asz2145/AsciidocSample/blob/master/Sample01/titleheader.adoc)
MySQL覚え書き

# はじめに
XAMPPでWebアプリケーションを開発するときにPHPから接続するMySQLの設定（コマンド等）についてメモです。
覚え書き＆簡単なコマンドのみなので浅く書きます。
``[ユーザ名]``とかなっているところは各自の設定にしてください。

``'19/5/20 テーブル一覧表示とスキーマ表示を「おわりに」に追記しました。``

# 環境

```
$ mysql --version
mysql  Ver 15.1 Distrib 10.1.31-MariaDB, for Linux (x86_64) using readline 5.1
```

# MySQLコマンド
インストールしたばかりでログインするならこれ。

```
$ mysql -u root
```

rootにパスワードを設定している場合、``$ mysql -u root -p``としたり、ログインしてデータベースにアクセスする場合は``-p``のあとにデータベース名を入力すると一瞬で行ける。
例：hogeというユーザfoo_dbというデータベースにログインする場合。
``$ mysql -u hoge -p foo_db``

## EXIT
MySQLコマンドの状態から抜け出すには
``> exit``もしくは``> quit``で抜け出す。
これはセミコロン要らないんですよね・・・。

# データベース・テーブルの作成
MySQLにログインできたら最初はデータベースの作成を行う。
MySQLコマンドは1コマンドごとにセミコロン`;`が必要。
## データベースの構成
MySQLの構成は以下のようになっている（簡易的）。

```
mysql
├── DataBase1
     ├── Table1
     └── Table2
├── DataBase2
     └── Table3
├── DataBase3
.
.
```

## データベースの作成と権限の設定
データベース名は **test_db** とかでいいと思います。

- データベースの作成  
`` > create database [データベース名];``
- データベース一覧表示  
`` > show databases;``
- データベースにアクセスできるユーザの設定  
`` > grant all on [データベース名].* to [ユーザ名]@localhost identified by '[パスワード]';``
 
## テーブルの作成

- テーブルを作成するデータベースを選択  
`` > use [データベース名];``
- テーブルの作成  
`` > create table [テーブル名] ( [フィールド名] [型] [オプション(複数指定可能)], ...);``

例： 次のような **users** テーブルを作成するコマンド
`` > create table users ( id int not null primary key, name varchar(255), score int);``

フィールド | 型 | オプション
--- | --- | ---
id | int | not null, primary key
name | varchar(255) | 
score | int | 

# おわりに
XAMPPでMySQLにアクセスするときの初期設定的な部分を書きました。
自分が見直すようのメモ程度です。
最後に、 **grant all** で設定したユーザでアクセスできるか確認すると良いかもしれません

```
$ mysql -u [ユーザ名] -p [データベース名]
```
このコマンドを実行してパスワードを入力して無事ログインできたら、その情報をPHPでPDOに流し込むことでPHPとMySQLの連携ができます。


### 追記（おまけ）
 - テーブル一覧表示  
`` > show tables;``
 - テーブルのスキーマ表示  
`` > desc users;``

localhostの部分をIPアドレスとかにしたら特定のMySQL（もといデータベース）にアクセスできるのだろうか、とふと思ったので今度試してみたいです。


Thx to.. https://markdowntable.haramishio.xyz/
【Swift】iOSアプリがフォアグラウンドになった時に、更新処理をさせてみたい！

#きっかけ
iOSアプリがフォアグラウンドになった時に更新処理をさせてみたかったのでググったら
下記のページが出てきた。
[【Swift】iOSアプリがフォアグラウンドになった時に、ViewControllerで更新処理をする](https://qiita.com/kijibato/items/a0b9b956f7a9a35dcf1d)
これを参考にXcode 10.1、swift 4.2.1 で試してみたのですが…。
fixしまくってもエラーが吐かれてしまうので解決したものを記事にしてみました。
まだまだ駆け出しで何をしていいのか判らずに切り貼りしてみました

#コード
いきなりですがコード全文です。

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(ViewController.viewWillEnterForeground(_:)),
            name: UIApplication.willEnterForegroundNotification,
            object: nil)
        
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(ViewController.viewDidEnterBackground(_:)),
            name: UIApplication.didEnterBackgroundNotification,
            object: nil)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    @objc func viewWillEnterForeground(_ notification: Notification?) {
        if (self.isViewLoaded && (self.view.window != nil)) {
            print("フォアグラウンド")
        }
    }
    
    @objc func viewDidEnterBackground(_ notification: Notification?) {
        if (self.isViewLoaded && (self.view.window != nil)) {
            print("バックグラウンド")
        }
    }
}
```

#変更箇所は少し
fixしまくった上で…。どこをどう変更したかは全把握はできてませんが
###引用元
```swift:
NotificationCenter.default.addObserver(
    self,
    selector: #selector(ViewController.viewWillEnterForeground(_:)),
    name: NSNotification.Name.UIApplicationWillEnterForeground,
    object: nil)
```
###今回のコード
```swift:
NotificationCenter.default.addObserver(
    self,
    selector: #selector(ViewController.viewWillEnterForeground(_:)),
    name: UIApplication.willEnterForegroundNotification,
    object: nil)
```
name:の行が一番変わってるかな？
たったこれだけで3日は悩みましたので自分用メモとして残しておきます。
呪文の内容はさっぱりですので[引用元](https://qiita.com/kijibato/items/a0b9b956f7a9a35dcf1d)をご確認ください。
#最後に
タイトルではフォアグラウンドって書いてますが
バックグラウンド移行時でも処理できますよ
処理を思いつかないですけど…。
【Rails】MinitestでStubを作成して例外を発生させる

MinitestでStubを作成して例外を発生させるテストの例

```
test 'APIリクエストでエラーになった場合、エラーのレスポンスが返ること' do
  User.stub :find_or_initialize_by, ->(*_args) { raise 'Error' } do
    post(user_path, params: @params)
  end
  assert_response :internal_server_error
end
```
Jupyter上でShell command loop

Jupyter上でshell command loopできないかな？と思ってやってみたら、できたのでメモ。

### 例

``` python
for i in range(10):
    ! echo {i}
```

### 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30977/863f8e37-ec17-67ca-a9c4-82cf100310d2.png)

引数付きのCを走らせたいけど、shell scriptとか色々書くのがだるい時に便利かも？
【Rails】マイグレーションでカラムの型を変更する

# 環境

- Ruby: 2.6.3
- Rails: 5.2.3
- PostgreSQL: 9.6

# 書き方
```
class ChangeColumnsToUser < ActiveRecord::Migration[5.2]
  def up
    change_column :users, :birthday, :date, using: "birthday::date", comment: "生年月日"
    change_column :users, :sex, :integer, using: "sex::integer", comment: "性別"
  end

  def down
    change_column :users, :birthday, :text, comment: "生年月日"
    change_column :users, :sex, :text, comment: "性別"
  end
end
```

# 補足
usingオプションを付けないとこのようなメッセージが表示され、マイグレーションが失敗します。

```
HINT:  You might need to specify "USING birthday::date".
```
実装がイメージできない -ヘルスケアwebサービスを自分で作る医者の日記- 

最初は写経がよいと聞き

ひたすら以下を、理解しながらターミナルで実行してみる


https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AERuby%E5%85%A5%E9%96%80-%E8%A8%80%E8%AA%9E%E4%BB%95%E6%A7%98%E3%81%8B%E3%82%89%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA%E3%83%BB%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E6%8A%80%E6%B3%95%E3%81%BE%E3%81%A7-Software-Design-plus%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4774193976

理屈は理解できた。

しかし、実装の具体的なフローがイメージできないのよね
何が作りたいか定まっていないせいもあるかもしれないが、、、

明日の勉強会に出席してみる。
Excel VBAコース第6回内容

全12回 Excel VBAコースの第6回の内容です。

#2次元配列
2次元配列を使うことで、複数行×複数列のデータを持つことができます。
配列の宣言時の添え字を2つ書くと2次元配列になります。

```
Dim 配列(縦(行),横(列)) As Integer

'例
Dim Array(4,3) As Integer
```

上記例の場合、下の表のようにデータが入ります。

|   |   |   |
|:------------------:|:------------------:|:------------------:|
| 0 , 0    |    0 , 1 |      0 ,2   |
| 1 , 0    |    1 , 1 |      1 ,2   |
| 2 , 0    |    2 , 1 |      2 ,2   |
| 3 , 0    |    3 , 1 |      3 ,2   |
Next.jsでtitleやmeta tagがSSRされない原因

# 環境
- next@8.1.0
- redux@4.0.1
- redux-persist@5.1.0
- styled-components@4.1.3
- firebase@5.8.0
- typescript@3.2.1

# titleやogpをSSRする方法
Headタグ内へ任意のタグを入れることでSSRできる
[参考](https://github.com/zeit/next.js/#populating-head)

今回の場合はこの方法でもSSRされなかった

# 原因
redux-persistはブラウザのstorageへアクセスするのでinternal serverでstorageへのアクセス待ちになり下層のpagePropsのcomponentはSSRされない
また、authenticatedでredirectや表示分けをする場合もclientで処理が終わらなければ下層componentへアクセスできないのでmeta tagはSSRされない

今回の読み込み順番としては...
1. _app.tsx内のPersistGateの前までSSR
2. SSR終了後、clientでtitle,ogpレンダリング

なのでnetwork panelからtitleやogpを確認してもレンダリングされていないことになる

[redux-persistのssr error issue](https://github.com/rt2zz/redux-persist/issues/457)

# 解決策
PersistGateの使用をやめclient読み込み時にstorageへアクセスするようにする
https://github.com/rt2zz/redux-persist/issues/457#issuecomment-362490893
SparkStreamingにJMXを接続して調査を行う

SparkStreamingで発生した問題の調査を行うためにJMXを有効化し接続する手順について記述します。

# Spark executorでJMXを有効にする

JavaアプリケーションでJMXを有効にした際には`-Dcom.sun.management.jmxremote.port`オプションでで任意のポート番号を指定すると思いますが
Sparkアプリケーションの場合、一台のサーバで複数のexecutorが立ち上がる場合がありポート番号が重複した場合に後から起動したexecutorが全てエラー終了します。
値を0にすると空いているポート番号を適当に選んで使用するようになるので、そのように設定してspark-sumitを行います。

```bash
spark2-submit \
    --master yarn \
    --conf "spark.executor.extraJavaOptions= \
        -Dcom.sun.management.jmxremote \
        -Dcom.sun.management.jmxremote.port=0 \
        -Dcom.sun.management.jmxremote.authenticate=false \
        -Dcom.sun.management.jmxremote.ssl=false"
    --class SparkApp \
    sparkApp.jar
```

ちなみにdriverの調査を行いたい場合は`spark.driver.extraJavaOptions`に同じオプションを渡せばJMXを有効化出来ます。

# JMXを接続する

## Sparkアプリケーションを実行しているサーバーを明らかにする

Sparkはクラスター上で実行されるので実行されているサーバーがいつも同じとは限りません。
色々方法があると思いますが私はSparkのWEB UI上からexecutorタブを開いて調べることが多いです。

## executorがバインドしているポートを調べる

ランダムに割り当てられるので実行中のサーバーに上でJVMがバインドしているポートの一覧を出します。
lsofとgrepなどを駆使すれば出せると思います。

# JMXクライアントを接続する

JMXクライアントは様々な物がありますが今回はJavaに標準でついてくるJava VisualVMを選びました。

パスが通っていれば下記で起動できると思います

```
jvisualvm &
```

![スクリーンショット 2019-05-13 19.20.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189239/c33d1611-583e-e36b-2f53-d32ddc59657f.png)

実行中のSparkStreamingの調査やヒープダンプを行うことができました。
（画像はイメージです）

# 参考資料
https://docs.oracle.com/javase/jp/1.5.0/guide/management/agent.html
https://stackoverflow.com/questions/45435237
pymysqlでRDS（Aurora）にIAM認証でアクセスする

mysql.connectorの例しか見つからなかったので、pymysqlで接続する場合のサンプルを上げておきます。


```python:
import boto3
import pymysql

# RDSの情報をセット
RDS_HOST = 
RDS_USER = 
RDS_PORT = 
RDS_REGION = 
RDS_DATABASE = 

rds = boto3.client('rds')


def create_connection():
    # 認証用のトークンを設定
    password = rds.generate_db_auth_token(
        DBHostname=RDS_HOST,
        Port=RDS_PORT,
        DBUsername=RDS_USER,
        Region=RDS_REGION
    )

    connection = pymysql.connect(
        host=RDS_HOST,
        user=RDS_USER,
        password=password,
        db=RDS_DATABASE,
        charset='utf8',
        cursorclass=pymysql.cursors.DictCursor,
        ssl={'ca': 'rds-combined-ca-bundle.pem'}
    )

    return connection
```
SN11122でUSB DAIを作ってみた

ジャンクなヘッドセット（たしか猛牛さんの白いやつ）からはがしたSN11122を使ってI2SのUSB DAIを作ってみました。

このチップは台湾のSonix Technologyという会社の2005年くらいの製品で、サンプリングは48Kが最大で、ビット数は16です。

ヘッドセットではAC97(VT1612A)なチップが接続されてAC-linkとして使われていました。

このチップのデーターシートは手に入らなかったのですが、SN11121とSN11220のデータシートは手に入ったので、参考にしました。

元の回路をマイクロスコープで確認して試行錯誤しました。

![写真（2019-05-13 15.32）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/babb0ec8-8f60-3738-402f-281432b4da75.jpeg)

ヒートガンで一気に部品をはがしたのですが、部品をはがした方が回路は追いやすいですが、細かく部品の再利用ができなくなります。

ピンのアサインがSN11121やSN11220とも微妙に違っています。

|Pin No.|Pad Name|
|:---|:---|
|8|CODECSEL|
|9|TAVDD/AVDD|
|10|USBDP|
|11|USBDN|
|12|TAVSS/AVSS|
|14|RSTN|
|19|BCLK|
|20|LRCLK|
|21|SDATA|
|22|MCLK|
|26|LFA|
|33|XOUSB|
|34|XIUSB|
|35|VSS|
|36|VDD|
|46|(VDD)|
|47|LFB|
|48|(VSS)|

とりあえずMacのUSP Proberで認識できるようにして、後は周波数カウンターでI2S信号を確認しました。USP Proberで最初はうんともすんともいわなかったんですが、いろいろいじってたら、ログでエラーメッセージが出たので、ちょっとヒントになりました。

![写真（2019-05-14 9.08）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/342873ec-e1bb-152f-d841-8339648fa080.jpeg)

6Mの水晶と裏につけた3.3Vのレギュレータ(APL5508)は再利用品です。Aitendoのこの変換基板(QFN(0.5)48P-DIP48)はわかりやすいのですが、ちょっと大きいです。

EEPROMはつけません。この手のチップはEEPROMをつけないとデフォルトのUSBディスクリプタになります。

CODECSELを1にするとI2Sになります。

LFAとLFBの回路はSN11220のデーターシートを参考にしました。

水晶はXOUSBを直に接続するとちょっと安定しないようだったので330Ωをはさみました。

TDA1543,AK4382A,FN1242,PCM5102でチェックしてすべて問題なく音がでました。
エクセルの表をMarkdown形式に変換する

# はじめに

エクセルで書いた表をMarkdown形式に変換するVBAマクロを作成しました。
自分用なので細部は変更して使用してください。

# 使い方

1. マクロをエクセルに登録
2. 変換したい表の範囲を選択
3. マクロを実行
4. クリップボードにコピーされる

# ソース

```
Option Explicit
' 表をMarkdown形式に変換する

Const COLUM_CENTERLING_STR As String = "---"
Const PIPE_STR As String = "|"
Const INNER_COLUMN_LINE_BREAK = "{{br}}"

Public Sub createMarkdownTable()

 ' 選択範囲を取得
  Dim selectRange As Range
  Set selectRange = ActiveWindow.Selection
  
  Dim tableState As String
  tableState = getMarkdownTable(selectRange)
  
  With New DataObject
    .SetText tableState
    .PutInClipboard
  End With
  
  MsgBox "作成した文字列をクリップボードに出力しました。"
End Sub

Function getMarkdownTable(selectRange As Range) As String

  Dim ret As String
  
  ' ヘッダ部を読み込み
  ret = readRow(selectRange, 1) & vbCrLf
  
  ' センタリング設定
  Dim i As Integer
  Dim centerling As String
  centerling = PIPE_STR
  For i = 1 To selectRange.Columns.Count
    centerling = centerling & COLUM_CENTERLING_STR & PIPE_STR
  Next i
  
  ret = ret & centerling & vbCrLf
  
  ' ボディ部を読み込み
  For i = 2 To selectRange.rows.Count
    ret = ret & readRow(selectRange, i) & vbCrLf
  Next i
  
  getMarkdownTable = ret

End Function

Function readRow(selectRange As Range, rowCnt As Integer) As String

  Dim ret As String
  ret = PIPE_STR
  
  ' 1行読み込む
  Dim i As Integer
  Dim value As String
  
  For i = 1 To selectRange.Columns.Count
  
    value = selectRange.Cells(rowCnt, i)
    
    ' カラム内改行を置換
    value = Replace(value, vbLf, INNER_COLUMN_LINE_BREAK)
    
    ret = ret & value & PIPE_STR
  Next i
  
  readRow = ret
  
End Function
```
Laravel 認証フィルターにかかる前にアクセスしようとしていたURLへリダイレクト

```php

class LoginController extends Controller
{
    protected function authenticated(Request $request, $user)
    {
        return redirect()->intended("/admin/home");
    }
}
```

`intendedメソッド`は、認証フィルターにかかる前にアクセスしようとしていたURLへ、ユーザーをリダイレクトしてくれます。そのリダイレクトが不可能な場合の移動先として、フォールバックURIをこのメソッドに指定してください。
Railsでアプリ開発 〜2日目〜


# 1日目
[1日目はこちら](https://qiita.com/Progwan/items/

* * *

# 今日やること
- home画面作成
- 色々なgemのインストール

* * *

# エラー
 **(1)**
  - bootstrap インストール
   * * *
   日本語訳
   ```sassc(2.0.1)のインストール中にエラーが発生し、Bundlerは続行できません。
バンドルする前に、’gem install sassy -v’2.1.0’ —-source ‘https://rubygems.org‘’が成功することを確認してください。```

色々なサイトを見たが全部できなかったのでbootstrapを使わずに行く
* * *
# 結果
- home作成は時間がなかったのでなし
- なので次やろうと思います
JS:setInterval(setTimeout)の内部で指定した変数をなぜか使用できない。

# 初めに
今回、私がjavascriptでコードを書いている際にsetInterval(setTimeout)で躓いたため、本記事に足跡として改善策を記す。
困っている人へ届け。

# 今回引っかかった点
結果として、私の書いたコード(改変アリ)のbeforeとafterを見ていただきたい。

### before
```js

class Hogehoge{
    
    constructor(){
        this.hogestr = "hogehoge";
    }

    //"hogehoge"を表示する関数
    IntervalHoge(){
        console.log(this.hogenum);//setTimeout()でも同じ
    }

    Hogefunc(){
       //一定時間ごとに"hogehoge"と表示する関数
       setInteval(IntervalHoge,1000);
    }

}
```

これを実行した際にコンソールには、[undefined]と表示された。  

### after
```js

class Hogehoge{
    
    constructor(){
        this.hogestr = "hogehoge";
    }

    //"hogehoge"を表示する関数(引数を表示するように改変)
    IntervalHoge(hogestr){
        console.log(hogestr);
    }

    Hogefunc(){
       //一定時間ごとに"hogehoge"と表示する関数(三つ目の引数として表示する文字を指定)
       setInteval(IntervalHoge,1000,hogestr);//setTimeout()でも同じ
    }

}
```

ご覧いただいたように、setInterval(setTimeout)を使用する際には、一定時間での処理に使用する変数でクラスの持っている変数は引数としてsetInterval(setTimeout)に指定してやらねばならない。
__複数の引数を指定してやる場合には第3引数以降に「,」で区切って引数を追加してやれば大丈夫だ。__　　

かなり初歩的なことなのかもしれないが、もしかしたら私以外にもひっかる人間がいるかもしれないのでその助けとなるようにこの場で共有しておく。読んでいただきありがとう。  

※かなり初心者のためミスがあったら指摘していただけるとありがたい。
GitLab Board を使ってドラッカー風エクササイズをやったらとても良かった

私の経営している会社、[Georepublic](https://georepublic.info) ではスタッフの人数が20人を超えてきて、しかもリモートワークが中心、かつメインのオフィスが東京と神戸に分かれていて、さらに英語が得意な人と日本語が得意な人とがいることもあり、メンバー間のコミュニケーションが固定化されてきているという課題がありました。

その課題を解決するためには、メンバーをもっとよく知らねばならんということで、前回の全社合宿では、ドラッカー風エクササイズを実施することにしました。チームビルディングの際によく行われるエクササイズですが、20名となると、少し多すぎます。

参考：[DevTab|チームメンバーの期待をあわせる「ドラッカー風エクササイズ」](https://devtab.jp/entry/internal/20)

また、付箋紙とホワイトボードなどを使ったよくあるやり方では、オンラインになっていないのであとから振り返りがしにくいですし参加できなかったメンバーには内容が伝わりません。そこで、GitLab の Board 機能を使ってドラッカー風エクササイズをやってみました。

![スクリーンショット 2019-05-13 18.06.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1399/0fad7712-d92a-ad87-61a8-2d26e00bda14.png)
　

## Step 1. Board に、それぞれ以下のラベルを作る

1.  What am I good at? (私は何が得意か？)
2.  How do I perform? （自分はどんな風に働くか？）
3.  What do I value? （自分が大切に思う価値は？）
4.  What contribution can be expected from me? （チームにどんな貢献をするか？）
5.  contribution expected from other members （他の人が期待する貢献）

1〜4までの質問項目は[本家](https://agilewarrior.wordpress.com/2009/11/27/the-drucker-exercise/) に合わせていて、他のメンバーからのフィードバック項目として5を追加しています。
特に 2.の質問については、朝型とか夜型とか、マルチタスカーなのかそうでないのか、などが知れたのは良かったです。完全リモートワークOKで、勤務時間も自由な会社だと、どういうタイミングに声をかけやすいのか知っておくのは大事です。

## Step 2. エクササイズの意図を説明する（5〜10分）
最初に上げたような問題意識や、エクササイズの意図、やり方を説明します。
具体的なサンプルを用意するとわかりやすいですね。

## Step 3. 時間を区切って、質問1〜4を入力してもらう（15分）
各設問、それぞれ3つづつの回答を各自Issueの形で入力してもらいます。GitLab Board上からIssueを作るときには1行しか入れられないので、ダラダラ長く書くことも防げて良いですね。
ここで、作成した Issue を書いた本人に assign してもらうのがポイントです。

全員が全部入力するのに 15 分くらいかかりました。

## Step 4. 一人3分で発表してもらう。
GitLab Board の画面を表示して、`assignee: @ユーザ` で検索をすると、その人へアサインされた内容だけが表示されるので、1〜4の内容について、どういう意味かを自分で発表してもらいます。今回は20名いたので一人3分としました。時間に余裕があればもっと長くても良いと思います。
ここで、聞いている他の人は、質問5の内容（他の人からこの人に期待している貢献）を入力し、その人に assign します。誰からのフィードバックかわかるように、(Hal) などと最後に書いた人の名前を入れると良いでしょう。
これを全員分発表したら終わりです。
発表した人は、同じフィルタリングをかければ、自分に対するフィードバックを見ることができます。

この方法を使うことで、20名のメンバーでも2時間弱でエクササイズを終わることができました。しかも、オンラインに残っているので振り返りがしやすいのでおすすめです。
あとは、技術メンバー以外の Issue 作成の練習にもなります。

参加メンバーの満足度もとても高かったので、みなさんもやってみてはいかがでしょうか。

ちなみに私に対して一番多かったフィードバックは、「休め！」でした。みんなありがとう＞＜

当社は GitLab が社内のコード管理環境なのでこちらを使いましたが、GitHub の Project 機能でもできるのではないかなと思います。

![Screen-Shot-2019-05-09-at-19.28.44.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1399/77145602-91a2-f3ac-5857-9fb0efdbd7fa.jpeg)
写真は合宿にて。ちなみに Georepublic では、地理空間情報に興味があって、英語を使って働いてみたい開発者を募集しています。
興味ある人はご連絡ください。

やってみた！という人からのフィードバックも大歓迎です。
オープンバンキングと法規制

# はじめに
この記事は、IBM Think 2019の「Open Banking Via IBM API Connect」セッションを翻訳したものです。
セッション資料は[Think 2019](https://myibm.ibm.com/events/think/all-sessions)のサイトから取得できます。


# 今までの方式 vs オープンバンキング

銀行はAPIを利用した新しいデジタルチャネルを提供し始めています。

 - モバイルアプリ、Webサイトなどの今までのデジタルチャネル
 - 顧客管理、決済などのサードパーティー企業向けのオープンなAPI

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403443/cc00b13f-fcce-0295-79f6-1365446d9900.png)


# オープンバンキングに関わる規制

- オープンバンキングとは、APIを活用した銀行サービスの可能性を表現する用語です
- PSD2（Payment Service Directive 2）とは、2019年9月までに欧州で実装が計画されている規制です。この規制では、顧客がどのように銀行情報を規制されたサードパーティー企業に提供するかをガイダンスしています。
- UKのOpen Banking Entityでは9つの最大規模のアカウント提供社（CMA 9）のための標準ガイダンスを策定しました。


# 世界のオープンバンキング動向

| 国      | 対応  |
|:--------|:-------|
| カナダ   |政府はアドバイザー委員会を立ち上げています                         |
| アメリカ |National Clearing Houseではオープンバンキング基準をレビューしています |
| UK |2018年1月からオープンバンキング基準（PSD2準拠）の適用を開始しています                      |
| EU |PSD2により、銀行に顧客アカウントや決済情報をAPIとして公開することを要求しています|
| ナイジェリア |オープンバンキングプログラムを導入しました|
| インド|決済イノベーションを促進するため、すでにユニバーサル決済インターフェース（UPI）を導入しています|
|シンガポール|インダストリー内でのイノベーションを活性化するための基準を公表しています|
|ニュージーランド|政府はインダストリーにオープンバンキング（いくつかの主要銀行による決済パイロット）への取り組み方を決める許可をしています|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403443/15853f90-8bfb-91fe-5331-a0304b7817ee.png)

# PSD2規制 - バンキングAPI

この規制では以下のような基準を要求しています。

- プライマリー基準
    - アカウント情報（読み取り）
    - 決済：単一、定期
    - 資金保障
    - イベント通知

- セキュリティー基準
    - OpenID Connect/OAuth2フローによって利用者を認証するためのサードパーティーアプリケーションから銀行サイトへのリダイレクト
    - モバイルフォンなどのほかのチャネルを利用した利用者認証のための分離フロー


- デジタル署名を活用したサードパーティー（TPP）の管理
    - PSD2では、サードパーティー企業に対してeIDAS証明（サードパーティー企業のメタデータを伴ったX509証明）を使用した身元確認を要求します
    - オープンバンキングディレクトリーは、PSD2の要求に応じて、サードパーティー企業の身元確認や、ステータス管理を実施します（妥当性や失効状態）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403443/e1eec095-42d4-7bf2-dbf9-8afab89800fd.png)

# 銀行のデジタル資産が公開されることで誰が利益を受けられるでしょうか

- Fintech
    - 金融サービス業界に参入する障壁を減らすことができます

- 銀行
    - Fintech企業を通して顧客とつながることで新しいデジタル通路を獲得できます

- 顧客
    - イノベーティブなツールを利用することで、自分のお金を、より便利に管理する助けとなります。

# 顧客体験とは何でしょうか

- 今までの銀行
    - 銀行は顧客へダイレクトにつながります
    - 銀行はチャネルを所有し、ダイレクトに信頼を構築します

- オープンバンキング
    - 銀行の商品やサービスは、APIプラットフォームで利用可能となり、サードパーティー企業に提供されます
    - サードパーティー企業は、顧客からの承認を受けてデータに安全にアクセスします
    
**顧客体験は、銀行とは異なる信頼を受けたサードパーティー企業によって挑戦されます**

# 銀行はオンラインバンキングの安全性を教え続けてきています

- フィッシング詐欺は、機密情報を盗み取るために、埋め込みリンクなどを利用して、ユーザーを悪意のあるWebサイトに誘導することで行われます
- ハッカーによるパスワードや、クレジットカード情報を取得するための日常的な攻撃は検出が困難です
- オープンバンキングが目指している顧客への直接的でないチャネルは、これまで取り組んできたダイレクトモデルとは大きく異なります

# オープンバンキングの成功にとって顧客の信頼がキーとなります

- 銀行は、顧客のデータは、同意があった場合のみサードパーティー開発者に提供されるようにしなければいけません
- サードパーティー企業はGDPR（忘れられる権利）に従わなければなりません
- 顧客体験とブランド価値は、サードパーティー企業と、銀行のWebサイトをスイッチするときに重要になります
- 銀行は、もしサードパーティーがデータを誤って利用する場合には、責任を理解しなければいけません
Elixir episode:2 構造体

# 環境

```shell-session:sh
$ lsb_release -d
Description:    Ubuntu 18.04.2 LTS

$ elixir -v
Erlang/OTP 21 [erts-10.3.5] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [hipe]

Elixir 1.8.1 (compiled with Erlang/OTP 20)
```

# はじめに

[Elixir episode:1 リスト](https://qiita.com/feelinguy/items/8370fc2ecb3475ba9d2a) の `Fg.List` モジュールを使う。

# `Fg.Cell`

前回は `cons/2` の返り値をリストということにしたが、
Lisp にならってコンスされたものは「セル」と表現することにする。
前回のセルの実態は「１引数の関数」だったので型が不明瞭だった。
構造体にしておけばパターンマッチにて型判定ができるようになる。

`$ touch lib/fg/cell.ex`

```elixir:fg/lib/fg/cell.ex
defmodule Fg.Cell do
  alias __MODULE__, as: Me

  defstruct fun: nil

  def new, do: %Me{}  # リストの終わりを示す番兵となる

  # Lisp でいうところのドット対は認めない。 ex) [1 | 2]
  def new(x, %Me{} = me) do
    fun = fn selector when is_function(selector, 2) ->
      selector.(x, me)
    end

    %Me{fun: fun}
  end

  def head(%Me{fun: fun}) when is_function(fun, 1) do
    fun.(fn x, _y -> x end)
  end

  def tail(%Me{fun: fun}) when is_function(fun, 1) do
    fun.(fn _x, y -> y end)
  end
end
```

これは Lisp でいうところの真性リスト(proper list) の実態である。
Elixir にも反意述語 `List.improper?/1` がある。
`List.improper? [1 | 2]` は `true` を返す。

# `Fg.List` に構造体を定義する

`Fg.Cell` を内部に持つものは真性リストである。
`Fg.List` が真性リストになるように再定義する。

```shell-session:sh
$ mkdir test/fg
$ touch test/fg/list_test.exs
```
```elixir:fg/test/fg/list_test.exs
defmodule Fg.ListTest do
  use ExUnit.Case
  doctest Fg.List

  alias Fg.List, as: Me

  test "空リストは真性リストである" do
    empty = Me.new()
    assert Me.list?(empty)
  end

  test "最終セルのテイルが空リストならば真性リスト" do
    list = Me.new([1, 2, 3])
    one = list |> Me.head()
    two = list |> Me.tail() |> Me.head()
    three = list |> Me.tail() |> Me.tail() |> Me.head()
    empty = list |> Me.tail() |> Me.tail() |> Me.tail()
    assert {one, two, three, empty} == {1, 2, 3, Me.new()}
    assert Me.list?(list)
  end

  test "真性リストのテイルは必ず真性リスト" do
    assert_raise FunctionClauseError, fn -> Me.cons(1, 2) end
    length1 = Me.cons(1, Me.new())
    length3 = Me.cons(1, Me.new([2,3]))
    assert Me.list?(length1)
    assert Me.list?(length3)
  end
end
```
```elixir:fg/lib/fg/list.ex
defmodule Fg.List do
  alias __MODULE__, as: Me
  alias Fg.Cell

  defstruct top: Cell.new()

  def new, do: %Me{}  # 空リスト

  def new(%Me{} = me), do: me

  def new(enumerable) do
    top =
      enumerable
      |> Enum.reverse()
      |> Enum.reduce(Cell.new(), &Cell.new/2)

    %Me{top: top}
  end

  def list?(%Me{top: %Cell{}}), do: true
  def list?(_), do: false

  def cons(x, %Me{top: %Cell{} = top}), do: %Me{top: Cell.new(x, top)}

  # 空リストのヘッドは取れない（Common Lisp: 空リストのヘッドは空リスト）
  def head(%Me{top: %Cell{fun: nil}}), do: raise(ArgumentError)
  def head(%Me{top: top}), do: Cell.head(top)

  # 空リストのテイルは取れない（Common Lisp: 空リストのテイルは空リスト）
  def tail(%Me{top: %Cell{fun: nil}}), do: raise(ArgumentError)
  def tail(%Me{top: top}), do: %Me{top: Cell.tail(top)}
end
```

`$ mix test`

空リストのヘッド、テイルは何か？
考えすぎると眠れなくなるのでほどほどにしましょう。

またねーノシ
laravel-adminを導入

#前提
[ここの続き](https://qiita.com/ksri-soln/items/a9e0ea381063fd8fe8dc)で導入します

#参考サイト
[Laravel-admin](https://laravel-admin.org/docs/#/)
[z-song/laravel-admin(github)](https://github.com/z-song/laravel-admin)

#インストール

```
composer require encore/laravel-admin
php artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"
```

###laravel-adminの設定ファイルを修正

```devproject\config\admin.php
    'https' => env('ADMIN_HTTPS', true),
```

```devproject\config\filesystems.php
    'disks' => [
        // 省略...
// 末尾に追加
        'admin' => [
            'driver' => 'local',
            'root' => public_path('uploads'),
            'visibility' => 'public',
            'url' => env('APP_URL').'/uploads',
        ],
// ここまで
    ],
```

###インストール
```
php artisan admin:install
```

#動作確認

[http://homestead.test/admin](http://homestead.test/admin)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413817/c2c4d63a-9e52-784a-a8ab-e40586eaf73d.png)

#ログイン
ユーザーID: admin
パスワード: admin

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413817/9603e192-e0d5-a3e1-ec57-78371880daba.png)

#ホームにリンクを追加
```devproject\resources\views\welcome.blade.php.html
    <div class="links">
    @if (App::environment('local'))
        <a href="{{ url('/telescope') }}">Telescope</a>
    @endif
    <!-- ここから -->
    <a href="{{ url('/admin') }}">laravel-admin</a>
    <!-- ここまで -->
    <!-- laravel-adminのログイン判定はこんな感じ -->
    @if (Auth::guard('admin')->user())
        ログイン済み
    @else 
        未ログイン
    @endif
    </div>
```

#個人的な感想
単体のみであればそこまで必要性を感じないが、拡張機能が豊富にあるので化けるかもしれない。

#課題
- 画像ファイルがpublicフォルダに生成される。
  - 公開する画像なら問題ないが、ログインユーザーのみなどの制限を入れるのであればstorageフォルダになるのではないか。
  - config\filesystems.phpをゴニョゴニョするとよさそう。
- セキュリティ的にもconfig\admin.phpをしっかりと設定すべき。
メモ CloudWatch ログローテーション


自分用メモ
[コンソールを使用したログデータの Amazon S3 へのエクスポート](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/logs/S3ExportTasksConsole.html)


### 概念

- log group name: ロググループ名 このロググループのログが指定したS3バケットにエクスポートされる
- from: ログエクスポート開始timestamp
- to: ログエクスポート終了timestamp
- 送信先バケット: エクスポートタスクに関連付けられるS3バケット名
- 送信先プレフィックス: S3のキープレフィックス ディレクトリのような構成を与えるために利用

### 作業ログ

1. ログ出力先のバケット作成 & ポリシーの追加
2. ロググループ一覧からS3にエクスポートしたいログを選択 -> アクション -> データをS3にエクスポート
3. 出力範囲選択
4. バケット名  例: `cloudwatchlog-export-oshikawa-lesson`
5. プレフィックス 例: `api`


#### バケットポリシー

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "Service": "logs.ap-northeast-1.amazonaws.com"
            },
            "Action": "s3:GetBucketAcl",
            "Resource": "arn:aws:s3:::cloudwatchlog-export-oshikawa-lesson"
        },
        {
            "Action": "s3:PutObject",
            "Effect": "Allow",
            "Resource": "arn:aws:s3:::cloudwatchlog-export-oshikawa-lesson/api/*",
            "Condition": {
                "StringEquals": {
                    "s3:x-amz-acl": "bucket-owner-full-control"
                }
            },
            "Principal": {
                "Service": "logs.ap-northeast-1.amazonaws.com"
            }
        }
    ]
}
```



### メモ

プレフィックスを`cloudwatchlog-export-oshikawa-lesson/20190513`のように指定すれば日別のディレクトリを作成出来るがそれ以下に

```
/日別フォルダ/ランダム文字列のフォルダ/ログストリーム別のログフォルダ/000000.gz`
/日別フォルダ/aws-logs-write-test
```
というファイルが生成される

CloudWatchLogsでイベント検索出来ない古いデータの場合保存したS3のデータをどこかに展開しないといけないがどのように行うのか検証が必要
=> Athenaを用いるとS3に保存したログの検索が楽、料金体系に気をつける
S3へのクエリが面倒であるようであればCloudWatchLogsのロググループに保存する期間を1ヶ月に設定するなどすると良い
=> [S3 select](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/s3-glacier-select-sql-reference-select.html)というのもあるらしい
結局サーバーサイドとして最も気づきたいことは直近のエラーを検出する事、そういう場合であれば1ヶ月以上ログを放置することがあり得ないのでCloudWatchLogsで保持しておくという対応で問題ない
分析用にS3に保存しておく場合は形式をしっかり決める
S3に保存するだけではなくElasticsearchなどに突っ込んでおく方がよかったりするのか、結局どのくらいの期間保持するか問題が出てきそうだけど


### 参考
[コンソールを使用したログデータの Amazon S3 へのエクスポート](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/logs/S3ExportTasksConsole.html)
[Lambda + S3 で、CloudWatch Logsのログをログローテーションする](https://qiita.com/tamura_CD/items/3a1deba9e55e8b83bd91)
IntelのRealsense D435を動かす

# IntelのRealsense D435を動かす
初めてハードを触ったのでなかなか環境構築に手こずってしまった。
最初にubuntu18とpython3.6とopencvをバージョン指定せずに入れて構築したらpython3でopencvがうまく作動せず以下のエラーコードが出力された。（python2だと動いた）
```
Error: BadDrawable (invalid Pixmap or Window parameter) 9 Major opcode: 62 (X_CopyArea)
```
python3でどうしてもやりたかったので他のやっている方の環境をそっくり真似ることで動かせるようになった（最初からそうすればよかった…）
venvが好きだからpython3.6が欲しかったけどわがままをいうのはやめました（誰かできることを検証してたら教えて欲しいです）
環境envしないでやっているので必要に応じてpyenvとかしたらいいと思います。
追記：面倒だからroot権限でいれてるけどこれは環境壊す大きな要因みたいということに気がついた
sudo -iはやめて大人しく毎回sudo打っておくのが得策

## 参考にさせていただいた記事、謝辞
https://qiita.com/PINTO/items/40abcf33af3ae7ef579d

#環境
ホストOS:macOSserria(10.12.16)
virtualBox
ゲストOS:ubuntu16.04
(https://www.ubuntulinux.jp/News/ubuntu1604-ja-remix)
python3.5.2
opencv-python==3.4.2.16

#ubuntuでの環境構築コード
```
#以下4行をやらないとapt-get updateがエラーを吐く
#デフォルトのばぐらしい
cd /tmp && mkdir asfix
cd asfix
wget https://launchpad.net/ubuntu/+archive/primary/+files/appstream_0.9.4-1ubuntu1_amd64.deb
wget https://launchpad.net/ubuntu/+archive/primary/+files/libappstream3_0.9.4-1ubuntu1_amd64.deb
##

sudo -i
apt-get update
apt-get -y install libusb-1.0-0 
apt install python3.5
apt-get install python3-pip
apt-get install git
apt install vim
cd home/ユーザー名
mkdir -p project; cd $_
mkdir -p realsense; cd $_

pip3 install pyrealsense2
pip3 install numpy
pip3 install opencv-python==3.4.2.16


git clone https://github.com/IntelRealSense/librealsense.git
cd /home/ユーザー名/project/realsense/librealsense/wrappers/python/examples
python3 opencv_viewer_example.py 
```
実行結果<img width="1180" alt="sample_img.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415627/b4e97722-0b78-7f57-e441-1eb32d226095.png">

やっと動いた・・・！
こんな感じです。他にもサンプルコード色々あるみたいなので動かしてみると面白いです。
linuxサーバーのメモリ：バッファーキャッシュの数値が高い場合

# 背景
限られたメモリで
・いろんなサービスを走らせたい
・freeメモリサイズをなるべく増やしたい

# どんな問題があったのか
laradockでサービス提供をしていて、mariadb/php-worker/redis/workspace/nginx/php-fpmなどのコンテナを同時に使用。
一定期間稼動したら[buff/cache]がかなり多くなり、free容量が少なくなってくる。

# メモリの使用状況確認
```
free -m
```

# プロセスごとのメモリ使用量確認
```
# このコマンドはメモリを一番多く使っている５つのプロセスを表示します。
ps -aux | sort -k4nr | head -5
```

# やったこと
1 ~ 3 が選べると。
1 : pagecache
2 : slab
3 : pagecache + slab

```
echo 3 > /proc/sys/vm/drop_caches
```
N予備校 　サーバーサイドプログラミング入門　bin/hubot の所でエラーが出た時　２つの落とし穴

この記事は、
### N予備校　【2019年度】プログラミング入門 Webアプリ
#### サーバーサイドプログラミング入門　「HubotとSlackアダプタ」
`bin/hubot` を実行する所でエラーが出た時に解決した方法です。

方法というか、他の人もかなりハマっていたようなので、、、多分。

N予備校の本文に、



> 現在 yo hubot の調子が悪く、エラーが出て処理が正しく実行されないかもしれません。
その場合は、yo hubot をすでに行ったプロジェクトフォルダがあるので、以下の通りにクローンしてください。

という部分があると思うのですが、私のパソコンでもエラーが出たので、`git clone`しました。

ここも初心者にはハマりやすい所だと思うのですが、

> cd ~/workspace
mkdir hubot-study
cd hubot-study
yo hubot

落とし穴①：これを実行して上手くいったと思ったら、実は最後にエラーが表示されていて出来ていませんでした。私の友人はここでハマっていました。

---
ここからは私がハマった別のエラーです。

`$ bin/hubot`　を実行した時のエラー

```
vagrant@ubuntu-bionic:~/workspace/hubot-study$ bin/hubot
up to date in 0.853s
found 0 vulnerabilities

bin/hubot: 8: exec: node_modules/.bin/hubot: not found
```

このようなエラーが表示された方は私と同じ、落とし穴②だと思います。


私の場合、落とし穴①の所でディレクトリが既に作られてしまっていた様で、
hubot-studyの中にhubot-studyが作られてしまっていました。


なので、hubot-studyの中のhubot-studyに入って`bin/hubot`を実行すればできました。笑
（ポイっと元の場所に戻して終わり。）



とても、小さな間違いでした。
知識が無いからこそコードレビューで指摘をしよう

#初めに
**私は他人にダメ出しできるほど優秀なプログラマーではありません。おわり。**

　先進めなくなるので続けます。チームで開発するようになって約３年。自分ダメダメだなーとは思いつつも、自身の成長を一番感じたのがコードレビューだったのでこんな記事を書くことにしました。

　個人で開発している方や、各々が完ぺきなコードを書けるチームにいる方、１分１秒の時間が惜しいプロジェクトにいる方(そこまで行くとコードレビューちゃんとされているかわかりませんが)には向かない内容となります。また、捉え方によっては馬鹿が優秀な人の足を引っ張ることにも見えますので、自分の環境に合わないと思う方は参考にしないでください。

とおもったら、会社としてやってるところもあるんですね。
https://qiita.com/awakia/items/8344ba751426e386e0f5

他にも、かっちりしたレビュー記事はたくさんあるけど、新人や若手でレビューする側としての心構え的なところが伝わればいいなと思います。

# レビューは自信をもって行いましょう
　難しいコードがつらつら書かれていて、よくわからないけどOOさんだから大丈夫でしょうとApproveなんてしてしまうと目も当てられません。自分が知らないことは指摘のチャンスです（なんのチャンスだ）。知っていてなおかつ指摘事項があれば激熱です(信頼度40%)
明らかな指摘事項であればはっきりと伝える。それは新人だろうと関係ありません。ただ、自信がない箇所への指摘はしないというのはダメです。”わからない”ということを指摘しましょう。

 私がレビューで気になった点に関しては、指摘方法を以下のように分類するように心がけています。
## ①そもそもバグがある
　言うまでもないですね。どういったケースでどういう問題が起きるかをどや顔で指摘します。
## ②リファクタリングの提案
　「拡張for文使えや」「LINQって知ってる？」「ifififififififififやめーや」くらいなら、まあ初学者でもわかるところですね。デェベテランの実装だろうが許す必要はありません。
## ③何かいているかわからない
　ここから未知の領域です。知らない関数を使っているだけならググって終わりなのですが複雑なコードが入り組んでいたりすると調べるのが困難になります。そういった場合には「ここの実装は何やっているんですか？」とか「（可読性が低いので）ロジックがわかるようにコメントをつけてください」とか詳しくないんですよ～感を出しておきましょう。

# レビュイーにボコられよう
　ふつう逆ですが、私はレビュワーがダメ出しを受けることに非常に価値があると思います。特に、指摘に反論される際の最大の利点は
<h3>**「そんなこともわからないの？」**</h3>

と言われることがそうそうないからです。私は一度もありません。（参考リンクだけコメントで返されたりとかはあるけど）
　レビュー以外で質問する場合と違い、レビュイーが書いた内容についての質問なので、レビュイーは１００％内容を理解しているはずです。ですので、指摘に対しては１００％納得のいく回答が返ってくるはずです。しかし、私が経験した中では調べてもわからないから指摘した内容について、１００％の回答が来ることは半分もありませんでした。というのも、指摘するとレビュイーももっとわかりやすいコードに直したりとか、脳内保管されたアルゴリズムをコメントに出してくれたりとか、何かしらの修正が入ります。

　一方で、完全論破されることも当然あります。その場合は、自分の新たな知識を蓄えることができたとポジティブにとらえましょう。もしも、何かいているのかわからないという指摘をして「そんなこともわからないの？」といった回答をする人がいたら、その人は自分に酔っているだけで大した実力はないと思います。rejectしちゃいましょう。優秀な人はどや顔で論破してくるので安心してボコボコにされてください。

# ボコられたら次に活かそう
　自分の指摘が間違っていたなら、反省はしてもレビュー数が減ることにはならないように気を付けましょう。全く同じ指摘ミスなんてなかなかしません。自分で考えて指摘することはレビューを受けるよりもずっと記憶に残るため、知識習得がかなり効率的に行えると思います。
　そして何度もレビューしていくと、いつの間にか自分よりずっと優秀な方に対しても適切にミスを指摘できる比率が増えます。自分より優れていることが明らかな人に適切な指摘をできると、非常に自信が持てるのでそこまで粘り強くいきましょう。

# おまけ　代替案の提示
　私は少しでもわかりにくいなと思ったら代替案の実装を提示します。すると次のような修正が返ってきます。

・既存のほうが良い理由の説明コメント
・提示した実装そのまま
・**提示した内容をレビュイーがさらに改善した実装**

　３つめが重要で、レビューで自分の実装を書くと理想的な実装になる場合があるのです。レビュワーなのにレビューを受けられるなんて素敵ですね。...なんて言い方したら怒られると思いますが、自分ならこう書くというoutputをレビューに交えることは、自分の実装スキル向上と、**レビュイーがどういう思想で実装をしているかを知るチャンス**につながります。知識が無いからこそ、代替案の提示が成長の糧になると思っていますのでやってみてください。

# まとめ
　先輩に指摘なんて...と思いがちですが、世の中そんな悪い人ばかりではありませんよ。
スポーツをITする（６）フォームチェック Tensorflow.js Posenet

[過去に記載した簡単なフォームチェック](https://qiita.com/Chishiki/items/d11906bc19158f23e724)にて、TensorflowJS + HTML5 でiOS・Safariを含め、ブラウザでキーポイント（関節点）＋フォームを描画することに成功。

どうにかして「タイガー・ウッズと僕の構えがどのくらい違っているか？」を試行錯誤してましたが、モデルとなるキーポイントと描画されているキーポイント同士の距離計算（三平方定理）ではほとんど一致することがなく、計算がなかなか出来ないでいました。

結果、線同士の角度類似でやってみたらどうか、と思い、「2次元コサイン類似度」を使ってみました。

##2次元コサイン類似度
数学はめっぽう弱いので、[こちら](https://mathtrain.jp/cosdistance)を参照下さい。
要は、２つの線の傾き（方向）がどのくらい一致しているか、という認識でいます。モデルとなる右肩～左肩がなす線と、カメラに写っている右肩～左肩がなす線の角度・方向が一致するならOK。
コサイン類似度は
　・コサイン類似度が 1 に近い ⟺ 2本は同じ向きに近い
　・コサイン類似度が 0 ⟺ 90度
　・コサイン類似度が −1 に近い ⟺ 2本は逆向きに近い
となるようなので、0.8くらいならOKとしようかなと。

##2次元コサイン類似度の計算
Javascriptでの計算方法が探してもなかったため、他の言語のコーディングを元に関数を自作。一応値は大丈夫そう。
２つの線のエンド座標からスタート座標までのベクトル値（x, y）が必要（だと思う）。

```javascript
var a = [0, 10]; // 単位はベクトル。[x2 - x1, y2 - y1]だと思う。
var b = [10, 0]; // 単位はベクトル。つまり座標系で、aは真上に、bは右横に駆け抜けた、ということだと思う。

var CS = getCosineSimilarity(a, b);
console.log(CS); // 1 つまり90度

function getCosineSimilarity(a, b) {
    var cos = 0;
    var i = 0;
    var j = 0;
    var k = 0;

    var keys = Object.keys(a);

    keys.forEach(function(key) {
      i += a[key] * b[key];
      j += Math.pow(a[key], 2);
      k += Math.pow(b[key], 2);
    });

    cos = i / (Math.sqrt(j) * Math.sqrt(k));
    return cos;
}
```
## とりあえず両肩の類似度のみ手計算
モデルのキーポイントJSONとカメラに写っているキーポイントJSONの配列は同じにしてあるので、上記関数に実値をかませてみます。

モデルの右肩から左肩の座標線の角度
(67 ,83) -> (110, 82) = -1.33度

カメラの右肩から左肩の座標線の角度（わざと描画位置をずらしてみる）
(66 ,169) -> (106, 167) = -2.86度

角度はatanで計算。合ってる？

```javascript

var redian = Math.atan2((ey - sy), (ex - sx));
var angle = redian * (180 / Math.PI);
```
そして
var a = [43, -1];
var b = [40, -2];
となり・・。

##結果
類似度 0.9996。
肩の角度だけはタイガーにそっくりな・・の？
純粋に角度で閾を作って比較した方がいいかもしれませんね。あとモデルの肩の角度もちょっとおかしいので微調整することにします。

他の部位も同じ計算を行っていけば、と思っています。また続報します。
数学詳しい方、助けて下さいませ。。

##タイガーからキーポイントを取得し、タイガーに当ててみる
右上の数字が、両肩の角度の差です。コサイン類似度では、やはり点数が高すぎる感じだったので、角度差としてみました
わざと位置をずらしましたが、角度計算に影響は無いですね。
UIを考えないといけないけど、HTML canvasなので、凝ったことがやりづらいんですよね。
<img width="375" alt="IMG_0450.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74852/2be69900-b2df-afcd-68dd-e55b971329bc.jpeg">

Tensorflow Posenet のラインが単色で分かりづらかったので、OpenPoseみたいな色に改造しました。

##追記：６ケ所の角度を比較してみました
<img width="375" alt="IMG_0452.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74852/72e0d186-b232-641d-640d-fa426817cb68.jpeg">
初めてのSpringBoot(DI)

#はじめに
新卒としてWeb系企業に入り研修が始まりました。
その一環でSpringBootを用いた研修があったので、備忘録として残したいと思います。
はじめてのQiita投稿なので生暖かい目で見ていただけると嬉しいです。
ご指摘大歓迎ですのでよかったらコメントください。

##DI(Dependency Injection)
デザインパターン(設計思想)の一種。
依存性の注入という意味らしい。
何がどうなるかというと

```java:Sample.java
Test test;
Sample(){
 test = new Test();
}
```
これが下のようになる

```java:Sample.java
Test test;
Sample(Test test){
 this.test = test;
}
```

- インスタンスを自分で作るか、作ったものを受け取るかという違いがある。
- インスタンスとは今回のtestである。
- これならTestクラスができてなくても開発できるなどのメリットがある。
- 正直開発現場に入ったことのない自分にはいまいちピンとこなかった分野でもある。

参考：[クラスとインスタンスの違い](https://qiita.com/komo_ta/items/a5b4b5ea43cb8db2db2a)
参考：[SpringのDIとAOPの簡潔な説明](https://qiita.com/shuntaro_tamura/items/ba5a2e9b3ba305285edd)

##DIコンテナ

DIを実装しようとすると

- インスタンスは呼び出し元でたくさん作らないと行けないからコード量が増えそう
- そこで登場**DIコンテナ**
- DIコンテナはインスタンスを自動で注入してくれる

DIコンテナを使うと

```java:Sample.java
Test1 test1;
Test2 test2;
Test3 test3;
Sample(Test1 test1,Test2 test2,Test3 test3){
 this.test1 = test1;
 this.test2 = test2;
 this.test3 = test3;
}
```

これが下のようになる

```java:Sample.java
@Autowired
Test1 test1;
@Autowired
Test2 test2;
@Autowired
Test3 test3;
```

実際に使うとなると各種クラスファイルにそれぞれアノテーションをつける必要がある。
詳しい使い方は[こちら](https://qiita.com/shuntaro_tamura/items/ba5a2e9b3ba305285edd)

##まとめ
今回はqiitaの練習として投稿してみました。
新卒なのでまだまだ未熟ですが、
これから少しずつアウトプットを増やして質を高めていきたいです。
VirtualBoxで突然USB認識しなくなった

#VirtualBoxでUSB認識しなくなった問題
## 環境
ホストOS:MacOS Mojave(10.14.4)
ゲストOS:ubuntu16.04

##問題
virtualboxにてUSBを接続できるように設定し、接続確認をして閉じていたのをもう一度開いたら接続できなくなっていた

##解決方法
・virtualBoxを入れ直す（VirtualBox_Uninstall.toolを使用）
・Extension Packを再インストール（主な原因はこいつだと思う）

##解決に向けてしたけど解決できなかったこと
・再起動
・usb抜き差し
・VBの環境設定をいじったり（主にUSBの設定）
WordPressでショートコードのエイリアスを作る

WordPressでプラグインやテーマを乗り換えるとき、手動でShortCodeを置き換えるのは大変です。
機械にやらせることを考えても、Search Regexで置き換えると、なぜかうまくいかないことがあります。

```php:"SearchRegex"
|\[hoge\](.*?)\[\/hoge\]|
↓
[fuga]$1[/fuga]
```
改行があると、おかしな振る舞いをしてしまいます

てなわけで、考えたのは別のショートコードを呼び出すショートコード、いわばエイリアスを実装すればよいわけです。

#コード
子テーマのfunctions.phpに以下のコードを書きました。

```php
function hogeFunc($atts, $content = null ) {
//[hoge title=nanntoka url=kantoka] をデフォルトとして仮定
//argsデフォルト値
    extract(shortcode_atts(array("title" => "nanntoka","url" => "kantoka"), $atts));
	switch($title){
		case "nanntoka":
			switch($url){
				case "kantoka":
//fuga というshortcodeとして実行
					return do_shortcode("[fuga]".$content."[/fuga]");
					break;
			}
			break;
	}
}

add_shortcode('hoge', 'hogeFunc');
```

#まとめ
こうすれば　[hoge]なんとか[/hoge]と入力しても実際は[fuga]なんとか[/fuga]が実行されるわけです

#参照文献
https://www.webopixel.net/wordpress/53.html

#Regexについて
https://www.mnet.ne.jp/~nakama/
https://webllica.com/wordpress-plug-in-search-regex/
https://regex101.com
https://nahcew.com/change-thml-tag-wp/
numpyを使ってargsortを用いず2次元配列内の数を並べ替える。

##指定した列や行を基準に2次元配列内の行や列を並べ替えたい。

Pythonを使って指定した列や行を基準に2次元配列内の行や列を並べ替えるのは、argsortを使えば簡単です。しかしここではargsortを使わない方法も併せて紹介します。

---
#### まずは argsortを使って並べ替えてみる。

argsortを使えば、簡単にできます。

```python:
import numpy as np

A = np.array([[-1, 3, -10], [1, 2, 0], [30, -10, 2], [6, 1, 4]])

#print(A)

#3列目の要素が昇べきの順になるように行を入れ替える。
col_num = 2
A_col = A[np.argsort(A[:, col_num])]
print(A_col)

#3列目の要素が降べきの順になるように行を入れ替える。
col_num = 2
A_col_desc = A[np.argsort(A[:, col_num])][::-1]
print(A_col_desc)

#3行目の要素が昇べきの順になるように列を入れ替える。
row_num =2
A_row = A[:, np.argsort(A[row_num])]
print(A_row)

#3行目の要素が降べきの順になるように列を入れ替える。
row_num =2
A_row_desc = A[:, np.argsort(A[row_num])[::-1]]
print(A_row_desc)
```
####argsort を使わないで並べ替える。

ではargsortを使わないで並べ替えるコードを書いていきます。

```python:3列目の要素が昇べきの順になるように行を入れ替える。
i = 0
while i < A.shape[0]:
    j = 1
    while j < A.shape[0]-i:
        if A[i][2]< A[i+j][2]:
            for k in range(A.shape[1]):
                A[i][k], A[i+j][k] = A[i+j][k], A[i][k]
            j = j+1
        else:
            j=j+1
    i = i+1

print(A)
```



列を入れ替えるときも同じようなコードです。

```python:3行目の要素が昇べきの順になるように列を入れ替える。
i = 0
while i < A.shape[1]:
    j = 1
    while j < A.shape[1]-i:
        if A[2][i]< A[2][i+j]:
            for k in range(A.shape[0]):
                A[k][i], A[k][i+j] = A[k][i+j], A[k][i]
            j = j+1
        else:
            j=j+1
    i = i+1

print(A)
```
AWS無料枠でインスタンスを停止する時の注意

#事例
AWSの無料枠を使用して、Railsで作成したアプリケーションをデプロイしていました。
２つ目のアプリケーションを作成するため、１つ目のアプリケーションのEC2インスタンスを停止した上でデプロイを行いました。
翌日何気なくAWSのコンソールから請求額を確認すると

<img width="1136" alt="スクリーンショット 2019-05-13 16.57.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390473/58af6141-d605-05cc-334b-1a979f94175a.png">

といった感じで課金されていました。

##対処法
インスタンスを停止した状態でAWSのマネジメントコンソールから
**Elastic IP**に移動し
<img width="1136" alt="スクリーンショット 2019-05-13 17.04.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390473/47b2d7e4-049e-a4ae-6f77-029f9b179cc3.png">

停止しているインスタンスを選択した上で、その後アクションのタブをクリックします。

<img width="1136" alt="スクリーンショット 2019-05-13 17.04.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390473/8c23c4c3-5a5b-11b3-1a9f-cc45f781f2bb.png">

すると上の画像のように候補が出てきます。この中から**アドレス関連付けの解除**を選択し実行します。
以上でインスタンスと紐づいたElastic IPが解放され、課金が止まりました。

###まとめ
私自身のAWSに対する理解が足りず、インスタンスを停止すれば無料枠の対象から外れ課金されないと考えていました。
この考え方自体は間違いではないのですが、ElasticIP(IPアドレス)と紐づけたままインスタンスを停止すると課金の対象となります。
AWSでは、使わなくなったElasticIP(IPアドレス)は解放するようにという取り決めがあるようなので、インスタンスを停止する際はElasticIPの解放も忘れないようにしましょう。
windows10でRealSenseD435iを動かす。

# はじめに
RealSenseD435iを使って開発しようと色々調べてたのでまとめております。最終的に配布されているサンプルプログラムを動かすことが目的です。RealSenseD435iの動作確認を済ませていることを前提としてます。まだの方は[こちらの記事](https://qiita.com/yokoponzoo/items/6da6be27edbf39da6827)を参考にしてください。

# SDKのダウンロードとインストール
[こちらのページ](https://github.com/IntelRealSense/librealsense/releases/latest
)からSDKをダウンロードします。今回はwindows10を使用しているので`Intel.RealSense.SDK-win10.exe`を選択。
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318451/0c867f5c-1368-20b7-882b-a93ec3d54f6a.png)
ダウンロードされたファイルを実行。Setup画面が出るのでNEXTを押していってインストール。するとデスクトップに下の画像の3つのものができると思います。
![aaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318451/fca08d16-ebe5-a2a1-3137-aedda7b4fc48.png)


# サンプルファイルを動かしてみる
デスクトップにslnファイルのショットカットができていると思いますので、それをビルドし動かしてみたいと思います。

## 環境
* windows10
* Visual Stdio2017

## サンプルファイルをビルド
デスクトップにできているslnファイルを開き、Visual Studioを起動します。そしてビルド。
注意点としてはWinSDKのバージョンがあります。10.0.10586以降のものと書いてあったので違っていたら直すのを忘れずに。ちなみに8.1も必要なのでインストーラーでチェックしてインストールしましょう。
ビルドが完了したら多数のexeファイルができているかと思います。私の環境では`C:\Program Files (x86)\Intel RealSense SDK 2.0\samples\x64\Debug`にexeファイルができていました。みなさんも探してみてください。

## 動かす
では早速できたexeファイルを動かしてみます。今回はいくつか実行したものをあげていきます。

### hello-realsense
これはカメラで撮影している中心の座標の深度を測るプログラムです。
![hello-realsense.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318451/a93c7cec-788f-2d5d-7973-06c020f9406e.gif)
https://github.com/IntelRealSense/librealsense/tree/master/examples/hello-realsense

### im-show
これを行うにはopencvが必要となります。深度を色で描画しているようです。
![imshow.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318451/dea5f0b4-f843-10f9-3cda-1da862b90dad.gif)
https://github.com/IntelRealSense/librealsense/tree/master/wrappers/opencv/imshow


### pointcloud
測定された深度をもとに3次元上に描画しています。
![pointcloud.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318451/a0ecd2dd-424f-39e7-6c4c-9431decde7bf.gif)
https://github.com/IntelRealSense/librealsense/tree/master/examples/pointcloud

# 最後に
サンプルファイルを参考に自分で色々開発できるように頑張ります。


# 参考文献
* http://arrow.hatenablog.jp/entry/2018/07/21/223735
* https://mag.switch-science.com/2018/04/19/intel-realsense-depth-camera-d435-handson/
* http://www.sanko-shoko.net/note.php?id=bkws
[Linux]　インストールする際の用語集

#*wget*
　wgetは コマンドである。URLを指定してダウンロードすることができる。

例　[URL]をダウンロードする。

```
wget [URL]
```

#*Make*
　端的に説明すると、コンパイル等を自動で行います。

　ソースファイルが長くなってきて使いづらくなることがあります。その場合、ソースを分割して作成します。使用するときは、それらをつなぎ合わせて（リンク）使います。しかし、コンパイルのたびに、長いコマンドを入力する必要があります。そこで、Makeでソースコードを一括管理します。
　利点として、再コンパイルをした際に、ソースファイルの変更を判断し、変更点だけコンパイルを再実行します。
　このMakeを実行するためにMakeFileというファイルが必要です。

　実行する際は _*make [option] [target]*_ です。

代表的なオプション

|-B, --always-make| 無条件ですべて実行する。| 
|:-:|:-:|
|  -d |  デバッグ情報を表示する。 |   
|  -f  |  fileをmakefileとして使用する。 |   
など


代表的なターゲット

|all  | ビルドを実行する。(default)| 
|:-:|:-:|
|  install |  ビルドしたソフトウェアをインストールする。 |   
|  clean |  不要なファイルを削除する。 |   
など


#*MakeFile*
　Makeを実行する際、必要なファイル。
　ファイル内では、コンパイラの指定、オプション、リンクさせるものが記述されている。


# *./configure*

```
./configure
```

　configure　というスクリプトファイルを実行している。
　＊コマンドではなく、スクリプトファイル。
　実行することで、インストールに必要な環境変数、ライブラリが正しく設定、もしくは設置されていることなどを確認し、MakeFileが作られる。
インストールされた環境を自動的に確認し、その環境に合わせたMakeFileを作成してくれる便利なもの。



















#参考
・[configure, make, make install とは何か](https://qiita.com/chihiro/items/f270744d7e09c58a50a5)
・[Makefileの解説](http://omilab.naist.jp/~mukaigawa/misc/Makefile.html)
・[UNIXプログラミング：make入門](http://www.creatology.jp/unix/make.html)
・[【make】コンパイル等の処理を自動的に行う](https://tech.nikkeibp.co.jp/it/article/COLUMN/20140324/545283/)
componentDidMountでDOMにアクセスできない件

## まえがき

この記事は根本的な部分については未解決の記事になります。
原因は解明できてませんが、こういう現象があったという覚書きです。

## 環境
next @7.0.1
react @16.5.2
redux @4.0.0
react-redux @5.0.7
recompose @0.30.0

- nextでSSRしている
- jsonで保持しているデータをfetchしてページを生成

## やりたかったこと
ハッシュ付きのURLでアクセスした際にアンカーが作動して当該IDの箇所に画面が移動する

要は `http://foo.bar#bazz` が効くようにしたい。

## 発生した問題
### 1.普通にIDを指定して飛ばして見た
上手く遷移せず。
おそらくDOMが生成される前に飛ぼうとして、飛び先が見つかってないのかな？

### 2.componentDidMountでハッシュを見て処理してみる
```react
lifecycle({
  componentDidMount() {
    if (location.hash) {
      const elem = document.getElementById(location.hash.slice(1))
      if (elem) {
        elem.scrollIntoView({
          behavior: 'auto',
        })
      }
    }
  }
})
```
動かない。どうして...
`componentDidMount`なんだからこのタイミングでDOM生成されていて、`elem`も見つかるはずじゃないのかな？


### 3.とりあえずsetTimeoutを入れてみる
```react
lifecycle({
  componentDidMount() {
    if (location.hash) {
      setTimeout(() => {
        const elem = document.getElementById(location.hash.slice(1))
        if (elem) {
          elem.scrollIntoView({
            behavior: 'auto',
          })
        }
      }, 1000)
    })
  }
})
```

動いた。どうして...
`componentDidMount`から1000msに発火するように調整。なぜか動く。
ちなみに100msとかにすると動かない。
この1000msの間に何があるのだ...

### 4.onload eventにしてみる
```react
lifecycle({
  componentWillMount() {
    this.props.onBeforeMount()
  },
  componentDidMount() {
    if (location.hash) {
      window.addEventListener('load', () => {
        const elem = document.getElementById(location.hash.slice(1))
        if (elem) {
          elem.scrollIntoView({
            behavior: 'auto',
          })
        }
      })
    }
  }
})
```

これは動かない。
やってる方もよくわかってないけど`componentDidMount`のタイミングで`onload`イベントを入れてみた。
`onload`って全て読み込みが終わったあとに発火するのではないの...？どうしてelemが取得できないんだろう。


### 5.最終的にこうなった
```react
lifecycle({
  componentDidMount() {
    if (location.hash) {
      window.addEventListener('load', () => {
        setTimeout(() => {
          const elem = document.getElementById(location.hash.slice(1))
          if (elem) {
            elem.scrollIntoView({
              behavior: 'auto',
            })
          }
        }, 0)
      })
    }
  }
})
```

もはや意味がわからない。
`componentDidMount`のタイミングで`onload`イベントとして`setTimeout(fn, 0)`の関数を設定すると動く。

### 6.どうしてこうなった？

結果をまとめてみる。

|設定|結果|
|---|---|
|componentDidMountのみ| 動かない |
| setTimeout 1000ms | 動く |
| setTimeout 0ms | 動かない |
| onload | 動かない |
| onload + setTimeout 0ms | 動く |

よくわからない点がいくつか。

- `componentDidMount`だけで動かないのはなぜ？コンポーネントがマウントされたあとに発火するから動くはずなのでは？
- `onload`で動かないのはなぜ？全ての要素が(ry
- `setTimeout(fn, 0)`はなんとなく後述のような理由で意味があるのかな？

### setTimeout(fn, 0)について
`setTimeout`は4msの遅延が発生する
`setTimeout`は他処理が終わるまでスタックされる

参考 
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout#Reasons_for_delays_longer_than_specified

最後に`setTimeout`0msを入れて動いたのはどっちの仕様の影響なんだろう？
どちらにしても、`onload`から4msの間に何かあるんだろうなぁ...？

## まとめ
世の中には不思議なことがいっぱいあるんだなぁ（
こういう根本的な問題が発生した時に、やっぱり仕様を読めた方が良いよなぁと思うので英語を勉強しようと思いましたまる。
Googleスプレッドで文字列部分一致する方法

Googleスプレッドシートで条件付き書式設定で、特定文字列を含んだ行の背景色を変更したいときに使う。

* [Googleスプレッドシートのカスタム数式で文字列の部分一致をする - dackdive's blog](https://dackdive.hateblo.jp/entry/2015/01/28/163720)

```
=NOT(ISNUMBER(FIND($L1, "検索文字列" )))
```

* [挫折する人多数！スプレッドシートの『カスタム数式』の使い方を徹底紹介 | たぬハック](https://tanuhack.com/useful-tool/spreadsheet/custom-formula/)

```
=REGEXMATCH("検索対象文字列","検索する文字列（正規表現）")

※検索対象文字列に検索する文字列が含まれている場合『TRUE』を返す。含まれていない場合は『FALSE』を返す。
```
リンクの設定をする

# リンクを設定しよう

自分のサイトの違うページや、外部のサイトへ飛ぶにはLink（リンク）を貼る必要があります。

「リンク」とは英語で、つなぐ・関連するという意味になります。

webサイトにおいても根本的な意味は同じになります。

## ページやファイルを繋げる「a要素」

```HTML
<a href="リンク先のパス・ファイル名、URL">テキストや画像</a>

```

`<body>`と`</body>`の間に書きます。

webページでは指定された範囲をクリックするとwebページやファイルを参照する仕組みがあります。
この仕組みを「ハイパーリンク」（リンク）と呼びます。リンクを設定することを「リンクを繋げる」と言います。

リンクを繋げるには「a要素」(アンカータグとも呼ばれる)を使用します。
aタグは、必ずhref属性を記述します。
href属性の値には、webページやファイルの場所や名前を指定しましょう。
a要素の開始タグと終了タグのあいだはテキストを記述したり画像の挿入をします。

## ページやファイルを指定する「href属性」

href属性には、リンク先やファイル名を指定しましょう。

ローカルの環境にあるwebページを参照するには、そのファイルまでのパスを指定します。

インターネット上にあるwebページを表示させる場合はURL（絶対パス）を記述します。



## 表示方法を指定する「target属性」

通常、リンク先のコンテンツはリンク元と同じウィンドウに表示されますが、target属性を使うとリンク先のドキュメントをどこに表示するかを指定することができます。

必須の属性ではありません。

## 画像にリンクを設定する方法

```HTML
<body>
  <a href="dog.html"><img src="images/shibaken.jpg" alt="柴犬の子供"></a>
</body>
```



img要素`aタグ`で囲むことによって画像をクリックするとリンク先へ繋げることが可能になります。

## メールアドレスへのリンク

```HTML
<a href="mailt:sayaka@gmail.com">テキストや画像</a>
```

メールアドレスのリンクは「mailto:」に続けてメールアドレスを書きます。

##  電話番号へのリンク

```HTML 
<a href="tel:08012345678"><テキストや画像></a>
```

電話番号は「tel:」に続けて電話番号を書きます。

電話番号はハイフンを挟まず数字を連続して書きましょう。

スマホではリンクを指定しなくてもタップすると電話をかけることはできますが、画像やボタンなどからリンクさせたいときに「tel:」を指定して活用しましょう。