OmniAICreator/Qiita-1.07M huggingface dataset:
[Pipenv]”Could not find a version that matches xxx”で突然 Install Errorが発生した件

# 事象
Pythonの開発環境は、最近流行りの**Pipenv**使ってるのですが、突然パッケージインストール時に以下のErrorが発生しました。。。

```
ERROR: ERROR: Could not find a version that matches autopep8
No versions found
Was https://pypi.org/simple reachable?
```

ちなみに、実行コマンドは
``` pipenv install ipython-sql
```

# なんで？ (仮説)
正直、いろいろ調べたんですが、根拠不明です。。。。
とりあえず、やったことから逆説的に原因を推測してます。
### 原因
1. xcodeがUpdateされて、バージョン上がった
2. xcode-selectもバージョンアップされて、利用規約同意が必要になった
3. 結果、インストール時にxcode-selectが必要な処理の段階でError -> ここは推測
    4. 今回は、パッケージのバージョン参照処理でxcode-selectが必要だった
    5. xcode-selectが使えないので、バージョン参照できずにError

### なんで気づいたの？
いろいろ調べて、とりあえず
brew update, upgredeやってみたら、処理中に*xcode-select install*してねってメッセージが出た。
おや？と思い、AppStoreでアップデートを確認。
すると、xcodeが直近でアップデートされてた。。。いつの間に。。。。
とりあえず、Python環境構築で、xcode-select必要だったから、もしやと思い、xcode-selectのアップデート(特に*利用規約同意が重要*)してみたら、解決した。。。

# 最後に
はじめまして。Qiita初心者で初投稿です。
仕事のみでプログラミングしてましたが、最近プライベートでもいろいろ独学でプログラミングを始めたので、気楽に、Qiita投稿始めることにしました。
割とエラー遭遇率も高い気がするので、少しでも共有できればと。
書き方などに関する指摘大歓迎です。これから、よろしくお願いします。
動的(インタラクティブ)なグラフ図示(Jupyter + ipywidgets interact)

競技プログラミングの問題を解く上では、あたりをつける上で図示は有効となるケースが多い。この際に入力の値を変化させることでさらに効果的となることがおおい。jupyterを用いると以下のようなインタフェースをすぐに実現できる。
![gif3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30938/4774ffb7-11e4-6baf-7160-095a7da7664b.gif)


# 題材
Educational Codeforces Round 80 A.Deadline https://codeforces.com/contest/1288/problem/A
N,d,xが1以上の正の整数で、$ d \leq x $ のとき、以下を満たすxがあるか調べろ。
$$ n \geq \left\lceil \frac{d}{x+1} \right\rceil + x $$ ここで$\lceil a \rceil$ は（ガウス関数ではなく）a以上の最小の整数である(例: 3.1なら4, 3なら3)

# 静的な図示
問題のサンプルでNO, YESとなる例をそれぞれ左、右に示す。これは単にmatplotlibの機能を使えばよくすぐにかける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30938/1677a157-6150-9bed-9501-abe7f2b3119f.png)
青が$y=n$の線で黄が$ y= \left\lceil \frac{d}{x+1} \right\rceil + x $、緑は天井関数をかける前のプロットである。

このように示すことで、`青の線と黄色の線の交点が存在するかでYES/NOが決まる`ことが分かる。（もちろん、不等式なのだからこれは自明なのだが...)

```Python
%matplotlib inline
import matplotlib.pyplot as plt
from ipywidgets import interact
import numpy as np

fig, (axL, axR) = plt.subplots(ncols=2, figsize=(10,4))

n,d = 5,11
xaxis = yaxis = 8
x = np.linspace(1, n, num = 100)
y1 = [n] *100
y2 = np.ceil(d / (x + 1) ) + x
y3 = d / (x + 1) + x
axL.plot(x, y1)
axL.plot(x, y2)
axL.plot(x, y3)
axL.set_xlim(0, xaxis)
axL.set_ylim(0, yaxis)
axL.grid(True)

n2,d2 = 5,4
xaxis = yaxis = 8
x2 = np.linspace(1, n2, num = 100)
y21 = [n2] *100
y22 = np.ceil(d2 / (x2 + 1) ) + x2
y23 = d2 / (x2 + 1) + x2
axR.plot(x2, y21)
axR.plot(x2, y22)
axR.plot(x2, y23)
axR.set_xlim(0, xaxis)
axR.set_ylim(0, yaxis)
axR.grid(True)

fig.show()
```

# 動的な図示
interactを使うとn, dを可変に動かすスライダーができる。

![gif2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30938/d954b90d-2125-1f68-c270-4e1b6ccf36af.gif)

```Python
%matplotlib inline
import matplotlib.pyplot as plt
from ipywidgets import interact
import numpy as np

d = 20
n = 20
import math

xaxis = yaxis = 20
nlimit = 20
dlimit = 100

@interact(n=(1, nlimit), d = (1,dlimit))
def f(n, d):
    x = np.linspace(1, n, num = 100)
    y1 = [n] * 100
    y2 = np.ceil(d / (x + 1) ) + (x)
    y3 = d / (x + 1) + x
    plt.xlabel("x-axis")
    plt.ylabel(" y-axis")
    plt.plot(x, y1)
    plt.plot(x, y2)
    plt.plot(x, y3)
    plt.xlim(0, xaxis)
    plt.ylim(0, yaxis)
    plt.grid(True)
    plt.figure(figsize=(1,1))
    plt.show()
```
PHP ImagickでPDFを透過なしpng画像として出力する

#概要

ImageMagickのPHPモジュールImagickでPDFを読み込んでpng画像化します。
何もしないと背景が透明になるため、白背景で透過無しのpng画像とします。

2020.02.02修正
背景色を白にする処理によって、１ページしか書き出されない状態が発生しており、修正しました。

##コード

```php

<?php

//入力ファイル名
$pdf_filename = 'test.pdf';
//出力ファイル名　※書き込み権限のあるディレクトリであること！
$out_filename = 'output/test.png';

//ImageMagick宣言
$imagick = new Imagick();
//ファイル読み込み前に、解像度の設定
$imagick->setResolution(96,96);
//PDFファイル読み込み
$imagick->readImage($pdf_filename);
//ページ数をカウントする
$page_count = $imagick->getimagescene();
for($i = 0; $i <= $page_count; $i++) {
	//背景色を白に設定
	$imagick->setimageindex($i);
	$imagick->setImageBackgroundColor('#ffffff');
	$imagick->setImageAlphaChannel(Imagick::ALPHACHANNEL_REMOVE);
	$imagick->mergeImageLayers(Imagick::LAYERMETHOD_FLATTEN);
}
//書き出し形式をpngに設定
$imagick->setImageFormat('png');
//ファイル書き出し。サーバーの絶対パスを指定する
$imagick->writeImages(dirname(__FILE__).'/'.$out_filename, false);
//最後にオブジェクト破棄
$imagick->destroy();

```

これで、PDFが１ページのみの場合は、test.pngが、複数ページある場合はtest-1.png、test-2.png、test-3.pngという連番ファイルが保存されます。

#参考
https://www.php.net/manual/ja/class.imagick
https://stackoverflow.com/questions/17970421/imagick-make-black-background-white
http://319ring.net/blog/archives/2218/
Raspberry Pi4 性能比較

# Raspberry Pi4 性能比較
NFS 用に Raspberry Pi4 (4GBモデル) を購入したので
オレオレベンチマークで性能を比較してみる

# 使用機材

| | Raspberry Pi 4 | Raspberry Pi 3B+ | NUC | Mac mini | desktop | 
|:---:|:---:|:---:|:---:|:---:|:---:|
|CPU| ARM Cortex-A72 | ARM Cortex-A53 | Celeron N2830 | i5-4278U | i3-9350KF|
|周波数 [GHz]| 1.5 | 1.4 | 2.16-2.41 | 2.6-3.1 | 4.0-4.6|
|コア/スレッド|4/4|4/4|2/2|2/4|4/4|
|MEM| LPDDR4 4GB | LPDDR2 1GB | DDR3 8GB | DDR3 8GB | DDR4 16GB|
|OS| Raspbian 10.2 | Raspbian 10.2 | CentOS 7 | Catalina | Ubuntu 18.04|

