OmniAICreator/Qiita-1.07M huggingface dataset:
Xcodeの複数分割状態で定義を開くウィンドウを選ぶ

Xcodeで定義にジャンプしたりウィンドウを分割して開くなど機能があり、今回複数分割に対応したことで、これらの機能がどうなったかが分かったので記事にしました。


## 分割して開く

`option+cmd+クリック` で分割先がなければ用意し、あればそこで開きます。

閉じるときはウィンドウ左上の☓ボタンで閉じれます。

![dest.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37274/699c0a54-c3b5-523a-4795-2241172b2370.gif)



## 更に分割を増やす

Xcodeで待ち焦がれた複数分割をサポートされました。

これはウィンドウ右上のSplitedWindowの見た目に+と入ったアイコンを押すことで増やせます。(下図参照)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37274/6aae187d-913c-25d8-ae79-fbdc920cce89.png)

またこのアイコン上で`option` を押しながらタップすることで分割先を変えることができます。(下図参照)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37274/bb2e9ef7-15a8-86f8-8d41-97b0f5ef5760.png)

次の映像は縦分割→横分割をしています。
![dest.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37274/a309955b-279d-c207-137a-3d74417d0d55.gif)

これを使えばたくさんのウィンドウを一度に開いた状態で開発できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37274/f8beb501-8ee2-4514-3d40-d7da06112043.png)


## 複数画面の定義にジャンプで躓く :sob: 
画面が複数ある状態で `option+cmd+クリック`しても期待する動きになりません。
これは内部的に分割した順番を持っており、次の分割先で開いています。

## 複数画面の定義にジャンプで開く先を選ぶ :innocent: 

`shift+option+cmd+クリック` になります。 `shift`を追加して定義ジャンプを試みると開くウィンドウを選べるようになります。

![dest.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37274/0587ff13-2637-06e1-bc0a-612de80c73b1.gif)

それでは良いXcode開発ライフを。
パスってなに? 絶対パスと相対パスの違いは?

# パスってなに? 
パスとはファイルやフォルダの場所のことです。


# 絶対パスと相対パスの違いは?


## 絶対パスとは
URLでページを指定して、ファイルまたはディレクトリがどこにあるのかを確実に伝えます。

## 相対パスとは
今いる場所（階層）を基準にして、ファイルまたはディレクトリがどこにあるのかを伝えます。

#### 参考

[「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word1166.html)
NSISで管理者権限なしでインストールできるインストーラを作成する方法

# はじめに
昨今セキュリティが厳しくなり、企業によっては自分の端末であっても管理者権限を与えられず、ソフトウェアをインストールするのに逐一システム部門等の許可が必要、という会社もあると聞く。

このため今回、フリーのインストーラであるNSISを使って、管理者権限がなくてもインストールできるインストーラを作成する方法を調べてみた。

#環境
OS Windows 10
NSNS 3.04

#方法
やり方は超簡単。インストールスクリプトに以下一文を入れるだけ。

```nsi
RequestExecutionLevel user
```

#サンプル
以下サンプルでやってみよう。スクリプトをNSISでコンパイルして、Install.exeを作成してみよう。（File のところは自分がインストールしたいファイルに読み替えてほしい）

```Install.nsi
Name "ChemSyo"
OutFile "Install.exe"
InstallDir "$PROGRAMFILES\ChemSyo"
Page directory
Page instfiles
RequestExecutionLevel user

Section
  SetOutPath "$INSTDIR\python"
  File "C:\jagariko\work\SoftwareDevelop\NSIS\program\python\bin\DeepLearningKeras.py"
  File "C:\jagariko\work\SoftwareDevelop\NSIS\program\python\bin\GenerateImage.py"
  WriteUninstaller "$INSTDIR\Uninstall.exe"
  WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\NSISSample" "DisplayName" "ChemSyo"
  WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\NSISSample" "UninstallString" '"$INSTDIR\Uninstall.exe"'
SectionEnd

Section "Uninstall"
  Delete "$INSTDIR\Uninstall.exe"
  Delete "$INSTDIR\python\DeepLearningKeras.py"
  Delete "$INSTDIR\python\GenerateImage.py"
  RMDir "$INSTDIR\python"
  RMDir "$INSTDIR"
  DeleteRegKey HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\NSISSample"
SectionEnd
```

# 実行
まず```RequestExecutionLevel user```をつけずに作成したインストーラを用いて、一般ユーザでインストールしようとすると、管理者権限のパスワードを入力するように促される。
次に```RequestExecutionLevel user```をつけたインストーラを使った場合は、何も聞かれずにインストールが始まる。インストール先に管理者権限の必要なフォルダを指定すると、以下のようにアクセス権限のも問題でエラーとなるが（これは正しい動作だ）、管理者権限が不要なフォルダを選択すると、全く問題なくインストールすることができるのだ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329816/8d6897d2-5acf-0c74-c901-5bf16e2ee48a.png)

# おわりに
今回紹介した技を使うと、企業管理者の目を盗んで自由にインストールできるソフトウェアを作成し、配布することができる。
おっと、依存するOSSなどがある場合、それらも管理者権限がなくてもインストールできるかどうか調べておくことを忘れずに。


