OmniAICreator/Qiita-1.07M huggingface dataset:
AWC EC2にWebシステムのデプロイ（下書き



つらつらと仕事中の備忘録
書きながらやっているので後日清書予定
AWSEC2にDocker+Railsの環境を構築してテストしようという作業

EC2インスタンス
・最低コスト
・とにかく動け
・Ubuntu



流れ

・手始めにEC2にセキュリティグループの設定を修正
　→テラターム接続は失敗したので暫定でGit Bushで接続。上記設定に関係あるか不明

・下記URLを参考にDockerとDockerComposeをaptとcurlを使ってインストール。

・sshの設定、key登録をgithubと”EC2インスタンス”にする（Ec2側にssh-addをかまさないとダメ。また、かますときはevalでプロセス明確する）

・gitcloneをする（解決）
　→sudo chown ユーザー名:ユーザー名 /var/www # 現ユーザーに権限付与　をしてなかった

・dockerをデプロイ（権限がなくて混乱）
　→https://virment.com/how-to-fix-couldnt-connect-to-docker-daemon/
　ここを参考に修正中
・build up startを流し終り

・http接続が未完了。原因不明（ルート、及びデフォルトゲートウェイは問題なし）
pingは飛ぶが、portがあいていないのでセキュリティグループの問題？
あるいはそもそも公開設定がなされていない？

参考URL
・https://zenn.dev/supersatton/articles/e49d8cb942091e
・https://qiita.com/obr-note/items/44290f2011ad09240129#docker%E3%82%92ec2%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB
・https://zenn.dev/keikuchen/articles/cffa31d69ecaae7e91d7
・https://webree.jp/article/ssh-add-error/
・https://qiita.com/konuma1022/items/986eb58d4b94bef0c0a5
・https://qiita.com/Hide-Zaemon/items/400b21183197481ecef4
Twitter Oauth1.0認証方法メモ [golang]

## Twitter開発者登録
1. プロジェクト作成
1. アプリ作成
    1. API KeyとAPI Secretを控えておく（ドキュメントではConsumer KeyとConsumer Secretと記載されている）
    1. Setting画面からOAuth1.0aを有効化する
    1. App permissionsを変更する（投稿処理はRead and write）
    1. Callback URI/Redirect URLを設定する
        1. 認証画面でユーザーが認証実行した後に遷移するURL

## Go言語での実装

### ライブラリのインストール
```bash:bash
# https://github.com/dghubble/oauth1
go get github.com/dghubble/oauth1
```

**認証画面URLの生成**
```go:main.go
import (
	"net/url"

	"github.com/dghubble/oauth1"
	"github.com/dghubble/oauth1/twitter"
)

// oauth1のconfig作成
conf := &oauth1.Config{
	ConsumerKey:    [ConsumerKey],
	ConsumerSecret: [ConsumerSecret],
	CallbackURL:    [CallbackURL],
	Endpoint:       twitter.AuthorizeEndpoint,
}

// Oauth認証用のリクエストトークン発行
// requestTokenとrequestSecretをDBに保存しておく
requestToken, requestSecret, err := conf.RequestToken()
if err != nil {
	// エラー処理
}

// Oauth認証画面のURL発行
authorizationURL, err := conf.AuthorizationURL(requestToken)
if err != nil {
	// エラー処理
}

// フロントサイドで遷移処理を実行する
return authorizationURL
```

**アクセストークンの生成（認証画面からのコールバック処理）**
```go:main.go
// NOTE: echo.Contextからクエリパラメータを読み取る前提で処理を記載しています
oauthToken := ec.QueryParam("oauth_token") // == request_token
oauthVerifier := ec.QueryParam("oauth_verifier")

// 認証画面URLの生成 でDBに保存したrequestSecretを
// oauthToken（requestToken）から取得
requestSecret := getRequestSecret(oauthToken)

conf := &oauth1.Config{
	ConsumerKey:    [ConsumerKey],
	ConsumerSecret: [ConsumerSecret],
	CallbackURL:    [CallbackURL],
	Endpoint:       twitter.AuthorizeEndpoint,
}

// accessToken, accessSecretをDBに保存しておく
accessToken, accessSecret, err := conf.AccessToken(oauthToken, requestSecret, oauthVerifier)
if err != nil {
	// エラー処理
}

```
開発に役立つInteliJのショートカット

# はじめに
仕事でInteliJを使う機会があり、その際にショートカットキーを調べたので、
自分が有用だと思うショートカット一覧を作りました。
他にもショートカットがまとめてある記事はたくさんあります。
しかし、以下の二つの点が私的には問題があると思います。
<strong>・あまり使わないものも多く、見返すのに時間がかかる。
・初めて覚えるときに多すぎて覚えきれない。</strong>