# 使用ベンチマーク
## pipbench（自作）
[ソースコード:Github](https://github.com/soleiyu/pipbench_golang)
マルチコアによるマンデルブロ集合描画プログラム
計算部分のみの時間測定
解像度は 1920 x 1080
![res.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253609/953aee5a-253f-efd1-e02d-5452b0f1873a.png)

## FFmpeg
動画エンコード
4k webm -> FHD mp4 / 25Mbps / H264

```
ffmpeg -i hoge.webm -b:v 25M -vf scale=1920:-1 -c:v h264 res.mp4
```
個人的には使わない類のエンコ

## SCP
ファイル転送比較（ローカル）
379MB の動画転送


# 結果

| | Raspberry Pi 4 | Raspberry Pi 3B+ | NUC | Mac mini | desktop | 
|:---:|:---:|:---:|:---:|:---:|:---:|
|pipbench [s]| 23.2 | 117.4 | 46.7 | 12.1 | 6.4|
|FFmpeg [speed]| 0.159 | 0.0392 | 0.145 | 0.372 | 0.951|
|SCP [MB/s]|43.9|10.9|(14.3:global)|108.0|110.5|

![IMG_2124.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253609/c6e357b6-92fc-0829-2f0b-1efb87ebcdb5.png)
![IMG_2125.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253609/ce84722e-57c6-0b7b-1a48-5263a2d782a1.png)
![IMG_2126.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253609/94db4229-5396-b9b0-034a-9f8d683bc0fb.png)


#　結論
一般的なPCには届かないかもだけど
Ras pi 3 を使う必要はもうないよねってね
WSL + Ubuntu 上でdocker-composeを動作させる

# 確認環境
📀WSL with Ubuntu 20.04LTS
📀WSL with Ubuntu 18.04LTS

# docker のインストール
[公式](http://docs.docker.jp/engine/installation/linux/docker-ce/ubuntu.html)の通りに、Docker CEをインストールします。

Docker の公式 GPG 鍵を追加します。

```
$ sudo apt-get update
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```

鍵の fingerprint（フィンガープリント）が `9DC8 5822 9FC7 DD38 854A E2D8 8D81 803C 0EBF CD88` と表示されるのを確認します。

```
$ sudo apt-key fingerprint 0EBFCD88

pub   rsa4096 2017-02-22 [SCEA]
      9DC8 5822 9FC7 DD38 854A  E2D8 8D81 803C 0EBF CD88
uid           [ unknown] Docker Release (CE deb) <docker@docker.com>
sub   rsa4096 2017-02-22 [S]
```

Dockerの stable （安定版）リポジトリをセットアップします。

```
$ sudo -E add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
```
Docker CE をインストールします。

```
$ sudo apt-get install docker-ce
```

# docker-compose のインストール
docker-compose は複数のコンテナを使う Docker アプリケーションを定義・実行するためのツールです。

```
sudo -i
curl -L https://github.com/docker/compose/releases/download/1.27.4/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose
```
※`/download/`の後に続くバージョン指定は、[公式サイト](http://docs.docker.jp/compose/toc.html)を確認の上最新のバージョンへ変更してください。

# :rocket: Dockerの起動
Dockerサービスを起動させます。これで、Dockerコンテナを動かせるようになります。

```
$ sudo service docker start
```


# 動作確認
👀以下のコマンドで確認します。

```
$ curl -O https://keinos.github.io/hello-docker-compose/docker-compose.yml
$ docker-compose up
```

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

```
Starting hello_hello_1 ... done
Attaching to hello_hello_1
hello_1  |
hello_1  | Hello from Docker!
hello_1  | This message shows that your installation appears to be working correctly.
hello_1  |
hello_1  | To generate this message, Docker took the following steps:
hello_1  |  1. The Docker client contacted the Docker daemon.
hello_1  |  2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
hello_1  |     (amd64)
hello_1  |  3. The Docker daemon created a new container from that image which runs the
hello_1  |     executable that produces the output you are currently reading.
hello_1  |  4. The Docker daemon streamed that output to the Docker client, which sent it
hello_1  |     to your terminal.
hello_1  |
hello_1  | To try something more ambitious, you can run an Ubuntu container with:
hello_1  |  $ docker run -it ubuntu bash
hello_1  |
hello_1  | Share images, automate workflows, and more with a free Docker ID:
hello_1  |  https://hub.docker.com/
hello_1  |
hello_1  | For more examples and ideas, visit:
hello_1  |  https://docs.docker.com/get-started/
hello_1  |
hello_hello_1 exited with code 0
```


# 参考
[WSLでdockerのインストールからdocker-composeまで動かす](https://qiita.com/tettsu__/items/85c96850d187e4386c24)
[最もシンプルな docker-compose.yml の hello-world](https://qiita.com/KEINOS/items/43d9415e351d80f78c8b)
転職日記９日目

みなさんこんばんは

１月３１日までポートフォリオを完成させると意気込んでいましたが、

完成までにはいたらずひたすら落ち込んでおります。

出来なかった部分に関しては、

・画像を投稿したあと、それを再編集して別な画像を投稿しようとしても、画像が変更されない

・ウィンドウを閉じた後、もう一度サイトに接続するとエラーがでる

といったところです。

他にも、特にめぼしい技術を使う事ができず、一ヶ月間、働きながらではありますが、そんなのはただの言い訳。

自分のレベルの低さに自信を喪失していました。

それでも、この道でやっていくという思いは変わらず、どのようにこれから先学習していくか、

また、引越し、就活、色々混み合ってきますが、自分のやりたい事も並列して、とにかく前に進んでいこうと思います。

https://github.com/goto-ui/chocolat

上記が自分のGitHubです

もしよろしければ、みていただき、コメント等いただければ幸いです。

これからもめげずに頑張ります。
twitter→bundleでAn error occurred while installing unf_ext のエラー

gemfileに`gem 'twitter'`と記述し`bundle install`すると以下のエラーが発生した。

```
current directory:
/home/vagrant/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/unf_ext-0.0.7.6/ext/unf_ext
make "DESTDIR=" clean

current directory:
/home/vagrant/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/unf_ext-0.0.7.6/ext/unf_ext
make "DESTDIR="
compiling unf.cc
make: g++: Command not found
make: *** [unf.o] Error 127

make failed, exit code 2

Gem files will remain installed in
/home/vagrant/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/unf_ext-0.0.7.6 for
inspection.
Results logged to
/home/vagrant/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/extensions/x86_64-linux/2.6.0-static/unf_ext-0.0.7.6/gem_make.out

An error occurred while installing unf_ext (0.0.7.6), and Bundler
cannot continue.
Make sure that `gem install unf_ext -v '0.0.7.6' --source
'https://rubygems.org/'` succeeds before bundling.

```

一応`gem install unf_ext -v '0.0.7.6'`を実行したが同じエラーが表示された。

エラーの前半部分にある`make: g++: Command not found`によりg++がないらしいことと、コンパイラーをインストールする必要があることが分かった。

```
$ sudo yum -y install gcc-c++
```
Complete後、再度`bundle`して無事成功。


Bundle complete!
Flutterで画面の向きを固定する

Flutterの学習時にパッと調べて出てこなかったことを書いておきます。
どうやって解決したのかわかるように調査内容も書いておきます。
※パッと調べて：一回の検索で出てこなかった

#Flutterで画面の向きを固定する
##やってみたこと
###「flutter 画面 回転」で検索
検索結果の最初の何件かのやり方は、main.dartで

```dart
import 'package:flutter/services.dart';
```
してから、runAppする前に以下を実行すると書かれています。
SystemChrome.setPreferredOrientationsに渡す内容で、縦向き、横向きの固定ができます。

```dart
SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
```



さらに他のページを見ると、SystemChrome.setPreferredOrientationsの戻り値はFutureなので、設定がされてからrunAppを実行したほうが良いというサイトが出てきます。


```dart
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
  .then((_) {
    runApp(new MyApp());
});
```

ただ、これを実際に組み込んで実行すると、エラーになります。

```
E/flutter (12370): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: ServicesBinding.defaultBinaryMessenger was accessed before the binding was initialized.
E/flutter (12370): If you're running an application and need to access the binary messenger before `runApp()` has been called (for example, during plugin initialization), then you need to explicitly call the `WidgetsFlutterBinding.ensureInitialized()` first.
E/flutter (12370): If you're running a test, you can call the `TestWidgetsFlutterBinding.ensureInitialized()` as the first line in your test's `main()` method to initialize the binding.
```

###「"If you're running an application and need to access the binary messenger before \`run App()\`")」で検索
検索結果の最初に出てきたページ（英語のサイト）をよく読むと
main()の中で非同期処理を行う際には、下記を実行しろと書かれています。

```dart
WidgetsFlutterBinding.ensureInitialized();
```

##完成
実際に組み込んで実行して、成功したmain.dartがこちら。

```main.dart
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
      .then((_) {
    runApp(new MyApp());
  });
}
```

実際にAndroid端末とiOSの端末で確認したところ、無事に縦で固定されました。

##補足
「WidgetsFlutterBinding.ensureInitialized()」で検索したら以下のツイートが出てきました。
バージョンによるのかもしれません。
https://twitter.com/_mono/status/1165511095949283328

##追記 2020/10/26
iPadではこの方法ではだめというコメントを頂いたので調査して、実機で確認しました。
appDelegate.swiftに2個めの「override func application」の部分を追加して、
プロジェクトの設定で、Requires full screenにチェックを入れることで、縦固定ができます。

```swift:ios/Runner/AppDelegate.swift
import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }

  override func application(
    _ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?
  ) -> UIInterfaceOrientationMask { return UIInterfaceOrientationMask(arrayLiteral: 
    [UIInterfaceOrientationMask.allButUpsideDown]);
  }
}
```
![スクリーンショット 2020-10-26 15.02.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332833/d5498e8f-09a7-ad48-f3bd-e1fed3d31be6.png)
`react-native init`後のpod installでglogに関してエラーが出た時の対処

## 現象
あるMac環境で下記のコマンドを実行した時、glogでエラーが発生し進めなくなった。

```sh

react-native init MyTSProject --template react-native-template-typescript
cd ./MyTSProject/ios && pod install
```

## 環境
- OS: Mohave 10.14.6
- Xcode: 11.2
- react-native: 0.61.5

## 解決策
本件の場合、xcode-selectを設定し直したら解決した。

```sh
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
```

## 解決策の詳細

[このイシュー](https://github.com/facebook/react-native/issues/27621#issuecomment-569170504)によると、glogはXcodeへのパスにスペースが入ってるとうまく動かないようである。

そうなっていないか、Xcodeへのパスを調べる。

```sh
xcode-select --print-path
```

`/Library/Developer/CommandLineTools`であった。スペースは入っていないが、よくある設定ではない（普通は`/Applications/Xcode.app/Contents/Developer`とかになっている）。これはCommandLineToolsを自力インストールした場合の設定とのこと。この場合のサポートがglogはうまくできていないということかもしれない。

下記を実行して、よくある設定に戻すことで解決した。

```sh
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
```

## 参考

下記の記事には別の対処策が記載されている。

【react-native】pod instal 時の glog(0.3.5) でのエラー
https://qiita.com/fujimaring/items/2e7ec54ba6d4a6703c26
Swift初心者がつまずいたり時間かかったことまとめ

##はじめに

```
libc++abi.dylib: terminating with uncaught exception of type NSException
```
というエラーに頻繁に会うかもしれません。
そんな時の原因はリンク先にあるように

```
このメッセージのかなり前に、「*** Terminating app due to uncaught exception 〜 reason: 〜」というメッセージがあると思いますので、そこの「reason:」の後のメッセージを読んでください。
そこに問題の原因が書かれています。
```
もっと上に遡るときっちり明確に書いてあったりします。
index out of range..　など。
それらのエラーメッセージを検索することで解決にすごく近づくと思います。

最初エラーのくせに全然なんもわかんないじゃん超不親切。。。と思っていましたが自分が愚かなだけでした笑

(参考）
https://teratail.com/questions/56544


##UIButtonの文字ってどうやって変更する？

```swift
//文字変更
myButton.setTitle("タイトル変更", for: .normal)
//色変更
myButton.setTitleColor(UIColor.white, for: .normal)
```
myButton.text = "something.." 
としても変わらなくて少し詰まりました。


##フォントをコードでいじりたい

```swift
let myLabel = UILabel()
let font = UIFont.systemFont(ofSize: 20, weight: UIFont.Weight(400))
myLabel.font = font
```

##cssっぽくマージンをつけたい

```swift
myTextView.textContainerInset = UIEdgeInsets(top: 24, left: 24, bottom: 24, right: 24)
```

##UITextViewの行数を取得したい

こちらの記事が大変参考になりました。
UITextVIewをExtensionして使います。

```swift
var line = myTextView.numberOfLines
```
として取得できるようになります。

(参考）
https://qiita.com/ShoichiKuraoka/items/54b55f84bbf8bb0660e4

##UILabelタップしたい
他のUIパーツにも使えると思います。

```swift
//viewDidLoaded()の内部とかに記述
let myLabel = UILabel()
myLabel.addTarget(self, action: "tappedAction:", for: .touchUpInside)

//クラス内に記述
@objc private func tappedAction(_ sender:UIButton){
        print("tapped")
}
```
JavaScript　基礎文法　1

#はじめに
JavaScript(以下、JS)を学んでいく上で、1つずつ整理していきます。
私はVScodeでコードを書き、ブラウザでHTMLファイルを開いております。
そして、検証（ブラウザ上で右クリック）のconsole項目に反映されているのか確認しております。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。

#アラートの表示

JSファイルにコードを記載します。

```qiita.js
window.alert('こんにちは');  
```

【結果】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576541/c50ebd0d-f203-4139-bc05-8616fc8ff942.png)

#文字列の出力
Rubyではputsでしたが、JSではconsole.log(表示したい文字列)となります。

```qiita.js
console.log("らいが君、こんばんは");
```


#変数宣言（変数の定義）
JSでの変数宣言は、以下のように文頭にvarもしくはlet、constをつけます。

```qiita.js
var name = "raiga";        // varをつけるのはES2015ver以前

let name = "raiga";       //ES2015以降は、letをつける。　以下letで進めます。
                          
const name = "raiga";     //constは後で書き換えられない変数宣言。

```
#関数宣言（関数の定義）
function文を用います。Rubyではdef~endというメソッドでした。


```qiita.js
//function文
function 関数名(引数){
  処理名;
}

//実践してみます。
function sayHello(){     //関数に引数が含まれなかった場合でも、()は記載する必要がある。
  console.log("hello");
}

function sayName(name){
  console.log(name)
}

let myName = "raiga";
sayHello();
sayName(myName);
```
【結果】
右の検証画面に以下に通り、出力されていれば成功です。
hello
raiga

<img width="1278" alt="qiita .png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576541/5c2e6880-3b41-bf15-8614-b12e921ebcca.png">




#さいごに
日々勉強中ですので、随時更新します。
皆様の復習にご活用頂けますと幸いです。
Windows向けtensorflowliteのビルド(for gcc on MinGW)

# はじめに
現在(2020年2月時点)、公式にはTensorflow liteはAndroid(arm v7, aarch64), iOS, RaspberryPi(arm v7)にしか対応していません
https://www.tensorflow.org/lite/guide
いろいろ調べた結果うまくいったので備忘録としてまとめておきます

# この記事のモチベーション
- Tensorflow lite用のUnity pluginを作りたいが、android向けだけ用意すると開発イテレーションが悪いためwindows editor(x64)向けにもpluginを作っておきたい
- Tensorflow lite delegateが盛り上がっており、GPUだけでなくNNAPI, hexagon(QualcommのDSP)にも対応してきているので追いかけていきたい
- Tensorflow v2に伴い、.tfliteへのモデル変換がある程度固まってきたのでそろそろどのモデルが使えそうか確認しておきたい

# ビルド環境
- Windows10
- MSYS2 + Mingw64
    - gcc 9.2.0
- tensorflow master: cbd6bb435d32473c3b65d43bcd1171b90bb91d46

# ビルドコマンド
```
cd tensorflow/lite/tools/make
./download_dependencies.sh
./build_lib.sh
```
これで
```tensorflow/lite/tools/make/gen/windows_x86_64/lib/libtensorflow-lite.a``` ができるので静的リンクすれば使えます
```tensorflow/lite/tools/make/gen/windows_x86_64/bin/minimal.exe``` があるので.tfliteファイルを食わせると動作確認ができます

※こちらのビルドスクリプトがMingw対応されたのは https://github.com/tensorflow/tensorflow/pull/26040 のプルリクです


# ハマりどこり
- byteswap.hが無くてコンパイルエラーが起こる
    - 下記をダウンロードしてmsys64\mingw64\includeに入れておきます
    - https://github.com/icecoobe/sbc-windows/blob/master/byteswap.h
- *Argument list too long* でbenchmark-lib.aがビルドできない
    - Makefile上では ```all: $(LIB_PATH)  $(MINIMAL_BINARY) $(BENCHMARK_BINARY) $(BENCHMARK_PERF_OPTIONS_BINARY)``` となっているためLIB_PATHとMINIMAL_BINARYさえビルドできれば問題ないので無視すれば良さそうです

# その他
- Bazelではうまくいかなかった
    - Bazelは2.0.0を使用した
    - 当初下記のコマンドで試していたがコンパイルは成功するもののリンクエラー
        - ```bazel build -c opt --cxxopt=--std=c++11 tensorflow/lite:tensorflowlite```
            - vc14でのビルド
            - tensorflow/lite/BUILDがwindows向けDLL対応されていたので、今後はこちらでビルドされるようになるかと思います
    - Mingwも試したもののMSVCのコンパイルオプションがgccで読めずコンパイルエラー   
        - ```bazel build -c opt --cxxopt=--std=c++11 --compiler=mingw-gcc tensorflow/lite:tensorflowlite```
HTML input要素でメールアドレス(@を含む文字列)のみ入力可能にする

# 目的

- HTMLのinput要素にて`@`が含まれるメールアドレス文字列のみ入力可能にする方法をまとめる

# 書き方の例

- 下記にメールアドレスの入力を行うinput要素の書き方を記載する。

```html
<input type="email">
```

# 記載した時のHTMLでの表示例

- `type="email"`を指定したinputの入力箇所に`@`を含まない文字列を入力した際のポップアップを下記に記載する。

![スクリーンショット 2020-01-30 16.18.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/70352ed4-87ff-5e07-7e36-e994a4e02228.png)
セッションの仕組みをふわっといらすとやで

HTTP通信はステートレスな(状態を持たない)通信のため、全てのユーザーは毎回訪れる度に初回訪問扱いになる。
例えば、何十万のアクセスユーザーに対してマイページを表示しようとする場合、再訪問者かどうかを過去のデータから判別して処理を行っていくと、膨大な情報処理が必要となり対応が追い付かなくなってしまう。
![stateless.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14068/c351e844-2b65-bedf-333e-a4c0d00b7bfe.jpeg)

**セッション**とはブラウザ(Webクライアント)からサイトにアクセスした際の情報を保持する仕組みで、主に次の処理を見えない裏側で自動的に行なっている。

初回訪問時、個々のブラウザ(Webクライアント)上のCookieを利用し、セッションIDという個別の識別番号を自動発行し、擬似的に「訪問済み」の状態を保持させ、サーバの負荷を軽減する。また、セッション変数(スーパーグローバル変数)の使用を許可するため、プログラム側で値の代入も同時に行える。
![session1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14068/df6cdc9b-a368-fac3-d823-36dbf5c0e690.jpeg)

次回訪問時、セッションIDを識別し同じ訪問者であることを認証できた場合のみ、セッション変数の値を参照できるようになる。違う訪問者であれば、その都度新たなセッションIDを発行する。
![session2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14068/a974cf85-cae4-23ac-4414-767fd1c636f5.jpeg)

データベースのログイン認証が承認された場合は、セッション変数に許可であることを示すフラグ値を登録する。マイページごとにそのフラグの許可値を保持しているかチェックし、承認されていない場合は不正アクセスと見なしログインページにリダイレクトされる。
![session3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14068/3ae7f22a-5592-7647-18e8-1547a9a29ba3.jpeg)
Kubernetes ワーカーノードの障害と回復失敗のメモ

ノード障害が発生して回復に失敗してしまった。これは学習用の環境だけど、この体験はオンプレミスの本番K8sクラスタにも生かせると思うのでメモとして残しておく。

## 障害状況

GrafanaやKibenaのウェブ監視画面にアクセスできない。そこで、ノードの状態を調べたら、ノードのSTATUSが取れない状態になることが解った。つまり、３つあるノードの内、2つのノードが障害となっており、全体が停止している状態である。

~~~
$ kubectl get node
NAME     STATUS     ROLES    AGE     VERSION
master   Ready      master   5d16h   v1.17.1
node1    NotReady   <none>   5d16h   v1.17.1
node2    Ready      <none>   5d16h   v1.17.1
node3    NotReady   <none>   5d16h   v1.17.1

$ kubectl top node
NAME     CPU(cores)   CPU%   MEMORY(bytes)   MEMORY%     
master   98m          4%     741Mi           83%         
node2    124m         6%     5659Mi          71%         
node1    <unknown>  <unknown>  <unknown>  <unknown>               
node3    <unknown>  <unknown>  <unknown>  <unknown>
~~~


しかし、ノード（仮想マシン）は正常に動いている。

~~~
$ vagrant status
Current machine states:

node1                     running (virtualbox)
node2                     running (virtualbox)
node3                     running (virtualbox)
master                    running (virtualbox)
~~~



## コマンド結果からの障害推定(仮説）

この状態から考えられる障害は、以下の様に推測される。これは仮説なので、仮想マシンを再起動して、原因を確認したい。

* 生き残っている node2 のメモリ使用量が70%を超えていることから、ポッド内コンテナのメモリリーク等の問題でメモリを食い潰したことが推測
* メモリが枯渇したことで、Linuxカーネルがプロセスを強制停止
* これによって、kubelet が停止したため、ノードの状態が不明になった。また、ログインもできない。

## 原因調査（検証）

ノードを再起動して、ログから停止原因を調べたかったが、仮想マシンか、それともハイパーバイザーの一部が壊れていた様で正常に再起動することができなかった。仮想のホストマシンごと再起動して、障害になった仮想マシンを起動すれば良かったかもしれないが、仮想マシンのログを取ることができなかった。

## 反省点（対策）

* 仮想マシンが障害状態になった場合、シャットダウンができないケースがある。停止コマンドを中断すると、ファイル等のロック状態が維持されてシャットダウンプロセスが中断されるため、回復が困難になる。この様な場合は、ホストマシンごと再起動すれば、仮想マシンを再び起動できるはずである。
* ログ分析、メトリックス分析、ストレージ ROOK を同じk8sクラスタに載せていたため、障害に至までのメトリックスの数値や、エラーメッセージなどを確認できない。ログ分析やメトリック分析などは、外部に配置するか、SaaSを利用することが望ましい。
* 今回、ROOK Cephも、載っていたので一緒に障害となっており、データも失われた。ROOKは便利だがリスクもある。
* Kubernetesクラスタで様々なシステムを共存させる場合は、それぞれの名前空間にリソースリミットを設置して、問題を局所に抑える対策が必須である。
micro:bitで傾きを調べる

#傾きセンサー
micro:bitには傾きセンサーが内蔵されているので、何度傾いているかを取得することが出来る。
傾きを調べて、5x5のLEDの、水平のときは真ん中を点灯、1度傾いたときはその方向に中心から1個離れたところを点灯、2度傾いたときは中心から2個目(5x5だから一番外側)を点灯するプログラムを書いてみた。
![2020-02-01-000642_1043x569_scrot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576327/9e493629-805a-61b7-1a27-680870846dfe.png)

動かすとこんな感じに。
うまく動いてるようだ。
![leveler.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576327/39d61f21-9736-a36d-3e4a-e052c4d8db44.gif)
macにfastTextをインストールメモ

#fastText
facebookが開発した自然言語の機械学習用ライブラリです。超便利です。
#状況
私はpythonで使うことを想定しています。
新しく購入したmacbook proでのセットアップしているメモです。
pythonはmacに入っているものをそのまま使うつもりでインストールしています。

#インストール
@darkimpact0626 さんの[投稿](https://qiita.com/darkimpact0626/items/1c069e3bcf517a7de7ba)を参考にインストールします。
まずはgithubに公開されているfastTextをcloneします。

```
git clone https://github.com/facebookresearch/fastText.git
```
cloneできたら、次はpip3でインストール

```
cd fastText
```
```
pip3 install .
```

こんなエラーがでた。。。

```
Command "python setup.py egg_info" failed with error code 1 in /private/var/folders/9v/6l7p92j14kv_w02d6bql_x8m0000gn/T/pip-req-build-efvyw6w7/
You are using pip version 19.0.3, however version 20.0.2 is available.
You should consider upgrading via the 'pip install --upgrade pip' command.
```

こんな感じでupgradeして、

```
/usr/bin/pip3 install --user --upgrade pip
```
もう一度やってみたら、OK。でも今度は警告がでた。

```
WARNING: The scripts f2py, f2py3 and f2py3.7 are installed in '/Users/xxxxxx/Library/Python/3.7/bin' which is not on PATH.
  Consider adding this directory to PATH or, if you prefer to suppress this warning, use --no-warn-script-location.
```
なるほど、パスを通せと。(xxxxxxはユーザー名です)
ということで指示に従い、パスを通します。

```
export PATH=/Users/xxxxxx/Library/Python/3.7/bin:$PATH
```
パスが通っているか、確認します。

```
echo $PATH
```
スクラムマスターに聞いた１つの質問

#Q）エンジニア目線でスクラムでは余った時間を他のビジネスや副業とかに使うことは実際には可能なのでしょうか。報告はオンスケ前提です。

#A)スクラムの目的は可視化なので、余った時間があればすぐに分かります。

#所見
スクラムは強制収容所と同じですね。
エンジニア目線、仕事が楽しくないとプロジェクトは成功しないと思いますけどね。
スクラムが楽しいという人は相当頭悪いと思いますね。
CDK で自動生成されるたくさんのリソースを個別に参照する

## CDK の Higher-level ライブラリと ConstructNode class
CDK の Higher-level Constructs library (高い抽象度で構築できるライブラリ) を使うと単一オブジェクトで複数の CloudFormation リソースが作成できる。たとえば、`ec2.Vpc()`,`dynamodb.Table()`, `s3.Bucket()` のような具合で、これだけでいい感じのリソース**群**をババっと生成してくれる。

ここで作成される個別の下位リソースをカスタマイズやスタックのアウトプットのために参照したい場合は、`ConstructNode` クラスのメソッドにある `findChild()` 等を使えばよい

### 具体例
例. VPC を作成し NAT ゲートウェイではなく EC2 NAT インスタンスを作成する。 その EC2 インスタンスに `CfnEIP` で EIP を付与するため、NAT インスタンスの instance-id を参照したい。簡単のため、NAT インスタンスは 1つだけ生成されるようにしている

```typescript
    const natInstance = ec2.NatProvider.instance({
        instanceType: new ec2.InstanceType('t3.micro')
      })
    });
    const vpc = new ec2.Vpc(this, 'myvpc', {
      cidr: '10.128.0.0/16',
      natGateways: 1,
      natGatewayProvider: natInstance
    });
    const natIns = vpc.node.findChild('PublicSubnet1').node.findChild('NatInstance') as ec2.Instance;

    const natIp = new CfnEIP(this, 'natip', {
      instanceId: natIns.instanceId
    });
    new cdk.CfnOutput(this, 'eip', {
      value: natIp.ref
    });
```

`NatProvider.instance()` については[ここ参照](https://docs.aws.amazon.com/cdk/api/latest/docs/@aws-cdk_aws-ec2.NatInstanceProps.html)。
`vpc.node.findChild('PublicSubnet1')` で NAT インスタンスが配置されるサブネットを取得し、さらに`findChild('NatInstance')` で下位の NAT インスタンス部分を取得する
あとは `natIns.instanceId` を `CfnEIP` に渡せばよい

### 探し方
`findChild()` で探す名前は CDK 中で構築される階層構造から探す。探す方法としては、一度 `cdk synth` して CloudFormation テンプレートを出力し、メタデータから探す方法しか今の所把握していない (いい感じの方法あったら教えてほしいです)。

例えば前述の例で出力される CloudFormation テンプレートの NAT インスタンス部分を抜粋すると以下のようになっている

```yaml
  myvpcPublicSubnet1NatInstanceXXXXXXXX:
    Type: AWS::EC2::Instance
    Properties:
    ...
    Metadata:
      aws:cdk:path: MyStack/myvpc/PublicSubnet1/NatInstance/Resource
```

`Metadata` のパスを見ることで、生成される Construct のツリー構造がわかるのでココから探せば良い。

他の [ConstructNode API についてのドキュメントはこちら](https://docs.aws.amazon.com/cdk/api/latest/docs/@aws-cdk_core.ConstructNode.html#methods)
Ruby　コーティング規約について　レイアウト編　2

# はじめに
[前回の続きです。](https://qiita.com/raigakun/items/03ac611b5ecca5315ab6)
Rubyの基礎を学習中の方に向けて記載致します。
私自身これからチーム開発を行う上で大事にしたい。知っておきたいことをOutputします。

#レイアウトについて
① クラス、メソッドの本文の前後には、空行を用いない。

```qiita.rb
#悪い例
class Dog

  def dog

    do_something do

      something

    end

  end

end

# 良い例
class Dog
  def dog
    do_something do
      something
    end
  end
end
```

②メソッド呼び出しの最後の引数のコンマはしない。

```ruby:qiita.rb
# 悪い例
some_method(
  punch,
  kick,
  jump,
)

# 悪い例
some_method(punch, kick, jump, )

# 良い例
some_method(punch, kick, jump)
```

#さいごに
毎日更新します。
皆様の復習等にご活用頂けますと幸いです。
EC-CUBE4系でWordpressの記事情報を取得する方法

# 概要
仕事でEC-CUBEを使用することがあり、TOPページにWordpressの記事一覧を表示する機能を実装しないといけなかったので実装した。
ネットを見ても、EC-CUBE2,3系の情報しかなかったため、困っている人がいれば参考にしてほしい。

#環境
EC-CUBE4.0.3
WordPress
同じサーバに配置してEC-CUBEの直下にWordpressを配置する
- EC-CUBE(shop)
　　┣Wordpress(blog)

#実装方法
今回はWordpressとの連携がメインのため、インストール方法は省略します。(すいません。。。)

EC-CUBE4系ではtwigを使用しており2系のSmartyテンプレートとは書き方が多少異なり、PHPタグを直接書き込む方法は使えません。
しかし、file_get_contents等の関数は使えるようになっています(3系だとEccubeExtension.phpなど変更が必要だったが、4.0.3ではデフォルトで設定が追記されていた)
なので、　Wordpressと連携するためのPHPを書き、それをtwig内のfile_get_contentsで取得するようにします。

1.Wordpressと連携するためのPHPを書く
　PHPは下記のように書きました(wp-loadの場所には注意してください)

```php:wp_post.php
<?php 
  	$webroot = $_SERVER['DOCUMENT_ROOT']; 
  	require ($webroot.'blog/wp-load.php'); 
?>
<ul id="top_info">
	<?php 
		$newslist = get_posts( array(			
			'posts_per_page' => 4  //記事数
		));
		if($newslist):
			foreach( $newslist as $post ):
				setup_postdata( $post );?>
            	<li><a href="<?php the_permalink(); ?>" target="_blank"><span><?php the_time('Y.n.d'); ?></span>
				<?php the_title(); ?></a></li>
	<?php
        	endforeach;
        	wp_reset_postdata();
        else:
        	echo '記事がありません';
        endif;
    ?>
</ul>
```
PHPファイルはEC-CUBE直下に置きましたが、twigで読み込めればどこに置いても問題ないと思います。

2.twigでPHPを取得する
　PHPでWordpressの連携は完了しているのであとはtwigで読み込んでやるだけです。

```twig:info.twig
<div id="news_area">
    <h2 class="heading01">新着情報</h2>
    <div class="accordion">
        <div class="newslist">
			{{ php_file_get_contents('http://ドメイン名/wp_post.php') }}
        </div>
    </div>
</div>
```
'php_'をつけるとPHPタグがなくてもfile_get_contentsが使えるようです。
`file_get_contents(url('homepage') ~ 'wp_post.php')`でも良いかもしれません。
html要素はサイトに合わせて変更していってください。


wordpressの関数一覧は[こちら](https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9)から

#最後に
以上が実装方法です。
思い出しながら書いたので、間違っているところがあるかもです(すいません。。。)
あと私事ではありますが、転職して今はweb系の会社に働いています。(前職については過去記事を参照)
めっちゃ楽しいです！！
これからも頑張っていこうと思います。

以上
VaporでXcodeのプロジェクトを生成する時にエラーが出た場合の対処法

# 環境
- macOS 10.15.3
- xcode-select version 2373
- Xcode 11.3.1

#　発生したエラー
```bash
$ vapor new hello
$ cd hello
$ vapor xcode
```
と実行したところ、最後の`vapor xcode`で以下のようなエラーが出てしまいました。

```
Generating Xcode Project [Failed]
error: terminated(72): xcrun --sdk macosx --find xctest output:
    xcrun: error: unable to find utility "xctest", not a developer tool or in PATH


Error: Could not generate Xcode project: error: terminated(72): xcrun --sdk macosx --find xctest output:
    xcrun: error: unable to find utility "xctest", not a developer tool or in PATH
```

# 対処法
[https://vaibhavkaushal.com/posts/vapor3-evaporating-on-macos-mojave/](https://vaibhavkaushal.com/posts/vapor3-evaporating-on-macos-mojave/)に書いてあるように`sudo xcode-select --reset`と実行するとエラーが出ることなく実行されました。
AWS Amplifyでnpm run serveした時に、This relative module was not found: ./aws-exports

# 概要
AWS Amplifyで開発したものをGitHub等に格納して、別の作業ディレクトリや別の端末でチェックアウトして作業する際に発生する問題です。
aws-export.jsは.gitignoreに設定されているので、そのままだとファイルが見つからないということになります。

# エラー内容
npm run serveすると、下記のようなエラーがコンソールに表示されます。

```
 ERROR  Failed to compile with 1 errors                                                                      10:22:15 AM

This relative module was not found:

* ./aws-exports in ./src/main.js
```

# 対応
How to clone an Amplify project from a git repo and generate aws-exports.js without push (Typescript/javascript/react) · Issue #603 · aws-amplify/amplify-cli
https://github.com/aws-amplify/amplify-cli/issues/603
に書いてありました。

amplify initして、
Do you want to use an existing environment?
にYesで答えるとaws-exports.jsが生成されます。

あと、npm initも忘れずに。

# amplify initの実行例
```
>amplify init
Note: It is recommended to run this command from the root of your app directory
? Do you want to use an existing environment? Yes
? Choose the environment you would like to use: dev
? Choose your default editor: Visual Studio Code
Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default
√ Initialized provider successfully.
Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify <category> add" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
“amplify console” to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything


>
```
Flutter: RowのWidgetを端に配置したい

## やりたいこと
以下のように、Rowの中のText「World」を右端に配置したい。

<img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/b3d80515-ab29-2e0f-a8a8-652238400e12.png">

## 修正前

<img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/e512f520-253e-3d9f-47ba-1d86233cfaa1.png">

```dart
// 修正前コード
Container(
  color: Colors.grey.withAlpha(50),
  child: Row(
    children: <Widget>[
      Text(
        "Hello",
        style: TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
      Text( // これを右端に寄せたい
        "World",
        style: TextStyle(fontSize: 16),
      ),
    ],
  ),
)
```

## 方法1 `Expanded`

`Expanded`を使うと実現できるが、階層が深くなるのでベストな方法ではない。

```dart
Container(
  color: Colors.grey.withAlpha(50),
  child: Row(
    children: <Widget>[
      Expanded(         // <= 追加
        child: Text(
          "Hello",
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      Text(
        "World",
        style: TextStyle(fontSize: 16),
      ),
    ],
  ),
)
```

## 方法2 `MainAxisAlignment.spaceBetween`

Rowに `MainAxisAlignment.spaceBetween`を指定する。
これが一番ベストかな

```dart
Container(
  color: Colors.grey.withAlpha(50),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,  // <= 追加
    children: <Widget>[
      Text(
        "Hello",
        style: TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
      Text(
        "World",
        style: TextStyle(fontSize: 16),
      ),
    ],
  ),
)
```

## 方法3 `Spacer`
TextとTextの間に`Spacer`を插入する。
これもシンプルな方法で良い

```dart
Container(
  color: Colors.grey.withAlpha(50),
  child: Row(
    children: <Widget>[
      Text(
        "Hello",
        style: TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
      Spacer(), // <= 追加
      Text(
        "World",
        style: TextStyle(fontSize: 16),
      ),
    ],
  ),
)
```

## 使用コード

https://github.com/ikemura23/flutter_lab
Lambdaにライブラリを乗せるときにLayersを使ったら便利

Lambdaにデプロイするときライブラリも一緒にデプロイする場合があると思いますが、いざデプロイするとちょっとした修正がコンソール上でできず、ちょっとめんどくさかったです。
それについてぼやいたらLayersを使えばどうかとアドバイスをもらったので、その備忘録。  

## デプロイする関数
APIをちょっとたたく関数。言語はPython。

## LambdaのLayers機能
公式。
https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/configuration-layers.html
ライブラリをレイヤーとして取り込め、共通ライブラリとして利用できる。
そのためLambda関数にライブラリを取り入れる必要がない。
他のユーザが公開してるLayerも使えるらしい。

## そのままデプロイすると
ライブラリだけで4.5MBでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452110/5c17653e-7869-eb74-e0b8-bec4d1b363dc.png)

インラインコードが表示されず、ちょっと編集するのにアップロードしなおさなければいけません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452110/e8ffd71e-ea41-713c-9af4-c20d44f76c5d.png)

## Layersを使う
左のメニューバーよりLayersを選び、「レイヤーの作成」を選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452110/58872677-ffb4-240f-c625-196ba35ecf7e.png)

名前と説明、利用したいライブラリのzipをアップロードし、作成します。
※容量が多い場合はS3を利用する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452110/b223255c-79a9-7252-f6d0-e8baacfef6d9.png)

この時、**使用するライブラリをすべて「python」というフォルダに入れ、pythonフォルダごとzipすること。**
アップロードすると/opt直下にライブラリモジュールが配置される。
pythonでは/opt/pythonにすでにパスが設定されているので、ライブラリをpythonフォルダに含め、アップロードすることで自動的にライブラリまでのパスが通り利用ができる。
Python以外の指定フォルダは公式ドキュメントを参照。
わたしはこれで躓きました・・・

## Lambdaに設定する
LambdaのDesignerより「Layers」を選ぶとレイヤー追加する項目が出るため、「レイヤーを追加」を選ぶ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452110/a4c2398c-dfa2-8967-9c61-ee7f06d9af38.png)

「名前」を選び、先ほど作成したレイヤーを選び、追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452110/7e7659da-036a-6120-7195-05fda289f11c.png)

レイヤーに追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452110/ce718a37-a5b8-1626-b615-f4f7c47a6ed3.png)

デプロイはモジュールと設定ファイルのみでよくなり、インラインコード編集ができるように！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452110/1f57997b-5923-b170-f41f-b0fcaa1cd252.png)


## まとめ
ライブラリを共通化するだけでなく、普通のデプロイ時にも便利。
だけどコツというか、ちゃんと公式ドキュメントは読まなきゃね・・・
正規表現を用いたemailとパスワードのバリデーション(JavaScript)

# やりたいこと
nuxt.jsでのメールアドレスとパスワードのバリデーション
vuelidateなどのバリデーション用のライブラリを使用せずに実装したい

# コード

```password.vue
<template>
  <div class="#">
    <div class="#">
      <h2>
        メール・パスワード変更
      </h2>
    </div>
    <div class="#">
      <div class="#">
        <input
          v-model="email"
          type="text"
          :notes="emailErrorText"
          placeholder="メールアドレスを入力"
          @input="validateEmail"
        />
        <input
          v-model="user.pastPassword"
          :required="true"
          type="password"
          placeholder="現在のパスワードを入力"
        />
        <input
          v-model="user.password"
          type="password"
          :notes="passwordErrorText"
          placeholder="新しいパスワードを入力"
          @input="validatePassword"
        />
        <input
          v-model="user.password_confirmation"
          type="password"
          :notes="passwordConfirmationErrorText"
          placeholder="新しいパスワードを入力"
          @input="validatePasswordConfirmation"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    user: {
      pastPassword: '',
      password: '',
      password_confirmation: '',
    },
    email: '',
    emailError: false,
    passwordError: false,
    passwordConfirmationError: false
  }),
  computed: {
    emailErrorText () {
      return this.emailError ? '無効なメールアドレスです' : '';
    },
    passwordErrorText () {
      return this.passwordError ? '無効なパスワードです。半角英数字を含んで8-15文字の範囲内で入力してください。' : '半角英字と半角数字を含めた8-15文字以内';
    },
    passwordConfirmationErrorText () {
      return this.passwordConfirmationError ? 'パスワードが一致していません' : '';
    },
  },
  methods: {
    validateEmail(email){
      // emailの正規表現
      const regexp = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;
      console.log(regexp.test(email));
      regexp.test(email) ? this.emailError = false: this.emailError = true;
    },
    validatePassword(password){
      // 半角英数字8-15文字の正規表現
      const regexp = /^(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,15}$/i;
      regexp.test(password) ? this.passwordError = false : this.passwordError = true;
    },
    validatePasswordConfirmation(conf){
      this.user.password === conf ? this.passwordConfirmationError = false : this.passwordConfirmationError = true;
    }
  }
};
</script>

```
W&Bを使ってみる

#W&Bとは
[W&B](https://www.wandb.com/)
tensor boardのweb版です。
違いは、オンラインのページで確認できるほか、昔の実験結果などを保管しておくこともできます。
機械学習のログの記録や結果をみるのに便利なサイトです。

以下のページを参考に記事をかきます。
[wandb Quickstart](https://docs.wandb.com/quickstart)

#セットアップ

pipを使って、wandbのライブラリをインストールします。

```
pip install wandb
```

webのアプリなので会員登録が必要です。容量に制限はありますが、学生やアカデミック用途では無料です。
以下のページから登録できます。githubのアカウントでできるので、自分はすぐできてしまいました。

[会員登録ページ](https://app.wandb.ai/login?signup=true)

次に使用する環境のターミナルで

```
wandb login
```

とすると、以下のページがでてきます。

```
wandb: You can find your API key in your browser here: https://app.wandb.ai/authorize
wandb: Paste an API key from your profile and hit enter:
```

[https://app.wandb.ai/authorize](https://app.wandb.ai/authorize)のページにアカウントを登録したPCからアクセスすると
40桁くらいのAPIkeyがあるので、これをコピーして上のenter:のところに貼り付けます。
これでサーバーなどとwebのアカウントが紐付けされます。

#コードの書き換え
まず冒頭に以下のコードを足します。

```
# Inside my model training code
import wandb
wandb.init(project="my-project")
```

プロジェクト名ごとで結果をまとめておくことができます。

保存したい引数がある場合はconfigメソッドで保存できます。

```
wandb.config.dropout = 0.2
wandb.config.hidden_layer_size = 128
```

次に訓練データ内で記録用のコードをいれます。

```
def my_train_loop():
    for epoch in range(10):
        loss = 0 # change as appropriate :)
        wandb.log({'epoch': epoch, 'loss': loss})
```

通常ならprint(loss)を行う部分にwandb.log({dict})をいれます。
dictで渡した引数の分だけグラフが作成されます。

末尾に以下のコードをいれると、学習ログを保存することができます。

```
wandb.save("mymodel.h5")
```

#動かしてみる

```test.py
import wandb
wandb.init(project="test-project")

lr = 0.1
wandb.config.lr = lr

def my_train_loop():
    loss = 10

    for epoch in range(10):
        loss = loss * lr  # change as appropriate :)
        wandb.log({'epoch': epoch, 'loss': loss})
    wandb.save("mymodel.h5")


def main():
    my_train_loop()

if __name__ == "__main__":
    main()
```

上記のコードを実行し、
W&Bのページにアクセするすると、

<img width="931" alt="スクリーンショット 2020-01-30 15.24.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404462/0423f908-081e-9410-8692-5b2ec0add15f.png">

このようなlossの推移が得られます。
なぜepochがあるかというと、基本的には横軸はstep数となります。
そのため、グラフを作成する際に横軸としてepochを記録しておくことで、
<img width="685" alt="スクリーンショット 2020-01-30 15.27.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404462/af7cc8fc-0c30-526c-3747-3a28837426c4.png">
このようにepoch vs lossなどのグラフを作ることができます。

configに追加したlrも記録されるため、再現する際にも役に立ちます。
<img width="1337" alt="スクリーンショット 2020-01-30 15.30.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404462/880aabb5-99e9-70f8-dc18-eeeb788c03bc.png">

#簡単です。
実は触って2日目なのですが、追加するコードは少なく、グラフを出すのもさくっとでてきます。
また、webに記録することで様々なサーバーでの結果を１つに集めて保管できます。
ぜひ触ってみてください！
macOS Catalinaにhomebrew経由でMSQLをいれる

#状況
新しいmacbook pro(macOS Catalina)を購入したので、homebrewを使ってmysqlを入れようとしたら、エラーがでたので、メモ
Catalinaでのmysqlのエラーは相当でているよう、

#mysqlのインストール&動くようにする

####1) mysqlのインストール
ターミナルでbrewからインストール

```
brew install mysql
```

####2) 起動したらエラーがでた
```
mysql -uroot
```
でログインしようとしたら、、、

```
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
```

####3) 動くようにする

ググると結構でてくるエラー。みなさん出ているようです。まずはmysql.sockとやらを作ります。

```
sudo touch /tmp/mysql.sock
```
実はこれだけだとダメなので、

```
sudo chown ユーザー名 /tmp/mysql.sock
```
で権限を書き換えます。
あと、これをしないと、macを再起動した時に毎回エラーが出る

```
brew services start mysql
```


#mysqlでテーブルを作るまで
rootで入る

```
mysql -uroot;
```

データベースを作成

```
create database mydb;
```
作ったmydbに入る

```
use mydb;
```

あとはcreate tableで自分で作りたい構造のテーブルを作る
Splunkの中心で愛を叫ぶ Splunk>, with Love

:raised_hands:バレンタインデー記念　Celebrate St. Valentine's Day:raised_hands:

[Splunk>Answersでもやりました。](https://answers.splunk.com/answers/802676/can-splunk-find-love.html)

![Love.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130729/fcd77c40-8171-6023-0e61-38972283cbc8.png)

```java:Love.spl
| makeresults count=2
| streamstats count as x
| eval x=if(x=1,0.00000,1.80000)
| makecontinuous x span=0.01
| eval z=split("A#B#C#D","#")
| stats values(x) as x by z
| stats count by x z
| eval y = case(x < 1 AND (z="A" OR z="C"),exact(pow(x,(2/3))) + exact(sqrt(1 - pow(x,2)))
,x < 1 AND (z="B" OR z="D"),exact(pow(x,(2/3))) - exact(sqrt(1 - pow(x,2))))
| eval x = if(z="C" OR z="D",x * -1, x)
| table x , y
| sort 0 x
| rename y as LOVE
```
#まとめ　Conclusion
:grin:チョコ食べたい。:chocolate_bar:　I want to eat chocolate.
#蛇足的ななにか　Superfluity
cf. [ハートの方程式 TheFormulaOfHeart](http://zellij.hatenablog.com/entry/20111205/p1)
この図は一つのXの点に対して二つのYの点を描画することになります。

それもあり、四象限用の数列を作成するため
`makecontinuous`で一つの象限の数列を（0〜1）作成し、それを`stats`と`mvexpand`で４つに増やしています。

| |-|+|
|:-:|:-:|:-:|
|+|C|A|
|-|D|B|

方程式のプラスマイナスは象限により変わりますので、それを`eval if()`で制御しつつ、Y軸で対象の図形であるため、_-1_をかけて変換しています。

_This figure will draw two Y points for one X point._
_Also, to create a sequence for four quadrants_
_`makecontinuous` creates a sequence of quadrants (0-1) and increases it to four with` stats` and `mvexpand`._

_Since the plus and minus of the equation varies depending on the quadrant,_
 _while controlling it with `eval if()`, since it is the target figure on the Y axis, -1 is multiplied and converted._
メルカリ風UIでの画像アップロード

# やりたいこと
メルカリ風の画像アップロードを実装したい
要件は以下の通り

- 画像アップロードできるボタンが並んでいる
- ボタンを押すと画像をアップロードできる
- アップロードした画像が表示されてその分画像アップロードできるボタンが減る

# 実装後のイメージ
## 画像アップロード前
<img width="740" alt="スクリーンショット 2020-02-01 9.16.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417223/7602448f-0b3f-81c5-ffba-17cbcbfe98fe.png">
## 画像アップロード後
<img width="737" alt="スクリーンショット 2020-02-01 9.17.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417223/350e4155-7921-757a-94c7-439129d32d95.png">

# 実装
## 環境
今回はnuxt.jsで実装を行います。また、CSSデータは載せないので以下のコードを真似しても見た目が同じものはできませんのでご注意ください！

## 概観
- 画像やボタンの表示数のmaxを決めておく
- 画像を表示させつつ、(表示数のmax)- (画像数)の数だけボタンを表示
- 画像をアップロードしたらデータに画像を入れてからそのボタン（今回はinputで実装）のvalueを削除してファイル名が見えないようにする
- 画像枚数についてのバリデーション

## コード

```index.vue
<template>
  <div class="#">
    <div class="#">
      <!-- 以下で画像を表示 -->
      <div
        v-for="(image, index) in imageList"
        :key="index"
        class="#"
      >
        <div class="#">
          <v-img
            :src="image.file"
            max-width="64"
            max-height="64"
          />
        </div>
        <div
          class="#"
          @click="editImage(index)"
        >
          削除
        </div>
      </div>
      <!-- 以下でボタンを表示 -->
      <div
        v-for="n in maxImageNum-imageList.length"
        class="#"
      >
        <div class="#">
          <input
            :id="n"
            type="file"
            accept="image/*"
            @change="addImage(n, $event)"
          >
        </div>
      </div>
    </div>
    <!-- 以下でエラーを表示 -->
    <div
      v-if="!validInput"
      class="error-text"
      style="color: red"
    >
      最低一枚以上の写真が必要です
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      maxImageNum: 4
      imageList: []
    }
  },
  computed(){
    // v-file-inputのバリデーション
    validInput(){
      return this.imageList.length > 0 ? true : false;
    },
  },
  method(){
    // 画像を追加
    addImage(id, e){
      // 画像を読み込み
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = f => {
        this.imageList.push({file: f.target.result, type: file.type, name: file.name});
      };
      // inputのvalueを削除
      document.getElementById(id).value='';
    },
    // クリックされた時の削除機能
    editImage(index){
      this.imageList.splice(index, 1);
    },
  }
}
</script>
```

# 終わりに
もし参考になったという方がいましたらいいね等お願いします！!
「世界で闘うプログラミング力を鍛える本」Pythonコード解答例 - 1.4 回文の順列


「世界で闘うプログラミング力を鍛える本」Pythonコード解答例 - 1.4 回文の順列

#目次
###CHAP1. 配列と文字列
1. [重複のない文字列](https://qiita.com/YusukeEngineer/items/494ccb49de66b39d16c0)
2. [同じ文字の数を数える](https://qiita.com/YusukeEngineer/items/4ed19c5f6efa23c62351)
3. [URLify](https://qiita.com/YusukeEngineer/items/4208561f8e1ac04cbbf4)
4. [回文の順列](https://qiita.com/YusukeEngineer/items/5d05620f3d9e9cc4e7b5)
5. [一発変換](https://qiita.com/YusukeEngineer/items/122360b8a95f6eb858f7)
6. [文字列圧縮](https://qiita.com/YusukeEngineer/items/0bd139a361ce3f4eac36)
7. [行列の回転](https://qiita.com/YusukeEngineer/items/4b2fd1ed64385612cba6)
8. ["0"の行列](https://qiita.com/YusukeEngineer/items/bed1ce30d4ef966fe142)
9. [文字列の回転](https://qiita.com/YusukeEngineer/items/2b6f9d2a733d2815a1ac)

#Pythonコード解答例
```python
def isPermutationOfPalindrome(phrase):

    phrase = phrase.lower()
    table = buildCharFrequencyTable(phrase)
    return checkMaxOneOdd(table)

def checkMaxOneOdd(table):
    
    foundOdd = False

    for count in range(len(table)):
        if table[count]%2 == 1:
            if foundOdd:
                return False
            foundOdd = True

    return True 

def getCharNumber(c):

    a = ord("a")
    z = ord("z")
    val = ord(c)

    if a <= val and val <= z:
        return val - a
    
    return -1

def buildCharFrequencyTable(phrase):
    
    table = [0] * 26

    for id in range(len(phrase)):
        c = phrase[id]
        x = getCharNumber(c)

        if x != -1 :
            table[x] = table[x] + 1
    
    return table

print(isPermutationOfPalindrome("Tact Coa"))
```