OmniAICreator/Qiita-1.07M huggingface dataset:
Swift値型、参照型　初心者がイラストを使って説明してみた

##はじめに
皆さんは以下のようにほぼ同じコードを書いているのにも関わらず、
構造体ではエラーが起きて、クラスではエラーが起きない理由を説明することができますか。

###構造体（値型）

```swift
struct Sample {
    var num: Int
}

var sample1 = Sample(num: 1)
let sample2 = Sample(num: 1)

sample1.num = 2
sample2.num = 2 //=> エラー　
```

###クラス（参照型）

```swift
class Sample {
    var num: Int

    init(num: Int) {
        self.num = num
    }
}

var sample1 = Sample(num: 1)
let sample2 = Sample(num: 1)

sample1.num = 2
sample2.num = 2
```

自分はできませんでした。ところがクラスは**参照型**、構造体は**値型**ということがきちんと理解できればこの理由は説明することができ、クラスと構造体に対する理解も深まると思います。

##値型の場合
値型の場合、今回だとnumという変数を格納するための入れ物がまず作られます。そしてその入れ物に直接値を格納していきます。

sample2はletで定義されているので、入れ物の中身を後から変えることはできません。

入れ物を作って値を格納する。初心者としてはイメージ通りの挙動だと感じると思います。しかし参照型はこれとはちょっと違った方法で値をセットします。
![IMG_E3AC4A1D8DEA-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622952/11873718-4d7e-1b4d-4665-4a976e9d5f79.jpeg)

##参照型の場合

参照型でも値型と同様に入れ物が作られます。しかし入れ物に入れる物が値そのものではなく、別の場所に格納された値の住所を入れます。参照型は、その住所を使って値にアクセスをします。ここが値型と参照型の大きな違いで、

```swift
let sample2 = Sample(num: 1) //参照型
sample2.num = 2
```
がエラーを起こさない理由は、入れ物に入った住所を書き換えるのではなく、住所の先にある値を変えているからです。
住所の先の値を変える分には、sample2がletで定義されていようが関係なく変更することができます。
![IMG_0ACBC7AAE41E-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622952/fbd83fa8-f15b-63ed-0943-86bdca58626d.jpeg)

##参照型のいい点

```swift
let sample1 = Sample(a: 1, b: 2, c: 5, d: 1, .....)
let sample2 = sample1
```
上記のようにプロパティの数が膨大な場合に、sample1からsample2を複製しようとしたとき、値型では入れ物から中身に値まですべてコピーします。これではコンピュータの容量もたくさん食うことになります。

その点参照型ではコピーするのは住所だけとなっているので、容量も食わずにコンピュータにも優しいです。


![IMG_0B0433DE021B-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622952/7f53fbfb-36c2-3555-2935-2dcdf3d1bcba.jpeg)

```swift
let sample1 = Sample(a: 1, b: 2, c: 5, d: 1, .....)
let sample2 = sample1
sample1.b = 100
print(sample2.b) //=> 100 
//住所の先の値を変えてしまっているので、sample1と同じ住所を持つsample2の値も変化する
```

また参照型で複製をしているときに、値を変更してしまうと大本の値を変更していることになり、他の要素にも影響を与えます。ここは嬉しい点でもあり、知らずに使ってしまうと混乱の原因にもなるので気をつけましょう。
![IMG_0FECB6E5305F-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622952/0965d78b-0036-3c26-1221-e6e15b4f3688.jpeg)

##まとめ
値型と参照型の違いを解説してみました。間違い等ありましたら知らせていただけると嬉しいです。
ラジオボタンにラベルを紐づける

ラジオボタンをデフォルトのものではなく独自でデザインしたものにしたいときは、before,afterで疑似的にラジオボタンを作成します。
（参考：https://shu-sait.com/input-label-id-for/#outline__1）

その際もとのラジオボタンの代わりになるlabelにしっかりとradioのinputタグを紐づけなければボタンとしては機能しません。

```example.html
<input id="radio_button" type="radio">
<label for="radio_button">ラベルテキスト</label>
```

inputタグをlabelタグで囲むやり方でも良いようです。

```example2.html
<label>ラベルテキスト
  <input type="radio">
</label>
```

なぜこのような基本的なことに詰まったかというと、あるコードを改修する形でこの問題に面したのですが、その元のコードではこの紐づけをしなくても動いていたのです。

調べたところ読み込んでいるjsファイルにこれらを紐づけている記述がありました。

html+cssでできることは極力jsではやらないようにしよう（私の上司より）。
VirtualBox内にLaravelをインストールしてホストブラウザで表示

