OmniAICreator/Qiita-1.07M huggingface dataset:
Vagrantのマウント設定後にcomposer installを行ったらエラーが発生した話

# 環境

ローカルPC：macOS Mojava ver.10.14.6
Vagrant：2.2.7
VartualBox 6.1.4
ゲストOS： Ubuntu 18.04

# 現象
ホストOSでソースコードを編集できるようにマウント設定を行った後、ゲストOS内にて`composer install`を実施したら下記のエラーが発生

```
[UnexpectedValueException]                                                                             
  Plugin ocramius/package-versions could not be initialized, class not found: PackageVersions\Installer  
```

Vagrantfileは下記となる

```
Vagrant.configure("2") do |config|
  config.vm.box = "bento/ubuntu-18.04"
  onfig.vm.network "forwarded_port", guest: 80, host: 8080
  config.vm.synced_folder "/Users/XXXXXX/dev/event_regist/eaas/mount", "/home/vagrant"
end
```

# 調査

エラーで調べると下記のような内容が出てきて、おそらくマウントのtypeを変更すればうまくいきそう

https://github.com/laravel/homestead/issues/1240#issuecomment-513562298


Virtualboxのフォルダ共有の問題ある可能性が高い

# 解決方法

Vagrantfileの内容を下記に修正する

```
- config.vm.synced_folder "/Users/XXXXXX/dev/event_regist/eaas/mount", "/home/vagrant"
+ config.vm.network "private_network", ip: "192.168.33.10"
+ config.vm.synced_folder "/Users/XXXXXX/dev/event_regist/eaas/mount", "/home/vagrant/src",create:"true",type: "nfs",nfs_export: true, nfs_version: 3
```
cssのmarginやpaddingの指定個数の整理

【コメントで質問OKです】

値1つ：	[上下左右]
値2つ：	[上下][左右]
値3つ：	[上][左右][下]
値4つ：	[上][右][下][左]

下記で学習しました
[margin－スタイルシートリファレンス - HTMLクイックリファレンス](http://www.htmq.com/style/margin.shtml)
OracleのSQLメモ(その1)

  * VARCHAR2は動的にサイズを確保してくれると思っていた．
  * 10桁未満の文字をVARCHAR2(10)にキャストすれば8桁になると勝手に思っていた．
  * キャストした後別のテーブルのVARCHAR2(10)のカラムと比較していたが巧くいかなかった．

  * 以下のようなSQLを実行しても結果が0件だった．
    * MASTER側のカラムUSER_IDは8桁(定義はVARCHAR2(10))、CUSTOM_USERINFOのカラムCUSTOM_USER_IDは10桁になっているが5,6桁目を除けば一致するという仕様になっている．

```
SELECT * FROM MASTER
  WHERE MASTER.USER_ID IN (
    SELECT CAST(SUBSTR(CUSTOM_USER_ID,1,4)||SUBSTR(CUSTOM_USER_ID,7,10) AS VARCHAR2(10)) FROM CUSTOM_USERINFO
  );
```

  * もしかしたらVARCHAR2(10)にキャストした時は10文字未満でも10文字になるよう埋められるのではないかと思い実験．

  * VARCHAR2(10)にキャストする．

```
SELECT '__'||CAST(SUBSTR(CUSTOM_USER_ID,1,4)||SUBSTR(CUSTOM_USER_ID,7,10) AS VARCHAR2(10))||'__' FROM CUSTOM_USERINFO
```

  * 結果
    * 丁寧に10桁固定になるようで、後ろに2byteの余白あり．

```
__08299025  __
__08299045  __
```

  * VARCHAR2(8)にキャストする．


```
SELECT '__'||CAST(SUBSTR(CUSTOM_USER_ID,1,4)||SUBSTR(CUSTOM_USER_ID,7,10) AS VARCHAR2(8))||'__' FROM CUSTOM_USERINFO
```

  * 結果
    * 下記のとおり、予想通り．

```
__08299025__
__08299045__
```

# 結論

* ORACLEのSQLで文字列(VARCHAR2)にCASTするときは文字列長も意識しないと比較に失敗する．


# 補足

* 以下が気になる．
  * NUMBER型はどうなるのか
  * CASTするとき動的にサイズを変更できるのか？(余計な空白で埋められるのを防げるのか)
Docker-composeを使ってRailsの環境構築をする

今回はDocker-composeを使ってRailsの環境構築をする方法をまとめました！
Dockerは既に導入しているということを前提とします。
今回は特に説明等を書かずに環境構築する方法だけをまとめています。

#1.ファイル構成

・Dockerfile
・docker-compose.yml
・Gemfile
・Gemfile.lock

また各ファイルの中身は

```Dockerfile.
FROM ruby:2.5.1
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && apt-get update && apt-get install -y nodejs --no-install-recommends && rm -rf /var/lib/apt/lists/*
RUN mkdir /app_name

ENV APP_ROOT /app_name
WORKDIR $APP_ROOT

ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

RUN bundle install
ADD . $APP_ROOT
```


```docker-compose.yml
version: '3'
services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: root
    ports:
      - "3306:3306"

  web:
    environment:
      - SPROCKETS_CACHE=/cache
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/app_name
    ports:
      - "3000:3000"
    links:
      - db

```

```Gemfile.
source 'https://rubygems.org'
gem 'rails', '5.2.1'
```

Gemfile.lockは空で大丈夫です


#2.Railsのプロジェクトを作成する

`docker-compose run web rails new . --force --database=mysql --skip-bundle`

docker-composeコマンドを使用し、rails newを実行します。

#3.DBの設定をする

作成したらconfigというファイルがあるのでその中のdatabese.ymlを変更していきます

```config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password
  host: db
```

#4.Docker-composeを起動します

```
# 1.コンテナをビルドする
$ docker-compose build

# 2.コンテナの作成＆起動
$ docker-compose up 
# 2.コンテナの作成＆起動（バックグラウンドでの起動）
$ docker-compose up -d

#3.DBの作成をする
$ docker-compose run web rails db:create

#4.DBをmigrateする
$ docker-compose run web rails db:migrate
```

#5.localhostに接続
localhost:3000に接続して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579434/4e616f6b-dea6-e1e0-661b-e88fb61e7175.png)
この画面がでれば成功！！
お疲れ様です。
IFTTTでInstagramとの連携が切れた時

連携が切れているのにConectedと表示されていてわかりにくい！

# 概要
- Reconnect Instagram before everything it connects to is disabled
- Fix it! Instagram is still offline
- Action required: Instagram is offline
などのメールが来たときの対応

# 方法
- https://ifttt.com/instagram を確認して、お、Connectedになってるな、と思ってもそれではダメです。わかりにくい！
<img width="348" alt="Screen Shot 2020-04-09 at 15.16.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68213/d19bdbdc-d854-8a24-00b5-7ad97c598607.png">
- 右上のSettingsをクリックすると https://ifttt.com/instagram/settings Offlineとなっているのがわかります。<img width="836" alt="Screen Shot 2020-04-09 at 15.29.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68213/3e6961a0-c818-e99a-aa07-7dd845cbd0da.png">
- ここで別タブで繋ぎなおしたいインスタグラムアカウントにログインし、Reconnectをクリックします。
- そしてAuthorizeをクリックすればokです
- するとActiveとなるのがわかります
<img width="863" alt="Screen Shot 2020-04-09 at 15.31.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68213/59e48363-5f07-2d53-e1e6-c866e9f03fb5.png">
- 以上ですー
三項演算子の使い方

##三項演算子
簡単にいうとif文をシンプルに書けます。
普通のif文

```
if 条件
　式１
else
　式２
end
```
三項演算子

```
条件 ? 式１ : 式２
```
となります
【例】if文

```
def add_button_name
    if controller.action_name == 'show'
      "コメントを投稿する"
    else
      "コメントを更新する"
    end
  end
```
【例】三項演算子

```
def add_button_name
  controller.action_name == 'show' ? "コメントを投稿する" : "コメントを更新する"
end
```
になります。
【SQL 基礎】SELECT FROM / WHERE

この資料は弊社後輩に説明するために扱った＆口頭説明の補助的資料です。
せっかく纏めたので記念に残しておくかだけのものです、悪しからず。

---

# SELECT ～ FROM

### SELECT
「どの項目(列)からデータを検索してね」という命令する言葉。
表にはいろんな項目があるので、どの項目が欲しいのか指定してあげる。

### FROM
「どこの表から」を指定する言葉。
データベースは沢山の表があるので、「どこの表から」を指定してあげないと困ってしまう。

---

# SELECT で列を指定する

### 1列だけ取ってくる
SELECT 名前 FROM 年賀状テーブル

### 複数列取ってくる
SELECT 都道府県 **,**  区市町村 FROM 郵便番号テーブル

### 全部取ってくる
SELECT 名前, 都道府県, 区市町村, 関係, 最後にもらった年 FROM 年賀状テーブル
or
SELECT * FROM 年賀状テーブル

---

 # エクセルを使って

* 「 **年賀状テーブル** から **名前** の列だけ検索してね」と命令する
* 「 **郵便番号テーブル** から **都道府県** と **区市町村** の列だけ検索してね」と命令する
* 「 **年賀状テーブル** から **全部の列** を検索してね」と命令する

---

# WHERE
### WHERE
特定の条件を満たしたものだけデータを取得したいときに命令する言葉。
WHERE のあとには「どんな条件なのか」を教えてあげる。

### 条件の指定

