OmniAICreator/Qiita-1.07M huggingface dataset:
指定行の末尾を3点リーダーにするもっともシンプルなCSS

# 指定した行の末尾を3点リーダーにしたい。
3行目の末尾だけ・・・になるようにするCSS
超シンプルな解説記事がないので俺でもわかる様に、書いておく。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69647/0b42514d-89dc-311a-44e9-3123e0f34a9f.png)

以下は全て必須のStyleでどれがかけても動かないので注意。

```scss:3点リーダーCSS
display: -webkit-box; // 何も考えずつけておけ。
height: 80px; // 表示する範囲は上から ○○px と指定するこれは目で見て微調整
overflow: hidden; // 表示する範囲から外れたものは見えない様にする

/* autoprefixer: ignore next */ //←この ignore next は不要に見えて必須、細かい説明はしないがCSS側のバグ。
-webkit-box-orient: vertical; // 何も考えずつけておけ。
-webkit-line-clamp: 3; //何行目を・・・にするかを指定
```


### height:80pxとoverflow:hiddenがないとこうなる。
確かに3行目で・・・になってるが、それ以降の文字が溢れてしまう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69647/dfe2aaaa-33cc-1c44-98ee-4fa8042a58f1.png)
phpstormのgitの注釈が履歴を追うのに便利

VS Codeの拡張機能「GitLens」が**神**だなーと思ってましたが、phpstormでも似た機能ないのかな？
と思ってたら類似機能があったのでメモです。

## 注釈表示
ソースコード上で
右クリック→「Git」→「注釈」

![スクリーンショット 2019-09-06 12.50.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452135/393348f2-b019-7fe9-7dac-63892f5baa4b.png)

もしくは

行番号の隣の領域で
右クリック→「注釈」

![スクリーンショット 2019-09-06 12.50.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452135/54c4ffb7-2182-e044-be97-539cbb7f97ad.png)

でコードの**行単位**で**最終コミット**の**ユーザ**と日付が表示されるので
改修の変遷を確認するのに便利です。
![スクリーンショット 2019-09-06 12.54.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452135/c5ed7feb-169f-bca2-a86f-dd486b6c3321.png)

ユーザ部分をクリックするとモーダルが表示されてコミット単位でファイルの一覧の確認もできて便利です。
AWS CP（クラウドプラクティショナー）を３日間で取得した話。

#自己紹介
NW寄りのインフラエンジニア歴7年程度。
CiscoだのJuniperだのA10だのYAMAHAだのはそれなりそこそこお仕事出来るレベル。
プログラムは本職PGさんが鼻で笑っちゃうようなクソコードをVBAで書ける程度。
ログ整形用のエクセルマクロくらいならまあ作れるよ、くらいです。

そんな折、クラウドエンジニアとしての職歴を開始するべくAWS SAAを昨年12月に取得。
2019/04月からその資格をバリバリ活かせる会社へ転職しました。
バリバリ活かせるとか簡単に言いましたけど、自信をバリバリベキベキボキボキと折られまくったというほうが正しい半年です。辛い泣きたい。


##AWS知識レベル
SAA取得後、ガッツリと毎日のようにAWSと戯れ、IAM権限にひれ伏し、ELBとEC2とRDSの偉大さに感銘を受ける毎日であります。AWSsammitも行きましたし、JAWSも何度か参加させてもらって勉強しています。楽しい。


##なんでわざわざ下位資格取るの？
弊社内、私が所属する課で、今年度の目標としてSAAの取得を全員に義務付けられており、私（ともう一名）で課内の勉強会を開催していました。
ところが、このSAA全員取得！という目標が課員のスキルレベルに到底見合っておらず、このままでは目標達成できるわけない・・・と嘆いていたところ、JAWSでお知り合いになれたCP資格対策本の共同著者である方の無料セミナーに参加し、本件について対面で相談に乗って頂く事が出来ました。

講師さん曰く「せっかくAWSがステップアップとして階段上に資格取得のキャリアパス用意してるのに、全員が全員そんな急なやり方じゃ誰かが必ず怪我する」との助言を頂戴することが出来ました。
この助言を受け、課室の目標をCPの取得へ下方修正しては如何か、という上申を行いましたところ、なんとか通りました・・・。
その上で、示しをつけるためにも、ケジメのためにも、今後の課の勉強会方針確定のためにも、私がCPは取得しておいた方が良い、という判断のもと、取得を行いました。

その節はお世話になりました。
この場を借りて御礼申し上げます。
この後に何度も紹介させて頂きますが、ご著作の紹介をさせていただきます。

