OmniAICreator/Qiita-1.07M huggingface dataset:
君は知ってるかい？テンプレートリテラルの罠を知らず死ぬ事を

#テンプレートリテラルの罠にハマった話

結論: テンプレートリテラルを使った文字列(ヒアドキュメント)はインデントも含まれるから気を付けろ

##どんな風にハマったのか
先日、Webトークンを生成するためにこんなコードを書きました。

```.js
    const keyID = 'keykeykey';
    const teamID = 'teamteamteam';
    const secret = `-----BEGIN PRIVATE KEY-----
    abcabcabcabcabcabcabcabcabcabcabcabcabcabc
    abcabcabcabcabcabcabcabcabcabcabcabcabcabc
    abcabcabcabcabcabcabcabcabcabcabcabcabcabc
    -----END PRIVATE KEY-----`;

    const jwtToken = jwt.sign({}, secret, {
        algorithm: "ES256",
        expiresIn: "180d",
        issuer: teamID,
        header: {
            alg: "ES256",
            kid: keyID
        }
    });
```

すると、こんなエラーが。

```
PEM routines:PEM_read_bio:bad end line
```

なんで！あってるじゃん！テンプレートリテラル `` 使ってるから、改行しても大丈夫じゃないの？？

##テンプレートリテラルを使った文字列(ヒアドキュメント)ではインデントしちゃいけない

よくなかったのは以下の部分です。

```.js
    const secret = `-----BEGIN PRIVATE KEY-----
    abcabcabcabcabcabcabcabcabcabcabcabcabcabc
    abcabcabcabcabcabcabcabcabcabcabcabcabcabc
    abcabcabcabcabcabcabcabcabcabcabcabcabcabc
    -----END PRIVATE KEY-----`;
```

この状態では左側のインデントも文字列として認識されてしまいます。
正しくは、以下のような感じです。

```.js
const secret = `-----BEGIN PRIVATE KEY-----
abcabcabcabcabcabcabcabcabcabcabcabcabcabc
abcabcabcabcabcabcabcabcabcabcabcabcabcabc
abcabcabcabcabcabcabcabcabcabcabcabcabcabc
-----END PRIVATE KEY-----`;
```
このように完全に左側に寄せてあげると、エラーが出ません。

何か間違いがあったら教えてください。
TwitterのAPI審査に落ちた

TwitterのAPI審査において、先人の成功例は数多くありますが、失敗例をあえて記録します。

### 起きたこと

アプリケーションの検証にAPIを使いたかったので、新しくアカウントを作りすぐにAPI審査を申し込みました。

