OmniAICreator/Qiita-1.07M huggingface dataset:
WPFで中身がClassアイテムのListBox.SelectedItemを取得する

既出かもしれませんが備忘録として。

SelectedItems(複数選択)の取り出し方も書きました
https://qiita.com/Michio029/items/3b531acd46bb1f81f7d7

#準備
リストと中身を用意します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/301115/474b3fae-e8ef-9e33-ca72-f94a8898d3cd.png)

```xml:MainWindow.xaml
<Window><!-- Windowの細かいのは省略 -->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        
        <ListBox Grid.Row="0" Name="ExampleList" Margin="10" SelectionMode="Single" ScrollViewer.VerticalScrollBarVisibility="Auto">
            <!-- SelectionMode="Single" ：リストから一つしか選択できない -->
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Id, StringFormat=IDは{0}　：}"/>
                        <TextBlock Text="{Binding Name, StringFormat= Nameは{0}　：}"/>
                        <TextBlock Text="{Binding Age, StringFormat= Ageは{0}}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Grid.Row="1" Name="Btn" Content="ボタン" Margin="100,10,100,10" Click="Btn_Click"/>
    </Grid>
</Window>

```

```<TextBlock Text="{Binding Id, StringFormat=IDは{0}　：}"/>```
この辺の文字列のフォーマットの書き方についてはこちらで詳しく解説してくれています。
https://qiita.com/koara-local/items/815eb5146b3ddc48a8c3
<br>

```c#:MainWindow.xaml.cs
public partial class MainWindow : Window
{
    List<ExampleClass> list = new List<ExampleClass>();
    public MainWindow()
    {
        InitializeComponent();

        list.Add(new ExampleClass() { Id = 0, Name = "aaa", Age = 10 });
        list.Add(new ExampleClass() { Id = 1, Name = "bbb", Age = 20 });
        list.Add(new ExampleClass() { Id = 2, Name = "ccc", Age = 30 });
        list.Add(new ExampleClass() { Id = 3, Name = "ddd", Age = 40 });
        list.Add(new ExampleClass() { Id = 4, Name = "eee", Age = 50 });
        ExampleList.ItemsSource = list;
    }

    private void Btn_Click(object sender, RoutedEventArgs e)
    {

    }
}
class ExampleClass
{
    public int Id { get; set; }
    public string Name { get; set; }
    public byte Age { get; set; }
}
```

#SelectedItemを取り出す
ボタンの処理を追記します。

```c#
    private void Btn_Click(object sender, RoutedEventArgs e)
    {
        // 選択項目が0 => メソッドを出る
        if (ExampleList.SelectedItems.Count == 0)
            return;

        // ExampleClassとして取り出す
        ExampleClass selitem = ExampleList.SelectedItem as ExampleClass;

        // 中身の確認
        Console.WriteLine("選択中の項目 Id:{0} Name:{1} Age{2}", selitem.Id, selitem.Name, selitem.Age);
    }
```

<br>
ボタンを押してみます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/301115/88dfa187-f4f6-c9fe-694a-c636f288e7a3.png)

実行結果

```
選択中の項目 Id:0 Name:aaa Age10
```

取り出せました。
【Rails】エラーメッセージを日本語化してみよう

ユーザー作成とか、ログインとか、何か投稿するときのエラー文をカッコよく英語のままにするのもありですが、分かりやすく日本語にしたいときありますよね？

そんなあなたにGemを使った解決法でお伝えしていきます。

#Gemをインストール

```ruby:Gemfile
gem 'rails-i18n'
```

```
$ bundle install
```

##エラーメッセージを日本語に設定

```config/application.rb
module SampleApp
  class Application < Rails::Application

    config.i18n.default_locale = :ja
    config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]
  end
end
```


##どのコードが、どの日本語に対応させるのかを設定

専用のファイルを使って設定していきます。

```console:
$ mkdir config/locales/models
$ touch config/locales/models/ja.yml
```

```ja.yml
ja:
  activerecord:
    models:
      user: ユーザ
    attributes:
      user:
        name: 名前
        email: メールアドレス
        password: パスワード
        password_confirmation: パスワード（再入力）
```


##エラーメッセージを手動追加　errors.add

`user.errors.add(:base, "追加エラー")`

もちろんエラーを生成してから出ないと、追加できないので、流れとしては以下の通り。

```console:
> user = User.new
> user.errors
> user.errors.add(:base, "追加エラー")
> user.errors.full_messages
=> ["追加エラー"]
```
【Swift】iOSで取得できる位置情報を実測してみた

iOSでの取得できる位置情報がどの程度正確かが気になったので、実測してみた。

# 前提知識

iOSにおいて、位置情報の精度は以下の6パターンを設定することが可能。

|No.  |値  |補足  |
|---|---|---|
|1|kCLLocationAccuracyBestForNavigation|ナビアプリなどで利用できる最高精度|
|2|kCLLocationAccuracyBest|最高精度(デフォルト値)|
|3|kCLLocationAccuracyNearestTenMeters|誤差10m程度の精度|
|4|kCLLocationAccuracyHundredMeters|誤差100m程度の精度|
|5|kCLLocationAccuracyKilometer|誤差1,000m程度の精度|
|6|kCLLocationAccuracyThreeKilometers|誤差3,000m程度の精度|

参考：[CLLocationAccuracy](https://developer.apple.com/documentation/corelocation/cllocationaccuracy)

# 測定方法

下図のルート(A地点からB地点)を歩いてみて、OSが取得する位置情報の経度/緯度をプロットしてみる。
OSが取得する位置情報とは、[locationManager(_:didUpdateLocations:)](https://developer.apple.com/documentation/corelocation/cllocationmanagerdelegate/1423615-locationmanager) で取得できる位置情報のこと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97314/5dac4b66-72a3-8a4b-5b96-4d24846d2c88.png)


# 実測結果

|誤差10m|誤差100m|誤差1,000m|
|---|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97314/24a41542-4169-2446-ec29-9a836b9eca62.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97314/ffa2e4ef-7939-e2f6-40a7-7bea5d77841d.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97314/8492c7f2-5afd-44aa-6dcb-8fcf48ce2988.png)|
|平均して1分間に約60回位置情報を取得。<br>移動に8分15秒(495秒)かかり、その間に500回、位置情報更新メソッドが呼ばれた。|平均して1分間に約10回位置情報を取得。<br>移動に8分45秒(525秒)かかり、その間に90回、位置情報更新メソッドが呼ばれた。|平均して1分間に約5回位置情報を取得。<br>移動に8分36秒(516秒)かかり、その間に45回、位置情報更新メソッドが呼ばれた。|
《未経験→webエンジニア》実務3日目


## この記事の目的
自分がやったこと、知らなかったこと、やるべきことを明確にし
1日あたりの成長速度を速める。


## 【今日やったこと】
Dockerを使用したローカル環境構築
postmanを使用したAPIテスト


## 【知らなかったこと】

1. postmanを使用してAPIテストをしている理由

今回の案件では、フロント側とバックエンド側の製作チームが
完全に別れている。

そのため、バックエンド側だけでテストが出来る様にしている

2. ログインフォームについて

Device
シンプルに作るには良い。
スクールでも使った！

・Authlogic
https://qiita.com/zaru/items/a451de2b165a9e422d62

メリット
カスタマイズをしやすい！
欲しいところだけ入れるなど。

デメリット
日本語の記事が少ないのが難点。

https://qiita.com/zaru/items/a451de2b165a9e422d62


3.トークンについて

・perishable_token
一時的トークン

仮登録など、一時的に付与するトークン。

・persistence_token
永続的トークン

会員登録後など、永続的に使用するトークン。
パスワードリセットの際には変わるので、そこだけ注意！

Cromは情報を多く覚えているので、
検証時には注意すること！


4. yarn
JSやNPMなど、色々とパッケージになっている
フロントをいい感じにしてくれるソフトを、まとめてインストールできる


## 【明日】やるべきこと、読みたい記事など

Sql文の勉強が必要そう
スマホからNuxtのサーバーにアクセスする

開発中のnuxtアプリをスマホから確認したかった。
まずcross-envをインストール

```
npm i cross-env
```

その後、package.jsonの設定を以下に書き換える

```
"scripts": {
  "dev": "cross-env NUXT_HOST=0.0.0.0 NUXT_PORT=3000 nuxt"
}
```
`npm run dev`をもう一度したら、ListeningのところにURLが書いてあるので、そこにスマホからアクセスすればOK
Ruby で明示的に名前を指定して親クラスのメソッドを呼ぶ

[ブログ記事](https://secret-garden.hatenablog.com/entry/2020/09/15/200315)からの転載です。

## 自身の親メソッドを呼ぶ

自身と同じ名前の親メソッドを呼ぶ場合は `super` が利用できます。

```ruby
  def value
    "Super#value"
  end
end

class Sub < Super
  def value
    # Super#value を呼ぶ
    super
  end
end

p Sub.new.value
# => "Super#value"
```

では、異なるメソッドから任意の親メソッドを呼ぶ場合はどうするのでしょうか。

```ruby
class Super
  def value
    "Super#value"
  end
end

class Sub < Super
  def value
    "Sub#value"
  end

  def value2
    # ここで Super#value を呼び出したい
  end
end
```

## 答え： `Method#super_method` を使う

こういう場合は `Method#super_method` が利用できます。
次のようにして任意のメソッドオブジェクトを取得し、 `#super_method` で親のメソッドオブジェクトを取得します。

```ruby
class Super
  def value
    "Super#value"
  end
end

class Sub < Super
  def value
    "Sub#value"
  end

  def value2
    # value のメソッドオブジェクトを取得し、その親メソッドを参照する
    method(:value).super_method.call
  end
end

p Sub.new.value2
# => "Super#value"
```

## おまけ

以下のように `.instance_method` を利用して任意のクラスのメソッドを呼び出すこともできます。

```ruby
class Super
  def value
    "Super#value"
  end
end

class Sub < Super
  def value
    "Sub#value"
  end

  def value2
    Super.instance_method(:value).bind(self).call
  end
end

p Sub.new.value2
# => "Super#value"
```
【CSS】中央寄せ

## ブロック要素を中央寄せしたい場合①
ずばり！
**親要素**にCSSを追加しよう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507412/b4076ee6-d679-1852-d8ba-def33b46b286.png)

```css
/*親要素の該当部分*/
display: flex;
align-items: center;
justify-content: center;

/*インライン要素を中央寄せしたい場合も親要素に指定*/
text-align: center;
```

## ブロック要素を中央寄せしたい場合②
**中央寄せしたい要素に margin : 0 auto**を付与するよ！
親要素には手を加えなくてOK！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507412/0eeb3034-8000-d33f-8f6e-15bdcfa769b5.png)