##勉強に使用した本
[AWS認定資格試験テキスト AWS認定 クラウドプラクティショナー]
(https://www.amazon.co.jp/AWS%E8%AA%8D%E5%AE%9A%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88-AWS%E8%AA%8D%E5%AE%9A-%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%BC-%E5%B1%B1%E4%B8%8B-%E5%85%89%E6%B4%8B/dp/4797397403/ref=as_sl_pc_as_ss_li_til?tag=yamamanx-22&linkCode=w00&linkId=55d002caa87d3928c0da76c0a2e8c3e2&creativeASIN=4797397403)

##勉強方法
###1日目
- 上記の本を読む
  - SAA取得していて、実運用でも毎日触ってる身としては特に新しい要素は無い印象です。


###2日目
- 上記の本を読んだ結果、実地で経験していない知識を検証環境を用いて触る
  - AutoScalingとかCloudFormartionとかRoute53とかいまいち理解が甘いので経験しておく。

###3日目
- 日中：仕事の障害対応に追われる
- 夜：課員の送迎会があり、日付変わるまで飲んで歌ってはしゃぐ。（試験ナメてます）
  - 帰りの電車の中で、さすがにマズイかなーとか思いながら、上記の本を読み返す

###試験日当日
+ 午前半休を頂戴して、いったん会社行って最後に見直し勉強してからテストセンター向かおうとか考えてたら、会社付いたとたんに障害対応することに・・・試験時間に間に合うギリで抜け出せましたけど、結局勉強出来なかった・・・。

###本試験
東京の八重洲にある会場でした。ものすごい分かりづらいのですが、隣にお多幸という超有名なおでん屋さんがありますので、同じ会場を使われる方はお多幸の隣、で覚えると良いと思います。

難易度については完全にナメくさって受けてる僕が言うのも何ですが、想定よりは問題が難しかったです。

試験の印象（感想は個人の主観です）
受験前：itパスポートレベルで、少し勉強すれば誰でも取れる資格だろうなあ
受験後：基本情報レベルまでは無いけど・・・ナメてたら難しいかも

独特の言い回しであったりする点や、4択ではあるのですが、問題文がどちらとも取れる書きっぷりだったりすることがちょこちょこあって、迷うには迷いました。

最終的には、上記の本のおかげで選択肢を絞り切れることが多く、この本で勉強を行ってよかったなと思いました。
もう一度リンク張っておきます。
[AWS認定資格試験テキスト AWS認定 クラウドプラクティショナー]
(https://www.amazon.co.jp/AWS%E8%AA%8D%E5%AE%9A%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88-AWS%E8%AA%8D%E5%AE%9A-%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%BC-%E5%B1%B1%E4%B8%8B-%E5%85%89%E6%B4%8B/dp/4797397403/ref=as_sl_pc_as_ss_li_til?tag=yamamanx-22&linkCode=w00&linkId=55d002caa87d3928c0da76c0a2e8c3e2&creativeASIN=4797397403)


試験時間は90分ありましたが、見直し含め30分くらいで完了してしまいました。
落ちるとは微塵も考えていませんでしたが、本当に受かったときはそれでも安心しましたね。
※11880円が無駄に消えなかった事に安心したのかもしれませんが

###感想
試験問題を詳しく述べる事は出来ないのですが、
AWSのリージョンを選ぶ基準について問う問題があり、その中の選択肢の一つに
・その地域の気候や冷却機能について
のような記述があって試験中吹き出しそうになりました。
偶然でしょうけど、すげー自虐っすね・・・。
参考：[ AWS 東京リージョンで発生した大規模障害についてまとめてみた](https://piyolog.hatenadiary.jp/entry/2019/08/23/174801)



###終わりに
こんな取り方する方はなかなかいないでしょうが、不安に思わなくても
SAA持ってりゃCPはノー勉でもいけるレベルだよ！という事をお伝えするだけの記事でした。
次はSySOps取る予定です。
assets の画像パスをpropsで受け取って表示する方法

assets に格納した画像のパスを props で受け取って表示したかったのですが、なかなかうまくいかなくて調査に時間がかかってしまいました。
解決できたので備忘録です。

# `require` を使う

▼失敗例

```vuejs
<img :src="image_src" alt=""/>
```

▼成功例

```vuejs
<img :src="require(`@/assets/${image_src}`)" alt=""/>
```

※`image_src` は props のプロパティ
Tampermonkeyを使用したTealeaf UI Capture SDKのテスト方法

#Tampermonkeyを使用したTealeaf UI Capture SDKのテスト方法
この記事ではIBM Tealeaf (Acoustic Experience Analytics） UI Capture SDKをブラウザの拡張機能であるTampermonkeyを使用してテストする方法を記載します。
これによりWebサイトにUIC SDK（JavaScript）を実装する前にテストを実施することができます。
またデモのために既存Webサイト上の行動（ページ遷移やクリック、文字入力、プルダウン選択等）をTealeafでリプレイすることができます。

##1. Tampermonkeyのインストール
ChromeにTampermonkeyをインストールします。
https://www.tampermonkey.net/

##2. Tampermonkeyの設定
Chromeの拡張機能を開き、Tampermonkeyの詳細をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492427/4846661a-2398-071d-feb8-baa275e3921c.png)

「ファイルのURLへのアクセスを許可する」を有効化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492427/49d60f91-7a49-dfeb-1ddf-02991695cebf.png)

##3. UserScriptの作成
Tampermonkeyのダッシュボードを開き、新規スクリプトを作成します。
以下はデフォルトの設定です。

```javascript:UserScript
// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();
```

必要な設定は以下です。
1. @matchにテスト対象WebサイトのURLを指定
2. @requireの行を追加し、UIC SDKの保存先ディレクトリを指定
3. functionは削除
それ以外の@nameなどの設定は任意で構いません。

```javascript:tealeaf_sample
// ==UserScript==
// @name         Sample
// @namespace    Sample
// @version      0.1
// @description  Tealeaf
// @author       You
// @match        https://qiita.com/*
// @grant        none
// @require      file:///C:/js/tealeaf_5.6.0.js
// ==/UserScript==
```

##4. 送信データの確認
設定を保存してTampermonkeyを有効化したら、@matchに指定したWebサイトにアクセスし、ページの遷移やクリックを行います。

F12でデベロッパーツールを開き、Networkタブを開きます。"collectorPost"があればTealeafにデータが送信されていることが分かります。もし見つからなければ設定を見直してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492427/e4d214d6-b4f5-1217-5928-f9ff220077a3.png)

##5. リプレイの確認
Tealeafにログインし、自分のセッションを検索・リプレイします。
自分が操作した通りに再生されれば完了です。
ABC127

https://atcoder.jp/contests/abc127/tasks

#A - Ferris Wheel
```c++
#include<bits/stdc++.h>
using namespace std;

int main(){
    int A,B; cin >> A >> B;
    if (A>=13) cout << B;
    else if (6<=A && A<=12) cout << B/2;
    else cout << 0;
}
```
#改善点(&&)
else if **(6<=A && A<=12)**の黒字の部分を**6<=A<=12**としないように気を付ける！
#B - Algae
```c++
#include<bits/stdc++.h>
using namespace std;

int main(){
    int r,D,X; cin >> r >> D >> X;
    for (int i=0; i<10; i++){
        X=r*X-D;
        cout << X << endl;
    }
}
```
#改善点
**X=r*X-D;**の計算は右辺から始まり、最後に左辺に代入するという**順番**であることを忘れるな！

#C - Prison
よくわからん
```py

```
Rails6 ActionText couldn't find file 'trix/dist/trix' with type 'text/css'

Action Textをインストール後、サーバーを立ち上げた際に、このようなエラーが出ることがあります。

>couldn't find file 'trix/dist/trix' with type 'text/css'

### 原因
yarnが入っていない状態で

```bash
$ rails action_text:install
```

をすると、migrationファイルは追加されてるので、大丈夫かと思うと、jsonファイルを確認すると

actiontextとtrixがない状態です。


``` package.json

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.10.2",
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "jquery": "^3.4.1",
    "noty": "^3.2.0-beta",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.8.0"
  }
}

```


### 解決
yarnをちゃんと入れてから

```bash
$ yarn install --check-files
```

再度 Action Textをインストール

```bash
$ rails action_text:install
```



``` package.json

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.10.2",
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/actiontext": "^6.0.0",　#確認
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "jquery": "^3.4.1",
    "noty": "^3.2.0-beta",　#確認
    "trix": "^1.0.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.8.0"
  }
}

```

actiontextとtrixが入って入れば大丈夫
Pandasで行と列をいれかえる方法

## 概要
pandasでDataFrameを作成した後で，行列を入れ替える方法を探して見つかったのでメモ．

### サンプルデータ作成
```python

   import pandas as pd
   import numpy as np
   sample_data = np.random.randint(0,10,size = (3,5))
   columns = ["C" + str(i) for i in range(5)]
   df = pd.DataFrame(data = sample_data, columns = columns)
   df
``` 

### 転置（行と列を入れ替え）
```python
   df = df.transpose()
   df
``` 
これでDataFrameの行と列を入れ替えることができました．
スポットインスタンスを利用して、SageMakerのモデルトレーニングをしてみた

# はじめに
今回は、AWS SageMaker によるモデルトレーニング時にスポットインスタンスが利用できるようになったので、実際に利用し、どれだけコスト削減できるか確認します。

**※注意※**
本稿は、実際のモデルトレーニング時にスポットインスタンスを利用する方法と、どれだけコスト削減できたかを紹介する記事です。
モデルトレーニング時のスポットインスタンス利用で何が変わるのか、何が利点なのかについては以下の記事でご紹介していますので、参考にしていただけると幸いです。

**[スポットインスタンスを利用して、SageMaker でのモデル作成コストを最大90％削減する](https://qiita.com/NendaiHiroki/items/0b709788844a26fec600)**

#モデルトレーニング時のスポットインスタンス利用方法
モデルトレーニング時にスポットインスタンスを利用するには、以下の2つの項目を設定することが必須です。

- Enable managed spot training (スポットインスタンスの利用を有効にする)
- Maximum wait time before job terminates optional stopping condition (最大実行時間)

以下、設定方法を説明します。

## トレーンングジョブの作成

- SageMaker のサイドバーからトレーニングジョブを選択し、右上のトレーニングジョブの作成をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/addc29ee-6e84-75a8-0b90-911789c2ca42.png)


- 任意のジョブ名と、適切なIAMを選択します。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/f6316db7-f28b-6e6e-7b41-7ae10b7c1d5c.png)

- アルゴリズムの設定を行います。今回私は、組み込みアルゴリズムの ObjectDetection を利用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/1edacab0-dbe7-6e42-c525-55f5d5f7147f.png)

- 利用するインスタンスタイプと停止条件を設定します。
ストレージボリュームにはトレーニングジョブのチェックポイントを保存できるだけの容量を確保しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/78112cba-7819-e75a-c142-faf40979e509.png)



- 入力データやハイパーパラメータは各自設定をお願いします。
- 次にチェックポイントの保存先を設定します。
これは、スポットインスタンス中断時にチェックポイントの情報をS3に保存し、スポットインスタンス再開時に参照する設定です。
この設定をしないと、スポットインスタンス中断によってトレーニングジョブが一からやり直しになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/f17f2aac-2245-f4e8-fed0-88d9af9461f1.png)

- モデル保存先を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/40150f86-56a9-05c0-6e30-5f5cecd6043a.png)

- スポットインスタンスの利用を有効にし、最大実行時間を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/5438f0ad-cab0-f765-8405-2a1cb9e93c38.png)


- 設定は以上になります。トレーニングジョブの作成をクリックし、モデル作成を始めましょう。

### トレーニングジョブ作成時にエラーが発生した場合
AWS のサービス制限による、エラーの可能性があります。 
2019年9月6日時点で、SageMakerのスポットインスタンスについて、制限緩和を行う項目はありません。
SageMakerのスポットインスタンスの制限緩和を行う手順を別途記事にしましたので、以下の記事を参考に制限緩和をお願いします。

**[SageMakerのスポットインスタンスを利用したモデルトレーニングに関する制限緩和方法について](https://qiita.com/NendaiHiroki/items/b725d0971a0b2af4b6f7)**

# 結果の確認

実行結果は以下の通りでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/85146c9e-7502-dfe2-2e59-e330a3dfb428.png)

p3.2xlarge のスポットインスタンスは、オンデマンドインスタンスから見たコスト削減割合が70%のため、実行時間288秒に対する請求が、86秒の請求として処理されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/b66a919a-0f97-122c-1247-6904140ad9c4.png)

