OmniAICreator/Qiita-1.07M huggingface dataset:
WebAssembly入門してみた

ふと，WebAssemblyを試してみようと思い立ち，やってみました．

## WebAssemblyとは
WebAssemblyはブラウザでコードを高速で動かすものです．Webのフロント側で動作する言語といえばjavascriptでした．javascriptは動的型付け言語でインタプリタ型なので，直観的で簡単に記述できる反面，型推論しながら実行するため，遅いというような特徴があります．そこで出てきたのがWebAssemblyで，これは静的型付け言語を中間コードにコンパイルし，そして，バイナリフォーマットに変換します．このバイナリフォーマットを使うことでファイルサイズの縮小と構文解析の処理を短縮することによる実行速度の高速化を実現する技術という理解でいます．（30分ほど勉強した理解）

まだ読んでないですが，下の記事WebAssemblyの理解を深めるのに良さそうです．
https://qiita.com/ShuntaShirai/items/3ac92412720789576f22

## 入門

実行OSはUbuntu 18.04.4でやりました．Ubuntu 16.04が一番良いらしい．
下記のサイトの通りに動かしてみました．
https://webassembly.org/getting-started/developers-guide/

まずはじめに，

```bash
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
```

emsdkというのをinstallする手順ですね，Githubからcloneしてきて，install．
あとは

```bash
source ./emsdk_env.sh --build=Release
```
でパスを通して，コマンド実行の準備完了．
ここからがメインで，C言語でWeb APIを作ります．
新しく`hello`ディレクトリを作成してあげて，その直下に以下の内容の`hello.c`を作成します．

```c
#include <stdio.h>
int main(int argc, char ** argv) {
  printf("Hello, world!\n");
}
```

`hello.c`ができれば，

```
emcc hello.c -o hello.html
```
を実行してあげて，`hello.c`をコンパイル．
コンパイル後，ディレクトリには，

```bash
ll
total 256
drwxr-xr-x 2 kerneltyu kerneltyu   4096  5月 10 02:37 ./
drwxr-xr-x 3 kerneltyu kerneltyu   4096  5月 10 02:35 ../
-rw-r--r-- 1 kerneltyu kerneltyu     84  5月 10 02:37 hello.c
-rw-r--r-- 1 kerneltyu kerneltyu 102675  5月 10 02:37 hello.html
-rw-r--r-- 1 kerneltyu kerneltyu 115460  5月 10 02:37 hello.js
-rw-r--r-- 1 kerneltyu kerneltyu  21716  5月 10 02:37 hello.wasm
```
というようなファイルができます．javascriptファイルとhtmlとバイナリフォーマットのwasmができています．

```
emrun --no_browser --port 8080 .
```
で立ち上げて，`localhost:8080`にアクセスすると

<img width="788" alt="wa-demo.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250271/6eadb994-9c20-4b56-54bf-16290226fb57.png">

このような画面が表示されます．
以上，WebAssemblyの入門をしてみました！

## 疑問点
よく分からないところがあったので，記録として残しておきます．
1. 今回の例だとjavascriptを使うよう部分がなかったように思う．（生成されたhtmlやjsには結構な量のコードが書かれてたけど）いまいち利点が良く分からない．たぶんもっとjsを使うようなもので実験してみる必要がありそう．
2. ブラウザでデバッグするときはどうするんだろう？ログ吐き出しながらになるのかな．jsほどリッチなデバッグ環境ではなさそう．
3. htmlとwasmをどう対応付けているのかが分からなかった．

## 感想
C言語でWebアプリ開発ができる時代が迫っていているんだなと実感できたのは良かったです．どんどんWebアプリがリッチになってきていることやエッジでの実行の需要の高まりといった背景をひしひしと感じます．自分的にはエッジでの活用を深ぼっていきたいかなと思いました．
ふと思い立って書き始めましたが，さらに興味がわいてきました．もう少し勉強してみよう．