#参考文献
- [NSIS Installer without Admin Privileges](https://stackoverflow.com/questions/45467280/nsis-installer-without-admin-privileges)
ARCoreを使ったARアプリをエミュレータで動かす

ARKitを使ったARアプリはエミュレータで動かせませんが、ARCoreを使ったARアプリはエミュレータで動かすことができます。
エミュレータで動かす際に少しハマったことがあるので共有します。
(Unityで作成したARアプリは、この記事とは違うやり方なので注意してください。)
## 必要な環境
- Android Studio 3.1以降
- Android Emulator 27.2.9以降

## サンプルプロジェクトのダウンロード
この記事ではARCore SDKにあるサンプルプロジェクトを使用します。
[ARCore SDK](https://github.com/google-ar/arcore-android-sdk)をDLします。
そして、`samples/hello_ar_java`をAndroid Studioで開きます。

## エミュレータ
エミュレータを起動します。
端末によってはARCoreをサポートしてないため、エミュレータはなるべく新しめの端末の方がいいです。
API Levelは27(Oreo)以降が必要です。(API Levelも最新の29が良さそう)

## サンプルアプリの起動
ここからが少しハマったところです。
サンプルアプリを起動します。
すると...

![Screenshot_1574947031.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237700/ee98f204-2455-ea14-63b4-9a1d380fbb86.png)

`This application requires the atest version of Google Play Services for AR.
(このアプリを使用するには、最新バージョンのGooglePlay開発者サービス(AR)が必要です。)`
と、出てきます。
どうやら、**エミュレータでARアプリを使うにはGoogle Play Services for ARが必要**らしいです。
`CONTINUE`を押すとGoogle Play Storeに飛ばされます。

![Screenshot_1574947339.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237700/56e67899-b7cb-7034-df39-9e1864d26a78.png)

これをインストールしなきゃいけないのに
`Your device isn't compatible with this version.
(お使いのデバイスはこのバージョンに対応していません。)`
って表示されて、インストールできなく、ARのサンプルアプリが無限にエミュレータで起動できない状態になってしまいます。

こんな時は、大人しく[ARCoreのドキュメント](https://developers.google.com/ar/develop/java/emulator)をみましょう！

どうやらGitHubの[リリースページ](https://github.com/google-ar/arcore-android-sdk/releases)から最新の`Google_Play_Services_for_AR.apk`をDLする必要があるっぽいです。
*現在(2019年11月時点)では、v1.13.0が最新
DLしたapkファイルをエミュレータ上にドラッグするか、エミュレータ起動中に、以下のadbコマンドを叩きます。

```
adb install -r Google_Play_Services_for_AR_1.13.0_x86_for_emulator.apk
```
うまくインストールされるとアプリの一覧に表示されます
![SCREENSHOT_1574948695 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237700/2afe5b03-b811-32d1-b6f8-96ec1bd9d2ab.png)

そして、もう一度サンプルアプリを立ち上げると...
![Screenshot_1574950058.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237700/a5237fe3-9a6c-2e46-ae0a-5bd13c0317a3.png)

無事、エミュレータでARアプリを動かせました！！！！
なぜか平面認識すると白くなるようです。他のアプリだとそうならないので、おそらくサンプルアプリの影響です。

エミュレータ内で動くためには以下のKeyを使います

|platform  |key|
|---|---|
|mac  |option + WASD|
|Linux, Windows|Alt + WASD|
ちなみに、エミュレータの右にある「・・・」の中にあるVirtual sensorsで、センサの値を直接いじっても動きます。


#### API Levelを28以下にすると...
API Levelを29じゃなく、28や27でやった場合、
`this device does not support AR`と表示されてアプリが使えないです。apkファイルのバージョンを下げたらいけそう...って思ったのですが、そもそも`Google_Play_Services_for_AR.apk`を認識してくれませんでした。
知見ある方、コメント待ってます。
正規表現で〜年以降を置換する

2020年以降、「体育の日」が「スポーツの日」へ変更になります。

・国民の休日について　−内閣府
https://www8.cao.go.jp/chosei/shukujitsu/gaiyou.html

そんなとき、祝日のマスターをファイルで定義しているときに
2020年以降は置換する必要があったので正規表現でできるなと試したので、
備忘的に記録しておこうと思います。

## 例えばこんなファイル
```
2015-01-01  元日
2015-01-12	成人の日
2015-02-11	建国記念の日
2015-03-21	春分の日
2015-04-29	昭和の日
2015-05-03	憲法記念日
2015-05-04	みどりの日
2015-05-05	こどもの日
2015-05-06	休日
2015-07-20	海の日
2015-09-21	敬老の日
2015-09-22	休日
2015-09-23	秋分の日
2015-10-12	体育の日
2015-11-03	文化の日
2015-11-23	勤労感謝の日
2015-12-23	天皇誕生日
・・・
・・・
・・・
2020-01-01	元日
2020-01-13	成人の日
2020-02-11	建国記念の日
2020-02-23	天皇誕生日
2020-02-24	休日
2020-03-20	春分の日
2020-04-29	昭和の日
2020-05-93	憲法記念日
2020-05-04	みどりの日
2020-05-05	こどもの日
2020-05-06	休日
2020-07-23	海の日
2020-07-24	体育の日
2020-08-10	山の日
2020-09-21	敬老の日
2020-09-22	秋分の日
2020-11-03	文化の日
2020-11-23	勤労感謝の日
・・・
・・・
・・・
```

## 操作
VSCode(visual studio code）
`ctrl + shift + h`
で置換を呼び出せますね。
（正規表現のチェックを忘れないこと）

検索欄：
`(.*20[2-9][0-9].*)体育の日`

置換欄：
`$1スポーツの日`

これで2020年〜2099年まで簡単にできます。

以上です。
【お遊びの統計学】チェビシェフの不等式で信頼区間を構成する

# 背景
前回（[【お遊びの統計学】試験で偏差値60以上の人数の割合をマルコフの不等式で調べてみる](https://qiita.com/jajagacchi/items/33f6017410d6e2129246)）はマルコフの不等式で遊びました。今回はチェビシェフの不等式で遊びます。

# チェビシェフの不等式
チェビシェフの不等式は

```math
P(|X-\mu|\geq c) \leq \sigma^2/c^2
```

で与えられます。これもマルコフの不等式同様（というかマルコフの不等式の特殊形）、外れ値がどの程度あるかを説明することが出来ます。大数の法則の証明で有名ですね。

# チェビシェフの不等式で信頼区間を構成する
$1-\alpha$信頼区間は

```math
P(X_L(\{x\}) < \mu< X_R(\{x\})) \geq 1-\alpha
```

を満たす区間として定義されます。むむむ、チェビシェフの不等式が使えそうだぞ。
標本平均から母平均を推定するとします。チェビシェフの不等式を統計量$\bar X_n$に適用します。外れ値が$\alpha$以下となるようにすればよいので、

```math
P(|\bar X_n-\mu|\geq c) \leq \frac{\sigma^2}{nc^2}=\alpha
```
とすれば$\mu\pm c$で囲まれる範囲が信頼区間となります。$2c$について解けば

```math
2c = \frac{2\sigma}{\sqrt{n\alpha}}
```

となります。
ポアソン分布からのサンプリングにより$\lambda=3$を推定します。$\alpha=0.05$とします。gnuplotでグラフ化します。

```
gnuplot> plot [1:100] 2*sqrt(3.)/sqrt(x*0.05)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520857/b462067f-af83-656a-36ff-53016bfe6c15.png)
実際には$\sigma^2=\lambda$は未知なので、不偏分散等を利用すべきですが大目に見てください。
以前（[【区間推定】信頼区間の解釈、構成法について数値実験してみる](https://qiita.com/jajagacchi/items/1bc96cafd3e6701b56b1)）やった正攻法の信頼区間と比べてみます($n=100$)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520857/216a5d45-7d47-7aaf-5d16-c09bf27e9c6e.png)
大体区間幅が0.8くらいでしょうか。チェビシェフの不等式による結果が1.6くらいなので概ね2倍となっています。

# 感想
思ったほど悪くない結果だと思いました。チェビシェフの不等式は大数の法則の証明で有名、と書きましたが、今回の内容はほぼそのまんまですね。$\alpha$を小さくして$n$を大きくして、みたいなことすると母平均にいくらでも近づくことが直感的にもわかると思います。書いてる途中で既視感バリバリでした（笑）。
Unity ARなiphoneアプリをつくってみた

https://qiita.com/nonkapibara/items/3800d4ff3c56912073df

Fusion360で作ったモデルをfbxファイルにして、unityに取り込む。

で、build and run。

xcodeでprovisoiningのエラー出たら、bulid settingでsignをすべてiOS developperに変更すれば良い。
https://qiita.com/umi_mori/items/1ffe2d56ad97e64cbac0
Webサービスの3つの画面をトレースした所感【UIトレース】

はじめまして、よしこ [＠K2_yoshiko](https://twitter.com/K2_Yoshiko) です。

今回は、レシピ検索サービスNadiaのUIトレースを行ったので、その感想や気付きをまとめました。



# Nadiaとは

[Nadia](https://oceans-nadia.com/"Nadia")
> レシピサイトNadia(ナディア)はプロの料理家・料理研究家・フードコーディネーターなどのレシピやお料理に関する記事が見られるお料理サイト。
引用：https://oceans-nadia.com/special_sites/about_nadia

女性向け情報サービスLOCARIのランキングではまとめ記事が上位によく上がっていたり、Twitterでもレシピがよくバズっていたりしています。

Nadiaではレシピ投稿者のことをアーティストと呼んでいますが、一般人ではなく料理家やフードコーディネーターとして活動しているプロがアーティストとして登録していますので、レシピの質と信頼性が高いという特徴があります。



# UIトレースをするにあたって
Nadiaは、プロのレシピが見れるという体験を訴求していますので、料理に関する情報を提供することと同時に、アーティストの魅力を如何に伝えるか／演出するかが大切になります。

これは、他のレシピ検索サービス（クックパッド等）にはない特徴なので、アーティストの魅せ方をUIUXとしてどう実現しているのかをトレースする中で探っていきたいと思います。

今回のトレースは、ホーム画面・レシピ画面・アーティスト画面の3つを行います。
アプリは、Adobe XDを使用します。



# 成果と気付いた点
成果物
 ![PixelSnap 2019-11-23 at 22.52.50@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532774/e9731e6a-2d9f-8e54-7fe2-887adb51a4be.png)


まず、UIトレースを終えてみての全体的な所感ですが、
Nadiaは、レシピ検索サービスというよりも、SNSとしての側面が大きいなと感じました。

その感じた理由は、以下の2点です。

- ホーム画面に配置してあるレシピへのリンクに、アーティスト画像＋名前がほぼ配置されている
- イイね機能の「おいしそう」やフォルダー機能の「お気に入り」の数が、ホーム画面のリンクに可視化されていたり、レシピ画面のファーストビューで目立つように配置されている
 
このことから察するに、料理コンテンツを中心としたSNS的な体験に重きを置いているのではないでしょうか。

実際に使用している人から話を聞いたところ、アーティスト本人に対して固定ファンが付くこともあるそうです。

---

その他、UIトレース中に気になったところは、各画面のデザインにかなり差があったところです。

例えば、セーフエリア（画面左右端の余白）がそれぞれの画面で違いまして、

- ホーム画面：7px
- レシピ：10px
- ユーザ：20px

となっていました。

ちなみに、Apple社ガイドライン（HIG）では左右サーフエリアは少なくとも16pxを推奨していますので、その基準を満たしているのはアーティスト画面のみでした。

テキストカラーについても、ホーム画面は#666666のグレーだったのに対して、アーティスト画面では#583407の濃茶色になっていましたし、画面毎で細かい差異がいくつかありました。



# 良い・真似したい点
3画面の中でもアーティスト画面の視認性がよく、ファーストビューから下までざっと流し見していても、流れてくるコンテンツが何なのかが大体把握できる作りになっていました。

その理由は、以下のように分析しました。

1. 十分な余白を要素間に確保した（近接の効果）
2. テキストを始めとした各要素のサイズに十分な差を作った（コントラスト効果）
3. デザインに罫線や箱などの装飾を少なくし、相対的に他の装飾を目立たせた（コントラスト効果）
4. 読んでもらいたいテキストは16px以上を使い、14px以下のテキストはメタ情報などのみに限定した。（可読性）
5. できる限り左寄せの配置にして、左側に視線を集中させた（整列の効果）

トレース中に私が気付けたのはこのくらいでしたが、工夫はまだまだありそうでした。



# 改善できる点

1. 各画面のデザインを、統一化させる。
	- デザインの統一感は、サービス体験に大きな影響があるので統一したほうがいいと思いました。
	- 個人的な好みで言えば、アーティスト画面のデザインがいい感じです。
2. ホーム画面のレシピ一覧のナビはテーブル型で縦に並べるのではなく、カード型で左右に移動できるナビにする。
	- レシピ画像を大きくできるので訴求力を高めることができる上に、レシピ数を増やせるので一度で二度美味しい。
3. 全体的に余白をもっと大きく取る。
	- 特にホーム画面がそうですが、余白が少なく画面いっぱいに表示されているので、デザインに慣れるまで時間がかかりました。
	- もし余白を確保することでページが縦長になりすぎるなら、コンテンツの表示方法を変えるか、そもそもコンテンツの整理を行うことが望ましいのではないでしょうか。


# 今回のトレースで学んだこと・得たこと
一定の地位を築きつつあるサービスであっても、デザインが統一されていないこともあるということに気付きました。
逆に言えば、デザインを最適化できたら、そのサービス体験はどれほどの掛け算になるんだろうとワクワクもしました。

実際のトレース作業については、作業の初期段階からXDのアセット機能をフル活用しつつ進めましたが、狙い通りすごく効率が上がったので、もっとXDやプラグインの機能を活用して作業効率を高めたいです。

しかし、アセットの命名がどんどん散らかってくるので、他の人の命名規則を参考にしつつ自分の命名規則を作る必要が出てきました。
これは、今後の課題となりました。



# 終わりに
UIトレースは、UIUXデザイナー初心者によくオススメされる勉強手法ですが、「なんでこのサービスをトレースするのか」といった目的意識はすごく大事だと感じました。
もし目的を見失うと、ただトレースするだけの作業になってしまうので、すごく無駄な時間を過ごしてしまいそうです。

UIトレースでは得られるものが多いので、今後も続けていきたいと思います。

長文になりましたが、最後までお読みいただきましてありがとうございました！
Python GoogleMapsAPIで逆ジオコーディングを日本語で出す

## 始まりは「緯度・経度」から
たまたまだが、仕事でデータ処理チームのExcelのVBAを色々と直しているうちに、「motciniさん、VBAでAPIって使ったことありますか？」と聞かれた。
「え、使ったことないですね。どうしましたか」
「VBAで、緯度・経度から住所を調べるGoogle MapのAPIを使ってるんですが、なかなかうまくいかなくて…」
「ほう」
ということでコード画面を見せてもらったところ
***（さっぱりわからん）***
というのが正直な感想だった。
画像ダウンロードのサンプルプログラムでちょっとflickrのAPIをチュートリアルに沿って使ったことがあるだけで、そもそも業務でAPIとか使わなかったんですよね。
「因みにそのデータはどのくらい処理するんですか」
***「8万行です」***
Oh...そりゃ確かにAPIとかそういう機能も使いたくなるだろうな（この時APIという言葉はふわっとしかわからなくて、雰囲気で言っていた感はあります）
でも、個人的に正直Pythonとかで処理しちゃった方が楽だなと思ったので、
「とりあえず、Pythonで何かできないか調べてみます」
ってことでまずはGoogleMapsAPIというものについて調べることにした。

## Geocodingの記事は見飽きた
ということで早速ググってみるわけだけど、どうやら「緯度・経度」から住所を探知するのは「逆ジオコーティング（Reverse-Geocoding）」ということがわかった。
物件名や名称から住所、緯度・経度を探すのは普通の「ジオコーディング」らしい。
しかし困ったことに、この「逆ジオコーディング」でヒットする記事は少なく、求めていたコードは中々見当たらなかった。
***5回くらい検索ワードを変えるころには正規のジオコーディングの記事は見飽きていた。***
さらに、逆ジオコーディングのそれっぽいコードが乗っていたとして、得られる住所は英語表記、つまり番地→都道府県という形で、アルファベットで表記されてしまうことがネックだった。
例えば「東京タワー」で調べたら、
・〒105-0011 東京都港区芝公園４丁目２−８
と表示されるのではなく、
・4-2-8, Shibakoen, Minato-ku, Tokyo
みたいな感じで表記されてしまう。
これでは住所を次に読む人が困ってしまうので、なんとか日本語表記にする方法を探した。
***そして見つかった***

以下、コードを載せるので参考になれば幸いである。
[参考にしたわかりやすい解説(Pythonでジオコーディング(Geocoder/Googlemaps))](https://qiita.com/yoshi_yast/items/bb75d8fceb712f1f49d1#%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8%E3%82%B3%E3%83%BC%E3%83%89)

### 逆ジオコーディング（緯度・経度）から住所を日本語で探す
```python
import googlemaps

#GoogleMapsAPI用に取得したAPIキーを変数に格納する
Key = XXXXX

#GoogleMapsAPI用にAPIキーを返す
gmaps = googlemaps.Client(key=Key)

#リストにいくつか緯度・経度を格納する
list = [
    "35.65858645, 139.745440057962", #東京タワー
    "35.71005425, 139.810714099926" #東京スカイツリー
]

#リストの中から順番に住所を探していく
for i in list:
    results = gmaps.reverse_geocode((i), language='ja')
    add = [d.get('formatted_address') for d in results]
    print(add[1])

#=>日本、〒105-0011 東京都港区芝公園４丁目２−８
#=>日本、〒131-0045 東京都墨田区押上１丁目１−８３
```

問題はこのままだと、文頭に「日本、」という若干余計な文字が入っていること。
これをスライスで途中から記載するできるようにちょっとコードを改変する。

```Python
for i in list:
    results = gmaps.reverse_geocode((i), language='ja')
    add = [d.get('formatted_address') for d in results]
    Jusho = add[1]
    print(Jusho[3:])

#=>〒105-0011 東京都港区芝公園４丁目２−８
#=>〒131-0045 東京都墨田区押上１丁目１−８３
```
うん、素晴らしい出来栄えだ。求めていた形そのものである。
ただ、問題はGoogleMapsAPIがどうやら月に無料でアクセス可能なAPIの件数が40,000件までということらしい（[参照元](https://cloud.google.com/maps-platform/pricing/sheet/?hl=ja)）
まぁそれを超えるヘビーユーザーは中々いないかもしれないが、それを超えると料金が請求されてしまうので頭に入れておこう。
CloudNative Days Kansai 2019 発表資料一覧

# 概要
[CloudNative Days Kansai 2019](https://cloudnativedays.jp/cndk2019/)の発表資料の一覧です。

# 発表資料一覧
- コンテナの作り方～Dockerは裏方で何をしているのか～
- [メルペイのマイクロサービスとCloud Native](https://speakerdeck.com/tjun/cloudnative-days-kansai2019)
- Anthos が描く新しいアプリケーションプラットフォーム
- [MackerelにおけるCloudNativeへの継続的な取り組み 〜オンプレからCloudNativeまで〜](https://speakerdeck.com/masayoshi/cloudnative-kansai-2019)
- クラウドサービス開発・運用の落とし穴教えます
- [分散システム内のプロセス間の関係性に着目したObservabilityツールの設計と実装](https://speakerdeck.com/yuukit/transtracer-cndk2019)
- [創るものから活用するものへ -価値を生み出すOperatorの力-](https://speakerdeck.com/capsmalt/operator-basic-in-cndk2019)
- [我々は Kubernetes の何を監視すればいいのか？](https://speakerdeck.com/manabusakai/cloudnative-days-kansai-2019)
- 早い・安い・うまい！〜RancherによるKaaS事例集〜
- [ZOZOTOWNの画像検索機能にみる、Kubernetesを使った機械学習基盤運用の裏側](https://speakerdeck.com/inductor/zozo-image-search-under-the-hood-with-kubernetes)
- [CloudNative Buildpackで創る、CloudNativeな開発体験](https://speakerdeck.com/pyama86/cloudnative-buildpacksdechuang-ru-cloudnativenakai-fa-ti-yan)
- [1年間のシステム運用を通して分かったIstioの嬉しさと活用における注意点](https://speakerdeck.com/ido_kara_deru/benefits-and-usage-notes-of-istio-based-on-our-system-operation-experience)
- [Grafana LokiでCloud Nativeなロギングをはじめよう！](https://speakerdeck.com/polar3130/lets-begin-cloud-native-logging-with-grafana-loki)
- [Tracing your containers - audit, falco, eBPF](https://speakerdeck.com/udzura/tracing-the-containers-mainly-about-ebpf)
- [Kubernetesの運用を支えるGitOps](https://www.slideshare.net/ssuser4fddce/kubernetegitops)
- オンプレ/クラウド、ベンダーを問わず "just run my code"を実現するCloudFoundry on Kubernetes
- [Production Ready Kubernetesに必要な15のこと](https://speakerdeck.com/govargo/production-ready-kubernetes-15-rules)
【ライフゲーム】lifegame-coreの紹介

# はじめに
この記事は[Global Day of Coderetreat 2019 in Shizuoka](https://connpass.com/event/147716/)に参加し、ライフゲームライブラリを作るに至るまでの話です。

# Global Day of Coderetreat 2019 in Shizuoka
今年（2019年）の11/9にGlobal Day of Coderetreat 2019 in Shizuokaというイベントに参加してきました。
イベントの内容をざっと箇条書すると以下のとおりです。

- 数十分でペアプログラミングをし、お題に沿った作品を開発する
- 今年のお題は「ライフゲーム」

参加した感想としては、コミュニケーションを取りながらプログラミングすることが楽しいと思いました。
こういうハッカソンっぽいイベントはもっと欲しいと思いました。

このイベントをきっかけに「ライフゲームのライブラリを作ってみたいな」と思ったのでJavaScript/TypeScript向けにライフゲームのライブラリを作りました。

# lifegame-core
リポジトリ：[hota1024/lifegame-core](https://github.com/hota1024/lifegame-core)
npm：[lifegame-core](https://www.npmjs.com/package/lifegame-core)
使用言語：TypeScript
実装の話→<https://speakerdeck.com/hota1024/typescriptderaihugemuwozuo-tutemita>

# デモ

```game.ts
import { LifeGame, ArrayWorld, BasicEnvironment, Cell, ConsoleWorldRenderer, CellState } from 'lifegame-core'

const game = new LifeGame(new ArrayWorld(20, 20, Cell), new BasicEnvironment()) // Create 20 x 20 world.
const renderer = new ConsoleWorldRenderer() // Create console world renderer.

// Random generate.
game.setEach(() => {
  return Math.random() > 0.5 ? CellState.Dead : CellState.Living
})

// Tick function.
const tick = () => {
  console.clear() // Clear console.
  renderer.draw(game.world) // Draw.
  game.forward() // Forward.

  setTimeout(tick, 500)
}

// Start
tick()
```

<script id="asciicast-TxVPXDqWCptlNTet5hhy6h7RS" src="https://asciinema.org/a/TxVPXDqWCptlNTet5hhy6h7RS.js" async></script>

# 最後に
こういうイベントに行くと何かを作りたくなるのでどんどんイベントに参加していきたいと思います。
Railsの非同期通信でDELETEを行う

# はじめに
自作アプリ「[CheckMe!](https://check-me-share.herokuapp.com)」はユーザビリティ向上を目指してDBとのやりとりに非同期通信を多く使っています。
CRUDを非同期でやっていますが、Deleteについて結構つまづくポイントがあったので備忘録を兼ねてまとめておきます。
この記事が同じことをやりたい人の手助けになれば幸いです。

# 条件
削除対象のidが含まれたリンク(クラスに’delete_link’を持つ）をクリックした時にイベントを中止して
idのアイテムを削除する非同期通信をする。

# 実装

```javascript
$('.delete_link').on('click', function (e) {

    // stopPropagationがないとHTMLとJSONの
    // リクエストが同時に送られてしまう
    e.preventDefault();
    e.stopPropagation();

    //リンクに含まれるURLを取得する
    var url = $(this).attr('href');

    $.ajax({
      url: url,
      type: "DELETE",
      dataType: 'json',
      // CSRF tokenを発行する
      beforeSend: function (xhr) { xhr.setRequestHeader("X-CSRF-Token", $('meta[name="csrf-token"]').attr('content')) }
    })
      .done(function (data) {
        成功した時
      })
      .fail(function () {
        失敗した時
      })
})
```

# ポイント
### stopPropagationを使うこと

preventDefaultだけだと、なぜかリクエストを送った際にHTMLとJSONのリクエストが
同時に送られてしまう。結果、２回異なるリクエストで非同期通信したことになってしまうので
stopPropagationを使う。


### CSRF tokenを発行する

CSRF tokenが無いと認証が通らず、そこで処理が止まってしまうのでtokenを渡すよう
にしてあげます。
【ツール配布】安全確認回避、ポップアップ回避のseleniumライブラリ

# コード
[github:pyAutoTest](https://github.com/ofbear/pyAutoTest)

# 目的
## やりたいこと
- seleniumをシナリオで動かしたい
    - seleniumはコード書く必要あるが、毎回コードを書きたくない
        - 他部署の非エンジニアでも使えるようにしたい
    - ブラウザでコード出力できるが、毎回手作業したくない
- システム毎に改修する部分は一ヶ所にまとめたい
- デバッグ中にオレオレ証明書というだけで止めたくない
- クライアント証明書提出で止めたくない

## 後回しでいいこと
- 処理速度
    - 夜間に走らせるため
- 結果確認の自動化
    - 証拠残す必要もあるのでスクショの確認でOK
    - 今後の課題

# 実装
## オレオレ証明書回避
### コード
``` python
def avoid_security_check(self):
    ok_flg = True

    if self.__driver.title:
        # ie
        if self.__driver.title == "このサイトは安全ではありません":
            ok_flg  = self.click("moreInfoContainer")

            ok_flg &= self.click("overridelink")

            time.sleep(0.5)

        # edge
        elif self.__driver.title == "証明書エラー: ナビゲーションはブロックされました":
            ok_flg  = self.click("moreInformationDropdownSpan")

            ok_flg &= self.click("invalidcert_continue")

            time.sleep(0.5)

    return ok_flg
```

### 説明
- ページタイトルを確認して、忠告していればOK
    - 遷移に時間かかるため、sleep必須

## クライアント証明書提出
### コード
``` python
def cert(self, cmd):
    self.__pki_flg = False

    ok_flg = True
    with concurrent.futures.ThreadPoolExecutor(max_workers=2) as executor:
        futures = []
        futures.append(executor.submit(self.post_cert_chrome, cmd))
        futures.append(executor.submit(self.submit, cmd))
        for future in concurrent.futures.as_completed(futures):
            ok_flg &= future.result()

    return ok_flg

def submit(self):
    ok_flg  = self.click("submit")

    return ok_flg

def post_cert_chrome(self, cmd):
    # cmd check is practiced
    if cmd == "ok":
        ok_flg = self.move_click("img/chrome/ok.png")

    elif cmd == "cancel":
        ok_flg = self.move_click("img/chrome/cancel.png")

    elif cmd.isdecimal():
        diff = 80 + (int(cmd) * 40)
        ok_flg  = self.move_click("img/chrome/next.png", 0, diff)

        ok_flg &= self.move_click("img/chrome/ok.png")

    return ok_flg

def move_click(self, img_path, x=0, y=0, seconds=0.2):
    # search from image
    pos, ok_flg = self.search_from_image(img_path)
    if ok_flg:
        # move mouse
        pyautogui.moveTo(pos.x + x, pos.y + y, seconds)
        # click
        pyautogui.click()

    return ok_flg

def search_from_image(self, img_path):
    # check image
    if not os.path.isfile(img_path):
        self.__log.printLog(LOG_LEVEL.EEROR, "failed to setting")
        return None, False

    i = 30
    while i > 0:
        i -= 1

        # get position
        pos = pyautogui.locateCenterOnScreen(img_path)

        if pos:
            break

        time.sleep(0.2)

    if not pos:
        return None, False

    return pos, True
```

### 説明
- ポップアップ中はseleniumが止まるため、並列処理
    - selenium
        - ポップアップ出現のトリガを行う
    - pyautogui
        - ポップアップ画像を検索し、押下
            - ポップアップ出現までラグのある場合も考慮し、指定時間内はループ

# まとめ
- メリット
    - サンプルとしての有用性はある
        - 安全確認の回避
        - ポップアップの回避
- 今後の課題
    - 結果確認が目視のため、自動化したい
    - ポップアップ対応のため、不都合がある
        - 画像検索するため非表示実行できない
        - ツールでマウス操作する場面があるため、テスト中にPC操作ができない
気になる物体検知

# 気になる物体検知

主要なGAN研究の歴史（2019年11月現在）
https://qiita.com/mm_918/items/c6bf085e7618b8af3d98


NANAKOさん
https://qiita.com/nanako_ut

K Yさん
https://qiita.com/arutema47

GushiSnowさん
https://qiita.com/GushiSnow

Kazuyuki Miyazawaさん
https://qiita.com/kzykmyzw

kohariteさん
https://qiita.com/koharite

【Keras】 Qiita殿堂入り記事
http://youwht.ml/tag_dendou/Keras
日本語vimを自前ビルド

はじめに
-----
vimのリポジトリ https://github.com/vim をそのままビルドしたら日本語化されなかったので、メモ。

知識
-----
- 正常に日本語化されているvimがある環境では `share/vim/vim81/lang` ディレクトリ内に `ja/LC_MESSAGES/vim.mo` ファイルがあるが、そうでない環境には存在しない。
- このファイルを生成するには vim のビルド時に `gettext` パッケージに含まれる `msgfmt` コマンドが必要のようだ。
- `msgfmt` コマンドがなくても、vimのビルドは問題なく通ってしまう。

手順
-----
~~~ sh
sudo aptitude install gettext
git clone git@github.com:vim/vim.git
cd vim
./configure --prefix=$HOME
make
make install
~~~

ついでに
-----
日本語マニュアルも導入しておく。

~~~ sh
cd ~/.vim
mkdir -p pack/vimdoc-ja/start
cd pack/vimdoc-ja/start
git clone git@github.com:vim-jp/vimdoc-ja.git
~~~
VSCode で Emacs の dired を使う

Emacs から VSCode への移行は大した苦労もなかったのですが、Explorer でディレクトリツリーからファイルを見つける操作には、どうしても慣れることができませんでした。
(どうやるのかいまだによくわかっていません、、)

[dired を再現する拡張](https://marketplace.visualstudio.com/items?itemName=rrudi.vscode-dired)も試してみて、よく出来ているとは思ったのですが、自分にはいまひとつしっくり来ませんでした。

ダメ元で統合ターミナルで Emacs を起ち上げて dired を使うようにしてみたら、非常によい感じだったので、その方法のご紹介です。

<img width="776" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2596/9b17d6a4-f41e-0f31-922d-ebf8175c53df.png">

## dired から VSCode を開けるようにする

まず、`dired` から VSCode を開けるようにします。`.emacs.d/init.el` に以下を追加します。

```elisp
; dired で c キーで VSCode を開く
(define-key dired-mode-map (kbd "c") 'open-vscode)
(defun open-vscode ()
  (interactive)
  (let ((files (dired-get-marked-files t current-prefix-arg)))
    (dired-do-shell-command "code *" nil files)))
```

`c` キーを割り当てました。元の設定は `dired-do-compress-to` で選択したファイルを圧縮できるようですが、使ったことなかったので。

## Terminal > Integrated > AllowChords をオフにする

以下のチェックを外します。これをオフにしないと、Emacs のいくつかのキーがうまく動きませんでした。

<img alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2596/fa995bc2-ec53-c1a6-8efa-9350d45acad3.png">

## Ctrl+TAB で次のターミナルに移る設定を追加

複数のターミナルを開いているときに移動しやすいように Ctrl+TAB をキーボードショートカットに追加しました。これは、おまけです。やらなくても動きます。

:point_right: [June 2021 のリリースで、ターミナルをエディタと同じように開けるようになり](https://code.visualstudio.com/updates/v1_58)、エディタの切り替えと干渉するので、この設定は削除しました。

<img width="476" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2596/343b64eb-73b6-b6ad-200c-9dbe98bfeb9a.png">

## まとめ

今のところ特に問題が起きている様子もなく、非常に快適です。よかったらお試しください。
【お遊びの統計学】試験で偏差値60以上の人数の割合をマルコフの不等式で調べてみる

# 背景
正規分布を仮定すると、偏差値60以上は全体の15.866%となるそうです。では、正規分布に従わない場合はどうでしょう。確率分布の関数形を仮定しないで出来るだけ一般的な結論は得られるでしょうか。
なお。以後$\mu,\sigma$は母平均点数、母標準偏差とします。

# 偏差値の定義
偏差値の定義は

```math
T = \frac{A(X-\mu)}{\sigma} + B,\;A=10,\;B=50
```

です。
# マルコフの不等式
マルコフの不等式は

```math
P(X\geq c) \leq \mu/c
```

で与えられます。ただし$X$は非負の確率変数です。マルコフの不等式は、外れ値の上限、つまり外れ値は多くても***%である、ということをいうことを示せます。

# マルコフの不等式を用いて偏差値６０以上の人数の割合の上限を計算する
偏差値は一般には非負ではありませんが、負の値を取ることは稀ですから、正の値に限定します。これでマルコフの不等式を利用できます。

```math
P(T\geq 60) \leq 50/60 \simeq 83{\%}
```
となります。
多くても83%かー、うーむ。

# 感想
マルコフの不等式は特定の確率分布に限定しない一般的な結論が得られるという点で優れています。が、やはり確率分布がわかっている場合はその情報を使った方がよいですね、当たり前ですが。
[Laravel]シーディングができなかった原因

UserTableSeederとFoldersTableSeederの二つをシーディングしたかったのだがうまくいかない

```php:UserTableSeeder

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
      DB::table("users")->insert([
          "name" => "test",
          'email' => 'dummy@email.com',
          'password' => bcrypt('test1234'),
          'created_at' => Carbon::now(),
          'updated_at' => Carbon::now(),
      ]);   
    }
}
```


```php:FoldersTableSeeder

class FoldersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {

        $user = DB::table("users")->first();    

        $titles = ["プライベート","仕事","旅行"];
            foreach ($titles as $title) {
                DB::table("folders")->insert([
                "title" => $title,
                "user_id" => $user->id,
                "created_at" => Carbon::now(),
                "updated_at" => Carbon::now(),
            ]);
        }
    }
}
```

シーディングしようとするとこのエラーメッセージが出る

```
>php artisan db:seed

In FoldersTableSeeder.php
Trying to get property 'id' of non-object
```

FoldersTableSeederの「存在しないidというプロパティを取得しようとしている」。
「"user_id" => $user->id」の部分「id」が存在しない？

これはそもそもfirstメソッドでuserテーブルから取得したものだった。
もしかしてまだuserテーブルのシーディングができていないためデータがないのでは？

そこでuserテーブルから個別にシーディングすると

```
>php artisan db:seed --class=UsersTableSeeder
Database seeding completed successfully.

>php artisan db:seed --class=FoldersTableSeeder
Database seeding completed successfully.
```
成功。
やはりそういうことだったらしい。
複数のシーディングを同時に行うとテーブル間の関係がある場合うまくいかないことがあるようだ。
勉強記録　5日目 〜#defineより、constを使おう〜 - Effective C++ 第3版 -

#　はじめに

Effective C++ 第3版の2項3ページから勉強していきます。
今回は、「#defineより、constを使おう」についです。

# Effective C++ 第3版 - 2項　#defineより、const, enum, inlineを使おう -

## #defineより、constを使おう

### #defeineの問題点

```cpp
#define　ASPECT_RATIO 1.653
```

のように、定数を#defineを用いて宣言したとします。
そうすると、コンパイラが処理する前の段階で、ソース中のASPECT_RATIOが数値に置き換えられます。
その結果、ASPECT_RATIO は、コンパイラが持つシンボル表に登録されなくなります。
そのため、コンパイル中にエラーが出た場合、エラーメッセージには ASPECT_RATIO ではなく 1.653がでてきてしまう。
また、 ASPECT_RATIO がヘッダファイル内で定義されていると、どこで定義されたか分からなくなり、保守管理に向かない。
加えて、変数名の重複の可能性も上がってしまう。

### #defineの問題点の解決策

 #defineで宣言するマクロよりも、constを用いて定数を宣言しよう。

```cpp
const double AspectRatio = 1.653;
```

このように定義したAspectRatioは、言語で規定された定数となり、コンパイラが持つシンボル表に登録されるようになる。
これによって、どこで定義されている何型の変数かが分かるようになる。

### 疑問点

```cpp
ASPECT_RATIO = 3;
```

上のように、コンパイルエラーが起きるようなコードを書いた際、エラー内容は、

```
error: lvalue required as left operand of assignment
   ASPECT_RATIO = 3;
```

のように警告されました。
注釈に「すべてのコンパイラが同じ振る舞いをするわけではない。」と書かれているため、
ASPECT_RATIO がエラー内容に表示されたのでしょうか。。。

下に#defineとconstを用いて定数を宣言したときのサンプルコードを示します。

### サンプルコード

```cpp:intro_default_constructor4.cpp
#include <iostream>

#define ASPECT_RATIO 1.653
const double AspectRatio = 1.653;

int main(int argc, char* argv[]) {
  std::cout << "2_define.cpp" << std::endl;
  // double a = ASPECT_RATIO * 5;
  // ASPECT_RATIO = 3;
  std::cout << ASPECT_RATIO << std::endl;
  std::cout << AspectRatio << std::endl;
}
```

### 実行結果

![2_define.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367151/678d3015-aa4d-d1d3-b265-57bbb9ffcc22.png)


## 参考文献

・https://www.amazon.co.jp/gp/product/4621066099/ref=dbs_a_def_rwt_hsch_vapi_taft_p1_i0
Node.jsで、ファイルから1行ずつ読み込むためのreadlineモジュール

##注意
この記事は初心者視点でザックリとした説明をしています。正確性に欠ける可能性がございますが、ご了承ください。「明らかに違うよ」ということがありましたら、ご指摘くださると幸いです。


##Node.jsでファイルに1行ずつ書き込みたい。
Node.jsを使う際、.txtファイルや.csvファイルを一行ずつ読み込みたい場合がありました。
そんな時に使えるのが[readline](https://nodejs.org/api/readline.html)モジュールです。Node.jsで標準に備えられています。

##readlineモジュールの使い方
まずは以下のように、ファイルに書きます。

```JS:index.js
'use strict';
//モジュールの読み込み
const fs = require('fs');
const readline = require('readline');

//readstreamを作成
const rs = fs.createReadStream('./input.csv');
//writestreamを作成
const ws = fs.createWriteStream('./output.csv');

//インターフェースの設定
const rl = readline.createInterface({
//読み込みたいストリームの設定
  input: rs,
//書き出したいストリームの設定
  output: ws
});

//1行ずつ読み込む設定
rl.on('line', (lineString) => {
  //wsに一行ずつ書き込む
  ws.write(lineString + '\n');
});
rl.on('close', () => {
  console.log("END!");
});
```
####ストリームの作成
readlineを利用するときは、単独では使えずストリームと組み合わせて使わなければいけません。そのため、以下のように読み込みストリームと書き込みストリームを作成しています。

```JS
//readstreamを作成
const rs = fs.createReadStream('./input.csv');
//writestreamを作成
const ws = fs.createWriteStream('./output.csv');
```

####インターフェースの設定
以下の部分では、readlineでどのストリームを読み込むのか、どのストリームに書き出すのかの設定をしています。

```JS
//インターフェースの設定
const rl = readline.createInterface({
//読み込みたいストリームの設定
  input: rs,
//書き出したいストリームの設定
  output: ws
});
```

####1行ずつ読み込んでいく設定
最後に1行ずつ読み込んでいく設定です。
'line'イベントが起きたら(1行読み込まれたら)、その行がlineStringに代入されます、そしてws（書き込みストリーム）に書き込まれていきます。
そのままだと、ws（書き込みストリーム）に設定したファイルの最初の行に、読み込んだすべての行が書き込まれてしまうので、以下のように改行"\n"をつけています。

```JS
//1行ずつ読み込む設定
rl.on('line', (lineString) => {
  //wsに一行ずつ書き込む
  ws.write(lineString + '\n');
});
```

##実行してみる

例えば、以下のファイルを1行ずつ読み込みたいとします。

```csv:input.csv
ほげ
ほげほげ
ほげほげほげ
ほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげほげ
ほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげ
```
以下のようにJSファイルを実行します。

```console:console
$ node index.js
> END!
```

すると、書き込みたいファイルに以下のように、一字一句違わずに書き込まれているはずです。

```csv:output.csv
ほげ
ほげほげ
ほげほげほげ
ほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげほげ
ほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげ
```
Ruby技術者認定試験対策 | 破壊的メソッド一覧（!がつくメソッドのみ）

```ruby
Class.instance_methods(false).grep(/.*!/)
```
これを各クラスに行いビックリマークがつく破壊的メソッドを全て取得して、以下に一覧としてまとめておきます。
それぞれのメソッドにリファレンスのリンクを付与しています。
（非公式ですがAmiWikiのほうが自分はわかりやすいと思ったのでAmiWikiをチョイスしています。AmiWikiにないものは、るりまサーチにしています。）

## Array
```ruby
=> [:reverse!, :rotate!, :sort!, :sort_by!, :collect!, :map!, :select!, :reject!, :slice!, :uniq!, :compact!, :flatten!, :shuffle!]
```

* [reverse!](https://ref.xaio.jp/ruby/classes/array/reverse)
* [rotate!](https://ref.xaio.jp/ruby/classes/array/rotate)
* [sort!](https://ref.xaio.jp/ruby/classes/array/sort)
* [sort_by!](https://ref.xaio.jp/ruby/classes/array/sort_by_bang)
* [collect!](https://ref.xaio.jp/ruby/classes/array/collect)
* [map!](https://ref.xaio.jp/ruby/classes/array/map)
* [select!](https://ref.xaio.jp/ruby/classes/array/select_bang)
* [reject!](https://ref.xaio.jp/ruby/classes/array/reject_bang)
* [slice!](https://ref.xaio.jp/ruby/classes/array/slice_bang)
* [uniq!](https://ref.xaio.jp/ruby/classes/array/uniq)
* [compact!](https://ref.xaio.jp/ruby/classes/array/compact)
* [flatten!](https://ref.xaio.jp/ruby/classes/array/flatten)
* [shuffle!](https://ref.xaio.jp/ruby/classes/array/shuffle)

## Hash
```ruby
=> [:select!, :reject!, :merge!]
```
* [select!](https://ref.xaio.jp/ruby/classes/hash/select_bang)
* [reject!](https://ref.xaio.jp/ruby/classes/hash/reject_bang)
* [merge!](https://ref.xaio.jp/ruby/classes/hash/merge)

## String
```ruby
=> [:succ!, :next!, :scrub!, :upcase!, :downcase!, :capitalize!, :swapcase!, :reverse!, :sub!, :gsub!, :chop!, :chomp!, :strip!, :lstrip!, :rstrip!, :tr!, :tr_s!, :delete!, :squeeze!, :slice!, :encode!]
```
* [succ!](https://ref.xaio.jp/ruby/classes/string/succ)
* [next!](https://ref.xaio.jp/ruby/classes/string/next)
* [scrub!](https://docs.ruby-lang.org/ja/search/query:scrub%21/#entry-0)
* [upcase!](https://ref.xaio.jp/ruby/classes/string/upcase)
* [downcase!](https://ref.xaio.jp/ruby/classes/string/upcase)
* [capitalize!](https://ref.xaio.jp/ruby/classes/string/capitalize)
* [swapcase!](https://ref.xaio.jp/ruby/classes/string/swapcase)
* [reverse!](https://ref.xaio.jp/ruby/classes/string/reverse)
* [sub!](https://ref.xaio.jp/ruby/classes/string/sub)
* [gsub!](https://ref.xaio.jp/ruby/classes/string/gsub)
* [chop!](https://ref.xaio.jp/ruby/classes/string/chop)
* [chomp!](https://ref.xaio.jp/ruby/classes/string/chomp)
* [strip!](https://ref.xaio.jp/ruby/classes/string/strip)
* [lstrip!](https://ref.xaio.jp/ruby/classes/string/lstrip)
* [rstrip!](https://ref.xaio.jp/ruby/classes/string/rstrip)
* [tr!](https://ref.xaio.jp/ruby/classes/string/tr)
* [tr_s!](https://ref.xaio.jp/ruby/classes/string/tr_s)
* [delete!](https://ref.xaio.jp/ruby/classes/string/delete)
* [squeeze!](https://ref.xaio.jp/ruby/classes/string/squeeze)
* [encode!](https://ref.xaio.jp/ruby/classes/string/encode)
Rubyの数値について少し詳しく備忘録

### 10進数以外の整数リテラル

2進数の場合は0b、8進数の場合は0xを先頭につけると、それぞれ10進数以外の整数値を作成することができる！

```ruby:10進数以外の整数リテラル
# 2進数
0b11111111 #-> 255

# 8進数
0377 #->255

# 16進数
0xff #->255
```

### 数値クラス
Ruby2.3までの整数は、Bignum、Fixnumクラスに別れていましたが、Ruby2.4以降は全てIntegerクラスにまとめられた！

この他にも有理数を表すRationalクラスや、複素数を表すComplexクラスがある。

```ruby:有理数と複素数

# 有理数
r = 2 / 3r
r        #->(2/3)
r.class  #->Rational

# 複素数
c = 0.3 - 0.5i
c       #->(0.3-0.5i)
c.class #->Complex
```

小数クラスのFloatクラスも含め、数値クラスは全てNumericクラスのサブクラス！

<img width="682" alt="スクリーンショット 2019-11-28 22.38.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/337593/8fd8bc0a-34a9-17c5-5d33-1c8ef9ac21e1.png">

あたいの種類によってクラスが異なるので、メソッドの使い方をAPIドキュメントで調べたりする場合は、適切なクラスのAPIドキュメントを参照するように注意！

### 参考文献
[プロを目指す人のためのRuby入門](https://gihyo.jp/book/2017/978-4-7741-9397-7)
OSとアプリケーション、DB とSQL

#OSとは
OSとは、Operating　Systemの略で、キーボードやマウスなどのデバイスによって入力されたものをアプリケーションに伝える。またソフトウェアとハードウェアの連携を司る人間の脳のような役割を担っている。
#アプリケーションとは
アプリケーションとはOS上で動作するプログラムのうちの一つ。
#DBとSQL
DBとは検索、保存を簡単にできるようにしたコンピューターの仕組みのことで、よく見るものとしては電話帳がある。このDBからデータを追加、取得、更新、消去するときにデータベースに指示するためにだす言葉をSQLという。
DB上で情報を扱う上で最低限必要な機能の頭文字をとってCRUDというのもがある。
javascript　基本その1 概要と基本呼出

今日は忘れてきた、javascriptについて書きます。

# JavaScriptとは
ウェブサイトで操作をして表示を変化させたい時に使用する言語です。

例1、ある箇所にマウスを乗せると、プルダウンが展開
　　(カテゴリにカーソルを載せたらカテゴリ一覧が出てくる)

例2,facebookのいいねボタン

といった風に、カーソルやクリック、時間経過で変わる動的な挙動を扱います。

## javaとは違う
Javaという有名なプログラミング言語があります。JavaとJavaScriptは全くの別言語です。

JavaとJavaScriptではメインで使用される分野が異なります。

Javaは業務システムなどのサーバーサイド側で使用されます。
つまり、データの保管や複雑な処理を行う「裏側」がメインです。
Rubyもサーバーサイドに分類されます。

一方、JavaScriptは前述の通り、主にフロントエンド、つまり「見た目」の部分で
活躍することが多いプログラミング言語です。

## ECMA
JavaScriptが開発されてからしばらくは、異なるブラウザで互換性が無いことが問題となっていました。
こでECMAインターナショナルという機関のもとで標準化がなされます。

すなわち、ECMAインターナショナルによって「JavaScriptの書き方」が決められました。
これをECMAScriptと呼びます。現在はJavaScriptというとECMAScriptで書かれることが一般的です。

# JavaScript基本文法

## HTML内の場合

scriptタグによってjavascriptを適用させてことができます。

```html
<body>
    <script>
        // この中にJavaScriptのコードを記述する
    </script>
</body>
```

またjsファイル(javascript用のファイル)を読み込む場合は下記のように記述します。


```html:html
<body>
    <script src="script.js"></script>　<!--これで同じフォルダ内のscript.jsが読み込まれます。-->
</body>
```

# 基本コード

## window.alert() 
ブラウザでアラートを表示させるメソッドです。

引数としてアラートに表示させる情報を渡します。
文字列を直接引数にしましたが、変数でも可能です。

```js:script.js
window.alert('こんにちは');
```

## console.log()
ブラウザのコンソールにテキストを表示させるメソッドです。

引数としてコンソールに表示させる情報を渡します。
window.alertと同様に変数を引数に渡すこともできます。

Rubyにおけるputsメソッドと同様に使えます。

```js:script.js
console.log('こんばんは');
```

## 変数の宣言
変数を宣言する際は、varのあとに半角スペースを挟んで変数名を記述します。

```js:script.js
var name = 'yamada'; //varで変数宣言します。
console.log(name + 'さん、こんばんは');
```

### ES2015(ES6)バージョン以降の変数宣言の書き方

varはES2015(ES6)バージョン以前の古い書き方でもあります。

ES2015(ES6)バージョン以降は、letとconstを使います。

```js:script.js
let name = 'yamada'; // letは、後で書き換えることができる変数宣言です。
const name = 'yasuda'; //constは、後で書き換えることができない変数宣言です。
console.log(name + 'さん、こんばんは');
```

letは、後で書き換えることができる変数宣言です。

constは、後で書き換えることができない変数宣言です。
PNG画像の解像度を保持しておいて、設定し直したら予期せぬ値になっていた話

# 環境
Windows 10 Pro
Visual Studio 2017 Professional
Magick.NET-Q16-AnyCPU v7.14

# 事象
1. PNG画像を読み込んで、オリジナルの解像度を取得しておく
2. 途中、色々な処理をする（別拡張子で保存したりとかもする）
3. 最後に、手順1で取得したオリジナルの解像度をppiで設定する　→　あら不思議、おかしな値が入ってるじゃないの

# 結論
事象を読んで気づいた方もいらっしゃるかと思いますが、問題があったのはここ。

1. PNG画像を読み込んで、オリジナルの解像度を取得しておく

ここを、以下のようにすればいい。

1. PNG画像を読み込んで、***単位をppiにしてから***オリジナルの解像度を取得しておく

# なぜこのようなことが？
私も今回調べて初めて知りましたが、PNGはピクセルの物理サイズは持っていますが、その単位がppiではないようです。
なので、物理的なピクセルサイズをinch（2.54）で割ってあげれば、一応ppiは出せます。が、端数は出る。

この辺りのことは、私もさらっとしか調べていませんが、興味のある方は「PNG pHYs」みたいなキーワードとかで調べてみてください。
（そして、この記事の内容が間違っていたら教えてください…）


# 再現コード（抜粋）

## 意図せぬ値が設定されていたコード

```cs
string inPath = ""; // 入力画像のパス
string outPath = ""; // 最終出力画像のパス

double densityX;
using(MagickImage img = new MagickImage(inPath))
{
    // オリジナルのdensityを取得
    densityX = img.Density.X;
}

/* 色々処理 */

string tempPath = ""; // 色々処理した結果の一時ファイルのパス

using(MagickImage img = new MagickImg(tempPath)
{
    // 解像度を設定
    img.Density = new Density(densityX, DensityUnit.PixelsPerInch);

    // 保存
    img.Write(outPath);
}

```

## 修正後

```cs
string inPath = ""; // 入力画像のパス
string outPath = ""; // 最終出力画像のパス

double densityX;
using(MagickImage img = new MagickImage(inPath))
{
    // 単位をPixelsPerInchに替えてからdensityを取得
    Density density = mImg.Density.ChangeUnits(DensityUnit.PixelsPerInch);
    densityX = density.X;
}

/* 色々処理 */

string tempPath = ""; // 色々処理した結果の一時ファイルのパス

using(MagickImage img = new MagickImg(tempPath)
{
    // 解像度を設定
    img.Density = new Density(densityX, DensityUnit.PixelsPerInch);

    // 保存
    img.Write(outPath);
}

```
C#のImageMagickでカラーモードがRGBの画像を保存しなおしたらグレーになった

# 環境
Windows 10 Pro
Visual Studio 2017 Professional
Magick.NET-Q16-AnyCPU v7.14

# 事象再現

パッと見にはグレースケールの画像なんだけど、Photoshop等で確認するとRGBになっている画像がありました。
※本来の画像の一部をQiitaの記事用に切り抜いて使っています。元データには模様がついています。

![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33347/ebfbdbf0-0228-eeca-1438-0e689f737f56.png)

この画像をC#のMagick.Netを使ってリサイズした画像がこちらです。

![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33347/e88f62aa-ee1f-16ab-30ff-98faec4d936e.png)

**いや、グレースケールになっとるやないかい。**

もちろんすべての画像で起こるわけではないです。
RGBそれぞれの値が全画素で一致している場合に勝手に変換してくれている印象です。
パッと見グレースケールでも、各ピクセルのどこか1つでもRGB値に差異があればRGB保持のままだと思います。

変換部分のコードは以下になります。

```cs
string outPath = @"C:\temp"; // 出力先フォルダ
string filepath = @"C:\temp\test.tiff"; // 入力画像
int toHeight = 50; // 拡大後の高さ

string filename = Path.GetFileNameWithoutExtension(filepath);
string ext = Path.GetExtension(path);

using (var img = new ImageMagick.MagickImage(path))
{
    int wid = img.Width;
    int hei = img.Height;

    double scale = ((double)toHeight / hei);
    double newWid = scale * wid;

    // フィルター指定
    img.FilterType = ImageMagick.FilterType.Lanczos;

    // リサイズ実行
    img.Resize((int)Math.Ceiling(newWid), toHeight);

    // 保存
    img.Write(Path.Combine(outPath, $"{filename}_out{ext}"));
}
```

# 解決方法

## `PreserveColorType();`を使う
「Preserve＝保持する」とかそういう意味だと思ったので、使ってみたらいけました。

## `SetAttribute("colorspace:auto-grayscale", "false");`を使う
どこかで見た記事だと、`PreserveColorType()`の中でも同じことをやっているそうな。
colorspace:auto-grayscaleについては、ImageMagickの[コマンドラインオプション](https://imagemagick.org/script/command-line-options.php)にも説明が載っています。

## `ColorType = ImageMagick.ColorType.TrueColor;`を使う（tiff画像の場合）
[コマンドラインオプション](https://imagemagick.org/script/command-line-options.php)の説明を読むと、以下のような記述があったので、試したらいけました。

> PNG and TIF do not need this define. With PNG, just use PNG24:image. With TIF, just use -type truecolor.
ESP32で ILI9341 TFT液晶を動かす 

赤い基板の 320x240 dot の TFT 液晶モジュール。
![IMG_20200925_181151303 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ee220033-ddc3-91cb-8b4f-cc32db902e9f.jpeg)
写真は 2.2インチと 2.8インチのもの。とても良く似ている。これを含め、2.2インチ、2.4インチ、2.8インチ、3.2インチのバリエーションがある。
http://www.lcdwiki.com/Main_Page#SPI_Display

4つとも ILI9341 がコントローラ。 Adafruit ILI9341 ライブラリで動かしてみた。


# 環境
- Ubuntu18.04
- Arduino 1.8.10
- ESP32



# ライブラリインストール
「ツール」-「ライブラリを管理...」でライブラリマネージャを呼び出し、「Adafruit ILI9341」を検索してインストール


# サンプルプログラム
「ファイル」-「スケッチ例」-「カスタムライブラリのスケッチ例」-「Adafruit ILI9341」-「graphicstest」
を呼び出す

# 接続

| ILI9341   | ESP32  |
| --------- | ------ |
| VCC       | 3.3V   |
| GND       | GND    |
| CS        | GPIO5  |
| RESET     | 16     |
| D/C       | 17     |
| SD(MOSI)  | 23     |
| SCK       | 18     |
| LED       | 3V3    |
| SDO(MISO) | 19     |
| T_CLK     | (N.C.) |
| T_CS      | (N.C.) |
| T_DIN     | (N.C.) |
| T_OUT     | (N.C.) |
| T_IRQ     | (N.C.) |

# 設定

- D/C 17
- SD(MOSI) 23
- RESET 16


以下の箇所を探して

```

// For the Adafruit shield, these are the default.
#define TFT_DC 9
#define TFT_CS 10

// Use hardware SPI (on Uno, #13, #12, #11) and the above for CS/DC
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);
```
以下のように書き換える。

```
// For the Adafruit shield, these are the default.
#define TFT_RST 16
#define TFT_DC 17
#define TFT_CS 5

// Use hardware SPI (on Uno, #13, #12, #11) and the above for CS/DC
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC,TFT_RST);
```

これで動いた。

(2021/01/30 追記)

バックライトLCDのON/OFFをコントロールする場合はLEDピンをGPIOに接続する。例えばGPIO4に接続したときは

```

#define TFT_BACKLIGHT_PIN 4
```

としておいて、適宜

```

  pinMode(TFT_BACKLIGHT_PIN,OUTPUT);
  digitalWrite(TFT_BACKLIGHT_PIN,HIGH);

```

とする。

# ピン解説

ILI9341は動作モードが沢山あるが、
4-wire 8-bit data serial interface Ⅱ 
を使っているのかな?

cf., a-Si TFT LCD Single Chip Driver
240RGBx320 Resolution and 262K color ILI9341
Page 24 of 239
6. Block Function Description
MCU System Interface


その場合、使用信号線は SCL,SDI,D/CX,SDO, CSX の5つとなる。更にLCDのPowerOn時にRESET信号が必要なので、6線になりますね。

| ILI9341   |  |
| --------- | ------ |
| VCC       | 3.3V   |
| GND       | GND    |
| CS        | (CSX) Cable Select |
| RESET     | リセット信号送出用    |
| D/C       | (D/CX) データ・コマンドコントロール用     |
| SD(MOSI)  | (ILI9341側から見てSDI) SPI MOSI     |
| SCK       | (SCL) SPIクロック     |
| LED       | バックライトON/OFF信号 モジュール内部でスイッチ用トランジスタにつながっているのでこれがLED電源というわけではない   |
| SDO(MISO) | (ILI9341側から見てSDO) SPI MISO LCDデータリード用(使用しない)     |
javascriptのonclickとaddEventlistnerの違い

###まずonclickとaddEventlistnerを書いてみる！！


(js)のonclick
========

```html
<p id ="click">btn</p>


<script>
document.getElementById("click").onclick=function(){
    console.log("clicked");
}

</script>
```

これでconsole.log();でうまく表示させることができました。

しかし、下記のように書いてみると,,,,,,,,


```html
<p id ="click">btn</p>


<script>
document.getElementById("click").onclick=function(){
    console.log("clicked");
}

document.getElementById("click").onclick=function(){
    console.log("two-clicked");
}

</script>
```

だと、
console.log("clicked");の方は表示されなくて下記の方のconsole.log("two-clicked");の方は表示されました。
つまりどういうことかと言いますと、『上書きされた』と言うことになります。

では、次にaddEventlistnerの方を見ていきましょう！！

変数名.addEventListener("click",function(){};
=====

```html
<p id ="click">btn</p>

<script>
let on = document.getElementById("click");
on.addEventListener("click",function(){
    console.log("cliked");
})

</script>


```

このように書くと、console.log("cliked");が表示されるようになります。

これも次のように書いていくと、、、


```html
<p id ="click">btn</p>

<script>
let on = document.getElementById("click");
on.addEventListener("click",function(){
    console.log("cliked");
})

on.addEventListener("click",function(){
    console.log("two-clicked");
})


</script>



```

このように書くと、 console.log("cliked");　と　console.log("two-clicked");の両方が、
表示されるようになります。


まとめ
======

onclickは上書きされる

変数名.addEventListener("click",function(){};　は、上書きされずに反映される。

なので、onclickとaddEventlistnerの使い分けは状況によって使い分けた方が良さそうですね！！！
アクティブなタブを切り替える度にそのタイトルを取得しGoogleスプレッドシートに書き込むfirefoxアドオンを作った話

#概要と、うだうだした話
サークルで一時流行したSlackBot開発も下火になる中、未だに密かにBotに機能を追加しようと開発を続けている者がいた……
この前サークルでの「SlackBot開発によって得られた知見共有会」にて「大学生はプライベートをネタにしてなんぼ」とか息巻いて今後の展望として「今何見てる機能（他の人からメンションを受けると現在見ているサイトをSlackに晒す）」とかを実装すると言いましたそれを実装した際に作った「アクティブなタブを切り替える度にそのURLを取得するfirefoxアドオン」について書きたいと思います。
　そもそも、firefoxのアドオンの作り方について解説してくれてる日本語のサイトが少ないんですよね。Chromeの拡張機能の作り方サイトはかなり充実しているのにfirefoxアドオンでググっても出てくるのは「firefoxアドオン使えなくなる」とかばっかり。firefoxユーザーってそんな少ない訳でも無いでしょうに。というわけでアドオンを作成したい人が参考に出来るようにかなり丁寧に説明しようと思います。

#実装の概説
まずGASでGETを受けたら受け取った内容をスプレッドシートに書き込むスクリプトを作る。
firefoxアドオン側でfirefoxのアクティブなタブが切り替わる度にアクティブなタグの名前を取得しスクリプトに向けてGETを飛ばす。

#必要なファイル群
今回は閲覧しているページとかを見て何かする訳では無いのでcontent_scriptsは必要ではなくmain.jsとmanifest.jsonにアイコンファイルだけです。この辺はChrome拡張と似てますね。

```javascript:mainjs
function getCurrentWindowTabs() {
  return browser.tabs.query({currentWindow: true, active: true});
}
function handleCreated(tab) {
  getCurrentWindowTabs().then(tabs => {str=tabs[0].title});
  var url; // リクエスト先URL
  url=url + "?name="+str
  var request = new XMLHttpRequest();
  request.open( "GET", url, true );
  request.send(null);
  request.onreadystatechange = function () {
    if(request.readyState == 4){
          if(request.status == 200){
             console.log(str+'を見てます。');
          }
        }
};
}
browser.tabs.onActivated.addListener(handleCreated);
```

```json:manifest.json
{
  "manifest_version": 2,
  "name": "Tab URL",
  "version": "1.0",
  "description": "Tab watcher",
  "icons": {
    "48": "icon.png"
  },
  "background": {
    "scripts": ["main.js"]
  },
"permissions": [
"tabs"]
  
}
```

main.jsについて、
アクティブなタブを取得する方法が分からなかったのですが[こちらのサイト (hawksnowlog: 現在開いているタブの URL を取得する方法) ](https://hawksnowlog.blogspot.com/2018/09/fetch-url-of-active-tab.html) に書いてあったのを参考にしました。要するにbrowser.tabs.queryでタブを取得するとアクティブなタグが配列の一番初めに格納されるらしい。.titleにすることでこのタブのサイトのタイトルを取得出来ます。
tabs.onActivatedがウィンドウ内でアクティブなタブが変わったときに発火するイベントですのでここにリスナーを追加します。

#GASの用意
まず新規のGoogleスプレッドシートを作成し「ツール」から「スクリプトエディタ」を開きます。そこに以下のコードをコピペ

```javascript
function doGet(e) {
  var ss       = SpreadsheetApp.getActiveSpreadsheet();
  var sheet    = ss.getSheetByName('シート1');
  var name=e.parameter.name
  sheet.getRange(1, 1).setValue(name);
  return ContentService.createTextOutput("OK");
}
```

これでGETを受けた時nameの値をA1のセルに書き込みます。
これで「公開」から「ウェブアプリケーションとして公開」、「Execute the app as:」にはMeを「Who has access to the app:」にはAnyone, even anonymousを選択でデプロイするとURLが発行されるのでこのURLをさっきのmain.jsのリクエスト先URLに代入しておきましょう。

#アドオンを発行する方法
さてこのアドオンを自分の環境に読み込ませおきたい時about:debuggingでもいいんですがこれだと一時的な読み込みしかできません。firefoxはchromeと違ってパッケージ化して署名をもらわなければいけません。

まず、manifest.jsonとmain.jsにicon.pngを一つのzipに突っ込みます。
zipの拡張子をxpiに書き換えます。
[https://addons.mozilla.org/ja/developers/](https://addons.mozilla.org/ja/developers/)ここから開発者登録を行い、xpiファイルをアップロードします。
配布手段で「自分自身」の方を選択したら審査なしに即座に使えるようになります。

#結果
やってみたら分かると思うんですけどこれ実行すると今見てるタグというよりタグを切り替える前に見ていた一つ前のタグが送信されているみたいなんですよね。多分イベントが発火するのが早いのが原因だと思うのでhandleCreatedに少しだけ待機する処理をかませるといいかもしれませんね。
またタブの切り替えだけでなくページが切り替わった時も取得したい時はtabs.onUpdatedにもリスナーを追加すればいいのでしょうかね。
git push でリジェクトされた時の対処法

#はじめに
`github`を利用してプログラミング開発を実施されている方、および`github`を使ってからあまり日がたっていない方が対象になるかと思います。

#Githubのバージョン
```
$ git --version
git version 2.17.2
```

#エラーの内容
`git push`コマンドを使って`master`ブランチに修正したソースを`push`しようとした際に以下のようなエラーが出ました。

```
//git pushコマンド
$ git push origin master

//エラー内容
 ! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://github.com/・・・・'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.`
```

#対象方法
色々と調べてみるとたくさん出てきましたが、一番心あたりがあるのが、
「リモートリポジトリ側の変更がローカルに反映されていない」ということが書かれていた
以下のサイトでした。

[対象のリンク](https://wonderful-tereshkova-38f91d.netlify.com/GitHubへのpushが「fetch%20first」と表示されてrejectedとなったときの対処/)

以下のコマンドを実施したら上手く行きました。

```
$ git fetch
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.
From https://github.com/・・・
   c35643a..4d9b4f1  master     -> origin/master

$ git merge origin/master
Updating c35643a..4d9b4f1
Fast-forward
 index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

$ git push -u origin master
Branch 'master' set up to track remote branch 'master' from 'origin'.
Everything up-to-date
```

`cat`コマンドで修正した内容がちゃんと反映されているか確認しましたが、問題なくファイルが更新されておりました。
NFC と iOS13 でホームオートメーション

iOS13 から、NFCタグをつかってホームオートメーションを設定できるようになりました。

# やったこと
NFCタグに iPhone を当てたら、電気がつく or 電気が消えるようにしました。

# 参考記事
[iPhoneをかざすだけでオートメーション発動 NFCタグとショートカットで作業効率が爆上がり](https://reliphone.jp/nfc-automation/)

# 必要なもの
- iOS13 がインストールされた、iPhone
-- iPhone 11, XS, XR
- NFCタグ
 - たとえば https://a.r10.to/hb788L
- 壁にNFCタグを貼るなら養生テープ
 - たとえば https://a.r10.to/hzb54n
  - 壁の色にあわせよう
  - 壁の配線隠すのにもいいよ
- ショートカットから操作できるもの
 - 電球とか [philips hue](https://a.r10.to/hbnqL3)
 - 家電を操作できる赤外線リモコンとか [Nature remo](https://a.r10.to/hyD4bo)

# 手順
1. iPhone でショートカットアプリを開く
2. オートメーションタブをタップ
3. 右上の「＋」アイコンをタップ
4. 「個人用オートメーションを作成」をタップ
5. 「NFC」 をタップ
6. 「NFCタグ スキャン」をタップ
7. デバイスを、設定したいNFCタグにかざす
8. タグに名前を付ける
9. 「次へ」をタップ
10. 「アクションを追加」
11. 操作したいものを設定。複数可。
12. 「次へ」をタップ
13. 「実行の前に尋ねる」はオフにする
14. 「完了」

あとは、NFCタグに iPhone をかざすとアクションが実行されるようになりますよ！

# 応用
アクションのところは、いろいろ応用可能です。
うちは照明やエアコンを操作したり
玄関のオートロック（オープンセサミ）を操作したりしてます。

# あとがき
楽しい体験をできたので、記録を残すことにしました。
はじめて Qiita の記事を書きました。