OmniAICreator/Qiita-1.07M huggingface dataset:
【Salesforce】【Apex】正規表現でテキスト内から指定文字列を複数取得する

#きっかけ

テキストエリア項目の中に不定なフォーマットで5桁数値キーが複数入っているので
そのキーを１つずつキー1～キー50の項目にセットしてほしい。

という感じのご要望があったので実装しました。ApexにもPatternクラスがあるのでこれを使用します。

今回は　**正規表現でテキストの中から指定文字列を取得し、指定文字列リストを返すメソッド**　の紹介です。

Patternクラス（正規表現）を使用した処理については、もう一つ記事を書いていますのでこちら↓もご参考ください。
[【Salesforce】【Apex】正規表現で年月テキストから月末日を取得する](https://qiita.com/piepie1231/items/58aec3546c276a9a08bd)

#仕様

テキストエリア項目の値（不定フォーマット5桁数値キー）の例
 ` ` ` ID:32541 ID:32542 ID:32543 ID:32544 ID:32545 ` ` ` 
 ` ` ` キー発行20331,20332,20333,20334 ` ` ` 
 ` ` ` ①53452②53453③53454 ` ` ` 
 ` ` ` 株式会社ぴえぴえ商事様のキーは78891です。 ` ` ` 

これらの値を引数にいれて、正規表現で5桁数値を取得しリストに格納し返します。

#コード
メソッドを置いておきます。
使用したいクラスにコピペして呼び出せば使用できると思います。
正規表現は取りたい値によって直してください。
 
    public static List<String> getKeyList(string text){
        
        // 5桁数値の正規表現
        String regex = '(\\d{5})';
        
        // 正規表現をPatternにコンパイルし、textに一致するMatcherを作成する
        Pattern p = Pattern.compile(regex);
        Matcher m = p.matcher(text);
        
        List<String> keyList = new List<String>();
        while(m.find()){
            // マッチした文字列をリストに追加
            keyList.add(m.group());
        }
        
        return keyList;
        
    }

while(m.find())で次のマッチを探しています。

[Patternクラスのリファレンス](https://developer.salesforce.com/docs/atlas.ja-jp.apexcode.meta/apexcode/apex_classes_pattern_and_matcher_matcher_methods.htm#apex_classes_pattern_and_matcher_matcher_methods)から引用です。find()について
>このメソッドは Matcher オブジェクトのリージョンの最初から開始します。または、前のメソッド呼び出しが成功し、Matcher オブジェクトがそれ以降リセットされていない場合、前のマッチ処理で一致しなかった最初の文字から開始します。

#結果
例に挙げた値を渡して匿名実行し、system.debug(keyList)したログを載せておきます。

 ` ` ` ID:32541 ID:32542 ID:32543 ID:32544 ID:32545 ` ` ` 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/d3a7b696-0acd-ef4e-cd18-d70ad2cdfacc.png)

 ` ` ` キー発行20331,20332,20333,20334 ` ` `
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/3bdc9046-6906-6f29-6b01-0549fcac8d84.png)


 ` ` ` ①53452②53453③53454 ` ` ` 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/a8295dab-5b7a-38cb-acbb-996f7b1a2486.png)

 ` ` ` 株式会社ぴえぴえ商事様のキーは78891です。 ` ` ` 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/70741769-0b03-1bfa-4b6d-6c22faa4be4a.png)

いい感じに取れました！
項目に転記するなどの処理は戻り値listをfor文で回したり適宜どうぞ。

#参考
https://developer.salesforce.com/docs/atlas.ja-jp.apexcode.meta/apexcode/apex_classes_pattern_and_matcher_pattern_methods.htm

https://developer.salesforce.com/docs/atlas.ja-jp.apexcode.meta/apexcode/apex_classes_pattern_and_matcher_matcher_methods.htm#apex_classes_pattern_and_matcher_matcher_methods
Tips: Railsでpresenceメソッドを用いてnil時に返す値を簡潔に記述する

## これは何

記事投稿イベントの参加記事です。

https://qiita.com/official-events/d523df99d6479293ffa7

## presenceメソッドについて

Rails(ActiveSupport)では、`presence`メソッドというメソッドが使えます。
これはレシーバに対して`present?`を実行し、`true`だった場合にレシーバ自身を返し、`false`だった場合に`nil`を返すようなメソッドです。
以下に例を記載します。

```rb:例
10.presence #=> 10
''.presence #=> nil
```

## presenceを用いた実装テクニック

`presence`メソッドと`||`演算子を用いることで、値が`nil`だった時にデフォルト値を簡潔に記述できます。

```rb:使わない例
def foo(val)
  val.present? ? val : 'default'
end
```

```rb:使う例1
def foo(val)
  val.presence || 'default'
end
```

コンストラクタのインスタンス変数代入でも使えます

```rb:使う例2
class Foo
  def initialize(val)
    @val = val.presence || 'default'
  end
end
```

複数の値を用いるときも使えます

```rb:使う例3
def foo(val1, val2, val3)
   val1.presence || val2.presence || val3.presence || 'default'
end
```

## 参考文献

https://api.rubyonrails.org/classes/Object.html#method-i-presence
Pythonで変数名と変数の値をまとめてprintする

### 地味に面倒な print を拡張する
Pythonでprintを行う際、変数名を一緒に記述しないと出力結果が数字だらけになってコード検索もできないため、以下のように記述する人は多いと思う。

```python
one_two_three_list = [1, 2, 3]
print('one_two_three_list = ' + str(one_two_three_list))

# 出力結果：　one_two_three_list = [1, 2, 3]
```

しかしこの方法だと記述量が多くなってしまうため、どうせ後で使わないから数値だけ表示すればいいや、となってしまう。（経験則）

そこで、`print_`関数を定義しておくことで普段の`print`に加えて変数名も表示することができる。

```python
print_(one_two_three_list)

# 出力結果
# one_two_three_list = [1, 2, 3]
```

加えて、機械学習などで `.shape` を頻繁に用いる人にとって、 `print(X_train.shape)` などとしたときに数値だけ表示されるため、目的の値を探すとき地味に時間と労力を使ってしまい、それらが蓄積すると厄介。

ここでも次のような `print_shape` 関数を用いることで、記述量を減らしつつ見やすい出力結果を得ることができる。

```python
print_shape(X_train, y_train)

# 出力結果
# X_train_shape = (1500, 220500, 1)
# y_train_shape = (1500, 50)
```


そのために、次のコードをプログラムの最初にコピペする。

```python
from inspect import currentframe

# 変数の名前と値をまとめて表示
def print_(*args):
    names = {id(v): k for k, v in currentframe().f_back.f_locals.items()}
    print('\n'.join([names.get(id(arg), '???') + ' = ' + repr(arg) for arg in args]))

# 変数の名前と形状をまとめて表示
def print_shape(*args):
    names = {id(v): k for k, v in currentframe().f_back.f_locals.items()}
    print('\n'.join([names.get(id(arg), '???') + '_shape = ' + repr(arg.shape) for arg in args]))
```

google colabのようにデバッグ機能が不十分な環境でも、機械学習系のエラーが起きた際には`vars()`、`type()`、`print_shape()`を用いるとほとんど解決すると思う。


動作としては、`names`で、変数のidと変数名の文字列型を紐付けて一覧表にし、`print`で変数のidを取り出した後、`names`にある一覧表から変数名の文字列型を取得して出力する、という流れ。

ちなみに自分は最初、「たかが変数名を表示するためになんでこんな面倒なことをしないといけないんだ」と思ったが、`id`が変数と変数の値（オブジェクト）の橋渡しをしているということを知ってからは納得できた。

`id` はコンピュータの仕組みを知る上でめちゃくちゃ重要なので、ぜひこの記事もご覧ください。メモリを食いがちな方の一助になると思います。

https://qiita.com/thmd9726/items/6c434ba8127e323c4e19

### 追記
radiol 様に教えて頂いたicecreamというライブラリを用いる方法が、簡単かつ汎用性が高かったので共有します。

インストールはコマンドラインにて

```shell
pip install icecream
```
Pythonでの使用例

```python
from icecream import ic
import numpy as np

# 「print」をすべて「ic」に変えるだけ

# 配列のshape
numpy_array = np.zeros((10, 10))
ic(numpy_array.shape)

# 辞書のkey
fruit_dic = {'apple':120, 'orange':60, 'lemon':80}
ic(fruit_dic)
ic(fruit_dic['orange'])

# 関数名
def hello_function(name):
    return 'hello, ' + name
ic(hello_function('太郎'))
```

出力結果

```python
ic| numpy_array.shape: (10, 10)
ic| fruit_dic: {'apple': 120, 'lemon': 80, 'orange': 60}
ic| fruit_dic['orange']: 60
ic| hello_function('太郎'): 'hello, 太郎'
```


