OmniAICreator/Qiita-1.07M huggingface dataset:
.csvのデータから近似曲線を導出する

#ことの発端
リモート授業は楽なんですが、課題が多い...。だから、あんまり一つの課題に時間をかけたくないんですわ。

大学の課題「人口動態の数理モデルを作れ(数式で表せ)」
私「めんどくさいなぁ....。ゆけ、R!」

...ってな感じで、Rを使って人口動態の近似曲線を導出してみました。めっちゃ簡単です。
#環境
macOS Catalina 10.15.4
R Studio (Version 1.2.5042)

あ、あと、tidyverseを使うので入れといてください。

#用意したデータ
名古屋市の月毎の人口動態を扱います。ありがたいことに名古屋市の人口動態は.csvでダウンロードできます。やったね！
ま、ダウンロードしてみるといろいろなデータが含まれているので、市の人口のデータだけを抽出して、下のように新たな.csvを作ります。nは2012年1月からの月数です。
<img width="1372" alt="スクリーンショット 2020-06-26 18.23.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334730/f0c08f9a-2443-3ec6-d8cc-fb7b3995dd25.png">
この.csvを使っていきます。
#試しにグラフにしてみる
```r:make_graph.r
library(tidyverse)

filename <- file.choose()    
data <- read.csv(filename,header=T)

graph = ggplot(data, aes(x=n, y=Population)) + geom_line(col="black") + labs(title="Population of Nagoya City")

plot(graph)
```
動かす時は、R StudioのSourceをクリックして、そこからさっきの.csvを選択してくださいな。

こんな感じにグラフができます。
![Rplot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334730/3553db7d-98d4-302c-df05-5701ec571b6e.png)
#近似曲線を出してみる
さて、本題です。さっきのグラフから、「まぁ、3次関数にしておけばいい感じになるかな」と思ったので、3次曲線で近似していきます。

```r:approximateline.r
library(tidyverse)

filename <- file.choose()    
data <- read.csv(filename,header=T)

graph = ggplot(data, aes(x=n, y=Population)) + geom_line(col="black") + labs(title="Population of Nagoya City")

x = data[,1]
y = data[,2]

approximated = nls(y ~ a * x^3 + b * x^2 + c * x + d, start=c(a=0, b=0, c=0, d=0))
summary(approximated)

predict.c = predict(approximated)
approximate = data.frame(predict.c)
approximate$num = data[,1]

coef = coefficients(approximated)

approximateline = geom_line(aes(approximate$num, approximate$predict.c), col="red")
plot(graph + approximateline)

print(coef[1])
print(coef[2])
print(coef[3])
print(coef[4])
```

![Rplot01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334730/cd03455c-fa04-2f57-c17a-f41bca535c73.png)
コンソールには下のように係数(a,b,c,dの値)が出力されます。
<img width="113" alt="スクリーンショット 2020-06-26 18.37.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334730/45020601-d653-77cf-709e-847d7edfa340.png">
簡単でしたね。
[Rails] 画像ファイルを受け取って保存する

Progate学習メモ


```view.rb
<input name="image" type="file">
```

```controller.rb
image = params[:image]
# File.binwrite("path_to_画像ファイルを保存するフォルダ/画像ファイル名", 画像データ.read)
File.binwrite("public/user_images/#{@user.image_name}", image.read)
```
Ruby on Rails チュートリアル(第4版)　第1章

11章で断念(バグ直そうとアレコレしてたら余計にどうにもならなくなってしまった…)してしまった為、
最初から理解を深めながらやってみようということで、
2周目のRailsチュートリアルを演習やバグや気になった点をメモしながら進めてみようと思います！

##1.1.1　演習
1.Ruby on Railsで使うRuby gemはどのWebサイトにありますか？ヒント: 分からないときはとにかくググりましょう。
　ググってみた。　https://rubygems.org

2.現時点でのRailsの最新バージョンはいくつですか？
　ググってみry　Ruby on Rails 6.0.3（リリース日：2020/05/06）

3.Ruby on Railsはこれまでに何回ダウンロードされたでしょうか？調べてみてください。
　ググっry　230,607,561回


##1.3.2　演習
1.デフォルトのRailsページに表示されているものと比べて、今の自分のコンピュータにあるRubyのバージョンはいくつになっていますか?コマンドラインで`ruby -v`を実行することで簡単に確認できます。
　ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]

2.同様にして、Railsのバージョンも調べてみましょう。調べたバージョンはリスト 1.1でインストールしたバージョンと一致しているでしょうか?
　`rails -v`を実行　Rails 5.1.6

##1.3.4　演習
1.リスト 1.7のhelloアクションを書き換え、「hello, world!」の代わりに「hola, mundo!」と表示されるようにしてみましょう。

```ruby:app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  
  def hello
    render html: "hola, mundo!"
  end
end
```

2.Railsでは「非ASCII文字」もサポートされています。「¡Hola, mundo!」にはスペイン語特有の逆さ感嘆符「¡」が含まれています (図 1.16)18 。「¡」文字をMacで表示するには、Optionキーを押しながら1キーを押します。この文字をコピーして自分のエディタに貼り付ける方が早いかもしれません。
　1.の`hola,mundo!`を`¡Hola, mundo!`に変更

3.リスト 1.7のhelloアクションを参考にして、２つ目のアクションgoodbyeを追加しましょう。このアクションは、「goodbye, world!」というテキストを表示します。リスト 1.9のルーティングを編集して、ルートルーティングの割り当て先をhelloアクションからgoodbyeアクションに変更します (図 1.17)。

```ruby:app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  
  def hello
    render html: "¡Hola, mundo!"
  end
  
  def goodbye
    render html: "goodbye,world!"
  end
end
```

```ruby:config/routes.rb
Rails.application.routes.draw do
  root 'application#goodbye'
end
```

##1.5.3　演習
1.1.3.4.1と同じ変更を行い、本番アプリでも「hola, mundo!」を表示できるようにしてください。
　1.3.4.1と同じ変更を行う

```
$ git status
$ git commit -a -m "Change hola,mundo"
$ git push
$ git push heroku
```

2.1.3.4.1と同様、ルートへのルーティングを変更してgoodbyeアクションの結果が表示されるようにしてください。またデプロイ時には、Git pushのmasterをあえて省略し、git push herokuでデプロイできることを確認してみてください。
　1.3.4.3と同じ変更を行う

```
$ git status
$ git commit -a -m "Change goodbye"
$ git push
$ git push heroku
```

##1.5.4　演習
1.heroku helpコマンドを実行し、Herokuコマンドの一覧を表示してみてください。Herokuアプリのログを表示するコマンドはどれですか?
　heroku logs

2.上の演習で見つけたコマンドを使って、Herokuアプリの最近のログ (log) を調べてみましょう。直近に発生したイベントは何でしたか? (このログを調べるコマンドを覚えておくと、本番環境の不具合を見つけるときに役立ちます)
　2020-06-26T08:59:30.522077+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=immense-taiga-66301.herokuapp.com request_id=b8b24da9-1231-4cc7-aace-9adcd50967b3 fwd="223.134.125.162" dyno=web.1 connect=0ms service=13ms status=200 bytes=143 protocol=https

##メモ
`rails new`を実行すると、ファイル作成後に`bundle install`コマンドが自動的に実行される

エラーが出た時にどうにかしようとしてどうにもならなくなった時に何度かお世話になったブランチ削除

```
# ブランチでミスがあった場合
$ git checkout -b topic-branch
$ <ファイルを作成したり編集したり削除したり...>
$ git add -A
$ git commit -a -m "Make major mistake"
$ git checkout master
$ git branch -D topic-branch
```
NervesのPhoenixのログを起動コンソールとRingLoggerに出す

Ponchoプロジェクト構成なNervesでPhoenixを起動している時、Phoenixのログを確認したい場合があります。

特に気にせずに動かしていると、NervesのログシステムであるRingLoggerにはPhoenixのログが表示されずに困る場合があるので、解決しました。

```shell:fish
❯ mix nerves.new -v
Nerves Bootstrap v1.8.0

❯ mix phx.new -v
Phoenix v1.5.3
```


# 関連ファイル

```
Phoenixプロジェクト/
  config/
    config.exs
  mix.exs
```

## mix.exs

mix.exsファイルの`deps`に以下の行を追記して、PhoenixでRingLoggerを使えるようにします。

```elixir:mix.exs
defp deps do
  [
    {:ring_logger, "~> 0.6"},
  ]
end
```

追記した後、`mix deps.get`コマンドを実行します。

```shell:fish
❯ mix deps.get
```



## config/config.exs

ログを`:console`だけでなく`RingLogger`にも出力するようにします。

