OmniAICreator/Qiita-1.07M huggingface dataset:
TypeScript tsconfig.jsonの設定　備忘録

### tsconfig.json の設定項目一覧

 - exclude
  - 除外するファイルを記述する
  - デフォルトでnode_moduleは除外されるが他のファイルを指定する場合はnode_moduleも指定しなければならない
 - include
  - コンパイラするファイルを指定する
  - デフォルトは全てのファイル
 - files
  - includeとほぼ同じ
  - includeとの違いはexcludeに指定されているものも指定できる
 - target
  - 特定のバージョンのJavaScriptに変換する
  - デフォルトはes3 
 - lib
  - TypeScriptが用意している型の定義を追加する
  - デフォルトではtargetによって自動で指定される
 - arrowJs
  - JavaScriptもコンパイルの対象にするか
 - checkJs
  - jsファイルにおいてもTypeScriptのlinterとしての役割を適用するか
  - arrowJsと同時に使うことで有効
 - jsx
  - React.jsで使用
 - declaration declarationMap
  - 型定義ファイルを作成するか  拡張子`.d.ts`
 - sourceMap
  - ブラウザでTypeScriptを操作できるようにする(開発者ツールのsourceでTypeScriptファイルが確認できる)
  - 拡張子 `.js.map`
 - outDir
  - コンパイラされる先を指定する
  - デフォルトの挙動として無駄なディレクトリが消されることがある(以下参考)
  
```
  outDirに"./dist" を指定した場合
   - dist
     - index.js
     - sample.js
   - src
     - tmp
       - index.ts
       - sample.ts
  ```
 - rootDir
  - outDirで全てのディレクトリを表示するように指定できる(以下参照)
  
```
  outDirに "./dist" rootDirに "./" を指定した場合
   - dist
     - src
       - tmp 
         - index.js
         - sample.js
   - src
     - tmp
       - index.ts
       - sample.ts
  ```
 - removeComments
  - コンパイラされた際にコメントを削除するか
 - noEmit
  - ファイルを作成しない
 - noEmitOnError
  - エラーがある場合ファイルを作成しない 
 - strict
  - 以下の7つの設定を全て有効にするか
 - noImplicitAny
    - 暗黙的なanyにエラーをだす
    - 変数の場合エラーにならない
 - strictNullChecks
    - 全ての型にnull, undefindを含めるか trueの場合含めない flaseの場合含める
    - デフォルトはどの型もnull、undefindを含む
 - strictFunctionTypes
    - クラスの継承時に起こり得るバグの可能性を防ぐか
 - strictBindCallApply
    - 関数やobjectの中のthisを明示的に指定できる `call, bind, apply`
    - 上記3つに対して厳しいチェックをするか
 - strictPropertyInitialzation
    - クラス使用時に厳しいチェックをするか
 - noImplicitThis
    - 明示的なThisをエラーとするか
 - alwaysStrict
    - コンパイラされたJSファイルに`use strict` を記述するか
 
 - noUnusedLocals
  - 使ってないローカル変数をエラーとする
 - noUnusedParameters
  - 使ってないパラメータをエラーとするか
 - noImplicitReturns
  - 暗黙的なreturnをエラーとするか
PythonistaにStaShを入れようとしてSyntaxErrorが出た時の対応の記録

pipを使うためにStaSh入れようとしたらinvalid character in identifierとエラーがでた。

<img width="768" alt="4F0CE050-E5BF-4484-94B3-32114A2F3C3B.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36064/f222905c-f96e-9fd2-2e48-7bdfc4504024.jpeg">


原因は r.get の引数に渡す urlが書かれた文字列がシングルアポロストフィではなく、シングルクォートになっていたこと。

私の場合、直そうとして入力しなおすとなぜかシングルクォートになってしまいエラーが解消できなかった。

この場合記号入力キーボードに切り替えて、シングルアポロストフィのボタンを長押しすると、候補一覧が出てきて入力できるようになる。

<img width="764" alt="7004C1D8-4FFC-4114-AB84-5A6820207A64.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36064/ae9a2fe8-3177-f4bd-bc40-150132161947.jpeg">


普段のコード入力では問題なく入力できて、 Console 画面でのみ変な挙動になる現象は iOS のスマート句読点によるものです。この自動変換の結果が、自分のフィーリングと異なってイライラする場合は設定の一般のキーボードから、スマート句読点をoffにするのが良いと思います。

![6854CC24-5317-44AA-A76C-9E3B427A06D9.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36064/0ba4b728-6ee1-bfc6-16f1-357e4d3f1fd5.jpeg)

# 参考
[【iOS 11】デフォルトキーボードの引用符「’」キーで入力される文字が旧バージョンと違う](https://y-harada.net/wordpress/6113)
【プレゼントあり】　Unityのスカイボックスをテレワークの背景にすればいいじゃないって話

昨今は、　テレワーク用の背景を

出しているところも多いので
色々試しているのですが。　

色々やってみた結果、　Unityのスカイボックスが一番いいのでは？？　
って思うんだよね。　

無料だし、クオリティ高いし、　アニメーションだってできるし　
自由自在ですよ。　　


こちらは　Unityのアセットストアから　ＤＬできます。　
有料もありますけど、　無料でもクオリティの高いスカイボックスが　
多いですからね。



スカイボックスを背景にすると　こんな感じです。



![bandicam 2020-04-20 20-37-01-038.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295760/022ae99e-ffdf-b42c-57ae-0152c135b15e.jpeg)



![bandicam 2020-04-20 20-29-56-227.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295760/fa865680-7c2e-3967-faf6-f5afa0988a5d.jpeg)




ＰＳ　


只今　ＮＯＴＥにて　　ファイナルファンタジー１５の背景を　
プレゼントしています。　

https://note.com/zazizuzezo22334/n/nb517608e9fa4
TypeScriptの型　備忘録

**型の指定の仕方**
 - 型注釈
  明示的に指定する方法
 - 型推論
  値によって型を自動的に指定する

**基本的には型推論、型推論が効かない時は型注釈**

 - boolean型
  - true
  - false
 
 - number型
  - 整数
  - 少数
  - 負の数
 
 - string型
  - シングルクオート
  - ダブルクオート
  - バッククオート
 
 - object 型
 
 ```
 const person: {
    name: string;
    age: number;
 }
 ```
 - array型
 
 ```
 const fruits: string[] = ['Apple', 'Banana', 'Grape']
 ```
 - Tuple型
  - 配列の１つ目がstring、2つ目がnumber、3つ目がbooleanなど配列の中身まで詳しく指定したい時などに使う

  ```
  const book: [string, number, boolean] = ['business', 1200, false]
  ```

 - Enum型
   - 複数の決まった値しか入らない場合等に使用する
  
  ```
  enum CoffeeSize = {
    SHORT,
    TALL,
    GRANDE,
    VENTI
  }
  const coffee = {
    hot: true,
    size: CoffeeSize.TALL
  }
  coffee.size = CoffeeSize.SHORT
  ```

- any型
 - どんな型でも入る型
 - 基本的には使わないようにする

- Union型
  - 複数の型の指定ができる

 ```
 let unionType: number | string = 10;
 let unionTyoes (number | string)[] = [21, 'hello'];
 ```

- Literal型
  - 決まった値しか入らない型
  - const にすることでLiteral型に型推論される

 ```
 const apple: 'apple' = 'appel';
 let clothSize: 'small' | 'medium' | 'large' = 'large';
 ```
 
- typeエイリアス
  - 新たな名前で型自体を定義する
 
```
 type ClothSize: 'small' | 'medium' | 'large';
```

- 関数宣言時の型
 - 関数はパラメータと戻り値に型を定義する
 - パラメータには型推論が効かない、戻り値には型推論が効く
 - 基本的にパラメータ、戻り値両方に型注釈する
 
```
 function add(num1: number, num2: number): number {
   return num1 + num2
 }
 ```

- void型
 - 何も返さない型

- undefind型とnull型
 - どちらにもundefind と nullを入れることができる
- 特定の関数を代入する変数宣言時の型
 
 ```
 function add(num1: number, num2: number): number {
   return num1 + num2
 }
 const anotherAdd: (n1: number, n2:number) => number = add;
 ```

- callback関数の型
 
```
 function doubleAndHandle(num: number, cb: (num: number) => number): void {
   const doubleNum = cb (num * 2);
 }
 doubleAndHandle(21, doubleNum => {
   return doubleNum
 });
 ```

- unknown型
 - anyと似ていてどんな値も入れることができる
 - anyとの違いはunknown型の値を使うときに同じ型の値にしか入れることができない

- never型
 - voidと違いundefindも返さないときに使用できる

 ```
 function error(message: string): never {
   throw new Error(message);
 }
 ```

- インターセクション型

```
type Enginner = {
  name:string;
  role: string;
}
type Blogger = {
  name:string;
  follower: string;
}
type EngineerBlogger = Engineer & Blogger;
interface EngineerBlogger extends Engineer, Blogger {};

const quill: EngineerBlogger = {
  name: 'sam',
  role: 'front-end',
  follower: 1000
}

type NumberBoolean = number | boolean;
type StringNumber = string | number;
type Mix = NumberBoolean & StringNumber;
## Mixはnumber型になる
```
【備忘録】FTPサーバーをAWSで立てる

#今回の目的
AWSでサーバーを作成し、HTMLファイルとかFTPで置けるようにしたい。
本来であれば、ftpuserというFTPを実施する専用のユーザーを作成して、きちんと権限与えてFTPを行うものだが、今回はそれが面倒でまた個人開発用としてFTPを使いたいだけなので、rootユーザーでできるように設定する。

#EC2でポートのルールを設定する。

セキュリティグループで以下のポートを追加する。
※２つ追加する理由は、
「ポート21」はFTP通信でFTPサーバーに繋ぐ用のポートで、
「ポート60001-60010」はファイルを置く時に使用するポート。
分けている理由は、多くのファイルを置く時に重たくなるため、負荷を分散しているそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/485d2fdc-9030-d830-e07e-85a34174f4ef.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/1afa6b60-0411-1cd9-c413-74896ee2a8a7.png)


