OmniAICreator/Qiita-1.07M huggingface dataset:
collection_check_boxesで 'id' と 'for' 属性 をカスタマイズする（simple form)

新規作成（New)と編集（edit）で同じチェックボックスを２つ用意する必要があるのだが、
２つとも同じページに存在するためidがダブってしまい、後から生成される編集（edit)のチェックボックスがうまく選択できない問題が発生。

よって、それぞれ固有のidになるようにカスタマイズする必要がある。
以下がコードです。（simple_form使用）


```erb:カスタマイズ無し
<%= f.collection_check_boxes(:status_ids, current_user.statuses, :id, :name, ) do |b| %>
  <%= b.check_box %>
  <%= b.label {b.object.name} %>
<% end %> 
```

```erb:カスタマイズ有り
<%= f.collection_check_boxes(:status_ids, current_user.statuses, :id, :name ) do |b| %>
  <%= b.check_box(:id => "edit_object_ids_#{b.object.id}") %>
  <%= b.label(:for => "edit_object_ids_#{b.object.id}") %>
<% end %> 
```


参考
https://apidock.com/rails/v4.0.2/ActionView/Helpers/FormOptionsHelper/collection_check_boxes
cygwinのdockerでエラー [Failed to execute script docker-compose]

laravelを使ってlocal開発をしている時にdockerコマンドでエラーが発生するようになった。
またローカルの環境ではcygwin上で開発を行っている。

```
╰─➤  docker-compose ps                                                                                                                                                                                                                                                 127 ↵
[6276] Failed to execute script docker-compose
Traceback (most recent call last):
  File "docker-compose", line 6, in <module>
  File "compose\cli\main.py", line 72, in main
  File "compose\cli\main.py", line 125, in perform_command
  File "compose\cli\command.py", line 47, in project_from_options
  File "compose\config\environment.py", line 77, in from_env_file
  File "compose\config\environment.py", line 72, in _initialize
  File "compose\config\environment.py", line 44, in env_vars_from_file
  File "c:\jenkins\workspace\dsg_compose_1.25.5\venv\lib\codecs.py", line 714, in __next__
  File "c:\jenkins\workspace\dsg_compose_1.25.5\venv\lib\codecs.py", line 645, in __next__
  File "c:\jenkins\workspace\dsg_compose_1.25.5\venv\lib\codecs.py", line 558, in readline
  File "c:\jenkins\workspace\dsg_compose_1.25.5\venv\lib\codecs.py", line 504, in read
  File "c:\jenkins\workspace\dsg_compose_1.25.5\venv\lib\encodings\utf_8_sig.py", line 117, in decode
UnicodeDecodeError: 'utf-8' codec can't decode byte 0xff in position 10: invalid start byte
```

色々ググってみたが、日本語を使ってるととか情報が出てくるがそもそもdocker関係を修正していないにエラーが発生するようになった。

で思いついたのがlaravelで使用している `.env` をシンボリックリンクに変更したのを思い出し元に戻したら直った。。
dockerも `.env`を使うらしいのでcygwin環境下でのシンボリックリンクがなんかだめみたい。
Shift + tab キーでフォーカス逆移動が利かない

#Shift + tab キーでフォーカス逆移動が利かない

「Shift」＋「Tab」でフォーカス逆移動は、デフォルト設定なのに
押下してもそのまま次の要素へ移動する事象が発生。


##原因

JSファイルの中でエンターキーとTabキー押下制御の処理を書いており、
それが優先されていたため、Shift + tab キーの処理が反映されていなかった！



```ruby:js
/*エンターキー、タブキーの場合*/
if (e.keyCode == 13 || e.keyCode == 9 && event.shiftKey == false) {
     if(e.keyCode == 9){
           /*やりたい処理*/
     }else if((e.keyCode == 13 && !foucsInput.is(':focus'))){
　　　　　　/*やりたい処理*/
　　　}
}
```

「　if (e.keyCode == 13 || e.keyCode == 9 **&& event.shiftKey == false**) {　」

&&event.shiftKey == false を書き加えると動きました。
KerasなしでTensorBoardを使う

# 現状
- GANだとkerasからtensorboardを使っている例が少ない
- GANだとmodel.fitを使わないで実装している例が多い
- 過去の記事はtf1を取り扱っているものが多い
- 最新の記事はkerasで使ってる例が多い
- マジックコマンドとか入ってきてわけわかめ
ここら辺を参考にしていた
https://lsifrontend.hatenablog.com/entry/2019/02/27/201856
https://qiita.com/Mco7777/items/2b76aba1bae35f2623ea#_reference-ae8817c269849cbd1b91
https://qiita.com/tomo_makes/items/b3c60b10f7b25a0a5935
https://qiita.com/uosansatox/items/b552c9c4d8f1cebbf044
https://deepage.net/tensorflow/2017/04/25/tensorboard.html
https://qiita.com/agumon/items/114da6921c5dc4f7d7f9

けど、環境が違うのであんまり参考にならなかった。
ということで行き詰っていたんだけど進捗があったので投稿


#__doc__にexampleがあってわかりやすかった

```python
tf.summary.__doc__
```
で出てきた例が自分の参考にしたコードに近くて役に立った

```python
writer = tf.summary.create_file_writer("/tmp/mylogs")

@tf.function
def my_func(step):
  # other model code would go here
  with writer.as_default():
    tf.summary.scalar("my_metric", 0.5, step=step)

for step in range(100):
  my_func(step)
  writer.flush()
```

0.5のところをモニターしたい値に変えればOK

```python
tf.summary.scalar("loss", loss, step=step)
"""
(名前,縦軸の値,横軸の値)
"""
```

マジックコマンドも加えると

```python

writer = tf.summary.create_file_writer("/log")

@tf.function
def my_func(step):
  # other model code would go here
  with writer.as_default():
    tf.summary.scalar("loss", loss, step=step)


%tensorboard --logdir=/logs
for step in range(100):
  my_func(step)
  writer.flush()
```

#所感
記事には書いてないけど、ログファイルの場所や書き方がいろいろあったのが一番詰まっていたところかもしれない
kerasで楽々tensorboardしたかった( ˘ω˘ )
もっといい方法あったら教えてください。
JavaScriptクイズアプリ

# jsコード
```JavaScript
const quiz = [ //配列にオブジェクトを格納
  {
    question: "ゲーム市場、最も売れたゲーム機は次のうちどれ？",
    answers: [
      "スーパーファミコン",
      "プレイステーション２",
      "ニンテンドースイッチ",
      "ニンテンドーDS",
    ],
    correct: "ニンテンドーDS" //選択されたHTMLのテキストと比較する変数を指定
  },{
    question: "日本の初代内閣総理大臣は誰？",
    answers: [
      "伊藤博文",
      "大隈重信",
      "安倍晋三",
      "高橋是清",
    ],
    correct: "伊藤博文"
  },{
    question: "横浜ベイスターズが初めて日本一に輝いた時の監督は？",
    answers: [
      "三浦大輔",
      "ラミレス",
      "中畑清",
      "権藤博",
    ],
    correct: "権藤博"
  }
];

const quizLength = quiz.length;
let quizIndex = 0;
let score = 0;

const $button = document.getElementsByTagName("button");
const buttonLength = $button.length; //buttonをノードとして取得し、変数化

const setupQuiz = function(){  //quizを解いたら次のquizをセットする関数
  document.getElementById("js-question").textContent = quiz[quizIndex].question;
  let buttonIndex = 0;
  let buttonLength = $button.length;
  while(buttonIndex < buttonLength){
    $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex];
    buttonIndex++
  }
}
setupQuiz();

const clickHandler = function(e){
  if (quiz[quizIndex].correct === e.target.textContent){  //イベントをオブジェクトとして取得 + テキストの内容と解答を比較
    window.alert("正解");
    score++;  //正解ならスコアを＋１
    } else {
      window.alert("不正解");
    }

    quizIndex++;  //次のクイズをセットするためにインデックスを＋

    if(quizIndex < quizLength){
      setupQuiz();
    }else{
      window.alert("終了!あなたの正解数は"+score+"/"+quizLength+"です。");
    }
}

let handlerIndex = 0;

while(handlerIndex < buttonLength){
  $button[handlerIndex].addEventListener("click",function(e){
    clickHandler(e);
  });
  handlerIndex++
}
```

#HTMLコード
```HTML
・・・前略
<body>
  <div class="container">
    
    <div class="jumbotron mt-5">
      <div class="d-flex justify-content-center">
        <div id="js-question" class="alert alert-primary" role="alert">
          A simple primary alert—check it out!
        </div>
      </div>
      
      <div id="js-items" class="d-flex justify-content-center">
        <div class="m-2">
          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
        </div>
      </div>
    </div>
  </div>
  
  <script src="main.js"></script>

</body>
```

# 解説
①クイズの内容とボタン等にテキストを.textContent = でjsの内容に変更する
②設定したクイズの内容が一問解いたら切り替わるようにquizIndexを関数の内部で++する。
③正解の場合スコアを記録し、alertで通知

[![Image from Gyazo](https://i.gyazo.com/72105c2e4db91961efaa49183fff6c6b.png)](https://gyazo.com/72105c2e4db91961efaa49183fff6c6b)
git 使い方　流れ

 アップすべきファイルの確認　
-
```
git status
```

 ファイルの登録
- 
```
git add XXX YYY ZZZ ・・・
```

コメントをつけてコミット
-
```
git commit -m "ほにゃらら"
```
このコメントは上のadd下ファイル群につけられる

最後にプッシュ
-
```
git push origin master
```

別のマシンで最新版をpull
-
```
git pull
```
IDとパスワードを聞かれるので入力
Xplenty入門 Part8: 通知機能について

Xplentyでは通知機能を使って、ジョブが失敗したり、完了した情報を別のシステムに連携したり、通知したりすることができます。
2020年6月現在、サポートされているサービスフックの対象は、以下になります。

- **Email**
- **Slack**
- **Webhook**
- Hipchat
-  PagerDuty 

*PagerDutyの詳細な設定は[こちら](https://pagerduty.digitalstacks.net/docs/guides/xplenty-integration-guide/)を参考ください。

#1. Slackとの連携
Slackで連携はSlackをお使いであれば、最もポピュラーなニーズかと思います。ここではSlackに連携する場合の設定について見ていきます。

まず、Xplentyの設定画面（ギアマーク）からServiceHookを選択し、右上の「New service hook」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/dd6b1fc0-00c8-072c-624a-d2edda7777fc.png)

次に、Slackを選択します。

次に以下の連携画面で連携先のチャネルを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/c16b89fb-699a-c34b-fe47-27484aa77916.png)

さらにService hookの名前とどのイベントで通知するかを設定し、画面右下の「Create Service hook」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/378e306b-b340-b23a-cf88-ba46e98456db.png)

設定したイベント条件に基づき、Slackのチャネルにエラーが通知されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/64e03926-27cb-3c25-4305-fdc24b7f420a.png)


