OmniAICreator/Qiita-1.07M huggingface dataset:
N-ISUCONを支えた技術

この記事は [NTTコミュニケーションズ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/nttcom)の1日目の記事です．

## はじめに
大昔に1度投稿したきり，お久しぶりななおすけです．
気がついたら就職をして，とある会社でお世話になっています．
最近はESXiと戯れながらRubyを書く仕事をしています．

さて，本記事はN-ISUCONの運営を支えた技術について解説します．
これまで，社内ISUCONの問題公開はあっても，裏側の話はあまり見かけなかったので書いてみました．

N-ISUCONについて知りたい方は[こちら](https://developer.ntt.com/ja/blog/31e9fb86-7309-4145-a72b-0ea5f17e3f5a)の記事を参照ください．

## N-ISUCONのアーキテクチャ
### 競技VMの構成

競技者には，リソースとして下図のようなGCE上のVM(競技VM)が3台提供されていました．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13279/a04c3c7c-46b0-80cc-6b74-a982b132d0cc.png)
初期状態として，下記のソフトウェアがインストールされています．

- Apache HTTPD Server
- MySQL
- 問題実装の言語やそのライブラリ
    - Python3
    - Ruby
    - NodeJS
    - Golang

構成としてはシンプルなWebAppサーバですね．
ゴールデンイメージはAnsibleを使って構築，プロビジョニングはTerraformを使っています．

### 全体的なアーキテクチャ

N-ISUCON全体のアーキテクチャはこんなかんじです．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13279/76c41c96-4b00-bba2-102c-b4e117304c25.png)

構成要素としては競技VM以外に下記のVMがあります．

- Portal (1台)
    - 競技者向けのログイン情報やサーバIP情報の掲載，ベンチマークリクエストなど
    - Sinatraを動かす程度なのでそこまで強くない
- Benchmark (複数台)
    - 競技VMに対してベンチマークをかけるVM
    - 割とコア数/メモリをマシマシにした強いインスタンス

それぞれのVMはCloudSQLとCloud Memorystoreのメッセージキューを使ってデータをやり取りしています．
また，ベンチマーク結果のスコアはFirebaseに投げ込み，ほぼリアルタイムにグラフ化をしました．

