OmniAICreator/Qiita-1.07M huggingface dataset:
vistaでquartus その34

#概要

vistaでquartusやってみた。
cpu作ってみた。
シミュレータで実行。
アセンブラでコンパイル。
実機で実行。

#ソース

fizzbuzz

```
  push  1
  set  i
loop:
  get  i
  push  100
  >
bye:
  jz  bye
  get  i
  push  15
  %
  jz  fizzbuzz
  get  i
  push  5
  %
  jz  buzz
  get  i
  push  3
  %
  jz  fizz
  get  i
  push  10
  /
  push  48
  +
  out
  get  i
  push  10
  %
  push  48
  +
  out
  jmp  tugi
fizzbuzz:
  push  'f'
  out
  push  'i'
  out
  push  'z'
  out
  push  'z'
  out
  push  'b'
  out
  push  'u'
  out
  push  'z'
  out
  push  'z'
  out
  jmp  tugi
buzz:
  push  'b'
  out
  push  'u'
  out
  push  'z'
  out
  push  'z'
  out
  jmp  tugi
fizz:
  push  'f'
  out
  push  'i'
  out
  push  'z'
  out
  push  'z'
  out
tugi:
  push  32
  out
  get  i
  push  1
  +
  set  i
  jmp  loop
i:
  0x0000
```

#シミュレータで実行。

https://embed.plnkr.co/plunk/CspkOKg7XvsBcNJR

#アセンブラでコンパイル。

https://embed.plnkr.co/plunk/BF90WUMd76Oyy0V9

#実機で実行。

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/e4d38529-3d75-3d62-647b-3bd9c705e90f.jpeg)



以上。
IoT開発環境をwindowsで構築 2020年度版

# 1.対象
- ラズパイでIoT開発をしたけど，windowsでもやってみたい方
- windows10のsubsystemを使わないで試したい
- 仮想マシンを使いたくない
- **自分で問題を対処する覚悟がある方**

# 2.インストール
## 2.1.ESP32用開発環境の構築
### 2.1.1.Arduino-IDEのインストール
Arduino-IDEをダウンロードします
https://www.arduino.cc/en/main/software
zipファイルは自分でアプリを置きたい所に置けます．
判らない場合はインストーラをダウンロードして実行します．
arduino.exeを起動しましょう．

### 2.1.2.ESP32用ボードマネージャの設定
1) arduino-IDEのメニューバー（上にある文字のこと）の「ファイル」→「環境設定」をクリックします．
追加のボードマネージャのURLという欄に次を記述します．
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

2) arduino-IDEの「ツール」→「ボード：Arduino-UNO」→「ボードマネージャ...」をクリックします．
少し待ってから， 上の欄に「ESP32」と入力すると，ESP32の項目が現れます．
その枠をクリックし，インストールをクリックします．

なお，ボードマネージャの設定に関する内容は下記ページにあります．確認しておきましょう．
https://github.com/espressif/arduino-esp32/blob/master/docs/arduino-ide/boards_manager.md

### 2.1.3.ライブラリのインストール
MQTTやDS18シリーズのセンサ用ライブラリを入れます．
#### 2.1.3.1. MQTT
1. arduino-IDEの「スケッチ」→「ライブラリをインクルード」→「ライブラリを管理」（一番上にあります）をクリック
2. ライブラリマネージャの上の欄に「pubsub Client mqtt messaging」と入力します．
 (もしくは「pubsub」と入力して，作者が*Nick O’Leary*氏のものを探します．)

3. 「インストール」ボタンを押します

#### 2.1.3.2. 温度センサ
1. arduino-IDEの「スケッチ」→「ライブラリをインクルード」→「ライブラリを管理」（一番上にあります）をクリック
2. ライブラリマネージャの上の欄に「dallas」と入力します．
3. 「DallasTemperature」と書かれたものを探し，「インストール」ボタンを押します

#### 2.1.3.3. OneWire (2020.10/8追記)
1. arduino-IDEの「スケッチ」→「ライブラリをインクルード」→「ライブラリを管理」（一番上にあります）をクリック
2. ライブラリマネージャの上の欄に「onewire Access」と入力します．
3. *Jim Studt*氏他の「OneWire」であることを確認し，「インストール」ボタンを押します


### 2.1.4.ドライバーのインストール
次のページのDownload for Windows 10 Universalの欄のVCP をダウンロードからダウンロードします．
https://jp.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers
ダウンロードしたら，実行しドライバーをインストールします．

使うボードは，ESP32-DevkitC(-32D)を想定しています．

## 2.2. Mosquiottoのインストール
次のページからダウンロードし実行します．
https://mosquitto.org/download/

インストール時は，
```WindowsによってPCが保護されました```
という青いウインドウ（ウイルス対策ソフトによって異なります）が出るので，「詳細情報」をクリックし，現れた「実行」ボタンをクリックします．

また，インストール時に
```vcruntime140.dllがありません```
と表示される場合はVS2015ランタイムが必要なので，下記からダウンロードし，インストールし，再度Mosquittoをインストールしてください．
https://www.microsoft.com/ja-jp/download/details.aspx?id=48145

忘れないうちに， mosquitto.exeをダブルクリックして，起動しましょう． 
```\Program Files\mosquitto\mosquotto.exe```

## 2.3. node-redインストール
cmdやpower shellで行う必要があります．(
（故に
windows7以上）

1) node.jsを下記からダウンロードしてインストールします（推奨版が無難） 
https://nodejs.org/ja/
2) power shell で次を入力してnode-redをインストールします
  ```npm install -g --unsafe-perm node-red```

node-red起動は同じくpower shellやcmd.exeで
``` node-red ```
と入力します．
macでandroidアプリの開発を始めるまで

#目次
0.はじめに
1.Android Studioのインストール
2.プロジェクトの作成
3.実機を利用した実行
4.「Error running 'app': No target device found.」の対処法
5. おわりに

#0. はじめに
ふとAndroidアプリを作ってみようと思い立ち、やってみたが、つまずいたところがあったのでその記録を残しておく。
言語は「Java」。
普段からスマホがAndroidのものなのでテストでは実機を利用する。

#1. Android Studioのインストール
Androidアプリを開発するためにはまずGoogleが提供している「Android Studio」をインストールする必要があります。
以下のサイトからダウンロードしてください。
http://developer.android.com/sdk/index.html

起動すると「Import Studio settings from:」という今までのバージョンを使うかという質問が出てくるので「Do not import settings」を選択してください。

「Welcome Android Studio」というのが出てきたら「Next」を選択

「Install Type」を選択。初めてなので「Standard」を選んだ。

「UI Theme」を選択。（どちらを選んでもOK）

「Verify Settings」では内容を確認して「Finish」を選択。