#2. Webシステムとの連携
ここでは、別のWebシステムと連携する上で有用なWebhookを例に設定を見ていきます。
Webhookの場合は、最初から設定画面でService hookの名前と送信先のURL、そしてトリガーする対象イベントを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/30dd6b3a-e594-b186-7369-04f70a4bd4d8.png)

ジョブでエラーが発生した場合、以下のように指定したURLのサービスにエラー内容の詳細が送信されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/20bb9974-8cac-00f8-a492-11205a1ac2c1.png)

#3. メールでの連携
Xplentyを使用しないメールアカウントやビジネスインパクトを受けるお客様やパートナー企業、協力会社などにメールで問題を通知するケースがあるかと思います。
その場合、メールのService Hookで通知が必要な関係者を簡単に登録することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/dac996f1-343e-c961-9704-20682004acf8.png)
【Docker】Docker環境内で日本語入力

諸説ありますがこれでいけました。
下記記載の各 `RUN` コマンドを実行しないとうまくいきませんでした。

Docker Imageはruby2.4.3（おそらくUbuntu16）。

```Dockerfile
# Japanese
RUN apt-get update \
    && apt-get install -y locales \
    && locale-gen ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL=ja_JP.UTF-8
RUN localedef -f UTF-8 -i ja_JP ja_JP.utf8
```

参考リンク

https://qiita.com/motoki_giants/items/0c3b9d174edef9410310
https://qiita.com/munimuni/items/93a87ff4a6366eb13f0d

おまけ

日本語環境の設定という点では、時刻をUTCからJST表示にするのも良いでしょう。

docker-composeを使用している場合はdocker-compose.ymlで

```docker-compose.yml

web:
  environment:
    TZ: Japan
```

とすると、JST表示になります。
PythonのメソッドでNoneType is not callable.

バカな私はこんなクラスを書いて

```Python
class SessionManager:
    def __init__(self):
        self.continuous = 0
        self.stay_min = None
        self.datetime = None

    def stay_min(self, df: Series) -> float:
        """
        Args:
            df (Series): row including (user_id,
            datetime,continuos,session_id)

        Returns:
            
        """
        is_continuous: bool =\
            df.continuous - self.continuous == -1
        if is_continuous:
            dst = (self.datetime - df.datetime).total_seconds()/60
        else:
            dst = np.nan
            
        self.datetime = df.datetime
        self.continuous = df.continuous

        return dst
```

```
session_manager = SessionManager()
session_manager.stay_min()
```
としたのですが、`NoneType is not callable.`というエラーが出てしまい、20分どぶに捨てました。

## なぜダメなのか
`__init__(self)`の中で、メソッドと同じ名前を定義しています。
そして、これは`None`で初期化されているので、当然関数として呼び出せません。

## まとめ
名前空間に気をつけましょう・・・・
Quasar × VSCodeでのデバッグ(ブレークポイント張ったりなど)

#1 概要
Quasar FrameworkをVSCodeでデバッグするときの手順
[公式サイト](https://quasar.dev/start/vs-code-configuration#Debugging-a-Quasar-project-in-VS-Code)

## サクッと3ポイント
①Debugger for Chromeをインストールしましょう
 .vscode\launch.jsonを作成してこれをコピペ！

```launch.json
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "Quasar App: chrome",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "breakOnLoad": true,
          "sourceMapPathOverrides": {
            "webpack:///./src/*": "${webRoot}/*"
          }
        }
    ]
}
```

②quasar.conf.jsにsource-mapの設定を追加

```quasar.conf.js
    build: {
      //他の設定とか
      devtool: 'source-map',   //←追加
      extendWebpack(cfg) {
      }
```

③quasar devコマンドを実行後、VSCode側からデバック実行をスタート！
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309466/85179dcc-29c8-688a-b288-863a87e8c945.png)

##終わり
後はブレークポイント張るなり、お好きにどうぞ
quasar devで立ち上げた環境にVSCode側からアタッチするような感じの動きになっているようです
初めてWindows10にOpenCVを導入するときのアレコレと自己紹介のようなもの

#はじめまして
長いことQiitaは読者としてお世話になってきましたが，一本目の記事なのでいろいろと手探りです．
コードについてでも記事の作りこみ方でも，なんでも気軽にコメントをください．アレコレの部分はあくまでも私見なのでご容赦くださいませ．
#自己紹介的な
こんにちは，ぶらんちと申します．
大阪のとあるメーカー勤務でソフト部門の新人です．大学ではロボット工学について学んでいたはずなのですが，気づいたら情報理工学的なところに興味を持つようになり，ソフト開発者の道を歩み始めました．
今の興味が自動化ということもあり，Excel for VBAやらPythonやらLuaやらバッチファイルやら手広く扱うようになってきました．
少し余裕ができたらSeleniumにも手を出そうと思っています．
#記事作成を通してやりたいこと
例えばWebカメラでスナップショットを撮影，という記事は世の中にたくさんありますが，その中の多くが[特定のキーボード操作をしたら撮影]とか[10秒待ったら撮影]とかそういうのが多かったのではないでしょうか．
私は自動化が大好きなので，「キーボードで何か押さないといけない」なんてまっぴら御免なのです．
ファイルを実行したら自動で撮影せんかい，という強い意志のもとこのコードを作成しました．
私はまだまだ初学者なので気持ちがわかるのですが，初学者の方にとって「コピペしたら動くナア！」というサンプルコードは豊富であるに越したことはないのです．そういった方のためモチベーションに寄与出来たらいいなという考えです．

#環境などの覚書
他の記事で毎回書くことになるだろうので，~~コピペできるように~~ここに書いておきます．何事も効率化あるのみ．
初学者の方の中には導入する環境がいろいろあって迷うナア，という場合もあるでしょうが，個人的には以下の環境がおすすめですので置いておきます．需要あるのか？
あと個人的な偏見も置いておきましょうか．需要ないだろ！
まあ，ここからは少し真面目にお話しします．

**Windows 10 pro (ローカル) または Ubuntu 18.04 (Google Colab)**
もちろんwin10 Homeでも問題ありません．将来的に遠隔操作をしたかったのでproにしました．
**Python 3.X(新しい方がいい)**　　ネ申
**OpenCV (画像処理エンジン)**　　3.3.Xはバグが多いのでそれ以外ならいい
**Tesseract (文字認識ツール)**　　Googleが提供しています．ホントすごいなGoogle．
**Jupyter (python実行ツール)**　　ステップイン機能のようにブロック毎に実行できて捗る
**Visual Studio Code (エディタ)**　　ダークモードがかっこよすぎる
前二つに関してはコマンドラインからいくつかのコマンドをコピー＆ペーストして実行するだけで簡単にpython-OpenCV環境が整備できます．
その辺の細かいコマンドとかはおいおい触れていきます．