[2019年！Twitter APIの申請とデベロッパー登録の方法](https://4ndan.com/blog/twitter_developer/)

こういったページを参考にGoogle翻訳の英語で申請をしたところ。
3日ほどで以下の画面になりました。

<img width="840" alt="スクリーンショット 2020-01-15 10.57.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150799/65b382fa-7265-310e-690a-8f9fba57bb62.png">

> デベロッパープラットフォームへの申請ありがとうございます。今回の審査の結果、あなたのアプリケーションは認めることができませんでした。

>- アプリケーションがTwitterの開発者ポリシーに反していた場合、否決されることがあります。
>- 現在は、この決議に対して**異議を申し立てることはできません**。再審査は現在検討中です。
>- Twitterの公式やデベロッパープラットフォームからも意義の申し立てはできません。

### 半永久的にAPI取得が凍結されてしまった。

Twitter社から救済がない限りは、*異議申し立て*も*再申請*もできない状況になりました。
もう申請フォームにもアクセスできません。
新しいAppも申請できません。

### 最初の申請から慎重に

他の方もおっしゃってますが、アプリケーションの説明が不十分だとすぐにリジェクトされますし、見通しがないと判断されれば私と同じように凍結されます。
メールで「あと1回で凍結ですよ。」と警告してくれる例もあるみたいですが、私はそれすらありませんでした。

> Failure to provide the necessary information will result in the rejection of your application.
> 次に必要な情報が足りなければ、あなたのアプリ申請はリジェクトになるでしょう。

引用元：[TwitterAPI登録申請から承認までの流れ。取得審査が厳しい【例文あり】](https://www.engineer-step.com/entry/twitter-api-fail)

### 結論

結構、入力フォームが長いので、必要な情報をこれでもかと盛り込むのが良いと思います。

### 追記(2021/4/7)
日本語で申請しても大丈夫なことを知り、申請してみました。
メールでのやりとりは必要でしたが、すんなり申請することができました！

 参考記事
[TwitterAPI登録を記入時間30分で超簡単にパスする裏技(日本語訳付き)](https://qiita.com/newt0/items/66cb76b1c8016e9d0339)
mipsのアセンブラ

Broadcomのmips SOCで動かしているmrubyはメモリ8M固定でStack Pointer(SP)を8Mの位置に設定して動作していました。これは8Mしかメモリがない機種があったためにそうしました。16Mのメモリをつんでいる機種では8Mが使えない状態でした。

![cfesp1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/4ff851d9-eba7-ba1a-f9d4-5affbef46301.png)

しかしせっかくなので、メモリ量を考慮してSPを設定できるようにしたいと考えました。

![cfesp2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/aa0facaf-0414-683b-0c84-a3517d50b8d0.png)

物理メモリ量はブートローダーのCFEのAPIを使うと取得できます。しかしCFEのAPIはcなので、SPを最初に設定しているスタートアップのアセンブラコードでは利用できません。

スタートアップのアセンブラコードでは一旦8MでSPを設定して、呼び出されたcコードで、APIを利用してメモリ量を取得して、8Mより大きい場合はSPを移動するようにしてみました。この処理はcでは書けないのでアセンブラで書きました。

mipsのアセンブラはいろいろな大学で課題になっていてgoogleで検索するといろいろ出てきますが、最初にあった岡山大学の以下のページを参考にしました。

http://www.swlab.cs.okayama-u.ac.jp/~nom/lect/p3/what-is-register.html

http://www.swlab.cs.okayama-u.ac.jp/~nom/lect/p3/concise-mips-instruction-set.html

cコードに入っているのでStackはすで使用さているので、使用されているStackをコピーしてSPを移動する処理をします。

![cfesp3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/1c237a89-1a81-1256-492e-b1f090c922aa.png)


```
relocsp:
        move    $8, $sp
        li      $9, 0x80800000
        move    $10, $sp
        add     $10, $10, $4
2:      lw      $11, 0($8)
        sw      $11, 0($10)
        add     $8, 4
        add     $10, 4
        blt     $8,$9,2b
        add     $sp, $sp, $4
        move    $2, $sp
        j       $ra
```

cコードからは以下のように呼び出します。返り値で変更されたSPが渡されます。

```
        cfe_getfwinfo(&fwinfo);
        tomem = fwinfo.fwi_totalmem;
　　　　　sp = relocsp(tomem - 0x800000);
```

アセンブラはもう少し簡潔に書けそうな気もするのですが、私はこれしか書けません。

アセンブラ -> c -> mrubyのように処理が流れてmrubyのコードが終了すると c -> アセンブラになり、現在のアセンブラコードは無限ループに入ります。この処理が正常に動いているのでStackは正常と考えられます。
PostgreSQLのJSONデータ型のサンプルメモ

# 前提
- PostgreSQL 9.6
- 下記サンプルはJSONB型で確認

# メモ

普通のJSON形式では大きな構造として配列 or オブジェクトである(※1)が、PostgreSQLのJSONデータ型では `シンプルなスカラ/プリミティブ値` もJSONデータ型のカラムの値として使用可能とのこと。

公式ドキュメントを一部抜粋：
> 以下は、すべて有効なjson型(または jsonb型)の式です。
> シンプルなスカラ/プリミティブ値
> 0個以上の要素の配列（要素は同じ型である必要はありません)。
> キーと値のペアを含むオブジェクト
> 配列とオブジェクトは任意に入れ子にすることができます。
> https://www.postgresql.jp/document/9.6/html/datatype-json.html

## シンプルなスカラ/プリミティブ値

```postgresql
# select '5'::json;
 json 
------
 5
(1 row)
```

```
# select '"hoge"'::json;
  json  
--------
 "hoge"
(1 row)
```

```
# select null::json;
  json  
--------
 (null)
(1 row)
```

## 0個以上の要素の配列

```
# select '[]'::json;
 json 
------
 []
(1 row)
```

```
 # select '[1,2,3]'::json;
  json   
---------
 [1,2,3]
(1 row)
```
 
```
 # select '[1,"hoge"]'::json;
    json    
------------
 [1,"hoge"]
(1 row)
```

```
 # select '[1,"hoge",{"name1": "value1"}]'::json;
              json              
--------------------------------
 [1,"hoge",{"name1": "value1"}]
(1 row)
```

## キーと値のペアを含むオブジェクト

```
# select '{"name1": "value1"}'::json;
        json         
---------------------
 {"name1": "value1"}
(1 row)
```

```
# select '{"name1": 1}'::json;
     json     
--------------
 {"name1": 1}
(1 row)
```

```
# select '{"name1": [1,2]}'::json;
       json       
------------------
 {"name1": [1,2]}
(1 row)
```

# 参考

(※1)JSONの形式の仕様ざっくりまとめとサンプル集 - Qiita https://qiita.com/kure/items/df04ca760290fd51b904
演算【JavaScriptから始めるプログラミング】

#演算
JavaScriptでは、演算を行うことができます。
また、演算を行う時に使用する「+」や「-」などの記号のことを**演算子**と言います。
## 四則演算
まずは、基本的な演算である四則演算です。
### 加算
「+」の演算子を使用する。

```javascript:addition.js
console.log(100 + 200); //300
```

### 減算
「-」の演算子を使用する。

```javascript:subtraction.js
console.log(200 - 80); //120
```

### 乗算
「*」の演算子を使用する。

```javascript:multiplication.js
console.log(100 * 3); //300
```

### 除算
「/」の演算子を使用する。

```javascript:division.js
console.log(400 / 5); //80
```


## その他の演算
四則演算以外にも余りを求める演算子や、べき乗を求める演算子などがあります。

### 除算を行った時の剰余
「%」の演算子を使用する。

```javascript:surplus.js
console.log(402 % 5); //2
```

### べき乗
「**」の演算子を使用する。

```javascript:exponentiation.js
console.log(2 ** 3); //8
```
それPLSQLで出来るよ（その２ 簡単にエラーログを記録する。）

PLSQLでエラーが発生したけどメッセージがざっくりし過ぎてイマイチどこが原因かわからない時ってありませんか？

一応、PLSQLでもツールを利用すればトレースは可能ですが、面倒だったり、対象のPROCEDUREの呼び出し方がちょっと特殊だったり、使えないことが多々あります。

机上デバッグもいいですが、サクッとエラーログを記録するPROCEDUREを追加したほうが楽な場合もありますので、その紹介。

（と、言ってもDBMS_UTILITYの紹介みたいなものですが……）

## 準備

まずはエラー登録先のテーブルを作成します。

```DEBUG_TBL.sql
CREATE TABLE DEBUG_TBL
(
    ROW_NO                         NUMBER(10,0) NOT NULL,
    INSERT_DATE                    DATE NOT NULL,
    SQLCODE                        VARCHAR2(4000),
    SQLERRM                        VARCHAR2(4000),
    FORMAT_ERROR_BACKTRACE         VARCHAR2(4000),
    FORMAT_CALL_STACK              VARCHAR2(4000)
)
```

次に、エラー記録用のPROCEDUREを作成。

```DEBUG.sql
CREATE OR REPLACE PROCEDURE DEBUG
IS
  rec DEBUG_TBL%ROWTYPE;
BEGIN
  Select NVL(MAX(ROW_NO),0) + 1 Into rec.ROW_NO From DEBUG_TBL;
  rec.INSERT_DATE := SYSDATE;
  rec.SQLCODE  := SQLCODE;
  rec.SQLERRM  := SQLERRM;
  -- Oracle Database 10g Release 2 以降で利用可能
  rec.FORMAT_ERROR_BACKTRACE := DBMS_UTILITY.FORMAT_ERROR_BACKTRACE;
  rec.FORMAT_CALL_STACK      := DBMS_UTILITY.FORMAT_CALL_STACK;
  
  insert into DEBUG_TBL values rec;
  COMMIT;
END DEBUG;
/
```

以上です。

## 使い方

エラーログを記録したいPROCEDUREのExceptionに以下を記述します。

```
  EXCEPTION
    WHEN OTHERS THEN
      DEBUG;
```

## 確認

簡単な確認用のパッケージを用意します。

```
CREATE OR REPLACE PACKAGE BODY TEST
IS
  vNum  NUMBER(2);
  
  PROCEDURE testDebug02
  IS
  BEGIN
    vNum := 0/0;
  EXCEPTION
    WHEN OTHERS THEN　-- 行10
      NULL;
  END testDebug02;
  
  PROCEDURE testDebug01
  IS
  BEGIN
    vNum := 0/0;  -- 行17
  END testDebug01;
  
  PROCEDURE testDebug
  IS
  BEGIN
    testDebug02;  -- 行23
    testDebug01;  -- 行24
  EXCEPTION
    WHEN OTHERS THEN
      DEBUG;
  END testDebug;
END TEST;
/
```

実行後のDEBUG_TBLです。

```
select * from DEBUG_TBL

=======================

ROW_NO	
1

INSERT_DATE	
2020/01/15 11:01:56

SQLCODE	
-1476

SQLERRM	
ORA-01476: 除数がゼロです

FORMAT_ERROR_BACKTRACE	
ORA-06512: "HOGE.TEST", 行17
ORA-06512: "HOGE.TEST", 行24

FORMAT_CALL_STACK
----- PL/SQL Call Stack -----
  object      line  object
  handle    number  name
00007FFB7BED1090        10  procedure HOGE.DEBUG
00007FFBB53951F8        28  package body HOGE.TEST
00007FFBAB7B07A8         2  anonymous block
```

エラー行がきちんと記録されていますね。

## 注意点
当たり前ですが、呼び出し先のPROCEDUREでExceptionが握り潰されているとうまく拾えません。（行10）

以下のようにエラーが適切な範囲で拾われていることが前提となります。

```
  EXCEPTION
    WHEN ZERO_DIVIDE THEN　-- 0除算の場合は処理しない。
      NULL;
    WHEN OTHERS THEN　-- 上記以外はRAISEする。
      RAISE;
```

ダメゼッタイ　なんでもかんでも WHEN OTHER THEN
goofys を fstab でマウントすると ReadOnly になってしまう問題の対処

# はじめに

設定準備をしていると、掲題の通り goofys を fstab でマウントするときに ReadOnly になってしまう問題に遭遇したので、その解決策のメモ。


## 問題

記事の執筆時点で Open Issue として挙がっている。

https://github.com/kahing/goofys/issues/483

おそらく一時的な問題であり、近い将来に解決される可能性は高い。
なお、README にある通りの `go get` と `go install` でインストールした場合に問題が発生した。

ビルド環境は Amazon Linux 2 + amazon-linux-extras でインストールした golang 1.11 の latest となる。


## 対処方法

Open Issue内に書かれているが、ビルドせずに、提供されている Linux 用バイナリをダウンロードして使えば解決できる。

```bash:Linux用バイナリをダウンロード
curl -o goofys -L https://github.com/kahing/goofys/releases/download/v0.23.1/goofys
```

これのパーミッションを設定して、適切な場所に配置すればOK。
【JSF】<h:commandLink>タグで、Ajaxイベントのみ起こして遷移させない

# やりたいこと
`h:commandLink`タグに対してマウスオーバー時のAjaxイベントを定義したい！
（ツールチップのパーツとして使いたい。）

パーツをクリックしても遷移やリロードが起こらないようにしたい！


# 実装

以下のように実装することで実現できました

```HTML
<h:commandLink onclick="return false;">ツールチップ
    <f:ajax event="mouseover" listener="#{hogeBean.hoge}" render="fuga"/>
</h:commandLink>
```

最初は
`<a href="javascript:void(0)">遷移させない</a>`
を真似て、`h:commandLink`のhrefに当たる属性、outcomeを使って
`<h:commandLink outcome="javascript:void(0)">遷移させない</h:commandLink>`
のように書いたのですが、うまく動きませんでした。

# mouseoverではなく、clickEventを扱いたい場合

hrefを指定しなければOK
レンダリング時に「href=#」と生成される。

```HTML
<h:commandLink>クリック
    <f:ajax event="click" listener="#{hogeBean.hoge}" render="fuga"/>
</h:commandLink>
```

同じような問題にあたった方の助けになれば幸いです。
顧客指向の土台。 仮説（189）

顧客指向の土台は、顧客との入出力です。
# 面談
### 呼称
面談の際、顧客を「様」をつけて話かけるのを基本とする。

技術Reviewのように、お互いに対等の立場で参加する会議ではお客様のご要望により「さん」でお呼びすることがあるかもしれない。
### 敬語
敬語を基本とする。
技術Reviewで、顧客側が丁寧語を基本とする要請がある場合には丁寧語とすることがあるかもしれない。
### 略称
御社、貴社など、顧客を略称で呼ぶ文脈はあらかじめ例示してあるとよい。

自社、弊社など、略称を使う文脈はあらかじめ霊視してあるとよい。
### 下から目線
忖度した事項の確認方法。

忖度した内容は、直接的には確認できないことがある。

忖度した内容を個人に留めず、関係者が理解できるように議事録に記載する方法を列記する。

1) 検討事項の可能性としての記録。

2) 次回以降の検討事項の一つに記録。

3) 納期後に取り組む可能性のある事項として記録。
## テレビ会議
skype, teams, webEX, zoom, hangout meet, 
## チャット会議
プログラマ:顔を見合わせて会議、テレビ会議、コメント・チャット。 仮説（194）

https://qiita.com/kaizen_nagoya/items/2f9d2969e8b30e12f0c1
### skype
### messenger
### slack
# データ共有
### 自社の github/gitlab/bitbacket
クラウド運用の場合を含む。
### 顧客の github/gitlab/bitbacket
クラウド運用の場合を含む。
### github/gitlab/bitbacket の private
小規模な試作の場合（予算計上前など）
### プライベート docker hub
実験予定。
#### docker 参考資料
プライベートDocker Registryの構築方法
https://qiita.com/user_h/items/302b71838aae7085b4e4

