OmniAICreator/Qiita-1.07M huggingface dataset:
RESTの原則について説明する

### RESTとは
RESTとは、ネットワークシステムの設計の考え方の一つです。</br>

以下の4つの原則を持ち合わせています。

- リソースのアドレス可能性
- 統一インタフェース
- 表現指向とハイパーメディア
- ステートレスな通信

### リソースのアドレス可能性
リソースとは、クライアントが要求する情報やデータのことです。</br>
たとえば、URIはリソースです。

このリソースには動詞を含めず、名詞のみを使用します。</br>
つまり、「何を」「どうするか」の、何の部分のみを指定するということです。

そしてこのリソースは、全てURIで表現される一意、つまり特定できるURIを持っています。

### 統一インタフェース
RESTでは、リソースに対しての操作が統一して決められています。</br>
HTTPメソッドを使用して、リソースをどのように操作するのか、動詞の部分を指定します。

HTTPメソッドの一覧はこちら</br>
基本的に多く使用されるのは上から4つです。

| メソッド   | 意味                           |
|:--------|:-------------------------------|
| GET     | リソースの取得                    |
| POST    | リソースの作成、追加など             |
| PUT     | リソースの更新、作成                |
| DELETE  | リソースの削除                    |
| HEAD    | リソースのヘッダ(メタデータ)の取得     |
| OPTIONS | リソースがサポートしているメソッドの取得  |
| TRACE   | プロキシ動作の確認                 |
| CONNECT | プロキシ動作のトンネル接続への変更     |

### 表現指向とハイパーメディア
RESTでは、レスポンス(サーバーから返ってくる返事)に関連する別のリソースのリンクURIを含むことができます。</br>
そのリンクを辿ることで、関連するリソースを取得できるので、知らないリンクにも飛ぶことができます。

### ステートレスな通信
RESTでは、サーバーがセッション情報を保持しません。</br>
そのため、すべての情報をクライアントからサーバーに送る必要があります。

ステートレスのわかりやすい例は、こちらを参照してください。
[ステートレスとは](https://qiita.com/mtakehara21/items/efcbbc3ba58a62c10eb6)

#### メリット
クライアントが増えると、対応するサーバーが異なることになります。
そのときに、サーバー側で情報を保持できていないという状況を避けるために、ステートレスな通信を使用します。

#### デメリット

送信するデータ量が多くなるため、パフォーマンスが低下します。</br>
また、認証がある場合DBアクセスが増えるため、パフォーマンスが低下します。

そして、通信エラー時にうまくレスポンスが受け取れなかった場合でも、リクエストはすでに送信されており、もう一度リクエストを送ると二重にリクエストを送ったことになります。
一方、ステートフルの場合は、リクエストを受け付けたことを覚えているので二重にリクエストが送られません。

### さいごに
HTTPとかRESTってかなり難しいので、『[Webを支える技術](https://www.amazon.co.jp/dp/B07JK7FZH2)』を読んだりアウトプットして理解することをおすすめします。
ABC備忘録[ABC157 C - Guess The Number] (Python)

>#問題文
以下の条件を満たす$0$以上の整数が存在すれば、それらのうち最小のものを出力してください。そのような整数が存在しなければ、$-1$と出力してください。
十進表記で丁度$N$桁である。($0$は$1$桁の整数とする。その他の整数については、先頭に0をつけた表記は認めない。)
左から数えて$s_i$桁目は$c_i$である。$(i=1,2,⋯,M)$

>#制約
入力は全て整数
$1≤N≤3$
$0≤M≤5$
$1≤s_i≤N$
$0≤c_i≤9$

[ABC157 C - Guess The Number](https://atcoder.jp/contests/abc157/tasks/abc157_c)

#解法
問題文より、求める整数は3桁なので総当たりで計算していきます。

```Python
N, M = map(int,input().split())
s = []
c = []
for i in range(M):
  S, C = map(int,input().split())
  s.append(S)
  c.append(C)


for i in range(10 ** (N + 1)):
  Str = str(i)
  
  if len(Str) == N and all([Str[s[j] - 1] == str(c[j]) for j in range(M)]):
      print(Str)
      exit()

print(-1)
```

二個目のforのなかのifはall関数を使用しています。all関数はリストやタプルのようなオブジェクトの要素のすべてが真のときにTrueを返します。ここですべての条件が一致いているかどうか判定しています。
Rails6 Nginx 本番環境でwebpackのcssとjsが読み込まれない時

どうもチャンクノです。
今回は本番環境で起きたwebpackで管理しているcssとjsが読み込まれない時に試して解決した方法を書きます。

書くと言ってもリンクを貼るだけなんですが笑
http://pdo99.hatenablog.com/entry/2016/11/18/000951

ここに書いてあるリンクの内容を
/etc/nginx/conf.d/***.conf または
/etc/nginx/nginx.conf
に書きましょう。
書いたらnginxを再起動

```
locationの後はjsまででいい。理由は後述。

location ~* .(html|css|js)$ {
　root /var/www/html/***/public;
　expires 10d;
　access_log off;
　break;
}
```

もちろんrootは各々のものに変えましょう。
これでwebpackで管理しているcssとjsが読み込まれるようになりました。
調べた感じRails6でこのエラーを解決できてる人はいなかったので、この記事がRilas6ユーザーの救いになれば嬉しいです。
僕はこの記事を見つけるまで2日かかりました、、、。その二日間は地獄だった。

で、なぜjsまででいいかというとこの記事の内容を完コピすると画像が404エラーになります。
何故なのかは知識不足で分からないです、、、。
その時画像をまだ扱ってなかったので原因がわからず、これでまた二日ぐらい時間を無駄にしました、、、。その二日間は地獄だった。
計四日地獄。

まあこれでwebpackで管理しているcssとjsが無事読み込まれるようになりました。
もしnginxを使っていて、webpackで管理しているcssとjsが読み込まれない場合にこれを試してみてください！
それでは今回はこの辺で！！
よきプログラミングライフを🙏

```
記事なくなった時用に一応オリジナルをここに貼り付けておく。

location ~* .(html|css|js|jpe?g|png|gif|svg|mpg|flv|swf)$ {
　root /var/www/html/***/public;
　expires 10d;
　access_log off;
　break;
}
```
swift 簡単でおしゃれなチュートリアルライブラリ,Instructions

##使うライブラリ
Instructions
https://github.com/ephread/Instructions

tableViewみたいに直感的に使えてすごく便利です。

```ViewController.swift
class ViewController: UIViewController{

//手取り早くstoryboardで設置して紐付けといてください。
    @IBOutlet weak var startButton: UIButton!
    let coachMarksController = CoachMarksController()
    //pointOfInterestが指し示されます。スポットライトが当たるみたいに
    private var pointOfInterest:UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.coachMarksController.dataSource = self
        self.pointOfInterest = self.startButton 

    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated) 
        self.coachMarksController.start(in: .currentWindow(of: self))
    }
}

extension ViewController:CoachMarksControllerDataSource, CoachMarksControllerDelegate{
    func numberOfCoachMarks(for coachMarksController: CoachMarksController) -> Int {
//表示するスポットライトの数。チュートリアルの数。
        return 1
    }

    func coachMarksController(_ coachMarksController: CoachMarksController,
                                  coachMarkAt index: Int) -> CoachMark {
//指し示す場所を決める。　今回はpointOfInterestすなわちButtonga指し示される
        return coachMarksController.helper.makeCoachMark(for: pointOfInterest)
    }
    

//tableview　でいうreturn cellに似てるのかなってイメージ。表示するチュートリアルメッセージなどがいじれる
    func coachMarksController(_ coachMarksController: CoachMarksController, coachMarkViewsAt index: Int, madeFrom coachMark: CoachMark) -> (bodyView: CoachMarkBodyView, arrowView: CoachMarkArrowView?) {
        let coachViews = coachMarksController.helper.makeDefaultCoachViews(withArrow: true, withNextText: true, arrowOrientation: coachMark.arrowOrientation)
        coachViews.bodyView.hintLabel.text = "チュートリアルメッセージです！"
        coachViews.bodyView.nextLabel.text = "OK"
        return (bodyView: coachViews.bodyView, arrowView: coachViews.arrowView)
    }
}