### 参考

https://qiita.com/AnchorBlues/items/f7725ba87ce349cb0382
【初心者でもわかる】リストの・（リストマーク）の色をかえる方法

# どうも7noteです。リストマークの色を変更する方法

`<ul>`や`<ol>`などの`<li>`に使用されるリストマークや数字の色を変更する方法。
デフォルトのリストマークでは色を変えることができない（正確にはテキストのカラーと一緒になるので変えにくい）ので、疑似要素を使って再現します。

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/18fa31b2-2e3d-41e0-9514-3084fdaba8b6.png)


## ソース

```index.html
<ul>
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ul>
<ol>
  <li>AAA</li>
  <li>BBB</li>
  <li>CCC</li>
</ol>
```


```style.css
ul li {
  list-style-type: none;  /* デフォルトのリストマークを非表示にする */
  position: relative;     /* 基準位置とする */
}
ul li::before {
  content: "・";           /* リストマークのかわりを */
  color: #f00;            /* 文字を赤色に指定 */
  position: absolute;     /* 相対位置に指定 */
  left: -1em;             /* 左に1文字分ずらした位置に配置 */
  top: 0;                 /* 上から0pxのいちに指定 */
}

ol {
  counter-reset: item;    /* 疑似要素で数字を使うときに指定 */
}
ol li {
  list-style-type: none;  /* デフォルトのリストマークを非表示にする */
  position: relative;     /* 基準位置とする */
}
ol li::before {
  counter-increment: item;    /* 疑似要素で数字を使うときに指定 */
  content: counter(item)'.';  /* 疑似要素で数字を使うときに指定 */
  color: #f00;            /* 文字を赤色に指定 */
  position: absolute;     /* 相対位置に指定 */
  left: -1em;             /* 左に1文字分ずらした位置に配置 */
  top: 0;                 /* 上から0pxのいちに指定 */
}
```

## 解説

リストマークの色を変更する方法として、spanと使った方法もありますが、その方法では毎回spanをつかわないといけなくなってしまうので、あまり現実的な方法ではありません。

なので疑似要素にリストマークの代わりとなる点（・）や数字をcontentで指定します。

表示位置はposition指定をおこない、左に1文字文ずらした位置に配置します。

## まとめ

CSSのデフォルトのものは結構制約がついているものも多いので、そのようなときには疑似要素がとても活躍します。
ただし疑似要素で設定しているものはカーソルで選択したりテキストをコピーすることはできないので注意してください。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
【C言語】コマンドライン引数に入力した文字列を一文字ずつ取り出す方法

#はじめに
コマンドライン引数に入力した文字を一文字ずつ取り出すコードを書きたかった時に、なかなかネットでサンプルコードを見つけられず、3日ほど悩んだ挙句に有識者に教えていただいたので忘れないように記事にします。
#コード
```ruby:qiita.rb
#include <stdio.h>
#include <string.h>

int main(int argc, char const *argv[])
{
    for (int i = 0; i < argc; i++)
    {
        printf("%s\n", argv[i]);
        for (int j = 0; j < strlen(argv[i]); j++)
        {
            char c = *(argv[i] + j);
            printf("%c\n", c); 
        }
    }
    return 0;
}
```
ターミナルでは、以下のように出力されます。

```ruby:qiita.rb
% ./test "abc def"  
./test
.
/
t
e
s
t
abc def
a
b
c
 
d
e
f
```
#最後に
もしコードなどで間違っている箇所などがありましたらご指摘ください。
ポインタ配列難しかったです。。
API GatewayのマッピングテンプレートをSwaggerで設定したい！

タイトルの通りです。

AWSコンソールでは画面操作で簡単にマッピングテンプレートを設定することができます。
しかし、Swaggerで設定する方法については、まとまった情報があまり無かったため簡単に書いておきます。

## 設定例

設定対象のoptionsメソッドの部分を抜粋しています。

```swagger.yaml
options:
  consumes:
    - "application/json"
  produces:
    - "application/json"
  responses:
    200:
      description: "200 response"
      schema:
        $ref: "#/definitions/Empty"
      headers:
        Access-Control-Allow-Origin:
          type: "string"
        Access-Control-Allow-Methods:
          type: "string"
        Access-Control-Allow-Headers:
          type: "string"
  x-amazon-apigateway-integration:
    responses:
      default:
        statusCode: "200"
        responseParameters:
          method.response.header.Access-Control-Allow-Methods: "'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT'"
          method.response.header.Access-Control-Allow-Headers: "'Content-Type,Authorization,X-Amz-Date,X-Api-Key,X-Amz-Security-Token'"
        responseTemplates:
          application/json: |
            #set($origin = $input.params().header.get('origin'))
            #if ($origin.matches("^http(s?)://.*\.example\.com"))
                #set($context.responseOverride.header.Access-Control-Allow-Origin = $origin)
            #end
    requestTemplates:
      application/json: '{"statusCode": 200}'
    passthroughBehavior: "when_no_match"
    type: "mock"
```

## 解説

マッピングテンプレートの設定は、リクエストとレスポンスそれぞれ、Swaggerの `requestTemplates` と `responseTemplates` の項目に対応しています。
AWSコンソールと名称が違うのが分かりにくいですね。

今回はレスポンスについて設定したかったため、上の例では `requestTemplates` の設定をしています。

AWSのドキュメントにも情報があります。
[x-amazon-apigateway-integration.response](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api-gateway-swagger-extensions-integration-response.html)

### 設定例の内容

上の設定例の処理は、example.comのサブドメインからリクエストされた場合は、Access-Control-Allow-Originにリクエスト元のoriginを設定して返却し、それ以外の場合はAccess-Control-Allow-Originヘッダーを返却しないようにしています。CORS対策の設定ですね。

Lambda無しでのAccess-Control-Allow-Originの動的な設定は以下の記事が参考になりました。

