OmniAICreator/Qiita-1.07M huggingface dataset:
reduxで配列操作する時のメモ

## 目的
reduxで配列操作する時にサラッと確認したいメモです。
Reducerのみ

```javascript:cardReducer.js
import {
    ADD_CARD,
    UPDATE_CARD,
    DELETE_CARD,
} from './cardTypes'

const initialState = {
    imageList: []
}

const cardReducer = (state = initialState, action) => {
    switch (action.type) {
        // 要素の追加
        case ADD_CARD:
            return {
                ...state,
                imageList: [...state.imageList, action.payload]
            }
        // 要素の更新
        // 要素のIDで更新対象を確定
        case UPDATE_CARD:
            return {
                ...state,
                imageList: state.imageList.map(el => el.id === action.payload.id ? action.payload : el)
            }
        // 要素の削除
        // 要素のIDで削除対象を確定
        case DELETE_CARD:
            return {
                ...state,
                imageList: state.imageList.filter((item) => item.id !== action.payload)
            }
        default: return state
    }
}

export default cardReducer
```
DockerのAlpineのapkが名前解決に失敗しててハマった

## エラーメッセージ

```
ERROR: http://dl-cdn.alpinelinux.org/alpine/v3.11/main: No such file or directory
WARNING: Ignoring APKINDEX.70f61090.tar.gz: No such file or directory
ERROR: http://dl-cdn.alpinelinux.org/alpine/v3.11/community: No such file or directory
WARNING: Ignoring APKINDEX.ca2fea5b.tar.gz: No such file or directory
2 errors; 15 distinct packages available


```

## 考えたこと

明らかにAlpine側の問題だろうと思っていたのですが、
このIssueがだいぶ前からあったみたいで、


https://github.com/gliderlabs/docker-alpine/issues/207

ここでめっちゃ盛り上がっています。
何が原因なのかよくわからないんですけど、
`http://dl-cdn.alpinelinux.org/alpine/v3.11/community`
直接curlで取りに行くと取れるんですよね。
にも関わらず、Error Messageは`No such file or directory`となっている。

ということは、
- Alpine側のDNSがぶっ壊れているのか
- Dockerコンテナの内部ネットワークがおかしくなっているのか

と考えられそうです。


まぁ、Dockerでyumやaptでファイルはとってこれているので、おかしいことないと思うのですが、一応Dockerのホストを探す仕組みを調べてみます。

http://docs.docker.jp/engine/installation/linux/ubuntulinux.html#docker-dns

Dockerの外部との通信の仕組みが簡潔にわかりやすく書いてありますね。

> この警告は、Docker コンテナがローカルの DNS サーバを使えないためです。そのかわりDocker はデフォルトで外部のネームサーバを使います。

なるほど。どうぞどうぞって感じですが、使っているDNSサーバーは違うんですね。

ローカルのみてるDNSと別物みたいですし、このネームサーバーに到達できなくてコケている説をまず考えてみますか。

とりま、Dockerのイメージの内部で、どのように名前解決しているのかを調べたいのですが、どこにDNSの設定ファイルがあるのか。。。

頑張って調べたところ、どうやら`/etc/resolv.conf`が参照しているDNSのアドレスを設定する場所っぽかったので確認すると

```
nameserver 8.8.8.8
nameserver 8.8.4.4
```
となっていました。

ローカルのマックの方は

```
#
# macOS Notice
#
# This file is not consulted for DNS hostname resolution, address
# resolution, or the DNS query routing mechanism used by most
# processes on this system.
#
# To view the DNS configuration used by this system, use:
#   scutil --dns
#
# SEE ALSO
#   dns-sd(1), scutil(8)
#
# This file is automatically generated.
#
nameserver 192.168.254.2
nameserver 8.8.8.8

```

192の方が普通にローカルが参照してるDNSだろうなぁという感じ
8.8.8.8はDockerによって追記されたものだろうけど、
多分ここにたどり着いていないんですよね。
なので、

```
nameserver 192.168.254.2
nameserver 8.8.8.8
nameserver 8.8.4.4

```

としてみると、

うまくいきました:smile:

8.8.8.8からAlpineが見えないのは結局Alpine側が悪いってことでいいんですかね？？(よくわかってない)
blueqatでゲート図書けるようになったみたい

blueqatで量子ゲートを描画している感じのツイートがあったので検証してみました。

# 環境準備
環境の準備は以下のコマンドを打つだけ。

```
pip install blueqat obaq
```

# 実際に動かしてみた
コードは以下の通りです。

```python
#ライブラリインポート
import obaq
from blueqat import Circuit

#量子ゲート定義
c = Circuit(1).h[0].m[:]
#量子ゲート描画
c.run(backend="obaq", returns="draw")
```
今回は量子ビットを1つ用意して、アダマールゲートを作用させて観測するという回路を作りました。実行結果は以下の通りです。
<img width="501" alt="obaq-sample1.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541501/0709dc51-7f6e-438d-7b18-e663c2a786ed.jpeg">

おー、できた！なんか見た目がかわいい感じですね。

# 最後に
実行結果を見てて思ったのですが、測定が図に現れないのが少し気になります。測定は最後なので問題ないかもしれないですが、微妙に情報が欠落してしまっている気がしました。

それではまた次の投稿で！
【RPA】基本用語/ツール別比較

最近は複数のRPAソフトウェアを活用するユーザー企業も増えてきていると聞きます。また、開発支援をする側のパートナー企業も複数のRPAソフトウェアを取り扱うところが多いようです。ひとつのRPAソフトウェアに慣れた人が他のRPAソフトウェアを学ぼうとしたときに、意外と困るのが用語の違いです。同じ概念を表すはずの基本的な用語がRPAソフトウェアによって結構違うみたいです。これは困りますね~( 一一)

ということで、RPAで使われる基本用語の違いについて主要5大RPAソフトウェア (WinActor、BizRobo!、UiPath、Automation Anywhere、Blue Prism)の比較をしてみたいと思います。

# 基本用語 - ずばり比較！

|WinActor|BizRobo!|UiPath|Automation Anywhere|Blue Prism|説明|
|:--|:--|:--|:--|:--|:--|
|シナリオ|ロボット|プロセス|ボット / タスクボット|プロセス|アプリケーションの操作手順。|
|フローチャート|オートメーションワークフロー|ワークフロー|アクションリスト|プロセス|操作手順を説明した図形群。|
|ノード / アクション|ステップ / アクション|アクティビティ|アクション|ステージ|操作手順の中の1動作。|
|ライブラリ|ロボット ライブラリ|ライブラリ / パッケージ|パッケージ(A2019) / メタボット(v11)|(ビジネス)オブジェクト (VBO)|拡張機能としてインストールできる動作。|
|サブルーチン|スニペット|スニペット|【機能なし】|スニペット|フローチャートの一部を保持しておくための個人的メモ帳スペース。|
|シナリオエディタ|DS (Design Studio), DA (Device Automation(~v10.3) / Desktop Automation (v10.4~))|Studio|Client(v11) / マイBot(A2019)|Blue Prismソフトウェア|開発環境。※BizRobo!はDSとDAの2つに機能が分かれている。|
|シナリオエディタ|ロボットエディター|デザイナー|タスクエディター / ワークベンチ|スタジオ|開発環境のエディターの名前。|
|WinDirector|RS (RoboServer), MC (Management Console)|Orchestrator|Control Room|Blue Prismサーバー|サーバー機能。|
|【機能なし】|エレメントツリー|セレクター|オブジェクトクローニング|スパイ要素|UI要素を分解して把握する仕組み。|
|記録, エミュレーション|【同様の機能なし、考え方が異なる】|レコーダー|レコーダー / 記録|【機能なし、スパイモードで要素分解の探りを入れます】|ユーザーのマウス/キーボード操作を記録してフローチャートに落とす機能。|

※用語によっては同じメーカーの中でも表現が揺れているものがあるので、その場合は複数の用語を併記しました。

他にも対応する用語があれば順次追加予定です～('ω')ノ

# 関連記事