GCPに思い切り寄せて構築した理由として，[今年度の新卒社員研修](https://developer.ntt.com/ja/blog/7bd554e6-30df-4c33-9e94-7e4202bdf2c0) のIaaSワークショップでの知見を活かしたためです．
技術的な運営は5人であったため，使える資産をうまく再利用しています．

## App開発の流れ
### PostmanとPythonによる先行実装
まず，[Postman](https://www.getpostman.com/) を使ってエンドポイントを確定しつつ，Pythonによる実装を行いました. 

Postmanは，オンラインでテストが共有できるので便利でよかったです．
![postman](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13279/425a80e4-054e-c253-36f6-50ef70bc2f83.png)

### 複数言語への対応
PostmanとPythonの実装が終わると，そのコードに基づいて複数言語への対応を行なっていきました[^python]．

ディレクトリ階層はこんなかんじ．
![resize.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13279/3e320f3c-e8a9-95e3-0b4b-b20f0fd59668.png)

言語毎にディレクトリを切ってそれぞれのディレクトリ内で開発を進めています．
各言語でDockerfileを作り，`docker-compose.yaml` を作っています．
これにより，簡単に開発アプリを立ち上げられるようになっています．

開発した機能については，docker-composeでアプリを立ち上げた後，Postmanを使ってテストを行なっています．
おおよそ通るのですが，稀によくPostmanのオンライン同期が壊れてしまうため，その他いろいろとまとめて直す羽目になったりもしました．

APIテストが通ると，PullReqとレビューを通してMergeされる仕組みになっています．
とあるプルリクのレビュー風景はこんな感じです．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13279/b161b571-ef8a-f4c9-fee3-1b457121d3da.png)


[^python]: Pythonのバグに気づかず，全言語に同じバグが入ってしまういい話があったりもしました．

## おわりに

社内ISUCON "N-ISUCON" の運営/実装の裏側について簡単に紹介しました．
本当は問題公開もこのタイミングでしたかったのですが，間に合いませんでした. ゴメンネ[^end]．

そんなわけで，明日は @iwashi86 さんの記事です．
N-ISUCONの話を引き続きしていただけると聞いています．
お楽しみに!

[^end]: 障害対応で急遽夜勤が入ってしまった
CSSで三角形を作る [border編]

三角形の作り方は、調べた限りだと2通りの方法がある。

- borderを利用する
- rotateする
    - qiitaのタグなんかはこの方法
    - ここの左側部分ね↓
    - ![pagu_o28 - Qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233666/bf139905-fb6a-36c9-fb51-3d35a96923f1.png)


今回はborderで作る方法を紹介します。

## borderで作る

**ポイント**
borderのtop, right, bottom, leftの境目は賞状を入れる額縁のようになっている。
この性質を利用して三角形を作る。

borderの境目は、こんな感じで斜めになっている。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="ckona" data-slug-hash="zYxOrRV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="triangle1">
  <span>See the Pen <a href="https://codepen.io/ckona/pen/zYxOrRV">
  triangle1</a> by ckona (<a href="https://codepen.io/ckona">@ckona</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



上記の `width` と `height` を `0px` にして、`border-width` を大きくしたものが下記。


<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="ckona" data-slug-hash="WNbewGP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="triangle2">
  <span>See the Pen <a href="https://codepen.io/ckona/pen/WNbewGP">
  triangle2</a> by ckona (<a href="https://codepen.io/ckona">@ckona</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

あとは、 不要な場所のborder-colorを transparentなり背景色と同色なりに設定してあげれば、三角形の完成。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="ckona" data-slug-hash="ExaYKQN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="triangle3">
  <span>See the Pen <a href="https://codepen.io/ckona/pen/ExaYKQN">
  triangle3</a> by ckona (<a href="https://codepen.io/ckona">@ckona</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 応用

これを応用すれば草を生やすこともできる。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="ckona" data-slug-hash="ZEYzWeY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="grass">
  <span>See the Pen <a href="https://codepen.io/ckona/pen/ZEYzWeY">
  grass</a> by ckona (<a href="https://codepen.io/ckona">@ckona</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



## 参考

- http://www.htmq.com/style/border.shtml
    - ドキュメント的なやつ
- https://www.granfairs.com/blog/staff/make-triangle-with-css
    - めっちゃわかりやすい
- https://qiita.com/Qiita/items/edae7417214c8e957f54
    - Qiita記事にCodePenを埋め込む方法
ECRからのCodePipelineが走らなくなってた話

ECRへのプッシュをトリガーにpipeline回したいけど、なんでかわからん、って話があって、下記の手順で検証してみます。

https://docs.aws.amazon.com/ja_jp/codepipeline/latest/userguide/create-cwe-ecr-source-console.html

1. ECRにレポジトリ作る
2. CodePipelineのSourseをECRにする
3. （その他も設定）
4. ECRにイメージをpush
5. Pipeline回らない

ほー。確かに。

# 検証内容

## Source

![スクリーンショット 2019-11-30 0.06.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308709/d0368182-98eb-a0ba-9784-739fed5af0c4.png)

## ECR push

```
$ $(aws ecr get-login --no-include-email --region ap-northeast-1)
$ docker build -t otafuku .
$ docker tag otafuku:latest 1234567890.dkr.ecr.ap-northeast-1.amazonaws.com/otafuku:latest
$ docker push 1234567890.dkr.ecr.ap-northeast-1.amazonaws.com/otafuku:latest
```

![スクリーンショット 2019-11-30 0.12.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308709/188a47d1-3301-4756-9162-7fc44019e721.png)

pushできてる

## 回らない

![スクリーンショット 2019-11-30 0.15.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308709/8d270ff6-0f7c-6333-8334-1e71996f11b7.png)

（※失敗してるのは単にイメージpush前だったからで、今回はpushしても回っていないという事象）

# なぜだろう？

どうやらECRにpushされた時にはCloudTrailで **PushImage** ってイベントがキャッチされてCloudWatch Ruleからpipelineがキックされるらしい。

push -> CloudTrail -> cloudWatchRule -> pipeline

Ruleはcodepipelineを作った時に作成されてる。今回の場合はこんな感じ。

![スクリーンショット 2019-11-30 0.20.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308709/51b7f2f9-468b-b860-b9d1-cea93c7a2990.png)

## 試しにターゲットにSNSを追加してみたりしつつ検証してみる

![スクリーンショット 2019-11-30 0.22.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308709/5d588979-6fd1-0ada-4e3c-edf0b396edbb.png)

**しかし・・**

**・・う、動かない。メールも飛ばない**

# そして判明？!

CloudWatch Ruleのカスタムイベントパターンの構築で、ECRソースのECR Image Actionってのを選びつつ、自分で項目埋めてみたところ機能しました。（判明まで半日かかった。。）

![スクリーンショット 2019-11-30 0.26.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308709/76cb57f1-b0c7-e409-9484-d66b9b7834a0.png)

![スクリーンショット 2019-11-30 0.32.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308709/73845b82-f40f-7bcd-a3c6-a2bd36dc794a.png)

**解決！**

ちなみにイベントはこんな感じで飛んでくるらしい

```
{
  "account": "123456789012",
  "detail": {
    "action-type": "PUSH",
    "image-digest": "sha256:f98d67af8e53a536502bfc600de3266556b06ed635a32d60aa7a5fe6d7e609d7",
    "image-tag": "latest",
    "repository-name": "ubuntu",
    "result": "success"
  },
  "detail-type": "ECR Image Action",
  "id": "4f5ec4d5-4de4-7aad-a046-56d5cfe1df0e",
  "region": "us-east-1",
  "resources": [],
  "source": "aws.ecr",
  "time": "2019-08-06T00:58:09Z",
  "version": "0"
}
```

それをこんな感じで拾う

```
{
  "source": [
    "aws.ecr"
  ],
  "detail-type": [
    "ECR Image Action"
  ],
  "detail": {
    "action-type": [
      "PUSH"
    ],
    "image-tag": [
      "latest"
    ],
    "repository-name": [
        "ubuntu"
    ]
  }
} 
```

#余談

これ、関係あるんじゃないかなぁ。

[Amazon Elastic Container Registry での EventBridge サポート](https://aws.amazon.com/jp/blogs/news/eventbridge-support-in-amazon-elastic-container-registry/)

なんか今回に絡むあたりがアップデートされてる。codepipeline構築時に作られるイベントに影響でちゃってるとか？？
ssh鍵の作成先ディレクトリで若干詰まった話

# 目的

- ssh鍵の作成先ディイレクトリが`~/.ssh`直下ではなく`/root/.ssh`になってしまい困った話をまとめる

# 原因

- 完全な自分の勘違いである。
- ssh鍵を作成するコマンド実行時に`sudo`をつけてしまっていた。
- sudoが付いているので`/root`直下に鍵を置こうとしてしまうらしい。

# 結論

- 鍵作成を行うコマンドは下記である。それ以上でもなければそれ以下でもない。

    ```
    $ ssh-keygen -t rsa
    ```

# 詰まった内容

- 下記コマンドを実行したが`~/.ssh`直下に鍵を作ってくれない。

    ```
    #下記は間違えているコマンドである
    $ sudo ssh-keygen -t rsa
    ```

- 鍵が`/root/.ssh`直下に作成されてしまう。
- 鍵作成時に格納先を指定するもfailedと言われる。

# 解決方法

- 鍵作成コマンド実行時はsudoはつけない。
- ssh鍵を発行したいユーザにログインして下記コマンドを実行する。

    ```
    $ ssh-keygen -t rsa
    ```
Raspberry Pi 4が起動しない（モニタが映らない）場合の設定方法

# Raspberry Pi 4を起動したら途中でモニタが映らなくなる
　ラズパイ4を入手して、喜び勇んで起動しようとしたら、モニタが映らなくてションボリしました。

![rp4_monitor_01.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81919/fb223455-c9f5-870b-2966-25a99c948c5b.jpeg)
　一瞬映るけど

![rp4_monitor_02.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81919/8d8f9885-5031-1104-7c00-cb2df105587d.jpeg)
　すぐ「No Signal」

　ちなみに、ラズパイ3だと、同じモニタでちゃんと起動していました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">有休とって、ラズパイ4をいじろうとしたら、ラズパイ4が起動しない…正確には、最初のラズパイマークが出るけどすぐNo Signal…同じSDカードでラズパイ3だと起動するのに。OSはRaspbianの2019-09-26のやつ。何か基本的なこと間違えているのかしら？ <a href="https://t.co/YpVuUQHKv2">pic.twitter.com/YpVuUQHKv2</a></p>&mdash; からあげ (@karaage0703) <a href="https://twitter.com/karaage0703/status/1200227892010967040?ref_src=twsrc%5Etfw">November 29, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# モニタを変えたら写った
　Twitterで「モニタを変えて見たほうが良い」という貴重なアドバイスをいただいたので、モニタを変えたら映りました。

![rp4_monitor_03.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81919/18eaa822-65cf-17a4-acec-983342d79c8c.jpeg)

# 設定を変えたら写った
　ラズパイのSDカードの `/boot/config.txt` を修正すると映るという情報がネットでいくつかあったので、試して見ました。`/boot/config.txt`は、ラズパイが起動しなくても、SDカードリーダーでSDカードを読み込めば、PCから編集できます。

　色々試したのですが、結局以下の通りにすると映りました。

```
hdmi_safe=1
```

　上記の設定は、一番モニタにとって安全（？）な映りやすい設定のようです。具体的には、`hdmi_safe=1`の設定をすると、以下の設定がされるようです。

```
hdmi_force_hotplug=1
hdmi_ignore_edid=0xa5000080
config_hdmi_boost=4
hdmi_group=2
hdmi_mode=4
disable_overscan=0
overscan_left=24
overscan_right=24
overscan_top=24
overscan_bottom=24
```

　モニタの見え方がイマイチだなーと思ったら、公式の以下の情報を元に調べて調整しましょう。

[Video options in config.txt](https://www.raspberrypi.org/documentation/configuration/config-txt/video.md)

　特に、重要な設定は、以下あたりですね。

```
hdmi_force_hotplug
hdmi_group
hdmi_mode
```

# まとめ
　ラズパイ4が起動しなくてがっかりしている人が1人でも救えれば良いなと思い、急いで書きました。間違いや、更なる良い情報ありましたら、優しく教えていただけましたら幸いです。編集リクエスト歓迎です。

　また、ラズパイ4でディープラーニング環境含めたセットアップ方法をブログ記事にまとめていますので、よろしければこちらもご覧ください。

https://karaage.hatenadiary.jp/entry/rpi4-dl-setup

# 参考リンク
https://www.raspberrypi.org/forums/viewtopic.php?t=244431

https://zenn.dev/karaage0703/articles/04ca258a89a50e
[UE4] Device Output Logでデバイス向け開発を快適に 

デバイス向けコンテンツを開発する上で非常に便利な機能として、Device Output Logウィンドウ機能があります。この機能は、各種コンソールゲーム機やモバイル端末といったデバイスのログ情報を取得したり、UE4のデバッグ用コマンドを送ることができます。通常、各種デバイスで異なるツールが必要になりがちですが、こちらを利用することでUE4上から同一のUIでログ取得や各種コマンドを送ることができる利点があります。

# 使用方法
[ウィンドウ] > [デベロッパーツール] > [デバイスアウトプットログ]で表示を行うことが出来ます。
![2019-11-30_00h03_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/9def162c-ece0-8def-eeba-9ccf8901e95e.png)

ウィンドウが表示できたら左下のデバイス選択画面で通信を行いたいデバイスを選択します。これで使用可能な状態です。
![2019-11-30_00h07_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/94e097d8-41b7-d4db-fc4e-1ffa25de83e4.png)

ToggleDrawEventsやStat unitといったUE4のデバッグコマンドを補完付きで入力でき、実機での実行が可能となっています。
![2019-11-30_00h15_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/3bf2e814-a64b-eb36-1470-d537f6c526d1.png)
![2019-11-30_00h19_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/45e54377-7dcb-fff0-5eac-2fcafc492673.png)

# おわりに
色々なデバイスで開発を行う場合にDevice Output Logはすごく便利です。
有効活用して開発に活かしてください！
都道府県を地方ごとに出力をした（改善版）

#はじめに
前回こちらの記事[都道府県を地方ごとに配列を組みかえてみた](https://qiita.com/keisei_otsuka/items/51479e046b7dd488adb2)を投稿させていただいたのですがあまりにもコードが長く単調なものだったので会社の上司にリファクタリングしてもらい、ちょっと自分でもいじってリファクタリングしてみた。

```html:area.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/style.css">
  <title>地方ごとにタイトルを出力</title>
</head>
<body>

  <div class="container">

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="/js/area.js"></script>
</body>
</html>
```

```json:area.json
[
  {
    "hoge": "田中",
    "title": "",
    "image": "",
    "parent_category": "architecture",
    "category_slug": "production",
    "address": "北海道",
    "link": "",
    "topics": "0"
  },
  {
    "hoge": "山田",
    "title": "",
    "image": "",
    "parent_category": "civil",
    "category_slug": "train",
    "address": "北海道",
    "link": "",
    "topics": "0"
  },
  {
    "hoge": "池田",
    "title": "",
    "image": "",
    "parent_category": "civil",
    "category_slug": "architecture",
    "address": "北海道",
    "link": "",
    "topics": "0"
  },
{},
{},
{},
{}
]

```

```javascript:area.js
$(function(){
  const region_prefs = {
    北海道地方: ["北海道"],
    東北地方: ["青森県", "岩手県"],
    関東地方: ["茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "神奈川県", "東京都"],
    中部地方: ["新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県"],
    近畿地方: ["三重県", "滋賀県", "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県"],
    中国地方: ["鳥取県", "島根県", "岡山県", "広島県", "山口県"],
    四国地方: ["徳島県", "香川県", "愛媛県", "高知県"],
    九州地方: ["福岡県", "佐賀県", "長崎県", "熊本県", "大分県", "宮崎県", "鹿児島県", "沖縄県"]
  };

  Object.keys(region_prefs).forEach(function (region) {
    $(".container").append(
      `<section data-region="${region}"><h3>${region}</h3><ul class="entries" /></section>`
    );
  });

  $.ajax({
    type: "GET",
    url: "/json/area.json",
    dataType: "json",
  })
  .done(function (data) {
    $.each(data, function (index, value) {
      Object.keys(region_prefs).some(function (region) {
        if (region_prefs[region].includes(value.address)) {
          $(`[data-region='${region}'] ul`).append(`<li>${value.title}</li>`);
        }
      });
    });
  }).
  fail(function () {
    window.alert("通信に失敗しました")
  });
})


```

#改善ポイント
- 前回都道府県の配列の初期化で長文で書いていたものを連想配列でまとめた。
- 連想配列のキーを使い
- 連想配列にまとめたことで前回の長いif文まとめることが出来た。
- htmlも長かったのでsectionに地方ごとのdataを持たせてこちらも動的に生成するようにした。
- some関数を使った。

#結果
jsのコード量も半分以下になった。section以下を動的に生成できるようになった。

#まとめ
まとめられるところを探す癖をつけるのが大事なんだと再確認出来ました。
画面項目表示時OBLIGATORYとUSER-COMMAND

画面の必須入力項目のチェックをスキップして画面の指定動作に入る。
screen-required = '2'

* データ定義

DATA: GV_BELNR TYPE BKPF-BELNR,
          GV_VBELN TYPE VBAK-VBELN.

SELECTION-SCREEN BEGIN OF BLOCK B1 WITH FRAME TITLE TEXT-001.
  PARAMETERS: P_BUKRS TYPE BKPF-BUKRS OBLIGATORY MODIF ID ty0.
  SELECTION-SCREEN SKIP 1.
  PARAMETERS: P_STDATE TYPE DATUM OBLIGATORY MODIF ID TY0.
  SELECTION-SCREEN SKIP 1.
  PARAMETERS: P_STTIME TYPE TIME OBLIGATORY MODIF ID TY0.
  SELECTION-SCREEN SKIP 1.
  PARAMETERS: P_CDT AS CHECKBOX USER-COMMAND FLAG.
  SELECTION-SCREEN SKIP 1.
  PARAMETERS: P_EDDATE TYPE DATUM  MODIF ID TY1 OBLIGATORY.
  SELECTION-SCREEN SKIP 1.
  PARAMETERS: P_EDTIME TYPE TIME  MODIF ID TY1 OBLIGATORY.
  SELECTION-SCREEN SKIP 1.
  SELECT-OPTIONS: P_BELNR FOR GV_BELNR.
  SELECTION-SCREEN SKIP 1.
  SELECT-OPTIONS: P_VBELN FOR GV_VBELN.
SELECTION-SCREEN END OF BLOCK B1.

AT SELECTION-SCREEN OUTPUT.
  LOOP AT SCREEN.
    CASE SCREEN-GROUP1.
      WHEN 'TY0'.
        screen-required = '2'.
      WHEN 'TY1'.
        screen-required = '2'.
        IF P_CDT = 'X'.
          SCREEN-ACTIVE = '0'.
        ENDIF.
    ENDCASE.
    MODIFY SCREEN.
  ENDLOOP.
  AT SELECTION-SCREEN.
  CLEAR sy-ucomm.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473735/81fd6e2f-4fda-0696-cc69-bf5f7d44aec0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473735/11c17306-7a26-8928-e040-57f85ca949e3.png)
[はじめてのiOSアプリ]xcodeで地図アプリを作成（その５）

# はじめに

iOSアプリを作ってみたいけど
何から始めて良いのかわからない

とりあえず、
「やってみました」記事を参考に
地図アプリを真似てみようと思う

という記事の５回目です。

今回は、アプリケーションアイコンを設定します。

# アイコン画像作成
1. センスのある人はカッコよく、センスのない人はそれなりの画像を作成
   - はい「それなりの画像」ができました（png形式）<br>
![shinobee-sky-276px.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521802/62d6a40e-08df-7457-a83e-ffe49242f3eb.png)
   - 【なぜ？】
     - Simulatorに表示されるアプリケーションアイコンが、あまりにもカッコ悪いから変えたい（笑）<br>
<img width="535" alt="SimulatorIPhone.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521802/e9d0dae3-749a-95ae-309f-675d00b1ada4.png">
1. いろいろなサイズを用意
   - Xcode のファイルツリーから [Assets.xcassets]-[AppIcon]を選択して表示される画面に書かれているサイズの画像を用意する<br>
<img width="1316" alt="ApplicationIcon.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521802/796efe53-c3dc-b66f-3e8d-eddd0ebc0acd.png">
   - 作成した<br>
<img width="1013" alt="IconFiles.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521802/845a5512-0428-a428-dc09-4d2942f5fc99.png">
   - 【なぜ？】
     - Xcodeの[AppIcon]画面には、いくつものサイズのアイコンを配置することができるから
     - 全部必要なのかわからないけど、できるだけ作成
     - ひとつ作って、プレビューアプリのツール機能を使えば簡単にサイズ違いを作成できるよ
     - サイズがわかりやすいようなファイル名を使用
     - なお、最大サイズ 1024x1024 は用意しなかった
1. ファイルをxcodeの画面にドラッグ＆ドロップ<br>
<img width="1316" alt="ApplicationIconSet.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521802/21ada29c-4961-726a-a658-44d0dce73bbb.png">
   - 【なぜ？】
     - これでxcodeに登録される
     - ファイル名からサイズがわかるようにしたのは、我ながらGoodでした
     - なお、サイズ間違いだと警告表示される
1. テスト実行
   - Xcode 左上の矢印アイコンをクリック
   - アプリを終了して、アプリアイコンを確認<br>
<img width="535" alt="SimulatorIPhoneChanged.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521802/faacec28-c8e9-56c8-35a5-16b07efd15d9.png">


# 今回の到達点
- アプリケーションアイコンが「それなり」になった

# 連載
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その１：プロジェクト作成）](https://qiita.com/shinobee/items/1f6d26451336bf736484)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その２：地図表示）](https://qiita.com/items/50e1acee3024c3e26fb9)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その３：位置情報取得）](https://qiita.com/items/b8d287d2e34af20aab64)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その４：位置情報と連携した地図表示）](https://qiita.com/items/a91c49ebf5301d936120)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その５：アプリアイコン設定）](https://qiita.com/items/24804294ab86635ee5d3)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その６：拡大・縮小ボタン追加）](https://qiita.com/items/12c54c4e253bc48cad4d)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その７：地図を拡大・縮小）](https://qiita.com/items/4406c4fdf2fbdcc40533)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その８：地名表示）](https://qiita.com/items/3363779d0ea11ca6073c)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その９：ソースコード管理）](https://qiita.com/items/d0e63020b0dce4c70542)

<!-- eof -->
[UE4] Mobile PIE機能で簡易的な描画領域チェック

この記事では、Mobile PIE機能について紹介していきます。
モバイル端末ではノッチや画面比率など様々な描画領域の条件が違うケースがあります。
このプレビュー機能を使用することで簡易的に確認をおこなうことが出来ます。
以下はiPhone XSをターゲットでプレビューを行ってます。
![2019-11-29_23h38_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/5f86c107-dbc4-355b-ca17-8623dda66a9f.png)

# 設定方法
この機能はEditor Preferenceの実験段階からEnable Mobile PIEを設定することで使用できるようになります。
![2019-11-29_23h31_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/8e83ae82-b481-de31-dddf-e0c2e59378c2.png)



# 使用方法
PIE実行横の▼を押すとMobile Preview(PIE)が選べるようになっているので、対象の機種を選択するとプレビュー実行が行われます。
![2019-11-29_23h40_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/aa13def6-e35e-5823-3f6f-54f0fad94478.png)

# おわりに
あくまで簡易的なプレビューなので実際の見え方やパフォーマンス評価は実機で行う必要があります。
AIによるエアコン管理

エアコンをAIでコントロールするのはバイメタルの昔からありましたが、AIでちゃんとやってみたかったので作りました。

作ってみて思うのは、ぼろい調整ダイアル付きの旧型エアコンでもなんでも乗りこなしてしまう能力があるということです。

熱伝導、対流解析的なインプリをすべてスキップする気持ちよさがあります。ボストンダイナミクスが運動方程式を解いていないような感じです。

壁の薄さ、隙間風、さまざまもろもろの非線形性をすべてカバーし、設置サイトの特性を簡単なメカニズムで学習します。

あと、Plotlyは現状では３Dをもっとも簡単にきれいに表示できるのではないでしょうか？

サイト
https://randomwalkjapan.blogspot.com/2019/11/aiexperiment-temperature-control-by-ai.html


プログラム
https://github.com/tanakayutaka/Tensorflow.js-tools-/blob/master/index%20-%20air%20conditioner%20demo%20program%20with%203d%20plot%20-%20%20ploty.html
生成したjarファイルをEclipseでデバッグする方法


※Eclipse英語版が前提です。Pleiadesなど使っている場合は、適宜日本語に読み替えてください

#jarファイルをブレークポイントを使ってデバッグしたい場合の方法

## Eclipse側の設定
プロジェクトのフォルダ上で右クリックして、
Debug As > Debug Configurations...を選択

![スクリーンショット (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501968/2ef72079-dd8d-55ce-94d3-71b1bcb4809f.png)

Remote Java Applicationsでダブルクリック
設定画面が開くので、Host:localhost port:任意のポートで設定を保存
![スクリーンショット (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501968/00810a82-a6f3-da8a-cf94-f657e9e3de18.png)

## jarファイル側の起動設定

`java -Xdebug -Xrunjdwp:transport=dt_socket,address=[上記設定で指定したポート],server=y,suspend=y -jar [JAR名]`

でjavaファイルを起動
すると、jarファイル側が待機状態になる

再び、先ほどのDebug Configurationsを開き、「Debug」のボタンを押下
![スクリーンショット (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501968/00810a82-a6f3-da8a-cf94-f657e9e3de18.png)

すると、jarファイルがデバッグ起動されてブレークポイントも自由自在に扱えるように！
iOS13のPopoverにつまずいた

# はじめに
iOS13 で Popover 表示すると一部の画面で下記の左のような表示になることがありました。

（表示している文言に特に意味はありません）

| 現実 | 理想 |
| --- | --- |
|<img width="235" alt="before" src="https://user-images.githubusercontent.com/34936885/69873929-0d74b680-12fd-11ea-8007-301fe45b6384.png">|<img width="235" alt="after" src="https://user-images.githubusercontent.com/34936885/69873940-19607880-12fd-11ea-88fe-b46cb6fc7b70.png">|

右のような表示になってほしいのになぜかラベルが見切れてる

# 対応
表示がおかしい！！と思いましたが私は事前に情報を仕入れていたので「ハッハーン Safe Area やな？」とすぐに対処できました。

[20190920 iOS 13 対応ではまった話](https://speakerdeck.com/itok/20190920-ios-13-dui-ying-dehamatutahua?slide=21)

下記のようにラベルの Auto Layout の Leading の設定が Superview になっているので Safe Area に修正します。

<img width="300" alt="layout" src="https://user-images.githubusercontent.com/34936885/69874279-e79be180-12fd-11ea-8388-3c10e3c32bd8.png">

Safe Area に修正すると理想通り表示されます。

# 原因
こちらのスライドによると

[20190920 iOS 13 対応ではまった話](https://speakerdeck.com/itok/20190920-ios-13-dui-ying-dehamatutahua?slide=27)

ViewController のサイズが今までは吹き出しを含めない大きさだったのが、吹き出しを含めるようになり Leading などを Superview に合わせてしまうと吹き出し分はみ出てしまうようです。

# さいごに
Auto Layout を設定する際、適当に上下左右全部 0 とつけるとどこかが Safe Area じゃなくて Superview になっていることがよくあるので気をつけましょう:grimacing:
シェルスクリプト シェル関数

グループコマンド {} の前に <b>関数名()</b> を付けると、シェル関数として
関数を定義できる。

```bash:shell-func.sh
func()
{
  echo "This is a function."
}
func
```

##### 再帰呼び出し
再帰呼び出しを使って、階乗を求める。

```bash:recursion.sh
recursion()
{
  if [ "$1" -le 1 ]; then
    echo 1
    return
  fi
  n=`expr "$1" - 1`
  n=`recursion "$n"`
  expr "$n" \* "$1"
}
recursion "$1"
```

```bash:recursion-result
$ ./recursion.sh 2
2
$ ./recursion.sh 3
6
$ ./recursion.sh 5
120
```
Blender トラブルシューティング

#はじめに
自分用のトラブルシューティング記録です。解決したら追加する。

# 【2.8~】ビューポートでの色味がおかしい
全体的に色が濃いなど、色味がおかしい場合、レンダープロパティのカラーマネジメントから表示デバイスを切り替えると治る。画像では「なし」から「sRGB」にすることで改善。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519490/d8ab2885-6f6f-ae9c-c714-5f719713b663.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519490/09865d06-e61e-6af6-99d7-653cb41d4b66.png)

# 【2.8~】Blender 2.79 から 2.8に移行したときに、2.7で非表示にしていたオブジェクトが表示されない。
アウトライナーエディタで、漏斗のマークを選択し、制限の切り替えでオンになってないやつをすべてオンにすると操作できるようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519490/a7905dc8-c0ee-ed89-5e24-028016776607.png)

# 【2.8~】アーマチュアの見た目の変更する箇所
アーマチュアの見た目を変更する場所はなんと３か所ある。
ひとつめはオブジェクトデータプロパティのビューポート表示
ふたつめはボーンプロパティのビューポート表示
みっつめはオブジェクトプロパティのビューポート表示
AWS CLIでMFAトークンを使用してAPI実行するメモ

# 前提
- IAMユーザーを作成済であること
    - プログラムからアクセス
    - 仮想MFAを設定済み（ARNを控えておく）
    - 以下のポリシーをインラインポリシーで設定済み

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllDenyWithoutMFA",
            "Effect": "Deny",
            "Action": [
                "*"
            ],
            "Resource": [
                "*"
            ],
            "Condition": {
                "BoolIfExists": {
                    "aws:MultiFactorAuthPresent": false
                }
            }
        }
    ]
}
```

# コマンド例

以下で一時クレデンシャルを取得可能

```
% aws sts get-session-token --serial-number [MFAのARN] --token-code [MFAトークン]
```

# メモ

- 上記「前提」記載の通り、 `get-session-token` の実行にはいかなるIAMポリシーも不要
    - ただし、 `get-session-token` で取得した一時クレデンシャルを用いた時に実行できるのは上記ポリシーで許可された操作だけなので、一時クレデンシャルを用いて実行したい操作はあらかじめポリシーで許可する必要がある

> また、IAM ユーザーは、一時的セキュリティ認証情報を作成するために GetSessionToken を呼び出すこともできます。ユーザーが GetSessionToken を呼び出すためには、アクセス権限を必要としません。このオペレーションの目的は、MFA を使用してユーザーを認証することです。認証を制御するためにポリシーを使用することはできません。つまり、IAM ユーザーが GetSessionToken を呼び出して、一時的な認証情報を作成することを回避することはできません。
https://aws.amazon.com/jp/premiumsupport/knowledge-center/authenticate-mfa-cli/
[UE4] MaterialやBlueprintのノード整理ショートカットについて

この記事ではUnrealEngineのエディターで扱うMaterialやBlueprintのノード整理を行うためのショートカットについて紹介します。
単純ですが、どれか一つでも覚えておくとノードの整理を行うのに非常に便利です。

# おすすめのキーは「Q」の直線化
選択したノードを直線に並べてくれます。
![QkeyMaterial.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/65f90a96-168f-5d2c-a7c5-b4c03a257063.gif)

実際は、並べたいものを個別に選択して並べていくことになるかと思います。
<img width=600 alt="QkeyMaterialAll.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/cd888169-5b36-97f3-4587-f34ca13a596d.gif">
# その他のノード整理用ショートカット
その他のおすすめとして、Shift+ASWDのキーでノードの端で揃える事が可能です。
似ているのでShift+AとShift+Wだけでも覚えておくと便利です。

## Shift + A
ノードを左部に合わせて揃えます。
![ShiftA.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/a8f2c8a4-3951-3230-70c3-091e197a9158.gif)

## Shift + W
ノードの上部に合わせて揃えます。
![ShiftW.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/037f88be-bd3c-6db6-46e2-8e3a6498f0ad.gif)


## おわりに
日々ノードを整理して、あとで見たときに分かりやすいように置いておきましょう！
jQuery基本　１

#はじめに

この記事は、2019/11/1からプログラミング学習を始めた学生がプロのプログラマーになるまでのアウトプットする為の書き込みの場である。

##jQueryよく使うセレクタ
- IDセレクタ
 - HTML要素のid属性で指定するセレクタのことで、id属性の値に#をつけたものです
- クラスセレクタ
 - HTML要素のclass属性で指定するセレクタのことで、class属性の値に.（ドット）を付けたものです
- 要素セレクタ
 - h1やpのようなHTML要素を対象としたセレクタのことで、要素名をそのままセレクタとして利用します
- 属性セレクタ
 - HTMLのタグの属性値を指定したい場合、$("[ 属性 = '値' ]")で属性セレクタを取得できます
- セレクタについてわかりやすいページ[リンク](https://www.htmlhifive.com/conts/web/view/study-room/selector#:~:targetText=%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%EF%BC%88CSS%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%EF%BC%89%E3%81%AF%E3%80%81,%E7%9B%AE%E7%9A%84%E3%81%A7%E3%82%82%E4%BD%BF%E3%82%8F%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82)

##クリックイベント
- クリックした時に起こる動作
- クリックイベントの取得はclick()を使用します
- JavaScriptの場合、eachで一つずつ取り出していたが、jQueryの場合は、セレクタを指定すれば、クリックした値の要素を取り出してくれる為、コードが短い！！

##クラスの操作
- クリックしたタブのクラスを削除する
 - removeClass()
 - JSとの違い、JSの場合[0]のような指定が必要でしたが、JQの場合最初のヨウ素を指定してくれるので指定しなくて良い
- クリックしたタブにクラスを追加
 - addClass()
 - addClass()もremoveClass()と同様に[0]と要素を指定する必要がありません
- 配列に変換する必要がなくなる
 - index()
 - 集合したDOM要素から引数に指定したDOMと同じ要素番号を戻します
- eq()
 - 引数に要素番号を取り、集合したDOM要素から選択できます

##今日の感想　明日から
アウトプットは、復習しながら自分の学んだ内容を整理出来るので、アウトプットは、とてもコスパが良い方法なのではないかと思い始めてきました

##終わりに

もっとこうした方が良いよなどご指摘頂けると幸いです
新卒2年目がビジネス的観点を培うためにやっていること

## はじめに
エンジニアは技術的観点はもちろん、ビジネス的な観点を持っていると仕事をする中でもより価値を発揮できるそうです。

ビジネス的観点でも成長するために、少し前まで技術的な方面でしか知識を蓄積していなかった自分がやったこと、やっていることを紹介させていただきます。

## （まだの人：自分の会社の基礎情報を知る）
（自分も）会社のことを体系的には理解できていないなと感じたので、まずはスタートラインに立ちました。
社内のいたるところに散らばっていましたが自分は以下の情報を中心に集めました。

▼ 定性的指標： 会社/事業部/チーム単位でそれぞれ掲げているビジョンやミッション
▼ 定量的指標： 会社/事業部/チーム単位のそれぞれの売上げ/利益、そこから紐づく各種KPI
▼ そのほか　： 各サービスの流れ/他職種の業務フロー/ビジネスモデル


## 会社の客観的な立ち位置を知る
= 自分の会社が注力している業界にはどのような企業がいてどのくらいの売り上げを出しているのか知る

| 使ったもの | ひとこと |
|:--|:--|
| [日経業界地図](https://www.amazon.co.jp/dp/B07WDWVC25/) | 四季報を業界別にわかりやすくまとめてあり、掲載企業と自分の会社の売り上げを比べて大体の業界の中での位置を把握するのに利用しました。 |

## 注力している業界を知る
= ここ数年とこれからの業界の栄枯盛衰を把握する

| 使ったもの | ひとこと |
|:--|:--|
| [業界動向サーチ](https://gyokai-search.com/) | 日経業界地図は一部/直近しかわからなかったので補完するために利用しました。モチベのある人は一次情報集めるのが一番良いかと。 |
| [株マップ.com](https://jp.kabumap.com/servlets/kabumap/Action?SRC=marketIndustry/base) | （同上） |

## 収益方法を知る
= 自分の会社がどういう手段で持ってお金を稼いでいるのか、他の会社はどういう風に稼いでいるのか

| 使ったもの | ひとこと |
|:--|:--|
| [ビジネスモデルナビゲーター](https://www.amazon.co.jp/dp/B01MCRQNBW/) | 世の中のビジネスモデルを55種類に分類して紹介している本です。各特徴を知ることで、自社のサービスに追加で組み込んだらどうなるか考えるなど、自社の事業と向き合う時間が増えました |

## 世の中を知る
= 日本や世界に今何が起こっていてどう相関しているのか

| 使ったもの | ひとこと |
|:--|:--|
| [日経新聞](https://www.nikkei.com/) [^1] | ネットで朝刊/夕刊を見る場合は、紙と同じレイアウトで見ることのできる[ビューアー機能](https://support.nikkei.com/app/answers/detail/a_id/3289/~/%E7%B4%99%E9%9D%A2%E3%83%93%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%BC%E3%81%AE%E9%96%B2%E8%A6%A7%EF%BC%88%E8%A1%A8%E7%A4%BA%EF%BC%89%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E7%9F%A5%E3%82%8A%E3%81%9F%E3%81%84)がおすすめです。自分はiPadにappを入れて見てます。 |


## さいごに
あくまで一個人が模索している段階での範囲ですが、これらを実践した（している）ことによって、前よりも自分の会社や世の中のことがクリアに見えるようになりました。

技術方面の知識だけでなくビジネス方面にも強くなりたいと思っている方の参考になれば幸いです。


[^1]: 社会人なら購読していて当然ではと言われるとぐうの音も出ませんが、、
ngOnInitが動かない

#内容
　angular8でpathに
　/search/:queryと定義して:queryが変わったのに、ngOnInitが動作しない場合の対応

#ダメな時のソース
```ts:ng.ts
ngOnInit() {
    q = this.route.snapshot.paramMap.get('query');
　　//ここでデータを読み込む
    this.service.httpget(q).subscribe( data=>{
       this.data = data;
    }
}
```

#動いたときのソース
```ts:ok.ts
ngOnInit() {
    this.route.paramMap.subscribe(param=>{
       q = param.get('query');
       this.service.httpget(q).subscribe( data=>{
          this.data = data;
       }
    }
}
```
つまり、OnInitでsubcsribeしておいて、変更を取得するということらしい。成程。なんでもsubscribeなんだなあ。デバッグ大丈夫なんかなあ？
【デザイナー職がプログラミングいざ始めようと思って困った話】#1Macとは…

# 初めまして 
どうも初めまして、MUと申します。
ゲーム業界でデザイナー職をやっておりますが、
昔から憧れていたプログラミングの世界に思い切って飛び込んで現在2週間目になります。

この話は

- デザイナー職でプログラミングちょっと興味あるけど難しそう…
- そもそもずっとWindowsユーザーでMAC触った事ないんだけど…

と思っている方に
ちょっとでも参考になれば幸いと思い書いております。

## プログラムの勉強をやりたいと思ったきっかけ

先程書いたように私はデザイナー職です。
物作りが好きな私は、自分だけでも何か動く事を作りたいと思い
過去に参考書の見よう見まねで簡単なスマホゲームを作って動かしてみた事があります。

ただあくまでそれは本のコピーであり、そこからどうやって拡張を行えばいいのか、
分岐を作ればいいのかサッパリ分からず一度挫折しました。
（レベルマックスになったらリセットどうすんの？タイトルに戻したり、シーン遷移はどう追加するの？…とか。

本職のエンジニアさんがスラスラコードを書いて実装をしたり、
便利なツール自作している様を見るとプログラムって本当に魔法だなあと感じます。

本職の方のようにスラスラとコードを書く事は中々難しいかもしれない。
ただこのまま専門の黒魔道士や白魔道士にはなれなくても、
Lv1の赤魔道士ぐらいにはなれないかと思い立ち決心しました。

##初めてのMACbook

何を隠そう昔っからのwindows使い。

プログラミングやるならMACだよという事から、
初めてのMacbookを入手しました。


##そして起こるクリックどないすんねん問題

ピカピカのシルバーの期待にワクワクしながら電源をつけました。
いざMACを触ってみて感じた事…それは






**……………なるほど。分からん**






MAC使いの方には笑われる話かもしれませんが、
それぐらいwindowsをずっと使ってきた身には挙動が衝撃だったのです。

**「右クリックどうすんねん」**
**「Finderとはなんぞ…」**
**「⌘…？」**

WindowsとMACはキーボードの配列や操作感が大きく異なります。
デザインがミニマリズムの極みすぎてボタンを探しまくった事、
今までWindowsの機体で存在していたUSBポートが無くて焦った事は良い思い出です。


#慣れるために行った事

**…これプログラミング以前の問題では…？**

焦った私は考えました。

**①とりあえず触れる時間を増やす**
　単純に触っている時間を増やしました。
　家にはwindowsのデスクトップがいますが、
　使い慣れているそれは極力使わずにパソコンを起動する場合はひたすら触っていました。

**②Google先生でひたすらWindowとの違いを調べる**
　困った時のGoogle大先生。

　Mac Shiftキー　ない
　Mac Shiftキー　どこ
　
　みたいな感じで検索してました。
　アプリケーションのインストールも挙動が結構違うので何回か詰まりました。
　何故自分でフォルダへ放り込まなければならぬのか…とか（MACユーザーさんにとっては当たり前なのでしょうが

**③聞きなれないシステム単語を覚える**
　これだけはどうしようも無かったので、
　頭に叩き混みようにしました。

　・Finder
　・Spotlight　…など
　
　心が折れそうになったらSiriさんと会話してました。
　Siriさんの優しいので癒されますよ。

#とりあえずなんとかなる。

不安だなあと思っていらっしゃる方へ。
頭でぐるぐるやらない理由を考えて準備運動しているよりかは、
いざ初めてみるとなんとかなったりします。
MACを触るのが初めての私でもなんとかなったので大丈夫です！！
とりあえず迷ったら飛び込んでみるのもいいんじゃないでしょうか。

次はいざプログラミング勉強をスタートした時に感じた事をまとめてみようと思いますので、
良かったらまた読んでみてください。それでは！
Pytest現在時刻テスト（日時固定）

# Pytestで時刻を固定してテストする
Pythonで現在時刻を返すメソッドをテストしたいって場面に出くわしたのでメモ
日付を固定できる freezegun が便利！

# 環境
- Python 3.7.5
- pytest-5.2.4


pytestの場合、pytestのプラグインとして`pytest-freezegun`があります。
pytestのmarkerとして`@pytest.mark.freeze_time`が追加されます。

```test_sample.py
from datetime import datetime
import pytest

@pytest.mark.freeze_time('2019-11-27 11:23:23')
def test_time():
    assert datetime.today() == datetime(2019, 11, 27, 11, 23, 23)
```

importしても大丈夫

```get_today.py
def dateget():
    return datetime.datetime.today()
```


```test_sample.py
from datetime import datetime
import pytest
import get_today

@pytest.mark.freeze_time('2019-11-27 11:23:23')
def test_time():
    assert get_today.dateget() == datetime(2019, 11, 27, 11, 23, 23)
```

```
$ python -m pytest test_sample.py

plugins: freezegun-0.3.0.post1
collected 1 item

test_sample.py .

==== 1 passed in 0.07 seconds ====
```

# 補足：〇分前でテストしたい
現在時刻から〇分前(minutes=update_span)のところをいじれば〇時間前や〇日前も可能

```test_sample.py
@pytest.mark.freeze_time('2019-11-27 11:23:23')
def test_time():
    correct_value = datetime(2019, 11, 27, 11, 20, 23)
    subtracted_time = datetime.now() - timedelta(minutes=3)
    assert subtracted_time == datetime(2019, 11, 27, 11, 20, 23)
```
条件にあわせてsqlalchemyのfilterを動的に生成する

## 概要

sqlalchemyを利用した以下のような実装を見た。
渡されたユーザーリストから絞るか、テーブル全体から絞るかの差だけのメソッドであり、
(他の条件が完全に一致している)
修正を考えると共通化したほうがいいと思って解決方法を調べた。

```python
def get_specified_age_users_from_user_list(user_name_list={}, age):
    """
    指定されたユーザーの中で特定年齢のユーザーをUserテーブルから取得する
    """
    users = session.query(User).\
        filter(users.age==age).\
        filter(users.name.in_(user_name_list)).\
        all()
    return users

def get_specified_age_users(age):
    """
    特定年齢のユーザーをUserテーブルから取得する
    """
    users = session.query(User).\
        filter(users.age==age).\
        all()
    return users
```

## 解決策

`tuple` 形式にした条件を `and_` メソッドに渡す。

```python
from sqlalchemy import and_

def get_specified_age_users(user_name_list={}, age):
    filters = []
    # 引数が渡された場合のみ条件を追加する
    if user_name_list:
        filters.append(User.name.in_(user_name_list))
    # and_の引数はtupleである必要があるのでtuple化している
    users = session.query(User).\
        filter(and_(*filters)).\
        all()
    return users

# 実行されるSQL
## 指定ありの場合
SELECT 省略
FROM users 
WHERE users.name IN (%s)

## 指定なしの場合
SELECT 省略
FROM users 
```
【ExcelVBA】ハッシュ値を取得する関数を自作してみた

# はじめに

ファイルの同一性を確認する際に、求めたハッシュ値をExcelのシート上に貼り付けて保存しようと考えたのですが、Excelの関数にはハッシュ値を求める処理がありません。
そこで、「CertUtilコマンドでハッシュ値を求めた後、その結果をExcel（VBA）側で受け取る」という処理を作ってみました。

# 作成した関数

* 第一引数にハッシュ値を求めたいファイルのパス、第二引数にハッシュアルゴリズムを指定することで、所望のハッシュ値を取得することができます。
* MS-DOSのコマンドを実行して、その結果を取得する方法については以下の記事を参考にしました。
  * [MS-DOSコマンドの標準出力を取得する](http://officetanaka.net/excel/vba/tips/tips27.htm)
* CertUtilコマンドの結果には、以下のように不要な行も出力されてしまうので、`findstr`コマンドを使って「特定のパターンにマッチする不要な行」を除去しています。
  * `MD5 ハッシュ (対象 sample.txt):`
  * `CertUtil: -hashfile コマンドは正常に完了しました。`
  * findstrコマンドの使い方については、[こちらのページ](https://www.k-tanaka.net/cmd/findstr.php)に詳しく書かれています。


```vb:DigestUtils.bas
'--------------------------------------------------------------------------------
' 引数で指定したファイルのハッシュ値（ダイジェスト値）を取得する。
'
' filePath：ファイルパス。
' hashAlgorithm：ハッシュアルゴリズムの種類。MD5,SHA1,SHA256などを指定可能。
' return：ファイルのハッシュ値（ダイジェスト値）
'--------------------------------------------------------------------------------
Public Function HashFile(filePath As String, hashAlgorithm As String) As String

    Dim wsh As Object, wExec As Object, command As String, output As String

    Set wsh = CreateObject("WScript.Shell")
    command = "certutil -hashfile " & filePath & " " & hashAlgorithm & " | findstr /V CertUtil | findstr /V " & hashAlgorithm
    Set wExec = wsh.Exec("%ComSpec% /c " & command)

    Do While wExec.Status = 0
        DoEvents
    Loop

    output = wExec.stdOut.ReadAll

    Set wExec = Nothing
    Set wsh = Nothing

    HashFile = output

End Function
```

```vb:テストコード
Public Sub TestHashFile()
    Debug.Print HashFile("C:\test\hoge.ps1", "MD5")
End Sub
```

```text:実行結果
b855794c5edc59be568aa34a8b0f9ff1
```


# 余談

* CertUtilコマンドについては、[Windowsのバージョンによって異なる結果になる](https://qiita.com/nkojima/items/1dc5f021c9f34fefaf77)ため、得られたハッシュ値の取り扱いには注意が必要です。
* 第二引数のハッシュアルゴリズムの選択にはEnumを使いたかったのですが、Enumのシンボル文字列が取得できないので断念しました。
* VBAの組み込み関数を補うために作成した自作の関数は、以下のページにもアップしています。
  * [【ExcelVBA】文字列操作用のユーティリティ関数を自作してみた](https://qiita.com/nkojima/items/a1702d5b0964a119c07b)
  * [【ExcelVBA】日時操作用のユーティリティ関数を自作してみた](https://qiita.com/nkojima/items/92c12c416fb6dea3e804)
serverless-http で画像 ( image ) や pdf などの binary を返す


### 追記 2020-01-09

[第二引数で渡せます。](https://github.com/dougmoscrop/serverless-http/blob/master/docs/ADVANCED.md#binary-mode)

```js
const fs = require('fs')
const path = require('path')
const serverless = require('serverless-http')
const app = require('express')()
app.get('/file.pdf', (req, res, next) => {
  res.setHeader('Content-Type', 'application/pdf')
  fs.createReadStream(path.join(__dirname, 'file.pdf')).pipe(res)
})

const binaryMimeTypes = [
	'application/pdf',
]

const proxy = serverless(app, { binary: binaryMimeTypes })
//                              ^ オプションで渡せる
export const handler = proxy
```



### コードへの記述

`serverless-http` は環境変数 `BINARY_CONTENT_TYPES` を[見ているので](https://github.com/dougmoscrop/serverless-http/blob/aa2910e848a0d18d093763edc9674f690a977284/lib/is-binary.js)下記のように書けば動くと思います。

```js
process.env.BINARY_CONTENT_TYPES = ['application/pdf'].join(',')

const fs = require('fs')
const path = require('path')
const serverless = require('serverless-http')
const app = require('express')()
app.get('/file.pdf', (req, res, next) => {
  res.setHeader('Content-Type', 'application/pdf')
  fs.createReadStream(path.join(__dirname, 'file.pdf')).pipe(res)
})
exports.handler = serverless(app)
```

### AWS Gateway の設定の変更も必要

AWS Gateway の設定の変更も必要ですので[こちらの記事](https://qiita.com/mozquito/items/9b24f89d7101b18254db)を参考にしてください。

AWS Gateway の設定を Swagger でやっている場合トップレベルに下記を追加します

```yaml
x-amazon-apigateway-binary-media-types:
  - '*/*'
```


### serverless-http が内部でやってること

lambda はバイナリを返せません。
なので base64 エンコードして「エンコード済だよ」と AWS Gateway に伝えます。

[こちらの記事](https://qiita.com/inabajunmr/items/e49408ab356b6a63ea91)が参考になります。
[SwiftUI] Imageの使い方

# SwiftUI Imageの使い方

```swift
// ViewにImageを表示する
var body: some View {
    Image("image-name")
}

// SF Symbols アイコンの使い方
// https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/
Image(systemName: "icon-name")

// SF Symbols アイコンの使う場合は色も変更できる
Image(systemName: "icon-name")
     .foregroundColor(.blue)

// サイズ調整
Image(systemName: "icon-name")
     .resizable()

// 幅や高さの設定
Image(systemName: "icon-name")
     .aspectRatio(contentMode: .fill)

// UIImageを使う場合
guard let img = UIImage(named: "image-name") else {
    fatalError("Fail to load image")
}

// グラデーション
Text("SwiftUI")
    .background(LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom), cornerRadius: 1)

// 図形
Rectangle()
    .fill(Color.red)
    .frame(width: 50, height: 50)

Circle()
    .fill(Color.blue)
    .frame(width: 100, height: 100)

// 背景イメーシ
Text("SwiftUI")
    .background(
        Image("image-name")
            .resizable()
            .frame(width: 100, height: 100))
```
白金鉱業Meetup Vol.12に参加してきた

今回自分はデータサイエンス界隈では有名な白銀鉱業Meetupに参加してきたのでその内容について今回は書いていきたいと思います。
ちなみに僕も理解しきれているわけではないので何か間違いがあったらガンガン突っ込んでください。

## 白金鉱業Meetupとは
#### グループの説明
ブレインパッドのデータサイエンティスト/機械学習エンジニアが社外のデータ系の仕事をしている人と交流したい！と始まった勉強会兼交流会です。気持ち的には交流会がメインです。同業の方も超welcomeです！ 月イチくらいで継続的にゆるく開催し、発表社は業界/ジャンルを問わず、毎回社内外から広く立候補形式で募集しています！

というものです。その中でも今回はブレインパッドさんとIBMさんコラボしていました。
今回自分が参加してみた動機としては、「白金鉱業」ってよく聞く単語だけどどういうものなんだろう、行ってみたいなあと思って参加して見た感じです笑


## 今回の構成について
流れとしては、

前半→発表
後半→懇親会

という流れです。ちなみに発表は技術枠とポエム枠に分かれていて、それぞれブレインパッドさんとIBMさんから１人ずつ合計４人が登壇という形でした。

## 今回の発表内容について
自分が所用によって参加が遅れてしまったため今回は最初の１人を除いた３人の発表についてまとめていきます。

### １、因果推論とその罠
この発表は「因果推論」の基本について解説するものでした、自分は完全に全く無知だったのでレベル感的には助かりました。

#### 因果推論とは
変数間の因果関係をデータから明らかにしようという取り組みです
とにかくこれにおいて一番大事なことは、
【背景要因を完全に揃えないとだめ！！！】
ということです。つまりどういうことかと言うと、例えばテレビの視聴率の変化にCMの長さが関係あるのかをテストしようとしたら、テレビの視聴率に関係する他の全ての要素を揃えないといけないってことです、例えば違う番組で違う時間帯に調査しても意味ないよねってことです。
しかし、現実的に考えればこれはとても難しく、背景要因を完全に揃えるためにはとてもドメイン知識が大事です。（テレビの視聴率には何が大事であるか、など）
そのため今使われている手法としては「傾向スコア」というものがあります。
つまり、テスト群のあるデータに対して似たコントロール群のデータを持って来れば反実仮想的な推定（もし〇〇だったら××だろう）ができる、という考え方です。
ここが前提で一番重要なことらしいです。~~と言うわけで僕はここしか理解してないです~~
ここまでできたら
・傾向スコアモデリング（とあるXの元でのYを出すこと）
・分布を確認
（分布はテストとコントロールで左右対称になっていないとダメ）
・評価を行う

という流れで行います。

結論としては今界隈では因果推論は流行っているらしいですが、このように因果推論はとても制約が多いのであまりお勧めできず、結局
#### ABテストが最強
と言うことらしいです。


もっと詳しく知りたい人は登壇者本人が書いている以下の記事を参考にして見てください。
https://pira-nino.hatenablog.com/entry/casual_inference


### ２、データ分析と企業価値「その分析いくら儲かるの？」に本気で取り組む
偉い人と話すときに、偉い人は結局その分析で上がる利益を重視しているのでそういう人と関わる時にどうすればいいのっていう話

結構会計的な話だったなという印象です。とても会計の知識は大事なんだなということを感じました（小並感）。

具体的にはこの発表の中ではROIC経営（投下資本利益率）に焦点を当てていました。要は分析で行うことは投下資本に対してどれくらいリターンがあったのかというのを分解してそれぞれを分析して改善するというものです。
また、この指標を分析するメリットとしては要素を分解してロジックツリーにしやすいということを話していました。
しかし、問題点として改善すべき要素間がトレードオフになることもあります。（例、棚卸し資産率のみ改善しようとすると在庫不足で販売面に機会損失が発生する）

この指標が結構色々できるので、これを使っていくことで経営者にちょっとずつ提案できるのでは、、、、？ということを話していました。



### ３、分析のチームリードの話（TL,PM）
実際にマネージャーとして分析チームに参画した人の日々の感想などの話です。手を動かすと相手の顔がその手についてくるっていうよく分からないワークショップをやりました。以下のリンク見てもらえば何やっていたかは分かると思います笑

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/yutatatatata/status/1200021707634819073">IBMの方が集団催眠をかけてる図 #白金鉱業</a></blockquote>

この他には
・DataScientistは利害が異なる人の調整を行うのですごい複雑な状況
・自分の場合はまず最初の真似ができていなかったので本を読んだりしながらそこからやった
・波及する範囲を考える（自分でできる範囲でかつ全体にできるものを考える）
ということを言っていたほか、
・DS以外のことも勉強してみませんか
という提案を行っていました。


## 交流会について
立食形式でピザ屋唐揚げが出てフランクな感じでした、自分は話しかけにあまりいきませんでしたが、何人もの人が話しかけてくださりありがたかったです。

## 全体の感想
一度行ってみたかったので自分は今回は行けて大満足です、一般枠は抽選で毎回倍率が高くなっていますがぜひ足を運んでみることをお勧めします。
ABC085C - Otoshidama

#問題
<img width="1105" alt="スクリーンショット 2019-11-29 21.59.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307024/cb89eb08-b323-3fb4-2593-8b823f7fb924.png">

#回答
```ruby
N,Y = gets.chomp.split.map(&:to_i)

x = -1
y = -1
z = -1

N.step( 0, -1 ) do |i|
  if 10000 * i > Y
    next
  else
    ( N - i ).step( 0, -1 ) do |j|
      if 10000 * i + 5000 * j + 1000 * ( N - i - j ) == Y
        x = i
        y = j
        z = N - i - j
        break
      end
    end
    if x != -1 || y != -1 || z != -1
      break
    end
  end
end

printf( '%d %d %d', x, y, z )
```
#結果
<img width="1086" alt="スクリーンショット 2019-11-29 21.38.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307024/99f7443c-13fd-3d28-01c2-420ec42065d3.png">

#感想
５０００円、１００００円と１０００円の差分である４０００円と９０００円で割り切れるかで確認する方法があって処理は早かったけど、流石にコード読むのが難しくなるしなあ・・・
libsassのalpine向けバイナリーの提供状況

node-sassにバンドルされるlibsassはalpine向けにもバイナリーを配布している。が条件あり。

- 利用してるNode.jsのversionによって、alpine向けに配布をしてるバージョンの範囲が変わる
- 開発版サポートが先に提供中止になる流れ
  - 次回or 次々回リリースでは v11向けのalpineバイナリー提供がなくなるっぽい

## Node v13: 最新版 `v4.13.0` から配布

https://github.com/sass/node-sass/releases/tag/v4.13.0


## Node v12: `v4.12.0`から配布

https://github.com/sass/node-sass/releases/tag/v4.12.0


## Node v11: `v4.10.0`から配布

https://github.com/sass/node-sass/releases/tag/v4.10.0

- おそらく`v4.13.0`が最後の配布versionに

## Node v10: `v4.9.0`から配布

https://github.com/sass/node-sass/releases/tag/v4.9.0


## Node v9: `v4.6.0`から`v4.10.0`まで配布

https://github.com/sass/node-sass/releases/tag/v4.6.0

- `v4.11.0` 以降は提供されず
- 次世代の開発バージョンに配布開始したversionが最後の配布versionに


## v8: `v4.5.3~`

- https://github.com/sass/node-sass/releases/tag/v4.5.3


## 備考

### alpineを使う利点

- イメージサイズが公式イメージと比べて 1/10以下
    - `10.15.1`だと、`897MB`=> `70.7MB`
- インストール所要時間の削減


## サポートしてないnode.js alpineイメージへnode-sassをインストールしたい

gypなどを入れればok

```sh
apk add --no-cache --virtual .gyp python make g++ \
    && apk --no-cache add avahi-dev \
    && yarn global add mdns \
    && apk del .gyp
```
[SwiftUI] Textの使い方

# SwiftUI Textの基本的な使い方メモ

```swift
// Hello Worldを表示する
Text("Hello World")

// 行数の制限もできる
Text("Hello World")
    .lineLimit(5)

// 行数を無制限にしたい場合はnil
Text("Hello World")
    .lineLimit(nil)

// 長い文章の場合はtruncationModeを利用して一部省略できる
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
    .truncationMode(.middle)

// fontの設定
Text("Hello World")
    .font(.largeTitle)

// 背景などの色の設定
Text("Hello World")
    .foregroundColor(Color.white)
    .background(Color.gray)

// 文字の間隔を設定
Text("Hello World")
    .kerning(10)

// 複数行のalignmentを設定
Text("Hello World")
    .multilineTextAlignment(.center)
```
A5:SQL Mk-2 （ER図作成ツール）

# 概要
業務でDBの設計をする際、ほとんどの場合ドキュメントが求められると思います。
定義書、ER図、実際に構築する際のDDL、etc。。。
これらをバラバラに作成していると、メンテナンスするのが厳しくなっていくと思います。
そんなツールの紹介。

# A5:SQL Mk-2
https://a5m2.mmatsubara.com/

読み方は、エーファイブ・エスキューエル・マークツー
ER図作成ツールと書いたが、データベースに接続して操作したり、
テスト用のダミーデータを作成したりなど多機能に使えるらしい。
自分は、ER図作成 → ER図の内容からDDL、仕様書を自動作成という使い方をしています。
これができるだけでも相当便利なツールだと思っています。

# インストール方法
以下のリンク先からダウンロードもしくはMicrosoft Store版のアプリをインストールできます。
ダウンロードの場合は、インストールせずに利用できるポータブル版も選べる。
　https://a5m2.mmatsubara.com/

# ER図作成
1. ダウンロード後、zipファイルを解凍し、「A5M2.exe」を起動
2. 起動後の画面から新規ファイルを作成
![作成1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220144/bff18bfe-a50e-4263-ecc4-2e24bd0789d6.png)
3. ER図を作成
![作成2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220144/23fc42ed-18be-19e7-3ac3-391cfb7ad2eb.png)
4. こんな感じでER図が書ける
![作成3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220144/081da86c-2ca7-5556-8ea8-ae14d0aa8f97.png)

# DDLエクスポート
1. メニューからDDL作成を選択する
![DDL_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220144/cac940f3-88e5-3eed-8204-2d989f123c36.png)
2. 区切り文字などの設定ダイアログが開くので設定する
3. ER図の内容のDDLが作成される
![DDL_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220144/8672af91-8d69-490c-2460-7b0b6715a782.png)

# 仕様書エクスポート
1. メニューからエンティティ定義書出力を選択する
![定義書1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220144/464ab710-5fae-f205-eae6-c81f80b92ae1.png)
2. 出力内容についての設定ダイアログが開くので設定する
3. ER図の内容の定義書が作成される
![定義書2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220144/8870d2a2-e1ea-ca96-c571-b0c9598a8879.png)

# まとめ
ドキュメントのフォーマットがガチガチに決められている現場では難しいかもしれないが、
それ以外ではかなり有用なツールです。
ER図、DDL、仕様書の内容を一元管理できるのが一番の強みだと思います。
また、ER図の内容が保存されるファイルがテキストベース？のため、Gitでファイル管理できるのがいい
LambdaからDynamoDBへ接続

学生アルバイトのsosonoです！！　
プロジェクトでゲーム制作のサーバ側を主に担当しています！！　
AWSを触り始めた頃って何が何だかの状況で、難しいサイトも一杯なので、必要なことを簡潔に書いてみます！！
serverless frameworkってのを使うことも可能なのですが、まずはコンソール（ブラウザ上のサイト）での操作から初めてみます！！

# Lambda

### 関数の作成
- 単純な関数を作りましょう（以下に従ってポチポチして下さい！！）
    - 関数の作成 
    - 一から作成
    - [関数名]を入力
    - 実行ロールの選択または作成：：基本的なLambdaアクセス権限で新しいロールを作成
- 以上の手順でデフォルトの処理が記述されたLambda関数をゲットです！！

# DynamoDB

### データベースの作成
- 単純なデータベースを作りましょう（以下ポチして下さい！！）
    - テーブルの作成
    - テーブル名はmydynamoにしときましょう
    - プライマリーキーは、 user_id にして、文字列の部分を数値に変更してあげます

- 単純なテーブルを作りましょう
    - 先ほど作成したデータベースを選択
    - 項目→項目の作成をクリック
    - userIdの右のVALUEには「１」を入れましょう
    - 左の➕を押して、「Append」「String」を選択
    - 新しく出来たFIELDに「name」を、VALUEには「hanako」 を入力

# LambdaでDynamoDBを覗いてあげましょう

### 実行ロール（IAM）の追加
- 最初の手順でLambdaにロール（役割）を付与しましたが、DynamoDBを扱うロールが入っていません。追加します。
    - Lambdaに戻り、先程作成した関数を選択
    - 下の方の「実行ロール」の中から、リンクっぽく青色になっている「ロールを表示」をクリック
    - 青色の「ポリシーをアタッチします」をクリック
    - 検索欄に「dynamo」と入れると数個ポリシーが残るので、その中から「AmazonDynamoDBAmazonDynamoDBFullAccess」の左のボックスにチェックをし、「ポリシーのアタッチ」をポチっ
    - Lambdaに戻りましょう
    - 保存しちゃいましょう

### コードを編集
- 覗くためのコードを書きます。コピペでも何でもいいのでデフォルトで書いてあるものを上書きしましょう！

```
var AWS = require('aws-sdk');
var dynamo = new AWS.DynamoDB.DocumentClient();
exports.handler = (event,context,callback) => {
    var params = {
        TableName : "mydynamo",
        Key : {
            user_id: 1
        }
    }; 
    dynamo.get(params, function(err,data){
        if (err){
            context.fail(err);
        } else {
            context.succeed(data);
        }
    });
};

```
- 右上の「保存」（オレンジ色）をクリック
- 保存の隣の「テスト」をクリック
- 画面が出てきますが、名前のところに適当に「hello」とでも入力して、気にせず先に進みましょう
- もう一度「テスト」をクリックしましょう
- 上の方に行くと.....「成功」となり、「詳細」をクリックすると、先程DynamoDBに入力したものがゲットできていませんでしょうか？？

これで基本的な手順は完了です。

# さらにさらに

LambdaもDynamoDBもまだまだいじるところがたくさんあります。基本の操作に慣れたら、より難しいことに挑戦してみましょう。
今回はコードをコピペした訳ですが、要点は

- パラメータでデータベースの名前と、idをキーにして
- getを実行し結果を取得、みたいな流れです

ここもカスタマイズの余地しかないので、是非お試しを。
基本的な操作を説明してくれているページって案外ないから、自分もこのような操作がすぐ出来ればなぁと今になって思います。
お疲れ様でした。