OmniAICreator/Qiita-1.07M huggingface dataset:
pythonでのマルチスレッド処理

# Pythonはマルチスレッド処理に向かない
pythonはマルチスレッドに向いていない言語と言われています。
というのも、pythonはGILを使用しているからです。

##GILとは
GIL：Global Interpreter lock
バイトコードが同時に1つだけのスレッドで実行されることを保証するためのメカニズムのことです。
pythonではこれが採用されているため、基本的にはマルチスレッドはできません。

- GILのデメリット
同時に実行できるスレッドが1つに制限される

- GILのメリット
シングルスレッドのプログラムの速度向上

GILを採用しているくらいだから、並列処理はプロセスベースの方がいいのかな？と思われます。

##GILを解放するモジュールもある
pythonの拡張モジュールによっては、圧縮やハッシング計算負荷の高いタスクの実行時にはGILを解放する設計になっているものもあります。

例

```python:multithread.py

import threading, zipfile

# ファイルを圧縮するクラス. GILが解放される​
class AsyncZip(threading.Thread):
    def __init__(self, infile, outfile):
        threading.Thread.__init__(self)
        self.infile = infile
        self.outfile = outfile
​
    def run(self):
        f = zipfile.ZipFile(self.outfile, 'w', zipfile.ZIP_DEFLATED) #通常圧縮
        f.write(self.infile)
        f.close()
        print('background zip compress process finished : ', self.infile)
​
# mydata.txtは適当に準備
background = AsyncZip('mydata.txt', 'myarchive.zip')

# バックグラウンド処理を実行させても、メインプログラムが同時に生きていることを確認
background.start()
print('main program still working')
​
# バックグラウンド処理が終わるまでメインプログラムが生きていることを確認
background.join()
print('main program was waiting for a background thread')
```


実行結果

```
C:\Users\NAME\.PyCharmCE2019.2\system\workspace>python3 multithread.py
main program still working
background zip compress process finished: mydata.txt
main program was waiting for a background thread
```
【PostgreSQL】NULL/空白以外のデータを探したいとき

## 前提
- DB は PostgreSQL

## テーブル構成
- たとえば、以下のようなテーブルがある。
- `test_name` に文字列が入っているはず。たぶん。
- `sts_flg = 1` のデータが有効データ。

```sql
test=# \d m_test
       列        |             型               |                               修飾語                               
-----------------+-----------------------------+-------------------------------------------------------------
 test_no         | integer                     | not null default nextval('m_test_test_no_seq'::class)
 test_name       | character varying(250)      | 
 sts_flg         | smallint                    | default 1
インデックス:
    "m_test_pkey" PRIMARY KEY, btree (test_no)
```

## やいたいこと
- 上記テーブル構成の中から、`test_name`の入っているデータの数がしりたい。
- 空白やNULLは知りたくない。

## 現在のデータが何件あるか検索してみよ
- 全体は110件ある。ふむふむ

```sql
test=# SELECT COUNT(*) FROM m_test WHERE sts_flg = 1;
 count 
-------
   110
(1 行)
```


## NULLと空白以外を抽出する SQL を準備する
- `coalesce` を使用して、NULL/空白ではない文字列を抽出する。
- `coalesce` の `test_name` があるときは、1をかえし、それ以外は 0 を返す。

```sql
SELECT COUNT(*) 
FROM m_test
WHERE sts_flg = 1 
AND (CASE 
        coalesce(test_name, '') WHEN '' THEN 0
        ELSE 1
        END
) <> 0;
```

## 実行してみる
- やったー！うごいた！１００件が空白じゃない。そして残り10件はNULL/空白なのね

```sql
test=# SELECT COUNT(*)  
test-# FROM m_test
test-# WHERE sts_flg = 1 
test-# AND (CASE 
test(#         coalesce(test_name, '') WHEN '' THEN 0
test(#         ELSE 1
test(#         END
test(# ) <> 0;
 count 
-------
   100
(1 行)
```
AtCoderにログインできてるか確認する方法

この記事は約5分で読めます。(よくあるサイト風)
#AtCoderにログインできてるか確認する方法
皆さんはAtCoderにログインできてるか確かめたいときはありませんか？Webブラウザからアクセスしているときは簡単にログインしてるかがわかりますがコマンドでAtCoderのサイトに訪れているときには見分けにくいです。そこで今回はこのようなものを見つけたので今この記事を書いています。
###本編
やり方はこうです。たとえば以下のように存在しない回のsubmitページにアクセスしてみます。そうするとログインしていないときはloginページに強制的に飛ばされるのでStatusCode上では200番台が出てきます。しかし、ログインしている状態だとそのようなコンテストは存在しませんと出てきてStatusCode上で404と出てくるので判別ができます。これはWebブラウザ上でも再現ができます。以下にスクリーンショットを貼っておきます。

```
https://atcoder.jp/contests/abc9999/submit
```
ログインしていないとき↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388631/fcbd1041-3ab1-ade5-2048-44dd4056b2c6.png)

ログインしているとき↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388631/81290b41-234b-fc0c-70b1-44d84cb4db1e.png)

#最後に
お読みいただきありがとうございます。この記事が参考になれば幸いです。
TypeScript 3つのType guard 備忘録

個人用備忘録です

### typeof

```
function toUpperCase(x: string | number) {
 if (typeof x === 'string') {
   return x.toUpperCase();
 }
 return '';
}
```

### in

```
type Enginner = {
  name:string;
  role: string;
}
type Blogger = {
  name:string;
  follower: string;
}
type EngineerBlogger = Engineer & Blogger;

function describeProfile(nomadWorker: EngineerBlogger) {
  console.log(nomadWorker.name);
  if ('role' in nomadWorker) {
    console.log(nomadWorker.role);
  }
  if ('follower' in nomadWorker) {
    console.log(nomadWorker.follower);
  }
}

```

### instanceof

```
Class Dog {
  speak() {
    console.log('bwbw')
  }
}
Class Bird {
  speak() {
    console.log('fuwagifu')
  }
  fly() {
    console.log('fly')
  }
}
function havePet() {
  pet.speak();
  if (pet instanceof Bird) {
    pet.fly();
  }
}
havePet(new Bird());
```
初心者が月10万稼ぐ為の記録１

###2020年1月から学んできたこと
・**HTML、CSS** 基本
・**JavaScript** 基本
・**PHP** 基本
※基本（変数、配列、連想配列、if、switch文、for、while文、foreach文、関数、引数、返り値）

###現在作成している作品
・とある飲食店のホームページ。練習用として作成

#####現在の進捗
・**HTML、CSS**でコーディング済みで、お問い合わせフォームを作成中。PHPが必要の為、勉強中

###今後の予定
・XAMPPのローカル環境上で**PHP**を使ってメールが送信ができるように環境を整える。
・お問い合わせフォームを完成させる。
・foreach、関数、引数、返り値　について勉強する。
・HPのトップページの画像にアニメーションをつけたいので**JavaScript**で作成予定
intellijを起動するとCouldn't refresh skeletonsエラーが出る

####intellijを起動すると以下のエラーが出ました。

```
Couldn't refresh skeletons for remote interpreter
			Failed to change owner of skeletons volume:
			Failed to change permissions for skeletons volume
			Regenerate skeletons
```

#####翻訳すると・・
リモートインタープリターのスケルトンを更新できませんでした：スケルトンボリュームの所有者を変更できませんでした：//スケルトンボリュームの権限を変更できませんでした//スケルトンを再生成します。

というメッセージ。

#####googleで調べたが解決せず・・。

