OmniAICreator/Qiita-1.07M huggingface dataset:
react-date-rangeでendDate選択時にのみアクションを発行する

## はじめに
react-date-rangeはカレンダーのUIから日付を選択できるライブラリ。
https://github.com/hypeserver/react-date-range

## 基本的な使い方
基本的な使い方はとてもシンプル

```typescript
         <DateRange
              onRangeFocusChange={onSelectPeriod}　// 後述
              onChange={(range) => postDate(range)} // 日付をクリック等で指定した際に発火
              moveRangeOnFirstSelection={false} // trueにするとクリックした日に範囲が限定される。false時はstartとendを指定した際に範囲が決定される
              months={2} // defaultで一画面上に表示される月の数
              ranges={[
                {
                  startDate: Date型の値,
                  endDate: Date型の値,
                  key: "selection" // 後述
                }
              ]} // ここに指定したstartとendが選択中の期間として設定される。
              direction="horizontal" // 縦か横か
              locale={jaLocale} // 言語設定
              dateDisplayFormat={"yyyy/MM/dd"} // 日付表示のフォーマット
              monthDisplayFormat={"yyyy年MMM"} // 月表示のフォーマット
              maxDate={endOfToday()} // 指定できる最大未来
              minDate={new Date(2000, 1, 1)} // 指定できる最古過去
            />

```
まじこれだけ。これ以外にもたくさんパラメータある。詳細は[こちら](https://github.com/hypeserver/react-date-range)。

## endDate選択時のみにアクションを発行する
onChange及びその他のonChange系列のアクション（onRangeFocusChangeも含む）の発火タイミングは日付をクリック等で指定したタイミングになっている。
すなわち、startとendを日付のクリックで決めると、2回onChangeが走る。
これだと単純にonChangeでサーバーにリクエストを送ってデータをfetchする場合、無駄なリクエストがstartのみを選択した瞬間に発生してしまう。だが、onChangeにはstartだけの選択なのか、endを選択したのかを示すようなパラメータが存在していない。

その情報はonRangeFocusChangeの引数に入っている。react-date-rangeはそれを[0, 0]または[0, 1]で表現している。
**[0, 0]はstart/end両方を指定した時、[0, 1]はstartのみを指定したときである。**</span>

この情報をreduxやlocal stateで管理してその値を参照して、リクエストをサーバーに飛ばすか飛ばさないかを決めればいい。
しかし、onRangeFocusChangeの引数はこの[0, 1]とかの情報のみで、選択した日時の情報はない。
なので現状onChangeとonRangeFocusChangeを組み合わせる必要がある。
ローカルstateでやるならこんな感じかと。

```typescript
const [isPeriodSelectionFinished, setIsPeriodSelectionFinished] = useState(true);

useEffect(() => {
 if (isPeriodSelectionFinished) {
  // post処理
 }
})

return (
           <DateRange
              onRangeFocusChange={(props) => setIsPeriodFinished(_.isEqual(props, [0,0]))}
              onChange={(range) => postDate(range)} // 日付をクリック等で指定した際に発火
              moveRangeOnFirstSelection={false} // trueにするとクリックした日に範囲が限定される。false時はstartとendを指定した際に範囲が決定される
              months={2} // defaultで一画面上に表示される月の数
              ranges={[
                {
                  startDate: Date型の値,
                  endDate: Date型の値,
                  key: "selection"
                }
              ]} // ここに指定したstartとendが選択中の期間として設定される。
              direction="horizontal" // 縦か横か
              locale={jaLocale} // 言語設定
              dateDisplayFormat={"yyyy/MM/dd"} // 日付表示のフォーマット
              monthDisplayFormat={"yyyy年MMM"} // 月表示のフォーマット
              maxDate={endOfToday()} // 指定できる最大未来
              minDate={new Date(2000, 1, 1)} // 指定できる最古過去
            />
)
```

いやユースケース的にend決定時に発火するonEndChange的なやつ作れ。
せめてonRangeFocusChangeの情報とonChangeの情報をどっちかに寄せて、どっちか使えば済むようにはしといてほしかったよね。
参考：https://github.com/hypeserver/react-date-range/issues/400
テスト29

```vb

Sub Hani()

Dim r As Variant
Dim r2 As Variant
Dim msg As String

msg = "以下のセルが空欄になっています。確認をお願いします。" & vbCrLf & vbCrLf
Set r = ThisWorkbook.Sheets("テスト").Range("B5:B9")

For Each r2 In r

    If r2.Value = "" Then
    
        msg = msg & r2.Offset(0, -1).Value & "(" & Replace(r2.Address, "$", "") _
              & "セル)" & vbCrLf
       
    End If

Next r2

If InStr(msg, "(") > 0 Then

    MsgBox msg, vbCritical

End If

End Sub
VRCデジタル時計の入手

#1. この記事は？

VRchatにてデジタル時計の入手、配置方法について説明します。(対象：SDK3で作成されたワールド)

![53.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/7da8cb67-58ad-31ef-d91a-ab33b7a2e1a3.jpeg)

#2.　どうやってやるの?

(1)下記サイトから必要データをダウンロードしてきます。
https://booth.pm/ja/items/1986599

(2)同時にUdonSharpを下記サイトからダウンロードしてください。
https://github.com/Merlin-san/UdonSharp/releases

(3)Unity メニューバーにて　Assets -> Import packages -> Custom packageより、「Udon_DateTimePanel.unitypackage」
と「UdonSharp_v0.19.2.unitypackage」をImportしてください。

(4)DateTimePanelフォルダにある、「DateTimePanel」プレハブをsceneにドラッグしてください。あとばデジタル時計の配置場所を好きな位置に調整してください。


![56.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/f6ebf198-fbfe-723b-b41f-e7c075473285.jpeg)
【GAS】GoogleAppsScriptを用いてDrive上のファイルのIDを取得する方法

こんにちは！GoogleAppsScriptを使った業務効率化に夢中の初心者プログラマー、太郎です。

今日は**GoogleAppsScript(GAS)を用いてDrive上のファイルのIDを取得する方法**について書いていきたいと思います。

初心者向けですが、javascriptの基本的なルールは押さえておいた方が理解はしやすいと思いますので、まだの方は[Progate](https://prog-8.com/dashboard)でサクッとjavascriptの文法を学習してみてください。
##ファイルの名前から取得する方法
GoogleDriveで使用するDriveAppクラスには`getFilesByName`というメソッドがあります。このメソッドを使って、マイドライブの中にある「IDを取得したいドキュメント」というGoogleドキュメントファイルのIDを取得したいと思います。
![スクリーンショット (74).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108046/11e38885-bec0-0b13-27f6-dfaf21324a42.png)
コードはこんな感じ

```javascript
function getFileId() {
  var targetFiles = DriveApp.getFilesByName('IDを取得したいドキュメント');
  var fileId = targetFiles.next().getId();
}
```
これで目当てのファイルIDが取得できます。
`DriveApp.getFilesByName`で得られる値は、`FileIterator`というデータ型で、取り出すときには`next()`を使う必要があるみたいです。
今回取得したのは一つのファイルですが、getFile「s」ByNameとなっていることからも、複数のデータ情報が入っているのが常らしく、`next()`でそのファイル一つ一つを取り出していくようです。
その場合、最後のファイルかどうかを判別する`hasNext()`といっしょに用いられ、

```javascript
while (files.hasNext()) {
    var file = files.next();
    // do something
```
こんな風に記述されます。`hasNext()`は次のファイルがないときに`False`を返します。While文は`False`を返されると処理が止まるので、
次のファイルがないファイルまでたどり着いたら処理を止める
＝最後のファイルにたどり着いたら処理を止める
＝最初から最後までのファイルを取得する
こういうことです。うん？？？逆に分かりづらいかな。。。
要するに、hasNextとnextを使うと、取得したFiles(Foldsでもよし)のデータを全部取り出せるって言うことですね。

今回だとこう書けます

```javascript
function getFileIdFromName() {
  var targetFiles = DriveApp.getFilesByName('IDを取得したいドキュメント');
  
  while (targetFiles.hasNext()) {
    var fileId = targetFiles.next().getId();
  }
}
```
以上がファイルの名前からIDを取得する方法になります。
##URLからIDを取得する方法
ドライブ上に保存されているデータには、必ずIDがあり、URLがあります。そのURLからもIDを取得することができます。
ドライブのURLには共通の形があります。
`https://drive.google.com/ファイル形式/よく分からない文字列/ID/閲覧情報`
なので、「/(スラッシュ)」を区切りとして、文字情報を配列として取得して、ID部分だけを取り出すことができます。使うメソッドはsplitですね。

```javascript
function getFileIdFromUrl() {
  var targetFileUrl = 'https://drive.google.com/ファイル形式/よく分からない文字列/ID/閲覧情報';//取得したいドライブ上のファイルのURLを入力
  
  var urlArray = targetFileUrl.split('/');
  var fileId = urlArray[5];
}
```
urlArrayを出力すると
`[https:, , drive.google.com, ファイル形式, よく分からない文字列, ID, 閲覧情報]`
こんな配列になっていることが分かります。取得したいIDはこの配列の6番目なので、urlArray[5]で取り出せる、というわけですね！

以上、GoogleAppsScriptを用いてDrive上のファイルのIDを取得する方法でした。
参考になれば嬉しいです！今後も様々トライしてみた結果を記事に書いていきたいと思います！
[生産性向上]Windowsのショートカットキーまとめ

新卒で１年ほどエンジニアをやって来ましたが、「プログラミングができる」ことよりも、「より早く（生産性高く）」「問題解決するための方法」を身につけていることの方が圧倒的に大切だと感じています。
今回は自身が「生産性を高めるため」に役立った考え方・知識・スキルの一つである「Windowsのショートカット機能」についてまとめました。

#Windowsのショートカットキー#
| キー① | キー② | キー③ | キー④ | できること |
| :---: | :---: | :---: | :---: | :---: |
|**windows**|**L**|||**画面をロック**|
| **Windows** | **数字** |  |  | **タスクバーのアプリを開く事ができる。左か-ら順に１２３・・・で開く事ができる** |
| **Windows** | **↑** |  |  | **開いている画面を最大化** |
| **Windows** | **→（←）** |  |  | **開いてる画面を右（左）半分に寄せる** |
| ctrl | F |  |  | 文字検索ウィンドウ |
| **Windows** | **E** |  |  | **エクスプローラー** |
| **Windows** | **M** |  |  | **全てのウィンドウを最小化** |
| **Windows** | **Shift** | **M** |  | **最小化したWindowを復元** |
| **Shift** | **F10** |  |  | **右クリック** |
| **Shift** | **Delete** |  |  | **ゴミ箱に入れずに完全削除** |
| **Shift** | **ctrl** | **Esc** |  | **タスクマネージャーの起動** |
|**Alt**|**TAB**|||**ウィンドウの切り替え**|
|**Alt**|**P**|||**ファイルの中をプレビュー表示**|
|**Ctrl**|**T**|||**新規タブを開く**|
|**Alt**|**W**|||**タブを閉じる**|
|**Ctrl**|**Tab**|||**タブを順番に切り替える**|
|**スペース**||||**一画面だけ上にスクロール**||||||
|**Shift**|**スペース**|||**一画面だけ下にスクロール**|
|**Alt**|**D**|||**アドレスバーを選択**|
|**Alt**|**shift**|**Tab**||**ウィンドウの切り替え（戻す）**|
|**F2**||||**ファイイル名を変更する**|
|**Alt**|**Shift**|**クリック**||**エクスプローラー内で使用。パスのコピーができる**|

#最後に#
徐々に使いながら覚えていこうと思います。
また、もっと便利な機能やショートカットがあれば教えてください〜！
「〜分前、〜時間前」の表示方法

#前提
コントローラーのアクションにより、viewが表示されるようになっていること。
viewが表示されるための適切なインスタンス変数がコントローラー内に定義されていること。

（例 post）

#できること
〜分前、〜時間前の時刻の経過示すことができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1052793/aa825f30-5a3d-49d4-ddc4-21c230f77c1c.png)

#バージョン
rubyのバージョン　ruby-2.6.5
Railsのバージョン Rails:6.0.0

#実装の全体像
①日本語化の指示を出す
②datetime、distance_in_words を設定
③viewにtime_ago_in_words(@post.created_at)を記述

#実装手順
①日本語化の指示を出す

```ruby:config/application.rb
config.i18n.default_locale = :ja
```

②datetime、distance_in_words を設定

```config/locales/ja.yml
ja:
  datetime:
    distance_in_words:
      half_a_minute: "30秒前後"
      less_than_x_seconds:
        one:   "1秒"
        other: "%{count}秒"
      x_seconds:
        one:   "1秒"
        other: "%{count}秒"
      less_than_x_minutes:
        one:   "1分"
        other: "%{count}分"
      x_minutes:
        one:   "約1分"
        other: "%{count}分"
      about_x_hours:
        one:   "約1時間"
        other: "約%{count}時間"
      x_days:
        one:   "1日"
        other: "%{count}日"
      about_x_months:
        one:   "約1ヶ月"
        other: "約%{count}ヶ月"
      x_months:
        one:   "1ヶ月"
        other: "%{count}ヶ月"
      almost_x_years:
        one:   "１年弱"
        other: "%{count}年弱"
      about_x_years:
        one:   "約1年"
        other: "約%{count}年"
      over_x_years:
        one:   "1年以上"
        other: "%{count}年以上"
```
③viewにtime_ago_in_words(@post.created_at)を記述
以下のどちらかを記述。

```
<%= time_ago_in_words(@post.created_at) %>前
```

or

```
<%= "#{time_ago_in_words(@post.created_at)}前" %>
```

以上です。
STM32F767のArduinoでの液晶,AQM0802Aで表示(i2c)

1.SCLとSDAを接続、プルアップも忘れずに
2.電源の接続
3.下記のソースコードを書き込む
4.コンパイル実行で表示されたら終了
5.おわり

おまけ
古いスイッチサイエンスのソースを使っています。

```c++

#include <Wire.h>
 
#define vddPin 16    // ArduinoA2
#define gndPin 17    // ArduinoA3
//#define sdaPin 18    // ArduinoA4
//#define sclPin 19    // ArduinoA5
#define I2Cadr 0x3e  // 固定
byte contrast = 35;  // コントラスト(0～63)
 
void setup() {
  pinMode(gndPin, OUTPUT);
  digitalWrite(gndPin, LOW);
  pinMode(vddPin, OUTPUT);
  digitalWrite(vddPin, HIGH);
  delay(500);
  Wire.begin();
  lcd_cmd(0b00111000); // function set
  lcd_cmd(0b00111001); // function set
  lcd_cmd(0b00000100); // EntryModeSet
  lcd_cmd(0b00010100); // interval osc
  lcd_cmd(0b01110000 | (contrast & 0xF)); // contrast Low
  lcd_cmd(0b01011100 | ((contrast >> 4) & 0x3)); // contast High/icon/power
  lcd_cmd(0b01101100); // follower control
  delay(200);
  lcd_cmd(0b00111000); // function set
  lcd_cmd(0b00001100); // Display On
  lcd_cmd(0b00000001); // Clear Display
  delay(2);
}
 
void loop() {
  lcd_setCursor(0, 0);
  lcd_printStr("SWITCH");
  lcd_setCursor(0, 1);
  lcd_printStr("SCIENCE");
  delay(100);
}

// コマンド RSを0
void lcd_cmd(byte x) {
  Wire.beginTransmission(I2Cadr);
  Wire.write(0b00000000); // CO = 0,RS = 0
  Wire.write(x);
  Wire.endTransmission();
}

// データ RSを1
void lcd_contdata(byte x) {
  Wire.write(0b11000000); // CO = 1, RS = 1
  Wire.write(x);
}

//ラストのデータは、COは、0
void lcd_lastdata(byte x) {
  Wire.write(0b01000000); // CO = 0, RS = 1
  Wire.write(x);
}
 
// 文字の表示
void lcd_printStr(const char *s) {
  Wire.beginTransmission(I2Cadr);
  while (*s) {
    if (*(s + 1)) {
      lcd_contdata(*s);
    } else {
      lcd_lastdata(*s);
    }
    s++;
  }
  Wire.endTransmission();
}
 
// 表示位置の指定
void lcd_setCursor(byte x, byte y) {
  lcd_cmd(0x80 | (y * 0x40 + x));
}


```

![i2c_8x2_si_b_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/bd9d18b2-33f1-cba8-a696-abe2b2e5f0f4.jpeg)
Effective Python 備忘録 【第８章】

# はじめに

Twitterで一時期流行していた 100 Days Of Code なるものを先日知りました。本記事は、初学者である私が100日の学習を通してどの程度成長できるか記録を残すこと、アウトプットすることを目的とします。誤っている点、読みにくい点多々あると思います。ご指摘いただけると幸いです！

# 今回学習する教材

- [Effective Python](https://www.amazon.co.jp/Effective-Python-%E2%80%95Python%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%92%E6%94%B9%E8%89%AF%E3%81%99%E3%82%8B59%E9%A0%85%E7%9B%AE-Brett-Slatkin/dp/4873117569/ref=sr_1_3?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=Effective+python&qid=1609408832&sr=8-3)

    - 8章構成
    - 本章216ページ

- 第8章：本番運用準備

## 出力のデバッグには、repr文字列を使う

デバッグするときに、変数の型の状態を知りたいときはよくあると思います。
しかし、print関数に数値を渡しても文字列を渡しても、同じ出力になります。

```python
print(5)
print('5')
```

実行結果

```result
5
5
```

組み込み関数reprは、オブジェクトの印字可能な表現を返します。
reprを使うことにより、数値か文字列か判別できます。

```python
print(repr(5))
print(repr('5'))
```

実行結果

```result
5
'5'
```

オブジェクトインスタンスの中身を確認したいときがあると思います。

```python
class OpaqueClass(object):
    def __init__(self, x, y):
        self.x = x
        self.y = y

obj = OpaqueClass(1, 2)
print(obj)
# <__main__.OpaqueClass object at 0x000001D9C19EDF88>
```

これだと、オブジェクトのインスタンスフィールドについての情報が無いですね。
この問題を解決する方法は2つあります。
1つ目は、`__repr__`メソッドを定義して、オブジェクトを複製するPython式を含んだ文字列を返すことです。

```python
class BetterClass(object):
    def __init__(self, x, y):
        self.x = x
        self.y = y

    def __repr__(self):
        return 'BetterClass(%d, %d)' % (self.x, self.y)

obj = BetterClass(1, 2)
print(obj)
# BetterClass(1, 2)
```

2つ目は、`__dict__`属性に格納されているオブジェクトのインスタンス辞書にアクセスすることです。

```python
class OpaqueClass(object):
    def __init__(self, x, y):
        self.x = x
        self.y = y

obj = OpaqueClass(1, 2)
print(obj.__dict__)
# {'x': 1, 'y': 2}
```

## pdbで対話的にデバッグすることを考える

Pythonの組み込み対話的デバッガを試用することで、プログラムの状態を調べ、ローカル変数を印刷し、Pythonプログラムのステップ実行ができます。

```python
def sample_func(a, b, c):
    import pdb; pdb.set_trace()
    a *= 2
    b *= 3

sample_func(1, 2, 3)
```

この分が実行されると、プログラムは実行を一時停止します。
プログラムを開始した端末は、対話的Pythonシェルになります。

```code
-> a *= 2
(Pdb) a
```

(Pdb) プロンプトの後で、ローカル変数を入力すると、その値が出力されます。

```code
(Pdb) locals()
{'a': 1, 'b': 2, 'd': 3, 'pdb': <module 'pdb' from ...
```

デバッガには、実行されているプログラムを調べるのを容易にするコマンドや、再開するコマンドなど多数の機能があります。

- bt  現在の実行呼び出しスタックのトレースバックを印刷する
- up  スコープを呼び出しスタックから現在の関数の呼び出し元に移す
- down  スコープを関数呼び出しスタックの1段下に移す
- step  プログラムを次の行まで実行し、制御をでばっかに戻す
- next  プログラムを現在の関数の次の行まで実行し、制御をデバッガに戻す
- return  プログラムを現在の関数から復帰するまで実行し、制御をデバッガに戻す
- continue  プログラムをpdb.set_traceが再度呼ばれるまで実行し続ける
PHPでソケット通信をやってみた

# やってみた理由
WebSocketを仕事で使うらしく、
そもそもSocket通信触ったことがなかったのでPHPでやってみました。

# 実行環境
ターミナル1：`socketSample.php`を起動して`127.0.0.1:8080`をlistenしておく。
ターミナル2：`telnet`でターミナル1に接続。

# 全体の流れ

今回作成したサンプルの全体の流れです。
![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229696/0a546be8-c59c-eedd-0b7e-7a9944c79ad1.png)

# サンプルコード

簡素化のためにエラー処理は省いています。

```php:socketSample.php
<?php

$address = '127.0.0.1';
$port = 8000;

$sock = socket_create(AF_INET, SOCK_STREAM, SOL_TCP); //※1
socket_bind($sock, $address, $port); //※2
socket_listen($sock, 5); // ※3

$msgsock = socket_accept($sock); // ※5

do {
    $buf = socket_read($msgsock, 2048, PHP_NORMAL_READ); // ※6
    if (!$buf = trim($buf)) {
        continue;
    }
    $talkback = "PHP: You said '$buf'.\n";
    socket_write($msgsock, $talkback, strlen($talkback)); // ※7
    break;

} while (true);
socket_close($msgsock); // ※8

socket_close($sock); // ※9
?>
```

# おわりに
普段はアプリケーション層のHTTPしか触らないので、ソケット通信を学んだのは良い勉強になったと思います。

# 参考資料
- https://www.php.net/manual/ja/ref.sockets.php
- https://php.plus-server.net/sockets.examples.html
【初心者でもわかる】1枚の画像に複数のリンクを設置できるクリッカブルマップの設定方法

# どうも7noteです。クリッカブルマップ・イメージマップの設定方法

都道府県の地図だったり、1枚の画像の左右でリンク先を分けたい時などに使えるクリッカブルマップの設定方法について解説していきます。
px単位での設定なので画像のpxが測れる環境（画像編集ツール等）を用意しておくとスムーズに作成することができます。

## クリッカブルマップの設定方法

手順としては以下の流れです。

###①画像を用意

```index.html
<img src="hogehoge.jpg" usemap="#ImageMap" width="100%">
```

※**usemap属性を設定**しておきましょう。


###②リンク先を設置

```index.html
<img src="hogehoge.jpg" usemap="#ImageMap" width="100%">

/* 以下を追記 */
<map name="ImageMap">
  <area href="https://hoge.com" shape="rect" coords="1,1,160,320">
  <area href="https://hogehoge.com" shape="rect" coords="161,1,320,320">
</map>
```

**結果**

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/7f0a80de-a870-3c36-4408-ad2a0b68553a.gif)


## 解説

今回は画像を左右半分ずつ別のリンクを貼るような設定をしています。

まず画像にusemap属性の値を#付きで設定。そしてmapタグのnameに同じ名称を設定します。

`<img usemap="#ImageMap">` `<map name="ImageMap">` ←同じ名称を設定※imgタグのほうは#を付ける。


そしてmapタグの中に設置したいリンクの数を同じ分だけのareaタグを設置します。

`<area href="リンク先" shape="形状" coords="範囲">`


これで完了です。
形状には3種類あり、四角、多角形、丸の3つがあります。

・四角　：shape="rect"
・多角形：shape="polygon"
・丸　　：shape="circle"

範囲は始点と終点の座標を指定します。（多角形の場合は頂点の数分指定）


・四角　： coords="始点横(X),始点縦(Y),終点横(X),終点縦(Y)"
・多角形：coords="座標1横(X),座標1縦(Y),座標2横(X),座標2縦(Y)・・・・・"
・丸　　：coords="中心点横(X),中心点縦(Y),周の横(X),周の縦(Y)"


### 注意

座標はpxでの指定しかできないので、レスポンシブ対応するには2種類PC用とスマホ用を用意する必要があるかもしれません。使用時には使用場所や大きさに注意してください！

## まとめ

とても便利なクリッカブルマップですが、pxでの指定しか対応していないので使いどころが限られてしまうのが難点。よく使われるのは日本地図なんかにざっくりエリアごとや都道府県ごとのクリッカブルマップを設定していたりするのにもみられます。

イメージマップジェネレータ―などもあるので作成が難しい場合はツールを使ってスムーズな開発を行ないましょう。

・イメージマップジェネレータ―
http://labs.d-s-b.jp/ImagemapGenerator/

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
ターミナル プロセスが起動に失敗しました: シェル実行可能ファイル "/usr/local/bin/zsh" へのパスが存在しません。と表示された時の対処法

VScodeでRailsの開発環境を整えて、後日VScodeのターミナルを立ち上げようとしたら

ターミナル プロセスが起動に失敗しました: シェル実行可能ファイル "/usr/local/bin/zsh" へのパスが存在しません。

と書かれてポップアップが表示されました。ターミナルを動かせないのでどうすればいいのかも分からず、かなり困りましたが、最終的になんとかターミナルの起動には成功しました

僕はプログラミング独学を始めてまだ、2ヶ月ちょっとなので、初心者目線でこのエラー？を解決した過程を書いていこうと思います。

因みに解決するまでに以下の記事が参考になりました。私が初心者すぎてほんの少し分からないことがあったので、私なりの過程を書いています。
https://qiita.com/hide27k/items/d0831f0e4d75873fb39b

#zshからbashに切り替える

ターミナルを開けないとどうしようもないのでzshからbashに切り替えます。

1. VScodeの設定を開きます
1. 設定の検索フォームで　terminal.integrated.shell.osx　と入力し、ヒットした項目の settings.json を開きます。
1. ```"terminal.integrated.shell.osx": "/usr/local/bin/zsh"```
を
```"terminal.integrated.shell.osx": "/bin/bash"```
に変更します。
1. 改めてターミナルを開くとbashが起動し、以下のように表示されます```The default interactive shell is now zsh.To update your account to use zsh, please run `chsh -s /bin/zsh`.For more details, please visit https://support.apple.com/kb/HT208050.aokishoutarounoMacBook-Pro:workspace cha-han$ ```
1. chsh -s /bin/zshと打ち込みEnter
2. パスワードを入力してEnter
3. ターミナルが動かせるようになる
4. zshと入力してEnter
5. シェルがzshに切り替わる

#未解決事項

+ /usr/local/bin/zshのファイルが消失していたましたが、何故消えてしまったのかが不明。
+ パソコンを立ち上げるたびに上記の長い文章が表示される。

これらの解決方法が見つかったらまた追記します。

プログラミングの独学を初めて約2ヶ月で初めての投稿です。至らない部分もあると思われますが、参考になれば幸いです。
Rubyのchompメソッド

#### chompメソッド

文字の末尾から改行コードを取り除くメソッド
（改行コード："\r", "\r\n", "\n" ）

例えば、getsメソッドを使用して入力した文字列は末尾に改行が存在しているため、

```ruby:ruby.rb
str = gets
#ターミナルでこんにちはと入力した場合
puts "#{str}〇〇さん"

# => こんにちは
# => 〇〇さん、のように出力される
```

chompメソッドを使用することにより改行を取り除くことができます。

```ruby:ruby.rb
str = gets.chomp
#ターミナルでこんにちはと入力した場合
puts "#{str}〇〇さん"

# => こんにちは〇〇さん、のように出力される
```

備忘録も兼ねてメソッドを忘れないようにしていきます！
エディタ戦争はEmacsの勝利（Vimが負けたとは言ってない）

# はじめに

あなたがこの記事を読んでいるとき、私はこの世にいないでしょう。  
それほど危険なことを私はしようとしています。  
何をしようとしているかって？

それはーーー

# エディタ戦争、決着

何十年も続いてきたこの戦争を、私はこの手で終わらせることにしました。  
Vim と Emacs。  
果たしてどちらが優れているのでしょう。

**私は、Emacs の勝利とします。**

わっ、ちょっと、やめて！石投げないで Vimmer の人！刃物向けないで！◯ さないでー

...

気を取り直して、  
なぜ Emacs の勝利か。  
それは、双方の目指しているものに最も近いからです。

## Emacs はより完成形に近い

Vim と Emacs が目指しているものってなんでしょう。

それは、**OS です。**  
エディタの中から、ターミナルを開き、ブラウザを開き、メールを読み、ツイートすること、それこそがエディタの完成形です。

現状、それに近いのは、Vim よりも Emacs です。  
Emacs には、Emacs Lisp で書かれたシェルとブラウザが標準搭載されていることを知っていますか？  
また、Vim をメーラやゲーム機として使う人より、Emacs のそれのほうが圧倒的に多いはずです。

## 有名プログラマはみんな Emacser

Emacs の勝利を裏付けるかのようなデータもあります。  
[こちらのサイト](http://wenshanren.org/?p=418)では、有名プログラマの中で、Emacs を使用している人をあげています。

Linux、Git、Python、Ruby、Facebook など、世界中で使われているサービスは、Emacs という名の OS から生み出されました。  
Ruby の作者であるまつもとゆきひろさんは、Emacs をメーラやデバッガとして使っていることを Quora などで明かしていますし、他の方もきっとそういった使い方をしているのだと思います。

## じゃあ Vim が負けたということなのか

んなわけないでしょう！  
Vim はどこでも使えるし軽いし設定なくてもまぁまぁ使えるし何よりあのキーバインドがイイ！

Emacs の名言！

> Emacs 「Vim...てめーの敗因は...たったひとつだぜ...たった一つの単純な答えだ...『てめーは OS じゃねー』」

~~急なジョジョネタ~~

逆に言えば OS じゃない事以外は完璧なエディタなんです！

じゃあどうするか。

簡単な話です。

**Emacs で Vim しましょう。**

その名も Spacemacs。

方法は 2 ステップ。

1. Emacs をインストールする
2. Spacemacs をインストールする

これだけで、Emacs という OS のなかで Vim することができます。  
Vim するだけではなく、Emacs することもできます。  
さらには、Vim と Emacs を競合させることもできます（INSERT モードで Emacs できる Vim、という感じです。）

また、Spacemacs は、VSCode 並の高機能エディタです。  
使って失望することはほとんどないでしょう。

インストールのしかたはググってください

# 最後に

勘違いしないでほしいのですが、私は Vim が嫌いではありません。  
というか、この文章は Vim で書いてます。  
私は Vim が大好きです。  
それでも、Vim に完璧に満足しているというわけでもありません。  
なので、Spacemacs で Vim の弱点を補っています。  
皆さんの、より良い Vimmer ライフを願って、あえて Vim を否定するかのような記事を書きました。  
しかし、これは、ある意味での、私の Vim への愛なのです。  
皆さんの Vimmer ライフが、これからも良いものでありますように。
ADX2ロボット機能で大量波形から任意の波形をコピーする

#はじめに
ゲームで利用しているボイスとかすごい数があって管理が結構大変なのですが、

例えば一部ですが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/1f010db4-47c8-bdba-f1aa-01e4f6b8935a.png)

こんな感じで、プログラムから扱いやすいように数字だけの波形（マテリアル）がずらっと入っていたりします。

#ケース
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/a2aa5602-4c0c-ab99-ba3e-5288a014d57e.png)

