OmniAICreator/Qiita-1.07M huggingface dataset:
Sassをはじめてみよう

#始めに
Sassを使ったサイト構築、運用に関わるようになったものの、そもそもどういうものなのか自分自身ざっくりとしか把握していなかったので、整理する目的もあってまとめました。
これからSassを触る方向けの内容になっています。


#Sassって？


Sass（サース）※とはCSSを変数やmixinと呼ばれる関数を使って書くことができるRuby製のCSSメタ言語です。
複数のSassファイルをimportし、コンパイルすることで一つのCSSにまとめることもできます。
※日本では「サス」と呼ばれることが多いです。

Sass
Sass（サース、英: Syntactically Awesome Stylesheets）は、ハンプトン・キャトリンが設計しネイサン・バイゼンバウム[5]が開発したスタイルシート言語である。 後にSassファイルに用いられる単純なスクリプト言語である SassScript 用の拡張が加えられた。↓引用元
https://ja.wikipedia.org/wiki/Sass


#インストール
さっそくSassをインストールしてみましょう。
Windowsの人はRubyInstallerからRubyをダウンロードしてインストールします。
Macの人はすでにRubyが入っているのでインストールする必要はありません。
ターミナルまたはコマンドプロンプトから以下のコマンドでRubyのバージョン情報が出力されればRubyが入っていることがわかります。


```
ruby -v

```


あとは以下のコマンドでSassのインストールが完了します。

```
gem install sass
```


同じくバージョンを確認すればインストールできているのがわかると思います。

```
sass -v
```



#使い方

コードを書いた後、コンパイルが必要です。
以下のコマンドで指定したscssファイルをコンパイルしcssファイルへ出力することができます。

```
sass input.scss:output.css
```


また、Sassは変更を監視することができます。
フォルダー内のファイルやファイル自体に変更があった際にコンパイルします。


```
sass --watch input.scss:output.css
```

「gulp」などのタスクランナーを用いる方法も一般的です。
興味のある方は検索してみてください。（丸投げ）


#SASS記法とSCSS記法
実際にどのように記述するのかを見ていきましょう。
CSSだと以下のように ul#hoge を複数書かなくてはならず、冗長になってしまいます。

CSS

```
ul#hoge {
  list-style:none;
  margin:0;
}
ul#hoge li{
　　margin-bottom: 10px;
}
ul#hoge li a{
　　color:#777;
}]
```

Sassではセレクタをネスト(入れ子)することができるので、以下のようにして書くことができます。

SASS記法

```
ul#hoge 
  list-style:none;
  margin:0;
  li
    margin-bottom: 10px;
    a
      color:#777;
```

ただ、この書き方はCSS使いの方にはあまり書きやすいものではなく、後にSCSS記法というものが登場したようです。


SCSS記法

```
ul#hoge {
  list-style:none;
  margin:0;
  li{
    margin-bottom: 10px;
    a{
      color:#777;
    }
  }
}
```

CSSに慣れている人でも見やすくわかりやすいですね。（…というか、CSS書くこと自体不慣れな自分はこれじゃないと違和感があります。）



#Sassでできること
Sassでできることはネスト（入れ子）だけではありません。
よく使うものを抜粋してご紹介致します。

1. ネスト（入れ子）できる
先ほど紹介したの例のようにセレクターをネスト（入れ子）することができます。

2. 変数が使える
Sassでは変数が使えます。
例えばサイトのメインカラーやサブカラーを一気に変更する修正が入った際に値を書き換えてコンパイルすると一気に変更が可能になります。
「$」マークから始まる変数名を設定することで使いまわすことができます。


```
$main-color:#222;
$sub-color:#ccc;
#hoge{
  color:$main-color;
  a{
    color:$sub-color;
  }
}
```


コンパイル後

```
#hoge{
  color:#222;
}
#hoge a{
  color:#ccc;
}
```


3. mixin（関数）が使える
Sassではmixinと呼ばれる関数のようなものを使えます。
mixinとは似たような処理を、呼び出す際の引数で変更できるものです。
例えばベンダープレフィックスが必要なものをひとまとめにしておけば一回の記述ですべてを書くことができます。
@mixinで記述し定義しておき、 @include で使用することができます。


```
@mixin transform($transforms){
    -webkit-transform: $transforms;
       -moz-transform: $transforms;
        -ms-transform: $transforms;
            transform: $transforms;
}
#hoge{
  @include transform(scale(2));
}
```

コンパイル後

```
#hoge{
    -webkit-transform: scale(2);
       -moz-transform: scale(2);
        -ms-transform: scale(2);
            transform: scale(2);
}
```

4. importできる
変数やmixinなどのファイルを別ファイルにしインポートすることができます。
ページごとのファイルや、エレメントごとのファイルを作成し一箇所でインポートしてコンパイルすればひとまとめにすることができます。

```
@import "./settings.scss"
@import "./mixins.scss"
```

#最後に
Sassの登場はコーディングの速度やその後のメンテナンスにも大きく貢献しています。大規模なWebサイト開発におおて共通スタイルの修正漏れ対策にも有効です。
プログラミングは少し苦手な印象をお持ちの方もCSSを少し楽に書けるという感覚でスタートできるのでので是非試してみてください。


参考：

