OmniAICreator/Qiita-1.07M huggingface dataset:
一般公開前のEgret3Dを試してみる

# 目的
クローズドβだと思っていたEgret3Dですが、GitHubにリポジトリーがありましたので試してみます。

GitHub Egret3d: https://github.com/egret-labs/egret3d

# インストール

## GitHubへアクセスしてZipアーカイブをダウンロードする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/935216d4-3ef1-ada2-2d81-cf451523b243.png)

## 解凍する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/f29f3174-991f-958d-896a-6f7d5cae1197.png)

# サンプルアプリを試す

## インポートして実行する
Egret Launcerから`egret3d/example/`を**Import Project**します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/251ad382-12e5-251e-8d3d-56c0a9f36355.png)

## Egret Wingから実行(Debug)する

```
Can not find Egret Engine 5.3.1, please install it with Egret Launcher.
```

Engine 5.3.1がないというエラーがでました

5.2までしたパブリックリリースはされていないため、Egret Launcherから直接インストールすることはできません。

## Egret 5.3.xを手動でインストールする

### 5.3.1をGitHubから入手する
https://github.com/egret-labs/egret-core/releases/tag/v5.3.1

### Egret Launcerから手動でインストールする

EngineタブのImport from Localをクリックする

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/95ee11ac-17f3-68c9-8109-deeb5342e9f2.png)

先ほどダウンロードした5.3.1のZipアーカイブを解凍

解凍したフォルダーをEgretLauncherにD&Dする

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/90fb2832-4d98-4ee3-920b-4ce56ebba77d.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/97a86bc0-11ab-191d-5201-eeb0f3da623b.png)

### 5.3.xインストール後にふたたび実行(Debug)する

```
您正在使用白鹭编译器 5.3.1 版本
Compiling the project ...
```
コンパイル完了して起動しました

しかしながら画面は真っ暗

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/fc3c510b-694b-3aa5-fa6f-4302d57c0d9c.png)

コンソールを確認するとリソースが読み込めないというエラーがでています

```
 Failed to load resource: the server responded with a status of 404 (Not Found)
```