```

![スクリーンショット 2020-04-19 22.08.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273734/c915d7d2-64d2-2fa2-0221-880cf5314a48.png)



##注意すること
github上でのサンプルコードと異なる点

```swift
self.coachMarksController.start(in: .window(over: self))
```

本来ならこのコードで動くはずなのですが、ERRORに遭遇

```
[ERROR] The overlay view added to the window has empty bounds, Instructions will stop.
```
https://github.com/ephread/Instructions/issues/231
こちらで挙げられていました。下記のように修正したら無事動きました！

```swift
self.coachMarksController.start(in: .currentWindow(of: self))
```
2020/04にphpをMacにinstallする方法

#動機
転職してみたい企業を発見
→そこがlaravelとvue.jsをメインで使ってるとこ
→どっちも知ってるのは名前だけ。とりあえずyoutubeで勉強しよう〜
[作って学ぶLaravel入門講座　第1回 インストール＆初期設定編](https://www.youtube.com/watch?v=Br_Tx619k9E&list=PL3B2bjwrmhfSg8wVfjW-ldH8zNu_xf7zB)
→開始早々に「phpは予めinstallしといてね」
→ググる

#参考サイト

php install で出てきたこれら参考にしたけどインストールできず
[HomebrewでPHP7.2を導入する](https://qiita.com/saken649/items/b5830de62211b600f7ee)
[Homebrewでphp7.2を入れようとしたらハマった](https://qiita.com/katokazu_dev/items/1da3c57ab43ac37bcde1)

#環境
Macです
vscodeつかってます

#解決

そもそも今は
`PHP 7.4.5`
らしい。。

これでインストールできた
`brew install php`
めっちゃシンプルだった

あとはエディタを再起動したら反映されてる


#僕レベルの初学者への豆知識


Macにはもともとphp入ってるけど古いやつ
`/usr/bin/php`
って場所に
`PHP 7.1.0`
が入ってた気がする、、？（reloadしたら忘れてしまったw）

場所は
`which php`
バージョンは
`php -v`
で確認できる

正常にinstallできててもエディタの再起動（再読み込み）をしないと反映されない

vscodeなら
`cmd + Shift + p`
でコマンドパレット表示して
`reload`
って入力したら
`Reload windouw`
ってやつでてくるからそれをクリック

場所がここで
`/usr/local/bin/php`
バージョンが
`PHP 7.4.5`
ならOKです！（２０２０/０４/２０）
初めてのウォーターフォール開発でも戸惑わないように、設計書を書く目的を整理する

## 背景と前提
アジャイル開発だったチームからウォーターフォール（寄り）の開発のチームに移動になりました。設計フェーズから合流し仕様書を作っていますが、「このドキュメントがどこで活きるのか（なぜこんなにきちんと作らなければならないのか）」という点でまず最初に躓いたので、備忘として残しておきます。
私と同じような「設計書とは！？」という状態の方を読者として想定しています。

## 本記事で書くこと・書かないこと
* 「設計書」というドキュメントが、誰にとっていつどのように必要なのか、について自分の理解をまとめます。
* 各設計書のフォーマットや細かな書き方については触れません。（所属するチームの文化にもよると思いますし、分かりやすくまとまっている文献、サイトがすでにたくさんあるため）
* 開発手法についても詳細は触れません。（開発手法についての詳細やTipsはすでにネットにもたくさん知見があるため）

## 1. ウォーターフォール開発とは
設計書を書くのはシステム開発のどのタイミングなのかを説明するために、今チームで行なっている「ウォーターフォール」型の開発手法についての私の理解を簡単におさらいします。
ウォーターフォール型開発とは、ものを作るまでの決め事をするフェーズ（要件定義〜内部設計）と、ものを作り初めてリリースするまでのフェーズ（開発〜統合テスト）がきっぱり分かれている開発の進め方です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311215/31ac6ea5-e0bb-8aca-f149-401bcc1f0b83.png)
([参考：「アジャイル開発」って何がいいの？--アジャイル開発を実案件に生かすための基礎知識](https://japan.zdnet.com/article/35003090/))
上図のように、開発に入る前に「何のためにどういうものを作れば良いか」がしっかり決まりきっている状態なので、いざ手を動かす時に迷わずにすみます。また設計時点でどこにどれくらい時間がかかりそう、というのが分かるので進捗も把握しやすいのがメリットです。特に大規模なシステムを開発するときはこの手法が取られることが多いようです。
設計書は、システムで実現したいことを決めた後（要件定義）、どうやって実現するか、という検討をするとき（外部設計〜）から必要となります。

## 2. 本記事が示す「設計書」の種類
前述の「『何のためにどういうものを作れば良いか』がしっかり決まりきっている状態」を作るために必要なのが設計書、なのですが、本記事では具体的には下記のドキュメントのことを想定しています。それぞれの役割は記載の通りです。

* 画面遷移図・・・画面間のつながりと、遷移のトリガーを俯瞰できるもの。
* ERD・・・そのシステムに登場するデータの関係を表すもの。
* DFD・・・データの流れと関連する登場人物を俯瞰できるもの。　データ観点のシステムの地図。
* 各画面設計書・・・そのシステムの画面に登場する機能と、果たすべき役割の全量を示すもの。
* 機能一覧・・・開発フェーズで作り上げる機能の全量を示すもの。

## 3. 設計書は誰が、いつ、どのように使うのか
設計書を見る人の立場別に整理しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311215/df7c4692-7a2e-1b44-a579-324dd75aa754.png)

* 上記全ての立場の人が見てわかるようにするために、何をどこまで表現するか吟味する必要があります。また、書く内容の正確さに加え、単語の分かりやすさや見やすさに配慮する必要があります。
* おそらくそのために、ERDやDFDに共通の書式ルールが存在したり、チーム内でドキュメントのフォーマットや命名規則などのルールが設けられたりしています。
* 設計書をそのルールに従って作成することは、読者が設計書を読解するための時間をかけない、誤った理解をしないように防ぐ、という効果があります。

## 終わりに
開発手法の違いについてこれまで気にしたことはなかったのですが、自分が異なる状況に置かれて初めて、その文化を理解することは自分が手を動かすために必要なことなのだと実感しました。
【namespace】 admin(管理者)用、URL作成

#【ゴール】　
「namespace」を使用してURLをカスタマイズ

例: http://localhost:3000/admins/top 　←みたいな感じにしたい。

#【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

#【実装】
まずは新規アプリケーションを作成

```Mac内.terminal
 $ rails new (アプリケーション名)
　　　　　　　↓
 $ cd (アプリケーション名)
　　　　　　　↓
 $ rails s -b 0.0.0.0
```

アプリケーションが起動するかを確認

![スクリーンショット 2020-04-18 23.36.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/30cf1b04-4a20-2647-1dd1-54f83149555a.png)

次に　config/routes.rbへ移動し、以下のコマンドを実装

```config/routes.rb
Rails.application.routes.draw do
 namespace :admins do
   get 'top'=>'admins#top'
 end
end
```

mac terminalへ移動し、rails routesを入力！！

```Mac内.terminal
 $ rails routes
　　　　　
       (省略)

 admins_top GET    /admins/top(.:format)    admins/top#top
＃上記のルートが記述あればOK！
```

以上
Spring Cloud Configでファイルシステム上のプロパティファイルを使用

クラスパスとかファイル指定とかでプロパティファイルを読み込むやり方。リファレンスの [Spring Cloud Config - File System Backend](https://cloud.spring.io/spring-cloud-static/spring-cloud-config/2.2.2.RELEASE/reference/html/#_file_system_backend)に書いてある。ちょっとしたテストをやるには手軽で良い。

# ソースコード
## Server
まず、server側のプロパティファイルに```spring.profiles.active=native```と指定する。

次に、プロパティファイルはデフォルトでは以下に配置する。なので```\src\main\resources```に配置すれば読み込んでくれる。

```
classpath:/
classpath:/config
file:./
file:./config
```

プロパティファイル配置場所を任意のディレクトリに変更したい場合```spring.cloud.config.server.native.searchLocations```を使用する。以下はwindowsで```C:\configtest```を指定した例。

```
spring.cloud.config.server.native.searchLocations=file:///C:/configtest/
```
ルーティング

# ルーティング

コントローラ、メソッドそれぞれに
```@RequestMapping```
を付与することでルーティングを設定できます。
コントローラの@RequestMappingに「routing」、
メソッドの@RequestMappingに「index」を指定した場合、
URLは「http://localhost:8080/routing/index」となります。
HTTPメソッドによりメソッドを分ける場合は「method = RequestMethod.GET」の要領で指定することができます。

# URL中のクエリストリング取得
メソッドに
```@RequestParam Integer id```
の要領で指定することができます。

# POST値の取得
メソッドに
```@ModelAttribute IndexForm form```
の要領で指定することができます。
なお、POST値を保持するクラスにSetterがない場合は値が設定されないのでご注意ください。

# サンプルプログラム（ルーティング、GET、POST値取得）
```demo\src\main\java\com\example\demo\RoutingController.java
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
@RequestMapping("routing")
public class RoutingController {