[ウィキペディアSass](https://ja.wikipedia.org/wiki/Sass)
[【初心者向け】ここから始める「Sass」の使い方まとめ](https://webdesign-trends.net/entry/9323)
[scss・sass徹底入門。使い方や導入方法を説明【CSS】](https://ferret-plus.com/12503)
AWS CDK（Python）開発からAWSリソース構築までの手順※開発初心者向け

自分がほぼインフラ一本でやってきて、開発経験が乏しかったことから
開発初心者がCDKを使ってAWSリソースを構築するために行ったことや手順を纏めてみました。
※バージョンによってはこの通り動かないこともあると思いますのでご了承ください
　私は2019年12月時点の最新版のバージョンを利用しています

## コーディング環境
環境用意は下記の記事を参照
WindowsにCDK環境構築する手順（Python）
https://qiita.com/toma_shohei/items/985916e1a95ec4c38121

## まず概要をつかむ
■概要理解資料
https://pages.awscloud.com/rs/112-TZM-766/images/B-3.pdf

◾️WorkShopやってみる
・Workshop(英語)
https://cdkworkshop.com/30-python.html

・Workshop（日本語：ダウンロード版）
http://bit.ly/cdkworkshopjp

## CDK（Python）コーディング準備
・VisualStudio Codeを開きディレクトリを開くから作業ディレクトリを指定

・cdk初期化ファイルの配置
ターミナルから下記のコマンドを実行
cdk init app --language=python
※このコマンドで必要なディレクトリなどが作成されるが、合わせてソースなどが初期化される

・requirements.txt編集（扱うリソースをinstall）
＝＝＝＝＝＝＝
aws-cdk.core

aws-cdk.aws-autoscaling
aws-cdk.aws-ec2
aws-cdk.aws-elasticloadbalancingv2
aws-cdk.aws-rds
aws-cdk.aws-ssm
aws-cdk.aws-route53

aws-cdk.aws-autoscaling-common
=====＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
pip install -r requirements.txt

ここまでできたらコーディング開始。

## フォルダ構成
cdk init した段階で以下のようなフォルダ構成が勝手に出来上がります。
https://cdkworkshop.com/30-python/20-create-project/300-structure.html

自分はpyyaml導入してパラメータをコードから分離しています。
フォルダ構成は下記の様なイメージになります。

・フォルダ構成イメージ

CDK-WORKSHOP
□┣config
□┃┣prd
□┃┃┣ec2.yaml
□┃┃┣vpc.yaml
□┃┃┣・・・
□┃┗stg
□┃□┣ec2.yaml
□┃□┣vpc.yaml
□┃□┣・・・
□┣cdk-workshop_stack.py
□┣・・・

※CDKのTOP直下にconfigというフォルダを切っている。
　その配下に環境別（prd、stgなど）のフォルダを切り、
　その配下にリソース別（ec2やvpcなど）にパラメータを記述している。（cdk.jsonで読み込むディレクトリを切り替える）
　cdk-workshop_stack.pyに全リソース構築するコードを記載（config配下のパラメータを読み取る）。
　複数リージョンへの構築は同一フォルダではできなかったのでフォルダを分けること。下記のようなやり方はpyyamlを利用しているとできない（バグと思われるが必ず出力がJSONになってしまう）
　https://dev.classmethod.jp/cloud/aws-cdk-multi-account-region/

## 暫定対応(今後修正予定、現状では解決手段不明)
!Refをパラメータに書くときは「\\!Ref」とし、
出力されたyamlを一括変換「\\!Ref」⇒「!Ref」する。
※!GetAttも同様
※pyyamlでyaml.safe_loadを利用しているが「!」をエスケープする方法がわからない
　yamlに書かずに.py上に"!Ref " + yamlから読み込んだ文字 とすると 文字列全体に" "がかかり、!Refまで文字列扱いされてしまう

## CloudFormation実行
・CloudFormationテンプレート出力
cdk synth --version-reporting false  --path-metadata false > C:\Users\test\Desktop\test.txt

・上記暫定対応実施

・CloudFormationデプロイコマンド（チェンジセット作成まで）
aws cloudformation deploy --stack-name testStack --template-file C:\Users\test\Desktop\test.txt --no-fail-on-empty-changeset --no-execute-changeset

・変更セット確認⇒実行
マネジメントコンソールからCloudFormationを開くと
作成したスタックの変更セットを確認し、問題なければ実行を押す

## よく見るドキュメント
・AWS CDK Python Reference
https://docs.aws.amazon.com/cdk/api/latest/python/index.html

・Python examples
https://github.com/aws-samples/aws-cdk-examples

## 課題
・High-level constructsの利用
手動で構築済の既存のリソース上に新たに構築するリソースをコードで構築していく運用（？）のため
Low-level constructs（CfnXXXという名前のライブラリ）しか利用できていない
※本来ならコード量を少なくするため、High-level constructsを使いたいが、
　High-level constructsで作ったリソース上にしか作れないようになっている？（⇒これは調査中）

・テストコードがかけていない
そもそも何を確認すれば良いのかが未検討

## 所感
・IaCでの構築について
品質は間違いなく上がります。（ある程度の規模の構築案件なら必ずミスする自分がミスしなかった）
検証環境作ったら本番環境はほぼコピペで作成できるので再現性はかなり高いです。

・CDKの特徴
TerraformでもAWS構築経験はありますが、CDKの方がはまりポイントが少ない印象です。
後発のツールであるため、バージョンアップの間隔が短く（毎日のようにコミットされている）、
最新版が後方互換しない場合があるので、リスクはありますが現状はそれで悩まされたことは少ししかないです。
Scratcher のための Scratch と Unity のコード対応リスト【動き編】

自分用メモ
## 動き
#### ( 10 )歩動かす

```c#
transform.Translate(Vector3.forward * Time.deltaTime * 10f);
```

#### ( 15 )度回す

```c#
transform.Rotate(new Vector3(0, 0, 15f));
```

#### (どこかの場所 |v)へ行く

どこかの場所のブロックはあとでやる。

```c#
//マウスのポインターへ行く
Vector3 pos = Input.mousePosition;
pos.z = 10f;
transform.position = Camera.main.ScreenToWorldPoint(pos);
```

```c#
//任意のスプライトへ行く
GameObject sprite1 = GameObject.Find("スプライト名");
transform.position = sprite1.getComponent<Transform>.position;
```

#### x座標を(10)、y座標を(10)にする

```c#
transform.position = new Vector3(10,10,0);
```

#### (1)秒で(どこかの場所 |v)へ行く
未対応

#### (1)秒でx座標を(10)に、y座標を(10)に変える
未対応

#### (90)度に向ける
```c#
transform.rotation = Quaternion.Euler(new Vector3(0,0,90));
```

#### マウスのポインターへ向ける
```c#
//マウスのポインターへ向ける
Vector3 pos = Input.mousePosition;
pos.z = 10f;
transform.LookAt(Camera.main.ScreenToWorldPoint(pos));
```
```c#
//任意のスプライトへ向ける
Vector3 pos = GameObject.Find("スプライト名").transform.position;
transform.LookAt(pos);
```

#### x座標を(10)ずつ変える
```c#
transform.Translate(10f,0,0);
```

#### x座標を(10)にする
```c#
var pos = transform.position;
transform.position = new Vector3(10f, pos.y, pos.z);
```
#### y座標を(10)ずつ変える
```c#
transform.Translate(0,10f,0);
```
#### y座標を(10)にする
```c#
var pos = transform.position;
transform.position = new Vector3(pos.x, 10, pos.z);
```

#### もし端についたら、跳ね返る
未対応

#### 回転方法を[左右のみ]にする
未対応

#### x座標
```c#
transform.position.x
```

#### y座標
```c#
transform.position.y
```

#### 向き
```c#
transform.rotation
```
MS Learnおすすめラーニングパス 3月号 【Power Apps編】

## MSLearnのおすすめラーニングパス第2弾！【Power Apps編】
※ [MS Learn](https://aka.ms/MSLearn-Japan)はマイクロソフトのラーニングプラットフォームです

- [PowerApps でキャンバス アプリを作成する](https://aka.ms/PowerApps-LP)：ビジネスの効率化に役立つアプリを作成したい方向けにPower Apps の概要と、アプリの作成とカスタマイズ、その管理および配布方法について説明しているラーニングパスです。

- [Power Apps でモデル駆動型アプリケーションを作成する](https://aka.ms/Model-driven-app-PowerApps-LP)：Common Data Service を使用する Power Apps でモデル駆動型アプリを作成する方法を学べるラーニングパスです。

### ステップアップされたい方向け

- [Power Apps数式レファレンス](https://aka.ms/FormulaReferencePowerApps)：PowerAppsで使用できる数式をまとめています。

- [Power Appsコネクタの概要](https://aka.ms/ConnectorsPowerApps)：PowerAppsで使用できるコネクタをまとめています。
    - ※頻繁に更新されているので、公式ドキュメントであるMicrosoft Docsを参照することを推奨しています。

- [Power Appsを始めるために必要なリンク集総まとめ](https://memo.tyoshida.me/en/power-platform/powerapps/useful-websites-to-start-powerapps/)：初心者から上級者まで、わからないことがあればまずはこちらのウェブサイトをチェックしてみてください！
jQueryとfind()とcss()

たとえばjQueryを使ってeach()とfind()を使って「.mc-movBox_mov_Item」を取得した場合

```html
<div id="mov1" class="mc-movBox">
    <div class="mc-movBox_Inner">
        <div class="mc-movBox_mov">
            <div class="mc-movBox_mov_Item">あああ</div>
            <div class="mc-movBox_mov_Item">いいい</div>
            <div class="mc-movBox_mov_Item">ううう</div>
            <div class="mc-movBox_mov_Item">えええ</div>
            <div class="mc-movBox_mov_Item">おおお</div>
        </div>
    </div>
</div>
```

```JavaScript
$('.mc-movBox').each(function(){
  el = $(this);
  boxes = el.find('.mc-movBox_mov_Item');
});
```
みたいな感じになるかと思います。
console.log()を使うと配列みたいに格納されているので思わず

```JavaScript
boxes[0].css('visibility', 'hidden');
```

とかすると怒られました。
正しくは

```JavaScript
boxes.eq(0).css('visibility', 'hidden');
```

eq()で指定しないとダメ。
Microsoft Teamsの新規作成に"Forms for Excel"が増えた！

# Microsoft Teamsの新規作成に"Forms for Excel"が増えた！

　非常に便利で、SharePointで作っていたアンケートの存在価値が吹き飛びそうな勢いです。


## アンケート作成～集計までの流れ

　TeamsのExcel用Formsを選択し、Excelファイルを作る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/aed05e12-6df5-c425-ce5f-89b74eb3e79e.png)

　自動的にWebブラウザが起動し、Formsの設定画面が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/f10c2146-5cdc-5a21-2047-b5c4e8aae09b.png)

　アンケートは直感的にかんたんに作れる。単一選択・複数選択・自由記入など、アンケートに必要な選択項目は一通り用意されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/63064317-f62f-62e3-9dcc-008f9dc07de2.png)

　アンケートの共有は右上の「共有」を押すことで簡単に共有可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/50406130-100b-c62d-d4c3-113652a1e352.png)

　サマリーもForms上で簡単に表示できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/4187d34c-5458-45fa-3ca1-ec7ff452a7aa.png)

　アンケート内容は最初に作ったExcelに自動的に記載されるため、そこから更なる分析も可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/48423472-70c7-4511-b4c4-c75d0ea7ec6d.png)



## 注意点
　作ったFormは[Formsトップ](https://forms.office.com/Pages/DesignPage.aspx)から探せる。作った直後はチームの「合計＊個のフォーム」に反映されないことがあるので、ブラウザのリロードなどで対応。
　念の為作ったフォームのURLはコピーしておくと良い。

「リンクにアクセスできるすべてのユーザーが回答可能」を選択すると誰でも（外部ユーザーも）回答可能になる。内部だけのアンケートのつもりで全公開しないように注意。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/813cf2a8-8327-a273-9a38-70c0bdc371f5.png)

　管理センターでFormsを使えないようにしているとこの機能が使えないので注意。空のExcelが出来てWebブラウザも起動しますが、Formsが表示されません。
ESPCNを使ってみた

# はじめに
　今回の記事は[こちら](https://aiotadiary.wp.xdomain.jp/2020/02/27/espcn%e3%82%92%e7%94%a8%e3%81%84%e3%81%9f%e8%b6%85%e8%a7%a3%e5%83%8f%e3%82%92%e3%82%84%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/)の記事をqiita用に書き直したものです。

# 超解像度化
　超解像度化とは一言で言うと、「画像の解像度を上げる」ことです。そう聞くとただ画像を引き延ばすだけと思う人もいるかもしれませんが、画像を縮小する際には元の画像の情報がどうしても抜け落ちてしまいます。簡単な検証をしてみます。まずは適当な画像を二分の一のサイズに縮小します。その後bilinear法を使って、画像のサイズがもとの画像と同じになるように拡大します。その結果が下の画像です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179010/f82dafa4-f6db-f5d8-3497-a9d3cecf136c.png)
 　左が下の画像、右が一度縮小した後拡大した画像

　一目では分かりづらいですが解像度は同じでも、ぼやけてしまい細かい特徴が消えてしまっています。解像度をただ上げるだけではなく細かい特徴を補いながら解像度の高い画像へと変換するのが、超解像度化のタスクです。

# ESPCNについて
　ESPCN(efficient sub-pixel convolutional neural network)は2016年に発表されたディープニューラルネットワークベースの超解像度化モデルです。

 これに類似のモデルとして、2015年に発表されたSRCNN(Super-Resolution Convolutional Neural Network)があります。これは、超解像度のタスクにニューラルネットワークを用いたもので、三つの畳み込み層によって高解像度の画像へと変換するモデルです。

 　ESPCNの特殊な点として、通常は解像度を上げる際には逆畳み込みという操作を加えるのですがこの操作によって、格子状のノイズが発生することがあります。これを克服するためにESPCNではPixel Shuffleという操作によって解像度を上げています。例えば画像を二倍のサイズにしたい時には、出力の直前で四枚の画像を作りその四枚を決まった位置関係で組み合わせて出力にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179010/9b9514e6-9d83-fffb-2952-393ea28e4b9e.png)

　
# 実装と結果
 [こちら](https://github.com/aokyut/image_tool)のコードとスクレイピングして得た画像を用いて学習を行いました。ちなみに学習に用いた画像は10000枚ほどです。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179010/3533eb81-bfb4-9911-c47c-a2205b6e77aa.png)
　左が下画像、中央が一度縮小したのち拡大した画像、右がESPCNを用いた画像。

　若干元画像と比べると細かい部分で違和感がありますが、ほとんど復元できていますね。これを使えば動画でも解像度を高くすることもできそうです。

# 終わりに
　今回はESPCNを用いて超解像度化を試してみました。こういうモデルを使って、APIなどを作ってみるのも面白そうです。他にもGANなどを用いて生成した画像をこのモデルを使うことで解像度を上げるなどといった使い方もできそうです。

　以下が今回の記事の作成の際に参考にしたサイトと論文です。

　[画像の超解像度化: ESPCN の pytorch 実装 / 学習](https://nykergoto.hatenablog.jp/entry/2019/05/28/%E7%94%BB%E5%83%8F%E3%81%AE%E8%B6%85%E8%A7%A3%E5%83%8F%E5%BA%A6%E5%8C%96%3A_ESPCN_%E3%81%AE_pytorch_%E5%AE%9F%E8%A3%85_/_%E5%AD%A6%E7%BF%92)
　[Image Super-Resolution Using Deep Convolutional Networks](https://arxiv.org/pdf/1501.00092.pdf)(2015)
　[Real-Time Single Image and Video Super-Resolution Using an Efficient Sub-Pixel Convolutional Neural Network](https://arxiv.org/pdf/1609.05158.pdf)(2016)
CloudFront+Lambda@Edgeでハマったこと

# 概要

Lambda@Edgeとは、CloudFrontのエッジロケーションで実行できるLambda関数です。
コンテンツがオリジンから返されたときにキャッシュできるので、アプリケーション側のパフォーマンスを向上させることができます。
さらにLambda@Edgeの処理として、画像リサイズ機能を組み込むとリサイズされた画像をCloudFrontがキャッシュするので、ユーザはリサイズによるオーバーヘッドを受けない綺麗なアーキテクチャを作ることができます。
具体的には、下図で右下の「Origin response」に画像のリサイズ機能を持ったLambda@Edgeを配置します。
（下図はオフィシャルから拝借）

![cloudfront-events-that-trigger-lambda-functions.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196414/42cfd882-1f5c-793a-7079-33cbefbcd4dd.png)

そんな一見便利そうに見えるLambda@Edgeですが、CloudFrontとLambda@Edgeを使って、画像リサイズのシステムを構築したときにLambda@Edgeの仕様でいくつかハマったのでまとめました。

## Lambda@Edgeに東京リージョンはない

Lambda@Edgeに東京リージョン（ap-northeast-1）はありません。
**バージニアリージョン（us-east-1）**で作成しましょう。

## Lambda@Edgeでは環境変数は利用できない

Lambda@Edgeは環境変数を持てません。これ結構痛いですね。環境変数を使いたい時は別の方法を探す必要があります。
筆者はAWS System Managerのパラメータストアに事前にパラメータを設定しておき、Lambda関数内で読み込むようにしていました。
（CloudFormationのスタックにアウトプットしておく、DynamoDBに値を格納しておくなどやり方は様々だと思います）

## （現時点では）Lambda@EdgeはNode12.xをサポートしていない

（筆者はこれに気づくのになかなか時間がかかりました...）
サポートしているランタイムは、オフィシャルでチェックしましょう。
現時点では、Node8.10はサポート切れ、Node12.xは未サポートのため、Node.jsを使いたい場合はNode10.xを使うしかなさそうです。
LambdaがサポートしているからLambda@Edgeもサポートしている、わけではないので注意が必要です。

[Lambda 関数の要件と制限](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-requirements-limits.html)

## CloudFrontにはバージョンつきのLambda関数のARNを設定する必要がある

CloudFront BehaviorにLambda関数のARNを設定する際、Lambda関数の名前のARNだけでは設定できません。
**名前+バージョン入りのARNを設定する必要があります。**
ちなみに、バージョンは$latestも設定できないので、バージョン番号を指定しないといけません。
lambda関数の更新したら、新しいバージョン番号を発行して、CloudFrontで更新する必要があります。

つまり、lambda関数を更新する度にCloudFront Distributionを更新する、すなわちデプロイ（各エッジロケーションへの伝搬）に数十分かかります。

## Lambda@Edgeの実行ログは実行地域のリージョンのCloudWatch Logsに出る

Lambda@Edgeをバージニアリージョン（us-east-1）に作成しましたが、バージニア側にはCloudWatchのログがありませんでした。
これは、Lambda@Edgeが実行されてないわけではなく、**Lambda@Edgeが実行されたリージョンにログが出ています**。（そりゃそうだって感じですね...）
日本でCloudFrontにアクセスしてLambda@Edgeを実行した場合は、東京リージョン付近のエッジロケーションで実行されるので、ログが出ないと思ったときはまず東京リージョンのCloudWatchのログを確認しましょう。

オフィシャルにも書いてました。
[Lambda 関数の CloudWatch メトリクスと CloudWatch Logs](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-cloudwatch-metrics-logging.html)


> CloudFront イベントのトリガーを作成すると、Lambda から CloudWatch に自動的にメトリクスが送信されるようになります。メトリクスはすべての Lambda リージョンで使用できます。各メトリクスの名前は、/aws/lambda/us-east-1.function-name です。function-name は、関数を作成したときに割り当てた名前です。CloudWatch は、関数が実行される場所に最も近いリージョンにメトリクスを送信します。

## Lambda@Edgeで設定した関数は削除に時間がかかる

lambda@Edgeで設定した関数は各リージョンにレプリカが作られて実行されるため、簡単には削除できません。
手順としては、
1. CloudFront Behaviorの設定からLambda@Edgeの連携を解除する
2. Lambda@Edgeを削除する（削除できない場合は時間が経ってから再度試してみる）
になります。


## Tips

### CloudFrontのエンドポイントにアクセスすると、503エラーになる

Lambda@Edgeの問題の可能性があります。

* 同時実行数1,000に達している
* サポートされていないランタイムで実行している
* Lambda関数自体に誤りがある
など。

原因の切り分けとして、簡単なLambda＠Edgeをデプロイしてみましょう。また、Lambda@Edgeを入れずに、CloudFrontからS3にアクセスできるか、なども原因の切り分けになるかもしれません。

```javascript
exports.handler = (event, context, callback) => {
    console.log("Hello");
    callback(null, 'callback');
};
```
Webアクセシビリティ

## Webアクセシビリティ とは
高齢者、障害がある人を含めすべての人がそのサービスなどを使うことができることやそのサービスから情報を取得できること
「誰にとっても使いやすいものになっているかどうか」

##ユニバーサルデザイン
Webアクセシビリティの思想はユニバーサルデザインの思想と同じである

ユニバーサルデザインとは文化や言語・国籍はもとより、年齢や性別、障がいや能力の如何を問わずに、多様な人々が利用することができる施設や製品・サービスのデザインを指すもの

元来、ユニバーサルデザインは交通機関などで主に普及していきました。その一方で、当初は障がいを持つ方々に向けて開発されたものの、その利便性の高さから一般に広く普及した温水洗浄便座などの例もあります。つまり、「高齢者や障がい者にとって便利なものは、“誰にとっても”便利なものである」と考えることもできるわけです。これはWebの世界においても同じこと。WebデザイナーがWebアクセシビリティを配慮したサイト構築をすることで、健常者にとっても使いやすく、利便性が高いものとなるわけです。


##フロントエンドやデザイナーが考えれるWebアクセシビリティ
・色味について
色覚障がいの方を想定してコントラストをはっきりさせ、色に依存したデザインを避ける。

・使用文字について
機種依存文字や半角カタカナを使用せず、外字に該当する漢字は他の文字に置き換えるなどの措置をとる。

・文字のサイズ
ユーザーの必要に応じて文字の拡大／縮小ができるようにする。基本的に16px以下の場合は太字にしたり、背景とのコントラストを明確にする。

・画像について
内容を理解するために必要な情報は、文字による説明を併記する。
・動作について
Webサイトの先頭からメインコンテンツが表示される位置まで、ブロックをスキップできる機能を実装する。
Rubyでもいい感じにパスワードを出して欲しい


![](https://cdn-ak.f.st-hatena.com/images/fotolife/f/ferrari458tukapai/20200227/20200227223051.png)

イメージ

確かにLinuxだったらさ、コマンドでランダムなパスワードとか出せると思うけどRubyでもやりたいじゃんと思って考え中

## やり方

securerandomというライブラリを使えばランダムな値を簡単に生成できるので便利かも

実行方法

`ruby randompw.rb [パスワードの桁数]`


```randompw.rb
require 'securerandom'

i = ARGV[0]
#puts i
puts SecureRandom.alphanumeric(i.to_i)
```

## 感想

こんな感じにSecurerandomのライブラリを使って何桁のパスワードを出力して欲しいかを入れるだけ

こうすると、とりあえずランダムなパスワードがいい感じができるのでちょっと満足した。
Godotでhtml,wasm,jsをExportしてみる

## Godotとは
無料、オープンソースの2D、3Dゲームエンジン。
Unityは価格が高いので、インディーゲーム開発はこのエンジンを使うケースが増えてるらしい。
今回は、一度html,wasm,jsでexportしてみて、Webアプリへの導入の可能性を探る。

#### 公式サイト
https://godotengine.org/

#### 日本語ドキュメント
https://docs.godotengine.org/ja/latest/

## インストール
https://godotengine.org/download/windows
ダウンロードはここ↑から。

今回はWin 64bitのSTANDARD VERSIONを選択。
ダウンロード&解凍してみるとなんと50MB!軽い!

## サンプルみてみる。
https://github.com/godotengine/godot-demo-projects
サンプルはここ↑から一式ダウンロード。

```
godot-demo-projects\2d\dodge_the_creeps\project.godot
```
をアプリで開く。

![2020-01-30 19_54_32-Godot Engine - Dodge the Creeps - Main.tscn.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207875/6b218650-e887-1383-7fec-a7dff2522a4e.png)
こんな画面。

↓

「F5」を押すと、ゲームが再生される。

このデモは、公式ドキュメントのGETTING STARTED > Step by step > Your first gameでつくるゲームの完成形です。


## Exportしてみる

### Export Templateをダウンロード
Editor > Manage Export Template から3.1.2.stableをダウンロード
![2020-01-31 19_33_33-Godot Engine - Dodge the Creeps - Main.tscn.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207875/16f8e2ab-c9e1-ec6d-6a33-94dfeccae489.png)
※これ400MB強あるので、ちょっと時間がかかります。

### HTML5 Presetを追加 & Export
Project > Export からHTML5 Presetを追加
![2020-01-31 19_46_31-Godot Engine - Dodge the Creeps - Main.tscn.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207875/466f623b-bf34-4fae-84d8-5b25cc74ece5.png)
↓

パネル下のExport Projectボタンで任意のディレクトリにExport

以下のようなファイル構成でExportされます

```
Export directory
　|- index.html 7kb
　|- index.js 326kb - Glue code
　|- index.pck 2,061kb - 画像などのResource
　|- index.png 22kb 
　|- index.wasm 17,424kb - Godotのメインコード
```

.pckの2MBは最適化できるとして、
なんと.wasmは17MB!




## ブラウザで表示

ExportしたファイルはWebサーバ立てないと動きません。

どこかのWebサーバにアップするか、

Python使えば、上のExport directoryで以下のコマンドをたたいて http://localhost:8000 で動作確認できるようになります。

```
# Python2
> python -m SimpleHTTPServer

or 

# Python3
> python -m http.server
```
![2020-02-03 19_12_46-Dodge the Creeps.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207875/90b627bf-fe4c-e9d3-b244-f43dda8c9ba8.png)

見れた！

その他、web版の特徴として以下とのこと。

> 現在、HTML5 プラットフォームでは次の機能を使用できません:
> スレッド
GDNative
C#
エンジンとオペレーティングシステム間のクリップボード同期
class_HTTPClient および class_WebSocketClient 以外のネットワーク処理

※GDNativeは制作にC,C++の言語を使える機能


## まとめ
- godotのwasm容量は最低でも17MB ※2020/02時点
- Web版の場合は、C,C++制作には対応していないので、GDScriptというオリジナルScriptでつくる必要がある。

というところをみるとまだまだweb仕事で使うには敷居が高そうですね。
世の中の流れの通り、Unityの代わりのゲーム制作ツールとして使う分には良いのではないでしょうか。

## 参考
- [Godot Engine のすゝめ](https://qiita.com/tomon9086/items/44f1965cda70f9fdf096)
- https://docs.godotengine.org/ja/latest/getting_started/step_by_step/your_first_game.html
- https://docs.godotengine.org/ja/latest/getting_started/workflow/export/exporting_for_web.html
'tensorflow' has no attribute 'get_default_graph'との奮闘記

## 背景

kaggleで話題のmodel を実機で回そうと思ったらこのエラーが出てきて詰まってしまった。

ネットで調べたところ解決策は色々試したので将来また同じとこで詰まりそうな自分用にまとめてきます。

## 環境
    Ubuntu 18.04.4 LTS
    tensorflow 2.1.0
    keras 2.2.4



## 解決策１
    keras.something.something

を

    tensorflow.keras.something

に変える


## 解決策２
    from keras import backend

を

    from tensorflow.keras import backend

に変える



## 解決策３
    from keras import backend as k

を

    from tensorflow.keras import backend as k

に変える


## 解決策４

tensorflow　のversionを下げる

    pip install tensorflow==1.4
## 解決策５

keras のversionを上げる


    pip uninstall keras
    pip install keras==2.3.1



## 結果

1-3は私の環境では全然効果がなかった。

4は他のmodule でエラーが出て使えなかったため使えず。

5をやって初めてちゃんと動いた！やったね


## 参考にさせてもらったサイト様
https://github.com/keras-team/keras/issues/12379

https://stackoverflow.com/questions/51159010/how-do-i-upgrade-keras-from-1-2-0-to-2-0-0
[サーバー/インフラエンジニア養成読本 基礎スキル編]を読んだ内容をまとめる

読んだ内容などを自分用でまとめているだけなので見づらいかもしれないです。
今回は、ツールなどをまとめています。

# 読んだ本

**[サーバー/インフラエンジニア養成読本 基礎スキル編](https://www.amazon.co.jp/dp/B00XHRLTAI/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)**


# サーバーとのファイルをやりとりする「[WinScp](https://forest.watch.impress.co.jp/library/software/winscp/)」
FTPでのファイル転送のほかに、通信を暗号化して、ファイルを転送できるSSH、Webサーバーの拡張機能であるWebDAVでのファイル転送にも対応している。

# サブネットやIPv6アドレスの計算を行える「[Bitcrucket IP Calculator](https://bitcricket-ip-calculator.software.informer.com/download/)」
ネットワークの管理には、IPアドレス関連の状態を把握しておくことが重要。同じネットワークに所属しなければ、直接の通信が行えないといった問題が生じてしまうため。IPアドレスの計算には、ネットワークアドレスやサブネットマスクを利用して計算を行う。

# ネットワークが正常に接続されているか確認する「[ExPing](https://www.vector.co.jp/soft/win95/net/se065510.html)」
ホストやサーb－二正常にアクセスできない場合には、問題を探し出し、復旧することになります。問題を探す方法としては、物理的にネットワークが繋がっているか、IPアドレスは正しいか、DHCPサーバーからネットワーク情報が正しく取得できているか、サーバーが正常に動作しているか、名前解決が正しく行われているか、などさまざまな原因を疑い調べることになります。この際、対象のホストまで正しく通信が行えているかを確認する方法として「ping」と「traceroute」があります。これは対象のホストにリクエストを送り、レスポンスが帰ってくるかを確認することで通信できるかを確かめる。


# ネットワークに流れるパケットを監視する「[Wireshark](https://forest.watch.impress.co.jp/library/software/wireshark/)」
BlenderのモデルをUnityに入れるには

#◆ はじめに
Unityに3Dゲーム作る為には、モデルは必要不可欠。
なので、今回は自作モデルをUnityに入れる方法とCollider機能について書きます。

#◆ 開発環境
macOS Mojave バージョン 10.14.6
Unity 2018.4.12f1
Android SDK
Blender 2.81

#◆ モデルの準備
今回のメインはモデルをUnityに入れる方法なので、
モデルの制作なとは説明しません。
<img width="450" alt="01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541380/ca82a5ad-3a5d-8061-a3df-707b3a3a8010.png"><img width="144" alt="スクリーンショット 2020-02-28 20.31.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541380/4f4e3774-10c5-b24f-a268-868619fa6e50.png">

とりあえず、適度なモデル（コップ）を作って、保存します。
（名前は初期値のままでした…）

#◆ Unityに入れて設置する
今回は
[【UnityでOculus Quest向けのアプリを作る】APPをビルドして、動作確認する](https://qiita.com/Kujirai_sakananosuke/items/7874318d3f5ce24e9c63)のSceneを使います。
（無論、普通の新規3D Objectも同じ方法で実現できます。）
<img width="600" alt="03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541380/59d8ce60-9af7-c640-dd03-4d78421ec94c.png">
やり方は非常に簡単、
「Project」に右クリック「Import New Asset」選択し、先ほどのファイルを読み込むだけです。
<img width="321" alt="04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541380/b41b1972-ef44-1d3d-cd44-c69856a5d260.png">
この中に必要なのは「Cricle」のみです。
<img width="321" alt="05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541380/9b7cf900-adde-2d07-bd8f-08cc08a57c1b.png">
Hierachyを右クリック「3D Object」→「Cube」選択「Cube」を作ります。
<img width="386" alt="08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541380/41b4d90e-719d-7d77-a50f-135dd118d47c.png">
続いて、
「Cube」を選択しInspectorの「Circle」の「Mesh」の中に先程の「Cricle」入れます。
一番下のAdd Componentボタンをクリクし「Mesh Collider」を追加し設置します。
<img width="383" alt="09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541380/de9068d1-ce8c-15fd-4a1a-917f79e2e2ac.png">
追加後、元にある「Box Collider」削除します。

ちなみに、Colliderの種類は色々あるんですが、よく使われているのは
Box Collider ：立方体
Sphere Collider ：球体
Capsule Collider ：円柱
今回使っているのは、Mesh Collider ：メッシュに基づくコライダーです。
<img width="400" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541380/34938bb2-a238-9c21-3c4a-48975b73637f.png">
これで設置完了です。
物理、色などの設置はご自由にやってください。
#◆ ビルドして動作確認
<img width="450" alt="スクリーンショット 2020-02-28 20.45.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541380/354f6958-c169-4bcc-b64b-31a2fe4317c0.png">

このようになりますね。
Blenderに関しては、まだ別の機会で。
パンくず（リスト）とは🥖🥐

##パンくずリストとは
下記のような感じでWebサイトを訪れたユーザーが今どこのページにいるかを視覚的にわかるようにするもの
階層をしっかり表し、リンクがリストアップされている
<img width="349" alt="スクリーンショット 2020-02-28 20.32.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568070/e77f367e-ddce-fb63-9faa-4593f8fb4bc2.png">

##パンくずのメリット

- ユーザビリティが高くなる

  まずWebサイトにおけるユーザビリティとは「使いやすさ」「使い勝手のよさ」のことを指します。つまり使いやすいサイトほど、ユーザビリティが高いということになります。

ページ数の多いサイトになると構造が複雑になり、ユーザ自身が今サイト内のどこにいるか分かりにくくなることがあります。
パンくずリストを設置することで「自分が今サイト内のどこにいるのか」や「サイトの構造」を認識しやすくなり、結果として使いやすさを高めることができます。

- 検索エンジンが効率的にクローリングできる

パンくずリストを設置することは、そのサイトが体系的に整理されることとなります。するとクローラーもパンくずリストによって効率的にそのサイト内のカテゴリーをたどることができるようになるため、サイトの全体像が把握しやすくなり、効率的なクローリングを期待することができます。
Postgresのdouble precision型を四捨五入したい

#はじめに
Postgresのdouble　presision型のデータに対し、round関数で四捨五入するとうまくいかないため、対応した時のメモ

#環境
- Postgres 11

#そのままやると
```sql
select round(col1,5) from test where id=1
```

するとこんなエラーが。

```
ERROR:  function round(double precision, integer) does not exist
LINE 7: select round(col1,5) from test where ...
               ^
HINT:  No function matches the given name and argument types. You might need to add explicit type casts.
SQL state: 42883
Character: 290
```

#原因
どうやら、Postgresにはdouble precisionを四捨五入する関数がないらしい。理由は参考URLに書いてある模様。

#対応
無理やりnumericに変換してround関数に渡す♪　

```
select round(CAST(col1 as numeric),5) from test where id=1
```

#参考URL
―[How to round an average to 2 decimal places in PostgreSQL?](https://stackoverflow.com/questions/13113096/how-to-round-an-average-to-2-decimal-places-in-postgresql/20934099)
リモート上で削除されたブランチをローカルからも削除するワンライナー


```
git for-each-ref --format '%(refname:short) %(upstream:track)' |
  awk '$2 == "[gone]" {print $1}' |
  xargs git branch -D
```


`.gitconfig`にエイリアスとして登録するとなお良しです。
Reactでクラスフィールドを使用する（create-react-appとBabelを使用）

#はじめに
最近、Reactのクラスコンポーネントの書き方も色々あると知ったので備忘として残しておきます。

#同じ内容だけど違う書き方のクラスコンポーネント

##いつものReactの書き方
constructorが書いてあってなんだか安心します。
関数のbindもしてますね。

```javascript

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
    this.incrementCounter = this.incrementCounter.bind(this);
  }
incrementCounter() {
    this.setState({
      counter: this.state.counter + 1
    });
  }
render() {
    …
  }
}
export default App;
```

##いつもと違うReactの書き方

え！？constructorが書いてないじゃん！
constructorは最初に呪文のように書けって習ったよ！？
関数のbindもしてないじゃん！

```javascript

import React, {Component} from 'react';
class App extends Component {
  state = {
    counter: 0
  };
incrementCounter = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  }
render() {
    ...
  }
}
export default App;
```

#なぜ動く？？
それでは、なぜ動くのでしょうか？
create-react-appが、既にBabelに設定をしてくれているためだそうです。
https://medium.com/@damianperaltam/using-class-instance-properties-in-react-with-create-react-app-and-babel-4ac4da5299e
fastlane matchに新しいProvisioning Profileを追加する

新しく環境を追加したとき、fastlane matchにProvisioning Profileを追加する方法

今回、APIの向き先が増え、Build ConfigurationでBundleIDを追加したので必要になりました。

## 余談

https://docs.fastlane.tools/actions/match/
この辺を見て…

> Import
> To import and encrypt a certificate (.cer) and the private key (.p12) into the match repo run:
>
> fastlane match import

フムフム、Provisioning Profileの場合もimportするのかな？ と思っていたら...

AppIDだけ作成すれば後は、以下コマンドで`match`prefixのProfileを作成してくれるんですね。


## 方法
ex: devの場合

```shell

$ fastlane match development
# can be: appstore, adhoc, enterprise or development
```

以前、既存Profileをmatchに移行した経験から難しく考えすぎていました。
XCFrameworkって何？どうやって作成するの？

## XCFrameworkとは

- Xcode11から利用開始となった、バイナリフレームワーク配布のため新たにサポートされた形式です。
- XCFrameworkはエミュレータやデバイスなどの複数のプラットフォームを同じバンドルに入れられます。
  - ひとつのXCFrameworkの中に複数の `.framework` がバンドルされます。
  - XCFrameworkはXcodeがサポートするどのプラットフォームにも対応します。（ios, macOS, tvOS, watchOS)

## XCFrameworkだと何が嬉しいのか
- これまでエミュレータと実機に対応したユニバーサルフレームワークを生成したい場合、lipoコマンドを使用して結合する必要がありましたが、XCFrameworkだとそれをする必要がありません。
- lipoコマンドで生成したユニバーサルフレームワークはストア提出時にエミュレータ用のバイナリ（x86_64）を取り除く必要がありましたが、XCFrameworkではその手間が発生しません。 
  - XCFrameworkだとストア申請時はデバイス用のバイナリのみ埋め込まれます。

## XCFrameworkを生成するには

1. ビルド設定の `Build Libraries for Distribution` をYESにします。
2. 1を設定した上で、下記のコマンドでフレームワークを生成します。

``` 
xcodebuild -create-xcframework -framework [path] -framework [path] -output Hogehoge.xcframework
```

参考：
https://developer.apple.com/documentation/xcode_release_notes/xcode_11_release_notes
https://developer.apple.com/videos/play/wwdc2019/416/
ハッシュからキーを取り出して配列に格納する

## 問題
```ruby
book = {title: "多動力", price: 1280, impression: モチベが上がる}
```
上記のようなハッシュからキーだけを取り出して配列に格納するにはどうしたら良いでしょうか

## 方法
ハッシュに対してkeysメソッドを使用して配列に格納します。

```ruby
array = book.keys
```

出力すると

```ruby
puts array
```

キーだけが取り出されて出力されます

```:ターミナル
title
price
impression
```

この方法でハッシュからキーだけを取り出して配列に格納することができます。
Capistranoでのデプロイを攻略する

# 今日の目標　
デプロイ作業でよく使うコマンドを整理する

# 前提　
Rails ５．０．７．２
レポジトリ名：freemarket
pemキー名：team_c.pem
ユーザー名：ec2-user
Elastic IP:@18.176.134.115

# SSH接続
```
$ cd .ssh/
$ ssh -i team_c.pem ec2-user@18.176.134.115
cd /var/www/freemarket
```
# pemキー確認

```
cd
cd .ssh
ls
```
# デプロイコマンド
```
bundle exec cap production deploy
```
#AWSアクセスキー、キーID確認

```
env | grep AWS_SECRET_ACCESS_KEY
env | grep AWS_ACCESS_KEY_ID
```
# MySQL
```:ターミナル(本番環境)
状況確認
sudo service mysqld status
起動する
sudo service mysqld start

mysqlにアクセスする
mysql -u root -p

データベースを確認
show databases;
データベースを選択
use freemarket;
テーブルを確認
show tables;
カラムを確認
show columns from テーブル名;

```
本番環境のデータベースを作り変える（破壊系)場合はこちら
https://qiita.com/keitah/items/7b20fcae6ef13820d01f

# unicorn

```:ターミナル(本番環境)
状況確認
ps auxwww | grep unicorn
ログ
cat log/unicorn.stderr.log

less /var/www/freemarket/current/log/unicorn.stderr.log
または
cat /var/www/freemarket/current/log/unicorn.stderr.log
```
# nginx

```:ターミナル(本番環境)
再起動
sudo service nginx restart

ログ
ホームディレクトリで
sudo less /var/log/nginx/error.log 
```
# capistrano

```:ターミナル(本番環境)
ログ
less log/capistrano.log
```
# vim
```：￥:ローカル
vimエディッタを起動
vim ~/.bash_profile

insertモード
i

環境変数を反映させる
source ~/.bash_profile

PCに設定されている環境変数を確認
$ printenv
exportされている環境変数を確認
$ export -p

insertモードを終了
esc
:wq
```

```:本番環境
sudo vim /etc/environment


本番環境で　
env | grep SECRET_KEY_BASE   (SECRET_KEY_BASEの値の確認)
env | grep DATABASE_PASSWORD (DATABASE_PASSWORDの値の確認)
```
# おまけ
we're sorry, but something went wrongの内容を把握する方法

```ruby:config/environments/production.rb
config.consider_all_requests_local       = true ← デフォルトはfalse
```
https://qiita.com/keitah/items/2aa2ac968c76260e8750

# デプロイ作業でよく使うコマンドを備忘録として整理しました。

今後気がついたらちょいちょい追記していきます。
未経験者による転職（就職）メモ　#2 そもそも論

#はじめに
プログラミング未経験者が、IT業界のキラキラした面だけ見て、現実を目の当たりにし、挫折したり、諦めたりする人を多く見かけます
私はまだ働き出していませんが、就活を終えた身として、これからIT業界に来られる方に、事前に知っておいて欲しいことをまとめましたので、お目通しいただければと思います
転職が悪いとか、IT業界に挑戦するのがダメとかではありません
ギャップを少しでも減らしたいのです
また、今回の記事は、学生・社会人関係なく全体を対象としています


#目次
- キラキラした面ばかり見ないで
- 最初から開発
- リモートワーク
- 満員電車回避
- 高収入
- IT業界の人手不足
- そもそも…
- さいごに

##キラキラした面ばかり見ないで
「これからプログラミングスクールに行って、IT業界に入るんだ！！」「プログラミング勉強して収入あげるんだ！！」等、色々な思いがみなさんあるかと思いますが、そもそも質問ですが、あなたが思い描いているIT業界のイメージってどんなものでしょうか？

パソコンに一日中向き合ってバリバリ仕事しているイメージ？
コミュニケーションが苦手だから、黙々とコードかけるのが自分にあっていそう？
なんかかっこいい？
手に職をつけたい？

みなさんそれぞれイメージがあると思いますが、当たっているようで、当たっていません
かっこいいとかは主観なんでお好きにどうぞなんですが、例えば、「週3〜４の稼働で年収1000万円」、「フルリモートで、自分の自由な時間を確保しながら仕事」とか、いわゆる「キラキラした面」を主体で考えられている方がいたら要注意です

はっきり言います
そんな人は「稀」です

いるのはいると思います、そういう方
しかもそういう方はだいたいインフルエンサーなので、みなさんへの影響力も大きいです
その人なりのやり方をして成功を収めていますので、それを否定はしませんが、ちょっと待って欲しいのです

「目標にする」ことはいいと思いますが、業界に入ったからと言ってすぐに実現できるかというとそうではありません

##最初から開発
基本的には

####期待しないこと

です

とはいえ、自社・受託開発であれば、会社さんによっては可能です
かくいう私も、4月からお世話になる会社さんでは、「本来は開発からじゃないけど、開発から入れるように便宜を図る」と言っていただけました
なくはないんですが、「テスター」とかの直接開発には携わらない業務から開始することが多いようです

私が面接・会社訪問で関わったSES企業は、軒並み開発からは携われず、「テスター」「キッティング」「コールセンター」等の業務から開始するというお話でした
一事が万事ではないですが、そういう傾向にあるということを認識しておいてください



##リモートワーク
結論から言います
未経験からリモートワークできる人は

####「稀」

です

そもそも未経験者でフルリモートをしようと思うと相当なコミュニケーション能力が必要です
仕事のやり方一つわからないのに、OJTもOffJTも行わないのですから


もう一度言いますが、「目標にすること」はいいと思います

私の狭い見地ではありますが、初めからリモートでさせてくれる会社さんは、1社もありませんでした
短期間、例えば子供が熱出して行けないから数日はリモートに切り替える、と言った事例はいくつかの会社さんではありました

IT業界といえど今はまだそのくらいなのです

変革が多い業界ですので、特に今は新型コロナウイルスが流行っているので(2020/02/28)、徐々に対応はなされていくかとは思います
ただ、すぐにその地位をつかみ取れるかというと、ほんの一握りの人しか摑み取れないでしょう
おそらくそういう方は「IT業界」に限らず成功するポテンシャルを秘めているでしょうし、私のこの駄文も読んでいないと思います


##満員電車回避
これも結論から言います
回避できる人は

####半数弱

じゃないでしょうか

これには理由があって、「コアタイム」を設定している会社は、満員電車を回避しやすいからです
＊「コアタイム」とは、その時間には会社に出社しておかないといけない時間帯のこと
コアタイムの設定がある会社さんは４割くらいでしたので、半数弱としました
主にベンチャー企業が多いという印象です


##高収入
これに関しては完全に

####自分次第

でしょうね
給与の上がり幅は他業界よりもしかしたら多いかもしれませんが
あとは、ベンチャーに入って取締役クラスになればその分報酬がつくでしょうから、そう言った面では高収入と言えるのではないでしょうか
しかし、あなたがやりたいのは「プログラミング」なんですよね？


##IT業界の人手不足
はっきり言います

####「実力者」の人手不足

です
業界全体の人手不足（誰でもいい）と思われがちですが、そうではありません
なので、「人手不足だから就職（転職）しやすい」なんてことはありません
かくいう私も、前職が小売で同様に人手不足なので、「あ、同じように人手不足なんだなー」と、この点は少し甘く考えていました


##そもそも…
そもそも「あなたがIT業界に行きたい理由」をもう一度考えて欲しいのです
もし先に述べたような「キラキラした面」だけを見て判断しているのであれば、一度立ち止まるべきです
何度も言いますが、「目標にすること」はいいと思います
しかし、中にはIT業界に入ればそのキラキラが手に入ると勘違いしている人が多くいます

本当にあなたがやりたいことは「IT業界」で叶える（られる）ものですか？


##さいごに
今回、自分が就職前提でここ半年間ほど動いていたので、就職することを前提に書きました
フリーランスに関してはわからないので、記述していません
しかし、フリーランスにしても同様のことが言えると思います

その情報の出どころはインフルエンサーだけではないですか？
実際に、働いている方に話を聞いてみましたか？

実際に働かれている方の話も、その人のその話が全てではないのは当然ですが、片鱗を見ることはできるでしょう
それが自分の思っていたものとはかけ離れている可能性があります
それを「知っている」か「知らない」かでは、就職活動におけるアクションも少しずつ変わってくるとおもいます

さいごにもう一度言います
「目標にすること」はいいと思います
IT業界に来ることを否定しているわけでも、転職を否定しているわけでもありません
あまりにも、いい面だけをみて、勘違いをしている人が多いからです
この記事で、少しでも現実を知った上で、熱意を持ってIT業界にチャレンジする人が増えることを願っています
PostgreSQL で正規表現に最初にマッチしたテキストを返す

# PostgreSQL Ver.10以上の場合

`regexp_match()` という関数を使うのが簡単です。

```sql
SELECT
  regexp_match('hogefuga','hoge');
-- {hoge}
```

戻りはTEXT配列です。
捕獲式集合が複数あった場合、捕捉グループが配列に収まります。

```sql
SELECT
  regexp_match('hogefuga','(hoge)(fuga)');
-- {hoge,fuga}
```

マッチしなければNULLが返ってきます。

```sql
SELECT
  regexp_match('hogefuga','piyo');
-- NULL
```

`test_texts`テーブルにこのようなデータがあったとして。

|id|text|
|:-:|:-:|
|1|hoge|
|2|fuga|
|3|piyo|
|4|hogera|
|5|hogehoge|
|6|fugahoge|

各行が`hoge`と`fuga`のどちらが先にtextに現れるかを調べたい。
かつ、どちらも含んでいなかった行も確認したい場合。

```sql
SELECT
  id
  ,(regexp_match(text,'(hoge|fuga)'))[1]
FROM
  test_texts
;
```

とすると、以下の結果が返ってくる。

|id|text|
|:-:|:-:|
|1|hoge|
|2|fuga|
|3|[NULL]|
|4|hoge|
|5|hoge|
|6|fuga|

[PostgreSQLのドキュメント](https://www.postgresql.jp/document/11/html/sql-expressions.html)で添字に関して
>一般的には、配列expressionは括弧で括らなければなりませんが、添字を付けるそのexpressionが単なる列参照や位置パラメータであった場合、その括弧を省略することができます。

と説明されているので、`regexp_match`が返した配列に添字アクセスするために`regexp_match(text,'(hoge|fuga)')`をカッコで囲んでいます。

# PostgreSQL Ver.10未満の場合

`regexp_match()` が存在しません。~~バージョンをあげてください。~~
代わりに`regexp_matches()`を使います。

複数形の名称を持つこの関数はgフラグを与えると、マッチングするパターンが複数存在した場合に全てのパターンを複数行で返します。

```sql
SELECT
  regexp_matches('hoge1hoge2','hoge\d');
-- {hoge1}

SELECT
  regexp_matches('hoge1hoge2','hoge\d','g');
-- {hoge1}
-- {hoge2}
```

という訳でgフラグを立てない以下のようなSQLで同じようなことができます。

```SQL
SELECT
  id
  ,(regexp_matches(text,'(hoge|fuga)'))[1]
FROM
  test_texts
;
```

ただし、`regexp_matches()`はマッチするものがない場合行を返しません。

|id|text|
|:-:|:-:|
|1|hoge|
|2|fuga|
|4|hoge|
|5|hoge|
|6|fuga|

どうしてもマッチしなかった行も回収したい場合は[公式ドキュメント](https://www.postgresql.jp/document/11/html/functions-matching.html)のヒントに従い、
`SELECT`をサブクエリにしてそこで`regexp_matches()`を呼びましょう。

```SQL
SELECT
  id
  ,(SELECT (regexp_matches(text,'(hoge|fuga)'))[1])
FROM
  test_texts
;
```

これでバージョンの古いPostgreSQLでも`regexp_match()`と同じことができます。
LXC上の仮想マシンがIPv4アドレスを取得できない問題

LXC（Linux Containers）という技術があります。Linux上でアプリケーションレベルの仮想化環境を提供するものですが、最近そのマシン上でうまくIPv4アドレスが取得できない問題が発生しました。本記事では、その原因および対処について紹介します。注）記事中LXCとLXDを混同して使っています。

# TL; DR

仮想マシン上で、
`systemctl edit systemd-networkd.service` を実行して、起動したエディタに

```ini
[Service]
BindReadOnlyPaths=/sys
```
を入力して保存する。
続いて`systemctl restart systemd-networkd.service`を実行してサービスを再起動する。

# 問題の識別

この問題は、主に以下の条件を満たす環境で発生することがわかっています。

- DHCPクライアントにsystemd-networkdを採用している
- systemdのバージョンが244.1以上である

現在、この環境を満たすのは、ArchLinux、Fedora など先端を行くディストリビューションに限られますが、ディストリビューションに依存する問題ではないため、今後問題の影響を受けるシステムは拡大しそうです。

## 原因

LXC側では問題の原因を把握しており、現在対処中です。
https://discuss.linuxcontainers.org/t/no-ipv4-on-arch-linux-containers/6395/23
によると、このリグレッションはsystemd-224.1のバグ修正によるもので、/sysディレクトリがコンテナ内でリードオンリーになっていないことに起因するそうです。

コンテナ内ではudevやネットワーク操作など様々な理由から/sysへの書き込み権限が必須ですが、systemd側はこの問題に対するLXC側の修正提案を拒否したようです。

そのため、対処は可能ですが、LXC側の軽微な修正では済まなくなり、カーネルレベルまでエスカレーションしての修正になるそうです。

いずれは修正されますが、パッチの適用された新しいカーネルが提供されるまで、この問題に暫定的に対処する必要があります。

# 対処

ユーザー側でできる暫定的対処策としては以下が提案されています。

- コンテナで/sysをリードオンリーでマウント
- systemd-networkdユニットファイルをオーバーライドして/sysをリードオンリーでマウントする（冒頭の方法）

現在、LXCではディストリビューションイメージにsystemd-networkdオーバーライドファイルを含めて配信することを検討しているそうです。

以上、取り急ぎですが参考になれば幸いです。
Vue.jsを使用して書いたChrome extensionにおけるi18n対応

Chrome extensionの開発でVue.jsを使用したときの国際化対応方法についてのメモ

# 基本的なi18nの対応方法
### vue-plugin-webextension-i18nをインストールする
```zsh
% npm install --save-dev vue-plugin-webextension-i18n
```

### Vueのインスタンスにプラグインを追加する
```js
import i18n from 'vue-plugin-webextension-i18n'
Vue.use(i18n);
```

### manifest.jsonに以下を記述する

```json
...
default_locale: "en",
...
```

### リソースファイルを配置する
manifest.jsonと同じ階層に_localesというフォルダを作り、さらにその下にlocaleごとのフォルダを配置する。

```zsh
% tree -L 1
.
├── _locales
├── assets
├── common
├── config
├── ...
└── manifest.json
```
```zsh
% tree ./_locales/ 
./_locales/
├── en
│   └── messages.json
└── ja
    └── messages.json
```

### リソースファイル（messages.json)に文言を追加する
- en/messages.json

```json
{
  "save": {
    "message": "Save"
  }
}
```
- ja/messages.json

```json
{
  "save": {
    "message": "保存"
  }
}
```

### Vueコンポーネント側からリソースファイルを使用する
以下のように記述することで、messages.jsonに足した文言にアクセスできる。

```vue
<button>{{ $i18n('save') }}</button>
```

# Tips
### Formatsの機能を使う
- 言語によって語順が異なり、文言の中に変数を埋め込みたい場合は、以下のように記述できる。

messages.json

```json
...
},
"showItems": {
    "message": "Show $NUMBER$ items",
    "placeholders": {
        "number": {
            "content": "$1",
            "example": 2
        }
    }
},
...
```

Vue component

```vue
{{ $i18n('showItems', [itemLength]) }}
```
※第2引数は配列になっており、[A, B, C]と記述したらmessages.json側では \$1, \$2, $3に渡る


# 参考
- [Localization support in your Vue.js based Chrome extension](https://dev.to/robertjgabriel/localization-support-in-your-vuejs-based-chrome-extension-436d)
- [Formats: Locale-Specific Messages](https://developer.chrome.com/extensions/i18n-messages)
ASTERIA意外と便利なTIPS

##知っていると知らないではだいぶ違うな、と
#####メリット
主に以下が筆者が実感したことです。

 - とってもきれい
 - 見やすいので処理を追いやすい
 - 本番系、開発系…などの区別をつけやすい
 - チリが積もって開発時間の短縮になる
 - 見やすいので他人に説明しやすい
 - できる人っぽく見える（おまけ）

#####デメリット
 - 現時点では「ない」と思ってます

##まずは以下の図を見てください
※特に何か処理があるわけではありません。アイコンを配置しただけです。
######（図１）
![0010_誰もが一度は経験したことがある.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522027/8168b1a1-3dd5-e165-9999-debc22edb777.png)

誰もが「見たことある」やつ、ではないかと思います。
でも下の図のように変更するととても見やすくなりま…せんか？
######（図２）
![0020_きれい！.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522027/6aff87a4-d1b0-3d89-8af9-de907b3e8195.png)

そして（図１）を作るとき、または配置した後ににいちいち線種を変更するのではなく、自然に（図２）が作成できるのはとっても嬉しいこと。

##キーワード：環境設定

大したことはないのですが、当たり前といえば当たり前。でも知らないと損。

####きれいなフローの環境設定
メニュー＞ツール＞環境設定を選択し、「表示／編集」タブを選択します。


![0030_環境設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522027/620fe4de-c427-a1db-17cd-a3d14695f001.png)

項目は大別して
・共通
・フロー
・マッパー／関数コレクション
・説明の初期設定
です。

![0041_カギ線とかコメントとか.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522027/fe1466b9-4b57-02a0-cfef-a8fa47ef958f.png)


デフォルトだと先の**（図１）**のような形になってしまうと思います。（曲線・カギ線は別として。）
**（図２）**のようにするために筆者の環境では下記の項目を変更しています。

![0050_環境設定例.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522027/7987dad0-c04a-4f92-bebe-50e389cf7a67.png)

・共通
⇒「説明にグリッドを揃える」にチェックを入れる
・フロー
⇒「リンク形状」は「カギ線」に変更する
・マッパー／関数コレクション
⇒変更なし
※「リンク形状：カギ線」を試してみたのですが、線が重なりすぎて逆に見にくかったです。

（直線の場合）
![0043_マッパー直線.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522027/a87d81a9-3233-9480-eeac-a45eba280d71.png)

（カギ線の場合）
![0045_マッパーカギ線.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522027/0d7557c2-4ba0-9433-aad1-6a3eebb809f1.png)

（曲線の場合）
![0047_マッパー曲線.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522027/aba515a6-8841-7420-452d-e7fb8c42f879.png)


好みにもよるとは思いますが個人的にはマッパーはやっぱり直線かなぁ、とか思うわけです。ハイ。

####判別しやすい環境設定
※こちらはバージョン1912からの実装と聞いています。
　筆者の環境は「Asteria4.9.1.9425」「Asteria1912」が共存しているので。。。
ツリーペイン＞サーバーを右クリック＞サーバーの表示設定を選択する。
![0060_背景など.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522027/9e8b309f-be09-bd5c-9aec-aa6142e46c96.png)

選択すると下記のダイアログが表示されます。
![0070_表示名と背景色の変更が可能！.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522027/f540ed44-1f16-0124-89c0-fca73cbdca4c.png)

これはフロー（＋フローのタブ、マッパーの背景など）の背景を変えることができます。
背景を変えておくと本番系、開発系…などの区別をつけやすいですね。
「間違えて本番系変更保存しちゃったよ！」とかいう大惨事を防いでくれそうです。

##最後に
やっぱり「見た目」「使いやすさ」（いわゆるUI）は大事だな、と思いました。
これは自分のためだけでなく説明する相手、あるいは稼働後保守をしてくれる方のため、仕様変更のため改修をしてくれる人のためでもあります。
まぁ「全部自分が担当です」ってケースもあるかもですが。
![0080_見やすくきれいな環境.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522027/41d9a822-d960-04d6-df16-9029a28093a4.png)
コメントも大事ですよね。

もっともっといろいろ簡単にできるよ～、いい機能あるよ～という情報あったら是非教えてください。
ご清覧ありがとうございました。
datetime と ファイル書き込み と バックアップ

```py:
import os
import shutil
import datetime

now = datetime.datetime.now()
file_name = 'test.txt'

#test.txtというファイルがあれば、
#日時をファイル名に含めたバックアップファイルをつくる
if os.path.exists(file_name):
    shutil.copy(file_name, '{}.{}'.format(
        file_name, now.strftime('%Y_%m_%d_%H_%M_%S')))
#test.txtという名前で中身がtestであるファイルをつくる
with open(file_name, 'w') as f:
    f.write('test')
```
deviseの関連ファイルが作られず、コマンドが適用されなくなった時の対処法



deviseをインストールしていると`config/initializers/devise.rb`と
`config/locales/devise.en.yml`ファイルが生成されておらず、、さらに`rails g devise user`や`rails db:migrate:status`しても

```bash
NoMethodError: undefined method `devise' for Install (call 'Install.connection' to establish a connection):Class
```
というエラーが出ました。すでにuserモデル以外のデータべースは作ってあるので`rails db:migrate:status`が出来ないということはコマンドが適用されていないということだと思います。
同じ状態で`bundle install`からやり直しても解決出来ませんでした。


## 考えた仮説
このときGemfileにはちゃんと`gem 'devise'`と記述されていました。ターミナル履歴は以下の通りです。


```bash
#ターミナル履歴
bundle install
rails g devise:install
rails g devise user
rails db:migrate
```
ターミナル履歴におかしいところはない。
しかし`config/initializers/devise.rb`と
`config/locales/devise.en.yml`ファイルがインストールがされていないので、`rails g devise install`に問題があるのではないか？
gemはローカルサーバーの再起動をしないと反映されないので、`rails g devise install`の前に再起動をしていなかったのではないか？


## 解決方法
調べると、`rails g devise install`が反映されていないと`rails s`や`rails g devise user`や`rails db:migrate:status`など他のコマンドが競合してしまい、コマンドが反映されなくなってしまうようです。
参考記事 : https://qiita.com/ryouzi/items/9c5324ba567109ab2a22

具体的な対処法
1. もう一度`bundle install`
2. `routes.rb`にある`devise_for :install`もしくは`devise_for :users`というコードを削除する
3. 2でrailsコマンドが適用されるようになったので`rails db:rollback`でマイグレーションファイルをロールバックする。
4. `rails db:migrate:status`でステータス確認
5. userテーブルやモデルが作られている場合は`rails d model user`で削除
6. rails g devise:install
7. rails g devise user
8. rails db:migrate

## 最後に
プログラミングを始めて４週間の初心者なので、その目線でわかりやすく書くことを心がけました。
わかりにくい記述、間違っているところがあればご指摘ください。
最後まで見ていただきありがとうございました。
VPC Service Controlその2

#はじめに

VPC Service Controlの境界ブリッジ(service perimeter bridge)を試してみます。
https://cloud.google.com/vpc-service-controls/docs/share-across-perimeters

VPC Service Controlの標準境界の記事はこちら。
https://qiita.com/atsumjp/items/096d101ba60f16b94349

#境界ブリッジがない場合
以下の様に②つの標準境界を作成し、それぞれProdとDevのプロジェクトを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78184/da75ad65-e8ad-35b1-776d-7ec96071963c.png)

この状態で、gsutil cpコマンドでProdプロジェクトのバケットからDevプロジェクトのバケットにファイルをコピーした場合失敗します。

```
$ gsutil cp gs://bucket-a/test.txt gs://bucket-b/
Copying gs://bucket-a/test.txt [Content-Type=text/plain]...
AccessDeniedException: 403 Request is prohibited by organization's policy. vpcServiceControlsUniqueIdentifier: fde60e46b2154e0a
```

#境界ブリッジがある場合
境界ブリッジを作成し、ProdプロジェクトとDevプロジェクトを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78184/be8da232-2832-9e42-546e-1bb5e94df81b.png)

この状態としては、以下のようなイメージになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78184/c1e6bb73-f691-d536-4f7a-647de3c39ba5.png)

この状態で先程のgsutil cpコマンドを実行するとコピーが成功します。

```
$ gsutil cp gs://bucket-a/test.txt gs://bucket-b/
Copying gs://bucket-a/test.txt　[Content-Type=text/plain]...
/ [1 files][  913.0 B/  913.0 B]
Operation completed over 1 objects/913.0 B.
```

VPC Service Controlに直接関係ないけど、プロジェクト跨いでバケット間でデータをコピーするのが、単一ユーザをプロジェクトごとに権限付与する仕組みなため、AWSよりシンプルに感じます

#投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。
VirtualBoxで立ち上げた複数サーバーをnginxで振り分ける

## VirtualBoxでホストオンリー設定を行う。

以下の固定IPアドレスを設定したい

```
VM1: 192.168.56.101
VM2: 192.168.56.102
```

ホストマシンからpingで接続を確認

```
ping 192.168.56.101
ping 192.168.56.102
```

## ホストマシンのIPアドレスを固定する

https://linuxfan.info/ubuntu-1804-desktop-static-ip-address

GUIから簡単に設定できるのでありがたい。
`192.168.100.10`とする。

## nginxをインストール

`sudo apt install -y nginx`

### proxy設定

``` /etc/nginx/sites-available/test.com
upstream test-1 {
    least_conn;
    server 192.168.56.101:443;
}
upstream test-2 {
    least_conn;
    server 192.168.56.102:443;
}

server {
    listen 80;
    listen [::]:80;
    server_name test1.com;

    location / {
        proxy_pass https://test-1;
    }
}

server {
    listen 80;
    listen [::]:80;
    server_name test2.com;

    location / {
        proxy_pass https://test-2;
    }
}
```

### シンボリックリンク貼り付け
`ln -s /etc/nginx/sites-available/test.com /etc/nginx/sites-enabled/test.com`

### 再起動
`sudo nginx -s reload`

### curlで接続確認

```
curl test1.com
curl test2.com
```
GoogleのRaspberry PiのようなCoral：新しいCoral Dev Board Miniと小さなAcceleratorに会う

GoogleはCoralのラインナップを拡大し、2020年の2つの新製品とCoral SoMのメモリオプションを増やしました。

Googleは、Coral Dev Board Miniと、既存のCoralハードウェアラインナップに参加する新しいアクセラレータモジュールを発表しました。これは、開発者がエッジネットワークデバイスでローカルに機械学習モデルを実行できるようにすることを目的としています。

すべてのCoral製品の中核はGoogle Edge TPU ASICであり、149ドルのCoral Dev BoardとCoral USBアクセラレータでデータを処理します。

カメラなどのセンサーに取り付けられたこのデバイスにより、開発者はオブジェクトのソートと識別、手の動きの追跡、顔検出のための製品を構築できます。

重要なのは、このプロセスはすべて、クラウドにデータを送信する必要なく、デバイス上で行われることです。

Googleは10月にCoralのベータ版を廃止し、11月にDebian 10 Busterに基づくMendelオペレーションシステムの新しいバージョンをリリースしました。

新しいCoral Accelerator Moduleは、米国の1セント硬貨よりも小さく、10mm x 15mmです。 このパッケージには、PCIeおよびUSBインターフェイスを公開するEdge TPU ASICが含まれており、開発者がカスタムのプリント基板設計と統合するのに役立ちます。

GoogleはCoral Accelerator ModuleまたはCoral Dev Board Miniの価格を明らかにしていませんが、2020年の前半に両方が利用可能になると述べています。

Googleはまた、Coralシステムオンモジュールのメモリオプションを拡張しました。これは、114ドルでスタンドアロンで購入できる接続可能なコンポーネントです。 SoMには、NXP IMX8M SoCを搭載したGoogleのエッジTPU、Wi-FiおよびBluetooth、メモリ、ストレージが含まれます。

Coral SoMは、以前は1GBのRAMでのみ使用可能でしたが、2GBおよび4GB LPDDR4 RAMで使用可能になりました。

![微信截图_20200108165537.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/94f3f1a5-7933-9c08-6e84-c8f89a6bbe10.png)

> Coral Dev Board Miniは、149ドルのCoral Dev Boardよりも小さく、安価で低電力の兄弟です。

![微信截图_20200108164700.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/6e3d282d-69d3-c5c3-75b2-a8343dbdc3c8.png)

> 新しいCoral Accelerator Moduleは、米国の1セントコインよりも小さいですが、Edge TPU ASICが含まれています。

![unnamed (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/2e5b8361-69ad-f8a2-d698-b6f5efdb637c.jpeg)

> Google Coral 海外代理店 [Gravitylink](https://store.gravitylink.com/global/)

Google Coralシリーズのすべてのハードウェアデバイスが販売されています。（DevBoard, USB Accelerator, Mini PCIe Accelerator, M.2 Accelerator A+E/ B+M key, System-on-Module (SoM)    ）
Multiple targets match implicit dependency for linker flags エラーの解決法

#FirebaseでGoogleSignInを導入したらエラーが発生。

share extensionを使った時も同じようなエラーが出た。

#解決法
###podfileを修正


以下を追加

```
  pod 'GTMSessionFetcher'
```

#解決後

```
# Uncomment the next line to define a global platform for your project
platform :ios, '10.0'
use_frameworks!

def google_utilites
  pod 'GoogleUtilities/AppDelegateSwizzler'
  pod 'GoogleUtilities/Environment'
  pod 'GoogleUtilities/ISASwizzler'
  pod 'GoogleUtilities/Logger'
  pod 'GoogleUtilities/MethodSwizzler'
  pod 'GoogleUtilities/NSData+zlib'
  pod 'GoogleUtilities/Network'
  pod 'GoogleUtilities/Reachability'
  pod 'GoogleUtilities/UserDefaults'
  pod 'GTMSessionFetcher'
end

target 'myApp' do

  google_utilites

  pod 'Firebase/Auth'
  pod 'Firebase/Database'
  pod 'Firebase/Storage'
  pod 'Firebase/Analytics'
  pod 'GoogleSignIn'

end

target 'shareExtension' do

  google_utilites

  pod 'Firebase/Auth'
  pod 'Firebase/Database'
  pod 'Firebase/Storage'
end
```
git HerokuでThe page you were looking for doesn't existが表示されて苦労した

表題の通り　herokuにrailsでデフォルトで作ったものを表示させようとしたところ![herokuで悩む1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587242/50a4fbb8-af38-fc3c-0cd3-79ba1dcc5236.jpeg)

のようなメッセージが表示されgoogleで諸先輩方の軌跡を辿ったところ
index.htmlが必要なのかというのがわかり(それ以外の方法もありそうですが)
とりあえず動かしたい私はrails内にindex.htmlを作成し
config/routes.rbにrootを追加し
git add .
してgit herokuにpushして動いたー！
これだけで数時間かかった
環境を作るのって大変　ネバーギブアップや！　チューとリアル頑張ろうっと