OmniAICreator/Qiita-1.07M huggingface dataset:
【Unity】Android プッシュ通知アイコン Assets/Plugins/Android/res is deprecated.

2023/9/27
久々に自分の書いた記事参考に Unity2021.3.24辺りでビルドしたら通らなかった…。私の記事は忘れていただいて、こちらの方が書かれた素晴らしい記事を参考にしてください。
https://kingmo.jp/kumonos/unity-2021lts-res-folda-build-error/
ありがたやー。


# 目的

Androidプッシュ通知用のアイコンを設定したい。
つまり Assets/Plugins/Android/res/drawable-... に アイコンを配置したい。
しかしビルドログを見ると何か言われてるので対処したい。

# 実行環境

MacOSX:10.15.7
Unity:2019.4.19f1

（AndroidStudioは使いません）

# 問題

Unity2019からか分かりませんが
Android用にバッチビルドを行い、ログを眺めていますと

`OBSOLETE - Providing Android resources in Assets/Plugins/Android/res is deprecated, please move your resources to an AAR or an Android Library. See "AAR plug-ins and Android Libraries" section of the Manual for more details.`

Deep-L先生に翻訳をお願いすると

`廃止 - Assets/Plugins/Android/res に Android リソースを提供することは推奨されていません。リソースを AAR または Android ライブラリに移動してください。詳細はマニュアルの「AARプラグインとAndroidライブラリ」のセクションを参照してください。`

まだ使えましたが いつ無くなるか不明。
リソースだけ追加したいのに AndroidStudio起動して AAR作れとかちょっと…

# 考察

先ほどの文章を読むと
`See "AAR plug-ins and Android Libraries" section of the Manual for more details.`
と書いてありますので、ググると [Android Developers公式](https://developer.android.com/studio/projects/android-library.html#aar-contents) が出てきました 

![スクリーンショット 0003-03-09 14.49.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94354/007c23d5-7bad-ff55-d992-edc1c8ade414.png)
・AARは ZIPファイル
・必須エントリは AndroidManifest.xml
（必須と書いてあるが Unityで使う分には たぶん必須ではない)
・決められたエントリ(ファイル or フォルダ)なら 含めることができる

# 対処