#「sudo su」で root ユーザーになっておく
```
sudo su
```


#vsftpをインストールする

※AWSにインストールするのであれば、ec2-userでログインしておく。
「サーバーという箱にApacheを入れるとWEBサーバーになる」と同じ考え方で、
「サーバーという箱にvsftpを入れるとFTPサーバーになる」というイメージです。

```
yum install vsftpd
```

#vsftpd.confのバックアップをとっておく
編集する前に、オリジナルのものをコピーして別名で保存し残しておきましょう。
※.orgはオリジナルの略称で、「このファイルはオリジナルのものですよ」と表すために付けています。
※cpコマンドの「-a」は元ファイルの属性とディレクトリの構成を保持してコピーするために使うオプション。

```
cd /etc/vsftpd/
cp -a vsftpd.conf  vsftpd.conf.org
```

#vsftpd.confを編集する

以下のコマンドで編集画面に入る。
※「i」を入力するとINSERTモードになり、編集できる。
※「o」を入力するとINSERTモードになり、且つ改行してくれる。（これ結構使うらしい。）
※Shift ＋　G で一番したの行に移動できる。

```
vi vsftpd.conf
```

以下の内容をvsftpd.confの一番下に追記する。

```vsftpd.conf
pasv_address=XX.XXX.XXX.XXX <!-- AWSのグローバルアドレスを入力 -->
pasv_enable=YES
pasv_addr_resolve=YES
pasv_min_port=60001 <!--60001~60010の中からランダムでこのPort番号を利用するという意味-->
pasv_max_port=60010
```
escキーでINSERTモードから戻れて、「:wq ＋ enter」で保存する。


#vsftpを再起動する
基本的に、configファイルを編集すると、再起動する。
編集したconfigファイルを読み込んでもらうため。

```
service vsftpd restart
```

#「ftpuser」と「user_list」ファイルを編集する
vsftpd配下に「ftpuser」と「user_list」があるので編集する。

コマンドはそれぞれ
vi ftpusers
vi user_list

「root」と記載されている箇所があるので「#」でコメントアウトする。
root → #root

■管理ファイル「user_list」について
/etc/vsftpd/user_list の挙動は、userlist_deny の値によって変わります。
userlist_deny=YES もしくは記述が無い場合には、user_list は接続禁止リストとして機能します。つまり、「このリストに記述されているユーザーは FTP 接続ができない」ということになります。
→今回はrootユーザーでFTPを使いたいので、「root」をリストからコメントアウトする。

■管理ファイル「ftpusers」について
/etc/vsftpd/ftpusersもあります。
こちらはとにかくアクセスを禁止するためのリスト。
user_listよりも優先順位が高いので、user_listで許可されているユーザーであっても、このリストにユーザー名を書かれてしまうとアクセスできなくなります。

#rootユーザーにパスワードを設定しておく
rootにパスワードが設定されていない場合、FTPでアクセスした時に拒否されるので、設定する。

```
passwd root
```

#もしFTPユーザーを作成し、アクセスしたい場合

以下のコマンドでFTPでアクセスする専用のユーザー「ftpuser」を作成し、パスワードを設定する。

```
useradd ftpuser
passwd ftpuser
```

もしWebサーバーの「/var/www/html」にアクセスしたい場合、フォルダの所有者がApacheになっていると思われるので、Apacheユーザーと同じ所有者グループをftpuserに設定してあげないと、「/var/www/html」にアクセスできない。

#Filezilaで確認する
ホストにはAWSのグローバルアドレスを入力する。
![スクリーンショット 2020-05-03 18.04.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/d6f95c46-bf24-f148-0f3d-2cede1b49c38.png)

ファイルがアップロードできれば完了！！
rbenvを利用してRubyのバージョンを最新安定版にする

# 環境
- macOS Mojave 10.14.6
- rbenv 1.1.2
- Homebrew 2.2.10

# 方法
## 1. 公式サイトで最新版を確認する。
https://www.ruby-lang.org/ja/downloads/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265399/209cb11e-d164-ec3b-42c8-94e6bfe0987d.png)

## 2. rbenvのインストール可能なバージョン一覧に、1.で確認したバージョンがあるか確認する。
```
$ rbenv install --list
```


### （もし確認したバージョンが無い場合）
以下のコマンドで、rbenvとruby-buildを更新する。

```
$ brew upgrade rbenv ruby-build
```
再度、rbenvのインストール可能なバージョン一覧に、1.で確認したバージョンがあるか確認する。

```
$ rbenv install --list
```

## 3. rbenvで1.で確認したバージョンをインストールする。
※今回はバージョン2.7.0

```
$ rbenv install 2.7.0
```

インストールされているか確認する。

```
$ rbenv versions
```

## 4. インストールしたバージョンは適用させる。
###（環境全体に適用）

```
 $ rbenv global 2.7.0
```

適用されているか確認する。（適用されていない場合はカレントディレクトリに適用させる。）

```
$ rbenv versions
```

###（カレントディレクトリに適用）

```
 $ rbenv local 2.7.0
```

適用されているか確認する。

```
$ rbenv versions
```

# おわりに
『もっと簡単にできる方法あるよーーー！』

『ここわかりにくいよーーー！』

『ここ間違っているよーーー！』

等あればコメントいただけるとめちゃくちゃ嬉しいです！！！

twiiter → https://twitter.com/jiko797torayo
[Rust/WinRT] トースト通知を表示する

