OmniAICreator/Qiita-1.07M huggingface dataset:
codewarsを解いてBest Practicesを考察してみる

# 背景
「codewars」というプログラミング学習サイトが勉強になるなと思い最近少しづつ問題を解いています。
codewarsは他の人の答えを見ることができて、Best Practicesのソースが乗っていて非常に勉強になります。見て終わりももったいないので自分が書いたものとBest Practicesを比較して考察してみたいと思います。
言語はJavaScripを使用しました。

# 問題
入力として連続する（増加する）文字の配列を受け取り、配列内の欠落文字を返すメソッドを記述します。

常に有効な配列を取得します。そして、それは常に正確に一つの文字が欠落しているでしょう。配列の長さは常に少なくとも2つです。
配列には常に1文字のみが含まれます。

例）
['a','b','c','d','f'] -> 'e'
['O','Q','R','S'] -> 'P'

# 自分の回答
```javascript:私の回答
function findMissingLetter(array)
{
  const alphabetList = 'abcdefghijklmnopqrstuvwxyz'; 
  const startIndex = alphabetList.indexOf(array[0].toLowerCase());
    
  let count        = 0;
  let resultIndex  = 0;
  for(let i = startIndex; array.length + startIndex > i; i++) {
    if(alphabetList[i] !== array[count].toLowerCase()) {
      resultIndex = count;
      break;
    }
    count++;
  }
  
  if(isUpperCase(array[0])) {
    return alphabetList[startIndex + resultIndex].toUpperCase();
  }
  
  return alphabetList[startIndex + resultIndex];
}

// 大文字判定
function isUpperCase(str) {
  let arr = str.match(/^[A-Z]+$/);
  return arr ? true : false;
}
```

# Best Practices
```javascript:BestPractices
function findMissingLetter(array) {
  let first = array[0].charCodeAt(0)
  for (let i = 1; i < array.length; i++) {
    if (first + i !== array[i].charCodeAt(0)) {
      return String.fromCharCode(first + i)
    }
  }
  throw new Error("Invalid input")
}
```

# 考察
見てお分かりの通り、私のソースはクソです。
Best Practicesと比べて無駄が多すぎる、、、
この時点で心が折れそうですが続けます。

まずは問題についてですが、入力値はアルファベットがいくつか順番に配列に入っていて、抜けているアルファベットを出力するというもの。

私はまず、アルファベットのリストを作成して、入力値の最初のインデックスを取りました。

```javascript:私の回答
const alphabetList = 'abcdefghijklmnopqrstuvwxyz'; 
const startIndex = alphabetList.indexOf(array[0].toLowerCase());
```

一方、Best Practicesは以下。

```javascript:BestPractices
let first = array[0].charCodeAt(0)
```
charCodeAt、、、？

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
>与えられたインデックス位置の文字の UTF-16 コードユニット値を表す数値。index が範囲外だった場合、NaN。

変数firstには入力値の配列の一番最初のアルファベットのUTF-16 コードユニット値が入っているらしい。
そして？

```javascript:BestPractices
for (let i = 1; i < array.length; i++) {
  if (first + i !== array[i].charCodeAt(0)) {
    return String.fromCharCode(first + i)
  }
}
```
for文の中で```first + i```とすることで次のアルファベットを取得する。
そして、```array[i].charCodeAt(0)```で入力値の配列と比較する。

入力値と異なっていた場合は以下の処理となる。

```javascript:BestPractices
return String.fromCharCode(first + i)
```
String.fromCharCode、、、？

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

>String.fromCharCode() 静的メソッドは、指定された UTF-16 コードユニットのシーケンスから生成された文字列を返します。

これで文字コードから文字列に変換している訳ですね。

# まとめ
charCodeAtとfromCharCodeをうまく利用しているようでした。
確かにこれで大文字小文字の判定とかいらないし、いちいちアルファベットのリストとか作成しなくてもよくなる。
【HTML】loading属性で“lazy”を指定する場合、widthとheight属性が必要

loading属性とは、ブラウザがネイティブで遅延ロードをサポートするというものです。

img要素やiframe要素をHTMLの属性として指定するだけで、JavaScriptを使うことなく、簡単に遅延ロードさせることができます。

例）

```
<img src="画像パス" loading="lazy" alt="hogehoge">
```

ところがどっこい、、、

<img width="1099" alt="スクリーンショット 2019-09-18 2.43.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67591/69225156-5ece-d6aa-2ec5-59e15c2448e9.png">


