OmniAICreator/Qiita-1.07M huggingface dataset:
【React】Reactで作る、ウェブページ（ヘッダー、フッター）

index.htmlのbody部分にjsを読みこむ記述をする。

```index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" href="stylesheet.css">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>
```

このdiv id="root"の要素にjsファイルで記述した内容が入ってくる。

そして、jsファイルをsrcというディレクトリにまとめたとすると、
次の階層にcomponentsフォルダと、index.jsファイルがある。

このindex.jsに全てをまとめてrootに表示する記述がされている。

```index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));
```

最後に、ヘッダー、フッターがどのように読み込まれるかだけまとめておく。

App.jsにまとめてインポートして、index.jsに送り出している。

```App.js
import React from 'react';
import Header from './Header';
import Main from './Main';
import Footer from './Footer';

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Main />
        <Footer />
      </div>
    );
  }
}

export default App;
```

```components/footer.js
import React from 'react';

class Footer extends React.Component {
  render() {
    return (
      <div className='footer'>
        <div className='footer-inner'>
          <div className='footer-logo'>
            <img src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/type_logo.png' />
            <p>Learn to code, learn to creative.</p>
          </div>
          <ul className='footer-list'>
            <li>会社概要</li>
            <li>採用</li>
            <li>お問い合わせ</li>
          </ul>
        </div>
      </div>
    );
  }
}

export default Footer;
```

```components/header.js
import React from 'react';

class Header extends React.Component {
  render() {
    return (
      <div className='header'>
        <div className='header-logo'>
          <img src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/character_logo.svg' />
        </div>
      </div>
    );
  }
}

export default Header;
```
【Gatsby.js】Sass + autoprefixerを導入する

Gatsby.jsで作ったサイトのスタイリングをSassで行い、autoprefixerを使いたい場合の設定をまとめます。

## Sassを導入
```zsh
$ yarn add gatsby-plugin-sass
```
```gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-sass`,
  ],
}
```
```zsh
$ mkdir src/scss
$ touch src/scss/style.scss
```
```src/scss/style.scss
.title {
  font-size: 32px;
}
```
```zsh
$ touch src/components/layout.js
```
```jsx:src/components/layout.js
import React from "react"
import "../scss/style.scss"

export default ({ children }) => <>{children}</>
```
```jsx:src/pages/index.js
import React from "react"
import Layout from "../components/layout"

export default () => (
  <Layout>
    <div>
      <h2 class='title'>トップページ</h2>
    </div>
  </Layout>
)
```

## autoprefixerを導入
いろいろ調べたところ、gatsbyにはautoprefixerが組み込まれていることがわかりました。(これを知るのに時間かかった、、)
> We have autoprefixer in gatsby core (which gatsby-plugin-sass uses as we pass some prebundled rules to plugins)

[[gatsby-plugin-sass] prefix missing in css · Issue #15509 · gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby/issues/15509)

ただデフォルトの対象ブラウザが`['>0.25%', 'not dead']`になっているので、必要に応じて`packege.json`に設定を書いて調整。

```package.json
{
  "devDependencies": {
    "some-package-hogehoge": "1.0.0"
  },
  "browserslist": [
    "last 2 versions",
    "ie 9"
  ],
}
```

## 動作確認
`gatsby-build`を叩き、`public`ディレクトリに出力されるcssファイルにベンダープレフィックスが増えて(/減って)いれば成功。

## 参考
- [[gatsby-plugin-sass] prefix missing in css · Issue #15509 · gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby/issues/15509)
- [Browser Support | Gatsby](https://www.gatsbyjs.com/docs/browser-support/)
PythonでGmail APIを利用し添付ファイル付きメールを自動送信するには

今回はPythonとGmail APIを利用して添付ファイル付きのメールを自動送信する方法について書いていきます。

#PythonコードでGmailを送信する
添付ファイルをつけてメールを送信するコードを書いていきます。添付するファイルはドキュメントディレクトリ配下の「こんにちは.txt」になります。添付するファイルは事前に作成しておいてください。

コードの完成形は下記のとおりです。

```python
import pickle
import os.path
from googleapiclient.discovery import build
from google_auth_oauthlib.flow import InstalledAppFlow
from google.auth.transport.requests import Request
import base64
from email.mime.text import MIMEText
from email.mime.application import MIMEApplication
from email.mime.multipart import MIMEMultipart
from apiclient import errors
from os.path import basename

#  Gmail APIのスコープを設定
SCOPES = ['https://www.googleapis.com/auth/gmail.send']

# メールの内容を作成
msg = MIMEMultipart()

#  メール本文の作成
def create_message(sender, to_email, subject, message_text):
    #メール送信先
    msg['to'] = to_email
    # メール送信元
    msg['from'] = sender
    # メールのタイトル(件名)
    msg['subject'] = subject
    # ファイルを添付
    msg.attach(MIMEText(message_text))
    
    encode_message = base64.urlsafe_b64encode(msg.as_bytes())
    return {'raw': encode_message.decode()}

#  メール送信の実行
def send_message(service, user_id, message):
    try:
        message = (service.users().messages().send(userId=user_id, body=message)
                   .execute())
        print('Message Id: %s' % message['id'])
        return message
    except errors.HttpError as error:
        print('An error occurred: %s' % error)

#  メインとなる処理
def main():
    #  アクセストークンの取得
    creds = None
    if os.path.exists('token.pickle'):
        with open('token.pickle', 'rb') as token:
            creds = pickle.load(token)
    if not creds or not creds.valid:
        if creds and creds.expired and creds.refresh_token:
            creds.refresh(Request())
        else:
            flow = InstalledAppFlow.from_client_secrets_file(
                'credentials.json', SCOPES)
            creds = flow.run_local_server()
        with open('token.pickle', 'wb') as token:
            pickle.dump(creds, token)
    service = build('gmail', 'v1', credentials=creds)
    #  メール本文の作成
    sender = '*****@gmail.com' # 送信者のアドレス
    to_email = '*****@gmail.com' # 受信者のアドレス
    subject = 'メール送信自動化テスト'
    message_text = 'メール送信の自動化テストをしています。'
    
    # ファイルを添付
    path = "Documents/こんにちは.txt"
    with open(path, "rb") as f:
        part = MIMEApplication(
            f.read(),
            Name=basename(path)
        )
    part['Content-Disposition'] = 'attachment; filename="%s"' % basename(path)
    msg.attach(part)
    
        
    message = create_message(sender, to_email, subject, message_text)
    #  Gmail APIを呼び出してメール送信
    send_message(service, 'me', message)

#  プログラム実行
if __name__ == '__main__':
    main()

