OmniAICreator/Qiita-1.07M huggingface dataset:
【SwiftUI】NavigationViewの基本的な使い方(後編)

前編に引き続きNavigationViewの解説をしていきます。

前回はこちら↓

https://qiita.com/masayoshi0327/items/d4696f4f1e48a5e05137

# navigationTitleモディファイア

NavigationViewにタイトルをつけることができるモディファイア。

公式リファレンス↓

https://developer.apple.com/documentation/swiftui/transformedshape/navigationtitle(_:)-38t1n

# 実際の動作

- navigationTitleをつけない場合
![スクリーンショット 2021-02-27 19.09.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1130636/eb1335c4-13b9-088d-5a75-ea2d11933bf9.png)

- navigationTitleをつけた場合
![スクリーンショット 2021-02-27 19.09.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1130636/a84c50e0-10d3-ec4b-66ac-29cdc9b0dae6.png)

一つ目と二つ目のソースコードの差は__navigationTitleをつけたかどうか__だけです。
実際のソースコードを見てみましょう。

# ソースコード

https://github.com/masayoshi0327/NavigationView

```Swift:ContentView.swift
import SwiftUI

struct ContentView: View {
    
    let regions = ["カントー地方", "ジョウト地方", "ホウエン地方", "シンオウ地方"]
    
    var body: some View {
        VStack{
            // ここから
            HStack{
                Spacer()
                Button(action: {}, label: {
                    Text("ヘルプ")
                })
            }
            .padding(.horizontal)
            // ここまではNavigationViewに含まれない
            
            NavigationView {
                List(0..<4) { n in
                    NavigationLink(regions[n], destination: Region(id: n, regionName: regions[n]))
                }
                .navigationTitle("そらをとぶ") //ここでタイトルをつけている
            }
        }
    }
}
```

　```.navigationTitle```というコードのみで、フォントの大きさや太さをタイトルっぽくしてくれます。

navigaitonTitleには次のような機能もあります。

# 「もどる」ボタンの名前になる

最初の画面からどれかリンクをタップしてみます。
![スクリーンショット 2021-02-27 19.09.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1130636/60eb5da6-94b1-627e-41e5-0a3fbf8bd3b5.png)

すると、、、
![スクリーンショット 2021-02-27 20.20.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1130636/ae85b021-a189-8455-45ce-c7fea8ef468e.png)

このように、__前の画面にもどるためのボタンの名前__として、navigationTitleがそのまま使われます。

また、画面遷移のときにアニメーションも自動でつけてくれます。（動画参照）

<iframe width="560" height="315" src="https://www.youtube.com/embed/57ae8IfOBsU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# navigationTitleはどこに書く？

よくある間違い（主に私が）として、次のように書くパターンがあります。

```Swift:ContentView.swift
            NavigationView {
                List(0..<4) { n in
                    NavigationLink(regions[n], destination: Region(id: n, regionName: regions[n]))
                }
//                .navigationTitle("そらをとぶ") //本来はここに書く
            }
            .navigationTitle("そらをとぶ") //NavigationViewの外側に書いている
```

このように書くと、エラーにはなりませんがタイトルは表示されなくなります。

navigationTitleはそもそも、ひとつの画面のタイトルでしかないため、遷移先には引き継がれません。各画面でnavigationTitleをつけることになります。

よって、__navigationTitleはNavigationViewの内側に書くものだ__と認識すると良いでしょう。

# 参考文献

https://www.amazon.co.jp/SwiftUI-%E5%BE%B9%E5%BA%95%E5%85%A5%E9%96%80-%E9%87%91%E7%94%B0-%E6%B5%A9%E6%98%8E/dp/4815604061/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=SwiftUI+%E5%BE%B9%E5%BA%95%E5%85%A5%E9%96%80&qid=1614007741&sr=8-1
SVG に background-size: 100% 100%; が適用されない時の解決方法

## 現象

`SVG` を背景画像に指定し、縦と横を100%にしたが反映されない…:weary:

```CSS:css
.hoge {
  backgournd: url(image.svg);
  background-size: 100% 100%;
}
```

## 原因

`CSS` でサイズを自由に変えても `SVG` はアスペクト比を維持したままでいるため。

## 解決方法

`SVG` の `preserveAspectRatio` というアスペクト比に関する属性に `none` を設定する。

```:SVG
<svg preserveAspectRatio="none"></svg>
```

これで縦と横100%に表示されました:blush:
AtCoder Beginner Contest 174 C問題

AtCoderを始めましたが、ABCのA・B問題はほぼ解ける、C問題は運が良ければ解けるというレベルです。
まずはC問題を難なく解けるというの目標に、まずは過去問のC問題までをどんどんやっていってます。

自力では解けなかった問題を、解説を見て、理解した内容の整理とその結果のコードを書いていきたいと思います。

#問題

https://atcoder.jp/contests/abc174/tasks/abc174_c

>高橋君は K の倍数と 7 が好きです。
>7,77,777,… という数列の中に初めて K の倍数が登場するのは何項目ですか？
>存在しない場合は代わりに -1 を出力してください。</quote>

#解けなかった原因
ループで末尾に７を追加して1桁増やしながら、Kで割れたら桁数を出力して終了させればいいかと思ったが、
以下がわからず行き詰まる。
<ol>
<li>存在しない場合の判定方法がわからない。
どこまで7を追加したらもう割り切れる数値が存在しないと判断できるのか
</li>
<li>桁数がどんどん増えていった結果、例えばサンプル3だと10<sup>999982</sup>の桁数の数値をKで割ることになるのは、やめた方がいいのはわかるけど、
じゃあどうすればいいのか
</li>
</ol>

#解説を見て理解した内容
7が1桁増えるということ

・数値*10＋7
　7 → 77&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 7 * 10 + 7
　77 → 777&nbsp;&nbsp;= 77 * 10 + 7
　777→7777 = 777 * 10 + 7

・Kで割った余りも 余り*10＋7
　K=9
　　7 % K&nbsp;&nbsp;= 7
　　77 % K = 5
　　→ (7 * 10 + 7) % K = 5
　　
　　777 % K = 3
　　→ (5 * 10 + 7) % K = 3

・余りの数の法則性
　同じ余りのパターンをぐるぐる回り、1順は最大K回
　K = 6
　7 % K&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 1
　77 % K&nbsp;&nbsp;&nbsp;&nbsp;= 5
　777 % K&nbsp;&nbsp;&nbsp;= 3
　7777 % K&nbsp;&nbsp;= 1
　77777 % K = 5

#ACしたコード
```python
K = int(input().strip())

a = 7
for i in range(K) :
    b = a%K
    if b == 0 :
        print(i+1)
        exit()

    a = b*10+7
print(-1)
```
Visual Studio Codeのダウンロードと拡張機能

Visual Studio Codeのダウンロード方法と現在利用している拡張機能を忘れないためにメモとして記事にします。

## ダウンロード

[ダウンロードページ](https://code.visualstudio.com/)

上記のページからダウンロードします。


## 拡張機能の入れ方

![スクリーンショット 2021-02-27 19.43.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/91655566-c190-d2bb-da07-bdbb90408805.png)

1. Visual Studio Codeを開きます。
2. 上記の画像の①のマークを押します。
3. 上記の画像の②の検索バーに拡張したい機能の名前を入れると検索できます。
4. 上記の画像の③のところに「インストール」もしくは「アンインストール」とあるのでインストールできます。アンインストールとなっていれば既に機能を導入済みです。


## 日本語

`apanese Language Pack for Visual Studio Code`というものです。

検索バーに入力してインストールしましょう。
日本語の表記に変更されます。


## HTMLとCSSの入力保管機能

`HTML Snippets`というものです。
この機能を入れることでHTMLやCSSの入力保管をしてくれるので作業効率が上がります。


## Rubyの構文チェック

`Ruby`というものです。
私はRubyをよく使うので間違いがあった場合に指摘してくれます。


## 全角チェック

`zenkaku`というものです。
スペースの間違いでエラーや予期せぬ動きになってしまうことありますよね。
この拡張機能を入れておけば全角で入力してしまった場合、薄くグレーになるのでわかりやすくなります。

`zenkaku`はインストールだけでは使えないので下記の手順を踏みます。

1. `command + shift + p`の3つのキーを同時入力し、コマンドパレットという設定ファイルの検索画面を開きます。
2. `Enable zenkaku`と入力して選択します。
3. `command + Q`の同時押しでVSCodeを終了します。
4. finderでホームディレクトリを開くきます。
5. `command + shift + .`で隠しディレクトリを表示します。
6. `.vscode → extensions → mosapride.zenkaku-0.0.3`と移動します。
7. `extension.js`を右クリックでメニューを表示します。
8. `このアプリケーションを開く`から`テキストエディット`を選択します。
9. `var enabled = false;`を`var enabled = true;`に変更して`command + S`で保存します。


## スペルチェック

`Code Spell Checker`というものです。
スペルミスの可能性がある場合教えてくれます。


## 設定をカスタマイズ

①拡張機能ではないですが、半角スペースのカスタマイズをした方が効率的なので変更します。この設定をすればtabキーを1回押したら半角スペース2つ分になるので、単純にキー1回分効率化できます。

![スクリーンショット 2021-02-27 20.12.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/68f4ea8a-02e1-6303-ab6a-f9b016fdb263.png)

上記の画像のように左下の歯車マークを押します。

![スクリーンショット 2021-02-27 20.13.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/20309af7-28ec-a392-74f8-52bc9f819f17.png)

上記の画像のように`設定`を押します。

![スクリーンショット 2021-02-27 20.17.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/c7e67100-ac6b-ef51-9ce8-e5a5a0fb96e5.png)

上記の画像のように`Editor: Tab Size`を`２`に設定し、`Editor: Render Whitespace`で`all`を選択します。


②次にオートセーブ機能をつけます。通常は`command + s`で上書き保存できますが、オートセーブ機能をつけておけば、VSCode以外の画面に移動しただけで保存してくれます。

![スクリーンショット 2021-02-27 20.15.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/c916f6cc-940b-0d9e-7e29-99fcc1879b56.png)

上記の画像のように`Auto Save`を`onFocusChange`を選択します。


私が使っている機能は以上です。
順次追記していきます。
急にヘッダーファイルが見つからないと怒られた話

#概要
ある日、vscodeを立ち上げてcppファイルを開いてみると↓のような状態になっていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570491/1c95fa87-625f-4d54-d2f6-bdd7688e07ed.png)
なんかめっちゃ怒られてるんだが…( ;∀;)

