OmniAICreator/Qiita-1.07M huggingface dataset:
FuelPHPでDBのコネクションを取得する方法

DBのコネクションの確認をしたと思って試してみました。

DBクラスの**instance()**メソッドが使用できます。

http://fuelphp.jp/docs/1.9/classes/database/db.html#/method_instance

> instance メソッドは Database_Connection のインスタンスを返します。 例えば同時に複数のデータベース接続を使用する必要がある場合など、 データベースインスタンスに直接アクセスすることができます。

```
// デフォルトの接続を取得
$db = DB::instance(); // or 'default'

// 名前を指定して接続を取得
$db = DB::instance('backup');
```

```
// 出力結果

object(Database_MySQLi_Connection)#26 (10) {
  ["_connection":protected]=>
  object(mysqli)#31 (19) {
    ["affected_rows"]=>
    int(1)
    ["client_info"]=>
    string(79) "mysqlnd 5.0.12-dev - 20150407 - $Id: b39695XXX2d1d9ed7902b8bae237XXXXXXXX $"
    ["client_version"]=>
    int(50012)
    ["connect_errno"]=>
    int(0)
    ["connect_error"]=>
    NULL
    ["errno"]=>
    int(0)
    ["error"]=>
    string(0) ""
    ["error_list"]=>
    array(0) {
    }
    ["field_count"]=>
    int(0)
    ["host_info"]=>
    string(25) "Localhost via UNIX socket"
    ["info"]=>
    NULL
    ["insert_id"]=>
    int(4272)
    ["server_info"]=>
    string(6) "5.6"
    ["server_version"]=>
    int(50635)
    ["stat"]=>
    string(136) "Uptime: 8192  Threads: 3  Questions: 1040  Slow queries: 0  Opens: 311  Flush tables: 1  Open tables: 304  Queries per second avg: 0.126"
    ["sqlstate"]=>
    string(5) "00000"
    ["protocol_version"]=>
    int(10)
    ["thread_id"]=>
    int(24)
    ["warning_count"]=>
    int(0)
  }
  ["_connection_id":protected]=>
  string(40) "2c02b1be7ed4e8b313b2df2afXXXXXXXXXXX"
  ["_identifier":protected]=>
  string(1) "`"
  ["_db_type"]=>
  string(5) "mysql"
  ["last_query"]=>
  string(294) "INSERT INTO user mask...XXXXXX"
  :
  :
  {省略}
```

中を見てみると、このインスタンスに**last_query()**用のクエリ文字列も持っているようですね！
CustomCellで部分的にタップイベントが取れない


##
CustomCellタップ時に画面遷移するtableView作ってたらtextViewタップ時だけイベントが取れなかった時のメモ。
##やったこと
labelの下にtextViewをおいたCustomCellをTableViewに表示した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/747532f3-bcb8-0efd-cbf5-93630d0d9ac7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/db35a828-6cf0-b912-3187-fda5b9e26295.png)

##発生した問題
#####①textViewタップ時イベントが発生しない。
#####②cell内labelt、空欄をタップ(選択)時、イベントは発生するがtextViewの色だけ変わらない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/cc723cdb-59da-5072-d657-6e43ea3709c2.png)



##発生した問題①の原因
textViewの userInteraction Enabled がtrueになっていた。
この設定があるとタップイベントを拾ってしまう。
親の部品のタップイベントを拾わせるにはfalseにする必要があった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/5818d646-a1e8-1a84-d252-0100276c9fd5.png)

##発生した問題②の原因
textViewの背景色がwhiteに設定されていた。

##解決後

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/878392f9-b635-2801-27ea-031548adf756.png)
TypeScriptについて

# TypeScript とは


2014年ごろにMicrosoftによって開発・発表されたプログラミング言語です。
JavaScriptを拡張して作られており、静的型付けのクラスベースオブジェクト指向言語になっています。

TypeScriptをコンパイルすると、JavaScriptのコードに変換されるためJavaScriptが動く環境であればすぐに使うことができます。
JavaScriptのライブラリなども使用することができます。

2017年には**Google**社内の標準言語としてTypeScriptが承認される
つまりは世界の先生が認めた言語になり将来性があるという事です。


# TypeScript だと何ができるの

基本的に**ECMAScript 6**で出来るようクラス、アロー演算子、オプション引数、デフォルト引数などなどの機能は一通りそろっています。
さらに言語拡張として以下の機能が存在している
- 型注釈（変数、引数、戻り値などの型宣言）とコンパイル時の型チェック
- 型推論、型ガード - if文の instanceof などを利用した型推論
- インタフェース
- 列挙型
- Mixin
- ジェネリック
- 名前空間
- タプル型
- 共用体型, 交差型（英語版）
- 型エイリアス

　引用　Wikipediaより

つまり一言で表すと **JavaScriptの進化系！！！**   だと言いたい・・


#TypeScriptのメリット
個人的に感じるTypeScript のメリットですが
##1.エラーの事前検知
JavaScriptはご存じの通りスクリプト言語になります。そのためコードに不備があっても実行時まで気づくことができません。
TypeScriptはコンパイル言語になります。TypeScriptをコンパイルしてJavaScriptに変更して実行しています。
そのためコード不備などは事前に検知することができます。

JavaScriptあるあるだと思いますが、型定義がないため実行してみたら想定外の結果が返却されることも
TypeScriptでは事前に検知できます

・JavaScript 

```js
calcPlus(let val1, let val2) {
  return val1 + val2;
}

console.log(calcPlus("1","3"))

```

実行結果は"13"と文字列が結合されて出力されてしまいます。

一方TypeScriptでは

・TypeScript

```ts
calcPlus(let val1:number, let val2:number):number {
  return val1 + val2;
}

console.log(calcPlus("1","3"))
```

と記載するとコンパイルエラーが発生し実行ができません。
関数が複雑化すればするほど、どこで何の型を使っているか不明になります。そのため型不正等で事前に検知できるのはホントにありがたい。


##2.型があるためソースの可読性が上がる
人が書いたJavaScriptを読んでると以下の様な経験ありませんか？
・ここのオブジェクト何が入っているの？
・関数からなんかオブジェクト返ってくるんだけど中身に何が入っているか分からない。結局中身のソースを解析しないとその関数使えない
・いつの間にか知らないプロパティが追加されてるんだけど・・・

などなど、型がない分やりたい放題できます。
自分だけで書いてる分には楽でいいんですが、プロジェクトなどで複数人で記載すると。
いやーカオスカオス。~~脳内で何人、人を刺したかw~~
Javaなどの静的型付けの言語はまだ最低限中身に何が入っているか分かるから読みやすいが、
オブジェクトの中身が分からないと結局ソースコードを追わないとソースが書けない。そのため工数がかかるって悪循環・・・


その分TypeScriptは型を宣言できるので圧倒的にソースコードの解析速度が速い。
って言うのが個人的に感じたメリットです


any？なにそれ？おいしいの？~~使うやつは死ねばいいのに~~


#TypeScriptのデメリット
・開発者の少なさ
　新しい技術って言うこともあり経験者が圧倒的に少ないです。
　いつの時代も新しい技術は開発者が足りないです。

・型がある事の弊害
　フロントエンド開発が長ければ長いほどこの弊害がでかいです。最初は型が煩わしく感じることが多いかと思います。
　自分はJavaエンジニアなのであまり違和感なく入れましたが、人によってはここに違和感を感じることでしょう。

#JavaScriptとの互換性
上記でも記載しましたが、TypeScriptはコンパイルをするとJavaScriptが生成されます。
そのため、JavaScriptの相性は抜群です。てかコンパイル後同じ言語になりますからね。
普通にJavaScriptのライブラリも使用できます。

#フレームワーク
昨今JavaScriptフレームワークがどんどん出てきていますが、有名なフレームワークである[Angular.js]、[Vue.js]、[React.js]などのフレームワークでの開発ができます

#最後に
googleでも正式に採用されていますし、今後どんどん採用される企業が出てくると思います。
フロントエンドの需要が高まっている今だからこそこう言う技術をどんどんと取り入れたいですね
クリップボード管理の CopyLess2 でDX爆上げ(Mac)

# CopyLess2 (Mac Only) とは
[公式](https://copyless.net/) / [AppStore](https://apps.apple.com/jp/app/copyless-2/id993841014?mt=12)
`より少ないコピーで ヽ もっと貼り付け ◯`

日本語訳は怪しいものの、
**極めて非常にめちゃくちゃ最高に有用な**クリップボード管理ツールです。


## CopyLess2 を使う背景

[Clipy](https://clipy-app.com/) では少し機能不足を感じる
しかし、 Clipboard 機能のためだけに Alfred 買うのはオーバースペック感ある

→ CopyLess2 が便利だよ、と教えてもらった。なにこれ便利！

## 機能ピックアップ
### クリップボード履歴が見られる
当然求められる機能です
画像もプレビューされます

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545251/aed0293d-83ee-67ee-cb53-15eeb2d8487f.png"/>

### クリップボード履歴から検索できる
テキスト検索できます
今日時点の Clipy にはない機能ですね

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545251/61d8ffdb-8d29-a2a9-dd66-1d7061784cad.png"/>


### お気に入り(スニペット)
履歴からお気に入りに追加することができます
さっそく、Qiitaでよく使いそうな `<img width="300" src=""/>` を登録しました

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545251/06539b46-adca-bccd-db6f-1c783685aa1d.png"/>

通常の履歴と、お気に入りのタブがあるのですが、
ショートカットキーで切り替えられないのが少し不満。
検索機能をうまく使うしかないか

### 履歴から直接貼り付け
これがないと始まらないってくらいのコア機能。
[公式](https://copyless.net/) の `DIRECT PASTE` から追加モジュールの `CopyLess Helper` をインストールします
履歴を選択すると、アクティブなウィンドウに即ペーストできるようになります

### 連続コピー・貼り付け
まだ使いこんでいませんが、
1>2>3 とコピーした後に 1>2>3 と貼り付けできる機能のようです。

## 設定例

CopyLess2 を開くのはなにかをペーストしたいときなので、
`Command + Shift + V` で直感的に開けるようにしました。

選択した履歴を `Enter` ですぐに貼り付けることができるようにしています。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545251/b0ec12d2-71ce-233a-9d87-94d0847bc74a.png"/>

`アクティブモニターにオープン` しないと、マルチディスプレイのときに困ります
`直接貼付け後、ウィンドウを閉じる` も使うことにしました

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545251/e49efee1-50ca-7f80-1de2-8b6d735e6ff8.png"/>


## プロ版(2020/01/17時点)
860円で以下ができるようです

- iCloud アカウント間で共有
- 履歴数拡張
- お気に入り数無制限

お手頃だし、この先とてもお世話になりそうなのでお布施的な意味もこめて買い
Nginx経由でRailsをAWS環境で起動できないエラー時にまず確かめたいこと、使えるコマンド。

表題の内容に関して、チェックすべきポイントを
備忘録として以下に記す。

###そもそもURLは正しいか？
Nginx導入の際に、unicorn.rb内の記述を変更していると思うので、
改めてブラウザからElastic IPでアクセスしてみる。

###データベースは起動しているか？
Mysql使用時は以下を実行して確認。

```ターミナル:ターミナル
[ec2-user@ip-XXX-XX-XX-XXX <リポジトリ名>] ＄ sudo service mysqld start
#上記実行後running...と表示されていればOK
```
###Railsは起動しているか？
unicorn使用時には以下を実行して確認。

```ターミナル:ターミナル
[ec2-user@ip-XXX-XX-XX-XXX <リポジトリ名>] $ bundle exec unicorn_rails -c config/unicorn.rb -E production -D　#エラー文が表示されなければOK