レジストリ・サーバのデプロイ
http://docs.docker.jp/registry/deploying.html#running-a-domain-registry , 
　　
オレだよオレオレ認証局で証明書つくる
https://qiita.com/ll_kuma_ll/items/13c962a6a74874af39c6 , 

dockerプライベートリポジトリの作り方
https://qiita.com/ButtonPJ/items/116a7471793e54fb0397

https://sato-labo.mydns.jp/2018/07/install-docker-registry/

https://tracpath.com/works/devops/docker_hub_and_amazon_ec2_container_registry/

自分用の Docker Registry を作る
https://qiita.com/rerofumi/items/b710037ede6f68c0cb18

$shibayu36->blog; / 社内用Docker Registryを立てる
http://blog.shibayu36.org/entry/2013/12/24/194134

SOTA / 認証付きのDocker Private registryを立てる
http://deeeet.com/writing/2014/10/02/docker-private-registry-auth/

Docker Registryをさくっと立てる
https://qiita.com/RyotaIshii/items/915f0cb09155a6cae170

ローカル環境にDocker Registryをさくっと立てる方法
詳しくはこちら→https://github.com/dotcloud/docker-registry

Registry v2 と Let's Encryptを使ってDocker Private Repositoryを構築
https://qiita.com/linerlock/items/119b7b2c17f83173a4f7

Let's Encrypt から 証明書をひっぱってくる　参考記事: 
http://qiita.com/sawanoboly/items/9fdde1707de5e975dd15

公式
https://docs.docker.com/registry/

https://docs.docker.com/registry/deploying/

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

#### Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
【Mockito】ランダム生成の文字列を使ったdo whileループを検証する

# 問題
Mockitoを使って単体テストを作成中
以下のようなコードのテストに悩んでいた…

* ユーザーIDを生成
* 既存ユーザとIDが重複していたら生成し直す
    * 生成したIDでSELECTしてEntityが取得できた場合は重複しているとする。

```java
private String generateUserID() {
    String userId;
    do {
        // ランダム8桁の文字列を作成
        userId = RandomUtil.getRandomString(8);
        // 作成したuserIDが既に使用されてなければループを抜ける
    } while (userRepository.findByUserId(userId) != null);
    return userId;
}
```

Repository部をスタブ化してSELECTの戻り値を設定することでテストする。

```java

// Entityが取得できるパターン
when(userRepository.findByUserId(anyString())).thenReturn(new FUserList());

// Entityが取得できないパターン
when(userRepository.findByUserId(anyString())).thenReturn(null);
```

この2つをテストできたらOK。

ん？
でもこれって、Entityが取得できるパターンは無限ループになる…

# 解決
調べると、こんな書き方ができました

```java
// 一回目の関数呼び出しでは取得できて、二回目では取得できない。
        when(userRepository.findByUserId(anyString())).thenReturn(new FUserList()).thenReturn(null);
```
これなら、取得できるパターンとできないパターン両方いっぺんにできるし無限ループにならないですね。