>[Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323


widthとheight属性も同時に指定しないとChromeに怒られてしまいます。

```
<img src="画像パス" loading="lazy" alt="hogehoge"　width="***" height="***">
```

widthとheight属性を指定してあげれば問題ありません。
本来、横幅・高さ属性というのはレンダリング計算上、必要なものなので。。
フォルダのリストが書かれたテキストファイルからフォルダのファイル数を取得する。

```fileList.txt
C:\exist1
C:\noexist
C:\exist2
C:\exist3
```
上記のようなフォルダパスが書かれたテキストファイルを読み込み、そのフォルダにあるファイル数をそれぞれ取得する。


```fileCounter.py
import os, os.path
folders = open("fileList.txt", "r")

for folder in folders:
    if os.path.exists(str(folder).rstrip()):#読み込めるフォルダ内のファイル数を表示
       filenum=len(os.listdir(str(folder).rstrip()))
       print (folder)
       print (filenum)
    else:　#読み込めないフォルダを表示
        print("can not read path")
        print(folder)
folders.close()
```
SQL データベース基礎中の基礎

ドットインストールでの学習が捗らなかったので初心に帰ってProgateでSQLのカリキュラムを勉強した。



①データベース..テキストや数値といったデータを保存するツール。特定のデータを集めたものを整理して後で使いやすくするデータの塊。

②クエリ..データベースに送る命令。SQLはクエリを書いていくデータベース言語。


③SELECT文..主にデータの検索(抽出)、データの並び替え、計算が出来る。

SELECT文の形式

```
SELECT 列名　//どの列から表示させるか　
FROM 使用テーブル //どのテーブルか指定する。
WHERE 検索条件;　 //どの様な条件で取得するか
```


WHERE文は省略出来る。その場合は条件を指定してないので全ての列を抽出する。

④データ型..データベースに保存されているデータの中にある、数値やテキストといったデータの種類。

⑤LIKE演算子..ある文字を取得したい時に使う。指定したカラムが名前を含むデータを取得する。

```
　WHERE カラム名　LIKE データ型;
```
⑥ワイルドカード..どの文字列でも一致する記号　%データ名%でデータ名を含む文字列が全て取得する。

・前方一致..データ名の後ろに"%"の記号を書くとデータ名で始まる文字列を検索できる。
・後方一致..データ名の前に"%"の記号を書くとデータ名で終わる文字列を検索できる。

⑦NOT演算子..データ名が一致しないデータを取得する。

```
WHERE NOT データ名;
```

NOT演算子にLIKEを組み合わせることで条件を指定できる

```
WHERE NOT カラム名　LIKE ="%データ名%";
```

感想
学習を通じて感じたことは、データベースって辞書みたいなイメージがあるなって印象。辞書自体がデータベースでそこからWHEREや演算子を使って索引みたいな処理をするって流れ(十中八九解釈違いだと思うけど..)。そう考えるとデータベースの概念って自分達の身近にあるんだなと実感した。

学習教材が優しいのもあってか取っ掛かりやすかった。
初心者がphpでIoTサーバを作ってみた（php7 + MySQL5）

# PHPでIoTサーバを作ってみる
IoTサーバは、AWSやAzureを使えばよいのに、phpなどの勉強を兼ねて作ってみた

# デモンストレーションサーバ
https://www.star.ne.jp/free/ の無料枠を利用して、
デモンストレーション用のページを作ってみた
　　http://testiot.starfree.jp/8ol0jupyod8j/

# フレームワークは、bootstrapを利用
ページのフレームワークは、Bootstrap 4の無料テーマを利用した。
　　https://startbootstrap.com/themes/sb-admin-2/

　　ここから　startbootstrap-sb-admin-2-gh-pages.zip　をダウンロードして
　　展開して準備完了

# 作ったphp
bootstrapの展開されたルートディレクトリのファイルは削除して、
作ったphpファイルに入れ替えると動きます。
なお、ini.php　のファイルにMySQLの接続設定を書いていますの環境に合わせて修正します。
　　作ったphpファイル：　http://testiot.starfree.jp/8ol0jupyod8j/phpfiles.zip

# 解説
近いうちに整理して書きます
コメント、是非ください
Linux runlevel 4

申し訳ありません！。。
自分の勘違いを投稿してしまいました。

【Mouseの認識についての記事は解決いたしました。】

RaspberryPi "Raspbian GNU/Linux release 9.6"(stretch)のKernel 4.19.71+でX-WindowSystemを起動させるとMouseを認識できなくなりました。。
$ dmesg
$ lsusb
とゆうコマンドでも確認ができなかったのでKernelをUpdateしました。。
2019/09/18 Kernel 4.19.73+になっていました。。

今から
$ sudo init 6で再起動させる準備中です。。
　～
再起動をするのですが、マウスのトラブルの解決はしませんでした。。
まだまだ色々と試してみます。。

すいませんでした、マウスを取り替えれば認識しました。。
古い型式のマウス(ボ－ルの回転で動かすマウス)が認識できないのかも分からなくなりました。。
赤いセンサーで動くマウスならすぐに認識をしました。。

『紛らわしい記事を書いて申し訳ありませんでした。。』
m(_O o~_)m
----------------
これは後付け(マウスには無関係)ですが、
Raspbian GNU/Linux release9.6(stretch)で確認をしました。。
不具合になるのか参考になれば嬉しいのですが.....

一般ユーザでログインして直ぐに
$ sudo init 1
rootのpasswdの入力をしてシングルユ－ザ－モ－ドにします。。
その後に
＃ init 4
このコマンドで起動がおかしくなります。。
キ－ボ－ドを受け付けないのですが
矢印キーの上を押すと画面が明るく灰色になりました。。

緊急なので
マジックsysRQキ－を色々と試している時に気がついた点を記載させていただきます。。
alt+sysrq+Rを押してからalt+sysrq+Eを押すと90秒待てと表示され90秒後にログイン画面がでます。
pi(一般ユ－ザ－)でログインをしました。。
$ runlevelコマンドでrunlevelを確認すると
N 1
となりシングルユ－ザ－モ－ドでなおかつ一般ユーザでログインをしている事になりました。
ただし表示のみ
N 1
と、なりましたが【シングルユ－ザ－モ－ド】ではありませんでした。。

X-WindowStstemのようなConsoleでCUIの操作をするモ－ドになります。。

runlevel = 1の状態で
＃ init 4 の発行をすると
画面が灰色になるのですぐにわかりますが、キ－ボ－ドが使えなくなるので、sysrqキ－が使える環境にする必要があります。。
runlevel = 1の状態で
 init s
 init S
をタイプしても同じような画面表示になりました。。

----------------
自分のインストールをした"RaspberryPi Model B+"
OS = "Raspbian GNU/Linux release 10"(buster)での異なる挙動の報告があります。
release10(buster)では

runlevel = 4 は普通に(???)使えるようになりました。。
Gitのコンフリクトを一発で解決出来る場合とそうでない場合



# コンフリクト

　master にいる状態で feature/add をマージします。

```
$ git merge feature/add
Auto-merging a.txt
CONFLICT (content): Merge conflict in a.txt
Automatic merge failed; fix conflicts and then commit the result.
``` 
　またコンフリクトですか、もう疲れてしまいましたね。まとめてコマンド一発でできればいいのですが。

# 一発で解決出来る場合
　a.txtのそれぞれの状態は以下だったとしましょう

``` a.txt　(元の状態)
1
2
3
```

``` a.txt　(masterの状態)
1
2
3
4
```

```a.txt　(feature/addの状態)
1
2
3
5000000000000000
```

　コンフリクトしたので、a.txtは今このような状態になっています。

```a.txt　(コンフリクトの状態)
1
2
3
<<<<<<< HEAD
4
=======
5000000000000000
>>>>>>> feature/add
```

　今回はまだ生ぬるいですが、コンフリクトが深刻であるほど、その修復のための作業量は膨大になります。時間というのは有限な資源です。コマンド一発で解決できれば、スターバックスでコーヒーを飲む作業に時間を当てられるわけです。今日はそのスターバックスへの行き方を紹介しましょう。

```sh 
$ git checkout --ours a.txt
```

```sh 
$ git checkout --theirs a.txt
```
　git checkout のオプションに --ours を指定することで、指定したファイルの状態を元々チェックアウトしていたブランチの状態と同じにします。今回で言えば a.txt を master の最新と同じ状態にします。--theirs はその反対、git merge で指定したブランチ側にファイルの状態を同じにします。今回は feature/add ですね。

　またこのオプションはコンフリクトしているファイルに対し有効です。したがって次のようなコマンドで、コンフリクトした全てのファイルを、どちらかのブランチの状態の状態に上書きすることが出来ます。

```sh
$ git checkout --ours .
```

# 一発で解決出来ない場合
 例を出しましょう。

``` a.txt　(元の状態)
1
2
3
4
5
```

``` a.txt　(masterの状態)
1
1.5
2
3
4
5
6
```

```a.txt　(feature/addの状態)
1
2
3
3.5
4
5
5000000000000000
```

そしてコンフリクトしている a.txt の状態はこちら

```a.txt　(コンフリクトの状態)
1
1.5
2
3
3.5
4
5
<<<<<<< HEAD
6
=======
5000000000000000
>>>>>>> feature/add
```

　a.txt の特徴として「コンフリクトした部分」と「コンフリクトせずマージ出来た部分」が存在しています。このような状態で git checkout を行ってコンフリクトを解決することは極めて危険です。選択されなかったブランチの「コンフリクトせずマージ出来た部分」が消失してしまうためです。今回の場合 `git checkout --ours` では `3.5` が、`git checkout --theirs` では `1.5` が消失します。

　`git checkout --ours` によって削除されるコードは `git diff --ours` で確認出来ます。ここでコンフリクトの範囲外に存在している行がある場合は、checkout の使用を控えることを強くおすすめします。theirs オプションも同様に `git diff --theirs` で確認出来ます。

```
$ git diff --ours
@@ -2,6 +2,11 @@
 1.5
 2
 3
+3.5
 4
 5
+<<<<<<< HEAD
 6
+=======
+5000000000000000
+>>>>>>> feature/add
```

```
$ git diff --theirs
@@ -1,7 +1,12 @@
 1
+1.5
 2
 3
 3.5
 4
 5
+<<<<<<< HEAD
+6
+=======
 5000000000000000
+>>>>>>> feature/add
```
---

大変素晴らしい。私は怖いので手作業でやります。


# 参考文献
Git - git-checkout Documentation
https://www.git-scm.com/docs/git-checkout#Documentation/git-checkout.txt---ours

Git - git-diff Documentation
https://www.git-scm.com/docs/git-diff#Documentation/git-diff.txt--2--ours
VuePressの環境をdockerで作成する

# VuePressの環境をdockerで作成する

## Table of Contents

0. VuePressについて
1. docker の準備(npmでやります yarnが推奨されてますorz)
2. VuePressの環境を作成する
3. 最初のページ

## 0. VuePressについて

### [VuePress](https://vuepress.vuejs.org/)とは

簡単にいうと、VuePressは[GatsbyJS](https://www.gatsbyjs.org/)や[Nuxt.js](https://nuxtjs.org/)から着想をえた、最小限の静的サイトジェネレーターと技術ドキュメントの記述に最適化された静的サイトサイト制作ツールです。

### Why VuePress

個人的には2つ

1. 学習コストが低いvuejs、エンジニアなら知っているMarkdownで制作が可能なため
2. [Contributors](https://github.com/vuejs/vuepress#contributors)にEvan YouがおりVueのレポジトリ配下にあるため(メンテナンスしっかりされそう)

![vuejs vuepress  📝 Minimalistic Vue-powered static site generator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/8baae7e3-addd-726a-f2ae-faf48f530fa8.png)


## 1. docker の準備(npmでやります yarnが推奨されてますorz)

流れとしては、プロジェクトディレクトリの作成してdocker containerを作成します。

プロジェクトディレクトリの作成

```terminal
$  mkdir vue-press-example && cd vue-press-example
$ pwd
.../vue-press-example
```

docker compose ymlとDockerfileの作成

```terminal
$ touch Dockerfile
$ touch docker-compose.yml
```

_Dockerfile_

```Dockerfile
FROM node:10.16.3-alpine

WORKDIR /myapp

COPY . .

RUN npm install -g vuepress
```

```docker-compose.yml
version: "3.7"

services:
  vue-press:
    build: .
    tty: true
    ports:
      - "8080:8080"
    volumes:
      - type: bind
        source: .
        target: .
```

```terminal
$ docker-compose up
...
Creating vue-press-example_vue-press_1 ... done
Attaching to vue-press-example_vue-press_1
```

```terminal
$ docker exec -it vue-press-example_vue-press_1 sh # docker containerに入ります。
$ npm init -y # npm を initializeします
```

## 2.VuePressの環境を作成する

1の終わりの環境からすすめていき、
dependenciesにinstallして、 READMEを作成していきます。あとは、startするscriptを追記します。

```terminal
# install as a local dependency
$ npm install -D vuepress
# create a docs directory
$ mkdir docs
echo '# Hello VuePress' > docs/README.md
```

```package.json
{
...
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
...
}
```


## 3.最初のページ

2の終わりからはじめて行きます。

```terminal
$ npm run docs:dev
```

で [localhost:8080](http://localhost:8080)にアクセスするとHello worldばりの画面が表示されます。

![Hello VuePress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/8ef24134-b25c-d4f0-6426-fa3f075eed0d.png)
create-react-app で TypeScript × React での Chrome Extension 開発を始める

# はじめに

備忘録代わりに開発をスタートするまでの手順を書きます
ゴールはツールバーのアイコンをクリックでcreate-react-appのデフォルトページがポップアップ表示されるまで

<img width="189" alt="スクリーンショット 2019-09-18 1.26.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228724/5eb585d2-93c2-d866-0979-6898c9d9fdd6.png">

パッケージ管理は `yarn` 前提

# create-react-appの実行

`v2.1.0` 以降であれば `--typescript` のオプションが使用可能
   
* https://github.com/facebook/create-react-app/releases/tag/v2.1.0

yarnでは
 `yarn create react-app <プロジェクト名> --typescript`
のコマンドで `create-react-app` のインストール/アップデートとプロジェクトの作成を行うことができます

# `manifest.json` の編集

このままではChrome拡張として認識されないので `manifest.json` を編集していきます

- https://developer.chrome.com/extensions/manifest

### 最低限必要な項目
- manifest_version
  - 現在有効なバージョンである `2` を指定
- version
  - ドット区切りの `0~65535` の1~4個の整数で表現できるバージョン 自動更新の判断にも使われる
- name
  - ストアや管理画面でも表示される拡張機能の名称 45文字まで
  
### アイコンクリック時の動作を設定する

ツールバーに常駐し、クリック時に表示される動作を実現するために下記設定を行います

- browser_action
  - ブラウザのツールバーでの振る舞いを設定する アイコンの指定やクリック時のポップアップ表示など
  - `default_popup` として `index.html` を表示させます
 
下記はアイコンや説明文を加えた例です
 
```manifest.json
{
  "name": "test-extension",
  "manifest_version": 2,
  "version": "1.0.0",
  "description": "test-extension | サンプルアプリ",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_popup": "index.html"
  }
}
```

# Chrome拡張機能への追加

### ビルド
プロジェクトのルートで `yarn build` 実行
`./build/` 以下にビルドされたファイルが展開されます

### Chromeでの読み込み
`chrome://extensions/` から

- デベロッパーモードを有効に
- 「パッケージ化されていない拡張機能を読み込む」 ボタンをクリック
- プロジェクトの `./build` フォルダを選択して追加します

<img width="1433" alt="スクリーンショット 2019-09-18 0.37.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228724/7d6dcfd1-9158-f160-3d3d-37159cefffe8.png">

ここまでの作業でブラウザの右上部分に作成中の拡張機能のアイコンが表示されたことが確認できると思います
しかし、クリックするとエラーが出力されます

```
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-xxx'), or a nonce ('nonce-...') is required to enable inline execution.
```

# Content Security Policy の設定

エラーメッセージにもあるようにインラインスクリプトの実行を許可するためのCSPの設定を行う必要があります

- https://developer.chrome.com/extensions/contentSecurityPolicy

デフォルトの設定では外部リソースのブロックとインラインスクリプトのブロックが行われています

```json
"content_security_policy": "script-src 'self'; object-src 'self'"
```

### インラインスクリプトの許可
エラーで示されたハッシュ値をCSP設定に含めることでインラインスクリプトの実行を許可できます
ハッシュ値は実際に表示された値に置き換えてください

```json
"content_security_policy": "script-src 'self' 'sha256-xxx'; object-src 'self'"
```

設定の追加後、再度ビルドしてアイコンをクリックするとポップアップが表示されるのが確認できます

### CSP設定を含めた `manifest.json` 
```manifest.json
{
  "name": "test-extension",
  "manifest_version": 2,
  "version": "1.0.0",
  "description": "test-extension | サンプルアプリ",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_popup": "index.html"
  },
  "content_security_policy": "script-src 'self' 'sha256-xxx'; object-src 'self'"
}
```

# まとめ
`create-react-app` を使ってChrome拡張機能の開発を始めるまでをまとめました
次回はAWS LambdaでAPIを用意して叩くまでを公開しようと思っています
iPhoneでDeep Learningのコードを勉強する

技術の勉強をしたいけど、なかなかパソコンに向かって勉強するまとまった時間を取れない... ということはありませんか。

最近仕事でAI関連の話題に触れることが増えたので、機械学習やDeep Learningについて基礎を勉強しようと思ったのですが、通勤時間にiPhoneを使って勉強できないかな、と思ってやりかたを調べてみました。

# Azure Notebookのアカウントを作る
機械学習でよく使われているJupyter Notebookというツールがあります。プラウザ上でPythonのコードを1行ずつ実行し、結果を記録することができるツールです。
Jupyter Notebookは、PCにインストールして利用するツールなのですが、MicrosoftがAzure上で提供しているのがAzure Notebookです。こちらはクラウド上で動くので、PCへのセットアップ不要でブラウザだけあれば利用することができます。

利用登録は以下からできます。

 - [Microsoft Azure Notebooks](https://notebooks.azure.com/)


計算能力に制限がある環境であれば無料で利用できます。勉強目的では無料版で十分使えると思います。

**Azure Notebookの画面**
<img width="700" alt="Azure Notebook スクリーンショット" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171110/c02341a5-5164-9f8c-8e5a-f6282bef8b7b.png">




# Juno アプリを買う
Azure Notebookは、PCのブラウザでは快適に動作しますが、スマホのブラウザでは快適に使うことはできません。そこで、iPhone 用のアプリを使います。

Junoは、IPhone 用のJupyter Notebookクライアントアプリです。
アプリ上でPythonのコードを入力することができ、実行するときだけサーバに接続するので、電波不安定な場所でも快適にコーディングすることができます。

コードを保存できないテスト環境用であれば無償で利用できますが、Azure Notebookに接続する場合にはPro版の購入1200円（買い切り）が必要です。

- [Juno for Jupyter（Pro 1200円）]
(https://apps.apple.com/jp/app/juno-for-jupyter/id1315744137)

これでAzure Notebookに接続すると、iPhone で快適にPythonのコーディングをすることができます。

**Junoの画面**
<img width="250" alt="IMG_08F0635D18AA-1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171110/9ecad35e-ff1e-79db-d4c3-06beef941fdf.jpeg">


# (参考)参考書籍
参考までに、私がDeep Learningの基礎を勉強しようと思って購入した本は以下になります。PythonでコーディングしながらDeep Learningの基礎を学べるようになっていて、説明もわかりやすいです。コーディングに偏りすぎず、考え方・理論についても数式を交えながら説明されているのが良かったです。

- [ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装](https://www.amazon.co.jp/dp/4873117585/ref=cm_sw_em_r_mt_dp_U_8rqGDb32DZK0K)

この本のサンプルコードは以下のGit Hubサイトで公開されています。

- [GitHub \- oreilly\-japan/deep\-learning\-from\-scratch: 『ゼロから作る Deep Learning』のリポジトリ](https://github.com/oreilly-japan/deep-learning-from-scratch)

Azure Notebook上でサンプルコードを動かす際も、フォルダ構成を揃えてあげれば実行することができました。
アップロードが必要なファイルはPCからアップするか、iPhoneでダウンロードしてJunoでアップロードすることもできます。

ブラウザでGitHubを表示してもいいですが、有償ですが以下のようなiPhone用Gitクライアントアプリもあります。

 - [‎「Working Copy」 - App Store](https://apps.apple.com/jp/app/working-copy/id896694807)

iPhone内にコードをCloneしてダウンロードすることができます。ダウンロードしていると、ブラウザで表示を切り替えるよりも作業がかなりスムーズになります。
初めて競技プログラミングに参加してみた(ABC141)

##初めての参加
atCoderの過去問や蟻本に多少触れたのち、初めて競技プログラミングというものに参加してみました。

今回参加したのは[ABC141](https://atcoder.jp/contests/abc141)。

初めてだった今回は**4完**。

A〜D問題までは1回もWAやTLEを出さずにACを取ることができましたがE問題で詰みました・・・。
<img width="676" alt="スクリーンショット 2019-09-18 1.08.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459175/54007e68-f369-dafe-60b6-6b441f1b7f15.png">
初めてということでレートは106だけ上がりました。


##CとD問題
今回はC問題とD問題の自分の解答を載せておきます（もちろん最良の方法ではないと思いますが）

競技プログラミング初心者なので非効率な部分が多々あるかと思います。その編はご了承ください。

僕はPython3(PyPy)で解きました。

参考程度に。

##C問題

正解するたびにポイントが加算されるのではなく、正解たびに他の全員のポイントが減る方式のクイズ大会。

今回与えられている情報はこんな感じ。
- 参加者はN人
- 最初は全員Kポイント持ってる
- Q回の正解が出た
- i番目に正解したのは参会者$A_i$
- ポイントが0以下になった人は敗退

つまり、もし私が参加していたら、

K - { Q - (自分が正解した回数) } <= 0

なら、自分は敗退するということですね。

```python:abc141c.py
n,k,q = map(int,input().split())
a = []
for _ in range(q):
	a.append(int(input()))

#番号iの参加者が何回正解したかを格納する配列
b = [0]*n

#番号iの参加者が何回正解したかをカウントしていく
for i in a:
	#↑参加者は1〜N番なのに対して、配列は0〜N-1なので、
	#b[i-1] += 1というようにしている。
	b[i-1] += 1


for i in range(n):
	#i番目の参加者が何点引かれるか計算
	minus_point = q - b[i]
	#それが持ち点（K点）を超えてなければ勝ち
	if k - minus_point > 0:
		print('Yes')
	else:
		print('No')

```
これはfor文が2重、3重になる心配もないので安心して提出できました。


##D問題
割引券を駆使してできるだけ安く買い物をする問題。
与えられている情報を軽くまとめておきます。

- N個の商品、全部買う
- i番目に買う商品の値段が$A_i$円
- 割引券をY枚使うと値段Xの商品が$\frac{X}{2^Y}$円になる

「これできるだけで安く買えば良いんでしょ？なら高いやつに1枚1枚割引券を適用すれば良いじゃん」
という安易な発想でプログラムを組みました。つまり、**もっと効率的なプログラムは山のようにあると思います。**

```python:abc141c.py
import heapq
import math

n,m = map(int,input().split())
a = list(map(int,input().split()))

a = [-1*num for num in a]

heapq.heapify(a)

for i in range(m):
	#1番高い商品の値段を求める
	maximum = heapq.heappop(a)
	#割引券により、半額にする
	add = math.trunc(maximum/2)
	#それをheapqにプッシュする
	heapq.heappush(a,add)

#-1をかけることを忘れずに！
print(-1 * sum(a))

```

ここで大事になってくるのがheapqというモジュール。
これは最大値（最小値）を求めるためのものです。

###max(),min()じゃなくてheapqを用いる理由

計算量の違いです。

minやmaxの計算量はO(n)だと思いますが、これをループ毎にやっていると大きい入力があった時に時間がめっちゃかかって時間切れ（TLE）になってしまうと思います。

heapqモジュールは最小値（最大値）を効率的に求めることができるものです。

基本的には最小値を求めるものなのですが、配列の全ての要素に-1をかければ最大値を求めることができます。無理やり感がすごいですが（笑）

では、軽くheapqモジュールにも触れておきます。
参考程度にどうぞ。

```python:heapq.py
import heapq

l = [2,6,1,7,2,5]

#なんか初期化みたいなやつ
heapq.heapify(l)

#リスト内の最小値を求める
minimum = heapq.heappop(l)
print(minimum) #1

#最小値をpopしたので、リストから1が削除されている
print(l) #[2, 2, 5, 7, 6]

#popとは逆にpushもできる
heapq.heappush(l,minimum)
print(l) #[1, 2, 2, 7, 6, 5]

l = [-1*num for num in l]
heapq.heapify(l)

print(l) #[-7,-6,-5,-2,-1,-2]

maximum = -1 * heapq.heappop(l)
print(maximum) #7
```
なんとなくわかってもらえたら幸いです。

とりあえず、**何度もmax()やmin()を使う場合はheapqを考える**というのが良いのかもしれないですね。

##まとめ

ABCであれば競技プログラミング初心者でもある程度楽しめることがわかりました。

しかし、今回の[ABC141](https://atcoder.jp/contests/abc141)はいつもより簡単だったという声が多かったため、たまたまだったのかもしれません。

EとFに関しては何を言っているのかもよくわからなかったですし。

また、PythonはTLEが多いらしいので、C++に変えようか悩んでいます。。。

でも普段使ってる言語がPythonなのでできればPythonを使いたい。。。
Minecraft forge 1.14.4-28.1.0で起こった問題の忘備録

#前振り
さて、forgeの1.14.4のReccomendバージョンも出たからサーバを入れなおすかという時に躓いたことの駄文です。起こったことしか書いてませんので。短いです寝たいので。

#forge1.14.4-28.1.0をインストール
して、forge-1.14.4-28.1.0.jarを起動しようと思っても立ち上がりません。
UnsupportedOperationExceptionでました。

#色々やってみた結果
バカなので、先にufwが閉じてるのか実行権限がないのか色々調べた。
結局、ログを見るのが一番の正解で、Javaがこんなん実行できないわ糞か。って言っているのでUbuntuに入っているOpenJDKのバージョンをチェック。したら11だった。
apt-getで、Java11関連のJDKもJREもすべて削除してOpenJDK8をインストール。
したらあっさり動いたという話。

#駄文すまんかった。
何か書いとかなきゃいけないと思ったんや・・・。スマン・・・
Resolve conversation?

## 概要

GitHub の Pull request にコメントすると、 Conversation タブにツリー状のコメント（以下、コメントツリーと呼ぶ）と「Resolve conversation」ボタンが表示されます。「Resolve conversation」ボタンをクリックすると、コメントツリーが折りたたまれます。この「Resolve conversation」ボタンは誰が押すのでしょうか？

## 結論

私は「レビュアー」が「Resolve conversation」ボタンを押すのが良いと思います。
（※今回は以下の場合を想定しています。レビュイーが最初にコメントした場合は考えません）

- レビュアーが最初にコメントをした
- レビュイーはコメントに返信したり、内容に従ってコードを変更・修正したりした

## 理由

もし、レビュイーが「Resolve conversation」ボタンを押すと、

1. レビュアーがコメントツリーをいちいち開かなければならないから
2. レビュイーの変更・修正がレビュアーの意図と異なる場合があるから
3. レビュイーの変更・修正に対してさらにコメントする場合があるから

上記の3つの理由のうち、重要なのは2と3です。なぜなら、2と3の場合は「Resolve (解決)」と言えないからです。レビュアーが変更・修正内容を確認して、OKを出して、初めて「Resolve (解決)」です。

余談ですが、1に関連して、レビュアーがコメントと commit ログを照らし合わせて、変更・修正内容を確認するのはなかなか大変です。そこで、レビュイーは commit の hash をコメントに返信してあげるとレビュアーが楽になります。

## まとめ

- 「Resolve conversation」ボタンは「レビュアー」が押す
- レビュイーは変更・修正の commit の hash をコメントに返信すると親切
連想配列って何？

#配列と何が違うの？
まず普通の配列を見てみる。

```js
let array = ['a','b','c','d'];
```

console.log()でアクセスしようとしたら

```js
console.log(array[0]); // a
```
となり、<b>添字でしかアクセスできない。</b>


#連想配列はどうか

```js
let associative_array = {m:'三鷹',s:'新宿',t:'東京'};
```

<b>中カッコで囲っている</b>ことが配列との記法と異なる点。

また、中カッコの中身は<b>キー名：値</b>となっている。

そして何より大きな違いは、<b>キー名からアクセスできる点にある。</b>

###つまり、配列に好きな添字を命名することができる！

添え字から中身が連想しやすくなるため、故にデータの可読性が高くなる。
'm'だから、'三鷹'みたいな？
（だから連想と名の付く配列なのだろうか）







```js
console.log(associative_array.m); //三鷹
```

また、もう一つアクセスする方法もある。

```js
console.log(associative_array['m']); //三鷹
```



**前者はドット演算子による方法、後者をブラケット構文を用いた方法となる。**

#最後に
連想配列はハッシュとも呼ばれるが、紛らわしいのは**オブジェクトと呼ばれる**こと。
連想配列イコール、オブジェクトというのはJavaからこの世界に入った者として少し違和感・・・

#参考文献・サイト
- 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
- https://wa3.i-3-i.info/word11936.html
超素人SEがMESHを使って会議室在室確認システムを作ってみた（１）

この記事は、プログラミングをほぼしない某SIer企業勤めの自称エンジニアが頑張ってIoTシステムを作ってみた道のりをつづったものです。
ノリと勢いで進めている節はあるので、ご容赦をば。
やる気が上がればその２を書きます。

この記事でやったのは
・MESH選定の経緯
・MESHの超簡易デモ作成
・MESHのセンサーの感度確認
です。

##会議室在室確認システムを作ろう

　働き方改革を考えるという内容の社内横断の取り組みに参加。
　お題目的には今はやりの「働き方なんちゃら」だけど、なんかIoTを使ってそれっぽいことをしてほしいというのが、弊社のオーダーっぽい。
　SEと呼ぶには悲しい現実だけど、弊社の大半のメンバーはMTGで一日の半分くらいがつぶれている現状を鑑みて「まずはMTGやってる時間を可視化してみようよ（会議室在室システムくらいならちょろいだろう。ほかにやってるところありそうだし）」くらいのノリで会議室システムを作ってみることに。


##意外とピンキリ　IoTセンサー

　高いセンサーは10万円（高くなるとイベントを細かくとれるみたい　圧力を300段階で～みたいな）くらいだけど、安いセンサーなら5000円くらいでも全然ある。
　本当に信号を送るだけのセンサーなら、子供のお小遣いくらいで買えちゃうことに驚きながらも今回のシステムで使うセンサーを選定。

　調べた中から何個か候補を出した中で、MESHというセンサーがよさげだったのでこれを採用することに。
　https://meshprj.com/jp/

　決めた理由は何個かあったけど、
　1.作例が充実してること（なんかオフィシャルのサイトで公開してる）
　2.プログラミングで大きくはまらなさそうなこと
　~~3.もう違う取り組みでMESHタグ買ってたから追加購入しなくてよかったこと~~
　あたりが選定理由。
　
##MESHセンサーを使って簡単なデモを作ってみた

　とりあえず一番使いそうな人感センサを拝借してうちで試しにいろいろやってみることに。
　スタートアップガイド（※１）に従ってセットアップ・・・。と思ったらAppStoreを開けとな？
　よくよく読んでいくと、MESHの開発はアプリ上でブロックくっつけて作っていくだけっぽい。
　ブラウザすら使わなくてよくなった昨今のプログラミング事情に圧倒されながらとりあえず超簡素なプログラム（MESH的にはレシピというらしい）を作成。

<img width="320" alt="image1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499056/f958736a-eafd-a418-0644-556365e1fa88.png">

　人感センサが反応するとカメラが押されるだけの超簡素なレシピ。でもやっぱり動くと感動を禁じ得ない。
　ここまで、MESHを箱から出して30分くらい。これ小学生の工作レベルでできちゃうな。

　※１　スタートアップガイド：https://support.meshprj.com/hc/ja/articles/221993507-%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%82%AC%E3%82%A4%E3%83%89

##MESHセンサーの感度をチェック

　デモでちょっと満足した感はあるけど、ゴールはあくまで会議室の在室システムなので先ほどのデモを使って人感センサの感度がどんなもんか確認。ついでにいろいろ気づいたことを列挙。

　・横は45度くらいまでは認識
　・距離は2～3ｍ（もうちょっと近いかも）くらいまでは認識
　・動きがないと認識してくれないので、集中してWKしてると無反応
　　　⇒上半身の動きをとったほうがよさげ
　・「動いた」ってイベントベースのプッシュしか送れないから、
　　「離席した」とか「会議が終わった」という事象を判断させるには一工夫必要。
　　　⇒タイマーとかこねくり回せば行けるかな～
　・イベントを認識すると真ん中がじわっと光る（ホタルみたいな感じ）

##次回に向けて

　とりあえずセンサーの感度くらいまで調べたので、実際に会議やってるイベントをどうとるかを考えます。

　あと、MESHは構成的に「MESHタグ　⇒　MESHハブ　⇒　サービス連携」みたいな感じで動作するので、設置するときはMESHハブを入れとくデバイスが必要。今のところラズパイが有力候補なわけだけど、ラズパイ触ったことないんだよなあ・・・。
　一応FAQあったからこれを見ながらぶち込んでみるかと。
Unity製アプリでiOSシミュレータを起動するためのお話

# 前置き
- 環境
    - Unity2018.3.14f1
    - Xcode10.3
- Unityで作成したアプリでシミュレータを使ってスクショが欲しくなった（申請のため）
- デフォルトに近い設定だとシミュレータが表示されてなかった
- こんな状態  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87713/af7df4ea-f550-55d6-1294-914a63e113a8.png)


# 対応
- UnityのBuildSettingのOther Settingsをいじる
    - AutoGraphicsAPIを外す
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87713/9a6939dc-1bbb-767a-c2aa-7d79a0b9a4a7.png)
    - TargetSDKを `Simulator SDK` にする
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87713/9af93e0e-c071-b1b9-6daf-c8c896291e08.png)

# 結果
増えた。スクショも撮れる。よかった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87713/104e50fb-22c1-97b7-78ff-3a3258177ee1.png)

# 参考
- [Unityで書き出したアプリをiOSシミュレータで確認する](http://is4cafe.hatenablog.com/entry/20140303/1393854184)
- [How to add GLES2 or GLES3 to the "Graphics APIs" list in Unity?](https://answers.unity.com/questions/1619828/how-to-add-gles2-or-gles3-to-the-graphics-apis-lis.html)
BIT VALLEY 2019 Day1 セッションメモ

2019/09/13~14に開催された、[BIT VALLEY 2019](https://bit-valley.jp/2019)に行ってきました。

BIT VALLEYとは、テクノロジーだけでなくデザインやビジネスといった多角的要素を含めた「モノづくり」を考えていこう、という趣旨のカンファレンスだそうです。
どのセッションも非常に面白かったのですが、中でも特に印象に残った「ITトップが考えるモノづくり対談」の講演メモを残しておきます。

# ITトップが考えるモノづくり対談
　日本を代表するIT企業のトップ3名（Yahoo CEOの川邊 健太郎さん・LINE取締役の舛田 淳さん・DeNA CEOの守安 功さん）が、パブリックスピーカーである山口 周さんの提示するテーマを中心に今と未来のITについて語り合うセッションです。
出だしのテーマが用意されていたようですが、開催日が開催日ということもあり、急遽「ZOZO買収について」から始まりました。

## メモ
- ZOZO買収について
  - やるからには日本一、世界一という気持ちが強い
  - でもEコマースは万年3位
  - 特にファッションが弱い
  - 企業理念や企業文化はとても大事
- 今のIT業界について
  - 当時のbitvalleyで思い描いていたものがようやく実現し始めている
  - インターネットが閉じてきた
      - プレイヤーが固定され始めている
          - Google, bilibili...
      - プレイヤーのもつ面積も固定しつつある
  - ではどこへ向かうか
      - リアルへの浸透
         - 中国
      - ネットへの浸透
         - バーチャル
      - 合理性と非合理のまぜこぜの時代
        - 一歩踏み出したヤツが勝つ
  - ネット業界について
      - fintech
          - ネット屋がやる金融事業と金融屋がやるネット事業は異なる
              - 価値観が違う
          - ネット屋のほうがより本質的
              - 択一的
              - 摩擦がなく、課題に対してピュア
          - 〇〇屋のほうがいろいろなものを背負いすぎている
      - 今後全業界がネット事業を始めていく
          - 〇〇屋がやるネット事業はすべてネット屋の事業に負ける
          - ネット屋に変わろうとする企業を見抜け
- 経営者としてのモノづくりの考え方
  - 本質的かどうか
      - 今ある企画を一度疑う
      - 「極論」や「無邪気に言うと」という見方で見つめ直す
      - テクノロジードリブンでもビジネスドリブンでもなく、ユーザードリブンだ
      - ユーザーが触ったときに驚いてくれるか、「すごい」と言ってくれるかが大事
    - 怪盗ロワイヤルはゲームをやったことのない人間が作った
      - 既成概念のない人が作ったからこそ既成概念にはまらない人たちに刺さった
        - ゲームとはかくあるべしという既成概念に縛られない
    - 経営者の視点
      - 人に任せる
          - 過去の実績 track record
              - 0から育てたか、勝ち馬に乗っただけか
      - 自分で作る
          - 自分で使ってるかどうかが大事
              - paypayは経営陣みんな使ってる
  - IT起業は失敗を恐れないのか
      - ソフトバンクは昨日のことは覚えてない
         - 過去の成功も失敗も関係ない
      - チャレンジして失敗するのは仕方ない
         - 成功すれば加点、減点はない
         - 失敗なんて皆覚えてない
 - 若人へのメッセージ
     - Yahoo 川邊さん
         - かつてコンピュータやネットは国家という大きな力によって生まれた
         - それがあるタイミングで変わった
       - ZOZO元社長の前澤さんの涙を見て
         - 自分が退任したら個人として徹底してユーザー側に回ってやろうと思った
       - 強い意志を持って発信できる世界、ある意味今の堀江さんを目指すのもいいかも
     - LINE 舛田さん
         - 今後のチャレンジで今までどうだったかは気にしない
         - 踏み出すことにピュアであってほしい
             - それが許される社会になってきた
         - 個やそのつながりが強くなっている
     - DeNA 守安さん
         - 学生のうちに社会や仕事はあまり考えなくていい
         - 学生は遊べ
         - 研究経験は生きる
 
# セッションを聞いて
　お三方とも、「課題に対して常にピュアである」姿勢を重要視されている印象を受けました。ここで言うピュアな姿勢とは、ある課題を前にした際に、ノイズに惑わされず本質的な答えを求める姿勢だそうです。

Yahoo CEOの川邊さん曰く、例えばUberは「世界の車両稼働率は3割以下なので、残り7割をテクノロジーで稼働させる」という一点のみでサービスを考案しました。これがIT以外の企業であれば、物流や拠点コストに目が行ってしまう。ここがネット屋(Web業界)の強みだと。

一歩踏み出すことに臆せず、常に本質的な視点をもったエンジニアを目指していきたいですね。
オンプレミスとクラウド

# オンプレミスとは
自社の中で情報システムを保有し、自社内の設備によって運用すること。



# クラウドとは
クラウド事業者が提供するコンピューター資源を保有せずに利用する仕組みのこと。

## コンピューター資源

- ハードウェア
  - CPU、メモリ、ストレージ
- ソフトウェア
  - OS、アプリケーション


## クラウドサービスの種類
|種類|特徴|例|
|---|---|---|
|Iaas  |サーバを提供する|AWS |
|Paas  |開発環境を提供する  |Google App Engine、Docker  |
|Saas  |ソフトウェアを提供するサービス|Salesforce、Gmail   |



# 比較
|  |オンプレミス  |クラウド  |
|---|---|---|
|コスト|初期費用が高額|初期費用が安い|
|インフラ調達期間|長い|短い  |
|カスタマイズ |自由|制限あり|
|冗長化|	高費用化|容易|
【Tips】yarn install時に発生しうるESOCKETTIMEDOUTの回避

# 問題：yarn installの失敗
## 入力
yarnでパッケージ管理を行っているディレクトリ（フォルダ）において、

```sh
yarn install
```
を実行すると、下記のように`ESOCKETTIMEDOUT`のエラーが発生し正常にインストールできない場合がある。

## 出力
```
[1/5]   Validating package.json...
[2/5]   Resolving packages...
[3/5]   Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/material-design-icons/-/material-design-icons-3.0.1.tgz: ESOCKETTIMEDOUT".
info If you think this is a bug, please open a bug report with the information provided in "【yarn-error.logのあるディレクトリへのパス】".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
```

# 環境：WSL下のUbuntu
- Windows 10 Home 1903
    * Windows Subsystem for Linux によりLinux環境を利用
- Ubuntu 18.04.3 LTS (Bionic Beaver)
- anyenv
    * nodenv
        + node v10.15.3
        + yarn 1.17.3

# 原因：ダウンロードのタイムアウト（時間切れ）
巨大ファイル（上記の例では`material-design-icons-3.0.1.tgz`）のダウンロードに時間がかかりすぎたことによって、ネットワークが正しくつながってないと誤認されインストールが途中で中断されている。

# 解決方法：設定ファイルを配置しダウンロード時間を設定
`yarn install`を行うディレクトリに`.yarnrc`という名前のファイルを作り、以下の内容を記述する。すでにある場合は末尾に追記、または該当する行の編集を行う。これによりタイムアウトの待ち時間が10分になるため多くの場合はダウンロードに成功し処理が進む。

```:.yarnrc
network-timeout 600000
```

`network-timeout`の項目に書かれた時間だけダウンロードの時間を待ってくれる。ミリ秒指定のため「書かれている数字÷1000」が実際の待ち時間秒数。上記では60万ミリ＝6000秒＝10分のダウンロード時間を設定している。

# 補足
遅いネットワークを利用している環境では10分でも足りない場合がある。その際は適宜設定ファイル`.yarnrc`の`network-timeout`に書かれている数字を大きくする。

# 参考文献
- [ESOCKETTIMEDOUT on 31 MB package material-design-icons #5540](https://github.com/yarnpkg/yarn/issues/5540)
nginxのリバースプロキシで広告を入れてみた

自分のブログから転載。
https://blog.haniokasai.com/2016/11/nginx.html


jenkinsサーバーを運用していたのですが、広告をいれてみたいなぁと思い？手法を検討。

リバースプロキシで広告を埋め込む方法を探しました。
http_sub_moduleで置き換えられるらしいのですが、わざわざmake時にconfigureしてあげるのも嫌だと思います。

調べてみると、nginx-fullには、ngx_http_substitutions_filter_moduleが入っていて、これを使えばいけました。


```bash
apt install nginx-full
```

んで、/etc/nginx/conf.dにリバースプロキシーの設定を書く。


```config
server {
    listen          80;
    server_name     jenkins.haniokasai.com;
    location / {
        proxy_pass      http://localhost:8080;
        proxy_set_header Accept-Encoding "";//gzipがなんとからしい
        subs_filter_types text/html; //対象のデータ形式を決める
        subs_filter '</header>'  '</header><script async src=\"//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script><ins class=\"adsbygoogle\"     style=\"display:block\"     data-ad-client=\"かきかえて\"     data-ad-slot=\"かきかえて\"     data-ad-format=\"auto\"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
    }
}
```

これで、nginxをリスタートをすると表示されるでしょう


#参考資料
https://github.com/yaoweibin/ngx_http_substitutions_filter_module
#それっぽい資料
https://github.com/tianyk/note/blob/f046706dfab3a4fa6b55d25a3b470612fd1ec461/source/_posts/nginx-modules.md
Oracle11gのDockerの文字コードを変更するのに苦労したのでメモ

OracleのDockerイメージ[wnameless/oracle-xe-11g](https://hub.docker.com/r/konnecteam/docker-oracle-xe-11g/)を使うと文字コードのデフォルトは`AL32UTF8`になります。
プロジェクトで使っているOracleは文字コードが`JA16EUC`になっており、
その文字コードで動くOracleの構築の際に色々と躓いたのでメモ代わりに。
# 環境
Oracle 11g
# 手順
Oracleの文字コードを変更するのは、DBの設定を書き換えれば終わりと言うわけにはいかないようで、
既存のDBを一度削除して、文字コードを指定して再度作成する必要があるとのこと。
参考: [Oracle 11g XEのDBをShift JIS化する](https://qiita.com/jsaito/items/33c7b2b5dd80a7447a14)

ただ、Dockerのイメージ作成のタイミングだとまだDBを作成していないので、
最後の

```sh
createdb.sh -dbchar JA16SJIS
```
の部分だけを実行するだけでよかったのでそれで構築。

※ちなみに、[init.ora](https://github.com/wnameless/docker-oracle-xe-11g/blob/master/assets/init.ora)あたりを書き換えたらすんなり出来るのでは、と思って色々試してみたのですが、うまく行かず…

## 準備
以下のDockerファイルを用意

```dockerfile:Dockerfile
FROM wnameless/oracle-xe-11g

RUN su -l oracle -c "PATH=$PATH:/u01/app/oracle/product/11.2.0/xe/bin/ ORACLE_HOME=/u01/app/oracle/product/11.2.0/xe /u01/app/oracle/product/11.2.0/xe/bin/createdb.sh -dbchar JA16EUC"
```
rootユーザでコマンドを実行するとエラーになったのでoracleユーザに切り替えて実行したのですが、
何故か環境変数が読み込まれず、`sqlplus`がnot foundになったりしたので、
oracleユーザで実行しつつ明示的に環境変数を指定しています。
上記では、`createdb.sh`の場所を直指定するのと、`sqlplus`等のoracle周りのコマンドが実行できるよう`PATH`と`ORACLE_HOME`の環境変数を指定しています。

## 実行
上記のDockerのコンテナを起動します。
一度DBが削除されるので、起動直後にDBに接続しようとするとエラーになる場合があります。

少し時間を置いた後、`sqlplus`等で接続して確認。

```sh
# sqlplus sys/oracle@oracle/xe as sysdba

SQL*Plus: Release 11.2.0.4.0 Production on 火 9月 17 09:32:02 2019

Copyright (c) 1982, 2013, Oracle.  All rights reserved.



Oracle Database 11g Express Edition Release 11.2.0.2.0 - 64bit Production
に接続されました。
SQL> SELECT VALUE FROM NLS_DATABASE_PARAMETERS WHERE PARAMETER='NLS_CHARACTERSET';

VALUE
--------------------------------------------------------------------------------
JA16EUC

SQL> 
```

無事文字コードが`JA16EUC`に変更されました。

# 課題
今回、`createdb.sh`を使ってDBを作り直していますが、
この処理に時間がかかるみたいで、コンテナ作成してから使えるようになるまで時間がかかっていました。
`time`でbuildの時間を計ってみたんですが、50分ほどかかりました。
この設定なしで普通にbuildした場合は数分で終わるので、色々と改善点はありそうです。

`Dockerfile`も、もう少し最適化できる気がするのでいずれ調査します。
Flaskのページリンクで@app.route()とurl_for()の中身がややこしくなる問題について

#はじめに
pythonでwebアプリケーションを作成しているときに（flaskで），なんかいまいちflaskのルートについて理解できなかったので備忘録兼実験を含めて書いていきましたよ．いかに結論的なコードを示しておきます．

~~~python
#test.py
from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/mayo')
def senbei():
    return 'I like senbei.'

if __name__=='__main__':
    app.run(debug=True)
~~~

~~~html
<!--index.html-->
<html>
    <head>
    <head>
    <body>
        <a href="{{url_for('senebi')}}"><h1>Hello</h1></a>
    </body>
</html>
~~~

#結論から申し上げるでござる
###1. _@app.route()の引数にはURL_
###2. _url_for()の中身は呼び出したい関数名_
を入れるべし．くわしい仕様はドキュメントを見てね．

#1. @app.route()の引数にはURL
例えばURLに

~~~
http://127.0.0.1:5000/
~~~

と打つと，エンドポイントは`/`なので
<img width="323" alt="スクリーンショット (8).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326455/3264df73-95b5-1076-2c87-1f87da08e9d7.png">

となります．また

~~~
http://127.0.0.1:5000/mayo
~~~
と打つとエンドポイントは`/mayo`なので
<img width="516" alt="スクリーンショット (11).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326455/1179cac2-6605-96e4-a886-4da783f03415.png">

となります．これはsenbei関数の中で実装している言葉ですね！つまりURLにいれるその値を入れたら呼び出される関数をその

~~~
@app.route()
~~~
の中で定義しているんですね．
_ではここでURLのエンドポイントに関数名`index`と`senbei`を入れてみる_とそれぞれ
<img width="743" alt="スクリーンショット (12).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326455/8f43b5b0-27b4-e14b-bc04-3ab283334c7d.png">
<img width="741" alt="スクリーンショット (13).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326455/147d25a4-b71c-e362-d5f1-a17fd32dc9e3.png">

となり，何も呼び出されないことがわかります（main.pyからは）
つまり，***@app.route()の引数はブラウザのURL!!***

#2. url_for()の中身は呼び出したい関数名
ただし，url_for()という関数は名前がurlとかついてるくせに引数は呼び出したい関数名なんですな．だから以下のようにするとリンク先に正常に行く

~~~html
<a href="{{url_for('senbei')}}"><h1>Hello</h1></a>
~~~

表示されるページはこんな感じで
<img width="323" alt="スクリーンショット (8).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326455/6485d192-7523-7625-fcad-6b87fa967ac6.png">

___Hello___を押すと以下のところに飛ぶ
<img width="516" alt="スクリーンショット (11).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326455/67bc4054-7a1e-6552-ef1c-69b82e3e2f4d.png">


先ほどの逆で，url_forの中身を以下のように@app.route()の引数(すなわちブラウザに打ち込むURL)にしてみると

~~~html
<a href="{{url_for('/')}}"><h1>Hello senbei!</h1></a>
<!-- or -->
<a href="{{url_for('/mayo')}}"><h1>Hello senbei!</h1></a>
~~~
とするとだいたい以下のようなエラーが吐かれる
<img width="960" alt="スクリーンショット (15).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326455/74e77368-3de6-989c-6320-2f97a30b79a1.png">


つまり`url_for`の中身は関数名！！

こんなちんけな内容でも誰かの役に立つといいです．．．
[android] Firebase Cloud MessagingでNullPointerExceptionする

# 起きたこと

Firebase Cloud Messagingを使ってandroidの端末にpush通知を送付したところ、3〜5%程度の割合でクラッシュが発生。

# stacktrace

こんな感じのstacktraceが吐かれていた

```
Fatal Exception: java.lang.NullPointerException: Attempt to read from field 'int com.android.okhttp.okio.Segment.limit' on a null object reference
       at com.android.okhttp.okio.Buffer.write + 1182(Buffer.java:1182)
       at com.android.okhttp.okio.Buffer.read + 1221(Buffer.java:1221)
       at com.android.okhttp.okio.RealBufferedSource.read + 55(RealBufferedSource.java:55)
       at com.android.okhttp.internal.http.Http1xStream$FixedLengthSource.read + 393(Http1xStream.java:393)
       at com.android.okhttp.internal.Util.skipAll + 159(Util.java:159)
       at com.android.okhttp.internal.Util.discard + 141(Util.java:141)
       at com.android.okhttp.internal.http.Http1xStream$FixedLengthSource.close + 410(Http1xStream.java:410)
       at com.android.okhttp.okio.RealBufferedSource.close + 396(RealBufferedSource.java:396)
       at com.android.okhttp.okio.RealBufferedSource$1.close + 384(RealBufferedSource.java:384)
       at com.google.android.gms.internal.firebase_messaging.zzk.zza + 4(com.google.firebase:firebase-messaging@@19.0.1:4)
       at com.google.firebase.messaging.zzi.close + 37(com.google.firebase:firebase-messaging@@19.0.1:37)
       at com.google.firebase.messaging.zzb.zza + 51(com.google.firebase:firebase-messaging@@19.0.1:51)
       at com.google.firebase.messaging.FirebaseMessagingService.zzc + 59(com.google.firebase:firebase-messaging@@19.0.1:59)
       at com.google.firebase.messaging.zzg.run + 2(com.google.firebase:firebase-messaging@@19.0.1:2)
       at java.util.concurrent.ThreadPoolExecutor.runWorker + 1167(ThreadPoolExecutor.java:1167)
       at java.util.concurrent.ThreadPoolExecutor$Worker.run + 641(ThreadPoolExecutor.java:641)
       at com.google.android.gms.common.util.concurrent.zza.run + 6(:6)
       at java.lang.Thread.run + 764(Thread.java:764)
```

ここではfirebase-messagingは19.0.1を使っているが、最新の20.0.0でも発生する。

# 原因

調べたところ、大きい画像を添付しているとクラッシュするらしい。
閾値は不明だが、300KBぐらいの画像だとクラッシュしていて、50KB程度だと大丈夫な感触。

# 参考

現在本家のFirebase-SDKにissueが上がっており対応中の様子

https://github.com/firebase/firebase-android-sdk/issues/709
SQLアンチパターン11章メモ

## 11章 ファントムファイル(幻のファイル)
### 11.1 目的:画像をはじめとする大容量メディアファイルを格納する

### 11.2 アンチパターン:物理ファイルの使用を必須と思い込む
画像データをどうやって保存しておくのか？
・問題は実際にDBにBLOG型として保存するか、外部のファイルシステムに保存しDBにはファイルパスを VARCHAR型として保存するか
・大多数は外部のファイルシステムに保存する
・どちらもメリット、デメリットがある

### 11.2.1 ファイルの削除時における問題
・画像がDBの外に保存してある場合、DBで画像のファイルパスを削除しても、実際の画像までは削除されない。
・ファイルパスが削除されたら、参照先の画像も削除されるようにアプリを設計する必要がある
・でないと、「孤児」となった画像が蓄積されていってしまう

### 11.2.2 トランザクション分離の問題
・通常、削除や更新はトランザクション(関連する処理)が成功して、結果が確定するまで変更は他のクライアントからはわからない
・だがDBが外部にある場合、クライアントはその変更を見ることができる。
・頻度はあまり高くない

### 11.2.3 ロールバック時における問題
・DELETE文をrollbackしようとしてもファイルを削除してしまっていれば元に戻せない

### 11.2.4 データベースのバックアップツール使用時における問題
・DB製品は、使用中のデータベースのバックアップを支援するためのクライアントツールがある
・ただし、バックアップに外部のファイルシステムは対象外
・そのためDB用のバックアップとファイルシステム用のバックアップの二種類が必要
・DB外部ファイルの同期はどうするのか

### 11.2.5 SQL アクセス権限使用時における問題
・DB内のテーブルや列に対してのアクセス権限は管理されているけど、外部ファイルに対してSQLでは参照できない

### 11.2.6 ファイルはSQLデータ型ではない
・DBは格納された文字列が正しいパスかどうかは検証できない
・指定されたパスにファイルが存在しているかは検証できない
・ファイル名の変更、ファイルの移動、削除が行われてもDB内のパスは自動的に変更されない
・文字列をパス名として保証するにはアプリ側に依存することになる

### 11.3 アンチパターンの見つけ方
設計をしたエンジニアがいた場合質問をする
・データバックアップとリストアの手順は確立されているか。。。
・画像が増える一方になるのではなく、不要になったときにシステムから削除されるような仕組み になっているか。。。
・画像ファイルへのアクセス権を持っているアプリケーションユーザーは誰か。。。
・画像に対する変更をキャンセルできるか。。。

### 11.4 アンチパターンを用いてもよい場合
・DBの容量を減らせる
・DBのバックアップが手軽になり、バックアップデータも軽量になる
・画像が外部にあるとプレビューや編集が容易になる

### 11.5 解決策:必要に応じて BLOB 型を採用する
・どんなDBを設計するのかを十分に検討する必要がある
docker runをdocker imagesで表示した一覧から選択して実行する方法

#Docker runをdocker imagesで表示した一覧から選択して実行する方法
`docker images`でコンテナ名やIDを確認してから`docker run`を実行するのは面倒なので、ワンコマンドで実行する方法を紹介します。

#やり方
以下をコピペして利用してください (-it, --rmはなくても可)

```
#インストール
brew install fzf
#実行
docker run -it --rm $(docker images | awk '{print $1":"$2}' | fzf)
```


#利用イメージ
https://asciinema.org/a/agGo9OvRDaN0nsTw7AJB4r7kq

[![asciicast](https://asciinema.org/a/agGo9OvRDaN0nsTw7AJB4r7kq.svg)](https://asciinema.org/a/agGo9OvRDaN0nsTw7AJB4r7kq)


##解説
###`docker images`
dockerイメージの一覧を表示します。
###`| awk '{print $1":"$2}'`
標準入力を受け取り、各行を　"{1列目}:{2列目}" の形式で出力し直します。

### `| fzf`
標準入力から受け取ったデータから1行を選択して出力します。

###`$(docker images | awk '{print $1":"$2}' | fzf)`
上記の組み合わせにより、選択したイメージ名を出力します

###`docker run -it --rm $(docker images | awk '{print $1":"$2}' | fzf)`
一覧から選択したDockerイメージを実行します。
github上にローカルPCで作成したソースコードをコミットする

# はじめに
ちょっとアホっぽいけど
レポジトリに初ファイルをコミットしたのでやり方をメモ。
初心者サイトにも載ってない初心者な記事を量産していて
なんだか申し訳ない気分はあるがやむなし。

# 手順
1. ローカルPCのレポジトリ上にファイルを作成する
2. コミットする
3. github上のレポジトリに反映されているか確認する

# 1. ローカルPCのレポジトリ上にファイルを作成する
以下の要領でディレクトリを追加してhogehoge.txtファイルを作った
[after]
C:User\watya\Vagrant
└─README.md
 
[after]
C:User\watya\Vagrant
├─README.md
└─src
    └─ch02
         └─hogehoge.txt

# 2. コミットする
hogehoge.txtファイルのあるディレクトリ上に移動して以下のコマンド実行

```:github
watya@DESKTOP-C8BS8HB MINGW64 ~/Vagrant/src/ch02 (master)
$ git add hogehoge.txt

watya@DESKTOP-C8BS8HB MINGW64 ~/Vagrant/src/ch02 (master)
$ git commit -m "add file hogehoge"
[master f4a77f1] add file hogehoge
 1 file changed, 1 insertion(+)
 create mode 100644 src/ch02/hogehoge.txt

watya@DESKTOP-C8BS8HB MINGW64 ~/Vagrant/src/ch02 (master)
$ git push origin master
Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 4 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (5/5), 369 bytes | 369.00 KiB/s, done.
Total 5 (delta 0), reused 0 (delta 0)
To https://github.com/watyanabe164/Vagrant.git
   e57e28f..f4a77f1  master -> master

watya@DESKTOP-C8BS8HB MINGW64 ~/Vagrant/src/ch02 (master)
$
```
# 3. github上のレポジトリに反映されているか確認する
githubへログインして様子を見てみる。
"src/ch02"って文字が追加されていてその右側に"add file hogehoge"のコメントが記載されていることを確認。成功だ～。
![コメント 2019-10-07 225756.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/ac7ed108-c12f-fcfe-3f87-1b402ed35bca.png)

～おしまい～
vuetify入門メモ

# 基本

* vuetifyはv-appの中に記述する
* 色の設定はnuxtの場合、nuxt.config.jsに記述
* sidemenuなどを設ける場合、v-contentでメインコンテンツを分ける
    * なのでv-content>v-container>v-layout>v-flexになる


# レイアウト

https://qiita.com/Issyo_Vo/items/a1771195bf65514d2814

# v-flex

```
<v-flex xs6>
  <v-card>
  <v-card-title class="font-weight-bold">テスト</v-card-title>
  </v-card>
</v-flex>
```

こんな感じで12分割した中でいくつ分くらいかを記述。

→これはなくなってた

https://vuetifyjs.com/ja/styles/flex

# v-layout

flexと同じ

# v-container

v-containerを利用すると、サイト内のコンテンツが900px以上にはならず、中央寄せに。

```
<v-container>
  <v-card-title class="font-weight-bold">テスト</v-card-title>
</v-container>
```
MySQLで月末・月初

# SQLで月末のデータをとりたい

## 背景

dailyごとのMAUとかをサマったテーブルからその月の最終データだけ抜きたい

## 困りどころ

SQLで最終日ってどうとるっけ？毎月31日じゃねぇしな

## SQLで月末日を取得する

### LAST_DAY関数
引数に渡した日付の年月の月末日を返す

```
SELECT * FROM xxxx_data WHERE date_format(create_time, "%Y%m%d") = LAST_DAY(create_time, "%Y%m%d")
```

## 備考

LAST_DAY(　)があるからといってFIRST_DAY(　)はないので、"%Y%m%1"とかでフォーマットしてください。
【UE4】テストや実験に有用なデベロッパーフォルダについて

# 最初に

どうも、ろっさむです。今回は試験的にマップを作成したり、アセットを作成するのに活用できる開発者向けのフォルダについて紹介します。

# デベロッパーフォルダとは？

本番環境に組み込むまでのテストや技術研究をデベロッパーフォルダで行うことで、テスト環境と本番環境のフォルダ階層を明確に分けることができます。このデベロッパーフォルダ名はPCのユーザー名から、スペースやピリオドなどの不正文字を除いたものが使用されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/32b5c6d9-036c-9786-e4c3-09999dbc7f47.png)


## 注意事項

デベロッパーフォルダ自体、個人の試験環境を用意するためのものなので、デベロッパーフォルダ外からフォルダ内にあるアセットを参照したり、デベロッパーフォルダ内から外部のアセットを参照することがないうようにルールを設ける必要があります。そのため、元々コンテンツ下にある本番環境用のアセットをデベロッパーフォルダ内で使用する場合には、対象のアセットをデベロッパーフォルダの個人フォルダ内にコピーして使用するようにしてください。

# デベロッパーフォルダを表示する

デベロッパーフォルダはデフォルトでは表示されていないため、自身で設定を有効にする必要があります。

手順：コンテンツブラウザの右下に表示されている`表示オプション`というところから、`デベロッパーコンテンツを表示`を有効にする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/57eb4461-39ec-1964-ab37-fc7fd4148a55.png)


# デベロッパーフォルダを含めてフィルタリングする

こちらはUE4がソースコントロールの接続をしていることが前提となっています(プロジェクトによってはignoreとして登録しているかも)。

コンテンツフォルダから特定のアセットを探す際に、他の開発者がデベロッパーフォルダに格納しているアセット群も含めて検索を行うことができます。

手順：`フィルタ`ボタンを押下して、`その他のフィルタ > 他のデベロッパー`を有効にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/e8bddb6a-63d7-a7e6-20b7-f35de4ac110a.png)


# 参考

- [[UE4]作業効率アップ間違い無し！？便利な「フィルタ機能」+αの紹介](http://historia.co.jp/archives/10740/)
- [Developers フォルダ(UE4公式リファレンス)](https://docs.unrealengine.com/ja/Engine/Content/Browser/UserGuide/DevelopersFolder/index.html)
Python学習

# Python基礎・応用

## IF文による条件分岐

### 条件分岐で運勢を占ってみよう

* n = 0　の時、「大凶」 n = 1 の時、「凶」 n = 2 の時、「吉」 n = 3　の時、「大吉」が出力される占いを作ってみよう

補足: randomモジュールを使用すると指定した数値から指定した数値までのいづれかをランダムで出力されます

```python
import random
a = random.randint(1,2)
print(a)
# 1 or 2
```

* 比較演算子一覧

|利用例|意味|真になる例|
|-----|---|--------|
|a < b|aがbよりも小さい|0 < 1|
|a > b|aがbよりも大きい|1 > 0|
|a <= b|aがb以下である|0 <= 1|
|a >= b|aがb以上である|1 >= 0|
|a == b|aがbに等しい|1 == 1|
|a != b|aがbに等しくない|1 != 0|

## 応用問題

* スライムと戦っている。
* 1から10のサイコロをふって、6未満の場合、サイコロの目だけダメージを与えたと表示。
* 6以上の場合、クリティカルヒットとして、100のダメージを与えたと表示。
* 相手の体力が300以下になるまで処理を行う。

※社内学習向けに記載した記事を全体公開
【Rails】コントローラーごとにレイアウトを変更する方法

アプリ制作時に「ログイン関連（ログイン、新規登録等々）」「管理画面」などなどコントローラー毎にレイアウトを切り替えたいので、色々と探してみました。

##やりたいこと

###コントローラーごとにレイアウトやデザインを別々にしたい
自分の制作したデザインが「ログイン関連」と「管理画面」とで別もののため別々にしたい。
けれども「application.html.erb」しかない、どうしよう。

###コントローラの中でさらに共通部分をまとめたい（共通パーツ化したい）
コピーライトやヘッダーフッターなどなど各々使い回せたらいいな、と思ってみたり。

##解決方法
###コントローラーごとにレイアウトやデザインを別けたい
方法は単純明快で、`/app/views/layouts/`以下に`コントローラー名.html.erb`ファイルを作成して、その中で記述すれば自動で呼び出してくれる。
あとは「application.html.erb」と同じように使えばOK。

###コントローラーの中でさらに共通パーツ化したい
まずは`/app/views/`ディレクトリ以下にアンダーバーを冒頭に入れたファイル名で作成する。（例：_hoge.html.erb）

どうやら`/app/views/`以下に「shared」ディレクトリを挟んでまとめる場合が多いらしいので、やらない理由は特にないので合わせてみる。（将来実務経験する際は注目してみよう。）

呼び出したい部分テンプレートの場所：`/app/views/shared/_hoge.html.erb`

```ruby:index.html.erb
<%= render partial: 'shared/hoge' %>
```
拡張子はサヨナラバイバイでOK。

この記述を読み込ませたい場所に記述すれば成功。
インクルードさせる、みたいな感覚。
「partial:」は省略可能だが、テンプレート内で変数を使う場合は必須。

##まとめ
色々調べていたらまだまだ応用パターンがあるみたい。
今後ぶち当たったら参考にしてみよう。

##参考サイト
[コントローラやアクション毎に使用するレイアウトを切り替える - Ruby on Rails入門](https://www.javadrive.jp/rails/template/index3.html)

[【Rails入門】yieldとcontent_forを使ってページ毎にタイトルを変更](https://www.sejuku.net/blog/75657)

[部分テンプレート - Ruby on Rails入門](https://www.javadrive.jp/rails/template/index4.html#section2)

[[Rails] partialが自身からの相対パスで他partailを参照する場合の注意 - Qiita](https://qiita.com/eduidl/items/5ea74df2db471e15b4cd)

[【Rails】部分テンプレートの使い方を徹底解説！ | ピカわか！ - ピカ1わかりやすいプログラミング用語サイト](https://www.pikawaka.com/rails/partial_template)
github上にローカルPCで作成したソースコードを新規にレポジトリに登録する

# はじめに
ドハマりしたので忘れないように残す。
状況としては、
書籍に書いてたソースコードをgithub上に残すために
新規にレポジトリを作ってそこへcommitした

# 前提条件
・ローカルPCにgit bashインストール済み
・github.comへ登録済み
　自分のアカウントはwatyanabe164
　URL：https://github.com/watyanabe164

# 手順
1. github上にレポジトリを作る
2. ローカルPCにレポジトリと同名のディレクトリ作る
3. レポジトリ作成時にgithubが用意してくれたコマンドを実行する

# 1. github上にレポジトリを作る
　githubにログインする
　　URL：https://github.com/watyanabe164

　画面右上の＋をクリックして「New Repository」クリック

　レポジトリの情報を入力して[Create Repository]クリック
　今回は、
　　Repository Name：Vagrant
    Private
　で設定。

　![コメント 2019-10-07 225755.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/5663dfd2-8c4f-406e-6e65-b7df8c4bb2ea.png)

　レポジトリ作成完了。作成完了画面がコチラ！
　![コメント 2019-10-07 225756.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/36756961-4b4c-38f0-fbeb-0d05e48506e9.png)

# 2. ローカルPCにレポジトリと同名のディレクトリ作る
git bash起動して以下のコマンド実行

```:gitbash
mkdir Vagrant
pwd C:\User\watya\Vagrant
```

# 3. レポジトリ作成時にgithubが用意してくれたコマンドを実行する
以下のコマンド実行。
実行ディレクトリは"C:\User\watya\Vagrant"のまま。

```:gitbash
watya@DESKTOP-C8BS8HB MINGW64 ~/Vagrant (master)
$ echo "# Vagrant" >> README.md

watya@DESKTOP-C8BS8HB MINGW64 ~/Vagrant (master)
$ git init
Reinitialized existing Git repository in C:/Users/watya/Vagrant/.git/

watya@DESKTOP-C8BS8HB MINGW64 ~/Vagrant (master)
$ git add README.md
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory

watya@DESKTOP-C8BS8HB MINGW64 ~/Vagrant (master)
$ git commit -m "first commit"
[master (root-commit) e57e28f] first commit
 1 file changed, 1 insertion(+)
 create mode 100644 README.md

watya@DESKTOP-C8BS8HB MINGW64 ~/Vagrant (master)
$ git remote add origin https://github.com/watyanabe164/Vagrant.git

watya@DESKTOP-C8BS8HB MINGW64 ~/Vagrant (master)
$ git push -u origin master
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 221 bytes | 221.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/watyanabe164/Vagrant.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

watya@DESKTOP-C8BS8HB MINGW64 ~/Vagrant (master)
$
```
# おわりに
githubがいまだに慣れない。SVNは何となく理解できたけど、gitの理解が今一つ。。。
なれればもう少しわかるんだろうけどしばらくは手を動かして覚えていこうと思う。