これは、とあるやりとりででてきたのですが、
この1万弱のボイスの中から上のファイルを抽出する・・・
ちょっとやばい。（まぁ、アクセスしやすいようにある程度フォルダ分けたりはしているけど）

こんな時に[ADX2ロボット](https://game.criware.jp/manual/adx2_tool/latest/criatom_tools_atomcraft_api.html)機能が便利。

#UI

これは、ADX2上で動かす用途なので、
右側に改行区切りのファイル名（マテリアル名）拡張子無しを入力し、
出力フォルダを指定します。（フォルダはあらかじめ作っておく）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/3e845689-751d-0694-1e11-03f1289e59c7.png)


#スクリプト

検索して
マテリアルのソースパスからファイルをコピーする
という処理を数だけまわしています。

ファイルコピーにはshutilを使いました。

``` CopyWaveFile.py
# --Description:[tatmos]指定したマテリアルの波形を別フォルダへコピーする
import sys
import cri.atomcraft.project
import cri.atomcraft.project as acproject
import cri.atomcraft.debug as acdebug
import shutil

# --BeginUserVariable
"""
SEARCH_NAME:
  type:string
  comment:改行区切りのファイル名（拡張子なし）
OUTPUT_PATH:
  type:string
  comment:出力先のフォルダ名
"""
SEARCH_NAME = '''100035170
100035180
120580380
130260070
140590020
140590030
150170130
150190300
160295130
160320000
160320035
330080020
330080030'''
OUTPUT_PATH = "C:/MyDearest/github/ADX2Robot/Output"
# --EndUserVariable

# 選択しているマテリアルルートフォルダを得る
searchRoot = acproject.get_selected_objects("MaterialSubFolder")["data"]
if not searchRoot :
    acdebug.warning("検索するマテリアルルートフォルダを選択してください。")
    sys.exit()

# オブジェクトパス表示
acdebug.log("Target Path:\"{0}\"".format(acproject.get_object_path(searchRoot[0])["data"] ))

# マテリアル一覧を得る
Materials = acproject.find_objects(searchRoot[0], "Material")["data"]

print("Material Num :{0}".format(len(Materials)))

# 文字列を改行で分割
searchNameList = SEARCH_NAME.splitlines()
print(searchNameList)

# マテリアルを探す
for material in Materials:
    material_name = acproject.get_value(material, "Name")["data"]
    #探す
    for searchName in searchNameList:
        #見つけたら
        if material_name.replace('.wav', '') == searchName:
            srcPath = acproject.get_value(material, "SrcFileAbsolutePath")["data"]
            acdebug.log("Target Path:\"{0}\"".format(srcPath))
            #コピー
            dstPath = OUTPUT_PATH + "/" +material_name
            shutil.copyfile(srcPath, dstPath)

``` 