    // routing/index の処理(GET)
    @RequestMapping(value = "/index", method = RequestMethod.GET)
    public Model indexGet(Model model, @RequestParam(required=false) Integer id) {
        System.out.println("ID=" + id);

        return model;
    }

    // routing/index の処理(POST)
    @RequestMapping(value = "/index", method = RequestMethod.POST)
    public Model indexPost(Model model, @ModelAttribute IndexForm form) {
        System.out.println("form.name=" + form.name);

        return model;
    }

    /**
     * POST値保持用のフォームクラス
     */
    public class IndexForm {
        public String name ;

		public String getName() {
			return name;
		}

		public void setName(String name) {
			this.name = name;
		}
        
    }
}
```
【Spring】環境構築

# IDE 準備
https://mergedoc.osdn.jp/ からJavaの「Full Edition」をダウンロードする。
その後、適切な場所に解凍し起動する。


# プロジェクト作成
「ファイル　→　新規　→　その他」　を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/f20b702d-715e-36ec-35f4-3f2f69fdb32b.png)

「Spring スタータープロジェクト」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/79d659d7-fed5-7fe2-817a-b8029854965b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/e5c67b87-3049-8a8f-7060-0740bac01fdf.png)

使用するものがあれば適宜選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/434d6a7f-d17d-72f4-f632-a897a6da8b65.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/731f1578-3ffa-cab5-4eaa-e7c9bb984028.png)

上記手順ではデータベースを使用するため、データベースの設定を行う
※下記はサンプルなので適宜修正してください
```/demo/src/main/resources/application.properties
spring.datasource.url=jdbc:mysql://localhost/{データベース名}?serverTimezone=JST
spring.datasource.username={ユーザ名}
spring.datasource.password={パスワード}
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
```

# アプリケーション起動
## 起動手順
プロジェクトを右クリック　→　実行　→　Spring Boot アプリケーション
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/4a3c5c85-1134-2e11-fdcf-537c1741c3de.png)

## 起動確認
ブラウザで http://localhost:8080/ を開く。
下記の通りエラーが面が表示されるが、コントローラーなどがないため発生するものなので問題ない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33640/c9636d5f-4879-695d-6b98-a1ee745cd928.png)
DBeaverにてMySQL 8+のドライバを初期設定する方法

DBeaverでMySQLの8.Xを読み込もうとした際に、初期設定で何点かつかえてしまいました。対応として行ったことをメモとして残します。


## 前提条件
- DBeaver、MySQLはそれぞれインストール済
- MySQLのバージョンは8.X代


## 設定の仕方

### 1. MySQLにてタイムゾーンを設定する

```
> mysql -u root -p

mysql > SET GLGOBAL time_zone= '+09:00';
#日本時間に設定。ソースの*1を参考にしました

mysql > select now();
#入力時点での日本時間が表示されれば成功

mysql > exit
```
これをしておくことで、後にDBeaver側で以下の「タイムゾーンを設定してね」というエラーがでるのを防ぐことが出来ます。同じ状況で困った方にこの記事を読んでいただけやすいように、エラー文を掲載しておきます。

>The server time zone value '(文字化けテキスト)' is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the serverTimezone configuration property) to use a more specifc time zone value if you want to utilize time zone support.


### 2. DBeaver側でドライバを設定する
1. DBeaver開始後、左上のコンセントにプラスマークがくっついているアイコンから「新しい接続」ボタンをクリック
2. ポップアップの右上の「Classic」をクリックし、「Gallery」に変更する
3. 入力欄に「mysql」と入力し、「MySQL 8+」を選択(*2)。パスワード等を入力する

不具合なのかよくわかりませんが、私はClassic表記だとMySQL 8+のドライバーを表示させることが出来ず、ここで躓いていました(2020年4月18日時点)。

上記の2手順で設定できるかと思います。

## ソース・参考
- *1 : [How do I set the time zone of MySQL?](https://stackoverflow.com/questions/930900/how-do-i-set-the-time-zone-of-mysql)
- *2 : [Support mysql 8.0](https://github.com/dbeaver/dbeaver/issues/4691)

(以上)
「Train a Deep Learning model」を写経してみた

# 概要
以下を写経してみた。
https://aws.amazon.com/jp/getting-started/hands-on/train-deep-learning-model-aws-ec2-containers/?nc1=h_ls

# ざっくり概要

普段SageMakerなどでマネージドでPythonを書いている方におすすめ。
割と幅広く学べる内容かと。
* EC2インスタンスを作る
* ECRからDockerコンテナをPull
* MNIST CNNモデルを使って訓練実行

# 詰まったところ

* [権限系のエラー](https://docs.aws.amazon.com/ja_jp/AmazonECR/latest/userguide/common-errors.html)がおきた
    * [MFAを使った認証](https://qiita.com/kounan13/items/2da757340767e7c0bff1)手順が省略されていることに気づかず目を瞑って写経したことが原因

```
A client error (AccessDeniedException) occurred when calling the GetAuthorizationToken operation: 
    User: arn:aws:iam::account-number:user/username is not authorized to perform: 
    ecr:GetAuthorizationToken on resource: *
```

# 感想

* 普段SageMakerを使ってマネージドで機械学習を使っているが、時にはこういう形でコンテナとかを意識する形にしてみても良いかなと
頑張らないフォームをVue.jsで作成する

# フォームの作成で消耗していますか？
Webサイトのフォームは、基本的にはJavaScriptによるバリデーション等の制御をもって作成されている。そして当然、工数に跳ね上がる。つまりフォームの作成は面倒くさい、やりたくないエンジニアは多い。ことSPAになれば、クライアントサイドでバリデーションを行ったあとで、POSTしたデータをサーバーサイドを再検証する。POSTされてきたデータを自画面で捌いて、再描画するような昔の時代なら、HTMLを再構成してPUSHすれば済んだ時代ではなくなった。

# それ、HTMLでも制御できますよ？
しかし、一方でVue.jsやReact.jsのようなフレームワークの登場によりとっつきやすくなったフロントエンドは、UI制御すべてがJavaScriptで行わないといけない思いがちである。もちろんそんなことはない。HTMLの規格は常に進化しており、様々なことを実現できるようになっている。簡単なモック程度であるならば、JSではなくブラウザ側に制御を移譲してしまってよいであろう。

# 頑張らないフォームをVue.jsで作成する

完成目標としては以下のように定める

- バリデーションは頑張らない
- SPAライクな実装はしたい

HTMLのfrom属性とrequired属性、submit.prevent（ブラウザ挙動によるformのactionを停止）を使用すると実現できる。

```HTML
<div class="container">
    <form id="app" v-on:submit.prevent="onSubmit">
        <div v-if="status === 0">
            <h1>１番めの入力です！！</h1>
            <input type="text" v-model="text1" required>
            <input type="text" v-model="text2" required>
            <input type="text" v-model="text3" required>
            <input type="text" v-model="text4" required>
            <button>次の入力へ</button>
        </div>
        <div v-else-if="status === 1">
            <h1>２番めの入力です！！</h1>
            <input type="text" v-model="text5" required>
            <input type="text" v-model="text6" required>
            <input type="text" v-model="text7" required>
            <input type="text" v-model="text8" required>
            <button>次の入力へ</button>
        </div>
        <div v-else>
            <h1>入力完了！！</h1>
        </div>
    </form>