[PyCharm Vagrant Couldn't refresh skeletons for remote interpreter](https://stackoverflow.com/questions/49007292/pycharm-vagrant-couldnt-refresh-skeletons-for-remote-interpreter)
[Couldn't refresh skeletons for remote interpreter - Docker](https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000129510-Couldn-t-refresh-skeletons-for-remote-interpreter-Docker)

####試行錯誤した結果の解決策
プロジェクトインタプリタに対応するdockerのプロセスを`docker-compose down`で落として、intellijを起動したところ、エラーが出なくなりました。
簡単なTCPサーバ/クライアントスクリプトのつくり方

# はじめに
サーバ間通信の簡単な疎通確認に使えるってことで作成。
参考にした書籍はpython2だったのか微妙にうまくいかなかったので
python3向けに若干修正したものをUPする。

ちなみに実行想定は、

# 実行環境
・python 3.7.6

# 実行手順
①同一HOST上にTCPserver.py、TCPclient.pyを作成
②ターミナルよりTCPserver.pyを実行
③別ターミナルを起動してTCPclient.pyを実行

# TCPクライアント
```:TCPclient.py
import socket

target_host="127.0.0.1"
target_port=9999

#create socket object
client = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

# connect to object
client.connect((target_host, target_port))

# data transmission
client.send(b"ABCDEFG")

#recieve data
response = client.recv(4096)
print(response)
```

# TCPサーバ
```:TCPserver.py

import socket
import threading

bind_ip = "0.0.0.0"
bind_port = 9999

server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

server.bind((bind_ip, bind_port))

server.listen(5)

print("[*] Listening on %s:%d" % (bind_ip, bind_port))

def handle_client(client_socket):
    request = client_socket.recv(1024)
    print("[*] Recieved: %s:" % request)
    client_socket.send("ACK!")
    client_socket.close()

while True:
    client,addr = server.accept()

    print("[*] Accepted connection from: %s:%d" % (addr[0],addr[1]))

    client_handler = threading.Thread(target=handle_client, args=(client,))
    cliend_handler.start()
```
# 実行結果
左側がTCPserver.py
右側がTCPclient.py
の実行結果。
![コメント 2020-05-04 143049.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/7cb75a58-c03d-aed5-04ef-3f399f7e9785.png)

# おわりに
単につなげるだけだったらこのくらいのコード量でいいのねって感じ。
サーバとクライアントとでポートさえ合えばこんなに簡単なのか、というところも勉強になった。
教科書通りといえばそうなんだけど、コードで動いているものを見ると
これはこれで感動する。
ブラウザ拡張機能について(Chrome)

Atcoderのブラウザ拡張機能をchromeウェブストアから挿れてみたので、ついでにブラウザ拡張機能をまとめます。
内容的にはペラペラですが、自分で拡張機能を作る時がきたらまた追加したいです。

今回は

Atcoderで解いた問題を色付けしてくれる
・[AtCoder Color](https://chrome.google.com/webstore/detail/atcoder-color/mcefknoiablejellmicpmokcaelpdaec?hl=ja)

パフォーマンスをレートごとに色付け・可視化してくれる
・[AtCoder Color Mark](https://chrome.google.com/webstore/detail/atcoder-color-mark/dogcmibkiolcdafifopmnghhlajpbmga?hl=ja)

を挿れました。

参考記事
・[AtCoderを使うときに便利な拡張機能（Google Chrome）](https://qiita.com/kanten1990/items/890bacf895742ae25eaa)

#ブラウザ拡張機能とは
>ブラウザ拡張機能　(browser extension)とは様々な方法でウェブブラウザの機能を拡張するためのコンピュータプログラム。ブラウザやバージョンによっては、**プラグイン(plug-in)**もしくは**アドオン(add-on)**と言う同じ意味合いの用語と使い分けられる。一部の拡張機能ではHTMLやJavaScriptと言ったウェブ技術を活用して開発される。

Windows標準装備の**Internet Explorer**からMac標準の**Safari、Firefox**から**Opera**、マニアックな人なら**Sleipnir**...と一口にウェブブラウザといっても多種多様です。

その中でも、**Chrome**は特に高速で動作する上、**ChromeWebストア**にある豊富な拡張機能を簡単に追加できるので、カスタマイズも楽です。
Googleが提供するドキュメント、スプレッドシートなどは標準装備で使えます(2020/05/04時点)。

[Chrome ウェブストア - Google Chrome](https://chrome.google.com/webstore/category/extensions?hl=ja)

使用している拡張機能はその他のツールから開くことが出来ます。
こんな感じ。

<img width="821" alt="スクリーンショット 2020-05-04 14.26.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595139/2010b862-26f1-c8c4-ffad-686bfab92aa7.png">


そして拡張機能を確認すると

<img width="1440" alt="スクリーンショット 2020-05-04 14.26.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595139/5c4a1a13-22a3-5285-8522-7515c476207b.png">

**Atcoder Color**と**Atcoder Color Mark**の拡張機能が追加されていることがわかります。
もし機能を邪魔に感じるようであればここから削除可能です。

以上、ブラウザ拡張機能についてでした。
いつかJavaScriptで拡張機能を作ってみたいですね。

##QiitaStockers
Qiitaでストックしかされないと悲しいのでストック数を確認できる拡張機能を挿れてみました。
・[Qiitaのストック数を確認できる拡張機能を作った話](https://qiita.com/tonio0720/items/fefcdd5b88cdf239a5a1)
・[QiitaStockers](https://chrome.google.com/webstore/detail/qiitastockers/amohnnngjiamaillkgdnafemejhdopbf)
ECHONET用電文のEDTを自動生成(2回目)

# 目的/要件

+ Python2.7用で作成する
+ ECHONET用電文のEDTを自動生成する
+ EDTは0～99(0x00～0x63)まで
+ 電文はSET用とGET用を交互に生成する
+ 開発環境を書いておく
+ code中に参考文献を入れてみる

# 環境

+ Win10Pro 64bit 1909
+ Anaconda 3
+ Spyder 3.3.6
    + 編集時最新版は4.0.1だが、なぜか起動後5秒ぐらいで落ちるのでダウングレード
    + ダウングレード後は問題なく動作している
+ Python 2.7.18


# code

~~~python:MsgGen4py2.py

#! /uer/bin/env python
# -*- coding: utf-8 -*-

from struct import *

#　初期値
setget_flag = True      #　True:set,False:getの時を表す、0or1のほうが判定速いのかは知らない。
i = 0                   # カウンタ
ipv6Addr = "AAAAAAAA"   # 適当なダミー値。本物はもっと長いけど今は特に関係ないのでこれでOK。

GET_E2 = "\x10\x81\x12\x34\x05\xFF\x01\x02\x88\x01\x62\x01\xE2\x00"
# 積算電力量計測値履歴1(正方向計測値)(EPC=0xE2, 必須)

# 変更点
# [前] HEX値をstrで書いておく。HEXの状態で結合する。
#SET_E5_base = "1081123405FF010288016201E501"

# [後] decodeされたバイナリをstrで書いておく。バイナリの状態で結合する。
# python3のstr, bytesはpython2ではunicode, strに基本的に対応するため、
# 参考文献：python2.7でint->bytes変換したい
# <https://teratail.com/questions/180228>
SET_E5_BASE = "\x10\x81\x12\x34\x05\xFF\x01\x02\x88\x01\x61\x01\xE2\x01"
# 積算履歴収集日1(0:当日 1~99:前日の日数)(EPC=E5)

# 適用先の都合でwhile文にしています。
while 1:
    if setget_flag == True:
        # set時の動作
        # E5の電文を作成
        
        # 変更点
        # [前]bytes.fromhexは3.5から追加なので、2.7で使えない。
        # 参考文献:Python 3 で16進数とバイト列の相互変換
        # <https://qiita.com/masakielastic/items/21ba9f68ef6c4fd7692d>
        #SET_E5 = bytes.fromhex(SET_E5_base + '{:02X}'.format(i))

        # [後]packを使ってintからバイナリを生成
        # 参考文献:7.3. struct --- 文字列データをパックされたバイナリデータとして解釈する
        # <https://docs.python.org/ja/2.7/library/struct.html>
        SET_E5 = SET_E5_BASE + pack('b',i)  # pack('b',1) --> '\x01'

        com1 = "SKSENDTO 1 {0} 0E1A 1 {1:04X} ".format(ipv6Addr, len(SET_E5))
        command = com1 + SET_E5
        setget_flag = False     # フラグをFalse:getに
        print(command)
    else :
        # get時の動作
        # E2の電文は毎回一緒なのでそのまま
        # set側と同様に修正
        
        com1 = "SKSENDTO 1 {0} 0E1A 1 {1:04X} ".format(ipv6Addr, len(GET_E2))
        command = com1 + GET_E2
        setget_flag = True      # フラグをFalse:getに
        i += 1                  # 後に送る電文側でインクリメントする
        print(command)
    # 電文作成が100回になったら糸冬了
    if i == 100:
        print("100回糸冬了")
        # 実機環境でsys.exit()を実行すると、プロセスが残り続けるので気を付けること。
        # 実機環境はexit()で良いかと思われる。
        sys.exit()  #### 糸冬了 ####

~~~

# 結果

~~~実行結果

SKSENDTO 1 AAAAAAAA 0E1A 1 000F �4��a�
SKSENDTO 1 AAAAAAAA 0E1A 1 000E �4��b�
~省略~
SKSENDTO 1 AAAAAAAA 0E1A 1 000F �4��a�c
SKSENDTO 1 AAAAAAAA 0E1A 1 000E �4��b�

~~~

# 考察

+ python2.7用に改修ができた
+ 2系と3系の闇を見た
+ 開発環境は書いておいてOK。後で参考になる。
+ コード中の参考文献は使い分けが肝心
    + メリット　：記事内を探し回らなくて良い
    + デメリット：コードが長くなる⇒短いコードならイケる！
    + TipsならばOK、ガッツリ書くならばGitに上げてどうぞ(Qiitaじゃない感)。

# 参考文献

+ 文中参照
【VSCode】VSCodeで正規表現を使って行頭と行末に文字追加

SQLのwhere句を書く時にエクセルの縦の列を全部where inで検索したいなあとなったときに困ったことがありました。

<img width="195" alt="Screen-Shot-2019-04-22-at-16.58.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221949/e6d9d14c-c276-1d2c-c38d-c77f6c55ad02.png">




こいつをコピーしてwhere inで検索させたい！！

<img width="285" alt="Screen-Shot-2019-04-22-at-16.59.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221949/f139367f-632c-cd37-2de3-c8a4523d26e9.png">

けど、コピーしても「””」がないやんけ。。。エラーがでてまう、、、




数行の場合はダブルクォーテーションを手で書いていけばいいんでしょうけど、５００行とかの場合はそうはいきません。
こういうときにVScodeの正規表現置換の機能を使って、行頭と行末にダブルクォーテーションを打ち込んでいこう！っていう記事になります。

- 行頭と行末の正規表現
- VSCodeの正規表現置換

##行頭と行末の正規表現




行頭と行末の正規表現は簡単です
行頭が「^」
行末が「$」

以上です

##VSCodeの正規表現置換

VSCodeの正規表現置換機能を使っていきましょう。

この記事が参考になるかと思います



 

[Visual Studio Codeを用いた簡単な正規表現検索 - Qiita](https://qiita.com/kgsi/items/a88662c6e43fa5311288)




コマンド+Fで検索窓がでてくるので、ここの２つをクリックすると


<img width="512" alt="Screen_Shot_2019-04-22_at_17_04_14-1024x338.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221949/d6b23f87-9511-2490-fcc0-d3df7b09b302.png">






置換の準備ができます

よってここで^を"に置換、$を",としてやりましょう。

<img width="273" alt="Screen_Shot_2019-04-22_at_17_04_47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221949/ca2bfcc1-612e-59a9-f962-f77a0051b216.png">


上の画像の囲まれているところが「一括置換」のボタンです。

これを行頭と行末に対して行ってください。

<img width="512" alt="Screen-Shot-2019-04-22-at-17.05.42-1024x312.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221949/2f4be533-4118-2538-8968-774eba45338e.png">


こうです！一瞬！


簡単でした〜
is not in the sudoers file.This incident will be reported.となった時の対応方法

```bash:メッセージ
(英語版)
{ユーザー} is not in the sudoers file.  This incident will be reported.
(日本語版)
{ユーザー} は sudoers ファイル内にありません。この事象は記録・報告されます。
```


# 事象 : ユーザーを作って`sudo`したらなんか言われた
- 環境 : CentOS Linux release 7.8.2003 (Core)

設定したパスワードを入れてもダメだった・・・

```bash
$ sudo chmod 700 ~/.ssh/id_rsa

We trust you have received the usual lecture from the local System
Administrator. It usually boils down to these three things:

    #1) Respect the privacy of others.
    #2) Think before you type.
    #3) With great power comes great responsibility.

[sudo] password for ponsuke:
ponsuke is not in the sudoers file.  This incident will be reported.
```

# ユーザーが`sudo`できるグループにいないから
> /etc/sudoers ファイルには、あらかじめsudoコマンドを利用できるグループが用意されています。Debianの場合は、sudoグループ。CentOSの場合はwheelグループ。
> [sudoユーザーを追加する方法 - Linux入門 - Webkaru](https://webkaru.net/linux/sudo-user-add/)

```bash:wheelグループにいなかった
$ cat /etc/group | grep wheel
wheel:x:10:centos
```

## 対応 : `wheel`グループにユーザーを追加する
1. `sudo`を実行できるユーザーに切り替える
1. `usermod`で`wheel`グループにユーザーを追加する
1. ユーザーを切り替えて再度`sudo`する

```bash
# wheelグループにユーザーを追加する
$ sudo usermod -aG wheel ponsuke

# 追加された
$ cat /etc/group | grep wheel
wheel:x:10:centos,ponsuke

# ユーザーを切り替えて
$ sudo su - ponsuke
Last login: Mon May  4 02:57:57 UTC 2020 on pts/0

# 再度sudoする
$ sudo chmod 700 ~/.ssh/id_rsa
[sudo] password for ponsuke:

# できた！
$ ls -la ~/.ssh/ | grep id_rsa
-rwx------. 1 centos     centos     1675 May  4 02:38 id_rsa
```
VBAでバイナリファイルを読込むサンプル

健忘録

```vb
'*****************************************************************************
'[概要] バイナリファイルを読込む
'[引数] ファイル名、読込むセルの位置、1行当たり何バイト表示するか
'*****************************************************************************
Public Sub LoadBinaryFile(ByVal strFilename As String, ByRef objCell As Range, Optional ColSize As Long = 16)
On Error GoTo ErrHandle
    Dim RowSize As Long
    RowSize = Int((FileLen(strFilename) + ColSize - 1) / ColSize)
    ReDim Data(1 To ColSize, 1 To RowSize) As Byte
        
    Dim File As Integer
    File = FreeFile()
    Open strFilename For Binary Access Read As #File
    Get #File, , Data
    Close #File

    Dim x As Long
    Dim y As Long
    For y = 1 To RowSize
        For x = 1 To ColSize
            objCell.Cells(y, x) = Data(x, y)
        Next
    Next
ErrHandle:
End Sub
```
Rubyのメソッドアルゴリズム関連まとめ（初心者・自分用）途中

###引数
メソッド内のカッコ()の中の値

###返り値
メソッドを実行したときに表示される値




###気を付けるポイント

下記では動きません。

条件が2つ以下の場合は```else```のみでOKです。

```
omikuji = rand(1..100)
 #puts omikuji
if omikuji <= 29
   puts"omikujiの中身は#{omikuji}なので大凶"
elsif omikuji >= 30                       ＃ここはelse omikuji >= 30になる必要がある。
    puts "omikujiの中身は#{omikuji}なので大吉" 
end
```



##例題

昭和元年（１年）は1926年。1926年が与えられた場合、「西暦1926年は昭和1年です。」と表示する。

考えるポイント

・昭和1年は1926年なので、西暦から昭和1年の前の1925年を引けば昭和年になる。

単純にこの考えがわからなくてミスをした。

コードは以下の通り。

```
seireki = rand(1926..1988)

showa = seireki - 1925
puts "西暦#{seireki}年は昭和#{showa}年です。"
```




##AND演算子を使った例題

1から10までの数値をランダムに生成して順位を表示する。
以下のように表示をするコードを組む。


順位が(2..5)のとき、あと少しと表示する。
あなたの順位は(1)位ですと表示する。
あなたの順位は(6..10)位ですと表示する。


```
number = rand(1..10)
puts number

if number >= 2 && number <= 5
    puts "あと少し"
elsif number == 1
    puts "あなたの順位は#{number}です"
else number >= 6 && number <= 10
    puts "あなたの順位は#{number}です"
end
```


##OR演算子とAND演算子を使った例題

1から9メートルか、21から30メートルの時に「セーフ！」と表示する。

```
distance = rand(1..30)

# 距離に合わせてメッセージを表示する
distance = rand(1..30)
puts "あなたの距離は#{distance}メートルです"

##　ここにifを追加する
if distance <= 9 || distance >= 21
    puts "セーフ！"
end
```
または

```
# 距離に合わせてメッセージを表示する
distance = rand(1..30)
puts "あなたの距離は#{distance}メートルです"

##　ここにifを追加する
if (distance >= 1  && distance <= 9 ) || (distance >= 21 && distance <= 30 )
    puts"セーフ!"
end
```



##例題

flag変数の値は1~10。
flag変数がtrueの時に「入賞おめでとう！」と表示する。

```
number = rand(1..10)
puts "あなたの順位は#{number}位です"

flag = number <=3
if flag =number <= 3 
   puts "入賞おめでとう！" 
 else flag = number >= 4 
end
```




##例題

```

```
基本情報処理技術者試験のアルゴリズムについて

基本情報処理技術者試験の「データ構造及びアルゴリズム」を解いた。
（平成２６年の秋試験の午後問題の問８）

周辺距離についての問題で、初見だった。

６問／６問　正解だった。

しかし致命的に時間がかかってしまった。

各大問に２０分ほど配分して、問１、[問２〜問７]から４個、問８、[問９〜問１３]から１個で、

１４０分くらいに収めるつもりなのだが、４３分もかかってしまった。

問題文を読んでから問題をとき始めるまでが２８分、前半の虫食い穴埋め問題を解くのに５分、最後の疑似コード読み解きに１０分かかった。

、、、問題文よみすぎ。個々をバッサリ行きたいなあ。読解力を上げないとな、、、。
とにかく基本無料のHTML・CSS・JavaScriptが学べるサイトをまとめた

#はじめに
何故だかこの前書いた
[とにかく基本無料のPython・機械学習が学べるサイトをまとめた](https://qiita.com/meganeo/items/823e3113816651755e95)
↑この記事が伸びたので、JSの方でもやろうと思いました。
前回と同様、簡単な説明だけで、有名なサイトは紹介していません。
コメントでサイトを紹介してくれると嬉しいです。
ブログも紹介しています。
行きます。

#Codeprep
形式：演習
料金：全て無料
HTML,CSS,JSの演習が大量にできます。特にJSは、ライブラリを多数扱っています。
https://codeprep.jp/

#Skillhub
形式：動画
料金：一部無料
HTML,CSS,JSの動画が見られます。一部無料です。
https://skillhub.jp/

#シラバス
形式：テキスト
料金：全て無料
Webサイト制作を0から教えてくれます。
https://cyllabus.jp/#_ebcv=3kxCAMrX.liskul2so.1

#プログラミング入門サイト bituse
形式：テキスト
料金：全て無料
HTML,CSS,JSの基礎が学べます。
https://bituse.info/

#Paizaラーニング
形式：演習・動画
料金：JSの基礎部分は無料
JSの動画と演習があります。
https://paiza.jp/works

#Let'sプログラミング
形式：テキスト
料金：全て無料
JSの記事が多数あります。Ajaxや、JQueryの記事もあります。
https://www.javadrive.jp/

#とほほのJavaScriptリファレンス
形式：テキスト
料金：全て無料
JSの基本文法から、ES2019の最新機能まで書いてあります。
http://www.tohoho-web.com/js/

#マンガで分かる JavaScriptプログラミング講座
形式：テキスト・漫画
料金：全て無料
その名の通り、マンガでJSを学んでいく、珍しいサイトです。JQueryも学べます。
https://crocro.com/write/manga_javascript/wiki.cgi

#JavaScript入門
形式：テキスト
料金：全て無料
JSの基礎文法を、扱う分野ごとに分けてまとめられています。
http://www.pori2.net/js/

#code.9leap
形式：テキスト・演習
料金：全て無料
HTMLとJSのライブラリのenchant.jsを使ったゲーム開発ができるサイトです。
https://code.9leap.net/

#優しいホームページ入門
形式：テキスト
料金：全て無料
基礎中の基礎からホームページ運営のことまで、とても優しく書いてあります。
http://www.ink.or.jp/~bigblock/index.html

#一時間で作るホームページ
形式：テキスト
料金：全て無料
その名の通り1時間で作ることができます。また、作った後のことも書かれています。
http://www.shoshinsha.com/hp/

#HTMLとCSSの基本を猿でも分かるようにまとめた
形式：テキスト
料金：全て無料
HTML,CSSの基本が猿でも分かる記事です。猿でも分かりました。
http://www.ituore.com/entry/html-css-basic

#30分HTML入門
形式：テキスト
料金：全て無料
30分でHTMLの概要を理解する記事です。
https://www.kanzaki.com/docs/html/lesson1.html

#ごく簡単なHTMLの説明
形式：テキスト
料金：全て無料
↑の記事を読み終えた方向けの記事です。
https://www.kanzaki.com/docs/htminfo.html

#おわりに
前回同様、サイトを並べてみました。
↓こっちのほうもよろしくお願いします。
https://qiita.com/meganeo/items/823e3113816651755e95
JavascriptでJSONファイルを読み込み／書き込み

# インストール

```
sudo apt-get install nodejs npm    # nodejsをインストール
sudo apt-get install jq            # jqをインストール
```

# jsonファイルを作成する

```Js:writejson.js
var fs = require('fs');
var masterData = [];

var data = {
    Name: 'taro',
    age: '1',
    weight: 3.0,
};
var data2 = {
    Name: 'jiro',
    age: '0.5',
    weight: 2.0,
};

masterData.push(data)
masterData.push(data2)
let masterData2 = JSON.stringify({MyDog: masterData}, null, ' ')
fs.writeFileSync('output.json', masterData2);
```

実行

```
$ node writejson.js
$ cat output.json| jq
{
  "MyDog": [
    {
      "Name": "taro",
      "age": "1",
      "weight": 3
    },
    {
      "Name": "jiro",
      "age": "0.5",
      "weight": 2
    }
  ]
}
```

# jsonファイルを読み込む

```js:readjson.js
const fs = require('fs');

const jsonObject = JSON.parse(fs.readFileSync('./output.json', 'utf8'));
const result = {};

jsonObject.MyDog.forEach((obj) => {
	result[obj.date] = obj;
	console.log(obj.Name, obj.age ,obj.weight )
});
```

実行

```
$ node readjson.js
taro 1 3
jiro 0.5 2
```

# jsonファイルを読み込んで書き出す

```js:readandwritejson.js
const fs = require('fs');

const jsonObject = JSON.parse(fs.readFileSync('./output.json', 'utf8'));
const result = {};
var masterData = [];

jsonObject.MyDog.forEach((obj) => {
	result[obj.date] = obj;
	console.log(obj.Name, obj.age ,obj.weight )
	var data = {
	    Name: obj.Name,
	    age: obj.age,
	    weight: obj.weight,
	};
	masterData.push(data)
});

let masterData2 = JSON.stringify({MyDog: masterData}, null, ' ')
fs.writeFileSync('output2.json', masterData2);
```

実行

```
$ node readandwritejson.js
taro 1 3
jiro 0.5 2
$ cat output2.json| jq
{
  "MyDog": [
    {
      "Name": "taro",
      "age": "1",
      "weight": 3
    },
    {
      "Name": "jiro",
      "age": "0.5",
      "weight": 2
    }
  ]
}
```

# 参考
[JSON.stringify()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
[Node.jsでJSONを読み込んで加工して書き出す](https://qiita.com/usayuki/items/130c9cab7766d2997a7b)
[Node.js でファイルを保存する方法](https://qiita.com/phi/items/b5ade0c2ecc58935e046)
[JavaScriptでJSONファイルを読み込む方法](https://techacademy.jp/magazine/25693)
[コマンドラインでJSONファイルを整形して表示させる](https://qiita.com/sayama0402/items/277b2e11142a6df01ffe)
[【Python】JSONファイルの読み込み書き込み](https://code-graffiti.com/json-file-in-python/)
[JSON入門](http://www.tohoho-web.com/ex/json.html)
npm -g install しないでVue.jsとQuasarに触ってみた

ゴールデンウィークなので何か触ってみようと思い立ち、
[Vue.js](https://jp.vuejs.org/) と[Quasar](https://quasar.dev/)を使ってみることとしました。

## 対象となる方

- npm install でGlobalがグチャグチャになっている方
- vueやquasar初学者の方
- 何か始めたい方
- お暇のある方
- npmやvueなどでメンターになっても良いと思っている方
 


## 触れる前の環境
- Windows 10
- npm 6.9.0

## できるだけ、npm -g installしたくない

諸般の事情でvueなどいろんな物が既にGlobalに取得されているため、
その環境を壊したくないのです。

@DeployCat さんの　[僕がnpm installに-gをつけないわけ](https://qiita.com/DeployCat/items/cd456d6bea72937464f8) 　を参考にさせていただきました。

**私自身初学者に近いため、「○○はこうやればできる」などあれば遠慮なくご指摘いただきたいです。**

## 環境準備手順
1. フォルダを作成する。`例：C:\vuestudy`
2. コマンドプロンプトを起動する。
3. コマンドプロンプトで作成したフォルダに移動する。`例：cd C:\vuestudy`
4. package.jsonを作成するために、npm init をして適当な情報を入力する。
`例：C:\vuestudy> npm init`
5. [Vue-cli](https://cli.vuejs.org/guide/installation.html)を取得する。
`npm install @vue/cli`
6. [Quasar CLI](https://quasar.dev/quasar-cli/installation)を取得する。
`npm install @quasar/cli`
7. package.jsonのscripts部分を以下のように編集する。

```json:package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",　←　「,」を追記
    "vue": "vue", ←　ここ追記
    "quasar": "quasar" ←　ここ追記
  },
```

## 動作確認
### vue/cli

1. コマンドプロンプトを起動する。
2. コマンドプロンプトで作成したフォルダに移動する。`例：C:\vuestudy`
3. Vue-cliでひな形を作成する。
`npm run vue create sample`
4. vue-cliからの質問は規定値でOK。
5. vue-cliからの指示にしたがって、ひな形を実行して動作確認する。

### quasar/cli

1. コマンドプロンプトを起動する。
2. コマンドプロンプトで作成したフォルダに移動する。`例：C:\vuestudy`
3. Quasar Cliでひな形を作成する。
`npm run quasar create quasample`
4. Quasar Cliからの質問は適宜設定でOK。  
**環境によってはWarningなど出るかもしれませんが、本記事ではその点の解決策は割愛します**
5. Quasar Cliから生成されたひな形のpackage.jsonのscripts部分を以下のように編集する。

```json:生成されたひな形プロジェクトのpackage.json
  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore ./",
    "test": "echo \"No test specified\" && exit 0",
    "quasar": "quasar"　　←　ここ追記
  },
```

6. Quasar Cliから生成されたひな形フォルダに移動し、以下のコマンドを発行して動作確認する。

`npm run quasar dev`


## 触れてみた感想

- warningなど表示されている箇所があるので、調べて解消していきたい。
- npm機能が豊富なので、これから始める人は難しいと感じるかもしれない。
- Qiitaをはじめ、情報収集をするが古くなっている情報が多くある。
- まずは試してみることが必要。
- [Google翻訳](https://translate.google.co.jp/?hl=ja)　様様m(_ _)m
Ruby deleteの罠

## 背景
Ruby on Railsで配列操作をしようとした時に思いがけない罠にハマったので、
メモとして残しておく

## 実現したいこと
DataSourceモデルの中に
"a", "b", "c", "d"というカラムが存在するときに、
"c"だけを除外してそれ以外のカラムのデータのみを取り出す

## やってしまったミス
下記のようにコーディングしていた

```ruby
DataSource.select(DataSource.column_names.delete("c"))
```

しかし、このコードではArray#deleteの思わぬ罠があった。

参考：https://docs.ruby-lang.org/ja/latest/method/Array/i/delete.html

```ruby
array = [1, 2, 3, 2, 1]
p array.delete(2)       #=> 2
p array                 #=> [1, 3, 1]
```

つまり、

```ruby
DataSource.column_names #=> ["a", "b", "c", "d"]
DataSource.column_names.delete("c") #=> "c"
```
となってしまっており、実質

```ruby
DataSource.select("c")
```
と同じ挙動になってしまっていた。


## 解決策
これで元々実現したかったことが実現できる

````ruby
columns_without_c = DataSource.column_names
columns_without_c.delete("c")

DataSource.select(columns_without_c)
```

## 所感
これを探すだけで12時間くらいかけてしまいました。。。
GWの前半を無駄にした。。。
githubデスクトップを使ってリポジトリをgithubで管理する

アプリケーションをgithubデスクトップを使って簡単にgithubで管理する手順を備忘録として記載します。

githubデスクトップの左のAddのタブからCleateNewRepositoryを選択する

※既存のファイルのリポジトリを作成する際はAddExistingRepository

Nameにリポジトリ名
discriptionにリポジトリの目的に関する情報を入力

LocalPathのChooseからgithubで管理したいファイルを選択

[Initialize this repository with a README] は、最初のコミットを README.md ファイル付きで作成します。 
README は、人々がプロジェクトの目的を理解するために役立つので、選択しておく

[Git ignore]と [License]はここでは触れませんがとりあえず無視してOK

[Create repository] をクリックします


[Publish repository] をクリック
[Keep this code private] GitHub の他のユーザに、コードを公にしたくない場合はこのオプションを選択します。

[Publish repository] をクリック
これで、リモート、ローカルに当該のリポジトリが作成されてるので、ブラウザでgithub.comでもリポジトリを管理できるようになっています。

変更修正があった場合、
ギットハブデスクトップの該当のCurrentRepositoryのChangesに変更点が上がっているので、コミットした変更点にチェックを入れてcommit to masterボタンを押す
ブラウザのgithub.comの当該のリポジトリのcode,commitsに変更修正が上がっていればリモートへのプッシュが成功している事が確認できる。


参考
https://help.github.com/ja/desktop/getting-started-with-github-desktop/creating-your-first-repository-using-github-desktop
CodeDOMを利用した内部コンパイラ

#CodeDOMとは#
[Microsoftのサイト](https://docs.microsoft.com/ja-jp/dotnet/framework/reflection-and-codedom/using-the-codedom)にはこう書いてあります
>CodeDOM には一般的なさまざま種類のソース コード要素を表す型が用意されています。 オブジェクト グラフをアセンブルする CodeDOM 要素を使用すると、ソース コード モデルを構築するプログラムをデザインできます。 このオブジェクト グラフは、サポートされているプログラミング言語用の CodeDOM コード ジェネレーターを使用して、ソース コードとしてレンダリングできます。 また、CodeDOM を使用して、ソース コードをバイナリ アセンブリにコンパイルすることもできます。
CodeDOM の一般的な使用方法の例は次のとおりです。
・テンプレートを使ったコード生成。ASP.NET、XML Web サービス クライアント プロキシ、コード ウィザード、デザイナー、またはその他のコード出力機構のためのコードを生成します。
・動的コンパイル。1 つ以上の言語でのコードのコンパイルをサポートします。
>

要はテンプレートから実行ファイルを作れるたり、コードを動的にコンパイルできるわけです

今回は**コンパイル**する方法について説明します。

###テンプレートで実行ファイルを生成する仕組み###
余談ですがテンプレートからコード生成する方法も動的コンパイラを使っています。
そのため、実際はテンプレートからソースコードを生成しコンパイルしています。

#コンパイルしてみる#
今回生成するときに使うコードコード

```csharp:C#
using System;

class Program
{
        static void Main(string[] args)
        {
                Console.Write("Hello CodeDom");
                Console.ReadKey();
        }
}
```

コード

```csharp:C#
using System;
using System.CodeDom.Compiler;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Compile
{
    class Program
    {
        static void Main(string[] args)
        {
            //ソースコード
            string sauce= "using System;\r\n\r\nclass Program\r\n{\r\n" + "\tstatic void Main(string[] args)\n\r\t{\n\r\t\tConsole.Write(\"Hello CodeDom\");\n\r\t\tConsole.ReadKey();\n\r\t}\n\r}\r\n";

            CodeDomProvider provider = CodeDomProvider.CreateProvider("CSharp");//プロバイダの宣言と言語の設定

            CompilerParameters compiler = new CompilerParameters();

            // クラスライブラリの代わりに実行可能ファイルを生成します。
            compiler.GenerateExecutable = true;

            compiler.OutputAssembly =  @"";//出力パスを設定する

            // アセンブリを物理ファイルとして保存します。
            compiler.GenerateInMemory = false;

            // すべての警告をエラーとして扱うかどうかを設定します。
            compiler.TreatWarningsAsErrors = false;
            
            compiler.CompilerOptions = "/optimize";//オプション設定

           //使用するDLLの設定 compiler.ReferencedAssemblies.Add("System.dll");



            CompilerResults compilerResults = provider.CompileAssemblyFromSource(compiler, sauce);

            // ソースファイルのコンパイルを呼び出します。
            if (compilerResults.Errors.Count > 0)
            {
                // コンパイルエラーを表示します。
                foreach (CompilerError ce in compilerResults.Errors)
                {
                    Console.WriteLine (ce.ToString());
                }
            }
            else
            {
                // 正常なコンパイルメッセージを表示します。
                Console.WriteLine("正常に実行されました");
            }
            Console.ReadLine();
        }
    }
}
```

このようにしてコードを生成できます


###注意点###
DLLの設定をする必要があります
DLLの設定をされていないと実行できません

#最後に#
CodeDomを使うとGUIプログラミングツールを簡単に作ることができます。
また、IDEを自作する際にも役に立つと思います。
さらにreplaceを使うことで独自の言語のなんちゃってコンパイラを作ることも可能だと思います
メモランダム Rails tutorial　第8章

# Rails tutorial 第８章

# 基本的なログイン構造

- ブラウザがログインしている状態を保持し、ユーザーによってブラウザが閉じられたら状態を破棄するといった仕組み (認証システム (Authentification System)
 - この認証システムの基盤が出来上がったら、ログイン済みのユーザー (current user) だけがアクセスできるページや、扱える機能などを制御していきます
- なお、このような制限や制御の仕組みを認可モデル (Authorization Model) と呼ぶ。

- **この第8章と第9章を通して、1: ブラウザを閉じるとログインを破棄する (Session)、 2: ユーザーのログイン情報を自動で保存する (Cookie)、3: ユーザーがチェックボックスをオンにした場合のみログインを保存する (Remember me) 、という３つの一般的なログイン機構を実装することになります**


# 1.セッション
- HTTP == statelessなプロトコル。過去を捨てた旅から旅の流れ者的なプロトコル（強者）
 -  よって別のページに移動したときに、ユーザーのIDを保持しておく手段が全くない
 -  Webアプリケーションでは、**セッション (Session) と呼ばれる半永続的な接続**をコンピュータ間 (ユーザーのパソコンのWebブラウザとRailsサーバーなど) に別途設定
 - Railsでセッションを実装する方法として最も一般的なのは、cookiesを使う方法です
   - cookiesとは、ユーザーのブラウザに保存される小さなテキストデータです。cookiesは、あるページから別のページに移動した時にも破棄されないので、ここにユーザーIDなどの情報を保存できます
　 
- UsersリソースではバックエンドでUserモデルを介してデータベース上の永続的データにアクセスするのに対し、Sessionリソースでは代わりにcookiesを保存場所として使う


### Sessionsコントローラ
- ログインのフォームは、この節で扱うnewアクションで処理します。
- createアクションにPOSTリクエストを送信すると、実際にログインします (8.2)
- destroyアクションにDELETEリクエストを送信すると、ログアウトします 

- Sessionリソースではフルセットはいらないので、「名前付きルーティング」だけを使います
- GETリクエストやPOSTリクエストをloginルーティングで、DELETEリクエストをlogoutルーティングで扱います
- rails routesコマンドを実行してみましょう。いつでも現状のルーティングを確認することができます

### ログインフォーム
- セッションフォームとユーザー登録フォームの最大の違いは、**セッションにはSessionモデルというものがなく、そのため@userのようなインスタンス変数に相当するものもない点**です。したがって、新しいセッションフォームを作成するときには、form_forヘルパーに追加の情報を独自に渡さなければなりません。


### ユーザーの検索と認証
- ログインでセッションを作成する場合に最初に行うのは、入力が無効な場合の処理
【Git】pull or pushの際にfatal: The remote end hung up unexpectedlyエラーが出たときの対処

今回自分がgit pullをしようとした際に出くわしたエラーについて、書いていきます。
gitのレポジトリを新しく入れ替えて、いつも通りpullしようとしたところこのエラーに出くわしました。
結果的にめちゃくちゃシンプルなミスだったんですが、調べていくうちにいろんな対処法が見つかったんでそれをまとめていきます。

```
error: RPC failed; result=22, HTTP code = 404
fatal: The remote end hung up unexpectedly
```
というエラーが出た時の対処法を記載していきます。

- git configの設定を変更して、pushできる容量の幅を変更する
- git remoteの登録を確認する
- gitのurlがあっているかどうか確認する

## git configの設定を変更して、pushできる容量の幅を変更する




とりあえず、エラーをググったら
git configの設定を変えればオッケーとのことだったので、急いで

```
git config --global http.postBuffer 524288000
```
このコマンドを使ってみました。
これで150MBまでのgitのpushができるようになります。
なので実際はこのコマンドはpushができなかった時に有効です。HTTPコードが411の時ですね。
404は「そんなものは存在しない」って返されているエラーコードで、411は「送っているデータが大きすぎるよ」って感じです。
急いでいたぼくは確認せずにconfigの変更をしてしまいましたがよくないですね


##git remoteの登録を確認する




git remoteに登録されていなかったら、まあpullは無理です。
コマンドラインからgitをいじる習慣のない場合、ここを設定しておくのを忘れていることあります←自分
Source TreeからだとGit remoteとか登録しなくてもおけなので、、、

```
git remote -v
```
で確認できます。そして、登録されていなかったら

```
git remote add origin [url]
```
これでremoteに登録されます。
ただそれでも、だめな場合は…

## gitのurlがあっているかどうか確認する



```
fatal: The remote end hung up unexpectedly
```
hung upって、「電話を切る」って意味で使われますね。
今回はremote側が「電話を切る」って感じの意味なんで、まあ切れちゃったんでしょうね。
んで404ってことはURLが間違えている可能性。
あとちなみにfatalは「致命的な」という意味でエラー文の横に頻発します。
覚えておくとお得です。

はい。ぼくはここが抜けていました
git pullとかfetchとかcloneを行う時は最後に.gitをつけておかないといけないのについていなかったのが原因でした
ちなみにfetchの意味は「取りに行く」です。情報のみを取りに行くって意味でgit fetchがあります。

URLをブラウザの入力部分からコピーするとこうなっちゃいます。注意が必要でした。

>error: RPC failed; result=22, HTTP code = 411 fatal: The remote end hung up unexpectedly →git configの設定を変更して、pushできる容量の幅を変更する。


>error: RPC failed; result=22, HTTP code = 404 fatal: The remote end hung up unexpectedly →git remoteの登録を確認する gitのurlがあっているかどうか確認する
rails serverでdlopen...image not foundの謎エラーの解決方法

# rails serverを起動でいきなり謎のエラーが出現した。

**dlopen(/Users/xxx/xxx/vendor/bundle/ruby/2.6.0/gems/sassc-2.2.1/ext/libsass.bundle, 5): image not found (LoadError)**


```shell
$ bundle exec rails s
/Users/xxxxx/xxxxx/vendor/bundle/ruby/2.6.0/gems/ffi-1.12.2/lib/ffi/library.rb:145:in 
`block in ffi_lib': Could not open library '/Users/xxxxx/xxxxx/vendor/bundle/ruby/2.6.0/gems/sassc-2.2.1/ext/libsass.bundle': 
dlopen(/Users/xxxxx/xxxxx/vendor/bundle/ruby/2.6.0/gems/sassc-2.2.1/ext/libsass.bundle, 5)
: image not found (LoadError)
```

## 解決方法
いろんな方法を試したが、対象のgemが関連する部分をGemfile.lockで確認。

sass-rails関連でインストールされていた。

```
    sass-rails (6.0.0)
      sassc-rails (~> 2.1, >= 2.1.1)
    sassc (2.3.0)
```

そこで、
1. Gemfile内のsass-railsを一度コメントアウト
2. bundle install
3. コメントアウトを外し再度bundle install

gemのバージョンは上がったが、無事にrails serverで起動できた。
【Gatsby.js】Gatsby.jsで気持のいいサイトを作りましょう！（準備編）

#はじめに
今回、このGatsbyについての投稿をしようと思ったきっかけからお話していきたいと思います。
簡単にことの経緯を説明すると、私自身Web制作者として駆け出しの段階でありますが、HTML&CSS、JavaScript、WordPressの基本的なところを習得した（つもり）で、次はどの方向に進もうかなと考えた時にいくつかの選択肢が目の前に浮上してきました。PHPを鍛えてWordPressさんと仲良くなるか。three.jsとかに手を出してみてグラフィックに挑戦してみるか。はたまたJavaScriptのフレームワークを学んでSPA（シングルページアプリケーション）に挑戦してみるか。。といった感じでしたが、私のミーハーな部分が出てしまい今流行りのフレームワークに飛び込むことに決めました。有名どころで言うとReact、Vueがでしょうか。結果から言うと、私はReactの静的サイトジェネレーターのGatsbyにお世話になることを決めたのですが、この点に関しては長くなりそうなので後ほどお話していければと思います。ただ、一言で言うなれば、投稿機能付のサイトを制作したい事情があったので、、ということです。
今回は準備へんとしていますので、Gatsbyの特徴とはじめ方までとさせていただきます。
次回以降、サンプルを用いて解説していく予定です。


#目次
1. 現段階のSPA界隈
2. Gatsbyの素晴らしさ
3. さっそくはじめてみよう！


##1. 現段階のSPA界隈
それでは、現段階のSPA界隈の状況からお話してきたいと思います。
ちなみに、私自身まだ駆け出しWeb制作者ということもありますので、思い違いをしている部分もあると思いますので、お気づきになられたらご指導ご鞭撻のほどお願いいたします。

有名どころでいうと、以下の感じでしょうか？
・Vue.js
　-Nuxt.js
　-VuePress
・React.js
　-Next.js
　-React　Static
　-Gatsby.js

私は上記からどれを学ぼうか迷っていましたが、当時世界的な人気でいうとReactが強かった（日本ではVue）とのことだったので、Reactをかじっていたこともあり、Vueも使いやすそうだけどまた１から学びなおすのもな、、ということで自然とReactを選択することとなったのですが、中でもGatsbyが優れていると感じたので、その点について次章で解説していきます。

他にも[こんな感じのもの](https://blog.htmlhifive.com/2017/04/28/spa%E7%94%A8javascript%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AAx5%E9%81%B8/)もあるようです。


##2. Gatsbyの素晴らしさ
ここからは、Gatsbyの特徴について記述していきます。
・圧倒的スピード
　-SPA
　-SSR
　-PRPL
　-事前ビルド
・モダン技術がいっぱい
　-React
　-Graphql
　-webpack
.便利なおプラグインがいっぱい
　-scssでの記述
　-CMSの導入も可能
・CMSとの相性がいい
　-WordPressやcontentfulと簡単に組み合わせ可能
などなど、、他にもたくさんあると思います。

ただ、このGatsbyは私の当初の目的であった投稿機能付で爆速表示できるサイトは作りたい！という理想にぴったりハマったため習得を決意しましたが、各々目的にあった学習を進めていくことが大切だと思うので、誰にでもGatsbyをやりましょう！とは言えないですね。

そして、このGatsbyは日本であまり聞くことがありませんが、すでに海外で多くの企業が導入済みです。
IBM、PayPal、Braun、Airbnb、Impossible Food [（参考）](https://jp.techcrunch.com/2019/09/27/2019-09-26-gatsby-raises-15m-series-a-for-its-modern-web-development-platform/)といった世界的な大企業がすでに導入しており、さらにはReactの公式ドキュメント自体もGatsbyで作られているということが衝撃的でした。
日本では、まだまだ通常WordPressでいいや！という風潮が見受けられますが、ユーザーの操作性という「価値」を考えると、表示・遷移スピードは真っ先に改善すべきポイントだと思っています。
なので、日本でも早く流行ることを祈っております。
ただ、まだ現時点で日本語ドキュメントが出ていないのが難点ですが、、（Google翻訳を使いましょう）



##3. さっそくはじめてみよう！

ここからようやくGatsbyをはじめられますね！
しかしながら、その導入手順は驚くほどシンプルでものの数分で終わってしまいます。
操作性のみならず、導入も早いのは素晴らしいです！！
基本的には[公式ドキュメント](https://www.gatsbyjs.org/docs/quick-start/)のクイックスタートに沿って操作を行えばいいだけですが、一応以下で順でターミナルにコマンドを打ち込んでいくだけです。

1.Gatsby CLIをインストールする

```
npm install -g gatsby-cli
```

2.新しいサイトを作成する

```
gatsby new gatsby-site
```

3.ディレクトリをサイトフォルダーに変更する

```
cd gatsby-site
```

4.開発サーバーを起動

```
gatsby develop
```

とまあ、こんな感じで進めていけばあっという間に準備完了です。
ここから実際のサイト作成までは次回以降で解説していければと思います。
最後に参考文献を載せておきます。


#参考文献
[公式ドキュメント](https://www.gatsbyjs.org/)
[SPA, SSR, 静的サイトジェネレーターについて](https://medium.com/@akiyamaysk0321/spa-ssr-%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6-134172e10731)
[高度なAPIやJSライブラリを使う現代的なウェブサイト作りを助けるGatsby](https://jp.techcrunch.com/2019/09/27/2019-09-26-gatsby-raises-15m-series-a-for-its-modern-web-development-platform/)
[デザイナーが1人でGatsbyを使ってサイトを作ったよ](https://qiita.com/xrxoxcxox/items/ac5937fb0e54a875787a)
[GatsbyjsでWordPress風の簡易ブログを作って勉強してみた](https://qiita.com/okumurakengo/items/c34aa980afec9957a928)
開発元が未確認のMacアプリケーションを開く方法

インストールしたatomが開けなかったので、その解決方法を備忘録として記録します。

問題点：
「確認済みの開発元によってAppleに登録されていないめアプリケーションを開くことができません」という旨の警告ダイアログが表示され、アプリを起動することができなかった。

解決方法：
Finderを起動し、開きたいアプリケーションのアイコンを、controlキーを押しながら左クリック。→「開く」を選択。


ちなみに同様の理由で開けないファイルを開く際にも使うことができました。

参考サイト：https://support.apple.com/ja-jp/guide/mac-help/mh40616/mac
Nuxt.jsのAsyncDataでaxiosや自作pluginを使う方法

# AsyncDataとは
Nuxt.jsにおけるAsyncDataは Vue || view インスタンスがつくられる前にAPIからデータをとってくるなどができる優れモノです。しかし、インスタンスがないためthisとかが使ずpluginにしている関数を呼び出す方法にすこし苦戦することがあります。

### 簡単です context を使いましょう。
asyncDataの引数にcontextを入れるとつかえます。console.logなどで見てもらえばわかりますが、contextからはstoreやrouteなども参照できます。

``` vue:index.vue
//省略

<script>
export default {
 async asyncData (context) {
  const hoge = await context.$axios.get('hoge')
   .then((res) => {
    return res.data
   }).catch(() => { '省略' })
  return { fuga: hoge }
 }
}
<script>

//省略
```

## 自作pluginをどうやってcontextにいれるか
contextはオブジェクト形式になっているのでチェーンさせてしまえば入れられます。

``` javascript:plugins/hogeplugin.js
export default (context) => {
  context.$hogeplugin = () => {
    let url
    url = 'Hello world'
    return url
  }
}
```
このようにすれば先ほどのcontextから `context.$hogeplugin` のように呼び出すことができます。

nuxt.config.jsにプラグインの記述も忘れずに！
CNN可視化の紹介

CNN Explainerとは
---------------
CNNの各計算の過程を可視化するツールです。ジョージア工科大学の博士は開発したものです。
<img width="1421" alt="スクリーンショット 2020-05-04 12.56.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252761/e24cf320-a461-ba44-fb37-b6256e042dc7.png">

畳み込み層の可視化
-----
  このCNN Explainerの使用方法として、確認したノードにクリックしたら畳み込みの過程が示されます。
　<img width="525" alt="スクリーンショット 2020-05-05 8.25.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252761/6121e3c6-dbf6-0af2-c002-bc14e929ee27.png">

ReLU層とMax Pooling層可視化
----
　<img width="509" alt="スクリーンショット 2020-05-05 8.26.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252761/739242f3-9b15-248d-47ae-598f104950d1.png">
　<img width="492" alt="スクリーンショット 2020-05-05 8.27.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252761/e4c3b5f4-c27a-af03-f98b-69bdc48037e4.png">

Softmax関数の詳細
----
　<img width="488" alt="スクリーンショット 2020-05-05 8.28.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252761/b887c902-aaf1-a77d-6371-ee09643d7617.png">
CNN導出の可視化
----
CNNの導出過程を可視化することができます。
<img width="1027" alt="スクリーンショット 2020-05-05 8.29.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252761/5c42fafa-cfcc-1bb1-6a1f-06d11ee72b21.png">
参考文献
---
Web : https://poloclub.github.io/cnn-explainer/
Paper:https://arxiv.org/pdf/2004.15004.pdf
Pythonのファイルダウンロードにはurlretrieveではなくurlopenを使うべき理由

## 結論

urlopenを使いましょう。urlretrieveはダウンロード開始時にファイルが生成されるため、ダウンロードが失敗・中断した場合不完全なファイルが残ってしまいます。

## 概要

Pythonでファイルをダウンロードする際、最も記述がシンプルなのはurlretrieveです。

```python:urlretrieve
import urllib

urllib.request.urlretrieve(download_url, save_dir)
```

urlretrieveは[deprecatedのようです。](https://docs.python.org/ja/3/library/urllib.request.html)同じ事をするならurlopenが推奨されているよう。
しかしurlopenは以下のとおり若干ですが記述が煩雑なので、問題がないならurlretrieveを使いたい訳です。

```python:urlopen
import urllib
data = urllib.request.urlopen(download_url).read()
with open(save_dir, mode="wb") as f:
    f.write(data)
```

## urlopen VS urlretrieve

urlopenはtimeoutオプションが使えるという利点はありますがそれは些細なことです。<b>urlretrieveを使うべきではない大きな理由</b>があります。以下のとおりです。

- urlretireveはダウンロード開始時にファイルを作成します。
- urlopenはダウンロード完了後にファイルを作成します。

urlretireveはダウンロードの成否関係なく先にファイルを生成します。作成されたファイルにデータを随時書き込んでいくイメージです。つまりダウンロードが何らかの理由で失敗・中断された場合は不完全なファイルが出来上がります（壊れたファイルになり全く読めません）。

## 終わりに
少しハマって調べたけれど情報がなかったため記事にしました。結構致命的な問題だと思いますので、uriretrieveを使うのはやめておきましょう。
docker-composeで立てたコンテナの中にログインする方法

# 前提条件
※  **docker-compose**が起動している前提です。
いつも忘れがちなので、備忘録的にメモ。
余談ですが、記念すべき初投稿（笑）です。
## 手順1.(docker-composeコマンドで確かめる。)

###① docker-composeで起動しているサービス名を確認する。

```
docker-compose ps --service   
```

**サービス名**は、docker-compose.ymlにも書いてある（Services）ので、そちらを見てもよい。

###② 次のコマンドを実行。

```
docker-compose exec (サービス名) /bin/bash
```

これで無事ログインできると思います。　お疲れ様でした！！

## 手順2.(dockerコマンドで確かめる。)

先程はdocker-composeでDockerのコンテナにログインしましたが、dockerコマンドでもログインができます。
その場合は、サービス名を指定するのではなく、**コンテナ名**を指定しましょう。(ここで躓いた)

###① docker ps で起動しているコンテナを確認する。

```
ディレクトリ名 % docker ps
CONTAINER ID        IMAGE                   COMMAND                  CREATED             STATUS              PORTS                               NAMES
14b873295068        phpmyadmin/phpmyadmin   "/docker-entrypoint.…"   13 hours ago        Up 13 hours         0.0.0.0:8080->80/tcp                test_phpmyadmin
7775dcba2d50        mysql:5.7               "docker-entrypoint.s…"   13 hours ago        Up 13 hours         0.0.0.0:3306->3306/tcp, 33060/tcp   mysql_host

```
ここに表示されているNamesが**コンテナ名**です。
こちらを確認したら、

###② 次のコマンドを実行

```
    docker exec -it コンテナ名 /bin/bash
```

ログインできましたでしょうか・・？
PSNR, Mean Squared Error (MSE) 変換

二つの画像がどれだけ違うかを表す指標としてはPSNRやMSEやSSIMが用いられます。このうちPSNRとMSEは本質的には同じものです。

この二つの間で頻繁に変換を行うことがあり、よく式を忘れてめんどくいので、一行ですが関数化して残しておくことにしました。

誰かのささやかな助けになるといいです。

```psnr_mse_conversion.py
import math
def mse2psnr(mse, max_val=1):
    # max_val: 1 or 255
    return 10 * (math.log10(max_val**2 / mse))

def psnr2mse(psnr, max_val=1):
    return 1 / (10 ** (psnr / 10))

psnr2mse(30)
# 0.001
mse2psnr(0.001)
# 30.0
```

# 参考
[wikipedia PSNR](https://ja.wikipedia.org/wiki/%E3%83%94%E3%83%BC%E3%82%AF%E4%BF%A1%E5%8F%B7%E5%AF%BE%E9%9B%91%E9%9F%B3%E6%AF%94)
iCalendar(.ics)でインポートした予定を通知したい

#はじめに
Google Calendarには.ics形式のカレンダーをインポートして表示させる機能はありますが、残念ながらそのデータを変更したり、他のサービスに連携させることはできません。(元が外部データなので当たり前ですが…)

そのままでは、インポートしたデータを使ってIFTTTと連携したりすることが難しいです。そこで、その外部データを自分の予定として定期的に自動保存することで自由に通知したり変更したりできるようになりました。

<img width="443" alt="スクリーンショット 2020-05-04 12.13.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173847/248b657f-4dba-d64b-9c9f-e2afad497fd1.png">
<img width="440" alt="スクリーンショット 2020-05-04 12.13.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173847/d0e99e99-6abb-866b-0fa1-2f1165379311.png">

(上がインポートした予定、下がそれを自分のカレンダーにコピーしたものです。編集・削除などができるようになっていることがわかります。)

#やり方
Google Apps Scriptでこのことを可能にするツールを作ってくださっている方がいらっしゃいました！それを利用します。

1. https://github.com/derekantrican/GAS-ICS-Sync へアクセス。
2. 赤枠のリンク先にあるコードをコピーして利用します。
 <img width="1004" alt="スクリーンショット 2020-05-04 12.22.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173847/112c18ae-4fbd-cf68-9b2c-a591c3afdbb6.png">
**これ以降の説明は画像内の一つ下のリンクに掲載されているので簡単な説明に留めたいと思います。**
 

3. GASの画面が開くのでそこにある4つの .gsファイルを自分のGASプロジェクトにコピーしてきます。
4. Google の CalendarAPIが必要になったりする関係で、マニフェストファイルを開いて先ほどの4つの .gsファイルの他にある`appsscript.json`から内容をコピーしてきます。(タイムゾーンなどは変更した方がいい?)
5. `Code.gs`内にある変数を自分用に書き換えます。
6. `Code.gs`のinstall関数を一度実行して、権限の付与とトリガーの作成を行います。
7. 完成です！

#終わりに
これで外部ツールなどで発行された .icsファイルで予定を読み込んで、予定の15分前になったらIFTTTで通知を飛ばすなんてことも可能になります！また夢が広がりますね。
Excel×Pythonで作業フローを効率化する方法を調べてみた④

#今回の目的
PythonでExcelファイルを出力するときに、グラフを設定する。
※例のごとく、説明はプログラムのコメントで記載しています。

###プログラムの流れ
①sample_graph.xlsxファイルを取り込む
②グラフを設定する
③sample_graph2.xlsxファイルに出力する

#プログラム実行結果確認
※プログラムは一番下

###取り込むエクセル（sample_graph.xlsx）
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/8bc3be6f-aed9-b86a-c7f4-30071b949370.jpeg)

###出力ファイル（sample_graph2.xlsx）
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/af8fd1bd-3426-8ab7-f154-67fdb1f5f663.jpeg)


#プログラム
```python:graph_create.py
import openpyxl
from openpyxl.chart import PieChart, Reference
from openpyxl.chart.series import DataPoint

#エクセルファイルを取得
wb = openpyxl.load_workbook("./data/sample_graph.xlsx")

#sheet「名：Sheet1」を取得
ws = wb["Sheet1"]

#グラフのデータを設定
data = Reference(ws, min_col=2, max_col=2, min_row=1, max_row=ws.max_row)

#グラフのラベルを設定
labels = Reference(ws, min_col=1, min_row=2, max_row=ws.max_row)

#グラフをつくる！
chart = PieChart()                          #円グラフオブジェクトを取得　※ここがグラフのタイプ（棒グラフならBarChart）
chart.title = "カテゴリ別売り上げ"            #円グラフのタイトル設定
chart.add_data(data, titles_from_data=True) #円グラフのデータ設定
chart.set_categories(labels)                #円グラフのカテゴリ設定

#円グラフをエクセルのシートws、位置D3セルに出力
ws.add_chart(chart, "D3")

#ファイルを出力
wb.save("./data/sample_graph2.xlsx")
```

#まとめ
こんな感じで円グラフができました。
あとは、微調整も、別タイプ（棒グラフなど）も設定をちょこちょこ変えるって感じですね。

以上です(*'▽')
Automation Anywhere で変数に特殊文字を代入するには？

RPAでちょっと複雑なことをやろうとすると、文字列関係の加工/演算を行いたいというニーズが出てくるのではないでしょうか！？(^^♪ UiPathではVisual Basic.NETの書式が変数に対して利用できるので、様々な関数が使用できますが、Automation Anywhere (AA) では演算に使えるコマンド/アクションがあらかじめ限定されている (特にv11.3)ため、String OperationコマンドやVariable Operationコマンドを何回も繰り返し使う必要があり、冗長になる傾向があります (A2019では変わっています)。

「ちょっと複雑な事」のひとつに、特殊文字 (空白、改行、タブや制御文字等)を使いたい場合があります。
そのような場合にAAでどうするかについて、バージョンごとに見てみましょう。

# v11.3.xの場合

### 改行とタブ
変数への代入作業 (変数の作成、Variable Operation、String Operation)を行うダイアログボックスの値指定テキストボックスは、改行の入力を許す**「複数行テキストボックス」**であるため、改行の入った文字列を入れることも可能ですし、**改行のみを入れることも可能**です。
以下の3つのダイアログボックスで改行文字1つだけを入れた状態です。カーソルの点滅が2行目で行われていることに注意してください。(<font color="Red">矢印部分</font>)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490819/45a5ea43-9698-1570-b916-07b10e93601a.png)
タブについては、テキストボックス内で`TAB`キーを押してもタブ文字は入らず、ダイアログボックス内の次のコントロールにフォーカスが移ってしまいますが、メモ帳等で入力されたタブ文字をコピペすると入力可能です。

アクションリスト上は改行が入っていることはわかりにくい (空白、スペース、改行、タブの区別がほぼつかない) ですが。。。( ;∀;)

### 空白
変数への代入作業 (変数の作成、Variable Operation)を行うダイアログボックスでは、空白、つまり何もない長さゼロの文字列 (=NULL)を代入できます。つまり、変数にNULLを保持しておけるので、たとえばExcelのSet Cellのセルの値など、空白を指定したいのだけれど**入力が必須になっているダイアログボックスのフィールドがある場合は、NULLの入った変数を指定することで回避**できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490819/c67008ca-9624-ac4b-4d46-d92ec00abba0.png)



# A2019の場合

### 改行とタブ
v11.3と違い、A2019のアクションの詳細の中のテキストボックスの中には改行を許さないものがあるため、同じテクニックが使えない場合があります。ただし、新しくシステム定数として`$String:Enter$`と`$String:Tab$`が改行文字、タブ文字として定義されました。これらを使えば指定が可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490819/720bfa60-7528-7dac-72bd-6fb4e53b25f7.png)


### 空白
v11.3と同様、変数にはNULLを保持しておけるので、たとえばExcelのSet Cellのセルの値など、空白を指定したいのだけれど**入力が必須になっているダイアログボックスのフィールドがある場合は、NULLの入った変数を指定することで回避**できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490819/3ef81f23-4437-649b-d8b5-ab3099b8540b.png)
Google Chrome拡張機能をMicrosoft Edge用に書き換えるときの問題点について

# Google Chrome拡張機能をMicrosoft Edge用に書き換えるときの問題点について
##内容
開発したGoogle Chrome拡張機能をMicrosoft Edge用に新しく書き換える際に扱いに困ったことがいくらかあったのでそのエラーに対する解決策をまとめました。

##問題点1: manifest.jsonに author を明記する必要がある
Google Chromeの拡張機能では author(著者)を明記しなくてもエラーは発生しません。しかし、Microsoft Edgeの場合は authorを明記しないと次のようなエラーが発生しました。

```
Manifest parsing error: Missing 'author' field.
```
Microsoft Edgeの拡張機能の場合、拡張機能の名前の下に開発者名を表示させなければならないようでこのエラーが発生します。
authorについてはnameやversionなどと同様、

```json
    "author": "ここに名前",
```
の形式で当てはめることができました。

##問題点2: Microsoft Edge でのみ発生する文字化けがある
css等で見た目を変更する際に、テキストをはめ込むことがあると思います。私もcssでp要素の前にテキストをはめ込んでみました。
その結果、Chromeでは問題なく表示されるものでもMicrosoft Edgeではなぜか文字化けが起こってしまいました。
原因を調査しこちらの記事にたどり着きました

>Microsoft Edgeでjavascript,cssファイルが文字化けする
https://qiita.com/kazu22002/items/510a3e15e5217f68562b

このエラーについての直接的な解決方法は恐らく不明でデベロッパー側でどうにか対処するしかなさそうです。

##まとめ
案の定、Microsoft Edgeでの拡張機能の開発はGoogle Chromeに比べかなりややこしい部分が多いのが大きな印象でした。
ブラウザのシェアについてもChromeが圧倒的に割合が高いのでわざわざChromeの拡張機能をMicrosoft Edgeに新しく書き換える必要あまりないのかと個人的に思います。

##参考記事
[Microsoft Edgeでjavascript,cssファイルが文字化けする](https://qiita.com/kazu22002/items/510a3e15e5217f68562b)