OmniAICreator/Qiita-1.07M huggingface dataset:
初心者から始めるJava、クラスのフィールド・メソッド

#はじめに
この記事は備忘録である。
参考書レベルの内容だが、本記事に掲載するコードについては、
~~**間違えた**ものが中心となる。これは実際にコーディング中に間違えた部分を掲載し、自分で反省するために投稿するという目的によるもの。~~
また、後日にJavaSilver試験問題の勉強を兼ねて復習するため、深い部分の話はここでは触れない。

今回は基礎を理解するために、間違えを記述しない。
##環境
言語：Java11、JDK13.0.2
動作環境：Windows10

#クラスの宣言
クラスを宣言(declaration)するところから見てみる。これは[やさしいJava 第7版](http://mana.on.coocan.jp/yasaj.html)からの引用となる。

```Java:declaration.txt
class クラス名 
{
  型名　フィールド名;
  ...
  戻り値の型　メソッド名(引数リスト)
  {
    文;
    ...
    return 式;
  }
  ...
}
```
この宣言に基づいて実際のクラスと比較してみる。

```Java:Cat.java
class Cat
{
  double weight;
  String color;
  //ここまでが型名とフィールドの宣言。
  //weightとcolorのフィールドが出来た。

  void setWeightColor(double w,String c)
  {
    weight = w;
    color = c;
    
    System.out.println("この猫の体重を" + weight + "にしました。");
    System.out.println("この猫の色を" + color + "にしました。");
  }

  double getWeight()
  {
    System.out.println("猫の体重を更新します。");
    return weight;
  }

  void introduce()
  {
    System.out.println("この猫の体重は" + weight + "kgです。");
    System.out.println("この猫の色は" + color + "色です。");
  }
  //ここまでがメソッドの記述。戻り値の型に注意。
  //CatクラスはsetWeightColor(double w,String c),getWeight()
  //それにintroduce()のメソッドを持つ。
}
```

フィールドとメソッドがどれか、というのはこれでわかると思う。これらフィールドとメソッドのことを、クラスの**メンバ(member)**と呼ぶ。

余談だが、クラス名・フィールド名・メソッド名はいずれも**識別子(identifier)**である。よって、以前扱った識別子のルール（変数のルールと思えばいい）に従っていれば、**どんな名前でも好きなように付けることが出来る**。識別子的に意味が通っていなくてもプログラム上は問題ないが、可読性を考慮して書くと後から読み返す・誰かに読んでもらうときに分かりやすくて良い。

以下は(一応)OKな例。可読性は皆無。こんな状態でも、IDE（統合開発環境）やテキストエディタの仕様次第では、（比較的）障害もなくソースを書くことが出来るので、本当に文明の利器といったところだ。

```Java:longLongSoLongNames.java
class UnitedKingdomOfGreatBritainAndNorthernIreland
{
  int pneumonoultramicroscopicsilicovolcanoconiosis;
  String Tetaumatawhakatangihangakoauaotamateaurehaeaturipukapihimaungahoronukupokaiwhenuaakitanarahu;
  
  void Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch()
 {
   System.out.println("世界一長い英単語は、
　　病名では" + pneumonoultramicroscopicsilicovolcanoconiosis
    + "世界一長い地名は、"
    + Tetaumatawhakatangihangakoauaotamateaurehaeaturipukapihimaungahoronukupokaiwhenuaakitanarahu 
    + "です。")
 }
}
```

##フィールド
`Cat`クラスで宣言された`weight`と`color`は、`Cat`を使ってオブジェクトやインスタンスを新たに作ってから、そのオブジェクトに値を格納することが出来る。
例：

```Java:mainCatCreate.java
Cat firstCat = new Cat();
firstCat.weight = 2.3;
firstCat.color = "茶トラ";
```
これは`new`できちんとオブジェクトを作ってさえ置けば、いくつでも用意することが出来る。
##メソッド
上記の例に倣って、すべてのオブジェクトにいちいち値を用意していては時間がかかりすぎるので、`Cat`クラスに書いたメソッドを使う。

```Java:methodTry.java
Cat firstcat =new Cat();

firstCat.setWeightColor(2.3,"茶トラ")

double myCatWeight = firstCat.getWeight();

System.out.println("我が家初めての猫の体重は" + myCatWeight + "でした。");
```

#終わりに
簡単なクラスだったが、書くにあたり調べるのを含めて20分程度かかってしまった。沢山書かなければやはり身に付かないし、こういったクラスをバンバン量産するのが醍醐味だと感じているので、クラスを作るだけの回を設けて挑戦してみるのもありかもしれない。

#参考
出来るだけ自分で変数や式を書いてコンパイルしているので、完全に引用する場合はその旨記述する。

[やさしいJava 第7版](http://mana.on.coocan.jp/yasaj.html)
[Java SE11 Silver 問題集](https://book.impress.co.jp/books/1118101186)（通称黒本）
Heroku入門

# 概要
個人的に`Firebase`は使っているのですが、他の似たシステムも試してみたいなと思い
`Heroku`に入門してみました。

こちらを動画にしてみています。
興味ある方はどうぞ。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/zpCasla2pbo/0.jpg)](http://www.youtube.com/watch?v=zpCasla2pbo)


[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/AJ8ROTi_-uo/0.jpg)](http://www.youtube.com/watch?v=AJ8ROTi_-uo)


## 最初の気持ち
正直、Firebaseっぽいものという印象しかなかったので、何かしらCLIをインストールして、
これを`deploy`すると動くんだと思っていました。

# 手順
## `Heroku`へ登録
こちらのページでユーザ登録を行います。
https://jp.heroku.com/
基本的な情報を入力すると確認メールが送られてくるのでそれで認証する形です。

<img width="300" alt="スクリーンショット 2020-03-12 6.17.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/66c95275-c4e8-b0c7-914e-1c7799a39fd4.png">


その後、私は「AccountSetting」＞「Billing」でクレジットカードを登録しました。
登録しなくてもフリープランである程度使用できると思いますが…

<img width="300" alt="スクリーンショット 2020-03-12 6.21.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/eb326fe1-c257-5b3d-a04b-a71c62974312.png">



## 環境構築
次にcommandで操作可能なCLIをインストールしました。

下記のページに詳細なやり方はかいてありますが…
https://devcenter.heroku.com/articles/heroku-cli

私はbrewでインストールしたので手順をメモっておきます。

下記のcommandを入力するとインストールが完了します。

```shell
brew tap heroku/brew && brew install heroku
```

その後、先程作ったアカウントと紐付けるためにログインcommandを入力します

```
heroku login
```

メッセージが現れるのでなにかのキーを押すと
<img width="500" alt="スクリーンショット 2020-03-12 6.38.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/9ffdccb8-1b26-1f1b-b263-22ed3825bb1d.png">

ログイン用のウェブページが表示されます。
<img width="300" alt="スクリーンショット 2020-03-12 6.39.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/d67bb376-5329-fdb4-ec8b-c1502d12676d.png">

このウェブページでログインを選択すると、cliへのログインは完了です。
最後に、自分の登録したメールアドレスが表示されると思います。
<img width="500" alt="スクリーンショット 2020-03-12 6.40.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/734cac67-623d-0215-9938-6af2f027de09.png">


## アプリテスト
cliを利用してアプリケーションをテストしてみます。

こちらのサイトを参考に勧めます。
https://devcenter.heroku.com/articles/git

最初に、作業フォルダの作成を行い。
フォルダ内に簡単な`index.php`のデモファイルを作成します

```shell
mkdir heyhashito
cd heyhashito
nano index.php
```

```php:index.php
<?php echo "test page!" ?>
```


フォルダをgitで初期化、ローカルコミットを行います。

```
git init
git add .
git commit -m "commit!"
```

次に、`heroku`内にプロジェクトを作ります。

```
heroku create
```

コードをデプロイします。

```
git push heroku master
```

最後に、実際に動いていることを確認します。
先程`heroku create`で表示されたアプリケーション名を参考にopenコマンドを入力します。

```
heroku open -a {aap name}

```
このように確認できます。
![スクリーンショット 2020-03-12 7.36.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/0add19fd-2f4a-d75d-bcbb-b81af191b299.png)


# 最後に
## 最後の気持ち
`git`との依存性が高いので、雑にしか使ったこと無い私は詰まりました。
また、サーバサイド側の言語が最初のページにある通り、サーバサイド側も基本的に構築する必要があります。
データベースとか価格は安いそうなので、もう少し勉強して使ってみたいと思いました。

あと、動画を撮影したあとに記事を書いているのですが…こっちの方が簡素にかけていますね。

## 必要だった知識
`Heroku`を扱う場合は下記は最低勉強したほうが良い
・`npm`や`Composer`などのファイル管理システム
・`git`!!!
DataFrameから、1つの列をDataFrameで取得する

わかりにくいタイトルになってしまいましたが、そのままの記事です。汗

結論的には、
ブラケット（角括弧）によるアクセスにおいて
**ブラケットが1つだとSeries，ブラケットを重ねるとDataFrameとして取り出せます。**

```python
#Seriesで取れる
df["col"] # df.colも同様

#DataFrameで取れる
df[["col"]]
```

Seriesで取り出したものをDataFrameへ変換することも可能ですが、ブラケットを重ねるのがお手軽です。

複数列を指定して取得する場合は、ブラケットを重ねることが必須となので必ずDataFrameで取れます。

```python
df[["col1", "col2", "col3"]] #DataFrameで取れる
```

なお、Seriesで取れてしまうことで都合が悪いケースとしては、sklearnの予測モデルにインプットする場合が挙げられます。
1変数でモデルを作るときに、Seriesでインプットすることで次のようなエラーが出力されます。

```python
ValueError: Expected 2D array, got 1D array instead:
~~
Reshape your data either using array.reshape(-1, 1) ~~
```

以上です。
すべてのAPIレベルで使用できる ?attr/ 属性を使うべし

|記述|説明|
|:--|:--|
|`?android:attr/foo`| `android:`あり。<br>Android プラットフォームで定義されている静的ライブラリ。<br>例) Layout `android:id` <br> |
|`?attr/bar`|`android:`なし。<br>AppCompat や MaterialDesignComponentで定義。<br>コンパイル後アプリに同梱される。<br>例) Layout `app：baz`|