##はじめに
前回書いた記事「[VirtualBoxを使って、LAMP環境の構築](https://qiita.com/ka8210/items/ced8a4b1353d0d83b4ea)」の続きです。
タイトル通りVirtualBox内にLaravelをインストールしてホストブラウザから確認できるようにしたいと思います。

ついでに2つプロジェクトを作成し、バーチャルホストの設定をして、１つのWebサーバーで複数のホスト名を同時運用できるようにします。


##環境
前回からそのまま
CentOS7.*
apache2.*
MySQL5.7.*
PHP7.1.*
vagrant不使用

Laravel5.6


##Laravelのプロジェクト作成
今回apacheでlaravelを動かしたいのでapacheドキュメントルートでプロジェクト作成。

```
#ドキュメントルートに移動
cd /var/www/html/

#バージョン指定して、プロジェクトを作成
composer create-project --prefer-dist laravel/laravel=5.7 プロジェクト名

composer create-project --prefer-dist laravel/laravel=5.7 プロジェクト2名
```
global requireで、グローバル環境にlaravelのインストーラをインストールする方法もありますが、
プロジェクトごとにライブラリのパッケージを管理できるcomposerのメリットが薄くなってしまうので今回は使用しません。

##書き込み権限変更

このままApacheで起動しても、「The stream or file "/var/www/html/プロジェクト名/storage/logs/laravel.log" could not be opened in append mode: failed to open stream: Permission denied」というエラーがでるので、

storageディレクトリに対して、apacheへ書き込み権限を付与

```
sudo chmod -R 777 app/storage
sudo chmod -R 777 bootstrap/cache
```


##SELinuxをOFFに
```
# 都度、SELinuxをoffにするか
sudo setenforce 0

# 設定ファイルを書き換えて、selinux無効化してOSを再起動
vi /etc/selinux/config
SELINUX=disabled

```
[・selinuxとは](https://eng-entrance.com/linux-selinux)

##Laravelプロジェクトを、apacheで動かす
`vi /etc/httpd/conf/httpd.conf`

```
#以下を追記

# バーチャルホスト設定：１つのWebサーバーで複数のホスト名を運用するために設定。
# 指定したホスト名やIPアドレスだけに設定するディレクティブ。
<VirtualHost *:80>

　# アクセスされるホスト名
  ServerName test.com:80

　# クライアントからのリクエストに対して対応するコンテンツを配置しておく場所
　# laravelプロジェクトのpublicディレクトリを指定する。
  DocumentRoot /var/www/html/プロジェクト名/public
　
　# DocumentRootと同じ場所を指定。
  <Directory "/var/www/html/プロジェクト名/public">
    AllowOverride All
    Require all granted
  </Directory>

</VirtualHost>

<VirtualHost *:80>
  DocumentRoot /var/www/html/プロジェクト２名/public
  ServerName test2.com:80
  <Directory "/var/www/html/プロジェクト２名/public">
    AllowOverride All
    Require all granted
  </Directory>
</VirtualHost>
```
変更したらApacheの再起動をする。
`systemctl reload httpd`

参考サイト：
https://note.com/mihi_kul/n/n2160a2e98b4b

##hostsの設定

`C:\Windows\System32\drivers\etc`にあるhostsファイルを開きます。
管理者権限を使ってファイルを開かないと保存できないので注意。
左側に仮想マシンのIPアドレスを、右側に紐づけたいホスト名を記載してください。

```:hosts
例：
IPアドレス  　　　　ホスト名
192.168.56.101     test.com
192.168.56.101     test2.com
```


##ホストブラウザで確認
以下の様に表示出来たら成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425289/85c5de12-d935-70e5-b7e7-037ce6c95d96.png)
世界のアソビ大全51「ヨット」の役チョイスについてPythonを使って調べてみた

## はじめに

https://youtu.be/iNAUzUEsgs4?t=8691

白雪巴さんが「世界のアソビ大全51」配信にて「ヨット」をプレイしていた時のこと.

「ここでチョイスはもったいない」

と言っていました.(その時の得点は20)

ふと疑問に思ったので, 少し調べてみました.

> ヨットとは5つのサイコロを振って手を作るゲームであり, チョイスはその中の手の一つです.
>
> チョイスは, すべての目の合計が得点となる役です.

## 結論

20はチョイス選択「あり」

- チョイスの平均は17.5
- 20未満になる確率は 69.48%
- 21以上になる確率は 22.14%

## 前準備

1~6までの目がある1個のさいころを投げるとき, 出る目の数字の平均を考えます.

(※目の出方は同様に確からしいものとする)

ここで, さいころの目の合計は 21であり, それぞれの目は均等に出ることが期待できるため, もとめる平均 $E(x)$ は
$$
E(x) = \frac{1}{6} \times 21 = \frac{7}{2}
$$
と計算することが出来ます.

> このように求めた$E(x)$ のことを $X$ の期待値と呼び
> $$
> \begin{eqnarray}
> E(x) 
> &=& x_1p_1 + x_2p_2 + \cdots + x_np_n \\
> &=& \sum^n_{k=1}x_kp_k\\
> &&(X = x_1, x_2, ..., x_n)(P=p_1, p_2, ..., p_n)
> \end{eqnarray}
> $$
> としてもとめられる.

## 本題

では, さいころを同時に5個投げた場合, 出た目の合計の平均を考えます.

このとき, 5個のさいころに対する確率は独立しているため, 単純に足し合わせれば求める平均を得ることが出来ます.

つまり
$$
E(x) = \frac{7}{2} \times 5 = \frac{35}{2}
$$
となります.

> $X$ を確率変数, $a$, $b$ を定数とするとき
> $$
> E(aX+b) = aE(x)+b
> $$
> が成り立つため, $E(X) = \frac{7}{2}$ , $a=5$, $b=0$ を代入すればもとまる

## 実践

ここまでは数学を用いて, チョイスの平均をもとめました.

~~とはいえもうかなり忘れているので, 正しいかどうかわからない...~~

ここからは Python をもちいて, もとめた平均が正しいか検証します.

>  なお, 以下のコードはすべて Google Colab にて動作確認しました.

### 平均計算

戦略は,単純. 

1億回 5個のさいころを振り, その目の合計をもとめます. 次に, その平均を求めれば, もとめる平均が求まります.

つまり, 大数の法則です.

実際に試したコードが以下になります.

```python
import numpy as np

# 試行回数
N = 1 * 10**8

# チョイス実行
x = np.random.randint(1, 6+1, (N, 5))
x = x.sum(axis=1)

# 平均計算
print(np.mean(x))
# 17.4996012
```

結果は ``17.4996012`` となり, 計算結果とほぼ一致していました.

>  簡単に解説をば.
>
> 7行目にて, 1~6の乱数を サイズ(N, 5) で作成します.
>
> 8行目にて, 5個のさいころの合計をそれぞれ計算します.

### ヒストグラム

思ったほか簡単に試せたので, おまけでヒストグラムを作成してみました.

実際に使ったコードが以下になります.

```python
import numpy as np
import matplotlib.pyplot as plt

# 試行回数
N = 1 * 10**8

# チョイス実行
x = np.random.randint(1, 6+1, (N, 5))
x = x.sum(axis=1)

# ヒストグラム生成
result = plt.hist(x, bins=26, alpha=0.5, color=(0.43, 0.25, 0.91))

# 補助線
ex = 17.5
min_ylim, max_ylim = plt.ylim()
plt.axvline(17.5, color='k', linestyle='dashed', linewidth=1)
plt.text(ex*1.05, max_ylim*0.9, f"E(x)={ex}")
plt.axvline(20, color='w', linestyle='dashed', linewidth=1)

# ラベル
plt.title('Distribution of Scores in "Choice"')
plt.xlabel("point")
plt.ylabel("frequency")

plt.savefig("fig.png")
```

これにて出来たヒストグラムが以下になります.

![fig.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277804/595bef4f-8f57-5dc7-2e04-9580809f5f9e.png)


このヒストグラムにおいて, 黒の点線が平均, 白の点線が20 となっています.

これより, 平均より超えていることが一目でわかるようになりました.

### 20未満の確率

さて, チョイスの得点が20未満になる確率はどれぐらいでしょうか?

これが分かれば, 説得力が増えそうです.

というわけで, Python にお願いして, 近似的に求めてみます.

```python
import numpy as np

# 試行回数
N = 1 * 10**8

# チョイス実行
x = np.random.randint(1, 6+1, (N, 5))
x = x.sum(axis=1)

# 頻度計算
uni, counts = np.unique(x, return_counts=True)
d = {str(u): c for u, c in zip(uni, counts)}

# 20未満の発生確率
temp = [v for k, v in d.items() if int(k) < 20]
print(f"{(sum(temp) / N)*100:.02f}%")
# 69.48%
```

結果は 69.48% となり, 全体の約7割が20未満となることが分かりました.

また, このプログラム 15行目にある不等号の向きを変えれば, 簡単に21以上の発生確率も調べることが出来ます.

結果は 22.14% つまり, これ以上高い手になる確率は 約2割となります.

ソシャゲのガチャに毒されているので高く感じますが... といった感じです.

## おわりに

アソビ大全のゲーム 解析してみる楽しい
VSCode 拡張機能の読み込み時間を確認する

使用頻度が低くて重い拡張を削除したいときにどうぞ。

Macは`⌘ ⇧ P`、Windowsは`Ctrl + Shift + P`/`F1`でコマンドパレットを表示させて、以下を入力し選択する。

```
>Developer: Show Running Extensions
```

表示された画面のActivationが、VSCodeExtentionの読み込み時間です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107221/10e6142f-bf8d-07a6-03b6-f2b723bf8ab2.png)

## 参考

[Find and fix performance issues of your VS Code Extension — @nicoespeon's blog](https://www.nicoespeon.com/en/2019/11/fix-vscode-extension-performance-issue/)
ビットとバイトとその他の単位、文字の表現方法

#ビットとバイトとその他の単位
 コンピュータが表現する最小の単位が**ビット(bit)**ですが、どんな単位でもビットであらわそうとすると
 やたら大きい数字なってしまうので、8ビットをひとまとめにした<font color="#cc0000">バイト(byte)</font>という単位が
 コンピュータでは主に用いられています。
　　![図28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/6a70aca7-cf5c-2026-66ba-69e35f23e840.png)

　**補助単位**
   コンピュータの世界にも補助単位があり主に記憶容量等でよく使う「大きい数値をあらわす補助単位」
　　処理速度などでよく使う「小さい数値をあらわす補助単位」等がある
　　![図29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/49db9dca-ee4e-219e-60d4-272f520298f5.png)![図30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/e7bf0e7e-467d-bd3f-8ee8-82e7dae8e1fc.png)

#文字の表現方法
英数字、記号、ひらがな、漢字等は、コンピュータはそのまま理解することができないため、コンピュータが理解できる数値(16進数)に置き換えたものを文字コードという。
**文字集合**と**符号化方式**という2つの概念が存在し、これらが組み合わさってコンピュータの文字を表している。
**文字集合**
 「文字」と「文字に割り当てた番号」の対応表のこと。
**符号化方式**
 文字集合で定義されている一つ一つの文字を、どのように符号化するかという方式(エンコーディング)。

#文字コードの種類とその特徴
**ASCIIコード**
　・標準的な文字コード
　・米国規格協会(ANSI）によって定められた、基本的な文字コード
　・アルファベット、数字、記号のみ、1文字を7ビットであらわします。
　![図31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/e648e6b0-7b46-582a-7327-9aeb3d6da730.png)

**EBCDIC**
 ・IBM社が定めた文字コードで、8ビットを使って1文字をあらわします。

**シフトJISコード(S-JIS)**
 ・ASCIIのコード体系の文字と混在させて使えるようになっている日本語文字コード
 ・ひらがな、漢字、カタカナ等が扱える
 ・1文字を2倍とで表す
**EUC**
 ・拡張UNIXコードとも呼ばれ、UNIXというOS情でよく使われる日本語文字コード
 ・基本的に1文字を2バイトで表すが、補助漢字などは3バイト使う

**Unicode**
 ・全世界の文字コードをひとつに統一し、各国のありとあらゆる文字を1つのコード体系であらわそうとした文字コード
 ・当初は1文字2バイトで表す予定だったが、文字数が足りないので3バイト、4バイトと拡張されている。

#以上
GoogleColabでdisplayにより出力されるpandasのデータフレームのデフォルトスタイル（CSS）を変更

# 概要

GoogleColab のなかで、IPython.display モジュールで経由で出力されるデータフレーム `pandas.DataFrame` のデフォルトの見た目（スタイル／CSS）を変更するための方法です。
<img width="497" alt="2020-08-12_17h20_05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/e032608c-5466-553d-4934-6430d5c743b6.png">

なお、GoogelChrome で動作確認をしています。

# データフレームのスタイルを変更

GoogleColab. のコードセルで下記を実行すると、

```py:
import pandas as pd
df = pd.DataFrame([[1, 2, 3],[4, 5, 6],[7, 8, 9]],
                  columns=['Osaka','Tokyo','Aichi'])
display(df)
```

次のようにHTMLの**テーブル要素を使って整形されたデータフレーム**が出力されます。<br><img width="567" alt="2020-08-12_17h49_15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/5b2f77b5-cb70-3598-40fd-70773eb0aabd.png">


このテーブルのスタイル（CSS）をカスタマイズしたい場合は、次のようなコードを挿入します。以降、`IPython.display(...)` 経由で出力される**データフレーム（HTMLのテーブル要素）には、コード内で指定したCSSが適用される**ようになります。

```py:データフレームの出力に適用されるCSSを変更
import IPython

def set_css_in_cell_output():
  display(IPython.display.HTML('''<style>
  table.dataframe td, table.dataframe th{
    border:1px solid #dadada;
  }
  table.dataframe th{
    font-family: 'Roboto','Noto',sans-serif;
    background: #eeeeee;
    font-weight: bold;
  }
  table.dataframe td{
    background: #ffffff;
  }
  table.dataframe tbody tr:hover th{
    color: #ffffff;
    background-color:#4169e1;
  }
  table.dataframe tr:hover td{
    background-color: #d7eeff;
  }
  </style>'''))

get_ipython().events.register('pre_run_cell', set_css_in_cell_output)
```

以降、データフレームは次のように出力されます（すべてのテーブル全体に罫線が入って、ヘッダのフォントとマウスオーバーのときの色が変わるようになりました）。<br><img width="564" alt="2020-08-12_17h50_00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/d20a6e24-7d40-aaeb-d727-cb5cb090f46a.png">


## 条件付き書式

セル内の数値に応じて色を変えるといった**条件付き書式**を適用したい場合は `DataFrame.style` を使用するようです。

- [User Guide :: Styling](https://pandas.pydata.org/pandas-docs/stable/user_guide/style.html) @ pandas.pydata.org

・・・と思ったら、Google Colab. 環境ではうまくいかないらしいです。残念。

- [Pandas style doesn't work with Google colab](https://stackoverflow.com/questions/62255818/pandas-style-doesnt-work-with-google-colab) @ stackoverflow

# 参考資料
- [How to import CSS file into Google Colab notebook (Python3)](https://stackoverflow.com/questions/58019749/how-to-import-css-file-into-google-colab-notebook-python3) @ stackoverflow
Xamarin.FormsでAndroidアプリ開発①　Visual Studioのインストール

前回はAndroid Studioを使ったアプリの開発を紹介しましたが、将来的にWindowsやiOSでの開発も考えると、Xamarinでの開発がお勧めです。
まだどのようなものかあまり分かっていませんが、チャレンジしていこうと思います。

# Visual Studioでのアプリ開発

Xamarinを使う開発ソフトとして、MicrosoftのVisual Studioを使います。開発言語はC#です。
MicrosoftはWindowsというイメージですが、最近はどんどんオープンソース化されてきていて、今はいろんなOSで動くアプリが開発できます。
少し歴史を紐解くと、

.Net Framework : Windowsで動くアプリが動くフレームワーク
　↓
.Net Core : Windowsだけでなく、Linux、Macで動くフレームワーク
　↓
Xamarin : Android/iOSで動くフレームワーク
　↓
（将来）.Net 5 : Windows/Linux/Mac/Android/iOSすべてで動くフレームワーク
　※現在プレビューは出ていますが、まだAndroidは使えなさそうです。2020/11登場とのこと

という流れで、どんどん良い時代に向かっています。

# まずはVisual Studioのインストール
ということで、まず環境を用意していきます。商用利用であれば有償版が必要ですが、今回は勉強用ですので無償版のVisual Studio Communityを入れます。

1. https://visualstudio.microsoft.com/ja/downloads/ にアクセス
2. コミュニティをダウンロードし、exeファイルを実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/7755e92a-ca6d-4c05-c5bd-bf838291cddb.png)
3. 続行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/0d1f510c-1b72-efc0-97da-5fab51189675.png)

4. .NETによるモバイル開発にチェックを入れインストールします。（かなり時間がかかります）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/e2b2f30b-83f3-13d6-83dd-7b031d97b26b.png)

5. 今は「後で行う」で。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/bdacef91-c60c-4385-17f1-1fe44f89574e.png)

6. 「Visual Studioの開始」でインストールは完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672017/a598d947-bd88-3c91-c8bd-f65c004f1a9f.png)