2020年4月30日に, Microsoft から [Rust/WinRT](https://github.com/microsoft/winrt-rs) のプレビュー版が[発表されました](https://blogs.windows.com/windowsdeveloper/2020/04/30/rust-winrt-public-preview/)！これまでもサードパーティによる [winrt](https://crates.io/crates/winrt) クレートはありましたが, 今後は Microsoft が WinRT の Rust 言語プロジェクションをサポートしていくことになります ([issue76](https://github.com/microsoft/winrt-rs/issues/76)).

興味があったので早速試してみました. お題はトースト通知を表示することです (参考資料が豊富にありとっつきやすかったので).

__2020-06-09追記__ crates.io に winrt 0.7.0 が公開されたのに伴いコード修正.

__2021-03-20追記__ Rust for Windows (windows-rs) に改名されたのに伴いコード修正. Win10 v20H2, windows="0.5.0" で動作確認しました.


# 環境

本記事では Rust/WinRT の動作確認に Win10 Pro v1909 build 18363.778 を用いました.

- Visual Studio Build Tools 2019 (16.5.4)
- Rust 1.43.0 stable-x86_64-pc-windows-msvc

これだけで動きました. あたかも WinRT が pure Rust クレートかのような簡単さです. ただコンパイルが毎回5秒程度かかるのが若干気になります. あとドキュメントが[まだオンラインで見られない](https://github.com/microsoft/winrt-rs/issues/109)ため, `cargo doc` して自分で生成する必要があります.

__2021-03-20追記__ このあたりの問題は解決しましたが説明すると長くなるのでいつか別記事にします. さしあたり[チュートリアル](https://docs.microsoft.com/en-us/windows/dev-environment/rust/rss-reader-rust-for-windows)を読むことを強くお勧めします.


# コード

参考文献の最初に挙げた C++/WinRT のコードを翻訳しただけですが, いろいろと苦労しました.

```rust:build.rs
fn main() {
    windows::build!(
        windows::ui::*,
        windows::data::xml::dom::{XmlDocument, XmlText, XmlNodeList},
        windows::ui::notifications::*,
    );
}
```

```rust:src/main.rs
mod bindings {
    ::windows::include_bindings!();
}

use bindings::windows::ui::notifications::{
    ToastNotificationManager, ToastTemplateType, ToastNotification,
};

fn main() -> windows::Result<()> {
    let notification_manager = ToastNotificationManager::get_default()?;

    let toast_xml = ToastNotificationManager::get_template_content(ToastTemplateType::ToastText01)?;

    // 通知の内容を設定する
    let text_node = toast_xml.get_elements_by_tag_name("text")?.item(0)?;
    let text = toast_xml.create_text_node(r"Hello from Rust/WinRT!")?;
    text_node.append_child(text)?;

    // トースト通知を表示する.
    // v1709 以降は AppId が必要なので, Powershell のものを使う
    let toast = ToastNotification::create_toast_notification(toast_xml)?;
    notification_manager
        .create_toast_notifier_with_id("{1AC14E77-02E7-4E5D-B744-2EB1AE5198B7}\\WindowsPowerShell\\v1.0\\powershell.exe")?
        .show(toast)?;

    std::thread::sleep(std::time::Duration::from_millis(10)); // <- この行を消すとなぜかトースト通知が表示されない
    Ok(())
}
```

## よくわからなかった点

- [ ]  シングルバイナリでは AppId を発行することができない？
- [ ]  参考文献その1では `ExpirationTime` をセットしているが, `windows::foundation::DateTime` 型の取得まわりがうまくいかなかった.
- [ ]  最後にスリープさせないと通知が出ずにプログラムが終了してしまう.


# 参考文献

- [ネイティブの C++ から UWP の API を呼ぶ (C++/WinRT を使って)](https://blog.okazuki.jp/entry/2018/10/16/144556)
- [Fall Creators Updateを適用するとトースト通知できなくなる](https://qiita.com/akiqsinco/items/0c0d5ae4abc756a594b3)
- [[powershell]トースト通知を行う。](https://qiita.com/kiduki/items/0a00798a6251abd9de82)
- Microsoft Docs
  - [ToastNotification Class](https://docs.microsoft.com/ja-jp/uwp/api/windows.ui.notifications.toastnotification?view=winrt-18362) 等
Prophetの時系列予測をPlotlyでよりわかりやすく可視化する

# 概要
Facebook製の時系列予測ライブラリProphet、時系列予測について全くの知識が無くても、曜日の変動、全体のトレンド傾向等がプロットできてすばらしいです。
そのプロットについて、公式マニュアルには「plotlyを使ってよりインタラクティブに可視化できるよ」とさらっと書いているだけなのですが、いろいろいじってみたところ、以下のポイントにはまりました。

* トレンド線、変化点はオプションで指定しないと表示されない
* Google Colaboratory上だとplotlyが表示されない  

誰かの役に立てばと思い、はまりポイントの解決法を共有します。

# 環境
macOS 10.15
Python 3.7.6
Prophet 0.6
Plotly 4.6.0


# この記事のNotebook
以下にアップロードしてあります。
https://github.com/nekodango/prophet_plotly_sample

# プロットでPlotlyを使う
[公式のチュートリアル](https://facebook.github.io/prophet/docs/quick_start.html#python-api)の通り、[ここ](https://github.com/facebook/prophet/blob/master/examples/example_wp_log_peyton_manning.csv)
から"example_wp_log_peyton_manning.csv"をダウンロードして、読み込みます。

```python

import pandas as pd
from fbprophet import Prophet

df = pd.read_csv('example_wp_log_peyton_manning.csv')
m = Prophet()
m.fit(df)
future = m.make_future_dataframe(periods=365)
forecast = m.predict(future)
```

以下のコードで通常のプロットが表示されます。

```py
fig = m.plot(forecast)
```



![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209681/97764f46-5f97-d9ae-ba1d-5b449e1bd690.png)



この状態で、

```py
from fbprophet.plot import plot_plotly, plot_components_plotly
import plotly.offline as py
py.init_notebook_mode()
```
してから

```py
fig = plot_plotly(m, forecast)
py.iplot(fig)
```
すると、Plotlyを用いたプロットが表示されます。
![スクリーンショット 2020-04-30 17.38.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209681/8345b749-b20c-9781-1a68-d7a7b12b9a8b.png)



同じく、plot_componentsは

```py
fig = m.plot_components(forecast)
```

を

```py
fig = plot_components_plotly(m, forecast) 
py.iplot(fig)
```

に書き換えると、Plotlyを用いた表示が出ます。
![スクリーンショット 2020-04-30 17.39.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209681/e59ed577-2c55-a39b-03ca-00bbd67e89de.png)

プロットをグリグリしていると、こんな便利なものがほんとにタダでいいのか疑わしくなります。Prophet恐るべし。

# はまりポイント
## 1. トレンド線、変化点はオプションで指定しないと表示されない
`plot_plotly`を呼ぶ時に、`trend`および`changepoints`オプションで指定する必要があります。

```py
plot_plotly(m, forecast, trend=True, changepoints=True)
```
![スクリーンショット 2020-04-30 17.40.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209681/95e47e89-bfc0-15f5-1b63-dec809a879e9.png)



## 2. Google Colaboratory上だとplotlyが表示されない
stackoverflowの投稿を参考にさせていただきました。
https://stackoverflow.com/a/57903750

`plotly.io`をimportして、`renderers.default`を`colab`にセットします。

```py
from fbprophet.plot import plot_plotly, plot_components_plotly

import plotly.io as pio
pio.renderers.default = "colab"
```

で、描画する際には`fig.show()`します。

```py
fig = plot_plotly(m, forecast)
fig.show()
```

Colabですぐ試せるようノートブックを以下にアップロードしてあるのでお試しください。
https://github.com/nekodango/prophet_plotly_sample/blob/master/prophet_plotly_colab.ipynb

# おまけ
Plotlyのプロットにタイトルを付けたい場合、以下でできます。

```py
fig.update_layout(title="plpt_plotly")
```
![スクリーンショット 2020-04-30 17.41.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209681/2d33d9a7-4fec-fce4-d4c3-6d74e5341908.png)

あとで試して驚愕したのですが、日本語をタイトルに設定しても特に文字化けせず普通に表示されました。Prophet恐るべし。(大事なことなので二回言いました)

# まとめ
Colab上で時系列データをお手軽にグリグリできるのは何かと便利です。ぜひお試しあれ。
#Nuxt.js + #Vue で axios を利用して example.com にリクエストする簡単な例

# Ready

axios をインストールして nuxt config にも追記しておく

```
$ yarn add @nuxtjs/axios
```

Edit nuxt.config.js

```
 modules: [
  '@nuxtjs/axios',
],
```

# pages/index.vue

```vue
<template>
  <h1>
    {{ response }}
  </h1>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const response = await $axios.$get('https://example.com')
    return { response }
  }
}
</script>

```

# Example

レスポンスとしてHTMLが返ってきて、タグがそのまま表示される

![image](https://user-images.githubusercontent.com/13635059/80857983-45f43400-8c91-11ea-8d37-8e8e89298bcd.png)


# Google Chrome Tool

Network に直接 example.com へのリクエストは出てこない
axios という項目の中に隠蔽されてしまっているのだろうか

![image](https://user-images.githubusercontent.com/13635059/80857989-4f7d9c00-8c91-11ea-9978-7217beb321d8.png)


# 参考

- https://axios.nuxtjs.org/setup.html#install
- https://ma-vericks.com/nuxt-axios/



# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3121











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Vue CLIインストール時のエラー対応


npm install -g @vue/cliをしたところ下記のエラーが発生しました。
下記の様にして、一つずつ対処しました。

##エラー
```
npm ERR! Unexpected end of JSON input while parsing near 
```

##対処
```
npm cache clean --force
```


次に、下記のようなエラーが発生しました。

##エラー
npm ERR! Error: EACCES: permission denied, access 
'/usr/local/lib/node_modules'

##対処
```
sudo chown -R $USER /usr/local/lib/node_modules
```

参照URL
https://flaviocopes.com/npm-fix-missing-write-access-error/

上記の様にエラーを解消して、無事にVue CLIをインストールすることができました。
Dagger2 でのエラー対処 java.lang.RuntimeException: android.app.Application does not implement dagger.android.HasAndroidInjector 

# 発生した問題
Dagger2 を導入したいが下記のエラーがでて、うまくいかない
どうやら `AndroidInjection.inject(this)` でエラーが発生している模様

```
java.lang.RuntimeException: android.app.Application does not implement dagger.android.HasAndroidInjector
```

# 解決策
Manifest に Application クラスを継承したクラスを書いていなかったのが問題
App クラスを追加したら解決した。

```:AndroidManifest
    <application
        android:name=".App"
```

github
 https://github.com/higuuu/higuuu-github-api/commit/bdca6867948e4dbacc02f346358a1a48394c0d2d
get_supportedに躓いたのでその解決方法

## 環境
pip 20.1
python 3.7.3
## 概要
pipが対応しているcpを知りたかったけど

```python
from pip._internal.pep425tags import get_supported
get_supported()
```

じゃ動かなかった。
試行錯誤した結果、

```python
from pip._internal.utils.compatibility_tags import get_supported
get_supported()
```

で動いた。
[Unity初級]ゲームデータの保存

#概要
変数の中身を保存、読み込み、削除します。
Unityの実行環境でも動作確認ができます。
#本文
```cs

    string text="eee";

    public void Save() {
        PlayerPrefs.SetString ("POINT", text);
        PlayerPrefs.Save();       
    }

    public void Load() {
        text = PlayerPrefs.GetString("POINT", "");//第二引数はデータがない時の戻り値
    }

    public void Delete() {
		PlayerPrefs.DeleteAll ();
    }
```

![スクリーンショット (182).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/5ff70a3d-b8b8-befe-95c4-c0d7b536772e.png)

コードを記述して、ボタンを押したらそれぞれSave()とLoad()とDelete()が呼び出されるように設定します。
Save()では"POINT"を読み書きのキーにして（適当な文字列なので自由に変更しても大丈夫です）変数textの中身をコンピューターに記憶させます
Load()では同様に"POINT"をキーにして保存してあったデータを読み込んでくれるのでそれをtext変数に入れてます。
Dekete()では保存してあったデータをすべて削除しています。
#追記

```cs

PlayerPrefs.DeleteKey("POINT")
```
このように記述すれば、消したいものを指定して削除することもできます。
#追記2
今回はString型のデータを扱ってますが、Int型とfloat型も扱うことができます。

```cs

PlayerPrefs.SetInt ("POINT", text);

PlayerPrefs.SetFloat ("POINT", text);
```

#追記3
保存されたデータが有るか無いかを確認する時は

```cs

PlayerPrefs.HasKey("POINT");//true or falseを返します
```
[自分用メモ] Azure、ネットワークセキュリティーグループでPublic,Privateの区画を作る

Azure初心者の自分用のメモ。
前に一度勉強したけど、コロナとGWで久しぶりに手を動かしてみたんでレシピ的に整理。（2020/5/3時点）


前提として、Microsoft アカウントは作成済。
サブスクリプションも用意済。

- リソースグループを作成　
    - MyRG1
       
- 仮想ネットワークを作成
    - vn-yokohama , 10.0.0.0/16
    - サブネットを二つ作成 
        - default , 10.0.0.0/24 
        - subnet-1 , 10.0.1.0/24
        - subnet-2 , 10.0.11.0/24
     
- ネットワークセキュリティーグループを作成
        - nsg-public
        - nsg-private

- サブネットとネットワークセキュリティーグループを紐づけ
        - subnet-1  --> nsg-public
        - subnet-2  --> nsg-private

- Virtual Machineを３台作成
    - Web Server用
        - subnet-1
        - とりあえずubuntu
        - vm-web1
            - PIP(Public IP）はあり
            - NICを指定する際に「ネットワークセキュリティーグループ」は「nsg-public」を指定
    - DB Server用
        - subnet-2
        - とりあえず ubuntu
        - vm-db1
            - PIP(Public IP)なし
            - NICを指定する際に「nsg-private]を指定
    - Test用
        - サブネットはdefault (10.0.0.0/24)
        - とりあえずubuntu
        - vm-default
        - ネットワークセキュリティーグループはなんでもよし（新規作成でOK）

#テスト

- vm-defaultへログイン
    - vm-defaultへログインしてから、vm-db1へログイン（ログインできるはず）
- vm-web1へログイン
    - 同様に、vm-db1へのログインができることを確認

- nsg-privatenoの以下を変更
    - 受信ポートの規則を追加
        - ソースサービスタグ：VirtualNetwork
        - ソースポート範囲: * 
        - 宛先:VirtualNetwork
        - 宛先ポート範囲:*
        - プロトコル:ANY
        - アクション：拒否
        - 優先度:200
        - 名前: DenyInboundFromVNET
    - 保存。有効になるまで１分程度待機。
    - vm-default, vm-web１からvm-db１にログインできなくなっていることを確認

- nsg-privateへ以下を追加
    - 受信ポートの規則を追加
        - ソース: IP Address
        - ソースIPアドレス：10.0.1.0/24
        - ソースポート範囲: * 
        - 宛先:Any
        - 宛先ポート範囲:22
        - プロトコル:TCP
        - アクション：許可
        - 優先度:100
        - 名前: AllowSSHfromSub1
    - 保存。有効になるまで１分程度待機。
    - vm-db1へはvm-defaultからはログインできないが、vm-web1からは可能になる

#　気が付いたこと
- vm-db1にはPublic IPがないけど、インターネットへの通信ができる。(vm-db1からcurl www.google.comなどは応答される）
- これはAzureのネットワークにSNATというNAT機能が、標準利用されているため。
オンプレやAWSなどでNATインスタンスを用意するのに比べると少し独特だが、便利だし無料。ただし性能は限定的のようなのでSNATで処理しきれないようであれば、自分でNATインスタンスを用意して利用するのだそうだ。
- 
-　https://blog.nnasaki.com/entry/2019/12/11/073558
    -　
- Outboundもできないようにするなら、ネットワークセキュリティーグループの送信ポートの規則でできそう。

-AWSだとソースに別の「セキュリティーグループ」を設定できるけど、Azureだとネットワーク・セキュリティーグループはまずはネットワーク。アプリケーション・セキュリティーグループというでサーバーをグルーピングして指定する。両者一長一短ありそう。
眺めて覚える C# Xamarin Forms(11) ListView Programmatically

#スマートフォンで一番使うリストビューを解説します。
##前回に続いてC#バージョンです。Programmatically
##空のプロジェクトを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/3b95bcd3-0913-1b33-aa92-b5c53426f22c.png)

##モバイルアプリを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/b5a27fb1-beee-2eeb-0dd6-125be138bcf6.png)

##プロジェクト名を指定して作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/e6487bb4-6e84-5033-e966-57f9157345d8.png)

##空白を選択してOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/4f066c1a-f19b-201e-10f3-c4028cbc6f49.png)

#MainPage.xaml.csを置き換えます。

```MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Xamarin_10
{
    // Learn more about making custom code visible in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            var list = new List<string> { "東京", "神田", "お茶の水", "四谷", "新宿", "中野", "荻窪" };
            var lv = new ListView() { ItemsSource = list };
            lv.ItemTapped += Lv_ItemTapped;
            Content = new Xamarin.Forms.ScrollView() { Orientation = ScrollOrientation.Vertical, Content = lv };
        }

        private void Lv_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            DisplayAlert("Tapped",$"{e.Item}", "OK");
        }
    }
}

```



実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/0e090f7b-354a-a777-a460-468836b228cc.png)
P5.js 日本語リファレンス(beginContour)


このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の beginContour関数を説明します。

## beginContour()

### 説明文

beginContour() と endContour() を使用して、"O" のような中抜き形状の図形を描画します。 beginContour() は形状の頂点の記録を開始し、endContour() は記録を停止します。最初に外部形状を時計回りの順序で頂点を定義して、次に内部形状を反時計回りの順序で頂点を定義する必要があります。

これらの関数は beginShape() / endShape() ペア内でのみ使用でき、translate()、rotate()、scale() などの変換は beginContour() / endContour() ペア内では機能しません。また、内部で ellipse() や rect() などの他の形状を使用することもできません。

### 構文

beginContour()

### 例1

```javascript
function draw() {
  background(255, 255, 130); // 背景を黄色に設定
  translate(50, 50);
  stroke(255, 0, 0); // ストロークを赤色に設定

  beginShape(); // 中抜形状の描画開始
    //形状の外側の部分、時計回り
    vertex(-40, -40);
    vertex(40, -40);
    vertex(40, 40);
    vertex(-40, 40);

    //形状の内部部分、反時計回り
    beginContour();
      vertex(-20, -20);
      vertex(-20, 20);
      vertex(20, 20);
      vertex(20, -20);
    endContour();
  
  endShape(CLOSE); // 中抜形状の描画終了
}
}
```

### 実行結果
![beginContour.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/b488f6e4-81ab-25cb-769d-3a3edf30be3c.png)

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
リストの連続する値をまとめる


単調増加の数列を、連続する値毎にまとめる簡潔な記述方法があったのでメモしておきます。

```python
import itertools

sample = [1,2,3,5,6,7,9,10]

[list(g) for _, g in itertools.groupby(
    sample, key=lambda n, c=itertools.count(): n - next(c))]

# => [[1, 2, 3], [5, 6, 7], [9, 10]]
```

[`itertools.groupby`](https://docs.python.org/3.9/library/itertools.html#itertools.groupby) は、第一引数のイテラブルの各要素を第二引数に渡して、その戻り値が同一の連続する要素を返すイテレータを、第二引数の関数に渡した要素とともに返します。
上の例では、第一引数に`sample`、第二引数`key`にラムダ式をとっています。
ラムダ式には、`n`と、省略可能な`c`の二つの引数がありますが、`c`には`itertools.count()`のデフォルト値が指定されており、`groupby`における連続する要素の同一性の判定の際に呼ばれる時は、`n`に`sample`の各要素が渡されます。`itertools.count()`は、`0`から`1`ずつ増加する数を返すイテレータを生成します。`c`のデフォルト値はラムダ式が定義されたときに一回だけ実行され、0から順に`+1`された数を返すイテレータが代入されます。ですので、`n - next(c)`は、`next(c)`は毎回の呼び出しで`1`ずつ増加するので、`n`が`1`づつ増加すれこのラムダ式からは同じ値が返されますが、`n`が`1`より大きく増加すれば違う値が返されます。このラムダ式の戻り値が同一の連続する要素を返すイテレータが`g`で、`list(g)`により、連続した要素をネストしたリストにまとめたリストがリスト内包表記により生成されます。


* 参考: https://stackoverflow.com/questions/10420464/group-list-of-ints-by-continuous-sequence
Miroのショートカットまとめ

Miroがすごい便利なんですが、ショートカットッキーが英語書かれていて、ショートカットキー一覧を開きながら作業できないので、
まとめました。

ツール系

|キー  |内容  |
|---|---|
|V/H  |V だと矢印、Hだと手にカーソル表示を切り替える|
|T  |テキストボックス  |
|N  |付箋  |
|S  |図形  |
|R  |四角  |
|O  |円  |
|L  |矢印ツール  |
|P  |ペンツール  |
|E  |消しゴムツール  |
|Ctrl + Z  |Undo  |
|Ctrl + Shift + Z  |Redo  |
|F  |フレーム  |
|M  |ミニマップ  |

操作系

|キー  |内容  |
|---|---|
|Ctrl + C/Ctrl + V |コピー/ペースト|
|Ctrl + X  |カット  |
|Ctrl + D  |複製  |
|alt + drag  |複製  |
|shift + drag  |ドラッグ範囲のアイテムを選択  |
|Ctrl + click  |クリックによる複数選択 |
|enter  |選択したアイテムを編集  |
|esc  |選択、編集を解除  |
|backspace  |削除  |
|Ctrl + G  |グループ化  |
|Ctrl + shift + G  |グループ化解除  |
|Ctrl + L  |ロック/ロック解除  |
|PgUp  |選択したアイテムを前面に配置  |
|PgDown  |選択したアイテムを後面に配置  |


表示系

|キー  |内容  |
|---|---|
|arrowkey |選択したアイテムを移動|
|Ctrl + -  |縮小  |
|Ctrl + +  |拡大  |
|Ctrl + 0  |拡大比率を100%にする  |
|Ctrl + 1  |スクリーンのサイズに合わせて拡大  |
|Ctrl + 2  |選択したアイテムに対して拡大 |
|space + drag  |キャンバスを移動  |
|G |グリッドの表示/非表示  |
|Ctrl + F  |検索  |
ゾンビプロセス（笑）に悩まされた件

# ことの始まり
Railsで開発をしていてRedisを使ってみた。

1日目は正常にタスクが終わっていたのに、
その次の日にログインするとなぜか起動もしていないのにRedisが起動してた。

Dockerのコンテナに開発してたものを乗せるために作業をしてたら、
使いたいポートがRedisに専有されていて立ち上がらないｗｗ

とりあえずRedisを一回Killコマンドで殺そうとおもって、
Killしたけどよみがえってくるじゃん！
Redisをアンインストールしてもだめだし「どうなってんのこれ？？」状態
これが噂のゾンビプロセスか？？？

# 原因
いつの間にか自動起動設定がONになっていたこと。

# 解決法
以下のコマンドでサービスをストップして自動起動設定をOFFにしたら解決しました。

```terminal:bash
systemctl stop redis
systemctl disable redis
```

# まとめ
同期に相談して見事に解決しました。
同期に本当に感謝します！
こんなことで悩むなんて思いもしませんでした。
集約とコンポジションの例えについて

# 概要

**「集約」と「コンポジション」の違いについて**

[-デザインパターンとともに学ぶ-オブジェクト指向のこころ](https://www.maruzen-publishing.co.jp/item/b294729.html)を読んでいて「集約」と「コンポジション」の違いについて書かれていたのが気になったので、自分なりに簡単にまとめてみました。

## 定義

 この書籍には、「集約」と「コンポジション」の定義がGoFとUMLで違うということが記載されていました。その理由はGoFがUML制定以前に記されたものであること、採用されているモデリング言語が違うことのようです。この記事では、現在一般的に使われているUMLの定義に沿って記述しています。
 また、両者をそれぞれ別のものに例えるのではなくて、出来る限り統一のものに例えてみました。

### コンポジション

> 保持されているものが保持しているものの一部である場合
> P.29

この書籍では「車とエンジン」で例えられています。

実装段階では、Aのインスタンスが生成されると同時にBが生成され、Aが破棄される時にBも破棄されます。このことから、「両者の関係に強い結びつきがある」と言われます。

![compositionA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222848/c853cbb4-c961-b173-eca7-b2dc909af6ac.png)

これは社員と社員証の関係で考えると解りやすいかなと思いました。
社員が入社したと同時に社員証が発行され、退職したと同時に破棄されます。
社員証の寿命（生成から破棄）は独立しているとは言えません。

![composition.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222848/e9dfd03c-3dae-e6f5-60b9-0c399e77ef21.png)

### 集約

> 独立して存在できる何かのコレクションがある場合
> P.29

こちらは空港と飛行機で例えられています。

コンポジションのようなAとBの強い結びつきはありません。
Bインスタンスの寿命はAインスタンスに縛られることはありません。

![aggregationA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222848/d84b84f4-2f98-4fa2-88bf-e54373af096b.png)

これは会社と社員の関係と考えました。
ある日、会社がなくなったとしても社員は別の会社で社員になることが出来ます。
（労働市場における会社と従業員といった方が伝わり易いかもしれません）

![aggregation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222848/1ed887f2-9883-4758-3b37-dafe887b594c.png)

## まとめ

実際の業務で「集約」と「コンポジション」の選択はどの段階で起きるのかが気になり、調べたり考えたりした内容を記述させてもらいました。実装段階で選択することもあるかもしれませんが、例を考えてみた時に、概ね仕様により決まる印象を受けました。実装で意識してみるとまた、違った印象を得れるかもしれないので楽しみにしています。
seeds.rbのデータを本番環境で反映させたい！


#課題
開発環境でseeds.rbに記載した内容が本番環境で反映されない！！

#seedデータ
seeds.rbとは初期データを生成してくれるファイルのことで、
下記のように記述することで、予めデータを作ることができます。

```seeds.rb
lady = Category.create(:name=>"レディース")
men = Category.create(:name=>"メンズ")
baby = Category.create(:name=>"子供")
toy = Category.create(:name=>"おもちゃ")
clothes = Category.create(:name=>"服")
accessory = Category.create(:name=>"消耗品")
interior = Category.create(:name=>"インテリア")
music = Category.create(:name=>"音楽")
game = Category.create(:name=>"ゲーム")
cosmetics = Category.create(:name=>"化粧品")
```
#開発環境(データベース)に反映
続いて、seeds.rbに記述した内容をデータベースに反映するにはターミナルで下記のコマンドを実行しましょう。

```
$ rails db:seed 
```
これでデータベースの登録は完了です。


#テスト環境に反映
```
$ rails db:seed RAILS_ENV=test
```


#本番環境に反映
```
$ rails db:seed RAILS_ENV=production
```

これで解決だ！！
と安堵するのはまだ早い、、。
何故だかまだ本番で反映されていなのです。

#EC2(サーバー)側での実行が必要

/var/www/アプリ名/current で実行すればデータが登録されました！

```
$ cd current
```
で指導して、

```
$ rails db:seed RAILS_ENV=production
```
を実行すれば完璧です！
Pythonのリストから条件に合致する最初の要素を検索(find)する方法

# 概要
JavaScriptでいう`Array.prototype.find()`的な操作をPythonで行う方法について調べたメモ。

```javascript:javascriptのfind()
const fruits = ["apple", "lemon", "melon", "orange"];
const elm = fruits.find(e => e.endsWith("n"));
console.log(elm); // "lemon"
```

# filter関数を用いた方法
`filter`関数はラムダ式で記述された無名関数を第１引数で受け取り、それを第２引数のリストの各要素に適用する。結果が真となった要素を抽出してイテレータが返されるので、`list`関数を適用すればリストとして結果が得られる。

```python:filter関数
    fruits = ["apple", "lemon", "melon", "orange"]
    # filter関数
    lst = list(filter(lambda x: x.endswith("n"), fruits))
    assert lst == ["lemon", "melon"]
    # filter関数 合致する要素なし
    lst = list(filter(lambda x: x.endswith("x"), fruits))
    assert lst == []
```

`list`関数の代わりに`next`関数を適用すれば、条件に合致する最初の要素が得られる。
`next`関数の第２引数には、要素が見つからなかった場合のデフォルト値として`None`を指定しておく。（この指定がないと、`StopIteration`例外が送出されて異常終了するので注意）

```python:filter関数+next関数によるfind
    # filter関数によるfind
    elm = next(filter(lambda x: x.endswith("n"), fruits), None)
    assert elm == "lemon"
    # filter関数によるfind 合致する要素なし
    elm = next(filter(lambda x: x.endswith("x"), fruits), None)
    assert elm == None
```

# ジェネレータ式によるfind
ジェネレータ式とは、リスト内包表記のような記法でジェネレータを定義する式。ジェネレータとはイテレータを返すものなので、`next`関数に渡すことができる。

```python:ジェネレータ式+next関数によるfind
    # ジェネレータ式によるfind
    elm = next((f for f in fruits if f.endswith("n")), None)
    assert elm == "lemon"
    # ジェネレータ式によるfind 合致する要素なし
    elm = next((f for f in fruits if f.endswith("x")), None)
    assert elm == None
```

第１引数がジェネレータ式。リスト内包表記との違いは、`[ ]`でなく`( )`で囲む点。

```python:ジェネレータ式
(f for f in fruits if f.endswith("x"))
```
Nuxt.jsのローカル開発環境でLIFFのデバッグをする方法

# Nuxt.jsのローカル開発環境でLIFFのデバッグをする方法

## はじめに

LIFFv2にはLINEログインの機能がありますが、ログイン後のリダイレクト先がLINEDevelopersで登録した`https`のURLに固定されてしまうため、ローカルでの開発が結構大変になります。  
そこで、本記事ではローカル環境で簡単にLIFFのデバッグをする方法を解説します。

## 実行環境

- Nuxt.js v2.12.2
- macOS Catalina V10.15.3

## localhostに証明書を設定する

localhostをLINEDevelopersへ登録できるようにするため、localhostに証明書を設定します。

### mkcertをインストール

[mkcert](https://github.com/FiloSottile/mkcert)を使って証明書（自己署名）を生成します。

```terminal
brew install mkcert
mkcert -install
mkcert localhost
```

以下の証明書が発行されます。

- localhost.pem
- localhost-key.pem

### nuxt.config.jsを編集

nuxt.config.jsでserverの設定を行います。

一番上に

```js
import path from 'path'
import fs from 'fs'
```

を追加してモジュールを読みこみ、

```js
export default {

  // いろいろ設定が書いてあり...

  server: {
    port: 3000,
    host: 'localhost',
    https: process.env.NODE_ENV === 'production' ? {} : {
      key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem'))
    }
  }
}
```

`export default`の中に`server`プロパティを追加します。

すでに`server`プロパティが設定されている方は以下の部分だけを追加してください。

```js
https: {
  key: fs.readFileSync(path.resolve(__dirname, "localhost-key.pem")),
  cert: fs.readFileSync(path.resolve(__dirname, "localhost.pem"))
}
```

gitを使用している方は`.gitignore`に以下を追記してください

```.gitignore
localhost-key.pem
localhost.pem
```

これで証明書の設定は完了です。

```terminal
npm run dev
```

をするとhttpsでサーバが立ち上がります。

## ローカル環境用のLIFFを作成する

LIFFではエンドポイントURLを1つしか登録できないため、本番環境のものとは別にローカル環境用のLIFFを作成します。

LINEログインのチャネルを開き、エンドポイントURLに`https://localhost:3000`を指定してLIFFを作成してください。  
※nuxt.config.jsの`server`プロパティで`localhost`以外や3000番ポート以外を指定された方はそちらを登録してください。

![スクリーンショット 2020-04-30 11.25.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260292/555ae55f-5b25-af4f-3e58-567f1559ed40.png)

## liffIdを環境変数に設定する

ローカル環境と本番環境で自動的にliffIdを切り替えるため、liffIdを環境変数に設定します。

まずdotenvモジュールをインストールします。

```terminal
npm i @nuxtjs/dotenv
```

configフォルダを作成し、`.env.dev`と`.env.prod`の2ファイルを作成します。

次に、`.env.dev`に開発環境用のliffId、`.env.prod`に本番環境用のliffIdを記述します。

```text:.env.dev
liffId=開発環境用のliffId
```

```text:.env.prod
liffId=本番環境用のliffId
```

最後にconfigファイルを設定します。`nuxt.config.js`を開き、`modules`に以下の記述を追加します。

```js
modules: [

  // いろいろ設定が書いてあり...

  [
      '@nuxtjs/dotenv',
      {
        filename: process.env.NODE_ENV === 'development' ? './config/.env.dev' : './config/.env.prod'
      }
    ]
],
```

これで環境変数の設定は完了です。

**※gitを使用している方は`.env.prod`と`.env.dev`を`.gitignore`に追加してください。**

※GitHub Actionsで自動デプロイをしている場合は`.gitignore`に追加してしまうとbuildの際に読み込まれないためご注意ください。

## 環境変数を読み込む

liff.initの`liffId`を以下のように書き換えます。

```js
liff
  .init({
    liffId: process.env.liffId // 環境変数を読み込む
  })
  .then(() => {
    // 成功した時の処理
  })
  .catch((err) => {
    // 失敗したときの処理
  });
```

これですべての設定が完了しました。

`npm run dev`をすると開発環境用のliffIdが、`npm build`や`npm generate`などをすると本番環境用のliffIdが読み込まれます。

## 参考記事

以下の記事を参考にさせて頂きました。

[【Nuxt.js】ローカル環境をhttpsで起動する方法](https://qiita.com/nobita_x009/items/0ce13d7ba08a287fbf94)

[Nuxtで@nuxtjs/dotenvを使って環境変数を環境ごとに読み分ける](https://blog.ikedaosushi.com/entry/2019/04/17/220317)
眺めて覚える C# Xamarin Forms(10) ListView

#スマートフォンで一番使うリストビューを解説します。
##空のプロジェクトを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/3b95bcd3-0913-1b33-aa92-b5c53426f22c.png)

##モバイルアプリを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/b5a27fb1-beee-2eeb-0dd6-125be138bcf6.png)

##プロジェクト名を指定して作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/e6487bb4-6e84-5033-e966-57f9157345d8.png)

##空白を選択してOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/4f066c1a-f19b-201e-10f3-c4028cbc6f49.png)

##MainPage.xamlを開いて StackLayoutの部分を変更します。

```MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Xamarin_10.MainPage">
    <StackLayout Margin="20,35,20,20">
        <ListView>
        <ListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>東京</x:String>
                <x:String>神田</x:String>
                <x:String>お茶の水</x:String>
                <x:String>四谷</x:String>
                <x:String>新宿</x:String>
                <x:String>中野</x:String>
                <x:String>荻窪</x:String>
            </x:Array>
        </ListView.ItemsSource>
    </ListView>
    </StackLayout>

</ContentPage>

```

##実行すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/39ace0f0-429d-ab38-c246-674d8bf5764a.png)
Raspberry pi 4 に Xubuntu を lightdm でインストールする

[Ubuntu 20.04 LTS Server を Raspberry Pi 4 にインストール](https://qiita.com/azumabashi/items/182f365cf7405156788c) ではGUIインストールの手前までをやってみました。

ここでは Xubuntu をインストールしてみます。
作業日：2020年5月3日

次のコマンドを実行します。

```
sudo apt install xubuntu-desctop
```

途中でディスプレイマネージャ gdm3、lightdm のいずれを選択するか聞いてきます。
lightdm を選択しておきました。

インストールが完了したら再起動します。

```
sudo shutdown -r
```

GUIが起動しました。
パスワードを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/41b17d92-fe35-892c-c5cd-8b3245103bd0.png)

デスクトップが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/ac9e1e95-5ed0-e629-18a7-79466e8ddfa9.png)

地域、日付、日本語などの各種設定を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/5a830526-6c6d-5af1-7111-d65c110d07b8.png)
ITパスポート復習

### テクノロジー系
**ソフトウェア**
マルチタスク：1台のPCで複数のアプリケーションプログラムを少しずつ互い違いに並行して実行するOSの機能
絶対パス、相対パス
`パスを使って目的のディレクトリやファイルを指定する方法`は必ず出る
フルバックアップ：常に全てのデータをバックアップすること
差分バックアップ：フルバックアップ以降、新たに追加されたデータをバックアップすること
増分バックアップ：前回のバックアップから新たに追加されたデータのみをバックアップする
[差分、増分バックアップの参考サイト](https://www.backstore.jp/blog/2016/08/17/differential_and_increment_backup/)
関数計算
複写：セルの値をコピー
絶対参照：$：複写時に値を固定
ユニバーサルデザイン：できるだけ多くの人が利用できる設計、バリアフリーとは異なる
Webアクセシビリティ：全ての人がWebにアクセスし、コンテンツを利用できる度合い
OSS(オープンソースソフトウェア)：ソースコードが公開されて、改良や再配布が自由に行えるソフトウェア

**データベース**
関係データモデル：データの集まりを表形式で表現
主キー：同一の値、NULLの値を持つことができない(重複、NULLはだめ)
　　　：複数のフィールドを組み合わせて設定(複合主キー)
E-R図：データベース設計するとき、表同士の関連を表す図
`正規化`：データが重複、更新の際に矛盾が生じたりしないようにする
DBMS：データベース管理システム
SQL：関係データベース(RDBS)を操作する言語
データ操作：「選択」「挿入」「更新」「削除」「射影」「結合」
:sunny:よく出る３つ
選択：テーブルからある特定のレコードのみを取り出す操作
射影：テーブルからある特定のフィールドのみを取り出す操作
結合：複数のテーブルを１つにする操作
`排他制御`：複数の人が同じデータを同時に更新しようと場合に、データに矛盾が生じないようにする機能（データの一貫性を保つ機能）
Apple Developer Programの証明書（Certificates）の種類まとめ

## はじめに
Apple Developer Program（以下、ADP）のポータルにある、
***Certificates, Identifiers & Profiles***から証明書を作成できると思いますが種類が結構あります。
<img width="1173" alt="スクリーンショット 2020-05-03 14.16.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393049/5db63a26-4aeb-1021-d4f4-1439ee7cf645.png">
※上限に達しているやつはスルーで。。

ADPが無法地帯になっているので、管理せねばということで調べたことの記録。
あとADPのUIとか表記がよく変わるっぽいので、20年5月段階の情報としてご認識ください。


## TL;DR
いっぱいあるけどXcode11以降はApple Developmentを使う。（集約されました）
それ以前はiOSならiOS〜、MacならMac〜と記載の証明書を使おう。
Developer IDはStoreを使わないMac Appの配布に使うよ。
Developmentは開発用証明書、Distributionは主にStore配布用の証明書だよ。

<img width="836" alt="スクリーンショット 2020-05-03 16.25.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393049/37095b81-6e5d-48ff-0d7c-01eb6c1aa880.png">


## 各証明書について

### Developer ID証明書
**① Developer ID Application(Developer ID アプリケーション)**
Mac Appに署名するための証明書。
Macのアプリケーションを公式以外で配布したい場合に使用するもの。

**② Developer ID Installer（Developer IDインストーラ）**
署名済みのAppを格納したMacインストーラパッケージに署名するための証明書。


### Apple系証明書
**① Apple Development証明書**
Xcode11以上で使用する、開発用の証明書。
Appleの全プラットフォームはここに統合されたようです。

**② Apple Distribution証明書**
Xcode11以上で使用する、配布用の証明書。
同じく、Appleの全プラットフォームはここに統合されたようです。

### iOS系証明書
**① iOS App Development 証明書**
Xcode10以下で使用する、開発用の証明書。
iOS Appの開発にはこちら。

**② iOS App Distribution 証明書**
Xcode10以下で使用する、配布用の証明書。
iOS Appの配布にはこちら。

### Mac系証明書
**① Mac Development 証明書**
Xcode10以下で使用する、開発用の証明書。
Mac Appの開発にはこちら。

**② Mac App Distribution 証明書**
Xcode10以下で使用する、配布用の証明書。
Mac Appの配布にはこちら。

**③ Mac Installer Distribution 証明書**
Macインストーラパッケージ用の証明書。
これはちょっと不明。どっかで調べられたら追記。
（Xcode10以下ならこれ、それ以降はDeveloper ID Installerなのか？）

## さいごに
Macのところ不安。。
なにか間違っていたらコメントください。


### 参考
[Apple デベロッパアカウントヘルプ](https://help.apple.com/developer-account/#/dev52fdd1ce5)
[Apple DeveloperIDサポート](https://developer.apple.com/jp/support/developer-id/)
MacOSでの、ローカル開発環境の追加

# 前提
Vagrantで仮想環境を複数用意する時のメモ

・VirtualBox　インストール済
・Cyberduck　インストール済

# ディレクトリの整理
Home>MyVagrant　のフォルダ内に、
・MyCentOS
・MyprojectA
というフォルダを作って、それぞれにサーバーを構築する。
今回は、MyCentOSは元々あるものとして、MyprojectAというフォルダを作成する。
MyprojectAフォルダを作成後、そこで下記コマンドを実行。

# コマンド入力
仮想マシン設定用のVagrantfileを作る

```
vagrant init bento/centos-6.8
```

Vagrantfileを編集して仮想マシンのIPアドレスを192.168.33.11にする

```
sed -i '' -e 's/# config.vm.network "private_network", ip: "192.168.33.11"/config.vm.network "private_network", ip: "192.168.33.11"/' Vagrantfile

vagrant reload
```

(エラーを履く場合、IPアドレスの設定かも。.vagrantフォルダの、Vagrantfileに、以下の行のIPを書き換える。）

```
config.vm.network "private_network", ip: "192.168.33.11"
```


(複数環境が原因でエラーを吐いた場合、このタイミングでプラグインをインストールしておく)

```
vagrant plugin install vagrant-vbguest
```

仮想マシンを起動する(裏でVirtualBoxが動く)

```
vagrant up
```

仮想マシンの状態を確認する

```
vagrant status
```

仮想マシンにログインし、IPアドレスを確かめる

```
vagrant ssh
ip a
```

OSを最新状態にアップデート（時間かかります）

```
sudo yum -y update
```

スクリプトを入手するためのgitをインストール

```
sudo yum -y install git
```

gitを使ってアプリケーション設定用のスクリプトをダウンロード

```
git clone https://github.com/dotinstallres/centos6.git
```

centos6フォルダができるのでそちらに移動

```
cd centos6
```

スクリプトを実行（時間かかります）

```
./run.sh
```

もろもろの設定を反映

```
exec $SHELL -l
```
# Cyberduckの接続
Cyberduckを起動し、新規接続をクリックして以下を設定して接続。
・プロトコル：SFTP
・サーバ：１９２.１６８.33.11
・ユーザー名：vagrant
・パスワード：vagrant
起動後、ブックマーク に登録（MyprojectA）

# bash_profileの様子

```
# .bash_profile

# Get the aliases and functions
if [ -f ~/.bashrc ]; then
        . ~/.bashrc
fi

# User specific environment and startup programs

PATH=$PATH:$HOME/bin

export PATH
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"
eval "$(pyenv virtualenv-init -)"
```
DB設計のための基礎


####1.DBを構成する要素は３つ
- エンティティ（管理する必要のある情報）...テーブルに相当
- エンティティの属性（エンティティが個別に持つ情報）...カラムに相当
- エンティティ同士のリレーション（関係性）

Tweetアプリで考えると、、、
ユーザーやツイートといった`エンティティ`がある。
ツイートのエンティティには、本文やいいね数などの`エンティティの属性`がある。
また、ツイートは誰のものかわかるようにユーザーと`リレーション`がされている。

####2.テーブルの構成要素
レコード（エンティティの具体的なデータ）とカラム（エンティティの属性）で構成。

####3.主キーと外部キー
レコードを識別するため、カラムの中にはキーと呼ばれる特殊なデータが存在する。
**主キー**：基本的にidカラム
**外部キー**：リレーションに必要なカラム（user_idなど）

####4.制約
制約とは特定のデータの保存を許さないためのバリデーション。主に４つ。
マイグレーションファイルでカラムを追加するときに記述する。
①「NOT NULL制約」：空を防ぐ

②「一意性制約」：重複を防ぐ

③「主キー制約」：主キーである属性値が必ず存在してかつ重複していないことを保証する

④「外部キー制約」：外部キーの対応するレコードが必ず存在しなくてはいけない

```ruby
t.references :user, foreign_key: true
```
外部キーとなるカラムを追加するときに`foreign_key: true`と記述することで外部キー制約を設定。
マイグレーションを実行すると、"user_id"カラムが作られる。

####5.インデックス
テーブル内のデータ検索を高速化することができる。
デメリット：データを保存・更新する速度が遅くなる。データベースの容量を使う。


インデックスはカラムに対して設定する。

```migrationファイル.rb
class AddIndexToテーブル名 < ActiveRecord::Migration
  def change
    add_index :テーブル名, :カラム名
  end
end
```

####6.DBを作成する時のポイント
１：エンティティの洗い出し。
　データの登録時に着目する。
２：リレーションを考える（ER図）
Reactのお勉強

React学習内容(備忘録)
#Projectの始め方
1. Node.jsをインストールする。    
[link]https://nodejs.org/ja/

```
$ node --version    #バージョンが表示されることを確認する。
v12.7.0
$ npx create-react-app "プロジェクト名"
$ cd "プロジェクト名"
$ npm start
```

#基本事項
+ ```<head>```タグに以下を追加する。

```
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
```
+ エレメントの作成

```
React.createElement(タグ名,属性,中に組み込まれるもの);
```

+ レンダリングした表示の作成

```
ReactDOM.render(エレメント,DOM);
```

レンダリングとは、プログラムのオブジェクトを具体的に目に見えるような形に変換する作業

#Redux
```
npm install --save redux
npm install --save react-redux
npm install --save redux-persist
```

#Redux Persist
データの永続化を行う。
Redux PersistはReduxのストアのデータをローカルストレージに保存する。
ページにアクセスしてロードするとき、それを読み込み利用する。
【Javascript】ランダムな整数を桁指定で作る方法

ちょっと難しかったのでメモします。

まず、基本として ``Math.random()`` は、 **0以上1未満のランダムな数を作成**します。

```javascript
for (let i = 0; i < 3; i++){
    console.log(Math.random())
}
// 0.22040365239483273
// 0.5152515151239232
// 0.44932315151766145
```

整数にするためには、小数点を切り捨てなければいけません。
``Math.floor()`` は、**引数として与えた数以下の最大の整数**を返します。

```javascript
for (let i = 0; i < 3; i++){
    console.log(Math.floor(Math.random()))
}

// 0
// 0
// 0
```

ここで、1桁、つまり**0~9**の整数を出力したいとします。
その時は、以下のようにします。

```javascript

for (let i = 0; i < 3; i++){
    console.log(Math.floor(Math.random()*10))
}

// 6
// 9
// 7
```

解説は以下の通りです。

|Math.random()|Math.random()*10|Math.floor(Math.random()*10)|
|---          |---             |---                         |
|0.635...|6.35...|6|
|0.992...|9.92...|9|
|0.781...|7.81...|7|

次に、2桁、つまり**10~99**の整数を出力したいと思います。
その時は、以下のようにします。

```javascript
for (let i = 0; i < 3; i++){
    console.log(Math.floor(Math.random()*(99 + 1 - 10))) + 10
}
```

まず、``Math.floor(Math.random()*(99 + 1 - 10))`` つまり ``Math.floor(Math.random()*90)`` では、**0~89**の整数が生成されます。
その数に10を足すと**10~99**の数を出力できます。

これらを一般化すると以下のようになります。

```javascript

let min = <最小値> ;
let max = <最大値> ;

for (let i = 0; i < 3; i++){
    console.log(Math.floor( Math.random() * (max + 1 - min) ) + min)
}
```
本当に困ったらキャッシュを疑う

LarabelのSocialiteを使ってgoogleアカウンと連携させようとしてる途中でよくわからないエラーが出た。エラー分は再現できなくなってしまったが、


### それは配列じゃないと渡せないよ！
と言う内容だった
どう確認しても配列だったんだが、、

エラー文をコピって検索してもTeratailのよくわからない奴ばかりしかなくて本当に終わったと思ったが、記事に載ってたこのコマンドをダメ元で打ってみた

```
$ php artisan clear-compiled 
$ composer dump-autoload
$ php artisan optimize
```

そしたら無事治った。

コマンドの意味もわからず入力たので
調べてみたらどうやらキャッシュを全削除するようなコマンドらしく

これを機にキャッシュとは何かを備忘録に残しておく

## キャッシュとはネットを高速で回すための仕組み
簡単に言うと閲覧履歴とかアクセス履歴を一時的にstorageに置いといて
一度アクセスしたサイトにもう一度アクセスしようとする時に高速でたどり着けるようにするための標準機能らしくこれによって効率的にネット回線が使えるんだとか。

しかしそのキャッシュも一応データなので容量を使うわけで、
これが貯まればチリも積もればなんとやらでとんでもないことになる。

最近ネット回線が遅いなと思ったら多分キャッシュのせい。

なので定期的にキャッシュは削除しておいた方がいいのだ。

ついでに自分のスマホのキャッシュも全て削除した

一番容量を使っていたのは圧倒的にエロ動画だった。

## 参考にさせていただいたサイト
https://sumahosupportline.com/iphone-cache/
CpawCTFお勉強備忘録 (Level.1)

# はじめに
外出自粛で時間ができたので前々から気になってはいたものの取り組めてなかった CTF にチャレンジしようと思ってCpawCTF のいちばん簡単なものから解き始めた次第です。

- CpawCTF : [https://ctf.cpaw.site/index.php](https://ctf.cpaw.site/index.php)

CTF とは、などの説明は割愛

解きながら学んだことをちょっとずつ書いている自分用備忘録です。

# Q7.[Reversing] Can you execute ?
拡張子のないファイルについて調べて適切な環境で実行する問題

file コマンドさえ知らなかったので調べた。

```
$ file <オプション> <ファイル名>
```

### オプション
- -f : 検査するファイル名をリストから読み込む

ファイル名として指定するものは、検査したいファイル名が書かれたテキストファイル

- -L : シンボリックリンクの参照先を調べる

ファイル名として指定する位置にシンボリックリンクを指定することで、その参照先ファイルを調べることができる

- -z : 圧縮ファイルを調べる

指定したファイルの圧縮元ファイルを調べることができる

## 実行してみた
```
$ file exec_me
```
実行結果は

```
exec_me: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), dynamically linked, interpreter /lib64/ld-linux-x86-64.so.2, for GNU/Linux 2.6.24, BuildID[sha1]=663a3e0e5a079fddd0de92474688cd6812d3b550, not stripped
```

よくわからないけど読んだ感じ、Linux で動く実行ファイルっぽい。
OSX を使っていたので簡易的に vagrant の環境構築を行って Linux 環境で実行した結果フラグを獲得できました！

仮想環境で vagrant は今まで使っていませんでしたが便利ですね。ローカル環境とファイル共有できるように設定しておくと、ローカルでダウンロードしたファイルを仮想環境で実行するまでがスムーズでした。

# Q10.[Forensics] River
画像ファイルの Exif 情報を獲得して、写真が撮られた位置情報を得る問題

OSX ならプレビューを使うとコマンド叩かなくても簡単に位置情報が取れたのですがせっかく勉強なのでコマンドで獲得する方法を調べた。
Exiv2 というライブラリを使うと良さそう。

インストール

```
$ brew install exiv2
```

使い方

```
$ exiv2 pr <画像ファイル名>
```
pr は print の意

実行結果

```
File name       : river.jpg
File size       : 424184 Bytes
MIME type       : image/jpeg
Image size      : 3840 x 2160
Camera make     : Sony
Camera model    : SO-01G
Image timestamp : 2015:09:14 12:50:38
Image number    : 
Exposure time   : 1/2000 s
Aperture        : F2
Exposure bias   : 0 EV
Flash           : No, compulsory
Flash bias      : 
Focal length    : 4.6 mm
Subject distance: 
ISO speed       : 50
Exposure mode   : 
Metering mode   : Multi-segment
Macro mode      : 
Image quality   : 
Exif Resolution : 3840 x 2160
White balance   : Auto
Thumbnail       : None
Copyright       : 
Exif comment    : 
```

位置情報ない……。

さらに詳しく調べるコマンド

```
$ exiv2 -pa pr <画像ファイル名>
```

-p は print のモード選択オプション
a モードは、Exif, IPTC, XMP metadata を表示する。(その他のモードは[公式ドキュメント](https://www.exiv2.org/manpage.html)参照)

実行結果 (一部抜粋)

```
Exif.GPSInfo.GPSVersionID                    Byte        4  2.3.0.0
Exif.GPSInfo.GPSLatitudeRef                  Ascii       2  North
Exif.GPSInfo.GPSLatitude                     Rational    3  31deg 35' 2.760" 
Exif.GPSInfo.GPSLongitudeRef                 Ascii       2  East
Exif.GPSInfo.GPSLongitude                    Rational    3  130deg 32' 51.727" 
```
位置情報っぽいの出てきたので調べたら画像の川がどこかわかりました！

### Tips
exiv2 のその他の機能

- データの削除 ※ Exif 情報を含むすべてのメタデータを削除

```
$ exiv2 rm <画像ファイル名>
```

- Exif 情報をすべて削除

```
$ exiv2 -de rm <画像ファイル名>
```

- 項目ごとに削除

```
$ exiv2 -M"del <項目名>" <画像ファイル名>
$ (例) exiv2 -M"del Exif.Image.Make" river.jpg
```

- 項目ごとにデータ編集

```
$ exiv2 -M"set <項目名> <型> <値>" <画像ファイル名>
$ (例) exiv2 -M"set Exif.Image.Make Ascii Sony" river.jpg
```

もっといろいろ調べるといっぱい遊べそう……

# おわりに
Level.1 問題は他にもいろいろありますが今回新たに調べたり勉強したりしたこと中心にまとめてます。
pcap とかも楽しいよね。全然まだまだド初心者なので精進します。