※東京リージョンの最大コスト削減率は c4 シリーズを利用する際の、75%となります。


# おわりに
今回はスポットインスタンスを利用して、SageMakerのモデルトレーニングを行い、実際にどれだけコスト削減できるか確認しました。
モデルトレーニングに重要な時間制限がない場合は、ぜひスポットインスタンスを利用したモデルトレーニングをしてみてください。
言語処理100本ノックやってみる　23

#23. セクション構造
記事中に含まれるセクション名とそのレベル（例えば"== セクション名 =="なら1）を表示せよ．

```py
import gzip
import json
import re
frame = "jawiki-country.json.gz"

def extract_UK():
  
  with gzip.open(frame,"rt") as data_file:
    for line in data_file:
      data_json = json.loads(line)
      if data_json["title"] == "イギリス":
        return data_json["text"]
  raise ValueError("イギリスの記事ないわ")
  

pattern = re.compile(r'''
    ^       # 行頭
    (={2,}) # キャプチャ対象、2個以上の'='
    \s*     # 余分な0個以上の空白（'哲学'や'婚姻'の前後に余分な空白があるので除去）
    (.+?)   # キャプチャ対象、任意の文字が1文字以上、非貪欲（以降の条件の巻き込み防止）
    \s*     # 余分な0個以上の空白
    \1      # 後方参照、1番目のキャプチャ対象と同じ内容
    .*      # 任意の文字が0文字以上
    $       # 行末
    ''', re.MULTILINE + re.VERBOSE)

result=pattern.findall(extract_UK())

for line in result:
  level = len(line[0])-1
  print("{indent}{sect}({level})".format(indent="\t"*(level-1),sect=line[1],level=level))
```
出力結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475270/9d36f413-5428-c0bb-1331-69a18e83ee6e.png)

わけわかめ
SageMakerのスポットインスタンスを利用したモデルトレーニングに関する制限緩和方法について

# はじめに
2019年9月6日時点では、SageMaker スポットインスタンスを利用したモデルトレーニングに関する制限緩和項目がありません。
そのため今回は、SageMaker のスポットインスタンスを利用したモデルトレーニングに関する制限緩和の方法についてご紹介します。


# スポットインスタンスを利用したモデルトレーニング時のインスタンス制限緩和
制限緩和には、リソースタイプとして「SageMaker のトレーニング」を選択したうえで、申請理由の欄に、通常のトレーニングジョブではなく"スポットトレーニングジョブ"の緩和を希望していることを明示する必要があります。
以下手順を説明します。

- SageMaker のコンソール右上のサポートからサポートセンターをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/f5b4ee05-a665-1d55-75d9-b773739fff1b.png)

- Creat Case をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/3f57d3ba-978b-2aaa-60b8-cd7f763f989d.png)

- 真ん中のService limit increaseをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/6051f499-d67c-5893-fdd3-a9d4696f4a70.png)

- SageMaker を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/2e7569d7-ebd7-23cd-4bdd-b7a79ac75ccf.png)

- 以下のように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/19b9e2db-5c06-5c40-bfcc-20640bf176d9.png)

- 申請理由と通常のトレーニングジョブではなく"スポットトレーニングジョブ"の緩和を希望していることを記入します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/d6068f6d-d27e-f1b7-c405-1d5ade0ebb98.png)




- 設定を終えたら、Submit をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/945065bc-3d4b-e020-03fd-9d8f7f567031.png)

- 以上でで申請は完了となります。
※制限緩和には数日かかる場合があります。


# おわりに
今回はSageMakerのスポットインスタンスを利用したモデルトレーニングに関する制限緩和方法についてご紹介しました。
スポットインスタンスに関する項目追加の対応があるまでの参考になると幸いです。
言語処理100本ノックやってみる　22

#22. カテゴリ名の抽出
記事のカテゴリ名を（行単位ではなく名前で）抽出せよ．

```py
import gzip
import json
import re
frame = "jawiki-country.json.gz"

def extract_UK():
  with gzip.open(frame,"rt") as data_file:
    for line in data_file:
      data_json = json.loads(line)
      if data_json["title"] == "イギリス":
        return data_json["text"]
  raise ValueError("イギリスの記事ないわ")
  
pattern = re.compile(r'''
    ^       # 行頭
    .*      # 任意の文字0文字以上
    \[\[Category:
    (       # キャプチャ対象のグループ開始
    .*?     # 任意の文字0文字以上、非貪欲マッチ（貪欲にすると後半の'|'で始まる装飾を巻き込んでしまう）
    )       # グループ終了
    (?:     # キャプチャ対象外のグループ開始
    \|.*    # '|'に続く0文字以上
    )?      # グループ終了、0か1回の出現
    \]\]
    .*      # 任意の文字0文字以上
    $       # 行末
    ''', re.MULTILINE + re.VERBOSE)

result = pattern.findall(extract_UK())

for line in result:
  print(line)
```
出力結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475270/985d3455-ca4d-7026-7572-e39c6fe11953.png)

#patternとは？
正規表現における「パターン」とは「文字列のなかで、文字の発生のしかたに関する条件（ルール）」のようなもの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475270/4d651838-d0dc-237b-42cf-8562bf6b4b8d.png)

**「^ * . 」**などの、**メタ文字**を使って、文字の**パターン**を表せるんだね。

#正規表現の使い方
https://tomoyuki65.com/regular-expression-in-ruby/

#間違いやすいポイント

```py
# 正規表現のコンパイル
pattern = re.compile(r'''
    ^
    \[\[Category:
    (.*?)
    (?:\|.*)    #|と.*が必ず続かないとダメという指定をしている！
    \]\]
    
    ''', re.MULTILINE + re.VERBOSE)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475270/e17f45e3-49bf-742d-9224-35294cea7603.png)

#正解例
```py
pattern = re.compile(r'''
    ^
    \[\[Category:
    (.*?)
    (?:\|.*)? #?にすることで、0回ないしは1回|と.*あるという条件になった！
    \]\]
    
    ''', re.MULTILINE + re.VERBOSE)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475270/f48cebd6-ca4b-2710-8f89-10285f1046da.png)

**この指定のお陰で、|と.*がなくても抽出できるようになった！**
言語処理100本ノックやってみる　21

#21. カテゴリ名を含む行を抽出
記事中でカテゴリ名を宣言している行を抽出せよ．

```py
import gzip
import json
import re
fname = 'jawiki-country.json.gz'


def extract_UK():
    '''イギリスに関する記事本文を取得

    戻り値：
    イギリスの記事本文
    '''

    with gzip.open(fname, 'rt') as data_file:
        for line in data_file:
            data_json = json.loads(line)
            if data_json['title'] == 'イギリス':
                return data_json['text']

    raise ValueError('イギリスの記事が見つからない')


# 正規表現のコンパイル
pattern = re.compile(r'''^\[\[Category:.*\]\].*$''', re.MULTILINE + re.VERBOSE)


# 抽出
result = pattern.findall(extract_UK())

# 結果表示
for line in result:
    print(line)
```

#raiseとは？
自作した関数などで例外を発生させたい場合には raise を使う。
https://uxmilk.jp/39845

#正規表現とは？
いくつかの文字列を**一つの形式**で表現するための表現方法のこと。
・～から始まる
・～で終わる
・～が有る
・～が無い
みたいな感じで探す条件を曖昧な感じで指定できる

#findallとは？
正規表現で一致した文字列のリストを返すサンプル。
正規表現で**キャプチャ**した場合、**キャプチャしたものだけを全て返す**！
#re.MULTILINEとは？ 
re.MULTILINEは、検索対象のデータが**複数行**のために指定しています。これをつけないと^や$が検索対象の先頭や末尾にしかマッチせず、途中の改行が相手にされなくなってしまいます。

#re.VERBOSEとは？ 
re.VERBOSEは、**正規表現の途中にコメント**を入れるために指定しています。これを指定すると、#でコメントが入れられます。ただし、空白や#を指定する際はバックスラッシュでのエスケープが必要になります。
出勤時刻、退勤時刻の一覧を取得する方法

月末に勤務表を書く時、出勤時刻や退勤時刻が知りたくなりますよね。
そんな貴方のために、以下のコマンドをPowerShellで実行することをお勧めします。

```powershell
Get-EventLog System -After "2019/08/01"| ? {$_.InstanceId -eq "7002" -or $_.InstanceId -eq "7001"} | select InstanceID,TimeGenerated | sort -Property TimeGenerated | Out-String　| % { $_ -replace "7001","ログオン" } | % { $_ -replace "7002","ログオフ" }
```