## 【重要】外枠のdiv領域のサイズ指定をする
div領域は、デフォルトでは領域が存在しません。
領域内に文字列や他要素があると、その分だけ高さが確保され、幅が100%広がります。

状況に応じて、枠内のコンテンツよりも大きめのサイズで**height と width を指定して外枠**を明確にしましょう。
【Windows10】エクスペリエンスインデックスを見る方法


昔のPCを掘り起こしてスペックを確認したかったのだけれどもできなかったのでやり方を調べた


## やり方

コマンドプロンプトかPowerShellでwinsatコマンドを使う

`winsat formal`


結果ファイルは以下のフォルダに保存される。
C:\Windows\Performance\WinSAT\DataStore\（評価をした日付）.Formal.Assessment.WinSAT


### ローカルで確認する

PowerShellの場合はGet-CimInstanceコマンドで確認できる

`Get-CimInstance Win32_WinSAT`


### Windows エクスペリエンスインデックス風の画面で確認する。


以下サイトにWINSATのファイルを貼り付ける

[webmarks | {{ app.lang.app.desc }}](https://webmarks.info/)


## 参考URL

[実はWindows 10にも“Windows エクスペリエンス インデックス”が搭載されている！【いまさら聞けないWindows 10のTips】](https://forest.watch.impress.co.jp/docs/serial/win10tips/1149273.html)
[Windows 8.1／10で「Windowsエクスペリエンスインデックス」値を計測する：Tech TIPS - ＠IT](https://www.atmarkit.co.jp/ait/articles/1403/14/news052.html)

#Tools/windows
Redux私的まとめ



#Reduxとは
ライブラリ
Reactと相性がいい

##Reduxのメリット

Reactではpropsでデータの受け渡しがされるが、ネストが深くなるとその回数が増え複雑になっていく。

Reduxを使うとそれが解決される。

storeというアプリ全体のstateを保持するオブジェクトを持つことができ、変更もできる。

アプリ全体の状態を一括管理するということかな

また後から読みやすいコードになり
テストがしやすくなるそう

##3つの原則
###真実の出どころは1つ(Single source of truth)
アプリケーション全体の状態を1つのオブジェクトで管理する
1つのオブジェクトにしか真実はない
###stateは読み込専用(State in read-only)
storeのstateを変更するにActionを送るしか無い
アプリケーションの状態はコンポーネントから直接変更する事はできない。
###変更は純粋関数で作られる(Changes are made with pure function)
ReduxではActionを入力として受け取り、状態を変化させて出力する
これはReducerの役割
Reducerは純粋関数
前のstateとActionを引数にとり、次のstateを返す

**前のstateを更新するのではなく、新しいオブジェクトを返す**




#参考
- [React + Redux の基本的な使い方](https://kde.hateblo.jp/entry/2019/02/12/023325#Redux%E3%81%A8%E3%81%AF)
- [React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)
Django + Dockerでのエラー

#はじめに
この記事ではDjango + Dockerのアプリ開発でおきたエラーとその対処法を書いていきます。

#ERROR: No container found for web_1
いろいろ試してみてたのですが、一向に対処法がわからなかったのですが、次のようにターミナルに打ち込めば解決しました。

```terminal:terminal
$ docker-compose up -d
```

参考記事
[ERROR: No container found for web_1 #11045](https://github.com/mozilla/addons-server/issues/11045)

#TypeError: Field 'id' expected a number but got datetime.datetime(2020, 9, 16, 2, 52, 51, 44897, tzinfo=<UTC>).

models.pyのForignkeyがあるところに次のように追記しました。

```python:models.py
user = models.OneToOneField(
        User,
        verbose_name='ユーザー',
        on_delete=models.CASCADE,
        default=1   #追記
    )
```

これで解決しました。

#django.db.utils.OperationalError: could not translate host name "db" to address: Name or service not known

sqlite3を使っていたのですが、このエラーが頻繁に出るので、Postgresqlを導入しました。

手順としてはこちらを参照してください。

#ERROR: yaml.scanner.ScannerError: while scanning for the next token
このエラーでは「docker-compose.yml」のインデントを確認してみてください。
コメントアウトしているものでも、インデントがずれていると怒られるので注意してください。

#yaml.parser.ParserError: while parsing a block mapping
このエラーでも「docker-compose.yml」のインデントを確認してみてください。
ニュースアプリにコロナ関連の記事があったら、リジェクトされた。

#1.リジェクトされた理由
ニュースアプリのAppStoreに申請をしたのですが、
コロナ関連の記事があったので、リジェクトされました。

#2.対策
コロナ関連の記事は削除しました。

#3.注意点
今回は外部データをいじるだけだったので、新たにビルドする必要なかったら、
再申請では無く、問題解決センターに返信をしました。
こっちの方が早いからね！
再申請だとまた後ろから、並び直しだしね！

#4.宣伝
これがコロナ関連の記事が無くなってしまったニュースアプリです。
NewsTweet（ニューズツイート）
https://apps.apple.com/jp/app/newstweet-ニューズツイート/id1531315934
AtCoder Library Practice Contest (ALPC) 解説: D

ALPCの解説記事がなかったので書きます。書いていない問題についてはあとで追加します。

# ALPC
AtCoder Library (ACL) のテストをするためのコンテストです。
https://atcoder.jp/contests/practice2/

# [D - Maxflow](https://atcoder.jp/contests/practice2/tasks/practice2_d)

## 問題文
> $N$ 行 $M$ 列のマス目があります． 上から $i$ 行目，左から $j$ 番目のマス目をマス $(i,j)$ と呼ぶことにします．
>
> 現在，それぞれのマスは，障害物が置かれているか，空であるかのどちらかの状態です． これらの状態は，文字列 $S\_1,S\_2,\\cdots,S\_N$ にって表され， マス $(i,j)$ の状態は，$S\_{i,j}=$`'#'` なら障害物が置かれていること， $S_{i,j}=$`'.'` なら空であることを意味します．
>
> これらのマスに， $1\times2$ の大きさのタイルを置きたいです． タイルは，縦または横に連続する $2$ つの空マスの上に置くことができます． タイルを盤面からはみ出すように置くことや，障害物や他のタイルがすでに置かれているマスにタイルを重ねることは禁止されています． 最大でいくつのタイルを置くことができるか求めてください． また，実際にその最大値を達成する方法を $1$ つ示してください．

## 制約
> * $1 \le N \le 100$
> * $1 \le M \le 100$
> * $S_i$ は `'#'` と `'.'` のみからなる長さ $M$ の文字列

## 解説

マスを偶奇で分けて考えます。それぞれの空マス $(i,j)$ について、 $i+j$ が偶数になるマスを黒、奇数になるマスを白で塗ることにすると、市松模様になります。
![alpc_d-1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638261/76cdaccc-d8d5-c435-2127-1f94aaef5baf.png)
ここに $1\times2$ の大きさのタイルを置くことは、黒マスと白マスをつなぐことと考えることができます。
 ![alpc_d-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638261/6458db40-36b1-a901-2e5d-d2b16b429fe8.png)
すると、これは黒マスと白マスのペアを作ったとき、最大で何個ペアを作れるかという問題になります。つまり最大二部マッチング問題となり、maxflowを使って解くことができます。
![alpc_d-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638261/6d6a2098-20ea-2a84-4406-7180c16d1f95.png)
1. 黒マスと白マスをそれぞれ頂点とし、さらにソースとシンクの２つの頂点を追加します。
2. ソースから全ての黒マスへの辺と、黒マスから隣り合う白マスへの辺と、全ての白マスからシンクへの辺を張ります。辺の容量は全て $1$ です。
3. ソースからシンクへの最大流量を求めます。これが置けるタイルの個数です。

さらにこのときの各辺のフローを得る必要がありますが、これは ACL だと `get_edge` でできますので、よしなに。
Ruby学習3

#メソッドとか色々3
現在、Ruby技術者認定試験silverを取得するべく勉強中です。
言語に対する理解がまだまだなので、基本的な事からアウトプットしていきます。

##配列の生成
通常の配列の生成はこう
 
```ruby
mr_children = ["GIFT", "himawari", "simple"] #角カッコの中に要素を格納
p mr_children

=> ["GIFT", "himawari", "simple"]
```

％記法を使うと、カンマやクォーテーションが消えて少しスッキリする

```ruby
mr_children = %w(GIFT himawari simple)
p mr_children

=> ["GIFT", "himawari", "simple"]
```

###補足-要素の追加と挿入

```ruby
mr_children = %w(GIFT himawari simple)
mr_children << "over" #配列の一番最後に要素を追加
p mr_children

=> ["GIFT", "himawari", "simple", "over"]

mr_children.insert(1, "エソラ") #第一引数で添字を指定し、そこに要素を挿入
p mr_children

=> ["GIFT", "エソラ", "himawari", "simple", "over"]
```

## 配列の演算(*)
```ruby
mr_children = %w(GIFT himawari simple)
p mr_children * 3 #数値を掛けた場合

=> ["GIFT", "himawari", "simple","GIFT", "himawari", "simple","GIFT", "himawari", "simple"]
```
```ruby
mr_children = %w(GIFT himawari simple)
p mr_children * ";" #文字列を掛けた場合
=> "GIFT;himawari;simple"
# 指定した文字列を挟み、要素を連結した文字列が返される
```

## 正規表現とscanメソッドメモ

```ruby
s = "To be or not to be, that is the question." #変数sに文字列を定義
hash = Hash.new(0) #Hashクラスのインスタンス（中身は空）を生成
s.scan(/\w+/) {|i| hash[i] += 1}
#マッチした文字列を配列で取得。配列の値をブロック変数iに渡し、hashのキーとして定義。対応する値に数値の1を足す。
p hash

=> {"To"=>1, "be"=>2, "or"=>1, "not"=>1, "to"=>1, "that"=>1, "is"=>1, "the"=>1, "question"=>1}
# 単語毎の出現回数を割り出した。

```
これ→/\w+/　のメモ
\w => 英数字、アンダーバー
+  => 直前の文字が一回以上繰り返す場合にマッチ
つまり、「英数字かアンダーバーを単語単位でマッチさせる」記述。

scanメソッドは正規表現にマッチした文字列を配列で返す。ハッシュのキーに格納される前はどういう形になっているかというと、

```ruby
s = "To be or not to be, that is the question."
p s.scan(/\w+/)

=> ["To", "be", "or", "not", "to", "be", "that", "is", "the", "question"]
```

単語で切り分けられた刺身みたいな状態。

To_Be_Continued...
【StereoDepth】stereo matchingまとめ

<h1>処理手順</h1>

1. Undistortionする(画像の歪みを消す) 
2. Stereo Rectificationする(右と左の画像が高さが同じになるように調整)
3. 平滑化する(Noiseのフィルタリングや輝度値を左右で合わせるなど)
4. costの計算方法
5. matching方法

<h2>4.costの計算方法</h2>
[<h3>SAD(Sum of Absolute Difference)</h3>](
https://algorithm.joho.info/image-processing/template-matching-sad-ssd-ncc/')

1pixel毎のintensityの差を画像全体で足し合わせたもの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/747c4982-3975-c00f-de4b-1310efef1f9f.png)


[<h3>SSIM(Structure Similarity)</h3>](http://visualize.hatenablog.com/entry/2016/02/20/144657')
intensityの平均値と標準編が右の画像と左の画像が同じであれば、SSIMは1になる。もし平均値または標準偏差が左右で近くなければ、SSIMは0に近づく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/07b293cc-2c4a-9d01-e026-5b03b7e03261.png)


Cost = α*SSIM + (1-α)SAD
*α(0~1)


<h2>5.matching方法</h2>

[<h3>BM(Block Matching)</h3>](
https://daily-tech.hatenablog.com/entry/2016/06/25/233203')

ある右の画像のblock(WxH)を抜き取る。0からMaxDisparity(任意の値)まで1pixelずつblockをずらしながら、左の画像の対応箇所と比べてマッチングコストを計算する(SAD,SSIMなど)。一番コストの低かったDisparityを最終的なDisparityとして用いる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/9034f8de-4569-728e-ec84-85e17bc84b04.png)



[<h3>SGM(Semi-Global-Matching)</h3>](
https://algorithm.joho.info/image-processing/template-matching-sad-ssd-ncc/')

1. pixel毎のコストを計算する
   右の画像と左の画像の対応するwindow(block)のマッチングコスト(SAD,SSMI,ハミング距離etc)を計算する。
   右の画像を横にshiftさせながら同じくマッチングコストを計算する。これを画像全体で行う。出力はWxHxDの3 
   次元になる(すべてのpixelはMaxDisparity個の値を保持している)
*ここで最小のマッチングコストを出力した場合Block Matchingと同じ結果になる


2. smoothing
   一つ前(隣)のpixelとのdisparityは同じであると仮定する。
   d=d   => Penalty=0
   d=d+1 => Penalty=P1
   d=d-1 => Penalty=P1
   d=i   => Penalty=P2
   基本的に周辺(隣り合う)pixelのDisparityは同じはず。


3. 動的計画法により8方向からスキャンする
   2を8方向から行い足すことによってsmoothingしながら、WxHxDのコストマップが完成する

4. Disparityを求める
   コストが一番小さいDisparityを最終結果として用いる(winner-takes-all)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/f39f727f-2757-2b5f-9b5c-42f7d21a8ac4.png)
AqueductでサーバーサイドDartを試す

# 準備
## Dartのインストール
```
$ brew tap dart-lang/dart
$ brew install dart
```
参考 https://dart.dev/get-dart

## Aqueductのインストール
```
$ pub global activate aqueduct
$ export PATH="$PATH":"$HOME/.pub-cache/bin" # shellファイルに追加
```

## プロジェクトの作成
```
$ aqueduct create my_project
```

# チュートリアル
http://aqueduct.io/docs/tut/getting-started/

## チュートリアルプロジェクトの作成
```
$ aqueduct create heroes
```
# ヒーロー一覧のエンドポイント
lib/controller/heroes_controller.dartを作成

```dart

import 'package:aqueduct/aqueduct.dart';
import 'package:heroes/heroes.dart';

class HeroesController extends Controller {
  final _heroes = [
    {'id': 11, 'name': 'Mr. Nice'},
    {'id': 12, 'name': 'Narco'},
    {'id': 13, 'name': 'Bombasto'},
    {'id': 14, 'name': 'Celeritas'},
    {'id': 15, 'name': 'Magneta'},    
  ];

  @override
  Future<RequestOrResponse> handle(Request request) async {
    return Response.ok(_heroes);
  }
}
```

lib/channel.dartを修正

```diff


import 'heroes.dart';
+ import 'controller/heroes_controller.dart';

/// This type initializes an application.
///
/// Override methods in this class to set up routes and initialize services like
/// database connections. See http://aqueduct.io/docs/http/channel/.
class HeroesChannel extends ApplicationChannel {
  /// Initialize services in this method.
  ///
  /// Implement this method to initialize services, read values from [options]
  /// and any other initialization required before constructing [entryPoint].
  ///
  /// This method is invoked prior to [entryPoint] being accessed.
  @override
  Future prepare() async {
    logger.onRecord.listen((rec) => print("$rec ${rec.error ?? ""} ${rec.stackTrace ?? ""}"));
  }

  /// Construct the request channel.
  ///
  /// Return an instance of some [Controller] that will be the initial receiver
  /// of all [Request]s.
  ///
  /// This method is invoked after [prepare].
  @override
  Controller get entryPoint {
    final router = Router();
+
+    router
+      .route('/heroes')
+      .link(() => HeroesController());
    
    // Prefer to use `link` instead of `linkFunction`.
    // See: https://aqueduct.io/docs/http/request_controller/
    router
      .route("/example")
      .linkFunction((request) async {
        return Response.ok({"key": "value"});
      });

    return router;
  }
}
```

サーバーを起動

```
$ aqueduct serve
```

http://localhost:8888/heroes で結果が確認できる

![スクリーンショット 2020-09-16 20.47.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2469/4b977043-4759-b273-eaa9-63b2011efc89.png)
より良いテストへの一歩　〜 そのテスト設計・計画、最適ですか？ 〜 参加レポート

今日ははやめに退勤して社外イベントに参加しました！
Visional/ビズリーチさんの「より良いテストへの一歩　〜 そのテスト設計・計画、最適ですか？ 〜」です。

connpassページは[こちら](https://d-cube.connpass.com/event/187308/)

# オープニング

- 本日の参加者
    - 開発者
    - テストエンジニア
- 参加理由
    - アジャイル、スクラムのテスト品質に興味がある人が多そう
- Visionalについて
    - ビズリーチがグループ体制になりました

# テスト活動の納得感を持ってテストケースを激減させた話

- ブロッコリーさん

### 本発表の趣旨

- 激減は結果ではなく、削減数は目的ではない
- 納得感をもってどう進めたかを中心に紹介

### 以前のQAチーム

- 起こっていたこと
    - QAは1スプリント遅れてテストを実施
    - 人数が足りない
    - 設計に専念できない
    - QAと開発が分離されててやりづらい
- その結果
    - 開発した画面をもとに設計をしていた
    - QAが質問、FBするときは開発者は違う作業していた

### テスト設計の改善

- 設計を手厚く
    - 設計:実施=1:9から5:5へ
    - 設計を同じスプリント中に実施
- テスト設計レビューの強化
    - 設計レビューは全員で小出しに
    - テスト設計とテスト実装を分断するように
- パターンが洗い出されているので、増えていくレビューからテストケースを減らしていくレビューへ

### テストマネジメントの改善

- 実施進捗表の作成
    - テスト実施も二段階にしてテスト実施が完了なのか、開発者の修正起因なのかが見えるようになった
    - テスト消化、テスト確認の二段階に
- 負担の分散
    - チケット数だけではなく、プランニングポーカーを使って重みづけして負担を分散
    - ヘルプのしやすい状況に

その結果、開発と協働して動く場面が増加！

# いまさら聞けない、テスト対象機種の選定方法

- くにおさん

### 対象機種の選定方法

- アンチパターン
    - 全機種！(1000機種以上あるらしい・・・)
    - 最新機種のみ
    - 最新OSのみ
    - 手元にある機種だけ
- プロダクトリスクから、効率的に動作保証
- とある会社のテックブログ
    - テスト内容によって、最適な組み合わせを用いてテストを行う
    - 新規アプリの場合は起動・終了は全機種
    - 各機能の確認はOS×メーカー
    - などなど

### プロジェクト初期に握っておくといいもの

- テストの要求・目的を明確にする
- テストのスコープ・アプローチを明確にする
- インパクトを明確に
- 優先度を明確に

### 決定までの全体の流れ

- テストの要求・目的を明確にする
- テストのスコープ・インパクト・優先度を明確にする
- テスト対象機種の要素（因子・水準）を明確にする
- テスト端末を選定

# 雑感

- 会社としてこうやって発信する場があるのはとてもいいなぁと思いました。ありがとうございます！
- 設計レビューを全員で手厚くやるのはいい試みだなと思いました。
- テスト設計とテスト実装を明確に分けるのは再度きちんと自分も意識しよう！
- QAチームと開発チームを分けている目的はなんなのだろうか、
    - QAチームと開発チームをローテーションとかすると仕様とかも分かるようになるしいいかなと思いました。
    - QAチームの改善がとあるポイントを境界に始まったのもなぜなのかなぁと疑問に思いました。
- 最終的に開発チームと協働できるような動き方になれたのが一番結果的に改善したポイントなのかなぁと。
ElmでつくったBMI計算機MVPをデプロイしてみた

[この前の記事](https://qiita.com/atsu6/items/34ba5b78d619da32a57b)でElmを使って簡易的なBMI計算機を作ってみたので、デプロイしてみることにした！

デプロイする流れとしては、GitHubにBMI計算機のソースコードをpushしNetlifyにてデプロイ。


## リポジトリとプロジェクト作成
まずはGitHubで新規レポジトリを作成。
その次に、Git Bashにて以下のコマンドを入力。

```sh
cd {ローカルのレポジトリ置き場}
git clone {GitHubのURL}
cd {GitHubのレポジトリ名}
vim .gitignore
# https://www.toptal.com/developers/gitignore で Elm, Node を選択。
elm init
```


## さくっとBMI計算機をつくる

[前の記事で作成したこいつ](https://ellie-app.com/9WTT3nnG6MVa1)を`src/Main.elm`を移す。

## Netlifyにデプロイ
Elmをビルドするために [package.json にビルドスクリプト](https://github.com/atsu6/elmbmi/blob/b968a6e31fa0089dad97309a208bbde335c8bc61/package.json#L6)を追加する。
Netlifyは、設定したビルドスクリプトを実行してくれる機能があるので、出力されたファイルを公開する。

## デプロイした成果物

https://serene-poincare-2cb75f.netlify.app/

## 感想
Netlifyの使い方に慣れなければ。
Elmをビルドするためのスクリプトを入れるに手こずった。
計算機作ってみた。

初心者ですがアプリ的なのをつくてみました

複数同時計算機のAです。

使用言語はHTML、JavaScript　です。

HTMLのコードです。




      <h1>計算プログラム</h1> 
      <h2>足し算</h2>

      <div>
      	 1つ目の値<input type="text" id="atai1">       <br>

      	 2つ目の値<input type="text" id="atai2">       <br>

      	 3つ目の値<input type="text" id="atai3">       <br>

      	 4つ目の値<input type="text" id="atai4">       <br>

      	 5つ目の値<input type="text" id="atai5">       <br>

      	 　　　　　　　
      	 <button onclick="tashizan()">
      	 	足し算
      	 </button>        <br>                           


      	 結果<br>

      	 <div id="kekka">

      	 	
      	 </div>　

      </div>

次はJavaScriptコードです



  <script type="text/javascript">
      	
      　//足し算の式


      	function tashizan(){

        

         text01 = document.getElementById('atai1');
         text02 = document.getElementById('atai2');
         text03 = document.getElementById('atai3');
         text04 = document.getElementById('atai4');
         text05 = document.getElementById('atai5');

         


         x = parseInt(0 + text01.value);
         y = parseInt(0 + text02.value);
         u = parseInt(0 + text03.value);
         k = parseInt(0 + text04.value);
         t = parseInt(0 + text05.value);





         z = x + y + u + k + t;

         kekka = document.getElementById('kekka');

         kekka.innerHTML = z; 

      	}


出来上がりは

![コメント 2020-09-16 182246.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/721833/dc643cf3-eb1f-e5ca-666c-2d6d9adfb3c4.jpeg)


このような感じです。
Amplify で amplify mock api をやっても graphql フォルダ 以下に反映されない

##同じ環境の上で開発したいな。  
コピっちまえばいいか。はいポチっとな。


cloud9で開発環境のフォルダをコピって新しい環境でいじくりまわそうとしたら題のことでつまずいてしまったので以下駆け出し*よわよわ*エンジニアの備忘録です。


---
- `.graphqlconfig.yml`を見てみよう  
PATHはあってるかな？それでも動かない？  

>`Cloud9`で隠しファイルを開くには`c9`を使おう

```terminal:terminal
npm install -g c9
c9 [ファイルパス]
```
>　`.graphqlconfig.yml`の変更は `Amplify configure codegen` で反映させておこう


- `local-env-info.json`を見てみよう  
PATHはあってるかな？

```terminal:terminal
Running GraphQL codegen
✔ Generated GraphQL operations successfully and saved at src/graphql
AppSync Mock endpoint is running at http://10.1.0.194:20002
```
**...やった反映された！**
【AWS SOA】RDSバックアップとスナップショットの違いの備忘録 

#RDSバックアップ
・DBインスタンスの自動バックアップ・保存を行う。自動バックアップでは、DBインスタンスのストレージボリュームのスナップショットが作成される
・事前に設定したバックアップ保持期間に従って、DBインタンスの自動バックアップが作成・保存される
・DBインスタンスを削除すると自動バックアップで作成したスナップショットは削除される

#RDSスナップショット
・ユーザーが手動でバックアップを取りたい場合、DBのスナップショットを取得する
・手動バックアップで作成したスナップショットは、DBインスタンスを削除しても自動で削除されない

#バックアップとスナップショットを取得する方法
RDS>データベース>該当のDB識別子>メンテナンスとバックアップで状況を確認可能。
![スクリーンショット 2020-09-16 19.35.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/ec7125f2-063f-3388-9deb-187a412ab71f.png)
##バックアップの変更
該当のDB識別子の上の方に変更があるので選択する。
![スクリーンショット 2020-09-16 19.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/b5420abd-3bab-0c54-1002-372345f29b68.png)
バックアップの保存期間を適宜変更する。
![スクリーンショット 2020-09-16 19.40.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/af3e83dc-4df3-0a1f-b187-bbb31487c622.png)

##バックアップのスナップショット
該当のDB識別子>メンテナンスとバックアップ>スナップショットでスナップショットの取得を選択する。
![スクリーンショット 2020-09-16 19.47.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/94672e99-dd9c-a6bc-9190-0a8d5f681477.png)
スナップショット名を入力し、スナップショットの取得を選択する。
![スクリーンショット 2020-09-16 19.52.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/cf192dc8-a031-4a19-112b-c03434b71c4b.png)


参考
Ultimate AWS Certified SysOps Administrator Associate 2020
この１冊で合格！　AWS認定ソリューションアーキテクト - アソシエイト テキスト&問題集
https://stay-ko.be/aws/solutionarchitect-pro-aws-rds-db-snapshot-backup-restore
Python参照ページ

Pythonを扱う上で参考にしたWebページの一覧

Pythonリスト内包表記
https://note.nkmk.me/python-list-comprehension/
基本型
	[式 for 任意の変数名 in イテラブルオブジェクト]

!!ファイルを読み込んだものから改行コードを取りたいときはf.read().splitlines()でいい!!
https://qiita.com/suzuki-hoge/items/8eac60f7b68044eea6c1

pythonでのファイルの読み込み、書き込み
https://note.nkmk.me/python-file-io-open-with/

python 辞書のfor文
https://note.nkmk.me/python-dict-keys-values-items/

python strip系
https://note.nkmk.me/python-str-remove-strip/

python 配列の初期化
https://www.javadrive.jp/python/list/index12.html 

python 文字列の扱い
https://qiita.com/tomotaka_ito/items/594ee1396cf982ba9887

python if not
https://www.sejuku.net/blog/65070

pythonで冪乗を扱う
https://www.sejuku.net/blog/71405
Rust: Rocket の使い方

Rust のフレームワーク Rocket の使い方です。
次のサンプルを改造しました。
[Getting Started](https://rocket.rs/v0.4/guide/getting-started/)

次のバージョンで動きます。

```text
$ rustc --version
rustc 1.48.0-nightly (6af1bdda5 2020-09-15)
```

インストールの手順

```bash
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env
```

次に Nighty をインストールします。

```bash
rustup default nightly
rustup override set nightly
```

プロジェクトの作成

```bash
cargo new hello-rocket --bin
cd hello-rocket
```

```text:Cargo.toml
[package]
name = "hello-rocket"
version = "0.1.0"
edition = "2018"

[dependencies]
rocket = "0.4.5"
```

```rs:src/main.rs
#![feature(proc_macro_hygiene, decl_macro)]

#[macro_use] extern crate rocket;

#[get("/")]
fn index() -> &'static str {
    let hello = "Hello, world!\n\nこんにちは\n\nSep/16/2020\n";

	hello
}

#[get("/page_a")]
fn page_a() -> &'static str {
    let page_a = "こんにちは";

	page_a
}


#[get("/page_b")]
fn page_b() -> &'static str {
    let page_b = "今晩は";

	page_b
}


fn main() {
	rocket::ignite().mount("/", routes![index,page_a,page_b]).launch();
}
```

コンパイル

```bash
cargo build
```

実行

```bash
cargo run
```

http://localhost:8000/ にアクセス
![rocket01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0c6dbf81-2c57-5de5-8f96-c4e612885615.png)

http://localhost:8000/page_a にアクセス
![rocket02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/8e237512-1e63-8cea-8be3-2a7fbd46e8e0.png)

http://localhost:8000/page_a にアクセス
![rocket03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/875604a8-8151-548c-6ea8-fc1710bf70da.png)
AWS CodeBuildのテストレポート機能は、やはり build か post_build でしか使えない

# TL; DR

CodeBuild のテストレポート生成コマンドは、 `build` または `post_build` シーケンスの `commands` セクションで指定しましょう。
そうしないと、テスト失敗時にテストレポートを表示してくれません。



# はじめに

CodeBuild に、テストレポート機能がリリースされて久しいですね。
僕も、既にいくつか記事を書いていますが、テストカバレッジが表示できるようになり、使いやすさに拍車がかかりました。

- [CodeBuildのテストレポート機能が一般公開されたから使ってケチつけてみた - Qiita](https://qiita.com/Morichan/items/d747f429067c082bc982)
- [CodeBuildのテストレポート機能でコードカバレッジレポートがサポートされたから、また使ってケチつけてみた - Qiita](https://qiita.com/Morichan/items/4d97bb0b8e904d51bc1c)

そんな便利なテストレポート機能ですが、何度か使っていくうちに、とある現象に気付いたので、記述していきます。



# テストレポート生成コマンドを指定できるのは `build` または `post_build` だけ？

ドキュメントに記載されている、次の文言を見つけました。

> `build` または `post_build` シーケンスの `commands` セクションで、レポートグループに対して指定したテストケースを実行するコマンドを指定します。
>
> [テストレポートの作成 - AWS CodeBuild](https://docs.aws.amazon.com/ja_jp/codebuild/latest/userguide/report-create.html)

これが何を意味するのかというと、 buildspec.yml ファイルにおいて、次のように記述する必要があることを意味します。
つまり、 CodeBuild では、テストレポート生成コマンドである `npm run test` を、 `build` または `post_build` シーケンスの `commands` セクションで指定するように要求しているわけです。

```yaml:buildspec.yml
version: 0.2

phases:
  install:
    commands:
      - npm install

  pre_build:
    commands:
      # この pre_build シーケンスではテストレポート生成コマンドを指定しない
      - npm run test

  build:
    commands:
      # この build シーケンスか、
      - npm run test

  post_build:
    commands:
      # この post_build シーケンスでテストレポート生成コマンドを指定する
      - npm run test
```

しかし、テストレポート生成コマンドを `pre_build` シーケンスで指定しても、テスト成功時には CodeBuild のテストレポートに表示されます。
この現象は、単純にドキュメントの不備なのかと軽く思っていたのですが、別の問題で明らかになりました。



# テストレポート生成コマンドを `pre_build` で指定するとテストレポートが表示されない

しばらくして、テストが失敗してしまうと、なぜか CodeBuild のテストレポートに表示されない問題にぶつかりました。
いろいろ試行錯誤した結果、どうやら `pre_build` では、テスト失敗時のテストレポートファイルを、 CodeBuild のテストレポート機能が読取ってくれないようです。

```yaml:buildspec.yml
version: 0.2

phases:
  install:
    commands:
      - npm install

  pre_build:
    commands:
      # pre_build でテストが失敗すると、失敗結果がテストレポートとして読取ってくれない
      - npm run test

  build:
    commands:
      # build か post_build でテストが失敗すると、失敗結果がテストレポートとして読取ってくれる
      - npm run test
```

テストレポートは、成功時であっても失敗時であっても表示してほしいため、テスト失敗時にテストレポートを表示しない事象に遭遇してしまった際は、非常に焦りました。
最初は `npm run test` 失敗結果（利用している Jest コマンドの失敗結果）である Error Code 1 に未対応なのかなーと、的外れなところを調べていました。

- [node.js - npm error ELIFECYCLE while running the test - Stack Overflow](https://stackoverflow.com/questions/23286017/npm-error-elifecycle-while-running-the-test)
- [npm ERR! code ELIFECYCLE if 1 test fails · Issue #7803 · facebook/jest](https://github.com/facebook/jest/issues/7803)



# おわりに

少しは仕様書を信じようと思いました。
AWS Cognito


自分の上には上がいる。その精神を常に忘れず挑戦していきます。

###Cognito

[本サイト](https://aws.amazon.com/jp/cognito/)
[非常にわかりやすいサイト](https://dev.classmethod.jp/articles/what-is-the-cognito/)





###Cognitoとは？？

一意のアイデンティティを与えるためのサービス

Cognito はユーザーを一意にするために、2つの方法を取ります。

・匿名ユーザーとして ID を発行する
・パブリックなログインプロバイダのユーザー ID と紐付ける


ユーザプールトークンにサインインしてユーザプールトークンを取得。
そのトークンとIDプールトークンを交換して
AWSの格serviceや他のデータベー書の情報にアクセスしたりする。
ggplot, ggvisの散布図とirisでk-nn


k-nnは完全におまけ。
お気に入りの散布図コードを備忘録として残す。

#本題


```r
library(ggplot2)
library(ggvis)
library(class)


head(iris)
names(iris) <- c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width", "Species")


iris %>% ggvis(~Sepal.Length, ~Sepal.Width, fill = ~Species) %>% layer_points()

iris %>% ggvis(~Petal.Length, ~Petal.Width, fill = ~Species) %>% layer_points()
```




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275572/448b7673-c2e1-a6a4-15ed-8d2f8e6dca94.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275572/c730a88d-d3ce-60f4-b651-8ef4157532cb.png)

#k-NN


```r
set.seed(1234)
ind <- sample(2, nrow(iris), replace=TRUE, prob=c(0.67, 0.33))

iris.training <- iris[ind==1, 1:4]
iris.test <- iris[ind==2, 1:4]

iris.trainLabels <- iris[ind==1,5]
iris.testLabels <- iris[ind==2, 5]


iris_pred <- knn(train = iris.training, test = iris.test, cl = iris.trainLabels, k=3)
iris_pred
```



```
> iris_pred
 [1] setosa     setosa     setosa     setosa     setosa     setosa     setosa     setosa     setosa     setosa    
[11] setosa     setosa     versicolor versicolor versicolor versicolor versicolor versicolor versicolor versicolor
[21] versicolor versicolor versicolor versicolor virginica  virginica  virginica  virginica  versicolor virginica 
[31] virginica  virginica  virginica  virginica  virginica  virginica  virginica  virginica  virginica  virginica 
Levels: setosa versicolor virginica
```


#以上
[Rails]複数行データの標準入力の取得する

自分用メモ。

###標準入力で複数行のデータを配列に格納
```
value = readlines.map(&:chomp)
```

###標準入力で1行に複数データある場合、配列に格納
例）りんご　バナナ

```
line = gets.split
p line
["りんご","バナナ"]
```
###配列に格納されている複数データを1行に出力
データとデータの間は空白あり、特定の記号など指定できる
・空白の場合

```
puts array.join(' ')
りんご バナナ
```
・#の場合

```
puts array.join('#')
りんご#バナナ
```
##参考
https://qiita.com/Hayate_0807/items/2e9705091b181a104621
WordPressの固定ページテンプレートをフォルダで分ける

WordPressの固定ページは通常、次の命名規則でファイルを作成します。

```
page-$pagename.php
```

例えば、`company`というスラッグの固定ページなら

```
page-company.php
```

というファイル名になります。しかし例えば、`company`の子ページとして`about`を作成して、`example.com/company/about`にした場合でも、テンプレートファイル名は

```
page-about.php
```

となるため、大量の固定ページテンプレートを作る際に管理しにくくなります。そこで、これを次のようなテンプレートファイルを作れるようにします。

```
wp-content/themes/(テーマ名)/company/index.php - companyのテンプレート
wp-content/themes/(テーマ名)/company/about.php - company/aboutのテンプレート
```

## page.phpの作り方

しくみとしては、本来の固定ページテンプレートである`page.php`を次のようにします。

```php5
<?php
// テンプレートがあるかをチェック
$url = $_SERVER['REQUEST_URI'];
$url = explode('?', $url);
$url = $url[0];

$path = get_template_directory() . substr($url, 0, strlen($url) - 1) . '.php';
if (file_exists($path)) {
    include($path);
    exit();
}

// index.phpを付加して検索
$path = get_template_directory() . $url . '/index.php';
if (file_exists($path)) {
    include($path);
    exit();
}
?>

ここに、一般の固定ページ用のテンプレートを記述します
```

これで、先のようにテーマディレクトリの中にフォルダーを作ってテンプレートを配置すると利用できるようになります。従来通りの`page-$pagename.php`というテンプレートも利用できます（そちらの方が優先されます）。
nslookupコマンドでDNSルックアップしてみる

# DNSルックアップとは
ドメイン名とIPアドレスを紐づけるためにDNSサーバーへの問い合わせを行うこと
「正引き」（フォワードルックアップ）と「逆引き」（リバースルックアップ）がある

DNSルックアップ：「ドメイン名⇔IPアドレス」の変換
フォワードルックアップ（正引き）：「ドメイン名→IPアドレス」の変換
リバースルックアップ（逆引き）：「ドメイン名←IPアドレス」の変換

# nslookupコマンド
このコマンドを使うことでドメイン名→IPアドレス、IPアドレス→ドメイン名と相互に変換可能

## nslookupで「ドメイン名⇔IPアドレス」の変換を試す
jprs.jpというドメイン名を使って検証
### まずフォワードルックアップ
jprs.jpのIPアドレスを調べてみると117.104.133.164であることが分かる

~~~shell
>nslookup jprs.jp
サーバー:  UnKnown
Address:  2404:1a8:7f01:b::3

権限のない回答:
名前:    jprs.jp
Addresses:  2001:218:3001:7::b0
          117.104.133.164
~~~
※「UnKnown」や「権限のない回答:」という文言は気にしてはいけない

### 次にリバースルックアップ
117.104.133.164を逆引きしてドメイン名を取得するとjprs.jpであることが分かる

~~~shell
>nslookup 117.104.133.164
サーバー:  UnKnown
Address:  2404:1a8:7f01:b::3

名前:    jprs.jp
Address:  117.104.133.164
~~~

### 結果
「jprs.jp ⇔ 117.104.133.164」であることが分かる

## 正引きと逆引きが一致しない場合
ただし、以下のように、あるドメイン名をもとにフォワードルックアップで取得したIPアドレスを使って、リバースルックアップを行っても、元のドメイン名が得られるとは限らない

~~~shell
>nslookup google.com 8.8.8.8   # nslookupはこのように第2引数に利用するDNSを指定することもできる
サーバー:  dns.google
Address:  8.8.8.8

権限のない回答:
名前:    google.com
Addresses:  2404:6800:4004:810::200e
          172.217.25.206


>nslookup 172.217.25.206 8.8.8.8
サーバー:  dns.google
Address:  8.8.8.8

名前:    nrt12s13-in-f206.1e100.net  # 正引きしたIPアドレスを使って逆引きしても元のドメイン名と一致していない
Address:  172.217.25.206
~~~
「google.com → 172.217.25.206」だが、「172.217.25.206 → google.com」ではないことが分かる
これは、フォワードルックアップに利用される情報（Aレコードと呼ばれる）と、リバースルックアップに使われる情報（PTRレコードと呼ばれる）が個別に設定できることなどが理由としてあげられる


# 用語のおさらい
## 正引き  【 forward lookup 】  フォワードルックアップ
ドメイン名やホスト名から対応するIPアドレスを探索すること
## 逆引き  【 reverse lookup 】  リバースルックアップ
IPアドレスから対応するドメイン名やホスト名を探索すること
## Aレコード
ホスト名（FQDN）に対応するIPアドレスを定義するもので、フォワードルックアップに利用される
https://e-words.jp/w/A%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89.html
## PTRレコード
特定のIPアドレスに対応するホスト名を定義するもので、リバースルックアップに利用される
http://e-words.jp/w/PTR%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89.html

## 参考リンク
- 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
[DNSルックアップ](https://wa3.i-3-i.info/word17716.html)

- 1つのIPアドレスに複数のホスト名を付けている場合の逆引きとは
https://www.atmarkit.co.jp/fnetwork/dnstips/018.html

- AレコードとCNAMEレコードを整理する
https://qiita.com/pirorirori_n712/items/9f9f1e7c3ee7e6850645
クロスサイトに対応する

## 環境

|環境             |
|:-----------------------------------|
|Laravel7.x                          |
|HTTPS                               |
|AWS ALB, EC2                        |

PHPでフレームワークはLaravel7.14を利用しています。
webサーバーはnginxです。(あまり関係ない)
下記に行った順で課題に対するコミットを記述していきます。


## 課題
クロスサイトのPOSTメソッドで指定したオリジンから取得したものをsessionに保存したい。
当プロジェクトでは、あるプラットフォームから取得できるuser_idのようなものを
sessionに保存したい、という課題でした。
しかしながら、解決策はフロントエンドとサーバーサイドでオリジンを分けている際にも対応可能の解決策でした。

## ①HTTPS化する
私が調査した中で、クロスサイトを有効にするには
<font color="Red">通信を暗号化(常時ssl化)し、CookieのSecure属性をtrueにする</font>
というのが最初の打開策でした。
まず、はじめにロードバランサーのエンドポイントにssl証明書を発行します。
30分ぐらいで証明書の発行ができます。
参考URLはこちら↓
https://recipe.kc-cloud.jp/archives/11084

さらに、常時HTTPS化するには(Laravel7.x)

```php:src/app/Http/Middleware/TrustProxies.php
<?php

namespace App\Http\Middleware;

use Fideloper\Proxy\TrustProxies as Middleware;
use Illuminate\Http\Request;

class TrustProxies extends Middleware
{
    /**
     * The trusted proxies for this application.
     *
     * @var array|string|null
     */
    protected $proxies = '**';

    /**
     * The headers that should be used to detect proxies.
     *
     * @var int
     */
    protected $headers = Request::HEADER_X_FORWARDED_ALL;
}

```
で、LBの終端でHTTPS化が可能となります。

### CookieのSecure属性をtrueにする。
次に、Samesite=none; Secureにするために

```.env
## .env

SESSION_SECURE_COOKIE=true
```
```php:src/config/session.php
/*
〜〜〜〜〜〜〜
〜〜〜〜〜〜〜
*/
'same_site' => 'none',
```
とします。
これでchromeとfireboxでは課題を解決しましたが、
safariでは`Samesite=none`が実装されていないため
sessionを保存できず、、、、という感じでした。


## ②CORSの設定を編集
そして行き着いたのは、ヘッダーに許容するオリジンを追加するという手段です。
Laravel7.xにはデフォルトで`src/config/cors.php`があるので
下記のように編集します。

```php:src/config/cors.php
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    // 許容するmiddlewareのグループを記載する。
    // 当プロジェクトでは * にしています。
    'paths' => ['*'],

    // 許容するメソッドを指定する
    'allowed_methods' => ['GET', 'POST'],

    // 許容するオリジンを指定する。
    // .envに記載してもいい
    // 'allowed_origins' => [env('REQUIRE_DMAIN', NULL)],
    'allowed_origins' => ['https://<ドメイン>'],

    'allowed_origins_patterns' => [],

    // 許容するヘッダーを記載する
    'allowed_headers' => ['X-CSRF-TOKEN', 'Content-Type', 'Origin', 'Authorization', 'Accept', 'X-Requested-With'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];
```

上記のようにすることで、safariでもsessionを記載することができました。
Laravel7.x未満でもcors.phpはcomposerでインストールできますのでそちらを参照してください。

以上が私が行った解決策です。
`allowed_origins `にポート番号も記載すれば異なるポート番号からも許容できるようになります。
もっと良い方法があれば是非、コメントよろしくお願いします。
デフォルトで今日の日付日時を表示する方法：秒以下を除去



【概要】
----------------------------------------
<b>1.結論</b>

<b>2.どのように記載するか</b>

<b>3.ここから学んだこと</b>



1.結論
----------------------------------------
<b>(任意の変数).toISOString().slice(0, -8)</b>を使用する
<br>

2.どのように記載するか
----------------------------------------

前提として、

```ruby:new.html.erb
<%= f.datetime_field :study_date ,id:"datetime_field"%>
```

で設定しています。

datetime_fieldメソッドは
=***.toISOString().slice(0, -8）;をすることにより、
今日の年、月、時間、分までをデフォルトに表記することができます。

```ruby:***.html.erb
<script>
  var today_time = new Date();
   now.setMinutes(today_time.getMinutes() - now.getTimezoneOffset()); #----❶
    document.getElementById('datetime_field').value = today_time.toISOString().slice(0, -8); #----❷
</script>
```

と記載しました。
html.erbに記述しておりますので"script"で囲み、更新するとconsoleで変数の定義がされているとエラーがでたのでvarにしています。❶❷までについては下記のURLで触れられている通り表示される時刻はUTC表記(❷)になるので、前もってUTCの差分(❶)に合わせています。

**参考にしたURL:**
**<a href="https://qiita.com/takatama/items/f4aeebd8f9eb509e3cdd">HTML5 <input type="datetime-local"> に現在時刻を設定するには</a>
<br>**

3.ここから学んだこと
----------------------------------------
自分は最初に

```ruby:****.html.erb
<f.date_field :****, value:Time.now.strftime("%Y-%m-%d")>
```
を使用していました。value:Time.now.strftime("%Y-%m-%d")を入れてあげるとページが表示された段階で現在の日付が自動で入力されます。

**かなり参考にしたURL:**
**<a href="https://thr3a.hatenablog.com/entry/20151105/1446714523">Railsのdate_fieldにてデフォルト値を設定する</a>**

しかし、f.datetime_fieldの場合は、valueに上記のものを入れたり、Time.nowにすると

```ruby:
The specified value "2020 9/16 12:05" does not conform to the required format.  The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS".
```
と出てしまいました。
基準通りの記述を満たせていないということで、認識されていないということでした。なので上記の方法で行いましたが、slice(0,-1)をあまり理解できていないことに気づきました。slice（start,end)はstartから始まる文字~endの手前の数分だけを取り出すので、上記のように書くことで”ss.SSS（秒以下の時間)”を省くことができました。

**参考にしたURL:**
**<a href="https://www.javadrive.jp/javascript/string_class/index6.html">sliceメソッド</a>**

<br>
SceneKitでobjファイルで読み込んだオブジェクトにテクスチャを貼る

# はじめに
[Structureセンサ](https://structure.io/structure-sensor)でスキャン後に書き出したデータ（`.obj`ファイル）を、下記の記事を参考に`SceneKit`で読み込んだところ、テクスチャが反映されなかった[^1]。
参考記事：[SceneKit to show 3D content in Swift 5](https://medium.com/@litoarias/scenekit-to-show-3d-content-in-swift-5-5253afbe63b1)

# `.mtl`を上書き
`.mtl`ファイルの記述が足りないようなので、`.mtl`ファイルを開き、`map_Ka xxx.jpg`を書き足すとテクスチャが表示された（`xxx.jpg`はテクスチャ画像）。
なので、`.mtl`ファイルの上書きをすることでテクスチャを表示することはできる。


# コードでテクスチャ画像を指定する
SceneKitのオブジェクトでテクスチャを設定することもできる。
[上記参考記事](https://medium.com/@litoarias/scenekit-to-show-3d-content-in-swift-5-5253afbe63b1)では、`SCNScene`のイニシャライザで`.obj`ファイルを読み込んでいる。

```swift
let scene = SCNScene(named: "xxx.obj")
```

しかし、`SCNScene`だと、テクスチャを貼る方法がない（と思われる）。
なので、オブジェクト用の`SCNNode()`を用意して、これにテクスチャを貼ることにした。


```swift
// Sceneに直接オブジェクトを貼るとテクスチャをイジれないので、チャイルドノードとして持たせる
let modelObj = SCNMaterial()

// objファイル読込（URL）
// アプリのディレクトリにファイルを置いている想定
if let documentDirectoryFileURL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).last  {
    let fileName                = "hoge/xxx.obj" // .objファイル
    let url                     = documentDirectoryFileURL.appendingPathComponent(fileName)
    let objNode                 = SCNNode(mdlObject: MDLAsset(url: url).object(at: 0))
    objNode.geometry?.materials = [modelObj]
    scene.rootNode.addChildNode(objNode)
}

// diffuse.contentsにテクスチャを指定する
// テクスチャファイル読込（path）
if let path = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true).last {
    let fileName = "/hoge/xxx.jpg" // テクスチャファイル
    modelObj.diffuse.contents   = UIImage(named: path+fileName)
}
```
参考：[ARKitで立方体の6面それぞれに異なるテクスチャを貼る方法](https://qiita.com/surfinhamster/items/1630ca14b947969a5111)

[^1]: Srructure SDKのサンプルコードはOpen GLで描画している。また、保存した`.obj`ファイルを詠み込む方法は示されていない。Open GLを自力で書いていくのは避けたいため、`SceneKit`に逃げたのであった。
ERROR: create _mysql-data: "_mysql-data" includes invalid characters for a local volume name, only "[a-zA-Z0-9][a-zA-Z0-9_.-]" are allowed.

#はじめに
※MySQL、Dockerのタグを付けましたが今回の内容には直接は関係ないです。
#エラー内容

Docker立ち上げようと```docker-compose up -d```したら

```
ERROR: create _mysql-data: "_mysql-data" includes invalid characters for a local volume name, only "[a-zA-Z0-9][a-zA-Z0-9_.-]" are allowed. 
```
というエラーが出てしまいました。みなさんこんな初歩的なミスはしないためかググってもなかなか同じ内容のエラーで悩んでる方が出てきませんでした。

#原因

```git pull 〇〇```でプロジェクトのURLをプルしたディレクトリ名をカタカナにしておりました。なので```"[a-zA-Z0-9][a-zA-Z0-9_.-]"```という風にアルファベットか数字にしてねと怒られていたのでした。。
Docker for WindowsをアップデートしたらWSL2のdockerがエラーを吐いた件の対応

```
$ docker-compose ps
ERROR: Couldn't connect to Docker daemon at http+docker://localhost - is it running?

If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable.
```

あれ、なにかしたっけ・・・。

そういえばDocker for Windowsがなにかアップデートしたような・・・。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290072/ee9faf3a-72d9-b631-7c88-95044221e6f5.png" width="50%">


| 名称 | バージョン |
|:-----------|:------------|
| docker for desktop | 2.3.0.5 |
| Engine | 19.03.12 |
| Notary | 0.6.1 |
| Compose | 1.27.2 |
| Credential Helper | 0.6.3 |
| Kubernetes | v1.16.5|


# とりあえずエラーをぐぐる

参考
[WSL2にしたらDocker使えへん](https://blog.logicky.com/2020/07/31/013155)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290072/4cabe3ce-82d8-1e48-210a-99696a0ace4d.png" width="50%">

この設定を行ったところ、無事にWSL2内で動作することを確認した

```
$ docker-compose ps
Name   Command   State   Ports
------------------------------
```

# 完了

何もなくてよかった。
【Exception: アイテム タイプのコンバージョンが無効です: PAGE_BREAK。】の原因と解決方法

#はじめに
　定員があるGoogleフォームを作成したところ、下記のエラーが発生しました。

#エラーメッセージ
　Exception: アイテム タイプのコンバージョンが無効です: PAGE_BREAK。

#フォーム作成時に参照した記事
　 [こちらの記事](https://qiita.com/GMA/items/e672c18b09d84c753973)を参考に作成しました。

#検証
- console.log()を使いそもそもフォームから値が取れているか確認。結果、問題なし。
- 参考にした記事との相違点を検討。セクションを追加していたため、セクションなしで実行。結果、エラーが解消された。
- 再度セクションを追加して実行。結果、再びエラー発生。

#原因
　セクションタイトルと質問項目が同じ名前だった。

#解決方法
　セクションがない場合は発生しなかったため不明。セクションが2つ以上ある場合、セクションタイトルと質問項目を別の名前にする。

#おわりに
　同じエラーで困っている方の助けになれば幸いです。
OpenTelemetryで複数のExporterを登録する

OpenCensusのノリで、エクスポーターを複数追加したら、なぜかJaegerにトレースが出ないぞ、ということで、もしかしてこれはバグなのでは？コミットチャンスでは？と思い調べたりしていました。

うまくいかなかったコードはこちら。サンプルのjaeger出力のコードに対して、タコの絵文字の部分を追加しました。標準出力エクスポーターですね。

* https://github.com/open-telemetry/opentelemetry-go/blob/master/example/jaeger/main.go

```go
package main
​
import (
	// (略)
	"go.opentelemetry.io/otel/exporters/stdout" // 🐙
)
​
func initTracer() func() {
	// (略)
	// begin: 🐙
	_, err = stdout.InstallNewPipeline(nil, nil)
	if err != nil {
		log.Fatal(err)
	}
	// end: 🐙
​
	return func() {
		flush()
	}
}
```

これを実行すると、標準出力には出るが、Jaegerには出ないぞ、というのが発端。

# globalには1つのProviderしか登録できないっぽい

OpenTelemetryはよくあるGoのAPI設計のように、詳細設定ができるAPIがまず提供されており、それをラップする形で、簡単に扱えるAPIがあります。上記の``Install-``なメソッドは簡単メソッドです。どのエクスポーターでも、``NewExport``な関数があり、それをラップする形で提供されています。この関数では最後に``global.SetTraceProvider()``を呼んでいます。

```go
func InstallNewPipeline(endpointOption EndpointOption, opts ...Option) (func(), error) {
	tp, flushFn, err := NewExportPipeline(endpointOption, opts...)
	if err != nil {
		return nil, err
	}

	global.SetTracerProvider(tp)
	return flushFn, nil
}
```

この関数、中をみてみると、どうも、``atomic.Value``な感じ。それにSetしているので1つしかエクスポーターが設定でいない感じです。グローバルで複数やったら最初の設定が上書きされちゃうってわかりにくいし、プログラムの稼働中にプロバイダーを動的に差し替えたりもしないので、2回目の実行はpanicにするか、エラーを返すかして欲しい気持ち・・・

https://github.com/open-telemetry/opentelemetry-go/blob/master/api/global/internal/state.go

# 最終的な解決策

自分で複数の出力するプロバイダーを作ります。

ymotongpoo氏に教えてもらったのが``sdktrace.WithSyncer()``でした。OpenTelemetryの簡単初期化関数の中でもこれを使って``sdktrace.NewProvider()``にエクスポーターは登録していました。これを参考に複数登録すれば良さそうです。

```go
	jexp, err := jaeger.NewRawExporter(
		jaeger.WithCollectorEndpoint("http://localhost:14268/api/traces"),
		jaeger.WithProcess(
			jaeger.Process{
				ServiceName: "ot-demo",
			},
		),
		jaeger.WithSDK(&sdktrace.Config{DefaultSampler: sdktrace.AlwaysSample()}))
	if err != nil {
		panic(err)
	}
	defer jexp.Flush()

	stdexp, err := stdout.NewExporter()
	if err != nil {
		panic(err)
	}

	tp, err := sdktrace.NewProvider(
		sdktrace.WithSyncer(stdexp),
		sdktrace.WithSyncer(jexp),
	)
	if err != nil {
		panic(err)
	}
	global.SetTraceProvider(tp)
```

これで無事、Jaegerにも、標準出力にも出るようになりました。まあ、複数出したい、という要件自体があまりないと思うのですが、記録のためにQiitaに書いておきます。

![Screen Shot 2020-09-16 at 18.46.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6105/f39ab1b2-636b-2919-9bca-8ec1466d5080.png)