master failed to start, check stderr log for details #このようなエラー文がでた場合は以下を実行して詳細を確認する。

[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ less log/unicorn.stderr.log #実行すると上から古い順にエラーのログが表示されるので、原因を探す。

I, [2016-12-21T04:01:19.135154 #18813]  INFO -- : Refreshing Gem list
I, [2016-12-21T04:01:20.732521 #18813]  INFO -- : listening on addr=0.0.0.0:3000 fd=10
E, [2016-12-21T04:01:20.734067 #18813] ERROR -- : Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)　　#このようにエラーの履歴がいくつか表示されるので、未解決のものを下から潰していく
/home/ec2-user/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/activerecord-5.0.0.1/lib/active_record/connection_adapters/mysql2_adapter.rb:29:in `rescue in mysql2_connection'
/home/ec2-user/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/activerecord-5.0.0.1/lib/active_record/connection_adapters/mysql2_adapter.rb:12:in `mysql2_connection'
#以下略
```

###unicornのプロセスは停止されているか？
まず以下を実行してunicornのプロセスを確認。

```ターミナル:ターミナル
[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ ps aux | grep unicorn #左記を実行すると以下にプロセスが表示される。

ec2-user 17877  0.4 18.1 588472 182840 ?       Sl   01:55   0:02 unicorn_rails master -c config/unicorn.rb -E production -D
ec2-user 17881  0.0 17.3 589088 175164 ?       Sl   01:55   0:00 unicorn_rails worker[0] -c config/unicorn.rb -E production -D
ec2-user 17911  0.0  0.2 110532  2180 pts/0    S+   02:05   0:00 grep --color=auto unicorn
```
上記のように停止されていないことが確認された場合
unicorn_rails masterの行のプロセスID（PID）を確認する。
左から２列目、５桁の数字がPIDで、今回の場合は１７８７７となる。

その後以下の通りにkillコマンドを実行する。

```ターミナル:ターミナル
kill 17877
```
再度プロセスの確認を行い、以下のように　`config/unicorn.rb` の記述がある行が削除されていれば成功。

```ターミナル:ターミナル
[ec2-user@ip-XXX-XX-XX-XXX <リポジトリ名>]$ ps aux | grep unicorn
ec2-user 17911  0.0  0.2 110532  2180 pts/0    S+   02:05   0:00 grep --color=auto unicorn
```

###Nginx内の記述を確認してみる。

確認するための記述は以下。

```ターミナル:ターミナル
[ec2-user@ip-XXX-XX-XX-XXX <リポジトリ名>]$ sudo vim /開きたいファイルのURI
```
アプリケーション名や、Elastic IP、その他記述に誤りがないか確認する。

※vimの操作に関しては、以下にとても参考になる記事のリンクを載せました。
https://qiita.com/knife0125/items/5e91176c8401acd6bb0a

###現状の理解
ターミナルでの作業はなかなか理解が難しい。
特にvimを使用する場面は理解が浅いので今後学習を強化していきたい。

誤り等ございましたらご指摘のほどよろしくお願いいたします。
【Golang wire】なんとなく理解した備忘録

# Git
https://github.com/google/wire/tree/master/_tutorial

# 何をしているか
struct間の依存関係を記述するのを自動で生成してくれる。

# 作るべきファイル
１． 依存関係を実装しているファイル(main.goとか)
２． 自動生成するにあたってヒントを与えるファイル(wire.go)

↓を実行

```bash
$ wire gen
```
3. 同じディレクトリにwire_gen.goが出来上がっている。

多分、実際の処理で利用していくファイルはwire_gen.goを使って処理をしてくはず。
`wire gen`を実行するまではmain.goのInitialEventが無いっておこられているから。
wire_gen.goが出来上がるとそのエラーはなくなる。

4. 結果

```
src
 main.go
 wire.go
 wire_gen.go // wire getで生成されたファイル
```

```main.go
package main

import (
	"fmt"
)

type Event struct {
	Greeter Greeter
}

type Greeter struct {
	Message Message
}

type Message string

func NewEvent(g Greeter) (Event) {
	return Event{Greeter: g}
}

func NewGreeter(m Message) Greeter {
	return Greeter{Message: m}
}

func NewMessage(p string) Message {
	return Message(p)
}

func (e Event) Start() {
	msg := e.Greeter.Great()
	fmt.Println(msg)
}

func (g Greeter) Great() Message {
	return g.Message
}

func main() {
	e := InitializeEvent("takutakutakujiro")

	e.Start()
}
```

```wire.go
//+build wireinject

package test

import "github.com/google/wire"

func InitializeEvent(phrase string) Event {
	wire.Build(NewEvent, NewGreeter, NewMessage)
	return Event{}
}
```

```wire_gen.go
// Code generated by Wire. DO NOT EDIT.

//go:generate wire
//+build !wireinject

package test

// Injectors from wire.go:

func InitializeEvent(phrase string) Event {
	message := NewMessage(phrase)
	greeter := NewGreeter(message)
	event := NewEvent(greeter)
	return event
}

```
Java 11 (OpenJDK: AdoptOpenJDK) を Homebrew で macOS にインストールする

## 今回の環境

- macOS Big Sur 11.4

## インストール

公式資料通りにインストールする。
[GitHub \- AdoptOpenJDK/homebrew\-openjdk: AdoptOpenJDK HomeBrew Tap](https://github.com/AdoptOpenJDK/homebrew-openjdk)

```
$ brew tap AdoptOpenJDK/openjdk
$ brew install --cask adoptopenjdk11
```

(以前は brew cask install adoptopenjdk11 というコマンドだった)

## java_home コマンドでインストールされたディレクトリの場所を確認

```
$ /usr/libexec/java_home -v 11
/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home
```

## 環境変数 JAVA_HOME と PATH を設定

必要に応じて .bash_profile や .bashrc などに記述する。

```
export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home
PATH=${JAVA_HOME}/bin:${PATH}
```

## インストールされた AdoptOpenJDK を確認

```
$ java -version
openjdk version "11.0.11" 2021-04-20
OpenJDK Runtime Environment AdoptOpenJDK-11.0.11+9 (build 11.0.11+9)
OpenJDK 64-Bit Server VM AdoptOpenJDK-11.0.11+9 (build 11.0.11+9, mixed mode)

$ javac -version
javac 11.0.11

$ which java
/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home/bin/java

$ which javac
/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home/bin/javac

$ ls /Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home/bin/
jaotc		javap		jfr		jmap		jstat		rmiregistry
jar		jcmd		jhsdb		jmod		jstatd		serialver
jarsigner	jconsole	jimage		jps		keytool		unpack200
java		jdb		jinfo		jrunscript	pack200
javac		jdeprscan	jjs		jshell		rmic
javadoc		jdeps		jlink		jstack		rmid
```
Qiita で Rust のシンタックスハイライトがおかしい件


Qiita は Rust コードのシンタックスハイライトがおかしい。
言語指定 `rust` を付けたうえで，コードブロックに以下のように書いてみよう。もちろん構文上正しいコードだ。

```
let x = a / b;
```

すると以下のように表示される。

```rust
let x = a / b;
```

2020-01-17 時点では，下記の画像のように除算記号 `/` の下に赤い破線が引かれている。
赤い破線は，本来は構文上おかしな箇所を示しているはず。

![ill-format.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48101/f1172701-38a6-a82c-a724-c29cf259fb37.png "ill-format.png")

Qiita はおそらく，Ruby の [rouge](https://rubygems.org/gems/rouge) というライブラリーを使ってシンタックスハイライトを実現している。
このライブラリーのバグらしい。

rouge はさきごろバージョン 3.15.0 がリリースされ，この問題が解消された。
https://github.com/rouge-ruby/rouge/blob/master/CHANGELOG.md

試しに，Markdown を使う自作のメモアプリで rouge を 3.14.0 から 3.15.0 に上げたら，`/` の下線が消えた。めでたしめでたし。

Qiita もいずれ直るのだろう。

# 追記（2020-07-16）

今日見たら直ってた。やたー
cloud-init メモ

cloud-init のテストは最初は lxd を使うと効率がよい。`lxc create` の引数で user-data を指定する（[※参考](https://cloudinit.readthedocs.io/en/latest/topics/faq.html#lxd)）。内部的には lxd イメージに備わっているテンプレート機能で NoCloud datasource がセットアップされる （[※参考](https://hnakamur.github.io/blog/2019/08/15/lxd-container-templates/)）。

```bash
# 下のパスワードは "ubuntu" です。
lxc launch ubuntu:bionic test01 -c user.user-data="$(cat <<EOF
#cloud-config
system_info:
  default_user:
    passwd: ZdCKISm06M3Yk
    lock_passwd: false
ssh_pwauth: true
EOF
)"
```

次点は kvm 直接起動。libvirt 環境下でテストするよりも手軽。`cloud-localds` でデフォルトで [NoCloud drive](https://cloudinit.readthedocs.io/en/latest/topics/datasources/nocloud.html) の ISO9600 イメージが生成できる。

```bash
# qcow2 backing を使うとテストが軽くなって簡単
qemu-img create -f qcow2 -b bionic-server-cloudimg-amd64.img base.img
# NoCloud datasource を作る。下のパスワードは "ubuntu" です。
cloud-localds seed.iso <(cat <<EOF
#cloud-config
system_info:
  default_user:
    passwd: ZdCKISm06M3Yk
    lock_passwd: false
ssh_pwauth: true
EOF
);
# 上の二つを使って起動させる。メモリが無いと cloud-init が OOM にあう
kvm -cdrom seed.iso -nographic -serial mon:stdio -m 512 base.img
```

user-data は cloud-config 単体でも構わないけれども、mime-multipart で複数の内容を連結したものでも構わない。[ドキュメント](https://cloudinit.readthedocs.io/en/latest/topics/format.html)で例が少ないですが。

いっぽうで実は /etc/cloud/cloud.cfg.d/ 以下に cloud-config を置いても良い。この場合は YAML である cloud-config のみであることに注意。

user-data の cloud-config と /etc/cloud/cloud.cfg.d/ の cloud-config を両方使うときは、「後勝ち」で置き換えられることに注意。[merge ルール](https://cloudinit.readthedocs.io/en/latest/topics/merging.html)が導入されているけれども、どうにもこうにも対応が不完全で、現状の実装では同じ場所の cloud-config 同士でしか merge ルールが効かない。

実行順序を読み解くには [stage](https://cloudinit.readthedocs.io/en/latest/topics/boot.html)(generator, local, network, config, final) と [frequency](https://cloudinit.readthedocs.io/en/latest/topics/cli.html#single)(always,once-per-instance,once) の 2 軸がある。

`cloud-init.target` は systemd generator で target goal として設定されるものなので、`After=cloud-init.target` とは*しない*こと。

## cloud-boothook

- なるべく各種 daemon 起動前にやりたいことを
- 書いた内容が boothook 用ディレクトリ（`/var/lib/cloud/instances/${name}/boothooks/`）に展開される
- そのファイルが exec される
- `cloud-init-per` で wrap してしまうと frequency の制御が簡単になる

例えば行頭の `#!` をつけ忘れないようにする。mime multipart を使わない場合は、次のようになる（ユーザ名 `testuser` で `weakpassword` でログインできるようになる）。

```
#cloud-boothook
#!/bin/bash
useradd -p '$6$rounds=4096$t98l1Iej6$jsob4xXuA0cL6rI8NiAkEuH4jAQSyNBR6RAIzDsrQhp4096nhT4.5i0RHqMEDEv0ubIlV2HjCqMgrAVkhpkmK.' testuser
# generate password with:
#  echo "weakpassword" | mkpasswd -s --method=SHA-512 --rounds=4096
```

## cloud-config-archive

- mime-multipart の代わりに使える
- mime-multipart にネストしても構わない
- 機械生成したいときで、mime-multipart が面倒な時便利
- 小さい cloud-config をたくさん連結したいときは小さくなるかもしれない。mime multipart のヘッダとインデントの量を秤にかける

```
#cloud-config-archive
---
- type: text/cloud-config
  content: |
    write_file:
      path: /tmp/hello
      content: |
        hello, world
```
初心者による ES6 export/import

#概要
アプリの規模が大きくなるほど、アプリを機能ごとに分割/整理するモジュールの存在はますます重要になってくる。

#基本的な書き方

```javascript:sample.js
import { name, ...} from module
 //name : インポートする要素
 //module : モジュール(拡張子はつけない)

export class XXX { }
```
がexport/importの基本的な書き方である。外部からアクセスできる要素にのみexportキーワードをつける。たとえば、

```javascript:sample1.js
const name = 'Satou Shio'

export class Member {
 //コード
}

export class Class {
 //コード
}
```

```javascript:sample2.js
import { Member, Class } from './sample1'

let member = new Member('佐藤')
console.log(member.getName())
```

#import命令の様々な記法
importには、様々な書き方がある。

##1. モジュール全体をまとめてインポート
アスタリスク(*)でモジュール内のすべての要素をインポートできる。この場合、asキーワードでモジュール名を別途指定しておく必要があります。

```javascript:sample.js
import * as app from './sample1'

let member = new app.Member('佐藤')
console.log(member.getName())
```

##2. モジュール内の個々の要素に別々に名前をつける
「クラス名 as 新しい名前」 のようにしてimportする。

```javascript:sample.js
import { Member as MyMember, Class as MyClass} from './sample1'

let member = new MyMember('佐藤')
console.log(member.getName())
```

##3. デフォルトのエクスポートをインポートする
モジュールに含まれる要素が一つだけであれば、デフォルトのエクスポートを宣言することができる。デフォルトエクスポートでは、クラス/関数などの名前は不要です。

```javascript:sample1.js
export default class {
 static getPluss(a, b){
  return a + b
 }
}
```

```javascript:sample2.js
import Math from './sample1'

console.log(Math.getPluss(1, 2))
```

#参考資料
山田祥寛様　「javascript本格入門」
これからプログラミングスクールに通う人へ

#目次
1.はじめに
2.カリキュラム紹介
3.私が感じたメリット・デメリット
4.生徒目線から見た伸びていた人
5.3ヶ月を終えての感想

#1.はじめに
私は2019年10月から12月にかけて渋谷の某プログラミングスクールに通っていました。３ヶ月を終えての感想、これから通う人、通うか迷っている人に向けてカリキュラムの簡単な紹介やスクールでどんな人が伸びていたか生徒目線ではありますが書いていこうと思います。

#2.カリキュラムの紹介
私が通っていたプログラミングスクールのカリキュラムは１ヶ月目にhtmlやcss等の基礎知識の学習、２ヶ月目にecサイトの開発が課題のチーム開発演習、3ヶ月目にオリジナルのアプリを作成するといった学習内容でした。月ごとに簡単に紹介します。

##１ヶ月目
１ヶ月目は基本的にオンラインにある教材を独学で自分のペースで進めていくような流れになります。わからないところがあればメンターの方を呼び、教えていただくような形式になっていました。

学習内容としては下記の通りです
・git
・仮想環境の構築(vagrant)
・html、css
・ruby
・ruby on rails
・java script
・aws

提出する課題が2つあり、合格しなければ次の月に進めませんでした。

##２ヶ月目
２ヶ月目はチーム開発です。3-4人で人チームになりECサイトの作成を行います。テーブルの設計からテストまでの全工程を行うのでかなりのボリュームだったと思います。

新しい学習内容としては
・gitを使用したチーム開発（開発用のブランチを切って作業する、プルリクを送ってチームメンバーに承認してもらってからマスターにマージする等）
・画面設計、テーブル設計、開発、テストまでを行いアプリ開発の一通りの流れ

##3ヶ月目
3ヶ月目はオリジナルのアプリケーション開発です。それぞれが１ヶ月間で設計から開発、実装までを行います。それぞれのレベルがアプリケーション如実に現れます。

#3.私が感じたメリット・デメリット
##メリット
・何から手をつけたら良いのかわからない自分にとっては学習内容が順序立てて組んであり、自分のペースで進められることは助かりました。

・同時期に学習を始めた受講生がたくさんいるので勉強のモチベーションアップにつながります。自分より早く進んでいたり、学習内容を共有するなかで知識を深めることができたことは大きかったと思います。

##デメリット
・ほぼ独学という形になるので全くプログラミングやったことがない人が触るとアレルギーを起こしてしまうかもしれません。周りは常にプログラミングをやってるし「隣の芝は青く見える」的な感じでめっちゃやってるように見えます。なんか焦るしprogateとかでイメージを掴んでおくと良いかもしれません（何周もやる必要はないと思います。）

・自走力でかなり差が出てきます。メンターの方に常に質問できる環境は良い点でもありますがエンジニアに必須と呼ばれる自走力には差が出る可能性があるなと思いました。（取り組むスタンスの問題？）

#4.生徒目線から見た伸びていた人
##スクールの外に目を向けていた人
プログラミングスクールに通っているとどうしてもカリキュラムをこなすだけで満足してしまったり、受け身になってしまう人が出てきてしまう様に見えました。エンジニアとしてどう見られるかをイメージしてカリキュラム外のことにも手を出したり勉強会に出ている人はやっぱり伸びているなと思いました。
##良い意味で図々しい人
独学と比べた時の大きな違いはメンターがきちんといること、受講生が周りにいることが大きいと思います。
自分がやりたいことをはっきりと言語化できた上で利用するメンターさんの知識はどんどん利用していきましょう。効率的に、加速度的に成長していく上では物凄い力を発揮してくれると思います。
また、モチベーションを刺激してくれたり、お互いの学んだことをアウトプットし合えたりできる存在である受講生とコミュニケーションを積極的にとっていた人は伸びていたなーの感じました。

#5.3ヶ月を終えての感想
ひとまず３ヶ月を終えてこれからエンジニアとしてスタートするための良い準備ができたと思います。やってく中でエラーが出ることはしょっちゅうあったしポートフォリオでは新しい技術に挑戦して詰まったことも多々ありました。それでもやり切れたということは自分の中で小さな自信になったし自分のアイデアが自分の手で形にできるエンジニアって改めて良いなーと思います。年が明けて絶賛就活中ですが納得のいける環境でエンジニアとしてスタートが切れる様頑張ろうと思います。
ブロックリーゲームズ：タートル９　正解でない？

ブロックリーゲームズ：タートル９

暗い色は、「このように描画せよ」という問題

色は間違っていない。

正解判定にならず、次の問題へ移行しない。

![ブロックリーゲームズ：タートル９＿できているのになぜ？.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76087/5a4a4a9b-460b-2da2-e5e1-5f1453f9cb50.gif)
createJSのアニメーション再生の注意点

#概要
animateCCなどから出力されたオブジェクトに対して、下記のようにアニメーション再生の命令を出す。

```js

var list = _lib.list;
list.gotoAndPlay("anim");
list.gotoAndStop("list_1");
```
親子関係をもつオブジェクトが多く、それぞれにアニメーションを設定することも多い。
例)
親　list
　　|
子　---content1
　　|
子　---content2

このオブジェクトの構造が上記のようになっている場合、
子(content1, content2)に対するアニメーション再生が向こうになってしまう場合がある。

```js

var content1 = list.content1;
var content2 = list.content2;
 
content1.gotoAndPlay("anim1");
content2.gotoAndStop("anim2");
```

#原因
ムービークリップには、「autoReset」というプロパティが存在する

以下抜粋
>autoReset Boolean
>Defined in autoReset:170
>
>If true, the MovieClip will automatically be reset to its first frame >whenever the timeline adds it back onto the display list. This only >applies to MovieClip instances with mode=INDEPENDENT.
>
>For example, if you had a character animation with a "body" child >MovieClip instance with different costumes on each frame, you could set >body.autoReset = false, so that you can manually change the frame it is >on, without worrying that it will be reset automatically.
>
>Default: true

https://www.createjs.com/docs/easeljs/classes/MovieClip.html#property_autoReset


上記のような仕様が存在するため、親オブジェクトに対してgotoAndPlayなどを行ってから1f待ってからでないと、子オブジェクトに対してアニメーションを再生することができない（currentFrameが戻されるから）

#対策
##時間を空ける
親オブジェクトに対して、アニメーション再生を行ってから1f以上待ってから子オブジェクトに対してアニメーション再生を行う

```js

var frameCounter = 0;
if(frameCounter == 0) {
  parent.gotoAndPlay("anim");
}
if(frameCounter == 1) {
  child.gotoAndPlay("anim")
}
```
##autoResetをfalseにする
原因にも書いたようにディスプレイオブジェクトには、autoResetというプロパティ(オブジェクトが生成されたときにcurrentFrameを0に初期化するという仕様)があり、デフォルトでtrueになっている。

画面を準備していく段階で、このプロパティをfalseにしておけば、親オブジェクトと子オブジェクトに対して、同じタイミングでアニメーションを再生することができる

※ただし、どちらのアニメーションも一定フレーム数あった場合どのように再生されるかは未検証

例）gotoAndPlay関数をラッパーする

```js

function gotoAndPlay(animRoot, positionOrLabel, autoReset) {
    if (animRoot == null) {
        return;
    }
    var pos = Number(positionOrLabel);
    if (isNaN(pos)) {
        // 同じフレーム数だったら処理しない
        if (animRoot.currentFrame != animRoot.timeline._labels[positionOrLabel] && typeof animRoot.timeline._labels[positionOrLabel] !== 'undefined') {
            animRoot.gotoAndPlay(positionOrLabel);
        }
    } else {
        // 同じフレーム数だったら処理しない
        if (animRoot.currentFrame != pos) {
            animRoot.gotoAndPlay(pos);
        }
    }
    if (typeof autoReset !== 'undefined') {
        animRoot.autoReset = autoReset;
    }
}
```
JSのプログラムでincludeするコンパイラ的な何かをかいたお話

どうも、フミです。
京都の上のほうから市内に向かう電車の中で書いているので、誤字はお許しください...

普段からC系の言語とJavascriptを二刀使いしている皆さん、皆さんはJavascriptをかいていて、あ～、include文使えたらいいのにな...
って思ったことありませんか？

いや、いやいや、シンキングフェイスをしたそこのあなた、あなたの気持ちはよ～くわかりますとも！ええ、ええ、そうでしょうね！importを使えばいいだろう！でしょうね！！

使いこなせるのであればいいのですが、importは少し書き方が特殊になる上に、スコープ的にめんどくさいんです（個人の感想です。）

そこで、JSでもinclude文が使えるようになるためのプログラムを作りました！！
5分くおりてぃなので悪しからず...

# やったこと
Nodejsを使って既存のファイルを解析し、include文を適用したjsファイルをa.jsとしてカレントディレクトリに出力します。

多分コード読んだほうがわかるので...

```js:cmp.js
const main_file=process.argv[2];
const fs = require('fs');
function include(fname){
    let code = String(fs.readFileSync(fname));
    console.log("include \n\n"+code);
    const analy=code.split("#include ");
    let program=analy[0];
    for(let i=1;i<analy.length;i++){
        program+="\n"+include(analy[i].split(/\r\n|\n|\r/)[0])+"\n";
    }
    program+=analy.pop().split(/\r\n|\n|\r/,2)[1];
    return program;
}
fs.writeFileSync("a.js", include(main_file));
```
以上！！
# 使い方
コンパイル()したいファイルとincludeしたいファイルの拡張子は何でもいいです。
コマンドラインで

```
node cmp.js [コンパイルしたいメインファイルのパス]
```
としてやるとa.jsに結果が出力されます。
includeしたいファイル内でさらにincludeしても大丈夫です。
release前のbeatorajaをdockerでビルドしたい人へ

# この記事で記載しないこと 
+ whats beatoraja?
    + java製のBMSプレイヤー。詳細はgoogle行って
+ dockerて何？
    + 他所をあたってください
+ 黒い画面の使い方  
    + それを知らない方は多分こっち参照するべきではない
    + 使い方次第でOS吹き飛ばせるので分からない人は[こちら](http://excln.hatenablog.com/entry/2017/09/03/194753)を元に頑張ったほうが安全

# 手順
1.dockerはインストールしておいてください( `docker-compose` は使いません)
2.リポジトリをcloneしてリポジトリのディレクトリに飛ぶ

```bash
# Clone
$ git clone git@github.com:exch-bms2/beatoraja.git
# Move Current Directory
$ cd beatoraja
```

~~3.Dockerfileを編集する~~
 
> ~~本来この手順は必要ではありませんが、2020/01/17現在baseImageの指定が間違っている状態なのでこのまま `docker build` を叩くと存在しないイメージを参照しているとしてエラーになります。そのため以下のように修正してください。~~

[修正PR](https://github.com/exch-bms2/beatoraja/pull/496) がMergeされたのでそのままビルドしてOKです。

3.Imageをビルドする

```bash
$ docker build -t exch-bms2/beatoraja ./
```

4.ビルドしたイメージを元にコンテナを立ち上げてjarを作る

```bash
$ docker run -v `pwd`:/usr/src/app exch-bms2/beatoraja
```


正常終了すると、 `build/` に生成されています

------

2019/01/19 追記
Windowsでdockerを使う人もビルドできるのを確認しました(当たり前ですが)
ただし `docker run` するときコマンドを変更しないと動きません

```bash
$ docker run -v /`pwd`:/usr/src/app exch-bms2/beatoraja
```

要はマウントするディレクトリ指定の頭の `/` が1個増えてるだけです
初心者による 静的プロパティ/静的メソッド

#静的プロパティ/メソッドとは
静的プロパティ/静的メソッドとは、「インスタンスを生成しなくてもオブジェクトから直接呼び出せるプロパティ/メソッド」のことである。これに対して、インスタンスを呼び出して、インスタンス経由で呼び出すプロパティ/メソッドのことをインスタンスプロパティ/インスタンスメソッドという。

```javascript:sample.js
オブジェクト名.プロパティ名 = 値
オブジェクト名.メソッド名 = function()

または

class Math {
 static getPluss(a, b){
  return a + b
 }
}
```
のように定義する。

##静的プロパティ/メソッドを定義するときの注意点

###静的プロパティは、基本的に読み取り専用の用途で使う。
静的プロパティはインスタンスごとの値ではなくクラスごとの値であるため、基本的に変更すべき値ではない。よって、静的プロパティは読み取り専用の用途で使う。

###静的メソッドのなかで、thisキーワードは使えない
thisキーワードはインスタンス自身を表すため、クラス単位ごとのメソッドである静的メソッドではthisキーワードは使えない、というよりも使っても意味がない。

#なぜ静的メンバーをつかうのか
静的プロパティ/静的メソッドは機能的にはグローバルプロパティ/グローバルメソッドとは何ら変わりません。ではなぜ静的プロパティ/静的メソッドを使うのかというと、「名前の競合」を回避するためです。
クラスごとのプロパティ/メソッドである静的プロパティ/静的メソッドを使えば、たくさんのライブラリを使う開発であっても機能ごとにグローバルオブジェクトのように使えるので、大変勝手が良い。
よって、グローバル変数/関数は出来るだけ減らし、静的プロパティ/静的メソッドに情報をまとめるのが好ましい。
nuxt.js + Firebaseでアプリを作る際に `import firebase ~~ `を毎回書きたくない

# 前提
nuxt.js + Firebaseでアプリを開発していると、Firebase操作が必要な各ページで
`import firebase from '~/plugins/firebase'`
の記述が必要ということに気づきました。
ページ数が多いわけではないですが、
Auth処理とFirestore操作でほぼ全ページに必要だったので、書かなくて済む方法はないかと思った次第です。

今のところこのやり方でうまく行ったようなので、備忘録として残しておきます。


# 結論
関数のinjectと同様にすればよいっぽい。

```Javascript:plugins/firebase.js
import firebase from 'firebase'

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    databaseURL: process.env.DATABASE_URL,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID
  })
}

// いつもはこのやり方
// export default firebase

// injectに変更する
export default ({ app }, inject) => {
  inject('firebase', firebase)
}
```

```Javascript:nuxt.config.js
export default {
  plugins: ['~/plugins/firebase.js']
}
```

# 使用例
```html:pages/index.js
<script>
// 不要 => import firebase from '~/plugins/firebase'

export default {
  methods: {
    login() {
      this.$firebase  // いつもの firebase が this.$firebase で呼び出せる
        .auth()
        .signInWithRedirect(new this.$firebase.auth.GoogleAuthProvider())
    },
  }
}
</script>
```


# 最後に
[プラグイン - NuxtJS](https://ja.nuxtjs.org/guide/plugins/)

nuxt.jsのリファレンスにある「統合された注入」というものを使っていますが正直あまりよくわかっていないです。
間違っていることやそうしてはNGな理由などがあれば是非コメントで教えてください。
Qiita から Hugo 用の markdown を生成するやつ

Qiita で書いていた記事を全部 Hugo で作ったサイトに移行するために Qiita の記事を Hugo 用の Markdown として出力するスクリプトを作りました。

# 作ったもの

- [michimani/qiita-to-hugo | Github](https://github.com/michimani/qiita-to-hugo)

標準ライブラリのみの利用で、必要なのは Qiita API を利用するためのアクセストークンです。
記事数が 100 までであれば、そのまま使えるはずです。

# 気をつけたところ
単に Markdown の生成だけではなく、記事内の画像もまるっと移行できるように画像の保存、記事内の画像パスの変更まで実施するようにしています。

# 詳細

- [Qiita に投稿していた記事を Hugo に移行してみた - michimani.net](https://michimani.net/post/blog-qiita-to-hugo/)
materializeを使ったformのselectタグで、iOS13だと正しく選択できない

# materializeとは？
Googleが作ったWeb用のフロントエンドフレームワークです。
レスポンシブデザインに対応していて、BootStrapみたいな感じで使えるので使いやすいです。
~~何よりいいのが、Bootstrapみたいに使えるのにBootstrapっぽくないので「あ、こいつフロントエンドはお手軽に済ましたな！」みたいに思われにくく、作り込んだ感が出ます~~

iconも豊富でカラーバリエーションも多いので、作り込まれたサイト感が出しやすいです。
またフラットなデザインなので、[UnDraw](https://undraw.co/)のイメージともなじみやすくよきです。
最近流行りの感じのサイトをお手軽に作ることができます。

https://materializecss.com/

Bootstrapから抜け出して次に行きたい！という人、ぜひmaterializeCSSを使いましょう。
日本語の情報がまだ少ないっぽいので、もっとやれるひとを増やしていきたいのです。

# 問題の詳細
さて、そんなすばらしいmaterializeですが、ちょっと不具合があったのです。
formのselectはおしゃれで使いやすいんですが、iOS13では正しく選択できません。
（正確にはiOS13のChromeで正しく動きませんでした、Safariはみていません）

materializeのselectタグは、JavaScriptで動かしているみたいなんですが、それに不具合があったようです。
githubのisueに問題が報告されています。
https://github.com/Dogfalo/materialize/issues/6444

# 解決方法
「じゃあどうすりゃいいんだよ！」ってなるとおもいますが、こちらの不具合はすでに修正されています。
ただリリースはされていないので、githubからソースをダウンロードして、js/select.jsだけを追加で読み込んでください。

## 手順
1. materializeCSSのソースを一式落とす。https://github.com/Dogfalo/materialize
2. 自分のプロジェクトの所定の場所に、js/selec.jsを移す。
3. 自分のプロジェクトで、materializeCSSを読み込んだあとに、select.jsを読み込む。

```HTML:index.html
    <script type="text/javascript" src="{% static 'materialize/js/select.js'%}"></script>
    <script type="text/javascript" src="{% static 'user/js/user.js'%}"></script>
```

# 確認
iOS13で試してみる。ちゃんと選べる！かんぺき！

# おわりに
たぶん次のリリースで修正されるとは思いますが、それまでは悩む人も多そうなので記事にしました。
繰り返しになりますがmaterializeCSSを使おう！そして日本語情報を増やしていきましょう！
Windows7をWindows10へアップグレードするときに失敗率を下げる方法

# はじめに
本記事は、Windows7サポート終了に伴い、Windows10へのアップグレードを
する人のためになるかと思い書きました。
なお、Microsoftの中の人でもなく、個人的に動作を保証するものでもありません。
Windows7からWindows10へのアップグレード作業をした際に失敗した経験から
対処方法として有効だったものを紹介しているだけですので、その点をご理解
頂きますようお願い致します。

# 手順
1. Mediacreationtoolを使ってWindows10のイメージディスクを作成する
[Windows 10 のダウンロード](https://www.microsoft.com/ja-jp/software-download/windows10)から「ツールを今すぐダウンロード」を
クリックしてMediaCreationTool[ver].exeをダウンロードして実行し、Windows10の
インストールメディアを作成してください。

2. Windowsボタン+Rを押して「ファイル名を指定して実行」を開き、”msconfig”と入力し、
「OK」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295242/4d60d04d-8046-cab5-4fc2-16c2b2e9f633.png)

3. 「システム構成」が表示されます。「全般」タブから「スタートアップのオプションを選択」を
選択し、「スタートアップの項目を読み込む」のチェックを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295242/6037ead2-0889-a4aa-1ef9-03fd9b5d779f.png)

4. 「サービス」タブを開き、「Microsoftのサービスをすべて隠す」にチェックを入れ、
「すべて無効」ボタンをクリックし、「適用」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295242/08c42e90-fea6-fb2f-b87e-c3bf3c67ff61.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295242/e6d70345-0f2e-2ed1-6601-f75d4722650f.png)

5. 「全般」タブに戻り、「スタートアップのオプションを選択」の状態が下図の状態で
あることを確認し、「OK」ボタンをクリックしてPCを再起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295242/627b6165-b895-6173-2ee6-bc8b09eb212e.png)

6. Windows10へのアップグレードを実行します。
 （手順の詳細は割愛します）

7. 正常にアップグレードが完了したら、再度「システム構成」を開き、
「スタートアップの選択」を「通常スタートアップ」に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295242/8a9baa1c-dd3f-5217-adf3-eb6ff5c2a29b.png)

# いかがでしたでしょうか
この段落は書いてみたかっただけです。
もしこれでうまくいかなくてもなんも責任はとりません。
ただ、これを構成してからアップグレードをすると成功率が上がったので
試してみる価値はあると思います。

Good Luck！
Vimコマンドが停止/固まってしまったら

# Vimで何も入力できなくなってしまったら
CentOS8を立ち上げて、コマンドプロンプトで
```vi ~/.bash_profile
```
を入力して、内容を編集し、保存の方法を事前に予習せずに
```Ctrl+S
```
を入力すると、なんと、何もコマンド入力できないフリーズ状態になってしまいました。
どうやらvim編集時にCtrl+sはご法度のようデス。

いろいろ調べてみるとCtrl+qでフリーズを解除できるということがわかりました

***Linuxにとって、Ctrl+sは出力を一時的ストップを意味するらしく、入力内容の確認に使われているそうで、
Ctrl+qで出力を再開する仕様になっているそうですね***

気を付けます...

参照：
https://linuxfan.info/disable-ctrl-s
Laravel Eloquent firstWhere()到着


Taylorさんをはじめ、Laravelに貢献する開発者が頑張っていて、だんだんと新しい機能を追加されています。今回(2020-01-15)リリースされたLaravel　6.11.0　に含まれている機能の一つをしょかいします。

### firstWhere() の 機能をEloquentに

あるモデルを一意キーで検索する時、たとえばUserの`emaiIl`や `phonenumber` など、下記のようなコードを使うと思います

```php
    User::where('phonenumber', '12345')->first();
```

が　[このPR](https://github.com/laravel/framework/pull/31089)でこのための専用の関数`firstWhere(キー、値)`が追加され、上記のコードをこのように書けるようになりました！

```php
    User::firstWhere('phonenumber', '12345');
```

便利ですね！今までこの機能は[collection](https://laravel.com/docs/6.x/collections#method-first-where)にふくまれていますが、これから`Eloquent`のモデルに使えるようになりました！

＃＃＃ 注意点

現時点、この機能はEloquentのクエリー・ビルダーしか対応されていないので、残念ながら`Illuminate\Database\Query\Builder`クラスでは使えません。

つまり、下記のコードを実行すればエラーが発生します。


```php
 DB::table('users')->firstWhere('phonenumber', '12345');
 // エラー
```

### 参照リンク

https://github.com/laravel/framework/compare/v6.10.1...v6.11.0
https://github.com/laravel/framework/pull/31089
https://laravel.com/docs/6.x/collections#method-first-where
エルビス演算子(三項演算子の省略記法)とNull合体演算子(PHP7以降で追加)の違い

# エルビス演算子とNull合体演算子の違い

エルビス演算子は、条件値が`falseとみなされる値`の場合、後者の値が式の結果となります。
Null演算子は、条件値が`null`の場合、後者の値が式の結果となります。

```php
$v1 = '';
$v2 = null;

$v1 ?: false; // false
$v1 ?? false; // ""
$v2 ?: false; // false
$v2 ?? false; // false
```

# falseとみなされる値(php.netより)
> boolean に変換する場合、次の値は FALSE とみなされます。
> 
> - boolean の FALSE
> - integer の 0 および -0 (ゼロ)
> - float の 0.0 および -0.0 (ゼロ)
> - 空の文字列、 および文字列の "0"
> - 要素の数がゼロである 配列
> - 特別な値 NULL (値がセットされていない変数を含む)
> - 空のタグから作成された SimpleXML オブジェクト

> 警告: -1 は、他のゼロでない数と同様に (正負によらず) TRUE とみなされます。

以下、実験。文字列の0は`false`ですが、文字列の0.0は`true`になります。

```php
boolval(null); // false
boolval('null'); // true
boolval("null"); // true
boolval(0); // false
boolval('0'); // false
boolval("0"); // false
boolval(''); // false
boolval(""); // false
boolval(0.0); // false
boolval('0.0'); // true!!
boolval("0.0"); // true!!
boolval(false); // false
boolval('false'); // true
boolval("false"); // true
```
WordPressのREST APIの使い方

# はじめに
たまにWordPressのREST APIを使うのですが、毎度毎度使い方を忘れて、なんか同じサイトを行ったり来たりしている自分に腹が立ってきたので、まとめます。。

# いつもお世話になっているサイト
まずは基本的なこと
[WordPress REST API で、カスタム投稿タイプなどの情報を取得する](https://www.tam-tam.co.jp/tipsnote/cms/post9688.html)

アイキャッチ取得したいとき
[WP REST API v2 WordPressの新着記事をアイキャッチ画像付きで取得する方法](https://webtatan.com/blog/wordpress/wp-rest-api-v2-json)

カスタムフィールドの値も取りたいとき
[wordpress rest-apiでカスタムフィールドを出力する際に処理結果を整形したい](https://qiita.com/kinshist/items/cd9f74af7db7c80746a1)

そもそも独自API作りたいとき
[WP REST API　を使って独自エンドポイントを設定する。](https://qiita.com/RinT_T/items/808941ba52ffa4b51833)

いつもありがとうございます！神！

いつの間にか公式のREST APIのドキュメントがきれいになってた？元から？
[REST API Handbook](https://developer.wordpress.org/rest-api/)

↑ちょっと時間があったので、勝手に翻訳してみました。
本格的なところまで手を出そうと思うと、結構難しいです。
[REST APIハンドブック](https://wp-rest-api.mydocument.jp/)

# 最初に確認するポイント
私はよくカスタム投稿タイプ・カスタムタクソノミーで使用しますが、`register_post_type`、`register_taxonomy`関数を使うときに、引数に

```php
'show_in_rest'  => true,
```

は入っていますか？
毎回実装するたびに久しぶりになり、今回はこちらではまりました候。

# まとめます
## カスタム投稿タイプの一覧を取得したい

```js
homeUrl + '/wp-json/wp/v2/{カスタム投稿タイプの名前}'
```

## そのときにアイキャッチもほしい
```js
homeUrl + '/wp-json/wp/v2/{カスタム投稿タイプの名前}?_embed'
```

`{カスタム投稿タイプの名前}`になっているところを、`posts`,`pages`にしてもらえれば、投稿、固定ページのアイキャッチ画像も取得できます。

アイキャッチのデータへのアクセス

```js
test._embedded['wp:featuredmedia'][0].source_url
```

プロパティを全部「.」でつなごうとして、途中にある「:」でエラーになってパニックになってました。
プロパティのアクセス方法は[]で囲んでも大丈夫だから落ち着いて。自分。

## カスタムタクソノミーで絞り込みたい
```js
homeUrl + '/wp-json/wp/v2/{カスタム投稿タイプの名前}?{カスタムタクソノミー名}=' + termID
```

## カスタムフィールドの値を取得したい
こちらの記事をどうぞ↓
[wordpress rest-apiでカスタムフィールドを出力する際に処理結果を整形したい](https://qiita.com/kinshist/items/cd9f74af7db7c80746a1)

## 返ってくる結果、こんなにいらないかも
投稿のAPIを叩くと、１投稿につき、かなりのデータがくっついてきますが、そんなときは、[グローバルパラメーター](https://wp-rest-api.mydocument.jp/using-the-rest-api/global-parameters/)の_fieldsを使ってみてください。

たしかに、投稿のID、タイトル、リンクだけでOKです。というときもありますしね。
取得件数が多い場合などは、APIのレスポンスでデータ量が節約できるのでいいと思います。

```
/wp/v2/posts?_fields=author,id,excerpt,title,link
```

## とりあえずどんなレスポンスが返ってくるのか見てみたい
こちらの[サイト](https://demo.wp-api.org/)では、公式が用意してくれているAPIを試すことができます。
あくまで認証が必要ない投稿の取得などになりますが。

ターミナルを開いて、以下のコマンドを実行してみてください。

```
$ curl https://demo.wp-api.org/wp-json/
```

このサイトのAPIのエンドポイントの一覧などを取得することができます。

投稿一覧を取得するには、以下のコマンドを実行してください。

```
$ curl https://demo.wp-api.org/wp-json/wp/v2/posts/
```

投稿が10件取得できたと思います。

結果はjsonで返ってきますので、jsonのフォーマット用に[jqコマンド](https://qiita.com/takeshinoda@github/items/2dec7a72930ec1f658af)をおすすめします。
jqコマンドをインストールして、取得した結果をパイプでつないで、jqコマンドでフォーマットすればOKです。
【Nuxt.js】 asyncDataとfetchって結局どう使うの？

## TL;DR.
- `asyncData`と`fetch`はコンポーネントがロードされる度に呼び出され、外部からデータを取得する際に使用する
- `asyncData`は外部から取得したデータをページコンポーネントのみで使用する場合に使用する
- `fetch`は取得したデータをVuexのstoreに格納して使用したい場合に使用する

## そもそもasyncDataとfetchって何？
- asyncDataとfetchはページコンポーネントの初期化前に呼び出される関数のこと。
- SSR(サーバーサイドレンダリング)、ページ遷移前にも呼び出される。
- 第1引数に`context`(オブジェクト)を取るので、クエリパラメータなどの値にアクセスして処理を行うことができる。
    - `context`内で利用できるキーに関しては[API基本Context](https://ja.nuxtjs.org/api/context)を参照
- 一方で、コンポーネントのインスタンスが作成される前に処理が実行されてしまうため、`this`でコンポーネントのインスタンスにアクセスすることができない。

## asyncDataの使用法
`asyncData`は外部からデータを取得し、ページコンポーネントへ直接セットすることを目的として使用される。`asyncData`によって返される値はコンポーネントのテンプレートからアクセスすることで使用できる。

```vue
<template>
  <div>{{ hoge }}</div>
</template>

<script>
export default {
  async asyncData({ app }) {
    const doc = await app.$firebase.firestore().collection('hoge').get()
    return { hoge: doc.data().hoge }
  }
}
</script>
```


## fetchの使用法
`fetch`は外部から取得したデータをVuexのstoreに格納して使用することを目的として使用される。`acyncData`とは違ってコンポーネントに値を直接セットすることができない。

```vue
<template>
  <div>{{ $store.state.hige }}</div>
</template>

<script>
export default {
  async fetch({ app, store }) {
    const doc = await app.$firebase.firestore().collection('hige').get()
    store.commit('setHige', doc.data().hige)
  }
}
</script>
```

## 結局どう使うの？
- SSRとCSRのライフサイクルは`plugin`→`middleware`→`validate`→asyncData→`fetch`→`beforeCreate`の順で処理が実行されているので、タイミング的にはどちらを使用しても影響範囲は変わらないように思える。

- asyncDataの場合、そのページで直接apiを叩いてデータを取得することを目的としているため、Vuexを使用して共通化している関数などを使用しない。したがって、storeに格納しないデータ(アカウントデータやテーマなどの情報はlocalStrageやsessionStrageかから取得することを想定)を使用してデータ取得を行いたい場合に使用するイメージ。また、asyncData内でstoreを使用することはできるが、gettersを動かしてページにデータを持ってくる必要がある。

- fetchの場合、Vuexのmutationsを直接叩いてstoreに値をセットして、ページから直接storeを参照するために使用する。したがって、取得したデータの加工や表示方法をstoreに入れる前に全て行う必要がある。つまり、一旦storeに入れてしまったデータを編集して表示することが難しい。取得したデータを完全にページで成形して使用する場合(マスターデータや表示のみで使用する一覧系データなど)に使用するイメージ。また、アプリケーションないで使用しているデータや処理方法がVuexに大きく依存している場合、かなり有効になる。
【Nuxt.js】一覧から詳細画面への遷移  nuxt-link

一覧から詳細画面への遷移方法についてのメモです

```vuejs:list.vue
<template>
  <b-container>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名前</th>
          <th>メール</th>
          <th>詳細画面リンク</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" v-bind:key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <nuxt-link :to="`/users/${user.id}`">
              <b-button squared variant="dark">詳細</b-button>
            </nuxt-link>
          </td>
        </tr>
      </tbody>
    </table>
  </b-container>
</template>

<script>
import axios from "axios"

const url = "test/api/path"

export default {
  data() {
    return {
      forms: ""
    }
  },
  async asyncData() {
    const result = await axios.get(url)
    return {
      forms: result.data
    }
  }
}
</script>
```
- `nuxt-link`を使用して、ボタンを囲ってあげる
- 詳細ボタン押下すると該当の`user.id`に遷移する

```vuejs
<nuxt-link :to="`/users/${user.id}`">
  <b-button squared variant="dark">詳細</b-button>
</nuxt-link>
```
SpringSecurityで認証機能を実装②


**[前回](https://qiita.com/YJ2222/items/73642c3a0af776927db5)の続きです。**

## ４、ログイン画面の実装。

・今回はログイン画面と実装します。ただ認証機能は実装しないので、**ログイン画面からボタンを押せばフォームの内容に限らず画面を遷移させます**。

・ファイルの構成イメージは以下になります。コメントをズラーと書いてしまったので不要な場合は消して下さい。

　<img width="270" alt="SpringBoot_Di_Security_DB_11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/b5e51ce4-15a1-c115-4ec6-fbc148bf21ab.png">

・コードは以下になります。

```java:SpringLogin.app.controller/LoginController.java

package SpringLogin.app.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

//import SpringLogin.app.service.UserService;

@Controller
public class LoginController {

//    @Autowired
//    UserService userService;

    @GetMapping("/login")
    public String getSignUp(Model model) {
        return "login";
    }
    
    //FormのSubmitを押すとPostメソッドがリクエストされます。（）に書かれたURLのリクエストを受け取るとこのメソッドが発動します。
    @PostMapping("/login")
    public String postSignUp(Model model) {
    	/*
    	今回はリダイレクトを使います。画面遷移などファイル間をまたぐ場合はリダイレクト使います。
    	イメージ的にはGetメソッドを呼び出していると考えていいでしょう。
    	試しにリダイレクトせず通常のフォワード(return "ｘｘｘ";)とすると画面自体は表示されますがURLが変わりません。
    	こうすると、遷移先で受け取りたいデータなどが受け取れないことがあるので、リダイレクトを使用したほうが良いでしょう。
    	*/
        return "redirect:/userList";
    }

}

```

```html
:templates/login.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
</head>
<body>
    <!-- コンテンツ部分 -->
    <div>
    	<!-- method="post"にすることでpostリクエストを発行することができます。th:actionでPostを処理するメソッドをURLで指定します。 -->
        <form method="post" th:action="@{/login}">
	        <div>
	        	<label>Username:</label>
	        	<!-- 今回の実装では使いませんがname属性を指定してあります。後で認証の時に使います。 -->
	        	<input type="text" name="username" />
	        </div>
	        <div>
	        	<label>Password:</label>
	        	<input type="password" name="password" />
	        </div>

    		<button type="submit">login</button>
        </form>
    </div>
</body>
</html>

```

・コードが書けたら、ブラウザでアプリを確認しましょう。
　**URLが変わります**→http://localhost:8080/login
　ページが表示されたら、Loginボタンを押下してuserListに遷移することを確認します。この時URLが変わっていることを確認しましょう。

![SpringBoot_Di_Security_DB_12.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/0b958d99-0687-31cd-07a2-7361a5b63a07.gif)

・動画の様に遷移できていればOKです！

　次からはこの記事のメインになります。ここもボリュームが大きくなりそうなのでいったん切ります。続きは[こちら](https://qiita.com/YJ2222/items/3047949cb6018d2453dc)。
無料ビデオエディター  ・ Free video Editors

##はじめに
こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html

##目的
面白い無料のビデオエディターをいくつか紹介したいと思います。
一部のビデオエディタはクロスプラットフォームであり、その他はOS固有です。

---------------------------------------
##Shotcut
<img width="347" alt="Screen Shot 2020-01-17 at 9.52.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229807/a77e1802-739f-0be2-7a70-f4ed6a11f1e1.png">

<img width="938" alt="shotcut.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229807/8669809f-1ebd-442a-b99b-a406af5f4f5d.png">

| オペレイティングシステム     | 
|:-----------------:|
| Linux            |  
| Windows            | 
| Mac OS          | 

#### 主な機能
- 多くのファイル形式をサポート
- [EDL](https://en.wikipedia.org/wiki/Edit_decision_list) エクスポート
- オーディオ編集ツール
- カラーグレーディング
- 多くのビデオエフェクト
- ハードウェアアクセラレーションが可能
- 4K サポート
- ネットワークストリームの再生（HTTP、HLS、RTMP、RTSP、MMS、UDP）
- オープンソース

**機能の全リスト :** https://shotcut.org/features/

**ダウンロード :** https://shotcut.org/download/

---------------------------------------
##OpenShot
<img width="239" alt="Screen Shot 2020-01-17 at 9.54.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229807/49f5f65d-59a4-4f25-8783-841aa7779516.png">
![openshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229807/408a1f22-c40e-596f-cebe-162d95ce6d41.jpeg)


| オペレイティングシステム     | 
|:-----------------:|
| Linux            |  
| Windows            | 
| Mac OS          | 

####主な機能
- 使いやすい
- 多くのタイトルテンプレートと3Dアニメーション
- 多くのデジタル効果
- 400のビデオトランジション
- 多くのファイル形式をサポート
- オープンソース

**機能の全リスト :** https://www.openshot.org/features/


**ダウンロード :** https://www.openshot.org/

---------------------------------------
##FlowBlade
![flowblade0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229807/f3e433b8-2154-e26b-5bfc-99872e058ba3.png)
![flowblade.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229807/3e282b42-5859-496a-0d83-8fb8e448293e.png)

| オペレイティングシステム     | 
|:-----------------:|
| Linux            |  

####主な機能
- 使いやすい
- カラーグレーディング
- スローモーションおよび高速クリップ
- 多くのビデオフィルター
- 利用可能な多くのチュートリアル
- オープンソース

**機能の全リスト :** https://jliljebl.github.io/flowblade/features.html

**ダウンロード :** https://jliljebl.github.io/flowblade/

---------------------------------------

###情報源
https://shotcut.org/
https://www.openshot.org/
https://jliljebl.github.io/flowblade/
https://jliljebl.github.io/flowblade/webhelp/help.html
地理情報関連のまとめ（随時拡張）

# Software
## Commercial
- [ArcGIS](http://esri.com)

## Free
- [QGIS](http://www.qgis.org)
- [Generic Mapping Tools](https://www.generic-mapping-tools.org/)
- [MapD](https://www.omnisci.com/demos)

# Open Data
- [基盤地図情報サイト | 国土地理院](https://www.gsi.go.jp/kiban/)
- [兵庫県_全域DEM](https://www.geospatial.jp/ckan/dataset/2010-2018-hyogo-geo-dem)
- [500mメッシュ水深データ | JODC-日本海洋データセンター](https://jdoss1.jodc.go.jp/vpage/depth500_file_j.html)

# Information
- [わかりやすい平面直角座標系 | 国土地理院](https://www.gsi.go.jp/sokuchikijun/jpc.html)

# Tools / Tips
### Converter / Tools
- [ツール群(e.g. JPGIS形式ファイルをGMT用に変換) | 野田氏@産総研](https://staff.aist.go.jp/a.noda/programs/programs.html)
- [緯度経度と平面直角座標の相互変換をPythonで実装する | sw1227氏](https://qiita.com/sw1227/items/e7a590994ad7dcd0e8ab)
- [PythonでJPGIS(GML)形式DEMをGeotiffファイルに変換 | tm23factor氏](https://tm23forest.com/contents/python-jpgis-gml-dem-geotiff)

### GMT
- [GMT でシェープファイル形式のデータを使って地図を描く | @XVI_wisteria氏](http://blog.livedoor.jp/xvi_wisteria/archives/1069952360.html)
- [GMTオンラインマニュアル | 松田さん@気象庁](http://gmt.shin-gen.jp/)
- [Bathymetry Maps: GMT Shells and Tips | 沖野さん＠東大大気海洋研](http://ofgs.aori.u-tokyo.ac.jp/~okino/gmtscripts/index.html) [^1]
- [シェープファイルをGMTへ | 佐々木 研究室@東大新領域](http://estuarine.jp/2011/10/%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%97%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92gmt%E3%81%B8/)
- [WANtaro雑記帳（Win_GMT：凡例，フォント，カラーマップ，ハッチング）](http://civilyarou.web.fc2.com/WANtaroNOTE/subWinGMT_misc.html)
- [GMTの使い方 | 筧さん＠神戸大](http://www2.kobe-u.ac.jp/~kakehi/GMT/GMT-HOWTO.html#okino) [^2]

### Misc
- [MapDにDEMデータを入れて可視化してみた | Takuma Matsuo氏](https://www.insight-tec.com/blog/technical/20171030_mapd)
- [地理空間情報のカタログ | 地理空間情報ライブラリー](http://geolib.gsi.go.jp/catalog)
- [地形図・地勢図図歴](http://mapps.gsi.go.jp/history.html#ll=37.3912834,140.3903225&z=5&target=t25000)
- [M_Map: A Mapping package for Matlab](http://www.eos.ubc.ca/~rich/map.html)
- [地図プリ - 各種地図サービスの印刷サイト](http://www.yamareco.com/map/)
- [Saibara's Convert GEO code Version 1.05](http://saibara.sakura.ne.jp/map/convgeo.cgi)


#### Other Portal
- [ソフトウェアエンジニアリング-地理情報システム](https://www.torutk.com/projects/swe/wiki/%E5%9C%B0%E7%90%86%E6%83%85%E5%A0%B1%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0)

#### Blogs seems to be useful
- [CRACKPOT | RYOTTS](https://ryotts.wordpress.com/)
- [GeoIGN 2.3 | FIKGM@geoIGN](http://blog.ikgm.net/)

#### 活断層
- [Google Earth上に活断層を表示する方法](https://1upnoob.blogspot.com/2017/04/google-earth-active-fault.html)
- [Google Earthに重ねて表示](http://sc1.cc.kochi-u.ac.jp/~murakami/cgi-bin/FSW/fswiki.cgi?page=Google+Earth%A4%CB%BD%C5%A4%CD%A4%C6%C9%BD%BC%A8)

#### 本アカウント関連記事
[QGISでラスタレイヤが表示されない時](https://qiita.com/rpscrw/items/d37612b331de36baa552)
[Geotiffからテキストへ変換](https://qiita.com/rpscrw/items/42455dead716f95f2aed)
[地図座標変換(GMTとPROJ.4)](https://qiita.com/rpscrw/items/a1fc6b8ce9eeb5749beb)
[GMTで特定の海域を塗り潰す](https://qiita.com/rpscrw/items/38208519a7b512e390b7)
[gpsbabel基本コマンド](https://qiita.com/rpscrw/items/96e245bfef5f5118dc7f)

[^1]: 個人的には一番とっつきやすい
[^2]: スクリプトはバージョンが3系だが、リンク集が特に参考になる
Github API v3でPRを作るcurlコマンド例

参照：https://developer.github.com/v3/pulls/#create-a-pull-request
パラメータの作り方で少しハマった

```bash
# Personal access token
TOKEN=00000000000000000 
OWNER=username
REPO=repositry
COMPARE=username:branch
BASE=master

curl -v -H "Authorization: token $TOKEN" https://api.github.com/repos/$OWNER/$REPO/pulls --data '
{
  "title": "Amazing new feature",
  "body": "Please pull these awesome changes in!",
  "head": "'$COMPARE'",
  "base": "'$BASE'"
}'
```

`--request POST`は推論されるので不要でした。


## Personal access tokenの権限
repo Full control of private repositoriesがいる

-  [Check] repo Full control of private repositories
    - repo:status Access commit status
    - repo_deployment Access deployment status
    - public_repo Access public repositories
    - repo:invite Access repository invitations