OmniAICreator/Qiita-1.07M huggingface dataset:
Google AdMobで自社広告のみを表示する

# 概要
本記事では、Google AdMobを利用して自社広告のみを表示する際に注意すべきポイントと各種設定を紹介します。

# 実装
AdMobを実装するにあたっての手順などは割愛します。
公式ドキュメントの通りに実装するだけで問題ありません。

# GoogleAdMobの広告設定
### キャンペーン設定
キャンペーン作成時にキャンペーンタイプを[自社広告]、目標タイプを[表示回数の割合]にする。
その後の[キャンペーンの目標表示回数の割合]で、100%に設定する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165931/961a8141-eeeb-b6ef-bc9f-94dc0ef16703.png" width="500">


### 広告ユニットの設定
特殊な設定は必要なし。
eCPM Fllorも無効のままで大丈夫。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165931/dea10c6e-4054-5437-f10c-cf17dba7df94.png" width="400">

### メディエーション
特殊な設定は必要なし。
初期状態のままでも大丈夫。

### ブロックのコントロール
特殊な設定は必要なし。

### アプリの設定
特殊な設定は必要なし。
FirebaseAdMobなどのライブラリを利用する場合でもリンクなしで大丈夫。

# その他必要な設定/作業
- GoogleAdMobのお支払い情報の登録
- ポリシーセンターの確認
- Google広告のお支払い情報の登録(参考： https://support.google.com/admob/answer/6231370?hl=ja# )

# 注意事項
各設定実施から実際の挙動として反映されるまで結構タイムラグがあるので注意。
また、テストデバイス追加などによるテスト広告状態での動作確認と、本番状態(テスト設定なし状態)の動作確認でハマりどころが少し違うので注意。
（支払い情報登録がまだの場合、テスト広告表示状態では期待通り自社広告のみが表示されるが、テスト広告設定を外すと一般広告が表示される）

# 補足
あまりまとまった情報がなかったので、参考として必要な設定などを書き出してみました。
特に、GoogleAdMobとGoogle広告のお支払い情報登録に関しては、ドキュメントにも特記して記載がされていないので、
うまく目的の広告が表示されない場合には真っ先に確認してみてください。
簡易progate(html)

#はじめに
HTML/CSSを書くときは、`一度コードを書いて後ブラウザで実行する`という作業が必要です。
一連の流れについて、ウインドウを切り替えるのが煩わしい、という人もいるでしょう。
これを解消してみたいと思いました。

Progateをはじめとしたプログラム学習サイトでは、
コードを入力してボタンを押すと、プログラムが実行されます。
これを再現してみれば、一連の煩わしさが解消されると考えました。

本記事では、Ruby on railsを使用して、
HTMLのコードを書いてスイッチを押すと、その同じ画面にそのコードを元にしたビューが現れるプログラムのコードを紹介します。
非常にシンプルで、１００％当初の目標を実現できているわけではありませんが、
このコードを改良すれば目標達成できるものと思っています。

 別ブログにて、書き直したものを公開中です。
[https://airesaies.com/2020/09/04/program006/]
(https://airesaies.com/2020/09/04/program006/)

#実行

HTMLは次のように書きます。（Ruby on railsを使用しているので、hamlで書いています。）

```haml
.header 左にhtmlコードを入力してボタンを押せば、右にその結果が表示されるぞ
.body
  .body__left
    .body__left__form
      = text_area "object_name",{class: "html"},{id: "html"}
      .btn 追加する
  .body__right
    .body__right__window
      .body__right__window__html
```

左のフォームで入力して、右側に表示させるため、
`body`の中に`left`と`right`のクラスを作成します。


cssは下記の通りです。
ここは好みになりますが、`body`に`display: flex:`を入れて、
`left`と`right`が横並びになるようにします。

```css
.header{
  height: 20vh;
  background-color: yellow;
  font-size: 32px;
  color: blue;
}


.body{
  display: flex;
  height: 60vh;
  &__left{
    height: 100%;
    width: 50%;
    background-color: red;
    &__form{
      #html{
        height: 40vh;
        width: 30vw;
        margin: 10vh 10vw;
      }
      #css{
        height: 20vh;
        width: 30vw;
        margin: 5vh 10vw;
      }
    }
  }
  &__right{
    height: 100%;
    width: 50%;
    background-color: blue;
    &__window{
      &__html{
        background-color: white;
        height: 40vh;
        width: 30vw;
        margin: 10vh 10vw;
      }
    }
  }
}
```

最後にJavaScriptです。
ここでは、`ボタンをクリックすると、フォームに入力していたコード通りのビューを表示させる`ようにします。

```javascript

$(function(){
    $(".btn").on("click",function(){
      let html = $(".html").val();
      $(".body__right__window__html").append(html);
    })
});
```

この処理は大きく３つに分けられます。

1.ボタンをクリックしてイベントを発火させる
2.フォームに入力してあるテキストを取得する
3.取得したテキストの通り、htmのビューを作成する


1.の部分は`$(".btn").on("click",function()`で行ってます。
`btn`クラスを`click`すると発火する、という意味になります。

2.の部分は`let html = $("#html").val();`で行ってます。
`html`クラスの部分に入力してあるテキストを`val()`を使って変数`html`に代入しています。

3.の部分は`$(".body__right__window__html").append(html);`で行ってます。
`body__right__window__html`クラスに、`append`メソッドを使って、先ほどの`html`をコードとして挿入し、非同期でビューが変わるようになっています。
【Twitter】ついすぽが新UIに対応して喜んだ話

# ついすぽとは？
ついすぽ、というのは画面に表示したTwitterのデータをCSVに落としてくれるchromeの拡張機能です。

* API使わなくてもツイートが引き抜ける！
* 日付指定で検索すれば過去のツイートも参照可能！
* ただしデータの中に広告ツイートは入る！　（ので自前でクレンジングする必要アリ）

といった特徴があり、旧UIのときはよくお世話になりました。
しかし新UIに移行とともに使用不可能に…
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【悲報】<br><br>「ついすぽ」はTwitterの新UIだと使えません。どうすることもできませんでした、すみません。</p>&mdash; あほのみ‹🕘› (@afonomics) <a href="https://twitter.com/afonomics/status/1151499625624326144?ref_src=twsrc%5Etfw">July 17, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

　
が、最近なにやら拡張機能が無効になったとか通知がビコンビコンきます。
気になってで検索したところ……
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">／<br>📢 ついすぽ 新UIに対応しました！<br>＼<br><br>ツイートをデータ化する方はぜひ使ってみてください。さらに、本バージョンからはユーザーの情報も取得します。<br><br>■ダウンロード<a href="https://t.co/WwGogswqAU">https://t.co/WwGogswqAU</a><br><br>■使い方はこちら<a href="https://t.co/iPnkDG0doO">https://t.co/iPnkDG0doO</a><br><br>なにかあればリプライください(._.)</p>&mdash; あほのみ‹🕘› (@afonomics) <a href="https://twitter.com/afonomics/status/1298862812739940353?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ありがとうございます！！
これで無料は頭おかしい（誉め言葉）ので、差し入れをしたいところです。

それはそうとして新UI嫌すぎてツイ禁してたので、またあの画面を見るのかあと重い気持ちにも……。




# 使い方が変わったようです

基本的な動作は同じですが、DLボタンの位置が変わったようです。
もちろん説明ページもあるのですが、一応メモしておきます。

1.ついすぽをchromeWebストアから追加します
2.**Twitter以外のサイトで**F12を押して開発者ツールを開きます
　（……とは書いていますがF12押した後にリロードすれば動作は可能なようです）
3.一番右にある「ついすぽ-Twitter Export-」を開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412138/ad607453-a700-5de7-7430-5665a1f6cf51.png)

4.Twitterに移動して、ツイートデータが欲しいページの末尾までスクロール（Ctrl+End）します
5.DOWNDOADボタンを押してCSVを保存します


旧UIの時はTwitterにDLボタンが埋め込みだったのが、開発者ツールのタブに移動？　した感じです。
現在読み込んだツイート数までカウントしてくれて良きですね。
これからもよろしくお願いします！
空間情報可視化webアプリケーションを作った話

# はじめに
名古屋の大学でコンピュータサイエンスを専攻しているdaishin([@kawara_13](https://twitter.com/kawara_13))というものです。
今年の4月ごろから名古屋のoptimindという会社でインターンとして働いています。
今回、空間情報可視化アプリケーションの作成をしましたので、その過程を簡単にまとめたいと思います。

## Optimindについて
https://www.optimind.tech/
「世界のラストワンマイルを最適化する」をミッションに掲げ、ラストワンマイルの物流ルート最適化を目指す名古屋大学発のスタートアップ企業です。

# プロジェクトについて
## 関連技術
実際に作ったものを紹介する前に、空間情報に関連する技術について紹介します。
まだまだ勉強中ですので、誤った記述などがあればご指摘いただけると幸いです。
### 地理空間情報
空間上の、ある地点やある区域の位置を表す情報や、それに関連する情報のこと。
地図上に情報を付与して提供したり、地図情報の分析などで活用されている。
具体的な活用例を挙げると、カーナビやハザードマップなど。

### GIS（Geographic Information System：地理情報システム）
地理空間情報の管理や加工、可視化などの高度な分析を可能にするための技術である。
空間情報をコンピューター上で地図上に可視化し、情報の関係性や傾向などをわかりやすく示すのが大きな役割である。
参考：https://www.esrij.com/getting-started/

### ウェブタイル・タイルサーバー
地図データをズームレベルと座標に基づいてタイルとして整理したものと、リクエストに応じてタイルを返すサーバー。タイルにはラスタータイルとベクタータイルの2種類ある。

- ラスタータイル
    - タイルを画像としてサーバーに保存しておき、リクエストに応じてその画像を返す
    - 描画速度がはやい
- ベクタータイル
    - サーバーに保存されているベクトルデータを元にリクエストに応じてタイルを作成してその画像を返す
    - ラスタータイルよりも柔軟性がある
    - ラスタータイルと比べると描画速度はやや劣る

## 作ったもの
optimindでは地理空間情報を扱っており、その空間情報を処理する際に結果を可視化して確認する必要があります。
これまでは、クラウド上で処理されたデータをS3などのクラウドストレージサービスを介して、ローカルにダウンロードし、[qgis](https://qgis.org/ja/site/)などのgisアプリケーションで描画していたのですが、このようなやり方では次のような問題点がありました。

- 本来の目的であるデータの処理の試行錯誤のサイクル時間が遅くなる
- 描画結果を共有しづらい
- クラウドのノート環境での描画では、データを全てクライアントサイドにロードする必要があるので、全国の位置データなどを描画するのが困難

そのため、これらの問題を解決するために、処理を終えて書き出されたデータがすぐにアプリケーション上に反映され、ユーザーがそのデータをレイヤーとして地図上に可視化することができるwebアプリケーションを作成しました。

ちなみに作成したアプリケーションは「mappit」と名付けられております。

## アーキテクチャ図
mappitは次のような構成図になっています。

![mappit-arc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78102/aed728df-025e-6dee-af42-7887a192fa53.png)


- mappit client
    - Reactを使用
    - 必要な空間情報をブラウザに描写する
    - 描写に必要なベクタータイルはmappit serverから取得
    - タイルの描写には[deck.gl](https://deck.gl/)を使用
    - azure app serviceにデプロイ
- mappit server
    - Expressを使用
    - ベクタータイルを返すタイルサーバー
    - リクエストに基づいてPostGISから必要なデータを取得しタイルサーバーを作成
    - blob storageに書き出されたCSVファイルをPostGISにうつす
    - ユーザー認証機能つき
    - dockerでコンテナ化し、azure app serviceにデプロイ

![mappit-sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78102/8b171436-1eed-7207-f77b-53c5d3d41433.png)


↑ちなみにアプリケーションはこんな感じです。

serverのデータベースにはPostgreSQLを利用し、空間情報を扱えるようにするため、[PostGIS](https://postgis.net/)を導入しました。
しかし、データの処理に利用しているライブラリーの都合で、GISデータをそのまま書き出すことができなかったため、blob storageに書き出されたcsvファイルから空間情報を読み取ってGISデータに変換し、データベースにアップロードする、というようにしました。
blob storageにデータが書き込まれたらazure functionsがトリガーされ、mappit serverにリクエストを送り、書き込まれたデータがGISデータに変換されてデータベースに書き込まれます。

また、開発にはGithub Actionsを利用し、デプロイを自動化しています。

## 今後の課題
現在はタイルをリクエスト時に生成しているため、反映までに少し時間がかかってしまいます。そのため、キャッシュ機能の強化やラスターデータの導入などを行う必要があると思われます。
また、表示できるレイヤーの種類が少ないため、分析環境を整えるためにも、増やす必要があると考えています。
さらに、直接的な課題ではないですが、将来的にはリアルタイムの交通状況などを反映したり、描画内容を簡単に共有できる機能などを追加できたらいいなと思っています。

# 最後に
mappitの開発を通していろいろなことを学ぶことができました。
自分に足りていないところや、理解が及んでいない部分も見えてきたので、これからのモチベーションにもなりました。
とても良い経験をさせていただいて、optimindさんにはとても感謝しています!
Linux,C言語ファイルパスからファイル名取得関数


ファイルの絶対パスからファイル名取得関数、使う時があるのでメモで記載しておく。

```言語:C言語
#include <stdio.h>
#include <string.h>

#define PROC_OK   (0)
#define PROC_NG   (-1)

int GetFileName( const char *file_path,char *file_name, size_t file_name_size)
{
	char* dir_end=NULL;

	if ((file_path == NULL) || (file_name==NULL))
	{
		return PROC_NG;
	}

	dir_end = strrchr(file_path,'/');
	if (dir_end == NULL)
	{
		return PROC_NG;
	}

	(void)snprintf(file_name,file_name_size,"%s",dir_end+1);

	return PROC_OK;
}
```
[rails]dbの情報を表示する方法

やりたいこと
Itemテーブルの情報を全て抜き出す
ビューファイルindex.html.erbにデーターベースの情報を表示させる

前提
Itemテーブルの内容infoカラムがある！
infoカラムのに保存した内容を表示させたい

#①items_controllerに記述



```
 def index
    @items = Item.all
  end
```
#解説
indexアクションが動いた時
@itemsにItemテーブル全ての情報が入るようにする。


#②index.html.erbファイルに記述


```
<% @items.each do |item| %>
<%= item.info%>
<%end%>
```
#解説
 <% @items.each do |item| %>
@items←Itemテーブル全ての情報が入っている。
そこから中身の情報を全て抜き出してitem(変数)に一つずつ代入していく
 <%= item.info%>
infoカラムに保存した情報
<%= %>
イコールをつけることによって情報を表示させることができる

Itemテーブルの内容
info 
説明１
説明２

index.html.erbのビュー
説明１
説明２
（infoカラムに保存された情報が表示）
Windowsでも蟹さんのmruby

Windows 7だけでもmruby on YABM([rtlbm-mruby](https://qiita.com/yamori813/items/bf3cb113b2b9c121c0b7))の開発ができるかトライしてみました。

VMはLinuxのtoolchainを使わないと作れないので、プリビルドされたVMを使ってスクリプトを実行できるようにします。

mrubyのビルドは[こちら](https://qiita.com/ko2a/items/b29acc616f67738465ea)を参考にしました。

イメージファイル作成用のツールのrtktools/cvimg.cをVCでもコンパイルできるようにしてみました。適当にVSでプロジェクトを作りexeを作ります。なぜかx64でビルドするとエラーになるのでx86でビルドしています。

mrbcでmrbを作ります。

```
D:\rtlbm-mruby>mrbc samples\morse_hsc.rb
```

次にcvimgでイメージにします。

```
D:\rtlbm-mruby>cvimg root samples\morse_hsc.mrb samples\morse_hsc.img 0x180000 0x180000
```

イメージが出来上がったので、蟹さんをリセットを押しながら電源を入れてtftpを受け付ける状態にします。auの蟹さんの場合、赤いLEDが点灯します。

Windwos 7のEthernetは以下のように設定します。

![ip192.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/2105cc20-1a85-951f-07c6-d2672df60499.png)

Windows 7のtftpコマンドを有効にしてPUTを試して見ます。

![wintftp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/b54c65af-a471-2fed-90fe-de8ab0fc742c.png)

```
D:\rtlbm-mruby\samples>tftp -i 192.168.1.6 put morse_hsc.img
```

進みません。検索して調べて見たところ、ファイアウォールの設定が必要でした。

![firewall-tftp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/cebeae3c-1dfd-07fa-bad5-f773cb5695be.png)

```
D:\rtlbm-mruby\samples>tftp -i 192.168.1.6 put morse_hsc.img
転送を正常に完了しました: 1 秒間に 1776 バイト、1776 バイト/秒
```

蟹さんの電源を入れなおしてLEDが点滅するのが確認できました。

手元にある蟹さんに入れてあるVMがmruby 2.1.1の頃のもので2.1.2のmrbcでコンパイルしたmrbだと動きませんでした。

githubのリリースに置いてあるVMは、今のところmruby 2.1.0のもののようです。

auの白い蟹さんなどは、分解しなくてもVMやmrbのイメージを焼けて、簡単に試せますので、ハードオフで安く手に入ったらmrubyを試して見ませんか。
Apache　バーチャルホスト httpd -S のエラーを解消する

バーチャルホストをApacheで設定している場合に使える便利なコマンド・
##httpd -S
バーチャルホストの設定を確認できます。

>〇〇のドメインのリダイレクトしてほしいんだけど、
の依頼があるも、どこがドメインのルートなのかわからない。
そもそも、バーチャルホストの設定ファイルってどこ？
前任者がやめてわからないよー

と困った状態を助けてくれたコマンドです。

環境
・CentOS7
・Apache2.4
・名前ベースのバーチャルホスト


その時に２つエラーメッセージが表示されました。
サイトはすべて表示されているので大きな間違いではないでせようが、今後謎エラーで苦しむのを回避するために、解決しておきます。
##エラー1
##NameVirtualHost has no effect and will be removed in the next release /etc/httpd/conf/httpd.conf:43


##エラー2
## httpd: Could not reliably determine the server's fully qualified domain name, using 〇〇〇〇 Set the 'ServerName' directive globally to suppress this message


###エラー1　NameVirtualHost has no effect and will be removed in the next release /etc/httpd/conf/httpd.conf:43
について

グーグル翻訳の結果は
>NameVirtualHostは効果がなく、次のリリースで削除される予定です/etc/httpd/conf/httpd.conf:43

要するにいらないってこと
なので、
エラーメッセージの通り、
etc/httpd/conf/httpd.confの43行目
###NameVirtualHost *:80をコメントアウトしました。
ついでに
44行目に
<b>NameVirtualHost *:443もあったのでこちらもコメントアウトしました。</b>

これで1つ目のエラーは解消

##エラー2　 httpd: Could not reliably determine the server's fully qualified domain name, using 〇〇〇〇 Set the 'ServerName' directive globally to suppress this message

グーグル翻訳してみます。
>httpd：サーバーの完全修飾ドメイン名を確実に特定できませんでした。「ServerName」ディレクティブをグローバルに設定して、このメッセージを抑制してください

そこで
/etc/httpd/conf/httpd.conf　のServerNameの箇所を探してみます。
すると
ServerNameの箇所がコメントアウトされています。

そこで
コメントをはずして
###ServerName IPアドレス

にしたところ、
エラーメッセージは消えました。

今回はバーチャルホストを使っているので
ServerName　IPアドレスにしましたが、
1つしかドメインを使っていない場合は、
ServerName　ドメイン名
になるようです。

めでたし
めでたし
【DB コマンドライン】　DB　CRUD コマンドライン　一覧　簡単なやつ

##【ゴール】
DBの基本的なコマンドライン理解🔥


##【メリット】
■DBの仕組みが理解できる
■DBの理解が深まる。


##【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

##【実装】

###データベースを確認する
```mac.terminal
mysql-> SHOW DATABASES;
```

###データベースを作る
```mac.terminal
mysql-> CREATE DATABASE データベース名;
```

###データベースを使用する
```mac.terminal
mysql-> USE データベース名;
```

###テーブルと、カラムを作成
```mac.terminal
mysql -> CREATE TABLE テーブル名 (カラム名 データ型, ......)
```

###テーブルを確認
```mac.terminal
mysql-> SHOW TABLE テーブル名；
```

###カラムの情報絵を確認

```
mysql-> SHOW columns FROM カラム名;
```

###カラムの保存されている情報を確認する
```mac.terminal
mysql-> SELECT * FROM カラム名;
```

###カラムに情報を入れる
```mac.terminal
mysql-> INSERT INTO カラム名 value(情報, ....)
```
##カラムないの情報を削除
```mac.terminal
mysql-> DELETE FROM カラム名
```

###テーブル削除
```mac.terminal
mysql-> DROP column カラム名;
```

###データベース削除
```mac.terminal
mysql-> DROP DATABASE データベース名;
```

####以上

##【Youtube】始めました
https://www.youtube.com/channel/UC45rkz4dVMa-KCZBa4YeXeQ?view_as=subscriber

##【合わせて読みたい】

■DB関連で、とてもいいページ
https://www.dbonline.jp/

■ 【EMMET 記法】　基本　よく使うやつ　エメット記法　まとめ
https://qiita.com/tanaka-yu3/items/6604237970f390637e7f

■ 【Node.js mysql】mysql接続　データを取り出す
https://qiita.com/tanaka-yu3/items/6b007dd96618bb6c844e
スキル分析　まとめ

#経緯
今ままでプログラミングについて学習してきたんですけども
・何の言語ができますか？
→php,javaと勉強したけどできるかと言われればわからない！

・どういった機能を作成できますか？
→ググって模写した機能なら使えるが状況が変わると使えるかわからない！

などと言った質問をされると自信満々にできますと答えることができない。

なので
こういった機能をこの言語で書きこのようにプログラムを書いたことを
記録に残し説明できたらなと思い記事を書こうと思います。

#開発環境
◾️インストール
・MAMP(Mac,Apache,Mysql,PHP)
・XAMPP(クロスプラットホーム,Apache,Mysql,PHP,Perl)

◾️仮想化ツール
・docker(laradock)

#制作物/機能
◾️ECサイト（laravel）
商品一覧（ペジネーション利用）/会員登録/ログイン/カート機能（追加・削除・合計金額）

◾️LINE BOT 飲食店検索（laravel）
飲食店検索（LINEAPI,ぐるなびAPIを利用）

#言語/フレームワーク
php(laravel),java
#その他ツール
Redmine,GitHub,draw.io
[ServiceNow] トランザクションログを調べる

# こんな時に使える（使えそう）
- エラーログの発生時刻とユーザーIDからどのページで起きた事象なのか調べたい。
- 調査対象のページにいつ誰がどこからアクセスしたのか調べたい。
- レスポンスの遅い特定の処理や時間帯がないか調査したい。

## 確認したバージョン
NewYork

## 必要なロール
atf_test_admin または atf_test_designer

# 調査方法
システムログ > トランザクションログからリストを開き、調査したい時間帯・ユーザー・URLなどでフィルタリングする。
![スクリーンショット 2020-09-03 22.53.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676866/e438247a-3d20-fb09-0599-f0a73e80baef.png)
（画面はParisのPDI）

## 公式ドキュメント
https://docs.servicenow.com/bundle/newyork-platform-administration/page/administer/time/reference/transaction-logs-2.html
UnityでUnityEngine.UIが使えない時の対処法

## はじめに
+ Script Editer上でUnityEngine.UI及びそれを用いたコードでエラーが発生
+ Hierarchy > Create でUIが表示しない

などの状況が突然起き、すでに配置したImageやTextなどのGameObjectが使えない状態に陥った時の対処法になります。
後述しますが、Unity.UI関係のコンポーネントの設定が消えるため、バージョン管理ソフトなどで元に戻せるならそちらの方をおすすめします。

## 対処法
+ メニュー > window > Package Manager を選択
![menu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703337/ff02d4bb-ef5a-52cc-cc39-6577f0a0d438.png) 
+ Text Mesh Pro、Unity UIをそれぞれRemove
+ Unity UI、(必要であればText Mesh Pro)をInstall
![removeUnityUI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703337/de1afb12-6c03-9720-38a9-ab541d8251d1.png)

## 注意点
エラー発生以前に設定したUnity.UIのコンポーネントの設定が消えます。
TextやImageなどがGameObjectに追加されているという情報以外の設定がすべて解除され、Textではテキスト本文、フォント、フォントサイズ等、Imageでは設定したSource Image等の設定が解除されます。
根気よく設定し直してください。

バージョン管理ソフトを使おう。
ヤマハルータとESXiで自動起動＆自動停止

# はじめに
会社の隅に置いてあったテスト用ESXiサーバが夏の暑さに耐えられず電源落ちたので、空調が動いている時間だけ動かすようにしたためその時の記録。

# 構成
ヤマハルータにESXiホストが直結されている極々単純な構成です。
![WoL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569912/5e880aa8-7ed1-5936-3667-612aacd7f42e.png)

# ヤマハルータでのWoL設定
ヤマハルータには`WoL`（Wake On LAN）機能があるため、指定時間にESXiホストを`WoL`で起動させるようにします。

尚、ESXiホストの`MACアドレス`は事前に調べておいてください。

```shell:スケジュールコマンドによるWoLの設定
schedule at 1 */Mon-Fri 08:00 * wol send lan1 [ESXiホストのMACアドレス]
```

上記は月～金の朝8時に`WoL`でESXiホストを起動させるコマンドとなります。

# ESXiホスト側のcron設定
コンソール・SSHでの操作となるため、ESXiホスト側でコンソール・SSHログインできるようにしておいてください。

ESXiでは普通にcron設定を行っても再起動すると初期状態に戻ってしまうため、起動時にcron定義を再設定するよう`vi`で`/etc/rc.local.d/local.sh`を開き、`exit 0`の前に書き込んでやります。

注意点はESXiホストのタイムゾーンが`UTC`となっているため、`UTC`時間でcron設定を行う必要があります。

また、`crontab`が使えないので、`/var/spool/cron/crontabs/root`に直接cron定義を書き込んでcrondを再起動させる必要があります。

```shell:/etc/rc.local.d/local.shの追加設定
/bin/echo "0 10 * * mon-fri /bin/poweroff" >> /var/spool/cron/crontabs/root
/bin/kill $(cat /var/run/crond.pid)
/bin/crond
```

```shell:編集後/etc/rc.local.d/local.sh
#!/bin/sh

# local configuration options

# Note: modify at your own risk!  If you do/use anything in this
# script that is not part of a stable API (relying on files to be in
# specific places, specific tools, specific output, etc) there is a
# possibility you will end up with a broken system after patching or
# upgrading.  Changes are not supported unless under direction of
# VMware support.
/bin/echo "0 10 * * mon-fri /bin/poweroff" >> /var/spool/cron/crontabs/root
/bin/kill $(cat /var/run/crond.pid)
/bin/crond

exit 0
```

上記は月～金の夜19時に`poweroff`コマンドでシャットダウンするcron設定となります。

# その他
今回は特に何もせずできたのでやっていませんが、BIOS設定によってはESXiホスト側のBIOS設定で`Wake On LAN`設定を有効にする必要があります。
AZ-900の勉強(未経験・初心者向け)

ひょんな事からAzureさんとお付き合いする事になりまして。
とは言えパブリッククラウドをガッツリ弄るのは初めてという事もあり、基礎知識習得と予習を兼ねてAZ-900を受験する事に。
結果はボーダーラインピッタリ賞で合格(危なかった…)

そこで、今後受験されるであろう方にむけて学習方法のアウトプットを。

【そもそもAzureとは】
Microsoft Azure（マイクロソフト・アジュール）は、マイクロソフトのクラウド プラットフォーム (PaaS/IaaS) である。(byウィキペディア
https://ja.m.wikipedia.org/wiki/Microsoft_Azure)

契約体型はレンタルボックスの様な感じだと思います。
箱だけ借りて後は自分でレイアウト込みで管理する(IaaS)のか、管理は任せてレイアウトだけ自分でやる(PaaS)のか、プランを自分で決めてあれやこれややっていきます。
なお、料金は重量課金制なので使った分だけお支払いと言う方式を採用しています。
※Azureに限った話ではないけど、パブリッククラウドは基本この料金形態だそうな

【勉強方法】
一個人の観点になりますが、ドキュメントを読み込む前にまずはlearningの内容を理解出来るまでひたすら読み込む事をオススメします。(確認問題付きなので復習しやすい)
URLはこちら→ https://docs.microsoft.com/ja-jp/learn/paths/azure-fundamentals/

ここを完璧に覚えてしまえば、最悪参考書を買わなくてもどうにかなります。

いやいや、ちゃんと講義形式で話を聞きながらやりたいんだ僕は(私は)！
という人もいると思います。
出来ます。
定期的に開催している公式セミナーがあるので、そこに参加すれば良いと思います。
※今はどうなのか分かりませんが、僕が受験した時は条件を満たせば試験1回分のバウチャー付き(しかも無料)という好待遇でした。

勉強方法は人によって違うと思います。
これを言ってしまうと元も子もないですが、自分にあったやり方を模索しながら学んでいけるのが1番です。

この記事がそんな方の一助になれば幸いです。
Nuxt.jsのありがちな詰みパターンに対応した汎用性のあるlink用コンポーネント

```html:~/components/atoms/Link/index.vue
<template lang="pug">
.a-link(v-bind="bind")
  slot
</template>

<script>
export default {
  props: {
    to: {
      type: String,
      required: true
    },
    isNuxtLink: {
      type: Boolean,
      default: false
    },
    isBlank: {
      type: Boolean,
      default: false
    },
    isInline: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    bind() {
      return {
        is: this.isNuxtLink ? 'nuxt-link' : 'a',
        to: this.isNuxtLink ? this.to : false,
        href: this.to,
        target: this.isBlank ? '_blank' : false,
        class: [{'is-inline': this.isInline}]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.a-link
  display block

  &.is-inline
    display inline
</style>
```

```html:使い方
<template lang="pug">
Link(to="/text/" isNuxtLink isBlank isInline @mouseenter.native="assignTrueToHover" @mouseleave.native="assignFalseToHover") text
</template>

<script>
import Link from '~/components/atoms/Link/index.vue'

export default {
  components: {
    Link
  },
  data: () => ({
    hover: false
  }),
  methods: {
    assignTrueToHover() {
      this.hover = true
    },
    assignFalseToHover() {
      this.hover = false
    }
  }
}
</script>
```
リーダブルコード規約(チートシート)

自分で見返す用にまとめました。

印刷してラミネートして、いつでも参照できる状態にすると尚よしです。

## リーダブルコードチェックリスト

### 1章 コードの可読性
- [ ] コードは理解しやすくなければならない。(p2)
- [ ] コードは他の人が最短期間で理解できるように書かなければならない。(p4)
- [ ] コードは短くしたほうがいい。だけど「理解するまでにかかる時間」を短くするほうが大切(p4)

### 2章 基本的な命名規則
- [ ] 明確で具体的で情報の備わった変数名を使用することで、変数名を読んだだけで中身がどんなものか把握できるようにする(原則)(p10,16,19)
- [ ] tmp,retval,resultなどの汎用的で抽象的な変数は避ける(原則)(p12)
- [ ] 変数名が長くても意味が伝わればいい、省略して解読に時間がかかるよりマシ(原則)(p23)
- [ ] ただし、i j k などはループの変数として理解できるため使ってもよいこととする(例外)(p14)
- [ ] stringをstr、documentをdocと省略するのは問題ないが、チーム独自の省略規則はやめよう(例外)(p15)
- [ ] スコープが小さければ短い名前でもいい(例外)(p23)

// 明確で具体的で情報の備わった変数名〜
// 上から順に、明確な変数名、具体的な変数名、情報の備わった変数名

|単語|代替案|
|----|-----|
|send|deliver,dispatch,announce,distribute,route|
|find|search,etract,locate,recover|
|start|launch,create,begin,open|
|make|create,set up,build,generate,compose,add,new|


`server_can_star()`よりも`can_listen_on_port()`の方が明確で具体的

|状況	|変数名	|改善後|
| ------- | ------- | ------- |
|passwordはプレインテキストなので、処理をする前に暗号化すべきである。|	password	|plaintext_password|
|ユーザーが入力したcommentは　表示する前にエスケープする必要がある。|	comment	|unescaped_comment|
|htmlの文字コードをUTF-8に変えた。|	html|	html_utf8|
|入力されたdataをURLエンコードした。|	data|	data_urlenc|


### 3章 誤解されない名前
- [ ] 名前が「他の意味と間違えられることはないだろうか？」と何度も自問自答する(p30)
- [ ] 限界値を示す変数に min_ max_を使っているか。(p31)
- [ ] 範囲を示す変数に first_ last_を使っているか。(p32)
- [ ] 包括的範囲には begin_ end_　を使っているか。(p32)
- [ ] getXXXXメソッドをアクセッサー以外で定義していないか。(p34)


### 4章 美しさ
- [ ] インデントが整っており見やすいコードになっているか。(p50)
- [ ] 正しさより一貫性。(p49,52)

### 5章 コメントのルール(What)
#### 価値のあるコメント(自身の考え)
- [ ] 定数にはコメントが書かれているか。`THREAD_NUM = 8 `だけだとデフォルトが8になった経緯が不明。(p62)
- [ ] クラスの使用方法など高レベルのコメントが必要なファイルには、ファイルの先頭にコメントが書かれているか。(p66)
- [ ] どのような経緯でコードが実装されたかを記載する(監督コメンタリー)(p60)
- [ ] 時間やスキルの兼ね合いから発生するコードの欠陥にコメントをいれる(言い訳)(p61)

|記法|典型的な意味|
|----|-----|
| TODO: |あとで手をつける|
| FIXME: | 既知の不具合があるコード |
| HACK: | あまり綺麗じゃない解決策 |
| XXX: | 危険！大きな問題がある |

#### 価値のあるコメント(理解の促進)
- [ ] 第三者がコードを読んで疑問に思う点、間違って使う可能性を前もって想像し、コメントする(p63)
- [ ] メソッドや処理の塊に対する要約コメント(p66)
- [ ] 全体像に対するコメント(p66)

#### 価値のないコメント
- [ ] 処理の内容など、コードを読めば分かることをコメントしない(p57) //ここはコンストラクタ



### 6章 正確で簡潔なコードの書き方(How)
- [ ] 情報密度の高い言葉を使う(専門用語、コンピュータ用語)(p78)
- [ ] 入出力のコーナーケースには実例を使う(ただし実例は慎重に選ぶ)(p74)

### 7章 制御フローを読みやすくする
- [ ] ヨーダ記法を使用していないか。(p85)
- [ ] 三項演算子を使った結果、コードが理解しずらいものになっていないか。(p88)
- [ ] do~whileループを使用していないか。(p89)
- [ ] 関数内で早めに処理が抜けられるものはreturnで適切にガード節が作られているか。(p91)
- [ ] ifのネストが深くなっていないか。(p93)

### 8章 巨大な式を分割する
- [ ] 説明変数を使って改良できるコードが残っていないか。(p100)
- [ ] 要約変数を使って改良できるコードが残っていないか。(p100)
- [ ] 短絡評価を悪用、乱用していないか。(p102)

### 9章 変数と読みやすさ
- [ ] ループ処理の中で不要な中間結果を保持する変数を使用していないか。
- [ ] ループ処理の中で不要な制御変数を定義して使用していないか。
- [ ] グローバルなスコープが必要ないグローバル変数を定義していないか。
- [ ] クラス変数のスコープが必要ないクラス変数を定義していないか。
- [ ] JavaScriptで変数がグローバル領域にはみ出していないか。
- [ ] 古いC言語のルールに沿って意味もなく変数の定義を全て関数の先頭に書いていないか。
- [ ] 変更の必要ない変数には積極的にfinalがついているか。(C++, java)

### 10章 無関係な下位問題を抽出する
- [ ] メソッドの抽出が必要なコードは残っていないか。

### 11章 一度に一つのことを
- [ ] ひとつのメソッド内に複数のタスクが書かれていないか。
- [ ] メソッド名を逸脱した複数のタスクがひとつのメソッド内に書かれていないか。

### 12章 コードに思いを込める
なし

### 13章 短いコードを書く
- [ ] 標準APIにある機能をオレオレ実装していないか。
- [ ] 広く使われている外部ライブラリ(Apache CommonsやBoost)にあるような機能をオレオレ実装していないか。

### 14章 テストと読みやすさ
- [ ] テストコードが理解しづらいものになっていないか。

### 15章
なし
DataGripでAmazon Aurora MySQLに接続する

## DataGripからAuroraに接続できない...

何故かSequelProと同じ設定で接続しようとしているのに、接続できない...

MySQLに対しては接続できるが、何故かAuroraに対して接続できない...

## 原因はドライバが違っていた！

MySQLではなく、Amazon Aurora MySQLと書かれたドライバが必要

### バージョンを, 2020.2.2以降にする必要あり
(その前のバージョンだと、Amazon Aurora MySQL と書かれたドライバが無かった。)

リリースノートには特に記載されていなかったけど
https://www.jetbrains.com/help/datagrip/release-notes-for-datagrip-2020-2.html

### スクショ

- DB追加画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98082/e1eba925-5de1-d109-33fa-cfeee714280e.png)

- driverの変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98082/308633ae-c9bc-a0e6-92bf-01d3928b48bd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98082/a5604ec9-3fe1-2283-a9e1-ffa43a3544af.png)

## 何故通常のMySQL ドライバでは接続できないのか??

どうやらAmazon Aurora MySQLにアクセスするためには
MariaDBの一定のバージョン以上のドライバを使う必要がある

↓のスライド p.18, 19辺りに書いてありました。
https://www.slideshare.net/AmazonWebServicesJapan/auroraamazon-aurora


## まとめ

- Amazon Aurora MySQLにアクセスするためには、MariaDBのドライバが必要
- DataGrip 2020.2.2以降だと、 Amazon Aurora MySQL ドライバを選択すること

DataGrip上は、 Amazon Aurora MySQL Driverと書いてあるが、実態は
MariaDBの新しいバージョンのドライバである。
zoom oauth creating meeting


```php:crt-mtg.php
<?php
session_start();

$Client_ID = '';
$Client_Secret = '';
$Redirect_URL = '';

if(isset($_GET['code'])){
	$basic = base64_encode($Client_ID.':'.$Client_Secret);

	$curl = curl_init();

	curl_setopt_array($curl, array(
		CURLOPT_URL => "https://zoom.us/oauth/token?grant_type=authorization_code&code={$_GET['code']}&redirect_uri=$Redirect_URL",
		CURLOPT_RETURNTRANSFER => true,
		CURLOPT_ENCODING => "",
		CURLOPT_MAXREDIRS => 10,
		CURLOPT_TIMEOUT => 30,
		CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
		CURLOPT_CUSTOMREQUEST => "POST",
		CURLOPT_HTTPHEADER => array(
			"authorization: Basic $basic"
		),
	));

	$response = curl_exec($curl);
	$err = curl_error($curl);

	curl_close($curl);

	if ($err) {
		echo "cURL Error #:" . $err;
	} else {
		
		$result = json_decode($response, true);
		$accessToken = $result["access_token"];
		
		

	}
}else{
	echo 'Authorization Error';
}

?>
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <a href="<?php echo 'https://zoom.us/oauth/authorize?response_type=code&client_id=&redirect_uri='; ?>">go</a>
<?php



if (isset($accessToken)) {
	$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://api.zoom.us/v2/users/me/meetings",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => "{\"topic\":\"Weekly Meeting\",\"type\":\"2\",\"start_time\":\"2020-010-27T18:30:00\",\"timezone\":\"Asia/Tokyo\",\"settings\":{\"use_pmi\":\"false\"}}",
  CURLOPT_HTTPHEADER => array(
    "authorization: Bearer".$accessToken,
    "content-type: application/json"
  ),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}
}
?>

  </body>
</html>
```
SapperをAWS Fargateにデプロイしてみる

SapperをDockerizeして Google Cloud Runにデプロイする記事は海外のサイトにいくつかあったりしたのですが、できればAWSのサービスでそれができたらなーっと思い挑戦してみました。

今回のデプロイにあたって[【AWS】 Fargate CLI + Terraform で Docker コンテナを動かす簡単なチュートリアル
](https://qiita.com/acro5piano/items/512ad160fb78e421214c)の記事がとても参考になりました！
TerraformとFargateを使ったことない方がいれば是非こちらの記事を最初にご覧ください！

# 構成
* Terraform
* Fargate CLI
* Sapper

# TerraformとFargate CLIのインストール

Homebrewからインストール

```
brew install terraform
brew install fargatecli
```

# Sapperの新規プロジェクト作成

```
npx degit "sveltejs/sapper-template#rollup" my-app
cd my-app
npm install
npm run dev & open http://localhost:3000
```

# SapperのDockerfileを作成

```Dockerfile
FROM mhart/alpine-node:12

WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci --production

FROM mhart/alpine-node:slim-12

WORKDIR /app
COPY --from=0 /app .
COPY . .

EXPOSE 3000
CMD ["node", "__sapper__/build"]
```
# main.tfを作成
こちらは参考にさせていただいた[【AWS】 Fargate CLI + Terraform で Docker コンテナを動かす簡単なチュートリアル
](https://qiita.com/acro5piano/items/512ad160fb78e421214c)
の構成とほぼ一緒なので、割愛します。

# Fargateにデプロイ

```
terraform init
terraform apply
fargatecli lb create sample_app --cluster sample_app  --port HTTP:80 --security-group-id `terraform output sample_app_lb_security_group` # ロードバランサーの作成
fargatecli service create sample_app --cluster sample_app --lb sample_app --num 1 --port HTTP:3000 --cpu 256 --memory 512 --security-group-id `terraform output sample_app_ecs_security_group` --env KEY=VALUE # サービスの作成 環境変数を使ってる場合は--envで環境変数を作成時に指定できる。
```
サービス作成時にオプションを指定しない場合は最小構成で作成されます。

# LBのステータス確認

```
fargatecli lb list --cluster sample_app # STATUS Activeになればサイトが表示されています。
```
STATUSがProvisioningの場合はしばらく待って再度確認しましょう。

# 後から環境変数追加

```
fargate service env set sample_app --env APP_KEY=APP_VALUE
```

# 削除

```
fargatecli service scale sample_app 0 --cluster sample_app
fargatecli service destroy sample_app --cluster sample_app
fargatecli lb destroy sample_app
terraform destroy
```

# 最後に
こんな感じで簡単にFargateにデプロイすることができました。
できれば、CircleCIとも組み合わせてテスト、自動デプロイまで出来ればなっと思っているので、出来たら記事にしたいと思います。
遺伝的アルゴリズムを使用したアルゴリズム生成自動化


## 前置き
遺伝的アルゴリズムはパラメータの調整や組み合わせ最適化のような非常に単純な例で紹介されることが多いですが、少しの工夫でアルゴリズムやプログラムの自動生成が可能になります。

## 前提知識
### 遺伝的アルゴリズム
変異、遺伝、淘汰などによる生物の進化の考えに基づいた探索アルゴリズムです。

### 遺伝子型
突然変異や交叉のような遺伝的操作を行う対象となる型です。

### 表現型
適応度の評価対象となる遺伝子型から発現した個体です。

## 様々な遺伝的アルゴリズム
### 遺伝的プログラミング
遺伝子型が木構造

[Wikipedia](https://ja.wikipedia.org/wiki/%E9%81%BA%E4%BC%9D%E7%9A%84%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)

### 遺伝的ネットワークプログラミング
遺伝子型がネットワーク構造

### Graph Structured Program Evolution (GRAPE)
遺伝子型が一次元配列
表現型がグラフ構造

[横浜国立大学学術情報リポジトリ](https://ynu.repo.nii.ac.jp/?action=pages_view_main&active_action=repository_view_main_item_detail&item_id=4884&item_no=1&page_id=59&block_id=74)

ループが必要なアルゴリズムも表現でき、高い確率で階乗やフィボナッチを求めるプログラムを自動生成できます。
[実際に動かせるデモ](https://qiita.com/technote-space/items/7acade8a2b768153f005#%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90)

## 対象問題
強化学習のシミュレーション環境である OpenAI Gym の簡単な問題を GRAPE を使用して解いてみました。

[実装 (GitHub)](https://github.com/technote-space/genetic-algorithms-py)

### Cart Pole
上に乗っている Pole が倒れないように Cart を動かしてバランスを取るという問題です。
初期状態はある程度ランダムなため、ある程度汎用的に対応可能なアルゴリズムが必要です。

下の画像は実際に獲得したアルゴリズムの動作です。
![CartPole](https://raw.githubusercontent.com/technote-space/genetic-algorithms-py/images/cart-pole.gif)

この自動生成されたアルゴリズムをPythonで実行可能なように吐き出したものは以下です。
この吐き出す処理も実装しているためプログラムコードの生成が自動化されていると言えます。

[ソースコード](https://github.com/technote-space/genetic-algorithms-py/tree/master/samples/cart-pole)
[アルゴリズム部分](https://github.com/technote-space/genetic-algorithms-py/blob/master/samples/cart-pole/packages/algorithm.py)

### Mountain Car
Car を動かして右の山に登るという問題です。
こちらも初期条件はある程度ランダムです。

下の画像は実際に獲得したアルゴリズムの動作です。
![MountainCar](https://raw.githubusercontent.com/technote-space/genetic-algorithms-py/images/mountain-car.gif)

この自動生成されたアルゴリズムをPythonで実行可能なように吐き出したものは以下です。

[ソースコード](https://github.com/technote-space/genetic-algorithms-py/tree/master/samples/mountain-car)
[アルゴリズム部分](https://github.com/technote-space/genetic-algorithms-py/blob/master/samples/mountain-car/packages/algorithm.py)

## まとめ
最近発表された [AutoML-Zero](https://ai.googleblog.com/2020/07/automl-zero-evolving-code-that-learns.html) も進化的アルゴリズムによりアルゴリズム自体を自動で構築するものでした。
今後は機械学習も含めて完全に人間の手を離れて自動でアルゴリズムやプログラミングの作成を行うという研究がより盛んに行われると考えられます。
個体表現や遺伝子操作に関してより一般的な遺伝的アルゴリズムに則っているGRAPEを拡張してAutoML-Zeroを実装したところ、現時点でおおよそ期待通りの結果が得られています。

前置きに述べたとおり遺伝的アルゴリズムはパラメータの最適化や数値の組み合わせ最適化を解くだけのものではありません。
進化と学習は両立するものであり、進化により得た新しい構造を学習で最大限活かすという関係を実用的なレベルで再現したのが AutoML-Zero だと考えており、遺伝的アルゴリズムはこの進化の部分に大いに活用することができると信じています。
この方面での研究・開発を行っている方の参考になれば幸いです。
brew bundleの落とし穴

定期的にOSXをクリーンインストールするのが趣味なのですが，
そんなときに無駄に時間を使ってしまったので，備忘録として．

Brewfileからいろんなものを一括でインストールするのに，
`brew bundle --file Brewfile`
使いますよね．
ネットワークが遅いので，「ああ時間がかかるなあ」程度に思っていたのですが．
明らかに，おそすぎたので，Ctrl-Cとかで強制終了したりしてやっていたのですが，
一向にあるパッケージのインストールが進みませんでした．
これは，おかしいと，一体何が起こってるんだろうと
たぶんverboseオプションがあるんだろうなあと
`brew bundle --file Brewfile -v`を実行してみてあらビックリ
LICENSEの同意のところで止まっていました．．．
今まで使ってたときは，たまたまBrewfileにインタラクティブな入力を必要とするものがなかったみたいですね．

というわけで皆さんは，brew bundleを利用するときには，verboseオプションをつけて実行することをおすすめします．
brew installのときのログが見れないの怪しいなあと薄々感じていましたが，
みなさんも無駄にPCの前で何時間も待つことがなくなることを祈ります．
Swift：DispatchSemaphoreの仕様メモ

`DispatchSemaphore`を使うと非同期処理を同期的に処理するために待機したりできる。

```swift
let semaphore = DispatchSemaphore(value: 0)
```

みたいな感じで初期化できるがこの`value`がキモ。semaphoreは内部でカウンターを持つ。valueはカウンターの初期値となる。

- `semaphore.signal()`をするとカウンターが`+1`される
- `semaphore.wait()`をするとカウンターが`-1`される

`wait()`はカウンターが0以上になるまで処理を止めて待機状態になる（以降の行が実行されないで止まる）。初期値が0の場合、`wait()`をn回叩いたら、`signal()`がn回叩かれるまで処理が止まるという感じ。

タイムアウトのあるwaitもある。→`wait(timeout: )`

```swift:使い方
// 3秒でタイムアウトするwait
switch semaphore.wait(timeout: .now() + 3) {
case .success:
// 3秒以内にsignalをもらった
// うまくいったときの処理
case .timedOut:
// 3秒待ってもsignalが来なかった
// タイムアウトの時の処理
}
```

ここで内部カウンターについて注意点。

- `semaphore.wait(timeout:)`の行に到達した時点で`-1`される
- `.success`の場合、外部でsignalが叩かれているはずなので`+1`される
- `.timedOut`の場合、外部で**signalが叩かれていないけれど、`+1`される**

つまり、`wait(timeout:)`の場合、成功しようが失敗しようがカウントは`+1`される。
これを知らないとsemaphoreのカウンターをうまく処理できずに無限ループになったり、意図通りのループにならなかったりするかも。
zabbix4.0+mariadb サーバ構築

## zabbix手順書

- 概要

```
"とりあえず"zabbixサーバを作ってみるの巻
セキュリティ無視で作ってますが、実際に作るときはきちんとlocalで確認してから作ってください
```

## OSの設定

- 最新化

```
yum update
```

- 今回はセキュリティ無視

```
systemctl stop firewalld
systemctl disable firewalld
```

- selinuxをoff

```
vi /etc/selinux/config
==========
削除
SELINUX=enforcing
追加
SELINUX=disabled
==========
```

- 反映

```
reboot
```

## zabbixインストール

- リポジトリ登録

```
rpm -i https://repo.zabbix.com/zabbix/4.0/rhel/7/x86_64/zabbix-release-4.0-1.el7.noarch.rpm
```

- パッケージインストール

```
yum install zabbix-server-mysql zabbix-web-mysql zabbix-agent
```

## DBインストール

```
yum install mariadb mariadb-server
```

- mariadbの文字コードをUTF-8にする

```
vi /etc/my.cnf.d/server.cnf
==========
追加
[mariadb]
character-set-server = utf8
==========
```

- mysqlの起動

```
systemctl start mariadb
systemctl enable mariadb
```

## DB作成

- DB作成

```
mysql -uroot -p
[Enter]
```

- パスワードの設定

```
create database zabbix character set utf8 collate utf8_bin;
grant all privileges on zabbix.* to zabbix@localhost identified by 'パスワード';
quit;
```

- テーブル作成、初期データ投入

```
zcat /usr/share/doc/zabbix-server-mysql-4.0.24/create.sql.gz | mysql -uroot zabbix

※バージョンは異なる場合があるので、以下で確認してください
ll /usr/share/doc/ | grep zabbix-server-mysql
```

## zabbixの設定

- DBのパスワード変更

```
vi /etc/zabbix/zabbix_server.conf
==========
追加
DBPassword=パスワード
==========
```

- zabbixのタイムゾーンの変更

```
vi /etc/httpd/conf.d/zabbix.conf
==========
追加(# php_value date.timezone Europe/Rigaの下)
php_value date.timezone Asia/Tokyo
==========
```

## サービスを起動

- 起動

```
systemctl start zabbix-server
systemctl start zabbix-agent
systemctl start httpd
```

- 自動起動設定

```
systemctl enable zabbix-server
systemctl enable zabbix-agent
systemctl enable httpd
```

## zabbixにアクセス

- zabbixにアクセス

```
http://ZabbixサーバーのIPアドレス/zabbix/
```

- Welcome to Zabbix 4.0 [Next step]

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/2ecb3b21-f5da-a964-c56a-ff40c2ab4993.png)


- Check of pre-requisites [Next step]

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/8b224b5c-bcf4-4961-2498-7abed960db65.png)


- Configure DB connection

`Password パスワード [Next step]`

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/b5802846-3819-c78b-8655-9d6581930aa2.png)

- Zabbix server details [Next step]

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/db922368-7958-c545-4df5-1a71ba2e9c53.png)


- Pre-installation summary [Next step]

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/4873f840-366e-d784-fd7a-b7b17f730f53.png)


- Install [Finish]

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/19dfb904-e5f5-cee0-1dc7-7e18f71dc8df.png)



- ログイン(デフォルト)


```
ID : Admin
pass : zabbix
```

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/cbe13b5b-9c0f-8348-0ebd-c612a1d530ba.png)

- ダッシュボード

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/ad46280c-2454-c082-3eaa-35c776a933fa.png)
aws Lambda でPillowを利用でこまった話

## 背景
Python のPillow を利用したLambda FunctionをLocalでは問題なく実行できるのにcdkでDeployしたら以下
のようまエラーではまってました。

```
cannot import name '_imaging' from 'PIL' (/var/task/PIL/__init__.py)
```

## 最初にDeployした方法(エラー再現パタン）

  - cdk の指定
  
```python:
create_func = lambda.Function(self, "createFunction",
                               code=lambda.Code.asset('functions/artifacts'),
                               handler="create.lambda_handler",
                               runtime=lambda.Runtime.PYTHON_3_8,
                               environment=environment,
                               tracing=lambda.Tracing.ACTIVE,
                               timeout=core.Duration.seconds(29),
                               memory_size=512
                             )

```

  - Deploy コマンド
    
```bash:
$ rm -rf functions/artifacts
$ cp -a functions/src functions/artifacts
$ pip install -r functions/artifacts/requirements.txt -t functions/artifacts/
$ cdk deploy --require-approval never 

```

## 成功パタン以下の方法で対応できた


  - cdk の指定
  
```python:
create_func = lambda.Function(self, "createFunction",
                                           code=lambda.Code.from_asset('functions/src',
                                              bundling=core.BundlingOptions(
                                                 image=lambda.Runtime.PYTHON_3_8.bundling_docker_image,
                                                 command=[ 'bash', '-c', 'pip install -r requirements.txt -t /asset-output && cp -a . /asset-output'],
                                              )
                                           ),
                                           handler="create.lambda_handler",
                                           runtime=lambda.Runtime.PYTHON_3_8,
                                           environment=environment,
                                           tracing=lambda.Tracing.ACTIVE,
                                           timeout=core.Duration.seconds(
                                               29),
                                           memory_size=512
                                           )

```

  - Deploy コマンド
    
```bash:
$ cdk deploy --require-approval never 

```
Pythonのコードがそのままwebアプリになる『Streamlit』を試してみた



公式サイト： https://www.streamlit.io/

データサイエンティストや機械学習エンジニアが、数時間で美しくて良いパフォーマンスのアプリを作成する一番簡単な方法だそうです。



単純に面白そうなのでやってみました。



<br>



### 参考にした記事

- [公式ドキュメント](https://docs.streamlit.io/en/stable/)
- [Pythonのスクリプトからウェブアプリを簡単に作れるStreamlitをさわってみた](https://dev.classmethod.jp/articles/streamlit-intro/)
- [Streamlit: データサイエンティストのためのフロントエンド](https://note.com/navitime_tech/n/ned827292df6f)
- [Streamlitで確率分布のシミュレーションアプリを作ってみた](https://yolo-kiyoshi.com/2020/06/11/post-1903/)



<br>

<br>



## できたもの



動いてるところを動画にしました。



https://www.youtube.com/watch?v=WFV-cBQARbQ





サイコロをいくつか振った時の平均値のグラフがサイコロの数を増やすと正規分布に近くという[中心極限定理](https://ja.wikipedia.org/wiki/%E4%B8%AD%E5%BF%83%E6%A5%B5%E9%99%90%E5%AE%9A%E7%90%86)のデモアプリです。



<br>

<br>



## このアプリを試したい方へ



[Gist](https://gist.github.com/kokuyokugetter/1a7ec1243f469be03fa4574c05bf5018)でソースコードを公開しているので、Streamlitをインストールすれば誰でも手元で実行できます。



インストール方法

```sh
pip streamlit
```



実行方法

```sh
streamlit run https://gist.githubusercontent.com/kokuyokugetter/1a7ec1243f469be03fa4574c05bf5018/raw/a49ca69a2f33a9945602caddd607898e2bf0b0ac/clt_demo_dice.py
```



要するに`streamlit run` の後にソースコードを食わせれば良いっぽいです。gistは上げたコードのRawデータのページを呼び出せるので、ソースをダウンロードしなくてもリンクから実行可能です。



<br>


色々試しながら書いてたのを消すのもアレだったので、試行錯誤の部分や参考サイトのコードがそのまま載っていたりしますが、ソースコードのコメント部分（特に前半）は気にしないでください。


numpy.histogramとstreamlit.barchartで最初やってたら、グラフがめちゃくちゃになったのでやめたのもソースから伺えます。


整数値とnumpy.histogramが相性悪いのか、streamlit.barchartが相性悪いのかよくわからん。


<br><br>





<br>

<br>



## 感想



変数をスライダーで変えながらグラフに描画できるので、jupyterとかでいちいち変数の値を変えて再度実行とするより効果的な場面は出てきそうです。
【SwiftUI】プロパティラッパーに関する考察


#1. 目的
　SwiftUIでは、View（画面のstruct）が状態を保持しないので、プロパティラッパーを使用して状態を管理します。この記事では、複数行のテキスト（UIKitでのUITextView）を例に考察します。
#2. コードの例
　目的に関連するコードだけを抜粋しています。やりたいことは、プレースホルダー付きのUITextViewに相当するViewをSwiftUIで実装することです。
　プレースホルダーは文字の入力があったら非表示とするため、#1の_isEdited_フラグを使用します。

　この記事のポイントは、@Stateプロパティの*text*です。
　*MultiLineTextField_Rep*（子）の#2-2から、*MultiLineTextField*（親）の#2-1に入力値を渡しています。この受け渡しがない場合、#1の_isEdited_フラグが変更になって*MultiLineTextField*（親）が再描画される際、入力した値は引き継がれません（＝Viewが状態を保持しないから）。
　このときのUIの動作としては、キーボードの文字をタップすると、プレースホルダーが非表示になって、文字も入力されていない（１文字目が無視される）ように見えます。実際は、Viewが入力値（*text*の値）を保持せず消失しています。

```swift
import SwiftUI

struct MultiLineTextField: View {
    @State var isEdited: Bool = false      //#1-1
    @State var text: String = ""     //#2-1
    var body: some View {
        ZStack(){
            if !isEdited {
                Placeholder()
            }
            MultiLineTextField_Rep(text: $text, isEdited: $isEdited)
        }
    }
}

// Placeholder用のUILabel
struct Placeholder: UIViewRepresentable {
（省略）
}

struct MultiLineTextField_Rep: UIViewRepresentable {
    
    @Binding var text: String
    @Binding var isEdited: Bool
    let textView = UITextView()

    final class Coordinator: NSObject, UITextViewDelegate {
        
        private var parent: MultiLineTextField_Rep
        init(_ textView: MultiLineTextField_Rep) {
            self.parent = textView
            super.init()
            self.setNotification()
        }

　　　　　（省略）

        private func setNotification() {
            // テキストが編集されたらPlaceholderを非表示とするための通知
            let notificationCenter = NotificationCenter.default
            notificationCenter.addObserver(self,
                                           selector: #selector(textChanged(_:)),
                                           name: UITextView.textDidChangeNotification,
                                           object: nil)
        }
        
        @objc func textChanged(_ notification: NSNotification) {
            parent.isEdited = parent.text.isEmpty ? false : true     //#1-2
        }

        func textViewDidChange(_ textView: UITextView) {
            self.parent.text = textView.text　　     //#2-2
            self.parent.textView.attributedText = NSAttributedString(string: textView.text,
                                                                     attributes: self.parent.textAttribute)
        }

    }
}
```
cssコード１行でよくあるレイアウトを実現

# 前置き

最近、Youtubeで[10 modern layouts in 1 line of CSS](https://www.youtube.com/watch?v=qm0IfG1GyZU)という動画を見ました。
すべてのデモコードは[web.dev](https://web.dev/one-line-layouts/)に載っています。
とっても勉強になったから、
少しだけ翻訳した内容をここで簡単に紹介したいと思います。

IE以外の重要なブラウザがすべて対応されています。

# 上下中央揃え

`gird`と`place-items`で一発で上下中央を実現できます。
`place-items`は、`align-items`と`justify-items`を統合できる簡略した書き方です。
以下のように、`place-items: center;`に設定するだけ、どんなサイズでも、親要素が簡単に
中央に配置できます。


## html
``` html
<div class="parent blue" >
  <div class="box coral" contenteditable>
    :)
  </div>
</div>
```

## css
``` css
 .parent {
    display: grid;
    place-items: center;
  }
```
## image
![image.png](https://user-gold-cdn.xitu.io/2020/7/8/1732dabf13e3874e?imageslim)

[place-itemsの属性について、MDNの記事に確認してくさい。](https://developer.mozilla.org/ja/docs/Web/CSS/place-items
)

---
# サイドバー

グリッドレイアウトの`minmax`機能を利用すれば、ブラウザの横幅に応じて、最適なサイドバーが一発変更できます。
`minmax(150px, 25%)`とは最小サイズを150pxに設定し、大きな画面では全体の25%まで伸ばすという書き方です。
`grid-template-columns: minmax(150px, 25%) 1fr;`を指定すると、左側のサイドバーは、25%で150pxのminmaxを取得し、右側のメインセクションは1frとして残りのスペースを占有します。
[frの説明について、こちらの記事に参考してくだい。]
(https://kumonosublog.com/coding/css/grid_layout_fr_auto/)

## html
``` html
  <div class="parent">
    <div class="section yellow" contenteditable>
    Min: 150px / Max: 25%
    </div>
    <div class="section purple" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>
```

## css
``` css
  .parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
  }

```
## image
![image.png](https://user-gold-cdn.xitu.io/2020/7/8/1732dacd15793615?imageslim)

[grid-template-columnsの属性について、MDNの記事に確認してくさい。](https://developer.mozilla.org/ja/docs/Web/CSS/place-items
)

---
# 最後に

まだ知らないcss、使用されていないcssがたくさんあります。
仕事で使用できるコードが限られているかもしれませんが、

自分の知識に制限をかけないよう、
世の中で流行っている、これから流行っているコード、
ぜひチェックしてみてください。
ApacheのAliasは順番が大切

# はじめに
久々にApacheを使ったのですが、新発見がありましたので紹介します:sweat:

# 発見したこと
下記のように、あるAliasに他のAliasのパスを含むものを指定する場合は、子パスの方を先に指定しないと動作しません。

```conf
Alias /app/storage /var/www/app/storage/app/public
Alias /app /var/www/app/public
```

# おわりに
Apacheさん、こういうのはよしなにやってほしいなぁ。。
Docker/Kubernetes 実践コンテナ開発入門

[Docker/Kubernetes 実践コンテナ開発入門](https://gihyo.jp/book/2018/978-4-297-10033-9)を読んだのでメモ

Docker → Docker Compose → Kubernetesと順番に、実際に手を動かして試していける良い本だった

書名にあるように実践を意識した内容で、実際に運用していくための知識が有機的なつながりを持って学べる

execでコンテナへ直接入って頑張セットアップ作業をしていたりしたが、この本を読む事で、そういうことはDockerfileでやるべきであるなどのコンテナを運用する上で基本的ではあるがググっているだけだとすぐには気づけないことを色々学べた
作成したアプリをGitHubに上げる方法

#前提条件
①GitHubのアカウントを作成している。
②GitHub Desktopをインストールしている。
#手順①ターミナルを操作し、ディレクトリを作成したアプリに移動させる
今回はgithub-appという名前のアプリをGitHubに上げる体で進めます。

```terminal
  cd github-app
```


#手順②作成したアプリをローカルリポジトリにする

以下の流れで進めていきます。
Current Repository
↓
Add
↓
Add Existing Repository
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687824/7b766422-10ad-b67b-c27c-b3e3d791151d.png)

Choose
↓
github-appを選択
↓
Add Repository
これでローカルリポジトリを作成できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687824/4409db20-a911-592c-13e6-0a5a072ef19f.png)
※Add Repositoryが活性化されずクリックできない場合　
作成したアプリのディレクトリでgit initコマンドを実行します。

```terminal
cd github-app
git init
```

#手順③コミットする

コミットメッセージを記述し、Commit to masterを押します。
![スクリーンショット 2020-09-04 0.27.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687824/f351b5e1-a011-9610-444e-642ff44c3b48.png)

#手順④リモートリポジトリを作成する

Publish repositoryを押します。
![スクリーンショット 2020-09-04 0.30.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687824/2d4cb801-1e0d-ab4e-23ea-d6ef550e1bc4.png)

Keep this code privateのチェックを外し、
Publish repositoryを押します。
![スクリーンショット 2020-09-04 0.32.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687824/7eb71010-b33c-30c2-fc1c-a2235a4f3b0d.png)

以上の操作でGitHubのリモートリポジトリが作成できます。

これで作成したアプリをGitHub上に上げる事ができました。
k8sで自分のホスト名を返すnginxのPodとService

# Pod
``` nginx-pod.yaml
apiVersion: v1
kind: Pod
metadata:
  name: nginx-pod
  labels:
    label: nginx-label
spec:
  containers:
  - name: nginx-container
    image: nginx
    ports:
    - containerPort: 80
    command: [ "sh", "-c", "
      ln -sf /etc/hostname /usr/share/nginx/html/index.html;
      nginx -g 'daemon off;';
    "]
```

``` 
$ kubectl apply -f nginx-pod.yaml
pod/nginx-pod created
```


``` 
$ # yaml を使わない場合
$ kubectl run nginx-pod --image=nginx --generator=run-pod/v1 --port=80 --labels=label=nginx-label -- sh -c "ln -sf /etc/hostname /usr/share/nginx/html/index.html; nginx -g 'daemon off;';"
pod/nginx-pod created
```

```
$ # 確認 (クラスタ内から nginx-pod を叩く)
$ kubectl run curl --image=curlimages/curl -it --rm --restart=Never -- curl $(kubectl get pod nginx-pod -o jsonpath='{.status.podIP}')
nginx-pod
pod "curl" deleted
```

# Service (NodePort)

``` nginx-svc.yaml
apiVersion: v1
kind: Service
metadata:
  name: nginx-svc
spec:
  type: NodePort
  ports:
  - port: 8080
    targetPort: 80
    nodePort: 30080 # コメントアウトで空きポートを自動選択
  selector:
    label: nginx-label
```

```
$ kubectl apply -f nginx-svc.yaml
service/nginx-svc created
```

```
$ # yaml を使わない場合 (nodePort は自動選択)
$ kubectl expose pod nginx-pod --type=NodePort --name=nginx-svc --port=8080 --target-port=80
service/nginx-svc exposed

$ # nodePortを指定
$ kubectl patch svc nginx-svc --type=json -p='[{"op": "replace", "path": "/spec/ports/0/nodePort", "value": 30080}]'
service/nginx-svc patched
```

```
$ # 確認 (クラスタ外から叩く)
$ # curl workernode:30080
$ curl $(kubectl get node -o jsonpath='{.items[0].status.addresses[?(@.type=="InternalIP")].address}'):$(kubectl get svc nginx-svc -o jsonpath='{.spec.ports[0].nodePort}')
nginx-pod
```
rails sでcommand not foundが出た対処法

#rails sでcommand not foundが出た対処法について
結論から入ると、gemをインストールすれば、解決できた。

##gemとは何か？
gemとは、
1、RubyGemsが公開しているRubyのパッケージを示す。
2、パッケージを管理するパッケージ管理システムの名前

の2つがある。

今回は、目的がrais s を起動することなので、
詳しくは触れないが、ぼんやりと頭に残しておくと良い。

##今回の対処方法
```
gem install rails
```

をターミナルに打ち込むと、

```
Successfully installed rails-6.0.3.2
Parsing documentation for rails-6.0.3.2
Done installing documentation for rails after 0 seconds
1 gem installed
```
railsのインストールが成功し、
gemもインストールされたと表示された！

そして、もう一度

```
rails s
```
を打ち込むと、何のエラー表示も出ずに、
http://localhost:3000/
を開いてみると、

![スクリーンショット 2020-09-04 0.27.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676205/4a6b322b-67c3-aac1-0900-97cd9c5d79c2.png)

これで成功！！
まずは、表示されるかどうかを最初に確認すると良い。
LambdaでPostgreSQLを使う（Python ＋ psycopg2）

# はじめに
LambdaでPythonを使うときに、psycopg2でPostgreSQLを簡単に使う方法です。
これまでは、psycopg2をimportするのは手間でしたね。

# 方法
Mischa SpiegelmockさんのLambdaレイヤーを使わせてもらいます。

https://github.com/jetbridge/psycopg2-lambda-layer

Python 3.8 東京リージョン ap-northeast-1 の場合

```
arn:aws:lambda:ap-northeast-1:898466741470:layer:psycopg2-py38:1
```

![スクリーンショット 2020-09-04 0.06.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155165/a0b5e7a7-900b-1630-b9c1-cf1d676b6fe7.png)


レイヤーを追加、arnを指定すればOK。これだけでimportできます！

# 終わりに
Mischa SpiegelmockさんのGithubのCodeからbuildして、レイヤーにするのも簡単に出来ました。

# 参考
Qiita: AWS LambdaでPython外部ライブラリのLayerを作る前に
https://qiita.com/polarbear08/items/202752d5ffcb65595bd9