* 数の大小を比較したり
* 何かと正しいか比較したり
* 特定の範囲内に収まっているかみたり
* 特定のパターンと一致しているかみたり

---

# 明日の内容

WHERE で指定できる条件をくわしく
実践も交えながらやっていきます
IQ Bot：マッピング学習画面への入り方と、学習画面に入れないときに確認すること

#IQ Botのマッピング学習画面

IQ Botのマッピングの学習画面はこんな画面です。
![011_マッピング学習画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/cbf18ef2-364e-f5be-c89c-c01bff380c44.jpeg)

この画面でラベルと値の位置を学習させる作業がIQ Botの事前設定のメインの作業になります。

#IQ Botの学習画面を出す方法は３つ

IQ Botの学習画面は、次の３つの方法で呼び出せます。

##①新規インスタンスの作成が完了したとき

新規インスタンスの学習が完了すると、その時点でマッピングの学習画面が自動表示されます。

##②学習インスタンスの画面から入る

上記のタイミング以外でも、マッピング学習の画面を呼び出したいケースは多々あります。
学習インスタンスの画面から、以下の要領で「Botを編集」（まだ一度も学習していないグループの場合は「Botを作成」を押してあげると、マッピング学習画面に遷移できます。
![99_マッピング画面への入り方その１.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/c5fd743c-c466-c82a-523b-166cceae7619.jpeg)

##③Botタブから入る

マッピングの学習画面には、「Bot」タブからも遷移することができます。

下記の画面から、学習したいインスタンスのえんぴつマークをクリックすることでマッピングの学習画面を呼び出せます。

![99_マッピング画面への入り方その2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/803f470b-a4d6-d702-0711-f16480f33db1.jpeg)

#学習画面に入れない？！　そんなときはここを確認！

IQ Botを使い始めたばかりの頃は、「あれ？　Botを編集ボタンがない……！！」みたいなところでたまに焦りがち。

そんなときは、以下のポイントを確認しましょう。

##学習画面に入れない原因①：該当するグループがプロダクション化されている

学習の可否、すなわちグループの編集可否は、グループの状態（ステージング／プロダクション）に依存しています。

グループの状態は下記のとおり、「Bot」タブ右側のトグルで確認できます。
![99_編集可否はトグルの状態に連動.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/6f558756-89e4-4d65-c97d-cb0421bf5554.jpeg)

学習が可能なのは、テスト状態に該当する「ステージング」の状態の場合のみで、**本番化状態に該当する「プロダクション」状態では学習はできません。**

**グループがプロダクション状態にある場合は、学習画面も開けません。**

**学習画面が開けないときは、該当するグループがプロダクション化されていないかをまず確認し、プロダクション化されている（＝オレンジになっている）場合は、該当のトグルをクリックし、ステージング状態に戻してから編集します。**

##学習画面に入れない原因②：学習画面から抜けた直後／または誰かがグループを編集中（排他制御）

上記のトグルがステージング状態にもかかわらず、「Botを編集」やえんぴつマークが表示されていない場合は、IQ Botの排他制御による可能性が高いです。

結論から言うと、**しばらく待ってブラウザをリロードする（F5を押す）と、ボタンが復活している可能性が高いです。**

IQ Botのマッピング学習画面は、同じグループを同時に複数の人が編集できる仕様にはなっていないので、自分以外の誰かが編集中の場合は編集できません。

また、マッピング学習画面を抜けてから排他のロックが外れるまでには少し時間がかかります。

……ということで、自分が直前まで編集していたグループを抜けて、その直後にもう一度同じグループに入りなおそうとしたときなどに、「あれ？　ボタンがないぞ？！」ってことになりやすいのですが、その場合はやさしく見守ってあげましょう。

#まとめ

- IQ Bot のマッピング学習画面には、インスタンスタブとBotタブから入れるよ
- マッピング画面の入り口のボタンがない場合は、以下を確認してね
    - 該当のグループがプロダクション状態になっていないか確認→なっていたらステージングに切り替える
    - 他の誰かが編集しているかも？　そうじゃなければしばらく待ってリロード（F5）
COBOLからODBC経由でデータベースに接続する

# COBOLからODBC経由でデータベースに接続する
レガシーCOBOLアプリケーションでは、データベース接続を言語レベルでサポートしていません。したがって、データベース接続には通常Oracle Pro*COBOLといったプリプロセッサでCOBOLソースにSQLを組み込み、あらかじめCOBOLコードに変換後、COBOLコンパイルを行っていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556649/b071140e-4756-bb60-b4f4-8ae2e79e7dbe.png)


プリプロセッサはデータベース・ベンダより提供されるため、COBOL処理系だけでなくデータベースもベンダ・ロックインされることになります。

# COBOLアプリケーションのODBC対応
オープン系のCOBOLコンパイラにはODBCインターフェースをサポートしている製品がほとんどです。

「ODBCインターフェースをサポート」＝「先の組込SQLに関する機能を有する」

と言えます。

MicorFocus COBOLは、OpenESQLプリプロセッサを備えた統合コンパイラですし、静的SQLをサポートするCOBOL処理系も存在しています。これらは、Pro*COBOLと完全互換があるわけではないのですが、Oracleのバージョン互換性制限やデータベースをロックインされないというメリットがあります。

各COBOLコンパイラのプリプロセッサ機能については、COBOLコンパイラメーカに一度お問い合わせくださいませ。

# DataDirect Connectを利用してみる
ODBCインターフェース利用時にDataDirectを使うと、前述のODBCドライバ・マネージャとODBCドライバを同一ドライバで統一することができます。
Windowsプラットフォームの場合は、ODBCドライバ・マネージャはWindowsに付属のものをODBCドライバはデータベース・ベンダの純正ドライバを使うことでさほど違和感がないのですが、Linuxをはじめとするunix環境ではunixODBCをODBCドライバ・マネージャに利用しなければなりません。
DataDirectはHP-UX、Solaris、Linux、AIXなど各種UNIXプラットフォームを幅広くサポートしていますので、上記のようにunixODBCを利用することがなくすべてサポートのある構成を取れます。

# Pro*COBOL資産をODBC仕様に書き換える
ここが一番の難関ではありますが。。。

いきなりJavaで書き換えましょう！というよりは、幾分ハードルは下がるかと思います。また、データベースを他のベンダのもの、たとえばPostgreSQLに置き換えるといった場合、保守費用が大幅に下がる可能性があります。

それほどの大手術ではありません(といいつつ、保証はできませんので、COBOLベンダのマニュアルを確認する必要あり)ので、一度検討されてはいかがでしょうか。

OpenESQLでのSQL埋め込み例

```console
      *    Connect to the specified database
	   EXEC SQL
               CONNECT TO :svr USER :usr WITH NO PROMPT
	   END-EXEC
	   if sqlcode not = 0
		display "Error: cannot connect "
		display sqlcode
		display sqlerrmc
		stop run
	   end-if
```

# まとめ
COBOL資産は、しかるべきタイミングでオープン系言語で置き換えるべきかと思いますが、現実的に一度にやれるものでもありませんので、このような技術を用いながら来るべきデジタル・トランスフォーメーションに備えるというのも良いのかもしれません。
SublimeTextのインストール手順

# はじめに
SubmileTextのインストール手順です。

# 環境
- OS：macOS Catalina v10.15.1
- SublimeText：V3.2.2

# インストーラーのダウンロード
公式サイトからインストーラをダウンロードします。

https://www.sublimetext.com/

「DOWNLOAD FOR MAC」ボタンをクリック（15.7MB）
<img width="749" alt="SublimeText#install.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90440/b1ab2664-e70d-849a-6a64-476170ec9dee.png">

# インストール
ダウンロードしたインストーラー（Sublime Text Build 3211.dmg）をダブクリックする
<img width="513" alt="SublimeText#install2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90440/8fff7954-3d1e-7b28-8f3e-ae88559278bf.png">

SublimeTextをApplicationsにドラッグ&ドロップする
<img width="615" alt="SublimeText#install3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90440/560a2c01-09e3-9877-1cd5-0fbe46bdd443.png">

これだけでインストールは完了です。
めちゃくちゃ簡単でした。笑
【文系でもわかる自然言語処理超入門】AIが文章の意味を理解する三つの流れとは


## 自然言語処理(NLP)ってなに？

自然言語処理(NLP)とは、私たちが普段話す「言葉」をコンピュータに処理させることです。
ロボット開発といった遠い世界のトピックだと思われる方もいるかもしれませんが、私たちの身近なところでも自然言語処理の技術は使用されています。

例えば、スマートフォンでの文字変換やGoogleの「あいまい検索」なども、自然言語処理のおかげで成り立っています。


自然言語処理の一つのゴールは、「AIが人間の言葉の意味を理解できるようになる」ことです。
AIにとって「意味がわかる」とはどういうことなのでしょうか。
この記事では、「数学とかプログラミングなんて無理です！！」という方にも理解できるように、AIが文章の意味を推測するまでの3つのステップを紹介します。

## AIが文章の意味を推測する3つのステップ
### 1. 「どこで切れるのか？」
日本語は「切れ目の難しい言語」だといわれています。
英語は半角スペースで単語を区切りますが、日本語は単語を連続して書くためです。

例を見てみましょう。

>「私はQiitaを使って自然言語処理の記事を書いています。」

>👇👇👇

>「私 / は / Qiita / を / 使っ / て / 自然言語処理 / の / 記事 / を / 書い / て / い / ます / 。」