[ExamplesプロジェクトのREADME.md](https://github.com/egret-labs/egret3d/tree/master/examples)を確認してみると、Clean&Bake&Runしろと記載していましたので、実行。

```
c:\workspace\egret3d-master\examples>egret clean
您正在使用白鹭编译器 5.3.1 版本
Scan the project list
Total project compiling time: 2.158 second
```

```
c:\workspace\egret3d-master\examples>egret bake
您正在使用白鹭编译器 5.3.1 版本
Total project compiling time: 0.235 second
```

## デモは無事起動

動画はこちらから

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">一般公開されているEgret Engineは2D版のみですが、GitHubからEgret3Dを試せることがわかりました！<br><br>環境を構築してサンプルプロジェクトを試すをQiitaにまとめた＆デモ動画はこちらから<a href="https://t.co/aAka1Z6CgY">https://t.co/aAka1Z6CgY</a> <a href="https://t.co/BcFXZ3V4Pb">pic.twitter.com/BcFXZ3V4Pb</a></p>&mdash; 山田元康@チャリ走社長からHTML5プラットフォームへ (@MotoyasuYamada) <a href="https://twitter.com/MotoyasuYamada/status/1066917769596231680?ref_src=twsrc%5Etfw">2018年11月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
CygwinにおけるGitの脆弱性を回避する方法

# 背景

バージョン管理システム「Git」に任意コード実行の脆弱性、修正版が公開
https://forest.watch.impress.co.jp/docs/news/1146869.html
で紹介されているとおり、Git 2.17.0 には脆弱性があるが、Git 2.17.1のCygwin用のパッケージが一向に降ってこないので最新版をソースコードから入れる。
`(2019-06-10 頃 Cygwin用の git 2.21.0のパッケージも配布されるようになったようです。)`

Git 2.24.0にも脆弱性が発見されたようです。

「Git」に複数の脆弱性、Windowsユーザーはとくに注意
https://forest.watch.impress.co.jp/docs/news/1223826.html


# gettext のインストール
cygwin のインストーラーで
gettextとgettext-develのパッケージをインストールする。

# cURL のインストール
Gitのhttpsの部分はcURLに依存するため
Cygwin のインストーラーで
curl と libcurl-devel と libcurl4のパッケージをインストールする。

# Git 2.27.0 のインストール

## ソースコードの入手
https://github.com/git/git/releases
から
git-2.27.0.tar.gz
を入手し
/usr/local/src
に置く

## ソースを展開

```
cd /usr/local/src
tar xvf ./git-2.27.0.tar.gz
cd git-2.27.0
```


# make

```
make

make install prefix=/usr/local
```

これで /usr/local/bin に Gitがインストールされるはず。

いったんCygwinを抜けて入りなおす。

バージョン番号の確認

```
$ git --version
git version 2.27.0
```

以上
VMwareのubuntu18.04からVMwareのwindows10を名前解決する

VMwareに入れたubuntu18.04(デスクトップ)から
VMwareに入れたWindows10を名前解決するためのメモ

###### etc/nsswitch.confの修正
修正前
`hosts:          files mdns4_minimal [NOTFOUND=return] dns mdns4`

修正後
`hosts:          files wins mdns4_minimal [NOTFOUND=return] dns mdns4`

###### winbindインストール
`$ sudo apt-get install winbind`

###### libnss-winbindインストール
`$ sudo apt-get install libnss-winbind`

`ping システム名`
で応答確認済み
PyTorchの+=は危険。。。！？

#事の経緯
デバッグをしている最中にある変数が不可解な動きをしているのを見つけた

```python
loss = torch.ones(1)*10
a = loss.detach()
print(a)
#return tensor([10.])
loss += 20
print(a)
#return tensor([30.])
```

結果を見て目を丸くした、detach()はデータの安全なコピーだと思っていたが

違うみたいだった。

PyTorchにおけるデータの安全なコピーは
tensor.clone()
だそうです。

```python
loss = torch.ones(1)*10
a = loss
print(a)
#return tensor([10.])
loss = 20 + loss
print(a)
#return tensor([10.])
```

これだと正常に動いた、detach(),.dataでコピーしたデータのコピー元tensorに+=の演算をすると

コピーしたtensorまで変更されてしまうようだ。

##言いたいこと
PyTorchにおいて.detach()と.dataは保存領域共有しているようです。

完全なるデータのコピーを作るには.clone()を使いましょう

また+=はinplaceの計算なので気を使いましょう

変なところで値が動く可能性があります。
Basic認証を掛けた状態でSNSシェアをデバッグする

**2022.06.24**

Apache2.4系の書き方に変更
ヘルスチェック時の許可を追記
## 本題

Basic認証掛かってると
TwitterのCardValidatorとかFacebookのシェアデバッガのクローラがサイトに入れないので
特定のUAを持ってるやつは通過を許可してあげる。
.htaccessに以下を追記する。

```apache

SetEnvIf User-Agent "^facebookexternalhit.*$" crawler_fb
SetEnvIf User-Agent "^facebookplatform.*$" crawler_fb2
SetEnvIf User-Agent "^Twitterbot.*$" crawler_tw

AuthType Basic
AuthGroupfile /dev/null
AuthName "Please enter your ID and password"
AuthUserfile /home/tapioka/.htpasswd
#require valid-user ここはコメントアウト

# ヘルスチェック用ファイルは許可（ロードバランサがアクセス出来るように）
SetEnvIf Request_URI "^/health.html" health

# 以下のいずれかに該当する場合のみアクセスを許可
<RequireAny>
    Require valid-user
    Require env health
    Require env crawler_fb
    Require env crawler_fb2
    Require env crawler_tw
</RequireAny>
```

確かLINEもfacebookexternalhitのUAを持ってたので
FB,TW,LIと対応したのが上記設定。
10年以上運営してるサービスでエンジニア・デザイナーに自由に企画をさせてみた

# やったこと

弊社、オークファンは10年ぐらいサービスを運営してます
新規事業の企画は基本的に企画担当部署が行うのですが、今までは定期的にエンジニアやデザイナーも新規企画の会議に呼んで企画案を練ることがありました
しかし、企画担当部署も　**それ今やるんだっけ！？** 的な案を出すことが増えたため、
社内のwikiに企画投稿用のテンプレートを用意し、いつでも誰でも企画案を出せるようにしてみました

# 結果の考察

+ 過去の負の遺産に対して、**エンジニア／デザイナの矜持として（or 運用工数ばっかで面倒なんで）変えたい（どこまで効果があるかはさておき）** が多い
+ **システム的に弱い部分を潰す**という所に工数を使うものが非常に多い
+ **業務上必須の対応**（利用しているAPIの仕様変更など）

# 数ヶ月運用してみて。。。

実際にサービスを使っているエンジニア・デザイナーが少ないからか、　**サービスをこうしたい！**　というものは少なかった印象です
しかし、逆に言えば、サービスに興味がなく、技術に興味がある人にとってはそれなりに色々と改善できる環境なんじゃないかなと思います
そんな技術的チャレンジの企画タイトルを一部ご紹介

# 技術的チャレンジの企画タイトルを一部ご紹介

+ オフィスネットワークの冗長化
+ ログ保存先のクラウド化
+ 画像サーバのクラウド化
+ dynamic outbound gatewayによるTLSv1.2+/SHA-2対応
+ scss化
+ エラーページ（404など）の再設計
+ packer導入

# 採用募集

そんな感じの技術的チャレンジが出来る弊社です
もし、ご興味あれば、https://twitter.com/gessy0129 までDMお待ちしております！
Angular(ver6~)でlibraryを作る方法

##AngularでLibraryを作る方法

AngularCLIのver6以降からLibraryを作るためのコマンドが追加されました。公式ドキュメントで詳細が書かれていないようですが、Angular CLIを使うことで今まで比較的困難であったAngularのLibraryを簡単に作れるようになりました。

##手順

###1.プロジェクトを作成
まず、普通にAngularアプリを作るのと同じ要領で `ng new` コマンドを使用します。

```terminal
ng new your-app
```

###2.Libraryを作成
`cd your-app`でプロジェクトのルートに移動し、ライブラリを作成します。

```terminal
ng generate library your-library-name
```


ここで `your-app`配下に `projects/your-library`ディレクトリが作られます。このディレクトリがあなたのプロジェクトになります。

<small>※Angular6以降では、`ng new`コマンドで複数のプロジェクトを束ねる単位を作成し、`ng generate library your-lib`コマンドや`ng generate application your-project`コマンドで配下に複数のプロジェクトを作成することができます。
Libraryだけを作りたい場合は`your-app`配下にアプリケーションが無駄に作られてしまうのですが、この辺の適切な運用方法を解説したドキュメントはまだ無いようです。</small>

###3.コンポーネントやディレクティヴを作成(任意)
以下のようなコマンドでライブラリ配下にコンポーネントやディレクティヴ等を作成できます。

```terminal
ng generate component --project=your-library
ng generate directive --project=your-library
```

ディレクティヴやコンポーネントを公開したい場合にはディレクティヴのdeclarationとexport, public_api.tsからexportを忘れずに。

```ts:your-library.module.ts
@NgModule({
  imports: [],
  declarations: [
    YourDirective,   
  ],
  exports: [
    YourDirective,
  ]
})
export class YourLibraryModule {
}

```


```ts:public_api.ts
/*
 * Public API Surface of x-angular-bootstrap
 */
export * from './lib/your-library.module';
export * from './lib/your-directive.directive';

```


###4.ビルド
`your-app`の直下で以下のコマンドでビルドできます。

```terminal
ng build --project=your-library
```

###5.公開
npmを利用する場合

```terminal
cd dist/your-project
npm publish --access=public
```

※npmの利用方法 → [3分でできるnpmモジュール](https://qiita.com/fnobi/items/f6b1574fb9f4518ed520)


###6.注意点
1. 一度公開したプロジェクトを更新した場合、`package.json`のversionを繰り上げる必要があります。npmでは同じバージョンのプロジェクトを二度公開できません。
2. npmのフリーアカウントではプライベートlibraryが作成できないので、`npm publish --access=public` を実行する必要があります。2度目以降の公開では --accessオプションは不要です。
3. 公開したlibraryは `npm install your-library@latest`で最新のバージョンをインストールできます。
4. ライブラリ配下にnpmでパッケージをインストールした場合、あなたのライブラリを利用するプロジェクトの依存関係に影響を与える可能性があります。なのでライブラリ配下でパッケージをインストールする場合、ライブラリ内でパッケージの利用を明示的に許可する必要があります。そのための記述が`ng-package.json`の`whitelistedNonPeerDependencies`オプションです。以下のような記述になります。

```json
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/your-lib",
  "lib": {
    "entryFile": "src/public_api.ts"
  },
  "whitelistedNonPeerDependencies": ["external-library-name"]
}
```
git pull した時間を知りたい

git pull した時間を知りたいことってよくあるのですが、意外と調べても出てこなかったのでメモ
「そんなもん変更されたファイルのタイムスタンプ見ればいいじゃん」ということでみんなわざわざ書いてないのかもしれません
たしかに
```git log --stat```
とでもして変更されたファイルを調べて、そのファイルのタイムスタンプを見れば git pull された時間はわかります
しかし、 pull された後に誰かがいじってるかもしれないし、 pull したときに何もファイルは変更されなかったけど、 pull を実行した時間は知りたいとかいう時もないわけではないし、スクリプトで自動的に取得したいこともあるわけです
そんなときは FETCH_HEAD ファイルのタイムスタンプを見ましょう
```ls -l .git/FETCH_HEAD```
取得した日時をスクリプトで利用するようなときは
```stat -c %Y .git/FETCH_HEAD```
などとしてunixtimestampで取得するのも良いかもしれません
git pull じゃなくて git fetch, git merge, git rebase を使っている場合は FETCH_HEAD は fetch した時間になるので、 merge や rebase した時間を知るためには ORIG_HEAD のタイムスタンプを見たほうが良いようです
```ls -l .git/ORIG_HEAD```
Mac + Slack – 絵文字をOS依存で打つ方法もありますよ ( Control + Commahd + Space )


![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/ef4ff7bb-4e90-fe7f-6997-def146141cc4.png)

[Macで絵文字入力するなら絵文字キーボードのショートカットを覚えておこう | 男子ハック](https://www.danshihack.com/2016/05/21/junp/mac-keyboard-emoji.html)

# 何が良いの？

- 僕の場合 Slack iPhone版で Slack の絵文字テキストが打ちにくいので、OS依存の絵文字を使ってたりする
  - クラウド的に利用法は統一した方が良い。あとから編集する時とか。
- Macの日本語入力で絵文字変換が出てこないことがある。
  - 他の入力ツールもほしい。
- カスタム絵文字やエエリアスを登録しなくて良い。

# 絵文字がうまく使えないとどうなる？

- 無意識のうちに脳が膨大なエラーを起こしてTODOさえ管理できなくなる。状況把握ができなくなる。
- 視認性という重要文化遺産レベルの重要ファクターが損なわれて大事故につながる








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
AWS Lambda とりあえず触ってみた

AWS Lambda を使用します

AWS Lambda で、サーバーのプロビジョニングや管理をせずにコードを実行する方法の基本を学習します。
Lambda 関数を作成、サンプルのイベントデータを使用して手動で Lambda 関数を呼び出す方法と、出力されたメトリクスを確認していきます。

---
###1.Lambda の設計図を選択する###
設計図には、何らかの最小限の処理を行うためのサンプルコードが用意されています。

Lambda を開き、「設計図」 を選択、「hello-world-python」を開き、「設定」。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/aa2b263d-91d7-8459-641f-265c9281a276.png)


以下のように入力し、「関数の作成」をクリック。
[名前]: 「hello-world-python」
[既存のロール]:「lambda_basic_execution」
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/bba85b7e-992c-a993-d815-ce23f1f09475.png)


基本的な Lambda のアクセス権限 (Amazon CloudWatch へのログ記録など) は自動的に付与されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/227b7880-ed3e-0031-e4b9-41b084fff72f.png)


なお、ほかの値はデフォルト値にするので、今回は省略します。



###2.Lambda を呼び出して結果を表示する###

「テスト」をクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/fdba1ed4-1cf2-d12e-1e93-b991ea80ae21.png)

「value1」を「namieamuro」に置き換えます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/9eab2904-0e88-0f06-f796-959a7f4a6bf1.png)

[実行結果]が表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/4ee3b168-b874-3177-f0f1-dce2ce1e79cf.png)


###3.メトリクスをモニタリングする###
Lambda 関数が自動的にモニタリングされ、Amazon CloudWatch によってメトリクスがレポートされます。
コードの実行をモニタリングできるようにするため、Lambda によりリクエスト数、リクエストあたりのレイテンシー、エラーを引き起こしたリクエスト数が自動的に追跡され、関連するメトリクスが発行されます。 

「テスト」を何度かクリックし、「モニタリング」タブを確認してみましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/ba4e265d-abd5-7bd3-6f16-93f45da9f6ae.png)
Cassandra.bat 立ち上げた時にコマンドプロンプトでport already in useエラー (Windows)

Cassandra.bat立ち上げたら、下記エラー。

```
Cassandra port already in use (storage_port:7000) Aborting
```
7000のポートがどうやら使われているっぽいのでkillの方法について。

まずはPIDを取得する。


**netstat -aon |find "ポート番号"**



```
>netstat -aon |find "7000"
TCP  127.0.0.1:7000   0.0.0.0.0 LISTENING 11992←これがPID
```

取得したPID指定でKillする
**/pid killしたいPID**

```
> /pid 11992
成功: PID 11992のプロセスに強制終了のシグナルを送信しました。
```

以上。
2018/11/25 HTML5 Confarence 2018メモ

気になったところ、追いついたところだけ記載します。（自分用）
間違い、認識違い等あると思いますが、メモなのでまさかり投げないでください...

## 「それ、AMPで作りませんか？」--- RichでResponsiveかつ\*\*PWA\*\*なAMPの作り方