全て完了するとtop画面が表示される。
![top画面](https://i.gyazo.com/17ad266c58cf99370245db082d1a2a86.png)

#2. プロジェクトの作成
top画面の「Start a new Android Studio project」を選択。

「Choose your project」では「Empty Activity」を選択。
![project](https://i.gyazo.com/eebe1d3d03f927b7c7558c84b1da7ac6.png)

「Configure your project」で名前などを決める。
Name -> プロジェクトの名前を決め、入力する。
Package name -> 今回はテストなのでそのまま
Save location -> プロジェクトの保存場所
Language -> 開発言語を選ぶ。今回は「Java」を選択。
Minimum SDK -> 今回は「API 16:Android 4.1(Jelly Bean)」を選択。
![Configure your project](https://i.gyazo.com/0e22ba87f782155f3896f6a87329e899.png)

#3. 実機を利用した実行
まず、Androidデバイスの方でいくつか操作をおこなう。

設定の[端末情報]を開いて[ビルド番号]を7回タップする。

設定に戻って[開発者向けオプション]を選択。

「ON」にする。

[USBデバッグ]をオンにする。
![setting](https://i.gyazo.com/54586350f72ae471c25e5550608598d7.png)

ケーブルで実機とパソコンを接続する。

ここまで終えたらAndroid Studioに戻り、緑の三角マークをクリックして実行。
![green](https://i.gyazo.com/c8ffd05c29b61f8ba14ca86da3dd39f2.png)

実機の画面に「Hello World!」と表示されたら成功！
![hello world](https://i.gyazo.com/5e75c7879064a94277684b33bca1e49b.png)

#4. 「Error running 'app': No target device found.」の対処法
最初に実行した際に「Error running 'app': No target device found.」というエラーが出てきたので実際に行った対処法を書いておきます。

自分の場合は使用していたケーブルに問題がありました。スマホを充電できるだけの機能しか持っていないケーブルが存在し、それを使っていたために「メディアデバイス」として認識されずエラーが出てしまっていたのです。
実行する際には使用するケーブルにも注意しておきましょう。

#5. おわりに
今回はこれで終わります。
自分がつまずいたのはError running 'app': No target device found.のところでした。
まさか、原因がケーブルだったとは。。。
docker tutorialで詰まった話

こんにちは、rickyです。
今日はDocker-docs-jaを参考にしながらdockerのイメージをDocker Hubに上げるところまでを行いました。
Docker Hubに上げる際に『denied: requested access to the resource is denied』というエラーに悩まされたのでその解消法を書いていきます。
原因はDocker Desktopが起動していないためでした。
Docker Hubを起動しておけばpushできるものだと考えてしまっていました。
Docker Desktopが起動していなくてもdocker runやdocker buildが使えてしまうので少し混乱してしまいました。
以上になります。
tutorialは短いものなので躓く方は少ないと思いますが、もし同じエラーが出てしまった方のお役に立てば幸いです。
CSSの@keyframesとanimationでポケモン捕獲っぽい画面を作ったよ

HTMLとCSSの`@keyframes`と`animation`を使ってポケモン捕獲画面のようなボールが左右に動くローディング画面を作ってみました。
![pokemon.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239107/46aab6f7-9f6b-c1cf-435d-10d484706f1a.gif)


## CSSのkeyframesとanimationについて
`@keyframes`はアニメーションの開始から終了までの動きをカスタマイズできるCSSの文法です。
`animation`プロパティはHTML要素にどのアニメーションを適応するか、アニメーションの時間、繰り返し回数はどを指定することができます。

## ソースコード



```html:index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- ブラウザのCSSをリセット -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="loader">
      <img src="モンスターボール画像のパス" alt="">
    </div>
  </body>
</html>
```

```css:styles.css
@keyframes pokemonGet {
    0% {
      transform: rotate(0deg);
      left: 0;
    }
    20% {
      transform: rotate(-30deg);
      left: -10px;
    }
    40% {
      transform: rotate(0deg);
      left: 0;
    }
    60% {
      transform: rotate(30deg);
      left: 10px;
    }
    80% {
      transform: rotate(0deg);
      left: 0;
    }
}

.loader {
  text-align: center;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index:10001;
  opacity: 0.95;
  background-color: #555;
}

.loader img {
  opacity: 1;
  width: 100px;
  display: inline-block;
  position:relative;top:
  calc(50% - 50px);
  animation-name: pokemonGet;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
```
Sassとは



cssを効率的にかける言語、「Sass」について説明します！

#Sassとは
CSSを拡張した言語です。より効率的に書けます！
記述を簡略化できる他にも、プログラムのような処理ができたり、同じ値を使い回すことができます。
※今回は.scss記法で説明していきます。

###ネスト化
cssはセレクタを何回も書く必要がありましたが、Sassは**ネスト**させることで、
同じ親のセレクタでまとめられちゃいます。

###プログラム処理
変数や条件分岐も使えます！

```ruby
$section-color: rgb(30,30,30);
section {
  background-color: $section-color;
}
```

###複数のファイルをまとめられます
バーシャルを使うと、複数のcssファイルを一つにまとめることができます。

バーシャルとは、分割したSassファイルのことです。
バーシャルを作成するときは、ファイル名の最初に”アンダーバー_”をつけます。

例：_item.scssと_reset.scssファイルを読み込みます。

```application.scss
@import "item";  /* _item.scssを読み込む */
@import "reset"; /* _reset.scssを読み込む */
```

###同じ値を使いまわすこともできます

変数を使用して同じ値を使いまわすことができます。
以下のように定義します！
$変数名: 値;

``` _common.scss
$mainBlackColor: #000000; 
```

と定義したとします。
_common.scssファイルを読み込むことで、
他のscssファイルでも
「$mainBlackColor」と指定して使うことができます。

###mixin
mixinとは、まとまったスタイルを定義することができます。
これを使うと、何度も同じスタイルを定義しなくて良くなります！

mixinを定義するには、
@mixin mixin名() {}
と記述します。

```scss
@mixin clearfix() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}
```

以上です。
Vox-ATypI classification（Vox-ATypI分類法）とは何ぞや

## はじめに
[Vox-ATypI classification](https://en.wikipedia.org/wiki/Vox-ATypI_classification)は書体（フォント）を11個の汎用クラスに分類します。この分類法は1954年に[Maximilien Vox](https://en.wikipedia.org/wiki/Maximilien_Vox)氏によって考案されました。

気になる名前の由来は、考案者のMaximilien Vox氏とATypI（Association Typographique Internationale; 国際タイポグラフィ協会）のようです。

## 分類図

```
Classicals (古典的)
├─ Humanist (人文主義的; Centaur, ...)
├─ Garalde (ギャラモン風; Garamond, ...)
└─ Transitional (過渡期的; Times New Roman, ...)

Moderns (現代的)
├─ Didone (ディドー風; Didot, ...)
├─ Mechanistic (機械的; Rockwell, ...)
└─ Lineal (線状の)
　　　├─ Grotesque (グロテスク風; Franklin Gothic, ...)
　　　├─ Neo-grotesque (ネオ・グロテスク風; Helvetica, ...)
　　　├─ Geometric (幾何学的; Futura, ...)
　　　└─ Humanist (人文主義的; Gill Sans, ...)

Calligraphics (カリグラフィー)
├─ Glyphic (グリフ; Trajan, ...)
├─ Script (筆記体; Mistral, ...)
├─ Graphic (手書き; Banco, ...)
├─ Blackletter (ブラックレター; Fette Fraktur, ...)
└─ Gaelic (ゲール文字; Duibhlinn, ...)

*括弧内は和訳と代表例
```

## このページについて
2020年9月にNAVERまとめサービス終了のため、下記のページ内容をもとにQiitaにお引っ越ししました。
[Vox-ATypI classification - NAVER まとめ](https://matome.naver.jp/odai/2140414034225859701)

## 参考
- [Vox-ATypI classification - Wikipedia](https://en.wikipedia.org/wiki/Vox-ATypI_classification)
- [書体を選ぶ(1)書体を見分ける | 文字を組む方法 | 文字の手帖 | 株式会社モリサワ](https://www.morisawa.co.jp/culture/japanese-typesetting/08/)
Ubuntuが「started hold until boot process recovery ubuntu」で止まって起動しなくなった時の対処法

やってみたら簡単だったけどとても焦りそうなので、備忘録程度にシェア。
基本的に原因は「ストレージがいっぱいすぎる」ということっぽい。

# 復旧手順
## 1. recovery modeで起動
left-shiftを長押ししながらUbuntuを起動させると、grub画面が起動する。
recoveryメニューを押して、rootを選択。

参考
https://askubuntu.com/questions/16042/how-to-get-to-the-grub-menu-at-boot-time
https://tkzo.jp/blog/how-to-startup-ubuntu-with-recovery-mode/

## 2. recovery modeはread only権限なので権限変えてremount

```
$ mount -o rw,remount /
```


## 3. ファイルを諸々削除。
dockerを使っていたのが主な原因だったため、一度DockerImage等を全て削除した。

参考
https://qiita.com/nasutaro211/items/5edd12593e7b99279879

## 4. シャットダウン
```
shutdown -h now 
```

## 5. 再起動
普通に起動したら元どおりになった

# 感想
一例でしかないのでうまくいかなかったらすみません。
ちゃんと「ストレージいっぱいだよ」の警告メッセージが出たら、ストレージを整理しましょう。
macbook proが重かったからやったこと

## macbook proが重くクラッシュが多発して、しんどかったので直した。

やったことリスト

・ダークモードを解除
[「WindowServer」が原因でMacがクラッシュする場合の対処法](https://gori.me/mac/mac-tips/108869)
・ディスプレイの透明度を下げる
[MacでWindowServerのCPU使用率が上がった時の対処法](https://keikenchi.com/mac-windowserver-cpu-up)
・デスクトップのファイルを移動させる。
・WindowServerを強制終了
![スクリーンショット 2020-08-27 0.52.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287296/56d1d56e-811e-f689-0e0c-067df40717e7.png)
→WindowServerのCPU時間がめっちゃ長かったことが影響してた可能性あり？
（よくわかってないです。）

### どれが効果あったかわからないけれど、とりあえず軽くなりました笑！嬉しい！

参考
-
[「WindowServer」が原因でMacがクラッシュする場合の対処法](https://gori.me/mac/mac-tips/108869)
[MacでWindowServerのCPU使用率が上がった時の対処法](https://keikenchi.com/mac-windowserver-cpu-up)
計算ツール「Wolfram|Alpha」の使い方

## "Wolfram|Alpha"とは？
https://www.wolframalpha.com/
Wolfram|Alpha は多機能で強力な計算ツールです。登録不要ですぐに計算を開始できます。無料です。

## 使い方
1. 数式（例：3x+2=0）を入力
2. 入力が終わったらEnterキーを押す、もしくは[=]ボタンをクリック

### 入力画面
![700x400xdc2c312068cdd09b1deb7dac.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40987/40658673-e7fb-c663-a23e-ed65fe45b536.jpeg)
### 結果画面
![680x550x1026f59751ef681c565eb43e.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40987/d715d02a-760a-4605-4fc5-4a9879cf4378.jpeg)

答えだけでなく入力した数式に関連したグラフなども返ってくる親切設計です。

## 入力例
ここでは実際にどんな数式を入力すればよいか、いくつか具体的な例を示します。
（基本的には_Mathematicaと同じ書き方がベストです）

### 簡単な計算

```
加算:
　1+1
減算:
　2-1
乗算:
　3*2
除算:
　4/2
累乗:
　3^2
```

### グラフを描く

```
範囲付きのグラフを描く:
　Plot[Cos[x],{x,-1,1}]

複数のグラフを描く:
　Plot[Cos[x],Sin[x]]
```

### 数学関数

```
ルート:
　Sqrt[x]
指数関数:
　Exp[x]
対数（底：a）:
　Log[a,x]
自然対数（底：e）:
　Ln[x]
三角関数:
　Sin[x], Cos[x], Tan[x]
```

### 数学定数

```
虚数単位（ i ）:
　I
円周率（ π ）:
　Pi
ネイピア数（ e ）:
　E
無限大（ ∞ ）:
　Inf
```

### 方程式を解く

```
一次方程式:
　3x+2=0
二次方程式:
　x^2-6x+9=0
連立方程式:
　x+y=3,2x+5y=9
```

### 微積分

```
微分:
　D[Sin[x],x]
不定積分:
　Int[Sin[x],x]
定積分:
　Int[Sin[x],{x,0,1}]
```

### ベクトル

```
大きさ:
　Norm[{1,1}]
内積:
　{5,4}.{3,2}
外積:
　Cross[{1,0,0},{0,1,0}]
発散:
　Div[{x,y,z}]
勾配:
　Grad[1/Sqrt[x^2+y^2+z^2]]
回転:
　Curl[{y,-x,0}]
流線のプロット:
　StreamPlot[{y,-x}]
```

### 行列

```
行列の概要（行列式や固有値など）:
　{{1,2},{3,4}}
逆行列:
　Inv[{{1,2},{3,4}}]
乗算:
　{{1,2},{3,4}}.{{1,2},{3,4}}
```

### 数列

```
数列を並べる:
　Table[2^n, {n,0,10}]
数列の総和（級数）:
　Sum[2^n, {n,0,10}]
```

## 上級編
以下の例は高校数学の範囲を超えた内容です。

### 級数展開する

```
マクローリン展開:
　Series[Exp[x]]
複素フーリエ級数展開:
　FourierSeries[Exp[x]]
```

### 変換する

```
ラプラス変換:
　LT[exp[x]]
逆ラプラス変換:
　ILT[1/(x-1)]
フーリエ変換:
　FT[DiracDelta[x]]
逆フーリエ変換:
　IFT[1/Sqrt[2*Pi]]
```

### 近似計算

```
近似値:
　N[Pi,100]
極限値:
　Sin[x]/x /. x->0
```

### 微分方程式を解く

```
一階の微分方程式:
　y'=Exp[x-y]
二階の微分方程式:
　y''-4*y=0
```

### 物理定数

```
真空中の光速度 c:
　SpeedOfLight
電気素量 e:
　ElectronCharge
アボガドロ数 N_a:
　AvogadroConstant
プランク定数 h:
　PlanckConstant
ボルツマン定数 k:
　BoltzmannConstant
```

### 特殊関数

```
正規分布（平均 m， 標準偏差 s）:
　NormalDistribution[m,s]
ディラックのデルタ関数:
　Delta[x]
ガンマ関数:
　Gamma[z]
```

### その他 ・ 便利機能

```
単位の換算:
　15000ly to kpc
2進数への変換:
　254_2
任意の桁に直す:
　N[1/7,2]

式の展開:
　Expand[(a+b)^2]
因数分解:
　Factor[x^2+5x+6]

順列:
　P[3,2]
組み合わせ:
　C[3,2]
```


### ちなみに
LaTeXと同じ形式で書いてもOKです。個人的にはこれが地味に便利だと思います。

## このページについて
2020年9月にNAVERまとめサービス終了のため、下記のページ内容をもとにQiitaにお引っ越ししました。
[計算ツール「Wolfram|Alpha」の使い方 - NAVER まとめ](https://matome.naver.jp/odai/2139782055327564601)

## 参考
- [Wolfram言語 & システム ドキュメントセンター](https://reference.wolfram.com/language/)
[PHP]ベーシック認証

test.phpを閲覧しようとすると、IDとパスワードの入力を求められるような、ベーシック認証を設定しています。

```.htpasswd
admin:$2y$10$KzSlgR.Ze4qmJS03gAFcJO80hdKuPrZ3XAVkMHa5Wf792M0mVX/nS


//ID:パスワード　の形式で書く。パスワードの後は、ENTERで改行する。

```

```.htaccess
<!-- ファイル名の先頭に . をつけると隠しファイルになる。 -->
AuthType Basic
AuthName "IDとパスワードを入力してください"
AuthUserFile /Applications/MAMP/htdocs/xxxxxxx/mainte/.htpasswd
require valid-user


//AuthUserFileでパスワードファイルの在り処を指定
//require valid-userで認証したユーザーのみがページに入れるようにする。require valid-userのあとはENTERで改行する。
```

 AuthNameでIDとパスワードの入力を求める画面での、文章を決める。
AuthUserFileでパスワードを記述しているファイルをフルパスで指定している。

.htaccessファイルは、.htpasswdへのパスなどを記述します。
htpasswdファイルは、ユーザーIDと暗号化したパスワードを記述します。


```test.php
<?php
//パスワードを記録したファイルの場所
echo __FILE__;
//__FILE__で、現在のファイルの場所wブラウザに表示
// /Applications/MAMP/htdocs/xxxxxxx/xxxxxx/test.php

echo '<br>';

//パスワードの暗号化
echo(password_hash('xxxxxxx', PASSWORD_BCRYPT));
//password_hash関数でパスワードを暗号化。第一引数に暗号化したいパスワードを指定、第二引数に暗号化の種類を指定している。
// $2y$10$KzSlgR.Ze4qmJS03gAFcJO80hdKuPrZ3XAVkMHa5Wf792M0mVX/nS
?>
```

test.phpが入っているフォルダに、.htaccessと.htpasswdを入れることで、test.phpにベーシック認証をかけることができる。逆にいうと、ベーシック認証をかけたいファイルがあるフォルダにそれら二つのファイルを置くことでベーシック認証をかけることができる。
unittest覚書

# unittestとは
> 単体テスト（ユニットテストと呼ばれることもあります）は、プログラムを構成する比較的小さな単位（ユニット）が個々の機能を正しく果たしているかどうかを検証するテストです。
 通常、関数やメソッドが単体テストの単位（ユニット）となります

[単体テスト(ユニットテスト)とは | ソフトウェアの検証の種類 | テクマトリックス株式会社](http://www.techmatrix.co.jp/t/quality/unittest.html)

要するに関数とかがちゃんと動いているかチェックするテストである。
先に関数の振る舞いを決めてテストを書いてから関数の実物を書くのがテスト駆動開発-**TDD**(あっているか自信なし)

## どんな風に書くん？

```python
import unittest
import <テストしたい関数とか>

class Test<テストしたい(ry>(unittest.TestCase): # 名前は重要ではないけどunittest.TestCaseを引き継ぐのは必須
    def test_<テストする関数>(self): # test_*と書くと自動でテストだと認識してくれるらしい
        """テストの説明
        """
        self.assertEqual(出てくるべき答え, <テストしたい関数>(引数))
```
基本的にはこんな感じでいいらしい

## 例

こんな感じのディレクトリ構成だとする


```
projectroot
├── src
│   └── hoge.py
└── test
    └── test_hoge.py
```

`hoge.py`をテストする`test_hoge.py`がある

```python:hoge.py

def foo(a: int, b: int) -> int:
    return a + b

def bar(a: int, b: int) -> int:
    return a - b
```

```python:test_hoge.py
import unittest
from src import hoge

class TestHoge(unittest.TestCase):
    def test_foo(self):
        """fooのテスト
        """
        expected = 2
        actual = hoge.foo(1, 1)
        self.assertEqual(expected, actual)

    def test_bar(self):
        """barのテスト
        """
        expected = 0
        actual = hoge.bar(1, 1)
        self.assertEqual(expected, actual)
```

testの実行は次のようになる

```bash
python -m unittest discover -s test -v
```

`projectroot`直下でtest内のコードを実行している

```bash:実行結果
test_foo (test_hoge)
fooのテスト ... ok
test_bar (test_hoge)
barのテスト ... ok

----------------------------------------------------------------------
Ran 1 test in 0.003s

OK
```
Gitで特定のファイル・ディレクトリを管理から外す

Carthageで静的ライブラリを導入した際に、GitHubの無料枠を超えてコミットできなかったので、Gitの管理から外しました。

## .gitignoreを作成する
```terminal
$ git add .gitignore
```
中身の書き方は [こちら](https://github.com/github/gitignore/blob/master/Objective-C.gitignore) がサンプルです。
追加で削除したいファイル・ディレクトリを記載してください。

## すでに対象のファイル・ディレクトリを管理している場合
`.gitignore`ではすでに管理しているものに対しては反映されません。
そのため `git rm` で明示的に管理から削除する必要があります。

#### ファイルを物理削除＋管理から外す
```terminal
$ git rm filename
```

#### ディレクトリを物理削除＋管理から外す
```terminal
$ git rm -r dirname
```

#### 管理から外す（物理削除しない）
```terminal
$ git rm --cached filename
```

`.gitignore`を含めてコミットするのを忘れずに！
Xcodeで画面分割ができなくなった対応メモ

## Xcodeが　オプション + クリックで画面分割(split view)ができなくなってしまった時の対処法:sweat:
- 原因はEditorにFocusしてしまっていた！
画像に示した箇所をクリックしたら元に戻りました:joy:
![スクリーンショット 2020-08-27 0.12.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/3582127c-00cd-ebfa-3da8-1093b8c64962.png)

どうやらこの機能はXcode11から搭載された機能で、セカンド画面を閉じることなく一つの画面に集中できるモード見たいです。

以下のショートカットでも実行可能（自分はおそらくこれでFocusしてしまっていた:innocent:）

ショートカット: Control + Shift + Command + Enter

メニューからも弄れるみたいです。
[View] -> [Editor] -> [Focus]
![スクリーンショット 2020-08-27 0.23.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/0e25d710-0554-d592-c009-212041adee0f.png)

## フォーカスモードを使いこなせば..
このように分割してコーディングしている最中に
「ちょっと半分邪魔だな〜」
とか思ったら
![スクリーンショット 2020-08-27 0.11.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/6056e521-605e-f452-7db7-747cea38911a.png)
Control + Shift + Command + Enter でフォーカスモードにして
![スクリーンショット 2020-08-27 0.11.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/af099e14-18fb-e37b-b79b-c3ceb4945eb9.png)
スッキリコーディングができるようになって生産性が上がるかも:eggplant:
[備忘録]　[PyTorch]　インストールから　簡単な使い方まで

#導入
自身の研究でニューラルネットを使うことになったから、じゃあPyTorchを使うか（脳死）ってことになった。
人気なのは知ってるし、PFN様が作ってたchainerを開発終了に追い込んだ(この表現はあっているのだろうか...)ことだけは知ってるけど、具体的に使ったことはなかったので、環境を整えて少し使ってみるとこまでを記録に残しておく。

#PyTorchとは
PyTorchとは、Facebookが開発してるPythonのライブラリで、主にニューラルネット(以下NN)向けに作られたものである(私の偏見込み)。GPUを使えるようにすることでNNの計算を手早くできたり、自動微分システムがあったりと、NNのハードルを下げることに一役買ってる便利なツールである。

※もっと違う特徴があるだろって意見もあるかもしれないけど、自分自身に対するざっくりとした説明でもあるので許してください。

#ダウンロードの仕方
筆者の環境
OS：Windows10
Python : Python3.7
Package : Anaconda
IDE : Spyder4.1.4
GPU : オンボードのやつだけ。NVIDIAのはつんでない

まず、pytorchのインストールコマンドを以下のWEBページから取得する。

[PyTorch](https://pytorch.org)

適切なインストールコマンドを選んでおかないと、ひたすらエラーが出るので注意。
※Qiitaの他の人のページのインストールコマンドをコピペして、そのまま実行してエラーが出て、なんでだ？を繰り返してたバカがこの記事を書いています

選択肢は
１．ビルド　(調べたけどよく分からんから他の記事に従って左を選択)
２．OS
３．パッケージ
４．言語
５．CUDA　(GPUを使うためのもんらしい)
の5つ。
筆者の環境に従って、以下の画像のようにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564441/6d6233d7-8d14-ddff-de9c-2ea61351ad11.png)

一番下のRun this Commandの部分がインストールコマンド。そして、以下の手順でインストール。
①Anaconda promptを右クリックして、その他　→　管理者として実行、で開く
②以下のコマンドを実行

```
conda install pytorch torchvision cpuonly -c pytorch
```
これでOK

補足：自宅のデスクトップではうまくいったが、なぜかラップトップではうまくいかくて、下記のエラーが出た。

```
OSError:[WinError 126] 指定されたモジュールが見つかりません。 
```
エラーメッセージで検索したら、@kunishou0903さんのこのページ[(import torchで「OSError:[WinError 126] 指定されたモジュールが見つかりません。」が出た時の対処)](https://qiita.com/kunishou0903/items/b1789c446770c8c97613)にたどり着き、この記事の「旧バージョンのPytorchをインストール」で紹介されている以下のコマンドを実行したところうまくいった。

```
conda install pytorch==1.5.0 torchvision==0.6.0 -c pytorch
```

なので、ラップトップのpytorchはバージョンが古いということをお忘れなく。

#簡単な使い方
行列の要素に行番号と列番号で参照したり、平均を計算したり、転置したり、numpyでできることは大体できる。しかも、numpyに変換もできる。GPUを使ってないので、その恩恵をあまり感じられていないが、自動微分は便利だなーって思ったので、それを下に書いておく。

```python
#ライブラリ
import torch

#行列作成
A = torch.tensor([[1,2],[3,4]]) 
B = torch.tensor([[4,3],[2,1]])

#行列同士の積
torch.mm(A,B)
###tensor([[ 8,  5],[20, 13]])###

#自動微分
x = torch.tensor(3.0, requires_grad = True) #Xを変数にしたい場合はrequires_gradの引数をTrueにする
                                            #最初の4はXに対してある点を与えている。
a = torch.tensor(2.0) #傾き
b = 1.0               #切片
y = a*x + 1 #関数定義

print(y) # x = 3の時の値
###tensor(7., grad_fn=<AddBackward0>)###

y.backward() #requires_grad　＝Trueになっている変数で微分実行　

print(x.grad) #微分した結果
###tensor(2.)###
```


#引用元
[1][PyTorch](https://pytorch.org)
[2][(import torchで「OSError:[WinError 126] 指定されたモジュールが見つかりません。」が出た時の対処)](https://qiita.com/kunishou0903/items/b1789c446770c8c97613)
[3][PyTorch環境構築 (Windows10, Anaconda3, Pycharm, Python3)](https://qiita.com/fanjunwei/items/51a2e0f2fbafacf49819) 直接何かを引用したわけじゃないけど、このページも見て参考にしました。
[4]「現場で使える　PyTorch 開発入門,社世橋　著」　←　買った。最高。
パッケージ所属JavaファイルのJarファイルの生成及び実行



概要
=
「スッキリわかる Java入門 実践編 第2版」13章 練習13-2,練習13−3に取り組んでいた際に、
パッケージに所属したclassファイルのJarファイル生成とJarファイル実行でつまづいたので、
その際に行ったことを本記事にて紹介したします。

*クラス名、パッケージ名は書籍とは別の名称、ソースコードは書籍よりも簡素なものを例として取り上げております。

環境
=
OS: macOS Catalina 10.15.6
JDK:14.0.1


状況
==


ターミナルにて実行

①パッケージ「hoge」に格納した「Main.java」のJarファイルを生成


```
//カレントディレクトリを設定
HIrokinoMacBook-Pro:~ user$ cd /Users/user/src/Java/sukiri1/Chapter6/hoge
//jarを生成
HIrokinoMacBook-Pro:hoge user$ jar -cvfm test.jar manifest.txt Main.class
マニフェストが追加されました
Main.classを追加中です(入=417)(出=284)(31%収縮されました)
```

/Users/user/src/Java/sukiri1/Chapter6/hogeに「test.jar」が作成されました。
![スクリーンショット 2020-08-26 23.06.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639462/7ebe1248-0139-718f-2333-ed782e4ed07a.png)



②**生成したJarが実行できない**

```
//jarファイル実行
HIrokinoMacBook-Pro:hoge user$ java -jar test.jar
エラー: メイン・クラスhoge.Mainを検出およびロードできませんでした
原因: java.lang.ClassNotFoundException: hoge.Main
```

各ファイルの内容
=
●Main.java
hogeパッケージにMainクラスを格納

```
package hoge;
public class Main {
	public static void main(String[] args) {
		System.out.println("hello.java");
  	}
}
```
下記ディレクトリに格納
/Users/user/src/Java/sukiri1/Chapter6/hoge/Main.java

●マニフェスト内容

```
Manfest-Version: 1.0
Main-Class: hoge.Main
```
※manifest.textを作成する際は、「Main-Class: パッケージ名.クラス名」の後に**改行**がないと、
実行時に**「〇〇.jarにメイン・マニフェスト属性がありません」**というエラーが出てしまいます。


↓参考
https://ameblo.jp/syosinsyaprogram/entry-11775802006.html
http://daiad.webcrow.jp/java/jar.html

対処法
=
###①パッケージが格納されている階層をカレントディレクトリに設定する

当初、カレントディレクトリを「cd /Users/user/src/Java/sukiri1/Chapter6/hoge」に設定していたが、
「cd /Users/user/src/Java/sukiri1/Chapter6」へ変更する(一階層上に設定)

```
HIrokinoMacBook-Pro:hoge user$ cd /Users/user/src/Java/sukiri1/Chapter6
HIrokinoMacBook-Pro:Chapter6 user$ 
```

###②jar生成のコマンドに含まれるマニフェストのtxtファイルとクラスファイルがパッケージに含まれていることを明記する

当初、「jar -cvfm test.jar manifest.txt Main.class」としていたが、「manifest.txt」と「Main.class」が「hoge」パッケージに含まれていることを、「hoge/」を加え以下のように明記しターミナルで実行する。

```
jar -cvfm test.jar hoge/manifest.txt hoge/Main.class
```

/Users/user/src/Java/sukiri1/Chapter6に「test.jar」が作成される。
![スクリーンショット 2020-08-26 23.08.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639462/13907622-9c14-16e2-ebb8-98cd9edd9fec.png)

①②について、
カレントディレクトリをパッケージに設定(今回の場合「hoge」）した状態で、jarファイルを生成すると、
jarファイル内にそのパッケージが存在しないjarが生成されてしまいます。(今回の場合パッケージ「hoge」がないjar)

そのため、「java -jar」でjarを実行した時に、マニフェストの「Main-Class:」 には「hoge.Main」と指定されているのに、
実際生成されたjarファイルには「hoge」パッケージに格納された「Main.class」がなく、
今回のように「エラー: メイン・クラスhoge.Mainを検出およびロードできませんでした」と表示され、
「hoge.mainなんてクラス見つかりませんでしたよ?」と指摘されてしまったのです。

それではjarを実行してみます。

```
HIrokinoMacBook-Pro:Chapter6 user$ java -jar test.jar
hello.java
```

成功しました。


終わりに
=

もしマニフェストを利用したjarファイルの生成と実行で同様のエラーに見舞われた場合は、
カレントディレクトリが適切か、jar生成のコマンドにおいてパッケージの構成が適切か、
マニフェストの「Main.class」はどのように記述されているかを見直してみるといいと思います!
【Python】データサイエンス100本ノック（構造化データ加工編） 032 解説

- データサイエンス100本ノックをやりきる会を作りました🎉
- こちらの[Slack招待URL](https://join.slack.com/t/data-science-100nocks/shared_invite/zt-gfncg9vm-8W8b3UrDg8R~TKaqUkQpgw)からご参加ください！！
- ぜひ一緒に励まし合いながら、データサイエンス100本ノックをやり切りたいと思っています！

##Youtube
[動画解説](https://youtu.be/f_mphDf9a5k)もしています。

##問題
P-032: レシート明細データフレーム（df_receipt）の売上金額（amount）について、25％刻みでパーセンタイル値を求めよ。

##解答
```:コード例1
np.percentile(df_receipt['amount'], q=[25, 50, 75,100])
```

##出力
```:コード例1
array([102. ,170. ,288. ,10925. ])
```

##解答
```:コード例2
df_receipt.amount.quantile(q=np.arange(5)/4)
```

##出力
```:コード例2
0.00    10.0
0.25    102.0
0.50    170.0
0.75    288.0
1.00    10925.0
Name: amount, dtype: float64
```

##解説
・コード1はNumPyメイン、コード2はPandasメインです。
・**'np.percentile(<データ名>[<列名>], q=[ , , , ])'は、NumPyの'percentile'関数を使用**しています。
・データを小さい順に並べた時に、初めから数えて全体のN%にあるデータをNパーセンタイルと呼びます。
・第一四分位数は25パーセンタイル、中央値は50パーセンタイル、第三四分位数は75パーセンタイルです。
・**'np.percentile'は、NumPyの関数**であり、パーセンタイルを算出します。'q'でパーセンタイルを指定します。
・**'.quantile'は、Pandasの関数**であり、パーセンタイルを算出します。'q'でパーセンタイルを指定します。
・**'np.arange'は、NumPyの関数**であり、等差数列を指定します。例えば、'np.arange(1,10,2)'は、1から10までの等差2の数列を指定します。
・今回の場合、'np.arange(5)'は、0から4までの等差1の数列[0,1,2,3,4]を指定しています。初めの数および等差の指定がない場合は、0始まり、等差1となります。
・np.arange(5)=[0,1,2,3,4]であり、それを4で割っているので、パーセンタイルとして指定しているのは[0, 0.25, 0.5, 0.75, 1]となります。
Blenderメモ メッシュの一部をたんこぶみたいに膨らませる

立方体メッシュを伸ばす
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592705/170c9f32-574e-c993-1955-b1b27242b708.png)

「Ctrl＋R」でいくつかループカットを作る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592705/8362efd0-24e3-b131-1946-b76fb943e618.png)

面選択モードで適当な面を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592705/9b6b0c8f-bbfd-53e4-98b1-8acf5e38360b.png)

「E」→「Z」で上に押し出す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592705/aa2b8248-0dfe-9806-a7ec-1d9a3025131c.png)

押し出し面の辺を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592705/a6ff5c94-895d-0fe3-448c-da5f711d6608.png)

「Ctrl＋B」ベベル
セグメントは適当に４つくらい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592705/a0a93dc3-20ca-2f79-9b21-c34a25e0b5eb.png)
【Laravel】herokuで独自ドメイン設定したので、~.herokuapp.comでアクセスさせたくない

# はじめに

herokuにWebアプリをデプロイした場合、通常は「herokuapp.com」のようなherokuが管理しているドメインのサブドメイン(hoge.herokuapp.comなど)にアクセスすることでデプロイ先にアクセスできるのですが、各自で取得した独自ドメインも設定できるようになっています。

[Herokuアプリに独自ドメインを設定＆SSL化する. Herokuアプリケーションに独自ドメインを追加します。さらにSSLを実装して、… | by Koji Mochizuki | Medium](https://medium.com/@kjmczk/heroku-cdomain-ssl-1b4cae424e61)

独自ドメインでのアクセスが可能になれば、元々の[herokuアプリ名].herokuapp.comでのアクセスはあまりさせないようにしたいし、SEO的にもあまりよろしくないようなので、今回は[herokuアプリ名].herokuapp.comでのアクセス時にリダイレクト処理を行うようにしたいと思います。

調べてみるとrailsでの記事はいくつかあったのですが、laravelの記事は見つけられなかったため、自前で実装してみました。

※railsでの例
[[SEO対策] Railsでherokuapp.comを正しいFQDNへリダイレクトさせる - Qiita](https://qiita.com/kon_yu/items/223aa03554ff6141001f)
[【Rails】hoge.herokuapp.comへのアクセスをリダイレクトさせる - Qiita](https://qiita.com/pharma_tech3/items/6dbd5aae64bdf0b5d2eb)

# コード

今回はmiddlewareを利用して、[herokuアプリ名].herokuapp.comでのアクセス時にリダイレクト処理を行うようにします。

```php:/app/Http/Kernel.php
protected $middleware = [
    ...
    \App\Http\Middleware\HerokuDomain::class,
];
```

```php:/app/Http/Kernel.php
<?php
namespace App\Http\Middleware;

use Closure;

class HerokuDomain {

    public function handle($request, Closure $next)
    {
        if (substr($request->header('host'), -13) === 'herokuapp.com') {
            // ドメイン末尾がherokuapp.comのアクセスの場合、.envで指定したAPP_URLに遷移させる
            return redirect()->away(config('app.url') . $_SERVER['REQUEST_URI']);
        }

        return $next($request);
    }
}
```

# 終わりに

今回は思いつく限り簡単な実装で独自ドメインへのリダイレクト処理を行ってみました。
もっと他にいい方法があるよ！という方がいらっしゃいましたらコメントいただけると幸いです。
アプライアンスサーバーとは

#アプライアンスサーバーとは？
- 特定の用途や単機能に絞ったサーバーの専用機のこと。


#アプライアンスサーバーのメリット

- 汎用サーバーよりも費用が安価で済む

- 設定作業や導入後の運用管理が簡素化できる

- アップデートにおいて、アプライアンスメーカーが提供するアップデートだけを適用すればいい。(汎用サーバーであれば、OSや各種アプリケーションそれぞれの更新プログラムをそれぞれ適用する必要があり、サーバーの種類が増えれば増えるほど負担が増す)

#アプライアンスサーバーのデメリット

- 拡張や性能アップができない
【android】【kotlin】WebViewでJavaScriptを許可する

AndroidでWebViewを使用してウェブページを表示したかったのですが
詰まったところがあったので備忘録として残しておきます。


#WebViewでウェブページを表示させてみる。

WebViewでQiitaのTOPページを表示させています。
トレンドが選択されているのに記事が全くでてこない。んん？どうしてだろう:disappointed_relieved:と悩んでました。

![screenshot-1598451884665.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329865/7b559e41-1790-51c8-9203-963465b99c7c.jpeg)


###JavaScriptが使用されているウェブページではWebViewのJavaScriptを有効にする必要がある
調べてみたところ、WebViewのデフォルトの設定だとJavaScriptが無効になっているため
JavaScriptの使用されている箇所が正常に表示できていないということでした:cold_sweat:

#WebViewのJavaScriptを有効にする

今回はDataBindingを使用していたので、下記のようなコードで記述しました。

```WebViewActivity.kt
DataBindingUtil.setContentView<ActivityWebViewBinding>(
            this, R.layout.activity_web_view
        ).apply {
            //webview内のJavaScriptを有効にする
            webView.settings.javaScriptEnabled = true
```

#設定後のQiita TOPページ

![screenshot-1598451950517.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329865/6fb139ac-1213-9da9-0cd4-527c30a69923.jpeg)


正しくトレンドの記事が表示されていることが確認できました！

#参照
[WebView での JavaScript の使用](https://developer.android.com/guide/webapps/webview?hl=ja#UsingJavaScript)
印刷readyなgistを作る小技

zennに移行しました: https://zenn.dev/cumet04/articles/printable-gist
qiita側の記事を消す予定は特にありませんが、更新することはありません。

---

ちょっと整形した感じのドキュメントを書いてpdfや紙にしたい。
markdownを印刷するような記事を探すと、やれnpmツールだpandocだとめんどくさい。
githubのりどみを印刷するだけみたいな、そのくらいの軽さでいい。

そういうわけで、gistを作って印刷するための小技です。

## コンテンツ以外の部分を消す
普通にgistを作るとこんな感じです。

![ss1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286162/8efecf48-49da-b03b-c50b-51336e75e6bb.png)

ヘッダとかコメント欄とかが邪魔です。

というわけでコンテンツ以外の部分を消しましょう。おもむろにブラウザのdevtoolのconsoleを開き、

```javascript
const body = document.querySelector('.Box-body.readme')
document.body.innerText = ""
document.body.appendChild(body)
```

これを突っ込みます。

![ss2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286162/ddb6245d-da4f-4364-c01c-34af69278ff5.png)

スッキリですね。

## 改行位置を調整する
本格的にドキュメントを書いていき、ふと印刷プレビューを見るとこんな感じでした。

![ss3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286162/e7f2bc11-b802-c93c-dc40-1b4538890f67.png)

そこで切られるのはちょっと...

区切りを入れたい位置を確認したらやはりdevtoolを開き、改行したい位置のDOMのstyleに

```css
page-break-after: always;
```

もしくは

```css
page-break-before: always;
```

を入れます（改行前後どちらのDOMに入れるかで調整してください）。

![ss4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286162/b5ebc0bb-8d5a-ad19-01e9-ded226b35f9d.png)

いい感じですね。

気が済んだら印刷しましょう。

#### 補足
記事執筆の数ヶ月前までは、改行したい位置にmarkdown上で

```html
<hr style="page-break-after: always;">
```

を入れていたのですが、いつの頃からかこれでは動かなくなっていました（style属性が消される）。
印刷のたびに手動で頑張らないといけなくなったので面倒ですが、どうせコンテンツ編集のたびに調整が必要と思えば手間は同じかもしれません。

## まとめ
もう「○○をpdfで提出してください」とか言われても平気ですね。
GOPATHの指定



##GOPATHの確認

```
$ go env GOPATH
/Users/project/to/path/go
```

##環境情報を一覧表示

```
$ printenv
TERM_SESSION_ID=w0t0p0:F236B887-2A99-432B-89EA-01570DC27639
SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.q3WJE4aYYO/Listeners
LC_TERMINAL_VERSION=3.3.12
COLORFGBG=7;0
ITERM_PROFILE=Default
XPC_FLAGS=0x0
LANG=ja_JP.UTF-8
etc
```

##GOPATHの指定

```
ホームディレクトリに移動
$ cd ~
ファイルの詳細情報の表示
$ ls -la
-rw-------    1 user  staff   7131  7  2 18:43 .bash_profile
-rw-r--r--    1 user  staff    206  8 24 21:07 .bashrc
```

####.bash_profileか.bashrcにGOPATHを追記（どちらかで良い）
※どっちも書くとPATHが通らなくなる

```
$ vi .bash_profile
$ vi .bashrc
```

####sourceコマンドの実行
これで記述したPATHを通す。

```
source ~/.bashrc
source ~/.bash_profile
```
MacでOpenJDK 11 を使うためにパスを通した時にはまったメモ


Java11を開発で使用することになり、以下ミッションに遭遇しました。

####ミッション内容

>OpenJDK サイトからダウンロードする場合
[Archived OpenJDK](http://jdk.java.net/archive/) から OpenJDK 11 アーカイブをダウンロード。
ダウンロードした openjdk-11.0.2_osx-x64_bin.tar.gz を展開し、
環境変数 JAVA_HOME に jdk-11.jdk/Contents/Home/ を設定し、
環境変数 PATH に $JAVA_HOME/bin へのパスを通してください。


なんのこっちゃ状態。
パスを通すなどは数年前にJavaで開発していた頃にやっていたはずなのですが、苦労した記憶しかない。。

まずは書かれている通り、
[Archived OpenJDK](http://jdk.java.net/archive/) から OpenJDK 11 アーカイブをダウンロード。


ダウンロードフォルダにあるtarファイルを解凍し、移動しました

```
$ cd /Users/hoge/Downloads
$ $ sudo mv jdk-11.0.2.jdk /Library/Java/JavaVirtualMachines/
```

java_homeに追加されたことを確認

```
$ /usr/libexec/java_home  -V
Matching Java Virtual Machines (6):
    11.0.2, x86_64:	"OpenJDK 11.0.2"	/Library/Java/JavaVirtualMachines/jdk-11.0.2.jdk/Contents/Home
    1.8.0_171, x86_64:	"Java SE 8"	/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home
    1.8.0_31, x86_64:	"Java SE 8"	/Library/Java/JavaVirtualMachines/jdk1.8.0_31.jdk/Contents/Home
    1.8.0_05, x86_64:	"Java SE 8"	/Library/Java/JavaVirtualMachines/jdk1.8.0_05.jdk/Contents/Home
    1.7.0_75, x86_64:	"Java SE 7"	/Library/Java/JavaVirtualMachines/jdk1.7.0_75.jdk/Contents/Home
    1.7.0_21, x86_64:	"Java SE 7"	/Library/Java/JavaVirtualMachines/jdk1.7.0_21.jdk/Contents/Home
```

以下を参考にパスを通しました(ありがとうございます)。
私は11を使用するので11に読み替えました。
https://style.potepan.com/articles/18810.html



```
$ export PATH=$PATH:Library/Java/JavaVirtualMachines/jdk-11.0.2.jdk/Contents/Home
```

```
$ export JAVA_HOME=`/usr/libexec/java_home -v 11.0.2`
```

よーしこれでOK!と思いきや

```
$ java -version
java version "1.8.0_171"
```

java -versionが変わっていないぞ。

・
・
・


ここから何度もパスを通したりしてはまったのですが、

```
source ~/.bash_profile
```

で有効化しているつもりが、~/.bash_profileの中身が変わっていなかったので
元に戻っていたのでした。


気を取り直して

```
 vi ~/.bash_profile
```

~/.bash_profileのJAVA_HOMEをjdk-11.0.2.jdkのパスで更新し、

```
export JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk-11.0.2.jdk/Contents/Home"
```

以下で有効化

```
source ~/.bash_profile
```

見事、java11になっていることを確認！

```
$ java -version
openjdk version "11.0.2" 2019-01-15
OpenJDK Runtime Environment 18.9 (build 11.0.2+9)
OpenJDK 64-Bit Server VM 18.9 (build 11.0.2+9, mixed mode)
```

2時間くらいはまりました。

忘れないようメモ。
HerokuでSelenium使ってるときにThis version of ChromeDriver only supports Chrome version XX エラー

わりと解消に時間かかったので備忘録として書いておく。

結論としては、Heroku側のキャッシュを削除してリビルドする必要がある。

```
$ heroku plugins:install heroku-repo

$ heroku repo:purge_cache -a {Herokuで登録してるアプリの名前}
```
自分のアプリの名前は https://dashboard.heroku.com/apps/XXXXXX ←これ! XXXXXXがアプリ名!
その後、再度ビルドしてあげる。特にコミットするものがないなら

```
git commit --allow-empty -m "Cache 削除"
git push heroku master
```

してリビルドしてあげる。 なんかコミットしてリビルドしないと、同じエラー起きてしまうので注意。

参考:キャッシュ削除方法(公式)
https://help.heroku.com/18PI5RSY/how-do-i-clear-the-build-cache
JavaでXMLファイルから属性と値を取得する



####以下のようなxmlファイルから、fugaタグの属性と値を取得したいとします。

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<hoge>
  <fuga id="1" name="tarou" age="20" gender="male">example</fuga>
</hoge>
```

####以下のように出力したいとします

```text

id,1
name,tarou
age,20
gender,male

```

####以下のコードによって出力することが出来ます

```java:
package example;

import java.io.File;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NamedNodeMap;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;

public class example {
	public static void main(String[] args) {
		try {
			DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
			DocumentBuilder builder = factory.newDocumentBuilder();
			Document doc = builder.parse(new File("example.xml"));
			Element hoge = doc.getDocumentElement();
			NodeList fugaList = hoge.getChildNodes();

			for(int i=0; i<fugaList.getLength(); i++) {
				Node fuga = fugaList.item(i);
				if(fuga.getNodeType()==Node.ELEMENT_NODE) {
					// ここで、attributeの一覧を取得します
					NamedNodeMap nnm = fuga.getAttributes();
					for(int j=0; j<nnm.getLength(); j++) {
						Node fugaNameNode = nnm.item(j);/
                        // attributeとvalueを出力します
						System.out.println(fugaNameNode.getNodeName()+","+fugaNameNode.getNodeValue());
					}
				}
			}
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
}

```

####結果

```text

age,20
gender,male
id,1
name,tarou
```


####追記

出力順序が一致していないっぽいです。
NamedNodeMapは順序を担保していない様子
Postgres死活監視用にSQLとコマンドを一度のpsqlコマンドで実行したかった

# 背景
Amazon Aurora Postgresのエンジンバージョンアップすることになった。
検証環境で動作確認する際に、ノードごとに「アクセス可能か」と「Writeノードか、Read Replicaか」
を確認するスクリプトを作って、ポーリングしたいと思った。

その手段として、

- バージョン ``` select version from version(); ``` → SQL文
- ReadOnlyか否か ``` show transaction_read_only; ``` → コマンド
  - https://stackoverflow.com/questions/9275253/postgres-query-to-find-whether-database-is-read-only-mode

を定期的に実行すれば良いと思いつく。
そして、（個人的な宗教的好みで）これを一つのpsqlコマンドで実行したかった。

しかし意外と苦戦したので、供養がてら、その履歴を晒す。
プラスで、もっと良い方法がありそうなので、「こうすればできたよ」という知見者のコメントを期待。

# 結論

`-c`ではなく`EOF`を使えばpsqlで複数コマンドを実行できる。
https://orebibou.com/ja/home/201609/20160923_001/

なので、インスタンスが2つある状態では、以下のようにすればとりあえず目的は達成できた。

```bash
$ cat check_pgver.sh 
date

echo instance0
psql -h {instance0のエンドポイント} -U {ユーザ名} -d {DB名} -t -A -w << EOF
select version from version();
show transaction_read_only;
EOF

echo instance1
psql -h {instance1のエンドポイント} -U {ユーザ名} -d {DB名} -t -A -w << EOF
select version from version();
show transaction_read_only;
EOF
```

```bash
$ ./check_pgver.sh 
2020年  8月 26日 水曜日 20:35:10 JST
instance0
PostgreSQL 11.6 on x86_64-pc-linux-gnu, compiled by gcc (GCC) 4.9.3, 64-bit
off
instance1
PostgreSQL 11.6 on x86_64-pc-linux-gnu, compiled by gcc (GCC) 4.9.3, 64-bit
on
```

あとは、これを無限ループさせる。

```bash
{ while true; do ./check_pgver.sh; sleep 5; done > db_status.log; } &
```

psqlの実行にパスワードが必要なら、事前に.pgpassを作っておく

```bash
echo ${エンドポイント}:5432:{ユーザ名}:{DB名}:${DBパスワード} >> .pgpass
chmod 600 .pgpass
```

# 失敗例


## 二つ並べて実行するだけだと、最後の結果しか表示されない。

```bash
$ psql -h ${エンドポイント} -U {ユーザ名} -d {DB名} -t -A -w -c "select version from version();show transaction_read_only;"
off
``` 

## showコマンドをSQL内に入れる方法がわからない

方法をご存知の方はぜひコメントください。

```sql
> select * from (show transaction_read_only);
ERROR:  syntax error at or near ")"
行 1: select * from (show transaction_read_only);
```

# gsetがセミコロンで連結できない

gsetを使えば、インタラクティブには目的が達成できた。

```sql
> show transaction_read_only;
 transaction_read_only 
-----------------------
 off
(1 行)

> \gset
> \echo :transaction_read_only
off
> select version, ':transaction_read_only' as readonly from version();
                                   version                                   |        readonly        
-----------------------------------------------------------------------------+------------------------
 PostgreSQL 11.6 on x86_64-pc-linux-gnu, compiled by gcc (GCC) 4.9.3, 64-bit | :transaction_read_only
(1 行)
```

しかし、これを一行にしようとするとエラーが起こる

```bash
$ psql -h ${エンドポイント} -U {ユーザ名} -d {DB名} -c "show transaction_read_only;\gset;select version, ':transaction_read_only' as readonly from version();"
ERROR:  syntax error at or near "\"
行 1: show transaction_read_only;\gset;select version, ':transacti...
```

方法をご存知の方はぜひコメントください。
IBM CloudをVisual Studio Codeから利用するためのエクステンション

# はじめに

最近の開発では、エディタ・統合開発環境としてVisual Studio Code（VSCode）を利用する機会が多いと思います。VSCodeでは「エクステンション」という仕組みにより、標準機能に加えて、個人・組織で開発された拡張機能を追加することが可能です。

AWSでは、「[AWS Toolkit for Visual Studio Code](https://aws.amazon.com/jp/visualstudiocode/)」というエクステンションが公式に提供されています。「AWS Toolkit for Visual Studio Code」では、Lambdaのローカル実行や、[S3へのファイルのアップロード・ダウンロード](https://www.publickey1.jp/blog/20/aws_toolkit_for_visual_studio_codeamazon_s3vscodes3.html)などが可能になっています。

IBM CloudでもVSCodeのエクステンションが提供されていますので、それらを調査してみました。
（先に結論を申し上げると、残念ながらあまり有用なエクステンションは発見できませんでした）


# IBM Cloud Accountエクステンション

「[IBM Cloud Account](https://github.com/IBM/vscode-ibmcloud-account)」は、IBM Cloudにアクセスする他のVSCodeエクステンションのために、IBM Cloudの認証機能を提供するエクステンションになります。これ単体では特に意味をなすものではなく、他のエクステンションが IBM Cloud Account を利用するという関係性になります。

IBM Cloud Accountでは、ログイン、ログアウト、アカウントの作成、アカウントの選択という機能が提供されます。

エクステンションの導入は、VSCodeのエクステンションの検索画面で「IBM Cloud Account」で検索して導入します。
<img width="400" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386149/6a263cc4-aebf-e980-1af6-1bd930661ca5.png">

導入後、コマンドパレットを開き（WindowsではCtrl+Shift+P、MacではCmd+Shift+P）、「IBM Cloud: Log in」を選択することで、IBM Cloudにログインできます。
<img width="400" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386149/e3a2de0a-c06c-75fc-1cb9-3e8636340694.png">

ログインは、ユーザ名・パスワード、APIキーなどの方式で実施できます。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386149/1a0e885c-559b-bb62-1b00-ed3734ed909d.png">



# IBM Developer Extension for VSCodeエクステンション

「IBM Developer Extension for VSCode」は、VSCodeのコマンドパレットからIBM CloudのCLIを実行するためのエクステンションです。以下が公式ページになります。

- [IBM Cloudのドキュメントページ](https://cloud.ibm.com/docs/cli?topic=cli-ibm-dev-tools-for-vscode)
- [GitHub上のエクステンションリポジトリ](https://github.com/IBM-Cloud/ibm-developer-extension-vscode)

ただ、開発はあまり活発ではないようで、GitHubの履歴を見ても2018年6月が直近のcommitになります。

また、[IBM Cloudのドキュメント](https://cloud.ibm.com/docs/cli?topic=cli-ibm-dev-tools-for-vscode)では「ibmcloud」コマンドが使用可能と記載されていますが、[GitHub上のエクステンションリポジトリ](https://github.com/IBM-Cloud/ibm-developer-extension-vscode)では「bx」コマンドのままとなっており、ドキュメント上の齟齬もあります。

エクステンションの導入は、VSCodeのエクステンションの検索画面で「IBM Developer Tools」で検索して導入します（ややこしいですが、MicrosoftのMarketplaceに登録されている登録名は「IBM Developer Tools」になります）。
<img width="400" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386149/4ef9adf4-3872-24a9-02dd-633e77ecdda6.png">

エクステンションを導入した後、コマンドパレットを開き、「bx」と入力することで、各種のbxコマンドが表示され、その中から選択して実行することができます。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386149/93e79556-ce02-8bbc-07c0-98401f355a3e.png">

コマンドを選択すると、VSCodeのターミナルに移り、選択したコマンドが実行されます。
<img width="400" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386149/ad4b7b5b-6ca8-012c-19ee-841e56892f99.png">


IBM Cloudに特化したエクステンションは、上記以外には特に見つからないという結果になりました。IBM CloudとVSCodeの連携がもっと進み、便利なエクステンションが追加されるとよいなと思います。
Power Automateを使ってconnpassの参加イベントリマインダーを作成してみた～情報取得編～

#きっかけ
オンラインイベントが増えてきてオフラインイベントより参加しやすくなってる中、
あれ？今日イベントの日だっけ？ってなったことないですか？
私はありました…

#connpassのAPIとはなんぞや？？？
調べれば出てくるわけですよ。[URLはこちら](https://connpass.com/about/api/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/77f9cf15-d89b-0fe9-0102-1fa7cc04b0b8.png)

今回やりたいのが、<font color="Red">マイページから参加一覧を持ってきたい</font>
でも…このAPIの中にやりたいことがない。
なので、直接Webページからとる方法にしました！
# 方法
Power AutomateのHTTPアクションを使う方法
・方法→GET
・URL→connpassのマイぺージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/29624f45-914e-031e-b085-9bcc0dc82fe6.png)

フローのテストをすると、本文の中になんだこれって思うやつがずらっと…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/62ba6361-8288-5eb4-2674-6a9bae742368.png)
VScodeで表示したもの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/a44286e7-9a9b-6e49-40dd-bb81ec13c5ae.png)
でも！これでやりたいことができるようになった！
#作成に必要なトリガーとアクション
・毎朝確認したい→トリガー「スケジュール」アクション「繰り返し」
・9時に確認したい→トリガー「日時」アクション「現在の時刻」
・時間変更→トリガー「日時」アクション「タイムゾーンの変換」
・connpassのマイページ→トリガー「HTTP」アクション「HTTP」
・データの整形→トリガー「データの操作」アクション「選択」
・データの整形→トリガー「データの操作」アクション「アレイのフィルター処理」
・LINEに通知トリガー「LINE」アクション「LINE」
#作ってみよー～情報取得編～
・毎朝確認したい→トリガー「スケジュール」アクション「繰り返し」
　・間隔→１
　・頻度→日
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/a7c1d953-eefc-d54e-3348-7cee14b7c1f4.png)
・9時に確認したい→トリガー「日時」アクション「現在の時刻」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/9c7a797d-fe41-57b0-d2e6-aa22db710177.png)
・時間変更→トリガー「日時」アクション「タイムゾーンの変換」
　・基準時間→現在の時間
　・書式設定文字列→好きなパターンを選ぶ(今回は並べ替えできるものにしました)
　・変換元のタイムゾーン→協定世界時
　・変換先のタイムゾーン→大阪、札幌、東京
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/8991529b-1124-b3b8-b8f5-5a4672363de5.png)
・connpassのマイページ→トリガー「HTTP」アクション「HTTP」
　・方法→GET
　・URL→connpassのマイページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/efdf2d4c-99b8-a6ae-260c-fb11d2f31155.png)

#次回
データの整形の中身を解説します。ちょっと長くなるかも…
flaskを使ったslackショートカット(ボット)の作成

インターンでslackのショートカットを作る機会があったのでここにまとめておきます。
インターンはいろんな経験ができるから楽しいねえ。

#slackショートカット(ボット)の作成
##処理の流れを確認
* ショートカットを選択できるように
* ショートカット選択時にモーダルを表示
* モーダルのinputを取得
* inputの内容を特定のスレッドに投稿
 
##slack appの作成
まずは
https://api.slack.com/
で新しいアプリケーションの作成を行いましょう。

##ショートカットの権限の付与
「Interactivity & Shortcuts」でリクエストURLを設定しておきましょう。この辺は別の記事を参考にしてください。
Shortcutsでcreate shortcutsを行います。

##modalのUI作成
slack モーダルの使用
https://translate.googleusercontent.com/translate_c?depth=1&hl=ja&pto=aue&rurl=translate.google.co.jp&sl=en&sp=nmt4&tl=ja&u=https://api.slack.com/surfaces/modals/using&usg=ALkJrhhi11N2yGcmH8XI6k1TO2QqpzrFyQ#opening

SlackのBlock Kit Builderを使うとUIで簡単にモーダルを作ることができて、そのjsonデータも自動で作ってくれます。
**しかし**
そのjsonデータをそのまま使ってもうまく表示されませんでした。(なぜかは不明)
とりあえず、自分が作成したサンプルをベースに作っていただくとスムーズかと思います。

```json
{
            "type": "modal",
            "callback_id": "modal-id",
            "title": {
              "type": "plain_text",
              "text": "Sample"
            },
            "submit": {
              "type": "plain_text",
              "text": "Submit"
            },
            "close": {
              "type": "plain_text",
              "text": "Cancel"
            },
            "blocks": [
              {
                "type": "input",
                "block_id": "b-id-1",
                "label": {
                  "type": "plain_text",
                  "text": "To",
                },
                "element": {
                  "action_id": "a-id-1",
                  "type": "multi_users_select",
                }
              },
              {
                "type": "input",
                "block_id": "b-id-2",
                "element": {
                  "action_id": "a-id-2",
                  "type": "plain_text_input",
                },
                "label": {
                  "type": "plain_text",
                  "text": "メッセージ",
                }
              }
            ]
          }
```


##shortcut実行時にmodal表示が発火するように
pythonのdocumentもしっかりあるのでこちらを参考に。
https://slack.dev/python-slackclient/basic_usage.html#opening-a-modal
これでmodalの発火、modalのinputデータの取得ができるはずです。

##そのほか
####特定のチャンネルにデータを出力
別記事を参考に。
####データ出力時のメンションの仕方
https://qiita.com/ryo-yamaoka/items/7677ee4486cf395ce9bc
AutoAugment は、本当に意味があるのか？　単なる答えのカンニングではないのか？

#概要

以下の論文で示されている
https://arxiv.org/pdf/1805.09501.pdf
AutoAugment:
Learning Augmentation Strategies from Data

**AutoAugment**という技術があるが、
この技術は本当に意味があるのか？
単に沢山のケースを計算して、**良い結果を選択している**だけではないのか？

という、個人の、やや素人（ただし、完全な初心者ではない）の疑問があります。
この記事は、**単に、直感的な指摘**のみです。

#アブストラクト

https://arxiv.org/pdf/1805.09501.pdf
の概要は、以下。

Google翻訳ママ

>データ拡張は、最新の画像分類器の精度を向上させる効果的な手法です。ただし、現在のデータ拡張の実装は手動で設計されています。このペーパーでは、次のような簡単な手順について説明します。
改善されたデータを自動的に検索するAutoAugment
増補方針。私たちの実装では、ポリシーが多くのサブポリシーで構成される検索スペースを設計しました。そのうちの1つは各画像に対してランダムに選択されます
各ミニバッチで。サブポリシーは2つの操作で構成され、各操作は画像処理機能です
平行移動、回転、シアリングなどの関数、および関数が適用される確率と大きさ。
検索アルゴリズムを使用して、次のような最適なポリシーを見つけます。
ニューラルネットワークは最高の検証精度をもたらします
ターゲットデータセット。私たちの方法は最先端の技術を実現します
CIFAR-10、CIFAR-100、SVHN、およびImageNetの精度
（追加データなし）。 ImageNetでトップ1を達成
精度は83.5％で、以前よりも0.4％優れています
83.1％の記録。 CIFAR-10では、次のエラー率を達成します
1.5％、これは以前の最先端技術より0.6％優れています。私たちが見つけた増強方針は、
データセット。 ImageNetで学習したポリシーは、
次のような他のデータセットで大幅な改善を実現する
Oxford Flowers、Caltech-101、Oxford-IIT Pets、FGVC Aircraft、Stanford Cars。

#まとめ

単なる直感的な記事です。
AutoAugmentは、あまり、意味がないのでは？と思いました。
沢山計算して、良い結果を選んでいるだけでは？と、いま、感じました。
(何を言おうとしているか、理解頂けるか自信がありませんが。）

コメントなどあれば、お願いします。:candy:

別途、意図が示せるような検討ができれば、示します。
例えば、この技術で、実運用を伴う案件で、意味のある成果がでるのか？という疑問があります。
base64を理解する。

## base64とは

>base64とは、64進数を意味する言葉で、すべてのデータをアルファベット(a~z, A~z)と数字(0~9)、一部の記号(+,/)の64文字で表すエンコード方式です。

[base64ってなんぞ？？理解のために実装してみた](https://qiita.com/PlanetMeron/items/2905e2d0aa7fe46a36d4)

## 関係図

![base64.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287296/473616fd-7a73-536d-4953-1e2853e25bf7.jpeg)

```.py
#文字列"Hello"をエンコード
encoded="Hello".encode()
print(encoded)
#b'Hello'

#-----------------
#"Hello"のBytesをbase64エンコード
base64_encoded=base64.b64encode(encoded)
print(base64_encoded)
#b'SGVsbG8='

#-----------------
#base64エンコードしたBytesをデコード
decoded=base64.b64decode(base64_encoded)
print(decoded)
#b'Hello'

#-----------------
#Bytesをデコード
string=decoded.decode()
print(string)
#'Hello'

```


参考
-
[base64ってなんぞ？？理解のために実装してみた](https://qiita.com/PlanetMeron/items/2905e2d0aa7fe46a36d4)
[Python 3 での文字列とバイト列の相互変換と16進数表示](https://qiita.com/masakielastic/items/2a04aee632c62536f82c)
[base64 --- Base16, Base32, Base64, Base85 データの符号化](https://docs.python.org/ja/3/library/base64.html)
JavaScriptで数値の0埋め

###sliceを使う

````js
var hoge = ("000" + 3).slice(-3);
console.log(hoge);
// 003

var hogeHoge = ("000" + 123).slice(-3);
console.log(hogeHoge);
// 123

// 関数にしてみる
var zeroPadding = (val, length) => {
  // ここで引数の妥当性チェックを行う方が良いのかもしれないが今回は割愛している
  var parts = "";
  for (var i = 1; i <= length; i++) {
      parts += "0";
  }
  return (parts + val).slice(-length);
};

// 呼び出し
console.log(zeroPadding(15, 3));
// 015
console.log(zeroPadding(150, 3));
// 150

// 補足
// "000"と指定している桁数を0埋め対象の値の桁数が超えてしまった場合、期待している0埋めにならない。
console.log(("000" + 5432).slice(-3));
// 432
// sliceの引数の数字が"000"と指定している桁数未満の場合、期待している0埋めにならない。
console.log(("000" + 543).slice(-2));
// 43
````
###padStartを使う
sliceよりも扱いやすい。
ES2017以降であれば使用可能だがIEでは使用できない。
※コメントでのご指摘ありがとうございます。

````js
var hoge = 3;
console.log(String(hoge).padStart(3,"0"));
// 003
console.log(String(hoge).padStart(5,"0"));
// 00003
var hogeHoge = 345;
console.log(String(hogeHoge).padStart(2,"0"));
// 345
console.log(String(hogeHoge).padStart(3,"0"));
// 345

````