OmniAICreator/Qiita-1.07M huggingface dataset:
MacでImageJを使って動画解析をするための前処理(変換)

#前置き
ImageJで動画解析をする際には、.aviファイルの形式にして読み込みます。

Windowsではおなじみの拡張子ですがMacだと、フリーソフトのコンバーターを使って変換しても読み込めないなどのエラーが多発して苦労しました。

この時、ffmpegを用いるとすんなりと解決できました。
その際の、解決策の忘備録として。

#使用するもの
・Homebrew
・ffmpeg
・元動画ファイル(元ファイルの拡張子はmpgに限らず幅広いフォーマットでも大丈夫)

#インストール
ターミナルを立ち上げてコマンド操作で行います。
※Homebrewを事前に導入している前提です。

```brew install ffmpeg```

#やること
(1)Macのターミナルの立ち上げ
(2)動画ファイルのあるディレクトリに移動(cd XXXやlsを駆使してファイルの存在を確認してください)
(3)ターミナルに以下のコマンドを入力
```ffmpeg -i 元のファイル名.mpg -f avi -vcodec  mjpeg 変換後のファイル名.avi```
(4)変換されたファイルをImageJにドラッグアンドドロップで読み込ませると読み込みます
以上

※今回は単純な変換のみですが、実際には変換の際にコーデックの種類、フレームレートやオーディオ形式など結構いろいろなオプションを指定することが出来ます。

