OmniAICreator/Qiita-1.07M huggingface dataset:
ラズパイ、SSHからVNCのセットアップ

## 目的
ラズパイはヘッドレスでセットアップして、SSHでつながるけど、GUIを使いたいけど、あれ！、VNCが使えない。
SSHから、VNCのセットアップのもっとも簡単な方法をまとめました。

ラズパイをヘッドレスで簡単にセットアップする方法はこちらを参考に。
https://qiita.com/kimtetsu/items/c9806e4fc5c47cdb84f3

## VNCとは
リモート操作できるソフトウェア
Win/MACにこのソフトを入れれば、Win/MACからラズパイがGUIで操作できるようになります。

こちらから、「VNC Viewer」をPCへダウンロード、インストールしてください。簡単なので特に説明はいれません。
https://www.realvnc.com/en/connect/download/viewer/


## ラズパイ側の設定
ラズパイを「Raspberry Pi Imager」で、OSを（recommend）でインストールすると、VNCがインストールされているので、有効にするだけなのです。

まずは、SSHでつなげてくださいね。

ラズパイのセットアップツールを起動します。

```
sudo raspi-config
```

こんな画面が立ち上がってきます。
![raspiconfig.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689639/2d71b8d7-6c94-3e50-1aaf-5e2270155ba0.jpeg)


まずは、VNCを有効にします。
「3．Interface Options」- 「P3 VNC」と選択していきます。
![config1-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689639/679606d5-7a09-e97a-a552-0ad309a3aec4.jpeg)
![config1-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689639/337e0794-4085-316c-5628-15084f170525.jpeg)


有効にするか聞いてきますので、< YES > を選択
![config1-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689639/55bdba9b-f05c-a498-4f9c-0bf043f1e548.jpeg)


すると、有効にしましたと表示されまるので、そのまま、<Ok>を選択し、最初の画面に戻ります。

次に解像度を設定します。
「2. Display Options」- 「D5 VNC Resolution」を選択していきます。
![pi-01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689639/cca2edaf-1cf6-9ff2-90d8-6a8dcfa7e2fd.jpeg)


解像度一覧が出てきますので、お好みのものを選んでください
![pi-02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689639/47e98bef-fa2f-d273-acb7-bd73f702b8ea.jpeg)


すると、有効にしましたと表示されまるので、そのまま、<Ok>を選択し、最初の画面に戻ります。
また、最初の画面にもどるので、Tabキーで、< Finish >まで、移動して終了させましょう。
![config2-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689639/b77ea5f3-d089-bb79-01c3-c40a3cfe35db.jpeg)


再起動を求められるので、再起動しましょう。
これで、ラズパイ側の準備は完了です。


## VNC Viewer から接続して見ましょう。

File - New Connection を選ぶと、プロパティ画面が出てくるので入力していきましょう。

VNC Serverには、ラスパイのIPアドレス、
Nameは、何でもOKで、表示上だけなので、好きな名前を入れましょう。
![VNC1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689639/fb1baccc-60f6-a0b8-9b9c-c2ae84805130.jpeg)


これで設定は完了をです。先ほど作成したアイコンをダブリックで接続しにいきます。
ユーザー名とパスワードを聞かれるので、ちゃっちゃっと入れましょう。

はい、つながりました！
![vnc-login.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689639/c1609a9a-192c-d588-5c42-115e218c2317.jpeg)


## 終わりに
何かのファイルの内容を編集するとか、必要ないですね。簡単ですね。
複雑化したSvelteのStoreにimmerを使って立ち向かう

# はじめに

Svelte で複雑な Store の一部分のデータを更新したときに、初期データが変わってしまう問題に遭遇しました。それを解決するために immer を使う方法を試したので、備忘録として残しておきます。


# TL;DR

```ts
import { produce } from 'immer'

// 中略
update(
  produce((draft) => {
    draft.posts[postIndex].comment.push(comment)
  })
)
```

# 環境

- svelte 3.38.1
- immer 9.0.2

# モチベーション

以下のような複雑なストアがあるとします。

```ts:store.js
type User = { name: string posts: Post[] }
type Post = { title: string body: string comments: Comment[] }
type Comment = { body: string }

import { writable } from 'svelte/store'

const initialData: User = {
  name: 'name1',
  posts: []
}
const { subscribe, update } = writable(initialData)
export userStore = {
  subscribe,
  addComment(postIndex: number) {
    // TODO: コメントを追加する処理
  }
}
```