</div>
```

```javascript
new Vue({
    el: '#app',
    data(){
        return{
            text1 : '',
            text2 : '',
            text3 : '',
            text4 : '',
            text5 : '',
            text6 : '',
            text7 : '',
            text8 : '',
            status: 0
        }
    },
    methods:{
        onSubmit(){
            this.status++;
            window.alert('ok')
        }
    }
})
```

https://codepen.io/yakumomutsuki-the-bashful/pen/NWGNvEB

上記のような実装を行うと、ボタンを押して入力項目に満たない場合は、該当部分にブラウザが定めるツールチップが表示され、すべてを満たせば次の入力項目の画面が切り替わる。

# ただし、プロダクションコードとしては適用できません
ただし、上記のコードはUI的にも洗練されておらず、更に**Safari**ではrequiredが有効に機能しないという報告がされている。簡単にモックを作成する手段として、覚えておくとよいであろう。
【Rails】Chartkickの導入方法

グラフを簡単に表示させるChatrkickの導入方法を備忘録として
リファレンスは[こちら](https://chartkick.com/)

#導入方法

まずGemfileに

```
gem "chartkick"
```

を加え

```
bundle install
```

次にapplication.jsに

```application.js
//= require chartkick
//= require Chart.bundle
```

を加える

これだけでもう使える状態にはなっているのだが一度サーバーを再起動しないとline_chartなどのメソッドが使えずNoMethodErrorになるので注意。
再起動さえすれば使えるようになっているのであとはリファレンス通りに書けば映るはず。
ではでは

[参考サイト](https://stackoverflow.com/questions/19308820/chartkick-rails-4-undefined-method-pie-chart-for-class)
GoogleChatで定期的にメッセージを投下するbotを作る！

Google Hangout Chatで部屋を作ったとき、部屋のルールを参加者に伝えたかった。だからBot機能を使って、人が参加したらその人にメンション付きでルールをメッセージしたかったのだが、Hangoutのbotだと部屋に人が参加したときのイベントを拾えないことがわかった。マジGM
（ADD_TO_SPACEでできるんじゃね？って思う方もいるかもしれないが、残念ながらこれは「Botが部屋に参加したときにBot自身が挨拶としてメッセージを投稿する」関数でしかないのだ）

https://codelabs.developers.google.com/codelabs/chat-apps-script/#2

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/f5caf4c1-4bf8-77c0-9772-f723d768e3d8.png)


だから、どちらかというとルールを定期的に投稿するスケジューラを作ったほうが良いことに気づいた。その作り方を書く。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/b01b7af7-f199-a4b8-a414-6b0352d757ca.png)


## Hangoutで部屋を作る
まず適当にテスト用の部屋を作る。
どうもHangout Chatだと部屋を消すことができぬらしいから、
もし作るなら他の人も似たような用途で使える部屋名にしたほうがいい。

「Botテスト会場（利用自由）」

なんかにね。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/678e0f87-6e35-e766-4303-031c2cdbeb22.png)



## webhookを設定する
次はwebhookを取得する。これはメッセージを投稿する先の部屋のURLを作るようなもんだ。

こうやる。
名前は好きにしろ。画像も好きにしろ。
保存したら、webhookのURLをコピーしてメモしておけ。
これがメッセージの投下先の目印になる。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/6e7e6712-fc88-9cf4-2bab-30262e171684.png)





![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/fdae458e-1f9a-1673-942d-466711265846.png)




![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/40b0657c-953a-168f-93cc-3249daa95dd6.png)


## スクリプトを書く

GoogleAppsスクリプトエディタを開く

https://script.google.com/create

下をコピペして、①②を書き換える。


```javascript

function message() {
  // ①webhookのurlに書き変える
  var url = "https~~";
  
  var payload = {
   // ②好きなメッセージを入れる。
    "text" : "うわああああああああああああああああああああああ！！！！！！！（^q^）"
  }

  var json = JSON.stringify(payload); //エンコード
  
  var options = {
  "method" : "POST",
  "contentType" : 'application/json; charset=utf-8',
  "payload" : json
  }
  
  var response = UrlFetchApp.fetch(url, options);
}