#おまけに
研究でもお世話になることの多いImageJですが、機能が多すぎてつまづく人も多いかと思います。
動画解析などの手順や、こんな処理ってできるのかな？と思った際には[こちらの資料](http://www.bio.chuo-u.ac.jp/nano/LM/ImageJ_ex3.pdf)をとりあえず見てみると良いかと思います。

#参考
[ImageJ -Inporting .avi](http://imagej.1557.x6.nabble.com/Importing-avi-td5000582.html)
[それFFmpegで出来るよ！](https://qiita.com/cha84rakanal/items/e84fe4eb6fbe2ae13fd8)
vue.js コンポーネントの書き方

Vue cliを使わないcdn版でのコンポーネントの書き方です。
いくつか書き方があり迷うので自分メモ的に投稿致します。
大きくわけてグローバル登録とローカル登録があります。
## コンポーネントの書き方（グローバル登録）
コンポーネント名はHTMLタグになるもの
テンプレート名は直接HTMLタグを書くか、HTML内に記述したx-templateの対応するidを設定

```js
//コンポーネント１
Vue.component('コンポーネント名A', {
    template: 'HTMLタグを記述、もしくはテンプレートのid',
    data: function() {
        return {
            number: 12
        }
    }
})

//コンポーネント２
Vue.component('コンポーネント名B', {
    template: 'HTMLタグを記述、もしくはテンプレートのid',
    data: function() {
        return {
            msg: 'hello!'
        }
    }
})

//HTML内で表示したいブロック
new Vue({ el: '#app' })
         
new Vue({ el: '#app2' })
```
グローバルなので#app、#app2どちらのブロックでもすべてのコンポーネント名がHTMLタグとして使用できます。

```html
  <div id="app">
    <コンポーネント名A></コンポーネント名A>
  </div>
  <div id="app2">
    <コンポーネント名A></コンポーネント名A>
    <コンポーネント名B></コンポーネント名B>
  </div>
```

## コンポーネントの書き方（ローカル登録） 推奨
定義したコンポーネントの定数名を、new Vue内で使いたいel:に使いたいタグ名で登録する

```js
//コンポーネントを定義
const 定数名 = {
    template: 'HTMLタグを記述、もしくはテンプレートのid',
    data: function() {
      return {
        msg: 'キーワードを入力してください',
      }
    }
  }

new Vue({
  el: 'HTML内の使いたいブロックをCSSセレクタで記述',
  components: {
//上のelでマウントしたHTML内のブロックに
//下の 'HTMLタグ名'：定数名 を使います宣言
    'search-component': Search
  }
})

```
> [Vue warn]: Unknown custom element: <aa> - did you register the component correctly? For recursive components, make sure to provide the "name" option. - did you register the component correctly? For recursive components, make sure to provide the "name" option.  

というエラーを吐かれたときはコンポート名が間違っていないか確認してください。  

## まとめ
**基本的にローカル登録を推奨**
> 多くの場合、グローバル登録は理想的ではありません。例えば Webpack のようなビルドシステムを利用しているときに、グローバルに登録した全てのコンポーネントは、たとえ使用しなくなっても、依然として最終ビルドに含まれてしまうことでしょう。これは、ユーザがダウンロードしなくてはならない JavaScript のファイルサイズを不要に増加させてしまいます。
このような場合に、コンポーネントを素の JavaScript オブジェクトとして定義することができます。

**ローカル登録手順まとめ**

- constでコンポーネントを定義
- templateを作成（HTML内にx-templateかコンポーネントのtemplate:に直接記述）  
    ※vue cli で使える.vueファイルだとファイル毎にコンポーネントをまとめて書くやり方が使える
- template:でテンプレートを定義（直接記述でない場合x-templateのidを指定する）
- data、methodsなどオプションを定義  
  ※dataはコンポーネント側に記述する（new Vueの方にdataを記述した場合反映されない感じ？）
- new Vue で使いたいブロックをel:に、使いたいコンポーネントをcomponents:に
- el:複数登録不可、components:は複数登録可能  
- components:に登録したコンポーネントだけがそのel:内で使える
過去の電力使用量取得 中国電力編

# はじめに

電力使用量予測のセミナーをしていて、各電力会社の公表されている過去の使用電力量の形式がまちまちなので取得するのが難しいというご意見を聞いていました。
そこで、それぞれの電力会社別にデータの取得方法をまとめてみます。

ちなみに、対象とする電力会社は、北海道電力、東北電力、東京電力、北陸電力、中部電力、関西電力、中国電力、四国電力、九州電力、沖縄電力で、今回は中国電力さんを扱ってみます。

注：大量のダウンロードを繰り返すとサーバに負担がかかるので、ダウンロードは一回だけにするか、対象期間を限定して行うよう心がけて下さい。

# 動作環境

GoogleさんのCoraboratoryという環境で動作させます。

[Colaboratory](https://colab.research.google.com/)

# Webサイト

以下のWebサイトからデータをダウンロードできそうです。

[中国電力ネットワーク でんき予報](https://www.energia.co.jp/nw/jukyuu/)

# ダウンロード

```py:
for y in range(2016, 2020):
  url = "https://www.energia.co.jp/nw/jukyuu/sys/juyo-{:04}.csv".format(y)
  print(url)
  !wget $url
```

2020年9月現在、実行してみると2018年4月からのデータまで公開されているようです。

# 読込と可視化


```py:
from glob import glob
import pandas as pd

files = glob("j*.csv")
files.sort()
print(files)

df_juyo = pd.DataFrame()

for f in files:
  df = pd.read_csv(f, skiprows=2, encoding="Shift_JIS")
  df_juyo = pd.concat([df_juyo, df])

print(df_juyo.shape)
print(df_juyo.columns)

df_juyo.index = pd.to_datetime(df_juyo["DATE"] + " " + df_juyo["TIME"])

df_juyo["実績(万kW)"].plot(figsize=(15,5))
```
![Unknown.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114240/16b94375-3ba8-f3a7-a274-75412930d0b5.png)


できた！

過去の電力使用量実績は公開を終了される場合もあるので、継続的なデータ収集が必要ですね。

電気使用量を見ると、色々な気付きがありますね。
以上、現場からきむらがお伝えしました。

# 補足

記事を読んだ人から「時間がかかり過ぎるので、手っ取り早くデータが欲しい場合にはどうしたら良いか？」という質問があったので、ちょっとだけデータを販売してみることにしました。
データに興味があれば以下のURLをご覧下さい。

https://ticket.tsuku2.jp/eventsDetail.php?ecd=16260900020422
Python で多重配列からブロック多重配列をスライスする方法

## 概要

Python で多重配列 `numpy.ndarray` もしくは `torch.Tensor` からブロック多重配列をスライスするときは関数 `numpy.ix_` を使う。

## 詳細

Julia で

```julia
# Julia
# 多重配列を作る
(i, j, k) = (2, 3, 4)
x = reshape(1:i * j * k, i, j, k)
# 多重配列を多重添字でスライスする
(is, js, ks) = ([2, 1], [1, 3], 2:3)
x[is, js, ks] |> println
```

みたいにして多重配列を多重添字でスライスするのを Python でどうやるのか調べてもなかなか情報にたどり着かなかったのでメモ。`numpy.ix_` が所望のものである。 NumPy や PyTorch はデフォルトだと Julia の Array とは多重配列の次元の並べ方が逆であることに注意。

```python
# Python + NumPy
import numpy
# 多重配列を作る
i, j, k = 2, 3, 4
x = (numpy.arange(k * j * i) + 1).reshape(k, j, i)
# 多重配列を多重添字でスライスする
# (Python では is は予約語かなんかのようなので is_ とする)
is_, js, ks = numpy.array([2, 1]) - 1, numpy.array([1, 3]) - 1, numpy.arange(2 - 1, 3)
print(x[numpy.ix_(ks, js, is_)])
```

```python
# Python + PyTorch
import torch
import numpy
# 多重配列を作る
i, j, k = 2, 3, 4
x = (torch.arange(k * j * i) + 1).reshape(k, j, i)
# 多重配列を多重添字でスライスする
# (Python では is は予約語かなんかのようなので is_ とする)
is_, js, ks = torch.tensor([2, 1]) - 1, torch.tensor([1, 3]) - 1, torch.arange(2 - 1, 3)
print(x[numpy.ix_(ks, js, is_)])
```
【Firebase認証】keytoolが実行できない時の対処法【スクショ付き】



FlutterにてFirebaseのAuthentication認証を実装中、証明書のフィンガープリントを作成する工程がありますが、`keytool`コマンドが実行できませんでした。


## 対処法：パスを通す

keytool.exeへのパスを通しましょう。

※以下はWindows10での説明。

### keytoolはどこにある？

▼検索してみましょう。Android Studio内にあると思います。
![コメント 2020-09-09 044938.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699790/d2eff7d4-43a1-c51a-c4b2-ab8eb5f7394b.png)

### 環境変数にパスを追加

▼システム環境変数の設定を開きます。
![コメント 2020-09-09 045600.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699790/74a31a60-1006-5d3e-c75e-7bbfdff5a395.png)

▼Pathをダブルクリック。
![コメント 2020-09-05 112929_censored (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699790/7cb9d01b-e7d4-5aa2-ebcf-89db365eddb3.jpeg)

▼keytoolのパスを追加。
![コメント 2020-09-05 112945_censored (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699790/5b26267e-4701-86d5-f069-9a007c4ce83b.jpeg)

以上で使用できるようになります。

## 検証

証明書の発行コマンドはこちら。
(ユーザー名)は書き換えてください。

```
keytool -list -v -alias androiddebugkey -keystore /Users/(ユーザー名)/.android/debug.keystore
```

実行できました！
![コメント 2020-09-05 113015_censored (3).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699790/a5a6627c-1189-b15e-ea31-ca0c7fc4ba1c.jpeg)
Jupyter セル移動 ショートカット

Jupyter Lab にはセルを上下させるショートカットキーが割り当てられていない。
また、マウスによる操作も煩雑だったので、ショートカットキーを自作した。
その備忘録として書き残しておく。

# 設定方法
1. Jupyter Lab を立ち上げる。
2. `Settings -> Advanced Settings Editor`を開く。
3. `Keyboard Shortcuts`を選択し、右側の`User Preferences`に以下を記入して保存する。

```json:UserPreferences
{
    "shortcuts": [
        {
            "command": "notebook:move-cell-up",
            "keys": [
                "Ctrl Shift K"
            ],
            "selector": ".jp-Notebook:focus"
        
        },
        {
            "command": "notebook:move-cell-down",
            "keys": [
                "Ctrl Shift J"
            ],
            "selector": ".jp-Notebook:focus"
        
        },
    ]
}
```
これで、セルモード中に`Ctrl Shift K`でセルを上に、`Ctrl Shift J`でセルを下に移動することができる。


## 説明
`Ctrl K (Ctrl J)`で選択中のセルの上(下)のセルを選択する、というショートカットキーが割り当てられていたので、今回のショートカットを`Ctrl Shift K (Ctrl Shift J)`にした。

他にもショートカットキーを作成したい場合、`System Defaults`を探索すれば、なんとなく分かるはず。


# その他の設定
## 行番号の設定
ちなみに、行番号を表示させることも同じように設定できる。
`Settings -> Advanced Settings Editor -> Notebook`の`User Preferences`に以下を記入して保存する。

```json:UserPreferences
{
    "codeCellConfig":{
        "lineNumbers": true,
    },
}
```
Vue.js で TypeScriptを使う

## vue-cli
vue-cli は vue.js のプロジェクトを準備するとき等に利用するツールです。
vue-cli でプロジェクトを作りましょう。

vue-cli を利用するには node.js をインストールして npm を利用して vue-cli をインストールします。

```powershell
npm install -g @vue/cli
```

インストールが終わったら早速 vue-cli のプロジェクトテンプレートを利用してプロジェクトを作りましょう。
プロジェクトは vue create コマンドで作成します。
コマンドは vue create &lt;project-name&gt; で指定します。

```powershell
vue create vue-ts-practice
```
起動するとプリセット選択に移ります。
Typescript を利用するために Manually select features を選択します。

```powershell
Vue CLI v4.5.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features
```
とりあえず、全部チェックしておきます。

```powershell
Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 (*) TypeScript
 (*) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
 (*) E2E Testing
```

Vue.jsのversionを聞かれるので3.x (Preview)を選択します。

```powershell
Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x (Preview)
```

以降設定について聞かれるので お好みで設定したら、プロジェクト作成が始まるので完了するまで待ちます。


完了すると以下のような画面になると思います。

```powershell
�  Successfully created project vue-ts-practice.
�  Get started with the following commands:

 $ cd vue-ts-practice
 $ npm run serve
```

記述されているように

```powershell
cd <プロジェクト名>
npm run serve
```
と実行すると構築されたプロジェクトが起動されます。

```powershell
 DONE  Compiled successfully in 23867ms


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.16.0.66:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

No issues found.
```

表示されているアドレス（http://localhost:8080） にブラウザで接続してみると Vue.js のウェルカムページに遷移します。
![6.jpg](https://qiita-image-store.s3.amazonaws.com/0/293368/f13b5453-0655-544f-f189-8b58ec00016e.jpeg)
このプロジェクトを利用して Typescript で Vue.js を書いていきます。
ファイル名からスペースとシングルクォートを取り除いてリネームするワンライナー

# 背景

その昔iTunesなどでCDからPCに取り込んだmp3ファイルに対して、Music Source Separationやったりして遊びたいときってありますよね。

ただ、曲名って複数単語だとスペースが入っていたり、アポストロフィとしてシングルクォートが含まれていたり（`No Man's Land`のような）で、コマンドライン上で使うにはあまりありがたくない文字列である場合も多いです。

とりあえず、あとあと扱いやすくするために、これらの面倒な文字を`_`に置換してしまいたい、というのが今回の動機です。

私が試したケースでいうと、タイトルのようにスペースとシングルクォートだけで事足りたのですが、それ以外の場合があれば適宜コマンド上で置換対象とする文字を増やしてもらえればと思います。

（2020/09/09追記）MacまたはLinuxでは`rename`コマンドでよかった。Macの場合、`brew`で`rename`をインストールしてから実行する。

```shell
brew install rename
ls *.mp3 | rename "s/[\ \']/_/g"
```

（追記ここまで）


# コマンド

```shell
ls *.mp3 | awk '{gsub(/\ /,"\\ ");gsub(/'\''/,"\\'\''");print;gsub(/[\ '\'']/,"_");gsub(/\\/,"");print}' | xargs -n 2 mv
```

## 処理の流れ

ちょっとだけ内容を解説します。

### 1. リネームさせたいファイル名を抽出する

`ls *.mp3` の部分です。今回は拡張子`mp3`のファイルに限定していますが、ここは任意です。

### 2. 変更前のファイル名と変更後のファイル名を出力する

`awk '{ 〜〜 }'`の個所です。何やってるのかわからないところかと思います。

ここでは、パイプ経由で標準入力に与えられた行（ファイル名）を「編集して出力」を2回行っています。

たとえば、`ho ge'ho ge.mp3`という半角スペースとシングルクォートを含むファイル名があったとします。`awk`への入力に流れてきたときの流れを見やすく表現してみましょう。

```awk
{                        # ho ge'ho ge.mp3
  gsub(/\ /,"\\ ");      # ho\ ge'ho\ ge.mp3 
  gsub(/'\''/,"\\'\''"); # ho\ ge\'ho\ ge.mp3 
  print;                 # ↑を出力
  gsub(/[\ '\'']/,"_");  # ho\_ge\_ho\_ge.mp3
  gsub(/\\/,"");         # ho_ge_ho_ge.mp3
  print                  # ↑を出力
}
```

処理自体は単純なのですが、エスケープまみれなせいで見づらくなってますね。
`awk`では、半角スペースやバックスラッシュは`\`を前につけるだけでエスケープできるのですが、シングルクォートは`'\''`と、バックスラッシュを前に付けた上でさらにシングルクォートで囲む、ということをしないといけないようです。

### 3. `awk`の出力を`mv`の引数に渡して実行する

上記`awk`の処理では、`mv`に渡す「変更前のファイル名」と「変更後のファイル名」をそれぞれ出力しました。それらを`mv`の2つの引数に渡すには`xargs`を使います。

```shell
xargs -n 2 <cmd>
```

で、前2つの出力を`<cmd>`の引数として渡せます。つまり、この場合は最終的に

```shell
mv ho\ ge\'ho\ ge.mp3 ho_ge_ho_ge.mp3
```

というコマンドが実行されることになります。

# おわりに

~~もっといいやり方ないんかいな…~~ あったので追記した。


# 参考

- [ファイル名を一括置換するワンライナー - Qiita](https://qiita.com/goking/items/ff6ea22a4b5559d30896)
- [awkのワンライナーでシングルクォーテーションを使いたいときのエスケープ等の回避方法4個 | 俺的備忘録 〜なんかいろいろ〜](https://orebibou.com/ja/home/201707/20170724_001/)
php 画像向き修正

 ```php:image.php 
$filename = "パス"

if (mime_content_type($filename) == 'image/jpeg') {
          $image = ImageCreateFromJPEG($filename);
        }else {
          $image = ImageCreateFromPNG($filename);
        }


        $exif_datas = @exif_read_data($filename);
        if (isset($exif_datas['Orientation'])) {
          $orientation = $exif_datas['Orientation'];
        
          //回転角度
          $degrees = 0;
          switch($orientation) {
            case 1:		//回転なし（↑）
              break;
            case 8:		//右に90度（→）
              $degrees = 90;
              break;
            case 3:		//180度回転（↓）
              $degrees = 180;
              break;
            case 6:		//右に270度回転（←）
              $degrees = 270;
              break;
            case 2:		//反転　（↑）
              $mode = IMG_FLIP_HORIZONTAL;
              break;
            case 7:		//反転して右90度（→）
              $degrees = 90;
              $mode = IMG_FLIP_HORIZONTAL;
              break;
            case 4:		//反転して180度なんだけど縦反転と同じ（↓）
              $mode = IMG_FLIP_VERTICAL;
              break;
            case 5:		//反転して270度（←）
              $degrees = 270;
              $mode = IMG_FLIP_HORIZONTAL;
              break;
          }
          //反転(2,7,4,5)
          if (isset($mode)) {
            $image = imageflip($image, $mode);
          }
          //回転(8,3,6,7,5)
          if ($degrees > 0) {
            $image = imagerotate($image, $degrees, 0);
          }

          //保存
          if (mime_content_type($filename) == 'image/jpeg') {
            ImageJPEG($image, $filename);
          }else {
            ImagePNG($image, $filename);
          }
          // //メモリ解放
          imagedestroy($image);
        }
```
AWSを使ってアプリケーションを公開する手順(4)データベースの作成

#はじめに
AWSを使ってアプリケーションを公開する手順を記載していく。
この記事ではデータベースの作成を行う。

#データベースを作成する
WEBアプリケーションのデータを保存するためにデータベースを作成する。

##データベースの種類
データベースの種類には以下のようなものがある。

- 階層型データベース
- ネットワーク型データベース
- リレーショナルデータベース

この中で最も利用されているのがリレーショナルデータベースである。
リレーショナルデータベースを管理するソフトウェアをリレーショナルデータベースマネジメントシステム(RDBMS)という。
RDBMSの一つにMySQLがある。
MySQLはOracle社が開発・提供をしているRDBMSで、データベースの作成、編集、削除などを行うことができる。
オープンソースソフトウェアとして公開されており、誰でも無償で利用することができます。
Ruby on Railsと併せて利用することができるため、本稿ではMySQLを用いてデータベースを作成していく。

##MySQLをインストールする
以下のコマンドを実行し、MySQLをインストールする。
今回はバージョン5.6をインストールする。

```
sudo yum -y install mysql56-server mysql56-devel mysql56
```

##MySQLを起動する
以下のコマンドを実行し、MySQLを起動する。

```
sudo service mysqld start
```

以下のコマンドを実行し、「running」と表示されれば無事起動できている。

```
sudo service mysqld status
```

###serviceコマンドとは
UNIX系(LinuxやMacなど)で使えるコマンドで、サービスを起動したり停止したりできる。

###mysqldとは
上記のコマンドはmysqlではなくmysqldとなっていて、末尾に「d」がついている。
このdはLinuxの用語「デーモン(daemon)」の略で、「サーバ」を意味する。

##MySQLのパスワード設定
インストールしたMySQLにはデフォルトでrootユーザーでアクセス出来るようになっているが、
パスワードが設定されていないので、パスワードを設定する。
例えば'AbCdEf1234'というパスワードにするときは以下のコマンドを実行する。

```
sudo /usr/libexec/mysql56/mysqladmin -u root password 'AbCdEf1234'
```

##MySQLの接続確認
以下のコマンドを実行し、MySQLに接続できるか確認する。
パスワードの入力を求められるので先ほど設定したパスワードを入力する。
エラーが出なければOK。

```
mysql -u root -p
```

###MySQLコマンドのオプションについて
上記MySQLコマンドのオプションは次のような意味である。

```
-u. ユーザ名指定
-p. パスワード指定
```

# 関連記事
[AWSを使ってアプリケーションを公開する手順(1)AWSアカウントの作成](https://qiita.com/osawa4017/items/78ee5912084dd83c5a0d)
[AWSを使ってアプリケーションを公開する手順(2)EC2インスタンスの作成](https://qiita.com/drafts/ec5aa2965a89320b074d)
[AWSを使ってアプリケーションを公開する方法(3)EC2インスタンスの環境構築]
(https://qiita.com/osawa4017/items/8dc09203f84e04bf0e66)
[AWSを使ってアプリケーションを公開する手順(5)アプリケーションを公開する]
(https://qiita.com/osawa4017/items/6f3125fcc21f73024311)
[AWSを使ってアプリケーションを公開する手順(6)Nginxを導入する]
(https://qiita.com/osawa4017/items/9b707baf6ddde623068c)
M5stackとROS(rosserial)との通信方法(USB接続)

# 試した環境

* ホストPC
    * ROS Melodic (rosversion: 1.14.5)
    * ros-melodic-rosserial-arduino (0.8.0)
    * Ubuntu 18.04
* M5Stack GRAY

# 経緯

* M5Stackを使って、ROSとの通信をUSB接続で行いたかったが、ドキュメントどおりに行ってもうまく行かなかった。
    * Melodic + Wifiの記事は多く見つかったが、USB通信の記事が見つからなかった。
    * ros_libのソースを見たところ、ros.hでは、M5Stack(ESP32)を使うとデフォルトで、TCP IP通信となってしまうことが判明。
* Arduino側のソースを変更することで回避（下記のコードを参照）

# 環境構築

M5StackとROSの環境構築方法は、下記の記事などを参考

* M5Stack
    * https://raspberrypi.mongonta.com/howto-start-m5stack-arduinoide/
* ROS関連
    * https://qiita.com/nnn112358/items/059487952eb3f9a5489b

# コード

M5StackROSHelloWorld.ino

```cpp
#include <M5Stack.h>
#undef ESP32
#include <ros.h>
#define ESP32
#include <std_msgs/String.h>

ros::NodeHandle  nh;
std_msgs::String str_msg;
ros::Publisher chatter("chatter", &str_msg);

char hello[13] = "hello world!";

void setup()
{
  M5.begin();
  M5.Speaker.begin();
  M5.Speaker.mute();  
  
  nh.initNode();
  nh.getHardware()->setBaud(57600);
  nh.advertise(chatter);
  
  M5.Lcd.printf("ROS Hello World Publisher Started\n");

}

void loop()
{
  str_msg.data = hello;
  chatter.publish( &str_msg );
  nh.spinOnce();
  delay(1000);
}

```

## ポイント
* ros.h をincludeする前に、ESP32を#undefする
* こうすることで、ArduinoHardwareがUSB接続のものがincludeされるようになる
    * https://github.com/ros-drivers/rosserial/blob/0.8.0/rosserial_arduino/src/ros_lib/ros.h#L40-L44

## 追記 (2020.9.9)

ros-serial-aruduino(melodic-devel)の最新版のソースだとros.hの前に、ESP_SERIAL を#defineすればいけるらしい（動作確認はしていない）。

```cpp
#define ESP_SERIAL
#include <ros.h>
```
https://github.com/ros-drivers/rosserial/pull/448

         
# 動作確認

ホストPCとの接続

```bash
$ roscore
$ rosrun rosserial_arduino serial_node.py _baud:=57600
```
別ターミナルで

```bash
$ rostopic echo /chatter
```

下記のメッセージが出力されていればOK

```bash
---
data: "hello world!"
---
```

# まとめ

* ROS MelodicとM5StackをUSB接続で通信する方法を紹介
* ros.hをincludeする前に、#undef ESP32　を入れる必要がある
ターミナルのスクショを簡単に共有する．

# はじめに
研究室の友人が作成したrubyのgemを自分のマシンにインストールする際に出た，エラーを共有する際に，いちいち画面の写真をスマホで撮り，lineにて共有するのが面倒だと感じたのでこれを作成することにした．

# 実装

## discordに投稿

[pythonからDiscordのwebhookでメッセージ投稿する備忘録](https://qiita.com/ABBBB/items/e6bdf7fc94b8f6f72a01)

こちらを参考に，apiを用いて，discordに画像を投稿する．

## screenshotを撮る

ターミナルで，

```
$ screencapture -i -x ~/screenshot/test.png
```

これで，キャプチャの範囲を自分で指定して，シャッター音なしで，指定のフォルダにtest.pngで保存する．

## 組み合わせて完成

```python3:ss.py
import json
import requests
import os

path = "{0}/tmp.png".format(os.environ['HOME'])
os.system(f"screencapture -i -x {path}")

WEBHOOK_URL = "your webhook url"

# 画像添付
with open(path, 'rb') as f:
    file_bin = f.read()
files_qiita = {
    "ss": ("tmp.png", file_bin),
}
res = requests.post(WEBHOOK_URL, files=files_qiita)
print(res.status_code)

os.system(f"rm {path}")

```

# 設定


fishのconfigにaliasを設定する．

```config.fish
alias ss='python3 ~/screenshot/ss.py'
```

# 課題
今は，discordのチャンネルに投稿するようになっている．
これでは，特定の友人を選んで送ることができない．
例えば，lineの個人トークに画像を送ることができないかなど試行する．
【Objective-C】Objective-Cでswiftの??的なことをやるには

#Objective-CでSwiftの??的な事を実現するには
Swiftでは**??**というnil結合演算子が用意されています。
??を使用すれば変数値がnilだった場合に値を設定することができます。

**Swift**

```swift
var color = nil
var selectColor = color ?? "blue"
```
以上のような事をObjective-Cでもできるみたいなので紹介します。

**Objective-C**

```objective_c
NSString *test = [[NSString alloc] init];
NSString *test2 = test ?: @"hogehoge";
```
Objective-Cでは以上のように**?:**を用いる事で同じことができるようです。
Swiftと違う点は？？がnil結合演算子になのに対し、?:は三項演算子を省略したものであるということです。
詳しくは参考URLを下記に記載しているので、そこからご確認ください。

#参考
https://yanamura.hatenablog.com/entry/2015/03/29/214612
laravelのバージョンアップを経験して

![laravel_varsionup.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569093/2ccdd69b-ad6f-bfa2-5db3-f45032f2ac46.jpeg)

##はじめに
当方、フリーでPHPエンジニアをやっています。

最近Laravelのvar5.2からvar6にバージョンアップするプロジェクトに携わる機会があり、そこで得た経験を大雑把ではありますが、まとめてみました。
これからバージョンアップを計画している方に少しでも参考になれば幸いです！

尚、テストコードの実装があまりさせていない環境でのバージョンアップでしたが、ちゃんとテストコードを書いている場合は、テスト回して確認する事をおすすめします！

基本的には公開されている[アップデートガイド](https://readouble.com/laravel/7.x/ja/upgrade.html)を見て進めるのが良いです。

##確認する事
- サーバー
    - laravelのドキュメント、サーバー要件を確認
- mysql
    - バージョン確認する
- PHP
    - バージョン確認する
- PHPライブラリ
    - バージョンアップ後も動くか確認。ライブラリのバージョンを上げなければいけない時、既存のシステムが正常に動くか確認
    - ライブラリによってLaravelのバージョンアップ後、サポートしてない可能性もある為、注意が必要
- laravelのヘルパー関数
    - 飛び級のバージョンアップ時はだいぶ内容も変わっているので使っている際は注意が必要
- collection
    - メソッドの内容の変更、廃止されたメソッドなど
- Eloquent クエリビルダ
    - Eloquentの方が採用率は高いかもしれませんが、混合で使用していたりする場合は両方注意が必要
- jobs failed_jobsテーブルの変更
    - 5.3からjobsとfailed_jobsのテーブル構成に変更が入っています
- Laravel Mix
    - css、jsの圧縮をされている際はバージョン確認
- セッション
    - 5.3からコンストラクタでセッションにアクセスできなくなってます
- インスタンス化
    - 今はDIを使っている所も多いかと思いますが、appでインスタンス化していて変数を渡している場合、キーを指定して渡して上げないとエラーになります
- Log
    - 飛び級のバージョンアップの場合、機能も充実して設定方法も変わっているので、注意が必要。slack等にエラーログ飛ばしている場合など。
- vender配下をオーバーライドしている場合
    - 私が携わったプロジェクトで一番ネックだった所です。あまりしないかもしれませんが、セッションやauth
、その他vender配下のメソッドをオーバーライドして独自に処理を加えている場合、基本的に機能しないと考えておいた方が良いです。

プロジェクトによってはまだまだ確認する所もあるかと思いますが、システムを良く理解している方と相談して進めていくと良いです！

##バージョンアッププロジェクトを走らせる前に
注意事項をリストアップしておくと良いです。
例えば、PHPのバージョンアップが必要でPHP関数を普段良く使っている場合、非推奨になっている関数等ありますので、そういったリストと、修正内容を統一するために、補填としてどういった対応が必要か残しておくとチームとして動きやすくなります。

また、必要作業もリストアップしておくのをおすすめします。

##最後に
テストコードを普段から書いておくとバージョンアップも楽です:tada:！
すべての計算モデルは「静的単一代入」に行き着く

ポエムです。

## TL;DR
* 静的単一代入形式を「ループまで」拡張したらとても強力になったよ！

## 静的単一代入とは
詳しい説明は [Wikipedia](https://ja.wikipedia.org/wiki/%E9%9D%99%E7%9A%84%E5%8D%98%E4%B8%80%E4%BB%A3%E5%85%A5) に譲ります。JavaScriptで言えば、**すべてがconstで表現されている** ようなものです。

さてこの静的単一代入、このままでは部分的な最適化に用いられる程度でしかありませんが、これを**ループまで**拡張し、あらゆるプログラムを表現できるととても良いのではないのだろうか。というのが、本稿の内容です。

下記の疑似コードをご覧ください。

```
sum = 0
for x in xs {
  sum = sum + x
}
```

これは、変数 `sum` を上書きしながらループを回す、一般的な手続き型言語のコードです。

これに対して、`sum` を上書きしないような以下の疑似コードを考えます。

```
for sum from 0; x in xs {
  sum = last sum + x
}
```

`last sum` の部分に注目してください。ここで `last sum` は前のループの同名変数を表します。`sum` へは一度のループで一回しか代入できません。各ループの`sum`はあくまで別の変数であり、`last`を用いて他の（前の）ループでの値を参照できます。

これで晴れて、静的単一代入のルール「各変数が一度のみ代入される」を守りつつ、ループまで拡張することができました。

## どう嬉しいのか
先述のsumの例では、各ループは前のループの計算結果を待たないと今回のループで計算ができないことが明確に表されました。図にするとこのような形です。

![Untitled Diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348791/ff5fbf18-33f1-adae-708b-0e7f1719cc0f.png)

一方で、前のループの計算結果に**依存しない**ことも明確に表すことができます。

```
for x in xs {
  y = x * 2
}
```
`last` 演算子を使っていないので、各ループは完全に独立に計算ができます。
![Untitled Diagram-Page-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348791/be1e4c37-cce0-521e-ee16-40be4c102f0d.png)

嬉しいのは、並列化を効かせやすい点です（たとえば、[SIMD命令](https://ja.wikipedia.org/wiki/SIMD) のような）。この性質はループに限りません。以下の疑似コードを考えます。

```
a = 2 * 2
b = 3 * 3
c = a + b
```
![Untitled Diagram-Page-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348791/6a27559f-32c3-0c1c-75c7-10ef2d82d84a.png)

`c` を求めるには `a` と `b` が必要ですが、`a`と`b`はお互いに独立して計算できます。つまり、並列に実行できます。

これは上述のようなシンプルな計算だけでなく、非常に重い計算でも同じことがいえます。I/Oなど長い待ちが発生する処理を`a`側に逃し、裏で出来る計算を`b`側で行う、のような表現も可能です。

静的単一代入の本来の目的がそうであるように、この形式に沿ってプログラムを書くことで、多様な最適化の恩恵が受けられます。

筆者はこの静的単一代入形式の拡張こそが、様々な計算モデルの中で最も適切に抽象化された形ではないかと考えています。

---
拙い文章ではありますが、以上が今回書きたかったポエムとなります。当然賢明な読者の方においては、ツッコミどころが多数あることかと思います。是非コメント欄にて議論を交わしませんか？　いつまでもお待ちしております。
始めて学ぶjava ＃3　式と演算子

##式とは？
```
public class Main {
	public static void main(String[] args) {
	    int a;
	    int b;
	    a = 20;
	    b =a+5;
		System.out.println(a);
		System.out.println(b);
	}
}
```

実行結果

```
20
25
```

６行目のようなものを式と呼ぶ。
「a」、「b」、「５」をオペランド、「＋」、「*」を演算子と呼ぶ。
複雑な式であっても同じく、すべての式はこの二つで成り立っている。

###リテラル
オペラントの中でも「5」や「hello,world」などソースコードに記述してあることをリテラルと呼ぶ。
リテラルは（int）などのデータ型を持っている。

###エスケープシーケンス
￥記号とそれに続く一文字で記述する記述方法で特殊な一文字を表す。

| 表記 | 意味 | 
|:-----------|------------:|
| ￥”      | 二重引用符記号     | 
| ¥ ’  | 引用符記号      |
| ￥￥   | 円記号       | 
| ￥ｎ    | 改行        | 


###演算子

| 演算子 | 機能 | 
|:-----------|------------:|
| ＋     |足し算 | 
| ー  | 引き算   |
| ＊  |掛け算     | 
| ／    | 割り算  | 
| ％  | 割り算の余り（余剰）  | 
| ＋ | 文字列の連結| 
| ＝   | 右辺を左辺に代入  | 
| ＋＝    | 左辺と右辺を加算して左辺に代入（算術演算子の通りある）  | 
| ＋＋    | 値を一つ増やす  |
| ーー    | 値を一つ減らす  |
VBAでドラッグ＆ドロップでファイルパスを取得する一番簡単な方法

## はじめに
ExcelVBAで業務用ツールを開発する際に避けて通れないのが**処理用のファイルパスの入力**です。
これまで自分が作成したツールではファイルダイアログを開いて選択してもらう方法しかありませんでした。
今回、非常にシンプルな方法で**フォーム上へのドラッグ＆ドロップでファイルパスを取得**できたので、記事に残します。

## 目的
VBAのフォーム上へのドラッグ＆ドロップでファイルパスを取得したい。

## 処理フロー
１、フォーム上にWebbrowserコントロールを配置する
２、Webbrowserコントロールの***BeforeNavigate2***イベントの引数**URL**を取得する
３、***BeforeNavigate2***イベントを引数**Cancel=True**でキャンセルする

<details><summary>**フォームイメージ・サンプルコード**</summary><div>
下記のフォームイメージではTextBoxとLabelを配置しています。
WebbrowserコントロールはLabelの枠内の白い部分です。

![図3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390397/692f2f1a-3f94-5732-b4dd-923c32b7d739.jpeg)

```vb
Option Explicit

Private Sub WebBrowser1_BeforeNavigate2(ByVal pDisp As Object, URL As Variant, Flags As Variant, TargetFrameName As Variant, PostData As Variant, Headers As Variant, Cancel As Boolean)
TextBox1.Text = URL
Cancel = True
End Sub

```

</div>

## 解説
Webbrowserコントロールにファイルをドラッグ＆ドロップすると表示のためファイルパスを開こうとします。
この時、**BeforeNavigate2**イベントは文字通りファイルを開く前に発生し、引数**URL**としてファイルパスを返します。
さらに、**BeforeNavigate2**イベントそのものを引数**Cancel**で中断します。
結果としてWebbrowserコントロールのファイル読み込みによるエラーを回避しつつ、ファイルパスのみを取得することができます。

## 補足
**ファイルパスは一つずつしか取得できません。**
Webbrowserコントロールの枠とか背景色とかの変更はVBAのフォームでは簡単にはできないようです。
外部にHtmlファイル作れば表示内容の変更は可能でした。

## 最後に
自身の環境ではこれで**ファイルパスの取得がめちゃくちゃ楽**になりました。
今後Webbrowserコントロールのサポートが続く限りは、使える方法だと思います。
MySQLのトランザクション処理ではまった話

#概要
とある外部システムからの連携データを取り込む際に、うまくトランザクション処理ができなかったので、その際調べたことをまとめる。

#発生した事象
とある業務で外部システムからの連携データ（CSVファイル）を一定の期間毎にテーブルに反映するという要件があり、下記のように一旦全レコードを削除してから連携データを挿入しようとした。

    TRUNCATE TABLE table1;
    LOAD DATA LOCAL INFILE 'hoge.csv' INTO TABLE table1;

上記の処理を1つのトランザクション処理として記述した所、loadに失敗した場合でもtable1が空になっており、ロールバックされない事象が発生してしまった。

#原因1
よくよく調べてみると、下記のような記述を発見。

>切り捨て操作は暗黙的なコミットを発生させるため、ロールバックできません。

(引用元：https://dev.mysql.com/doc/refman/5.6/ja/truncate-table.html)

truncateのようないわゆるDDLはトランザクション処理の外で実行されるためロールバックできないとのこと・・・。
そこで、truncateをdeleteに変更し、下記のように実装してみた。

    DELETE FROM table1;
    LOAD DATA LOCAL INFILE 'hoge.csv' INTO TABLE table1;

これでいけるだろうと思いきや、またしてもロールバックできず・・・。

#原因2
さらに調べるとMySQLでは下記のようにストレージエンジンによってトランザクション処理自体が使えない場合があるとのこと（これまでSQL Server中心に触ってきたので知らなかった）。

・InnoDB：行ロック、トランザクション処理可能
・MyISAM：テーブルロック、トランザクション処理不可

今回対象にしていたテーブルのストレージエンジンを調べるとMyISAM・・・。そもそも、トランザクション処理できませんでしたというお話(T_T)

#対処法
トランザクション処理ができないので、結局、先に挿入してから差分を削除する実装に変更。
テンポラリーテーブルにデータを全部持ってきて、挿入時に現在時刻を入れておくことで、後から時刻を比較して更新されていないものを削除する方式。

    CREATE TEMPORARY TABLE tmp AS SELECT * FROM table1;
    LOAD DATA LOCAL INFILE 'hoge.csv' REPLACE INFILE table1 SET created_at = now();
    DELETE t1 FROM table1 AS t1 LEFT OUTER JOIN tmp AS t ON t1.key = t.key WHERE t1.created_at = t.created_at

根本的な解決になっていないが、とりあえずロードに失敗してもテーブルが空になることは避けられた。
本当はストレージエンジンをinnoDBに変更してトランザクション処理をかけたいが、常時稼働中のテーブルのため難しかった。

#おまけ
MySQLやOracle以外のSQLではDDLもトランザクション処理の対象になっているらしい。しばらくはMySQL中心だろうから試すことはなさそう。

#コメント
SQLとかDB周りはアプリ開発に必要な部分をちょこちょことつまんでるだけなので、知識が断片的になりがちだなと感じた。一度、体系的に勉強したほうがいいなあ。
xdebug.so関連エラー

## エラー
php -v を実行したところ、下記エラーが発生。(pythonでも同様)

```
$ php -v
PHP Warning:  Failed loading Zend extension 'xdebug.so'
```

## 解決策
```
$ php --ini
(略)
Configuration File (php.ini) Path: /usr/local/etc/php/7.2
Loaded Configuration File:         /usr/local/etc/php/7.2/php.ini
(略)

$ vi /usr/local/etc/php/7.2/php.ini
```
zend_extension="xdebug.so"をコメントアウト。

## 参考
[xdebugドキュメント](http://xdebug.org/docs/install)
【資格】応用情報技術者試験の文章系問題の勉強方法について②

#前回のまとめ
前の記事で根本的な解説まで踏み込んだ良書が少ない為に前提知識を理解出来ないままに何となく勉強してしまう状況が多いことに触れました。今回は私の経験ではありますがその対策として実際に行った勉強方法について記載したいと思います。
[【資格】応用情報技術者試験の文章系問題の勉強方法について①](https://qiita.com/ka-kun/items/7bc7708ef98905380a93)

#環境を整える
まず会社の会議室、規則を守った上で利用する図書館など落ち着いて勉強出来る場所を探します。かなり重要です。かなり集中力が変わるので良ければ是非試してみてください。

#現状の把握（基本情報処理試験の合格発表後）
ここで過去の午後問題を早い段階で挑戦してみることをおすすめします。現実を直視するのが怖くて力を付けてから挑戦したくなるでしょうが得意不得意、選択問題を決定する為にすぐに挑戦した方が良いでしょう。この時点で午後3割取れれば充分ではないでしょうか。勉強すれば成績は必ず伸びるので得点は重要では無いと思います。

#学習の予定を立てる
次に学習計画を立てます。なお、私はこのような形で計画を立てました。
![計画.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691200/c042ea8a-a3df-1cbc-8b18-15bafc24b255.png)

ポイントは
・午前は午後対策の合間に少しづつ勧めた
・得点の高かった科目は半月程度とした
・予定から激しく遅れると諦めたくなり、モチベーションが低下する為にスケジュールは厳守
・用語暗記は程々に（いずれ午前試験対策でやるので）
でしょうか。ITの業界には「学生症候群」なる言葉があり、海外の優れたプログラマでも予定を立てないと後になって慌てて結局間に合わなくなるということらしいです。いわゆる学生の夏休みの宿題ですね。

#勉強方法について
勉強場所と予定を立てたらいよいよ試験対策を開始するわけですが、ここで詳しい解説に踏み込んだ参考書探しが重要となります。結論から述べると、独学でもし効率良く知識を得るのであれば**高度試験の参考書**を購入するのが一番手っ取り早いと私は考えています。と言うのも高度試験の参考書は、購入者が根本的な知識を得て論文を書く力を付けられるように記述されており、それが応用情報の試験対策にも大きく生きるからです。

プロジェクトマネージャの範囲でおすすめの参考書は「三好康之」氏の書籍で
「うかるプロジェクトマネージャYYYY年版」
2020/9/8現在ではタイトルで出版されております。

なおシステム監査では著者は異なりますがやはり同タイトルのものをおすすめします。
「うかるシステム監査技術者YYYY年版」

#高度試験の参考書を使用した勉強方法
一月で一つの科目を勉強しなければならない為に論文用の特殊な対策は全て読み飛ばします。そして基本的には以下のサイクルを繰り返して行くことをおすすめします。
①午後一の問題を取り敢えず解く
②解答を見る（ここが高度試験の良質な書籍では特に詳細に記載されている）
③解答を理解し、かつ解答のヒントとなる箇所及び周辺の知識について説明出来るか確認する
④電車の中や休憩時間に上記の③で理解出来ない箇所はインターネットなどで調べる
※午後一の問題も応用ど同程度の20文字～30文字程度の記述式ですが難易度は遥かに高くなっています

こうして一つ一つ問題と解説の理解を繰り返すことで少しづつ知識が増えていきます。例えば前回の記事で抜粋した「平成30年度 春期 応用情報技術者試験 午後 問9」プロジェクトマネージャ試験の以下の何気ない文言ですがここから様々なヒントが浮かび上がってくるようになります。
**【問題文（抜粋）】**
経営層から，6か月後の稼働が必須との指示が出ており，予算もスケジュールも余裕がないプロジェクトとなっている。
**【問題からわかるヒント】**
・経営層から・・・影響度が高いステークホルダー（利害関係者）の指示。ここが非協力的だと後になって決定した要件が覆されたりすることも。現実の場合、妙な方向でかえって積極的過ぎても厄介だったりする。
・6か月後の稼働が必須・・・納期が定められておりPMとして進捗管理や要員管理などが求められる。納期の理由は報道発表されている、保守契約が切れる、など様々。
・予算もスケジュールも余裕がない・・・お金も時間もない状態。進捗遅れが発生した場合に要員追加（クラッシング）などの手法が取れない。スケジュールにバッファが無いので追加開発などは厳しい。

これらは一例ですが、深く理解（振る舞いの暗記）していれば問題を読んでいる最中にこうした考えが徐々に浮かぶようになり、その浮かんだ内容を忘れない為にマークしたりメモをしたりする事になります。そうするとメモした場所に関する問題が出題がされた時に素早く解答することが出来るようになります。これらは一つ一つが知識の塊なので問題を通じて理解すれば少しづつ蓄積されます。高度試験の良質な参考書はここが本当に詳しく記載されています。

こうして考えると応用情報の文章系の問題は小学受験のような国語の問題ではなく、ヒントが多数散りばめられた状況で解答を組み立てる多答式の問題に近いでしょうか。少なくともただの国語の問題では無いでしょう。

#高度試験の勉強は無駄になるか
ここまで高度試験用の対策を行うと応用情報の範囲を超えた余計な勉強しているように思え、仮に合格してもかなり遠回りするように感じます。が、結論から言うと知識が深まるだけで範囲を逸脱することはほぼ無いと私は考えています。というのも高度試験の論文も高度な学術論文のようなものを記述する必要はなく、基本情報や応用情報の午後試験記述よりはるかに劣るレベルの記述でも論点がずれていなければ合格が可能となっているためです。異なるのは自分の力で文章を組み立てることだけです。（これが難しいのですが。。）

つまり応用でも高度でも範囲は変わらず勉強の深さだけ変わることになります。深さが増していけばそれはいつしか「得意科目」になるでしょう。

応用情報の受験にあたって、よくこの「得意科目」を作ると有利、と言われますが、勉強時間に余裕があるのであれば得意科目を作る為にあえて高度試験の論文を2、3回作文することも良いと考えます。人によっては小学生、中学生以来の論文、少し懐かしさも蘇ってくるのではないでしょうか。2時間集中して書ききった内容を参考書の解説と答え合わせすると驚くほど記憶に定着します。また若い方は社内に高度試験の資格を持つ先輩がいれば、ずうずうしくも添削を依頼してみてはいかがでしょうか。

仮にもし、いつもぐうたらしている後輩が添削を依頼してきたらきっと私は喜んで応じます。

#最後に
浅めの考察かつ勉強時間がある程度取れる人向けの記事で恐縮ですが読んで頂いてありがとうございました。もし初めて応用情報を受験する際の参考の一部に、また勉強して行き詰まった方のほんの少しでも参考になれたのなら幸いです。
OpenWRT(LEDE)使いこなし : rtorrent

# はじめに
OpenWRT/LEDEにrtorrent環境を構築する際のTipsです。
RaspberryPiやOrangePi等のイメージファイルをダウンロードする場合等、
サーバーによっては数時間掛かる場合も有る為、
常時起動のNASでtorrentが動作すると非常に便利です。

未だ色々と課題が残っていますが、
それなりに運用出来ていますので、
足跡を残しておきます。

尚、以下の環境を前提に記載しています。
[中華ファンレスNASをOpenWRT(LEDE)で使う](https://qiita.com/yo-he/items/74793b33c4761f9529f3)

参考:
1. https://github.com/wolandmaster/luci-app-rtorrent
2. [LEDE/OpenWRT — Setting Up Torrent Downloading](https://medium.com/openwrt-iot/lede-openwrt-setting-up-torrent-downloading-a06fe37a1ea2)

# 環境構築方法
参考1.の luci-app-rtorrent githubページの README.md に従いinstallします。
/root/.rtorrent.rc の内容のみ、参考2.のページの情報を参考にしました。

# owner課題
上記環境構築でそれとなく動く様になりましたが、
ダウンロードしたファイルのパーミッションがrootとなってしまう為、
使い勝手が微妙ですので、修正します。

```~/.rtorrent.rc
system.umask.set = 0000
```

# 残課題1
何かしらの起動順序の依存関係の問題か、
reboot直後は、luci-appのTorrent List (cgi-bin/luci/admin/rtorrent/main) が動作しません。

今は、取り敢えずreboot後はrtorrentを再起動させる事で課題は解消しますが、根本的に解決させたいとは思っています。

```
/etc/init.d/rtorrent stop
/etc/init.d/rtorrent start
```

ちなみに、
上記コマンドを/etc/rc.localに記載してみましたが、それでもダメでした。
何かしら、起動が遅いものが存在しているのか・・・

# 残課題2
何の拍子か、時々 luci-app の Torrent List が無反応になる場合が有ります。
screenからreattachしてみると、rtorrentとしては動いている為、
luci-app からの呼び出しの何かでこけている様です。

取り敢えずの回避策として、
下記スクリプトを準備して、実行する様にしました。

```
#!/bin/bash -x
/etc/init.d/rtorrent stop
rm -rf /root/.rtorrent.session/*
/etc/init.d/rtorrent start
```

# 解決に向けて
何かヒントになりそうな、似た様な現象に遭遇した事の有る為、
コメント頂けると幸いです。
SpringBootによるWEBアプリをWARにしてTomcatサーバーにデプロイ

#前提
+ AmazonLinux2(EC2)
+ JDK1.8.0
+ MySQL 8.0
+ 構成管理はGradle 6.0
+ [こちら](https://qiita.com/fftcy-sttkm/items/03ef8d9ef7f1650b1a10)でEC2、RDSによるアプリケーションサーバー環境を構築済み。なお、当初EC2インスタンスをmicroにしていたが、メモリ不足でビルドが失敗したのでmediumにした。
+ [こちら](https://qiita.com/fftcy-sttkm/items/b3e083df38edded7d82f)でTomcatとJDKをインストール済み。今回はApacheは使わずとりあえずTomcatのみで動かす。
+ プロジェクトはGitHubからcloneする。

#Springを実行するクラスにwarデプロイ用記述を追加
+ プロジェクトを作成したとき、自動でSpringを実行するクラスが作成されていると思う（@SpringBootApplicationアノテーションがついているクラス）。
+ ここにwarとしてデプロイ可能にするための記述をする。[Spring公式](https://spring.pleiades.io/spring-boot/docs/2.0.x-SNAPSHOT/reference/html/howto-traditional-deployment.html)を参照した。

```java
@SpringBootApplication
public class Application extends SpringBootServletInitializer {

	@Override
	protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
		return application.sources(Application.class);
	}

	public static void main(String[] args) throws Exception {
		SpringApplication.run(Application.class, args);
	}

}
```

#Gradleの設定とビルド
##Gradleの設定
+ war作成用の設定をする。`archiveFileName`はwarの名前となる。`archiveName`にしていたら、非推奨とのメッセージが出た。Gradle7.0からはこれだと動かなくなるそう。
+ SpringBoot組み込みTomcatが、EC2上のものと競合しないよう設定
+ ほかに、自分の場合はSeleniedによる画面テストコードもプロジェクトに含めていたので、これを除外する設定をtest内に記述した。

```gradle
plugins {
	id 'org.springframework.boot' version '2.2.4.RELEASE'
	id 'io.spring.dependency-management' version '1.0.9.RELEASE'
	id 'java'
	id 'war'
}

// ~省略~

war {
    enabled = true
    archiveFileName = 'sample.war'
}

dependencies {
	// ~省略~
	providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
}

test {
	// ~省略~
	exclude 'com/example/demo/ViewTest.class'
}

```

##EC2上でビルド

+ ホームディレクトリにWEBアプリのプロジェクトを`git clone`しておく。
+ プロジェクト内のapplication.propertiesにRDSの設定を反映させておく。

```:プロジェクトのapplication.propertiesがあるディレクリにて
$ sudo vim application.properties
```

```:application.properties
spring.datasource.url=jdbc:mysql://RDSのエンドポイント:3306/データベース名?serverTimezone=JST
spring.datasource.username=******
spring.datasource.password=***********
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.open-in-view=true
#~省略~
```

+ gradlew buildコマンド実行。buildが成功すると、`project名/build/libs`内に`sample.war`が生成される。
+ まだ分かっていないところがあるが、`project名-0.0.1-SNAPSHOT.war`というwarも生成されていた（sample.warと中身は同じ？）。

```:プロジェクトのディレクトリにて
$ ./gradlew build
```


#生成されたwarをTomcatへ配備
+ `tomcat/webapps`配下へ`sample.war`をコピーする。※自分の場合は`/opt/tomcat-9/webapps`に配備。

```
$ cp sample.war /opt/tomcat-9/webapps/
```

+ Tomcat再起動

```
$ sudo systemctl restart tomcat
```

↓のようにアクセスするとアプリが動く。
http://EC2のエンドポイント:8080/sample/作成アプリに応じたリクエスト先
LEGOで"21分アイスティー"を作ってみた

## みなさんIoTしていますか？
もうすっかり落ち着いて市民権を得た「IoT」ですが、物理世界と繋がれるのは魅力的です。
一方「何から手をつけてよいのかわからない」とか「何を作ってよいかわからない」等々、敷居が高く感じる方も多いと思います。
ただレゴ社から出ているBoostというのと、Scratchという教育用プログラミングツールを使えば、物理世界の面倒なことをあっという間に肩代わりしてくれるデバイスを自分で作ることができます。

今回は[この記事](https://dot.asahi.com/dot/photoarticle/2019080800076.html?page=1)の「21分アイスティー」をLEGOで作ってみたいと思います。
記事中に
> 「マダム、21分ですごく半端な時間ですよね？　20分蒸らすのではダメですか？」。
> 「ダメよ！　私はもう何十年も夏になるとアイスティーを作り続けてきて、やっとこの最適な蒸らし時間にたどりついたの。20分でも22分でもダメ。21分、ちゃんと守るのよ」。

と書いてある通り、このレシピの肝は「21分」というところなのですが、21分を正確に待ち続けるというのは**人類にとって高すぎるハードル**です。そこで今回はティーバッグを入れて21分で引き上げるというところをScratchとLEGO Boostに代行してもらいます。

## まずは結果から
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LEGOで「21分アイスティー」を作ってみた。 <a href="https://t.co/WBzT5yQaoZ">pic.twitter.com/WBzT5yQaoZ</a></p>&mdash; Kaitou (@Kaitou1192) <a href="https://twitter.com/Kaitou1192/status/1303349532571267073?ref_src=twsrc%5Etfw">September 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 解説
ScratchとLEGO Boostの接続はこちらのページを参考にしてください。
https://scratch.mit.edu/boost

**実際に書いたコード**
![スクリーンショット 2020-09-08 23.23.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620149/67c05778-cb68-28b7-3b37-fea529657b7b.png)
ピンクのところが、他のプログラミングで言うところのいわゆる関数にあたるもので、Scratchでは「定義ブロック」と言います。

モーターに関しては、Boostの本体についている2つのモーターのみでやりくりしています。
（Boostには他に外部モーター1つと、カラー＆距離センサーが1つついてきます。）

モーターの回転方向が「あちら向き」と「こちら向き」と分かりづらいので、間違えないように定義ブロックでわかりやすくしています。

モーターの回転については「秒数」と「回転数」の2つで制御できますが、今回は回転させている時間が比較的長いのと、緻密な回転数の制御が不要なので秒数で制御しています。

詳細については、僕の作った https://scratch.mit.edu/projects/423586255/ をご覧ください。

## 補足 その1
Scratchは、ひらがな＆カタカナ表示モードがあるので（要は漢字表記がない）、小学校低学年でも普通に触れます。
LEGO Boost自体も制御用のソフトウェアがついてきて、こちらもビジュアルコーディングで、スマホからの操作も簡単です。
LEGOを組み立てることもそうですが、親子で同じ土俵で、対等に遊びやすいツールだと思いますので、ぜひお試しください。

## 補足 その2
ティーバッグを固定する時、ライオンのゼムクリップを使っています。
一番小さいやつだと動画の通りLEGOの穴あきパーツを通ります。
毎回紐を切ってティーバッグと結び直すのではないので、複数回の使用にも耐えられるようにしています。

## 参考記事
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ブログ書きましたー<br>21分紅茶は、22分じゃダメです。だから、ロボットアームが必要です。<a href="https://t.co/qid9jVgL5I">https://t.co/qid9jVgL5I</a></p>&mdash; 高橋ホイコ@森の音楽家になりたい (@tomakomako) <a href="https://twitter.com/tomakomako/status/1301799874526982144?ref_src=twsrc%5Etfw">September 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Nuxt.jsでScssを使用する方法

NuxtでもScssを使いたいと思いましたが、create-nuxt-appしただけではScssは使えません。
使用するには以下の手順を踏んで下さい。([参考記事](https://www.suzu6.net/posts/173-nuxt-scss/))

ひとまずいつも通りappを作成して下さい。

```
$ npx create-nuxt-app sample-app
$ cd sample-app
```

そうしたら以下のコードを実行してScssを使用できるように色々とインストールしていきます。

```
$ npm install sass-loader node-sass --save-dev
```

スタイルを適用したい部分に、以下のようにscssの指定をすることでscssを使用することができます。

```
<style lang="scss"> //scssを指定
header {
  nav {
    color: red
  }
}
</style>
```

もしくは/assets/配下にscssファイルを作成します。
例）/assets/sass/app.scss　とします。
そして、nuxt.config.jsに以下の記述を追加して、作成したScssファイルを読み込ませます。

```
/*
  ** Global CSS
  */
  css: [
    { src: '~/assets/sass/app.scss', lang: 'scss' }, //作成したscssファイルを読み込ませます。
  ],
```

nuxt.config.jsに作成したファイルを複数読み込ませてもいいのですが、
大元となるscssファイルを作成し、importにて読み込ませるというのが主流かと思います。
例)asetts/sass配下に以下のファイルを作成した場合、app.scssに他のscssファイルを読み込ませます。
/app.scss
/about.scss
/contact.scss

```
// app.scssファイル上に以下を記述
@import 'about';
@import 'contact';
```

Scssはスタイルを付ける上では必須と思いますので、Nuxt.jsでサイト作成中の方の参考にされば幸いです。
New Relic初心者 logs parsingについて

#0.はじめに
newrelic infrastructure agentを利用し、ログをnewrelicへ転送することが可能。
あらゆるログデータをnewrelicへ転送することで、インフラ系のデータもアプリケーション系のデータも可視化することができる。
今回はapacheのアクセスログをnewrelicへ転送し、log parsingの機能を利用して必要なデータを切り出す。

#1.infrastructure agentをインストール
infrastucture agent が version 1.11.14以上であることを確認する

```
rpm -qa | grep newrelic
newrelic-infra-1.12.3-1.el8.x86_64
```

#2.ログ転送
###定義ファイル格納用ディレクトリ
ログ転送の定義ファイルが格納されているディレクトリへ移動

```
cd /etc/newrelic-infra/logging.d/
```

###configuration fileを作成
configuration fileを作成し、上記ディレクトリ配下に配置。
ログ識別ができるよう、カスタム属性を付加しておく。

```
logs:
- name: "apache"
  file: /var/log/httpd/access_log
  attributes:
    log_type: apache
```

###ログ更新
以下、クーロンにより定期的にapacheへアクセスしアクセスログを更新

```
#access apache
*/2 * * * * devops curl "http://192.168.11.18:80"
```

###ダッシュボード確認
少し待つとダッシュボードにアクセスログが更新される。
![img1.bmp](https://b36t2q.dm.files.1drv.com/y4moxorTmxvrLjmmI2JFo-NrsPndhu2EuKfyZxhVBrHeBcqfg8tUsrU_9YQR0KKTD_lBDbTn2oNjsClqHtjmnhyVIxAflRw_UZ8BM3_sD8kQ0k6Npk-YNpNkICJL28yqQ--lkhxFyVmq-TThpuxS4Ieoe9pZIQzWLaVOc30fa3wNze8WmlkRSCo5xJC4Z_Dm1mkGnCTryleGzgk3gTyicC8AA?width=1956&height=806&cropmode=none)

#3.logs parsing
###parsingルールの作成
Create parsing ruleボタンを押す
![img2.bmp](https://b34gwa.dm.files.1drv.com/y4mcJ_BkRry8rb2M7pv01UwqmV9FERJ9JV2GEpQ_k07P1TlWmk72_ELG4DM5QyRmRgpYIfHUtKL9UCRSn4UzK7ejcqyvsNxukQTUhkX5aMYfQHbiGXcDnKB4KPUctsL3wRRKcPN7q1Ym212keyv7c-Q7G8dyosk0bXZiVquTJa2PvlUPELEDXthT-LpLiEoUa9HMzRMDdlL1WseeXLHL1dG7g?width=1956&height=809&cropmode=none)

###Manage parsing rules
parsing を実施するログの絞り込みを実施。
今回は転送したapacheのアクセスに、カスタム属性log_type:apacheを付与しているため、この値を利用。
![img3.bmp](https://1alrwg.dm.files.1drv.com/y4mnuB2JiN2yDv5IB0d_XqHmyj2Jgr9Qkx4TcWPcb7xPUWvocVcav16EYkfASTQJPvi5RwCVa46oF9GWZAWMOhvLLhiSLLmdM-ojbIeyQi1zomIsTsySF4FcMFjt6ODLYlnAothq0TZIv7BuUjY2c77Bndgp7T8v08fTB8_WhklksOX9wlJhhZ4bv1MEpWWxrzxONf6jxsR-T6WleMA2I7-Ug?width=1956&height=806&cropmode=none)

###Parsing logic
parsing logicはgrok patternで表現される。
例えば、apacheは以下の通り
>Log formats
SYSLOGBASE %{SYSLOGTIMESTAMP:timestamp} (?:%{SYSLOGFACILITY} )?%{SYSLOGHOST:logsource} %{SYSLOGPROG}:
COMMONAPACHELOG %{IPORHOST:clientip} %{USER:ident} %{USER:auth} \[%{HTTPDATE:timestamp}\] "(?:%{WORD:verb} %{NOTSPACE:request}(?: HTTP/%{NUMBER:httpversion})?|%{DATA:rawrequest})" %{NUMBER:response} (?:%{NUMBER:bytes}|-)
COMBINEDAPACHELOG %{COMMONAPACHELOG} %{QS:referrer} %{QS:agent}

今回はCOMMONAPACHELOGを適用
![img4.bmp](https://1am2tq.dm.files.1drv.com/y4mt0eHz3GG_uZBebSto2L2ovz8WA5cB_A5_bJlrhlnPskwWyXGRE5gIXEpXERa9KSa1irUuADVo6KyKvpPO-l3KKaYhldevbSrHil8_q6I5OqEpX3PJBi9K3rBq-MrNxHsMKYZHdvAPHieREK4oc7H6JkCvwnE15HUntWBNI4vdI5XwlkCt54XRpKXvIrFgpeHQVnnSisdS1qAZB4AEUgZdA?width=1956&height=806&cropmode=none)

####結果
結果は以下の通り。
message領域のアクセスログに対してparsing logicが適用されている。
<img width="400" alt="img5.bmp" src="https://1amaza.dm.files.1drv.com/y4m2qb_zULhVgg2XWzNO6gUb_KmqMjXrDBcjOXxYRppBGkQLgNs0Lo2mT3sQkDBDx4kT7WO007ZnmomnwDIO6FJzJiOuoq44i3XTJdtVQLW_CKVU2fLUtB1pZ86dl2_IdIjOEvq67oDn180jJYEPgZGbvz4cqAGyKOQjTQ-c5AO4iygzrzyCVPkNq_fp72Zi4sYcHtLBR4Ah-UDXIseIYFuiw?width=675&height=796&cropmode=none">

#4.まとめ
今回は、apacheのアクセスログを利用したnewrelic logsのparsing機能を実装した。
grok patternの検証をすべく、他フォーマットのログに対しても適用を試みる。
クラウドとオンプレミスのコストの比較

オンプレミスは最初に購入しなくてはいけないものが多く、初期費用が高くつく。一方クラウドは初期費用を安く抑えることがでいる。

ただ、長期間に渡ってシステムを利用する場合は、オンプレミスの方が安くなることもある。しかし、ハードウェアを入れ替えたり、製品をバージョンアップしたりしていると、結局クラウドの方が安くつく可能性もある。


#オンプレミスの場合

###導入コスト
- データセンター初期費
- インターネット回線初期費
- ハードウェア費
    - サーバー
    - ストレージ
    - ネットワーク機器
- ソフトウェア費
- 開発費
- 人件費

###運用コスト
- データセンター管理費
- インターネット回線費
- リース・レンタル費
- 保守費
- 人件費

※ オンプレミスの保守には、ハードウェアの増設や入れ替え、セキュリティバッチの適用やウイルス対策など、突発的な運用コストが発生する。

#クラウドの場合
###導入コスト
- 初期費

###運用コスト
- 月額利用費
- 人件費

※ クラウドにも、オンプレミスからの移行費用がかかったり、ハイブリッド環境でのネットワーク回線費やセキュリティ対策費など、コストがかかる要因がある。
VSCodeでエクステンション(拡張機能)がインストールできないとき

## 解決した方法
VSCodeをアップデートしたらインストールできるようになった。

## 原因というか…
VSCodeの設定で自動更新を切る設定(none)にしていました。
その昔、noneとdefaultしかなかったと思います。
noneは更新を手動で確認することすらできない設定です。
更新のお知らせ通知も来なくなります。

というわけで更新のことをすっかり忘れていました。
よっぽど古かったかも…🤗
![66F49642-28CA-42E9-96AF-EECEB43B1175.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538652/cf1779a7-c029-eb97-19f4-756ce7ebbff9.png)

## VSCodeで自動更新の設定
Code＞基本設定＞Settings から設定画面を開きます。
ショートカットキー`command + ,`でも表示できます。
![7D26F14A-0EEF-4509-B2B2-78A7E220AAEF.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538652/a3a49837-2710-06dd-3329-a84b3280b3aa.png)

更新のモードを選択できます。
![7746D721-D654-45FF-AADF-41BAC5ED24A7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538652/5d01c013-699c-9efe-7195-643b9c489b72.png)
フォロー機能の実装

#環境
Rails 6.0.3.2
ruby 2.6.5p114 (2019-10-01 revision 67812)
vscode

#参考記事
https://qiita.com/Kaisyou/items/86869db6345c9cc1413f
https://qiita.com/search?sort=&q=%E3%83%95%E3%82%A9%E3%83%AD%E3%83%BC%E6%A9%9F%E8%83%BD

#エラー
![スクリーンショット 2020-09-08 23.31.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650686/acf23887-7d03-3405-148d-8b9a67320abe.png)
フォローボタンを押すと、
![スクリーンショット 2020-09-07 17.28.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650686/d74f0d19-204e-bddd-68df-9a2b7cc33965.png)
やはりエラーと遭遇。
#解決の糸口・・・
followingｓをfollowingと変更したり、細かな記述を変更しても、エラーから抜けられない。
どこを直せばいいのか分からなかったので、沼にはまってしまう。（実際、このエラーを解決するのに２日費やすことになる。）

#解決方法
```rb:app/models/relationship.rb

class Relationship < ApplicationRecord
  belongs_to :user 
  belongs_to :follower, class_name: 'User'
  belongs_to :following, class_name: "User"


  validates :follower_id, presence: true
  validates :following_id, presence: true
end 
```
この中に今回の沼の元凶があるのだが分かるだろうか？
それは```belongs_to :user ```である。
belongs_to　を記述することで、userを要求することになってしまった。
今回のfollow機能の場合、followerとfollowerとで事足りるため、belongs_toでuserを要求する必要はないのである。１つのRelationshipにつき、一人のuserを割り当てる必要はないため、今回の場合は２行目は不要となる。

belongs_toの詳細についてはhttps://railsguides.jp/association_basics.html#belongs-to%E9%96%A2%E9%80%A3%E4%BB%98%E3%81%91

#結論
基本は重要であることを学びました。
対応してくれたメンターの方、ありがとうございました。
IBM Cloud Kubernetes Cluster 作成

# この記事は
IBM Cloud上でKubernetes Clusterを動かすまでの個人的な試行錯誤メモです。
特に高度な技術も斬新な使い方もしていません。マニュアルでも書いてあるようなオペレーションを進めていきます。

# Kubernetes Cluster 作成

## その前にVPC Gen 2を作成する
VPC環境上にKubernetes Clusterを作成しようとしたので、まずはVPC Gen 2を作成します。

VPC作成画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445368/63852a7a-6f80-be08-b644-2a94c92bd6ba.png)
Classic Resourceとの通信発生を考えて、"Enable Access to Classic Resource" にチェックした。
Classic Resourceへアクセスできるのは、1リージョンあたり1VPCらしい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445368/8d22075a-e7d8-1fab-6191-38a2ed88cf86.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445368/0d9559de-ec99-a8ac-0cc4-de18f42b9bd9.png)
後のパラメーターは適当！

・・・あれれ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445368/35c0ea42-86e8-5e1f-380c-c46069c9c18a.png)

## 気を取り直してVPC Gen 2を作成する
どうやら、"Enable Access to Classic Resource"をチェックしたのがよくなかった模様。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445368/82b11f6a-7ea0-682b-c9d9-c067d6fb2425.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445368/24e341cf-d1b3-ddd5-0d75-f6ec6b63f62f.png)
作成完了。今回は、Public Gatewayをアタッチするようにしてみた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445368/95e40ec3-7789-6e66-0bb2-bce68d858027.png)
この後、各DCにサブネットを作成しています。

## Kubernetes  Clusterを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445368/6bd73eb2-2c26-7b1f-2922-7949747c0bc9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445368/67790883-2ba9-f8d9-6798-8a99e8f9f111.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445368/7273584c-1d58-d33d-a949-bdf1ca1ccb97.png)
セキュリティグループ設定についてメッセージが出る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445368/ade5b621-1e4b-26d9-bba2-6766cc314032.png)

## Security Groupの設定とサンプルアプリのデプロイ
ここから手抜きです。

下記URLの手順②を実施して、Security  Groupを設定します。
[Creating a VPC Gen 2 compute cluster](https://cloud.ibm.com/docs/containers?topic=containers-getting-started#vpc-gen2-gs)

下記URLの手順を実施して、サンプル・アプリをデプロイします。
[Deploying an app to your cluster](https://cloud.ibm.com/docs/containers?topic=containers-getting-started#deploy-app)
【自分用メモ】数当てゲーム　


課題に出されたものがどうしてもできないから、今日はいくつか指定すべき条件を省いてやってみた。
ひとまず意味わからなかったエラーがぜんぶ消えて、動いて嬉しい:hotdog::grinning:


```java
package kazuate;

public class kazuate {


	public static void main(String[] args) {
		//乱数を発生させる
		int Ran=new java.util.Random().nextInt(1000);

		//ゲーム開始文。
		System.out.println("数当てゲーム");
		System.out.println("３桁の整数を入力してください");

		//ゲームの上限回数を設定
		int Limit=5;

		//以下　for文で回しながら　３桁入力を受付、その都度の処理。

		for(int i=0;i<=Limit;i++) {
			int th = i + 2;

			//キーボード受付を設定
			int yourN=new java.util.Scanner(System.in).nextInt();

			//数字が0以下の場合もしくは1000以上の場合のエラーコードを設定
			if(yourN>1000||yourN<0) {
				throw new IllegalArgumentException("数字は100以上、999以下で設定してください");
			}

			//ゲーム上限回数に達した時の処理。最後に正解したときはおめでとう、それ以外は回答を表示しゲーム終了
			if(Limit==th) {
				if(Ran==yourN) {
					System.out.println("最後の挑戦で成功しました！！おめでとう！ゲームを終了します");
				}else{
					System.out.println("ゲーム終了。正解は"+Ran+"です");}
				break;}


			//乱数よりも入力受付した数字が大きかった時の処理
			else if(Ran<yourN) {
			System.out.println("かずが大きいです。もういちど入力してください");


			//乱数よりも入力受付した数字が小さかった時の処理
			}else if(Ran>yourN) {
			System.out.println("かずが小さいですもういちど入力してください");

			//回答が正解だった時の処理。正解までに挑戦した回数も表示する
			}else if(Ran==yourN) {
				System.out.println((i+1)+"回目で成功です！");
				break;
			}
		}
		}
		}



```
axiosをグローバルに呼び出す

# 設定する
```javascript:src/main.js
import Vue from 'vue';
import axios from 'axios';
.
.
.
Vue.prototype.$http = axios.create(
  { baseURL: process.env.VUE_APP_API_URI, withCredentials: true },
);
```

# 呼び出す
```javascript
.
.
.
  methods: {
    fetchItemList() {
      return new Promise((resolve) => {
        this.$http.get('/api/v1/items').then((response) => {
          this.itemList = response.data.index;
          resolve();
        }).catch(省略);
      });
    },
  },
.
.
.
```

みたいな感じで `this.$http` で呼び出せます

おしまい