カスタムストアというテクニックを用いて、自由すぎる変更が行えないようにします([カスタムストアのドキュメント](https://sveltejp.dev/tutorial/custom-stores))。
さて、`コメントを追加する処理`をどうやって書きましょうか。

```ts:直接変更してしまう例
// 中略
addComment(postIndex: number, comment: Comment) {
  update(prevUser => {
    prevUser.posts[postIndex].comment.push(comment)
    return prevUser
  })
  console.log(initialData) // store を更新後に、初期データを表示してみる
}
```

log を見てみると、initialData が変わってしまっていることがわかります。
これはいわうゆる参照渡し**のような**挙動が起きているからです(「参照渡しが起きている」とは言っていません！)
(参考：https://qiita.com/yuta0801/items/f8690a6e129c594de5fb)
もし、initialData に reset する必要があるとしたら大変です。
これを防ぐには、破壊的変更を加えないで、新しいデータを return する必要があります。

```ts:イミュータブルに書く例
addComment(postIndex: number, comment: Comment) {
  update((prevUser) => ({
    ...prevUser,
    posts: prevUser.posts.map((post) => ({
      ...post,
      comments: [...post.comments, comment],
    }))
  }))
  console.log(initialData); // 今度は、変更されない
}
```

今度は変更されませんが、`...`の連続で書きづらいし読みづらいです。

# immer を使う

[immer](https://immerjs.github.io/immer/) はこうした複雑なデータを破壊的変更を加えずに、簡単に更新するためのライブラリです。
https://bundlephobia.com/result?p=immer@9.0.2

gzip 状態で 5kB ほどと軽めのライブラリです(Svelteのランタイムが軽すぎるせいで、これでも重く感じる人もいるかも)。
他の界隈を覗くと、React でも 「Redux で複雑なデータの reducer を書くのが辛いので immer を使う」ということが多々あるようです。
immer を使って先ほどの`addComment`を書いてみます。

```typescript
addComment(postIndex: number, comment: Comment) {
  update(prevUser => (
    produce(prevUser, draft => {
      draft.posts[postIndex].comment.push(comment)
    })
  ))
  console.log(initialData) // 変更されない
}
```

なんだかネストが深くて読みづらいです。
実は、以下のように、produce メソッドの第一引数を省略して、関数を直接渡すことで以下のようにスッキリ書くことができます。
([参考](https://immerjs.github.io/immer/curried-produce))

```ts
addComment(postIndex: number, comment: Comment) {
  update(produce(draft => { // 関数を直接渡す
    draft.posts[postIndex].comment.push(comment)
  }))
  console.log(initialData) // 変更されない
}
```

# 検証しきれていないこと

- deep clone をするという手もあるが、immer と比べてどちらがパフォーマンスが良いのか
AmplifyでReactチュートリアル動かした



# はじめに
Webアプリ作りたいけど、何から選択して良いか完全に分からんので、適当に目についたReactで作ることにする。
職場関連でAWSの文字を見たので、「React AWS」でぐぐったらAmplifyというサービスのチュートリアルが出てきたので、とりあえずこれにする。
リレーショナルデータベースと繋げてみようと思ったけど、無料枠で実施できなかったので途中で断念。

やったところまでの作業メモ

選択肢わけわからんすぎる。

# 手順
### チュートリアルの実施

https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/

「モジュール3：認証を追加する」を手順通りに進めると、AWS上でのビルドが失敗するので、下記の対策を実施。

https://qiita.com/theFirstPenguin/items/1768d931c2d1d95330df#3-2-%E3%83%93%E3%83%AB%E3%83%89%E3%82%A8%E3%83%A9%E3%83%BC%E3%82%92%E8%A7%A3%E6%B1%BA%E3%81%99%E3%82%8B

再ビルドは、
Amplifyのメニューから
すべてのアプリ > “アプリ名” > “環境名”？(チュートリアルの通りに進めていると“master”になっているはず)
のページで、右上の「このバージョンを再デプロイ」をクリック。


### RDSと接続

Amazon Auroraでないと、連携できないらしい。
Auroraは無料枠で使えないので、ここで断念。

https://docs.amplify.aws/cli/graphql-transformer/relational

---

RDSでMySQLを作ったので、その時のメモ

以下の内容で作成

- 東京リージョン
- 標準作成
- MySQL 8.0.20
- 無料枠利用
    - db.t2.micro
    - SSD 20GiB
    - 自動スケーリング無効
- パブリックアクセス可能

こっちの設定も参考にしつつ、RDSを作成してMySQL Workbenchで接続。

https://aws.amazon.com/jp/getting-started/hands-on/create-mysql-db/

以下の使い方を参考に、MySQL Workbenchでテーブルを作成

https://proengineer.internous.co.jp/content/columnfeature/6605

ローカル環境にAPIを追加し、``amplify api add-graphql-datasource``を叩いてみたら、
繋げられないと返された。

ぴえん。
LeetCodeWeekly 239B 1849. Splitting a String Into Descending Consecutive Values 連続する減少数列の結合の判定

https://leetcode.com/contest/weekly-contest-239/problems/splitting-a-string-into-descending-consecutive-values/

前日のGCJ-Bに近いものを感じます．

# 題意
- 最大２０桁の数字が与えられる
- その数字がa, a-1, ... a-nの数字を連結して作られた文字列かを判定しろ
- ただし、各数字の頭には0がついていても良い

# こう考えた
まず、この問題の難しさは3つめの「頭に0が付いていても良い」というところで、例えば、5,4,3という数字を組み合わせた時に、$543$は当然として、$5043$や$50004$や$54003$なども候補となるからである．

もしも、あたまの0を気にしなくて良いのであれば、適当にi文字までをとった時にデクリメントしながら数字を生成して判定すれば良いがそうもいかない．

このため、以下のような関数f$(s, num)$を考える．

- 前の数字が$num$とする時に、$s$自身が$num-1$、あるいは、$num-1$を払い出せる
- $num-1$を払い出したのであれば、$f(残りの文字列, num-1)$が成立するかを調べる．

# 実装
上記をそのまま実装すればいい．つまり、

- 最初はi文字目までを必ずカットする
- i文字目までをカットした時、$num-1$に作れるカットがあるなら再起的に追う

```Python3
class Solution:
    def f(self,s, num):
        if num is not None and int(s) == (num - 1):
            return True
        for i in range(1, len(s)):
            curval = s[:i]
            if num is not None and int(curval) != (num-1):
                continue
            res = self.f(s[i:], int(curval))
            if res is True:
                return True
        return False
    def splitString(self, s: str) -> bool:
        return self.f(s, None)
```
https://leetcode.com/contest/weekly-contest-239/submissions/detail/487677726/
とあるサッカーゲームのユーザー間をつなげるサービスを試しに作るっていう話

# 概要はこちら（スライドにしました）
https://speakerdeck.com/goronya_10/uiiretpyi-ji-shi-chang-websabisuqi-hua-shu?slide=1

# という訳で...
サクッと作ってみるべくLaravelで簡単なwebサービスを作ってみます。
宜しくお願いします＾＾

# 蛇足
slideshareよりもspeakerdeckの方が使い勝手よさげでした。
これはまた別記事にしてみよう。
しばらくこの辺りの作業系を記事にしてみてQiitaでの活動を再開させてみよー＾＾
Ubuntuにてディスクの使用容量、CPU・メモリの使用率、ネットワークのスループットを確認する

# 手元での動作確認に使用した環境
- 端末：[NVIDIA JETSON AGX XAVIER](https://www.nvidia.com/ja-jp/autonomous-machines/jetson-agx-xavier/)
- os：Ubuntu 18.04 LTS

# 背景
Ubuntu OSをインストールした端末にsshでログインした際に、CPUやメモリの使用状況を確認したいシーンに遭遇することがあるかと思います。
Windows OSにリモートデスクトップで接続した場合はタスクマネージャーを使用すれば確認できますが、
[Tera Term](#https://forest.watch.impress.co.jp/library/software/utf8teraterm/)などのCUIでログインした場合は確認方法が解らないのが通常かと思います。
そこで、リソースの使用状況を確認するコマンドを整理します。

# 目次
1. [cpuやメモリの使用状況を知る](#cpuやメモリの使用状況を知る)
1. [ネットワークのパフォーマンスを知る](#ネットワークのパフォーマンスを知る)
1. [ディスクの空き容量を知る](#ディスクの空き容量を知る)
1. [ディレクトリのディスクの使用量を知る](#ディレクトリのディスクの使用量を知る)

# cpuやメモリの使用状況を知る
Ubuntuでは、topコマンドを使用することでプロセス、CPU、メモリ、スワップの統計情報が解ります。
なお、引数に"-d <数値>"を指定することで、数値に指定した秒単位に情報が取得できます。

例）3秒毎に取得する場合

```
top -d 3
```

# ネットワークのパフォーマンスを知る
Ubuntuでは、iftopコマンドを使用することで、ネットワークのスループットが解ります。
なお、標準では使用できないので、初回は下記コマンドを実行してインストールする必要があります。

```
sudo apt-get -y install iftop
```

iftopコマンドをインストール後、下記コマンドを実行してネットワークのスループットが解ります。

```
sudo iftop
```

# ディスクの空き容量を知る
Ubuntuでは、dfコマンドを使用することでディスクの空き容量が解ります。
なお、引数に"-H"を指定することで容量が解りやすい単位になります。
（通常は10380984と表示されますが、"-H"を指定するこで11Gと表示されます。）

```
df -H
```

# ディレクトリのディスクの使用量を知る
Ubuntuでは、duコマンドを使用することでディレクトリのディスクの使用量を知ることができます。
なお、引数に"-s -h"を指定することでカレントディレクトリの使用量を解りやすい単位で表示できます。

```
du -s -h
```
Docker + Swagger + Stoplight Prismを用いたAPI仕様書作成環境+APIモックサーバーの構築方法 メモ

* Docker、Swagger、Stoplight Prismを使用したAPI仕様書作成＋APIモックサーバーの構築方法についてメモする。

## Swaggerとは

* REST APIのドキュメント記載に関するフォーマット仕様とswagger-uiやswagger-editorなどの周辺ツールを指す。


| ツール          | 説明                                                       |
| :-------------- | :--------------------------------------------------------- |
| Swagger Spec    | OpenAPI仕様に則ったAPI仕様                                 |
| Swagger Editer  | OpenAPI仕様に則ったAPI仕様を書くためのエディタ             |
| Swagger UI      | OpenAPI仕様に則ったAPI仕様からドキュメントを生成するツール |
| Swagger Codegen | OpenAPI仕様に則ったAPI仕様からコードを生成するツール       |

### Stoplight Prism

* Stoplight社が提供するOSSのモックサーバー。
* Swagger Specを読み込むことで、APIモックサーバーを起動する。

## 事前準備

* docker, docker-compose のインストール。
  * インストール方法は割愛する。

## 環境構築

* ディレクトリ構成

  ```
  SwaggerTest --- docker-compose.yml
  			   L_ api_reference.yaml
  ```

  

* `docker-compose.yml`

  ```yaml
  version: "3"
  services:
    swagger-editor:
      image: swaggerapi/swagger-editor
      container_name: "swagger-editor"
      ports:
        - "10081:8080"
    swagger-ui:
      image: swaggerapi/swagger-ui
      container_name: "swagger-ui"
      ports:
        - "10082:8080"
      volumes:
        - ./api_reference.yaml:/usr/share/nginx/html/api_reference.yaml
      environment:
        API_URL: api_reference.yaml
    swagger-api:
      image: stoplight/prism:3
      container_name: "swagger-api"
      ports:
        - "10083:4010"
      command: mock -h 0.0.0.0 /api_reference.yaml
      volumes:
        - ./api_reference.yaml:/api_reference.yaml
  
  ```

* `api_reference.yaml`(Swagger Spec)

  * [Petstore APIのyamlファイル(公式)](https://github.com/OAI/OpenAPI-Specification/blob/main/examples/v2.0/yaml/petstore.yaml)を利用する。

## 動作確認

### コンテナ起動
* `SwaggerTest`ディレクトリに移動し、以下のコマンドを実行する。

```shell
docker-compose up
```

### Swagger Editor

* http://localhost:10081 にアクセスし、以下の画面が表示されることを確認する。

  ![swagger_editor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/d93ec125-e0a1-09a6-1b9a-69c3b87b27d7.png)


### Swagger UI

* http://localhost:10082 にアクセスし、以下の画面が表示されることを確認する。
  ![swagger_ui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/08885e8b-9f9a-b0b2-1acb-9813f6812386.png)

  

### Stoplight Prism (APIモックサーバー)

* 以下のリクエストを行い、以下のレスポンスが返却されることを確認する。

  リクエスト

  ```http
  GET /pets HTTP/1.1
  Host: localhost:10083
  ```

  レスポンス(期待値)

  ```json
  [
      {
          "id": 0,
          "name": "string",
          "tag": "string"
      }
  ]
  ```

  

## 参考情報

* [Swaggerの概要をまとめてみた。](https://qiita.com/gcyata/items/342073fa7607fd4082bd)
* [Swagger OpenAPIでAPI Referenceを書く](https://system.blog.uuum.jp/entry/2020/02/26/185753)
* [Stoplight Prism docs](https://meta.stoplight.io/docs/prism/README.md)
【Reat × Rails(api)、フロントとバックエンドを分けるとはどういう事か理解する】

実務未経験の自分が、
現在、Rails(api)とReact.jsでポートフォリオを作成中ですが、
このようなフロントエンドとバックエンドを分けて開発する事の概念的な部分に関して、
イメージがしづらかったので、アウトプットとして整理しておきます。

※めちゃくちゃ初心者向けの内容になるかと思います。

## そもそもフロントエンドとバックエンドを分けるってどういう事？？
**凄く簡単に言うと、Railsにおけるviewに当たる部分を、別のフレームワークを使って開発すると理解しています。**

Railsでアプリを何個か作成していた為、いわゆるviewにあたるファイルが、`〇〇.erb`という形式で作成しておりました。
しかし、Rails apiモードではviewというディレクトリはありませんし、`.erb`というファイルも作成しません。
※正確にはviewディレクトリはありますが、ここでuserとかpostだったりのディレクトリは作成しません。

一般的には、このviewというディレクトリの代わりに、`front`又は`frontend`というディレクトリでReactやVueを使って作成していきます。
※viewの代わりにという言い方は語弊あるかもしれませんが、このような理解で良いかと思います。

### viewの部分を置き換えるって何？？
当たり前ですが、viewの部分が担っていた役割を、そのままReactやVueが行っていく事になります。

何が変わるのかというと、
基本的にページ遷移した際の画面をリロードする必要が無くなり、
ユーザー(クライアント)側の使い勝手が良くなります。
※この辺はこちらの記事を読むと良いです。
[今さら聞けない！シングルページアプリケーションとは](https://qiita.com/RinGoku/items/e44185d6103746b213c3)

ディレクトリ構造的には、こんな感じになります。

![スクリーンショット 2021-05-02 14.36.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794864/8c1f81c5-6c0d-11bb-bd5b-521a70d3983d.png)
※frontendのディレクトリ構造は、ReactやVueのチュートリアルや記事を見て下さい。

#### Railsにおけるviewの主な役割って何だったっけ？

- ブラウザ画面の描画
- 何らかのリクエストを投げて、返ってきた値を受け取る

例えば、下記のような記述があった場合

```view/user/show.html.erb
<p>名前</p>
<%= @user.name %>
```

```config/routes.rb
resources :users, only[:show]
```

```controllers/users_controller.rb
@user = User.find(params[:id])
```
####まず、

- `show.html/erb`から@userの情報を下さい！というリクエストを`resources :user, only[:show]`というルーティング宛に送ります。

※どのルーティングが判別するかはRailsが判断してくれています。

#### 次に、

- `routes.rb`が`user/show.html.erb`から来たリクエストは、どのコントローラーのどのアクションに渡すべきか判別します。

#### 最後に

- `controllers/users_controller.rb`が受け取ったリクエストを元にUserモデルから該当userを探して、レスポンスを返す

という流れになっているかと思います。


フロントエンドとバックエンドを分けての開発の場合は、
この`view/user/show.html.erb`が@userの情報を下さい！というリクエストを投げる行為を、ReactやらVueやらで行っていきます。

ちなみに、このリクエストを投げる行為の事をapiを叩くと言ったりしています。
※今回の例はGETリクエストですが。

### フロントを分けるとどういう動きになるの？？

実際の記述は下記のようになります。
かなり省略して書いておりますが、流れを掴めれば良いと思っているので、ご容赦下さい。

```UserShow.jsx
get(lokalhost3000/users/:id)

...

return(
  {user.name}
)
```
※jsxとはReact.jsのファイル端子ですが、Railsでいうviewにあたる部分と思って下さい。

```routes.rb
resources :users, only[:show]
```
```users_controller.rb
  def show
    @user = User.find(params[:id])
    render json: { user: @user }
  end
```

#### 流れの簡単な説明

#####ルーティングを指定してGETリクエストを投げる
まず、フロントエンドのviewからRailsに向けてuserの情報を下さいとgetリクエストを投げています。
※jsxの記述はかなりハショッております。

Railsでは、@user.nameと記述すれば勝手にRailsがリクエストを投げて値を返すところまで、やってくれていましたが、
フロントを分ける場合は、このようにリクエストを投げる処理を自分で実装しなければなりません。
※`localhost3000/users/:id`は`rails routes`に記載されているルーティングの事です。

また、Railsでよく使っていた、`user_path`のようなルーティング指定も使いません。
※使う方法もあるのかもしれませんが、自分は知りません。。

##### ルーティングが実行すべきコントローラーを判断する
ここはRails単体の動きとなんら変わらないので、パスします。

##### コントローラーがリクエストを受け取って値を返す
見慣れない書き方が、`render json: { user: @user }`こちらかと思います。

Rails単体の場合は、`@user = User.find(params[:id])`だけでも良いのですが、
フロントを分ける場合は、この@userの値をjson形式というデータ形式に変えて渡す必要があります。

jsonとは、簡単に言うとJavascriptのデータ形式と思って頂ければ良いかなと。
詳しく知りたい方は下記を参照下さい。
https://products.sint.co.jp/topsic/blog/json


#####なぜ、こんな形式に変換しないといけない?
変換をしないままでは、rubyのデータ形式のままでReactやVueはJavaScriptで書くので、
rubyのデータ形式では対応出来ないからです。

Rails単体の場合は、.erbもrubyを元に作成される為、そのままでも対応出来るという事です。

###最後に
自分用のアウトプットとはいえ、かなり煩雑に書いてしまったので、
指摘や分かりづらい点があれば、どんどんご指摘下さい。
関数ポインタ

#関数のエントリポイント

コンパイラは、コンパイル時に各関数のエントリポイントを作成する。
プログラムの実効時に関数が呼び出されると、実行制御はこのエントリポイントに移行する。

エントリポイントは、関数のアドレス。
つまり、ポインタ変数を持つことができる。

関数ポインタは、アドレスを格納する関数と同じ戻り値の型のポインタ変数を用意する。
仮引数がある場合は、続けて仮引数も指定します
宣言時には、演算子の優先順位の関係から必ずポインタ名に ( ) をつける。

*宣言方法*
関数へのポインタ変数を定義するには以下

型 (*変数名) (仮引数);
例：
int (*funcname)(int, int);
これでintを返り値として、引数にint, int をとる関数へのポインタ変数が宣言された
ここにアドレスを渡すには、渡したい関数をそのまま代入すればよい。
int f(int, int);
という関数があるとして
funcname = f;

これで、funcnameにf関数のアドレスが格納された。

これでこのポインタから関数を間接参照で呼び出しすることができる。

呼び出しをするときは、見た目がわかりやすいように（*）をつけるのが慣用。なくても実行可能。
(*funcname)とfuncnameどちらの表記でも呼び出し可能
(*funcname)()
funcname()
両方とも同じ実行結果。


```c

#include <stdio.h>

int f(int *a, int *b)
{
    return (*a = (*a + *b));    
}

int main(void){
    int a = 5, b = 3;
    // intを返り値として仮引数にint *とint *をとる関数へのポインタ引数とint型num変数を宣言
    int (*funcname)(int *, int *), num;
    // funcnameにfのエントリポイント（関数ポインタ）代入
    funcname = f;
    // ポインタを用いて間接的に関数を呼び出し
    num = (*funcname)(&a, &b); // (*funcname)とfuncnameどちらの表記でも呼び出し可能
    printf("a = %d, b = %d, num = %d\n", a, b, num); // a = 8, b = 3, num = 8
}

```

関数のアドレスを代入できるので、関数の配列も作ることが可能。

int f1(int *a, int *b);
int f2(int *c, int *d);
int f3(int *e, int *f);

int (*funcname[])(int *, int *) = { f1 , f2, f3 };

(*funcname[0])(&num, &num2); // f1
(*funcname[1])(&num, &num2); // f2
(*funcname[2])(&num, &num2); // f3


参考
http://wisdom.sakura.ne.jp/programming/c/c54.html
pi picoでmicropython その21

#概要

picoでmicropythonやってみた。
pioアセンブラで、アセンブル、やってみた。

#参考にしたページ

https://qiita.com/yunkya2/items/8fce43c0dbb97be97682

#サンプルコード

```
.program i2s_16s
.side_set 2

            out null 16            side 1
            out pins 1             side 0
            set x 13               side 1
i2s_16s_1:  
            out pins 1             side 0
            jmp x-- i2s_16s_1      side 1
            out pins 1             side 2
            out null 16            side 3
            out pins 1             side 2
            set x 13               side 3
i2s_16s_2:  
            out pins 1             side 2
            jmp x-- i2s_16s_2      side 3
            out pins 1             side 0





```

#アセンブル結果

```
6870
6001
e82d
6001
0843
7001
7870
7001
f82d
7001
1849
6001

```

以上。
Next.js×styled-componentsで、スタイル変更したときにWarning: Prop className did not matchになるエラー

## 解決法
1. babel-plugin-styled-componentsを`yarn add`
1. .babelrcをプロジェクトルートに作成し、以下のように設定

```json
{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "minify": true,
        "transpileTemplateLiterals": true,
        "pure": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}
```

## 備考
下記も試しましたが、うまくいきませんでした。
（`yarn dev`し直すとエラーは一時的に消えるが、再びスタイルを変更するとエラーが出た）

```
{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["styled-components",
      {"ssr": true,"displayName": true,"preprocess": false}
    ]
  ]
}
```


## 参考

https://github.com/vercel/next.js/issues/7322#issuecomment-811463256
META 要素で Set-Cookie が使えなくなった

HTML Standard では次のように定義されています。
[4.2.5.3 Pragma directives](https://html.spec.whatwg.org/multipage/semantics.html#pragma-directives)
![meta_may02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/3d64d6f0-d257-2663-61b6-3ce24d00e14b.png)

Set-Cookie は　Non-conforming　ですが、最近の Chrome, Firefox では使えません。

テスト用の HTML ファイル

```html:meta_test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF8">
<meta http-equiv="Set-Cookie" content="key1=good;SameSite=None;Secure">
<TITLE>Met Test</TITLE>
<script type="text/javascript">
document.cookie = "aa=hello;SameSite=None;Secure"
document.cookie = "bb=みかん;SameSite=None;Secure"
document.cookie = "cc=メロン;SameSite=None;Secure"
console.log(document.cookie)
</script>
</head>
<body>
May/02/2021<br />
</body>
</html>
```

これを、FireFox でアクセスすると
![firefox_may02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/b2622b3c-a992-62dd-d260-cf43867ea02a.png)

Chrome でアクセスすると
![chrome_may02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/f60b267b-5e92-4ffc-e182-26733014672f.png)
Hyper-VでUbuntuを動かす際の解像度設定

しばらくすると忘れてしまって環境構築のたびに探すのでメモ

# 前提
* Windows 10 Pro
* Hyper-VでUbuntu 20.04を動かす

# やりたいこと

Hyper-VでUbuntuを動かそうとすると，デフォルトの画面解像度がとても小さくて不自由。
Ubuntuをローカルで動かしている場合は，設定＞デバイス＞ディスプレイ＞解像度で設定ができるが，Hyper-Vだとこの手順では変更不可。
grubの設定を変更する。

# 手順

1. アプリケーション＞端末
1. 端末で次を入力する ```sudo gedit /etc/default/grub```
1. パスワードを入力
1. ```GRUB_CMDLINE_LINUX_DEFAULT=”quiet splash”```を ```GRUB_CMDLINE_LINUX_DEFAULT=”quiet splash video=hyperv_fb:1920x1080”```へ書き換える
1. 保存してgeditを閉じる
1. 端末で次を入力する ```sudo update-grub```
1. 端末で次を入力する ```sudo reboot```

再起動すると解像度が変更されている。
Swift：UISwipeGestureRecognizer備忘録

##バージョン

・Xcode11.4.1
・Swift5

##概要
imageView上のスワイプを検知して、ラベルに方向を表示させる。
今回は上のみ検知。

##コード

```swift:test.swift
import UIKit

class ViewController: UIViewController {

@IBOutlet weak var testLabel: UILabel!
@IBOutlet weak var animationView: UIImageView!

override func viewDidLoad() {
　　super.viewDidLoad()
   //UISwipeGestureRecognizerのインスタンス作成
    let swipeRecognizer = UISwipeGestureRecognizer(target: self, action: #selector(swipeLabel(sender:)))
　　//UISwipeGestureRecognizerで検知する方向を設定
    swipeRecognizer.direction = .up
    //isUserInteractionEnabledをtrueにしないととエラー出ないけれど、animationViewをスワイプしても認識されない
    animationView.isUserInteractionEnabled = true
    //uiimageにスワイプの感知を追加
    animationView.addGestureRecognizer(swipeRecognizer)
}

    //スワイプされたときに動く関数
    @objc func swipeLabel(sender:UISwipeGestureRecognizer) {
        testLabel.text = "上"
        print("up")
        } 
}
```

##参考にさせて頂いた記事
[UITapGestureRecognizer が反応しない
](https://qiita.com/shintarogit-on-qiita/items/88cbc61158267d2f8eb8)
[【Swift】Swipe Gesture Recognizerの使い方。上下左右のスワイプを検知する。
](https://hajihaji-lemon.com/smartphone/swift/uiswipegesturerecognizer/)
[UISwipeGestureRecognizerの罠と左右スワイプの実装
](https://qiita.com/kentarohorie/items/71dddd6f2ea96fa00b39)
【AWS】NATゲートウェイとは、インターネットゲートウェイとの違い

#プログラミング勉強日記
2021年5月2日

#NATゲートウェイとは
　NATゲートウェイについて調べてみるとAWSの公式ドキュメントでは以下のように出てくる。

> ネットワークアドレス変換 (NAT) ゲートウェイを使用して、プライベートサブネットのインスタンスからはインターネットや他の AWS のサービスに接続できるが、インターネットからはこれらのインスタンスとの接続を開始できないようにすることができます。
引用：https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/vpc-nat-gateway.html

　VPC内に構成したプライベートサブネットからインターネットに接続するために必要なものがNATゲートウェイ。([昨日の記事](https://qiita.com/mzmz__02/items/6151277d91ce3b4da82c)でプライベートサブネットについて触れている。)

#インターネットゲートウェイとは
　VPC内からインターネットに接続するためのゲートウェイ。インターネットゲートウェイを使うことでVPC内のシステムがグローバルIPを使えるようになる。

#NATゲートウェイとインターネットゲートウェイの使い分け

- VPC内からインターネット通信をする場合はインターネットゲートウェイ
- プライベートサブネットからインターネット通信をする場合はNATゲートウェイ


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/5c81d91b-e59b-cc08-ca79-e734cabeef45.png)
JSテンプレートリテラル ${ }

# はじめに

業務で使用したプロジェクトの中に、このような書き方があり、「バッククオートで囲む？」「${}って書き方あるん？」と思ったので簡単に調べました。

``` .js
{
//略
href: `${process.env.BASE_URL}/sample/sample.html`,
//略
}
```

# テンプレートリテラル

結論から言うと、ECMAScript 6 （2015年）から導入された構文で、テンプレートリテラルといいます。バッククオートで囲みます。

### 改行がそのまま反映される

``` .js
const sentence = `むかーしむかし
あるところに
おじいさんとおばあさんがいました`
```

これと

``` .js
const sentence = "むかーしむかし\nあるところに\nおじいさんとおばあさんがいました"
```

これは一緒ということです。


### 文字列の中に式を埋め込める



``` .js
console.log(`500円の商品の税込価格は${500*1.1}円です。`)
// 結果：　500円の商品の税込価格は550円です
```

`${ func() }` このようにテンプレートリテラル内で、メソッドを呼び出すこともできます。

# さいごに

記事を読んでいただきありがとうございました。ほかにもテンプレートリテラルを使って、色々できそうです。

# 参照記事
- [テンプレートリテラル（MDN）](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals)
railsで通知機能とその未読管理機能を開発

# やりたいこと

- rails
- 通知機能
    - 通知の種類は色々増える可能性あり
- 通知の未読管理
    - 通知一覧を開いた時点で開封済みとする。もし未読のものがあればラベルをつける


# 仕様

全体の流れ

- notificationテーブルを作成し、そこで通知情報と未読管理を行う
- indexを開いたらopen_timeがnilのものを取得し、現在時刻を入れる
- headerのアイコンを未読（open_timeがnil）ありだったらバッジをつけ、なしだったらバッジをつけない

## 通知のscheme

```ruby:scheme.rb
  create_table "notifications", force: :cascade do |t|
    t.text "url"
    t.integer "to_user_id"
    t.integer "from_user_id"
    t.integer "notification_type"
    t.datetime "open_time"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end
```

- open_timeに開いた時刻を入れてここがnilなら未読とする
- 通知内容は最初contentカラムを設けてそのまま文言を入れるか迷ったが時間が経ってユーザー情報などが変わった際に変更が効かないのと中の情報に何が入っているのか将来分からなくなるのが嫌だったので変数を取得するように
- urlで飛び先を指定する。もし特殊なメソッドを使いたい場合はroutesでメソッドを指定する

## 一覧を開いたらopen_timeに時間を入れる

```ruby:app/controllers/notifications_controller.rb
    unread_notifications = @notifications.where(open_time: nil)
    unread_notifications.each do |unread_notification|
      unread_notification.open_time = Date.today.to_time
      unread_notification.save
    end
```

上記繰り返し処理で現在時刻を入れていく

## headerにて未読がある場合とアイコンを出しわけ

```ruby:app/controllers/application_controller.rb
@notification_count = Notification.where(to_user_id: current_user.id,open_time: nil).count
```

上記で未読数を取得

```ruby:app/views/layouts/_header.html.erb
      <div class="mr-4">
        <% if @notification_count > 0 %>
          <%= image_tag('notification_icon_unread.png',class: "header_icon align-middle") %>
        <% else %>
          <%= image_tag('notification_icon.png',class: "header_icon align-middle") %>
        <% end %>
      </div>
```

0より上だったらバッジなし
Warning: Can't perform a React state update on an unmounted component.

#投票アプリ作成中、よくわからない警告に遭遇
投票作成ページにて、投票を作成すると、投票を表示させるメインページに戻るが、その際に毎回、以下のような警告が出ていた。

######Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

######（日本語）警告：マウントされていないコンポーネントでReact状態の更新を実行することはできません。 これは何もしませんが、アプリケーションのメモリリークを示しています。 修正するには、useEffectクリーンアップ関数のすべてのサブスクリプションと非同期タスクをキャンセルします。 

###警告が出る理由
useEffet内で、まだ、firebaseからすべて読み込まれていないのに、setQuestionsを実行しようとするから警告が出る。

```javascript
const VotesList = () => {
  const [questions, setQuestions] = useState(null);

  useEffect(() => {
    firebase
      .firestore()
      .collection("questions")
      .orderBy("timestamp", "desc")
      .onSnapshot((snapshot) => {
        const questions = snapshot.docs.map((doc) => {
          return {
            username: doc.data().username,
            question: doc.data().question,
            answer1: doc.data().answer1,
            answer1Id: doc.data().answer1Id,
            answer2: doc.data().answer2,
            answer2Id: doc.data().answer2Id,
            docid: doc.id, //<- keyを設定するためにidを取得、あとで削除機能等をつける
          };
        });
        setQuestions(questions);
      });
  }, []);

  return (
    <>
      <ul>
        {questions?.map((question) => {
          return <CountVotes question={question} key={question.docid} />;
        })}
      </ul>
    </>
  );
};
```

###対処法
下記のように書き直すことで、警告は出なくなった。
アンマウント時にはsetQuestionsは実行せず、
マウント時のみsetQuestionsが実行するようにする。
まだDOMに無い時には return dispose で一度回避するイメージ。

```javascript
  useEffect(() => {
    let disposed = false;
    const dispose = () => {
      disposed = true;
    };
    firebase
      .firestore()
      .collection("questions")
      .orderBy("timestamp", "desc")
      .onSnapshot((snapshot) => {
        const questions = snapshot.docs.map((doc) => {
          return {
            username: doc.data().username,
            question: doc.data().question,
            answer1: doc.data().answer1,
            answer1Id: doc.data().answer1Id,
            answer2: doc.data().answer2,
            answer2Id: doc.data().answer2Id,
            docid: doc.id, //<- keyを設定するためにidを取得、あとで削除機能等をつける
          };
        });
        !disposed && setQuestions(questions);
      });
    return dispose;
  }, []);
```
Dockerのメリットをまとめてみました

#はじめに
ポートフォリオの開発環境をDockerで構築することにしました。
なぜDockerを開発環境として選んだのかを改めて自分で理解するために、Dockerのメリットをまとめてみました。

#参考文献
[Docker/Kubernetes 実践コンテナ開発入門](https://gihyo.jp/book/2018/978-4-297-10033-9/)

#Dockerとは何なのか？
仮想環境の一つです。
仮想環境とは一つのハードウェアの中で、仮想的な環境を構築したもので、一つのハードウェアで複数のサーバーを仮想的に動作させることもできます。
Dokcerは仮想環境の中でもコンテナ型仮想環境という種類の仮想環境になります。
Dockerの特徴としましては、軽量で高速で動き、環境の差異に左右されにくいという特徴があります。
仮想環境には大きく種類が二つあり、ホスト型仮想環境とコンテナ型仮想環境の2種類があります。

#ホスト型仮想化とコンテナ型仮想化の違い

![スクリーンショット 2021-05-02 11.57.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571061/38fd8d21-c904-4e13-3531-eaa075dc9f02.png)


上の図で簡単に違いを表しています。

ホストOS型はハードウェア上に仮想化ソフトウェアをインストールし、仮想化ソフトウェアで仮想マシンを稼働させます。
そのため、ミドルウェアを仮想環境ごとにインストールしなければなりません。ホストOSと仮想化ソフトウェアを動作させるので、ハードウェアにかかるリソースは大きいです。

コンテナ型はアプリケーションの実行に必要な部分だけを含み、ホストOSのカーネルを共有するので動作が早いです。
コンテナ型はホストOSの動作の一部としてコンテナが動作するイメージです。

#Dockerのメリット
ホスト型仮想化との違いを踏まえた上で、私が考えるDockerのメリットを紹介します。

###優れた移植性
Dockerはローカル環境と本番環境をほぼ同等に再現することができます。
ローカルのDocker環境で実行しているコンテナを別のサーバーにあるローカル環境にデプロイしたり、逆のこともできます。
例えば、ホスト型環境で、Webサーバーをローカル環境に構築する場合は、本番環境と同じ、OSをセットアップして必要なものを導入していく環境構築が必要になります。
ですが、Dockerの場合はローカル環境でDockerのセットアップが済んでいれば、アプリケーションやミドルウェアがすでにセットアップされている状態の環境ができます。

###Infrastructure as Code(インフラの構成管理）とImmutable Infrastructure(不変なインフラ)
「Infrastructure as Code」はコードでインフラの構成を定義する方法です。DockerはDockerfileやdocker-compose.ymlにインフラ構成のコードを記述してインフラを構成します。
コードを中心にすることで手作業にかかる時間を短縮します。
しかし、「Infrastructure as Code」の弱みとして、アプリケーションの頻繁なバージョン変更に対応するのが難しいという問題があります。
バージョンが変わるごとにコードの書き直すのは大変だからです。
そこで、大切になる考え方が、「Immutable Infrastructure」という考え方です。
これはある時点でのサーバーを保存して、複製していくという考え方です。サーバーに変更を加えたい場合は、インフラをアップデートするのではなく、作り直して、新しいサーバーのイメージとして保存し、複製します。一度セットアップしたものは２度と手を加えずに削除するので気にする必要はありません。

###起動開始までの時間が短い
DockerはホストOSとカーネルを共有しているため、高速で起動します。
起動が高速なため新しくインフラを作り直す「Immutable Infrastructure」と相性がいいです。

#まとめ
自分のメモ用として記事を残しました。
Dockerのメリットはホスト型仮想環境を理解することで理解できることだと改めて思いました。
この記事を見て、Dockerのメリットを理解できる人がいれば幸いです。

記事で間違った情報などがありましたら、教えていただけると嬉しいです。
【Xamarin.Forms】 グーグルマップと連携して検索を楽にする 

#はじめに
初めまして、sunn-sudoです。
青春18切符を購入して、西日本を巡っておりました。
知らない土地へ行くと、夜に泊まる漫画喫茶や近くの駅が気になって、
同じ検索ワードで３回ほど、グーグルマップで検索していました(;・∀・)

何度も同じ検索ワードをスマホで打つのは面倒くさい..

#本文

#開発環境
今回は、Androidアプリ開発に【Xamarin.Forms】を活用します。
【Xamarin.Forms】とは、
開発環境：Visual Studio
開発言語：C#

の構成となっています。

#ソースコード
```xml:MainPage.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppGoogleMap.MainPage"
             Title="Native map app">
    <StackLayout Margin="10">
        <Label Text="現在地周辺のスポットを検索します。" />
        <Button Text="銭湯" Clicked="OnButtonSearch" />
        <Button Text="温泉" Clicked="OnButtonSearch" />
        <Button Text="ゲーセン" Clicked="OnButtonSearch" />
        <Button Text="ランチ" Clicked="OnButtonSearch" />
        <Button Text="漫画喫茶" Clicked="OnButtonSearch" />
    </StackLayout>
</ContentPage>
```

```c#:MainPage.xaml.cs
using System;
using Xamarin.Essentials;
using Xamarin.Forms;
using Plugin.Geolocator;
using Plugin.Geolocator.Abstractions;

namespace AppGoogleMap
{

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        async void OnButtonSearch(object sender, EventArgs e)
        {
            if (Device.RuntimePlatform == Device.Android)
            {
                try
                {
                    IGeolocator locator = CrossGeolocator.Current;
                    // 1. 50mの精度に指定
                    // locator.DesiredAccuracy = 50;
                    Position position = await locator.GetPositionAsync();

                    string result = position.Latitude.ToString() + ',' + position.Longitude.ToString();
                    // タップしたボタンのテキストを取得
                    string search_text = ((Button)sender).Text;
                    // 現在地の座標を基準にグーグルマップ検索を行う
                    await Launcher.OpenAsync("geo:" + result + "?q=" + search_text);
                }
                catch
                {
                    // 位置情報権限が許可されていない場合
                    await DisplayAlert("確認", "位置情報をオンにしてください。", "OK");
                }

            }
        }
    }
    
}
```
#動作内容

![Screenshot_20210502-133525.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951197/8e2bf31b-0ab4-e01d-d019-5379b51808f3.png)

「銭湯」をタップすると..

![Screenshot_20210502-133016~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951197/efe7a780-238d-d8ba-f45a-e92f29e7a3e1.png)

グーグルマップの検索文字として扱われる。

#参考
https://www.buildinsider.net/mobile/xamarintips/0063

#完成版はこちらです
https://qiita.com/sunn-sudo/items/3bb58cf7c26bb7aeb493
Debianでdoom-emacsを使う

# 準備
　doom-emacsを導入するためにはバージョン26.3以上のバニラemacsが必要です。しかしながら、debianで`apt`を使ってemacsを導入すると、標準ではバージョン26.1のものがインストールされます。そのため、ここでは最新版のemacsをビルドします。(2021/5/1現在)

###必要なパッケージのインストール
```console
sudo apt install git gcc make ncurses-dev xorg-dev libjpeg-dev libgif-dev libtiff-dev gnutls-dev
```

###emacs本体のダウンロード
　[jaist](http://ftp.jaist.ac.jp/pub/GNU/emacs/) のミラーから、最新版の`tar.gz`ファイルをダウンロードします

###ビルド
　もし既にosパッケージでemacsをインストールしている場合は、念の為削除しておきます

```
sudo apt remove emacs emacs-gtk emacs-lucid emacs-nox
sudo apt autoremove
```

　先ほど落としてきたファイルがあるディレクトリに移動した後に、

```console
tar xvf emacs-27.2.tar.gz
cd emacs-27.2
./configure
sudo make
sudo make install
```

emacsのバージョンは、ダウンロードしたものに合わせて適宜読み替えてください

# doom-emacsの導入
　もしホームディレクトリ直下に`.emacs.d`がある場合は、事前に名前を変更しておいてください。
その後、

```
git clone --depth 1 https://github.com/hlissner/doom-emacs ~/.emacs.d
```
```
~/.emacs.d/bin/doom install
```

`.profile` に `export PATH=$PATH:~/.emacs.d/bin` を追記してください。
bash以外を使っている場合は、それぞれの設定ファイルに上記パスを追加してください。
その後、

```
source .profile
```
をするか、再起動をして`.profile`を再読込みします。
`doom`コマンドが利用可能になっているはずです。

```
doom upgrade
```
その後guiでemacsを起動すると、doom-emacsのホーム画面が表示されるはずです。

##参考資料
>[emacsをソースコードからビルドしてインストールする](https://myemacs.readthedocs.io/ja/latest/build.html)

>[doom-emacs(GitHub)](https://github.com/hlissner/doom-emacs)
[OpenXR対応] XR Interaction Toolkitのセットアップ方法

XR Interaction ToolkitがOpenXRに対応していたのでセットアップの方法を自分用のメモとして書きます

#XR Interaction Toolkitの特徴
- クロスプラットフォーム開発
    - Oculus
    - HTC Vive
    - Windows MRなど

#流れ
1.unity2020.2以降をインストール
2.XR Interaction Toolkitのインストール
3.Oculus quest用の設定


#1.unity2020.2以降をインストール
Android Build Supportも一緒にインストールしておくとOculus questでの開発ができます

#2.XR Interaction Toolkitのインストール
- window > Package Managerから「XR Interaction Toolkit」をインストール

※右上の歯車から設定画面を開いて「Enable Preview Packages」にチェックをいれます
![スクリーンショット 2021-05-01 121204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474440/8fb7c07f-7310-afa3-4b48-ca8d119b2390.png)

- Samplesから「Default Input Actions」をインポートしておきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474440/290313ee-c7e8-b63a-250a-e92fefe1a853.png)

- Asset > Samples > XR Interaction Toolkit > 1.0.0-pre.3 > Default Input Actionsにある
    - 「XRI Default Left Controller」
    - 「XRI Default Right Controller」
 
を選択してインスペクターの「Add to ～」をクリック

- Edit > Project Setting > Preset Manager
画像のようにします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474440/6cc50ca7-8c68-a6ed-42ad-80ddd064935b.png)

# 3.Oculus quest用の設定
- Androidにプラットフォームを変える

- Edit > Project Setting > XR Plugin Management
「Install XR Plugin Management」をクリック。
そのあとOculusにチェックをいれる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474440/a9fd049f-116c-9fac-6b5f-b858bca698de.png)

- Project Setting > Player > Other Setting
RenderringのColor Sapceを「Liner」に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474440/38da26d6-21fd-704f-57b5-4b6974f28e4b.png)

- 画像のように変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474440/9c3069bb-04b6-75b1-62a2-c95cc1461286.png)



- Project Settings > Quality
画像のように変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474440/4ec48abe-23ea-7e80-51f4-e68936967479.png)

- Build Settings > Texture Compressionを「ASTC」に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474440/7e6b9028-4860-c3fc-cf5e-240b713ad585.png)

- Side Questを入れる
https://vracademy.jp/development/install_sidequest/

- Run DeviceにOculus questがあるか確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474440/244e7a37-414b-c97a-ac18-bdb0cf48ae8c.png)

# 参考にしたサイト
- https://www.udemy.com/course/oculus-quest-development-with-unity/
モナコインで投げ銭できる機能をつけたQiitaみたいなサービス開発してみた


モナレッジというサービスを開発しました

https://monaledge.com/

![Screen Shot 2021-05-02 at 13.32.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204506/7a497543-91e7-aa34-4aab-9f91d66441b4.png)

モナレッジはqiitaやzennのようにmarkdownで記事を書いて投稿できるサービスです。

一番の特徴は、良い記事を書いた著者に対してMONACOINを投げつけることができることです。将来的にはmonapartyを使ったトークンとかも扱えるようにしたいと思っています。

## 開発経緯

qiitaで記事を書いてくださっている皆さんの情報発信のありがたさは常日頃感じていますが、その感謝を送る方法として「いいね」や「シェア」くらいしかできないことにもどかしさを感じていました。

インターネット上でお金を扱う方法として、bitcoinに代表されるような、公開鍵暗号の方式を利用したUTXO構造でお金を動かすというのは結構よくできた仕組みだなぁと思っています（もちろん、すべて自己責任なのでGOXとかしたときとかに何もすることができないデメリットもありますが）。

とりわけ、投げ銭などの使い道っていうことだと、モナコインとかの方がクレカ登録して投げ銭とかよりもお気軽だし、有事の際のリスクも低いんじゃないのかなぁとおもっています。


ちょっと動かす用のウォレットを作成して（これはめっちゃ簡単にできる。BIP32以降の仕組みによって、リカバリーフレーズさえちゃんと管理すれば、複数の秘密鍵の管理もそんなに苦ではない）、そこに数MONA入れたじょうたいで投げ銭をするというのも良いだろうし、

まだMONAを持っていない人は、bitbankとかの取引所で購入するか、記事を書いてMONAをもらったりするのが良いかも。


## 開発の思い

僕が、いわゆる暗号資産にかんするところで違和感を感じているのが、投機の対象にばかり注目が集まりがちなところです。

まあ、ボラティリティが大きくなるような仕組みなのでその手のものが好きな人は好きなんでしょうが、個人的にはこの技術を使ってどんな新しいサービスができるのかなぁというところの方が気になるところではあります。

このサービスではサインアップの際に、パスワードが必要ありません。どうしてそんなことができるかというとデジタル署名を利用しているからです。

このサービスではログインをする代わりに、記事の投稿時などユーザの識別が必要なタイミングではデジタル署名を求めるようにしています。

デジタル署名に関してわからない方は、これを機に公開鍵暗号などと合わせて一度勉強してみてください。暗号資産を扱う上で知っておいた方がいいと思います。

ユーザ認証のタイミングで署名を求め、バックエンドで署名を検証することでユーザを認証する仕組みをとっています。

そんなこんなでweb3.0っぽいけど、おそらくピュアな3.0じゃないので2.5くらいなのかな？

## 機能

記事を書く人はmdで記事を書けます


読んだ人は、良いなと思った記事に投げ銭をすることができます。

![Screen Shot 2021-05-02 at 13.35.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204506/92338bd6-a498-126c-d85b-029df6b1da32.png)





## 開発技術

ここからはエンジニアが興味ありそうな部分

* フロント : Vue, Nuxt
* バックエンド : Node.js, Express, postgres


基本的には、フロントで署名を作成し、バックエンドでリクエストの検証をデジタル署名の検証で行うという流れになります。

なので、いわゆる一般的なwebサービスなどとは一味違ったUXになっていると思います。
その辺は使って感じてみてください


大事なのは, mpurseという拡張機能。
Ethereumのmetamaskに相当するものですね。

これが、送金、署名作成（厳密にはこれが送金の大部分でもあるんだけど、そこは割愛）などをフロントのロジックでやってくれます。

これにより、バックエンド側にユーザの機密情報（カード情報、パスワード、etc）を持たずとも、ユーザを認証し、送金機能を持たせることが可能になります。

これは開発者にとってはかなり嬉しいことで、
お金とユーザ情報を扱うサービスなのに、サーバ側にその情報を保存しておかなくて良いので、とても開発しやすいです。

これは、公開鍵暗号の仕組みがベースになっていて、
暗号を利用したアプリケーションの台頭で、クライアントが秘密鍵を持ち始める動きが進んことで、なし得ることができる設計です。


まだまだ、この分野は開拓途中なので、みんなで盛り上がって
楽しんでいきましょう。
AtCoder Beginner Contest 081

 問題文
黒板に 
N
 個の正の整数 A1.......ANが書かれている
すぬけ君は，黒板に書かれている整数がすべて偶数であるとき，次の操作を行うことができます．

黒板に書かれている整数すべてを，
2で割ったものに置き換える．
すぬけ君は最大で何回操作を行うことができるかを求めてください．


答え
      
 # 整数の入力
length = int(input())
numbers = map(int, input().split())
#リストを使うと下記のように出力される。
#print(list(numbers))
#[5, 6, 8, 10]

#これをこのままmap関数で一つずつ処理をしてあげたい
#引数が配列、何回処理できるか返す関数を作る 


   #回数をまずは０で定義
	count = 0
   # 繰り返し処理。偶数なら〜
	while n % 2 == 0:
		n /= 2
        #回数を1上げる
	    count += 1
        #割れなくなったら返す
	return count
#最大で何回操作を行うことができるかなので、帰ってきた値の中で一番小さい数を出力する
ans = min(map(how_many_times_divisible, a))
 #答え
print ans


引数が配列、何回処理できるか返す関数を作る
def how_many_times_dibisible(n):


学んだこと
・繰り返し処理の種類
・returnの使い方
感想
繰り返し文でfor文ではなくwhile文を使うところがいまいちしっくりきていない
最大で何回操作を行ったかの問題で最小の値を返すのは逆説的で面白い
Effective Java(第3版) 項目5 資源を直接結び付けるよりも依存性注入を選ぶ

インスタンス生成時に、依存する資源(インスタンス)をコンストラクタに渡すことで、
依存性注入(Depenency Injection)を行うべき、という内容です。

# 記載内容
## 以前性注入について
名前を知らずに多くのプログラマが使用している。
使用することで、クラスの柔軟性、再利用性、テスト可能性が大幅に向上する

## Factory Methodパターン
パターンの変形として、資源のファクトリを渡すことで、Factory Methodパターンとすることもできる。
Java8で導入されたSupplier<T>は、ファクトリを表現するのに向いている。

## フレームワーク
プロジェクトの規模が大きい場合、依存性注入によりソースが複雑化してしまう可能性がある。
Dagger、Guice、Spring等のフレームワークを使用することで、
整理することが出来る。
手作業で依存性注入パターンを使用していた場合、フレームワークを容易に導入できる。

# 考察
Depenency Injectionは、フレームワークにより行うものというイメージが強いかもしれませんが、
コンストラクタにより手動で依存性を注入することでも、多くのメリットが有ります。
特に、テスト自動化を行う上で、処理をモックに差し替えが可能になるのが大きいです。
[VBA]指定したワークシートが存在するかチェックするマクロ

## [0]はじめに
Zitanです。
実務でマクロを書く時に、「インデックスが有効範囲にありません」というエラーに出会ったことはないでしょうか。
今回は指定したワークシートが存在するか事前にチェックするマクロ(自作関数)です。
エラーハンドリング的な用途に使える部品なので必要に応じてご利用下さい。
プログラムは一から全部作るより誰かが作った便利な部品を組み合わせたほうが開発効率が上がります。

## [1]コード

必要に応じてカスタマイズは必要ですが、このまま使うことができます。

```ruby:現在開いているExcelにSheet4が存在するかチェックして結果をメッセージボックスで表示する
Sub シートの存在チェック()
  If flgSheetExsist("Sheet4") = True Then
    MsgBox "存在します"
  Else
    MsgBox "存在しません"
  End If
End Sub

Function flgExsistSheet(ByVal WorkSheetName As String) As Boolean
Dim sht As Worksheet
  For Each sht In ActiveWorkbook.Worksheets
    If sht.Name = WorkSheetName Then
        flgExsistSheet = True
        Exit Function
    End If
  Next sht
flgExsistSheet = False
End Function
```

Subプロシージャは動作確認のために書いているコードなので用途に応じてカスタマイズして下さい。
流用できる部品としての部分は、Function以下です。
関数名が「flgSheetExsist」です。戻り値がBoolean型(True/False)なので関数名の頭にflg(フラグ)という名称をつけています。

使い方ですが、Subプロシージャ内でflgSheetExsist("シート名")と入力します。
"シート名"が引数です。文字列なので”(ダブルクォーテーション)で囲む必要があります。

※「y=x+1」であれば、xが引数でyが戻り値という関係性になります。

## [2]コードの解説

```ruby:関数の部分について
Function flgExsistSheet(ByVal WorkSheetName As String) As Boolean
Dim sht As Worksheet
  For Each sht In ActiveWorkbook.Worksheets
    If sht.Name = WorkSheetName Then
        flgExsistSheet = True
        Exit Function
    End If
  Next sht
flgExsistSheet = False
End Function
```

関数は、<font color="Red">　Function 関数名(引数名 As 引数の型) As 戻り値の型　</font>という書き方をします。
※引数の前に「Byval(値渡し)」を書かないと、デフォルトでは「ByRef(参照渡し)」になります。
　今回は特に影響ないのですが、関数実行後に、事前に宣言した変数が上書きされたくない場合、特別な理由がない場合は、「Byval(値渡し)」にします。

引数名ですが、検索するワークシート名を文字列型で渡します。
戻り値は、検索したワークシート名が存在するか真偽値で返します。

シート名の検索方法は、For Each文(コレクション処理)を使っています。
アクティブなワークブック内のすべてのワークシートに対して、引数で指定したワークシート名が存在するか探します。
※For文で、「Sheets.Count」で調べてもOKです。

見つかったらフラグをTrueにして関数から抜け出します。
見つからなければフラグをFalseにして関数が終わります。



## [3]まとめ
いかがでしょうか。
エラーハンドリングの部品として意外と使用します。
CapybaraによるSystem specで使用したコマンド振り返り

# この記事について
私が作成したテストを元に、使用したCapybaraのメソッドを解説します。
Capybaraの機能一覧を知りたい場合は下記を参考にすると良いと思います
#### Capybaraチートシート
https://qiita.com/morrr/items/0e24251c049180218db4
####rubydoc Module: Capybara::DSL
https://rubydoc.info/github/jnicklas/capybara

# 環境
Ruby 2.6.5
Rails 6.0.3.5
devise
Capybara 

# Capybaraとは？
統合テストを行う際に用いられるWeb上の操作を簡単に実行できるDSLを提供してくれるGemです。

# 実装内容
```ruby

context 'コメントを削除できるとき' do
  it 'ログインしておりコメントを投稿したユーザーだと削除できる' do
    visit new_user_session_path                            #1
    fill_in 'user_email', with: comment_user.email         #2
    fill_in 'user_password', with: comment_user.password
    find('input[name="commit"]').click                     #3
    expect(current_path).to eq(root_path)
    click_link 'テストタイトル', href: article_path(article)   #4
    expect(current_path).to eq(article_path(article))
    expect(page).to have_link '削除', href: article_comment_path(article, comment)
    page.accept_confirm('本当に削除しますか？') do              #5
      click_link '削除', href: article_comment_path(article, comment)
    end
    expect(current_path).to eq(article_path(comment.article))
    expect(page).to have_content('コメントを削除しました')       
  end
end
```

# #1 visit
visit以降に設定したパスへ移動し、この際のリクエストは必ずGETになります。
今回はgemのdeviseを導入して作成されたログインページへアクセスしています。

# #2 fill_in
これはtext_fieldやtext_areaなどの入力を必要とする要素に指定した値を挿入するメソッドです
今回の例では**'user_email'**という属性値を持った要素に、事前に準備したユーザのEメールアドレスを指定しています。
**with:**はStringであれば良いので以下の様に直接打ち込んでも問題ありません。

```ruby
 fill_in 'user_email', with: 'test@test.mail'
```
# #3 find, click
まず**find**ですがこれは指定した要素を見つけるメソッドです
そして**click**は文字通りクリックを行うメソッドです
**find**で要素を探して、**click**でクリックするという動作になります

# #4 click_link
これは指定した要素を持つリンクをクリックするメソッドです。
今回はテストタイトルという要素を持ったリンク要素をクリックしています。
**link**と指定しているだけあってリンクでなければクリックできません。
リンクかボタンか判断に困ったら**click_on**を使うのも手です。
これはどちらの要素であってもクリックを行なってくれます。

# #5 accept_confirm
大トリです。これはHTML5のHTMLに独自にデータを持たせるデータ属性の一つであるdata-confirm属性の判定に用います。
まずdata-confirm属性ですが、これはaタグやformタグのsubmitボタンの属性に追加することでダイアログを表示してくれるものです
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790862/c267ce37-2161-c234-b1f9-22c7bc376783.png">
**accept_confirm**ですがこれはダイアログを認可つまりOKという判定を行なってくれるメソッドです。
又引数にダイアログに表示される文字を入力する事で、data-confirmで指定した文言と、テストで判定したい文言を照らし合わせて判定してくれます。
記述は以下の様にaccept_confirmに引数を渡し、又ブロック変数でdata-confirmを発生させる要素を指定します。

```ruby
page.accept_confirm('本当に削除しますか？') do              #5
  click_link '削除', href: article_comment_path(article, comment) # <-data-confirmを持った要素
end
```

# まとめ
便利なGemですがその分覚えることも増えるため、自分のアプリ作成での計画性に合わせて学習していきたいところです。
テストも時間をかけ過ぎて他が疎かになったら、本末転倒ですからね。勿論テストは重要な部分ではありますが。
AtCoder Beginner Contest 085 A,B,C

ここではAtCoder Beginner Contest 085の過去問の復習を兼ねて記述する

考え方として
同じ直径の餅を使うことはできないので重複するものを除いて考える
そのために集合型の要素数を取得するsetを利用する

//nを数字で指定
//dは直径のため繰り返し処理を行うためfor文を用いる
n=int(input())
d=[int(input()) for i in range(n)]
//集合型の要素数を取得
print(len(set(d)))
railsでorするとき、atter = nil時に不要な sqlを節約する　（手元では400倍早くなった）

# この記事は備忘録です

DB（例）

```
(id, first_name, last_name, email)
1	しのぶ	胡蝶	aaa@aa.com
2	杏寿郎	煉獄	bbb@bb.com
3	義勇	冨岡	ccc@cc.com
4	小芭内	伊黒	ddd@dd.com
5	天元	宇髄	eee@ee.com
6	蜜璃	甘露寺	fff@ff.com

```
モデル（例）

```ruby
# User.rb
# id           :int      
# first_name   :string
# last_name    :string
# email        :string    

first_name_attr = "しのぶ"
last_name_attr  = nil
email_attr      = "fff@ff.com"

  
  User.where(first_name: first_name_attr)
      .or( User.where(last_name: last_name_attr) )
      .or( User.where(email: email_attr) )
           
```
この場合、last_nameのところ、いらないっすよね〜でもこれって、sql的に

```sql
SELECT COUNT(*) FROM `users` WHERE (`users`.`first_name` = 'しのぶ' OR `users`.`last_name` IS NULL ... )

```
となるんですけど、orなのに IS NULL って処理いらないなって。（whereでandとかになるならもちろんいる）
そして、この処理が結構重いので、railsの仕組みを使って軽くしよう、というのが今回の目的です。
（※ まあこれは実践的ではないかもしれないのでメンバーと要相談ということでお願いいたします。。）


# 結論

nilだと IS NULL の処理が走ってしまうので[]にする。

```ruby
last_name = (last_name == nil ? [] : last_name)

```

nilの場合は[]に変換することで

```sql
SELECT COUNT(*) FROM `users` WHERE (`users`.`first_name` = 'しのぶ' OR 1=0  ... )
```

なって処理を飛ばすことができ、大幅に早くなります。

もし開発する上で、表示するとき遅いし、一旦仮で早くしたいとかいう事情がある場合には結構有効かなと思います。
ただし、上記にもあるように、
「実践的ではないかも。。」「ちょっと気持ち悪いな〜」

みたいな意見があり、この実装は見送られておりますのでご注意を。
おそらく、シンプルにifで分岐する方がいいのかなという意見です。
ただし、sqlは一つに纏まるような記述が必要そうです。

# 実践的にはこうなった　（2021/05/06 更新）

```ruby

    users = first_name.present? ? User.where(first_name: first_name_attr ) : User.none
    users = users.or(User.where(last_name: last_name_attr)) if last_name.present?
    users = users.or(User.where(email: email_attr)) if email.present?

```

## モデル.noneで空のActiveRecord_Relationを取得

こうすることで、attrがない場合、sqlを無視することができるのでより無駄を減らせる。
これを応用し、現在携わるプロジェクトでは

1822.0ms => 3.9ms

これだけ改善した。
IS NULL がなくなるだけでこれだけ軽くなるんだなと改めて血肉になった思い。

## sql改善例

改善前

```sql
User Load ( ms)  SELECT `users`.* FROM `users` WHERE ((`users`.`first_name` IS NULL  OR `users`.`last_name` = '冨岡' ) OR `users`.`email` IS NULL ) 
```
改善後

```sql
User Load ( ms)  SELECT `users`.* FROM `users` WHERE `users`.`last_name` = '冨岡'
```
Use CMD command to temporarily modify DNS

## 

### 1. Open the search icon in the lower left corner of the computer and search for the cmd program，Right click the mouse and select "Run as administrator"

#### First test whether the domain name can be resolved normally
```powershell
ping www.japanenka.tk
```
<font color=red>If it can communicate normally then it is not the cause of DNS，If this domain name cannot be resolved, please follow the steps below</font>

### 2. Execute the following three commands in order in the command line（After entering the command, press Enter to execute）<font color=red>If you are using a WIFI connection, please change "Ethernet" to "WLAN"</font>
Temporarily modify DNS to `80.80.80.80`

```powershell
netsh interface ip set dns Ethernet static 80.80.80.80
ipconfig /flushdns
ipconfig /registerdns
```

### 3. Then revisit the resource link

### 4. Revert to your local DNS
```powershell
netsh interface ip set dns Ethernet dhcp
ipconfig /flushdns
```
Adalo Listのオプション

Adaloでは「ADVANCED OPTIONS」から「Auto Refresh、Load Items as User Scrolls」の2つのオプションを選択できます。

Auto RefreshはListに新しい要素が追加されたときに画面を更新せずとも自動で追加してくれる機能です。
メッセージ機能などでは必須のオプションですね。

Load Items as User Scrollsはスクロールに合わせで要素を読み込むみたいです。
数の多いデータだと1度に全て取得するのは時間がかかるので場所に応じてうまく活用していきたいですね。