OmniAICreator/Qiita-1.07M huggingface dataset:
PyCharmでDjangoチュートリアル

# はじめに
以下のインストールが完了している状態から始めます。
- Python 3.7
- Pycharmの有償版(プロフェッショナル版)
　※無償版でもDjangoを扱えるそうですが、そちらには触れません。
- Django 2.1.7
　※Pycharmが有償版だからか、自分でインストールした覚えはないけど入ってました。
下記URLのチュートリアルを実施します。
https://docs.djangoproject.com/ja/2.1/intro/tutorial01/

# プロジェクトを作成する
チュートリアルページの、**プロジェクトを作成する**に該当する操作をPycharmで実施します。

1. Create New Project をクリック
![スクリーンショット 2019-03-02 19.15.02 2.png](https://qiita-image-store.s3.amazonaws.com/0/370398/89f19975-b193-2a0e-0240-4c35b1c49a56.png)
1. プロジェクトの種類などを選択してCreateボタンをクリック
プロジェクトの種類：Django
ロケーション：任意の場所
![スクリーンショット 2019-03-02 19.47.52.png](https://qiita-image-store.s3.amazonaws.com/0/370398/8ecb351d-fd6a-6def-c19a-82076c973599.png)

1. 空っぽじゃないけど、ここでいいの？と聞かれます。
予めgitの関係のファイル(README.md, .git)があるのでこんなウィンドウが出てますが、そのままYesでOK。
![スクリーンショット 2019-03-02 19.59.35.png](https://qiita-image-store.s3.amazonaws.com/0/370398/5fd82e5c-b4d0-14e8-3e65-2e0d7dc35ad4.png)

# 開発用サーバー
チュートリアルページの、**開発用サーバー**に該当する操作をPycharmで実施します。

1. 画面上部の、Run -> Run 'django_tutorial' をクリック  
※ Ctrl + R がショートカットになっています。
![スクリーンショット 2019-03-02 20.24.55.png](https://qiita-image-store.s3.amazonaws.com/0/370398/e313fd79-4d22-47d0-b047-fae50bd8df51.png)
2. 画面下部に起動した開発用サーバーのログが出てきます。  
![スクリーンショット 2019-03-02 20.29.36.png](https://qiita-image-store.s3.amazonaws.com/0/370398/23836ec2-419c-399b-2477-2345dbdcc734.png)
1. 先程のログに出てきた、 http://127.0.0.1:8000/ のリンクをクリックすると、起動確認ができます。
![スクリーンショット 2019-03-02 20.32.49.png](https://qiita-image-store.s3.amazonaws.com/0/370398/6f7c436e-1753-e39d-2604-1184c62b306a.png)

# Polls アプリケーションをつくる
1. 画面上部の、Tools -> Run manage.py Taskをクリック。  
※Option + R がショートカットになっています。
![スクリーンショット 2019-03-02 20.46.46.png](https://qiita-image-store.s3.amazonaws.com/0/370398/253f5c5d-eef8-53a0-94bf-033c918b4c72.png)
2. startapp pollsと入力しますが、入力途中でコマンドの補完が出てくるのが嬉しいところです。
![スクリーンショット 2019-03-02 20.51.25.png](https://qiita-image-store.s3.amazonaws.com/0/370398/96e41cb5-2619-abe1-5e4a-152f80cdffbb.png)

# 感想
サーバの立ち上げが楽でいいですね。
manage.pyのコマンドなんていちいち覚えてないので、補完が使えるのも良かった。
ただ、ここまでならわざわざIDEを使うほどでもないので、今後の実装やテスト、Gitとの親和性などに期待します。
collection_selectのform_for内での使い方


テキストを投稿させる際にフォーム内でジャンルを選ばせる時にcollection_selectを使ったので
すごく簡単にまとめて見た


形

```ruby:qiita.rb
<%= f.collection_select :genre_id, Genre.all, :id, :name　%>
```

<%= f.collection_select (オブジェクト名),プロパティ, オブジェクトの配列, value属性の項目, text %>

第一引数のオブジェクト名はform_forの時は必要ない


参考
[「rails」f.collection_selectの使用方法](http://stomo1986.hatenablog.com/entry/2013/11/27/212202)
EC2(Linux)のメモリをCloudWatchのメトリクスでモニタリングできるように設定(自分用のメモ)

自分用のメモ

## 概要
CloudWatchではCPUやStatusCheck(EC2が止まっているかどうか)については表示のメトリクスが用意されているが、MemoryやSwapなどはメトリクスが用意されていないため、自分でカスタマイズメトリクスを作成しなければならない。

## 手順
以下参照(これを上から順番に見るだけでできます)
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/mon-scripts.html

## 設定例
crontabの設定例

```
*/1 * * * * ~/aws-scripts-mon/mon-put-instance-data.pl --mem-util --mem-used --mem-avail --mem-avail --memory-units=Gigabytes --swap-util --swap-used --from-cron
```
タイムスタンプつきバックアップファイルを作成するコマンド

サーバーの設定ファイルとかをいじるときによく使うので忘れないようにメモ

```
$ cp -p ファイル名{,.`date "+%Y%m%d%H"`}
```

実行結果

```
$ cp -p hoge{,.`date "+%Y%m%d%H"`}
$ ls
hoge            hoge.2019030220
```

## 補足
バックアップファイルから戻し作業をする場合は以下のような感じ

```
mv hoge{.`date "+%Y%m%d%H"`,}
```

ちなみに、**戻し用にバックアップファイルを作成する場合は『時』くらいの粒度のタイムスタンプにしたほうがいい**と思います。

というのも、**秒単位のタイムスタンプにすると、戻し作業をする際にファイルを見つけることができない**からです。

```
mv hoge{.`date "+%Y%m%d_%H%M%S"`,}
mv: hoge.20190302_204733: No such file or directory
```

## さいごに
詳細をブログに書きました。ぜひご覧になってください↓
<a href="https://nishinatoshiharu.com/create-backupfile/" target="_blank">タイムスタンプのついたバックアップファイルを簡潔に作成する方法</a>

ツイッター(<a href="https://twitter.com/nishina555" target="_blank" rel="noopener">@nishina555</a>)やってます。フォローしてもらえるとうれしいです！
Djangoモデル　必須項目の設定

**Djangoモデルにて必須項目の設定をする方法**

Djangoには二種類の必須項目に関するオプション設定がある。
一つ目がblank 二つ目がnullである

**blank**はDjangoのフォームからの投稿が空かどうかを判定するもの、
**null**はデータベースの中身が空かどうかを判定するものである。

このblakとnullの設定により合計4通りの組み合わせが存在するが
基本的には**両方ともFalse**、もしくは**両方ともTrue**の時が使用頻度が
高いのでそれを覚えておけば良い。

##blank = False, null = False の時
これはDjangoではDefault設定となっている。
これはつまり、フォームからの投稿が空であるのを受け付けずに、かつデータベース側で
中身が空であるものは受け付けないという意味である。

すなわち、入力フォームを必須項目にする時に使用される。

---


##blank = True, null = True の時
これは、フォームからの投稿が空であるのを受け付け、かつデータベース側でも
中身が空であるものを受け付けるという意味である。

すなわち、入力フォームを必須項目でなくする時に使用される。

---

詳しい説明はこちらで解説されている。
https://www.djangobrothers.com/blogs/django_null_blank/
Ubuntu上にMacのTime Machineサーバを構築

古いIntel NUCにUbuntuをインストールして、Macのバックアップを保存するTime Machineサーバを構築した。

# 概要
- Intel NUCにUbuntuをインストールしてMacのTime Machineサーバにする
- 無線LANを活用して、設置場所を柔軟に決められるようにする

# Ubuntu 16.04 Serverの準備
<details><summary>特別なことはしていないので、折りたたんだ</summary>
<div>

## ハードウェア構成
- DN2820FYKH0 (Celeron N2820)
- DDR3 SDRAM 2GB
- 2.5" 512GB HDD

## DVDからインストール
管理用&バックアップユーザ名を **username** とした。
セットアップ時に以下のコンポーネントをインストールする。

- Standard System Utilities
- OpenSSH Server

その他備忘

- Language: English
- Keyboard: Japanese - Japanese (OADG 109A)
- Partitioning method: Guided-use entire disk

## sudo実行時にパスワードを要求しない
`$ sudo visudo`

``` :visudo
%sudo ALL=(ALL:ALL) NOPASSWD:ALL
```

## IPv6の無効化
``` /etc/sysctl.conf
net.ipv6.conf.all.disable_ipv6 = 1
net.ipv6.conf.default.disable_ipv6 = 1
```

## 自動アップグレードを無効化
コメントアウトする。セキュリティ的には良くない。

``` /etc/apt/apt.conf.d/50unattended-upgrades 
Unattended-Upgrade::Allowed-Origins {
// "${distro_id}:${distro_codename}";
// "${distro_id}:${distro_codename}-security";
// "${distro_id}ESM:${distro_codename}”;
```

## ネットワーク設定
本当は最初から無線LANでセットアップしたかったが、wireless-toolsがインストール時に入らないので、仕方なく有線LANを接続した。
パスフレーズがhistoryに残るからsudo -iしてrootユーザでやったほうが良いかもしれない。

`$ sudo apt update`
`$ sudo apt upgrade`
`$ sudo apt install wpasupplicant wireless-tool`
`$ sudo sh -c 'wpa_passphrase “**アクセスポイント名**” "**パスフレーズ**" > /etc/wpa_supplicant/wlp2s0.conf'`
`$ sudo chmod 600 /etc/wpa_supplicant/wlp2s0.conf`

``` :/etc/network/interface
allow-hotplug wlp2s0
iface wlp2s0 inet dhcp
  wpa-conf /etc/wpa_supplicant/wlp2s0.conf
allow-hotplug enp3s0
iface enp3s0 inet dhcp
``` 

## ssh設定
- アクセス許可するユーザを明示的に指定する
- 公開鍵認証だけ許す

``` :/etc/ssh/sshd_config
PermitRootLogin no
PasswordAuthentication no
AllowUsers username
```

- sshの公開鍵をホームフォルダにコピー

`$ mkdir -m700 .ssh`
`$ mv authorized_keys2 .ssh/`
`$ chmod 600 .ssh/authorized_keys2`

</div>
</details>

#  Time Machineサーバ設定
##  Netatalkをインストールする

`$ sudo apt install netatalk`

## Netatalk設定

- 512GBのHDDなので、バックアップサイズ上限を450GBとした。
- Macから認証したユーザ(**username**)のホームフォルダにバックアップが作成されるようにした。ここは好みになると思う。

``` /etc/netatalk/afpd.conf
- -tcp -noddp -uamlist uams_guest.so,uams_dhx.so,uams_dhx2.so -nosavepassword
```

``` /etc/netatalk/AppleVolumes.default
~/      "timemachine"   allow:username cnidscheme:dbd volsizelimit:450000 options:usedots,upriv,tm
```

# Macから接続
- 暗号化パスワードは**username**のログインパスワードを指定する。

デフォルトだと1時間に1回バックアップが動くが、トイレにでも置いておけばHDDのアクセス音は気にならない。
無線LAN経由だとバックアップ作成速度はとても遅い。初回のバックアップ作成時は有線LANを接続したほうが早そう。
構築してから半年たったが、良好に動作している。
VScode拡張機能RUN-CODE使用時のjavaでの文字コードエラー回避

#どうしたいか。
 VScodeで簡単にコンパイル・実行するために[Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)という拡張機能を使用しています。
　MAC上のVScodeで作成したjavaプログラムを、他のOS上のVScodeで動かした場合に文字コードによるエラーが出るので解消する設定を記載します。流行のCoderでもうまくいくようです。

#設定内容
　個別に文字コードの設定をしてやる。(ここでは、UTF-8)
```
    "code-runner.executorMap": {
    "java": "cd $dir && javac -encoding UTF-8 $fileName && java  -Dfile.encoding=UTF8 $fileNameWithoutExt"
    }
```
#関連情報
https://westhillworker.com/visualstudiocode-cpp/
「find_by」の所「find」じゃダメなの？

#find_by→findにしたら

@current_user ||= User.**find_by(id: session[:user_id])**
↓
@current_user ||= User.**find(session[:user_id])**
↓
**エラー**になった。

#理由
どちらもnil→
**その後の処理の仕方**が違う。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/354233/fbe74c41-682d-394d-3b1e-0ec520f7883c.png)
モダンな技術を全く知らないSIer5年目がWebサービスを作ることになったため0から勉強する ~AWS編その２~

# はじめに

現在SIer5年目でjavascript(Jqueryのみ)、PHP(フレームワーク無し)を2年ほど、C#(Windowsアプリ)3年ほどやってきました。
色々なご縁があり、個人で最近Webサービスの立ち上げをやることになったのですが何せ本当にWebサービスを立ち上げるための知識がほぼ0に等しいです:sob:

ただ今後のキャリアを考えた時に今のままではいけないと思いチャレンジすることにしました。

まずは最初に技術を習得しないといけないので、学ぶ＆アウトプットするために毎回投稿していこうと思います。
今後身についていこうと思ってるのは下記のような技術です。
**AWS**
**Docker**
**CI/CD環境の構築(何を使うかはまだ未定)**
**Laravel**
**Nuxt.js**

今回はAWSについて学んでいきます。

### 関連記事
[モダンな技術を全く知らないSIer5年目がWebサービスを作ることになったため0から勉強する ~AWS編その１~](https://qiita.com/gemetasu1103/items/ddfd0e8ddb3a6453b2f3)

# EC2を学ぶ
AWSでは一番有名？なサービスで、自分もAWSは全く勉強してなくてもこのサービス名とこれでクラウドにサーバを建てれるのは知っていました。


## EC2インスタンスを起動する
**起動までの流れ**
大きく分けて5つの流れで構成されています。

1. OS/Imageの選択
2. インスタンスタイプの選択
3. ストレージの選択
4. セキュリティグループの作成
5. SSHキーペアの設定

![image.png](https://qiita-image-store.s3.amazonaws.com/0/305479/fd8a0398-9a67-623e-2a38-a9b01b126c89.png)


### OS/Imageの選択
どのOSを使用するか選定する
EC2サービスの画面でインスタンス作成ボタンを押下すると
Amazonマシンイメージ(AMI)を選択する画面が出てくる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/305479/f679c62b-d2d8-6590-7b5a-371d4f377536.png)

#### クイックスタート
AWSで用意されているデフォルトのイメージ

#### マイAMI
自分で作成したAMI

#### AWS Marketplace
他のベンダーが作成したAMI

#### コミュニティAMI
その他コミュニティで作成されているAMI

### インスタンスタイプの設定
インスタンスタイプを一覧から選択する。今回は無料枠にしておく
![image.png](https://qiita-image-store.s3.amazonaws.com/0/305479/9b990a9c-79e7-9c95-753a-cafd6018a4ff.png)

#### ストレージの設定
ストレージの設定を行う
今回は初期値にしておくが、実際Webサービス構築時にはここら辺も考慮が必要かも。。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/305479/9f1cff30-3c80-27f9-05a2-361394a35fa6.png)

#### セキュリティグループの設定
FWの設定を行える。
ソースの項目の箇所でよりアクセスできるところを限定しておかないとセキュリティ的に危ない
![image.png](https://qiita-image-store.s3.amazonaws.com/0/305479/60143648-b55d-a0e7-8451-93249bbb5dad.png)

#### SSHキーペアの設定
SSHのキーペアを作成し、ローカルに保存しておく。
SSH接続に必要なため
![image.png](https://qiita-image-store.s3.amazonaws.com/0/305479/b046b76f-5875-b239-4e18-a94b23ac76a0.png)

## EC2インスタンスに接続し、ミドルウェアを起動する
立ち上げたEC2にSSH接続し、ミドルウェアを起動する(Apache)

### SSH接続する

ターミナルを開いてSSHのキーファイルに移動する

```
cd {xxx.pemファイルのパス}
```

SSHキーのファイル権限が大きすぎるためこのままだと接続時にWarningで弾かれてしまう
そのためpermissionの設定を変える

```
chmod 400 xxx.pem
```

SSHで接続する

```
ssh -i udemy-aws-14days.pem ec2-user@{EC2のIPv4 パブリック IP}
```

httpdのインストールを行う

```
sudo yum install httpd
```

httpdを立ち上げる

```
sudo service httpd start
```

サーバのIPアドレスでアクセスすると下記の画面が表示されるのでWebサーバが立ち上がったのが確認できる

![image.png](https://qiita-image-store.s3.amazonaws.com/0/305479/c086bd68-044f-87e0-2f3b-0c14eae54d5b.png)


## AMIを取得する
1. AMIとして取得したいインスタンスを停止させる
2. イメージの作成を行う
![image.png](https://qiita-image-store.s3.amazonaws.com/0/305479/dd22a889-f889-df4e-83dc-b9d2297b9a5f.png)

3. AMIタブを押下し、作成されたAMIを選択し作成ボタンを押下して新たにインスタンスの生成を行う
4. 通常のインスタンスのアクセスと同様に行い、Webサーバを立ち上げるとこまで行う


## EIPでIPアドレスを固定する
通常インスタンスを起動/停止するたびにIPアドレスが変わってしまう。
IPアドレスを固定にするためEIPの設定を行う

1. [Elastic IP]>[新しいIPアドレス割り当て]>[割り当て]でIPアドレスの払い出しを行ってもらう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/305479/e22ad07e-2068-0252-cbb1-2caccfffdefc.png)

2. [Elastic IP]>[アクション]>[アドレスの関連付け]に移動し、関連付けるインスタンスを選択し、[関連付け]ボタンを押下する

#### 注意点
取得したEIPはどこにも割り当てていなくても料金が発生してしまうため
取得したまま放置しないこと

![image.png](https://qiita-image-store.s3.amazonaws.com/0/305479/69b8777c-e0fd-15e0-180b-e62ea1574abd.png)
FirebaseとVue.jsでソーシャルログインを実装


## タイトルままですが、FirebaseとVue.jsでソーシャルログインを実装しました。

----
<img width="584" alt="ソーシャルログイン" src="https://qiita-image-store.s3.amazonaws.com/0/51116/d59140da-7c18-5bec-9570-79b573e4a4b2.png">
----

各ルーター側の.vueに影響がないように工夫しました。

### Firebaseなのでここでホスティングもしてます。

実際にログインもできます。

https://authentication-sample-001.firebaseapp.com/

### プロジェクトはこちら

https://github.com/qoAopx/firebase_vue_authentication
Anaconda環境にpowerlineをインストール

## pythonのパスを確認
```
$ which python
/anaconda3/bin/python
```

## pipを使ってpowerlineをインストール

```
pip install powerline-status
```
成功したら `Successfully installed powerline-status-2.7` みたいなログが出る


## powerlineのインストール先を調べる
自分の環境ではここ

```
/anaconda3/lib/python3.7/site-packages
```

## .bash_profileに追加

最後のパスは各自の環境にあわせて

```
# powerline
powerline-daemon -q
POWERLINE_BASH_CONTINUATION=1
POWERLINE_BASH_SELECT=1
. /anaconda3/lib/python3.7/site-packages/powerline/bindings/bash/powerline.sh
```

`source ~/.bash_profile` でプロファイルリロード
これでターミナルやハイパーの表示が変わるはず

## powerline用のフォントをインストール

上のコマンドは以前やっていたら不要

```
brew tap homebrew/cask-fonts
brew cask install font-source-code-pro font-source-code-pro-for-powerline
```

フォントインストールできたらターミナルやハイパーのフォント設定を`font-source-code-pro-for-powerline`に変更

## (e) base という表示を消す
Anaconda環境だとpowerlineの表示に環境変数`CONDA_DEFAULT_ENV=base`が表示される
こんな感じ
`user > (e) base > ~ >`
これを消すためにはpowerlineパッケージインストール先にある
`powerline/segments/common/env.py`の下記の関数にアナコンダ用のロジックがある
`CONDA_DEFAULT_ENV`があればpowerlineに表示するようになっているが邪魔なのでこれを消す
関数の第二引数の部分を`ignore_code=True`とすればOK

```
@requires_segment_info
def virtualenv(pl, segment_info, ignore_venv=False, ignore_conda=False):
	'''Return the name of the current Python or conda virtualenv.

	:param bool ignore_venv:
		Whether to ignore virtual environments. Default is False.
	:param bool ignore_conda:
		Whether to ignore conda environments. Default is False.
	'''
	return (
		(not ignore_venv and
		 os.path.basename(segment_info['environ'].get('VIRTUAL_ENV', ''))) or
		(not ignore_conda and
		 segment_info['environ'].get('CONDA_DEFAULT_ENV', '')) or
		None)
```

本来であれば`config_files`配下の設定ファイルにあるvirtualenvの表示部分を優先度を変えるとか修正するべきところだけど、どちらかというとAnaconda固有の処理をしてほしくないから上記ロジックを変更
RESTアーキテクチャとMVCアーキテクチャとscaffoldとresource

##RESTアーキテクチャ
REpresentational State Transfer（代表的な状態移動）の略。

簡単に言ってしまえば、**Webサイトでよく使うデータの加工方法**という感じ。

例えばFacebookだと、投稿の新規作成、読み込み、更新、削除ができますよね。
こういうよく使う操作をRESTと呼びます。

ちなみに、RESTfulというのは、後述するresourceコマンドで生成される7つのアクションのことをさします。

しかしこれはあくまでRuby on Railsというフレームワークが考えるRESTfulであって、全フレームワーク共通の設計思想ではないようです。

##MVCアーキテクチャ
**Model-View-Controller**
のこと。

Ruby on Railsというフレームワークではこの設計思想がもとになっている。

##scaffold
scaffoldは"土台"という意味。

Railsの考えるWebサイトのデータの土台を構築するコマンドが**scaffold**。

例えばユーザのデータをscaffoldで作りたいときは、
`rails generate scaffold User name:string email:string`
のように使う。

これによりUserのModel, View, Controllerなどを生成する。

デザインは最低限しか整っておらず、あくまでロジックのみ生成される。

##resource
routesに書くコマンド。

`resources :users`
のように使う。

この一行のみで様々なアクションが定義される。
具体的には、
index, show, new, create, edit, update, destroy
の7つのアクションが定義される。
Django DB値ではなくchoicesで設定した読みやすい方の値を画面表示する

**Djangoにてモデルを作成している時、選択肢から値を選ばせたい時がある。**

その時に役立つのがchoicesなのだが
普通の設定だとchoicesを用いると、
そのDBモデルを表示した時、整数値と
なってしまう事がある。

例えば

```
GENDER_CHOICES = (
    ('1', '男性'),
    ('2', '女性'),
    )
```
として、男性を選んで、そのフィールドを
表示すると1が表示されてしまう。。。

その解決策はこちらに書いてある。
結論としては

```
{{ DBモデル名.get_fieldName_display }}
```

ソースはこちら
https://btj0.com/%E3%83%96%E3%83%AD%E3%82%B0/django/django-db%E5%80%A4%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%8Fchoices%E3%81%A7%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%9F%E8%AA%AD%E3%81%BF%E3%82%84%E3%81%99%E3%81%84%E6%96%B9%E3%81%AE%E5%80%A4%E3%82%92%E7%94%BB/
postgreSQLでバイト指定で文字列を切り出す

#初めに
PostgreSQLには標準に用意されていない、バイト数指定で文字列を切り出す方法です。

```sql:substrbyte.sql
select 
  'あいうえお'
 ,substring('あいうえお'::bytea ,1,3) 
 ,substring('あいうえお'::bytea ,1,3)::text 
 --バイト指定で文字列を切り出す。
 ,convert_from(substring('あいうえお'::bytea ,4,3), 'UTF8')
 --※convert_fromは指定したencodingに変換できない場合エラー
 --,convert_from(substring('あいうえお'::bytea ,5,3), 'UTF8')
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/186737/7e4001a1-2292-e3c8-d552-df7cc406112a.png)
rails 　require jqueryが反映されない

こんにちは。Railsの八章のところで、application.jsにBootstrapのJavaScriptライブラリを追加するところで反映させようとしたところこのようなエラーが出ました。

すでにRailsは再起動してます。

![エラー.JPG](https://qiita-image-store.s3.amazonaws.com/0/317998/a1cbdf66-c077-d2ee-c60c-a78d0c73d724.jpeg)
Linuxの時間変数(jiffies)でハマったこと

Linuxには色々な時間変数がありますが、このjiffiesにハメられたので記録しておきます。（勝手にハマっただけ）

# 変数jiffies
Kernel起動時からtick（タイマー割込み）を数えた回数。
`#define HZ`のCONFIG_HZの値で計算される。
仕事の環境では、`HZ=200`だった。

jiffiesは`HZ`の間隔でカウントアップされていく値である。
つまり、jiffiesの値を`HZ`で割れば、secが算出されるハズ。

## 32bit環境

```math:例
jiffies = 348,264 \\
HZ = 200\\
とした場合、\\
\begin{align}
jiffies\ / HZ &= 348,264\ /\ 200 \\
&= 1,741.3\ [sec] \\
&= 29.8\ [min]
\end{align}
```

この計算は、公式APIの`unsigned int jiffies_to_msecs(const unsinged long j)`でも同じ計算をしている。
計算式自体は決して間違っていない。

しかし、**64bit環境では思ったように答えが出ない**のである。


## 64bit環境

```math:例
jiffies = 4,295,130,087 \\
HZ = 200\\
とした場合、\\
\begin{align}
jiffies\ / HZ &= 4,795,130,087\ /\ 200 \\
&= 2,395,650.435\ [sec] \\
&= 39,927.50725\ [min]
\end{align}
```

は？20分ぐらいしか待ってないのに何それ？

# jiffiesの初期値
このjiffies、初期値がクッソ特徴的である。

- 32bit環境 初期値-5分
- 64bit環境 32bitの初期値に、<font color=red>上位32bitを0埋め</font>

```math:-5分が初期値って？
\begin{align}
jiffies &= -5\ _{(10)}\ [min] \\
&= -6,000\ _{(10)}\ [sec] \\
&= FFFF\ E890\ _{(16)} \\
\end{align}\\
ただし、64bit環境では上位32bitを0埋めするため、\\
0000\ 0000\ FFFF\ E890\ _{(16)}
```

- 32bit環境の場合 `FFFF E890`  
32bitの領域はこれでお終い。`0000 0000`は32bit領域外。
- 64bit環境の場合 `0000 0000 FFFF E890`  
64bit幅なので、上位32bit(`0000 0000`)は0だが領域として存在している。

# jiffiesは符号なし
こいつ、負数を初期値に取るクセしてunsigned型なのだ。
つまり、さっきの-5分はどんどんタイマーカウントを進めていって、5分後に綺麗に`0000 0000 0000 0000`(16)になる。

# メモリ幅による値の変化
5分後、jiffiesの値が綺麗に0になるのはいい。
だが、コンピューターにおける**<font color=red>加算して0になる</font>**には注意が必要だ。

## 32bit幅の場合
結局、`(0000 0000) FFFF E890`の羅列はtick毎に加算されて行って0になる。
その瞬間は`(0000 0001) 0000 0000`となる。
だが、上位32bit（`0000 0001`の部分）は32bit領域外なので消えてしまう。
みんな大好き<font color=red>オーバーフロー</font>だ。

その結果、32bitでは`0000 0000`だけが残り、真に0となってしまう。

## 64bit幅の場合
`0000 0000 FFFF E890`は加算され続けることで0になろうとするが、そうは問屋が卸さない。
`0000 0001 0000 0000`となり、32bit幅では消えてしまった上位32bitの1が残り続ける。
つまり、
`0000 0001 0000 0000` (16) = `4294967296` (10)
**<font color=red>0とはならない</font>**のである。

64bit環境では、この値を引いてやらないと正しく計算できないわけだ。

# 再度、計算し直してみる。

```math
jiffies = 4295130087\\
4294967296 < jiffiesを満たすため、補正処理を導入する。\\
jiffies - 4294967296 = 162791\\
\begin{align}\\
jiffies / HZ &= 162791 / 200\\
&=813.955\ [sec]\\
&=13.6\ [min]\\
\end{align}\\
さらに、開始が-5分であるため\\
18.6[min]
```
体感で20分ぐらい経ってから取得した値なので、それなりに合ってそう。

# 結論
みんな大好き、オーバーフローには気をつけようね！！（雑）
pgadmin4/dockerの接続サーバー設定の永続化

# はじめに

　docker-composeでPostgreSQLとpgadminのコンテナーを立ち上げ、PostgreSQLはデータの永続化、pgadminはサーバ接続等、設定情報の永続化を行います。コンテナーは基本的に削除すると起動時に操作した結果が消えてしまいます。

　PostgreSQLのデータ永続化は色々と紹介されてますが、pgadmin4の方は見かけず、毎回起動する度にpostgresコンテナとの接続を行うのが億劫だったのでこちらも設定情報を残すようにします。


## pgadmin4とは

- GUIでPostgreSQLのデータベース管理を行えるクライアントソフトです
- 以下のようなUIです

![image.png](https://qiita-image-store.s3.amazonaws.com/0/239881/81ff742c-c933-c6c0-22c9-f2b5e0e32665.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/239881/d4a76844-738b-ca9d-b9a1-e738331ef0b7.png)



## 公式ドキュメント
　接続サーバーの設定情報をjson形式でexport/importすればいけるようなことが書いてありましたが、こちらで試したところうまくいきませんでした。
https://www.pgadmin.org/docs/pgadmin4/dev/export_import_servers.html

## 結論
以下のようにdocker-compose.ymlを書きます。

単にpgadmin4コンテナの中の"/var/lib/pgadmin"をvolumeするだけでいけました。 
postgresの方の永続化は"/var/lib/postgresql/data"をvolumeすればいけます。

これで初回のコンテナ起動時のみpstgresqlサーバーとの接続を行えば、次回以降の起動時には自動してくれるようになります。

```yml:docker-compose.yml

version: '3.7'
services:

    postgres:
        image: postgres:11.2
        container_name: postgres
        ports:
            - 5432:5432
        volumes:
            - ./docker/postgres/init.d:/docker-entrypoint-initdb.d
            - ./docker/postgres/pgdata:/var/lib/postgresql/data
        environment:
            POSTGRES_USER: root
            POSTGRES_PASSWORD: root
            POSTGRES_INITDB_ARGS: "--encoding=UTF-8"
        hostname: postgres
        restart: always
        user: root

    pgadmin4:
        image: dpage/pgadmin4:4.2
        container_name: pgadmin4
        ports:
            - 8000:80
        volumes:
            - ./docker/pgadmin4:/var/lib/pgadmin
        environment:
            PGADMIN_DEFAULT_EMAIL: root
            PGADMIN_DEFAULT_PASSWORD: root
        hostname: pgadmin4
        depends_on:
          - postgres
        restart: always
```
react-native-svgで親要素の色を継承する

```jsx
<Svg width='50' height='50' color='#666666'>
  <Circle
    cx='25'
    cy='25'
    r='22'
    fill='currentColor'
    stroke='black'
    strokeWidth='2'
  />
</Svg>
```

Circleのfill colorを親要素の色を与えたいという前提の場合。
こんな感じ。Svg要素にcolorを与え、子要素の中でfillなどの色を使うpropに対して `currentColor` という値を与える。これでCircleは `#666666` でfillされる。
ボクのbashはダサい

と最近煽られたのでほげぇええええええええと言われないようにbashを少し改造しました。（最低限）
[お前らのターミナルはダサい](https://qiita.com/kinchiki/items/57e9391128d07819c321)

設定移行で事故りたくないのでzsh移行は今度やる（しばらくやらない）

# ディレクトリのフルパスとbranch名を表示

ディレクトリのフルパスとgithubのbranch名を表示するようにします。
`.bashrc`に追記

```.bashrc
function parse_git_branch() {
  git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}

PS1="\[\033[32m\]\w\[\033[33m\]\$(parse_git_branch)\[\033[00m\] $ "
```

<img width="648" alt="スクリーンショット 2019-03-02 18.38.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/284fd990-b0df-c3c8-b9e5-d8518c3efb99.png">

# lsに色をつける

`.bash_profile`に追記

```.bash_profile
CLICOLOR=1
LSCOLORS=FxGxcxdxCxegedabagacad
```

CLICOLORはLSCOLORSを有効にする環境変数(`man ls参考`)、１で有効
ls時の色を変更します。（ディレクトリとファイルを区別）
[LSCOLORS Generators](https://geoff.greer.fm/lscolors/)でプレビュー見ながら色を作れます。

<img width="648" alt="スクリーンショット 2019-03-02 18.40.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/322db3df-4a80-9dd2-cc33-fe98e3713198.png">

# bashコマンドの補完
brewでbash_completionをインストール

```.sh
$ brew install bash_completion
```

`.bash_source`に追記

```.bash_source
[ -f /usr/local/etc/bash_completion ] && . /usr/local/etc/bash_completion
```

途中までコマンドを入れた場合にタブで補完されるようになる

# よく使うgitコマンド
git_completion入れるよりも
ぶっちゃけaliasで設定したほうが楽
`.bashrc`に追記

```.bashrc
# git
function gc() {
  command git clone $1 --depth 1
}
alias gf='git fetch'
alias gch='git checkout'
alias gb='git branch'
alias gba='git branch -a'
alias gbd='git branch -D'
alias gpl='git pull'
alias grh='git reset --hard'
alias gps='git push -u origin'
alias gpsf='git push -f origin'
alias gco='git commit -am'
alias gcoe='git commit --allow-empty -m'
alias gcl='git clean -dfx'
alias gl='git log'
alias gr='git rebase'
alias gri='git rebase -i'
alias grv='git revert'
alias gm='git merge'
alias gd='git diff'
alias ga='git add *'
alias gs='git stash'
alias gsp='git stash pop'
alias gcp='git cherry-pick'
```
react-native iOSアプリのビルド時の'glog/logging.h' file not foundエラーを解消する

# エラー発生状況
下記の環境下でXcodeでiPhoneシミュレーターにビルドしようとしたところ、Xcode上で突然`'glog/logging.h' file not found`が発生しました。
このエラー解消にかなり苦戦したのでその対処法を記載しておきます。レアケースかもしれませんが、誰かのお役に立てたら幸いです。


- react-native: `0.52.0`
- Xcode: `10.1`
- Node.js: `8.10.0`


# 対処方法

対処した過程を書いていくので、やや冗長かもしれませんがお許しを:pray:

まずは`'glog/logging.h' file not found`でググると、StackOverflowで['glog/logging.h' file not found](https://stackoverflow.com/questions/49657043/glog-logging-h-file-not-found)というまさにという質問がヒット。
しかも解決済みっぽかったので早速以下を実行しようと試みると、、、

```
~> cd node_modules/react-native/third-party/glog-0.3.4                                                                                                                                │jest-haste-map: watch error:
cd: The directory 'node_modules/react-native/third-party/glog-0.3.4' does not exist      
```

なぜか対象のファイルがない、、、！
しかもよく調べてみると`third-party`というディレクトリすら存在しない。
ということで、ひとまず`rm -rf node_modules && yarn cache clean && yarn install`してみるも変わらず。

再度ググっていると、[Developers - Xcode 10: third-party: 'config.h' file not found](https://www.bountysource.com/issues/46007348-xcode-10-third-party-config-h-file-not-found)という記事に良さげな解決策が。

> Share the steps I solved:
1. `rm -rf node_modules/ && yarn cache clean && yarn install` and `rm -rf ~/.rncache`
2. cd node_modules/react-native/scripts
3. `./ios-install-third-party.sh` If your network is slow, you can download the packages separately and move them to the rncache folder 1. folly-2016.10.31.00 2. double-conversion-1.1.5 3. glog-0.3.4 4. boost_1_63_0
4. `cd <Your-Project-Folder>/node_modules/react-native/third-party/glog-0.3.4`
5. `./configure`
6. Xcode Clean & Build

この手順で実行しようと試みるも、またしても`third-party`がない:scream:

途方にくれながらふと`node_modules/react-native/scripts`配下を覗いてみると、なぜかここに`third-party`ディレクトリを発見（なぜ？）

ということで以下を実行。

```
~> cd node_modules/react-native/scripts/third-party/glog-0.3.4
~> ./configure
```

するとなぜか`node_modules/react-native/third-party`が出来上がったので、以下を実行すると無事エラーが解消されました。
> 4. `cd <Your-Project-Folder>/node_modules/react-native/third-party/glog-0.3.4`
5. `./configure`
6. Xcode Clean & Build

※ 本当はこの後さらに`error: Build input file cannot be found: '/libfishhook.a'`というエラーも出たのですが、これについては [Xcode10アップデート後にreact-nativeのiOSビルドが通らなくなった人向けの記事](https://qiita.com/wheatandcat/items/476256ee7eead14a97aa#%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B32error-build-input-file-cannot-be-found-libfishhooka)で書いてくださった方法ですぐに解決しました。

結論、Xcode辛いです...
Unityでのプレハブの座標について（ワールド座標とローカル座標)

#疑問に思ったこと 
Unityでプレハブで敵を配置しているときにそれぞれの位置座標を変えていて思いました．
あれ？自分の入力している値と表示される場所に違いがあるのではないのか？
これはなぜだろう・・ってことでなぜに一致しないのか，どうするべきなのかについて考えていきたいと思います．

こちらが今回使っているスクリプトの一部です．

```c#:enemy.cs
    public class enemy : MonoBehaviour
    {
    public float position_x = 0.0f;
    public float position_y = 0.0f;
    [Range(0.0f,3.0f)]
    public float rotation_speed = 1.0f;
    [Range(1.0f,10.0f)]
    public float rotation_range = 1.0f;

    // Update is called once per frame
    void Update()
    {
        if(gameObject.layer == 9){
            move_lengh();
            // Debug.Log("lengh");
        }else if(gameObject.layer == 10){
            move_side();
            // Debug.Log("side");
        }
    }

    void move_lengh(){
        float pos_x = this.gameObject.transform.position.x;
        float pos_y = this.gameObject.transform.position.y;
        float sin = Mathf.Sin(rotation_speed*rotation_range*Time.time) + position_y;
        Debug.Log("eagle->"+"pos_x:"+this.gameObject.transform.localPosition.x+",pos_y"+this.gameObject.transform.localPosition.y+",sin:"+sin);
        this.transform.position = new Vector3(pos_x,sin,0);
    }
```

<img width="1280" alt="スクリーンショット 2019-03-02 18.32.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/241933/1927def2-671d-2dc9-1a25-fa130647a4eb.png">

(自分が作成したいるスクショなのでわかりづらいところもありますが，御料所ください)
ここで見てきたいのは，赤くなっているところの二つになります．

#何が知りたいか
では，コードとスクショの方を見比べていきます．

```c#

        float pos_x = this.gameObject.transform.position.x;
        float pos_y = this.gameObject.transform.position.y;
```
この二つのコードはそれぞれのオブジェクトの座標を取得します．では，この座標とスクショの右上の値を比べてみます．この時に得られる座標はワールド座標になります．（こちらはスクショを取っていません）
では，この座標をスクショの右上と同じ値を得るためにはどのようにすればいいのでしょうか．
その場合は，以下のようにします．ワールド座標ではなくローカル座標を得るといいことがわかりました．

```c#

Debug.Log("eagle->"+"pos_x:"+this.gameObject.transform.localPosition.x+",pos_y"+this.gameObject.transform.localPosition.y+",sin:"+sin);
```
これでターミナルに表示される値とUnity上に表示される値は同じになりました．
Hugoで記事を指定したらタイトルも表示されるshortcodeを作った

# なんで作ったか
Hugoで記事を指定したらタイトルも表示したいと思ったけど、そういう機能が見つけられなかったので自分で作ってみた。きっと**「それもうあるよ」**って誰かが教えてくれるはず、、

# 作ったもの
## layouts/shortcodes/post.htmlに次のようなhtmlを作る
```html
{{ $post_number := index .Params 0 }}

<a href='/posts/{{ $post_number }}/'>
{{ with .Site.GetPage $post_number }}{{ .Title }}{{ end }}
</a>
```

## 記事の方にshortcodeを書く
```html
<!--記事の名前が6の時-->
{{< post 6 >}}
```
[このブログに使った](https://umoneji.com/posts/7/)

## 次のようにリンクで表示される
![image.png](https://qiita-image-store.s3.amazonaws.com/0/366117/73be1c68-144d-10d6-28e3-aa88dd51086b.png)


# （おまけ）調べた事
## リンクは作れたが、タイトルが取れなかった
https://gohugo.io/content-management/cross-references/

## 関連記事が出せるらしい
https://gohugo.io/content-management/related/
git commnd


１、リポジトリにあるプロジェクトを自分のローカルにクローンする

```
＄ git clone
```

２、masterから自分のブランチを切る

```
$ git branch ブランチ名 　or 　git checkout -b ブランチ名
```

３、機能がある程度できたらローカルブランチにコミットするファイルを指定

```
$ git add . 　 or 　 $ git add コミットしたいファイルのURL
```
```
$ git status→変更したファイルを表示  $ git diff→差分を表示　$ git log→履歴を確認
```

４、コミットする

```
$ git commit -m ‘コメント’
```

５、コミットしたものをプッシュする

```
$ git push origin ブランチ名
```

６、リモートに自分が作った機能を文章で後悔する　

```
$ hub pull-request -a リクエストを送るユーザー
※上記のコマンドを入力するためには事前にhubコマンドを使えるように捨て置くこと
```
７、マスターブランチにマージする

```
$ git marge ブランチ名
```
Leetcode #1 Two Sum

Question: Given an array of integers, return indices of the two numbers such that they add up to a specific target. You may assume that each input would have exactly one solution, and you may not use the same element twice.

####Solution 1: Brute force

```swift
func twoSum(_ nums: [Int], _ target: Int) -> [Int] {
    for (firstIndex, num) in nums.enumerated() {
        for secondIndex in firstIndex+1..<nums.count {
            if (num + nums[secondIndex] == target) {
                return [firstIndex, secondIndex]
            }
        }
    }
    return []
}
```
Analysis: For each element, we try to find its complement by looping through the rest of the array which takes O(n) time. Therefore, the time complexity is O(n2)
The space complexity is O(1).

####Solution 2: Two-pass Hashtable
In the first iteration, we add each element's value and its index to the table. Then, in the second iteration we check if each element's complement exists in the table.

```swift
func twoSum(_ nums: [Int], _ target: Int) -> [Int] {
    var dict = [Int: Int]()
    for index in 0..<nums.count {
        dict[nums[index]] = index
    }
    for firstIndex in 0..<nums.count {
        if let secondIndex = dict[target-nums[firstIndex]] {
            if firstIndex != secondIndex {
                return [firstIndex, secondIndex]
            }
        }
    }
    return []
}
```
Analysis: We traverse the list containing the n elements twice. Since the hashtable reduces the look up time to O(1), the time complexity is exactly O(n).
The space complexity is O(n).

####Solution 3: One-pass Hashtable
While we iterate and inserting elements into the table, we also look back to check if the current element's complement already exists in the table.

```swift
func twoSum(_ nums: [Int], _ target: Int) -> [Int] {
    var dict = [Int: Int]()
    for secondIndex in 0..<nums.count {
        if let firstIndex = dict[target-nums[secondIndex]] {
            return [firstIndex, secondIndex]
        }
        dict[nums[secondIndex]] = secondIndex
    }
    return []
}
```
Analysis: We traverse the list containing n elements only once. The time complexity is O(n). 
The space complexity is O(n)
picoCTF 2018 now you don't - Points: 200

#問題

https://2018game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/14a107e7-4c30-2d42-7d60-e0fb05c84460.png)

#解いてみた

添付ファイルをダウンロードします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/de59f459-56d2-c5a8-c0f2-801a8decfb26.png)

画像ファイルを見てみるとただの赤い四角。
文字列が含まれていないかBzで見てみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/19b85fe6-e96c-f75f-001f-fc58e97229c4.png)

picoで検索してみましたが、ヒットしませんでした。
うさみみハリケーンの青い空を～を使ってみます。

ステガノグラフィー解析を使って候補を変えるとフラグが出てきました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/ae1c92e3-2c28-91ea-729c-e741a627e41f.png)
水上ドローン作りたい、5 開発環境の構

使用HWコンポーネントに目処がついたため、ここからはSW開発環境を構築します。
#使用言語
C++で行く事にしました。低レベルプログラミングをするならこれがいちばんしっくりきます。
#Visual Studio 2017 Community Edition
Windowsのソフト開発では散々お世話になっている大好きな開発環境です。最近はLinux向けの開発もサポートとしているときいたので試して見ました。
##セットアップ
インストール時に、Linux開発を選択しておく必要が有ります。選択し忘れていても、もう一度インストーラーを起動すれば後から追加出来ます。![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/1ae3a5c2-cc28-e9d5-2428-8f77dce9fd4d.png)
##プロジェクトの作成
プロジェクトテンプレートから、Linux開発用のテンプレを選ぶだけでＯＫです。
インストール済->Visual C++->クロスプラットフォーム->Linux->コンソールアプリケーーション(Linux)を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/dda121ba-5061-e6d3-70b4-035909f88c19.png)
##使用CPUに、ARMを選択。
Rasberry PI ですので、ARMを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/eb74f09f-3b7d-dfae-99b7-38ecd31cbf02.png)
##接続するラズパイのアドレスを指定
実際のデバッグやビルドはRasberryPI上で行われるため、接続先のRasberry PIを指定する必要が有ります。接続自体はsshで行います。
上部メニューから、ツール->オプションと選択してオプション画面を表示。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/d02e56c1-af85-677d-37bb-f358c43146d6.png)
クロスプラットフォーム->接続マネージャーを開きます。「追加」を押して接続先を指定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/15ba9273-c550-28bf-4a34-d9a7250969b8.png)
接続先アカウントですが、root権限が必要なアプリであればrootユーザーを指定してしまえば良いと思います。デバッグの時楽ですので。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/db065536-26af-fabe-bbde-a8cc2acacbfb.png)

これで準備はＯＫです。

##コンパイル、デバッグ
Windowsアプリ開発と同じ要領で実行すればいいです。勝手にソースコードをRasberry PIにコピーしてビルド、実行してくれます。デバッガも良く出来ており、Linux上でリーモートでバッグしているとは思えない程完璧です。
##コーディング、構文補完
Rasberry PI上に存在するライブラリやヘッダ情報であっても、粗完璧に構文補完が機能します。どうやらビルド時にヘッダ情報やシンボル情報をコピーしてきているようです。この機能のお陰でだいぶ助かりました。

##雑感
久しぶりにMSVCを触りましたが、良く出来たソフトだなーと感心しました。めちゃくちゃお勧めです。
picoCTF 2018 leak-me - Points: 200

#問題

https://2018game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/464c3157-e59a-c6c8-3a2c-4f630a6e378d.png)

#解いてみた

ソースコードを見てみるとflag.txtを出力する処理がありました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/6d046c5c-dbca-1344-6262-9e56e408c8c2.png)

この関数を呼び出せばよさそうです。
呼び出し元を確認してみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/25d4924f-d484-1b87-9c54-50d668950be7.png)

main()関数の中でパスワードがあってれば呼ばれるようです。
ltrace使ってstrcmpの引数を見ようと思ったんですが、ncでつないでいるときにどうやってやるのかわかりませんでした。
なので、とりあえず名前の入力とパスワードの入力の桁数を超えてみようと思います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/734ca635-4455-45fc-87af-1a1efbff7715.png)

名前は256文字より大きく、パスワードは64文字より大きくしてみます。

まずは名前から

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/e0360262-46c4-87ff-5477-6012be28748c.png)

末尾に変な文字列がくっつきました。
とりあえずパスワードに放り込んでみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/ebf6479e-4d72-1948-4c6a-8aba6c42380e.png)

できてしまった。

# 何が起きてるんでしょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/1b9821dd-74ed-22f9-86c2-6d1e8a2a9055.png)

42行目でnameを入力します。
CTFmanと入力した場合以下のように格納されます。

|1文字目|2文字目|3文字目|4文字目|5文字目|6文字目|7文字目| 
|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
|C|T|F|m|a|n|¥0|

48行目のstrcatは終端文字を消して文字列結合して最後に終端文字をつける。

|1文字目|2文字目|中略|6文字目|7文字目|8文字目|9文字目|中略|最後-2文字目|最後-1文字目|最後文字目| 
|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
|C|T|中略|n|\n|P|l|中略|d|.|¥0|


となります。
それで59行目でこれを表示する。
という流れです。

これは結果論ですが、メモリ上ではname変数の直後にpassword変数があるようです。
∵今回の解き方でname変数をオーバーフローさせたときにパスワードが表示されたからです。

説明します。
とりあえずnameの直後にpasswordがあると仮定します。

name配列は256文字なのでそれを超える文字を入力したときにさっきの流れはどうなるんでしょう。
やってみます。Aをたくさん入力するとします。

|1文字目|2文字目|中略|256文字目|257文字目| 
|:--:|:--:|:--:|:--:|:--:|
|A|A|中略|A|¥0|

42行目でこんな感じの文字列を入力したとします。
すると48行目では以下のようになります。

|1文字目|2文字目|中略|256文字目|257文字目|258文字目|中略|最後-2|最後-1|最後| 
|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
|A|A|中略|A|\n|P|中略|d|.|¥0|

これが59行目でそのまま表示されると思いきや、56行目の処理でパスワードを変数に代入しています。
なのでname直後にあるpasswordが上書きされるので（パスワードはpが続くとして）

|1文字目|2文字目|中略|256文字目|257文字目|258文字目|中略|pass最後-1|pass最後| 
|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
|A|A|中略|A|p|p|中略|p|¥0|

となります。
そして59行目で文字列を表示する際に終端文字はnameにはなく直後に続くパスワードに終端文字があるのでここまで表示されてしまう。

ということですかねー。
水上ドローン 作りたい 4、インターネット回線、通信内容

#ボートに搭載するネット回線
インターネット経由で情報をやり取りする予定なのでネット回線が必須になります。

##Docomo L-02C
RasberryPI専用の3G、4Gボードも売られていました。魅力的ですが、高価な事もあり見送りになりました。水没で全損といった事も十分考えられるので、現段階で高価なものを使う気になれません。

結局これになりました。
[docomo L-02C レッド（R） データ通信専用機種](https://www.amazon.co.jp/gp/product/B00524UU3Q)
SIM端子カバーが欠品の訳アリ品、980円とです。接続事例が他ブログで紹介されていたのも決め手です。

##接続方法
接続方法は多数ネットに公開されています。以下のページで情報を得ました(ありがとうございます)。
[EeePCの軌跡 Raspberry PiをL-02C＋IIJmioでつないでみた](http://arkouji.cocolog-nifty.com/blog/2014/06/raspberry-pil-0.html)
接続方法は上記ページで書いている事を実行すればそのままで動きました。ありがとうございます。
今回行う通信の内容を纏めました。書いてあるIPやアドレスはもちろん実際のものではありません。
#通信の流れ
#ボート、遠隔操作用PCの通信
![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/6800d8b1-b1ae-6983-cdf3-e96253d6082a.png)

一番メインになる通信です。ラジコンボートとPCを接続してPCからラジコンを遠隔操作します。
##ボート側のネットワーク
先ずボート側のネットワークは、rasberry PIにUSBのドングル(SIM はIIJ Mio)を繋いでインターネットに出ていきます。グローバルIPは割り振られません。
##自宅(遠隔操作側)のネットワーク
こちらは J-comの1M回線。速度は1Mしか有りませんが、グローバルIPで安定して動作するので気に入っています。グローバルIPは固定ではありませんので、DynamicDNSの名前解決で対応しています。
##接続方針
ボート側にグローバルIPが有りませんので、自宅からラジコンへ直接接続できません。仕方ないのでボートから、自宅の遠隔操作用PCにコネクションを張ってそのコネクションの中でボートへ命令を送る事にします。
##具体的なコマンドについて
遠隔操作用PCからボートへ送るコマンドは以下の通り

- BOAT_CONTROLL           ボートの舵角、アクセル開度
- START_MEDIA_TRANSMIT    カメラ映像の転送を開始、転送先のアドレスも指定する
- STOP_MEDIA_TRANSMIT     カメラ映像の転送を止める
- CONNECT_SSH_SERVER      指定のsshサーバにポートフォワード指定で接続する
- DISCONNECT_SSH_SERVER   sshサーバへの接続を解除する

##メディア情報の流れ
カメラ映像を取り込み、遠隔操作用PCにデータを流します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/6a2be19f-2ebb-21d2-f5d8-58b46324f43e.png)
カメラ映像はエンコード後、UDPで自宅のルータに送信。NATポートフォワードで遠隔操作用PCに転送します。これで動作はするのですが現在録画が出来ません。今後録画用のサーバに転送する処理が追加になる予定。

##ssh接続の流れ
メンテナンスのためssh接続は出来るようにしておきたい。これも直接はボートにいけないので、sshポートフォワードを利用しました。ボートからsshサーバに接続するタイミングは、遠隔操作用PCから指示する事になります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/8f07bf27-8043-fbe8-1157-921db0ad2a0c.png)
【備忘録】react-templatesについてまとめた

## react-templates
- wixが提供しているライブラリ(http://wix.github.io/react-templates/)
- reactのテンプレート箇所を".rt" 拡張子ファイルとして切り分け、コンパイルしテンプレートとして出力する。
- HTML感覚で書ける。
- お試し: http://wix.github.io/react-templates/fiddle.html

## install

https://www.npmjs.com/package/react-templates

```.js
npm i -g react-templates
```

gulp: https://www.npmjs.com/package/gulp-react-templates

```.js
npm i gulp-react-templates
```

## gulp task code

サンプル

```.js
const gulp = require('gulp');
const rt = require('gulp-react-templates');
const rename = require("gulp-rename"); // 出力ファイル名を変更するため

const rt_path = './src/rt/*.rt';

gulp.task('rt', () => {
  return gulp.src(rt_path)
    .pipe(rt({ modules: 'es6' })) // 吐き出す際の出力フォーマットを選択
    .pipe(rename(name_info => {
      const new_basename = name_info.basename.replace('.rt', ''); // '.rt'を''に置換
      name_info.basename = new_basename;
    }))
    .pipe(gulp.dest('./src/templates'));
});

gulp.task("watch", () => {
  return gulp.watch(rt_path, gulp.series(['rt']));
});
```

## Command line Interface
source: https://github.com/wix/react-templates/blob/gh-pages/docs/cli.md

先ほどの出力する際のoptionの例を以下に記載

```.js
// temp.rt
<h2>Hello React</h2>
```

```.js
// es6
// rt [file.rt|glob]* -m es6
import * as React from 'react';
import * as _ from 'lodash';
export default function () {
    return React.createElement('h2', {}, 'Hello React');
}
```

```.js
// commonJS
// rt [file.rt|glob]* -m commonJS
'use strict';
var React = require('react');
var _ = require('lodash');
module.exports = function () {
    return React.createElement('h2', {}, 'Hello React');
};
```


```.js
// none (default)
// rt [file.rt|glob]*
var tempRT = function () {
    return React.createElement('h2', {}, 'Hello React');
};
```

## reactに組み込む

▼ こんなrtファイルを書いて

```.js
// temp.rt
<h2>Hello react-templates</h2>
```

▼ コンパイル(es6)してこんな感じにして

```.js
// temp.js
import * as React from 'react';
import * as _ from 'lodash';
export default function () {
    return React.createElement('h2', {}, 'Hello react-templates');
}
```

▼ importしてrenderのなかでreturnする

```.js
// App.js
import React, { Component } from 'react';
import Temp from './templates/temp.js';

class App extends Component {
  render() {
    return Temp();
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
```

ブラウザに **Hello react-templates** が出力されればok




### 参考
- https://github.com/wix/react-templates#template-directives-and-syntax
- https://qiita.com/ushisantoasobu/items/2746065be3f04c81bda4
質問させてください。　python selenium スクレイピング

python3の環境でseleniumとfirefoxを使用して日本経済新聞のサイトにログインしようとしています。
ID、PASSまで記入し最後にログインしようとするとPASSがなぜか消えてしまいます。
解決策をご存知であればお教えください。
よろしくお願いいたします。

ここから～～～

from selenium import webdriver
from time import sleep

browser = webdriver.Firefox()

browser.get('https://www.nikkei.com/')

#ログイン画面へ
login_elem = browser.find_element_by_link_text('ログイン')
login_elem.click()

sleep(5)

#ID入力
email_elem = browser.find_element_by_id('LA7010Form01:LA7010Email')
sleep(1)
email_elem.send_keys('ID@xxxx')

#パスワード入力
password_elem = browser.find_element_by_id('LA7010Form01:LA7010Password')
sleep(1)
password_elem.send_keys('xxxxxx')

#ボタンをクリック
email_elem1 = browser.find_element_by_id('LA7010Form01:submitBtn')
sleep(1)
email_elem1.submit()

ここまで～～～
✂️ TypeScript/JavaScript - 配列を一定の個数ごとに分割する

Ruby の each_slice、PHP の array_chunk みたいなやつです。
例えば **[1, 2, 3, 4, 5, 6, 7]** を3個ずつに分けて **[[1, 2, 3], [4, 5, 6], [7]]** を作りたい場合などに使えると思います。

### TypeScript

```ts
function chunk<T extends any[]>(arr: T, size: number) {
    return arr.reduce(
        (newarr, _, i) => (i % size ? newarr : [...newarr, arr.slice(i, i + size)]),
        [] as T[][]
    )
}

chunk([1, 2, 3, 4, 5, 6, 7], 3) // -> [[1, 2, 3], [4, 5, 6], [7]]
```

### JavaScript

```js
function chunk(arr, size) {
    return arr.reduce(
        (newarr, _, i) => (i % size ? newarr : [...newarr, arr.slice(i, i + size)]),
        []
    )
}
```
【2019年3月】WindowsでAtomエディタのapmコマンドを使う

# やりたいこと
apmコマンドを使って
コマンドラインからAtomのパッケージをインストールする

# 対処方法

## 1. Pathを通す

* `C:\Users\ user name\AppData\Local\atom\bin`
* powershellを再起動
* `apm install [filename]`を実行
	* 「指定されたパスが存在しません」と表示
	*

## 2. Atomの再インストール

* [公式サイト](https://atom.io/)からインストーラを取得
  
## 3. Pathを通す

* ‘C:\Users\user name\AppData\Local\atom\app-1.34.0\resources\cli‘
* powershellを再起動
* `apm install [filename]`
	* 【成功】「installinng～」
水上ドローン 作りたい 3、カメラ

#カメラ
RasberryPiの標準的カメラを利用します。
[HiLetgo OV5647 5MP Raspberry Pi 3 カメラ OV5647 HDカメラモジュール Raspberry Pi に対応 A/B+/2 モデルB ケーブル](https://www.amazon.co.jp/gp/product/B01D1D0DJ0/)
[Raspberry Pi Zero カメラ用 FFCケーブル 15㎝](https://www.amazon.co.jp/%E3%83%8E%E3%83%BC%E3%83%96%E3%83%A9%E3%83%B3%E3%83%89-Raspberry-Pi-Zero-%E3%82%AB%E3%83%A1%E3%83%A9%E7%94%A8-FFC%E3%82%B1%E3%83%BC%E3%83%96%E3%83%AB-15%E3%8E%9D/dp/B07D9GPJLM)

セットアップは以下のページを参照しました。情報提供ありがとうございます。
[「Raspberry Pi Zero V1.3＋カメラモジュールでミニ定点カメラを作ろう！」](https://deviceplus.jp/hobby/raspberrypi_entry_043/)

##ハウジング
野外(しかも水上)にさらすため、カメラのハウジングが必要になります。3Dプリンタで自作している方もいるようですが、私は市販品を購入しました。
[Raspberry Pi カメラモジュール専用　クリアケース](https://www.amazon.co.jp/gp/product/B00IJZJKK4)

値段も手頃で助かりました。ただ防水ケースではないので、細かな隙間は自分で塞ぐ必要があります。
ケースに入れるとこうなります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/9a8c11a2-cac9-403c-d0fa-ec6ee2496527.png)
###注意点
このケース悪くないのですが、普通にカメラを入れると先ず利用できません。スペースがきついせいか、カメラ本体と基盤を繋ぐケーブル部が外れてしまうのです。下の赤枠の部分です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/ab9b1f63-199a-c8bf-a3ab-5d76635b03e0.png)
良く外れるらしいです。指で押すと元に戻りますがカメラケースに入れるとまた外れてしまう。
対策はカメラケーブルと、基盤の接続部の上に「詰め物」をおいてカメラケースで押さえつけるようにしました。これでOKです。

##映像伝送
これも多くの方がネットに情報を公開してくれていたのでそれを参考にしました。ありがとうございませす。
[Signal Flag "Z" Raspberry Pi 3とFFmpegでUSBカメラの映像と音声をストリーミングする](https://signal-flag-z.blogspot.com/2016/10/raspberry-pi-3ffmpegusb.html)

Rasberry PI ZERO WHにHWエンコーダーが搭載されていたため、簡単に映像伝送が出来ました。
##映像の受信
こちらはWindowsにffmpegのバイナリを入れて対応。使うコマンドはffplay。尚、ボートから映像伝送を開始する前にffplayを起動しておく必要があります。※恐らく最初の数パケットにヘッダー情報の類が入っているのでしょう。

ffplayを起動後、ボートから映像が伝送されて再生されます。このままでは遅延が大きいので、「→」キー(10秒先に進む)を押してください。これで遅延が一秒以内に収まるはずです。
その他再生時に使うショートカット

- → 10秒先に進む
- ← 10秒前に戻る
- f フルスクリーン

遅延が気になる所ですが、操縦できない程ではありません。遅延を低下させる方法は今のところ分かっていませんが、恐らく自前でネットワークの伝送処理を書く必要があるでしょう。
###ライセンスについて
Rasberry PIの公式HWに、Mpeg2のライセンスが販売されています
https://www.raspberrypi.org/products/
※ページの一番下にあります。

To enable a single Raspberry Pi to decode MPEG-2 video in hardware
らしいのですが、買う必要があるでしょうか？decodeはしていないので要らない？？？？
調査中です。
Ubuntu16でルーター作ってみる。

IP固定してもらうための口実が必要になった。
ついでになんとかしたかったセキュリティもやった。
#資材
イーサネットを4ポート持ったサーバー
諦めない心
#事前準備
いちいち画面用意するのはだるいからSSHする。公開するからもちろん公開鍵で。
それとufwを入れておく。もちろんセキュリティのため。
#構成
ポート1--ONU
ポート2--Buffalo(非公開)
ポート3--Cisco(公開)
ポート4--なし
#導入
基本的にここを参考にすればなんとかなるけど肝心なとこで詰んだ。
[ククログ](https://www.clear-code.com/blog/2010/11/19.html)-株式会社クリアコード
##詰みポイント1
IP固定して再起動した時、

```bash:sh
s@s-HP-Z210-Workstation:$ sudo systemctl restart networking
Job for networking.service failed 
```
エラーコード読んでるとデバイスの起動で何かが起こっているみたい。
再起動しても何も変化がない。

この記事がとっても役に立ちました。
http://nemupm.hatenablog.com/entry/2014/09/20/035935
これによるとIPが競合しているらしいので、

```bash:sh
s@s-HP-Z210-Workstation:$ip addr flush dev ens1f1
```
こうするとうまくいった。
##詰みポイント2
DNSの設定を元記事はBIND9でやってたけど脆弱性があるっぽいのでdnsmasq使う。
これによってコードを一部変更する。


```bash:/etc/network/interfaces
auto ens1f1
iface ens1f1 inet static
  address 192.168.20.1
  netmask 255.255.255.0
   pre-up /sbin/sysctl net.ipv4.conf.all.forwarding=1
   pre-up /sbin/iptables -t nat -A POSTROUTING -s 192.168.20.0/24 -j MASQUERADE
  pre-up /etc/init.d/isc-dhcp-server stop

   pre-up /etc/init.d/dnsmasq stop
   ##ここと

  post-up /etc/init.d/isc-dhcp-server start
   
　　post-up /etc/init.d/dnsmasq start
   ##ここを変更

　　post-down /sbin/iptables -t nat -D POSTROUTING -s 192.168.20.0/24 -j MASQUERADE
   post-down /sbin/sysctl net.ipv4.conf.all.forwarding=0
```
こうすればちゃんとDNSが動いてくれる。
##詰みポイント3
Ubuntu直下のゾーンで名前解決がうまくいかない。
ちゃんとBuffaloのDHCPでDNSサーバーを配布したし、Buffaloにも指定してある。
しかもCiscoからもうまくできないし、PCに直接DNSのIP入れてもうまくいかない。
でもUbuntuからの名前解決はできる。

解決法としてufwのポートを全部開ければうまくいった。
どのポート使って通信してるかわからないからブラックリスト方式で弾いた方が良さそう。
俺様サーバー構築記 - ArchLinux で無線LANのアクセスポイントを追記@ノートパソコン2台目(BIOS)

「[俺様サーバー構築記 - 基本方針](https://qiita.com/katz_engineer/items/dbabcff4e14e9db2b10f)」に基づいて自宅サーバーの構築を進めています。

現在は[2台目のクソ古いノートパソコンの無線LANを設定](https://qiita.com/katz_engineer/items/0bfa02e45f6f401a9696)しているのですが、アクセスポイントの追加方法を理解できましたのでその覚書。

参考文献: [5.1 設定 - 5 高度な使用方法 - WPA supplicant - ArchWiki](https://wiki.archlinux.jp/index.php/WPA_supplicant#.E8.A8.AD.E5.AE.9A)

# 設定ファイル

現在の設定は下記の通り。見るだけなら一般ユーザーでもOK。

```
$ cd /etc/wpa_supplicant/
$ cat wpa_supplicant-wlp4s0.conf
ctrl_interface=/run/wpa_supplicant
update_config=1

network={
	ssid="〈我が家の無線LANのSSID〉"
	psk="〈パスフレーズの平文〉"
}
```

pskにパスフレーズを書きますが、二重引用符 " で括ると平文でいいようです。当然セキュリティ的には注意しなければなりませんが。

で、アクセスポイントを追加する場合はこの ```network={ }``` の部分を追加していけばいいらしい。わかってしまえば簡単ですな。

# 追加方法1・平文

設定ファイルへの書き込みはrootでないとダメ。
内容的には上述の通りです。

```
$ su
パスワード:
# cat >>wpa_supplicant-wlp4s0.conf <<___
> network={
>  ssid="〈我が家のSSID〉"
>  psk="〈パスフレーズ〉"
> }
> ___

```

このようにリダイレクトで追記しても良し、適当なエディタを起動して書き加えても良し、好きにしてください。

# 追加方法2・暗号化

wpa_passphrase というコマンドがあります。これを使うと、上述の  ```network={ }``` の部分を自動生成します。その際にパスフレーズを暗号化してくれます。

```
$ su
パスワード:
#  wpa_passphrase 〈我が家のSSID〉 〈パスフレーズ〉
network={
	ssid="〈我が家のSSID〉"
	#psk="〈パスフレーズ〉"
	psk=3fca43d4b26bcfac1376f92b8ae728be06fad55622098bc2e3beeabb705477f7
}
```

これを使用して下記のようにすると、パスフレーズの平文が無くなります。

```
# wpa_passphrase 〈我が家のSSID〉 〈パスフレーズ〉 | grep -v "^\s*#" >>wpa_supplicant-wlp4s0.conf 
```

# 無線ネットワーク再起動

設定ファイルを修正したらサプリカントを再起動、そして確認。

```
# systemctl restart wpa_supplicant@wlp4s0
# ip addr show wlp4s0
3: wlp4s0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
    link/ether 00:11:22:33:44:5f brd ff:ff:ff:ff:ff:ff
    inet 192.168.1.2/24 brd 192.168.1.255 scope global dynamic wlp4s0
       valid_lft 12321sec preferred_lft 12321sec
    inet6 2400:7800:4dc8:2700:219:d2ff:fe97:fa5f/64 scope global dynamic mngtmpaddr noprefixroute 
       valid_lft 13805sec preferred_lft 13805sec
    inet6 fe80::219:d2ff:fe97:fa5f/64 scope link 
       valid_lft forever preferred_lft forever
```

ブラウザでネットサーフィンも出来ます。やったね:thumbsup_tone1:
水上ドローン 作りたい 2、Rasberry PI セットアップ、モーター制御

#Rasberry PI ZERO WH
使用ボードはRasberry PI ZERO WH。使用OSはRasbianOSでい行きます。

##電源について
ボートに搭載するので電池を使用することになります。先ず入力電源の仕様ですが、wikipediaの記載では 1.2 A (6.0 W) となっています。つまり5V、1.2Aが必要という事ですよね。電池種類は性能からいうとリチウムイオンがいいのでしょう。ですが扱いが難しいらしいのでエネループProを選択。USBへの変換はコンビニで売っている乾電池を使ったモバイルチャージャーを利用します。ボートに積み込むまではずっとこれを使っていました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/34df61db-696e-e674-1fd0-c4c85d764dd3.png)

ですが大きすぎてボートに収まりません。実際ボートに組み込む場合は別の方法を使う必要があります。
USBへの変換と、5Vへの昇圧は以下のモジュールに任せる事になりました。
[0.9-5V 600mA DC-DCステップアップ昇圧電圧コンバータモジュール USB充電器](https://www.amazon.co.jp/gp/product/B06W9HHWSM)
※後から気づいたのですが、これでは出力電流が足らないですね。

ここからは、水上ドローンの実現に必要な機能、モジュールを一つ一つ確認していきます。
#モーター制御
##配線
モーターの配線を途中で切断、コネクタを付けてそこからブレッドボードに挿してテストしました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/359316/46602723-d268-cc5d-82ea-3ecdc0a2c394.png)
##モータードライバ
左右モーターの制御に、モータードライバ「TA7291P」を2つ使用。電源もそれぞれ２つ用意。
配線に関しては以下のサイトを参照した。解りやすくて助かりました。ありがとうございます。
[カイワレスタイル Raspberry Pi 2でDCモーターを制御する](http://kaiware007.hatenablog.jp/entry/2015/07/07/024930)

上記サイトで紹介してもらった例はモーター1つだけでしたが、これを2つに増やします。する事は同じですが、どのPINを使っていいのか情報が無く困りました。特にPWM制御が可能なPinに関する情報がなかなか見つかりません。結局以下のサイトに乗っていました。
[Rasberry PI pinout](https://pinout.xyz/)

pwm0、pwm1と記載されているPinであれば、PWM出力が可能です。尚 pwm0 と書かれているPinは2つ有りますが、どちらも同じ値になるそうです。モーターごとに別々の出力をしていたいのならば、pwm0、pwm1と分かれている必要が有ります。

#配線
配線作業の整理のために書いた図です。
![haisen motordriver.jpg](https://qiita-image-store.s3.amazonaws.com/0/359316/90dd2e9d-f94e-3930-1f44-1e6e23e510c3.jpeg)

これをどうやってボートの狭い筐体に埋め込むかが問題です。

#感想、雑感
初めての電子工作だった事も有り苦戦しました。意図したとおりに動かなかった時、何をチェックすればいいのか？全く勘が働かないのです。ソフトウェア制作時はデバッガを利用して対応しますが、電子工作時はテスターがデバッガーになってくれる事を学びました。
私が買ったのはこれです。
[Crenova デジタルマルチメーター 電圧・電流・周波数・抵抗・導通測定テスター](https://www.amazon.co.jp/gp/product/B00KXX2OYY/)

初心者の方は使い方を勉強することをお勧めします。テスターの使い方は以下のサイトを参考にしました。
[始める電子回路](http://startelc.com/elcLink/tester/elc_nArtcTester.html)

モーターが動かない時、電力が足らないから動かないのか？、そもそも出力される設定になっていないからか？等をある程度把握できるようになりました。
Railsチュートリアルを完走するために色々と対策してみた

以前Railsチュートリアルをやっていたことがあるのですが、難しくて挫折してしまいました。
今回は挫折することなく、最後までやり遂げたいと思っています。

前回と同じようにやってもたぶんまた挫折してしまうので、ちょっと工夫をしてみようと思います。

その工夫とは、**「ハードルを下げること」**です。

前回は難しくて挫折してしまったので、今回は簡単にして挫折を防ぎます。
また、挫折理由として、難しかったこと以外にもいくつか要因があったので、その辺も考慮します。

挫折理由を羅列してみると、
・難しかった
・エラー処理に時間がかかりすぎて嫌になった
・全然進まなくてモチベ下がった
こんなところですかね。

これらを一言で言うと、**完璧主義になりすぎていた**と言えるかもしれません。

完璧主義はうまく機能すれば大きな成果が得られるかもしれませんが、僕の場合あまりうまく機能した試しがありません。。。
完璧であろうとするあまり、少しでもうまくいかないと嫌になってしまうんですよね。

**完璧でありたい→うまくいかない→完璧じゃなくなる→嫌になる→やめる**

のような流れになってしまうことが多々あります。

知識習得が目的だったのに、いつの間にか完璧であることが目標になってしまうんです。
知識習得が目的であれば、うまくいかなくても、ダサくても完走する方がずっといいはずです。

そうならないように、対策をしてみます。

具体的には、
**・難しかった
　→難しいところは飛ばす
・エラー処理に時間がかかりすぎて嫌になった
　→質問できるサービスを購入し、質問できる環境を作る
・全然進まなくてモチベ下がった
　→「飛ばしてもいい」ところはどんどん飛ばす**
というような対策をしてみます。

また、
**・演習をやらない
・testをやらない
・GitHub (Bitbucket)へのプッシュはやらない**
というのも設けてみます。

簡単なものはやりますが、数十分格闘するようなのは飛ばそうかなと。

これだけ作業量を減らせば完走はできると思います。

1周目はこのような感じで完走を目指し、2周目以降でより深く丁寧にやっていこうと思います。