このように、私たちは無意識のうちに「言葉の切れ目」を理解して話しています。
しかし、本来コンピュータはこの切れ目がどこにあるのか認識することができません。
ただのひとかたまりの文字列として認識してしまうからです。

そこで、まずはAIの技術によって切れ目を探す作業を行います。
これを**形態素解析**といいます。
アルゴリズムについては割愛しますが、[こちらの記事](https://www.sist.ac.jp/~kanakubo/research/natural_language_processing/morphological_analysis.html)がわかりやすいです。

形態素解析によって、「文字の変換」に近い作業が可能になりました。
しかし、それだけでは単語同士のつながりである文の意味がわかりません。
そこで、次のステップです。

### 2. 「どの言葉が使われているのか？」
形態素解析でAIは単語の「切れ目」を理解しました。
彼が文章の意味を理解するには、どうすればいいでしょうか。

ある人は次のように考えました。
「文に出てくる単語の種類と登場回数によって、意味を判断できるんじゃない？」
この考え方を**Bag of words**と呼びます。

先ほどの文章をBag of wordのルールで分解してみましょう。

|単語 |登場回数  |
|---|---|
|私 |1  |
|は |1  |
|Qiita |1  |
|を |2 |
|使っ |1  |
|て |2  |
|自然言語処理 |1  |
|の |1  |
|記事 |1  |
|書い |1  |
|い |1  |
|ます |1  |

「を」と「て」が2回、他の単語は1回ずつ登場していますね。
このとき、言葉の順番は関係なく、単語の種類と登場回数だけが問題となっていることに注意してください。


実際のところAIは数字しか処理できないので、上の結果をベクトルに変換した形で計算します。
例えばこんな感じ。(わからない人は飛ばしてください)
>文章のベクトル=(1,1,1,2,1,2,1,1,1,1,1,1)  

さて、これで本当に文章の意味を理解することができるのでしょうか？？


### 3. 「重要な単語はどれか？」

Bag of wordsの考え方では、全ての単語の重要性は平等です。
登場回数によってのみ、文章の意味に及ぼす影響力が評価されます。
先ほどの例では、「を」と「て」が２回ずつ出てきたので、「を」や「て」についての文章だとみなされます。本当にそれでいいでしょうか？笑

「を」や「て」は間違いなく脇役で、「Qiita」とか「自然言語処理」とか「書い」の方が文章の意味を構成する上では重要なはずです。

これを解決するための考え方に**TF-IDF**というものがあります。
ざっくり説明すると、以下のようなものです。
1. (他の文章なども読んだうえで)登場頻度の少ない単語ほど、重要度が高い
2. 重要性の高さに応じて、一回文に出てきた際のポイントを上げてあげる

AIにはたくさんの文章を読んでもらい、それぞれの単語の出現頻度を把握してもらいます。
「『Qiita』はあまり登場しないから一回出てきたら100ポイント」
「『を』とか『て』はめちゃくちゃ出てくるから1ポイント」
みたいなかんじです。

これを反映すると、先ほどの表はかなり変化します。

|単語 |登場回数  |　ポイント |
|---|---| --- |
|私 |1  | 30 |
|は |1  | 1 |
|Qiita |1  | 100 |
|を |2 | 2 |
|使っ |1  | 20 |
|て |2  | 2 |
|自然言語処理 |1  | 130 |
|の |1  | 1 |
|記事 |1  | 70 |
|書い |1  | 50 |
|い |1  | 1 |
|ます |1  | 1 |

例えばこんな感じになるでしょうか？

**TF-IDF**によって単語ごとの重要度を考慮すれば、この文が「Qiita」「自然言語処理」「記事」などを意味してることがわかるようになります。

こうしてAIは文のおおまかな意味を把握することができました！


## まとめの時間

「AIが文の意味を推測する流れ」についてまとめます。

1. **形態素解析**によって文を単語単位に区切る
2. **Bag of words**によって単語の種類と登場回数を知る
3. **TF-IDF**によって各単語の重要度を考慮する

最後までご覧いただきありがとうございました！
How to build openssl-sys crate for musl in Rust

Default in Ubuntu `cargo build --target x86_64-unknown-linux-musl` will failed to compile `openssl-sys`:

```
error: failed to run custom build command for `openssl-sys v0.9.54`
--- stderr
thread 'main' panicked at '

Could not find directory of OpenSSL installation, and this `-sys` crate cannot
proceed without this knowledge. If OpenSSL is installed and this crate had
trouble finding it,  you can set the `OPENSSL_DIR` environment variable for the
compilation process.

Make sure you also have the development packages of openssl installed.
For example, `libssl-dev` on Ubuntu or `openssl-devel` on Fedora.

If you're in a situation where you think the directory *should* be found
automatically, please open a bug at https://github.com/sfackler/rust-openssl
and include information about your system as well as this message.

$HOST = x86_64-unknown-linux-gnu
$TARGET = x86_64-unknown-linux-musl
openssl-sys = 0.9.54
```

Though you have `libssl-dev` installed.

## How to fix?

### Build openssl

Download openssl and build it.

```shell

ln -s /usr/include/x86_64-linux-gnu/asm /usr/include/x86_64-linux-musl/asm &&     ln -s /usr/include/asm-generic /usr/include/x86_64-linux-musl/asm-generic &&     ln -s /usr/include/linux /usr/include/x86_64-linux-musl/linux

mkdir /musl


wget https://github.com/openssl/openssl/archive/OpenSSL_1_1_1f.tar.gz
tar zxvf OpenSSL_1_1_1f.tar.gz 
cd openssl-OpenSSL_1_1_1f/

CC="musl-gcc -fPIE -pie" ./Configure no-shared no-async --prefix=/musl --openssldir=/musl/ssl linux-x86_64
make depend
make -j$(nproc)
make install


```

After `openssl` is installed, you should export some ENVs and then build agent, and all will be ok.

```shell
export PKG_CONFIG_ALLOW_CROSS=1
export OPENSSL_STATIC=true
export OPENSSL_DIR=/musl
cargo build --target x86_64-unknown-linux-musl ...
```

### Update

- you may need `apt install musl-tools`, thanks @vijayet1

### References

- https://github.com/sfackler/rust-openssl/issues/183
- https://github.com/getsentry/rust-musl-cross/blob/master/Dockerfile
- https://gitlab.com/rust_musl_docker/image/-/blob/master/BaseDockerfile.template
- https://github.com/rust-lang/cargo/issues/713#issuecomment-59597433
- https://github.com/getsentry/rust-musl-cross
Ubuntu Litespeed Webサーバーをいれる

# 目的

第4のWEBサーバーとして話題になっている「LiteSpeed」をUbuntsにインストールし、PHPにてHellowworldしてみることが目的



# LiteSpeedとは？
 - Apacheと完全な互換性がある
 
 - [netcraft-2020年2月のWebサーバー調査](https://news.netcraft.com/archives/2020/02/20/february-2020-web-server-survey.html)によると第4位
 - [LiteSpeed公式ベンチ](https://www.litespeedtech.com/benchmarks/php-hello-world)ではApacheの3倍以上、Nginxよりも高速！！
    ![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238715/15575c98-ad27-73b4-550b-3348cc883276.png)
 
 - HTTP/2完全対応
 - QUIC（HTTP/3）にも対応
 - WordPressサイトを専用プラグインで高速にすることが出来る
    - [litespeed-cache](https://ja.wordpress.org/plugins/litespeed-cache/)
 - [LiteSpeed公式](https://www.litespeedtech.com/)


# LiteSpeedインストール

### 1.システムパッケージを更新

```
$ apt update
```

### 2.リポジトリを有効にするには、まず開発者のソフトウェア署名鍵をダウンロードして追加

```
$ wget -qO - https://rpms.litespeedtech.com/debian/lst_repo.gpg | sudo apt-key add -
```

### 3.リポジトリ情報をシステムに追加
```
$ sudo add-apt-repository 'deb http://rpms.litespeedtech.com/debian/ bionic main'
```


### 4.OpenLiteSpeedサーバーとそのPHPプロセッサをインストール
```
$ sudo apt install openlitespeed lsphp73
```


### 5.PHPプロセッサへのソフトリンクを作成
```
$ sudo ln -sf /usr/local/lsws/lsphp73/bin/lsphp /usr/local/lsws/fcgi-bin/lsphp5
```


### 5.LiteSpeed管理パスワードの設定
```
$ sudo /usr/local/lsws/admin/misc/admpass.sh

Administrator's username/password is updated successfully!
↑
これが表示されたら完了
```
※変更しない場合デフォルトユーザー：admin　パスワード：123456


### 6.Firewallの設定
- 8088：OpenLiteSpeedのサンプルサイトのデフォルトポート
- 7080：管理インターフェース


### 7.サンプルサイトへブラウザからアクセス
```
https://ドメイン・IPアドレス:8088
```
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238715/05d7da14-cff2-f730-7e0e-06fd6255fed5.png)


### 8.管理画面へブラウザからアクセス
```
https://ドメイン・IPアドレス:7080
```
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238715/ece4ac3d-41e1-304d-7c6a-ee127c75b2d0.png)


# PHPでHelloworldを表示させる

### 9.管理画面からVirtualHostを設定
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238715/0cfc220a-e0ad-5012-b90c-6392b034d54b.png)

- 左側メニューから「Virtual Hosts」を選択しVirturalHostを新規追加する

|タブ  |項目  |値  |
|---|---|---|
|Basic  |Virtual Host Name  |hellotest  |
|Basic  |Virtual Host Root  |hellotest  /  |
|Basic  |Config File |\$SERVER_ROOT/conf/vhosts/$VH_NAME/vhconf.conf  |
|General|Document Root  |$VH_ROOT  |

- 左側メニューから「Listeners」を選択し先に作ったVirturalHostを紐づける

|タブ  |項目  |値  |
|---|---|---|
| General  |Listener Name  |hellotest  |
| General|IP Address  |*  |
| General  |Port |80  |
| General  |Virtual Host Mappings|先に作ったhellotestを選択  |



- ここで保存
- Config Fileが無いので新規作成するか聞かれる場合はCreateを選択
- 管理画面右上の「graceful restart」ボタンをクリックし設定再読み込み

### 10.PHPファイルの設定
~~~
cd /usr/local/lsws/
mkdir hellotest
echo "hello!!!" > index.php
~~~

- ブラウザからアクセス

```
https://ドメイン・IPアドレス
```



### 11.その他メモ
```
#プロセス停止・開始
systemctl status lsws


#PHPファイル・ディレクトリ
/usr/local/lsws/

#ログファイルなどは管理画面上設定で確認可能
```
PythonGUIによる簡易営業ツール作成:社員番号検索

#Pythonで簡易営業ツール作成方法:社員番号検索
営業でちょっとしたときに作成したツールを共有します。
Googleで調べながらSpyder(Python3.7)で作成してみました。

```
import tkinter as tk
root=tk.Tk()
root.geometry('300x200')
root.title('社員')
def btn_click():
    x=txt_1.get()
    if x=="田中":
        txt_2.insert(0,1)     
    elif x=="鈴木":
        txt_2.insert(0,2)
    elif x=="山田":
        txt_2.insert(0,3)
    else:
        txt_2.insert(0,"該当なし")
lbl_1 = tk.Label(text='苗字')
lbl_1.place(x=30, y=70)
lbl_2 = tk.Label(text='社員番号')
lbl_2.place(x=30, y=100)
txt_1 = tk.Entry(width=20)
txt_1.place(x=90, y=70)
txt_2 = tk.Entry(width=20)
txt_2.place(x=90, y=100)
btn = tk.Button(root, text='実行', command=btn_click)
btn.place(x=140, y=170)
root.mainloop()
```
PHP組み込みのDateTimeクラスの定数を使えば日時フォーマットを頑張って書かなくて良い


PHPの場合はDateTimeクラスに定数が定義されているので、それを使うとdateフォーマット表現が簡単でした。
Laravel の Request Validation にも使えます。

ref: https://www.php.net/manual/ja/class.datetime.php

例えば
`2020-04-08T00:00:00+09:00`
みたいなフォーマットを表現したいとき、
`DateTime::RFC3339` で表現できます。
この定数の中には `Y-m-d\TH:i:sP`が入っています。

ここで最後のPが何を意味するかという情報はPHPのdate関数の項目にまとまっています。
ref: https://www.php.net/manual/ja/function.date.php 

一部抜粋。

| O | グリニッジ標準時 (GMT) との時差。時間と分の間にコロンは入りません。 | 例: +0200 |
|:--|:--|:--|
| P | グリニッジ標準時 (GMT) との時差。時間と分をコロンで区切った形式 (PHP 5.1.3 で追加)。 | 例: +02:00 |
| T | タイムゾーンの略称 | 例: EST, MDT ... |
Maximum Subarray Problem(最大部分配列問題) memo(Kadane's algorithmの理解)

#Maximum Subarray Problem(最大部分配列問題)

Maximum Subarray Problemとは、
与えられた配列に対して、総和が最大になる部分配列を求める問題です。

これの解法として、Kadane's algorithmというものがあり、
計算量O(n)にて解を求めることができるというものです。

アルゴリズムの解説は多くありますが、自分の理解をメモ


###Kadane's algorithm sample

```:python3 
def maxSubArray(self, nums: List[int]) -> int:
    dp = [0 for _ in range(len(nums))]
    dp[0] = nums[0]
    for i in range(1, len(nums)):
        dp[i] = max(dp[i-1]+nums[i], nums[i])
    return max(dp)
```
###解説
以下のステップで求められる。

1. numsの任意の要素から要素iまでの総和の最大値をdp[i]に格納
dp[0]:任意の要素から要素0までの総和の最大値
　　　(要素0の値が格納される)
dp[1]:任意の要素から要素1までの総和の最大値 
　　　(要素0までの最大値(dp[0])+要素1」 か 「要素1のみ(要素1からSubarrayを始める)」のうち大きい方)
dp[2]:任意の要素から要素2までの総和の最大値 
　　　(要素1までの最大値(dp[1])+要素2」 か 「要素2のみ(要素2からSubarrayを始める)」のうち大きい方)
以降繰り返し

2. dpの最大値を求める

dpには各要素iまでの部分配列の和の最大値が格納されるので、
dpの最大値を求めることでMaximum Subarray Problemの解が求められる
ポテンショメータを用いた電圧計を作る（arduino）

#はじめに
qitta最近やらかしてみんな消えていったみたいですね。そんな中での初投稿が電子工作にしました。その中でもポテンショメータを用いた簡易電圧計をつくります。
#完成作
![Arduino-potentiometer.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534092/833c124f-9814-5562-c3f3-f36c012a28b4.jpeg)
こんな感じで回路くんでシリアルモニターで電圧を表示する。
#ポテンショメータとは
内蔵されている抵抗の両端に電圧をかけた状態でツマミを回すことで
抵抗値の比率が変わる。

それによって、端子から取り出せる電圧が変わる。

取り出した電圧はアナログ入力端子に入れることによって
デジタル値に変換することで制御信号として利用することができる。

内部構造は以下のリンクを参照して下さい。
https://jp.rs-online.com/web/generalDisplay.html?id=ideas-and-advice/trimmer-resistors-guide

#ポテンショメータの使い方

ポテンショメータの中央端子をアナログ入力に接続する。
つないだ端子の情報をanalogRead(pin)関数で読み取る。

analogRead(pin)は読み取った電圧値を0~1023の整数値を戻り値として返す。

**ようするに、読み取った０V~５Vの電圧値を
0~1023のデジタル値に変換することができるわけですねぇ**

#回路図
![Arduino_potentiometer.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534092/0c87b28b-62b9-7074-d4d7-d01ae9a1d4ba.jpeg)

一応こんな感じ。

#コマンド説明

・Serial.begin(speed)

シリアル通信のデータ転送レートをbpsで指定。
※bpsはビット/秒
speed：転送レート（int）

・analogRead(pin)

アナログ値を読み取るアナログ入力ピンを指定。
pin：０，１，２，３，４，５のいずれかを指定
例　アナログ入力ピンに３番を指定する。analogRead(3);

・ad変換の計算式
//読み取った値を電圧に変換、floatで計算
電圧＝最大電圧（5v）/ ADコンバータで分割した数（1023）＊入力値（value）

#サンプルコード
```
int analogPin = 3;
int val = 0;
float v_convert = 0.0f;

void setup() {
Serial.begin(9600); //シリアル通信のデータ転送レートを9600bpsで指定。bpsはビット/秒。
}

void loop() {
val = analogRead(analogPin);
v_convert = (float)val / 1023.0f * 5.0f; //読み取った値を電圧に変換、floatで計算

Serial.print( "value / volt : " ); //表示をプリント
Serial.print( val ); //読み取り値を表示
Serial.print( " / " ); //表示をプリント
Serial.println( v_convert ); //計算した電圧値を表示、改行

delay(2000); //2秒ごとに表示させるための遅延

}
```
#結果
最小の値
![Arduino_potntiometer02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534092/fbb9cb5b-4fda-f496-4adb-00f6d688e0c5.jpeg)

最大の値
![Arduino_potentiometer_03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534092/802424bc-aae1-2265-d809-3aedcc9d967b.jpeg)

いろいろいじって見た
![Arduino_potntiometer_04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534092/346e5bda-10b7-4e76-3d23-401e585497bc.jpeg)

#まとめ
今回のことで、
可変抵抗器の動きで電圧か変わっているのを読み取れているのがわかります。
これがanalogRead()関数の使い方になります。
これを使えば、ある電圧を読み取って何かをさせるといったことができます。

扇風機とか良いかもですね。

つまみ最小：最大：off:風力最大
とか、、、、

一応出来ましたね。誤差はあるので精度は良くないですが、、、
今後は電圧が半分まで言ったらledを光らせたりしたら面白いかもですね！！！

それではまた。ちゃお！！！
AWS Lambda + API Gatewayで世界へこんにちはする

## はじめに
サーバーレスってなんだろう？
という疑問を解決すべく、ある程度勉強したのちにAWS Lambda + API Gatewayで遊んでました。
その中で、とりあえず　LambdaとAPIGatewayの使い方はなんとなくわかってきたので、基本であるHello Worldをやってみます！

## 手順
###（１）AWS Lambdaで関数を作成

「関数を作成」をクリックします

![スクリーンショット 2020-04-09 14.33.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539611/42ed640c-1584-3446-3a7f-3ba886cde11c.png)

「１から作成」を選択します。今回は、関数名を「helloWorld」とします。
![スクリーンショット 2020-04-09 14.05.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539611/6e9a267a-f07d-8dbc-fb35-a871e0faa5d5.png)

「関数コード」で「コードをインラインで編集」を選択し、下記コードを入力

```js
exports.handler = async (event) => {
    // TODO implement
    const greeting = "Hello World!!"
    return greeting;
};
```

入力後関数を保存します。
テストイベントに関しては、今回は使用しません。
こちらを使用すれば、eventオブジェクトに入るプロパティを作成することができます。
POSTを使用する際に使うのかもしれませんが、まだわかっていません（笑）

### （２）API GatewayでAPIを作成、デプロイ
「APIを作成」をクリックします。

API名はなんでもいいです。
今回はわかりやすく「HelloWorldAPI」とします。

![スクリーンショット 2020-04-09 14.08.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539611/4cd8b48b-dc41-1f2b-9977-13a957072f05.png)

「リソースを作成」を選択します。
ここでURL規則を設定することができます。今回は「/hello」を追加します。
「〜〜/hello」をいうURLに対しての処理をLambdaに作成した関数にやらせることとなります。

![スクリーンショット 2020-04-09 14.08.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539611/3893b6c9-10fd-183a-9049-738d234d43a7.png)

「メソッドを作成」をクリックし、GETを選択します。
Lambda関数名を入力するフォームに。先ほど作成した「helloWorld」関数を入力します。

![スクリーンショット 2020-04-09 14.09.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539611/52d9b4dd-68dd-81f3-1332-e8fed097eec9.png)

「APIのデプロイ」を選択します。
ステージ名はなんでも良いです。

![スクリーンショット 2020-04-09 14.09.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539611/5faade70-86c9-e3dd-a0dc-53a2e609788b.png)


### （３）curlでテスト
デプロイした際に使用できるURLが表示されるかと思います。
それを使ってcurlでGETメソッドを送ってみましょう。

```
$ curl -X GET  https://○○○.amazonaws.com/dev/hello
"Hello World!!"
```

## 終わり
おしまい。
DynamoDBの接続とか、POSTメソッドとかやってみるともっと面白いですね。
DynamoDBの接続はなぜかうまくいかないため苦戦中。
区役所の PDF を半日でウェブアプリ化 （Part 2. PDF データの取り込み）

## はじめに
　コロナ対策の一環として、テイクアウト営業に切り替えて営業している地域のお店がたくさんあります。ただ、どこでテイクアウト営業をしているか、周知が課題です。文京区でも、テイクアウト営業を模索しているお店が多く、区もこれを支援する活動を始めました。（[出前・持ち帰り 可能店を一覧に　文京区などリスト作成 日経新聞４月３日](https://r.nikkei.com/article/DGKKZO57585020S0A400C2L92000?s=3) ）
　ただ、現時点では [このリスト](http://www.b-kushoren.com/pdf/bunkyo-takeout-list.pdf) は PDF 形式でした。[スマートフォンで見れるように](https://bunkyotakeouts.glideapp.io/) してこそ価値があるはず。そこで PDF のデータをエクセルに抽出してみることにしました。
## PDF のデータをエクセルに抽出
tabula-py を試したところ、十分なデータが抽出できました。成功事例を簡単にまとめておきます。
もちろん、元となる PDF の作り方や構造などに大きく左右されるでしょうから、個別の情報源に対して試行錯誤は必要になると思います。

### 環境 
* Windows10 Pro ver 1909
* Anaconda python 3.7
* Java 1.8.0_241

### ライブラリの導入
pandas と openpyxl (導入ずみでした)、そして tabula-py を anaconda で導入しました。
```conda install -c conda-forge tabula-py ```
tabula-py の開発者は直接は windows での動作を確認していないようですが、今回は [Java8 をインストールするだけで tabula が動作](https://tabula-py.readthedocs.io/en/latest/getting_started.html#get-tabula-py-working-windows-10)しました。

### テーブルの取り込み
![PDF_table.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38979/ecc2aa9a-cada-aa68-2e38-873dece38799.png)
PDF のテーブルは、11コラム、当初は 13 ページのファイルでした。更新されて今後は長くなっていくことが想定されます。何度か tabula での読み込みを試行して、こんなことがわかりました。

* 各ページ４つずつあるテーブルの最後が欲しいデータ（だと tabular は認識する）
* 裏では、そこそこエラーメッセージも吐いているけれど、実用的なデータが取得できている

各ページのテーブルについているヘッダは、最初の１つだけをコピーして全部つなげて DataFrame を組み立てることにしました。
　セル内改行は、明らかに不要なコラム（店名、住所）と、メニューなど、統一のとれていないセルがありました。統一の取れていないコラムに対しては、手を加えないで、必要ならエクセル上で対処することにします。（あるいは、対応しない、と割り切る）
以下は、tabula が table と認識するものが各ページに４個ずつあるときに動作するコード例です。（上記スクリーンショットのときには、各ページ３個でした。フォーマット変更にフレキシブルに対応することは重要です。）

``` TakeOutPDF_read.py
import tabula
import pandas as pd

b_df_a = tabula.read_pdf('Bunkyo_list_0409.pdf', multiple_tables=True, lattice=True, pages='all')

BoxPerPage = 4  # table と認識するものが各ページに 4 個ずつあった。 
tindex = range(BoxPerPage - 1, len(b_df_a))  # [3, 7, 11, ...]
btakeout_df = pd.concat([b_df_a[i] for i in tindex])
btakeout_df = btakeout_df.drop(index=0)
btakeout_df[4] = btakeout_df[4].str.replace('\r', '')  # 店舗名 
btakeout_df[6] = btakeout_df[6].str.replace('\r', '')  # 住所
hd = b_df_a[BoxPerPage - 1].iloc[0]
btakeout_df.columns = hd.values

btakeout_df.to_excel('Bunkyo_takeout_list_0409b.xlsx', index=False)
```
これで .xlsx ファイルができます。

``` btakeout_df.head(3)``` として DataFrame を確認すると、改行が `\r' となっていますが、データは読めていそうです。データ件数なども確認しました。

<img width="819" alt="dataFrame.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38979/0d154512-be7b-69b5-e217-8335a777e53b.png">


## そのあとのプロセス
* エクセルファイル上で、改行の調整など。
<img width="701" alt="xlsx.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38979/31a52fef-b7e1-aeb3-97bd-6d8e4ad662ac.png">



* Google Drive にアップロードして、Spreadsheet に変換
* [Glide](https://www.glideapps.com/) を使って、PWA サイトを作りました。
文京テイクアウト: [bunkyotakeouts.glideapp.io/](bunkyotakeouts.glideapp.io/)
作業メモ Part 1. として [区役所の PDF を半日でウェブアプリ化 ](https://note.com/natsu_water/n/n8e3b71e9fa66) を、Note に書きました。無料プランだと 500 レコードが上限です。
* あとから気づきましたが、コロナ対策の地域情報サイトなどを Glide で作っている人が[世界中にたくさんいる](https://twitter.com/glideapps/status/1243982119707095040?s=20) ようです。

* PDF データの取り込みから、GlideApp の動作まで、初めてでも 3-4 時間でできました。ツボを押さえれば、小さなサイトは 1-2 時間で作れそうです。
NATゲートウェイを使おうとしたら何か勘違いしていた

　プライベートサブネットからインターネットへアクセスする方法としてNATゲートウェイが利用できます。
　特殊なAMIを使うことでNATインスタンス（実はEC2インスタンス）をつくる方法もありますが、AmazonではNATゲートウェイの方を推奨しているみたいなのでこちらを紹介します。

#構築した検証環境
　NATゲートウェイの使い方をあまり調べずに安直に下の図のような構成を作ろうと考えました。


![QIITA用1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612635/f1ebfd32-68d3-cbaf-07ec-594f9e6daf48.png)

　NATインスタンスではパブリックサブネットに新しくインスタンスを作って設定を変えなきゃいけないのに、NATゲートウェイではプライベートサブネットの0.0.0.0/0のターゲットをNATゲートウェイのIDにするだけでいいんだ。
　そんな誤った考えで検証環境を構築し、ping amazon.comを実行しましたが当然帰ってきません。
　traceroute amazon.comを実行するとNATゲートウェイの内向きのIPアドレスまでは帰ってきますが、それより先は帰ってきませんでした。

#改良した検証環境
　できなさ過ぎて発狂し、日を改めて調べなおして作った構成図が以下の通り。

![QIITA用2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612635/ee3f8122-be99-ae52-4c42-47b2d8bdb760.png)

　誤認していた点は以下の通り。
・NATゲートウェイはVPCでなくサブネットに割り当てる
・0.0.0.0/0のターゲットをIGWにしたパブリックサブネットからでないとインターネットへ出れないのはNATゲートウェイを使用しても同じ

　こんなところで躓くの僕くらいかもしれませんが共有いたします。
試験証跡取得効率化ツール('CTRL+Rを押して、最下方のピクチャーの位置を算出して、この下に自動貼り。スクロール移動とセル選択要らない)

![新しいビットマップ イメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197416/8a3df34f-2813-1968-9278-7ff61ecc363d.png)


```
'CTRL+Rを押して、最下方のピクチャーの位置を算出して、この下に自動貼り。スクロール移動とセル選択要らない
Sub AutoPastePicture()
'
' Macro3 Macro
'
' Keyboard Shortcut: Ctrl+r
'

    'end row number
    Dim endrow As Long
    'when picture is exists in sheet
    If ActiveSheet.Shapes.Count > 0 Then
        ' get the row number of the last picture's bottom
        endrow = Application.Max(endrow, ActiveSheet.Shapes(ActiveSheet.Shapes.Count).BottomRightCell.Row)
        'select Row :end row number + 2. column : "C"
        Range(Sheet1.Cells(4, 3).Value & endrow + Sheet1.Cells(5, 3).Value).Select
        ' paste the picture
        ActiveSheet.Paste
        
    End If
End Sub
```
【laravel】レイアウトの定義と継承

# 概要
レイアウトを定義してテンプレートで継承する方法についてです。
この仕組みを使用することで同じレイアウトのページを手軽に量産・改修できるようになります。

# 基本的な操作
どの部分がどのように反映されるかを理解することが重要のため、まずは定義と継承の基本部分を解説します。

## １．前置き
使用するファイルはテンプレート用のindex.blade.phpとレイアウト用のlayout.blade.phpの2つが最低でも必要になります。
index.blade.phpは表示させたいページのテンプレートのため準備できていることを前提とします。

動作としては、index.blade.phpでlayout.blade.phpをロードするディレクティブを記述することでlayout.blade.phpのレイアウトを継承するため、以下のように2つのファイルの中身をタイトルで区別して解説していきます。

```:layout
// レイアウトのディレクトリ
// resources\views\layouts\layout.blade.app
```

```:index
// テンプレートのディレクトリ
// resources\views\sample\index.blade.app
```

## ２．レイアウトの準備
veiwsフォルダ内にlayoutsフォルダを作成して、直下にlayout.blade.phpファイルを作成します。
ファイル名は解説用にlayout.blade.phpにしていますが、テンプレートのファイル名app（sampleapp.blade.phpなど）がわかりやすいと思います。
また、フォルダ名もlayoutsと指定されているわけではありません。
※以下より.blade.phpを省略

```
views
├─ sample
│  ├─ index.blade.php
|
├─ layouts
|  ├─ layout.blade.php
```

## ３．レイアウトの作成
layoutの中身にコードを記述します。
解説のため先にlayoutを準備していますが、テンプレートとなるindexが存在するのが前提です。
また、わかりやすいようにbodyタグ内のみをdivタグ区切りで解説します。
＠yieldや＠sectionといったディレクティブについては後述します。

```php:layout
<body>
  <div class="title">
    @yield('title')
  </div>

  <div class="content">
    @yield('content')
  </div>

  <div class="side">
    @section('side')
    <p>サイドメニュー</p>
    @show
  </div>
</body>
```

## ４．テンプレートの編集
layoutを読み込めるようにテンプレートであるindexを編集します。
解説のために表示項目ごとに行間を開けています。
ファイル名は###.blade.phpとすることを忘れないでください。

```php:index
@extends('layouts.layout');

@section('title','ヘッダー')

@section('content')
  <p>コンテンツ</p>
  <ul>
    <li>aaa</li>
    <li>bbb</li>
  </ul>
@endsection

@section('side')
  @parent
  <ul>
    <li>ccc</li>
    <li>ddd</li>
  </ul>
@endsection

```

## ５．ディレクティブの解説
### ＠extends
テンプレートにレイアウトを読み込むディレクティブです。

```php:index
@extends('layouts.layout');
// 記述方法：@extends('フォルダ名.ファイル名')

```

### ＠yield
レイアウトの＠yieldはテンプレートの＠sectionをはめ込んで表示するためのディレクティブです。

```php:layout
<h1>@yield('title')</h1>
//記述方法：@yield ('yield 名')
```

### ＠section
＠sectionには二通りの記述方法がありますので段落を分けて解説します。

#### ＠section('yield名','表示させる値')
単純に何かしらの値を表示させる方法です。
あらかじめ＠yield('yield名')にタグを指定する必要があります。

```php:layout
<h1>@yield('title')</h1>
```

```php:index
@section('title','タイトル')
// 記述方法：@section('yield名','表示させる値')
```

```:出力イメージ
タイトル
```
#### ＠section('yield名') ～ ＠endsection
＠section('yield名')～＠endsectionの間に記述した値を表示させる方法です。
この記述方法ではタグを指定して入力することができます。


```php:layout
<div class="content">
  @yield('content')
</div>
```

```php:index
@section('content')
  <p>コンテンツ</p>
  <ul>
    <li>aaa</li>
    <li>bbb</li>
  </ul>
@endsection
// 記述方法：@section('yield名') ～ @endsection
```

```:出力イメージ
コンテンツ
・aaa
・bbb
```

### ＠section ～ ＠showと＠parent
主にレイアウトの継承で使用する記述方法です。
レイアウトに記述してテンプレートの入力値を出力もできます。
ここでは親レイアウトを準備していないため後者の使い方となっています。
＠section～＠endsction内の＠parent以下が＠showで表示されるイメージです。

```php:layout
 <div class="side">
    @section('side')
    <p>サイドメニュー</p>
    @show
  </div>
```

```php:index
@section('side')
  @parent
  <ul>
    <li>ccc</li>
    <li>ddd</li>
  </ul>
@endsection
```

```:出力イメージ
サイドメニュー
・ccc
・ddd
```
Vuetifyのiconでmdi接頭辞を付けても表示されないのはマテリアルアイコンとマテリアルデザインアイコンを混同しているから？

# Material Design IconsとMaterial Iconsは別物

今回の記事はマテリアルデザインアイコンとマテリアルアイコンを同じものと思っていたせいで
デフォルトのMaterial Design Iconsが設定されているのにも関わらず
`<v-icon>create</v-ivon>`などと書いて表示されない現象に悩まされて居たので書いてみました！

「いや、書いてあるやん？アホかww」
と思われた方は読む必要の無い記事です。

![スクリーンショット 2020-04-09 14.00.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206542/f073c571-54f9-c61e-245a-4c129165c0ee.png)


## Material Design Icons

まず初めにVuetifyのデフォルトで設定されている
**Material Design Icons**は`mdi-`接頭辞を付けるとデフォルトで使えるアイコンです。

下記の中から選んで使えます
https://materialdesignicons.com/

![スクリーンショット 2020-04-09 13.42.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206542/cf3b26f6-b29b-168d-05db-1bf43593f133.png)


## Material Icons

次にデフォルトでは使えませんが接頭辞無しで使えるアイコンです

下記の中から選んで使えます
https://material.io/resources/icons/?style=baseline

設定方法は下記にリンクを貼っておきます
[Material Iconsのインストール](https://vuetifyjs.com/ja/customization/icons/#material-icons%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)

![スクリーンショット 2020-04-09 13.45.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206542/4e147b3f-7fa6-84c3-1916-79f4a5595668.png)

## `mdi`接頭辞のアイコンは段階的に廃止される？？

>For question: Why not just delete all the mdi icons and css defined as new icons are already offered by google, isn't it?
I got answer: Because that would suddenly break all the user implementations, so this way it can be phased out gradually, giving people time to update their icons.

https://stackoverflow.com/questions/31698485/material-icons-vs-material-design-icons

あまり詳しくはわからないのですが何やら段階的に廃止されるようなことが書かれていました。
詳しい方がいらっしゃいましたらコメントで教えていただけると幸いです。

## Nuxt.jsとVuetifyでMaterial Iconsを導入

最後にNuxt.jsで導入してみたいと思います。

参考にしたのはこちらのNuxtのVuetify ModuleのGitHubのREADMEです。
[nuxt-community/vuetify-module](https://github.com/nuxt-community/vuetify-module#defaultassets)

```nuxt.config.js
// 省略
  vuetify: {
    customVariables: [], // 省略 
    theme: {}, // 省略 
    // ↓↓ ここから下を追記 ↓↓↓
    defaultAssets: {
      font: true,
      icons: 'md'
    },
    icons: {
      iconfont: 'md'
    }
  },

```
Power Automate のカスタム コネクタで LINE WORKS Bot を簡単に作成

以下の記事で紹介したカスタム コネクタの使い方を説明します。
https://qiita.com/iwaohig/items/7b8db2bba7b2a3b542b9

# Power Automate のフロー作成
何かしらのトリガーで LINE WORKS のトーク Bot で通知するフローを作成してみます。
例として Trello にカードが追加されたことを通知しましょう。

Power Automate の [+ 作成] で [自動フロー] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/0b7920a3-ea63-53ba-5deb-0eb42438dc24.png)

任意の [フロー名] を指定し、[新しいカードがリストに追加されたとき] のトリガーを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/f19316eb-f14f-987d-16c0-228effa0d122.png)

Trello にサインインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/f929636c-c2f7-5865-eecd-52de8b57d4d7.png)

[ボード ID] と [リスト ID] を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/1c4c3101-1869-41f1-5901-f9a13455e411.png)

アクションでカスタム コネクタから LINE WORKS を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/354993a8-f7f1-fd85-9a24-4f4e6de516bd.png)

[メッセージ送信 (テキスト)] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/316c10f0-2de9-5752-a305-7e2d026c9ee3.png)

APIID, BotNo, consumerKey は LINE WORKS の Developer Console で確認できる値を入力します。

text には動的なコンテンツの Trello のカード名を指定しています。
accountId には送信先の LINE WORKS の ID を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/156aa98d-c7b1-8613-cc08-bf7a17ffeead.png)

以上でフローの作成が完了です。[保存] ボタンをクリックします。

## 動作確認
Trello でカードを移動してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/8a667993-7729-4871-9df3-ae19bd353ae5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/90ba239d-4f13-f0af-180a-3bfd72ee68d7.png)

フローが実行されて LINE WORKS に通知が届きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/68f3edf9-dfaf-0722-51d1-3abe1bf2fbf1.png)
rot_rdq()の勘違い（老害の説教じみたメモ）


#roq_rdq()は優先順位を変える関数では無い。
先の記事でちょっと話題に出たrot_rdq()というiTronのシステムコールの勘違いが良くあります。
この関数は自タスクをレディー・キューの最後に繋げると思い込んでる人がいますが、それは引数のtskpriを自タスクと同じ優先順位にした時だけです。
この関数をコールしておけば<strong>自動的に優先順位の高いタスクに処理が移り変わると思って</strong>長い処理の間にこの関数を挟んでる人も自分の周りでは見受けられます。
もし、遷移して欲しいタスクの優先順位を指定してると、もし、遷移して欲しいタスクがレディー状態にあった場合、その優先順位が複数あった場合にはレディーキューの最後に繋げ直されるので、思った通りの動作にはならないと思います。
もしかしたら、仕様しているiTronOSの製品によっては違った動作をするのかもしれませんが、私が仕様してきたNORTiとμC3では上記の動作仕様に実装されていると思います。

![rot_rdqのメモ３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402134/181f0de4-479a-d79f-46d6-fb7fb1bd444d.png)

偶発的に優先順位の高いタスクがREADY状態に遷移していた場合には優先順位の高いタスクがRUN状態になり実行される事があるかもしれません。
 # 試してないので実際に下記のような動作になるかは不明です(^^;

![rot_rdqのメモ４.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402134/3dee32f5-59df-8029-d236-bc8da5a3d758.png)



#rot_rdq()は同一優先順位でのみ有効
表題通りです。　もしrot_rdq()で自分とは違うタスクに処理を遷移させようと思っているのであれば、自タスクと同一優先順位のタスクに処理が遷移すると思って下さい。　決して、アイドルタスクの様にタイムアウト付きのシステムコールをコールしているからと言って、タイムアウトも発生していないのにそのタスクにディスパッチされる事はありません。

図で示すと以下の通りです。

![rot_rdqのメモ１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402134/3e6f6e17-4f9d-bc1b-1d8a-10fc9258b2bc.png)
![rot_rdqのメモ２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402134/12fcf140-81d8-2d40-abe0-dd2ed2c1fd2f.png)


注意すべきは優先順位の低いタスクＦはREADY状態ですが、タスクＦには遷移しない点です。


では、長い処理をマルチタスクにおいてタスクに分割するにはどうするかは、また次のエントリーで。
サブネットに関係なくサイトを指定できるグループ ポリシー

Active Directory ドメインで、歴史的事情によってどのサイトに紐づいたサブネットにも属していないクライアントが存在してることってありませんか？
本来はそうならないようにするのが筋だとは思いますし、また、サイトに紐づけられていなくても大体は近場の DC がよしなにしてくれるとは思うのですが。

一つ悩ましいのは、このようなクライアントがあるとイベント ログに ID: 5807 が延々とで続けること。
このような時に使えそうなポリシーが [サイト名を指定する] です。
もしどうしても他に手段がない場合は検討してみてもいいかも？
https://getadmx.com/?Category=Windows_10_2016&Policy=Microsoft.Policies.NetLogon::Netlogon_SiteName&Language=ja-jp



もちろん、そのようなサブネットがあるならそれを [Active Directory サイトとサービス] ツールで新たに紐づけるのが正解でしょうが、大人の事情も色々ですよね。
https://support.microsoft.com/ja-jp/help/889031/you-may-receive-event-id-5807-on-a-windows-server-2003-based-domain-co
「毎日学習しないと気が済まない身体」になる１つの秘策

こんにちは。テックキャンプ夜間組の、きのと申します。
コロナウイルスの影響でスクールもお休みになってしまい、
自宅学習をされている方も多いのではないかと思います。

### みなさん、自宅学習、捗ってますか？

私は夜間組でスクールに通い始めて70日経とうとしてますが、スクールに入学してから学習をサボった日がありません（断言）。
なので「家の学習捗らないぞー！まずいぞー💦」という方に、方法を共有したいと思うのでよかったら参考になさってください。



# こんな人に読んで欲しい
・やる気スイッチが入らない人
・家での集中力が続かない人
・勉強を毎日の習慣にしたい人

# 方法は簡単です✍️
## 心を無にして、パソコン開く、心を無にして、カリキュラムに取り掛かる
 
以上です


# とは言ってもなので、詳しくみていきましょう

流れはこんな感じです　（★が大事です）
１：時間の確保
２：★パソコン開く
３：スマホアラームで30分セットする　＋　カリキュラム開く　
４：★何も考えずにカリキュラム進める
５：時間が来たらやめる、アラームで5分休憩 　

▼
▼
▼



####１：時間の確保
　時間は15分でもいいのでこじ開けてください。
　時間確保しないと始まりません。
　各々でご事情があるとは思いますが、15分の時間くらいは確保できますよね？　笑
　　

####２：★パソコン開く
　何も考えずにパソコンを開きましょう。
　「あー、こっから難しいカリキュラムだな」とか、「苦手分野ー！」とか
　一切考えてはいけません


####３：スマホアラームで30分セットする　＋　カリキュラム開く　
　何も考えずにアラームをセットしましょう。
　これを読んでいる人は「やる気スイッチが入らない」方達だと思うので、
　短め時間で設定してください。15分でもいいと思います。

　（私の場合は、iphoneの「時計」アプリをスマホ画面のタッチしやすいところに移動させています🕐✨）
　
　そして、カリキュラムを開きましょう

####４：★何も考えずにカリキュラム進める
　
　まとまった時間がないと進められないカリキュラムであれば
　ドリルに手をつけていきましょう　
　

###### 繰り返しますが、
　「あー、こっから難しいカリキュラムだな」とか、「苦手分野ー！」とか
　 一切考えてはいけません
######　　 無心　です


####５：時間が来たらやめる、アラームで5分休憩 　
　ここもポイントなんですけど
#####「キリが悪いところで止める」
　でいいんです。
　「キリが良い所」でやめてしまうと、気分的に区切りがいいので歯車が止まってしまうので
　「なんか途中で気持ち悪い！」ってうところでやめておきます。
　（馬が目の前に人参ぶら下がってるような状況ですね）
　この気持ち悪さが次の30分に繋がっていきます。

　ちなみに、休憩時間は5分としていますが各自調整してみてください。

####6:（３）に戻る。　これを機械的に繰り返す。



以上です。
つまり、
やる気ない、なら、仕組みを作って歯車を回していく、ってことなんですけど
不思議なもんで、やりだすと結構楽しくなっていくんです。



うまくリズムに乗ってくると、合計で１０時間とか学習できます。



時には、全然捗らない時もありますけど、
最初のタイマーセットした時間勉強できてるので、その日、一切勉強しなかった訳ではありませんよね。

###これを毎日やってくと、体調悪かろうが、忙しかろうが「勉強しないと気が済まない身体」になっていきます笑
考えただけで素敵ですね😏✨






#### 最後に
私の拙い文を最後まで読んでくださって本当にありがとうございます。
アウトプットしたいなという気持ちは強いのですがライティングが超苦手なので
最初の投稿が勉強の方法、になってしまいましたが、
次回はプログラミングについても書いていけたらなと思います。
あと、Qiitaの投稿方法にももっと慣れたい！

そして、この学習方法が全ての人に合うとは思っておりませんが、
少しでもお役に立てれば幸いです。

（ちなみにこのブログも、無心でタイマーセットして書きました）
初心者が爆速で理解するAWS Cognitoで認可認証する開発の流れ

# はじめに

初めまして、テクロスでAWSを勉強中の学生アルバイトです。
今回はCognitoとその他AWSサービスを用いたアプリ開発の流れみたいなものをようやく理解したので整理して置いておきます。

# Cognitoとは

認可、認証を司るAWSサービスです。
**認証を担当するのがUser Pool**、**認可を担当するのがIdentity Pool**です。
[AWS Cognitoの公式ドキュメント](https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/what-is-amazon-cognito.html)
（最初公式ドキュメント見たときは「なんだこの分かりにくいドキュメントは！」とか思ってたけどある程度理解してから読むと「詳しくて助かる」ってなる。公式ドキュメントってそんなもんか）

### 認証とは

多分一番わかりやすいのがE-mailアドレスとpasswordでユーザー確認をするものですね。
UserPoolを使いこなすことで、さらにFacebook等のアカウントを使ってユーザー確認することができます。

### 認可とは

AWSの他のサービス(例えばDynamoDB等)にアクセスすることを許可すること。
ユーザー認証が完了したユーザーに許可証のようなものを配布するというイメージで理解しました。

### すなわち

バックエンドを全てAWSで構築するアプリケーションの場合、UserPoolでユーザー認証をし、認証が完了したユーザーにIdentityPoolで認可して、DB等にアクセスするみたいなことができます。
「認証は自前で作ってIdentityPoolだけを使う」とか、「認証だけしたいからUserPoolだけ使う」とかもできます。
しかしAPI gatewayはUserPoolのトークンを用いて呼び出すことができるのでIdentityPoolは不要だったりもします。
この辺がややこしくて少し詰まりました、、

さて、それぞれのpoolについて具体的に見ていきます。

##UserPool

サインアップ(ユーザー登録)やサインインの具体的なコードはググればたくさん出てくるので自分の環境に合わせて調べてもらえばいいのですが、
結局何をしてるかというと、

- 自分の作成したUserPoolのIDやRegionを指定
- 入力されたメールアドレス等の情報を元にユーザー登録、認証
- 認証が成功すれば3つのトークンを返す

この流れですね。

返ってくるトークンはIDトークン、アクセストークン、更新トークンです。

「IDトークン」は認可の際に使用します。
「アクセストークン」はユーザー属性を変更等するときに使用します。
上記2トークンは一時間で切れてしまうので、「更新トークン」を用いてそれらが切れる前にトークンを作り直すことができます。

## IdentityPool(Federated Identity)

認可を担当します。
ユーザープール(あるいは自作機構)を用いてユーザー認証を行なった場合、ユーザーは**認証されたユーザー**と**認証されていないユーザー**の二つに分けられます(例えばユーザー登録したプレイヤーとゲストプレイヤー)。

IdentityPoolを用いることで、この二つのユーザー群それぞれに対してAWSサービスへのアクセス権を与えることができます。
具体的には、あらかじめ**認証ユーザー**用と**非認証ユーザー**用のIAMロールを作っておき、認証情報に応じてそれらを割り当てるようなイメージです。

そのアクセス権に応じて柔軟にサービスの利用を制限することができるようになります。


# アプリケーションの流れ

![scenario-cup-cib2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290141/b0358eee-22f1-85fa-7803-755fb5b59769.png)

[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/what-is-amazon-cognito.html)にはこんな感じの図があるんですが、最初時系列がよく分からなくて意味不明でした。
この図は、

1. アプリを起動したらまずUserPoolで認証し、結果としてトークンを得る
2. そのトークンをIdentityPoolに渡して、credentialsという許可証のようなものを得る
3. credentialsを持つユーザーにだけ他のAWSサービスにアクセスを許可する

という流れを表しています。
1と2はログイン画面で、3からアプリのメイン画面というイメージで理解しました。

### 認可した先でAPI gatewayを使う場合

API gatewayのAPIを叩く場合、API gatewayのオーソライザーという仕組みを使えば、UserPoolで認証済みのユーザーはAPIを叩けるようになります。なのでIdentityPoolでの認可は省くことができます。
（APIの先のサービスに対して認可しなくてもいいのかはよく分かりません）

# おしまい

認可認証あたりについてはすぐ理解できたのですが、プール同士の関係やサービス利用の部分がよく分からなかったので手こずってしまいました、、
認証の部分はいろんな人が分かりやすい記事を作ってくれているのでそれを見ればいいとして、認証後は**AWS SDK**の開発者ガイドのサンプルコードとにらめっこすればなんとかなりそうです！
Angular9 + Firebase でデプロイ (hosting)

# 目的
　初心者がangular9でfirebaseにデプロイ (firebaseではhostingという) したときに躓いたので、共有します。

# 背景
以下の環境でangularプロジェクト作製済み、angular single-pageアプリ作製済み (angularプロジェクト新規作製時に作製されるdefaultアプリでもOK)、firebase設定済みとする。
- Windows10 PRO
- Node v12.16.1
- Angular v9.0.5
- Firebase v7.13.2

以下の良記事もご参考に。
[Angular９とFirebaseでブログを作ってみる１](https://qiita.com/teracy55/items/bc35bb21f98d3d493f9f)

# 方法
1. コマンドプロンプトを起動する。
2. cdまたはcd/dコマンドでAngularプロジェクトのフォルダに移動する。入力例) **cd C:\XXXX\XXXX\XXXX** (←cd以下はあなたの実際のdirectoryに変更)
3. Angularプロジェクトをビルドする。入力例) **ng build**
4. Angularプロジェクトのdirectory内にdistフォルダができていることを確認する。
5. Firebaseにloginする (ブラウザが立ち上がってアカウントやパスワードを入力する)。入力例) **firebase login**
6. Firebaseを初期化する (*Figure 1*)。入力例) **firebase init**
7. Are you ready proceed? と聞かれるので、「Y」と入力する。
8. Which Firebase CLI features do you want to set up for this folder? 等と聞かれるので、↑↓key でHostingを選択し、space keyで仮決定した後にenter keyで決定する。
9. Firebaseプロジェクトが複数ある場合は、対象プロジェクトを聞かれるので、選択する。過去に一度Firebaseプロジェクトを選択しているとdefaultで設定されている (.firebasercファイル中に記入されている)。
10. What do you want to use as your public directory? (public) と聞かれるので、3~4でbuildされたファイルが格納されているフォルダを入力する。入力例) **dist\XXXX** と入力する (←dist\ 以下はあなたの実際のdirectoryを入力)。
11. Configure as a single-page app (rewrite all urls to /index.html)? と聞かれるので、「Y」と入力する (single-page appではない場合は未経験なため本稿は対象外です)。
12. File dist\XXXX/index.html already exists. Overwrite? と聞かれるので、「N」と入力する (yとするとdefaultアプリが上書きされてしまう)。
13. デプロイする (*Figure 2*)。入力例) **firebase deploy**

*Figure 1*
<img width="945" alt="image_01.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616208/9e1100bc-cdc6-a38b-39d7-af73d07d8496.jpeg">


*Figure 2*
<img width="607" alt="image_02.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616208/7d554552-e9eb-4579-4c1e-c8a0bc80365f.jpeg">


# 結果及び考察
私が成功したときは24ファイルがデプロイされた。駄目だったときは0ファイルだったり3ファイルしかデプロイされなかった (firebase的には成功として取り扱われていたが)。駄目だったときはpublic directoryの指定が上手く出来ていなかったのかもしれない。AngularまたはFirebaseのバージョンにより設問が変わるようなので注意。1回目で成功しても失敗しても、2回目以降はfirebaseプロジェクトのdefault設定済みだったり、色々設定が固定されてしまうので、**.firebasercファイル**や**firebase.json**ファイルの中身を確認する必要が出てくるかも。
失われたAndroid Device Monitor

# 課題
- unity(などのAndroid Studioを直接触らない開発環境)で、Android実機のデバッグログのチェックに、Device Monitorを利用していました。
- Android Studio 3.2以降に更新したら、Device Monitorが使えなくなりました。

# 対処
- Android Studioに統合されている"Logcat"を使います。
    - メニュー View > Tool Windows > Logcat 
    - ツールバーでも切り替えられます。
- ログのフィルタリングも可能です。
- スクリーンショットや動画も撮れます。

# 公式ドキュメント
[Android Device Monitor](https://developer.android.com/studio/profile/monitor?hl=ja)
> Android Device Monitor は、Android Studio 3.1 でサポートが終了し、Android Studio 3.2 からは削除されています。Android Device Monitor で使用できる機能は、新機能に置き換えられました。以下の表に基づいて、サポートが終了した機能や削除された機能の代わりに使用できる機能をご確認ください。
WiMAXの速度制限の仕組み

WiMAXの速度制限について

そもそものWiMAXの制限の仕組み
https://www.uqwimax.jp/wimax/plan/note/gigahodai_speedlimit_10/

対策法

速度制限がかかる｜UQ公式
https://www.uqwimax.jp/wimax/support/okomari/speed/case2.html

知っておけば安心！WiMAXで速度制限がかかる3つの条件｜つなが〜るネット
https://tsunaga-ru.net/wimax-speed-limit-2153

おすすめのポケットWiFi｜つなが〜るネット
https://tsunaga-ru.net/pocket-wifi-comparison-4431
JavaScriptでクラスのGetterを含めたオブジェクトの値を列挙する


マルチウィンドウ間でデータのやり取りをする際に、クラスに定義されたgetterの値（返り値）も含めてやり取りしたかったので、クラスに定義されたgetterを含めたオブジェクトの値を列挙する方法を調べた

基本的には以下を参考にした
https://qiita.com/yu0819ki/items/2bc8ba7e46d6ded63f4e

実装は以下のような感じ、
今回は、対象のクラスが他のクラスを継承している場合にそのクラスのgetterも含めて出力したかったので、ちょっと改造している

``` .js

const listupGetter = (obj) => {
    if (obj.constructor.name === 'Object') return [];
    let parentKeys = [];
    // 親クラスを持っている場合には、そのクラスのgetterのキーも取得する
    if (Object.getPrototypeOf(obj).constructor.name !== 'Object') {
      parentKeys =listupGetter(Object.getPrototypeOf(obj));
    }
    // プロトタイプ（クラス）取得
    const proto = Object.getPrototypeOf(obj);

    // Object.getOwnPropertyNames: プロトタイプ(クラス)で定義されているプロパティを全部取得
    const ownKeys = Object.getOwnPropertyNames(proto).filter((v) => {
      // そのうち、デスクリプタとして get があるものだけフィルタリング
      const descriptor = Object.getOwnPropertyDescriptor(proto, v);
      return descriptor.get instanceof Function && v !== '__proto__';
    });
    return [...parentKeys, ...ownKeys];
  }

  /**
   * クラスのGetterを含めた、オブジェクトのすべての値のキーの一覧を取得する
   * functionは無視される
   * @param obj 対象のobject
   * @return {(string)[]} オブジェクトのすべての値のキーの一覧
   */
const getPropertyList = (obj) => {
  return [...Object.keys(obj), ...listupGetter(obj)];
}

// 以下サンプルコード

class Polygon {
  name = "Polygon";
  get test (){
    return 1
  }
}

class Poly2 extends Polygon {
  get test2(){
    return 5
  }
}

const poly1 = new Polygon();
const poly2 = new Poly2();

const obj = {
  get test(){
    return aaa
  },
  ccc: 1
}


console.log(getPropertyList(obj));   // => Array ["test", "ccc"]
console.log(getPropertyList(poly1)); // => Array ["name", "test"]
console.log(getPropertyList(poly2)); // => Array ["name", "test", "test2"]

```

以上