OmniAICreator/Qiita-1.07M huggingface dataset:
HTMLメール作成のコツ・注意点

#2020年7月時点
HTMLメール作成時のコツや注意点をまとめました。

## デザイン
- 全てのメーラーがメディアクエリに対応しているわけではないので、メディアクエリありきのデザインにしない。
- メインエリアの横幅の最大値は600pxくらいにする。

##CSS
- インライン形式で記述するのが、もっとも保証される。
- ただかなり面倒なので、細かいところはhead内に埋め込み形式で記述し、最後にツールでインライン化すると楽チン。
- 外部スタイルシートを読み込む方法はナシ。
- インライン化できるオンラインツール「[Inline styler](https://inlinestyler.visigo.com/)」を利用。
- Gulpのプラグインでインライン化する方法もあるらしい。

##フォント
- 基本的にbodyにfont-familyで記載（フォントにこだわる案件の場合は、フォールバック必須）
- ただbodyに記載だけだと、windowsのデスクトップアプリ 「outllok」と「メール」に指定フォントが当たらず、メーラーのデフォルトフォントになってしまう。（オリジナルのコードが、メーラによって書き換えられてしまい、メーラーのスタイルが当てられてしまうのが原因）
- フォントを当てたい要素にインラインで記述するとメーラーによってスタイルが書き換えられずに意図したフォントになる。（※このとき @importantは使わない。）

##メディアクエリ
- メディアクエリに期待しない。メディアクエリを使用しなくても問題ない作りにする。
- より良く見せるためのメディアクエリは推奨。例：メインエリアの横幅にwidth=600px指定し、メディアクエリ600px以下でwidth:100%にすると、メディアクエリに対応しているメールだけレスポンシブになる。
- 以下メディアクエリに対応しているメーラー
 - macOS 10.15 標準メーラー
 - iphone ios13 標準メーラー
 - iphone ios13 outlookアプリ
 - iphone ios13 gmailアプリ
 - windows10 IEブラウザ outllok
 - windows10 Edgeブラウザ outllok
 - windows10 デスクトップアプリ outllok
 - windows10 デスクトップアプリ メール


##全体構成
- HTML4.01を使用し、文字コードを「iso-2022-jp」に設定。（編集中は UTF-8にするとかでも）
- テーブルレイアウトで組む。
- rowspan、colspanは使わない。
- 細かいレイアウト部分はdivとかも使ってOK。
- メインエリアの横幅にmax-widthは基本的に使用しない。メーラによって崩れることがある（windowsのoutlookアプリなど）　

## 画像
- 絶対パスで書く。
- width="size" height="size"を指定する。指定しないとメーラーによって画像100%で表示されてしまう。
- autoを意味する`height="*"`は使用しない。IE/Edgeのoutlookで高さを認識されず画像が表示されない。

## 余白
- 水平方向：余白用の`td`を用意しwidth指定する。
- 垂直方向：paddingかmarginの上下を使用する。余白用の`td`を用意しheight指定しても尚良し。
- outlook対応が必要な場合は、paddingではなくmarginを使用する方が微妙なレイアウトのズレを防げる。
- 余白が不要な部分も0pxとすることで、レイアウトの微妙なズレを防げる。（例：padding 0 0 10px 0:）
- tdにmarginは効かない。

## border
- tableに指定するのが無難。

## text-decoration:none
- outlookでtext-decoration:noneが無視される。a要素の中にstrongを入れ、strongに対し`text-decoration:none`する。font-weightを通常に戻すのもお忘れなく。

```html:
<div><a href="#" style="text-decoration:none;"><strong style="text-decoration:none;font-weight:500;">テキストです</strong></a></div>
```

##outlookの「ブラウザで表示」
受信したメールをwebで表示する機能。たまに「ブラウザで表示」限定でレイアウト崩れが発生していることがある。
- 画像の周囲に青線が入ってしまうので画像の各要素に対し `img {border:none;}`
- テキストが中央寄せになるのでテキストの各要素に対し、`.text {text-align: left}`する。

## 配信テスト
- 配信テストは必須。同じoutlookでもブラウザやアプリで全然違う。
- 無料で配信テストできるサイト「[PutsMail](https://putsmail.com/tests/new)」の利用がおすすめ。
- 有料版ならいちいちメール開かずともウェブで表示チェックできるツール多数あり。

##参考になるサイト
- デザイン/コーディング前に押さえておきたい、HTMLメール作成の基礎知識https://www.granfairs.com/blog/staff/htmlmail-prior-information
- Outlook、Gmail、スマホでも崩れない必勝HTMLメールコーディング
 https://blog.kannart.co.jp/coding/1093/
- HTMLメール作成で押さえておきたいポイント
 https://satoyan419.com/creating-html-email/
- HTMLメール制作編：コーディングサンプルや、役立つWebサービスのご紹介https://www.granfairs.com/blog/staff/htmlmail-actual-production
- 【2020年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例 https://willcloud.jp/knowhow/font-family/#HTML
- How to Code Emails for Outlook 2016 https://www.emailonacid.com/blog/article/email-development/how-to-code-emails-for-outlook-2016/
transition プロパティがマウスアウト時に効かない時の対処法

# 要約
- transition プロパティは `:hover` に指定してしまうと、マウスアウトした時に瞬時に戻ってしまう
- ので、アニメーションさせたい要素そのものに transition を指定する

# 概要
CSSでアニメーションを付与するプロパティには transition と animation プロパティがあります。
複雑なアニメーションには animation が向いていますが、そのまま使うとマウスアウトに巻き戻しが起こらないということもあり、リンクホバーなど簡単なアニメーションでは transition を使う場合が多いと思います。

# 問題
しかし、transition を使っているのにもかかわらず、マウスアウト時にアニメーションせず、瞬時に戻ってしまう時があります。

原因は transition を付与する場所です。
`:hover` に transition を指定してしまうと、マウスアウトの時に巻き戻るアニメーションが起こらず、瞬時に戻ってしまいます。
これは**transitionが `:hover` = マウスオーバー時にのみ有効になっているから**です。

例：transition が `:hover` に指定されている
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="semigura" data-slug-hash="qBdajXb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="transition-1-1">
  <span>See the Pen <a href="https://codepen.io/semigura/pen/qBdajXb">
  transition-1-1</a> by semigura (<a href="https://codepen.io/semigura">@semigura</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 解決

これを防ぐには、アニメーションさせたい要素そのものに transition を付与します。

例：transition が要素そのもの に指定されている
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="semigura" data-slug-hash="XWbjgzr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="transition-1-2">
  <span>See the Pen <a href="https://codepen.io/semigura/pen/XWbjgzr">
  transition-1-2</a> by semigura (<a href="https://codepen.io/semigura">@semigura</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

ちなみにこれを逆手に取ると、[マウスオーバー/アウト時にアニメーションの動きを変える](https://qiita.com/semigura/items/fd0ba638e259db990507)ことが出来ます。
【C++】MacのVScode上で.cppファイル読み取り&コンパイル → 実行 まで (拡張機能)

# はじめに
備忘録・理解目的。
おかしいところ等あればご指摘いただけるとありがたいです(^_^;)


# 環境
・ Mac OS Catalina：　v10.15.3
・ VScode： v1.42.1
・ C/C++： v0.26.3
・ Code Runner： v0.9.15
　
表示させたいコード(ハローワールド)

```helloworld.cpp

#include <iostream>

using namespace std;

int main(){
  cout << "Hello World!" << endl;
  return 0;
}
```

# 手順

## C/C++ extension for VS Code のインストール


VScode拡張機能として`Extention`から「 **C/C++ extension for VS Code** 」をインストール。

https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools


## Code Runner のインストール

同じく`Extention`から「 **Code Runner** 」をインストール。

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

## 実行 & 結果

コード画面右上に表示される 「 `▷` 」 をクリックするとコンパイルされて別ファイル（↓）ができ、VScodeのターミナルで実行される。

```
��������!...
```
　
実行結果

```cpp

[Running] cd "ファイルパス" && g++ helloworld.cpp -o helloworld && "ファイルパス"helloworld
Hello World!

[Done] exited with code=0 in 1.362 seconds
```


## コマンド・ショートカット 等
・起動
　「 Ctrl 」 + 「 Alt 」 ＋ 「 N 」

・停止（***読み取り表示のみのため、実行中はctrl+C、killコマンドができない***）
　「 Ctrl 」 + 「 Alt 」 ＋ 「 M 」



# 参考
[Run C++ Code in macOS Visual Studio Code! (2019)](https://www.youtube.com/watch?v=zIIYN_PyUAM)
[Visual Studio CodeでC/C++プログラミング](https://qiita.com/whim0321/items/ce7c1d8d203a21778a83)
[Visual Studio Codeにてコードを実行することができる拡張機能](https://www.bloguchi.info/1282)
GitHubのWorkFlowにESLint Actionを入れてみた

表題の通り

## yamlファイルの設定

- yamlファイルの設定は公式サイトを参考
「[Deprecated: ESLint GitHub Action](https://github.com/eslint/github-action)」
- プルリクエストとpush対象のbranch(master)を指定
- nodeのverはGAEのnode verに合わせる


```yaml:.github/workflows/eslint.yml
name: ci eslint

on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10]

    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: yarn install, eslint
        run: |
          yarn
          yarn eslint
```

## npm scriptsの設定

- 次にjobsのstepで記載した`yarn eslint`に対応。このコマンドでeslintが起動させる
- eslintのpackageをinstallしている前提
- `src`ディレクトリにReactのファイルとjsファイルが格納されてる前提です。(いずれもTypeScriptで記述)

```json:package.json
"scripts": {
  "eslint": "eslint --ext .ts,.tsx --fix src/**"
},
```
EC2でsecureログにerror: AuthorizedKeysCommandが出力されるようになった

# 概要

掲題の通りにsecureログに以下のようにerrorが記録されるようになった
原因は`ec2-instance-connect`を`1.1-12`にアップデートした。`1.1-11`では出力されない
なお、SSH接続は問題なく接続できるが、監視システムでアラートが発報される可能性があるので対応したほうがいいですね

```text:/var/log/secure
Feb 20 14:57:29 ec2-user sshd[8046]: Connection from xxx.xxx.xxx.xxx port 17756 on xxx.xxx.xxx.xxx port 22
Feb 20 14:57:30 ec2-user sshd[8046]: error: AuthorizedKeysCommand /opt/aws/bin/eic_run_authorized_keys ec2-user SHA256:xxxxxxxxxxxxxxxxx failed, status 22
Feb 20 14:57:30 ec2-user sshd[8046]: Accepted publickey for ec2-user from xxx.xxx.xxx.xxx port 17756 ssh2: RSA SHA256:xxxxxxxxxxxxxxxxx 
Feb 20 14:57:30 ec2-user sshd[8046]: pam_unix(sshd:session): session opened for user ec2-user by (uid=0)
```

# 対策法

以下の2つの方法があります

その1、シンプルにsshd_configの該当箇所をコメントアウトする

```config:/etc/ssh/sshd_config
# コメントアウト
#AuthorizedKeysCommand /opt/aws/bin/eic_run_authorized_keys %u %f
#AuthorizedKeysCommandUser ec2-instance-connect
```

その2、接続ユーザのアクセス許可をポリシーに設定する

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-instance-connect-set-up.html
Stripe Checkoutを使って出来ること

Stripeでは、以下 3種類の支払い方法が提供されています。

- Stripe Checkout
- Charges API
- Payment Intents API

ここでは`Stripe Checkout`で出来ることをまとめています。
Charges API と Payment Intents API については、[「Stripeの各種API（ChargesとPayment Intents）について」](https://qiita.com/luigiii/items/7acaa6a7f6db7b56cde2)にまとめています。

# Stripe Checkout の動作

Stripeのサーバに画面遷移して決済を完了し、その後自社ページにリダイレクトされます。
Webサービスが前提です。
自社サイトやiOS/Androidアプリに決済処理を組み込みたい場合は、`Charges API`または`Payment Intents API`を使いましょう。
 
# Stripe Checkout で、できること / できないこと

- [One-time payments with Checkout client-only integration](https://stripe.com/docs/payments/checkout/client) に書かれている通り、サーバ実装無しで実現する事も可能。
- [One-time payments with Checkout](https://stripe.com/docs/payments/checkout/one-time#create-checkout-session) や [Collecting payment details with Checkout](https://stripe.com/docs/payments/checkout/collecting) に書かれている通り、サーバ実装を伴う事も可能。
- キャンセルやノーショーフィー（no-show fees）を請求するためにカード情報を再利用することは可能だが、次回以降の購入のためにカード情報を保存することは不可能（[参照先](https://stripe.com/docs/payments/checkout/one-time#setup-future-usage)）。
- 「認証/与信（オーソリ）」と「売上（キャプチャ）」を分けることは可能（[参照先](https://stripe.com/docs/payments/checkout/one-time#auth-and-capture)）。
  - 認証/与信（オーソリ / Authorization）
     - カード決済が行えるかどうかの利用枠の確認と、購入しようとしている額が問題なく決済されるように、利用枠を押さえること。
  - 売上（キャプチャ / Capture）
     - 実際の請求（お金が銀行から売り手の口座に移動する）。
     
> [オンラインカード決済の流れ](https://stripe.com/docs/payments/cards/overview)

# 参照先

以降は、ほぼ以下のページの要約（翻訳）です。

[Stripe Checkout](https://stripe.com/docs/payments/checkout) （左記ページ及び、メニュー（画面左）内の一連のページ）
[Send customers to Stripe.com to make a payment](https://support.stripe.com/questions/send-customers-to-stripe-com-to-make-a-payment)

# 使える決済方法

- Credit cards
- debit cards
- Apple Pay
  - [条件を確認する](https://stripe.com/docs/payments/checkout/wallets#apple-pay-display)。
- Google Pay
  - [条件を確認する](https://stripe.com/docs/payments/checkout/wallets#google-pay-display)。 
- FPX
- iDEAL

# 支払い方法

- 1回の支払い
- 定期支払い（サブスクリプション）

# 認証方法

- Dynamic 3D Secure
- Strong Customer Authentication（準備中）

# 多言語化

- 日本語
- 英語
- 他、全27言語（※全言語一覧は[こちら](https://support.stripe.com/questions/supported-languages-for-stripe-checkout)）

# 領収証

自動でemailを送信。

# 実装前の動作（イメージ）確認

以下の`Preview Checkout`をクリックして、カード番号として`4242 4242 4242 4242`（テスト用番号）を入力。
https://stripe.com/docs/payments/checkout#try-now

# その他

## Stripe Elements

`Checkout`を使わず、独自にWeb版のUIを作成する場合は[Stripe Elements](https://stripe.com/docs/payments/accept-a-payment-charges#web)を使う。
Reactの場合は、[react-stripe-elements](https://github.com/stripe/react-stripe-elements)が使える。

## 各種サンプルコード

https://github.com/stripe-samples
bundle install 実行　エラー

# bundle install を実行後次のエラーが発生

※初心者向けです
アウトプットの練習の為、記述しています。

開発環境　
ruby  2.5.1
rails 5.2.4

gemに追記したいファイル

    gem 'carrierwave'
    gem 'mini_magick'


Gemファイルに追記後下記のエラーがターミナルで発生
----------------------------
    There was an error parsing `Gemfile`: unterminated string meets end of file - gem 'mini_magick
                ^. Bundler cannot continue.
    from /Users/yasumasaikeda/Desktop/projects/mini_listing/Gemfile:64
    gem 'carrierwave'
    gem 'mini_magick
-------

上記のエラーメッセージは記述によるミスでgemファイルの( ' )が最後抜けてました。
かなり初歩的なミスですがエラーの内容をしっかり見て、指定のファイルを辿れば解決できました。

正しいgemファイルの記述
-----
    gem 'mini_magick'
-----
以上、です
TextViewのdrawableにsizeを設定してみる

```kotlin
class TextViewWithDrawable @JvmOverloads constructor(
    context: Context, 
    attributeSet: AttributeSet? = null, 
    defStyleInt: Int = 0
) : AppCompatTextView(context, attributeSet, defStyleInt) {
    companion object {
        @JvmStatic
        @BindingAdapter(value = ["drawableStart", "drawableEnd", "drawableTop", "drawableBottom"], requireAll = false)
        fun TextViewWithDrawable.setDrawable(drawableStart: Drawable? = null, drawableEnd: Drawable? = null, drawableTop: Drawable? = null, drawableBottom: Drawable? = null) {
            val start = drawableStart?.setTextSizeBounds(this)
            val end = drawableEnd?.setTextSizeBounds(this)
            val top = drawableTop?.setTextSizeBounds(this)
            val bottom = drawableBottom?.setTextSizeBounds(this)
            setCompoundDrawables(start, top, end, bottom)
        }

        private fun Drawable.setTextSizeBounds(textView: TextView): Drawable = apply { setBounds(0, 0, textView.textSize.toInt(), textView.textSize.toInt()) }
    }
```

TextViewのCustomViewを作成して、BindingAdapterを作ってあげます。
textViewのtext sizeに応じてdrawableのsizeを調整するようにしています。

使う側では、databindingなので、

```xml
<TextViewWithDrawable
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="4dp"
                android:layout_marginEnd="16dp"
                android:drawablePadding="2dp"
                android:ellipsize="end"
                android:lines="1"
                android:text="あああ"
                android:textColor="#444444"
                android:textSize="11sp"
                app:drawableStart="@{@drawable/icon}"/>
```
と、指定します。（{}で囲うのを忘れない。）

ただし、CustomViewを作るとき、@JvmOverloadsを使うとThemeが反映されない場合があるみたいなので注意です。（今回は@JvmOverloadsを使用していますが）
https://medium.com/@mmlodawski/https-medium-com-mmlodawski-do-not-always-trust-jvmoverloads-5251f1ad2cfe
ffmpeg メモ　動画＜ー＞画像　変換




### 画像→動画

- framerateはデフォルトで25(fps)

```bash
ffmpeg -framerate 10 -i %d.jpg output.mp4
```




### 動画→画像

- fps=1/60　：60フレーム中あたり１枚を画像ファイルとして保存する。
    - fps=30 :fps30の動画の場合、各フレームを画像ファイルとして保存する。
- img%03d.png　：生成される画像のファイル名　（img001.png ~ img999.png）



```
ffmpeg -i 動画ファイル -vf fps=1/60 img%03d.png
```
MAMP Proが立ち上がっているのにアプリ画面が表示されない時の対処法


先日ローカルサーバーを立ち上げるために**MAMP Pro**を開こうとしたのですが、起動はしているのにアプリ画面が表示されない問題が起きました。

もう一度アプリを起動させるためにDockのMAMP Proを終了して、再度アプリを立ち上げようとしても同じような問題に直面して一向にアプリ画面が開きません。

原因はよく分からないのですが、単にアプリを「終了」するだけでは解決することができず**「アプリケーションを強制終了」**したらMAMP 
 Proをいつも通り立ち上げることができました。

そんなレベルの低い内容かよ！と言われて仕方ないレベルですが、僕と同じような初心者エンジニアや学習中の方向けに共有しておきます。

## アプリケーションを強制終了する方法
アプリケーションの強制終了はMacの場合、**command(⌘)+option+esc** でアプリケーションを指定して強制終了することができます。

これはMAMPに限らず他のアプリケーションでも使えるので起動が上手くいかないときや立ち上がらない時は使ってみてください。


MAMPのアプリ画面が開かない問題はよく起こるのか、他に対処法があるのかご存知の方はコメントよろしくお願いします！
環境毎にプロンプトの色を変える


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">開発環境「もしかして」<br>本番環境「わたしたち」</p>&mdash; linusnoopy i7 4870HQ (@linusnoopy) <a href="https://twitter.com/linusnoopy/status/1227807070788866048?ref_src=twsrc%5Etfw">February 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

**「「入れ替わってる〜〜！？！？」」**

とならないために、開発環境、ステージング環境、本番環境のシェルはひと目で判別できるようにしておきたいですね。

`bash` と `zsh` でプロンプト色を変更してみましょう。

# bash編

## RHEL系のデフォルトプロンプト

![2020-02-20 at 13.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587625/b1a756e4-0582-6233-502c-8530f480f983.png)

> [\u@\h \W]\$ 

白いですね。
bashでは `PS1` という環境変数を変更する事でプロンプトの変更が可能です。

## 文字色を変える

![2020-02-20 at 14.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587625/cb8a0f5e-5778-16a0-32d1-fe2f1e2e0cb6.png)

> \e[36m

で色付けを開始して

> \e[m

でリセットしています。

`36` が水色、 `33` が黄、 `35` が紫に対応しています。
開発環境は水色、ステージングは黄、本番環境は紫、などの設定ができますね。


## 文字を太字にする

![2020-02-20 at 14.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587625/e8b42843-e49b-f7e1-e6ae-a29c093f62b9.png)

> \e[1m

`1` だと文字を太字にする事ができます。


## 太字で色も変える

![2020-02-20 at 14.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587625/14b6dec0-aadd-78d0-c642-5208c2740690.png)

> \e[1;36m

`1` と `36` の両方を設定して太字フォントかつ文字色が変更になります。

## さらに色々変える

![2020-02-20 at 14.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587625/42d19fb5-ad5a-8578-7811-5083e7205a58.png)

`1` **太字で**
`2` 薄色で
`3` *イタリックで*
`4` 下線を引き
`9` ~~取り消し線を入れ~~
`36` 文字色を水色に
`45` 背景色を紫に
できたりします。


## 仕組み

ANSIエスケープシーケンスという特殊文字を使ってターミナルでの表示を制御しています。プロンプトに限らず、プログラムの出力にも使われます。
文字スタイルや、実際の表示色はクライアントのOSやターミナルによって微妙に異なってきます。

参考
ANSIエスケープシーケンス チートシート
https://qiita.com/PruneMazui/items/8a023347772620025ad6

文字スタイル指定の一覧
https://en.wikipedia.org/wiki/ANSI_escape_code#SGR_parameters

色指定の一覧と各ターミナルでの表示色例
https://en.wikipedia.org/wiki/ANSI_escape_code#Colors

# zsh編

![2020-02-20 at 15.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587625/0162133e-e2c8-dcb8-81ae-85abce9d96e1.png)

`zsh` では `PROMPT` 環境変数で設定します。
設定方法もbashとは異なり、zsh独自のタグのようなものを使います。
`%B` で**太字**
`%b` で太字解除
`%F{cyan}` で文字色を水色にし
`%f` で文字色リセット

参考
プロンプト拡張
http://zsh.sourceforge.net/Doc/Release/Prompt-Expansion.html#Prompt-Expansion
表示効果
http://zsh.sourceforge.net/Doc/Release/Prompt-Expansion.html#Visual-effects
文字装飾
http://zsh.sourceforge.net/Doc/Release/Zsh-Line-Editor.html#Character-Highlighting

# マシン全体に設定

`/etc/profile.d/` に

bashなら

```bash
export PS1="\e[1;36m\][\u@\h \W]\e[m\$ "
```

zshなら

```zsh
export PROMPT="%B%F{cyan}[%n@%m]%f%b%~%# "
```

のようなシェルスクリプトを入れておくと、全てのユーザのデフォルトプロンプトにできます。
【Node.js】FetchでフォームデータをPOSTする

# Node.jsアプリケーションなどでFechを用いてファイルなどのフォームデータをPOSTしてみる

FetchAPIのデフォルトのコンテンツタイプヘッダは `Content-Type': 'application/json` になっています

一方、HTML等のFormを用いてPOSTしたときのコンテンツタイプヘッダは `Content-Type': 'multipart/form-data` です

## コンテンツタイプヘッダを指定してPOSTするのでは駄目

コンテンツタイプヘッダを `Content-Type': 'multipart/form-data` と指定してfetchしてみてもデータは送信できません。

multipart形式ではバイナリデータを転送できるため、サーバー側がフィールドデータがどこで終わり、次のフィールドデータがどこから始まるかを知る為に、ブラウザ側でboundaryというものを設定します。

そのため、コンテンツタイプヘッダをオーバーライドするだけではboundaryの設定が正常に出来ません。

## 解決策
コンテンツタイプヘッダをオーバーライドするだけでは上記のような問題が発生してしまうので
明示的にコンテンツタイプヘッダを明示的に削除してあげる必要があります。

```index.js
const fileInput = document.querySelector('#your-file-input') ;
const formData = new FormData();

formData.append('file', fileInput.files[0]);

// 送信用データを設定
const options = {
  method: 'POST',
  body: formData,
  headers: {
    'Content-Type': 'multipart/form-data',
  },
};

// ここで明示的に消してあげる
delete options.headers['Content-Type'];

// 設定したデータをPOST
fetch('your-upload-url', options);
```

## 参考記事
この記事に助けられました。感謝してもしきれない。
[Uploading files using 'fetch' and 'FormData'](https://muffinman.io/uploading-files-using-fetch-multipart-form-data/#problem-i-had)
Vue.jsのコンポーネントについて

vue.jsを触っていると、インスタンスとコンポーネントとか概念が出てきてごっちゃになりそうだったので、ここでは**コンポーネント**についてまとめます。

## コンポーネントとは
- 同じような処理を行う部分を部品としてまとまった部品

- ある部品が、HTML上で、「どのように表示されるのか」をオブジェクトとしてまとめるには、**templateオプション**を使います。そのtemplateオプションでまとめたオブジェクトに名前（コンポーネントのタグ名）をつけたもの。


```index.html
<my-component></my-component> <!-- ←ここに部品が表示される -->
```

### ちなみに
コンポーネントの命名規則は、
**パスカルケース(アッパーキャメル)** or **ケバブケース**だそうです

- パスカル（アッパーキャメル)ケース・・・単語の最初を大文字で始める書き方　（HogeFuga　など）
- ケバブケース・・・単語間をハイフンで繋ぐ書き方　(hoge-fuga)


なので上の例では、ケバブケースで書かれてるってことになります



## 作ったコンポーネントの使い方
- グローバルに登録する方法
- ローカルに登録する方法

がありますが、ローカルに登録する方法を書いていきます。

## ローカルに登録してコンポーネントを使えるようにする



Vueインスタンスのcomponentオプションに、「コンポーネントのタグ名：コンポーネントのオブジェクト名」と指定して、このVueインスタンス内で使えるように登録する。

```vue.js
var コンポーネントのオブジェクト名 = {
   template:'HTML部分'
}
new Vue({
  el:'#app'
  components:{
  'コンポーネントのタグ名':コンポーネントのオブジェクト名
}
})
```

という感じで書きます



```html

<div id="app">
 <my-component></my-component>
 <my-component></my-component>
 <my-component></my-component>
</div>
```


```vue.js
 var MyComponent = {'<p class="my-comp">Hello</p>'
 }
new Vue({
  el:'#app',
  components:{
   'my-component':MyComponent
 }
})
```
Vueインスタンスの「components:」には、「コンポーネントのタグ名：コンポーネントのオブジェクト名」と指定し、「my-component 」というタグ名に「MyComponent」オブジェクトを設定する。
これで、HTML 上に`<my-component></my-component>`と書くだけで、作ったコンポーネントが表示されるようになります。
Vue.jsで表示させる方法三種類

表示させるには、3種類ある

1. DOMとマスタッシュタグで表示させる方法
2. templateプロパティを使って文字列のみでかく
3. render関数でかく

## 例
「こんにちはユーザー名さん」
をブラウザに表示させるために・・・

## 1.普通にテンプレートでかく
```index.html
<div id="app">
　<p>こんにちは</p>
  <p>{{name}}</p>
  <p>さん</p>
</div>
```

```main.js
new Vue({
  el:'#app'
  data:{
   name:'ユーザー名',
 }
})
```


## 2.templateでかく
以下のような感じで
(基本的には使わないけど)

```index.html
<div id="app1"></div>
```

```main.js
var data = {
  name:'ユーザー名'
}

var vm = new Vue ({
	el:'#app1',
	data:data,  
	template:'<p>こんにちは{{name}}さん</p>'
})
```

## 3.render関数でかく
```index.html
<div id="app"></div>
```

```main.js
new Vue ({
	data:{
		name:'ユーザー名'
	},
  render:function(createElement){
  //第一引数でタグをとる
  //第二引数で中に入れたいもの(JavaScriptのように)
		return createElement('h1','こんにちは'+this.name+'さん');
	},
}).$mount('#app')
```
↑`createElement`出なくても`h`とかでもなんでも良い
Psychtoolboxの画面を画像として保存したいときはScreen('GetImage')

Psychtoolbox（PTB）は、Matlabで心理物理学実験を行うためのツールボックスです。公式サイトは[こちら](http://psychtoolbox.org/)。ちなみに私は[Psychtoolboxをがんばる](https://sites.google.com/site/ptbganba/)の管理人ですが、解説記事を書くのにQiitaのほうが使い勝手がよいので、これからはこちらで情報を共有していこうかと考え中です。
どうぞよろしくお願いいたします。

---

研究成果を発表するときなど、Psychtoolboxで行っている実験画面を第三者に見せたいということありませんか？　私はあります！

要は画面をキャプチャーして、画像として保存してプレゼン資料に貼り付ければいいわけですが、実験中はフルスクリーンであることが多く、思うようにいかない。そんなかたはぜひ、次の方法をお試しください。

# Screen('GetImage')

実はPTBには、画面をキャプチャーするための命令がそなわっています。`Screen('GetImage')`を使えば、あっという間に画像を取得できます。詳細はコマンドウィンドウに`Screen('GetImage?')`と入力して表示されるヘルプをご覧ください。

[チュートリアルで公開されているコード](http://peterscarfe.com/totallyminimaldemo.html)をベースに説明します。

```matlab
% Clear the workspace and the screen
sca;
close all;
clearvars;

% Here we call some default settings for setting up Psychtoolbox
PsychDefaultSetup(2);

% Get the screen numbers. This gives us a number for each of the screens
% attached to our computer.
screens = Screen('Screens');

% To draw we select the maximum of these numbers. So in a situation where we
% have two screens attached to our monitor we will draw to the external
% screen.
screenNumber = max(screens);

% Define black and white (white will be 1 and black 0). This is because
% in general luminace values are defined between 0 and 1 with 255 steps in
% between. All values in Psychtoolbox are defined between 0 and 1
white = WhiteIndex(screenNumber);
black = BlackIndex(screenNumber);

% Do a simply calculation to calculate the luminance value for grey. This
% will be half the luminace values for white
grey = white / 2;
 
% Open an on screen window using PsychImaging and color it grey.
[windowPtr, windowRect] = PsychImaging('OpenWindow', screenNumber, grey, [10 10 800 800]);
 
% 青い四角形を描く
Screen('FillRect', windowPtr, [0 0 1], [350 350 450 450]);
Screen('Flip', windowPtr); % 画面を更新

imageArray=Screen('GetImage', windowPtr); % 画面全体の色情報を取得
imwrite(imageArray, 'output.jpg'); 

% Now we have drawn to the screen we wait for a keyboard button press (any
% key) to terminate the demo.
KbStrokeWait;

% Clear the screen.
sca;
```

このコードを実行すると、画面全体がoutput.jpgという名前の画像ファイルとして保存されます。保存される場所は現在のフォルダーです。

注意点として、imageArrayはuint8型になります。matlabで一般的に使用される型であるdoubleとは異なるために、そのまま算術演算を行おうとするとエラーになります。double関数で変換してください。

例えば imageArrayは0から255の値を取ります。これを正規化して0から1にしたいと思ったとき、

```matlab
imageArray/255
```

という計算はエラーになるので、

```matlab
double(imageArray)/255
```

とする必要があります。
Udemyで学んだVue.jsの仮想DOMの話




## VNode(仮想node)
- DOM要素ではない
- DOM要素を模したJavaScriptオブジェクト
- DOMに直接アクセスするのはスピードが遅い
- どうすれば効率よくあまりいじらずに済むか


### アルゴリズム的な話で

- 仮想DOMはDOMのドキュメントオブジェクトの形になってる
- 本物のDOMはJavaScriptでなくHTMK上にある
- そこにアクセスするのに時間がかかる
- JavaScript上ならすぐアクセスして変更できたりする
- 前回作った仮想DOMと、今新しく作った仮想DOMを見比べて、変わってる分だけ実際のDOMに適用する(mount)

<img width="387" alt="スクリーンショット 2020-02-20 15.18.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486722/550f1e1e-2ecd-d30e-8bfb-08763207d5af.png">
Pythonで動的な変数の値に0埋め

日付関連の取り回しで定期的に使うことになるので、メモ
[ドキュメントはこれ](https://docs.python.org/ja/3/library/stdtypes.html#str.zfill)
`str.zfill(width)`でOK
文字列strになるのだけお忘れなく。
#使用サンプル
`month`と`day`が2桁になっていない場合足りない桁は0で埋めて2桁になる様に出力

~~~python
year = 2020
month = 1
day = 1
while day <= 31:
  #monthとdayは必ず２桁になるように
  yyyymmdd = str(year) + "/" + str(month).zfill(2) + "/" + str(day).zfill(2)
  print(yyyymmdd)
  day += 1
~~~
#出力結果
~~~
2020/01/01
2020/01/02
2020/01/03
2020/01/04
2020/01/05
2020/01/06
2020/01/07
2020/01/08
2020/01/09
2020/01/10
2020/01/11
2020/01/12
2020/01/13
2020/01/14
2020/01/15
2020/01/16
2020/01/17
2020/01/18
2020/01/19
2020/01/20
2020/01/21
2020/01/22
2020/01/23
2020/01/24
2020/01/25
2020/01/26
2020/01/27
2020/01/28
2020/01/29
2020/01/30
2020/01/31
~~~
【Ruby on Rails】rails db:migrateができないとき...

**エラー**

migrationファイル生成後、rails db:migrateとすると以下のようなエラーが出た。

```
$ rails db:migrate
rails aborted!
StandardError: An error has occurred, this and all later migrations canceled:
```

**試したこと**

rails db:migrate:resetを実行すると...

```
 rails db:migrate:reset
Permission denied @ unlink_internal - C:/Users/自分/アプリ名/db/development.sqlite3
Couldn't drop database 'db/development.sqlite3'
rails aborted!
Errno::EACCES: Permission denied @ unlink_internal - C:/Users/自分/アプリ名/db/development.sqlite3
bin/rails:4:in `require'
bin/rails:4:in `<main>'
Tasks: TOP => db:drop:_unsafe
(See full trace by running task with --trace)
```

と
またエラーに...


rails db:migrate:resetの代わりに、

$ rm db/development.sqlite3
$ bin/rails db:setup
を実行。

```
$ bin/rails db:setup
Database 'db/test.sqlite3' already exists
Run `rails db:migrate` to update your database then try again.
Created database 'db/development.sqlite3'
```

再度rails db:migrateにトライすると、マイグレートされました。
Excel VBA で「マクロが実行できる状態」でないとファイルの中身を見れないようにする

#やりたいこと
フォームから入力をさせたい等、マクロを実行できる状態でのみ操作を許可したい。

#方法
「マクロを有効にしてください」と書いたシートを用意して、他のシートを非表示にする。
ファイルオープン時、ファイル保存時に表示するシートを切り替えるようにする。

#コード
```vb:ThisWorkbook
'Sheet1：「マクロを有効にしてください」と書いたシート
'Sheet2：何かいろいろするシート
Private Sub Workbook_Open()
    Sheet2.Visible = xlSheetVisible
    Sheet1.Visible = xlSheetVeryHidden
End Sub

Private Sub Workbook_BeforeSave(ByVal SaveAsUI As Boolean, Cancel As Boolean)
    Sheet1.Visible = xlSheetVisible
    Sheet2.Visible = xlSheetVeryHidden
End Sub

Private Sub Workbook_AfterSave(ByVal Success As Boolean)
    Sheet2.Visible = xlSheetVisible
    Sheet1.Visible = xlSheetVeryHidden
End Sub
```
Dockeでminioを立ち上げる

OSはubuntu 18.04 LTS。
dockerでminioをセットアップする。
dockerの設定を一括でできる便利なdocker-composeを使う。

# 準備
docker-compose.ymlが必要なので、準備する。

```bash
$ mdkir minio
$ cd minio
$ mkdir data
保存先のストレージを用意する。
dataディレクトリ(パスは/home/hoge/data)が生成された。
$ vi docker-compose.yml
version: '3.7'
services:
  minio1:
    image: "minio/minio"  # docker hubにあるminio/minioイメージをpullする
    volumes:
      - /home/hoge/minio/data:/data
    ports:
      - 9000:9000
    environment:
      MINIO_ACCESS_KEY: minio
      MINIO_SECRET_KEY: minio123
    command: server /data
```

これでとりあえず準備完了。

# doker hubにあるminioイメージをpull
docker-compose upでもpullされるが、ここではpullからしておく。公式でもそうしている。

```bash
$ docker-compose pull
docker hubにあるminio/minioがpullされる。
$ docker images
minio/minioが保存されていることを確認できるはず。
```

# minioコンテナの起動

```bash
$ docker-compose up
```

戻ってこないので、別のターミナルでコンテナを確認すると、実行できていることを確認できる。

```bash
$ docker ps
```
Rails 本番環境でデータベースをリセット

プログラミング初心者が備忘録のために書いています。

本番環境でrails db:migrate:reset RAILS_ENV=productionをしてもエラーになったので別の方法を調べてみたところ解決できたのでまとめました。

## データベースを削除する
データベースを消したいアプリに移動してから

```:ターミナル
[ec2-user@*******]$ RAILS_ENV=production DISABLE_DATABASE_ENVIRONMENT_CHECK=1 bundle exec rake db:drop
```

## 新たにデータベースを作成
上記と同じディレクトリで実行するとうまくいかなかったので、currentに移動してから実行

```:ターミナル
[ec2-user@******* current]$ rake db:create RAILS_ENV=production
[ec2-user@******* current]$ rake db:migrate RAILS_ENV=production
```

## seedも反映させたい場合
```:ターミナル
[ec2-user@******* current]$ rake db:seed RAILS_ENV=production
```

## 作られているか確認
```:ターミナル
[ec2-user@*******]$ mysql -u root -p;
## 実行後パスワードを入力

mysql > show databases;
## データベースの確認

mysql > use データベース名;
mysql > show tables;
mysql > select * from テーブル名;
## 中身の確認
```

## まとめ
開発環境でデータベースを書き換えたことでうまくdb:migrateができなかったのですが、上記の方法で一応解決できました。
自分が忘れないように記録しました。
新規プロジェクトをrailsで作成中、ズルしたら痛い目にあった

## ある日
「あー！デプロイまで終わった！」
「次はいよいよ、ポートフォリオ作ってみようかなー！」
「うわ、またあの環境構築からか。。。面倒だなー」
「前に作ったサンプルサプリで設定したdocker-composeとか使おうかな。」
。。。。
「おおー、docker-compose build 、up、rails newまで早いな！」
「よしこのまま一回localhost接続みてみるかー。。ぽちぽちっと」
「あれ？エラーか。なんでだろ？」
「前みたいな設定にしてるはずだけど、何が違うんだろ？？」
「あれ、publicの中身ないぞ！tmpも空っぽだ！これじゃnginxソケット通信できないぞ！どうしよーー」
「はぁ、諦めて一から環境構築するかああ。」

## 何が問題だったのか？
### １：無闇やたらにVOLUME使っていた。
### ２：初期ページのまま、production環境でlocalhost接続していた！

こんなこと普通ならないですよねー。笑
なぜこうなったかというと
* rails環境構築を省こうとした。
* 楽をしたかった。
この２点だけでした！

今回はrailsの復習にもなりましたので、ここに記事を残して２度と同じミスがないようにしようと思っています！
では、本編どうぞー。


# １：無闇やたらにVOLUME使っていた。



このように、以前に作成したことがあったプロジェクトからrailsのdockerfile
docker-compose.yml
nginxのdockerfile
をコピペして使用したのですが、
`VOLEME public`
`VOLUME tmp`
がrailsのdockerfileに記述したままでして、
結果`rails new`しても、publicとtmpの中身が生成されなかったです。
docker-composeは起動していましたが、`localhost`に接続してもnginxが参照するsocketsはないし、welcomepageはそもそもないし。で、、

そりゃエラーですよね！笑

# 解決方法
`VOLEME public`
`VOLUME tmp`
railsのdockerfileから記述を削除し、
`docker-compose build`をやり直した所、無事解決にいたり`localhost`接続できました。
[image:26B581B4-1DFB-4C9D-97FE-8BE8016A13BF-12763-00005F9EE8A93718/yay.png]


# 初期ページのまま、production環境でlocalhost接続していた！
これは、誠にお恥ずかしい話ですが
developmentモードでwelcomeページが表示されたので、productionモードでも起動確認がしたくなり、初期ページのままいじってました。
当然`docker-compose up`しても`localhost`にwelcomeページなんか出ないはずなのに（welcomepageがあるのはdevelopmentモードのみ！）
あれ？出ないなぁと思っていました！

# 解決策
### サンプルページを作成
`docker-compose run app bash rails g controller home index`

### 接続を確認
`localhost`で無事表示される。


## 疑問点
dockerfileの`VOLEME public`
`VOLUME tmp`記述が、なぜファイルの中身を生成しなかったのか、まだわかってないので調べます！
分かる方いましたら教えてください！
FacebookInstantGames側へのコールバックが失敗する

# 概要

* FacebookInstantGames側から用意したコンテンツ用コールバックページへアクセスさせたい
* しかしアクセスが成功しない

# 詳細

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57350/aa9c508a-74e2-2605-2393-21ada3aa3f64.png)


* 別のサービスの開発環境をコールバックURLに変更してみたら成功
* Facebook側からのアクセスログ

```
124.35.82.xxx - - [19/Feb/2020:18:49:19 +0900] "GET / HTTP/1.1" 200 4437 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36" "-"
124.35.82.xxx - - [19/Feb/2020:18:49:20 +0900] "GET /favicon.ico HTTP/1.1" 200 0 "https://qa.lqtmgc.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36" "-"
66.220.149.xx - - [19/Feb/2020:18:49:20 +0900] "GET /?hub.mode=subscribe&hub.challenge=1387981818&hub.verify_token=AAA HTTP/1.1" 200 4437 "-" "facebookplatform/1.0 (+http://developers.facebook.com)" "-"
```

* 無料証明書に差し替える

```
$ sudo yum install certbot
$ certbot certonly --webroot -w /var/source/document_root -d sub.domain.net
(Enter 'c' to
cancel): e-mail@address.jp
(A)gree/(C)ancel: A
(Y)es/(N)o: N
$ sudo ls -l /etc/letsencrypt/live/sub.domain.net
$ vi /etc/nginx/conf.d/app.conf

server  {
:
    listen 443 ssl;
    server_name sub.domain.net;
    ssl_certificate     /etc/letsencrypt/live/sub.domain.net/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/sub.domain.net/privkey.pem;
:
}
$ sudo systemctl restat nginx
```

* 上記変更をしてFacebook側からのアクセスを再度確認


# 結論

* SSL証明書の種類によって処理がうまくいかない
 * AWSのACM発行のワイルドカードSSL証明書かつLoadBalancaerによる証明書実装ではFacebook側からのアクセスは失敗する
 * 無料証明書であるLet'sEncryptかつサーバホスト単体によるSSL証明書実装はではFacebook側からのアクセスは成功する
 * AWSではないクラウドでJPRS発行のSSL証明書かつLoadBalancerによる証明書実装ではFacebook側からのアクセスは成功する

* FacebookInstantGames側のアクセスに対応するSSL証明書と実装に変更する必要がある
* Facebook側で具体的な条件が開示されていない
We're sorry, but something went wrong.

## We're sorry, but something went wrong.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480998/e5f9009b-ab76-693e-14d9-f2058c882934.png)

このエラーはサーバーのエラーが多いのでエラーコードを見にいきましょう。
まず、サーバーにログインしましょう。
<img width="293" alt="スクリーンショット 2020-02-20 11.34.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480998/ef187964-c6b8-80db-bb3e-64f222850a1e.png">

実行してるフォルダにいきましょう

```
 cd /var/www/レポジトリ名/
```

ls コマンドで中身をみてみましょう。

```
[ec2-user@ip-000-00-00-000 レポジトリ名]$ ls
Gemfile  Gemfile.lock  README.md  Rakefile  app  bin  config  config.ru  current  db  lib  log  package.json  public  releases  repo  revisions.log  shared  storage  test  tmp  vendor
```
この中にあるcurrentを参照します。

```
[ec2-user@ip-000-00-00-000 レポジトリ名]$ cd current
```


```
[ec2-user@ip-000-00-00-000 current]$
```
こうなればOK!
また中身をみていきましょう。

```
[ec2-user@ip-000-00-00-000 current]$ ls
Capfile  Gemfile  Gemfile.lock  README.md  REVISION  Rakefile  app  assets_manifest_backup  bin  config  config.ru  db  lib  log  package.json  public  spec  storage  test  tmp  vendor
```
次は　logをみていきましょう！

```
[ec2-user@ip-000-00-00-000 current]$ cd log
```
次はlogの中をみましょう

```
[ec2-user@ip-172-31-38-129 log]$ ls
production.log  show  unicorn.stderr.log  unicorn.stdout.log
```
この中にある、'production.log''unicorn.stderr.log'を'less'で参照しましょう

```
[ec2-user@ip-172-31-38-129 log]$ less production.log
[ec2-user@ip-172-31-38-129 log]$ less unicorn.stderr.log
```

で中を見てエラーコードをみましょう！

今回はDB内のエラーでviewが表示できなくて起こったエラーでした。
本番環境DBの中を削除する方法
https://qiita.com/QgqKZmHUkJv26pG/items/654c68e090db58c01964

以前はこのエラーでした。
https://qiita.com/QgqKZmHUkJv26pG/items/6f1bf5ec3e1a7c7f3b9d
あっさり読むrails⑤　（非同期処理　メニュー追加)

#はじめに
[以前の記事](https://qiita.com/Moon1126Snow/items/a4aaae5f290c3e223684)で非同期処理について書かせて頂きました。
今回は、その別バリエーションを書かせて頂きます。
#実行
前回は"フォームに入力した文字が別の場所に表示させる"コードについてお話しましたが、今回は***"ボタンを押すとプルダウンメニューが表示される"コード***について書かせて頂きます。

まずは、元となるビューファイルです。

```haml:index.html.haml
.btn　表示させる
= form_with model:@sample, local: true do |f|
  .pulldown
```

`btn`を押して`pulldown`の所にプルダウンメニューを表示させるわけですね。

CSSはとりあえず次の様に書いておけば、ボタンっぽくなるでしょう。

```css
.btn{
 background-color: #F999;
 padding: 5px;
}
```

次にJSのファイルです。とりあえず、「ボタンを押したら発火する」だけのコードを書きます。

```javascript
$(".btn").on("click", function(){

});
```
中にはなにも書いてませんので、追加するビューコードと追加するための処理を書いていきます。

```javascript
$(".btn").on("click", function(){
  let Form = `
  <form action = "/" accept-charset = "UTF-8" method = "POST" class = "menu">
      <select class = "pulldown__menu" name = "menu">
  `
  $(".pulldown").html(Form);
});
```

この時クラス名を間違えると、プルダウンメニューが追加されない、CSSが適用されないなどの不具合が起きますので、
慎重に記述してください。

これでプルダウンメニューが追加されるようになりますが、今は中身が空っぽなので何も選ぶ事はできません。
そのため、プルダウンメニューの中身を追加するコードを書いていきます。

```javascript
(前略)
  var list = [ "--", "東", "西", "南", "北"];
  let Form2 = `
    ${list.forEach(function(value){
      let wrapper = `<option value>${value}</option>`
    $(".pulldown__menu").append(wrapper);
  })
  }
  `
(後略)

```
***（注意）無駄な記述があるコードになっています。
修正でき次第、更新します。***

全体の流れとしては、

①ボタンをクリックしたらフォームを表示させる(html)
②メニューで表示させる値を配列で用意する(list)
③メニューの項目一つ一つを、eachメソッドで追加(append）していく

となります。

全体のJSコードは次の通りです。

```javascript
$(function(){
  $(".btn").on("click", function(){
    let Form = `
    <form action = "/" accept-charset = "UTF-8" method = "POST" class = "menu">
        <select class = "pulldown__menu" name = "menu">
    `
    $(".pulldown").html(Form);

    var list = [ "--", "東", "西", "南", "北"];
    let Form2 = `
      ${list.forEach(function(value){
        let wrapper = `<option value>${value}</option>`
      $(".pulldown__menu").append(wrapper);
    })
    }
    `
  });
});
```
Azure Data Studio で Jupyter Books 活用

# 概要

Jupyter Notebook はデータエンジニアまたはデータサイエンティストにとっては必須アプリです、その機能が Azure Data Studio に含まれているので、Azure Data Studioでのデータ作業が楽になります。更に PowerShell でのノートブック作成も楽です。
機能の履歴を確認している際、去年11月リリースアナウンスにて「Jupyter Book support」内容があったので、さっそく検証してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/0da545e9-a48c-5f68-4fd6-2539c23fe5af.png)
https://cloudblogs.microsoft.com/sqlserver/2019/11/05/the-november-2019-release-of-azure-data-studio-is-now-available/

# Azure Data Studio で Jupyter Books 活用

### Azure Data Studioインストール

下記のリンクを参照してインストールしてください。
[Download and install Azure Data Studio](https://docs.microsoft.com/en-us/sql/azure-data-studio/download-azure-data-studio)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/4fca003a-0393-eded-47e4-03ba29b46661.png)

### Jupyter Books 作成

Python開発環境が必要です。

```bash
$ python3 -V
Python 3.7.4
$ pip3 install jupyter-book
$ jupyter-book create my-ads-notebooks
$ jupyter-book build my-ads-notebooks
```

### Azure Data Studioから読み込み

`Open Jupyter Book`アイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/defc5b7f-85b1-3504-197f-8b9aa88c53cf.png)

作成した`my-ads-notebooks`フォルダを選択するとJupyter Book内容を確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/915511f2-884d-9caa-e739-68582e653868.png)

# Github Pageに公開

Jupyter BookはJelly形式で作られているのでGitHub Pageにそのまま公開できます。

### Githubのリポジトリ作成と静的サイト化

下記の手順を参照してください。
[GitHub Pagesを使って静的サイトを公開する方法](https://qiita.com/motoJinC25/items/01b391e3890483cfa78d)

### 完成した画面

https://motojinc25.github.io/devops-notebooks
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/f2a5abe0-efae-d790-b91c-04c4462d673f.png)

# まとめ

ほしかった機能です。これから使わせて頂きます。
Thank you Yu(@AlanYuSQL)
LT用: オフライン評価について

![スライド1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420547/17e55074-34ec-11f1-e329-c395b7e17bd4.png)
![スライド2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420547/03d281c4-ba73-804c-f944-005cacf54d45.png)
![スライド3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420547/b84970e6-7032-a7ce-f5bf-86762e7e8bf4.png)
![スライド4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420547/0a1cc5ee-4df7-41f7-c170-0929ecfa7f77.png)
![スライド5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420547/10e36039-70a4-6fe6-2fe5-56a4634c6836.png)
![スライド6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420547/45b74209-0080-7db6-a937-f339e3626c37.png)
![スライド7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420547/122ea3f5-b25b-6bad-8bc1-40bbfa1f9661.png)
![スライド8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420547/669d9cd1-d3e1-3a80-91b3-b053fd66b125.png)
![スライド9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420547/d2e83c1a-6645-807e-8132-785a3ae2d6fb.png)
![スライド10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420547/8f018ede-41ea-2bd6-ef70-e1b025638c67.png)
![スライド11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420547/60c57569-87cc-dea5-53c7-f548f6f92bce.png)
![スライド12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420547/5c8405b6-3148-1944-c41a-b0b9d9eb80d0.png)
2020/02 Python 3.7 + TensorFlow 2.1 + Keras 2.3.1 + YOLOv3 最新バージョンで物体検出

機械学習はphp-mlちょこっと触ったことがあるくらいの超絶初心者なのですが、画像認識をやるはめになりました

最初の目標は、与えられた雑多な写真から、まずは物体検出することです

なんもわからん

なんか適当にぐぐったところ、ライブラリのバージョンの組み合わせで動く動かないの話が大量にあって非常にわからない

なので、思考停止してとりあえず何も考えずに最新版を入れてみた

だいたいどの記事も半年以上古い、1年とか2年とかそれ以上古いやつもたくさんある、流行ってる界隈だし適当に最新でも動くようになってるやろ（という雑な考え）いちいち古いバージョン拾って寄せ集めてると、それだけで心が折れて終わってしまう

なにもわからないまま色々試行錯誤してますが、最終的な形としては、おおむね以下の記事の通りに行っています　最初はssd_kerasを試そうとしたんですが完全に意味不明な事態になって仕切り直した

[【5分でOK】KerasでYOLOv3を動かして物体検出に挑戦！【keras-yolov3】](https://tech-diary.net/keras-yolov3/)

#anaconda

2020/2現在、最新版はpython3.7です
ちなみに、勉強がてらなので手元のWindowsで雑にやっているわけですが、適当にぐぐるとさっそく「python3.6だとTensorFlowが動かない」「3.7だと動かないので3.6を入れる」などよくわからない記事がわんさか出てくる、とりあえずインストーラのドロップダウンには3.7しかない、わからない、3.7イレル

#テスト環境つくる

これは問題なし

#諸々入れる

↑の記事を参考にざくざく入れる

#データ変換

```
python convert.py yolov3.cfg yolov3.weights model_data/yolo.h5
```

なんかエラーがでた
[TensorBoardでエラー](https://qiita.com/h7kayama/items/d1cea00a5eb6dd85dfb5)

```
pip uninstall h5py
pip install h5py
```

まだエラー出る

```
pip uninstall keras
pip install keras
```

これでいけた

![tftest01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38400/28408480-57dd-fdc8-ace6-13911877abe7.png)

やったね

ということで、バージョンとかよくわかんないけどとりあえず最新のやつを入れて物体検出ができました。

ちなみに pip list は以下です

```
Package              Version
-------------------- -------------------
absl-py              0.9.0
asn1crypto           1.3.0
astor                0.8.1
blinker              1.4
cachetools           4.0.0
certifi              2019.11.28
cffi                 1.14.0
chardet              3.0.4
Click                7.0
cryptography         2.8
cycler               0.10.0
gast                 0.2.2
google-auth          1.11.2
google-auth-oauthlib 0.4.1
google-pasta         0.1.8
grpcio               1.27.2
h5py                 2.10.0
idna                 2.9
Keras                2.3.1
Keras-Applications   1.0.8
Keras-Preprocessing  1.1.0
kiwisolver           1.1.0
Markdown             3.2.1
matplotlib           3.1.3
mkl-fft              1.0.15
mkl-random           1.1.0
mkl-service          2.3.0
numpy                1.18.1
oauthlib             3.1.0
olefile              0.46
opt-einsum           3.1.0
Pillow               7.0.0
pip                  20.0.2
protobuf             3.11.4
pyasn1               0.4.8
pyasn1-modules       0.2.8
pycparser            2.19
PyJWT                1.7.1
pyOpenSSL            19.1.0
pyparsing            2.4.6
pyreadline           2.1
PySocks              1.7.1
python-dateutil      2.8.1
PyYAML               5.3
requests             2.23.0
requests-oauthlib    1.3.0
rsa                  4.0
scipy                1.4.1
setuptools           45.2.0.post20200210
six                  1.14.0
tensorboard          2.1.0
tensorflow           2.1.0
tensorflow-estimator 2.1.0
termcolor            1.1.0
tornado              6.0.3
urllib3              1.25.8
Werkzeug             1.0.0
wheel                0.34.2
win-inet-pton        1.1.0
wincertstore         0.2
wrapt                1.12.0
```
Cognitive Complexity メモ

Cognitive Complexity というコードの理解しやすさを測る指標がある。

提唱されているドキュメント
https://www.sonarsource.com/docs/CognitiveComplexity.pdf

日本語での解説
https://qiita.com/suzuki_sh/items/824c36b8d53dd2f1efcb

似た指標としては、Cyclomatic Complexity（循環的複雑度）があるが、こちらは実行経路の数を算出しているので、コードの理解しやすさと必ずしも一致するわけではない。

上記、qiita 記事にある switch 文の解説が分かりやすい。

## Code Climate CLI によるチェック

手軽に手元のコードの Cognitive Complexity をチェックしたければ、Code Climate CLI の Docker イメージを使うと楽。

https://github.com/codeclimate/codeclimate

計測したいコードのディレクトリに移動して、下記コマンドを実行すれば良い。

```sh
$ docker run --rm --env CODECLIMATE_CODE=`pwd` --env CODECLIMATE_DEBUG=1 -v `pwd`:/code -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/cc:/tmp/cc codeclimate/codeclimate analyze

== Foo.php (1 issue) ==
56-88: Function `doSomething1` has a Cognitive Complexity of 8 (exceeds 5 allowed). Consider refactoring. [structure]

== Bar.php (1 issue) ==
60-90: Function `doSomething2` has a Cognitive Complexity of 6 (exceeds 5 allowed). Consider refactoring. [structure]

Analysis complete! Found 2 issues.
```

初回は、いくつかの Docker イメージを pull するので遅い。`CODECLIMATE_DEBUG=1` は付けなくても良いが、付けておいたほうが実行している様子が見えるので良い。

デフォルト設定では、Cognitive Complexity が 6 以上のものが検出されるので、上記実行結果では、2 つのメソッドがリファクタリング候補として検出されている。

Code Climate CLI は、Cognitive Complexity 以外にも様々な指標を計測してくれるので詳細は下記で。

https://docs.codeclimate.com/docs/configuring-your-analysis#section-configuration-file-structure-and-content

## 参考

Cognitive Complexity を計測するツールがいくつかある。

Go

* https://github.com/nakabonne/nestif
* https://github.com/uudashr/gocognit

PHP

* https://github.com/Rarst/phpcs-cognitive-complexity

C#

* https://github.com/matkoch/resharper-cognitivecomplexity
  * Rider / ReSharper 用プラグイン。リアルタイムで計測結果が表示されて良さそう。（他の言語でも欲しい）
macOS Catalina(10.15.3)にSublime Textを入れてターミナルから起動できるようにする

#概要
MacBook Pro (13-inch, 2017)
macOS Catalina(10.15.3)
にSublime Textを入れた。

#手順

インストール自体はSublime TextのページからダウンロードしてきてApplicationフォルダに入れるだけ。
https://www.sublimetext.com

Terminalから起動するためには
1. シンボリックリンクを作る(Applicationフォルダの中にある実行ファイルへのリンクを作る。今回は/usr/local/bin/という場所に作る例)
2. パスを通す(ファイルを探す際に/usr/local/bin/という場所を候補に入れなさいという指定をしてあげる)
の二つをやれば良い。

#1.シンボリックリンクを作る

簡単。例えば/usr/local/bin以下にリンクを作るのであれば

```
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl
```

もし詰まった場合は、/Applications/Sublime Text.app/Contents/SharedSupport/bin/sublの名前が違う場合がある。あるいは/usr/local/binというのがない可能性もある。

#2. パスを通す
Catalinaはzshがデフォルトのログインシェルなので、~/.zshrcの中に書き加えれば良い。
(zshの設定ファイルがどのようになっているか知らなかった。
https://qiita.com/muran001/items/7b104d33f5ea3f75353f
を参考にさせていただきました。)


emacsがデフォルトで入っていないので、monoとかTextEditとかなんでも良いので.zshrcを編集すれば良い。

```
open ~/.zshrc
```
で開いて

```
export PATH=/usr/local/bin/:$PATH
```
を一行足した。

これでTerminalからsubl peyopeyo.txtなどと打つとSublime Textが立ち上がる。
Docker for Windowsでdockerの時刻がずれてbuildにコケる問題に対応する

大したことではないのですが、全然情報が出てこなくて大変だったので。
ある日、dockerをbuildしようとすると内部時刻が合わなくてapt-getが失敗してコケるという事態に見舞われました。
※私はdocker内の時刻が3日前になるという具合でした

わかってみると解決策は簡単でした。

***
**Docker Desktopをrestartする!**
***

どうやらWindowsをスリープしていると時刻がずれてくるというバグがあるらしい。
なんだこのバグ…。
新型コロナウイルス感染者数都道府県別マップを作成しました-リアルタイム更新中


新型コロナウイルス感染者数都道府県別マップ

https://softbase.jp/coronavirus

![Screenshot_2020-02-26 新型コロナウイルス感染者数都道府県別マップ(2020年02月26日 12時31分20秒更新) INFOOO.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125746/ad8439b1-b6e0-4dff-0a10-7960ea8097e9.png)
[読書] オブジェクト指向設計実践ガイド　～Rubyでわかる 進化しつづける柔軟なアプリケーションの育て方

なんとなくオブジェクト指向を導入し、妙に DRY にこだわった結果、相互依存が増えて見通しの悪い巨大なオブジェクトの中に手続き的なコード分岐が大量に存在するコードに直面することは、比較的 Rails で開発しているとあることかもしれない。オブジェクト指向は教条主義的になりがちだが、現実正解にある巨大なゴチャゴチャコードからどうやって分離するかという観点では実践的なガイドとなる。実質的にはリファクタリングをオブジェクト指向を用いてどうすすめるかという観点で良い助けになるだろう。__とくにオブジェクト間の処理の流れをシーケンス図にして整理するセクションについては、とてもわかりやすい。積極的にシーケンス図を活用すべきである。__
しかし、いくつかネックとなるポイントも存在する。1/5 のボリュームはオブジェクトをどうテストするかという観点でやや薄まった内容で記載さてれているし、翻訳も少し不自然さはあるかもしれない。また、適応されているデザインパターンもごく一部で網羅しているわけではなく、思ったよりボリュームが足りないというのが率直な感想。最後に、本書は自転車のメカニズムの構造に興味がない人は合わないかもしれないという点も補足しておく。

★★★★☆ 4/5

https://amzn.to/32bQUpE

<a href="https://www.amazon.co.jp/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E8%A8%AD%E8%A8%88%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%EF%BD%9ERuby%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8B-%E9%80%B2%E5%8C%96%E3%81%97%E3%81%A4%E3%81%A5%E3%81%91%E3%82%8B%E6%9F%94%E8%BB%9F%E3%81%AA%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%82%B2%E3%81%A6%E6%96%B9-Sandi-Metz-ebook/dp/B01L8SEVYI/ref=as_li_ss_il?_encoding=UTF8&qid=1582173775&sr=8-1&linkCode=li2&tag=mabotsblog-22&linkId=4b9e8023e9e40fed6fdf302abf3eb1d9&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B01L8SEVYI&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=mabotsblog-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=mabotsblog-22&language=ja_JP&l=li2&o=9&a=B01L8SEVYI" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
Emacs magit-logで絵文字を表示したり、magitからのcommitメッセージで絵文字を書いたりしたい

# 背景

GitHubやgitlabで開発を進める上で、絵文字を使ってcommit messageを書きたいを思うのが人情。さらにEmacs使いであればすべてEmacs上でできるようにしたいのも人情。
そこで、magitのlogやcommitで絵文字を使えるようにする方法を書く。
magit以外のmodeでも使えます。

# 本題

完成品はこちらです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267287/c713bed4-ed28-0315-7e4e-0c0391800d95.png)

## 必要パッケージ

絵文字の表示と`Helm`による入力したい絵文字検索を可能とする、[emacs-emoji-cheat-sheet-plus](https://github.com/syl20bnr/emacs-emoji-cheat-sheet-plus)を使用する。
私はパッケージ管理に[straight.el](https://github.com/raxod502/straight.el)と[use-package](https://github.com/jwiegley/use-package)を使っている。

## emacs-lisp

設定用emacs-lispは以下の通りに書く。

```emacs-lisp
(use-package emoji-cheat-sheet-plus
    :defer t
    :init
    (progn
      ;; enabled emoji in buffer
      (add-hook 'org-mode-hook 'emoji-cheat-sheet-plus-display-mode)
      (add-hook 'markdown-mode-hook 'emoji-cheat-sheet-plus-display-mode)
      (add-hook 'magit-log-mode-hook 'emoji-cheat-sheet-plus-display-mode)
      ;; insert emoji with helm
      (global-set-key (kbd "C-c C-e") 'emoji-cheat-sheet-plus-insert)))
```

これで、`magit-log`の他、`org`、`markdown`でも絵文字の表示が有効になる。
また、`C-c C-e`で`Helm`から入力したい絵文字を検索できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267287/c88f5aad-ad6d-c291-0388-79a480ee61cb.png)
Qiskit 任意個のqubitがある回路をappendしたいとき

## 結論
Qiskitで作成した回路を別の回路に組み込みたいとき， `qc.append( sub_qc, [q[m], q[m+1], ..., q[n]] )`と書くことで追加できる．
`[q[m], ... ,q[n]]`は`q[m:n+1]`と書いても実行される．
`slice`なので`n+1`になる.

## 例
IBM Q Epxrerience上で実行した．

### まず`import`

```python
%matplotlib inline
# Importing standard Qiskit libraries and configuring account
from qiskit import QuantumCircuit, execute, Aer, IBMQ
from qiskit.compiler import transpile, assemble
from qiskit.tools.jupyter import *
from qiskit.visualization import *
# Loading your IBM Q account(s)
provider = IBMQ.load_account()

from qiskit import *
```


### `sub_qc`を定義，　あとで`append`される.

```python

q = QuantumRegister(3)
c = ClassicalRegister(3)
qc = QuantumCircuit(q, c)
qc.draw()
```
<img width="275" alt="ScreenShot 2020-02-20 13.40.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164411/45e72353-0fca-92ba-a88e-9aa2a87d50f5.png">
`sub_qc`が完成

### `parent_qc`を定義

```python
q = QuantumRegister(4)
c = ClassicalRegister(1)
parent_qc = QuantumCircuit(q, c)
parent_qc.append( sub_qc, [q[1], q[2], q[3]] )
parent_qc.draw()

```
<img width="275" alt="ScreenShot 2020-02-20 13.44.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164411/5619fc2f-5bec-6d59-2b86-45a7daa0c127.png">

### `slice`の書き方version

```python
q = QuantumRegister(4)
c = ClassicalRegister(1)
parent_qc = QuantumCircuit(q, c)
parent_qc.append( sub_qc, q[1:4] )
parent_qc.draw()
```
同じ結果が得られる．
<img width="275" alt="ScreenShot 2020-02-20 13.44.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164411/5619fc2f-5bec-6d59-2b86-45a7daa0c127.png">