## 参考
[WebAssemblyとRustが作るサーバーレスの未来](https://thinkit.co.jp/article/17486)
[WebAssembly](https://webassembly.org/)
【Python】Qiitaのトレンドを取得

##当記事の目的
PythonでQiitaのトレンドを取得する。

##Pythonがインストールされていることを確認。

```
> python -V
Python 3.8.2
```
##モジュールをインストール
requestsとbeautifulsoup4

```
> pip install requests beautifulsoup4
```
##取得スクリプトを作成
```python:qiita.py
import requests
from bs4 import BeautifulSoup
import json
import re

html = requests.get('https://qiita.com')

qiita = BeautifulSoup(html.content, "html.parser")

qiita.select('div[data-hyperapp-app="Trend"]')

target_div = qiita.select('div[data-hyperapp-app="Trend"]')[0]

trend_items = json.loads(target_div.get('data-hyperapp-props'))

for v in trend_items['trend']['edges']:
    print(v['node']['title'])
```

##実行

```
> python qiita.py
タダで学べるデータサイエンス名著5冊 【日本書は高額でも英語ができれば怖くない】
11種類のオペレーティング・システムについてまとめてみた
初心者だって「Python完全に理解した」って言いたい
超基礎からの 速習 Docker (1)
仮想DOMの作りかた
ESLint v7.0.0 の変更点まとめ
Flutter初見が5日間のハッカソンでアプリ開発してきた
「関数型プログラミング」と「オブジェクト指向」ってなんやねんPython編
最強のLaravel開発環境をDockerを使って構築する【新編集版】
明日から使えるDDDのためのユースケース駆動開発（ICONIXプロセス）
簡単な線形代数で考えるエニグマ暗号
凛世の自転周期を計測する
mem2regを解説してみる
Processingでタイピングゲームを作ろう！
ImageMagick でライフゲームを動かすシェル芸
【自動化】WEBサイトの変更を検知してLINEに通知する
格闘ゲームのコマンド判定をReactiveに書いてみた
古代の暗号をpythonで実装する
Pythonで競プロするのに必要な機能をまとめてみた~itertools~
コミュニティドリブンの SaaS のつくりかた
STのモータ制御開発キットで『自力で』モータを回す　Vol.1 強制転流
nested dataでggplot
Oracle Database SE向け高可用性ソリューションStandard Edition High Availabilityがリリースされたよ
【悲報】連休が終わる【Vue.js + Django REST frameworkで作るカレンダー】
PostgreSQL 13がやってくる！(6) - psqlの改善あれこれ
プロトタイプにおけるAPI利用ランキング 2020年5月版（2015年との比較）-スマートフォンアプリから物理世界へ- #protopedia
はじめてのNetlify: git pushでサイトを公開する極小手順
Web UX 指標を3つに再整理、定量化した Web Vitals とそのツールの紹介
ゼロから作るDeepLearning　4.4.2 ニューラルネットワークに対する勾配　numerical_gradient関数についての疑問が解決しました。
ゼロからBlazor（プロジェクト作成～ログイン機能実装まで）
```
【Python】ヤフーニュースの主要トピックを取得

##当記事の目的
Pythonでヤフーニュースの主要トピックを取得する。

##Pythonがインストールされていることを確認。
```
> python -V
Python 3.8.2
```

##モジュールをインストール
requestsとbeautifulsoup4

```
> pip install requests beautifulsoup4
```

##ニュース取得スクリプトを作成

```python:news.py
import requests
from bs4 import BeautifulSoup

html = requests.get('https://news.yahoo.co.jp')

yahoo = BeautifulSoup(html.content, "html.parser")

for title in yahoo.select(".topicsList_main li.topicsListItem a"):
    print(title.getText())
```
##実行
```
> python news.py
中国公船が領海侵入 2日連続
岐阜が「出口戦略」5指標示す
調停中断 親「子に会えない」
看護師と家族に誹謗中傷 神戸
正恩氏 プーチン氏に祝電
ソウル 遊興施設を営業禁止に
リトル・リチャード氏 死去
室井佑月と米山隆一氏 結婚へ
```
たけしの雑記帳初めてみた

#概要初めてみました
まったくの初心者
これから何が書いてみていきます。
#見出し無知からのスタート
##見出し恥ずかしいけどやってみる
https://nadesi.com/top/
```
# はじめてのプログラミング
[なでしこ](https://nadesi.com/top/)
```
![DB01C9EA-1A16-4CD9-A9FB-53D512B927A6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609267/dd8f1058-39c2-dc88-630a-ebc04c8f08e5.png)
【Ruby】ヤフーニュースの主要トピックを取得

##当記事の目的
Rubyでヤフーニュースの主要トピックを取得する。

##Rubyがインストールされていることを確認。
```
> ruby -v
ruby 2.6.6p146 (2020-03-31 revision 67876) [x64-mingw32]
```

##最新のchromeドライバーを取得、パスを通す（ブラウザも最新バージョンに更新）
http://chromedriver.storage.googleapis.com/index.html

##モジュールをインストール
ffiとselenium-webdriverとnokogiri

```
> gem install ffi selenium-webdriver nokogiri
```

##ニュース取得スクリプトを作成

```ruby:news.rb
require "nokogiri"
require "selenium-webdriver"

options = Selenium::WebDriver::Chrome::Options.new
options.add_argument('--headless')

driver = Selenium::WebDriver.for :chrome, options: options
driver.manage.timeouts.implicit_wait = 10

URL = "https://news.yahoo.co.jp"

driver.get URL
doc = Nokogiri::HTML driver.page_source.encode("UTF-8")

doc.css('.topicsList_main li.topicsListItem a').each do |title|
  puts title.inner_text
end

driver.quit
```

##実行

```
> ruby news.rb
(selenium実行時のメッセージを省略)
中国公船が領海侵入 2日連続
岐阜が「出口戦略」5指標示す
調停中断 親「子に会えない」
看護師と家族に誹謗中傷 神戸
正恩氏 プーチン氏に祝電
ソウル 遊興施設を営業禁止に
リトル・リチャード氏 死去
室井佑月と米山隆一氏 結婚へ
```
Docker + VSCodeで最強のLaTeX環境を構築する！！

# 最強のLaTeX環境を構築する！！

- macOS Catalina 10.15.4
- Docker 19.03.8

試していませんが、Linuxでも動くと思います。

## できること
- ファイルを変更するだけで自動コンパイル
- ショートカットによる手動コンパイルも可能
- コンパイル時に生成される不要なファイルを自動で削除し、pdfファイルはbuildディレクトリに格納される
- Dockerを利用することにより、環境構築が非常に簡単+ローカル環境を汚さない

## クイックスタート

1. https://github.com/moisutsu/latex-docker をcloneする

    ```bash
    $ git clone https://github.com/moisutsu/latex-docker
    ```

1. Dockerを使ったコミットまでチェックアウトする

    ```bash
    $ git checkout 2792334
    ```

1. Dockerイメージ `paperist/alpine-texlive-ja` をpullする

    ```bash
   $ docker pull paperist/alpine-texlive-ja
    ```

1. VSCodeの `settings.json` に以下を追加する。

    ```json
{
    "latex-workshop.latex.recipes": [
      {
        "name": "compile",
        "tools": [
          "ptex2pdf"
        ]
      }
    ],
    "latex-workshop.latex.tools": [
      {
        "name": "ptex2pdf",
        "command": "bash",
        "args": [
          "%DIR%compile.sh",
        ]
      }
    ],
    "latex-workshop.latex.autoBuild.run": "onFileChange",
    "latex-workshop.docker.enabled": true,
  }

    ```

1.  VSCodeの `keybindings.json` に以下を追加する。

    ```json
[
    {
		"key": "ctrl+alt+b",
		"command": "latex-workshop.build",
		"when": "resourceLangId == latex"
	},
]

    ```

以上です！！

あとはリポジトリ内のTeXファイルを変更するだけで自動でビルドを行うことができます。
また手動のコンパイルは `command + option + b` or `ctrl + alt + b` で行うことができます。

## 環境について

構成としては、TeXファイルのビルドとファイルの整理を行うシェルスクリプトを用意して、ファイルが変更されたときと、ショートカットを入力したときにそのシェルスクリプトを実行されるようにしています。

またDockerイメージには[paperist/alpine-texlive-ja](https://github.com/Paperist/docker-alpine-texlive-ja)を使わせていただきました。

## 最後に

DockerとVSCodeは最高です！！

## 参考

[Docker+VSCodeで保存時に自動でコンパイルされるLatex環境を作る話](https://qiita.com/maitaken/items/139f626bc8d895f2cc69)
[DockerでらくらくLaTeX環境構築](https://qiita.com/Shitimi_613/items/9706d57fb7bc17cbed0e)
【NodeJS】ヤフーニュースの主要トピックを取得

#当記事の目的
NodeJSでヤフーニュースの主要トピックを取得する。

##NodeJSがインストールされていることを確認。

```
> node -v
v12.16.2
```
##puppeteerパッケージをインストール
```
> npm i puppeteer
```

##インストール済みのパッケージを確認
```
> npm list --depth=0
`-- puppeteer@2.1.1
```
##ニュース取得スクリプトを作成
```javascript:news.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.yahoo.co.jp/');
  const itemSelector = '.topicsList_main li.topicsListItem a'

  // ヤフーニュースページ内で主要トピックを取得
  const newsList = await page.evaluate((itemSelector) => {
    const news = [];
    const nodes = document.querySelectorAll(itemSelector);
    nodes.forEach(node => {
      news.push(node.innerText);
    })
    return news;
  }, itemSelector);

  //表示
  newsList.forEach(news => {
    console.log(news);
  });

  // ブラウザを閉じる
  await browser.close();
})();
```
##実行
```
> node news
中国公船が領海侵入 2日連続
岐阜が「出口戦略」5指標示す
調停中断 親「子に会えない」
看護師と家族に誹謗中傷 神戸
正恩氏 プーチン氏に祝電
ソウル 遊興施設を営業禁止に
リトル・リチャード氏 死去
室井佑月と米山隆一氏 結婚へ
```
【AWS】ELB 経由のアクセスで時々 1 分間以上繋がらなくて困った話

原因が掴めなくて結構困ってたので、似たような症状を抱える人が引っかかるように原因と対策を書いておきます。

# TL;DR
#### 問題
ELB 経由で EC2 にアクセスすると、最初の接続が遅くなるときがあった。具体的には 60 秒ほど。しかし、一回接続するとしばらく大丈夫だったりする。

#### 解決した方法
* ELB のサブネットに **インターネットゲートウェイ** を当てる。

インターネットゲートウェイのないサブネットを持つ ELB には接続できない。片方のサブネットにだけついてたりすると中々気づけなくて厄介。

(^ｏ^)元凶はわたしです

# これと似た症状の人には効くかも？

**1. サーバーの inital connection が遅い。**

ブラウザ(Chrome)の検証ツールの「Network」タブから確認
![スクリーンショット 2020-05-09 18.33.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241846/2752dcb3-d0a0-ee16-3c7f-7b881a4b40e3.png)

**2. curl コマンドで確かめる**

curl コマンドを使って状況を把握する

```shell:curl
curl -v -k -3 SOME_URL
```

```shell:結果
$ curl -v -k -3 SOME_URL
* Rebuilt URL to: SOME_URL
*   Trying ELBのIP1...
* TCP_NODELAY set
* Connection failed
* connect to ELBのIP1 port 80 failed: Operation timed out
*   Trying ELBのIP2...
* TCP_NODELAY set
* Connected to SOME_URL (ELBのIP2) port 80 (#0)
```

ELB は **Availability Zone ごとに作られる** ので、1 つ目の ELB にタイムアウトし、2 つ目の ELB に繋がる。
この時、タイムアウトするまでに 1 分以上かかっていた。


# 解決策

1. 「VPC > Subnets」 で ELB に割り当ててるサブネットの **Route Table を確認する**
2. 「VPC > Route Table」で該当の Route Table に **インターネットゲートウェイを追加する**

サブネットはインターネットゲートウェイをルーティングテーブルに追加すると、インターネットに繋がるようになります。

※サブネットを「パブリック」にしたくない場合は新たにサブネットを作ったりする必要があるかもしれません。

![スクリーンショット 2020-05-09 19.13.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241846/fc252372-5131-8983-de20-2d25c2219dc2.png)

# まとめ
* ELB のサブネットはインターネット経由で使う場合は、インターネットゲートウェイを付与する必要がある。
* ELB のサブネットのうち、どれか一つが設定漏れしてると中々症状に気づきにくかった

# 参考文献
全く同じ原因で困ってる人がいた…ありがとう Amazonian…
[ELB Connection Delay to Backend Instance
](https://forums.aws.amazon.com/thread.jspa?threadID=121804)

この方とも状況が全く同じでした。
[インターネットに公開する ELB は Private Subnet に配置してはいけない
](https://qiita.com/hoto17296/items/b097214640bdcc6413e2)
Raspberry PI4にOS(Raspbian)をインストール

#1.事前準備
今回はRaspberry PI4に合わせてHDMIケーブルとUSB-C（Type C)電源を購入する必要があります。
もし既存のRaspberry PI3Bの電源を利用する場合は、USB-Cに変換するアダプターを別途で購入する必要があります。

①Raspberry PI本体
②MicroSDメモリカード(16GB以上)
③HDMIケーブル(Raspberry Pi 4 公式 micro HDMI-HDMIオスケーブル（1m）)
④Raspberry Pi 4 USB-C (Type C）電源、5V 3A ACアダプター
⑤LanケーブルまたはWIFI環境
⑥USBタイプのキーボードとマウス
⑦RaspbianOSをダウンロード
⑧SDフォーマットツールをダウンロード及びインストール
⑨Win32 Disk Imagerをダウンロード及びインストール

#2.OS(Raspbian)をインストール
①Raspbian OSをダウンロードし、OSファイルを解凍します。
※公式サイト：https://www.raspberrypi.org/downloads/raspbian/
[Raspibian OSをダウンロード](https://downloads.raspberrypi.org/raspbian_full_latest)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/1be53cdc-cd64-ebf7-89d9-f87bab2add6d.png)

②MicroSDフォーマットツールをダウンロードし、インストールします。
※公式サイト：https://www.sdcard.org/jp/downloads/formatter/eula_windows/index.html
[SDフォーマットツールをダウンロード](https://www.sdcard.org/jp/downloads/formatter/eula_windows/index.html
)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/52a3c665-36ff-0502-aa31-6c452bc28afc.png)
③SDフォーマットツールからMicroSDをフォーマットします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/c80526cc-bbfb-9ecf-1ad0-f898239fdcd8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/aa7e1876-4316-18bd-164e-70174a2604d3.png)
④Win32 Disk Imagerツールを利用してMicroSDメモリカードにOSをインストールします。
※ダウンロードサイト：https://sourceforge.net/projects/win32diskimager/

Raspberry PI公式サイトからダウンロードしたファイルを解凍します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/ce7b8e52-4905-aefc-4f38-6fb9cefa2f5b.png)
Win32 Disk Imagerツールを起動し、解凍したRaspbianOSファイルを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/0ddca851-45ea-3ecc-c378-2d5eeb83b4dd.png)
WriteボタンをクリックでMicroSDメモリカードにOSをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/59c617a9-f3b6-83c3-6c0d-a1c765e2c912.png)

#3.初期起動画面
・RaspberryPIが正常に起動されると次の画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/e647a77e-cac7-a93e-060e-7c27f4cd65d9.png)

#4.その他
以下の３つのコマンドを実行してください。
①sudo apt-get update
※インストール可能なパッケージを更新します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/4520446c-f239-261a-65f7-04086be1a361.png)
②sudo apt-get upgrade
※インストール済みのパッケージ更新後、新しいバージョンにアップグレードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/eb1fe3fb-b26f-0d47-6f45-12e3f442ef1d.png)
③sudo apt-get dist-upgrade
※OSを最新にアップグレードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/2412a68f-12e2-9bb5-b6f6-13b8c2f0c8a1.png)

#5.終わりに
これでRaspberryPIにOS（Raspbian）インストールが完了しました。
初期設定もありますがそれは次回に追加します。
お疲れさまでした。
「HTTP」の危険性と「HTTPS」について

# はじめに
デプロイしたWEBアプリケーション。「保護されていない」というメッセージが表示されることはありませんか？
これは、GoogleChromeで「HTTPS」に対応していないサイトとみなされているからです。
このままではセキュリティ面で大きな問題となる場合が、、、
今回は、「HTTP」の危険性と、「HTTPS」について解説させていただきます。

# まずは「HTTP」とは
HTMLで書かれている文章などをやりとりする際に使われる通信手段（プロトコル）です。
Webサービスを実現するためのプロトコルとして長く使われてきましたが、セキュリティー面で以下の問題があります。

### 【問題１】データを暗号化する仕組みがない

 - 盗聴される危険性がある
 - 個人情報やクレジットカード情報などを送受信する際に大きな問題となる。

### 【問題２】通信相手を認証しない

認証にはサーバを認証するサーバ認証と、
クライアントを認証するクライアント認証の２種類ある。

【サーバを認証しない場合】
HTTPを使ったWebサービスは偽のサーバに誘導されて
個人情報を盗まれる危険性があります。（フィッシング詐欺）
![610734305.150853.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594922/46745ca4-7eed-74d1-302a-764900d4b168.jpeg)

【クライアントを認証しない場合】
同じくクライアントも認証しないので、Webサーバ側も通信相手を確認できず危険です。
![610735294.762582.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594922/31637e4b-24d5-9ac1-dea7-d2b531940e2a.jpeg)

### 【問題３】通信データの改ざんを検出できない。
HTTPには改ざんを検出する機能がないです。

例えば、クライアントが１個みかんを購入するとします。
購入を実行しサーバへデータが送られる途中で、攻撃者から１００個に書き換えられてしまいました。
サーバには１００個でデータが届きました。
これがデータの改ざんです。

このように、HTTPでは改ざんを検出できない為、通信途中でデータを勝手に書き換えられる危険性があります。

# その問題を解消する為に生まれたのが「HTTPS」
「HTTP」に「TLS（SSL）」を組み込んだもの。
結論からお伝えすると、「HTTPS」対応にすることで、先ほどの「HTTP」の問題点はすべてクリアできます。

### 「TLS」とは
トランスポート層のセキュリティプロトコル。
以下の機能をしてくれる。

- 「サーバ」と「クライアント」で認証ができる（「TLS」にて実行される「ハンドシェークプロトコル」で証明書が発行される為）

- 通信データを暗号化してくれる（「ハンドシェークプロトコル」で共有される、暗号化鍵を使用する為）

- 改ざんを見つけてくれる（クライアントが「HTTPS」をする際に、「ハンドシェークプロトコル」で共有したMAC鍵を送信し、サーバ側で改ざんを検知できる仕組みがある為）

### 「ハンドシェークプロトコル」とは
「TLS」の中にあるプロトコル。
事前に「クライアント」と「サーバ」間でやりとりを行い、確約したら、暗号化鍵などを生成してくれる。
生成された暗号化鍵などは「クライアント」と「サーバ」間で共有される。

# まとめ
このように、「HTTP」での通信はかなり無防備に近い状態で危険ということが分かりました、、、
Webアプリケーション制作する際は、「HTTPS」に対応させることが必須ですね。
binfmt + wine で Windows バイナリを Linux で ./a.exe のようにして実行するメモ

## 背景

Wine で Windows バイナリを動かす時に, `wine64 a.exe` とか打つのがめんどい.
`./a.exe` とかで, `.exe` を直接実行したい.

binfmt でいけます.

## 方法


https://wiki.archlinux.org/index.php/Wine#Execute_Windows_binaries_with_Wine_implicitly

Ubuntu(systemd 系)だと, まずは `systemd-binfmt.service` を立ち上げておきます.

```
$ sudo systemctl start systemd-binfmt
```

binfmt 用の設定を `/usr/share/binfmts` に作ります.

https://www.winehq.org/pipermail/wine-devel/2016-August/114478.html

Ubuntu apt だと, wine-binfmt パッケージがあります.
(ただ, これだと設定ファイルをインストールするだけのようで, 後述の `update-binfmts` はいずれにせよ必要だった) 


`/usr/share/binfmts/wine` 設定ファイルを, 以下のように import して反映させます.

```
$ sudo update-binfmts --import wine
```


あとはこれで, windows バイナリを `./a.exe` のようにして起動できます!

## DLL path

MinGW や llvm-mingw(clang)だと, 何もしないとランタイム dll
(`lib***.dll`) が見つからないエラーが出るため, `PATH` or `LD_LIBRARY_PATH` で `.dll` の場所を指定する必要があります.

アプリの構成によっては, 完全 static ビルドができるかもしれません.

msys2とC++で特定のDLLに依存しないwindowsバイナリを作る
https://siuncyclone.hatenablog.com/entry/2018/07/21/194629

llvm-mingw(libcxx, clang)の場合は

```
$ -static -lstdc++
```

でいけます.
(例外もうまく扱えているようですが, SEH の場合どうなるかは不明. 一応 libunwind, libcxx でサポートされているっぽい? https://reviews.llvm.org/D50564 )



## binfmt とは?


The Linux binfmt subsystem
http://anadoxin.org/oldblog/linux-binfmt

https://access.redhat.com/solutions/1985633


バイナリのフォーマット(通常はヘッダ)を見て, どのようにプロセスを実行するかを切り替える機能になります.

いろいろ頑張ると, aarch64 バイナリを, `./aarch64.out` で qemu + chroot で aarch64 システムで実行, みたいなのができます.

qemu + binfmt + chroot で AARCH64 環境を構築する.
https://syoyo.wordpress.com/2013/12/17/qemu-binfmt-chroot-%E3%81%A7-aarch64-%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B/
原稿用紙枚数換算

文字列を原稿用紙枚数換算する処理が必要になったからついでにまとめとく。

# 原稿用紙枚数を換算する関数
```javascript:JavaScript
const manuscriptCount = (text) => {
  let lines = 0;

  const textArray = text.split("\n");

  textArray.forEach(t => {
    if (t.length === 0) {
      lines += 1;
    } else {
      t = t.slice(0,1) === ("　" || "「") ? t : "　" + t;
      t = t.replace("。」","」").replace(/(\d{2})/g, "0").replace(/[a-zA-Z]{2}/g, "a");

      let start = 0;
      let end = start + 21;
      while (start < t.length) {
        lines++;
        start = t.slice(-1) === ("。" || "、" || "」") ? end : end - 1;
        end = start + 21;
      }
    }
  });

  return ((lines / 20) | 0) + 1;
};

const text = "処理する文字列";

console.log(manuscriptCount(text));
```

## 処理について
* 改行コードで分割して配列にする（改行コードのぶれは今回は無視）
* 分割した配列について以下の処理
  * 改行のみで文字数0だったら1行増やす
  * 文字数0でなければ以下の処理
     * 一文字目がスペースまたは鍵括弧（「）ではなかったらスペースを追加
     * 句点＋鍵括弧（。」）は1文字、半角英数字は2桁で1文字分にしてカウント
     * 20文字ごとに行数のカウントを増やす（21文字取得して行末の文字を判別する）
     * 行頭の記号（」、。）はぶら下げ処理をするから無視、それ以外の場合は次の開始位置を1文字戻す
* 20行につき原稿用紙1枚で出力


行頭に小書き文字が来るのは原稿用紙のルール的にはありらしいから処理してない。
考慮すべき要素は網羅してるはず。
文章書きではないから正確性の保証はできないけど、おおよその枚数把握にはなる。
本番環境(HEROKU)で Uncaught TypeError・・・

#はじめに
Ruby on Railsで作成中の個人アプリに修正を加え、Herokuにデプロイしたところ、
検証ツールに"Uncaught TypeError:\$(...) is not a function"
というエラー文が・・・
解決方法を書き留めておきたいと思います。

#ローカルでは全く問題なかったのに！
エラーがないかしっかりと確認してからデプロイを行なったのに・・・
と初心者の私はかなり焦りました。

まずは落ち着いて、エラー文をGoogle翻訳してみる。
\$(...) is not a function” →　”\$(...)は関数ではありません。”

・・・よくわからないけど ”\$(...)” はjQueryかな？
という事はjQueryがうまく読み込めてないのかも？

#jQuery＆エラー文で色々検索してみる
すると今回の原因が判明しました。
・・・jQueryを読み込む記述を書いていなかった！

htmlのhead部分に
jQueryを読み込む記述を書いていなかった事が原因でした。

```ruby:application.html.haml(変更前)
  %head
    (省略)
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'
```

下記の記事を参考に、jQueryを読み込む記述を追加し、
再度Herokuにデプロイしたところ、エラーが解消しました。
jQueryも問題なく動いてくれていました。
参考：[railsでjQuery/JavaScriptがうまく動かない時の対処法](https://qiita.com/keiy121/items/d1880ff2d0de444458c7 "railsでjQuery/JavaScriptがうまく動かない時の対処法")

```ruby:application.html.haml(変更後)
  %head
    (省略)
    = stylesheet_link_tag    'application', media: 'all'
    %script{src: "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"} 
    = javascript_include_tag 'application'
```

参考記事に記載されているように、jQueryを読み込む記述は
jQuery読み込み→スクリプト読み込みとなるようにしてください。

#まとめ
本当に初歩的なところで躓いてしまいました.
また、なぜローカルでは問題なかったのかという疑問は調べても解決できず・・・
(ご存知の方がいらっしゃいましたらぜひ教えてください！）

引き続き、頑張っていきたいと思います！
ElastAlertでアラート通知先にLine Notifyを使った時のメモ

# 環境

AWS Workspaces
Amazon Linux2
Docker
　Elasticsearch 7.6.2
　Kibana 7.6.2
　ElastAlert 0.2.1＋ElastAlert Server

# 動作確認

#### Lineにグループ作成

#### 以下のサイトを参考にアクセストークン取得

[[超簡単]LINE notify を使ってみる](https://qiita.com/iitenkida7/items/576a8226ba6584864d95)

#### アラートルールファイルにLineNotifyの設定を追記

```
alert:  
  - "linenotify"  
linenotify_access_token: "line token"
```

#### ElastAlertのDockerコンテナ再起動

以下のサイトと同様のエラーが出る

[Line Notify Error and Rule of Change Error #2307](https://github.com/Yelp/elastalert/issues/2307)

#### loader.pyをダウンロード、修正、docker-composeで起動時にマウント

[Line notify is missing #2516](https://github.com/Yelp/elastalert/issues/2516)
>Hi,
>
>I think Line alerter is missing in the loader.py. There was >this line in an older version
>'linenotify': alerts.LineNotifyAlerter

修正前(loader.pyの修正箇所の付近のみ)

```loader.py
        'hivealerter': alerts.HiveAlerter
    }
```

修正後(loader.pyの修正箇所の付近のみ)

```loader.py
        'hivealerter': alerts.HiveAlerter,
        'linenotify': alerts.LineNotifyAlerter
    }
```

docker-compose.yml修正

ElastAlertのコンテナのマウントするものの設定にloaders.pyを追加

修正前(修正箇所付近のみ)

```
    volumes:
      - ./praeco/config/elastalert.yaml:/opt/elastalert/config.yaml
      - ./praeco/config/api.config.json:/opt/elastalert-server/config/config.json
      - ./praeco/rules:/opt/elastalert/rules
      - ./praeco/rule_templates:/opt/elastalert/rule_templates
```
修正後(修正箇所付近のみ)

```
    volumes:
      - ./praeco/config/elastalert.yaml:/opt/elastalert/config.yaml
      - ./praeco/config/api.config.json:/opt/elastalert-server/config/config.json
      - ./praeco/rules:/opt/elastalert/rules
      - ./praeco/rule_templates:/opt/elastalert/rule_templates
      - ./praeco/patch/loaders.py:/opt/elastalert/elastalert/loaders.py 
```

#### 動作確認

```
docker-compose up -d
```

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208807/d68ea8f2-80b5-5a59-157d-8d8247caa477.png)

#### ElastAlert GitHubのサイトでプルリクエスト

[Fix LineNotify #2783](https://github.com/Yelp/elastalert/pull/2783)
macOS Sierraのインストール 用 USBメモリ作成方法の落とし穴

こちらの記事
[macOS Sierra 10.12.3 のクリーンインストール + USBメモリ作成方法](https://qiita.com/ryosuke1120/items/9a7a4d716e6e51e15ead)
を参考に、MacBookPro（late2011）にSierraを入れようとしたが何度やってもcreateinstallmedia の実行で
```/Volumes/USBメモリ is not a valid volume mount point.```
というエラーが出てしまう。
小一時間悩んだけど、どうやらInfo.plistのバージョンが違っているのが原因らしい

なので、
```sudo plutil -replace CFBundleShortVersionString -string "12.6.03" /Applications/Install\ macOS\ Sierra.app/Contents/Info.plist
```
としてから
```>sudo /Applications/Install\ macOS\ Sierra.app/Contents/Resources/createinstallmedia --volume /Volumes/USBメモリ --applicationpath "/Applications/Install macOS Sierra.app" --nointeraction
```

を実行すればいけました。
【Mac】rbenvがインストールできないときの解決方法



#エラー内容の確認
下記のようなエラー内容になったことでrbenvがインストールできないときのエラーの解消方法についてご紹介します。

```
$ brew install rbenv
The program 'brew' is currently not installed. To run 'brew' please ask your administrator to install the package 'linuxbrew-wrapper'
```

### Linuxbrewのインストール
エラーの記述内容に「Linuxbrewをインストールしてください」とありますので下記のコマンドを実行します。

```
$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/Linuxbrew/install/master/install.sh)"
```
するとまたエラー内容が表示されてしまいました！

```
Warning: /home/linuxbrew/.linuxbrew/bin is not in your PATH.
```
**パスがありません**となってしまうので下記のコマンドを実行しましょう。

```
$ echo 'export PATH="/home/linuxbrew/.linuxbrew/bin:$PATH"' >>  ~/.bashrc
$ source ~/.bashrc
```
すると**Linuxbrewのインストールが完了しています**ので再度rbenvをインストールして見ましょう^_^
trouble with roscd command when using colcon build on ROS1

Though colcon isn't designed for ROS1 system, I'd like to jump to package location like `roscd` and build package like `catkin tools`.

Here is a temporary solution, please copy and paste that to `.bashrc`

```
COLCON_ROOT=/home/user/colcon_ws

function colconcd () {
    local prefix path str arr
    prefix=${1%/}
    if [ $prefix ]; then
        path=`roscd ${prefix} && pwd`
        str=`cat $path/cmake/${prefix}Config.cmake | grep src | xargs`
        arr=(${str// / })
        cd ${arr[1]%")"}
    else
        cd $COLCON_ROOT
    fi
}

function colcon-build () {
    local path
    path=`pwd`
    if [ $1 ]; then
        cd $COLCON_ROOT
        colcon build --packages-select ${1%/}
        cd $path
    else
        cd $COLCON_ROOT
        colcon $COLCON_ROOT/build
        cd $path
    fi
}

complete -F "_roscomplete_sub_dir" -o "nospace" "colconcd"
complete -F "_roscomplete_sub_dir" -o "nospace" "colcon-build"
```

`colconcd` command works like `roscd` and you can build specific package anywhere in work space with `colcon-build`.
TypeScriptでCSSの型定義ファイル(t.ds)を自動生成してimport

## 目的
TypeScriptでcssをインポートしたい
型定義ファイル(d.ts)を自動生成したい
型定義ファイルの自動生成は@teamsupercell/typings-for-css-modules-loaderを利用
(fork元のtypings-for-css-modules-loaderはメンテナンスされていない様子)

## 結果
型定義ファイル出力後
https://github.com/nsym7372/typescript-import-css

## 前提

### インストール

```package.json(抜粋)
  "devDependencies": {
    "css-loader": "^3.5.3",
    "style-loader": "^1.2.1",
    "ts-loader": "^7.0.3",
    "typescript": "^3.8.3",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
```

### ファイル配置

```
C:.
|   package-lock.json
|   package.json
|   tsconfig.json
|   webpack.config.js
|   
+---dist
|       index.html
|       index.js
|       
+---node_modules
|       (省略)
|               
\---src
        app.ts
        style.css
```

### 配置したファイルの内容

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="root">Hello World</h1>
    <script src="index.js"></script>
</body>
</html>
```

```app.ts
import * as style from "./style.css";  //style.css.d.tsが生成されるまではエラー

//cssの利用がない場合は、style.css.d.tsが出力されない
document.getElementById("root").classList.add(style.warn); 
```

```style.css
.warn{
    color:red;
}
```

## 手順

### @teamsupercell/typings-for-css-modules-loader導入

インストール

```
npm i -D @teamsupercell/typings-for-css-modules-loader
```

webpack.config 作成
プロジェクトのルートフォルダに配置

```webpack.config
const path = require("path")

module.exports = {
    entry: "./src/app",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "index.js"
    },
    module:{
        rules:[
            {
                test: /\.ts$/,
                loader: "ts-loader"
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "@teamsupercell/typings-for-css-modules-loader",
                    {
                        loader: "css-loader",
                        options: { modules: true }
                    }
                ]
              }
        ]
    },
    resolve:{
        extensions:[".ts", ".css"]
    }
}
```

### declare.d.tsを追加
srcフォルダ以下（style.cssと同じフォルダ）に作成

```declare.d.ts
declare module '*.css';
```

### webpackコマンドを実行して、d.tsファイルを自動生成

```package.json(抜粋)
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
```

```
npm run build
```

### 動作確認 
srcフォルダ以下にstyle.css.d.tsが作成されていることを確認

```style.css.d.ts
declare namespace StyleCssModule {
  export interface IStyleCss {
    warn: string;
  }
}

declare const StyleCssModule: StyleCssModule.IStyleCss & {
  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
  locals: StyleCssModule.IStyleCss;
};

export = StyleCssModule;
```

## 参考

@teamsupercell/typings-for-css-modules-loader
https://www.npmjs.com/package/@teamsupercell/typings-for-css-modules-loader
Javaの勉強備忘録

#　Javaの勉強始めたので備忘録
 Rubyと違って変数使うときには型を宣言してあげないといけないとか
修飾子とか覚えることが沢山あったので自身で見返せるようにしよう、
と思い至った。
　のと、マークダウン記法の学習も兼ねて...
　※箇条書きスタイルに近い

#　型の種類
 **プリミティブ型**か**参照型**に分かれる。
その中でもプリミティブ型は整数型や浮動少数型等々に分類される。
参照型はラッパークラスや文字列クラスに分けられる。

##　プリミティブ型
| 型名 | 型分類 | サイズ(bit) | 初期値 | 値 |
|:-:|:-:|:-:|:-:|:-:|
|  long | 整数  | 64  | 0L  | -9223372036854775808 ～ 9223372036854775807  |
| int  | 整数  | 32  | 0  | -2147483648 ～ 2147483647  |
| short  | 整数  | 16  | 0  | -32768 ～ 32767  |
| byte  | 整数  | 8  | 0  | -128 ～ 127  |
| double  | 浮動少数  | 64  | 0.0d  | 倍精度浮動小数点数  |
| float  | 浮動少数  | 32  | 0.0f  | 単精度浮動小数点数  |
| boolean  | 論理  | 1  | false  | true / false  |
| char  | 文字  | 16  | \u0000  | Unicodeの一文字(¥u0000～¥uFFFF)  |

変数宣言するときには無駄なメモリを使わないように適切な型を使用するように意識する。
※**倍精度浮動少数点数** = 浮動小数点形式の標準であるIEEE 754において64ビットの浮動小数点数表現
※**単精度浮動少数点数** = 浮動小数点形式の標準であるIEEE 754において32ビットの浮動少数点数表現

 **整数型**
　通常は[int]型を使用する。値が大きい場合は[long]型を使用
プログラム上では整数値は[int]型として扱われる。
[int]型の範囲から出る整数を扱う際は数値の最後に[L]または[l(小文字のL)]を記述して、
[long]型であることを示す必要がある。

**浮動少数型**
 通常は[double]型を使用する。
[float]型を扱う際は値の最後に[F]または[f]を記述する必要がある。

**論理型**
格納できる値は、真偽値の[true]と[false]のみ

**文字型**
1つの変数に格納できるのは1文字だけ。
一般的な文字を記述する際は['(シングルコーテーション)]で囲む必要がある。
文字コードは必要ない。

##　参照型
 データを扱うのではなく、データの格納されている参照先を保持する型

```String string = "禿";
```
とした場合、禿がstringに格納されるのでは無く、禿というデータがある参照先を保持する。
※捉え方間違っていたらコメントで教えてください...

**文字列クラス(String型)**
文字列を扱うクラス。プログラム上で記述する際には["(ダブルコーテーション)]で囲む。
プログラム上では[String]型として扱われる。

**ラッパークラス**
プリミティブ型をラッパークラスとして扱えるようにできるクラス。
プリミティブ型では扱えないことが扱えるようになる（後々記述予定)。

| プリミティブ型 | ラッパークラス |
|:-:|:-:|
| long  | Long  |
| int  | Integer  |
| short  | Short  |
| byte  | Byte  |
| double  | Double  |
| float  | Float  |
| boolean  | Boolean  |
| char  | Character  |

**オートボクシング、アンボクシング**
プリミティブ型からラッパークラスに自動変換を行うことを**オートボクシング**
逆のラッパークラスからプリミティブ型から**アンボクシング**という

```Integer integer1 = 5; //オートボクシング
   Integer integer2 = Integer.valueOf(5); //オートボクシングなし
   int int1 = Integer1; //アンボクシング
   int int2 = integer2.intValue(); //アンボクシングなし
```

**配列**
同じ型のデータを1つの変数で扱えるようにしたもの。

配列内データのことを**要素**という。
要素へのデータの代入、参照は**インデックス番号**を用いて行う。

　**インデックス番号**は0から始まり、配列から1引いた番号になる。

```int[] array1 = new int[]{1, 2, 3 }; //宣言と初期化
```

#　最後

多少なりにも自分の文字でまとめるため、結構な復習になると思った。
修飾子とかまだ完全に理解できていないため、まとめてみようと思う。
rustのpetgraph crateを使ってみる

## TL;DR

rustのpetgraphクレートを使うとグラフ構造が色々扱えるらしいので、触ってみた。
順次追記していく予定。

### union find tree

グループ分けを管理するデータ構造。

1. 要素xとyが同じグループに属するかの判定
2. 要素xとyの属するグループを併合

みたいなことができるらしい。自分で実装してみても良かったが、[petgraphクレート](https://docs.rs/petgraph/0.5.0/petgraph/#traits)では経路圧縮とランクを考慮した実装がされていて、1, 2を$O(α(n))$で処理できるらしいので、そのまま使えばいいかってなった。

```rust
use petgraph::unionfind::UnionFind;

// Union Find Treeの初期化
let mut tree :UnionFind<usize> = UnionFind::new(N);

// x, yのグループを結合
tree.union(x, y);

// x, yが同じグループに属しているか判定
let flag: bool = tree.equiv(x, y);

```
要件定義ができるようになるために〜おすすめ・読みたい記事まとめ〜

気になる記事があれば今後も追記していく

要件定義とは
---

[要件定義とは？重要なポイントから項目まで、わかりやすく解説します](https://kikakushosakusei.com/product/%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9%E3%81%A8%E3%81%AF%EF%BC%9F%E6%8A%BC%E3%81%95%E3%81%88%E3%82%8B%E3%81%B9%E3%81%8D%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%8B%E3%82%89%E5%AE%9F%E4%BE%8B%E3%81%BE/)


![zu01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10966/385cbf38-47e8-095a-7485-d884d67ff467.jpeg)

[要件定義～システム設計ができる人材になれる記事](https://qiita.com/Saku731/items/741fcf0f40dd989ee4f8)



ポイント・注意点・秘訣
---

[超わかりやすい要件定義書を作る秘訣は、「あれ」を想像しながら書くことに](https://xtech.nikkei.com/atcl/nxt/column/18/01054/110500002/?SS=imgview&FD=54139247)

[プロジェクトの炎上を防ぐためにSEが「要件定義」で気をつけたい4つのこと](https://paiza.hatenablog.com/entry/2019/03/08/%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E7%82%8E%E4%B8%8A%E3%82%92%E9%98%B2%E3%81%90%E3%81%9F%E3%82%81%E3%81%ABSE%E3%81%8C%E3%80%8C%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9%E3%80%8D)

成功の秘訣
---
[ユーザのための要件定義ガイド 第2版 要件定義を成功に導く128の勘どころ](https://www.ipa.go.jp/ikc/publish/tn19-002.html)

ドキュメントテンプレート
---
[要件定義書サンプル・書き方](https://pm-rasinban.com/rd-write)

[[Doc] 要件定義書テンプレート・要件定義書の書き方
](https://qiita.com/syantien/items/9a8a7cbaeca2be3ef0d7)

[超上流から攻めるIT化の事例集：要件定義](https://www.ipa.go.jp/sec/softwareengineering/tool/ep/ep2.html)

セキュリティ要件
---
[セキュリティ要件を定義しよう（Webアプリ編）](https://qiita.com/YusukeSaito/items/967d22d6aae0a05c8837)

[システム開発におけるセキュリティ対策は発注段階で詰めておこう](https://imitsu.jp/matome/web-system/5705081176217071)
ProcessingでVJ素材を作るブログ　第五回 translateとrotate( iii )

##pushMatrix()とpopMatrix()
[前回](https://qiita.com/naoya_vj/items/492bfce00f91d3c61965)までで基準点の移動、基準座標の傾きを見てきました。

さらっと見た感じ基準点の移動は、引数の計算で代替えきくのでは？とか思ったりしますが、まぁ複雑なコードを読み解く力もないので置いときましょう。

今日はpushMatrix(), popMatrix()。
pushMatrix()は基準点、基準座標の傾き情報の保存、
popMatrix()はpushMatrix()で保存した情報の展開。

translate()は面白くないので、rotate()を使ってみました。

```processing:sample.pde
void setup(){ 
  size(640, 640);
  background(0);
  stroke(255);
  frameRate(10);

  translate(width/2, height/2 );
  rotate(-PI/2);
  pushMatrix();
  fill(255,0,0);
  rect(100,0,100,30);
  rotate(PI/6);
  fill(255);
  rect(100,0,100,30);
  popMatrix();
  fill(255);
  rotate(PI/3);
  rect(100,0,100,30);
  
}
```

完成図はこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632724/66b1aab1-ec74-0dfa-e88f-e776472d6dcf.png)

popMatrix()を使わない以下のコードだと、

```processing:sample.pde
void setup(){ 
  size(640, 640);
  background(0);
  stroke(255);
  frameRate(10);

  translate(width/2, height/2 );
  rotate(-PI/2);
  //pushMatrix();
  fill(255,0,0);
  rect(100,0,100,30);
  rotate(PI/6);
  fill(255);
  rect(100,0,100,30);
  //popMatrix();
  fill(255);
  rotate(PI/3);
  rect(100,0,100,30);
  
}
```

完成図は以下になります。
（3回目のrotateがPI/6+PI/3=PI/2になってしまうんですね。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632724/4bf0d13b-1ae3-bbdb-4df5-590f3fb6f4fc.png)

も少しVJっぽい動画を作りたいですが、まぁまぁゆっくりとやってければなと思います。
動画作るにしてもアイデアが必要ですしねぇ。どうしようかな。


以上、translateとrotateでした。
ROS Loggerの表示形式の変更

例えば以下のようなプログラムがあったとします。

```
#!/usr/bin/env python
import rospy

def main():
    rospy.loginfo('hello!')

if __name__=='__main__':
    rospy.init_node('sample_node')
    main()
```

標準ではコンソール出力は以下のようになります。

```
[INFO][1589040511.929980]:hello!
```

ROSではログの表示形式を設定できるようになっており、例えば以下のように設定すると

```
export ROSCONSOLE_FORMAT='[${severity}] [${node}] [${function}] [${line}] [${time}]:${message}'

```

出力が以下のようになり、デバッグなどがしやすくなります。

```
[INFO] [/sample_node] [main] [6] [1589040511.929980]:hello!
```

詳細は http://wiki.ros.org/rosconsole ここに書いてあるので参考にどうぞ。
Nginxのエラー画面を猫ちゃんにする

## たぶん対象になる人
VPSサーバを触ることができる人かな

## やり方
こちらから猫ちゃんの画像をDownloadします。
https://icons8.jp/ouch/illustration/ginger-cat-714

nginxのデフォルト画面は/usr/share/nginx/html/に移動します。

```
cd /usr/share/nginx/html
```

index.html,404.html,50x.htmlに以下のコードで上書きします。

```html:index.html
<!Doctype html>
<html>
  <head>
    <meta charset="UTF-8">

    <title> ERROR </title>
    <style>
      html {
        font-size: 14px;
      }
      body {
        text-align: center;
        margin-top: 5rem;
      }
      h2 {
        color: #af8f71;
      }
      .center {
        margin: 0 auto;
      }
      small {
        text-align: center;
          margin: 0 auto;
            display:block;
      }
      small a{
        text-decoration: none;
        color: #b2d479;
        font-size: 1rem;
      }
    </style>
  </head>

  <body>
    <h2>Website ???? 404</h2>
    <img src="ginger-cat-713.png" width="300px">

    <small>
      <a rel="nofollow noopener external" href="https://icons8.jp/ouch/illustration/ginger-cat-714">(c) gingerCat</a>
    </small>
  </body>
</html>

```

保存後、nginx標準のエラー画面がこのような猫さんになります。

![コメント 2020-05-10 003432.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088/7866679f-344f-c4e8-973b-dfb93598fb9a.jpeg)


＊ターミナルを使えない場合は、手元PCで作ったhtmlを、レンタルサーバ契約時にもらったSSH認証ID/PASSを使ってSCP転送します。SSH接続できるサーバにはSCPで接続できるから、[filezila](https://filezilla-project.org/)を使うと便利。
Java#1：覚えた技術を日々書き留める

# 久しぶりのJavaでした恥ずかしい失敗

数年ぶりに、業務でJavaをやっているので
家でも勉強しています。
つまらないミスをして詰まってしまったので、内容と原因をメモします。

## HashMapがImportできない。。

やろうとしたのはこれだけ。

```
public class HashMap {
	public static void main(String[] args) {
		//Mapの宣言
		HashMap<String,String> hashmap = new HashMap<>();
	}
}
```
クラス名をHashMapにしてはいけなかったようで、クラス名を変更すると直りました。
予約語とかいうものですね。
【役立ち情報】Zen言語の標準ビルドスクリプトのビルドコマンドを知りたい

# はじめに

Zen言語の標準ビルドスクリプトのステップを作成中や実行中に、
ビルドスクリプトでビルドが実行されたコマンドを知りたいと思うことってありませんか？

私自身は、ビルドコマンドでは正常に実行バイナリが生成されていたにも関わらず、
何らかの要因でビルドスクリプトでは正常に生成されない時がありました。

そんな時の確認方法の一つとして、
ビルドコマンドを確認できるフラグを用いることで、
ビルドスクリプトの記述ミスを見つけることが出来るのではないでしょうか。

# ビルドコマンドを確認できるフラグを立てる

build.zenのbuild(b: *Builder)内に、`b.verbose = true;`を記述することで確認できます。

```java
const Builder = @import("std").build.Builder;

pub fn build(b: *Builder) void {

    //追加
    b.verbose = true;

    const mode = b.standardReleaseOptions();
    const exe = b.addExecutable("test", "src/main.zen");
    exe.setBuildMode(mode);
    exe.install();

    const run_cmd = exe.run();
    run_cmd.step.dependOn(b.getInstallStep());

    const run_step = b.step("run", "Run the app");
    run_step.dependOn(&run_cmd.step);
}
```

#### ●フラグを立てた場合に分かる実行コマンドはこちら

[「【第二弾】Zen言語の標準ビルドスクリプトを使ってみた」](https://qiita.com/freshers/items/1fbdfff28ee4eb32d932)で作成したビルドスクリプトに、フラグを立てた場合の出力結果です。

このフラグを用いることで、
意図した通りのビルドコマンドが実行されていることが確認できました。

```sh
[PATH]/wiringPi-zen/src/main.zen --library c --c-source [PATH]/WiringPi/wiringPi/wiringPi.c --c-source [PATH]/wiringPi-zen/WiringPi/wiringPi/piHiPri.c --c-source [PATH]/wiringPi-zen/WiringPi/wiringPi/softTone.c --c-source [PATH]/wiringPi-zen/WiringPi/wiringPi/softPwm.c --cache-dir [PATH]/wiringPi-zen/zen-cache --name wiringPi-zen -target armv7-linux-gnueabihf -I [PATH]/wiringPi-zen/WiringPi/wiringPi --cache on 
cp [PATH]/wiringPi-zen/zen-cache/o/NWohxvs3nYnGUIHADg7W2Sd9tRBACnf4Mck6sPMR7Pv0Py52cbj4XLmeZHdtRwsV/wiringPi-zen ./wiringPi-zen # installed
cp ./wiringPi-zen [PATH]/wiringPi-zen/zen-cache/bin/wiringPi-zen # installed
```

以上、お役立ち情報でした。
CentOS7にDocker、Docker Composeをインストールしよう

#Dockerをインストール
CentOSに今回は無償版のDocker（Docker CE）を導入する方法を説明します
##yumリポジトリ設定
まず、Dockerをインストールするための前準備として、下記のコマンドで必要なパッケージをインストールしましょう
下記のコマンドでインストールされるパッケージは`yum-utils`、`device-mapper-persistent-data`、`lvm2`の3つです

```:ターミナル
yum install -y yum-utils \
  device-mapper-persistent-data \
  lvm2
```

次にyumリポジトリを設定します。
下記のコマンドで`docker-ce.repo`というリポジトリを追加します

```:ターミナル
yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo
```

上記のコマンドで`docker-ce.repo`が作成されているか確認しましょう
下記のコマンドで`/etc/yum.repos.d/`内に`docker-ce.repo`が作成されていることを確認しましょう

```:ターミナル
ll /etc/yum.repos.d/
```

以上でDockerをインストールする準備は完了です

##Dockerのインストール
次にDocker CEをインストールします
下記のコマンドを実行しましょう

```:ターミナル
yum install docker-ce
```

##インストールの確認
次にインストールができているか確認しましょう

```:ターミナル
# yum list installed | grep docker-ce
docker-ce.x86_64 17.12.0.ce-1.el7.centos @docker-ce-stable
# docker -v
Docker version 18.03.1-ce, build 9ee9f40
```

実行結果が同じようになればDocker CEのインストールが完了です！！
時期によってバージョンの違いはあると思うので、気にしないでください

##Dockerサービスの操作方法
ついでにDockerサービスの操作方法についても記述します

```
//サービス起動
systemctl start docker

//サービス停止
systemctl stop docker

//サービスの再起動
sudo systemctl restart docker

//サービスの稼働状態の表示
systemctl status docker

//自動起動設定
systemctl enable docker
```

#Docker Composeのインストール
次にDocker Composeをインストールします
##Docker Composeのインストール
下記のコマンドでDocker Composeのインストールと`docker-compose`の権限変更をします

```:ターミナル
# curl -L https://github.com/docker/compose/releases/download/1.21.2/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
# chmod +x /usr/local/bin/docker-compose
```

##インストールの確認
下記のコマンドでDocker Composeがインストールできているか確認しましょう

```:ターミナル
# docker-compose --version
docker-compose version 1.21.2, build 1719ceb
```

上記のような実行結果になればDocker Composeのインストールが完了です！！
pythonでスプレッドシートに記載しているアドレスにメールを送信

こちらの動画のメモです。
https://youtu.be/Pw_jSRyX4lQ

# 下準備
http://console.developers.google.com/
1. 上記URLから、「Googleシート」と「Googleドライブ」のAPIを有効化し、JSONファイルを入手
2. 新しくフォルダ作成
3. JSONファイルを creds.json というファイル名に変更をして、フォルダに入れる
4. フォルダの中に、send.py というファイルを新しく作成
5. 以下のコマンドを入力して2つインストールを済ませておく

```
$ pip install gspread oauth2client
```

## コードの中身

```send.py
# メール送信関係
from email.mime.text import MIMEText
from email.utils import formatdate
import smtplib
# GoogleAPI連携関係
import gspread 
from oauth2client.service_account import ServiceAccountCredentials
from pprint import pprint 

scope = ["https://spreadsheets.google.com/feeds",'https://www.googleapis.com/auth/spreadsheets',"https://www.googleapis.com/auth/drive.file","https://www.googleapis.com/auth/drive"]

creds = ServiceAccountCredentials.from_json_keyfile_name("creds.json", scope)

client = gspread.authorize(creds)

# pythonというタイトルの最初のシートを取得しています。
# sheet1 = client.open("python").sheet1

SPREADSHEET_KEY = '*******************************'
sheet1= client.open_by_key(SPREADSHEET_KEY).worksheet('sheet1') 
sheet2= client.open_by_key(SPREADSHEET_KEY).worksheet('sheet2') 

# メール内容
body = sheet2.cell(2,2).value
title = sheet2.cell(2,1).value

# 全ての値を、dataという変数に代入しています。
data = sheet1.get_all_records()

# データ数を取得
last_number = len(data)

for row in range(last_number):
    # メール送信に必要な情報を抽出
    full_name = data[row]["name"]  # お名前
    msg = MIMEText(full_name + body)
    pprint(msg)
    
    msg['Subject'] = sheet2.cell(2,1).value
    msg['From'] = '**************@gmail.com'
    msg['To'] = data[row]["メールアドレス"]  # メールアドレス
    msg['Date'] = formatdate()

    smtp = smtplib.SMTP('smtp.gmail.com', 587)
    smtp.ehlo()
    smtp.starttls()
    smtp.ehlo()
    smtp.login('**************@gmail.com', '**************')
    smtp.send_message(msg)
    smtp.close()
```
【基礎知識】Zen言語のファイル入出力

## はじめに

今回は、zen言語での『ファイルの入出力』方法について、
C言語と比較させながら、いくつかまとめてみたいと思います！！

## 前提
- Zen言語バージョン : 0.8.20191124+552247019(Mac)

##【ファイル出力】

### C言語で実現する場合
C言語の入門書などで見かける、ファイルへの出力はこのように書くのではないでしょうか？

```c
#include <stdio.h>
int main()
{
    // ファイルを「書き込み可（上書き）」で開く
    FILE *fp = fopen("hello.txt", "w");

    // ファイルに書き込む
    fprintf(fp, "HelloWorld");

    // ファイルを閉じる
    fclose(fp);
}
```

### Zen言語で実現する場合 
Zen言語でもC言語と同様の流れで書くことができます。

```js
const std = @import("std");

pub fn main() anyerror!void {
    // ファイルを「書き込み可（上書き）」で開く
    const fp = try std.fs.File.openWrite("hello.txt");

    // ファイルに書き込む
    try fp.write("hello world");

    // ファイルを閉じる
    fp.close();
}
```

ただファイルを開いて書き込むだけなら、簡単にこの一文で書くことも可能でした！
```fs.writeFile(file_path, write_data);```

```js
const std = @import("std");

pub fn main() anyerror!void {
    // ファイルを開く、ファイルに書き込む、ファイルを閉じるを同時に行う
    try std.fs.writeFile("hello.txt", "HelloWorld");
}
```

また、C言語の低水準出力関数のopen(), write()に近い関数もあります。

```os.open(file_path, flags, parm);```
```os.write(fd, write_data);```
(※open()関数のflagsは、[C言語のドキュメント](https://linuxjm.osdn.jp/html/LDP_man-pages/man2/open.2.html)が参考になりました)

```js
const std = @import("std");
const os = std.os;

pub fn main() anyerror!void {
    // ファイルを「書き込み可（上書き）」で開く
    const fd = try os.open("hello.txt", os.O_WRONLY | os.O_CREAT | os.O_CLOEXEC,  0);

    // ファイルに書き込む
    _ = try os.write(fd, "HelloWorld\n");

    // ファイルを閉じる
    os.close(fd);
}
```

##【ファイル入力】
###C言語で実現する場合

ファイル出力と同様に、C言語の入門書などで見かけるサンプルプログラムと比較します。

```c
#include <stdio.h>
int main()
{
    char buf[50]={};

    // ファイルを「読み込み可」で開く
    FILE *fp = fopen("hello.txt", "r");

    // ファイルから読み込む
    fscanf(fp, "%s ", buf);
    printf("%s\n", buf);

    // ファイルを閉じる
    fclose(fp);
}
```

### Zen言語の方法

```js
const std = @import("std");

pub fn main() anyerror!void {
    var buf = [_]u8{0} ** 50;

    // ファイルを「読み込み可」で開く
    const fp = try std.fs.File.openRead("hello.txt");
    
    // ファイルから読み込む
    _ = try fp.read(buf[0..]);
    const stdout = try std.fs.getStdOut();
    try stdout.write(buf);

    // ファイルを閉じる
    fp.close();
}
```

---
_(※)補足説明_

- 4行目の```var buf = [_]u8{0} ** 50```は、0初期化された文字列型を宣言しています。
- 10行目にある```buf[0..]```は、文字列型から[スライス型](https://www.zen-lang.org/ja-JP/docs/ch02-slices/)へ変換しています。

---

また、ファイル出力と同様に、入力にも低水準入力のread()に近い関数がありました。

```js
const std = @import("std");

pub fn main() anyerror!void {
    var buf = [_]u8{0} ** 50;

    // ファイルを「読み込み可」で開く
    const fd = try os.open("hello.txt", os.O_RDONLY | os.O_CLOEXEC,  0);
    
    // ファイルから読み込む
    _ = try os.read(fd, buf[0..]);
    const stdout = try std.fs.getStdOut();
    try stdout.write(buf);

    // ファイルを閉じる
    os.close(fd);
}
```

## 終わりに
もし勘違いしている点があれば、ご指摘頂ければ幸いです。
React Hooks

##はじめに
勉強のメモです。
間違った記述や至らない点も多いと思います。

##ReactHooks 
Classコンポーネントじゃないと扱えなかったStateやライフサイクルがFunctionalコンポーネントでも扱える様になる便利なもので2020年2月に正式リリースされた新しい機能になります。
また、以前のバージョンにも互換があるので既存のアプリに取り入れることも可能です。


##Hookのメリット
ClassコンポーネントにおいてStateやライフサイクルを記述すると冗長になりがちです。
見にくい記述は当然エラーを引き起こしやすくなります。
Hooksを使えば、StateやライフサイクルがFunctionalコンポーネントで記述できるので、シンプルにすることができます。


##useStateの使用例
Stateの代替になります。
今回はチェックボックスを例にします。

<b>1.useState関数をインポート</b>

```react

import React, {useState} from 'react';
```

<b>2.宣言する</b>

```react
const [isPublished, togglePublished] = useState(false);
```
isPublishedが変数名、togglePublishedがstateを変更する関数名、useState(false)が初期値。useState(trueにするとチェックボックスにチェックが付いている状態が初期値になる)

<b>3.jsx内で使う</b>
 
```react

<input type='checkbox' checked= {isPublished} id="check" onClick={()=> togglePublished(!isPublished)}/>
```

## useEffectの使用例
ライフサイクルの代替になります。
Stateの時の様にimportを行なってください。


<b>基本形</b>
マウントとアンマウントを繰り返し行うことで、クリーンアップできるという考えです。

```react

useEffect(()=>{
console.log('render')
return () => {
  console.log('Unmounting')
  } 
})
```


##最後に
ライフサイクルの方はClassコンポーネントとHookを使った場合を比較した方がわかりやすいと思いますので、ぜひ、ご自身で試していただきたいです。
VSCode - キーボードによる矩形選択

## 答え
```
[Shift］＋［Option］＋［Command］＋矢印キー
```
しょっちゅう忘れる・・・
3つのキーを使用します。
## 参照
https://www.atmarkit.co.jp/ait/articles/1805/11/news022.html
MacでC++のデバック環境を構築

## 前がき
Macのローカル環境でC++のデバック環境を構築しようとしたが、起動はできるものの`vector`の配列の中身が見れなかったりCLionを使ったデバック方法がかなり少なかったためこの記事を書くことを決めました。


## 環境
* MacOS Catallina 10.15.4
* CLion 2020
* Docker for mac


## 試したこと
* visual studioを使ったデバック
* gdbをソースからビルドしてローカル環境にいれ、Debuggerに指定してbuild
* lldbを使ったデバック


などです。結論から言うと全部自分が想定した通りに動きませんでした。標準入力ができなかったりステップが実行できなかったりです。
※ちなみにWindows環境ですとすぐに動きました。

`not in executable format: File format not recognized` 
こちらのエラーが解消できました。



## 実現できた方法

Windowsで実装した方法とは別にGDB Serverをローカル環境内で構築して通信したらできるのでは？と考えたやってみた結果うまくいきました。

下記手順を記載します。


## 1. DockerでGDBServerを構築

- DockerFileは下記となります

```
FROM ubuntu:18.04                                                                                                                                                                                                                              

RUN apt update \
    && apt upgrade -y \
    && apt install -y \
    apt-utils build-essential clang cmake gdb gdbserver openssh-server rsync

# Taken from - https://docs.docker.com/engine/examples/running_ssh_service/#environment-variables
RUN mkdir /var/run/sshd
RUN echo 'root:root' | chpasswd
RUN sed -i 's/PermitRootLogin prohibit-password/PermitRootLogin yes/' /etc/ssh/sshd_config

# SSH login fix. Otherwise user is kicked off after login
RUN sed 's@session\s*required\s*pam_loginuid.so@session optional pam_loginuid.so@g' -i /etc/pam.d/sshd

ENV NOTVISIBLE "in users profile"
RUN echo "export VISIBLE=now" >> /etc/profile

# 22 for ssh server. 7777 for gdb server.
EXPOSE 22 7777

# Create dev user with password 'dev'
RUN useradd -ms /bin/bash dev 
RUN echo 'dev:dev' | chpasswd

# Upon start, run ssh daemon
CMD ["/usr/sbin/sshd", "-D"]
```

コンテナを起動していることを確認したら、大丈夫です。

## 2. CLionの設定

Preferences-> toolchainsdで各設定をします。
<img width="1674" alt="スクリーンショット 2020-05-09 23.55.18.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138660/c46e837c-16c9-8973-22b3-07e308037afa.jpeg">

<img width="836" alt="スクリーンショット 2020-05-09 23.55.26.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138660/e3de0da7-a204-f94a-22c6-704facc28d5f.jpeg">


## 3. CmakeListの読み込み直す

意外とハマりポイントでした。すでに `cmake-build-debug` がある人は一度削除して、もう一度読み込み直すようにした方がいいです。
<img width="357" alt="スクリーンショット 2020-05-10 0.01.58.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138660/d60d4f47-4bec-f280-bc71-87c21fdde31e.jpeg">


## 4.虫眼鏡を押して実行するだけ
<img width="1185" alt="スクリーンショット 2020-05-10 0.05.59.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138660/7dc8e10c-3d13-19c1-50ec-f0c93b821929.jpeg">



## 参考にした記事
https://austinmorlan.com/posts/docker_clion_development/
カエサル暗号プログラムをPythonで作ってみた。

# 挨拶
※コードは一番最後に載せています！

中田敦彦のYoutube大学を皆さんはご存じでしょうか？
最近、頭いい系の動画を見たいという願望にかられ、
よく見ているのですが、数ある動画の中で"暗号化"について
授業をされているものがありました。

まだ見られていない方はぜひおすすめします。
暗号の知識が全くない私でも楽しく見ることができました。
下記リンクから見れます。
https://www.youtube.com/watch?v=7dSVR_zuJJs&t=694s


で、その動画の中でひときわ僕の目に印象づいた言葉がありました。
そう！そこにあったのが**「カエサル暗号」！**という言葉でしたw

話を聞く限り、アルファベットの順番をある数分ずらして文章にするというのが
この暗号ルールということがわかりました。

例えば、
appleという言葉をカエサル暗号にかけると、「fuuqj」となります。
※今回は5つ右にずらした場合にしています。
aの5つ右隣りは「f」で、pの5つ右隣りは「u」で、、、と
文字の順番を利用して文章を暗号するのがカエサル暗号です。

この話を聞いていた私はうわぁ、解読するの大変そうだなぁと直感的に脳が
アラートを出していたのですが、一応私もエンジニアの端くれです。

この暗号化実際プログラムで書いたらどうやるのか気になり実際に作ってみました。
思った以上に簡単に作れちゃいました。。。

それにやってから気づいたのですが、アルファベットは
全部で27個存在します。つまり、暗号に使えるパターンは26通りしかありません。
左右も入れると52通りです。
この暗号化方法はかなりレベルが低いということを実感しました。。。。

もっと複雑なカエサル暗号のやり方はあるみたいなのですが、
アルファベットの順番を単純にN個ずらした暗号のやり方は
やめた方がいいということがわかりました。

一度も使ったことはありませんが、
今後は身内ぐらいに使うぐらいにしようと思います。ｗ


# コード
```python
import string


#######################################
# カエサル暗号複合
def decrypt_caesar(encrypt_text, gap=1):
    decrypt_text = ''
    for c in encrypt_text:
        number = string.ascii_lowercase.index(c)
        decrypt_text += string.ascii_lowercase[number - gap]
    return decrypt_text


encrypt_text = 'fuuqj'
for i in range(len(string.ascii_lowercase)):
    text = decrypt_caesar(encrypt_text, i)
    print(text)


#######################################
# カエサル暗号
def encrypt_caesar(decrypt_text, gap=1):
    encrypt_text = ''
    for c in decrypt_text:
        number = string.ascii_lowercase.index(c)
        search_text = string.ascii_lowercase*2
        encrypt_text += search_text[number + gap]
    return encrypt_text


# カエサル暗号
print(encrypt_caesar('apple', 5))
```