今回はインストールまでの紹介でした。
次回からアプリ開発を行っていきますので、乞うご期待。


# 関連記事

- Xamarin.FormsでAndroidアプリ開発①　Visual Studioのインストール(今日はここです)
- [Xamarin.FormsでAndroidアプリ開発②　サンプルアプリ作成](https://qiita.com/yasu006/items/c55c123d489e66897bf6)
- [Xamarin.FormsでAndroidアプリ開発③　開発したアプリをスマホで実行。躓きポイントは、共有ランライム！](https://qiita.com/yasu006/items/04ca7accdba3c6c02310)
【iOS】Pythonista3でGIFアニメ。でハマったこと。

# はじめに
GIFアニメを作るアプリはたくさんありますが、せっかく**Pythonista3**があるので、多くの先輩方の記事を参考にしながら、自分でも作ってみようと思いました。

# すぐにハマる
以前に**Win10**上の**Python**でGIFアニメを作ったことがあったので、その記憶を頼りに**PIL**で書いたのですが、1枚目の画像しか保存されませんでした。

```python:testGIF.py
w,h = 100,100
images = []

for c in range(0,256,8):
  img = Image.new('RGB',(w,h),(c,c,c))
  images.append(img)

images += reversed(images)

SaveName = 'test.gif'
images[0].save(SaveName,
             save_all=True,
             append_images=images[1:],
             optimize=False,
             duration=20,
             loop=0)
```
いろいろ調べたのですが、結局win10上では動作確認ができたのですが、**iOS の Pillow ではバージョンが違うためうまくいかない**という結論にしました。
[Saving PIL images to an animated GIF | omz:forum](https://forum.omz-software.com/topic/4774/saving-pil-images-to-an-animated-gif)


# その名も「images2gif」
調べてるうちに同様の質問があり、「images2gif」の存在を知りました。
僕のやりたかったことがそのまま名前になったようなモジュール名です。
[~~※しかしこれはWindowsのpython3環境では動作確認できませんでした。~~](https://stackoverflow.com/questions/32674597/python-import-problems-with-image2gif)

- **win10**のPython3環境での使い方
  1. インストール済みの**image2gif**を削除します。
  2. [**こちらの image2gif.py**](https://github.com/isaacgerg/images2gif) をダウンロードしてPATHの通ってる場所に置く。

**images2gif** は公式のドキュメントにも紹介されていて、初めから**Pythonista 3**にインストールされてるものでした。
[Pythonistaモジュール— Python 3.6.1ドキュメント](http://translate.google.com/translate?hl=ja&sl=en&u=http://omz-software.com/pythonista/docs/ios/index.html)

# 「images2gif」の使い方
基本的には次の記述でいいみたいです。

`writeGif( SaveName, ImageList, duration=0.1,repeat=True)`

```python:testGIF2.py
from PIL import Image
from images2gif import writeGif

w,h = 100,100
images = []

for c in range(0,256,8):
  img = Image.new('RGB',(w,h),(c,c,c))
  images.append(img)

images += reversed(images)

SaveName = 'test.gif'
writeGif( SaveName, images, duration=0.02,repeat=True)
```
![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280129/b9d71ee1-f10b-ff9f-7dc6-c0da110b97e0.gif)



### PythonのGIFアート
- [GIF art in Python | omz:forum](https://forum.omz-software.com/topic/2052/gif-art-in-python)


###日本語ヘルプ
最後にビックリしたのは、探してたどり着いた日本語ヘルプの記事が、**「以前、僕が自分で投稿したもの」**で、いよいよヤバいと思いました。

- [Python Help（writeGif）-Qiita](https://qiita.com/maboy/items/cd23a4c39ab95485fad1)
【GCP】Cloud Next onAir 20の「Data Analitics」関連の講演をまとめてみた


BigQuery 最新情報

・smart analitycs:Googleのインフラのデータプラットフォームを提供。BIを提供。
・BigQuery：
- サーバレスで分析に集中できる。
- ある客は350PBを管理、100兆行のクエリ対象行数、1万クエリを同時実行
- 事例：HSBC大規模なクエリ実行、規制対応
- 信頼性：SLA可用性99.99%になった。他社は99.9%
- パフォーマンス向上：1PBに対して6分かかった（2016年）→2分（2018年）→4秒（2020年）
- 管理：スロットワークの割り当て、
- infomation schema 
- スロット自動スケジューリング機能、スロットの自動スケジューリング、
- 管理パネルモニタリング：BQ内でモニタリングできるようになる、料金、スロットなど。リアルタイムと過去30日。実行されているクエリ、トップユーザの確認
- 顧客の課題：度のクエリがひっ迫してるのか？オンデマンドクエリモデルがいいのか？月や年で購入するのか？→BigQueryスロットレコメンダーでコスト最適化の推奨値を提案する。
- UI刷新：DataFlowも構築できる
- コネクティッドシート：スプレッドシートから分析可能。ピボットテーブル、グラフ、式でBQを使える。
- Data QnA:BQの自然言語インターフェース。API有効にするだけ。質問をなげかけると返答してくれる。Lockerなどでもつかえるようになる。Googleアシスタントと同じテクノロジー。
- BQの組み込みML：推論まで可能。データの準備にかかる時間が減る。SQLのチューニングに時間がかからなくなる。ロジスティック回帰など様々なモデルに対応。
- リアルタイム分析：
- BIengine:高速DBエンジン。Tableuなどからのクエリも高速化される。すべて自動管理する。
- BQ適応型キャッシング：すべてを自動で管理する
- BigQueryOmni:マルチクラウドに対応。ユーザインターフェースから操作。他社クラウド側Anthosにて実行される。
- 軽度な分析でBigQueryOmniを使い、詳細な分析はGCPをつかう。
- サーバレスなので、スモールスタートも可能。10GBから無料提供している。
・MachineLerning：分類、予測が可能。
・データレイクの相互運用性。BigQuery上のデータをBigQuwryで処理する。
・他Saasサービスにデータがある場合：様々なコネクタや転送サービスがある

＝＝＝＝＝

Looker's Roadmap: 2020 & Beyond

・すぐに使えるので、テスト→実装→監視→開発→テストのサイクルをやりやすい
・Lookerで大規模なデータガバナンス、ユーザー自身が様々な操作可能、柔軟な分析、データの運用が可能。
・あらゆるサイズのデータを高速処理。
・レポート機能があり、資料作成が容易。
・他のツールとAPI連携が可能。
・画面を自由にカスタマイズでき、どんな分析をしているかもわかりやすくできる。
・23言語に対応
・スタンドアロンとして構築が可能
・アラートの設定が可能
・ワークフローを簡単に一元化および自動化
・ツール間でシームレスにデータを移動し、常に同期する
・スプレッドシートやGsuiteのword、PowerPointと連携
・スマホアプリもある
・LookMLを使い、データベースにアクセスし、ロールアップテーブルを作成および実体化できる


Scaling Data-Driven Insights Across a Complex Global Organization with Looker and BigQuery
・Iron Mountain 
ストレージおよび情報管理サービスのグローバルリーダー
数十億を保存および保護しています
安全な記録の保存、情報を含むソリューションの提供、管理、デジタル変換、安全な破壊、データセンター、クラウド、サービスとアートの保管と物流

・構成図あり
複数の場所からデータをGCSにインポート
レポートの作成を行った
＝＝＝＝ー

Analytics in a Multi-Cloud World with BigQuery Omni
・世界のデータは2025年までに175ゼタバイトになると予測されている。
・データは管理されていないものがほとんどで、ばらばらに保管されている。
・BigQuery Omniをつかうことでサイロ化しているデータの分析が可能
・他社クラウドのデータも視覚化可能
・パイプラインを最適化できる

＝＝＝＝
Data Catalog for Data Discovery and Metadata Management

・Data Catalog とは
データが分散している組織が、データ検出を効果的に実行したい場合、データカタログにより、すべてのデータ資産を発見、管理できる
https://cloud.google.com/blog/products/data-analytics/data-catalog-metadata-management-now-generally-available?utm_source=google_owned_website&utm_medium=et&utm_content=noa_smart_analytics_session_lp&utm_term=-&utm_campaign=-
・話の内容は上記のURLの内容

＝＝＝
MLB’s Data Warehouse Modernization

・AWSからの移行
・従来のデータウェアハウスの課題
- データの増加に対応できない、拡張が遅い
- データが最新ではない
- データへのアクセス制限
- 機械学習とAIをサポートしていない
- 予算浪費、ライセンスの更新が必要
・TeradataからBigQueryへ移行したMLBの事例
・移行前の課題
- 増分コピーへのデータの変更
- すべての履歴データを再コピーするスキーマが必要
- クラブとMLB間でデータを共有しない。
- リアルタイムのデータにアクセスの手段はない

・移行後の改善点
- MLB内および30のMLBクラブでのデータセットの双方向の共有は、今では簡単です。
- 実行時間が50％短縮されました。
- Okta / GSuite統合により認証が効率的
- ダウンタイムなし
- 初期コストも安くすんだ(予約されたスロット)
- 自動バックアップ、自動スケーリング


ストリーム分析
イベント ストリームをリアルタイムに取り込み、処理し、分析します。Google Cloud のストリーム分析ソリューションによって、データが生成された瞬間から整理され、便利で使いやすいものになります。

![Screenshot from 2020-08-25 10:59:31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556084/3f9f0024-5d1b-6af2-a89c-9f6ca2b587fe.png)
APCのUPSのIPを設定した話

# APCのUPSのIPを設定した話
はい皆さんこんにちは

結論から言うとこの記事はUPSのIP設定をDHCPからした話です。

# 詳細

UPSはこれ
APC Smart-UPS 1500 RM 2U LCD 100V オンサイト5年保証

端末はWINDOWS10

##付属のネットワークアダプタを取り付ける
これは別に難しい事はないです。後ろからまっすぐ差せばOKです。
ちなみに全体の重量が30キロぐらいあっておじさんには重かったです。
**腰には気を付けよう**
あと電源が抜けているので差し込んでおきます。

##まずUPSを起動する
正面にある操作パネルから、電源ボタンを押します。
ピッと音が鳴るのでしばらく待ちます。
しばらくするとパネルから情報を得られるのでネットワークを確認すると、
0.0.0.0になっています。

##というわけでネットワークの設定
最初、パネルから操作するのかと思っていたがそんな事はなく
DHCP環境にLANで接続するとIPが割り振られるという事で、
とりあえずルーターに刺してみると、無事にIPは設定されました。

ただ、マシンルームのIPは別セグメントになるので、ここから変えたいです。

##WEBコンソールから入る
というわけで
https://ipアドレス
に入ります。
apcのUPSのアカウントは「apc ups デフォルト パスワード」とかで検索してください。

あとはIPv4設定から固定の設定を入れて、更新した後にUPSの再起動をします。
**ここで設定間違えると直すのが大変そう・・・**

ちなみにシリアル接続も可能なので、シリアルと端末を繋ぐアダプタ等をお持ちの方はそこからでも設定できます。


##感想
再起動するまでIPが変わらないとか色々癖はありますが
やり方さえ知ってしまえば簡単でした。


**ありがとうございました。**
googleの翻訳機能にやられた

反省したので記事に残します・・・。
これを初記事にする事で肝に銘じる

## 結論

@vue/cli で作成した index.html を放置すると痛い目見る

## 事の発端

顧客のとある要件で必要になったから、会社で開発しているシステムの一部を vue.js でリプレースし、納品した
納品後の検修の際に画面の表示がおかしいよと言われた（画面のどこがおかしいかは教えてくれなかったぴえん）

調査するも手持ちの Mac,windows,android,iOS のどれでみても再現できなかった

上司と二人で頭を抱えていると別の社員から再現できたと言われた・・・

## 謎めいた現象

- 謎の日表示

v-calendar（[https://vcalendar.io/]()）を利用してカレンダーを表示している
なぜか 26、27、29 だけ日の表記がついていた

<img width="873" alt="スクリーンショット 2020-08-12 16.44.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461616/829a0897-8c39-43d2-0e95-3fc07d8ae9c1.png">

- 謎の年表示

本来金額を表示している部分（単位・変換なし）の 1000 以上の値がなぜか年表記になる

<img width="138" alt="スクリーンショット 2020-08-12 16.48.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461616/700bbae8-e33e-05bd-5eda-90cdd459c52d.png">

## 閃いた決定打

ふとタイトルを見ると
本来英語なはずが

> 例：coffee-latte

がカタカナに変換されていた

> 例：コーヒーラテ

**もしかして、翻訳されてるのでは・・・？**

## ついに判明

結局のところ原因は凡ミス

index.html の lang が en になっていただけだった

```html
<html lang="en"></html>
```

正しくは

```html
<html lang="ja"></html>
```

一部の環境でしか再現しなかったのは
google の翻訳機能で常に日本語に翻訳に設定しているかいないかの違いだった

## 大反省・・・

自動生成された index.html を大して確認もせずそのまま放置していたのが原因でした

@vue/cli で作成した index.html を放置すると痛い目を見ます
良い子はちゃんと確認しようね

あとなんでカレンダーの26,27,29の部分のみ日がついたのか、調べてもよくわからなかったのでもしわかる方がいたら教えてください、、、
AWS Security資格（SCS）に合格しました

# はじめに
先日（8/10）にAWS Certified Security - Specialty資格（以降SCS）に受かったので、その時の所感や実践した勉強などを残そうと思います。
とはいえ、勉強に使ったのは他の記事でも書いたBlackbeltとWhizlabs（と公式の模擬試験）ぐらいなので、試験の傾向や試験中に考えたことなどが中心になります。
誰かの役に立てば幸いです。

※過去の記事
[AWS SAAに受かった話](https://qiita.com/kkino1985/items/85bcfa50686fcfe69c56)
[AWS SOAに受かった話](https://qiita.com/kkino1985/items/295509d3d94c726ae56a)
[AWS DVA(とCLP)に受かった話](https://qiita.com/kkino1985/items/8f3db5e102876cca47b1)
[AWS SAPに受かった話](https://qiita.com/kkino1985/items/7ad6bcdde44a2b4e4916)

ちなみにDOPも7/23に受かっていますが、勉強法は相変わらず「WhizlabsとBlackbeltをパパっとやって、終わり！」みたいな感じだったので特に書くことないと思って放置していたら、すっかり書くタイミングを失った次第です（更に言うとどんな問題が出たかも忘れた）
DOPも問題文が長いので簡単ではありませんが、ClouformationやOpsworks、ElasticBeanStalkといったコアとなるサービス（の少し細かいところ）と、デプロイ戦略の使い分けについて理解していれば少なくともSAPよりは受かりやすいのでは、と思います。

# 獲得スコア

|受験日|スコア/合格点/満点|結果|
|:--|:--|:--|:--|
|2020/8/10|831/750/1000|合格|

試験中の手応え的にはもう少し取れているかとも思いましたが、どちらとも取れる紛らわしい問題もいくつかあったので多少下振れした印象です。
（一応、スコアレポート上は全分野共に「知識レベルは十分」と出ました）

# 勉強に使った教材

## Whizlabs

海外のWeb問題集。（自分は2番目に受けたSysopsからずっとお世話になっています）
https://www.whizlabs.com/

巷によくある、試験問題と答えをそのまま販売している（所謂クラムメディア的な）アレではなく、公式ドキュメントに基づいた問題を提供しています。
（少々雑な）解説と公式ドキュメントへのリンクもあるため、勉強の事始めから中終盤の追い込みにも幅広く使えます。
たまに重箱の隅を突いたものすごいマイナーな問題もあったりするので、実試験よりも難易度は高めです。

## Blackbelt

親の顔よりも見たAWS公式の動画セミナー。
https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/

自分はまずWhizlabsの問題を解き、その時にわからなかったり理解が浅いと思ったサービスについて資料をざっと流し読みをする、という使い方をしていました。
その時には一度に全部覚えようとせず、問題の中で出てきた要素を5分程度で掻い摘む、というのを意識していました。（そしてまた問題を解き～の繰り返し）

自分はやりませんでしたが、時間が許せば動画も観た方が良いと思います。

## 模擬試験（AWS公式）

模擬試験の問題がそのまま出る、ということはありませんが、試験の傾向や出題範囲を知る上では受けた方が良いです。
自分は試験の直前ではなく、なるべく勉強を始めて間もない頃に受けるようにしています。
（自分の現在地点を知りたいのと、模擬試験の答えを調べる勉強を先にやっておきたい意図）

## その他
インドで活動されている方のブログ（試験のポイントが記載されています）
https://jayendrapatil.com/

あとはSCSに関しては最近書籍も発売されていました。
その本の存在を知ったのが割と最近だったので今回は使用しませんでしたが、試験の帰りに書店でパラ見した限りでは役立ちそうな内容が書いてあったのでこれから受ける人は有用だと思いました。
（というより、試験を受けた人が狙い撃ちして書いた印象が強い）

# 試験の所感
- 試験問題の難易度にかなりのばらつきがある
    - 三層Webシステムで設定するセキュリティグループのルールのような超絶簡単な問題から、KMSやCoginitoのコアな機能を問うような超絶難しい問題まで
- 全体的にKMSの仕組みを知っていることが前提の試験
- IAMポリシー（S3バケットポリシーやKMSキーポリシー含む）はかなり突っ込んで出題される
- SAPやDOPよりもう一歩踏み込んだ知識が要求される
    - Trusted AdvisorとInspectorとSystems Managerでそれぞれ何ができて何ができないのか
    - 基本的にセキュリティ監査はConfigとCloudtrailが二大サービスなので、それらで検知できることの違いは把握しておく
    - WAFとShieldの使い分け
    - Cloudfrontの機能（多少詳しく）
- Organization自体の問題はあまりないが、関連する問題はいくつか出る
- 問題文は短いので、SAPのように時間が足りなくなることはない（自分は見直し含めて50/170余った）
- AWS Macieって知ってるかい？（バクシンガー）
- Cognitoをどうこうする問題は無かったが、CognitoとWebIdentityとSAMLがそれぞれどういう時に使われて、どうやって構成するのか（構成するのに何が必要か）は知っておく必要がある
- セキュリティのトラブルシューティングの対応パターンは普段の業務で使わない分、弱点になりがち（ID侵害・フォレンジック分析・EC2接続用のキーペア失くしちゃった問題など）
- VPCエンドポイントやAWS ADの問題もちらほら
- AWSサービスの知識だけでなく、前提となる暗号化（データや通信）の知識もある程度必要

# 今後の予定
次はAdvanced Networking Specialty資格（ANS）の予定です。今年中にコンプしたいのでできれば今月中に取りたいですが、本格的な夏に入って太陽が眩しいので9月にずれ込むかもしれません（カミュ）
Lambda関数をCodeCommitで管理する

# 概要

Lambda関数のコードを、Gitでソース管理したい。


↓こんな感じでできるんじゃないかと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185989/d5eb8e57-be50-ee8e-4b03-070e356e30bc.png)

データの流れはこんな感じ↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185989/02b9681c-db84-9547-710d-76eab46eabaa.png)


# 登場人物

AWSSDKで、ソースを外から突っ込む系は以下のコマンドでできるみたいです。

- [Lambda.createFunction](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Lambda.html#createFunction-property)
Lambda関数の属性値（メモリ・タイムアウト・説明・VPC設定などなど）と、ソースコード（zipにする必要がある）をまとめて送るとLambda関数が作成される。

- [Lambda.updateFunctionCode](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Lambda.html#updateFunctionCode-property)
関数名を指定して、ソースコード（zip）を送ると、ソースコードのみが更新（総入れ替え）される。

# 作ってみた

+ とりあえず、ソースコードの入れ替えができれば良いので、createFunctionは使わずupdateFunctionCodeを使うことにする
+ CodeCommit内レポジトリからソースコードを抽出して、zipでまとめてupdateFunctionCode を実行する感じで。

## 処理概要

Lambda関数で以下の処理を書きます

1. 対象のLambda関数名を指定する
2. CodeCommitレポジトリ内から関数名フォルダ以下のファイル一覧を取得[CodeCommit.getFolder](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CodeCommit.html#getFolder-property)
3. ファイル一覧でループして、ファイル内容を取得する[CodeCommit.getFile]()
4. zipに固める
5. updateFunctionCodeを実行する

## コード

下準備：zip圧縮を使うので、Layerを準備します。↓を参考に。
[【Lambda】zipファイルの圧縮解凍サンプル【nodejs】](https://qiita.com/afukuma/items/85ec974836312c467852)

```javascript:宣言部
var AWS = require('aws-sdk')
var lambda = new AWS.Lambda();
var codecommit = new AWS.CodeCommit();
var node_zip = require('node-zip');
```

```javascript:CodeCommitリポジトリ中、指定フォルダからファイル一覧を取得する関数
async function listFiles(Folder){
    var pCCm = {
        folderPath: Folder,              
        repositoryName: process.env.CodeCommitRepo  // 環境変数にリポジトリ名
    };
    const ccF = await codecommit.getFolder(pCCm).promise();
    let files = [];
    // ファイル取得
    for(let i=0;i< ccF.files.length;i++){
        // 先頭の関数名を除く
        files.push(ccF.files[i].absolutePath);
    }
    // サブフォルダ→再帰処理
    for(let i=0;i< ccF.subFolders.length;i++){
        let files2 = await listFiles(ccF.subFolders[i].absolutePath);
        files = files.concat(files2);
    }
    return files;
}
```

```javascript:本体-ファイル一覧取得
let lstFiles = await listFiles(event.FunctionName);
```

```javascript:zip変数へファイル名とファイル中身を設定する
var zip = new node_zip(); // zip変数

    for(let i=0;i< lstFiles.length ;i++){
        var pGet = {
            filePath: lstFiles[i],     // ファイル名
            repositoryName: process.env.CodeCommitRepo,   // 環境変数でリポジトリ名指定
        };
        
        const cCgf = await codecommit.getFile(pGet).promise();
        // ファイル名先頭の関数名を除いて、zip変数へ突っ込む（ファイル名とファイル中身）
        zip.file(lstFiles[i].slice(event.FunctionName.length + 1), cCgf.fileContent); 
    }
```

```javascript:updateFunctionCodeを実行してLambda関数のソースを更新する
    let zipContent = zip.generate({base64: false,compression:'DEFLATE'});
    
    var pLmd= {
        FunctionName: event.FunctionName, 
        ZipFile: Buffer.from(zipContent, 'binary')
    };
    await lambda.updateFunctionCode(pLmd).promise();
```


# あとがき

意外と短いプログラムでできる様子。。

CLI＋バッチのほうが簡単にできそう
【共有用】Windows10PCにVisual Studio Codeをインストールする手順

本記事では、Windows10PCにVisual Studio Codeをインストールする手順を紹介いたします。

##Visual Studio Codeとは
マイクロソフト社が提供するどんな言語での開発が可能で、好きなOSで動作するコードエディタです
私個人の意見としては以下の点が重宝する理由の一部となっております。
・Node.jsの開発からデバッグ、テストまで開発の一連の流れがこれ一つで可能
・開発環境が軽く、貧弱なPCでもある程度サクサク動いてくれる
・豊富なプラグインで自由に機能拡張ができる
・Azureと連携するアプリケーションの開発が容易にできる


##Visual Studio Codeをインストールする

下記URLからインストーラをダウンロードします
https://azure.microsoft.com/ja-jp/products/visual-studio-code/



ユーザーインストーラをダウンロードします
多くの場合は64bit版のインストーラになりますが、32bit版OSを使用している方は32bit版をダウンロードしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/5d468367-a487-121f-61af-50de0f1c36ef.png)



インストール上の注意点はほとんどありませんが
デスクトップにアイコンを作成にチェックを入れておくと後々便利です。
（デスクトップ上に作成したアイコンは不要になった際に削除してしまっても問題ありません）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/eee3d0f7-8f08-4f2a-6030-2fb7cb60b20d.png)



##インストールの確認

インストールが完了いたしましたら、Visual Studio Codeアイコンをクリックし、Visual Studio Codeを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/6aff51dd-4c0a-9cd1-598e-65149e2f47aa.png)


以下のような画面が表示されたらインストールは完了となります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/e2919891-c97d-f0b2-351c-6ef1fca110bf.png)



##日本語対応
※すでに日本語化されている場合は不要です
Visual Studio Codeを日本語する場合下記の手順で日本語化することが可能です

プラグイン追加ボタンを押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/ca1098a8-59a9-9c70-c1f7-3a0c14bb79af.png)


プラグインを「Japanese Language Pack for Visual Studio Code」で検索します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/2d4567b7-3792-55b2-f278-96583dc67b75.png)


「Japanese Language Pack for Visual Studio Code」のInstallボタンを押してインストールします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/8aaf2e29-355e-a951-8b83-b414f27e3fcc.png)


再起動を求められるので再起動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/a47b86b4-9d84-16dd-ae46-3a4d63cf7720.png)
Seleniumで要素が取得できない！

※この記事は新入社員の問いにあることないことないことないこと話した備忘録です。

## 本日の困りごと
Seleniumを使ってのWebサイトやWebシステムの自動検証。

`find_element_by_xpath`を使ってもこの要素取れないんです！
この直前の要素なら取れるのに…！

## 経緯
元々「このサイトは何故かSeleniumで検証できないんですよねー」と言われているWebサイトがあった。

えぇｗまさかぁｗｗｗ
作った人(もういない)の組み方が悪いんだってｗｗｗ

と、メンバーに「組みなおしてみ？」と依頼する。
すると返ってきたのがこの言葉。

なるほど。丸投げしてたのでHTMLでも見てみようじゃないか。

## 今回の解決方法
**みんな、HTMLにはclass属性やid属性を付けようぜ！**

…とはいえ「検証の自動化」を行うために画面を修正するのはナンセンスである。
WebサイトWebサイトと言っているが、どうせ中身はWebシステム。phpだったりJSPだったりするものだろう。

今回は`sample.html`から、記事2の本文を取得したい！
…という要件だったとして解説をしたいと思う。

```sample.html
<html>
    <head><!-- 省略 --></head>
    <body>
        <div id='wrap'>
            <div class='article'>
                <article>
                    <h1>記事1のタイトル</h1>
                    <div>
                        <p>記事1の本文</p>
                    </div>
                </article>
            </div><!-- .article -->
            <div class='article'>
                <article>
                    <h1>記事2のタイトル</h1>
                    <div>
                        <p>記事2の本文</p>
                    </div>
                </article>
            </div><!-- .article -->
        </div><!-- #wrap -->
    </body>
</html>
```

「動かない」といわれた指定方法がこちら。

```動かない.py
path = "/html/body/div/div[2]/article/div"
elmt = driver.find_element_by_xpath(path)
```

`html`の中の`body`の中の`div`(id=wrap)の中の`div`(class=article)の2つ目の`article`の中の`div`を指定したいらしい。

ふむふむ。それって"/html/body/div[5]"なんじゃね？

```動くと思う.py
path = "/html/body/div[5]"
elmt = driver.find_element_by_xpath(path)
```

xpathの指定では、**画面の要素がどのようにネストしているかは関係ない**。
**「上から何回目に登場したdivか？」**が判定の基準となる。
CSSの疑似クラス`:nth-child()`に似ているだろうか。

2つ目の`<div class='article'>`を非表示にしたくて

```色々消えちゃう.css
div#wrap div:nth-child(2) { display: none; }
```
と指定すると、1つ目の`div#wrap`の中の「2つ目のdiv」を軒並み消してしまう。
sample.htmlの場合は記事1の本文と記事2が全て非表示となる。
(サンプルなのでclass指定しろよ！…とは言ってはいけない)

うーん。なんか例が悪いな。。

### 結論
なんせプログラマという生き物はインデントとかネストとかを気にして生きている人種なので勘違いしてしまうこともあるのだが、外部のプログラムにそのHTMLがどんな構成で書かれているかはわからない。
CSSだろうがPythonだろうがJavaだろうが、彼らは人の意思を酌んで動いてくれるものではないのだ。
今回の場合のように「記事が複数あるから同じようなブロックがある」を知っているのは、開発した**人**だけが知っている。

**find_element_by_xpathで要素を指定する時はその要素は上から数えて何回目に出現してるか？を注意してみてほしい**。
sshfsコマンド　ディレクトリの同期

#SSH接続でディレクトリを同期する

###sshfsコマンドを使用する
```
sshfs  pi:/home/work/  ./pi_work/
```

接続相手がpiという名前の相手のディレクトリを、現在のディレクトリ直下のpi_workとう名前を付けて同期したいとき。

いちいちscp,rsync コマンドを使用せずに、他のコンピュータのファイルにアクセスできるので便利。
WSL2/UbuntuのIPアドレスを取得したい

WSL2では、インストールしたUbuntuが仮想マシンとして稼働し、ホストとは別のIPアドレスを有します。そのため、ホスト(Windows)からWSL2(Ubuntu)で動くソフトウェアをつつく際、WSL2のIPアドレスを指定する必要がある場合があります。

では、WSL2のIPアドレスはどのように確認すればよいでしょうか?

なお、以下記事のように`.wslconfig`を設定してやると、WSL2上で稼働するソフトウェアに`localhost`でアクセスできるようになるのですが、少なくとも自分の環境では、`.wslconfig`がなぜかうまく動かなかったり、ホスト側のソフトウェアが`localhost`をうまく解決できなかったりする場合があります。本記事はそういうケースで役に立つ想定です。

[「「WSL 2」最大の課題であった“localhost”問題が解決 ～「Windows 10」Build 18945」](https://forest.watch.impress.co.jp/docs/news/1198651.html)

# 確認方法1: ipコマンドを使う

Ubuntu上で`ip a`コマンドを実行します。

```
$ ip a
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
       valid_lft forever preferred_lft forever
    inet6 ::1/128 scope host
       valid_lft forever preferred_lft forever
2: bond0: <BROADCAST,MULTICAST,MASTER> mtu 1500 qdisc noop state DOWN group default qlen 1000
    link/ether 0e:35:94:f5:06:c9 brd ff:ff:ff:ff:ff:ff
3: dummy0: <BROADCAST,NOARP> mtu 1500 qdisc noop state DOWN group default qlen 1000
    link/ether a6:87:9b:57:13:5f brd ff:ff:ff:ff:ff:ff
4: sit0@NONE: <NOARP> mtu 1480 qdisc noop state DOWN group default qlen 1000
    link/sit 0.0.0.0 brd 0.0.0.0
5: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
    link/ether 00:15:5d:06:d3:8a brd ff:ff:ff:ff:ff:ff
    inet 172.18.14.158/20 brd 172.18.15.255 scope global eth0
       valid_lft forever preferred_lft forever
    inet6 fe80::215:5dff:fe06:d38a/64 scope link
       valid_lft forever preferred_lft forever
```

実行結果のうち、`eth0`のinetが取得したいWSL2のIPアドレスになります。上記であれば`172.18.14.158`が対象のIPアドレスです。

`eth0`のみを決め打ちで取得したいのであれば`ip a show dev eth0`とすることもできます。

```
$ ip a show dev eth0
5: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
    link/ether 00:15:5d:06:d3:8a brd ff:ff:ff:ff:ff:ff
    inet 172.18.14.158/20 brd 172.18.15.255 scope global eth0
       valid_lft forever preferred_lft forever
    inet6 fe80::215:5dff:fe06:d38a/64 scope link
       valid_lft forever preferred_lft forever
```

# 確認方法2: hostnameコマンドを使う

ipコマンドを利用すると、たくさんの情報が出力されてしまうので、スクリプトでIPアドレスを取り出す場合などはやや不便です。こういう場合は`hostname -I`を利用するとよいでしょう。

```
$ hostname -I
172.18.14.158
```

対象のIPアドレスだけが取得できていることがわかります。ただし`hostname`コマンドにはあぶなかっしい側面もあるので、注意して使いましょう。

参考記事: [【Linux】インフラエンジニアの僕が「hostname」コマンドを使わない理由とは？](https://qiita.com/satton6987/items/f50ad3df302290d1f544)

# ホスト側からIPアドレスを取得したい

確認方法1、確認方法2は両方ともUbuntuのコンソールにコマンドを打ち込む想定でしたが、ホスト側のcmdやPowerShellからWSL2側のIPアドレスを取得したい場合は、`wsl -e`コマンドを利用するとよいでしょう。`-e`オプションは指定したコマンドをWSL2上で実行します。たとえば、確認方法2であれば以下のようになるはずです。

```
C:\> wsl -e hostname -I
172.18.14.158
```


# 注意点

ここで取得できたIPアドレスは固定ではないため、Ubuntuを起動するたびに変わる可能性があります。

# 環境情報

- Microsoft Windows [Version 10.0.19041.388]
- Ubuntu 20.04 LTS
PythonからMeCabを使用してユーザ辞書が適用されずハマった

#はじめに
研究目的で実践医療用語が収納された[ComeJisyo](https://ja.osdn.net/projects/comedic/)をmecabのユーザ辞書に登録した際に，辞書が反映されなかった話です．結論から言うとだいぶ初歩的なミスで， mecabの使い方をよく理解していなかったのが原因でした．しかし，自分は結構困ってしまったので，もしかして誰かの役に立つかもしれないので記録を残します．

#参考サイト
(1)ComeJisyoダウンロード：https://ja.osdn.net/projects/comedic/
(2)ユーザ辞書の登録：https://qiita.com/quvo/items/9ef250d58971eadf6e1a

(2)の記事は2016年の古い記事のため，(1)で公開されているComeJisyoの一番古いバージョンしかない時期でした．そのため，(2)で紹介されているような辞書をmacで使用するためにUtf-8に変換してdicファイルを生成する必要はなく，今だったら公開されているUtf-8版をダウンロードすれば既にdic形式のファイルも付いています．

なので，参考にするのは(2)のユーザ辞書の登録のみです．

#ハマったところ
参考サイト(2)を参考にして，ComeJisyoをユーザ辞書に指定した後，python3でmecabによる形態素解析を行なったところ

```python
import MeCab
tagger = MeCab.Tagger('-Ochasen')
text = '消化器の病気'

print(tagger.parse(text))
```

出力

```
消化	ショウカ	消化	名詞-サ変接続		
器	キ	器	名詞-接尾-一般		
の	ノ	の	助詞-連体化		
病気	ビョウキ	病気	名詞-サ変接続
```
あれ？ ComeJisyoが適用されていたら「消化　器　の　病気」ではなく，「消化器　の　病気」で分かち書きされるはず...
何かがおかしい．

#解決
```
$ mecab
消化器の病気

消化器の病気
消化器	名詞,一般,*,*,*,*,消化器,ショウカキ,ショウカキ,◆：：看栄教：5：：42354
の	助詞,連体化,*,*,*,*,の,ノ,ノ
病気	名詞,一般,*,*,*,*,病気,ビョウキ,ビョウキ,◆：：看助栄教：5：：124578
```
上記のようにmecabをターミナルから使用するとちゃんとユーザ辞書が反映されていることがわかる．このことからpythonでmecabを使用する時に何か間違えていることに思い当たりました．
調べた結果，下記のようにユーザ辞書を指定することで解決しました！

```python
import MeCab
tagger = MeCab.Tagger('-d /usr/local/lib/mecab/dic/ipadic -u /usr/local/lib/mecab/dic/userdic/ComeJisyoUtf8-2.dic')
text = '消化器の病気'

print(tagger.parse(text))
```

出力

```
消化器	名詞,一般,*,*,*,*,消化器,ショウカキ,ショウカキ,◆：：看栄教：5：：42354
の	助詞,連体化,*,*,*,*,の,ノ,ノ
病気	名詞,一般,*,*,*,*,病気,ビョウキ,ビョウキ,◆：：看助栄教：5：：124578
```
【SSL証明書】Let’s Encryptの利用方法

#はじめに
勉強のためにVPSサーバを借りて、自己紹介兼ポートフォリオを載せるHPを作成しました。
[Tommy WorkPlace](https://tommy-workplace.top/main)※停止中
ドメインの設定で何日か躓いて、あきらめかけましたができました！！！

**設定したドメインの反映に何日間かかかるようですね～**
それさえ知っていれば、、、（上記が躓き原因）

SSL証明書作るのも初めてだったので、作業を記事にしておきたいと思います。

#環境
CentOS 7.8
Apache 2.4.6

#SSL証明書設定
`Let’s Encrypt`のSSL証明書インストールをしていきます。

SSL証明書インストールの際、`mod_ssl`が必要らしいのでインストールします。

```shell
//mod_sslインストール
yum install mod_ssl

//再起動
service httpd restart
```

`Let’s Encrypt`をインストールします。

```shell
//Let’s Encryptインストール
yum install certbot python2-certbot-apache
```

Complete!が表示されたら完了！！

次に`certbot`でドメインと紐づけ？ます

```shell
//certbotの実行（ダブルコーテーションはいらない）
certbot --apache -d "ドメイン"
```

エラーなく実行が終わればOKです。
これでhttpでのアクセスがhttpsにリダイレクトされるようになります。

**最後にWebサーバの再起動を忘れずに！！！**

あと、**Let’s Encryptは証明書の有効期限が3ヶ月**らしいのでCRONで更新させます。

```
0 0 * * * root /usr/bin/certbot renew
```

#最後に
本当にいらんところでいつも躓くよな～
精進します。

でも初めてでも公開までできてたことがうれしいですね～
センスはないんですけどね。。。
【共有用】Windows10PCにNode.jsをインストールする手順


本記事では、Windows10PCにNode.jsをインストールする手順を紹介いたします。

##Node.jsとは
サーバーサイドで動かすことができるJavaScriptです。

JavaScriptは近年多くのWebサイトで活用されており
例えばカーソルを当てるとメニューが飛び出したり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/d5e642a5-cbb7-8812-7163-4ce225269728.png)

クリックすると画像が拡大するような
動きのあるWebサイトを作成するのに不可欠な言語です。

Node.jsはこのJavaScriptをサーバサイド（裏側の仕組み）で活用することができる仕組みになります。


**公式では以下のように書かれています**
Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。 以下の「Hello World」の例では、たくさんの接続を同時に処理することができます。 各接続ごとにコールバックは発火され、何もすることがない場合、Node.js はスリープします。
これは OS のスレッドが採用されている一般的な同時実行モデルとは対照的です。 スレッドベースのネットワーキングは比較的非効率であり、使うのはとても困難です。 さらに Node.js にはロックがないので Node.js ユーザーはプロセスのデッドロックの悩みから開放されます。 ほとんどの Node.js の関数は I/O を直接実行しないため、プロセスをブロックしません。 ブロックしないのでスケーラブルなシステムを開発するのに Node.js はとても最適です。
出典：https://nodejs.org/ja/about/


**自分の中では最近の開発で選択することが多い仕組みの１つです**

理由としては以下になります。　
※ほかにもメリットは多くありますが大きく以下の３つをピックアップしています。
・開発環境として軽くてサクサク動くVS Codeを使って快適に開発ができる
・Node.jsを動かすことができるサーバを簡単に構築することができる
・Node.jsで使うことができるライブラリが豊富なので開発品質向上や工期の短縮が可能



##インストール手順
公式サイトのダウンロードページにアクセスします
https://nodejs.org/ja/download/


LTSまたは最新版のWindowsの64bit(32bit版のWindows10PCはほとんど出回っていませんが32bit版を使用している方は32bitを指定)を選択し、ダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/5e292504-d18f-159c-dc19-6fb8845d5e65.png)


ダウンロードしたインストーラを起動し、インストールをすすめます。

インストール時の注意点は特にありませんが

インストール先を変えたい場合は、以下の設定の際にインストール先を変更してください。
特に変更しない場合はnextを選択してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/02b5a46f-e5e9-56d7-9d46-b7cb7bb153ce.png)



インストールのカスタマイズも強いこだわりがなければ何もせずnextを選択してください
※弊社ハンズオン等で動かす分にはデフォルトにしたままでnextを選択してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/4b4b2888-8f84-0d17-4493-8de84fa94b41.png)



chocolateyのインストールも基本は不要となりますのでチェックはいれずにnextを選択してください
※弊社ハンズオン等で動かす分には不要です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/9c0fa210-96ae-db94-e8ce-1b74b7ccc558.png)



Installを選択するとInstallが開始されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/5c8067dd-4c97-de93-a8c8-1bf57639d071.png)




##インストールの確認

ここに入力して検索から『cmd』を入力して、コマンドプロンプトを呼び出します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/65c1ce95-5563-44d3-2a6f-553dd02b6749.png)



コマンドプロンプトにて『node -v』と入力して、バージョン情報が表示されればインストール完了です
※表示されるバージョン番号は下記キャプチャと異なる場合がありますがバージョン番号が確認できればインストールは完了していますので問題ありません
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/ed090ec7-1c66-c277-d9bc-00b30c50b271.png)
[小ネタ] MacOSでQMKが"cannot find crtatmega32u4.o"でビルドできないときの対応

### 発端

キーボードを自作すると思い立って、パーツを買う前に[qmk](https://github.com/qmk/qmk_firmware)をMacに入れていた。
入れ方は
`brew install qmk`

さてそれから半年以上たって今回ようやくパーツを買って組み立てた。
さてキーマップをいじろう…と思って
`make claw44:default:avrdude`
してみたところ

```gnumake

QMK Firmware 0.9.50
Making claw44/rev1 with keymap default

avr-gcc (Homebrew AVR GCC 8.4.0) 8.4.0
Copyright (C) 2018 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Linking: .build/claw44_rev1_default.elf                                                             [ERRORS]
 | 
 | /usr/local/opt/avr-binutils/bin/avr-ld: cannot find crtatmega32u4.o: No such file or directory
 | /usr/local/opt/avr-binutils/bin/avr-ld: cannot find -latmega32u4
 | collect2: error: ld returned 1 exit status
 | 
make[1]: *** [.build/claw44_rev1_default.elf] Error 1
make: *** [claw44:default] Error 1
Make finished with errors
```

でビルドに失敗する…

### 対策

https://github.com/osx-cross/homebrew-avr/issues/182
にあった。要はavr-gccを完全に入れ直せばよい。

1. `brew search osx-cross/avr`でどのavr関連クロスコンパイルツールが入っているか確認する。私の環境では`avr-binutils``avr-gcc``avr-gcc@7``avr-gcc@8`が入っていた。
2. `brew uninstall avr-gcc@7`
3. `brew uninstall avr-gcc`
4. `brew uninstall avr-gcc@8`とすると

```
Error: Refusing to uninstall /usr/local/Cellar/avr-gcc@8/8.4.0
because it is required by qmk, which is currently installed.
You can override this and force removal with:
  brew uninstall --ignore-dependencies avr-gcc@8
```
と警告されたので指示に従い`brew uninstall --ignore-dependencies avr-gcc@8`を実行
5. `brew cleanup -s` `-s`オプションはキャッシュのクリア。
6. `brew install avr-gcc`を実行。しばらく時間がかかる。無事にインストールできれば完了。

これでQMKのビルドは通るようになった。

### 考察

対策後`brew search osx-cross/avr`すると`avr-binutils`と`avr-gcc`だけインストールされており`avr-gcc@7` `avr-gcc@8`は入っていなかった。
QMKを前にインストールしてから時間が半年以上経過し途中でOSをCatalinaにアップグレードしたためbrewもアップグレードされた。そこで何か失敗したのかもしれない。
remote repositoryのすべてのbranchをpullする(on Windows)

# はじめに
仕事でgitのSaaSから、異なるgitのSaaSへ移行を行いました。
その際に、remote repositoryのすべてのbranchをpullする必要がありました。

Mac上でやっている例はすぐに見つかるので、参考にさせて頂いてWindows(powershell)上で実現しました。

# 参考
以下のサイトを参考にさせて頂きました。ありがとうございます。

[全ブランチをリモートリポジトリからpullする](https://qiita.com/muraikenta/items/e590a380191971f9c4c3)
[Git のトラッキングブランチの確認と設定方法](https://yu8mada.com/2018/08/11/how-to-confirm-and-set-up-tracking-branches-in-git/)

# 環境
* Windows 10
* git 2.28.0
* VS Code
* Powershell

# 手順
* リモートリポジトリからcloneする
* 全branchをpullするスクリプトを流す
* git remote addする
* 全branchをpushするスクリプトを流す

# リモートリポジトリからcloneする
はい、リモートリポジトリからcloneしてください。

```powershell:git_clone
git clone <old remote repository>
```

リポジトリがたくさんある場合は、ここもスクリプトでやったほうがよさそうです。


# 全branchをpullするスクリプトを流す

```powershell:pull_all
$repos = @(
  "C:\...\repo1",
  "C:\...\repo2",
  "C:\...\repo3"
)

foreach ($r in $repos) {
  Set-Location $r
  $branches = git branch -r

  foreach ($b in $branches) {
    $b = $b.Trim().Split(' ')
    $branch = $b[$b.length - 1]
    $local_branch = $branch.Replace('origin/', '')
    $remote_branch = $branch

    git branch $local_branch $remote_branch
  }

  git fetch --all
  git pull --all
}
```

リポジトリがたくさんある方は、$reposを編集してください。
進捗が気になる方は必要に応じてメッセージを挿入してください。

# git remote addする
この作業の前にremote repositoryを作っておいてください。
remote repositoryのURLがわからないと、remote addできません。

cloneして、全branchをpullしたlocal repositoryにcdして、remote repositoryを設定します。
remote repositoryのURLがlocal repository名から判別できる場合、前述のスクリプトに組み込んだほうが間違いがないです。
私は移行元のSaaSが複数あったり、repository名の変更があったので手動で行いました。
ここを間違えると、repositoryの紐づけがくるってしまうので慎重に。

```powershell:git_remote_add
git remote add aws <new remote repository>
```

例ではawsという名前のremote repositoryをaddしています。
この時は、`AWS CodeCommit`にpushしました。皆さんの状況に合わせてわかりやすい名前にしてください。
repositoryの紐づけがわからなくなってしまうので、***originを上書きしちゃダメ絶対***です。

# 全branchをpushするスクリプトを流す
ここまで来たら、pushするだけです。

```powershell:pull_all
$repos = @(
  "C:\...\repo1",
  "C:\...\repo2",
  "C:\...\repo3"
)

foreach ($r in $repos) {
  Set-Location $r
  $branches = git branch

  foreach ($b in $branches) {
    $b = $b.Trim().Split(' ')
    $branch = $b[$b.length - 1]

    git push aws $branch
  }
}
```

remote repositoryの名前を`aws`から変更した方は、下から3行目の`aws`を適宜変更してください。

# まとめ
branchが50個ぐらいあると、手動移行だと殉職するなーと思いましたが、殉職せずに楽しく移行することが出来ました。
Xcodeに古いSDKをインストールする

古いXcodeプロジェクトをビルドしようとするとエラーが出たので、古いSDKをインストールします。

## xcodelegacyをクローン

```sh
$ git clone https://github.com/devernay/xcodelegacy.git
```

## 対応するXcodeをダウンロード

- [Xcode 2.5](http://developer.apple.com/devcenter/download.action?path=/Developer_Tools/xcode_2.5_developer_tools/xcode25_8m2558_developerdvd.dmg) on Mac OS X 10.4 (Tiger) (*)
- [Xcode 3.1.4](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/xcode_3.1.4_developer_tools/xcode314_2809_developerdvd.dmg) on Mac OS X 10.5 (Leopard) (*)
- [Xcode 3.2.6](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/xcode_3.2.6_and_ios_sdk_4.3__final/xcode_3.2.6_and_ios_sdk_4.3.dmg) on Mac OS X 10.6 (Snow Leopard) - [Xcode 4.0.2](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/xcode_4.0.2_and_ios_sdk_4.3/xcode_4.0.2_and_ios_sdk_4.3.dmg), [Xcode 4.1](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/xcode_4.1_for_snow_leopard_21110/xcode_4.1_for_snow_leopard.dmg) and [Xcode 4.2](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/xcode_4.2_with_ios_5_sdk/xcode_4.2_and_ios_5_sdk_for_snow_leopard.dmg) also run on Snow Leopard, but are only available to pay members (*)
- [Xcode 4.6.3](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/xcode_4.6.3/xcode4630916281a.dmg) on OS X 10.7 (Lion)
- [Xcode 5.1.1](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/xcode_5.1.1/xcode_5.1.1.dmg) on OS X 10.8 (Mountain Lion)
- [Xcode 6.2](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/Xcode_6.2/Xcode_6.2.dmg) on OS X 10.9 (Mavericks)
- [Xcode 7.2.1](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/Xcode_7.2.1/Xcode_7.2.1.dmg) on OS X 10.10 (Yosemite)
- [Xcode 7.3.1](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/Xcode_7.3.1/Xcode_7.3.1.dmg) on OS X 10.11 (El Capitan), please see note on linking below. [Xcode 8.2.1](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/Xcode_8.2.1/Xcode_8.2.1.xip) also runs on OS X 10.11, but can only compile for macOS 10.12.
- [Xcode 8.3.3](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/Xcode_8.3.3/Xcode8.3.3.xip) on macOS 10.12 (Sierra), please see note on linking below.
- [Xcode 9.4.1](https://developer.apple.com/devcenter/download.action?path=/Developer_Tools/Xcode_9.4.1/Xcode_9.4.1.xip) on macOS 10.13 (High Sierra), please see note on linking below.

> https://github.com/devernay/xcodelegacy
> から引用

ダウンロードしたら`xcodelegacy`と同じディレクトリに移動してください。

## SDKを抽出

```sh
# xcodelegacyの場所へ移動
# -osx105部分はダウンロードしたsdkによって変更してください
$ sudo ./xcodelegacy.sh -osx105 buildpackages
$ sudo ./xcodelegacy.sh -osx105 install
```
完了したらXcodeプロジェクトを開いて設定から
[Build Settings]->[Architectures]->[Base SDK]
でインストールしたSDKが選択できます。
Raspberry Pi 4 Model B で Sense HAT は動きます

Raspberry Pi 4 Model B で Sense HAT は動きます。
Raspberry Pi 3 と変わることはありません。

# 論よりコード

![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22754/41057d98-7d8b-802e-eb9c-3881834c3510.gif)

```console
$ python3 -c '__import__("sense_hat").SenseHat().show_message("Hello SenseHat!")'
```

### 動作確認環境

* Rasbperry Pi 4 Model 4GB (Element14 製)
   * Raspberry Pi OS / 2020-05-27
* Sense HAT (Element14 製)

# セットアップ

```console
$ sudo apt install -y sense-hat
$ sudo systemctl reboot
```

### もちろん、ほかのセンサーも動きます

```python
from sense_hat import SenseHat
sense = SenseHat()

if __name__ == '__main__':
	# Get Sensor data from Sense HAT
	v = {
		'tmpr_degC': sense.get_temperature(),
		'humd_pct':  sense.get_humidity(),
		'pres_hPa':  sense.get_pressure()
	}
	print(v)
```

# あとがき

当然動くと思ってましたよ。

EoT
Vuejs + axios + Slack Incoming WebHooks

フロントのJS(axios)からIncoming WebHooksにリクエストするさいのメモ
CORSで怒られてたところ、AuthorizationとContent-Typeヘッダーを削除することで上手くいった。

```javascript

    var params = {
      'blocks': [{
        'type': 'divider'
      }, {
        'type': 'section',
        'text': {
          'type': 'mrkdwn',
          'text': 'message'
        }
      }]
    }
    async function slack (payload) {
      var WEBHOOK_URL = 'https://hooks.slack.com/services/*******/*******/*********'
      const res = await axios.post(WEBHOOK_URL, JSON.stringify(payload), {
        withCredentials: false,
        transformRequest: [(data, headers) => {
          delete headers.common.Authorization
          delete headers.post['Content-Type']
          return data
        }]
      })
      return res.data
    }

    slack(params).then(console.log)
```