# 解説

## Windowsのイベントの一覧を取得しよう
このコマンドですがWindowsのイベントログのうち、2019/8/1以降のものを取得しています。

```powershell
Get-EventLog System -After "2019/08/01"
```

でも、この一覧じゃあ、関係ないログまでいっぱい出力されてよくわからないですよね。

## 知りたいのはログオンとログオフだけ
次に?(Where-Object)を使用して、インスタンスIDが7001(ログオン)、7002(ログオフ)のものを取得しましょう。

```powershell
Get-EventLog System -After "2019/08/01" | ? {$_.InstanceId -eq "7002" -or $_.InstanceId -eq "7001"} 
```

これでログオンとログオフだけになりました。
でもこれ、IndexやらEntryTypeやら、いらない項目があって見にくいし、日時の降順なのもいただけませんよね。


## 欲しいのは何のイベントなのかと日時だけ
select(Select-Object)を使用して、余計な項目を省きインスタンスIDと日時のみを取得しましょう。

```powershell
Get-EventLog System -After "2019/08/01"| ? {$_.InstanceId -eq "7002" -or $_.InstanceId -eq "7001"} | select InstanceID,TimeGenerated
```

うん、大分見やすくなりましたね。

## 次は日時の昇順にソートしよう
sort(Sort-Object)を使用して、並べ替えてます。

```powershell
Get-EventLog System -After "2019/08/01"| ? {$_.InstanceId -eq "7002" -or $_.InstanceId -eq "7001"} | select InstanceID,TimeGenerated | sort -Property TimeGenerated
```

もうこれでもいい気がしますが、7001や7002はちょっと不親切かな。

## 7001や7002をログオン、ログオフに置換しよう
最後に、Out-Stringで文字列に変換した後、%(ForEach-Object)を使用して、7001、7002の部分をログオン、ログオフに置換

```powershell
Get-EventLog System -After "2019/08/16"| ? {$_.InstanceId -eq "7002" -or $_.InstanceId -eq "7001"} | select InstanceID,TimeGenerated | sort -Property TimeGenerated | Out-String　| % { $_ -replace "7001","ログオン" } | % { $_ -replace "7002","ログオフ" }
```

これで完璧。


# 後書き
え、Windows使ってない？
PCつけっぱなしで帰ってる？
すみません。自分で何とかしてください。
Docker+Java+SpringBoot WEB開発ハンズオン受講メモ(2019/08/19)