```

# プログラムの実行
　上記のプログラムを実行すると、初回はGoogleアカウントの選択画面が出てきます。なので、メール送信を実行するアカウントを選択してください。


アカウントを選択すると、Gmailの利用権限の付与を許可するかどうかのダイアログが表示されるので、許可をクリックします。

選択内容の確認画面が出てくるので、同様に許可をクリック。

ユーザーから認証されると「The authentication flow has completed, you may close this window.」というメッセージがブラウザに表示されます。

以上でメール送信が完了です。メールが届いているか確認してください。

#まとめ
メール送信を自動化する方法を解説しました。今回は1通のメール送信でしたが、拡張すれば複数のメールを一斉送信することもできます。普段の業務で毎回似たようなメール送信を行っている方はぜひ参考にしてみてください。
Windows10でgradle assembly実行時にPropertiesKtのNoClassDefFoundErrorが出る場合の対応

| 環境 |
|:--- |
| Windows 10 |
| Gradle 6.6.1 |
| Kotlin 1.3.72 |
| Java 11.0.7 |

`gradle assembly` 実行時に `java.lang.NoClassDefFoundError: org/jetbrains/kotlin/cli/common/PropertiesKt` が発生する場合がありました。

他の操作時にも出る可能性ありそうです。

特定のJDKビルド以降問題が発生するようで `11.0.8` をアンインストールし `11.0.7` に入れ直し解決しました。

参考:
https://discuss.kotlinlang.org/t/java-lang-noclassdeffounderror-org-jetbrains-kotlin-cli-common-propertieskt/19193/9

> Java 11.0.8.8 nightly on AdoptJDK (2020-07-13) works fine
> but
> Java 11.0.8.9 nightly on AdoptJDK (2020-07-18) crashed

JDK過去バージョンダウンロード:
https://www.oracle.com/java/technologies/javase/jdk11-archive-downloads.html
Python の assert 文

```assert 条件式, "表示したいエラー文"```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513365/e7d69253-92b6-2d99-5e45-b99d19febc37.png)

#参考リンク

- https://docs.python.org/ja/3/reference/simple_stmts.html#assert
重回帰分析の中身をみて欲しいと頼まれたときは

#はじめに
社外のデータサイエンティスト講座も無事に卒業し、本業において機械学習の適用などを進めています。そんな中ある日、『重回帰分析をやってみたんだけど中身を見て欲しい』と相談を受けました。

徐々に私の認知度が高まってきたのだろうか..(まんざらではない)

「よっしゃ、やったります！」と二つ返事で請け負い、今年統計検定２級も取ったし、イケるっしょの精神で分析結果を見始め、先日レビュー結果を返しました。

ただ、まだまだ駆け出しデータサイエンティストの自分、この程度の提案で十分だったのか不安が残ります・・・。

そこで、<b>ここに記事として残すことで衆目にさらし、指摘が入れば是正し、より良い手順で重回帰分析を評価できるようになりたいと思います。</b>

どうぞご一読下さい。

#はじめに伝えた、重回帰分析の一般的な傾向

まずはじめに以下の事を伝えました。

- 特徴量(変数)を増やすほど決定係数R2は増加する。
- すなわち、学習データに精度良くFittingできる。
- しかし、多重共線性が認められる場合には回帰係数が極めて大きな値、負の値になるなど、説明のしづらい回帰結果が得られることとなる。
- 未知のデータに対し極端な値を算出する可能性もある。

そうして上記を理解してもらったうえで、<b>何でもかんでも特徴量を拾おうとせず、分析結果を見ながら組み合わせを選んでいきましょう。</b>と説明。
そして、次の３つの項目を確認するよう伝えました。

ここからはコンビニの売上（目的変数）を例に話を進めます。（出てくる数字は適当です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635959/8ada9f6f-93a0-3337-8ff2-10a4bb6e9d3a.png)


#確認するべき指標①　回帰係数
数字の大小はともかく、この値の正負が直感と一致しているかは要確認です。例えば、来店人数が増えるごとに目的変数（売上）が減少するような分析結果になっている場合、これは実務を考えると説明がつかないですよね。

なんでもかんでも特徴量に入れてしまうと多重共線性の影響で上記のような現象が起きかねません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635959/67b65c03-bd50-bf8e-f5cd-af85c1ab156e.png)


#確認するべき指標②　P値
回帰係数は直感的に分かる人が多いですが、P値はちょっと統計をかじっていないと見落とされている可能性があります。例えば、エクセルで売り上げを目的変数に来店人数、土地面積、レジ数で重回帰分析をしてみたとします。

この時の重回帰分析結果が割と良さそうでも、「待った」をかけなくてはいけません。

ここで出てくるP値は「説明変数が影響を与えていない確率」を示しており、確率が高い(1に近い)ということは、「その説明変数、あまり意味ないよ」となります。一般的に0.05以下であれば「説明変数が影響を与えていない」を棄却し、特徴量として意味のある変数と認定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635959/b8ad9ecb-04db-620b-4b4c-5cf5c3a8f6f2.png)

統計的に判断をする、バイアスは排除する、が大事なのかなと思います。潔く相手に「その特徴量意味なさそうです」と伝えましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635959/4d72d01a-c1f7-4702-6734-c83ae4c233c4.png)


#確認するべき指標③　VIF
VIFは説明変数間の多重共線性を評価しており、一般的に10を超えると多重共線性が見られると言われている。(VIFの解釈は、他の変数を加えたことで単回帰をした場合の係数の推定量の分散が、何倍大きくなったかを表している。)

これはPythonでサクッと確認することができます。相談相手が「VIF??」という場合には、下記コードを参考にしてください。

``` python
import pandas as pd
from statsmodels.stats.outliers_influence import variance_inflation_factor

df_all = pd.read_excel('sample.xlsx',sheet_name="Sample")

cols = df_all.select_dtypes(include=[np.number]).columns #数値を扱っている列だけを抽出
cols_x = cols[1:] #目的変数cols[0]を外しています
data_x = df_all[cols_x]
#vifを計算する
vif = pd.DataFrame()
vif["VIF Factor"] = [variance_inflation_factor(data_x.values, i) for i in range(data_x.shape[1])]
vif["features"] = data_x.columns
 
#vifを計算結果を出力する
print(vif)
 
#vifをグラフ化する
plt.plot(vif["VIF Factor"])
```


このような感じ↓で結果が確認できます。ただ私は、<b>10を超えたら絶対にダメ、無意味！とは思っていません。</b>あくまで目安程度に考えており、10ちょっと超え程度であれば要経過観察くらいの気持ちです。もちろん、正則化や特徴量の再検討は提案しますが。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635959/c5bf4392-658c-dd67-6bb9-4e9e8cc50a9f.png)

#さいごに

情報量が少ない、データの内容が偏っている場合は、どんなに頑張っても良い回帰結果は得られません。
その場合は「来店人数との相関が弱そうな、駐車できる車の数も入れてみましょう」といった形で別の切り口を提案していくべきかと思います。（車の数という切り口は、なんとも微妙だと思っていますが..）
物量関係のデータが多いなら価格などの質を表現できるようなデータですかね。


エクセルの分析ツールは便利ですので、ちょっとした知識をプラスしてみんなが自由自在に使いこなせるようになるといいですね！

読んでいただきありがとうございました。
【next.js】相対パスで指定するのは、もう古い！？たった数行の追加で絶対パスが使える方法とは？

#概要
・jsconfig.jsonを使えば絶対パスを指定できる
・pathsプロパティで各フォルダーごとの絶対パスを指定できる

#絶対パスを指定する方法
ルートディレクトリに**jsconfig.jsonファイル**を作成して、
以下の内容をコピペすればルートディレクトリからのパスでファイルをインポートできます。

```jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
  }
}
```

```pages/index.jsx
import React from 'react';
import Header from "src/comp/Header"

