OmniAICreator/Qiita-1.07M huggingface dataset:
[PostgreSQL] column "" does not exist　の解決法

# 概要

postgresqlの操作にはpgadminを使用しているのだが以下のqueryを実行したところErrorが発生した。

```
select * from users
where email like "%@%";
```

```:error
ERROR:  column "%@%" does not exist
LINE 2: where email like "%@%";
                         ^
SQL state: 42703
Character: 38
```

カラムの条件で"%@%"を指定しているのになんでってなった。


# 結論
どうやら `"` は列名を指定するときに使うらしい。
レコードを選択するときは列名と混同しないように `'`　を使わなければいけなかったのだ。
以下のクエリに変更したところ無事に動かすことができた。
めでたしめでたし。

```
select * from users
where email like '%@%';
```

# 参考文献

[PostgreSQL - WHERE clause not working - Column name not found [duplicate]](https://stackoverflow.com/questions/57141087/postgresql-where-clause-not-working-column-name-not-found)
7日目2個目設定した時間を経過したら処理を行わせる

#7日目のアプリ 
ボタンを押すと、半透明になって、0.5秒後に戻る。アプリ。

##画面キャプチャ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/959530/b3d4b16b-5965-e573-9d82-b28f33720da8.gif" width=50%>

##以下の流れで作りました。
1. 7日目１個目のアプリに以下のコードを追記しました。
``` 
 sender.alpha = 0.5
 DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        sender.alpha = 1.0
        }

```
##できたこと
+ 一定時間経ったら処理を行うときのコードがわかった。
##書いたコードを共有します！

```
import UIKit
import AVFoundation

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    var player: AVAudioPlayer!
    
    func playSound(pressedKey: String) {
        
        let url = Bundle.main.url(forResource: pressedKey, withExtension: "wav")
        player = try! AVAudioPlayer(contentsOf: url!)
        player.play()
    }
    
    @IBAction func keyPressed(_ sender: UIButton) {
       
        playSound(pressedKey: sender.currentTitle!)
        
        // ボタンを押した瞬間はちょっと薄くなる。
        sender.alpha = 0.5
        
        //0.5秒後にかっこ内の処理をする
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        sender.alpha = 1.0
        }
        
    }
    
}

```

##感想
こういうのを自分の中でストックしていけば、なんでもできる！よねきっとw
GitHub Profile README作りに対するTips

最近、自分のGitHub Profile READMEを整理した。

- [snamiki1212 (Nash) · GitHub](https://github.com/snamiki1212)

そのときの学びを雑に書く。

## tl;dr

1. Awesome GitHub README で参考例を先に見てみる
2. デザインするときは極力alignは使わないでtableタグを使う
3. 画像に対して必ずaタグで囲う
4. 代替文字でフォントを変更する
5. `<code>` でアイコンにデコレーション

## 1) awesomeを参考にする

タイトル通り。AwesomeシリーズにGitHub Profile READMEもあるのでまずはここを適当に見てみることを勧める。

- [GitHub - abhisheknaiidu/awesome-github-profile-readme: 😎 A curated list of awesome Github Profile READMEs 📝](https://github.com/abhisheknaiidu/awesome-github-profile-readme)

## 2) 全体レイアウトはalign ではなくて tableでする

左右に配置したいときにはalignを使うことで要素のfloatをしてあげることができる。

```html
<img align="right" src="..." alt="..." />
<p align="left">hello</p>
```
 
 - [Guide to aligning images in github readme.md files. https://davidwells.io/snippets/how-to-align-images-in-markdown · GitHub](https://gist.github.com/DavidWells/7d2e0e1bc78f4ac59a123ddf8b74932d)

ただあくまでFloatなので「小さい画像＋長文」をひとまとめにしたい場合に使うほうが無難。

自分は最初、alignを使って全体のレイアウトを整えようとしてたけど思ったとおりの動きをまるでしてくれなくて頭がおかしくなりそうになった。

もちろん、これで全体のレイアウトをデザインしてあげることもできるけど個人的にはおすすめしない。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">READMEをオシャレに書く必要があってデザインするためmarkdownにHTML書いてalign=&quot;left|center|right&quot;プロパティ追加するとfloatされるからこれでいけるかと思ったら、まるで思った通りに動いてくれないんで発狂しかけた。結局、tableタグ系で整理してあげるのが一番良いという学び。</p>&mdash; Nash⚡️北米にいる (@snamiki1212) <a href="https://twitter.com/snamiki1212/status/1365162192618672130?ref_src=twsrc%5Etfw">February 26, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


全体のレイアウトはTableで整えてあげること。


#### `valign` Tableの縦方向の調整

table要素で縦方向の調整をしたいときは、valign要素を入れてあげればよい。

```html
<table>
  <td valign="center">hello</td>
</table>
```


## 3) 画像に対してはaタグで囲ってあげる

GitHub Profile READMEというかMarkdownの仕様なのか、画像・GIFなどのメディアをシンプルに表示してもPureなHTMLなどと違ってデフォルトでオンクリック可能なリンクになっている。リンク先はそのメディアのURL。

Webページという観点におけるUXとしては、リンクをクリックするときのユーザーの期待値は「きちんとしたWebサイトへジャンプする」なので、画像などを貼るときは必ずaタグでリンク先を自分でコントロールしてあげること。

#### リンク先がない場合の回避

そのメディアに対して該当するリンク先がない場合は、最低でも`<a href="#">...</a>`で囲ってあげて、ダミーの内部リンクに差し替えてあげる。

これで少なくとも無駄なジャンプは防げる。


## 4) UTF-8でフォントを変更する

前提として、GitHubのREADMEではフォントを指定できない。styleプロパティを指定しても無視される。

それでも、こんな感じのものを作れる。

![Screen Shot 2021-02-27 at 11.02.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186228/c903b343-be21-e1c5-452e-1ea351b115f7.png)

（UTF-8自体に詳しくないしあんまり調べてないけど、UTF-8周りの機能なのか？とりあえず、仕組みはわかってないけど実現できることがわったので、誰か知ってる人いればマサカリ投げてください。）

下記のサイトとかを使ってテキストを取ってきて自分で文章を作成したものをコピペすれば良い。

- [UTF-8 fonts and font styles - text functions 📃](https://www.topster.net/text/utf-schriften.html)
- [✔️ ❤️ ★ Unicode Character Table](https://unicode-table.com/en/#)

注意点としてメンテナンス性がかなり下がしデザインもうまくやらないとダサい。ワンポイントとして使うところを絞ったほうが良さそう。

## 5) codeでアイコンをデコレート

細かいTipsだけど、イメージに疑似シャドウをつけるHackなTips。

![Screen Shot 2021-02-27 at 11.16.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186228/308e10b3-dc20-c6e2-3cda-3c733d82df87.png)

「⇐左」が`<code>`でアイコンイメージを囲ったケース、「右⇒」は特になし。

### おわりに

完璧ではないがある程度は満足出来る状態のProfile画面になったので良き。

- [snamiki1212 (Nash) · GitHub](https://github.com/snamiki1212)
YouTube は《学びの宝庫》　HTML/CSS and JavaScript編　ロードマップ　2021（更新:2/29）

#１，私が思う一番のプログラミング学習法は...　

###**YouTube**を利用して学習を進めることだと思います！

その理由は、
>まず
１，<font color="red">**無料**</font>であること！
２，<font color="red">**情報が最新**</font>であること！
３，<font color="red">**好きな技術**</font>を学べること！
４，<font color="red">**海外の技術**</font>を習得できること！
５，<font color="red">**いつでもどこでも**</font>そして<font color="red">**実践的**</font>に学習できる！
６，通常の<font color="red">**２倍の学習スピード**</font>で進めることができる！

からです:bangbang:

ところで、プログラミング学習には、様々な方法があると思います！

例えば、
>・プログラミングスクールに通う
・技術書を買って独学
・メンターさんに教えてもらう
・UdemyやSkillShareを利用する

など、たくさんあります:books:

しかし、

YouTubeも同等の情報量、もしかしたらそれ以上の学びに出会えるチャンスがあります！

理由の１～６まで述べた通り、メリットがたくさんあります！

その一つ、６について説明すると、
ご存知の通り、YouTubeには**倍速再生**というものがあり、
**Max２倍**まで設定することができます！
なので、<font color="red">**２倍の学習スピード**</font>で進めることが出来ます！

この記事は、私が学習をする上で特に参考になった動画をロードマップ形式で随時更新していきます！

一つの意見として、ご参考にして頂けたら幸いです:bangbang:

#２，学習ロードマップ（実際に参考にした動画のみ掲載）
###【ステップ１：HTML/CSSの基礎】
<font color="red">（随時掲載）</font>

###【ステップ２：JavaScriptの基礎】
<font color="red">（随時掲載）</font>

###【ステップ３：JavaScriptでToDoListを作ってみよう】
######さっそく、基礎知識を使ってToDoListを作ってみましょう👇👇👇
（動画のアップロード日：2020/04/11）

https://youtu.be/Ttf3CEsEwMQ

######作ってみました➡[こちら](https://qiita.com/iwasaki-hub/items/ccafa245fdee92afa5e5)


###【ステップ４：JavaScriptの基礎が終わったら】
######JavaScriptの基礎が一通り終わって、なにか物足りないと感じなたら、これがオススメです！👇👇👇
（動画のアップロード日：2021/01/28）

https://youtu.be/ABQLwlE8MUA


###【ステップ５：async await】
######Reactに入る前に、大事な前提知識になります！👇👇👇
（動画のアップロード日：2020/04/16）

https://youtu.be/QugDLcOo_EE

###【ステップ６：Reactの技術を深める】
######Reactによく登場するいくつかの、技術を身に着けよう！これを理解すればサーバー接続、ページ遷移などが出来るようになります！それが、Hook,Router,Linkです！👇👇👇

（動画のアップロード日：2020/12/21)

https://youtube.com/playlist?list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d


######作ってみました➡[こちら](https://qiita.com/iwasaki-hub/items/9b22dc58c96a24cbe220)

###【ステップ７：Reactでプロジェクトを作ってみよう！】
######さっそくReactを使ってプロジェクトを作成してみましょう！前提としてasync awaitの知識があったほうがより理解できると思います👇👇👇
（動画のアップロード日：2021/01/19）

https://youtu.be/w7ejDZ8SWv8

######作ってみました➡[こちら](https://qiita.com/iwasaki-hub/items/d2b350183fca9b2dde58)

##【ステップ８：Let's build LinkedIn with REACT.JS! (with Redux & Firebase)】
######Reactを使ってLinkedInを作ります。最後に、firebaseにデプロイします。👇👇👇
（動画のアップロード日：2020/12/17）

https://youtu.be/QaYts9sPmcY

作ってみました👇
![2021-03-17_17h33_01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/756287bc-c751-f745-73cf-ba63bff52f7b.gif)




#３，最後に
プログラミング学習は、短期決戦だと思います！
学ばないといけないことは、**膨大**であり常に**進化**しています！
効率を考えたら、学習した直後からもう作成に取り掛かったほうが、より理解と習得に結びつくのかなと感じています！

また、意見や要望などがあればコメントでいただけたらと思います！
Phoenixのdevのホストを指定する。



```config/dev.exs
config :app, AppWeb.Endpoint,
+ url: [host: "dev.appdomain.com", port: 4000],
```
これでhostを指定することができます。


```elixir

AppWeb.Endpoint.config(:url)[:host]
```

で、`dev.appdomain.com`を返します。
[C++/Windows] 省電力設定のスライダーの現在値を取得

もくじ
https://tera1707.com/entry/2022/02/06/144447

# やりたいこと

ノートPCなど、バッテリーを積んでるWindowsPCで画面の右下に出てる電池マークを押すと出てくるスライダーが今どこにあるのか、現在値を知りたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/f819542a-fbb4-460c-58f9-2b23ad17937e.png)

# やりかた

Win32APIの`PowerRegisterForEffectivePowerModeNotifications()`を使って、値の変化時に指定/登録した関数を呼んでもらうことで実現する。
※プログラム終了時には`PowerUnregisterFromEffectivePowerModeNotifications()`を使って登録解除する必要あり。

# サンプル

```cpp
// PowerRegisterForEffectivePowerModeNotificationsに必要
#pragma comment(lib, "Powrprof.lib")
#include <powersetting.h>

// 要点以外のコードは割愛

void OnEffectivePowerModeChanged(EFFECTIVE_POWER_MODE mode, void* context)
{
    std::wstring buf;
    buf = L"現在のEFFECTIVE_POWER_MODE：" + std::to_wstring(mode) + L"\r\n";
    OutputDebugString(buf.c_str());
}

// EFFECTIVE_POWER_MODE変化のイベント登録ハンドル
void* RegistrationHandle = NULL;

// ダイアログプロシージャ
BOOL CALLBACK MyDlgProc(HWND hDlg, UINT msg, WPARAM wp, LPARAM lp)
{
    std::wstring buf;
    switch (msg) {
        case WM_INITDIALOG:
        {
            HANDLE* Context = NULL;
            // 起動時、スライダの値変化時のハンドラを登録する
            PowerRegisterForEffectivePowerModeNotifications(EFFECTIVE_POWER_MODE_V1, (EFFECTIVE_POWER_MODE_CALLBACK*)OnEffectivePowerModeChanged, Context, &RegistrationHandle);
            break;
        }
        case WM_DESTROY:
        {
            // 終了時、登録したハンドラを破棄する
            if (RegistrationHandle != NULL)
                PowerUnregisterFromEffectivePowerModeNotifications(RegistrationHandle);
            break;
        }
        return FALSE;
    }
}
```

上記のコードを実行している状態でスライダーの値をぐりぐり変えてやると、変えたときの値がデバッグの出力欄に出てくる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/b6cf85d3-fd2c-1c03-b304-bb8ec470217d.png)

# 参考

スライダーの仕様
https://docs.microsoft.com/ja-jp/windows-hardware/customize/desktop/customize-power-slider#set-default-power-slider-mode

スライダの変化をとるイベント
https://docs.microsoft.com/ja-jp/windows/win32/api/powersetting/nf-powersetting-powerregisterforeffectivepowermodenotifications

オーバーレイ(電力スライダ)の設定についての詳しい説明
https://sites.google.com/site/tweakradje/windows/windows-tweaking
＞Windows 10 adds a new scheme, Ultimate Performance:

PowerRegisterForEffectivePowerModeNotifications
https://docs.microsoft.com/ja-jp/windows/win32/api/powersetting/nf-powersetting-powerregisterforeffectivepowermodenotifications

PowerUnregisterFromEffectivePowerModeNotifications
https://docs.microsoft.com/en-us/windows/win32/api/powersetting/nf-powersetting-powerunregisterfromeffectivepowermodenotifications

EFFECTIVE_POWER_MODE_CALLBACK
https://docs.microsoft.com/ja-jp/windows/win32/api/powersetting/nf-powersetting-effective_power_mode_callback

EFFECTIVE_POWER_MODE
https://docs.microsoft.com/ja-jp/windows/win32/api/powersetting/ne-powersetting-effective_power_mode

スライダーの値をpowercfgで変更する
https://www.tenforums.com/tutorials/43655-create-custom-power-plan-windows-10-a-2.html
【Excel】関数

(おそらく)Vbaで扱っていないほうの関数

# 数学
## SumIf
|番号| 商品 | 値段 |
|:--|:--|:--|
|1| カレー  | 100  |
|2| うどん  | 200  |
|3| うどん  | 300  |
|4| カレー  | 400  |

### いくつかの書き方
| メソッド | 結果 |
|:--|:--|
| SumIf(A:A,"うどん", B:B)  | 500 |
| SumIf(A3:A4,"うどん", B3:B4)  | 300  |
| SumIf(B3:B4)  | 700  |

# 文字列
## Find と Searchの違い
　・どちらもVBAのInStrと同じで部分文字列を検索する。
　・Search
　　　ワイルドカード(*, ?)が使用できる。
　　　大文字小文字区別なし
　・Find
　　　ワイルドカード使用不可
　　　大文字小文字の区別がある。
### 〇〇Ifに通ずる条件の書き方
#### ワイルドカード
　VBAと違い、使用できる記号は以下の2つのみ
　　? : 任意の1文字
　　* : 任意の文字列

```vb
   SUMIF(A2:A5,"?どん",B2:B5)
```

#### 不等号
```vb
   ' A5セルには整数が入っている
   SUMIF(B2:B5,">=" &A5)
```

# 検索
## VlookUp, HlookUp
　VlookUpとHlookUpの違いは、縦方向か横方向化の違い。
　件数が縦方向に伸びる場合,Vlookup(Vertical)。
　件数が横方向に伸びる場合,HLookup(Horizontal?)

# 参照
## INDIRECT
　指定したセルの示す座標の値を参照する。

| 座標 | 値 |
|:--|:--|
| Sheet1  | A1 : "Sheet2"  <br> A2 : "C100" |
| Sheet2  | C100 : "AAA"  |

```vb
　INDIRECT(A1 & "!" & A2) ⇒ AAA
```

# Is〇〇〇とエラーの種類

| 関数 | 判定できるエラー |
|:--|:--|
| ISERR  | #N/A  |
| ISERROR  | #N/A <br> #VALUE! <br> #REF! <br> #DIV/0!<br>#NUM!<br>#NAME<br> #NULL |
| ISNA  | #N/A |

| エラーの種類 | 意味 | 例 |
|:--|:--|:--|
| #N/A  | 参照先がない  |  VlookupはMatchの検索に一致しない |
| #REF  | セルを参照できない  | VLookupで範囲外の列数を指定する  |
| #NAME | 関数の引数誤り  | 数値型の引数に文字列を渡す  |
| #DIV/0| 除算の分母が0または空白  | =1 / 0  |
| #Value| 引数の型誤り  | 数式に文字列を含んでいる  |
| #Num  | エクセルで扱えない値  | 計算結果がオーバーフロー  |

# 参考サイト
エラーの種類 : [リンク](https://mainichi.doda.jp/article/2019/09/17/1701.html)
アセットパイプラインに関わる画像が表示されないエラー

# 今回のエラー
制作環境は

   - Ruby on Rails
   - unicorn
   - AWS EC2
  - Nginx

Nginxを導入して設定をした後から、本番環境でトップページに表示される予定の画像が表示されない状態になっていた。
ログイン画面のアニメーションとして用意してあった音声ファイルが読みこまれていない。
一部では表示されている画像もあった。

# 原因
アセットパイプラインの参照先の記述に問題があった。
### 問題箇所
今回の不具合箇所は２点

   - トップページの画像の記述
   - 
```
<%= image_tag("/assets/title_logo.png", class: "header-logo" ) %>
```

   - ログイン画面の音声ファイル
   - 
```
<%= audio_tag("/assets/submit", autoplay: false, controls: true, id:"audio_sub") %>
```

#対処
行ったことは
1. 参照先URLを修正
2. git hubに修正をpush
3. 本番環境でプリコンパイル、プロセス再起動

### 1. コードを以下のように変更
  - トップページの画像の記述
  
```
<%= image_tag "title_logo.png", class: "header-logo" %>
```

  - ログイン画面の音声ファイル
  
```
<%= audio_tag "submit", autoplay: false, controls: true, id:"audio_sub" %>
```

###　変更箇所
変更したのは参照先のURL部分
```/assets/```部分を削除した

### 2. git hubに変更をpush
git hubデスクトップ上でpush
ブランチを切っているなら、masterにmarge
※GUI、ブラウザでの操作だったので詳細割愛

### 3. 本番環境でプリコンパイル、プロセス再起動
以下ターミナルで操作

  - 今回はAWSのEC2でデプロイしているので、EC2のデプロイ済みのインスタンスにログイン
  - git masterをpull 
    - ```git pull origin master```
  - プリコンパイル
    - ```rails assets:precompile RAILS_ENV=production```
  - nginxを再読み込み
   - ```sudo systemctl reload nginx```
   - ```sudo systemctl start nginx```
  - プロセス再起動
 
   - プロセス確認```ps aux | grep unicorn```

   - プロセス停止```kill (rails masterのプロセス番号)```
  
   - アプリケーションサーバー起動```RAILS_SERVE_STATIC_FILES=1 unicorn_rails -c config/unicorn.rb -E production -D```

以上で改善した

#気づいた事
  - 開発環境では```image_tag```,```audio_tag```を複数使用しており、URLに```/assets/```が混同していても問題なかったが、unicorn、nginx(webサーバー)が加わり問題が起きた
  - コードが改善していても改めてプリコンパイルをしないと表示されなかった
  
###  原因の仮説
以下は今回の対処にあたって思ったこと。
調べきれていないので、メモとして書いておく。

 - Nginxを利用するとプリコンパイルあたりで違う挙動をする？
 - webサーバー（Nginx）は静的な情報を返すもので、動的な情報はアプリケーションサーバーに割り振るような仕組みだと理解しているが、静的な情報としてプリコンパイルをする際に、アセットパイプラインで参照している？　そのため、'''/assets/'''と記述してあるとアセットパイプラインとは別に、個別参照になりプリコンパイルがうまくいかなかった？
AWSのEC2でデプロイ後、背景画像が本番環境で反映されない・・・

#初めに
今回初投稿になります。
私は現在プログラミング学習を始めて約4ヶ月一通り簡単なポートフォリオは作成できる技術はついてきましたが、まだまだ初学者でエラーで止まることが多いため、振り返り学習を兼ねてエラーで詰まったことや日々の学習での気付きをその都度投稿します。

**今回EC2でのデプロイ時、ローカル環境で反映されていたポートフォリオの背景画像が本番環境で反映されないエラー解決に苦戦したので私が行った解決方法をまとめておきます。**

#今回の問題について
Rubyをベースにポートフォリオを作成して、AWSのEC2を利用し設定して本番環境にデプロイを試みたところ、ブラウザー上で作成したポートフォリオの背景画像のみうまく表示されず、背景がまっさらの状態に・・・・

同じimagesディレクトリ内に一緒に置いているロゴの画像は反映されているので、EC2の設定のせいで画像の読み込みが出来ていないということはない様子。
アプリ自体の他の機能も問題ない状態でした。

アプリケーションサーバーはUnicorn
WEBサーバーはNginxを使用しています。

#考えられる要因
1.背景画像の容量が大きい為、反映されない
2.画像を適用しているCSSの記述のミス
3.デプロイの設定時のミス

#試みた対処法
まずはロゴ画像は反映されている状況から①の画像容量の問題かと思い、画像容量を落とした背景画像の差し替えて再度デプロイして確認しましたが、相変わらず背景はまっさらなままでした。
そのため画像容量の問題ではないと判断。

次に②の背景画像を適用しているCSSの記述の見直しの為、同じ症状のエラーがないか調べて記述を見直ししました。
修正前
・style.css

```.big-bg {
  background-image: url('main-bg.jpg');
  min-height: 95vh;
  min-width: 100vw;
}```

↓
修正後
・index.scss

```.big-bg {
  background-image: image-url('main-bg.jpg');
  min-height: 95vh;
  min-width: 100vw;
}```
<font color="Green">背景画像の記述をstyle.cssからindex.scssへ書き換え、
background-image: url('main-bg.jpeg')  →  background-image: image-url('main-bg.jpeg')に変更</font>

調べた限りではこの方法で解消される可能性が高いようなので、改めてデプロイして確認したところ・・・・・　背景まっさら・・・・・なぜ？？？？
他の方で同じ症状の方はこの方法で大抵解消されているようでした。

③のデプロイの設定もまだ初学者の為、カリキュラムを都度都度確認しながら実装しているし、他の機能は問題ない為、設定は間違ってはいないはずなのでエラーログを確認します。
<font color="Red">※最終的にまずエラーログから確認するべきでした・・・</font>

EC2内のログをコマンドを入力して確認します
```[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ less log/production.log```

<font color="Green">エラーログを発見し、内容としてはpublicディレクトリ内のassetsディレクトリ内にmain-bg.jpegが無いとゆうものでした。
?????? 読み込み先がpublicディレクトリのassetsディレクトリ？　
普段からassetsディレクトリ内のimagesディレクトリに画像を入れていて問題なかったので、ずっとそうしていましたが、今回はpublicディレクトリを読み込んでいるようです。</font>

**その為、さらに同じ症状でのエラー解消をした内容を探してpublicディレクトリ内にassetsディレクトリを作成して、その中にimagesディレクトリを移して背景画像ファイルを配置しました。**

**その後、改めてデプロイして確認したところ・・・・・　　背景画像が反映されています！！！やりました！！！**

#解決方法
**今回はEC2内のエラーログを確認して、エラー内容を確認。
public/assets/images/main-bg.jpeg(画像)と配置することで解消できました。
その前に行ったCSSの記述をSCSSファイルに記述し直したことも必要だったと思います。**

**さらにその後、デプロイ時の設定を見直しておそらくですがアセットファイルのコンパイルのコマンドを設定し忘れていたような気もするので、そこも気をつけて今後EC2の設定をしようと思いました。**
【pyqgis】ベクターデータの選択地物を別レイヤに

## マップ上で選択する

```
input_lyr = iface.activeLayer()
input_lyr.selectByExpression('"カラム" =' + 値, QgsVectorLayer.SetSelection)
```

## 選択地物をインスタンス化する

```
#例えば属性検索で地物を選択
selection = input_lyr.selectByExpression('"カラム"=' + "値")

# 選択地物をインスタンス化
selected_lyr = input_lyr.materialize(QgsFeatureRequest().setFilterFids(input_lyr.selectedFeatureIds()))

# レイヤに追加
QgsProject.instance().addMapLayer(selected_lyr)

```
EC2上のエラーログをS3に移してAthenaで分析する

# エラーログをAthenaでお手軽に見やすくしたい
ALBのアクセスログをAthenaで可視化してみたら非常に便利だったので、エラーログでもやってみました。
エラーログ、見るの手間だけどほっとくと増えてるんだよな…。

参考 [AWS公式 ALBログのクエリ](https://docs.aws.amazon.com/ja_jp/athena/latest/ug/application-load-balancer-logs.html)

## 環境と要件
Apache/2.4.46 ()
PHP 7.0.33 

そこまでリアルタイム性は求めてないですが、毎日更新はさせたいです。
さすがにFatalが出ていたら気づきたいですし、Warningも無理のない範囲でつぶしていきたいです。
ログファイルはLogrotateで日付ごとのファイル分割と.gzファイルへの圧縮は対応済みです。
良い感じの記事が見つからなかったのでテーブルは自作します。

## エラーログをS3におく
必ずしも漏らさず拾う必要もないので、ログファイルは適当に定時でS3に移動するようにします。

## S3上のエラーログからAthenaでテーブルを作成する
エラーログは以下のような形式です。

```
[Fri Feb 26 06:50:56.127563 2021] [:error] [pid 26587] [client 127.0.0.1:21111] PHP Warning:  strlen() expects parameter 1 to be string, array given in /home/example.jp/test.php on line 20, referer: https://example.jp/
```

そしてテーブルの作成クエリがこちら。テーブル名とS3バケット名は任意のものに変更してください。

```
CREATE EXTERNAL TABLE IF NOT EXISTS in_error_logs (
    time string,
    theme string,
    pid string,
    user_name string,
    ip string,
    type string,
    detail string
)
ROW FORMAT SERDE 'org.apache.hadoop.hive.serde2.RegexSerDe'
WITH SERDEPROPERTIES (
    'input.regex' = 
    '([^ ]* [^ ]* [^ ]* [^ ]* [^ ]*) ([^ ]*) [^ ]* ([^ ]*) ([^ ]*) ([^ ]*) (.+?): ((.+ on line [0-9]+)(.+))'
)
LOCATION 's3://in-log/error-log/';
```

以下、考慮した部分です。
同じ内容をGROUP BYでまとめるために、発生個所にreferer情報が出る場合を考慮してカラムを作成しています。
エラーのレベルと内容が分かれば十分なので、ほかの情報はあまり細かく分割していません。
例えば今回ログファイルを日付ごとに分割しているので、記録日時は重要ではないと判断しました。
参考 [php エラーログの読み方](https://blog.heteml.jp/?p=5046)

## 必要な情報だけを取り出す
Queryは例えばこんな感じです。

```
SELECT
    COUNT(TIME) AS COUNT,
    error_level,
    detail
FROM
    elblogdb.media_in_error_logs
GROUP BY
    error_level,
    detail
ORDER BY
    error_level DESC,
    COUNT DESC;
```

するとこうなります。めでたしめでたし👏
エラー解消していきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268607/3e9db653-8a16-ab48-a02f-f4f088409f13.png)


## BIツールで可視化
共有したかったのでBIツールで可視化しました。
AWSアカウントのないメンバーでも、ログの確認と対応ができます。
個人的にはRedash気に入ってまして、実際はここまでのクエリ操作もすべてRedash上で行っています。
Fatalないよね？とか、急に件数増えてる！とかわかりやすいです。

## やってみて
アクセスログの分析をやっていれば問題なくできると思います。
エラーログを見るハードルがぐんと下がりました。やったね👍
【Swift】【30秒で読める】アプリ内でレビューを求める方法

早速手順を紹介します！
<br>
# 1. Storekitをインポートする


```swift:
import StoreKit
```
<br>
# 2. これをレビューしたいタイミングのところに記述


```swift:
if let scene = UIApplication.shared.connectedScenes.first as? UIWindowScene {
                SKStoreReviewController.requestReview(in: scene)
            }
```
<br><br>
おわり！
<br><br><br>
### 参考文献
https://zenn.dev/donchan922/articles/61a5684c1a2c520abc8e
https://stackoverflow.com/questions/64029622/swift-app-cannot-find-skstoreproductviewcontroller-in-scope
Arduino UNOのArduinoでのHT16K33でナイトライダー


1.SCLとSDAを接続、プルアップも忘れずに
2.電源の接続
3.下記のソースコードを書き込む
4.コンパイル実行で表示されたら終了
5.おわり

```c++

#include <Wire.h> //I2C library

//STM32G031J6M6
#define sdaPin PA12    // ArduinoA4
#define sclPin PA11    // ArduinoA5

// I2C address. 
#define HT16K33_add 0x70
#define I2Cadr      0x3e  // 固定


char    data_read[2]; //i2cバッファー
int     ii;           //ループカウンター

//レジスターの初期値
char INIT_com[] = {
  0x21,0x81,0xef
};

//表示器への書き込み
void i2c_HT16K33(char *buff1,int n){
  Wire.beginTransmission(HT16K33_add);
  Wire.write(buff1[0]);
  if(n == 2){
    Wire.write(buff1[1]);
  }
  Wire.endTransmission();
  delay(1);
}//i2c_HT16K33

void setup()
{  
  delay(3000); //not delete

  Wire.begin(); // initialise the connection //767 UNO
  //Wire.begin(sdaPin,sclPin); //STM32G031J6M6

  //レジスターの初期化 
  for(ii=0;ii<3;ii++){
    i2c_HT16K33(&INIT_com[ii],1);
  } //for

  //表示データの初期化
  for(ii=0;ii<16;ii++){
    data_read[0]=ii;
    data_read[1]=0x00;
    i2c_HT16K33(data_read,2);
  } //for
} //end setup

void loop()
{
  //ビットシフトでナイトライダー
  for(ii=0;ii<8;ii++){
    data_read[0]=0;       //アドレス
    data_read[1]=(1<<ii); //データ
    i2c_HT16K33(data_read,2);
    delay(1000);
  } //for
}//loop


```

![i2c_HT16K33_UNO_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/57ea3fd8-b851-0a76-0688-03b47c77c364.jpeg)
Electron + Vue.js3 でMacアプリを作る最初の手順覚書 


### 初期設定
```bash
$ vue create アプリ名 // Vue初期設定
$ cd アプリ名
```
### ライブラリ追加
```bash
$ vue add electron-builder // electronのビルドプラグイン
$ npm install bulma // CSS Bulma
$ npm install -D electron-icon-builder // アイコン設定用ライブラリ追加
or
$ yarn add --dev electron-icon-builder // アイコン設定用ライブラリ追加

```
### 開発
```bash
$ npm run electron:serve // electronの開発画面で起動
```

### 設定
```js:background.js
const win = new BrowserWindow({
useContentSize: true,
```
### CSS設定
```js:main.js
import '../node_modules/bulma/css/bulma.min.css'


```
### アイコン
```json:package.json
"script": {
    "electron:generate-icons": "electron-icon-builder --input=./public/app_icon.png --output=build --flatten" // ビルド用に追加
```
```js:background.js
  const win = new BrowserWindow({
   icon: path.join(__static, 'app_icon.png') // 追加
```
### ビルド
```bash
$ yarn electron:generate-icons // アイコンを作成
$ yarn electron:build // 配布用ビルド
```

# 参考書籍
改訂版 実践で学ぶ！Electron+Vue.jsでデスクトップアプリ開発
https://booth.pm/ja/items/2396714
【rails】db:migrateする前の状態に戻したい時の対処法

こんにちは。たにーです。

久しぶりの投稿になってしまいましたが
これからサボらずに投稿します:sob:

今日は、Ruby on Railsを使っていて、
「rails db:migrate　したけど、追加し忘れたカラムがあった、、、」と。

もちろんaddで追加する方法もありますが、
無駄にファイルを多く作りたくない、見た目を綺麗にしたいなどあると思います。
その時の対処方について解説します。

#事前準備＆復習も兼ねて

①model作成
上記のコマンドでmodel:usersを作成します。
そうすると下記が実行され、ファイルが作成されます。

```ruby:terminal
 $ rails g model User name:string body:text

   Running via Spring preloader in process 10452
         invoke  active_record
         create db/migrate/20210226145734_create_users.rb
         create    app/models/user.rb
         invoke    test_unit
         create      test/models/user_test.rb
         create      test/fixtures/users.yml
```
②migration実行
rails db:migareを実行することで、DBに反映されます。

```ruby:terminal
$ rails db:migrate

== 20210226145734 CreateUsers: migrating ======================================
-- create_table(:users)
   -> 0.0114s
== 20210226145734 CreateUsers: migrated (0.0126s) =============================

```

#全てのカラムを記載するのを忘れていた

**ここで[image_id]を記載するのを忘れてしまった、、、**としましょう。
想定していたのは、[name],[body],[image_id]だったします。

rails db:migrateする前でしたら、ファイルに直接記入して問題ないのですが、
それだと上手く反映できない様子。
追記してmigrateするも反応なし。

```ruby:_create_users.rb
class CreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      t.string :name
      t.text :body
      t.string :image_id  　 　⇨追加で記載してみた
      t.timestamps
    end
  end
end

結果
$ rails db:migrate
$ 

```

#rails db:rollbackを実行しましょう

rails db:rollback　を実行することにより、
1つ前の状態に戻すことができます。

```ruby:terminal
$ rails db:rollback

rails db:rollback
== 20210226152738 CreateUsers: reverting ======================================
-- drop_table(:users)
   -> 0.0051s
== 20210226152738 CreateUsers: reverted (0.0136s) =============================
```

これにより、migrateする前の状態に戻りました。

#追加カラムをファイル内に記載し、migrate実行

```ruby:_create_users.rb
class CreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      t.string :name
      t.text :body
      t.string :image_id  　 　⇨追加で記載
      t.timestamps
    end
  end
end
```
そして、再度「rails db:migrate」を実行します。

```ruby:terminal
$ rails db:migrate

== 20210226152738 CreateUsers: migrating ======================================
-- create_table(:users)
   -> 0.0069s
== 20210226152738 CreateUsers: migrated (0.0080s) =============================
```

上記のように、無事migrateされました。
schemaファイルを見おると、想定している内容で反映されておりました。

```ruby:schema.rb
ActiveRecord::Schema.define(version: 2021_02_26_152738) do

  create_table "users", force: :cascade do |t|
    t.string "name"
    t.text "body"
    t.string "image_id"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

end
```

#schema.rbについて
rails db:migrateの実行結果が反映されるファイルです。



#参考文献
[rails tutorial](https://railstutorial.jp/webtext)

以上、たにーでした。
【SQL】条件に合致する件数、条件付きの重複を除いた件数

条件に合致する件数、例えば「男性ユーザー数」などのSQLでの書き方です。
複数書き方はありますが、基本的に**count(case式)**を使用することをおすすめします。
応用として、条件付きの重複を除いたデータ件数の書き方も紹介します。

# サンプルテーブル

サンプルコードに使用するテーブルは以下の通りとします。

**users**

| id | name | gender | hobby |
| --- | --- | --- | --- |
| 1 | 佐藤 | 男性 | 野球 |
| 2 | 田中 | 女性 | ショッピング |
| 3 | 斎藤 | 男性 | テニス |
| 4 | 上田 | 男性 | ドライブ |
| 5 | 石川 | 女性 | テニス |
| 6 | 金沢 | 男性 | ショッピング |

# 条件に合致する件数のSQL

サンプルテーブルより、 `gender = 男性` であるデータの件数を取得するSQL

```sql
SELECT
    count(case when gender = '男性' then gender else null end) as count_man
FROM users
```

## 解説
まずcount関数の引数内のcase式に着目します。

```sql
case when gender = '男性' then gender else null end
```

このcase式により、下のcase列が生成されると考えればよいです。

| gender | case |
| --- | --- |
| 男性 | 男性 |
| 女性 | null |
| 男性 | 男性 |
| 男性 | 男性 |
| 女性 | null |
| 男性 | 男性 |

続いてcount関数に着目します。
count関数は引数内の列または式について、**nullではない値の個数**を数え上げます。

よって、意図通り、男性のデータ件数を抽出することができます。

## 補足
count関数は**nullではない値**であれば同じ挙動をするので、case式には自由に記述して良い部分があります。
すなわち、下の`xxxx`の部分はnull以外であれば何でも構いません。例えば`1`としてもよいですし、`false`でも大丈夫です。ただし、さすがに`false`を書くのは不誠実ですので避けてください。

```sql
case when gender = '男性' then xxxx else null end
```

# 条件付きの重複を除いたデータ件数のSQL
サンプルテーブルより、「男性ユーザーの趣味の種類は何種類あるか」を取得するSQL

```sql
SELECT
    count(distinct case when gender = '男性' then hobby else null end) as distinct_man_hobby
FROM users
```

## 解説

case式により、下の「case」列が生成されると考えればよいです。
case式にて`then hobby`としていることに注意してください。

| id | name | gender | hobby | case |
| --- | --- | --- | --- | --- |
| 1 | 佐藤 | 男性 | 野球 | 野球 | 
| 2 | 田中 | 女性 | ショッピング | NULL |
| 3 | 斎藤 | 男性 | テニス | テニス |
| 4 | 上田 | 男性 | ドライブ | ドライブ |
| 5 | 石川 | 女性 | テニス | NULL |
| 6 | 金沢 | 男性 | ショッピング | ショッピング |

このcase式に対してdistinctのcount関数を用いることで、重複しないデータ件数を取得できます。

# おすすめしない書き方
かなり個人的な意見で恐縮ですが、検索時に上位にヒットする下記の書き方は、**特にSQL初学者にはおすすめしません。**

```sql
SELECT
    count(gender = '男性' or null) as count_man
FROM users
```

非常にシンプルかつ頭の良い美しい書き方です。しかし、これは以下の点がデメリットになります。

- `条件式 or null` の挙動が理解しづらい
- 応用がきかない

## 条件式 or null の挙動
表題について解説します。
結論から言うと、`条件式 or null` は**`true`もしくは`null`を返す式になります**。

まず、`条件式`の部分である `gender = '男性'` によって下のような「条件式」列が生成されると考えてよいです。

| gender | 条件式 |
| --- | --- |
| 男性 | true |
| 女性 | false |
| 男性 | true |
| 男性 | true |
| 女性 | false |
| 男性 | true |

次に、この点が最も重要な部分なのですが、
`true or null` は `true`
`false or null`は`null`
を返します。これは`or`演算子の挙動です。
よって、下の 「条件式 or null」列が生成されると考えて良いです。

| gender | 条件式 | 条件式 or null |
| --- | --- | --- |
| 男性 | true | true |
| 女性 | false | null |
| 男性 | true | true |
| 男性 | true | true |
| 女性 | false | null |
| 男性 | true | true |


この部分がSQL独特の仕様であり、挙動が理解しづらいと主張する点です。

以降はすでに解説したcount関数の仕様によって、nullではない値の個数が数え上げられるので、trueの件数、元をたどると「男性の件数」を数え上げることができます。

## 応用がきかない
「条件に合致するデータのうち、重複しないデータの件数のSQL」に書いたような応用がききません。
無理やりdistinctを使っても、trueかnullの列に対して重複しないデータ数を数え上げるので、trueの1件のみになります。
リモートブランチが沢山ある時にしあわせ〜〜〜になる方法

リモートブランチをいくつか使って開発をするとき、それぞれfetchするのがだるいなと思ったら `--all` つけたらいい感じにじゅんぐりfetchしてくれて便利だった。
リモートで消えたブランチをローカルで消してくれる `-p` も便利で、組み合わせて基本これを使うことにしよう。

```
git fetch --all -p
```

しあわせ〜〜〜
【Rails】 初心者向け！gem 'dotenv-rails'の使い方

はじめに
---
最近当たり前のように使用している'dotenv-rails'のgemと環境変数という言葉ですが、使い始めた頃は何が何だかよく分からなかった覚えがあります。そんな自分自身の復習と、同じような初心者の方の参考になればと思い、なるべく一つ一つ丁寧に、また画像なども掲載しつつ投稿させていただいております。
<br>

開発環境
---
ruby 2.6.3
Rails 5.2.4.4
<br>

dotenv-railsとは
---
環境変数を管理することができるgemです。
自身で作成したアプリケーションの直下に.envファイルを作成することで、パスワードなどネット上に公開させたくない情報を扱い、自動で読み込むことが可能です。
<br>

環境変数とは
---
参考書やネットで当たり前に出てくる「環境変数」という言葉。
私は当初この言葉の意味すら分かりませんでしたので、説明を掲載しておきます。
簡単に言うと、ネット上に公開させたくない情報を入れておく箱になります。この箱自体には、自身で任意の名前をつけることが可能です。つまり、ネット上に公開させたくない情報は、一度この環境変数という箱の中に入れ、コード上で使用することで、情報漏洩を防ぐことができます。
<br>

gemを導入
---
```Gemfile.
gem 'dotenv-rails'
```
```terminal.
$ bundle install
```
<br>

.env ファイルを作成
---

① アプリケーション名のディレクトリにカーソルを合わせ、右クリックします。

② New Fileを選択します。

③ ファイル名を「.env」にします。
　　画像のような配置でファイルを作成できていれば、完成です！


（参考画像）
<img width="200px" alt"[スクリーンショット 2021-02-26 23.59.01.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/942338/1a45e4e0-6237-8d15-e007-889308b06081.png">　<img width="168px" alt"[スクリーンショット 2021-02-26 23.59.14.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/942338/7ec47c8a-4f42-7446-a310-49c27e8f405e.png">
---
※ ①〜③をコマンド一つで作成することも可能です。
ターミナルでアプリケーションのディレクトリにいることを確認してから、「touch .env」でも可能です。

```terminal.
username:~/environment/(アプリケーション名) $ touch .env
```
---

④ 以下のような形で必要な情報を記述してください。

```..env
# Google map用
GOOGLE_API_KEY = "***************"

# 問い合わせ機能用
SEND_MAIL = "***************"
SEND_MAIL_PASSWORD = "***************"

# デプロイ用
DB_USERNAME = "***************"
DB_PASSWORD = "***************"
DB_HOST = "***************"
DB_DATABASE = "***************"
```
<br>

環境変数が設定できているか確認
---
コンソールを使用して、設定した環境変数を入力したときに、入力した番号が返ってくれば呼び出せています。

```terminal.
$ rails c
2.6.3 :001 > ENV['GOOGLE_API_KEY']
=> "***************"
```
<br>

環境変数の記述の仕方
---
ENV['設定した名前']
たったこれだけの記述で環境変数を扱うことができます。

```
ENV['GOOGLE_API_KEY']
ENV['SEND_MAIL']
```
<br>

.gitignoreファイルへ追記
---
アプリケーション直下にある、Gitの管理に含めないファイル名を記述するファイルです。
こちらのファイルの他にも、ファイル名の前に.(ドット)が付いているものは、Gitの管理に含めないファイルとして取り扱われています。
<font color="Red">※ こちらに「/.env」の記述をしないと、全ての情報がネット上に公開されてしまうので注意！</font>

```..gitignore
# 最終行に下記の記述を加えてください。
/.env
```
<br>

万が一GitHubにpushしてしまったら...
---
誤ってGithub上に公開してしまっている方は、下記のコマンドで.envをGitの管理から外してください。
コマンド実行後は、.gitignoreファイルに「/.env」を追記した上で、再度git pushをし直してください。

● git rm --cached [ファイル名]
　　ファイル自体は残したままGitの管理から外すことが可能なコマンド

```terminal.
$ git rm --cached .env
```
<br>


終わり
---
今回は以上になります。
私自身もプログラミング初心者ですが、同じ様な立場の方に少しでも参考になれば幸いです。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。
Nuxt.jsでhtmlAttrsのlangやmetaタグが効かないとき

## 事象
[ドキュメント](https://ja.nuxtjs.org/examples/seo-html-head/)にあるように、通常このように書くと

```javascript:nuxt.config.js

head: {
  htmlAttrs: {
    lang: 'ja',
    prefix: 'og: http://ogp.me/ns#',
  },
}
```
このように反映されますが、

```html
<html lang="ja" prefix="og: http://ogp.me/ns#">
```
`lang`になにを設定しても`en`になってしまう :cry:

### 解決法
どうやらPWAモジュールを一緒に入れていると、そちらが`lang`の値を`en`に上書きしてしまうみたい。
[PWAのほうのドキュメント](https://pwa.nuxtjs.org/meta#lang)通りに設定するとうまく書き変わる。

```javascript:nuxt.config.js
export default {
  head: {
    htmlAttrs: {
      lang: 'ja',
      prefix: 'og: http://ogp.me/ns#',
    },
  },
// ~~~
  pwa: {
    manifest: {
      lang: 'ja',
    },
  },
}
```

### 環境

- Nuxt.js: 2.15.2
- nuxtjs/pwa: 3.3.5

Nuxt.js 2.11.0のときは発生していなかったのだけど、バージョンアップしたら発生した。

### 他にも上書きされるものが…
このあたりが上書きされます。

```javascript
  const defaults: MetaOptions = {
    name: process.env.npm_package_name,
    author: process.env.npm_package_author_name,
    description: process.env.npm_package_description,
    charset: 'utf-8',
    viewport: undefined,
    mobileApp: true,
    nativeUI: false,
    favicon: true,
    mobileAppIOS: undefined,
    appleStatusBarStyle: undefined,
    theme_color: undefined,
    lang: 'en',
    ogType: 'website',
    ogSiteName: true,
    ogTitle: true,
    ogDescription: true,
    ogImage: true,
    ogHost: undefined,
    ogUrl: true,
    twitterCard: undefined,
    twitterSite: undefined,
    twitterCreator: undefined
  }
```
https://github.com/nuxt-community/pwa-module/blob/79322c18a28456a02ef0c3c596dff6cd88389f59/src/meta.ts#L9
#### 参考
https://github.com/nuxt/nuxt.js/issues/8435#issuecomment-737769207
npm install && npm run devした際のエラー

laravel8でnpm install && npm run devを実行し、npm ERR!というエラーが出た際に解決した方法を書きます。

下記コマンド実行

````
$ php artisan cache:clear
````
実行結果

````
Cache cleared successfully
````
下記コマンド実行

````
php artisan config:cache
````
実行結果

````
Configuration cache cleared!
Configuration cached successfully!
````
再度下記コマンドを実行

````
npm install && npm run dev
````
解決しました。
iOS設定アプリ内のアプリ設定画面を開く

## はじめに
位置情報取得や画像取得などについて、初回の許可設定で拒否されてしまうと、その後ずっとそれらのデータを取得できない状態になってしまいます。

このような場合にiOS設定アプリ内の画面から設定変更してもらうために設定画面を自動で表示するのが効果的です。

設定画面の表示方法を説明します。

## やり方

決まったURLをopenするだけです。
URLは、UIApplication.openSettingsURLStringで取得できるので、下記のようにそのURLをopenするだけです。

```設定画面を表示する.swift
    let url = URL(string: UIApplication.openSettingsURLString)!
    UIApplication.shared.open(url, options: [:], completionHandler: nil)
```

## 確認環境

Xcode: 12.4
iOS: 14.4
ColaboratoryでRDKit (2021.2.26版)

Google ColaboratoryでRDKitを使うときのインストール方法。
数多の記事があるが、更新されてなくて動かなくなっていることも多いので、現時点版を書きます。

```colab
!wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh
!bash Miniconda3-latest-Linux-x86_64.sh -b -f -p /usr/local
!conda install python=3.6 --yes
!conda install -q -y -c rdkit python=3.6 rdkit
```

```colab
import sys
sys.path.append('/usr/local/lib/python3.6/site-packages/')
```
これでいけます。

いけたかどうかを確認。

```colab
from rdkit import Chem
from rdkit.Chem import AllChem, Descriptors
from rdkit.Chem.Draw import IPythonConsole
from IPython.display import display
from IPython.display import Image
```
```colab
m = Chem.MolFromSmiles("N#Cc1cccc(CN2C(=O)C(=O)c3cccc(Br)c32)c1")
display(m)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57626/42d40dff-1ca0-3549-bf52-9aa23f4b225c.png)

無事Colabで化合物が表示されていれば成功です。よいRDKitライフを。
ウォーターフォール型開発とアジャイル型開発の嘘

「ウォーターフォールvsアジャイル」みたいな話がいまだにされることが多いようなので、まずはその成り立ちに遡ってウォーターフォールとアジャイルについて振り返ってみましょう

#ウォーターフォール型開発とは
1960年代後半に発表されたWinston Royceさんの論文が起源と言われています
元々は建築業界の手法をソフトウェア開発へ適用したら…という話でした

ウォーターフォール型開発で簡単に調べてみると、要件定義、設計、実装、テスト、のように滝が流れるように進んでいく…と紹介されています

#アジャイル型開発とは
2001年に発表された[アジャイルソフトウェア開発宣言](https://agilemanifesto.org/iso/ja/manifesto.html)に端を発した開発手法です
宣言にある4つの価値と12の原則を尊重したあらゆるプラクティスのこともアジャイル型開発の一部として紹介されることもあります

アジャイル型開発で簡単に調べてみると、要件定義、設計、実装、テスト、を小さい単位で繰り返していくことで進んでいく…と紹介されています

#よくある嘘
先程、このように記載しました

>ウォーターフォール型開発で簡単に調べてみると、要件定義、設計、実装、テスト、のように滝が流れるように進んでいく…と紹介されています
>アジャイル型開発で簡単に調べてみると、要件定義、設計、実装、テスト、を小さい単位で繰り返していくことで進んでいく…と紹介されています

簡単に言うとこれらは嘘です
どこが嘘なのか、見ていきましょう

#ウォーターフォール型開発の嘘とは
Winston Royceさんの論文が起源とされていますが、その論文ではウォーターフォール型開発(この論文で命名された訳ではないですが…)ではうまく行かないだろう、と紹介されています
何故かというと、テストを最後にまとめて行おうとすると設計の間違いがあったときに手戻りをしなければなりません
問題なのは、設計、実装をしてからミスと気づくまでの時間が数か月に及ぶことがある、ということです
つまり、フィードバックを受けるのが遅すぎるため気づいた時には既に手遅れになっており、修正にかなりのコストが掛かってしまう、ということです
このような最後にまとめて行うテストは「ビッグバンテスト」と呼ばれています
(ビッグバンを起こすレベルの奇跡が起こらなければ通過させることが不可能なテストだから)

ここまで読むとわかるかもしれませんが、ウォーターフォール型開発は誰もおすすめしていません
そもそも叩かれるための藁人形として紹介された手法なので…
少なくとも、ウォーターフォール型開発というのはソフトウェア開発業界では絶対にNGな手法です
勿論、ウォーターフォール型開発を進化させようとする人はいないため、発表された1960年代後半から全く進化していません

#アジャイル型開発の嘘とは
アジャイルソフトウェア開発宣言では細かいやり方は全く明示されていません
何故ならば、常により良いやり方を探すことこそがアジャイルだからです
ですが、優れたプラクティスとして(アジャイルの一部として)紹介されるものはいくつもあります
XPやTDDをはじめとするこれらのプラクティスはここ20年～30年の内に考案された数々の知恵の結晶です
というか、ソフトウェア開発業界における大革命の集合こそがアジャイルです

先程の、工程を繰り返す～というのとは根本となる発想が全然違います

#どっちが良いか
アジャイルソフトウェア開発宣言から始まった大革命の数々はとてつもないものでした
ウォーターフォール型開発とアジャイル型開発というのは、飛脚とテレビ電話くらい違うものです
最早、比べるに値しないと言っても言い過ぎではないレベルですね

![サークルオブライフ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529608/9ab36c17-b80f-5e89-96b1-d651ca642785.png)
この図はクリーンアジャイルでサークルオブライフと呼ばれているものです
(元々はロン・ジェフリーズさんがXPのプラクティスを紹介したものです)

アジャイルソフトウェア開発宣言で言われている4つの価値と12の原則を守り、先人の知恵を拝借することで、大革命の恩恵を受けることができます

#何故ウォーターフォール型開発がまかり通っているのか
ソフトウェア開発を齧ったことがある人であれば、ウォーターフォール型開発がどれだけ欠点まみれの手法かは知っています
それなのにまるで当たり前のようにウォーターフォール型開発が蔓延っています

良く言われているのが、いまいちソフトウェア開発を知らない人が経営陣にウォーターフォール型開発が最も優れた手法のように紹介し、それを信じ込んでしまう、というパターンです
一種のバズワードになってしまっている訳です
しかし、専門職でもない人が専門職っぽい人に騙されてしまうのは果たして悪いことでしょうか

本当に悪いのは、知識の無い専門職気取りの人だと僕は考えています
そのような人にならないために本を読みましょう



#まとめ
まずは優れたプラクティスを採用しましょう
優れたプラクティスは調べればいくらでも出てきます
そして、テストコードを書きましょう
テストコードこそが大革命の中心です
dictのdictをDataFrameにする

# dictのdictをDataFrameに変換したい

以下のようなdictを一発でデータフレームにしようとしました。

```python
data = {
    '1001': { 'A1' : '1', 'A2', '2' },
    '1002': { 'A1' : '3', 'A2', '4' },
}
```

`1001`,`1002`を index に、その後ろのdictのkeyを列にvalueを値にしたい

以下でOKです！

```python
df = pd.DataFrame.from_dict(data, orient='index')

print(df)
```

結果

```python

     A1 A2
1001  1  2
1002  3  4
```

以上となります。
ご参考にー
【Vue ✕ 天気予報API①】VueプロジェクトをGitHub Pagesに公開

# はじめに

Vue CLI環境構築からGitHub Pagesに公開するまでをこの記事にまとめました。
天気予報APIを使ったアプリケーションをつくる過程で行ったことの備忘録的な内容です。

Node.jsを使える環境が準備されていることを前提に進めます。


# Vueをインストール

Vue CLIを使うことで、欲しい機能にあわせたスタート時の環境を作ることができます。
下記コマンドで、Vue環境準備のためのコマンドラインインタフェースをインストールします。

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

Vue CLI バージョン確認

```
% vue --version
@vue/cli 4.5.11
```

また、グローバルインストールを行うための環境パスが通っていない場合はエラーがでるので、この記事を参照ください。

[npmのグローバルインストールをするためにパスを通す方法](https://qiita.com/sohhprog/items/108015eee5c16da2df93)


# Vueプロジェクト作成

```
vue create weather-app
```

`vue create` の後にプロジェクト名を指定してください。（今回は `weather-app` で作成）

途中で出てくる選択肢は全部 enter で問題ないですが、カスタマイズしたい場合は最初の質問で `Manually select features` を選択してください。 画像のように vuex や vue-router の追加や、細かい設定が可能です


![cli-select-features.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681029/b1e2a31c-623d-37b4-444b-6590b7dfe0f7.png)

`vue ui`コマンドで、グラフィカルインターフェイスを使って、プロジェクトの作成・管理を行うことも可能です

```
vue ui
```

![ui-new-project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681029/49dd04bc-c517-a89f-a437-f38ffaddd6b0.png)


# ローカルホスト立ち上げ

```
cd weather-app
npm run serve
```

つくったプロジェクト配下に移動し、
`npm run serve` を実行すると、localhostが立ち上がります。`http://localhost:8080/`でこの画面を確認。

![vue-create.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681029/2b6573e6-b07a-678c-69b8-a3be94ef23d9.png)

ここでブラウザに表示される画面は、src内のファイルが使用されています。

# GitHubのリモートリポジトリに登録

まずはGitHubに新規リモートリポジトリを作成し、下記コマンドを実行し登録します。

```
% git init
% git remote add origin <リモートリポジトリのURL>
% git remote -v //確認
% git add .
% git commit -m 'initial commit'
% git push origin master
```

# GitHub Pagesに公開

`gh-pages`というツールを使って、gh-pagesブランチを公開する方法で進めていきます。

### 1. Vueの設定ファイルを作成

プロジェクトのルートディレクトリ直下に、以下の内容で**vue.config.js**という名前で設定ファイルを作成します。

```vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/weather-app/'   //任意
    : '/'
}
```

### 2. gh-pagesをインストール

`--save-dev` （ `-D` でもOK ）は開発用パッケージのインストールに必要なオプションです。



```
npm install gh-pages --save-dev
```

package.jsonの `devDependencies` というところに `` が追加されています。

```package.json
 "devDependencies": {
    // 略
    "gh-pages": "^3.1.0",
  },
```

### 3. デプロイのためのコマンドを追加

package.jsonのscriptsに `"deploy": "gh-pages -d dist"` を追記します。下記のようになるはずです。

```
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "deploy": "gh-pages -d dist"   //追加
  },
```

### 4. deployコマンドで反映

`npm run build` により、srcのファイルを元に、dist配下に本番環境用のファイルを生成します。その後、`npm run deploy` を実行することで、リモートにgh-pagesブランチが作られ、distディレクトリの内部がGitHub Pagesに公開されます。

- npm run build
- npm run deploy

今後、ソースコードを変更し反映させたい場合は、同様の手順で更新してください。

## まとめ

下記が続きになります。
この記事では、ここで作成したVue環境を使って、天気予報APIとAJAX通信を行います。

- [天気予報APIからリソース取得【Vue ✕ 天気予報API②】](https://qiita.com/sohhprog/items/c84ab23a261e4a5d46b7)


# 参考文献

- [【Vue CLI】 インストール](https://cli.vuejs.org/guide/installation.html)
- [【Vue CLI】 publicPath](https://cli.vuejs.org/config/#publicpath)
[Linux(Ubuntu)]タイムゾーンを日本時間にする5つの方法まとめ

[Zenn](https://zenn.dev/kumamoto/articles/51bf0893620f0c)にも筆者本人が転載済

## 環境

Ubuntu18をVirtualbox/Vagrantの仮想環境で動かしている。

```
$ cat /etc/os-release
NAME="Ubuntu"
VERSION="18.04.3 LTS (Bionic Beaver)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 18.04.3 LTS"
VERSION_ID="18.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=bionic
UBUNTU_CODENAME=bionic
```

## 設定方法(5つ)

### (1)/etc/localtimeを変更

```
$ cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
```

上記だけで他のユーザーも同様のタイムゾーンに設定される。

### (2)環境変数TZを設定

```
$ export TZ="Asia/Tokyo"
```

上記の設定は現在のユーザーにしか適用されない。
(試しに現在のユーザーで上記の環境変数を設定した後にrootになってからuptimeコマンドを打ってみればわかる。)

### (3)tzselectコマンドから設定すべきタイムゾーンを知る

tzselect自体はタイムゾーンの値を確認するための対話コマンド。

![スクリーンショット 2021-02-26 15.26.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403039/246760e2-4695-173c-c0a4-b049d222a8f5.png)



上記のように質問が来るので数字を入力してEnterすることで選択を進めていく。

![スクリーンショット 2021-02-26 15.41.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403039/e622a3f1-734e-0aad-3a62-6ce870a49506.png)


上記の

```
TZ='Asia/Tokyo'; export TZ
```

を~/.bash_profileに於けばそのホームディレクトリのユーザーのタイムゾーンは変更される。

もしくは/etc/timezoneに

```
Asia/Tokyo
```

を記入する。(これで全ユーザーに適用される)


### (4)tzconfig(もしくはdpkg-reconfigure tzdata)で設定

```
$ tzconfig
WARNING: the tzconfig command is deprecated, please use:
dpkg-reconfigure tzdata
```

tzconfigは最近のLinuxディストリビューションでは使えないみたい。。。なのでお勧めされている『dpkg-reconfigure tzdata』を使ってみよう。

```
-- rootユーザーに切り替えてからやるかsudoでやるように
$ sudo dpkg-reconfigure tzdata
```

下記のようにカラフルな選択画面が出てくる。

![スクリーンショット 2021-02-26 15.57.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403039/5ac39fc6-18dc-2e09-a367-dfa85c98c6b1.png)

![スクリーンショット 2021-02-26 15.59.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403039/97e2c27a-7277-9025-1eda-d7acecc770b4.png)


上記で選択をしていけば、どのユーザーでもタイムゾーンは統一される。

### (5)timedatectlで設定

```
$ timedatectl set-timezone Asia/Tokyo
```

```
$ cat /etc/timezone
Asia/Tokyo
```

問題なく全ユーザーのタイムゾーン設定が出来ている。

ちなみに余談だがtimedatectlコマンドを用いれば下記でタイムゾーン表記の確認も出来る。

```
$ timedatectl list-timezones | grep -i tokyo
Asia/Tokyo
```

※『grep -i』は大文字小文字を区別せずに文字検索する

本日は以上です。
プルダウンの作り方

#プルダウンの作り方

select要素とoption要素を使用します。

```html
<select>
  <option>スポーツを選択してください</option>
  <option>野球</option>
  <option>サッカー</option>
　<option>バスケットボール</option>
　<option>バレーボール</option>
  <option>水泳</option>
　<option>柔道</option>
</select>
```

select要素は・・・セレクトボックス
option要素は・・・プルダウンの選択肢

これでプルダウンが簡単に作れます。
Pythonで可変長引数を利用するには

# 可変長引数とは
可変長引数とは、名前の通り長さが**可変**な引数である。要するに引数が固定ではなく、任意の個数を受け取ることができる。これだけではわかりかねると思うので、実際のコードを例に見ていこう。

# *args
```python
def main(*args):
  print(args) 

main(1, "one", ["one", "two"], {"one", "two"})

# 実行結果 -> (1, 'one', ['one', 'two'], {'two', 'one'})
```
`*args`は任意の数の引数を受け取り、その内容を`args`という`*`(アスタリスク)を外した形でアクセスすると受け取った引数を**タプル型**で展開してくれる。`*`以降は任意の文字列でもよいが、特別な理由がなければ`*args`とする場合が多い。

# **kwargs
```python
def main(**kwargs):
  print(kwargs) 

main(int=1, str="one", list=["one", "two"], dict={"one", "two"})

# 実行結果 -> {'int': 1, 'str': 'one', 'list': ['one', 'two'], 'dict': {'one', 'two'}}
```
`**kwargs`は任意の数のキーワード引数を受け取り、その内容を`kwargs`という`**`(アスタリスクx2)を外した形でアクセスすると受け取った引数を**辞書型**で展開してくれる。こちらも`**`特別な理由がなければ`**kwargs`とする場合が多い。

# 実際の例
これらの可変長引数の実例を見たい場合は、Pythonのサードパーティー製のライブラリがオススメ。特にHTTPリクエスト関連でよく使う`requests`はコードリーディングをするのに最適なので、是非一度読んでみることをオススメする。

Github(psf/requests) -> https://github.com/psf/requests/tree/master/requests
CentOS 6でupstartを使ってログを吐きながらdaemon化する

# TL;DR

Stack Exchangeにそのものドンピシャな回答がある。
https://serverfault.com/a/666970

```:/etc/init/blackbox_exporter.conf
description "prometheus blackbox exporter"

start on runlevel [2345]
stop on runlevel [016]

script
exec bash << EOT
    cd /usr/local/opt/blackbox_exporter
    exec > >(logger -t blackbox_exporter) 2>&1
    exec ./blackbox_exporter
EOT
end script
```

# Why

- CentOS 6で最近系(forkとかしないでフロントエンドで上がり続けてログはstdoutに出す系)のやつを手軽にdaemon化したい
    - init scriptを書くのは正直辛い、し、ネットでも良さそうな感じのやつがもう全然見つからなくなってきている
    - systemdに慣れすぎて今更bashでプロセス管理をほぼ完全自前で書くのがしんどい
    - そもそも最近系はフロントエンドで上がり続ける系が多い
        - コンテナとかsystemdではむしろそれが普通なので普通な流れ
- CentOS 6にはupstart入ってるじゃん！ → バージョンが古すぎてstdoutをlog出来ない → Stack Exchangeで[神回答](https://serverfault.com/a/666970)を発見

# Tips

実行ユーザーを変えたい場合は `exec bash << EOT` の部分を `su hoge << EOT` に変えるだけで対応出来る。

```
 : (snip)

script
exec su nobody << EOT
    cd /usr/local/opt/snmp_exporter
    exec > >(logger -t snmp_exporter) 2>&1
    exec ./snmp_exporter
EOT
end script
```

rsyslogでファイルを分割したい場合 `logger -t` で指定した値を `$programname` でマッチしてあげればよい。もしくは `logger -p` でfacility.severityを指定出来るので、それを使うでもよい。

```:/etc/rsyslog.d/blackbox_exporter.conf
if $programname == 'blackbox_exporter' then /var/log/blackbox_exporter.log
& ~
```

# 感想とか

このStack Exchangeの回答を見たときに初めてbashの `>()` を知った。深い。検索するときは正式名 [Process Substitution](https://www.gnu.org/software/bash/manual/html_node/Process-Substitution.html) を覚えてくと良い。これをさらにexecとリダイレクションと組み合わせることで、カレントシェルの標準出力(とSTDERR)先を任意のコマンドに入れ替えてしまうことが出来るんだなあ。逆の `<()` はよく使っていて、例えば `diff -u <(httpd.conf | sed -e 's/hoge/fuga/g') <(ssh fuga cat /etc/httpd.conf)` とかは頻繁にやる。

単に `>()` はカッコ内のコマンドに対して書き込み用のfdを作る。例えば次のようにすると、opensslで鍵ペアを作成するときにファイルに保存せず標準出力に出すことが出来るのか。なるほど！

```
bash-3.2$ openssl req -new -newkey 2048 -nodes -keyout >(cat) -x509 -subj "/CN=Example Certificate" -days 825 -out >(cat)
Generating a 2048 bit RSA private key
..........................+++
..............................................................+++
writing new private key to '/dev/fd/63'
-----
-----BEGIN PRIVATE KEY-----
 : (snip)
-----END PRIVATE KEY-----
-----BEGIN CERTIFICATE-----
 : (snip)
-----END CERTIFICATE-----
```
yukicoder contest 284 参戦記

# yukicoder contest 284 参戦記

## [A 1406 Test](https://yukicoder.me/problems/no/1406)

0点から100点までの101パターン、平均点が整数になるかをチェックすればいいだけ.

```python
N, *A = map(int, open(0).read().split())

if N == 1:
    print(101)
    exit()

a = sum(A)
result = 0
for i in range(100 + 1):
    if (i + a) % N == 0:
        result += 1
print(result)
```
【JavaScript】 海外Teck系YouTuberを真似てみた！(part 2) ToDoList App | No Frameworks

#１，はじめに
この記事は、海外Teck系YouTuberの動画を参考に、同じプロジェクトを作成してみたものになります！

簡単にですが、動画を通して学べた技術や知識をまとめました！

➡**[partⅠ](https://qiita.com/iwasaki-hub/items/350f83aa2e0d5a6dfd72)**では、**JavaScript**で**BookList**を作成しています:book:
今回の完成品は、下記に載せています:bangbang:


#２，学んだこと
ゴール:triangular_flag_on_post:が見えているので、**完成させたい意欲**で一気に進めてしまいますね:v:
前回の**[BookList](https://qiita.com/iwasaki-hub/items/350f83aa2e0d5a6dfd72)**との共通するソースコードが登場したときには、こういった場面ではこう書けばいいんだと記憶に定着するし、作品を見直せばすぐ応用がきくのでいろいろとメリットがたくさんあります:blush:

ぜひ、ハンズオンでトライしてみてください:star:

今回は、新たに
>①　**DOMContentLoaded**　がドキュメントを起動したときに読み込まれる
②　**e.preventDefault();**　を記述する理由
③　**JavaScriptでhtmlを生成**する方法
④　**e.target();**
⑤　**localStorage**の保存と削除方法
⑥　**JSON.stringify();**

を学ぶことができました！
localStorageに保存する場合は、JSON形式で保存することが大きな収穫でした:blush:

完成品では、localStorageの様子も見れるので下記にその動画を載せておきます:star:

#３，参考動画
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/Ttf3CEsEwMQ/0.jpg)](http://www.youtube.com/watch?v=Ttf3CEsEwMQ)

https://youtu.be/Ttf3CEsEwMQ

#４，完成:tada:
localStorageの様子も見れるようにしました:star:

![2021-02-26_23h31_01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/f7106f0e-0f05-b1e0-0dba-73d0754ae24a.gif)

#４，次回は、
[React](https://qiita.com/iwasaki-hub/items/d2b350183fca9b2dde58)を使った、プロジェクトにトライしてみます:bangbang:
with 構文で使っているメソッドをmockする

# with構文で使っているメソッドをmockしたい

Unittest を書いていて with でリソースを取得している箇所のmockをすることを考えました。
以下のように書けばmockができるので、参考にしてください。

## withが使えるということは？

withが使えるということは、以下のようなメソッドがクラスに定義されていて、
withの開始、終了でそれぞれのメソッドが呼ばれます

```python
class someClass:

    # with の開始で呼ばれる
    def __enter__(self):
        return self

    # with の終了で呼ばれる
    def __exit__(self, exception_type, exception_value, traceback):
        pass
```

## Unittest を書いてみる

以下のようなソースのUnittestを書こうと思いました。
`tempfile.TemporaryDirectory()`をｍｏｃｋして`tmp_dir_name`固定の値にしたい

* テストするソース

```python
class processFile():
   def process(self):
        tempfile.TemporaryDirectory() as tmp_dir_name:
            # テンポラリのディレクトリでなにか処理
```

* テスト

```python
    @mock.patch("tempfile.TemporaryDirectory")
    def test_process_temp_dir_test(self, mock_TemporaryDirectory):

        proess_file = processFile()

        mock_TemporaryDirectory.return_value.__enter__.return_value = "/tmp"
```

こんな感じに書いてあげると、`tmp_dir_name` を `/tmp` に固定できます。
[Drupal] 条件によってノードのフォームモードを切り替える


```php

/**
 * Implements hook_entity_form_display_alter().
 */
function MY_MODULE_entity_form_display_alter(EntityFormDisplayInterface &$form_display, $context) {
  if ($context['entity_type'] == 'node'
   && $context['entity_type'] == 'MY_BUNDLE',
   && 条件) {
    $storage = \Drupal::service('entity_type.manager')
        ->getStorage('entity_form_display');
    $form_display = $storage->load("node.MY_BUNDLE.MY_FORM_MODE");
  } 
}
```
`MY_FORM_MODE`の部分はフォームモードのIDが入ります。
window.nameに関して

vscodeでファイルを開き、thisの挙動を調べるためにあえてwindow.nameを変更した。

問題なのはコメントアウトしても、window.nameの値は残り続けたこと。

これの解決方法は単純で、一旦vscodeを再起動させる。
これに限る。
create-next-app --example with-reduxを使った際の各ファイルの相関図 

初投稿。

ど素人非エンジニアがNext.js、Reduxを学ぶ中で、
create-next-app --sample with-reduxが非常に便利なので、これを用いて勉強中です。
プロジェクト内に生成される各ファイルの関係性について自分の理解を深めるために、手元メモを備忘録として作ったので、自分のために参考メモとして残しておきたいと思います。

#create-next-appしてみる。
Next.jsとreduxを使う場合

```
npx create-next-app --example with-redux [project_name]
```


#フォルダ構成はこんな感じ
![スクリーンショット 2021-02-26 23.28.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627012/5a6363bb-ffa6-2776-a0c6-aaf8e4ea4c87.png)

#各ファイルの関係性
拙い自分の理解です・・・
細かい部分など省いていますし、間違いなどが多々あるかもしれないです。
![スクリーンショット 2021-02-26 23.32.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627012/f73292b2-b0ee-0ae1-2c0f-84cf1fe46244.png)