OmniAICreator/Qiita-1.07M huggingface dataset:
curlコマンドのあれこれ

## curlコマンドの構成
```
$ curl [オプション] [URI]
```
この形が基本的なcurlコマンドの構成になる。
オプションの部分は複数のオプションを連ねても問題ない。
また、URIの後にオプションが来ても問題なく、正常にcurlコマンドを実行することができる。


## curlコマンドのいろいろ

``curlコマンドのバージョンを表示する。``

```
$ curl --version
curl 7.64.1 (x86_64-apple-darwin20.0) libcurl/7.64.1 (SecureTransport) LibreSSL/2.8.3 zlib/1.2.11 nghttp2/1.41.0
Release-Date: 2019-03-27
Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtsp smb smbs smtp smtps telnet tftp
Features: AsynchDNS GSS-API HTTP2 HTTPS-proxy IPv6 Kerberos Largefile libz MultiSSL NTLM NTLM_WB SPNEGO SSL UnixSockets
```

`` レスポンスヘッダーを表示する。``

```
$curl [URI] -I
```
```
curl https://www.google.com/ -I
HTTP/2 200
content-type: text/html; charset=ISO-8859-1
p3p: CP="This is not a P3P policy! See g.co/p3phelp for more info."
date: Sun, 19 Sep 2021 16:55:52 GMT
server: gws
x-xss-protection: 0
x-frame-options: SAMEORIGIN
expires: Sun, 19 Sep 2021 16:55:52 GMT
cache-control: private
set-cookie: 1P_JAR=2021-09-19-16; expires=Tue, 19-Oct-2021 16:55:52 GMT; path=/; domain=.google.com; Secure
set-cookie: NID=223=RLMsNv3i9M0jR_koLR1PBssPVr1sj4cAPnZFPGJMABpEB-fWeQwic002KIQkOCJ7bkYEwTS_dhFv7hPJa5AzWCWJaB_xRHkNto5tMVnconTCv8sQEPBkwocwGoDLn-kCmrLo4_6DBJg4_WtageqdGlVeCvwUHZik3ZNsWVwFN1A; expires=Mon, 21-Mar-2022 16:55:52 GMT; path=/; domain=.google.com; HttpOnly
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-T051=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
```
こんな感じでstatusコードが返ってくる。
slickに表示したものをスマホサイズで表示できるようにした

# はじめに
本記事では、slickで表示したものをスマホサイズにしたので、
備忘録として記述します。

## 前提
slickで以下の写真のようなものが既に作成できていること。
できていなければ以下を参照ください。

https://qiita.com/mkato1013/items/1fa7553957364bf62e64


#　詳細

