OmniAICreator/Qiita-1.07M huggingface dataset:
[PHP]codeIgniterのdelete機能[初心者向け]

codeIgniterの公式ドキュメントには、チュートリアルが掲載されていますが、「投稿機能」、「参照機能」の作り方しか記載されていません。WEBアプロケーションを作成する際、[CRUD](https://wa3.i-3-i.info/word123.html操作を行う必要性がありますが、)（クラッド）操作が基本となりますが、codeIgniterの公式チュートリアルでは、Delete機能（消去機能）とUpdata機能（更新機能）の作り方が記載されていません。また、codeIgniterと言うフレームワークは技術的な記事が少なく、多くのユーザーが公式ドキュメントを参照して様々な機能を作成していると思います。ただ、codeIgniterの初心者が公式ドキュメントを参考にしてDeliteとUpdate等の機能を作成するのは、かなりハードルが高いと感じました。（筆者も凄く苦労しました。）

今回は、codeIgniterの初心者である筆者が、備忘録も兼ねてDelete機能の作成方法をご説明します！

**※公式チュートリアルのアプリが作成できている前提で話を進めます！！！**

codeIgniterのversion : 3.1.※
PHP version : 7.※.※
(詳細なバージョンは教えられない為、隠します)

最初に消去ボタンをメインページ（index.php）に記入する。
（`foreach`内であれば、どこに書いても構いません）

##消去ボタンの設定
``` php:application/views/news/index.php
<?php foreach ($news as $news_item): ?>
//省略
<a href="<?php echo site_url('news/view/'.$news_item['id']); ?>">詳細</a>
//省略
<?php endforeach;
```
##ルーティングの設定
次はルーティングです。チュートリアル通りやられている方は、` $route['news/delete'] = 'news/delete'; `を`routes.php`に記入して下さい。`'news/delete'`を記入して上げないとdelete機能とviewが反応しない為、必ず記入してください。

 理由は、`['(:any)']`左記のコードを使用すると右辺に指定した場所に必ずページ遷移する設定になってしまう為、deleteのfunctionが読み込まず、deleteと機能が機能しなくなります。その為、News.phpコントローラで何かactionを付け加えたい時は、`$route['news/(:any)'] = 'news/view/$1';`より上にページ遷移先の機能名を記入して下さい。

（チュートリアルでは、`['(:any)']`このコードが使用されていますが、実際の開発では、ほぼ使用されることがないそうなので、`routes.php`に`['(:any)']`このコードが記載されていなければ、この工程は無視して構いません）

 
```php:application/config/routes.php
$route['news/create'] = 'news/create';
$route['news/delete'] = 'news/delete';
//下記コードより上に付け加える
$route['news/(:any)'] = 'news/view/$1';
$route['news'] = 'news';
$route['(:any)'] = 'pages/view/$1';
$route['default_controller'] = 'pages/view';

```
最初にdelete機能を付け加える為、コントローラーに`public function delete($id)`を記入します。その際、どの記事を消すか選択する必要がある為、引数(ひきすう)に`$id`を記入して上げます。

##コントローラーの設定
```php:application/controllers/News.php
    //省略
    public function delete($id){
      //私の場合は、delete_news($id);でモデルにアクセスしています。
        $this->news_model->delete_news($id);
        $this->load->view('news/delete');
      //上記コードはviewを表示させる為のコードです
    }
    //省略
```

## モデルの設定
モデルに、消去したい記事をid指定して消去するコードを記入する。

``` php:application/models/News_model.php　
    //上記と下記は省略
    public function delete_news($id) {
    //下記のコードは、第1引数がテーブル名、第2引数は、WHERE句(どのidか指定)です。
      $this->db->where('id', $id);
      $this->db->delete('news');
      //上記コードでデーターベースのnewsのidを消去します。（deleteとメソッドを使用する）
    }
```
##viewの設定
最後にviewを書いて終了です。

``` php:application/views/news/delete.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>

<body>
<h3>投稿を消去したぜ！！</h3>
<!-- URL ヘルパーの anchor() メソッドでリンクを作成 -->
<p><?php echo anchor('news/create', '再度投稿を行う'); ?></p>
<p><?php echo anchor('news', 'ホーム画面に戻る'); ?></p>
</body>

</html>
```

##補足
今回のやり方ですと、消去ボタンを押したらすぐに記事が消去されてしまう為、アラート機能等を入れると良いかもしれません。この記事を投稿した際の筆者の技術ではそこまでできない為、またスキルが向上した際、更新と言う形で投稿したいと思います。


# 最後に
以上で、「codeIgniterのdelete機能[初心者向け]」の説明を終わりたいと思います。codeIgniterに関しては、まだまだ勉強中の為、間違っている点が多々あるかと思います。もし問題点、修正点がございましたら、ご指摘頂けると幸いです。

最後までご覧いただき、ありがとうございました。
バッチファイルとは

callコマンドを使用することによって、

CALL [ドライブ:][パス]ファイル名 [バッチパラメーター]

自分のDドライブ直下にある、ファイルを呼び出すことができる。

CALL コマンドを使って同じバッチファイル内の、指定したラベル以降の処理を呼び出す場合には次の書式を使います。

CALL :ラベル [引数]

これを実行することによって他のbatも
Railsでいいね機能(Ajax)を実装した時の疑問について

##概要
ポートフォリオを作成していてAjaxを使ったいいねを実装している時にうまくAjaxの処理が動かず
この記事
https://qiita.com/naota7118/items/e009eff939b5a764672d#%E4%BB%8A%E5%9B%9E%E8%8B%A6%E5%8A%B4%E3%81%97%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D
を読んで解決した。
しかし、
この記事にもあるとおり

```erb
<%= button_to question_like_path(question, id: question.likes[0].id), class:"btn btn-primary like", method: :delete , remote:true do %>
```

このコードで自分のいいねを消すdestroyアクションが動く理由がわからなかった
(```id: question.likes[0].id```だとquestionに結びついたlikesの0番目のいいねを問答無用に消すから自分のいいねを消す保証は取れなくね？と思った）

頭を捻って理解したので備忘録として残しておく。

##結論
destroyアクション側で削除するいいねをcurrent_userでfind_byしているから

```ruby
  def destroy
    @like = @question.likes.find_by(user_id: current_user.id)
    @like.destroy
    #あとでAjaxを実装するまでとりあえずルート
    respond_to do |format|
      format.html { redirect_to @like.question || root_url}
      format.js
    end
  end
```

```question_like_path```はいいねを消す対象のquestionとlikeが引数として必要になるが
likeを指定しないとURLの生成ができないためlikes[0]で代用している。
しかし、消す対象のいいねのユーザーは```current_user```メソッドを使って
destroyアクションでfind_byして取得しているためここでは関係ない。

見た目に騙された。。。
Railsの動的処理を見直しておかしなHTML表示を解決

#`<%=　 %>`を`<%　 %>`に変えただけで…

【アドバイスいただいたメンターさん】
*あじー*さん(@ajiajiaji1104) 
https://twitter.com/ajiajiaji1104?s=20
【参考にさせていただいたQiita記事↓】
_テンプレートでの動的処理について_
https://qiita.com/chobi9999/items/a48e790952a0f183e91d


【動作環境】
macOS 10.15.6
Rails 6.0.3.3
Ruby 2.6.6

---
Ruby on Railsでスクール課題に取り組んでいた時のお話しです。

Railsアプリでデータベースの検索機能を実装していました。

Userモデルを作成し、カラムを「氏名(name)」「年齢(age)」として、データベースをマイグレーション。

初期データは「faker」を使用して投入し、いざ一覧表示ページを作成しました。

```index.html.erb
<%= search_form_for @q do |f| %>
  <%= f.label :name_cont, "氏名" %>
  <%= f.search_field :name_cont %>
  <%= f.label :age_eq, "年齢" %>
  <%= f.search_field :age_eq %>
  <%= f.submit "検索" %>
<% end %>

<table>
  <tbody>
    <thead>
      <tr>
        <td>名前</td>
        <td>年齢</td>
      </tr>
    </thead>
    <%= @users.each do |user| %>
    <tr>
      <td><%= user.name %></td>
      <td><%= user.age %></td>
    </tr>
    <% end %>
  </tbody>
</table>

<%= paginate @users %>
```


そしていざ、Railsサーバーを立ち上げてみると、


![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688760/94a980a8-7fb1-6910-40d0-0ea9dce5d143.png)


あら、データベースが表示されてる！？

エラーは出ておらず、画面表示だけがおかしい…。
エラー文が出ていないため、間違いの箇所が分からない…。
教材を見返しても間違いが分からない…。

私は２日悩みました。
もっとメンターに早く相談しておけば…。


解決策は、先ほどのコードの中央やや下寄りにある、


```
    <%= @users.each do |user| %>
```

を

```
    <% @users.each do |user| %>
```
に変更しただけ。

わかりますか？

コード文の始まりの`<%=` を `<%`に変えただけです。

たったこれだけで、

![スクリーンショット 2020-10-05 10.10.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688760/5badfc44-31ea-711a-8d36-e33174104004.png)

きれいに表示されました。

もっとRailsの動的処理について、きちんと理解を深める必要がありそうです。


---
最後まで読んでいただき、ありがとうございました。

よかったらTwitterもやっていますので、興味のある方はフォローお願いします。
*まるこ(@Maruko_HP)*
https://twitter.com/Maruko_HP
プログラミング学習を通じて成長する未経験エンジニアの葛藤や、絶対に諦めない前向きマインドに触れられます。

---
Google App ScriptでBigQuery使おうとしてハマったこと

https://qiita.com/satoru_mag/items/114703d7d95b60b11c6f
この方の記事を参考にやってたけど

Try using standard SQL
だの
Querying tables partitioned on a field is not supported in Legacy SQL
だのいろいろ怒られて困ってました。

標準SQLを調べて書いても全然うまくいかず、
BigQueryの方でレガシーSQLを受け付ける設定をしたりしてもだめ、
レガシーSQLじゃなくて標準SQLで書いてんだろ！と思いながらいろいろ調べてると

SQLを
```
var sql = "SELECT aaa FROM `hoge.fuga.table` WHERE ***";
```
みたいにテーブルを`で囲い


```
  var resource = {
    query : sql,
    timeoutMs: 1000000
  };

```

この部分を

```
    query : sql,
    useLegacySql: false,
    timeoutMs: 1000000
  };
```

こうしたら解決！
明示的に指定しなければいけなかったんですね。

そういえば転職してから初めての記事なので会社を宣伝しておきます！
とってもいい人たちに囲まれてリモートワークを（どっちだよ）愛知からエンジョイしています！
カジュアルに面談もやっていますのでどうぞ！
https://www.wantedly.com/companies/media-engine
パッケージについて(Javaシルバー)

# パッケージについて
## パッケージとは
クラスを整理するための仕組みのこと。  
Java言語には多くのクラスが存在する。そのため、大量のクラスを目的や機能ごとに整理しておくと、目的ごとに使いやすくなり、クラスの管理も容易になる。  

## パッケージ宣言の仕方
「package パッケージ名；」で宣言する。
（正）ソースコードの先頭行に記述する

```java:Hello.java
package jp.co.xxx;
import aaa.*;
public class Hello(){
  System.out.println("hello world!");
}
```

（誤）パッケージ宣言よりも前にimportが記述されている

```java:Hello.java
import aaa.*;
package jp.co.xxx;
public class Hello(){
  System.out.println("hello world!");
}
```

必ずソースコードの先頭行に記述しなければならない  
パッケージ宣言よりも前に記述できるのはコメントだけ

## 目的
* 名前空間を提供し、名前の衝突を避ける
* アクセス制御機能を提供する
* クラスの分類を可能にする


### 名前空間を提供し、名前の衝突を避ける
パッケージが違うと、同じクラス名のクラスでも別クラスとなる。
もし名前が同じクラスがあった際に、コンパイラやJVMはどちらのクラスを使えば良いか判断できず、コンパイルエラーや、意図したクラスが利用されない可能性がある。
その場合に名前の重複を避けるために使う。   
コンパイラやJVMはクラスを「パッケージ名.クラス名」で判断する。
そのためパッケージ名はできる限り一意であるのが望ましい。   
ちなみに「パッケージ名.クラス名」での表現を完全修飾クラス名、「クラス名」だけの省略形を単純名と呼ぶ。  

完全修飾クラス名：「java.lang.String」  
単純名　　　　　：「String」

### アクセス制御機能を提供する
クラスを複数のパッケージに分けることで、パッケージ単位でアクセス制御ができるようになる。パッケージ内のクラスを公開するクラスと公開しないクラスに分けることで、思っていたクラスと違うクラスが利用されることを防ぐ。  
**アクセス修飾子の種類**
「private」:同じクラス内からのみアクセス可能
「protected」:同じパッケージ内のクラスや違うパッケージでも、そのクラスを継承したサブクラス内からアクセス可能。
「public」:全てのクラスからアクセスできる
「なし」:同じパッケージ内のすべてのクラスからアクセス可能

<例>
jp.co.xxxパッケージに属するpublicなHelloクラスの宣言

```java:Hello.java
package jp.co.xxx;
public class Hello(){
  System.out.println("hello world!");
}
```

jp.co.xxxパッケージに属するByeクラスの宣言

```java:Bye.java
package jp.co.xxx;
class Bye(){
  System.out.println("Bye!");
}
```

publicであるHelloクラスは他のパッケージに属するクラスからも利用できるが、publicではないByeクラスは利用することができない。

### クラスの分類を可能にする

パッケージはディレクトリ構造になっている。ソースディレクトリ配下にあるディレクトリはパッケージである。  
「jp.co.xxx.Hello」クラスだったら「¥¥jp¥co¥xxx¥¥Hello.class」という感じ。
クラスは必ず何らかのパッケージに属しており、パッケージ宣言を省略したクラスはデフォルトで無名パッケージに属するものと解釈される。パッケージに属さないクラスは存在しない。
[WSL] aptでJavaを入れようとしたら404になる現象の解決法(個人的メモ)

#環境
Windows10 Education 2004 
WSL Ubuntu18.04 LTS
 
#現象

WSLのUbuntu18.04にJavaをインストールしようと以下のコマンドを実行したところ...

```
sudo apt install default-jdk
```
このような404エラーが発生しインストールに失敗する。

```
Ign:1 http://archive.ubuntu.com/ubuntu bionic-updates/main amd64 libnss3 amd64 2:3.35-2ubuntu2.11
Err:1 http://security.ubuntu.com/ubuntu bionic-updates/main amd64 libnss3 amd64 2:3.35-2ubuntu2.11
  404  Not Found [IP: 91.189.88.152 80]
E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/n/nss/libnss3_3.35-2ubuntu2.11_amd64.deb  404  Not Found [IP: 91.189.88.152 80]
E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
```

```apt-get update```や```apt-get update --fix-missing```を試せと書いてあるので試すが改善せず...
アンチウイルスソフトが原因で...という記事もあったが、特にその手のものは導入していないので関係なさそう。

#解決方法
以下のコマンドを実行しらエラーが出なくなった。

```
sudo apt-get autoclean  //これが肝っぽい
sudo apt-get update
```
どうやら使われない古いファイルが残り続けていて、それが悪さしていたとかいないとか...
```sudo apt-get autoclean```はそういった不要なファイルを削除するコマンドのようです。

#参考
https://qiita.com/kabosu3d/items/0f436ba05df8ac358245
https://qiita.com/Y_Aowashi/items/d355d90945305d925a3c
ec2-user に docker コマンド実行権限付与

## なぜやる
`VSCode` の Remote Development で EC2 にログイン後、`docker` コマンド実行できないため、 VSCode プラグインが正常動作しません。

## 事前準備
```sh:dockerなどインストール
# install docker
sudo amazon-linux-extras install -y docker

# auto start docker service
sudo systemctl enable docker
sudo systemctl start docker

# install docker-compose
sudo curl -L "https://github.com/docker/compose/releases/download/v2.2.3/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
```

## やること
```sh:Dockerグループにユーザ追加
sudo usermod -a -G docker ec2-user
```

## 最終確認
**EC2再起動後確認できます。**

```sh
docker info
```
Ruby 配列の数字の差分を計算

# はじめに
今回は配列の中の二つの数字の差分を計算をしていきます。

##例題
あなたは体調管理のために天気予報の最高気温、最低気温から 1 日の気温がいくつ変化しているかを知りたくなりました。

ある日の最高気温 t と最低気温 u がスペース区切りで入力されるので、 1 日の気温がいくつ変化しているかを出力してください。

例えば以下のように入力された場合、最高気温が 7 度、最低気温が -3 度を意味し

```
7 -3
```
温度の差は 10 なので以下のように出力してください。

```
10
```

## 訂正前
```
input_line = gets.split(' ').map(&:to_i)

#前後の配列を作る
before_after = input_line.each_cons(2)



before_after.each do |ba|
    puts (ba[1] - ba[0]).abs
end

# ↓ 同じ意味です(分解して分かりやすく修正)

before_after.each do |a, b|
    puts (b - a).abs
end
```

### 解説
```
input_line = gets.split(' ').map(&:to_i)
```
・getsメソッドで入力値を取得
・splitメソッドで配列の要素をカンマ区切りで分ける
・mapメソッドで要素を一つずつ取り出して整数に変換する


```
before_after = input_line.each_cons(2)
```
・each_cons(２) は連続した ２ 個の要素を1つずつずらしながら取得できる。

```
before_after.each do |a, b|
    puts (b - a).abs
end
```
・2つの要素を`a,b`変数に代入して差分を計算する
・adsメソッドで絶対値に変換

＊ご指摘
`each_cons(2)` は `[1, 2, 3, 4, 5]` から `[[1, 2], [2, 3], [3, 4], [4, 5]]` を求めるメソッド1なので、今回のケースではあまり有効なではない
each_slice(2) なら、例えば `7 -3 5 2` のように複数続く場合に `[[7, -3], [5, 2]] `を経て` 10 3 `を求めることができますね。


# 訂正後
```
a, b = gets.split.map &:to_i
puts (a - b).abs

# 無理矢理一行で書くなら
puts gets.split.map(&:to_i).inject(:-)
```

## 解説
```
a, b = gets.split.map &:to_i
```
・今回は二つの要素限定なので変数を`a,b`に分ける
・getsメソッドで入力値を取得
・splitメソッドで配列の要素を分ける
・mapメソッドで要素を一つずつ取り出して整数に変換する

```
puts (a - b).abs
```
`a,b`の差分を計算し、adsメソッドで絶対値に変換


# 最後に
この記述で計算はできたのですが最後がいまいち理解できなかったのでご教授いただければ幸いです。

今回もご教授いただいてありがとうございます。
発信することでいろんな発見やご指摘してくださるのでとても勉強になります。
これからも発信を続けていきます！
Man-in-the-Browser攻撃(MITB)、Man-in-the-Middle攻撃(中間者攻撃)

応用情報技術者平成28年春期 午前45

Man-in-the-Browser攻撃に該当するものはどれか。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/4736f8e2-6904-42fd-ebcc-e11e50031c88.png)

１、Man-in-the-Browser攻撃(MITB)は、
ユーザPC内でプロキシとして動作するトロイの木馬(マルウェア)によってWebブラウザ～Webサーバ間の送受信をブラウザベースで盗聴・改ざんする攻撃です。

攻撃例：
インターネットバンキングへのログインを検知して、セッションを乗っ取り、振込先口座番号を差し替えることで預金を不正送金するなどの攻撃例があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/8f8a63a7-906b-2122-6b7f-b0d727b2fabb.png)


同じく送受信を改ざんするMan-in-the-Middle攻撃と異なり、クライアント内で書換えが行われるためWebサーバ側で不正処理を拒否することが難しいという特徴があります。




２、Man-in-the-Middle攻撃(中間者攻撃)
インターネットバンキングの正規サイトに見せかけた中継サイトに接続させ，Webブラウザから入力された利用者IDとパスワードを正規サイトに転送し，利用者になりすましてログインする。
情報の搾取に中継サイトを使います。

参照：
https://www.ap-siken.com/kakomon/28_haru/q45.html
サブミッションポートの導入目的

応用情報技術者平成28年春期 午前44

スパムメール対策として，サブミッションポート(ポート番号587)を導入する目的はどれか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/afdd7180-b8ad-2f81-b1ed-1781053cc9f6.png)


１、正当な利用者が送信できないの弊害を解消するため：
ISPでスパムメール対策OP25B(Outbound Port 25 Blocking)が行われていると、"25/TCP"を使う通信では正当な利用者でさえ外部のメールサーバと直接コネクションを確立することができなくなってしまいます(例えば外出先で自分が契約しているISPのメールサーバから送信できないなど)。この弊害を解消するためにサブミッションポート"587/TCP"が利用されるようになりました。

サブミッションポートは、
ユーザーのメールソフト(メーラー)からメールサーバにメールを届けるときに使用する送信専用のポート番号です。
メールサーバでは、サブミッションポートにアクセスしてきたユーザをSMTP-AUTHで認証し、認証できたユーザのみからの送信を受け付けることで、スパマーの悪用を防ぎつつ、外部のメールサーバを使用したメール送信を可能にします。

参照：
https://www.ap-siken.com/kakomon/28_haru/q44.html

https://qiita.com/lymansouka2017/items/9f697bf3782bc9b2aca2
HTMLのdfn要素について

#プログラミング勉強日記
2020年10月5日
今日はdfn要素を知ったので、まとめる。

#dfn要素とは
　dfnはdefinitionという意味で、定義される用語を表す。用語の意味を説明するときにその用語の部分に対して使用する。
　用語や略語を定義するために用意されていて、dfnタグとabbrタグ、title属性を用いることで、言葉の説明と略語の説明文を定義することができる。(abbrタグについては[前回の記事](https://qiita.com/mzmz__02/items/8afedf16814b63d10deb)で紹介している)

　以下のようにdt, ddタグを用いて説明することもできる。(HTMLの説明リストのタグ(dl dt dd)の使い方は[こちらの記事](https://qiita.com/mzmz__02/items/518a5e2391069afa12b2)で紹介している)

```HTML:例
<p><dfn>HTML</dfn>を勉強しよう</p>

<dl>
  <dt><dfn>HTML</dfn></dt>
  <dd>Webページを作成するためのマークアップ言語</dd>
</dl>

<p>Qiitaで<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>の勉強しよう</p>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/a5436f54-1d12-256f-a1c5-002f81dc94f0.png)