## 参加の目的
[業務システム開発のための開発言語／フレームワーク情報収集(2019年版)](https://qiita.com/yet103/items/d5c8c90b40ef6b518d33)の一環。

## ハンズオンセミナ概要
[Docker+Java+SpringBoot WEB開発ハンズオン](https://oneforall.connpass.com/event/141946/) 2019/08/19開催分

- 対象者
 - JavaでWEBアプリを作成したい人
 - Dockerで環境構築したい人
 - Dockerの仕組みを理解したい人

- 主な内容
Docker環境でDBを構築してSTS開発環境でWEBアプリ作成までのハンズオン。
Dockerとはなにか？というところから始めてDB環境作りを行い、
その環境でSpringBootフレームワークを使用した簡単なWEBアプリを作成します。

    1.各OSごとの環境設定
    2.Docker環境構築（Postgresql）
    3.SpringBootアプリ作成
    4.Docker概要
    5.登録機能（時間あれば）

## 学べたこと
- Windows10環境にDocker環境を構築、docker-composeを実行できた
- Spring FrameworkによるWebアプリケーションの構成ファイル概要と、構築手順の一連を知ることができた

## はまったこと
- プロキシ問題
    - 自社NW環境での作業だったため、各所でプロキシの設定が必要。
        - STSのプロキシ設定
            - STSへのプロキシ設定 (ウィンドウ→設定→一般→ネットワーク接続 より、プロキシ情報を設定)
        - Mavenのプロキシ設定
            - 修正対象ファイル`%USERPROFILE%\.m2\settings.xml`
            - 修正内容下記参照

```XML:
<?xml version="1.0" encoding="UTF-8"?>  
<settings xmlns="http://maven.apache.org/SETTINGS/1.1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.1.0 http://maven.apache.org/xsd/settings-1.1.0.xsd">  
  <proxies>  
    <proxy>  
      <id>http_proxy</id>  
      <active>true</active>  
      <protocol>http</protocol>  
      <host>proxy.example.com</host>  
      <port>8080</port>  
      <username>********</username>  
      <password>********</password>  
    </proxy>  
    <proxy>  
      <id>https_proxy</id>  
      <active>true</active>  
      <protocol>https</protocol>  
      <host>proxy.example.com</host>  
      <port>8080</port>  
      <username>********</username>  
      <password>********</password>  
    </proxy>  
  </proxies>  
</settings>```
かんたん！Railsでlike検索のscopeをconcernで作る

今日から始めるrubyメタプログラミングもどき😋

## 何をしたいか
例えばUsersモデルを作ったとして、そいつが名前、電話番号、メールアドレスを持っていたとします。そしてわしはそのカラムたちを管理画面からlike検索をしたいんです

```ruby:user.rb
# == Schema Information
#
# Table name: users
#
#  id                  :bigint(8)        not null, primary key
#  name                :string(255)      not null
#  tel                 :string(255)
#  email               :string(255)      not null
#  created_at          :datetime         not null
#  updated_at          :datetime         not null
```
powered by [annotate](https://github.com/ctran/annotate_models)

## 従来の方法

まぁ愚直にやるならすごく簡単ですよね。scope使ってちょちょいのちょいです

```ruby:user.rb
class User < ApplicationRecord
  scope :name_like,  -> (query) { where('name LIKE ?',  "%#{query}%") }
  scope :tel_like,   -> (query) { where('tel LIKE ?',   "%#{query}%") }
  scope :email_like, -> (query) { where('email LIKE ?', "%#{query}%") }
end
```

でもでもちょっと待って。
確かにこれくらいならまだ許容範囲だけど、今後like検索の対象が増えたら？もしかしてここにはウォール・マリアが築かれてしまうの…？

さらに`Userモデル`だけでなく、例えば`Adminモデル`があったとしてそこでも似て非なるカラムでlike検索したくなったら？私はウォール・シーナも築いてしまえるの…？

そんなお悩みを解決してくれるのがみんな大好き **concern** ちゃんなのです。

## Concernって？
新しいプロジェクトを`rails new`するとmodelディレクトリの配下にデフォルト`concerns`ディレクトリが作られます。concernとはそのディレクトリの下に置くべき**複数modelに登場する共通処理**のことです。DRYの思想に則り、共通処理を切り出すために存在します。むりやりViewで例えるのであれば、partialに値するものといえるでしょう。
実はこのconcernめちゃくちゃ便利で、OSSのコードを読んでいるとmodel配下だけとはいわずにcontroller配下やdecorator配下に設置されてることも多いです。

## 改善案
ということで使って行きましょうconcern！！

OSS見てるとconcernsモジュールの命名は **ableがメジャーっぽいのでそれに則ります。「〜を可能にする」のableですね。今回は検索を可能にするconcernということでsearchableと名付けてみました。

```ruby:concerns/searchable.rb
module Searchable

  extend ActiveSupport::Concern

  class_methods do
    def define_like_search(*columns)
      columns.each do |column|
        scope :"#{column}_like", -> (query) { where("#{column} LIKE ?", "%#{query}%") }
      end
    end
  end
end
```

class_methods周辺の理解は下記の記事が非常に参考になりました
 [Rails の module ClassMethods がやっている事](https://qiita.com/pekepek/items/4f5ad8c3003672765846)

肝心のメソッドの中身も書き方は色々あると思うのですが、私はモノグサで一行ですっきり書きたい！という思いが強かったので、モデルにおけるlike検索をしたいカラムを可変長引数として渡せばhoge_likeというscopeが定義されるようにしました。

これにより`Userモデル`側は下記のようになります。

```ruby:user.rb
class User < ApplicationRecord
  include Searchable
  define_like_search :name, :tel, :email
end
```

う〜ん美しい！！✨
これだけで `name_like` `tel_like` `email_like` という3つのメソッドが生成されるようになりました。

こうしておけば、例えば後から`Adminモデル`で名前とコメントでlike検索したいとなったら下記を追記するだけでOKになるんですね！

```ruby:admin.rb
class Admin < ApplicationRecord
  include Searchable
  define_like_search :name, :comment
end
```

使い方は最初に愚直に定義したscopeたちと同じです

```irb
[1] pry(main)> User.name_like 'ミカサ'
=> [#<User id: 3, name: "ミカサ アッカーマン", email: "mikasa@
ackerman.com", tel: nil, created_at: "2019-08-20 13:21:46", updated_at: "2019-09-03 17:56:57">]
```

いい感じに壁建築を防げたのではないでしょうか！
ちなみに進撃の巨人展おもしろかったです😆

## 2019/09/07追記
知人からツッコミがあったので。
このメソッドっていつ呼び出されるの？`hoge_like`を実行する度に `define_like_search` まで走らんの？という質問を受けました。
この`define_like_search`はrailsのmodel **初期読み込み時だけ**に実行されます。
これを確認してさらにconcernが好きになりました🤗
Rubyで文字列を改行区切りで分割する

改行文字が何なのか分からなかったり混在している文字列を分割する時これまで

```ruby
"a\r\nb\rc\n".split(/\r\n|\r|\n/)
=> ["a", "b", "c"]
```

みたいな事やってたんですが\Rというメタ文字を使うとこれだけで良いんですね。

```ruby
"a\r\nb\rc\n".split(/\R/)
=> ["a", "b", "c"]
```

https://docs.ruby-lang.org/ja/2.6.0/doc/spec=2fregexp.html
SWESTで分析作業(HAZOP)してよかったこと。

SWESTで、展示と分析をして、わかったこと、わからなかったこと、よかったこと、あらためるとよいことを記録します。

SWEST
http://swest.toppers.jp/



# 分析
毎回HAZOPの実習ではやり方を変えている。
人数、経験、年齢、性別などは、こちらが意図的に変更しているわけではない。

変えていないのは、３人による班構成、３回人を交代して回すという方法。

## 目的

なにか一つでも、これまで気がついていなかった視点を見出す。
これまでやっていたことの抜け漏れの可能性を確認する。（発見できなくても）
検出方法、対策案まで考える。


## 時間

会議の前の参加者の意識調査、得意分野調査として実施する場合は、15分から30分の場合がある。

安全分析として実施する場合には、初めての人がいる場合には70分から7時間くらいまで幅がある。
初めての人がいなければ最小60分で３回回せている。

７時間の場合には、報告を全体でまとめて、抜け漏れの確認、重複度合いなどを確認し、検出方法、対策案まで考え
次の作業に移れるような整理まで含んでいる。

３時間くらいまでは、発見と経験が主に。
## 回数
安全分析として実施する場合は必ず３回回す。（60分でも７時間でも）

参加者の意識調査、得意分野調査などの場合は１回にしている。

## 個人作業

班作業の前に、班作業の時間より長く個人作業を行う。
個人作業は何も説明せずに始めるのがよい。
説明の範囲内の作業をしてもらっても有効な分析はできない。

事前に個人作業を実施して集まっている場合には、個人作業を短くすることがある。
なにも発想できないことだけは避ける。

何か事前に知識がないと作業できないという誤解をしている方がいる。
事前に説明しては、利用者が事前に知識がなくて操作間違いする可能性を分析できない。

どういう人が、何にどう誤解する可能性があるかは、作業そのものに対する誤解と同様排除しない方がよい。



## 班作業

３人で班を構成する。
主催者側が２人いれば、その２人が入るか入らないかで全部の班が３人にできる。

洗い出した項目の数が少ない人から班で報告する。


## 全体報告


全体報告は、一番大事だと思った１項目だけ、各班から報告する。
ただし、他の班が全く同じ報告をした場合は、その次に大事だと思った項目を報告する。
すこしでも、条件が違えば、その違いを報告するとよい。

##よかったこと
11



## わかったこと

事前準備として参加者にお知らせしていないと、迷うことが多くなる。

迷う状態で発想してもらいたいことを、参加者には知らせない方がよいかもしれない。

いろいろ知らせてあると、その枠内での最適化をしようとして、普段の仕事同様、意味のないことに無駄に時間を使うことがある。

## わからなかったこと



# 展示

プログラマが知っているとよい色使い(安全色)とカラーユニバーサルデザイン
小川清(名古屋市工業研究所)
https://qiita.com/kaizen_nagoya/items/cb7eb3199b0b98904a35

## スライド
スライドを新たに数枚追加し、
Qiitaの中身をそのままスライドにしたものを利用した。



## 色弱模擬フィルタ「バリアントール」
http://www.variantor.com/jp/
variantor_photo_mini.jpg

かけてもらって、赤と緑のみえぐらいをスライドで確認してもらった

## 自己資料の改定
「ちょけねこたんじょうびのおくりもの」
の対応前、対応後の色を見てもらった。

## お願いしたこと
見え方のいろいろな方を、製品評価の際にお願いしたい。

## いただいた意見

赤と緑の錐体の反応範囲で近いことを知った。
錐体の数が３分の１づつじゃないことを知った。
赤が黒に近く見えることがあることを模擬フィルタで知った。
人によって見えかたが違うかもしれないことがあると知った。

音の認識で同じようなことが考えられないかを考えた。


# 文書履歴(document history)
ver. 0.01 初稿 20190928
ver. 0.04 URL追記　20230228

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

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

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

Please press the like icon 💚　and follow me for your happy life.
Bootstrap2.2.1をIE6で動くようにしてくれたbsieを使ってみた

* http://ddouble.github.io/bsie/
* https://github.com/ddouble/bsie

```sh
wget "https://github.com/ddouble/bsie/archive/v1.05-bs2.2.1.tar.gz"

tar xzf "v1.05-bs2.2.1.tar.gz"
```

* [Base · Bootstrap](https://getbootstrap.com/2.2.1/base-css.html)
* 対応していない機能もあるため、同梱されているサンプルソースを確認。

```html:サンプル.html
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>

    <script src="bsie/js/jquery-1.7.2.min.js"></script>

    <!-- Le styles -->
    <link rel="stylesheet" type="text/css" href="bsie/bootstrap/css/bootstrap.css">

    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="bsie/bootstrap/css/bootstrap-ie6.css">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="bsie/bootstrap/css/ie.css">
    <![endif]-->

  </head>
  <body>

    <div class="alert">
      <strong>Warning!</strong> Best check yo self, you’re not looking too good.
    </div>

  </body>
</html>
```

```php:htmlファイル一覧のリンク集
<?php
$src = "";
foreach (glob("*.html") as $filename) {
    $src .= sprintf("<li><a href='%s' target='%s' />%s</a>"
                    , $filename
                    , $filename
                    , $filename
                   );
}

echo $src;
```
ReactNativeでUnable to resolve module expo from ~が出た

ある日、いつものように、ReactNativeでプロジェクトを作って
run-iosで実行しようとしたところ、こんなエラーが出てしまった。

```
Unable to resolve module `expo` from `/XXXX/YYYYYYYY/reactNative/nearToilet/App.js`: Module `expo` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
```

#試したこと

エラーが出ているプロジェクトを
rm -rf ***
で削除したが、状況変わらず。

エラーに書いてある
To resolve try the following:
の下に書いてあるコマンドを一通り試したが、効果はなかったようだ。

##状況が変わった？！
run-iosで開いていたターミナルを閉じたら、エラーが変わった。

```
No bundle URL present.

Make sure you're running a packager server or have included a .jsbundle file in your application bundle.
```


こちらの記事が参考になった
https://qiita.com/kondoakio/items/8b5ef1d1abe2b016dc9e

記事の通りにキャッシュを削除するコマンド

```
./node_modules/react-native/scripts/packager.sh --reset-cache
```

するとこんなのが、出現するので少し待つ

```
┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
   /Users/tnatsume/reactNative_new/newsmyLocation 

warning: the transform cache was reset.
Loading dependency graph, done.
```


んで、もう一回

```
react-native run-ios
```
を打ったら、無事にプロジェクトを表示させることができた✌️
PythonでExcelのフィルタリング結果を別ブックに保存する

#背景
Excelファイルでフィルタリングした結果を別のExcelとして保存していくプログラムを、VBAで作成しようとしたところあまりのコードの長さにうんざり。

#目的
PythonのPandasを利用すると簡単に書けそうだったのでやってみた。

#xlwt, openpyxlのインストール
`to_excel()`というライブラリを使用する。
xlwt, openpyxlがインストールされていなければインストールしておく。

```
$ pip install xlwt
$ pip install openpyxl
```
#インポート
```
#Excelファイルをフィルタリングした結果をExcelファイルに保存する
import pandas as pd
import os
```

#編集したいExcelファイルのディレクトリやら名前やら
```
dir_path = './jukosha' #編集したいExcelファイルのディレクトリ
file_name = 'jukosha.xlsx' #ファイル名
file_path = os.path.join(dir_path,file_name) #ファイルのパスを作成
sheetname = '所属' #編集したいシート名
```

#Pandasでフィルタリング結果を抽出し、保存する
```
df_shozoku = pd.read_excel(file_path, sheet_name=sheetname)
df_taisho_all = df_shozoku[df_shozoku['対象者']=="〇"] #対象者をフィルタリング
df_bumon = df_taisho_all['部門コード名'].unique() #一意な部門コード名

#フィルタリングして別ファイルに保存していく
for i in range(len(df_bumon)):
    bumon_codename = df_bumon[i]
    df=df_taisho_all[df_taisho_all['部門コード名']==bumon_codename]
    file_name2 = bumon_codename + '.xlsx'
    file_path2 = os.path.join(dir_path,file_name2)
    df.to_excel(file_path2, sheet_name=bumon_codename)
```
言語処理100本ノックやってみる　20

#20. JSONデータの読み込み
Wikipedia記事のJSONファイルを読み込み，「イギリス」に関する記事本文を表示せよ．問題21-29では，ここで抽出した記事本文に対して実行せよ．

**JSONファイル**とは**キー**と**値**がセットになった配列のこと
https://www.sejuku.net/blog/79079


```py
import gzip
import json
fname = 'jawiki-country.json.gz'

with gzip.open(fname, 'rt') as data_file:
    for line in data_file:
        data_json = json.loads(line)
        if data_json['title'] == 'イギリス':#{"title":"イギリス"
            print(data_json['text'])#{"text":"~~~~~~"
            break
```
出力結果一部
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475270/afd06825-9d2b-10b1-8a9a-248b075bb3a7.png)

#参考記事
##①jsonファイルの扱い方とは？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475270/735336d7-0be2-3f3c-1aea-952ec600e0e6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475270/a680ac23-da4b-aec7-4f2f-ee59a85ffd43.png)
https://pg-chain.com/python-open-json
##②モジュールgzipとは？
**gzip形式のファイルを読み書きして、データを自動的に圧縮または展開することが出来る**
UTF-8で書かれたpropertiesファイルをGradleでnative2asciiする

Windows環境でUTF-8で書かれたプロパティファイルをGradleでnative2asciiしたい。
Java9以降はpropertiesファイルはUTF-8で書けるのだけど、それ以前の環境向け。

## 結論

processReourcesのfilteringCharsetをUTF-8で指定して、filesMatchingでpropertiesファイルを指定する。


```build.gradle
plugins {
  id: 'java'
}

tasks.withType(ProcessResources){
  filteringCharset = 'UTF-8'
  filesMatching('**/*.properties') {
     filter(org.apache.tools.ant.filters.EscapeUnicode)
  }
}
```

filteringCharsetはCopySpecで定義されていて、filterの時に使用する文字コードを指定できる。
antタスクのnative2asciiやJVMオプションの-Dfile.encodingを指定する例が多いがたぶんこちらが正攻法。


## 確認

下記のようなプロパティファイルをSJIS(MS932), UTF-8の両方で用意しておく

```messages.properties
hello=こんにちは
```


## filteringCharsetを指定しない場合

```diff
--- build/resources/main/sjis/messages.properties       2019-09-06 11:56:08.127830500 +0900
+++ build/resources/main/utf8/messages.properties       2019-09-06 11:56:08.138833400 +0900
@@ -1,2 +1,2 @@
-# encoding: sjis
-hello=\u3053\u3093\u306b\u3061\u306f
+# encoding: utf-8
+hello=\u7e3a\u8599\uff53\u7e3a\uff6b\u7e3a\uff61\u7e3a\uff6f
\ No newline at end of fil
```

SJISのほうがうまくUnicodeエスケープされている。
これはfilteringCharsetは既定ではJVMのシステムプロパティのfile.encodingを使用するため

## filteringCharsetを指定した場合

```diff
--- build/resources/main/sjis/messages.properties       2019-09-06 11:34:18.501661300 +0900
+++ build/resources/main/utf8/messages.properties       2019-09-06 11:34:18.513667200 +0900
@@ -1,2 +1,2 @@
-# encoding: sjis
-hello=\ufffd\ufffd\ufffd\ufffd\u0242\ufffd\ufffd\ufffd
+# encoding: utf-8
+hello=\u3053\u3093\u306b\u3061\u306f
\ No newline at end of file
```

UTF-8のほうがうまくUnicodeエスケープされている

## 所感

ソースコードもリソースファイル類も実際はUTF-8でしかかかないから、javaのコンベンションプロパティで、このあたりのcharsetを全部UTF-8にしてもよいよね。

## See

- https://issues.gradle.org/browse/GRADLE-1267
- https://stackoverflow.com/questions/32543355/set-encoding-for-filter-call-in-gradle-copy-task
WebView利用時によく利用するJavaScriptメモ

ユーザーエージェントの取得

```
let js = "navigator.userAgent"
```

URLの取得

```
let js = "document.URL"
```

タイトルの取得

```
let js = "document.title"
```

アンカーを指定してWebView内で画面遷移

```
let anchor = "#start"
let js = "window.location.hash = \"\(anchor)\""
```

ズームの禁止

```
let js = "var meta = document.createElement('meta');" + "meta.name = 'viewport';" + "meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';" + "var head = document.getElementsByTagName('head')[0];" + "head.appendChild(meta);"
```

ローカルストレージクリア

```
let js = "localStorage.clear();"
```

ユーザーのドラッグした、選択範囲の取得

```
let js = "window.getSelection().toString()"
```

ロングタップによるActionSheetを表示させない

```
let js = "document.documentElement.style.webkitTouchCallout='none';"
```
c++のライブラリ関数備忘録

# c++ライブラリ関数備忘録

-`<iostream>`
　c++のコンソール入出力[^1]の際に使用する演算子、`>> <<`を使用するためのライブラリ。`>>`が入力を表し、`<<`が出力を表す。<br>
例えば"Hello World of C++."と出力したい時には

```c++
:Hello World of c++
#include <iostream>

int main(){
   std::cout<< "Hello World of c++." << std::end;
   return 0;
}
 
```
と入力する`std::`をスコープ解決演算子[^2]と呼ぶ。

- `<cstdio>` <br>
  c形式の入出力関数を扱うライブラリのヘッダ。`fopen`,`fclose`,`fgets`などが使えるようになる。
- `<cstdlib>`<br>
  cの標準ライブラリでの`<stdlib.h>`の機能を有するヘッダ。`malloc`,`free`などが使えるようになる。
- `<ctime>`<br>
  cの標準ライブラリでの`<time.h>`の機能を有するヘッダ。`clock`,`time`などの機能を使えるようになる。
- `<fstream>`<br>
  入出力ライブラリの一部のヘッダ。
- `<sstream>`<br>
  入出力ライブラリの一部のヘッダ。
- `<algorithm>`<br>
 要素の範囲に対して、検索やソート、操作を行う関数を定義するライブラリ。<br>
指定範囲に対してデータの変更を行わない操作とデータの変更を行う操作がある。データの変更を行う操作はソート操作、ヒープ操作、順列操作などがある。
- `<vector>`<br>
 vector型の変数を扱うことができるようになるヘッダ。vector型の変数は、サイズが可変長である動的配列で、c++の中でも高速でメモリ効率がよく単純なクラスである。より詳しくは[次のリンク先][link-1]。
- `<cstring>`<br>
 c標準ライブラリでの`<string.h>`の機能を有するヘッダ。おもに文字列に対する操作の関数が入っている。`strcpy`,`strcat`,`strcmp`,`strlen`などが使えるようになる。
- `<cmath>`<br>
 数学に関する関数やマクロの機能を有するヘッダ。
- `<iomanip>`<br> 
 入出力に使用するフォーマットやマニピュレータ[^3]の機能を有するヘッダ。











[^1]:
[^2]:
[^3]: iostreamを使う値の中でも特別な機能を有するもの詳しくはhttps://docs.oracle.com/cd/E19957-01/805-7889/6j7duaij7/index.html
[link-1]:http://vivi.dyndns.org/tech/cpp/vector.html
[link-2]:
Gitリポジトリを移行する手順

# はじめに
自分がリポジトリを移行する際に行った手順をメモ程度に書いています．

# 手順
## 1. 新しいディレクトリを作成しそこに移動する
```
mkdir hoge
cd hoge
```
## 2. mirrorを使い元のリポジトリのURLをcloneしてくる
```
git clone --mirror <元のリポジトリのURL>
```
## 3. 移行する新しいリポジトリのURLをセットする
```
git remote set-url <移行先のリポジトリのURL>
```
## 4. ディレクトリ内の〇〇.gitに移動して新しいリポジトリにpush
```
ls               // 〇〇.gitというのが表示されると思う(.gitの場合もある)
cd 〇〇.git　     // lsで表示された〇〇.gitに移動する
git push --mirror <移行先のリポジトリのURL>
```

# まとめ
自分はこれでうまくいったので参考にでもしていただけると嬉しいです．

# 参考
[Gitレポジトリを移行する方法](https://qiita.com/tanacasino/items/901723e3463bac38f40e)
Amazon Linux2でpython3を使えるようにする

amazon linux2にはデフォルトでpython3が入っていません。
なので以下手順をメモ

#### python3とboto3をインストール
```bash
sudo yum install python3
curl -O https://bootstrap.pypa.io/get-pip.py
python3 get-pip.py --user
pip install boto3 --user
```

#### pythonのデフォルトにする場合
```bash
vi .bash_profile
    alias python=python3
source .bash_profile
```
Apex Specialist Super Badge 復習[Challenge 6]

# 要件

* WarehouseSyncScheduleクラスのカバレッジを100%にする。

記載はないが、`WarehouseSyncSchedule`が呼び出す`WarehouseCalloutService`は外部にコールアウトするのでMockをセットしておく。

# Schedulableクラスのテスト
* どんな日時を指定しても、テスト内では`Test.stopTest()`が呼び出されたタイミングで即時実行される。
    * CRON式が適正である必要はある(適当な数字を入れるとテストに失敗する)

参考
 [Apex スケジューラを使用したジョブのスケジュール 単元 | Salesforce Trailhead](https://trailhead.salesforce.com/ja/content/learn/modules/asynchronous_apex/async_apex_scheduled#Tdxn4tBK-heading7)

<details><summary>コード</summary><div>

```java
@isTest public class WarehouseSyncScheduleTest {
    public static String CRON_EXP = '0 0 13 * * ? 2022';
    @isTest static void testWarehouseSyncSchedule(){
        Test.setMock(HttpCalloutMock.class,new WarehouseCalloutServiceMock());
        Test.startTest();
        String jobId=System.schedule('test job', CRON_EXP, new WarehouseSyncSchedule());
        Test.stopTest();
    }
}
```
</div></details>
郵便番号データを #PowerBI に活用しよう

# はじめに

@yugoes1021 さんの
[アンケートを即可視化！～MS Forms ⇒ MS Flow ⇒ Power BI～](https://www.slideshare.net/yugoes1021/ms-forms-ms-flow-power-bi-83167435?ref=https://power-platform.connpass.com/event/142607/presentation/)
というスライドにある、リアルタイムアンケートを作るにあたり
Microsoft Formsで都道府県を選ばせてもよかったんですが
郵便番号入れたら、自動的に住所がある程度わかるようにしたら
楽になるんじゃないかなと思いまして、このようなことを思いつきました。

# 郵便番号データ
こちらにあります
[郵便番号データダウンロード - 日本郵便](https://www.post.japanpost.jp/zipcode/download.html)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/e2edbc89-a84d-8fd7-be11-c8ad5052b88e.png)

とりあえず、全国一括版をダウンロードしておきましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/85269235-6682-956d-cb7d-a17868233cbb.png)

っで、ダウンロードして、解凍してできたCSVをPower BIで読み込ませるとこんな感じになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/dd2212c7-33ec-2913-67d0-a3197f5973a5.png)

このデータ、実はヘッダーがないので、それぞれが何のデータかよくわかりません💦
あと、郵便番号らしきものも6桁しかないです。
生データでみるとこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/dcefb3be-d069-57d0-c7c4-9e2735050faa.png)

なるほど、数値型って認識されて、先頭０が消えちゃってる感じですねぇ。

データ変換が必要ですね！

# データ変換
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/538b8a6a-4466-6810-7694-571ef3e2caa5.png)
データの変換をクリックします。

## 先頭0の含まれるカラムをテキスト型へ
とりあえず、Column1~3はテキスト型にしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/93628659-4b7a-b05d-8c86-2b049fa6dbf0.png)

## ヘッダーの設定
今のヘッダー名だとよくわかりませんので、ヘッダー名を付記していきます。
各データの意味はこちらに記載されています。

https://www.post.japanpost.jp/zipcode/dl/readme.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/4924f4ae-e870-fbc3-6073-009bda460115.png)

とりあえず必要そうなカラムのみヘッダー名を設定していきましょうか。

一つ一つカラム選んで修正してもいいのですが
私はめんどくさいの嫌いなので、Power Query書きます。

```
= Table.RenameColumns(
	名前変更,{
		{"Column1", "地方公共団体コード"},
		{"Column2", "旧郵便番号"},
		{"Column3", "郵便番号"},
		{"Column4", "都道府県‗ｶﾅ"},
		{"Column5", "市区町村‗ｶﾅ"},
		{"Column6", "町域‗ｶﾅ"},
		{"Column7", "都道府県"},
		{"Column8", "市区町村"},
		{"Column9", "町域"}
	}
)
```

はい、無事きれいな名前になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/59d1e69e-2a89-f60c-6c01-bf6b7719eac1.png)

## 不要なカラムの削除
Column10以降はフラグっぽく、特に必要性を感じないので削除しちゃいましょう、

```
= Table.RemoveColumns(
	#"名前が変更された列 ",{
		"Column10",
		"Column11",
		"Column12",
		"Column13",
		"Column14",
		"Column15"
	}
)
```

さらにきれいになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/2e5da3d0-f8d7-2330-66bd-3bdc06459829.png)

閉じて適用をしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/9ab8bcf9-10ad-7ca1-9730-66008c2aa91e.png)