#あとがき
このスクリプトを書くのに45分くらいかかっているから、　
16個のファイルをフォルダを探って探すくらいなら手でやった方が速いとは思うけど（1個1分かけても16分で終わる）。　
ちょくちょくこういうのあると思うので。
あと、手でやると番号読み違いとかコピペミスとかありそうだとかあるけど、そういうのも無問題。

また来ても、次回は瞬間で返せるはず
これで、何百とオーダーが来ても一瞬です。すばらしい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/b291a821-fba7-6bb7-301e-52e21f18cc49.png)

テ、テスト・・・


あと似たような機能を作るときに、一度こういうの作っておけば、応用がきく。（ファイルの存在チェックとか）

#注意点
- パス区切り文字に注意　\バックスラッシュだとスクリプトがおかしくなります。/に置き換えています。
- 改行付きの文字定義も ptyhonだと扱いがちょっと工夫が必要で、初回は、ダブルクォーテーションにして、ユーザー定義の適用ボタンを押してから、‘‘‘に置き換えています。　（これくらいならユーザー定義使わずソースを書き換えてしまうのが速いかもですが）
FormDataに一次元配列をappendする

#目的
FormDataを使ってAPIに配列をpostしたい場合にどのように送ればいいのか悩んだため、アウトプットする。

#完成
```component.vue
<script>
data () {
    return {
        tag:[]
  }
}
let formData = new FormData();
if (this.tag.length > 0) {
  this.tag.forEach((text, index) => {
    formData.append('tag[' + index + ']', text);
  })
} else {
  formData.append('tag', []);
  }
</script>
```