#参考文献
[定義される用語を表す](https://www.tagindex.com/html5/text/dfn.html)
[HTMLでdfn要素を使って用語を定義する方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/41011)
重要な情報を送信する直前のセキュリティ対策

応用情報技術者平成28年春期 午前41

Webアプリケーションのセッションが攻撃者に乗っ取られ，攻撃者が乗っ取ったセッションを利用してアクセスした場合でも，個人情報の漏えいなどの被害が拡大しないようにするために，Webアプリケーションが重要な情報をWebブラウザに送信する直前に行う対策として，最も適切なものはどれか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/babdd469-4460-ee1f-1627-ad55d044cbb9.png)

１、
セッションハイジャック等によって、ログイン中のセッションが第三者に乗っ取られる場合、攻撃者なのか、正規ユーザなのかは区別できません。

なので、セッションが乗っ取られた場合の不正処理を防ぐために、
　送金や
　購入確定、
　パスワード変更、
　秘密情報の表示、
　退会処理
などの重要なリクエストをサーバに送信する前には、その利用者が意図したリクエストであるかどうかを識別する仕組みを設ける必要があります。

参照：
https://www.ap-siken.com/kakomon/28_haru/q41.html
[python] matplotlib.pyplotの挙動がわかり始めたメモ

グラフ描画用のモジュールであるpyplotは時々お世話になるのですが、なかなか使い方に慣れずにいました。最近ようやくそのもやもやを解消できたので、気づきのメモとして残しておきます。
※ 「なぜそのような設計になっているのか」ではなく「どのような設計になっているのか」という内容の話になります。