逆に初学者お勧めしないのが以下のツールです．

**Visual Studio 2019**
いわずと知れたWindows向けのマイクロソフト謹製統合開発環境(IDE)ですが，扱いがめちゃくちゃ難しいです．
前バージョンが2016なのですが，2019と微妙に挙動が違ったり毎回依存フォルダを整備したりライブラリを設定したりOpenCVのバージョンが違ったら設定が変わったり,,,といろいろと絶妙な手間が掛かります．
そもそもC++でOpenCVを動かすための記事の絶対数がPythonに比べて少ないです．ここに手間をかけるなら手っ取り早く層の厚いPythonで環境を導入してOpenCVをうまく制御する方法を学ぶことに時間を費やすほうがいいという考えです．

**Anaconda**
初学者向けのPython環境が一発で入るので，「これさえ入れとけばなんとかなるやろ！」的なハッピーセットであります．これを勧める記事は多いと思います．
が，初学者が触るにはいろいろと問題があるように感じます．
Anacondaは仮想環境を構築してその上でPythonを走らせるのでローカルPCの環境を汚さない(設定を変えたりすることがない)ことが大きなメリットです．
**が**
コーディングの中で様々なパッケージを必要に応じてインストールする際，Anacondaでは`conda install hoge`という特殊なコマンドを必要とします．それに対してそれ以外の普通の環境では`pip install hoge`と記述します．
（hogeはナンチャラカンチャラ的な意味でホゲと読みます．弟にfugaとhuga，妹にpiyoがいます）
前述の通り，私は**コピペしたら動く！**という感動が初学者に大切だと思っていますので，敢えて特殊なコマンドを必要とする環境で挑む必要はないよ，というスタンスですので推奨しません．
condaとpipをごっちゃにして記述しても動くには動きますが，仮想環境を構築できるというAnacondaのメリットを踏みにじる行為なので同様におすすめできません．

#さいごに
なんならGoogle Colabという，初めからOpenCV環境がGPUやらTPUやらが乗っかった状態のサーバーを無料で使用できるという~~訳わからん~~サービスまであるのですごいですね（？）
ColabはPythonしか使えないし，ファイルハンドリングに難がある少し特殊な環境なので，興味がある方はどうぞ！ぐらいの感じです．ちょっと小慣れてきた初学者以上の方にはごり押しします．**めちゃくちゃイイぞ**

5年ほど前にRaspberry-Piを使ったときはマイコンにOpenCVを入れて顔認証するまで一週間かかったりしました．二度とやりたくない．
色々書きましたが，自分がいいと思うものを導入してください．その際ご自分で納得いくまでよく調べることが重要なのです．
オチがクソですがこれでおしまいです．最後までご覧いただけてうれしいです．
Format表記

```py
t = (1, 2, 3)
print('{0[0]} {0[2]}'.format(t)) #1 3
print('{t[0]} {t[2]}'.format(t=t)) #1 3
print('{} {}'.format(t[0], t[2])) #1 3 こちらは数が多くなると面倒
print('{0} {2}'.format(*t)) #1 3 展開
print('{0} {2}'.format(1, 2, 3)) #1 3 上と同じ

d = {'name': 'jun', 'family': 'sakai'}
print('{0[name]} {0[family]}'.format(d)) #jun sakai
print('{name} {family}'.format(**d)) #jun sakai 展開
print('{name} {family}'.format(name='jun', family='sakai')) #jun sakai 上と同じ

print('{:<30}'.format('left')) #全体が30文字で左寄りに表示
print('{:>30}'.format('right')) #全体が30文字で右寄りに表示
print('{0:^30}'.format('center')) #全体が30文字で中央寄りに表示
print('{0:*^30}'.format('center')) #全体が30文字で中央寄りに表示、*で隙間を埋める
print('{name:*^30}'.format(name='center')) #上と同じ
print('{name:{fill}{align}{width}}'.format(name='center', fill='*', align='^', width=30)) #上と同じ
print('{:,}'.format(123456789)) #123,456,789
print('{:+f} {:+f}'.format(3.14, -3.14)) #+3.140000 -3.140000
print('{:f} {:f}'.format(3.14, -3.14)) #3.140000 -3.140000
print('{:-f} {:-f}'.format(3.14, -3.14)) #3.140000 -3.140000
print('{:.2%}'.format(19/22)) #86.36%
print('{}'.format(19/22)) #0.8636363636363636

print(int(100), hex(100), oct(100), bin(100)) #100 0x64 0o144 0b1100100
print('{0:d} {0:#x} {0:#o} {0:#b}'.format(100))  #100 0x64 0o144 0b1100100
print('{0:d} {0:x} {0:o} {0:b}'.format(100))  #100 64 144 1100100 0x,0o,0bなどの表示が消える

for i in range(20):
    for base in 'bdX':
        print('{:5{base}}'.format(i, base=base), end=' ')
    print()
```
実行結果：

```txt
1 3
1 3
1 3
1 3
1 3
jun sakai
jun sakai
jun sakai
left                          
                         right
            center            
************center************
************center************
************center************
123,456,789
+3.140000 -3.140000
3.140000 -3.140000
3.140000 -3.140000
86.36%
0.8636363636363636
100 0x64 0o144 0b1100100
100 0x64 100 0b1100100
100 64 100 1100100
    0     0     0 
    1     1     1 
   10     2     2 
   11     3     3 
  100     4     4 
  101     5     5 
  110     6     6 
  111     7     7 
 1000     8     8 
 1001     9     9 
 1010    10     A 
 1011    11     B 
 1100    12     C 
 1101    13     D 
 1110    14     E 
 1111    15     F 
10000    16    10 
10001    17    11 
10010    18    12 
10011    19    13 
```
初心者Java 「基本的な用語」

用語があやふやになるのでまとめてみました

##メソッド
オブジェクト指向による「操作」を定義したもの

```java
public static void main (String[] args){
                  メソッド
```

mainメソッドが無い場合
プログラムの中で記述したクラス名とプログラムのファイル名が異なっていた場合、最終的にプログラムを実行した時に指定する実行ファイル名が表すクラスがプログラムの中に無いのでエラーとなります。

##変数
データを格納しておく領域

```
int number //int型　数字
String str //String型　文字列
int[] list //int型の配列　list
```
##クラス

```
class Main
      クラス
```

##引数
プログラムや関数に渡す値
引数（ひきすう）とは、メソッドに渡すデータのことで、メソッドの後ろの括弧「( )」にあるものです。
println（プリントライン）メソッドで言うと、以下の部分の「こんにちは」が引数になります。
```java
println("こんにちは");
```

引数を必要としないメソッドもありますので、その場合は括弧「( )」の中には何も書きません。

```
メソッド()

例　add(50,500)
        引数
```

###戻り値とは
メソッドに引数を渡し、その結果戻ってきたデータのことを戻り値といいます。
メソッドによっては戻り値がないものもあります。


##配列
値を格納しておける箱が変数でしたが、変数の場合は1つの値しか格納できません。複数の値をまとめて扱うことができる機能が配列です。以下の例では、int型の10個のデータから構成される配列を宣言し、値を代入しています。

```
int[] primeNumber = {2, 3, 5, 7, 11, 13, 17, 19, 23, 29};
```


##static
静的、変わらない
クラスのインスタンスを作成せずに呼び出しOK


##コンストラクタ
クラスをnewした瞬間に実行される関数のこと

- クラス名の同じにする必要り
- 戻り値は返せない

```java
public class Main{
//コンストラクタ
   public Main(){

  }
}
```
```java
Sample class instanceA = new Sampleclass();
                          コンストラクタの呼び出し
```

##インスタンス
建設業界でいうと建物。オブジェクトを作成するための自分専用の領域を確保する

```java
クラス名 インスタンス変数  = new クラス名();

インスタンス変数名.フィールド変数
インスタンス変数名.メソッド名()
```
初期化→インスタンス化して使う。

- new演算子　インスタンスを作るときに使う

##メンバ変数

```java

public class Main{
	String name;
        int age;
}
```
Mainオブジェクトはnameとageというパラメータを持っています。

オブジェクトが持つパラメータのことを、このクラスのメンバ変数と言います。Mainクラスはnameとageという2つのメンバ変数を持っている

##アクセス修飾子
public、protected、private は アクセス修飾子 と呼ばれ、指定した変数やクラスなどを、どの範囲から参照可能かのスコープを制御するのに用いられます。

