OmniAICreator/Qiita-1.07M huggingface dataset:
transitionプロパティを理解するために基礎のbuttonを作ってみた

transitionを使ってbuttonにアニメーションをつけてみる
完成版


![スクリーンショット (99).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/6babe445-32db-2b03-625b-58164f7a0df7.png)

本当は、アニメーションも付いた画像を掲載したかったが、方法が解らなかったので画像のみ掲載しました。
掲載方法教えてあげてもいいぜ！という心お優しい方ご連絡お待ちしております



目標：transitionの基礎を理解するため
テキストエディターはVSCode.
↓下記の方のtransitionの説明を参考にしました
[@7968様] (https://qiita.com/7968/items/812d6a21fc4dd9ae9c75)
とても解りやすかったです！！


　　　
今回はcodePenで書いてみました♪ ※head部分は省略


<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="swan2pink" data-slug-hash="qBReXEr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="qBReXEr">
  <span>See the Pen <a href="https://codepen.io/swan2pink/pen/qBReXEr">
  qBReXEr</a> by トモゑ☛Web作成の37🌺 (<a href="https://codepen.io/swan2pink">@swan2pink</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


詳しくcodeを書いてみます

```css
.button {
  cursor: pointer;
  outline: none;
  font-size: 30px;
  width: 200px;
  height: 100px;
  background: pink;
  color: white;
  border-radius: 10px/10px;
  box-shadow: 10px 10px 10px #706b6b;

  transition-property: transform, background, box-shadow, color; ※
  transition-duration: 2s;　※
}

.button:hover {　※
  box-shadow: 3px 3px 3px #8a7070;
  transform: scale(.5);
  background: red;
  color: #8a7070;
}
```

``transition``は『変化前』　と　『変化後』のcodeの両方を書いてあげます
『変化前』　と　『変化後』の``中間``を補完する役割をもっています
``transition-property``　は、変化が摘要されるcssのプロパティを指定します。
今回だと、 ``transform``, ``background``, ``box-shadow``, ``color``　です。
``transition-duration: 2s;`` で、変化が始まって終わるまでの時間を指定してます

『変化後』にどうするかは ``.button:hover``で指示してます。
ちなみに、``transform: scale(.5);``　は、大きさを変形させるプロパティで、大きさ０．５倍にしています。　大きくしたい場合は ``scale(2)``とかに変更すれば良いと思います！

##まとめ
今回は、``transition``の基本について書いてみました。

引き続き応用にもチャレンジしていきたいと思います
今回は以上です！
ありがとうございます
多チャネル地震波形データ処理システム「WINシステム」のインストール（Linux 64bit）

WINシステムのページ－WINシステムのダウンロードより、パッケージをダウンロード
http://wwweic.eri.u-tokyo.ac.jp/WIN/
WIN_pkg-2.2.23.tar.gz をダウンロード

このパッケージを/usr/localにコピー
``sudo cp WIN_pkg-2.2.23.tar.gz /usr/local``

/usr/localにcdする
``cd /usr/local``

``gzip -d WIN_pkg-2.2.23.tar.gz``で解凍
``tar -xvf WIN_pkg-2.2.23.tar``で展開
/usr/localにWIN_pkg-2.2.23ディレクトリができる

①``cd WIN_pkg-2.2.23``
②``sudo ./configure --prefix=/usr/local/win > configure.error``
（makefileが自動的に作成される。メッセージをconfigure.errorに出力させて，結果を確認する。）
③``sudo make > make.error``
(これも結果make.errorを確認する）
④``sudo make install``
（インストール；/usr/local/winにインストールされる）

⑤パス通し
/usr/local/win/bin
を実行ファイル検索パスに追加（.bashrcを編集）
.bashrc　に　export PATH=/usr/local/win/bin:$PATH

参考
http://www.tamori.3zoku.com/linux/win/win_install.html
Anacondaでgccとgfortranをインストール

# はじめに
即席で gcc の実行環境を作るべく、ネットで "anaconda mingw install" と検索したところ、いくつかの記事で `conda install -c anaconda mingw` でインストールできると書いてありました。が、windows 版の [Anaconda](https://anaconda.org/) のconda 4.9.2 でやったところ、 packages not found だったのでインストール方法を探しました。
# 環境

- windows 10
- conda 4.9.2

# 結論
[msys2](https://www.msys2.org/) のものをインストールできるようになっていました。Anaconda のホームページにある msys2 の記述([gcc](https://anaconda.org/msys2/m2w64-gcc), [gfortran](https://anaconda.org/msys2/m2w64-gcc-fortran))によると

>`conda install -c msys2 m2w64-gcc`
`conda install -c msys2 m2w64-gcc-fortran`

でインストールしろと書いてありますが、自前環境(conda 4.9.2)では`conda install m2w64-gcc`で入りましたし、anaconda navigator を使っても入りました。バージョンは

- gcc 5.3.0
- gfortran 5.3.0

でした(2021年5月時点)。ライブラリについては未確認ですが、Anaconda にある [msys2のページ](https://anaconda.org/msys2) を参照すればよいかと思います。 fftw などもあるようです([リンク](https://anaconda.org/msys2/m2w64-fftw))。高度利用者がいっぱいいるのでしょうかね。

# 参考文献
[msys2](https://www.msys2.org/)
[msys2 :: Anaconda.org](https://anaconda.org/msys2)
[M2W64 Fftw :: Anaconda.org](https://anaconda.org/msys2/m2w64-fftw)
Reactとの連携　６　YahooNewsを表示してみる

以下に書き換えます。

```app/controllers/data_controller.rb
class DataController < ApplicationController
  def index
  end

  def ajax
    url = 'https://news.yahoo.co.jp/pickup/rss.xml'#1 YahooNewのURL
    uri = URI.parse(url)
    response = Net::HTTP.get_response(uri)
    render plain:Hash::from_xml(response.body).to_json
  end
end
```

・Rubyの外部サーバーにアクセスする機能「Net::HTTP(アドレス)」クラス
・URI.parseを使うと、URLの文字列をURIオブジェクトへと生成いたします。

```rb
require 'uri'
uri = URI.parse("https://www.google.co.jp/")
p uri.scheme 
p uri.host 
p uri.port 
p uri.path
```

```rb
uri.scheme => "https"
uri.host => "www.google.co.jp"
uri.port => "443"
uri.path => "/"
```

実行するとこのようになります。これはhttpの構成要素を以下のように分解して出力しています。

・ Net::HTTPResponse
指定した対象に GET リクエストを送り、そのレスポンスを Net::HTTPResponse として返します。
対象の指定方法は URI で指定するか、 (host, path, port) で指定するかのいずれかです。

|uri|データの取得対象を URI で指定します。|
|--|--|
|host|接続先のホストを文字列で指定します。|
|path|データの存在するパスを文字列で指定します。|
|port|接続するポートを整数で指定します。|
 



lcalhost:3000/data/ajaxにアクセス

![20210503-151541.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/917f1c4b-fe6c-0c24-a6eb-18b68aa9b215.png)

取得できました。
JS~クリックゲーム~

#概要
①初期
![スクリーンショット 2021-05-03 14.38.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/269bea6e-11b2-cc43-9032-e9e1e03687b4.png)

上記の画像をゲーム開始とします。

②ゲーム開始
![スクリーンショット 2021-05-03 14.37.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/7a3b8ee1-f30f-eb47-b0d2-b404a53e6e8b.png)

②のようにボタンを押すと、OKが出てくるゲームを作成しました。

なお、1回目のクリックののときにリストが削除するよう実装しました。

#①タイトル
1,HTML

```index.html
  <div class=header>
    <h1 class="title">ToDo!!</h1>
  </div>
```

2,CSS

```style.css
.title {
  padding-left:60px ;
  cursor: pointer;
 }

 .title2 {
   border-bottom:3px solid greenyellow;
   font-size: 50px;
   color: red;
   transform:rotateZ(20deg);
  }
```

3,JS

```main.js
const title = document.querySelector('.title');
console.log(title);

title.addEventListener('dblclick',()=>{
  title.classList.toggle('title2');
});
```

ダブルクリックイベント発生で、title2クラスを設定します。ただし、クラスの付け外しを行いたいのでtoggleメソッドを使用します。

#②ゲーム

1,HTML

```index.html
<button>ボタン</button>
 <ul class="ul">
   <li class="lis" >リスト</li>
 </ul>
```

2,JS

```main.js
let count = 0;
const button = document.querySelector('button');
button.addEventListener('click',() =>{
  count += 1;
  if(count === 1) {
    const ul2 = document.querySelector('.ul');
    const lis =document.querySelector('.lis')
    ul.removeChild(lis);
   }
  const makeLi = document.createElement('li');
  makeLi.textContent = 'ok';
  const ul = document.querySelector('ul');
  ul.appendChild(makeLi);
  makeLi.classList.toggle('list');
});
```

1,remove.child();
letに0を代入します。
1回目のクリックでHTMLのli要素のリストを削除します。
親要素のulを取得します。削除するクラスlisを取得します。
ul.removeChild(lis)で子ノードを削除します。

2,document.createElement();
新たに、li要素を生成していきます。
document.createElement('li')メソッドで空の要素を生成します。
空の要素にokを中身の要素に追加します。

3,appendchaild();
li要素をulの子ノードとして追加します。
ローカルのgitのデフォルトブランチをmainにしておくメモ


最近はmasterだと怒られるようになりましたね。

```bash
$ git config --global init.defaultBranch main
```

を実行しておくだけでOKです。

## 世の中的にmaster廃止でmainをデフォにする動き

GitHub上で新規リポジトリ作るとmainになってましたが、ローカルから作るとまだmasterがデフォルトになってました。

> [新しいGitHubリポジトリではmainブランチがデフォルトに](https://www.infoq.com/jp/news/2020/11/github-main-branch/)

最近CLIツールをアップデートしましたが、gitのv2.30.1で怒られました。

```bash
$ git init

hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint: 
hint:   git config --global init.defaultBranch <name>
hint: 
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint: 
hint:   git branch -m <name>
```

みたいな感じで怒られました。

ローカルで作るとmasterだしタイプぐせもついてたから気にせずgit push origin masterとか打ってしまうのでmasterにしてましたが、 **そろそろ世の中に合わせないといけないタイミングみたい**ですね。

ローカルでもmainにしていきましょう。
JavaScriptのsortとreverseで勘違いしていたこと

　ちょっと用事があって、JavaScriptをしたところ、しばらく悩んでしまいました。
　それは、**数値の降順ソート**です。
　たとえば、

```javascript:
var arr = [1, 2, 5, 4, 3];
arr.reverse();
```
で、降順ソート結果

```javascript:
5, 4, 3, 2, 1
```
を期待というか、勝手に確信してしまっていたのですが、

```javascript:
3, 4, 5, 2, 1
```
になることに気が付かず、時間を食ってしまいました。
　数値の降順ソートをするには、

```javascript:
var arr = [1, 2, 5, 4, 3];
arr.sort();
arr.reverse();
```
なんですね。

※当たり前といえば、当たり前過ぎですね。
※node.jsで試しました。
OneNote2016（デスクトップ版）でフォントが勝手に游ゴシックになる問題の回避策

# 要約
- OneNoteには、指定したはずのフォントが無視されて勝手に游ゴシックになるバグが存在します。
- Windowsのデスクトップ版のOneNote2016では、バグが直っていた時期のバージョンに戻せばこの問題を回避できました。
- マルチプラットフォーム版のOneNoteでの根本的な解決方法は、今の所なさそうです。WindowsならCtrl + Shift + N、MacならCommand + Shift + Nで書式をリセットするのが最も早いと思います。

# 勝手に游ゴシックになる問題とは
設定でフォントを指定しても…

|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567116/ef556571-7079-6fc0-42cc-f9752bb4a62d.png" width="500">|
|:--|


改行を入れたり、全角→半角に切り替えたタイミング等で勝手に游ゴシックになる問題のことです。

|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567116/ba2cbdab-1ce1-a35f-b1a1-7f85e38949c7.png" width="450">|
|:--|

OneNote2013の頃までは、フォントが勝手にVerdanaになる問題として存在していました。
そしてOneNote2016の頃に、一度は[KB4022163](https://support.microsoft.com/ja-jp/topic/onenote-2016-kb4022163-%E3%81%AE%E6%9B%B4%E6%96%B0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%92-2018-%E5%B9%B4-6-%E6%9C%88-5%E6%97%A5-a39718be-6d49-8fa2-e440-3cd1236de800
)によって以下の通り修正されました。

> この更新プログラムには、次の問題が修正されます。
> - 他の DBCS フォントを既定のフォントを変更した後、フォントは YuGothic になります。 たとえば、日本語フォントは既定のフォントを保持されず、YuGothic になります。

しかし、どうやら2021年の春ごろから（？）同じ問題が復活しています。

# バグが直っていた頃に戻すには
少し古いビルドに戻します。
（正式な修正が出るまでの一時的な回避策として、自己責任でどうぞ。）

[バージョン履歴](https://docs.microsoft.com/ja-jp/OfficeUpdates/update-history-microsoft365-apps-by-date)を見ながら、ビルド番号をメモします。
例えば、ビルド `13328.20408`に戻すのであれば、`updatetoversion=16.0.`の後ろに`13328.20408`を付けて、コマンドプロンプト（管理者として実行）で以下のように実行します。
([参考](https://answers.microsoft.com/ja-jp/msoffice/forum/msoffice_install-mso_win10-mso_365solo/office/67665e18-c4c7-4c1c-b5d1-3ff6e6cd8334))

```:管理者権限で実行
cd %programfiles%\Common Files\Microsoft Shared\ClickToRun
officec2rclient.exe /update user updatetoversion=16.0.13328.20408
```

ダウンロードとインストールが終わるまで気長に待ちます。
指定するビルドによってはダウンロードに数分かかったり30分位かかったりします。

インストールが終わったら、「ファイル」→「アカウント」から更新を無効にしてバージョンを固定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567116/9fa1ee8d-992f-5325-b58a-e46a2b10d33f.png" width="350">
色んなビルドで試してみて、自分の環境では上記の例のビルドで直りましたが、恐らく連続して適用していけばもう少し新しいビルドでも大丈夫そうでした。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567116/8d55abda-ddc6-fb8b-f919-4cf1caa4fe86.png" width="600">
正式な修正版が早く出ると良いですね！
ELBのアクセスログはデフォルト仕様じゃないんだ。。

##はじめに
ELBのアクセス数は、特に設定不要で確認ですが、アクセスログについてはデフォルトでは無効化されているため、ちょっと設定してログを取得してみました。

以下AWSドキュメントより
>アクセスログの作成は、Elastic Load Balancing のオプション機能であり、デフォルトでは無効化されています。ロードバランサーのアクセスログの作成を有効にすると、Elastic Load Balancing はログをキャプチャし、圧縮ファイルとして指定した Amazon S3 バケット内に保存します。アクセスログの作成はいつでも無効にできます。

## アクセスログを保存するS3バケットの作成
任意の名称でバケットを作成します。
![S3バケット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438093/60d59e1b-83ab-a79c-a9af-2eddd172ff81.png)
必須ではありませんが、保存先フォルダの設定することも可能です。
![S3バケットフォルダ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438093/2b51d37d-6fc7-7a10-230a-48954a7d1867.png)

## S3のバケットポリシーの設定
対象バケットのアクセス許可のタブからバケットポリシーの編集を行います。ELBを設定しているリージョンによって、アカウントIDが異なりますので、注意が必要です。
![バケットポリシー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438093/381fa2d6-3927-3ee7-367e-b299291e0e19.png)

## ELBのアクセスログの有効化
対象のELBを選択し、属性の編集から有効化を実施し、ログの保存先に作成したS3バケットを指定します。
![ELBアクセスログ有効化.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438093/440d821c-7acb-f91c-c3f1-3c4eb1213c51.png)
ちなみに、S3バケットポリシーを設定せずに有効化を実行すると**Access Denied**で怒られます。
![ELBエラー_png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438093/23deb7a5-741d-b75b-fe2a-c35f4809d4d9.png)

## アクセスログの確認
S3バケットを確認し、以下のようにアクセスログのオブジェクトが追加されていれば設定OKです。
![アクセスログ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438093/7db7dc32-f36d-3413-ec40-0ab6588d84f2.png)


##参考
https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/load-balancer-access-logs.html
cron の ログを出力する

こちらの記事を参考にしました。
[cronを実行したログを出力する設定](https://qiita.com/pyon_kiti_jp/items/31ab0840e8e67ffb2c3c)

Ubuntu 21.04 で確認しました。

```text:/etc/rsyslog.d/50-default.conf
（省略）
cron.*                          /var/log/cron.log
（省略）
```

syslog の再起動

```bash
sudo systemctl restart rsyslog
```

syslog が動いていることを確認

```text
$ sudo systemctl status syslog
● rsyslog.service - System Logging Service
     Loaded: loaded (/lib/systemd/system/rsyslog.service; enabled; vendor prese>
     Active: active (running) since Mon 2021-05-03 15:03:28 JST; 4min 51s ago
TriggeredBy: ● syslog.socket
       Docs: man:rsyslogd(8)
             man:rsyslog.conf(5)
             https://www.rsyslog.com/doc/
```

テスト用のクローン設定

```text
#
PATH=/usr/sbin:/usr/bin:/bin
#
#
2 * * * * /bin/date > /tmp/tmp501.txt
#
4 15 * * * date > /tmp/tmp502.txt
#
5 15 3 * * date > /tmp/tmp503.txt
#
```

作成されたログ

```text
$ sudo more /var/log/cron.log 
May  3 15:03:48 www2 crontab[869302]: (uchida) BEGIN EDIT (uchida)
May  3 15:03:57 www2 crontab[869302]: (uchida) REPLACE (uchida)
May  3 15:03:57 www2 crontab[869302]: (uchida) END EDIT (uchida)
May  3 15:04:01 www2 cron[1010]: (uchida) RELOAD (crontabs/uchida)
May  3 15:04:01 www2 CRON[869316]: (uchida) CMD (date > /tmp/tmp502.txt)
May  3 15:05:01 www2 CRON[869382]: (uchida) CMD (date > /tmp/tmp503.txt)
May  3 15:09:01 www2 crontab[869569]: (uchida) LIST (uchida)
May  3 15:09:01 www2 CRON[869571]: (root) CMD (  [ -x /usr/lib/php/sessionclean 
] && if [ ! -d /run/systemd/system ]; then /usr/lib/php/sessionclean; fi)
```
GoogleSearchConsoleに登録したGithubPagesのサイトマップのステータスが「取得できませんでした」とでてしまう。

# 対象読者

このような状態で
<img width="600" alt="sitemap.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/d73564e4-597a-50e5-be32-b3ae39d43d03.png">
URLが404でなく、sitemap.xmlの形式が正常であると確信しており
何でステータスが「取得できませんでした」なのかサッパリ分からない人

# ひとつの可能性

自分は一週間くらい放置すると取得できていました。
それでも取得できなければ別な理由がありそうです。

誰かが同じ問題で悩んで時間を無駄にしないようにこの記事を書きました。
以上。
JavaScript ボタン要素にonclick属性を追加する

# 追加方法

## Attributeとして追加する

`setAttribute`で追加する。

```html
<button id="button">ボタン</button>
```

```js
const button = document.getElementById('button');
button.setAttribute('onclick', 'pushButton()');
```

※**メソッド名の後の括弧を忘れないようにする**

ページ読み込み後

```html
<button id="button" onclick="pushButton()">ボタン</button>
```

## Propertyとして追加する

`onclick`プロパティに追加する。

```html
<button id="button">ボタン</button>
```

```js
const button = document.getElementById('button');
button.onclick = pushButton;
```

※**メソッド名の後の括弧は不要**

## addEventListenerで追加する

`addEventListener`第一引数には`onclick`ではなく、`click`を渡す。

```html
<button id="button">ボタン</button>
```

```js
const button = document.getElementById('button');
button.addEventListener('click', pushButton);
```

※**メソッド名の後の括弧は不要**

# コメントについて

mikawanaさんから頂いたコメントについて追記します。

## 上書きと追加

`Attribute` と `Property` によるクリックイベントの追加は、厳密には**上書き**。
例えば、以下のサンプルコード1では、ボタン押下後は**`pushButton1`メソッドは実行されず、`pushButton2`メソッドのみ実行**される。

- サンプルコード1

```js
const button = document.getElementById('button');
button.setAttribute('onclick', 'pushButton1()');
button.setAttribute('onclick', 'pushButton2()');

function pushButton1() {
  alert('クリックされました -1-');
}
function pushButton2() {
  alert('クリックされました -2-');
}
```

これは`setAtrribute` を `onclick`に変えても同様の動作をする（サンプルコード2）。

- サンプルコード2

```js
const button = document.getElementById('button');
button.onclick = pushButton1;
button.onclick = pushButton2;

function pushButton1() {
  alert('クリックされました -1-');
}
function pushButton2() {
  alert('クリックされました -2-');
}
```

これらに対して`addEventListener`ではメソッドが追加され、イベント時には**両方実行**される（サンプルコード3・画像1）。

- サンプルコード3

```js
const button = document.getElementById('button');
button.addEventListener('click', pushButton1);
button.addEventListener('click', pushButton2);

function pushButton1() {
  alert('クリックされました -1-');
}
function pushButton2() {
  alert('クリックされました -2-');
}
```

- 画像1

![2021-05-03_15h42_14.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/f706c5e4-12fb-e1c0-e4e1-be29b9b15b1f.gif)

また、サンプルコード4のように書くと、ページ読み込み後のonclick属性には`pushButton1`メソッドが入っているにも関わらず（ページ読み込み後html）、ボタン押下時に実行されるのは`pushButton2`メソッドである（画像2）。

- サンプルコード4

```js
const button = document.getElementById('button');
button.setAttribute('onclick', 'pushButton1()');
button.onclick = pushButton2;

function pushButton1() {
  alert('クリックされました -1-');
}
function pushButton2() {
  alert('クリックされました -2-');
}
```

- ページ読み込み後html

```html
<button id="button" onclick="pushButton1()">ボタン</button>
```

- 画像2

![2021-05-03_16h19_47.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/1edf197d-ab21-739d-1b6d-bcd84c0a2f45.gif)

# 参考記事

https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute

https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onclick

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

https://developer.mozilla.org/ja/docs/Web/HTML/Attributes

https://developer.mozilla.org/ja/docs/Glossary/property/JavaScript
ちょっとしたアニメーションGIFならパワーポイントで作成できる

以下の記事でLineBotの動作イメージを伝えるために、アニメーションGIFを用いました。
[テレ〇限定・今日のドラマ再放送は何やるの？LineBotを作ろうと思う](https://qiita.com/grayhamchan/items/1246c1cf32d5485552e2)

powerpointでアニメーションGIFを簡単に作れたのでここに記録します。

##今回作ったアニメーションGIFはこちら
![GIF大.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/dbd4c3e7-770e-3ae2-7e21-92fdcef28330.gif)

##PowerPointのスライドがそのままパラパラ漫画になる
パワーポイントのスライドショーがそのままアニメーションGIFになります。
操作手順は以下の通り

**1.スライドを作成します。**
![PPT.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/f7254865-a17b-9003-55a3-3f0e6a4632d4.png)

**2.[ファイル]メニューから[エクスポート]→[アニメーションGIFの作成]を選択**
![PPT2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/dd1a20de-ff5d-2ef7-e1a6-cdc157bc5f54.png)

**3.サイズなどを選択・設定します**
![PPT3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/0a9621b6-13f9-a165-d7aa-f61d72d040a9.png)

**4.選択できるのは以下の通り**
![選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/ec42a9b3-3e1f-acec-05e4-d96677062991.png)

**それぞれ出力してみたところ、以下のサイズになりました。**
特大　＝　1920*1080
大　＝　1280*720
中　＝　853*480
小　＝　427*240
【Git】コミットとは

# コミットとは
ファイルやディレクトリの追加/変更をリポジトリに記録する操作のこと

#実行したときの動き
リポジトリ内では前回コミット~現在の状態までの記録したコミット(リビジョン)が作成される
 コミットは時系列順につながった状態でリポジトリに格納される

#コミット名
コミット情報から計算された重複しない英数字40桁で命名される
 この名前を指定してリポジトリ内からコミットを指定する

#コミットのタイミング
 バグ修正
 機能追加

#コミットメッセージ#

・コミット時に入力必須
・誰が見てもわかりやすい変更内容にするよう心がける
　・例)1行目 : コミットでの変更内容の要約
　　・2行目 : 空行
　　・3行目以降 : 変更した理由

参考
https://backlog.com/ja/git-tutorial/intro/03/
【自然言語処理】BERTとStanzaのTokenizeの違い

# はじめに
自然言語処理の手法であるBERTを用いて、神奈川県高校入試の英語問題における出題予測をすることを目的とする。

前回はBERTを用いて、神奈川高校入試英語の問２適語補充の解答を予測した。

[【自然言語処理】【BERT】文章の一部を予測する](https://qiita.com/m37335/items/ae209418f88fbdc271e9)

今回は今後、長文問題の文書分類を行い、今後出題されるカテゴリの予測をしたいため、形態素解析を行うための準備を進める。
その際、BERTを用いたTokenizerと、Stanford大学の自然言語処理プラグラムのStanzaを用いて、どちらが的確にTokenに区分できているかを比較する。

# BERTとStanzaの比較

2017年から2020年度まで使用された中学校の教科書に掲載された本文をデータベース化した。学校で採択されている教科書は全部で6冊。それらに掲載された本文をセンテンスとして用いて、分析する。
全てを記載するのは難しいので、結果の一部を記載する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867981/db6352e8-e8b0-a3ad-f927-cd075c4eeef0.png)

## 違いが見られたセンテンス
全体的に両者ともに適切にTokenに分割できていました。
ただ、以下のようなセンテンスの際に違いをみることができました。

1. Good morning, Takashi.
1. But Matsue is a beautiful city.  
1. I want two lemons, three peaches, and two packs of cherries, please.
1. That’s interesting.
1. Malala said, “The pen is mightier than the sword,” because she believed in the power of education.  

## BERT
1. good	morning	,	tak	##ashi	.
1. but	mats	##ue	is	a	beautiful	city	.
1. i	want	two	lemon	##s	,	three	peach	##es	,	and	two	packs	of	cher	##ries	,	please	.
1. that	’	sin	##ter	##est	##ing	.
1. mala	##la	said	,	“	the	pen	is	might	##ier	than	the	sword	,	”	because	she	believed	in	the	power	of	education	.

名前や地名、複数形、比較による語形変化が不適切に分割されています。また、That's interestingの文ではいよいよよくわからなくなっています。

## Stanza
1. Good	morning	,	Takashi	.
1. But	Matsue	is	a	beautiful	city	.
1. I	want	two	lemons	,	three	peaches	,	and	two	packs	of	cherries	,	please	.
1. That	’s	interesting	.
1. Malala	said	,	“	The	pen	is	mightier	than	the	sword	,	”	because	she	believed	in	the	power	of	education	.

BERTのTokenizerではうまく区分できなかったところがStanzaでは適切に分割できています。
特に日本語の名前や地名は明確に違いが出ました。

## 結果
上記から、現状のTokenへの分割ではStanzaを用いた方が良さそうです。
気になるのはBERTのToken分割では比較の語形変化も分割対象になっていたことです。
おそらく、文章の特徴を抽出するのにそのような語形変化は影響が弱いということが考えられます。
その為、単語の分析や出題されている文法の分析をする際にはStanzaを用いた方が良いでしょう。
intrinsicContentSizeなるものを知った話

## きっかけ

　先日ViewをUIStackViewで並べて挙動を確認しようと思ったら思い通りに動きませんでした。UIStackViewには縦か横かの方向を決めるaxisプロパティ、どこに揃えて並べるかを決めるalignmentプロパティ、どのように並べるかを決めるdistributionプロパティがあるのですが、axis、alignmentはともかくdistributuonが少し難解。「fillとfillProportinalliyってどうちがうん？」と思いサンプルアプリを作ってみたことがきっかけになりました。

## UI部品はそれぞれ大きさを持っている

UI 部品はその中身によって大きさが異なります。UILabelであれば、中身のtextが長くなるにつれて、それを表示するためのUIViewも大きくなります。

```swift
let あ : UILabel = {
    let label = UILabel()
    label.text = "あ"
    return label
}()
let あい : UILabel = {
    let label = UILabel()
    label.text = "あい"
    return label
}()
let あいう : UILabel = {
    let label = UILabel()
    label.text = "あいう"
    return label
}()
print(あ.intrinsicContentSize)//(16.0)
print(あい.intrinsicContentSize)//(31.5,20.0)
print(あいう.intrinsicContentSize)//(47.5,20.0)
```

`あ`、`あい`、`あいう`としてUILabelを作成しそれぞれのintrinsicContentSizeを表示させると、高さは変わりませんが幅は一文字あたり約16ptずつ大きくなっていることがわかります。これらはtextという中身によって定まるもの（intrinsic: 形 固有の、本質的な）なので、UILabelのframeを大きくしても変化することはありません。

ここまで書いたことはUILabelがUIViewをサブクラスに持っていることを考えればすごく当たり前のことかもしれませんが。。。

## UIViewのintrinsicContentSizeは？

UIViewはどうなっているのでしょうか。

```swift
let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
print(view.intrinsicContentSize)//(-1.0,-1.0)
```

(-1,-1)と決まっているようです。

## intrinsicContentSizeを変更する

intrinsicContentSizeをoverrideします。

```swift
class View: UIView {
    override var intrinsicContentSize: CGSize {
        return CGSize(width: 100, height: 100)
    }
}
print(View().intrinsicContentSize)//(100.0,100.0)
```

## intrinsicContentSizeを自由に定める

initに引数を加えてintrinsicContentSizeを自由に決められるようにしてみました。

```swift
class View: UIView {
    let width: CGFloat
    let height: CGFloat
    init(frame: CGRect,size: CGSize) {
        self.width = size.width
        self.height = size.height
        super.init(frame: frame)
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override var intrinsicContentSize: CGSize {
        return CGSize(width: width, height: height)
    }
}

print(CGSize(width: 10, height: 10))//(10.0,10.0)
```

今のところは使い所が不明ですが。
javascript オブジェクトの生成

javascriptのオブジェクトの生成方法など

なんでJSってこんなやっこいんだろ・・・
最初はみんな同じようなものかと思ったんだけどね！

```javascript:
sm1={};
sm2=new Object(sm1);
sm3=new Object(); sm3.prototype=sm1;
sm4=Object.create(sm1);
sm5=function(){}
sm6=new sm5();
sm7=new Object(sm5());
sm8=new Object(new sm5());
sm9=new Object(); sm9.prototype=new sm5();
sm0=Object.create(new sm5());

console.log(Object.getPrototypeOf(sm1)); // {constructor: ƒ, __defineGetter__:...
console.log(Object.getPrototypeOf(sm2)); // {constructor: ƒ, __defineGetter__:...
console.log(Object.getPrototypeOf(sm3)); // {constructor: ƒ, __defineGetter__:...
console.log(Object.getPrototypeOf(sm4)); // {}
console.log(Object.getPrototypeOf(sm5)); // ƒ () { [native code] }
console.log(Object.getPrototypeOf(sm6)); // {constructor: ƒ}
console.log(Object.getPrototypeOf(sm7)); // {constructor: ƒ}
console.log(Object.getPrototypeOf(sm8)); // {constructor: ƒ, __defineGetter__:...
console.log(Object.getPrototypeOf(sm9)); // sm5 {}

console.log(sm1); // {} \ __proto__: \ constructor:f Object()
console.log(sm2); // {} \ __proto__: \ constructor:f Object()
console.log(sm3); // {prototype: {…}} \ prototype \ __proto__ \ constructor:f Object()
console.log(sm4); // {} \ __proto__ \ __proto__ \ constructor:f Object()
console.log(sm5); // f(){}
console.log(sm6); // sm5{} \ __proto__ \ constructor:f() || constructor:f Object()
console.log(sm7); // {} \ __proto__ \ constructor:f Object()
console.log(sm8); // {prototype: sm5} \ prototype:sm5() || constructor:f()
console.log(sm9); // {} \ __proto__ \ constructor:f Object()
console.log(sm0); // sm5{} \ __proto__ \ sm5 \ __proto__ \ constructor:f()

console.log(sm1===sm2); // true
console.log(sm1===sm3); // false
console.log(sm1===sm4); // false
console.log(sm2===sm3); // false
console.log(sm2===sm4); // false
console.log(sm3===sm4); // false
console.log(sm5===sm6); // false
console.log(sm5===sm7); // false
console.log(sm5===sm8); // false
console.log(sm5===sm9); // false
console.log(sm5===sm0); // false
console.log(sm6===sm7); // false
console.log(sm6===sm8); // false
console.log(sm6===sm9); // false
console.log(sm6===sm0); // false
console.log(sm7===sm8); // false
console.log(sm7===sm9); // false
console.log(sm7===sm0); // false
console.log(sm8===sm9); // false
console.log(sm8===sm0); // false
console.log(sm9===sm0); // false
```
超初心者がAWSについて勉強してみた①～インターネットゲートウェイ編～

##概要
アラフォーのAWS初心者が学んだことをつらつら書いていきます。

##今回の目標
インターネットゲートウェイを作成して、プライベートサブネットからインターネットゲートウェイにルーティングをする。


##教材
[AWS CloudTech](https://aws-cloud-tech.com/)で学びはじめました。
AWSを学びたい人は心者でも丁寧にまた安価(参考書1冊分+コーヒー2缶)で学べるのでお勧めです。

##前提
[サブネット編](https://qiita.com/konaga99/items/4530c4432f6963759e8b)が完了していること。

##用語集
インターネットゲートウェイ・・・VPCからインターネットに接続、インターネットからVPCに接続する出入口のこと。

ルートテーブル・・・サブネットごとにどこに接続するか経路を設定する。

##構成図
今回作成する構成図です。インターネットゲートウェイとルートテーブルに経路を追加します。

![インターネットゲートウェイ構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/280d5fa7-4c68-7a1a-68e5-b87f16812926.png)

##ルートテーブル
ルートテーブルになります。今回追加するルートテーブルは、
0.0.0.0/0 Internet Gatwayとなります。
※10.0.0.0/21 localはデフォルトで設定されており、VPC内の通信はVPC内に通信するという意味で、0.0.0.0/0 Internet Gatwayはそれ以外はインターネットゲートウェイへ通信するという意味です。

|送信先    |ターゲット                |
|----------|--------------------------|
|10.0.0.0/21 |local   |
|0.0.0.0/0|Internet gatway|

##インターネットゲートウェイ作成
![インターネットゲートウェイ選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/e61ffdc0-4b36-3793-0c49-f2366a527a0e.png)

インターネットゲートウェイ作成ボタンを押します。
![インターネットゲートウェイ作成ボタン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/b497b05f-0d7e-82cb-dad3-fab736de92fe.png)

名前タグに以下を入力してインターネットゲートウェイ作成を押します。
名前タグ・・・Internetgatway
![Internetgatway作成ボタン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/90fc8b7f-643c-f12e-654d-26131a1b3899.png)

はい。作成されました。

ただ、このままではDetachedとなっており、使用できない状態になっているので、VPCへアタッチを押します。

![インターネットゲートウェイ作成完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/e7549312-838c-7373-919e-6f837057691c.png)

対象のVPCをプルダウンから作成して、インターネットゲートウェイのアタッチを押します。

![Internetgatway作成ボタン１１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/273b9472-96c0-6676-d2a0-0d1826e2c1dd.png)

はい。これでインターネットゲートウェイのアタッチは完了しましたので、サブネットにルーティング設定を追加します。
![インターネットゲートウェイ確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/2fe6170f-0207-54db-bb6e-dcbe78a616c6.png)




##ルートテーブルの設定
VPCのダッシュボードから、サブネットを選択。その後、パブリックサブネットより、
下のルートテーブルタブに切り替えます。そして、ルートテーブル名が記載されている個所を押します。

![ルートテーブル設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/0e830c33-0d76-3c02-6fa2-509607a42d6b.png)

ルートタブのルートの編集を押します。
![ルートの編集を押す.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/4f108d69-0c77-f949-93d1-e81e53e77d17.png)

ルートの追加を押します。
![ルートの追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/3f8a37e6-e4e7-5320-76a0-1b0e32c498aa.png)

送信先・・・0.0.0.0/0
ターゲット・・・Internetgatway(※プルダウンで選択出来ます。)

ルートの保存を押します。
![Ｉnternetgeaway選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/0276e71f-8b5a-eefe-5437-81d22e3900db.png)

閉じるを押します。
![閉じるを押すインターネットゲートウェイ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/03f19f05-58d3-3634-0b23-c9d9caf869ee.png)

赤枠のように追加されていれば、問題ありません。

![IGW確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213609/0186a177-a749-7f07-12ed-3339dca98f7a.png)

はい。作成されましたね。次回はいよいよ、EC2インスタンスの作成に取り掛かります。
Julia でActor (3) リモート実行

JuliaでActorをつくる。[この記事](https://qiita.com/hidemotoNakada/items/0d558e272fec3d33377b)の続き。

今回はRemoteで実行できるようにする。Futureを返す機構を作り込むのが思いの外面倒そうだったので、とりあえず、Futureを返す機構は後回し。



## 方針
基本的にActorはJuliaのChannelで実装している。ので、ChannelをRemoteChannelにするだけでいい。

JuliaのRemoteChannelは、どこか別のノードにあるChannelへの参照。これを手元に作るには、Channelを返す関数を、関数`RemoteChannel`を使ってリモートノードで実行してやればいい。例えばリモートノード`2`のグローバル変数`cn`にChannelが格納されているなら、`rcn = RemoteChannel(()->Channel(), 2)` などとすればいい。

## 実装

以下のをMyActor2.jl とする。

``` julia
module MyActor2
export Actor, Message, start
import Distributed

abstract type Actor end
abstract type Message end

function handle(a::Actor, m::Message) println("should not be called") end

##
function taskLoop(cn::AbstractChannel, target::Actor)
    try
        while true
            msg = take!(cn)
            res = handle(target, msg)
        end
    catch e
        println(e)
    end
end
##
function createLoop(actorCons)
    cn = Channel()
    @async taskLoop(cn, actorCons())
    return cn
end

function start(actorCons, node=1) 
    Distributed.RemoteChannel(()->createLoop(actorCons), node)
end

end ## module
``` 
違いは、startで`RemoteChannel`を呼出していることぐらい。

## 利用側

使う方はこんなかんじ。まずは、`Distributed`をインポートして、`addprocs`でワーカノードを追加する。

```julia
using Distributed
addprocs(1)
```
次に先程定義した`MyActor2`を`using`で取り込む。`@everywhere`をつけないと、ワーカノードで実行されないので、必ずつけないといけない。`push!`はカレントパスのファイルをパッケージとしてロードするために必要。

```julia
@everywhere push!(LOAD_PATH, pwd())
@everywhere using MyActor2
```

自分のActorを定義する。このようにしてまとめて`@everywhere`にできる。

```julia
@everywhere begin
    mutable struct Accum <: Actor v::Int64 end
    struct Add <: Message v::Int64 end
    struct Sub <: Message v::Int64 end
    function MyActor2.handle(a::Accum, mes::Add) a.v += mes.v; println(a.v); end
    function MyActor2.handle(a::Accum, mes::Sub) a.v -= mes.v; println(a.v); end
end
```

Actorの作成は次のように行う。`Accum(0)`の生成をリモートで行うように、クロージャとして投げている。このあたりはマクロでもう少しなんとかできるだろう。第二引数の`2`でワーカ番号を指定している。

```julia
cn = start(()->Accum(0), 2)
```

メッセージの送信はローカルの場合と同じで、`put!`で行う。

```julia
put!(cn, Add(1))
```
【swift】get、setってなんのこと？

# はじめに

他の人のコード見てるときに、get setって書いてあって何やねんって思ったので、備忘録的な感じで残しておきます。
こちらのコードを見てみてください。

```swift:ex
protocol priceAndTax {
    var taxIncludedPrice: Double { get set }
}
```
パット見ただのプロパティの定義に見えますが、```{ }```という変な記述があります。
これは**コンピューテッドプロパティ**といって、値を自分で持たない変数のことで、プロトコルのプロパティはこれしか宣言できません。ちなみに、``` var num: Int = 1```のように自分で値を持つ**ストアドプロパティ**とよく比較されます。

# 解説
ここからは、このコンピューテッドプロパティの挙動をItemクラスにプロトコルを準拠させることで確認していきます。

```swift:
class Item: priceAndTax {
    
    var taxExcludedPrice: Double = 100
    
    var taxIncludedPrice: Double {
        get {
            return taxExcludedPrice * 1.08
        }
        set {
            self.taxExcludedPrice = newValue / 1.08
        }
    }
    
}
```
ItemクラスにpriceAndTaxを準拠させるとこんな感じになります。```taxExcludedPrice、taxIncludedPrice```はそれぞれ税抜価格、税込価格のことです。
```taxExcludedPrice```や```get{ },set{ }```の中身はあとから付け足しました。

そしてこのgetの部分は**ゲッター**といい、```taxIncludedPrice```の値を取得すると呼ばれます。
対してsetの部分は**セッター**といい、```taxIncludedPrice```に値を代入すると呼ばれます。

では、実際にゲッターとセッターを呼んで、具体的にその挙動を見ていきましょう。

```swift:
let snack = Item()

snack.taxIncludedPrice = 216 // taxIncludedPriceのsetが呼ばれる

print(snack.taxExcludedPrice) // taxIncludedPriceのセッターで、新しく値がセットされてるはず

print(snack.taxIncludedPrice) // taxIncludedPriceのgetが呼ばれる
```

一行ずつ解説していきます。

一行目：Itemクラスでsnackインスタンスを作成しているだけです。

二行目：```taxIncludedPrice```に値を代入しているので、setメソッドが呼ばれています。```newValue```といういきなり出てきた変数がありますが、これはセットされる新しい値が自動的に格納される変数のことで、自分で定義する必要はありません。なのでここでは```newValue```には```216```が格納されています。そして```newValue / 1.08```で216円の税抜価格、200円が```taxExcludedPrice```に格納されます。**taxIncludedPrice自体には値が格納されていない**ということに注意してください！！！

三行目：先程200が格納されたストアドプロパティにアクセスしているので、そのまま200が出力されます。

四行目：print関数で```snack.taxIncludedPrice```で```taxIncludedPrice```の値を取得しているので、getメソッドが呼ばれます。```taxExcludedPrice```には200が格納されているので、それの税込価格```216```が出力されます。ここでも。```taxIncludedPrice```自体の値を取得しているわけではないということに注意してください。

変数に値が格納されてないのに値が取得できるなんてちょっと不思議ですね〜


# 最後に
これがコンピューテッドプロパティの挙動でした。snackの値段を変更する事を考えたとき、税抜価格と税込価格両方に対してストアドを利用すると二つの変数それぞれに代入しないといけませんが、今回のようにコンピューテッドを利用すれば一行で同時に更新できるので、**一方の値を更新し忘れる**というミスが事前に防げそうですね。
<br>
<br>
<br>
## おまけ

プロトコルに定義するコンピューテッドプロパティは、getが必須でsetは任意らしいです。なのでこう書いても大丈夫です。

```swift:
protocol priceAndTax {
    var taxIncludedPrice: Double { get }
}
```
そうすると```taxIncludedPrice```はこう記述できます。


```swift:
    var taxIncludedPrice: Double {
        get {
            return taxExcludedPrice * 1.08
        }
    }
```

さらにgetのみの定義だと、getを省略して記述することも可能です。

```swift:
    var taxIncludedPrice: Double {
        return taxExcludedPrice * 1.08
    }

```

さらにさらに一行で値の返却のみをする場合、関数と同じく暗黙のreturnが利用可能なので、

```swift:
    var taxIncludedPrice: Double {
        taxExcludedPrice * 1.08
    }
```
こんなに短くなりました
## 参考文献
https://swift.codelly.dev/guide/%E5%9E%8B%E3%81%AE%E6%A7%8B%E6%88%90/%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3.html#%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%83%86%E3%83%83%E3%83%89%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3-computed-properties
JavaScript appendChild 親要素に子要素を追加する

# 要素を追加する

以下の要素に子要素を追加する。

```html
<div id="parent">親要素です</div>
```

１. 親要素のオブジェクトを取得する。

```js
const parent = document.getElementById('parent');
```

２. 子要素のオブジェクトを作成する。

```js
const child = document.createElement('div');
```

３. 親要素のオブジェクトの`appendChild`メソッドに、子要素のオブジェクトを渡す。

```js
parent.appendChild(child);
```

# 子要素の追加される場所

子要素は親要素の末尾に追加される。例えばfor文で続けて子要素を追加してみると、以下のような結果になる。

```html
<div id="parent">親要素です</div>
```

```js
const parent = document.getElementById('parent');
for (let i = 0; i < 5; i++) {
  const child = document.createElement('div');
  child.textContent = String(i) + '番目の子要素です'
  parent.appendChild(child);
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/46be0f9a-6822-f13e-a8fb-a877f2f9fb87.png)

# 参考記事

https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild
初心者の0から始めるDocker生活[Ubuntu18.04LTS, MySQL編 feat.Windows WSL2]

#はじめに
こんちゃー
前回は，Dockerで[pythonのコンテナ](https://qiita.com/rasuk/private/cd008248528278b4ec0d)を建てました．
まぁ，pythonのコンテナ建てたとこでつまんないんで，今回はUbuntuのコンテナを建てて運用していきます．

それじゃ，れっつごー

#環境
- OS: Windows10 Pro
- CPU: intel Corei9-9900k 
- GPU: Nvidia GeForce RTX 2080 Super
- RAM: 32GB

#DockerFile
DockerFileでやります．
僕はこれ以外やり方を知らないので，これでやりますが他にいい方法がありそうなので，ggってみてください．
SQLも入れてますが，後の記事で説明するので，いらん人は，消しちゃってください．

（注意）
`user`の部分は，自分なりのusernameにしてください．
このままやると，userというusernameになってしまいます．
パスワード設定で，passとなっている部分は，ubuntuのコンテナ内で使用するパスワードです．　
（後述するSQLのパスワードではありません．）


```Dockerfile
# =========

FROM ubuntu:18.04

RUN apt-get update 
RUN apt-get upgrade -y
RUN apt-get install python3 python3-pip -y
RUN apt-get install -y software-properties-common
RUN apt-get install curl emacs wget sudo -y --fix-missing

# rootだと色々と不便なので，ユーザーを作成
RUN useradd -m user
# ルート権限を付与
RUN gpasswd -a user sudo
# パスワード設定 passの部分も編集してください．
RUN echo 'user:pass' | chpasswd

WORKDIR /home/user/app
COPY --chown=user:user app/ /home/user/app

RUN pip3 install PyMySQL

#===========SSH=============
#sshは今回は使用していません．以下3行は無くても大丈夫です．
RUN apt-get install -y openssh-server
RUN mkdir /var/run/sshd

EXPOSE 22
#==========emacs==========
RUN echo "(setq make-backup-files nil)" >> ~user/.emacs
RUN echo "(set-default-coding-systems 'utf-8-unix)" >> ~user/.emacs

RUN echo "export LC_CTYPE='C.UTF-8'" >> ~user/.bashrc

RUN . ~user/.bashrc
RUN chown user:user /home/user/.emacs
#chown -R user ~/.emacs.d/
#===========sql=============
RUN apt-get install mysql-server mysql-client -y --fix-missing

RUN apt-get install --reinstall systemd -y 
RUN systemctl enable mysql
```

こんな感じですね．（[自分を沼に沈めた人のgistをいじくってます．](https://gist.github.com/yasu-kun/3f875335db993eba8bb0b6e82fc14d0f)）

#コンテナを建ててゆくぅ
なんだかんだとDockerFileができましたら，まずはイメージ（型）を作成していきましょう．

```
docker build -f ./Dockerfile -t イメージ名 .
```
で，イメージができましたら，run（コンテナ生成）していきましょ．
localhost（127.0.0.1）の後の`3306:3306`は，データの入口と出口(田口)のポートを指定しています．
このあとやるSQLいじりの時に使うので，入れといて損はないと思います．

`user`の部分を自分のusernameに変更してください．
コンテナの中でGPUを使用したい方は，3行目を使用してください．

```
docker run -itd -p 127.0.0.1:3306:3306 -u user --name コンテナ名 イメージ名
#docker上でgpu動かす
docker run -itd --gpus all -p 127.0.0.1:3306:3306 -u user --name コンテナ名 イメージ名
```


できたら，コンテナの中に入っていきましょう．


```
docker exec -i -t コンテナ名 bash
```
で入れると，OKです．

#補足
SQLをやりたい場合は，コンテナの中に入って以下の文を1行ずつ入れていきましょう．

```
#動いているか確認
sudo systemctl status mysql
```

```
#有効化
sudo systemctl enable mysql
```

```
#起動
sudo /etc/init.d/mysql start
```

```
#セキュリティの設定
sudo mysql_secure_installation
```

全部yes

```
#SQLに入る
sudo mysql -u root -p
```

```
#SQL内で設定
#ユーザー一覧の確認
SELECT user,authentication_string,plugin,host FROM mysql.user;
```

```
#rootパスワードを変更（PASSの部分を自分のパスワードに変更してください．SQLに入るときのパスワードになります）
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'PASS';
```


```
#設定の反映
FLUSH PRIVILEGES;
```

#最後に
取り急ぎ作ったんでボロがありますので，適宜検索等をしながら進めていただけると幸いです．
このままやってみて，動かない等ありましたら連絡いただけますと助かります．

次は初心者SQL編でお会いしましょう．
【Paiza】2項間漸化式 1【レベルアップ問題集】

# はじめに

IT／WEBエンジニアに特化した転職・就職・学習サイト「paiza（パイザ）」のレベルアップ問題集から１問ピックアップして、とことん噛み砕いた解説を備忘録としてまとめました。

今回は「[DPメニュー](https://paiza.jp/works/mondai/dp_primer)」から「[2項間漸化式 1](https://paiza.jp/works/mondai/dp_primer/dp_primer_recursive_formula_step0)」を解説していきます。

# 問題

整数 x, d, k が与えられます。
次のように定められた数列の k 項目の値を出力してください。

- a_1 = x
- a_n = a_{n-1} + d (n ≧ 2)

# 解説

動的計画法では、

- **部分問題** に分ける
- **DPテーブル** を作成する

ことが重要です。

## 部分問題に分ける

**部分問題** について考える際は、「最後から」手順を追っていくことがポイントとなります。今回の問題では k 項目の値、すなわち `a_k` を得ることが目的です。ここで、与えられた数列の式から `a_k` は `a_{k-1} + d` で表されることが分かります。次に `a_{k-1}` について考えると、これは `a_{k-2} + d` で表されます。このようにして考えると、`a_k` は `a_1 ~ a_{k-1}` が分かれば求められることが分かります。

## DPテーブルを作成する

先ほど、部分問題に分けて考えたことによって `a_k` は `a_1 ~ a_{k-1}` が分かれば求められることが判明しました。ということは、`a_1` から順番に計算していけばいいということになります。ここで、計算結果を収める **DPテーブル** を作成します。今回は `a_1 ~ a_k` までの計算結果を格納したいため、DPテーブルは以下のようになります。ここで、DPテーブルの最初の値 `dp[0]` は当然 `a_1` すなわち `x` となります。

~~~ :DPテーブルの作成
dp = [None] * k
dp[0] = x
~~~

また、最初の値以降は前項の値に `d` を足したものであるため、DPテーブルは以下のように更新すれば良いことが分かります。

~~~ :DPテーブルの更新
for i in range(1, k):
    dp[i] = dp[i-1] + d
~~~

こうしてDPテーブルが作成できました。

# 解答例

以上の解説を踏まえた解答コードです。
問題文では Index が 1 からスタートしていますが、Python では 0 からスタートすることに注意してください。

~~~ :解答例(Python)
# 入力値の取得
x, d, k = map(int, input().split())

# DPテーブルの初期化
dp = [None] * k
dp[0] = x

# DPテーブルの更新
for i in range(1, k):
    dp[i] = dp[i-1] + d

# 結果の表示
print(dp[k-1])
~~~
WaniCTF'21-spring watch animal Writeup


SQLインジェクションの問題
一度は心を折られたが，あきらめずにチャレンジして解いた記憶に残る問題。

## 問題文

watch animal
219pt Very hard
スーパーかわいい動物が見れるWebサービスを作ったよ。
wanictf21spring@gmail.com
のメアドの人のパスワードがフラグです。
https://watch.web.wanictf.org/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1163572/bf077e9c-de97-fd36-3df7-40780230eb8f.png)

## Solution
まずこの問題がSQLインジェクションかどうかの判断が必要。
Email address と Password の両方を試す必要があある。

SQLインジェクションが通ると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1163572/a5574366-932a-4b1c-a0df-f63f4a5e5cf5.png)
恒例のワニのイラストが見える。
ここまでくれば半分正解。


去年は，ワニのイラストにフラグが書かれていた問題があったので，一応ダウンロードして表層解析と「青い空を見上げればいつもそこに白い猫」でステガノかどうかチェックした。
ダメ。

さて，wanictf21spring@gmail.comのパスワードの取得であるが，SQLで取得している列数を確認後，unionしてみたが，htmlには表示するエリアが無い。

ブラインドですねこれは。

solver組んで実行（かんたんに悪用できるのでコードは掲載しません。）

```
$ python sqli.py
F
FL
FLA
FLAG
FLAG{
FLAG{b
FLAG{bl
FLAG{bl1
FLAG{bl1n
FLAG{bl1nd
FLAG{bl1ndS
FLAG{bl1ndSQ
FLAG{bl1ndSQL
FLAG{bl1ndSQLi
FLAG{bl1ndSQLi}
elapsed_time:58.49290919303894[sec]
```

人生２回目の競技時間内でのブラインド成功！
やったぜ！！

しかし，負荷対策なのか，えらい短いフラグでした。
勘やESPでも解けそう。　
　
　
　
作問者writeup

https://github.com/wani-hackase/wanictf21spring-writeup/tree/main/web/watch_animal
Nuxt.jsが流行っているらしいので使用してみた件

#Nuxt.jsが流行っているらしいので使用してみた件
最近でもないのかな？JS由来のフレームワークやらライブラリやらがフロントエンドの主流になってきてるらしいですね。
なので今回、自分自身学習のアウトプットも兼ねてQiitaで情報発信していこうと思います。
不慣れなところもあるとは思いますが、何卒よろしくお願いします。

##そもそもNuxt.jsってなんすか。
vue.jsの機能をふんだんに盛り込んだフレームワークという認識でいいと思います。
（SEO対策に強いとかSSRとかいろいろあるけど詳しくは公式ドキュメントを見てね）
[Nuxt.js公式サイト](https://ja.nuxtjs.org/)

##実際に動かしてみよう。
Nuxt.jsで開発を進めていくにあたってNode.js環境が必須なので、インストールがまだの方はこちらの記事を参考にされてみてください。

[本当の初心者のためのNode.js超入門　~環境構築編~](https://qiita.com/qulylean/items/0ad521885a04a5ebd202#%E5%81%B6%E6%95%B0%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%A8%E5%A5%87%E6%95%B0%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3)

インストールが終わったら、下記のコマンドをお手元のCLI（Mac:コンソール, Win:コマンドプロンプト）にて実行してみましょう。

```javascript:Iterm2
npx create-nuxt-app <namespace> //namespaceは任意の文字
```
対話形式でいろいろ聞かれます。

* プロジェクト名
* 使用する言語（TSは言語認識か微妙なところ）JS or TS
* Yarn or npm（高速なyarnが推奨！どうしてもnpmがいい人はそれでも問題はないです。）
* UIフレームワーク(個人的にはnoneでおk。後々でも追加はできます。)
* Axios(http通信)かPWA(モバイルapp)かCMS(WordPressなどをいじりたい人)か。Webappを作るならaxios推奨
* Lint tool(コードを綺麗に整形してくれる便利なやつ。ESlintで問題ない。)
* Testing frameworkの選択 無難にjestにしましょう。
* SSRかSPAか。個人的にはSSRがオヌヌメです。
* Serverかstaticか。これはserverで問題ないです。staticを作りたくなったらそれ用のコマンドがあります。

あとの項目はEnter連打で大丈夫です。


###Server Side Rendering(SSR)のメリット

- SEO対策に効果的！
- ページの表示が爆速！
- OGの設定が容易！

###Server Side Rendering(SSR)のデメリット

- サーバーへのデプロイがやや大変。(人によっては致命的)

###Single Page Application(SPA)のメリット

- 実装が容易
- サーバーの準備が比較的簡単
- ページ遷移が爆速

###Single Page Application(SPA)のデメリット

- 初期表示が遅い。。。
- OGの設定が詳細にできない。

などがありますので、これらを踏まえた上で選択してみてください。

ここまでくればやや時間を要しながら、appの作成が完了したと思います。

```javascript:iTerm2
cd <namespace> //自分のappの名前
```
でディレクトリに入り、

```javascript:iTerm2
yarn dev //npmの人は npm run dev
```

で実行します。(正式には開発モードと言ってローカルで変更した値を即時にビルドして実行してくれる便利なやつ。)
デフォルトではポート3000番が開かれてますのでwebブラウザから`localhost:3000`にアクセスしてみましょう。
![スクリーンショット 2021-05-03 12.50.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530841/1149abae-b081-6813-b129-4dda2f24f190.png)
しっかり表示されてますね。ひとまず安心。

作成したディレクトリに入ると様々なフォルダが作成されていると思います。
何が何だかわからなくて挫折してしまいそうになりますが、グッと堪えてざっくりと概要を理解していきましょう！！

##ディレクトリの紹介

* `.nuxt` 自分たちが書いたコードをえっちらおっちら実行可能なコードに直してくれているところ。
* `assets` 今後cssなどを入れるためのところ
* `components` vue.jsは基本的にコンポーネント（部品）で管理していきます。その部品を記述するところです。コンポーネント指向がいまいちわからないよ。という方向けに下に参考文献貼っておきます。
* `layouts` ページ全体の共通部分をここに記述します。（eg. header footer）
* `middleware` レンダリングされる前に実行したい関数の置き場所(認証されてないユーザーへのlogin画面へのリダイレクトなど。)
* `node_modules` 先人たちのありがたい知恵が詰まった場所。`yarn add xxx`とかするとここに入るよ。
* `pages` これが本当に便利。この中に新しくファイルを作ると、そこに勝手にパスを通してくれる。
* `plugins` 全体を通して使用したい関数などを記述する。
* `static` faviconや画像などをここに置いておく。
* `store` アプリケーションを通してのデータの保持。login情報などに主に使用される。
* `test` テストに関する記述がある。

参考文献:
 [Vuejsのちょっと便利なコンポーネント機能](https://qiita.com/myLifeAsaDog/items/233f10591be8ff42cf1d)
[【Nuxt.js】 middleware is 何？](https://qiita.com/ono-ta/items/22ae1fc6c75ba75f4029)
[Nuxt.jsのpluginsにaxiosの共通部品を実装する](https://qiita.com/msquare33/items/a8af1eaa2e30e945822c)


とまあこんな感じでゆるっと理解しておけば、いずれ役に立つかと思います。

こんな感じでどしどし開発を進めてみてください。

これから機能ごとに記事をいくつかアップしていこうと考えてます。

もしよければそちらも参考になさってください。

ご視聴ありがとうございました(_ _)
Unity WebXR を動かすまで

# UnityのWebXR ExportをFirebaseにデプロイするまで

Firefox, Chrome の最新ブラウザで、VR的なコンテンツを表示したい!と思い、
いろいろと調べたので健忘録として

## 背景

- なぜ、Nativeではないのか？
 - インストールをしたくない。アプリストア審査で時間がかかるからバグの修正が大変になる
 - Occulus Questとかでも動くかも。
  
ということですが、VRコンテンツとなると three.js などのスクリプトを駆使するのも大変なので、できるだけコンテンツ制作に近いツールを利用するようにしたいということで、Unityを選択しました。

## 準備

以下のURLにかかれている内容に沿っていきました。

- https://bibinbaleo.hatenablog.com/entry/2020/12/29/203933

今回、使用した環境は、

- Unity 2020.3.6f1

Package managerからgitでWebXR Export の後継プロジェクトを導入。Window>Package　Manager> + > git url で以下の２つのURLをコピー＆ペースト。

- https://github.com/De-Panther/unity-webxr-export.git?path=/Packages/webxr
- https://github.com/De-Panther/unity-webxr-export.git?path=/Packages/webxr-interactions

  - WebXR Interactions で Sample Scene を import
  
今回は、このサンプル Sceneを使って話をすすめます。

## Unityの設定

テンプレートの導入
- Windows > WebXR > CopyWebGLTemplates

WebXR Export を設定
- Project Setting -> XR Plugin Management > Plug-in Providers > WebXR Export をチェック

HTMLの出力に変更
- HTML5
  - Resolution and Presentation
    - WebXR2020 (Unity2020の場合)を選択

- https://gaprot.jp/2020/10/26/unity2020-webgl-01/
　により、

　- Decompression fallback を **ON** にする

を忘れないようにしておかないと、FireBaseでのリリースしたときに起動失敗のエラーが解消した

- ビルド
  - Desertのサンプルを追加してビルド。ビルド先のフォルダ名は public以外にしておく

## ローカル https の設定

出力したindex.html などのファイルは、そのままローカルのブラウザにドロップしても**動きません**。
さらに、セキュリティの関係で **https**サーバーからダウンロードしたコンテンツでないと、
**ジャイロが動きません**。そのため、ローカルで https のサーバーを立ち上げて、動作確認できるようにします。

- npm をインストール 
- http-server のインストール

```
npm install -g http-server
```

次に、httpsサーバーにするための認証鍵を生成
- Git for Windows をインストール
- bash を開いて、以下のコマンドを入力してcert.pem を生成

```
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
```

- httpsの立ち上げは、Unityから生成した index.html のある場所に cert.pemをおいて以下のコマンドでテスト


```
http-server -S -C cert.pem
```

これで、ローカルのネットワークから Androidスマホでアクセスします。右下のVRボタンを押して左右に分かれてレンダリングされればOK.

## Firebase の設定

ローカルのテストがうまくいったら、外部のホストでアクセスできるようにホスティングサービスを利用します。
https が提供されて、手軽に試せる Firebase を使います。アカウント登録した前提で、
ホスティングのサービスで外部からのテストを実施。

- 事前に、Web画面でプロジェクトを作っておきます。
- Unityで出力した一つ上のフォルダでコマンドプロンプトで移動しておきます。

Firebase　CLIの基本的な使い方は、以下を参照

- https://firebase.google.com/docs/cli?hl=ja#sign-in-test-cli

コマンドラインツールを使うため npm からインストール

```
npm install -g firebase-tools
```

ログインは、アカウント登録画面が Webで表示されます。

```
firebase login
```

プロジェクトの確認

```
firebase projects:list
```

プロジェクトの初期化

```
firebase init
```

ホスティングサービスを設定して、public が生成される。
Unityで出力したファイルを public の下にコピーする

テスト段階では、誰かに勝手に使われて料金が発生するのは大変なので、
ひとまずホスティングの停止する場合は以下のdisableを実行。再開は、またdeployすれば良い。

```
firebase hosting:disable
```

動作テストで、作成した firebaseのプロジェクト

- https://XXX.web.app

XXXは、Firebaseのプロジェクト名
コンピューターの5大装置について

<p>はじめまして、Ryogaと申します。
現在エンジニアの転職をするために、先月からプログラミングの勉強をしています。</p>
<p>自分の執筆した記事はリファレンス用のメモとして使用しますので、時々表現が曖昧な部分があるかもしれませんが、よろしくお願いします。</p>

<h1>コンピューターの５大装置について</h1>
<p>コンピュータを構成する上で欠かせない、「入力」「出力」「制御」「演算」「記憶」の機能を総称して、コンピュータの5大装置と呼びます。</p>
<p>以下の装置がコンピュータの５大装置の役割を果たします。簡潔に以下の装置の説明をしていきます。
<ol>
<li>CPU(中央処理装置)</li>
<li>主記憶装置</li>
<li>補助記憶装置</li>
<li>入力装置・出力装置</li>
</ol>


<h2>CPU(中央処理装置)</h2>
<p>５大装置のうち、制御と演算を司るのはCPU(Central Processing Unit)で、CPUは制御と演算を行なっています。</p>
<p>そのうち、制御装置の部分ではプログラムからの命令を解釈して、コンピュータの動作を制御しています。一方の演算装置の部分では、四則演算をはじめとする計算や、データの処理計算を行います。</p>
<p>CPUは補助記憶装置から主記憶装置へと読み込まれたプログラムから、命令を順番に取り出して実行され、
その時CPUが取り出した情報はレジスタと呼ばれるCPU内部の記憶装置に保持します。</p>

<h2>主記憶装置</h2>
<p>上記は「記憶」の部分を司り、主記憶装置は動作するために必要なプログラムやデータを一時的に記憶する装置です。代表的な例としてメモリがあります。</p>
<p>メモリを大まかに分類すると「RAM(Random Access Memory)」と「ROM(Read Only Memory)」となります。
「RAM」は読み書きが自由にできますが、その中身は電源を切るとその内容は失われます。この性質を「揮発性」と呼びます。</p>
<p>「ROM」は読み取り専用ですが、電源の状態に関係なく、内容が消えることはありません。これを「不揮発性」と呼びます。</p>

<h2>補助記憶装置</h2>
<p>補助記憶装置の代表的なものはハードディスクです。</p>
<p>ハードディスクは大容量で安価、かつ比較的高速という特徴を持つことから、ほぼ全てのパソコンに搭載されています。</p>
<p>内部には容量に応じてプラッタと呼ばれるものが一枚以上入っていて、その表面に磁性体が塗布または蒸着されています。この磁性体を磁気ヘッドで磁化させることによってデータの読み書きを行います。</p>

<h2>入力装置・出力装置</h2>
<p>入力の機能はキーボードやマウス・トラックパッド等の「入力装置」で行います。</p>
<p>一方でコンピュータのデータを出力するのが「出力装置」で、ディスプレイやプリンターなどが出力装置に該当します。</p>

<h1>最後に</h1>
<p>このようなコンピューターサイエンス関連の知識やプログラミングで学んだことについて、3日に一回のペースで更新していきたいと考えています。</p>
<p>Qiita以外にも、自分のツイッター(@nasii2424 )では日々の気づきや積み上げなども毎日記録していきますので、興味があったら見ていってください。</p>
Amazon Web Services 基礎からのネットワーク＆サーバー構築　まとめ（メモ）

「Amazon Web Services 基礎からのネットワーク＆サーバー構築」を読み終えたので、初めて知ったこととかをまとめ。

- リージョン
「リージョン」とは、世界各地に分散されているデータセンター群のこと

- アベイラビリティゾーン
「アベイラビリティゾーン」とは、そのリージョンをさらに分割したもの

- VPC
仮想的なネットワーク

- サブネット
VPCを分割して作ったネットワークのこと。

- EC2
仮想サーバーを構築するサービス。それぞれのサーバーのことを「インスタンス」と呼ぶ。

- ファイアウォール
「通してよいデータだけを通して、それ以外を遮断する機能」の総称。
あくまで総称で、「ファイアウォール」というサービスがあるわけではない。

- SSH
暗号や認証の技術を利用して、安全にリモートコンピュータと通信するためのプロトコル。
認証方式には公開鍵認証やパスワード認証などがある。

- Apache
オープンソースのWebサーバーソフト。
サーバーにこれをインストールするとWebサーバーとして機能させることができる。

- NAT
「片方向だけの接続を許す」といったこちらからインターネットに接続はできるが、インターネットからこちらに接続することはできないという環境を実現できる技術。
.NET Core WebAppにおけるajax通信のメモ

#概要
.NET Core WebAppにおいて、ajax通信をする際のクライアントサイド・サーバサイドのお作法を時々忘れてしまうので、
世の中には同じ方がおられるかもしれない、ということで忘備録としてまとめておきます。


##クライアントサイド
・URLについて
「/Hoge/」については、C#プロジェクトの「Pages」フォルダ直下のフォルダ名を指定します。
「/Index/」は上記フォルダ直下のファイル名を指定します。
例: 「/Pages/Hoge/Index.cshtml.cs」ファイルにリクエストする場合、リクエストURLは「/Hoge/Index/」と指定します。
その後続けて「?handler=」(決り文句)を記述し、
「GetList」はサーバサイドのメソッド名を指定します。
パラメーターを追加する場合は、「&{キー}={値}」と連ねて記述できます。

POSTの場合は、typeに「POST」を指定し、
「data: JSON.stringify(オブジェクト指定)」プロパティを追加するだけの違いです。

```javascript
$.ajax({
    type: 'GET',
    url: '/Hoge/Index/?handler=GetList&param1=1&param2=2',
    dataType: 'JSON',
    contentType: 'application/json; charset=utf-8',
    beforeSend: function (xhr) {
        xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    processData: true,
    cache: false,
}).done(function (data) {
    // OK時の処理
}).fail(function (data) {
    // NG時の処理
});
```

##サーバサイド
・メソッド名のプレフィックスに「OnGet」を書く必要があります。
ただし、クライアントサイドからリクエストする場合は、「OnGet」は省略します。
例: メソッド名が「OnGetGetList」の場合、リクエスト先URLは「GetList」となります。

・返り値の型はIActionResultになります。

```csharp
public IActionResult OnGetGetList(int param1, int param2)
{
    try
    {
    }
    catch (Exception e)
    {
    }

    return new JsonResult(json);
}
```