## 個人的によくわからなかったところ

まずは基本的なグラフ出力です。

```python
import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(-np.pi, np.pi)
y = np.sin(x)

fig = plt.figure()
plt.plot(x, y)
plt.title("y = sin(x)")
plt.xlabel("x")
plt.ylabel("y")
fig.savefig("output.png")
```

![output.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563402/30a827ba-b177-8ae7-523e-2914ba04234a.png)

これで画像が `output.png` として出力されるのですが、個人的にこの時の挙動がどうも腑に落ちませんでした。たとえば

- `plt` インスタンスを生成した形跡がない
- グラフのタイトルなどを変更するのは `plt` のメソッドを使っていたのに、画像として保存する場合は `fig` のメソッドを呼び出している
- `fig` のように `fig1` , `fig2` , ...を生成しただけで `plt` でアクセスするときの対象も `fig1` , `fig2` , ...と順に変化する

といったあたりです（ちなみに `title()` や `xlabel()` などがクラスメソッドであるという説は考えていませんでした）。  
個人的にはインスタンス生成→メソッド呼び出しの流れに慣れているので、下のようなやり方であったとすれば抵抗なく理解していたと思います。

```python
# これは正常に動作しません。
import matplotlib
import numpy as np

x = np.linspace(-np.pi, np.pi)
y = np.sin(x)

plt = matplotlib.pyplot() # ここでインスタンスを生成してほしい
plt.plot(x, y)
plt.title("y = sin(x)")
plt.xlabel("x")
plt.ylabel("y")
plt.figure.savefig("output.png") # ここはpltインスタンスのメソッドであってほしい
```

なぜ最初のやり方で正常に実行できるのでしょうか？
そしてなぜ私の想定したやり方ではうまく動作しないのでしょうか？


## 実際どうなっているのか

最初の正常に動作するスクリプトに登場した要素がそれぞれ何者なのかを確認します（numpyの部分は省略します）。

- `matplotlib`
    - グラフ描画用のライブラリ
- `pyplot`
    - `matplotlib` ライブラリの中のモジュール
    - `import matplotlib.pyplot` 等でimportして使用
- `plt`
    - `matplotlib.pyplot` のエイリアス（従ってtypeはmodule）
    - エイリアスなので好きな名前に変更可
- `fig`
    - `matplotlib.figure.Figure` クラスのインスタンス
    - `fig = pyplot.figure()` で生成される

重要なのは **`plt` がクラスではなくモジュール** ということです。 `plt` がクラスであったとすればどこかでインスタンスを生成して欲しいところですが、モジュールゆえに2行目でimportした時既に生成されていたため、突然 `fig = plt.figure()` や `plt.plot(x, y)` としても問題なく動作していたのですね。
また、これは推測ですが、 `fig` インスタンスが生成される際に `plt` の中でアクセス先が更新されると考えれば他の疑問点も納得できそうです。


## おまけ

さて、pythonにおいてモジュールはシングルトンとして生成されるので、どこで呼び出しても同じidのオブジェクトを参照します。従って、 `pyplot` を別の場所で呼び出した際も、既に作成済みのグラフにアクセスすることができます。

たとえば、次の2つのファイルが同一ディレクトリにあったとします。

```graph.py
import matplotlib.pyplot as plt
import numpy as np

def edit_graph():
    x = np.linspace(-np.pi, np.pi)
    y = np.sin(x)

    plt.plot(x, y)
    plt.title("y = sin(x)")
    plt.xlabel("x")
    plt.ylabel("y")
```

```main.py
import matplotlib.pyplot as plt_main
import graph

graph.edit_graph()
plt_main.show()
```

この状態で `python main.py` を実行すると、先程と同様の正弦波のグラフが出力されます。つまり、あるスクリプトファイル内で生成・編集したグラフを別のスクリプトファイルで出力するということが、インスタンスの生成・受け渡し無しでできるということです（設計上あまり推奨されない気はしますが）。
`matplotlib.figure.Figure` クラス内のメソッドである `savefig()` を呼び出す場合も、 `fig = pyplot.figure()` を実行した後であれば可能です。


## まとめ

今回の疑問は、私自身が `plt` を何かしらのクラスorインスタンスだと勘違いしていたことが主な原因でした。なぜそう思っていたのか、今となってはわかりません... `plt` がモジュールであるということに気付けば大した問題ではありませんが、改めて意識してみるとより理解が深まると思います。

最後に今回気付いたことのまとめです。

- `pyplot` はモジュールであり、普段は `plt` のような名前をつけて利用している
- `pyplot` モジュール自体がクラスあるいはそのインスタンスのようにふるまう
- `fig = pyplot.figure()` を実行するたびに `matplotlib.figure.Figure` クラスの `fig` インスタンスが生成され、そのたびに `pyplot` モジュールによるアクセスの対象が移る
(Javascript) 静的プロパティと静的メソッド