・aarはzip
・zip内には res/* だけでもOK（resより前のパスは含めないように）

```
> zipinfo hoge.aar

Archive: hoge.aar
Zip file size: xxxx byte, number of entries: xx
res/
res/drawable-hdpi/
res/drawable-hdpi/hoge.png
res/drawable-ldpi/
res/drawable-ldpi/hoge.png
...
```


ということで、あらかじめ resフォルダをzip化して拡張子aarにリネーム すればOKです。

私は流行(?)に乗って [[参考URL](https://yotiky.hatenablog.com/entry/2020/06/22/unitybuildprocessor)]

IPreprocessBuildWithReportにて
・zip -r hoge.aar res -x "*.meta"
・元のresフォルダを除外
・AssetDatabase.Refresh()

IPostprocessBuildWithReportにて
・除外したresフォルダを元に戻す
・AssetDatabase.Refresh()

と行いました。
出来たapkの中を覗くと、無事 resフォルダが展開されていました。
Effective C++ 宿題

## dynamic_castの時間を計測する

https://theolizer.com/cpp-school1/cpp-school1-33/

VS2019で実験
もちろんReleaseビルド
クラス名で変わるかも見た

|cast  |30文字  |270文字  |
|---|---|---|
|static_cast  |148  |128  |
|dynamic_cast |1300  |1306  |

## 例外をthrowした場合の時間を計測する

https://theolizer.com/cpp-school1/cpp-school1-30/

例外無しの処理時間
Time : 1147 uSec

例外有りの処理時間
Time : 3495888 uSec = 約3.5秒
Pythonで学ぶ制御工学　第14弾：閉ループ系の設計仕様

# #Pythonで学ぶ制御工学< 閉ループ系の設計仕様 >

##はじめに
基本的な制御工学をPythonで実装し，復習も兼ねて制御工学への理解をより深めることが目的である．
その第14弾として「閉ループ系の設計仕様」を扱う．

##閉ループ系の設計仕様
制御設計において，閉ループ系の設計仕様は重要な概念である．今回は，それらについて理論的な観点から学習していくこととする．まず，ここで扱う閉ループ系のブロック線図とそれの説明，及び今回の方針についてまとめたものを示す．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/21fa7469-9351-0eea-ac29-a95d391e4440.png)

##安定性
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/b287bb43-ac3c-4992-982c-b174fa0c5f4e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/bfaf3202-08c8-17a7-de67-cc0c4f7cf395.png)



##伝達関数の導出
#####解法1
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/0c15a633-a3f3-53b0-5555-986bfa19568b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/c0c424f8-b29c-6b92-216b-c7f3c6e47b51.png)



#####解法2
線形性を利用して，片方の入力を0とした解き方である．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/da49c24b-21aa-5e04-9a49-b383d25877ad.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/97040422-5daa-3b67-c6a7-b7792d7c599f.png)

##時間応答特性
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/e00348b5-fc28-5e66-374d-63ba7fc36002.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/273bba06-31c3-2d76-44e4-d2dfa6b6f2bb.png)

##周波数応答特性
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/96a4a542-7dd1-2bcc-9a7a-6d60a9d3bab8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/4177cc90-964a-c6e2-3d93-aec305b160df.png)

##要求する閉ループ系の性能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/c30d3d24-1f39-532a-18ad-1f3eafb539b0.png)

##感想
今回は実装はなかったが，制御に限らず設計などが伴ってくると，やはり理論的な内部までの理解が要求されてくることが多いと思うので，そういう意味でもよい学習の機会であったと感じている．知っている部分もあれば知らないことも多くあった．特に，特性で図から読み取れる情報とその情報の意味するところを知れたというのは，解析などにおいて今後非常に役立つのではないかと思っている．細かいところはまた学習を進める中で出てくるたびに理解を深めていきたいと思う．

##参考文献
Pyhtonによる制御工学入門　　南 祐樹　著　　オーム社
[Animation] keyframes


infinite　永遠にループするアニメーション

2.4秒かけて透明度０〜１に変化する
→これが永遠に繰り返される

```
animation: marry 2.4s infinite;

@keyframes marry {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
```

```
@keyframes marry {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

animation-fill-mode: forwards;
（終了時点の値を残す場合）

animation-fill-mode: both;
（開始時点、終了時点どちらも残す場合）
```
RDBの第1正規形について考えてみる

# はじめに
どうも、初学者です！
最近SQLを掘ってるところなので情報はしょぼいかもしれません。
が、自分が理解できるようにかなり噛み砕いて、かつ初心者さん目線になってまとめていきます！

間違いございましたら教えていただければ幸いです。

### 前提に
**テーブル設計で意識すること4箇条**

- 何を管理するか決める
- どんなテーブルにするか決める
- テーブルとテーブルの参照関係をはっきりさせる
- リレーショナルデータベースのルールに乗っ取って設計をする

以上の4点は最低限必要なことです。これを意識すること、大事です！
上部3つの項目は、いつも紙に殴り書いてます。笑

という事で、今回は4つ目の「リレーショナルデータベースのルール」について今一度考えていきましょう！

## RDBのあるべき形とは？
よく耳にしますが詳しくは知らないRDBの正しい形。
具体的には、RDBで管理したい項目を整理し、各項目の内容や、項目同士の関係性も正しく保てるように
テーブルを設計するために行います。


### ちょっと復習! RDBとは？
リレーショナルデータベースの略。
二次元の**表の形でデータを管理する**データベースのことを指します。
(その中にMySQLやOracleという複数の種類が存在している！)


# 正規化とは？

**正規化**とは、**テーブルの設計内容(スキーマ)を、ルールに従った状態にすること**です。
「RDBは表の形でデータを管理する」とはいうものの。。
表の形になっていてデータを溜めるだけだと、ただの入れ物になってしまいます。

それの何が問題って、**まず非常に扱いにくいものになる**ということ。
この時点ではふわっとでもそう捉えていて問題ないです。

では、データベースを正規化するとどんなメリットがあるのかを考えてみると、

- データの重複を取り除ける
- 矛盾した状態を作り出さないように管理できる
- 必要なタイミングでデータの更新が出来る

..といったことがあげられます。

**一定のルールに従った形**に形成することで、正しいデータベースが出来上がるんですね！
では、アンチパターンを避けるためにもルールの中身を見ていきましょう。


# ルールに乗っ取って正規化を学ぶ

### 更新不整合
正規化の目的の一つに、**更新不整合**を防ぐことがあります。

更新不整合の内訳として、

- 修正不整合(データを更新したときに起こる不整合)
- 挿入不整合（データを追加するときにおこる不整合）
- 削除不整合(データを削除するときの不整合)

の３つがあります。
漢字だらけですが、中身はシンプル！意味が理解できれば問題ないです。

## どうやって防げばいいの？
 **〜キーワードは、「1つの事実は1回」〜**

更新不整合を防ぐために**「正規化」**をする必要があります。
この正規化、**第1正規形 → 第２正規形 → 第3正規形** とステップを踏んで進めていきます。
![正規化の図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1101585/18d22e59-a610-2b05-6938-c160ad69fa14.png)
※正規化の種類でいうと8つになるそうですが、一般的には第３正規までが主流とのことです。
そのためこの記事では第3正規形までを目指します！

# 第1正規形
データをテーブルに格納できる形が**第1正規形**です。
**非正規形**(第1正規形になっていないものを指す）のデータを正規化します。具体的には、
**各列に同じデータの値が1つだけ入るようにすること**です。

↓**非正規形**

|出席番号|名前|得意科目|
|-------|---|---|
|001|新井　太郎|数学、家庭科|
|002|飯田　次郎|現代文|
|003|上田　三郎|地理、歴史|

↓
↓**第1正規形に変更！(各列のデータ型を単純に！)**
↓

|出席番号|名前|
|-------|---|
|001|新井　太郎|
|002|飯田　次郎|
|003|上田　三郎|

|出席番号|得意科目|
|-------|---|
|001|数学|　　
|001|家庭科|
|002|現代文|
|003|地理|
|003|歴史|

..となります。
テーブルを**値の組み合わせの集合**と捉えることがキーになります。
そして、**各列にはデータ型の値は1つ**。コンマで区切るのはナンセンスです！

## 導入項目の排除
第1正規化では、**導出項目の排除**も行います。
導出項目とは、**何かによって導き出される値のこと**です。

例えば商品購入用のテーブルがあるとします。

|単価|個数|金額|
|--|--|--|
|100|2|200|
|550|1|550|

単価と個数までは問題ないのですが、**合計金額はダメ**です。
理由は、単価だけ修正した場合、金額と矛盾してしまうためです。

|単価|個数|金額|
|--|--|--|
|200|2|200|
|500|1|550|
 ↑単価が変動して修正しても、金額は変わらず矛盾してしまっている。

このように、導出項目の排除とは、
**「修正する人が間違えないように気をつける」のではなく、「データの構造として、単価と構造だけを保存する」**ということになります。
この考え方は慣れていかないと難しいと個人的に感じます。。

## 繰り返し項目の排除
**繰り返し項目があると、第1正規形になりません。**
といきなり言われてもわからないので具体例を見ていきましょう。笑

名簿に電話番号を記述する欄が3つある状態をイメージします。

|氏名|電話番号1|電話番号2|電話番号3|
|--|--|--|--|
|谷中　花子|090-xxxx-xxxx|0246-xx-xxxx|080-xxxx-xxxx|

上記の項目を**繰り返し項目**といいます。
リレーショナルデータベースでは、この繰り返し項目はNG。

確かに「二次元の表」にはなっていますが、問題がモリモリ。

1.例えば、電話番号を4つ持っている人がいたら？
　= これでは管理できません。
2.電話番号を一つしか持っていない人は？
　= ２番と3番が空欄、つまりNULLとなってしまいます。。
3.電話番号1番を削除したら？
　= 2番と3番は詰めるべき、、？

上記のような問題があげられます。

### 解決策
電話番号で何か処理をするなら、電話番号を管理するテーブルを別に作るのが良いかと思われます。

# まとめ
列×行以外の構造を取り除くことが、第1正規形の役目でした！
レシピサイトを作るときに、材料の記述をするテーブル設計に悩んだのが思い出されました。笑
結果的にはJSの力を借りましたが、それはまた別記事で。

第1正規形だけでなかなか長くなったので今日はここまで。m(_ _)m
Vue.js始めてみました②(v-bind)

この度Vue.jsを学び始めました。
その勉強内容をまとめます。


## v-bind

v-bindで要素の属性をデータで指定することができます。

以下が基本的な書き方です。

```JavaScript:Vue.js

<タグ v-bind:属性="プロパティ"></タグ>

//以下のようにも省略できる
<タグ :属性="プロパティ"></タグ>
```

## 使い方

使い方の例を以下に記載します。

```JavaScript:Vue.js
// 画像を指定する
<div id="app">
  <img v-bind:src="image"></img>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      image:'image.png'
    }
  })
</script>
```

v-bindで属性を指定してdataで画像のファイルを入れることでその画像が出力されます。

以下のような使い方もあります。

```JavaScript:Vue.js
// インラインスタイルを指定

<div id="#app">
  <p v-bind:style="{color:myColor}">文字色を指定</p>
  <p v-bind:style="{fontSize:miSize}">フォントを指定</p>
  <p v-bind:style="{backgroundColor:myBackColor}">背景色を指定</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      myColor:'black',
      mySize:'150%',
      myBackColor:'red'
    }
  })
</script>
```

JavaScriptなので`fontSize`のようにキャメルケースで記述します。

本日は以上です。
[ Ruby言語の特性について ]　インタプリタ方式

プログラミング言語である**Ruby**について調べてみました。
このプログラミング言語を作った人ってまさかの日本人！
名前は『まつもと ゆきひろ』さんという方。
言語の名前の由来は、同僚の誕生日が７月でその誕生石が`ルビー`だったからだそうです。

とりあえずメリット、デメリットの備忘録を書いていきます。

##メリット
Rubyのメリットは初心者でも扱いやすい。そして無料(フリーソフトウェア)。
汎用性が高く、gemが豊富。
幅広いツールで利用可能(Windows,Mac,Linux)。
パッケージが豊富で効率的に作業ができる。
代表的なサイトだと、クックパッドや食べログWantedlyなどなど。
文法がシンプル。
記述量が少なく、修正も楽で開発効率も高い。


##デメリット
実行速度が遅い。(これ重要!)
インタプリタ方式が関係していて読み込みに時間がかかる。
コードの書き方が個々で自由なので、他人の書いたコードをみても理解できなくなる。
大きなプロジェクトには向かない。

　

聞き慣れない言葉があったので調べてみました。↓↓
###インタプリタ方式
プログラムを１行ずつ翻訳しながら実行する方式の事で、どうしても読み込みが遅くなるらしい。
反対に、早く読み込む(一概には言えない)のは**コンパイル方式**でプログラム全体を翻訳してから実行するそうです。ただコンパイル方式自体が複雑なコードを書かないといけないので、結果似たり寄ったり。

　　
###まとめ
プログラミング言語ってどれも良し悪しがあるみたいです。
他の言語を学習する時は、メリット・デメリットを深堀りたいと思いました。
AZ-900:AzureFandamentalsについて

#はじめに
本ページでは、実際にAZ-900:AzureFandamentalsを受験するまで調べた内容を記載しています。
これからAZ-900を受験しようとしている方、またAZ-900って何？と思う方に向けた記事になるので、興味のある方はどうぞ！！

#AZ-900:AzureFandamentalsは何か？
まずAZ-900:AzureFandamentalsとは、マイクロソフト社が管理している資格の一つです。
マイクロソフト社が提供しているサービスの一つである「Azure」の理解度を確かめる為の資格です。

##そもそもAzureって？
クラウドサービスの事で、インターネットを介して、マイクロソフト社からサーバー等を借りて、開発等で利用する事が出来ます。規模が大きく、且つ一定期間ででしか必要としない場合、マイクロソフト社から必要な環境を借りる事が出来るサービスです。
※講演会等で一時的に大きな部屋が必要になった時に、部屋をレンタルするイメージに近い

#どんな試験？
全問選択式の試験で、全国に点在する試験センターまたは自宅での受験が可能
※ただし、自宅で受験する場合はネットワーク環境が整っていないとＮＧ！
  受験料は13,750円 (税込)

#どんな事を問われるの？
全体として、Azureを業務で使う際の注意事項、またAzureを使った案件を提案する際に必要な知識が聞かれます。
⇒勉強する際にも、実際に使うイメージや提案する際のイメージを持つと勉強しやすいです。

例:
　・Azureを使うには何が必要？
　・Azureの使用料金はどうやって支払うの？、
　・そもそもAzureで何が出来て、何を借りることが出来るの？？？ 等々・・・

#どんな風に勉強したの？
単純です。
<font color="Red">**書籍の内容を把握し、実際に使う。**⇐これに限る！！！</font>
参考までに、勉強で使用した本は以下です。
 
書籍: 
・合格対策 Microsoft認定 AZ-900:AzureFandamentals テキスト＆問題集 (吉田 薫[著])

またマイクロソフト社で管理している勉強ページも有るので、同じく参照までに。
　https://docs.microsoft.com/ja-jp/learn/azure/?source=learn
     
#受験するにはどうしたらいいの？
マイクロソフト社の試験予約ページにアクセスして、Microsoft社のアカウント(PCメールアドレス等で新規作成が可能で無料)を作成して、画面の案内に従って予約する事

以下のMicrosoft社へのページにアクセス
https://docs.microsoft.com/ja-jp/learn/

#最後に
この資格について、難易度としては低いものでした。
ただ、Azureとは何か、又はクラウドサービスとは何か、といった基礎となる知識を得る上でいいきっかけとなりました。
AfterEffects+Lottieを使ったsvgアニメーション作成からwebページで再生するまで

お疲れ様です。
svgアニメーションってこんなに簡単に作れちゃうんだって感動を記事にします。
みんなもやろう。

そもそもsvgアニメーションってどんなのかっていうとこういうやつです。

https://dribbble.com/shots/3118306-SVG-Fire-Loader


早速svgアニメーションの制作方法からWebページで表示するまで書いていきます。

#目次
+ AfterEffectsでアニメーションを制作
+ 拡張機能「Bodymovin」でjson形式でファイルを吐き出し
+ Lottieを使ってWebページで再生


##AfterEffectでアニメーションを制作
アニメーションの制作にはadobe製品の「AfterEffects」を利用します。
https://www.adobe.com/jp/products/aftereffects.html
svgアニメーション制作じゃなくても普通に触ってて楽しいのでadobeが触れる環境の人はぜひ触れてみてもらいたいです。

Web上でsvgアニメーションを作れるサービスなんかもいくつかあって試してみましたが、
やはりAfterEffectsで制作するのが一番思い通りのものが実現できました。

具体的なAfterEffectsの使い方は長くなるので割愛させていただきますが、
youtubeを2,3本見るとなんとなく感覚掴めます。
[【超初心者向け】はじめてのAfter Effects。簡単なアニメーション作成の流れ](https://youtu.be/JSDQp6qQOro)
[モーショングラフィックス汎用テクニック〜いろんなシェイプが散る演出〜/Adobe After Effects CC](https://youtu.be/iGsTbcL5VkI)
ここらへんとても参考になりました。

##拡張機能「Bodymovin」でjson形式でファイルを書き出し
AfterEffectsで制作したアニメーションをweb上で読み込むためにjsonファイル形式に変換します。
アニメーション作るのは後回しでとりあえず試してみたい方は[LottieFiles](https://lottiefiles.com/)から適当なものをお借りしてみるといいかもです。

では吐き出し方法です。
AfterEffectsの拡張機能である「Bodymovin」をインストールしてください。
インストールはこちらから
https://exchange.adobe.com/creativecloud.details.12557.html

インストールが完了したら、書き出したい対象のコンポジションを選択してある状態で、
メニューバーから「ウィンドウ」>「エクステンション」>「Bodymovin」へと進んでください。
![スクリーンショット 2021-03-09 21.42.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67190/5a82c423-fa98-ffd7-0fcc-4430cbaa1660.png)

別ウィンドウでBodymovinのレンダリング設定画面が現れます。
![スクリーンショット 2021-03-09 21.47.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67190/67c8725c-5c38-d2da-c5e5-e35a992c8fc8.png)
1:レンダリング対象のコンポジションを選択
2:レンダリング先のパス
3:レンダリング開始
の順でポチポチ進めてください。
「Settings」で細かな設定だったりデモも出力できるようですが、そのままでたいてい大丈夫です。

レンダリングが終わると指定したパスにjsonファイルが書き出されているかと思います。
これでアニメーションの書き出しまで完了です。

##Lottieを使ってWebページで再生
書き出されたjsonファイルを実際にwebページで再生するために、Lottieを利用します。
とりあえずコード一式を載せますね。

```html
<div id="lottie"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById("lottie"), // アニメーションをいれるDOM
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'data.json' // アニメーションjsonのパス
  });
</script>
```

アニメーションを入れる要素を今回は「lottie」というidで用意しておきました。
LottieをCDN経由で取得して、`lottie.loadAnimation`でアニメーション設定をしてます。
これで先ほど書き出したsvgアニメーションがwebページ上で動き始めるはずです。（簡単☆）


以上までがsvgアニメーションの作成、書き出しからwebページで再生するまでです。
お疲れ様です。

かなり掻い摘んでの解説になったかと思いますが、これだけのことでリッチな見た目を再現できるって最高ですよね。
より細かい解説なんかはここが参考になるかと思います。
https://photoshopvip.net/121220


#cssで頑張るのやめてもうアニメーション全部svgにしよーぜ。
嘘です。
cssで再現できることの多さはQiitaを見ていてよく思い知らされてます。本当にすごいです。

けどいざ自分でcssを頑張ってアニメーションやるぞってなると、その実現のために結構頭使いますよね。
そのアニメーションのためだけの余分なdivとかめちゃくちゃ置いたりしてなんか汚いコードになっちゃうこともあるかと。
（タイミング調整とかも地味にめんどくさい）

作りたいアニメーションがイメージできてるならもうパパッとAfterEffectsで作っちゃうのが結局楽かなという結論に至りました。
汎用性もあるしね。

ちょっとピコンって動くくらいならcssでやっちゃう方が楽だけど、
ちょっとリッチなページ実装したいときの選択肢として持っておくと良いかもです。
Mac用のコマンドラインツールswnsを作りました

## 何ができる？

面倒なマウス操作なしでネットワークサービスを簡単に切り替えられます。
[![matoruru/swns - GitHub](https://gh-card.dev/repos/matoruru/swns.svg?ver=0.1)](https://github.com/matoruru/swns)

swnsは**SW**itch **N**etwork **S**ervicesの略です。

## きっかけ

お家で働くようになってからVPNの利用が増えて、ネットワークサービスを頻繁に切り替える必要が出てきました。

ネットワークサービスとは以下の部分を指します。
![Screenshot 0003-03-09 at 9.30.07 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304979/0e76bcaa-5c7b-de49-0456-5ca9cddb2710.png)

こちらを毎回マウスでぽちぽちクリックして切り替えるのが苦痛だったので、サッと切り替えられるようにコマンドにしました。

## 動作例

`swns`コマンドを叩いて、有効にしたいサービスを選択肢の中から選べば完了です。
![screen-recording.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304979/a30d34bd-7d7d-f3a5-71ea-8e5008990de7.gif)

## インストール方法

[ここ](https://github.com/matoruru/swns)からも見れます。

1. 以下のコマンドを実行します。

    ```sh
    $ curl -o ~/.local/bin/swns \
        --create-dirs https://raw.githubusercontent.com/matoruru/swns/main/swns

    $ chmod +x ~/.local/bin/swns
    ```

1. インストールが完了したことを確認します。

    ```sh
    $ type swns
    ```

    コマンドが見つからなければ 3. の手順を試します。

1. 各ファイルに以下の文を追加してPATHを通します。
    - bashの場合:

        ```bash:~/.bash_profile
        export PATH="$PATH:~/.local/bin"
        ```
    - fishの場合:

        ```fish:~/.config/fish/config.fish
        set -x PATH ~/.local/bin $PATH
        ```

## 使い方

```
$ swns
```

## まとめ

現時点ではWi-Fiしか対応していないですが、欲しくなったり要望があればBluetoothなど他のものも追加するかもしれないです。

お役に立ったらうれしいです！
（調査中）Power Automate DesktopとMicrosoft365のログインユーザが違う→会社ネットワークに入れない。有線LANはOK。

■したこと
・会社PCにPower Automate Desktop（以下PAD）をインストール
・それぞれ以下でログイン
　　PAD：ユーザA（個人用ユーザ）
　　　　　※ユーザBで入ると「Microsoft Dataverseデータベースがありません」エラーになる、
　　　　　　色々設定する権限がないためログインを諦めた
　　Microsoft365：ユーザB（会社で自分に割り当てられているビジネス用ユーザ）

■起きたこと
・会社の無線のアクセスポイントに接続できない。。。有線ならOK。
　接続できないというか、接続にいくけど許可されない感じ。

PADをアンインストールして再起動するとつながる。
もう一度PADインストールしてみたらつながらなくなり（再現）、アンインストールして再起動するとつながる。

★2021/06/25追記
同じ現象が起きたから、Twitterで情報をいただきました。ありがとうございます。

その方の場合は「PADが、勝手にPCに大量の証明書をインストールしてしまうので、PCが端末認証する際に違う証明書を使ってしまうため」だったそうです。
解決策は「無線のプロファイルで、証明書のフィルタリング設定をして、会社NWに接続する際の証明書を指定するようにした」とのことです。
Apache：概要1　httpd.confの構成(ディレクティブ)

　　　目的：apacheの機能を大枠で捉えていくため
　　　参照：サーバ構築の実際がわかる Apache[実践]運用/管理 
1■httpd.confの構成
-
http.conf=コメント+【コンテナ指示子+[ディレクティブ+引数]＋/コンテナ指示子】

・コンテナ指示子=httpd.conf全体にディレクティブの設定を反映させるのではなく、
　　　　　　　　指示子で区切ったブロック内の設定ファイルのみに
　　　　　　　　ディレクティブが適用されるようにする
・ディレクティブ=目的のファイルやパスについて、引数を元に設定を行う
・コンテキスト=コンテナ指示子やディレクティブには、使用制限や条件があるため
　　　　　　　条件に沿ったコンテナ指示子やディレクティブ、パスなどを
　　　　　　　コンテキストと呼ぶ
2■コンテナ指示子の例
-
<"Directory"> ディレクトリパス~<"/Directory">
指定されたディレクトリにのみ設定が適用される

他にもfile指示子やlocation指示子がある

3■ディレクティブの例
-
ServerRoot パス名
httpが利用するトップディレクトリを決定する
ServerAdmin　メールアドレス
サーバ管理者の連絡先メールアドレスを指定

4■便利な機能
-
￥：行を分割できる
分割前)
Include conf/extra/httpd-multilang-errordoc.conf
分割後)
Include conf/extra/￥
httpd-multilang-errordoc.conf

5■重要
-
ディレクティブには
DocumentRoot ディレクトリパス
UserDir 公開ディレクトリ
という種類がある

このディレクティブにhtmlで記載したファイルのパスを入れるとファイルが表示されるのかな？
htmlはまだ描けないので、今度htmlのソースコードを入れて実験してみたい。

全体通して覚えることが多いが、非常に大切な部分なので知れてよかった。
【初心者向け】フォントサイズの指定は10pxより小さくはならない

# どうも7noteです。フォントサイズの指定は10pxより小さくしないようにしましょう。

WEBサイトを作成するときに`font-size`でフォントの大きさを指定できますが、
**フォントサイズは10pxより小さくならないように気をつけましょう！**

## なぜフォントサイズは10px以下にしてはいけないのか？

**結論：いけないわけではないが、対応していないブラウザが多いので指定しても効かない。**

たとえばGoogleChromeで`font-size:5px;`と指定しても、効きません。
最も小さいサイズは10ｐxになります。

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/7246bbbd-4529-7acd-d9f2-35db84bb7976.gif)

ではなぜブラウザで小さい文字に対応していないのか。
**webサイトに訪問した人が読めるようにしましょうという意味で最も小さいものが10pxになっています。**

PC表示であれば16px前後。スマホであれば14px前後を目安にデザインを作成するのが一般的です。その中でも小さい文字は10pxまでで作成するようにしましょう。

## どうしても小さい文字を入れたい時の対応策

**①cssで要素を縮小する**

```css
.mini-size {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
}
```

`scale()`で倍率を指定することができます。上の場合であれば、0.5倍、つまり半分のサイズになります。10pxを指定しているところに`scale(0.5)`を指定すれば、見た目的には5pxで表示しているのと同じことになります。

**②画像にする**

小さい文字でも画像にいしてしまえば表示することができます。

## まとめ

これらのように小さい文字を表示する方法はありますが、結局は**「訪問者が使いやすい、見やすいサイトになっているか」が重要**だと思います。
注意書きであまり見せたくないからといって小さな文字にするのは、見る人からすれば親切じゃないなと思うと思います。

小さくても11px〜12pxくらいがいいかなと思います。（※個人的な意見）

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
簡単なHTML＆CSS を描いてみた①

##今回の経緯##
・HTML&CSSの学習を始めて３日
progate初級編が終わったこともあり、
アウトプットがてら作成。

##HTML##
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <title>HY洋菓子</title>
</head>

<body>
　<div class="header">
    <h1>洋菓子専門店HY　三重店</h1>
　</div>

  <div class="contents">
    <img class="logo" src="https://illust.download/wp-content/uploads/download/christmas75mM8.jpg">
  </div>

  <div class="syokai">
    <h2 class="syokai-text">洋菓子専門店HYにようこそ</h2>
    <p>このページでは人気のケーキを紹介します</p>
  </div>
<main class="main">
  <h2>いちごショート</h2>
<div class="ichigo-short">
 <img class="ichigo" src="cake01.png" >
</div>
<h2>モンブラン</h2>
<div class="monnburan">
 <img class="kuri" src="cake02.jpg"> 
</div>
</main>


<footer>
  <h1>Copyright ケーキハウス Co.,Ltd. All Rights Reserved</h1>
</footer>
</body>


</html>
```

##CSS

```css
syokai-text{
    font-weight: bold;
    text-align: center;
    margin: 0px;
}
.syokai p {
    text-align: center;
    margin-top: 0px;
}
.syokai{
    border-top: 1px solid orange ;
    border-bottom: 1px solid orange;
    padding-bottom: 0px;
    height: 60px;
}

.main img{
    width: 100%;
}



footer{
    font-size: 7px;
    text-align: center;
    background-color: orangered;
    padding: 10px;
}
```
##感じたこと　課題

・progateでスラスラできても、実際作成してみるとdivや要素の対応関係、タグ付など戸惑うことが多かった。
また、画像の貼り付けに関してはしっかりディレクトリ構造を理解する必要があると感じた。
今後もう少しこのデータを元にアウトプット作業を続け、より理解を深めたい。
[Git] コミットメッセージの変更方法

# 直前にコミットしたメッセージの変更

```
$ git commit --amend -m "変更したいメッセージ"
```

本当に変更されているか確認したい場合は `$ git log --oneline` を実行して確認できます。(ログは `q` を入力して抜けれます。)

# 2つ以上前にコミットしたメッセージの変更
以下を実行するとvimエディタが開かれるのでvimエディタを操作していきます。

```
$ git rebase -i HEAD~1
```

2つ前にコミットしたメッセージを変更したい場合は `1` の部分を `2` にすれば変更可能です。(`$ git rebase -i HEAD~2`)

##vimエディタを操作する
### 入力モードに切り替える
vimエディタが開かれた状態で `i` を押し、最下段に `INSERT` が表示されれば入力モードの切り替えに成功しています。
その状態で、修正したいコミットの `pick` を `edit` に書き換えます。
(ここではコミットメッセージは変更しません。)
###コマンドモードに切り替える
次に　`Esc` 押します。最下段の `INSERT` が表示されなくなったらコマンドモードの切り替えに成功しています。これによって先ほど書き換えたところが保存されます。
###上書き保存をしてvimエディタを終了する
次に `:wq` を入力して、上書き保存をしてvimエディタを終了させましょう。

##コミットしたメッセージの変更
直前にコミットしたメッセージの変更と同様にここで以下を実行します。

```
$ git commit --amend -m "変更したいメッセージ"
```

次に以下を実行して変更完了です。

```
$ git rebase --continue
```
Rails ユーザーと投稿の紐付け


# ユーザーと投稿の紐付け


まずはpostテーブル(投稿用テーブル）に`user_id`というカラムを追加する為にマイグレーションファイルを作成します。

```
  $ rails g migration add_user_id_to_posts
```

そしてchangeメソッド内に``add_column :posts,:user_id,:integer``を追加します

``` ruby:add_user_id_to_posts.rb
  def change
    add_column :posts,:user_id,:integer
  end
```
変更を反映させる為``db:migrate``します

```
  $ rails db:migrate
```
これでpostsテーブル内に``user_id``カラムが追加されました。


そして次はpostコントローラー内の``create``アクション（投稿を作成するアクション）で``user_id: current_user.id``を追加します。

``` ruby:posts_controller.rb
  def create
      @post = Post.new(content: params[:content],
      user_id: current_user.id)
  end
```
そうするとユーザーと投稿の紐付けができる様になりました。


#紐付け出来てるか確認

本当にユーザーと投稿の紐付けが出来ているか確認する為に投稿の詳細ページで投稿の作成者のみ編集、削除リンクが表示される様にします。

deviseを導入済みなのでdeviseのヘルパーメソッドの``current_user``を使って次の様にコードを追加します。

``` ruby:posts/show.html.erb
  <% if @post.user_id == current_user.id %>
     <%= link_to("編集", "/posts/#{@post.id}/edit") %>
     <%= link_to("削除", "/posts/#{@post.id}/destroy", {method: "post"}) %>
  <% end %>

```
すると投稿者のみ編集、削除ができる様になっていると思います。


以上でユーザーと投稿の紐付け完了になります。　　　　　

お疲れしたッッ!!
[Drupal] Viewsのまぎらわしい用語「履歴データ」「実際のコンテンツ」

ビューを作成するときに「履歴データ」の意味を勘違いしてて40個近くフィールドを設定し直す羽目になってしまいました。
というわけで今回は同じ過ちを繰り返さないようにメモ。

## 履歴データ
**コンテンツリビジョン**でビューを作成すると、フィールドのカテゴリーに必ず**履歴データ**という言葉が入ります。

![スクリーンショット 2021-03-09 20.12.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/73dc3738-ec15-4c89-86ab-bbedb2831283.png)

「履歴データ」なんて言葉、Drupalの他のコンポーネントでは全く出てこないので、ぱっとわからない人が多いと思います。私もそうでした。

これは単純に「**このリビジョンのデータ**」という意味です。

こんな感じでフィールドを設定すると、
![スクリーンショット 2021-03-09 20.33.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/402d4fbf-c4e7-dafb-f271-5f0af87b2b7e.png)

こんな感じでリビジョンそのもののフィールド値が表示されます。（このビューではNID 4のノードの全てのリビジョンのタイトルと本文を表示しています。）
![スクリーンショット 2021-03-09 20.33.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/adc4a10b-9330-174a-24f4-25b85d73bc71.png)


## 実際のコンテンツ
コンテンツやコンテンツのリビジョンでビューを作成すると、リレーションに**Content**という項目が現れます。

![スクリーンショット 2021-03-09 20.13.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/59364b27-6c7f-84c1-d6fd-984fbe1309f6.png)
（なんで2個あるのか不明）

これを選択すると、「**コンテンツリビジョンから実際のコンテンツを取得します。**」というリレーションが組まれます。
![スクリーンショット 2021-03-09 20.12.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/1794f8b5-d7af-88c8-f779-759abad07a2e.png)

**実際のコンテンツ**ってなんでしょう？これも耳慣れない言葉ですね :thinking: 
実際に動かしてみてわかったのですが、これは**このリビジョンが属するノードのデフォルトのリビジョン**のことなんですね。

「デフォルトのリビジョン」はノードの閲覧画面に行ったら表示されるリビジョンのことです。
こちらも記事でも軽く説明してるので詳しく知りたい方は読んでみてくださいね。

https://qiita.com/863/items/f669a64289bc424b76b4
 
念の為このリレーションを使ったフィールドを追加してみましょう。
![スクリーンショット 2021-03-09 20.51.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/812e3b3d-55a0-044d-d667-992ffd942916.png)
（これまたまぎらわしくてすみません。**上の行**が「実際のコンテンツ」のリレーションを使えるフィールドです）

![スクリーンショット 2021-03-09 20.51.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/7ed1b7b1-3212-19e6-7060-c4164afb5ecc.png)

最初に作成した本文フィールドの下に配置します。
![スクリーンショット 2021-03-09 20.56.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/2e74356b-4463-a614-3600-ce9dd253c2e5.png)

結果はこうなります。
![スクリーンショット 2021-03-09 20.54.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/e1962769-13ad-d597-f106-5ad94bf01b3f.png)

全部の行で6回目のリビジョンの本文を表示していますね。それはこのノードにおけるデフォルトのリビジョンが6回目のリビジョンだからです。（ノードのリビジョン一覧で黄色く表示されるリビジョンがデフォルトのリビジョンです。）

![スクリーンショット 2021-03-09 20.38.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/38f6a507-6f07-bdbe-8f18-55998dd2c581.png)


というわけで、「履歴データ」「実際のコンテンツ」の紹介でした。

Drupalの公式ドキュメントはかなり改善してきてて、コーディングする部分についてはほとんどのことが公式ドキュメントか各種フォーラムでわかるようになってきてるのですが:clap:、こんな感じの**仕様の謎**みたいなものはまだまだたくさんありますね。OSSなので仕方ないかな。イシュー出したり、説明残したりしてストレスを減らせるようにしていきたいですね。

（とクールに締めくくろうとしてますがフィールド40個作り直さないといけないとわかったときはブチ切れボンバーでした:joy: ちなみに構成ファイルを書き換えればなんとかなるかと思ったんですけど、うまくいかなかったので結局手動で直しました。時間的には1時間くらいなんだけど、延々と仕様書と設定画面にらめっこしてポチポチする作業、できればやりたくなかった笑）
Goの単体テスト 学習記録



# 初めに
この記事は私がGo言語のテストを実装するまでに通った道の記録を示したものです。
どんな資料やネット記事を参考にして学習を進めたのかをメインに記載していきます。
テストこれから勉強する人の道しるべの一つとなれば幸いです。
具体的な知識は記載するURLを見てください。

## テストの参考
僕がテスト学ぶ上で参考にした記事です。

https://future-architect.github.io/articles/20200601/

https://swet.dena.com/entry/2018/01/16/211035

https://qiita.com/nirasan/items/b357f0ad9172ab9fa19b

# 単体テストとは？
Wikipediaでは以下のように記述されている。
>コンピュータープログラミングでは、単体テストはソフトウェアテスト方法であり、ソースコードの個々のユニット（1つ以上のコンピュータープログラムモジュールのセットと関連する制御データ、使用手順、および操作手順）をテストして、それらが使用に適しているかどうかを判断します. [wikipedia-Unit_testing](https://en.wikipedia.org/wiki/Unit_testing)

これをGo言語に当てはめてかみ砕いて説明すると、
ソースコードのパッケージ単位（model層やらhandler層やら）で単体テストを実行して、それらが使用に適しているかどうかを判断します.って感じになるかと思います。
実務では実装したコードとセットで単体テストを実装し、PRを出すことでコードの品質の保証としたりするそうです。

単体テストの他にも結合テストや機能テストがあるんですがこれらの説明は割愛します。
package単位での品質を保証するのが単体テスト（車でいうネジや歯車）、
package同士の嚙み合わせを確認するのが結合テスト（歯車の嚙み合わせ）、
機能テストは一連のある機能が正しく動作するか確認するテスト（ドアとかハンドルとか）
みたいな感じです。

# DI(Dependency Injection) について
>依存性の注入（いそんせいのちゅうにゅう、英: Dependency injection）とは、コンポーネント間の依存関係をプログラムのソースコードから排除するために、外部の設定ファイルなどでオブジェクトを注入できるようにするソフトウェアパターンである。[wikipedia-依存性の注入](https://ja.wikipedia.org/wiki/%E4%BE%9D%E5%AD%98%E6%80%A7%E3%81%AE%E6%B3%A8%E5%85%A5)

依存性の注入とありますが、オブジェクトの注入と考えた方が理解しやすいです。
Go言語でいうとstructが一番オブジェクトに近いですね。
Go言語においては各層のパッケージ間のstructの関係はインターフェースを用いて抽象化され、具体的にどのstructを使用するかはそれらのパッケージ外で記述することで、パッケージ間の結合度を低くできます。

## GoでDIを利用した実装をしてみる
Go言語ではstructなどで宣言した型にメソッドを実装していくことによって、インターフェースを満たします。
つまり明示的にインターフェース実装の宣言をする必要はなく、インターフェースで定義されているメソッドすべてが任意の型に実装されていれば、その型をインターフェースを満たす型として扱うことができます。[(A Tour of Go)](https://go-tour-jp.appspot.com/methods/10)

それを踏まえて、この記事を読むことをお勧めします。
DIを使用するメリットなども説明されていて、参考になりました。


https://qiita.com/yoshinori_hisakawa/items/a944115eb77ed9247794#di%E3%81%A8%E3%81%AF

# Mock について
やっと単体テスト実装の準備が整いました。ここからは単体テストの重要項目、Mockについて学習します。
Mockとは本番でつかっている構造体をテスト用に作りかえた構造体です。
テスト対象の構造体が依存している構造体をMock構造体をに差し替えることで望むテスト条件を用意に作り出すことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519632/5b72e62c-354c-6aea-415c-488e009272ba.png)

この記事のモックの実装方法が参考になりました。

http://haya14busa.com/golang-how-to-write-mock-of-interface-for-testing/

## Mockの対象
Go言語でモックすべきなのは下位パッケージのみではありません。ランダム値生成や時間に関するものなど、テストを実行するたびに変わるような部分はテスト対象の関数の外に出して、モックする必要があります。

以下ではUUIDやTimesなどのモックについて学習するうえで参考になりました。

https://devblog.thebase.in/entry/2018/12/04/110000

#DB操作を含むテスト
DB操作を含むテストではDBインスタンスをどうするかの問題があります。
選択肢はテスト用にDBを用意するのか、go-sqlmockを使用するかの２択です。
詳しくは以下で述べられていました。参考になった。

https://qiita.com/seya/items/582c2bdcca4ad50b03b7

## go-sqlmockについてのつまづき
これは筆者の個人的なつまづきなのですが、go-sqlmockについてその呼び出し方や関数名などから不信感を抱き、
正しくは以下のようにしっかりとdatabase/sqlパッケージをモックする必要があるのでは？と思っていました。
ちゃんとgithubのリポジトリを見ていればこんな思い違いは起こさなかったのですが...

参照1：[mercari.go #1 で「もう一度テストパターンを整理しよう」というタイトルで登壇しました](https://codehex.hateblo.jp/entry/2018/07/03/211839)
参照2：[Goのdatabase周りのテストではinterfaceを最大限に活用しようという話](https://tsuyoshi-nakamura.hatenablog.com/entry/2019/07/01/094425)

実際には[database/sql/driverパッケージ](https://golang.org/pkg/database/sql/driver/)などを使っていい感じにモックしてるっぽいです。
（駆け出しエンジニアの見解）

https://github.com/DATA-DOG/go-sqlmock

# 最後に
学習した内容を思い出しながら書いていたのですが、自分で断片的な内容になってしまったと反省しております。
いろいろ書き記しながら勉強して、次はもっといい内容になるよう精進します。
ティラノスクリプトのデータ管理について

#ティラノスクリプトについて
https://tyrano.jp/

ティラノスクリプトはHTML5製アドベンチャーゲーム制作キットです。
よくノベルゲームで使われるものですね。
このティラノスクリプトでデータ管理をどのように行っているかを考えてみた。

（データ管理とか言ってるけどこれがデータ管理なのかどうかわからないし、ティラノスクリプトを使ったのも初めてなので大目に見て下さい）

#データ管理
そして私はティラノスクリプトでSLGのデータ管理の基盤を作ってみた（ノベルゲームでなんでSLGっていうのは別の話）

まず、ティラノスクリプトのフォルダの仕組みについて。

```
tyranoscript----data
             |
             ---tyrano
             |
             ---index.html
             |
             ---readme.txt
             |
             ---studio_config.json
```
という大まかにこの構造を取っています。ここで基礎的なことしかしないのでこのフォルダの中のdataファイルの中身を見てみる。

```
data----bgimage
     |
     ---bgm
     |
     ---fgimage
     |
     ---others
     |
     ---scenario
     |
     ---sound
     |
     ---system
     |
     ---video
     |
     ---.DS_Store
```
この中でデータ管理で必要なのはscenarioファイルとothersファイルが必要です（より詳しくなると他のも必要かもしれない）

ここからデータ管理の記述について話していこうと思います。

データ管理をする方法としてjavascriptを使用します。記述の方法は

```javascript:example.js
with(tyrano.plugin.kag) {
    //データ管理をする適宜記述する
    TEST = TT // 例
    }
```
となります。ただこれだけでは何も起きません。そこでscenarioファイルの中を考え行こうと思います。scenarioファイルの役割はファイル名にもあるようにゲーム本体の記述をしていくと考えて構いません（多分）
scenarioファイル内にfirst.ksっていうファイルがあるのでそれを使っていこうと思います。まず呼び出しについて先ほどのexample.jsファイルを呼び出しましょう。

```:first.ks
　　[loadjs storage="example.js"]
```
これで先ほどotherフォルダ内で作成したjsファイルの呼び出し・読み込みができました。これでjsファイル内にある変数TESTを呼び出すことができます。ただこれだけではTTいう変数に何が入っているかわかりません。そこでTTという変数に数値を入れたいと思います。

```:first.ks
    [eval exp='TT = 0']
    [loadjs storage="example.js"]
```

これでTTは0という数値が入り、TESTという変数に0が入ります。

次にこのTESTの変数を表示させてみましょう

```:first.ks
    [eval exp='TT = 0']
    [loadjs storage="example.js"]
    [emb exp='TEST']
```
これでTESTに代入された値0が表示させることができます。

データ管理の基本的部分は以上です。次に主にデータ管理を用いてどんなことをしているかを話したいと思います。

ここでexample.jsファイルのほかにexample2.jsファイルを用意します。

```javascript:example2.js
with(tyrano.plugin.kag) {
    TEST2 = TT2
    WA = TEST2 + TEST
    }
```

そしてscenarioフォルダのfirst.ksを以下のように変えて、first2.ksを作成します

```:first.ks
   [eval exp="TT = 2"]
   [loadjs storage="example.js"]

   @jump storage = 'first2.ks'
```

```:first2.ks
   [eval exp="TT2 = 5"]
   [loadjs storage="example.js"]
   [loadjs storage="example2.js"]
   [emb exp='WA']
```

これらの動作はまずexample2.jsはTEST2という変数にTT2という変数の値を入れてTEST2とTESTの値の和をWAに代入しているところです。

first.ksでは先ほどのようにTTという変数の中に2を入れてexample.jsを呼び出しTESTの値が２となりfirst2.ksを呼び出す

first2.ksではTT2に5を代入しexample.jsとexample2.jsを呼び出す。ここでexample2.js内の動きを見てみる。先ほど言ったとおりTEST2とTESTの和をWAに入れている。ここでTEST2は最初に[eval exp="TT2 = 5"]のように記述をしたのでTEST2の値は決定するがこのままだとTESTの値がわからない。そこでexample.jsを呼び出すことでTESTの値がわかりWAを出すことができる。

このようなことを使って今ティラノスクリプトでSLGのデータ管理を作ってます。

#最後に
ティラノスクリプトのデータ管理について記述しました。本当に基本的なことしかまだ学んでないのでこれが正解かどうかわかりませんが頑張ってSLGを作っていこうと思います
BadStore.netのログアウトの仕方

BadStore.netはログアウト機能を持ちません。
私もログアウトできなくて悩んだので共有します。

1  まず、初めにログインします。
![スクリーンショット 2021-03-09 20.46.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163273/db7a3a75-b26a-c0d3-9635-1717e8bb649e.png)

2  googleChomeで右クリックして、検証をクリックします。
![スクリーンショット 2021-03-09 20.48.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163273/23daceff-2abd-dd9f-90c2-d853149a43d1.png)

3  こういった画面が出ます。
![スクリーンショット 2021-03-09 20.50.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163273/c69ce5d5-00f6-49ba-4232-9be0b801f018.png)

4 「Application」 > 「Cookies」　とクリックしてください。

5 SSOidのところで右クリックをして、「Delete」をクリックしてください。
![スクリーンショット 2021-03-09 20.41.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163273/4ac994f3-4f65-dc8f-c909-c1697f754c0d.png)

6 SSOidが消去されたら、更新して見てください。
　ログアウトされているはずです。




以上となります。
UIScrollViewの上のスペース（隙間）を無くす

UIScrollView、デフォルトでは上下にスペースできますよね。
これを無くすには、

```swift
override func viewDidLoad() {
    scrollView.contentInsetAdjustmentBehavior = .never
    scrollView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    super.viewDidLoad()
}
```
super.viewDidLoadの前に呼ぶのがポイントです。

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
URL クエリパラメータの値が日本語で Safari だけ挙動がおかしいときの対処法

URL クエリパラメータの値が日本語で、その日本語の値を JavaScript で処理する際に、Safari と Safari 以外のブラウザとで挙動が異なりしばらくハマりました。今回は、そのとき取った対処法を共有します。

原因は、[Unicode の正規化形式](https://ja.wikipedia.org/wiki/Unicode%E6%AD%A3%E8%A6%8F%E5%8C%96)の違いでした。

UTF-8 にはさらに細かい種類があって、一般的に UTF-8 というと NFC でエンコードされたものを指すことが多いです。一方 macOS や iOS では、NFD でエンコードされたもの（UTF-8-MAC）を指します。

私が直面した問題は、ある JavaScript のプログラムを macOS ないしは iOS で実行したときに、クエリパラメータの値（日本語）が、Safari 以外では NFD で正規化されてパーセントエンコーディングされ、Safari の場合は NFC で正規化されてパーセントエンコーディングされてしまうというものでした。

Chrome や Firefox では全く再現しません。Safari では頻度こそ高いものの毎回ではないので、どのような条件で起こるのか完全な特定まではできていませんが、URL を直打ちしたときに最も再現率が高かったように思います。

以上のことから、以下のように対処して解決しました。

```js
let userAgent = window.navigator.userAgent;
if (userAgent.indexOf('Safari') != -1) {
  str = str.normalize('NFD');
}
```
stateを更新してもレンダリングされない【React】

# 問題
stateで管理している配列の中身を変更しても表示が更新されない(再レンダリングされない)．

# 解決方法
配列の中身を変更するのではなく、**新しい配列を作り，それをsetState**する．

# 具体的に
例えば，以下のコードで，stateの配列は更新されますが，レンダリングは行われません．

```Javascript
// コンポーネント
function Example(){
  const [stateArray, setStateArray] = use State([0, 1, 2]); // state
  // 略
  copyArray = stateArray; // stateの配列をコピー(参照渡し)
  copyArray[0] = copyArray[0] + 1; // 配列を変更する処理
  setStateArray(copyArray); // stateに設定
  // 略
}
```

これは，stateの配列を参照渡しによってコピーしている部分を

```Javascript
  copyArray = stateArray; // stateの配列をコピー(参照渡し)
```

以下のように，値渡しに変更することで解決できます．

```Javascript
  copyArray = stateArray.slice(0, stateArray.length); // stateの配列をコピー(値渡し)
```

# 原因
stateの更新やレンダリングについて調べていたところ，[公式ドキュメント](https://ja.reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update)に以下のような記述がありました．
> 現在値と同じ値で更新を行った場合、React は子のレンダーや副作用の実行を回避して処理を終了します（React は Object.is による比較アルゴリズムを使用します)

さらに，[Object.jsのリファレンス](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#description)を確認すると，
>Object.is() determines whether two values are the same value. Two values are the same if one of the following holds:
>...
> ・ both the same object (meaning both values reference the same object in memory)
>...

とありました．

つまりReactでは，**参照が同じ場合は変更なしとみなされ**，再レンダリングが行われないようです．

そのため，配列の中身を変更しただけだと更新されないということですね．
【Go言語(golang)】GCPのCloud Storageからファイルを取得する方法

Cloud Storageの[公式ドキュメント](https://cloud.google.com/storage/docs/apis)に基づいて、バイナリファイルを取得していきたいと思います。

※[Goリファレンス](https://pkg.go.dev/cloud.google.com/go/storage)のサンプルコードを使用します
※Cloud Storageにはすでに画像が入っている状態とします(今回はhoge.txtとfuga.pdfを入れてあります)


## サービスアカウントの入手
[GCP：サービス アカウントとして認証する](https://cloud.google.com/docs/authentication/production?hl=ja#linux-or-macos)の手順にしたがって、まずはサービスアカウントのJSONファイルを取得します。
コードを記述して取得する方法もありますが、初心者は「サービス アカウント キーの作成」からGCPのコンソールで取得をおすすめします！
![service.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924176/6871a3bc-1389-4fff-2772-6b725205a703.png)
JSONファイルが取得できたらokです。

## 準備
JSONファイルが取得できたら、いよいよGoでのコーディングです。
この時、環境変数`GOOGLE_APPLICATION_CREDENTIALS`に取得したjsonのパスが入ってないと失敗します。
環境変数に設定できていない人は、以下の通り、exportコマンドで環境変数に設定してください。
※このコマンドは、環境変数にJSONまでのパスを登録しています。
![hoge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924176/3bb6ba3f-960e-d771-0d76-af3d9543a601.png)

## ファイルの一覧を取得する方法

```go
package main

import (
	"cloud.google.com/go/storage"
	"context"
	"fmt"
	"google.golang.org/api/iterator"
	"log"
)

func main() {
	// clientを作成します
	ctx := context.Background()
	client, err := storage.NewClient(ctx)
	if err != nil {
		log.Fatal(err)
	}

	// bucketを作成します
	bkt := client.Bucket("bucket名を入れます")

	// 絞って検索したい人はqueryを設定します
	query := &storage.Query{Prefix: ""}

	// Storageに登録されているファイルの一覧を取得します
	var names []string
	it := bkt.Objects(ctx, query)
	for {
		attrs, err := it.Next()
		if err == iterator.Done {
			break
		}
		if err != nil {
			log.Fatal(err)
		}
		names = append(names, attrs.Name)
	}
	fmt.Println(names)

}
// [hoge.txt fuga.pdf]
```

## txtファイルの中身を取得する方法
```
// hoge.txtの中身
これはテストです
```
```go
package main

import (
	"cloud.google.com/go/storage"
	"context"
	"fmt"
	"io/ioutil"
	"log"
)

func main() {
	// clientを作成します
	ctx := context.Background()
	client, err := storage.NewClient(ctx)
	if err != nil {
		log.Fatal(err)
	}

	// バケットからtxtファイルを取得
	rc, err := client.Bucket("test0308").Object("hoge.txt").NewReader(ctx)
	if err != nil {
		log.Fatal(err)
	}

	// 取得したファイルのファイル形式（拡張子）とバイナリを取得
	et := rc.Attrs.ContentType
	bi, err := ioutil.ReadAll(rc)
	if err != nil {
		log.Fatal(err)
	}

	fmt.Printf("%v\n", et) // text/plain
	fmt.Printf("%v\n", string(bi)) // これはテストです
}
```

## さいごに
いかがでしたでしょうか。
cloud storageの使い方に迷っている人の手助けになればと思います。

やれることはまだまだたくさんありますので、[Goリファレンス](https://pkg.go.dev/cloud.google.com/go/storage)から探してみるといいと思います。
LaravelでPermission deniedエラー

#概要
Docker x Laravelで環境を構築していてページにアクセスすると以下のエラー文が出ました。

```
The stream or file "/hoge/storage/logs/laravel.log" could not
be opened in append mode: failed to open stream: Permission denied
```

環境構築するたびにこれが出てやり方をググっていたのでメモします。

#解決策
webサーバによるファイルへのアクセス所有者じゃないので発生しているエラーです。

ですので、webサーバの実行ユーザーに所有者を変更します。

今回はnginxを利用していたので、www-dataに渡せばいいことになります(このあたりは環境によってユーザーが違うかも)。

```
docker-compose app bash
```

でappコンテナへ入り、

```
chown www-data storage/ -R
```

で所有者変更でアクセス可能となります。

`-R`　をつけることで再帰的に変更するので、storageフォルダすべての所有者を変更することができます。

#参考文献
[chmod? chown? よくわからんって人のための、ファイル権限系まとめ](https://qiita.com/t-a-run/items/239ed690ece7a011804a)
[linuxコマンドでよく出てくる、【再帰的】とは、、、](https://qiita.com/OTAGRAMER/items/0feab9fbf02e07a44915)
Ruby on Railsでpuma5系をdeployするときにsytemd関連で躓いたときの処方箋

## はじめに
先日Railsアプリをサーバーにデプロイしようとしたらpumaプロセスが立ち上がらない問題が出て躓いたのでそのメモ共有です。
記事がなかなかなかったので同じ現象が起こっている方の役に立てば幸いです

## 環境
```
ruby (2.7.1p83)
rails (6.0.3.4)
puma (5.1.0)
capistrano (3.9.0)
capistrano3-puma (5.0.4)
```

## 発生していた問題
1. deployは成功しているのにpuma processが存在しない
1. サーバー上で直接起動コマンドを叩いたらpumaは起動する
1. deploy上で使用しているコマンド（systemctl restart puma / systemctl start puma）からはエラーが返ってこない
1. systemctl status pumaではエラーが発生している模様
1. pumaのログ置き場のshared/log/staging.logには何も発生していない

## 先に結論
[capistrano3-puma](https://github.com/seuros/capistrano-puma) 5系からはsystemdが推奨されています。
今回はsystemd経由でのrbenv呼び出しの設定漏れがありrubyのversionが正しくloadingされていませんでした
`journalctl` このコマンドさえ知っていたら全て解決した。

## systemdについて
### なぜ必要か
capistrano3-puma 5系においてプロセス管理方法がsystemdになった。

### is 何
process管理ツール。再起動などいろいろ楽。

### 基本的なコマンド
```
# systemdのserviceのログをtailする
journalctl -f -u puma

# reload service file
sudo systemctl daemon-reload

# start / stop / restart / enable / disable / status
sudo systemctl (start|stop|restart|enable|disable|status) puma.service

# 設定ファイル
/etc/systemd/system/puma.service
```

### journalctl -f -u pumaを使う
`sudo systemctl restart puma.service`を行うたびに下記エラーログが出てきました。

```
 3月 09 10:00:00 systemd[1]: Started Puma HTTP Server for project_name (staging).
 3月 09 10:00:00 systemd[1]: Starting Puma HTTP Server for project_name (staging)...
 3月 09 10:00:00 app[12810]: rbenv: version `2.7.1' is not installed (set by /var/www/project_name/releases/2021000000000000/.ruby-version)
 3月 09 10:00:00 systemd[1]: puma.service: main process exited, code=exited, status=1/FAILURE
```

どうやらrbenvからうまくruby versionを呼び出せないようです。
サーバー上で直接起動時には問題ないのでsystemd経由でrbenvがうまく使えていないことを疑いました。

### systemdで環境変数を読み込む
調べているとsystemdでは.bash_profileなどに書いている環境変数を **読み込んでくれない** のでrbenvを想定通りに動かしたい場合は別途設定が必要とのこと。

`/etc/sysconfig/ファイル名` で設定するのが一般的みたいです。

```terminal
$ which rbenv
/usr/local/rbenv
```

```/etc/sysconfig/puma.env（拡張子不要ですがqiitaの制約上.env入れています）
RBENV_ROOT="/usr/local/rbenv" #上記結果をここに入れてください
```

``` /etc/systemd/system/puma.service
[Unit]
Description=Puma HTTP Server for project_name (staging)
After=network.target

[Service]
Type=simple
User=app
WorkingDirectory=/var/www/project_name/current
ExecStart=/usr/local/rbenv/bin/rbenv exec bundle exec puma -C /var/www/project_name/current/config/puma/staging.rb
ExecReload=/bin/kill -TSTP $MAINPID

EnvironmentFile=/etc/sysconfig/puma.env ### この行を追加

StandardOutput=append:/var/www/project_name/shared/log/puma_access.log
StandardError=append:/var/www/project_name/shared/log/puma_error.log

Restart=always
RestartSec=1

SyslogIdentifier=app

[Install]
WantedBy=multi-user.target
```

### 設定後
設定の再読み込みと再起動で無事pumaが立ち上がることを確認できました。

```terminal
# 設定再読み込み
sudo systemctl daemon-reload

# サービス再起動
sudo systemctl restart puma

# プロセス確認
ps aux | grep puma 
```
Create Target Array in the Given Order  〜leetcode〜

#〜問題文〜
```
Given two arrays of integers nums and index. Your task is to create target array under the following rules:

Initially target array is empty.
From left to right read nums[i] and index[i], insert at index index[i] the value nums[i] in target array.
Repeat the previous step until there are no elements to read in nums and index.
Return the target array.

It is guaranteed that the insertion operations will be valid.

 

Example 1:

Input: nums = [0,1,2,3,4], index = [0,1,2,2,1]
Output: [0,4,1,3,2]
Explanation:
nums       index     target
0            0        [0]
1            1        [0,1]
2            2        [0,1,2]
3            2        [0,1,3,2]
4            1        [0,4,1,3,2]
Example 2:

Input: nums = [1,2,3,4,0], index = [0,1,2,3,0]
Output: [0,1,2,3,4]
Explanation:
nums       index     target
1            0        [1]
2            1        [1,2]
3            2        [1,2,3]
4            3        [1,2,3,4]
0            0        [0,1,2,3,4]
Example 3:

Input: nums = [1], index = [0]
Output: [1]
 

Constraints:

1 <= nums.length, index.length <= 100
nums.length == index.length
0 <= nums[i] <= 100
0 <= index[i] <= i
```

引用元：　https://leetcode.com/problems/create-target-array-in-the-given-order/
　　


## 〜回答例〜


```ruby

def create_target_array(nums, index)
    target = []
    (0...nums.size).each do |indx|
        x = nums[indx]
        i = index[indx]
        if 0 == i
            target = [x] + target
        else
            target = target[0...i] + [x] + target[i..-1]
        end
    end
    return target
end

```

回答例引用元（一部改変）：
https://leetcode.com/problems/create-target-array-in-the-given-order/discuss/852650/Ruby%3A-On-insertion-divide-into-tow-parts-and-put-an-element-in-the-gap.
#以下、上記回答の分解分析


## 1. メソッドの定義

```ruby

def create_target_array(nums, index)
         
         〜省略〜

end
```

 
「create_target_array」というメソッドを定義。
第一仮引数＝「nums」と第二仮引数＝ 「index」と定義する。


## 2. メソッドの処理

```ruby

    target = []
  
```

空の配列「target」を定義する。


```ruby

    
    (0...nums.size).each do |indx|
          
            〜省略〜

    end
   
```
　「0〜nums.size（=配列numsの要素数）」　←　配列
　ブロック変数を「idx」として、繰り替えじ処理を行う。



```ruby

    
        x = nums[indx]
        i = index[indx]
      

```
「 x 」に対して「nums[配列の添字(=idx)]」代入する。
同様に、
「 i 」に対して「index[配列の添字(=idx)]」代入する。


```ruby

   
        if 0 == i
            target = [x] + target
        else
            target = target[0...i] + [x] + target[i..-1]
        end
   

```

【if】
もし、0 == i　であったら、配列 「target」 に 「ｘ（=nums[indx]）」を加算していく。

【else】
そうでなければ「target[0...i(=index[indx])]」   +   [x(= nums[indx])] + 「target[i(=index[indx])..-1]」

※
まずい、「...」と「..」が説明できない。。。
調べておきます。。。」


↓

処理後再びループへ。

```ruby


   return target

   
```
nums.sizeまでの分の繰り返し処理を終えたら、最終的な「target」を返却して終了。
bashのSECONDS変数の処理時間を時分秒フォーマットにする

#### SECONDS変数を利用して処理時間を計測後、分かりやすいように時分秒フォーマットに変換する

```bash:time.sh
#!/bin/bash 
# Initialize the command in seconds.
SECONDS=0 
# Program to be measured.
sleep 10
# Display the measurement time.
i=$SECONDS
((sec=i%60, min=(i%3600)/60, hrs=i/3600))
timestamp=$(printf "%d:%02d:%02d" "$hrs" "$min" "$sec")
echo "Processing time is $timestamp"
```

参考文献 

* [bashのSECONDS変数で簡単に処理時間を測定する
](https://qiita.com/mikeda/items/c6bb68dd1e4ba6434fb7)

* [bashの計算式で、秒数をHH:MM:SSフォーマットに変換する](https://qiita.com/catfist/items/890a3502e2cb9b191d91)
【C#入門】初学者がASP.NETでWebアプリを作る：第8回

#今回やること
データの可視化

#何を使うか
まず、C#（ASP.NET）で可視化しようとすると、下記のような問題があると考える。
・クエリの柔軟性を持たせるのが難しい。
・デザインが大変

できるだけユーザが各自で好きな断面で分析が出来るような可視化をしたいため、1つめがとってもネック。。。
そのため、ここはBIツール（ダッシュボード）に任せたい。
BIツールであれば、
・ユーザが自由にクエリを作成できる（反面、制限をかけることもできる）
・デザインを考えなくていい

問題点が1つあるとすると、
・Webアプリとのアカウント連携（SSO）が難しいかも？
サードパーティー認証を使用していれば簡単だと思うけど、今回はできるだけ独自認証にしたい…

以上から、BIツールの選定基準は、
・ユーザ管理ができる
・認証をカスタマイズできる
もしくは
・ページに埋め込むことができて、クエリに引数を渡せる

#選んだもの
今回はMetabaseを使ってみることにした。
https://www.metabase.com/

Dockerイメージとjarファイルがありますが、今回はjarで。
公式からjarをDLしてとりあえず起動してみます。
公式サイトにある通り、下記のコマンドで起動。
最後に完了っぽいメッセージが出ます。

```
$java -jar metabase.jar
～～中略～～
2021-03-09 18:23:46,386 INFO metabase.core :: Metabase Initialization COMPLETE
```
http://localhost:3000/ にアクセスすると下記の画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/c35483f5-bf54-16f8-4057-ec8de65fa4a4.png)

「開始しましょう」を押下すると下記の画面に。
好み？って言われるとよくわかりませんがまぁ普通に日本語。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/dc424fb9-cc29-c75f-e227-61ef5cfcc6c1.png)

管理者っぽい設定なので管理者っぽいものを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/1876c833-1c65-e3bb-cbd1-bc9c42bc1873.png)

なんとなく入力してOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/ae0712b4-e34d-d5e5-6bfd-28ab78b42f0b.png)

ここは一旦やめておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/44073e25-2393-919d-f880-59bb2d73270f.png)

使い始められそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/50f35872-01da-f9e8-d320-3381898b70fc.png)

テーブルが全部見えてますね。困りますね。
管理者画面でテーブルごとの表示/非表示、項目ごとの表示/非表示、表示名の変更ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/6307e806-c6db-ecc9-663c-1aaff97ad1b3.png)

右上の歯車マークを押し、「管理者」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/8c3c0eca-18e7-8611-ff11-8d8cfd1b8d1f.png)

「関係なテーブルを非表示にする」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/a1f1af3b-14bf-67da-fbbf-456bd0f8f63c.png)

データソースを選択して、テーブルの右端の非表示マークを押すと非表示になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/15485ad5-d1aa-97c6-a61c-9bbfd0bac5f0.png)

また、テーブルを選択すると項目ごとの設定ができます。
「列」の上の段にはデフォルトで項目の物理名が入っていますが、スクショの「受給者」のように変更することができます。これが表示名になります。
「表示・非表示」の欄を「含めないでください」にすると非表示になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57278/b08c56c9-f18b-43d0-49ac-fb527edb4e6d.png)

#そして伝説へ
デフォルトでログインユーザの情報を使ってテーブルにフィルタをかけたかったのですが、
無料版だとできないことに気づきました。のでBIツールを導入するのはいったん断念…
※yuukieiuというユーザがログインしていたら、登録ユーザ=yuukieiuのレコードだけしかSelectできない、
　というのをyuukieiuがクエリを作るときに意識しないように見えない設定で入れておきたかった。
　（サンドボックス化というらしい。）

#次回予告
Figmaを使ってデザインする
映像と音声が別々のファイルになっているWebMファイルを一つのファイルにまとめる...って誰に必要？って感じだけど、最近頼まれたので手順を整理しておく

# はじめに

映像のWebMファイルと音声のWebMファイルを渡され、「これを一つのファイルにして下さい！」とお願いされたので、ちょっと試行錯誤したから手順をまとめておきます。

# 環境

- MacBook Pro(Intel)
- FFMpeg

# 準備

動画をmov.webmという名前で、音声をaudio.webmという名前で同じフォルダに保存。

# 結合

以下のコマンドで結合。

```sh:
ffmpeg -strict -2 -i mov.webm -I audio.webm -c:v copy -c:a aac -map 0:v:0 -map 1:a:0 output.mp4
```

結合したらmp4ファイルが完成するけど、mp4のファイルではないので再生できないから、拡張子をmp4からwebmに変更。

...できた！
Mac OS 11.0以上の環境でGCP接続する際はパスの指定方法に注意

# 本稿
GCPにソケット接続する際に公式では

```
./cloud_sql_proxy -dir=/cloudsql -instances=INSTANCE_CONNECTION_NAME
-credential_file=PATH_TO_KEY_FILE &
```

となっているが、

ホームディレクトリに作成したcloudsqlディレクトリを指定する際は

``-dir=/cloudsql``
ではなく

``-dir=./cloudsql``


```
./cloud_sql_proxy -dir=./cloudsql -instances=INSTANCE_CONNECTION_NAME
-credential_file=PATH_TO_KEY_FILE &
```

Mac OS 11.0以上でパスを指定する際はホームディレクトリを省略できないので、この場合は以下のようにホームディレクトリを明記した相対パスで指定しないといけない
FirebaseUI使用時、releasebuildができないエラーについて

FirebaseUI使用時、releasebuildができないエラーが発生したのでここでまとめる。

エラー表示はこちら↓

```
Pods/GoogleSignIn/Frameworks/GoogleSignIn.framework/GoogleSignIn
(GIDEMMErrorHandler_3a47e13d8ca81b41e9cdb7ef5468004a.o), 
building for iOS Simulator, but linking in object file built for iOS, file 'Pods/GoogleSignIn/Frameworks/GoogleSignIn.framework/GoogleSignIn' 
for architecture arm64
```

iOS Simulatorでarm64アーキテクチャ用のreleaseビルドができないってことらしい。



＜architecture arm64についてはこちら＞
https://qiita.com/takkyun/items/814aa45beee422a5f0c6


#解決策
TARGETのbuildsettingを開きExcluded Architectureのdebug・release両方に
arm64を追加する。

![スクリーンショット 2021-03-09 19.39.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1112697/7a9ebd67-f4bc-3d30-8e4e-5999881a1158.png)


そうすることでビルドが通った。
【Material UI】TypeScript + React + Material-UI で style を適用する方法

# Material UI とは
- GoogleのMaterialデザインを元に開発されたUIコンポーネントライブラリ
- コンポーネントの種類が豊富に用意されているため、デザインにかける工数を減らすことができる

# 書き方
追記: 公式サイトの[blog記事](https://material-ui.com/blog/march-2019-update/)では下記の書き方ではなく、 `makeStyles` を使用することが推奨されている
> We have migrated a few demos from the withStyles() API to the makeStyles() API. If you are wondering which you should use, we would encourage the use of makeStyles() where possible. withStyles() is interesting for overriding

```tsx

import * as React from 'react';
import { Theme } from '@material-ui/core/styles/createMuiTheme';
import withStyles, { WithStyles, StyleRules } from '@material-ui/core/styles/withStyles';
import createStyles from '@material-ui/core/styles/createStyles';

// styles 定義
const styles = (theme: Theme) : StyleRules => createStyles({
  root: {
    textAlign: 'center'
  },
  paragraph: {
    fontFamily: 'serif',
    padding: theme.spacing.unit * 2
  }
});

// Component の Props を WithStyles<typeof styles> で拡張
interface Props extends WithStyles<typeof styles> {
  title: string;
}

// Component 定義
const FirstComponent: React.FC<Props> = ({ classes, title }: Props) => (
  <div className={classes.root}>
    <p className={classes.paragraph}>
      { title }
    </p>
  </div>
);

// ComponentにTypeScriptコードのスタイルシートを組み込む
export default withStyles(styles)(FirstComponent);
```

## createStyles()
- 型の拡大を防ぐ

## WithStyles\<typeof styles>
- 下記と同等

```tsx
interface Props {
  title: string;
  classes: {
    root: string;
    paragraph: string;
  }; 
}
```

# 参考
- [TypeScript - Material-UI](https://next.material-ui.com/ja/guides/typescript)