これを元通りに直すのに結構時間がかかってしまったので、もし誰かが僕と同じ原因でこのような状態になってしまったときの助けになればと思い、記事を書くことにしました。
自分はそこまでPCに強いわけではないので、扱いになれている方から見ると「何やってんだこいつ」と思われるかもしれませんが、ご容赦ください<(_ _)>
#最初に試したこと
特に設定をいじった記憶もないのですが、こういう場合は**インクルードパス**（コンパイラが、コード中の #include で指定しているファイルを探すパス）に問題があることが多いと聞いたことがあったのでとりあえず見てみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570491/00745ee4-02ae-9817-123f-f3798608baaf.png)
今までこれで動いていたわけですし、特におかしなスクリプトが追記されている様子も見受けられません。
エラーログには「not found」、つまり「見つからないよ～」と書かれていたので、今までこのパスの位置にあったファイルがどこかへ移動してしまったということでしょうか？
ネットを漁ると、「includePath」の部分に「"/usr/include"」や「"/usr/local/include"」を追記している方が何人かおられたので、そちらを真似してみますが特に変化なし。
何もわからないので次の手段に移ります。
#2番目に試したこと
すばり、**シャットダウン！！！！**
困ったらこれですよね～。今まで動いていたものが急に動かなくなったんだから、PCの不具合は疑いたくなってしまうものです。正直望み薄な気はしていましたが、やっておくべきことではあるのでシャットダウンします。

………はい、直りませんでした。というわけで次の手段です。
#3番目に試したこと
「.vscode」フォルダーの消去です。まるっきし消去してしまって1から書き直せば何か変わるかも…と思って行いました。
正直これでだめだったら、アプリも消して開発環境を再構築するつもりでしたが、幸いにもファイルを作成している最中に問題点が見つかります。それは「c_cpp_properties.json」ファイルを作成しようとしたときのことです。
「shift」＋「ctrl」＋「p」から「構成の編集」を選択したところ、「c_cpp_properties.json」ファイルは生成されず、↓のようなポップが画面の右下に現れました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570491/c81d43b3-b69e-13f2-2029-ad19802168fe.png)

(　ﾟдﾟ)なんですと……？そんな設定した覚えないよ……？
なにがなんだかよくわからないまま、ユーザー設定から「intelliSenseEngine」と検索してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570491/bba59828-b8b0-496a-1317-f96c6087eb6c.png)
なるほど、確かに「Disabled」になっていますね。説明文にもありますが、この状態だと言語サービスの機能がオフになってしまうようです。早速「Default」に設定し直そうと試みますが……
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570491/f4e78c91-439f-0a79-fb5d-ab7e8b8a22f5.png)

なにやら警告が出てきて、「Default」に戻すことができません（正確には戻してもすぐ「Disabled」に切り替わってしまいました）。めげずに警告のメッセージを読んでみると「clangd」という別の拡張機能が有効になっているせいで、ここが強制的に「Disabled」になってしまうようです。
当該の拡張機能を無効化し、「Default」に設定、vscodeを再起動すると…「c_cpp_properties.json」ファイルが生成できました！！！
あとは元通りに設定し直すと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570491/e4fff01c-82e1-baa6-5b7b-d611596b29d2.png)
やったーーー！！！！直った！！！！！！
#必要な手順まとめ
今回の場合、「clangd」という拡張機能が有効になってたことにより、言語サービスの機能がオフになってしまったことが原因となり、最初のようなエラーログが出ていました。
これを直すには、
1．「clangd」の無効化
2．言語サービスの機能を有効化
3．vscodeの再起動
という流れでできます。

何か気になることがあれば、コメントの方で教えていただければ対応するので、よろしくお願いします。
#余談
さて、今回問題になった「clangd」という拡張機能ですが、実は自分でインストールした記憶がありません…w
vscodeって（これは僕の設定の問題かもしれませんが）おすすめの拡張機能みたいなのをポップ出して教えてくれますよね。
あれ邪魔なんで出てくるたびに消してたんですが、おそらくその作業の中で間違えてインストールのところをクリックしてしまったのだと思います。
エラーログ見たときはだいぶ焦りましたが、いい勉強になりましたw

この記事が、同じように困っている方々の助けになれば嬉しいです。最後まで読んでいただきありがとうございました<(_ _)>
1台のサーバでサブドメインを使い複数サービスを動かす方法【バーチャルホスト】

さくらのVPSにブログやwebアプリなどのサービスを複数運用させたかったので、調べたらバーチャルホストという方法がありました。

独自ドメインに文字列を追加することで、サブドメインとしてホスト名を増やせるようです。
イメージはこんな感じかな？　間違っていたらコメントください。