#はじめに
今回は、Javascriptの"超基本"
<strong>静的プロパティと静的メソッド</strong> について記録します。

過去に2点ブジェクトについて、記事を投稿しました。

・<a href="https://qiita.com/Tateishi0819/items/10168748360409f38d82" terget="blank">(Javascript) オブジェクト指向 と オブジェクト&配列 の違い</a>
・<a href="https://qiita.com/Tateishi0819/items/bf2f340941b7a10a0bfa" terget="blank">(Javascript) インスタンス化 と コンストラクター</a>

##オブジェクトを使うには
オブジェクトは、元々から "自分自身の中でデータを保持できる" ことから、バッティング(エラー) を防ぐために <strong>new演算子</strong> を用いて <strong>インスタンス化</strong> させる必要がありました。

しかし、例外的にインスタンス化 をせず利用できるものがあります。

##インスタント化の例外 静的プロパティ・メソッド
例外的にインスタンス化しなくても良いメソッド・プロパティを <strong>静的メソッド・プロパティ</strong> または <strong>クラスメソッド・プロパティ</strong>  と言います。

##静的メソッド・プロパティの呼び出し方
インスタンス化の構文とは異なり 変数名 がありません

```
オブジェクト名.プロパティ名 [=設定値]
オブジェクト名.メソッド名([引数[,‥]])
```

><strong>インスタンス化の構文</strong>
変数名.オブジェクト名.プロパティ名 [=設定値]
変数名.オブジェクト名.メソッド名([引数[,‥]])

静的メソッド・プロパティ は、インスタンス変数から呼び出そうとするとエラーになります。
また、静的メソッド・プロパティ を経由して呼び出す プロパティ・メソッド を <strong>インスタンスメソッド。プロパティ</strong> と言います。

##静的プロパティ・メソッドのソースコード 

```javascript
//(1)コンストラクター
let Area = function() {};
//(2)静的プロパティの定義
Area.version　= '1.0';

//(3)静的メソッド四角形の定義
Area.rectangle = function(length, width) {
    return length * width;
};

//(5)静的メソッドで三角形を定義
Area.triangle = function(base, height) {
    return base * height / 2;
};

// (4)静的メソッド四角形のconsole.log
console.log('Areaクラスのバージョン:' + Area.version);
console.log('四角形の面積:' + Area.rectangle(5,3))

// (6)静的メソッド三角形のconsole.log
let a = new Area();
console.log('三角形の面積:'+ a.triangle(5,7));

```

###ソースコードの説明
(1)コンストラクター
→関数にコンストラクター(オブジェクト)を直接呼び出す
<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function" target="blank">functionコンストラクター</a>

(2)静的プロパティの定義
→(1)で呼び出されたオブジェクトにプロパティ(version)をセットして値(1.0)を代入

(3)静的メソッド四角形の定義
→オブジェクト・プロパティに静的メソッド(triangle)の式を定義

(4)静的メソッド四角形のconsole.log
→console.log を用いて、オブジェクトとプロパティ(Area.version)の値を受け取る
→console.log を用いて、三角形の面積(Area.triangle(5,3))の値を受け取る

(5)静的メソッドで三角形を定義
→オブジェクト・プロパティに静的メソッド(rectangle)の式を定義

(6)静的メソッド三角形のconsole.log
→インスタンス経由で静的メソッド(triangle)を呼び出す

###実行結果

(6)インスタンス経由で呼び出した console.log はエラーが起きてます。
triangleは静的コンストラクターで、あくまでも Area関数オブジェクトに動的に追加されているだけです。
なのでAreaが生成するインスタンスに追加されません。

```console
Areaクラスのバージョン:1.0 
四角形の面積:15 
Uncaught TypeError: a.triangle is not a function ←エラー
```

##静的プロパティ・メソッドを定義する時の注意
(1)<strong>プロトタイプオブジェクト</strong>には登録できない

(2)静的メソッドは<strong>読み取り専門</strong>

(3)静的メソッドの中では、<strong>thisキーワード</strong>を使えない

##静的(クラス)プロパティ・メソッドを使う理由
静的(クラス)プロパティ・メソッド は <strong>グローバル関数・関数</strong> と変わりません。
しかし、この2つは 複数個作成すると、名前がバッティングしてしまう危険性があります。(予約語)
これを防ぐために名前を意識しないといけません。
この状態は、好ましいことでないので
ここで、静的(クラス)プロパティ・メソッド を使用します。

#あとがき
以上が、<strong>静的プロパティと静的メソッド</strong> でした。
いかがでしたか？
役に立っていれば嬉しいです。
では!

#Myリンク
また、Twitter・Portfolio のリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。

<a href="https://twitter.com/0819_tateishi" target="blank">Twitter</a>
<a href="https://ayu-portfolio.herokuapp.com/" target="blank">Portfolio</a>
<a href="https://github.com/ayu0819" target="blank">Github</a>
<a href="https://note.com/ayu0819" target="blank">Note</a>
サブネットの数


応用情報技術者平成28年春期 午前35

クラスCのIPアドレスを分割して，10個の同じ大きさのサブネットを使用したい。ホスト数が最も多くなるように分割した場合のサブネットマスクはどれか。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/aef32edb-21ca-d370-4bab-61aefa1000e1.png)


１、サブネットワーク部とホスト部
上位24ビットはすべて同じなので下位8ビットの注目してみましょう。
・サブネットワークアドレスは
　ビットが1である部分、
・ホストアドレスは
　ビットが0の部分
で表します。

・255.255.255.192
　192→1100 0000
　　ネットワーク部：2ビット→4通り
　　ホスト部：6ビット→64通り

・255.255.255.224
224→1110 0000
　ネットワーク部：3ビット→8通り
　ホスト部：5ビット→32通り

・255.255.255.240
240→1111 0000
　ネットワーク部：4ビット→16通り
　ホスト部：4ビット→16通り

・255.255.255.248
248→1111 1000
　ネットワーク部：5ビット→32通り
　ホスト部：3ビット→8通り

参照：
https://www.ap-siken.com/kakomon/28_haru/q35.html
What's New In Odoo V14? Odoo V14 Updates, Features & Road Map

