OmniAICreator/Qiita-1.07M huggingface dataset:
Db2を利用したJavaアプリケーションでERRORCODE=-4471が発生する。

# 環境

本記事を書くにあたって利用した主なソフトウェアのバージョンは次の通りです。

- javac 11.0.4
- openjdk version "11.0.4" 2019-07-16
- IBM DB2 Developer-C Edition 11.5 (Docker/wsl2)
- IBM Data Server Driver for JDBC and SQLJ 4.26.14

# 事象

以下のコードは`EMP`というテーブルからすべての`EMPNO`を取得し、標準出力に出力するというものです。

```java
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class Main {
    public static void main(String[] args) {
        String url = "jdbc:db2://<hostname>:<port>/<dbname>";
        String user = "<user>";
        String password = "<password>";

        try (Connection con = DriverManager.getConnection(url, user, password)) {
            con.setAutoCommit(false);

            PreparedStatement ps = con.prepareStatement("SELECT * FROM EMP");
            ResultSet rs = ps.executeQuery();

            while (rs.next()) {
                System.out.println(rs.getString("EMPNO"));
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}
```

このソースコードをコンパイルし、実行すると、標準出力にすべての`EMPNO`を出力したあと、次のような例外が発生します。

```
com.ibm.db2.jcc.am.SqlException: [jcc][t4][10251][10308][4.26.14] 接続でのトランザクション進行中に java.sql.Connection.close() が要求されました。
トランザクションはアクティブのままとなり、接続はクローズできません。 ERRORCODE=-4471, SQLSTATE=null
	at com.ibm.db2.jcc.am.b7.a(b7.java:794)
	at com.ibm.db2.jcc.am.b7.a(b7.java:66)
	at com.ibm.db2.jcc.am.b7.a(b7.java:133)
	at com.ibm.db2.jcc.am.Connection.checkForTransactionInProgress(Connection.java:1484)
	at com.ibm.db2.jcc.t4.b.checkForTransactionInProgress(b.java:7581)
	at com.ibm.db2.jcc.am.Connection.closeResourcesX(Connection.java:1507)
	at com.ibm.db2.jcc.am.Connection.closeX(Connection.java:1493)
	at com.ibm.db2.jcc.am.Connection.close(Connection.java:1470)
	at Main.main(Main.java:22)
```

__`java.sql.Connection.close()`は`try-catch-with-resource`が勝手に呼び出してくれているから理解できるとして、そもそも「トランザクションはアクティブのままとなり、接続はクローズできません」ってなんのこっちゃ???__ となるわけです。

# 原因

Db2ではDBコネクションをクローズする前に、`COMMIT`や`ROLLBACK`によってトランザクションを確定させる必要があります。`COMMIT`や`ROLLBACK`をするのは、`INSERT`や`DELETE`など、DBのデータに変更を加えたときだけで、データを参照するだけの`SELECT`では`COMMIT`や`ROLLBACK`に注意が回らない--という人も多いかと思いますが、少なくともDb2では`SELECT`の場合でもトランザクションを意識する必要があります。

前述のソースコードでは、自動コミットがオフの状態になっていました(`con.setAutoCommit(false)`)。自動コミット=trueの場合、`Connection::close`を呼び出すと、jdbcドライバが自動でコミットしてくれるのですが、自動コミット=falseだと、プログラマが明示的に`Connection::commit`や`Connection::rollback`を呼び出さないと、トランザクションが確定しません。つまり、前述のソースコードでは自動コミットをオフにしたために、トランザクションが確定しないまま、コネクションをクローズしようとし、その結果`ERRORCODE=-4471`が発生してしまったわけです。

# 対策

- `Connection::commit`もしくは`Connection::rollback`を呼び出して、トランザクションを明示的に完了させる
- 自動コミット=trueにして、トランザクションの完了をJDBC Driverに丸投げする。

対策はこんなもんでしょうか(´・ω・｀)
【docker-compose】「Unsupported config option for services.~~」の解決方法

docker-compose.ymlを作成し、railsアプリケーションを立ち上げようとしたとき、題名のようなエラーが発生しました。
また、このときのdocker-compose.ymlファイルは以下のようにしていました。

```言語:ターミナル 
 docker-compose run --rm app rails new . --force --database=mysql --skip-bundle
```

```言語:エラー内容
ERROR: The Compose file './docker-compose.yml' is invalid because:
Unsupported config option for services.app: 'context'
Unsupported config option for services.web: 'context'
Unsupported config option for services.volumes: 'db-data'
services.app.build contains an invalid type, it should be a string, or an object
services.web.build contains an invalid type, it should be a string, or an object
```

```言語:docker-compose.yml
version: '3'
services:
    app:
        build:
        context: .
        env_file:
            - ./environments/db.env
        command: bundle exec puma -C config/puma.rb
        volumes:
            - .:/webapp
            - public-data:/webapp/public
            - tmp-data:/webapp/tmp
            - log-data:/webapp/log
        depends_on:
            - db
    db:
        image: mysql:5.7
        env_file:
            - ./environments/db.env
        volumes:
            - db-data:/var/lib/mysql
    web:
        build:
        context: containers/nginx
        volumes:
            - public-data:/webapp/public
            - tmp-data:/webapp/tmp
        ports:
            - 80:80
        depends_on:
            - app
    volumes:
        public-data:
        tmp-data:
        log-data:
        db-data:
```

##解決方法
結論からいうと、**インテンドのやり方がまずかった**ようです。
エラーが出た箇所のインテンドのやり方が違うようで、意識せずにインテンドをずらしていたので心当たりがありました。
これを以下のように直すと、無事コードが走りました。

```言語:docker-compose.yml
version: '3'
services:
  app:
    build:
      context: .
    env_file:
      - ./environments/db.env
    command: bundle exec puma -C config/puma.rb
    volumes:
      - .:/webapp
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp
      - log-data:/webapp/log
    depends_on:
      - db
  db:
    image: mysql:5.7
    env_file:
      - ./environments/db.env
    volumes:
      - db-data:/var/lib/mysql
  web:
    build:
      context: containers/nginx
    volumes:
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp
    ports:
      - 80:80
    depends_on:
      - app
volumes:
  public-data:
  tmp-data:
  log-data:
  db-data:
```
M5StickCで気軽に作るWeb会議用MUTEボタン

多人数でWeb会議やっていると、変な声が入らないようにミュートしていることが多くなります。

すると、いざ会心のコメントを発言したとき限ってにミュート解除し忘れてるんですよね。
さらにミュートしたつもりでくしゃみしたら実はまる聞こえだったことも。。。

そんな悲劇を繰り返さないために、素早く押せる物理的な専用のMUTEボタンと、ぱっと見で確認できる「 ON AIR 」 「 MUTED...」 表示を作ってみました。

# 出来上がり

![on_air.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138680/c147a09f-3615-178d-2504-cf18b7ea08fa.png)

Zoomでミーティング中。音声が出ている時は赤色バックで「ON AIR」。

![muted.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138680/a3475dd6-778f-7875-bfe5-54fcf3e7e09d.png)

M5と書かれたところがボタンになっていて、押すとミュートのショートカットキーを送って、表示を「Muted...」に切替。

ZoomだけじゃなくてWebExでも利用できるようにモード切り替え機能も付けました。

# 活用した材料