```
public     どこからでもアクセス可能 
protected  同一パッケージ内のクラス、継承したクラスからのみ可能 
デフォルト    同一パッケージ内のクラスからのみ可能 
private    そのクラスからのみ可能 
```

publicのスコープが一番広く、どのクラスからも参照可能です。
これに対し、privateのスコープが最も狭く、同一のクラスからしか参照できません。

### - private
不用意に外部からのアクセスを許さず、かつ外部からは決められたメソッドからのみアクセスさせたい場合、アクセス修飾子はprivateを使います。

### - public
publicというのは、事実上制限がかかっていない状態。


###6-3.例外処理
Javaのエラーは、コンパイルエラーと実行時エラーの2通りがあります。実行時エラーが発生したときに特定の処理を実行させるために、以下のようにプログラムに例外処理を記述しておきます。

```java
try{
  例外が発生する可能性のある処理;
}
catch (例外クラス 変数名){
  例外が発生したときに実行する処理;
}
finally {
  例外の発生にかかわらず実行する処理;
}
```
なお、throw文を用いると意図的に例外を発生させ、エラーメッセージを返すことができます。
PRIMERGY MX130 S2 にESXi7.0をインストールする

# インストールできない！
仮想マシンを何台か用意したかったのでしばらく電源が入っていなかったMX130 S2を起動しました。
もともとESXi6.5を入れて使っていたのでESXi6.5が問題なく立ち上がったのですが、せっかくなので最新のESXi7.0にして使おうと思ったのが始まりです。

ESXi7.0のisoをDVDに焼いてインストールしようとしましたが、インストール中にNICが見つからずに「No Network Adapters」のエラーとなりインストールすることができませんでした。

# ESXi7.0でNIC(BCM57780)が未サポートに
vmwareのKnowledge Base 「[Devices deprecated and unsupported in ESXi 7.0 (77304)](https://kb.vmware.com/s/article/77304)」によると、
BCM57780がESXi7.0でサポートされなくなった理由は、Solutionの1（VMKlinux inbox driverでサポートされていたデバイスがサポートされなくなった。）に該当します。
上記Knowledge Baseの右下のAttachmentsにリストがあり、「7.0 VMKlinux deprecated devices」にBCM57780がありました。

以下の記事によると、以前からVMKlinuxドライバの廃止は決まっていたようなので知ってる人には既知の話っぽい。
「[What is the Impact of the VMKlinux Driver Stack Deprecation?](https://blogs.vmware.com/vsphere/2019/04/what-is-the-impact-of-the-vmklinux-driver-stack-deprecation.html)」

# NICを追加してインストール
急遽余っていたNICを追加したところ、すんなりインストールすることができました。
以下のNICを使用しました。
・Broadcom BCM5709 2ポート GbE NIC PCI-Express x4
・Intel PRO/1000 PT Dual Port Server Adapter

※MX130 S2 を2台セットアップしたのでそれぞれ1枚ずつ追加しています
AWS☆☆☆ デプロイまでの道のり３（短いバージョン、全４回）

###  <font color='lightblue'>１）背景</font>
第３回目です。自身のポートフォリオをデプロイするために、いよいよunicornを介してrailsを起動します。
AWS関連手順記事はすごく多いので、ここでは備忘録も含めて、非常に端的に手順を記載します。
全４話で進めます。


###  <font color='lightblue'>２）環境</font>

| 項目              |               内容 | 
|:-----------------|:------------------:|
| OS.Amazon Linux AMI      |            release 2018.03 |            
| Ruby             |            v2.5.1 |  
| Ruby On Rails    |           v5.2.4.3 |  
| MySQL    |           v5.6 |  
| Unicorn    |           v5.4.1 |  


###  <font color='lightblue'>３）内容</font>
<font color='blue'>**以下設定で75分程度かなと思います。（段取りが分かっていれば、30分）**</font>
※【ローカルマシン】指定以外は、全てAWSでの作業になります。

####  （1）【ローカルマシン】Unicornの設定(20分)
 - 対象アプリのGemfileにunicornを記述
 - ローカル内でbundle installの実行（ユニコーン導入）
 - ユニコーン導入で作成された設定ファイル（unicorn.rb）の編集

####  （2）Gitのクローニング(15分)
- アプリ格納フォルダの配置と権限付与
- アプリケーションをGitからのクローニング（※）
- アプリを稼働させるためのAWS-swap領域の作成(別記事をご参照ください)

※クローニングする際には以下が必要です。
　（１）先ほどのローカルunicorn設定がpushされていること
　（２）最新git、master化
　（３）本番環境（production）のDBユーザ設定　

####  （3）本番デプロイ設定(30分)
- アプリケーションに対するbundlerのインストール
- アプリのbundle installの実行（時間がかかります。）
- アプリの秘密鍵の取得（rake secret）
- 環境変数にdbユーザパスワード（productioｎと合わせる）と秘密鍵を設定する
- アプリのdbを作成する（DB-CreateとDB-Migrateの実行）
- assetsディレクトリのプレコンパイル

####  （4）本番Rails起動(10分)
- railsアプリを起動するため、インスタンスの3000番ポート開放
- unicornを介してサービスの起動

ここまで完了したら、"http://ElasticIP:3000"にアクセスすると、アプリケーションのトップページに遷移するはずです。

以上、短く記載しました。
ここまで、全てストレートに行ったわけではなく、エラーも出力されました。この辺りは、環境や設定により様々ですので、別記事にてエラー対策を掲載したいと思います。
MuleSoftの標準ポリシーを利用してBasic認証を要求するバックエンドシステムに接続しよう！

# はじめに
　Basic認証を要求するバックエンドシステムに標準ポリシーを利用して接続する方法を説明します。
　標準のポリシーを利用するメリットは、メンテナンス性や保守性の観点で設定のみで対応ことが言えます。
　Muleでは様々なポリシーが用意されており、Basic認証はHeader Injectionポリシーを利用することで簡単に設定することができます。
　実装ポイントを抑えるためにも共有しておきます。

# システム構成図
　今回のシステム構成図は以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76270/9f07561f-be76-3901-8e18-3923f4c3e0c9.png)


# ヘッダーインジェクションポリシーについて
　ヘッダーインジェクションポリシーは、メッセージの要求/応答にヘッダーを追加できます。ヘッダー削除ポリシーは、リストされたすべてのヘッダーを削除できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76270/fcd7e720-c14e-73a1-d338-d9518559673b.png)
”Header Injection and Removal”公式ヘルプを引用
https://docs.mulesoft.com/api-manager/2.x/header-inject-remove-task

## 設定画面
　下記の設定画面でBasic認証の情報を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76270/d1bbca41-7e56-2ebe-177a-0f7fc6ca86d9.png)
　設定する情報は以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76270/abc0895a-6c53-bda0-5557-7f324a150085.png)

```
Authorization : #["Basic " ++ dw::core::Binaries::toBase64("UserID:Password") ]
```

# 最後に
　MuleSoftでは、様々な機能を持った豊富なポリシーや値の設定を殉難に対応するDatawave式が利用できます。カスタマイズは極力抑えた柔軟な実装を心がけたいですね。では、、、
anaconda numpyのimportがVSCODEで失敗する


conda プロンプトでは正常動作するが、VSCODEだと失敗するので悩んでいた件。

# 解決
何度か再インストールをして、
C:\Users\magur\anaconda3\Library\bin　をPATHに追加。で動いている。


# メモ
最近のVSCODEだとPS対応している

# 事例
https://github.com/numpy/numpy/issues/15183#issuecomment-603575874
[Rust] isize、usizeとは

# 参考
[実践Rustプログラミング入門](https://amzn.to/3gh2VSH)

# 結論

あなたのパソコンのCPUアーキテクチャに合ったビット分のサイズを取ってくれる`整数型`です。

例)

32bitのPC

isize = i32
usize = u32


64bitのPC

isize = i64
usize = u64
Bashでコマンドの実行履歴にタイムスタンプを表示する(history)

bashでデプロイなど時間のかかるコマンドを実行したとき、そういえば実行してから何分経ったかな、ということがあります。
~/.bashrcに

```shell:~/.bashrc
HISTTIMEFORMAT="%F %T "
```