#参考
[Mockito (Mockito 3.2.4 API)](https://javadoc.io/doc/org.mockito/mockito-core/latest/org/mockito/Mockito.html#when-T-)
[テックノート – Mockitoのメソッド呼び出し回数によって返却値を変更する方法](http://javatechnology.net/java/mock-thenreturn-number/)
【GAS】importrangeを使ったSpreadsheetにgetDataRange()した時、空白の行まで取得してしまう。

# 概要

[getDataRange() ](https://developers.google.com/apps-script/reference/spreadsheet/sheet#getDataRange%28%29) 

 * `sheet`オブジェクトの関数
 * 値が入っている全てのセルを持つ`Range`オブジェクトを取得できる


[IMPORTRANGE](https://support.google.com/docs/answer/3093340?hl=ja)

* 指定したスプレッドシートからセルの範囲を読み込む。
* 行番号を指定しないばあい、空白の行も含め一番下の行まで読み込む。

**`importrange`でクローンしたスプレッドに対して`getDataRange()`すると、空白の行まで値が入っているとみなし、取得してしまう。**

→ `query`関数で空白の行を表示しないことで解決できる。

# 事象確認


以下のデータをJSON形式に変換するGASで事象を確認してみよう。

```js:データを読み込んでいる
importrange("https://docs.google.com/spreadsheets/d/[シートID]/edit","[範囲]")
```
▼データを読み込んだあとのSpreadsheet
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260763/361c2e3a-4f6d-92f0-f654-35e38bab4910.png)

さっそく`importrange`でクローンしたスプレッドに対して`getDataRange()`してみる。

```js:JSONに変換するGAS
function getData(id, sheetName) {
  var sheet = SpreadsheetApp.openById('[スプレッドのID]').getSheetByName('[シート名]');
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  
  return rows.map(function(row) {
    var obj = {}
    row.map(
      function(item, index) {
        obj[keys[index]] = item;
    });
    // ログ表示
    Logger.log(obj);
  });
}
```

▼ログ。空白行が取得されてしまい、無駄なデータが大量に生成されている。
![ログの出力結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260763/092d5ec6-275d-eb14-a532-9290998d33ec.png)


# 解決法
`importrange`で取得したデータから空白の行を取り除く。

以下のように`query`関数でキー値がNULLでないものを指定してあげる。

```js:query関数を適用
query(importrange("https://docs.google.com/spreadsheets/d/[シートID]/edit","[範囲]"),"where Col1 IS NOT NULL")
```

▼ログ。空白行を除いてJSON形式になっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260763/9066d3f9-d919-5d1c-e730-fa38c3ff087f.png)
IoTセンサを用いた不具合検知システムの提案

#はじめに
　はじめてQiitaに投稿します。つたない文章で申し訳ないのですが読んでくれたら幸いです。知識不足が大きいので読んでいておかしい部分があると思いますが、その時は申し訳ありません。

#提案
　IoTセンサを用いた不具合検知システムの提案です。この提案の背景として、せっかく設置したIoT機器とか機械が動作不良で動かなかったり、動いたとしても途中で止まったりするという問題に関心を持ったからです。具体的な提案内容としてraspberry pi zeroと温度センサを用いて物理的に異常検知とその原因特定を行うというものです。pythonを用いて不具合検知をプログラムで作ろうという趣旨です。どのように不具合や異常を判断するかというと、閾値を設けます。あらかじめ設定した閾値を超えるものは異常だと判断するプログラムを作ります。
　この場合は温度センサを用いるので異常な温度値をあらかじめ閾値として決めておく必要がある。今回の提案の評価ではプログラムがきちんと作動するかの動作チェックの面が強いので閾値は適当に決めるものとする。また、温度センサに限らず他のセンサでも活用できると考えています。

#使用する物
- raspberry pi zero
- 温度センサ(adt7410)

　今回の実装で使うこれらの道具は私が参考にしているサイトの影響が強いです。この道具じゃないとダメというわけではないです。私が参考にしているサイトを下記に載せます。
>http://make.bcde.jp/

#実装
今回実装したプログラムを下記に示す。

```aaaaa.py
i2c = smbus.SMBus(1)
address = 0x48
now = datetime.datetime.now()
while True:
    block = i2c.read_i2c_block_data(address, 0x00, 12)
    temp = (block[0] << 8 | block[1]) >> 3
    if(temp >= 4096):
        temp -= 8192
    aiueo = (temp / 16.0)
    if(10<aiueo):
        print("Temperature:%6.2f" % aiueo),
        print(now),
        print("danger too hot")

    elif(17>aiueo):
        print("Temperature:%6.2f" % aiueo),
        print(now),
        print("danger too cold")

    else:
        print("Temperature:%6.2f" % aiueo),
        print(now)

    time.sleep(3)
```


#評価
 今回実装したプログラムはちゃんと動いたので成功したと言えます。閾値を超えたならちゃんと警告がでるようにできています。その出力結果を下記の図に示す。
![hot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557262/ad375e8a-c92f-f33d-53fc-9effa4e7580d.png)

![cold.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557262/6a0495a0-0447-2ced-beff-1643cc9c7e19.png)

今回の出力に当たって閾値を意図的に変更して無理やりにこの警告文を出しているので異常検知の性能として期待できないといえます。
　今後の課題としてどうやって閾値を決めるのかが問題です。なぜなら、閾値が決まらなければ異常検知を判断できないのでこのアルゴリズムや考え方次第でこの異常検知のプログラムの性能が決まると言っても良いからです。
GitHubのプルリク時とかで、特定のcommit間の差分を出す (ブランチ同士も可

プルリクなんかで差分見せる時に、どこを見せたらわかりやすいかなと悩むことがある。
その場合、複数commitをまたいで、特定のcommit 2点間でdiffを取れたので報告。

# compare

URLで指定するのが早そう。

`https://github.com/<USER>/<REPOSITORY>/compare/<COMMIT HASH>...<BRANCH>`

上記のように、repository名のあとに、compareとして、比較したい2つのコミット、ブランチを `...` でつなぐ。
ここの指定については、 `git diff` の指定と同様にできそう。

```shell:diffの指定例
$ git diff 114514b fa52110
```

上記の `git diff` の例のように、コミット間でもブランチ間でも、ok
2020-01-15 WRF > NCEP SST Analysisデータ終了後のSSTデータの選択 > OI SSTデータの使用

```txt:動作環境
Xeon E5-2620 v4 (8コア) x 2 
32GB RAM 
CentOS Linux release 7.7.1908 (Core)
```

### 関連

- [2020-01-10 WRF > NCEP SST Analysis > EOL: サポート終了](https://qiita.com/7of9/items/e657a564a0245fae496d)

### SSTの選択肢

使用してきたNCEP SST Analysisの提供が終了した。
今後の計算に使えるSSTがないか調査をしている。

SST（やその他の陸域・海洋データ）が下記に良くまとまっている。

- [陸域・海洋データ情報 by 早崎将光様](http://www.hysk.sakura.ne.jp/data_list/land_ocean)

情報感謝です。

### OI SSTの使い方

上記掲載のうち、OI SSTデータ(daily, 0.25 degree, global, ...)についての使用例が下記に掲載されている。

- [OISSTにSSTデータを差し替える @ A First Course in WRF](https://sites.google.com/site/afcwrf/home/preproc/oisst)
    - 三重大学・未来海洋予測学研究室
- [Pacific-LLC-2010_01 @ A First Course in WRF](https://sites.google.com/site/afcwrf/home/example/pacific-llc-2010)
    - oisst_wps.f90などの実装が掲載

情報感謝です。


### 関連

- [WRF > SST > 0.083degree刻み > 9km刻み](https://qiita.com/7of9/items/bbf16b9136e3d9babd1c)

提供が終わったデータは9km程度の空間分解能だった。

- [NOAA OI SST V2 High Resolution Dataset](https://www.esrl.noaa.gov/psd/data/gridded/data.noaa.oisst.v2.highres.html)

- [Data Access - OISST](https://www.ncdc.noaa.gov/oisst/data-access)
    - 取得方法に関する情報
    -
ブラウザ上で動く縦書きテキストエディタの作成

#ブラウザ上で動く縦書きテキストエディタ
縦書きができるテキストエディタがある程度完成作成したので公開する。
現在のソフトウェアはほとんどが英語圏の人々によって作成されたため、縦書きができるテキストエディタはほとんど存在しないし、今後も開発される見込みもない。そこで縦書きができるテキストエディタを作成した。

注意: ResizeObserverを使用しているので、対応しているブラウザ（Chrome等）で開いてほしい。
https://ishikawamasashi.github.io/monaka-editor/

##問題点
IME予測変換ウィンドウを縦書きにすることができない。ブラウザからではIMEを操作することができないので、ブラウザの方で何らかの対応をしてくれる以外に対処法はないと思われる。
VueコンポーネントをjQueryで動的にマウントする


## VueコンポーネントをjQueryで動的にマウント

Kintoneのプラグイン開発でVueコンポーネントを動的にマウントしなければいけない場面があり、情報がなかなか集まらず苦戦したのでメモする。

### 0. webpackを使用している場合はaliasを追加

最後この情報を得ることができず解決まで時間がかかったので、この設定が一番重要かもしれない。

```js:webpack.config.js
module.exports = {
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        }
    }
}
```

### 1. Vue.extendを使う

まず純粋に`Vue.component`でコンポーネントを作るのではなく、`Vue.extend`を使い**Vueのサブクラスを作成する**。（参照：[API - Vue-extend](https://jp.vuejs.org/v2/api/#Vue-extend))

```js
const Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
```

### 2. jQueryでDOMを作成

次に作成したサブクラスのマウント先になるDOMをjQueryで作成し、任意の場所に追加する。

```js
const app = $("<div id='app'></div>");
$("body").append(app);
```

### 3. Vueサブクラスをマウントする

```js
const component = new Profile();
component.$mount("#app"); // 2で作成したDOMを指定
```
OSX【PostgreSQL】エラー対処法：could not connect to server: No such file or directory  Is the server running locally and accepting  connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?

railsでPostgresqlを使おうと思った時、以下のようなエラーが出た。

```
psql: could not connect to server: No such file or directory
 Is the server running locally and accepting
 connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?
```

以下ターミナルで実行

```
# postgresqlアンインストール
$ brew uninstall postgresql

$ brew doctor

$ brew cleanup

$ rm -r /usr/local/var/postgres

$ brew install postgresql

$ brew services start postgresql

```
Declaration of <クラス名>::<メソッド名> should be compatible with <クラス名>::<メソッド名>

# 状況
phpunitのsetUp()メソッドを設定した時に、タイトルのエラーが発生

# エラー内容と対象方法
setUp()メソッドは親クラスのメソッドをオーバーライドしているのですが、
オーバーライド元とオーバーライド先でメソッドの引数または戻り値が異なる場合にエラーが発生します。

この場合、親クラスの戻り値が以下の通りvoidとなっているため、
オーバーライド先でも同様の指定が必要となります。

```php:TestCase.php
/**
* Setup the test environment.
*
* @return void
*/
protected function setUp(): void
{
    if (! $this->app) {
        $this->refreshApplication();
    }

    $this->setUpTraits();

    foreach ($this->afterApplicationCreatedCallbacks as $callback) {
        $callback();
    }

    Facade::clearResolvedInstances();

    Model::setEventDispatcher($this->app['events']);

    $this->setUpHasRun = true;
}
```
SourceTreeSetup-3.3.6を導入、Cloneエラー解決


指定リポジトリをクローン時に **Failed connect to BitBucket.org:443** エラーが出た

調べたところ下記で解決（※Googleログインでアトラシアンにログイン後）

ツール -> オプション -> ネットワークで
**Git/Mercurialにプロキシサーバー設定を追加**にチェックを入れる。
↓
cloneできた。

![SourceTree設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17904/14d548b7-f806-4f17-585d-1cf7db5ba421.png)


参考URL： **http://vild.hatenablog.com/entry/2015/08/20/171535**
Class blade.compiler does not exist

# 状況
/App/Providers/AppServiceProviderのregister()メソッドにカスタムディレクディブの設定をしたら、
タイトルのエラーが発生しました。

# 対処方法
boot()メソッドに記述することでエラーが発生しなくなりました。
[Upgrade to 5.8 :: Class blade.compiler does not exist](https://laracasts.com/discuss/channels/laravel/upgrade-to-58-class-bladecompiler-does-not-exist)

> jcobb • 9 months ago
For me the problem was that I had a custom blade directive in the register() method of /App/Providers/AppServiceProvider and custom Blade directives need to be in the boot() method instead.

# 原因(推測です。要調査)
register()メソッドを通る時点では、サービスコンテナやプロバイダー、エイリアスの登録がされないため、
Bladeファサードが利用できず、エラーが発生したものと考えます。
IPFSのメモ

#準備

cloneする
https://github.com/dappuniversity/election

```
$ npm run dev
```

```
$ brew install ipfs

ノードを手に入れる
$ ipfs init

ipfsを立ち上げる
$ ipfs daemon

$ mkdir dist

ファイルのコピー
$ rsync -r src/ dist/
$ rsync -r build/contracts dist/

ピアーを集める
$ ipfs swarm peers

ファイルをアップロード
$ ipfs add -r dist/

最後のやつがハッシュになる
...
added QmYVRuvkeCYnwdBjUYKbqipCyC56HF383nL6ykqMvEKRgR dist

パブリッシュする
$ ipfs name publish QmYVRuvkeCYnwdBjUYKbqipCyC56HF383nL6ykqMvEKRgR
Published to QmYXhf5dSvLqrZKd1qgWV7qdvGpiACVBhXMpSf5jLDJek9: /ipfs/QmYVRuvkeCYnwdBjUYKbqipCyC56HF383nL6ykqMvEKRgR

```

```
$ ipfs init
generating 2048-bit RSA keypair...done
peer identity: QmYXhf5dSvLqrZKd1qgWV7qdvGpiACVBhXMpSf5jLDJek9
to get started, enter:

	ipfs cat /ipfs/QmS4ustL54uo8FzR9455qaxZwuMiUhyvMcX9Ba8nUH4uVv/readme
```
salesforceからLINEに画像を送りたい(Apex、MessagingAPI)

## 前提
- LINEチャネル開設済
- 送りたいユーザとのLINE連携が済んでいる(LINEのUserIDが分かる状態)
- VF側で任意の画像を選択し、Apexクラス側にデータを渡す処理が実装済  
※apex:inputFileタグなどを使用  
https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_compref_inputFile.htm

## やりたいこと
- salesforceのアプリから、LINEに画像を送りたい

## どうすれば送信できるか
- まず、誰でもアクセスできる画像URLの作成方法を調査。
- 見つけた方法が「ファイル」機能の「公開リンク」  
→このリンクは、誰でもアクセスし、画像をダウンロードすることができる。  
そのため、公開リンクをApexで作成し、表示されている画像のURLを使用すれば良い。
- **ContentVersionオブジェクトとContentDistributionオブジェクトを使用する**
  - ContentVersion  
  https://developer.salesforce.com/docs/atlas.ja-jp.api.meta/api/sforce_api_objects_contentversion.htm
  - ContentDistribution  
  https://developer.salesforce.com/docs/atlas.ja-jp.api.meta/api/sforce_api_objects_contentdistribution.htm

## 実装内容
- 画像URL作成処理

```actionscript
ContentVersion conte = new ContentVersion(
    VersionData = bodyData, // アップロードした画像データが入る
    PathOnClient  = 'SendImage ' + System.now().format('MM/dd'), // 任意のファイル名
    Title = 'SendImage ' + System.now().format('MM/dd') // 任意のファイル名
);
insert conte;
ContentDistribution cdl = new ContentDistribution(
    ContentVersionId = conte.id, // ContentVesrionのid
    Name = 'SendImageUrl ' + System.now().format('MM/dd') // 任意のファイル名
);
insert cdl;
// レコードを作成してからDistributionPublicUrlを取得する
ContentDistribution cdlUrl = [SELECT DistributionPublicUrl FROM ContentDistribution WHERE Id = :cdl.Id LIMIT 1];
// 取得したurlを元に、画像のURLを作成する
Organization oid = [SELECT Id FROM Organization LIMIT 1];
// DistributionPublicUrlの「/a/」より後ろの文字列が必要
String dUrl = cdlUrl.DistributionPublicUrl.substringAfterLast('/a/');
String imageUrl = 'https://[domain]--c.documentforce.com/sfc/dist/version/renditionDownload?
rendition=ORIGINAL_Jpg&versionId=' + conte.Id + '&d=/a/' + dUrl + '&oid=' + oid.Id;

```
- LINEへの送信処理

```actionscript
Http http = new Http();
HttpRequest request = new HttpRequest();
request.setEndpoint('https://api.line.me/v2/bot/message/push');// MessagingAPIで指定されている送信時URL
request.setMethod('POST');
request.setHeader('Content-Type', 'application/json;');
request.setHeader('Authorization', 'Bearer ' + token); // チャネルtokenを後ろにつける
String body = '{"to": "[送信先のUserId]", "messages": [{"type":"image", "originalContentUrl":"[画像URL]", "previewImageUrl":"[画像URL]"}]}';
request.setBody(body);
HttpResponse response = http.send(request);

```

## 注意点
- salesforceの仕様上、insert処理を、コールアウト処理の前に実行することはできない。  
そのため、insert処理とコールアウト処理を分割する必要がある。  
回避方法については以下を参照  
https://help.salesforce.com/articleView?id=000326129&type=1&sfdcIFrameOrigin=null&mode=1
無料枠でGAEとAESを使ってみる 

[Nuxt + Firebase + Elasticsearch 勉強用Qiita まとめ](https://qiita.com/YosukeAramaki/items/35f978e8e330c817514d)で
ローカル環境でFirebaseとElasticsearchをつなぐnodeとElasticsearchを構築できました。

これを本番環境に落とし込むためnodeをGAEに、ElasticsearchをAmazon Elasticsearch Serviceに移行してみました。

GCPとAWSに触るのは初めてだったのでかなり大変でした。

## GAE (Google App Engine)

Projectのセットアップはこちらのサイトを参考にしました
[Google App Engine Node.jsを試してみる。 GAE/Node.js](https://qiita.com/n0bisuke/items/fbea48562441a8314d45)
[App Engine スタンダード環境で Node.js を使用するためのクイックスタート](https://cloud.google.com/nodejs/getting-started/hello-world?hl=ja)

`app.yaml`はこちらのサイトを参考にしました。
[Google App Engineを無料で運用する方法（2018年版）](https://koni.hateblo.jp/entry/2016/01/06/130613)

## AES (Amazon Elasticsearch Service)

AESの立ち上げはこちらのサイトを参考にしました。
[AWS再入門 Amazon Elasticsearch Service編](https://dev.classmethod.jp/cloud/aws/cm-advent-calendar-2015-getting-started-again-amazon-es/)
JavaScriptで空白や改行のみの場合も空文字判定する方法

textareaやinputタグで空文字判定をしたい場面があるかと思います。
その場合、下記の方法などで空文字判別を行うことができます。

```html:HTML
<textarea id="text"></textarea>
<script>
  const text = document.getElementById('text')
</script>
```

```javascript:JavaScript
text.value === ''
!text.value
```
しかし、これだと空白（スペース）や改行があった場合に空文字では無くなってしまいます。

<b>その時は、matchメソッドを使うことで空白や改行があっても空文字判定が可能です。</b>

```javascript
!text.value.match(/\S/g))
```
\Sは空白文字（半角スペース、\t、\n、\r、\f）以外全てのことです。

```javascript
!text.value || !text.value.match(/\S/g)
```
!text.valueと組み合わせることで、何も入力されていない時や空白や改行のみの入力の場合など合わせて空文字判定をおこなうことができます。
radioボタンの<label>に画像をいれるとIEではinputがcheckedにならない

# 問題

```style.css

input[type="radio"] {
    display: none;
}
```

にして、`<label>`に画像を入れたいときってありますよね。
そこを選択させたら**for**の中身(該当のidを持つinput要素)がcheckedにされて...

っていうのがIE以外のお話です。

では、IEはどうでしょうか？


...

...

**動かない！！！！！！**

これは、`<label>`の中にある`<img>`のせい、
というかIE特有のバグなのですが

今回はその解決策を残したいと思います。


## 解決策1

https://qiita.com/sola-msr/items/bdec752da00c5ab677b3

こちらに書かれているとおり

CSSでimgに`pointer-eventes: none;`して上げればokです。

IE11未満は未対応になります。


## 解決策2

JS側(jQuery)で制御して解決するパターンです。

```script.js
// DOM読み込み後
$(function(){
    var ua = window.navigator.userAgent.toLowerCase();
    var isIE = (ua.indexOf('msie') >= 0 || ua.indexOf('trident') >= 0);

    $('label').click(function(){
        var id = $(this).attr('for');
        var $id = $('#' + id);

              // ~~ 中略 ~~~

        // IEの場合のみ、JSでlabelクリックのときradioボタンのinputをcheckedにさせる
        if (isIE && $id.attr('type') === 'radio') $id.prop('checked', true);
    });
});
```

とりあえず、自分はIE10,9にも念のための対応が必要だったので、このような記述で解決しました。
Autodesk MayaとiPhoneでリアルタイムフェイシャルモーションキャプチャする方法

Autodesk MayaとFaceIDを搭載したiPhoneでリアルタイムに表情をモーションキャプチャできるアプリ＆ソフトウェアを公開しました。
アニメーションをベイクして、プリレンダーに利用することも出来ます。
![MayaGif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492401/2412fc5f-cf9e-45cd-d833-be5c7456865f.gif)

以下のURLからダウンロードできます。
スマホアプリと、PCで使用するソフトと2つが必要です。
https://ifacialmocap.jimdofree.com/download/japanese/
スマホアプリは980円、PCで受け取る側の方のソフトは無料になっています。

最大で52個のブレンドシェイプターゲットを作って実行します。

恐らく現状のリアルタイムフェイシャルモーションキャプチャのツール類の中では、最も安価で、精度もかなり高くなっていると思います。
MayaでもVTuberを作れちゃう説あると思います。
このシーンは、シェーダーはSurfaceShaderとLambertしか使っていません。

使い方は簡単なのですが、ちょっと文章だと長くなるので以下のYouTube動画にて公開しています。
https://youtu.be/9D9zPDzSC6Q

ホームページで文章でも使い方を公開しています。
https://www.ifacialmocap.com/tutorial/maya/japanese/

version1.04で少しMayaでの使い方がアップデートされました。
https://youtu.be/k8KAmtEcmeY
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/9D9zPDzSC6Q/0.jpg)](http://www.youtube.com/watch?v=9D9zPDzSC6Q)
内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。

'hogehoge' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

・・・と言われた。
初歩中の初歩で躓いて非常に恥ずかしいが、共有しておきます。

- hogehogeをインストール済みの場合  
 
```
npm install
```
※package.jsonがあるディレクトリで実行してください。

- hogehogeを未インストールの場合

```
npm install hogehoge
```
google map 印刷時バグの対策・解決策

# 目次
・[GoogleMaps印刷時に出る帯or余白のバグが起こる条件とは](#googlemaps印刷時に出る帯or余白のバグが起こる条件とは)
・[バグ内容について](#バグ内容について)
・[GoogleMaps印刷時に出る帯or余白のバグを回避解消する方法](#googlemaps印刷時に出る帯or余白のバグを回避解消する方法)

## GoogleMaps印刷時に出る帯or余白のバグが起こる条件とは

まず、今回の印刷時に帯のような余白のようなものがでる再現パターンは下記になります。

- [GoogleMapsAPIを使用しての埋め込み](#googlemapsapiを使用しての埋め込み)
- [chromeやsafariブラウザで横印刷時](#chromeやsafariブラウザで横印刷時)
- [特定のGoogleMapsサイズ](#特定のgooglemapsサイズ)

### GoogleMapsAPIを使用しての埋め込み
今回の場合、google map の ifreme ではなく、 API を使用しての埋め込み時に起きました。
ifreme 使用時には起きなかったのですが、 google map API を使用すると起きるという現象でした。

### chromeやsafariブラウザで横印刷時
また、再現の状況としては、 chromeやsafari ブラウザで起きており、
IEやEdgeなどでは帯や余白はないものの、
ページをまたがったり、他要素に被ったりと
これはこれでバグが起きていました。

### 特定のGoogleMapsサイズ
サイズが特定の場合、再現することはないのですが、
それ以外のサイズではこのバグは発生し、
発生率もそれなりに高いものなのかなと思います。


## バグ内容について
[埋め込んだグーグルマップで印刷時、横を指定すると帯がでる](https://support.google.com/maps/forum/AAAAkeE796EQxN2jQyaSl4/?hl=ja&gpf=%23!msg%2Fmaps-ja%2FQxN2jQyaSl4%2FUx4__j8XBAAJ&msgid=Ux4__j8XBAAJ)
>
埋め込んだグーグルマップで印刷時、横を指定すると帯がでる
Google Maps JavaScript API で埋め込まれた地図を、横方向で印刷しようとすると、ある部分で横に白い帯が出て上下に地図が続かない。
ブラウザで普通に見るのは問題がないが、印刷プレビューで帯が発生し、印刷するとプレビューの通り帯がでる。縦印刷は問題なし。

確かにこれと同じ症状だったのですが、
残念ならがら上記のフォーラムでは私の実装する内容での解決策はありませんでした。

フォーラムでは縦印刷は問題なしとありましたが、
私の場合、縦印刷でも帯・余白のようなものが出ることはありました。

また、teratailでも質問がされていました。
[Google mapを印刷する時、地図が欠ける](https://teratail.com/questions/58676)
>
Google mapを印刷する時、地図が欠ける
地図を印刷して来られる方がいるのですが、地図を印刷する際に地図の一部分が欠ける(グレーになる)と指摘を受けました。
確認してみるとChromeで印刷する時にどうやら発生するようで下数%がグレーになっていました。


## GoogleMaps印刷時に出る帯or余白のバグを回避解消する方法
今回、実装する中でバグの調査をしつつ、回避、解消策を模索していました。

一つは、特定のサイズにして対応させることでバグが起きないようにということも考えましたが、
特定サイズの場合、印刷時にページがまたがってしまうなどの問題もあり、根本的な回避、解決にはならないため他の解決策を探りました。

そんな中海外フォーラムで見つけた内容が、私が直面した内容と同一のものでした。
その中で回避策として上がっていたのは、

```
#map_canvas div > img {
  position: absolute;
}
```
GoogleMapsAPIを使った地図描画はimg画像を256×256に分割した画像をタイル式に並べて描画しています。
そのimg画像にpositionをつけるというものでした。

この内容でも私が直面した問題は回避はできましたし、

```
.gm-style div > img {
  position: absolute;
}
```

という内容でも回避はできました。

[Missing tiles when printing Google Maps API v3](https://bugs.chromium.org/p/chromium/issues/detail?id=426294)

コメントではこのようなことも書かれていました。

>
The position: absolute; workaround is not a reliable solution.
I am displaying a map with a polygon drawn via KML data and the position: absolute; style causes the polygon to be seriously misaligned when you zoom out.
Any alternate workarounds?

google 翻訳
>
位置：絶対;回避策は信頼できるソリューションではありません。
KMLデータを介して描画されたポリゴンと位置のマップを表示しています：絶対;スタイルを使用すると、ズームアウトしたときにポリゴンが大きくずれます。
別の回避策はありますか？

という一文もあったので、これで完璧に問題ないとは言い切れないかもしれません。

しかし、現状上記の対応によりバグは解消しており、印刷時の不具合を解消することができました。

もし、GoogleMapsAPIで同じようなことに直面してる人がいたら参考にしてみてください。
【Python】エクセル基本操作（読み込み、値書き込み、保存、最大列数、最大行数）

# pythonでエクセルを扱う
Pythonでエクセルを扱う方法はいくつかあるが、ここでは**openpyxl**を使った方法を紹介する。

```python:sample.py
import openpyxl
```
#新規エクセルファイルの作り方
ここでは、新規エクセルファイルの作り方を紹介する。

```python:sample.py
import openpyxl

wb=openpyxl.Workbook()
ws=wb.active
ws.title="シート名"
wb.save("保存先のpath") #エクセルファイルの保存
```

#既存エクセルの読み込み
次に既存エクセルの読み込み方を紹介する。

● 読み込むために必要な物
・既存のエクセルファイル
・エクセルファイルまでのPATH　

```python:sample.py
import openpyxl

path=r"読み込みたいファイルまでのpath"
wb=openpyxl.load_workbook(path)
ws=wb.get_sheet_by_name("読み込みたいシート名")
```


#エクセルファイルの保存
新規エクセルファイルを作った場合や、既存のエクセルファイルにプログラム上で変更を加えた場合に、
それを実ファイル上に反映させるためにはプログラム上でエクセルファイルの保存を行わなければならない。
これには**ブック名.save("保存先のpath")**を使う。

```python:sample.py
import openpyxl

path="保存先path"
wb=openpyxl.Workbook()
wb.save(path) #エクセルファイルの保存
```

#セルの操作
セルの値は**.cell().value**で参照できる。
**cell()**にエクセル上で参照したいデータのx,y座標を記述。( 例: A1→(1,1) )

```python:sample.py
import openpyxl
#列と行には参照したいセルの列番号、行番号を入れる。
sheet.cell(column="列",row="行").value = 5 #値の代入
print(sheet.cell(column="列",row="行").value) #値の確認
```

#空白セルの扱い
空白セルを参照した時にはその値が**None**となる。
したがって、以下の判定で空白かどうかを判定することが出来る。

```python:sample.py
import openpyxl

if sheet.cell(column="列",row="行").value == "None":
   print("セルは空白です。")
else :
   print("セルは空白ではありません。")
```

#最大列数、最大行数
読み込んだシートの最大列数と最大行数は以下のようにして取得できる。

```python:sample.py
import openpyxl

wb=openpyxl.load_workbook("読み込みたいエクセルのPATH")
sheet=wb.worksheets[0] #読み込んだエクセルの最初のシートを対象とする。

#max_Rに最大行数、max_Cに最初のシートの最大列数を格納する
max_R=sheet.max_row
max_C=sheet.max_column
```
【Nuxt.js/Vue.js】 手軽に長い文字列を省略して末尾を三点リーダー（…）にする方法


```plugins/filter.js
Vue.filter('truncate', function(value, length, omission) {
  var length = length ? parseInt(length, 10) : 20;
  var ommision = omission ? omission.toString() : '...'

  if(value.length <= length) {
    return value;
  }
  else {
    return value.substring(0, length) + ommision;
  }
})
```

```nuxt.config.js
  plugins: [
    '~/plugins/filter' // 追記する
  ],
```


```text.vue
<div> {{ text | truncate(50) }} </div> // 引数に表示したい文字数を入れる
```
kotlinx.serializationでMapオブジェクトをシリアライズする

MapをJsonにシリアライズするには、[JsonObject](https://github.com/Kotlin/kotlinx.serialization/blob/4f39fc70f70021f16de705e3027d0c507c59a17a/runtime/commonMain/src/kotlinx/serialization/json/JsonElement.kt#L209)クラスを使うようです。

# サンプルコード

```Test.kt
val map = mutableMapOf<String, JsonElement>()
map["name"] = JsonLiteral("Taro")
map["age"] = JsonLiteral(30)
map["family"] = JsonObject(json { "father" to "Ichiro" })
val jsonObject = JsonObject(map)
print(jsonObject.toString()) //=> {"name":"Taro","age":30,"family":{"father":"Ichiro"}}
```

また、Any型をJsonPrimitive型に変換したい時は、以下のようなメソッドを作ると便利でした。

```Sample.kt
private fun toJsonPrimitive(value: Any?): JsonPrimitive {
    if (value == null) return JsonNull
    return when (value) {
        is Number -> JsonLiteral(value)
        is String -> JsonLiteral(value)
        is Boolean -> JsonLiteral(value)
        else -> throw IllegalArgumentException("$value is not supported")
    }
}
```
Wordpressと静的コンテンツを共存させる方法

WordPressのトップにあるindex.phpを確認。
初期設定通りであれば、
wp-blog-header.php
を参照するように設定されているはず。

```index.php
ドキュメントルート/wp/index.php
/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );
```

wordpressが読み込む順番は、
index.php→wp-blog-header.php

なので、index.phpと同じ階層に表示させたいコンテンツを配置することで、
1. 静的コンテンツを配置したディレクトリ
2. wp-blog-header.php
の順番に参照します。

ここで１つ問題なになるのが、
Wordpressと静的コンテンツのディレクトリが重複してしまう場合です。

例)
WordpressのURL
https://sample.com/test/
静的コンテンツとして表示させたいURL
https://sample.com/test/landing

この場合、ディレクトリ配下にindex.phpと同様に、
wp-blog-header.phpにリダイレクトさせることで解決できます。
※基本はindex.phpをコピーしてパスの設定を修正するだけで大丈夫です。

```
cp index.php test/index.php
相対パスの設定を修正
```

【注意事項】
直接参照させているだけなので、ファビコンは表示されません。
僕の場合は、結局WordPressのテーマに静的ファイルを入れ込む形で実装しました。
Ansibleで使いたいモジュールを効率的に探すコツ

# きっかけ
モジュールの探し方が自分の中でやっと安定してきたので整理します。
もっといい方法があれば教えてください。

# 前提
現在は色々なナレッジが公開されているので、ググる方がすぐにわかりやすい解説が出てくることも増えてきていますが、
ここでは初心に戻って[Ansible公式マニュアル](https://docs.ansible.com/ansible/latest/modules/modules_by_category.html)から探すことを前提とします。

# ポイント

３つあります。

- Module Indexのカテゴリで絞り込む
- モジュールの命名規則から検索
- サービス名、コマンド名などのキーワード検索

## Module Indexのカテゴリで絞り込む

All Modulesの他にも、下記カテゴリが用意されています(#の後ろは収録製品などの一例)。

- Cloud modules #AWS/GCP/Azure/Docker/OpenStack
- Clustering modules #Pacemaker/k8s
- Commands modules #任意コマンド実行
- Crypto modules #openssh/openssl
- Database modules #MySQL/PostgreSQL/Vertica
- Files modules #ファイルコピー/編集/圧縮/属性管理
- Identity modules #IPA
- Inventory modules #Ansibleのインベントリ管理
- Messaging modules #Rabbitmq
- Monitoring modules #Zabbix
- Net Tools modules #HAPloxy/NetWorkManager/SNMP/LDAP/
- Network modules #ACI/CheckPoint/IOS/VyOS/F5
- Notification modules #Mail/O365/ServiceNow/Slack
- Packaging modules #yum/pkg5/apt/pip
- Remote Management modules #IMC/OneView
- Source Control modules #git/subversion/bitbucket
- Storage modules #EMC/Grusterfs/3par/netapp
- System modules #Linuxシステム管理系
- Utilities modules #Playbookの効率化/拡張機能
- Web Infrastructure modules #AnsibleTower/Apache2/Jenkins/Django/Nginx
- Windows modules #Windows

自分がよく使う処理や製品がどこに属しているかはチェックしておくと検索効率が格段に向上します。
Inventory Modules、Utilities ModulesはAnsible自体に関連するモジュールなので、個人的に知っていないとまず見に来ないです。
全然検討もつかなかったり、お目当てのモジュールがなかった場合はAll Modulesに最後の望みを託し、地道に検索します。

## モジュールの命名規則から検索

ほとんどのモジュール名は下記のような命名規則になっています。
※Ansibleのルールなのか、慣習なのかは確認中です。もし情報あればコメントいただけると助かります。

> **[ 製品名\_ [ カテゴリ\_ ] ]キーワード**
ex: win_ping, MySQL_user, bigip_ssl_key, etc...

製品名がないものもありますが、ほとんどLinux用です。
キーワード部分は多くが共通の言葉を使っているので、xxをするための○○製品版モジュールだ！というのは推測しやすいです。

## サービス、コマンド名などのキーワード検索

地味ですが強力。ブラウザの検索機能をフル活用してガツガツ引っかけましょう。
モジュールリストの見方だけ確認しておきます。

> モジュール名 - モジュールの簡易説明
Ex: yum – Manages packages with the yum package manager

タイムゾーンを管理したいならtimezone、サービス管理したいならserviceコマンド、という感じで英単語を検索していけばOK。

# おわりに

モジュールさえ特定できれば、利用例はマニュアルにExampleセクションがあるのですごく楽です。
それでも見つからなかったら諦めてcommandモジュール使いましょう！いつか有力なナレッジが投稿されると信じて...
ホワイトハッキング（案）

ホワイトハッキング（案）

# 事前告知個別実験

事前にインタネットの実験を行うことを個別に通告します。

事前の通告文は、実験の個人的及び社会的目的、遅延測定や名前関係、MACアドレスの確認など通信管理上の実験項目を記載します。脆弱性を含めるかどうかは実験の目的によります。。

実験の開始、結果の外部公開は許諾がないかぎりしないなども記載します。

相手が個別実験を拒否した場合には、一般公開実験の提案文も示し、一般公開実験から除外した方がいいかどうか、一般公開実験から除外したことを開示してもいいかどうかを確認します。

#　一般公開実験

例えば、jpドメイン全体とか、特定のアドレスの範囲全体とか、実験の目的に従って、実験の範囲を決め、ネットに公開するとともに、インタネット関連学会等で実験の趣旨を専門家に開示し、専門家の賛同を得ます。

専門家の範囲は、情報系、通信系、法務系など３種類以上でそれぞれ行うとよいでしょう。
学術系だけでなく、場合によっては３つの業界団体にも連絡するとよいかもしれません。

学術候補
1)　情報系
情報処理学会、日本ソフトウェア科学会
2) 通信系
電気情報通信学会、電気学会､IEEE
3) 法務系
日本法学会、
情報ネットワーク法学会
http://in-law.jp/
業界団体候補
1) 情報系
JISA, JEITA, SEA
2) 通信系
通信機器工業会、IETF､W3C
3) 法務系
日本弁護士会、日本弁理士会（実験自体が特許に触れていないかなども）

３種類で行った結果、特定の１つでは賛同が得られたが、特定の１つで賛同が得られなかった場合は、賛同を得られた会と賛同が得られなかった会の両者が集まれる企画を行います。

インタネットの公開実験は、インタネットを使って様々な実験を行ったり、業務を行ったりしている組織、専門家と利害が対立する可能性があります。場合によっては、インタネットの一部機能または全部の機能が止まってしまうかもしれません。

これらの活動の案の作成は、教育団体、研究機関が協力する場合があります。
教育団体、研究機関では、個別告知実験を定期的に行っていたり、一般公開実験を行っている場合があります。

一般公開実験では、脆弱性などにより、大量の非公開情報が開示されてしまう可能性があるため、一般公開実験は３か月くらいの余裕をもって告示し、一般公開実験の前に、無料で個別告知実験を行うことが可能であることを記載するとよいかもしれません。

この文章自体は、まだ学会等で発表しておらず、関係者の合意は得ていません。

個別告知実験は、学生の卒業研究などの題材で学会発表などを行う学術目的の場合には、許諾を得られることがあります。

個人的、社会的な目的であっても、なかったも、相手側が実験の趣旨に同意してもらえれば実験を行うことができます。

その場合でも、関連する接続先のネットワークが遮断される可能性があり、関連する接続先にも事前に連絡しておいた方がいい場合があるかもしれません。

# 関連法規

1 憲法
https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=321CONSTITUTION

2 民法
https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=129AC0000000089

3 商法
https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=132AC0000000048

4 刑法
https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=140AC0000000045


5 民事訴訟法

6 刑事訴訟法

7 産業標準化法
https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=324AC0000000185

８　メートル条約

９　電気通信事業法

10 無線法

11 放送法

12　著作権法
http://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=345AC0000000048&openerCode=1

13  情報処理の促進に関する法律 
https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=345AC0000000090

14 個人情報の保護に関する法律
https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=415AC0000000057

15 不正アクセス行為の禁止等に関する法律
https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=411AC0000000128

16 サイバーセキュリティ基本法 
https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?openerCode=1&lawId=426AC1000000104_20190401_430AC0000000091

17 高度情報通信ネットワーク社会形成基本法
https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=412AC0000000144


18 民間事業者等が行う書面の保存等における情報通信の技術の利用に関する法律 平成16年法律第149号
https://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=416AC0000000149


# おさらい

個別の実験内容は、個別に確認するとよい。

公開の実験内容は、公開で確認するとよい。

どちらの場合でも、予備調査として自前で事前実験を行い、その際に、ネットの遮断などが起きない範囲での単位時間あがりのパケット送出量を記載するとよい。
ArchiveRule Filterの設定値一覧

## はじめに

この記事はAWS re:Inventで発表されたAccess Analyzerに関する記事です。
ArchiveRule Filterの設定値の対応表です。

## 本題

AWS CLIとCloudformationでArchiveRuleを作成するときに、
公式ドキュメントに値一覧が見つからなかったのでまとめました。

Access Analyzerのドキュメント
CLI: https://docs.aws.amazon.com/cli/latest/reference/accessanalyzer/index.html
Cloudformation: https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/AWS_AccessAnalyzer.html

| 日本語(GUI)       | 設定値(CLI)  |
|:-----------------|:------------------|
| Googleオーディエンス | condition.accounts.google.com:aud |
| プリンシパルARN | condition.aws:PrincipalArn |
| プリンシパルOrgID | condition.aws:PrincipalOrgID |
| プリンシパルOrgパス | condition.aws:PrincipalOrgPaths |
| ソースアカウント | condition.aws:SourceAccount |
| ソースARN | condition.aws:SourceArn |
| 送信元IP | condition.aws:SourceIp |
| ソースVPC | condition.aws:SourceVpc |
| ソースVPCE | condition.aws:SourceVpce |
| ユーザーID | condition.aws:UserId |
| Cognitoオーディエンス | condition.cognito-identity.amazonaws.com:aud |
| FacebookアプリID | condition.graph.facebook.com:app_id |
| 発信者アカウント | condition.kms:CallerAccount |
| Lambdaイベントソーストークン | condition.lambda:EventSourceToken |
| KMSキーID | condition.s3:x-amz-server-side-encryption-aws-kms-key-id |
| AmazonアプリID | condition.www.amazon.com:app_id |
| AWSアカウント | principal.AWS |
| 正規ユーザー | principal.CanonicalUser |
| フェデレーションユーザー | principal.Federated |
| リソース | resource |
| リソースタイプ | resourceType |

## 値の取得方法

マネジメントコンソール上でArchiveRuleを全ての設定で作成し、
AWS CLIの[get-archive-rule](https://docs.aws.amazon.com/cli/latest/reference/accessanalyzer/get-archive-rule.html)で設定を取得してください。
【Rails】開発環境で送信したメールを確認する

`letter_opener_web`という、ローカル開発環境で送信したメールを確認するgemがすごく便利だったのでまとめます。サーバーのログを辿らずに、ブラウザ上で良い感じにメールを見れます。

```rb:Gemfile
group :development do
  gem 'letter_opener_web'
```
```terminal
$ bundle install
```
```config/environments/development.rb
# 以下2行を追加
config.action_mailer.default_url_options = { host: 'localhost:3000' }
config.action_mailer.delivery_method = :letter_opener_web
```
```config/routes.rb
# 以下3行を追加
if Rails.env.development?
  mount LetterOpenerWeb::Engine, at: "/letter_opener"
end
```
`localhost:3000/letter_opener`にアクセスすると、Gmail風の画面が表示されて、送信メール一覧、詳細を確認することができます。
<img width="1439" alt=" 2020-01-15 10.01.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244893/3c00e30d-fb95-fe34-14a5-1170257486e2.png">


##参考
[letter_opener_webを使ってメール送信をプレビューする](https://www.write-ahead-log.net/entry/2018/05/26/185905)
【Sublime Text】SublimeLinter エラー "env: node: No such file or directory" の解決

<!--
# 【Sublime Text】SublimeLinter エラー "env: node: No such file or directory" の解決
#Sublime_text #開発環境
-->

<!-- MarkdownTOC autolink="true" autoanchor="true" uri_encoding="false" bullets="-,+,*" levels="2,3" -->

- [発生した環境、状況](#発生した環境、状況)
- [エラー内容](#エラー内容)
- [解決方法](#解決方法)
    + [他の解決法](#他の解決法)
- [メモ](#メモ)
- [参考リンク](#参考リンク)

<!-- /MarkdownTOC -->


<a id="発生した環境、状況"></a>
## 発生した環境、状況

* Mac (シェルスクリプトは zsh)
* node.js は node brew で動かしている
* ~/.zshrc で node へのパスは設定済み (`export PATH=$HOME/.nodebrew/current/bin:$PATH`)
* bash → zsh 移行、node 本体のアップデート、node パッケージのアップデート などを行った後に発生 (原因は特定できていない)


<a id="エラー内容"></a>
## エラー内容

JavaScript ファイルを開くと、ウインドウ下部に下記のエラーメッセージが出て、SublimeLinter が正常に機能しない

```
SublimeLinter: #5 eslint gulpfile.babel.js ERROR:
=================================================

env: node: No such file or directory
```


<a id="解決方法"></a>
## 解決方法

SublimeLinter パッケージの設定で、node へのパスを指定してやることで解決した

```
// SublimeLinter Settings - User
{
    "linters": {
        "eslint": {
            "env": {"PATH":"~/.nodebrew/current/bin"}
        }
    }
}

```

他パッケージでも同様のエラーが出る場合、ここに設定を追加すれば解決するはず。
(例：sass-lint なら `"sass":{"env": {"PATH":"/usr/local/bin/"}}` を追記)

<a id="他の解決法"></a>
### 他の解決法

.zprofile でPATHを通しとく方法もある。こっちの方がいいか？
[SublimeLinter-eslintでauto fixする | tsuyuki.makoto](https://www.tsuyukimakoto.com/blog/2017/01/01/sublimetext3_autofix_eslint/)


<a id="メモ"></a>
## メモ

* .eslintrc と .sublime-project の内容を合わせておく
* 設定ファイルのファイルネーム .eslintrc (中身は JSON) は現在は非推奨で、今は .eslintrc.json と書くらしい。でも変更するとエラーが出たので、.eslintrc ままにした(TODO:解決)


<a id="参考リンク"></a>
## 参考リンク

* [env: node: No such file or directory · Issue #1218 · SublimeLinter/SublimeLinter](https://github.com/SublimeLinter/SublimeLinter/issues/1218)
* [SublimeLinter: ERROR: env: node: No such file or directory · Issue #1318 · SublimeLinter/SublimeLinter](https://github.com/SublimeLinter/SublimeLinter/issues/1318)
* [Step by Stepで始めるESLint - Qiita](https://qiita.com/howdy39/items/6e2c75861bc5a14b2acf)
画面遷移せずにHTMLで値を送る方法

画面遷移せずにGETで値を送る方法のメモです。

##HTMLで値をGET送信
a href="URL?属性名="値"

```html
<body>
<a href="TestServlet?action=sample"></a>
</body>
```

##Javaで値を受け取る
request.getParameter("属性名")
sは文字列「sample」を受け取ります。

```java
protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

			String s = request.getParameter("action");
```
Elastic Beanstalk デプロイする時にハマったところ（Rails）

# はじめに
Rails アプリケーションを Elastic Beanstalk を使ってデプロイするときにハマって時間がかかってしまったことを箇条書きにしてみました。
"Elastic Beanstalkはデプロイがすぐできる。"なんて嘘だーと一瞬思いましたが、ポイントさえ押さえておけば、本当に一瞬でデプロイできるようになりますので、ぜひ使ってみてください。

#### 関連リンク
Elastic Beanstalk 関連のリンクを下記に載せておくので、必要であれば参考にしてください。。

* ElasticBeanstalk Blue-Green Deployment
    * https://qiita.com/syukan3/items/28eba7462c26409773e6
* AWS ElasticBeanstalk 環境を切り替える方法（EB CLI）
    * https://qiita.com/syukan3/items/1a44c879ab44e45ca748

# Elastic Beanstalk
## ハマったところ
* 文字コード（日本語の場合、utf8 へ変更必要）
  * [RDSに作成したMySqlのDatabaseに日本語が登録出来ない問題 - Qiita](https://qiita.com/kijitora-neko/items/aab58b4c1f684353e075)
* セキュリティグループ
(Mysql2::Error: Can't connect to MySQL server on '**********************' (4))
  * EC2 と RDS を別のVPC/サブネット上に置く方法
    * RDS のセキュリティグループに EC2 からのアクセスを許可する。
* rails db:createをやってくれない？
(Mysql2::Error: Unknown Databese'********')
  * 下記コマンドにて、自分でMySQLに接続して、DB作成。
    * MySQL への接続（EC2上で（eb ssh））
      * mysql -h *******MySQLのエンドポイント？（RDS）******** -P 3306 -u sakaes -p
    * DB作成
      * create database **************;

* initializers/carrierwave.rb 用に beanstalk へS3設定を追記


# まとめ
ただエラーを時系列に羅列しただけになってしまいましたが、同じような羅列された情報に自分が助けられたことがあるので、
困っている他の方の役に立てばと思い投稿させていただきました。

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
markdown 向け vscode プラグラインメモ

## Markdown All in One

- TOC が作れる
- ショートカットでいろいろできるようになる

| キー             | コマンド                             |
| ---------------- | ------------------------------------ |
| Ctrl + B         | 太字                                 |
| Ctrl + I         | イタリック体                         |
| Alt + S          | 取り消し線                           |
| Ctrl + Shift + ] | ヘッディングレベルをあげる           |
| Ctrl + Shift + [ | ヘッディングレベルをさげる           |
| Ctrl + K V       | プレビューを横に表示                 |
| Alt + C          | タスクリストのチェック・チェック解除 |

```text
チェックボックスは、以下のように作れる
- [ ] チェックボックス
```

## Text Tables

- テーブルの入力がちょっとだけ楽になる
- Ctrl ＋ Q キーを 2 回押せば**Table Mode**が ON になる

## Table Formatter

- テーブルをフォーマットしてくれる
- コマンドパレット（Ctrl + Shift + P）を開き、「Table:FormatCurrent」か「Table:FormatAll」を選ぶ

## Markdown Preview Enhanced

- その名の通りプレビューが快適になる
- Ctrl + K → V
- 数式、図なども使用可能になる

## markdownlint

- markdown の lint ツール
- 結構ツッコミがはげしい

## Prettier - Code formatter

- code フォーマッター
- ドキュメントを整形してくれる
- "editor.formatOnSave": true とすると、セーブ時に勝手にやってくれる

## Markdown PDF

- markdown を pdf などに変換

## vscode-pdf

- vscode で pdf が開ける

## Paste Image

- Ctrl + Alt + V で画像をペーストできる

## markdown-index

- インデックスを付けてくれる
- コマンドパレット（Ctrl + Shift + P）を開き、「markdown add index」を選ぶ
plunkerでjsonp

#概要

plunkerでjsonpやってみた。
曲名からmusic_id取得してみた。

#参考にしたページ


https://qiita.com/ssssssssok1/items/dfebcb352c3302c6af9a


#成果物

http://embed.plnkr.co/DNWANbSy4Lby1L8nKhxQ/


以上。