[![Image from Gyazo](https://i.gyazo.com/4fd5735d04ab76cbde944db557981459.jpg)](https://gyazo.com/4fd5735d04ab76cbde944db557981459)

マック上だとこんな感じです。

これを縮小してみると

[![Image from Gyazo](https://i.gyazo.com/ee25fdeb30eb276293e2c843265f033a.png)](https://gyazo.com/ee25fdeb30eb276293e2c843265f033a)

ちょっとかわいそうな感じになりました。

ので、CSSで調整していきます。

スマホはだいたいwidthが500pxが最大と学習したので、
以下のようなコードを記述しました。

[![Image from Gyazo](https://i.gyazo.com/bd9be6d4ea81da93628bcf04af866b0a.gif)](https://gyazo.com/bd9be6d4ea81da93628bcf04af866b0a)

内容としては、オレンジのところのmarginを狭くしています。
そうすることで、次の投稿との距離が短くなり、スマホに対応した場合でも、
無事に対応することができました。
オレンジのところは、以下のコードのmarginです。

```css
.ranks-img-content {
  padding: 5vh;
  border: 10px solid #ff5511;
  border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
  margin: 5px 150px;
  background-color: rgba(255, 255, 255, 0.692);
}
```
これを

```css
// スマホ対応
@media (max-width: 500px) {
  .ranks-img-content {
    padding: 5vh;
    border: 10px solid #ff5511;
    border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
    margin: 5px 0px;
    background-color: rgba(255, 255, 255, 0.692);
  }
}
```
こんな感じで、marginの横幅を0にしてみたところ、無事に、スマホ対応することができました。
その他は、画像小さくしたりと微修正はしています。

[![Image from Gyazo](https://i.gyazo.com/cf43c17721ff78511a11ef3dea0b5f92.png)](https://gyazo.com/cf43c17721ff78511a11ef3dea0b5f92)

以上です。

# 終わりに
レスポンシブはうまく行けば楽しいですが、
悩んでしまうとなかなか先にいけないですね。

というか、アプリケーション作成段階から、
このようなことを考えながら作成するべきだと、反省しています。

次の新しいアプリケーションを作成する機会があれば、
CSSを書く際には、レスポンシブを意識しながら作成したいと思います。

明日も頑張ります！！
【AviUtl】【エラー】発生モジュール：lua51.dll  備考：FILTER::func_proc()[拡張編集]の解決

# AviUtlの題記のエラーについて
AviUtl v1.00、拡張編集 v0.93rc1、
その他多数のpluginsを利用している。

しかし下記エラーが発生し、いくつかのオブジェクトにかけていたアニメーション効果やフィルタ効果が消えてしまい、
再設定してもアニメーションが反映されない状態になってしまった 。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1990652/7cc9fa96-ee5e-d456-ab7c-7b7dbb02ee17.png)

長らくこの解決方法を探していたが、先ほどあっさり見つかったため、
ここに備忘録として残す。

# 原因
そもそも、なぜこのようなエラーが起きているのかというと、
下記の図のように`LuaJITを利用する`にチェックをつけていると、拡張編集は```lua51jit.dll```を使用しようとする。

一方、スクリプト用のdllは`lua51.dll`を使用しようとするため、エラーが発生するようだ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1990652/97f4078d-f3b9-f0fb-0cf9-14b091f619ab.png)


# 対処方法
至極 単純明快
`LuaJITを利用する`のチェックを外して運用すればよい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1990652/189120fe-6bd4-826a-5250-fdfaca9e889c.png)
これで運用する

※参考サイトの対処方法
`どうしてもLuaJITを使いたいならば、lua51.dllをLuaJITなdllに置換するという今までの方法が使えます これをしたら LuaJITを利用する は無効にします`
とは、つまり[ここに載っている高速化されたLua51.dll](https://aketama.work/aviutl-luajit)をAviUtlに導入し、 上記の`LuaJITを利用する`のチェックを外して運用すればよいと解釈した
（合っているわからんが、結局はlua51.dllがLuaJITで高速化されたものを使用していればよいのだろう）

# 参考リンク
[AviUtl・関連プラグインのバグ](https://scrapbox.io/ePi5131/AviUtl%E3%83%BB%E9%96%A2%E9%80%A3%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%90%E3%82%B0)
[【AviUtl】LuaJITを導入して動作を高速化しよう！【拡張編集】](https://aketama.work/aviutl-luajit)
PHPで権限の問題でファイル読み取りがどうしても出来ないときは、shell_exec()関数でlinuxコマンドを叩いて読み取ってしまおう

## 起こったこと
趣味でとある処理を自動化していて、ログも生成しているのでそれをブラウザからも見れるようにしようと思ってそのテキストファイルの読み取りのために「file_get_contents()」関数使おうとしたらなかなかうまくいかなかった件。

phpでファイルを読み込むには何通りか方法があるが、
何をやっても「permission」エラーが出る。

ググったら権限をいじったり、読み取るファイルは手動で作成したものではなくPHPプログラムから作成したものにしようなど。
いろんな記事を見たけど、何やってもダメだった。うーん、apacheのユーザーの権限もちゃんとなってるはずなんだが、、、笑
自分のサーバーのどこかがおかしいのか。。。

別にPHPの関数にこだわる必要もないかなと思って他の方法考えてみたら、
linuxコマンドからもファイルの中身見れるなって思って、phpでshell実行できることを思い出した。

関数名は、「shell_exec()」

```php:anime-suko.php
$hoge = shell_exec("sudo cat /root/public_html/otaku.txt");
echo $hoge;
```

いけた。。。(ガッツポーズ淫夢くん)

あんまり無いと思うが、もしWindowsサーバーとかなら、Docs叩く。

## 感想
1つの方法にこだわらず、とりあえず実現したいって気持ちで方法を考えるとなんかすぐうまくいくことが多い。
IntelliJ+docker-compose+railsでブレイクポイントでのデバッグ環境を構築する


# Gemfileにruby-debug-ideとdebaseを追加
Gemfileにruby-debug-ideとdebaseを追加してインストールしておきます。
**もし追加しなかった場合は、SDK構成からやり直す必要があります。**

# SDK構成

1. File → Project StructureからProject Structure 構成画面を開きます

2. Ruby SDKを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/3fa4118e-8dc9-48d5-763b-61ee87d4c688.png)

3. New remoteを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/3088b1c1-4c3d-7bc6-8ddd-f626525eac1c.png)

4. docker-compose.ymlからサービスを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/c9d52b7b-9fba-6e32-a83b-67139b084ba4.png)

5.Project StructureのModules で先程追加した構成を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/890648fb-2c40-4f25-a28d-244def386ae8.png)


#無い場合はRun/Debug Configuration を追加
追加した後は基本的には何も設定は変更しないで大丈夫です。docker-composeという設定項目が追加されている事が確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/53a48a3b-dcaa-b996-baca-2d79ea958762.png)

#トラブルシューティング

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/0c7fea83-a8a0-b59f-200f-9bd2e5f0087f.png)

画像のように、Exception: Connection refused - connect(2) for "192.168.0.1" port 26168
といったようなエラーが発生する場合は、puma.rbに

```ruby:puma.rb
workers 0
```
という行を追加し、クラスターモードではなく、シングルモードでpumaを起動することでエラーで回避する事ができます。

https://github.com/ruby-debug/ruby-debug-ide/issues/158
Linuxでコマンドラインを編集するのに知っておくべきショートカット集

[Zenn](https://zenn.dev/mo_ri_regen/articles/linux-commandline-shortcut)にも同様の記事があるのでよければどうぞ👋

## TL;DR

Linuxでコマンドラインを編集するのに知っておくと便利なショートカットである「カーソル移動」、「文字の削除」、「ヤンク」、「画面をクリアにする方法」についてそれぞれ書いてます。

## シェルの移動方法

カーソル(←,↓,↑,→)を使っても移動できますが、コマンドを覚えることでホームポジションを崩さずに移動することができます。

### 1文字前に移動

- コマンド

Ctrl + b[^1]

- 例

移動前
![移動前](https://gyazo.com/c8445b41e3acfc53b54578f15a6d2f1c.png)
移動後
![1文字前に移動](https://gyazo.com/bdf9d6a94046e9293f41b4ceb5221970.png)
### 1文字後ろに移動
- コマンド

Ctrl + f[^2]

- 例

移動前
![移動前](https://gyazo.com/c8445b41e3acfc53b54578f15a6d2f1c.png)
移動後
![1文字後ろに移動](https://gyazo.com/e217cc3fbc9d20eb0a73b5c2ea9d556d.png)

[^1]: backの"b"
[^2]: forwardの"f"

### 行頭に移動
- コマンド

Ctrl + a

- 例

移動前
![移動前](https://gyazo.com/c8445b41e3acfc53b54578f15a6d2f1c.png)
移動後
![行頭に移動](https://gyazo.com/20ca0dcb826d31eb04faca7e4ca8793e.png)
### 行末に移動

- コマンド

Ctrl + e

- 例

移動前
![移動前](https://gyazo.com/c8445b41e3acfc53b54578f15a6d2f1c.png)
移動後
![行末に移動](https://gyazo.com/d7ac71860c7558ae86f5aca91b714b50.png)

## 削除

### カーソル位置の後方に1文字削除

- コマンド

「Ctrl + h」またはBackSpace

- 例

削除前
![Ctrl + hで削除前](https://gyazo.com/b65523b5e8967251f0eb243fb3c8376e.png)
削除後
![Ctrl + hで削除後](https://gyazo.com/a9fef154e5c1d32457c66abc4d2f60e7.png)

### カーソル位置の1文字削除
- コマンド
「Ctrl + D」またはDelete

- 例

削除前
![Ctrl + Dで削除前](https://gyazo.com/b65523b5e8967251f0eb243fb3c8376e.png)
削除後
![Ctrl + Dで削除後](https://gyazo.com/19b9e990af9513f08f826da0f735ff70.png)

### 後方にスペース区切りで1単語分を削除

- コマンド
Ctrl + w

- 例
削除前
![1単語分削除前](https://gyazo.com/fbe47742e8a751b08002f5ec32b193cc.png)
削除後
![1単語分削除後](https://gyazo.com/b17afd193284977bca508006e16c14d2.png)

## カット

操作するときは単純に削除するのではなく、カーソル位置から行頭までする→ヤンク(ペースト)するというようにいわゆるコピペ作業するときに使います。

### カーソル位置から行末まで削除

- コマンド
Ctrl + k

- 例
削除前
![Ctrl + kで削除前](https://gyazo.com/c62003497e8f211c984a2b65562ab039.png)
削除後
![Ctrl + kで削除後](https://gyazo.com/90f793336605ccafd2dee9b3e645190e.png)

### カーソル位置から行頭までを削除
- コマンド

Ctrl + u

- 例

削除前
![Ctrl + uで削除前](https://gyazo.com/c62003497e8f211c984a2b65562ab039.png)
削除後
![Ctrl + uで削除後](https://gyazo.com/042b629231305048998f662c40984702.png)


## ヤンク

bashではペーストのことを**ヤンク**といいます。
### 最後に削除した内容を挿入

- コマンド

Ctrl+y

- 例

Enter押す前にCtrl + uで削除します。
![Ctrl+uで削除前](https://gyazo.com/735cd9c7af431e2c85fd5d49e7020861.png)
削除されました。
![Ctrl+uで削除後](https://gyazo.com/388ca5f88d81e86d3fcacce4d7481607.png)
Ctrl+yを押すとヤンクされます。
![Ctrl+yでヤンク](https://gyazo.com/ee4ec477dc77eb3c8ec4b20f4405b534.png)

## 画面クリア

下記コマンドで画面に表示している内容をクリアします。

```bash
clear
```

## 参考

https://www.sbcr.jp/product/4797380941/
iOSのショートカットアプリでPythonコードを実行する方法

# ご注意
~~2022/08/02 時点で本記事の内容を実行するとエラーが発生して、失敗します。~~

~~「Webページの内容を取得」でbrython.min.jsを読み込む際に発生します。~~
~~本記事については、過去に実施した手順のメモとして残します。~~

2023/03/21 時点で、iOS 16.3.1 とwatchOS 9.3.1 の組み合わせで動作することを確認しました。



# 概要

iOSのショートカットアプリはURL (データスキーム) にJavaScriptを埋め込み、「WEBページの内容を取得」を使うことでJavaScriptを実行できます。これと[Brython](https://brython.info/)を組み合わせたらPythonコードを実行できましたので、手順をまとめます。

この方法で作成したショートカットはApple Watchでも動作しました。

# 手順
### 1. Python実行用の汎用ショートカットを作成する
下記のショートカットを作成して、名前を「Python実行」にしてください。
![Python実行_ショートカット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759601/ccad1c2b-79d9-0ed8-80cd-b2084b368692.png)

「テキスト」は下記を入力してください。

 ```html
<script src="https://cdn.jsdelivr.net/npm/brython@3.8.0/brython.min.js"></script>
<script  type="text/python">
ショートカットの入力
```
### 2. Pythonコードを埋め込んだショートカットを作成する
下記サンプルようなPythonコードを埋め込んだショートカットを作成します。

「テキスト」に実行したいPython(Brython)コードを記述します。
Pythonコードで出力する場合は「document.write」を使用してください。

次に「ショートカットを実行」で、1で作成したショートカットを実行します。
このとき、Pythonコードを記述した「テキスト」を入力します。

![Pyテスト 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759601/27294ef2-c12e-e30b-4a5b-39b4b291528f.png)


### 3. Pythonコードを埋め込んだショートカットを実行する
2で作成したショートカットを実行するとPythonコードが実行されて、「document.write」した結果がテキストとして返却されます。サンプルでは、「通知」で返却されたテキストを表示します。

![Pyテスト 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759601/b7786f7f-fe8d-4b9a-e21d-7c3bbb7274f6.png)


# その他
### Apple Watchで実行
サンプルをApple Watchで起動した結果は下記となります。

![IMG_7765.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759601/745fcafb-aadf-45f1-8623-2c35887cf7f0.png)


### 課題・不明点
* Brythonライブラリは毎回ロードされているのか？もしくはキャッシュされているのか？
* 日本語の文字化け
Randomization for Robotic Grasping/Segmentation

https://www.youtube.com/watch?v=k7dom7fRb8I

Domain Randomization for Scene-Specific Car Detection and Pose Estimation
https://arxiv.org/pdf/1811.05939.pdf


seed instance segmentation
Training instance segmentation neural network
with synthetic datasets for crop seed phenotypinghttps://www.nature.com/articles/s42003-020-0905-5.pdf

https://media.proquest.com/media/hms/PFT/2/SggBB?_s=hokvFHf7XBJZlY2wCfAB5j6VXiE%3D


https://www.scitepress.org/Papers/2020/101681/101681.pdf
Global and Local Texture Randomization for
Synthetic-to-Real Semantic Segmentation
https://arxiv.org/pdf/2108.02376.pdf
[Flutter]アプリを日本語化したい


カウントダウンタイマーを作る上で、日本語版にしたいという希望を解決できたので、共有しておきます。


参考になったサイト　：　https://hazm.jp/archives/90


## ① pubspecにプラグインを追加する

pubspec.yamlの中に追加する（コピペでOK）

```
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
```


## ② Pub get する

自分のファイルで使えるようにしましょう。



## ③ main.dartに追加していく。

```
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [Locale('English'), Locale('ja')],
      debugShowCheckedModeBanner: false,
      home: ？？？？Screen(),
    );
  }
}

```

これでやってみるとできると思います。僕はできました。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/993eddd6-d71a-1340-7d15-20a33a840ad3.png" width = 40% >
macOSでSwiftでファイルを読み込む

# 事前準備
Playgroundで実施する場合は、iOSではなく、macOSで作成することに注意する。
iOSで実施するとエラーになるAPIがある。

# 簡単な例

* https://stackoverflow.com/questions/24097826/read-and-write-a-string-from-text-file

# userDirectoryを指定したい場合

`FileManager.default.homeDirectoryForCurrentUser`でhome directoryのpathが取得できる。

# Directoryの探し方

* [`urls(for:in:)`](https://developer.apple.com/documentation/foundation/filemanager/1407726-urls)
    * 使いやすい firstで最初のやつを取る感じになる
* [`url(for:in:appropriateFor:create:)`](https://developer.apple.com/documentation/foundation/filemanager/1407693-url)
    * temp dirを作るのにも利用できる
    * おかしなdirectoryとdomainのペアを渡すとException
    * itemReplacementDirectoryを渡した時だけappropriateForが必要
    * createはなかったらdirectoryを作成するかどうかのbool


ドメインについてはこちらが参考になる。
[ファイルシステムの概要](http://potting.syuriken.jp/potting_conv/BPFileSystem_J/Domains.html)

# 例: aws credentialを取得

```swift
let homeDir = FileManager.default.homeDirectoryForCurrentUser
let awsCredentialsPath = homeDir.appendingPathComponent(".aws/credentials")

do {
    let text = try String(contentsOf: awsCredentialsPath)
    print(text)
} catch {
    print(error)
}
```

#　参考まで

[zennのスクラップ: macOSのFileの読み込み](https://zenn.dev/shoheikun/scraps/c23cd9f36a3e1b)
STM32F303K8をVSCのcubeideでLチカ


目的
軽量化
物凄く雑な方法で非推奨
初期ブート環境で無理やりLチカさせる。

mainは下記の内容

適当にコピー
main.h
stm32f3xx_hal_conf.h
stm32f3xx_it.h


ヘッダー


https://os.mbed.com/users/caa45040/code/f303_h_p1/


![h_con98.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/e559e862-e926-9b80-38d9-d8f73374baee.jpeg)



```c++


#include"main.h"

int main() {

  __HAL_RCC_GPIOB_CLK_ENABLE();


  GPIO_InitTypeDef GPIO_InitStruct = {0};

  GPIO_InitStruct.Pin = GPIO_PIN_3;
  GPIO_InitStruct.Mode = GPIO_MODE_OUTPUT_PP;
  GPIO_InitStruct.Pull = GPIO_NOPULL;
  GPIO_InitStruct.Speed = GPIO_SPEED_FREQ_LOW;
  HAL_GPIO_Init(GPIOB, &GPIO_InitStruct);


    HAL_GPIO_WritePin(GPIOB, GPIO_PIN_3, GPIO_PIN_SET);


    while(1) {
        HAL_GPIO_WritePin(GPIOB, GPIO_PIN_3, GPIO_PIN_SET);
        
        for(int ii=0;ii<10000;ii++) for(int jj=0;jj<50;jj++){}

        HAL_GPIO_WritePin(GPIOB, GPIO_PIN_3, GPIO_PIN_RESET);
        
        for(int ii=0;ii<10000;ii++) for(int jj=0;jj<50;jj++){}


    }

}


```
【CSS3】擬似要素と実例

#はじめに
CSSの擬似要素備忘録。

##::after
###要素の最後にコンテンツを追加

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWoOJKG" data-user="mcmc_oniku" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mcmc_oniku/pen/MWoOJKG">
  </a> by もちもちおにく (<a href="https://codepen.io/mcmc_oniku">@mcmc_oniku</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## ::before
###要素の最初にコンテンツを追加

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEyaLOj" data-user="mcmc_oniku" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mcmc_oniku/pen/ZEyaLOj">
  </a> by もちもちおにく (<a href="https://codepen.io/mcmc_oniku">@mcmc_oniku</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## ::first-letter
###ブロックレベル要素の最初の行の最初の文字にスタイルを適用

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGRYwrO" data-user="mcmc_oniku" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mcmc_oniku/pen/bGRYwrO">
  </a> by もちもちおにく (<a href="https://codepen.io/mcmc_oniku">@mcmc_oniku</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## ::first-line
###ブロックレベル要素の最初の行にスタイルを適用

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYZWgwx" data-user="mcmc_oniku" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mcmc_oniku/pen/vYZWgwx">
  </a> by もちもちおにく (<a href="https://codepen.io/mcmc_oniku">@mcmc_oniku</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##::selection
###マウスでドラッグやクリックした箇所にスタイルを適用

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWgYYBN" data-user="mcmc_oniku" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mcmc_oniku/pen/NWgYYBN">
  </a> by もちもちおにく (<a href="https://codepen.io/mcmc_oniku">@mcmc_oniku</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
#0 TypeScriptでTA○IR○Nを作ってみた ~環境構築編~

## 本記事の内容
こんにちは、エンジニア志望の大学生です。  
今回は最近学習をしているTypeScriptのアウトプットのために、とあるパーティー用ゲームを作ってみようと思います。
TA○IR○Nというゲームなのですが、たまたまこのゲームを知る機会があったときに、「これなら割と簡単に作れてTSのアウトプットにもなるんじゃないか？」と閃いたので作ってみようと思います。  
本来は2~4人用の対人ゲームなのですが、流石に対人でリアルタイムに通信できるように作るのはハードルが高い（完成までに時間がかかり過ぎそう）ので、対CPUを想定して作ろうと思います（アウトプット程度の気楽な開発なので...）。  

完成までにつまずいた箇所や勉強になったこと、エラーの対処などを書き記していけたらと思っています。というか本当に完成できるのか急に不安になってきましたが、これからよろしくお願いします。  

## 動作環境
MacOS catalina: 10.15.7
VSCode: 1.60.1
node: v14.3.0
npm: 7.20.3
*書籍: オライリー「プログラミングTypeScript」を主に参考にしています

## TypeScriptの準備
### npmプロジェクトの作成

```
$ npm init
```

### typscriptのインストール

```
$ npm install --save-dev typescript tslint @types/node
```

### webpackのインストール

```
$ npm install --save-dev webpack webpack-cli ts-loader
```

### tsconfig.jsonの準備
ルートディレクトリに`tsconfig.json`ファイルを作成します。
コンパイル時の設定等を記述するようです。

```json:tsconfig.json
{
    "compilerOptions": {
        "lib": ["ES2015", "DOM"],
        "module": "commonjs",
        "outDir": "dist",
        "sourceMap": true,
        "strict": true,
        "target": "es2015"
    },
    "include": [
        "src"
    ]
}
```

### tslint.jsonの準備
同じくルートディレクトリに`tslint.json`ファイルを作成します。
コードチェックに使用される設定だと思います。

```json:tslint.json
{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "semicolon": false,
        "trailing-comma": false
    },
    "rulesDirectory": []
}
```

### webpackの準備
続いてwebpackの設定を行います（下記コードはネットから持ってきたものになります）。上のインストールで、nodeパッケージとwebpackのどちらからでもコンパイルできるのですが、今回はweb上で動作させることを考えているのでwebpackでコンパイルしようと思っています（正直違いが曖昧なので、どこがどう違うかはあまりわかっていません）。

```js:webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development', // "production" | "development" | "none"
  entry: './ts/index.ts',
  output: {
    path: path.join(__dirname, "dist"),
    filename: "index.js"
  },
  module: {
    rules: [{
      test: /\.ts$/,
      use: 'ts-loader'
    }]
  },
  resolve: {
    modules: [
      "node_modules",
    ],
    extensions: [
      '.ts',
      '.js'
    ]
  }
};
```

### Hello TypeScriptしてみる
これで必要最低限の準備ができました。
試しに定番の挨拶をして最終チェックをしてみようと思います。  

```js:src/index.js
console.log("Hello TypsScprit!!")
```
webpackでコンパイルします。
予め`package.json`のscript欄に書き加えた設定を使ってコンパイルしてみます。

```
$ npm run tsc
```

これで`dist/index.js`が生成されていれば成功です。

## 終わりに
準備をするだけでだいぶ時間が経ってしまいました。  
さて、次回からはいよいよゲーム制作に入っていきたいと思います。自分でもどれだけゲームを再現できるのか、不安でもあり楽しみでもあります。完成できることを祈って、今回はこの辺で終わります。  
頑張るぞ！

## 関連記事
[#1 TypeScriptでTA○IR○Nを作ってみた ~タイル配置編~](https://qiita.com/sts11142/items/dec8d70f60608afc849b)
Rails form_select が急にsyntax error になった時のデバッグ

こんにちは。
今まで普通に動いていたform_selectが急にシンタックスエラーを吐いたのでデバッグしました。

![エラー画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1430116/171ace52-d203-01b0-449b-c51f80eff0a4.jpeg)


原因は直前までdeviseの日本語化のため、i18Nの設定をいじっていたことらしいです。
ということで config/locals/ja.yml に日付も対応させてあげようということで…

```yml:config/locals/ja.yml
ja:
  date:
    formats:
      default: "%Y/%m/%d"
      short: "%m/%d"
      long: "%Y年%m月%d日(%a)"

    day_names: [日曜日, 月曜日, 火曜日, 水曜日, 木曜日, 金曜日, 土曜日]
    abbr_day_names: [日, 月, 火, 水, 木, 金, 土]

    month_names:
      [~, 1月, 2月, 3月, 4月, 5月, 6月, 7月, 8月, 9月, 10月, 11月, 12月]
    abbr_month_names:
      [~, 1月, 2月, 3月, 4月, 5月, 6月, 7月, 8月, 9月, 10月, 11月, 12月]

    order:
      - :year
      - :month
      - :day

  time:
    formats:
      default: "%Y/%m/%d %H:%M:%S"
      short: "%y/%m/%d %H:%M"
      long: "%Y年%m月%d日(%a) %H時%M分%S秒 %Z"
    am: "午前"
    pm: "午後"
```

これを追記。
結果、見事動きました。

当然i18Nの設定の設定を初期化、無効化してあげても動きます。

---------------------------------------
Twitterで日々の学習をアウトプットしています。
未熟者ですが、ご興味あれば覗いてやってください。→[Twitter](https://twitter.com/ishii_engneer)
ABC183 C - Travel から学んだ

https://atcoder.jp/contests/abc183/tasks/abc183_c

![abc183_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/b2bcdc11-2363-ad05-38fc-0b39018f8eab.png)
![abc183_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/9797ac78-a747-3044-de2f-b85bc25589b8.png)
![abc183_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/b5df8920-297a-0eaa-736d-1742f706537e.png)

一瞬 グラフかな？っと思った。
だが、出力例1 にヒントがあった。

1 => ********** => 1 に戻ってくる。
間の ********** は 2 ~ 8 の並べ替え。

例えば 1=> 2 => 3 => 4 => 1 を考える。

行列 T から以下のように値を取り出して足し合わせて K と一致する組み合わせをカウントすれば良い。
1行2列 **1=> 2** => 3 => 4 => 1
2行3列 1=> **2 => 3** => 4 => 1
3行4列 1=> 2 => **3 => 4** => 1
4行1列 1=> 2 => 3 => **4 => 1**

```Travel.py
n,k = map(int,input().split())
T = [list(map(int,input().split())) for _ in range(n)]

from itertools import permutations
cnt = 0
for nums in permutations(range(1,n)):#O(ザックリ40000)
    #print(nums)
    nums = [0]+list(nums)+[0]
    score = 0
    for i in range(len(nums)-1):#O(9)
        score += T[nums[i]][nums[i+1]]
    #print(score)
    if score == k:
        cnt += 1
print(cnt)
#O(360000) .. ザックリだけど間に合うっしょ。
```
NVL関数とNVL2関数の違い

# はじめに

普段の業務ではNVL関数しか使ったことがありませんが、よく似た名前のNVL2関数について調べる機会があったので、NVL関数と比較しながらまとめてみました。

# NVL関数

## NVL関数の構文

`NVL(expr1,expr2)`

* expr1がNULLの場合はexpr2を返し、expr1がNULLでない場合はexpr1を返します。
* expr1とexpr2のデータ型が異なる場合、一方のデータ型が他方のデータ型に暗黙的に変換されます。
  * **データ型を暗黙的に変換できない場合、エラーが返されます。**

## NVL関数のサンプルコード（正常に動作するもの）

```sql:サンプルコード
-- NVL関数を使って、歩合給がnullの場合に「0」を返している。
SELECT
  T1.EMPNO AS 社員番号,
  T1.ENAME AS 社員名,
  T1.JOB AS 職種,
  NVL(T1.COMM, 0) AS 歩合給
FROM
  SCOTT.EMP T1,
  SCOTT.DEPT T2
WHERE
  T1.DEPTNO=T2.DEPTNO
  AND T2.DNAME='SALES';
```

* 上記のサンプルコードの実行結果は以下の通りです。

|社員番号|社員名|職種|歩合給|
|---|---|---|---|
|7521|WARD|SALESMAN|500|
|7654|MARTIN|SALESMAN|1400|
|7844|TURNER|SALESMAN|0|
|7900|JAMES|CLERK|-1|
|7499|ALLEN|SALESMAN|300|
|7698|BLAKE|MANAGER|-1|

## NVL関数のサンプルコード（エラーになるもの）

```sql:サンプルコード
-- expr1がNUMBER型、expr2が文字リテラル（varchar2型？）なので、暗黙的にデータ型を変換できずにエラーが起きる。
SELECT
  T1.EMPNO AS 社員番号,
  T1.ENAME AS 社員名,
  T1.JOB AS 職種,
  NVL(T1.COMM, 'なし') AS 歩合給
FROM
  SCOTT.EMP T1,
  SCOTT.DEPT T2
WHERE
  T1.DEPTNO=T2.DEPTNO
  AND T2.DNAME='SALES';
```

* 上記のサンプルコードの実行結果は以下の通りです。
  * 使われているデータ型によってエラーコードは異なると思います。

```
ORA-01722: invalid number
```

# NVL2関数

## NVL2関数の構文

`NVL(expr1,expr2,expr3)`

* expr1がnullか否かで、異なる値を返すことができます。
  * expr1がnullでない時にはexpr2を返します。
  * expr1がnullの時にはexpr3を返します。
* expr1は任意のデータ型を指定できますが、**expr2とexpr3はLONG型以外のデータ型を指定できます。**
* expr2とexpr3のデータ型が異なる場合、一方のデータ型が他方のデータ型に暗黙的に変換されます。
  * **データ型を暗黙的に変換できない場合、エラーが返されます。**

## NVL2関数のサンプルコード（正常に動作するもの）

```sql:サンプルコード
-- NVL2関数を使って、歩合給がnullの場合に「なし」、nullでない場合に「あり」を返している。
SELECT
  T1.EMPNO AS 社員番号,
  T1.ENAME AS 社員名,
  T1.JOB AS 職種,
  NVL2(T1.COMM, 'あり', 'なし') AS 歩合給
FROM
  SCOTT.EMP T1,
  SCOTT.DEPT T2
WHERE
  T1.DEPTNO=T2.DEPTNO
  AND T2.DNAME='SALES';
```

* 上記のサンプルコードの実行結果は以下の通りです。

|社員番号|社員名|職種|歩合給|
|---|---|---|---|
|7521|WARD|SALESMAN|あり|
|7654|MARTIN|SALESMAN|あり|
|7844|TURNER|SALESMAN|あり|
|7900|JAMES|CLERK|なし|
|7499|ALLEN|SALESMAN|あり|
|7698|BLAKE|MANAGER|なし|

## NVL2関数のサンプルコード（正常に動作するもの - その2）

* [こちらの記事](https://oracle.programmer-reference.com/nvl-nvl2/)を見ると、**「NVL2はSQL文では使用できますが、ストアド（PL/SQL）では使用できないのでご注意ください。（PLS-00201エラーが発生します。）」**と書かれていますが...
* 以下のストアドプロシージャでは、NVL2関数を含みますが正常に実行できました。
  * ストアドプロシージャ内であっても、SELECT/UPDATE/DELETEなどのSQL文中であれば正常に動作するのかもしれません。
  * NVL2関数をストアド（プロシージャ/ファンクション）で使いたい時は、代わりにCASE文を使うのが一般的なようです。

```sql:サンプルコード
-- NVL2関数がストアドプロシージャで使えるかどうかを確認するためのサンプルコード。
CREATE OR REPLACE PROCEDURE print_comm
-- 宣言部
IS
  commission VARCHAR2(10);
-- 処理部
BEGIN
  SELECT
    NVL2(T1.COMM, 'あり', 'なし')
  INTO
    commission
  FROM
    SCOTT.EMP T1
  WHERE
    T1.ENAME='BLAKE';

  DBMS_OUTPUT.PUT_LINE(commission);
END;
```

# 参考URL

* [NVL関数](https://docs.oracle.com/cd/E16338_01/server.112/b56299/functions119.htm)
* [NVL2関数](https://docs.oracle.com/cd/E16338_01/server.112/b56299/functions120.htm)
* [[ORACLE関数] NULLを別の値に置き換える（NVL、NVL2）](https://oracle.programmer-reference.com/nvl-nvl2/)
【FlutterWeb + AWS API Gateway + Lambda + DynamoDB】FlutterWebでAPIを呼び出した時にXMLHttpRequestエラーが発生した際の対処

## はじめに
- [Tutorial: Build a CRUD API with Lambda and DynamoDB - Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-dynamo-db.html)
- [AWS API GatewayとLambdaでDynamoDB操作](https://business.ntt-east.co.jp/content/cloudsolution/column-try-20.html)
- [API Gateway + Lambda + DynamoDB](https://qiita.com/leomaro7/items/314a80b6d91f9e6b4060)

上記などを参考にしてDynamoDBへ値を保存するAPIを作成し、Flutter Webで呼び出すとXMLHttpRequestエラーが発生したため、その際に対処した方法を備忘録として残します。

（余談ですが、普段のAndroidやiOSへビルドするFlutterだとこのエラーは起きなくて、FlutterWebの時のみ発生していました。）


## 環境
```
Android Studio: 4.2.2
OS: Mac OS X 11.5.2 x86_64
Flutter: 2.2.0
Dart: 2.13.0
```

## 対処
- [XMLHttpRequest error while using http post flutter web - stack overflow](https://stackoverflow.com/questions/67253808/xmlhttprequest-error-while-using-http-post-flutter-web)
- [FlutterからAPIアクセスする際に、XMLHttpRequest errorのエラーが出る - teratail](https://teratail.com/questions/348679)

調べていくうちに上記のように同様の事象に当たっている方々がいました。

> XMLHttpRequest error. is caused due to CORS

API GatewayやLambda側のCORSの設定が有効になっていなかったことが原因みたいでした。

下記のようにAPI Gateway, Lambdaの設定を行っていくことでAPIの実行ができたので記載します。

### API Gateway でCORSを有効にする
1. Amazon API Gateweyの「アクション」を選択
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1257046/49540c89-6ada-6f2d-a6cc-da68b231221b.png">

2. CORSの有効化を選択
<img width="150" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1257046/bc8c0bd5-e006-eecf-ecf9-35fad680be4d.png">

3. メソッドを自分の作成したAPIに合わせて選択する。（OPTIONSの選択は必須）
※例では自分が作成したAPIはPOST及びGETができるため両方選択している
選択後、「CORSを有効にして既存のCORSヘッダーを置換」を選択する
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1257046/78f5bb40-6de2-8ebc-92dd-359d369a54a1.png">

### LambdaのレスポンスのReturnにHeaderを追加する
```Python
def lambda_handler(event, context):
  try:
    response = put_data(event) #dynamoDBへ値を入れる変数
    return {
      'statusCode': response['ResponseMetadata']['HTTPStatusCode'],
      'headers': {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*', #このヘッダーを追加する
      },
      'body': response
    };
  except Exception as e:
    return e

def put_data(event): #あくまで例なので自身のコードに合わせてください
    response = table.put_item(
        Item = {
            'aaa': event['aaa'],
        }
    )
```

上記のようにヘッダーを追加し、Lambda内、API Gateway内でテストした後に、FlutterWeb側でもAPIを呼ぶと成功しました。


## 最後に
この解決方法はあくまでも一例のため同等のエラーの場合でも全て解決するわけではないですが、参考のため残しました。
また別の解決方法があれば追記します。

## 参考文献
Tutorial: Build a CRUD API with Lambda and DynamoDB - Amazon API Gateway
https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-dynamo-db.html

AWS API GatewayとLambdaでDynamoDB操作
https://business.ntt-east.co.jp/content/cloudsolution/column-try-20.html

API Gateway + Lambda + DynamoDB
https://qiita.com/leomaro7/items/314a80b6d91f9e6b4060

XMLHttpRequest error while using http post flutter web - stack overflow
https://stackoverflow.com/questions/67253808/xmlhttprequest-error-while-using-http-post-flutter-web

FlutterからAPIアクセスする際に、XMLHttpRequest errorのエラーが出る - teratail
https://teratail.com/questions/348679
[Flutter] importを自動整理してみた(import_sorter)


以前から気になっていた。
`import_sorter`を入れてみることにしてみました。

##①自動整理をするための準備をする

flutter packageによると、

Dart: `dart pub add import_sorter`

Flutter: `flutter pub add import_sorter`


と書いていたのですが、`dart pub add import_sorter`を入れるだけで、僕は大丈夫でした。


##②pubspec.yaml を確認する

手順として入りませんが、 pubspec.yaml を確認してみると、

```
import_sorter: ^4.6.0
```
が入っていました。


## ③　整理するためのコマンドを打つべし！

以下のコマンドを打つと自動整理されます！

```
flutter pub run import_sorter:main
```




使用前と使用後のパフォーマンスとかはどうなのかが気になりました。
今度、検証しますううう
【php】pathを設定する

Qiitaの記事を拝見し、私自身たくさん助けられている。
私も誰かの役に立てればという思いで初記事を投稿します。

今後も週一くらいのペースで続けられればと思う。

<h2>pathの設定</h2>
【環境情報】
OS：windows10
言語：php(8.0.9)

なぜこの設定をすることになったかというとコマンドラインからphpの実行が必要になったから。
ネットでこの件に関して調べてみると大体下記のようなことが書いてある。

①画面左下のタスクバーから「システムの詳細設定の表示」をクリック。
![システムの詳細設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2050607/6cc40aa1-afa0-e48e-53c5-85ca48faa0c7.png)
②環境変数をクリック
![システムの詳細設定_環境変数.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2050607/8fc0aa7d-b682-4afe-b8f9-1279abe6e5df.png)
③「システム環境変数」項目の「Path」を選択し、編集ボタンをクリック
![システムの詳細設定_環境変数_編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2050607/7e1ac52a-a3ae-94d4-9056-eeaf375d8709.png)
④「新規」ボタンをクリックし、php.exeを格納しているpathを記入。間違いなければ「OK」ボタンをクリック。
![システムの詳細設定_環境変数_編集2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2050607/9bf4f883-5b3b-7da7-fc1d-dd192e5f724f.png)

ここまで行い、念のためPCを再起動。
コマンドラインから"php -v"とうてば、phpを実行することができる…はず

<h2>確実な方法</h2>
上記方法を試してみたが、コマンドラインからphpを実行することができなかった。
![php_失敗.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2050607/25cb89d5-2887-ddf3-9655-fb1b95266ecb.png)

原因としてはphp.exeファイルを格納しているpathをコピペしたから。
確実な方法としては<strong>参照ボタンを活用すること。</strong>
![システムの詳細設定_環境変数_編集_参照.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2050607/55cdc6d0-0833-5fc5-b87c-aa31d00803e7.png)

二つのやり方でスペルミスなどは見受けられなかったが、こちらのやり方で設定すると成功した。

<h2>まとめ</h2>
pathを設定する際、実行ファイルのpathを入力する際は、参照ボタンを活用しましょう。

（まぁまぁ時間使った…）
Pythonの無名関数（ラムダ式）

## 無名関数とは？
Pythonの関数には、無名関数と呼ばれるものがあり、これを使えばコードを簡素化できます。無名関数とは、その名の通り名前がない関数であり、関数をその場に記述する記法です。
無名関数を書くには、`lambda`というものを使います。普通の関数を作るときと同じで、`lambda`と記述して引数を設定した後、その処理を記述します。
簡単のため、足し算をするcalc_add関数を例に見ていきます。
### 足し算を行う関数での例
```python

# calc_add関数を定義
def calc_add(a, b):
    return a + b

# それを実行
calc_multi(3, 9)

#calc_multi(3, 9) = 12

```
`lambda`というキーワードを使って、その場で関数を記述する無名関数として書くと、このコードは、次のように書けます。

```python
(lambda a, b: a + b)(3, 9)
```

上の`lambda a, b:`が、`関数名(a, b)`に相当する部分であり、`:`で区切って、その関数の処理（ここでは`return a * b`）を記述するというのが、無名関数の基本的な書き方となります。

無名関数は、リストなどの要素に対して何か関数を実行したいときに、よく使われます。

## 参考文献
[Pythonのlambda（ラムダ式、無名関数）の使い方](https://note.nkmk.me/python-lambda-usage/)

[Python の lambda 式と for 文](https://python.keicode.com/lang/functions-lambda-for.php)
Ubuntu コマンド入門

# はじめに
必要最低限のコマンドの打ち方について記述しています。初めてJetsonやRaspberryPi、Ubuntu に触る人向けです。

この記事を通してコマンドを入力する際に必要な空白(スペース)は全て`_`で表現しています。実際に入力する際は` `に置き換えて下さい
```
記事の書き方      sudp_apt_update
実際に入力するもの sudo apt update
```

#  よく使うコマンド

### sudo
管理者権限を要求するもの。アップデートやハードウェア(GPIOとか)を操作するときに必要。とりあえず付けとく良いがたまに管理者権限をつけると文句言うのもある。

```
#管理者権限で'apt update'を実行する
sudo_apt_update　
```

sudoコマンドを実行するとパスワード入力を求められ入力する必要があるが文字を打っても何も入力されないが問題ない。パスワードを打ってenterを押す。(サンプルに書かれている`$`マークは入力と出力を判別するものです`$`マークは実際には入力しなくて良いです)

```
$ sudo_apt_update
password:表示されなくても気にせず打ってエンター
```

### apt 
パッケージマネージャー。それに付随するコマンドがいくつかある。以下よく使うもの

```
# アップデート（ダウンロード）
sudo_apt_update

#アップグレード（インストール）
sudo_apt_upgrade

#パッケージインストール
sudo_apt_install_パッケージ名

#パッケージインストール（例：pip3）
sudo_apt_install_python3-pip
```

### cd
ディレクトリを移動する。どのフォルダーを開くか的なイメージでOK.デスクトップにあるファイルを実行したいならデスクトップのディレクトリに行く必要がある。

```
#デスクトップに移動
cd_~/Desktop

#ホームディレクトリに戻る
cd
```
よく使うディレクトリ
```
ホームディレクトリ配下のワークスペースに移る時
cd_~/ws

フォルダ移動
mkdir hoge
cd hoge
```

### ls
ls（えるえす）はディレクトリにあるファイルを表示する。デスクトップにtest.pyというファイルのみがある場合

``` 
ls_Desktop
#test.py と表示される

#自分が今いるディレクトリを表示する。
ls
```

### mkdir
ディレクトリを作成する。
```bash
# hogehogeというディレクトリを
mkdir_./hogehoge

# robotというディレクトリを作って同時にrobotの下にpgmというディレクトリを作る
mkdir_-p_./robot/pgm
```

### ssh
sshはリモートアクセス的なやつ。

```
#文法
ssh ユーザー名@IPアドレス

#例
ssh_user@192.168.0.2
```

### vim

インストール
```
sudo apt install vim
```

使い方 (.bashrcを編集する例)

```
vim ~/.bashrc
```

基本的な使い方
```
書き込みを開始する時は
iキーを押す
```


```
書き込みを終了する時はエスケープを押した後に
:wq
```

```
変更を破棄して終了
:q!
```
Node.js使ってdocker-composeでReact環境構築

# DockerでReactの環境作ってみよう
勉強でReactをやるくらいならNode.jsを入れて作ればOKなのですが、実際の開発ではdocker-compose使って開発環境を作ることが多いのでぜひできるようにしましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260345/aefa6a98-c08f-7447-9e63-088519b38a3d.png)


# 環境
作成時環境

- Docker Desktop for Windows Version 4.0.0
- Windows10 home

作成した環境

- React 17.0.2
- Node.js 16.9.1


Windowsで作ってますが、Macでも同じ手順で使えると思います。

# ソースコード
コピペや確認で使ってください

https://github.com/kohishibashi/docker-react



# Dockerfile作成
Node.jsのイメージを使用します。React使うために必要です。
alpineが軽量のLinuxでdockerでよく使用されます。
で、`WORKDIR`が作業ディレクトリです。

```Dockerfile:react-test/react/Dockerfile
FROM node:16-alpine
WORKDIR /app
```

# docker-compose.yml作成

```react-test/docker-compose.yml
services:
  front:
    build: ./react
    volumes:
      - ./react:/app:cached
    command: sh -c "cd react-test && yarn start"
    ports:
      - "3000:3000"
```

- front：サービス。コマンドとか打つときに使います。名前つけてる。
- build：使用するイメージがdocker-compose.ymlと同じディレクトリにあるなら必要ないんですけど、今回reactって名前のフォルダの中に入れてますので`./react`と指定。
- volumes：ローカルではreactってフォルダだけど、コンテナの中では`app`に設定しているので。これを設定しないとコードなど変更しても何も起こらない
- command：`docker-compose up`したときに実行してほしいコマンド。
- port：ローカルの3000番ポート→コンテナの3000番ポートに通してねってこと。

:::note info
Reactはデフォルトで3000番ポートで起動する設定なのでその設定に合わせてます。
:::

# ReactインストールとReactのアプリ作成
以下のコマンド打つとreact作るのに必要なパッケージ全部取ってきてくれます。
結構な量ダウンロードするので時間かかると思います。

```
$ docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app react-test"
```
:::note info
実はビルド(docker-compose build)必要なんですけど、このコマンド打つと勝手にやってくれてます。
:::


## コマンドの説明
`docker-compose run`というのがDocker-compose upしてない時にコンテナ内で一回だけコマンド実行してほしいときに使うコマンド。
`front`というのがdocker-composeに名前を付けたサービス名

実行させたいコマンド本体は

`npm install -g create-react-app`と`create-react-app react-test`です。

`npm install -g create-react-app` reactに必要なパッケージをインストールしてくれる。
`create-react-app react-test`はreactのアプリ作るために最初に色々作ってくれるコマンド。

`&&`をくっつけることでこの二つを一つずつ実行してくれる。
このコマンドは普通に始めるときと同じです。

↓Reactの公式ページQuickStart
> https://create-react-app.dev/docs/getting-started

# React起動

```
$ docker-compose up
```

を実行すると`docker-compose`の`command: sh -c "cd react-test && yarn start"`が実行されるので
reactのアプリを開発サーバーで起動させてくれます。

デフォルトの3000番ポートを使うようにしているので以下にアクセスするとReactのマークがぐるぐる回転すると思います。

> http://localhost:3000/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260345/ce75e3f5-1544-cc27-79d4-2f3d9b7af91b.png)
ストアドプロシージャの書き方

気分でストアドプロシージャを簡単にまとめます。

#参考
[【SQL Server】ストアドプロシージャを作成するための基礎知識](https://outofmem.hatenablog.com/entry/2014/03/18/044415)

[SQL Server のストアドプロシージャを作成する]
(https://sql55.com/t-sql/t-sql-create-stored-procedure-1.php)




#CREATE 文
```
CREATE PROCEDURE [dbo].[TEST_PROC]
AS
BEGIN
    -- 処理
END
```
IF, WHILEはブロックという概念で**BEGIN-END**で書くことができる。
shellscriptのdo-done的な？
for文はないらしい。

#実行方法
```
EXEC procedure_name [arg1,arg2]

```
引数の指定で括弧```()```はいらない。

#引数をとる
```
CREATE PROCEDURE [dbo].[TEST_PROC]
(
    @arg1 VARCHAR(max) ,
    @arg2 INT = 0 ,  ----デフォルト値
    @arg3 DATETIME OUTPUT
)
AS
BEGIN
    -- 処理
END

```
引数は他の言語みたいに書けて、デフォルト値も設定できる。
OUTPUTはMSの記事を参考に読んでみたけど直感的には理解できない。
[OUTPUT パラメータを使用してデータを返す処理](https://docs.microsoft.com/ja-jp/previous-versions/sql/sql-server-2008-r2/ms187004(v=sql.105)?redirectedfrom=MSDN)

#変数
```DECLARE @variable VARCHAR(max);```みたいな感じで定義する。
```SET @variable = 'sample';```で代入できる。

```
CREATE PROCEDURE [dbo].[TEST_PROC]
AS
BEGIN
    DECLARE @foo VARCHAR(max);
    SET @foo = 'fooooooo';
    
    -- @fooに[FOOBAR].[BAR]の値をセットする
    -- [FOOBAR].[BAR]の値がヒットしない場合は@fooはNULLになる
    SELECT
     @foo = BAR
    FROM
     FOOBAR
    WHERE
     HOGE_PIYO = 'Fuga'
    
    -- 別にSELECTだからと言って本当にSELECT文を書く必要はない
    SELECT @foo = 'fuuuuoooo'
END
```

#IF文
if文も```BEGIN-END```で囲む必要がある。

```
CREATE PROCEDURE [dbo].[TEST_PROC]
(
    @i INT = 0
)
AS
BEGIN
    IF @i = 0
    BEGIN
        --処理
    END
    ELSE
    BEGIN
        --処理
    END
END
```
また、```IF EXISTS```も使える。


#WHILE文
whileも```BEGIN-END```で書く。

```
CREATE PROCEDURE [dbo].[TEST_PROC]
(
    @i_Hoge VARCHAR(max)
)
AS
BEGIN
    DECLARE @i BIGINT = 0;
    WHILE @i < LEN(@i_Hoge)
    BEGIN
        --処理
        @i = @i + 1
    END
END
```
for文がないから変数を使ってfor文みたいにする。
if文で```BREAK;```や```CONTINUE;```を書いてもいい。

CASE文もあるけどここでは書きません。
[SQL Server CASEの使い方　条件分岐](https://sql-oracle.com/sqlserver/?p=1037)を見るか調べてください。

#TRY-CATCH
```
--省略----
AS
BEGIN
    BEGIN TRY
        --処理
    END TRY
    
    BEGIN CATCH
        --処理
    END CATCH
END
```
例外の発生方法として、
```RASERROR();に引数としてERROR_MESSAGE(), ERROR_SEVERITY(), ERROR_STATE()```を渡す方法と、
```THROW;```で出来る。

#まとめ
実務でストアドプロシージャを使ってはいないけど、INSERT文を流すときにDECLAREとかを使っていろんなデータを作ったくらい。
知ってて損はないけど、まだ使いどころがわからない。
【AWS】EC2にMacのターミナルからSSH接続する方法

AWSでEC2にMacのターミナルからSSH接続する方法を備忘録としてまとめておきます。
今回接続するEC2はAmazon Linux 2です。

## 事前準備
- AWSアカウントの作成

## EC2インスタンスの起動

1. まずはAWSマネジメントコンソールにログインしてEC2サービスを開きます。
1. 「インスタンスの起動」をクリックして、インスタンスの選択画面に遷移します。
1. 今回は、無料枠の「Amazon linux 2」を選択します。
1. インスタンスタイプは「t2.micro」を選択します。こちらのインスタンスタイプは無料枠です。
1. ここまで選択したらそのまま「確認と作成」をクリックします。
1. 作成するインスタンスの確認画面が表示されます。「起動」をクリックします。
1. キーペアの作成というウィンドウが表示されるので、新規でキーペアを作成します。<br>名前は任意で結構です。
今回はssh_testとします。
1. 作成したキーペアはダウンロードしておきます。ファイル名は、任意.pemとなっているはずです。このファイルは後ほどSSH接続で利用します。

これでEC2インスタンスの起動が完了しました。
コンソール画面から起動したインスタンスを確認すると「実行中」というステータスで表示されていると思います。

## キーペアの移動と権限の設定

先ほどダウンロードしたtssh_test.pemファイルを移動しましょう。
ターミナルを開き、以下のコマンドを入力します。

```
mv /Users/username/Download/ssh_test.pem ~/.ssh
```
次に以下のコマンドで、/~.sshに権限を追加します。

```
chmod 600 /Users/username/.ssh
```

## SSH接続を試す
最後に、起動したインスタンスにSSHで接続してみます。
以下のコマンドを入力します。

```
ssh -i /Users/username/.ssh/ssh_test.pem ec2-user@EC2のグローバルIP
```

これでログイン完了となります。
VPN接続して所定の場所にファイルを保存…でも、時間がかかりすぎて困ったときに確認したいこと

# はじめに
リモートワークが多くなった昨今、VPNで会社の環境に繋いで…などの方法で仕事することが多くなりました。
ノートパソコンのローカル環境で仕事のファイル作成して、更新して、
出来上がったファイルをさぁファイルサーバに置こうと思ったら、
通信が遅くてめちゃくちゃ時間がかかって終わらない…なんてことありませんか？

つい先日私自身がそうなりまして、そんな時に回避策の1つとして教えていただいたので
備忘録として対応した方法をご紹介します。

それは、

__　　　Windows10のMTU値を設定(変更)する__

です。

#MTUとは
MTU（Maximum Transmission Unit）は、通信機器などが一度に送信できる最大のデータ量を示す伝送単位を表しています。
使用しているインターネット回線のMTU値を調べて、ノートパソコンなどのMTU値をインターネット回線のMTU値、もしくはMTU値より少し小さい値を設定します。
ノートパソコン側のMTU値が、インターネット回線のMTU値よりも大きくなる場合は、その差分の値分だけ1度に送信できないので、再送することとなり、結果的に遅くなると覚えておくとよいようです。

#主なインターネット回線のMTU値

|__回線名__|__MTU値__|
|:-----------|------------:|
|フレッツ光|1454|
|ドコモ、ソフトバンク|1454|
|auひかり|1492|
|NURO光|1500|

次に、使用している端末のMTU値を確認、変更していきますが、
ここではWindows10の場合の手順を記載します。

コマンドプロンプトを起動しておきます。

#MTU値を確認する
以下のコマンドを実行します。
```
netsh interface ipv4 show interface
```

![MTU値確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770141/d040353e-6a0e-7dc3-3052-8870ddaad0de.png)

私の場合は、wifiを使用してインターネットをしているので、
Idx(インデックス)が「9」の行を確認します。
MTU値が「1500」となっていることが確認できました。
上で調べたインターネット回線のMTU値が1500よりも低い値だったので、
変更しておくとよいことがわかりました。

#MTU値を変更する
MTU値を設定するIdx(インデックス)と変更後のMTU値(今回1400に設定)を入れて
以下のコマンドを実行します。

```
netsh interface ipv4 set interface 9 mtu=1400
```

コマンド実行後の確認をもう一度します。

![MTU値変更.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770141/16dd1d69-3bf4-3042-6b5a-ea70002e80b5.png)

これでMTU値(1500→1400)が変更されました。

#さいごに
この設定をして仕事で作成したファイルがかなり早く所定の場所に保存できるようになりました。
リモートワークしている方に限らず、普段からインターネットをよく使う方は
一度この設定を見ておいたほうがお得かもしれません＾＾
私自身、この設定を教えていただいて改善したので、教えていただいた方に感謝です！
iOSDC Japan 2021に参加してみた感想

9/17-19で開催された「iOSDC Japan 2021」というiOSエンジニアの為のイベントに参加しました。私はiOSエンジニアとして開発業務を行なっていますが、本イベントに参加したのは初めてでした。新しい発見ばかりでとても勉強になったので、印象に残ったこと等を記事にまとめました。

#目次
- 参加したきっかけ
- 気になったセッション
- 参加した感想

#参加したきっかけ
私は普段からTwitterやYouTube等でiOSに関する情報を収集しているのですが、その中で「iOSDC Japan 2021」のことを知り、「業務に活かせる技術を学べそう」ということで申し込みました。オンライン開催(ニコニコ生放送)ということもあり、非常に参加しやすかったです。

#気になったセッション
色々なセッションを視聴したのですが、特に印象に残ったセッションの感想を2つほどご紹介します。

**noteのiOSアプリで実装したアクセシビリティの全て**
noteが進めているアクセシビリティ対応についてのセッションでしたが、私も現在iOSアプリのアクセシビリティ対応を行なっており、非常に共感できる点や勉強になる点が多かったです。VoiceOverを起動せずに設定済みのラベルを可視化できることも知らなかったです。素晴らしい内容ばかりでした。(「設定」→「アクセシビリティ」→「音声コントロール」を有効にし、「オーバーレイ」を「項目名」にすると設定済みのラベルを可視化できて便利👏👏👏)テストツールについても試してみたいと思いました。
[noteのiOSアプリで実装したアクセシビリティの全て（文字起こし）](https://fromkk.me/n/n2dbeb54cdf0d)

**あらゆる情報を楽に正しく String にフォーマットする - 令和2021年から脱却せよ**
アプリ開発しているとフォーマットが必要になる場面は多々あるのですが、こちらのセッションではそうした際に使用するFormatterがたくさん紹介されていました。DateFormatterしか知らなかった私にとっては非常に目からウロコの内容でした。アプリのローカライズ対応する中で必須とも言えるものなので、ぜひ活用していきたいと思いました。プレゼンテーションも非常に面白かったです！

[あらゆる情報を 楽に正しく String にフォーマットする 〜令和2021年から脱却せよ〜](https://speakerdeck.com/treastrain/easily-and-correctly-format-any-information-into-a-string)

[【Swift】日時、数、通貨、データサイズ、リスト、人の名前、単位付きの数から String へのフォーマットは自分で実装しないで](https://qiita.com/treastrain/items/e0e9c3e9f517fa20ad08)

#参加した感想
 - 今年はオンライン開催でしたが、ニコニコ生放送のコメントやTwitterのハッシュタグ等で盛り上がっており、一体感を感じられました。
 - 私の場合、「知ってはいるけど深いレベルでは理解していなかったこと」を深掘りでき、有益かつ実用的な知識を多方面で得られました。
 - 1つのセッションが5分や20分など比較的短時間の為、隙間時間でも参加しやすかったです。ちょっと聞いてみようかなとなりやすく、視聴するハードルは低いと感じました。

紹介したセッションはほんの一部ですが、他にも素晴らしいセッションが沢山ありました。「#iosdc」のハッシュタグで資料等も見られるので、気になった方はぜひ調べてみてください！
Google Colab Pro+で実用的な機械学習使用法

# pro+で個人が深層学習で動画を扱える時代になった。
[Google Colab Pro+](https://colab.research.google.com/signup)が登場しました。
無料版ではバックグラウンド処理が無く、最大12時間稼働させるためには定期的に監視するマクロを作らなきゃいけませんでしたが、なんとPro+では最大24時間でバックグラウンド処理が可能に！
月額5000円は電気代だけでも元が取れるくらい安いのに、高確率でV100が使えるんだからマジヤバイ。
遊ぶだけなら無料版で十分なんだけど、V100を24時間使えるならpix2pixの推論も画像だけでなくHD動画処理も実用に手が届く処理時間になった。未来スゲェや。

というわけで、GoogleColabの便利な運用方法を書いていきます。
## Slackで処理完了通知(処理時間付き)

``` python
import time
import datetime
time_start = time.time()
#---------------------------------------------
##色々な重い処理##
#---------------------------------------------

#Colabの稼働時間
t = time.time() - time_start
ts = datetime.timedelta(seconds=round(t))

#Slackに完了通知
import requests, json
WEB_HOOK_URL = "用意したWEB_HOOK_URL"
requests.post(WEB_HOOK_URL, data = json.dumps({
    'text': u'実行完了:'+str(ts), 
    'username': u'ClabBOT',  
    'icon_emoji': u':smile_cat:',  
    'link_names': 1,  
}))
```
Colabを実行する際は毎回ブラウザから手動で実行させなければならないので、処理完了後すぐに再度稼働させたい時はSlack通知は必須。
あと24時間制限があるので、処理にかかった時間を通知に入れるのは後から見返すときに色々便利です。


## GoogleDrive内のファイル移動で処理動画を自動選択
``` python
import os
import pathlib

fld = "/content/drive/MyDrive/input/" #@param{type:"string"}
PathFld = pathlib.Path(fld)
if PathFld:
  print("pathOK")
PathFldlist = list(PathFld.glob("**/*.mp4"))
print(PathFldlist)
input = PathFldlist[0]

file_extention = input.suffix
print(file_extention)

#処理開始元データを処理関数の定位置に配置とリネーム
!cp '{input}' '/content/input{file_extention}'

#-----------------------------------------------
##色々な重い処理##
#-----------------------------------------------

#処理終了後
output_path = "/content/drive/MyDrive/output/" #@param{type:"string"}
output_path = output_path + input.name
!cp /content/result/output.mp4 '{output_path}'　#推論結果ファイル

!mv  '{input}'  /content/drive/MyDrive/finish  #処理終了元データ

```

動画の処理は重いのでHD動画のpix2pix推論は1つづつ実行するしかありません。
でも1つづつファイル指定するのは面倒ですよね。
そんなときはinputフォルダに動画を複数入れてファイルリストの先頭だけを処理。
処理が終了したら処理した元データを別フォルダに移しちゃいましょう。
そうすれば次回実行時はファイルリストが変化するので割と楽に運用ができます。


## 感想
グラボが高騰している中でこういうサービスがあるのは本当に助かります。
この値段でこのスペックを知ってしまうとグラボが買えなくなってしまうよ・・・。
Colabって多分赤字だろうけどサービス続いて欲しいなー。
クラウドしか勝たん！

# はじめに

最近、「クラウドしか勝たん！パソコン（Chromebook）」を購入しました。
もうブラウザだけで、ある程度のことはできちゃうかも？！ 高性能なマシンパワーは必要ないから安価だし！
インターネットが身近になってきたからこそ、それを活かした素敵なパソコンだと思います！

![hp_chromebook.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309633/a3a27297-659f-c582-809b-40495a165f3b.jpeg)

> 画像元（ https://jp.ext.hp.com/campaign/personal/notebooks/chromebook/ ）

--- 

すみません、本題に入ります。
この記事は、Qiita 10周年記念イベントの「10年後のために今勉強しておきたい技術」について、書きました。
タイトルは少し強めな表現ですが、私自身勉強中でありながら、「クラウド技術」は今後のためになると思いましたので、このテーマを掲げさせていただきました。

この記事の構成はクラウドによって私自身が受けた恩恵と、まとめになっております。
私のメインの主張は、まとめに書きましたので、そこだけ知りたい場合はまとめの方をお読みください！
よろしくお願いいたします。

https://qiita.com/official-events/12fc7bacec894d33a981


# クラウドによって私自身が受けた恩恵

## 〇ユーザー目線
私がユーザー目線で一番恩恵に感じたのは、「**デバイスに依存しないデータ管理**」でした。

以下の3つについて、経験を踏まえてまとめてみます。
1. データの持ち運び
2. データのバックアップ
3. サービスの利便性

### 1. データの持ち運び
ローカル上で作業していたデータを他のデバイスに持っていきたい時、当時私はUSBにそのデータを入れて、他のデバイスに持っていきました。
別にこういうもんかと思っていたので、めんどくさいな～とかいった気持ちはなかったです。しかし、クラウド上にデータを保存できることを知ってから、データの持ち運びはクラウドに頼るようになっていました。やはり、クラウド上の場所にアクセスさえできれば、デバイスを問わずにデータを移動できるのは魅力的でした。

### 2. データのバックアップ
パソコンやスマホを新しく買い替えた時、データを引き継ぎたいというのは当たり前ですよね。
当時私はスマホを新しく買い替えるとなると、有線でパソコンに繋ぎ、一時的にデータを保存しておいて、それを新しいスマホに入れるということをしていました。しかし、クラウド上にデータを保存してさえいれば、少し待つだけで新しいスマホにデータの引き継ぎが行われます！楽です！
また、パソコンやスマホが突如壊れたとしても、クラウド上にデータを定期的に保存してさえいれば、新しいデバイスで簡単に復旧しますね。クラウドのおかげで、データに対する不安が本当に軽減されたと思います。

### 3. サービスの利便性
ユーザーがよく使うクラウドといったら、SaaSです。
この記事では、クラウドの技術的な部分について深く説明はしませんが、IaaS、PaaS、SaaSの3つがクラウドの概要として挙げられますね。この3つの違いを一言でいうと、管理の範囲が違うところにあります。その中でSaaSは、ソフトウェアをサービスとして提供する、Software as a Serviceというものです。これは、様々なサービスをセットアップなしで、インターネット経由ですぐに利用できます。データもクラウド上で管理されているので、ユーザー側である私たちはそのサービスを利用する上で、なにも心配はありません。


## 〇エンジニア目線
私がエンジニア目線で一番恩恵に感じたのは、「**やりたいことに集中できる**」でした。

以下の2つについて、経験を踏まえてまとめてみます。
1. 開発
2. 運用

### 1. 開発
何か新しく開発を始める時、「こういったサービスを作って提供したい、実現したい」など目的となるやりたいことがあるところから始まると思います。実際にそれを実現しようとすると、あれこれ準備するべきものや、知識、技能が必要になってくるかと思います。いつまでたっても調べているばかりで、やりたいことに取り組めない、集中できないといった状況になったりしていませんか？
クラウドはそういった問題を解決してくれました。PaaSは開発者の味方です。PaaSは、プラットフォームをサービスとして提供する、Platform as a Serviceというものです。これを利用することで、開発者である私たちは自身の実現したい目的のアプリケーションだけに集中し開発することができます。あれこれ考える必要や手間がなくなるということです！

### 2. 運用
運用中のサービスを維持するためには、インフラの管理などは欠かせないものです。しかし、インフラの管理は細かな作業が多いため、どうしてもやりたいことに集中することや時間を割くことが難しくなってしまいます。そこでクラウドを利用すると、インフラの管理はクラウド事業者が担当してくれます。私たちはやりたいこと、つまりアプリケーション開発に集中することができます。開発と運用は、別々の部門もしくは会社が担当したりしていると思いますが、最近はどちらとも担当するDevOpsという言葉をよく聞きますね。


# まとめ
ここまで、私の経験を踏まえて、ユーザー目線とエンジニア目線でクラウドによって私自身が受けた恩恵をまとめてみました。どちらも、クラウドのおかげで非常に便利になったと思います。特にエンジニア目線で恩恵に感じた「**やりたいことに集中できる**」は、全体に言えることだと思っています。私がこの記事で最も主張したいところです。

- 他のデバイスにデータを持っていきたい
- 前のデータを引き継いで新しいスマホに切り替えたい
- サービスを利用したい
- サービスを提供したい

クラウドを利用することで、このやりたいことに集中して取り組むことができます。
今までやりたいことをやるには、やりたくないことも含めてやるしかなかったのではないでしょうか。そのため、非常に細かなことや複雑な作業を伴っていたため、職人芸のような、専門的な技能が求められていたと思います。しかしクラウドはそのような作業を担当してくれていて、だれでもやりたいことに集中できる状態を実現してくれます。

今後、先の未来、さまざまな新しい技術が登場することでしょう。変化が激しい世界です。新しい技術が登場する理由というのは前の技術に比べて、なにかしらが便利になるからだと思っています。そこで、何を基準に便利にするかを考えた時に、「**やりたいことに集中できる**」は非常に重要な基準になるのではないかと私は考えています。

10年後のために今勉強しておきたい技術として、私はクラウド技術を推しましたが、理由としては「**やりたいことに集中できる**」を提供してくれる技術だからです。もしクラウド技術に代わる技術が出たとしても、必ずこの技術の考え方は役に立つと思っています。

ここまで読んでいただき、ありがとうございました。
eslintを導入したけど、指摘箇所が多すぎて導入しにくい!という困りごとに対処する

## 要約
[eslint-todo-generator](https://www.npmjs.com/package/eslint-todo-generator) を導入しよう


## 困りごと

eslintをプロジェクトの途中から導入したり、運用していく中でルールを途中から変更するとなったときに、指摘箇所が多くて適用しにくい、できないということはありませんか?

eslintは優秀なので `eslint --fix`で規則的な構文は人が手を動かさなくても修正することが可能です

しかし、autofixには稀にバグが潜んでいて意図しない挙動になることもないとは言い切れません
参考: [ESLintの--fixはソースを破壊する！本当？？ - Qiita](https://qiita.com/uk-taniyama/items/a84034e16835e5e63c25)

※ サービスのQAチームが優秀だったり、テストコードがちゃんと整備されているプロジェクトでautofixすることは怖くないというチームはどんどんautofixして行きましょう!


## 対処方法

:boy: ファイル単位で指摘が発生しているルールのみをignoreしたいなぁ

:ok_woman: できるよ [eslint-todo-generator](https://www.npmjs.com/package/eslint-todo-generator) ならね


#### 使い方

```
$ npm i --save-dev eslint-todo-generator
$ npx eslint-todo-generator -f json 'src/**/*'
```

`.eslintrc-todo.json` が生成されるのでそれを以下のように `.eslintrc.json` にルールとして追加しましょう

```..eslintrc.json
{
  ...
  "extends": [
    "eslint:recommended",
    ".eslintrc-todo.json"
  ]
}
```

#### 運用方法

このツールを入れることで、多量の既存エラーをignoreすることができました。そのため、新しく作成したファイルや既存のファイルで新たに発生したlintエラーはしっかりとeslintで発見することができます。

既存の指摘箇所をどうしていくかですが、エイヤしてよいファイルであればtodoファイルから削除して、`eslint --fix` を実行しましょう
`eslint --fix`が不安な場合などは、todoからファイル名を探して、特定のルールを削除することで小さく修正していくことが可能です

todoファイルの中身は以下のような構造になっています

```..eslintrc-todo.json
{
  "overrides": [
    {
      "rules": {
        "arrow-parens": "off",
        "comma-dangle": "off",
        "eol-last": "off",
        "padded-blocks": "off",
        "import/extensions": "off"
      },
      "files": [
        "src/components/organizations/FatComponents.js"
      ]
    },
  ]
}
```

## その他の対処方法

* [サービスの開発途中から、厳しめのESLintのルールを導入するためにしたこと - カミナシ開発者ブログ](https://kaminashi-developer.hatenablog.jp/entry/eslint-rule-change)
* [eslint-nibble - npm](https://www.npmjs.com/package/eslint-nibble)
* [eslint-plugin-todo-plz - npm](https://www.npmjs.com/package/eslint-plugin-todo-plz)