OmniAICreator/Qiita-1.07M huggingface dataset:
アプリ制作の基礎"MVCの機能"の簡単まとめ

# “初学者向け基礎知識”<br>WEBアプリにおける”MVC”という機能について

## ”そもそもWEBアプリケーションの仕組みとは？”
WEBアプリケーションを一言で表すと、
<b>”WEBで公開されているプログラム”</b>のことです。
<b>クラインアントがリクエストを送り、WEBアプリがレスポンス</b>を返します。

例えば、”Twitterにログインしている状態で自分のプロフィール画面を表示する”場合。
ここでは、
・クライアント=自分(ログインしているユーザー)
・WEBアプリ=Twitter
・リクエスト=プロフィール画面を見たいので「プロフィール」ボタンをクリック
・レスポンス=アカウントのプロフィール画面を表示

このように、WEBアプリでは<b>「リクエストとレスポンス」</b>のやり取りが行われています。

## "MVCの言葉の意味"
MVCとは<b>「アプリケーション内での処理の機能の総称」</b>です。

それぞれ機能の頭文字を取ってM・V・Cとなっています。
・M:Model(モデル)。データに関わる処理を行う。
・V:View(ビュー)。ブラウザにレスポンスとして返す見た目を決める。
・C:Controller(コントローラー)。ルーティングからリクエストを受け取り、決められた処理を行う。ModelとViewの橋渡しの役割をしている。最終的にクライアントにレスポンスを返す。

また、MVCの前にルーティングも合わせて理解する必要があります。
それは下記の処理の流れで触れます。

## ”WEBアプリケーションの処理の流れ”
大まかな処理の流れは次の通りです。
1.クライアントがリクエスト送る。
2.ルーティングでリクエスを受け取り、処理を振り分ける。
3.コントローラーで”ルーティングからのリクエスト”を受け取り、その内容によってモデル・ビューで処理を行い、最終的にクライアントへ”レスポンス”を返す。

<b>図1.リクエストからレスポンスまでの処理の流れ</b>
![MVCの流れ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1335471/5fddbbaf-dd22-d983-4b1e-4b29bd570e48.jpeg)


## "MVCのメリット"
一言で表すと<b>役割分担を明確にできる！</b>

上記で述べた様に「MVC」には、
・Model:データに関する処理を行う。
・View:クライアントへの見た目を返す。
・Controller:ルーティングからリクエストを受け取り、ModelとViewにリクエストを送る。また、図1の通りModelとViewの橋渡しになってもいる。

という役割がそれぞれにあります。
この時、役割を分けずにコードを記述した場合どんな手間が発生するのかを考えました。

#### ・MVCで記述をしない場合の問題その1
見た目の変更が起きた時に対処が大変！
→どこになんのコードがあるのかを探すが面倒！

#### ・MVCで記述をしない場合の問題その2
条件分岐の記述が大変！
→仮に”A”と”B”のボタンを押したら”画面1”に遷移する。”C”のボタンを押すと”画面2”へ遷移する……など条件分岐がある場合、その分岐ごとにコードを記述したとします。その時点で、複雑で分かりにくい見た目にもなりますし、さらに後々にレイアウトの変更があったら、「問題その1」のように全てに変更を反映させるのに大変な労力を要します。

これらの問題を解決するために、役割ごとに分割をするということがとても重要になっています。
以上がMVCのメリットでした。


#### ・参照URL
https://qiita.com/tshinsay/items/5b1724baf32b8b5113c2
→簡潔に説明してくれているので、軽く読める！
https://www.geekly.co.jp/column/cat-technology/1911_040/
→他のサイトよりも詳しく触れている。ある程度の理解がある人向け。
https://bap-software.net/knowledge/mvc-model/
→MVCの例えが分かりやすい！
https://kanda-it-school-kensyu.com/php-framework-contents/pfc_ch07/pfc_0701/
→ 神田ITスクールの記事です。信憑性が高いです。



以上がWEBアプリケーションにおける大まかな処理の流れとなります。
この流れを把握していると、エラーが発生した際に「どこに問題があるのか」を推測することが可能です。
各機能の詳細な処理の内容については、この記事内では触れませんのでご了承ください。
【JavaScript基礎】ユーザー操作時に発生するイベントについて

JavaScriptにおける__「ユーザー操作に合わせて発生するイベント」について__、自己の忘備録としてまとめています。

## 参考URL
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference

## 参考著書
https://www.amazon.co.jp/JavaScript-%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%82%B7%E3%83%94%E9%9B%86-%E6%B1%A0%E7%94%B0-%E6%B3%B0%E5%BB%B6/dp/4297103680/ref=sr_1_7?dchild=1&keywords=javascript&qid=1618412284&sr=8-7

ウェブ上には、多くの__イベント__があります。

- クリック
- タップ
- スクロール
- 画像読み込み完了
  など

JavaScriptではそれらのイベントに合わせて処理を実行させることができます。

###イベント発生時に処理を設定する

イベントに合わせて処理を実行させる際は、__addEventListner()__メソッドを使うとイベントを制御することができます。

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

イベントを発生させるオブジェクトのことを__「イベントターゲット」__と呼び、
「イベントターゲット」でイベントが発生したときの処理を__「イベントリスナー」__と呼びます。


#### addEventLister()のオプション
イベントリスナーを設定する際、addEventLister()メソッドの第３引数にオプションを指定することができます。

| オプション | 意味                                         | 型     | 
| ---------- | -------------------------------------------- | ------ | 
| capture    | キャプチャリングフェーズで取得するか         | 真偽値 | 
| once       | イベントリスナーの呼び出しを１回のみにするか | 真偽値 | 
| passive    | パッシブイベントかどうか                     | 真偽値 | 

例えば、イベントリスナーを１度だけ呼び出したい時は、onceにtrueを設定します。

```js
// オプション指定
const options = {
    once: true,
};

const btn = document.querySelector('.button');
const onClickButton = () => {
    console.log('ボタンがクリックされました！');
};

btn.addEventListener('click', onClickButton, option);
```
__キャプチャリングフェーズ__や__パッシブイベント__については、自分自身知らない概念だったので、下記に参考リンクだけ記載しておきます。