本記事では、有用なものに絞って掲載します。

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [コーディングに役立つショートカット集](#Chapter1)
1. [コードリーディングに役立つショートカット集](#Chapter2)
1. [その他、地味に役立つショートカット集](#Chapter3)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# コーディングに役立つショートカット集
・矩形選択
　Alt + マウスクリックして移動

・行削除
　Shift + Delete

・テンプレートを開く
　Ctrl + J

・リネーム
　Shift + F6

・選択行を上下移動
　Alt + Shift + ↑ or ↓

・行コピー
　Ctrl + D

<a id="#Chapter2"></a>
# コードリーディングに役立つショートカット集
・ひとつ前の場所に戻る
　Ctrl + Alt + ← (→で進む)

・ファイル内検索
　Ctrl + F

・複数ファイルを横断して検索
　Ctrl + Shift + F

・定義、使用箇所に移動
　Ctrl + B

・Interfaceの実装箇所に移動
　Ctrl + Alt + B

・変数使用箇所に移動
　Ctrl + Alt + F7

・ストラクチャウィンドウ表示切替
　※ストラクチャウィンドウはクラスの構造を見れます
　Alt + 7

<a id="#Chapter3"></a>
# その他地味に役立つショートカット集
・開いているタブを閉じる
　Ctrl + F4
IISのアクセス権でハマった話

# 概要
IISに公開しているWebアプリ上で別サーバーのフォルダへ参照、アップロードを行う際にエラーが出て苦戦した話

# 結論
ASP.NETの偽装で解決

# 構成
![構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641298/08b7a808-72be-24f9-091b-6094897c2777.png)
わかりづらくてすみません。
どちらもIISでファイルサーバーを仮想ディレクトリとして持っているのは同じ。
違うのはVisualStudioからアプリを動かしているか、IIS上に公開しているかの違いです。

# 原因
VisualStudioから起動した時のユーザーは、VisualStudioを立ち上げたユーザーのアカウント(=自PCのアカウント)
IISから起動している時のユーザーは、[アプリケーションプールID](https://docs.microsoft.com/ja-jp/previous-versions/ee886292(v=technet.10))となり
ドメインローカルグループに属していないためアクセスできない？

# 解決法
Web.configに以下記述を追加
```xml:Web.config
<identity impersonate="true"
          userName="アプリサーバのユーザーネーム"
          password="アプリサーバのパスワード">
```

IISの仮想ディレクトリのパススルー接続にアプリサーバのアカウントを登録
![パススルー1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641298/a41873f7-7ba5-6a4d-8fdb-a4c174eeb7ba.png)
![パススルー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641298/8f8bd647-96bc-5861-f70a-f7be017af48e.png)
![パススルー3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641298/7d586db9-44f8-f80f-f753-203ef5571c02.png)

上記設定を行うことでアプリからファイルサーバへの参照、アップロード、ダウンロードが可能になった。

# 疑問点
仮想ディレクトリとして公開しているファイルサーバはEveryOneに対してフルコントロールを許可しているのにアクセス出来ないのは何故か。

続報あったら追記します。

# 参考にしたページなど
https://social.technet.microsoft.com/Forums/ja-JP/6ee35cec-3eb8-460c-b2a7-8d62bed5db6b/21029124691254012496123982084926377125011245712523124801243420?forum=iis7ja

https://social.msdn.microsoft.com/Forums/ja-JP/4172e446-ec1b-4e81-8516-536386627e6b/windows-server?forum=aspnetja

https://jablogs.com/detail/102643
RuboCopの導入方法メモ

RuboCop導入方法の備忘録です。

## 環境
macOS Monterey 12.3.1
ruby 3.1.2
rails 6.1.6

## インストール方法
Gemfileに必要なgemを追記する。
```ruby:Gemfile
group :development do
  gem 'rubocop', '~> 1.29', require: false
  gem 'rubocop-performance', require: false # 拡張機能
  gem 'rubocop-rails', require: false # 拡張機能
  gem 'rubocop-rspec', require: false # 拡張機能
end
```
bundle installする。

```sh:ターミナル
bundle install
```

## 初期設定など
```sh:ターミナル
bundle exec rubocop --auto-gen-config
```
を実行すると`.rubocop.yml`, `.rubocop_todo.yml`が生成される。

`.rubocop.yml`に必要な文を追記する。

```.rubocop.yml
inherit_from: .rubocop_todo.yml

require:
  - rubocop-performance # 拡張機能
  - rubocop-rails # 拡張機能
  - rubocop-rspec # 拡張機能

AllCops:
  NewCops: enable
  Exclude:
    - 'bin/*'
    - 'db/**/*'
    - 'tmp/**/*'
    - 'vendor/**/*'
  TargetRubyVersion: 3.1

# RuboCopの設定を追記する
```

`.rubocop_todo.yml`は、作成時点で違反しているファイルを除外するための設定が入っている。

```.rubocop_todo.yml
# This configuration was generated by
# `rubocop --auto-gen-config`
# on 2022-05-19 13:14:16 UTC using RuboCop version 1.29.1.
# The point is for the user to remove these configuration records
# one by one as the offenses are removed from the code base.
# Note that changes in the inspected code, or installation of new
# versions of RuboCop, may require this file to be generated again.

# Offense count: 1
# This cop supports safe auto-correction (--auto-correct).
# Configuration parameters: EnforcedStyle, IndentationWidth.
# SupportedStyles: with_first_argument, with_fixed_indentation
Layout/ArgumentAlignment:
  Exclude:
    - 'config/application.rb'
・・・
```

最終的には`.rubocop_todo.yml`の記述が無くなるように、ファイルを修正したり、`.rubocop.yml`にRuboCopの設定を追加したりする。

## コマンド
```bash:ターミナル
bundle exec rubocop # チェックのみ
```
```bash:ターミナル
bundle exec rubocop -a # 指摘箇所を自動で修正
```

## 参考にさせていただいた記事
https://qiita.com/piggydev/items/074e020e07af7ebc872d

[Rubocop Github](https://github.com/rubocop/rubocop)
[Rubocop公式](https://rubocop.org/)
PHP8.1 + Laravel9 + Laradock + WSL2 + VSCodeでXdebugが使えない時

# 悩み
VSCodeでブレークポイントを設定しても止まらない😥
そもそもXdebugが動いているかわからない😥
502 Bad Gatewayで怒られる😥
ポート使用済みで怒られる😥

# 開発環境
* Windows10 Pro
* WSL2
* Ubuntu
* Laravel9
* Laradock
* VSCode

# 解決策
## ① **.env**ファイルの修正

🌳**ディレクトリ構造**🌳
root
├ LaravelProject
└ Laradock
　└ .env

```diff:.env
---
- WORKSPACE_INSTALL_XDEBUG=false
+ WORKSPACE_INSTALL_XDEBUG=true
---
- PHP_FPM_INSTALL_XDEBUG=false
+ PHP_FPM_INSTALL_XDEBUG=true
---
- PHP_FPM_XDEBUG_PORT=9003
+ PHP_FPM_XDEBUG_PORT=9001
---
```
※PORTが9003のままだと、VSCodeで使用済みと怒られたため、変更しています

## ② Laradockのxdebug.iniを修正

:::note warn
注意
Xdebugのバージョンで、設定する項目が異なります。
PHP8.1ではXdebug3がインストールされるため、既存のxdebug.ini(バージョン2用)を修正するだけでは動きません。
:::

**workspace**と**php-fpm**の2か所にiniファイルがあるので、修正します。

🌳**ディレクトリ構造**🌳
root
├ LaravelProject
└ Laradock
　├ workspace
　│└ **xdebug.ini**
　└ php-fpm
　　└ **xdebug.ini**

```xdebug.ini
xdebug.client_host=host.docker.internal
xdebug.discover_client_host=false
xdebug.client_port=9001
xdebug.idekey=VSCODE

xdebug.start_with_request=yes
xdebug.mode=debug
xdebug.cli_color=1
xdebug.output_dir="~/xdebug/phpstorm/tmp/profiling"

xdebug.var_display_max_children=-1
xdebug.var_display_max_data=-1
xdebug.var_display_max_depth=-1
```

## ③ docker-compose.ymlの修正
**php-fpm**にポート**9001**を追加します。

🌳**ディレクトリ構造**🌳
root
├ LaravelProject
└ Laradock
　└ docker-compose.yml

```diff:docker-compose.yml
version: '3'

services:
    php-fpm:
---
      expose:
        - "9000"
+       - "9001"
---
```

## ④ VSCodeのlaunch.jsonの修正
* **port**は上記で設定した**9001**（適宜変更してください）
* **pathMappings**の**左辺**は、Laradockの.envファイルの**APP_CODE_PATH_CONTAINER**と合わせます
* **pathMappings**の**右辺**は、.vscodeを設置するディレクトリに応じて変更してください  
  ※この場合は、下記の構造になります

🌳**ディレクトリ構造**🌳
root
├ **.vscode**
├ LaravelProject
└ Laradock

```.env
APP_CODE_PATH_CONTAINER=/var/www
```

```launch.json
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9001,
            "pathMappings": {
                "/var/www": "${workspaceFolder}"
            },
            "hostname": "0.0.0.0"
        },
```

## 注意
①、②、③の変更後は、コンテナの再ビルドが必要になります。
`docker-compose build --no-cache workspace php-fpm`
Salesforceのパスワードのセルフリセット

# 対象読者
- システム管理者
- 開発者

# こんな困りごとはありませんか？
パスワードを忘れてしまったユーザが自分で変更せずに問い合わせてきて変更するように求められる！
そんな時はパスワードの **セルフリセット** です！

# パスワードポリシー
Salesforceで設定できるパスワードポリシーには様々な設定項目があり企業のポリシーに合った設定を行うことができます。
設定可能なポリシーは[セキュリティページ](https://developer.salesforce.com/docs/atlas.ja-jp.208.0.securityImplGuide.meta/securityImplGuide/admin_password.htm)を参照していただくとして、今回はパスワードポリシーの中にあるセルフリセットに関して書いていきたいと思います。
![パスワードポリシー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2642898/ce27218c-70ff-9139-cc56-d966f1eb3e5c.png)

# セルフリセット
これはユーザ自身がAPIを利用してパスワードを変更することを許可するかどうかの設定になります。
通常運用ではパスワードを忘れたユーザはログイン画面から再設定用のリンクをメール送信できるため利用することはないのですが、知っておくと意外と便利です。

## 開発者コンソールを起動
歯車アイコンから「開発者コンソール」を選択します。
![設定リスト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2642898/5a1d9e46-8a4f-caec-f11e-38cf994eb901.png)

## ユーザのIDを取得
開発者コンソールが起動したら下図①のQuery Editorに「select id, name from user」をコピペし②のExecuteを押下します。
すると実効結果が③のように表示されます。
Id列に表示せるのがユーザのIDとなりますので、変更したいユーザのIDを控えておきましょう。
![開発者コンソール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2642898/a25b5890-1ef8-17ec-3600-58b15ad67528.png)


## setPassword APIでパスワードを変更
引き続き開発者コンソールから①のDebugを押下し、②のOpen Execute Anonymous Windowを押下後、表示される③のEnter Apex Code画面に「System.setPassword('取得したユーザーID', '変更後のパスワード');」を入力したら③のEcecuteを押下します。
これで対象のユーザのパスワードを変更することができます。
![開発者コンソール_実行.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2642898/10dbb7eb-a247-7b2a-6e6d-be231acfd829.png)


# 最後に
いかがだったでしょうか。
基本的にSalesforceのシステム管理者をされている人は画面からパスワードの再発行の通知ができるので利用する機会は余り無いと思いますが、個別にパスワードを指定されて依頼された場合や緊急でパスワードを変更したい場合等では利用できる機能だと思います。
DomoのDB2コネクターでIBM Cloudへ接続にハマった話

弊社が無償で提供している[音声文字起こしサービスの「こえカラモジ」](https://stt.alpcom.co.jp/custom/?utm_source=Qiita&utm_medium=post&utm_campaign=yas&utm_id=20220520)の稼働ログをIBM CloudのDB2で管理しています。
「こえカラモジ」稼働状況確認をBIツールのDomoで参照したくDomoが提供しているDB2コネクターを用いDB2と接続しました。
その際、DB2コネクター設定で「CERTIFICATE」欄に記述する証明書文字列に苦労（と言うか私が無知だっただけ）したので共有させてください。

特に証明書文字列の取得手順はブログ内の「動画で解説」で詳しく解説しています。

https://alpcom.co.jp/blog/20220520/?utm_source=Qiita&utm_medium=post&utm_campaign=yas&utm_id=20220520
FileMakerのスクリプトでの検索方法

# はじめに
FileMakerでの開発を行うことになり、いろいろと戸惑うことがありました。。。
特に検索方法を駆使しなければならないのですが、ネット上にはわかりやすい情報が少ない為、まとめてみました。

# FileMakerスクリプトでの検索方法
### １．検索（単純検索）

```example1.fmp12
エラー処理［オン］

検索モードに切り替え［一時停止：オフ］
フィールド設定［フィールド名；設定値］

検索実行［］
```
メモ：
　検索項目が1つの場合における検索方法です。
　最初の「エラー処理［オン］」を設定する理由は、検索時に該当データがない場合、毎回エラーが表示されるため、その抑制のためにつけておきます。


### ２．検索（複数条件での検索）
```
エラー処理［オン］

検索モードに切り替え［一時停止：オフ］
フィールド設定［フィールド名；設定値］
新規レコード/検索条件
フィールド設定［フィールド名；設定値］

検索実行［］
```
メモ：　
　検索条件が複数ある場合の設定方法です。
　ポイントは「新規レコード/検索条件」を付与し、新たにフィールド設定を設けることで検索条件をもう一つ設定するという点です。
　例文では検索条件は2個になっていますが、「新規レコード/検索条件」と「フィールド設定」を増やすことで条件は増加させることができます。


### ３．検索条件からの絞り込み（除外）
```
# 通常検索
検索モードに切り替え［一時停止：オフ］
フィールド設定［フィールド名；検索対象値１］
新規レコード/検索条件
フィールド設定［フィールド名；検索設定値２］
検索実行［］

# 除外設定
検索モードに切り替え［一次停止：オフ］
フィールド設定［フィールド名：除外したい値］
レコードを対象外に
対象レコードの絞り込み［］
```
メモ：　
　他のスクリプトでは1回の検索と同時に、検索内容からの除外設定なのが大半ですが、FileMakerではそのような設定はできません。その為、FileMakerでは検索内容からの除外には一工夫必要となります。
　検索内容に対し、再度検索モードに設定して条件から除外する項目を設定し「レコードを対象外に」と「対象レコードの絞り込み［］」を設定します。
　そのことにより、最初の検索内容から指定した条件のものを排除することができます。

### ４．絞り込みからの条件緩和
```
# 通常の検索
検索モードに切り替え［一時停止：オフ］
フィールド設定［フィールド名；検索対象値１］
新規レコード/検索条件
フィールド設定［フィールド名；検索設定値２］
検索実行［］

# 除外設定
検索モードに切り替え［一次停止：オフ］
フィールド設定［フィールド名：除外したい値］
レコードを対象外に
対象レコードの絞り込み［］

# 拡大検索設定
検索モードに切り替え［一次停止：オフ］
フィールド設定［フィールド名：拡大対象値１］
新規レコード/検索条件
フィールド設定［フィールド名：拡大対象値２］
対象レコードの拡大
```
メモ：
　「検索条件の絞り込みに該当するが、あるものだけは結果に含めたい」ということがあります。
　その場合は「対象レコードの拡大」を使用して絞り込み内容から条件を緩和します。


以上
［SwiftUI］住所から地図を表示

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199441/aacca514-0bff-3fa6-f8d2-8d86faaced64.png" width="300">

## コード
住所から緯度・経度を取得し、その緯度・経度を基に地図を表示する処理を実装
※ プレビュー で `東京都千代田区千代田` の地図を表示している

```Swift
import SwiftUI
import MapKit

struct MapView: View {
    let address: String
    @State private var map = MKCoordinateRegion()
    
    var body: some View {
        VStack {
            Map(coordinateRegion: $map)
                .onAppear {
                    self.getLocation(address: address){ location in
                        self.setMap(CLLocationCoordinate2D(latitude: location[0], longitude: location[1]))
                    }
                }
        }
    }
    
    private func getLocation(address: String,completion:@escaping ([CLLocationDegrees]) -> Void){
        CLGeocoder().geocodeAddressString(address) { placemarks, error in
            guard let latitude = placemarks?.first?.location?.coordinate.latitude else { return }
            guard let longitude = placemarks?.first?.location?.coordinate.longitude else { return }
            print("DEBUG: latitude : \(latitude)")
            print("DEBUG: logitude : \(longitude)")
            completion([latitude,longitude])　// 緯度・経度の情報をクロージャで渡す
        }
    }
    
    private func setMap(_ coordinate: CLLocationCoordinate2D){
        self.map = MKCoordinateRegion(center: coordinate, span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))
    }
}

struct MapvView_Previews: PreviewProvider {
    static var previews: some View {
        MapView(address: "東京都千代田区千代田")
    }
}
```

使用方法
※ `SampleView` という画面に、地図を表示させている

```Swift
import SwiftUI

struct SampleView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("地図")
                .padding()
            MapView(address: "東京都千代田区千代田") // 引数に表示したい場所の住所を指定
                .frame(height: 300)
        }
    }
}

struct SampleView_Previews: PreviewProvider {
    static var previews: some View {
        SampleView()
    }
}

```
地上からの高さと見渡せる海の距離


海岸に立った時、どのくらい先まで見えるのか計算してみた。
以下の計算結果より、
* 海岸に立った時(地上から1.5m前後)で4から5km
* 100mぐらいの山からであれば 30km
* そして、無茶苦茶高いところまでいけば10万km(地球の円周の1/4)ぐらいまでみわたせる



## プログラム
``` python
import math
import numpy as np
%matplotlib inline
import matplotlib.pyplot as plt
​
r=12756*10**3/2  #地球の半径(m)
#地上からの高さと見渡せる海の距離を求める
def get_sea_overlooking(height):
    angle=math.acos(r/(r+height))
    l=r*angle
    return l 
​
#指定された高さまでの「地上からの高さと見渡せる海の距離」グラフを描画する
def ploting(max_height):
    print("地上からの高さ{}mまで".format(max_height))
    x = np.arange(0,  max_height,max_height/100)
    y = [get_sea_overlooking(x_val)/1000 for x_val in x]
    plt.xlabel("takasa(m)")
    plt.ylabel("mieru kyori(km)")
    _=plt.plot(x,y)
    plt.show

```
​
## 結果
```
ploting(5)
```

地上からの高さ5mまで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468328/d439dd97-225d-6998-8817-10866ef9efac.png)


```
ploting(500)
```
地上からの高さ500mまで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468328/9397ed02-161c-b9bb-5a2b-56aca627fa1c.png)

```
ploting((r*2)*10) #地球の直径の10倍の距離
```
地上からの高さ127560000.0mまで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468328/01fec23f-9b87-067f-09f2-74fad18a86c5.png)

## 参考

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468328/0bb90ebc-a2ce-fac7-3021-f2c3cf6f50de.png)
118 解答

参考: 
[ArrayList, LinkedList の違い](https://qiita.com/BumpeiShimada/items/522798a380dc26c50a50)
[Nick White](https://www.youtube.com/watch?v=icoql2WKmbA)
# 解答
```Java
public List<List<Integer>> generate(int numRows) {
		List<List<Integer>> ans = new ArrayList<>();
		
		if(numRows == 0) return ans;
		
		List<Integer> first_row = new ArrayList<>();
		first_row.add(1);
		ans.add(first_row);//最初の要素は絶対1だから
		
		for(int i = 1; i < numRows; i++) {
			List<Integer> prev_row = ans.get(i-1);
			List<Integer> current_row = new ArrayList<>();
			
			current_row.add(1);//rowごとに考えた場合、最初は１だから
			for(int j = 1; j < i; j++) {
				current_row.add(prev_row.get(j-1) + prev_row.get(j));
				
			}
			current_row.add(1);//最後の要素も常に１のため
			ans.add(current_row);
		}
		return ans;
		
	}
```
# マイナスになる　不正解
愚直に計算すると
```Java
public List<List<Integer>> generate(int numRows) {
		List<List<Integer>> ans = new LinkedList<List<Integer>>();
		
		for (int row = 0; row < numRows; row++) {
			
			List<Integer> temp = new LinkedList<>();
			
			for (int col = 0; col < row + 1; col++) {
				System.out.println("row: "+ row+" col: "+ col);
				System.out.println(factorial(row) + "/" +factorial(row-col)*factorial(col));
				temp.add(col, Math.toIntExact(factorial(row)/(factorial(row-col)*factorial(col))));
				
			}
			ans.add(row,temp);
		}
		return ans;
	}

	public long factorial(int n) {
	    return LongStream.rangeClosed(1, n)
	        .reduce(1, (long x, long y) -> x * y);
	}
```
4足歩行ロボットをGAZEBOで動かす

## はじめに
お金がなくて４足歩行ロボットを買えないのでGAZEBOモデルで動かしました。

## GITHUB
https://github.com/lnotspotl/notspot_sim_cpp

## DEMO 

![Peek 2022-05-20 08-01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93168/002fee25-214a-8e99-6d1f-f330ce774fbe.gif)


![Peek 2022-05-20 08-02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93168/9fe142ea-2b5a-6394-30c2-3650e1dbd730.gif)



![Peek 2022-05-20 08-03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93168/a90f1965-ff41-e4b6-a4f1-50e44eef9196.gif)

楽しい
ReactはMVC？

knockout.jsでは設計の考え方として、MVVMが用いられていると書かれていて、Reactではどういったものがあるのか疑問に感じて調べてみた。

結論から言うとReactでは、Viewのみの責務を負うため、上記のような考え方はない。
react はあくまでDOMを操作するためのライブラリーでしかないのでデータベースアクセスをreact でやるということは不可能。

そうなるとknockout.jsはviewの責務以外も担えるということになるのか。
knockout.jsではWeb フレームワークのような機能まで拡張されているという理解になるのか。

react では MVC が必要なくてコンポーネントを作ってそのコンポーネントが、どんな状態を保っていてどんな振る舞いをすべきかを記述するだけでいい。ページ全体も一つのコンポーネントとして考える。
全てはコンポーネント単位で考えること。
そうすることでいちいち、controllerとかmodelとか考えなくても良くなる。

フロントエンドのフレームワークなのに、そのフレームワークが担える責務範囲が異なっているため、少し頭が混乱していた。
STM32G031でI2Cスレーブで受信した値をアナログサーボに出力


x 動作確認済み2022/5/20 15:20
x OBでリセットオンリーがわかる人むけ
x リセット改造かリセットを接続してください




目的
0x40(8ビット表記0x80)で値を受信して
アナログサーボ信号を出力
動くかどうかわからないがやつてみよう


とりあえず総当たりでpwm出力を調べる


1ピン
PB7 OK
PB8 OK
PB9 OK

4ピン
PA0 OK
PA1 OK
PA2 OK

5ピン
PA11 OK


仕様

1 I2C SDA
2 VDD
3 GND
4 リセットオンリー

8 SWD SWCLK - I2C SCL
7 SWD SWDIO
6 デバッグ出力用ソフトウェアシリアル
5 PWM



![o_con465.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/420e82b7-29de-0f1a-9dfb-7095215a097f.jpeg)





プログラム(完成)


```c++



//I2C_PWM_031_1


#include <Arduino.h>
#include <Wire.h>

#define TX1      PA12  // 4pin
#define DD PA11    // potentiometer connected to analog pin x

#define DW   digitalWrite


#define UART_DELAY 102   //  9600bps ok 031

//仮想シリアルへの一文字出力 9600bps
int pc_putc(char ch) {

  DW(TX1, HIGH);

  DW(TX1, LOW);//START
  delayMicroseconds(UART_DELAY); //START BIT WAIT

  for (int ii = 0; ii < 8; ii++) {
    DW(TX1, (ch >> ii) & 1  );
    delayMicroseconds(UART_DELAY); //DATA 1-8BIT WAIT
  }//for

  DW(TX1, HIGH);//Stop
  delayMicroseconds(UART_DELAY); //StOP BIT WAIT

  return (0);

}//pc_putc


//文字列の表示
int pc_printf(char *str1) {

  //文字の中身がゼロか
  while (*str1) {

    //一文字出力
    pc_putc(*str1 ++);

  } //while

  //戻り値
  return (0);

}//pc_printf


//初期化
void setup()
{

  //ポートをhiにする 初期化
  pinMode(TX1, OUTPUT);
  DW(TX1, HIGH);
  pc_printf("STAR\r\n"); //debug

  pinMode(DD, OUTPUT);   // sets the LED pin as output
  analogWriteFrequency(50);
  analogWriteResolution(16);

  //I2Cの初期化
  //Wire.begin(PA12, PA11); //stm32g031
  Wire.begin();

  Wire.begin(0x40);  //I2Cスレーブアドレスの設定
  Wire.onReceive(receiveEvent); //データが来ると呼ばれる関数

} //setup


//メインループ
void loop()
{
} //loop


//レシーブイベント
void receiveEvent(int howMany) {

  int x = Wire.read(); //I2C受信データの読み込み

  char c_hex[] = {
    '0', '1', '2', '3', '4', '5', '6', '7',
    '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'
  };

  char buf[] = { '[', c_hex[(x >> 4) & 0x0f], c_hex[x & 0x0f]  , ']', 0 };

  //char buf[] = { x, 0  };

  //I2Cスレーブの受信データの表示
  //pc_putc(x);
  pc_printf( buf ); //debug

  analogWrite(DD, 1310 + (26 * x) );  // analogRead values go from 0
                                      // to 4095, pwmWrite values
                                      // from 0 to 65535, so scale roughly


}//receiveEvent



```

A 41を連続

```c++

//I2C_A_031_1

#include <Arduino.h>
#include <Wire.h>

//STM32G031J6M6 i2cピンの定義
#define sdaPin PA12    // ArduinoA4
#define sclPin PA11    // ArduinoA5

//#define en     PB7     // 1pin

#define ADDR1  0x40

//初期化
void setup() {

  delay(3000); //not Delete

//  //GPIOの初期化
//  pinMode(en, OUTPUT);

  //i2cの初期化
  //Wire.begin(sdaPin, sclPin); //STM32G031J6M6
  Wire.begin();

}//setup

//メインループ
void loop() {

//  digitalWrite(en, 1); //LED ON debug

  //I2Cに送信
  Wire.beginTransmission(ADDR1);
  Wire.write('A');
  Wire.endTransmission();

  delay(500);//0.5秒待つ


//  digitalWrite(en, 0); //LED OFF debug
  delay(500);//0.5秒待つ

}//loop


```
nvmのインストールの仕方と入門的な使い方のまとめ【Mac】

今までフロントをがっつりやってこなかったのすが、最近reactをよく触るようになったり、Udemyを受けたりしてて、講座によってnodeのバージョンが違ったりしてときおり不安になることがあるので自分の端末でもnvmを導入することにしました。

タイトルにはMacと書いてますが、おそらくどのOSでもいけると思います。

## nvmのインストール

### bashの場合

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
```


### zshの場合

```zsh
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | zsh
```

でいけます。

もしすでにnodeがインストールされている場合は、

```
brew uninstall node
```

でアンインストールしましょう。（nodeが入ってしまっているとnvmがインストールできないという噂を聞いたので）
※上記コマンドはMacでのみ機能します。

tailなりcatを叩いて、

```
$ tail -n 3  ~/.zshrc
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
```

上記のような記述が入ってればOKインストール完了です。
bashの方は~/.bashrcを見てください。


そしたら、
```
exec $SHELL -l
```

でログインし直します。

## インストール確認

```
 $ nvm -v
0.37.2
```

こんな感じででるはずです。

ここからはnodeのインストールしつつ、nvmの使い方について書いていきます。


## 最新のnodejsのインストール

```
nvm install node
```

すると、

```
$ node -v
v18.2.0
```

## 安定版のnodejsのインストール

続いて安定版を入れていきます。

```
nvm install --lts
```


```
$ node -v
v16.15.0
```

## 特定バージョンのインストール

```
nvm install v17.9.0
```

## インストールされているnodeのバージョンを一覧確認

```
$ nvm ls
->     v16.15.0
        v18.2.0
default -> node (-> v18.2.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v18.2.0) (default)
stable -> 18.2 (-> v18.2.0) (default)
lts/* -> lts/gallium (-> v16.15.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.19.3 (-> N/A)
lts/gallium -> v16.15.0
```

今はあとからlts版をインストールしたのでv16が適用されてます。

## nodeのバージョン切り替え

```
$ nvm use v18.2.0
Now using node v18.2.0 (npm v8.9.0)

$ node -v
v18.2.0
```

## インストール可能なバージョン一覧を表示

```
nvm ls-remote
```

## 特定バージョンのアンインストール

```
nvm uninstall v16.15.0
```

## ヘルプの表示

```
nvm --help
```


こんな感じですかね。
良い世の中です。
neosでlogix その82

# 概要
neosでlogixやってみる。
StaticAudioClipProviderコンポーネント
AudioOutputコンポーネント
AudioClipPlayerコンポーネント
Playノードを使ってみる。

# 写真

![2022-05-19 22.21.29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/7e8e1a84-cd34-58d6-b8d2-466b4fb8a446.jpeg)

# Play

```
Inputs
 	Impulse	Play
Outputs
 	IPlayable	Target
 	Impulse	OnDone
```

# 手順

- devtooltipを装着。
- 新規->3d->box
- インスペクターを開き、コンポーネントを追加
- Assets>StaticAudioClipProvider
- Audio>AudioOutput
- Audio>AudioClipPlayer
- logixtooltipを装着。
- インターフェースを取り出す。
- ノードブラウザを表示。
- Playback>Playをスポーン。
- つなぐ


以上。
Rails6にjQueryを導入する方法

Rails６から標準で導入されているWebpackerを利用することで、jQueryを簡単に実装できます。

Rails5で書かれている記事も多かったのでだいぶ混乱していました。。

# Rails5以前との違い
**1.　gemが必要ではなくなった**
以前までは```'jquery-rails'gem```をインストールする必要がありましたが、Rails6からはgemの追加が必要なくなり、代わりにwebpackで必要な情報をインストールしていきます。

**2.　jQuery関連ファイルの保存フォルダが違う場所にある**
かつては```app/assets/javascripts```フォルダに保存していましたが、Rails6以降は```app/javascript```フォルダに変更となります。

# jQueryのインストール
**そもそもjQueryとは**

JavaScriptをより簡単に記述するためのライブラリのひとつ。

したがって、jQuery（ライブラリ）を使うのであればJavaScript（元のプログラミング言語）にコンパイル（翻訳）する必要があります。
そのためにここではWebpackerを使用していきます。

ではまず、jQueryのインストールを行います。
```
% yarn add jquery
```
正常にインストールされたかは ```package.json```で確認できます。

Webpackerで管理する際はyarnコマンドを使用してインストールします。

次に「config/webpack/environment.js」を開きます。
以下のように、コードを追加します。

```config/webpack/environment.js
const { environment } = require('@rails/webpacker')
//ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
//ここまで
module.exports = environment
```


次に、「app/javascript/packs/application.js」を開きます。
以下のように、コードを追加します。

```app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
//以下の一文を追加
require("jquery")
```

これでjQueryが導入されたはずです。

# 動作確認
下記のファイルにコードを追加しました。HTMLファイルであればなんでもいいです。

```movies/index/html.erb
<h1>jQuery</h1>
  <p id="hoge">赤色になるよ</p>
  <script>
    $("#hoge").css("color","red")
  </script>
```

![95e2d1d61eccdd7da668a2d85a6b60e7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1962714/af20bcd0-c673-5817-80ab-f0f216abb6bd.png)

文字が赤色になっていればOKです！

参考：
https://qiita.com/shungo_m/items/53bcae18a740495d1eb3
https://ymiyashitablog.com/rails-jquery/
Slackで未読チャンネルに移動するショートカットは Option+Shift+上下キー



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/da4b1302-2d91-eaff-3748-bb089da8c3d5.png)

これは手放せないショートカット。



<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
[Stripe]Stripeで決済を実装できるぞ！のまとめ

# TL;DR

StripeとはAPIベースのヘッドレスな**決済サービス**であり、
カードはもちろん銀行振込やコンビニ決済の代行もできます。
そして、**通常の決済**はもちろん、**サブスクリプション決済**の実装も可能です。
サイト側にフォームをもたせない**セキュア**な実装ができ、
ドキュメントも充実している（最初理解するのに時間かかったけど）ため
使い所も多いのではないかと思いましたので記事にまとめておきます。

# Stripeでできること・できないこと
## できること

- 商品の作成
    - 商品の数量に応じた段階的な割引
- 各種決済
    - カード決済
    - コンビニ決済
        - 決済先の発行と自動入金確認
    - 銀行振込
        - 振込先の発行と自動入金確認
- 決済フォームの実装
    - 商品の料金をもとに決済できる
    - 商品が登録されていなくとも任意の金額でも決済できる
- サブスクリプションの実装
- ユーザー情報の作成
- 各種決済・サブスクリプションのキャンセル
- 各種決済・サブスクリプションの登録情報変更


## できないこと

- 商品にオプション価格を付ける
    - 複数商品を組み合わせてサブスクリプションの段階的な料金プランを作ることはできる
- 商品の在庫管理
- 商品の発送管理

## 結論

→決済に関することはだいたいできる
→細かい料金や在庫の管理は**Stripe側では**できない
→ECではなくあくまで「決済代行サービス」

# Stripeの仕組み

Payment IntentsAPIとStripe.jsを利用して実装します。

FEにカード情報入力用のフォームをiframe経由で読み込み、
Stripe側の処理状況に応じて、設定したBE側エンドポイントに
Stripeからリクエストが投げられます。

各決済はPayment Intents IDで判断します。
ですので、フォームの生成時に仮情報を登録し、
webhookからのリクエスト処理時には
仮情報のステータスがどのようになっているかで状況を判断し、
処理を振り分ける実装が必要となります。

![Stripeのシーケンス図](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288273/4cf1a316-690b-b9da-630f-8dc610e3fa51.png)


# 実装
## 導入

Stripeを利用するには、バックエンド・フロントエンドそれぞれに
ライブラリをインストールする必要があります。
ライブラリは手動インストールのほか、
Composerおよびnpmでのインストールに対応しています。

全ての実装の大前提となるので、この記事で一括して説明します。

### バックエンド側
#### Composer

PHPは[Composer](https://getcomposer.org/)が対応しています。
Composerをインストール済みの環境で以下のコマンドを実行してください。

```console:terminal
$ composer require stripe/stripe-php
```

Composerでのインストールが完了した場合は、`vendor/autoload.php`をインクルードすることで、
関連ライブラリを一括インクルードすることが可能です。

```php:hogehoge.php
require_once('vendor/autoload.php');
```

#### 手動インストール

もしくは、手動でのインストールも可能です。
以下のリポジトリ
https://github.com/stripe/stripe-php
からlatest updateをダウンロードし、
適当なディレクトリに配置して以下のファイルをインクルードすることで使用可能になります。

```php:hogehoge.php
require_once('/path/to/stripe-php/init.php');
```

### フロントエンド側
#### リンク

以下をインクルードすることで使用可能です。
`<script src="https://js.stripe.com/v3/"></script>`

#### npm

webpack経由でjsをバンドルしている場合は、
npmでライブラリをインストールすることも可能です。

https://github.com/stripe/stripe-js

```console:terminal
$ npm install @stripe/stripe-js
```

```js:hogehoge.js
import {loadStripe} from '@stripe/stripe-js';
const stripe = await loadStripe('pk_test_xxxxxxxxxxxxxxx');
```

## 実装例

多分ここら辺を書く予定。

- Stripeで通常決済を行う
- Stripeでユーザー登録を行う
- Stripeでサブスクリプション決済を行う
- Stripeでユーザーの登録カードの変更を行う
- Stripeで通常決済のキャンセルを行う
- Stripeでサブスクリプションのキャンセルを行う

# ドキュメント

https://stripe.com/docs

https://stripe.com/docs/api

https://stripe.com/docs/js

https://github.com/stripe

https://github.com/stripe-samples
ウェブ地図用のフォント作り（NotoSans Simplified ChineseにNotoSans Arabicを混ぜてみる）


# はじめに
前回の続きです。
西欧のフォントに、中国語、アラビア語が入ったウェブ地図用のフォントが欲しかったのでいろいろ作業してみました。

# 観察
ArcGIS OnlineやMapLibreのウェブ地図で、ある言語の注記を含むときに、どのフォントレンジを参照しているか、F12の開発者モードで地道に観察しました。ベクトルタイルのpbfファイルもありますが**●●-●●.pbf**というのはテキストフォントを参照しているものです。
![2022-05-19r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/666af5c0-af0c-72b7-8770-5dc00786dbd2.png)

複数の言語が混じるので必ずしも正確でないかもしれませんが、以下の表のようになりました。
中国語と日本語、韓国語とタイ語は使っているレンジのpbfファイルが同じなので（必ずしもフォントそのものが重複するとは限りませんが）、あるフォントレンジ用のPBFは重複してしまうので一緒につかうのは難しそうです。アラビア語はあまり重複しなさそうです。
![from web map.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/5332249a-b37e-73f4-a923-6e19f78e1855.png)

次に、Fontを見ることができるソフトをつかって、NotoSans Arabicのフォントを実際にみてみました。フォント番号などを観察します。
![2022-05-19-fontforge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/a920fa77-bd7b-1788-e840-50e6218d9cd5.png)

そして表にしましたが、アラビア語はNotoSans SCとは重複していなさそうです。（NotoSansSCフォントのotfファイルはひらけなかったんですが、otfからつくった各レンジのpbfファイルのサイズを確認すればアラビア語があるところの中国語フォントはサイズが小さいので重複がないだろうと判断しました。64256-64511のレンジと、65024-65279のレンジは本当は個別のフォントレベルで混ぜないといけないのですが、今回は省略しています。今後影響があるようであればttfファイルを加工してみることにします。）

![data-source.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/d72fa536-db13-e2ae-36a3-4027e08a6f7b.png)


# 作業
Noto Sans Simplified Chinese と Noto Sans Arabic　をpbfファイルに変換した。
中国語をベースにしつつ、必要なレンジのPBFファイルをアラビア語からコピーしてきてミックスした。

# 作業結果
https://github.com/unvt/noto-SCA

表示してみると文字は出てくるが文字化けして上手くいかない。単に特定のレンジのPBFファイルを差し替えるだけではダメなのかもしれない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/b860bce2-4722-0de7-8a65-a6b491e686fe.png)
neosでlogix その81


# 概要
neosでlogixやってみる。
TouchToggleコンポーネントを使ってみる。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/5970b10e-7a21-176b-e3dd-473e90bac100.png)

# TouchToggle

```
Name	Type	Description
persistent	Bool	Determines whether or not this item will be saved to the server.
UpdateOrder	Int	Controls the order in which this component is updated
Enabled	Bool	Controls whether or not this component is enabled
State	Bool	
EventType	TouchEventType	
ToggleEvent	EventState	
OnEvent	EventState	
OffEvent	EventState	
AcceptOutOfSightTouch	Bool	
AcceptPhysicalTouch	Bool	
AcceptRemoteTouch	Bool	
Vibrate	VibratePreset	
EditModeOnly	Bool	
ActiveUserFilter	ActiveUserHandling	
__legacyActiveUserRootOnly	Bool	
```


# 手順

- devtooltipを装着。
- 新規->3d->box
- インスペクターを開き、コンポーネントを追加
- Transform>Interaction>TouchToggle
- logixtooltipを装着。
- インターフェースを取り出す。

# サンプルコード

```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace FrooxEngine
{
	[Category("Transform/Interaction")]
	public class TouchToggle : Component, ITouchable {
		public readonly Sync<bool> State;
		public readonly Sync<TouchEventType> EventType;
		public readonly Sync<EventState> ToggleEvent;
		public readonly Sync<EventState> OnEvent;
		public readonly Sync<EventState> OffEvent;
		public readonly Sync<bool> AcceptPhysicalTouch;
		public readonly Sync<bool> AcceptRemoteTouch;
		public readonly Sync<VibratePreset> Vibrate;
		protected override void OnAwake() {
			ToggleEvent.Value = EventState.Begin;
			EventType.Value = TouchEventType.Touch;
			AcceptPhysicalTouch.Value = true;
			AcceptRemoteTouch.Value = true;
			Vibrate.Value = VibratePreset.Short;
		}
		public void OnTouch(TouchEventInfo eventInfo) {
			switch(eventInfo.type)
			{
			case TouchType.Physical:
				if (!AcceptPhysicalTouch)
					return;
			break;
			case TouchType.Remote:
				if (!AcceptRemoteTouch)
					return;
			break;
			default:
				Debug.Warning("Unknown touch type: " + eventInfo.type);
				return;
			}
			bool prevState = State.Value;
			if (ToggleEvent.Value != EventState.None && eventInfo.GetEventState(EventType) == ToggleEvent.Value)
				State.Value = !State.Value;
			if (OnEvent.Value != EventState.None && eventInfo.GetEventState(EventType) == OnEvent.Value)
				State.Value = true;
			if (OffEvent.Value != EventState.None && eventInfo.GetEventState(EventType) == OffEvent.Value)
				State.Value = false;
			if (State.Value != prevState)
				eventInfo.source?.Slot.TryVibrate(Vibrate);
		}
	}
}





```


以上。
「Visual Studio Code完全入門」を読んでVS CodeとGitHub連携を試す

## 「Visual Studio Code完全入門」

[発刊1カ月で重版！ 『Visual Studio Code 完全入門』が3日間限定で全文無料公開中 - Book Watch/ニュース - 窓の杜](https://forest.watch.impress.co.jp/docs/bookwatch/news/1409754.html)
[『Visual Studio Code完全入門』重版出来記念、全文無料公開キャンペーン - インプレスブックス](https://book.impress.co.jp/items/vs-code)
[Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方 - インプレスブックス](https://book.impress.co.jp/books/1121101051)

5/21(Sat) 23:59まで無料公開中とのことで、斜め読みし、自分にとって発見だった部分のメモです。
筆者: [リブロワークス – LibroWorks – 編集プロダクション・リブロワークスのWebサイト](https://libroworks.co.jp/)
[Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方 | リブロワークス |本 | 通販](https://www.amazon.co.jp/dp/4295013455/)

![](https://images-na.ssl-images-amazon.com/images/I/51BkK+DIb8L._SX350_BO1,204,203,200_.jpg)

## VS CodeとGitHub連携

触ったことがなかったので、試した。

[VS Codeでソースコード管理：リポジトリをGitHubに発行してみよう：Visual Studio Codeで快適Pythonライフ - ＠IT](https://atmarkit.itmedia.co.jp/ait/articles/2110/29/news043.html)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/94f639e2-753e-b8a7-b3ca-19c57ad0d70b.png)

`git commit` をパレットから行う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/1160e374-2281-342e-4740-6ad993bd16b1.png)
すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/1511a452-8187-492b-28dd-54501d4790eb.png)
などなどと促されるので、ブラウザでダイアログに答える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/cdefe13e-8cdc-b303-3bb8-62a400fa5721.png)

遊び場ができた。

https://github.com/e99h2121/vscode-playground

## GitLens

拡張機能としてはGitLensというもの。
[VS Codeでソースコード管理：GitLens拡張機能を使ってみよう：Visual Studio Codeで快適Pythonライフ - ＠IT](https://atmarkit.itmedia.co.jp/ait/articles/2111/19/news034.html)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/e1c4adeb-3e52-ea71-52a1-d60856eee3bd.png)

履歴表示など。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/9d5a1c26-ea20-7314-a811-46c637798c65.png)

以上です～。
スパゲッティーコードじゃなくてスパゲッティUIってのがあってだな。 (MENTAのやばい編集フォーム)

# 作成ボタンで編集するだと？

作成ボタンが編集につながっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/8a3d99e9-d86b-7f62-f8cd-a8bcc6d2cb69.png)

# 作成と編集がスパゲッティ

- メンターすなわちユーザー自体の説明の編集
- プランの作成
- プランの編集
- ステータスの変更

これらが全て1ページでまかなわれている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/b9bc9c97-020d-882c-9c2b-811397805c95.png)

画面遷移がなくてとっても便利ですね！！！！！！！！！

# プランの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/0e01c26c-a48a-bf76-9775-ddfb4ad85fae.png)

編集ページで動的にプラン追加が出来る。
いや単独ページにせえよ。

# プラン作成の種類

以下3つに分かれている。
「自分でプランを作成する」と書かれており、まるでその他二つは自分で作成しないかのようだ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/2b5f4a8d-e43e-2e82-86ef-84cf6f9dee26.png)



# お試しプランの作成

単発なのに月額だと…？
こんな致命的な表記ミスするか…？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/aad483ec-4fc1-1a32-d8bb-47ddd1c26b57.png)


# 入力エラーがある時

複数のプランの中から、エラーが起きている箇所を探し出す。
間違い探しみたいで楽しいですね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/656df8f2-ce5d-bc63-7966-c58e26c7f0b6.png)


# 全体

全体を見ればその長大さが分かると思う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/02e6d24e-5511-0d66-0c5c-f78151bbebfe.png)



<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Slackでコードにシンタックスハイライトを付ける方法 (ショートカットでスニペットを作成)

# テキストエリアにコードを書く


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/b2e24da8-6107-e3d1-2142-d47fd07b4ba3.png)

# ショートカットでスニペットを作成

Mac: ⌘(Command) + Shift + Enter.
Win: Control + Shift + Enter.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/b20503bd-b496-fc6d-9d91-70f2824c5161.png)

# 結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/b24bbc15-0a03-2182-422c-f4e399cdd2ed.png)


# 参考

https://qiita.com/shimajiri/items/42f6878e831f9741f996



<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
僕がプログラミングにモチベーションが湧かなかった理由は虚無

技術程度の高い会社に入った当初は、周りが何を言っているか分からない。宇宙語を話しているようだった。
何をこの人たちは熱心に語っているのだろうと思った。

そもそもプログラミングというのは人間が作り出したものだ。それに対して、さも世界の真実を解き明かすかのように接することは出来なかった。まるで神の託言かのように扱うことは出来なかった。

やはり「そもそも人間が作ったもの」という意識が強かった。
そのルールをいくら覚えても、いくら言語に詳しくなっても、それはただの複雑な覚えゲーだ。人間の本来的な世界とはかけ離れているような気がした。

つまり生きる賢さを覚えることではない。このゲームにいくら詳しくなり、ゲームを進めても、そこには架空のゲームがあるだけだ。ただただ虚無さを感じていた。

データもUIもプログラミング言語も、全てが虚無。全ては器に過ぎず、フィクションに過ぎない。そのような感覚。

だが今では、たとえ人間が作りだしたプログラミングというものであっても、それを覚えるというプロセス自体が面白いと思うようになった。脳の陶冶である。たとえ向き合うのはコードであり無機物であっても、自分の有機的な脳が学び、ワルツを踊っている。そう考えると、プログラミングであっても人間的な行為であるように思えた。

人はプログラミングに向き合っているようであって、その時同時に自分自身とも向き合っている。



<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
566 解答

参考: 
[Nick White](https://www.youtube.com/watch?v=wCdNh9oThqk)
# 解答
```Java
	public int[][] matrixReshape(int[][] mat, int r, int c) {

		int m = mat.length;
		int n = mat[0].length;

		if (m * n != r * c)
			return mat;// もし引数のサイズと出力するサイズが合わないとき

		int[][] ans = new int[r][c];
		int row_ans = 0; // 出力用の行
		int col_ans = 0; // 出力用の列
		for (int i = 0; i < m; i++) {
			for (int j = 0; j < n; j++) {
				ans[row_ans][col_ans] = mat[i][j];

				col_ans++;

				if (col_ans == c) { //ココがやややこしい
					col_ans = 0;
					row_ans++;
				}

			}

		}

		return ans;

	}
```
# Array の出力方法
## 1D Array
```Java
System.out.println(Arrays.toString(1DArray));
```
## 2D Array
```Java
System.out.println(Arrays.deepToString(2DArray));
```
PlayStation VR の公式ページが「ユーザーが一番知りたいこと」を伝えている件

これだよこれ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/e4f51986-3d94-d35f-6d29-127ad41b55ea.png)

少し感動した。
そのとき僕自身がまず、PS4のVR対応機器は何なのかと調べていてこのページに行き当たったからだ。

https://www.sony.jp/playstation/psvr/

# よくあるBADケース

このページは注意書きに小さく

```
* 本機器 Plastation VR は Plastation5 Plastation4 などの対応機器でご利用いただけます。(2022年5月20日現在) 
```

なんて表示したりはしない！

ユーザーに最も伝わりやすい平易なフレーズで、いちばん大事なことを伝えている。

ユーザーが一番迷う事柄を把握するのは、実は製作者側、サービス提供側には死角となり困難だったりする。
なぜなら提供側はサービスに熟知しているので、そもそも知らない人の気持ちが分からなくなってしまうからだ。

Nintendoであれば分かるが、SONYがちゃんとこういう提示をしているのにも良い意味で驚いた()

# 学び

- そもそもの疑問が生じやすいサービスでは、本当にユーザーにわかりやすい場所に答えを提示するのも一案では？



<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
GithubのContributuionsで3Dプリントできる街が出来るよ！ そしてSTLファイルとは？ ( Github Skyline )

# 例

https://skyline.github.com/yumainaura/2018

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/e2571626-44a7-e5fa-8d3c-9c8146441e3a.png)

以上。

# ダウンロードできるSTLファイルとは？

>STL ファイル形式は、ラピッドプロトタイピング業界でのデータ伝送形式のデファクトスタンダードであり、Quickparts とのやり取りに不可欠です。

https://ja.3dsystems.com/quickparts/learning-center/what-is-stl-file



>STL(Stereolithography)データは3D CADソフト用のファイルフォーマットの一つで、今ではほとんどのソフトにサポートされています。特に3Dプリンタ（ラピッドプロトタイピング）業界では、最も使用されているファイルフォーマットです。

https://www.keyence.co.jp/ss/products/3d-printers/agilista/knowledge/stl_about.jsp

らしい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/3128efdb-3f1d-fe30-8bdc-4ddb7a351b1b.png)

3Dプリンタ界のPDFみたいなものだろうか？

# 3Dプリンタで作ってみた人

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/0899f90a-ea83-f291-7e10-390f4877775c.png)

[https://twitter.com/hyodoblog/status/1525381256476647424](https://twitter.com/hyodoblog/status/1525381256476647424)





<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
CircleCI Ubuntu14.04およびUbuntu16.04イメージ提供終了に伴うubuntu20.04への移行で詰まったところ

- `.circleci/config.yml` の修正ポイント

## 結論
- orbsを `aws-ecr: circleci/aws-ecr@8.1.2` に上げる
- CircleCIの環境変数に `AWS_ECR_REGISTRY_ID` を追加、12桁の `registry_id` を登録
- ECR関連の環境変数には`$`を付ける
- imageの指定を `image: ubuntu-2004:202201-02` に変更
- `account-url`は使わなくなったので削除

### ECR関連の環境変数？
- こんなエラーが出てる時はコレ
```
Provided region_name 'AWS_DEFAULT_REGION' doesn't match a supported format.
Error: Cannot perform an interactive login from a non TTY device
```

- 以下対応例
```
- region: AWS_DEFAULT_REGION
↓
- region: $AWS_DEFAULT_REGION
```

### registry_idって？
```
xxxxxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com
↑↑↑このxxxxの部分
```

## 参考（公式ドキュメント）
- https://circleci.com/developer/ja/orbs/orb/circleci/aws-ecr#commands-build-and-push-image

## 補足
- 2022/5/31に提供停止なので対応はお急ぎ下さい
- 4時間詰まったので同じ思いをする人が1人でも減るように共有
YAGNI原則とは？物語

# Wikipediaによると

>機能は実際に必要となるまでは追加しないのがよいとする、エクストリーム・プログラミングにおける原則である。

ちなみにここでいう機能とは、内部的なデータ等も含むと広く解釈して良い。

# 例

例えば、めちゃくちゃ単純な例。

たとえばデータベースで「本のテーブル」があって、タイトルと価格カラムがあるとする。
だけど果たしてこれだけで足りるだろうか？

将来の拡張性を考えておこう。

- セール時の価格を示す「セール価格」カラムを追加しておこう。セールを開く予定はないけれど。
- 本の詳細を示す「詳細カラム」を追加しておこう。ユーザーに詳細を見せる予定はないけれど。
- 男性用の本か、女性用の本かを示す「性別カラム」を追加しておこう。今は全性別向けの本しかないけれど。

ま、使わなかったら、その時削除すれば良いや。

### You Ain't Gonna Need It!

どのカラムも結局使いませんでした。当時の担当者は辞任しました。

プログラムのコードや、データベース構造はいつの間にか複雑になり、なんだかよく分からないカラムが3つあるけど、誰もいつまでも削除しません。なぜなら、今動いているプログラムが、もし動かなくなったらどうしましょう。クビを切られるのは自分です。

そしてこのプロジェクトの担当者は、新しい世代に語り続けるのです。

「あ、その3カラムね！どうやら使ってないらしいよ。まあ、削除しても良いかもね。どうせ使ってないわけだから。え、じゃあ削除すれば良いだって？そうだね。まずはカラム削除のストーリーを見積もって、削除して動作チェックして、リリースチェックをしてと。そこまでする必要があるかって？そりゃそうよ。プロダクトコードってのはそういうもんだよ。えーとこのプロジェクトは今とても忙しくてね。君、こんなことをしてる暇があるなら、もっと必要案件のことを進めてくれないだろうか。まあ余裕がある時にその3カラムは削除するってことで。あ、ところで私も来月に辞任するので、このことは次の担当者にも伝えておいていただければ！」


# めでたしめでたし

YAGNI原則を破ったことにより、みんな少しずつ不幸になりましたとさ。

おしまい！




<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
🔰静的HTMLファイルをNode.jsで立ち上げたサーバーを使ってLocalhostに表示させる！

Progateを使ってWeb製作をし始めてから2週間。ある程度知識が集まってきたので、ほぼ同じでもいいから自分で何か作ってみようと始めた矢先...。<br><br>
エクスプローラに置いている静的HTMLファイルを、Node.jsを使って立ち上げたサーバーで表示したい。サーバーを立ち上げるコードなどは知っていたが、Progateと同じコードでやってもできない。

結局解決したが、気を付けなければいけないことがあったので、自分の勉強の証として残しておきます。


# 結論：パスが違った
ファイルの階層はこんな感じ

```
MyIntroduction
├── public
│   ├── img
│   │   └──background.png
│   └── css
│       └──stylesheet.css
├── view
│   └── index.html
├── app.js
└── package.json
```
<br><br>
下記のapp.jsはExpressを使ってルーティングをするためのファイルで、改善前です。

```javascript:app.js
const express=require('express');
const app=express();

//pubilcフォルダ内のファイルも読み込めるようにする。
app.use(express.static('public'));

app.get('/',(req,res)=>{
    res.render('index.html');
});

app.listen(3000);
```
<br>
トップページでindex.htmlファイルを表示したかったができず...

![スクリーンショット 2022-05-20 015704.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632237/39bf066d-e41f-fa38-04e4-286215d98aa2.png)

<br><br><br>
# 解決方法
app.jsにパスに関するコードを追加した。
```javascript:app.js
const express=require('express');
const app=express();

//パスの設定
const path=require('path');
app.use(express.static(path.join(__dirname,'view')));

//pubilcフォルダ内のファイルも読み込めるようにする。
app.use(express.static('public'));

app.get('/',(req,res)=>{
    res.render('index.html');
});

app.listen(3000);
```
useメソッドで静的なHTMLファイルを格納しているディレクトリViewを設定できる。
<br><br>
これによって製作したHTMLが表示されました！！
しかしこれだけではHTMLしか適応されておらず、さらにCSSを適用するには、コードにあった
```javascript
app.use(express.static('public'));
```
でpublicフォルダも指定してあげれば、stylesheet.cssにもアクセスできるようになる。
ただし、自分のファイル階層ではstylesheet.cssは、publicディレクトリの中のCSSディレクトリの中にあったので
```html:index.html
<link rel="stylesheet" href="/css/stylesheet.css">
```
のように、`stylesheet.css` ではなく現在の位置を起点にリンク先ページの場所を指定することに注意。
<br><br>
こんな簡単なことで悩み、結構調べ、考えてた自分はまだまだ勉強不足と実感できる1日でした笑...
【Jupyter・Python】セルの実行時間に制限を設定するマジックコマンド

# はじめに
競プロ用のプログラムなど制限時間を実際に設けて実行してみたいときに便利なマジックコマンドを作ってみました。

# 使い方
制限時間を設定したいセルの先頭に`%%timelimit (制限時間[s])`と付けるだけです。
```python
%%timelimit 2

hogehoge
fugafuga
piyopiyo
```

# マジックコマンドを登録する
マジックコマンドを使用したいノートブックで都度以下のコードを実行する
or
`~\.ipython\profile_default\startup\setup.py`に以下のコードを書き込む
ことでマジックコマンドが使用可能になります。

```python
from IPython.core.magic import register_cell_magic
from IPython.core.getipython import get_ipython

@register_cell_magic
def timelimit(t, cell):
    import threading, _thread
    assert t, 'Set the time limit.'
    def timeover_event():
        assert _thread.interrupt_main(), f'Time is up.(execution time > {t} s)'

    timer = threading.Timer(float(t), timeover_event)
    timer.start()
    get_ipython().run_cell(cell)
    timer.cancel()
```

# 仕組み
- [`threading.Timer()`](https://docs.python.org/ja/3.9/library/threading.html#timer-objects)によりメインの処理とは別スレッドでタイマーを設定することで、設定した時間経過の後`timeover_event()`が呼び出されます。
- [`_thread.interrupt_main()`](https://docs.python.org/ja/3.6/library/_thread.html#_thread.interrupt_main)はメインスレッドに **KeyboardInterrupt** を割り込ませることができます。
→ プログラムの実行は中断され、エラーメッセージが表示されます。
- `get_ipython().run_cell(cell)`によりセルの内容を実行します。
- 制限時間をより早く`timer.cancel()`にたどり着けば、タイマーは解除されます。

# 実行例
```python
%%timelimit 7

print('Start')
time.sleep(1)
print('1 s')
time.sleep(2)
print('3 s')
time.sleep(3)
print('6 s')
time.sleep(4)
print('10 s')
time.sleep(5)
print('Done!')
```

```out
Start
1 s
3 s
6 s
Exception in thread Thread-24:
Traceback (most recent call last):
  File "C:\ProgramData\Anaconda3\lib\threading.py", line 932, in _bootstrap_inner
    self.run()
  File "C:\ProgramData\Anaconda3\lib\threading.py", line 1254, in run
    self.function(*self.args, **self.kwargs)
  File "C:\Users\keyta\AppData\Local\Temp/ipykernel_14348/4258713521.py", line 8, in timeover_event
AssertionError: Time is up.(execution time > 7 s)
---------------------------------------------------------------------------
KeyboardInterrupt                         Traceback (most recent call last)
~\AppData\Local\Temp/ipykernel_14348/601981788.py in <module>
      6 time.sleep(3)
      7 print('6 s')
----> 8 time.sleep(4)
      9 print('10 s')
     10 time.sleep(5)

KeyboardInterrupt: 
```