##解説
1.`tag[]`に１つ以上値が存在するか確認する
　1-1.存在する場合、`tag[]`を`forEach`で一つずつappendする！
　1−2.存在しない場合、空の配列をappend

JavaScriptは`foreach`ではなく`forEach`らしいので注意が必要
【Git】warning: adding embedded git repositoryの警告

#プログラミング勉強日記
2021年2月4日
Gitでaddしようとしたときに警告が出たのでこの対処法を備忘録としてまとめる。


#警告内容
　ディレクトリをコピペでもってきて、それをaddしようとしたときに以下の警告が出た。持ってきたディレクトリに別のGitのレポジトリがあるので警告がでた。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/319665f4-0bac-3a1f-31bd-adced4815a5d.png)

```
$ git add .
warning: adding embedded git repository: public/room
hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint:
hint:   git submodule add <url> public/room
hint:
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint:
hint:   git rm --cached public/room
hint:
hint: See "git help submodule" for more information.
```


#解決方法
　原因のディレクトリの中で`.git`ファイルを消して、元のディレクトリに戻って再度addすると解決する。<b>`-rf`は何のメッセージも表示されずに問答無用で削除し、元に戻せない</b>ので注意する。

```
// 原因のディレクトリの中で
$ rm -rf .git
```
[WordPress]記事が存在しない月別アーカイブを404にしない