を追記するとhistoryコマンドにタイムスタンプがついて便利です。
参考) [Bash History: How To Show A Timestamp (Date / Time) When Each Command Was Executed](https://www.linuxuprising.com/2019/07/bash-history-how-to-show-timestamp-when.html)
自分用VSCode Extension

随時更新
[Visual Studio Code](https://code.visualstudio.com/)

---
Backet Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Classy Naming
https://marketplace.visualstudio.com/items?itemName=reflectiondm.ClassyNaming

file-icons
https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons

Git Blame
https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame
Git Graph
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
Git History Diff
https://marketplace.visualstudio.com/items?itemName=huizhou.githd
Git Merger
https://marketplace.visualstudio.com/items?itemName=shaharkazaz.git-merger
Git Stash
https://marketplace.visualstudio.com/items?itemName=arturock.gitstash
GitLens — Git supercharged
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

indent-rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Local History
https://marketplace.visualstudio.com/items?itemName=xyz.local-history

Markdown
https://marketplace.visualstudio.com/items?itemName=starkwang.markdown

Markdown All in One
https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

Markdown Imsize Support
https://marketplace.visualstudio.com/items?itemName=amoosbr.markdown-imsize

Night Owl
https://marketplace.visualstudio.com/items?itemName=sdras.night-owl

Paste Image
スクショした画像をctrl + vでVSCodeに貼り付けられる。
https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image

Path Autocomplete
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

Partial Diff
https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff

Peacock
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

Rainbow CSV
https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

Regex Previewer
https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

Smarty
https://marketplace.visualstudio.com/items?itemName=imperez.smarty

Start git-bash
https://marketplace.visualstudio.com/items?itemName=McCarter.start-git-bash

Trailing Spaces
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

vscode-icons
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

zenkaku
https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

Code Spell Checker
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Edit csv
https://marketplace.visualstudio.com/items?itemName=janisdd.vscode-edit-csv

C# XML Documentation Comments
https://marketplace.visualstudio.com/items?itemName=k--kato.docomment
SpringBootではinputタグをdisabledにするとCRUD操作中にRequired XXX parameter 'YYY' is not present 

## 問題趣旨
* springbootの資料を読むと、よくDBのCRUD操作はhtmlのinputタグで行われる
* それを流用しつつ、登録前の確認画面としてhtmlのinputタグにdisabledにすると、CRUD操作のときこんな感じでエラーになる
* `Required XXX parameter 'YYY' is not present`
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658564/ce066587-1cfd-1b8c-87b0-44a0fb36cd07.png)

## 解決策
* readonlyを使いましょう
    * disabledは送信がそもそもされません。
* より良い引用：選択はさせたくないけど値を送信したい場合、readonly属性を設定したタグをCSSでそれっぽく見せるより、disabled属性を設定したタグと同じ値をhiddenタグにもたせるのが一番スマートな解決策だと思います。
    * https://qiita.com/ma_me/items/83b4fa90328e67809507
読書要点「プリンシプルオブプログラミング」第3章 7つの設計原理

## 7つの設計原理

ソフトウェアの設計の際に考慮すべき7つの観点である。
障害を起こさない品質の良いコードを作るための経験則である。
設計原理を抑えることで品質につながるので、コードレビューの時に意識しておくことでレビューの方針がぶれず、核心的なチェックを行うことができる。
もちろんコードを書く際も抑えておきたい。

### 単純原理

シンプルで単純なコードを書くのが良い。
複雑なところにバグが出るため、過剰なテクニックは使わず、シンプルで見通しの良いコードを心がけるべきである。

### 同型原理

形式にこだわったほうが良い。
同じ種類のものは同じように下記、例外や特別扱いを避ける。
同型にこだわっていると、逆に異質なものが目立つようになり、その異質なものはバグの原因となりやすいため障害を見つけやすくなる。
また同型であるほど統一感が生まれ、コードの可読性が高まる。
コードに一貫性を持たせることを強く意識したい。

### 対称原理

形式の対称性にこだわったほうが良い。
対称性はコードの読みやすさをもたらし、書き手側にも思考の整理を促す。
カウンターパートを常に意識して整理されたコードを書きたい。

### 改装原理

階層構造にこだわったほうが良い。
抽象レベルで整理した構造をもとに、適切な処理や呼び出しを記述する。

### 線形原理

処理の流れは直線であることにこだわったほうが良い。
むやみな分岐や状態の数の増加は、コードの見通しの悪さにつながる。
可能な限り分岐や繰り返しを避け、上から下へ処理が流れていく単純なものにしたい。

### 明証原理

ロジックの明証性にこだわったほうが良い。
コードは何度も読まれるため、直感的でわかりやすく、正しさが伝わりやすいコードを書くべきである。

### 安全原理

安全性にこだわったほうが良い。
一見必要はなくとも着実に条件を吟味しておき、大事故にならないようにする。
必然性のないところや曖昧なところは不具合の温床なので、特に安全な動作を意識してコードを書きたい。
FinderのデフォルトテキストエディタをAtomに変更する方法


システム環境設定からデフォルトテキストエディタを変更出来なかったのでやり方を調べてみました。

#手順

1.Finderから適当なテキストファイルを右クリックし「情報を見る」を選択
2.▼このアプリケーションから設定したいテキストエディタを選択（今回はAtom）
3.その下の「全てを変更」で設定完了

3を飛ばせばファイルごとにエディタを選択できるみたいですね
EC2の起動時にPython(Flask)を起動する方法

##はじめに

EC2の起動時間が営業時間内に設定されている場合、毎朝コマンドを叩くのが面倒なので、
今回はpythonで作ったAPI(Flask)をshellを自動起動するようにしました。
参考サイトの方法を忘れないようにまとめたものです。



###apiのshell化

自分は権限が足りなかったのでsudo

```
# sudo vim /usr/local/start_api.sh
----------------------------------
#!/bin/bash

nohup python3 /usr/local/api.py &

exit 0
```

###自動起動の設定
ここでも権限が足りなかったので、sudoしました。

```
# sudo vim  /etc/init.d/api_start
-------------------------------
#!/bin/sh
# chkconfig: 345 99 10
# description: start_api shell
case "$1" in
  start)
    bash /usr/local/start_api.sh
       ;;
  stop)
     /usr/bin/kill python
       echo "stop!"
       ;;
  *) break ;;
esac
```

###実行権限の付与
ここでもsudo

```
$ cd /etc/init.d
$ sudo chmod 775  api_start
```

###自動起動への登録

```
$ chkconfig --add api_start

## 自動起動をonにする
$ chkconfig app_start on

## 設定されているかを確認する
$ chkconfig --list app_start

api_start       0:off   1:off   2:on    3:on    4:on    5:on    6:off
```
こうなれば終わり。


ちなみに、win10のコマンドプロンプロトの場合、ファイルの色が変わります。（白→緑）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208003/e1ed3f49-e537-5ff1-168b-e98de38d314c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208003/75bab8e2-6d98-0814-8a35-151a2b35e03a.png)


##最後に
インスタンスを再起動して、起動されているかを確認して、終わり。



##参考サイト
https://hit.hateblo.jp/entry/aws/ec/initd
https://dev.classmethod.jp/articles/ec2shell/
【Rails】カラム削除のマイグレーションファイル

## はじめに
テーブルのカラムを追加したり削除したりする際に使用するマイグレーションファイルについて、検索するといろいろHITするかと思いますが、どうもカラム削除について自分のやり方と違っていたので備忘録として載せておきます。
（ちなみにRailsのバージョンは5.2.3なのでもっと前の場合はうまくいかないかもしれません。）

https://qiita.com/azusanakano/items/a2847e4e582b9a627e3a
↑の記事を見ると、削除のマイグレーションファイルはchangeではなくupとdownを使うと書かれていますが、changeでもできたので具体的な書き方をみていきましょう。

postsテーブルからimageカラムを削除するということを想定して書いていきます。

|Column|Type|Options|
|------|----|-------|
|content|string|null: false|
|image|string||
Sequel Proでテーブルを見てみるとこんな感じです。
<img width="373" alt="23bf6a3c09f5e75b5203215ed9bf53bf.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/38d67357-bbd2-5c5a-d272-7eb8d032cc4f.png">


## マイグレーションファイル作成
まずはコマンド入力でマイグレーションファイルを作成しましょう。

```:ターミナル
$ rails g migration RemoveImageFromPosts image:string
```
書き方は```rails g migration Removeカラム名Fromテーブル名 カラム名:データ型```です。
これでマイグレーションファイルが作成されるはずです。
## マイグレーションファイル
マイグレーションファイルの中身を見てみるとこんな感じになっているかと思います。

```ruby:migrationファイル
class RemoveImageFromPosts < ActiveRecord::Migration[5.2]
  def change
    remove_column :posts, :image, :string
  end
end
```
スペルミスなどないか確認してマイグレーションしましょう。

```:ターミナル
$ rails db:migrate
```

## 結果
Sequel Proを確認してみます。
<img width="375" alt="d1aec0449a2511b6e67d80e248ad40b5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/008faedf-7871-c9e0-23e6-db952b93a870.png">
ちゃんと消えてますね。

## 最後に
自分は上述の方法でやってますが、これだと不都合があるなどの情報があればコメントいただけると幸いです。
Python超初心者の超初心者のためのPython #辞書型1