export default function index() {
  
  return (
      <>
        <Header/>
      </>
  );
}
```


#jsconfig.jsonでは何をしているのか？
上記のソースで何を指定してるのかを説明していきます。
まず、jsconfig.jsonとは何なのかというと**javascriptによって提供されるルートファイルとオプションを設定できるファイル**です。

このファイルを使ってプロジェクト内で絶対パスの指定を可能にしています。
また、**jsconfig.jsonはプロジェクトのルートディレクトリ配下**に保存してください。

##オプションの設定
**compilerOptionsにbaseUrlのプロパティを指定**しています。
このプロパティでは**ファイルを読み込む際のベースとなるディレクトリ**を定義しており、「.」を指定することでルートディレクトリを指定できます。

あとは、各ファイル内で他のファイルをルートディレクトリからのパスで指定すれば読み込めるというわけです。

#各フォルダーごとの絶対パスでインポート
jsconfig.jsonにはルートディレクトリからの絶対パスの指定だけでなく、**各フォルダーごとに別名を定義**し、その名前で呼び出すことができます。

どういうことかというと、「src/comp/header.jsx」というファイルがあった時にcompフォルダーを「<span>@</span>comp」に書き換えて、「@comp/header.jsx」で読み込めるのです。

・**「src/comp」⇒「<span>@</span>comp」**

この方法を使うことでフォルダーごとにインポートできるため、importの指定方法を簡略化することができます。

それで、どうやって実装するのかというと**pathsプロパティ**を使います。
このプロパティは、「ディレクトリ」と「別名」をマッピングしていきます。

```jsconfig.json
{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@comp/*": ["./src/comp/*"],
      }
    }
  }
```

```pages/index.jsx
import React from 'react';
import Header from "@comp/Header"

export default function index() {
  
  return (
      <>
        <Header/>
      </>
  );
}
```

この例では、「/src/comp」を「<span>@</span>comp」として別名で定義しています。

また、複数指定できるので
・コンポファイル
・ライブラリファイル
などフォルダーを追加していくごとに別名を追加していけばいいのではないでしょうか？


#参考
[jsconfigについて](https://code.visualstudio.com/docs/languages/jsconfig)
[next.jsで絶対パスでの指定方法](https://nextjs.org/docs/advanced-features/module-path-aliases)
PowerAppsで休暇申請アプリを作ってみた話

## 概要

### ・はじめに
こんにちは。現在Web系案件に参画しています、櫻井です。今回は、Microsoft Power Apps(以下PowerApps)で、休暇申請する簡単なアプリケーションを作っていこうと思います。


### ・PowerAppsって何？
PowerAppsとは、Microsoftがビジネスユーザー向けに提供しているMicrosoft Power Platformという、業務アプリケーションプラットフォームにあるアプリケーションの一つです。ローコードで業務アプリケーションを迅速にかつ比較的容易に開発することを可能にします。


### ・作るもの
今回は、OneDriveにあるExcelをデータソートとした、休暇申請アプリを作ります。機能は、メンバーごとに新規・更新登録をします。


## 開発手順

### ・開発環境
PowerAppsのプランはPower Apps for Office 365です。プランによって使えるサービスに制限があるので、注意してください。

### ・開発手順
作成の手順は次の通りです。
1. DBの作成
2. Power Appsとの連携
3. UIの作成

### ・テーブルの作成
今回はExcelでDBを作成します。  
項目は申請日、申請者、休暇理由、休暇希望日としました。  
テーブルはExcelの「ホーム」→「テーブルとしての書式設定」で設定します。また、先頭行をテーブルの見出しとして下さい。

![DB](./img/1.png)

### ・Power Appsとの連携
PowerAppsのプラットフォームで、上部「＋作成」→ データから開始のExcelOnline → 対象のExcelを選択 → テーブルを選択 → 接続の順で新規に作成いたします。
作成直がこちら

![DB](./img/2.png)

デフォルトで、Top(BrowseScreen1)、詳細(DetailScreen1)、編集(EditScreen1)の画面が作成されます。

![DB](./img/3.png)

### ・UIの作成
UIは画面右側にあるプロパティや詳細でitemの編集をしたり、左側にある「＋」で新しくitemの挿入などをし、作り込んでいきます。
今回は主にEdit画面を編集しました。Top、編集はほぼデフォルトのままです。

![DB](./img/4.png)

作成後保存し、ユーザーの共有設定をすることでブラウザ、モバイル端末から使用することができます。

登録したデータは、Excelのテーブルに保存されます。

## 所感
着手から完成までおおよそ2時間ほどかかりました。大半が調査の時間で、慣れてしまえばより少ない時間でできると思います。  
UIはパワーポインター感覚で実装することができます。特に難しいことはありません。  
今後はより複雑な要件に挑戦してみたいです！
チカっとチカTikaっ♡

ごめんなさい。。。

というわけで、今更ですが、Apache Tika を使ってみました。

## Apache Tika
前回は Groonga で全文検索データベースを構築しました。
で、テキストファイルだけなら別に問題ないのですが、世の中には「ワード」とか「エクセル」とか「PDF」とか全文検索したいデータが多くあります。

それぞれのファイル毎に解析するものがあれば、まあそれはそれで助かるのですが、特に「ワード」「エクセル」は xml になる前のタイプの解析ツールがなかなか見つからなくて、少し困っていました。

Google先生に聞いてみたところ、「Apache Tika」というものがある、ということを教えてくれたので、早速使ってみました。

## Mac でチカチカ

Mac の場合は簡単でした。

```
$ brew install tika
```

使い方も簡単

```
$ tika --text hoge.doc > hoge.txt
```
これだけです。
そしてすごいのは、```doc```だけでなく```xls```とか```pdf```とかも同じ様に出来るのですよ！

はぁ、もうこれすごい。ありがとー Apache Software Foundation！

## Linux でもチカチカ

Debian10 (buster) でインストールしてみました。

```
# apt install libtika-java
```
すると、```/usr/share/java/``` 以下に関連ファイルがインストールされます。（ tika- で始まるファイルたち ）


しかし、これらはコアなツールなので、Mac版と同じようにさらっと使いたい場合は、別途ツールをダウンロードする必要があるようです。

### 本家からダウンロード
便利ツールは、```tika-app-x.xx.jar``` （x.xxはバージョン）で、これは本家からダウンロードします。
今回 apt でインストールされたのは、1.20 だったので、バージョンを合わせます。

https://tika.apache.org/download.html の Download Apache Tikaセクションの下の方にある、archives から目的のファイルをダウンロードしましょう。

```
$ curl -o tika-app-1.20.jar https://archive.apache.org/dist/tika/tika-app-1.20.jar
```
せっかくなので、先ほど apt でインストールしたところに移動させておきます。

```
# mv tika-app-1.20.jar /usr/share/java/
```

使い方は、Mac版と同じ感じです。
ただし、基本 Java なので、以下の感じになります。

```
$ java -jar /usr/share/java/tika-app-1.20.jar --text huge.doc > hoge.txt
```

はい、できました。
すごいですね。ありがたい。

## 画像も取得できるっぽい
なんか色々高機能な感じです。
文書内に埋め込まれた画像とかも抽出することができるみたいです。

```
Macの場合
$ tika --extract hoge.pdf

Linuxの場合
$ java -jar /usr/share/java/tika-app-1.20.jar --extract hoge.pdf
```
とすると、同じフォルダに、 hoge.pdf で使われている画像がずらっと取得できます。

```
Macの場合の実行結果例）

INFO  As a convenience, TikaCLI has turned on extraction of
inline images for the PDFParser (TIKA-2374).
Aside from the -z option, this is not the default behavior
in Tika generally or in tika-server.
9月 29, 2020 5:43:27 午後 org.apache.tika.config.InitializableProblemHandler$3 handleInitializableProblem
警告: J2KImageReader not loaded. JPEG2000 files will not be processed.
See https://pdfbox.apache.org/2.0/dependencies.html#jai-image-io
for optional dependencies.

9月 29, 2020 5:43:27 午後 org.apache.tika.config.InitializableProblemHandler$3 handleInitializableProblem
警告: org.xerial's sqlite-jdbc is not loaded.
Please provide the jar on your classpath to parse sqlite files.
See tika-parsers/pom.xml for the correct version.
Extracting 'image0.png' (image/png) to ./image0.png
Extracting 'image1.png' (image/png) to ./image1.png
Extracting 'image2.png' (image/png) to ./image2.png
Extracting 'image3.png' (image/png) to ./image3.png
Extracting 'image4.png' (image/png) to ./image4.png
Extracting 'image5.png' (image/png) to ./image5.png
```

まあなんか足りないって怒られますが、無事画像を取り出すことに成功しました。

いやすごい。

##まとめ
Apacheさんは Solr とか自前で全文検索エンジンを開発してるから、Tika のようなものも付随して作っているのですよね。そしてそれをオープンソースとして公開されてて、本当すごいなって思います。ありがたいです。

みんなもチカチカしてみましょう。

＃あ、Tika の読みは「ティカ」っぽいですが、まあいいでしょう。。
cloud9でサーバーが停止しないときの対処法

#環境
* AWS cloud9 EC2
* ruby 2.6.3
* rails 5.2.4.2

#`rails s`を行ってもサーバーが起動中となる
###エラーコード
```:terminal
vocstartsoft:~/environment/***** $ rails s
=> Booting Puma
=> Rails 5.2.4.2 application starting in development 
=> Run `rails server -h` for more startup options
A server is already running. Check /home/ec2-user/environment/bookers2-debug/tmp/pids/server.pid.
Exiting
```
###対処法
１. 起動しているサーバの番号を確認

```:terminal
vocstartsoft:~/environment/***** $ cat tmp/pids/server.pid
5501
```
２.  動いているサーバを停止させる

```:terminal
vocstartsoft:~/environment/***** $ kill -9 5501
```
【vue】export defaultとは？作成したテンプレートファイルに名前をつけて外部で読み込む

#Vueのテンプレートファイルの下部に記述してあるexport defaultとは何か？

**このテンプレートを他のファイルで読み込むための記述**。


export defaultがないと他のファイルで読み込む（import)することができない。


```html:例
<template>
</template>

<script>
export default {
  name: 'VrNormalBtn',
  props: {
    value: { type: Boolean },
    disabled: { type: Boolean, default: false },
    command: { type: Object, required: true },
  },
}
</script>
```

重要なのはnameオプション。名付けた名前で呼び出せるようになる。


##テンプレートファイルの読み込み

上記例の場合、このテンプレートに「VrNormalBtn」と名付けているので、他のファイルで以下のように指定すれば呼び出すことができる。


```html:
import VrNormalBtn from "ファイルパス"
```
vimでautocmdを使ってテンプレートを自動で読み込ませる

PHPファイルを新規で書く時に、いちいち``html``を打つのがめんどくさかったので
``.vimrc``を編集して、``autocmd``を使って``html``を自動で読み込むようにしました。
#目次
[やり方](#やり方)
[解説](#解説)
[ファイルパターン](#ファイルパターン)
[おすすめのautocmd](#おすすめのautocmd)

#やり方
まずはテンプレートファイルを設定しましょう
例えば``~/.vim/skelton/php.txt``に以下のように設定します

```php:~/.vim/skelton/php.txt
<?php
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
</title>
</head>
<body>
</body>
</html>
```

その後にユーザー設定ファイル``~/.vimrc``もしくはグローバル設定ファイル``/etc/vimrc``に
このように記述してください

```~/.vimrc
autocmd BufNewFile [{blade}].php 0r $HOME/.vim/skelton/php.txt
```
このようにすることで``vim``を使えば
``php``を記述したい場合は`o`を打てば改行して入力モードに入るし
``body``を記述したい場合は`9j`で9行下がって`o`だし
``title``を設定したい場合は、`6j`で6行下がって、
`o`で入力し、`ctr+c`で入力モードを抜けて、`J`でタイトルタグを横並びにすれば良い
**これで煩わしい典型文を書かなくて済むし、何より時短になりますね**

#解説

軽く解説をすると、``BufNewFile``で新しいファイルを読み込んだ時って意味です
``0r filepath``でファイルパスのスケルトンファイルを読み込むようになってます

ファイルパスを適切に設定することで``blade``という文字列が入らない``php``ファイルには
先ほどのテンプレートが読み込まれることになります

ここで``blade``という文字列が入らないようにしているのは``laravel``の``view``ファイルは``cakephp``と違って
拡張子が``.blade.php``となっているからです

``laravel``ファイルでは``@extends('layouts.app')``みたいに読み込むので
``html``を自動で読み込ませた場合は消す必要があるのでかえって面倒です。

``laravel``を使用しない場合は``*.php``に読み替えて記述してください！

もちろんこれは複数設定できるので同じようにして``python``や``go``などでも分けることができます

#ファイルパターン

|記号|説明|
|:--:|:--:|
|       *       |あらゆる文字の列にマッチ。注意: パス区切り文字も含まれる。|
|       ?       |あらゆる1文字にマッチ|
|       \?      | '?' にマッチ|
|       .       | '.' にマッチ|
|       ~       | '~' にマッチ|
|       ,       |パターンを分割する|
|       \,      | ',' にマッチ|
|       { }     | pattern の \( \) と同様|
|       ,       |('{' '}' の内側では) pattern の \| と同様|
|       \}      |リテラルの }|
|       \{      |リテラルの {|
|       \\\{n,m\}  |pattern の \{n,m} と同様|
|       \       | pattern で使われるものと同様の特別な意味を持つ|
|       [ch]    | 'c' または 'h' にマッチ|
|       [^ch]   | 'c' と 'h' 以外の文字にマッチ|

#おすすめのautocmd
``autocmd``を使えば
特定のファイルのタブスペースを変更させたり、特定のファイルを開いた時に関数にカーソルを持って行ったりできるので、是非マスターしてください

便利だなと思うのは**``以前開いていた位置にカーソルを戻してくれる設定``**です
これも同様にvim設定ファイルに記述してください

```~/.vimrc
function! s:RestoreCursorPosition()
  if line("'\"") <= line("$")
    normal! g`"
    return 1
  endif
endfunction
" ファイルを開いた時に、以前のカーソル位置を復元する
augroup vimrc_restore_cursor_position
  autocmd!
  autocmd BufWinEnter * call s:RestoreCursorPostion()
augroup END
```
公式ドキュメント
https://vim-jp.org/vimdoc-ja/autocmd.html
https://vim-jp.org/vimdoc-en/autocmd.html
参考
http://vim.wikia.com/wiki/Restore_cursor_to_file_position_in_previous_editing_session
初心者による投稿機能付き掲示板の作成①

<h2>[Laravel環境の構築のための準備]</h2>
<h2>はじめに</h2>
<p>
　4月からエンジニアとして就職し社会人になった初心者が、Laravelを活用して自力で掲示板を作成してみます。<br>
今回は、使用するソフトウェアのインストールについてお話します。
</p>

<h4>用意したソフトウェア</h4>
<p>

<h4>1.<a href="https://www.microsoft.com/ja-jp/software-download/windows10">windows 10</a></h4>
<p></p>

<h4>2.<a href="https://azure.microsoft.com/ja-jp/products/visual-studio-code/">Visual Studio Code</a>
</h4>
<p></p>

<h4>
3. <a href="https://www.apachefriends.org/jp/index.html">xampp</a>
</h4>
<p></p>

<h4>
4. <a href="https://getcomposer.org/">composer</a>
</h4>
<p></p>

</p>

<h2>インストール手順</h2>
<p><h4>Visual Studio Code</h4>　インストールは公式サイトより、お使いの環境に適した32bitもしくは64bit版のインストールを行ってください。<h6>使ってるpcがどっちかわからない！</h6>という方は、設定->システム->バージョン情報の、"システムの種類"の欄に記載があるので、そちらにて確認を行ってください。</p>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754176/c07567fa-c453-b299-6b75-bf2a33ca6567.png">

<hr>

<p>
<h4>xampp</h4>
　開発をするのに必要になるApache,PHPなどのアプリケーションやソフトウェアをパッケージにまとめたものです。そのため、xamppのインストールを行うことで、すぐにPHPでの開発が行えます。
<br>
　インストール先の設定等はそのままで、インストーラーからインストールを行ってください。
</p>

<hr>

<p>
<h4>composer</h4>
　公式サイトよりwindows版のインストーラーをダウンロード(黄色下線部)し、実行を行います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754176/1721d886-017f-7bd8-fcf3-d5a950e5adfd.png" title="1">
<br>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754176/daa39a2d-bbf9-25db-010c-79202fc8be88.png">
<br>
　xamppのダウンロードで、PHPのインストールが済んでいるので、インストール先には、<h6>C:¥xampp¥php¥php.exe</h6>上記が、指定されているかと思います。別のディレクトリが設定されている場合や、空の場合には、上記の通り設定を行ってください。
</p>
<hr>

<h2>composerの確認</h2>
　最後に、composerが正常にインストールされているかを確認していきます。
<br>
　コマンドプロンプト（Visual Studio Codeのターミナルでもok）上で下記のコマンドにて確認を行います。
<pre>
composer -v
</pre>

<br>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754176/c12b8b80-eb07-9952-8914-079e3c7d2ab0.png">

　上記のように表示がされれば、インストール完了。今回の内容は以上になります！

<h2>次回の予定</h2>
　Laravelでの開発を始めるために、laravelのインストール、復習を兼ねてファイルの説明などを行っていきます。
　最後までお読みいただきありがとうございます:grin:
React router でホームしか表示されない。

##routerでルートのページしか表示されない。
最初は以下のように書いていました。 /event にアクセスしてもホームが表示されてしまいます。

```React:app.js
<Switch>
    <Route path="/" component={Home} />
    <Route path="/event" component={Event} />
</Switch>
```
以下のように Route の中にexact を追加したら動作しました。

```React:app.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import HomeScreen from './screens/HomeScreen';
import EventDetailScreen from './screens/EventScreen';

export default function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/event" component={Event} />
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <HomeScreen />;
}

function EventDetail() {
  return <EventScreen />;
}
```

##なぜ？
exact は完全一致をさし、 exact が指定されていない場合は部分一致となります。そのため、"/event" 
にアクセスしても "/" が含まれているためホームが表示されたようです。

##参考
https://reactrouter.com/web/api/Route/exact-bool
Android でのシリアル通信アプリの開発


AndroidでUSBシリアル通信（その1）ハードウェア・ソフトウェア構成等
http://independence-sys.net/main/?p=355

先ずは情報収集
https://qiita.com/kerobot/items/ac8fa69955f9d3414f81
https://github.com/ksksue/AndroidSerialTerminal

USBシリアル通信アプリはあるものの、TeraTerm マクロみたいのはないのかなと…
https://play.google.com/store/apps/details?id=de.kai_morich.serial_usb_terminal&hl=ja
https://play.google.com/store/apps/details?id=jp.sugnakys.usbserialconsole&hl=ja
https://applion.jp/android/word/USB%20Serial%20Monitor%20Lite/
raspivid を実行後、任意のタイミングで止めたい

# 概要
Raspberry pi にカメラモジュールをつなげて動画を取ります。
よくある使い方のサンプルはこんな感じ。

```shell-session
$ raspivid -t 10000 -o test.h264
```

これだと撮影開始して10秒後に自動的に撮影停止します。
でも、ビデオカメラとしてはこれは普通の使い方じゃないですよね。
録画を開始したら自分の好きなタイミングで録画を停止したいのです。
録画開始時に何秒録画したいかなど分からないのです。

調べてみたら `raspivid` のオプションでしっかりできるようなのでメモとして残しておきます。

# やり方
- `-k` オプションを使う（キー操作で止める）
- `-s` オプションを使う（シグナルで止める）

の2通り分かったんですけど、とりあえず `-t` オプションは 0 にしておきます。`-t 0` で無限時間の録画ができるらしい（メモリの許す限り）。最大記録時間を決めたい場合は `-t` オプションを付けるのもいいと思います。

## `-k` オプションを使う方法

ヘルプを見てみると出てくるのがこれ。

```shell-session
$ raspivid --help
（略）
-k, --keypress  : Cycle between capture and pause on ENTER
（略）
```

要するに `ENTER` キーを押すごとに録画と一時停止を繰り返すのですね。
ここには停止方法が書いていないのですが、あちこち調べてみたところ、`X` キーを押してから `ENTER` キーを押すと録画停止するようです。

実行した様子はこんな感じ。

```shell-session
$ raspivid -t 0 -o test.h264 -k （録画開始）
[ENTER] （一時停止）
[ENTER] （録画再開）
x[ENTER] （録画終了）
$
```

これで録画を開始してから好きなタイミングで録画を止めることができる。

## `-s` オプションを使う方法
録画用のスクリプトとかを作るならこちらの方が使いやすそう。

```shell-session
$ raspivid --help
（略）
-s, --signal    : Cycle between capture and pause on Signal
（略）
```

説明が分かりにくい。`Signal` って何ですか？

これは要するに `kill -USR1 <プロセスID>` で録画一時停止／再開、`kill -USR2 <プロセスID>` で録画停止ができるってことのようです。

raspivid で録画中のプロセスIDは `pgrep raspivid` で確認できます。

実行時の様子をまとめるとこんな感じ。

```shell_session
$ raspivid -t 0 -o test.h264 & （録画開始）
[1] 7018 （ここでプロセスIDが返ってきてる）
$ pgrep raspivid （プロセスID確認）
7018
$ kill -USR1 7018 （一時停止）
$ kill -USR1 7018 （録画再開）
$ kill -USR2 7018 （録画停止）
```

録画開始としたのと別のウインドウ開いて `kill` してやっても録画が止まります。
``kill -USR2 `pgrep rasivid/` `` みたいに一気に書いちゃってもよさそうです。

しかし、`kill --help` を見てもこんなオプション載ってないな。なんだこれ。

# まとめ
以上の方法で録画開始時に録画時間を決めないで、録画開始してから任意のタイミングで `raspivid` を止めることができます。一時停止もできるので色々活用できそうです。
v-tooltip, v-slot, v-btn, v-iconについて

#v-tooltip, v-slot, v-btn, v-iconについて

完全なる個人用メモ。下記ソースコードの内容を紐解いてみる。

```html:紐解きたいソースコード
<template>
  <v-tooltip open-delay="350" top>
    <template v-slot:activator="{ on }">
      <v-btn v-on="on"
        small
        tile
        text
        :disabled="disabled"
        :color="command.color"
        @click="$emit('click', $event)">
        <v-icon>{{ command.icon }}</v-icon>
      </v-btn>
    </template>
    <span>{{ command.text }}</span>
  </v-tooltip>
</template>
```


<br>

##templateタグとは

```
<template>

</template>
```

vueは作成したテンプレートをパーツ（コンポーネントと呼ぶ）として埋め込むことができる。コンポーネントを別ファイルで作成する場合、templateタグで囲む。




<br>
##v-tooltipとは？

```
  <v-tooltip open-delay="350" top>
```

v-tooltipは、vuetify(ビューティファイ)の一つ。
`v-`がつくのはvuetify関連。

tooltipはHTMLのtitleタグの機能で、hoverしたときにテキストを表示する。


・`open-delay="  "`
ツールチップを表示する時間を設定できる。単位はミリ秒。

・`top`
上側に表示する。


v-tooltipで囲んだ要素にマウスがのったら、3.5秒後に指定したツールチップを上側に表示する。

>[v-tooltip](https://vuetifyjs.com/en/components/tooltips/)
[API](https://vuetifyjs.com/en/api/v-tooltip/)





<br>
##v-slot:activatorとは？

```
<template v-slot:activator="{ on }">
```

名前付きスロットを表している。

スロットとは、子のコンポーネントから親のコンポーネントにテンプレートの一部を差し込む機能のこと。

ここでは**activator="{ on }"でその要素がクリックされると、親のテンプレートの内容を表示**する。

なので単体では機能せず、 v-on="on" をつけたコンポーネントとセットで使用する。


```
    <template v-slot:activator="{ on }">
      <v-btn v-on="on">
        AAA
      </v-btn>
    </template>
    <span>BBB</span>
```

ここではv-btnとセットになっているので、「AAA」ボタンをクリックすると、「BBB」を表示する処理となる。


<br>
##v-btn

```html:
<v-btn v-on="on"
        small
        tile
        text
        :disabled="disabled"
        :color="command.color"
        @click="$emit('click', $event)">
</v-btn>
```

v-btnはボタンを表示するコンポーネント。

`v-on="on"`
名前付きスロットの`v-slot:activator="{ on }"`と紐けている。


・`small` :
ボタンのサイズ。
Xlarge > Large > Medium(デフォルト) > Small > XSmall


・`tile` :
四隅を角にする。border-radiusを除去する。


・`text` :
背景を透明にする。


・`:disabled="disabled"` :
vueの表記で、v-bindの省略形。HTMLタグの中で使うことで属性を付与している。

disabled属性として"disabled"という変数を設定している。
「:属性名="値"」

disabledはブーリアンでtrueの場合はボタンが押せない状態になる（非活性）

https://www.vuemastery.com/courses/intro-to-vue-js/class-&-style-binding


・`:color="command.color"` :
vueの表記で、v-bindの省略形。
color属性を設定している。


・`@click="$emit('click', $event)"` :
vueの表記。＠はv-on:の省略形。

- v-on:click クリックイベント

- $emit: 
コンポーネントの外（htmlファイル）にデータを渡す。
受け取り側は、設定されたイベント名を「@イベント名」で受け取る必要がある。


- 'click': 渡すイベントの名前。
HTMLファイルのタグ属性で、`@click="メソッド名"`を記述すると、クリックを感知して処理を実行できる。


- $event: 
元のDOMを渡す。
https://v1-jp.vuejs.org/guide/events.html



>[v-btn](https://vuetifyjs.com/en/components/buttons/)
[API](https://vuetifyjs.com/en/api/v-btn/)




##v-icon

```
<v-icon>{{ command.icon }}</v-icon>
```

v-iconはアイコンを表示するコンポーネント。
mdi+アイコンの名前で呼び出せる。(mdi = Material Design Icon)

上記例では、commandプロパティの値iconを呼び出している。
直接設定する場合は下記のように記述。

```
    <v-icon
      large
      color="teal darken-2"
    >
      mdi-email
    </v-icon>
```


大きいサイズで、色はティール（青と緑の中間色）のe-mailアイコンを表示。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/5126b482-39d8-b6eb-5223-be5ebc201dc7.png)

>[v-icon](https://vuetifyjs.com/en/components/icons/)
[iconの種類](https://materialdesignicons.com/)

かなりの種類のアイコンが使用可能。
[macOS] Target-ActionをCombineで処理する

## Combineたのしそう

ということで、Target-ActionをCombineで処理出来るようにしてみました。

for macOSですが、ちょっと変えればiOSとかでも出来るのではないでしょうか？

### 使い方
NSControlなどがPublisherを返せるようにしたので、以下のようになります。

```swift
let b = NSButton(frame: NSRect(x: 0, y: 0, width: 200, height: 120))
let cancel = b.actionPublisher().sink { print($0) }

b.performClick(nil)
// prints <NSButton: 0xXXXXXXX>

b.performClick(nil)
// prints <NSButton: 0xXXXXXXX>
```

`Publisher`の`Output`をTarget-ActionでいうところのSenderにしていますので、あまり違和を感じずに移行できると思います。

### 実装

#### ActionPublisher
利用者が気にするべきなのは通常このActionPublisherだけです。

```swift
public struct ActionPublisher: Publisher {
    
    public typealias Output = ActionPerfomer
    public typealias Failure = Never
    
    private let actionReceiver: ActionReceiver
    
    init(actionPerfomer: Output) {
        
        self.actionReceiver = .init(actionPerfomer: actionPerfomer)
    }
    
    public func receive<S: Subscriber>(subscriber: S)
        where Failure == S.Failure, Output == S.Input {
            
            actionReceiver.handler = { performer in _ = subscriber.receive(performer) }
            
            subscriber.receive(subscription: ActionSubscription(actionReceiver: actionReceiver))
    }
}
```

#### ActionSubscription
Handlingをキャンセルする時のための`AnyCancellable`として現れますが、通常はその具象型である`ActionSubscription`を気にかける必要はありません。

```swift
public struct ActionSubscription: Subscription {
    
    public let combineIdentifier = CombineIdentifier()
    let actionReceiver: ActionReceiver
    
    public func request(_ demand: Subscribers.Demand) {}
    
    public func cancel() {
        
        actionReceiver.handler = nil
    }
}
```

#### ActionReceiver
実際にTarget-Actionをハンドリングするヘルパークラスです。
このクラスは外部からは隠蔽されています。

```swift
internal final class ActionReceiver: NSObject {
    
    private(set) weak var actionPerfomer: ActionPerfomer!
    var handler: ((ActionPerfomer) -> Void)?
    
    init(actionPerfomer: ActionPerfomer) {
        
        self.actionPerfomer = actionPerfomer
        
        super.init()
        
        actionPerfomer.target = self
        actionPerfomer.action = #selector(action)
    }
    
    @IBAction private func action(_ sender: Any) {
        
        handler?(actionPerfomer)
    }
}
```

#### ActionPerfomer
Target-ActionにおけるSenderとなるクラスが準拠するべきプロトコルです。
Target-Actionがかなり緩い制約の下で動いているので必要最低限のみが宣言されています。

ここでは一般的にSenderとなりうる`NSControl`と`NSMenuItem`を準拠させています。

また、`ActionPublisher`を取り出すメソッドをextentionとして実装しています。

```swift
public protocol ActionPerfomer: AnyObject {
    
    var target: AnyObject?  { get set }
    var action: Selector? { get set }
}

extension NSControl: ActionPerfomer {}
extension NSMenuItem: ActionPerfomer {}

extension ActionPerfomer {
    
    func actionPublisher() -> ActionPublisher {
        
        .init(actionPerfomer: self)
    }
}
```
Google Colabで作成したTensorFlowのモデルをローカルで読み込んだらエラーが出まくった話

# 環境
### Google Colab環境
Python3.6.9
TensorFlow2.3.0

### ローカル環境
Python3.6.7
TensorFlow2.1.0

# 何が起こったか？
Google Colabで作成したモデルをダウンロードし、
ローカル環境で実行しようとしたところ、TesorFlowのインポートしたタイミングで怒られました。
 
``ImportError: DLL load failed: 指定されたモジュールが見つかりません``

# TensorFlow2.1からはMicrosoft Visual C++ Redistributableが必要
調べてみたところ、TensorFlow2.1からはMicrosoft Visual C++ Redistributableが必要らしい。
以下のURLからインストールを行います。
https://support.microsoft.com/en-us/help/2977003/the-latest-supported-visual-c-downloads

これで解決！と思いきや、またもエラーに遭遇します。

# importは出来たけど、モデルの読み込み時にKeyError: 'sample_weight_modeとエラーが表示された

以下のコードでモデルを読み込もうとしたところ・・・

```Python
from tensorflow.keras.models import load_model
new_model = load_model(r'***.h5')
```

↓のようなメッセージが表示され読み込めない。
``KeyError: 'sample_weight_mode'``

またもGoogle先生のお世話になったところ、
海外のフォーラムで全く同じ現象の方がいらっしゃいました。
https://github.com/keras-team/keras/issues/14040

この記事によると、TensorFlow2.3で作成したモデルを、下位のバージョンで読み込もうとするとエラーになるらしいです。

ローカル環境のTensorFlowを2.3に上げると、無事読み込みがされました。（コマンドは以下）

```PowerShell
pip install tensorflow==2.3.0
```
UserDefaults register(defaults:) の勘違い

```swift
let key = "hogehoge"
print(UserDefaults.standard.integer(forKey: key))
UserDefaults.standard.register(defaults: [key:12345])
print(UserDefaults.standard.integer(forKey: key))
```

これを実行すると、

```
0
12345
```

と出力されます。ここまでは問題なし。
そのままもう一回実行すると、

```
0
12345
```

また同じ出力になります。なんで最初0なん？:disappointed_relieved:

[ドキュメント](https://developer.apple.com/documentation/foundation/userdefaults/1417065-register)をよく見てみると、

原文:
> The contents of the registration domain are not written to disk; you need to call this method each time your application starts. 

DeepL:
> 登録ドメインの内容がディスクに書き込まれないので、アプリケーションが起動するたびにこのメソッドを呼び出す必要があります。

NOT WRITTEN! :scream:
書き込まれない！:scream:

ずっと書き込まれると思ってました。
ヤマト運輸B2クラウドと全角スペースのある住所

WEBアプリケーションになった送り状作成ソフトB2が登場してから久しい

とあるお客様の住所が長く、後半に全角スペースが2ヶ所で使われていた

そうしたらどういうわけか一部文字列をロストしてしまう

どうやら仕様だという

残念

とりあえず半角スペースに正規化してやれば防げるらしい
SpringBoot でポートを変更する

# 環境
* Windows10
* IntelliJ IDEA
* Git Bash

# port を変更する
src > main > resources > application.yml に以下を追記します。

```application.yml
server:
  port : 8081
```

実行し、デフォルトポート 8080 から変更されていることを確認します。

```
$ curl http://localhost:8080/
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:--  0:00:03 --:--:--     0
curl: (7) Failed to connect to localhost port 8080: Connection refused

$ curl http://localhost:8081/
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100    13  100    13    0     0    149      0 --:--:-- --:--:-- --:--:--   149
Hello World!
```

## application.properties の場合
src > main > resources > application.properties の場合は以下のように記載します。

```application.properties
server.port=8081
```
git flowとgithub flow　開発運用方法の違い

## git flow と github flow
Gitにおけるリポジトリモデルのことであり、どのようにbranchを切って開発・運用していくのかというワークフローの話。
github flowはgit flowを簡略化したものであり、スピード感を持って開発運用していく場合には推奨される。ただ、どちらの方が良いということは一概には言えず、開発スピードや開発規模等によってそのワークフローを考える必要がある。


# git flow
![gitflow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608770/49920296-74c3-7e9f-415e-f38d8cbcdff1.png)

・masterブランチ
　- メインブランチで常にリリースできる状態

・developブランチ
　- メインのブランチでここからブランチを切って開発を進める

・featureブランチ
　- developから個人別にブランチを切って開発開始

・hotfixブランチ
　- 緊急のバグなどをmasterからブランチを切って対応

・releaseブランチ
　- リリース直前用のブランチ


## 特徴
![feature_branch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608770/f1f11d9f-35f0-e1b5-08be-9aadb36026b4.png)![main_branch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608770/ba313e9b-e2a8-5c69-772d-e78e53e50ba6.png)

基本的にはmasterはreleaseからmergeされてデプロイするだけの立ち位置。
developからfeature（開発用）ブランチを切って、開発しdevelopにmergeするという流れ。
リリース前にはdevelopからreleaseブランチへmergeし、その後masterへ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608770/ae8ec92c-dd74-dcdb-7bef-f846b08c60ff.png)

サービスリリース後にバグ等が発見された場合、迅速な修正が求められ、
そのような時のためにfotfixはmasterから直接ブランチを切り、バグ修正後、masterに直接mergeし、developにも変更を反映させる。


## 開発の流れ
・masterからdevelopブランチを切り、developからfeatureブランチを切り、それぞれ開発開始。

・featureブランチで作業が終わったらdevelopへmergeする。

・developにはいくつかのブランチ（feature）からmergeされている状態で、リリースする前にreleaseブランチへmergeし、微調整。

・リリースできそうになればreleaseからmasterとdevelopへそれぞれmergeする。

・masterへのマージが完了したらデプロイを行う。

※バグが発生した場合
・masterから直接ブランチを切る（hotfix）

・hotfixで修正して、masterとdevelopへそれぞれmergeする。

・masterへのマージが完了したらデプロイを行う。



# GitHub flow
![githubflow.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608770/1617f972-1888-7b61-f912-7143556e4157.jpeg)

github flowはgit flowを簡略化したものであり、シンプルな構成になっているため、
1日に複数回デプロイを行うようなスピード感を持ったWebアプリケーションの開発に適している。


## 開発の流れ
・GitHub Flowでは、全てのブランチをmasterブランチから切り、他の開発者の作業状況を把握できるよう、作業用ブランチは定期的にリモートリポジトリにプッシュする。

・作業用ブランチをmasterブランチへマージできる状態になったら、プルリクエストを作成して他の開発者にコードレビューを依頼し、プルリクエストが承認されたらmasterへマージします。GitHub Flowを使用した開発では、プルリクエストを積極的に活用するのがポイント。

・masterへのマージが完了したら直ちにデプロイを行う。


# 運用方法まとめ
git flowもgithub flowもそれぞれ良いところがあり、欠点もある。
弊社ではgit flowとgithub flowの良いところ取りをしているような感覚だ。
基礎となるのはgit flowだが、github flowで用いられるプルリクエストを用いてレビュー改善を行い、masterへのmergeはreleaseブランチを使わずdevelopをそのままmergeするという、必要なところ（開発の確認）には時間をかけ、リリース時にはスピード感を持ってデプロイすることができる良いところ取りだ。
皆さんも会社の開発運用方法の確認と変更の検討をしてみてはどうだろうか。


### 参考

https://www.footchantech.com/post/git-flow-and-github-flow

・https://nvie.com/posts/a-successful-git-branching-model/
・https://www.atmarkit.co.jp/ait/articles/1708/01/news015.html
・https://qiita.com/mint__/items/bfc58589b5b1e0a1856a
Node.jsを利用してフォルダ作成を効率化してみる

# はじめに
「001」「002」「003」・・・「100」のような大量のフォルダを作成する必要があり、手作業でやるのは馬鹿馬鹿しいのでNode.jsで作ってみました。Windowsで動作します。

```mkdir.js
const fs = require('fs')

// プログラム実行ディレクトリ配下を指定
const rootPath = process.cwd() + '\\';

for (let i = 1; i <= 100; i++) {
    const num = ('000' + i).slice(-3);
    const directoryPath = rootPath + num;
    fs.stat(directoryPath, (error, stats) => {
        if (error) {
            if (error.code === 'ENOENT') {
                fs.mkdir(directoryPath, (error) => {
                    if (error) {
                        throw error
                    } else {
                        console.log(`${directoryPath}ディレクトリを作成できました。`)
                    }
                });
            } else {
                console.log(error);
            }
        } else {
            console.log(`${directoryPath}ディレクトリは既に存在します。`);
        }
    })
}
```
一太郎2020をVBScriptから動かしたメモ

一太郎をOLEで外部のプログラムから起動、保存、終了させたく試してみました。一太郎は持っていないので体験版を使ってみました。情報は少なかったけど、「マクロバイザー」のヘルプを見ろ。と言う情報を見つけてなんとかなりました。

```taro.vbs
Dim taro
'ComObjectを作成
Set taro = CreateObject("JXW.Application")
'一太郎の文書ファイルを開く
taro.Documents.Open ("C:\Users\Admin\Documents\sample.jtd")

'文書をいじる為にMsgBoxで一時停止
MsgBox("閉じる")

'SaveDocumentは文書いじってなくても保存確認のメッセージが表示されます。
'メッセージいらないんだけどな～
taro.TaroLibrary.SaveDocument
'ドキュメントを閉じる
taro.Documents.Close
'一太郎を終了
taro.Quit
```

同じことをPowerShellでやってみましたが、
　　*New-Object -ComObject JXW.Application*
がうまくいきませんでした。エラーにはならないけど、オブジェクトが空みたいでした。最終的に何の言語で作るかは決まっていません。
LINE BOTのif～で躓いた件

とりあえず自分用のメモとして書いておく。

#具体的に説明

まず、何に躓いたかを具体的に説明していく。

LINE BOTのサンプルコードで配布されているのは、だいたいオウム返しのサンプルコードだ。

正直、オウム返しなんて興味ないので、苦労して探した結果、

送られた文章に「りんご」という文字列が入っていたら、「apple」と送り返す。

```python:test
if "りんご" in event.message.text:
```

というサンプルコードが見つかった。

これを少し改造して、

送られた文章の文字列が「りんご」と一致したら、「apple」と送り返す。

```python:test
if event.message.text == "りんご":
```

というコードにしたかったのだが、ここで躓いた。

どう躓いたのかというと、

```python:test
if event.message.text == "りんご":
```

というコードに変更したら、なぜか何も帰ってこなかったのである。

##原因

原因はというと、

```python:comp
    if event.message.text == "/url":
        line_bot_api.reply_message(
          event.reply_token,
          [TextSendMessage(text="あああ"))]
```

このコードの中に、「[」があるのはわかるだろうか。

これが悪さをしていた...

ということで、「[」を消して再試行すると、うまく行った。

###まとめ

コード内に[]を入れてはいけない。

#ソースコード

https://ux.getuploader.com/rdup/download/25
Xamarin.Forms+Prism.FormsでViewModelからViewのメソッド(WebView.EvaluateJavaScriptAsync)を呼び出す

#Xamarin.Forms+Prism.FormsでViewModelからViewのメソッド(WebView.EvaluateJavaScriptAsync)を呼び出す
WebViewのEvaluateJavaScriptAsyncを使用する際、VM→Vメソッド呼び出しを実装したので覚え書き。

WebViewにはローカルのHTMLファイルを設定している。
*WPFなら以下サンプルソースのBindingContextをDataContextに変更する。*

##実装
```xml:View.xml
<?xml version="1.0" encoding="utf-8 ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="http://prismlibrary.com"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="App.Views.ViewPage">
    <ContentPage.Content>
        <WebView x:Name="webView" Source="{Binding Url}" />
    </ContentPage.Content>
</ContentPage>
```
- 「x:Name="webView"」で、View.csから参照できるように。
- 「Source="{Binding Url}"」で、UrlはViewModel.csで設定。

```csharp:View.cs
namespace App.Views
{
    public partial class ViewPage : ContentPage
    {
        public ViewPage()
        {
           InitializeComponent();

           var vm = (ViewPageViewModel)BindingContext;
           vm.InvokeJsEvent += JsAsync;
        }
    }

    async void JsAsync(string num)
    {
        var js = $"factorial(num)";
        var result = await webView.EvaluateJavaScriptAsync(js);
    }
}
```
- 「vm.InvokeJsEvent += JsAsync」で、ViewModelの当該イベントにViewのメソッドを登録。

```csharp:ViewModel.cs
namespace App.ViewModels
{
    public class ViewModel : TabItemViewModelBase
    {
        private string _url;
        private IBaseUrl _baseUrl;

        public delegate void InvokeJsAction(string data);
        public event InvokeJsAction InvokeJsEvent;

        public ViewModel(IBaseUrl baseUrl)
        {
            _baseUrl = baseUrl;
        }
    }
    
    public override void Initialize(INavigationParameters parameters)
    {
        Url = $"{_baseUrl.Get()}index.html";
    }

    public override void RaiseIsActiveChanged()
    {
        if (IsActive)
        {
            InvokeJsEvent?Invoke("100");
        }
    }
}
```
- 「IBaseUrl」には、デバイス別ローカルHTMLファイルのBaseUrlを格納している。
- 「InvokeJsEvent?Invoke("100");」で、イベント呼び出し→Viewのメソッド呼び出し→JSのメソッド呼び出し。

※RaiseIsActiveChangedは、TabbedPageでTabがActiveになった際に呼ばれる。
　普通のContentPageなら、OnNavigatedTo()などで呼び出せば良さげ。
　Initialize()などで呼び出すと、htmlが読み込まれる前にJS呼び出しを行おうとし、
　NullReferenceExceptionが発生することがある様子（詳細は未調査）。


##参考
https://stackoverflow.com/questions/8658499/calling-a-method-in-views-codebehind-from-viewmodel
↑ネタ元

https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/webview?tabs=windows
IBaseUrl（ローカルのHTMLファイル読み込み）の実装は公式ドキュメント参照。

https://stackoverflow.com/questions/58922622/how-to-trigger-onnavigatedto-on-the-second-third-tab-in-tabbedpage-using-prism
TabItemViewModelBaseのRaiseIsActiveChanged()については、↑参照。
CDK で API Gateway の実行ログとアクセスログを有効にする

API Gateway(REST API) で開発するとき、アクセスログと実行ログを出すようにすると、トライアンドエラーが捗りますよね。

CDK(TypeScript) でこれを有効にするには、こんな感じです。

```TypeScript
const accessLogGroup = new logs.LogGroup(this, 'AccessLog');
const api = new apigateway.RestApi(this, 'Api', {
  deployOptions: {
    loggingLevel: apigateway.MethodLoggingLevel.INFO,
    dataTraceEnabled: true,
    accessLogDestination: new apigateway.LogGroupLogDestination(accessLogGroup),
    accessLogFormat: apigateway.AccessLogFormat.clf()
  }
});
```

実行ログに関する設定は、loggingLevel と dataTraceEnabled です。
マネジメントコンソールで言うと、*ログレベル* と *リクエスト/レスポンスをすべてログ* を指します。

アクセスログに関する設定は、accessLogDestination と accessLogFormat です。
これは、出力先のロググループと、アクセスログのフォーマットです。

これで API にアクセスすると、CloudWatch ログで、実行ログとアクセスログがそれぞれ別のログストリームに出力されます。

## 参考
* [CDK API Gateway Overview](https://docs.aws.amazon.com/cdk/api/latest/docs/aws-apigateway-readme.html)

## Source Code
コード全体はこちら。
https://github.com/kazfuku/apigateway-java-lambda-authorizer/blob/master/lib/apigateway-java-lambda-authorizer-stack.ts
【Laravel】ORMを用いた、JSON型のカラムに対しての検索条件記述方法

メモとして残します。

細かい機能レベル権限をJSON型カラムを用意してjson形式でDB管理。
whereで検索しようとしたときに、「どうやって検索するんだ？」となったため、メモ。

#■前提
EroquentモデルでテーブルにJSON型のカラムをメンバ変数`$casts`にjson型で扱うように定義。

```php
class User extends Model
{
    protected $casts = [
        'JSON型のカラム名' => 'json', //jsonでなく、確かarrayでも可
    ];
}

```
#■やり方

```php
$user = User::where('JSON型のカラム名->hogehoge', "条件")
            ->get();

```
deployment.yamlでEBSボリュームをCSIコントローラでマウントするサンプルコード


## ファイル

```testpv/storageclass.yaml
kind: StorageClass
apiVersion: storage.k8s.io/v1
metadata:
  name: ebs-sc
provisioner: ebs.csi.aws.com
volumeBindingMode: WaitForFirstConsumer
```

```testpv/claim.yaml
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: ebs-claim
spec:
  accessModes:
    - ReadWriteOnce
  storageClassName: ebs-sc
  resources:
    requests:
      storage: 4Gi
```

```testpv/deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: deployment
spec:
  replicas: 2
  selector:
    matchLabels:
      app: centos
  template:
    metadata:
      labels:
        app: centos
    spec:
      containers:
        - name: centos
          image: centos:latest
          tty: true
          volumeMounts:
            - name: persistent-storage
              mountPath: /mnt
      volumes:
        - name: persistent-storage
          persistentVolumeClaim:
            claimName: ebs-claim
```

## 実行

```
kubectl apply -f testpv/
```

## 動作確認

```
yuta:~ $ kubectl get pod 
NAME                            READY   STATUS    RESTARTS   AGE
deployment-687fbd7969-8spch     1/1     Running   0          2m16s
deployment-687fbd7969-xk69b     1/1     Running   0          2m16s
external-dns-547f4784f7-zqhdf   1/1     Running   0          2d8h
yuta:~ $ 
```

### Pod1号機

```
yuta:~ $ kubectl exec -it deployment-687fbd7969-8spch /bin/bash
kubectl exec [POD] [COMMAND] is DEPRECATED and will be removed in a future version. Use kubectl exec [POD] -- [COMMAND] instead.
[root@deployment-687fbd7969-8spch /]# touch /mnt/chinko 
[root@deployment-687fbd7969-8spch /]# ls -l /mnt/chinko 
-rw-r--r-- 1 root root 0 Oct  1 07:39 /mnt/chinko
[root@deployment-687fbd7969-8spch /]# 
```

### Pod2号機
```
yuta:~ $ kubectl exec -it deployment-687fbd7969-xk69b /bin/bash 
kubectl exec [POD] [COMMAND] is DEPRECATED and will be removed in a future version. Use kubectl exec [POD] -- [COMMAND] instead.
[root@deployment-687fbd7969-xk69b /]# ls -l /mnt/
total 16
-rw-r--r-- 1 root root     0 Oct  1 07:39 chinko
drwx------ 2 root root 16384 Oct  1 07:36 lost+found
[root@deployment-687fbd7969-xk69b /]# 
```
Android Chromeのリモートデバッグ

Androidのブラウザに送ったコードをデバッグしたい。

１．検索して見つかった記事は、全部、"about:debug"をアドレスバーにタイプしろ、ばかり。やってみたが、動かない。古いのでは。
２．そのうち、Google本家の　https://developers.google.com/web/tools/chrome-devtools/remote-debugging?hl=ja　にヒットしたが、やってみてもダメ。本家ドキュメントも実際のChromeコードに追い付いていない。

適切な情報が、今日現在、どこにも載っていないので、書いておきます。
たぶん、1年以内に、この情報も古くなります。

Google本家のをやって警告に出ていた、chrome://inspect/#devices をやったらできた。

1. Androidスマホをつなぐ
2. 開発マシンPCでChrome起動
3. 開発マシンでchrome://inspect/#devices。Discover USB devicesがチェックされていることを確認。
4. スマホのAndroidブラウザ起動
５．chrome://inspect/#devices　画面に接続デバイスがあって、そのデバイスの下に、ブラウザのURLアクセスごとの情報が出る。そのinspectをクリックすると、Consoleの出力がPCでみられる。
Windows10で誤ってCtrl+Alt+F8を押下してディスプレイが表示されなくなった時の対応方法

- 環境 : Windows10 Pro バージョン1909

# 事象 : Ctrl+Alt+F8を押下したら3つのディスプレイの内2つが表示されなくなった
ノートパソコンに2台のディスプレイを繋げて使っていた。
PythonのIDEであるPyCharmのショートカット「Ctrl+Alt+F8(式のクイック評価)」を押下したら、
2台のディスプレイが表示されなくなった・・・。

## 原因 : マルチディスプレイの設定がリセットされたから
そんなショートカットがあるなんて・・・初めて知った。

> ちなみに、このマルチディスプレイの設定をリセットしてしまうショートカットキーは、以下の通りです。
> ［Alt］＋［Ctrl］＋［F8］
> 何らかの理由で押してしまった場合、冷静に対処しましょう。
> 全てのPCで同じことが起こるわけではないと思います。かつての記事「【Windows】画面の回転の無効化（OSのホットキーの無効化）」では、Intelのチップセットの機能であることがわかりました。
> [【Windows 10】突然デュアルディスプレイが表示されなくなった場合の対処方法 | みんなのワードマクロ](https://www.wordvbalab.com/pc/13030/)

### 対応 : マルチディスプレイの設定をやり直す
1. デスクトップで右クリック > [ディスプレイの設定]でダイアログを開く
1. [マルチ ディスプレイ] > [複数のディスプレイ](選択して[変更の維持]をするたび選択肢が変わる)
1. 「デスクトップを1と2に複製する」を選択すると1台目のディスプレイが認識されて表示されるので[変更の維持]ボタンで反映する
1. 「デスクトップを1と2に拡張する」を選択すると1台目のディスプレイに拡張表示されるので[変更の維持]ボタンで反映する
1. 「デスクトップを1と3に複製する」を選択すると2台目のディスプレイが認識されて表示されるので[変更の維持]ボタンで反映する
1. 「デスクトップを1と3に拡張する」を選択すると2台目のディスプレイに拡張表示されるので[変更の維持]ボタンで反映する

![hoge.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/10e674c3-f422-10ea-b3d8-c657b6a95d4c.gif)
k8s でweave net を使ってpodネットワークアドオンを追加したときのエラー備忘録



## 出たエラー

```
kubectl apply -f "https://cloud.weave.works/k8s/net?k8s-version=$(kubectl version | base64 | tr -d '\n')"

```

を実行した際の、

```
The connection to the server localhost:8080 was refused - did you specify the right host or port?
The connection to the server localhost:8080 was refused - did you specify the right host or port?
```

のエラー

## 解決策

以下を実行し、

```
https://stackoverflow.com/a/52262765
```

さらに以下のように権限を変更した。

```
sudo chmod -R 777 .kube
```