きちんと反映することができました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/6864ca06-c25f-93d0-3164-ab47958400d2.png)


活用例だしたっかったんですが、タイムアップ(´･ω･`)
後ほど追加します！
BrowserSync 備忘録

監視したいディレクトリ内に、browser-syncのインストール

 `sudo npm install -g browser-sync`

上ディレクトリ内で、browser-syncの起動

`browser-sync start --server --files *`

`http://localhost:3000/`にアクセスする

`controll + C`で、browser-sync終了
Material-ui React Component を WebdriverIO react$ で取得してみた（その２）

[前回](https://qiita.com/r315dr/items/356c51442b42d6eeb3f1)の続き。

いろいろと調べ、`resq`で既に取れてないなーとなったのでIssueをあげてみた。

回答としては、HOCを選択するときはラップも含めてセレクターとしてくれ。とのこと。詳細は以下。
https://github.com/baruchvlz/resq/issues/40

無事使えて良かった。
対応してくれた[baruchvlz](https://github.com/baruchvlz)氏に感謝。
WebDriverIO側のIssueも解決すれば使いやすくなる。
一日のまとめ　9/6(金)

① HTML,CSS 

ググったこと
・cursorプロパディ..マウスカーソルの形を指定する。
・auto(値)..初期値、要素の値が自動的に決められる。
・％..要素の幅は可変になる、親要素次第でサイズが変化する。
・last-child..擬似クラスの一つ、CSSで用いる。意味は要素の最後のみにCSSを適用させる。
・id属性..要素に名前を割り当てる。idは文章中で一度しか使えない。classは何度も使ってもいい。id属性を使う理由は分かりやすさ、classと使い分けることで、メインのレイアウト部分とその他で分類するため。

```
<!DOCTYPE HTML>
<html lang ="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>My App</title>
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  <link rel ="stylesheet" href ="style.css">

  </head>
  <body>
    <header>
      <div class ="container">
        <i id ="open_menu" class="fas fa-bars"></i>
        <nav id="menu">
          <i id ="close_menu" class="fal fa-times-circle"></i>
          <ui>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Menu</a></li>

          </ui>

        </nav>
        <h1>My App</h1>

        </div>
      </header>
```
SSH Keysを作ってGitHubへ登録

よく忘れて、その度に調べる羽目になるので、記事にします。  
## ssh-keygen
```
$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
```

保存する場所を聞かれます。  

```
Enter file in which to save the key (/Users/user_name/.ssh/id_rsa):
```

適当にディレクトリ作ってサービスごと(githubとかbitbucketとか)に保存するのがベターな気がします。  

```
$ mkdir -p ~/.ssh/github`をした後に、~/.ssh/github/id_rsaと入力しましょう。
```

パスワードを聞かれます。設定しておきましょう。
  
```
Enter passphrase (empty for no passphrase):
```

## githubやbitbucketに登録
```
pbcopy < ~/.ssh/github/id_rsa.pub
```
公開鍵を登録しましょう。  

## vim config
以下のような感じでconfigファイルを書いておきましょう。役立ちます。  

```
$ vi ~/.ssh/config
Host github.com
    User git
    Port 22
    HostName github.com
    identityFile ~/.ssh/github/id_rsa
    TCPKeepAlive yes
    IdentitiesOnly yes
    ForwardAgent yes
```

どう役立つかというと、こんな風に書きたくないから設定しておこうって感じです。  

```
$ ssh ユーザー名@ホスト名 -i ~/.ssh/鍵の名前 -p ポート番号
```

もう少し詳しく知りたい方はこちらの記事を読むといいです。  
https://qiita.com/passol78/items/2ad123e39efeb1a5286b  

## ssh-add
いちいちパスワードを入力したくないので、ssh-agentに作った秘密鍵を登録しておきましょう。  

```
$ ssh-add -K ~/.ssh/github/id_rsa
```  

登録できたか確認。  

```
$ ssh-add -l
```

最後に接続できるか試しましょう。  

```
$ ssh github.com
```
Railsアプリケーションの設定について

普段Railsアプリケーションの設定、特にconfigディレクトリ内のことなどあまり理解や意識せずにRailsを触っているので、もう少しRailsアプリケーションの設定周りに関して理解出来るように調べます。

Railsには初期化コードの置き場所が４箇所あり、

 - config/application.rb
 - 環境に応じた設定ファイル
 - イニシャライザ
 - アフターイニシャライザ

### config/application.rb

Railsを実行する前に処理を実行したい場合はapplication.rb内のrequire 'rails/all'より前に書きます。

### 環境に応じた設定ファイル

２つ目の環境に応じた設定ファイルとはデフォルトでdevelop、test、productionの３つの環境がデフォルトで用意されており、他の環境を追加したい場合は、

database.ymlにデータベースの情報を追記、secrets.ymlに環境変数でシークレットキーを設定、environmentsディレクトリ下にstaging.rbなどを作成する。

### イニシャライザ
Railsは、フレームワークの読み込みとすべてのgemの読み込みが完了してから、イニシャライザの読み込みを開始します。イニシャライザとは、アプリケーションのconfig/initializersディレクトリに保存されるRubyファイルのことです。たとえば各部分のオプション設定をイニシャライザに保存しておき、フレームワークとgemがすべて読み込まれた後に適用することができます。


### アフターイニシャライザ
アプリケーションの初期化が終わり、かつconfig/initializers以下のイニシャライザが実行された後に実行されます。

## 最後に
個人的には「config/initializersディレクトリ内のファイルがどのように読み込まれるか？」「config/initializersディレクトリ以外の設定ファイルがどのタイミングで読み込まれるのか」など、厳密に調べたかったのですが、うまく調べられず詳細なことが理解出来ていないので分かったことがあり次第、随時更新したいです。
更新！！Laravel6/7 (laravel/ui)でのLogin機能の実装方法〜MyMemo


##Laravle6.x/7.xのログイン実装コマンドの違いを見る
みなさんこんにちは 
[ジーズアカデミー学校長 山崎ですm(_ _)m](https://gsacademy.jp/mentor/)
今回はLaravel7にアップデートされLogin画面作成(laravel/ui)を前バージョン同様で使用したい場合
の方法をMemoしておきます（初めてLaravel触る人はこっちが良いかも、、敷居が低い）。

**◆「Laravel8/jetstreamの人はこちらのリンク」**
https://qiita.com/daisu_yamazaki/items/607ea579a374c4187562

**◆【Laravel8.x のLOGIN(Breaze)動画も用意してます！】**
https://youtu.be/XXXQOYnsCBk





###前提条件/検証環境

 - LaravelでCRUDを作成した経験がある人
 - Laravelの基本を理解している人
 - 記事内容的には、Laravel6のAuthを使う場合の***自分メモ***です。
 - *Laravel6/7=PHP 7.2.x(確認した環境)*
 - **EC2の場合：t2.small （メモリ２G以上必要 "laravel/ui"に必要なため,t2.microだとコケます）**
 - *Node.js インストール済みであること*


###【 Laravel6/7でのログイン(laravel/ui)画面作成】
Laravel5.xでは「php artisan make:auth」コマンドで簡単にLOGIN機能を作成できていました。
※Laravel6.x以降 php artisann make:auth コマンドは無くなりました。


---


#### Laravel6 / Laravel7 ログイン画面作成
#####１. laravel/uiをインストール
**【要注意】**Laravel7 が出たタイミング・・・だと思いますが、
laravel/ui コマンドにバージョンを付けないとエラーがでるようになりました！！！ 
6 or 7に合わせて使い分けてください！！

```cmd:ターミナル

#Laravel6.x 公式ではこちらに変わってました。
composer require laravel/ui:^1.0 --dev

#laravel7の場合
composer require laravel/ui:^2.4

```
※Laravel6.x 公式
https://laravel.com/docs/6.x/frontend#introduction
※Laravel7.x 公式
https://laravel.com/docs/7.x/frontend#introduction


２. LOGIN機能＆テーブル作成

```cmd:ターミナル
php artisan ui vue --auth

php artisan migrate
```

３. FrontEndに必要なPackageをインストール
 （Node/npmの使用が必要）

```cmd:ターミナル
npm install
```

４. CSS/JSを作成ビルド

```cmd:ターミナル
npm run dev
```




####これでLaravel5/6/7どうようのLOGIN機能が実装できました！
Youtube動画としてもあるので、どうぞ！！

https://youtu.be/FKxqjoJUKh4



#◇「動かして学ぶ！Laravel開発入門(翔泳社)」本だしました。
https://www.amazon.co.jp/dp/B08TBF3FQS/


#◇「Laravel DB.com」 をやってます
Laravelをテーブル設計するだけでMigrationが作成できるツール
https://qiita.com/daisu_yamazaki/items/4e13ac43c20bcdedeb40
※是非こちらも見てください～。


#◇今回のLogin機能：参考「Laravel ドキュメント」
【ver6.x】https://laravel.com/docs/7.x/frontend#introduction
【ver7.x】https://laravel.com/docs/6.x/frontend#introduction

# Youtubeチャンネルも宜しくお願いいたします
[「遅咲きエンジニア」MicrosoftMVP 山崎](https://www.youtube.com/channel/UCmMFmjhf1BXB1tlLcbkVRrg)
https://www.youtube.com/channel/UCmMFmjhf1BXB1tlLcbkVRrg


以上
django　ページの作成方法(関数)

#環境
win10
Python3.6
django2.2.4


今回はdjango上でhoge.htmlを作成する方法について備忘録を含めて記載します。

#１アプリケーションフォルダ内のurls.py
```
    path('hoge/', views.hoge, name='hoge'),
```
#２views.py(function ver.)
```
def hoge(request):
    context = {
        'fieldname': 'hoge???',
    }
    return render(request, 'apprication/hoge.html', context)
```
そのままで恐縮ですがappricationにはアプリケーションフォルダに書かれた名前を入力します。

#３hoge.html
```
{% extends 'apprication/base.html' %}
{% block main %}
{% load static %}
　　<p>fieldname: {{ fieldname }}</p>
{% endblock %}
```
{% block main %}はbase.htmlを参考に好きな名前に変更してください。なお以下フォルダの中にhoge.htmlを作成してください。

```
\project\apprication\templates\apprication
　↑　このprojectフォルダにはmanage.pyが入っているイメージ
```


#４URLを叩く
```
http://127.0.0.1:8000/hoge
```
hoge???が表示されるとページ追加終了です。なお様々なwebで今回の記事よりも遥かにわかりやすく、また丁寧に解説されている方が沢山いらっしゃりますのでそちらもよかったら参考にしてみてください。

参考url
https://qiita.com/chokosuki4400/items/26d9843854dcdb304f8a
https://www.python-izm.com/web/django/django_first_process_part1/
https://programming-beginner-zeroichi.jp/articles/130
https://y-hilite.com/3233/
https://qiita.com/taijijiji/items/343fb56ab94eee28c401
plunkerでtensorflow.js その8

#概要

plunkerでtensorflow.jsやってみた。
xorやってみた。
tf.variableで書いてみた。
weight、biasを取り出した。
スクラッチで、推論してみた。

#結果


```
1, 0 = 0.9831985157008993
0, 1 = 0.9836318400047009
1, 1 = 0.015668832466682565
0, 0 = 0.009060141614711496
```

#成果物

https://embed.plnkr.co/HSjPfSTH70Mr0jhJgsaV/

以上。