#### キャプチャリングフェーズについて
[イベントの伝搬(キャプチャリングとバブリング](https://www.javadrive.jp/javascript/event/index10.html)

#### パッシブイベントについて
[passive: trueでなぜパフォーマンスがよくなるの？簡単な説明と使い方！](https://leap-in.com/ja/use-passive-true-avoid-janky/)

### 設定したイベントを削除する

設定したイベントを削除する場合は、__removeEventListner()__メソッドを使用します。

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener

```js
const btn = document.querySelector('.button');
const onClickButton = () => {
    console.log('ボタンがクリックされました！');
};

btn.addEventListener('click', onClickButton);

//3秒後にイベントを削除する
setTimeout(() => {
    btn.removeEventListener('click', onClickButton);
}, 3000);
```


### ページが表示された時に処理をする

JavaScriptでDOMを操作できるのは、HTMLドキュメントの読み込みと解析が完了したタイミングです。このタイミングで発生するのが、__DOMContentedLoadedイベント__です。

https://developer.mozilla.org/ja/docs/Web/API/Window/DOMContentLoaded_event

__loadイベント__は、ページ内の全リソース（画像、音声、動画など）の読み込み完了時に発生します。そのため、__DOMContentedLoadedイベント__によりもタイミングが遅くなります。

https://developer.mozilla.org/ja/docs/Web/API/Window/load_event


| イベント名       | 発生タイミング               |  
| ---------------- | ---------------------------- |
| DOMContentLoaded | HTMLドキュメントの解析完了時 |  
| load             | 全リソースを読み込み完了時   |    


__「ページが表示されたいタイミングで操作をしたい」__といった場合、大抵DOMContentedLoadedを使う方が適しています。

#### scriptタグのdefer属性とDOMContentedLoadedについて
scriptタグにdefer属性を設定してJavascriptを読み込むと、スクリプトはHTMLの解析終了後に実行されます。これは__DOMContenedLoadedの発生前__であるため、defer属性を設定している場合はDOMContentedLoadedによるイベント設定は不要だと考えられます。
ivy/counsel/swiper系コマンドのmigemo対応

ivyやcounselでmigemo対応を行うためには`avy-migemo`を使うひとがかつては多かった。
しかし、`avy-migemo`は長くメンテされておらず、`avy-migemo`を使わずにmigemo対応を実現する試みが多く行われている。以下はそのような対応を実現された方々のブログ記事である。

https://www.yewton.net/2020/05/21/migemo-ivy/

https://tsuu32.hatenablog.com/entry/2020/09/22/234749

またQiitaにもすでに上記の記事を参考に設定を行った記事が見つかる。

https://qiita.com/minoruGH/items/20d7664a3a57c7365ebc

これらの方々の記事を参考に、ivy系インターフェイスを持つコマンドをmigemo対応するためのminor-modeを書いたのだった。`ivy-with-migemo-mode`である。MELPAのパッケージ登録はしていないので、ダウンロードしてロードパスの通ったところに置くとよい。

https://gist.github.com/tam17aki/256094b57faad19d60eed7761c351d5b

設定例は以下である。`swiper`をはじめとして`counsel-rg`までがmigemo対応の対象になる。なお`migemo-options`や`migemo-kill`、`migemo-init`は`counsel-rg`をmigemo対応するための設定である。

```lisp
(require 'ivy-with-migemo)
(setq ivy-with-migemo-enable-command ; migemo対応の対象となるコマンドを設定
      '(swiper
        swiper-isearch
        counsel-recentf
        counsel-rg))
(setq migemo-options '("--quiet" "--nonewline" "--emacs"))
(migemo-kill) ; migemoシャットダウン
(migemo-init) ; migemo再起動
(global-ivy-with-migemo-mode 1) ; 有効化
```
とくにcounsel-rgのmigemo対応により、日本語で書かれた複数ファイルにまたがってmigemo的な検索が（超）高速に実現できるので、便利だと思われる。なおrgコマンド（ripgrep）は、最新のソースコードを本家からダウンロードしてコンパイルするのがよい。Ubuntuのapt系ではとても古いバージョンものしか入らなかったからである。

以下の記事に`ivy-with-migemo-mode`作成の経緯を書いておいたので、ご参考まで。すでに同様の機能を実現している`ivy-migemo`との違いについても触れている。ひとによっては`ivy-migemo`のほうが好みということも十分にあると思われる。

https://tam5917.hatenablog.com/entry/2021/04/15/185053
olの数字を右揃えにする

ol.{
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 100px;
}

ol. li{
  text-indent: -1.6em;
  padding-left: 2.2em;
  margin-bottom:20px;
}
ol. li:before {
  counter-increment: item;
  content: counter(item)'.';
  text-align: right;　/*ここ*/
  display: inline-block;　/*ここ*/
  /* 以下は自由に装飾... */
  padding-right: 1.6em;
  font-weight: bold;
  color: #123262;

}
Unity初心者が2か月で3Dゲーム開発した際に痒い所に手が届いた参考記事

## はじめに
　2月から本格的にUnityを用いたゲーム開発をはじめ、なんとか2か月間で完成にこぎつけました。ここでは少し躓いたときに参考になった技術や記事の紹介をおこなっていこうと思います。

## 制作したゲーム”Record Attacker”
　制作したゲームはこちらをダウンロードして遊ぶことができます。

https://drive.google.com/drive/folders/1mpsMpOWOiEAbsBOYJGFU9xIdhZnpo9CD?usp=sharing

ゲーム内容：キャラコンを駆使して最速でゴールせよ！様々なギミックを乗り越えオンラインランキング1位を目指せ！

とても単純ですね。今回は**マ〇オ64のようなRTAが楽しそうなアクションゲームを作る**ということと**個人制作特有の安っぽさを無くしたい**という目標を掲げて開発しました。制作者2人のオンライン共同開発でした。
![ry.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092194/a7f7c22e-3e7f-f55c-a4e1-e82a21730a46.png)
![wefa.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092194/14660041-af9f-98e6-411c-44fecd268db9.png)
![afe.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092194/40a9555f-b833-6227-85d5-e84ce9f6e1ef.png)



## 参考になった技術
#### GitHubの使い方
　オンライン共同開発ではほぼ必須のGitHub。今まで読んできた記事の中で一番分かりやすかった@TakumaKurosawa さんによる"GitHub実践ハンズオン"

https://qiita.com/TakumaKurosawa/items/79a75026327d8deb9c04

難易度別に分けられているため、ほとんど躓くことなく環境構築をすることができました。

#### オンラインログイン・ランキング
　個人制作でのオンラインログイン・ランキング実装に最適なNIFCLOUDのmobile backend（NCMB）。

https://mbaas.nifcloud.com/

サンプルの説明が丁寧で、制作途中に組み込んでもスムーズに実装することができました。
#### 美しいScene切り替え
　Scene切り替えがお洒落だとゲーム全体の一体感が増します。フェードイン・フェードアウトを用いたScene切り替えを以下の記事を参考に実装しました。

https://bibinbaleo.hatenablog.com/entry/2017/10/08/161733#%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A2%E3%82%A6%E3%83%88

#### TPS視点の深度設定等
　CinemachineのFreeLookCameraを用いるとマウスを使って自由に見渡せるカメラワークを作成することができます。そのFreeLookCameraの説明をしてくれている記事がこちら。

https://light11.hatenadiary.com/entry/2019/08/11/160125

#### 特定のオブジェクト同士の衝突判定を無くす
　壁ジャンプ用のColliderを新たにキャラクタに設定したため、もとのCupsule Colliderと接触判定が常に出て通常モーションが反映されないことがありました。その問題を解決する方法がレイヤでの設定。こちらの記事を参考にしました。

https://gomafrontier.com/unity/1189

#### AnimationClipの詳細
　外部のアニメーションをAnimator Controllerで自然に遷移するためにAnimation Clipで下準備する必要があります。以下の記事

https://xr-hub.com/archives/13007

ではAnimation ClipのInspector内の数値ごとに説明がされているので体感的に理解できます。

#### Animator遷移の優先順位
 キャラクタを操作する上で地味だがかなり気になる問題点。例えば、走りの切り返しとジャンプはどちらも走りモーションから遷移するが、優先順位は切り返しの方が早いと自然な操作性となる。遷移の優先順位含めたAnimator Controllerを詳しく説明した記事がこちら。

https://light11.hatenadiary.com/entry/2019/04/11/005147

#### 足元の土煙
　ビジュアルが大幅に向上する土煙。こちらの記事を参考にしました。

https://nopitech.com/2019/06/10/post-1287/

#### 先行入力
　格ゲーではないとはいえ、先行入力はあった方が操作性がかなり向上します。参考にした記事はこちら。

https://qiita.com/irosan/items/07764dc16795209a69dc

指定フレーム分キー入力をリストで格納して判定する手法で実装しました。

#### アニメーションに応じてコライダの大きさを変化
　今回用いたアニメーションはジャンプ時に体を丸めるため通常のコライダサイズでは地面着地時にアニメーションでは着地できそうなのにコライダがぶつかって着地できない問題点が生じた。そのため、アニメーションによってコライダのサイズを随時変更する必要がある。その際に参考になった記事はこちら。

https://gametukurikata.com/program/changecollider

コライダサイズを調整することで理不尽なゲームミスを減らせるので重要な要素の１つです。

## あとがき
　NCMBを用いたランキング機能実装の際に調べても出てこなかった問題点や壁ジャンプの実装など自分で書くと役に立つ人がいるかもしれない内容は今後記事にしようかなと考えています。
STM32L010とMCP3425でなんちゃってluxを液晶表示(MCP3425A0T-E/CH 16bitADC)(明るさ)


STM32L010用に軽量コンパクト

xリビジョンは、125
xコードメンテナンス 主にバイナリサイズの縮小 2021/4/20
1. 10の割り算のシフト演算化　-44バイト

```c++
//10の割り算 0から1028までは、正しい。主に0から999
#define DVI10(n) ((n*205)>>11)

```
2.errorの無効化 -2452バイト

```c++
void error(const char* format, ...){}

```

構成
STM32L010F4P6
MCP3425A0T-E/CH
NJL7502L
AQM0802A

1.SCLとSDAを接続、プルアップも忘れずに
2.電源の接続
3.下記のソースコードを書き込む
4.コンパイル実行で表示されたら終了
5.おわり

```c++

#include "mbed.h"

//10の割り算 0から1028までは、正しい。主に0から999
#define DVI10(n) ((n*205)>>11)

// AnalogIn adc_vbat(A0);

#define ADDR        (0xD0)   //  address
#define ADDR_LCD    (0x7C)   //  address

//I2C i2c(I2C_SDA, I2C_SCL); //767
//I2C i2c(dp5, dp27); //1114
I2C i2c(PA_10, PA_9); //010

char    data_read[8];   //i2cバッファー

char INIT_com[]={0x0,0x38,
0x0,0x39,
0x0,0x4,
0x0,0x14,
0x0,0x70,
0x0,0x56,
0x0,0x6C,
0x0,0x38,
0x0,0xC,
0x0,0x1,
0x40,0x41};

char INIT_cls[]={0x0,0x1};

char ch_hex_a_b[5];
char *ch_hex_a(int l_num)
{
    int a,b,c;

    b=DVI10(l_num);
    c=l_num-(b*10);
    l_num=b;
    a=DVI10(l_num);
    b=l_num-(a*10);

    ch_hex_a_b[0] = '@';
    ch_hex_a_b[1] = '0' + a;
    ch_hex_a_b[2] = '0' + b;
    ch_hex_a_b[3] = '0' + c;
    ch_hex_a_b[4] = 0;

    return(ch_hex_a_b);
}

int ii;     //ループカウンタ

int main()
{
    //液晶の初期化
    for(ii=0;ii<11;ii++){
        i2c.write(ADDR_LCD, &INIT_com[ii*2], 2);wait_ms(2);
    } //for

    i2c.write(ADDR, "\230", 1); //16bit 15sps PGA x1

    int p,s;
    while (1) {
        //液晶のクリア
        i2c.write(ADDR_LCD,INIT_cls,2);wait_ms(2);

        //ii = (adc_vbat.read_u16()>>4);

        //データの読み込み
        i2c.read(ADDR | 1, data_read, 2);
        
        s = (data_read[0] * 256 ) + data_read[1];
        //s = 32767;
        //printf("-s=%d\r\n",s); //767
        //printf(" h=%d\r\n",data_read[0] * 256 );
        //printf(" l=%d\r\n",data_read[1]);

        // 32768/(163.84/2)=400 luxに変換
        p=( ((s>>5)*6)  + (s>>7)  ) >> 4;
        //printf(" p=%d\r\n",p); //767
        
        i2c.write(ADDR_LCD, ch_hex_a( p ) ,4);

        wait_ms(1000);
    }//while

}//main

void error(const char* format, ...){}


```

![mcp3425_010_lux_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/aeea24c6-0115-5d04-29a0-398323cc13d9.jpeg)

バイナリサイズの縮小化前

![mcp3425_010_lux_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/c0a51c3e-4668-7983-515e-083f34e93f1d.jpeg)

バイナリサイズの縮小化後

![mcp3425_010_lux_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/6d82a696-866c-2aa5-29ed-1ea7022422d6.jpeg)
[お知らせ]最近は技術記事はZennに投稿しています

※ この記事は個人的なお知らせなので、拡散やLGTM（いいね）をつけるのは控えていただけるとありがたいです。直接プログラミングには関係ない記事となりますが、プログラミング情報関連の記事ということでご容赦いただけたら幸いです。

最近は、技術関係の記事は、Zennに書いています。

https://zenn.dev/karaage0703

特にQiitaが嫌になったからとかではなく、Zennの本の機能とか使いやすかったので、最近はなんとなくZennに書いています。もしよろしければこちらも参考にしていただけたら幸いです。

Qiitaの記事を、全部Zennに移行しようかとも思いましたが、またQiitaを使うときもあるかもしれないので、アカウントや記事はこのまま残しておこうと思います。

その他、Twitterをフォローしていただけると、Zenn, Qiitaへの投稿含め、情報取得できると思います。

[@karaage0703(Twitter)](https://twitter.com/karaage0703)
webpack cliのmodule not foundが原因で、webpack-dev-serverが実行できない問題を解決

package.json内の記述

```json
  "scripts": {
    "start": "webpack-dev-server --mode=development"
  }
```

実際にnpm startしてみると、

```json
 code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ts-todo/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ts-todo@1.0.0 start: `webpack-dev-server --mode=development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ts-todo@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/.npm/_logs/2021-04-17T01_19_22_961Z-debug.log

```



## 原因
webpacker cliのバージョンが4だと、何やら問題があるらしい。
https://github.com/webpack/webpack-dev-server/issues/2029





バージョンを下げてみる

```json:package.json
"webpack-cli": "^3.1.8",
```
npm installで変更を反映させて、npm startを実行すると、無事通った。
MacOS+VSCodeのplantUMLエラー:javaが見つかりません!

# はじめに

MacのVSCodeでplantUMLを使おうとしたら、```javaが見つかりません!```というエラーが発生した。
Windowsでは発生しなかったので、Mac特有の話のようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15085/e5c6ba21-4c2d-c051-7dff-4fe8ae78af6f.png)

# 前提問題

問題が発生した日: 2021/4/17
MacOS Big Sur : Ver. 11.2.3
VSCode: Ver.1.55.2

# 解決方法

プラグインのRequirementsにきちんと記載されていた。
ローカルでグラフをレンダリングする際に、```Java```と```Graphviz```を使うため、インストールする必要があるとのこと。

インストール完了後、VSCodeを再起動するとこと、本問題は解決した。

```
$ brew install --cask adoptopenjdk
$ brew install graphviz
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15085/eceef512-24ce-bf93-dc62-a7bac213cd26.png)

以上
vue-cropperjs　Error in render: "TypeError: (0 , _vue.h) is not a function"のエラーについて

エラー情報から原因が掴みにくい問題であり、記事もなかったので挙げておきます。 error検出（2021/04/15）
# 環境
- node: 14.16.1
- npm: 6.14.12
- vue-croppperjs 5.0.0

## エラー一覧


```javascript:error
[Vue warn]: Error in render: "TypeError: (0 , _vue.h) is not a function"
TypeError: (0 , _vue.h) is not a function
[Vue warn]: Error in mounted hook: "Error: The first argument is required and must be an <img> or <canvas> element."
Error: The first argument is required and must be an <img> or <canvas> element.
```

すべてVueCropperコンポーネントから出たエラーです。

## 原因
最新バージョンによるエラーでした。
バージョン`4.0.0`に下げることによって解消しました。

### npm

```:cmd
//最新バージョンのvue-croppperjsをアンインストール
npm uninstall --save-dev vue-cropperjs 

//4.0.0をインストール
npm install --save-dev vue-cropperjs@4.0.0
```

以上
pip エラーの対処法(Upgrade to the latest pip and try again)　

#0. はじめに
pip3のコマンドを打ったところ、以下のようなエラーが表示された。
ここでは、その対処法を記載する。

```
=============================DEBUG ASSISTANCE==========================
            If you are seeing an error here please try the following to
            successfully install cryptography:

            Upgrade to the latest pip and try again. This will fix errors for most
            users. See: https://pip.pypa.io/en/stable/installing/#upgrading-pip
            =============================DEBUG ASSISTANCE==========================

    Traceback (most recent call last):
      File "<string>", line 1, in <module>
      File "/tmp/pip-build-l92ccydt/cryptography/setup.py", line 14, in <module>
        from setuptools_rust import RustExtension
    ModuleNotFoundError: No module named 'setuptools_rust'

    ----------------------------------------
Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-build-l92ccydt/cryptography/

```

#1. pip をアップグレードする

```
$sudo rpm -Uvh platform-python-pip-9.0.3-18.el8.n
oarch.rpm python3-pip-9.0.3-18.el8.noarch.rpm
Verifying...                                                            ( 50%################################# [100%]
Preparing...                                                            ( 25%################################# [100%]
Updating / installing...
   1:platform-python-pip-9.0.3-18.el8                                   (  2%################################# [ 25%]
   2:python3-pip-9.0.3-18.el8                                           (  3%################################# [ 50%]
Cleaning up / removing...
   3:python3-pip-9.0.3-15.el8                                           ( 10%################################# [ 75%]
   4:platform-python-pip-9.0.3-15.el8                                   (  2%################################# [100%]
```
#2. python3-cryptography を再インストールする

```
$ sudo rpm -ivh --replacepkgs python3-cryptography-2.3-3.el8.x86_64.rpm
Verifying...                                                            (100%################################# [100%]
Preparing...                                                            (100%################################# [100%]
Updating / installing...
   1:python3-cryptography-2.3-3.el8                                     (  1%################################# [100%]
```
python 数値と文字列の変換

##初めに
初学者の為、間違った表現などしてたらご指摘お願いします。
### 数値と文字列の変換

いきなりですが以下のコードをみていきます。

```python
num = input('金額を入力してください')
print(num * 1.10)
```
上記のコードでは`input関数`を使用して文字列を取得。取得した文字列を演算子を使用して数値1.10を掛けています。
しかし上記のコードでは`エラー`が起きてしまいます。
`プログラミングでは文字列と数値など別々の型(Type)では計算することができないからです。`
では、どうやって計算するかというと、上記の場合だと`文字列を数値に変換することが必要になってきます。`
ちなみに、数値や文字列などのデータの種類のことを`データの型(Type)`と呼びます。
文字列だとstr(stringの略)、数値だとint(integer)と言います。他にもデータの型がありますがここでは割愛します。

###文字列の変換
先ほどのコードでは`input関数`で文字列を取得しています。その文字列を`整数に変換`してから計算します。
この変換には`int関数`を使用します。

```python
num = input('金額を入力してください')
print( int(num) * 1.10)
```
先ほどのコードにint関数を付け加えました。
上記のコードを丁寧に略してみると、
1行目`文字列「金額を入力してください」を表示させます。文字列を入力させ変数numと紐付けろ`
2行目`変数numを整数化して数値1.10を掛けた数値を表示せよ`

上記のように違った型では計算することができません。よって同じ型に統一する必要があります。
S3 CLIと標準入出力

#はじめに
これまで、S3にデータを入れるときは手元でCSV等を作ってアップロードしたり、逆にS3内のデータを参照するときにはダウンロードしてから参照していたりしていました。
が、（今更ですが）最近になって標準入出力でやりとりできることを知ったので自分用のメモとして残すための記事です。

#標準出力への出力
標準出力へ出力できるとパイプが使えるので、色々便利ですよね。

```
aws s3 cp s3://xxx-bucket/test.csv -
```

圧縮ファイルもzcatで。

```
aws s3 cp s3://xxx-bucket/test.csv.gz - | zcat
```
ただ、--recursiveを指定して複数ファイルを標準出力に出すことはできないようです。

#標準入力からS3へデータ作成
S3のオブジェクトがこれで作れると知ったときはちょっとした驚きでした。

```
echo hogehoge | aws s3 - cp s3://xxx-bucket/test2.csv
```
JSX.IntrinsicElements["input"]をstyled-componentsにスプレッド構文で展開したときのエラー

inputのpropsを整理していたらエラーが出たので、その解決方法を残しておきます。

## 前提
* inputのprops typeをJSX.IntrinsicElements["input"]をベースに定義
* styled-componentsを使用

```typescript
import React from "react";
import styled from "styled-components";

type InputProps = JSX.IntrinsicElements["input"];
type Props = InputProps & {
  labelName: string;
};

export const AddInput: React.VFC<Props> = ({ labelName, ...inputProps }) => {
    return (
      <label>
        <span>{labelName}</span>
        <SInput {...inputProps} />
      </label>
    );
 };

const SInput = styled.input`
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 5px;
`;
```

## 問題点
* styled-components(input)にスプレッド構文でpropsを展開したときにエラー
* styled-componentsではなく、ただのinputタグならエラー出ない

```
Types of property 'ref' are incompatible.
Type 'LegacyRef<HTMLInputElement> | undefined' is not assignable to type '((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'.  TS2769
```

## 解決方法
エラーにrefがincompatibleとあったので、typeからrefを除外したところエラーが消えました。めでたし。

```typescript
type InputProps = JSX.IntrinsicElements["input"];
//↓これでいけた
type InputProps = Omit<JSX.IntrinsicElements["input"], "ref">;
```

## 参考記事

https://github.com/ant-design/ant-design/issues/10405

https://qiita.com/Yametaro/items/814f40d08e9d30584e20
一定間隔で kubernetes Pods を更新する

## 動機

Probesやlifecycleなど、Pod終了時の挙動を確認したかった。

## 方法

### kubectl patch を使う場合

アプリケーションの振る舞いを変更する必要がないので、 *date* ラベルを更新して、 *.spec.strategy* の実行を期待する。最低待機時間は *terminationGracePeriodSeconds* + α で設定する。

```shell
$ while true; do date && kubectl patch deployment -n <namespace> <deployment_name> -p "{\"spec\":{\"template\":{\"metadata\":{\"labels\":{\"date\":\"`date +'%s'`\"}}}}}"; sleep 60;done
```

## 参考

- [Update API Objects in Place Using kubectl patch | Kubernetes](https://kubernetes.io/docs/tasks/manage-kubernetes-objects/update-api-object-kubectl-patch/)
【MySQL】外部キー制約を持っているテーブルのデータを削除する時は...

# 結論：`SET FOREIGN_KEY_CHECKS = 0`を使って制約を一時的に解除する

こんにちは！スージーです

mysqlで外部キー制約を持つテーブルのデータを削除する必要がある時に毎回調べている気がしたので備忘録として書き留めておきます

### 参考
[railsガイド](https://railsguides.jp/association_basics.html)
[MySQL 5.6 リファレンスマニュアル](MySQL 5.6 リファレンスマニュアル)

### モデルの関連付け
railsを使っているのでrailsで説明します

```ruby
# item
# 商品を管理するモデル
create_table "items", charset: "utf8mb4", force: :cascade do |t|
    t.string "item_name"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
end

# item_detail
# 商品の詳細を管理するモデル
create_table "item_details", charset: "utf8mb4", force: :cascade do |t|
    t.bigint "item_id" <=  これが外部キー
    t.integer "item_price"
    t.string "description"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
end

# item_detail
class CreateItemDetails < ActiveRecord::Migration[6.1]
  def change
    create_table :item_details do |t|
      t.references :item, foreign_key: { to_table: :items } <= これが外部キー制約
      t.integer "item_price"
      t.string "description"

      t.timestamps
    end
  end
end
```

### itemテーブルのデータを削除する
開発中に色々データを加工したり、削除したりする事があると思いますが、一回テーブルのデータを`truncate`しようかなーと思ったら怒られた

```
mysql > truncate table items;
ERROR 1701 (42000): Cannot truncate a table referenced in a foreign key constraint (`test_item_development`.`item_details`, CONSTRAINT `fk_rails_30c7a965d1` FOREIGN KEY (`item_id`) REFERENCES `test_item_development`.`items` (`id`))
```

こんな時、開発環境であれば何も考えず以下を実行して`truncate`させちゃいます

```
mysql > set foreign_key_checks = 0;
mysql > truncate table items;
=> query ok・・・・
mysql > set foreign_key_checks = 1;
```

`set foreign_key_checks = 1;`で元に戻しましょう

#### おわり
PS5の抽選販売の申し込みが始まったら通知する

今週頭にビックカメラで抽選販売の申し込みがあったようなんですが、気付いた時には〆切を過ぎていて申し込めませんでした。


そこで、[抽選販売の最新情報をまとめたページ](https://gamewith.jp/ps5/article/show/1255)が更新されたら通知するようにしよう、というお話です。


<!--
https://qiita.com/sator_imaging/items/9d070be3f455e83232a9
-->


--


※結局ソニーストアの繰り上げ当選で当たりました。


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">やったぜPS5🥰 <a href="https://t.co/0ScLHYy5ek">pic.twitter.com/0ScLHYy5ek</a></p>&mdash; サトー (@sator_imaging) <a href="https://twitter.com/sator_imaging/status/1384399340131606528?ref_src=twsrc%5Etfw">April 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



### もくじ


- [IFTTTでは無理](#iftttでは無理)
- [DOS + VBScript](#dos--vbscript)
- [おわりに](#おわりに)



## IFTTTでは無理

こういうのは IFTTT だろーと思ったんですが、無理でした。
RSSの更新チェックは出来ますが、既存のページの更新は追えず。。。


かわりに[コチラのサービス（VisualPing）](https://visualping.io/)を使おうと思ったんですが、ただでさえPS5買うために色んなショップのアカウントを作っているのにさらに増やすのか、ということで見送り。



## DOS + VBScript


困ったときはこいつらの出番ですね。PS5の抽選の通知を受け取るだけのために時間かけてもしょうがないし、自宅のPCは基本的に電源を落とさないし、ということで。

（PowerShell なら単体でダイアログを出せそうですが、あまり触る機会もなく）


--


方法は `curl` でページの HTML を取得して `<time datetime=` という文字列を探して変更があったらメッセージボックスを出すだけです。


![](https://dl.dropbox.com/s/dpuxywtt3hpk3bi/PlayStation5_LotteryNotification.png)


※ 送られてくる HTML が minified されてると上手く動かないかも

```batch
@echo off


:::  Settings  :::

set TARGET_URL="https://gamewith.jp/ps5/article/show/1255"
set TARGET_STRING="<time datetime="

set DIALOG_TITLE="PlayStation 5"
set DIALOG_MSG="Press OK to see PlayStation 5 Lottery Details."

set INTERVAL_SEC=1200



:::  Do it  :::

set UPDATED="NULL"
set LAST_UPDATED=%UPDATED%
set VBS_FILENAME=%TEMP%\%~n0_MsgBox.vbs


goto :MAIN
pause
goto :EOF



:MAIN

   for /f "delims=" %%I in ('curl %TARGET_URL% ^| find /i %TARGET_STRING%')  do  set UPDATED="%%I"
   echo.
   echo %UPDATED%

   if "" equ "%UPDATED:"=%" (
      echo Target String is not found in specified URL...
      pause
      goto :EOF
   )


   if "%LAST_UPDATED:"=%" neq "%UPDATED:"=%" (

      set LAST_UPDATED=%UPDATED%

      echo if 1 = msgbox^(%DIALOG_MSG%,vbOkCancel+vbExclamation+vbApplicationModal,%DIALOG_TITLE%^) then  > "%VBS_FILENAME%"
      echo WScript.CreateObject^("Shell.Application"^).ShellExecute^(%TARGET_URL%^)  >> "%VBS_FILENAME%"
      echo end if >> "%VBS_FILENAME%"

      "%VBS_FILENAME%"

   )


   goto :INTERVAL



:INTERVAL

   timeout %INTERVAL_SEC%  >nul
   goto :MAIN
```


`<time>` タグとかなんやねん細かいなって思ってましたが、こういう時には便利ですね。GameWith のページもこのあたりシッカリ作られていて助かります。



## おわりに

ローカルにコンテナ？を建てて似たようなものを作る → コンテナのホスティングサービスに出来たものを乗っける。

て感じで簡単にウェブサービス化できたりするんですかねー？ 気が向いたら調べたいところです。



以上です。お疲れ様でした。
【JavaScript】関数のthisキーワードについて

## この記事について
初学者の私にとって、JavaScritpのthisキーワードにかなり混乱してしまうので、
とりあえず関数を中心にthisについてまとめておく。

## Thisを関数やメソッドに使うと
### メソッド
thisが直感的にわかるメソッドの例から。
メソッドでのthisキーワードは、呼び出し元のオブジェクト(apple)を参照しますね。
なのでapple.priceである150を使用することができます。

```javascript:method
const apple = {
  price: 150,
  calcPrice: function() {
    this.price * 0.9;
  },
}

apple.calcPrice();
```

### arrow関数
独自のthisキーワードは持たないため、呼び出し元の親スコープがthisとなります。

下記の場合、appleはグローバルオブジェクトで、親がwindowになります。
thisは、windowオブジェクトのpriceプロパティを探そうとするのですが、もちろんwindowオブジェクトにpriceプロパティはないので意図する値は返ってきません。

```javascript:arrow-function
const apple = {
  price: 150,
  calcPrice: () => console.log(this.price * 0.9),
}

apple.calcPrice();
```



### 通常の関数
通常の関数内(function declarationやfunction expression)でのthisキーワードは"undefined"となります。(※strict modeの場合）

## 注意ポイント
### ①メソッドでは常に呼び出し元オブジェクトを参照する
下の例にあるように、appleのcalcPriceメソッドをbananaオブジェクトにコピーします。
bananaオブジェクトでは、calcPriceメソッドにあるthisキーワードはappleオブジェクトのpriceか、bananaオブジェクトのpriceのどちらを参照すると思いますか？？

答えはbananaオブジェクトです。常に呼び出し元オブジェクトを参照するからです。

```javascript:copy-method
//appleオブジェクト
const apple = {
  price: 150,
  calcPrice: function() {
    return this.price * 0.9;
  },
}
console.log(apple.calcPrice());  //result -> 135

//bananaオブジェクト
let banana = {
  price: 200,
}

banana.calcPrice = apple.calcPrice;  // apple.calcPriceメソッドをbananaオブジェクトにコピー
console.log(banana.calcPrice());  //result -> 180
```

### ②メソッドの中で書かれていても関数ならundefinedとなる

下の例は、メソッドの中に書かれていようが、関数なのでthisはundefinedとなり、下記は正しく動きません。

```javascript:function-inside-of-method
const apple = {
  price: 150,
  calcPrice: function() {  //calcPriceメソッド
    console.log(1000 - this.price);
    const log = function() {  //log関数
      console.log(this.price);
    }
    log();  //log関数呼び出し
  },
}
apple.calcPrice(); 
```

ただこちらは回避する方法が二つあります。
#### 解決法①：thisを別の変数に代入しておく。

```javascript:this-to-self
const apple = {
  price: 150,
  calcPrice: function() {
    console.log(1000 - this.price);
    const self = this; //thisをselfに代入する（appleオブジェクトがselfとなる）
    const log = function() { 
      console.log(self.price); //apple.priceと同じ意味になる
    }
    log();
  },
}
apple.calcPrice(); 
```

メソッドの中で、thisを別の変数に代入しておけば解決できます。
変数には慣習的にselfや_thisやthatが使われるようですね。

#### 解決法②：arrow関数を使用する

```javascript:arrow-function
const apple = {
  price: 150,
  calcPrice: function() {
    console.log(1000 - this.price);
    const log = () => { 
      console.log(this.price);
    }
    log();
  },
}
apple.calcPrice(); 
```

先程も見たようにarrow関数を使用すると、呼び出し元の親スコープがthisとなります。
log()の呼び出し元=calcPriceメソッドで、メソッドはappleオブジェクトを参照するため、thisはapple.priceとなります。

以上です。
CentOS　ポート開放に必要な知識あれこれ

#はじめに
サーバーのポートやファイアウォールに関する備忘録です。ポートを開放するまでに必要な知識をまとめました。環境はCentOSを想定していますが、違いは最後のコマンドのみです。


#サーバー関連の予備知識
・CentOSではデフォルトでfirewalldが有効になっており、基本的にポートは塞がっているため、
サービスとして運用するには、アプリケーションとポートをつないであげる必要がある。
例えば、WebサーバーのApacheなどを設定し起動した後に、firewalldの設定を行いポート80番を開放しなければならない。（正確には80番でなくても良い）


・ネットワークの情報の基礎は__プロトコル、アドレス、ポート番号__から成り、コンピュータネットワークにおいて、プロトコル、IPアドレスとポート番号は__「どのような方法」で「どこ」の「何号室」に通信するのか__という意味になる。

・ポートは0〜65535まで存在するが、その中でも0〜1023までをウェルノウンポート番号（「予約されている番号」の意）という。代表的なポートをあげていく。

| プロトコル名 | ポート番号 | 概要 |
| :--: | :--: | :--: |
| FTP | 20 | ファイル転送に利用。データ転送用。 |
| SSH | 22 | ネットワークに接続された機器を遠隔操作する。 |
| SMTP | 25 | 電子メールを送信するために利用。 |
| DNS | 53 | IPアドレスとFQDNを紐付けて名前解決するために利用。 |
| HTTP | 80 | Webサーバーとクライアント(ブラウザ)の通信に利用。 |
| POP3 | 110 | メールサーバーからメールを受信するのに利用。 |
| IMAP | 143 | メールサーバー上のメールを操作するのに利用。<br>POPとの違いは、端末にメールをダウンロードしない。 |
| HTTPS| 443 | HTTPの通信間をSSL/TLSで暗号化し<br>セキュアになったHTTP通信。 |


#TCPプロトコル,UDPプロトコル

TCPとUDPはともにクライアントとサーバ間での通信チャネル(ポート)の提供、通信管理を行う、レイヤー4のプロトコルである。

| TCP | UDP |
| :---: | :---: |
| コネクション型通信 | コネクションレス型通信|
| 転送速度が遅い | 転送速度が速い |
| 信頼性が高い | 信頼生が低い |

##TCPプロトコル
・送ったデータが相手に届いたか、その都度確認しながら通信するやり方。
・コネクション型を採用した上位プロトコル(第4層)を識別する__3wayハンドシェイクによる通信前の打診を行うため、信頼性が高い。__
・Web通信、メール通信、ファイル転送などの信頼性が求められる通信に向いている。

##UDPプロトコル
・送ったデータが相手に届いたか確認しないで通信するやり方。
・コネクションレス型を採用した上位プロトコル(第4層)を識別し転送速度が速い通信を提供するプロトコル。
・コネクションレス型通信とは、__通信前に相手との応答確認を行わずに通信を開始する方法__。
・音声や動画などのリアルタイムアプリケーションや,DNSなどに向いている。



#ファイアウォール(Firewall)とは
>企業などの内部ネットワークをインターネットを通して侵入してくる不正なアクセスから守るための“防火壁”。WANの発展により、企業内のネットワークをWebに接続することが当たり前になった結果、__Ｗeb経由で内部ネットワークに侵入できるようになり、内部データの盗聴、改ざん、攻撃などが行われる可能性が大きくなった。__そのため、高度なセキュリティシステムの構築が必要となり、ファイアウォールが誕生した。
https://www.hs-juniperproducts.jp/check/firewall.html

##ファイアウォールの仕組み

###パケットフィルタリング型
事前に通信を許可する送信元情報(IPアドレスやポート)、宛先情報をルールとして設定することで、ルールに反する通信を遮断する。

* 事前に設定したルールに合致するものは全て通信を許可
* 事前に設定したルールに合致しないものは全て通信を破棄

###アプリケーションゲートウェイ型
新しいタイプのファイアウォール。従来の方法は通信先を指定することで、不審なアクセスをシャットアウトする。最近問題になっている「なりすまし」型の不正アクセウスには効果は強くない。一方、アプリケーションデートウェイ型は__それぞれのアクセスの詳細をチェックして、セキュリティの是非を判断する__ので、従来のものよりネット速度が少し落ちるが、「なりすまし」には効果的。

###サーキットレベルゲートウェイ型
従来のパケットフィルタリング型の動作に加えて、通信を許可するポート指定や制御を行うタイプ。__使用するアプリケーションごとに設定が可能なため。特定のシステムやソフトにだけ通信を制御するという使い方もできる。__

#firewalldのhttpポートを開ける

 ```
# firewall-cmd --zone=public --add-service=http
 ``` 

このコマンドによって一時的にWebサーバーのTCP、80番が解放される。
 
```
# firewall-cmd --zone=public --add-service=http --permanent
```

一時的でなく、恒久的な設定はこのコマンド

```
# firewall-cmd --reload
```

設定を反映させるためにリロードする。これで80ポートはファイアウォールを突破！

#firewalldのhttpポートを開ける（ポートを直接開く）
httpなどのようにサービス単位ではなく、ポートを直接開く方法もある。


```
// TCP:443の時
# firewall-cmd --zone=public --add-port=443/tcp
# firewall-cmd --zone=public --add-port=443/tcp --permanent
# firewall-cmd --reload
```
これで443ポートはファイアウォールを突破！
OPTEXで猫センサ

猫を何匹か飼っているんですが、外から帰ってくると窓をカリカリして入りたいことを知らせる奴も居れば、窓の外で黙ってじ～っと待ってる奴も居る･･･待ってる奴が気の毒じゃ！
ってわけで、猫が窓の外に来たらブザーを鳴らす猫センサを作ってみました。

[**こちらに引っ越しました**](https://yokaton.com/mcu-rl78-optex/)
【メモ】Tweepyのログインの流れ

Jsonファイルを読み込む（try文）

Jsonファイルが読み込めなかった場合、TwitterAPIのログイン認証をさせる（except文）

認証できたら、Jsonファイルにトークンを書き込む（except文内のtry文）

（except文を脱出し、）再びJsonファイルを読み込み、（try文）
ログインできたらPrintやらで表示させる

ログインできなかった場合、トークンが間違っていますと表示させる（except文）

構文


try:
  Json読み込み処理
except:
  try:
    APIログイン処理
    Json保存処理
try:
  Json再読み込み処理
  キーをセット
  ログイン完了と表示
except:
  ログイン出来ませんでしたと表示

すごく分かりにくいですがそこは許してやってください（笑）
機械学習でビットコインを予測してみた(半分成功・・・？)

#はじめに
機械学習で一儲けしようと企み、機械学習でビットコインを予測してみました。
かなりぼやかして記事を書いてます。
#開発環境
google colab
※日本でもproが使えるようになった
#ヒストリカルデータの取得
CryptowatchAPIを使って、BTC/JPYの4時間足を取得
最大6000件程度までしか取得できない
扱いやすいように日付を日本時間に変換
![70f3971549a4650e8cb388c55b2bebbf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96533/207d9e84-0228-9805-ec05-8a4be00c7ea0.png)
#目的変数の追加
一つ前の終値が現在の終値を
抜けた = 1
抜けてない = 0
#説明変数の追加(抜粋)
・曜日
・時
・RSI
・出来高
合計2000ほど
#前処理
kerasを使用するので標準化した
説明変数が多いので、必要性が低いものを削除
時系列データなので、データ分割時にシャッフルしないように注意
#モデル作成
kerasを使用、パラメータはhyperasに任せた
#予測結果
GCPのCloud Functionsで運用してるので、そこの履歴
精度はだいたい80%くらい
[1][1]～となってるのは直近30件まで予測結果を表示
![43619d62f241548439fc0bfce46b9635.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96533/feff028f-86f4-a188-cb8a-1a24dd3682a8.png)
#バックテスト
Backtesting.pyを使用
予測通りに売買しただけのもの
![3bc0caf2586183117037130ed72ed520.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96533/790ff7da-5acc-f91e-55f0-859d6ce9ba57.png)
グラフ
ドローダウンは結構でかい
![78e2ccfe4ead77efcdc17b401e21fa51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96533/8ebf1a36-cffc-d00a-6c5d-964759109720.png)
# あとがき
運用して半月だが今の所プラス
4時間足だけじゃなくてもっと短い足も活用したら、いわゆるうねり取りが可能になると思う。

開示しないだけで、ここまで行ける人は結構多いと思う。
でもみんな真似されたくないから出し惜しみしてると予想。

機械学習×トレードはやっぱり夢がある。
もっと頑張ろう。

質問があれば言える範囲で答えます。
[Django]InstagramのAPIを使用しPythonで情報を取得する

##はじめに
pythonでInstagramのAPIを使ってユーザー情報を取得しました。現在公開されている情報が少ないと感じたので備忘録として残しておきます。
アクセストークンを利用するための認証コードの取得からアクセストークンの取得とユーザーの情報の取得までを行います。

前提としてfacebook for developersでアプリの設定を終えている状態とします。
また今回はInstagram Basic Displayを使います。設定の詳しいやり方は以下を参照してください

https://qiita.com/lugaojian/items/3c3cb8240999d9bbfa05

##環境
Django 3.1
Python 3.9.2
facebook for developers設定済
Instagram Basic Display設定済

##認証コードの取得

まず`pip install`で`instagram-basic-display`をインポートします

```
$ pip3 install instagram-basic-display
```


```
$ python manage.py shell
>>> from instagram_basic_display.InstagramBasicDisplay import InstagramBasicDisplay

>>> instagram_basic_display = InstagramBasicDisplay(app_id ='InstagramアプリID', app_secret='Instagram App Secret',redirect_url='設定したリダイレクトURL')
# redirect_urlはhttpで設定できないのでhttpsにすること

>>> print(instagram_basic_display.get_login_url())
https://api.instagram.com/oauth/authorize?client_id=11111111111111&redirect_uri=https://hogehoge.com%2F&scope=user_profile%2Cuser_media&response_type=code
# printしたURLをクリック

```
URLをクリックすると以下の画面に飛ぶので`Allow`をクリックしてください

![スクリーンショット 2021-04-17 14.59.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/991598/d1919454-0a12-08ba-249b-74b958ed09fd.png)

成功すると、前のステップで指定したリダイレクトURLにリダイレクトされ、URLに認証コードが付加されます。

```

https://hogehoge.com?code=NOFDNAON3DKMFDMDOKFDMOLFKMDFK
　　　　　　　　　　　　#　↑code=から右の部分が認証コードになる（１時間だけ有効）
```

こちらの取得した認証コードをコピーしてください

##アクセストークンを取得
先ほど取得した認証コードを使ってアクセストークンを取得します

```
>>> auth_token = instagram_basic_display.get_o_auth_token('取得した認証コード')

>>> auth_token
{'access_token': 'アクセストークン', 'user_id': 'ユーザーID'}

```

##ユーザー情報の取得
アクセストークンを利用しユーザー情報も取得していきます

```
>>> instagram_basic_display.set_access_token('取得したアクセストークン')

>>> profile = instagram_basic_display.get_user_profile()

>>> profile
{'account_type': 'PERSONAL', 'id': '1111111111111', 'media_count': 1, 'username': 'hogehoge'}
```

これでユーザー情報を取得することができます。

##参考

https://developers.facebook.com/docs/instagram-basic-display-api/getting-started

https://pypi.org/project/instagram-basic-display/
Azure従量課金プランでGから始まる請求書ID

Azure従量課金プランの請求書IDは通常 [Exxxxxxxxx] の形式となります。
あるタイミングから [Gxxxxxxxxx] の請求書IDが表示されるようになりました。
これがなんの請求なのか最初分からなかったので書き残したいと思います。

# Gから始まる請求書ID
Azure Reserved InstanceもしくはMicrosoft以外のAzure Marketplace製品を購入した場合は、請求書が分かれるようです。

# 注意点
## Gから始まる請求書はメール受信設定できない
* Azureの請求書はメール連携している方多いのではないかと思います。
* Azure Portalの[コストの管理と請求]から設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180335/7b769924-fd3f-f6f2-464a-b36b355976cd.png)

* しかしこのGから始まる請求書はメール受信の対象外となっています。毎回Portalにログインしてダウンロードする必要があります。請求書のダウンロード忘れがあるので、メール受信は今後是非実装頂きたい機能です。

## 請求書からはMarketplaceで何を購入したかの特定はできない
* 複数人でサブスクリプションを使っている場合、どのリソースが請求対象か分からない場合があるかと思いますが、請求書から対象リソースを特定することはできません。
* ただし発行元（社名）は分かるので、発行元名称をMarketplaceで検索することである程度絞り込むことはできます。
【Java】public static void mainとは

#初めに
Javaを勉強すると最初にぶつかる壁といえば、Public static void main(String[]args) でしょうか。
私自身Java学習を開始して間もないですが、意味が分からず苦戦しています。
そこで、この構文の意味を調べてみました。
他の初学者様の参考になればと思います。

##main メソッドについて
初めに、Public static void main(String[]args)の"main"に関してです。
これはメソッド名を示します。
そして、mainと名付けられたメソッドには初期設定として2つの役割が与えられます。
1つ目の役割は、コマンドライン(黒い画面)でプログラムを起動したタイミングで自動的に実行されるという事。
2つ目の役割を、他クラス(設計図)を使いオブジェクトの作成や操作を行うという事。
以上2つの役割を頭の隅に入れながら以下の説明を読んでいただけたらと思います。

##staticについて

インスタンス化(クラスと呼ばれる設計図を参考に、データを作る事)をしなくても、
使える事を意味します。
プログラム実行のタイミングで起動する役割がありますので、データを作る前に実行
しなくてはいけないわけです。

##voidについて

戻り値が無いことを意味します。
戻り値とは、呼び出し先に渡す処理結果の事です。
mainメソッドは他クラスを利用する事はあっても、利用されることはありません。
何故なら自動的に実行されるからです。
したがって、呼び出し先に値を渡す事態は起きず、戻り値は不要となります。

##String[]argsについて

コマンドライン引数と呼ばれる引数です。
コマンドラインから渡す引数であり、文字列が打たれる事が想定されています。
なのでデータ型(データを入れる箱の種類)はString[]と呼ばれる文字列を保存するものになっています。
では、何故コマンドライン引数で値を渡す必要があるのか。
それはmainメソッドが一番最初に自動実行されるからです。
他クラスで引数を指定してメソッドを実行する事が出来ません。
そこで、コマンドラインでプログラム実行命令と一緒に引数も指定する必要が出てきました。
これがコマンドライン引数とString[]が使用される理由です。
※argに関しては慣例で使用されているだけなので、別の文字でも構いません。

#最後に
初めての投稿になりますが、初学者さんの手助けになれば幸いです。
私自身Javaの学習を開始して日が浅いので間違いなどあればご指導お願い致します。
Node.jsにてShift_JISをUTF-8へ変換する

#目的
shift_jisの文字列をNode.jsを使って、utf-8に変換する。
需要があるのかわからないが、良い記事がなかったので、参考になれば。

#shift_jisの変換ついて

##例：山田(%8ER%93c) 
###それぞれの文字コードを確認して、どうなればよいのか見当
山 -> [8E52](shift_jis) -> 1000 1110 0101 0010 
田 -> [9363](shift_jis) -> 1001 0011 0110 0011

shift_jisを扱う際には1byte単位の数値になるので、[142,82,147,99]になるはず。


##ソースコード
```
var iconv=require('iconv-lite');
var encode=require('encoding-japanese')
const query="%8ER%93c";//変換したい文字列
converted=conv(query);
// [ 142, 82, 147, 99 ]
console.log(iconv.decode(converted,'sjis'))
// 山田

function conv(parseStr){
  let convertedArray=[];
  // %を切り出す。
  // parseStr.split('%')
  // [ '', '8ER', '93c' ]

  // 最初の要素が空なので、splice(1)でそれ以降を取得する。
  let shiftJisWords=parseStr.split('%').slice(1);
  
  // 配列ごとに処理を行う。
  shiftJisWords.forEach(element => {
    // 1バイト目[0~1]を16進変換
    byte1=parseInt(element.substring(0,1)+element.substring(1,2),16)
    // 2バイト目[2]はshift_jisでエンコードする。
    // 配列になるので、[0]を指定する。
    byte2=iconv.encode(element[2],'sjis')[0];

    // shift_jisなのか判定する。
    if(encode.detect(Buffer.from([byte1,byte2]))==='SJIS'){
      convertedArray.push(byte1);
      convertedArray.push(byte2);
    }else{
      // shift_jisではないパターン
      console.log("error")
    }
    
  });
  return convertedArray;
  // [ 142, 82, 147, 99 ]をリターンする。
}
```



###補足メモ
###iconv-liteパッケージ

```
var iconv=require('iconv-lite');
str=iconv.encode('山田','sjis');
console.log(str)
// <Buffer 8e 52 93 63>
```
[8e 52 93 63]は、山田のshift_jisの文字コードであるため、正常にエンコードできている。

###8ERの「R」の扱いかた。
```
console.log(iconv.encode('R','sjis'));
//  <Buffer 52>
```
こうすればRをエンコードすることができる。

```
buff52=iconv.decode(Buffer.from([0x52]),'utf-8');
console.log(buff52)
// R （配列を与えても問題なし。）
```

```
var iconv=require('iconv-lite');
str=iconv.decode(Buffer.from([0x8E,0x52]),'sjis');
console.log(str)
// 山
```
###Buffer.from([0x...])で指定するのは面倒なので、配列で渡すのがよいため、変換方法のメモ

```
console.log(parseInt('8E',16))
// 142
```

```
parseInst
str=iconv.decode([142,82],'sjis');
// 山
```

###判定に使える

```
var encode=require('encoding-japanese')
console.log(encode.detect(Buffer.from([142,82])))
// SJIS
```
#####より良い方法があれば教えて下さい。
[AWS]構築メモ

# VPC

Virtual Private Cloudの略で仮想ネットワーク内でAWSのリソースを動作させられる。

[AWSのVPCって何？メリットや使えるシーンなど徹底解説！](https://techplay.jp/column/541)

## サブネット
インターネットゲートウェイが設定されており、外部からのアクセスが可能かどうかでパブリックとプライベートが決定する。

プライベート: データベース
パブリック　: アプリ

0.0.0.0/0 : 全ての送信先  →　パブリックサブネット
0.0.0.0/0 以外 　　　　　　→　プライベートサブネット

[【AWS】パブリックサブネットとプライベートサブネットの違いとは](https://qiita.com/hesma2/items/29db7ccb8678a84d267a) 

##Elastic IP

EC2の停止と起動の際に毎回パブリックIPアドレスが変更されてしまいログインすることができない。そこでElasticIPではIPアドレスを作成してEC2に紐付けることでIPアドレスの変更するのを防ぐことが出来る。

## インターネットゲートウェイ
インターネットゲートウェイとは簡単に言うとvpcの外部からのアクセスを可能にするもので

## VPCの削除

削除の際にエラーが出たとき

[【AWS VPC】依存関係エラーが発生した場合のデタッチ・削除の仕方](https://qiita.com/blackpeach7/items/461cbf2175a82520e03d)　　　　

##EC2
Amazon Elastic Compute Cloudのことで、awsのか総サーバーサイド。
osやcpuやssd,nicが対応している。

os : ami
cpu : インスタンスタイプ
ssd : ebs
nic : 

### ami

いろんなosが借りられるよってこと。

マーケットプレイス : あらかじめパッケージが入っているami (wordpressがインストール済みなど)




## SSHログイン

以下の手順でログインを実装することで強固なSecurityを実現。

①

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/253544de-afb1-33a4-7aeb-9c229c961120.png)

>画像は[SSH通信って、結局何してるの？](https://zenn.dev/naoki_mochizuki/articles/77b9b346a11ad9805f7e)より引用


## Rails Appのデプロイ手順

・ECSのデプロイ
[初心者でもできる！ ECS × ECR × CircleCIでRailsアプリケーションをコンテナデプロイ](https://qiita.com/saongtx7/items/f36909587014d746db73)
ApacheをPHP8.0に切り替える

## 前置き
いままでPHP7.4でコードを書いていましたが、この度、PHP8.0にマイグレーションすることにしました。
そこで、ApacheもPHP7.4からPHP8.0に切り替える必要があったので、その手順を残しておきます。

## 前提
OS：Ubuntu 20.04
既にPHP8.0がインストールされていること。

## 1. モジュールのインストール
ApacheのPHP8.0モジュールをインストールします。
aptコマンドでインストールできます。

    sudo apt install libapache2-mod-php8.0

## 2. PHP8.0モジュールの有効化
`a2enmod`コマンドでApacheモジュールの有効化が行えます。

    sudo a2enmod php8.0

## 3. PHP7.4モジュールの無効化
PHP8.0モジュールを有効化しただけでは、PHPのバージョンが競合してApacheが起動できなくなります。
なので今度は、`a2dismod`コマンドでPHP7.4モジュールを無効化します。

    sudo a2dismod php7.4

## 4. Apache再起動
最後にApacheを再起動して終わりです。PHP8.0アプリがApacheで動作するようになります。

    sudo service apache2 restart
購入したAzure予約インスタンスが他のユーザーから閲覧できない？

Azure Reserved Instanceの閲覧権限で戸惑ったので書き残しておきます。

# 事象
とあるサブスクリプションに2人のユーザーがいます。
Aユーザー、Bユーザーとしましょう。
2人のユーザー共に、サブスクリプションの所有者権限が割り当たっています。

AユーザーでAzure Reserved Instanceを購入しました。
Bユーザーでも異なるReserved Instanceを購入しました。

サブスクリプションの所有者権限を持っているため、AユーザーではBユーザーで購入したReserved Instanceが閲覧できるものと思っていましたが、自分が購入したものしか閲覧できません。
Bユーザーから見ても同様です。
これをAユーザー、Bユーザーそれぞれでお互いのReserved Instanceを閲覧できるようにしたいというのが今回の話しです。

# 原因
Reserved Instanceに関してはサブスクリプションの所有者権限を持っていてもアクセス権がデフォルトで付与されないためです。
Azure PortalからReserved InstanceのIAMを見てみると確認できます。

* Azure Portalより[予約]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180335/368857fe-6960-9ca4-5d37-ebf8519472ae.png)

* 対象の予約インスタンスを選択します。
* 左メニューより[アクセス制御(IAM)]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180335/e87e99b7-a45d-9e6e-0889-4775ce80b78f.png)

* [ロールの割り当て]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180335/237afb07-b4d5-9abc-1563-7d44a92c7a62.png)

* 購入したユーザーしかロールが割り当たっていないことが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180335/ba77bde6-af97-c6ca-09ae-118331b49d61.png)

# 対処
予約インスタンスにロールを割り当てれば他のユーザーも閲覧可能になります。

* [追加]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180335/62c48a4a-eddd-e697-a274-b3df26dc40c9.png)

* [ロールの割り当ての追加]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180335/194fd6d0-9906-4050-edb9-a33d2596ac9a.png)

* 所有者、閲覧者等の適切なロールをユーザーに付与します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180335/aeaa50ed-746a-1093-5189-d032bda6e8a6.png)

* しばらくして別ユーザーから閲覧できればOKです。

通常のAzureリソースだとサブスクリプションに権限が割り当たっていれば継承されますが、Reserved Instanceはその限りではないということですね。
JavaScript filter()の参照値でハマった話

だいぶハマったので、備忘兼ねて投稿します。

とある開発で、配列の特定の要素を変更する処理を実装する場面がありました。

JS初心者のわたしはググった結果どうやら`filter()`が使えそうだと思い、以下のうように実装しました。

```javascript
const users = [
  {
    id: 1,
    name: "sato",
  },
  {
    id: 2,
    name: "suzuki",
  },
]

const user = users.filter((user) => {
  return user.id === 1
})

user[0].name = "tanaka"

console.log(users) // [ { id: 1, name: 'tanaka' }, { id: 2, name: 'suzuki' } ]

```
おや、最初に定義した`users`が書き換わってる！

ふむ、filterは配列の参照値受け継ぐのね。了解。

しばらくして、似たような処理を実装する場面があったので、今度はこのように実装。

```javascript
const users = [
  {
    id: 1,
    name: "佐藤",
  },
  {
    id: 2,
    name: "鈴木",
  },
]

const user = users.filter((user) => {
  return user.id === 1
})

user[0] = { id: 3, name: "田中" }

console.log(users) // [ { id: 1, name: '佐藤' }, { id: 2, name: '鈴木' } ]

```

あれ？書き換わってない、、、！？

ドキュメントをよく見てみると、`filter()`は「新しい配列を生成」しているみたいです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

>filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。


今回の場合、配列の値であるオブジェクト自体は参照値を保持していたようで、元の変数が書き換わったのかなと思います。

おわり。
LINE Notify アクセストークン取得手順

LINE NotifyはWebサービス等からLineのトークルームにメッセージを通知するサービスです。
利用する為にはWebアプリケーションにアクセストークンを連携する必要があります。
アクセストークンはLineのアカウントがあれば誰でも簡単に取得することができます。

### 1.LINE Notifyのサイトでログインする
以下のサイトにアクセスし、画面右上の「[ログイン](https://notify-bot.line.me/login)」リンクからログインしましょう。
[LINE Notify](https://notify-bot.line.me/ja/)
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315984/056fc76f-fdaa-46f0-a37f-4e44ca4a22ab.png)
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315984/1238e8bc-1a15-3401-3414-451699438016.png)


### 2.マイページにアクセスする
ログイン後、画面右上にアカウント名をクリック（タップ）するとメニューが表示されますので「マイページ」を選択してください。
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315984/c415163a-717e-9bf9-7277-63c6b6bdc889.png)


### 3.アクセストークンを発行する
マイページに連携中のサービスが表示されますが、初期状態では何も連携されていません。
連携できる主なサービスにGitHub、IFTTT等が表示されていると思いますが、一覧にないWebサービスからメッセージの通知を受けたい場合はLINEユーザがアクセストークンを発行する必要があります。
「アクセストークンの発行(開発者向け)」欄の「トークンを発行する」ボタンを押下しましょう。
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315984/868b6a68-4ea8-9031-8c78-552d64c6cac4.png)


ダイアログが表示され、トークン名の入力と、トークルームの選択をします。
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315984/f48f0ec0-3172-365e-c10a-ff6e0ac4aaa4.png)

トークン名は自分だけが見えるもので、Webサービスと関係ありませんので何でも構いませんが、そのWebサービスの名前にしておくのが無難でしょう。
トークルームは自分だけが通知を受けたいのであれば「1:1でLINE Notifyから通知を受け取る」を選択してください。グループを選択するとグループに所属する全員で通知を受けることができます。
入力完了後、「発行する」ボタンを押下しましょう。
![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315984/d2023a42-8bf9-685e-1c46-8041ae30a40f.png)


### 4.アクセストークンを控える（コピーする）
発行したアクセストークンが表示されますので控えておいてください。
アクセストークンは一度しか表示されず、ダイアログを消すと二度と表示されませんので必ず記録しておいてください。
アクセストークンは長い文字列で、実はダイアログに収まっていないので全ての文字が表示されていません。「コピー」ボタンを使用してどこかに貼り付けるのが良いでしょう。
![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315984/25925cb2-56a5-8db2-377d-f0c2683503cf.png)

ここでLINEアプリの方を確認するとLINE Notifyが「友だち」に追加されています。
![008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315984/c2859f7c-06b1-cf3a-c028-9232ef1ece65.png)
手順3.でグループを選択した場合は、グループにLINE Notifyを招待してください。招待しておかないとWebサービス側でメッセージの通知に失敗します。


### 5.Webサービスにアクセストークンを連携する。
この手順はWebサービスごとに異なりますのでWebサービス側に確認してください。
うまく連携できればWebサービスからのメッセージが受け取れるでしょう。
![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315984/ba637ae2-2767-884b-85a7-e9111471317a.png)
ドラッグしてゴミ箱に捨てるやつ

画面端のゴミ箱までドラッグすると、ゴミ箱が開いてコンテンツを消せるやーつです。


```swift

    // pan ジェスチャをつける
    @IBAction func pan(_ sender: UIPanGestureRecognizer) {
        panObject(recognizer: sender)
    }

    func panObject(recognizer:UIPanGestureRecognizer) {
        switch recognizer.state {
            
        case .changed: // 移動中
            let location = recognizer.location(in: view) // 触ってる場所を取得
            
            trashLabel.center = location
            if trashView.frame.contains(location) { // もしゴミ箱と重なっていたら
                // ゴミ箱を赤くする
                trashView.image = UIImage(systemName: "trash.circle.fill")
                trashView.tintColor = .red
            } else {
                // 重なっていなかったらゴミ箱を元に戻す
                trashView.image = UIImage(systemName: "trash.circle")
                trashView.tintColor = .systemBlue
            }
        default: // 指を離した時
            let location = recognizer.location(in: view) // 触ってる場所を取得
            if trashView.frame.contains(location) { // もしゴミ箱と重なっていたら
                trashLabel.removeFromSuperview()　// ラベルを消す
            }
        }
    }
```

![Apr-17-2021 01-32-01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/67f1fb5b-3526-ba05-5d7d-d9c9f79c19bc.gif)


🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
Java開発環境で気になったところをまとめてみた

Java開発環境についてあまり知らないなと思い少しまとめてみました。

####Java開発環境を大きく分けて3つあります。
***
![ev084.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700700/c511fe7e-c158-9f7a-94b1-8c8dcfd6a5e8.jpeg)
###IDE（Intergrated Development Enviroment）：統合開発環境
現場ではこの開発ツールを利用することが一般的です。
エディタ、コンパイラ、インタプリンタなど全て内臓されたソフトウェアです。
これ1つあれば大体のことは可能だと言えます。

代表的な製品：Eclipse,NetBeansなど

###JDK（Jave Development Kit）：Java開発道具一式
Java のプログラムの開発や実行を行うためのプログラムのセットです。
JDK をインストールすることで Java を使ったアプリケーションの作成や作成したアプリケーションの実行まで
一通り行うことができます。

###JRE（Java Runtime Environment）：java実行環境
Java のプログラムを実行するためのセットです。
JRE をインストールすることで 作成したアプリケーションの実行ができるようになります。
***

####プログラムを実行するために必要4つあります。

![ev086.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700700/f4334843-64ae-4d58-20e0-a09ce3063271.jpeg)

###インタプリタ
人間語（ソースコード）を1行1行読んでを機械語（バイトコード）に変換するソフトウェアのこと。
厳密に言うとインタプリタはJVMという仕組みを内部に持っています。
###JVM（Java Virtual Machine）：Java仮想マシン
対象となるOSで実行可能な形式のコードに変換して動かすことができる。
Javaで作ったプログラムをプラットフォームに依存しないで動かすためにJVMが必要になります。

![ev085.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700700/ab00bfc7-7ce9-9c58-df38-0b797a729c28.jpeg)

###コンパイラ
人間語（ソースコード）を一気に機械語（バイトコード）に変換するソフトウェアのこと。

###javac (Java compiler)：Javaコンパイラ
コンパイルするコマンドのこと。
※コンパイル・・・人間語（ソースコード）を機械語（バイトコード）に変換する作業のこと。

###エディタ
ソースコードを書く場所のこと。

###JavaSE（Java Platform, Standard Edition）
Java の基本となる APIを まとめたもの。それ以外にJavaEE、JavaMEも存在する。

※**JavaEE**・・・JavaSE + そこにサーバーサイド機能を追加したもの。
　**JavaME**・・・JavaSE + 家電などの組み込み機器やモバイルデバイスで動作する機能を
　　　　　　　　追加したもの。

###API（Application Programming Interface）
Javaでアプリケーションを作成するために必要となる標準機能を提供するインタフェースのこと。簡単にいうとJavaの機能が簡単に使えるようになる。


また気になることがあったら更新していこうと思います。