[Lambda無しでもいけます！！許可されたサイトにだけCORSを許可するためにAPI Gatewayのモックレスポンスを動的に設定してみた](https://dev.classmethod.jp/articles/apigw-dynamic-response-header-with-vtl/)

### Yamlの | が便利

Yamlの仕様の話なので蛇足ですが、`|` を使用することで複数行に渡る文字列を改行を使用して記述できるので認識の負荷が減りうれしいです。

## 調べ方

はじめは「swagger mapping templates」とかで検索してみたんですが、ぱっと出てきませんでした。なのでAWSコンソールでマッピングテンプレートを設定してAPIをデプロイした後、Swaggerファイルをエクスポートして内容を確認する、ということをしました。
CloudFormationのテンプレートを作るときもこの方法が楽なときがありますね。
【Kotlin研修1日目】Android OSとアプリの構成要素

# Android OSの構造

![android-stack_2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673880/e5ffde9c-8675-3472-46bb-b570fb6e180d.png)
[出典](https://developer.android.com/guide/platform)

## System Apps
`Android OS`に備わっているアプリ。

## Java API Framework
Android開発に必要な`Javaライブラリ`。

## Native C/C++ Libraries
`C言語`や`C++言語`でプログラムを作成するためのライブラリ。

## Android Runtime(ART)
`Java`プログラムを実行するための実行環境。

## Hardware Abstraction Layer(HAL)
`Android`端末のハードウェアを扱うライブラリ。

## Linux Karnel
`Android Karnel`の核となるカーネル。

# Android Studio
`JetBrains`社が開発したIDEである`IntelliJ IDEA`をベースに、`Google`社が開発したAndroidアプリ開発環境の標準となるIDE。

# Android Virtual Device(AVD)
`Androidエミュレータ`。

# Hardware Accelerated Execution Manager(HAXM)
`Intel`社が提供する、仮想化環境を使うことで`AVD`の動作を高速化するツール。

# Project Template
[参考1: Project Template(1/2)](http://t-miliya612.hatenablog.com/entry/2018/05/06/154017)
[参考2: Project Template(2/2)](http://t-miliya612.hatenablog.com/entry/2018/05/10/212706)
[参考3: GUIコンポーネント](https://note.com/numero_dev/n/n2e0ec0105cea)

|選択肢|内容|
|:--|:--|
|No Activity|画面を必要としないアプリ|
|Basic Activity|`NavigationBar`が表示され、<br>`FloatingActionButton(FAB)`が組み込まれたアプリ|
|Button Navigation Activity|`BottomNavigation(下タブ)`が組み込まれたアプリ|
|Empty Activity|最小限のコードで構成されたアプリ|
|Fullscreen Activity|`NavigationBar`や`FAB`が表示されない<br>フルスクリーンのアプリ|
|Google AdMob Ads Activity|`広告バナー`を表示するアプリ|
|Google Maps Activity|`Googleマップ`を表示するアプリ|
|Login Activity|`非同期通信`でログイン処理を行うアプリ|
|Master/Detail Flow|スマートフォンとタブレット端末それぞれに<br>適した画面構成を行うアプリ|
|Navigation Drawer Activity|`サイドメニュー`を扱うアプリ|
|Settings Activity|アプリの設定画面を生成するアプリ|
|Scrolling Activity|下スクロールによって`TopAppBar`を生成するアプリ|
|Tabbed Activity|`Tab`バーが組み込まれたアプリ|
|Fragment + ViewModel|フラグメント間でデータ共有を行うアプリ|
|Native C++|`C++`でアプリ開発を行う場合|

# Androidビューのファイル構成

## manifests
`AndroidManifest.xml`ファイルが格納されたフォルダ。
アプリを実行するのに必要な設定が記述される。

## java
`.java`や`.kt`ファイルが格納されたフォルダ。

## res
Androidアプリの実行に必要な、`java`フォルダに属さないファイル(=`リソース`)群。

### res内のサブフォルダ構成

|サブフォルダ|内容|
|:--|:--|
|drawable|`画像`ファイル|
|layout|画面構成に関わる`.xml`ファイル|
|mipmap|アプリの`アイコン`ファイル|
|values|アプリで表示する固定文字列(`strings.xml`),<br>画面テーマ(`themes.xml`),<br>色構成(`colors.xml`)<br>を表す`.xml`ファイルなど

## Gradle Scripts
`Android Studio`のビルドシステム`Gradle`のビルドスクリプトをまとめたノード。

# レイアウトファイルとアクティビティ
Androidアプリ開発において編集するファイルは主に以下の3つ。

> - `res/layout`フォルダの`レイアウトXML`ファイル(=`レイアウトファイル`)
> - `java`フォルダの`.kt`または`.java`ファイル(=`アクティビティ`)
> - `res/values`フォルダの`strings.xml`ファイル

## レイアウトファイル
画面構成を担う`.xml`ファイル。

## アクティビティ
処理を担う`.kt`または`.java`ファイル。

なお、`レイアウトファイル`と`アクティビティ`のペアは関連した名前をつける。
(ex.) `activity_main.xml`ファイルと`MainActivity`クラス

## strings.xml
アプリで表示させる文字列を記述した`.xml`ファイル。
アプリを多言語対応させる場合は、所定フォルダ(日本語の場合は`values-ja`)に格納するだけで、`Android OS`の言語設定に応じて自動に切り替えられる。
Docker CentOS8にnginx入れてみた

## 概要
Dockerを使ってCentOS8上にnginxを入れるだけのシンプルな環境構築の方法をご紹介します。

## 環境
- maxOS BigSur 11.2.3
- Docker version 20.10.6
- docker-compose version 1.29.1

## 構成
```
.
├── docker
│   └── app
│       └── Dockerfile
└── docker-compose.yml
```

## 手順
### 1. docker-compose.yml作成
シンプルに`app`コンテナのみを作成します。

```docker-compose.yml
version: "3.9"
services:
  app:
    build:
      context: ./docker/app
    ports:
      - "80:80"
```

### 2. Dockerfile作成
CentOS8では、`yum`コマンドが廃止され`dnf`コマンドが採用されたんですねー。

```dockerfile:Dockerfile
FROM centos:centos8

RUN dnf -y update

# install nginx
RUN dnf install -y nginx
CMD ["nginx", "-g", "daemon off;"]

WORKDIR /usr/share/nginx/html
```

ちなみに、デフォルトのドキュメントルートは`/usr/share/nginx/html`になりますー。

### 3. 確認

#### 3-1. 起動

```sh
docker-compose up -d
```

#### 3-2. 確認
http://localhost にアクセスしてみましょう。
nginxのテストページが表示されていたらOKです。

|![スクリーンショット 2021-06-02 12.15.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290840/248c774c-3eb7-177e-d6e9-097c9f80ed9e.png)|
|:--|

#### 3-3. 停止

```sh
docker-compose down
```

## 参考
- [Docker+CentOS8にnginxをインストールする](https://www.aruse.net/entry/2019/10/05/215213)
leetcode刷题日记之两数之和

# 审题
给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。

你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。

你可以按任意顺序返回答案。

示例 1：

```
输入：nums = [2,7,11,15], target = 9
输出：[0,1]
解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。
```

# 思路
给了一个数组和一个目标值，要求找到数组中两个数值相加等于目标值的索引。

方法一可以直接穷举遍历

```go
func twoSum(nums []int, target int) []int {
    for index,num := range nums{
        for j:=index+1;j<len(nums);j++{
            if num+nums[j] == target{
                return []int{index,j}
            }
        }
    }
    return []int{0,0}
}
```

`j:=index+1`是期望第二组for循环从下标为1开始，而非0开始，避免**数组中同一个元素在答案里重复出现**

方法二用到哈希表，将数组每个数的值与目标值做差值存入map，拿到一个数就用目标值减去这个数值，看数组值是不是map中的其中一个差值，降低复杂度。

```go
func twoSum(nums []int, target int) []int {
    mapSum := map[int]int{}
    for i,v := range nums{
        if idx,exist := mapSum[v];exist{
            return []int{idx,i}
        }
        mapSum[target-v]=i
    }
    return []int{0,0}
}
```

或者将数值放入map当作key，数值的索引当作map的value，然后判断差值在不在map中

```go
func twoSum(nums []int, target int) []int {
    m := map[int]int{}
    for i, v := range nums {
        find := target - v
        if _, e := m[find]; e {
            return []int{m[find], i}
        }
        m[v] = i
    }
    return []int{}
}
```
Parrot Bebop2をGazeboでシミュレーション

# 環境


|ROS|Kenetic|
|:--|:--:|
|Ubuntu|MATE 16.04|
|Gazebo|7.0.0 -> 7.16.1|

# Gazeboのバージョンの確認
    $ gazebo -v
Gazeboのバージョンが7.0.0だとあまりよろしくないとのことなので
gazeboをアップデート（下記参考）

[ROS講座67 車輪ロボットを作る7(カメラのシミュレーション)](https://qiita.com/srs/items/7d78f9ad21a0e61f5bff)

# シミュレーションプログラムのビルド
[BebopS](https://github.com/gsilano/BebopS)の自分の環境にあったものでセットアップ
自分の場合、
「Installation Instructions - Ubuntu 16.04 with ROS Kinetic and Gazebo 7」を参考にしました。

##### 1に関してはすでにROSが入っているのでパス
##### 2でワークスペースを作る(ワークスペースをbebop_sim_wsで作りました)

    $ mkdir -p ~/bebop_sim_ws/src
    $ cd ~/ bebop_sim_ws /src
    $ catkin_init_workspace  # initialize your catkin workspace
    $ cd ~/ bebop_sim_ws /
    $ catkin init
    $ cd ~/ bebop_sim_ws /src
    $ git clone -b med18 https://github.com/gsilano/rotors_simulator.git
    $ git clone -b med18 https://github.com/gsilano/mav_comm.git
       # $ git clone https://github.com/gsilano/BebopS.git
    $ git clone https://github.com/gsilano/BebopS.git

こちらのサイトではbebop_autonomyも同パッケージ内にクローンしていましたが、自分の場合、別ですでにパッケージ化していたのでパス

`python_catkin_tools`が必要なので入っていない場合

    $ sudo apt install python-catkin-tools

##### 3ビルドしましょう
    $ rosdep install --from-paths src -i
    $ catkin build

もし`octomap-ros`がないよって言われたら、インストール（他もしかり）

    $ sudo apt install ros-kinetic-octomap-ros

##### 4.bashrcに書き込む
    $ echo "source ~/catkin_ws/devel/setup.bash" >> ~/.bashrc
    $ source ~/.bashrc

##### 追加
Githubではここで終了していますが、`source setup.bash`してもROSのパッケージが見つからない問題が発生。

    $ roslaunch bebop_simulator bebop_without_controller.launch
ここのbebop_simulatorがTabキーで自動入力されるはずが出ない。

`bebop_sim_ws/src/`にある`BebopS`の名前を`bebop_simulator`に変更。
もう一度ビルドしましょう（develとbuild消してやった方がいいのか？）

    $ catkin build

`source devel/setup.bash`すると、Tabキーで自動入力できた！

# Bebopのシミュレーション
どこをどういじればいいかはまだよくわかりませんが、とりあえずドローンを1m浮かせるlaunchを実行。

    $ roslaunch bebop_simulator task1_world.launch

![bebop_simulator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1543011/4a29afaa-1aa6-eccc-89d3-7a29585e214b.png)

Bebopが飛んだ！
画像をだいたい全部グレースケールにしたい

# やりたいこと
カラーで保存されたpngファイルがたくさんあります。ほとんどの画像は文字画像なのでグレースケールで保存して容量削減したいのだけれど、一部は写真画像なのでカラーのままにしたい、というケースがあり、Python3+Pillow でやってみました

# 事前調査
ググり力がたりないけれどいくつか似た要望を持っている人を見つけました。これらをもとに少し頑張ってみます

- [画像を読み込んで白黒かカラーかを判別するには？- 教えてgoo](https://oshiete.goo.ne.jp/qa/6788162.html)
- [書籍の自炊画像から、カラーページとモノクロページを判別するプログラムを実装したいです - 人力はてな](https://q.hatena.ne.jp/1340883203)

# やったこと
ようはグレーっぽさなる指標を得られればいいわけです。それは、RGBからHSVに変換した際のS値([彩度](https://ja.wikipedia.org/wiki/%E5%BD%A9%E5%BA%A6))です。S値は白・黒・グレーの場合には値が0で, そこから離れるにしたがって値が大きくなり, 最大で255になります（Pillowの場合です。上限を100%にする流儀や1.0にする流儀もあるようです）。

そこで閾値としてS値の平均値を採用し、例えば10くらいにすると「写真画像」と「テキスト画像」の判別ができそうです。

というわけで上述の「やりたいこと」をスクリプト化してみました。

```py
import os, sys, shutil
from PIL import Image

"""
通常のグレー判定なら閾値は1とかでもいいけど,
HTML Linkで色のついた画像の場合もグレーと判定したいなら10くらいの閾値は必要
"""
def check_vivid(im, threshold=10):
    if im.mode in ["1", "L"]:
        return (False, 0)
    pxs = im.convert("HSV").getdata()
    score = sum(map(lambda hsv: hsv[1], pxs)) / len(pxs)
    return (score > threshold, score)

def main(src, dst):
    for f in os.listdir(src):
        f0, ext = os.path.splitext(f)
        if not ext in [".jpg", ".jpeg", ".png"]:
            continue
        im = Image.open(os.path.join(src, f))
        t,v = check_vivid(im)
        print(t,v,f)
        if t:
           shutil.copy(os.path.join(src, f), os.path.join(dst, f))
        else:
           im.convert("L").save(os.path.join(dst, f"{f0}_g{ext}"))

if __name__ == "__main__":
    d = os.path.abspath(sys.argv[1])
    workdir = os.path.dirname(d)
    src = os.path.basename(d)
    dst = os.path.join(workdir, f"{src}_gray")
    os.chdir(workdir)
    os.makedirs(dst, exist_ok=True)
    main(src, dst)
```

自分の用途ではこれで十分でした。知見があるひとはコメントくれると助かります。
App Runnerについて

# はじめに
「AWS App Runner」というサービスが先日GAされました。
触ってみたので、概要や所感などを書きます。

https://aws.amazon.com/jp/apprunner/

## AWS App Runnerとは
リソースやインフラ等、環境を意識せずにアプリケーションを実行できるサービスです。

内部的にはFargateが動作しており、コンテナ化したアプリケーションを実行しています。

AutoScalingに対応しており、閾値を決めることでコンテナ数を増減してくれたり、更新を行うと自動でデプロイしてくれる機能もあります。

[公式ドキュメント][link-1]より

> AWS App Runner は、コンテナ化されたウェブアプリケーションや API を開発者が簡単かつ迅速にデプロイできるフルマネージド型サービスです。大規模に、しかも事前のインフラ経験を必要とせずにデプロイすることができます。ソースコードからでも、コンテナイメージからでも始められます。App Runner がウェブアプリケーションを自動的にビルドおよびデプロイし、暗号化しつつトラフィックのロードバランスを実行します。また App Runner は、トラフィックのニーズに応じて自動的にスケールアップまたはスケールダウンします。App Runner を使用すれば、サーバーやスケーリングについて煩わされることもなく、アプリケーションに集中できる時間が増えます。

[link-1]:https://aws.amazon.com/jp/apprunner/
## アプリケーション
- 使用するアプリの指定方法は二種類あります。

    - GitHubのソースコードリポジトリを指定する。
       
        - Node.js 12
        - Python 3
       
    - ECR内のアプリのコンテナを指定する。
        - リポジトリ選択してタグ指定。

GitHubリポジトリを指定すると、自動でアプリをコンテナ化してくれます。
GitHubのリポジトリ内に ``apprunner.yaml`` ファイルを配置することでビルドコマンドを制御できるようです。

サンプルが以下にあります。

https://docs.aws.amazon.com/apprunner/latest/dg/config-file-examples.html


また、AppRunnerはCloudWatchと統合しており、アプリのログ等はCloudWatchに出力されます。

### デプロイ
- 手動デプロイ
    - マネコン,CLIなどから好きなタイミングでデプロイできます。
    
- 自動デプロイ
    - GitHubリポジトリ、ECRのPush検知を行い、新しいイメージがプッシュされると自動でデプロイする設定もできるようです。

## 試した所感
- すこぶる簡単にアプリをデプロイできる！
    - 一番のメリットです。インフラを全く意識せずに作成できます。

- 設定も簡単かつベストプラクティス準拠！
    - より簡単に作成できるように作られているので、管理項目も少なく、設定が楽です。
        - Task定義作って、Cluster作って、Service作って...のダルさがないです。
        
### デメリット
- vCPU,メモリの選択肢が少ない
    - 1vCPUはメモリ2~4GBまで
    - 2vCPUはメモリ4GBのみ
  
- インフラの「作りこみ」ができなさそう？
    - VPCなどとの連携がないため、活用できるサービスとできないサービスがありそうです。

# まとめ
作ったものを爆速で公開したい！という要件を満たせる非常に良いサービスだと思います。
特にインフラを気にせずにアプリだけ意識してコンテンツを公開したいという方にオススメのサービスです。
ただ、高負荷なワークロードであったりすると、対応しきれない面も出てくると思います。
php-mcryptをphp7.2以降でとりあえず使う

PHPの暗号化モジュールphp-mcryptが、PHP7.1で非推奨に/php7.2では削除されました。
opensslやsodiumへの移行が推奨されていますが、ひとまずpeclに移動したphp-mcryptを使う方法をまとめます。

今回はphp-7.4でpeclのphp-mcryptを組み込みます。

```shell
[prompt] # yum install -y --enablerepo=remi,amzn2extra-php7.4 php74-php-pecl-mcrypt
```
モジュールの位置を確認

```shell
[prompt] # find / -name "mcrypt.so"
/opt/remi/php74/root/usr/lib64/php/modules/mcrypt.so
```
モジュールファイルを組込む設定ファイルを作成します。

```
[prompt] # vim /etc/php.d/mcrypt.ini
--
extension=/opt/remi/php74/root/usr/lib64/php/modules/mcrypt.so 
```
これでphp-mcryptが有効になりました。

```
[prompt] # php -i | grep "mcrypt support"
mcrypt support => enabled
```
XSS（クロスサイトスクリプティング）について

## はじめに
XSS（クロスサイトスクリプティング）という、サイバー攻撃について調べてみましたので、まとめたいと思います。


## XSSとは
 XSSとは、脆弱性がある（サイバー攻撃に対する策がなされていない）webアプリケーションに対して、プログラム（スクリプト）を埋め込み、悪意のあるwebサイトに誘導させ（クロスサイト）、個人情報を盗むなどの被害をもたらすサイバー攻撃の一つです。

特にJavascriptを利用して罠を仕掛けられていることが多く、専門的知見があれば比較的容易に実行できてしますため、XSSの被害事例が多いと言えます。


## XSSによる被害例

### フィッシング詐欺
埋め込まれたスクリプトを実行してしまい、悪意のあるサイトに誘導させられ、それに気づかずにIDやパスワードを入力してしまうと、その情報が盗まれてしまうというものです。

また、クレジットカード情報を同じ手法で盗まれることもあります。それによる被害は容易に想像がつきますよね。。。


### セッションハイジャック
これはCookieを盗む攻撃手法です。cookieには様々な個人情報が保存されています。普段は一度訪れたwebサイトなどで、パスワードやIdを入力したことがあれば、PCがそれを記憶していて、2回目以降は自動で入力してくれるというような、ユーザーをの手間を省いてくれるなどの仕組みですが、XSS攻撃によりこのcookieの情報を盗まれることがあります。

### webサイトの改ざん

XSSでwebサイトのHTMLを書き換えられることがあります。また、フォームの送信先のURLを全く別のURLに改ざんし、悪意のあるページにとばし、フィッシング詐欺をすることが可能になります。


## XSSの対策

### 入力値の制限
XSSは不正なスクリプトを埋め込もうとするので、入力フォームなどには、バリデーションで制限を設けさせることが重要です。例えば電話番号であれば、数字のみでしか受け付けられないようにしておくとか。
また、Javascript側でそのような制限をしていても、Javascriptをオフにしてすり抜けることができるため、サーバーサイド側で制限の設定をすることに気をつけたいです。


### エスケープ（サニタイジング）処理をする
エスケープとは、例えば、 HTMLの文法で使われる　<, >, &, "　などの特別な意味を持つ記号がありますが、この文字を入力された時に別の文字へ書き換えてしまう手法です。そうすることで外部から埋め込まれたスクリプトはただのテキスト（文字列）として認識し、スクリプトコードを無効化することができます。

### WAF(Web Application Firewall)
WAFはウェブアプリケーションへの攻撃を検出、防御、保護するためのセキュリティツールです。ネットワーク機器として設置するタイプやインストールして使うソフトウェアタイプがあるそうです。

## 最後に

アプリケーションの開発中、こういったサイバー攻撃からできるだけ攻撃を受けないように脆弱性を取り除くことを考えながら作業をするということはとても重要だと感じます。

もちろん、開発側もそうですが、我々の日常的に利用しているウェブサービスにもこのようなリスクが潜んでいるということは念頭において利用したいです。
キーボード沼にはまった話

## 背景

～～前に会社の先輩と雑談してて～～
先輩：「ところで、○○くんはキーボードなに使っているの？」
自分：「・・・?　ノートPCにくっついてるやつですけど、ほかにあるんですか？~~（見たらわかるやろ）~~」
先輩：「それはいけない、SEならキーボードにも拘らないといけない。わたしなんか3万のキーボードを使ているが、抜群にいいよ」
自分：「、、、はぁ~~（正気かコイツ）~~」
～～～～～～～～～～～～～～～～～～～～～～～

はい、というわけで、でかい釣り針に引っかかりました。

# 自分の持ってるキーボード

いまさらキーボードの種類とか軸の紹介とか100番煎じになるので、そういうのはほかの人に譲ります。
ここでは単に今まで自分が使ってきたキーボードを紹介します。

### [Natural Ergonomic Keyboard 4000 (ナチュラル エルゴノミック キーボード 4000)](https://www.microsoft.com/accessories/ja-jp/products/keyboards/natural-ergonomic-keyboard-4000/b2m-00028)

自分の初めて使ったちゃんとしたキーボードですね。
エルゴノミクスキーボードなので、ごつい見た目してますけど、打ちやすかったり、ボタンがたくさんあったりとでなんやかんや初心者には使いやすかったです。
ただ、テレワーク全盛になったこの時代に家のデスクに置くスペースはなく、今はもう使用していません。
値段も6,000円くらいとお手頃で、現在はもう絶版みたいですがエントリーモデルとしてはよかったです。
![image-20210602111608268.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237493/a60d6765-36fa-a727-9b0b-1d3f6209f4d7.png)


## [Happy Hacking Keyboard Professional HYBRID Type-S 日本語配列／墨](https://www.pfu.fujitsu.com/direct/hhkb/detail_pd-kb820bs.html)

はい、完全に見た目が好きで買いました。が、サイズも30cmほどとコンパクトで持ち運びもしやすく、唯一無二の打鍵感もサイコーです（これを買うときに、静電容量無接点方式とか初めて知った）。
このキーボードで、自分好みのキー配列にしたりキーキャップを変更したりと沼の楽しさがわかり、実質、このキーボードを使ってからキーボード沼にはまりました。
35,000円と地味に高いのとキーボードが小さいので肩こりがでる（ような気がする）のが注意点です。
![image-20210602112847484.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237493/f71806e1-7ee2-f361-84cc-6f907737c271.png)


### [MOONLANDER](https://www.zsa.io/moonlander/)

1週回って、エルゴノミクスキーボードに落ち着きました。
やっぱり方が広がるので肩こりがなくなるのと、分離型なのであまりスペースを取らないこと、また自分好みのキー配列やデゥアルファンクションキーがめちゃ便利です。見た目はHHKBほどじゃないですが、まあこれはこれでかっこいいので気に入ってます。
なので、家用→MOONLANDER、持ち運び用→HHKBという感じで使い分けています。

無線じゃないのと静電容量じゃない点、あと365$と高価ですが、割と買ってよかったと思ってます。
![0-hero-black.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237493/5cb49321-be24-2df1-13c3-8857d9b239f8.png)


### さいごに

今まで3台使ってきましたが、やはり「静電容量」×「エルゴノミクス（分離型）」が一番欲しいなぁと思いました。が、現在は市販されていないので、出るのを待つか自作するしかないかと思います。
素人が静電容量の自作をやるのはかなりハードルが高いと聞きますが、我慢できなくなったらやってみようかなと思います。
あと、[游舎工房](https://yushakobo.jp/)はよかった。。
delete後のredirect

### 起きている問題
投稿内容の削除後、投稿一覧にリダイレクトしたいがトップページにリダイレクトされてしまう。

### View

```microposts/edit.html.erb

<h3>記事編集：「<%= @micropost.title %>」</h3>

<%= form_with(model: @micropost, local: true) do |f| %>
        <p>タイトル（最大255字）</p>
        <div class="form-group">
          <%= f.text_area :title, class: 'form-control', rows: 1%>
        </div>
　　　　<p>内容（最大10000字）</p>
        <div class="form-group">
          <%= f.text_area :content, class: 'form-control', rows: 18 %>
        </div>
        
        <%= f.submit '保存する', class: 'btn btn-success btn-block mt-5' %>
        
      <% end %>

<%= link_to "削除する", @micropost , method: :delete, data: { confirm: "本当に削除しますか?" }, class: 'btn btn-danger btn-block mt-2' %>

```

###controller

```microposts_controller.rb
class MicropostsController < ApplicationController
  
  before_action :require_user_logged_in
  before_action :correct_user, only: [:edit,:update,:destroy,:show]
  
  def index 
    @microposts = current_user.microposts.order(id: :desc).page(params[:page]).per(10)
    
  end
  
  def update
    @micropost = Micropost.find(params[:id])

    if @micropost.update(micropost_params)
      flash[:success] = '保存されました。'
      redirect_to @micropost
    else
      flash.now[:danger] = '保存されませんでした。'
      render :edit
    end
  end
  
  def edit
    @micropost = Micropost.find(params[:id])
  end
  
  def show 
    @micropost=Micropost.find(params[:id])
  end
  
  def create
    @micropost = current_user.microposts.build(micropost_params)
    if @micropost.save
      flash[:success] = '記事を投稿しました。'
      redirect_to root_url
    else
      @microposts = current_user.microposts.order(id: :desc).page(params[:page])
      flash.now[:danger] = '記事を投稿できませんでした。'
      render 'toppages/index'
    end
  end

  def destroy
    @micropost.destroy
    flash[:success] = '記事を削除しました。'
    redirect_back(fallback_location: microposts_path)
    
  end
  
  
  
   private

  def micropost_params
    params.require(:micropost).permit(:content,:title)
  end
  
  def correct_user
    @micropost = current_user.microposts.find_by(id: params[:id])
    unless @micropost
      redirect_to root_url
    end
  end

end

```
### 解決方法

rootにリダイレクトしていた原因は、投稿を消したことによってcontrollerにある　current_user メソッドのunless部分が実行されていたこと。つまり、```root_url```となっていた部分を```microposts.path```にすることで投稿を削除した後は投稿一覧へリダイレクトできる。
【備忘】pyodbcでデータベースとテーブルを作成する

## プログラムの流れ
pyodbcでDB接続 → DB作成＆テーブル作成 → DB切断

## コード
```python
import pyodbc

# インスタンス
instance = "<ipアドレス or サーバー名>"

# ユーザー
user = "<SQLServerのログインユーザー>"

# パスワード
pasword = "<パスワード>"

# DB接続
connection = (
    "DRIVER={SQL Server};SERVER=" + instance + ";uid=" + user + ";pwd=" + pasword
)
con = pyodbc.connect(connection, autocommit=True)
cursor = con.cursor()

# DB作成
cursor.execute("CREATE DATABASE mydb;")
# 作成したDBを指定してテーブル作成
cursor.execute(
        """
        USE mydb;
        CREATE TABLE mytable (
            column1 int,
            column2 nvarchar(50)
        );
        """
    )
# DB切断
cursor.close()
```

以上
[Oracle Cloud][Networking] ネットワーク・ビジュアライザーでネットワーク構成を見てみる

# はじめに

こんにちわ
いつもの"新機能ハイライト"ページの中で面白いものを見つけました ↓

https://blogs.oracle.com/oracle4engineer/copied-from%3a-oracle-cloud-infrastructure-%e6%96%b0%e6%a9%9f%e8%83%bd%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88-2021421

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/04640a6d-3cdd-c524-94cc-6490a9e0b8e7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/643b12f1-bfb2-3e85-2482-9fda7af5920b.png)

なんと、ネットワーク構成をダイアグラム/グラフで表してくれる機能のようです
早速、実際のブラウザコンソールを見に行ってみましょう

# ネットワーク・ビジュアライザ（リージョナル）

コンソールにログインし、いつもの左上のメニューを開くと、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/95a35a0f-83c0-217a-e103-b33221a0cb18.png)

おお、確かに「ネットワーク・ビジュアライザ」がありますね
クリックすると下記表示なります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/413de3e1-a133-56fa-7b64-1b3d606c73a3.png)

アクセス直後はこんな感じで、コンパートメントを指定していないため特に表示がありません
コンパートメント指定してみると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/ecf5e7aa-f3a1-a504-49a3-5641d915d064.png)

おお！表示された！
各種ネットワークパーツのアイコンがやや気になりますが（笑）
VCN , DRG , 他リージョンとの接続(RPC)等が表現されてますね
どうせなら公式Oracle PPT templeteのアイコンに近い形で表現してほしいなぁ

各アイコンはドラッグしてぐりぐり動かせます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/21d47c63-957e-f10c-73d6-7037babea8a6.png)

各アイコンをクリックすると、そのコンポーネント（リソース）の詳細が表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/850d2a47-d765-9021-dd8b-43e5636b3994.png)

マップの凡例はこんな感じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/5412b9d6-c528-7241-f6ef-870800cefee6.png)

VCNを選択して、
Open Additional Details をクリックすると下記のように表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/8a21d71a-2e53-7df6-cbf5-2e3faceb87e4.png)

# ネットワーク・ビジュアライザ (仮想クラウド・ネットワーク)

Go to VCN Map をクリックすると下記のビジュアライザに切り替わります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/3788b69c-32b6-8be2-302b-cacd82f7234b.png)

なるほど、VCN内部のSubnetや隣接しているIGWやLPG等が見えるわけですね
Subnetを選択して、ルーティング情報の表示もできるようです
（ちょっと分かりにくいけど）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/31ea0eb3-81c5-9952-781c-f921c8f8fa85.png)

いかがでしたでしょうか
私の所感は下記のとおりです

- ビジュアルを2タイプに分けているが、両タイプ混合で全一括で見えるモードもあっていいかも
- 各コンポーネントのアイコンは今後標準化していってほしい
- ルーティング情報など一部UI仕様は今後のupdateに期待
- ビジュアライザから色々な編集ができたら素敵だなぁ

希望/要望ばかり書き連ねてしまいましたが、
現システムのネットワーク構成をトポロジカルに把握できるというのはとても良い機能だと思います
私の検証環境は非常にシンプルで小規模ですが、
より大規模なシステムだとVCN,Subnet等の数も膨大になり管理が煩雑になります
そういった時にこそ効力を発揮する機能だと思います

ありがとうございました
Reactでコンポーネント作成した際のメモ

##コンポーネントしたtsxファイル

```
import RequiredLabel from '../atoms/RequiredLabel';

export type TitleLabelProps = {
  name: string;
  styles: SerializedStyles;
}

export const TitleLabel: React.FC<TitleLabelProps> = (
  props,
) => (
	<div
		css={css`
			display: flex;
			align-items: center;
			line-height: 1;
		`}
	>
		<RequiredLabel />
		<div css={css`
      font-size: 14px;
      ${props.styles};
    `}>{props.name}</div>
	</div>
);
export default TitleLabel;
```

##上記コンポーネントしたファイルをimportして呼び出してるファイルの記載

```
<TitleLabel 
            name={'きなこ'}
            styles={css`
              color: hotpink;
            `} />

```



TitleLabelの中で再度cssを追加することができている
なぜか→コンポーネントしたtsxの中で
styles: SerializedStyles;と
   ${props.styles};
で型をわたしてるから
VSCodeのリモートコンテナへの接続とエディタで開く

VSCode + dockerコンテナ 
VSCode + リモートコンテナ（＋docker）

ローカルでのプログラミング環境はどんどんかわっていく中で
VSCodeの拡張機能であるRemote Containers を使った時の作業例です

## VSCode から ローカルのコンテナに接続する（dockerにてコンテナは起動されている前提です）
![VSCodeとcontainer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/87c040f9-e0f3-39a4-7079-dddcd93b5ed4.png)

ターミナルでコンテナ内（リモートコンテナでなく、通常のdockerコンテナへ）にシェル接続できます

- MySQLのコンテナ
- Python用のコンテナ
などのコンテナに接続でき、起動中のコンテナにシェルで入るのがものすごく手軽になります。

これまでだと、`docker ps ` 使い、コンテナIDなどを調べて、`docker exec ` を使っていたが、
見て押すだけで接続できる。
teratermやRLoginで接続先を選んでいるかのような手軽さ

- 参考

コンテナのシェルに入る

https://www.it-swarm-ja.com/ja/docker/docker%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%AE%E3%82%B7%E3%82%A7%E3%83%AB%E3%81%AB%E5%85%A5%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%81%84%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/1053893809/


## VSCodeからリモートコンテナに接続する
### ターミナル
- 接続方法 dockerアイコンを押して、-> Attach Shell で コンテナにシェルで入れる（ターミナル接続）
![VSCodeとremote-container.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/28dd99a7-98b4-ae1b-9864-d27a74b7a36c.png)

- コマンド実行例
![VSCodeとremote-container_ターミナル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/6160049f-45ec-e138-f10e-7d0ecb878152.png)

### エディタ表示
- 接続方法 dockerアイコンを押して、-> Attach Visual Studio Code でエディタ表示（ターミナルのコンソールを使い `code .` でエディタ起動もできます
![VSCodeとremote-container_エディタ起動.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/413c3ee2-858a-f819-021a-40b79844aa7b.png)

- 表示されるエディタはリモートでもローカルでも変わらない
![VSCodeとremote-container_エディタ表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/e7f072c6-1a8b-1408-7d6a-3f0fce2ddfae.png)
VisualforcePageからLightning Web Component(LWC)開発への移行で躓かないために

慣れきったVisualforce Page開発からなかなか抜けられなかった筆者が、新規アプリを作るぞというタイミングで一念発起してLWC開発をスタートさせたのですが、最初は思うようにいかずに本当にイライラした毎日を過ごしておりました。
最近になってやっと、書き方のお作法みたいなものが分かってきたのですが、分かってしまうと「俺はいったい何にハマっていたんだろうか…」という感じで痛みを忘れてしまいます。
LWCの開発ってどうやるんだっけ？という初学者向けに書いてみます。(自分が忘れてしまったときの備忘録でもあります)

## フロントエンドの書き方
Visualforce時代は、Lightning Design Systemを使うことがよくありました。

https://www.lightningdesignsystem.com/

これを使うためにはVisualforce pageに
<apex:slds />
というタグを記入します。
コードも基本的にはHTMLで記述があるためコピペで使えるし、便利だなってなるんですよね。
ただ、これはLWCでは使えません。
なぜ…ってなるけど、仕様上仕方がないのです。

では、LWCでLDSをどうやって使えばよいのだろうか？と思ったら、ここを見ればよいのです。

https://developer.salesforce.com/docs/component-library/overview/components

![Components_-_Salesforce_Lightning_Component_Library.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22294/2d9e5951-b89c-cc7d-4498-225c19ecb4c3.png)

フィルタで Lightning Web Componentを選び、コンポーネントをフィルタしましょう。
左上のQuick Find欄にboxとかlistとか入れると、それっぽいのが出てきます。

試しにLightning buttonを選択してみるとこんな画面になります。

![lightning-button_-_example_-_Salesforce_Lightning_Component_Library.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22294/f3c16c65-41b1-2f24-ebf9-5c2b6e606bb7.png)
https://developer.salesforce.com/docs/component-library/bundle/lightning-button/example

Exampleタブでは、htmlファイルの書き方とjsの書き方が表示されます。
Documentationタブでは、細かいtipsが書かれているので、こんな拡張した使い方が出来るよ、みたいなことが書いてあるのでそこを見るとよりうまい使い方がわかると思います。

## 載ってないコンポーネントもあるよね？
そうなんです。SLDSにはあるのにLWCのコンポーネントページには存在しないものがあったりします。
これどうするんだよ…ってなるのですが、そこはググってみましょう。
日本語だとあまり情報がない場合が多いので、「SLDSのコンポーネント名 + LWC」でググると、実装してみた系のblogがヒットします(運がよければ)
ということで、こちらについては若干の努力が必要なのですが、ぜひ探してみてください。

私の場合はActivity Timelineの実装をしたかったのですが
https://www.lightningdesignsystem.com/components/activity-timeline/#site-main-content

activity timeline LWC

で検索してみると、githubがヒットします。
神か…と思いながらコードを読み解き実装するという感じでやりました。

ということで、かんたんに使えるものとそうじゃないものがまだ混在してはいるのですが(SLDSのほうが先に行っているらしいので)、こんなふうに情報取得していくと実装が楽になると思いますよという話でした。
CUDA on WSL 2 のWindows 10 21H1での対応状況

# ⚡更新

Windows 10 21H2以降、およびWindows 11にてCUDA on WSL 2に対応した旨の公式記事がリリースされれています。

https://learn.microsoft.com/ja-jp/windows/ai/directml/gpu-cuda-in-wsl

---

# 概要

次の記事に記載がある Windows 10 で GPU対応のDockerを動作させることができる CUDA on WSL 2 について、Windows 10 21H1での対応状況について調べてみました。

[待ってました CUDA on WSL 2 - Qiita](https://qiita.com/ksasaki/items/ee864abd74f95fea1efa)

# 結論

Windows 10 21H1では対応しておらず、[Windows Insider Previewを利用する](https://qiita.com/ksasaki/items/ee864abd74f95fea1efa#windows-10-insider-preview-build-20150-%E4%BB%A5%E9%99%8D-%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)必要があります。

💡上の記事にも記載されていますが、Insider Previewを利用しずらい状況にある場合も、Boot from VHD 機能を利用することで [Windows Insider Preview を安全に試す](https://qiita.com/ksasaki/items/4e802da17f51d602b17d)こともできるようです

# ソース

[NVidiaのフォーラム](https://forums.developer.nvidia.com/c/accelerated-computing/cuda/cuda-on-windows-subsystem-for-linux/303)にて質問されていました。

https://forums.developer.nvidia.com/t/status-of-cuda-in-wsl-2-in-21h1/178643

>The Windows 10, version 21H1 release will not bring updates to the Windows Hardware Compatibility Program and will follow the same guidelines as 20H2.
>Source: https://techcommunity.microsoft.com/t5/windows-hardware-certification/windows-10-version-21h1-release-whcp/ba-p/2138458 
>Wait for 21H2 if you do not want join the Windows dev channel.

つまり、21H1 ではハードウェア互換性に関するガイドラインは改定されておらず、通常のリリースに含まれるのは 21H2 以降を待つ必要があるようです。

https://techcommunity.microsoft.com/t5/windows-hardware-certification/windows-10-version-21h1-release-whcp/ba-p/2138458

次の記事では 21H1 に含まれるという可能性も示されていましたが含まれなかったようです。

https://www.tegakari.net/2021/05/windows-subsystem-for-linux-2wsl2_vol3/

# 参考：現時点（2021年6月2日）のCUDA + WSL + Docker インストール手順

|||
|--|--|
|Windows 10 Insider Preview |21382 Windows build|
|CUDA|470.14 Nvidia|

https://forums.developer.nvidia.com/t/guide-to-run-cuda-wsl-docker-with-latest-versions-21382-windows-build-470-14-nvidia/178365/7
時刻を取得/表示する

![text_format.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1582154/bf9b3c5c-7142-1fe3-b21a-a6527ddd603e.png)

・Nowで現在時刻を取得。
　GetHour
　GetMinute
　toTextでmin/max lengthを設定し、

・TextFormatに下記のようにFormatして、テキストを結合します。
　{0}:{1}
AtCoder Beginner Contest 203（Sponsored by Panasonic） 

##[A - Chinchirorin](https://atcoder.jp/contests/abc203/tasks/abc203_a)

O(1)

```C++:C++
#include <bits/stdc++.h>
 
#define rep(i,n) for(int i=0; i<(n); ++i)
#define fixed_setprecision(n) fixed << setprecision((n))
#define execution_time(ti) printf("Execution Time: %.4lf sec\n", 1.0 * (clock() - ti) / CLOCKS_PER_SEC);
#define pai 3.1415926535897932384
#define NUM_MAX 2e18
#define NUM_MIN -1e9
 
using namespace std;
using ll = long long;
using P = pair<int,int>;
template<class T> inline bool chmax(T& a, T b){ if(a<b){ a=b; return 1; } return 0; }
template<class T> inline bool chmin(T& a, T b){ if(a>b){ a=b; return 1; } return 0; }
 
int main() {
    int a, b, c;
    cin >> a >> b >> c;
 
    if(a!=b && b!=c && c!=a){ cout << "0" << endl; return 0; }
 
    int res = a ^ b ^ c;
 
    cout << res << endl;
 
    return 0;
}
```

##[B - AtCoder Condominium](https://atcoder.jp/contests/abc203/tasks/abc203_b)

O(N)
long long型を知っているか。

```C++:C++
#include <bits/stdc++.h>
 
#define rep(i,n) for(int i=0; i<(n); ++i)
#define fixed_setprecision(n) fixed << setprecision((n))
#define execution_time(ti) printf("Execution Time: %.4lf sec\n", 1.0 * (clock() - ti) / CLOCKS_PER_SEC);
#define pai 3.1415926535897932384
#define NUM_MAX 2e18
#define NUM_MIN -1e9
 
using namespace std;
using ll = long long;
using P = pair<int,int>;
template<class T> inline bool chmax(T& a, T b){ if(a<b){ a=b; return 1; } return 0; }
template<class T> inline bool chmin(T& a, T b){ if(a>b){ a=b; return 1; } return 0; }
 
int main() {
    ll N, K;
    cin >> N >> K;
 
    ll res=0;
    for(ll i=1; i<=N; i++){
        for(ll j=1; j<=K; j++){
            res += i*100+j;
        }
    }
    cout << res << endl;
 
    return 0;
}
```

##[C - Friends and Travel costs](https://atcoder.jp/contests/abc203/tasks/abc203_c)

O(N)
10＾100＋1の村があり、i+1の村へ移動するのに1円かかります。
しかし、0<Ai<10^18なのでlong longで対応を出来る事が分かります。
そしてKが10^9なのでKを基準にループを行うとTLEになります。

この場合はNを基準に存在するAiまでかかった費用、もらえるお金をまとめて計算することでループ数を減らすことができます。

```C++:C++
#include <bits/stdc++.h>
 
#define rep(i,n) for(int i=0; i<(n); ++i)
#define fixed_setprecision(n) fixed << setprecision((n))
#define execution_time(ti) printf("Execution Time: %.4lf sec\n", 1.0 * (clock() - ti) / CLOCKS_PER_SEC);
#define pai 3.1415926535897932384
#define NUM_MAX 2e18
#define NUM_MIN -1e9
 
using namespace std;
using ll = long long;
using P = pair<int,int>;
template<class T> inline bool chmax(T& a, T b){ if(a<b){ a=b; return 1; } return 0; }
template<class T> inline bool chmin(T& a, T b){ if(a>b){ a=b; return 1; } return 0; }
 
int main() {
    ll N, K;
    cin >> N >> K;
 
    vector<pair<ll,ll>> P(N);
    rep(i, N) cin >> P[i].first >> P[i].second;
 
    sort(P.begin(), P.end());
 
    ll res=0, cnt=0;
    for(ll i=0; i<N; i++){
 
        if(P[i].first-cnt<=K){
            K -= P[i].first - cnt;
            res += P[i].first - cnt;
            K += P[i].second;
        }else{
            res += K;
            K=0;
            break;
        }
        cnt = P[i].first;
    }
    cout << res + K << endl;
 
    return 0;
}
```
Nuxt.jsでSafeArea（iphoneX以降）に対応する方法

Nuxt.jsでSafeArea（iphoneX以降）に対応する方法になります。

## viewport-fit=coverの指定を追加する
まずは、metaタグのviewportの設定に`viewport-fit=cover`を追記します。
Nuxt.jsのmetaタグは`nuxt.config.js`で設定できます。

```js:nuxt.config.js
export default {
  head: {
    title: 'title',
    meta: [
      { charset: 'utf-8' },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1, viewport-fit=cover'
      },
      {
        hid: 'description',
        name: 'description',
        content: 'my website description'
      }
    ]
  }
}
```

## CSSで調整する

```vue
<template>
  <div class="demo"></div>
</template>

<style lang="scss" scoped>
.demo {
  padding: 8px;
  /* ↓iphone X向けの指定↓ */
  padding-left: calc(env(safe-area-inset-left) + 8px);
  padding-top: calc(env(safe-area-inset-top) + 8px);
  padding-right: calc(env(safe-area-inset-right) + 8px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
}
</style>

```
上記の指定では、SafeAreaにpaddingで余白を設定しています。
SafeAreaが無いデバイスですと、`safe-area-inset`は0になります。

## 参考
https://web-design-textbook.com/recipe/iphone-design.html
DatabricksのノートブックをMemsourceを用いて翻訳する方法

## 概要
Databrickのノートブックを、Memsourceを用いて翻訳して、再度Databricksに取り込む手順を紹介します。
ノートブックをコードに変換してから翻訳を実施します。

## 事前準備

- Python 3 以降のインストール
- [Databricks CLIのインストール](https://docs.microsoft.com/ja-jp/azure/databricks/dev-tools/cli/)
- Memsouceの契約とセットアップ
    - [DeepL Pro（機械翻訳エンジン）を用いたMemsource（翻訳支援ツール）による翻訳作業 - Qiita](https://qiita.com/manabian/items/e9809650d013a3ec8ad7#deepl-proをmemsouceに登録する手順)



## 翻訳手順
### 1. Databricksに翻訳対象のノートブックを取り込む

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/0d646f37-aa50-d24b-47da-4076df38e6d3.png)


### 2. Databricks CLIを用いてノートブックをフォルダごとエクスポート
```python
databricks workspace export_dir /Memsource/翻訳対象 C:/databricks
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/6a2a7e48-18e0-b2e9-8df1-6b02d010ecb6.png)

### 3. Pythonにて拡張子をtxtに変更
```python
import os

path1 = 'C:\databricks'

print("開始")
for fd_path, sb_folder, sb_file in os.walk(path1):
    for fil in sb_file:
        path_renamefile = fd_path + '\\' + fil
        os.rename(path_renamefile, path_renamefile.replace('.py', '.py.txt').replace('.scala', '.scala.txt'))
print("終了")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/6b940e61-ad40-025d-b9b8-fd519463fbe6.png)

### 4. Memsourceに取り込み翻訳を実施
フォルダ階層を保持したい場合には、フォルダごとzipによる圧縮したファイルを取り込みを実施してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/0cb26f1e-512b-4662-ece7-ee2ae0bd2e95.png)

### 5. Memsourceから翻訳後のファイルをエクスポート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/d7dbbd35-8b78-2ae2-699f-e822c7152c40.png)

### 6. 拡張子のtxtを削除
```python
import os

path1 = 'C:\databricks\取り込み'

print("開始")
for fd_path, sb_folder, sb_file in os.walk(path1):
    for fil in sb_file:
        path_renamefile = fd_path + '\\' + fil
        os.rename(path_renamefile, path_renamefile.replace('.txt', ''))
print("終了")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/575b232b-d6e1-839d-a6a0-b07089f7e559.png)


### 7. Databricks CLIを用いて翻訳後のファイルをインポート
```python
databricks workspace import_dir C:/databricks/取り込み /Memsource/翻訳後 -o
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/50a10ac7-2216-b055-60e5-391893875aed.png)

### 8. Databricks Workspaceにてノートブックを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/43649818-c5dc-0254-f750-77e7b618c2bc.png)

## 注意事項
### 1. "# MAGIC"ではじまる部分が、翻訳されること
最初に、"# MAGIC"のチェックを実施してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/018bf9bd-52a4-57d2-eb8f-241b5bf31b50.png)

### 2. 箇条書きにおける末尾の空白が削除されること
半角のスペースを追加してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/7b2b1bbe-7cc6-0f8e-b868-99bfaf3500ac.png)
FlutterのCI環境を整える

[前回](https://qiita.com/yu0819ki/items/dc9ffa41162aabb7d402) は Flutter の開発を始められるよう、環境構築をしました。
今回はその続きとして、CI環境を整えたいと思います。

具体的には、 `Github Actions` で `Lint` と `Unit Test` を実行させます。

## Linterの導入
CIを回すまでがテーマのこの記事ですが、 `Linter` を導入したかったのが先で、どうせならCI回すようにしたほうがいいなということでそこまでを記事化することにしました。 `Unit Test` はついでです。

`Flutter / Dart` の　`Linter` を導入するに当たって、[こちらの記事](https://blog.dalt.me/2329)を参考にさせてもらい、`Linter` は `pedantic`、設定は `pedantic_mono` を採用することにしました。

まずはパッケージを導入します。

```terminal
$ flutter pub add --dev pedantic
$ flutter pub add --dev pedantic_mono
```

余談ですが、一度に複数パッケージを指定する方法ってあるんですかね🤔
以下のように、他のパッケージマネージャで見る感じにしたら、最初の１個しか追加されなかったんですが・・・

```terminal
$ flutter pub add --dev pedantic pedantic_mono
```

次に、上記参考記事にあるように、`analysis_options.yaml` を追加します。

```yaml:analysis_options.yaml
include: package:pedantic_mono/analysis_options.yaml
```

`VS Code` がよしなに実行してくれて、警告がでました。
![スクリーンショット 2021-05-30 11.01.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26501/a53c2f83-9e37-b9d9-a9cf-068c7d0d6d2c.png)

CLIでやるときは、 `flutter analyze` です。

```terminal
$ flutter analyze
Analyzing webapp...                                                     

   info • Prefer declaring const constructors on `@immutable` classes • lib/main.dart:31:3 • prefer_const_constructors_in_immutables
   info • Prefer const with constant constructors • lib/main.dart:96:13 • prefer_const_constructors
   info • Prefer const with constant constructors • lib/main.dart:109:16 • prefer_const_constructors
   info • Sort pub dependencies • pubspec.yaml:30:3 • sort_pub_dependencies

4 issues found. (ran in 1.5s)
```

それぞれ警告がなくなるように調整して、ここまでの差分がこんな感じです。
https://github.com/yu0819ki/flutter-sample-1/pull/1/files

## Github Actions で動かす
まぁ、 `Circle CI` でも良かったんですけど、もはや連携が要らないほうが楽だなって。

`Github Actions` で `Flutter` を扱うための記事をいくつか流し読みしましたが、最終的に [subosito/flutter-action](https://github.com/subosito/flutter-action) の README を参考にするのが良さそうという結論に至りました。
誰かの作業ログだとバージョンが古いとかあるけど、誰がやっても `subosito/flutter-action` を使うなら、それを見れば最新に追従できるわけで。

・・・

と思ったんですが、2021年6月2日 9:00 現在、`subosito/flutter-action` が `Flutter` のバイナリ（？）をダウンロードする部分で問題が起きており、実行ができませんでした😇
https://github.com/subosito/flutter-action/issues/99

おそらく動くはずの設定ファイルを以下のように作りました。上記Issueが解決したらまた確認します。
https://github.com/yu0819ki/flutter-sample-1/blob/feature/add_linter/.github/workflows/ci.yaml

・・・【追記】・・・
上記の件について、解消してました。
解消のPRを見る限り、ファイル置き場が変わったためのようです。
https://github.com/subosito/flutter-action/pull/100/files

解消したのを確認できたので、`GithubActions` の設定ファイルはそのままで、意図的に警告が出るようにしてみたりもしました。
https://github.com/yu0819ki/flutter-sample-1/pull/2/checks?sha=e50413b5ea01f112f39baf0b188f3d2c28accc39

## つぶやき
`pedantic_mono` だけを導入すると、以下のような警告が出たんですが、 `pedantic` も導入することで警告が消えました。
初心者からすると「それも要るんかい。依存で解決されないんかい。」って感じです。
![スクリーンショット 2021-06-02 7.30.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26501/19731e42-b3a3-72ce-8f11-c887b18cb1ca.png)
BastilleBSDで開発環境を作ってみた

ホストでビルドしていると、いろいろパッケージを入れてしまって、妙な依存などが発生してしまう可能性もあり、できるだけクリーンなシステムでビルドすることで再現性を高めたい。そのためjail下にビルド環境を作ってみる。

以前勤めていた会社にもjailを使った開発環境がありました。

昨今は何はなくてもgitなので、gitのpkgをjailにインストールします。

```
% sudo bastille pkg testjail install git 
```

BastilleBSDにはtemplateという機能があって、定型の処理を記述する事ができます。この機能でアカウントを作ってみます。

/usr/local/bastille/templatesの下にdevelop/setupというディレクトリを作ります。

この中にアカウント作成のためにBastillefileというファイル名で以下の内容を書きます。

```
CMD pw useradd -n hiroki -g wheel -s tcsh
CMD mkdir /home/hiroki
CMD chown hiroki /home/hiroki
```

jailに反映します。

```
% sudo bastille template testjail develop/setup
```

templateは一つのファイルにまとめて書くこともできるようです。

アカウントが作られたので、そのアカウントでjailに入ります。

```
% sudo bastille console testjail hiroki
```

sshdを立ち上げて、authorized_keysを置いておいてsshで入る方法もあります。

```
# sudo bastille sysrc testjail sshd_enable=YES
```

FreeBSDの使い方のメッセージを出さないようにするのは以下でできました。

```
> touch .hushlogin
```

FreeBSDのソースツリーとZRouterを拾ってきてビルドしてみました。

```
> git clone -b releng/12.3 --depth 1 https://git.freebsd.org/src.git src
> mkdir obj
> git clone -b yamori813_modify https://github.com/ZRouter/ZRouter.git
> cd ZRouter
> ./menu.sh
```

便利です。

後から気が付いたのですがgitはtemplateのBastillefileにPKGで書いておけば勝手にインストールされます。