```
 
実行ボタンを押してテストしてみよう。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/643d22f1-0045-728b-1488-f3b695092cd1.png)


そうすると、さっき作った部屋にメッセージが飛ぶ。
ここまでくればほぼ完成だ。

## スケジューラを設定する

この時計っぽいボタンを押す。
そしたらトリガーを追加して、いい感じにスケジュールをセットしよう。
テストだから、分ベースのタイマーの1分おきにしよう。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/23e157da-693e-abca-3f93-30d3d3d734ff.png)
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/f4c541a0-21c7-05f4-2f94-585a5b3daafd.png)
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/275ee006-f37c-c085-d1a8-4fa068e3d6bf.png)


## 仕上げ

これで君が作った実験場にメッセージを１分おきに飛ばすことができた。
もし別の部屋に作りたければ、別の部屋でwebhookを取ってコードのURLを書き換えて試せばいい。

## 止め方

もし君がそのBotを作ったなら、スケジュールを削除すればいい。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/ca027291-2388-b8cf-2ba5-e97ad0b080e9.png)

もし作者でなければ、webhookを消そう。

こうして、こう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/b6c51ae0-56b1-dc09-b72f-714dfe3c13ae.png)
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129639/29e027f5-7085-4fca-b7c6-4b594f84d56c.png)
「CircleCIの新UIでHello Worldしてみた」を写経してみた

# 概要
以下を写経してみた。
https://dev.classmethod.jp/articles/circleci-new-ui-hello-world/

# 得られたもの

* CircleCIって便利なんだなという感触
 * GitHubとの連携がシームレス
 * Commit Hookなのかな。コミットしたらビルドが動いた（要確認）
* Jenkinsからそろそろ乗り換えてみようかなという迷い
    * どちらが良いとかではないですが、そろそろ別のものも使ってみようかなと
    * 普段AWSを使っているので、CodeBuildでもいいんですが

# 手順
* 上記サイトの通りなので、省略

# 感想・まとめ

* 日々写経を色々するのが好きなんですが、コスパ良しの内容でした
    * 理由：普段写経する時、手順通りやっても動かないことって結構あったり、迷ったりすることが多いですが、わかりやすく迷いどころもなかった。
* CircleCIは新UIになったようなので、比較的早めに触った事になるかな
Polynomial optics のメモ

## 背景

レンズを毎回レイトレーシングで真面目に計算するのはめんどい.
(たとえば PBRT-v3 では真面目にレンズシステムの追跡をしていますね)

レンズシステム(複数レンズ面)の特性を入力のレイと出力のレイから求める(近似する)ことができれば, レンズ面を毎回追跡する必要がなくなる.
PSF を計算したり, 収差などをより効率的に求めることができたり, モンテカルロパストレーシングに DSLR(Digital single-lens reflex. 一眼レフカメラ)などのレンズ構成も考慮したときに計算量の削減(e.g. 1/10 の時間に削減)が期待できる.

最近だと Polynomial optics(日本語訳は多項式表現の光学?)が流行っているようなので調べました.

### Matrix optics

既存の理論として, matrix optics(ABCD 行列)がある

ABCD 行列
https://en.wikipedia.org/wiki/Ray_transfer_matrix_analysis


## Polynomial Optics: A Construction Kit for Efficient Ray-Tracing of Lens Systems(2012)

https://www.cs.ubc.ca/labs/imager/tr/2012/PolynomialOptics/

https://github.com/edwinRNDR/PolynomialOptics

レンズを Taylor 展開して多項式近似する手法の元となる論文. plane/sphere 近似する.

レイの入力(e.g. センサー面)と出力(e.g. entrance pupil 面)を指定し, 4D ライトフィールド(波長も考慮すれば 5D?)としてレンズシステムを扱う.

多項式近似を求めるのには Maple を使っている.
多項式が求まったら, LLVM などを使って JIT 計算することで高速化することができる.

## Efficient Monte Carlo rendering  with  realistic  lenses(2014)

https://cg.ivd.kit.edu/publications/pubhanika/2014_lenssim.pdf

Polynomial Optics(2012)でのTaylor 展開の精度は lens flare を計算するには十分であるが, image 歪み, sharpness 大きい bokeh には不足である.
モンテカルロレンダラーに組み込めるように, importance sampling しやすくしたりなどの拡張. 
plane/plane 近似する.

## Sparse high-degree polynomials for wide-angle lenses(2016)

https://jo.dreggn.org/2016_optics/lenses2016.html
https://cg.ivd.kit.edu/1962.php

Efficient Monte Carlo rendering~(2014) では, 広角レンズをうまく扱えなかった.
次数をより上げたり(論文では 15 次元まで), light sampling(ライトからのサンプリング)も考慮したりなどで, 広角レンズもうまく扱えるように拡張.
また, 波長を考慮して 5x5 の多項式(5D ライトフィールド?)の関数にしている. 

非球面レンズも考慮している.

## NeuroLens: Data-Driven Camera Lens Simulation Using Neural Networks(2017)
https://quan-zheng.github.io/

Polynomial optics(多項式)を, ニューラルネットワークで置き換える試み.

Sparse high-degree~(2016) に比べて同時間でより精度よく扱える.
Sparse high-degree~(2016)に比べて 1.2 ~ 1.5 倍ほど NeuroLens のほうが時間かかる.

トレーニングには時間がかかる. bi-convex のシンプルなもので 1 時間, fisheye では 7.5 時間. 広角になるほど時間がかかる.

## Adaptive sparse polynomial regression for camera lens simulation

https://quan-zheng.github.io/

First author は NeuroLens と同じ.
Sparse high-degree polynomials~(2016)の, Polynomial regression 版(neural ではない機械学習アプローチを使う. regression tree?). 

## Brute-force calculation of aperture diffraction in camera lenses(2019)
https://cg.ivd.kit.edu/lens_diffraction.php

Sparse high-degree(2016)に追加して, aperture stop での回折(diffraction)を考慮したもの.
回折効果も含んだモンテカルロレンダリングに使える...(はず. 論文では aperture stop での diffraction 画像しかない)


## まとめ

* とりあえず論文が出た時系列で読んでいくとよい.
* 現状, Polynomial optics も万能というわけではないが, 途中から機械学習的アプローチ(NeuroLens)が出てきている. differentiable renderer と組み合わせてより汎用的に使える技法がでてくるかも.

## その他

* Monte Carlo Ray-Trace Diffraction Based On the Huygens-Fresnel Principle
  * https://arxiv.org/pdf/1802.08814.pdf
xmodmapを使った Ubuntu18.04でのキーバインド変更

![HHKB Lite2をUbuntu18.04で使えるように設定した](https://qiita.com/syabonbubble/items/18eb32aab860cb53d40b)の続きです。

前回HHKBのUSレイアウトを設定しましたが、HHKBの左Superキー(◇)が反応しなかったのでxmodmapを使ってキーバインドの変更をしたいと思います。

# キー情報を調べる
キー情報を取得するには`$ xev`コマンドでアプリケーションを起動した後、白い枠内で該当のキーを押下すれば対応したkeycodeが表示されます。
![design10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507599/d7640fbf-c5f4-6334-4968-49c028cd565f.png)

自分の場合変更したい左Superキーのkeycodeは133でした。
![design11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507599/36550185-c98e-0c8d-2c0c-610a9ac0e1fb.png)

# マッピングする
キー情報が取得できたところで、実際にキーバインドの変更を行います。

以下のコマンドで、現在のキーボードマッピングのテキストファイルを作成します。
`$ xmodmap -pke > ~/.Xmodmap`

マッピングが書かれたテキストファイルを編集し、133番目のkeycodeをSuper_Lとします。
`$ vim ~/.Xmodmap`
以下のように編集すれば左◇に左Superキーを割り当てることができます。
![design12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507599/10b1509d-f4cd-6e4f-aaa4-328df19f39c0.png)
マッピングの中にはひらがなカタカナや変換無変換などがあるのでkeycodeを調べて好みにマッピングすることができそうです。

以下のコマンドでマッピングをアクティブ化できます。
`$ xmodmap .Xmodmap`

以上のことができればキーボードはマッピングに設定したとおりになっていると思います。

# 変更の永続化
上記でキーバインドが変更できていても、変更は一時的なもので再起動すればデフォルトに戻ってしまいます。
なので、変更の永続化をします。

まず編集後の.Xmodmapファイルを適用した現在のxmodmapを、以下のコマンドでxkbファイルに変換します。
`$ xkbcomp $DISPLAY $HOME/.xkbmap`

その後、再起動のたびにマッピングをアクティブにする起動コマンドを作成します。
以下のuserを実際のユーザープロファイルにして入力します。
`$ xkbcomp /home/user/.xkbmap $DISPLAY`

これでキーバインド変更の完了です。

# 参考にしたサイト
![HHKB をUbuntuで使う](https://jun-networks.hatenablog.com/entry/2019/11/20/160003)
![Ubuntuでキーボードのマッピングをxmodmapで変更する(Ubuntu18.04対応)](https://www.komee.org/entry/2018/10/24/150000) 
![Persistent Keyboard Mapping on Ubuntu using xmodmap](https://medium.com/@saplos123456/persistent-keyboard-mapping-on-ubuntu-using-xmodmap-cd01ad828fcd)
【ExcelVBA】カンマ区切りの文字列を指定範囲に収まるように出力

#■目的
カンマ区切りの文字列を指定範囲に収まるように出力する
・指定範囲に収まる文字数で改行
・改行時はカンマ部分で改行する
・指定範囲に収まらない場合は行を追加する


#■事前準備
・出力用の枠を作っておく
・文字列記載場所、出力用の枠は表示形式を「文字列」にしておく
・マクロ内の定数を必要に応じて変更する


#■サンプルコード

```vb

Option Explicit

Sub 文字列成型()

'記載欄は文字列型にしておく

Const brow As Long = 5          '開始行
Const bcol As Long = 2          '開始列
Const MojiNum As Long = 66      '一行に入る文字列
Const TargetRowNum As Long = 5  'テンプレートの行数

Dim targetStr As String         '対象文字列
Dim startNum As Long            '検索開始位置
Dim findNum As Long             '検索結果位置
Dim findStr As String           '検索結果文字列
Dim hanteiStr As String         '文字数確認用
Dim n As Long                   '出力用配列の添え字
Dim targetAry() As String       '出力用配列（1要素に1行分の文字列）
Dim i As Long
Dim j As Long



'対象文字列を変数に格納
targetStr = Range("B2").Value

'出力用配列の添え字を設定（最初は0）
n = 0
ReDim targetAry(0)

'開始位置を設定(最初は1)
startNum = 1

'対象文字列の「,」の位置を検索し、検索結果が0になるまで繰り返し
Do Until InStr(startNum, targetStr, ",") = 0

'検索結果位置を変数に格納
findNum = InStr(startNum, targetStr, ",")

'（最初は1,2回目以降は開始位置+1）から（検索結果位置-1）を抜き出す（検索結果文字列）
If startNum = 1 Then
    findStr = Mid(targetStr, 1, findNum - 1)
Else
    findStr = Mid(targetStr, startNum, findNum - startNum)
End If

'検索結果文字列を文字数確認用変数に格納（「,」を追記）
If hanteiStr = "" Then
    hanteiStr = findStr & ","
Else
    hanteiStr = hanteiStr & findStr & ","
End If

'文字数確認用配列の文字数を調べる
'66以下の場合
If Len(hanteiStr) <= MojiNum Then
    '文字数確認用配列の値を出力用配列へ
    targetAry(n) = hanteiStr

'66以上の場合
 Else
    '出力用配列の添え字を+1して検索結果文字列を格納
    n = n + 1
    ReDim Preserve targetAry(n)
    targetAry(n) = findStr & ","
    
    '文字列確認用変数の値を更新
    hanteiStr = findStr & ","

End If

'開始位置を設定
startNum = findNum + 1

Loop


'残りの値がある場合
If Len(targetStr) > startNum Then
    '残りの値を出力用配列に格納
    
    '出力用配列最終添え字に値が入る場合は追記
    If targetAry(n) <> "" And Len(targetAry(n)) < MojiNum Then
        targetAry(n) = targetAry(n) & Right(targetStr, Len(targetStr) - startNum + 1)
    
    '入らない場合は新しい添え字を+1して格納
    Else
        n = n + 1
        ReDim Preserve targetAry(n)
        targetAry(n) = Right(targetStr, Len(targetStr) - startNum + 1)
    
    End If

End If