![What's New In Odoo V14 Odoo V14 Updates, Features & Road Map.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/766986/191abfe1-cd24-6530-02ca-efb9d818f450.png)

Odoo covers all of your business requirements which helps you to enhance the standard and therefore the efficiency of your business. there's the flexibility to customize as per the workflow of any business with highly useful data security measures.

With the discharge of Odoo 14 getting closer and closer, we thought now would be an excellent time to possess a fast check out the recently announced features, improvements, and changes that are coming with v14.

Get in-tuned with our <a href="https://www.techultrasolutions.com/odoo-consulting/">Odoo Consulting</a> at TechUltra Solutions to urge the advantage of Odoo ERP solution built using the newest version of Odoo.

The Odoo v14 is predicted to be released during the Odoo experience to be held in October 2020.

As Odoo matures and therefore the functionality is enhanced, one among the goals is to make sure that it remains easy to use and navigate. Odoo 14 brings significant UI and UX changes to make sure that simple use isn't overrun by functionality as has occurred with a number of their competitors.


Here is a quick list of some changes coming in Odoo 14:

**New widgets allowing quick access to commonly used options
Shortcuts for email, SMS, and snooze in CRM module
Reworked daily task view within the CRM module
New yearly calendar view for a day off Module
New keyboard shortcuts for Timesheet module
Improved customization options for forms
Auto emailing of excellent receipt reminder to poor performing suppliers**

Every version upgrade brings enhanced functionality to Odoo's website builder making it an increasing contender with industry heavyweights WordPress and SquareSpace.

Odoo 14 brings to the table a fresh, redesigned website builder. The HTML editor was redesigned and there are some new and improved building blocks, allowing you to create beautiful and functional websites effortlessly.
はじめてのIE対応(CSS)

はじめてまともにIE対応をやったので書く。

## 事前にやっていたこと
PostCSSのAutoprefixerを使って、IE9まで対応できるようにベンダープレフィックスをつけていた

## 発生した事象
IEでみた時に

- 背景色が適応されていない箇所が多数
- `height: auto`の指定をしていたり、`height`の値を書いていなかったところの高さが崩れる
- 文字が切れてしまっている箇所がある

## 対応
[browserstack](https://www.browserstack.com/)を使ってIEでの表示を確認
↓
検証モードを開き、直接スタイルを当てて挙動を確認
↓
IEだけに適用するためのメディアクエリを書き、その中にスタイルを追加する

```scss:イメージ
@media all and (-ms-high-contrast: none) {
  .sidebar {
    .title {
      margin-right: 20px;
    }
    svg {
      height: 30px;
    }
  }
  .event-list {
    .wrap {
      background: green;
    }
  }
}
```

## 感想
browserstack激オモ。

## 参考
[【CSS】IEのみに適用する、Firefoxのみに適用する、Chromeのみに…   at softelメモ](https://www.softel.co.jp/blogs/tech/archives/6095)
Ruby 　大文字⇔小文字に変換する方法

# はじめに
今回はRubyで文字列を大文字⇔小文字に変換するメソッドをやっていきます！

今回使うメソッド
・downcaseで大文字を小文字に変換
・upcaseで小文字を大文字に変換
・swapcaseで小文字⇔大文字の変換
・capitalizeで先頭の小文字を大文字に変換


## downcaseメソッド
downcaseメソッドは、文字列に含まれる大文字を小文字に変換したいときに使用するメソッドです。

```
文字列.downcase
```

```
str = "Hello World"
 
puts str.downcase
```

[出力結果]

```
hello world
```

## upcase
upcaseメソッドは、文字列に含まれる大文字を小文字に変換したいときに使うメソッドです。


```
文字列.upcase
```
```
str = "Hello World"
 
puts str.upcase
```

[出力結果]

```
HELLO WORLD
```

## swapcase
swapcaseメソッドは文字列の中の大文字と小文字を入れ替えるメソッドです。

```
文字列.swapcase
```
```
str = "Hello World"
 
puts str.swapcase
```

[出力結果]

```
hELLO wORLD
```

## capitalize
capitalizehは先頭の小文字を大文字に変換するメソッドです

```
文字列.capitalize
```
```
str = "hello world"
 
puts str.capitalize
```

[出力結果]

```
Hello World
```
マークダウン記法チートシート

自分個人の学習用でマークダウン記法の基本的な使い方をまとめました。
Qiita初投稿のため至らない点があるかと思いますが、よろしくお願いいたします。
- - -
VSCodeプレビューを開く
-
```
［Command］＋［K］→［V］でVSCode上でマークダウン記法のプレビューを開くことができる。READMEなどを書くとき便利。
```



バッククオート３つで囲むと等幅フォント字下げを行う
-

````
\```
バッククオート３つで囲むと等幅フォント字下げを行う
\```
````


# h1 は「#1 個で見出しを表現できる」

## h2 は「#2 個で見出しを表現できる」

### h3 は「#3 個で見出しを表現できる」

#### h4 は「#4 個で見出しを表現できる」

##### h5 は「#5 個で見出しを表現できる」

###### h6 は「#6 個で見出しを表現できる」

# h1 は「下段に = 1 個で見出しを表現できる」

```
（例）
h1 は「下段に = 1個で見出しを表現できる」
=
```

## h2 は「下段に - 1 個で見出しを表現できる」

```
h2 は「下段に - 1個で見出しを表現できる」
-
```

# p タグ(パラグラフ)の表現

## 次のパラグラフに行きたい場合は空文字列の行を入力する

hello.
hello.hello.hello.hello.hello.hello.hello.

hello.hello.hello.hello.hello.hello.hello.hello.

```
hello.hello.hello.hello.hello.hello.hello.hello.

hello.hello.hello.hello.hello.hello.hello.hello.
```

## 第一パラグラフの中で改行する場合は半角スペースを二つ増やす。

hello.
hello.hello.hello.hello.hello.hello.hello.

```
hello.(半角スペース二個)
hello.hello.hello.hello.hello.hello.hello.
```

# 引用文を表現

## HTML タグでいうところの blockquote のこと。

> quote. quote.quote.quote.quote.quote.quote.quote.

## 文の先頭に>をいれる

```
>quote. quote.quote.quote.quote.quote.quote.quote.
```

# 区切り線をつける

html でいうところの hr タグ
ハイフン 3 つ以上
（その場合見出しの表現とかぶらないように 1 行開ける）

---

アスタリスク 3 つ

---

アンダースコア 3 つ

---

```
ハイフン3つ以上
（その場合見出しの表現とかぶらないように1行開ける）

---
アスタリスク3つ
***
アンダースコア3つ
___

```

# 強調表示をする

_アスタリスクかアンダーバーで囲うと斜体になる。_

*アスタリスクかアンダーバーで囲うと斜体になる。*

```
*アスタリスクかアンダーバーで囲うと斜体になる。*

_アスタリスクかアンダーバーで囲うと斜体になる。_
```

**2 つのアスタリスクかアンダーバーで囲うと太字になる。**

**2 つのアスタリスクかアンダーバーで囲うと太字になる。**

```
**2 つのアスタリスクかアンダーバーで囲うと太字になる。**

__2 つのアスタリスクかアンダーバーで囲うと太字になる。__
```

# 箇条書きの表現方法

**箇条書きは文の先頭に - （ハイフン 半角スペース）を使えば箇条書きになる。**

- リスト
- リスト
- リスト

```
書き方
- リスト
- リスト
- リスト
```

**プラスやアスタリスクでも箇条書きの表現ができる**

- リスト

* リスト

- リスト

```

+ リスト
* リスト
- リスト

```

**リスト内の項目として文章を書きたい場合は、４文字以上の空白かタブで字下げをしつつ前後に空白の行をいれる**

- 空白の行を下に挿入

４文字以上の空白を挿入

- 空白の行を上に挿入

```
- 空白の行を下に挿入

４文字以上の空白を挿入

- 空白の行を上に挿入
```

# 連番付きのリストを作成

1. 数字の後にピリオドと半角スペースをつけると連番のリストと認識する
2. 数字の後にピリオドと半角スペースをつけると連番のリストと認識する
3. 数字の後にピリオドと半角スペースをつけると連番のリストと認識する

```
1. 数字の後にピリオドと半角スペースをつけると連番のリストと認識する
2. 数字の後にピリオドと半角スペースをつけると連番のリストと認識する
3. 数字の後にピリオドと半角スペースをつけると連番のリストと認識する
```

# リンクの表現方法

url などを「<>」で囲うとリンクとして認識する
<http:hogehoge.com>

[テキストを大括弧で囲い、その後リンクを半角丸括弧でを書く事で、テキストのリンクとして認識する](http:hogehoge.com)

```
[テキストを大括弧で囲い、その後リンクを半角丸括弧でを書く事で、テキストのリンクとして認識する](http:hogehoge.com)
```

# コードを見やすくする

```javascript
function (){
  console.log('関数などはバッククオート三つで囲うと読みやすい');
}
```

短いコードなどは`バッククオートで囲ってあげる`と読みやすい。

```
短いコードなどは`バッククオートで囲ってあげる`と読みやすい。
```

# 画像を表示させる

```
![!を先頭に記述後、alt属性のところは大括弧、半角丸括弧で画像のurlや画像名を記述する ](.png)
```

最後に
=
個人用とは言え非常に読みづらいかと思いましたが、ここまでのご閲覧ありがとうございました。
今後も勉強のアウトプットを行っていきますので、今後ともよろしくお願いいたします。
スタースキーマーファクトテーブル(fact table)、ディメンションテーブル(dimension table)

応用情報技術者平成28年春期 午前31

顧客，商品，注文，販売店という四つのテーブルをスタースキーマでモデル化した場合，ファクトテーブルとなるものはどれか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/3e36f048-47b2-3cd4-87ec-8620474da70a.png)

１、スタースキーマは、
多次元データモデルを表現するように設計されたスキーマで、データウェアハウスの実装で用いられます。

スタースキーマは、
　・1つ以上のファクトテーブルと
　・外部キーを介して関連付けられている1つ以上のディメンションテーブルで構成され、
中心となるファクトテーブルに各ディメンションテーブルが結ばれた星(スター)型構造をもつため、このように呼ばれます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/7d181f21-e3dc-309a-9f17-596ac199aad1.png)


参照：
https://www.ap-siken.com/kakomon/28_haru/q31.html
Mendix 郵便番号ウィジェット

# はじめに

Mendixで、簡単に郵便番号から住所を入力したい時に使えるウィジェットを使ってみます。このウィジェットは [AjaxZip3](https://github.com/ajaxzip3/ajaxzip3.github.io) ライブラリーを使用して、オンラインで郵便番号住所変換を行います。アプリ内に郵便番号変換データベースなどを用意する必要はありません。

# 準備

- あらかじめ、Mendixでアプリを作成しておきます。
- [こちら](https://github.com/naofum/Mendix-YubinbangoWidget/releases) からMendix郵便番号ウィジェット (YubinbangoWidget.mpk
) をダウンロードします。
- ダウンロードしたファイルを、アプリのプロジェクトフォルダー下にあるwidgetsフォルダーにコピーします。通常プロジェクトフォルダーは、C:¥Users¥<ユーザーID>¥Documents¥Mendix¥アプリ名-main のような場所にあります。

# 画面設定

アプリに画面を作成します。
この画面は少なくとも、郵便番号を入力するテキストボックス、住所を入力（表示）するテキストボックスを含みます。

![yubinwidget_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/cb6b5ace-c57a-0408-6f09-45b306fe6467.png)

この画面に、「add widget」で郵便番号ウィジェットを追加します。

![yubinwidget_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/278f8727-349f-5df9-f57c-d5633c3200bf.png)

ウィジェットのプロパティには、上記で作成した２つのテキストボックスの名前を指定します。

![yubinwidget_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/7546c1c6-9cfb-2a2f-51d0-4b028fe3e4f6.png)

郵便番号を入力すると、住所変換されます。

![yubinwidget_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/2831afe6-02c8-1551-80c0-96e29eb08b20.png)

# 謝辞

AjaxZip3ライブラリーでは、サイト運営者様により郵便番号情報が更新されており、最新の郵便番号住所変換を利用することができす。サイト運営者様ありがとうございます。
Unity 2D #1 円の描画

Unityで円を描画する
参考URL:https://baba-s.hatenablog.com/entry/2019/10/18/110000

Line Rendererを使用し、円状に点を配置することで実装

```
[SerializeField] private LineRenderer m_lineRenderer = null; // 円を描画するための LineRenderer
[SerializeField] private float m_radius = 0;    // 円の半径
[SerializeField] private float m_lineWidth = 0;    // 円の線の太さ
[SerializeField] private float center_x = 0;    // 円の中心座標
[SerializeField] private float center_y = 0;    // 円の中心座標
private void Reset(){
    m_lineRenderer = GetComponent<LineRenderer>();
}
private void Awake(){
    int segments = 380;
    m_lineRenderer.startWidth = m_lineWidth;
    m_lineRenderer.endWidth = m_lineWidth;
    m_lineRenderer.positionCount = segments;
    var points = new Vector3[segments];
    for (int i = 0; i < segments; i++){
        var rad = Mathf.Deg2Rad * (i * 380f / segments);
        var x = center_x + Mathf.Sin(rad) * m_radius;
        var y = center_y + Mathf.Cos(rad) * m_radius;
        points[i] = new Vector3(x, y, 0);
    }
    m_lineRenderer.SetPositions(points);
}
```

segmentsの値が360でないのは、360にするとLine Rendererの両端が十分に重なってなく、円が一部欠けたように見えてしまうからです。
lsコマンドのオプション

# lsコマンドとは
今いるディレクトリ内のファイル・フォルダをリスト表示するコマンド。Windowsのコマンドプロンプトを開いているときにも打ち込んでしまって
`'ls' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。`
と出てきて画面を割ってしまう人が大勢いる。
# 概要
lsのオプションを忘れてしまって調べることが何回か続いたので、メモを書いた。網羅しているわけではなく、自分が使うものだけをメモ的にまとめている。今後よく使うコマンドが増えたら追記していくかもしれない。

# オプション
1文字のオプションは一つのハイフンで一気に表すことができる。例えば、`ls -a`と`ls -l`を同時にやりたかったら`ls -a -l`でもいいけど、`ls -al`で同じことができる。
## -a
`ls -a`は"."から始まるドットファイルも含めてリスト表示させる。
Ubuntuを使ったときに`la`というコマンドが`ls -a`と同じ意味として通ったことがあり、非常に便利だった。.bash_profileのような、シェルの読み込み時に実行される設定ファイルに次のエイリアスを追記しておくと`la`がどこでも使える。

```alias
alias la='ls -a'
```
## -l
-lオプションは、ファイルの情報を表示する。エイリアスで`ll='ls -l'`と設定すると便利。
### 例(ファイルの場合)

```
-rw-r--r-- 1 seal-qiita naist-student  8 Jun  7 01:22 sample.txt
```
それぞれの項の見方は、

```
タイプ/所有者権限/グループのユーザーの権限/外部ユーザーの権限, 
ハードリンク数,
所有者名,
グループ名,
ファイルサイズ(B),
最終更新時間の月
最終更新時間の日,
最終更新時間の時間,
ファイル名
```
最初の10文字の羅列は、「ファイルタイプはファイル(-)、自身の権限は読み書き可能で実行不可(rw-)、同一グループのユーザーは読み取り専用(r--)、外部ユーザーは読み取り専用(r--)」を意味する。「実行不可」はバイナリファイル(**.exeやa.outなど)に適用されるらしく、pyファイルなどの権限をrw-にしても実行はできる([参考](https://teratail.com/questions/164297))。
次の数字は「ハードリンクの数が1つ」を示す。ハードリンクとはそのファイルにアクセスできる名前の数のこと。ファイルの場合は特に設定しなければ1である(設定するには`ln`コマンドを使う)。
### 例(ディレクトリの場合)

```
drwxr-xr-x 3 yuki-yos is-student 32 Oct  5 15:21 sample_dir
```
それぞれの項の見方は、

```
タイプ/所有者権限/グループのユーザーの権限/外部ユーザーの権限, 
ハードリンク数=サブディレクトリの個数+2,
所有者名,
グループ名,
中身を含めないディレクトリ自体のサイズ(B),
最終更新時間の月
最終更新時間の日,
最終更新時間の時間,
ファイル名
```
最初の10文字の羅列は、「ファイルタイプはディレクトリ(d)、自身の権限は読み書き可能で移動可能(rwx)、同一グループのユーザーは読み取りと移動可能(r-x)、外部ユーザーは読み取りと移動可能(r-x)」を意味する。ディレクトリのパーミッション"x"はその中に入れるかを示す。
ハードリンク数が3のディレクトリは、サブディレクトリを1つだけ持つことを意味する。この3つのハードリンクとは、親ディレクトリ(lsを使った時点での現在地)にあるsample_dirへのリンク、saple_dir内にある`.`、sample_dirのサブディレクトリ内の`..`である。自分へのリンクと`.`は必ず存在するため、ディレクトリのハードリンクとは、「サブディレクトリの個数に2を足したもの」として定義されることになる。

ハードリンクの個数が分かってもファイル数は分からないので、この表記方法はあまり嬉しくない。そもそも、ハードリンクの数が分かって嬉しかったことがないのだが、どういう意図で表記されているのだろうか？
## -h
`-l`で表示したファイルサイズを、バイト単位でなく最も適切な単位で表示してくれるオプション。例えば、10000バイトなら10KBと自動で変換してくれる。

#まとめ
今のところは、`-a`、`-l`、`-h`の3オプションを記載している。`-l`の表示の見方など特に忘れやすいので役に立つと嬉しい。
Docker上に構築したLINUX(Debian)で「bash: sudo: command not found」エラーが出る

# 起こった事
Docker上に構築したLINUXコンテナにSSHで入り、sudoコマンドを打つと通らなかった。

```
$ sudo hogehoge
bash: sudo: command not found
```

# 行なった事

## ディストリビューションを調べる

```
$ cat /etc/debian_version
10.5
```

## sudoコマンドインストール

```
$ apt update  
$ apt install sudo  
```
SwiftLintを使ってみる

# 概要
[realm/SwiftLint: A tool to enforce Swift style and conventions.](https://github.com/realm/SwiftLint)

この記事でわかるのは

* SwiftLintのHomebrewでのインストール方法
* XcodeでのSwiftlintの利用方法
* Swiftlintでたくさん表示される`trailing_whitespace`に対処するXcodeの設定方法

# インストール

## Homebrew 

```
brew install swiftlint
```

[macOS（またはLinux）用パッケージマネージャー — Homebrew](https://brew.sh/index_ja)

## Xcodeで利用
[公式ページ](https://github.com/realm/SwiftLint#xcode)にもあるように以下をRunPhasesに追加する。



```bash
if which swiftlint >/dev/null; then
  swiftlint
else
  echo "warning: SwiftLint not installed, download from https://github.com/realm/SwiftLint"
fi
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199256/b1fbec81-b447-d760-db70-583aef951fea.png" width=600 >

めっちゃwarningが出るようになりました！

![スクリーンショット 2020-10-04 12.58.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199256/d45c16b6-abd3-fd25-be1d-ad4497f6a66e.png)


# めっちゃ出るWhitespace Violationへの対処法

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199256/4bbb0297-c891-44c0-0d1e-4d448e8b0e1c.png" width=400 >


swiftlintを入れることで、
たくさんの`trailing_whitespace`というwarningが出るようになりました。

空行にスペースがあると起きるようなのですが、いちいち1行開けているときにスペースを消していくのは面倒です。

Preference > TextEditing > Editing > `Including whitespace-only lines`にチェックを入れるとこれが解消されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199256/c9a6e81d-1b0b-3651-e3c3-0156434c114a.png" width=600 >

これを適用すると空行のスペースを勝手に消してくれます。

# GithubActionsでSwiftLintを実施
[norio-nomura/action-swiftlint: GitHub Action for SwiftLint](https://github.com/norio-nomura/action-swiftlint)
こちらを利用しました。

#　まとめ
* brewで`swiftlint`をインストール
* Xcodeの`RunPhases`に追加！
* XcodeのPreferenceのEditingの設定を変える！


他にもいろいろやり方あるので[realm/SwiftLint: A tool to enforce Swift style and conventions.](https://github.com/realm/SwiftLint)
をチェックしてください。



#　参考
* [realm/SwiftLint: A tool to enforce Swift style and conventions.](https://github.com/realm/SwiftLint)
* [Swiftの静的解析ツール「SwiftLint」のセットアップ方法 - Qiita](https://qiita.com/uhooi/items/bf888b53b4b8210108aa)
【Mac】Laravelのインストール方法

##Homebrewをインストール
Homebrewがインストール済みであるかどうかを確認。
ターミナルを開いて```brew -v```コマンドを実行する。
以下のように表示されている場合はインストール済みなので次工程へGo。

```:ターミナル
$ brew -v
Homebrew 2.4.2
```

インストールされていない場合は<a href="https://brew.sh/index_ja.html">Homebrew公式サイト<a/>からインストールのコードをコピーし、ターミナルで実行する。
コマンドの実行が完了したら、再度```brew -v```コマンドを実行し、上記のように表示されるか確認する。

<details><summary>【追記】Homebrewのアップグレード方法</summary><div>
一応、Homebrewのアップデート方法を記述しておきます。 

```:ターミナル
$ brew upgrade
```

</div></details>

##PHPをインストール
ここでもまず、PHPがインストール済みであるかどうかを確認。
ターミナルで```php -v```コマンドを実行する。
以下のように表示されている場合はインストール済みなので次工程へGo。

```:ターミナル
$ php -v
PHP 7.3.11 (cli) (built: Jun  5 2020 23:50:40) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.11, Copyright (c) 1998-2018 Zend Technologies
```

<details><summary>PHPがインストールされていない場合</summary><div>

###インストールするPHPパッケージを確認

```brew search php```で、インストール可能なPHPのバージョンを確認。

```:ターミナル
$ brew search php
==> Formulae
brew-php-switcher   php-cs-fixer        phplint             phpstan
php                 php@7.2             phpmd               phpunit
php-code-sniffer    php@7.3             phpmyadmin
==> Casks
homebrew/cask/eclipse-php                homebrew/cask/netbeans-php
```

###Homebrewを使ってPHPをインストール
今回はPHP7.3をインストールします。

```:ターミナル
$ brew install php@7.3
```

インストール完了後```php -v```でバージョン確認。
</div></details>
##Composerをインストール
まず、インストール済みであるかを確認。
下記のように表示されればインストール済み。

```:ターミナル
$ composer -v
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.10.8 2020-06-24 21:23:30

　　　~　以下は省略　~
```

<details><summary>Composerがインストールされていない場合</summary><div>
次のコマンドを実行してインストール。

```:ターミナル
$ brew install composer
```

インストール後は```composer -v```でインストールが完了しているかチェック。
</div></details>
##Laravelをインストール

```:ターミナル
$ composer global require "laravel/installer"
```


Laravelコマンドを使用するためにはパスを通す必要があるみたい。
使用される方は<a href="https://qiita.com/m24/items/970d9c575647f8f6ff33">【記事】ターミナル上で「laravel」コマンドを使えるようにパスを通す</a>を参考にしてみてください！

以上です。
間違い等ございましたら、是非ご指摘いただけたらと思います！


##参考記事
><a href="https://qiita.com/1992_momotaro/items/c84ad1701c4623c04f27">【Mac】Laravel導入（インストール）</a>
><a href="https://qiita.com/m24/items/970d9c575647f8f6ff33">ターミナル上で「laravel」コマンドを使えるようにパスを通す</a>
CodeCamp Webマスターコース jQuery 10章 10-6 課題(中級) 九九表 ヒント

#制作環境

Windows 10
XAMPP
PHP : 7.4.3
Visual Studio Code

#はじめに

この記事はプログラミングをはじめたばかりの素人が、メモするのに利用しています。
内容には誤りがあるかもしれません。

当方は2月から2ヶ月間CodeCampのWebマスターコースを受講しました。
提出課題ではないのと、データを残してなかったのでソースコードは記載していませんが、ヒントを一つ掲載します。

良くも悪くも参考になればと思います。

#課題内容
jQueryを用い、隣り合うセルの色が異なる九九表を作成する。

イメージ
![99.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/e6be1128-c1fd-a00c-26c3-b67585ebec9d.jpeg)

#ヒント
たぶん隣り合うセルの色を変えるのに苦労するのではないかと思います。
※人によるとは思いますが。

検索すると、縦軸と横軸で色を塗るセルを識別する等あると思います。

当方は表を眺めていて気づいた規則を利用したので、それをヒントとして掲載します。
ヒントから言うと、

###色が塗られるセルは、必ず足した数が偶数。
例えば、色が塗られているセル、4*4=16、3*5=15ですが、足すと必ず偶数になります。
4+4=8、3+5=8。
逆に塗られていないセルは足すと必ず奇数になります。
5*2=10、7*8=56は足すと、5+2=7、7+8=15。

これで色を塗るセルの判定はできると思うので、色をどうやって塗るかを考えて下さい。
(Javascript) インスタンス化 と コンストラクター

#はじめに
今回は、Javascriptの"超基本"
インスタンス化 と コンストラクター について記録します。

前回 <a href="https://qiita.com/Tateishi0819/items/10168748360409f38d82" target="blank">(Javascript) オブジェクト指向 と オブジェクト&配列 の違い</a> を投稿したので、気になる方は読んでみてください。

##オブジェクト思考 と インスタンス化
オブジェクト思考 の世界では、元々のオブジェクト を直接使うことを認めていません。
なので、オブジェクト を使用するためには <strong>インスタンス化</strong> を行う必要があります。

##インスタンス化とは？
<strong>インスタンス化</strong> とは、オブジェクトの複製を作ることです。
(オリジナルのオブジェクトをコピーしたモノ)

##インスタンス化する理由
オブジェクト は、元々 <strong>自分自身の中でデータを保持できる</strong>性質を持っています。
(高機能な上にデータ保持とかヤバイ!!!)
こんな性質を持つオブジェクトに、アプリA と アプリB がデータを書き込んでしまうと <strong>バッティング</strong> してしまい エラー になってしうので、インスタンス化を行います。

※インスタンス化 されたオブジェクトは、それぞれが別物なので操作はバッティングしません。

#インスタンス化とnew演算子
<strong>インスタンス化</strong>を行うには、<strong>new演算子</strong>を利用します。

```
let 変数名 = new オブジェクト名([引数])
```

##コンストラクターとコンストラクター名
オブジェクト は<strong>初期化</strong>をするためにオブジェクトと<strong>同じ名前のメソッド(操作するための道具)</strong>が用意されています。
そして、この同じ名前のメソッド(初期メソッド)のことを<strong>コンストラクター</strong>といいます。
また、この コンストラクター は <strong>コンストラクター名</strong> ともいいますね。

##インスタンス変数 と オブジェクト変数
生成されたインスタンスは<strong>変数に格納</strong>されます。
以降は <strong>その変数をオブジェクトとして利用できます。</strong>
また、インスタンスが格納された変数は <strong>インスタンス変数orオブジェクト変数</strong>と呼ばれます。

##インスタンス変数から プロパティ・メソッド を呼び出す
プロパティ・メソッドを呼び出すには、<strong>ドット演算子</strong>または<strong>ブランケット構文</strong>を利用して記述します。

###構文

```
オブジェクト名.プロパティ名 [= 設定値];
オブジェクト名.メソッド名 ([引数[,‥]]);
```
><strong>ドット演算子</strong>
オブジェクト名<strong>.</strong>プロパティ名;
↑.のドット!!

><strong>ブランケット構文</strong>
オブジェクト名<strong>[</strong>"プロパティ名"<strong>]</strong>; 
↑[‥]このカッコ!!


#あとがき
以上が、インスタンス化 と コンストラクターでした。
いかがでしたか？
役に立っていれば嬉しいです。
では!

#Myリンク
また、Twitter・Portfolio のリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。

<a href="https://twitter.com/0819_tateishi" target="blank">Twitter</a>
<a href="https://ayu-portfolio.herokuapp.com/" target="blank">Portfolio</a>
<a href="https://github.com/ayu0819" target="blank">Github</a>
<a href="https://note.com/ayu0819" target="blank">Note</a>
ROM専だったインフラエンジニアが情報をアウトプットするためにやったこと 

# この記事について
　これまでエンジニアとして情報収集することはあっても、中々アウトプットをしてこなかった。アウトプットしても個人的なメモやグループ内の共有で終わってしまうことが多く、インターネットに向けて情報を公開するということはなかった。
　そんな状態から、エンジニアとして情報をアウトプットできる環境を構築するまでに実施したことをリストアップして記録しておく。これからエンジニアとして情報をアウトプットしたいと考えている方の参考になれば幸いです。

# 各種アカウント作成
* Gmail
    * 各種アカウント登録用のメールアドレス
* Twitter
    * コミュニティ、アウトプットの場として活用予定
* qiita
    * 主なアウトプットの場として活用予定
* GitHub
    * アウトプット用のリポジトリ作成のため

# 各種アプリケーションのインストール
* Visual Studio Code
* Git for Windows
* Docker Desktop for Windows

# 終わりに
リストに追加があれば、随時更新していく。
Let'sEncryptでPre-loaded Public Key Pinningに対応しやすい証明書を発行する

# 最初に
本記事ではLet'sEncrypt, PublicKeyPinningに関する解説は省略します。

# 通常の証明書発行
通常、（certbotを使った場合）以下のように発行と更新を行うかと思います。

```
# 初回
certbot certonly --server https://acme-v02.api.letsencrypt.org/directory -d "*.foo.com" --manual-public-ip-logging-ok --agree-tos

# 更新
certbot renew
```

## 発生する問題
Pre-loaded Public Key Pinningを行いたい場合、クライアント側に公開鍵をもたせる必要があります。
`certbot renew`の場合、このクライアント側に持たせたい公開鍵を毎回作成し直してしまいます。
アプリなどの場合、こうなると証明書が更新されるたびにアプリの更新も必要かつ同時にやらなければPinningに失敗します。

# 公開鍵を固定にして証明書を発行
```
certbot certonly --server https://acme-v02.api.letsencrypt.org/directory -d "*.foo.com" --manual-public-ip-logging-ok --agree-tos --csr /etc/letsencrypt/csr/0000_csr-certbot.pem
```
`--csr`オプションを付けることで公開鍵情報を固定することが出来ます。
csrの発行手順については省略しますが、csrをつけずに実行すると`/etc/letsencrypt/csr/`に生成してくれるので活用すると便利です。

```
# ls /etc/letsencrypt/csr/
0000_csr-certbot.pem
```

秘密鍵は`/etc/letsencrypt/keys/`にあります。

```
# ls /etc/letsencrypt/keys/
0000_key-certbot.pem
```

`csr`オプションを付けると証明書はカレントディレクトリに以下のように作成されます。

```
# ls
0000_cert.pem  0000_chain.pem  0001_chain.pem
```

## 更新について
`csr`オプションを付けると`certbot renew`の対象外になります。
なので同じコマンドをcrontabなどを使って自前で更新処理を実行するようにしましょう。

## 余談
```
certbot certonly --server https://acme-v02.api.letsencrypt.org/directory -d "*.foo.com" --manual-public-ip-logging-ok --agree-tos --preferred-chain "ISRG Root X1" --csr /etc/letsencrypt/csr/0000_csr-certbot.pem
```

`preferred-chain`に"ISRG Root X1"を指定すると今後スタンダードとなるROOT証明書で署名されたものを発行できます。
Ajax通信でCORSに引っかかった時の対処法


#環境情報
Google Chrome : Ver 84.0.4147.135

#CORSとは
>オリジン間リソース共有Cross-Origin Resource Sharing (CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。

>セキュリティ上の理由から、ブラウザーは、スクリプトによって開始されるオリジン間 HTTP リクエストを制限しています。例えば、 XMLHttpRequestや Fetch API は同一オリジンポリシーsame-origin policyに従います。つまり、これらの API を使用するウェブアプリケーションは、そのアプリケーションが読み込まれたのと同じオリジンに対してのみリソースのリクエストを行うことができ、それ以外のオリジンの場合は正しい CORS ヘッダーを含んでいることが必要です。

>[オリジン間リソース共有 (CORS) - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)より引用

CORS(オリジン管理ソース共有)については参考になる記事がたくさんあると思いますので、そちらを参考にしていただけたらと思います。

#Ajax通信のエラー
デベロッパーツールのコンソールにはこのようなエラーが表示されてしまいます。
```Access to XMLHttpRequest at 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=1600002' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

日本語訳すると、
「Origin 'http://localhost:8080' から 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=1600002' へのXMLHttpRequestアクセスは CORS ポリシーによってブロックされました。要求されたリソースには 'Access-Control-Allow-Origin' ヘッダーが存在しません。」


これは、WebAPIを提供してくれているサーバーで**Access-Control-Allow-Originが設定されていない**ために起こるエラーです。


##Access-Control-Allow-Originとは
>Access-Control-Allow-Origin レスポンスヘッダーは、指定されたオリジンからのリクエストを行うコードでレスポンスが共有できるかどうかを示します。
>[Access-Control-Allow-Origin - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)より引用

**Webサーバから送信されたHTTPレスポンスヘッダー**の一つです。

このレスポンスヘッダーはHTTPリクエストに対するレスポンス側。
つまり、WebAPIの提供者側からしか操作することができません。

したがって、API提供側がHTTPのレスポンスヘッダーに**Access-Control-Allow-Originを設定してくれない限り、このエラーは解決されません**。

※ちなみに、
Access-Control-Allow-Origin：_Originのドメイン名_ または _＊(ワイルドカード)_
となっていれば、HTTPリクエストのレスポンスを受け取ることができます。



##拡張機能やブラウザの設定でAccess-Control-Allow-Originを無視することもできる
CORS すなわち オリジン間HTTPリクエストはGoogle Chrome等のブラウザにより制限されています。

なので、実際にはブラウザのセキュリティ機能を変更してあげることでCROSの制限を解除してあげることが可能です。

具体的には、

1. ブラウザ起動時のプロパティでセキュリティーを解除する方法[^1]
1. CORS制限を無効化する拡張機能を追加する方法[^2]

があります。

[^1]: [こちらの記事](https://webbibouroku.com/Blog/Article/cors-browser-setting)を参考ください。

[^2]: Chromeの拡張機能**[CORS Unblock](https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino?hl=ja&)**を使えば、CORSエラーをブロックすることができます。

検証用などで一時的に制限解除したい場合にはこれらの方法が有効かもしれません。

セキュリティを甘くするのはちょっと。。という方は、以下の手段を講じる方がおすすめです。

#無料ツールを使って、HTTPヘッダーを確認すべし
[ラッコツールズ](https://rakko.tools/)さんのHTTPヘッダー確認ツールを使用することで、**API提供者側がAccess-Control-Allow-Originを設定してくれているかどうかを確認することができます**。

こちらからツールに進んで対象のURLを叩いてください。
**[HTTPヘッダー確認](https://rakko.tools/tools/12/)**

HTTPヘッダーが確認できるので、Access-Control-Allow-Originに＊(ワイルドカード)が設定されているか確認しましょう！
[AWS入門]AWSでWebサーバ構築備忘録


AWSでサーバ立てたことないので立てた時のやつ
SSLは既存でワイルドカードの証明を作成ずみのやつがあったのでLBにつける。

やったこと

・VPCを作成する
・作成したVPCにサブネットを作成する
　・LBは二つ以上のアベイラリティゾーンが必要らしいので二つ作成してみた
　・アベイラリティゾーンの設定
・セキュリティグループの作成
・ゲートウェイの作成
・ルートテーブルの作成
・EC２サーバの作成(Amazon Linux)
　・LEMP（MySQLはRDS)サーバの構築(厳密にはLEPだが)

<code>
yum update -y
amazon-linux-extras install nginx1
amazon-linux-extras install php7.4
</code>
自動起動
<code>
sudo systemctl start nginx.service
sudo systemctl enable nginx.service
sudo systemctl start php-fpm.service
sudo systemctl enable php-fpm.service
</code>
もろもろconf設定

・ロードバランサーにインスタンスを追加する　
　・リスナーを追加する。ルール設定をしてなくてハマる

・以上
あとで加筆します。
【iCal 形式】iCalendar について勉強してみた

API を利用している中で、なんとなーくで利用していた iCal 形式の記述。
先輩方の言う通りに記述をいじり、必要なときに必要な箇所だけ修正してきましたが・・・

涼しい季節になりましたし、勉強し直す良いチャンス！
と、いうことで調べてみることにしました。(*'▽')

# iCal 形式とは

iCal 形式は、正式には iCalendar 形式と言います。
カレンダーアプリ、または電子メールアプリなどで、予定を読み込んだり書き込んだりする際に用いられます。
主な例としては、Google Calendar、Apple Calendar、IBM Lotus Notes、Yahoo! Calendar、LINEWORKS Calendar などなど。

## 拡張子 .ical .ics .icalendar

iCal 形式の記述をファイルとして保存したのが、拡張子が `.ical` `.ics` `.icalendar` のファイルです。

各サービスの API ではコード内に直接記述することが多いですが、
アプリのインターフェイスでは iCal ファイルを読み込ませることが多いですね。

### MINE タイプは text/calendar

iCal ファイルの中身はテキストデータなので、メモ帳や VSC などのテキストエディタで編集することができます。
保存するときに拡張子を `.ical` `.ics` `.icalendar` のどれかにすれば OK

そう言えば MINE タイプもなんとなーくのうろ覚えだったので、あらためて調べてみました。

[wikipedia から引用](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%BF%E3%82%A4%E3%83%97)：メディアタイプは、ファイルやインターネット上で転送されるコンテンツの形式を表現する識別子である。MIMEタイプや要素タイプ (Content type)とも表記される。text/plainのように、スラッシュで区切る表記が特徴的である。

まぁ、何のファイルだかわかりやすいように、表記のお約束があるってことですね( ﾟДﾟ)

## ical 形式の記述のしかた

iCal 形式にはカレンダー情報を記述します。
予定の開始時刻、終了時刻、タイトル、要約などの情報を記述していきます。 

```
BEGIN:VCALENDAR
VERSION:2.0
PRODID:kunihiros iCalender
BEGIN:VEVENT
DTSTART:20201123T000000Z
DTEND:20201123T235959Z
SUMMARY:My Birthday Party
END:VEVENT
END:VCALENDAR
```

基本的にはこんな感じ。

`BEGIN:VCALENDAR` : ここから ical 形式の記述が始まるよってお約束。HTML の <html></html> みたいなものですね。
`VERSION` : iCal 形式のバージョン。RFC-2445 規定が 2.0 らしいので 2.0 と書いとけばいいみたいです。
`PRODID` : ファイル作成者情報。
`BEGIN:VEVENT` : ここから予定の詳細情報が始まるよってお約束。
`DTSTART` : 予定の開始日時。例は2020年11月23日0時0分0秒。
`DTEND` : 予定の終了日時。例は2020年11月23日23時59分59秒。
`SUMMARY` : 予定のタイトルです。祝われたい。全力で。
`END:VEVENT` : ここで予定の詳細情報が終わるよってお約束。
`END:VCALENDAR` : ここで ical 形式の記述が終わるよってお約束。

### タイムゾーンの設定

実は、上の記述例は協定世界時 (UTC) での記述となるため、日本との時差が 9 時間発生しています。
このブログを読んでくださっている方たちは（おそらく）日本でお仕事されている方たちだと思いますので、タイムゾーンの設定をして日本時間に合わせます。

```
DTSTART;TZID=Asia/Tokyo:20201123T000000
DTEND;TZID=Asia/Tokyo:20201123T235959
```

あとはこのファイルを `.ical` で保存すれば完成！ヾ(*´∀｀*)ﾉ

## API で iCal 形式のデータを送信するときにハマったこと

カレンダー API の Request をしたときに引っかかったんですが、コードで iCal 形式のデータを記述するときは**改行コード**( `\r\n` )が必要でした。

さっきの記述例を直すとこんな感じですね。

```
BEGIN:VCALENDAR\r\nVERSION:2.0\r\nPRODID:kunihiros iCalender\r\nBEGIN:VEVENT
DTSTART;TZID=Asia/Tokyo:20201123T000000\r\nDTEND;TZID=Asia/Tokyo:20201123T235959\r\nSUMMARY:My Birthday Party\r\nEND:VEVENT\r\nEND:VCALENDAR
```

横長で見辛いですよね(; ･`д･´)

プログラムに組み込むときは変数から自動生成する方が良さそう。string だし。

#おわりに
ここまでお付き合いいただきありがとうございました。

アプリと google カレンダーを同期させたりするのに、ちょくちょく出てきたんですよね。
この、iCalender さん。ようやくちょっとスッキリしました！

読んでくれた方が同じようにスッキリしていただけたら幸いです。

せっかく iCal 形式の理解も深まったし、次は API で iCal 使う記事でも書こうかなー。

ではまた！(^^)/

#参考にさせていただきましたm(_ _)m
[ウィキペディア（Wikipedia）iCalendar](https://ja.wikipedia.org/wiki/ICalendar)
[カレンダーに使われるiCalendar形式について part1](https://qiita.com/TomOse/items/31b5fb4782f06d19af79)