![Untitled Diagram (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679892/3baf0e62-d705-0427-9e69-a93ba4a4add3.jpeg)

サブドメインを使ってバーチャルホストする場合のメリット・デメリットは以下の通りです。

### メリット
- 独自ドメインを新たに作成しなくていいので、費用がかからない
- URLを同じにできる
    - (例)https://sub1.xxx.com/test
    - (例)https://sub2.xxx.com/test
- Nginx設定のlocationで悩まない

### デメリット
- ホスト名を完全に別にすることはできない
    - (例)https://test1.com
    - (例)https://test2.com

※サブドメインではなく、マルチドメインの場合は可能

- アクセスが集中すると全てのサービスでパフォーマンスが落ちる

## サブドメインを使ったバーチャルホストが向いているケース
- 小規模のサービスを複数稼働させる場合
- 1つのサービスにそれほどアクセスはない
- できるだけお金はかけたくない

自分にちょうど良さげだったので、サービスごとにサブドメインを使いバーチャルホストを作成しました。
その方法をシェアというかメモというか記事にしたいと思います。


## 実現したいこと
- サブドメインを使うことで、複数サービスを同じサーバー上で動かす

## 作業環境
- OS
    - CentOS7
- webサーバー
    - Nginx

## 参考サイト
- [[sakura vps] さくらのvps（nginx）でサブドメインを設定する](https://qiita.com/nadonado/items/976a5b13166e81678558)
- [【nginx】一つのサーバーで複数のサービスを運用するには](https://tech.camph.net/%E3%80%90nginx%E3%80%91%E4%B8%80%E3%81%A4%E3%81%AE%E3%82%B5%E3%83%BC%E3%83%90%E3%81%A7%E8%A4%87%E6%95%B0%E3%81%AE%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E9%81%8B%E7%94%A8%E3%81%99%E3%82%8B/)


## 手順
1. さくらのVPSにサブドメインを登録
2. Nginxの設定を変更
3. ブラウザからアクセスして表示を確認

### 1.さくらのVPSにサブドメインを登録
サブドメインの登録は参考サイトの通りにやれば簡単にできます。
[[sakura vps] さくらのvps（nginx）でサブドメインを設定する](https://qiita.com/nadonado/items/976a5b13166e81678558)

作成してから1時間くらい待たないと反映されないので、作業の前に作っておくといいです。

### 2.Nginxの設定を変更
まずはターミナルで/etc/nginx/conf.d/に移動

```
cd /etc/nginx/conf.d/
```

分かりやすいように、サービス名ごとにconfファイルを作成
touchでファイル作ってもいいですが、viで編集するのでvi [サービス名.conf]とかでいいかも

```
vi サービス名.conf
```

nginxの設定を書いていきます。

```サービス名.conf
server {
        listen 80;
        server_name sub1.xxx.com;
        location / {
            index index.html;
            root /usr/share/nginx/html;
        }
    }
```

#### 解説
- server_nameには先ほど作成したサブドメインと独自ドメインをドットでつなげたものを記入
- 後は通常のNginx設定と同じ
- これを動かしたいサービスごとに作成します。

書き終えたら:wqで保存して終了
Nginxを再起動して設定を反映させます

```
systemctl restart nginx
```

### 3.ブラウザからアクセスして表示を確認

実際にブラウザからアクセスしてサブドメインごとに設定したページが表示されれば完了です。

## 参考サイト
- [[sakura vps] さくらのvps（nginx）でサブドメインを設定する](https://qiita.com/nadonado/items/976a5b13166e81678558)
- [【nginx】一つのサーバーで複数のサービスを運用するには](https://tech.camph.net/%E3%80%90nginx%E3%80%91%E4%B8%80%E3%81%A4%E3%81%AE%E3%82%B5%E3%83%BC%E3%83%90%E3%81%A7%E8%A4%87%E6%95%B0%E3%81%AE%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E9%81%8B%E7%94%A8%E3%81%99%E3%82%8B/)

## 次の目標
- <font color="Red">**済**</font> サブドメインのhttps化

Let's Encryptでhttps化しているなら以下のコマンドだけでhttps化が完了します。
```
certbot --nginx
```
[Python] World Bankのdatasetから世界各国の人口データをdataframeにて入手する

時々、世界各国の人口データを使いたいときがあったのですが、Wikipediaなどからエクセルにコピーして読み込まないといけませんでした。

しかし、最近、World bankより人口を含んだデータセットが提供されていることが分かり、データフレームとして簡単に取り込むことができたので、自分の忘備録として記録に残します。
なお、私はWindows10でJupyterNotebookにてPythonを利用しています。
まず、pipでインストールします。
```python
pip install world_bank_data --upgrade
```
次に、こちらのコードを実行します。

```python
import pandas as pd
import world_bank_data as wb
pd.set_option('display.max_rows', 20)
# Same data set, indexed with the country code
population = wb.get_series('SP.POP.TOTL', id_or_value='id', simplify_index=True, mrv=1)
countries = wb.get_countries()
# Aggregate region, country and population
df = countries[['region', 'name']].rename(columns={'name': 'country'}).loc[countries.region != 'Aggregates']
df['population'] = population
df['population'] =df['population'].fillna(0).astype(int) #浮動小数点n表示になるのでintに変換
df['population_Oku'] = population/100000000
df.sort_values('population', ascending = False).head(5)
```
Pandasで読み込むと・・
![スクリーンショット 2022-06-20 181608.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/823476/d554f65a-654d-85b0-21a5-a00b63746755.png)
そうすると、このようなに世界の人口Top5を表示できます。
![{F83522EE-032B-4A32-8F75-397FE81B3A8C}.png.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/823476/bc149bd5-2d8f-c7df-0f30-22ee778c3168.jpeg)
アジアの人口トップ10も出してみました。
ここで、次のようにします。
```python
df[df['region'].str.contains("East Asia")].sort_values('population', ascending = False).head(10)
```
![{3C777963-946B-40E2-BD22-AA96706F9C1A}.png.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/823476/4f9cf573-7eaf-d788-eb66-839ae4890465.jpeg)
こちらの英語のサイトを参考にしています。
ページの一番下のplottyで作ってあるチャートはなかなかいいなと思いました。
https://nbviewer.jupyter.org/github/mwouts/world_bank_data/blob/master/examples/A%20sunburst%20plot%20of%20the%20world%20population.ipynb
【ExcelVBA】xls拡張子でExcelを保存する場合のメモ



###トピックについて
マクロを使って新しいドキュメントを作成する際に、テンプレートとなるファイルの拡張子が「.xls」だったため、新しいドキュメントも同様の「.xls」で出力することにした。

その際、以下２点の問題を解消した方法についてのメモ
①新しく作成したドキュメントを開こうとすると「ファイルと拡張子が一致しません。」とエラーメッセージが表示される。
②新しく作成したドキュメントをマクロの中で自動で閉じようとした場合に、」Microsoft Excel互換性チェック」のダイアログが毎回表示される。


###①「.xls]拡張子のファイルはできるが、開く際にエラーダイアログが表示される件
→`.SaveAs`コマンドの引数に`FileFormat:=xlExcel8`を追加することで、保存時に『このファイルは.xlsのファイルですよ』と指定しているので、「ファイルと拡張子が一致しません。」エラーを解消できる。

####ソースコード
```vb
Dim wb as workbook
Dim fullPath as String

fullPath = "ファイルの拡張子まで含むフルパス"

wb.SaveAs fileName:= fullPath _
            , FileFormat:=xlExcel8
```

###②「.xls」ファイルを保存して閉じる場合に互換性チェックのダイアログが表示される件
→`Application.DisplayAlerts`を`Flase`にすることで解消できる。
　`False`にすることで、ダイアログアラート一式を表示しないようにできる。
　処理が終わった後に`True`に戻すのを忘れないようにすること。

####ソースコード
```vb

Dim wb as workbook

・・・省略・・・

'保存/閉じる/初期化
Application.DisplayAlerts = False
wb.Save
wb.Close
Set wb = Nothing
Application.DisplayAlerts = True
```
画像のサイズを変更しようとすると画像が縦長・横長になってしまう時の対処法（カンプ）

#画像のサイズを変更しようとしたら画像の比率がおかしくなった![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1153703/57f073a7-f6f3-4cdd-1476-213e533ac36b.png)
比率を保ったままサイズを変更したいのに、なぜか横幅も縦幅もなぜか調節されてしまいます。

#原因
![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1153703/0aa5b2df-e1ee-22f7-bb25-d89dd4b31971.png)
原因はこの鍵のロックが外されていたからでした。
ロックをかければ横幅・縦幅の比率を崩さずに移動・サイズ変更できます。
[自分メモ]複数レコードを配列にして一括でattach()

#目的
中間テーブルを利用して複数レコードを一気に登録する場合、`attach($配列)`のような形で登録することができます。
attach()の引数は`primary key`なので、$primaryKeyの配列を作らなければなりません。


#やり方
```controller.php
$tagIds = array(); 
foreach ($request->tag as $val) {
  $tagIds[] = Tag::select('tag_id')->where('tag_name', $val)
              ->first()->tag_id;
}
$post->tags()->attach($tagIds);
```
複数のGItHubアカウントを一つのPC(gitbash)で扱う方法

# 前提条件
* 既にメインのGitHubを持っていて、gitbashと連携している
* 新しいGitHubアカウントがすでにある(ない場合は作成してから)
* 既にあるGItHubアカウントをGit-old、新しいGItHubアカウントをGit-newと呼ぶことにする

# ファイルの確認
　1.Git-oldで使っているssh鍵の場所の確認

```terminal:gitbash
$ cd ~/.ssh
$ ls -l
id_rsa  id_rsa.pub  => Git-oldのssh鍵
```
　2.Git-newのssh鍵を作成するフォルダ(フォルダ名を任意にaaaに入れて使用)の作成

```terminal:gitbash
$ mkdir ~/.ssh/aaa
```

# Git-newのssh鍵を作成
```terminal:gitbash
$ ssh-keygen -t rsa -b 4096 -C {Githubメールアドレス} -f ~/.shh/xxx/id_rsa
```
### 鍵の確認
```terminal:gitbash
$ ls ~/.ssh/aaa/
id_rsa  id_rsa.pub  => Git-newのssh鍵
```

# 作成したssh鍵をGItHubに登録
```terminal:gitbash
$ clip < ~/.ssh/aaa/id_rsa.pub
```
コピーしたものをGItHubのssh kyesに貼りつけ登録


# ~/.ssh/configを作成
configファイルがなかったら作成

```terminal:gitbash
$ touch ~/.ssh/config
```
configファイルを編集

```text:~/.ssh/config
Host github.com-old
  HostName github.com
  User git
  Port 22
  IdentityFile ~/.ssh/id_rsa
  TCPKeepAlive yes
  IdentitiesOnly yes
Host github.com-new
  HostName github.com
  User git
  Port 22
  IdentityFile ~/.ssh/aaa/id_rsa
  TCPKeepAlive yes
  IdentitiesOnly yes
```
Hostの部分は自由に変えてください。あとで使います。

# sshの接続確認
```terminal:gitbash
$ ssh -T git@{configファイルのHostの部分}
Hi {GitHubの名前}! You've successfully authenticated, but GitHub does not provide shell access. => 成功
```

# Git-newにpushする方法
### pushしたいディレクトリで行うこと
```terminal:gitbash
$ git init

$ git remote add origin git@{configファイルのHostの部分}:{GitHubの名前}/{リモートリポジトリの名前}.git

$ git add -A && git commit -m "xxx" && git push origin master
```
【laravel】新規プロジェクトの作成や初期設定について

# 概要
久々に新規プロジェクトを作成しようと思ったらコマンドと手順がすんなり思い出せなかったため記事にします。
たまにしかやらなん作業はほんますぐ忘れる。
極論ですが、初期設定が済んだファイルを用意してコピペで使い回してもいいんちゃう？と考えてます。

# 新規プロジェクトの作成
2通りのコマンドがあります。
※ ここではプロジェクト名をsrcとします。

## バージョンを指定せずに作成
一回しかやったことなくて詳細は覚えてなません。

```
laravel new src
```

## バージョンを指定して作成
いつもこれなのでコピペで作れたらいいかなと考えています。

```
composer create-project --prefer-dist laravel/laravel src "6.*"
```

# 初期設定
## タイムゾーンの変更

```php:config/app.php
'timezone' => 'UTC',
#UTCをAsia/Tokyoに変更
'timezone' => 'Asia/Tokyo',
```

## 言語の変更
localとfallback_localeの2箇所で設定がありますが、fallback_localeは該当言語が見つからない場合の言語なのでenのままにしておきます。
また、`resources\lang`にjaの設定が保存されているフォルダとja.jsonファイルが必要になります。
ja.jsonは多言語'{{ _('...') }}'記述の訳になるので使用しない場合は不要です。
GitHubの[Laravel-Lang/lang](https://github.com/Laravel-Lang/lang)にソースがあります。


```php:config/app.php
'locale' => 'en',
#enをjaに変更
'locale' => 'ja',
```

# 遷移先の変更
デフォルトの設定で書きますが、ここはコントローラーからの変更なので使い方次第にはなります。


## 新規登録後の遷移先 
RegisterController.phpから編集します。

```php:RegisterController.php
protected $redirectTo = '/home';
```

## ログイン後の遷移先
loginController.phpから編集します

```php:loginController.php
protected $redirectTo = '/home';
```

# データベースの設定
ここは使い回しができないので新規プロジェクト毎に変更します。
以前にsqluiteの設定を記事にしたので今回はMysqlの設定を書きます。
[【laravel】データベースの設定（SQLiteの例）](https://qiita.com/gone0021/items/106b176012439841a3d9)
とは言っても初期設定がMysqlなので変更するのは`.env`ファイルだけです。
以下の部分に該当する変更箇所を書き換えればOKです。

```:.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
```

動作についてはmigrateコマンドでテーブルが作成されたかで確認します。

```:コマンド
php artisan migrate
```


# フロントエンドパッケージとauth機能
bootstrap、vue.js、reactがインストールできる。

## パッケージでまとめてインストールする場合
bootstrapとvue.jsをまとめてインストールできる。
この時バージョンの指定がないとエラーになる。
laravel6.xはlaravel/uiの1.xが対応しているらしい。

```:コマンド
composer require laravel/ui "1.*"
```

また、以下のコマンドを入力することで、

## 個別にインストールする場合
個別にインストールする場合は引数に--authを指定することで，ログイン／ユーザー登録スカフォールド(auth関連ファイル)を生成します。
コマンドは次項に記載します。

```:コマンド
// 異本的なファイルを生成
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
```

## auth関連のファイルを生成
インストールしたフロントエンドパッケージに合わせて生成します。
laravel/uiでインストールした場合はvueだけでOKです。

```:コマンド
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth
```

# npmのインストールと実行
フロントエンド開発に必要な依存パッケージです。
Nodeのダウンロードとインストールが必要です。
[node.js](https://nodejs.org/ja/)

```:コマンド
npm install && npm run dev
```

```:補足
npm run dev ・・開発用にビルド
npm run watch ・・常時ビルド
npm run prod ・・本番用にビルド
```

# 参考

[イントロダクション](https://readouble.com/laravel/6.x/ja/frontend.html)
[Laravel 6.x JavaScriptとCSSスカフォールド](https://readouble.com/laravel/6.x/ja/frontend.html)
[GitHub：Laravel-Lang/lang](https://github.com/Laravel-Lang/lang)
銀行振込を忘れないためのwebアプリ

#はじめに
今はもう使われていない振込券をベースに作りました。
![localhost_3000_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784464/bfb40f13-7514-dade-589b-320050a11d34.png)
#なぜ作ったか
- 実家の会社で振込忘れや伝達ミスなどが多発していた
- 督促状が届き面倒な手続きに時間を取られることが多かった
- そんな状態を改善・解決できるのではないかと思った

#開発環境
- 言語
    - ruby 
- フレームワーク
    - rails
- データベース
    - mysql
- その他
    - https://bank.teraren.com/
    - 銀行名、支店名を入力する際に上記のAPIを利用させていただきました
  
#基本機能
- 振込チケットの管理
未払いの振込チケットを振込期日順に閲覧することができます。
また、見た目で分かりやすいように、いわゆるメガバンクはロゴの色に合わせてチケットの色を変えています。
![localhost_3000_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784464/bfb40f13-7514-dade-589b-320050a11d34.png)

- 振込チケットの作成
チケットの作成の際には、"https://bank.teraren.com/"
上記の銀行名、支店名を取得できるAPIを利用させていただき、自動で候補を取得し選択できるようにしました。
![ticket_output](https://user-images.githubusercontent.com/67573996/109382225-8f99c380-7922-11eb-89f8-6e5fe40f806a.gif)
- 振込チケットの振込完了報告
振込済みのチケットは別画面で閲覧できます。
![transfer](https://user-images.githubusercontent.com/67573996/109385052-51a59b00-7934-11eb-914a-d7643a4b0e28.gif)
- スマホ画面
![transfer_smart2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784464/30433734-96ca-2675-f3f3-2cf24570e060.gif)

#検討している追加機能・改善点
- 期日が近づいた際のwebプッシュ通知
- 管理者権限の有無で使える機能の制限
Railsで大量のデータを更新する際はin_batchesを使おう

Ruby on Railsのプロジェクトで、大量のデータを更新しようとしたらメモリ不足でエラーとなったため、解決方法をメモ。

こんな感じで、データを更新しようとしていました。

```ruby
Hoge.all.map do |hoge|
  hoge.update(fuga: hoge.foo)
end
```

しかしデータが数十万件あり、メモリ不足で余裕で落ちました。

そんなときは [in_batches](https://railsdoc.com/page/in_batches)を使いましょう。
デフォルトでは1000件ずつ読み込んで処理してくれます。

```ruby
Hoge.in_batches do |hoges|
  hoges.map do |hoge|
    hoge.update(fuga: hoge.foo)
  end
end
```

無事解決！
どれくらいの量のデータが扱われるかは、常に意識しないといけないですね。
pecoを使ってgit shashとかcheckoutとかをコンソール上で選択できるようにする

# TO;DR
1. list出力
2. pecoで選択
3. テキトーに編集
4. 必要なコマンドに渡す

これでラクしちゃおうぜ

# 環境
- macOS Mojave 10.14.16
- bash

# 本題

## 経緯

```
$ git stash push -m "xxx"
```

でファイルの一時退避したりすることが増えてきたので、もうちょいラクにapplyとかdropとかできないかな〜と思ってしまったため
(他にもDockerのコンテナ名拾いたい時とかに応用できそう)

## 例

- コマンド

```
$ git stash list | peco | awk -F ':' '{print $1}'  | xargs -IXXX git stash apply XXX'
```

- エイリアス(.bashrc)

```.bashrc
# bashの「'」はエスケープが必要なので「'\'」を入れてる
alias gsa='git stash list | peco | awk -F '\'':'\'' '\''{print $1}'\''  | xargs -IXXX git stash apply XXX'
```
https://qiita.com/akabee-qiita/items/d59ae025556e438f1098

## 解説

```
git stash list
```
- まずはリスト出力しパイプでpecoに渡します

```
peco
```
- 「標準入力から行データを受け、その中から行を選択し、それを標準出力に返す」コマンド
- Homebrewが使えるなら brew install pecoで一発！
    - それ以外のパターンなら調べてね...

- ここまでで「stashのリストから選択して１行の標準出力を得る」まで出来ます

```
awk -F ':' '{print $1}'
```
- awk
    - 受けた１行データをサクッと編集してくれるコマンド

    - 「-F」オプション
        - 区切り文字を指定
        - 今回は"git stash list"の出力が以下の通りで、「:」の直前までがほしいので指定している
            - 例　　stash@{0}: On (ブランチ名): テスト
            - この「stash@{x}」がほしい！

    - {print $1}
        - 区切られた文字列の中から１番目を標準出力に返す

- ここまでで「stashのリストから選択した行の"stash@{x}"の標準出力を得る」まで出来ます

```
xargs -IXXX git stash apply XXX'
```
- xargs
    - コマンドを組み立てます
    - 「-I」オプション
        - 続く文字列(ここではXXX)をコマンドの中で置換します
        - ここにパイプで繋いできた"stash@{x}"の標準出力が入る！

    - git stash apply XXX
        - "XXX"が"stash@{x}"に置換される

- これで「stashのリストから選択した行をapply」ができます！

## おまけ
```.bashrc
#gitにpecoを組み込む
## チェックアウト
alias gc='git branch | peco | xargs git checkout'
## ブランチ削除
alias gbd='git branch | peco | xargs git branch -d'
```
このへんはpecoで選択した行を編集する必要がないのでawk不要でラクですね！
Power BIのインポートデータが更新されない際の対処

##データ管理I/Fで更新します
インポートしたExcelデータが、Power BI上で更新されていないことがあります。
設定で解消できるかもしれませんが、手動更新が可能です。
**「マイワークスペース」→「データセット+データフロー」**で対象のデータを探します。

<img width="500" alt="データ更新1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/44a3c7c4-662e-bd61-7351-bb352659fc4f.png">

マウスオーバーすると、**「今すぐ更新」**できるアイコンが表示されます。

<img width="500" alt="データ更新2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/ed00ece9-9174-8258-6a15-4ade6491af76.png">

**「コンテンツ」**から対象のレポートをクリックします。
画面上部の**「更新」**をクリックすると、グラフが更新されます。

<img width="500" alt="データ更新3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/018dd9d3-37b1-7713-6cee-dcaba645bf6b.png">

昨日までは2月25日までの数値が最新でしたが、今回の更新で2月26日のデータが追加されました。

<img width="700" alt="データ更新4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/4aa208fa-d3e8-4d3b-ac96-93208bf6c3ff.png">

**了**
SQLのEXISTSについて②

今回はEXISTSの「相関副問い合わせ」について説明していきます。

|Code|Name|
|:-----|:-----|
|01|田中|
|02|鈴木|
|03|中村|
|04|山崎|

|Code|Score|
|:-----|:-----|
|01|80|
|02|90|

前回使用したのと同じテーブルを使用します。

```ruby:SQL
SELECT * FROM TABLE1 
WHERE EXISTS (
    SELECT 1 FROM TABLE2 
    WHERE TABLE1.Code = TABLE2.Code)
    AND Name like '%中%';
```

順番としては、カッコの外側のSQLが実行されてから、カッコの内側のSQLが実行されることになります。
つまり、存在判定とは実行される順番が逆になります。
カッコの内側のSQLの中ではカッコの外側のSQLの項目が使用されており、これを行うことで「相関副問い合わせ」となります。
また、上記のSQLを実行した結果は以下の通りになります。

|Code|Name|
|:-----|:-----|
|01|田中|

TABLE2にCodeが存在する、かつNameに「中」が含まれるレコードのみが取得されます。
相関副問い合わせは、意外と使うことになる場面が多いので、覚えておくといろいろ便利かもしれません。
エラーページを表示させる

###HTTPレスポンスのステータスコードとは

クライアントからのリクエストの結果を返す３桁の整数値のことです。
特定のHTTPリクエストが正常に完了したどうかを示します。
通常はリクエストが成功するとステータスコード200を返します。



###ステータスコードの種類の例

403
アクセス権限がないことを示す。

404
リクエスト先が見つからない、またはページが存在していないためにアクセスができないことを示す。「指定されたページは存在しません」などのエラーページが表示されるケース。

500
webサーバーで何かしらのエラーが発生したことを示す。

503
リクエスト先が一時的にアクセス集中やメンテナンスなどで使用できないことを示す。


一時的に、ソースを変更したら再起動しなくてもリロードされるように設定します。
config/environments/production.rb

```
config.cache_classes = false
```


アクションにraiseメソッドを追記してアクセスをすると、強制的に例外の画面が表示されます。
画像はproductionモードでのデフォルトエラー画面です。

![スクリーンショット 2021-02-27 9.10.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698694/03f2810c-7f9e-4148-a287-0e3e6bd0ee6d.png)


ログを出力してみます。

```
tail -f log/production.log
satouyasuyukinoMacBook-Air:kiroku yasuyuki$ tail -f log/production.log
[008ffbf8-ca54-443f-927b-90ddff363516] puma (4.3.7) lib/puma/server.rb:472:in `process_client'
[008ffbf8-ca54-443f-927b-90ddff363516] puma (4.3.7) lib/puma/server.rb:328:in `block in run'
[008ffbf8-ca54-443f-927b-90ddff363516] puma (4.3.7) lib/puma/thread_pool.rb:134:in `block in spawn_thread'
I, [2021-02-27T09:10:05.937895 #32132]  INFO -- : [32b82d69-ef18-4283-87b3-7655b4b244c7] Started GET "/staff" for 127.0.0.1 at 2021-02-27 09:10:05 +0900
I, [2021-02-27T09:10:05.946757 #32132]  INFO -- : [32b82d69-ef18-4283-87b3-7655b4b244c7] Processing by Staff::TopController#index as HTML
I, [2021-02-27T09:10:05.951715 #32132]  INFO -- : [32b82d69-ef18-4283-87b3-7655b4b244c7] Completed 500 Internal Server Error in 5ms (Allocations: 399)
F, [2021-02-27T09:10:05.952131 #32132] FATAL -- : [32b82d69-ef18-4283-87b3-7655b4b244c7]   
[32b82d69-ef18-4283-87b3-7655b4b244c7] RuntimeError ():
[32b82d69-ef18-4283-87b3-7655b4b244c7]   
[32b82d69-ef18-4283-87b3-7655b4b244c7] app/controllers/staff/top_controller.rb:3:in `index'

```

###このエラー画面を任意の画面にカスタマイズします。

app/controllers/application_controller.rb

```
 rescue_from StandardError, with: :rescue500


  private def rescue500(e)
    render "errors/internal_server_error", status: 500
  end

```

StandardErrorエラーが発生したら、rescue500のプライベートメソッドの処理が実行されるようにしています。
rescue500メソッドではrenderメソッドでerrorsフォルダのinternal_server_error.html.erbを返しています。
Rubyでは例外を表現するためのExceptionクラスというものが存在します。
StandardErrorはExceptionクラスを継承しています。


https://docs.ruby-lang.org/ja/latest/class/StandardError.html



サーバーを再起動して以下の画面になってるとokです。



![スクリーンショット 2021-02-27 18.50.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698694/230e4b94-8415-0d24-3a67-c70cd7228d75.png)



※アクションのraiseメソッドを消すのを忘れずに。


参考:[【Rails5】rescue_fromによる例外処理：アプリ固有のエラーハンドリングとエラーページ表示](https://qiita.com/E-46/items/03c30c2d37aae3756ecc)
rails6ガイド
初学者がPHPを学び始める2

##配列について
これまでの変数が一つしか値を扱えなかったのに対し、配列を用いると複数の値をまとめて保存することができます。配列は仕切りのある箱のようなもので、それぞれのスペースにデータが入っており、0, 1, 2...というインデックス番号によってスペースの名前が付けられています。


##配列の追加、上書き
配列の末尾に値を追加するときは「$配列名[] = 値;」とします。また、すでに存在するインデックス番号を指定すると、配列の値を上書きすることもできます。

例えば下記のように記述した場合は白が出力されます。

```
 <?php
    $colors=array("赤","青","黄");
    echo  $colors[0];
    $colors[] = "白";
    echo $colors[3];
  ?>
```

##連想配列

連想配列は、配列と同じく複数のデータをまとめて管理するのに用いられます。配列との違いは、個々の要素を管理するのにインデックス番号ではなく、「キー」と呼ばれる文字列などの値を指定することができる点です。
連想配列では「$配列名 = array('キー名' => '値１', ・・・);」といったように、「=>」を用いてキーと値をセットします。


##foreach
foreach文とは、配列または連想配列に対して、先頭のデータから順に繰り返し処理を行うための命令です。
「as」の後ろの変数に、ループの度にデータが先頭から順に代入されていきます。asの後ろの変数名は何を指定しても大丈夫です。

foreach文では、配列内のデータが順次「キー変数」、「値変数」に代入され、それに対して処理が繰り返し適用されます。

例えば以下のような記述場合
数学は70点です。英語は90点です。国語は80点です。
と繰り返すことになります。

```
  <?php

    $scores = array('数学' => 70, '英語' => 90, '国語' => 80);

    foreach($scores as $key => $value){
      echo $key."は".$value."点です。";
    }
    
  ?>
```
droneでroot以外の一般ユーザでstep実行


# はじめに
droneでcloneしてくれたソースでテストをしようとしたら権限エラーで怒られて失敗するトラブルにあった。
rootで動くdockerイメージは必要だが、最低限に留める方法を確立したの共有します。

ちなみに本件をググっても出てこない。困ってる人がいない模様？
droneサーバ側の設定で解決する方法がありそうな気がします。
それかrootユーザでやっちゃえって感じなのでしょうか。でも、ケースによってはdockerイメージを用意する必要がありそう。

#原因
droneのデフォルトcloneはroot権限で行われownerがrootになってることが原因です。
ちなみに、デフォルトcloneを無効化し自分で実施してもワークスペース（デフォルト:/drone/src）フォルダの所有者がrootでモードが755のため、一般ユーザがclone(書き込み)ができないです。


#解決策

```.drone.yml
kind: pipeline
type: docker
name: default

steps:
  - name: chown
    image: centos:centos7
    commands:
    - chown -R 本来のユーザUID:本来のグループUID . # 例 chown -R 1000:1000

  - name: 本来やりたいこと
    image: 本来のユーザで動くdockerイメージ
    commands:
    - ～～～～
```
rootで動くイメージでchownするってだけですね。
事情がわかってないと意外と行き着くまでに時間がかかりました。

#余談
デフォルトのcloneを無効化した上で、最初のstepで空のワークスペースのownerを一般ユーザに変更、次のステップで一般ユーザによるcloneを実施しようとしたところ権限不足で失敗しました。
どうやら、ワークスペースになにもない場合は、次のstepでワークスペースが再作成されてるようです。
M5StickC+UIFlowで会議室の使用状況をモニタリングしよう①-2（マグネットスイッチ 完成版）

#概要
[前回（準備編）](https://qiita.com/keicafeblack/items/95c8e9563992a425cf6b)の続きで、ThingSpeakへの送信まで実装しました。

![P5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/fee48b15-4673-d275-2387-852a77990e72.jpeg)
ThingSpeakは回数制限があるので、ステータスが変わった時だけ送るようにしています。
![TS1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/1e969a11-1223-fb97-4408-cc919429fe51.jpeg)

#コード
![C1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/2bac82fb-692f-7daa-508b-530b2ab8880e.jpeg)
![C2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/adf6eee4-aac6-d24e-2b58-423dcfa91044.jpeg)

```qiita.py
from m5stack import *
from m5ui import *
from uiflow import *
import wifiCfg
import machine
import time
import urequests

setScreenColor(0x111111)


isOpen = None
LastStat = None

wifiCfg.doConnect('●●●●●', '●●●●●●●●●●●●')
wifiCfg.reconnect()
DoorStatus = M5Title(title="DoorStat", x=3, fgcolor=0xFFFFFF, bgcolor=0x0000FF)
L_DS = M5TextBox(3, 26, "DS", lcd.FONT_DejaVu18, 0xFFFFFF, rotate=0)
Logs = M5TextBox(1, 77, "Logs", lcd.FONT_Default, 0xFFFFFF, rotate=0)




pin0 = machine.Pin(26, mode=machine.Pin.IN, pull=machine.Pin.PULL_UP)
isOpen = 0
LastStat = 0
L_DS.setText('Started!')
wait(1)
while True:
  if not (wifiCfg.wlan_sta.isconnected()):
    lcd.print('Wifi NG', 0, 120, 0xff0000)
  lcd.print('Wifi OK', 0, 120, 0x33ff33)
  Logs.setText('Checking...')
  wait(1)
  isOpen = pin0.value()
  Logs.setText('Checked')
  L_DS.setText(str(isOpen))
  if isOpen != LastStat:
    Logs.setText('Sending...')
    wait(1)
    try:
      req = urequests.request(method='GET', url=(str('https://api.thingspeak.com/update?api_key=●●●●●&field1=') + str(isOpen)), headers={})
      Logs.setText('Posted')
    except:
      Logs.setText('NG')
  LastStat = isOpen
  wait(10)
  wait_ms(2)
```
Bashのエイリアスで「'」(シングルクウォート)が紛れていると認識されなかった話

# 結論
「'\'」を先頭に置いてエスケープ！

## 例

```
alias xxx='~~~ | awk -F ':' '{print $1}''
```

↓

```
alias xxx='~~~ | awk -F '\'':'\'' '\''{print $1}'\'''
```

## あとがき
- このエスケープめっちゃ読みづらいね！
- でもメモしておかないとこのエスケープの仕方は忘れるから.bashrcにでもコメントで書いとくといいかもね！

ってメモでした
Railsの便利メソッド pluckについて調べてみた

# はじめに
Railsでアプリケーションを作成時に、モデルから特定のカラムをリストで抜いてきたい場面が時々あり、なにかいいメソッドはないかと探していたところ、このメソッドにたどり着いた。

`ids`メソッドなどidカラムのリストを取得するメソッドを知っていたが他のカラムは一々、`all`で全取得して、`map`や`select`等を駆使してループ処理を行い、対象のカラムのリストを取得していたので、このメソッドを使用することでかなり簡略化につながる


## pluckメソッドについて
上記でも簡単に説明したように、対象のカラムのみを指定してリストで取得する事ができる

[Railsガイド](https://railsguides.jp/active_record_querying.html#pluck)では以下のように説明されている。

> pluckは、1つのモデルで使用されているテーブルからカラム (1つでも複数でも可) を取得するクエリを送信するのに使用できます。引数としてカラム名のリストを与えると、指定したカラムの値の配列を、対応するデータ型で返します。


## 実際の使い方について

以下のようなモデルがあると仮定して、サンプルのコードを書いていく

### Userモデル

|  型  |  カラム名  |
| ---- | ---- |
|  id  |  integer  |
|  name  |  string  |
|  age  |  integer  |

|  id  |  name  |  age  |
| ---- | ---- |---- |
| 1 | hoge | 21 |
| 2 | fuga | 30 |
| 2 | hogehoge | 34 |

基本的な使い方

```ruby
User.pluck(:name)
# SELECT name FROM users
# => ['hoge', 'fuga', 'hogehoge']
```

#### その他の使い方

引数を複数のカラムを渡すことで、指定したカラムのリストも取得できます。
戻り値が二次元配列になってかえってくるのでそこだけ注意が必要になります。

```ruby
User.pluck(:name, :age)
# SELECT name, age FROM users
# => [['hoge', 21], ['fuga', 30], ['hogehoge', 34]]
```

### pluckメソッドを使うことのメリット
#### コードの冗長化を防ぎ、スッキリ書ける

仮に`pluck`を使わないで上記と同じような結果が得られるコードを書いてみましょう

```ruby
# pluckを使わない場合
User.select(:name).map{|user|user.name}

User.select(:name, :age).map{|user|[user.name, user.age]}
```
### 発行されるSQLが変わる
mapメソッドを駆使して同じような結果は得られますが、実はRailsが発行するSQL文が変わってきます。

```ruby
# mapを使用したパターン
User.all.map{|user|user.name}
=> SELECT users.* FROM users

# pluckを使用したパターン
User.pluck(:name)
=> SELECT name FROM users
```

上記のSQLを見比べると前者は`SELECT users.* FROM users`で`users`テーブルのカラムを一旦すべて取得しているのに対して、後者は `SELECT name FROM users`で `users`テーブルの`name`カラムのみを取得しています。

カラムすべてを取得するより、対象を指定してあげて取得する方がパフォーマンスや負荷もこ後者の方が基本的にはよくなるはずです。
ただ便利だから使うのではなく、パフォーマンス等も考慮して最適なメソッドを選べると良さそうです。

### その他pluckを使う時の注意点について

[Railsガイド](https://railsguides.jp/active_record_querying.html#pluck)では以下のように記載されています

> pluckは、selectなどのRelationスコープと異なり、クエリを直接トリガするので、その後ろに他のスコープをチェインすることはできません。ただし、構成済みのスコープをpluckの前に置くことはできます。

つまり、`pluck`メソッドの後ろには絞り込みやソートの条件を付ける事ができないということです。
以下のような書き方はエラーとなります。

```ruby
User.pluck(:name).limit(3)
User.pluck(:age).order(id: "DESC")
```

ただし、`pluck`を使う前に予めスコープを設定しておくことで取得する事ができます。
例えば年齢カラムのリストを降順で取得したい場合は以下のように記述できます。

```ruby
User.order(age: "DESC").pluck(:age)
# => [34, 30, 21]
```
毎日投稿（React）

#本日はReactの学習しました。
はじめて触れる言語のため、ワクワクでした！
とりあえず、コードを打ちまくりでした。

##U-demyの動画を参考に学習しました！
モダンJavaSciptの基礎から始める挫折しないためのReact入門
https://www.udemy.com/course/modern_javascipt_react_beginner/

JavaScriptの基本的な部分を抑えつつ、
Reactを始めていったので、確かにJavaScriptは大事な存在だとこのコースを受けて思いました。
（まだReactでTODOアプリを作っていないのですが。笑）※明日やります。

今回は関数コンポーネントを使って”お元気ですか?”を呼び出し、またstyleもかけています。
以下、例です。

```
index.js

import React, { useEffect, useState } from "react";
import { ColorfulMessage } from "./Componets/ColorfulMessage";

export const App = () => {

 return (
    <>
      <h1 style={{ color: "red" }}>kodamaだよ。</h1>
      <ColorfulMessage color="blue">お元気ですか?</ColorfulMessage>
    </>

};
```

propsには格納しているのが以下の
{color: "blue", children: "お元気ですか?"}⬇️

```
ColorfulMessage.jsx

import React from "react";

export const ColorfulMessage = (props) => {
  const { color, children } = props;　//ここで分割代入か〜
  const styleContent = {
    color,
    fontSize: "20px"
  };
  return <p style={styleContent}>{children}</p>;
};
```


##useEffect
自分的にはここがちょっとわからなかったポイントです。
useEffect....
動画を何度も見返したのですが、勘の鈍い私にはわからなかったので、公式のドキュメントを読んだりしたのですが、ちょっと理解できるものではなかったです。

今の認識であっているかわからないですが、
useEffectととして機能を使うならば、第二引数に変化したい変数を配列に格納する！
今回はnumが変化していくので入れています。

```
useEffect(() => {
    if (num > 0) {
      if (num % 3 === 0) {
        Faceflag || setFaceflag(true);
      } else {
        Faceflag && setFaceflag(false);
      }
    }
  }, [num]);
```

まだまだレンダリングがどこで起きるかわからないところが多いので、
console.logを使いながら、やっていきたいと思います。
モダンJavaScript基礎　Constの深掘り

## はじめに
はじめまして！今現在、プログラミングを学習中のタイソンです。今回はjavascriptの基礎中の基礎であり、最も頻出する「const」についてまとめていこうと思います。

## Constの基礎of基礎
constとは値の書き換え、または変数の再宣言ができない変数を宣言する方法です。書き方は以下の通りです。

```
const 変数名 =　変数に入れる値;
```
値の書き換えや再宣言ができないので、以下のように使うとエラーが出てしまいます。

```javascript

//値の書き換えはできない

const str = 'aiueo'
str = 'kakikukeko'
```
```javascript
//変数の再宣言はできない

const str = 'aiueo'
const str = 'kakikukeko'
```

## オブジェクトをconstで定義する場合
前のチャプターで述べた通り、constで定義した変数は書き換えることはできません。
**しかしconstで定義したオブジェクトは値を変えることができてしまうのです！！**

```javascript

const man = {
  name: '田中',
  age: 20,
};

man.name = '鈴木'
```
こう記述し、console.log(man)で変数manの中身を確認してみると、このようになっています。
![console.logの中身](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1048562/cc57dce8-af2e-19a0-167c-b5709fa96e1c.png)
オブジェクトのプロパティの値はconstで定義していても、中身を変えることができるということです。もちろんconstで定義したオブジェクトに値を追加することも可能です。

```javascript

const man = {
  name: '田中',
  age: 20,
};

man.address = '東京'
```
## 配列をconstで定義する場合

配列をconstで定義する場合はどうでしょう。
**配列もオブジェクトの場合と同様でconstで定義していても要素の変更はできます!**

```javascript

const animal = ['dog', 'cat']
animal[0] = "bird"
```
このように配列の要素を書き換えて、console.log(animal)で配列を出力してみます。
![animal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1048562/0d40ce5a-dd55-6ac4-48ce-a7c634827cc9.png)

このようにconstで定義していても変更が可能なわけです。もちろん要素の追加もできます。ちなみに配列に追加する際、javascriptではpushを使います。

```javascript

const animal = ['dog', 'cat']
animal.push("monkey")
```


##最後に
いかがだったでしょうか。これからもこういったモダンjavascriptの文法について書いていこうと思います。読んでいただきありがとうございました。
Herokuのruntime設定ミスでpushに失敗した時の対処法


# 前提
- Herokuのリモートリポジトリは作成済み
- `heroku create app名 --buildpack heroku/python`を実行済み
- 必要ファイルはローカルに作成済み
  - Procfile
  - Requirements.txt
  - Runtime.txt 
- `git add`, `git commit`までは成功
- `git push heroku master`で失敗する

# 事象
### Requested runtime (python-3.6.8) と表示される
HerokuのActivity > View build logから詳細を確認しに行くと下記画像のようなエラーに遭遇

![deploy_miss.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159336/1550cbe3-6cb6-45e1-b33b-12ecb98914d2.png)

# 原因
エラーメッセージの通り自分のHerokuの環境ではpython-3.6.8は動かないということ
Herokuのruntime環境とruntime.txtの内容に差異があったため発生。

runtime.txtの中身
```python-3.6.8
```

Herokuの実行環境に`heroku run bash`で入りバージョンを調べると`Python 3.8.5`になっていた。

![heroku_python環境.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159336/33ac2efc-6695-fbac-f496-179d40c90cb6.png)


# 解決策
runtime.txtの中身をHeorkuと合わせて`git push heroku master`実行
```python-3.8.5
```

![deploy_succsess.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159336/1b86b57b-d035-4341-067f-c98c71abd9f7.png)

# 感想
ちょっと久しぶりにHeroku触っただけなのにとんでもない目にあってしまったので思わずQiita登録して初投稿。
原因は様々だと思うがググってみた感じこのケースが見当たらなかったので個人メモ用に記す。
【Git】業務でよく使うやつ（初心者）


<b>まずは、プロジェクトをclone</b>
``` git clone レポジトリ名```

<b>node moduleが必要な場合</b>
npm インストール
``` npm i```

<b>ブランチ作成</b>
（リモートのブランチを落とす）
```git checkout -b branchName origin/branchName  ```

<b>コミットしてプッシュ</b>
```git add .```
```git commit -m "コミットメッセージ```
```git push```

<b>作業前はブランチを最新状態にする</b>
```git pull```

<b>no fast-foward でマージ</b>
```git merge --no-ff ブランチ名```

<b>マージしてコンフリクト発生→元に戻す</b>
```git merge abort```
macをしかない状況でもlinaxmintのブートUSBを作成する

# はじめに
NPOで使用していた供用windowsPCが重すぎてどうしようもないのでlinuxにしたらなんとかなるかなと思ったのが発端です。
macでブート用のUSBメモリを作る知見があまりなかったので書き留めておきますね。

# Linux Mintをダウンロード
ダウンロードが早いのでおすすめは理研のページから
[リンク](http://ftp.riken.jp/Linux/linuxmint/isos/stable/19.1/)はこちら

公式のページは[こちら](https://www.linuxmint.com/download.php)

今回は松竹梅で言えば竹級のMateを選択

# USBメモリをフォーマット
二つ方法があります
1. ディスクユーティリティを使用する
2. コマンドライン上から行う
参考：https://jp.easeus.com/mac-data-recovery/format-usb-flash-drive-to-fat32-on-mac.html

# balenaEtcherを使用してブートUSBを作成
ダウンロードは[ここ](https://www.balena.io/etcher/)から

起動するとこんな感じ。わかりやすいUIですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571279/06800fa4-547e-ebf3-a131-7e75749e73b6.png)

作成が完了するとこのような画面になるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571279/e01083ef-7796-8474-0b51-1d896c28bb33.png)

# 最後に
あとはお手持ちのPCに差し込んでBIOSから起動順を変更すれば、linuxが起動すると思います。
それではlinuxlifeを楽しみましょう!!

役立ったと思ったらLGTMお願いします！！
LPお悩み→解決によくある矢印みたいな五角形をcssで作ってみる

LPデザインでよくあるこんなの

![lparrow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049228/cd6f2239-7320-47a1-c8fb-47df1dbabd73.png)

画像を作って貼ってもいいんだけど、cssで超簡単にできたのでメモ。


# 使用するのは clip-path
clip-pathとは
クリッピングが自在にできるプロパティです

詳しい説明は下部の参考になる記事やMDNの公式をご覧いただいて…

とりあえずコードだけ。


```css:code
  clip-path: polygon(0 0,100% 0, 100% 70%, 50% 100%,0 70%);
```

##ポイント
作りたい多角形の左上から順に頂点の座標を指定していく。
座標の指定の仕方は(x軸 y軸, x y, x y…)と、x yの順番で指定する。

たとえば、普通の長方形だと…

```css:code
  clip-path: polygon(0 0,100% 0, 100% 100%,0 100%);
```
になりますね。
図にするとこう。普通の長方形にこんな指定はしませんが。笑
![box.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049228/6c02ac81-8e66-3c21-9766-7b4e603c856e.png)



そして今回の例だとこんな感じ

![lparrow3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049228/dc2fb8e1-c791-b883-37fb-c3a669a8f889.png)


![lparrow2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049228/832166b0-e812-4fdd-3c73-9eed77fd204c.png)


③と⑤の70%のほうを変えればもっといろんな角度に対応できます。





#参考になる記事・書籍

[Photoshopいらずで切り抜き放題！clip-pathプロパティがかっこよすぎる](https://www.webprofessional.jp/introducing-css-clip-path-property/)

[ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座](https://www.amazon.co.jp/%E3%81%BB%E3%82%93%E3%81%AE%E4%B8%80%E6%89%8B%E9%96%93%E3%81%A7%E5%8A%87%E7%9A%84%E3%81%AB%E5%A4%89%E3%82%8F%E3%82%8BHTML-CSS%E3%81%A8Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%AE%9F%E8%B7%B5%E8%AC%9B%E5%BA%A7-Mana/dp/4815606145)
Diginnos Stick DG-STK4D 用 Windows 10 64bitドライバ 

[Diginnos Stick DG-STK4D](https://www.amazon.co.jp/Diginnos-Stick-DG-STK4D-%E3%82%B9%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E5%9E%8B%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3-Windows/dp/B06Y1MSFD9)
Windows 10 20H2 64bitにて確認。

インストール直後だと不明なドライバが12個くらいある。
また、MicroSDスロットが使用できない。これを解決する。

![DG-STK4S_800x600-450x338.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/fa7f44bd-cb0c-7467-2cba-69237de9f264.jpeg)


## Driver

* 64bit版
    * https://support.lenovo.com/jp/ja/downloads/ds111863-intel-platform-device-driver-for-windows-81-64-bit-thinkpad-10-machine-types-20e3-20e4

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/982d0304-eee0-01ff-482c-7bb20432b097.png)

### Bluetoothなど

* https://www.intel.co.jp/content/www/jp/ja/support/intel-driver-support-assistant.html
【HTML/CSS】セレクタの種類

セレクタの種類をまとめてみました。以下のコードを例に整理していきます。

```html:index.html
<div class="parent">
    <p class="child">子(親要素直下のp)</p> <!-- ・・・① -->
    <div class="child"> <!-- ・・・② -->
        <p class="descendant">子孫(親要素直下のdiv内のp)</p> <!-- ・・・③ -->
        <div class="descendant"> <!-- ・・・④ -->
            <p class="descendant">子孫(親要素直下のdiv内div内のp)</p> <!-- ・・・⑤ -->
        </div>
    </div>
</div>
```
↓ブラウザ上での表示
<img width="300px" alt="代替テキスト" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031318/2344f4da-0303-e4c5-ab26-9d8aef1f344c.png">

##子セレクタ
親要素の直下にある要素。今回は①②が該当する。
ｃｓｓファイルでは、親と子は`>`で表す。

```css:main.css
.parent > p{
    color:red;
}
```
このように記述すると、親要素直下のp要素（①）のみにスタイルが適応され、以下のような表示になる。他にもp要素（③と⑤）はあるが、子要素ではないため適応されない。
<img width="300px" alt="代替テキスト" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031318/883a7b1f-cc22-a202-319a-82688a8e598c.png">

##子孫セレクタ
親要素内の全ての要素。今回は①②③④⑤が該当する。
ｃｓｓファイルでは、親と子は`半角スペース`で表す。

```css:main.css
.parent p{
    color:red;
}
```
このように記述すると、親要素内全てのp要素（①と③と⑤）にスタイルが適応され、以下のような表示になる。
<img width="300px" alt="代替テキスト" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031318/79e9b56f-ca4e-a714-11fc-75cf8447baa2.png">

##全称セレクタ（ユニバーサルセレクタ）
`*（アスタリスク）`をセレクタにすると、全ての要素が対象になる。初期設定をリセットしたい際に用いると便利である。
Unity の IMGUI を High DPI 対応

Unity の IMGUI は `GUI.matrix` にスケール行列を掛けることでサイズを変えられる。
`GUIUtility.ScaleAroundPivot` はその計算を行ってくれるヘルパークラスなので、それを利用する。

Windows の DPI は標準で 96 dpi なので、それと `Screen.dpi` との比でスケールさせる。
Unity Editor には Low Resolution Aspect Ratio という DPI を下げる機能(チェックボックス)があるが、Screen.dpi はそれに対応していないので、`GameView.lowResolutionForAspectRatios` の getter プロパティーをチェックすることで対応する。

`GameView` クラスを取得するには、`EditorWindow.GetWindow` に `UnityEditor` Assembly 内の `UnityEditor.GameView` 型を渡すことになる。`GameView` 型は参照できないので、PropertyInfo によるリフレクションによって `lowResolutionForAspectRatios` にアクセスする。

最終的には、下記のようなスクリプトになる。

```C#:ImguiHighdpiScaler.cs
var scale = Screen.dpi / 96f;
#if UNITY_EDITOR
var typeGameView = System.Type.GetType("UnityEditor.GameView,UnityEditor");
var gameView = EditorWindow.GetWindow(typeGameView);
var propLowRes = typeGameView.GetProperty("lowResolutionForAspectRatios");
var isLowRes = (bool)propLowRes.GetValue(gameView);
if (isLowRes)
	scale *= 0.5f;
#endif
GUIUtility.ScaleAroundPivot(new Vector2(scale, scale), Vector2.zero);
```
WSLのLegacyの削除について

# はじめに  
WSLの環境を見ていると、バージョンが下記のようになっていました。

実行コマンド：`wsl -l -v`

```
  NAME            STATE           VERSION
* Legacy          Stopped         1
  Ubuntu-20.04    Stopped         2
```


**Legacyとは？**
>WSL をインストールした以前の Windows 10 リリースから Windows 10 にアップグレードすると、既存のディストリビューションはそのまま残ります。

前の大型アップデートでのWSLの情報が残っている・・・と。
ちなみに、画像取り忘れましたが、アプリと機能にはLegacyは表示されません。

## 削除する
削除の方法については[公式の記載](https://learn.microsoft.com/ja-jp/windows/wsl/troubleshooting)があります。


Legacyがデフォルトとして設定されているまま、下記のコマンドを実行してみます。
`wsl --unregister Legacy`

もう一度、コマンド：`wsl -l -v`を実行します。

```
  NAME            STATE           VERSION
* Ubuntu-20.04    Stopped         2
```

`wsl -s Ubuntu-20.04`とかの設定コマンドを事前に実行しなくてもいいようです。
なお、Legacy以外のWSLについては基本的にアプリと機能からアンインストールしましょう。
AWS 公式 User Guide のすすめ

AWS はとかく難しい。

ネットを検索するとAWSに関する記事は山ほど見つかる。ところが、AWS自体が急速に進化しているために、内容が古くなっているものも多い。記述が断片的だったり、不正確な記事もまた多い。というわけで、AWSに関する正確な情報を得るのは案外難しい。

…と思っていた。この公式 User Guide に出会うまでは。

英語 https://docs.aws.amazon.com/
日本語 https://docs.aws.amazon.com/ja_jp/

このサイトには、AWSのサービスごとに極めて詳細なガイドブックがすべて無料で公開されている。おすすめはPDF版。これはもはや一冊の本である。体系的な知識が学べる。しかも無料で読み放題なのだ！読まない手はないだろう。

Amazon は米国の企業であり、すべてのドキュメントはもともと英語で書かれている。その後、日本語訳されているものも多い。だが、正直、日本語訳は文体がこなれておらず、読みにくい。可能な限り、英語で読むことをおすすめする。それが難しい場合は、日本語版を読みながら、ときどき対応する箇所を英語版で読むといい。

私はとりあえず、

[IAM User Guide](https://docs.aws.amazon.com/IAM/latest/UserGuide/iam-ug.pdf)

を中心にいま読み進めているところだ。私の考えでは、AWS の各リソースへの権限周りの話が一番ややこしく、セキュリティ上も極めて重要だからだ。AWSの肝ではないかと思っている。
基本情報技術者試験　2021年　申し込み　変わってた件

基本情報技術者試験の申込、思ったより混乱したのでまとめておく。

一番初めに大事なことは
<b>★コロナ禍の影響により、色々やり方が変わってるけど、公式ＨＰの記載がわかりづらい。（あまり時間がなかったと思われる。）</b>
ということ。

それを踏まえてつまずきポイントを5点まとめる


<b>■1点目
・2020年度秋の受験は2021年1月～3月に延期されている
<b>
■2点目
・申し込みはIPAからプロメトリックに委託されてる</b>

　実際には↓から申し込みする。
　http://pf.prometric-jp.com/testlist/fe/index.html

　ちなみに「基本情報技術者試験　申し込み」で検索すると↓が一番最初に出てくる。
　https://www.jitec.ipa.go.jp/1_01mosikomi/_index_mosikomi.html
　トップページにの一番下に↓のように書かれているが、導線としてはとても分かりづらい。（最近はユーザビリティを意識したサイトに慣れているので、とてもストレスフル）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159348/2eee7f16-058a-cef1-f9c3-a7215b6d6135.png)

<b>■3点目
・CBT受験になって、午前と午後別日の受験が可能
</b>　でも、気持ち的には一日に受けたほうが楽かと。

<b>■4点目
・プロメトリックでは午前と午後それぞれで予約をしないといけない
</b>　ただし、午前→午後の順番に予約しないとダメらしい

<b>■5点目
・午後も費用がかかるの？と思いがちだけど、午前予約すると午後は支払い画面をスキップして予約が可能。
</b>　ここも事前に説明がないから、え？15,000円×2＝30,000円？？？って怖くなる。
　30,000円かかってもいいや、と思って申し込みする勇気がいる。
Bootstrapで画面幅に応じて改行する方法＜レスポンシブデザイン＞

#環境
Bootstrap5
Bootstrap4でも機能すると思います。
3以前は確認してないのでわかりません。ごめんなさい。
#やりたいこと
画面が大きいときは1行のテキストを、画面が小さくなると任意の箇所で改行させたい。
#やり方
改行させたいところに```<br>```を挟み、```class="d-lg-none"```を指定する。
Bootstrapでは```d-none```が```display:　none;```の意味になるので、これで画面幅がlg以上になると```<br>```が無効になる。
M5StickC+UIFlowで会議室の使用状況をモニタリングしよう①-1（マグネットスイッチ 準備編）

#概要
会議室の利用状況をWeb上で把握できる仕組みを
　M5StickC＋マグネットスイッチ→ThingSpeak
を使って構築しました。

UIFlowを使ったブロックプログラミングを使用したので、コードは1行も書かずに済んでいます。

下記のようにつなげて、通電時は０、切断時は１にするようにしています。
![P33.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/c033a50a-0dc7-6b2d-b3fe-f9e0154dd759.jpeg)

#コード
![UIF.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/f4c6bada-d333-32ae-df35-de9f50eb6ade.jpeg)

```ruby:M5Door.py

from m5stack import *
from m5ui import *
from uiflow import *
import machine
import time

setScreenColor(0x111111)

DoorStatus = M5Title(title="DoorStat", x=3, fgcolor=0xFFFFFF, bgcolor=0x0000FF)
L_DS = M5TextBox(3, 26, "DS", lcd.FONT_DejaVu18, 0xFFFFFF, rotate=0)

pin0 = machine.Pin(26, mode=machine.Pin.IN, pull=machine.Pin.PULL_UP)
L_DS.setText('Started!')
wait(1)
while True:
  L_DS.setText(str(pin0.value()))
  wait(1)
  wait_ms(2)

```
#最終版はこちら
ThingSpeakまでつなげています。
[M5StickC+UIFlowで会議室の使用状況をモニタリングしよう①-2（マグネットスイッチ 完成版）](https://qiita.com/keicafeblack/items/bcb02c9e694cd1aced7f)