'出力用配列の添え字数が行数以上の場合
If UBound(targetAry) + 2 > TargetRowNum Then

    '必要な数だけ行を増やす
    Rows(brow + 1 & ":" & brow + UBound(targetAry) + 2 - TargetRowNum).Insert
    
End If


'出力用配列の値を転記
For j = 0 To UBound(targetAry)
    Cells(brow + j, bcol).Value = targetAry(j)
    
Next j


End Sub

```

#■サンプルコードの解説

・Excelの内容
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565693/be8c84c4-ee13-280b-074f-1fb13864218b.png)
オレ(Laravel & Vue.js)的開発環境構築もろもろ


新しいマシンを購入したため環境構築を最初から行いましたので、今後のためにも残しておきます。
`Laravel` & `Vuejs`のプロジェクト環境構築を行うエンジニアの皆さんにも参考になると思います。
必要なソフトウェアの箇所だけ流し見してくだい。

# 前提

- マシン詳細
  - MacBook Pro (16-inch, 2019)
  - macOS Catalina バージョン10.15.3
- Windows環境の方には**あまり**参考になりません。


# インストール

## Homebrew

macOS用のパッケージマネージャー。[公式サイト](https://brew.sh/)を参考にインストールします。

```.sh
# Homebrewインストール
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```


## Git

言わずもがな資源管理ツール。brewでインストールします。

```.sh
#gitをインストール
brew install git
```


## PHP

brewでインストールします。

```.sh
# phpをインストトール
brew install php
```


## Composer

PHPのパッケージマネージャー。[公式サイト](https://getcomposer.org/download/)を参考にします。最後のコマンドで`php ./composer.phar`の代わりにグローバルから`composer`で利用できるようにします。

```.sh
# Composerをインストール
# Composerをダウンロード
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
# Composerをセットアップ実行
php composer-setup.php
# セットアップバイナリはいらないので削除
php -r "unlink('composer-setup.php');"
# パスを通す。
mv composer.phar /usr/local/bin/composer
```


## Node.js

node.jsのバージョンを管理できる[nodebrew](https://formulae.brew.sh/formula/nodebrew)経由でインストールします。

```.sh
# nodebrewをインストール
brew install nodebrew
# Node.jsの最新バージョンをインストール
nodebrew install latest
# Node.jsのインストールフォルダを作成する
mkdir -p ~/.nodebrew/src
# Node.jsの安定版をインストール
nodebrew install-binary stable
# 利用できるバージョンを確認
node brew ls
# 利用するバージョンを指定
nodebrew use v12.16.2
# パスを通す
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
```

## Yarn

JavaScriptパッケージマネージャー。[公式サイト](https://classic.yarnpkg.com/ja/docs/install/#mac-stable)でアナウンスされている通りhomebrew経由でインストールします。

```.sh
# Yarnをインストール
brew install yarn
# パスを通す
export PATH="$PATH:`yarn global bin`"
```

## Docker & docker-compose

コンテナ実行環境。`Docker Desktop for Mac`をインストールします。[公式サイト](https://www.docker.com/products/docker-desktop)からdmgファイルをダウンロードしてインストールします。

Macのシステムバーにおなじみのクジラのアイコンが表示されれば完了です。
![docker_sysytem_bar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56388/d301df7c-e817-717f-4299-a7275ae215e2.png)


## アプリケーション(Laravel&Vue.js)

こちらの[記事](https://qiita.com/ucan-lab/items/17c806973e69792ada99)を参考にdockerを基盤にして構築します。

```
git clone https://github.com/ucan-lab/docker-laravel.git
cd docker-laravel
cp .env-example .env
docker-compose up -d --build
composer create-project --prefer-dist "laravel/laravel=6.*" ./src/
rm -Rf .git
```

http://127.0.0.1:10080 でアクセスできることを確認します。


# そのほか、開発ツール

## VSCode

高機能エディタ。[公式サイト](https://code.visualstudio.com/download)からダウンロードします。ダウンロードできたらアプリケーションフォルダへ移動します。
また、VSCodeを利用する場合、`code`コマンドが便利なのでインストールします。

1. VSCodeを開く
2. `Shift + Cmd + p`でコマンドパレットを開く。
3. `shell`と入力すると`Shell command 'code' successfully installed in PATH.`と表示されるのでクリックしてインストール
レスポンシブサイトでデバイスサイズごとにJSを切り替える。

PCとSPでデザインが違う時に、使用したので忘れずにメモ。


```script.js
jQuery(document).ready(function($) {
    if (window.matchMedia( '(min-width: 768px)' ).matches) {
      $(function(){
          /* ウィンドウサイズが768px以上の場合 */
      });
    } else {
      $(function(){
          /* ウィンドウサイズが768px未満の場合 */
      });
    };
});
```

タブレットの時とかにも使える◎

```script.js
if (window.matchMedia( "(max-width: 768px) and (min-width: 480px)" ).matches) {
  /* ウィンドウサイズが 480px以上768px以下の場合 */
}
```

##追記
プラグインを見つけたので、追記。

enquire.js
http://www.nkjmkzk.net/?tag=enquire-js
【第5回】pythonで某Authenticator的なツールを作ってみた

# 少し失敗している（ちゃんと動作しない）
- あえて失敗しているのも載せます。
- 今回は、メインの動作部分をきれいにしました。
- 上部のメニューから新規登録の部分を動作させるために改造してた。
- メニュー＞閉じるはできるようになった。

```python3
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tkinter as tk
import pyotp
import sqlite3
import os
import pyautogui
import sys

def create_table():
    # データベースに接続する
    conn = sqlite3.connect('gauth.db')
    c = conn.cursor()
    # テーブルの作成
    sql='''CREATE TABLE gauth
    (id integer primary key AUTOINCREMENT,
     name text,
     private_key text)'''

    c.execute(sql)
    # 挿入した結果を保存（コミット）する
    conn.commit()
    # データベースへのアクセスが終わったら close する
    conn.close()

def view():
    # データベースに接続する
    conn = sqlite3.connect('gauth.db')
    c = conn.cursor()
    for a in c.execute("select * from gauth"):
        totp = pyotp.TOTP(a[2])  # 鍵的な値
        totp.now()
        # 表示用ラベル
        Static1 = tk.Label(text=a[1])
        Static1.pack(side='left')

        Static2 = tk.Label(text=totp.now())
        Static2.pack(side='left')
    # 挿入した結果を保存（コミット）する
    conn.commit()
    # データベースへのアクセスが終わったら close する
    conn.close()

def insert(id,username,private_key):
    # データベースに接続する
    conn = sqlite3.connect('gauth.db')
    c = conn.cursor()
    # データの挿入
    c.execute(
        "INSERT INTO gauth VALUES (?,?,?)",(id,username,private_key))
    # 挿入した結果を保存（コミット）する
    conn.commit()
    # データベースへのアクセスが終わったら close する
    conn.close()

def window_menu():
    # メニューバー
    menubar = tk.Menu(root)
    filemenu = tk.Menu(menubar)
    filemenu.add_command(label="新規登録", command=new)
    filemenu.add_command(label="登録削除")
    filemenu.add_command(label="閉じる", command=close)
    menubar.add_cascade(label="ファイル", menu=filemenu)
    root.config(menu=menubar)

def new():
    pyautogui.prompt(text='user_name', title='user_name' , default='')
    pyautogui.prompt(text='private_key', title='private_key' , default='')
    #insert(user_name,private_key)

def close():
    sys.exit()

# tkinterでwindowの作成とタイトルを作る
# windowサイズの指定
root = tk.Tk()
root.title(u"g_authentication_tool")
root.geometry("300x200")
window_menu()
if(os.path.exists('gauth.db')):
    view()
else:
    create_table()
    #insert(1,"user1",'base32secret3232')
    view()