- AMPコンポーネント増えてきた
  - before afterの画像で amp-imageつかえるんじゃないかな
    - ビルド直後、ペイント後みたいな
  - コンポーネント集ある
- レスポンシブ
- 一休.comのサイト
  - https://www.ikyu.com/kankou/kyoto/
- Serviceworker使えるしPWA化できるよ
- AMP用のボイラープレートもある
- デメリット
  - url問題。google.com/amp/hogehoge.com
    - singed exchange ドキュメントに署名＆署名元のドメイン表示で作り直します
    - オリジントライアルから全てのサイトに拡大した模様
    - https://www.suzukikenichi.com/blog/google-testing-demo-search-for-signed-http-exchanges/


## HTTPの今と未来　HTTPの基礎から5G試験ネットワークの評価まで

5Gの話

HTTP and 5G fixed1
https://www.slideshare.net/dynamis/httpp-and-5g-fixed1

- HTTP over QUIC → HTTP/3
  - 世界初の実装はLitespeedとFacebook
- HTTP/3が、2019/RFC/TBD

### HTTP/1.1の問題
**HTTPヘッドオブラインブロッキング（HOLブロッキング）**

- 待ち行列の先頭が詰まると以後全部待たされる。
- TCP接続1本あたり1ファイルずつ順次送信
- 表示に関係ない大きなファイルが先にくるとページ描画が遅れる→いわゆるレンダリングが遅くなるいつもの話のやつ
- 同時に6接続行うことで緩和してきたが限度がある
- ハンドシェイクに必要なRTT数（TLS1.2の問題）
- 並列リクエスト数の制限、優先度制御がない など

HTTP/2でHOLブロッキング解消したがTCP接続が1本になり
TCPヘッドオブラインブロッキングの影響を受ける
とは言えサーバー側でのプライオリティ制御、サーバープッシュ等可能になった


TCP高速化のひとつとしての
輻輳（ふくそう）制御アルゴリズム→BBR（Bottleneck Bandwidth and Round-trip propagation time）

今まではパケロス検出で制御していたがネットワーク最適化ポイントではない → RTTの時間変動を観測し最適化する新しい輻輳制御

### QUICとは
HTTP/TLS over TCPをUDP上で再実装することで既存の問題を解消するために作られたプロトコル
→HTTP/2でのTCP HOLブロッキングを解消

- HTTP/2ではTCPパケロスで全てのストリームがブロックされる（再送まで通信とまる）
- QUICではUDPパケロス時も該当ストリームだけブロック（他ストリームでは継続される）

### HTTP/3 （HTTP over QUIC）
- HTTP/2 + TCPでの課題、制限を解消
- TCP HOLブロッキングがなくなる
- LTE、5G、Wifiの切り替えで通信中にIPアドレスが変わっても接続セッション維持可能
（通信状態の切り替わるときによくあるアレ）

等々

- 無線環境は普通にパケロスするので、BBRと相性が悪い。RTTがナチュラルで変動する。
- 有線LAN、無線LAN、5G、それぞれパケロス時の低レイヤーの挙動が全く違う。
- 5Gのエラーでパケロスと誤認識されることがある（TCP的にはRTTが伸びただけのように見えるのかも？）
- 無線レイヤでの再送がTCP/QUICの輻輳制御に干渉している問題

BBRよりCUBICの方が高速だった
なぜか？→輻輳の検出がうまくできてない、5Gとの相性が悪い？再送でHOLブロッキングが頻繁に起きる
無線域の再送でパケロスするとHOLブロッキングで速度低下する

5Gでの試験でHTTP/2のほうが遅いケースもある。
輻輳制御はCUBICよりBBRが遅い傾向
特にHTTP/2でTCP1セッション時のときに。

HTTP/1
無線では単一ファイルより複数ファイルアクセスのmovie、imgのほうが高速

HTTP/1、HTTP/2、5Gそれぞれのプロトコルや輻輳制御別で
有線、無線の平均速度で特徴が出てきた。

5Gの帯域が使い切れていない問題ありそう
まだ未解決部分もあるので5Gに関してはまだこれから


**「ネットワーク技術の変化を知らないWeb開発者ヤバイ」**
みたいですよ。

---
参考
https://www.school.ctc-g.co.jp/columns/nakai2/nakai222.html
https://asnokaze.hatenablog.com/entry/2018/10/31/020215
https://tech.nikkeibp.co.jp/it/atcl/idg/14/481542/082500407/?ST=cm-network&P=1
nvm上でbrewでyarnをインストールしたら

# nvm + yarn したらエラー

## 病状

tmux起動したらこんなメッセージが

```sh
nvm is not compatible with the npm config "prefix" option: currently set to "/usr/local"
Run `npm config delete prefix` or `nvm use --delete-prefix v10.13.0 --silent` to unset it.
```

## 原因

nvmでnodeのバージョン管理を行っている。
そのため、brewでyarnをインストールする場合は、nodeを除外してインストールしなければならない。
node除外のオプションなしでbrew install yarnをするとdependencyであるnode(npm含め)も一緒にインストールされてしまう。
dependencyでインストールされたnodeだけを強制的にアンインストールしてもインストールするとき生成された/usr/local/bin/npmは削除されない。
nvmで使っているnpmより/usr/local/bin/npmを優先してしまうからあんなメッセージが表示される。

## 対応

余計なものを削除する。

```sh
rm /usr/local/bin/npm
```

これで解決！

念の為、node除外オプションなしでインストールしたyarnもアンイストールして再インストールします。
nvmを使っている場合、brewでyarnをインストールするときは--without-nodeを付けましょう。

```sh
brew rmtree yarn
brew install yarn --without-node
```
Visual Studio CodeのPython開発環境を整備する

# 動機
IDEでかっこよくテスト駆動Python開発したい。