WordPressでは記事が1件も無い月のアーカイブは404となるが、
date.phpやarchive.phpを用いて記事が無い旨を表示したい場合がある。

そのような場合はfunctions.phpに概ね以下のようなコードを書けば良い。

```php:functions.php
<?php
function enabled_empty_date_archive_pre_handle_404($value) {
	if($value === false) {
		// 指定された年月が未来でなければ404としない
		if((is_year() || is_month()) && !is_paged()) {
			$year = get_query_var('year', 0);
			$month = get_query_var('monthnum', 0);

			$current_year = intval(date('Y'));
			if($year !== 0 && $year <= $current_year) {
				if($month !== 0) {
					$current_month = intval(date('n'));
					if($month <= $current_month || $year < $current_year) {
						$value = true;
					}
				} else {
					$value = true;
				}
			}
		}
	}
	return $value;
}
add_filter('pre_handle_404', 'enabled_empty_date_archive_pre_handle_404');
```

なおpre_handle_404は、false以外を返すことでページ遷移時の404判定を短絡させるフィルタである。
[memo]レスポンシブデザイン

レスポンシブデザインの適用方法。

###画面サイズに応じた変更
<b>▼Media Queries</b>
メディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法。

メディアクエリは、`@media (条件) { .... }`という様に書きます。
指定された条件が当てはまるときにのみ{ }内のCSSが適用されます。
セミコロン；は付けません。

(条件)
max-width(最大幅)：設定数値`以下`の時に{}内のCSS適用
min-width(最小幅)：設定数値`以上`の時に{}内のCSS適用
max-width: ◯◯pxと指定すると、画面幅が◯◯px以下の時に{}内のCSSを適用できます。
 
```css:css
h1 {
 color: red;
}

/* １０００px以下の画面の時に適用 */
@media(max-width:1000px){
  h1 {
 color: green;
 }
}
```

####レイアウト崩れの修正

paddingで幅を加えた場合に、左右のpaddingを追加すると要素の幅の合計が100%を超えてしまい、レイアウトが崩れる場合がある。このようなレイアウト崩れは、`box-sizing: border-box;`を用いることで防ぐことができます。`box-sizing: border-box;`を適用したセレクタは要素の幅(width)の合計にpaddingとborderが含まれるようになります。（※ただし、marginはborder-boxでの合計値に含まれない）。

box-sizing: border-box;を指定するときは、*(アスタリスク)に対して指定することが推奨されています。*はすべての要素に対してCSSを適用したい場合に用います。
border-boxをすべての要素に対して適用することで、レイアウトを管理しやすくなります。

```css:css
* {
 box-sizing: border-box;
/*HTML全体に適用*/
}
```


####Viewポイント
Viewポイントを適用するためにはhtmlの\<head>内に次の記述が必要

>\<!-- viewportを読み込むための<meta>タグ -->
>\<meta name="viewport" content="width=device-width, initial-scale=1.0">

####背景色が途中で切れてしまう（高さ設定の問題）
親要素の高さは子要素を包む高さとなります。しかし、子要素が全てfloatの時、親要素の高さは0となってしまうという性質があります。背景色が途中で切れてしまうという問題がある場合、要素の高さが固定されていることを疑ってください。高さがコンテンツの中身によって変わるように、変更する方法は次の通りです。

floatは「浮いている」という意味で、親要素から見るとfloatの子要素は存在しないように見えます。子要素が全てfloatでも、親要素が高さを持つように設定を変更する場合、floatはclear: left;で「浮いている」状態を解除できます。具体的には`clear: left;`を適用するためだけの空のタグを用意します。

```html:html
<!--floatをするための空タグ-->
<div class="clear"></div>
```

```css:css
/* clearクラスにfloatを解除するためのCSS */
.clear {
  clear: left;
}
```

####画面サイズが大きい場合
基本の要素のwidthが100%の場合、画面幅が2000pxなどとても大きい時も画面いっぱいに広がってしまいます。
max-width: ◯◯px;と指定すると、画面幅を拡大しても、要素の幅の上限が◯◯pxとなります。

```css:css
.count {
  /* max-widthを1000pxに指定 */
  max-width: 1000px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}
```

####スマートフォンのヘッダーレイアウト
画面幅が670px以下（スマートフォンサイズ）の時にのみ適用表示されるようにします。
要素を非表示にするにはdisplay: none;を用います。
非表示にした要素を表示させる時は、display: block;を用います。

```html:html
<!-- スマートフォン用のメニューアイコン -->
<span class="fa fa-bars menu-icon"></span>
```
```css:メニューアイコン用のcss
.menu-icon {
  color: white;
  float: right;
  font-size: 25px;
  padding: 21px 0;
  /* 基本は表示されないようdisplayをnoneに指定 */
  display: none;
}
```
```css:表示非表示の切替＠スマホ向けレイアウト適用する場合
 /* スマホの時は非表示にしたいクラスのdisplayをnoneに指定してください */
  .header-right {
    display: none;
  }
  
  /* スマホの時に表示にしたいクラスのdisplayをblockに指定してください  */
  .menu-icon {
    display: block;
  }
```
pybind11 モジュールに mypy 用型アノテーションをつけるメモ

pybind11 で作った native module にも mypy 型アノテーション(stub 情報)つけたい.
自前で書いてもいいけどめんどいよね...

https://github.com/sizmailov/pybind11-stubgen

こちらで自動でいけました!

## つかう

pybind11 を使ってビルドした native module `mymodule.cpython-38-x86_64-linux-gnu.so` などがあるとします.

```
PYTHONPATH=. pybind11-stubgen mymodule --no-setup-py --root-module-suffix="" --ignore-invalid=all --output-dir="./generated"
```

という感じでいけます!

カレントディレクトリの .so は検索してくれない(pybind11-stubgen が内部で呼んでいる `importlib.import_module`)ので, .so を直接読んで stub つくりたいときは `PYTHONPATH` 環境設定あたりでパスを通しておきましょう!
(そうしないと ModuleNotFoundError がでる)
Xserverへgitの最新版をインストールする

Xserverにgitがインストールされているが、バージョンが古いので最新版のインストールを試みる。

```bash
$ git --version
git version 1.8.3.1 # 最新版(2.30.0)にupdateする
```

#前提
- XserverにSSH接続できること
- 作業ディレクトリ：$HOME/tmp　（任意の場所）
- インストール先ディレクトリ：$HOME/local　（任意の場所）
- https://www.gnu.org/software/gettext/ でgettextの最新版を確認（執筆当時 gettext-0.21）
- https://git-scm.com/download/linux/ でgitの最新版を確認（執筆当時 git-2.30.0）

#手順
既にインストール方法があちこちに記載されていますが、普通にgitだけインストールしようとすると「msgfmtが無い」と怒られる場合があります。
他の記事では、makeに"-i"オプションを付けてエラーを無視するように勧めいていますが、本記事ではmsgfmtのインストールも併せて実施しようと思います。

### 1. msgfmtインストール
```bash
$ cd tmp  # 作業ディレクトリへ移動
$ wget https://ftp.gnu.org/gnu/gettext/gettext-0.21.tar.gz
$ tar zxf gettext-0.21.tar.gz
$ rm gettext-0.21.tar.gz
$ cd gettext-0.21
$ ./configure --prefix=$HOME/local
$ make
$ make install
$ ~/local/bin/msgfmt --version    # msgfmt のインスト―確認（インストールしたバージョン情報が表示されればOK）
$ cd  ..
$ rm -rf gettext-0.21  # 不要になったので削除
$ cd                   # ホームディレクトリへ戻る
```
ここまででgitインストールに必要となるmsgfmtのインストールが完了しました。
但し、パスを通さないと使い勝手が悪いのでその設定を行います。

### 2. パス設定
.bashrc　に以下の行を追加する

```bash

export PATH=$HOME/local/bin:$PATH
```

終わったら、設定の適用と確認

```bash
$ source .bashrc
$ which msgfmt       # パスを通したのでインストール先の確認
~/local/bin/msgfmt   # インストール先が表示されればOK
```