```elixir:config/config.exs
（変更前）
- config :logger, :console,
↓
（変更後）
+ config :logger, backends: [RingLogger, :console],
```


# まとめ
ローカルホストで`mix phx.server`したコンソールにPhoenixのログを表示し、Nervesにデプロイした後もNervesにSSHして`RingLogger.attach`することでPhoenixのログを表示できるようになりました。
【heroku】sendgridアドオンを利用するとNet::SMTPAuthenticationError (535 Authentication failed: account disabledになる

herokuでサーバーを立てたあとsendgridアドオンを追加しその後、環境変数を弄ると
以下のエラーが発生してメールが送信されない。

> Net::SMTPAuthenticationError (535 Authentication failed: account disabled

一度アプリを削除して再度立て直し環境変数等を設定した後にsendgridアドオンを追加すると問題が起きない。
ただ何が原因かは不明

参考
アカウント凍結のフローとその解除方法について教えてください。
https://support.sendgrid.kke.co.jp/hc/ja/articles/360000215822-Heroku%E7%B5%8C%E7%94%B1%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%8C%E5%87%8D%E7%B5%90%E3%81%95%E3%82%8C%E3%81%BE%E3%81%97%E3%81%9F-%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B-
Heroku経由で作成したアカウントが凍結されました。どうすればよいですか？
https://support.sendgrid.kke.co.jp/hc/ja/articles/360000215822-Heroku%E7%B5%8C%E7%94%B1%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%8C%E5%87%8D%E7%B5%90%E3%81%95%E3%82%8C%E3%81%BE%E3%81%97%E3%81%9F-%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B-
Dotfiles駆動開発(DD...D?)

# $ man dotfiles

---

# どっと・ふぁいる・ず［dotfiles］（名・複）
開発で使う設定ファイルの総称、またはそれらを集めたリポジトリ。
設定用ランコマンドが.zshrcや.vimrcなど、ドットから始まる物が多いことに由来。

> 出展: ○辞苑(1145:14)

ｷﾞｯﾊﾌﾞにも、わりと公開されてる。
https://github.com/search?q=dotfiles

---

# 私のdotfilesのあゆみ

---

# dotfilesとの遭遇

- Adobe Dreamweaver :sparkles: とか言うネ申ソフトを使わない開発をしたい → Vimやな。
- Vimは設定が命。
- カスタムすこすこのすこたろうﾜｲ、ドはまりする
- 会社でVimの設定書く → 家でも同じ設定使いたい
- バージョン管理ついでにGitHubに置けば解決やろ。私は天才では :thinking: ？？
- みんなやってた :atamanowaruihito:

---

# dotfiles界の名著 (だと思っている

最強の dotfiles 駆動開発と GitHub で管理する運用方法 @b4b4r07
https://qiita.com/b4b4r07/items/b70178e021bef12cd4a2

```
ash -c "$(curl -fsSL dot.b4b4r07.com)"
```

ワンライナーで完結！ステキ！

![インストール実行時の様子](https://qiita-user-contents.imgix.net/https%3A%2F%2Fraw.githubusercontent.com%2Fb4b4r07%2Fscreenshots%2Fmaster%2Fdotfiles%2Fdemo.gif?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&w=1400&fit=max&s=e65084665822a53729b3680455417f0b)

---

# リッチ :moneybag: な dotfiles

![リッチなプロンプト](https://files.speakerdeck.com/presentations/22fa1e03dc4f4939b59fcf7dc8a00e64/slide_5.jpg?13705977)

(一番ごちゃごちゃしていた時期)

> 出展: 暗黒Shellからエンジニアを守る党 - SpeakerDeck 
> https://speakerdeck.com/oratake/an-hei-shellkaraenziniawoshou-rudang-bashwobutuhuai-su

---

## 少し問題も見えた

* Powerline(きれいな色付きバーみたいなの)がPython依存
  * 環境ごとにPythonのバージョン同期とんのか問題
* MacとArchとWSL使い分けてるけど、どうしてくれんの
  * ローカルルールとか、部分的に使いたい、みたいなニーズ。

---

# 現在の運用

- `$HOME` に `git clone` して `make init`
  - 入れたい要素を選んで導入も `$ make git vim zsh`

https://github.com/oratake/dotfiles

- issue駆動にしたことで、進みが見えて楽しくなる。

https://github.com/oratake/dotfiles/issues

- カンバン(Project)なんか使っちゃったりして。

https://github.com/oratake/dotfiles/projects/1

---

# dotfiles キメてよかったこと

- githubを使い倒す手軽な実験材料に
  - 実際、dotfilesが自分では一番長生きで活発なリポジトリ。
  - カンバンとか新しい機能つかってみてるので良さ。
- gitの勉強ができた気になる
- Linuxに親しめた気になる
- 怠惰, 短気, 傲慢できてる気になる
- dotfilesで環境が整う -> 開発しようかなという気になる

---

# dotfilesがハマりそうなひと

- プロンプトを、魅せる :sparkles: オトナのモテコーデ :sparkling_heart: にしたい人
- Vimmer
- 初めてプレイするゲームで、まずオプションからいじる人
- `git log --graph --decorate --oneline --color --all --pretty="format:%C(yellow)%h %C(green)%cd %C(reset)%s %C(red)%d %C(cyan)[%an]" --date=format:"%y-%m-%d %T"` を毎回打ちたくない人

---

# dotfilesの今後の展望

例えば、dotfilesをDockerイメージにする https://windyakin.hateblo.jp/entry/2017/06/18/182046

**★俺達の開発はまだまだこれからだ！★**
動画から簡単にQiitaの記事にアップロードできるgif画像を作成する方法

#この記事について
Qiitaの記事で表示されるgif画像を作るのに苦労したので、備忘録として書きました。
![ForGif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614523/01a9bb78-1b7d-3b47-a52c-f8637d8d3487.gif)

gif画像づくりは自ら編み出したものではなく、以下のyoutubeの動画を参考に作りました。
https://www.youtube.com/watch?v=aQOpbP3hr0A




# 動画の作成
gif画像にする動画を準備します。準備の仕方は人それぞれだと思います。普段の私は"Gyazo GIF"を使って動画を作っています。
https://gyazo.com/tour
Macユーザーの方は"shiftキー"+"commandキー"+"5"で録画するのもありだと思います。


# Homebrewのインストール（Macのみ）
以下のサイトでHomebrewをインストールしてください。既にしている方はスキップしてもらって大丈夫です。
https://brew.sh/index_ja
インストール以下のコードをコピーして、ターミナルにペーストして実行してください。
<img width="1426" alt="スクリーンショット 2020-06-26 17.39.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614523/dd582e6d-452a-796b-1b7e-d5e81375a824.png">

homebrewが入っているかどうかはターミナル上で"brew"と打って実行すれば確認できます。既にあれば色々文字が出るはずです。
<img width="316" alt="スクリーンショット 2020-06-26 17.48.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614523/e493f8b2-07da-c74c-a31f-aea5dd66b3dc.png">
こんな風に。

# ffmpegのインストール
ffmpegは動画や音楽を変換や再生できるフリーソフトウェアです。ffmpegを使って動画をgif画像にします。
ffmpegをインストールするために以下のコマンドをターミナルで実行してください。


```
brew install ffmpeg
```

"ffmpeg"とターミナル上に入力して実行するとインストールできているか確認できます。

# 動画からgif画像への変換
動画のあるディレクトリへ移動します。以下のコマンドで動画をgif画像に変換できます。

```
ffmpeg -i ファイル名　-r 1~20の数字　gif画像にした時のファイル名(拡張子の.gifを含む)
```

-rの1~20の数字ですが、数字が大きいほどgifの動きが滑らかで、容量が大きくなります。

以下は私が動画からgif画像を作成した時のコード（例）です。

```
ffmpeg -i ForGif.mov　-r 10　ForGif.gif
```

これでgif画像作りは完了です。
作ったgif画像を確認したい時は、ファイルを選択した状態でスペースキーを押してください。普通に開いても画像が並んでいるだけで動きはないです。
【Node.js】Express　フロント側でpublicフォルダのcssやらライブラリファイルを読み込めない時の対処法

#jqueryが読み込めない・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647946/0a859323-4aa3-dd0b-f334-e04ef745a3d5.png)
index.ejsから
・public/lib/jquery-3.5.1.min.jsw
・public/css/index.css
を読み込めない！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647946/6e9a52d0-0752-cae7-359f-24ff01a5bf2a.png)
404 Not Foundと言われていますね


##なんで・・・？
```index.ejs
<!-- css -->
<link rel="stylesheet" type="text/css" href="public\css\index.css">
<!-- jQuery -->
<script type="text/javascript" src="public\lib\jquery-3.5.1.min.js"></script>
```
ちゃんと相対パス書いてあげてるのになー
絶対パスに変えてみてもダメだった

#解決策

```app.js
// 静的ファイルは無条件に公開
app.use('/public', express.static('public'))
```
app.jsでpublicフォルダをstaticにしてあげるだけでよかった！


#おわり
みなさんも同じ手詰まりをしないように
【Solidity】関数修飾子（view、pure）の違い

Solidityの関数にはview、及びpureの修飾子を付けることができる。

どちらにも共通しているのはstorage（ブロックチェーン）にデータを書き込むことができないということ。
では何が違うのか。それぞれの違いを忘れてしまうことがあるため、ここにまとめておく。

# view修飾子
```solidity
function hello() public view returns (string) {
```
storage（ブロックチェーン）の値を読み込むことは可能。

storage（ブロックチェーン）に値を書き込むことは不可能。

データの読み取り専用だと思えばOK。

view修飾子が付いた関数は外部から実行される場合はgasを消費しない。
同じコントラクト内のviewが付いてない関数から実行される場合はgasを消費する。

# pure修飾子
```solidity
function _addition(uint a, uint b) private pure returns (uint) {
    return a + b;
}
```
storage（ブロックチェーン）の値を読み込むことも書き込むことも不可能。

引数で受け取った値のみ使用可能。

よって、pure修飾子が付いた関数も外部からの呼び出しではgasを消費しない。（同じコントラクト内からの呼び出しでは消費する）

# まとめ
Solidityでのプログラミングではgasの消費をなるべく抑えるようにする必要があるため、この辺りの知識は必須だと思う。
Acquia Certified Front End Specialist – D8 試験感想＆勉強方法

4月のコロナ自粛期間中には、Drupal8の「Acquia Certified Front End Specialist 」試験にチャレンジしました。
運は良くて、一発に合格しましたが、振り返って自分の勉強方法と感想を纏めて、誰のお役に立てれば嬉しいです:relaxed:

#####試験概要

Exam Name: Acquia Certified Front End Specialist – Drupal 8
Exam Duration: 90 minutes
Exam Price: $300
Exam length: 60 questions
Pass/Fail mark: 68%

自分が試験した時は、ちょうどAcquia社は日本語版のキャンペーンを開催しているので、試験費は実質0円でした。

#####試験内容と質問比率

1.0 Fundamental web development concepts　25%
2.0 Theming concepts	25%
3.0 Templates and pre-process functions	25%
4.0 Layout configuration	15%
5.0 Performance	5%
6.0 Security	5%
TOTAL	100%

詳細の試験内容は[試験ページ](https://www.acquia.com/solutions/customer-success/acquia-certification)を確認できます。

#####勉強方法

・　一番目にやるべきことは、質問分野の内容を確認し、自分の強みと弱みをはっきりすることです。
　　自分の場合、一番の弱みはCSS系、次はJS系のことは分かっているので、そちらの弱みは強みに変更する勉強時間があまりないので、「1.0 Fundamental web development concepts」について、今の知識で行くことに決めました。代わりに、ほかの分野はしっかり勉強するということです。

・　公式のDocを読むこと
　　[Themeing Drupal](https://www.drupal.org/docs/theming-drupal)をざっくり読むことがお勧めです。
　　もちろん、個人差があるので、時間の分配は大事です。（全部読むにはすごく時間がかかりそう。。）

・　重点的に勉強法
　　※「3.0 Templates and pre-process functions」について25％の比率で出題されるので、これは自分が一番時間をかけて勉強した分野でした。
　　試験時はまた半年ぐらいの実経験しかなかったので、Drupalのhookについて、まだまだ理解できていないところが多いです。
　　Youtubeを見たり、Drupalの公式Docを読んだり、ノートにメモを残したりしました。


#####試験当日

コロナ期間中で、自宅でOnline試験を受けることになりました。

あくまで自分の記憶中で試験当時にあった内容なので、ご参考程度の気持ちでー
→Drupalのテーマ概念　（基礎知識、フォルダ構成・・・）
→テーマの継承　 (親テーマのcss・jsの変更、除外など)
→yamlの記述方法（info, library）
→twigの関数
→CSS・JS系　(自分はCSS系の問題は全滅しました。。。:sob:)
→pre-process系 （やっぱり出題数は多かった印象でした）
→実際WEBサイトを運用時のPerformanceの改善方法（1問、2問ぐらい）
→DrupalやWEBサイトのセキュリティー（1問、2問ぐらい）

#####試験結果
試験完了後直ちに結果が出て、以下の自動送信メールも届きます。
You have completed the exam, アクイア認定フロントエンドスペシャリスト – Drupal 8 on Sun Apr 26 18:00:59 MST 2020.
Overall Score: 70.00%
Result: PASS

Topic Level Scoring:
Section 1 : Fundamental Web Development Concepts : 78.57%
Section 2 : Theming concepts: 60.00%
Section 3 : Templates and Pre-process Functions: 93.75%
Section 4 : Layout Configuration: 66.66%
Section 5 : Performance: 0%
Section 6 : Security: 33.33%

Congratulations on achieving the credential!

合格ライン(68%)よりぎりぎりでした。
CSS系の問題は全滅しましたが、一番しっかり勉強した「Templates and Pre-process Functions」は93.75%だったので、少し不足を埋めるようになりました:hugging:
ですが、「Performance」は0％で、自分でも少々意外でした。恥ずかしかったです:sweat:


合格したら、以下のデジタルバージを貰えます↓
![frontend.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662650/c9b3079c-85b2-267f-b319-0320de7eff3e.png)
TypeScriptで関数の型定義を書く方法まとめ

TypeScriptでは関数の型定義のやり方がいくつかあり、よく理解できていなかったのでまとめてみます。


## 型定義の書き方

関数の型定義は2種類の書き方が存在します。

### 省略記法

省略記法では`(引数の型) => 戻り値の型`の形式で記述します。
アロー関数と同じような書き方です。

```ts:example1.ts
type Example1 = (param: string) => string;
const example1: Example1 = param => param;
```

example1は型`Example1`の型アノテーションをつけて、関数を定義しています。
型アノテーションによって関数の引数が推論され、引数の`param`は`string`型と解釈されます。

### 完全記法

完全記法では`(引数の型): 戻り値の型`という組を`{}`の中に記述します。

```ts:example2.ts
type Example2 = {
  (param: string): string;
}

const example2: Example2 = param => param;
```

型定義の`Example2`と`Example1`は全く同じ意味になります。

### 関数のオーバーロード

完全記法では`{}`の中に複数の`(引数の型): 戻り値の型`を記述できます。
その場合はオーバーロードを意味します。

```ts:example3.ts
type Example3 = {
  (): string;
  (param: string): string;
  (param: number): string;
}

const example3: Example3 = (param?: string | number) => `${param}`;
```

`example3.ts`に定義された型`Example3`を見ると戻り値はすべてstringです。
一方、第一引数は型は`undefined,string,number`の3種類が定義されています。
この場合、第一引数の型は3種類のいずれかであると解釈されます。
すなわち`params`の型は`undefined | string | number`になります。

`example3.ts`を省略記法で書くと`example4.ts`のようになります。

```ts:example4.ts
type Example4 = (param?: string | number) => string
const example4: Example4 = (param?: string | number) => `${param}`;
```

## ジェネリクスの使い方

### 省略記法

省略記法の場合、ジェネリクスは関数の引数の前に`<>`で囲んで定義します。

```ts:example5.ts
type Example5 = <T>(param: T) => T;
const example5: Example5 = param => param;
```

typeの変数名の右側にも書くことが可能です。
この場合は型アノテーションでジェネリクスの型を定義する必要があります。

```ts:example6.ts
type Example6<T> = (param: T) => T;
const example6: Example6<number> = (param) => param;
// 以下はエラー
// const example6: Example6 = (param) => param;
```

### 完全記法

完全記法の場合も省略記法と同様に関数の引数の前に`<>`で囲んでジェネリクスを定義します。

```ts:example7.ts
type Example7 = {
  (): string;
  <T>(param: T): string;
}

const example7: Example7 = (param?: number) => `${param}`;
```

typeの変数名の右側に書くことも可能です。
この場合は、複数の`(引数の型): 戻り値の型`に適用できます。

```ts:example8.ts
type Example8<T> = {
  (): T;
  (param: string): T;
  (param: number): T;
}

const example8: Example8<string> = (param?: string | number) => `${param}`;
```

## 参考

[プログラミングTypeScript](https://www.oreilly.co.jp/books/9784873119045/)
ゼロから始めるLeetCode Day68 「709. To Lower Case」

# 概要

海外ではエンジニアの面接においてコーディングテストというものが行われるらしく、多くの場合、特定の関数やクラスをお題に沿って実装するという物がメインである。

どうやら多くのエンジニアはその対策としてLeetCodeなるサイトで対策を行うようだ。

早い話が本場でも行われているようなコーディングテストに耐えうるようなアルゴリズム力を鍛えるサイトであり、海外のテックカンパニーでのキャリアを積みたい方にとっては避けては通れない道である。

と、仰々しく書いてみましたが、私は今のところそういった面接を受ける予定はありません。

ただ、ITエンジニアとして人並みのアルゴリズム力くらいは持っておいた方がいいだろうということで不定期に問題を解いてその時に考えたやり方をメモ的に書いていこうかと思います。

[Leetcode](https://leetcode.com/)

Python3で解いています。

[ゼロから始めるLeetCode 目次](https://qiita.com/KueharX/items/6ee2502c3b620c795b70)

前回
[ゼロから始めるLeetCode Day67 「1486. XOR Operation in an Array」](https://qiita.com/KueharX/items/3f12e797009caf8ce131)

今はTop 100 Liked QuestionsのMediumを優先的に解いています。
Easyは全て解いたので気になる方は目次の方へどうぞ。

[Twitter](https://twitter.com/kueharx)やってます。

**[技術ブログ](https://kueharx.blogspot.com/)始めました！！**
技術はLeetCode、Django、Nuxt、あたりについて書くと思います。**こちらの方が更新は早いので**、よければブクマよろしくお願いいたします！

# 問題

[709. To Lower Case](https://leetcode.com/problems/to-lower-case/)
難易度はEasy。

問題としては文字列パラメータ str を持ち、同じ文字列を小文字で返す関数 ToLowerCase() を実装する、という問題です。

>Example 1:

>Input: "Hello"
Output: "hello"

>Example 2:

>Input: "here"
Output: "here"

>Example 3:

>Input: "LOVELY"
Output: "lovely"


# 解法

```python
class Solution:
    def toLowerCase(self, str: str) -> str:
        return str.lower()
# Runtime: 24 ms, faster than 91.12% of Python3 online submissions for To Lower Case.
# Memory Usage: 14 MB, less than 15.17% of Python3 online submissions for To Lower Case.
```

`lower`を知っている人ならばこう書けば良いと思いますが、知らない上に調べる環境がない、もしくは組み込み関数を使わないで解いて、と実際の面接でパッと出されたらどうでしょう。

そういった状況も考えてみるとEasyですが意外と頭を使いそうです。

僕がパッと思い浮かんだのは辞書で管理するやり方です。keyに大文字、valueに小文字を格納し、for文で回して仮にkeyに該当する要素があればvalueの該当する要素へと変える、というものですね。
ただ、もう一つ思い浮かんだものとしてUnicode変換を使ったものができるのかも、と思い今回はそちらを実装しました。


```python
class Solution:
    def toLowerCase(self, str: str) -> str:
        ans = ''
        for s in str:
            if ord(s) >=  ord('A') and ord(s) <= ord('Z'):
                ans +=chr(ord(s) - (ord('A') - ord('a')))
            else:
                ans += s
        return ans
# Runtime: 28 ms, faster than 71.56% of Python3 online submissions for To Lower Case.
# Memory Usage: 13.8 MB, less than 69.29% of Python3 online submissions for To Lower Case.
```

`ord関数`を使って一旦UnicodeのUnicodeポイントへと変換し、比較します。
仮にそちらの値が範囲内であればUnicodeポイント分引き算をしてあげて、最終的に`chr関数`を使って文字列に直し、`ans`に代入。それ以外の場合は元々小文字なのでそのまま代入してあげれば大丈夫、という考え方です。


なお、補足のために貼っておきますが、Unicodeの一覧は以下のものとなります。
[Unicode一覧 0000-0FFF
](https://ja.wikipedia.org/wiki/Unicode%E4%B8%80%E8%A6%A7_0000-0FFF)

なかなか普段だったら考えない視点から考えられたのでとても面白かったです。
では今回はここまで。お疲れ様でした。
Xplenty中級編 Part3：正規表現を利用しデータ品質を担保する

Xplentyでは正規表現を利用することで、データ品質を担保することができます。

#予期しないデータ型のパイプライン内でのハンドリング方法
データソースからくるデータがいつも期待したデータが必ず送られてくるとは限りません。そういったケースでは、パイプライン内でデータの品質を保証することができます

例えば、CSVで以下のようなデータを扱う場合、「価格」列に期待される値は数値です。しかし、実際のデータは数値ではない、「500円」や「値なし」といったデータが入ってきたとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/5100b644-8333-c3ef-a08b-729bb4b56e05.png)

こういったことが想定される場合、Xplentyで取りうる解決策は、2種類の方法があります。

- 不正なデータをフィルタし、除外する
- 不正なデータがあった場合、ジョブをエラーで中止とする

##フィルタ機能で不正な価格データ検知する
まず、不正なデータを検知し、除外する場合、Filterコンポーネントを使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/4ee656a7-0428-9597-618c-609e5bb033fb.png)

Filterコンポーネント内でOperatorに「Text matchs(regex)」を選択し、数値のみの条件をセットします。
正規表現>整数値のみ： `^[+-]?[0-9]+$`

この場合、結果として上記の表の「**ステータス=NG**」のデータは、フィルタ条件に該当しないため、フィルタで除外されジョブの結果は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/bcae858c-2203-a549-4d34-522bb0ea4aca.png)

今回は単一条件ですが、複数条件を入力し、Conditionのオプションで「いずれかの条件に一致する(OR)」や「全ての条件を満たす（AND）」さらに「以下の条件のいずれでもない場合（NOT OR）」で複数の条件を設定することも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/19d91f54-b348-e00f-6db3-34f64ca66f5b.png)

また、上記だけで表現できない場合は、パイプラインで複数Filterコンポーネントを使用して表現したり、分岐処理で分けて表現するなど、より複雑な条件にも柔軟に対応可能です。

##アサート機能で不正な価格データを検知し、ジョブをエラー終了する
Assertコンポーネントは、条件にマッチした場合、ジョブをエラーとして中断する機能です。条件設定画面は、Filterと同様の設定画面なので、ここでは割愛しますが、条件にマッチした場合にエラーとしてジョブを終了させたい場合に便利です。また、以下のようにエラーメッセージを指定することが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/bb2815b5-6d39-1453-6d55-c1c8c3759d42.png)


#最後に
この他にも様々な正規表現を使右ことで、ニーズに応じて想定されている値かどうかをより柔軟に制御することができます。ぜひ、これらの機能をパイプラインと組み合わせることで、データ品質向上にお役立てください。
ActiveStorageでユーザーアバターの追加

## 概要
参考記事を元に使いやすくしたつもりです。
細かい内容は参考記事を確認してください。

## 環境
Ruby:  2.7.1
Rails: 6.0.2.2

**Gem**
gem 'image_processing', '~> 1.2'
(Rails6であればデフォルトでGemfileに入っているのでコメントアウトを外す）
gem 'rails-i18n', '~> 6.0'
(国際化（i18n)用。国際化しない場合でも便利)
gem 'mini_magick', '~> 4.10', '>= 4.10.1'
(ActiveStorageの画像を加工して表示できる)

## Modelにバリデーションを追加

```ruby:app/models/user.rb
class User < ApplicationRecord
  # ActiveStorageとUserを紐付け
  has_one_attached :avatar

  # バリデーション
  validate :validate_avatar

  # アバター画像のバリデーション内容
  def validate_avatar
    return unless avatar.attached?
    # 画像サイズの制限
    if avatar.blob.byte_size > 10.megabytes
      # エラーメッセージはi18nから取得
      errors.add(:avatar, :file_too_large)
    elsif !image?
      errors.add(:avatar, :file_type_not_image)
    end
  end

  # 拡張子でファイルの種類を確認
  def image?
    avatar.content_type.in?(%("image/jpeg image/jpg image/png"))
  end
end
```

## エラーメッセージをi18nで追加
[rails-i18n](https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/ja.yml)を元に、「avatar」、「file_too_large」、「file_type_not_image」を追加

```ruby:/config/locales/ja.yml
ja:
  activerecord:
    attributes:
      user:
        avatar: "プロフィール写真"
    errors:
      messages:
        record_invalid:       'バリデーションに失敗しました: %{errors}'
        restrict_dependent_destroy:
          has_one:            "%{record}が存在しているので削除できません"
          has_many:           "%{record}が存在しているので削除できません"
        file_too_large:       "はサイズが10メガバイト以内のものを選択してください"
        file_type_not_image:  "はjpg、jpeg、pngのみ選択できます"
```

## 画像の表示
こんな感じで表示できる。
variant以下は「mini_magick」による加工。
リサイズと、「strip: true」でEXIF情報を削除。

```erb.html
<!-- 存在の確認 -->
<% if @user.avatar.attached? %>
  <!-- 表示 -->
  <%= image_tag @user.avatar.variant(combine_options:{resize:"84x84^",crop:"84x84+0+0",gravity: :center}, strip: true).processed %>
<% end %>
```

## 参考
[Active Storage移行記：バリデーション編](https://tech-blog.sitateru.com/2018/11/active-storage.html)
[Railsのactive_storageとmini_magick使ってみる](https://qiita.com/sibakenY/items/e550166970e84d96e16e#active_storage%E3%81%AEvalidation)
[rails の validation error message の i18n 対応](https://blog.takady.net/blog/2016/12/09/rails-validation-error-message-i18n/)
PlayCanvas Engine v1.29.0 リリース！ソースコードがES6に対応とインポート方法の変更について


先日PlayCanvasのバージョンがv1.29.0にアップデートされました。
このバージョンから、ES6化とビルドの仕組みに変更がありました。

### 変更点


変更点はこちらのプルリクエストに詳細が書かれております。ビルドのスクリプトに大きな変更がありました。
詳細はこちらが参考になります。

- [膨大なES5 JavaScriptライブラリを、ES6モジュールおよびRollupJSに移行](
https://support.playcanvas.jp/hc/ja/articles/360050737593)

- [Port PlayCanvas to ES6 modules and rollup.js ](https://github.com/playcanvas/engine/pull/2166)

- [https://github.com/playcanvas/engine/releases/tag/v1.29.0](https://github.com/playcanvas/engine/releases/tag/v1.29.0)





### ビルド


`ClosureCompiler`を使用したビルド用の`build.js`が削除され、ビルドした際のパスが`build/output`からに変更されました`build`、ビルドのコマンドも1つにまとめられて簡単になりました。



ビルドはこちらのコマンドから実行できます。
今までと比べてソースコードからのビルドかなり高速になりました。

```bash
npm install build
```

もう一つですが、[engine](https://github.com/playcanvas/engine)のビルドの仕組みが変わり、アウトプットされるフォルダが`build/output/playcanvas.js` → `build/palycanvas.js`に変わりました。



### npmパッケージでの利用方法

v1.29から`playcanvas`のパッケージを使用する際に今まではデフォルトエクスポートされていたpcオブジェクトを使用しておりましたが、それぞれのモジュールとして個別にエクスポートされるようになりました。


```diff:script.js
-import pc from 'playcanvas';
+import * as pc from 'playcanvas';

class Script extends extends pc.ScriptType{
    initialize(){}
    update(){}
}
```




<font color="OrangeRed">
PlayCanvas開発で参考になりそうな記事の一覧です。
</font>
<font color="OrangeRed">
入門

- [PlayCanvas入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)
- [JavaScriptでスロットを実装する。【PlayCanvas】](https://qiita.com/yushimatenjin/items/e84c42da74df1eb07386)
- [3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】](https://qiita.com/yushimatenjin/items/4b09c9e2076a0b2a6933)
</font>
<font color="OrangeRed">
応用
</font>

- [PlayCanvasのコードエディターでes6に対応する](https://qiita.com/yushimatenjin/items/a61a21c64c1c1a550dd4)
- [Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)
- [PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む](https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d)
</font>
<font color="OrangeRed">
その他の記事はこちらになります。

- [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [【iOS13】新しくなったWebVRの使い方 ](https://qiita.com/yushimatenjin/items/344d86b3d193e0a88567)
</font>

<font color="OrangeRed">
その他関連
- [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)
</font>


### PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

[日本PlayCanvasユーザー会 - Slack](https://t.co/IdSRIfJhN5?amp=1)
UITextDocumentProxyのsetMarkedTextを(まだ)使ってはいけない

# 更新
「[iOSカスタムキーボードのsetMarkedTextの現状](https://zenn.dev/en3_hcl/articles/896fb7b52bf13b)」でiOS14.4現在の状況について書いています。

[2022-11-11追記]
導入しました。

https://zenn.dev/en3_hcl/articles/96c2d043fdaeac


# 概要
iOSのKeyboard Extensionを自作するとき、必ず触ることになるのが`UITextDocumentProxy`です。

iOS13からは`setMarkedText(_:selectedRange)`というメソッドが追加され、これを使うことで標準の日本語キーボードのような「入力中のテキストの背景の色が変わる」挙動が実現できるように思われます。

実際、4月に複数のキーボードで調べたところでは2つのKeyboard Extension([flick](https://apps.apple.com/jp/app/flick-%E3%83%95%E3%83%AA%E3%83%83%E3%82%AF/id923138396)と[Flick SKK](https://apps.apple.com/jp/app/flickskk/id944678753))が`setMarkedText()`を用いていると思われる挙動を示していました。

### 2020年8月17日追記
flickはデフォルトでこの機能を無効にしたと思われます。以前の挙動は設定から「インライン入力を可能な限り使う」をオンにすることで再現します。

# 挙動の詳細
チェックした環境はiOS 13.5.1のiPhoneSE(第1世代・第2世代)です。

![ezgif-6-0ef87aa0999a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638786/660f1254-3b66-cb00-e97c-28c1fd7b3e96.gif)

少し何が起きているかわかりにくいですが、消える瞬間にテキストをタップしています。標準キーボードを利用してきたユーザが期待する動作はカーソルの移動ですが、(何故か)入力中のテキストが全く見えなくなる挙動を示します。
これはFlick SKKについても同一です。そもそも`setMarkedText(_:selectedRange)`がこの挙動を示すので、当然といえば当然です。
#まだ使うべきではない
入力中のテキストの背景の色が変わるのは標準キーボードで当然の動作ですし、できれば実装したほうがユーザフレンドリーな動作です。が、それによってできることが著しく制限されます。実際に制限されるのは

 *  入力中の(キーボードを介さない)カーソル移動
    *  入力中の(キーボードを介さない)変換範囲の指定
    *  入力中の(キーボードを介さない)誤字の修正
 *  入力中の範囲外タップによる入力終了
    *  flickでは範囲外タップで入力中の文章が消滅する(仕様？)

などなどです。当然バグの温床でもあります。
さらに、この挙動を修正する方法は今のところありません。散々格闘しましたが、標準のキーボードはおそらく`setMarkedText`を使っていないんじゃないかと思います。もし詳しいことをご存知の方いらっしゃいましたら教えてください。
ただ、いろいろなKeyboard Extensionのレビューを見て見ると「入力中の文字の色が変わるようにしてくれ」という要望はかなり多いです。iOS12までは「appleに言ってくれ」が答えでしたが、iOS13では「appleに文句言ってくれ」と答えたいところでしょう。~~なんでappleはわざわざこんな使えないものを追加したんだ……。~~
# 参考
* [iOSカスタムキーボードの作り方](https://qiita.com/Kyome/items/4257de4e33d3647085e6)
* [setMarkedText(_:selectedRange:) | Apple Developer Documentation](https://developer.apple.com/documentation/uikit/uitextdocumentproxy/3152923-setmarkedtext)
React Nativeで画面回転時のレイアウト崩れに対応したら、KeyboardAvoidingViewが効かなくなった

以下の2本立てです。

- React Nativeで画面回転したらAndroidの場合にレイアウトが崩れてしまったので対応した
- 今度はKeyboardAvoidingViewが効かなくなったので代替策で回避した

**環境**

- React Native 0.61.5
- iOS 13.5.1
- Android 10

## React Nativeで画面回転したらレイアウト崩れが発生した

KeyboardAvoidingViewをrootに配置した画面をPortrait=>Landscape=>Portraitと回転させると、謎の空間が発生。AndroidでFlexが正しく動いていないような挙動をしました。

![名称未設定_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155314/7800cc01-9ab5-311f-c6bb-3f66f47e0f27.png)

ソースはこのような感じです。

```react:対応前
class Hoge extends React.Component {
  render() {
    return (
      <KeyboardAvoidingView
        style={{
          flex: 1
        }}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        // ...
      </KeyboardAvoidingView>
    );
  }
);
```

色々と解決方法を探して手当り次第試してみたところ、[StackOverflowで見つけた方法](https://stackoverflow.com/a/42334158/11276073)で、stateを介して再renderさせるようにすることで正しくレイアウトされるようになりました。

```react:対応後
class Hoge extends React.Component {
  _onLayout = () => {
    this.setState({ width: Dimensions.get('window').width }); 
  }

  render() {
    return (
      <KeyboardAvoidingView
        onLayout={this._onLayout}
        style={{
          flex: 1,
          width
        }}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        // ...
      </KeyboardAvoidingView>
    );
  }
);
```

これにて一件落着・・と思いきや、、

## 今度はKeyboardAvoidingViewが効かなくなった

上記の対応を行うことで、iOS・Androidともに、KeyboardAvoidingViewがキーボードを避けないただのViewと化してしまいました。

Viewの入れ子関係を入れ替えたり、色々試してみたがうまくいかず。結局KeyboardAvoidingViewをあきらめ、代わりに[KeyboardSpacer](https://github.com/Andr3wHur5t/react-native-keyboard-spacer)というライブラリを使うとうまくいきました。

```react:対応後(改)
class Hoge extends React.Component {
  _onLayout = ({nativeEvent}) => {
    const width = Dimensions.get('window').width;
    const height = Dimensions.get('window').height;
    const screenOffset = height - nativeEvent.layout.height;
    this.setState({ width, screenOffset });
  };

  render() {
    return (
      <View
        onLayout={this._onLayout}
        style={{
          flex: 1,
          width
        }}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        // ...
        <KeyboardSpacer topSpacing={(-1) * this.state.screenOffset} />
      </View>
    );
  }
);
```

はじめはAndroidで思うように機能しませんでしたが、AndroidManifestに `windowSoftInputMode="adjustResize"` を指定するとうまく動くようになりました。

また、ReactNavigationのBottomTabNavigatorを使用しているため、WindowのサイズとViewのサイズの差分を計算し、 `KeyboardSpacer` の `topSpacing` に設定しています。

## おわりに

画面回転つながりで、iPhoneでLandscapeにしたときにステータスバーが消える影響でレイアウトが崩れる問題も発生していたので、ステータスバーの高さをstoreで管理するようにしたりしました。
こういう小細工が色々と必要なのがツラいところです。

そろそろ温泉にでも行きたいですねぇ。
AWSでデプロイしちゃおうってわけ(AWS登録補足編)

どうもこんにちは。
今日は暑いですね。
そろそろ転職の準備をしなければいけない段階に入りました。:runner_tone2:

個人アプリ実装って難しいですね。
何作りたいとか無いですが、自分のスキルを示すには必要なもの。
でもありきたりなもの作っても意味ないし、複雑すぎても間に合わないし。
うーん悩みどころですね。

話がそれました。

今回はAWSの登録が済んだということでリージョンの編集です。

# 1そもそもリージョンってなんぞや

そうですよね。
カタカナって難しいですよね。

###　リージョンとは== データセンターが存在する独立した地域

わかりませんねぇ。
うーん。

カリキュラムによると

##AWSの物理的なサーバの場所を指定するものです

こっちのがなんとなくピンとくるな！！

リージョンは世界各地に10箇所以上あるらしく、そのうちの一つが東京にあるとのこと。

なのでこのリージョンを東京に設定すれば良いのです。

<img width="1430" alt="スクリーンショット 2020-06-26 17.29.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596765/723705ca-ca1a-a317-5a0b-9952ec25d1d0.png">

※おそらく最初はシンガポールとかになっているはず。

ここでちゃんと東京に設定しておかないとこの後のEC2に影響が出るので意外と大事なとこなのよっ！！:fist_tone1:
Laravelで"have you enable the php_fileinfo extension?"のエラーでハマったときの解決法(WIN)

# 概要
laravelでアプリケーションを制作していて、画像ファイルのアップロードの際に
Unable to guess the MIME type as no guessers are available (have you enable the php_fileinfo extension?).
のエラーメッセージが出て解決するのに苦労した話を聞いてほしくて記事にする。
![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236727/a71772a4-8a52-b630-e693-026889bd1bd7.png)


# 環境
OS: Windows10 バージョン1909
Laravel: 7.16.1
PHP: 7.4.1
開発環境に[MAMP](https://www.mamp.info/en/windows/)を使用

# 解決策
php.iniに
`extension=php_fileinfo.dll`
を追記する

# 解決までの奮闘記
まずはエラーメッセージの内容を把握(エラーメッセージで検索をかけるなどする)
どうもphp_fileinfoという拡張モジュールがないからMIME typeが推測できねぇ、おまえphp_fileinfo持ってる?
みたいなことを言われてるらしい

ほう

そこでphp_fileinfoで検索するといくつかの参考になりそうなサイトが出てきました。
[【PHP】PHP extension（PHP拡張モジュール）の確認と有効化（ext-fileinfo、ext-gd編）](https://qiita.com/sola-msr/items/95e06e66730468b6c7bc)
[PHP: Fileinfo - Manual](https://www.php.net/manual/ja/book.fileinfo.php)

記事の中では
php.iniというファイルにいる
`;extension=php_fileinfo.dll`を
`extension=php_fileinfo.dll` こう
コメントを外して有効化しましょうということでした。

ですが、php初心者の私はphp.iniがどこにいるかわかりません。
`php.ini どこ` や `php.ini MAMP`などで検索して以下のような参考サイトを見つけました。

[php.iniファイルの場所／PHPのバージョン確認・変更 - MAMPの使い方](https://webkaru.net/php/mamp-php-ini-file-locate/)
[もういい加減覚えよう。php.iniはどこにあるのか](https://qiita.com/ritukiii/items/624eb475b85e28613a70)

記事によるとMAMPでOpen web start pageした後のphpinfoの中にphp.iniのありかが書かれているようでした。
私の場合は以下のような場所
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236727/00d18bb7-34f7-02f6-add9-0929022ed379.png)

よっしゃ見つけた。
と思って意気揚々とphp.iniを開いたのですが
いくら探せどphp_fileinfoという文字列が見つかりません。

fileinfoで検索したときはどこのサイトも
`;extension=php_fileinfo.dll`を
`extension=php_fileinfo.dll` こう
と言ってます。ですがコメントを外そうにもそもそもないのだから始末が悪い
勝手に追記していいものか判断がつかなかったので、もう少し調べて見ることにしました。


いくつかのサイトやディレクトリを漁っているうちに
`C:\MAMP\bin\php\php7.4.1\ext`
の中にphp_fileinfo.dllがあるのを発見しました。
しかし上記php.iniの場所は
`C:\MAMP\conf\php7.4.1\php.ini`
であり微妙に違います。
ですが、MAMPのphpのバイナリは`C:\MAMP\bin\php\php7.4.1\`のなかに`php.exe`があるので
コンフィグファイルとバイナリが別の場所にいるだけで
コンフィグファイルに書いとけばphpがよしなにやってくれるのでは思い
`C:\MAMP\conf\php7.4.1\php.ini` の中に
`extension=php_fileinfo.dll` を追記しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236727/7cf1c486-7f16-a3a7-f836-7eee9a665704.png)



そしてサーバー再起動し、いざ画像のアップロードを試したところ
無事アップロードできましたとさ
めでたしめでたし

# あとがき
なぜphp.iniにphp_fileinfoの記載がなかったのか未だ謎ですが
phpのバージョンなのかMAMPが原因なのかわかりません。知っている方いたら教えてください。
phpが嫌いになるとこでした、無事解決してよかったです。
同じような不具合に悩まれてる方の助けになれば幸いです。
railsでgoogle認証を実装するときにハマったこと

今回は、自分がrailsでgoogle認証を実装するときにハマったことをまとめたので参考にでも。
自分がGoogle認証を実装するときに参考にした記事 ↓
[[Rails] Facebook/Twitter/Googleでのユーザー登録をDevise & Omniauthを使って爆速で実装する](https://qiita.com/kazuooooo/items/47e7d426cbb33355590e)

##エラー 400: invalid_request Missing required parameter: client_id
まず１つ目。グーグル認証のページでアカウントを選択肢して認証しようとしたときに出たエラーです。
client_idがないと言われました。
原因は２つあり
①スペースを入れていた
②.envを使わずそのままキーを入れていたこと

①スペース

```ruby:devise.rb
config.omniauth :google_oauth2, ENV['GOOGLE_CLIENT_ID'] ,ENV['GOOGLE_CLIENT_SECRET'], skip_jwt: true
```
から

```ruby:devise.rb
config.omniauth :google_oauth2,ENV['GOOGLE_CLIENT_ID'],ENV['GOOGLE_CLIENT_SECRET'],skip_jwt: true
```
に変更しました。スペースがいらなかったみたいです。参考サイトではスペースはありました。

②.envを使わずそのままキーを入れていたこと
これは他のサイトを見る限りそのままでも行けた人がいるみたいですが僕の環境ではだめでした。
どうしても解決しない人はgem 'dotenv-rails'をいれてやってみてください。

##メール認証がされていません
その次に出たのがこのエラー
普通にやるとメール認証がされていませんと表示されてしまいます。これは

```ruby:qiita.rb
class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController

  # callback for google
  def google_oauth2
    callback_for(:google)
  end

  # common callback method
  def callback_for(provider)
    @user = User.from_omniauth(request.env["omniauth.auth"])
    @user.skip_confirmation!   ←これと
    @user.save!                ←これ！
    if @user.persisted?
      sign_in_and_redirect @user, event: :authentication #this will throw if @user is not activated
      set_flash_message(:notice, :success, kind: "#{provider}".capitalize) if is_navigational_format?
    else
      session["devise.#{provider}_data"] = request.env["omniauth.auth"].except("extra")
      redirect_to new_user_registration_url
    end
  end

  def failure
    redirect_to root_path
  end
  
end
```

@user.skip_confirmation!
@user.save!
をコントローラーに入れることで解決しました。

####ぷち宣伝
[公開日記](https://public-diary.herokuapp.com/)というアプリを作りました。日記を公開できるアプリです（公開しないことも可）使っている人が僕しかいません（泣）。ほぼ毎日更新しているのでみてください。お願いします。

URL: https://public-diary.herokuapp.com/

##まとめ

実は僕はいままで4回くらいsns認証を実装しようとし失敗しを繰り返しています。今回始めて出来たのですができたときはかなり嬉しかったです。ここまで見てくださりありがとうございました。
GitHub Pages に Vue.js を Hosting する

[GitHub Pages](https://help.github.com/ja/github/working-with-github-pages/about-github-pages) は静的ページや SPA を無料でサクッと公開したい時に便利ですね。
でも、dist/ ではなく docs/ に成果物を配置する必要があります。

## やり方

プロジェクト直下に [vue.config.js](https://cli.vuejs.org/config/#outputdir) を作成します。

~~~vue.config.js
module.exports = {
  outputDir: './docs',
}
~~~

ビルドすると docs/ 以下にビルドしてくれます。

~~~
$ yarn build
~~~

あとは master に `$ git commit` して `$ git push` すれば反映されるはずです。
2020年だしWordPressのプラグインを見直した

WordPressで構築されたブログを２個ほど持っているのだが、最近のWordPress動向（特にプラグイン）についていけなくなっていたので改めて情報を収集しなおしてみた。

## システムまわり

### [WP Multibyte Patch](https://ja.wordpress.org/plugins/wp-multibyte-patch/)

2018年末にリリースされたWordPress5.0でデフォルトから外れたが、マルチバイト文字ファイルのアップロード周りの不具合にも対応しているので入れた方が良さそう。

### [Akismet Anti-Spam](https://ja.wordpress.org/plugins/akismet/)

デフォで入っているし必要。

### [Jetpack by WordPress.com](https://ja.wordpress.org/plugins/jetpack/)

ほぼデフォみたいなもの。

## 表示まわり

### AMP対応

以前は[AMP for WP – Accelerated Mobile Pages](https://ja.wordpress.org/plugins/accelerated-mobile-pages/)が定番だったがAMPプロジェクトによる公式の[AMP](https://ja.wordpress.org/plugins/amp/)が出ているのでそっちの方がいい気がする。

### Analytics

以前は[Google Analytics Dashboard Plugin for WordPress by MonsterInsights](https://ja.wordpress.org/plugins/google-analytics-for-wordpress/)が定番だったが、今は[Site Kit by Google](https://ja.wordpress.org/plugins/google-site-kit/)というGoogle謹製のAnalytics, Search Console, Adsenseの連携ツールがあるのでそれで良い気もする。
MonsterInsightsの優位性は[公式ブログが記事を書いている](https://www.monsterinsights.com/google-site-kit-the-good-the-bad-the-ugly/)のでそちらを参照。

## セキュリティ

### [Easy Updates Manager](https://ja.wordpress.org/plugins/stops-core-theme-and-plugin-updates/)

アップデート管理ができないのなら入れておきたい。

### [SiteGuard WP Plugin](https://ja.wordpress.org/plugins/siteguard/)

なるべく設定で全部有効にしたい。

### バックアップ

いまだに無料だとどれが良いのか不明。
お金を出せるのならJetpackのバックアップ機能が良さそうではある。

## もう要らなそう

### Classic Editor

流石に新エディタには慣れたので。

### SEO

世界的には[Yoast SEO](https://ja.wordpress.org/plugins/wordpress-seo/)、日本では[All in One SEO Pack](https://ja.wordpress.org/plugins/all-in-one-seo-pack/)が定番だが、今の検索エンジンのアルゴリズムはWordPressをかなり正確に扱えているはずなので、SEO関係のプラグインを入れたところで改善する部分があるのかという疑問がある。
実際SEO会社のブログでもこれらのSEOプラグインを入れていないところのほうが目立つ（入れているのを調べきれてないパターンもあると思うが）。

## まとめ

WordPress関係の情報は数が多すぎて正しい情報を精査しにくい。
書籍でも最新プラグインにまで触れているものがないので地道に調べるしかなさそう。
ユーザー一括登録用のシェル作りました

# はじめに
ユーザー登録を画面でポチポチしたくなかったのでツールを探したのですが、初期登録をイメージしているのか、「ユーザー登録時にユーザーへメール通知」が出来るツールが見当たらなかった※ため、自作することにしました。
※正確に書くと「Python」製は見つけたんですが、今の現場では利用できないので諦めました。
 
# 前提条件
### 環境
jsonファイルに加工するために「 [jq](https://stedolan.github.io/jq/) 」を利用しています。
なおjq自体のインストールは色々な方が紹介しているので割愛とします。

* CentOS Linux release 7.8.2003 (Core)
* 3.4.11.stable
* jq-1.6

# 実装
### CSVファイル
~~~
# cat test.csv 
login,password,lastname,firstname,mail,must_change_passwd,send_informatio
regTest01,password,姓,名,regTest01@example.com,true,true
~~~
「"(ダブルクォーテーション)」は利用しません。
利用する必要が場合は、後述するjson加工時に「-r」オプションを利用する等でいい感じにしてください。

### マッピングファイル
~~~ json
# cat mapping.jq 
split("\n")|map(split(","))|
   map({"user":{"login":.[0],
        "password":.[1],
        "lastname":.[2],
        "firstname":.[3],
        "mail":.[4],
        "must_change_passwd":.[5]
       },
       "send_information":.[6]
})
~~~
「send_information」にtrueを設定することで、メールで登録情報が通知されます。
### シェル
~~~ shell
# cat register.sh
#!bin/bash
## define
key=xxxx # adminのAPIキー
redmine_url=http://xxx.xxx.xxx.xxx/ # redmineのURL
regist_path=users.json

## main
cat test.csv | while read line
do
  echo ${line} | jq -R -f mapping.jq | jq . -c | sed -e 's/\[//g' -e 's/\]//g' > registUser.json
  curl -v ${redmine_url}${regist_path}?key=${key} --header 'Content-type: application/json' --data @registUser.json
# APIキーではなくログイン情報でも登録可能
# curl -v ${redmine_url}${regist_path} --user admin:password --header 'Content-type: application/json' --data @registUser.json
done
~~~
読み込んだcsvを1行ずつjsonデータに加工し、一時ファイルとして出力。
そのファイルをRedmine REST APIに渡して登録します。
json加工時の「sed」は、加工したデータの先頭と末尾に「[」「]」が付与されてしまっていたので、除外しています。

# 参考
* jqコマンドでCSVをJSONに変換してElasticSearchに登録する
https://qiita.com/mj69/items/80a3a18210a4fa28ff44

* Redmine REST API:Users
https://www.redmine.org/projects/redmine/wiki/Rest_Users#POST

* Redmineワンポイントチェック(9): REST APIを使ってユーザーを一括登録する
http://blog.redmine.jp/articles/opc/user-rest-api/
Bitrise の接続先を、AWS CodeCommit から GitHub に変更する

# ０．はじめに

iOS や Android アプリについて、

* ビルドやデプロイに [Bitrise](https://www.bitrise.io) を、

* コードのバージョン管理に [AWS CodeCommit](https://aws.amazon.com/jp/codecommit/) を、

利用させて頂いてたんですが…、

* [AWS CodeCommit から Bitrise に接続する \- Qiita](https://qiita.com/kusokamayarou/items/3b4f20bd47295ef56ca2)

この度、バージョン管理を [GitHub](https://github.com) へ移行することとなりまして…、

せっかくなので、手順をシェアしておこうかなと。

# １． [Bitrise](https://www.bitrise.io) から [GitHub](https://github.com) へ接続用の SSH 公開鍵と秘密鍵を作成する。

1. 以下のコマンドを実行します。
    * `ssh-keygen -m PEM -t rsa -b 4096 -P '' -f ./bitrise-ssh`
        * [Bitriseで自分の作った秘密鍵を登録する🔑 \- Qiita](https://qiita.com/Jung0/items/13cd9f6313b7137ac8c6)
2. 作成された公開鍵と秘密鍵を確認します。
    * 秘密鍵 : `./bitrise-ssh`
    * 公開鍵 : `./bitrise-ssh.pub`

# ２． 作成した SSH 公開鍵を [GitHub](https://github.com) へ登録する。

1. [Bitrise](https://www.bitrise.io) に接続する [GitHub](https://github.com) アカウントの「SSH and GPG keys」画面を開きます。
    * [SSH and GPG keys](https://github.com/settings/keys)
1. 「SSH keys」欄の「New SSH key」ボタンを押下します。
    * ![FireShot Capture 391 - SSH and GPG keys - github.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/b7ed35bc-f5df-5c50-c151-d138ed8a25e2.png)
1. 「SSH keys / Add new」画面で、以下の項目を設定し、「Add SSH key」ボタンを押下します。
    * Title : ※任意
    * Key : ※作成しておいた公開鍵の内容
    * ![FireShot Capture 393 - Add new SSH keys - github.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/46ee7a6f-9217-d971-b9f8-fb7b396f78df.png)
1. 登録された内容を確認します。
    * ![FireShot Capture 394 - SSH and GPG keys - github.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/6ba2bacc-843e-7f6e-5012-35d52445ca2a.png)

# ３． 作成した SSH 秘密鍵を [Bitrise](https://www.bitrise.io) へ登録する。

1. [Bitrise](https://www.bitrise.io) の対象となる APP の設定画面を開きます。
1. 設定画面の 「Change SSH keypair」欄で、以下の項目を設定し、「I've added the Public Key」ボタンを押下します。
    * SSH Private Key : ※作成しておいた秘密鍵の内容
    * ![FireShot Capture 396 - Conne-iOS - Bitrise - app.bitrise.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/2f1303d4-8ce8-5df3-5437-2cc10851360d.png)

# ４． [Bitrise](https://www.bitrise.io) に設定されている接続先リポジトリの URL を、 [AWS CodeCommit](https://aws.amazon.com/jp/codecommit/) から [GitHub](https://github.com) へ変更する。

1. 設定画面の 「App settings」欄で、以下の項目を設定し、「Save changes」ボタンを押下します。
    * REPOSITORY URL : ※[GitHub](https://github.com)のリポジトリ
        * 例 : `git@github.com:genbasupport[Organization 名]/[リポジトリ名].git`
            * 元 : `ssh://[SSH キー ID]@git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/[リポジトリ名]`
    * ![FireShot Capture 395 - Conne-iOS - Bitrise - app.bitrise.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/c1f420e1-2c6f-868c-4c88-cc757e4b566c.png)

# ９９．ハマりポイント

* 今回は、ちょっとハマるぐらいでした。

* やっぱり [Bitrise](https://www.bitrise.io) のノウハウは少なめな気がする…。

# ＸＸ．まとめ

以上、ご参考になれば ♪♪♪

👋👋👋
【EC2】seleniumでの日本語文字化けを防ぐ（noto対応）

# 日本語サイトの文字化けを防ぐ
## 環境
- Red Hat Enterprise Linux release 8.2
- google-chrome-stable-83.0.4103.116
- python3.6
- selenium 3.141.0

## 一行
その他諸々は既にインストール済という前提（参考情報参照）

```sh
sudo yum install google-noto* -y
```

おしまい！

## 参考情報
[Amazon LinuxでSelenium環境を最短で構築する - Qiita](https://qiita.com/onorioriori/items/4fa271daa3621e8f6fd9)
[【EC2】seleniumでキャプチャしたときの文字化けを防ぐ - Qiita](https://qiita.com/yuta-38/items/d2a82d9fefcd50452cb4)

参照するリポジトリの問題か、IPAフォントが入れられなかったので、yumでgoogle-noto探したらあったので解決。
【Nuxt.js】Nuxt文法編：v-slot(中級)

# 分割代入

簡単にいうと別の場所で
別の変数名をきめれて
値を代入できること
MDN分割代入

というより見た方が早いですね👀
親で子の値を使えちゃいます！


**❓どんな時に使うか**
　まとまったdataを子で管理したい時に使います！

```Text.vue
<template>
 <div class="title title-page">
   <slot v-bind:user="user">
     {{ user.lastName }}
   </slot>
 </div>
</template>

<script>
export default {
 data () {
   return {
     user: {
       firstName: 'first',
       lastName: 'last',
     },
   }
 },
}
</script>
```

```index.vue
<template>
 <div class="page">
   <Text>
     <template #default="sample">
       {{ sample.user.firstName }}
     </template>
   </Text>
 </div>
</template>

<script>
import Text from '~/components/Text.vue'

export default {
 components: {
   Text,
 },
 data () {
   return {
   }
 },
}
</script>
```

# 動的なスロット名


まずは動的引数を理解しましょう💡
https://jp.vuejs.org/v2/guide/syntax.html#動的引数


**【解説/index.vue】**
・<a :[attributeName]="url"> リンク </a>
　これと全く同じです❗️
　<a :href="url">リンク</a>

```Link.vue
<template>
  <a :[attributeName]="url"> リンク </a>
</template>

<script>
export default {
 data () {
   return {
     attributeName: "href",
     url: "/"
   }
 },
}
</script>
```

```index.vue
<template>
 <div class="page">
   <Link />
 </div>
</template>

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

export default {
 components: {
   Link,
 },
}
</script>
```

## これをslotで…

できるのですが、
簡単な方法があります！笑

v-bind="$attrs"
これを使います！

**【解説】**
属性自体を親から渡したい時
v-bind="$attrs"を使います💡
今回の場合はaタグの
href属性ごと渡してます。

```Link.vue
<template>
  <a v-bind="$attrs">リンク</a>
</template>

<script>
export default {
}
</script>
```

```index.vue
<template>
 <div class="page">
   <Link
     href="/"
   />
 </div>
</template>

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

export default {
 components: {
   Link,
 },
}
</script>
```

# まとめ

置き換えのできる3つをまとめました！

slot：テキスト
props：それ以外、クラス付与などに便利
v-bind="$attrs"：属性自体
VSCodeを離れないで英文を翻訳しよう

# はじめに
英論を書いていました．
その中で，スペルミスチェックなどをできるだけ楽に行いたかったので，VSCodeの拡張機能を導入してみました．

# 環境
- OS: `Windows10 Home`
- VSCode: `1.38.1`

# 手順
## VSCodeに拡張機能を導入する
導入する拡張機能は`Vscode google translate`です．

<img width="534" alt="20190925122100.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/3ba33cf5-1811-3ef0-6f21-630c0d891881.png">

自分が導入したバージョンは`1.4.2`です．

## キーバインドを設定する
公式のサイトだと，「選択した状態で`ALT+SHIFT+T`を押せばイケるよ！」みたいなことが書いてありました．

けれど自分はできなかったので，キーバインドを設定しました．

まず`ctrl+shift+p`でコマンドパレットを開いて`key`と入力します．

![20190925121936.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/cf136da8-a458-1807-5f55-240d7ef9879f.png)

出てきた`Preference: Open Keyboard Shortcuts (JSON)`を開きます．

ここに以下を追記します．

```
{
    "key": "ctrl+alt+t",
    "command": "extension.translateLinesUnderCursor",
    "when": "editorTextFocus"
}
```

`"key": `の部分は自分が好きなものに変えましょう．

しっかり保存することも忘れずに．

## 使ってみる
ちゃんと設定できているかの確認をします．

適当なテキストファイルで英語を書きます．

<img width="438" alt="20190925122248 (2).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/cc78df3f-13f0-5463-564e-92c7fe8aa843.png">

これを選択して，さっき設定してキーバインドを押します．
僕の場合は`ctrl+alt+t`を押しました．
するとコマンドパレットが出てくるので，jaとか適当に打ってjapaneseを選択します．

<img width="447" alt="20190925122252.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/2ed944c9-bfd4-40c7-af9d-39914ecf6745.png">

これで翻訳できるはずです．

<img width="381" alt="20190925122256.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/6622c488-3293-3903-4577-1b2138f0a7ec.png">

<img width="350" alt="20190925122300.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/1504bafd-529f-7676-e801-e93336fa9ba0.png">

***！？***

# おわりに
とりあえず普通の英文は翻訳できるみたいです．