# Visual Studio Codeに入れた拡張機能
- [autoDocstring](https://marketplace.visualstudio.com/items?itemName=njpwerner.autodocstring)
- [Emacs Friendly Keymap](https://marketplace.visualstudio.com/items?itemName=lfs.vscode-emacs-friendly)
- [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
- [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
- [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)
- [vscode-pdf](https://marketplace.visualstudio.com/items?itemName=tomoki1207.pdf)

### autoDocstring
「"""」と入力してEnter押したら、いい感じのスニペット出してくれる。

### Emacs Friendly Keymap
派閥がばれる。宗教戦争になるのでこれいじょう何も言わない。

### Git History
これ使わずにVS codeでGitする方法が全くわからない。

### indent-rainbow
自分がどのインデント階層にいるか一目瞭然。

### Python
基本。

### Rainbow CSV
CSVの各カラムが一目瞭然。

### vscode-pdf
VS codeでPDFが見られるようになる。

# 各種設定

設定すると依存性のあるアプリをinstallするか聞かれるので、言われるがままにインストール。

- Linting: Flake8Enabled
- Format On Save
- Formatting Provider: yapf
- Py Test Enabled
- Insert Final New Line
- Editor.rulers

### Linting: Flake8Enabled
Flake8にコードが汚いよって怒らせる。

### Format On Save
ファイルを保存するために自動でフォーマットしてくれる。Flake8に怒られることがちょっと減る。怒らせといて黙らせるスタイル。

### Formatting Provider: yapf
フォーマッターをYAPFに変更。理由はググったらよく出てきたから。

### Py Test Enabled
test_hoge.pyというファイルから自動的にtest_hogehoge関数を見つけてきてassert文を自動テストしてくれる。

### Insert Final New Line
新しいラインをファイルの最後に挿入してくれる。flake8に入ってないよってよく怒られるので自動的にいれてもらう。

### Editor.rulers
80文字のところに縦線をいれる。Flake8対策

# 外部インストールしたもの
- [git](https://git-scm.com/)
- [sqlite3](https://www.sqlite.org/index.html)
Domoへのデータアップロード(Web、SFTP)

# 前置き
「データこれでまとめといてー」と[DOMO](https://www.domo.com/ "Connecting Your Data, Systems & People | Domo")をちょっと使ったので、メモ程度に確認した事項を記載。
研修があったっぽいのですが、タイミング悪くて受けられなかったので独学です。

現時点(2018/11/26)の画面デザインなので、将来的に色々変わっているかもしれないです。

# 概要
ファイルをアップロードして加工してグラフ化してWebなりメールなりで展開できるBIツール。
値段はわかんないけど、そこそこかかる模様？
あんまりBIツール使ったことないけど、使い勝手的には普通な気がする。
比較対象として適切ではないですが、データをゴリゴリまわすんであれば[Treasure Data](https://www.treasuredata.co.jp/ "Arm Treasure Data - データ分析をクラウドで、シンプルに。 - Arm Treasure Data - Treasure Data")のほうが使い勝手は良い感じはしますが。

# TOP画面
![screen0.png](https://qiita-image-store.s3.amazonaws.com/0/280550/c3d58a38-cab1-477e-2092-0eab0b34cf29.png)

あまり使わない。
本来は用意されているダッシュボードやコネクタを探したりするためのスタートの画面っぽい。

# (自分にとっての)メイン機能
![screen1.png](https://qiita-image-store.s3.amazonaws.com/0/280550/8790b5cb-11cf-936c-b6da-641822ba206e.png)

左上のメニューから「DATA CENTER」を選択で、DOMO上のテーブル(DataSet)作成機能の画面へ遷移。
他、DataFlowというデータを加工する機能もここからアクセス。

![screen2.png](https://qiita-image-store.s3.amazonaws.com/0/280550/d9d58fc4-da9e-9f63-6b20-d568c3dae2cd.png)


遷移後、ファイル(↑)的なアイコンを選択でファイルアップロード機能にアクセス可能。
今回は(連携スクリプト書くのめんどくさいので)SFTPとファイルアップロードを利用。

![screen3.png](https://qiita-image-store.s3.amazonaws.com/0/280550/5863741b-88fe-e352-2f86-6acb5378f7da.png)

Excelとかもアップロードできるみたいですね。
API含めて他にも複数コネクタは用意されているので、他にもアップロードしやすい方法があるかもです。

# FileUpload
① Details
適当にファイルを投げ込む
② Select tables
アップロードしたデータを確認しつつ、ヘッダ有無とか文字コード、デリミタ、日付形式を設定
日付形式がジャパニーズ形式(yyyy-MM-dd)が選択できないのが残念。最後に年が付く形式のみ
③ Preview
設定後のテーブルを確認、問題なければ次へ
④ Update Mode
追記か置き換えかを選択できる。
⑤ DataSetに名前を付け、説明を入力
ステップ名の通り。
管理しやすい命名規則の方が良いと思われます。

上記の設定ステップを踏むことで、アップロードができます。
次からはDataSetを選んでアップロードができたはず。

# SFTP
① Generate or Select Key 
SFTPのユーザを作成。あと鍵ファイルを作るか選択
1つのユーザを作ったら、全体でそれを使いまわすとかも可能
② Details
細かい設定。
ヘッダ行とかデリミタ、下の方の無視の行数、エスケープ文字とか区切り文字の設定。
ここでも日付はジャパニーズ形式不可。
③ Update Mode
追記か置き換えかを選択できる。
④ DataSetに名前を付け、説明を入力
FileUploadと同じ。

設定完了後にDataSet一覧から作ったDataSetを選択して「アップロード方法」というメニューからSFTPのホスト、ID、アップロードファイル名の情報が得られます。

あと、原因はわからないのですが、なかなかSFTPでアップロードしても履歴から取り込みが確認できないことがありました。
もしかすると、初回は時間がかかるかもしれないです。

# DataFlow
アップロードで作ったDataSetから加工して新しいDataSetを作る機能。
「テーブル選択(複数可能)→(必要あれば)一時テーブル作成→最終的なクエリからDataSetを生成」の流れ
別機能でETLっていう加工機能もある模様。使ってないのでよくわからん。

# ダッシュボード画面の作成＋カードの作成
カード＝レポートのパネル表示。選択で詳細画面へ遷移できる。
ヘッダ部分の「利用を開始する」とかの列の右端の「＋」を選択することでページを作成。
ページを作成後、画面内に「カードを追加」というドロップダウンからカード追加ができます。
「既存データからの作成」でレポートを作成できます。
ここは勉強中。複雑でよくわからん部分が多い感じ。

ダッシュボード作ったら、PPTでDLしたりスライドショーにしたりメールで送れるようになります。
偉い人へのレポートはこれで省力化できそう。

他、データに変動があったらアラートメールとかも送れる模様。

# 個人的な感想
データを最終的に集める場所としては良さそうなものの、データをゴリゴリ加工するのは弱そうな感じです。
加工クエリの書き方が悪いかもですが。
中間のデータ加工サーバを用意して、そこでDomo用のサマリデータに加工して送出する方が良さそうな気もします。
また、コネクタおよびダッシュボードテンプレートの数は多いものの、うまく使うにはシステム側の構成も考える必要がありそうです。
グラフもやりたいことがうまくできるかは機能理解に掛かっている部分もあり、勉強は必要かな、と。
最低限のグラフ(件数とか割合表示)とレコードの詳細表示は簡単にできるので、エンドユーザ向けのレコード情報提供手段としてはメリットあるかなーという感じです。
vscodeのカスタマイズ設定を晒す

# gist

https://gist.github.com/tkow/cacc941f729a10b8b70733b5487e5ae0

#要点

Macはdefaultのキーボード設定だと、重要なinterisenseのコードが死んでます。
なので、ctrl+mによってsuggestを呼びやすくしています。

```js:keybinding.json
{
  // ...抜粋
  {
      "key": "ctrl+m",
      "command": "-editor.action.toggleTabFocusMode"
  },
  {
      "key": "ctrl+m",
      "command": "editor.action.triggerSuggest",
      "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
  },
  {
      "key": "ctrl+m",
      "command": "toggleSuggestionDetails",
      "when": "suggestWidgetVisible && textInputFocus"
  },
}
```

また、デフォルトの設定ではsubbestion選択のトリガーはEnterを押すと補完が発火します。これを防ぐには、shift+Enterを押す必要があるのですが、これは、改行が入ってしまうため、spaceなどで入力を続行したい場合に煩わしいので、ctrl+Enterでsuggestionをクローズするようにしています。

またVisualStudio風にtab or shift+tabによって、suggestionの移動が出来るように変更しています。

```js:keybinding.json
{
  // ...抜粋
  {
      "key": "shift+tab",
      "command": "selectPrevSuggestion",
      "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
  },
  {
      "key": "tab",
      "command": "selectNextSuggestion",
      "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
  },
  {
      "key": "tab",
      "command": "-acceptSelectedSuggestion",
      "when": "suggestWidgetVisible && textInputFocus"
  },
}
```

これによって、snippetなどの入力決定はすべてEnterで行うことになりますが、実は、デフォルトの設定だとsnippet使用時にtabを使用している場合、subbestionが表示されているとjumpと同時に補完してしまうため、本来入力したかったものと異なる文字入力をされてしまうことがあります。これを防ぐために、先程のctrl+Enterおよび補完による入力確定をした後はtab及び、Enterによるjumpを有効になるため、デフォルトのまま使い勝手を持続する事ができます。

後は好みの問題になりますが、個人的に小指が短く \や[]に押しづらさを感じているので、

```js:keybinding.json
{
  // ...抜粋
  {
    "key": "ctrl+o ctrl+p",
    "command": "editor.action.jumpToBracket",
    "when": "editorTextFocus"
  },
  {
      "key": "ctrl+o ctrl+o",
      "command": "editor.action.selectToBracket"
  },
}
```
などにbracket選択とjumpを設定しています。
また、expand selectionを

```settings.json
{
  {
      "key": "ctrl+shift+cmd+o",
      "command": "bookmarks.expandSelectionToPrevious",
      "when": "editorTextFocus"
  },
  {
      "key": "shift+alt+j",
      "command": "-bookmarks.expandSelectionToPrevious",
      "when": "editorTextFocus"
  },
  {
      "key": "ctrl+cmd+o",
      "command": "bookmarks.expandSelectionToNext",
      "when": "editorTextFocus"
  },
  {
      "key": "shift+alt+l",
      "command": "-bookmarks.expandSelectionToNext",
      "when": "editorTextFocus"
  }
}
```
Function key系は、HHKBだと押しやすいので、特に変更をしていません。

今回は個人的に使っているkeybindの紹介をしました。
なにかおすすめの設定あったら教えてください。
S3にてファイル毎のキャッシュ制御を行いたい

## 操作はこれに従う
この公式に従うとメタデータをアップロードしたデータに追加できます。
→ [S3 オブジェクトにメタデータを追加する方法](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/user-guide/add-object-metadata.html)

## キャッシュの設定
キャッシュのコントロールについては、この辺りを参考

- [キャッシュを制御する](https://developer.mozilla.org/ja/docs/Web/HTTP/Caching#Controlling_caching)
- [Cache-Control
](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control)
bitsrcのチュートリアルやってみた

# bitsrcのチュートリアルやってみた
- https://bitsrc.io/
- yarnを基本的に使っています。適宜npmなどに置き換えてください。

## tutorialプロジェクトをcloneする
```
$ git clone https://github.com/teambit/tutorial-react.git
$ cd tutorial-react
```

## componentを作ってscopeで公開するまで
### 初期化
```
$ cd export-button
$ bit init
```

#### 匿名の利用状況送信をわけも分からずyesにした場合
- bit init時に以下のようなメッセージが出て適当にyesにしてしまった。
`help us prioritize new features and bug fixes by enabling us to collect anonymous statistics about your usage. sharing anonymous usage information is completely voluntary and helps us improve Bit and build a better product.
for more information see analytics documentation - https://docs.bitsrc.io/docs/conf-analytics.html
would you like to help Bit with anonymous usage analytics? [yes(y)/no(n)]:  (yes) y`

- 仕事で使う時に少し気になるので、送信しないようにするときは以下を実行する。

```
$ bit config set anonymous_reporting false
```

### bitsrc へログイン
```
bit login
```
sshの設定とかは以下見ながら頑張る方向で。。
https://docs.bitsrc.io/docs/setup-authentication.html#set-up-bitsrcio-connectivity

### scopeにコンポーネントを追加
```
bit add src/ui/button.js --id ui/button
```

### import react
```
bit import bit.envs/compilers/react -c
```

### ui/buttonをbuild
```
bit build ui/button
```

### componentのバージョンをロック
```
bit tag ui/button
```

### bitsrcの自身のscopeへexportする
```
bit export kubio.example
```

## exportしたcomponentを使う
### import用プロジェクトへ移動＆初期化
```
$ cd ../import-button
$ npm install # or yarn install
```

### レジストリを追加する
```
$ yarn config set @bit:registry https://node.bitsrc.io
```

### exportしたcomponentをプロジェクトに追加する
```
yarn install @bit/kubio.example.ui.button
```

### 追加したcomponentを使う
```shell-session
$ vi src/App.js
```

- 差分

```diff
diff --git a/import-button/src/App.js b/import-button/src/App.js
index 203067e..fd07bbc 100644
--- a/import-button/src/App.js
+++ b/import-button/src/App.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Button from '@bit/kubio.example.ui.button';

 class App extends Component {
   render() {
@@ -13,6 +14,7 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
+        <Button />
       </div>
     );
   }
```

### 実行
```
$ yarn start
```

## 所感
- componentをimportするの良い
- コンポーネント単位で管理できるのでプロジェクトの横展開とかが楽になりそうだと思いました。
- あんまり日本語の記事が見つけられなかった
- 流れはわかったけど、細かいところは今後使ってみて覚えようと思う

## 参考
- https://docs.bitsrc.io/tutorial/react-tutorial.html#in-this-tutorial-youll-learn
Amazon Translate 触ってみた

Amazon Translateを使用して言語間のテキスト翻訳の方法を学習していきます。

東京リージョンでは今のところ対応していません。
Supported Regions
・米国東部 (バージニア北部)
・米国東部 (オハイオ)
・EU (アイルランド)
・米国西部 (オレゴン)

---
Amazon Translate を開き、「Amazon Translate を試す」をクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/2b19aa98-ce34-167e-26e1-d8b0017ad0f8.png)


「Amazon Translate を試す」をクリックし、「英語」→「日本語」にしてみる。
「英語」に文章を入力。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/7322dc77-b51b-d2b6-7912-9b3fad01bd98.png)


JSON samples パネルにおいて、JSON input および output を見ることができます。
AWS CLI または AWS SDK を使用する際、これは、お客様のコードをデバッグするのに有用です。
より詳細に関しては、API または SDK 経由で [TranslateText](https://docs.aws.amazon.com/ja_jp/translate/latest/dg/API_TranslateText.html) のオペレーションを確認してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280929/adc5c639-ae4a-6a88-31c2-b712d0a6679f.png)



感想は普通かな。。。
Mask-RCNN の使い方

次の記事と同じことを、Arch Linux で行ってみました。
[5分でMask-RCNNを試す](https://qiita.com/miyamotok0105/items/ddeca916df9104fb15bb)

ソフトのダウンロード

```bash
git clone https://github.com/spmallick/learnopencv.git
```

mask_rcnn.py は、次のフォルダーにあります。
>learnopencv/Mask-RCNN

README.md の指示に従います。

```bash
wget http://download.tensorflow.org/models/object_detection/mask_rcnn_inception_v2_coco_2018_01_28.tar.gz
tar zxvf mask_rcnn_inception_v2_coco_2018_01_28.tar.gz
```

デモを実行

```bash
python mask_rcnn.py --image=cars.jpg
```

次のファイルが作成されます。
![cars_mask_rcnn_out_py.jpg](https://qiita-image-store.s3.amazonaws.com/0/179446/5fd20745-aaf5-ac4a-cb7d-603dcf7b28ce.jpeg)

こちらにある、フェデラー選手の写真でテスト
[Object Detection and Segmentation in Python with Mask-RCNN](http://bradsliz.com/2017-11-06-object-segmentation/)
![federer.jpg](https://qiita-image-store.s3.amazonaws.com/0/179446/25b9a0ca-c6c0-fef5-bbfc-654d7f362073.jpeg)

```bash
python mask_rcnn.py --image=federer.jpg
```

作成されたファイル
![federer_mask_rcnn_out_py.jpg](https://qiita-image-store.s3.amazonaws.com/0/179446/82a95047-b01b-6848-8e11-abd3f935278d.jpeg)
MySQL5.xで、最大最小のレコードを用いた条件抽出

# Abstract 
例えば、ログ解析とかユーザーのライフタイムを予測するような問題設定を考えた時に、DBに格納されているイベントのcreated_atやupdated_atを用いて、差分を考えたりすることがあると思います。

MySQLの公式を見ると、　
[3.6.4 特定のカラムのグループごとの最大値が格納されている行](https://dev.mysql.com/doc/refman/5.6/ja/example-maximum-column-group-row.html)
というページがあって、最大業者の抽出クエリが紹介されています。

この中で出てくるleft joinを使って、私は今まで最大のレコードを抽出していたのですが、
異なるイベントを紐づけるようなケースで、必ずしも共通のIDが存在しないケース考えた時に少し問題があったのでクエリを考えてみました。いうまでもなく、Window関数とか使えばもっと楽になると思います。

# Query 
異なるイベントを設定するために、event1, event2というテーブルを考えます。
それぞれのテーブルには、user_id, created_atのみが存在するとします。

モチベーションは以下です。
* 両方のイベントに存在するuserを対象にする
* event2の最新created_atが欲しい
* event1はevent2より前のデータだけ欲しい

ユースケースの筆頭は、あるIDの流入から流出までのデータを取得するケースです。

```SQL
SELECT e1.user_id, e1.created_at
FROM event1 AS e1
INNER JOIN (SELECT user_id, 
                   MAX(created_at) AS 'last_date'
            FROM event2 
            GROUP BY user_id
            ) AS e2 
            ON e1.user_id = e2.user_id 
                AND e1.created_at < e2.last_date
;
```

# Details
[SELECT文の評価順序の話](https://qiita.com/suzukito/items/edcd00e680186f2930a8)によると、SELECTの評価順序は以下のようです。

1. FROM
1. ON
1. JOIN
1. WHERE
1. GROUP BY
1. HAVING
1. SELECT
1. DISTINCT
1. ORDER BY
1. TOP（LIMIT)

故に、パフォーマンスを重視せざるをえないデータ量になると、なるべく早い段階で取得するデータ量を削減しておいた方がお得です。left joinでとりあえず結合して、whereで抽出するよりもonで条件を絞った上で、データを取得した方が合理的でしょう。

また、ある任意の期間で抽出する必要がある場合は、onの不等号の部分をbetweenに置き換えれば良いでしょう。
SQLを使う際は、必要なデータをコンパクトにシンプルに、集合論を意識しながらやると良いのかなあと思うところです。
クエリのパフォーマンスに影響しそうな部分はどこだろうと考えて、先にきりわけておくとかも有用に感じます。

今後は、高速化や効率化をするクエリについても調べていきたいです。

# Reference 
* [3.6.4 特定のカラムのグループごとの最大値が格納されている行](https://dev.mysql.com/doc/refman/5.6/ja/example-maximum-column-group-row.html)
* [13.2.10.7 相関サブクエリー](https://dev.mysql.com/doc/refman/5.6/ja/correlated-subqueries.html)
* [SELECT文の評価順序の話](https://qiita.com/suzukito/items/edcd00e680186f2930a8)
* [実例で学ぶ、JOIN (NLJ) が遅くなる理屈と対処法](https://qiita.com/yuku_t/items/208be188eef17699c7a5#%E9%AB%98%E9%80%9F%E5%8C%96%E3%81%8C%E9%9B%A3%E3%81%97%E3%81%84join-sql)
立方体の展開 (1)

[立方体の展開 (1)| three.js](http://labo.project-nya.jp/threejs/develop_cube1/)
[立方体の展開 (2)| three.js](http://labo.project-nya.jp/threejs/develop_cube2/)

Timelineクラス凄いっ！

参考：[TweenJSのTimelineを使ったテキストアニメーション | kudox.jp](http://kudox.jp/java-script/createjs-tweenjs-timeline)
参照：[[CreateJS] トゥイーン (5) ～parallel～ | にゃあプロジェクト](http://blog.project-nya.jp/1736)
RustでWindowsのコマンドプロンプトウィンドウを抑止する方法

　Rust1.18以上でWindows向けのGUIがあるようなプログラムを書く時、コンソール（コマンドプロンプト）ウィンドウを出したくない場合は次のアトリビュートで出さないようにできる。Visual C++で`/SUBSYSTEM:WINDOWS`にするのと同じような効果。

```rust
#![windows_subsystem = "windows"]
```

　ただし、これだけでは標準出力等が表示されなくなってしまうので、`cargo build`のようなデバッグモードではコンソールを有効にして`cargo build --release`のようなリリースモードでは無効にしたい場合は次のようにする。

```rust
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
```
Static methods may only be declared on a type

#過去に出会ったエラーメッセージとその対処方法備忘録
##環境
- XCode
- Swift4.2

##エラーメッセージ
Static methods may only be declared on a type

##エラー発生コード

```
import UIKit

class Test
{

}

public static func hoge() -> String//Error
{
	return "hoge"
}

```

##対処済みコード

```
import UIKit

class Test
{
	public static func hoge() -> String
	{
		return "hoge"
	}
}
```

##原因と対処方法
###原因
クラス定義のスコープ外でクラスメソッドを宣言しようとしているため。
###対処方法
対象となるクラスのスコープ内に移動する。
または、中括弧{}の対応をチェックしてどこかで閉じ括弧が多く記述されていないかチェックする。
閉じ括弧の数が多い場合は、同時に「Extraneous '}' at top level」エラーが発生している。
配列をランダムにシャッフルする関数

[shuffleList | CreateJS](http://labo.project-nya.jp/createjs/shuffleList/)

配列をランダムにシャッフルする関数

```js
////////////////////////////////////////
// 連番配列生成
////////////////////////////////////////
function createList(first, length) {
	var n;
	var list = [];
	for (n = first; n < first+length; n++) {
		list.push(n);
	}
	return list;
}

////////////////////////////////////////
// ランダム配列処理
////////////////////////////////////////
function shuffleList(list) {
	var n = list.length;
	var _list = list.concat();
	while (n--) {
		var i = Math.floor(Math.random()*(n + 1));
		var t = _list[n];
		_list[n] = _list[i];
		_list[i] = t;
	}
	return _list;
}
```
Cannot assign to immutable expression of type '[Int].Type'

#過去に出会ったエラーメッセージとその対処方法備忘録
##環境
- XCode
- Swift4.2

##エラーメッセージ
Cannot assign to immutable expression of type '[Int].Type'

##エラー発生コード

```
let indices[Int] = [0,1,3,0,3,2]
```

##対処済みコード

```
let indices:[Int] = [0,1,3,0,3,2]
```

##原因と対処方法
###原因
今回はコロンの記述漏れによる文法の誤りが原因。
###対処方法
文法の誤りがないか確認し、文法に誤りがある場合正しく修正する。
「サイドバイサイド構成が正しくないため、アプリケーションを開始できませんでした」からの必要なランタイムの調査

#サイドバイサイド構成が正しくないため、アプリケーションを開始できませんでした
評価版ソフトを試そうと思ったら上記エラーで動かなかったので対処まとめ。

#Dependency Walkerのダウンロード
まずは以下のツールを環境に合わせてダウンロード。
http://www.dependencywalker.com/

#Dependency Walkerで使ってるDLLを調べる
Dependency Walkerを起動してexeをドラッグ＆ドロップ。

以下はVisual Studio 2015 Visual C++
![1.png](https://qiita-image-store.s3.amazonaws.com/0/65842/82550922-8e89-8cb8-464d-029fa351a2d6.png)

以下はVisual Studio 2008 Visual C++
![2.png](https://qiita-image-store.s3.amazonaws.com/0/65842/c9dc6eda-c80c-b04b-ca29-26ef26034f88.png)


なお、exe、DLLが32bitか64bitかは↓の方が調べる方法をまとめられています。
[EXE、DLLが32bitなのか64ビットなのか確認する方法@towtow](https://qiita.com/towtow/items/a5c92482cca797456b86)

#ランタイムのダウンロード
使ってるのがわかったらダウンロードしてインストールします。
https://support.microsoft.com/ja-jp/help/2977003/the-latest-supported-visual-c-downloads

VCのDLLは以下のような感じです。
参照元：[Visual C++ ランタイムDLL名に対応する 再頒布可能パッケージの対応表](https://www.ipentec.com/document/visual-studio-c-plus-plus-redistribution-files)

|ランタイムDLL名                                    |DLLが含まれる再頒布可能パッケージ                              |
|:--------------------------------------------------|:--------------------------------------------------------------|
|msvcp50.dll, msvcrt.dll                            |Visual C++ 5.0 再頒布可能パッケージ                            |
|msvcp60.dll, msvcrt.dll, mfc42.dll, comctl32.dll   |Visual C++ 6.0 再頒布可能パッケージ                            |
|msvcr70.dll msvcp70.dll                            |Visual Studio.NET (2002) の Visual C++ 再頒布可能パッケージ        |
|msvcr71.dll msvcp71.dll                            |Visual Studio.NET 2003 の Visual C++ 再頒布可能パッケージ          |
|msvcr80.dll msvcp80.dll                            |Visual Studio 2005 の Visual C++ 再頒布可能パッケージ              |
|msvcr90.dll msvcp90.dll                            |Visual Studio 2008 の Visual C++ 再頒布可能パッケージ              |
|msvcr100.dll msvcp100.dll                          |Visual Studio 2010 の Visual C++ 再頒布可能パッケージ              |
|msvcr110.dll msvcp110.dll                          |Visual Studio 2012 の Visual C++ 再頒布可能パッケージ              |
|msvcr120.dll msvcp120.dll                          |Visual Studio 2013 の Visual C++ 再頒布可能パッケージ              |
|msvcr140.dll msvcp140.dll vcruntime140.dll         |Visual Studio 2015 の Visual C++ 再頒布可能パッケージ              |
|msvcr140.dll msvcp140.dll vcruntime140.dll         |Visual Studio 2015 の Visual C++ 再頒布可能パッケージ              |
|msvcr150.dll msvcp150.dll vcruntime150.dll         |Visual Studio 2017 の Visual C++ 再頒布可能パッケージ              |


#開発者の心得
そもそもこんな手間取らせないように
・必要なランタイムのインストーラーへの組み込み
・インストーラーがでかくなるのが嫌ならReadmeへの明記
ぐらいはしようね。
php-master-changes 2018-11-25

今日は ext/sodium 利用時のエラー修正と不要コード削除、ext/gd の自動 crop 処理の修正があった！

# 2018-11-25
## jedisct1: ext/sodium: Correct base64 decoding with unpadded variants
- https://github.com/php/php-src/commit/542d0bce50b3e728923604a3a0b0bda8df440bb1
- [7.2~]
- ext/sodium で、[sodium_base642bin()](http://php.net/manual/ja/function.sodium-base642bin.php) に SODIUM_BASE64_VARIANT_URLSAFE_NO_PADDING を使った際に Fatal エラーとなる問題の修正
- [pecl 拡張側の修正](https://github.com/jedisct1/libsodium-php/commit/0eee0b957a3b75f8175cdd30b306c15e372685e8)からのバックポート

## jedisct1: ext/sodium: remove redundant code
- https://github.com/php/php-src/commit/ff02d509099b0e3788fe99a48c784f47ca47c61b
- [7.2~]
- ext/sodium で無駄なコードがあったのを削除

## cmb69: Fix [#77198](https://bugs.php.net/bug.php?id=77198): auto cropping has insufficient precision
- https://github.com/php/php-src/commit/b47b8886dd17d080c74c401f7893ba9f4ccb83d3
- [7.2~]
- ext/gd で、自動 crop の精度問題を修正
- 8x8 の白背景データで四隅以外の一箇所だけ黒いピクセルがあるようなデータで、自動 crop をかけると 1x1 の黒ピクセルのみの画像が得られる筈だが、あり得る 60 箇所のどこに黒ピクセルを配置してもそうならなかった
- 処理上の off-by-1 の修正と、gdImageAutoCrop() の最後に crop.x、crop.y が 0 になる時、誤って失敗としていたのを修正している
Mojaveへのアップグレードエラー

## 背景
セキュリティーの面がクリアしたので、Mojaveへのアップグレードしたい。

## エラー
![iOS の画像.jpg](https://qiita-image-store.s3.amazonaws.com/0/37718/a330dcf9-59f0-6438-89a0-4359480e176e.jpeg)

普通にMacOSのアップデートをダウンロードして、アップグレードしようとすると、再起動して、インストールし始めたら、↑のエラーが起きた。

> Start or restart your Mac, then immediately press and hold the Shift key. The Apple logo appears on your display. If you don't see the Apple logo, learn what to do.

[Use safe mode to isolate issues with your Mac \- Apple Support](https://support.apple.com/en-us/HT201262)

一旦セーフモードで入ったので、とりあえず安心、バックアップができる（ちなみに、iColudの5G制限が超えたため、自動バックアップは取ってない）。

## 対策
```
起動する時に、command + option + p + rで長押して、直した！
```

こちらは原因だそうです。↑のコマンドでメモリをリセットできた。

[Mac で NVRAM または PRAM をリセットする \- Apple サポート](https://support.apple.com/ja-jp/HT204063)

ちなみに、Macbook Pro(touchbar)版しか発生しないようです。

## 感想
TouchBarのメリットはあまり感じないなあ！
phpのempty()の挙動メモ

#はじめに
入力がちゃんとされているかなどの確認の際、php関数を使って型の比較や中身を調べると思います。その際に自分が勘違いしていたものがあったのでメモ程度にまとめておきます。

#実際に勘違いしていた挙動
empty()の結果

```php:qiita.php
<?php

$str = "0";
if (empty($str)) {
    echo "空です", PHP_EOL;
} else {
    echo "入力あり", PHP_EOL;
}
```
この場合の出力は`空です`になります。というわけでempty()の場合文字列の0もfalseが返ってきます。
ドキュメントを見たところ下記の場合空であるとみなされるようにです。

* "" (空文字列)
* 0 (整数 の 0)
* 0.0 (浮動小数点数の 0)
* "0" (文字列 の 0)
* NULL
* FALSE
* array()

この時の対処としてisset()を使いました。(これが正しいかは?)

#まとめ
phpの場合empty()のほかにis_null()やisset()などが変数の比較に用いられると思うので各々の挙動を知っておくが大切だなと実感。
関数を使わず自分で比較する際にもbooleanの仕様は重要になってくるのでしっかりとドキュメントを見て確認しておきたいですね。

#参考
PHP 型の比較表
http://php.net/manual/ja/types.comparisons.php
Cannot invoke initializer for type 'CGSize' with an argument list of type '(width: Float, height: Float)'

#過去に出会ったエラーメッセージとその対処方法備忘録
##環境
-Xcode
-Swift 4.2
##エラーメッセージ
Cannot invoke initializer for type 'CGSize' with an argument list of type '(width: Float, height: Float)'
##エラー発生コード

```
let length:Float = 1.0
let size = CGSize(width: length, height: length))//Error
```

##対処済みコード

```
let length:CGFloat = 1.0//Edit
let size = CGSize(width: length, height: length))
```

##原因と対処方法
###原因
CGSizeはFloat型の変数を受け取るイニシャライザが存在しないために発生する。
###対処方法
CGSizeのイニシャライザには、Double、CGFloat、Intを受け取るイニシャライザが存在するようなので、今回はCGFloatでの初期化を選択した。
EC2インスタンスを特定の時間に起動・停止

ECSで起動しているEC2インスタンスを停止すると、AutoScalingGroupに所属しているので、勝手に次のインスタンスが立ち上がる。
なのでECSで起動しているEC2インスタンスを特定の時間に起動・停止したい場合には、AutoScalingGroupの希望するインスタンス数を変更することで対応した。

以下は、通常のEC2インスタンスを特定の時間に起動・停止する方法と、AutoScalingGroup内のEC2インスタンスを特定の時間に起動・停止する方法

# EC2インスタンスを特定の時間に停止・起動

## IAM

### ポリシー

ポリシー > ポリシーの作成

- JSON

~~~
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "ec2:StartInstances",
                "ec2:StopInstances",
                "ec2:DescribeInstances"
            ],
            "Resource": "*"
        }
    ]
}
~~~

- ポリシー名: ec2-start-stop-policy (任意)

### ロール

ロール > ロールの作成

- 信頼されたエンティティの種類を選択
  - AWSサービス
- このロールを使用するサービスを選択
  - Lambda
- Attach アクセス権限ポリシー
  - ec2-start-stop-policy
- 確認
  - ロール名: ec2-start-stop-role (任意)

## Lambda

### ec2-start-instances

関数 > 関数の作成

- 名前: ec2-start-instances
- ランタイム: Node.js 6.10
- ロール: ec2-start-stop-role
- 関数コード

~~~index.js
const INSTANCE_IDS = [
        'i-05b9670c7db7*****', /** ここに対象のインスタンスIDを指定 */
        'i-06abe8322085*****',
        'i-0e93b1488b10*****'
    ];

var AWS = require('aws-sdk'); 
AWS.config.region = 'ap-northeast-1';

function ec2Start(cb){
    var ec2 = new AWS.EC2();
    var params = {
        InstanceIds: INSTANCE_IDS
    };

    ec2.startInstances(params, function(err, data) {
        if (!!err) {
            console.log(err, err.stack);
        } else {
            console.log(data);
            cb();
        }
    });
}
exports.handler = function(event, context) {
    console.log('start');
    ec2Start(function() {
        context.done(null, 'Started Instance');
    });
};
~~~

### ec2-stop-instances

関数 > 関数の作成

- 名前: ec2-stop-instances
- ランタイム: Node.js 6.10
- ロール: ec2-start-stop-role
- 関数コード

~~~index.js
const INSTANCE_IDS = [
        'i-05b9670c7db7*****', /** ここに対象のインスタンスIDを指定 */
        'i-06abe8322085*****',
        'i-0e93b1488b10*****'
    ];

var AWS = require('aws-sdk'); 
AWS.config.region = 'ap-northeast-1';

function ec2Stop(cb){
    var ec2 = new AWS.EC2();
    var params = {
        InstanceIds: INSTANCE_IDS
    };

    ec2.stopInstances(params, function(err, data) {
        if (!!err) {
            console.log(err, err.stack);
        } else {
            console.log(data);
            cb();
        }
    });
}
exports.handler = function(event, context) {
    console.log('start');
    ec2Stop(function() {
        context.done(null, 'Stoped Instance');
    });
};
~~~

## CloudWatch

### 月曜から金曜の日本時間午後9時に、EC2インスタンスを停止

CloudWatch > ルール > ルールの作成

- イベントソース
  - Cron式: `0 12 ? * MON-FRI *`
- ターゲット
  - Lambda関数: ec2-stop-instances

### 月曜から金曜の日本時間午前8時に、EC2インスタンスを起動

CloudWatch > ルール > ルールの作成

- イベントソース
  - Cron式: `0 23 ? * SUN-THU *`
- ターゲット
  - Lambda関数: ec2-start-instances

# AutoScalingGroup内のEC2インスタンスを特定の時間に停止・起動

## EC2

Auto Scaling グループ > (対象グループ) > スケジュールされたアクション > 予定アクションの作成

### 月曜から金曜の日本時間午後9時に、AutoScalingGroup内のEC2インスタンスを停止

- 名前: stop-ecs-cluster (任意)
- 希望するキャパシティ: 0
- 繰り返し: Cron: `0 12 * * MON-FRI`

### 月曜から金曜の日本時間午前8時に、AutoScalingGroup内のEC2インスタンスを起動

- 名前: start-ecs-cluster (任意)
- 希望するキャパシティ: 1 (立ち上げたい数)
- 繰り返し: Cron: `0 23 * * SUN-THU`
RSpec初心者のための効率の良い学習法

RSpecを書けるようになりたいけど、どのように勉強したらいいかわからないという方はいらっしゃいますか？
僕自身もつい最近まではその1人でしたが、色々と試行錯誤して初心者からは抜け出すことはできたかなと思っています。
そこで試行錯誤した経験を元にどのように学んだら効率よく身に付けることができるのか、僕がやって良かった方法をシェアします。

## テストを書くときに意識すること
まずRSpecを使う前提として何をテストとして書けばよいのか理解、イメージしておく必要があります。具体的にどのような内容をテストすればよいかはここでは書きませんが、書籍などを使って「そもそもテストとは？」みたいなことを勉強しておくとRSpecについても理解しやすいです。

その上でRSpecを書く際に意識することは以下です。

1. テストしたい内容がテストできていること
  - 読みにくくても、遅くても、テストコードがないよりはテストコードがある方がよいです。
2. 読みやすいこと
  - コメントの内容がわかりやすい
  - 適切な粒度でdescribeで分割する
  - 適度にDRYにする
  - 大きすぎるファイルは分割する
3. テストの実行速度が速いこと
 - インスタンス生成とDBへの保存(Factory_botのbuildとcreate)を使い分ける

基本的には適切な粒度でコメントが分かりやすければいいと思います。
分かりやすいコメントになっているかの確認は、後述するdocumentation オプションを使うと良いです。

## 学習法

1. 伊藤淳一さんの記事「[使えるRSpec入門](https://qiita.com/jnchito/items/42193d066bd61c740612)」を読む
2. [Everyday Rails - RSpecによるRailsテスト入門](https://leanpub.com/everydayrailsrspec-jp)を読む
3. 伊藤淳一さんの記事「[使えるRSpec入門](https://qiita.com/jnchito/items/42193d066bd61c740612)」を参考にしながらテストを書く

Everyday Railsは翻訳者の1人が伊藤淳一さんです。伊藤淳一さん様様ですね。本当にありがとうございます。
使えるRSpecとEverydayは保管関係にあり、両方を読むことで更に理解が深まります。
慣れてきたら「使えるRSpec入門」とリファレンスを見ながら書いていけばいいと思います。

### Everydayの読む順番
途中から拾い読みしても理解できるように作られているので、気になった所を読む、でも全然問題ないです。
おすすめの順番は以下です。
1. まえがき
2. 目次
3. 最後のアドバイス
4. あとがき
5. 気になった章

## リファレンスサイト

[公式ドキュメント「Relish RSpec-Rails」](https://relishapp.com/rspec/rspec-rails/docs)
※RSpecはRuby向けのBDDツールのため、Rails以外でも使用することができます。ドキュメントは[こちら(Relish)](https://relishapp.com/rspec)


## よく使うオプション

```rb
# 失敗したテストだけ再実行
--only-failures
# ドキュメンテーションコメント(describe, context, itのコメント)をコンソールに出力する
--format documentation
```


## 「RSpec難しい！」ってなったら

僕は書き始めたころになりました。
そんな時は一旦全てコメントとして何をテストしたいのか書いてしまうのがよいです。

```spec/model/user_spec.rb
# Userモデルのテスト
# バリデーション
# nameは必須である
# nameは一意である
```
こんな感じにすると、
「nameは必須だから、nameに値がある場合と値がない場合のテストが必要だな。」
「一意のテストためには事前にデータを登録しておかないとだな。」
「そういえば、nameにmax_length付けた方がいいかな？」
と考えるためのきっかけになります。
RSpecに慣れるまでは、①テストについて考える、②それをRSpecでどのように表現するか考える、のように問題を分割して考えることをおすすめします。


## まとめ

1. テストについて理解する
2. RSpecについて知る
3. 1.2.を元に実践する

## 【参考】テストが動かないとき

- [x]  必要なGemがインストールされているか確認する
- [x]  database.ymlのテストブロックにDB接続情報が書いてあるか確認する
- [x]  db:migrate --test
Google Docs や GMailでログインユーザーを切り替える手間をなくす

# なぜ

業務で G-Suites つかっているので、よく google docs つかうのですが、google アカウントは個人でもつかってるので、同時に使うことが多いんですよね。

以前は、ページを開いた後に右上のこいつをクリックして毎回切り替えていたわけですが、まぁストレス

<img width="156" alt="スクリーンショット 2018-11-26 9.07.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/54261/7f0382dd-bd18-99c1-6cd1-72bea392055c.png">

# 解決

## URLにユーザー番号がついている

GmailやDocsのURL

```
https://mail.google.com/mail/u/0/#inbox
```

よくみると ```/u/0/``` って入ってます

これを

```
https://mail.google.com/mail/u/1/#inbox
```

にすると、ユーザーが切り替わります。（どうやらログイン情報を保存した順番に番号がふられる模様）

### ユーザーごとにブクマする

なので、ログインユーザーごとにブックマークすることでログインの手間が減りました。
fish shellの設定変更に関するTips

### 間違えて環境変数のリストに登録をしてしまった場合

環境変数のリストから対象のパスを削除
```set PATH (string match -v /path/to/dir $PATH)
```

設定変更をしたら以下で適用
```source ~/.config/fish/config.fish
```
chip8 アセンブラ　命令セット

#chip8 アセンブラ　命令セット


#転送命令

```
CLS					dispクリア
DRW Vx, Vy, nibble	Vx, Vy <- sprite
LD Vx, byte			Vx <- byte
LD Vx, Vy			Vx <- Vy
LD I, addr			I <- addr 
LD Vx, DT			Vx <- delay timer
LD Vx, K			Vx <- Key
LD DT, Vx			delay timer <- Vx
LD ST, Vx			sound timer <- Vx
LD F, Vx			memory[I..] <- sprite
LD B, Vx			memory[I..] <- BCD(Vx)
LD [I], Vx			memory[I0:Ix] <- V0:Vx
LD Vx, [I]			V0:Vx <- memory[I0:Ix]
```

#ビット操作命令

```
OR Vx, Vy			Vx <- Vx or Vy
AND Vx, Vy			Vx <- Vx and Vy
XOR Vx, Vy			Vx <- Vx xor Vy
SHR Vx, Vy		Vx <- Vx >> Vy
SHL Vx, Vy		Vx <- Vx << Vy
```

#算術命令

```
ADD Vx, byte		Vx <- Vx + byte
ADD Vx, Vy			Vx <- Vx + Vy
ADD I, Vx			I <- I + Vy
SUB Vx, Vy			Vx <- Vx - Vy
SUBN Vx, Vy			Vx <- Vy - Vx
RND Vx, byte		Vx <- rnd(byte)
```

#分岐命令

```
RET					pc <- stack
SYS addr			pc <- addr
JP addr				pc <- addr
JP V0, addr			pc <- V0 + addr
CALL addr			stack <- pc, pc <- addr
SE Vx, byte			if (Vx == byte) pc += 2
SE Vx, Vy			if (Vx == Vy) pc += 2
SNE Vx, byte		if (Vx != byte) pc += 2
SNE Vx, Vy			if (Vx != Vy) pc += 2
SKP Vx				if (key(Vx) == 1) pc += 2
SKNP Vx				if (key(Vx) != 1) pc += 2
```

#補足
命令長は、2バイト。固定。
レジスタは、V0からVFの16個で、8bit
VFレジスタは、算術演算命令実行時のキャリーフラグ
スタックは、16個。
アドレスレジスタとして、Iレジスタで12ビット
プログラムは、アドレス0200h番地から実行
出力は、64×32ピクセルのグラフィック機能
4×5ピクセルのフォントパターンを内蔵しています。（0-F）
入力は、キー、16個あります。
2つの8ビットタイマがあります。
一つはディレイタイマ、もう一つはサウンドタイマと呼ばれます。

以上。
acer e4w charge usb 検証

acer e4w　というアクティブシャッター３Dグラスを買ったがどうも充電規格が特殊で平型８ピンUSBの単純な充電用ではないケーブルを使用しているようなので、サンハヤト USB用変換基板 CK-39を購入し検証してみた
https://www.amazon.co.jp/%E3%82%B5%E3%83%B3%E3%83%8F%E3%83%A4%E3%83%88-CK-39-USB%E7%94%A8%E5%A4%89%E6%8F%9B%E5%9F%BA%E6%9D%BF/dp/B00J7LCRY0

結論
3pin D+とＧＮＤをプラスマイナス逆につけると充電されるっぽい



![DSC_0005.JPG](https://qiita-image-store.s3.amazonaws.com/0/310991/dcfe65ba-b3a6-c7f6-fabc-36b58b02b8df.jpeg)
![DSC_0006.JPG](https://qiita-image-store.s3.amazonaws.com/0/310991/01f80542-b8d0-91a1-76dd-f0f6b5d673ed.jpeg)

![DSC_0009.JPG](https://qiita-image-store.s3.amazonaws.com/0/310991/fa7a2d69-6bc6-aff9-12b5-28ca3037d153.jpeg)

通電確認！
![DSC_0007.JPG](https://qiita-image-store.s3.amazonaws.com/0/310991/78ff84c9-dc51-111f-8a05-282a7ac26542.jpeg)
![DSC_0008.JPG](https://qiita-image-store.s3.amazonaws.com/0/310991/0a2bfdda-b8a2-dee6-b317-dc9bbfa119cd.jpeg)

平型８ピンってなに？デジカメとかであるらしいけどピンに部分見てみるとどのメーカーも微妙い違うし仕様がネットじゃみあたらない
海外規格？とりあえず入手性も検証性もめちゃくちゃ悪い規格である。
ボタン電池のやつ買ったほうが無難ですな
Animate.cssで遊んでみた

こんにちは、[きなこ](https://twitter.com/AsukaOkochi)です。
この記事はOthloTech Advent Calendar 2018の7日目の記事です．

今回は[Animate.css](https://daneden.github.io/animate.css/)を使っていろいろ遊んでみたいと思います。

## Animate.cssとは
Animate.cssとはdivなどの要素にあらかじめ用意されたクラスを設定するだけでアニメーションを適用させることが出来るスタイルシートです。

### 🍮プリンをぷるぷるさせる
<p data-height="323" data-theme-id="0" data-slug-hash="wQZPrW" data-default-tab="css,result" data-user="asukaokochi" data-pen-title="Animate.cssで遊んでみた" class="codepen">See the Pen <a href="https://codepen.io/asukaokochi/pen/wQZPrW/">Animate.cssで遊んでみた</a> by asuka (<a href="https://codepen.io/asukaokochi">@asukaokochi</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
プリンをぷるぷるとさせてみました。
ただの台形がちゃんとプリンに見えるようになりました。

### 🚦信号を点滅させる
<p data-height="329" data-theme-id="0" data-slug-hash="dQBPrG" data-default-tab="css,result" data-user="asukaokochi" data-pen-title="Animate.cssで遊んでみた - 信号機" class="codepen">See the Pen <a href="https://codepen.io/asukaokochi/pen/dQBPrG/">Animate.cssで遊んでみた - 信号機</a> by asuka (<a href="https://codepen.io/asukaokochi">@asukaokochi</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
青い部分にanimate.cssを適用させて信号をパカパカと点滅させてみました。
なんでも使えますね。

### 🚗車をたくさん走らせる
<p data-height="265" data-theme-id="0" data-slug-hash="mQYxZy" data-default-tab="css,result" data-user="asukaokochi" data-pen-title="mQYxZy" class="codepen">See the Pen <a href="https://codepen.io/asukaokochi/pen/mQYxZy/">mQYxZy</a> by asuka (<a href="https://codepen.io/asukaokochi">@asukaokochi</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
かわいい〜！

## 感想
いかがでしたか？使い方次第でいろんな活用方法があると実感しました。

クラスを設定するだけで簡単に実装できるので、ぜひ皆さんも使ってみてください。
それでは、良いCSSライフを！