利用したのは[M5StickC](https://docs.m5stack.com/#/en/core/m5stickc)。$10と破格なのにディスプレイもボタンも付いてるし、バッテリーも内臓。ESP32のBLEを利用してHIDにできると聞いていたのでやってみました。ハードウェアの工作なしにできちゃうのがお手軽。

ライブラリは公式の[M5StickC](https://github.com/T-vK/ESP32-BLE-Keyboard)を活用。ボタンのDebounceや画面に文字を中央揃えで表示するなど、M5StickCの豊富な機能を手軽に使えるように整備してくれているのは嬉しい。
さらに[ESP32-BLE-Keyboard](https://docs.m5stack.com/#/en/core/m5stickc)は、ESP32のBLEでキーボードとして使うのを便利にしてくれる。ありがたく利用させていただきます。

# ハマりどころ

ライブラリも充実しているから楽勝だろうと思ったのですが、いくつかハマりどころがありました。主にMacOS Catalinaがらみですが。。。

## UIFlow環境からArduino環境への切り換えにfirmwareの書き変えは特に不要

M5Stack社は初心者の教育用途に力を入れているようで、最近はUIFlowという環境が推奨されています。
私は以前少し触ってみたときに、FirmwareのバージョンとWeb版やローカル版のIDE環境のバージョンとが合わなかったりと、あまり完成度が高くない印象で終わってしまいました。

今回は、その時のUIFlowのFirmwareを書き込んだままのM5StickCを引き出しから出してきました。
さて、Arduino環境へ切り替えるにはどのFirmware(bootloader?)を書き込めばいいのか？

いろいろググったのですが、明確な記述がみつからず。。。

結論を言うとUIFlow用のFirmwareのままで大丈夫。
ただし私がその結論になかなか辿り着けなかったのは、次の問題にハマっていたから。。。

## MacOS Catalina での Arduinoスケッチ書き込み時に、GPIO0を強制的にGNDにしないといけない

ESP32に書き込みをする際には、GPIO0をGNDに繋いだ状態でリセットして書き込みモードにするなどのお作法が必要です。各種EPS32開発ボードはこの辺を自動でやってくれるように工夫されています。
M5StickCもSiLabsの（？）シリアル変換チップを上手く使ってやるようなのですが、どうやらMacOS Catalinaではこの仕組みが動かないらしい。

幸いGPIO0は拡張ソケットに出て来ているので、強制的にGNDに繋いであげればArduinoスケッチの書き込みに成功します。
![connect_gpio0_gnd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138680/5feec7ef-e746-ceb4-a0ca-3c0235048769.png)

## MacOS Catalina で BLE再接続ができない。Authenticationの方法を変更して対処

キーボードとして使うには”Bluetooth環境設定”で接続する必要があります。一度接続して上手く動いたと安心していたのですが、M5StickCのスケッチを修正して再接続しようとしたら上手く繋がらなくなってしまいました。
[ESP32-BLE-KeyboardのIssueに同様の現象があがっており](https://github.com/T-vK/ESP32-BLE-Keyboard/issues/7)、そこにあった対処法でなんとかなりました。

[PR](https://github.com/T-vK/ESP32-BLE-Keyboard/pull/28)出しておいたけど、どうなるかなぁ。

# コード

コードは[GitHub](https://github.com/aerialist/webconf_onair_mute/blob/master/webconf_onair_mute/webconf_onair_mute.ino)に上げておきました。

# 問題点

所詮ショートカットキーを送っているだけなので、実際にミュートになったかどうかのフィードバックを得ることはできません。
Muteボタンを押したときにZoomアプリがバックグランドになってたりするとダメです。
Zoomアプリをアクティブにするシステムショートカットを割り当てて、それも必ず送り込むようにすると良いのかも？？
Raspberry Pi 4 でAirsonicコンテナを動かす

# はじめに

こちらの記事に触発されて Raspi4で Airsonicをコンテナで動かしたいと思いましてやってみました。
[Raspberry Pi 4にAirsonicをインストールしてみた](https://raspida.com/airsonic-rpi4b)

# 環境

* Ubuntu Server 19.10 (aarch64)
    * `Linux ubuntu 5.3.0-1015-raspi2 #17-Ubuntu SMP Thu Dec 5 04:58:47 UTC 2019 aarch64 aarch64 aarch64 GNU/Linux`
    * `Docker version 19.03.2, build 6a30dfca03`
* Raspberry Pi 4
    * Revision : c03112

# Dockerfile docker-compose.yml

dockerに必要なものはgitにおいておきました。

https://github.com/jpwine/airsonic_docker_arm

```shell
$ git clone git@github.com:jpwine/airsonic_docker_arm.git
$ cd airsonic_docker_arm
$ mkdir -p ./data/{music,data,playlists,podcasts}
$ sudo docker-compose up -d
```

次回起動以降はコンテナが起動してから利用可能になるまで5分ほどかかったりします。

# おわりに

* NFSのvolumeを作成しコンテナ内にマウントして使っています
undefined method `halt_callback_chains_on_return_false=' for ActiveSupport:Module (NoMethodError)の解決方法

# Rails 5.1.0 から 5.2.0にアップデートしたらサーバーが立ち上がらない

Railsを5.1から5.2にアップデートして`docker-compose up -d`したら

`undefined method 'halt_callback_chains_on_return_false=' for ActiveSupport:Module (NoMethodError)`

というエラーが出ました。

# halt_callback_chains_on_return_false は　Rails5.2から廃止

もう３年も前のことですが、`halt_callback_chains_on_return_false`メソッドはDeprecateされていました。

[本家リポジトリ](https://github.com/rails/rails/commit/19fbbebb1665e482d76cae30166b46e74ceafe29
)

# コメントアウトで解決

```config/initializers/new_framework_defaults.rb

ActiveSupport.halt_callback_chains_on_return_false = false
```

をコメントアウトで解決します！
Atcoder ABC169 A-DをPythonで解く

4完。Eは20分ほど考えてまったくわからず。FはTLEでした。

# A Multiplication 1
コメント：特になし

```python
# ABC169 A Multiplication 1

a, b = map(int, input().split())

print(a*b)
```

# B Multiplication 2
コメント：はじめは、全て計算していたが、`TLE`になったため、途中で`break`させる方法に変更。

```python
# ABC169 B Multiplication 2

from collections import deque

n = int(input())

a_list = [int(x) for x in input().split()]

if min(a_list) == 0:
    print("0")
else:
    a_dq = deque(a_list)
    ans = 1
    for i in range(n):
        ans *= a_dq.popleft()
        if ans > 10**18:
            break

    if ans > 10**18:
        print("-1")
    else:
        print(ans)
```

# C Multiplication 3
コメント：予想通りだったが、`float`でそのまま計算すると、`WA`になったのでいったん整数で計算する方法に変更。

```python
# ABC169 C Multiplication 3

a, b = map(lambda x: int(x.replace(".","")), input().split())

print(a*b//100)
```

# D Div Game
コメント：素因数分解するだけ。

```python
# ABC169 D Div Game

n = int(input())

def factorization(n):
    arr = []
    if n == 1:
        return arr
    temp = n
    for i in range(2, int(-(-n**0.5//1))+1):
        if temp%i==0:
            cnt=0
            while temp%i==0:
                cnt+=1
                temp //= i
            arr.append([i, cnt])

    if temp!=1:
        arr.append([temp, 1])

    if arr==[]:
        arr.append([n, 1])

    return arr

f_list = factorization(n)
ans = 0

for i in range(len(f_list)):
    _tmp = f_list[i][1]
    j = 1
    while _tmp >= 0:
        _tmp -= j
        j += 1
    ans += j-2

print(ans)
```

# F Knapsack for All Subsets(TLE)
コメント：$S$を構成する要素数とパターン数を保持したかったので、`dict型`を使ったが`TLE`になった。

```python
# ABC169 F Knapsack for All Subsets

from collections import deque
from collections import Counter

def merge_dict_add_values(d1, d2):
    return dict(Counter(d1) + Counter(d2))

n, s = map(int, input().split())
a_dq = deque([int(x) for x in input().split()])

dp = [[{0:0}] * (s+1) for _ in range(n+1)]
dp[0][0] = {0:1}

for i in range(n):
    _tmp = a_dq.popleft()
    for j in range(s+1):
        if j-_tmp < 0:
            dp[i+1][j] = dp[i][j]
        else:
            _tmp_d = dp[i][j-_tmp]
            _dict = dict()
            for k in _tmp_d.keys():
                _dict[k+1] = _tmp_d[k]
            dp[i+1][j] = merge_dict_add_values(dp[i][j],_dict)

# print(dp[n][s])
ans = 0
for k in dp[n][s].keys():
    v = dp[n][s][k]
    ans += (2**(n-k)) * v
    
print(ans%998244353)
```
１行で説明するビッグデータOSS

# はじめに
ビッグデータ関係の OSS を触ることになりそうなのですが、似ていて何が何だかよく分からないので、流行り(？)の１行で説明してみました。（クラウドサービスは対象外）

## ビッグデータOSS

|OSS|説明|
|:--|:--|
|[Apache Apex](https://apex.apache.org/)|DAG に処理を記述する YARN ベースのストリーミング、バッチ処理エンジン|
|[Apache Beam](https://beam.apache.org/)|バッチ、ストリーミングデータの並列処理パイプラインが作れるプログラミングモデル|
|[Apache Cassandra](https://cassandra.apache.org/)|Facebook が作った NoSQL 分散データベース管理システム|
|[Apache Flink](https://flink.apache.org/)|YARN 上で動くバッチ処理もできるリアルタイムストリーミング処理プラットフォーム|
|[Apache Hadoop](https://hadoop.apache.org/)|Java で作られた分散ファイルシステム HDFS と並列分散処理フレームワーク MapReduce が使えるフレームワーク|
|[Apache Hbase](https://hbase.apache.org/)|Google BigTable のような Hadoop の分散ファイルシステム HDFS 上で動作するNosqlデータベース|
|[Apache Hive](https://hive.apache.org/index.html)|SQLっぽい HiveQL が使える Hadoop 上で動くデータベース管理システム|
|[Apache Hudi](https://hudi.apache.org/)|Uber が作った各種 DFS からビッグデータ分析データセットを取り込めるストレージ管理システム|
|[Apache Ignite](https://ignite.apache.org/)|ビッグデータをインメモリで処理可能なスケーラブル、フォールトトレラント分散インメモリコンピューティングプラットフォーム|
|[Apache Samza](http://samza.apache.org/)|リアルタイムでストリーミングを処理できる分散非同期処理フレームワーク|
|[Apache Storm](https://storm.apache.org/)|分散ほぼリアルタイム高速分析プラットフォーム|
|[Apache Spark](https://spark.apache.org/)|Scala、Java、Python でビッグデータのスケーラブルな分散処理を作れるフレームワーク|
|[Apache Spark Streaming](https://spark.apache.org/streaming/)|Spark を拡張しマイクロバッチによるスケーラブルなリアルタイムストリーミング処理が可能になるエンジン|
|[Presto](https://prestosql.io/)|Facebook が開発した Hive と同じような大規模データ分析クエリ実行用分散型 SQL クエリエンジン|
|[YARN](https://ja.wikipedia.org/wiki/Apache_Hadoop#Yet_Another_Resource_Negotiator_(YARN))|Hadoop でアプリケーションの作成を簡単にするクラスタリソース管理フレームワーク|

# 終わりに
まだフワッとしてます。
随時修正、不足があれば更新予定です。

# 参考(ありがとうございます)
https://qiita.com/tanish-kr/items/ca330cd47ffe35aff43a
2020/05/31 プログラミング(フロントエンド)学習1日目 メモ

# 本日の学習範囲
### ドットインストール
・HTML/CSSの学習環境を整えよう [macOS編] #01〜#05
・はじめてのHTML #01〜#07
（学習時間：2時間）
## 環境構築
ドットインストールで推奨していた
・Google Chrome（ブラウザ）
・Visual Studio Code（コードエディター）
・Ricty Diminished(フォント)
を準備した
### Visual Studio Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Microsoftが提供しているコードエディター
Windows以外でも動作する
### Ricty Diminished
https://rictyfonts.github.io/diminished
プログラミング用フォント
## HTML学習メモ
### HTML
Hyper Text Markup Languageの略
Webページ作成に使用するマークアップ言語
### マークアップ
文章をタグで囲むことで、文章を構造化すること
### 要素
開始タグと終了タグを用いて構成される全体
### 属性
要素に対して性質を与える
### index.html
サイトのトップページ
### ブラウザで確認する方法
エディターのタブをブラウザのタブにドラッグ&ドロップする
### h1タグ
`<h1>文字</h1>`
最上位の見出しを記述するタグ
h…headingの略、h1〜h6の6段階
### pタグ
`<p>文字</p>`
paragraphの略
一つの段落を記述する
### imgタグ
`<img src="URL">`
画像を表示する
### src属性
`<img src="URL">`
Sourceの略
画像のあるURLを指定する
### width属性
`<img src="URL" width="数値">`
画像の幅をピクセル単位で指定する
### height属性
`<img src="URL" height="数値">`
画像の高さをピクセル単位で指定する
### alt属性
`<img src="URL" alt="文字">`
画像が表示されない場合の代替テキストを指定する
### DOCTYPE宣言
`<!DOCTYPE html>`
文書の先頭に記述する、文書がHTMLで作成されていることを示すための宣言
### htmlタグ
`<html></html>`
HTML文書であることを示すルート要素
### lang属性
`<html lang="言語"></html>`
languageの略
### headタグ
`<head"></head>`
文章のヘッダー部分を指定する
### bodyタグ
`<body></body>`
ブラウザ画面に表示する内容を指定する
### 字下げ(インデント)
コードを読みやすくするため、文章の先頭に一文字分空白を入れること
字下げしたい部分を選択して[tab]を押すと、その部分が字下げできる
### metaタグ
`<meta 属性>`
head要素内に記述し、文書に関する情報を指定、 ブラウザや検索エンジンに知らせる
### charset属性
`<meta charset="文字コード">`
head要素内に記述し、文書の文字コードを指定する
### UTF-8
世界的にポビュラーな文字コード
### titleタグ
`<title>文字</title>`
head要素内に記述し、文章のタイトルを表示する
ブラウザのタブや検索エンジンに表示される
### favicon
ブラウザのタブに表示されるアイコン
### linkタグ
`<link 属性>`
head要素内に記述し、そのページと関係する他のページを関連付ける
### rel属性
`<link rel="">`
relationshipの略
リンク先の位置付けを示す
### href属性
`<link href="URL">`
Hypertext Referenceの略。
リンク先を示す
### name属性
`<meta name="">`
要素の名前を指定する
### content属性
`<meta name="" content="">`
メタデータの内容を指定する
name="description"の場合、文書の概要を指定し、検索エンジンに表示される
[Unity] Scale With Screen Size / Expand のCanvasのUIと同じ大きさに見えるようにObjectをScaleさせる

```csharp
var referenceWidth = 1334;
var referenceHeight = 750;

var cam = Camera.main;

var resolutionAspect = (float)referenceWidth / referenceHeight;
var camAspect = cam.aspect;

var fov = cam.fieldOfView * Mathf.Deg2Rad * 0.5f;
if (resolutionAspect > camAspect)
{
    var hTan = Mathf.Tan(fov) / (1 / camAspect * resolutionAspect);
    fov = Mathf.Atan(hTan);
}
 
var distance = Vector3.Distance(transform.position, cam.transform.position);     
transform.localScale = Mathf.Sin(fov) * distance * Vector3.one;
```
Androidで参考にしたサイトのメモ

# これは何？
ホントにメモ程度です。期待しないでください。

# UI
## RecyclerView
[【Kotlin基礎】RecyclerViewで項目を一覧表示させる方法を解説 | Hirauchi Genta](https://hirauchi-genta.com/kotlin-recyclerview/)

### 注意点
- 2つ目のコードについてタブに記載されているファイル名が違う
  - CustomAdapter.kt → MainActicity.kt
  - list_item.xml → main_activity.xml (MainActivityのXML)
 
- RecyclerViewへのCastが必要

```kotlin
(正)
// RecyclerViewの取得
val recyclerView = findViewById<RecyclerView>(R.id.recycler_view) as RecyclerView

(誤)
// RecyclerViewの取得
val recyclerView = findViewById<RecyclerView>(R.id.recycler_view)
```
【python】pandas で to_csvするときのフォーマット

何度も同じことをググって使っているので、自分なりにメモします。pandas にデータを格納してto_csv としてファイルに保存するときに使います。公開するようのきれいな形式にしたい場合、桁数をそろえたいときに使います。

### float のフォーマットを整える

- float 全体に指定するには、to_csv の引数に `float_format="%10.4f"`のように設定できる
- `round()` を使えます。
  - Series に対して整数を引数にし、小数点や整数の桁数(百の位なら-2)で丸めることができる。
  - DataFrame に `round` を用いる場合は、引数に辞書をとることで、複数の列に対して独立した設定をできる。
- 各列ごとに形式を指定するには、map(lambda x: '{形式}'.format(x)) で指定できる。小数点以下１桁なら`{0:.1f}`、指数表記にしたければ`{:.6e}`のようにできる。

```Python
import pandas as pd
df = pd.read_csv("latlon.csv")
df['val'] = df['val'].map(lambda x: '{0:.1f}'.format(x))
df.to_csv("out.csv", index=False, header=True, float_format='%11.6f')
```

で、out.csv は

```
year,month,day,lat,lon,val
2012,6,16,80.862745,-39.834254,0.0
2012,6,16,80.862745,-39.502762,0.1
```

のように出力されます。同内容は `round`を用いて、

```Python
df = df.round({"lat":7, "lon":7, "val":1})
```

- 参考にさせていただきました。
  - https://stackoverflow.com/questions/20003290/output-different-precision-by-column-with-pandas-dataframe-to-csv
  - https://note.nkmk.me/python-pandas-round-decimal/
svelte-glの環境構築

## 環境構築

とりあえずsvelteGLの[デモページ](https://svelte.dev/repl/8d6d139a3d634c2fb1e1ff107c123dd5?version=3.21.0)の内容がローカルで動くように構築するまでにrollupの設定が必要だったので手順をメモ。


### STEP1 svelteの環境を作る
`npx degit sveltejs/template プロジェクト名`でテンプレートの環境が作れる

### STEP2 svelteGLを入れる
`npm install @sveltejs/gl`でsvelteglを入れる。
この段階で、npm run devするとmjsファイルとglslファイルが読み込めないというエラーが出るようになる。

### STEP3 エラーを解消する
上記のエラーを解消するために、`rollup.config.js`にそれらを読めるようにする設定を加える。

1. 以下のプラグインを入れる。
`npm install --save-dev rollup-plugin-babel@latest`
`npm install --save-dev rollup-plugin-glslify`

2. configファイルで読み込むように追加
```javascript=
import babel from 'rollup-plugin-babel';
import glslify from 'rollup-plugin-glslify';
```

3. pluginsの配列のsvelteの下に以下を追加
```javascript=
babel({
    exclude: 'node_modules/**'
  }),
glslify(),
```


## 参考

### svelte
- [Svelteで始める頑張らないフロントエンド生活 前編](https://sbfl.net/blog/2019/12/04/svelte-frontend-1/)

### rollup.js
- [JavaScriptの新しいモジュールバンドラ rollup.js とは](https://aloerina01.github.io/blog/2017-01-10-1)

### 設定プラグイン
- [rollup/rollup-plugin-babel](https://github.com/rollup/rollup-plugin-babel)
- [rollup-plugin-glslify](https://github.com/glslify/rollup-plugin-glslify)
jQuery~上級編~

# プログラミングの勉強日記
2020年5月31日　Progate Lv.80

#####jQueryにおける関数
　共通部分を関数化することができる。同じ処理（全く同じコード）を関数としてまとめる。

```js
$('.index-btn').click(function(){
 var slideIndex=...                 //共通部分の処理
});
$('.change-btn').click(function(){
 var slideIndex=...                 //共通部分の処理
});
```
　この共通部分の処理を関数としてまとめる。定義した関数をそれぞれのclickイベントの中で呼び出す。関数を呼び出すときはその関数名を記述するだけでいい。

```js
$('.change-btn').click(function(){
 toggleChangeBtn();                 //関数の呼び出し
});

function toggleChangeBtn(){
  var slideInex=...
}
```

#####length
　jQueryオブジェクトの要素の個数を取得できる。

```html
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>jQuery</li>
</ul>
```

```js
$('li').length; //結果は3
```

#####textメソッド
　前回紹介したように引数に指定した文字列を要素に「セット」するメソッドでもある。（https://qiita.com/mzmz__02/items/c7ebc268325d935436f9）
それだけでなく、<font color=blue>textメソッドは引数を指定せずに用いると要素内の文字列を「ゲット」する。</font>

```html
<h1>Hello</h1>
<p>program</p>
```

〇文字列を書きかえる場合
  `$('h1').text('こんにちは');`　h1要素内を引数の文字列で変更。
　
〇文字列を取得する場合  
  `var text=$('p').text();`　p要素ないの文字列「program」を取得する

#####htmlメソッドとcssメソッド
　こちらもtextメソッド同様にゲットして使うことができる。

```html
<div id="main">
  <h1>Hello</h1>
</div>
```
```css
h1{
  font-size:28px;
}
```

〇HTMLを習得する場合
　`var html=$('main').html();`　「#main」内のHTML(`<h1>Hello</h1>`)を取得する
〇CSSプロパティを取得する場合
  `var fontSize=$('h1').css('font-size');`　h1要素内のフォントサイズ(28px)を取得する

#####attrメソッド
　HTMLの属性はattrメソッドを用いて「ゲット」と「セット」ができる。<font color=blue>第一引数に属性名、第二引数にその属性値を指定することで属性をセットできる。第二引数を指定しないとその造成の値を取得できる。</font>

```html
<h1>Hello</h1>
<a href="https://aiueo.com">リンク</a>
```

〇属性をセットする場合
  `&('h1').attr('id','title');`　h1要素にtitleにidをセット
〇属性の値を取得する場合
　`var url=$('a').attr('href');`　a要素のhref属性の値(`https://aiuo.com`)を取得する。
PythonでABC169を解く

### はじめに
A~Dの四完でした。

### A問題
[問題](https://atcoder.jp/contests/abc169/tasks/abc169_a)

**考えたこと**
やるだけ

```python
a, b = map(int,input().split())
print(a*b)
```


### B問題
[問題](https://atcoder.jp/contests/abc169/tasks/abc169_b)

**考えたこと**
0が入ってると積は0なのでsortで小さい順に並べてやる。

```python
n = int(input())
a = list(map(int,input().split()))

a.sort()
ans = 1
for i in range(n):
    ans *= a[i]
    if ans > 10**18:
        print(-1)
        quit()

print(ans)
```


### C問題
[問題](https://atcoder.jp/contests/abc169/tasks/abc169_c)

**考えたこと**
はい。こいつのせいでパフォが落ちました。くそ。
精度が不安だったのでdecimal使いました。「decimalの切り捨てはquantize使おうな! 約束だぞ!!!!」

```python
from decimal import *
a, b = input().split()

a = Decimal(a)
b = Decimal(b)
ans = a * b
ans = ans.quantize(Decimal(0),rounding=ROUND_FLOOR)
print(ans)
```


### D問題
[問題](https://atcoder.jp/contests/abc169/tasks/abc169_d)

**考えたこと**
とりあえず$N$を素因数分解します。
サンプルケース1の場合を考えます。
24を素因数分解すると$2^3*3^1$となります。このとき行える操作の最大数は$2^1,2^2,3^1$です。$2^3$はNの約数ではないので、できません。$3^2$も同様です。
このことから、$N$の素因数の指数部分を超えないように足していけばいいことが分かります。(例：24だと、2の数は3個なので1+2まで、3の数は1個なので1)。あとは、それぞれの素因数ごとに何回使えるかを計算するだけ。

```python
n = int(input())

def factorization(n):
    arr = []
    temp = n
    for i in range(2, int(-(-n**0.5//1))+1):
        if temp%i==0:
            cnt=0
            while temp%i==0:
                cnt+=1
                temp //= i
            arr.append([i, cnt])

    if temp!=1:
        arr.append([temp, 1])

    if arr==[]:
        arr.append([n, 1])

    return arr

if n == 1:
    print(0)
    quit()
f = factorization(n)
ans = 0
c = len(f)
for i in range(c):
    s = 0
    g = f[i][1]
    if g == 2:
        ans += 1
    else:
        for j in range(g):
            s += j + 1
            f[i][1] -= j+1
            if s > g:
                break
            ans += 1
print(ans)
```


### まとめ
最近のCに嫌われているtax_free。こういう精度問題が出たときに、脳死で提出しまくる癖を直したい。
ではまた、おやすみなさい。
yarn実行時にwarning: No license fieldが出ていたのでlicenseをセットした

yarn を走らせると、license を正しくセットしていない場合、

```shell
warning package.json: No license field
```

と表示されます。
エラー名の通り、package.json 内に license がセットされていないためです。
license をセットしましょう。

```json
{
  "license": "SPDXで指定されているID"
}
```

SPDX の ID なんて知らないですよね。

[SPDX License List | Software Package Data Exchange (SPDX)](https://spdx.org/licenses/)に Identifier という項目で記載されているので、それを上記 json の license で指定すれば OK です。

## いや、俺は license 指定なんてしたくないんやが

"UNLICENSED"を入れれば良いみたい。

## SPDX とはなんぞや？

ライセンス群をまとめるための、オープンな標準規格のことみたいですね。
なんかライセンスがいっぱい定義されているんだなーぐらいの認識で良いと思います。

> An open standard for communicating software bill of material information, including components, licenses, copyrights, and security references. SPDX reduces redundant work by providing a common format for companies and communities to share important data, thereby streamlining and improving compliance.
>https://spdx.dev/

## 参考

- [Home - Software Package Data Exchange (SPDX)](https://spdx.dev/)
- [プライベートプロダクトの package.json の license フィールドには &quot;license: UNLICENSED&quot; と指定すればいいらしい - モヒカンメモ](https://blog.pinkumohikan.com/entry/set-unlicensed-to-license-field-when-private-product)
Python--Pygalの第一歩

# Pygal


## 機能概要
グラフなどでデータを可視化する際、このライブラリを使用して、ベクター画像(SVG)ファイルを生成することにより、すべてのデバイス上に自動的に調整し、きれい表示することができる。

## インストール
```
pip install pygal
```

## 参考
* オフィシャルサイト: http://www.pygal.org
Google Colaboratory で Python を勉強する

# 機械学習といえば Python

少し前から、AIや機械学習に注目が集まっています。エンジニアとしてたしなみ程度でも勉強しておく必要があると思い、これから基礎的なことを勉強しようと思いました。

まずは、勉強するにあたって、以下のページを参考にしました。

 - [【保存版・初心者向け】独学でAIエンジニアになりたい人向けのオススメの勉強方法](https://qiita.com/tani_AI_Academy/items/4da02cb056646ba43b9d)


やはり機械学習といえばPythonというのが一般的みたいなので、まずはPythonから勉強しようと思います。

## Pythonを学ぶための準備

Pythonの学習、ひいてはその先の機械学習をを学ぶために、環境構築に手間取ると学習のモチベーションが下がってしまう可能性があります。あくまで学習のためなので、手早く構築したいと考えていたところ、Googleが提供しているColaboratory（略称: Colab）を使用するとWebブラウザを介してPythonを実行できるようです。さらに、機械学習のための構成が組まれていてGPUも無料で利用できるみたいです。

- [Google Colabの知っておくべき使い方 – Google Colaboratoryのメリット・デメリットや基本操作のまとめ](https://www.codexa.net/how-to-use-google-colaboratory/)

## Google Colaboratory の使用法

### Googleアカウントの作成・ログイン

まずは [Google](https://www.google.com/) にアカウントを作ります。

![0001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/9fda9ab0-7625-c59f-2a20-9924e32505a0.jpeg)

[Google](https://www.google.com/)のサイトにアクセスして、右上の「ログイン」を押します。

![0002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/442309bd-4c66-696b-c8ab-8c855a80d50e.jpeg)

ログイン画面が出るので、左下の「アカウントを作成」を押します。その後、必要な情報を登録してアカウントを作成します。

その後、登録したアカウントでGoogleのサイトにログインします。

### Googleドライブにフォルダを作成

Google Colaboratory用にGoogleドライブにフォルダを作成します。

### Googleドライブのフォルダ上にColaboratoryアプリを追加

![0003.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/15071722-ef22-94af-e9bd-c98791950a48.jpeg)

作成したフォルダを右クリックして「アプリで開く」-「アプリを追加」を選択します。

![0004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/696145b3-3f82-1f2e-1b29-2c8a971c4cad.jpeg)

ダイアログが出てきて様々なアプリを追加できますが、ダイアログ上部の検索テキストフィールドに「Colaboratory」と入力し、出てきたアプリ「Colaboratory」を選択します。


![0005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/aed81a95-4e0f-2bec-f48e-6845ce12aab5.jpeg)

そして、インストールボタンを押してインストールします。

![0006.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/9d6fe6f5-cf62-8696-8d06-14501e561d4a.jpeg)

利用規約やプライバシーポリシーを同意し「続行」ボタンを押します。

![0007.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/8d25ab96-acad-8836-f36d-a77c3001c512.jpeg)

すると、すとインストールが完了します。

### Pythonの実行

![0008.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/3e41797f-738d-0492-e26d-daf0ec007b68.jpeg)

先ほど作成したGoogleドライブ上のフォルダを右クリックして「その他」-「Google Corablratory」を選択します。

![0009.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/8e6939ea-eadd-a99d-e90b-da1d3535268f.jpeg)

Pythonのコードを入力する画面が出ます。

![0010.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/829c8204-9803-444e-f16d-6cce17d4e826.jpeg)

テキストフィールドにPythonのコードを入力して、左側にある再生ボタン「▶︎」を押すと入力したPythonのコードが実行されます。

![0011.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/3abcb37f-97e2-739e-cd8f-2b20a28fb5b8.jpeg)


これでPythonの実行環境を手に入れることができました。今後は、Pythonのコードを実行しながら勉強して行きたいと思います。


最後まで読んでいただいた方、有難うございました。
ABC169 A,B,C問題解説(Python)

#ABC169 A,B,C問題解説

どうもs_y1127です。
本日行われたABC169のPythonによる解説を行いたいと思います。

(20/6/1 11:55追記)
乗算の表記を^で統一しました。

##A.Multiplication 1
###問題文
A×Bを求めてください。

###制約
1≤A≤100
1≤B≤100
入力は全て整数である。

###コード
```python:Main.py
A,B = map(int,input().split())
 
print(A*B)
```

簡単ですね。
入力したものを掛けるだけ。

##B.Multiplication 2
案外誤答が多かったB問題

###問題文
N個の整数 
A1,...,AN
が与えられます。

A1×...×AN
を求めてください。

ただし、結果が 
10^18
を超える場合は、代わりに -1 を出力してください。

###制約
2≤N≤10^5
0≤Ai≤10^18
入力は全て整数
である。

###コード
```python:Main.py
N = int(input())
A = list(map(int,input().split()))
ans = 1
 
if 0 in A:
  ans = 0
  N = 0
  
for i in range(N):
  ans *= A[i]
  if ans > 10**18:
    ans = -1
    break
    
print(ans)
```

あまりよろしいコードではないですが、、、
まず入力値の中に0があれば0でansを0にします。
また、Nも0に変更。
後々のfor文のRangeは配列の個数をlenで取らずにNで取るように設定し、
0が入ってなければ入力値のまま、0を代入していればfor文を実行せずに終了という想定です。

for文の中では全部掛け合わせるのではなく、あくまで10**18内であるかどうかを確認してfor文を回し続けるかどうか決めています。
まぁ10**18超えたら-1で出力するっていう制約があるのでそれ以上回す必要ないですしね、、、

(20/6/1 12:06追記)
コメントいただいたコードの方が見やすいと感じましたのでそちらを模範解答として掲載いたします。
ありがとうございます🙇‍♂️

```python:Main.py
N = int(input())
A = list(map(int,input().split()))
ans = 1

if 0 in A:
  print(0)
  exit()

for i in range(N):
  ans *= A[i]
  if ans > 10**18:
    print(-1)
    break
else:
    print(ans)
```

##C.Multiplication 3

###問題文
A×B
の小数点以下を切り捨て、結果を整数として出力してください。

###制約
0≤A≤10**15
0≤B<10
Aは整数
Bは小数第2位まで与えられる

###AC例1(正攻法)
```python:main.py
#ACになったコード
a, b = input().split()
a = int(a)
b = round(100*float(b))
print(a*b//100)
```

###AC例2(参考用)
上のは正攻法ですが、天才だなと思ったものも追記します。

```python:main.py
#ACになったコード（その2）
a, b = input().split()
a = int(a)
b = int(b.replace('.',''))
print(a*b//100)
```

小数点取ることでこの制約では１つ目のコードと同じように100倍したことになる。
こういう発想を持ちたい！w

###反面教師用
ちなみに私ですが、、、

```python:main.py
X = list(input().split())
A = int(X[0])
B = float(X[1])
 
ans = A * B
print(int(ans))
```

おそらくbの値は100倍にしないとダメなケースがあったんでしょうね、、、
うん、また頑張ろう、、、

(20/6/1 11:55追記)
単純に100倍にするだけでは誤差をなくすことはできないとのこと。
Pythonの場合選択肢としては
・Decimalにする
・1000倍にする
・Replaceで小数点を消すことによる１００倍
・100倍してroundで丸め込む
でしょうか。
誤っていたら指摘いただけると幸いです。

(20/6/2 21:39追記)
上の中でテストケース的にたまたま通ってしまう物もあるようです。
浮動小数点のに関しては以下の投稿が詳細な説明をしているので確認してみてください。

[浮動小数点数オタクが AtCoder Beginner Contest 169 のC問題をガチで解説してみる](https://qiita.com/mod_poppo/items/910b5fb9303baf864bf7)

##最後に

精進します。
かんたんLaravel + Vue.jsでVueUIを使用してログイン、登録の実装

LaravelにはwebpackのようなLaravel-Mixがあり、それを使うことによりLaravel上で
Vue.jsが実装できます。
今回は、いくつかのコマンドを打つことでかんたんにVueUIを使用してログイン、登録の実装します。

ターミナルにコマンドを打ち込んでいきます。

```terminal
  #　laravelプロジェクト作成
　laravel new 「プロジェクト名」
```

```terminal
 #作成したプロジェクトに移動
 cd 「プロジェクト名」
```


npmは、Node Package Managerの略でNode.jsのパッケージ（Package)を管理する（Manager）ツールです。
 インストール方法は、以下のgithubを参考してください。
https://github.com/npm/cli
ダウンロードは、以下のリンク
https://nodejs.org/en/download/

```terminal
#npmをインストール
npm install
```


```terminal
#一度コンパイルをします。
npm run dev
```

問題がなければVueのログイン・php登録UIをインストールします。
2回コマンドを入力しなければなりません。

```terminal
＃１　インストールに時間がかかります。
composer require laravel/ui
＃2　１が終了後
php artisan ui  vue --auth
```


最後に

```terminal
npm install && npm run dev
```

サーバーを立ち上げて確認します。

```terminal
php artisan serve
```

完成！！！

<img width="1001" alt="スクリーンショット 2020-05-31 22.23.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636249/2240ab00-56a8-d104-bbfe-f8a9d84a9cad.png">
<img width="819" alt="スクリーンショット 2020-05-31 22.40.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636249/b4d7615e-a890-a04a-8660-02a7635cb651.png">
<img width="805" alt="スクリーンショット 2020-05-31 22.40.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636249/e85e6f9e-07f8-3d6a-472e-3e172f516ec7.png">



以下のパスにExampleComponent.vueもインストールされてます。
resources/js/components/ExampleComponent.vue
これの表示の仕方は、次回します。

bootsrapも使えるように設定されており、bootsrapを使うためにJquery,Popper.jsも入れられています。
package.jsonを確認するとわかります。
<img width="481" alt="スクリーンショット 2020-05-31 22.37.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636249/27211e38-7656-b203-c75d-0af6470d87d9.png">


PHPをすぐに始めることができるMAMP(Mac), XAMPP(Windows)があります。

MAMP
https://www.mamp.info/en/mac/
XAMPP 
https://www.mamp.info/en/mac/


laravelの環境構築は、すごく大変でした。。。
MacOS違いだけでもやり方が違ったり。

僕は、Udemyを利用して環境構築をしました。
【2日でできる】はじめての PHP 7 x Laravel 6 入門
https://www.udemy.com/course/php7study/

少しでも参考になれば幸いです。
Swift StoryboardでScroll ViewとStack Viewを組み合わせて使う

# はじめに
StoryboardにてScroll ViewとStack Viewを組み合わせて、
Stack Viewに応じてスクロールする画面を作成する。

# 環境
- Xcode 11.5
- Swift 5

# 実施手順

## 1. Scroll Viewを配置する
<img width="869" alt="ScrollAndStack1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412123/093dd850-22d9-8881-3fce-b4a9a3d979c0.png">

## 2. Scroll Viewに制約を追加する
<img width="1003" alt="ScrollAndStack2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412123/a50c7d24-118f-2e91-4e54-f0bced67e013.png">


## 3. Stack Viewを追加する
<img width="870" alt="ScrollAndStack3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412123/e7ae2438-7f1e-3b5e-18e2-d481ff295f4c.png">

## 4. Stack Viewに制約を追加する①
<img width="1059" alt="ScrollAndStack4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412123/f4249c60-7a22-5338-23f8-f870d3204bf5.png">


## 5. Stack Viewに制約を追加する②
<img width="869" alt="ScrollAndStack5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412123/0232aafd-a12b-3236-37ab-dbfd53ce6b8a.png">

## 6. Stack Viewにアイテムを追加する
<img width="869" alt="ScrollAndStack6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412123/4db0e989-5766-c33d-d432-f2f5341f1248.png">
Javaアプリケーションの状態を監視ツールを入れずに確認してみる

#### 概要

jstackはJDKに付属するコマンドです。javaを起動してるマシンであれば特別監視ツールなんかを入れなくても簡単にプロセスの状態を取得することができます。

このツールは、コマンドラインコンソールにスレッドダンプを表示します。JavaのPIDさえわかれば使用することができる。性能が出ない時やデッドロックのような現象が発生した際はこのツールを使ってスレッドの状態を取得し調査に使うことができる。

#### Usage

``` console
$ jstack -l <pid>
```

出力結果はthread単位のスタックトレースを確認することができる。

```
"Thread-0" #12 prio=5 os_prio=0 cpu=0.00ms elapsed=496.25s tid=0x00007f6a741f1800 nid=0x1a5 waiting on condition  [0x00007f6a17a9f000]
   java.lang.Thread.State: TIMED_WAITING (sleeping)
        at java.lang.Thread.sleep(java.base@11.0.4/Native Method)
        at Server.sleepForever(Server.java:20)
        at Server.lambda$0(Server.java:9)
        at Server$$Lambda$1/0x0000000840060840.run(Unknown Source)
        at java.lang.Thread.run(java.base@11.0.4/Thread.java:834)

"Thread-1" #13 prio=5 os_prio=0 cpu=0.00ms elapsed=496.25s tid=0x00007f6a741f3800 nid=0x1a6 waiting on condition  [0x00007f6a1798f000]
   java.lang.Thread.State: TIMED_WAITING (sleeping)
        at java.lang.Thread.sleep(java.base@11.0.4/Native Method)
        at Server.sleepForever(Server.java:20)
        at Server.lambda$0(Server.java:9)
        at Server$$Lambda$1/0x0000000840060840.run(Unknown Source)
        at java.lang.Thread.run(java.base@11.0.4/Thread.java:834)

"Thread-2" #14 prio=5 os_prio=0 cpu=0.00ms elapsed=496.25s tid=0x00007f6a741f5000 nid=0x1a7 waiting on condition  [0x00007f6a1787f000]
   java.lang.Thread.State: TIMED_WAITING (sleeping)
        at java.lang.Thread.sleep(java.base@11.0.4/Native Method)
        at Server.sleepForever(Server.java:20)
        at Server.lambda$0(Server.java:9)
        at Server$$Lambda$1/0x0000000840060840.run(Unknown Source)
        at java.lang.Thread.run(java.base@11.0.4/Thread.java:834)
```

例えばjavaがマルチスレッドで動いてるケースでどこかのスレッドが特にCPU使用率やメモリをたくさん食ってるといった現象が起きた際は以下のように特定することができる。

① プロセスからリソースを食ってるプロセスを特定する。

``` console
$ top -H -b -n 1 -p ${javaのpid}
```

上記のコマンドからリソースを食ってるPIDを取得する

② PIDを16進数へ変換し、jstackの結果からgrep
③ nid と 16進数が一致するトレースがリソースを食ってる処理なのでそこから追っていく

といった流れで調査することが可能。
Bitbucketのリポジトリをバックアップする

Bitbucket の API でリポジトリの情報集めてバックアップします。

主な目的は Mercurial 廃止に伴うリポジトリ削除への対応ですが、Git リポジトリにも対応しています。

※ 当初、Mercurial 廃止は2020年5月31日が期限でしたが、情勢を鑑みて1カ月延期されました。

* [Sunsetting Mercurial support in Bitbucket - Bitbucket](https://bitbucket.org/blog/sunsetting-mercurial-support-in-bitbucket)

この記事ではリポジトリ移行の話題は扱いません。以下の記事などを参考にしてください。

* [BitbucketのMercurialリポジトリをGitHubのGitリポジトリに移動させた話](https://qiita.com/wa2c/items/26e55fbdbeaa0b311db4)
* 変換スクリプト: <https://twitter.com/k_sugimoto/status/1270466386700034048>

# API

Bitbucket のリポジトリなどの情報は API で取得できます。

* [REST APIs - Atlassian Documentation](https://confluence.atlassian.com/bitbucket/rest-apis-222724129.html)

以下の記事を参考にしました。

* [APIでBitbucketにアクセスしてみる](https://qiita.com/ksato9700/items/bbf89abb7acbac717267)
* [[Python] 3系でBasic認証付きのHTTPリクエストを発行する（urllib.request利用） - YoheiM .NET](https://www.yoheim.net/blog.php?q=20181003)

# スクリプト

Python で情報収集用のスクリプトを書きました。

* [[py] Get repository informations at Bitbucket — Bitbucket](https://bitbucket.org/7shi/workspace/snippets/5LM6bK)

プライベートリポジトリの情報を取得するためユーザー名とパスワードを書き換えてください。

```py:3行目
authinfo = "USER:PASS"
```

スクリプトを実行すると API でリポジトリとスニペットの情報を集めます。複数ページに分割された情報を 1 ファイルにまとめます。（整形済）

* repositories.json
* snippets.json

issues や pullrequests などの情報は、リポジトリごとにディレクトリを作って保存します。（未整形）

* 例: repositories/xxx/issues.json

リポジトリやスニペットのクローンは自動では行いません。出力されたクローン用のシェルスクリプトを実行してください。

* repositories-clone.sh
* snippets-clone.sh

# 仕様

アクセスにはウェイトを入れています。

```py:19行目
    time.sleep(1)
```

保存した JSON は cache ディレクトリに入れて、再度実行した時はそちらを参照します。再取得したいときは削除してください。

cache 内の JSON は送られたままの形で保存します。改行が入っていないため、読むときは整形すると良いでしょう。

```shell-session:整形の例
python -m json.tool cache/repositories-1.json
```

links に記載された情報のうち、API を参照しているものを取得します。

```json
        "links": {
            "watchers": {
                "href": "https://api.bitbucket.org/2.0/（略）"
            },
            "branches": {
                "href": "https://api.bitbucket.org/2.0/（略）"
            },
            "tags": {
                "href": "https://api.bitbucket.org/2.0/（略）"
            },
            "commits": {
                "href": "https://api.bitbucket.org/2.0/（略）"
            },
            （略）
        },
```

# 参考

json.tool のソースコードは、ライブラリの機能を使ってシンプルなコマンドを作る例として参考になります。

* <https://github.com/python/cpython/blob/3.8/Lib/json/tool.py>
AWS日記⑨ (Polly)

# はじめに
今回は Amazon Pollyの音声合成を試します。

[今回作成したAmazon Polly の音声合成機能を試すページ](https://labo.systems/polly)

# 準備
[Lambda , API Gatewayの準備をします。]
(https://qiita.com/tanaka_takurou/items/3f93295de6cff060ec09)
[S3の準備をします。]
(https://qiita.com/tanaka_takurou/items/de897b0906087cec1a86)

[Amazon Pollyの資料]
[Amazon Polly を使用した日本語テキスト読み上げの最適化](https://aws.amazon.com/jp/blogs/news/amazon-polly-japanese-text-optimization/)
[Amazon Pollyを触ってみたよ by PHP](https://qiita.com/clustfe/items/19fc9a6053097936a3be)

# WEBページ・API作成
GO言語のAWS Lambda関数ハンドラー aws-lambda-go を使用してHTMLやJSONを返す処理を作成します。
また、Polly を使用するため aws-sdk-go を利用します。

[参考資料]
[AWS SDK for Go API Reference](https://docs.aws.amazon.com/sdk-for-go/api/service/polly/)

##### 音声合成を利用するには SynthesizeSpeech を使う。

```golang:main.go
func synthesizeSpeech(message string)(string, error) {
        t := time.Now()
        svc := polly.New(session.New(), &aws.Config{
                Region: aws.String("ap-northeast-1"),
        })

        voiceId := "Takumi"
        input := &polly.SynthesizeSpeechInput{
                Text:         aws.String(message),
                TextType:     aws.String("text"),
                VoiceId:      aws.String(voiceId),
                LanguageCode: aws.String(languageCode),
                OutputFormat: aws.String(outputFormat),
        }
        res, err := svc.SynthesizeSpeech(input)
        if err != nil {
                return "", err
        }
        buf := new(bytes.Buffer)
        io.Copy(buf, res.AudioStream)
        data := buf.Bytes()
        contentType := "audio/mp3"
        filename := t.Format(layout2) + ".mp3"
        sess, _ := session.NewSession(&aws.Config{
                Region: aws.String(bucketRegion)},
        )
        uploader := s3manager.NewUploader(sess)
        _, err = uploader.Upload(&s3manager.UploadInput{
                ACL: aws.String("public-read"),
                Bucket: aws.String(bucketName),
                Key: aws.String(filename),
                Body: bytes.NewReader(data),
                ContentType: aws.String(contentType),
        })
        if err != nil {
                return "", err
        }
        url := "https://" + bucketName + ".s3-" + bucketRegion + ".amazonaws.com/" + filename
        return url, nil
}
```

作成された音声ファイルをS3にアップロードし、そのURLを指定することでWebページ上で再生する方法をとりました。


# 終わりに
今回はAmazon Pollyの音声合成機能を試しました。
他の機能として、発話スタイルを指定した音声を合成ができます。現在は米国英語限定です。

 - [ニュースキャスターの発話スタイル](https://aws.amazon.com/jp/polly/features/#Newscaster_Speaking_Style)
 - [会話型の発話スタイル](https://aws.amazon.com/jp/polly/features/#Conversational_Speaking_Style)
jQuery~上級編~

# プログラミングの勉強日記
2020年5月31日　Progate Lv.80

#####jQueryオブジェクトの構造
　jQueryオブジェクトは配列のような構造をしていて、セレクタに合致した要素が配列のように入っている。インデックス番号が割り振られている。

```html
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>
```

```
$('li')
=>[
  <li>HTML</li>  //インデックス番号0
  <li>CSS</li>   //インデックス番号1
]
```

#####eqメソッド
　jQueryオブジェクトの中からeqの引数の数字と同じインデックス番号の要素を取得できる。<font color=blue>インデックス番号は0からはじまる</font>

```html
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>jQuery</li>
</ul>
```
`$('li')`の中のインデックス番号が2のjQueryオブジェクト(3つ目のli要素)

```
$('li').eq(2).css('color','red');
```

#####indexメソッド
　特定のインデックス番号を取得することができる。

```html
<ul>
  <li>HTML</li>
  <li class="active">CSS</li>
  <li>jQuery</li>
</ul>
```

```
$('li').index($('.active));
```
li要素における.active要素のインデックス番号（1）を取得する。

#####prevメソッドとnextメソッド
　prevメソッドはjQueryオブジェクトの兄弟要素（同じ階層の要素）の中から1つ前の要素を、nextメソッドは1つ後ろの要素を取得することができる。

```html
<ul>
  <li>HTML</li>
  <li id="center">CSS</li>
  <li>jQuery</li>
</ul>
```

```
$('center').prev().css('color','red');
$('center').next().css('color','blue');
```
<img width="571" alt="jquery1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/ca7ed71d-e403-8dff-1137-9d054b314f16.png">
GAS で HTML の出力が期待違いのときの覚書

GAS の「ウェブアプリケーションとして実行」の際、Fetch API と DOM 操作の組み合わせが動かない、といったケースをトライアンドエラーで対応していて時間溶かしていたが確認する手段があったのでメモ。

## Caja

GAS は HTML のレンダリングに Caja というツールを通してセキュアな状態で出力される。そのため、使えないJSライブラリがあったりエスケープされるなどする。

> Cajaは、サードパーティ製のHTML、CSS、JavaScriptを安全にWebサイトに埋め込むためのツールです。埋め込みページと埋め込みアプリケーション間の豊かなインタラクションを可能にします。Cajaは、オブジェクト・キャパシティ・セキュリティ・モデルを使用して、幅広い柔軟なセキュリティ・ポリシーを可能にしているため、Webサイトに埋め込まれたサードパーティのコードがユーザー・データで何をするかを効果的にコントロールできます。
>
> Cajaは、ほとんどのHTMLとCSS、そして最近標準化されたJavaScriptの "strict mode "バージョンをサポートしています。Cajaは、サードパーティのコードが、サポートしていない古いブラウザ上で新しいJavaScript機能を使用することを可能にします。
>
> [google/caja: Caja is a tool for safely embedding third party HTML, CSS and JavaScript in your website.](https://github.com/google/caja) 

[Introduction  |  Caja  |  Google Developers](https://developers.google.com/caja)

「caja」は、スペイン語で「箱」の意味なので、読みもスペイン語で「カハ」になる。

[Caja project - Wikipedia](https://en.wikipedia.org/wiki/Caja_project)

## Playground

動作確認用のツールも用意されている。

[Caja Playground](https://caja.appspot.com/)

![Caja Playground - Google Chrome 2020_05_31 21_14_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114599/fd61f158-a9e2-8385-a07a-ead0a35a02de.png)

左側にサンプルがあるので試した。

リストクリックして「load」クリックしてもうんともすんとも言わないのでパスを直打ち。

http://caja.appspot.com/examples/jquery-animate.html

出てきた HTML のソースをエディタにコピペ。

![Caja Playground - Google Chrome 2020_05_31 21_52_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114599/ab58202e-a32d-007c-031c-a437dac1b1b6.png)

「Cajole」をクリックするとレンダリング結果が表示される。

![Caja Playground - Google Chrome 2020_05_31 21_52_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114599/d0dabf15-4bad-4400-38bf-0b9f26697502.png)

JQuery 使った簡単な動作だったものが動かなくなっている。

「Runtime Message」タブを開くと JQuery 読み込まれてないエラーが出ていた。

![Caja Playground - Google Chrome 2020_05_31 21_52_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114599/02ade4b2-8ab7-4f5e-5c04-1a620b9c95dd.png)

```
Uncaught script error: 'Uncaught Error: not loaded' in source: 'http://code.jquery.com/jquery-1.8.2.js' at line: -1
Uncaught script error: 'Uncaught Error: not loaded' in source: 'http://code.jquery.com/ui/1.8.23/jquery-ui.js' at line: -1
Uncaught script error: 'Uncaught TypeError: (1 , $) is not a function' in source: 'https:/' at line: -1
```

出力は生の HTML というわけではない？
見方がぱっと見で分からなかった。ないかも。

なにか詰まったら確認の一手段として。
【WindowsServer】「.Net Framework 3.5」がインストールできない場合の原因/対策

# はじめに
今回は、WindowsServerに「.Net Framework3.5」がインストールできない場合の原因/対策についてアウトプットしたいと思います。

# 今回の検証環境

Hypervisor : ESXi6.7
OS : WindowsServer2012R2


# エラー内容

「役割と機能」にて「.Net Framework3.5」インストール時に下記のようなエラーが表示されてインストールできない。

![error.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/47c420e4-c81b-9939-89f5-627208b6a420.jpeg)


※インストールしたい機能
![13.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/e230ec91-1481-3a5b-dd9a-6a7e09804f91.jpeg)



# 原因

代替ソースパスが未指定のため

# 対策

代替ソースパスを指定した後に「.Net Framework3.5」のインストールを実施

# 対応手順

## 事前準備

仮想マシンにOSメディアの読み込みをしておく。
※今回はデータストア内にあるisoファイルを読み込み

![iso.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/d0c19da0-5b6c-1c4e-9064-b7c4757a3b3d.jpeg)

## 対応手順

①サーバーマネージャーより「管理」→「役割と機能の追加」を選択する。
![1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/8b23b2ec-96f6-afaa-2751-f8228d8480c7.jpeg)

②そのまま「次へ」をクリック。

![2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/21370d8e-c76c-b07c-0f31-2f21784409bb.jpeg)

③そのまま「次へ」をクリック。

![3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/be3a1f68-dab6-8434-3437-0458c6efaef1.jpeg)

④そのまま「次へ」をクリック。
![4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/fd413c87-bc97-756e-ba50-b8fdedc23dfd.jpeg)

⑤そのまま「次へ」をクリック。
![5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/f29f29cf-8c3c-b2f7-759c-048f8bf57a82.jpeg)

⑥「.NET Framework 3.5」に☑を入れ、「次へ」をクリック。
![6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/05c3fc31-9f5d-10ac-5c3a-efb271ae2b1f.jpeg)

⑦「代替ソースパスの指定」をクリック。
![7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/6b624202-5aa6-22f2-a93b-f0ab10dd5ea5.jpeg)

⑧パスを指定した後、「OK」をクリック

**パス: D:\sources\sys**
※「Dドライブ」はDVDドライブとなります。
(データストアからマウントさせたメディア)

![10.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/7232c739-ad2d-e2f9-43d4-529840912fe1.jpeg)

**※代替ソースパス**
![9.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/6df8e43a-6861-5de1-088c-80cfd70c3af3.jpeg)

⑨「インストール」をクリック。
![11.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/6360c061-a69f-77f8-6cff-bf3fcee900c3.jpeg)

⑩正常にインストールされる。
![12.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/8cdc33f9-09db-8e90-8aee-a8ff40239fc8.jpeg)


## インストール確認

再度、「役割と機能の追加」の機能を確認し、「.NET Framework 3.5」がグレーアウトされていることを確認。
(グレーアウトされていれば、インストールが完了しています。)
![13.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/4baea883-594b-85fe-c8de-c934288fbfb0.jpeg)
ECRについて

#前提
本日学んだことを書いていきます。

#本題

#AmazonECS
AWSが提供するコンテナ管理サービス。
Dockerのコンセプトが所狭しと散りばめられている。
コンテナ管理、コンテナオーケストレーションとも呼ばれる。
複数のコンテナ管理を行う場合、各コンテナの設定を変更したり処理量によってコンテナの数を増加させたり、コンテナの数が多くなるにつれて複雑さを増す。

コンテナオーケストレーションは他にもDockerSwarmやGoogleが提供しているkubernetesが有名。

AWSではkubernetesを扱うサービスAmazonEKSがある。
AWSのコンテナオーケストレーションといえば代表的サービスがECS。
ECSはロードバランサーやオートスケーリングと組み合わさったサービス。このサービスを動かすためのEC2インスタンスも自動で追加・削除される。
AWSでマイクロサービスを展開するには、まず選択肢となる代表的なサービス。

#マイクロサービスとは
コンテナと相性のいいソフトウェアの設計思考。
Microsoft Architectureとも呼ばれる。

#ECSクラスター
複数のEC2コンテナインスタンスで構成される。
このEC2はECSインスタンスとも呼ばれ、通常のEC2にECSコンテナエージェントがインストールされている。
ECS用に作成されたAMIがあり、これを使って起動したEC2でECSを動かすためのインスタンス。
物理的なリソース、クラスターを土台にしてその上にサービスやタスクといった単位が存在する。

#タスク定義
コンテナの定義情報を作成。
Dockerfileのようなもの。
コンテナで使用するイメージやCPU、メモリといったリソース情報、ネットワークの情報や、IAMの権限などといったコンテナ全般に渡る設定を行う。
このタスク定義を元に作られるコンテナをタスクという。

サービスはタスクをいくつ起動するか、最小値や最大値をオートスケーリングのように定義することができる。
例えば、CPU使用率が設定より高まった場合、タスクを追加して処理を手伝わせるという形でタスクを管理する。
サービスは複数設定することができる。

２台のEC2コンテナインスタンスが一つのクラスターという土台を形成し、この土台の上で3つのサービスがあり、それぞれサービスはタスクの数などを管理している。
各タスクではタスク定義で指定したDockerコンテナが起動している。

#ECRとは
プライベート版のAWS提供のDockerHubのようなもの。
ECRへのアクセス権限をIAMロール・ポリシーで制御もできる。
DockerHub同様、docker pullコマンドやdocker pushコマンドで同じようにコンテナを出し入れできる。

ECRを開く
↓
リポジトリの作成
↓
URIに対してイメージをプッシュすることが可能
↓
EC2にログイン
↓
手元にあるDockerイメージをECRにプッシュ
↓
ECRにプッシュする場合はAWSCLIコマンドを使用する
↓
認証コードを取得する
↓
EC2インスタンス、ECRへログインするための適切な権限が必要
↓
操作可能なロールを作成
↓
EC２を選択
↓
ロールにアタッチするポリシーは
AmazonECSfullaccess
AmazonEC2containerregistryfullaccess
を付与する
↓
タグは必要に応じてつける
↓
ロールの作成
↓
aws ecr get-loginでログイン
↓
pull、pushが利用できるようになる
AWSデータ分析系ツールまとめ（AI+BI=MLOps）

# AI+BI=MLOps?
AI(人工知能)とか、BI(Business Intelligence)とか
データ分析系のAWSのソリューションたちはいっぱいあるけどレベル感とか色々だし整理してみた。

* AI
    * SageMaker/Forecast/Personalize
* BI
    * Redshift/Athena/EMR/Quicksight
* MLOps(AI+BI)
    * 上記の組み合わせでデータ分析のエコシステムを構築

# AI:難易度別の3レイヤ

難易度順に並べてみた。ガッツリ使うなら、2-1が良いがだんだんと2-2や3でも大丈夫な世界に近づきつつある。AI？機械学習？何それコワイっていう方は[機械学習がわかるようになるステップを記録していく](https://qiita.com/kounan13/items/39377451f41708b06507)を参照ください。

1. ML Framework:NoteBookとかをそのまま使う
2. ML Services:
    1. Pythonとかガリガリ書く -> SageMaker
    1. アルゴリズム自動選定 -> AutoMLと呼ばれる領域。SageMaker Autopilot
3. AI Services:目的特化 -> Personalize/Forecastなど

参考：[AWSの機械学習サービス概要と Amazon SageMaker](https://pages.awscloud.com/rs/112-TZM-766/images/AWSの機械学習サービスとAmazon%20SageMaker%20の基礎.pdf)

# BI:データ活用の5ステップ

どういう情報ソースから収集・格納・加工・抽出・分析するかという5ステップがある。

1. 情報ソース
    2. IoT -> AWS IoT Greengrass
    1. ビッグデータ
    2. RDB
    2. ソース -> CodeCommit
1. 収集
    1. ストリーミング -> Kinesis
1. 格納
    1. RDB -> Redshift
    1. オブジェクト -> S3
1. 加工・抽出
    1. 加工：Glue/EMR
    2. 抽出：Redshift/Athena
1. 分析
    1. Quicksight

## そのほか
* イベント処理：Lambda
* 順次実行：Stepfunctions
* ソース変更：CodeXX

# MLOps(AI+BI):エコシステム化

## AI+BIをどう組み合わせればよいか
上記の数々の組み合わせが紹介されている

参考：[Amazon SageMaker を中心とした持続的な ML システム](https://www.slideshare.net/AmazonWebServicesJapan/amazon-sagemaker-ml)

## 3つの活用領域

AIをビジネスに活用するのがAI活用の通例だが、開発や運用への活用も着目されている。
* ビジネスへ：BizML
* 開発へ：DevML
* 運用へ：OpsML

ちょっと内容はずれるが、以下のサイトを参考にさせていただいた
※参考：[MLOps（機械学習基盤）とは？　AIOpsとの違い](https://www.atmarkit.co.jp/ait/articles/1911/21/news018.html)

# まとめ

は、なかなか難しいが、AIとBIとMLOpsはおさえておきたい技術の一つ。