OmniAICreator/Qiita-1.07M huggingface dataset:
【脳死でやろう】Next.jsのプロジェクトにeslint+typescript+prettierでCI環境を導入する

## 概要
どうせ後で入れることになるし、先にlinter+CI環境作っちゃおうぜ！という記事
多少面倒でも、秩序が保たれるので絶対やったほうが良い設定だと思っています。

## 手順
### with-typescriptでnextプロジェクトを作る
```
$ npx create-next-app --example with-typescript sandbox-create-next-app-ts
```

### lintを導入する
```
$ npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
```

プロジェクトルートに設定ファイルを作る。

```.eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'airbnb',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'prettier/@typescript-eslint',
  ],
  plugins: ['@typescript-eslint'],
  parser: '@typescript-eslint/parser',
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
      },
    },
  },
  rules: {
    'react/jsx-filename-extension': [
      2,
      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
    ],
  },
};
```

### prettierを導入する
```
$ npm i -D prettier eslint-plugin-prettier eslint-config-prettier
```

こちらもプロジェクトルートに設定ファイルを作る。

```.prettierrc.js
module.exports = {
  singleQuote: true,
}
```

### husky + lint-stagedを導入する
```
$ npm i -D lint-staged husky
```

`package.json`の末尾に設定を追加する。
以下はtscでの型チェック＋ステージングされているファイルのprettier自動成形を行う設定。

好みで`eslint`や`jest`もワークフローに追加するといいと思います。（筆者は@typescript-eslint/recommendedを守る自信がなかった）

```package.json
  "husky": {
    "hooks": {
      "pre-commit": "tsc -p src && lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write"
    ]
  }
```

### (オプション)絶対パスでimportできるようにする
相対パス地獄はつらいので、絶対パスで`import`できるようにします。

tsconfigに`baseUrl`を追記する。指定したパスが絶対パスの起点になる。

```tsconfig.json
    "baseUrl": ".",
```