### 3. gitインストール
```bash
$ cd tmp  # 作業ディレクトリへ移動
$ wget https://www.kernel.org/pub/software/scm/git/git-2.30.0.tar.gz
$ tar zxf git-2.30.0.tar.gz
$ rm git-2.30.0.tar.gz
$ cd git-2.30.0
$ ./configure --prefix=$HOME/local
$ make all
$ make install
$ ~/local/bin/git --version   # git のインスト―確認（インストールしたバージョン情報が表示されればOK）
$ cd  ..
$ rm -rf git-2.30.0  # 不要になったので削除
$ cd                 # ホームディレクトリへ戻る
$ which git          # 2.でパスは通してあるのでインストール先の確認
~/local/bin/git      # インストール先が表示されればOK
```

以上でXserverに最新版のGITをインストールできました。

# 確認
gitバージョンを確認し、目的のバージョンをインストールできたことを確認

```bash
git --version
git version 2.30.0
```

#参考
以下の記事を参考にさせて頂きました。
ありがとうございます。

【msgfmtインストール】
https://noknow.info/it/os/install_gettext_from_source?lang=ja

【GITインストール】
http://itexplorer.hateblo.jp/entry/20170624-use-latest-git-on-xserver
ドットインストール HTML編 CSS編

１．HTML編

Macの選択した行の複製はshift+option+下矢印キー

command+/　でコメントon/off

選択した行の移動はoption+矢印キー

＜ｉｍｇ＞タグにalt属性で画像の説明をすると丁寧

＜ａ＞タグでリンクを別タブで開いてほしいときはtarget属性で_blank

MDNというサイトでHTML,CSS,JavaScriptの親タグにしていいものなどを確認（言語の仕様を知りたいとき）


２．CSS編

chromeのデベロッパーツールのショートカットキーはoption+command+i

CSSでもcommand+/　でコメントon/off

Flexboxで縦方向に要素を中央揃えにするプロパティ
Flexboxを指定したcontainerに対して　align-items: center;

クラス名　＞　ｈ１　など、不等号記号をつけると直下のｈ１だけに対してCSSを適用
[Swift] 現在開かれているキーボードを取得する

ユーザが今どのキーボードを使っているか判断したい場合、次のように行います。

```Swift
let currentKeyboardName = NSArray(array: UITextInputMode.activeInputModes)
                              .filtered(using: NSPredicate(format: "isDisplayed = YES"))
                              .first
                              .flatMap{($0 as? UITextInputMode)?.value(forKey: "displayName") as? String}
print(currentKeyboardName)  //例：Optional("日本語ローマ字")
```
以上を`UIApplication.keyboardDidShowNotification`などのタイミングで行うと開かれているキーボードを取得することができます。
キーボードアプリでユーザがキーボードを有効化したかどうかの判定に使えるほか、相性の悪い特定のサードパーティ製キーボードを禁止するなどの処理が必要な場合に使えるかもしれません。
なお、`"displayName"`ではなく`"identifier"`を用いるとキーボードの`"identifier"`を取得することができます。こちらの方がより正確に特定が可能です。

# 参考
https://stackoverflow.com/questions/26153336/how-do-i-find-out-the-current-keyboard-used-on-ios8
Python socket で connection が張れるまで待つメモ

RPC なり TCP/IP のスクリプトで, 相手方がプロセス再起動するなどして一時的に通信ができないときにいくらか待ちたい.

何もしないと connection refused エラーが Python スクリプトが落ちてしまう.

https://stackoverflow.com/questions/14425401/catch-socket-error-errno-111-connection-refused-exception

ありがとうございます.

```py
while True:
    try:
        yarr.call(('localhost', 8000), 'proc_numpy', a)

        break
    except socket_error as serr:
        if serr.errno != errno.ECONNREFUSED:
            # Not the error we are looking for, re-raise
            raise serr

        print("sleep")
        time.sleep(0.1)
```

のような感じでいけました!

## timeout 機能をつける

timeout-decoratorを利用して自作関数にタイムアウトを設定する
https://qiita.com/komorin0521/items/0ca7eacb7ae9424fc6c4

ありがとうございます.
テストコードでのMysql2::Error: MySQL client is not connectedの対処法

皆さんはテストコードは得意ですか？
正直、私はあまり得意とは言えないです。
さて、今回はテストコード中に起きたエラー（エラーというより事故？）についてやっていきたいと思います

# 1.今回起こった事象

Rspecを使いテストコードの実行を行なっている最中に起こりました。