環境
windows7　（Mac Book Pro 16inch欲しい）
Visual Studio Code
chrome
python ver3.8.3

この記事はプログラミング初心者かつPython初心者に向けて記述します。

##辞書型

辞書型の作成は難しくはないのですが、超初心者の私はいくつかミスをしてしまいます。

まずは辞書型の作り方です。
`{   }`波括弧の中にキーと値を記述します。
キーは`{   }`の中にキーの名前と`:（コロン）`で記述し、値は`:（コロン）`の後に記述します。
このときに私がミスしやすいのが、キーと値に文字列を記述するときに` "  " `で囲うのを
忘れてしまいます・・・。お気をつけください。


`キー1:値1`と記述し、続いて`,（カンマ）`で区切ります。



```python:dict.py

{ "キー1":"値1","キー2":"値2","キー3":"値3,・・・・・・ }

```

辞書型を作成出来た所でこの辞書型の使い方です。
キーに対応する値は下記のように取り出します。

```python:dict.py

academy_awards = {"グリーンブック": 2019, "シカゴ": 2003, "タイタニック": 1998}

print(academy_awards["グリーンブック"])
#2019

```

作成した辞書型で設定していない（存在していない）キーを指定するとErrorがでます。
しかし、`.getメソッド`を使うと設定していない（存在していない）キーを指定すると`None`
が返ってきます。

```python:dict.py
academy_awards = {"グリーンブック": 2019, "シカゴ": 2003, "タイタニック": 1998}

print(academy_awards["ジョーカー"])
#KeyError: 'ジョーカー'

print(academy_awards.get("ジョーカー"))
#None

```

`.getメソッド`は引数の2つ目に文字列を記述すると、キーが存在しなかった場合に2つ目の
引数を返します。

```python:dict.py
academy_awards = {"グリーンブック": 2019, "シカゴ": 2003, "タイタニック": 1998}

print(academy_awards.get("ジョーカー", "その映画は作品賞には存在しません"))
#その映画は作品賞には存在しません
```
その他にも、キーを全て取り出す、値を全て取り出す、キーと値全て取り出すことも出来ます。
それぞれ、`.keys()`、`.values()`、`.items()`で行います。

```python.dict.py
academy_awards = {"グリーンブック": 2019, "シカゴ": 2003, "タイタニック": 1998}

print(academy_awards.keys())　#キーを取り出す
#dict_keys(['グリーンブック', 'シカゴ', 'タイタニック'])


print(academy_awards.values())　#値を取り出す
#dict_values([2019, 2003, 1998])

print(academy_awards.items())　#全てを取り出す
#dict_items([('グリーンブック', 2019), ('シカゴ', 2003), ('タイタニック', 1998)])

```


fin

##目次