このまま絶対パスインポートしようとするとeslintに`import/no-unresolved`と怒られるので、パッケージを追加する。（[参考](https://qiita.com/kterui9019/items/398e8222f5a432ad7864)）

```
$ npm install -D eslint-import-resolver-typescript
```

eslintrcのsettingsを追加する。

```eslintrc.js
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
      },
      typescript: {},  // 追加
    },
  },
```
【Shell】指定数でのCSVファイル分割とディレクトリ作成

- 業務でShellで大きいCSVファイルを扱う場合がある。
- その際に、事前に**分割**や**フォルダ分け**を行うことで、扱いやすくなることがある。
- そのため今回は、Shellで行数に応じてファイル分割やフォルダ分類を行う方法を記録する。

## 結果
- 以下、実行前のディレクトリ構造。
    - **※`sample.csv`は行数100のデータ**

```bash
.
├── sample.csv
├── main.sh
```

- 以下、`main.sh`の記述。

```bash
#!/bin/sh
set -e

# ファイル名
[ ! -e "$1" ] && exit 1 || datafile="$1"
# 拡張子除外
filename="${datafile%.*}"
# 行数取得
row=$(awk -F ',' 'END {print NR}' $datafile)
# 分割数
sep="$2"
# 作成ディレクトリ数
dir_cnt=$(awk -v row="$row" -v sep="$sep" 'BEGIN {
	i=row/sep
	printf("%d\n",i+=i<0?0:0.999)
	}
	'
)
# フォルダ作成
seq -f "${filename}_%01.0f" 1 ${dir_cnt} |
xargs mkdir -p
# ファイル分割
split -l ${sep} -a 2 $datafile "${filename}_"
# ファイル移動
count=1
for i in `find . -type f -name "${filename}_*" | sort`
do
	mv $i "${filename}_${count}/${i//_*/_${count}}.csv"
	let count++
done

exit 0
```

- 以下で実行。

```bash
# sh main.sh 対象データ 分割数
sh main.sh sample.csv 25
```

- 実行後、以下のディレクトリ構造になっていることを確認。

```
.
├── main.sh
├── sample.csv
├── sample_1
│   ├── sample_1.csv
├── sample_2
│   ├── sample_2.csv
├── sample_3
│   ├── sample3.csv
├── sample_4
│   ├── sample4.csv
```

## 補足
### 作成ディレクトリ数
- 作成ディレクトリ数の計測の際に、awkを利用する。
- その際に意識した点は以下。
    - **行数と分割数を変数として渡す。**
        - awkの`-v`オプションを利用して安全かつ扱いやすくしておく。
    - **切り上げ処理**
        - `100/15`のような小数の場合、ディレクトリ作成が正常に行われないため。
        - `printf`処理で切り上げして整数にしておく。

### ファイル分割と移動
- 分割と移動処理は、それぞれ分けて行う。
- その際に意識した点は以下。
    - **拡張子付与はmvで行う。**
        - splitでの拡張子付与(`--additional-suffix`)は、Mac等ではデフォルトではないため。

## 参考
- [split](https://linuxjm.osdn.jp/html/GNU_coreutils/man1/split.1.html)
- https://minory.org/linux-split-csv.html
modelを追加する(sqlite3備忘録)

migrationでデータベースのテーブルができたのでmodelを作ります。

まず自分のLaravelのディレクトリにいきます(自分はneomediaproject)
そしてmodelを作るために以下を実行します。

```terminal:コマンドプロンプト
>php artisan make:model Voting
Model created successfully.
```
「Model created successfully.」
となれば成功です。
artisanのモデル名はテーブル名と同じものにし、先頭の文字は大文字にします。そうすることによって、テーブル名とモデル名が自動的に判別されます。

因みにファイルの場所は

```php:modelsディレクトリー
neomediaproject/
           ├ app/
           │     └Models
           │            └Voting.php ←追加される
           ~以下別ディレクトリ
```

でVoting.phpの中身はというと


```php:Voting.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Voting extends Model
{
    use HasFactory;
}
```

今後はuse HashFactoryの所に処理を書いていく。
ラバーダッキングデバッグ

# ラバーダッキングデバッグとは

ソースコードをゴム製のアヒルのおもちゃに説明するというデバッグ方法です。
誰かに説明することを通して、仕様漏れや設計ミスなどを自身で見つけるデバッグ方法です。
よく、資料を会議で説明しているときに問題点に気づいちゃうときありますよね。それの原理です。

もちろん、おもちゃではなく人類相手にやったほうが相手のアドバイスも受けられてより効果的ですが、その前段階として。

# 急にやると危ないやつと思われる

仕事中に急におもちゃのアヒルに向かって話し始めたら、頭おかしくなったと思われるので、人気のないところでやりましょう。
Azure DataFactory で Blob Storage から SQL Database にファイル取り込み


# 実現したいこと
Blob Storage に対向システムからファイルを連携し、集めたファイルを日次で取り込む処理をDatafactoryを使ってつくりたい。  
対向システムのファイル送信が遅れることもあり、リカバリすることを考えて、ファイルがある分だけ取り込み対象とし、取り込んだらbkフォルダに移動する。  
今回の業務上、少なくとも毎日1ファイルは存在するため、取り込むファイルが無い場合はエラーとすることとした。
![20201116_datafactory.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14760/6b3070da-f7dd-fa58-2971-dfdd824462bd.png)

# 全体像
下図の流れでデータ取り込みをすることとした。
![20201116_datafactory (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14760/ca643b80-ba28-b652-d58c-986cb715c9d3.png)

1. 処理したいディレクトリ配下のファイルを取得  
　今回の例だとグレー背景部分  
2. 処理したいファイルだけに絞る    
　今回の場合、「file1」が含まれているファイル  
3. 処理するファイルがあれば後続処理  
　処理するファイルが存在しない場合は、エラーとして扱う
4. データ登録、ファイル移動・削除  
　a. Blob storage のファイルを SQL DB に登録  
　b. 処理したファイルをBKディレクトリにコピー移動  
　c. 処理したファイルを削除  


# 各アクティビティの設定値
上図の各アクティビティの設定値の中身は以下の通り。  

## アクティビティ 1
ディレクトリ内のファイルのリストを取得する。
![20201116_datafactory (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14760/2b8c46f1-e7a8-db07-bb27-5c6614000069.png)

## アクティビティ 2
アクティビティ 1 で取得したリストの中から、取り込み対象ファイルのみとする。誤ったファイルを取り込まないために、取り込み対象のファイル名に絞る処理を入れている。
![20201116_datafactory (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14760/d5c21d57-8179-6af6-1032-08143f869b35.png)

## アクティビティ 3
取り込み対象ファイルが存在するかチェックする。
今回の処理では少なくとも１件はファイルが存在するため、１件以上あるかチェックし、0件の場合はエラーとしている。
![20201116_datafactory (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14760/76796ab2-c471-d7d4-414d-0305f8da26cb.png)

## アクティビティ 4-a
blob storage から SQL Database にデータ投入する。  
取り込むファイル名は変数とし、アクティビティ 2 で取得したファイル名を使っている。
![20201116_datafactory (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14760/e985f972-7d73-7c3c-7e16-362b457c5314.png)

## アクティビティ 4-b
取り込んだファイルをbkフォルダに移動する。
![20201116_datafactory (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14760/4d304cad-ec0b-37f9-ce1f-ca55aa83afa0.png)

## アクティビティ 4-c
bkフォルダに移動したファイルを削除する。
![20201116_datafactory (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14760/5c9e4103-f939-7a91-3308-98965f757d65.png)


# 参考
* [Azure Data Factory を使用して Azure BLOB から Azure SQL Database にデータをコピーする](https://docs.microsoft.com/ja-jp/azure/data-factory/tutorial-copy-data-dot-net)
* [Azure Data Factory の式と関数](https://docs.microsoft.com/ja-jp/azure/data-factory/control-flow-expression-language-functions)
M1チップでadobe illustrator がフリーズ多発する時の対処

新しくMAC新型を買ったところ、イラストレーターを起動するとフリーズが多発するという事態が起こりました。（XDなどは全くフリーズせず。）（イラストレーター使用歴０）
スペックはMAC AIRのいちばん安いスペックです。

初期製品ですので対応されていないアプリがあることは仕方ないとは思いますが、文字を一個置くだけでもフリーズしてしまう事態なので何とかならないかとネットで探し、対処法を見つけましたのでここにメモしておこうと思います。

まずイラストレーターの環境設定→パフォーマンスを選択します
![スクリーンショット 2020-12-13 15.13.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764631/a2883ea6-36fe-0531-6fb2-a73a1fea330d.png)

初期設定ではGPUパフォーマンスにチェックが入っていると思いますのでこれを外していただければかなりパフォーマンスがマシになったような気がします。　この設定にしてからまだ短いのでまたフリーズが発生したら追記したいと思います。
![スクリーンショット 2020-12-13 15.14.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764631/1d1892e6-3ae2-0675-c9a7-1d43a2505266.png)

また、フリーズが多発する方は一度OSのクリーンインストールしてみるのも有効的かもしれません。
three.jsのCanvasTextureで透明の境界部分にアーティファクトが生じる問題の対処方法

three.jsで背景が透明なcanvasからCanvasTextureを作成したときに、canavs内のオブジェクトと透明な背景の境界部分にエッジ上のアーティファクトが生じる場合の対処方法です。

具体例として以下のようなコードを見ていきます。このコードではCanvas 2Dで透明な背景に白色で四角形と文字をcanvasに描き、そのcanvasからCanvasTextureを生成して平面のメッシュに張り付けています。マテリアルの`transparent`を`true`にしているので、Cavnas 2Dで透明にしている部分はthree.jsの背景色に設定している薄紫色が見えるようになっています。

```js
const width = 640;
const height = 480;
const scene = new THREE.Scene();
scene.background = new THREE.Color('rgb(240, 230, 255)');
const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 100);
camera.position.z = 2.0;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

const canvas2d = document.createElement('canvas');
canvas2d.width = 512;
canvas2d.height = 512;
const context2d = canvas2d.getContext('2d');
context2d.fillStyle = 'rgb(255, 255, 255)';
context2d.fillRect(10, 10, 400, 130);
context2d.fillRect(200, 400, 250, 70);
context2d.font = '100px sans-serif';
context2d.fillText('Hello', 10, 250);
context2d.fillText('World!', 120, 340);

const texture = new THREE.CanvasTexture(canvas2d);

const geometry = new THREE.PlaneBufferGeometry();
const material = new THREE.MeshBasicMaterial({
  map: texture,
  transparent: true,
  depthWrite: false,
});
scene.add(new THREE.Mesh(geometry, material));

renderer.render(scene, camera);
```

このコードの描画結果は以下のようになり、Canvas 2Dで描いたオブジェクト(四角形と文字)と背景の境界部分に灰色のエッジが生じています。
![alpha-edge01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61569/0c013baf-5bea-a05e-0d93-c18606f73639.png)

なぜこのようなアーティファクトが生じるかというと、canvasはPremultiplied Alphaという形式で取得されるにも関わらず通常のテクスチャと同じように使用しているためのようです。

- [Alpha Edge Quality of Canvas\-based Textures · Issue \#1864 · mrdoob/three\.js · GitHub](https://github.com/mrdoob/three.js/issues/1864)
- [コンポジターに必要なアルファチャンネルの知識（後編） \- コンポジゴク](http://compojigoku.blog.fc2.com/blog-entry-5.html)
- [WebGL and Alpha](https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html)

対処方法としては、CanvasTextureをPremultiplied Alphaと認識されるようにして、マテリアルのアルファブレンディングの設定をそれに合わせたものにします。具体的には次のように設定するとよさそうです。

```js
const texture = ...
texture.premultiplyAlpha = true;

const material = ...
material.blending = THREE.CustomBlending;
material.blendSrc = THREE.OneFactor;
material.blendDst = THREE.OneMinusSrcAlphaFactor;
material.blendEquation = THREE.AddEquation;   
```

このように設定したときの描画結果は次のようになり、境界部分のアーティファクトが消えていることが確認できました。
![alpha-edge02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61569/792cc0f2-3f23-6f36-e2f1-6e1dc4405619.png)
[ServiceNow]暗号化で地味に苦労した話

　昨今のセキュリティが重要視されている中、ServiceNowにもフィールドの値を暗号化する機能が当然あります。ServiceNowの暗号化機能を検証していた際に少し苦労したのでその点について記述していきます。

#問題
同じ暗号化コンテキスト（暗号化・復号化鍵のようなもの）を設定したユーザAとBにおいて、Aで暗号化した値が、Bから見て復号化した値がフィールドに表示されない。

#####期待値
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/0ff73abb-e1c6-3ab5-fd1d-e65d3389ee58.png)



#####検証結果（impersonate userで）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/d368f467-07b2-74d7-5eb0-f1ab45acfb17.png)



#結論
 <font color="Red">**暗号化の検証作業では代理操作を使うな！**</font>
 ServiceNowの特徴である代理操作を使うと、暗号化の検証は正しく行えません。
（冷静に考えれば、本来見えてはいけないものが代理操作で見えてしまうのは、本末転倒ですからね。。）

公式のDocsにも書かれています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/853a7097-fe6c-fbb1-7dfd-6b3164d42785.png)
[代理操作](https://docs.servicenow.com/bundle/orlando-platform-administration/page/administer/users-and-groups/concept/c_ImpersonateAUser.html)



#詳細
具体的な検証手順について書いていきます。

#####メジャーバージョン
・Orlando

#####暗号化種類
・[カラムレベル暗号化（暗号化のサポート）](https://docs.servicenow.com/bundle/orlando-platform-administration/page/administer/encryption/concept/c_EncryptionSupport.html)

#####前提
・プラグインを入れる
・設定は"security_admin"ロールを持つユーザ

#####手順
1. 暗号化コンテキストを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/a20598f2-cbdc-0b00-4ce8-b07779b36d3c.png)
2. 暗号化コンテキストをロールに紐づける（必要があれば専用のロールを作成）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/27cd2cce-09cd-1236-eabb-b1ff58f8ecd2.png)
3. 任意のテーブルの既存のカラムの属性を変更（または新規でカラムを作成）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/8462514b-88a4-c495-7d78-38a4a5dbda1a.png)
4. あとは検証（属性を変更したカラムに値を入れたり、更新したり、コンテキストを持っていない人から見えないか確認する）←この検証の時に代理操作機能は使用しないこと！！
エゴレスプログラミング

# エゴレスプログラミングとは

自分自身の技術に奢らず、他人を受け入れて開発しましょうの意です。

意識の高いエンジニアの中には自分の中に宗教を持っていて、他宗教を受け入れない人もいます。自分の美学を相手に強要してしまう場合があります。
また、時には自分自身をも追い込んでしまう場合があります。

# 自分も他人も赦す

過度にコードの美しさにこだわる人と仕事をしたことがありますが、簡単な改修でも美しいコードにこだわりすぎて、1日で十分終る作業に数日かけるような人でした。
美しいコードを書くことは大事なことですが、そのためにいくらでも時間をかけても良いものでもありません、何事も**過ぎたるは及ばざるが如し**です。
PHPの条件分岐における入れ子構造に関して

##PHPの条件分岐における入れ子構造に関して

PHPではif文の中にif文を書く入れ子構造を作ることができる。


####通常の条件分岐

```
```php
<?php

$x = 1;
$y = 2;

if($x === 1 and $y === 2){
  print 'xは1かつyは2です';
}else{
  print 'xは1またはyは2ではありません';
}
?>
```
xが１かつyが２という条件のもとでは、「xは1かつyは2です」と出力される。
条件に該当しない場合は「xは1またはyは2ではありません」と出力される。

####条件分岐の入れ子構造

**○コード**


```
```php
<?php

$x = 2;
$y = 2;
if($x === 2){
if($y ===2){
print 'yは2です';
}else{
print 'xは2ですが、yは2ではありません';
}


}else{
  print 'xは2ではありません';
}

?>
```
ifが2回出ていますが、xが２という条件を満たす場合に
yは２かどうかという条件分岐実行する。

今回のコードではxが２、yが２なので　「yは2です」と表示される。<br><br>

一方、以下のコードではそもそもxが２という条件を満たさないので入れ子になっている条件分岐が実行されず、「xは2ではありません」と表示される

```
```php
<?php

$x = 3;
$y = 2;
if($x === 2){
  if($y ===2){
  print 'yは2です';
}else{
  print 'xは2ですが、yは2ではありません';
}


}else{
  print 'xは2ではありません';
}

?>
```

####イメージ図


![スクリーンショット 2020-12-13 15.13.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794525/9cea7890-3660-222b-6689-17fcc55f2fdb.png)
【覚書】LIFF IDの取得方法

LIFFの作成方法の覚書

#LINE Developerへログイン

【LINEログイン】をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/da169150-9206-f82c-1a47-cf19d8c9e3bd.png)

#必要事項を入力

・チャネル名 - LINEに表示される任意の名前
・チャネル説明　-　任意の説明文
・アプリタイプ　-　webサイトを紐づけるのであればウェブアプリを選択


最後に、同意文にチェックを入れて【作成】をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/517188c1-cf51-0fa5-c73a-cfa4efcccf1c.png)

#LIFFの追加
LIFFタブへ移動して、【追加】をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/90c6cfda-3f24-f91b-3b24-0e84201d79e0.png)

#必要事項を入力
・LIFFアプリ名 - 任意の名前
・サイズ　-　好みのサイズを選択
・エンドポンドURL　-　表示させてたいwebアプリのURLを入力
・Scope　-　使用するスコープを選択。今回はprofileにチェックを入れます。
その下の【全て選択】を展開します。
chat_message.writeにもチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/ee22537f-963a-e57e-e3e9-6456cb808f58.png)
・ボットリンク機能　-　onにします。

最低限、上記の設定で作成が可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/ea6c32cd-d1cb-944f-aeb8-8e8af4c81170.png)

#LIFF ID/ LIFF URL発行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/d089dd92-bb83-e621-6b95-653e1751cf19.png)

#まとめ
発行されたLIFF URLをリッチメニューのリンク先に設定したり、LIFF IDをnode.jsやGASなどに利用してMessaging APIを連携と取ったりします。
パフォーマンス・チューニングの罪と罰

# 確かに速いは定義

何につけても早く処理が終わって困ることはありません。
なのでパフォーマンス・チューニングはし続けるべき作業ではあります。
ですが、それをすることに犠牲になるものがあることも考慮に入れる必要はあります。

# 罪と罰

パフォーマンス・チューニングによって失うものがある場合があります。
それは、可読性だったり、保守性だったり、生産性だったりします。

例えば、Javaのテクニックで**「使い終わった変数には明示的にNULLを入れるとGCがすぐに動いてメモリ節約になる」**というものがあり、メモリの少ない**iモードアプリ開発**ではよく使われました。
ですがこれをやると、関数の最後にすべての変数にNULLを入れるコードを書かないといけなかったので、ソースが冗長になりました。

また、別の例で**Rubyだと遅いからCRubyにやらせる**というようなことをやったことがありますが、CRuby（要するにC言語）の知識が必要になり、ソースコードの管理も別になり、保守が非常に面倒になりました。

# 使い所が大事

10秒が1秒になるようなパフォーマンス・チューニングなら、多少作りが変でもやったほうが良いと思いますが、10秒が9秒になるようなチューニングにどこまでの保守性・生産性の犠牲を許容するかはよく検討すべきです。
S3にローカルから画像アップロードしようとしてCORSエラー

お疲れ様です、ラスカルです。
今回はローカルホストからS3に画像アップロードしようとしたところ、次のようなエラーがでた時の対処法を書いていきます。

```
Access to XMLHttpRequest at 'https://ほにゃらら.s3.amazonaws.com/?max-keys=0' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

## すべきこと
S3にCORS設定を書いてあげます。

S3 > アップロード対象のバケット > アクセス許可タブの最下部にCORS設定を記述するところがあります。

![スクリーンショット 2020-12-13 14.52.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533188/f65485e0-e141-4618-f2ef-27c807ede4b9.png)

ここが空白になっていて、CORSの設定が書かれていないため、ローカルホストからのアップロードが不正なものとしてリジェクトされているようです。

「編集する」をクリックして、CORS設定を記述してあげます。
ここで注意が必要なのですが、JSONで書かないといけないのにXML形式のサンプルコードしかありません。
[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/cors.html)ですらXML形式で表示しています。

🤔最近変わったのでしょうか？

JSONで書くとこのようになります。

```
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://localhost:3000"
        ],
        "ExposeHeaders": []
    }
]
```

これでCORS設定は完璧！

![スクリーンショット 2020-12-13 14.58.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533188/cea9e298-1f91-886a-139d-ca722fc9da74.png)

お疲れ様でした🎉。
CentOS7　ネットワーク設定

CentOS7ではコマンドによる設定が推奨されているようです。
nmcli コマンド用いて設定していきます。
ローカルネットワーク、ルーターのIPアドレス「192.168.1.1」という想定です。

まずは「 nmcli d 」 でデバイスの確認。

```
DEVICE      TYPE      STATE     CONNECTION   
enp0s3      ethernet  切断済み  --         
lo          loopback  管理無し  --         
```
enp0s3を確認。
enp0s3はデバイス名なので設定したいデバイスによって変わる。

実際に設定するファイル。デフォルトだとこちら。
/etc/sysconfig/network-scripts/ifcfg-enp0s3

```
TYPE=Ethernet
PROXY_METHOD=none
BROWSER_ONLY=no
BOOTPROTO=dhcp
DEFROUTE=yes
IPV4_FAILURE_FATAL=no
IPV6INIT=yes
IPV6_AUTOCONF=yes
IPV6_DEFROUTE=yes
IPV6_FAILURE_FATAL=no
IPV6_ADDR_GEN_MODE=stable-privacy
NAME=enp0s3
UUID=d980175f-0b3e-4fs2-8fe5-4532bbb31b315f
DEVICE=enp0s3
ONBOOT=no
```

上記にコマンドを打って設定していきます。

#### 手順①　インターフェイスの有効化


```
nmcli c m enp0s3 connection.autoconnect yes
````
ONBOOT=no→yesに変更。noだとネットワークが使えない状態。

####手順②　IPアドレスの設定

```
nmcli c modify enp0s3 ipv4.address 192.168.1.11/24
```

IPADDR=192.168.1.11
PREFIX=24
IPアドレスとサブネットマスクが設定される。

####手順③　デフォルトゲートウェイの設定

```
nmcli c modify enp0s3 ipv4.gateway 192.168.1.1
```
GATEWAY=192.168.1.1 

####手順④　DNSの設定

```
nmcli c modify enp0s3 ipv4.dns 192.168.1.1
```
DNS=192.168.1.1

####手順⑤　IPアドレスを固定にする

```
nmcli c modify enp0s3 ipv4.method manual
```
BOOTPROTO=dhcp→none　に変更

####手順⑥　ネットワーク再起動

```
nmcli c down enp0s3;nmcli c up enp0s3
```
再起動しないと設定が反映されない。再起動したら下記コマンドで設定の確認。

```
nmcli d show enp0s3
```

####手順⑦　ホスト名とIPアドレスを紐付ける
/etc/hosts　に追記する。

```
192.168.1.1 router #ルーター
192.168.1.11 ホスト名　#自身のホスト名
```

####手順⑧　/etc/resolv.confの確認

```
nameserver 192.168.1.1
```
手順④でDNS=192.168.1.1としたことでIPアドレスが自動でnameserverに入る。


####手順⑨ 　pingを通して疎通を確認（ローカル）

```
ping (-c 3) 192.168.1.11 or 自身のホスト名
ping (-c 3) 192.168.1.1 or router（ルーター）
```
パケットロスがなければOK

####手順⑩ 　pingを通して疎通を確認（DNS）

```
ping (-c 3) google.com
```
外部にもpingが通るか確認。試しにgoogleにアクセス。
Linuxの新しいコマンド！！

# 勉強の記録
- Linuxコマンドを覚えよう　2020/12/13

## 勉強した内容
- Linuxで使う便利なコマンドを覚える
- LinuxとWindowsの共有ファイルを作る

## 何をベースに勉強してるか
- [N予備校 プログラミング入門](https://www.nnn.ed.nico/courses/668/chapters/9514)

## 内容の詳細
- pwd今いる場所を知る。　
- lsで中に何があるかがわかる。
- mkdirで新しいディレクトリの作成。　
- cdでディレクトリの移動（powershellでもあった）
- cpでファイルやディレクトリのコピー（ちょっと複雑）　
- rmでファイルやディレクトリの削除（分かりにくいし怖い）

### わかったことについて
- 新しいコマンドが分かった！
- これを応用？してJavaScriptで活用できるらしい


### むずかしかったよ
- 今なおWindowsで直接、ファイルやフォルダ移動、コピーが便利だと思うんだけど（分かりやすい)
- プログラミングで必要であるなら覚えるしかない…。

## 次回やる予定のこと
- 次回もまだこういうのが続くぽい！
radikoの録音ができなくなったための対応(2020/12)

# 概要

radikoが12月に入って録音できなくなったようなので対応しました

## 参考

- https://gist.github.com/matchy2/3956266
- https://github.com/uru2/radish/blob/master/radi.sh
- [radikoを止めるな！(radish on aws)](https://qiita.com/gosshys/items/04944517cab96e04a384)

# 原因

radikoの仕様変更で、今までflashを利用して認証していた部分が変わったからのようです..?
仕様変更前は、swfからkeyとなるデータを取得していましがが、現仕様では固定のキーに変更になったようです。
(flashが2020/12/31でサポート終了になるための対応と思われます)

- [ラジオサービス「radiko」で録音ができない場合の原因と対処法、仕様変更について徹底解説](https://snsdays.com/radio/radiko-can-not-record-cause-approach-specification-change/)
- [2020/12のradiko仕様変更に対応 · omiso46/radcast@a93084f](https://github.com/omiso46/radcast/commit/a93084f6a66746cacf0f14b4b0b279414bdcb5d1)
- [Removed swf-dedicated codes · nagahar/radiko@b0419e6](https://github.com/nagahar/radiko/commit/b0419e6021b7d3ba9ac128159469a3c87d62f7a6)
- [commit on 2020-12-06 · mkatase/radiko-downloader@4729aab](https://github.com/mkatase/radiko-downloader/commit/4729aabd961dbc8cf8caae0bfb4daf3dd096378b)

# 対応

上記のコードや差分を参考にすれば簡単に対応できます。
が、この際githubに存在するツールを試すのもよいと思います

- [yyoshiki41/radigo： Record radiko 📻](https://github.com/yyoshiki41/radigo)
- [soh335/radicast： recording radiko and serving rss for podcast](https://github.com/soh335/radicast)
- [radish/radi.sh at master · uru2/radish](https://github.com/uru2/radish/blob/master/radi.sh)
ABC175C 【場合分け】


ABC175C
後で解くとき、忘れそうなのでメモとして残します。
***

abs(X/D)回移動すると、座標0に辿り着く。
整数であるn1 = int(abs(X/D))回 か　n2 = n1+1回のとき、
最も座標0に近づく。(近づいたあとは、その場を往復してやり過ごす)

n1とn2で最終的に留まれるのがどちらか、Kの偶奇と等しい方を選択する。

また、Kがn1以下の場合は、D*Kの移動が一番座標0に近づく。



```Python3
#175C
X, K, D = map(int, input().split())

n1 = int(abs(X/D))
n2 = n1+1

if K <= n1:
    tmp = D*K
elif n2 <=K:
    if K %2 == n2%2:
        tmp = D*n2
    else:
        tmp = D*n1

if X <0:
    print(abs(X+tmp))
else:
    print(abs(X-tmp))
```
***
お読み頂きありがとうございます。

URL
https://atcoder.jp/contests/abc175/tasks/abc175_c
自作WebAPIとESP32との通信:ESP32編

# はじめに

この記事は[Arduino Advent Calendar 2020](https://qiita.com/advent-calendar/2020/arduino)の13日目の記事です。
前回の記事 [WebAPI編](https://qiita.com/suzakutakumi3/items/57590bd46f3a67755576)をまだ見ていない方は、そちらを先にどうぞ。

# 本題(復習)

* 前にESP32と自作WebAPIとの通信をやったので、そのやり方的なもの。
* やることとしては、ESP32から自作WebAPIに値を送り、レスポンスを返すという簡単なもの。

# 用意するもの(復習)

* PC(python3やESP32、git等の開発環境はセットアップ済み)
* GitHubのアカウント
* ESP32(Arduino互換)

# ソースコード

```c++
#include <WiFi.h>
#include <HTTPClient.h>
const char* ssid     = "ルータのssid";
const char* password = "ルータのパスワード";
const String URL = "https://[herokuのアプリ名].herokuapp.com/a=";
void setup() {
  Serial.begin(115200);
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
}

void loop() {
  if (Serial.available()) {
    String a=Serial.readStringUntil(',');
    String b=Serial.readStringUntil('\n');
    String sendStr=URL+a+",b="+b;
    HTTPClient http;
    http.begin(sendStr);
    int Get = http.GET();
    if (Get > 0) {
      String httpStr = http.getString();
      Serial.println(httpStr);
    }
    http.end();
  }
}
```

## 説明

シリアルモニタ```2,3```というデータをESP32に送り、結果を表示するデモです

### setupについて、

インターネットにつなぐ処理をしています
ほとんどおまじないです

### loopの2,3行目

```c++
    String a=Serial.readStringUntil(',');
    String b=Serial.readStringUntil('\n');
```
シリアルからの入力をとり、
　aにカンマまでの文字列を、
　bにカンマから改行までの文字列を
代入する。

### loopの4行目

```c++
    String sendStr=URL+a+",b="+b;
```
sendStrにURLと送る値を代入

### loopの6行目

```c++
    http.begin(sendStr);
```
自作WebAPIに接続

### loopの7-11行目

```c++
    int Get = http.GET();
    if (Get > 0) {
      String httpStr = http.getString();
      Serial.println(httpStr);
    }
```
自作WebAPIからGETが帰ってきたら、WebAPIからの出力をシリアルモニタに出力

# まとめ

WebAPI編に比べてとても簡素になってしまいました。

今回の技術を使えば、AIでの解析やLAN外からのESP32の操作が実現できます
実際、自分がやろうとしたきっかけはAIでエアコンを制御するためでした
　(やってないけど...)

1回目と2回目の記事なので見づらい所が多々あったと思いますが、誰かの役に立てば幸いです
Nginx　rootディレクティブ

# rootディレクティブ

rootディレクティブにはドキュメントルートのディレクトリを設定します。httpコンテキスト、serverコンテキスト、locationコンテキスト、location内のifコンテキストに記述できます。上記の例では/usr/share/nginx/htmlがドキュメントルートとなります。

項目 | 説明
--- | ---
構文 | root path;
デフォルト | root html;
コンテキスト | http, server, location, if in location

path の値には、\$document\_root と\$realpath\_rootを除いた変数を含めることができます。

ファイルへのパスは単にroot ディレクティブの値にURIを加することで組み立てられます。URIが修正される必要がある場合は、aliasディレクティブが使われるべきです。

### そもそもドキュメントルートって？

> ドキュメントルートとは、Webサーバ（HTTPサーバ）やFTPサーバが外部に公開するファイルなどが置かれたディレクトリ（フォルダ）。そのディレクトリにあるファイルと、下の階層にあるファイルやディレクトリが公開される。

[ドキュメントルート（仮想ルートディレクトリ）とは - IT用語辞典 e-Words](http://e-words.jp/w/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%83%AB%E3%83%BC%E3%83%88.html)

## 例

```
	root /var/www/html;
```

## 参考

[ngx_http_core_module モジュール 日本語訳](http://mogile.web.fc2.com/nginx/http/ngx_http_core_module.html#root)
[nginx連載4回目: nginxの設定、その2 - バーチャルサーバの設定 - インフラエンジニアway - Powered by HEARTBEATS](https://heartbeats.jp/hbblog/2012/04/nginx04.html)
unityでquest用にビルドしたapkファイルからAndroidManifest.xmlを抜き出す方法。（Windows）

#はじめに
案件が終わり来年まで休むのでOculusQuestのVR180のエロゲ作りを再開する。
qiitaの書き方を忘れたのでしょうもないTipsを上げる。
OculusQuestでデバック環境を作成中なのだが一部の機能でネイティブプラグインを使いたい。
OculusQuestのAPKをUnityでビルドする場合に同梱されるAndroidManifest.xmlの中身を見たい。
Unityからquest用にビルドしたApkからAndroidManifest.xmlを抜き出し中身の確認をした。
手順を残す。

#用意するもの
- AXMLPrinter2.jar
 - [ダウンロード](https://code.google.com/archive/p/android4me/downloads)
- unityでビルドしたQuest用のapkファイル。

#環境
- windows 10 pro
- Unity 2019.4.13f1 (64-bit)

#前提
- unityでQuestのビルド方法
 - [Unityで作ったアプリをOculus Questで動かす](https://qiita.com/pira/items/1c935f30d5ba6c020333)
- AndroidManifest.xmlについては 
 - [AndroidManifest.xml の備忘録](https://qiita.com/izuki_y/items/8cb59b12fef6727ed87b) 
- ネイティブプラグインについては
 - [Androidネイティブ開発のすすめ](https://qiita.com/relzx/items/a35f7ab6dbacb48f7e26) 

#手順
- 適当なフォルダに`AXMLPrinter2.jar`と`apk`を置く。
![1](https://s3-ap-northeast-1.amazonaws.com/image2kodama.xyz/temp.png)
- apkはただのzipファイルなので拡張子をzipにする。
![2](https://s3-ap-northeast-1.amazonaws.com/image2kodama.xyz/temp_zip.png)
- zipの中身にあるAndroidManifest.xmlをコピーする。
![3](https://s3-ap-northeast-1.amazonaws.com/image2kodama.xyz/temp_zin_in.png)
![4](https://s3-ap-northeast-1.amazonaws.com/image2kodama.xyz/temp_binary.png)
- コピーされたAndroidManifest.xmlはバイナリーなのでAXMLPrinter.jarでテキストに変換する。
![5](https://s3-ap-northeast-1.amazonaws.com/image2kodama.xyz/temp_axml.png)

#おわりに
今後はQuestアプリ内にローカルのWebサーバーを埋め込む作業を開始する。
NanoHTTPDをUnity用にネイティブプラグインにしてCORSエラー対策をしようと思う。
なにか詰まった所があったらqiitaにあげる。
CenterウィジェットでラップしているColumnが中央に表示されない

コンテンツを画面中央に表示させたいため、`Column`を`Center`ウィジェットでラップすることはよくあるかと思いますが、ただラップしただけでは中央に表示されませんでした。。

## 画面中央に表示されないパターン
これでは画面上部に表示されてしまいます。

```dart
　Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Text('Text'),
            RaisedButton(
              child: Text("Button"),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
```

<img width="400" alt="Screenshot_1607837014.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663839/28cd708f-3d97-e389-a49e-ea7afcd429bc.png">


## 画面中央に表示する方法
`mainAxisSize: MainAxisSize.min`を追加することで、中央に表示されます。

```dart
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min, // 追加
          children: [
            Text('Text'),
            RaisedButton(
              child: Text("Button"),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
```
<img width="400" alt="Screenshot_1607837014.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663839/bf063589-dc17-eba4-6360-716f7a137ad6.png">
Pythonを使ったデータ分析　0

学校で学んだところの復習を兼ねてデータ分析で用いられているPythonのコードなどについてまとめようと思います。

今回は基本的なことを中心にまとめていきたいと思います。(何回で終わるのかは未定。)

#0-0 実行環境
　Jupyter-Notebook  (https://jupyter.org/)
　Numpyをインストールしておく

#0-1  ファイル読み込み
授業では全てcsvファイル(エクセルファイル)にデータが格納されていました。その読み取りのコードは,　

```
import numpy as np
array=np.loadtxt(fname="(ファイル名)",delimiter=".")
//ファイル名は~~.csvまで書きましょう。//
```

読み込んだデータは行列の構造をしています。データの位置はエクセルと同じような構造をしています。0列目にエクセルの最初の行があります。

またファイルが読み込めない!と言うときはファイルがある階層でやっているかどうかを確認しましょう。例えばドキュメントにファイルがあるならJupyter-notebookを開いてドキュメントをクリックし,　そこで試してみてください。

#0-2 スライス
上の方法で得たデータはarray配列です。データには説明変数と結果の二つが格納されています。これを分離する作業です。
先ほども言ったように,　得たデータ配列にはエクセルと同じ順番・構造でデータが入っています。これを列ごと(縦)に分けます。

```
array_x=array[:,j] 　　j列目を取得
array_x=array[:,j:]   j列目から最後の列まで取得

```

初回なのでこのくらいで終わります。さいなら―
「モデル」に関わるテストのもろもろ

こんにちは、須原です。
ベリサーブアドベントカレンダー13日目です。
今日は、「モデル」に関する話にしようかなと思います。

つい先日も[STAC2020](https://testautomationresearch.connpass.com/event/191996/)の中でモデルベースドテスト（以後MBT）の話がありましたね。ISTQBからもMBTの[シラバス](https://www.istqb.org/certification-path-root/model-based-tester.html)も出ていて、徐々に広まってきているように思います。
一方で、その名前からモデルベース開発（MBD）やモデルベースシステムズエンジニアリング（MBSE）に関連するテストの何かしらなんだろうな、と想像されてしまうことも増えているように思います。（必ずしも関係性がないわけではないのですが、MBTの必要条件としてMBDやMBSEがあるわけではない、ということです）

というわけでこの記事ではそこら辺の交通整理をしてみようと思います。

#モデルが含まれるテスト系用語
**モデルベースドテスト（MBT）**
>Testing based on or involving models.

[ISTQB Glossary](https://glossary.istqb.org/en/search/model-based%20testing)より。
ちょっとこれだけだとわかりませんね。
>The basic idea is to improve the quality and efficiency of the test design and test implementation activities by:
-Designing a comprehensive MBT model, typically using tools, based on project test objectives.
-Providing an MBT model as a test design specification. This model includes a high degree of
formal and detailed information that is sufficient to automatically generate the test cases directly
from the MBT model.

[ISTQB MBTシラバス](https://www.istqb.org/downloads/send/6-model-based-tester-extension-documents/46-istqb-ctfl-mbt-syllabus.html)より。
テスト設計実装プロセスの質と効率を上げることが目的で、やることはMBTモデルを設計し、それをテスト設計仕様としてテストケースを自動生成すること、だと読めます。MBTモデルを基にテストケースを生成すること（テスト実装が含まれる場合はテスト手順の生成まで含む）がMBTだということになります。


**モデルベースドQA（MBQA）**
[西先生のこちらのスライド](https://www.slideshare.net/YasuharuNishi/recollection-of-embedded-system-qa-in-the-last-decade)で紹介されています。
用語定義のようなものは見当たらなかったので推測にはなってしまいますが、MBTがモデルを出発点にしてテストを作る活動であるのに対し、テストに限らずQA（品質保証）の活動をモデルを起点に行うべきだ、と言っているのがMBQAだと理解しています。

**モデル検査（Model checking）**
>In computer science, model checking or property checking is a method for checking whether a finite-state model of a system meets a given specification (also known as correctness).

[Wikipedia](https://en.wikipedia.org/wiki/Model_checking)より。
形式的検証の一部であり、モデル自身の論理的な正しさを証明するための手法です。僕自身はこの分野の専門家ではないので詳しくはないのですが、明らかに言えることは、モデル自身に誤りがないかをチェックする手法だ、ということです。

**モデルのテスト**
これだけ用語っぽくないですが、この後の説明で使うので出しておきます。MBD等で作られるモデルを何らかの手段でテストすること一般をこう呼んでいます。モデルをSUT（テスト対象）としたテスト、とも言い換えられます。

**モデルインザループ（MiL）**
>Dynamic testing performed using a simulation model of the system in a simulated environment.

[ISTQB Glossary](https://glossary.istqb.org/en/search/mil)より。
主に車の分野で使われる、モデルのテスト用のシミュレーション環境のことです。

#用語同士の関係性
用語を4つ出したので、用例などを使って用語同士の関係性を明らかにしてみます。

-「MBD」で設計されたモデルの品質を明らかにするために、「モデルのテスト」と動的/静的に実行する。
-「モデルのテスト」の静的テストの一部として「モデル検査」を採用する
-「MiL」を使って「モデルのテスト」を動的に実行する
-「MBD」で設計されたモデルを使ってMBTモデルを設計した上で、システムテスト用のテストケースを「MBT」で生成する
-「MBQA」を実現するために、「MBT」や「モデル検査」を使った品質保証戦略を立てる

こんな感じでしょうか。

#まとめ
身の回りでMBTとモデルのテストやモデル検査の区別がちゃんとできていない事例が散見されたので、書いてみました。MBDだとMBTは使いやすいため関係は強いですが、MBDで作られたモデルをテストすることはMBTではありません。ご注意を。

かく言う自分も何か理解が間違っているかもしれませんので、変なこと言っていたらご指摘お願いします。
あ、あと一応宣伝しておきますが、ベリサーブからこんな[ツール](https://www.veriserve.co.jp/gihoz/)が出ています。GIHOZという名称で、MBT用のツールです。GUIベースでMBTが体験できるのでぜひご利用ください。
リストの先頭に空データを追加する

今回、DBベースから取得したリストデータに空のデータを追加する方法がわからなくて、色々調べたのでメモとして残そうと思います。他にもっと簡単な方法があるかもしれないので、親切な方は教えてもらえるとうれしいです。

```java
    // リストの先頭に空データを追加
	public static <T> List<T> addEmptyItem(List<T> list, Class<T> clazz) throws Exception {
		list.add(0, clazz.getDeclaredConstructor().newInstance());
		return list;
	}
```
ボーイスカウトの法則

# ボーイスカウトの法則とは

ボーイスカウトには**「来たときよりも綺麗にして帰る」**という鉄の規則があります。
エンジニアにおいても同じですね。

自分でも他人でも過去に作ったシステムを改修する際には、案件をこなすだけではなく、ついでに改修部分を前よりも良くしていくのが大事です。

例えば、

- ソースコードを見やすくリファクタリング
- バグや障害の問題になりそうな危ういところを未然に防ぐ改修
- パフォーマンスチューニング

などなどやれることはたくさんあると思います。

こういったことの積み重ねが、システムを美しく堅牢にしていきます。
エンジニアは怠慢・短気・傲慢であれ

エンジニアの三大美徳として有名ですね。

# 怠慢

手作業で行う作業に疑問を持ち、「こんなんちまちまやってられっか！自動化しようぜ！」という意味での怠慢です。
「手作業でやったほうが早いよね」ってことは世の中に山程ありますが、「100人の10分が1分になったら、全体で900分も空くよね」って考え方は大事です。

# 短気

「期待している動きと違うじゃねーかボケェ！」って意味での短気です。
プログラムが予想と違う動きをしたり、効率的に動いていないことに怒りを感じ、すぐに正してしまう心意気は大事です。

# 傲慢

「俺様の美しいコード見て」の意味での傲慢です。
**口だけ偉そう**な人は世の中にたくさんいますが、コードでそれを証明するには確かな技術が必要ですし、周りの人も納得感があります。他人にアピールできるくらい美しい仕事をする心がけは大事です。
FTPについて調べる (メモ)

##概要
FTP(File Transfer Protocol)とは、一言で言うと、
「ファイルを送受信する時に使う決まりごと、仕組み(**通信プロトコル**)」のこと

今では、インターネット上で最もよく利用されている
**ファイル転送用プロトコル**となっています。

##できること
2つのTCPセッションを使うということが特徴

コネクションを分けることで、大量のデータを送受信している最中でも、
確実にFTPコマンドをやりとりすることが出来る点が特徴

サーバーにアップされたファイルの一覧を見る

ファイルをサーバーにアップロード、またダウンロードやバックアップを行う

FTPサーバーに接続し、データの操作を行う

##デメリット
セキュリティ面での脆弱性
FTPは、通信経路が暗号化されてないそのため、第三者から盗視や侵入をされ、
パスワードや大切な情報が盗み取られるという危険性がある

最近ではFTPにセキュリティを加えた
**SFTP(SSH File Transfer Protocol)**などの
通信を暗号化する手段を用いることが主流となっている

##参考記事
https://www.itbook.info/network/ftp01.html
https://digitalidentity.co.jp/blog/creative/ftp-for-beginners.html
https://wa3.i-3-i.info/word1137.html
新卒エンジニアのValue

みなさん、こんにちは
Amebaの広告プロダクトチームでサーバサイドエンジニアをやっている永井です。

この記事は、メディア事業部の広告横軸組織PTAの[アドベントカレンダー](https://adventar.org/calendars/5741)13日目の記事となります。

# はじめに
本記事は、私が新卒のエンジニアとしてチームにどのようなValue(価値)を提供できるか考えて行動した話がメインになります。
ただただ自分語りをするので、学びなどは読みながら汲み取っていただけると嬉しいです。

大前提として、これから話すことは組織へのディスでないことを明言しておきます。
私は組織を愛しています。
![love.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129700/59ad7e69-f989-8172-1a94-ef6b480505a7.png)



# 新卒のエンジニアがチームに提供できる価値
皆さんは、新卒社員がエンジニアチームに提供できる価値はなんだと思いますか？
![hatena.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129700/eab1f730-63f7-8d93-d25d-39de1562498e.png)

エンジニアであれば、技術力で組織に貢献するべきと考える方もいらっしゃるかもしれませんし、実際にそれが可能ならそれで良いと思っています。
ただ、プロダクトの歴史が長ければ長いほど、プロダクトについてキャッチアップして理解するだけでも時間がかかってしまいます。

私の意見にはなってしまいますが、新卒のエンジニアが提供できるもっとも高いValueは**あたりまえのない観点**だと思います。

# あたりまえの無い観点とは
![iru.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129700/4a9bad86-06e1-63b5-5c30-a98979c86bd5.png)


唐突に**あたりまえの無い観点**と申し上げましたが、これは**組織の中であたりまえとなっていて誰も疑問に思っていないことに対して疑問を持てる力**のことを指しています。
例としては、「この定例はなんのためにやっているんだろう？」「なぜこのタスクはこの人しか対応していないんだろう？」とかとかです。
もちろん、歴史的経緯で理由があることだと思うのですが、改めて疑問を抱き議論できれば、よりよい組織へ成長していけると私は考えています。

# 私が約半年間でやったこと

この**あたりまえの無い観点**を持って私が行ってきたことは大きく以下の2つです。

- 属人性の排除
- 朝会仕様変更

それぞれについて、詳しく述べていきます。

## 属人性の排除
まず現在の組織に所属してから一番最初に感じたことは「属人性が高すぎる」ということです。
例えば、

1. 大事な広告配信ロジックのA/Bテスト実施者は2名しかいない
2. あるコンポーネントについては詳しい人が1人しかいない
3. 障害対応は特定の人しかやらない

とかとかです。

組織としても重い課題として認識していたのですが、私の配属以前に大規模な人員の移動があったようで、人的リソースが不足しておりアクションが起こせなかったようです。

### 1. 大事な広告配信ロジックのA/Bテスト実施者は2名しかいない
この課題に対して、私は新卒三種の神器の1つである**新卒だから何を聞いても恥ずかしくない力**を存分に発揮し解決に向けて取り組みました。
A/Bテストの実施方法をesaにまとめていただき、その情報をもとに私が積極的にA/Bテストを実施することで、A/Bテストの実施者は3名になりました。(その直後に1名減ってしまいましたが...)

### 2. あるコンポーネントについては詳しい人が1人しかいない
コンポーネントの属人性排除については、「時間はかかってしまうかもしれませんが、自分の成長のためにこのコンポーネントの実装もやりたいです」と新卒三種の神器の1つである**成長のためにやらせてくれ力**を行使し、積極的に触ったことのないコンポーネントへの開発タスクに取り組みました。その結果、2名以上が理解できているコンポーネントを増やすことが出来ました。

### 3. 障害対応は特定の人しかやらない
この課題については、「誰よりも早く障害に対応してやる」という強い意志を持ち、障害が解決される前に自分なりに原因を追求しつつ、先輩エンジニアが障害対応に取り組み始めたときは「いまどこ調べてるんですか？」とか「どこからそのログとってきたんですか？」とか質問することで、私の障害対応能力を強化しました。結果として組織内に障害対応する人を1名(私)増やすことが出来ました。

## 朝会仕様変更
次に自分が気になったことは、「なんで朝会のファシリテーション毎日同じ人がやってるんだろう？」という点です。
気になったので、1ヶ月くらい朝会のファシリテーションを奪い取ってやってみました。朝会ファシリテーションの役割は以下です。

- 朝会全体の司会進行
- プロダクトの指標グラフ画面共有
- メンバーごとのタスク進捗確認

毎日やっていると普通に面倒くさい作業だったのと、別に誰でもできる作業だなと感じたので、チームの振り返り会(KPT)にて朝会のファシリテーションを交代制にしたいと議題を上げて、実際に朝会のファシリテーションは交代制になりました。

# 最後に
ここまで、あたりまえの無い観点から自分なりの課題を発見し、どのような過程で課題に取り組んで来たかを述べてきました。
このような行動によって、組織を下から突き上げ組織の活性化に貢献することも大事な新卒のValueだと思います。
これからも先輩方を元気いっぱい下から突き上げて行こうと思います。
そうすることでより良い開発組織にできればいいなと思っています。

最後まで私の自分語りを読んでいただき、ありがとうございました。

# おまけ
色々解決した感じ出しましたが、まだまだ課題はいっぱいです。
属人性の排除については、これまでのコンポーネント理解者や障害対応者に私が追加されただけなので、まだまだ解決できたと言える状況ではありません。よりよい状態を目指してこれから、組織内に情報を広げていく動きをしていきます。
朝会仕様変更についても、まだまだタスクの管理が雑だとかチケットが更新されないなど課題は山積みなので、少しずつでも変えていけたらいいなと思っています。
[VSCode拡張機能]Styled-Components Extractorが便利すぎる！

## はじめに
styled-componentsの便利な拡張機能を見つけたのでその紹介です。

参考：[Styled-Components Extractor](https://marketplace.visualstudio.com/items?itemName=FallenMax.styled-components-extractor)

## 使い方
拡張機能をインストールしたら、下のような感じで未定義のコンポーネントを書いていきます。未定義なのでエラーが出ています。
※エラーをわかりやすくするためにTypeScriptで書いていますが、JavaScriptでもOKです。

Command+Shift+P(WindowsはCtrl+Shift+P)でコマンドパレットを開いて、
`Extract styled-components` または `Extract exported styled-components`を選択します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697143/9eff9d11-6178-7224-a406-030fe1c3018b.png)

### Extract styled-components の場合
↓こんな感じでクリップボードにコピーされます。

```tsx
import styled from 'styled-components'
const Page = styled.div``
const Header = styled.div``
const Main = styled.div``
const List = styled.div``
const ListItem = styled.div``
const Footer = styled.div``
```

### Extract exported styled-components の場合
↓こんな感じでexportがついて、クリップボードにコピーされます。

```tsx
import styled from 'styled-components'
export const Page = styled.div``
export const Header = styled.div``
export const Main = styled.div``
export const List = styled.div``
export const ListItem = styled.div``
export const Footer = styled.div``
```

### ショートカット

VSCodeのKeyboard Shortcutsにこんな感じで追加しても使えるみたいです。

>```json
[
  {
    "key": "cmd+alt+e",
    "command": "styledComponentsExtractor.extract",
    "when": "editorFocus"
  },
  {
    "key": "ctrl+alt+e",
    "command": "styledComponentsExtractor.extractExported",
    "when": "editorFocus"
  }
]
```

## 終わりに
ここまで読んでいただきありがとうございます！まだダウンロード数が少ないですが、かなり便利だと思います。
他に便利な拡張機能などがあれば教えていただけると嬉しいです。
【Vue.js】computedとwatchの違い・使い分け

# はじめに

前回の記事では[【Vue.js】computedとmethodsの違いまとめ](https://qiita.com/t_t238/items/dbf560a67f952a83aea0)では、computedとmethodsの違いについてアウトプットしました。本記事では`computedとwatchの違い`についてアウトプットします。

# watch プロパティとは

特定のデータまたは computed プロパティの状態を監視して、変化があったとき登録した処理を自動的に実行するものです。
データの変更を監視して、それをトリガーに非同期処理や複雑な処理を行う必要がある時に使えます。

# 書き方

コンポーネントの watch オプションに、監視するデータの名前と変化したときに呼び出されるハンドラを定義します。

比較をしたい場合、第 1 引数として「新しい値」と、第 2 引数として「古い値」を受け取れます。

ウォッチャの定義では、次のオプションを任意に設定できます。

> `deep(任意) `: ネストされたオブジェクトも監視する
> `immediate(任意)` : 初期読み込み時にも呼び出す

```javascript

watch:  {
   変更を監視するプロパティ名: {
     handler: function (変更後の値, 変更前の値) {
       //ここに処理内容を記述
   },
     [deep: 真偽値,] // => trueの場合、ネストされたオブジェクトも監視
     [immediate: 真偽値,] // => trueの場合、初期読み込み時にも呼び出す
 }
}
```

# computed プロパティとの違い

同様のプロパティとして `computedプロパティ`があります。computed プロパティが使える場合には、簡潔に記述できるためそちらの方が適切です。しかし、上記のように非同期通信のアクセスをするなど、より複雑で汎用的な処理をする場合には`watch`プロパティが便利です。以下は、`watch`プロパティを使うべきケースです。

・computed プロパティでは処理できない非同期通信などの複雑な処理を行う場合
・更新前と更新後の値を使う場合
・処理を実行しても、データは返さない場合

# 実装例

watch プロパティの場合

```javascript
const Vue = new Vue({
  el: '#app',
  data: {
    num1: 5,
    num2: 4,
    sum: 20,
  },
  watch: {
    num1: function (value) {
      this.sum = val * this.num2;
    },
    num: function (value) {
      this.sum = this.num1 * val;
    },
  },
});
```

computed プロパティの場合

```javascript
const Vue = new Vue({
  el: '#app',
  data: {
    num1: 5,
    num2: 4,
  },
  computed: {
    sum: function () {
      return this.num1 * this.num2;
    },
  },
});
```

上記ケースの場合は `computed`プロパティでの記述の方が、簡潔で可読性の高いコードとなります。そのため、`computed`プロパティで記述できる場合には`computed` プロパティを採用し、API にアクセスする非同期処理を実装する場合は`watch`プロパティを採用するなどの使い分けが必要となります。

# 参照
[Vue.js :Computed Properties and Watchers
](https://v3.vuejs.org/guide/computed.html#computed-properties)
CloudCompareとQGISで手っ取り早く石造物の碑文を読む

石造物の碑文面を三次元計測して読み取りやすくする手順を紹介します。MetaShape以外はオープンソースのソフトウェアを使用します。

## .plyファイルを出力する

MetaShapeなどのソフトウェアを使って、碑文面の点群データができているところからスタートします。

1. File → Export → Export points
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/47f93368-34c9-5f92-f90b-f74b2240f06a.png)

2. Standerd PLY(*.ply)で保存
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/ba2a9970-b777-c2f5-6ba5-5cee765702d9.png)

## CloudCompareで幾何補正する

1. CloudCompareでplyファイルを開きます。
2. Tools →　Registration → Align(point pairs picking)
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/4ad6b460-db6d-f137-1c76-8684bfef7df9.png)

平坦な面の任意の部分を選んで座標を与えます。
単に碑文を読み取るだけなら、正確な座標は不要です。
左下を(0.0 , 0.0)、左上を(0.2 , 0.0)、右上を(0.2 , 0.1)、右下を(0.0 , 0.1)とします。

左下の方にカーソルを移動し、クリックしたら右の鉛筆マークをクリックします。
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/edfcc2d0-192f-a399-4b27-3343e35d2f35.png)

入力値はすべてゼロです。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/dedb7cb0-9d37-da0f-7f09-017f6a479fec.png)

次は左上の任意点をクリックします。
y座標に0.2を入力します。
最初の点から上方向に0.2m移動したものとします。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/6ec4def7-1d54-859f-f5d0-8d9a66fb9794.png)

同様にして、4点の座標指定を行ったら、右下のチェックマークをクリックします。
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/58135c40-3dfc-4635-67f8-64951f8431bc.png)

「OK」をクリックします。
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/5e68857f-cda8-00a9-225a-0a409e852fd3.png)

## CloudCompareでラスタライズ

Tools → Projection →　Rasterize(and contour plot)
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/8cb9c19c-4b89-64bf-db00-59e3c36d96cf.png)

1. step : 0.002 （2mmメッシュ）
2. direction : Z
3. cell height : average
4. Empty cells : interpolate　（空白グリッドを0で補間します）
5. Update grid　をクリック
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/dcbcac77-6837-fb63-da14-ac502a220878.png)

構わず「Yes」
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/48c37848-7452-0366-7aa8-d74cf2d2c463.png)

以下のようなものが出力されればOK。
「Raster」をクリック
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/7563be59-88e8-0182-f4ca-14eaf6be6fbc.png)

「Export Height」にチェックを入れて「OK」
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/1264e6a7-b2c0-6751-7f28-65c6c8e19c0c.png)

tiff形式でファイルを保存
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/f9ba3a5c-b9d3-45b1-a0ec-d67a85799b76.png)

## QGISで表示する

tiffファイルをQGISで開きます。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/651410a4-bad8-9620-6a20-f18b6202054e.png)

1. シンポロジ
2. グラデーション最小 : -0.05 最大 : 0.05
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/9f1fe2af-4049-2a31-e30b-fdaaae4b0435.png)

「善明治十八年」
「八月十六日」
と明瞭に読み取ることができました。
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/52435789-b23b-3e81-fa7d-86517eaf2696.png)

Slopeと組み合わせた表現
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/2982dcd5-213f-8445-dd5e-f0e454971358.png)
Macで複数のPDFの合計文字数を数える方法

## 大量のPDFの文字数を一気に数えたい
　PDFの文字数を数えたときのメモです。

　流れとしては以下となります。

### 事前準備
　popplerというパッケージソフトをインストール

　Homebrewを使えば以下コマンドでOKです。

```sh
$ brew install poppler
```

### 文字数カウント方法
#### 手順
　手順は以下となります。

- popplerの中のpdftotextというソフトでpdfをテキストファイルに変換
- catコマンドでテキストファイルを1つのファイルにまとめる
- テキストファイルの文字数を数える

　スクリプトにまとめたので、pdfファイルが入ったフォルダで以下2行を実行すればOKです。

```sh
$ wget https://raw.githubusercontent.com/karaage0703/scripts/master/wordcount_all_pdf.sh
$ bash wordcount_all_pdf.sh
```

#### シェルスクリプトの中身
　中身は以下となっています。

```sh
#!/bin/bash
for f in *.pdf
do
    echo $f
    pdftotext $f
done

cat *.txt > all.txt
wc -m all.txt
```

　もっと良い感じの書き方あれば教えてください。

## まとめ
　MacでのPDF文字数の数え方を簡単にまとめました。最近、本を執筆したので、その文字数を数えたくなり調べたものです。

　ちなみに文字数は約26万字（257837）でした。一般的な書籍は10万字程度と聞いていたので、かなり多いですね。技術書なので、プログラムのコードが多いためかもしれません。もしくは、うまく数えられていないのかも…

　ちなみに、書籍は以下となります（宣伝です）。AI初心者向けの本となります。興味ある方はよろしければ。

[AIの初心者向けの独学本「からあげ先生のとにかく楽しいAI自作教室」を執筆しました](https://karaage.hatenadiary.jp/entry/2020/12/11/073000)

## 参考サイト
- https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11189744426
- https://tech.withsin.net/2016/10/26/pdftotext/
G検定 所感

先日、JDLA Deep Learning for GENERAL（G検定）に合格しましたので、思った事を記事にします。

# G検定の特徴

* ディープラーニングに興味を持っている・関わりのある業務や会社の方針で着手しようとしてる方々にはメリットあり
* 「概論的」な内容で、ブログラム自体は対象外
 * 非プログラマでも合格できる可能性は高い
 * すぐに業務に貢献できる類の試験ではない
 * 「エンジニア」と言うより「監督・管理する側」が取得するべき試験でしょう
* 就職や転職活動で取っておくべきかと言うと、その企業が注力していれば有利になるとは思うが、そうでなければ他の試験を優先すべき

# 試験概要
<dl>
  <dt>開催日程</dt>
  <dd>年に3回程度</dd>
  <dt>開催場所</dt>
  <dd>オンライン実施（自宅受験）</dd>
  <dt>試験内容</dt>
  <dd>120分、約220問を解く</dd>
  <dt>合格点</dt>
  <dd>非公開</dd>
  <dt>合格率</dt>
  <dd>約6～7割</dd>
  <dt>合否発表</dt>
  <dd>試験から約2週間後（メール通知）</dd>
  <dt>合格証</dt>
  <dd>試験から約1ヶ月後（メール通知、PDFで届く）</dd>
  <dt>補足</dt>
  <dd>出題傾向は毎回変更あり</dd>
</dl>

自宅のパソコンでネット検索も可能なため **Google検定** と揶揄されたり **ググれるなら楽勝でしょ？** とSNSなどと意見が散見されましたが、侮っていると痛い目にあいます。

オンライン検定なのに合否がすぐ分からず、結果が分かるまでは、もどかしい状態でした。

# 試験対策

1.公式テキスト・問題集を解く

* **深層学習教科書 ディープラーニング G検定(ジェネラリスト) 公式テキスト**
* **徹底攻略 ディープラーニングG検定 ジェネラリスト問題集**

この2冊は、通称「白本」「黒本」と呼ばれているようです。最低限の基礎知識であり、これだけでは準備不足です。

実際、問題集は9割のラインになるまで繰り返しましたが、実際の試験では、時事問題とかコンプライアンスに関する問題などが多く、ネット検索しても回答そのものが載っていない事も多く時間が浪費されました。


2.オンラインの模擬テストを行う

http://study-ai.com/generalist/

白本、黒本対策以外、オンライン模擬試験が、かなり有用でした

3.チートシートの作成

私自身、作れていませんでしたが、作っておけば万全だったと思います。
人の作ったチートシートを活用するのも良いかもしれませんが、自分なりにまとめないと活用できない気がします。

# 最後に

* おおよそ1問を30秒で回答する必要があり、その間に本やネット検索する余裕は限られています
 * 本で基礎情報は脳内にインプット、人名や会議などの固有名詞はググれば探し出せるでしょう
* 時事問題やコンプライアンスに関する問題が多すぎて、その関連情報をインプットしておくべきでした
 * 出題範囲は毎回変わるそうなので、次回の試験は傾向が変わるかもしれません
Nginx　returnディレクティブ

# returnディレクティブ

役割|詳細
--- | ---
構文| return code[text];<br>return code URL;<br>return URL;
デフォルト| -
コンテキスト | server, location, if


処理を停止し、指定されたcodeをクライアントに返します。非標準のコード 444 は応答ヘッダを送信せずに接続を閉じます。

バージョン 0.8.42から、リダイレクトURL(コード 301, 302, 303, 307 および 308)か応答ボディtext (その他のコード) のどちらかを指定することができます。

応答ボディテキストとリダイレクトURLには変数を含むことができます。

特別な場合として、リダイレクトURLはこのサーバへのローカルなURLとして指定することができます。
この場合、完全なリダイレクトURLはリクエストスキーム($scheme) と server_name_in_redirect とport_in_redirectディレクティブに応じて形成されます。

更に、コード302の一時リダイレクトのURLを単独のパラメータとして指定することができます。
そのようなパラメータは"http://", "https://" または"$scheme"文字列から始まらなければいけません。URLには変数を含むことができます。

## リダイレクトのステータスコード

コード |意味 | 詳細
--- | ---|---
301 | Moved Permanently | URLが新しいURLへ永久的に変更されたことを表します。古いURLを保持しているクライアントは、以後新しいURLのみを使用します。<br>サイトリニューアルでURLが変更になった場合とか、本来アクセスされるURLとは異なるURLへのアクセスを制御させたい時とかに使います。
302 | Found |一時的に別のURLへ遷移させたい時に使用します。リダイレクト先は一時的なURLのため、古いURLを保持しているクライアントはこの後も古いURLを保持し続けます。<br>たとえばサーバーエラーが発生したときにエラーページへリダイレクトする場合とかに使います。最も広く使われるリダイレクトのステータスコード。
303 | See Other|新しいURLにGETメソッドでアクセスすることが決められたリダイレクトです。フォームからPOSTした後にリダイレクトしてTOPページへ戻す、というような遷移で使います。HTTP/1.1から導入されました。
307 | Temporary Redirect |一時的に別のURLへ遷移させたい時に使用します。302とよく似ているけど、リダイレクト前と同一メソッドでリダイレクト先へもアクセスを行うところが異なります。<br>用途があまり思い浮かばないけど、たとえば主系・幅系と2系統で展開しているサイトで、サーバーにトラブルが発生したら、もう片方にリダイレクトして処理を続行させる場合などに使用します。HTTP/1.1から導入されました。
308 |Permanent Redirect | リクエストされたリソースが Location ヘッダーで示された URL へ完全に移動したことを示します。ブラウザーはこのページにリダイレクトし、検索エンジンはリソースへのリンクを更新します。<br>301 の場合は不正に GET メソッドに変更される可能性があるのに対し、このコードの場合はリクエストメソッドと本文が変更されません。


## 使用例

```
return 301 https://$host$request_uri;
```

## 参考

[ngx_http_rewrite_module モジュール 日本語訳](http://mogile.web.fc2.com/nginx/http/ngx_http_rewrite_module.html#return)

[HTTPリダイレクト4種類の違いとは？│HTTP│Webサイト開発│SYMMETRICソフトウェア開発ブログ](https://www.symmetric.co.jp/blog/archives/123)

[301 Moved Permanently - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/301)

[HTTP レスポンスステータスコード - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Status)
[Xcode]フルスクリーンでXcodeとSimulator画面を並べる方法

#はじめに
海外のiOSアプリ開発のYouTube動画を見ているとフルスクリーン画面でXcodeとSimulatorを並べているのを見かけました。
そのままではできなかったので調べてみました。

##こんな感じ

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XcodeとSimulator並べて表示するのかなり便利やね <a href="https://t.co/a6yzUOsPcc">pic.twitter.com/a6yzUOsPcc</a></p>&mdash; M (@p_x9) <a href="https://twitter.com/p_x9/status/1337960376902664205?ref_src=twsrc%5Etfw">December 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#やり方
terminalで以下のコマンドを実行する。

```
defaults write com.apple.iphonesimulator AllowFullscreenMode -bool YES
```

XcodeとSimulatorを立ち上げてXcodeをフルスクリーンに。
そしてミッションコントロール(トラックパッドを三本指で上にスワイプするやつ)でsimulatorをxcodeに持っていくと並べることができる。


ちなみに以下のように左側にもsimulatorを持ってこれるので、好みに合わせて。
![スクリーンショット 2020-12-13 13.57.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377767/a5acb2a8-dafc-5ad5-fd52-6b2c5ae8665b.png)

##[参考]
https://dev.to/zdnk/-fullscreen-xcode-and-simulator-42ng
Publisherで作成した原稿(.pub)を印刷向けに.psdに変換する

覚え書き。
特に裁ち落としの処理に困ったので。

###Publisher

`エクスポート > 外部印刷用に保存`
でPDFファイルを出力

生成した.zipを解凍する

###GIMP

PDFファイルをGIMP画面に投げ込む（あるいは`ファイル > インポート`でPDFファイルを選択）
モノクロとカラーで分けて作業する
モノクロのページのみ選択して600dpiか1200dpiでインポート
カラーのページのみ選択して300dpiか350dpiでインポート

`画像 > キャンバスサイズの変更`で画像を印刷向けサイズにリサイズする
サイズを入力し`中央`を押せば一発

`ファイル > エクスポート`で.psdにして1ページずつエクスポートして完成


ページ数が増えてくるととてもめんどくさい作業だけどとりあえずこれで問題なく通るので、参考までに。