[![Image from Gyazo](https://i.gyazo.com/4cf56461f45cdd4040e7de6afcc522ba.png)](https://gyazo.com/4cf56461f45cdd4040e7de6afcc522ba)

とても長いエラー文が出てきました。（下の方をバッサリとカットしてますが、めちゃくちゃ長かったです）
上まで遡り、確認したエラーは
`Mysql2::Error: MySQL client is not connected`
という内容でした。

# 2.仮説
- まず考えたこと

１：なんでこんなところで引っかかるんだ？

エラーが出ている場所から推測すると、エラーが出ているその前の部分からも出てないとおかしいはず。
postal_codeが空だと購入できないのに、他の場所はみんなエラーになっている、という部分からそう推測できました。

２：Mysql2::Error: MySQL client is not connectedの意味

そのまま英訳すると`MySQLのクライアントが接続されていない`という意味
すなわち、何かが原因で接続が切れてしまったなどが考えられます。

これはRspec側のエラーの可能性があるかもしれない。
と思い調べ始めました。

# 3.原因
max_allowed_packetの値が足りないとこのエラーが出るようです。

max_allowed_packetとは、
MySQLのクライアントとサーバー間の通信のパケットサイズの最大値の設定で、
1回のリクエストでここの大きさより大きいリクエストは送り込無ことができない。
というもののようです。

# 4.対処法
１：max_allowed_packetの最大値を変更する
これにより解決することが多いようです。

ただ、実際どうなのかはわかりませんが、PCに負荷がかかりそうで怖かったので違う方法を探しました。

２：sleepを記述し、処理の間に休憩を挟んであげる

`sleep 指定した秒数`と事前に記述しておくことで、
インスタンス変数を生成するたびに`指定した秒数`、処理を停止するというもの。

この方法を試してみて、一回のテストが長引くようならmax_allowed_packetの最大値をいじることを決めて実践。

# 5.実践

まず試しに0.1秒で実験すると・・・

[![Image from Gyazo](https://i.gyazo.com/6f3c39c2e310b7ca28402dd609593a46.png)](https://gyazo.com/6f3c39c2e310b7ca28402dd609593a46)


[![Image from Gyazo](https://i.gyazo.com/29e13ced5c5d56c9494e61b47697acac.png)](https://gyazo.com/29e13ced5c5d56c9494e61b47697acac)

通った！！！！
どの程度まで縮められるかが気になったので、o.o1秒で試してみると・・・。

[![Image from Gyazo](https://i.gyazo.com/f0a0955b47a58e86d4c3b288028387c4.png)](https://gyazo.com/f0a0955b47a58e86d4c3b288028387c4)

[![Image from Gyazo](https://i.gyazo.com/5919acbabb4da29477f4ae352f481ad3.png)](https://gyazo.com/5919acbabb4da29477f4ae352f481ad3)

駄目でした。
しかも前よりひどくなっている始末・・・。
間をとって0.05秒で試してみる。

[![Image from Gyazo](https://i.gyazo.com/57f61a3cc810688141d9eecc968c1ad1.png)](https://gyazo.com/57f61a3cc810688141d9eecc968c1ad1)

[![Image from Gyazo](https://i.gyazo.com/f4c95cedd594b557a9bae9dba04a0bc5.png)](https://gyazo.com/f4c95cedd594b557a9bae9dba04a0bc5)

通りました！
ただ、今回は少ないテスト数でしたが、この先テストする数が増えることを見越して0.1秒を採用しました。

# 6.感想

sleepを使うと一回の処理に少し時間がかかるものの、そこまで気にするレベルではない感じがしました。
Railsでバリデーションでのエラーメッセージを分解してみる

2回目の投稿となります
自分の見直しとして、もっと上手に使っていきたいですね!

##これ is 何
保存されなかった時にエラーメッセージを表示させるやり方、というものは調べれば割とすぐ出てきますが、その内容に応じて動作を変化させるときに用いました。

##開発環境
`ruby 2.6.3`
`Rails 5.2.4.4`

##作業準備1-MVC他作成
```console:コンソール
$ rails new sample_app
$ cd sample_app
$ rails g scaffold post title:string body:text
$ rails db:migrate
```
このような感じで、ササッと`title`と`body`カラムを持った`posts`テーブルが作れました。
![スクリーンショット 2021-02-04 175316.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1072562/9865cd45-8cac-3061-4ba1-a6ce538f04e7.jpeg)

##作業準備2-バリデーションの設定

  - `title`は空白はダメで、5文字以内
  - `body`は空白はダメ
 
というバリデーションを設定してみます。

```ruby:post.rb
class Post < ApplicationRecord
  validates :title, presence: true, length: { maximum: 5 }
  validates :body, presence: true
end
```

これで
![スクリーンショット 2021-02-04 180600.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1072562/2715f5fa-f198-bfb7-95d6-43a7125711dc.jpeg)
上記のようになり、条件を満たさない投稿は保存されません。
ところで、エラーメッセージを表示させるビューは

```erb
<% @post.errors.full_messages.each do |message| %>
  <li><%= message %></li>
<% end %>
```
のようになりますが、これを分解するのが、今回の本題となります。

##エラーメッセージの中身
gem `pry-byebyg`を使って、エラーメッセージを見てみます。(インストール方法等は割愛)

```ruby:posts_controller.rb
  
  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to post_path(@post.id)
    else
      binding.pry #この位置
      render :new
    end
  end
```
```
[1] pry(#<PostsController>)> @post.errors.messages
=> {:title=>["is too long (maximum is 5 characters)"], :body=>["can't be blank"]}
[2] pry(#<PostsController>)> @post.errors.full_messages
=> ["Title is too long (maximum is 5 characters)", "Body can't be blank"]
```
このような結果になりました。先程のビューでは、[2]の結果の配列をeachで出力している、ということが分かりました。これを元に、色々試してみます。

###[1]でエラーメッセージを変更してみる

```ruby:posts_controller.rb
  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to post_path(@post.id)
    else
      @post.errors.messages[:body] = ["は空欄には出来ません。"] #追加
      render :new
    end
  end
```
![スクリーンショット 2021-02-04 184718.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1072562/08f60c57-5ff6-ec0a-9c58-e0a567c401cf.jpeg)
こんな風に変えてみたり…

###[2]でエラーメッセージにより遷移先を変えてみる
```ruby:posts_controller.rb
  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to post_path(@post.id)
    else
      if @post.errors.full_messages.any? { |t| "Title can't be blank".include?(t) }
        redirect_to titleblank_path
      elsif @post.errors.full_messages.any? { |t| "Title is too long (maximum is 5 characters)".include?(t) }
        redirect_to titletoolong_path
      else
        redirect_to bodyblank_path
      end
    end
  end
```
このように設定することで…(ルーティングは別途設定しています)
![NewPost.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1072562/ecb7da7d-b420-3ae3-31ea-bce704d502fe.gif)

エラーメッセージに応じて、遷移先を変えることも出来ます。
## おわりに
色々残して、自分が見直す機会になればいいなと思います。
SharePointリストをPower BIで使うとき、「接続できません」となった場合の対処方法

　データソースへの接続方法の選択をうっかり間違い、選択しなおす方法を見つけるのに時間がかかったので、覚書です。

# 正しい接続方法
　Power BIでSharePointリストを使用するときは、以下のようにSharePointリストのソースを選択して接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/33cdd3d2-a64b-aa6a-2ded-0ba9393b7763.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/c456324e-66b5-19c5-08e2-fa4bc88011bd.png)


　次に以下のようにURLを入力する画面になりますので、SharePointサイトのURLを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/69635a2d-c0a0-00e1-8459-9ce72ec2b66f.png)
　ここでSharePointのコンテンツにアクセスる方法の選択が出てきますので、間違えずに**「Microsoftアカウント」**を選び、**サインイン**をクリックします。（間違えた場合は、後述）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/81f9c59b-369d-81f4-3cb2-3a11d1c4b014.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/c24dc555-64cd-e929-1662-47109646ea34.png)
　アカウントを選択して、パスワードを入力した後、接続を行うと、以下のようにナビゲーターが開きますので、使用したいSharePointリストの名前を選択してOKを押せば使用できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/f6efe285-ea58-9c0a-f89a-33700e0ce068.png)


# 「接続できません」と表示されてしまった
　接続の際、Microsoftアカウントを選択せずに**「匿名」**で接続しようとした場合、以下のように、**「接続しようとしているときにエラーが発生しました。詳細：”リソースへのアクセスが禁止されています。”」**と表示され接続できなくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/83b2ab05-955f-0d83-20d9-967fe4514f17.png)
　この表示が出ると、何度やっても接続方法を選択する画面は表示されません。接続方法を選択しなおすには、**「ファイル」**から**「オプションの設定」**を開き、**「データソース設定」**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/72acc0b9-a741-ba2a-1de3-5e0f5b5741e8.png)
　データソース設定から、該当のソースを選択し、**「アクセス許可の編集」**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/da2bbe61-6646-2f92-c152-26e1f6a3d3cc.png)
　資格情報の型が匿名になっているので、**「編集」**を押すと、接続方法の選択が出てきますので、**「Microsoftアカウント」**を選択し、サインインを行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/85018a6e-4880-9d72-f24e-8ed8f3b15dfe.png)
　アカウントを選択し、パスワードを入力すると、以下のように**「現在、サインインしています」**という表記に変わりますので、そのまま「保存」を押し、アクセス許可の編集も「OK」で閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/10d9b6f4-8d8d-0351-d7f1-f3dabc642333.png)

　これで、改めて、データの取得を行えば、ナビゲータが表示され、SharePointリストのデータを選択することができるようになります。
【３０代未経験  独学でWeb系自社開発企業に転職した私がやったこと + ポートフォリオ公開 + 反省点】

### 【３０代未経験  独学でWeb系自社開発企業に転職した私がやったこと + ポートフォリオ公開 + 反省点】

#### 経歴
あまり興味はないと思いますが、簡単に経歴だけご紹介させてください。

私は元々新卒からずっと商社やメーカーの営業職をやってきました。

プログラミングとの出会いは前職で始めたエクセルVBAでした。
業務効率化が好きで、VBAで社内システムとかツールを隙間時間に作って遊んでいましたね。

そんなことをしてるうちに社内の人から「エクセル職人」として頼られるようになり、だんだん本業よりもプログラミングの方にやりがいを感じるようになっていきました（笑）
（VBAからプログラミングを好きになるパターンって結構あるあるかなと思ってます）

その時まで営業を５年程やってきましたが、営業という仕事に興味を強く持つことはできませんでした。
一方でプログラミングはやっていて本当に楽しかったので、これを機にエンジニアを目指そうと思い、スパッと会社を辞めてそれからWebプログラミングの勉強を始めました。



#### 学習方法
・Progate（Ruby, Railsコースそれぞれ２周くらい）
　⬇
・Railsチュートリアル（１周） 
　⬇
・noteに売っていた有料のRailsのチュートリアル教材１つ
　⬇
・ホームページ制作１つ（知人から依頼されて）
　⬇
・ポートフォリオ作成

#### 期間
退職（２０２０年２月）
プログラミング基礎学習（１ヶ月）
ホームページ制作受託（２週間）
ポートフォリオサイト作り（５ヶ月）

#### 転職活動方法
wantedlyだけ使いました。
応募：５０社くらい（自社開発、受託開発メイン）
面談：１５社くらい
内定：２社（自社開発スタートアップ、自社＋受託開発のスタートアップ）

３０代未経験 + コロナによる採用控え　ということもあり、全然返信もらえないんじゃないかと思ってたのですが、
予想以上に返信をいただけてビックリしました。
ポートフォリオをしっかり作成していた点が評価されていたので、ポートフォリオはホント大事です。

あとはプログラミングを始めたきっかけが前職でのVBAという点も結構評価されました。
過去にプログラミングに触れていた経験は「この人はホントにプログラミングが好きでジョブチェンジしたんだな」と思ってもらうには良い理由だと思います。


#### ポートフォリオ　〜〜世界初！？　動画にふせんを貼れる新感覚SNS！〜〜
〜〜　PlayBack（プレイバック）　動画にふせんを貼れる新感覚SNS🌟　〜〜
~~https://www.play-bck.com~~ *閉鎖済み

##### 開発したきっかけ
もともと色んな知識を動画で学ぶのが好きなのですが、「これは記録しておきたい！」と思ったシーン
をピンポイントで記録できるツールが（たぶん）なかったので、自分で作ろうと思いました。

Chrome拡張でYoutubeを見ながらポチポチ保存できるようにすればもっと使い勝手がよくなるかな〜と思いました。
モバイルアプリ版もいつか作りたいです。


#### 使用技術
+ サーバーサイドFW：Ruby on rails
+ フロントエンド：HTML, CSS, Javascript ( jQuery )
+ インフラ：Heroku
+ リポジトリ管理：GitHub

#### 反省点

##### ポートフォリオ作りに時間掛けすぎた
時間がかかった理由は、
・コンセプトがあいまいで、作りながら方針がコロコロ変わったため、作っては壊して作っては壊してを繰り返した。
・デザインとかUIに無駄にこだわった。
・無駄に独学にこだわった。（メンターを雇っていれば悩まずにスラスラ解決できる部分があったと思う）
・途中から転職がゴールではなく、「自分が納得できるまでサービスを開発する」が目的となった。そのため 「あれもやりたい。これもやりたい」を全部やってしまった。
ThinkPad TrackPoint Keyboard II (JIS配列）をMacBookで使う

ThinkPad TrackPoint Keyboard IIを新しく購入したので、MacBookユーザーに向けてキーボードのマッピングを紹介します。

ThinkPad トラックポイント・キーボードを、macOSから使用しようとすると、
　**[Karabiner-Elements](https://karabiner-elements.pqrs.org/)** 
を使う必要があります。

この Karabiner-Elements を使いキーボードのマッピングを変更することで、より快適なキーボードになってきます。
これを使わないと **「無変換」「変換」「半角/全角」** のキーで入力の変換が出来ないことになり、とっても不自由なキーボードとなってしまうのです。

これからの説明は
　**ThinkPad TrackPoint Keyboard II**
に合わせた説明で自分の備忘録を兼ねているので、くどい表現があったらすみません。

「ThinkPad TrackPoint Keyboard II」はUSBでの接続とBluetooth接続が可能で、Bluetooth接続の場合はキーボードとマウスが1デバイスとして認識されるので、少し設定が変わります。

自分は **Macbook Pro** とはUSB接続なので、トラックポイントのボタンの設定とキーボードは別デバイスとして設定をしています。

日本語入力は「無変換」「変換」で単体押しで切り替えられるようにしてます。


| From key   | To key       |
|:-----------|:------------:|
|international5: |無変換キー|
|international4: |変換キー|
|international2: |カタカナひらがなキー|
|lang2: |macの英数キー|
|lang1: |macのかなキー|

ThinkpadキーボードのAltも、macの英数キーにマッピングしてます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86428/e6b3577a-5221-4e2d-2032-a44fce94dc75.png)


次に**センターボタン**によるスクロールを有効にする為の設定をします。
※これをやっておかないと、トラックポイントでスクロールしようとしたときにセンターボタンでリンクをクリックすると、新しいウィンドウが開いてしまうということが。。。。

 [https://pqrs.org/osx/karabiner/complex_modifications/] から「Change mouse motion to scroll (rev 1)」をKarabiner Elementsにインポートし、「Change button4 + mouse motion to scroll wheel (rev 1)」を有効にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86428/2768df92-317e-05d7-6e91-4129a584604d.png)

最後にSimple ModificationsタブでThinkPadキーボードのマウスデバイス側で「button3」を「button4」にマッピングします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86428/b9f0e90a-3abd-b773-1a69-eeaa74e3c81a.png)

上記の設定をすることで、**ThinkPad TrackPoint Keyboard II** を **MacBook Pro** のキーボードを使うときの違和感が少なくなり、MacBook本体とThinkpadキーボードを切り替えながら使っても近い感覚で使えるようになりました。
FireDACでDB接続

[【Delphi】業務アプリの作り方　目次](https://qiita.com/miyamura-figeo/items/57246bc5d32bd91af5ed#comment-bbd374e293bee071c6db)

DelphiからPostgreSQLのDBへ接続する手順を記載


## 前提条件
以下が完了していること

* [Delphiインストールとプロジェクト作成](https://qiita.com/hagi83484/private/23711648259f1dd3caf3)
* [PostgreSQLインストールと初期設定](https://qiita.com/hagi83484/private/737349b83bcb94617732)

以下を理解していること

* [Delphiの開発の進め方(入門)](https://qiita.com/hagi83484/private/c227d527059c8f082836)

##新しいフォームの作成

Delphiでプロジェクトを開き、「ファイル」＞「新規作成」＞「VCLフォーム - Delphi」を選択する。

「ファイル」＞「名前をつけて保存」で保存する

##コンポーネントを配置
パレット(Ctrl + Alt + P)から下記のコンポーネントをフォームに配置する

* TFDPhysPgDriverLink
* TFDConnection

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/a6102f82-3be6-53ed-7841-f20d5ec66fdd.png)

##プロパティの設定
オブジェクトインスペクタから以下のプロパティを設定する
※左側にオブジェクトインスペクタが見当たらなければ`F11`を押す

|プロパティ |設定値 |
|:-------- |:---------|
|DriverName|PostgreSQLの場合固定値で'PG'|
|Params.Database|データベース名|
|Params.UserName|ロール名|
|Params.Password|ロールのパスワード|
|Params.Server|IPアドレス(別サーバにDBがある場合)|

設定後、`Connected`を`true`にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/460e530f-b2eb-ee34-96f2-bf61806e19f2.png)

OKを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/894f15eb-5b81-ae76-fbb0-e4013c50a883.png)
エラーにならなければ接続完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037774/3dc60170-f55a-62f3-1b11-076814302841.png)
pkgenというパッケージジェネレーターを作った

# 概要
https://github.com/overgrow-crops/pkgen
yamlで書かれたパッケージのツリー構造の設計図を元に
パッケージを生成します。

コマンドとしては下記の3種類だけですが非常にパワフルなツールかと思います。

- pkgen
- pkgen template
- pkgen lang

# 使ってみる

### インストール
```shell
$ curl -O -L https://github.com/overgrow-crops/pkgen/releases/download/v0.2.0/pkgen
$ chmod +x ./pkgen
$ mv ./pkgen /usr/local/bin
```

### 確認

```shell
$ pkgen -v
$ pkgen/v0.2.0 darwin-x64 node-v14.4.0
```

### プロジェクトルートで
初回の`pkgen`実行はプロジェクトディレクトリに`pkg`ディレクトリと`.pkgen.yml`を作成します。
ユーザのホームディレクトリに`.pkgen`ディレクトリがない場合ホームディレクトリにも自動で環境構築します。

```
$ pkgen
  ____  _
 |  _ \| | ____ _  ___ _ __  
 | |_) | |/ / _` |/ _ \ '_ \ 
 |  __/|   < (_| |  __/ | | |
 |_|   |_|\_\__, |\___|_| |_|
            |___/            
⠏ Add the .pkgen.yml file to the current directory...
```

### .pkgen.ymlを書く
.pkgen.ymlに任意のディレクトリ構造を書いてやります。

```yaml
pkg:
  test:
    hoge.foo.bar:
```

### パッケージのジェネレート (コマンド: pkgen)

```shell
$ pkgen
[generate] to pkg/test/hoge/foo/bar/
```

### テンプレートの切り替え (コマンド: pkgen template)

```shell
$ pkgen template
? Select the package template you want to use.
@default(current) -> (Use arrow keys)
❯ @default 
```

### プログラミング言語ごとのテンプレート切り替え (コマンド: pkgen lang)

```shell
$ pkgen lang
? Select the programming language you want to use.
ecmascript5(current) -> (Use arrow keys)
❯ @typescript 
  ecmascript5 
  ecmascript6 
```

# テンプレートは幾つでも作成可能
`pkgen template`コマンドは`$HOME/.pkgen/template`ディレクトリ直下のディレクトリを読み込みます。
なので`$HOME/.pkgen/template/sample`というディレクトリを作り`pkgen template`コマンドを実行すると
下記のようにテンプレートが追加されます。
ただし、テンプレートの中には最低でも一つ言語毎のテンプレートが含まれている必要があります。
空のテンプレートを選択しても警告が出るだけで選択する事は出来ません。

```shell
$ pkgen template
? Select the package template you want to use.
@default(current) -> (Use arrow keys)
❯ @default 
  sample 
```

# まとめ
今回cliフレームワークはcacを使っています。
これまでcliはGoのurfaveなどを使っていましたが
Node.jsのcliフレームワークは簡単に選択肢やチェックボックスが実装でき
ユーザーの入力パターンを制限し簡単に安全なcliの実装が出来ることが分かりました。
Goでのcli開発もそれはそれでならではの良さがあるでしょうが
Node.jsでのcli実装もかなり優秀なようです。
何よりchalkやinquirerというライブラリのおかげでサクッとカッコいいのができます。
やはりカッコいいのは作る側としても自分の作ったものを継続的に育てていこうという
モチベーションが続くのでいいですね。
Githubの接続方法をSSHに変更でハマった話

Githubをssh接続に変更したらハマってしまったので、簡単に手順とハマったポイントを残しておきます。
##1 公開鍵・秘密鍵の作成
sshディレクトリでssh-keygenを使って公開鍵と秘密鍵を作る

```
cd ~/.ssh
ssh-keygen -t rsa -f id_rsa
```

注意 **デフォルトでid_rsaを見に行くのでそれ以外の名前にすると認証に失敗する**(ここですごいハマった)

##2 公開鍵をGithubにアップロードする
[Github](https://github.com)の左上のプロフィールからSettings-> SSH and GPG keys->New SSH keyで設定

##3 configにホストを設定
configファイルにホストの設定を記述

```
vim ~/.ssh/config
```

記述内容

```
Host github
     HostName github.com
     IdentityFile ~/.ssh/github
     User git
```

##4 sshで接続テスト
以下のsshコマンドでテスト　

```
ssh -T github
```
**You've successfully authenticated, but GitHub does not provide shell access.**と返って来たらOK

##5 gitの接続方法の変更
変更したいリポジトリに移動して以下のコマンドで確認

```
git remote -v
```

ここでfetchとpushがそれぞれhttpsによる接続方法になっていたら以下のコマンドで設定

```
git remote set-url origin SSH_URL
```