`colorPrimary`など両方に存在する場合は、多くのAPIレベルで利用できる`?attr/bar`を使うことをおすすめします。そのライブラリを正しく複製してバックポートしています。

[👉Theme.MaterialComponents の カラーテーマ](https://qiita.com/chanzmao/items/59e930b885396072ac8b)
【Go環境構築】go getのプロキシ設定

# はじめに
社内でGo環境構築中に、go getのプロキシ突破で少し手こずったので備忘録。

# 環境
* windows10
* 社内ネットワーク(プロキシ環境下)

# プロキシ設定なしの場合のgo getエラーメッセージ
```
C:\Users\xxxx>go get github.com/gin-gonic/gin
# cd .; git clone -- https://github.com/gin-gonic/gin C:\Users\xxxx\go\src\github.com\gin-gonic\gin
Cloning into 'C:\Users\xxxx\go\src\github.com\gin-gonic\gin'...
fatal: unable to access 'https://github.com/gin-gonic/gin/': OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443
package github.com/gin-gonic/gin: exit status 128
```

要約すると、githubリポジトリにアクセスできないと言っている。

# プロキシ設定
コマンドプロンプトで下記コマンドを実行。

```
git config --global http.proxy http://proxy.example.com:8080
git config --global https.proxy http://proxy.example.com:8080
git config --global http.sslVerify false 
```

また、設定内容は.gitconfigファイルに記述されている。
デフォルトではたぶんC:\Users\\{username}に存在している。
下記のように記述されていればOK。

```:.gitconfig
[http]
	proxy = "http://proxy.example.com:8080"
	sslVerify = false
[https]
	proxy = "http://proxy.example.com:8080"
```

設定後、エラーが出なければ成功している。

# 参考ページ
[proxy内でGo環境の構築](https://qiita.com/reud/items/e135b5ccb666a39b5b25)
[GitコマンドをProxy環境可で利用する。](https://qiita.com/ryotaro76/items/0e40ffb6173b1580e671)
Alloyでパズル (11) かけっこのパズル

Alloyでパズル(1) と変わらないようにしか見えない [かけっこのパズル](http://bonotake.hatenablog.com/entry/20110210/1297345623)。
でも書いている人が人だし、自分が何か見落としているのかもしれない。

# 問題

> 一郎、二郎、三郎の三人で駆けっこをして、その結果を次のように言っています。
>
一郎：「僕は一番じゃない」
二郎：「僕は一番だ」
三郎：「僕は二番だ」

三人のなかで一人だけウソをついています。それは誰でしょう？

# リスト

普通のウソつきパズルだった。
何か自分的に新規要素をと思って`seq`を使ってもみたが、順位が 0,1,2 になって読みづらいのでやめた。
`sig Race`とか別建てしてみたがかえってややこしくなるだけだったのでやめた。

```alloy
// かけっこのパズル
abstract sig Runner { ranking: disj (1+2+3) }
one sig Ichiro, Jiro, Saburo extends Runner {}
sig Lier in Runner {}
fact {
    one Lier
    Ichiro not in Lier <=> Ichiro.ranking!=1
    Jiro not in Lier <=> Jiro.ranking=1
    Saburo not in Lier <=> Saburo.ranking=2
}
run {}
```
結果的には、ルートシグネチャ１種類＆enum不使用しばり くらいが牛と違うところか。
１ヶ月以上前に書いたものから何も進歩していないのが、なんか悔しい。

# 結果
![かけっこ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20005/189521c7-1292-b7e2-8a87-858860abf710.png)

# 参考

- bonotakeの日記 : [かけっこのパズル revisited](http://bonotake.hatenablog.com/entry/20110210/1297345623)
- 檜山正幸のキマイラ飼育記 : [長男に教わったパズル](https://m-hiyama.hatenablog.com/entry/20090310/1236652198)
兵庫県の地表形状（建物等含む）を地図上に可視化【DSM】

## 1. 背景
兵庫県の1m精度の地表面（建物等含む）点群データを3D地図上に表示する。
詳しい方法は[個人ブログ](https://sw1227.hatenablog.com/entry/2020/03/12/075147)に公開するが、JSXのシンタックスハイライトが失敗したため、ソースコードのみQiitaに記載する。

**前処理等の詳細**
[兵庫県土の1m精度3次元データをWeb地図上に3D可視化【DSM】](https://sw1227.hatenablog.com/entry/2020/03/12/075147)

![turbo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58850/5c5856d3-459b-8f7f-a8c9-889c48dc4cc8.jpeg)


## 2. 実装
### 2.1. 注意点
#### 定数
コード内の `YOUR_MAPBOX_TOKEN`, `YOUR_MAP_STYLE` には値を埋める必要がある。

- `YOUR_MAPBOX_TOKEN`: [Mapbox](https://www.mapbox.com/)のアカウントを取得してTOKENを発行する
    - => JavaScriptの中に書くことになるため、悪用防止のためドメイン制限をかける
- `YOUR_MAP_STYLE`: Mapboxの用意している[デフォルトスタイル](https://docs.mapbox.com/api/maps/#styles)から選択
    - => 例えば`mapbox://styles/mapbox/dark-v10`のような文字列
    - => Mapboxアカウントを取得し、[Mapbox Studio](https://www.mapbox.com/mapbox-studio/)でオリジナルスタイルを作成しても良い

#### useAsyncEffect()
ソースコード中の`useAsyncEffect()`は、「[Reactで非同期処理が可能な副作用フックを作成する](https://qiita.com/sw1227/items/6ec0dbc244e5652c0473#%E8%A7%A3%E6%B1%BA%E7%AD%96%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%99%E3%82%8B%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3%83%83%E3%82%AF%E3%81%AE%E4%BD%9C%E6%88%90)」に記載してあるものを用いる。importするなりして補う。


### 2.2. ソースコード
```jsx:DsmKobe.jsx
import React, { useEffect, useState } from "react";
import DeckGL from "@deck.gl/react";
import { PointCloudLayer } from "@deck.gl/layers";
import { StaticMap } from "react-map-gl";
import { COORDINATE_SYSTEM } from "@deck.gl/core";
import * as d3 from "d3";
import GL from "@luma.gl/constants";

import data from "../data/nada_latlon.csv";

// Constants
const MAPBOX_TOKEN = "YOU_MAPBOX_TOKEN"
const initialViewState = {
  longitude: 135.2177,
  latitude: 34.719,
  zoom: 13,
  pitch: 0,
  bearing: 0
};


// Main Component
const DsmKobe = () => {
  const [layers, setLayers] = useState([]);

  useAsyncEffect(async () => {
    const csv = await d3.csv(data);

    setLayers([
      new PointCloudLayer({
        id: "pointcloud",
        data: csv,
        coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
        pointSize: 2,
        getPosition: d => [parseFloat(d.lon), parseFloat(d.lat), parseFloat(d.h)],
        getNormal: [0, 0, 1],
        getColor: d => Object.values(d3.color(d3.interpolateSinebow((parseFloat(d.h)) / 500))).slice(0, 3),
      }),
    ]);
  }, []);

  return (
    <DeckGL
      initialViewState={initialViewState}
      controller={true}
      layers={layers}
      parameters={{
        // Additive blending
        blendFunc: [GL.SRC_ALPHA, GL.ONE, GL.ONE_MINUS_DST_ALPHA, GL.ONE],
        blendEquation: GL.FUNC_ADD
      }}
    >
      <StaticMap
        mapboxApiAccessToken={MAPBOX_TOKEN}
        mapStyle="YOUR_MAP_STYLE"
      />
    </DeckGL>
  );
};

export default DsmKobe;
```

### 2.3. 補足
- `blendFunc`, `blendEquation`でAdditive blendingとすることにより、点群が光っているような見た目になる
- カラースケール関数を用いて標高に応じた点群の色分けを行っている
    - 色に対応する標高の範囲は決め打ちになっているので改善の余地あり
- データ出典：[兵庫県_全域数値地形図_ポータル（2010年度～2018年度）](https://www.geospatial.jp/ckan/dataset/2010-2018-hyogo-geo-potal)
ec2などでssh-copy-idコマンドが失敗する時の新規ユーザと認証鍵の設定

#いろんなところで見かける ssh-copy-id コマンドだけど...
パスワード認証など、他の認証手段が有効な時にしか使えないのですよね。
こんなエラーが出ちゃいます：

```sh
ssh-copy-id -i ~/.ssh/key_taiyo.pub taiyo@remote.site
/usr/bin/ssh-copy-id: INFO: Source of key(s) to be installed: "/Users/taiyo/.ssh/key_taiyo.pub"
/usr/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed
/usr/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys
taiyo@remote.site: Permission denied (publickey).
```
AWSのec2やlightsailなど、デフォルトで .pem 認証鍵しか手段が無い場合は、別の方法が必要です。
つても手動でちょいちょい書いてあげるだけ。カンタンですよ。



#大まかな流れ：　下準備 〜 リモートに設置 〜 sshd再起動
ローカルマシンでキーペアを作成
リモートにユーザ作成
ユーザの~.sshフォルダを作成
公開鍵を設置
sshd 再起動

#前準備：
```
#前準備：ローカルマシン側でキーペアを作成
ssh-keygen -f ~/.ssh/key_taiyo -t ed25519

##前準備：ローカルマシン側でキーファイルを登録
ssh-add ~/.ssh/key_taiyo

##前準備：公開鍵の中身を確認 (のちほど ssh でリモート側に転記)
cat ~/.ssh/key_taiyo.pub

# 注意: ssh-copy-id コマンドは一度pw認証が必要で脆弱なのでネット越しに使わない。
# "一時的に PasswordAuthentication yes" する手法がググると出てくるが、それは非推奨。
```

#リモート側にて
```
#ユーザー作成
adduser taiyo

#ユーザーにスイッチ
su taiyo

# .ssh を設置
mkdir ~/.ssh

#このファイルに、.pub の中身をそのままペースト
nano ~/.ssh/authorized_keys

# sshd をリスタート
sudo systemctl restart sshd
```

```
# もしエラーが出たら、パーミッションの設定が必要かも
chmod 700 ~/.ssh
chmod 600 ~/.ssh/*
```

#これで任意のユーザー・キーペアでリモートログインが可能に。
デフォルトのubuntuユーザーは殺しても良いです。
後はsudoerへの追加など、作業に合わせて設定しましょう。

作業者の環境は MacOS 10.15.3、リモートはUbuntu18.04ですが、大概の*nixで共通だと思います。
Rspecに関するメモ書き


※適宜更新

Headless Chromeを使って試験をしたい場合はこれをかく。
もちろんGemは入れないといけないのでGemfileには必要なGemが入っていることが前提。

```spec-helper.rb
/require/‘capybara/rspec’
RSpec.configure do |config|
  config./before/(:each, type: :system) do
    driven_by :selenium_clome_headless
  end
```
言語処理100本ノック-51:単語の切り出し

[言語処理100本ノック 2015](http://www.cl.ecei.tohoku.ac.jp/nlp100/)[「第6章: 英語テキストの処理」](http://www.cl.ecei.tohoku.ac.jp/nlp100/#ch6)の[51本目「単語の切り出し」](http://www.cl.ecei.tohoku.ac.jp/nlp100/#sec51)記録です。
今回は技術的には前回とほとんど変わりません。10行に満たないコードで終わる簡単なノックです。

# 参考リンク

|リンク|備考|
|:--|:--|
|[051.単語の切り出し.ipynb](https://github.com/YoheiFukuhara/nlp100/blob/master/06.%E8%8B%B1%E8%AA%9E%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E5%87%A6%E7%90%86/051.%E5%8D%98%E8%AA%9E%E3%81%AE%E5%88%87%E3%82%8A%E5%87%BA%E3%81%97.ipynb)|回答プログラムのGitHubリンク|
|[素人の言語処理100本ノック:51](http://qiita.com/segavvy/items/f25fd2ff572cc8ec0534)|多くのソース部分のコピペ元|

# 環境

|種類|バージョン|内容|
|:--|:--|:--|
|OS|Ubuntu18.04.01 LTS|仮想で動かしています|
|pyenv|1.2.16|複数Python環境を使うことがあるのでpyenv使っています|
|Python|3.8.1|pyenv上でpython3.8.1を使っています<br>パッケージはvenvを使って管理しています|

# [第6章: 英語テキストの処理](http://www.cl.ecei.tohoku.ac.jp/nlp100/#ch6)
## 学習内容
> Stanford Core NLPを用いた英語のテキスト処理を通じて，自然言語処理の様々な基盤技術を概観します．
>> [Stanford Core NLP](https://stanfordnlp.github.io/CoreNLP/), ステミング, 品詞タグ付け, 固有表現抽出, 共参照解析, 係り受け解析, 句構造解析, S式

## ノック内容
> 英語のテキスト（[nlp.txt](http://www.cl.ecei.tohoku.ac.jp/nlp100/data/nlp.txt)）に対して，以下の処理を実行せよ．

### [51. 単語の切り出し](http://www.cl.ecei.tohoku.ac.jp/nlp100/#sec51)
> 空白を単語の区切りとみなし，50の出力を入力として受け取り，1行1単語の形式で出力せよ．ただし，文の終端では空行を出力せよ．

# 回答
## 回答プログラム [051.単語の切り出し.ipynb](https://github.com/YoheiFukuhara/nlp100/blob/master/06.%E8%8B%B1%E8%AA%9E%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E5%87%A6%E7%90%86/051.%E5%8D%98%E8%AA%9E%E3%81%AE%E5%88%87%E3%82%8A%E5%87%BA%E3%81%97.ipynb)

```python
import re

with open('./050.result.txt') as file_in, \
     open('./051.result.txt', 'w') as file_out:
    for line in file_in:
        if line != '\n':
            line = re.sub(r'''
                         [\.|;|:|\?|!|,]*  # . or ; or : or ? or ! or , が0回以上
                         \s                 # 空白
                       ''', '\n', line, flags = re.VERBOSE)
            print(line, file=file_out)
```

## 回答解説
### 正規表現
前回に続き正規表現を使った処理。今回は空白(スペース)を改行に置換です。
肯定の先/後読みアサーションがない分、今回の方がシンプルです。空白前に記号系があった場合も置換対象にしました。

### 出力結果(実行結果)
プログラム実行すると以下の結果(先頭20行抜粋)が出力されます。

```text:051.result.txt(先頭20行抜粋)
Natural
language
processing

From
Wikipedia
the
free
encyclopedia

Natural
language
processing
(NLP)
is
a
field
of
computer
science
```
Paizaのスキルチェックの例題のデバッグをJupyterとかのローカル環境でやるときの入力の手間を省きたい【Python】

###挨拶
本記事が初投稿です。気になったことなどをほそぼそと書いていきたいと思いますのでよろしくおねがいします。


#はじめに　paizaスキルチェックとは
paizaスキルチェックとは、paiza株式会社が運営する[paiza](https://paiza.jp/)という、IT人材の育成、就活支援を目的としたサイトで受けられるプログラミングのスキルテストです。
ユーザーはこのスキルチェックでクリアできた問題の難易度に応じてランク付けされ、コードを見た企業からスカウトされることもあります。

#この記事の目的
**出題例デバッグ時の面倒なコピペ作業からの脱却**
paizaのスキルチェックを含むプログラミングテストの問題にはたいてい例題として入力例と出力例が載っていて、まずはその例題から試しますよね。
paizaの場合、問題画面の最下部からオンライン上で試しに実行して動作を確認できますが、難易度が上がり、コードが長くなってくるとJupyter Notebookなどで小分けにデバックしたくなると思います（少なくとも私はそうなります）。
その際は入力例をコピペして使うことになりますが、いちいち一行ずつ写すのは**面倒**ですし、とはいえ**提出する時の形のまま**書きたいという気持ちもあります。
ということでなんとかしたい、なんとかしよう。ということでなんとかしました。

#どうしたか
単刀直入に申しますと、**`input()`関数をオーバーロード、というか上書き**しました。

以下の画像は、[paizaラーニング スキルチェック入門編](https://paiza.jp/works/skillcheck/primer)の入力例です。
これを
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501281/b209c611-ecf3-d731-f3bd-bd23c7b1b2ba.png)
こう代入するだけで使える関数を作るところが目標です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501281/b8b35f11-47ab-3e39-9c2d-474980ebaf6d.png)
　　・
　　・
　　・

```python:paiza_test.py
def preinput(input_text):
    out=input_text.split("\n")
    for i in out:
        yield i

def input(reset=False):
    global input_text,inp
    if reset:del inp,input_text,repeat;return
    try:return inp.__next__()
    except:
        if repeat:inp=preinput(input_text)
        return inp.__next__()

def def_input(s,isRepeat=False):
    global input_text,inp,repeat
    input_text=s
    repeat=isRepeat
    inp=preinput(input_text)
```

**できました**（雑）。
これをpyファイルとしてデバックを行うディレクトリに置いてインポートして使います。

```python:debug.ipynb
from paiza_test import*
```
先程のように**入力例を代入した変数を用意して、`def_input()`関数に放り込めば準備完了**です。

```python:debug.ipynb
input_text="""6
apple
book
information
note
pen
pineapple"""

def_input(input_text)
```
あとはデバッグしたいコードを提出したい**そのままの形**で書くことができます.

```python:debug.ipynb
n=int(input())
for i in range(n):
    print(input())
```

```python:出力
apple
book
information
note
pen
pineapple
```
デフォルトでは入力が最後まで行くと次呼び出した際にエラーを吐きますが、`def_input()`を呼ぶ際に引数の`isRepeat`を`True`に指定すれば繰り返し頭から出力します。

```python:
def_input(input_text,isRepeat=True)
n=int(input())
for i in range(3*n):
    print(input())
```

```python:出力
apple
book
information
note
pen
pineapple
6
apple
book
information
note
pen
pineapple
6
apple
book
information
note
```

また、引数`reset`を`True`にして呼び出すと`def_input()`を呼び出す前の状態にリセットされます(戻り値はありません)。

```
def_input(input_text)
input(reset=True)

input()　　#------> error
```


3/16追記
`isRepeat`の設定タイミングを`def_input()`呼び出し時に修正。


#まとめ
この記事が同じ不満を抱いている人に届いて、お役に立てたら嬉しいです…
paiza以外にもAtCoderなど他のプログラミングコンテストのデバッグにも使えると思います。
もっといい方法や改善点があるよーって方はコメントを頂けると幸いです。
Eclipse - java.lang.ClassNotFoundExceptionを解決する。

#Eclipse - java.lang.ClassNotFoundExceptionを解決する。

EclipseとJava Fxを使い開発を行っていたとここのエラーに遭遇。
早く解決しなければということで調べ回っても解決に至る回答が見つからなかったため、ここに残しておこうかなと。

##ひたすらに調べた


まずこんな投稿を発見。
https://qiita.com/yuki_tanaka_lib/items/91d4f1ce56b020af8e2c
確認してみるも変わらず。

これはどうだろうたくさん書いてある
https://ts0818.hatenablog.com/entry/2019/08/23/165818
Classファイルの生成場所を確認しても正しく生成されているし...

あと他にEclipseが関連してそうなものはない...

##原因がわからない→仕方ない考えよう

調べればすぐ解決策が出てくるだろうと思っていました。
しかし調べて見つからなければ自分で考え、原因を探るしかありません。
片っ端から気になる部分を解決していく...

##結論。

はい、もう長く書くのも面倒なので結論です。

**フォルダ名に日本語を使うな。**

これ以降はこんな当たり前のミスを何故してしまったかのいいわけです。
暇な方は見ていってください…笑


##言い訳

もともとの開発環境がmacだったんですよ、その際は何も問題なかったのです。
そして普段はGitなどを使いソースコードの共有を行ったいるのですが、そのコードは学校の課題のものだったためGoogleDriveに入っていました。
久しぶりにWindowsで作業をしようと思い、同じGoogleDrive内のフォルダを選択しワークスペースに設定したところ、Windowsの方ではGoogleDriveのパス内に日本語が含まれていたのです。😃
ちゃんちゃん。
openshift4.3でlaravelする②：Add Storageする

# はじめに

前回まででopenshift4.3上で基本的なlaravel環境は整いましたが
例えばユーザがアップロードしたファイルを保存するなどする場合
laravelの場合、一般的に「`./storage/app/public`」にファイルを格納し
「`./public/storage`」としてシンボリックリンクを張り公開します。

つまりPodのDeployからファイルに変更がある可能性があるわけで
現状だとPodが再Deployされると揮発性なので消し飛んでしまいます。

そこで、このpublicにstorageを追加したいと思います。

前回までの記事
- [openshift4.3でlaravelする](https://qiita.com/imp555sti/items/ad530f671015b64b0af0)
- [openshift4.3でlaravel+MariaDBする](https://qiita.com/imp555sti/items/c3f36e2710fe9bc6c76b)

# ストレージの追加

最終的にはYAMLですべての環境を準備したいところですが
今回はGUIからの操作で実現します。

Topology画面からPHPを選択し、Actions>Add Storageをクリックします。

![2020-03-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324255/0a6c6b6b-9b11-1ab0-bd9c-349b4b34e4f6.png)
![2020-03-12 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324255/e1df0fda-54fc-0fd5-a1f2-8c775bc27f72.png)

表示されるAdd Storage画面よりClaimName, Mode, Size, MountPathを指定します。
Claimは新規に作成しますので「Create New Claim」を選択
Webからの書き込みなのでSingle UserではなくShared Accessを選択しました。
今回はLaravelの「`./storage/app/public`」つまり「`/opt/app-root/src/storage/app/public/`」を指定します。

![2020-03-12 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324255/8e73660f-98f5-50d0-e023-5e0ec7e7183d.png)
![2020-03-12 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324255/33b45f08-a77b-c1f5-aeda-31ffaafcdd62.png)
![2020-03-12 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324255/9f468735-72ea-6020-0bdf-83286f41cb50.png)

するとDelplyConfigが修正されDeployが行われます。

![2020-03-12 (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324255/d7ac0b53-3894-fb41-21f8-24f6411df05c.png)
![2020-03-12 (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324255/5e91a306-4b93-e1ef-7390-ddc4a5015a2a.png)

一応Podに入ってTerminalから確認してみます。
Claim自体はroot:rootで作成されるようですね。
Podの起動ユーザでファイルを作成できたので問題ないでしょう。

![2020-03-12 (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324255/6a7696c9-b9aa-c8d5-d15d-517ad06dde82.png)
SQLとは [初心者向け] [シンプルに]

#SQL（エスキューエル）とは :speech_balloon:
データベース操作を行うことができる**データベース言語**の一つ。
（データベースとやりとりする言葉）

####[データベース](https://qiita.com/freedomdom/items/362a4f656ef675a58e2c)とは？
データベースとは大量のデータを登録したり、整理して保存しておいたり、
データを集めて管理しているもののこと→　由来　[Data(情報)Base(基地)]　情報を集めた基地！！

##SQLで行う基本的な構文 (命令):speech_balloon:
SQLを使ったデータベースに対するSQLの基本構文(命令)は4つ。

SELECT文・・・データを取得
INSERT文・・・データを追加
UPDATE文・・・データを更新
DELETE文・・・データを削除

この4つを駆使してデータベースを操作していく。

こんなイメージ↓
![image0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587428/c400a487-27e2-1e55-c2cb-2fc2a5d91af1.jpeg)
私が理解しようとした時に書いた絵です。
画力が本当にヤバイのですが載せてみます。
(SELECT、INSERT などと書くだけで処理が実行されるわけではありません。
実行するための書き方があります)



[データベース](https://qiita.com/freedomdom/items/362a4f656ef675a58e2c)には色々種類があって、
**MySQL**、Oracle、SQLServer、PostgreSQLなどがある。
このうち**MySQL**は、世界で最も普及しているオープンソースのデータベースだそう。
【Python】0で穴埋めするときに必要な桁数を計算する【メモ書き】

`log`を高校で習ったときに`log`っていつ使うねん！って思ってたら使いどきあったのでメモメモ。

```python
import math

list = [1,2,3,4,5,6,7,8,9,10,11]

number_of_val = len(list)
number_of_padding_zero = math.ceil(math.log10(number_of_val))
format_pattern = '{:0'+ str(number_of_padding_zero) +'d}'

for i,val in enumerate(list):
  serial_number = format_pattern.format(i)
  print(serial_number)
```

実行結果：

```
00
01
02
03
04
05
06
07
08
09
10
```

連番でファイル出力するときに0で穴埋め（ゼロパディング）するということを想定。
テスト用なのでコード中の`list`には数字入ってますが、ファイルパスとかが入ってると思ってください。
出力ファイル数を数えて、log10をとって切り上げ。`1`からとかではなく`0`から出力するといい感じになる。

`format_pattern = '{:0'+ str(number_of_padding_zero) +'d}'`
↑このコード、絶対ダメな気がするんだけどとりあえず動くからいいやってことで。
何かいい感じの書き方とかがあったらコメントで教えて下さい。
`join`メソッドとか使えよって思う方もいるだろうけど、
個人的に`+`でつなぐ表記が大体の言語で共通して書けるので好きってだけです。

そういえばlog10って常用対数って言うんだったね。めっちゃ使うってことよね。
ふと調べてみたら常用対数をとって桁数数えるのふつうのコトだったわ。
いやでも、実際に使う機会ないと「桁数わかってどうするのか？」ってなるしさ。
あと、そもそも桁数を常用対数使ったら求められるコト完全に頭から抜けてたんだけど、
「対数使ったらいい感じになりそう！」ってなんとなく思って気づいたんだ。
むしろ褒めて()
[HTML&CSS]画像と文字を互い違いに表示させる方法

忘れたときすぐ見れるよう自分用メモ

こういうよく見るレイアウト
![_Users_sora_Desktop_HTML_%E6%A8%A1%E5%86%991_index.html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246636/770cf94d-ff9c-02df-25e6-2c954724fc82.png)

HTMLはこんな感じ

```html
<div id="businesses">

      <div class="business">
        <img src="imgges/picture_pc_0c274de1b76f4063c7ce088be3b57004.jpg" alt="ビジネス1">
        <div class="desc">
          <h3>1.テキストテキストテキスト</h3>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </div>

      <div class="business">
        <img src="imgges/picture_pc_3d21e88b8ee49951e3c0931173a8f8ed.jpg" alt="ビジネス2">
        <div class="desc">
          <h3>2.テキストテキストテキスト</h3>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </div>

      <div class="business">
        <img src="imgges/picture_pc_c61a50ca0b2335d65a46645b73a2a480.jpg" alt="ビジネス3">
        <div class="desc">
          <h3>3.テキストテキストテキスト</h3>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </div>

    </div>
```

CSSはこんな感じ

```css

.business {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}

.business:nth-child(even) {
  flex-direction: row-reverse;
}

/*これ以下は無視して*/
.business img {
  width: 50%;
  height: auto;
}

.business .desc {
  width: 50%;
  padding: 40px 20px;
  background-color: #aaaaaa;
  color: #fff;
}

.business .desc h3 {
  font-size: 20px;
  margin-bottom: 30px;
}

.business .desc p {
  width: 80%;
}
```

#ちょっと解説
今、HTMLの構造は以下の通り(descより下は無視)
<img width="180" alt="スクリーンショット 2020-03-12 2.40.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246636/9b66c9d1-1e11-7096-1578-ddb935cd0c72.png">

まずbusinessの2つの子要素img、descを横並びにさせたいのでbusinessのdisplayをflexにする

```css
.business {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
```
display:flexは通常左から右に横並びさせるので、この場合2番目のbusinessの並び順を右から左に変えてやれば写真とテキストが互い違いに表示される
2番目のbusinessの並び順を右から左にするにはこう

```css
.business:nth-child(even) {
  flex-direction: row-reverse;
}
```

このコードは偶数個目のbussinesの並び順を逆転させることができるので、businessをあとから追加しても自動的に互い違いに表示される

#最後に
[【初心者向け】HTML+CSS練習用のサンプルコード](https://note.com/krowl/n/n0b339b21bb50)
題材、画像はここからお借りしました

解説もあるので置いときます
[初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その1](https://magazine.krowl.jp/4026/)
[【初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その2](https://magazine.krowl.jp/4037/)
[【初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その3](https://magazine.krowl.jp/4054/)
交絡因子による影響を排除したデータ処理（理論編）

#はじめに
解析データに含まれる交絡因子の排除の方法やz-scoreについて自分なりに図付きで解釈してみました。
記事は[こちら](https://www.aiprogrammers.net/entry/2020/03/12/022158)にまとめました。
(画像をたくさん貼れるので...)

[交絡因子による影響を排除したデータ処理（理論編）](https://www.aiprogrammers.net/entry/2020/03/12/022158)
https://www.aiprogrammers.net/entry/2020/03/12/022158
【Python】MAEとRMSEの計算方法

###目的
Pythonを使って平均絶対誤差(Mean Absolute Error:MAE)と二乗平均平方根誤差(Root Mean Squared Error:RMSE)を計算する。

記事は[こちら](https://www.aiprogrammers.net/entry/2020/04/29/201214)にまとめました。
[【Python】MAEとRMSEの計算方法](https://www.aiprogrammers.net/entry/2020/04/29/201214)
超インテリがクラスを理解できなかった理由

私の職場は 3 月から当面のあいだ、原則は在宅勤務となった。新型コロナウイルスの感染拡大防止のせいだ。職場でないとできない仕事もあるから、仕事の量は減る。時間ができたから Qiita に記事を書いて、あとで役に立つものを残そうと考えている。

#Python の勉強会が失敗した原因

何年か前、職場で週 1 回の Python の勉強会を主催した。私なんかよりはるかに頭のいい方たちが数人出席してくれた。これからは Python が流行るから先回りしてスキルを身につけておこう、というクールな企画になるはずだった。だが、うまくいかなかった。最大の原因はクラスの理解が難しいことだった。世界一のスパコン・京を使う超インテリも、クラスの概念を理解できなかったのである。

#クラスを説明しきれなかった無力感

まず、古い言語を使ったことがある人はクラスの理解に苦労するようだった。この勉強会に出席した人は、FORTRAN77 を使う古参や、学生時代に c 言語の演習を取っただけ、という人たちが多くいた。工学分野には、いまでも FORTRAN を使う人が普通にいるのだ。手続き型の言語をメインにやってきた人には、クラス定義がとても冗長で不要なものにみえる。オブジェクト指向のメリットを説明しても「でもそれって、頑張れば FORTRAN でもできるでしょ」という反応が返ってくる。そう言われたら「それはそうなんですけど・・・」となってしまい、せいぜい大規模開発でのメリットを説く以外に反論ができない。

次に、プログラムをあまり書いた経験がない人にとっては、例題が親しみにくいらしい。自動車クラスから救急車クラスを派生させる例題は、オブジェクト指向の入門書の定番だ。しかし、この話をすると「だから何が言いたいんですか」という反応が返ってくる。「救急車の話は分かるが、それとプログラミングとはどういう関係があるのか分からない」と言われると「それもそうだよな・・・」という気がしてくる。

#なぜクラスは難しいのか

オブジェクト指向の説明で苦労したのは、用語の意味を伝えきれないことだった。テクニカルライティングでは、対応する日本語訳が見当たらない場合、基本的に英単語をカタカナで訳出する。だが抽象度が高い話の場合、これが新しい概念の理解の妨げとなる。「オブジェクト指向」という言葉を初めて聞いたとき、はたして感覚的にイメージが湧くだろうか。普通の日本語感覚の持ち主には絶対に無理だ。でも英語を母国語とする人が object-oriented と聞けば、その語感が引き金になって「処理の手順よりもプログラムが扱う対象物についてもっと時間を割いて苦労する方が、何かイイことあるんじゃない？」みたいなイメージが脳内に湧くのだろう。

同様にクラスと聞いても、日本人なら小学校のクラスのイメージが最初に来てしまう。そのイメージを引きずったまま次に救急車の話を聞いても、脳内のイメージが焦点を結ばなくて当然だ。まして、インスタンスだのオブジェクトだのオーバーライドだのにいたっては、ゲシュタルト崩壊を起こして中二病アニメの武器の名前にしか聞こえない。

#笑いごとではなく大問題なのでは

このことは、私の主催した勉強会だけの問題ではなく、古参や未経験者の問題でもなく、プログラミング学習に共通の問題なのではないか。それに加え、意味不明な翻訳で勉強している日本人は、プログラミング習得の難易度を無駄にあげてしまっているのではないか。もしかしたら、我々はとてつもない時間の損失をしているのかもしれない。

#では、どうすればいいのか

オブジェクト指向の概要をもっとクリアに説明することが必要だ。プログラ厶とはコンピュータへの指図なのだから、命令を時系列に並べたものを思い浮かべるのは当然だ。それなのに違うやり方を説明しようというのだから、学習の早い段階で親しみやすい鳥瞰図を示し「確かにこういうやり方もありだな」と理解をしてもらった方がいい。大きなストーリーを納得しきってもらったあとで、演算子や変数定義といった詳細に入る方が、ハードルが低くなるはずだ。

もう少し実践的な例題を使うことも必要だ。自動車から救急車を作るとか、従業員からマネージャを作るとかいう例は、すでに理解してしまった人にとっては簡単明解だ。だが、まだ理解をしていない人にとって、ソースコードと救急車は無関係だ。抽象的な概念を伝える最後の手段は、具体例を複数挙げて共通する何かを把握してもらうことだ。もう少しリアリティのある例を使ったほうがよいだろう。

プログラミングに出てくる抽象的な概念を指す用語には、もっと分かりやすい日本語訳が必要だ。目に見えないものの話をしているのだから、意味を把握しようがないカタカナ言葉を並べても説明にはなりえない。和語が漢語を使えば、少しは初見のイメージを形成するのに役立つかもしれない。あと、一般的なやり方ではないが、私の主催した勉強会のように超インテリが相手の場合は、原著で勉強してもらうことも選択肢の一つだ。

これからは小学生だってプログラミングをやろうという時代なのに、現状では舶来の「オブジェクト指向パラダイム」の輸入に完全に失敗しているとしか思えない。
動画のTwitterカード × S3にアップしている静的サイト

# ツイッターカードとは？
<img width="285" alt="twitterCardTweet.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559746/4d88dfef-089d-5095-830b-57af6cff8ee4.png">
こうツイートすると、自動で
<img width="281" alt="twitterCard.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559746/7e338615-790c-bb34-ded9-105249ed9551.png">
こんな感じになるやつですね。

ツイートにサイトのURLを載っけるだけで、画像とタイトルと説明文のカードリンクを自動で作ってくれるツイッターのサービスです。
ツイートするときはただURLを載せるだけで、必要なのはリンク側のHTMLの編集です。

これは画像が小さいVerですが、画像が大きいVerや動画Verもあります。今回はその動画Verの解説です。
# S3とは？
Amazonがやっているストレージサービスです。
ストレージサービスとはファイルをネット上に保管するサービスです。
HTML・CSS・JSファイルをアップして一般公開設定にすることによって、静的サイトの公開が出来ます。
今回はこのアップが完了している前提です。
# 具体的な手順
## (1)動画をS3に置く
静的サイトがアップ出来ているのですから簡単ですね。
画像が再生できない機器でツイートを見た人のために画像も一応載せるらしいのでそれも置いておいてください。（下画像は動画のみ）
<img width="1140" alt="b3d3594d82512a5bab54353d295d9d98.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559746/86a2f61d-7213-dc56-c909-c07ad99b09bd.png">

はいOK。
## (2)HTMLを編集します
次を`<head>`内にコピペして、①〜⑤を埋めていきます。

```html:
  <meta name="twitter:card" content="player" />
  <meta name="twitter:title" content="　①　" />
  <meta name="twitter:site" content="　②　" />
  <meta name="twitter:description" content="　③　" />
  <meta name="twitter:player" content="　④　" />
  <meta name="twitter:player:width" content="360" />
  <meta name="twitter:player:height" content="200" />
  <meta name="twitter:image" content="  ⑤　" />
```

①〜③は下の画像と対応させて適当に埋めてください。

<img width="388" alt="ttt.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559746/82dc8345-59bb-6825-d958-3145d12158a3.png">

④、⑤はもちろん先ほどの(1)でアップしたやつですね。
アップしたファイルを選択し、下ののオブジェクトURLです。
<img width="442" alt="gz.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559746/1af01adf-86ea-b083-af74-7b9f685bf0b0.png">
別の手段もありますが、`https`でないとなりません。`http`だとダメです。

これが完了したら、HTMLファイルをS3で更新します。
## (3)ツイッター側でチェックします
実際にツイートして見なくても、どうなるかを以下で見ることができます。

[ツイッターカードバリデーター：https://cards-dev.twitter.com/validator](https://cards-dev.twitter.com/validator)

URLを入れてみればこんな感じになります。

<img width="314" alt="validator.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559746/6d23b030-cd2b-e8cc-db15-452aa721e2a1.png">

反映に時間かかることがあるのでダメだったら時間をおいて試しましょう。

# 参考
[実際のツイート](https://twitter.com/annaPanda8170/status/1237659307891511296)
LaravelでCORS（オリジン間リソース共有）を実装する時に躓いたこと

LaravelでCookie認証を実装したかった。
CORS（オリジン間リソース共有）の実装で躓く。
# 参考記事
https://www.hypertextcandy.com/cookie-auth-and-cors-on-universal-nuxt-app-with-web-api

# コマンド、エラー内容
```
php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

Unable to locate publishable resources.
```
configファイルが生成されなくて困った。

# 解決方法
リポジトリを調べてみたら見つかる。

```
php artisan vendor:publish --tag=cors
```
configファイルが生成された。
解決
React+Laravelでpublicフォルダ内の画像を表示する

#はじめに
React+Laravelでwebサイトを書くぞー！っとなってとりあえずコンポーネントを作ることにしたのですが、そもそもReact初体験で、Reactで画像ってどうやって表示するのかわからなかったのでメモ。

#環境
- docker
- Laravel Framework 6.16.0
- npm 6.12.1

### ディレクトリ構成
```
├── docker
│   ├── nginx/
│   └── php/
├── docker-compose.yml
└── laravel
    ├──app/  
    ├──artisan  
    ├──bootstrap/  
    ├──composer.json  
    ├──composer.lock  
    ├──config/  
    ├──database/  
    ├──node_modules/
    ├──package.json  
    ├──phpunit.xml  
    ├──public/
    │   ├──img/
    │       ├──hoge.png
    ├──resources/  
    │   ├──js/
    │       ├──app.js
    │       ├──components
    │       │   ├──Example.js
    ├──routes/  
    ├──server.php  
    ├──storage/  
    ├──tests 
    ├──vendor
```

今回はExample.js内にhoge.pngのパスを記述して表示します。

#調べたら出てきた通りにしてみた。
なんかReactにはpublicディレクトリを参照する環境変数があるみたい。そのままやっちゃえ。

```javascript:Example.js
<img src={`${process.env.PUBLIC_URL}/img/hoge.png`} alt="" />;
```
なんかエラーが出てる。

```
http://localhost/$%7Bprocess.env.PUBLIC_URL%7D/img/hoge.png 404 (Not Found)
```
undefinedじゃん。Laravelのpublicディレクトリは参照できないじゃん！(それはそう)

#解決策
そのままpublicより下のパスを書いたら表示された。思ってたより簡単だった。

```javascript:Example.js
<img src={'/img/hoge.png'} alt="" />;
```

難しく考えなくてよかったね。

#おまけ
コンポーネントをビルドするのに詰まったのでメモ。
あとはwebpack.mix.jsでビルドしてもらうだけ。ここでは`resources/js/app.js` をビルドしているので、このコードに先ほどのコンポーネントを読み込んであげる。

```javascript:app.js
require('./components/Example');
```

これで先ほどのExampleがLaravelで読み込まれる！
リアクションしたら翻訳してくれるDiscordのbotをPythonで作った

こんな感じのbot
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391656/146f4d34-6ed2-5036-0591-85e45b7f0884.png)

Discordでbotを作る方法は割愛。この辺りを読んで下さい。
[Pythonで実用Discord Bot(discordpy解説)](https://qiita.com/1ntegrale9/items/9d570ef8175cf178468f)

## ソースコード
```python
# インストールした discord.py を読み込む
import discord
from googletrans import Translator

# 自分のBotのアクセストークンに置き換えてください
TOKEN = '[bot-token]'

# 接続に必要なオブジェクトを生成
client = discord.Client()

# 起動時に動作する処理
@client.event
async def on_ready():
    # 起動したらターミナルにログイン通知が表示される
    print('ログインしました')

@client.event
async def on_reaction_add(reaction, user):
    print("emoji-id")
    print(reaction.emoji.id)
    if reaction.count == 1:
        # 日本語訳
        if reaction.emoji.id == 687336060556017758:
            translator = Translator()
            trans_en = translator.translate(reaction.message.content, src='en', dest='ja')
            await reaction.message.channel.send(trans_en.text)


        # 英語訳
        if reaction.emoji.id == 687336087408214062:
            translator = Translator()
            trans_en = translator.translate(reaction.message.content, src='ja', dest='en')
            await reaction.message.channel.send(trans_en.text)



# Botの起動とDiscordサーバーへの接続
client.run(TOKEN)
```

[bot-token]はそれぞれのbotのトークンを。
[emoji-id]は反応させたい絵文字のIDを設定してあげてください（Integerです）

## Google翻訳「googletrans 」
翻訳はGoogle翻訳に投げて、その結果をメッセージで返してるだけです。
emoji.idについては***登録された絵文字***だと、絵文字のIDが振られているので、サーバーに絵文字をセットしたら、リアクションをして、printに吐き出された絵文字IDをベタ打ちで書きましょう。
私の場合は、日本の国旗を日本語訳、アメリカの国旗を英語訳にしました。

srcが翻訳前の文章、destが翻訳後の文章なので、英訳、日本語訳以外にすることも出来ます。

完成したら、heroku辺りにデプロイして動かせば24時間体制で翻訳してくれます、便利！
ちなみに、リアクションの回数を取得する方法が分からなかったので、2リアクションすると2回翻訳します。

やり方誰か教えてください。

## 追記：リアクション1回にする方法教えて貰いました

`    if reaction.count == 1:`
こちらになります、@rareshanaさんありがとうございます！


## 参考
[Pythonで実用Discord Bot(discordpy解説)](https://qiita.com/1ntegrale9/items/9d570ef8175cf178468f)
[Discord.pyでリアクションを検知する方法&バラメータ一覧](https://raspi-diary.com/post-1710/)
[【Python】googletransを使って日本語のデータを英語に変換（翻訳）してみる](https://96lovefootball.hatenablog.com/entry/2019/02/10/213000)
CPU で浮動小数点精度で推論むけ XNNPACK のメモ

## 背景

pytorch にも入りはじめ, pytorch `master` のビルドが XNNPACK 関連でこけるようになって存在に気がつきました.
(https://github.com/pytorch/pytorch/pull/32509 一応 XNNPACK が libtorch mobile でマージされているので, pytorch v1.5.0 では XNNPACK 対応されそう)

https://github.com/google/XNNPACK

NNPACK -> QNNPACK を経ての XNNPACK っぽい.
(Quantize 系を使いたい場合は, 引き続き QNNPACK を使うことになるのかしらん)

Bilinear resize 対応していたり, Android/iOS 対応を謳っているのがいいですね.

## ビルド

現状(2020 年 3 月 11 日), `master` は結構コケます.
成熟に期待しましょう...(プロジェクトキャンセルされなければ...ですが. 少なくとも 1 年くらいは続きそうですかね)

それぞれはファイルサイズ大きくないですが, pthreadpool, clog(pytorch(libtorch) にある謎のライブラリ), fp16, fxdiv(固定小数点割り算)など, 依存ライブラリは多いです(NNPACK とちがい PeachPy がなくなったのでビルドしやすくはなった... かも?)

ビルドにおいては特に特殊なことは必要ありません. assember の利用も on/off できます.

### Windows(MSVC)

MSVC ビルドは, pthreadpoool が stdatomic.h を使っているためビルドができません.

https://github.com/zenny-chen/simple-stdatomic-for-VS-Clang

この辺りで差し替えればいけるかも...?

=> 他にも Linux(posix)仮定しているところがあり無理そうでした.

とりあえずは clang 限定と考えたほうがよさそうです.

clang-cl, llvm-mingw など使うといいかもしれません
(gcc は gcc で bench のビルドがコケたりと問題がいくつかあるので)

## NCHW, NHWC

PyTorch は NCHW ですが, XNNPACK は NHWC です.

一応, convolution_2d では NCHW に対応しているようですが, 全てのパターンを対応しているわけでないかもしれません.

https://github.com/google/XNNPACK/blob/master/src/convolution-nchw.c

一方, libtorch mobile では, ATen の contiguous + MemoryFormat 指定で NHWC(channel first)で変換していることがわかりました.

https://github.com/pytorch/pytorch/blob/master/aten/src/ATen/test/memory_format_test.cpp

https://github.com/pytorch/pytorch/pull/33722

https://github.com/pytorch/pytorch/commit/4d7ea227466ba07f58e26daef40ab9a3ca156a00

また, XNNPACK の out-of-bounds アクセスを防ぐため, 余裕を持ったメモリアロケーションをするなど涙ぐましい努力がされています.
 
ちなみに,

Chainer で学習し TensorFlow-lite で推論するための準備メモ
https://qiita.com/syoyo/items/e84d66b2a938843c1594

では, 無理やり各 Conv op などごとに NCHW -> NHWC -> NCHW 変換を入れて対応したことがありますが, 二倍くらい遅くなりました.

追記: PyTorch 1.5 https://github.com/pytorch/pytorch/releases/tag/v1.5.0 で NHWC フォーマットが experimental 対応されました. 今後, PyTorch はよりシームレスに XNNPACK と統合されるのが期待されます.

## CI ビルド

fork して, GitHub Actions で作りました.

https://github.com/syoyo/XNNPACK/actions

qemu aarch64 環境で, ビルド, test も走るようにしています.

## 実装アルゴリズム関連

The Two-Pass Softmax Algorithm
https://arxiv.org/abs/2001.04438

通常 3 pass になる softmax 計算を, 2 pass で行う. キャッシュに載っている状態だと, 18% ~ 28% 程度の性能向上

pass = データのアクセス回数

通常の 3 pass:

```
u = X の最大 : 1 pass 目
sigma = sum exp(Xi - u) : 2 pass 目

Yi = exp(Xi - u) / sigma : 3 pass 目
```

2 pass の計算は, IEEE754 と exp(x) の計算関連性をうまく使う.


## TODO

* [ ] 自前 CPU NN 推論ライブラリに組み込む
* [ ] bilinear resize の動作が正しいか検証する https://qiita.com/syoyo/items/52462a0348eeeae94146
.env から AWS パラメータストアの Terraform ファイルを生成するツールを作った

# envssm

Docker/docker-compose で.env を使っていると本番環境のシークレットの管理がめんどうですよね。

シークレットは AWS のパラメータストアに登録して、ECS など環境変数として利用するのが一般的のようですが、一つ一つコンソールに打ち込むのは骨が折れます。

なので.env ファイルからパラメータストアの Terraform ファイルを生成するツールを作りました。

# 対象読者

- Terraform の基本がわかっている方
- docker-compose などで.env を使っている方

Terraform や Docker の使い方には触れませんのでご了承ください。

# インストール

```terminal
go get github.com/tetsuzawa/envssm
```

## Example

### 1. .env を用意

```terminal
$ tree -a
.
└── .env
```

```.env:.env
DB_USER=user
DB_PASSWORD=password
```

### 2. envssm を実行

```terminal
$ envssm
```

### 3. 出力ファイルを確認

```terminal
$ tree -a
.
├── .env
├── ssm.tf              # generated
├── terraform.tfvars    # generated
└── variable.tf         # generated
```

```hcl-terraform:ssm.tf
resource "aws_ssm_parameter" "db_user" {
  name  = "DB_USER"
  type  = "SecureString"
  value = var.db_user
}

resource "aws_ssm_parameter" "db_password" {
  name  = "DB_PASSWORD"
  type  = "SecureString"
  value = var.db_password
}
```

```hcl-terraform:variables.tf
variable "db_user" {
  type = string
}

variable "db_password" {
  type = string
}
```

```hcl-terraform:terraform.tfvars
db_user     = "user"
db_password = "password"
```

## オプション

- -f: .env ファイルのパス (prod.env や ./build/dev.env など)
- -d: `description = ""`などのプレースホルダを生成
- -so: 出力される ssm.tf のパス
- -vo: 出力される variables.tf のパス
- -to: 出力される terraform.tfvars のパス

# 説明

- 出力ファイルを Terraform の構成に加えていただければパラメータストアに環境変数を登録することができます。
- パラメータストアから環境変数を読み込むために EC2 や ECS 側で参照設定を忘れないようにしてください

# 終わりに

私の場合、パラメータストアを使うことで環境変数の注入を AWS 側に任せることができるようになり、GitHub 上での CD の方法に悩まされることがなくなりました。

設計など適当に短時間で作ってしまったため、修正依頼お待ちしてます。
https://github.com/tetsuzawa/envssm
学習記録（３日目）#CSSセレクターの記述法#BeautifulSoupによるスクレイピング

# 学習内容
* CSSセレクターの記述法
* BeautifulSoupによるスクレイピング

## CSSセレクターの記述法
以下に１０通りのCSSセレクターの記述法を示します。どのCSSセクターも`continents.html`から`Eurasia`の要素を取り出します。

~~~HTML:continents.html
<ul id="continents">
    <li id="au">Australia</li>
    <li id="na">NorthAmerica</li>
    <li id="sa">SouthAmerica</li>
    <li id="ea">Eurasia</li>
    <li id="af">Africa</li>
</ul>
~~~

~~~Python:sel-continents.py
from bs4 import BeautifulSoup
fp = open("continents.html", encoding="utf-8")

soup = BeautifulSoup(fp, 'html.parser')

sel = lambda q: print(soup.select_one(q).string)
sel("#ea")   # (1)
sel("li#ea")   # (2)
sel("ul > li#ea")   # (3)
sel("#continents #ea")   # (4)
sel("#continents > #ea")   # (5)
sel("ul#continents >li#ea")   # (6)
sel("li[id='ea']")   # (7)
sel("li:nth-of-type(4)")   # (8)

print(soup.select("li")[3].string)   # (9)
print(soup.find_all("li")[3].string)   # (10)
~~~

(1)　id属性が`ea`の要素を取り出す
(2)　`<li>`タグがついていて,id属性が`ea`の要素を取り出す
(3)　(2)を上層の`<ul>`タグから指定して取り出す
(4)　id属性が`continents`の要素の下の階層にある、id属性が`ea`の子要素を取り出す
(5)　id属性が`continents`の要素の直下の階層にある、id属性が`ea`の子要素を取り出す
(6)　id属性が`continents`の`<ul>`タグ、その直下にあるid属性が`ea`の`<li>`タグの要素を取り出す
(7)　id属性が`ea`の`<li>`タグの要素を取り出す
(8)　４つめの`<li>`タグの要素を取り出す
(9)　`select()`を利用して`<li>`タグを取り出し、その`[3]`の要素を取得(0から数えて3、つまり4つ目)
(10)　`find_all()`を利用して`<li>`タグを取り出し、その`[3]`の要素を取得(0から数えて3、つまり4つ目)

実行結果
>Eurasia
>Eurasia
>Eurasia
>Eurasia
>Eurasia
>Eurasia
>Eurasia
>Eurasia
>Eurasia
>Eurasia

## BeautifulSoupによるスクレイピング
スクレイピングの際に用いる関数についてまとめておきます。

* `find()`メソッド、`find_all()`メソッド  

任意の属性を指定して要素を取り出す。`find()`メソッドは一つの要素、`find_all()`メソッドは複数の要素を一気に取得することができる。  

使用例

~~~Python
title = soup.find(id="title")   # id属性がtitleの要素を取得する
linls = soup.find_all("a")   # <a>タグがついた要素を全て取得する
~~~

* `select()`メソッド、`select_all()`メソッド  
引数によってセレクターを指定し、要素を取得する。`select()`メソッドは一つの要素、`select_all()`メソッドは複数の要素を取得できる。使用例は上述の`sel-continents.py`の通り。

## まとめ
スクレイピングのやり方については理解できたが、pythonの文法で理解がストップすることが多々あるので、python文法の理解という根底にある目的を忘れずにしっかり確認しながら進めていきたい。
【Unity(C#)】Lerp、Slerpを使った減速表現

##デモ

早速ですが、デモです。

![ExMove.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/4309ab92-97ab-977e-8112-959eb4a3c807.gif)

OculusQuestのプレイエリア設定画面などもゆっくりとUIがプレイヤーの視線に追従するようになってます。

##コード

```C#
 
using UnityEngine;

/// <summary>
/// 視線に追従させたいオブジェクトにアタッチ
/// </summary>
public class FollowEyeDirection : MonoBehaviour
{
    [SerializeField, Range(0.1f, 1.0f)] private float _positionLerpSpeed = 0.1f;
    [SerializeField, Range(0.1f, 1.0f)] private float _rotationLerpSpeed = 0.1f;
    [SerializeField] private float _distanceForwards = 5f;
    [SerializeField] private float _distanceUpwards = 1f;

    private void Update()
    {
        //正面に移動
        float posSpeed = _positionLerpSpeed;
        Vector3 posTo = Camera.main.transform.position + (Camera.main.transform.forward * _distanceForwards) + (Camera.main.transform.up * _distanceUpwards);
        transform.position = Vector3.Slerp(transform.position, posTo, posSpeed);

        //正面方向に回転
        float rotSpeed = _rotationLerpSpeed;
        Quaternion rotTo = Quaternion.LookRotation(transform.position - Camera.main.transform.position);
        transform.rotation = Quaternion.Slerp(transform.rotation, rotTo, rotSpeed);
    }
}

```


##Lerp,Slerp

以前書いた記事でも取り上げたんですが、
Update内での挙動がいまいちよくわかってなかったのでもっかいまとめます。
【参考リンク】：[Mathf.Lerp](https://qiita.com/OKsaiyowa/items/88e1742427d9e9a341c8#mathflerp)

まずはそれぞれの動き方について簡単に流して見ていきます。

---
###Lerp

左右にカメラを振ると、直線的に追従してきます。

![LerpMove.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/9cb4da2f-cdcc-3076-a2f5-a5319928008d.gif)

---
###Slerp

左右にカメラを振ると、曲線を描きながら(分かりづらいですが)追従してきます。

![SLerpMove.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/6e59133c-f7f1-c356-362a-9e0c973eaa40.gif)

##Lerpの使い方

`Slerp`も挙動が違うだけで使い方は一緒なので`Lerp`についてのみ書きます。

`Vector3.Lerp(a, b, t)`
のように使い、`t`で`a`と`b`の間を補間します。

それぞれの引数の説明は下記です。
　**a : 始点となるベクトル位置（型：Vector3）
　b : 終点となるベクトル位置（型：Vector3）
　t : 両端の距離を1とした時の割合（型：float, 0~1の範囲のみ）**

【参考リンク】：[[Unity] Vector3.Lerpの使い方](https://qiita.com/aimy-07/items/ad0d99191da21c0adbc3)

##Update内で起きている処理のイメージ

```C#
  private void Update()
  {
    transform.position = Vector3.Lerp(transform.position, 目的地点, 移動の割合);
  }
```
今回の追従で利用した上記のコードを図解します。
※移動の割合は今回は0.2として話を進めます
![a.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/3787181b-f5e7-049d-16c4-18212337917c.png)

結論を先に言うと、
**第一引数である開始地点に移動させたいオブジェクトの座標を入れておくと
イイ感じにフワーって動いてくれる**って感じです(語彙力)。

上記では説明としてザックリ過ぎるので、もう少し細かく考えていきます。

Lerp関数の第三引数で指定した割合を使って、
開始地点から見た、目的地点までの20％の位置を算出します。

つまり、1フレーム目で実際に20％分、目的地まで進みます。

2フレーム目も同様に進みますが、先ほどの開始地点とは異なり、
すでに20％移動した先が開始地点となります。

つまり、2フレーム目では、
その時点での開始地点から目的地点までの20％分またさらに進むということです。

この20％分の移動を目的地点に到達するまで繰り返す、、、
というイメージです。

ポイントとしては
**1フレーム分の移動の変化量がだんだん小さくなり、緩やかな曲線を描く**
ということです。

この変化量の減衰のおかげでイイ感じにフワーってなります。

図解では少しわかりづらいですが、
20％のまたさらに20％、そのまたさらに20％、、、
というのを繰り返すことで、変化量がだんだんと小さくなります。

![a.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/3d205fe0-31e6-6013-808e-b359782ce2be.png)




##参考リンク
下記プロジェクト内のコードを使用させていただいてます。
【GitHub】：[MagicLeapHandTracking](https://github.com/dilmerv/MagicLeapHandTracking)
AppBarのボタンに背景をつける

FlutterのAppBarのバックボタンを、Google Mapアプリのようにしたい。

<img width=480 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375661/ff7f75ae-e50c-54e0-4b25-15f03fb464f2.png">

### コード

細かいことは置いといて結果。Themeを使ってできるかどうかは確認していない。

```dart
AppBar(
  leading: Padding(
    padding: const EdgeInsets.all(8.0),
    child: DecoratedBox(
      decoration: ShapeDecoration(
        color: Colors.black.withOpacity(0.2),
        shape: const CircleBorder(),
      ),
      child: IconButton(
        icon: Icon(
          Platform.isIOS ? Icons.arrow_back_ios : Icons.arrow_back,
        ),
        onPressed: () => Navigator.maybePop(context),
      ),
    ),
  ),
  ...
),
```

### 細かいこと

BoxDecorationで背景を設定すると、背景が四角くなってしまうので、ShapeDecorationを使う。

```dart
    decoration: DecoratedBox(
      decoration: ShapeDecoration(
        color: Colors.black.withOpacity(0.2),
        shape: const CircleBorder(),
      ),
    child: IconButton(...)
```

AppBarの以下のコードから、そのままでは『leadingのwidth/height』は『AppBarのheight』と同じサイズになってしまうので、 (BoxConstraints.tightForでheightが指定されていない＝maxHeightがdouble.infinity＝親のheightと同じになるという認識から)
https://github.com/flutter/flutter/blob/0b8abb4724aa590dd0f429683339b1e045a1594d/packages/flutter/lib/src/material/app_bar.dart#L470-L475

```dart
    if (leading != null) {
      leading = ConstrainedBox(
        constraints: const BoxConstraints.tightFor(width: _kLeadingWidth),
        child: leading,
      );
    }
```

以下のようにPaddingを指定して円を小さめにしている。

```dart
  leading: Padding(
    padding: const EdgeInsets.all(8.0),
    child: DecoratedBox(...)
```

結果のスクリーンショット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375661/c7f0100a-7f52-b8a8-9ec2-3fb4547272fd.png)
【Laravel】HerokuでHTTPSを強制しつつベーシック認証をかける

# 環境
- Laravel Framework 6.14.0

# 結論
アプリケーションに`.htaccessファイル`と`.htpasswdファイル`を含めてgit pushします。
.htaccessファイルについては既に存在しているため、`HTTPSリダイレクトの設定`と`ベーシック認証の設定`を追記します。
.htpasswdのパスですが、Herokuではアプリケーションディレクトリが/appとなるため、アプリケーション直下にファイルを作った場合、`/app/.htpasswd`で参照できます。

```apache:/public/.htaccess
<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # !!! 追記 BEGIN !!!

    # HTTPアクセスのみをHTTPSにリダイレクトする
    # 「RewriteCond %{HTTPS} off」だとリダイレクトループが発生するので注意
    # 301リダイレクトで旧URLが持っているGoogleからの評価を引き継ぐ
    RewriteCond %{HTTP:X-Forwarded-Proto} ^http$
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

    # HTTPSアクセスの場合のみベーシック認証を行う 
    <If "%{HTTP:X-Forwarded-Proto} == 'https'">
        AuthUserFile /app/.htpasswd
        AuthType Basic
        AuthName "Restricted Access"
        Require valid-user
    </If>

    # !!! 追記 END !!!

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>
```

```apache:/.htpasswd
# test:test
test:NcOjoYwcay98.
```

# ルートディレクトリの根拠
```shell

$ heroku run bash
~ $ pwd
/app
~ $ ls
Procfile   artisan	  composer.lock  package.json  resources   storage  webpack.mix.js
README.md  bootstrap	  config	 phpunit.xml   routes	   tests
app	   composer.json  database	 public        server.php  vendor
```

# 関連記事
【Laravel】Herokuでベーシック認証をかける
https://qiita.com/hiro-chika/items/1bdb5ef0c9fb990f4de4