* [【RPA】どのランタイム環境上で作られているか/ツール別比較](https://qiita.com/Okura_/items/a3f9393267e655e7300d)
* [【RPA】メールの送受信/ツール別比較](https://qiita.com/Okura_/items/369d95a938a05e836417)
* [【RPA】自動化に対する思想/ツール別比較](https://qiita.com/Okura_/items/1c8b29d40d98f2e5ce63)
* [【RPA】サーバー管理の仕組み/ツール別比較](https://qiita.com/Okura_/items/dfc380ec50df6b289391)
* [【RPA】トリガー・スケジュール機能/ツール別比較](https://qiita.com/Okura_/items/7d5e617260378fd2947f)
* [【RPA】ロボットの稼働方法 (ヒトロボ協働型・ロボ自律型)別ライセンス提供/ツール別比較](https://qiita.com/Okura_/items/e9c9f394ae5805481b2b)
* [【RPA】オブジェクト指向のロボット作成/ツール別比較](https://qiita.com/Okura_/items/923706e8f4c8e3628522)
* [【RPA】シンクライアント操作への対応/ツール別比較](https://qiita.com/Okura_/items/13de777603cd9912992b)
* [【RPA】SAP対応/ツール別比較](https://qiita.com/Okura_/items/b265ca3f083b92471b58)
* [【RPA】対応ブラウザー/ツール別比較](https://qiita.com/Okura_/items/8501117954139300f427)
* [【RPA】コーディング知識の必要度/ツール別比較](https://qiita.com/Okura_/items/71a577e2141591c88a33)
* [【RPA】UI Automation 対応状況/ツール別比較](https://qiita.com/Okura_/items/95a78c46454ae0dac036)
* [【RPA】ログイン情報の保管方法/ツール別比較](https://qiita.com/Okura_/items/12cdcc743670c6d9c7c7)
C++11 でメッシュ処理するライブラリのメモ

## libigl

https://libigl.github.io/

ヘッダオンリーで使える. MPL ライセンス

## OpenMesh, OpenFlipper

https://www.openmesh.org/
https://www.graphics.rwth-aachen.de/software/openflipper/

## TinyMeshUtils

https://github.com/syoyo/tinymeshutils

現状は half-edge 作る機能だけです.
ただし, half-edge 構築は, 多角形ポリゴンに対応しています(libigl, OpenMesh は三角形のみ)

## libmorton

https://github.com/Forceflow/libmorton

Morton code を生成する.

## TriMesh2

https://gfx.cs.princeton.edu/proj/trimesh2/
https://github.com/Forceflow/trimesh2

ICP(Iterative Closest Point) や Loop subdivision がある.
ただしライセンスは GPL なので注意.

## CGAL

https://www.cgal.org/ 

玄人むけ. 精度保証計算も入っていたような?
Boost を使っているのでビルドがめんどい.
paizaで使える標準入力PHP用

標準入力が意味不明だったのでまとめてみます。

シンプルに一行だけの場合
入力例 100

```test.php
$a = trim(fgets(STDIN));
//$aに100が入る
```
一行でスペースまじりの場合
入力例　100 200

```test.php
fscanf(STDIN,"%d %d",$a,$b);
//$aに100,$bに200が入る
//文字列の場合
fscanf(STDIN,"%s %s",$a,$b);
```
値を配列に入れてくパターン(二行とか）
入力例　100
　　　　100

```test.php
//空の配列を用意
$array = [];
$i=0;
while($i<=1){
//配列の後ろに一つずつ追加
    array_push($array,trim(fgets(STDIN)));
    $i++;
}
```
【Ruby】クラスメソッドとインスタンスメソッド

#クラスメソッドとインスタンスメソッド
クラスの中で定義できるメソッドとして、`クラスメソッド`と`インスタンスメソッド`があります。

##クラスメソッドとインスタンスメソッドの違い
下記の様な違いがあります。
・クラスメソッドは、クラスから実行できる。
・インスタンスメソッドは、インスタンスから実行できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/f56d3944-9c95-e792-17c7-209de91eb43e.png)

クラスメソッドはクラスから直接呼び出せることができるのに対して、
インスタンスメソッドはインスタンスを生成しないと呼び出すことができません。

##クラスメソッド
クラスメソッドの特徴としては、
・クラスから実行できるメソッド
・`def self.メソッド名 〜 end`でクラス内からメソッドが定義できる。
・`クラス名.メソッド名`で呼び出せる。

サンプルコード例）

```rb
class User
  def self.hello
    p "こんにちは"
  end
end

User.hello

【実行結果】
"こんにちは"

class User
  class << self
    def hello1
      p "こんにちは1"
    end

    def hello2
      p "こんにちは2"
    end
  end
end

User.hello1
User.hello2

【実行結果】
"こんにちは1"
"こんにちは2"
```
###クラスメソッドの用途
クラスメソッドはクラス全体に関わる情報を変更や参照したりするのに便利。
「User」クラスで例えると、ユーザーの一覧表示やユーザー全体で共有指定して使用するステータスを更新するメソッドを作成するときに使うといい。

##インスタンスメソッド
・インスタンスから実行できるメソッド。
・`def  メソッド名　〜　end`で定義できる。
・`インスタンス.メソッド名`で定義できる。

```controller.rb
class User
  def hello
    p "こんにちは"
  end
end

user = User.new
user.hello

【実行結果】
"こんにちは"
```
`user = User.new`でインスタンスを作成し、メソッドを実行している。
`User.hello` の様にクラスから呼び出すことはできない。

###インスタンスメソッドの用途
インスタンスメソッドは個別のインスタンスに関わる情報を変更、参照したりするのに便利。
【R】 関数のコードを文字列として取得する

# 趣旨

わかってますよ、、、このニッチすぎる需要。

ですが、関数のコードを`character`データ（文字列）として取り扱えれば、コードの修正作業を`{stringr}`とかに任せられたり、コードを保存し損ねた関数を取り出せるので、何とか標記の件を実現したかったわけです。

```R:コードを取得したい関数
f1 <- function(){
  print("正岡子規")
  fx <- function(){cat("有名な\nやーつ\n")}
  fx()
  "a" %>% 
    print() 
  print(paste("柿食へば", 
              "鐘が鳴るなり", 
              "法隆寺"))
  # 小峠ではない
}
```

# やり方

試行錯誤の末、こういう方法を考えました。
自己流です。ご指摘ウェルカムです。

```R
x <- paste(as.character(getSrcref(f1)), collapse = "\n")
```

はい、これだけです。

では実際に表示してみます。

```R
> cat(x)
```
```
function(){
  print("正岡子規")
  fx <- function(){cat("有名な\nやーつ\n")}
  fx()
  "a" %>% 
    print() 
  print(paste("柿食へば", 
              "鐘が鳴るなり", 
              "法隆寺"))
  # 小峠ではない
}
```

まったく同じものが取得できました！ｲｪｰｲ

クラスもちゃんと`function`から`character`になっています。

```R
> class(f1)
[1] "function"
> class(x)
[1] "character"
```

## 余談1

`getSrcref()`で取得したオブジェクトは一見文字列なのですが、実際は`srcref`という ~~ちょっと何言ってるか分からない~~ クラスのオブジェクトです。`character`でも`vector`でもないです。

それに関連して、`as.character()`も厳密には`srcref`クラスに適合したメソッド`as.character.srcref()`を使うほうが安全ですが、総称的関数たる`as.character()`を使っても全く問題ないです。

```R
> class(getSrcref(f1))
[1] "srcref"

> as.character.srcref(getSrcref(f1))
 [1] "function(){"                                    
 [2] "  print(\"正岡子規\")"                          
 [3] "  fx <- function(){cat(\"有名な\\nやーつ\\n\")}"
 [4] "  fx()"                                         
 [5] "  \"a\" %>% "                                   
 [6] "    print() "                                   
 [7] "  print(paste(\"柿食へば\", "                   
 [8] "              \"鐘が鳴るなり\", "               
 [9] "              \"法隆寺\"))"                     
[10] "  # 小峠ではない"                               
[11] "}" 
```

## 余談2

`srcref`オブジェクトを取得する方法は上記以外にもう一つあります。

```R
> attributes(f1)[[1]]
```
一応クラスを確認すると、ちゃんと`srcref`クラスオブジェクトをゲットしてます。

```R
> class(attributes(f1)[[1]])
[1] "srcref"
```


## 余談3
今までは`c()`を使って抽出してきたのですが・・・

```R
> cat(as.character(c(f1)))
function () 
{
    print("正岡子規")
    fx <- function() {
        cat("有名な\nやーつ\n")
    }
    fx()
    "a" %>% print()
    print(paste("柿食へば", "鐘が鳴るなり", "法隆寺"))
}
```

おわかりいただけただろうか・・・。

- コード内の改行位置が元と異なる。<BR>具体的には、引数毎の改行、パイプ演算子`%>%`、`{ggplot}`の`+`毎の改行等は全て消えてしまう。
- 逆に大括弧`{}`の前後は強制的に改行してしまう。
- `#`のメモ書き等も消えてしまう。

という問題点があったので、どうにか解決できないかと試行錯誤しているうちに今回の方法を編み出しました。


# おわりに

お試しあれ～～～。

Enjoy!

おしまい。

# 参考文献

- [R: References to Source Files and Code](https://stat.ethz.ch/R-manual/R-devel/library/base/html/srcfile.html)
【JavaScript】fetchを使って外部データを取得する

#1. fetch APIとは
サーバーとデータのやりとりができる機能

（例）
・API経由でサーバーからデータを取得する
　Twitterの場合：タイムラインの取得、ユーザー情報の取得
・API経由でサーバーにデータを送る
　Twitterの場合：新規登録、ログイン情報の送信、ツイート内容の送信

#2. fetchメソッドの戻り値は、Promiseオブジェクト
・外部とデータのやりとりを行う場合は、「fetchメソッド」を使う
 （fetchメソッドは、非同期処理される）

Trivia API : https://opentdb.com/api_config.php

```javascript:（例）
const url = "https://opentdb.com/api_config.php";
const p = fetch(url);
console.log(p);
// => 結果：Promise {<pending>}
```
=> fetchメソッドの戻り値は、Promiseオブジェクト
=> 「Promiseオブジェクト」<= => thenメソッドを経由して、外部データを取得する

#3. fetchメソッドの使い方（JSON形式のデータを取得するとき）

```javascript:使い方
fetch("APIのURL")
	.then(responce => {
		// responce.json()をreturnすることで、次のthenに
		// APIで取得できるデータをオブジェクト形式で渡すことができる
		return responce.json();
	})
	.then(data => {
		// responce.json()で受け取った中身を確認
		// 実際にはここでdataの中身を利用して様々な処理をする
		console.log(data);
	})
```

```javascript:（例）
const url = 'https://opentdb.com/api.php?amount=10';

fetch(url)
	.then(res => {
		return res.json();
	})
	.then(data => {
		console.log(data);
	})
// => 結果：{response_code: 0, results: Array(10)}
```


・thenメソッドを使って、fetchメソッドで取得した実データの受け渡しを行う
【CSS】 Grid LayoutのIE11対応のまとめ

CSS Grid Layoutレイアウトに便利なCSSですが、IE用の実装が癖があります。
そこでIEに使用したソースをまとめて見たいと思います。
ちなみにIEでもIE11にしか対応していないのでIE10以下は使用できません。


<img width="1128" alt="スクリーンショット 2018-01-17 13.01.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/163786/29c45fb2-cf4a-6b80-0344-91fc5f04b584.png">

[css gridの実装状況](https://caniuse.com/#search=grid)

#通常の実装

```html
<div class="wrap">
	<header>ヘッダー</header>
	<div class="contents">コンテンツ</div>
	<div class="sidebar">サイドバー</div>
	<footer>フッター</footer>
</div>

```

```css
.wrap {
  display: grid;
  grid-template-rows: 45px 1fr 45px;
  grid-template-columns: 1fr 25px;
}
header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}
.contents {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
.sidebar {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
footer {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}

```
上記のソースでこのようなレイアウトが作れます。

![アートボード 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163786/2bfe9555-8e5f-4601-a493-a46fcf4106a4.png)

しかしIEはこれでは表示してくれません。

##IEの実装

```
.wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 45px 1fr 45px;
  grid-template-rows: 45px 1fr 45px;
  -ms-grid-template-columns: 1fr 25px;
  grid-template-columns: 1fr 25px;
}
header {
  -ms-grid-row: 1;
  grid-row: 1 / 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}
.contents {
  -ms-grid-row: 2;
  grid-row: 2 / 3;
  -ms-grid-column: 1;
  grid-column: 1 / 2;
}
.sidebar {
  -ms-grid-row: 2;
  grid-row: 2 / 3;
  -ms-grid-column: 2;
  grid-column: 2 / 3;
}
footer {
  -ms-grid-row: 3;
  grid-row: 3 / 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}
```

すごくややこしいですね。
最近Autoprefixerが進化したようなのでこの辺の記述も楽になってきたようです。
https://autoprefixer.github.io/
XCode 11.xにしたら iPad でViewサイズがおかしくなった

Xcodeのバージョンあげたら、iPad上のViewサイズがおかしくなってしまいました。

# 環境
- Xcode 11.3.1
- Mac 10.14.6 Mojave

# こんな感じ
![スクリーンショット 2020-03-08 20.33.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/35be4fcc-00c9-14d5-df8f-b07ae0a4eb9f.png)

以下が正常だった時

![スクリーンショット 2020-03-08 20.34.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/579ea6fd-b709-45ff-ebc6-21a5e6fa0ae0.png)

# Presentationをfullscreenにして解決

![スクリーンショット 2020-03-08 20.34.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/97a3d186-8b11-0fd6-38bd-2e4a26a73f27.png)

以前は、 `automatic` にしていた。

他の解決策があるかもしれませんが、とりあえず。
Route53 + CloudFront + S3で静的サイトを公開する

https://qiita.com/buta/items/06a7e147d865fb862783
https://dev.classmethod.jp/cloud/aws/tls-for-s3-web-hosting-with-cloudfront/

CloudFront + S3 で静的サイトを運用する際の注意点
https://qiita.com/ooxif/items/d28b7caf72bf5290588c
構成による違いについて、後で確認する

# 構成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176264/af67f3f8-ed9e-b486-7330-2677d5e36ce1.png)


# S3

バケットを作成し、静的サイトホスティングを行う。

# CloudFront

- Alternate Domain Namesは指定しない（Route53でドメイン指定する為
- Restrict Bucket Access: yesにチェック。(Yes: S3のURLで直接アクセスを拒否する。）
- カスタムドメインを利用する場合にはSSL証明書が必要
    - https://aws.amazon.com/jp/premiumsupport/knowledge-center/install-ssl-cloudfront/
    - SSL証明書はインポートもできるが、CertificateManagerで作成した証明書を利用することも可能
    - https://aws.amazon.com/jp/certificate-manager/
    - CloudFrontで証明書を使用する場合は、必ず「米国東部（バージニア北部）」リージョンで証明書を登録する
        - CloudFrontにはリージョンがない（？）
        - 東京リージョンで証明書を登録するとCloudFrontの画面で証明書が見つからなくてはまる
        - CertificateManagerで独自ドメインで証明書作成→DNS検証→Route53でのレコード作成ボタンを押すとRoute53の該当ドメインへCNAMEが追加される
        - CertificateManagerでDNS検証は上記CNAME設定後検証完了まで時間がかかるので待つ
        - https://aws.amazon.com/jp/premiumsupport/knowledge-center/acm-certificate-pending-validation/
        - DNSを使用して検証したACM証明書を自動的に更新する（ACMは、証明書が使用中でDNSレコードが配置されている限り、有効期限が切れる前に各証明書を更新する）：手動更新する必要はない
    - BehaviorsでViewer Protocol Policyを「Redirect HTTP to HTTPS」にすればhttpでアクセスしてもhttpsにリダイレクトしてくれる
    - https://yoshidashingo.hatenablog.com/entry/2014/03/06/144345

# Route53

- CloudFrontで利用するドメインを設定する
- CertificateManagerで生成する証明書のDNS検証の為CNAME設定を行う（CertificateManagerで「Route53でのレコード作成ボタン」を押すと自動で設定してくれる）

# 参考

https://qiita.com/jasbulilit/items/73d70a01a5d3b520450f
Flutterのhot reload

最近、趣味でFlutterをはじめました。
勉強がてらつくりたいものがありやっているので、学んだことをメモしていこうと思います。

## What is "hot reload"?
（多分）Flutterの特徴のひとつであるhot reloadという機構は、コードを変更するとそれをリアルタイムでコンパイルしてappに反映してくれます。
例えばこんな感じ。
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356480/38a5ff6e-aa02-7fc8-191f-c5f66d4d15a1.gif)

めっちゃ便利！😀
爆速で開発できそう。
あと、この例にあるグリーンとパープルのカラーもオシャレで今後の開発が楽しみです:)
本番環境でbackground-imageが反映されない時の解決法

##本番環境でbackground-imageが反映されない。

これで詰まる人が多そうなので、共有します。

ググると、
background-image: url(***.jpg);でうまくいくよ。
とか、拡張子jpgをpngに変えろとか言う記事がありますが、

正しくは、

```
background-image: image-url("***.jpg");
```
です！これで、本番環境でもCSSが反映されます。
UiPath フォルダをコピーする

ファイルのコピーなら「ファイルをコピー」アクティビティがありますが、フォルダをコピーするアクティビティは無いようなので調べてみました。

方法

「コードを呼び出し」（InvokeCode)アクティビティを使用します。

以下のコードを入力します。

```
My.Computer.FileSystem.CopyDirectory("元フォルダパス", "保存先フォルダパス/新フォルダ名", _
    FileIO.UIOption.AllDialogs, FileIO.UICancelOption.DoNothing)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473245/07203700-6030-fe30-5891-67c7b4772fbc.png)

これでフォルダのコピーができます。

なお、以下の２つのオプションは省略できますが、個人的にはあると便利なのでつけています。

FileIO.UIOption.AllDialogs：進行状況ダイアログとエラー・ダイアログを表示する

FileIO.UICancelOption.DoNothing：[キャンセル]ボタンがクリックされても例外をスローしない

これ以外にも色々な方法がありますが、この方法なら一つのアクティビティで完結できます。
もちろん、ファイル名やフォルダ名は変数を使う事もできます。
Kotlin入門:拡張関数

##拡張関数

継承を使わずに既存のクラスにメソッドを追加するための仕組みです。
本来のクラスに元からあったかのように追加できます。

構文:

```Kotlin
fun clazz.name(param:type):rtype{}
```

`clazz`:拡張対象のクラス
`name`:メソッド名
`param`:引数名
`type`:引数の型
`rtype`:戻り値の型


入力例:

```Kotlin
fun String.repeat(number:Int):String{
    var builder = StringBuilder()
    //指定された回数だけ文字列を連結
    for(i in 1..number){
        //ここでのthisはclazzのこと
        builder.append(this)
    }
    return builder.toString()
}
fun main() {
    val name = "山田"
    println(name.repeat(4))
}
```

実行結果は以下の通りです。

```Kotlin
山田山田山田山田
```
他のメンバーがデプロイしたアプリのサーバーを本番環境で立ち上げようとすると、エラーが起こる時の解決方法。

###結論としては、本番環境の設定ファイルに直接、「master.key」を書き込んだら解決できました！

具体的には、configディレクトリ直下にmaster.keyファイルを作り、その中に、デプロイした人からマスターキーの暗号を教えてもらい、コピペする。これでデプロイした以外の人でも本番環境でサーバーを立ち上げられるようになります！
Windows10でWSLにRubyOnRailsの環境構築

#WSLでRubyOnRailsを構築する

##WSL有効化
Windowsの機能の有効化または無効化を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598261/a0ed0dc9-b46e-9b2b-915c-68e1629b39e0.png)

Windows Subsystem for Linuxにチェックを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598261/0ad7a32f-56e6-9512-c40f-2afecd52035c.png)

##Ubuntuのインストール
Microsoft Storeを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598261/fe854604-dc48-3741-2f02-310b984ac4f1.png)

ubuntuを検索する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598261/a23baacc-af46-e735-8db2-7df9c1e25c2e.png)

入手してインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598261/348b239e-7aab-702f-aa44-cff1bc51f4c3.png)

起動してユーザー名とパスワードを設定する

##Ubuntuの設定
```
$ sudo apt update
$ sudo apt upgrade -y
$ sudo vim /etc/locale.gen (ja_JP.UTF-8に変更)
$ sudo locale-gen
$ sudo apt-get install language-pack-ja
$ sudo update-locale LANG=ja_JP.UTF-8
$ ln -s /mnt/c/src ~/src
```
##rbenvインストール
```
$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
$ echo 'eval "$(rbenv init -)"' >> ~/.bashrc
$ rbenv -v
$ git clone https://github.com/rbenv/ruby-build.git "$(rbenv root)"/plugins/ruby-build
```

##RubyとRailsのインストール
```
$ sudo apt-get install autoconf bison build-essential libssl-dev libyaml-dev libreadline6-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm-dev
$ rbenv install 2.6.5
$ rbenv global 2.6.5
$ ruby -v
$ gem update --system
$ gem -v
$ gem install bundler
$ gem install rails
$ rails -v
```

##nodeインストール
```
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt install nodejs
```

##postgresqlのインストール
```
$ sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt/ $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
$ wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
$ sudo apt update
$ sudo apt install postgresql
$ psql -V
$ sudo service postgresql start
$ sudo su postgres -c 'createuser -s login_username'
$ psql postgres (¥qで抜ける)
$ sudo apt install libpq-dev
```
「ドメイン駆動設計 モデリング/実装入門勉強会」オンライン参加レポ

# 概要
- [connpassからの引用です](https://ddd-community-jp.connpass.com/event/168674/?utm_campaign=event_message_to_selected_participant&utm_source=notifications&utm_medium=email&utm_content=title_link)
    - ハッシュタグ #ddd_guide
    - [松岡さん](https://twitter.com/little_hand_s)
    - [Loglassさん](https://loglass.jp)
        - [DDD紹介記事](https://note.com/loglass_sakamoto/n/n7472f7df0892)
    - [当日のスライド](https://www.slideshare.net/koichiromatsuoka/202038)

## DDDとは
- 抽象的に言うと、「ソフトウェア開発手法の一つ」である
- そもそも、ソフトウェアはなんのためにつくるのか
    - ソフトウェアを適用する対象の何らかの問題を解決するため
        - この「ソフトウェアで問題解決しようとする対象」を「ドメイン」と呼ぶ。
        - Domain-driven design
        - [DDD Reference](https://domainlanguage.com/ddd/reference/)
        - 「ドメインモデリングによってソフトウェアの価値を高める」ことを目指す
        - DDDの目的は、コード品質の更に先にある
        
## モデルとは
- 問題解決のために、物事の特定の側面を抽象化したもの
    - ドメインモデル：ドメインの問題を解決するためのモデル
    - データモデル：データベースに何かを永続化するためのモデル
    - ↑これらは別物であり、明確に区別する必要がある。
- 抽象化とは？
    - 現実世界の全ての要素をソフトウェアに落とし込むのは不可能
        - 必要なモデルは取り込みたい、不要なモデルは取り込みたくない
        - これの取捨選択が「抽象化」

## 良いモデル、悪いモデル
- 良いモデル：問題解決ができるモデル
- 良くないモデル：問題解決ができないモデル
    - 現実に即していない
    - やりたいことができない
- モデルがイケてないと、その後の実装がどんなに素晴らしくても良いソフトウェアにはならない
- 良いモデルを作るためには
    - ドメインに詳しい人から知識を得る
    - 運用した知見をモデルにフィードバックして改善する
    - モデルは最初から完成しない、改善していくもの
- コードとモデルが乖離すると
    - モデルの更新をコードに正しく反映できているかわからなくなる
        - 意図していない実装を生みやすくなる
    - モデルからコードを理解しにくくなる
        - ドメインに対する理解もできない
        - モデルは改善されない
        - ソフトウェアの価値を高めにくくなる
- モデルそのまま表現したコードとなるのが望ましい
    - オブジェクトでモデルを表現する
- モデルは継続的に改善したい
    - コードにも継続的に反映しないといけない
    - 頻繁な変更に耐えうるには、拡張性の高い設計が必要
    - そこで生まれたのが、EntityやRepositoryなどのデザインパターン
- 軽量DDD：DDDの実装パターンだけ取り入れること
    - 拡張性の高いベストプラクティスだけを取り入れる
        - それだけでも十分価値ある
    - コード品質を上げると、ようやくモデリングする余地が生まれると考えることもできる

## モデリングから実装まで
- DDDのアプローチ
    - ①ドメインについての理解を深め、モデルを継続的に改善する
    - ②モデルを継続的にソフトウェアに反映する
- どうやってモデリングするのか
    - 決まった方法はない
    - 今回はユースケース図、ドメインモデル図によるモデリングを紹介
- ユースケース図
    - ユーザーとアプリケーションの相互作用を定義する
    - ドメイン図作成の範囲も決める
    - 意義
        - 具体化、言語化
        - ドメイン図作成の範囲を限定する
- ドメインモデル図
    - クラス図の簡易版
    - ふるまいは不要
    - 属性も代表的なものだけでOK
    - 業務の「ルール・制約」(＝ドメイン知識)を吹き出しで記述する
    - 集約の範囲を明記する
        - 集約：必ず守りたい強い整合性を持ったオブジェクトの集まり
- 実際のモデリング
    - 最初はホワイトボードに殴り書きでOK
    - レイヤーを定義し、「このレイヤーにはこういうクラスをつくる」というのを決める
    - 改善余地のあるコードから入り、リファクタリングしていく(p116〜135あたり)

## プロジェクトへの導入方法のススメ
- DDD導入の進め方
    - お手本コードを作る
    - お手本に倣ってコードを書くようにチーム展開する
        - この段階では軽量DDDでも全然OK
    - あれ、ドメイン層には何書くべきだったっけとなったらドメインモデリングしてみる
    - ドメインモデル図を元にリファクタリングしていく
    - お手本コード展開から入る理由
        - 原理を理解して展開よりハードルが低いため
        - ドメイン層には何書くべきだったっけとなった方がモデリングの必要性を感じやすいため
        - どういうコードに落としこまれるのかがイメージできてからの方が、ドメインモデリングしやすいため
- 上達のイメージ
    - DDDのコーディング、モデリング共に一発では上手くできない
    - コーディングだけ、モデリングだけ上手くなるということもない
    - 両方相互に経験値をためながら上達していくしかない
    - 結局、このサイクルのどちらから入るか、という違いだけ
    - コーディングとモデリングを意識的に両方少しずつやってみるのが良い
- まとめ
    - DDDでは、「モデルを継続的に改善」「モデルの更新をソフトウェアに反映」のアプローチでソフトウェアの価値を高める
    - モデルの更新を反映しやすいように、モデルをそのまま表現する
    - その際にオブジェクト指向の手法を利用する
    - DDD戦術設計パターンは、保守性の高い設計のベストプラクティス
    - 設計パターンの適用とモデリングを両方使うと、ソフトウェアの価値を高められる
    - 実装と、モデリングを少しずつ着手してみよう

# 感想
- まずはモデリングから取り入れてみようと思ったが、モデリングだけではなくて、コーディングにも少しずつ取り組んでみようと思った。
【Kotlin】ネストしたforEachで、外側のループに対してcontinueする

通常の`forEach`では以下のようにすることで`continue`できます。

```kotlin
(1..10).forEach {
    /* 略 */
    return@forEach
    /* 略 */
}
```

一方、ネストした`forEach`では、内側で`return@forEach`しても、内側で`continue`する挙動になります。

```kotlin
(1..10).forEach {
    /* 略 */
    (1..10).forEach {
        /* 略 */
        // このコンテキストでの@forEachは内側のループを指す
        return@forEach
        /* 略 */
    }
    /* 略 */
}
```

# 対処
外側の`forEach`のラムダに名前を付けることで解決できます。

```kotlin
(1..10).forEach outer@{
    /* 略 */
    (1..10).forEach {
        /* 略 */
        return@outer
        /* 略 */
    }
    /* 略 */
}
```

# 参考にさせて頂いた記事
- [Returns and Jumps \- Kotlin Programming Language](https://dogwood008.github.io/kotlin-web-site-ja/docs/reference/returns.html)
- [KotlinでforEachから抜け出す \- Qiita](https://qiita.com/sudachi808/items/9146c4263d3a5a47b4dd)
JavaFx 備忘録

JavaFxでアプリケーションを作成する場合によく使う記述を備忘録として書きます。
JavaFXは100％趣味です。CSS全然知らないので間違いあったらごめんなさい。
よく調べることを書いていきます。

# 画面描写時の初期化
コントローラクラスにInitializableをimplementsしてinitializeメソッドをオーバーライド。
以下、コンボボックスの初期値の例

```Java:
public class SampleController implements Initializable{

	@FXML private ComboBox<String> combo_Box;
	
	@Override
	public void initialize(URL location, ResourceBundle resources) {
		// コンボボックスに項目を追加
		combo_Box.getItems().add("指定なし");
		combo_Box.getItems().add("A");
		combo_Box.getItems().add("B"); 
		combo_Box.getItems().add("C");
		// 初期選択状態を設定
		combo_Box.getSelectionModel().select(0);
	}
}
```
 
# CSS指定範囲

 
```CSS:
/*全体に設定*/
.root {
    -fx-base: rgb(255, 255, 255);
}
/*classを指定*/
.border_pane {
    -fx-background-color:rgb(255, 255, 255);
}
/*idを指定*/
#v_box{
    -fx-background-color:rgb(255, 255, 255);
}
```

# よく使うやつ

```CSS:
#v_box {
    -fx-border-color: #2e8b57; /*枠線の色*/
    -fx-border-width: 2px; /*線の太さ*/
}

#label {
    -fx-border-style:dotted; /*点線*/
}
```


# その他
- SceneBuilder上でプレビューの表示<br>SceneBuilder上で CTRL + P を押すとプレビュー表示する。
Catalinaでシェルをbashからzshへ変更




今更ながら、Catalinaでシェルをbashからzshに変えました。
すでにいろいろな方が変更手順を残していますが、私の場合、ちょっとだけ事例としては出てこなかったことがあったので、記録として残しておきます。

Catalinaにアップグレードしてから、ターミナルを開くと「デフォルトシェルはzshになったからね。`chsh -s /bin/zsh`で変えといてよ。詳しくは`chsh -s /bin/zsh`見てね」と言われます。

~~~~
The default interactive shell is now zsh.
To update your account to use zsh, please run `chsh -s /bin/zsh`.
For more details, please visit https://support.apple.com/kb/HT208050.
~~~~

変更してから分かったのですが「[https://support.apple.com/kb/HT208050](https://support.apple.com/kb/HT208050)」に移行方法とか書いてありましたね。
注意書きはしっかり読めってことでした。
以下、私がbashからzshに変更した手順です

zshの確認をしてみます。

~~~~
Air00:~$ which zsh
/bin/zsh
Air00:~$ zsh --version
zsh 5.7.1 (x86_64-apple-darwin19.0)
~~~~

/binの中にアップルさんが用意してくれているので、HomeBrewとかでわざわざ入れる必要はありません。
brewで入れてもいいのですが、自分で管理するのが面倒なので、OSに入っているものを使います。

bashの設定ファイル「.bashrc」と「.bash_profile」はそのままzshに持っていけるというので、zshように書き出します。
cpで別名コピーでもかまいません。

~~~~
Air00:~$ cat ~/.bash_profile >> ~/.zprofile
Air00:~$ cat ~/.bashrc >> ~/.zshrc
~~~~

ほいでもって、ターミナルを立ち上げた時のメッセージに従って、シェルを変えます。

~~~~
Air00:~$ chsh -s /bin/zsh
Changing shell for hogehoge.
Password for hogehoge: 
~~~~

これでログインし直します。

ログインし直してターミナルを立ち上げると、こんなエラーが

~~~~
/etc/bashrc:8: command not found: shopt
/etc/bashrc_Apple_Terminal:172: parse error near `;'
/etc/bashrc:8: command not found: shopt
/etc/bashrc_Apple_Terminal:172: parse error near `;'
update_terminal_cwd:11: unrecognized modifier `i'  
\h:\W$
~~~~

bashrcが変だ、と。
いやいやzshなんだからbashrcが変だって、変でしょ？
それにプロンプト表示も変です。

「.zprofile」の中に「bashrc」というこんな記載が残っているので、

~~~~
if [ -f /etc/bashhrc ]; then
        . /etc/bashrc
fi
~~~~

vimで開いて「:s/bashrc/zshrc/g」とかで書き換えます。
同じように「.zshrc」の中にもbashrcという記載があるので書き換えます。

これでターミナルを立ち上げるたびに怒られなくなりましたが、プロンプトの表示がまだこれです。

~~~~
 \h:\W$ 
~~~~


これは元々.bashrcの中でプロンプトの記載を

~~~~
PS1='\h:\W$ '
~~~~

「コンピュータ名:デフォルトディレクトリ」のように変更していたのですが、これがzshと違うとのことなので、このように変更します。

~~~~
PS1='%m:%~$
~~~~

これでプロンプトが

~~~~
Air00:~$ echo $SHELL
/bin/zsh
~~~~

と、以前と同じように表示されました。

.bashrcとかをいろいろカスタマイズしているので、まだまだ微調整が必要だと思いますが、ひとまず移行は完了。
MDBT42Q (nRF52832) で I2C を使用する方法

## BLE モジュール MDBT42Q
台湾 Raytac 社の BLE モジュール MDBT42Q は nRF52832 を搭載しており、<a href="https://norahack.booth.pm/items/1565529">野良バッジ初号機</a>で採用しています。
<a href="https://norahack.booth.pm/items/1875609">野良バッジ弐号機</a>の開発にあたり I2C 接続対応が必要になりました。

## I2C 対応
8x8 LED Matrix の小型化(ピッチ幅:3mm→1.9mm、サイズ:32mm→20mm)に合わせて制御ドライバICをMAX7219からHT16K33に変更します。
MAX7219は8x8 LED Matrix 1個を5線(VCC、GND、CLK、DIN、CS)で制御しますが、HT16K33は8x8 LED Matrix 2個を4線(VCC、GND、SDA、SCL)で制御できます。

## 開発環境
開発環境の構築は以下のページを参考にし、普段慣れている Arduino 開発環境を選択しました。
https://qiita.com/nanbuwks/items/d26447c0bfa28b1d05df

私の開発環境の変更箇所は以下でした。
### 書き込み装置
J-Link を使用しました。
(J-Linkと野良バッジ初号機との接続)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d8b6e164-c5c5-7e6a-2d0d-2b9aaa1a2d9f.jpeg" width=50%">

### Arduino IDE の設定
「ツール」-「ボード:」→「Generic nRF52」
「ツール」-「Softdevice:」→「S132」
「ツール」-「Low Frequency Clock:」→「RC Oscillator」
「ツール」-「書込装置:」→「J-Link」

## I2Cピン番号の指定ができない
Arduino や ESP8266、ESP32 と同じように Wire.begin() 関数でピン番号を指定することができませんでした。
(ピン番号を指定しない場合は問題ありません。)

```c:MDBT42Q_I2C_00.ino
#include <Wire.h>

void setup() {
  Wire.begin(4, 5);  // 4:SDA 5:SCL
}

void loop() {
}
```

### エラーの内容

```text
Arduino：1.8.9 (Mac OS X), ボード："Generic nRF52, S132, RC Oscillator"

/Users/kitazaki/Documents/Arduino/MDBT42Q_I2C_00/MDBT42Q_I2C_00.ino: In function 'void setup()':
MDBT42Q_I2C_00:4:17: error: no matching function for call to 'TwoWire::begin(int, int)'
   Wire.begin(4,5);
                 ^
In file included from /Users/kitazaki/Documents/Arduino/MDBT42Q_I2C_00/MDBT42Q_I2C_00.ino:1:0:
/Users/kitazaki/Documents/Arduino/hardware/sandeepmistry/nRF5/libraries/Wire/Wire.h:45:10: note: candidate: void TwoWire::begin()
     void begin();
          ^
/Users/kitazaki/Documents/Arduino/hardware/sandeepmistry/nRF5/libraries/Wire/Wire.h:45:10: note:   candidate expects 0 arguments, 2 provided
/Users/kitazaki/Documents/Arduino/hardware/sandeepmistry/nRF5/libraries/Wire/Wire.h:47:10: note: candidate: void TwoWire::begin(uint8_t)
     void begin(uint8_t);
          ^
/Users/kitazaki/Documents/Arduino/hardware/sandeepmistry/nRF5/libraries/Wire/Wire.h:47:10: note:   candidate expects 1 argument, 2 provided
exit status 1
no matching function for call to 'TwoWire::begin(int, int)'
```

## 解決方法
ソースコードを読んで Wire.setPins() 関数でピン番号を指定できることが分かりました。
(リポジトリ)
https://github.com/sandeepmistry/arduino-nRF5/libraries/Wire/
(ローカル環境の場合)
/Users/[ユーザー名]/Arduino/hardware/sandeepmistry/nRF5/libraries/Wire/
(ソースコード)
Wire.h
Wire_nRF52.cpp

```c:MDBT42Q_I2C_01.ino
#include <Wire.h>

void setup() {
  Wire.setPins(4, 5);  // 4:SDA 5:SCL
  Wire.begin();
}
```

これで開発が一歩前進できて良かったです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/648c381f-d9cf-297d-b348-c87efae3b3cb.png" width="50%">
ヘルパーメソッドの利用

## railsのヘルパーメソッド
railsにはview内でちょっとした処理などを行う際に呼び出したいメソッドをviewとは別の場所に定義しておき、view内で呼び出すことができる。
記載場所はapp/helper/コントローラ名_helper.rb
rails g controllerで作成した際にこのhelperファイルは自動生成される。
これはmoduleとして作られており、読み込みはrails5であれば自動で読み込んでくれる。

## 問題
ヘルパーメソッドを定義して入力された価格を3桁ごとに区切り円を付けて出力するコードを実装する問題があったとする。

```ruby:app/helper/production.rb
module ProductsHelper
  def converting_to_jpy(price)
    "#{price.to_s(:delimited, delimiter: ',')}円"
  end
end
```
このようにヘルパーメソッドとして定義する。
viewでの呼び出しは

```ruby:index
前後省略
<td><%= converting_to_jpy(product.price) %></td>
```
このようにメソッドを呼び出すだけである。
テレビノイズImageEffectのシェーダコード

Twitterで書いたテレビノイズImageEffectのシェーダコードを置いておきます
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">気分転換。5年前くらいに、とある街作りゲームで作ったTVノイズImageEffectを修正しつつ実装してみた。<br><br>ズレ幅やら速度などはマテリアルから調整可能。 <a href="https://t.co/bLTZeghgFJ">pic.twitter.com/bLTZeghgFJ</a></p>&mdash; MIYAKE (@ScreenPocket) <a href="https://twitter.com/ScreenPocket/status/1236556426543157248?ref_src=twsrc%5Etfw">March 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

```TvNoise.shader
Shader "ScreenPocket/ImageEffect/TvNoise"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        noiseSpeed ("Noise Speed", Float) = 30
        noiseClampNum ("Noise Clamp", Float) = 1.0
        noiseWaveNum ("Noise Wave", Float) = 32.0
        noisePower ("Noise Power", Float) = 0.05
    }
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float4 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };
            
            float noiseSpeed;
            float noiseClampNum;
            float noiseWaveNum;
            float noisePower;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv.xy = v.uv;
                
                //はみ出し部分を考慮してループ
                float div = 1.0 / noiseWaveNum;
                o.uv.z = frac(_Time.w * noiseSpeed) * (1.0 + div * 2) - div;
                
                //Clamp値
                o.uv.w = 360.0 * noiseClampNum;
                return o;
            }

            sampler2D _MainTex;

            fixed4 frag (v2f i) : SV_Target
            {
                float noise = i.uv.z - (1 - i.uv.y);
                i.uv.x += sin( radians( clamp( noise * 360.0 * noiseWaveNum, 0, i.uv.w ) ) ) * noisePower;
                return tex2D(_MainTex, i.uv.xy);
            }
            ENDCG
        }
    }
}
```
MacBook用のキーボードをBAROCCO MD600からMD770に乗り換えた件

Fnキーが追加されたということで、[BAROCCO MD770](https://www.archisite.co.jp/products/mistel/barocco-md770/)を衝動買いしてしまった件。
それまでは、[MD600](http://www.archisite.co.jp/products/mistel/barocco-jp/)使っていたのよ。


## よかったところ
* Fnキーが増えたの嬉しい
* キートップが印字じゃなくなって色形成になって雰囲気いいよ
* BAROCCO独自のLayerキーとかの説明がキートップに印字されてないので見た目がシンプル  
  ※ MD600でBAROCCO独自操作覚えててOKだけども、そうじゃない場合はカーソルキーってどこだっけとか迷いそう…
* Pnキーが押しづらいイチに移動したのでキートップ引っこ抜かなくて良くなったよ！
* おまけでキートップがいっぱいついている

## わるかったところ
* 背面ディップスイッチでMacモードってあるけど、MacBookだとFn押さないときのキー配列になる。 **罠だ！！**
* FnはMD770としてのFnキーでMacのFnじゃないので注意  
  Fnキー押しながらDelete押してもカーソルの後ろの文字を消さないよ
* Fnと右ctrlはリマップできないよ
* Fn+左ShiftでFnのリマップモードに移行してしまう
＊ Fnと他キーの同時押しに癖があって、先に他キーを押してからFnを押さないとだめだよ…  
範囲選択する場合、右Shiftを押してからFn+JorL という操作になる… 癖があるよー
* 付属されているキートップだけども意外と使いみちがない…  
10キーとか自作する時にでも使うのかな?

## MD600との違いで気になったところ
* 6キーが左側に配置された
* Fnの場所がちょっと内側になった
* 黒軸なかったので、赤軸にした。  
箱のラインナップには黒軸あるので、国内代理店さんが取り扱ってないだけっぽい…

## キー設定のメモ
* PgUpをDelと入れ替え
  1. Fn+rCtrl
  2. PgUp
  3. Del
  4. Pn
  5. Fn+rCtrl
* PgDnをBackspaceと入れ替え
  1. Fn+rCtrl
  2. PgDn
  3. Backspace
  4. Pn
  5. Fn+rCtrl
* EndをEnterと入れ替え
  1. Fn+rCtrl
  2. PgDn
  3. Enter
  4. Pn
  5. Fn+rCtrl
* rCtrlにOptionを割り当てる
  1. Fn+rCtrl
  2. rCtrl
  3. lAlt
  4. Pn 
  5. Fn+rCtrl
* rAltにCommandを割り当てる
  1. Fn+rCtrl
  2. rAlt
  3. lWin
  4. Pn 
  5. Fn+rCtrl
* lWinをlAltと入れ替え
  1. Fn+rCtrl
  2. lWin
  3. lAlt
  4. Pn
  5. lAlt
  6. lWin
  7. Pn
  8. Fn+rCtrl
Django Botstrapからのテンプレート登録

#■環境
　windows10
　Pycharm　Community　2019.3
　Python3.7
　Django3.03

#■前提条件

　Djangoプロジェクト、アプリケーション作成していることを前提。以下参照
　![ターミナルでDjangoアプリケーション作成まで](https://qiita.com/oporimaster/items/4ec4809284cddd8b4ba0)

　アプリケーション作成後、以下で登録
　![アプリケーションの登録]
(https://qiita.com/oporimaster/items/4a8941760dca8765cda3)



#■できること

　Bootstrap　の無料テンプレートをDjangoで利用


#■手順

##①　Bootstrapテンプレートのダウンロード

　https://startbootstrap.com/

　のThemaからテンプレート選択し、ダウンロード。

##②　Djangoプロジェクトにコピーする。

　1)Djangoプロジェクト直下に、staticディレクトリ作成

　2)そこに、「css」「imag」「vender」のみコピーする
　
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547159/b1ccbd28-1dbb-871c-775a-bf581e43bc09.png)

コピー後のディレクトリ構造
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547159/b4e64e89-81c8-4d47-1d51-1b021760ebfa.png)

##③　静的ファイルの配置場所を設定する。

このままでは、Djangoは配下ファイルの場所が把握できないので、
場所を、setting.pyに以下追加する。

```
STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'static'),
)
```
　BASE_DIR　は、Setting.pyの中で以下のように絶対パスで定義されている。

```
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
```


以上
AWS Solution Architect Professional 取得備忘録

## Overview
無事, 本日SA-Pを取得できましたので、やったことを2年後の私のために残します。
(多分そのうち改定されるだろうけど....)

## 要点
- 基本的に問題集とBlackBelt only
- ホワイトペーパーよりもサービスを知るためにBlackBeltを読んでるほうが多い
- 問題集などの解説は大体「よくある質問」に飛ばされるのでそこはちゃんと読むこと。
- サービスを調べるときは「サービス名 faq」で検索すると良い
- DB/サーバのマイグレーションパターンを覚えること
- DVAでもやったけどDeploy/DRパターンを覚えること

## こうした方が良かったリスト
以下の順番で学習すれば2か月半で済んだかもしれない。。
順番若干違うため、モチベーション問題も合って3か月掛かった。
**取得するためにやったアイテムを組み替えた感じです**

**試験要綱は読むの当たり前。**

1. 模擬試験(この段階では60点) : やはり、まずは現在地を知る必要があるため。
2. AWSの無料のやつ(あとでURL貼る)：動画＆問題で解説付き。雰囲気が判るので初めにお勧め
3. [Udemy tutorial Dojoの教材](https://www.udemy.com/course/aws-solutions-architect-professional-practice-exams-amazon/) : 買った教材で一番クセが無いためこれを初めにやる。
4. [Whiz Labs SA-P教材](https://www.whizlabs.com/) : ここでさらにあっちに寄った問題をやる
5. 小岩の問題集をやる : これは日本語だけど最後にやった方が良い。(いくつか回答がおかしい)
6. 模擬試験(この段階では75点) : 成長段階を確認する(問題が大体似ているので3回目は要らない)
7. 以降、満足行くまで3～5を繰り返す : 繰り返し優先度はwhizlabs > 小岩 > tutorial dojo

### 試験を受ける見定めポイント
大体「何周したら受ける」の方が良いと考える。
各々の演習の点数も大事だが、覚えてしまうのであまり点も意味が無い
答えを覚えすぎると怖いのが問題文を大して読まないクセが付くこと。

## BlackBeltのおすすめ
やっぱりyoutubeで倍速で見るのがおすすめ。
私が見て覚えているのは以下のBlackBeltはおすすめです。
特にSSMはpatch/session/state等の種類があるので「役割」は知っておかないと話にならない。

- [AWS Direct Connect](https://www.youtube.com/watch?v=few0XD7gPgQ)
- [AWS Batch](https://www.youtube.com/watch?v=-2Kz3d7hPBk&t=287s)
- [AWS Systems Manager](https://www.youtube.com/watch?v=ULQBR-fSsGY)

## 学習する上での意識しておくべきポイント
自分向け。
正直述べた順にやったら普通に問題としてでてくる

本当に各サービスの連携を意識してシチュエーションに則って選択する。
データはどこにあるか？オンプレか？
データはどこに送るか？S3か？オンプレか？
どこがネックなのか？どこを改修すべきか？
期間は？
等、勉強するときはポイントを抑えるクセをつけると本番助かります。

### DRパターンを覚えること
DRはパイロットライトなど、複数のパターンが有る。
パターンに対する内容、発生するコスト(リソース)を覚えておくこと

### オンプレミスとの連携
- DX・VPNの冗長化、単一障害点の理解
- オンプレミスにRDSを作れる
- オンプレミスのDR時の方法(RDSのリードレプリカを作って昇格させるなど)

### AWS Organization
ここは必須。請求統合/SCPなどは覚えること。
クロスアカウントロールの権限設計など。概念は覚えておくこと

### Lambda/API Gateway / DynamoDB
DVAでやったからそこまで苦は無かった。
実際これを使用してのサービス設計(どう連携させるのか？)

### AWS Batch / EMR / RedShift
バッチ処理・分析のデザインについて概念レベルで覚えること
各サービスがどういう機能を提供していてどういう役割で動作するかを知っておくこと

----

## 最後に

以下の3つの項目。これを意識してやっていけば他の2つもついてくる。

- 既存のソリューションの改善
- 新しいソリューションの提案
- 複雑な組織の管理
初めての投稿です

#初投稿
最近になってPythonが必要になり、勉強を始めた生物系の大学院生。
調べても調べても片っ端から忘れていくので、備忘録としてQiitaを使うことにしました。

研究室の後輩が読めるくらいの文章が書ければよいけど。。。
とりあえず始めてみます！いつまでつづくことやら(笑)
シェルスクリプト内のエラーが発生した場所で異常終了したい

# 課題
シェルスクリプトは、途中のコマンドでエラーが発生してもその場では終了せず、なおかつシェルスクリプト自体の終了ステータスも `0 (正常終了)` です。
例えば、次のシェルスクリプトは、途中の `false` コマンドがエラーを返しますが、最後の `echo "[Finish]"` が実行されており、終了ステータスも `0 (正常終了)` となっています。


```bash:test1.sh
#!/bin/bash
false
echo "[Finish]"
```
```
$ ./test1.sh; echo $?
[Finish]
0
```

これは正しい挙動ですが、場合によっては

- どこかでエラーが発生したら、その場で止まってほしい
- 終了ステータスも 0 以外を返してほしい

ということもあります。
<br>
以下で解決策を挙げます。

# 解決策
### 1. shebang に -e オプションをつける
```bash:test2.sh
#!/bin/bash -e
false
echo "[Finish]"
```
```
$ ./test2.sh; echo $?
1
```
:information_source:  途中で異常終了 ( 期待通り )

### 2. set -e コマンド
```bash:test3.sh
#!/bin/bash
set -e
false
echo "[Finish]"
```
```
$ ./test3.sh; echo $?
1
```
:information_source:  途中で異常終了 ( 期待通り )
resoucesとresouceの違い

## ルーティングに関する便利なメソッド

## resoucesメソッド
ルーティングに記載することでコントローラーで定義している基本の7つのアクションに関するルーティングを自動生成してくれるメソッド。

```ruby:routes.rb
resource :post
```
上記のように記載する

## resouceメソッド
上記のresoucesメソッドとは異なる点が2点ある。
・indexアクションのルーティングは生成されない
・idが付くルーティングは生成されない
editやshowアクションにidが必要ない場合に有効なメソッドである。

```ruby:routes.rb
resouce :post
```
上記のように記述する
AWS Lambda × Selenium × Chromeでハマったところ

# 起きたこと
[既存のAWS Lambdaの処理にServerless Frameworkを適用する](https://qiita.com/sshon/items/f00e01c029cde2021fb8)対応で、Lambda関数実行の際に以下エラーが発生し、長時間ハマった。

- Seleniumのインスタンス作成時に「error while loading shared libraries: libglib-2.0.so.0: cannot open shared object file: No such file or directory」というエラー
- 上記解消後、また、Seleniumのインスタンス作成時に「Message: chrome not reachable」というエラー

# 環境
- AWS Lambda
- python 3.8
- serverless-chrome 1.0.0-55 (chromium 69.0.3497.81)
- ChromeDriver 2.44
- Selenium


# 対応
### error while loading shared libraries
###### エラー詳細
```
error while loading shared libraries: libglib-2.0.so.0: cannot open shared object file: No such file or directory
```

###### 対応
公式によると、python3.8をランタイムとして選ぶと、OSがAmazon Linux2になる。
Amazon Linux2はAmazon Linuxとはデフォルトのshared librariesが異なることが原因と考え、実際にOSをAmazon Linuxになるように修正したところエラーが解消した。

shared librariesを追加するよう頑張ったり、もしかしたら最新のChromeを使うようにすればこのエラー起きないのではと思いつつも、serverless-chrome(最新バージョンでも、chromium 69.0.3497.81まで)を使いたかったので、OSがAmazon Linuxになるpython3.7をランタイムとして選択することにした。

### chrome not reachable
###### エラー詳細
```
[ERROR] WebDriverException: Message: chrome not reachable
(Driver info: chromedriver=2.44.609551 (5d576e9a44fe4c5b6a07e568f1ebc753f1214634),platform=Linux 4.14.138-99.102.amzn2.x86_64 x86_64)
Traceback (most recent call last):
  File "/var/task/test.py", line 33, in lambda_function
    driver = webdriver.Chrome('/opt/chromedriver', chrome_options=options)
  File "/opt/python/lib/python3.7/site-packages/selenium/webdriver/chrome/webdriver.py", line 81, in __init__
    desired_capabilities=desired_capabilities)
  File "/opt/python/lib/python3.7/site-packages/selenium/webdriver/remote/webdriver.py", line 157, in __init__
    self.start_session(capabilities, browser_profile)
  File "/opt/python/lib/python3.7/site-packages/selenium/webdriver/remote/webdriver.py", line 252, in start_session
    response = self.execute(Command.NEW_SESSION, parameters)
  File "/opt/python/lib/python3.7/site-packages/selenium/webdriver/remote/webdriver.py", line 321, in execute
    self.error_handler.check_response(response)
  File "/opt/python/lib/python3.7/site-packages/selenium/webdriver/remote/errorhandler.py", line 242, in check_response
    raise exception_class(message, screen, stacktrace)
```

###### 対応
ChromeDriver2.44はChromeのバージョン69〜71まで対応と記載があったが、念の為、同じChromeのバージョンに対応していると記載があるChromeDriver2.43に変更してみたらエラーが解消した。
ChromeDriver 2.44のリリースノートを確認し、特段問題を感じなかったため、ChromeDriver2.43を利用することで対応した。

# まとめ
今回の処理のセキュリティの重要性さと対応の急務さを天秤にかけて、バージョンを下げるという手段をとりました。
最新のChromeを使えば上記も起きないのではないかと思っています。
素人によるblock, inline-block, inline

## はじめに
　HTML・CSSを書いていて、うまくCSSのプロパティがあたらないことがよくありました。そんなときの主な原因はプロパティをあてたいタグの`dispaly`プロパティの初期値を把握していなかったことでした。今回は主なHTMLタグの`dispaly`プロパティの初期値とそれらの特徴ゆえに自分がよくひっかかっていたところをまとめてみようと思います。

## デフォルト値
　以下が主なHTMLタグの`display`初期値となります。

| block            | inline block      | inline             |
|:-----------------|:------------------|:-------------------|
| div              | input             | span               |
| h1 ~ h6          | textarea          | img                |
| p                | button            | a                  |
| form             | select            |                    |
| header           |                   |                    |
| footer           |                   |                    |
| section          |                   |                    |

## よくひっかかっていた特徴
　僕がよくひっかかっていたそれぞれの特徴です。

|                    | block            | inline block      | inline             |
|:-------------------|:-----------------|:------------------|:-------------------|
| heightやwidthの指定  | できる            | できる              | できない             |
| vertical-alignの指定 | できない          | できる              | できる              |
| text-alignの指定     | できない          | できる              | できる              |

## おわり
　画像の高さが指定できなくてよくひっかかっていました。`img`タグの初期値は`display: inline`なので当然ですね。書いてて思いましたが、僕がよく使うHTMLタグって結構少ないんだなと。もっとセマンティックに書けるようになりたいものです。

　記事を書くにあたっては過去の経験を元にしており、一部のみ手元で確認した程度ですので誤りなどございましたらお気軽にご指摘ください。
Automated deployment for GKEを試してみた

お手軽にCI/CDを作成できるらしいAutomated deployment for GKEを試してみました。
https://cloud.google.com/blog/products/application-development/automated-deployment-pipelines-come-to-gke


## 手順

1. Kubernetesクラスタを作成する
2. Kubernetesクラスタにデプロイする
3. Automated deploymentを作成する
4. テストする


## 1. Kubernetesクラスタを作成する

Automated deploymentの手順の中で作成できる新規クラスタは、なぜかContainer Registry(=Cloud Storage)へのリード権限がないので、docker pullでこけてデプロイに失敗します。

上記を回避するために
　NODE POOLS - default-pool - Security - StorateがRead Only
になっていることを確認して、Cloud Storageのリード権限を持ったクラスタをあらかじめ作成しておきます。

<img width="763" alt="1_1_create_cluster.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/9e856fc5-b536-071c-5bb9-7b57791d9637.png">

## 2. Kubernetesクラスタにデプロイする

### 2-1. nginxのサンプルのDockerfileをgithubのリポジトリにpushする

```Dockerfile
FROM nginx:latest

COPY index.html /usr/share/nginx/html
```

```index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
</head>
<body>
<h1>Welcome to nginx!</h1>
・・・
</body>
</html>
```

### 2-2. githugのリポジトリをソースに指定してデプロイする

<img width="437" alt="2_1_create_deployment.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/11a9da98-f22e-3421-e2c5-bab012d0b894.png">

VIEW YAMLのコピペからkubernetes/nginx.ymlファイルを作成後pushしてから次へ進みます。

<img width="437" alt="2_2_create_deployment.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/0ff54cdc-049a-86fa-117f-923fa08d8619.png">

### 2-3. デプロイ後の画面

<img width="511" alt="2_3_create_deployment.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/878555b4-081e-65d5-f5ac-3635f71baa55.png">


### 3. Automated deploymentを作成する

### 3-1. Automated deploymentの作成を開始する

<img width="666" alt="3_1_autometed_deployment.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/c9d0749e-b937-dc90-4c21-e729d03a8448.png">

### 3-2. Automated deploymentを設定する

<img width="443" alt="3_2_automated_deployment.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/44451f7e-ecb9-b4a3-c630-aebc013b0a92.png">


<img width="422" alt="3_3_automated_deployment.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/e2a1f884-eafb-2211-ad9f-d00b18b572bd.png">

GOOGLE-RECOMMENDED YAMLをkubernetes/nginx.ymlにコピペ後pushしてから次へ進みます。

<img width="429" alt="3_4_automated_deployment.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/647277cc-754a-55f5-ce98-e5197fad3e81.png">

設定が完了するとデプロイが開始されます。

<img width="411" alt="3_5_automated_deployment.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/5c500bc1-c3e6-c006-ecf9-b57fd563af12.png">

## 4. テストする

index.htmlを更新してpushすると自動デプロイされます。

<img width="508" alt="3_6_automated_deployment.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192584/77be95ab-342f-0478-0fb9-45c6288cf2d0.png">


### 感想

- Automated deployment作成中に新規に作成するクラスタがCloud Storagのリード権限がなくimageのpullが出来ずにデプロイが失敗するところでかなりハマりました。
- まだ細かな設定ができない感じ。また「Multi-container workloads are not supported」だそうで、これからの改善に期待です。
Power Automate 現時点の不具合を回避する方法

今回は、Power Automate（旧 Microsoft Flow）を利用して、Office 365（Exchange Online）の予定表をGoogle カレンダーへ同期する仕組みを紹介した下記の記事に関連する話題です。

[Office 365 予定表を MS Flow でGoogleカレンダーへ同期する（追加・編集・削除 全対応）](https://qiita.com/yamad365/items/830b64954dcdfcb91fe2)

# 事件の始まり
そう、それは当記事投稿時の１か月ほど前にさかのぼります・・・。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">と思ったら、開始時刻と終了時刻にトリガーの開始時刻・終了時刻を指定できない！ <a href="https://t.co/SmryYQ6oUR">pic.twitter.com/SmryYQ6oUR</a></p>&mdash; TAICHI (@artbreak_taichi) <a href="https://twitter.com/artbreak_taichi/status/1224580367589314560?ref_src=twsrc%5Etfw">February 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[@artbreak_taichi](https://twitter.com/artbreak_taichi) さんが、前述の記事を参考に Power Automate を作成しようとしたら「トリガーにしている Outlook の予定から”開始時間”と”終了時間”が指定できない」という現象が！？

# 発生している問題
Office 365 Outlook トリガーの「イベントが追加・更新・削除されたら～」から生成するフローで、アクションで追加したGoogle カレンダーの開始・終了項目にトリガーのアイテムが反映できない、というか選択肢に出てこない、という状況です。（※記事投稿時点
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/9ee91a24-34b1-8c76-56f3-af8a2fd30ee4.png)

# 問題の切り分け
当方は、冒頭で紹介した 365（ExO）予定表 → Google カレンダー同期用のフローを日常的に利用しています。（※記事の内容からカスタマイズはしてますが）
そのフローは問題なく動作しており、問題の箇所も”開始時刻”と”終了時刻”が正しく設定されていました。
上記から『過去に作成したフローには影響がない』と判断できます。

さらに、スマートフォンの Power Automate アプリから同じようなフローを作成してみると、ちゃんと”開始時刻”と”終了時刻”が確認できました。つまり、PCのブラウザーではNG、スマホのアプリはOKなので、機能自体が無くなったワケではない、と判断できます。

おや？これは不具合っぽいぞ・・・。

# サポートに問い合わせてみた
結論「不具合です」とのこと。

機能自体は問題なくて、ある一部の項目が表示されない、とのこと。開発部隊の方も把握されており、現在修正に向けて対応中とのことでした。

対応中なのは、記事投稿時点（2020/03/08）なので、将来的には修正されているでしょう。

# この問題の回避方法
スマホの小さな画面でソコソコ巨大なフローを作成するのはツラいですよね？
はい、そんな貴方に回避方法を伝授します。

## 対策１：検索する
「動的なコンテンツの検索」という入力欄があるので、そこに”開始”や”終了”と入力すると、項目が表示されます。
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/a5705ac7-d3f7-5c21-19f8-82fc56ea1829.png)

## 対策２：ブラウザーの横幅を狭くする
吹き出しのように表示されなくなるまでブラウザーの横幅を狭くすることで、表示されていなかった項目が画面上に現れます。スマホの Power Automate アプリで該当項目が表示されていたのは横幅が狭かったからである、と想定されますね。
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/1fe45730-a723-34e7-c8ce-10a2fbfdb30c.png)

## 対策３：関数を使う
コトの発端になったタイムラインで [@mofumofu_dance](https://twitter.com/mofumofu_dance) さんが間髪入れずに返信していた回避方法です。今回問題になっている対象は日付型なので「formatDateTime」関数を呼び出してやると、なぜか表示されていなかった対象が現れます。
![図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/6d5af09f-6ced-0a39-57a1-8b44387405ed.png)

# まとめ
この状況は不具合らしいので、そのうち改善されるでしょう。

ただ、今回の問題と同様に「あれ？〇〇アクションがあるって公式サイトに書いてあるのに出てこない！表示されない！」みたいなコトが今後もあるのかなぁ？と思いました。そんな時には慌てずに、今回紹介した回避策を試してみると問題が回避できて幸せになれるかもしれないです。

　1. 検索する
　2. 画面の横幅を変更してみる
　3. 関数をかませてみる

こういう情報は、どこかに書いておかないと自分自身が忘れちゃうんですよ。なので、実は完全に自分用の備忘録なんです。もし、これを読んでいる皆さんの一助にもなってると嬉しいです。

それでは、皆さま。素晴らしい Power Platform Life を！