[Python超初心者の超初心者のためのPython #Hello World](https://qiita.com/Macchino5/items/ddc0f4abc6168bab3448)

[Python超初心者の超初心者のためのPython #こんがらがりやすいとこ](https://qiita.com/Macchino5/items/25862df5f851d09e55d4)

[Python超初心者の超初心者のためのPython #型（type）と型（type）の確かめ方](https://qiita.com/Macchino5/items/caf4d6936f274cd7502a)

[Python超初心者の超初心者のためのPython #型（type）を変換する方法：str編](https://qiita.com/Macchino5/items/23183f8b2a945d8ecc5e)

[Python超初心者の超初心者のためのPython #型（type）を変換する方法：int、float編](https://qiita.com/Macchino5/items/9d14ab0c50d228464eac)

[Python超初心者の超初心者のためのPython #.txtファイルを作業中の.pyで読み込む](https://qiita.com/Macchino5/items/6675f1079e9c9ed945bb)

[Python超初心者の超初心者のためのPython #関数1](https://qiita.com/Macchino5/items/c403a2a997a0247adc96)

[Python超初心者の超初心者のためのPython #関数2](https://qiita.com/Macchino5/items/95750957b6ce266add50)

[Python超初心者の超初心者のためのPython #len関数]
(https://qiita.com/Macchino5/items/a64347f9e832406d3c24)

[Python超初心者の超初心者のためのPython #リスト](https://qiita.com/Macchino5/items/ccdb61e0caf75c1d523c)

[Python超初心者の超初心者のためのPython #インデックス、スライス](https://qiita.com/Macchino5/items/75326faa0b5ca2f7f865)
HTML5について

今回は「HTML5」について調べてみたので共有させて頂きます。
自分も最初HTMLとHTML5の違いがわからなかったので、この記事が少しでも参考になると嬉しいです！


# ◎HTML5とは？

HTML5とはHTMLのバージョン5、改訂第5版のことです。
初期のHTML1が開発されたのが1993年、それからバージョンアップを重ね1999年12月にバージョンアップされたHTML4が開発されました。
このHTML4が昨今のホームページを作る言語としてWEBを支えてきました。そして2014年10月28日にHTML5が発表され、現在ではホームページ制作に欠かせないものとなっています。
つまり**HTML＝HTML5であり、現在最新のHTMLのバージョンである**ということですね。

現在のプログラミングスクールやオンラインのカリキュラムは全てHTML5に対応しているので、そこまで気にしなくても良いかなと思います。

#◎HTML5とHTML4との違い

まずHTMLで最初に必ず書く文書宣言の書き方が違います。


□HTML4
<img width="916" alt="スクリーンショット 2020-06-19 10.37.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619773/0074e1d5-b7e1-5428-f684-091c0c983703.png">

□HTML5
<img width="179" alt="スクリーンショット 2020-06-19 10.41.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619773/cb8999a7-f923-4b6c-41ec-f099e8607305.png">


この2つを見比べると、HTML5の方が簡単に文書宣言をすることができるようになっています。


あとHTML5におけるHTML4からの主な変更点は

**・新しい要素や属性が追加される**
**・HTML 4以前では使えた要素や属性のいくつかが廃止される**
**・より明確に文書構造を示すことができる**
**・フォームの入力補助やチェック機能などが充実している**
**・動画や音声データをHTMLからシンプルに扱える**

になります。


「より明確に文書構造を示すことができる」を例にあげると、
<img width="682" alt="スクリーンショット 2020-06-19 10.47.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619773/c0c5d06a-c24a-320c-72f1-aeedea344eab.png">

例えば、 ヘッダを示す「header」、 フッタを示す「footer」、 一つのセクションであることを示す「section」、 記事であることを示す「article」、 ナビゲーションであることを示す「nav」 などの要素が追加されており、それぞれの役割に応じて適切な要素に割り当てることができるようになります。

以前のHTML4は「header」タグを「id」で囲っていたので、HTML5の方が断然書きやすくなっていることがわかると思います。


# ◎まとめ

今回はHTML5について記事を書きました。

HTML5は今現在の最新版ではありますが、また新しいHTML6が出てくるかもしれないので、エンジニアになるには常にトレンドをキャッチしていく必要があると感じました。

今回の参考文献は以下に貼っておきます↓
http://www.htmq.com/html5/002.shtml

より深くHTML5について知りたい方は見てみるのも良いかなと思います！

それでは！
vプリカ で決済

テストでクレジットカード決済を導入したいときがある。
そんなとき便利なのがvプリカ。

ネットショップでしか使えない
http://vpc.lifecard.co.jp/index.html

・ニックネームでの利用OK
・アマゾンや楽天などで使える
・一度作ったカード情報にさらに追加して費用を支払える

・月額サービスなどの決済には使えない場合がある
AWS基礎

#前提
AWS（プライベートサブネット）について学んだことを書いていきます。

#本題
#プライベートサブネット構築
いくら万全の対策をしていても、インターネットに接続している限りは、攻撃を受ける可能性が少なからずある。
そこでセキュリティを高める方法として検討したいのが、インターネットから隔離したプライベートサブネット。
データベースサーバーなどは、インターネットから隔離したプライベートサブネットに配置することで、安全性を高められる。

##プライベートサブネットの利点
パブリックサブネットは、インターネットゲートウェイを経由してインターネットに接続されている。
つまり、ここに配置したWebサーバーは、インターネットからSSHやWebブラウザでアクセスできる。
しかし、システムを構成するサーバー群の中には、インターネットから直接接続して欲しくないものもある。
例えば、データベースなどのバックエンドシステムは、その典型的な例。
隠したいサーバーは、インターネットから接続できないサブネットに配置するようにする。
このようなサブネットのことをプライベートサブネットと呼ぶ。
プライベートサブネットを構築することで、サーバーを隠すことができセキュリティを高められる。

##プライベートサブネットを作る
###アベイラビリティーゾーンを確認
リージョンとは、データセンター群が配置されている地域のことであり、それらのデータセンターを論理的にグループ化したものをアベイラビリティーゾーンと呼ぶ。
AWSのサービスは、いずれかのアベイラビリティーゾーン上で実行される。
VPCも例外ではない。
VPCを使ってサブネットを構築するとそのサブネットはどこかのアベイラビリティーゾーン上に作られる。
サブネット内に配置したインスタンスは、そのサブネットと同じアベイラビリティーゾーンに属する。
プライベートサブネットにはデータベースサーバーを置き、パブリックサブネットに存在するWebサーバーと通信するように構成する。
サブネットは別々のアベイラビリティーゾーンにあっても問題なく通信できる。
しかし、距離による遅延が増加したり、アベイラビリティーゾーン間の通信費用が発生したりするので注意する必要がある。
※それぞれのリージョンにいくつかのアベイラビリティーゾーンがあるのは、耐障害性を高めるため。
アベイラビリティーゾーン同士は、物理的に相当離れた場所に構築されており、異なるネットワークや電源網を用いていて、地震や洪水などで同時に影響を受けることがないように設計されている。

##プライベートサブネットにサーバーを構築する
プライベートサブネットができたら、サーバーを構築していきます。

・pingコマンドで疎通確認できるようにする
DBサーバーか、Webサーバーからアクセスできるかどうか確認する。
サーバー間での疎通を確認するときによく用いるのがpingコマンド。
pingコマンドでは、ICMP(Internet Control Message Protocol）と言うプロトコルを用いる。
pingコマンドを実行すると、ネットワーク疎通を確認したいホストに対してICMPエコー要求と言うパケットを送信する。
それを受け取ったホストは、送信元に対してICMPエコー応答というパケットを返信する。
pingコマンドでは、このICMPエコー要求とICMPエコー応答のやりとりから、疎通を確認したり相手に届くまでの時間を計測したりする。

・ICMPが通るように構成する
AWSのデフォルトのセキュリティグループの構成では、ICMPプロトコルは許可されていない。
※ファイアウォールには、インスタンスの外側から内側に流れる際に適用するインバウンドと、内側から外側に流れるアウトバウンドの２種類ある。
デフォルトでは、アウトバウンドには何ら通信制限がされていないため、何か通信を許可したいときには、インバウンドの方だけを調整すれば十分。

##踏み台サーバーを経由してSSHで接続
ここからSSHでログインし、MariaDBというデーターベースソフトをインストールする。
ここで一つ疑問がある。
DBサーバーはインターネットと接続されていないのにどうやってそこにSSHで接続すればいいか。
その解決方法の一つが踏み台サーバー。
WebサーバーにはSSHで接続できる。
そして、WebサーバーからDBサーバーには疎通確認がとれている。
そこで、❶WebサーバーにSSHでアクセス、❷WebサーバーからDBサーバーにSSHでアクセス、というようにWebサーバーを踏み台とすれば、ローカル環境からDBサーバーへとアクセスできる。

###秘密鍵のアップロード
インスタンスにSSHでアクセスするには、秘密鍵が必要。
つまり、WebサーバーからDBサーバーへとSSHで接続する場合、秘密鍵をWebサーバーに置いておく必要がある。
サーバーにファイルを転送するには、SCP（Secure Copy）というプロトコルを使う。

Macの場合は、ターミナルからscpコマンドを使ってファイルを転送する。
カレントディレクトリに置かれたmy-key.pemファイルを自分のホームディレクトリ（「〜/」）にコピーするには、下記のようにする。

```
$ scp -i my-key.pem my-key.pem ec2-user@ec2-18-177-32-60.ap-northeast-1.compute.amazonaws.com:~/
```
###WebサーバーからSSHで接続する
・鍵ファイルのパーミッションを変更
Webサーバーにログインしたら、まず秘密鍵ファイルのパーミッションを自分しか読めないように変更する。
そのためには、下記のコマンドを入力する。

```
$ chmod 400 my-key.pem
```
※この操作は、秘密鍵が見られると、誰もがサーバーにアクセスできてしまうので、それを防ぎ安全性を高めるのが狙い。
しかし、仮に安全性を気にしなくてもこの操作を省略できない。
自分だけが読み取れるというパーミッションになっていないと、sshコマンドを使って接続するときにエラーが表示されて接続できないから。

・Webサーバーを踏み台にしDBサーバーにSSH接続する
Webサーバーにログインしたら、DBサーバーに割り当てたプライベートIPアドレスである10.0.2.10に対してログインする。

```
$ ssh -i my-key.pem ec2-user@10.0.2.10
```
プライベートサブネットに置かれたサーバーにアクセスするときに、このようにインターネットから接続可能なサーバーにログインしてから、それを踏み台にしてログインすることが一般的。

#まとめ
インターネットから直接アクセスさせないプライベートサブネットの扱い方について書いていきました。
プライベートサブネットは、プライベートIPアドレスだけで構成したサブネットで、インターネットとの接続を持たない。
DBサーバーなど、インターネットから隠したいサーバー群を配置するときに用いる。
プライベートサブネットに設置したサーバーは、ローカル環境からアクセスできないためプライベートサブネットと通信可能な何らかのサーバーを踏み台にしてSSHでログインする。
この踏み台の方法を使えば、確かにローカル環境からサーバーへはアクセスできる。
【AmazonLinax2】本番環境でよく使うコマンド一覧

#Unicornの設定

```
#起動
systemctl start unicorn

#停止
systemctl stop unicorn

#再起動
systemctl restart unicorn

#プロセスの確認
ps aux |grep unicorn

#ステータスの確認
systemctl status unicorn

#logの確認
cat /var/www/rails/アプリ名/log/unicorn.log

#最新10行のlogの確認
tail /var/www/rails/アプリ名/log/unicorn.log

#アプリのlogの確認
cat /var/www/rails/アプリ名/log/production.log

```

#nginxの設定
```
# 起動
sudo systemctl start nginx

# 停止
sudo systemctl stop nginx

# 再起動
sudo systemctl restart nginx

# 状態確認
systemctl status nginx

# 設定ファイルの確認
nginx -t

# 設定ファイルの場所
cd /etc/nginx/conf.d/
```
Flake8でチェック対象外を指定する方法

需要があるか分からないが、日本語の技術情報を増やすためにも書いてみる。
<br>
Pythonのコードチェックに[Flake8](https://gitlab.com/pycqa/flake8)を使う際、ファイルやディレクトリをチェック対象から外したい場合があると思う。そんな時のやり方。


<br>

```bash
flake8 --exclude=./env/lib/python3.8/site-packages/ .
```





上記のように、「--exclude」オプションでチェック対象外のファイルやディレクトリを指定できる。ちなみに、上記は


<br>

- 「./env/lib/python3.8/site-packages/」ディレクトリを除いて
- カレントディレクトリ（最後の「.」で指定）をチェック対象とする


<br>
という意味になる。




<br>
## 参考

https://flake8.pycqa.org/en/latest/user/options.html#cmdoption-flake8-exclude
Windows 10 + C# + selenium で headless firefox を試してみる

Windows 10 + C# + selenium で headless firefox を試してみる
#目的
FirefoxをC\# + selenium からキックしてみる
OpenQA.Selenium.Support.UI.ExpectedConditions method is now deprecatedに対しては
SeleniumExtras.WaitHelpers.ExpectedConditionsで書き換えて対応してみる
※サイトの作成された時期によって修正の量が違うと思われる・・・・
PythonでのWebDriverWaitは

```python
    element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.TagName, 'h3'))
    )
```
を書き換えると以下になるのかいな？？

```cs
    WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));            
    IWebElement firstResult = wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementExists(By.TagName("h3")));
```
##追加パッケージ
.NETFramework 4.5でプロジェクトを作成後
プロジェクト -> NuGetパッケージの管理より以下を追加する

<pre>
Selenium.WebDriver
Selenium.WebDriver.GeckoDriver
DotNetSeleniumExtras.WaitHelpers
</pre>
##サンプルコード
[Seleniumブラウザー自動化プロジェクト](https://www.selenium.dev/docs/site/ja/)のCS版を書き換えてみる

```cs
using OpenQA.Selenium;
using OpenQA.Selenium.Firefox;
using OpenQA.Selenium.Support.UI;
using SeleniumExtras.WaitHelpers;

private void btnChrome_Click(object sender, EventArgs e)
{
    var options = new FirefoxOptions();
    options.AddArgument("--headless");
    IWebDriver driver = new FirefoxDriver(options);

    try {
        WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
        
        //Webページを開く
        driver.Navigate().GoToUrl("https://www.google.co.jp");
        
        //検索ボックスに検索ワードを入力
        IWebElement el = wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementExists(By.Name("q")));
        driver.FindElement(By.Name("q")).SendKeys("Selenium" + OpenQA.Selenium.Keys.Enter);

        //検索結果が出たという判定を何にするか?? は仕様依存??
        IWebElement firstResult = wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementExists(By.TagName("h3")));
        
        //ページソースの出力
        Console.WriteLine(driver.PageSource);
    }
    catch (Exception)
    {
        Console.WriteLine("Err");
    }
    finally
    {
        if (driver != null){
            driver.Quit();
        }
    }
}

```
#参考にしたのは以下のサイト
[Seleniumブラウザー自動化プロジェクト](https://www.selenium.dev/docs/site/ja/)
[C# Selenium 'ExpectedConditions is obsolete'](https://stackoverflow.com/questions/49866334/c-sharp-selenium-expectedconditions-is-obsolete)
[Selenium Web Driver, ExpectedConditions [deprecated] alternative](https://sqa.stackexchange.com/questions/37250/selenium-web-driver-expectedconditions-deprecated-alternative)
[seleniumを使ってC#でGoogle Chromeの自動操作をする](https://qiita.com/natuki33/items/c0947c31fc733b4e39ef)
[【C#】Selenium ChromeDriverを使ってWebスクレイピング](https://gazee.net/develop/csharp-selenium-chrome-driver/)
独自ルール:Merge requestを使ったグループプロジェクト

【[自分とこの環境下におけるGit & GitLabレクチャー](https://qiita.com/NeK/private/dee76f411cf2488b6873)】

[独自ルール:多人数開発のためのGitLab・タグ・ブランチ](https://qiita.com/NeK/items/8c62c74335a77ecea7af)にてブランチが使えることが前提．

多人数で一つのプログラムを作成・修正していく際に，作成分・修正分をメインブランチに取り入れてもらうことをMergeといい，「取り入れて」とリクエストすることをMerge requestという．
基本的な流れは以下のとおり．

プログラム作成・修正する側の流れ:メンバー全員対象

1. ローカルでブランチを作成し，編集
- GitLabのプロジェクトスペースにブランチ名でpush
- GitLab上でMerge request

プロジェクト管理者の流れ:M1以上？

1. GitLab上でMerge requestを確認
- Merge内容を確認しつつ必要に応じて受け入れ
	* 全部Mergeすることも出来るし一部Mergeすることも可

<font color="red">注意: 図ではmasterの文字があることもありますが，mainに読み替えてください．メインブランチはmainとなります．</font>

# 更新履歴
2024/02/29:ブランチの作成・変更にcheckoutではなくswitchを利用するように変更


# 前提
プロジェクトは作成されているものとする．つまり，誰かが自分のためのプロジェクトを個人プロジェクトとして作成しており，グループで共有したくなり，グループプロジェクトとするためにforkで持ってきている状況を想定する．

1からプロジェクトを作成する場合には，以下の情報をもとに各自．．．頑張る．

# プログラム作成・修正する側の流れ
## ブランチ作成・プログラム作成・修正
git cloneなどでプロジェクトのメインブランチがローカルにある状態からスタート

1. [git switch -c \[branch名\]](https://qiita.com/NeK/items/5898220657e5da0ef04f)などでブランチ作成，切り替え
    - \[branch名\]
        - 機能追加の場合の例
            - develop-名前-001(通し番号)-機能名
        - バグ修正などの例
            - hotfix-名前-001(通し番号)-修正内容
- 修正，コンパイルして動作確認
- git push origin \[branch名\]
    - 例
        - git push origin hotfix-hoge-001-cure-hage
        - originにdevelop-...のブランチ作成しアップロード
- GitLabにログイン，作成したブランチに移動
    - 赤丸の部分をクリックするとブランチを選択できる
![pre-merge-on-gitlab.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284261/58065e2d-868c-ed4a-3c56-40b88c5811c1.jpeg)
- Merge request:マージのお願いの準備
![merge-buttom-on-gitlab.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284261/7054cf52-587c-8076-94ef-42c03d10221f.jpeg)
- Merge requestを実行
    - ブランチに注意
        - 個人プロジェクトからforkした場合，hotfix-...から個人プロジェクトへのマージリクエストになっている．<font color="Red">「ブランチの変更」を選択し，グループプロジェクトのメインブランチに変更</font>しなければならない．
    - Assigneer
        - Assign to meを押して自分にしておく
    - Submitマージリクエスト
        - 設定がおわれば当該ボタンを押す
![merge-request-on-gitlab.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284261/6b35ff15-fdef-e2bc-5526-a6a5c3b7008d.jpeg)

# プロジェクト管理者の流れ
Merge requestがあればGitLab上に表示されるので内容を確認しつつ必要に応じて結合する．

1. GitLab上のMerge request確認
    - マージリクエストの数字が増えている．クリックし内容を確認する．
![after-merge-request-on-gitlab.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284261/bef23237-f229-d325-18f2-4551b7613139.jpeg)
- Merge request一覧からmergeするものを選択
![select-merge-request-on-gitlab.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284261/93aa3b98-98b8-48be-e53a-44bccf748fa7.jpeg)
- Request内容が表示されるので確認，Mergeボタン押下により結合実行
![execute-merge-request-on-gitlab.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284261/80024167-113f-3d81-282a-7c7b9f0e2d90.jpeg)

# プログラム作成・修正する側の流れ
以下のコマンドを用いて，メインブランチの最新版を取り込んでおく．Merge requestを出した時だけでなく，常日頃定期的に実行しておく．誰がいつMerge requestを出し，結合されるか分からないので．

```bash:terminal
$ git pull origin main
```
JavaScript基礎

# javascript基礎練習

生徒のテストの点数を入力して合否を判定するアルゴリズム

```javascript

class Student {  //クラスの定義
  constructor(name){ //共通のプロパティを設定（引数）
    this.name = name;  //thisでインスタンス化
  }
  cal_avg(data){ //メソッドを定義
    var sum = 0;
    for (let i = 0; i < data.length; i++){
      sum += data[i];  //自己代入方式で足し上げる（配列の要素数分）
    }
    var avg = sum / data.length;
    return avg;  //平均点の戻り値を返す
  }

  judge(avg) {  //メソッド定義
    var result;
    if(avg <= 60){
      result = "passed";
    } else {
      result = "faled";
    }
    return result;  //結果を変数に代入してreturnで戻り値を返す
  }
}

var a001 = new Student("sato");  //インスタンス化
var data = [30,50,70,78,90,];
var avg = a001.cal_avg(data);
var result = a001.judge(avg);

console.log(a001.name);
console.log(data.length);
console.log(avg);
console.log(result);
```

# 解説

①クラスの定義をし、クラス内で使用できるメソッドやプロパティを定義する。
②constructor(){}で共通のプロパティを設定、呼び出す際に実引数に値を入力すればインスタンス生成の際に自動的にそれぞれのプロパティが生成される。
③メソッドを定義する際に戻り値を引数で渡す。
④クラスをインスタンス化する事で使用できるようにする。

# 補足

※クラスは生成してもインスタンス化（var a001 = new Student("sato）しなければ使用出来ない。
クライアント技術に特化した記事を始めます。

日々様々な技術が生み出されているこの業界において、自分が一番弱い領域であるクライアント領域、特にビジュアライゼーションに関する勉強を始めます。
最近Reactの本を購入して読み始めていますが、なかなか時間もなく、かつ自分でコツコツと進めるだけではモチベーションが保てないので、何か作る題材を決めて、それを軸に肉付けしていく形で必要箇所を読み進めて、新たに得た知識や「これは？！」という情報があればここQiitaに投稿していこうと思います。
Git使うコマンドメモ～開始参考サイト付き

###メモです
よく使うメモ増えたら追記します

####プッシュしたいファイルがあるフォルダに移動
`$ cd C:/Users/< User >/Documents/Python/`

- Windowsの`\`ではなく`/`

`$ git init`

####リモートでつなぐオリジンを設定
`$ git remote add origin <URL>`

- 連続で入力するとエラー起こすのでオリジン消去
- `$ git remote rm origin`

####ファイルをGitにあげる(コミット・プッシュ)
`$ git add test.py`
`$ git commit -m "Create test.py"`
`$ git push origin master`

ちなみにログインせずにコミットすると

```
$ git commit -m "Create index.html"

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got '******')
```

と出る

#参考(コマンド)
https://prog-8.com/docs/git-env-win
https://qiita.com/opengl-8080/items/451c5967cbbc262f4f0d

#参考(ssh接続)
https://qiita.com/0ta2/items/25c27d447378b13a1ac3
https://qiita.com/hollyhock0518/items/a3fee20951cd92c87ed9

1. `~/.ssh`ディレクトリに作成すると場所は`C:\Users\< User >\.ssh`にできる
2. git で作成してアップロード

#GitHub
https://github.com/