OmniAICreator/Qiita-1.07M huggingface dataset:
Ruby足し算

#ruby足し算
#入力される値
* a
* b

#期待する出力
* aとbを足した数を出力

#入力例
* 1 1　　(1と1です)

#出力例
* 2

```java:パターン１
a = gets.to_i
b = gets.to_i
puts a + b
```
```java:パターン2
a = gets.to_i
b = gets.to_i
num = a + b
puts num
```
```java:パターン3
a = gets
b = gets
puts a + b
```
```java:パターン4
a = gets
b = gets
puts (a + b).to_i
```
```java:パターン5
a = gets.to_s
b = gets.to_s
puts a + b
```
# パターンといえるほど大した事はしてないが、なんせただの「１＋１」ができない。おそらくpai○a独特なルールで縛りを受けてるからテストが通らないんですね〜、、本日はここに4時間ほど時間をかけて収穫は0でした。無念

#追記
```java:これでできました
s = gets.split(' ').map(&:to_i)
result = s[0] + s[1]
puts result
```
#以上
Inkscapeを手探る

> この記事は，東京大学工学部電子情報工学科・電気電子工学科(通称EEIC)の3年後期実験の一つである「大規模ソフトウェアを手探る」のレポートとして，書かれたものです。

[「大規模ソフトウェアを手探る」](https://doss.eidos.ic.i.u-tokyo.ac.jp/)という実験は，2–3人のチームで著名で大規模なOSSを1つ選んで，何か変更したり機能拡張したりするという実験です。　例年沢山の版画様々なOSSで開発をしています。例年のレポートは[こちら](https://doss.eidos.ic.i.u-tokyo.ac.jp/#reports)から確認できます。[2020年度レポートはこちら](https://doss-gitlab.eidos.ic.i.u-tokyo.ac.jp/doss/doss2020)

私たちの班はOSSのお絵かきソフトであるinkscapeを題材として選択し、機能拡張を目指しました。

- [Draw Freely \| Inkscape](https://inkscape.org/)
- リポジトリ：[Inkscape / inkscape · GitLab](https://gitlab.com/inkscape/inkscape)

私たちはバグ修正を１つと、機能追加を１つ行い、バグ修正の方はMerge Requestを提出し、本リポジトリにマージされました。
## 開発ブログ目次
今回取り組んだ開発をいくつかのパートに分けてブログ記事にしました。
将来Inkscapeで開発したいと思っている方の参考になれば幸いです。


### 環境構築
[**Inkscapeの環境構築 - Qiita**](https://qiita.com/wolfram1293/private/3c7d88fdd0ba0a6b8111) 
macとUbuntuの二つのOSで環境開発をしました。


### VSCodeを用いたデバッグの仕方
[**Visual Studio Codeを使ったデバッガ導入とデバッグ実行 - Qiita**](https://qiita.com/wolfram1293/private/cc451b87d74875d6318e)

### 実際のコード変更
[**Inkscapeの開発に参加した - Qiita**](https://qiita.com/ebiyuu1121/private/991d65f6c975887a7f22)
初めて見るソースコードに対して実際にどのように編集を加えていったのかを示します。

### Issueの見つけ方
[**OSS開発初めかた (Issueの見つけ方) - Qiita**](https://qiita.com/momoka_0122y/private/64d35862a357d42c3381)
Issue一覧から自分たちに解決できそうなバグを見つけてそれに取り組むことにしました。Issueの探し方をまとめました。

### MRを出すまで
[**OSS開発初めかた (GitLabにある本家にマージ) - Qiita**](https://qiita.com/momoka_0122y/items/4d04c8f2d94d591f938a)
取り組みたいOSSを見つけてから、実際にバグを直したコードがマージされるところまでをまとめました。





## 感想
はじめてのオープンソースソフトウェア開発思うようにでバグがいかず班員に頼りきりの状態でした。今後自分でライブプレビュー機能の追加などInkscapeに機能追加をしてみたいです。 @momoka_0122y
今回、OSSのデバッグ、機能追加を行うのは初めての経験であり、自分ひとりでは大変でしたが、班員と協力しバグの修正、機能追加などを行う事ができいい経験になりました。この経験を今後も生かしていきたいです。@wolfram1293
「大規模ソフトウェアを手探る」というテーマの通り、たくさんのソースコードから該当箇所を見つけ出すのが最も大変であった。しかし、どんなソフトも結局それぞれの機能は普段使うような言語で書かれているということを実感できた。@ebiyuu1121
## 参考にした先輩方のレポート
過去の「大規模ソフトウェアを手探る」でInkscapeを選んだ先輩方のレポート
- [Inkscape にナイフ機能を付けてみた 1/4 \- UI をいじる編 \- esudo’s diary](http://esudo.hatenablog.com/entry/2015/11/05/024702)
- [Inkscapeを手探る \- くコ:彡](https://ika2018.hatenablog.com/entry/2018/11/05/114408#fn-6316abf8)
- [inkscapeで全レイヤー間で同期して動く図形を追加した話 \- dried\_doss’s diary](https://dried-doss.hatenablog.com/entry/2019/11/05/000722)
- [team\_denki\-kei\_inkscape’s diary](http://team-denki-kei-inkscape.hatenablog.com/)
【メモ】研究室のサーバーで複数バージョンのPython3の環境整備

研究室のサーバー管理者となって実質丸々1台を管理することになったので、そのときのことのメモ。色々な都合があり、一般ユーザーで言う所のローカルインストールで行ったので、読み替えれば一般ユーザーにも応用可能。

<h2 id="environment">環境・条件</h2>

```
$ cat /etc/issue
Ubuntu 18.04.5 LTS \n \l
```

<h2 id="procedure">手順</h2>
<h3>依存ソースのダウンロード・解凍</h3>

以下、ローカルtcl, tkは結果的に使用せず。（Pythonが特にパッケージ管理システムで正常に入っていないマシンにpythonをローカルインストールするなら必要だと思う。）

```Bash:/usr/local/src
# wget https://www.openssl.org/source/openssl-1.1.1h.tar.gz
# wget --no-check-certificate https://prdownloads.sourceforge.net/tcl/tcl8.6.10-src.tar.gz
# wget --no-check-certificate https://prdownloads.sourceforge.net/tcl/tk8.6.10-src.tar.gz
# wget --no-check-certificate https://www.python.org/ftp/python/3.5.10/Python-3.5.10.tar.xz
# wget --no-check-certificate https://www.python.org/ftp/python/3.6.12/Python-3.6.12.tar.xz
# wget --no-check-certificate https://www.python.org/ftp/python/3.7.9/Python-3.7.9.tar.xz
# wget --no-check-certificate https://www.python.org/ftp/python/3.8.6/Python-3.8.6.tar.xz
# wget --no-check-certificate https://www.python.org/ftp/python/3.9.0/Python-3.9.0tar.xz
# tar xzf openssl-1.1.1h.tar.gz
# tar xzf tcl8.6.10-src.tar.gz
# tar xzf tk8.6.10-src.tar.gz
# tar xf Python-3.5.10.tar.xz
# tar xf Python-3.6.12.tar.xz
# tar xf Python-3.7.9.tar.xz
# tar xf Python-3.8.6.tar.xz
# tar xf Python-3.9.0.tar.xz
# rm *.tar.xz *.tar.gz
```

<h3>各パッケージのインストール</h3>

```Bash:/usr/local/src
# cd openssl-1.1.1h
# ./config --prefix=/usr/local/ --openssldir=/usr/local/ssl/ shared
# make
# make test
# make install

OpenSSLをリンカーの検索対象に追加
# echo "LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/lib" >> ~/.bashrc
# openssl version
OpenSSL 1.1.1h  22 Sep 2020

# cd ../tcl8.6.10/
# mkdir build && cd build
# ../unix/configure --prefix=/usr/local/
# make
# make test
# make install

# cd ../../tk8.6.10/
# mkdir build && cd build
# ../unix/configure --prefix=/usr/local/
# make
# make test --> 何かエラーが出た。けどinstallは通った。
# make install
```

<h3>Pythonのインストール・リンク作成</h3>

```~/.bashrc
function pyconf (){
    ./configure --prefix=/usr/local/$1 --with-ensurepip --with-openssl=/usr/local/
}

ソースからビルドしたtcltkを使うならこっち。
function pyconf (){
    ./configure --prefix=/usr/local/$1 --with-ensurepip --with-openssl=/usr/local/ --with-tcltk-includes="/usr/local/include" --with-tcltk-libs="/usr/local/lib -ltc8.6 -ltk.8.6"
}
```

```/usr/local
# mkdir python390
# cd src/Python-3.9.0
# pyconf python390
# make
# make install
# ln -nLs /usr/local/python390/bin/python3.9 python390
# ln -nLs /usr/local/python390/bin/pip3 pip390
同様の手順をを各バージョンについて行う。
```
もしmakeの時点で、「"-fPIC"をつけてコンパイルしてね。」的なメッセージでエラーになっても、make cleanしてもう一度やれば成功する（おそらくメモリをきれいにしたりメモリの状態を変えたりすると上手くいく場合がある。）可能性があるので試すべし。

<h2 id="reference">参考・関連ページ</h2>
<ul>
<li><a href="https://qiita.com/silverskyvicto/items/dca3d4b985829b4b5f1f">OpenSSL をソースからビルドする</a></li>
<li><a href="https://qiita.com/maholoba/items/62461302584ab7975599">Pythonをローカルインストール</a></li>
<li><a href="https://qiita.com/Masahito/items/0f145017d517d551f66e">macOS +homebrew でopensslをソースからビルドしたPythonで使う</a></li>
<li><a href="https://qiita.com/Esfahan/items/913fdf27ee4a564b1936">【Python2to3アップデート方法】Python3系のインストール</a></li>
</ul>
WebRTC 単語集

# WebRTC とは
Web Real-Time-Communicationの略です。
HTML5から策定されたAPI規格で、リアルタイムにビデオ/オーディオ/データをやり取りを行うのが特徴です。
プラグイン無しでボイスチャットやビデオチャットをブラウザ上で実現可能になります。

通信方法は、P2P、MCUやSFUがあります。
P2P通信では、複数人つなぐと端末の通信量と負荷がかかってしまうためサーバーを経由する方法として、MCUやSFUがあります。

# P2Pについて
P2P通信でデータをやり取りするには、以下のサーバーを使います。

- シグナリングサーバー  
仲介サーバー。通信開始時に接続してWebSocket通信を開始する。
- STUNサーバー  
NAT配下にあるPCが自身のIPアドレス/ポート番号を調べるためのサーバー。
- TURNサーバー  
P2P通信が出来ない場合の代わりの中継サーバー。


以下のデータを作成して、シグナリングサーバー経由で相手に送信します。

- SDP (Session Description Protocol)  
メディアのストリーミング情報のフォーマットを規定するプロトコル。  
メディアタイプ、コーデック、帯域幅などの情報。  
接続開始したブラウザからofferを開始しSDPを送信して、受け取ったブラウザでanswerを開始しSDPを送信することで互いのSDPを登録する。  
- ICE (Interactive Connectivity Establishment)  
自身が接続できる相手ブラウザまでの通信経路の情報。  
STUNサーバーによりIPアドレス/ポート番号を把握してICEを作成し送信することで互いのICEを把握する。

詳しい流れは、[WebRTCの技術解説 公開版](https://www.slideshare.net/nttwestcon/20140805-technical-descriptionofwebrtcpublicedition) のp.47 - 93 が分かりやすいです。 

# MCU について
Multipoint Control Unitの略です。
複数クライアントからのメディアデータをサーバーで合成して他のクライアントに送ります。
送るときに、サーバーでデータの合成を行うためサーバーのCPU使用率が高くなり、画質の劣化が発生します。
SFUが出る前はMCUが主流だったようです。

# SFU について
Selective Forwarding Unitの略です。
クライアントからのメディアデータを加工せずにそのままサーバー代理で他のクライアントに送ります。
MCUよりサーバーのCPU使用を抑えるメリットがあります。

詳しくは、[SFUの話](https://www.slideshare.net/tnoho/sfu) が分かりやすいです。

# Track とは
WebRTCのメディアの最小の単位であり、通信経路でやり取りするデータです。
アプリケーションはTrackで構成されたStreamの単位で扱います。
例えば、MediaStreamは、1つ以上のMediaTrackで構成されています。

StreamにはメディアソースごとにTrackが構成されています。
更にTrackは、同一ソースのメディアが束ねられています。
例えば、ビデオ会議のMediaTrackには、カメラとマイクで、VideoTrack、AudioTrackが存在します。

詳しくは、[WebRTCにおけるメディアの取り扱い - Qiita](https://qiita.com/udonchan/items/77ca19f9aa8420e769c8) が分かりやすいです。 

# 参考文献
[WebRTCコトハジメ - Qiita](https://qiita.com/yusuke84/items/286f569d110daede721e)  
[WebRTCの基本とP2P通信が成立するまでを学ぶ - Qiita](https://qiita.com/daitasu/items/ae21b16361eb9f65ed43)  
[WebRTC SFU コトハジメ](https://gist.github.com/voluntas/4d2bd3e878965bdd747a)  
[Getting started with remote streams  |  WebRTC](https://webrtc.org/getting-started/remote-streams?hl=en)
IoTシステムのログを時間修正しながら表示する

IoTシステムで、例えば温度を記録するロガーを作ることを想定する。

 - 最初に電池を装填
 - 内部カレンダーはゼロからスタート
  - ゼロ：ex, 1970/01/01 00:00:00 
 - １ヶ月ないし１年間ログを取る
 - スマホで接続してログを閲覧する
 - ログ閲覧時にスマホから時刻情報を取得する
 - ロガーはログをスマホに送信する
 - 送信時にロガーはログの時刻情報を補正する
 

C で作るとややこしいけれども、


を元として作ってみたのがこちら。



```C

#include <stdio.h>
#include <time.h>
time_t now_time,cal_time,calib_time,diff_time,loged_time,loged_fixtime;
int main(int argc, char **argv) {
  struct timespec ts = {};
  // 以前に記録した時刻データ
  // ログに記録された時刻が 1604319935 だったとする。
  loged_time = 1604319935;
  // Mon Nov  2 21:25:35 2020

  // 現在のシステム内カレンダ時刻を取得する
  now_time=time(NULL);
  printf("          NOW:  %s", ctime(&now_time));
  // 何らかの形で正確な時刻を入手する
  // 例ではスマホから受信する代わりに、
  // 100秒の補正をかけて新しい時刻データを作っている
  calib_time = now_time+100;
  // 新しい時刻データとシステム内カレンダの差を保管しておく
  diff_time=difftime(calib_time,now_time);
  printf("time diff: %ld \n",diff_time);
  // 新しい時刻データをシステム内カレンダにセットする
  // 処理系によって命令は異なる ここではLinux系の処理
  ts.tv_sec = calib_time;
  if( clock_settime( CLOCK_REALTIME, &ts) == -1 ) {
       printf( "setclock error" );
       return 1;
  }
  // 以前に記録した時刻データを表示
  printf("      LOGTIME:  %s", ctime(&loged_time));
  loged_fixtime=loged_time+diff_time;
  // 以前に記録した時刻データを補正をかけて表示
  printf("FIXED LOGTIME:  %s", ctime(&loged_fixtime));
  return 0;
}
```

# 注意点

- 時刻出力はここでは安直に ctime を使って localtime で扱っているが、 タイムゾーンをまたがるログや、タイムゾーンの不明なシステムで扱うときには全てを UTC ベースで扱うのが望ましい。（ローカルタイム時刻をGMTとして扱う）

cf.,「UTC ベースで時間データを扱う(IoTプログラミング)」
https://qiita.com/nanbuwks/items/e3714f6b0b6b0b8585f4



- 時刻の差を求めるときには time_t を直接減算ではなく、difftime() を使う。

cf.,「MSC05-C. time_t 型の値を直接操作しない」
https://www.jpcert.or.jp/sc-rules/c-msc05-c.html
【SQL学習】テーブルからデータを取り出す

### はじめに
SQLの学習をする上で、重要な部分を備忘録として書き留めています。

### SELECT文について
データベースのデータを検索して、データを取り出す操作を**問い合わせ**という。
この問い合わせは、SQLではSELECT文を使って表現する。構文は以下です。

`SELECT 取得したいカラム名 FROM 対象のテーブル名;`

SQLは句という単位で分割する。SELECT文ではSELECT句とFROM句に分ける事ができる。

#### 全てのカラムを取り出す場合

`SELECT * FROM 対象のテーブル名;`

#### 指定したカラムを複数取り出す場合

`SELECT 取得したいカラム名その1,取得したいカラム名その2,取得したいカラム名その3 FROM テーブル名;`

の様にカンマ(,)で区切って指定する。

#### カラムに別名をつける

カラム名をわかりやすく表示する為に、カラムに別名をつけて表示する事ができる。

`SELECT 指定したいカラム AS 別名 FROM 対象のテーブル名;`

上記はカラムどうしで計算した結果を出力する際などに重宝する。

#### 重複した行を除いて抽出する

`SELECT DISTINCT 指定したいカラム名 FROM 対象のテーブル名;`

### WHERE句について

SELECT文に**WHERE句**を使えば、検索条件に特定のレコードを指定して、絞り込む事ができる。

`SELECT 取得したいカラム名 FROM 対象のテーブル名 WHERE 取得したいレコードの条件;`

#### 演算子を使う

演算子の種類と一例

| 演算子の種類 | 説明 | 一例 |
| --- | --- | --- |
| 算術演算子 | 四則演算を行う記号 | +,-,*,/ |
| 比較演算子 | 値の比較を行う記号や文字列 | =,<,> |
| 論理演算子 | 値を比較して真か偽かの判別を行う文字列 | NOT,AND,OR |

#### 算術演算子

SQLでは算術演算子を使って、テーブルから取り出した値を計算して表示させる事ができる。
SELECT句、WHERE句、ORDERBY句などと使う事ができる。

#### 比較演算子

値が等しいかどうか、また大きさの比較を行う記号や文字列。WHERE句の検索条件に使う事ができる。

| 比較条件 | 意味 |
| --- | --- |
| = | 等しい |
| !=, <> | 等しくない |
| >= | 以上 |
| <= | 以下 |
| > | より大きい |
| < | より小さい |
| BETWEEN a AND b | a以上b以下 |
| NOT BETWEEN a AND b | a以上b以下の範囲外 |
| IN (リスト) | リスト内のいずれかと等しい |
| NOT IN (リスト) | リスト内のいずれとも等しくない |
| IS NULL | NULL値である |
| IS NOT NULL | NULL値でない |
| LIKE | 文字パターンと一致する |
| NOT LIKE | 文字パターンと一致しない |

※「=」は等しいを意味するが**対象がNULLの場合は例外**
NULLの場合は「IS NULL」「IS NOT NULL」を使う

#### ワイルドカード

「LIKE」を使用すると、文字パターンと部分的に一致しているかを判定できる。
その際に、確定していない検索文字パターン（いわゆる曖昧な検索文字列）を判定する際に**ワイルドカード**という特殊な記号を使って検索できる。

| 記号 | 説明 |
| --- | --- |
| % | 0文字以上の文字列 |
| _ | 任意の一文字 |

**部分一致**

`SELECT 取得したいカラム名 FROM 対象のテーブル名 WHERE 検索対象のレコード LIKE '%文字列%';`

**前方一致**

`SELECT 取得したいカラム名 FROM 対象のテーブル名 WHERE 検索対象のレコード LIKE '文字列%';`

**後方一致**

`SELECT 取得したいカラム名 FROM 対象のテーブル名 WHERE 検索対象のレコード LIKE '%文字列';`

※ワイルドカード記号自体を検索したい場合は`\`でエスケープ処理を行う

#### 論理演算子

値同士を比較して、真か偽かの判別を行う文字列のこと
WHERE句の条件に様々な条件を組み合わせる事が可能

|論理条件|意味|
| --- | --- |
| NOT | 否定 |
| AND | 論理積 a AND b(aかつb)|
| OR | 論理和 a OR b(aまたはb)|

#### 演算子の優先順位

検索条件を指定する際に複数の条件を設定する事ができる。この時に演算子には**優先順位**があることに注意する必要がある。

| 優先順位 | 条件の種類 |
| --- | --- |
| 高 | =,>,>=,<,<= |
|  | IS [NOT] NULL |
|  | [NOT] LIKE |
|  | [NOT] IN |
|  | [NOT] BETWEEN |
|  | <> |
|  | NOT |
|  | AND |
| 低 | OR |

### ORDER BY句について

DBMSのデフォルトの取り出し方は特に決まっていない。故にデータの取り出し方を決めたい場合は`ORDER BY`句で指定する事ができる。

`SELECT 取得したいカラム名 FROM 対象のテーブル (WHERE 取得したいレコードの条件 ) ORDER BY 並べ替えの基準にしたいカラム名 キーワード;`

ORDER BY句で指定できるキーワードは2種類

| キーワード | 説明 |
| --- | --- |
| ASC | 昇順に並び替え |
| DESC | 降順に並び替え |
ActionText機能追加方法

エディターにActionText機能追加

ActionTextを使用することでエディターを使いやすくしてみます

始めにimagemagickをインストールします。
画像の大きさや文字を入力するために必要なツールです。

ターミナルで

```
$brew install imagemagick
```
インストール後、gemfileに、

```
gem 'image_processing', '~> 1.2
```

を記載。その後↓を実行

```
$bundle install
```
ActionTextをインストール

```
$bundle exec rails action_text:install
```
を実行。
ActionTextは、JavaScriptを実行しないと使えないためライブラリーのインストールをします。

```
$ bundle exec rails webpacker:install
```

最後にActionTextのテーブルが作られているので

```
＄ rails db:migrate
```
を実行

ActionTextを使用して、強化したいエディターのある記事クラスに

```
has_rich_text :カラム名
```
を記載。
後は、HTML・CSSを整えれば完成。

<img width="50%" alt="スクリーンショット 2020-11-02 23.25.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/747599/a7b639ec-7a7a-d2c5-46dc-1d58a9966632.png">
こんな感じになりました。
IFTTT「トリガーして」を無くすためのAlexa定型アクション設定

#定型アクション設定
IFTTTのAmazon Alexa設定時に「Say a specific phrase」を設定した際（詳しくはこちらhttps://qiita.com/m3do/items/f81283cdf1ec96e0131f）、音声操作について、必ず「〇〇をトリガーして」というように、必ず「トリガーして」というフレーズが必要になるのが、嫌だったので、定型アクションで解決した。

定型アクション名を入力、実行条件を設定をタップ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737339/30016d8c-5da1-92de-3985-a5e7d0518a27.png)

開始フレーズを設定から定型アクションを実行するためのフレーズを設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737339/7b8bc7d9-f965-835c-6193-64848f76dc02.png)

アクションを追加の+

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737339/2d534abf-04e7-d9f6-b2ff-dd924b575deb.png)

IFTTT

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737339/52116e47-50d2-c91c-8366-6b81ef7ea939.png)

作成済みのIFTTTアプレットを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737339/3aa9be4f-c314-bf24-4721-b6e61b14c684.png)

以上。
Flutterで特定のウィジェットだけエラーが出てしまう場合、channelの問題かも

# 現在のchannelではサポートされていないウィジェットだった

他の人が作ったプロジェクトを自分の環境で動かそうとすると、あるウィジェット（ScaffoldMessenger）にエラーが出てしまうことがありました。
色々調べたところ、FlutterSDKのchannelの問題だったようです。

# Flutterのchannelについて

詳しくはこちらの公式ページに書いてあります。
https://github.com/flutter/flutter/wiki/Flutter-build-release-channels

FlutterSDKのchannelにはmaster, dev, beta, stableの4つがあり、この順で最新機能が早く使えるようになるようです。
最新機能が使える分、masterなどは検証がまだ不十分な状態のものもあるため、安定して動かしたい製品などの場合はstableの利用が推奨されています。
まずは最新の機能がmasterに出る→少し検証されたらdevに入る→さらに検証されて毎月第一月曜日リリースのbetaに登場→そこで確認されれば四半期に一度リリースのstableへ、といった感じのようです。

リリース情報はこのページです。
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos

今回は、ScaffoldMessengerはdevではリリースされていたものの、自分が使っていたstableのchannelではまだ使えなかったためにエラーが出ていました。
channelをdevに切り替えたところ解決しました。

# channelの変更

ターミナルで

```
flutter channel dev
```
のように打つことでchannelを変更できます。（devの部分を任意のchannel名に変更）

また、現在のchannelは

```
flutter channel
```
で確認できます。

ちなみに、channel変更後に「一応Flutterをupgradeしといた方がいいよ」的な文言が出たので

```
flutter upgrade
```
でFlutterSDKをアップグレードしておきました。
IFTTT×Amazon Alexa×Google Spread Sheetでできることまとめ

#設定項目は多いがカスタマイズ内容は限られる「Alexa」
好きなフレーズを使って操作できるアプレットは「Say a specific phrase」のみ。その他の機能はToDoリストやショッピングリスト、音楽などAmazon Echoの機能と連動して動作する仕組みになっている。

「Say a specific phrase」の設定方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737339/dcac8879-912a-135f-e5da-f7140d6da370.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737339/7d4fcc71-7337-7540-1fa4-a85c227d40d3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737339/41496f40-2390-ebc5-db25-39928c3b1241.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737339/7e46988d-849a-b1e8-6d3a-f1e12e4382e4.png)


#注意！複数のフレーズを登録することはできない！


参考にした記事
https://kaden.watch.impress.co.jp/docs/column/smart/1134476.html
SPSS ModelerのPythonスクリプトで、スーパーノード内のノードの設定を変更する

##スーパーノードとPythonスクリプト
SPSS Modelerで長いストリームを整理する（見やすくする）のに、スーパーノードを利用することがよくありますが、Pythonスクリプトでノードの設定を変更するときに、スーパーノード内のノードを扱う方法がわからず調査しました。
（スーパーノードを展開してしまえば解決しますが、この時はスーパーノードの数が多くて、できればスクリプトで解決したかったのです。）
備忘録も兼ねてその実現方法を残しておきます。



##まずはマニュアル
結論からいうと、そのやり方はマニュアルにしっかりと載っており、すぐに見つかりました。

[IBM SPSS Modeler 18.2 Python スクリプトとオートメーション・ガイド](http://public.dhe.ibm.com/software/analytics/spss/documentation/modeler/18.2/ja/ModelerScriptingAutomation.pdf)

>P.383 抜粋
**カプセル化ノードのプロパティー設定**
スーパーノード内の子ダイアグラムにアクセスすることにより、スーパーノードの中にカプセル化された特定のノードのプロパティーを設定できます。例えば、データを読み込むためにカプセル化された可変長ファイルのある入力スーパーノードがあるとします。以下のようにして、子ダイアグラムにアクセスし、関連ノードを検索することにより、読み込みファイルの名前 (full_filename プロパティーを使用して指定) を渡すことができます。

>```
childDiagram = source_supernode.getChildDiagram()
varfilenode = childDiagram.findByType("variablefile", None)
varfilenode.setPropertyValue("full_filename", "c:/mydata.txt")
```

##実践編
上のマニュアルだけ見てさらっと理解できてしまう人は、もうこの先は読まなくても大丈夫です。もう少し具体的に知りたい方はもう少しお付き合いください。

###例題ストリーム
①購買履歴データから、RFM集計する、こんなストリームがあって
<img width="300" alt="WS0057.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/361272/85ea0092-1ffd-9966-6a51-efdfaab41b8e.jpeg">
②スーパーノード（①の☆型ノード）の中身がこんなんだとします。
<img width="900" alt="WS0058.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/361272/0cf2ef31-2c6b-8da5-9668-c8083723020c.jpeg">

スーパーノード内の"RECENCY"となっているフィールド作成ノードの中身は今こうなってます。
<img width="600" alt="WS0061.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/361272/b78affdd-74af-886d-6d15-906c24352bf3.jpeg">


やってることは、最新の購入日が、2020/10/1を基準に何日前かを計算しています。
(SDATEが購入日。SDATE_Maxは事前の集計ノードで顧客毎の最新購入日になってると思ってください。)

ここで、基準日の2020/10/1を、ストリームの実行タイミングによって変更したい、例えばいつ実行しても直前の日曜日を基準に集計したい、などの要望があったとします。

その場合、Pythonスクリプトで datetime_date(2020, 10, 1) の部分を、基準としたい適切な日付に変えればいいのですが、スーパーノード内のノードは直接 findByXXXX() で扱えないので、先ほどのマニュアルで見た一手間が必要になります。

以下、Pythonスクリプトの例です。

```
import datetime
stream = modeler.script.stream()

# 基準日設定
RefDate = datetime.date(2020, 10, 10)

# ストリーム内のスーパーノードを特定
rfm_process_super_node = stream.findByType("process_super", u"RFM集計")
# スーパーノード内に展開されるダイアグラム（ストリームの事？）をインスタンス化
rfm_child_diagram = rfm_process_super_node.getChildDiagram()
# スーパーノード内のフィールド作成ノードを特定
rfm_derive_node = rfm_child_diagram.findByType("derive", u"RECENCY")
# 特定したフィールド作成ノードに対して基準日を変更
rfm_derive_node.setPropertyValue("formula_expr", u"date_days_difference(SDATE_Max,datetime_date(" + str(RefDate.year) + "," + str(RefDate.month)  + "," + str(RefDate.day) + ")")


```

"stream"が、①のストリーム、"rfm_child_diagram"が②のスーパーノード内のストリームだと理解すれば少しわかりやすいと思います。
<img width="600" alt="WS0068.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/361272/0df2bdf2-47fb-f1e3-80ef-984a691e68cc.jpeg">
このスクリプトをストリーム内に仕込ん(ツール ⇒ ストリームのプロパティー ⇒ 実行)で実行すれば、基準日が2020/10/10にかわります。今回は簡略して基準日を指定してしまいましたが、基準日をどうするかのロジックは要件に合わせて考えてください。

下は、スクリプトを流して変更されたノードの設定です。うまくいきました。
（決して手で書き換えたわけではありません！）

<img width="600" alt="WS0062.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/361272/1aef661a-afdc-cf5d-f68c-8b9f7b988528.jpeg">


※「こんな短いストリームなら、わざわざスーパーノードにしなくてもいいんじゃない？」などの突っ込みはどうかご遠慮ください。

##試した環境

Modeler 18.2.1
Windows 10
[SQL] Havingを使って中央値を求める

## なぜ

分析系の業務で、(redash)MySQLに入っているあるデータの中央値を求めようと思って、「mysql median関数」みたいに記事を探しても、mysqlにはmedian関数が実装されていないので、自前で中央値を求める必要があった。


一回きりだったら、抽出したデータをcsvで吐き出してエクセルやら、スプレットシートで作業する方が早い。（MEDIAN関数がちゃんとあるので一発で中央値出せる）


※余談だが、PostgreSQLでも`percentile_cont`という関数があるので、比較的簡単に中央値を求めることができるらしい([ソース](https://www.postgresql.jp/document/9.4/html/functions-aggregate.html#FUNCTIONS-ORDEREDSET-TABLE))




## 環境
redash4.0.1
MySQL(5.6.40)　← 古い。。。

※ローカルで環境を立ち上げるのが面倒だったので、以下の実例では[paiza.io](https://paiza.io/ja)を使った。


## 実例
### 前提

以下のような、アカウントが保持する予算の中央値を求めたい

##### AccountBudgetsテーブル

| budget |
|:-----------|
| 1000       |
| 1000       |
| 2000       | 
| 3000       | 
| 4000       |
| 5000       |


この例では、中央値は、`（2000 + 3000） / 2 = 2500`となる。
これを、SQLで求めていく。

### 初期データ作成

```sql
create table Budgets(budget integer);

insert into Budgets(budget) values(1000);
insert into Budgets(budget) values(1000);
insert into Budgets(budget) values(2000);
insert into Budgets(budget) values(3000);
insert into Budgets(budget) values(4000);
insert into Budgets(budget) values(5000);
```


### 考え方

[この記事](https://teratail.com/questions/73702#reply-116164)に非常に助けられた。

中央値ということは、全体をソートして真ん中に値が中央値になる。
ということは、集合内のそれぞれの数（自分を含む）と比較を行うと、大小それぞれが集合内の全体の数の半分以上になる。

つまり、中央値となりえる値は、「自分より小さい値の数合計」と「自分より大きい値の数合計」が、全体数の半分以上になっている。

例えば今回の例で言うと、`2000` は、`「自分より小さい数合計(自分含め) = 3つ(1000, 1000, 2000)」` `「自分より大きい数合計(自分含め) = 4つ(2000, 3000, 4000, 5000)」`それぞれが、`レコード数/2 = 3`以上になっている。

3000の場合も然り。


| budget |
|:-----------|
| 1000       |
| 1000       |
| 2000       | 
| 3000       | 
| 4000       |
| 5000       |


以上のような考え方をSQLで表現しないといけない。



### 結論

```sql
select avg(t1_budget) from (
select t1.budget as t1_budget from Budgets t1 cross join Budgets t2
group by t1.budget
having sum(case when t1.budget >= t2.budget then 1 else 0 end) >= count(*)/2
and sum(case when t1.budget <= t2.budget then 1 else 0 end) >= count(*)/2
) tmp
```

### 解説

自己クロス結合(`cross join`)することで、以下のような表が表現できる。
上述した「`集合内のそれぞれの数（自分を含む）と比較を行う`」を実現できる。

| budget1 | budget2 |大きい（budget1 >= budget2）|小さい（budget1 <= budget2）|
|:-----------|:-----------|:-----------|:-----------|
| 1000       |1000| 1| 1|
| ...       |1000|1|1
| ...    | 2000|0|1
| ...       | 3000|0|1
| ...       |4000|0|1
| ...       |5000|0|1
| 1000       |1000|1|1
|  ...   |1000|1|1
|  ...      |2000|0|1
|  ...      |3000|0|1
|   ...     |4000|0|1
|  ...      |5000|0|1
| 2000       |1000|1|0
|  ...   |1000|1|0
|  ...      |2000|1|1
|  ...      |3000|0|1
|   ...     |4000|0|1
|  ...      |5000|0|1
|  ...      |...|...|...



上表のbudget1で`group by`することで、それぞれの集合を作る。
`having`でそれぞれの集合内で、上述した「`「自分より小さい値の数合計」と「自分より大きい値の数合計」が、全体数の半分以上になっている`」
物に絞り込んでいる。


上記のように絞り込むと、以下のような結果になる。

| budget1 |自分より小さい値の数合計|自分より大きい値の数合計|
|:-----------|:-----------|:-----------|
| 2000       |3|4
| 3000    | 4|3


今回は、全体レコード数が偶数なので二つのレコードが抽出される。
このような場合には、二つの平均値を中央値として計算する。

SQLの`avg(t1_budget)`がこの部分（`(2000 + 3000) / 2 = 2500` ）

で見事完成！

## まとめ

Median関数実装してくれないかな。。。
MPAndroidChart 設定

AndroidMPChartで最初の設定するメソッドの意味を書きます。
今回は棒グラフだけ。


        //拡大縮小ができないようにする。
        chart.setPinchZoom(false)
      
        //背景の色を設定しない。
        chart.setDrawGridBackground(false)

      　//グラフの影をつけない。
        chart.setDrawBarShadow(false)

        //左側のy軸の設定
        //最大値
        chart.axisLeft.axisMaximum = 50F
        //最小値
        chart.axisLeft.axisMinimum = 0F
        //y軸のメモリの数。値が多ければ、目盛りが細かくなる。
        chart.axisLeft.labelCount = 10

    
        //x軸の設定
        //x軸の単位(今回は月ごと)
        val month = arrayOf("", "1月", "2月", "3月", "4月", 
                                "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月")
        //x軸のインデックスとして変数monthを入れる
        chart.xAxis.valueFormatter = IndexAxisValueFormatter(month)
        //x軸の値表示を下の方に表示する。
        chart.xAxis.position = XAxis.XAxisPosition.BOTTOM
        //
        chart.xAxis.setDrawGridLines(false)

実際に実行してみる。
![Screenshot_1604325747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498428/d5f876bc-072b-f1e4-4098-c03a1d3efb7c.png)

他にも色々なメソッドがあるみたいです。
便利そうなメソッドがあったら記事にしたいと思います。
コマンドを使って、コントローラーなどを削除する方法

#はじめに
　生成するコマンドはよく使うから、覚えているけど、削除は忘れかけていたので、記録しておく。
###生成したコントローラーやモデルを削除したい

```bash
rails d controller(model) コントローラー名（モデル名）
```
deleteのdかな。
関連するファイル全て削除してくれる。

###生成したデータベースを削除したい

```bash
rails db:drop
```
ちなみに、生成するときは、`rails db:create`
保存したデータだけを削除するのは、`rails db:reset`
アレクサスキルを開発したときのリアルタイムメモ

赤外線
http://www.optdevice.jp/ir/

obniz IR LED
https://obniz.com/sdk/parts/InfraredLED/README.md

赤外線リモコンのフォーマット
https://os.mbed.com/users/shintamainjp/notebook/remote_ir_ja/
http://elm-chan.org/docs/ir_format.html

アレクサスキル
https://medium.com/crowdbotics/how-to-build-a-custom-amazon-alexa-skill-step-by-step-my-favorite-chess-player-dcc0edae53fb

オペアンプ
https://akizukidenshi.com/catalog/g/gI-09406/

ad
https://developer.amazon.com/en-US/docs/alexa/custom-skills/understanding-custom-skills.html
smart home skill (not what i need)
https://developer.amazon.com/en-US/docs/alexa/smarthome/understand-the-smart-home-skill-api.html

https://github.com/dabblelab/2-alexa-remote-api-example-skill/blob/master/lambda/custom/index.js

JS function
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
To return a value other than the default, a function must have a return statement that specifies the value to return. A function without a return statement will return a default value. In the case of a constructor called with the new keyword, the default value is the value of its this parameter. For all other functions, the default return value is undefined.

Promise
https://javascript.info/promise-basics

アレクサ、Obniz、
https://speakerdeck.com/miso/alexaxobnizdevui-iotwohazimeyou

https://qiita.com/crinoid/items/9145d7d640e1e9bd396d


package.jsonにこのライブラリー名を追加する
「,
    "obniz": "^3.9.0"」

Speech Synthesis Markup Language (SSML)
https://developer.amazon.com/en-US/docs/alexa/custom-skills/speech-synthesis-markup-language-ssml-reference.html

let, var, const js
https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/#:~:text=var%20declarations%20are%20globally%20scoped%20or%20function%20scoped%20while%20let,be%20updated%20nor%20re%2Ddeclared.

http://ask-sdk-node-typedoc.s3-website-us-east-1.amazonaws.com/classes/responsebuilder.html#withsimplecard

alexa hosted skill
https://developer.amazon.com/en-US/docs/alexa/hosted-skills/build-a-skill-end-to-end-using-an-alexa-hosted-skill.html

https://developer.amazon.com/en-US/docs/alexa/conversations/about-alexa-conversations.html#should-i-build

async-await
https://www.freecodecamp.org/news/async-await-javascript-tutorial/

event-driven programming
webhook
event loop
iPaaSでアレクサとobnizの連携した時のリアルタイムメモ

Temp センサー
https://obniz.com/sdk/parts/LM60/README.md

フローベースプログラミング（Flow-based Programming） 
https://nodered.org/about/

enebularのドキュメント
https://docs.enebular.com/en/

ifttt: alexa -> webhook
https://qiita.com/mongamae-nioh/items/990b6505961d5a61444a

ifttt: webhook -> alexa
https://www.thomptronics.com/about/notify-me
https://ifttt.com/create/connect-notifymyecho


https://www.element14.com/community/community/raspberry-pi/blog/2020/03/12/home-automation-with-raspberry-pi-4-and-amazon-echo-dot-alexa

enebularをherokuへのデプロイ
https://docs.enebular.com/ja/deploy/deployflow/heroku/

enebular obnizライブラリー
https://github.com/obniz/obniz-nodered-sdk
enebularのスタムノード
https://qiita.com/wicket/items/6077cd67f5c4807ce9e3

Flow-based Programming

https://nodered.org/about/
flow-based programming is a way of describing an application’s behavior as a network of black-boxes, or “nodes” as they are called in Node-RED. Each node has a well-defined purpose; it is given some data, it does something with that data and then it passes that data on. The network is responsible for the flow of data between the nodes.
Raspberry Pi Bluetooth デバイス名 変更手順

# Raspberry Pi Bluetooth デバイス名 変更手順
## Bluetooth デバイス名 設定

`/etc/machine-info`を作り`PRETTY_HOSTNAME`を設定すると
BlueTooth デバイス名を変更することが出来る。

```sh
$ sudo vi /etc/machine-info
```

```sh:/etc/machine-info
PRETTY_HOSTNAME=ABCDE
```

## Raspberry Pi を見つけてもらえるようにする

### BlueTooth 制御 起動

```sh
$ bluetoothctl
```

### Raspberry Pi 検索可とする

```
[bluetooth]# discoverable on
```

### 不要になったら Raspberry Pi 検索不可とする

```
[bluetooth]# discoverable off
```

### BlueTooth 制御 終了

```
[bluetooth]# exit
```
ノーコードの利点と欠点（アレクサとobnizの連携につて）

# モチベーション
ノーコードは何がいいですか？
[前回](https://qiita.com/khoahv/items/6f562bd6fb2ae12a3a3e)、音声でエアコンやライトなどのデバイスをコントロールする制作を開発しました。その時、アレクサとobnizと連携した時、Nodejsでアレクサスキルを開発しました。今回、ノーコードと普通のコードを比較するために、2つiPaaSサービス（IFTTTとenebular）を使って同じことをやってみます。

# 必要なもの
+ obniz
+ alexaデバイス（アマゾンエコー、スマホのアレクサアプリ）
+ 赤外線センサー
+ 赤外線LED
+ IFTTTアカウント
+ enebularアカウント
+ herokuアカウント

# IoTデバイス
![iOS の画像 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521590/2349ec63-8941-2d8b-3e56-267080ed12ec.jpeg)



# システムの図

![Untitled drawing (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521590/44cbb9db-967f-54b9-c6d1-e80c0c056dfe.png)
1. アレクサはユーザーのコマンドを聞いてコマンドを認識する
2. アレクサはIFTTTにユーザーのコマンドを送る
3. IFTTTはenebularサーバー(herokuにデプロイした)のwebhookのリクエストを送る
4. enebularはobnizノードを使って、obnizクラウドにリクエストを送る
5. obnizクラウドはリクエストをobnizデバイスを送る
6. obnizは赤外線LEDでエアコンなどをコントロールする

なぜ、2つiPaaSサービスが必要かというと、IFTTTはアレクサに連携するのは簡単ですが、obnizに連携できません。逆に、enebularとobnizは簡単で、アレクサとは難しいです。

# enebular
enebularの使い方
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521590/086cec0e-13f6-8e37-57b8-37fe00e8af6f.png)
enabularはの役割はHTTP webhookをつくって、obniz APIを使ってobnizをコントロールすることです。

## エアコンをつけるWebhook
まず、[フローを作りましょう。](https://docs.enebular.com/ja/Flows/CreateFlow.html)それから、[obnizノードをインストール](https://qiita.com/wicket/items/6077cd67f5c4807ce9e3)して、以下のコードをFunction部分に追加します。

```js
let led = obniz.wired('InfraredLED', {anode: 5, cathode: 6});
await led.send([1,1,1,1,....]); //エアコンをつける信号
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521590/e2b8fbe7-30b4-5134-7199-e31799320ee9.png)

HTTP inノードをつかして、以下の内容を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521590/6d309e8c-d2b2-4886-2d14-86c70bbb63da.png)

## エアコンを消すWebhook
webhookのURLと消す信号の以外は以上と同じです。最後のフローは以下の図になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521590/1a215f98-f98f-f85b-aad4-4bb38ae8b6f4.png)


ただ、そのままデプロイすると、enebularが一時的なサーバーを作ってくれて、1時間ぐらいセッションの有効期限が切れなるので、webhookのURLも変わります。だから、[Heroku へのデプロイ](https://docs.enebular.com/ja/deploy/deployflow/heroku/)します。
注意：サーバーのURLは`App name`の部分.herokuapp.comになります。例えば：`App name`はabcなら、URLはabc.herokuapp.comです。

# IFTTT
IFTTTの役割はAlexaと作ったWebhookを連携することです。だから、`If this`はAmazon Alexaです。
、If Thisの部分は「Amazon Alexa」の「Say a specific pharase」を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521590/6a3284be-3ccf-7316-9458-dae2ab13c577.png)


`Then That`は「Webhooks」の「Make a Web request」を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521590/090ad3c2-d8c4-dc7e-4316-5ecf8abcb9ba.png)

結果の設定は以下のイメージです。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521590/78413e03-496d-54aa-64df-577f9e8d834c.png)




# ノーコードと普通のコードの比較

|   |ノーコード   |普通のコード   |
|---|---|---|
|開発時間   |4時間   |20時間|
|できること   |少ない|ほぼ何でもできる   |
|関連の部分の仕組みの理解度（アレクサの中身など）|ほぼわからない   |よく理解できた   |
Web系エンジニアへ未経験転職を目指す24歳の話(Qiita初投稿)

<h3>自己紹介</h3>
・2017年に高専本科卒業 ⇨ 就職のため上京
・メカトロニクスエンジニアとして社会人生活をスタート
・機械工学のオワコンっぷりに失望し,好奇心で業務外の勉強を開始
・本業に全く役に立たないScienceの勉強がいつのまにか"趣味"になる
・"仕事でいかせる環境に転職したい"&"この面白さになぜもっと早く気づかなかったのか?" と,教育に対して圧倒的後悔する
・2020年にWeb言語を学習し,自分の探していた庭を見つける
・未経験Web系バックエンドとしてのキャリアをリスタートするためにポートフォリオ作成開始(現在)

---
<h3>Qiita投稿の目的について</h3>
・学習した内容のメモ
・学習の記録

---
<h3>今後の投稿について</h3>
・Ruby on Rails の学習内容 (書籍,Udemyの内容まとめ)
・ポートフォリオの作成過程

---
hamlでaudio_tagを使ってmp3再生をする手順


## はじめに

hamlを使って音声を再生することができるサイトを作りたかったのですが、HTMLの記事しか見つかりませんでした。実装するにあたりコードの記述で苦労したので備忘録として記事にしました。

HTML5には音声を再生するためのaudio_tagというタグがあります。これを利用することでmp3、wavなどの拡張子の音声を再生できるプレーヤーを設置できます。

今回はmp3でやっていきます。
Railsのバージョンは5.2.4.4を使っています。

## 音源の用意

まず最初に再生させたいmp3音源を用意します。私の場合は利用したい音源がmp3ではなかったので、こちらのサイトで拡張子を変更しました。
https://online-audio-converter.com/ja/

## 音源をディレクトリに入れる

次にフォルダーを作成します。

app/assets/audios

audiosフォルダーの中にmp3音源を入れていきます。
私はFinderで音声ファイルの移動をしました。

今回はサンプル音源として「sample.mp3」というmp3を用意しました。
![スクリーンショット 2020-11-02 22.10.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702554/aa7d22b6-c376-0c03-6ade-28e88f3f9a3f.png)


## プレーヤーの設置

hamlに再生プレーヤーの設置をするコードの記述をします。

```
.sample_voice
 = audio_tag('sample.mp3', id: 'sample-audio', controls: "controls")
```

これでこのようなプレーヤーが設置されます。
![スクリーンショット 2020-11-02 21.50.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702554/bdee51c3-cde0-dce1-e192-95e101759b75.png)

「controls: "controls"」があることでプレーヤーが設置され、再生ボタンを押すと指定した音源の再生が始まります。
idは無くても問題ないので不要であれば削除しても構いません。


## 音源のダウンロードを不可にする

これで再生まではできるようになりました。しかしこのままだとプレーヤーの右端にある縦に３つ点が並んでいるボタンから音源がダウンロードできてしまいます。
![スクリーンショット 2020-11-02 21.55.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702554/3c3efcfe-f1a5-c98c-207a-aa4830b7f861.png)

それが困る場合には「controlslist: "nodownload"」と記述することでダウンロードボタンを消すことができます。

```
.sample_voice
 = audio_tag('sample.mp3', id: 'sample-audio', controls: "controls", controlslist: "nodownload")

```

これでボタンが無くなったのでダウンロードができなくなりました。

![スクリーンショット 2020-11-02 22.07.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702554/01ce7288-3ec3-3fcf-2b8e-2d39759a70dd.png)



## 補足

今回はシンプルな音声再生を目的としていたので使用していませんが、audio.jsを使うことで更にカスタマイズなどできるようです。
https://qiita.com/whitia/items/3e533c64ce6b6badfb63
単純な再生以外にも色々やりたい場合は調べてみるといいかもしれません。

## 参考
https://railsdoc.com/page/audio_tag
https://qiita.com/NishidaRyu416/items/c244aeeaacab1d9bb0c1
Ubuntu（Mac風）の初期設定

# 環境
- Ubuntu 20.04

# UIの配置をMac風に
## Dockを下に配置する
![Screenshot from 2020-11-02 19-41-44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202664/b7147121-4a42-66e1-caf0-85b85c8ab26e.png)

1. 「設定」を起動する
2. 「外観」タブを開く
3. Dockの表示位置を「左」から「下」へ
![Screenshot from 2020-11-02 19-48-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202664/0da69fc6-9776-26c9-d3c8-af9586dba5bd.png)

## Dockの長さを適切に短くする
1. Terminalを起動する
2. 以下のコマンドを実行

```bash
$ gsettings set org.gnome.shell.extensions.dash-to-dock extend-height false
```

## 「アプリケーションを表示する」を左端に配置する
1. Terminalを起動する
2. 以下のコマンドを実行

```bash
$ gsettings set org.gnome.shell.extensions.dash-to-dock show-apps-at-top true
```

## 「ゴミ箱」をDockに配置する
1. Terminalを起動する
2. 以下のコマンドを実行

```bash
$ gsettings set org.gnome.shell.extensions.dash-to-dock show-trash true
```

## ここまでの設定での変化
![Screenshot from 2020-11-02 19-54-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202664/21a1be86-e24b-3aa9-6b11-c73de149c387.png)
レイアウトだけMac風

次の手順からアイコンやGUIをよりMac風に

## UIをMac風に
1. 好きな壁紙を予めダウンロードしておく
1. Terminalを起動する
2. 3. [gnome-look.org](https://www.gnome-look.org/s/Gnome/p/1305429)からアイコンをダウンロードし、```/usr/share/icons/```に展開する
2. 以下のコマンドを実行

```bash
# Gitをインストールしていない人だけ
$ sudo apt install git curl
$ mkdir ~/.themes
$ cd ~/.themes/
# 他にもDarkモードなどあるので自分にあったテーマを
$ git clone https://github.com/B00merang-Project/macOS.git
# iconとかを変えるやつ
$ sudo apt install gnome-tweak-tool
$ gnome-tweaks

```

gnome-tweaksの設定
![Screenshot from 2020-11-03 20-20-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202664/6699d39e-7356-14db-f72f-d3c280c68dbe.png)


タイトルバーボタンの位置を左に
![Screenshot from 2020-11-02 22-45-58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202664/8db2012d-62ad-5719-af3a-82af8153154a.png)

完成
![Screenshot from 2020-11-03 20-20-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202664/350b5a71-20f8-d6d8-ff84-093f12c8e361.png)
Huskyとlint-stagedを使ってコミット時にlintチェックさせる

## 前提
TypeScript+Reactで開発環境を構築済みであること
参照：
[TypeScript+Reactでモダンな環境に入門してみる](https://qiita.com/Captain_Blue/items/2cf22f0bd66136d05ebf)
[TypeScript+React用にESLintを導入する](https://qiita.com/Captain_Blue/items/5d6969643148174e70b3)
[TypeScript+React用にprettierを導入する
](https://qiita.com/Captain_Blue/items/87c729999fcbd8c3a003)

各種バージョン
macOS Catalina 10.15.7
VS Code 1.49.3
node.js 14.4.0
yarn 1.22.10
TypeScript 4.0.3
React 17.0.1

## Huskyとlint-staged
### Husky
Gitコマンドの`commit`、`push`時に割り込み処理をしてくれるツール

### lint-staged
Gitのステージ環境にあるファイルをlintしてくれるツール

## Huskyとlint-stagedをインストール

```
$ yarn add -D husky lint-staged
```

## package.jsonにhuskyとlint-staged用の設定を追記する

```json:package.json
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix"
    ]
  }
```

## 参考
[Husky](https://github.com/typicode/husky)
[lint-staged](https://github.com/okonet/lint-staged)
Laravel 8.x Jetstreamのプロフィール画像が表示されない

## 概要
Laravel 8.xがリリースされ少し経過しましたが、やる事が溜まっていた為8.xに手が出せませんでした。そこで最近やっと触れる時間が確保できたのでLaravel 8.xと新パッケージのLaravel Jetstreamを触れる機会ができました。

## プロフィール画像が表示されない...
Jetstreamでは標準で自分のアカウントのプロフィール画像を設定する事ができます。まだコードを何も書いてないのにこのレベルまで実装されてるなんてすごい、、

しかし、マイページからプロフィール画像となる画像を選択し保存をしてみたのですが表示されません。なぜだ。。。

## Google先生に聞いてみる
何が原因か見ているとおそらく画像のパスが適切でない事が判明。では、何か同じ問題が起きてる人がいるかも！と思いGoogle先生に聞いてみることにしました。

> [Laravel 8.x 画像が表示されない - teratail](https://teratail.com/questions/295757)

あった。やはり同じ問題を抱えている方がいたようです。

## 解決方法

どの様にJetstreamが表示しているかというのは上記のリンクの回答がとても参考になるかと思います。

---

Jetstream標準のコードにある記述の様に`.envファイル`を直接参照するというのはキャッシュ対象ですし個人的にあまり好きではありません。そこでデプロイ先や`APP_URL`で適時変える必要のないように以下のように取得してみました。


`config/filesystems.php`

```Diff
-           'url' => env('APP_URL').'/storage',
+           'url' => url('').'/storage',
            'visibility' => 'public',
        ],
```

（この方法が悪手だった際はご指摘していただけると幸いです！）

## まとめ

今回Jetstreamのコードを読み解いていくと積極的にコンポーネントを使っている様でなかなか原因のコードがどれなのか掴めなかったですが、結果的に1つのファイルを編集することにより、他のファイルに干渉することなく編集することができたので個人的にもコンポーネント化してみようと思いました。
DockerでSolrCloudの検証環境を作成

# solr.in.shの準備



[公式のgitからコピー](https://github.com/apache/lucene-solr/blob/branch_8_6/solr/bin/solr.in.sh)して以下の箇所を変更し`.docker/etc/default/solr.in.sh`に置く
ディレクトリは環境に合わせて変更してください。

```
#ZK_HOST

↓

ZK_HOST="zookeeper1:2181/"
```

# docker-compose.yml

```yaml
version: '3.8'
services:
  solr_node1:
    image: solr:8.6
    container_name: solr_node1
    volumes:
      - ./.docker/etc/default/solr.in.sh:/etc/default/solr.in.sh
    ports:
      - "8981:8983"
    depends_on:
      - zookeeper1
  solr_node2:
    image: solr:8.6
    container_name: solr_node2
    volumes:
      - ./.docker/etc/default/solr.in.sh:/etc/default/solr.in.sh
    ports:
      - "8982:8983"
    depends_on:
      - zookeeper1
  zookeeper1:
    image: zookeeper:3.6
    container_name: zookeeper1
    environment:
      ZOO_MY_ID: 1
      ZOO_SERVERS: server.1=zookeeper1:2888:3888;2181
      ZOO_4LW_COMMANDS_WHITELIST: mntr,conf,ruok

```

# infoStreamの設定
infoStreamを有効にするとindex生成関連の詳細なログが出力されるようになります。

```solrconfig.xml
  <indexConfig>
     <infoStream>true</infoStream>
  </indexConfig>
```

solrconfig.xmlの上記の設定を書くと有効になります。

```/var/solr/log4j2.xml
<AsyncLogger name="org.apache.solr.update.LoggingInfoStream" level="off"/>
↓
<AsyncLogger name="org.apache.solr.update.LoggingInfoStream" level="info"/>
```
LoggingInfoStreamのlevelがoffだと出力されないのでinfoに変更します。
これでsolr.logに出力されるようになります。


# 起動

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

http://localhost:8982/solr/#/
にアクセスすると画面が表示されます。
【pytorch】numpyからtensor

pytorchでnumpyからtensorに変える方法を書く。
#numpyからtensor
torch.from_numpy(ndarray)をつかう。
ndarrayにはnumpyの行列が入る。

```
>>>import numpy
>>>import torch
>>> a = numpy.array([0, 1, 2])
>>> t = torch.from_numpy(a)
>>> t
tensor([ 0, 1,  2])
>>> t[0] = 1
>>> a
array([ 1,  1,  2])
```
上の例から、arrayをtensorに変えることができていることが分かる。
また、aのarrayとtのtensorはメモリを共有していることが分かる。
HerokuでHTTP（保護されていない通信）にリダイレクトされてしまう問題。Laravel。

#問題
ジャズライブの感想を投稿できるアプリをチーム開発しています。
HerokuにデプロイしたアプリのURLはHTTPSなのですが、**感想を投稿した後（＝form送信&DB接続後）、トップページにリダイレクトさせるとなぜかHTTPになってしまう問題**に直面しました。

ルーティングやリダイレクトに問題があるのかと探っていましたが、解決策は違うところにありました。答えは公式ドキュメントに→「[**Laravel 7.x HTTPリクエスト　信用するプロキシの設定**](https://readouble.com/laravel/7.x/ja/requests.html?header=%25E4%25BF%25A1%25E7%2594%25A8%25E3%2581%2599%25E3%2582%258B%25E3%2583%2597%25E3%2583%25AD%25E3%2582%25AD%25E3%2582%25B7%25E3%2581%25AE%25E8%25A8%25AD%25E5%25AE%259A)」

これ、解決策はあっという間にできるのですが、この現象そのものをきちんと理解するのが初心者には大変です...。

#原因
上記リンクの公式ドキュメントに説明があります。
>信用するプロキシの設定

>TLS／SSL証明を行うロードバランサの裏でアプリケーションが実行されている場合、アプリケーションがときどきHTTPSリンクを生成しないことに、気づくでしょう。典型的な理由は、トラフィックがロードバランサにより８０番ポートへフォワーディングされるため、セキュアなリンクを生成すべきだと判断できないからです。
（公式ドキュメントより抜粋）

初心者の同志よ...これ言っている意味わかります？(笑)
僕にはほぼ全ての名詞がわかりませんでした(涙)

* **プロキシ**：ブラウザとサーバーの間に存在していて、僕らのアプリにアクセスしてくるあらゆるコンピュータ、ソフトウェアのこと。proxyとは英語で代理人の意味。
* **TLS**：Transport Layer Security。公開鍵証明書による通信相手の認証と、通信の暗号化をしつつ、データを送受信するプロトコル（＝通信規約）の一つ。HTTPと合体してHTTPS（HTTP over SSL/TLS）になる。
* **SSL**：TLSの前任者。
* **ロードバランサ**：負荷(load)分散装置(blancer)。 サーバーを複数台配置して、各サーバーの負荷のバランスを図る人。ただ上記文章では、プロキシみたいな文脈で使われているようです。
* **80番ポート**：ポート番号80はHTTP。HTTPSは443。IPアドレスが各コンピュータ（PCやサーバー）を特定するための住所、ポート番号はその先の部屋番号。
* **セキュアなリンク**：HTTPSのリンクのこと。

一説によると、Herokuは僕らのアプリを安全なところで保管してくれているので、基本はわざわざ暗号化の手間がかかるHTTPSではなくHTTPで接続するとのこと。Herokuのアプリケーションサーバーにアクセスできるプロキシは限定されていて、安全性が担保されており、暗号化の必要はない、だから80番（HTTP）にフォワードするということみたいです。それならばなぜデフォルトがHTTPSなのかが謎なところですが。。。


#解決策
6文字追記するだけです...

```php:app/Http/MiddleWare/TrustProxies.php
<?php

namespace App\Http\Middleware;

use Fideloper\Proxy\TrustProxies as Middleware;
use Illuminate\Http\Request;

class TrustProxies extends Middleware
{
    /**
     * The trusted proxies for this application.
     *
     * @var array|string|null
     */
    protected $proxies = '*'; //ここに' = *'を追加するのみ！

    /**
     * The headers that should be used to detect proxies.
     *
     * @var int
     */
    protected $headers = Request::HEADER_X_FORWARDED_ALL;
}

```
$proxiesに信用するプロキシのIPアドレスを追加します。`'*'`は全プロキシを信用するという設定です。HerokuのプロキシのIPアドレスが分からず、Herokuのセキュリティレベルならこれでも大丈夫そうということで、これを採用しました。


何かご指摘などございましたら、ぜひコメントにてよろしくお願い申し上げます。
Laravel 本番環境でindexにアクセスするとエラーが発生してしまった話

### 概要
Laravelのプロジェクトディレクトリを`hogehoge`と仮定し、URL`hogehoge/public/`にアクセスすると`The GET method is not supported for this route. Supported methods: HEAD.`と表示されてしまった。

### 原因調査

今まではエラーなく普通に表示されていたが急にエラーが発生したので原因となるコードも検討がつかない。何か問題がないかルーティングファイルなどを確認してみるが特に問題はないようだ。

原因を調査するため過去に自分が打ってきたコマンドを`history`コマンドで確認し、再度`git clone`で正常に動いているもので1つずつ試していくと犯人を見つけた。。

```
php artisan view:cache
```

どうやらキャッシュ作成にこのエラーに関する問題があるらしい。。
（いまだ上記コマンドがどの様な影響によってこの問題が発生したかという根本的な理由はわかっていないので、分かる方は教えていただきたいです！）

### 解決方法
```
php artisan optimize:clear
```
もしくは`view`だけのキャッシュを削除したい場合、以下のコマンドでも可能

```
php artisan view:clear
```

### 前提条件
Laravel Framework 7.29.2
webカメラを起動して静止画を撮影しローカルに保存

# やりたいこと
- PCについているwebカメラを起動
- 静止画を撮影
- ローカルに保存する

# 環境
- MacBook Pro (13-inch, 2019, Two Thunderbolt 3 ports)
- python 3.7.0
- opencv 3.4.2

# 実装
```python
# VideoCaptureクラスのインスタンスを生成
    # 内蔵webカメラ使用時は0を指定
    cap = cv2.VideoCapture(0)

    # 正常に読み込めなかった場合
    if cap.isOpened() is False:
        print("IO Error")
    # 正常に読み込まれた場合
    else:
        # readメソッド
        # 返り値１　ret: フレームの画像が読み込めたか　/  返り値２  frame: 画像の配列（ndarray)
        ret, frame = cap.read()
        image_path = "./images/"
        if (ret):
            # imwriteメソッド
            # 引数１：画像のパス　引数２：画像を表すndarrayオブジェクト
            # 画像パスの拡張子は.jpgや.pngが使用できる。
            cv2.imwrite(image_path + "image.png", frame)
        else:
            print("Read Error")

    cap.release() # カメラデバイスを終了する

```
【初心者でもわかる】たったの5行でできる、一番簡単な「押したら開閉するメニュー」の作り方

# どうも7noteです。シンプルな押したら開くメニューの作り方。

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/togglemenu/
変数

#同じ値を何度も使おう

これまで値を使うたびに、同じ値であっても毎回記述していましたと思います。

しかし、毎回同じ値を書くのはめんどうですよね。
例えば、円の面積の計算を行うプログラムを作成する場合、毎回円周率の値を書くのは非常に大変な作業です。

```java:【例】同じ値を毎回記述する
# 半径3の円の面積
3 * 3 * 3.14159

# 半径10の円の面積
10 * 10 * 3.14159

# 半径11の円の面積
11 * 11 * 3.14159
```
もし円周率を3.14159ではなく3.14へ変更することになったら、記述をすべて書き換える必要があります。

この問題を解決するのが**変数**という仕組みです。



#変数
**変数とは、値を入れる箱のようなものです。この箱には名前をつけることができ、どんな値が入っているのかを簡単に識別できるようになります。この名前を変数名と言います。**

変数を利用することで、値を再利用したい場合に、変数の名前を使うだけで呼び出すことができます。

変数の使い方について、順に説明します。

#変数の宣言と定義
**変数を作ることを変数の宣言と言います。このとき、作成する変数には名前をつけます。
そして宣言した変数にどのような値を入れるのか記述することを変数の定義と言います。**

![変数.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762918/1035eadf-937c-3b15-44e2-2bd4530adc61.png)

基本的に宣言と定義は同時に行うため、お互いが同じ意味として捉えられる
ことが多く、違いを意識することはあまりありませんが、用語として
覚えておきましょう。

変数は以下のように定義します。<font color="Red">=</font>を挟んで右側においた値を、
左側の変数の中に入れるイメージです。

```java:【例】Rubyファイル
変数名 = 格納する値
```

```java:【例】irb
# piという変数の中身を、円周率の3.14159であると定義する
irb(main):001:0> pi = 3.14159

# piを呼び出すと、格納された3.14159が返ってくる
irb(main):002:0> pi
=> 3.14159

# 何度実行しても、格納された3.14159が返ってくる
irb(main):003:0> pi
=> 3.14159
```

変数の定義には、<font color="Red">=</font>を使って**代入**と呼ばれる記述がされています。
代入については、次回ご説明させて頂きます。

#まとめ

**変数とは、値を入れる箱のようなもののこと。**

#####以上。
Verilogのソースコードは途中でファイル分割できるらしい

# はじめに
SystemVerilogの仕様調査のため言語仕様書（IEEE Std 1800-2017）を読んでいたところ、面白い記述がありました。

> If there is a declaration that is incomplete at the end of a file, then the compilation unit including that file
will extend through each successive file until there are no incomplete declarations at the end of the group of
files.

コンパイル単位(compilation unit)についての記述なのですが、簡単に訳すと「ファイルの末尾で宣言が不完全な場合、コンパイル単位は（不完全な宣言がなくなるまで）後続のファイルに延長される」となります。これはつまり「Verilogのソースコードは任意の位置でファイル分割できる」ということになりそうです。他のプログラミング言語でもあまりそういう仕様は聞いたことがないので、実際にできるかどうか試してみました。

以下ではコンパイラとしてVivado Simulator 2019.1を使った場合の結果を示します。

# 試してみる

以下のようなソースコードを考えます。

```verilog
module A ();
endmodule
```

これを適当な位置で分割します。

```verilog:a.v
module A ();
```

```verilog:b.v
endmodule
```

この2つのファイルをコンパイルしてみます。

```console
$ xvlog a.v b.v
INFO: [VRFC 10-2263] Analyzing Verilog file ".../a.v" into library work
INFO: [VRFC 10-2263] Analyzing Verilog file ".../b.v" into library work
INFO: [VRFC 10-311] analyzing module A
```

確かに`module A`がコンパイルできています。
同様に`(`や`;`のあたりで分割してもOKでした。

予約語の途中で分割するとどうでしょうか？

```verilog:a.v
module A ();
endm
```

```verilog:b.v
odule
```

これはさすがに無理でした。

```console
$ xvlog a.v b.v
INFO: [VRFC 10-2263] Analyzing Verilog file ".../a.v" into library work
INFO: [VRFC 10-311] analyzing module A
INFO: [VRFC 10-2263] Analyzing Verilog file ".../b.v" into library work
ERROR: [VRFC 10-1491] unexpected EOF [.../b.v:1]
```

他にも識別子の途中やリテラルの途中なども試しましたがダメでした。
ファイル末尾の改行の影響かと思い、`split`コマンドでバイナリとして分割しても同様です。

なので基本的に分割できる箇所はスペースを入れられる場所と思えば良さそうです。
`split`コマンドで分割する場合は`-l`オプションなどで行単位で分割すればいいですね。

# なぜこんな仕様があるのか？

調べてもよく分からなかったのでご存知の方教えてください。

想像としては、昔のファイルシステムでファイルサイズ上限に引っかかるのを回避するためではないかという気がします。
Verilogは人が書くだけでなくコンパイラ（的なもの）の中間結果のフォーマットとしても利用されていて、そういった出力は数十GB～数百GBになることがあります。
今どきのファイルシステムではあまり問題になりませんが、ファイルサイズに制限があった時代には適当なサイズに分割する必要があったのかもしれません。
Rails　fontawesomeを利用してheaderのリンクにアイコンを追加する

今回は意外と苦労したheaderにアイコンを追加する方法を自分用のメモとして、共有させていただきます。

##環境
ruby2.6.5
Rails 6.0.3.3

##cssフレームワーク
bulma

##結論
font-awesome-sassを導入し、ヘルパーメソッドのiconを使えば簡単にアイコンを表示することができます。
以下が実際のコードになります。

```ruby:header.html.erb
<%= link_to  icon('fas','sign-in-alt', 'ログイン'), new_user_session_path, class: "navbar-item" %>
<%= link_to icon('fas', 'user-plus', '新規登録'), new_user_registration_path, class: "navbar-item" %>
```

結果↓
![スクリーンショット 2020-11-02 20.47.58.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560799/9b337bd3-5e69-e287-c2fc-a34fc2c74e49.jpeg)



##font-awesome-sassの導入
Gemfileに以下を追加

```ruby:Gemfile
gem 'font-awesome-saas'
```
ターミナルでbundle installを実行

次に、app/assets/stylesheets/application.scssに下記を追記します。
application.cssを使っている場合はscssに変換します。

```ruby:stylesheets/application.scss
@import 'font-awesome-sprockets';
@import 'font-awesome';
```

※上記の順番は変えないでください！

rails sを実行し、サーバーを再起動してください。

以上で準備は終了！あとはコードを書くだけ！めちゃくちゃ簡単じゃないですか？
アイコンがあるだけで、ポートフォリオの印象が変わると思うので、ぜひアイコンを
追加して見た目を整えて欲しいと思います！

同じようなプログラミング初学者の方の力になれば幸いです。

##参考記事
[【Rails】font-awesome-sassの使い方を徹底解説！](https://pikawaka.com/rails/font_awesome_sass)
個人的なラズパイ4初期設定（備忘録）

# 個人的なラズパイ4初期設定（備忘録）
他人には公開しないサーバ用簡易設定
真似して何かあっても自己責任で

バージョン

```
$ cat /etc/debian_version
10.4
```

## 1. sudo raspi-config
SSH を Enable にする

## 2. sudo adduser hoge
ユーザ hoge を作成する

## 3. sudo gpasswd -a hoge sudo
ユーザ hoge を sudo に追加する

## 4. sudo reboot
ユーザを hoge に切り替えておく

## 5. sudo userdel pi
ユーザ pi を削除する

## 6. sudo rm -rf ../pi
ユーザ pi のディレクトリも消しておく

## 7. sudo apt install vim
vim をインストール

## 8. sudo rpi-update
ラズパイをアップデートする

## 9. sudo vim /boot/config.txt

```
arm_64bit=1
over_voltage=6
arm_freq=2140
```
OS 64 bit 化
昇圧、OC設定
追記しておく
（ここで設定は2200MHzになる）

## 10. sudo reboot
再起動

## 11. sudo vim /etc/hostname
ホスト名変更

## 12. sudo vim /etc/hosts
ホスト名変更

## 13. sudo vim /etc/dhcpcd.conf
ip を固定する
vim コマンド

今週末にLPIC101を受ける予定ですが、普段使っていない為、Viエディタの基本コマンドを覚えられなくて、メモ帳として、記憶を深めようと思います。

　　　　　　　　　Esc
コマンドモード　＜＝＞　入力モード

入力モード：
vi [R]
i   :　カーソルの前にテキストを入力する  (insert)
a   :　カーソルの後ろにテキストを入力する　（ahead）
I   :　行頭の最初の文字にカーソルを移動し、その直前にテキストを入力する (Insert)
A   :　行末にカーソルを移動し、その直後にテキストを入力する
o   :　カレント行の下に空白行を挿入し、その行でテキストを入力する (open line)
O   :　カレント行の上に空白行を挿入し、その行でテキストを入力する


viのカーソル操作コマンド：
h   :  1文字左へ移動する、左矢印（←）キーと同じ
l   :  1文字右へ移動する、右矢印（→）キーと同じ
k   :  1行上へ移動する、上矢印（↑）キーと同じ
j   :  1行下へ移動する、下矢印（↓）キーと同じ
0   :  行の先頭へ移動する
$   :  行の末尾へ移動する
H   :  画面の一番上の行頭へ移動する
L   :  画面の一番下の行頭へ移動する
gg  :  ファイルの先頭行へ移動する
G   :  ファイルの最終行へ移動する
nG  :  ファイルのｎ行目に移動する
:n  :  ファイルのn行目に移動する
u   :  直前の操作を取りやめる
i   :  コマンドモードから入力モードに変更し、カーソルの左から入力したい
:!ls　　　　viエディタを終了することなくカレントディレクトリにあるファイルを確認したい


viの終了、ファイル保存、シェルコマンドの実行
:q   　ファイルへ保存せずに終了する
:q!  　編集中の内容を保存せずに終了する
:wq 　　編集中の内容を保存して終了する
ZZ   　編集中の内容を保存して終了する
:x     編集中の内容を保存して終了する
:w   　編集中の内容でファイルを上書き保存する
:e!  　最後に保存した内容を復帰する
:r   　ファイルの内容をカレント行以降に読み込む
:!   　viを終了せずにシェルコマンドを実行する
:r!  　シェルコマンドの実行結果を挿入する


viの編集コマンド：
x  : カーソル位置の文字を削除する(Delete)
X  : カーソル位置の手前の文字を削除する
dd : カレント行を削除する
（x行目で１回目のdを押し、y行目で2回目のdを押す）：x行目〜y行目までを切り取り
dw : カーソル位置から次の単語までを削除する
yy : カレント行をバッファにコピーする 
p  : カレント行の下にバッファの内容を貼り付ける （paste）
P  : カレント行の上にバッファの内容を貼りつける　（paste）
r  : カーソル位置の1文字を置換する　(replace)
-R : 読み取り専用でファイルを開くコマンド
yw : カーソル位置の単語をバファにコピーする
3YP : カーソルの行を含めて3行をコピーし、カーソルの上に挿入する
yyp:  カーソルにある行をコピーし、下の行に挿入する
:5（5G）  カーソルをファイルの5行目に移動する


vi検索コマンド
/パターン　 カーソル位置から後方に向かって指定したパターンを検索する
?パターン　 カーソル位置から前方に向かって指定したパターンを検索する
n           次を検索する
N           次を検索する（逆方法）
:%s/A/B/    最初に見つかった文字列Aを文字列Bに置換する
:%s/A/B/g   すべての文字列Aを文字列Bに置換する

viの設定変更
:set nu 行番号を表示する
:set nonu 行番号を非表示にする (:set nonumber)
:set ts=タブ幅　タブ幅を数値で指定する（:set tabstop）