OmniAICreator/Qiita-1.07M huggingface dataset:
PHPでPDFを出力する

今回使うライブラリは、既存のPDF文書をテンプレートとして引用できるので、静的なレイアウト作成や細かい調整などはwordやExcelで行うことができます。
動的なデータに関しては、座標指定で配置可能です:grinning:

##ライブラリとフォントをダウンロードする
- [<span style="color: #00cccc">TCPDF</span>](https://github.com/tecnickcom/tcpdf)<br>
PDFを作成して書き込みができるライブラリ
- [<span style="color: #00cccc">FPDI</span>](https://github.com/Setasign/FPDI)<br>
既存のPDFを読み込めるライブラリ
- [<span style="color: #00cccc">明朝フォント</span>](https://ipafont.ipa.go.jp/node193#jp)

それぞれ解凍して、任意の場所に配置してください。
（あとでパスを指定すればいいのでどこでもOK）

##実際のコード

```php
<?php

// 文字コードをUTF-8に
mb_internal_encoding("UTF-8");

// クラスをインポート
use setasign\Fpdi\TcpdfFpdi;

// TCPDFの読み込み
require_once('./TCPDF/tcpdf.php');
// FPDIの読み込み
require_once('./FPDI/src/autoload.php');

/*
IPA Font (IPA Fonts 4 fonts package)   IPAfont00303.zip
|--Readme   Readme_IPAfont00303.txt
|--IPA Font License Agreement v1.0   IPA_Font_License_Agreement_v1.0.txt
|--IPAGothic   ipag.ttf
|--IPAPGothic   ipagp.ttf
|--IPAMincho   ipam.ttf
|--IPAPMincho   ipamp.ttf
*/

// フォントの読み込み
$font_path = './TCPDF/fonts/ipam.ttf';

// フォントを適用
$font = new TCPDF_FONTS();
$fontR = $font->addTTFfont($font_path);

// PDFの読み込み
$base_pdf = './PDF/sample.pdf';

// 出力するPDFの初期設定
$pdf = new TcpdfFpdi('L', 'mm', 'A4');
$pdf->setPrintHeader( false );
$pdf->setPrintFooter( false );

// テンプレートPDFの読み込み
$pdf->setSourceFile($base_pdf);

//以下PDF---------------------------------------------------------------
//1ページ目--------------------------------------------------------------
$pdf->AddPage('P', 'A4');
$pdf->useTemplate($pdf->importPage(1));

$pdf->SetFont($fontR , '', 9,'',true);
$pdf->Text( 170 , 28  ,"Test");

//2ページ目--------------------------------------------------------------
$pdf->AddPage('P', 'A4');
$pdf->useTemplate($pdf->importPage(2));


```
アジャイルとウォーターフォールが作成する資料の違い

# はじめに
2019/06/01にインフラ勉強会というオンライン勉強会にて、[アジャイルを学ぼう](https://speakerdeck.com/hirotokirimaru/aziyairuwoxue-bou)という登壇しました。 

- [当時のイベントページ](https://wp.infra-workshop.tech/event/%E3%82%A2%E3%82%B8%E3%83%A3%E3%82%A4%E3%83%AB%E3%82%92%E5%AD%A6%E3%81%BC%E3%81%86/)
- [当時のイベント](https://www.youtube.com/watch?v=j32Ux254BjQ)


その後、登壇してからほぼ1年経過し、改めてアジャイルとウォーターフォールで作成しなければならない資料がどう違うのか、というのを残します。  

# 略歴
|経歴|経験年数|
|---|---|
|ウォーターフォール(2次受けSIer)|5年弱|
|アジャイル(エンジニア)|1年3カ月|

# まとめ
**そんなものはない。**  
**プロセスが変わっても、結局作らなければいけない資料は変わらない**

# なぜこんな記事を書いたのか
あえて、アジャイルとウォーターフォールの違いが無い点について残しておこうと思ったから。  
  
SIerとして働いてた頃は資料を残す分、そのたびに分析を深く行い、資料を作成する時間はかかっていましたが、総合的な速度はそれなりの速度を出せました。  
まぁ、資料作成するためのツールじゃないExcelで設計書を書かせようとするのは、擁護できないポイントですが…。
  
---

アジャイルだから、ということで資料を作成しないで良い。  
と思っていた自分だからこそ、今後アジャイルを経験する人への戒めとして、伝えるべきと強く考えてます。  
  
# 最後に
アジャイルのほうがプロセスとしては有力だと考えていますが、ウォーターフォールで行ってきたことは基本的に全てアジャイルでも行う必要があると考えてます。  
  
アジャイルに夢を見ている人に、ウォーターフォールとそこまで変わらないということが伝われば幸いです。

# 備考
## 筆者が作っておくべきと考えている資料
Qiitaに載せてない自分のブログですが、UML(資料)を軽視している人は参考になるかと思います。

- [UMLは覚えておくべき(概念編)](https://nainaistar.hatenablog.com/entry/2020/04/20/UML%E3%81%AF%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8F%E3%81%B9%E3%81%8D%28%E6%A6%82%E5%BF%B5%E7%B7%A8%29)
- [UMLは覚えておくべき(ユースケース記述編)](https://nainaistar.hatenablog.com/entry/2020/04/27/UML%E3%81%AF%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8F%E3%81%B9%E3%81%8D%28%E3%83%A6%E3%83%BC%E3%82%B9%E3%82%B1%E3%83%BC%E3%82%B9%E8%A8%98%E8%BF%B0%E7%B7%A8%29) 
- [UMLは覚えておくべき(クラス図編)](https://nainaistar.hatenablog.com/entry/2020/04/29/UML%E3%81%AF%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8F%E3%81%B9%E3%81%8D%28%E3%82%AF%E3%83%A9%E3%82%B9%E5%9B%B3%E7%B7%A8%29)
- [UMLは覚えておくべき(ステートマシン図))](https://nainaistar.hatenablog.com/entry/2020/04/29/UML%E3%81%AF%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8F%E3%81%B9%E3%81%8D%28%E3%82%B9%E3%83%86%E3%83%BC%E3%83%88%E3%83%9E%E3%82%B7%E3%83%B3%E5%9B%B3%29)
Spring Security ROLEの判断 うまくいかない時はhasRoleとhasAuthorityを理解する

# 詰まったところ
Spring Securityでパス毎に許可するROLEをセットして、動作確認すると想定している動きにならない。。
という形で自分がハマったのでメモ。


Roleを以下2つで設定

| ロール       |       
|:-----------------|
| ADMIN             |
| INSTRUCTOR           |


```java:うまくいかない例

    override fun configure(http: HttpSecurity) {

        //許可の設定
        http.authorizeRequests()
                .antMatchers("/").hasAnyRole("ADMIN","INSTRUCTOR")
                .anyRequest().authenticated()
```

```java:うまくいく例

    override fun configure(http: HttpSecurity) {

        //許可の設定
        http.authorizeRequests()
                .antMatchers("/").hasAnyAuthority("ADMIN","INSTRUCTOR")
                .anyRequest().authenticated()
```

## なぜか

hasRoleを使用した場合、引数で指定した文字列にプレフィックスとして"ROLE_"をつけて判断するため。
上記のうまくいかない例では、実際には"ROLE_ADMIN"とROLE_INSTRUCTOR"で判断される。
hasAuthorityは、引数の文字列をそのまま受け取る。

以下、参考にさせていただきました。
https://qiita.com/yokobonbon/items/7d729bd8085f3fb898bb
https://qiita.com/opengl-8080/items/032ed0fa27a239bdc1cc
DjangoのHTMLテンプレートその２

# はじめに

ここでは、djangoのHTMLテンプレートの継承などについて解説します。


# HTMLテンプレートの継承

`extends`を用いることで、ベースになるHTMLテンプレートファイルを継承することができます。
`{% block ブロック名 %}`とすることで書き換えるブロックを作ることができます。CSSやjavascriptのカスタムファイルの読み込みにも使えます。

```html:base.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
</head>
<body>
{% block content %}
{% endblock content %}
</body>
</html>

```

```html:sample.html
{% extends 'base.html' %}

{% block content %}

{% endblock content %}
```


# テンプレートの組み込み

`includes`を用いることで、HTMLファイルをページの一部として組み込むことができます。

```html:sidebar.html
<div class="sidebar">
<p>サイドバー</p>
</div>
```

```html:sample.html
{% extends 'base.html' %}

{% block content %}
<div class="main-content">
<p>メインコンテンツ</p>
</div>
{% includes 'sidebar.html' %}
{% endblock content %}
```


# まとめ

ここでは、djangoのHTMLテンプレートの応用について解説しました。
今後も随時内容を追加していきます。
MediaPipe の hand tracking を mac で 動かそうとしたら raised unknown C++ exception エラー

mediapipe を Android で動かそうと思いつつ、まずは mac でコケたので、そのエラー解消用のメモです。
うまくいけばこんな感じで動くはずです。

![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/ebef1385-59eb-71cf-568c-0649d261b671.gif)

# 概要
CamTwist をインストールしていることから、OS から見てデフォルトのカメラが CamTwist になっていて正常に動作していませんでした。mediapipe のプログラムにカメラを選択する ID を設定する箇所があるので、そこを変更することで正常に動作するようになります。

# 前提
* MacOS 10.14.6
* その他は基本[手順](https://github.com/google/mediapipe/blob/master/mediapipe/docs/install.md#installing-on-macos)に沿って最新を入れていった感じです

# エラー詳細
```
[ERROR:0] VIDEOIO(cvCreateCameraCapture_AVFoundation(index)): raised unknown C++ exception!


E0503 20:46:42.675187 472069568 demo_run_graph_main.cc:146] Failed to run the graph: ; capture.isOpened()(mediapipe/examples/desktop/demo_run_graph_main.cc:65)
```

# 解消方法
1. mediapipe/examples/desktop/demo_run_graph_main.cc を開く
2. こんな感じになっているところがあるので探して、

``` C++
  if (load_video) {
    capture.open(FLAGS_input_video_path);
  } else {
    capture.open(0);
  }
```

capture.open(0) の 0 を 1 に変更する。
3. 再びビルドして、実行する。

```
$ bazel build -c opt --define MEDIAPIPE_DISABLE_GPU=1 \ 
  mediapipe/examples/desktop/hand_tracking:hand_tracking_cpu
$ export GLOG_logtostderr=1
$ bazel-bin/mediapipe/examples/desktop/hand_tracking/hand_tracking_cpu \
  --calculator_graph_config_file=mediapipe/graphs/hand_tracking/hand_tracking_desktop_live.pbtxt
```

エラーが出ずにWebCameraの情報が表示されればOKなので、おしまい。
4. ↑でエラーが出た場合、２に戻り、今度は 1　を 2 に変更する。2 でもエラーが出たら、3・・・とエラーが出なくなるまで繰り返す。

# 参考
* インストールから、環境が正常になっているかを確認する hello_wolrd は[こちら](https://qiita.com/3attoC/items/b5bad7b2d54fa0bf013a)を参考にさせていただきました。
* `imagesnap -w 1 shot.png` を使うとデフォルトのカメラが何になっているか気付けるかもしれません。自分はこのコマンドで気がつくことができました。
    * ↑イメージ自体はコマンドを実行したディレクトリに出ます
* mp4 を利用することで、カメラの問題かどうかは切り離して考えるようになります。mac のデフォルトで動画撮影ができるので、手の動画を撮影して利用してみると良いかと思います。
    * `--input_video_path` というオプションをつけれます

```
bazel-bin/mediapipe/examples/desktop/hand_tracking/hand_tracking_cpu --calculator_graph_config_file=mediapipe/graphs/hand_tracking/hand_tracking_desktop_live.pbtxt --input_video_path=/tekitounapath/test.mp4
```
Node.jsでLINE Notifyに画像を送るサンプル #protoout


Node.jsのaxiosを使ってLINE Notifyに画像を送るサンプルです。
探してもあんまりなかったので残しておきます。

## 準備

```
npm init -y
npm i axios
```

axiosのインストールを忘れずに。

## コード

imageFullsizeとimageThumbnailの箇所に画像URLを指定すればOKです。
適宜利用したい画像に変更しましょう。

```app.js
const axios = require('axios');
const qs = require('querystring');

const LINE_NOTIFY_API_URL = 'https://notify-api.line.me/api/notify';

// GitHub Actions で実行する際に Secret 値 LINE_TOKEN を利用する
// 
// 実際には、GitHub Actions の
// run: LINE_TOKEN=${{secrets.LINE_TOKEN}} node action.js
// という書き方で渡されています
const LINE_NOTIFY_TOKEN = 'LINE Notifyのトークン';

let config = {
    url: LINE_NOTIFY_API_URL,
    method: 'post',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Bearer ' + LINE_NOTIFY_TOKEN
    },
    data: qs.stringify({
      imageFullsize: `https://images.dog.ceo/breeds/airedale/n02096051_3443.jpg`,
      imageThumbnail: `https://images.dog.ceo/breeds/airedale/n02096051_3443.jpg`,
      message: 'ProtoOut Studioからの通知だよー！ https://images.dog.ceo/breeds/airedale/n02096051_3443.jpg',
    })
}

async function getRequest() {

  ////// LINE Notify に送る ////////////////////////

  try {
    const responseLINENotify = await axios.request(config);
    console.log(responseLINENotify.data);
  } catch (error) {
    console.error(error);
  }

}

// getRequest を呼び出してデータを読み込む
getRequest();
```

## 実行

```bash
node app.js
```

## 結果

こんな感じで送られてきます。

今回の画像は`https://dog.ceo/api/breeds/image/random`から取ってきてます。

> ![スクリーンショット 2020-05-03 21.07.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/518b915b-e493-da93-42c6-0040aaab7437.png "スクリーンショット 2020-05-03 21.07.20.png")

## 応用: APIで画像を取得してLINE Notifyへ

[すぐにAPIを体験！public-apis 100以上のJavaScript axiosサンプル集
](https://protoout.studio/posts/public-apis-api-get#Animals)からRandomFoxのAPIを使って狐の画像を取ってきてLINE Notifyに送るのを@kisaichi07さんが書いてました。

この記事を参考にしてみましょう → [GitHub Actionsから定期的にLINE Notifyで１０分に一回狐の画像を送ってみた](https://qiita.com/kisaichi07/items/24395811de50b0653ee5)
AppSyncをクライアントで動かす（query編）

# はじめに

今日は[GWアドベントカレンダー](https://gw-advent.9wick.com/calendars/2020/89)５日目です。[昨日](https://qiita.com/ufoo68/items/73abb40716ebd4999c27)は事前準備をやったので今日はGraphQLの実装を進めます。今回は`allItem`のクエリを実行してデータを取得します。
また、GraphQLのサーバーですがCognito認証があると実装が面倒だったので[２日目の内容](https://qiita.com/ufoo68/items/512b74156789a128bc95)のものに一旦戻しました（目的はGraphQLのクエリを叩くことだったので）

# 必要パッケージのインストール

Amplifyのためのパッケージをインストールします。

```bash
yarn add aws-amplify-react aws-amplify
```

また今回はFooks(`useState()`)でクエリを叩きたいので、[availity](https://availity.github.io/)というFooksで簡単に非同期処理が扱えるパッケージをインストールします。

```
yarn add @availity/api-axios @availity/api-core @availity/hooks
```

# 実装

見せるほどの内容ではありませんが、単純に`useState()`で`allItem`のクエリを叩く処理はこんな感じになりました。

```typescript
import React, { useState } from 'react'
import { useEffectAsync } from '@availity/hooks'
import { API, graphqlOperation } from 'aws-amplify'
import { allItem } from './graphql/queries'

const App = () => {
  const [item, setItem] = useState([{
    id: '',
    data: '',
  }])
  useEffectAsync(async () => {
    const result = await API.graphql(graphqlOperation(allItem))
    setItem(result.data.allItem)
  })
  return (
    <ul>
      {item.map(i =>
        <li>
          {i.data}
        </li>
      )}
    </ul>
  )
}

export default App
```

前回の`codegen`で`./graphql`というフォルダと、`query`・`mutation`それぞれのクエリ用のファイルが自動で生成されたのでそれを用います。
`API.graphql()`で返ってきた結果は`data`というフィールドにネストされた形でいつもどおりのクエリ実行結果が返ってくるみたいですね。

# さいごに

AmplifyとAppSyncを用いると１行のコードでデータのフェッチが実装できてしまうようですね。バックエンドについてはロジックの実装を一切行っていないので爆速でアプリがつくれてしまうのがこの組み合わせの利点ですね。今回はここまでで明日は`mutation`を実装していきます。ではまた！
Gmailの指定objectメールをLINEでうけとろう！

##目的

Gmailで受信されたメールに対し
・指定の題目
・指定の期日
で合致したメールについて
・設定したメッセージ
・日時
・メールの題目
をLINEで通知してもらおう！

## やり方

LINE Nortify (https://notify-bot.line.me/ja/) と Google Apps Scriptに関してはググって！（かんたん！）

## コード（これを書き残したかっただけ）

```js

const lineToken = "xxxxxxxxxxx"; //LINE token"
const getInterval = 5; //現在時間より何分前か指定する
const query = "[Error] xxxxxxx"; //subjectを指定する

const sendMailBody = "subject指定されたメールが受信されました！！"; //通知一行目

function sendLine(Me){
  const payload = {'message' :   Me};
  const options ={
    "method"  : "post",
    "payload" : payload,
    "headers" : {"Authorization" : "Bearer "+ lineToken}  
  };
  UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}

function fetchContantMail() {
  const nowTime= Math.floor(new Date().getTime() / 1000) ;
  const timeTerm = nowTime - ((60 * getIterval) + 3); 
  
  //条件指定
  const strTerms = 'after:'+ timeTerm +' '+ query;
  
  //結果取得
  const myThreads = GmailApp.search(strTerms);
  const myMsgs = GmailApp.getMessagesForThreads(myThreads);
  var getMessages = [];
  for(var i = 0; i < myMsgs.length;i++){
    getMessages[i] = ": " + sendMailBody
    + "\n[date]: " + myMsgs[i].slice(-1)[0].getDate()
    // + "\n[from]" + myMsgs[i].slice(-1)[0].getFrom()　//src及びdist
    + "\n[sbject]: " + myMsgs[i].slice(-1)[0].getSubject();
    // + "\n\n[Message]\n"+ myMsgs[i].slice(-1)[0].getPlainBody(); //本文用
  }
  return getMessages;
}

function main() {
  var newMails = fetchContantMail()
  if(newMails.length > 0){
    for(var i = newMails.length -1; i >= 0; i--){
      sendLine(newMails[i]);
    }
  }
  else {
    console.log('Not matching mails');
  }
}
```

トリガー(イベント）はGAS編集画面にて、編集タブ -> 現在のプロジェクトのトリガ でよしなに設定して！

## 今困ってること
LineのグループってURLでは招待はできないことに設定後気がついた。
一度友達にならないと招待できないみたい。恥ずかしがり屋のひきこもりなのでわからなかった、悲しい。
スマホと洗濯バサミでWebカメラのない人を救いたい

# DroidCamをインストール

https://yamanashisyuukyaku.com/useful-info/droidcam-webcamera/

# 洗濯バサミでスマホを固定する！

![IMG_20200503_205700.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/9997da4b-6b38-9cf9-a636-9bce084b9939.jpeg)

モニターに指したり、ジャンプの上に置いたりして調節する。

良いビデオ会議ライフを
備忘録： GNU m4 (Ver.1.4.18) 付属 vasnprintf へのパッチ

macOS 10.15 (Catalina) + Xcode 11 で GNU m4 (Ver.1.4.18) をビルドして、出来た m4 を実行すると、abort します。

macOS のコンソールでクラッシュ レポートを見ると

```
Thread 0 Crashed:: Dispatch queue: com.apple.main-thread
0   libsystem_kernel.dylib        	0x00007fff7058ead6 __abort_with_payload + 10
1   libsystem_kernel.dylib        	0x00007fff705903df abort_with_payload_wrapper_internal + 80
2   libsystem_kernel.dylib        	0x00007fff70590411 abort_with_payload + 9
3   libsystem_c.dylib             	0x00007fff704fb80b _os_crash_fmt.cold.1 + 55
4   libsystem_c.dylib             	0x00007fff7048ee62 _os_crash_fmt + 154
5   libsystem_c.dylib             	0x00007fff704c267c __vfprintf + 17134
6   libsystem_c.dylib             	0x00007fff704e5ad3 __v2printf + 475
7   libsystem_c.dylib             	0x00007fff704cbee7 _vsnprintf + 417
8   libsystem_c.dylib             	0x00007fff704cbf46 vsnprintf_l + 41
9   libsystem_c.dylib             	0x00007fff704bcf25 snprintf + 156
10  m4                            	0x0000000106e1e7ca vasnprintf + 1738
11  m4                            	0x0000000106e1ef8f rpl_vasprintf + 31
12  m4                            	0x0000000106e07191 xvasprintf + 225 (xvasprintf.c:102)
13  m4                            	0x0000000106e07310 xasprintf + 144
14  m4                            	0x0000000106df0df8 main + 88 (m4.c:398)
15  libdyld.dylib                 	0x00007fff7042dcc9 start + 1
```

vasnprintf から呼び出した、標準の snprintf が abort を発行しています。

よくよく調べると、vasnprintf が "%n" を snprintf に喰わせていました。

GNU texinfo (Ver.6.7) にも同様のソース コードが入っていて問題がなかった(既に対応済みとみられる)ので差分から最小限と思えるパッチ(２カ所)を当てました。
ROSでVelodyne LiDARを運用する際の設定

#Velodyne使用時に困ってたこと

[Velodyne LiDARのROSドライバー](https://github.com/ros-drivers/velodyne)を使用しVelodyne LiDARを運用していた際，個人的に詰まってしまったことのメモ書きです．

###使用環境

|||
|:--:|:--:|
|OS| Ubuntu 16.04|
|kernel| 4.15 |
|ROS|kinetic|
|Velodyne-ros|ros-kinetic-velodyne|
|Velodyne LiDAR| VLP-16-HiRes|

#LiDARを角度変換したときの点群がおかしい

Velodyne LiDAR VLP-16-HiRes（以下VLP-16-HiRes）を角度変換できる雲台に設置し，角度を変えながらの運用を試みたところ，以下の問題が発生しました．
以下の画像は，VLP-16-HiResで取得した点群データをrvizで可視化したものです．

#####VLP-16-HiResの角度が水平のとき

![VID_20191231_211442_Moment0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215782/02d15b57-5f0b-58e2-2403-0fbdb8e8b245.jpeg)

#####VLP-16-HiResの角度をピッチ角に45 deg傾斜させたとき

![VID_20191231_211442_Moment.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215782/63263b1d-445a-b2a7-492b-03ebaf3cfdc6.jpeg)

2枚目の画像は，VLP-16-HiResをピッチ角に45 deg角度変換したときの点群データです．斜めに表示されているのは床を捉えた点群データです．正しく3次元座標を計測できていれば，床の点群は水平に表示されているはずです．

#原因：キャリブレーションファイル設定の不備

原因としては，キャリブレーションファイルを指定する設定に不備がありました．
Velodyne LiDARは，LiDARと一緒にUSBが付属されており，USBの中にLiDARのキャリブレーションデータが.yamlファイルで入れられています．
このキャリブレーションデータはLiDARの型式によって異なり，同じVLP-16でも通常版と高解像度版（HiRes）で違うキャリブレーションデータを使用する必要があります．

角度変換時に点群データの角度がおかしくなるのは，**VLP-16-HiRes（VLP-16の高解像度版）を使用しているにも関わらず，VLP-16のキャリブレーションデータを用いていた**ことが原因でした．

ROSドライバーでVelodyne LiDARを運用する場合の，キャリブレーションデータの設定方法ですが，`velodyne_pointcloud`パッケージ内のlaunchファイルを編集することで設定します．

例えば，VLP-16系列を動かす場合，`VLP16_points.launch`を編集します．
launchファイル内の`calibration`に使うLiDARに適したキャリブレーションデータのパスを指定します．

```shell-session:VLP16_points.launch
1 <!-- -*- mode: XML -*- -->
2 <!-- run velodyne_pointcloud/CloudNodelet in a nodelet manager for a VLP-16 -->
3
4 <launch>
5
6 <!-- declare arguments with default values -->
7 <arg name="calibration" default="＜ここに適したキャリブレーションデータのパスを設定＞"/>
8 <arg name="device_ip" default="" />
9 <arg name="frame_id" default="velodyne" />
....
```

これで，角度変換をしても点群データの座標が適切に取得されるようになりました．
saikizentansaku

abc165 c　

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275793/0870a54d-230d-5876-9117-c09defe52d6f.png)
これ賢い

```c++
int n, m, q; 
int a[55], b[55], c[55], d[55];
int ans = 0;
void dfs(vector<int>&v) {
	if (v.size() == n) {
		int s = 0;
		for (int i = 0; i < q; ++i) {
			if (v[b[i]] - v[a[i]] == c[i])s += d[i];
		}
		ans = max(ans, s);
		return;
	}
	int t = 1;
	if (!v.empty())t = v.back();
	for (int i = t; i <= m; ++i) {
		v.push_back(i);
		dfs(v);
		v.pop_back();
	}
}

int main() {
	cin >> n >> m >> q;
	for (int i = 0; i < q; ++i) {
		cin >> a[i] >> b[i] >> c[i] >> d[i];
		a[i]--, b[i]--;
	}
	vector<int>v;
	dfs(v);
	cout << ans << endl;
	return 0;
}
```
ex 755,lunlunnumber,string equivalence
Excel上にてフルパスからファイル名を切り出すExcel関数使用例


#####Excel上にてフルパスからファイル名を切り出すExcel関数使用例
####例：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3783/83b9e49c-7a05-cfa1-1159-8e566f738421.png)


```
=RIGHT(A2,LEN(A2)-FIND("*",SUBSTITUTE(A2,"¥","*",LEN(A2)-LEN(SUBSTITUTE(A2,"¥","")))))
```

####分析：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3783/17d8b3a8-c4fa-c26a-0a60-b7fd6d23edd4.png)
QIIME2で分類器を自作する

## 背景
QIIME2の種同定にはナイーブベイズを用いた分類器を使用する。QIIME2の公式サイトではGreenGenesとsilvaについて、full lengthあるいはV3-V4領域（515F-806R）を抽出した配列の99％OTUで学習した分類器が提供されている。本手法で同定する際、シーケンス領域を抽出した上で学習させた方がunclassifidなOTUが減ると報告されている（[Werner et al., ISME J., 2012](https://pubmed.ncbi.nlm.nih.gov/21716311/)）。そのため、他のデータベースやV3-V4領域以外のアンプリコンシーケンスの場合は、分類器を自作する必要がある。

## 環境
- PC: mac mini 2018
- OS: macOS Catalina (10.15.1)
- プロセッサ: 3.2 GHz 6コアIntel Core i7
- メモリ: 32 GB 2667 MHz DDR4
- グラフィックス: Intel UHD Graphics 630 1536 MB
- QIIME2: 2019.7 (Dockerにてインストール)  
※Dockerのメモリには24GBを割り当て

## 方法
[チュートリアル](https://docs.qiime2.org/2020.2/tutorials/feature-classifier/)を参考にsilvaからV1-V2領域（27F-338R）を抽出して学習させる。

#### silvaのダウンロード
2020年5月3日現在のSilvaの最新バージョンは138（2019年12月バージョン）だが、QIIME2の公式チュートリアルに合わせて132（2017年12月バージョン）を使用する。
※数字は飛んでいるが138の1つ前のバージョンが132

```sh
mkdir classifier
mkdir classifier/27f_338r_silva99
cd classifier/27f_338r_silva99/
curl -O  https://www.arb-silva.de/fileadmin/silva_databases/qiime/Silva_132_release.zip
unzip Silva_132_release.zip
```

####QIIME2を起動
```sh
docker run -it -v $(pwd):/data qiime2/core:2019.7
```
####分類器の作成
```sh
#配列ファイル（fastaファイル）のインポート
qiime tools import \
--type 'FeatureData[Sequence]' \
--input-path SILVA_132_QIIME_release/rep_set/rep_set_all/99/silva132_99.fna \
--output-path silva132_99.qza

#細菌種名ファイル（.txt）のインポート
qiime tools import \
--type 'FeatureData[Taxonomy]' \
--input-format HeaderlessTSVTaxonomyFormat \
 --input-path SILVA_132_QIIME_release/taxonomy/taxonomy_all/99/taxonomy_7_levels.txt \
--output-path silva132_99_taxonomy_7_levels.qza

#V1-V2領域の抽出
qiime feature-classifier extract-reads \
--i-sequences silva132_99.qza \
--p-f-primer AGRGTTTGATYMTGGCTCAG \
--p-r-primer TGCTGCCTCCCGTAGGAGT \
--p-min-length 100 \
--p-max-length 400 \
--o-reads ref-seqs_silva99_v12.qza

#分類器の訓練
#コマンド実行後に「Killed」と表示されて処理が終了する場合、メモリ不足の可能性がある。
#Dockerのメモリに8GB割り当てている状態では処理が中断し、24GB割り当てると問題なく実行された。
qiime feature-classifier fit-classifier-naive-bayes \
--i-reference-reads ref-seqs_silva99_v12.qza \
--i-reference-taxonomy silva132_99_taxonomy_7_levels.qza \
--o-classifier classifier_silva99_v12.qza
```

##補足
- silva132には16Sのみ、18Sのみ、両者を合わせたmulti fastaファイルが存在するが、QIIME2開発者は分類器の訓練データとして両者を合わせたmulti fastaファイル及びtaxonomyファイルを使用している（[QIIME2 forum](https://forum.qiime2.org/t/silva-132-classifiers/3698/15)）。これは、[公式サイト](https://docs.qiime2.org/2019.1/data-resources/)で配布されているqzaファイルからも確認できる（下図はダウンロードしたSilva_132_release.zip内の構造）。
<img width="806" alt="99.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363491/a61ab437-00af-a9a4-27ff-b8e805233568.png">

- silvaのRef NR(non-redundant) 99（今回使用しているDB）は約70万のリードからなる（[silva132](https://www.arb-silva.de/documentation/release-132/)）。
- silvaを用いて種同定するときは[Quast et al., Nucleic Acids Res., 2013](https://academic.oup.com/nar/article/41/D1/D590/1069277)、[Yilmaz et al., Nucleic Acids Res., 2014](https://academic.oup.com/nar/article/42/D1/D643/1061236)を引用する（[silva132](https://www.arb-silva.de/documentation/release-132/)）。
- 「qiime feature-classifier」実行後に「Killed」と表示されて処理が終了する場合、メモリ不足の可能性がある。当初Dockerのメモリに8GB割り当てている状態では処理が中断し、24GB割り当てると問題なく実行された。
Laravel ユニットテスト用メソッド

#前提
Laravelのテスト用メソッドについてメモしていきます。

#本題

###ステータスのチェック

```
$this->get('/')->assertStatus(200);
```


###ステータスOKのチェック

```
$this->get('/hello')->assertOk();
```

###POSTのチェック

```
$this->post('/hello')->assertOk();
```

###パラメータを指定する

```
$this->get('/hello/1')->assertOk();
```

###存在しないページのチェック

```
$this->get('/hoge')->assertStatus(404);
```
※用意していないアドレスを指定し、ステータスコードが404かどうかをチェック。
不用意に「存在しないはずのページにアクセスできてしまう」といったことを確認できる。

###コンテンツに含まれるテキスト

```
$this->get('/hello')->assertSeeText('Index');
```

###レスポンスに含まれるテキスト

```
$this->get('/hello')->assertSee('<h1>');
```

###用意したテキストが順に登場する

```
$this->get('/hello')->assertSeeInOrder(['<html','<head','<body','<h1>']);
```

###Ajaxへのアクセス

```
$this->get('/hello/json/1')->assertSeeText('YAMADA-TARO');
```

###Ajaxの内容チェック

```
$this->get('/hello/json/2')->assertExactJson(
          ['id'=2, 'name'=>'HANAKO',
          'mail'=>'hanako@flower','age'=>'19']);
```

###各テスト後のデータベースリセット

```
<?php

namespace Tests\Feature;

use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\WithoutMiddleware;
use Tests\TestCase;

class ExampleTest extends TestCase
{
    use RefreshDatabase; #この記述でリセット可能

    /**
     * 基本的な機能テストの例
     *
     * @return void
     */
    public function testBasicExample()
    {
        $response = $this->get('/');

        // …
    }
}
```
複雑に抜取・連結されたデータセットの画像番号を取得する

torch.utils.data.Datasetの様式をしたデータセットを、torch.utils.data.Subsetやtorch.utils.data.ConcatDatasetを用いて、任意データを抜き取ったり、データセットを連結して、複雑に抜取・連結されたデータセットがある時、元のデータセットでの画像番号を取得する。

グローバル変数のように番号を格納して用いるので、番号取得の部分だけに関しては並列処理は不可とはなるものの、この部分はまず並列化しないはず。手軽な方法で、突貫で作成したもの。もっとよい方法があればなと。

## Libs


```python
import numpy as np
import matplotlib.pyplot as plt

import torch
import torchvision
```

## Datasetの抜取・連結

任意データを抜き取ったり、データセットを連結して、複雑に抜取・連結されたデータセットをまず作成。

```python
# sec: データセット

ds = torchvision.datasets.MNIST(root="trains/pytorch-mnist", train=True, download=True, 
    transform=torchvision.transforms.ToTensor())
print("サイズ:", len(ds), "先頭10個の真値:", [ds[i][1] for i in range(10)])

# sec: Subset, ConcatDatasetを使用

ds_1 = torch.utils.data.Subset(ds, [0, 2, 5]) # 任意位置の抜き取り
print("サイズ:", len(ds_1), "真値:", [ds_1[i][1] for i in range(3)])
ds_2 = torch.utils.data.ConcatDataset([ds_1, ds_1, ds_1]) # データセットを連結
print("サイズ:", len(ds_2), "真値:", [ds_2[i][1] for i in range(9)])
```

    サイズ: 60000 先頭10個の真値: [5, 0, 4, 1, 9, 2, 1, 3, 1, 4]
    サイズ: 3 真値: [5, 4, 2]
    サイズ: 9 真値: [5, 4, 2, 5, 4, 2, 5, 4, 2]
    

## Datasetの画像番号を取得

以下コードで、複雑に抜取・連結されたデータセットがある時、元のデータセットでの画像番号を取得する。

```python
# sec: データセット内の画像番号を追跡

class AccessPrintDataset(torch.utils.data.Dataset):
    
    def __init__(self, ds):
        self.dataset = ds
        self.cur_index = None # 現在アクセスされた番号
        self.if_print = False
    
    def __getitem__(self, index):
        
        self.cur_index = index # 現在アクセスされた番号
        if self.if_print:
            print("accessed:", index)
            
        return self.dataset[index]
    
    def __len__(self):
        return len(self.dataset)

# sec: データセットを組み替え

ds_a = AccessPrintDataset(ds) # 初めにラップしておく
ds_1 = torch.utils.data.Subset(ds_a, [0, 2, 5]) # 任意位置の抜き取り
ds_2 = torch.utils.data.ConcatDataset([ds_1, ds_1, ds_1]) # データセットを連結

# sec: アクセスした画像番号を表示

ds_a.if_print = True
print("アクセスした画像を表示:")
dummy = [ds_2[i] for i in range(len(ds_2))] # データセットにアクセス
ds_a.if_print = False

# sec: アクセスした画像番号のリストを取得

print("\nアクセスした画像番号のリストを取得:")
i_list = [ds_a.cur_index if ds_2[i] else None for i in range(len(ds_2))]
print("番号:", i_list)

print("真値:", [ds[i][1] for i in i_list])
```

    アクセスした画像を表示:
    accessed: 0
    accessed: 2
    accessed: 5
    accessed: 0
    accessed: 2
    accessed: 5
    accessed: 0
    accessed: 2
    accessed: 5
    
    アクセスした画像番号のリストを取得:
    番号: [0, 2, 5, 0, 2, 5, 0, 2, 5]
    真値: [5, 4, 2, 5, 4, 2, 5, 4, 2]
【PHP】Allowed memory size of *** bytes exhaustedエラーの対処法まとめ

Allowed memory size of 134217728 bytes exhaustedエラーって時々みます。これはphpに割り当てられたメモリが全部使われちゃったよ〜っていうエラー。これはプログラムだけの問題ではない可能性が高いので、幾つか対策をしなければいけません。その対処法を５つまとめました。


1. php.iniの設定
2. メモリが枯渇しないようなコードに
3. スワップの設定
4. ini_set関数で一時的にメモリ上限を上げる
5. unsetを駆使する


## php.iniの設定を変える

ちなみに冒頭にある134217728 bytesは128MBの意味です。
初期設定ではphpに割り当てられているメモリ容量は128MBとなっています。
これはphp.iniというファイルで設定されており、変更可能です。
ただ、もちろんですがサーバーのスペックを超えた設定を行うことはできません！これ超えて設定したらどうなるんだろう。。

ちなみにphp.iniの場所、自分でもよく忘れるので探し方を解説してくれているページを貼っておきます。

[もういい加減覚えよう。php.iniはどこにあるのか](https://qiita.com/ritukiii/items/624eb475b85e28613a70)

phpinfoで見るのが早いですね。
phpが実行可能な場所でこの関数を実行して確認してしまいましょう

そしてphp.iniファイルをいじっていきます。

```
memory_limit = 256M
```

最初は128メガになっているかと思うので、ここを変えてあげてください。
このあと再起動を行わなければいけないので注意！
apache環境ならapache
nginxならphp-fpmとなるようです。


## メモリが枯渇しないようなコードに

例えばこの記事だと

[Allowed memory size of 134217728 bytes exhausted](https://www.rucaro.org/?p=community_response&tid=145)

for文が途中でループするようなコードになっていたそうです！！
中の変数に無限に値を入れ続けていると、準備された変数の数分だけメモリは消費されていきます。
使われなくなった変数を削除してくれるガベージコレクションという仕組みをPHPはもっていますが、無限ループだとそれでも追いつけなくなるでしょう。

[PHP の GC の話](https://www.slideshare.net/y-uti/php-gc)

## スワップの設定

この対処法は今ではなかなかマイナーかもｗ
サーバー側にスワップ領域を確保し、開放してやることで、メモリが満杯になっているときにRAM内ではなくハードディスク上にメモリの領域を確保してやるといった方法です。

```sh
dd if=/dev/zero of=/var/swap bs=1M count=1024
mkswap /var/swap
swapon /var/swap
```

ちなみに逆にswap領域が満杯になっているときはこちら

```sh
swapoff -a && swapon -a
```

で、開放してくれます


## ini_set関数で一時的にメモリ上限を上げる

こいつを使用するとphp.iniの設定値を一時的に変更してくれます。

```php
<?php
ini_set("memory_limit", "512M");
```

これで特定のファイルにおいては一時的にメモリを引き上げてphpを実行できるようになりました

## unsetを駆使する

確保されたメモリが削除処理されなかった場合、メモリリークといって処理終わってんのにそのプログラムがメモリ食ってる状況になっちゃいます。
ちなみにphpでは一連の処理が終わると、自動的にメモリを開放してくれます。
じゃあ、やんなくていいのかというとそういうわけでもないようで。
非常に長い処理のなかとか、長いforeachの処理のなかとかだとunset関数で変数を初期化してやったほうがいい場合もあるようです。

```php
unset($data);
```

これらの中で対処法が見つかればいいなあって感じですね
【Web RTC】ZoomはWebRTCを使用していない件

コロナウイルスのせいでweb会議やらweb飲み会が流行っていますが、頻繁に使用されるのはMeetかwherebyかZoomなような気がしています。
wherebyなんかは正にweb RTCをつかったアプリって感じです。
ただZoomはどうやら違うようです。何やら**WebRTCの機能をいいとこ取りして、より最適化をおこなったアプリ**のようです。

以下の記事をみていき、なんとなくですがまとめました。

[When will Zoom use WebRTC? • BlogGeek.me](https://bloggeek.me/when-will-zoom-use-webrtc/)


[How Zoom's web client avoids using WebRTC (DataChannel Update) - webrtcHacks](https://webrtchacks.com/zoom-avoids-using-webrtc/)

ただ最近Zoomはセキュリティ面でかなり非難されていて、一部界隈では使用禁止になっていますよね。。
技術にこだわりすぎた結果、セキュリティが甘くなってしまったのでしょうか。。。

1. P2Pは使用していない
2. 使ってないのはより最適化できるから
3. 代わりに使っているのはwebsocketとwebassembly


## P2Pは使用していない

![](https://bloggeek.me/wp-content/uploads/2019/09/201909-zoom-webrtc-use-phase1.png)
> 引用:https://bloggeek.me/when-will-zoom-use-webrtc/

WebRTCっていうのはP2Pでの通信をサポートした規格です。
getUserMediaやgetDisplayMediaを通じてwebブラウザ上でカメラや音声の通信を可能にして、P2P通信でそれらを通信していると。
ZoomではgetUserMediaやgetDisplayMediaは使用しているものの、P2Pをつかていないそうです。（代わりに使用しているのは後述のwebsocketとwebassemblyです。）
また、DataChannelという機能も使用されているようで。こちらを使用することで、ネイティブアプリとしてアプリのインストールをする必要がなくなるそうです。

なのでWebRTCを使用していないとはいいつつも、必要なところは使っている、といった感じのようですね


## 使ってないのはより最適化できるから

圧縮規格にH.264というものを採用しているようで。
正直あまり理解できたものではなかったですが、Zoomはこれを独自のものとして使用しているようです。
そもそもwebRTCでこの規格はサポートされているのですが、Zoom社はこれを独自開発している
このような、最適化を複数おこなっているのでしょう。。

## 代わりに使っているのはwebsocketとwebassembly
![](https://ltwus2ix28x10gixx34jeigv-wpengine.netdna-ssl.com/wp-content/uploads/2018/10/zoom-flow1.png)
>引用：https://webrtchacks.com/zoom-avoids-using-webrtc/

WebRTCではUDPが使用されています。それに対して、websocketではTCPが使用されています。
ここでwebsocket通信を採用するとなると、WebRTCのTCP versionと言うことができそうです。
ではなぜwebsocketをここで使うのか？それはWebRTCでは突破できないファイアウォールをwebsocketだと突破することができるからだそうです。
WebRTCではTURNというサーバを経由する必要があります。正直ここからはちょっと理解しきれていない部分ではあるのですが、TURNサーバの認証の問題をwebsoket通信だと解決できる、、といった利点があるそうです。
その後websocketを通して送信されたバイナリデータはブラウザ上でエンコードとデコードを行われます。その際に使用されるのが、webassembly。これはブラウザ上で動くバイナリコードの新しいフォーマットだそうです。

[WebAssemblyとは](https://qiita.com/ShuntaShirai/items/3ac92412720789576f22)

このようにwebRTCの一部を最適化しているんですね。webRTCを用いたアプリの構築は単純なものだとSkyway APIを用いることでとてもかんたんにできますが、それとはレベチな世界ですねorz
【nginx】php-fpmのソケットの設定をしたときのハマったメモ



nginxの設定をしてwebサーバを立ち上げようとしたけど、php-fpmとの組み合わせでエラーが何個か出たのでその紹介です。

まず、confファイルの設定を行い、nginx restartを行いました。まあこれで行けるだろうと思いブラウザからアクセスしてみたところ

nginxの設定をしてwebサーバを立ち上げようとしたけど、php-fpmとの組み合わせでエラーが何個か出たのでその紹介です。

まず、confファイルの設定を行い、nginx restartを行いました。まあこれで行けるだろうと思いブラウザからアクセスしてみたところ

```
502 Bad Gateway
```

はい。ということでログを確認してみました。

```
/var/log/nginx/error.log
```

にnginxのログはあります。

なかをみると

```
connect() to unix:/var/run/php-fpm.sock failed (2: No such file or directory) while connecting to upstream
```

php-fpmのソケットが存在しないよーって言っています。ソケットとは「出入り口」といった意味なので出入り口が用意されていないからその準備をしなさいよーっていう意味になります。

よって、nginx側とphp-fpm側から用意してあげます

参考↓

[nginx + php-fpm socketで接続する](https://qiita.com/kawakami-kazuyoshi/items/610d1435d812beb853e2)

まずphp-fpm側から

```
/etc/php-fpm.d/www.conf
```
このファイルをvimで開き、listenの部分を変更してあげましょう。

```nginx
listen = /var/run/php-fpm/php-fpm.sock
```
これでphp.fpmのソケットが準備されます。

またlistenのownerとgroupを変更しておきましょう。このソケットにアクセスするユーザはnginxとなるので、、

```
listen.owner = nginx
listen.group = nginx
```
次にnginx側のconfの設定です。
confファイルの中で

```nginx

location ~ \.(php|Do)$ {
     fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
     fastcgi_split_path_info ^(.+\.php)(/.+)$;
     fastcgi_param PATH_INFO $fastcgi_path_info;
     fastcgi_index index.php;
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
     include fastcgi_params;
 }
```
phpファイルへのルーティングを行っているlocationでfastcgi_passを行うところの指定をしているかと思います。
そこで

```nginx
fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
```
としてあげることで、指定完了です！

しかしさらにエラーが、、、

```
unix:/var/run/php-fpm/php-fpm.sock failed (13: Permission denied)
```

[Nginx で「502 Bad Gateway」とか、なんだかエラーログがでるよって時](https://qiita.com/madaran0805/items/a5b064105852656cca0e)

php-fpm.sockの所有者がrootになっているのでこれをnginxにしてあげると、660の権限においても実行可能となります！

これでなんとかつなぎこみが完了しました。ふー
WikipediaのSVG画像をPNGで取得

Wikipedia では SVG がよく使われます。画像を再利用する際、SVG のまま取得することも可能ですが、PNG に変換して保存する方法も用意されています。

※ この記事で想定しているのは元画像が SVG のものについてですが、JPEG でも同じ手順でリサイズした画像の取得は可能です。

# 記事から保存

記事のページでは SVG は PNG に変換して表示されています。記事のページから画像を保存すれば PNG となります。

# 別のサイズで保存

SVG は画像サイズが自由に変更可能ですが、PNG に変換するとサイズが固定されます。記事に表示されているよりも大きなサイズで保存する方法も用意されています。

1. 画像をクリックします。画像が広がります。
2. 右下の [詳細] をクリックします。<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32057/44c2c587-751d-152b-77d1-c086c2f1b819.png)
3. 各種サイズに変換された PNG へのリンクが表示されます。（下記引用の<font color="red">**赤字**</font>部分）

【例】 https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg

> Size of this PNG preview of this SVG file: <font color="red">**512 × 327 pixels**</font>. Other resolutions: <font color="red">**320 × 204 pixels | 640 × 409 pixels | 800 × 511 pixels | 1,024 × 654 pixels | 1,280 × 818 pixels**</font>.
> Language select: [ ]
> Original file ‎(SVG file, nominally 512 × 327 pixels, file size: 3 KB)
> This image rendered as PNG in other widths: <font color="red">**200px, 500px, 1000px, 2000px**</font>.

詳細ページには画像のライセンスも書かれています。CC-BY や CC-BY-SA の場合、帰属表示が必要です。

* [Wikipedia:ライセンス更新 - Wikipedia](https://ja.wikipedia.org/wiki/Wikipedia:%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%9B%B4%E6%96%B0)
* [Creative Commonsにおける「表示」ってめんどくさいけど、実際どうすればいいのか - ゆうれいパジャマβ](https://kuma.hateblo.jp/entry/20160628/1467053372)

# Firefox

Firefox の機能でスクリーンショットとしてダウンロードすることも一応できます。（一応というのは、普通の方法だと弾かれるため）

記事中の画像をクリックして画像が広がった状態では、PNG に変換した画像が表示されています。この画像を再度クリックすると、SVG での表示に切り替わります。

この状態で Firefox のスクリーンショット機能を使おうとしても「このページはスクリーンショットを撮れません。」として弾かれます。しかし他のキャプチャソフトを使わなくても、次のようにすれば回避できます。

1. 右クリック → 要素を調査
2. 開発ツールが表示される
3. 選択されているノードを右クリック → ノードのスクリーンショットを撮影
4. ダウンロードフォルダにスクリーンショットが生成

この方法だと日時に基づいたファイル名になります。元のファイル名を保持したい場合は、Wikipedia で変換した PNG を取得した方が手軽です。

※ 元々この方法をよく使っていたのですが、後で Wikipedia 自体に変換機能があることに気付きました。

なお、この方法は Element の画像化にも利用できます。

* [dom-to-imageを試す](https://qiita.com/7shi/items/771069479b91797b1fd6)
【PHP】in_arrayの第三引数にtrueをつけていたら死んだ話

in_arrayという関数がPHPにありまして、便利です。配列の中に該当の文字列があるかどうか探してきてくれます。

この関数に関連する記事をぐぐってみると以下のような感じです。


>[in_arrayを使うときは黙って第三引数を付けること](https://qiita.com/ritukiii/items/3a6add378ae089ab5d70)

>[【PHP】in_array()関数では第3引数（true）を設定する](https://deep-blog.jp/engineer/3143/)

>[PHPのin_arrayは罠が多いので注意喚起が必要](https://qiita.com/tadsan/items/2a4c3e6b0b74a408c038)



かなり多くの人が「第三引数にtrueを絶対につけろよ！！！」って言っています。

彼らの主張は正しいのですが、ぼくのように馬鹿正直に「in_array使うから、trueもつけちゃおう！！」とかって何も考えずに書いてしまうと死にます。

ちゃんと意味を理解してからtrueを書きましょう！！！！


1. trueをつけると型までみてくれる。
2. 僕の敗因：方が違うものを比べていた
3. どのような場面にtrueが必要なのか




## trueをつけると型までみてくれる
なぜ第三引数にtrueが必要なのか。
それは型があっているのかどうかまでみてくれるからですね。

つけないと型がちがっても柔軟に対応してくれるのです

例えば

```php

4 == "4.0"
```
これ左がintで右がvarcharのように見えますが返し値はtrueになります。

ちなみにPHPでは == ではなく === で型までみるようになります。

なので

```php

4 === "4.0"
```
これは型までみたことにより**false**が返ってきます。おもしろいですね〜

## 僕の敗因：型が違うものを比べていた
僕はDBからもってきたデータconfigの中に用意してある定数と比較するためにin_arrayを使いました。
そこでなんの疑問も持たずtrueをつけると、なぜかすべてがfalseで返ってきたので？？？？？と。

調査してみると、、

DBで数値しか入っていないカラムがvarcharやんけ。。。なんでや。。。

そもそも設計からアレなんですが、これによってin_arrayさんは intとvarcharを常に比較しているという事態になってしまっていました。ショック！！

## どのようにtrueを扱うのか
基本的にtrueなしでやると型を考えずに比較してくれるのは便利です。
ただ、その場合に怖いのは0です。

例えば

```php

0 == "a"
```
この演算子はtrueになります。まあ意味不明ですね。
これは”a”をint型で表すと0になるので、型を考えないこの書き方だとtrueになるそうです。そんな無茶な。

よってtrueをつかうときは

- 0を比較する場面が発生しそうな場合は必ず使用
- 比較対象の型がバラバラになりそうである場面では型をあわせる設定を行うか,
trueは使わない
- とにかく比較対象の型と0の有無を意識する

これらを意識づけしておけばいいかなあと思いました。以上です。
値'6.81'が検索対象に引っかからない【MySQL 5.7.2】

DDLを記述してDBのスキーマを設定する際に、数値の型はどのように設定していますか？
小数点がつくとすれば、double型を使う人もおおいと思います。

が！double型を使うと、浮動小数点数として格納されます。それは以下のような問題を発生させる可能性があります。
よって、基本的に**decimal型**を使うようにしましょう。

## 理由：double型を使用すると、検索結果が正しくなくなる事例があるため

以下に事例を書いておきます。

selectがうまくできない事例
column1をdouble型(double(6,2))とします。
ちなみにこれはMySQLの5.7.2より発生する事例です。

```SQL
select * from table1 where column1 = '6.81'
```

columnに6.81が入っていたとしても、このselectのクエリはnullを返します！

しかし、decimalにかえると、問題なく値を返してくれます。

これはdouble型が浮動小数点となっているためにwhere句で指定している6.81と誤差が発生しているためと考えられます。
（シングルクォーテーションが入っているので型変換がおきており、DBの値とうまく合致していないのかと。）

これに対しdecimalは浮動小数点ではなく正確な値を格納してくれます。

このような事例は6.81以外にもあると思われます。よってあまり使わないほうが良いですね。decimalを使用しましょう。
Rails 検索機能は自力でも簡単に実装できる

どうもチャンクノです！
今回は検索機能を実装します。
スクールとかではransackや検索用のコントローラーを用意していたと思いますが、それらの方法でなくとも実装できます。

完成図から見せます。

```
Class Hoge < ApplicationRecord
  include Hoge::Searchable
end
```

```
module Hoge::Searchable
  extend ActiveSupport::Concern

  include do
    scope :search_by_foo, lambda { |foo|
      return if foo.blank?
      where("hoge.foo" => foo)
    }
  end
end
```

```
class TradeSearchForm
  include ActiveModel::Model

  attr_accessor :foo

  def search
    Hoge
      .search_by_foo(foo)
  end
  
end
```

```
class User::TradesController < User::ApplicationController

  def index
    @hoge_search_form = HogeSearchForm.new(hoge_search_params)
    @hoges = @hoge_search_form.search
              .order(id: :desc)
              .page(params[:page])
              .per(4)
  end

  private

  def hoge_search_params
    return if params[:hoge_search_form].blank?
    params.require(:hoge_search_form).permit(
      :hoge
    )
  end
end
```

```
<%= form_with model: @hoge_search_form, url: hoges_path, method: :get, local: true do |f| %>
  <%= f.text_field :hoge %>
<% end %>
```

こんな感じです。

ちなみにTradeSearchFormクラスをなくして

```
def index
    @hoges = Hoge
              .search_by_foo(params[:foo])
              .order(id: :desc)
              .page(params[:page])
              .per(4)
  end

  private

  def hoge_search_params
    params.require(:hoge).permit(
      :foo
    )
  end
```
こういう風にもできますが、メソッドが増えるたびコントローラーに記述しなければならなくなるので好ましくはないと思います。
検索用のクラスを用意してそこにまとめた方がいいでしょう。

ActiveModel::ModelやActiveSupport::Concernについては自分も理解しきれていないのですが、こういうやり方もあるということで紹介させていただきました！！
試しに使ってみるといいと思います！
それでは今日はこの辺で！
何か指摘等ありましたら遠慮なくお願いいたします🙇‍♂️

皆様よきプログラミングライフを🙏
失敗　教訓　対策

計算機まわりの失敗はいっぱいある。

新人にどう伝えるとよいか、いろいろ試したい。

# 失敗1 半田付け間違い

電子回路の半田付けをして、測定しながら電源を入れたら、ICから炎が出た。

## 対策１

半田付けしたら、電源を入れる前に、短絡がないか通電器(tester)で確認をとる。

# 失敗２　PCの周辺装置でSCSIIと書かれたインタフェースにPCからSCSIIケーブルで接続したら周辺装置から煙がでた。

## 対策２

ハードウェア上の記述だけでなく、手引書(manual)を読んでから接続する。
手引書にはパラレル接続と書いてあった。
明らかに製造側の課題だが、利用できない期間ができるだけ、自分が損。

# 失敗3 USB逆挿しで炎

逆挿し防止の機構がついていない安価なUSBメモリで、PCに挿したら煙が出た。

## 対策３
逆挿し防止機能が標準でついている装置は、逆挿し防止機能のついていない機器は挿さない。


# 失敗４ アセンブラで設計していて、アセンブルして実行したら、プログラムの入って要るFDのフォーマットを始めた。

## 対策
プログラムは書いたら、予備を取ってから実行する。
自分を消してしまうプログラムは、どんな場合でも作ってしまう可能性はある。

# 失敗5

ある国で、ネットにつないだら、Windowsが起動しなくなった。

## 対策
CDブートできるシステムを海外に出かける時は、必ず持っていく。
幸い、SPINの演習ができるKNOPPIXのCDを持っていた。１週間KNOPPIXのCD立ち上げで、ネットにデータ保存して暮らした。


# 失敗6
ある国で、ノートPCを電源につないだら、火花が飛んで、停電した。

## 対策

予備のACアダプタを持ち歩くか、購入できる場所を確認しておく。

# 失敗７

飛行機から降りて、Mac Bookを起動しようとしたら起動しなかった。

## 対策

ネットからブートする方法を学んでおく。

幸い、PCショップへ行ったら、ネットからOSを導入する方法をおしえてくださり、
ほぼ丸１日かかって、ネットからOSをダウンロードして、アプリも導入して動くようになった。

# 失敗8

ある国で、日本語の文字(font)の入っていないPCしかなく、日本語をダウンロードしようとしたが数時間たってもダメだった。

## 対策
早朝から作業したら１時間くらいでダウンロードできた。
複数の通信経路を確保しておき、時間帯を選んで落とす。

# 失敗9
Wordで編集履歴をOnにして複数人で作業していたら、ファイルが壊れた。

# #対策
WindowsとMacintoshなどの異なるOS上のアプリで編集履歴をONにしない。

WordもOSも同じ版だけで編集する。

# 失敗10
Excelで、作った人と違う印刷機で罫線がうまく出ない。

## 対策
なるべく罫線を使わないようにする。

＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
# 文書履歴(document history)
ver. 0.01 初稿 20230308
ver. 0.04 URL追記　20230308

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

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

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

Please press the like icon 💚　and follow me for your happy life.
EC-CUBE奮闘記②　～プラグイン・デザイン追加～

#1.今日やったこと

##1.1.アイコン変更
今日はまずアイコンを変えました。vscodeでECCUBE/html/template/admin\assets/imgを開いて自前のicoファイルをfavicon.icoに上書きします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630640/22f98e0c-042c-8e8e-faaf-004d6eac4fc7.png)

(ちょっとずれてますね💦)

同様に管理画面のアイコンも変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630640/04578c35-570c-c80e-9285-55e922357863.png)

これだけでぐっとオリジナリティが出ますね～👍
他にも初期設定(黄色い帽子)のままになってる画像をどんどん変えていっちゃいます。

##1.2.phpMyAdminからMySQLの操作

初めからカテゴリが設定されているので、前回作ったデータベースからdtb_caegoryを削除します。

phpMyAdminという神ツールがあるので
http://localhost/phpmyadmin/
に接続。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630640/91e6f5c9-a6f6-3705-75ac-7496d38cefa9.png)

この画像の[削除]からカテゴリーを消すことができます！（実際のところ管理画面からできるけど、phpMyAdminに慣れておきたい）

##1.3.プラグインの導入
管理画面のオーナーズストア→プラグイン→プラグインを探す　からプラグインを入れることができます

とりあえず、・レビュー機能　・決済機能を入れることにしました。決済機能はどこのにするか相談中です。

画面の指示通りにプラグインを導入して完了。簡単でありがたいですね☺

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630640/ea765674-7382-0334-635b-c2be689bcad9.png)

ここでユーザー独自プラグインという気になる文字が。一通り完成したら、ぜひ自作してみたいものです。

##1.4.twigファイルの編集

ここからtwigファイルを編集して、デザインを変更していきます。

まずはタイトルロゴを文字ではなく、png画像にしたい！
そんなときは管理画面→コンテンツ管理→ブロック管理→ロゴを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630640/de43f18c-5192-7055-148a-1930cf14ac00.png)

マーカーの部分を変更。指定したパスに画像を入れておくことも忘れずに！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630640/d1993382-b308-3c87-ffb3-7102231a4afe.png)

これで無事ロゴが変更されました。ほかにもいろいろ編集していきたいですね

#2.今後のこと

とりあえずこんな感じで、phpの勉強を進めながらtwigファイルを編集していくことが中心になると思います。バイト先の人の意見も聞いて、トライアル＆エラーで完成に近づけていければ…

デザイン関係のことは記録に残してもしょうがないので、次の記事は大きな技術的課題を消化したとき（たぶんサーバーに上げるとき）に書きます～　

bye
第2回Flutterもくもく会@Zoom 実施レポート

# はじめに 

2020年5月3日にZoomにて[Flutterもくもく会](https://flutter-okurayama.connpass.com/)を実施したので、
そのレポートになります。個人的所感メインです。
何かご意見などありましたらよろしくお願いします。

前回のレポートは[こちら](https://qiita.com/glassmonkey/items/7dd8cf2037e17c5131f8)です。

# トピック

## Flutterの学習
udemyでのおすすめ講座
https://www.udemy.com/course/flutter-ios-android/

給付金もらえるし、これを機に買ってみようと思います。音声系気になる。


## Flutterの実用例
Flutterでの実際の活用が気になるという話になり、ゲームでの活用例を教えていただきました。
https://fireslime.xyz/games/tales.html
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152938/37766222-10e8-ae15-d216-16ba6a6ea232.png)

-> FlameなるFlutter上で動くゲームエンジンがあるとのこと
https://github.com/flame-engine/flame

改めて調べてみるとゲーム以外にも色々まとまってるサイト見つけたので、あとで参考にしようと思います。
https://flutterawesome.com/


## アプリのリリース事例紹介
今回の参加者の[@entaku_0818](https://twitter.com/entaku_0818)さんにFlutterでのアプリリリース事例を紹介していただきました。

買い物代行サービスアプリを企画含めて１ヶ月でリリースできたとのこと。すごい（小並感）
このご時世なので、せっかくなので皆さんも使ってみてはどうでしょうか？

<a href="https://prtimes.jp/main/html/rd/p/000000047.000016726.html" ><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152938/41ca4b59-fe68-9ec6-1805-b0bfb0bfa6ef.png"> </a>


### iOS
https://apps.apple.com/jp/app/id1506448581
### Android
https://play.google.com/store/apps/details?id=com.cbcloud.errand&hl=ja



# おわりに次回開催と宣伝
[conpass](https://flutter-okurayama.connpass.com/)で定期的にもくもく会を隔週の頻度で実施予定です。  
[次回開催](https://flutter-okurayama.connpass.com/event/175366/)は5/17(日) 18:00です。イベント作成したらTwitterなどでご連絡しますのでよければフォローや参加登録お願いします。  

LTなど発表したい方いましたら [@glassmonekey](https://twitter.com/glassmonekey)にご連絡いただけますと嬉しいです。
作ったアプリもぜひ教えてください。

これを機に一緒に始めましょう



# 感想
せっかくなのでFlutterで作成したアプリを使い合ったりする場にもしていきたいですね。
そのためにはまず自分のアプリを作るように頑張ります。
React コンポーネント

Reactの復習メモです。

## コンポーネントとは
コンポーネントは見た目（view）と機能(controller)を合わせ持ったもの。

## なぜコンポーネントを使うのか
<b>・再利用するため</b>
　例えばボタンというコンポーネントを１つ作れば、引数を渡すことでログインボタンにもログアウトボタンにもすることができる

<b>・分割統治するため</b>
　コンポーネントはツリー構造でつなげていくことができる

<b>・変更に強くするため</b>
　一つ一つのコンポーネントは分割統治になっているので、あるコンポーネントに変更を加えても他のコンポーネントには影響が出にくい

##コンポーネントの種類
<b>1.Functional Component</b>
　・ES６のアロー関数で記述
　・基本的にstateを持たない
　・propsを引数に受け取る
　・JSXをリターンする

```jsx
import React from 'react';

const Article = (props) => {
  return(
    <div>
      <h1>{props.title}<h1>
    </div>
  )
}
```

<b>2.Class Component</b>
　・React.Componentを継承
　・stateやライフサイクルを持つ
　・propsにはthisが必要
　・renderメソッド内でJSXをreturnする
　・最近は非推奨になってきている
  
```jsx
import React from 'react';

class Article extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div>
        <h1>{this.props.title}<h1>
      </div>
    );
  }
}
```

## インポートとエクスポート


親コンポーネント(Blog.jsx)はimportすることで子コンポーネント(Article.jsx)を読み込むことができる

src/Blog.jsx

```jsx
import Article from "./Article";
```

子コンポーネント(Article.jsx)はexportすることで親コンポーネントに読み込ませることができる

src/Article.jsx

```jsx
export default Article;
```
ざっくりわかる自然言語処理１　〜基本のき〜

# はじめに
仕事で初めて自然言語処理をやることになりました。
何をどうすれば良いのかわからず、[言語処理100本ノック 2020](https://nlp100.github.io/ja/)を解き始めたものの、自然言語処理について理解出来ていないため、一旦中断してググって学ぶことにしました。

学ぶに当たり、
[自然言語処理（NLP）ってなんだろう？](https://qiita.com/MahoTakara/items/b3d719ed1a3665730826)
のサイトが非常に参考になりました。感謝です。

# このページを見てわかること
1. 自然言語とは何か
2. 自然言語処理とは何か
3. 自然言語処理をするための技術は何があるのか


# 自然言語とは
ざっくりいうと、普段使っている言葉のこと。
自然言語以外は何があるかというと、プログラミング言語などの人工言語などのことを言う。詳しい説明は、[Wikipedia 自然言語](https://ja.wikipedia.org/wiki/%E8%87%AA%E7%84%B6%E8%A8%80%E8%AA%9E)を参照。

# 自然言語処理とは
自然言語をコンピュータで処理すること。
[Wikipedia 自然言語処理](https://ja.wikipedia.org/wiki/%E8%87%AA%E7%84%B6%E8%A8%80%E8%AA%9E%E5%87%A6%E7%90%86)

# 自然言語処理の基礎技術
自然言語をコンピュータで処理するための技術がいくつかあって、代表的な技術が以下でした。

### 形態素解析
自然言語の文から、形態素（意味をもつ表現要素の最小単位）に分割して、形態素の品詞などを判別すること。

言葉でも何となくわかりますが、以下の図を用いた説明がよりわかりやすいです。
参考：[自然言語処理 NLP (Natural Language Processing) とは！？](https://kenyu-life.com/2019/03/10/natural-language-processing/)

### 構文解析
形態素解析した単語の関係性を明確にすること。
こちらについても以下の図を用いた説明がわかりすいです。
参考：[自然言語処理 NLP (Natural Language Processing) とは！？](https://kenyu-life.com/2019/03/10/natural-language-processing/)

### その他の技術
また、上記以外にも多くの技術がありました。
以下が整理されていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14760/56286920-8685-740c-47f4-582cfc36432f.png)
参考：[大規模データ時代に求められる自然言語処理](https://www.slideshare.net/pfi/ss-11474303)


# 自然言語処理の基礎技術のツール
上記の技術を使う際にどんなツールを使えば良いか調べました。
BERTで日本語使う時はJUMAN++とKNPになりそうでした。詳細は後ほど記載します。

| 自然言語処理技術 | ツール |
| :---- | :---- |
| 形態素解析 | JUMAN++,MeCab |
| 構文解析 |KNP,Lark |
参考：[2019年末版 形態素解析器の比較](https://qiita.com/hi-asano/items/aaf406db875f1c81530e)

# まとめ
1. 自然言語とは何か  
普段使っている言葉のこと。
2. 自然言語処理とは何か  
自然言語をコンピュータで処理すること。コンピュータで処理させるため、データ（普段使っている言葉）をそのまま使うのではなく、下準備が必要となり、技術がいくつもある。
3. 自然言語処理をするための技術は何があるのか　　
単語単位・形態素単位で分割する形態素分析という技術や、単語の関係性を明らかにする構文解析といった技術がある。また他にも技術がいくつもある。


基本的な言葉のこと、処理技術が何となくわかったので、次回ではどんな流れで自然言語処理を進めるのか整理します。
C++ pairを用いてABC121 C問題を解く

競技プログラミングの備忘録用
今回はSTLコンテナpairとvectorを組み合わせてABC121 C問題を解く．

[C - Energy Drink Collector](https://atcoder.jp/contests/abc121/tasks/abc121_c)

###問題
栄養ドリンクにレーティング上昇効果があると聞いた高橋くんは、$M$本の栄養ドリンクを買い集めることにしました。栄養ドリンクが売られている店は $N$軒あり、
$i$軒目の店では1本$A_i$円の栄養ドリンクを $B_i$本まで買うことができます。
最小で何円あれば $M$本の栄養ドリンクを買い集めることができるでしょうか。
なお、与えられる入力では、十分なお金があれば $M$本の栄養ドリンクを買い集められることが保証されます。

###制約
入力は全て整数である。

- $1≤N,M≤10^5$
- $1≤A_i≤10^9$
- $1≤B_i≤10^5$
- $B_1+...+B_N≥M$

###方針
pair型のvectorを宣言し，pairの第一要素を値段とし，第二要素を個数をする．
第一要素を基準にソートすることで値段が安い順に個数を並べる．
あとは値段が安いものから順番に購入した数が$M$個になるまで値段を加えていく．

###pair型vectorの宣言
```c++

vector<pair<long long, long long> A(N);
```
第一要素と第二要素にlong long型を持つ$N$個のpair型のvectorを宣言

###N個のvectorに値を入力
```c++

for(int i=0; i<N; i++){
    cin >> A.at(i).first >> A.at(i).second;
}
```
###pairの第一要素を基準にvectorを昇順にソートする
```c++

sort(A.begin(), A.end())
```

###解法コード
```c++
#include<bits/stdc++.h>
using namespace std;
typedef long long ll;
int main()
{
    int N, M;
    cin >> N >> M;
    vector<pair<ll, ll>> A(N);
    for(int i=0; i<N; i++){
        cin >> A.at(i).first >> A.at(i).second;
    }
    sort(A.begin(), A.end());
    int rest=M;
    ll money=0;
    for(int i=0; i<N; i++){
        if(A.at(i).second>rest){
            money+=rest*A.at(i).first;
            break;
        }
        else{
            money+=A.at(i).second*A.at(i).first;
            rest-=A.at(i).second;
        }
    }
    cout << money << endl;
}
```
【jpostal】　jQuery　住所自動入力　rails  おそらく一番簡単な方法で



![画面収録 2020-05-03 19.03.08.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/f65006db-94d5-c31b-1d56-ee0a3c38786e.gif)

##【ゴール】
郵便番号を入力すると、自動で住所が入力される

参考：https://remonote.jp/rails-jp_prefecture-jppostal

##【メリット】
■　UXの向上
■　javascript理解度向上


##【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

##【実装】

###１. 外部の準備（一番重要漏れないように!!）

　※gem 2種類導入
　※下記のURLで　’jquery.jpostal.js’　を入手し作成したアプリケーションの
　　javascriptsディレクトリ内へ保存
　　https://github.com/ninton/jquery.jpostal.js

```gemfile.
gem 'jp_prefecture' ＃住所取得用
gem 'jquery-rails'　＃jquery起動用
```

```mac.terminal
$ bundle install
```



###２. 練習用のアプリケーションを追加
　※[こちら](https://qiita.com/tanaka-yu3/items/3fe1ed2852c6513d3583)を参照
　※scaffoldを使用（今回はuserを使用）

```mac.terminal
$ rails g scaffold Users name:string text:text postcode:integer prefecture_code:integer address_city:string address_street:string address_building:string
```
カラムを全部作っておきます！！

```mac.terminal
$ rails db:migrate
```


###３.viewを調整
　※「id」以下を各記述に追記、**ここ重要、jqueyで読み込みを可能にする為**

```user/_form.html.erb
<%= form.text_field :postcode , id: "user_postcode" %>
<%= form.text_field :prefecture_code , id: 'user_prefecture_code' %><br>
<%= form.text_field :address_city , id: "user_address_city"%>
<%= form.text_field :address_street , id: "user_address_street"%>
```

###4. javascripts 記述

```javascripts/application.js
 //= require jquery #13行目に追加
```
　※　**’//= require_tree .’　より下の行には絶対に記述しないでください**読み込まれません

```javascripts/users.coffe
$ ->
  $("#user_postcode").jpostal({
    postcode : [ "#user_postcode" ],
    address  : {
                  "#user_prefecture_code" : "%3",
                  "#user_address_city" : "%4",
                  "#user_address_street" : "%5%6%7"
                }
  });
```
※　ここでviewに記述した　’id’ を認識しviewを変更さしてくれます。

以上
【備忘録】teratermで認証画面が出なかったときの対処法

#やりたかったこと
WindowsからTeraTermを使って、ラズパイで動いているUbuntu MATEへのssh接続

#陥った症状
最初の画面でラズパイ端末のIPアドレスを入力したものの、
ユーザー名やパスワードを入力する認証画面が出てこず、
そのままteratermが終了した。(エラーメッセージ等も何も出ず)


以下、そのときのほかの状況
・windowsからのpingは正常に通った。
・ubuntu側でsshdサービスの起動は出来ている。
・利用するポート番号の許可もしている。

#原因
↓こちらの記事の中の「SSHホストキーの生成」が必要でした。
[Ubuntu MATE (18.04.2) にsshで接続するための設定 - cutxoutの日記]
(https://cutxout.hatenadiary.jp/entry/2019/06/12/193039)

SSHホストキーを手動で作成する必要があったので、
リンク先の手順通りに作成したところ、
teratermで正常に認証できるようになりました。


初めてのteraterm、初めてのLinuxへのSSH接続だったので
初歩的なミスだったかもしれませんが、
検索しても同じ症状について引っ掛からなかったので少し苦戦しました。