OmniAICreator/Qiita-1.07M huggingface dataset:
macOS CatalinaでDocker上のlilypondを動かして楽譜を作成する

### 背景
基本的に以下の先行事例と同じ動機。

- [Running Lilypond on MacOS 10.15 (Catalina) | Kyle W. Baldwin](https://kylebaldw.in/posts/2019/running-lilypond-on-catalina/)
- [macOS Catalinaで死んだLilypondをDocker上で動かす - Qiita](https://qiita.com/seekworser/items/052331a5b59c37f9d5aa) 


楽譜作成ソフトlilypondはmacOSの64bit版が存在しないためCatalina以降では実行できない。[公式サイト](https://lilypond.org/macos-x.html)には非公式バイナリも紹介されているが、いつまでメンテナンスされているかわからない。

ただし上記２サイトはdockerhubでイメージが管理され、いまいち現時点ではDockerfileの作り方もわからないDocker初心者にはよくわからないところもあったので、特に１つ目を参考にしつつ０から作れる方法を以下にメモ。

たぶんDocker hubを理解すればそちらの方が楽に思えるのだろうけれど。

環境はMacBook Air 13-inch 2018。

### Dockerをインストールしてイメージを作成

Running Lilypondのページで紹介されているように [Install Docker Desktop on Mac](https://docs.docker.com/docker-for-mac/install/)からDockerのインストーラをダウンロードし、ドラッグアンドドロップでインストールしてDocker hubにアカウントを作成してログイン。ログインは必要ないかもしれない。

次に

```bash
% docker pull ubuntu
```

でイメージをダウンロードし、

```bash
% docker run -it ubuntu
```

でそのubuntuイメージからコンテナを作成・起動・アタッチ。オプション-itはそれぞれ標準入力利用可能と端末(TTY)利用可能。起動したままdettachしたい場合はCtrl+P, Ctro+Q。停止させたい場合はexit。

参考: [Dockerコンテナの作成、起動〜停止まで - Qiita](
https://qiita.com/kooohei/items/0e788a2ce8c30f9dba53)

### lilypondをDockerコンテナ上にインストール

アタッチしたコンテナ上で[
Kyle Baldwinさんのgithub](https://github.com/gpit2286/docker-lilypond/blob/master/Dockerfile)にあるように、

- apt-get update
- apt-get install locales
- apt-get update
- apt-get install wget
- [lilypondのバイナリ](https://lilypond.org/download/binaries/linux-64/)をwget
- shでインストール。

```
% sh lilypond-2.20.0-1.linux-64.sh
```

以上でこのコンテナ上では普通にlilypondが実行できるようになった。

### lilypondがインストールされたUbuntuコンテナをイメージとして保存する

Ctrl+P, Ctrl+Qでコンテナからdettachする。

Docker ps で起動しているコンテナの一覧を表示し、ハッシュ値を得て、docker コミットしてdocker-lilypondという名前のimageを作成。

```
% docker commit <hash> docker-lilypond
```


参考: [Dockerでcommitしてみる - Qiita](
https://qiita.com/mats16/items/712575dc50513dfdf0a2)

Dockerイメージ一覧にdocker-lilypondが表示された。

```
% docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
docker-lilypond     latest              b77f9ee3467e        4 days ago          303MB
ubuntu              latest              4e2eef94cd6b        2 weeks ago         73.9MB
```

### Mac上からDockerコンテナ上のlilypondを実行して楽譜を取り出す

以下のコマンドで一回ごとにイメージを起動してlilypond を実行できる。カレントディレクトリ(pwd)を/app にマウントし、sample.lyファイルに対してlilypondコマンドを実行する。

```
% docker run --rm -v $(pwd):/app -w /app docker-lilypond lilypond sample.ly
```
すると端末にlilypondのメッセージが表示され、カレントにsample.pdfが作成される。このコマンドをファイルに保存してchmod +xして/usr/local/binに置く。

```bash:lilypond.sh
#! /bin/bash
docker run --rm -v "$(pwd)":/app -w /app docker-lilypond lilypond "$@"
```

以降は

```
lilypond.sh aaa.ly
```
でaaa.pdfが作成できる。 `lilypond.sh --version` のような実行も可能。
過去の電力使用量取得 九州電力編

# はじめに

電力使用量予測のセミナーをしていて、各電力会社の公表されている過去の使用電力量の形式がまちまちなので取得するのが難しいというご意見を聞いていました。
そこで、それぞれの電力会社別にデータの取得方法をまとめてみます。

ちなみに、対象とする電力会社は、北海道電力、東北電力、東京電力、北陸電力、中部電力、関西電力、中国電力、四国電力、九州電力、沖縄電力で、今回は九州電力さんを扱ってみます。

注：大量のダウンロードを繰り返すとサーバに負担がかかるので、ダウンロードは一回だけにするか、対象期間を限定して行うよう心がけて下さい。

# 動作環境

GoogleさんのCoraboratoryという環境で動作させます。

[Colaboratory](https://colab.research.google.com/)

# Webサイト

以下のWebサイトからデータをダウンロードできそうです。

[九州電力送配電 でんき予報](https://www.kyuden.co.jp/td_power_usages/pc.html)

# ダウンロード

```py:
for y in range(2016, 2020):
  for m in range(1,13):
    
    for d in range(1, 32):
      url = "https://www.kyuden.co.jp/td_power_usages/csv/juyo-hourly-{:04}{:02}{:02}.csv".format(y, m, d)
      !wget $url
```

# 読込と可視化


```py:
from glob import glob
import pandas as pd

files = glob("*.csv")
files.sort()

df_juyo = pd.DataFrame()

for f in files:
  print("\r", f, end="")
  try:
    df = pd.read_csv(f, encoding="Shift_JIS", skiprows=7, nrows=24)
    d = df.DATE + " " + df.TIME
  except:
    df = pd.read_csv(f, encoding="Shift_JIS", skiprows=13, nrows=24)
  df.head()
  df_juyo = pd.concat([df_juyo, df])

df_juyo.index = pd.to_datetime(df_juyo["DATE"] + " " + df_juyo["TIME"])
df_juyo["当日実績(万kW)"].plot(figsize=(15,5))
```
![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114240/21813b09-69fc-1731-b26a-a18e1e414ed5.png)

できた！

沖縄電力さんのグラフの上限が140万kWhだったので、九州電力さんは約10倍ですね〜。

また、2018年の年末、2019年の年始、2019年の年末と電力使用量が大きく減っていますね。
何かあったのでしょうか？
ちょっと調べてみます。

電気使用量を見ると、色々な気付きがありますね。
以上、現場からきむらがお伝えしました。

# 補足

記事を読んだ人から「時間がかかり過ぎるので、手っ取り早くデータが欲しい場合にはどうしたら良いか？」という質問があったので、ちょっとだけデータを販売してみることにしました。
データに興味があれば以下のURLをご覧下さい。

https://ticket.tsuku2.jp/eventsDetail.php?ecd=16260900020422
予測モデル作成時と予測時の前処理は確実に揃えよう

#はじめに
予測モデルを作成するのはいいけど、そもそも予測する時に、モデル作成時の前提条件と完璧に同じにしてる？って話。機会学習システムの運用上、非常に重要な話だと思われる。

特にケモインフォマティクスの分野では様々な商用、フリーソフトを組み合わせてモデルを作ることが多い。化合物の前処理はAツールで行い、次にBツールで記述子計算して、さらにCツールで予測モデルを作って。。。という感じでモデルを作ったはいいが、使う人が同じ前処理をしなかった場合にどのようなことが起こるのか今回、検証してみた。


#環境
- Python 3.7
- RDKit 2020.03.05
- Scikit-learn 0.23

#検証シナリオ
前処理にも色々あるが、たまたま見つかったということもあり今回は以下のシナリオで進めた。

- 化合物データを取り扱う際、水素が明示的に付与されている場合とそうでない場合(自明なものは省略する場合)がある。
- RDKitのMorganフィンガープリントでは、水素が明示的に付与されているかどうかによって、出力される説明変数の値がそこそこ異なる。
- 今回、予測モデル作成時と予測時に与える入力化合物において、明示的に水素を付与するかどうかの条件をそろえた場合と、そろえなかった場合で、予測値にどの程度ぶれが発生するか検証してみた。

#RDKit Morgan フィンガープリントの計算方法

そそもRDKitのMorganフィンガープリントって何？って話だが、ソースで示すとこんな感じ。

``` python
from rdkit.Chem import AllChem

mol = Chem.MolFromSmiles("CCC")
mol = Chem.AddHs(mol)
fp = AllChem.GetMorganFingerprintAsBitVect(mol, radius=3, nBits=2048, useFeatures=False, useChirality=False)
```

1行目で"CCC"というのが化合物をあらわすSMILESという文字列から化合物オブジェクトを生成し、2行目で化合物に水素を明示的に付加し、3行目で記述子計算を行っている。記述子計算結果は2048ビットの配列であり、各ビットは0または1となる。

これをつかって予測モデルを作成したり、予測をしたりするわけだが、以降は、```Chem.AddHs(mol)``` を、予測モデル作成時と予測時で共につけなかった場合と、予測モデル作成時のみつけた場合で予測結果がどのように異なるかを確認した。

# やってみた＆考察
学習データ約100件、予測対象データ約10000件のデータにおいて、以下3パターンの組み合わせで予測した結果同士の相関を表にまとめた。

- 予測モデル作成：水素なし、予測:水素あり
- 予測モデル作成：水素あり、予測:水素あり
- 予測モデル作成：水素あり、予測:水素なし

その結果は以下の通りとなった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329816/ebe6d9e7-d658-6d3e-cf0c-6bebad0ea7fc.png)

学習データに水素を明示的に付与して記述子計算して作成した予測モデルに対し、予測対象データに水素を省略して記述子計算・予測を行った場合の予測値は、水素を明示的に付与して予測した場合の予測値と比べ、たったの0.48程度の相関しかない。この2つの関係をプロットしたものは以下の通りとなる。かなりの誤差である。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329816/86e58104-cffa-932b-1542-d745d67a7c45.png)


この0.48という数値は、水素あり、なしの条件を、予測モデル作成時と予測時でそろえて予測を行った者同士の相関0.58よりも低い。Morganフィンガープリントの入力として水素あり、なしのどっちが妥当かという議論もあるが(明示されていないケースもある）、まずは入力の条件をきちんと揃えることが重要だと思われる。

#結論
予測モデルを作成する場合と、予測をする場合の、前処理の条件は確実に揃えるようにする。前処理も含めてシステム側で提供するのが一番であるが、何等かの事情によりそこまでできない場合、ドキュメントにしっかり書くようにしよう。
				
# 参考
- [RDKit Morgan fingerprint](https://www.rdkit.org/docs/source/rdkit.Chem.rdMolDescriptors.html)
Raspberry Pi 4B に関する周辺機器、購入してよかったもの

# Raspberry Pi 4B周辺機器
タイトルのままですが、きがつくと周辺機器を結構？いやだいぶ購入してた。そのまとめ。24/365(=いわゆる24時間運用,サービス)で動かと思って購入した周辺機器をリストアップしてみた。

# 買ったもの感想
アフィは

| 種類 | 製品名  | 感想 |
|:-----------|:------------|:------------|
| Pi4ケース| GeeekPiアクリルケース、Raspberry Pi 4モデルB用冷却ファンおよびドライバー付きRaspberry Pi 4Bケース       | なんだかんだで３回購入。ヒートシンクもファンもついているのでお勧め。ただナットが付属していないときもあったので注意が必要(連絡したら送ってくれた)。amazon で 999円★★★ |
|DCブラシレス冷却ファンヒート|2個 Raspberry Pi DCブラシレス冷却ファンヒートシンク冷却ラジエータ|Pi4を冷却するためのファン。これはよかった。amazon 700円★★★|
|USB急速充電器|Anker PowerPort Speed 4|安心のAnker でしょう。これにPi4を2台つなげてます。Yahooショップ 2899円★★★|
| USBハブ       | Digio デジオUH-2294BK USB2.0        | バスパワー対応しているので便利だしかつ,3.0に2.0製品挿しても認識しないのでこれが安くていい。ヨドバシで 390円★★★ |
| SATA-USB 3.0 変換ケーブル      | SATA-USB 3.0 変換ケーブル YOKELLMUX 2.5インチ SSD/HDD用      | SATA-USB 3.0とあるが、Pi4では 2.0としか認識せず。amazonで 720円。製品レビューみても2.0だろ？という感じ(中国製)★|
| | SATA-USB 3.0 変換ケーブル 2.5インチ SSD/HDD用| amazonで 350円。こちらも(中国製)ですが商品到着まで3週間。やっぱり2.0認識…★★|
| | SATA-USB3.0変換ケーブル 2.5インチHDD SSD SATA to USBケーブル 50cm HDD/SSD換装キット          | Yahooショッピングで購入。少し前に500円で購入したがいま、771円だった。こちらはばっちり、3.0で認識。★★★           |
|SATA-USB 3.0外付けケース | 2.5インチ SSD/HDD 外付けケース USB3.0 SATA3.0対応 | Yahooショッピングで購入。1100円で購入したが 2.0の認識ちっつ。意外といらっとした商品★           |
| ICカードリーダー| SCR3310/v2.0 【簡易パッケージ品】| SCR3310 のバルク品。やすいしいいんじゃないかと。amazonで 1680円★★★|
| | e-Tax USB接続 カードリーダライタ | 安いICカードリーダー。中国から届くので3週間みといたほうがいい。amazonで 560円★★★|
| USB-DCケーブル|カモン 【(COMON)製】USB(A)←→DCジャック 規格：5V/0.5A | DCジャックのAC電源が邪魔なのでUSBから給電、使用方法は個人責任で。amazonで 398円★★★|
|USB-Type-C ケーブル 3A|急速充電 USB3.0 変換 タイプc typec USB-C usbc USB-A android Xperia Galaxy iPad Pro MacBook switch iqos|100均でも買えるのだけど一応こだわってみただけ。結局100均の製品でもって感じだったかな。amazonで 548円★|
|USBメモリ|TransMemory THN-U202W0320A4 [32GB]|テレ購入時期なんだろうが、2020/9時点で16/32の差が100円。。まあ割り切りの問題。amazonで 540円★★★|
|Micro SD|Gigastone Micro SD [32GB]|こちらもテレ購入時期なんだろうか価格変動が大きいね。amazon 680円★★★|
|SSD|CSSD-S6H2GCG3VW(240G)|割高だったが120TBなのでこれをチョイス。amazonで 3938円★★★|
|番外|Pi4いれる収納らっく。ダイソーのスッキリ収納 すきまトレー（外側のみ）|２段にしてPi4を収納してます。Piは小型だけどケーブル類が煩雑になるので、これでキレイに★★★★★|

# intelのNUCが安い？
妥協点あると思うがpi4、足回りこだわると意外といい値段になる気がします。ま、豆腐屋のエンジン、、みたいなノリがpi4面白いですよね


# 計算したくないが
なんかSSD以外は、小物でたいした金額でないと思いつつ。ここまで購入しトータルで見ると結構いい金額になりました。まあ勉強用と割り切れば安いのかな。

ご参考まで
WindowsでReactの開発環境を整える

#はじめに
WindowsでReactの開発環境を作ってみたところ、いくつかエラーが出たのでその手順と解決法を残します。
使用した環境は以下の通り

- Windows10
- Node.js v14.8.0
- NPM v6.14.7
- Windows パワーシェル（VScode経由）

#手順
1. Node.jsのインストール
3. create-react-appのインストール
4. プロジェクトを作成してHello worldしてみる

#おまけ
- ESlintを設定する
- ディレクトリ構成のかんたんな説明

# 1.Node.jsのインストール
まずは[Node.js公式サイト](https://nodejs.org/ja/)からダウンロードし、Node.jsをインストールします。
ターミナルで以下のコマンドを打ってVersion情報が表示されればインストール成功しています。

``` shell:Node.jsのVersion情報を確認する
node -v
```

Node.jsがインストールされていればnpmも使うことが可能になります。

# 2.create-react-appのインストール
create-react-appをグローバルインストールします。

```shell:create-react-appをインストールする
npm install -g create-react-app
```

ここまでで準備は完了です。

# 3.プロジェクトを作成してHello worldしてみる

プロジェクトを作成したいディレクトリに移動し、プロジェクトを作成していきます。
多くのドキュメントではプロジェクトを作成するのに以下のコマンドを見かけると思います。

```shell:Reactのプロジェクトを作成する
create-react-app <プロジェクト名>
```

Windowsでは、インストールしただけでは上記のコマンドにパスが通っておらず使う事ができないことがあるようです。
解決方法は以下
1. パスを通す
2. npxコマンドを使う

今回はnpxコマンドを使う方法で作成していきます。
(以下サンプルのプロジェクト名をhelloworldとして作成します。)

```shel:Reactのプロジェクトを作成する
npx create-react-app helloworld
```

これで、カレントディレクトリにhelloworldというディレクトリが作られ、プロジェクトの作成が完了します。

パスの通し方については現在調査中です。

プロジェクトが作成できたら、早速動かして行きます。
helloworldディレクトリに移動し、仮想サーバー上でWebアプリの動作を確認します。

```shell:Webアプリをプレビューする
cd helloworld
npm start
```

以上のコマンドを打つと、規定のブラウザが起動してWebアプリの動作を確認することができます。
他のブラウザで見たい場合は```localhost:3000```にアクセスすることで見ることができます。
終わる場合はターミナルで```Ctrl + c```を押して終了します。

以降、srcディレクトリ内のApp.jsを編集することでWebアプリを作っていきます。

# おまけ
## ESlintを設定する
create-react-appを使用してプロジェクトを作成すると、ESlintがモジュールに追加された状態になっています。
なので、設定を行うだけでESlintが使用可能になります。

```shell:ESlintの設定ファイルを作成する
npm eslint --init
```

![2020-09-03_19h46_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688078/208b067f-1c3a-6e2c-27ed-d362c0cf75ac.png)

最後の質問、「Would you like to install them now with npm?」でYesにするとうまく動かなかったので、Noにしています。
ここで改めてインストールしてしまうと、競合するのかもしれません。

Compiles successfully!と表示されたら初期化が完了します。
画像では設定ファイルをJavaScriptにしているので```.eslintrc.js```というファイルが作成されます。
環境に合わせて設定を追加してください。

## ディレクトリ構成のかんたんな説明
以下は自分のための備忘録としての、ディレクトリ構成のかんたんな説明です。

<プロジェクト>
　　　L ./node_modules　（インストールされているモジュールが入ってる場所。）
　　　L ./public　（テンプレートのHTMLや画像が入っています。）
　　　L ./src　（アプリのソース等、ここのファイルを編集してアプリを作成していきます。）
　　　L .eslintrc.js　（ESlintの設定ファイル）
　　　L .gitignore　（Gitで追跡対象にしないファイルを設定します。）
　　　L package.json　（インストールされているモジュールについての設定ファイル）
　　　L README.md　（Read meファイル）
　　　L yarn.lock　（環境によっては無いこともある）

この他、ビルド後のデータを格納するディレクトリがあります。

#最後に
create-react-appを使ってReactの開発環境を作ると、すでに必要なモジュールやファイルが用意されているため素早く開発を始められます。
最初はCDNを使ってみようと思ったのですが手こずってしまい、結局こちらのほうが早くReactの勉強を始めることができました。
【Swift・Objective-C】iframeを含むWebViewを表示する際にshouldStartLoadWithRequest:が呼ばれてしまう時の対処法

#iframeのURLに反応するshouldStartLoadWithRequestに対する対処法
以下のようにメインコンテンツとiframeかを判定することにより、iframeにshouldStartLoadWithRequestが反応しても対処ができます。

##Swift

```swift
func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {

    if request.URL.absoluteString == request.mainDocumentURL?.absoluteString {
        // メインコンテンツ(読み込もうとしているWebView)の読込時の処理
    }
    // iframeのURLの読み込み時の処理
}
```

##Objective-C

```Objective-C
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    if ([request.URL.absoluteString isEqualToString:request.mainDocumentURL.absoluteString]) {
        // メインコンテンツ(読み込もうとしているWebView)の読込時の処理
    }
    // iframeのURLの読み込み時の処理
}

```
pyatsのtestbed.yamlをxlsxから作る

自分用の備忘録です。
#バージョン
pyatsは20.8でやっています。

#xlsxファイル(hosts.xlsx)
こんな感じで作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704559/0e21b637-bb45-12fb-9cfe-47a65e1ee4ef.png)

#実行する
昔のバージョンだとgenie createみたいですが、少し変わっているようです。
```pyats create testbed file --path hosts.xlsx --output testbed.yaml```

#完成
やったね！

```
devices:
  R10:
    connections:
      cli:
        ip: 10.0.0.10
        protocol: telnet
    credentials:
      default:
        password: cisco
        username: cisco
      enable:
        password: cisco
    os: ios
    type: ios
  R11:
    connections:
      cli:
        ip: 10.0.0.11
        protocol: telnet
    credentials:
      default:
        password: cisco
        username: cisco
      enable:
        password: cisco
    os: ios
    type: ios
  R12:
    connections:
      cli:
        ip: 10.0.0.12
        protocol: telnet
    credentials:
      default:
        password: cisco
        username: cisco
      enable:
        password: cisco
    os: ios
    type: ios
  R3:
    connections:
      cli:
        ip: 10.0.0.3
        protocol: telnet
    credentials:
      default:
        password: cisco
        username: cisco
      enable:
        password: cisco
    os: ios
    type: ios
  R4:
    connections:
      cli:
        ip: 10.0.0.4
        protocol: telnet
    credentials:
      default:
        password: cisco
        username: cisco
      enable:
        password: cisco
    os: ios
    type: ios
  R5:
    connections:
      cli:
        ip: 10.0.0.5
        protocol: telnet
    credentials:
      default:
        password: cisco
        username: cisco
      enable:
        password: cisco
    os: ios
    type: ios
  R6:
    connections:
      cli:
        ip: 10.0.0.6
        protocol: telnet
    credentials:
      default:
        password: cisco
        username: cisco
      enable:
        password: cisco
    os: ios
    type: ios
  R7:
    connections:
      cli:
        ip: 10.0.0.7
        protocol: telnet
    credentials:
      default:
        password: cisco
        username: cisco
      enable:
        password: cisco
    os: ios
    type: ios
  R8:
    connections:
      cli:
        ip: 10.0.0.8
        protocol: telnet
    credentials:
      default:
        password: cisco
        username: cisco
      enable:
        password: cisco
    os: ios
    type: ios
  R9:
    connections:
      cli:
        ip: 10.0.0.9
        protocol: telnet
    credentials:
      default:
        password: cisco
        username: cisco
      enable:
        password: cisco
    os: ios
    type: ios
```
NTPサーバをリリースしたら

## 1. はじめに
以前NTPサーバをリリースしたら次の日にほかのチームからサーバの時間が遅れてると連絡があった。
JST/UTCミスってリリースしたんだなということで調査開始。

## 2. 環境
Hyptervisor:VMware ESXi 6.5
OS:Red Hat Enterprise Linux 7.4
NTPサーバ：ntpd

## 3. 調査

```
[root@hostname1 ~]# date
2020年  9月  3日 木曜日 00:14:03 JST
```
まず、NTPサーバの時刻確認。めっちゃずれてる…。
担当の人リリースの時に確認してなかったのかい…。今日に限って担当はいないし…。細部を確認してみよう。

```
[root@hostname1 ~]# hwclock --show
2020年09月02日 23時49分20秒  -0.036332 秒
[root@hostname1 ~]# timedatectl
      Local time: 水 2020-09-02 23:52:26 JST
  Universal time: 水 2020-09-02 14:52:26 UTC
        RTC time: 水 2020-09-02 23:52:25
       Time zone: Asia/Tokyo (JST, +0900)
     NTP enabled: no
NTP synchronized: no
 RTC in local TZ: yes
      DST active: n/a
```
ハードウェアクロックがずれてるー。
ESXiの設定がUTCになってる？から仮想のハードウェアクロックもずれてるのか？？

とりあえず直そう

## 4. 対処
まず、ハードウェアクロックを手動で補正。

```
[root@hostname1 ~]# hwclock --set --date "03 SEP 2020 09:10"
[root@hostname1 ~]# hwclock
2020年09月03日 09時10分09秒  -0.989578 秒
```
その後、ハードウェアクロックからシステムクロックを同期

```
[root@hostname1 ~]# hwclock -s
[root@hostname1 ~]# date
2020年  9月  3日 木曜日 09:13:10 JST
```

対処終了。
laravelのメール本文のテスト

Mailtrapを使った方法と
メールの受け取り先を共通にする方法の2つを紹介します

## Mailtrapを使った方法
https://mailtrap.io/


### .envファイルの修正
Mialtrapの設定を見ながらsmtpサーバの設定をenvファイルに反映する
![mailtrap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68981/dcab677a-3716-3ec0-8cec-4fcdd69f779d.png)

```
MAIL_DRIVER=smtp
MAIL_USERNAME=xxxxxxxxxxxxxx
MAIL_PASSWORD=xxxxxxxxxxxxx
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
```


## phpunit.xml
一時的にphpunitを使ったメール送信をMailtrapでキャッチしたい場合は`MAIL_DRIVER`の値が上書きされてしまうので注意
MAIL_DRIVERの値をsmtpにする
ただ戻しておかないとCircleCIとかでテストを回すたびにMailtrapにメールが飛んでMailtrapの制限にいっちゃうので注意

```
<?xml version="1.0" encoding="UTF-8"?>
<phpunit backupGlobals="false"
         backupStaticAttributes="false"
         bootstrap="vendor/autoload.php"
         colors="true"
         convertErrorsToExceptions="true"
         convertNoticesToExceptions="true"
         convertWarningsToExceptions="true"
         processIsolation="false"
         stopOnFailure="false">
    <testsuites>
        <testsuite name="Unit">
            <directory suffix="Test.php">./tests/Unit</directory>
        </testsuite>

        <testsuite name="Feature">
            <directory suffix="Test.php">./tests/Feature</directory>
        </testsuite>
    </testsuites>
    <filter>
        <whitelist processUncoveredFilesFromWhitelist="true">
            <directory suffix=".php">./app</directory>
        </whitelist>
    </filter>
    <php>
        <server name="APP_ENV" value="local"/>
        <server name="BCRYPT_ROUNDS" value="4"/>
        <server name="CACHE_DRIVER" value="redis"/>
        <server name="MAIL_DRIVER" value="smtp"/>
        <server name="QUEUE_CONNECTION" value="sync"/>
        <server name="SESSION_DRIVER" value="array"/>
    </php>
</phpunit>
```


## 宛先のメールアドレスを変えて自分のメールボックスでメールを受けて確認する方法

config/mail.phpにtoを設定すると全てのメールが指定されたアドレスに送信されます

```
'to' => [
    'address' => 'example@example.com',
    'name' => 'Example'
],

```
ローカル環境からherokuにデプロイしたRailsアプリを更新したいとき

<h2>やりたいこと</h2>

ローカル環境からherokuにデプロイしたRailsアプリの内容を更新する。

具体的には、変更したデータベースを反映したい。

（忘備録に残しておきます）

<h2>更新方法</h2>

ターミナルにて、更新したいアプリがあるディレクトリに移動し、
`$git add -A`
`$git commit -m "Update application"`
`$git push heroku master`

からの、

`$heroku run rails db:migrate`

これでいけました。

<h2>git push heroku master時にエラーが発生する場合</h2>

gemfileをいじったとき、最後にbundle installをし忘れている可能性があります。

ということで、再びターミナルにて

`＄budnle install`

↓

`$git add -A`
`$git commit -m "Update application"`
`$git push heroku master`

↓

`$heroku run rails db:migrate`


これでherokuにデプロイしていたアプリの内容を更新できました！

<h2>参考にした記事</h2>

以下の記事が参考になりました。

https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39
IntelliJ/Android Studioのプロジェクトにプロジェクトアイコンを設定しよう

DroidKaigiアプリがプロジェクトアイコンを設定しているので、知っている人も多いと思います。
私もそれで知りました。
しかし、あまりドキュメントとか、設定されているプロジェクトを見かけない気がしたので（私が知らないだけだと思うけど）やり方を書きます。

設定するとWelcome画面やToolboxのプロジェクトリストにアイコンが表示されるようになります。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155171/7a5a03c3-4c82-3134-8665-c7f01d96fa8d.png)
Toolboxの場合は何もしなければIDEのアイコンが表示されますが、プロジェクトのアイコンが表示されるようになります。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155171/6e045a86-ff24-78ff-0d68-3f60582effd3.png)
どうでしょう？ **カッコいいですよね！** もう、設定する以外の選択肢は存在しないでしょう！

特にAndroidアプリの場合はアプリアイコンがあるはずなので、それを設定するだけです。

# プロジェクトアイコンの設定方法

`.idea`ディレクトリの中に、`icon.png`（デフォルトアイコン）、`icon_dark.png`（ダークテーマ用アイコン）を置くだけです。`icon_dark.png`は無くてもいいです。
大きさも特にこれでないといけないみたいなものはなさそうなので、私はmdpi用のアプリアイコン（48x48）を置いています。もっと大きいアイコンでもいいと思います。
プルリクだとこうなります
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155171/437561cd-72e0-63c2-3110-3962c6880192.png)
`.gitignore`で`.idea`ディレクトリを指定している場合は除外設定が必要なので、もうちょっとDiffが出てきますね。

```:.gitignore
!.idea/icon.png
!.idea/icon_dark.png
```

**ね、簡単でしょう？**

仕様のようなものは見つけられていないのですが（あるぞって場合は教えてください）
読み出してる処理はこの辺でしょうか。

https://github.com/JetBrains/intellij-community/blob/ba678ca53c292bd4c6ce877bbc569f73902bb1c6/platform/platform-impl/src/com/intellij/ide/RecentProjectIconHelper.kt#L124-L159


以上
プロジェクトアイコンが設定されたプロジェクトが増えることを祈っています。
国際人権法を（機械）翻訳するために

国際法
https://www.unic.or.jp/activities/international_law/

国連憲章
https://legal.un.org/ola/

世界人権宣言
About the Universal Declaration of Human Rights Translation Project

人権
http://www.un.org/en/sections/universal-declaration/human-rights-law

https://treaties.un.org/
Multilateral Treaties Deposited with the Secretary-General


```shell-session:bash 
$ docker run -v /Users/[user]/Downloads/law:/home/law -it ubuntu /bin/bash
```

```shell-session:bash
# apt update; apt -y upgrade
# apt install -y poppler-utils vim  
# cd home/law
# pdftotext -q eng.pdf > eng.txt
# tr 'a-z' 'A-Z' < eng.txt > engs.txt
# awk -f ../wc.awk engs.txt > engwc.txt
```
で単語帳を作成した。

念のために、HTMLからテキストファイルを生成した。

```shell-session:ubuntu
# tr 'a-z' 'A-Z' < eng.txt > engs.txt
# awk -f ../wc.awk engs.txt > engwc.txt
```

単語数が、PDFから作った方が多い。

なにかを一覧でしたべたら「i」という単語がPDFファイルにはあり、テキストファイルにはない。

真剣に両方を見比べてみた

PDFでは

> Article I

と、１の代わりにI（アイ）の文字を使っていた。




https://un75.online/?lang=jpn

人種・性差別なく人の命を大切にすること、生物多様性を含む自然環境を大切にすること、１０歳までの子どもたちに教育の機会を。
[Swift5] 部分文字列を文字数から取得するときの注意点

Swiftの`String`は真剣にunicodeを扱っているらしく、大変難しいです。
参考：[Swift の文字列の長さ - Qiita](https://qiita.com/yamoridon/items/6f73ffe02ab46eb6ae85)

部分文字列(ex:「アイウエオ」の「イウエ」)の取得も例外ではありません。Swift4までのやり方とは変わってしまい、調べてもなかなか出てこないのでメモしておきます。

# 追記
よく考えるとこれが一番スマートでした。返ってくるのは`SubString`でパフォーマンス上のメリットもありそうです。

```swift
let string = "✨💪🥺✨"
let partialString = string[string.index(string.startIndex, offsetBy: 1)...string.index(string.startIndex, offsetBy: 2)]
print(partialString) //"💪🥺"
```

# 本文
まず、求めるのは「`i`番目の文字から`j`番目の文字まで」とします。例えば`i=1, j=3`で`string = "アイウエオ"`ならば`partialString = イウエ`となります。
以下は誤りです。

```swift
let partialString = [String.Index(utf16Offset: i, in: string)...String.Index(utf16Offset: j, in: string)]
```
私は最初うっかりしてこの方法を使っていたのですが、これだと次のような例でバグが起こります。

```swift
let string = "✨💪🥺✨"
let partialString = [String.Index(utf16Offset: 1, in: string)...String.Index(utf16Offset: 2, in: string)]
print(partialString) //"💪"
```
なぜこうなってしまうのかというと、`utf16Offset`としっかり書いてある通り、あくまでここで得ている`Index`は`utf16`でのものだからです。実際

```swift
print("✨💪🥺✨".utf16.count) //6
```
なので、納得のいく結果でした。
確実に文字数単位で取り出したいときは、一度文字ごとに分割してから改めて次のようにします。

```swift
let string = "✨💪🥺✨"
let partialString = String(string.map{$0}[1...2])
print(partialString) //"💪🥺"
```
なかなか危ないところなので気をつけましょう。
Sass for文で楽したい

# 前提
SassのSCSS記法を用いる。

前回の続き。https://qiita.com/mei0210/items/5fdeef361249aa3a2f9a

```style.scss
    @media screen and (max-width: 900px) and (min-width: 701px){
      width: calc(100% / 4);
    }

    @media screen and (max-width: 1100px) and (min-width: 901px){
      width: calc(100% / 5);
    }

    @media screen and (max-width: 1300px) and (min-width: 1101px){
      width: calc(100% / 6);
    }

    @media screen and (max-width: 1500px) and (min-width: 1301px){
      width: calc(100% / 7);
    }
```

max-width 1500pxまでメディアクエリで書いた。
max-width 2900pxまで同じように書いていきたい。
地道に書いていくのはつらいので...

# for文で書く

```style.scss
    @for $i from 0 through 10 {
      @media (max-width: $i * 200 + 900px) and (min-width: $i * 200 + 701px) {
        width: #{100% / ($i + 4)};
      }
    }
```
これだけ！

cssにコンパイル↓

```style.css
@media (max-width: 900px) and (min-width: 701px) {
  .wrap .circle {
    width: 25%;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .wrap .circle {
    width: 20%;
  }
}

@media (max-width: 1300px) and (min-width: 1101px) {
  .wrap .circle {
    width: 16.66667%;
  }
}

@media (max-width: 1500px) and (min-width: 1301px) {
  .wrap .circle {
    width: 14.28571%;
  }
}

@media (max-width: 1700px) and (min-width: 1501px) {
  .wrap .circle {
    width: 12.5%;
  }
}

@media (max-width: 1900px) and (min-width: 1701px) {
  .wrap .circle {
    width: 11.11111%;
  }
}

@media (max-width: 2100px) and (min-width: 1901px) {
  .wrap .circle {
    width: 10%;
  }
}

@media (max-width: 2300px) and (min-width: 2101px) {
  .wrap .circle {
    width: 9.09091%;
  }
}

@media (max-width: 2500px) and (min-width: 2301px) {
  .wrap .circle {
    width: 8.33333%;
  }
}

@media (max-width: 2700px) and (min-width: 2501px) {
  .wrap .circle {
    width: 7.69231%;
  }
}

@media (max-width: 2900px) and (min-width: 2701px) {
  .wrap .circle {
    width: 7.14286%;
  }
}
```
for文とても便利。

# 参考
https://hacknote.jp/archives/917/
Windows 10が一瞬フリーズする問題の解消

![Windows 10 Pro-Version 1909 OS build 18363.1016](https://img.shields.io/badge/Windows 10 Pro-Version 1909 OS build 18363.1016-brightgreen)
定期的にディスクからキュッと音がして一瞬フリーズする現象。
エディタの入力が一瞬固まる、通話が一瞬途切れるなどで困っていたのでメモします。

一定時間経過するとディスクを休止状態にする設定が原因でした。

## 手順
コントロールパネル > ハードウェアとサウンド > 電源オプション > プラン設定の編集 > 「詳細な電源設定の変更」を押します。
![プラン設定の編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/66e49390-3121-0c67-9c5f-9eef08215a26.png)

「次の時間が経過後ハードディスクの電源を切る」を**0**に変更します。
![電源オプション1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/d7fb7c41-b5f1-d9d4-0ceb-b5f8ace12df5.png)
Firebaseパッケージをインストールした後に、Androidでビルドできない

普段はiOSシミュレーターで動作確認している。

AndroidでもGoogle認証を試そうとビルドしたら以下のエラーが発生

Execution failed for task ':app:mergeDexDebug'


### 解決策

gradleにmultiDexEnabledの設定をtrueにして追加する。

```android/app/build.gradle
defaultConfig {
        multiDexEnabled true //追加する
}
```

[64Kを超えるメソッドを使用するアプリでは上記設定が必要みたい](https://developer.android.com/studio/build/multidex?hl=ja)
RealSenseをPythonから使う時のインストール方法(pyenv編)

RealSenseを使う際に[このリンク](https://github.com/IntelRealSense/librealsense/issues/5275#issuecomment-555830996)を参照すれば大体うまくいくんですが、pyenvを用いているとちょっとひと手間必要だったので、その時のメモ書きです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8350/47110136-2826-fb75-1d9e-517b5c81e9d1.png)
これで万事うまくいくと思ったんですが `sudo make install` で入る先はpyenvの各バージョンのフォルダではないので、pyenvで切り替えられた環境では、 `pyrealsense2` などのモジュールは参照されません。
そのため、pyenvに `pyrealsense2` などのモジュールを認識させる必要があります。

sudo make install時にインストール先が出力されるのでチェックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8350/7df819a5-37b4-4af0-7819-247a0374a38d.png)
自分の環境だとこんな感じ

```
-- Up-to-date: /usr/local/Cellar/python@3.8/3.8.4/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/pyrealsense2/pybackend2.2.38.1.cpython-37m-darwin.so
-- Up-to-date: /usr/local/Cellar/python@3.8/3.8.4/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/pyrealsense2/pybackend2.2.cpython-37m-darwin.so
-- Up-to-date: /usr/local/Cellar/python@3.8/3.8.4/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/pyrealsense2/pybackend2.cpython-37m-darwin.so
-- Installing: /usr/local/Cellar/python@3.8/3.8.4/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/pyrealsense2/pyrealsense2.2.38.1.cpython-37m-darwin.so
-- Up-to-date: /usr/local/Cellar/python@3.8/3.8.4/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/pyrealsense2/pyrealsense2.2.38.cpython-37m-darwin.so
-- Up-to-date: /usr/local/Cellar/python@3.8/3.8.4/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/pyrealsense2/pyrealsense2.cpython-37m-darwin.so
```

一番Stableなのは

```
-- Up-to-date: /usr/local/Cellar/python@3.8/3.8.4/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/pyrealsense2/pybackend2.cpython-37m-darwin.so
-- Up-to-date: /usr/local/Cellar/python@3.8/3.8.4/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/pyrealsense2/pyrealsense2.cpython-37m-darwin.so
```

でしょうからこいつらをLinkします。
自分の環境の場合Brew経由でInstallしたので、下記のような感じでした。(それぞれでお使いのpyenvのフォルダへどうぞ)

```
$ cd /usr/local/var/pyenv/versions/3.7.7/lib/python3.7/site-packages
$ ln -s /usr/local/Cellar/python@3.8/3.8.4/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/pyrealsense2/pyrealsense2.cpython-37m-darwin.so pyrealsense2.so
$ ln -s /usr/local/Cellar/python@3.8/3.8.4/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/pyrealsense2/pybackend2.cpython-37m-darwin.so pybackend2.so
```

これを各versionのフォルダで行っていけばOKです
[rails]binding.pryで処理内容を確認する

#やりたいこと
@itemに入っている中身valueを知りたい

```
items#show
  def show
    @item = Item.find(params[:id])
  end
```


```
#show.html.erbの記述
<%= link_to '購入画面に進む',item_orders_path(@item.id)%>
```
処理内容
"購入画面に進む"ボタンを押すとorders#index（/items/:item_id/orders(.:format)）に画面遷移する。
購入ボタンを押すと@itemの内容を参照するようになるがどのような情報を抜き出しているのか見たい




#処理内容の確認方法

1.```gem 'pry-rails'```をGemfileに記述しインストールする
2.items#showにbinding.pryと記述する

```
  def show
    @item = Item.find(params[:id])
    binding.pry
  end
```
binding.pryによってshowアクションが実行された時処理を止めている

3.実際にブラウザを開きshow.hrml.erbのページを開くshowアクションを実行する。

4.処理が止まるのでコンソールのサーバーを見る

```
app/controllers/items_controller.rb:41 ItemsController#show:
    40: def show
 => 41:   binding.pry
    42: end

[1] pry(#<ItemsController>)>
```
showアクションで処理が止まっていることがわかる

5[1] pry(#<ItemsController>)>に@itemと記述する

```
[1] pry(#<ItemsController>)> @item
=> #<Item:0x00007f9ac9e01300
 id: 8,
 item_name: "ラーメン",
 info: "いい味出てる！",
 category_id: 3,
 status_id: 3,
 shipping_id: 3,
 area_id: 5,
 schedule_id: 4,
 price: 1000,
 user_id: 1,
 created_at: Fri, 04 Sep 2020 01:29:20 UTC +00:00,
 updated_at: Fri, 04 Sep 2020 01:29:20 UTC +00:00>
```
これで@itemに中身valueがわかった！


#補足
[1] pry(#<ItemsController>)>に@item.idとうつと

```
[2] pry(#<ItemsController>)> @item.id
=> 8
```
@item.id の内容が”８”ということがわかった

#まとめ

<%= link_to '購入画面に進む',item_orders_path(@item.id)%>
item_orders_pathに画面遷移したかったらitem_idが指定できないと遷移できない。

```
item_orders  /items/:item_id/orders(.:format)  orders#index
```
```
<%= link_to '購入画面に進む',item_orders_path(@item.id)%>
```
（@item.id）と指定することでの
:item_idに必要な情報を抜き出すことができた！
Sass(CSS) 等間隔に配置したい



# 前提
SassのSCSS記法を用いる。

```index.html
<div class="wrap">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
```
```style.scss
.wrap {
  display: flex;
  flex-wrap: wrap;
  width: 30%;
  background: skyblue;

  .circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: blue;
  }
}
```
![スクリーンショット 2020-09-06 14.42.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702863/8c924073-9011-f870-0f4c-f4e1582acbbf.png)

水色の範囲は画面幅に合わせて３０％としているので、可変である。
ここで実現したいことは、

+ 青丸が等間隔に並ぶ
+ 水色の四角の左右に青丸との間隔が無いようにする
+ 下の段の青丸は上の段の間隔に合わせて左詰めにする
+ 画面幅を変えても、上の条件を満たすようにする

# 試行錯誤① justify-contentでなんとかしたかった

https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

```style.scss
.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 30%;
  background: skyblue;

  .circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: blue;
  }
}
```

  justify-content: space-between; を追加。

![スクリーンショット 2020-09-06 14.45.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702863/88f0ec88-983f-c1bc-ab3d-6ce5a9562158.png)

◎条件を満たしている項目

+ 青丸が等間隔に並ぶ
+ 水色の四角の左右に青丸との間隔が無いようにする

×満たしていない項目

+ 下の段の青丸は上の段の間隔に合わせて左詰めにする


↑を満たすには、justify-contentでは無理そう。

# 試行錯誤② メディアクエリで頑張る

メディアクエリで青丸の幅を画面サイズに合わせて変える。

```style.scss
.wrap {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  width: 30%;
  background: skyblue;

  .circle {
    width: calc(100% / 3);
    height: 80px;
    border-radius: 50%;
    background: blue;

    @media screen and (max-width: 900px) and (min-width: 701px){
      width: calc(100% / 4);
    }

    @media screen and (max-width: 1100px) and (min-width: 901px){
      width: calc(100% / 5);
    }

    @media screen and (max-width: 1300px) and (min-width: 1101px){
      width: calc(100% / 6);
    }

    @media screen and (max-width: 1500px) and (min-width: 1301px){
      width: calc(100% / 7);
    }
  }
}
```
![video9_6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702863/964c26a8-6b65-aafd-67ed-492b74c9f768.gif)


画面幅を変更しても、条件を満たす配置になった！

画面幅1500pxまでしか書いていないので、もっと増やしたい...
でも、いちいち書くの面倒なので↓

# Sassでfor文を書く

```style.scss
    @media screen and (max-width: 900px) and (min-width: 701px){
      width: calc(100% / 4);
    }

    @media screen and (max-width: 1100px) and (min-width: 901px){
      width: calc(100% / 5);
    }

    @media screen and (max-width: 1300px) and (min-width: 1101px){
      width: calc(100% / 6);
    }

    @media screen and (max-width: 1500px) and (min-width: 1301px){
      width: calc(100% / 7);
    }
```
上で地道に書いたこのコードをSassのfor文を使って書いてみる。

次回に続く。https://qiita.com/mei0210/items/ed468882579a6d3d902e
cloudera managerをdockerで動かしてみる

# 参考
以下の情報を参考に、docker上でcloudera managerを動かしてみました。
https://qiita.com/junko_urata/items/7f292cbb8a57b099536b
https://hub.docker.com/r/cloudera/quickstart/

# 補足
起動後はエラー多数のですが、その原因は確認していません。
シングル構成であったり、設定十分ではないかもしれません。

# 手順

docker hubからイメージを取得する。

```
docker pull cloudera/quickstart:latest
```

コンテナ起動

```
docker run --hostname=quickstart.cloudera \
   --privileged=true -t -i -d  -p 7180 -p 80 \
  cloudera/quickstart:latest /usr/bin/docker-quickstart
```

プロセス確認

```
$ docker ps
CONTAINER ID        IMAGE                        COMMAND                  CREATED             STATUS              PORTS                                            NAMES
8373020c70c9        cloudera/quickstart:latest   "/usr/bin/docker-qui…"   2 hours ago         Up 2 hours          0.0.0.0:32771->80/tcp, 0.0.0.0:32770->7180/tcp   gracious_spence
```
チュートリアル用のページの80番ポート、クラウデラマネージャ管理ページ用の7180番ポートが、それぞれホストOSの32771番と32770番にマッピングされている。

コンテナにログインします。

```
docker exec -it 8373020c70c9 bash
```

cloudera managerを起動させます。

```
[root@quickstart /]# /home/cloudera/cloudera-manager --force --express
[QuickStart] Shutting down CDH services via init scripts...
kafka-server: unrecognized service
JMX enabled by default
Using config: /etc/zookeeper/conf/zoo.cfg
[QuickStart] Disabling CDH services on boot...
error reading information on service kafka-server: No such file or directory
[QuickStart] Starting Cloudera Manager server...
[QuickStart] Waiting for Cloudera Manager API...
[QuickStart] Starting Cloudera Manager agent...
[QuickStart] Configuring deployment...
Submitted jobs: 14
[QuickStart] Deploying client configuration...
Submitted jobs: 16
[QuickStart] Starting Cloudera Management Service...
Submitted jobs: 24
[QuickStart] Enabling Cloudera Manager daemons on boot...
________________________________________________________________________________

Success! You can now log into Cloudera Manager from the QuickStart VM's browser:

    http://quickstart.cloudera:7180

    Username: cloudera
    Password: cloudera

[root@quickstart /]# 

```

ブラウザで次のURLにアクセスします。
```http://localhost:32770/```

cloudera manager管理ページが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564329/3feb5367-e14f-7229-5d6d-e7ea8fee100a.png)


cloudera quick start のプルダウンメニューから、「開始」を選択し、クラスタをスタートさせます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564329/4538eec5-729b-5979-391c-6a48bb251240.png)


エラーが出ていますが、いったんここまで。
Automation Anywhere v11 - Variable Operation を使うときの注意事項

Automation Anywhere v11.xの**Variable Operation**コマンドでは、テキストボックスの中で四則演算を行うことができます。v11.xでは変数型がないので初心者にとっても扱いやすいのですが、Variable Operationコマンドでの値の入力は、逆に気を付けないと思わぬ結果になることがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/0b4e89bf-d8f3-0705-6681-98788b84689d.png)

Variable Operationコマンドでは、入力値の中に数として正しい書式 (変数を含む) と四則演算子 (+, -, /, %, *と丸括弧)が含まれる場合のみに四則演算の結果を返します。

しかし、たとえば「08/21/2018」という文字列を日付を想定して入力しても、"/"は除算演算子として働いてしまい、変数に代入される結果は日付文字列ではなく0.000188777195714758となります。

いくつかのパターンと変数に代入される値について見てみましょう。

|変数A|変数B|Variable Operation<br/>に指定した値|変数に代入される値|解説|
|:--|:--|:--|:--|:--|
|-|-|08/21/2018|0.000188777195714758|"/"を使った日付書式は数式と解釈され計算される|
|5|34|`$A$ + $B$`|39|整数同士の加算が実行される|
|-5|34.8|`$A$ + $B$`|29.8|負の数も小数も計算可能。有効数字も維持される。|
|5.2|34.8|`$A$ + $B$`|40|小数同士の加算が実行される|
|5.2.8|34.8|`$A$ + $B$`|5.2.8 + 34.8|第一項が数字と解釈できなかっためすべて文字列として解釈され文字列の結合が結果となる。|
|3*3+4|34.8|`$A$ + $B$`|47.8|変数の中身が数式と解釈される場合は数式解析が実行され計算されます。|
|5.2|節|`$A$ + $B$`|5.2 + 節|第二項が文字列なので、文字列の結合が結果となる。|
|5.2|34.8|`$A$$B$`|5.234.8|間に演算子がない場合は変数の中身は文字列として扱われ、文字列同士が結合されます。|
|東京|都|`$A$$B$`|東京都|文字列同士の結合は、変数の間に演算子は不要。|

先ほどのような、日付文字列を代入したい場合は、替わりに**String Operation**コマンドのTrimを使いましょう。トリムオプションは何でも構いません。それぞれ文字列の先頭、末尾に空白文字がある場合は削除し、結果を変数に代入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/394a44d4-8e7e-527a-3ec7-c07b5870262c.png)
【Unity】シンプレックスノイズを使ってオブジェクトをランダムかつ滑らかに回転させる

ふとUnityでオブジェクトをランダムかつ滑らかに回転させたくなったのでやってみました。

#概要
こんな感じでランダムかつ滑らかにオブジェクトを回転させます。![simplex_noise_rotation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270414/292dd012-da4c-d745-6651-9b91f03237ff.gif)


[シンプレックスノイズ](https://en.wikipedia.org/wiki/Simplex_noise)を使って実現していきます。

#実装

```C#:SimplexNoiseRotation.cs
using UnityEngine;
using Unity.Mathematics;
using static Unity.Mathematics.math;

public class SimplexNoiseRotation : MonoBehaviour
{
    [SerializeField] float speed;
    float speedOffset;

    void Start()
    {
        speedOffset = UnityEngine.Random.Range(0f, 1000f);
        SetRotation();
    }

    void Update()
    {
        speedOffset += speed * Time.deltaTime;
        SetRotation();
    }

    void SetRotation()
    {
        Transform trans = this.gameObject.transform;
        float x = noise.snoise(float2(0f, speedOffset));
        float y = noise.snoise(float2(64f, speedOffset));
        float z = noise.snoise(float2(128f, speedOffset));
        float w = noise.snoise(float2(192f, speedOffset));
        trans.rotation = new Quaternion(x, y, z, w);
    }
}
```

ランダムかつ滑らかに回転させるには、時間に対して滑らかに変化する乱数が必要です。そのような乱数には[パーリンノイズ](https://en.wikipedia.org/wiki/Perlin_noise)や[シンプレックスノイズ](https://en.wikipedia.org/wiki/Simplex_noise)がありますが、ここではより高性能(らしい)シンプレックスノイズの方を使っていきます。Unityにはシンプレックスノイズが既に実装されており、[Unity.Mathematics.noise.snoise](https://docs.unity3d.com/Packages/com.unity.mathematics@1.0/api/Unity.Mathematics.noise.html#Unity_Mathematics_noise_snoise_Unity_Mathematics_float2_)から利用できます。noise.snoiseは[struct float2](https://docs.unity3d.com/Packages/com.unity.mathematics@1.0/api/Unity.Mathematics.float2.html)、[struct float3](https://docs.unity3d.com/Packages/com.unity.mathematics@1.0/api/Unity.Mathematics.float3.html)、[struct float4](https://docs.unity3d.com/Packages/com.unity.mathematics@1.0/api/Unity.Mathematics.float4.html)のいずれも引数に取ることができます。また[この記事](https://gametorrahod.com/various-noise-functions/)によるとnoise.snoiseの返り値は-1.0から1.0の間です。

そしてシンプレックスノイズをどのように回転に反映させるかが重要ですが、ここでは単純に[transform.rotation](https://docs.unity3d.com/ja/2020.2/ScriptReference/Transform-rotation.html)の各成分にnoise.snoiseの値を代入しています。noise.snoiseの引数をわずかに変更してやればnoise.snoiseは滑らかに変化するので、transform.rotationも滑らかに変化します。noise.snoiseの第一引数の値はとりあえず異なる値を適当に入れています。
R: Kaggle House Prices

こちらと同じことを、R で行いました。しかし、スコアはかなり違います。
[scikit-learn の使い方 (その4)](https://qiita.com/ekzemplaro/items/93dfad62c0e5fbf1f74d)

```R:[1]
library('randomForest')
```

```R:[2]
train_path <- '../input/house-prices-advanced-regression-techniques/train.csv'
test_path <- '../input/house-prices-advanced-regression-techniques/test.csv'
submission_path <- '../input/house-prices-advanced-regression-techniques/sample_submission.csv'

train <- read.csv(train_path, stringsAsFactors = F )
test  <- read.csv(test_path, stringsAsFactors = F )
submission  <- read.csv(submission_path, stringsAsFactors = F )
#
train <- train[,c(5,18,20,55,81)]
test <- test[,c(5,18,20,55)]
#
names(train)
head(train)

head(submission)
```

```R:[3]
set.seed(754)
rf_model <- randomForest(SalePrice ~ .,　data =  train)
print(rf_model)
```

```R:[4]
prediction <- predict(rf_model, test)
```

```R:[5]
submission.SalePrice = prediction
#
write.csv(submission, file = 'house_price_r_sep0601.csv', row.names = F)
head(prediction)
head(submission)
nrow(submission)
length(submission)
dim(submission)
```

関連ページ
[R: Kaggle Titanic](https://qiita.com/ekzemplaro/items/b3bf701c5d297be4e481)
How to make delete button in laravel (File Upload Site #3)

1. ルートを作成

```php:web.php
Route::delete('files/{id}', 'FilesController@destroy')->name('deletefile');
```
2. View ファイルにフォームを追加する

```php:home.blade.php
<th>
<form action="{{ route('deletefile', $file->id) }}" method="POST">
@csrf @method('DELETE')
<button type="submit" class="btn btn-outline-danger btn-delete"><i class="fa fa-trash"></i>Delete</button>
</form>
</th>
```
@csrf はクロスサイトリクエストフォージェリからの防蟻です。

3.コントローラーにfunction追加

```php:filescontroller.php
public function destroy($id)
    {
        $del = File::find($id);
        Storage::delete($del->path);
        $del->delete();
        return redirect('/home');
    }
```
![Screen Shot 2020-09-06 at 15.21.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645432/c1c0df2e-ec20-66f0-2758-44ca7c59491b.png)
こんな感じです。
VSCodeでファイル保存時に rubocopのauto-correct

掲題の通り。設定だけならそれほど大したことはなかったが、一点謎の不具合があってそこそこハマった。

## プロジェクトにrubocopを導入。
この辺は公式のReadme等読みつつ雑に実施。

gemfileにrubocopを入れて、.rubocop.ymlを用意するだけ。
参考: https://github.com/rubocop-hq/rubocop

元ファイルはRailsのRubocopをベースに作成。
rubocop-railsやrubocop-performanceを使っている様子なので、こちらもGemfile等に入れておく。
参考: https://github.com/rails/rails/blob/master/.rubocop.yml

rubocopの対象外にしたいファイルは除外する。
参考: https://qiita.com/necojackarc/items/8bc16092bbc69f17a16d#%E5%AF%BE%E8%B1%A1%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB

あとは`bundle exec rubocop`でrubocopが想定通り動作すればOK

## VSCode 上でrubocop の auto-correct
Prettierみたいなことがしたいだけだったが苦労した。なぜか。。。

### 基本設定
基本的には以下をVSCodeのsetting.jsonに入れるだけでおおよそ実現する

```json
  "ruby.lint": {
    "rubocop": true
  },
  "[ruby]": {
    "editor.formatOnSave": false
  },
  "ruby.format": "rubocop"
```
参考: https://qiita.com/yumikokh/items/98be01df144c41d60e1e#formatting

上の参考サイトでは `"editor.formatOnSaveTimeout": 5000`が必要とされていたが、私の環境では必要なかった。

### ハマり箇所
ただ、私の環境だとこの設定をした際、日本語が何故かユニコードに変換されてしまうという現象が起きた。コマンドラインからrubocop auto-correctを実施した際は全く問題無いが、VSCodeの自動整形でのみ発生する。

例えば、
`    context '未ログインの場合' do`
が
`    context "\u672A\u30ED\u30B0\u30A4\u30F3\u306E\u5834\u5408" do`
こうなる。

ファイルはutf8になっており、文字コード周りの設定は問題ないとは思うのだが、、、
この辺りの話が関連しているのだろうか？わからん。
https://techracho.bpsinc.jp/hachi8833/2016_10_13/26969

またこちらも理由は全くわからないが .rubocop.ymlの設定を以下のように変えたら上手くいった。

```
Style/StringLiterals:
  Enabled: true
  EnforcedStyle: double_quotes
```
↓

```
Style/StringLiterals:
  Enabled: true
  EnforcedStyle: single_quotes
```

doubleをsingleに変えただけ。謎だ。。。

formatterとしてrubocop以外を利用した場合も日本語周りで問題が起きる。
おそらく何かしら問題があるだろうと思う。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【今日の部会】<br>VScodeでRubyが自動整形されない<br>→Rufo拡張を入れる<br><br>それでも整形されない<br>→cmdでRufoをインストール<br><br>まだ整形されない<br>→日本語コメントが問題<br>→encoding: utf-8を最初に挿入<br><br>解決</p>&mdash; みのも (@RNd8136) <a href="https://twitter.com/RNd8136/status/1064883243185360896?ref_src=twsrc%5Etfw">November 20, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

実際に私もやってみた結果、同じ結果に遭遇し、同じ対応で乗り越えることができた。
が、encoding: utf8 と書くのがなんとなく引っかかり、上記の対応を取ることにした。

## 最後に
double_quotesが強制の環境だとキツイことになるな...どうしようか？
またもっと良い解決策をご存知の方がいましたら教えてください m(_ _)m
(しかしそもそもこれ再現性あるのだろうか。。。？)
Gatsbyノート4(詳細ページ)

## 参考
https://bit.ly/2Fq3GcO


## 学習内容

- slagに紐づくdataを取得する
- ブログの詳細ページのコンテンツを表示する(htmlを表示する)

## queryの実行

- QUERY VARIABLESから変数を入力して試す

![スクリーンショット 2020-09-06 12.09.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/879293ce-6cd3-13d4-2aa5-7c1044d3affd.png)


```src/templates/blogDetail.js

import React from 'react'
import {graphql} from 'gatsby'
import Layout from '../components/layout'
import { Container } from 'react-bootstrap'

//slagに紐づくデータを取得する
export const query = graphql`
    query( $slug: String! ) {
        markdownRemark (
            fields: {
                slug: {
                    eq: $slug
                }
            }
        ) {
            frontmatter {
                title
                date
            }
            html
        }
    }
`

function BlogDetail(props) {
    return (
        <Layout>
            <Container style={{maxWidth:640}} className="pt-4">
                <h1>{props.data.markdownRemark.frontmatter.title}</h1>
                <p>{props.data.markdownRemark.frontmatter.date}</p>
                <div dangerouslySetInnerHTML={{ __html: props.data.markdownRemark.html}}></div>
            </Container>
        </Layout>
    )
}

export default BlogDetail
```
Start a new Flutter projectが表示されなかった時のメモ（AndroidStudio 4.0.1）

AndroidStudioでFlutterやってみようと思ったけど最初で躓いたのでその時のメモ

# 環境
- AndroidStudio 4.0.1（3.6からのアップデート）
- 過去にDart, FlutterをPluginをインストールしていたことがある

# AndroidStudioでのFlutter導入チュートリアル
- [こちら](https://flutter.dev/docs/get-started/install)
- 入れたけどAndroidStudioのLauchMenuに「Start a new Flutter project」が表示されない

# 調べてみた
- [AndroidStudio4.0系の設定を入れ直すと直るらしい](https://stackoverflow.com/questions/63153594/new-flutter-project-wizard-not-showing-on-android-studio-4-0-1)
- OSごとのAndroidStudioの設定ファイルの場所 [引用元](https://developer.android.com/studio/intro/studio-config#file_location)
  - Windows: %USERPROFILE%\.CONFIGURATION_FOLDER
  - macOS: ~/Library/Preferences/CONFIGURATION_FOLDER
  - Linux: ~/.CONFIGURATION_FOLDER

# 出るようになった
- 一旦Dart, FlutterのPluginをuninstall
- 参考に従って`.AndroidStudio4.0`をdeleteないしはrename
- AndroidStudio４.0を再セットアップ
    - 設定をインポートした場合は表示されなかったので、新規で設定し直す必要がある。
- その後Dart, FlutterのPluginを入れ直す

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324924/c389a1f5-905e-7acc-681e-02b4c13e8875.png" width=400>

# 結論
- 過去のAndroidStudioのバージョンにDart, Flutterを入れてAndroidStudioのバージョンを`４．０`にあげた場合は`Start a new Flutter project`が表示されないらしい
[C#]競プロではfor文のカウンタ変数にvarを使ってTLEになってハマった話

# はじめに
for文のカウンタ変数にvarを使って実行時間がTLEになった理由がvarが原因ではないとコメント頂きました。
初心者のハマりどころとして追記しました。(2020/9/6 19:30 追記)

~~AtCoderで問題を解いていて、for文のカウンタ変数でvarと型で実行時間にかなり差が出て驚いたため記事にしました。~~

~~MSでは、for文のカウンタ変数にvarを使うことを認めていますし、私も業務上では使います。~~
~~[var - C# Reference | Microsoft Docs](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/var)~~  

~~ただ、実行時間の制限がある競プロにおいてfor文のカウンタ変数にvarを使うと良くないかもしれません。~~
~~（競プロ初心者なので、間違っておりましたらご指摘ください）~~

# TLEになってしまう問題
[「AtCoder Begginner Contest 057 C-Digits in Multiplication」](https://atcoder.jp/contests/abc057/tasks/abc057_c)を解いていた時のことです。
提出するとTLEになってしまいましたが、他のACになっているコードを見ても解法には違いがありません。

ところが、よく目を凝らしてみると、for文にvarを使っている箇所に違いがあったため、for文のカウンタ変数の型をlongに変更してみました。
すると、ACで通ったのです。

実際に提出したソースコードで比べてみました。
ソースコードは、for文のカウンタ変数の型を変えただけです。
言語は、「C# (.NET Core 3.1.201)」です。

|            | 実行時間 (ms) | ソースコード | 
| ---------- | ------------- | ------------ | 
| varの場合  | 2206          | [提出 #16188260 - AtCoder Beginner Contest 057](https://atcoder.jp/contests/abc057/submissions/16188260)          | 
| longの場合 | 97            | [提出 #16518402 - AtCoder Beginner Contest 057](https://atcoder.jp/contests/abc057/submissions/16518402)           | 

for文の変数の型をlongだけでこんなに実行時間に差が出るとは……。

## 原因
varは、型推論ですのでlongにしたい場合はサフィックスをつけて型を明示しなければいけませんでした。

ソースコードを見て頂ければ分かるのですが、
varの場合

```csharp
for (var i = 1; i * i <= N ; i++)
```
と記載していました。

MSのドキュメントでは、型の決定を以下のように記載しています。

>整数リテラルの型は、そのサフィックスによって次のように決まります。
サフィックスがないリテラルの型は、int、uint、long、ulong の型のうちその値を表すことができる最初のものになります。

[整数数値型 - C# リファレンス | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/builtin-types/integral-numeric-types) 

varの場合だとiの初期値は1と小さな値ですので、intとして型が決まります。

Nについての制約が以下になっていますので、

```math
1 ≦ N ≦ 10^{10}
```
intの最大値、`2,147,483,647`を超えてしまい、オーバーフローしてしまいました。
オーバーフローをした状態でインクリメントすると、マイナスになります。

試しに以下のソースコードを実行するとiは、`-2147483648`になります。
正の最大値にインクリメントすると負の最大値になってしまいます。

```csharp
int i = int.MaxValue;
i++;
```
オーバーフローしてしまったせいで、forで無限ループが発生してしまったためTLEになってしまいました。

よって、ソースコードのfor文を以下に直すと無事ACになりました。

```csharp
for (var i = 1L; i * i <= N ; i++)
```

|            | 実行時間 (ms) | ソースコード | 
| ---------- | ------------- | ------------ | 
| var + サフィックスLの場合 | 93            | [提出 #16539970 - AtCoder Beginner Contest 057](https://atcoder.jp/contests/abc057/submissions/16539970) |
| varの場合  | 2206          | [提出 #16188260 - AtCoder Beginner Contest 057](https://atcoder.jp/contests/abc057/submissions/16188260)          | 
| longの場合 | 97            | [提出 #16518402 - AtCoder Beginner Contest 057](https://atcoder.jp/contests/abc057/submissions/16518402)           | 


しかもvar + サフィックスLの方が若干早い。

ただし、仕組みとしてはvarはコンパイル時に型が決定するため、型を適切に指定できていれば型を指定している時と同じIL(.NETの中間言語)になります。
よって、パフォーマンスは変わらないといえます。
詳細: [c# - Will using 'var' affect performance? - Stack Overflow](https://stackoverflow.com/questions/356846/will-using-var-affect-performance)
(2020/9/12 追記)

# まとめ
競プロでは、for文のカウンタ変数にvarを使うときは型を意識しよう。
競プロなど時間制限がある場合、慌てているとサフィックスやキャストを忘れる可能性もあるためきちんと型を書いてもいいのかなと思いました。
~~競プロでは、for文のカウンタ変数にvarを使わずきちんと型を書いた方が良さそう。~~
XCTContextを使ったお手軽Parameterized Test

# はじめに

iOSのテストフレームワークはParameterized Testをサポートしていません。その制約を回避するために世の中にはいろいろな手法が提示されていますが、そのほとんどは設定や実装が面倒です。
そこで、私が実務を実践している、XCTContextを使ってお手軽に行う方法を披露したいと思います。

# 実現方法。

たったこんだけ。テスト結果にはちゃんとパラメータ毎のテスト結果がレポートされます。

```swift
  func test_hogehoge() {
        for (name, expectedResult) in ["テスト1": 1, "テスト2": 2, "テスト3": 3] {
            XCTContext.runActivity(named: name) { activity in 
               ...
               XCTAssertEqual(result, expectedResult) 
            }
        }
  }
```

# さらに

パラメータ定義〜テスト実行部分をクロージャにとるメソッドとして実装すれば、もっと簡潔に重複を減らす形で実装できると思います。
textareaにはvalue属性がない

input などとは違い textarea には value 属性が存在しません。
ですのでデフォルトで何か入力されている状態にしたい場合は、開始タグと閉じタグの間に入れなければいけません。

JavaScript などで値を取得したい場合はinputなどと同じようにvalueとして扱えば問題なく取得できます。