root.mainloop()
```
gitの使い方(git init 〜git push)


#はじめに
初めてgitを使う人のために、appを作成してからgit pushするまでの流れを書きました。
pushした後のブランチ作成については下記を参考にしてください。
[gitの使い方(git init 〜git push)](https://qiita.com/shungo0525/items/4bbcbcbd3d7aea40b21e)

##1.新しいレポジトリを作成する
まず、保存するためのレポジトリを作成します。
今回はGithub上で作成します。(Bitbucketだと画面は異なりますが基本は同じです。)
右上にある＋ボタンのNew repositoryを押します。
<img width="1086" alt="スクリーンショット 2020-04-19 20.03.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497683/00d870ae-a94a-4215-bb41-cdd52309a268.png">


Create a new repositoryの画面が開きます。
Repository nameに作成するapｐの名前を入力し、Create repositoryを押します。今回はdemo_appと名付けます。
<img width="744" alt="スクリーンショット 2020-04-19 20.09.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497683/f64c3dc0-e71d-49f4-779f-d5df43f0a724.png">


すると下記のように新規レポジトリを作成できます。
<img width="994" alt="スクリーンショット 2020-04-19 20.14.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497683/0c3b8f0d-5914-0cc8-3b58-86b4ed4718e7.png">

##2.Git使い方
アプリを作成したいディレクトリで下記のコマンドを実行し、アプリを作成します。(例としてrailsアプリで作成しています。)
demo_appの部分はアプリの名前にします。

```:ターミナル 
$rails new demo_app
```

作成したappに入ります。

```:ターミナル 
$cd demo_app
```


ターミナル でgit init → git add → git commitの順に実行します。

```:ターミナル 
$git init
$git add -A     　　　　　　　　　 # -Aとつけるとファイル全てを選択します。特定のファイルのみaddしたければファイル名を指定します。
$git commit -m "first commit" 　# first commit の部分はコメントを残すことができます。日本語でもOKです。
```

Githubで新規レポジトリを作成した際に'https://github.com/○○○○/demo_app.git' というリンクが作成されるのでコピーします。
ターミナル で下記のコマンドを実行します。

```:ターミナル 
$git remote add origin https://github.com/○○○○/demo_app.git   #コピーしたリンクをoriginの後に書く
$git push -u origin master                                    #Githubにpush(反映)される
```

Gitgubでcodeを開くと反映されていることが確認できます。
<img width="978" alt="スクリーンショット 2020-04-19 20.32.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497683/a2d3e84e-d11c-dbf8-8c50-c77d82e12c50.png">

##終わりに
以上でリモートリポジトリに反映することができました。
次回は作業ブランチの作成・反映についても紹介したいと思います。
[gitの使い方(git init 〜git push)](https://qiita.com/shungo0525/items/4bbcbcbd3d7aea40b21e)
UdonSharpでクラス間のデータ引き渡し

これは、UdonSharp_v0.15.4 での情報です。

追記：つまりメッチャ古い！！
　今のUDON(2024/10/26現在)なら、こんな事しなくても普通にクラス名をかけます
　もちろん、メンバ関数も呼び出せるし、メンバ変数にもアクセスできます


## VRChatが2018になった！

VRChatのバージョンアップにより、VRCSDK3が使えるようになりました。
目玉はなんと言ってもUdonというビジュアルプログラミングでしょう。
しかし、グラフをつないでいくのは便利なのかもしれませんが、
新しいことを覚えるのが苦手なおっさん族にはスクリプトください…という気分です。

そこででてきた、C#風に書けるUdonSharp！
思った以上にC#の知識が活かせてこれはいい

クラス単体で完結する系はかなり便利です。

クラス単体で完結するとは、他のUdonSharpのクラスと連携しないという意味です。
できないわけではないんですが…その説明をしていきます。

## UDONSharp間でのデータ引き渡し

例えば、AのCubeをクリックすると、
Bのキューブに回るように指示する場合、こんな感じで書きます。
(このサンプルはUdonSharpの中にあります)

```
[SpinningCubes_5_Master]
UdonBehaviour udonRotateTarget;
private void Start()
{
    udonRotateTarget = (UdonBehaviour) cubeToRotate.GetComponent(typeof(UdonBehaviour));
}

private void Interact() //もともとはOnMouseDownだけど、VRC似合わせて書き換え
{
    udonRotateTarget.SendCustomEvent("DoRotate");
}

[SpinningCubes_5_Dependent]
public void DoRotate()
{
    isRotating = !isRotating;
}

private void Update()
{
    if (isRotating)
        transform.Rotate(Vector3.up, 60f * Time.deltaTime);
}
```

要は、BのUdonBehaviourを取り、SendCustomEventを呼び出します。
SendCustomEventは文字列を引数に取ることから、リフレクションで呼び出していて、
引数を与えることが出来ません。

素直にこう書けないの？という感じがしますが出来ません

```
private void Interact()
{
    // SpinningCubes_5_Dependent udonRotateTarget;
    udonRotateTarget.DoRotate();
}

```

現在、UdonSharpで使えるクラスや関数はホワイトリスト形式であり、
自分の作ったクラスは確実にホワイトリストにないので、
キャストや宣言することが出来ません。
そのうちできるようになるらしいですが…。

メンバー変数のアクセス方法はこんな感じです。

```
var data = (int) udon.GetProgramVariable("intdata");
udon.SetProgramVariable("intdata", 10);
```

しかし、これも注意で構造体は代入できません。
具体的にはVector3、Quaternionが代入できないので、
floatの配列を渡すという感じでいきましょう。

なお、SendCustomEventで呼び出す関数はpublicである必要がありますが、
GetProgramVariable/SetProgramVariable はprivateでも出来ます。
(ただ、いつ修正されてもいいように、publicにしておきましょう)

## Instantiateの注意点

Instantiateを使う場合、VRCInstantiateを代わりに使います。
VRCInstantiateは生成したGameObjectが返ってきます。
ここで、すぐにtransformやgameObjectにアクセスするのは問題ありません。

しかし、UdonBehaviour にはアクセスしてはいけません。
UdonBehaviourの初期化は、Unityのイベントループを一周した後に行われます。
ですから、VRCInstantiateの後にUdonBehaviourにデータを渡したり
関数を呼び出したりする場合は次のフレーム以降に行う必要があります。
SPRING BOOT 学習記録01

![SPRINGBOOT.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598207/b8cf24e7-6ee0-6e7a-18a6-42cf31fecb99.jpeg)


#Spring
Java開発におけるフレームワーク。
変更に強い。
コードの可読性が高い。
再利用性が高い。

##DI
Dependency Injection
インスタンス管理

##AOP
Aspect Oriented Programing
共通処理のまとめ

##ライブラリ

###DevTools
自動でWEBアプリケーションを再起動

###Lombok
Lombokの使用

###H2
テスト環境DB

###JDBC
データベースアクセス

###Thymeleaf
HTMLテンプレートエンジン

###Web
SpringMVC Spring Bootの使用

#MVCモデル

![MVC.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598207/826c4236-f903-2087-b847-29a8c30243c7.jpeg)

###Controller
リクエストに対してのModelクラスに処理を依頼する。

###Model
DBからのデータ取得と計算。

###Viwe
画面表示。

##HelloWorld

###GETメソッド
サーバから情報を取得してくる時に使用する
他人に見られたくない情報は、GETでは送らない
テキストデータ送信

###SpringSampleApplication.java
Springを実行するプログラム。

###@Controller
コントローラークラス。

###GetMapping
HTTPリクエストのGETメソッドを処理。
メソッド名の最初にgetをつける。
戻り値は拡張子なしのhtmlファイル名を指定。

### html xmlns:th="http://www.thymeleeaf.org"
タイムリーフを使用するために記述。

##内部処理

![内部処理.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598207/73ce274a-0e7d-2dcc-6287-18497ec60e7e.jpeg)

###th:value
画面からコントローラークラスに値を渡すことができる。

###@PostMapping
POSTメソッドが送られてきたときの処理。

###@RequestParam
画面からの入力を受け取ることができるようにする。

###model.addAttribute
画面から受け取った値をModelに登録。
キーと値をセットする。
キー：変数名

##DBから値を取得

![DB接続.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598207/b81b9b30-d66d-b3ab-bd24-218624ab4aaf.jpeg)




###application.properties
環境独自の設定を行うためのファイル。

https://qiita.com/YAKINIKU/items/bba6d8f0cb2a418ea0ea

https://qiita.com/niwasawa/items/024a01c502962eb90b1d

###findOne()
全てのドキュメントにアクセス

###@Repository
リポジトリークラスに付与。

###@Autowired
インスタンスの生成。

###@Data
getter/setterの自動作成。

###domainクラス
リポジトリークラスやサービスクラスとの間で渡すクラス。　（DTO）

###@Servise
サービスクラス。
Failed to enable unit: Refusing to operate on linked unit file mysqld.serviceの対処法

#経緯
mariadbをインストール後、やっぱりmysqlをインストールしたいと思ってインストールした。
その後`systemctl enable mysqld`を入力するも`Failed to enable unit: Refusing to operate on linked unit file mysqld.service`のエラーが発生。

#対処法
mysqlとmariadbどちらもインストールすると競合を起こす。mariadbを停止して無効化する。

```
systemctl stop mariadb
systemctl disable mariadb
```

そうして`systemctl enable mysqld`をすると無事インストールできた。
GitHubで変更されたファイル名一覧を表示するUserScriptを作った

Bitbucketだとコミット画面に変更されたファイル名の一覧が出てくるのですが、この機能が意外に好きです（最近、弊社のリポジトリ管理がBitbucketからGitHubに戻ったので気づきました）。

![スクリーンショット 2020-04-19 20.19.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223255/96789917-5f76-83cf-bbb9-a1bb3539d677.png)

# GitHub Show Filename List

- [yskoht/github-show-filename-list: Show file name list in GitHub](https://github.com/yskoht/github-show-filename-list)

GitHubでも同じようにファイル一覧を表示するUserScriptを作りました。[Tampermonkey](http://www.tampermonkey.net/)でChromeでもFirefoxでも動きます。

![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223255/fb4e778a-dcc0-b5f2-996e-955eadf1e510.png)
Node.js基礎：文字列処理

#はじめに
文字列の処理はもっとも使う処理です。Node.jsの文字列処理をまとめてみます。

#基本：シングル、ダブルクォーテーションで囲んで定義
```sample.js
// 単一行
const str1 = "abc";

