OmniAICreator/Qiita-1.07M huggingface dataset:
無料レンタルサーバーを使ってみよう

#はじめに
[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしているにのみやです。

プログラミング初心者なので、間違いも多いと思います。
間違いがあれば、ぜひ教えてください。
今PHPの勉強をしていてサーバーを使って練習したかったので無料サーバーを利用してみました。

#　無料サーバーに登録する。
僕は[XFree](https://www.xfree.ne.jp/)を利用しました。
[この記事](https://template-party.com/manual/server1.html)を参考にして無料サーバーを登録しました。

ここからは、ローカルで作ったものをアップするまでを解説します。

#　ローカルのファイルを登録する

FTPアカウント設定を選択します。

![管理パネル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423451/07865e90-9db4-d23a-c238-e9a6e0eb7ce8.png)
ログインを選択します。

![FTPアカウント設定_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423451/0e1143bf-c880-749e-aa33-53ee939c2ad4.jpeg)
アップデートを選択して、ローカルからファイルを選択します。
確認する場合は、右上のドメインで見ることができます。

![Screenshot from 2019-07-26 16-57-30_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423451/94d75583-a0c2-755a-2e10-a546dea52d64.jpeg)
PC使ったRaspberry Pi開発手順

なるべくGUIをRaspberry Piに入れたくない．
クロスコンパイルの環境構築もしたくない．
でも開発は，使い慣れたエディタでやりたい．

そしてどうせgitで管理している．

で，以下のような開発を行っているので，一応紹介．

![cloud_pc_raspberrypi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284261/d5eacc0c-d3ba-832f-22eb-9f1d859620a1.png)

# 前提

- PC(Ubuntu Desktop)上のホームディレクトリに関する情報
    - サーバ名
        - home
    - ユーザ名
        - user1
    - プログラムのあるディレクトリ
        - /home/user1/ros2/test_program

# 準備
## raspberry pi上
raspberry piにログインし以下を実行．

```terminal
$ ssh-keygen
```

~/.ssh/id_rsa.pubをPCにコピー．ファイルコピーでもいいし，中身を表示(cat ~/.ssh/id_rsa.pub)し，文字列をコピーして貼り付けてもいい．

## PC上
上記のraspberry pi上のid_rsa.pubの中身をPC上の~/.ssh/authorized_keysに追加．ファイルがなければ作成．

文字列をコピーした場合，エディタなどで最後に追加．ファイルをコピーした場合はid_rsa.pubのある場所で以下を実行．

```terminal
$ cat id_rsa.pub >> ~/.ssh/id_rsa.pub
```

### 最初のclone
PC上でプログラム作成．それをraspberry pi上でclone．
以下はraspberry pi上で実行．

```terminal
$ git clone ssh://user1@home/home/user1/ros2/test_program
```

構文は以下のとおり

```
git clone ssh://[ユーザ名]@[コンピュータ名][対象ディレクトリを絶対パスで指定]
```

# 運用

1. PC上で作業
2. PC上でgit commit -a -m "message"
2. raspberry pi上でgit pull
3. raspberry pi上でビルド・実行・テスト
4. 問題なければgithub, gitlabにpush

## branchの活用
PC上でbranchをきって開発する場合の手順．
branch名はdevelop-user1とする．

1. PC$ git checkout -b develop-user1 
    - develop-user1の作成
2. PC上で作業・編集
3. PC$ git commit -a -m "message"
4. raspberry$ git pull origin develop-user1:master
5. raspberry pi上でビルド・実行・テスト．
6. 問題がある or 一段落ついていないならば2.に戻り作業．一段落ついてれば7.へ
7. PC$ git merge master
    - コンフリクトがあれば修正
8. PC$ git checkout master
9. PC$ git merge develop-user1
10. masterブランチをgithubやgitlabにpush

## 欠点
commitしてraspberry pi上にてpullするので，commit間隔が短くなる．もしくはraspberry pi上でビルドするまでビルドに成功したか否かが分からないので，ビルド不成功のものもcommitしてしまう．

# 参考

- [いまさら聞けないgitの使い方](https://qiita.com/mountcedar/items/682743c95fd3b8fc274b)
- [公開鍵認証でパスワード入力を省略する](https://qiita.com/tetymd/items/642ac1bee5e8cac8bfeb)
忘れる前に書きとめておくRailsでのAPI作成手順

## まずはログイン機能を作る

1. 設計
2. api/v1のnamespaceの下にresourcesを作る
3. application_controllerにtokenのset系auth系methodを作る
4. tokens_contollerにcreateとdestroyを作る
5. そこにbinding.pryを入れておく
6. postmanからアクセスする
7. とまったところでparamsを確認する
8. paramsを使ってログイン機能を作る
ethers.js で ENS の名前解決

- ENS は Ethereum のドメインみたいなやつで、人間が読むことができる名前と Ethereum アドレスを紐づけてくれるやつ
- 例: piyopiyo.eth => 0xF02c1c8e6114b1Dbe8937a39260b5b0a374432bB
- ethers.js は明示的に名前解決しなくても、自然に ENS を使うことができる
- 以下は、明示的に ENS の名前解決をして Ethereum アドレスを取得するサンプルコードです。

```js
// ethers.js をインポート
const ethers = require('ethers')

// 接続するネットワーク
let network = 'homestead'

// 接続するノード（INFURA および Etherscan のノードに同時に接続）
let provider = ethers.getDefaultProvider(network)

// 名前解決したい ENS name
let ensName = "piyopiyo.eth"

// ENS の名前解決をして Ethereum アドレス取得
provider.resolveName(ensName)
.then((address) => {
	console.log("Address:", address)
})
```

# Ref.
- https://scrapbox.io/a42/ethers.js_で_ENS_の名前解決
- https://docs.ethers.io/ethers.js/html/api-providers.html#ethereum-naming-service
Android8でcordova-camera-pluginを使うと"Error capturing image"とエラーメッセージが返ってくる

## TL; DR
cordova-camera-pluginのバージョンを4.0.2以上にあげる


## 概要
`saveToPhotoAlbum`をtrueにして、getPicture()関数を呼んだ際にErrorCallbackがよばれて、`Error capturing image`というメッセージが返ってくる。

## 原因
Android８からパーミッション(permission)の扱いが変わったため。
`saveToPhotoAlbum`をtrueにしていると、端末に写真を保存するので書き込み権限(`WRITE_EXTERNAL_STORAGE`)が必要です。
バージョン4.0.2以前はその際に読み込み権限(`READ_EXTERNAL_STORAGE`)のみを指定していました。
Android８未満ではそれでも問題なく動作したのですが、Android8移行では書き込み権限も要求するようになったため写真の保存ができずエラーになっていました。

詳しくはチケットが起票されているのでそちらをご参照ください。
https://issues.apache.org/jira/browse/CB-13781

## 解決策
1. バージョン4.0.2以上にあげる<br>
１番シンプルな解決策。
2. オプションのsaveToPhotoAlbumをfalseにする<br>
何らかの事情でプラグインのバージョンを上げれない場合の回避策(workaround)になります。<br>
`saveToPhotoAlbum`がfalseだと端末に写真を保存しないので権限が必要ないです。<br>
詳しくは以下を見てください。<br>
https://stackoverflow.com/questions/29392639/error-capturing-image-with-phonegap-on-android

## 雑談
Monacaを使用していてmonacaのバージョンを6.5→7.1に上げた際にcorodova-camera-pluginのバージョンも更新される。
ただ、そのバージョンが4.0.1でちょうど本事象が解決される前のバージョン。
ほんと困るなあ。
今回の件は、Androidの不具合修正によって引き起こされた不具合。
Android Studio Statisticの設定方法

#Android Stuido Statisticの設定方法
StatisticとはAndroid Studioを使用して、書いたソースコードのステップ数を確認できるプラグインです。

##Install
1. Android Studioを開く
2. [settings]を開く
3. pluginタブを開く
4. MarketPlaceを開く
5. "Statistic"を検索　　※"Statistics"ではないので、気を付けてください。
6. Installボタンを押す
7. Restart IDE

以上でStatisticタブが追加されます。

以前はjarファイルをダウンロードして設定しなければならず、面倒でしたが今はとても簡単にできます。

##Statisticの設定
デフォルトの状態だと、プロジェクト内の全コードのステップ数が表示されてしまい、自分が書いたappディレクトリのみの情報が見れません。

そこで下記のように設定します。
1. addボタンを押す
2. app/src以外のディレクトリを選択し、追加する
3. OKボタンを押し、statisticタブの[Refresh]を押す
4. javaタブなどで各項目のステップ数が確認できます。

以上です。
qiitaをseleniumでスクレイピングしてみた

今回はmacでselenumを用いてやるので、windowsやLinuxを使っている方は適宜変更して試してみてください。
※pythonはインストールされている前提で話していきます。

# Seleniumをインストールする

`pip install selenium`

# WebDriverをダウンロードする

Seleniumを使うには、操作するブラウザに対応したWebDriverが必要なので、ダウンロードしていきます。
chrome用のwebdriverを使っていくので、他のブラウザを使いたい方は任意に変更してください。
いくつか方法があるので紹介していきます。

## 下記のリンクからダウンロード
[chrome driver](http://chromedriver.chromium.org/downloads)
ダウンロードしたファイルを任意の場所に展開して環境変数のPathを設定

## Homebrewを使用してのインストール
macの方はこちらの方法が便利です。
`brew cask install chromedriver`

ここでの注意点はcask出ないとerrorになります。

## 任意のディレクトリでpythonファイルを作成

下記のコードをコピペしたら、実行してみてください。
ブラウザが立ち上がって、qiitaのトップページが表示されます。

```
from selenium import webdriver
from selenium.webdriver.common.keys import Keys

driver = webdriver.Chrome()
driver.get('https://qiita.com/')
```

ここからまずはログインしないといけないので、どの方法でもいいのですが、
自分はgithubを使ってログインをします。

コードを追記していきます。
```
from selenium import webdriver
from selenium.webdriver.common.keys import Keys

driver = webdriver.Chrome()
driver.get('https://qiita.com/')

driver.find_element_by_css_selector('a.nl-SocialSignup.nl-SocialSignup-github').click()
```

ここまでで、githubのログイン画面までたどり着けます。
ここからメールアドレスや、パスワードを入力していくわけですが、
便利なメソッドが提供されているので、それらを使用していきます。
DOM操作とほとんど一緒なので、JSを少し触ったことがある方は馴染み易いと思います。

```
driver.find_element_by_id('login_field').send_keys('{メールアドレス}')

driver.find_element_by_id('password').send_keys('{パスワード}')

driver.find_element_by_css_selector('input.btn-block').click()
```

上記のコードで、メールアドレスとパスワードは自身のアカウント置き換えてください。

ここまでのコードを実行してあげれば、ログイン後の画面まで到達出来ると思います。
後は好きなように、ページの好きな要素を引っ張って来てCSVファイルに起こすのもの良し、
特定のカテゴリの記事内容をスクレイピングして来ても良いと思います。

これだけで、深層学習に必要なデータセットを収集しやすくなるので、便利です。

seleniumのリファレンスもweb上に上がっているので、適宜参照すればほとんどのことが出来ると思います。
[seleniumリファレンス](https://www.seleniumqref.com/api/webdriver_abc_python.html)
ethers.js で Ethereum アカウントの残高を取得

ethers.js で Ethereum アカウントの残高を取得するサンプルコードです。

```js
// ethers.js をインポート
const ethers = require('ethers')

// 接続するネットワーク
let network = 'homestead'

// 接続するノード（INFURA および Etherscan のノードに同時に接続）
let provider = ethers.getDefaultProvider(network)

// 残高を取得するアドレス（何もしなくてもENSの名前解決をしてくれる！）
// piyopiyo.eth == 0xF02c1c8e6114b1Dbe8937a39260b5b0a374432bB
let address = "piyopiyo.eth"	

// 渡したアドレスの Ether 残高を取得
provider.getBalance(address)
.then((balance) => {
	let balanceInEth = ethers.utils.formatEther(balance)
	console.log("Balance:", balanceInEth)
})
```

- `getDefaultProvider` で INFURA と Etherscan に勝手に接続してくれるのすごく楽　
- ENS の名前解決を何もしなくてもやってくれるの感動
- もちろん裏側の仕組みをしっておいたほうがいいとおもうけど、Dapps 開発の敷居をすごく下げてくれるのはとても良いのでは

# Ref
- https://scrapbox.io/a42/ethers.js_で_Ethereum_アカウントの残高を取得
- https://docs.ethers.io/ethers.js/html/api-providers.html#account
データリンク(2)

# データリンク層の機能
## 多重アクセス
多重アクセス (MAC,Medium Access Control)
みんなが一斉に喋り出すと会話が成立しない
=>誰が次に喋るかを決める「チャネル」が必要
MAC副層:メディア・アクセス制御副層
無線LANにおいて重要

### チャネルの割り当て
- 静的チャネルの割り当て
> 時分割多重 TDM
> 周波数分割多重 FDM
> 符号分割多重 CDMA
> 回線交換的=>バースト性のあるデータトラフィックに不向き(非効率的)

- 動的チャネルの割り当て
> キャリアセンス搬送波検知
> 衝突の検知と回避
> パケット交換的=>バースト性のあるデータトラフィック向き(効率的)

### 多重アクセスプロトコル
- ALOHA
> ピュアALOHA(非効率)
> 衝突->ランダムな時間待って再送信
> 
> スロット化ALOHA (ピュアALOHAの2倍)
> 任意のタイミングではなく、
> スロットによりユーザ間を同期させて送信を許可

- CSMA(3-p5)
> 搬送波検知多重アクセス
> 各々の端末が搬送波
  - 永続CSMA(1-persistent)
  - p-永続CSMA
  - 非永続CSMA

- CSMA/CD
> 衝突検出機構付きCSMA
> 衝突検知=>指数バックオフ

***
MAC副層プロトコル
**CSMA/CA**:
衝突検知ができないので衝突回避を行う
ランダムなバックオフ
分散コーディネーション機能: DCF(Distributed Coordination Function)
それぞれの局が独立に動作する
***

#### 隠れ端末問題
互いにキャリアセンスができない端末局からの電波が競合してしまう問題
=>仮想チャネル監視方式で解決

#### 802.11フレーム
フレームの種類
- データフレーム
- 制御フレーム
- 管理フレーム

### マルチSSIDによる仮想化
各社のSSIDがついたビーコンが同一の基地局からブロードキャストされている(au,softbankとか

### PPP(Point-to-Point Protocol)
コンピュータを1対1で接続するためのプロトコル
> **コネクション型接続**
> 1. 最初にコネクション確率
> 2. 認証、暗号化、データ圧縮
> 3. 通信開始

### LCPとNCP
#### LCP(Link Control Protocol)
上位層に依存しない機能
コネクション確立、パケット長設定、認証プロトコル設定

#### NCP(Network Control Protocol)
上位層に依存する機能
上位層かIPの場合IPCP(IP Control Protocol)
IPアドレスの設定、TCP/IPのヘッダ圧縮

### PAPとCHAP
#### PAP(Password Authentication Protocol)
IDとパスワードによる認証
パスワードが平文でネットワーク上を流れる

#### CHAP(Challenge Handshake Authentication Protocol)
ワンタイムパスワードによる認証

### PPP over Ethernet
フレッツ光など
Ethernet + PPPの機能(認証、コネクション確立・切断、課金)

##### その他のデータリンク
HDMI
【素人の備忘録】 anacondaをインストールするとGNOMEが立ち上がらない！、、、を直観的に解決

# はじめに
 pythonを使ってAIや機械学習を勉強しようとanacondaをインストールしたらGNOMEが立ち上がらなくなった。 ネットを徘徊すると既知の問題ということが判明。 しかも、これだっ！という対策が無いらしい。 中には、「GUIを使うな！」って言っている人も、、、
 いろいろ試した結果、何とか我慢できるところまで来たのでメモっておくことにしました。 ただし、素人の直感式なので試される方は自己責任でお願いします。

## 環境
- FUJITSU PRIMERGY TX100 S3
- CentOS 7
- GNOME 3.28.2

# How to...
## ステップ1
- GUI上で、標準的にanaconda3をインストールする。
    - https://www.anaconda.com/distribution/ から該当のDistributionをダウンロードして、手順に従ってインストール。
- **ポイント！** インストールが終わっても喜んでanaconda-navigatorを起動しないでステップ2へ。

## ステップ2

- ".bashrc"を加工する
    - インストールが終わるとanacondaが.bashrcに初期設定を追加する（# >>> conda initialize >>>以降）
    - anacondaが追加した行を切り取ってオリジナルの状態に戻して保存する。


```xml:bashrc(更新後)
# .bashrc
# Source global definitions
if [ -f /etc/bashrc ]; then
        . /etc/bashrc
fi

# Uncomment the following line if you don't like systemctl's auto-paging feature:
# export SYSTEMD_PAGER=
# User specific aliases and functions

# >>> conda initialize >>> <--ここから
# !! Contents within this block are managed by 'conda init' !!
__conda_setup="$('/home/seimeisama/anaconda3/bin/conda' 'shell.bash' 'hook' 2> /dev/null)"
if [ $? -eq 0 ]; then
    eval "$__conda_setup"
else
    if [ -f "/home/seimeisama/anaconda3/etc/profile.d/conda.sh" ]; then
        . "/home/seimeisama/anaconda3/etc/profile.d/conda.sh"
    else
        export PATH="/home/seimeisama/anaconda3/bin:$PATH"
    fi
fi
unset __conda_setup
# <<< conda initialize <<< ここまで
```
## ステップ3
- 切り取った行を別のファイルに貼り付ける。
    - 今回は、.bashrc_condaというファイルを作って貼り付けた
    - 編集した二つのファイルの中身はこんな感じ。

```xml:.barshrc
# .bashrc
# Source global definitions
if [ -f /etc/bashrc ]; then
        . /etc/bashrc
fi

# Uncomment the following line if you don't like systemctl's auto-paging feature:
# export SYSTEMD_PAGER=
# User specific aliases and functions
```

```xml:.bashrc_conda
# >>> conda initialize >>> 
# !! Contents within this block are managed by 'conda init' !!
__conda_setup="$('/home/seimeisama/anaconda3/bin/conda' 'shell.bash' 'hook' 2> /dev/null)"
if [ $? -eq 0 ]; then
    eval "$__conda_setup"
else
    if [ -f "/home/seimeisama/anaconda3/etc/profile.d/conda.sh" ]; then
        . "/home/seimeisama/anaconda3/etc/profile.d/conda.sh"
    else
        export PATH="/home/seimeisama/anaconda3/bin:$PATH"
    fi
fi
unset __conda_setup
# <<< conda initialize <<<
```

##ステップ4
- 二つのファイルができたら念の為再起動してGNOMEが立ち上がるか確認する。
- GNOMEが立ち上がることが確認できたらOK！

##ステップ5
- さて、anaconda-navigaorを起動する、、、**その前に**、以下の一行をターミナルに打つ

```
$ source .bashrc_conda
```
- condaが指定したパスが読み込まれた後で、anaconda-navigatorを起動する。
- うまく行けば、無事にanacondaのナビゲーターが起動する。

#まとめ
 極めて原始的な方法で恥ずかしいが、一応、これで動いているので自分的にはOK♪

#追記
- 上記の方法に行きつく前、.bashrcを元の状態に戻してナビゲーターを起動する前に以下のようにパスだけを追加していた。

```
$ export PATH="/home/seimeisama/anaconda3/bin:$PATH"
```

- これだけでもナビゲーターが起動して、jupyter Notebookも使えてご機嫌だったのだが、仮想環境を追加しようとしたら問題に直面。 以下の設定ウィンドウのPackageのリストにPythonのパッケージが表示されないことが判明。
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227550/fbe4aad6-d39d-d8f1-ba42-68d1d5c4ea52.png)
- 直観的に原因を突き止めて（ただの勘）、上記の方法を試したら無事に仮想環境が追加できるようになりました。（汗）
ScrumMasterに必要なあれこれ（作成中）

# ScrumMasterに必要な５つのコミュニケーションスキル

## Mentoring

### 参考図書

- [１分間メンタリング](https://books.rakuten.co.jp/rb/15238601/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72265/37e80838-137f-8a1a-261e-d113b2cfb0e5.png)

### ゴール

以下について理解すること。

- どうやってメンター・メンティーを見つけるか？
- 仕事や家庭に望ましい変化を起こすには、どう連携しあえば良いか？
- 簡潔なアドバイスを、どう実践すれば良いか？
- 年齢や社会的背景の異なる人物から、どうやって知恵やスキルを引き出せばいいのか？

### メンタリングの６つの鍵

- Mission：ミッションを定める
- Engagement：絆を深める
- Network：人脈を広げる
- Trust：信頼を築く
- Opportunity：チャンスを分かち合う
- Review and Renewal：振り返り、新たにする

### メンタリングとコーチングの違い

- コーチングは、短期的なタスクごとの問題を取り扱う
    - 例）Javaでユニットテスト＆カバレッジを取るための良いツールが知りたい
- メンタリングは、より大局的で長期的な目標を扱う
    - 例）アプリケーションエンジニアとプロジェクトマネージャーのどちらが自分に向いているのだろうか

### 雑記

- 助けを求める意思を持つことが、メンタリングの重要な第一歩

## Coaching
## Teaching
## Facilitating
## Situationalization
VSCodeを入れたら最初にすること

※随時更新

# プラグインを入れる
## [Smart split into lines](https://marketplace.visualstudio.com/items?itemName=JulioGold.vscode-smart-split-into-lines)
複数行選択したらそれを複数カーソルに変えてくれる。(Sublime Textの `cmd+shift+l` に当たる機能)

# ユーザー設定(settings.json)
```json
{
    "java.home": "/Library/Java/JavaVirtualMachines/jdk-9.0.4.jdk/Contents/Home",
    "python.pythonPath": "python3",
    "explorer.confirmDragAndDrop": false,
    "window.zoomLevel": 0,
    "git.confirmSync": false,
    "git.autofetch": false,
    "explorer.confirmDelete": false,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
}
```

# キーバインドの設定(keybindings.json)
```json
[
    {
        "key": "shift+cmd+l",
        "command": "smart.splitIntoLines",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+cmd+u",
        "command": "editor.action.transformToUppercase"
    },
    {
        "key": "ctrl+cmd+l",
        "command": "editor.action.transformToLowercase"
    }
]
```
ROS2でpigpioの利用 -準備・情報-

[ROS2関係トップページへ](https://qiita.com/NeK/items/7ac0f4ec10d51dbca084)

# 概要
ROS2とpigpioでRaspberry piの制御を行うための準備や情報をまとめたもの．
対象言語はC/C++となる．
DebianにてROS2を使用する場合，sourceからbuild, installが必要なためUbuntuを対象とする．

# 準備
- [Raspberry Pi 3/4にUbuntuをインストール](https://qiita.com/NeK/items/a16cbc33dd3195226940)
    - Ubuntu Server 20.04

## pigpioインストール
[pigpio公式]からDL, 公式どおりにインストール．

### 

# pigpioを用いたプログラム作成
[pigpio公式]のpigpio C I/Fを見ながら作ればOK．
基本的には，

- 下記をインクルード
    - #include \<pigpio.h\>
- pigpio C I/Fの関数に関する説明を見ながら作成
- ビルドについて
    - オプション
        - -Wall -pthread
    - リンク
        - -lpigpio
        - 以下はいらない
            - -lrt
                - libgccに含まれただかなんだか

# ROS2でのpigpio利用
プログラム作成に関しては他と同じ．
pigpioで注意すべき点は，ビルドに関する部分．つまりCMakeLists.txtに関係する部分．
以下は関係する部分を抜粋．

```CMakeLists.txt
target_compile_options([ターゲット名]
  PUBLIC -Wall -pthread
)
target_link_libraries([ターゲット名]
  pigpio
)
```

# その他情報
## GPIOピンについて
Raspberry Piの場合，チップによるピンの数え方と基板上からみたピンの数え方が違う．pigpioではチップによるピンの数え方をしているので注意．

またチップ上のピンに対する設定などは以下のp.102あたりが役に立つ．

- [BCM2835](https://www.raspberrypi.org/app/uploads/2012/02/BCM2835-ARM-Peripherals.pdf)
    - BCM2835であるがraspberry pi 3B/3B+にも使える

## GPIOピンの配置図
下記のページにて紹介している．

- [Raspberrypi.orgのGPIO](https://www.raspberrypi.org/documentation/usage/gpio/README.md)
- [Raspberry Pi3でpigpioライブラリを使ってLチカする](https://qiita.com/yuuri23/items/597fd1a40c63627e59c2)

## プルアップ/プルダウンについて
ちゃんと見とこうね．

- [【電子工作】プルアップ回路とプルダウン回路とは？（危険回路についても）](https://qiita.com/nishiwakki/items/e921d44a00a37c72979c)
- [ツール・ラボ 第22回Raspberry PiのGPIO概要](https://tool-lab.com/raspberrypi-startup-22/)


## PC使ったRaspberry Pi開発手順
- [PC使ったRaspberry Pi開発手順](https://qiita.com/NeK/items/d3b6114c85d51823fb6e)
- [Raspberry PiでのプログラミングはAtomエディタが便利](https://mimimopu.com/atom_raspberry_pi_programing/)
    - Atomを使用する場合，こっちの方が圧倒的に楽ちん

# 参考
- [pigpio公式]
- [githubのpigpio.h](https://github.com/joan2937/pigpio/blob/master/pigpio.h)
    - 細かいところを調べるのに重宝．
- [からあげ Raspberry PiのGPIO制御の決定版 pigpio を試す](https://karaage.hatenadiary.jp/entry/2017/02/10/073000)
    - ここでpigpioを知った．
- 腰も砕けよ 膝も折れよ
    - すごくわかりやすく書いてある．素敵．
        - [その1](https://decafish.blog.so-net.ne.jp/2016-10-15),[その2](https://decafish.blog.so-net.ne.jp/2016-10-16),[その3](https://decafish.blog.so-net.ne.jp/2016-10-20),[その4](https://decafish.blog.so-net.ne.jp/2016-10-22),[その5](https://decafish.blog.so-net.ne.jp/2016-10-29),[その6](https://decafish.blog.so-net.ne.jp/2016-11-13),[その7](https://decafish.blog.so-net.ne.jp/2016-12-11),[その8](https://decafish.blog.so-net.ne.jp/2017-01-09),[その9](https://decafish.blog.so-net.ne.jp/2017-01-29),[その10](https://decafish.blog.so-net.ne.jp/2017-02-05),閑話もあった気がする．
- [Raspberry Pi3でpigpioライブラリを使ってLチカする](https://qiita.com/yuuri23/items/597fd1a40c63627e59c2)
- [ツール・ラボ 第22回Raspberry PiのGPIO概要](https://tool-lab.com/raspberrypi-startup-22/)

[pigpio公式]:http://abyz.me.uk/rpi/pigpio/index.html
【ネタ】正六面体をクリスタルみたいに立てようとしたら失敗した件

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102207/b044c950-c3f3-0303-fa9b-9f0706a2bbbc.png)
ラミエル。君は正八面体だったんだね

※この記事はネタなので答え合わせはありません

#こうしたかった
![cube.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102207/c77bb9a8-892c-f5ad-3580-cd4dca64f387.gif)


#最初に考えたやりかた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102207/321efaae-9bd6-9c2a-2865-8971967a5c94.png)まずX軸を45度傾ける。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102207/b140dae3-9c0d-1c91-3982-bb5a0009dfe7.png)Z軸も45度傾ける？(脳内では左の図は正方形にみえてる)

```javascript

	let box = new THREE.LineSegments(
		new THREE.EdgesGeometry(new THREE.BoxBufferGeometry(160, 160, 160)),
		new THREE.MeshLambertMaterial({color: "black"})
	);
	//X軸で45度傾ける
	box.rotation.set(deg2rad(45), 0, 0);
	//(ワールド座標系の)Z軸で45度傾ける
	let axis = new THREE.Vector3(0, 0, 1);
	box.rotateOnWorldAxis(axis, deg2rad(45));
```

#なぜこうなった！！
![cube2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102207/2a27a53d-dd5c-2abd-52a9-1405f3244c8f.gif)


算数のお勉強を復習しなきゃ・・・(´・ω・`)
aタグ内のテキストに長いURLを入れると文字が折り返されないとき


aタグ内のテキストに長いURLを入れると文字が折り返されないときがある。


たとえば

```html
<a href="http://www.test.co.jp/foooooooooo/baaaaaaaaaaaaaaa/restaurant/" target="_blank">
    http://www.test.co.jp/foooooooooo/baaaaaaaaaaaaaaa/restaurant/
</a>
```
なんて指定したときに、aがもっているテキストは改行されずに親要素を突き抜けて、1行で表示される。


## 解決策

```css
a {
    word-wrap:break-word;
}
```

そんなときは上記の`word-wrap:break-word;`を指定する。

### word-wrap:break-word;とは

> break-word
> anywhere の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。

引用元: https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap


これで親要素を突き抜けずにいいかんじに改行が入る。
AutoAIでお手軽機械学習(その1) 準備編

# はじめに
 　**AutoAI**は、**IBM Cloud**のAI開発環境である**Watson Studio**上の1機能です。
　その特徴は、従来経験豊富なデータサイエンティストしかできなかった**様々なチューニング作業を自動的に行い、高精度の機機械学習モデル構築を行える**点にあります。
お試しで使うレベルであれば、**無料で利用可能なライトプランのインスタンスのみの組み合わせで可能**で、実質無料で試してみることができます。　
  当記事は、この機能を使ってみたい方が、事前準備として必要なセットアップの手順をまとめたものです。

[更新履歴] 
2022-01-16 ライトアカウントがなくなった点を反映
2020-04-25 メインの登録手順を別文書のリンクにしました(保守性向上のため)。

# セットアップ手順
具体的なセットアップ手順は、下記リンク先を参照して下さい。

[無料でなんでも試せる! Watson Studioセットアップガイド](https://qiita.com/makaishi2/items/b666f847a98c2e42dfbb)
[Watson Studioで追加サービスの登録を行う](https://qiita.com/makaishi2/items/39393d27d71301bafae5)

AutoAI利用の続きの手順は以下に記載されています。
 
[AutoAIでお手軽機械学習(その2) モデル構築編](https://qiita.com/makaishi2/items/d6cd449f7a9f7186a833)
[AutoAIでお手軽機械学習(その3) Webサービス編](https://qiita.com/makaishi2/items/e5ad4d068bd364fdc056)
[AutoAIでお手軽機械学習(その4) Jupyter Notebook編](https://qiita.com/makaishi2/items/0c59ae675362c9f85640)
[AutoAIでお手軽機械学習(その5) API編](https://qiita.com/makaishi2/items/12061696efc97bc1c747)
底辺プログラマがサーバ管理者を目指す　その１

# 概要
底辺のプログラマが給料を増やす為に転職を視野に入れながら勉強していく内容を綴った忘備録です。
プログラミングの知識は浅い知識しかありませんので、
もし不備や間違いなどに気づいた方がいらっしゃったらどんどんコメントを頂けると幸いです。

# 目指すもの
まずはともあれ目標です。

1. 自分でサーバを立てポートフォリオサイトを作成する
2. サーバのセキュリティや更新などの管理をできるようにする

以上のことをとりあえず目標と考えています。

# 開発環境
開発環境は以下の通りです。
VMwareにubuntuを作ってVSCodeをインストールして開発しています。

**ホストOS**：Windows 10 Pro
**仮想化ソフト**：VMware(R) Workstation 15 Pro
**ゲストOS**：ubuntu 18.10(Cosmic Cuttlefish)
**統合開発環境**：Visual Studio Code

# あとがき
とりあえず今回は全く内容がありませんが次からどんどん実践していきたいと思います。
Docker image 一覧を容量順でソートする

`docker images` や `docker image ls` の出力をイメージサイズ順で並び替える方法です。

```
docker images --format "table {{.Size}}\t{{.Repository}}:{{.Tag}}\t{{.ID}}" | sed -e '1d' | sort -h -r
```

上記のコマンドを実行すると以下のような出力が得られます。

```
1.83GB              codelibs/fess:13.2                             eb10fdc61ad9
814MB               golang:1.12.7-buster                           be63d15101cb
757MB               golang:1.11.10                                 69a024a6ecf5
350MB               golang:1.12.5-alpine                           c7330979841b
102MB               ubuntu:18.04                                   d131e0fa2585
87MB                python:3.7-alpine3.9                           cd2b35632442
79.1MB              python:3.6-alpine3.9                           f5522c1c3739
71MB                node:10.15.3-alpine                            d7c77d094be1
69.2MB              debian:10-slim                                 83ed3c583403
55.3MB              debian:9-slim                                  92d2f0789514
5.53MB              alpine:3.9                                     055936d39205
```

`sort -h` (--human-numeric-sort) により GB, MB 表記のままでもソートできます。
Bootstrap の グリッドシステム で ある画面幅以上で col を 非表示 にする

# 目的
Bootstrapのレスポンシブデザインに対応したグリットシステムの記載方法を応用して、ある画面幅以上になったら該当divを非表示にする方法をまとめる。
※グリットシステムの基本を知りたい方は[こちら](https://qiita.com/miriwo/items/e7487ea94d46d951cc91)を参考にしてください。
※レスポンシブデザインの基本を知りたい方は[こちら](https://qiita.com/miriwo/items/7a5f066a42f32467e894)を参考にしてください。

# 押さえるポイント
- 非表示にしたいdivのクラス名に`d-none`とする。
※dはdisplayの略らしい
- 前述のクラス名と画面のサイズを指定することによりこの画面サイズ以上は非表示にする、といった設定ができる
- 12領域を使用して表示している要素をMedium(md)の画面幅から非表示したいときのクラス名は下記となる
class="col-12 d-md-none"

# グリッドシステムの書き方の例
#### 画面幅がMedium(md)以上のときに、全ての画面幅において12分割された内の8領域と4領域を使用してテキストを表示していたものと8領域の「おはよう」のみ表示する。
- 下記にHTMLファイルの内容を記載する。

``` html
<div class="container">
  <div class="row">
    <div class="col-8">
      <h1>おはよう</h1>
    </div>
    <div class="col-4 d-md-none">
      <h1>こんにちは</h1>
    </div>
  </div>
</div>
```

↓プレビュー

![colを非表示にする_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/59aad773-c9c5-2cdb-4c88-973d860dfd56.png)

![colを非表示にする_2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/ef4a0628-4052-50e9-5325-3be08ed3bc42.png)
【Rails  部分テンプレート(render partial)を用いたviewを別コントローラから呼び出す(render template)】

##はじめに
業務にて、コントローラ(1)のアクションAでview(a)を表示するためにrenderを使い、別コントローラ(2)のアクションBで呼び出されるview(b)を呼び出した。しかし、view(b)は部分テンプレートを使っておりview(a)が上手く表示されない……という事態に。
解決できたのでメモしておきます。

##[前提１] コントローラ内で使う renderメソッド
renderメソッドは、コントローラのアクション内で呼び出すview(テンプレート)を指定します。
他に使われることの多いredirect_toは、指定したURLへ直接リダイレクトされます。

renderメソッドにはオプションが複数あります。

#####同一コントローラ内の他のアクションに対応するviewを呼び出す場合 [render action]

```admin_controller.rb
#app/views/admin/edit.html.erbを呼び出す
def update
  if @post.save
    redirect_to('/admin/index')
  else
    render action: :edit
end
```

#####レイアウトを指定して呼び出す場合[render layout]

```admin_controller.rb
#app/views/layouts/hoge.html.erbをレイアウトとして呼び出す
def edit
  @article = Posts.find_by(id: params[:id])
  render layout: 'hoge'
end
```

#####別のコントローラーのアクションに対応するviewを呼び出す場合[render template: 'コントローラ名/アクション名']

```admin_controller.rb
#app/views/home/indexを呼び出し、app/views/layouts/hoge.html.erbをレイアウトとして呼び出す
def preview
  render template: 'home/index', layout: 'hoge'
end
```
本題では３つ目の`render template`を使います。

他にもjsonを返す`render json`や、アプリケーション外のテンプレートを表示する`render file`などがあります。(http://railsdoc.com/references/render)

##[前提２]　部分テンプレート　viewで用いるrender partial
viewで繰り返し表示するパーツや、共通のパーツは部分テンプレートにまとめることができます。
ここではpostモデルにtitleカラムを持つものとします。

```app/views/home/index.html.erb
<div>
<%@posts.each do |post|%>
...
  <div>
  <%= render partial: "title", locals: { title: post.title }%>
  </div>
...
<%end%>
</div>
```

```app/views/home/_title.html.erb
<p>タイトルは<%=title %>です</p>
```

view内での書き方は、
`render partial: "呼び出すファイル名", locals:{ local変数(呼び出すファイル内で用いる変数名):  渡す値 }`です。



##[本題]　部分テンプレート(render partial)を用いたviewを別コントローラから呼び出したい
ここからが本題です。
[前提１]の３つ目の例と[前提２]の２つのファイルを使います。

・コントローラ

```admin_controller.rb
#app/views/home/indexを呼び出し、app/views/layouts/hoge.html.erbをレイアウトとして呼び出す
def preview
  render template: 'home/index', layout: 'hoge'
end
```


・呼び出すview（テンプレート）

```app/views/home/index.html.erb
<div>
<%@posts.each do |post|%>
...
  <div>
  <%= render partial: "title", locals: { title: post.title }%>
  </div>
...
<%end%>
</div>
```

まずは、admin_controllerのpreviewアクションに対応するviewを作ります。

```app/views/admin/preview.html.erb
#app/views/home/index.erbがテンプレートとして入ります。何も記入しなくてOKです。
```

これだけだと、'title'というviewが見つからないとエラーが出てしまいました・・・。
コントローラに`render partial: 'home/title`を追加してみるもエラー。

試しに、`app/views/admin/_title.html.erb`というファイルを作ってみると、エラーは解消されたが何も表示されず。

中身を表示させてしまえば良いのかと思い、ここでも部分テンプレートを使ってみることに。

```app/views/admin/_title.html.erb
<%= render partial: "home/title", locals: { title: post.title }%>
```

これで無事に内容が表示されました。
別コントローラの部分テンプレートを用いる際は`render partial "コントローラ名/ファイル名"`で良さそうです。
"home/_title"では上手くいきませんでしたのでアンダーバーは不要…。

##まとめ
部分テンプレート(render partial)を用いたviewを別コントローラから呼び出す際は、
１.アクションに対応するviewファイルを作る
2.呼び出すviewの部分テンプレートと同名のviewファイルを作る
3.２で作ったファイルで、元の部分テンプレートを呼び出す


##終わりに
render templateしたら、呼び出した先の部分テンプレートも連れてきてくれるものだと勝手に思っていたので勉強になりました。
初心者ですので、間違っている点や他の方法等あればご指摘いただけますと幸いです。
JFreeChart-パイチャート-UIで特定データを強調する


目次 ⇒ [JFreeChartサンプル](https://qiita.com/artery/items/3e9c63e5c14a9e965c97)

```java
package jp.avaj.lib.chart;

import java.lang.reflect.InvocationTargetException;

import org.jfree.chart.ChartFrame;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.PiePlot;
import org.jfree.chart.plot.Plot;
import org.jfree.data.general.DefaultPieDataset;
import org.jfree.data.general.PieDataset;

/**
■ JFreeChart-パイチャート-UIで特定データを強調する

・ArcPieChartEmphasizeWinをnewするとボタンが並んだ画面が表示される。
・ボタンを押下すると対応するデータが強調表示される。

 */
public class Chart04_02 {
  // 目次-パイチャート(PieChart)
  A_Chart04 a_Chart04;
  // 目次-Artery-JFreeChart用のライブラリ
  A_Chart00 a_LibChartSampeContents;


  /** 商品の売上数のデータからパイチャートを生成する */
  public static void main(String[] args) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, InvocationTargetException {
    // PieDatasetを作成する
    DefaultPieDataset dataSet = new DefaultPieDataset();
    dataSet.setValue("商品A",200);
    dataSet.setValue("商品B",150);
    dataSet.setValue("商品C",90);
    dataSet.setValue("商品D",120);
    dataSet.setValue("商品E",230);

    // Plotを生成する
    PiePlot piePlot = new PiePlot((PieDataset)dataSet);

    // チャートを生成する
    JFreeChart jfreeChart = new JFreeChart("商品別売上高",(Plot)piePlot);
    //
    ChartFrame cFrame = new ChartFrame("PieChartFrame",(JFreeChart)jfreeChart);
    cFrame.pack();
    cFrame.setVisible(true);

    // UI画面を表示する
    ArcPieChartEmphasizeWin win = new ArcPieChartEmphasizeWin(cFrame,piePlot,dataSet);
  }
}

```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278568/bb5a05b5-7c4f-2552-9ed1-0f0067df1719.png)
codeigniterのsql実行時に実行場所のファイル名、関数名、ライン番号をコメントで含めてデバッグ表示に出す。

Codeigniterではデバック機能でmysql実行機能とかが一覧で見れて大変助かるのですが、プログラムが大きくなってくると大量のsqlが発行されて、それがどこで実行されているのかとかがわからなくなってしまいます。

というわけで、sql文にコメント文章でどこで実行されたのかとかを含めていきたいと思います。

## query builderをオーバーライド

Codeigniterではsql実行時に大体getを使って情報を取得します。なので、getを少し改変して開発環境ならコメントを挿入するようにすます。

オーバライドの方法はMY_LoaderでCI_DBを読み込む前に自前のquery_byilderを作って読み込ませる方法を使います。

<a href="https://a-zumi.net/codeigniter3-querybuilder-extend/" target="_blank">【CodeIgniter3】クエリービルダー（旧アクティブレコード）を拡張する方法 - あずみ.net</a>

これで、俺俺query builderを作ります。

早速getを上書きします。

``` php:DB_query_builder.php
	protected function _compile_select($select_override = FALSE)
	{
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
		return $sql;
	}
```

returnされる「$sql」を最後でデバックコメント追加すればOKですね。

コメントに含めるのはdebug_backtraceのログです。実行されたログがたどれますので、便利です。適当なhelperに入れて関数化しておくと、sqllログだけじゃなく、どこでも使えます。

~~~~ php
if(!function_exists('backtrace')){
	function backtrace($brake_function = 'backtrace', $limit = 0, $last_splice = 0){
		$return = false;
		$trace
				= defined('DEBUG_BACKTRACE_IGNORE_ARGS') ? debug_backtrace(DEBUG_BACKTRACE_IGNORE_ARGS, $limit) : debug_backtrace();
		while($callee = array_pop($trace)){
			$callee = array_intersect_key($callee, array_fill_keys(array('file', 'function', 'line', 'class'), false));
			extract($callee, EXTR_OVERWRITE);
			if(isset($callee['class']) &&
			   get_instance()->router->class == mb_strtolower((string)$callee['class'])){
				$return = [];
				continue;
			}
			if($brake_function == $callee['function']) break;
			$return[] = $callee;
		}
		$result = '';
		if(is_array($return)){
			if($last_splice > 0 && count($return) > $last_splice){
				array_splice($return, count($return) - $last_splice, $last_splice);
			}
			foreach($return as $r){
				$result .= "{$r['file']} -> {$r['function']}:{$r['line']}\n ";
			}
		}
		return $result;
	}
}

~~~~

基本的にはControllerを経由して実行されますので、そこからログを取り、それをstringで出力します。

brake_functionでbreak発動させる関数名、limitで行数、$last_splitで最後から指定数行を削除、という感じです。

~~~~ php:MY_query_builder.php
	protected function _compile_select($select_override = FALSE)
	{
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
		if(ENVIRONMENT === 'development'){
			$sql.= "\n/*\n " . backtrace('_compile_select') .  ' */';
		}
		return $sql;
	}
~~~~

で、実行されるsql文に含めてあげます。


~~~ sql
	SELECT *
FROM `entities`
WHERE `entities`.`type` = 'object'
/*
 /hoge/application/controllers/App.php -> get_by_many_objects:25
 /hoge/application/third_party/aoringo_system/libraries/Acore/drivers/Acore_objects.php -> get_many:342
 /hoge/application/third_party/aoringo_system/libraries/Acore/drivers/Acore_objects.php -> get:68
  */ 
~~~

これでsqlログにデバッグが乗るようになりました。

本番環境ではもちろんこのログは乗りません。開発環境では少しくらい実行時間が伸びたとしても問題ありませんよね。ほくほくです。
MariaDB のコンテナ起動時に init.sql を流す

MariaDBのコンテナ起動時に、ユーザー追加やデータベース作成などを済ませておきたかった。

以下、[dockerhub](https://hub.docker.com/_/mariadb?tab=description)より。

> Initializing a fresh instance

> When a container is started for the first time, a new database with the specified name will be created and initialized with the provided configuration variables. Furthermore, it will execute files with extensions .sh, .sql and .sql.gz that are found in /docker-entrypoint-initdb.d. Files will be executed in alphabetical order. You can easily populate your mariadb services by mounting a SQL dump into that directory and provide custom images with contributed data. SQL files will be imported by default to the database specified by the MYSQL_DATABASE variable.

どうやらホストマシンのディレクトリに実行したいSQLファイルを入れていおいて `/docker-entrypoint-initdb.d` というディレクトリにマウントするとできるらしい。

### setup ディレクトリに init.sql を配置

適当なディレクトリに init.sql を入れておく。

```sh
$ cat ./setup/init.sql
CREATE USER me IDENTIFIED BY 't_horikoshi';
CREATE DATABASE `mydb`;
GRANT ALL PRIVILEGES ON `mydb`.* TO me IDENTIFIED BY 'me';
```

### コンテナ起動

`-v`オプションに `init.sql` を含んだディレクトリを `/docker-entrypoint-initdb.d` にマウントするように指定する。

```sh
$ docker run -itd --name mymariadb  \
   -p 3306:3306 \
   -e MYSQL_ROOT_PASSWORD=root \
   -v="$PWD/setup":/docker-entrypoint-initdb.d \
   mariadb:latest
```

### 結果確認

コマンドラインを立ち上げる。

```sh
$ docker exec -it mymariadb mysql -uroot -p -h 127.0.0.1
```

クエリを打って確認。

```
MariaDB [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mydb               |
| mysql              |
| performance_schema |
+--------------------+
```

**mydb**が作成されていることが無事確認できました。
ちなみに[MySQL](https://hub.docker.com/_/mysql)も同じらしい。
非エンジニアの社長にReactとは何かを説明する2.5

# 非エンジニアの社長にReactとは何かを説明する2.5
[前回](https://qiita.com/xx2xyyy/items/feed9dfe6bb2e657d69c)の記事を社長に見せたところ、
「第一回はともかく第二回はハードルが高すぎる、もっとわかりやすく」との物言いがつけられてしまいました。

確かにちょっとエンジニアよりになってしまっている気はしていたので、よりかみ砕いた記事を書きます。

## Webページが動く時、裏で模様替えが行われている
[第一回](https://qiita.com/xx2xyyy/items/feed9dfe6bb2e657d69c)で、WebページはHTML形式のデータで表現されており、何か動きがあるときはjavascriptがそれを書き換えていると説明しました。
これだけ聞くと簡単そうですが、第一回で紹介したF12で開く開発者ツールから見ると、Webページの裏で動いているHTMLデータはかなり大規模で複雑な構造を持っているのが分かるかと思います。

ちょっと動きがあるたびに、大規模な施設の模様替えが行われているようなものです。

### javascriptは事前の指示書である
ブラウザ上での画面の動きを模様替えに例えると、エンジニアは、そのプランを練るホワイトカラーのような存在です。
目的(特定の画面)を実現するために必要なレイアウト(HTMLの構造)は分かっていますが、自分で現場に出て作業を行ったり逐一指示を出すことは出来ません。
現場はユーザーのPC上なので、ここで作業できるのはブラウザだけです。

一方、ブラウザは実際に現場で作業が出来ますが、命令通りに動くことしかできません。
人間ではないので、「指示待ちしてないで自分で考えろ」とか怒っても無駄です。
よって、エンジニアは詳細なマニュアルやフローチャートを作って事前にブラウザに渡しておくことが必要です。
JavaScriptというのは言ってみればこのマニュアルです。

### 複雑なフローチャートやマニュアルを完璧に作るのは難しい
しかしながら、融通の利かないブラウザでも大丈夫な完璧なマニュアルを精密に作るのは難しいです。
人間と違って空気を読んで変な内容だったら質問したり調整したりしてくれることもなく、
忠実にマニュアル通りに処理をしてしまうので、細部まで完璧に指示してあげないといわゆる「バグ」が起こってしまいます。
完璧に作るためにそもそも作業が大変ですし、本当に完璧にできているのか色々なパターンで予行演習をしてみる(テストをする)ことも必要になって非常に面倒です。

#### 単純化というアプローチ
そこで、エンジニアというものは指示の単純化を考えます。
模様替えにおいて最低限の物の動きで済むように導線を最適化したり、
以前の配置と目的の配置を比べて移動しなくていいものは移動させないようにしたりと言った工夫を放棄して、
「とりあえず現在置いてあるものを全部外に出して目的の形に1から並べなおせ」
という風にできないかと考えます。

こうするとマニュアルがシンプルになるのでミスや想定外の動きが減ります。
人間相手にこういうマニュアルを出すと、「効率悪いんじゃない？」と言ったような文句が出てくることもありますが、
機械相手ならそういう心配はありませんし、単純作業の類は得意なので大抵の場合はうまく行きます。
このような単純化はエンジニアにとっては習い性のようなものです。

#### ブラウザ上の画面表示は安易に単純化できない
が、ことブラウザ上での要素の描画に関しては、うまく行かないレアケースに当たります。
模様替えに例えて言うと、動かすのにものすごく時間のかかる重い荷物が存在するようなもので、
「一旦全部外に出せ」というような雑な命令だときちんと計画を立てた場合に比べて時間がかかりすぎてユーザーに怒られてしまいます。
よって、エンジニアは面倒でも綿密なプランを立てなければならないのです。

### Reactという救世主
エンジニアからすると絶望的なこの描画の最適化ですが、ここでReactが登場します。
このReactは細かい命令を出したくないエンジニアと詳細な作業手順が必要なブラウザの間を取り持ってくれる素晴らしい存在です。

エンジニアからReactにこういう描画がしたいという情報が渡ると、
Reactは最終的にどのようなデータ構造が必要になるのか、内部的に計算を行い最終的な目標を定めます。
そして、その目標と現在の状態を比較して、最適化されたプランを作成・実行してくれるのです。

いわば、大雑把な指示さえ与えれば、現場で臨機応変に計画を立てて動いてくれる現場監督ですね。

## まとめ
* 画面の描画をエンジニアが手動で制御しようとするととても面倒臭い
* Reactはその面倒な作業を現場で臨機応変にやってくれるすごいやつ

[続き](https://qiita.com/xx2xyyy/items/6101f6180ce748718eb7)
忘れっぽいシリーズ（ジブンヨウ）

#HTML

#エスケープ文字
###半角スペース
`&#32;`

#CSS

###１文字目字下げ
`text-indent`で字下げする。
`em`は1文字分といった意味です。

```text_indent.css
 p {
    text-indent: -1em;
 }
```

###上下中央
vertial-alignやmerginなどで上下中央できない場合はこれを使う！
transformで-50%してあげることで、どんなサイズであっても真ん中になる。

```test.css
 .parent {
    position: rerative;
 }

 .parent .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
     -webkit- transform: translateY(-50%);
 }
```

###上下左右中央

```test.css
 .parent {
    position: rerative;
 }

 .parent .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
     -webkit- transform: translateY(-50%) translateX(-50%);
 }
```


###テキストを両端揃え
`text-align-last: justify;`

IE・Edgeは
`text-justify: inter-ideograph;`

Safariはどちらも非対応のため、別のスタイルにしたほうが良い。

###1文字目指定
`:first-letter`

###buttonタグのフォーカス時の線やら影を消す。
`outline: 0;`

###四角の上辺・下辺のみを角丸にする。
`border-radius: 4px 4px 0 0;`
border-radiusのプロパティは**左上**・**右上**・**右下**・**左下**の順番で指定していく。
上記の例は上辺のみを角丸としている。

##CSSセレクタ

###classやidが付与されているやつだけセレクタ 
```selectar.css
p[class]{
    padding: 0;
}
p[id]{
    padding: 0;
}

/*付与されていないもの*/
p:not([class]){
    padding: 0;
}
p:not([id]){
    padding: 0;
}
```
#js(jQuery)

###スマホでのクリックイベントの発火
`touchstart`や`touchend`を使うとiosでもクリックでの発火ができる。
かつイベントハンドリングを`$(document)`とすることでAndroidも機能する。

###処理終了
`exit`(返しなし)
`return`

#Sublime便利シリーズ

###HTMLタグを正規表現で検索
`<([^"'>]|"[^"]*"|'[^']*')*>`

###コメントアウトを検索
`<!([^"'>]|"[^"]*"|'[^']*')*>`

###空行を検索
`^\n`

#PHP

###エスケープ
`\`

###PHPでHTMLゴニョゴニョ
`スクレイピング`

###HTMLタグ生成の注意
`’`シングクォーテーションで全体を囲む
それでないとタグの中間にあるダブルクォーテーションなどを誤認してしまい、誤作動を起こす。

###配列に変数を追加
```[].php
<?php
//宣言
$hoge[];

$hoge[] = "タカ";
$hoge[] = "トラ";
$hoge[] = "バッタ";

var_dump($hoge);
//=>array(3) { [0]=> string(2) "タカ" [1]=> string(2) "トラ" [2]=> string(3) "バッタ" }
?>
````

###時間計算
```time.php
<?php
 $time = new DateTime();
 
 //日本時刻
 $time->setTimeZone(new DateTimeZone('Asia/Tokyo'));
 $time = $dt->format('Y/m/d H:i:s');
 print "日本時刻→" . $time;

if( strtotime(date('Y-m-d H:i')) < strtotime('2019-1-1 9:00') ){
    // 2019-1-1 8:59以前の処理
    print "time日本:$time";
}
?>
````

###配列内検索
```in_array.php
<?php
$array = ["タカ","クジャク","コンドル"];

$result = in_array("タカ", $array);
var_dump( $result );
// bool(true)

$result = in_array("トラ", $array);
var_dump( $result );
// bool(false)
?>
````

###日付(月末・月2桁表示)
```day.php
<?php

// 月末表示 2019/1/31
echo date('Y/n/t');

// 月2桁表示 2019/01
echo date('Y/m');

?>
```


###SVG
`preserveAspectRatio="none"`
svg画像を縦横比無視で可変にする魔法のコトバ
fs Promises API でawaitを使ってファイル読み書きする

Node.js の基本的な API である `fs` には、 `Promise` 対応モジュールがあります。

# fs Promises API

Node.js の API ドキュメント: [fs Promises API](https://nodejs.org/api/fs.html#fs_fs_promises_api)

> The `fs.promises` API provides an alternative set of asynchronous file system methods that return `Promise` objects rather than using callbacks. The API is accessible via `require('fs').promises`.

今まで、
 
```javascript
const fs = require('fs')
```

としていたところを、

```javascript
const fs = require('fs').promises
```

とするだけで、 `async` / `await` 対応のコードを書くことができるようになります。

## ファイルの読み込み

**BEFORE:**

```javascript
fs.readFile('some_file.txt', 'utf8', function (error, content) {
  if (error) {
    console.error(error)
  } else {
    // content を使った処理
  }
})
```

**AFTER:**

```javascript
try {
  const content = await fs.readFile('some_file.txt', 'utf8')
} catch (error) {
  console.error(error)
}

// content を使った処理
```

## ファイルの書き込み

**BEFORE:**

```javascript
const content = 'test'

fs.writeFile('some_file.txt', content, function (error) {
  if (error) {
    console.error(error)
  }
})
```

**AFTER:**

```javascript
try {
  const content = 'test'

  await fs.writeFile('some_file.txt', content)
} catch (error) {
  console.error(error)
}
```

## `import` 文で読み込む場合

`--experimental-modules` や `-r esm`、または Babel などで ESM に対応させる場合は、 `import` 文で次のように書けます。

```javascript
import { promises as fs } from 'fs'
```

簡単ですね！

皆さんも、コールバック書くのをやめて `Promise` の `async` / `await` に書き換えましょう！
CUPS サーバーとクライアントの分離

# TL; DR
Docker で CUPS サーバーのコンテナと CUPS クライアントのコンテナを作成し、クライアントから印刷を実行する。

### 動機
1. CUPS(Common Unix Printing System) の概要はわかっているつもりだが、実のところ使いこなしている感じがない。（印刷できていれば深入りしない状態、その代わり応用が利かない）
1. Docker で帳票印刷の部分を分離できれば、プリンター本体が変更されてもアプリサーバーの CUPS を変更しなくてもよいのでは？
1. cupsd ってデーモンだから、クライアントと分離できるはずだ。

# Dockerfile
### CUPS サーバー
エプソンのプリンタを使っているため printer-driver-escpr をインストールしている。単に CUPS とエプソン用のドライバーだけがインストールしてあるイメージとコンテナを作成。

```Dockerfile.server
FROM debian:latest
RUN apt-get update && apt-get upgrade && apt-get install -y \
    cups printer-driver-escpr && \
	  sed -i 's!Listen localhost:631!Listen 0.0.0.0:631!' /etc/cups/cupsd.conf && \
	  sed -i 's!Browsing Off!Browsing On!' /etc/cups/cupsd.conf && \
	  sed -i 's!<Location />!<Location />\n  Allow All!' /etc/cups/cupsd.conf && \
	  sed -i 's!<Location /admin>!<Location /admin>\n  Allow All\n  Require user @SYSTEM!' /etc/cups/cupsd.conf && \
	  sed -i 's!<Location /admin/conf>!<Location /admin/conf>\n  Allow All!' /etc/cups/cupsd.conf && \
	  echo "ServerAlias *" >> /etc/cups/cupsd.conf && \
	  echo "DefaultEncryption Never" >> /etc/cups/cupsd.conf &&\
    useradd -r -G lpadmin -M print && \ # 注意
    echo print:print | chpasswd && \ # 注意
    systemctl enable cups
CMD ["/sbin/init"]
```
※ CUPS 用にユーザーネーム; print 、パスワード; print をハードコーディングしてるので実装では注意されたし。

### CUPS クライアント
Alpine Linux に cups クライアントだけをインストールしてあるイメージとコンテナを作成。

```:Dockerfile.client
FROM alpine:latest
RUN apk --no-cache update && apk --no-cache upgrade && apk --no-cache add cups-client &&\
    mkdir /etc/cups && \
    echo 'ServerName IPAddress' > /etc/cups/client.conf
```

Dockerfile が作成できたらコンテナを立ち上げ。


```shell
docker build -t cupsd_epson -f Dockerfile.server .
docker run -dit -p 6631:631 --name epson cupsd_epson
docker inspect epson | grep IPAddress
```
割り当てられた IPAddress を把握しておく（ここでは172.17.0.2）
ブラウザで localhost:6631 からプリンターの設定を手作業でする。その際、"共有"にマークする（```lpadmin -p プリンタ名 -o printer-is-shared=true```相当）その後、

```sh
docker build -t cups_client -f Dockerfile.client .
docker run -it --name client -v $(pwd):/home cups_client /bin/sh
```

`/etc/cups/client.conf` の `IPAddress` 部分を `172.17.0.2` に書き換える( vi がデフォルトでインストール済み)。要するにどの CUPS サーバーで印刷するかを指定しておく。

# 実践
```:clientコンテナ内のシェルで
lpr -P PRINTER test.pdf
```
`PRINTER` はプリンタ名。`test.pdf` は適切に用意する。ヴォリュームをマウントしてあるので`/home`から使えるようになっている。

#### 後記
- Alpine ではうまくエプソンのドライバーをビルドできなかった。
- macOS では /etc/cups/client.conf は deprecated らしい。[client.conf(5)](https://www.cups.org/doc/man-client.conf.html)
- ServerName は1つしか指定できない（最後の ServerName のみ）なので、複数の印刷機があったら1つの CUPS サーバーにぶら下げるしかないのかな?
- `CMD ["/sbin/init"]` より `CMD ["/usr/sbin/cupsd", "-f"]`の方がいいかも。
- docker network を使う場合は `client.conf` をどう書けばよいのやら。アドレス固定しかないのか?
- いっそ各ネットワークプリンターに CUPS を搭載すればよいのに。
Bootstrap で h要素 より 目立つ 見出し を 設定

# 目的
Bootstrapを用いてh要素より目立つ見出しを設定する方法をまとめる
※Bootstrapについてまとめた投稿は[こちら](https://qiita.com/miriwo/items/1eabf221964675ba50f6)をご覧下さい。

# 前提条件
- Bootstrapの設定が読み込まれるようになっている

# 押さえるポイント
- Bootstrapで既に定義された内容を設定したい時はHTMLファイルのクラス名に定義名を記載する。
- より目立つ見出しを作る時はh要素のクラス名にdisplay-数字を追加する。
- 数字は1~4の数字で、見出しのサイズを表す。
- 1が最大の見出しで4が最小の見出しとなっている。

# 書き方の例
- h1要素のテキストを最大の見出しに設定する。
- 下記にHTMLファイルの内容を記載する。

``` html
<h1 class="display-1">おはようございます。</h1>
```
Spring LazyInitializationException: no Session


## エラー内容

```
org.hibernate.LazyInitializationException: failed to lazily initialize a collection of role: demo.model.CommunitySet.communites, could not initialize proxy - no Session
	at org.hibernate.collection.internal.AbstractPersistentCollection.throwLazyInitializationException(AbstractPersistentCollection.java:602)
	at org.hibernate.collection.internal.AbstractPersistentCollection.withTemporarySessionIfNeeded(AbstractPersistentCollection.java:217)
```

これは、コレクション（Entityのフィールド）の値をDBから取得しようとしたがDBのセッションが無い（切断されている）、という時に発生します。
つまり、トランザクションの外側でEntityのフィールドの値を取得しようとすると発生します。


## 問題箇所

```java
		List<CommunitySet> sets = communitySetRepository.findAll();
		for (CommunitySet set : sets) {
			String setname = set.getName();
			Set<Community> communites = set.getCommunites();
			System.out.println(communites.size()); // ★★ 関連エンティティにアクセスを試みるも、トランザクションが切れているので、エラーとなる
		}
```

## 原因

```@Transactional``` をつけ忘れていた。


```@Transactional``` をつけないと、各データアクセスメソッド（findAll()やsave()など）の実行時のみAUTOCOMMITが有効になります。
つまり、データアクセスメソッドが終了するとトランザクションが無効になります。
無効になっているにも関わらず関連エンティティの取得を試みたためエラーが発生しました。

対象となるクラス、もしくはメソッドに```@Transactional``` をつければ解決しました。


## ```@Transactional```を付ける場所の例

クラス変数でDBから取得するデータを使用している時は、クラスにつける。

```java
@Transactional
public class MigrationService {

	Type type1 = null;
	
	public boolean migration() throws IOException {
		type1 = typeRepository.getByName("type1");
	}
```

メソッド内だけで使用しているときは、メソッドにつける。（クラスにつけても大丈夫）
Laravelノート

#実行環境
MAMP

#環境構築
1. composerをinstall
2. composerを使ってlaravelをinstall
3. laravelにpathを通す

#基本的なコマンド
##プロジェクトを作成する
```
laravel new プロジェクト名
```
こっちはlaravelのコマンドを利用している
または

```
composer create-project Laravel/laravel プロジェクト名 --prefer-dist
```
こっちはcomposer経由
--prefer-dist はzip形式でダウンロードするから高速らしい
defaultでは --prefer-source でこっちは git clone でソースを落としてくるらしい

##アプリケーションの実行
```
cd laravelapp   //laravelプロジェクトに移動
mamp-php artisan serve
```
今の環境ではMAMPのPHPはmamp-phpでpathを通してある。alias使って。
これを実行したら、 http://localhost:8000 にアクセス。
これでトップページが表示されているはず。

これはPHPのビルトインサーバー機能を利用して実行している。
しかしあくまで動作確認用であり、本格的な運用に適したものではない。
ただこれを書いているのがだいぶ事後なんで、エラー出たら解決して。

#ルーティング
ルーティングとは特定のアドレスにアクセスしたとき、どの処理を呼び出すかを管理するための機能。
Laravelでは基本的にappフォルダ配下にプログラムを追加編集していく。

```
Route::get('アドレス'/{パラメータ?}, function(&パラメータ = 'デフォルト'){ 
　　　　return view('テンプレート名');
});
```

第一引数はアドレス。
アドレスの後に{}で括ることでパラメータを受け渡すことができる。
このパラメータには必須パラメータと任意パラメータがある。
任意パラメータの時は上記のように、パラメータの後に?をつけ、関数でデフォルト値を設定しておく。
第二引数はクロージャまたは次章で説明するコントローラーの関数を以下のように指定。

```
Route::get('アドレス', 'コントローラ名@アクション名')
```

viewという関数はテンプレートファイルをロードしレンダリングして返す。
テンプレートファイルはviewフォルダの　"テンプレート名.blade.php"

##ヒアドキュメント
```
$html = <<<EOF
<html>
</html>
EOF;
```
長文を変数に格納することができる。

#コントローラー
Laravelの特徴としてMVCアーキテクチャというものがあり、そのひとつがコントローラ。
全体の制御を担当する。
必要に応じてModelを使ってデータを取得したり、Viewを使って画面表示を作成したりする。

##コントローラの作成
```
mamp-php artisan make:controller コントローラ名
```
コントローラは、app/Http/Controllersに作成される。 
コントローラはControllerクラスを継承したクラスで定義され、アクションと呼ばれる関数を保持する。

##アクションとアドレスの関係
http://アプリケーションのアドレス/コントローラ/アクション
というのが一般的

##シングルアクションコントローラ
1つのコントローラに1つのアクションしか存在しないもの。
唯一のアクション名は、__invoke()として定義する。
ルーティングのgetメソッドの第二引数にはコントローラ名だけの記述で良い。

##Request, Response
- use を使って`use Illuminate\Http\Request or Response` 
- アクションの引数にも `Request, Response` 追加

###メソッド

- `$request -> url()` : アクセスしたurlを返す。
- `$request -> fullUrl()` : アクセスしたアドレスを完全な形で返す。（クエリ文字も）
- `$request -> path()` : ドメイン下のパスだけ返す。

- `$this -> status()` : アクセスに関するステータスコードを返す。
- `$this -> content()` : コンテンツを取得する。
- `$this -> setContent(値)` : 引数の値にコンテンツを変更する。

###詳しい内容
[【PHP超入門】HTTP（GET・POST）について]
(https://qiita.com/7968/items/4bf4d6f28284146c288f)
[【[PHP] リクエストパラメータ・セッションに関するまとめ]
(https://qiita.com/mpyw/items/7852213f478e8c5a2802)
[【PHP超入門】Cookieとセッションについて]
(https://qiita.com/7968/items/ce03feb17c8eaa6e4672)

#ビュー
Laravelではレンダリングは以下のテンプレートエンジンによって行われる。

- PHPのソースコード
- Blade 

##PHPテンプレート
- テンプレートファイルは、resources/views の中
- テンプレートは、各コントローラごとにフォルダを用意し、その中にそのコントローラーで使うテンプレートをまとめておくのが一般的。
- ルートの設定またはコントローラーのアクション中で`return view(フォルダ名.ファイル名);`とする。
テンプレートはviwesフォルダから検索される。

###変数の渡し方

ルートパラメータを使う場合

```php

public function index()($id='zero'){
    $data = ['msg' => 'ベクトル解析'
             'id' => &id]
    return view('hello.index', $data)
}
```

クエリ文字列を使う場合

```php

public function index()(Request $request){
    $data = ['msg' => 'ベクトル解析'
             'id' => $request -> &id]
    return view('hello.index', $data)
}
```
*ちなみに`=>`（ダブルアロー）は連想配列に値を代入するときに使う

#Bladeテンプレートを使う
- PHPテンプレートでは`<?php echo $msg; ?>`と書いていたが、
Bladeテンプレートでは、　`{{$msg}}`とかける。

　　*  {{ }}はHTMLエスケープしてあるから、そうさせたくないときには{!! !!}と書く 
　　
#Bladeの構文
 [Laravel 5.5 Bladeテンプレート](https://readouble.com/laravel/5.5/ja/blade.html) を参照
【Python】json.dumpしたものをjson.loadするとなぜかstring型になる

# 何が起きたか
物体検出の教師データとして、自前のデータをCOCO形式のアノテーションに変換するプログラムを組んでおりました。
COCOのアノテーションはJSON書くので、自前のプログラムにこんなコードを書きました。

```python:json.py
json.dump(json.dumps(out_dic), f)
```

COCO形式と同じ構造でアノテーションを変換したものを、辞書`out_dic`で保持しておりました。それを**`json.dumps()`でJSON形式に変換した上で、`json.dump()`でJSONファイルに保存する**コードを作成しました。

こうして作成したコードを、`pycocotools`で読み込もうとしたところエラー発生。

```
AssertionError: annotation file format <class 'str'> not supported
```

↑こんな感じで、**json.loads()で読み込んでいるはずなのにString型で読み込まれている**というエラーが発生。

# 解決
json.dump()には**json**ではなく**dict**をそのまま投げれば良い。

```python:json.py
json.dump(out_dic, f)
```

# ハマりポイント
- `json.dumps()`で変換したJSON形式のStringを`json.dump()`に投げても、エラーが出ない
- 生成したJSONファイルを直接見ても、見た目的には問題なく変換できている
- json.loads()で読み込む時にもエラーが出ない。

後から考えれば簡単なことですが、少しハマったのでシェアします。