// 複数行
const str2 = `あいうえお
かきくけこ
はひふひほ`

//　複数行： ＋で連結
const str3 = "abc" + "\n" + "def";

// シングルクォーテーションで囲んで定義
const str4 = 'あいうえお' + '\n' + 'かきくけこ';

// 変数置換
const tempStr = "abc";
const str = `tempStr=${tempStr}`
```

#文字列処理メソッド
説明ページ：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String

- String.prototype.startsWith()
- String.prototype.endsWith()
- String.prototype.split()
- String.prototype.replace()
- String.prototype.indexOf()
- String.prototype.toLowerCase()
- String.prototype.toUpperCase()
- String.prototype.trim()
- String.prototype.charAt()
- String.fromCharCode()

など。用意されているメソッドがたくさんあります。

#Bufferクラス
Node.jsの中ではBufferを使って文字列処理のメソッドもたくさんあります。
説明ページ：https://nodejs.org/api/buffer.html

例：

```node.js
const buf = Buffer.from('こんにちは！', 'utf8');

console.log(buf.toString('hex'));
// e38193e38293e381abe381a1e381afefbc81
console.log(buf.toString('base64'));
// 44GT44KT44Gr44Gh44Gv77yB
```

#util.format(format[, ...args])
文字列のフォーマットもよく使う処理です。

例：

```node.js
const util = require("util")

const f1 = util.format('%s ,%d, %i, %f, %j, %o, %O', 'foo', -1234, 01, 3.14, {a : "a", "b" : "b"}, {a: 10}, [1 ,2 ,3]);
console.log(f1)
//foo ,-1234, 1, 3.14, {"a":"a","b":"b"}, { a: 10 }, [ 1, 2, 3 ]
```

説明ページ：https://nodejs.org/api/util.html#util_util_format_format_args

#util.TextEncoderクラス
文字列をUint8Array 配列に変換

```node.js
const {TextEncoder} = require("util")

const encoder = new TextEncoder();
const uint8array = encoder.encode('こんにちは！\n Hello World!'); // UTF-8のみサポート

console.log(uint8array);

/*Uint8Array [
  116,
  104,
  105,
  115,
  32,
  105,
  115,
  32,
  115,
  111,
  109,
  101,
  32,
  100,
  97,
  116,
  97 ]*/
```

#util.TextDecoderクラス
Uint8Array配列を文字列に変換。

例：

```node.js
const {TextEncoder, TextDecoder} = require("util")

const encoder = new TextEncoder();
const uint8array = encoder.encode('こんにちは！\n Hello World!');

const originStr = new TextDecoder().decode(uint8array); //UTF-8
console.log(originStr)
/*
こんにちは！
 Hello World!
*/

```

#URLSearchParamsクラス
URLのパラメータ処理も文字列関連ですが、URLSearchParamsを使うと処理しやすいです。
説明ページ：https://nodejs.org/api/url.html#url_class_urlsearchparams

例：

```node.js
// 文字列からURLSearchParamsを生成
const params = new URLSearchParams('a=bar&b=baz');

// 配列から
const params2 = new URLSearchParams([
  ['user', 'abc'],
  ['query', 'second']
]);

// MapからURLSearchParamsを生成
const map = new Map();
map.set('user', 'abc');
map.set('query', 'xyz');
const params3 = new URLSearchParams(map);

// パラメータすべて出力
for (const name of params.keys()) {
  console.log(name);
}

// 項目名で取得
const a= params.get('a');

// 項目を追加
params.append('newParam', 'new');

// 項目値を置換
params.set('b', 'bbbbb');

// 項目は存在するかをチェック
console.log(params.has('b'));

// 項目を削除
params.delete('a');

// 文字列で出力
console.log(params.toString());
/*
b=bbbbb&newParam=new
*/

```

以上
第1回Flutterもくもく会@Zoom 実施レポート

# はじめに 

2020年4月19日にZoomにて[Flutterもくもく会](https://flutter-okurayama.connpass.com/event/172739/)を実施したので、
そのレポートになります。個人的所感メインです。
何かご意見などありましたらよろしくお願いします。


# トピック

## Flutterの導入
Flutterをこの日始める人もいたので、Flutterを触るメリットなどを発表しました。
[<img width="1011" alt="スクリーンショット 2020-04-19 19.40.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152938/6a21b3ed-9649-fa7e-5b66-ed101671bf99.png">
](https://speakerdeck.com/nagano/about-flutter)

## 静的解析について
できるだけ早めに静的解析を入れた方が高パフォーマンスのコードにつながるので、
導入は早めするのをおすすめしました。

まずは下記の公式のリポジトリの設定ファイルベースから始めるのが個人的に良いかなとは思っていますが、どうなんでしょう？
https://github.com/flutter/flutter/blob/master/analysis_options.yaml

参考記事: https://medium.com/flutter-jp/analysis-b8dbb19d3978

## 勉強方法について
各自学習方法が様々だったので意見交換も行いました。

*  コードラボでトレーニング
https://flutter.dev/docs/codelabs

*  Flutter galallyでウィジェットと仲良くなる
https://github.com/flutter/gallery

# おわりに次回開催と宣伝
こちらで定期的にもくもく会を隔週の頻度で実施予定です。
LTなど発表したい方いましたら [@glassmonekey](https://twitter.com/glassmonekey)にご連絡いただけますと嬉しいです。

下記のコンパスも良ければ登録お願いします。これを機に一緒に始めましょう
https://flutter-okurayama.connpass.com/


# 感想というかメモ
基本メッセージはチャットメインで行うことでログを残すことができて、コメントの抵抗感もすくないので次回もチャットと口頭の併用で行う予定です。
Pythonで毎日AtCoder #41

### はじめに
[前回](https://qiita.com/taxfree_python/items/63720b876cc8dc57cdcd)
今日はABCがあるので1問だけです。

### #41
[問題](https://atcoder.jp/contests/abc157/tasks/abc157_c)

**考えたこと**
長く苦戦していた問題です。今回解いてみるとなんで苦戦していたのか分かりませんでした。解の範囲が小さいのでforで全部調べます。flagを置いてM個の条件を満しているか確認しています。

```python
n, m = map(int,input().split())
sc = [list(map(int,input().split())) for _ in range(m)]

for i in range(10**n):
    i = str(i)
    flag = True
    if len(i) == n:
        for j in range(m):
            if i[sc[j][0]-1] != str(sc[j][1]):
                flag = False
        if flag:
            print(i)
            quit()

print(-1)
```

### まとめ
今日のABCがんばります。はやく茶色になりたい。ではまた。