OmniAICreator/Qiita-1.07M huggingface dataset:
git clone 無限に時間かかる

```bash
git clone https://account_name:token@github.com/account/repository.git
```
とすると、できた。

問題が起きているときには、通常時にはアカウント名とパスワードを聞いてくる表示が出るがそれも出てこない。
以上から、認証のところでうまくいっていないことは分かった。
ひとまずこれで様子見

# 参考
[githubからアクセストークンでcloneする](https://qiita.com/reflet/items/b7ed9979828819b2b42c)
[Rails] Formブジェクトパターン2/2

# はじめに
プログラミング初心者が、学習を進める過程で学んだことを、整理してアウトプットをする目的で投稿しています。フォームオブジェクトの投稿2回中2回目になります。

# これまでの実装手順の振り返り（概要）
1.新たにモデル機能に近いクラスを持つモデルファイルを作成する。
*クラスの定義

2.作成したモデルファイルにバリデーション記述
```include ActiveModel::Model
```

3.作成したモデルファイルにattr_accessorを記述
```attr_accessor :カラム名,カラム名,・・（扱いたいカラム名記載）
```

4.カラム名に対してバリデーションを記述
```validates :price, presence: true
```
*このモデルファイルはアソシエーションが効かないため、必要があれば外部キーなどで取得しようとしていた、カラムのバリデーションを追記する。

# 実装手順の続き
5.データテーブルに保存する。
フォームオブジェクトに、フォームから送られてきた情報をテーブルに保存する処理を、作成したモデルに記述する。
```def save
Aモデル名（変数）　= Aモデル名.create(price: price)
このようにAテーブルに必要な情報を記述する
Bモデル名.create(postal_code: postal_code, Aモデル名_id: 変数.id)
end
```
6.フォームオブジェクトを記述するビューファルの、コントローラーに記述
form_with model:@〇〇 としてインスタンス変数を渡したいため、空インスタンスを生成する。
エラー表示でもインスタンス変数を使用する。対応する各アクションに空のインスタンス生成と保存処理を記述する。
```def new
 　@作成したクラス名　＝　作成したクラス名.new
end
def create
　@作成したクラス名　＝　作成したクラス名.new(ストロングパラメータ)
　if 　@作成したクラス名.valid?  
　　　※saveメソッドはバリデーション機能がないためvalid?を使用
　　　@作成したクラス名.save
  　　　 redirect_to root_path
 　else
  　　render :new
 　end
end
```

7.ビューファイルに記述してある、fomm_withにmodelオプションを記述
```<%= form_with model:@インスタンス変数　,url:createアクションへのパス,local:true do |f| %>
```
*エラー表示をしたい場合は、model.errors.full_messagesをeach文などで、一覧表示する（部分テンプレートにもインスタンス変数を渡すことで可能、if文とany?メソッドでエラーがある時だけ表示する）

# 終わりに
これで各モデルへの保存から、保存が失敗した時のrenderとエラー文生成と表示までが出来ます。
フォローボタンについて考える

##はじめに
　ツイッターやフェイスブックなどで何気なく押しているフォローボタン。たかがフォローボタンと言えど、考えてみると奥深い。今回は、これについて考えてみる。

## テーブル設計
  フォローボタンのテーブル設計として、例えば下記の2つが考えられる。

#### table_user_follow その１

|  カラム           |  説明  |
| ----             | ---- |
|  user_id         |  ユーザid  |
|  user_id_follow  |  フォローしているユーザid  |
|  datetime_follow |  フォロー日時  |

説明
最初は空テーブルで、フォローするごとにフォローしたユーザを追加していく。

#### table_user_follow その２

|  カラム           |  説明  |
| ----             | ---- |
|  user_id         |  ユーザid  |
|  user_id_follow  |  フォローしているユーザid  |
|  datetime_follow |  フォロー日時  |
|  flag_follow     |  フォローしてるか(true/false) |

説明
最初に全ユーザを**flag_follow = false**として登録しておき、フォローした場合、**flag_follow = true**とする。

#### 結論
上記を比較した場合、結論として後者はレコード数が**ユーザ数×ユーザ数**分必要になり、レコード数が膨大になるので、前者の方が適当だろう。と言う訳で、テーブルは前者を使用する。


## ロジック

テーブル設計が決まったので、次にフォローボタンを押した時の処理について考える。
フォローボタンを押した時の処理として、テーブルに**フォローユーザを登録**すればそれで良いのかと言うと、そう言う訳にもいかない様だ。
では、その他にどう言った処理が必要なのだろうか？


## ブラウザの2重起動問題

WEBアプリを作成する場合は、**ブラウザの2重起動問題**と言うものを考える必要がある（別に2重でなくても、5重でも10重でも良いのだが）。
つまり、同じ画面を複数のタブもしくはブラウザ（chrome + edgeなど）で起動しておいて、同じユーザをフォローした場合、上記の様な**フォローユーザを登録**のみの処理だと、同じユーザのレコードがテーブルに複数登録されてしまう。
なので、例えばタブを数百個開いておいて、同じユーザをフォローするといきなりフォロワーが数百人になるというチートが使えてしまうことになってしまう。
これは、テーブル設計としては見直す必要がある。


## ロジック（修正版）

では、**フォロー処理**についてどの様な処理が必要か考えてみる。
結論としては、下記の様な処理が必要かもしれない。
（私はSNS会社に勤めたことは無いので、あくまで推論である。）

**１．自分のアカウントが存在するか**
**２．フォローするアカウントが存在するか**
**３．既にフォローしていないか**
**４．（フォローしていない場合）フォロー処理**
**５．総フォロー数の更新**
**６．総フォロワー数の更新**

１～２については、他のブラウザで既にアカウントを削除していた場合、フォローすると矛盾が生じるので、アカウントの存在を確認する必要がある。
３については、上述の様に既にフォローしている場合は、レコードを登録する必要はない。
１～３をクリアした場合のみ、４でフォロー処理を行う。
５～６については、別のテーブルでフォロー数、フォロワー数を管理している場合、そのレコードを更新する。

ざっと考えただけで、これだけの処理が必要になる。
単純に登録すれば良いという訳でもないことが、お分かり頂けたと思う。


## 結論

普段、何気なく使っているフォローボタン。その裏にもそれなりに考えられたロジックが存在する。案外、世の中なんてそんなもので、自分の周りにも、（気づかないだけで）他の人が試行錯誤を重ねた商品が多く存在するのかもしれない。そう言った商品やロジックに思いを巡らせてみるのも面白そうだし、新たな発見に繋がりそうでもある。
マージしていないのにトピックブランチの追加差分が反映される件

#はじめに
恥ずかしながら下記の挙動について、全く理解が届いていませんでした。

#発端
`メインブランチ`から派生して作った`トピックブランチ`の追加差分が、`マージ`していないのに`メインブランチ`に反映されていた。

`master`ブランチ　＝＞　新規プロジェクトをadd,commit
`topic`ブランチを作成　＝＞　Gemfileに1行追加

```gemgile
 #topicブランチの追加差分
  gem "rspec", ">= 3.0.0"
```
`master`ブランチに切り替え。
`gemfile`を覗いてみると`topic`ブランチで記述したコードが`master`にある。

ここでマージしていないのに「なぜ？」と思った。

#結論
新規作成したトピックブランチで`add, commit`していないのが原因。

実際にはマージされていたのではなく、トピックブランチが派生元とコミット履歴が同一であったため、Gitの仕様上何も問題が起きていないので差分を残したままメインブランチに切り替えられた、というのが今回の現象。

通常、Gitの仕様では「差分を残して派生元に移動はできない」ようになっている。この場合、差分の情報をGitが正しい情報か判断できないため、エラーを報告するようになっている。つまり、ブランチを切り替えることができない可能性がある。

正しい情報かの判断は、コミットを元に判断を下すためブランチを新規生成してから一度も`add, commit`していない状態では、派生元の同一のコミット履歴を参照しているためブランチを切り替えることができてしまう。

ここでブランチを切り替えられた時に、コミットしていない差分の情報は問題が報告されないために、ブランチを切り替えても同一の差分情報を残したまま表示されしまっていた、ということみたいだった。

一度も`add, commit`していない状態から`git diff`で確認してみれば、差分が表示されるようにマージされているわけではない、ということ。
【UiPath】謎のハッカー風操作をしてみる＃1（電卓操作）

# はじめに

この投稿は、RPAツール「UiPath」での フロー実装例 の記事です。

RPAツールUiPathのコミュニティ「UiPath Friends」が企画する「**UiPathブログ発信チャレンジ2021サマー**」の 2日目の投稿になります。

企画の内容は [**こちら**](https://note.com/shumpei_w/n/n651cbdbec4e8) 。カレンダーのURLは [**こちら**](http://u0u1.net/sUwZ) です。

https://twitter.com/ShumpeiWatanabe/status/1405168150736359427?s=20


# 謎のハッカー風操作

よく映画で見る「ハッカーがやってそうな操作」をUiPathでしてみます。
イメージは以下のような感じです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/EeYmih4uDho?start=10" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

それっぽく見えればいいので、操作に意味は求めません。
誰でも手軽にできる操作で実現を目指します。

# 謎の電卓操作

手軽で 操作が早くて 見た目のインパクト があるのが「電卓操作」です。
カタカタ数字を叩いて「なにかしている」ように見せます。

ForEachなどの「繰り返しループ系アクティビティ」を使用してしまうと、ループのたびに0.5秒位ロスするので早く見えません。なので「文字を入力」アクティビティを使用して、「左から右に文字を入力させる」方式にすれば、ロスはなくなり早く見えるのでこちらを使用します。
入力後にフォームで「AccessDenied」アラートを表示すれば完成です。

作成したフローはこちらです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/189bc5cc-caba-6426-b2c7-6a1a908b7f27.png)

実際に動かすと、以下のようになります。

https://twitter.com/miya_gis/status/1409459799536783361?s=20

# 終わりに

いかがでしたでしょうか？
あまり役に立ちそうにないですが、UiPathではこんな 遊び方／見せ方もできます。

この記事が参考（？）になったら、LGTM をお願いします。

最後までご覧いただき、ありがとうございました。
カンマ区切りのデータを更新するSQL

PostgreSQLでCSV形式の文字列の各値を更新するSQLです。

例えば、以下のようなデータがあったとして、

| id | csv |
|:-----------|------------:|
| 1       | 1,11,110        | 
| 2       | 11,111        | 
csvカラム内の「11」を「22」に変えて

| id | csv |
|:-----------|------------:|
| 1       | 1,22,110        | 
| 2       | 22,111        | 

のようなデータに更新するSQLです。
（「110」や「111」は更新されていないのがポイントです）

```sql
with t1 as (
	select
		id,
		array_to_string(array_agg(
			case sp.c1
			    when '11' then '22'
			    else sp.c1
			end
		), ',') as c2
	from (
		select id, regexp_split_to_table(csv, ',') as c1 from sample where csv is not null and csv != ''
	) 
	as sp
	group by
	  id
)
update
	sample
set
	csv = t1.c2
from
	t1
where 
	sample.id = t1.id;
```

①カンマ区切りデータをregexp_split_to_tableを使って分割し、別レコードで取得
②caseを使用し、値を変換
③idでグループ化し、再度カンマ区切りで結合し、update

### 補足
* そもそもこのようなテーブル設計は採用すべきではなく、可変データは配列型にしたり別テーブルで管理した方が良いと思います
* パフォーマンスは考慮していないのと、CSVデータの並び順も考慮していないので、更新すると並び順変わるかもしれないです

### 参考
[PostgresSQLでカンマ区切りのデータをwhere で絞り込みたい](https://b-estack.com/2018/12/08/postgressql_camma_data/)
[複数レコードをカンマ区切りの1レコードにまとめる方法](https://kin29.info/%E8%A4%87%E6%95%B0%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E3%82%AB%E3%83%B3%E3%83%9E%E5%8C%BA%E5%88%87%E3%82%8A%E3%81%A71%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7%E3%81%BE%E3%81%A8%E3%82%81/)
[PostgreSQLのUPDATE文でWITH句とFROM句が使えることにびっくりした。](https://tihiro.hatenablog.com/entry/2017/10/04/030319)
【UiPath】NoteのAPIで投稿を一覧取得する

# はじめに

この投稿は、RPAツール「UiPath」での API呼び出し例 の記事です。


RPAツールUiPathのコミュニティ「UiPath Friends」が企画する「**UiPathブログ発信チャレンジ2021サマー**」の 2日目の投稿になります。

企画の内容は [**こちら**](https://note.com/shumpei_w/n/n651cbdbec4e8) 。カレンダーのURLは [**こちら**](http://u0u1.net/sUwZ) です。

https://twitter.com/ShumpeiWatanabe/status/1405168150736359427?s=20

# NoteのAPIを叩いてみる

前回のQiitaに続き、今回はNoteのAPIを使用して投稿データを取得します。

https://qiita.com/miya_gis/items/742874b43699266f2d6e

Noteは「非公式」ですがAPIがあり、投稿やコメントなどの情報が取得できます。

このAPIは、Note運営がサービスを提供するために使用しているツールであるため、予告なく仕様が変わる可能性があります。またスタンスとしては「**Noteをより知り楽しむために拝借する**」もので、**サーバーに負荷をかけない**ように、**[利用規約](https://note.com/terms)に違反しない**ように気を付けて、ありがたく使用しましょう。


前回の投稿でQiitaの投稿データをタグ指定して取得しましたが、今回も同様に、RPA製品のタグが付いたデータを取得してみます。


# 取得したいタグを指定する

記事を取得したいタグを指定して、APIを呼び出すので事前に収集しておきます。今回は以下のタグを取得します。

https://note.com/hashtag/UiPath

https://note.com/hashtag/WinActor

https://note.com/hashtag/BluePrism

https://note.com/hashtag/BizRobo

https://note.com/hashtag/AutomationAnywhere

https://note.com/hashtag/PowerAutomateDesktop

# Studioでコードを書く

タグを指定し、APIを繰り返し呼び出して、結果をデータテーブルに格納し、最後にファイルに出力します。使用するAPIのエンドポイントは「"https://note.com/api/v1/hashtag/XXXX 」です。

APIレスポンスはJsonで返却されます。最終ページかどうかの判断用項目「last_page」がありますが、上手く機能していないようなので「結果の中に投稿データが有るか」でも判断しています。

イメージは以下になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/f77255ca-5ee4-b1b6-c8e5-9ba376e37449.png)

# 取得結果

処理の実行が終わると、取得した記事情報が以下のようにExcelに出力されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/596b3675-3b2d-7940-2cfe-9ce549fac6d6.png)


# 終わりに

いかがでしたでしょうか？
次回は取得したデータを元に、簡単な傾向分析をしたいと思います。

最後までご覧いただき、ありがとうございました。
Cython 型指定一覧

# はじめに

Cython という Python に型指定をするだけで処理によっては高速にすることができるライブラリを導入したのですが、型指定の種類がまとまった記事がなかったため、まとめることにしました。


# Cython概要

> Cython（サイソン）は、C言語によるPythonの拡張モジュールの作成の労力を軽減することを目的として開発されたプログラミング言語である。
> その言語仕様は__ほとんどPythonのもの__と同じ (上位互換) だが、Cの関数を直接呼び出したり、C言語の変数の型やクラスを宣言できるなどの拡張が行われている。
> Cythonの処理系ではソースファイルをCのコードに変換し、コンパイルすればPythonの拡張モジュールになるようにして出力する。
> (参考) https://ja.wikipedia.org/wiki/Cython

詳細な使い方については、すでに記事が上がっていますのでそちらを参考にしてください。

#### 参考リンク

* 深入りしないCython入門
    * https://qiita.com/pashango2/items/45cb85390193d97523ca
* cython入門
    * https://qiita.com/en3/items/1f1a609c4d7c8f3066a7

# 型一覧 （基本）

基本的な型についてはこちらにまとめました。


```cython
cdef: 
    # string
    str string_test

    # integer
    int integer_test

    # float
    float float_test

    # boolean
    bint boolean_test

    # list (array)
    list list_test

    # tuple (array)
    tuple tuple_test

    # dict (hash)
    dict dict_test
```


# OpenCV frame 型指定

OpenCVの使い方については他に記事が上がっていますので、そちらをご参考ください。

```cnp.ndarray[unsigned char, ndim=3]```こちらの型で型指定をすることができます。

```cython
import cv2
cimport numpy as cnp  # cython用のnumpyをインポートする

cdef:
    # frame 型指定
    cnp.ndarray[unsigned char, ndim=3] frame

cam = cv2.VideoCapture(0)
ret, frame = cam.read()
```

# まとめ
Cython化するだけで高速化される可能性が高いので、可読性を下げないように積極的に使っていきたいと思っています。
他にも役立ちそうな型指定を見つけたら追記していこうと思います。

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
CircleCiでFirebaseAppDistributionにデプロイする

これまでCircleCiからDeployGateにアプリを配信していたが諸般の事情によりFirebaseAppDistributionに配信先を変更することになったので、その際に行ったFirebaseAppDistributionにデプロイするまでの手順をメモ

## 前提
アプリとFirebaseとの連携は取れているものとする

## [設定](https://firebase.google.com/docs/app-distribution/android/distribute-gradle?hl=ja)
product / build.gradle

```
dependencies {
    classpath 'com.google.firebase:firebase-appdistribution-gradle:2.0.1'
}
```

app / build.gradle

```
apply plugin: 'com.google.firebase.appdistribution'

***** 中略 *****

android {
    buildTypes {
        hogehoge {
            // firebaseAppDistributionの宣言は必須
            firebaseAppDistribution {
                // 配信ビルドの説明
                releaseNotes="Release notes for full version"
                // 配信対象の指定
                testers="hogehogehoge@hugahuga.com" // メールアドレスを指定する場合
                groups="hogehoge" // FirebaseAppDistributionで事前に登録していた配信グループを利用する場合
            }
    }
}
```

## [認証](https://firebase.google.com/docs/app-distribution/android/distribute-gradle?hl=ja#step_2_authenticate_with_firebase)
今回は認証用のトークンを発行して配信時に設定する方向で対応しました。
一般公開する場合は認証トークンをスクリプトにベタ書きできないと思うので、他の方法を取るのが良さそう

### アプリのrootディレクトリで以下のコマンドを実行

```
./gradlew appDistributionLogin
```
認証用URLが生成されるので、ログインしてください。
成功すると認証トークンが返却されます。

## CircleCi環境変数への設定
ProjectSetting -> EnvironmentVariablesで生成されたFIREBASE_TOKENを設定する


## CircleCi用スクリプト

```
      - run: # デプロイ
          name: Upload FirebaseAppDistribution
          command: ./gradlew assembleBUILD-VARIANT appDistributionUploadBUILD-VARIANT
          # productFlavors = hoge, buildType = huga であれば
          # command: ./gradlew assembleHogeHuga appDistributionUploadHogeHuga
```
デプロイ前に環境変数に認証トークンを設定しているので、デプロイ処理時に自動的に参照、BUILD-VARIANTに該当するFirebaseAppDistrobutonのコンソールにデプロイされるはずです。
[Ruby on Rails]  誤ってマイグレーションファイルをの削除してしまったときの対応

# 悩み事
```
% rails db:migrate:status
//上記のコマンドを実行しマイグレーションファイルの状態を確認
 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20210615121248  Devise create users
   up     20210616102139  ********** NO FILE **********
  down    20210616104745  Create likes
```
NO FILE が邪魔して%rails db:migrateが実行できない
※誤ってマイグレーションファイルを消してしまったのが原因。

# ファイルに借りの名前をつける
```
% touch db/migrate/20210616102139_hoge.rb
```
NO FILEのMigrate IDを指定して仮のファイルを作成する

```20210616102139_hoge.rb
class Hoge < ActiveRecord::Migration[6.0]
  def change
  end
end
```
マイグレーションファイルと誤解させる為の記載をする

#　コマンドを実行し問題ファイルをupからdownにさせる
```
%rails db:migrate
//上記のコマンドでStatsがdownになった方もおられる様ですが、理想通り行かない場合は↓
 % rails db:reset
```
おそらく現段階でStatsをdownさせれていることでしょう。
# 最終工程、仮ファイルの消去
```
 % rm -rf db/migrate/20210616102139_hoge.rb
 % rails db:migrate:status        

 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20210615121248  Devise create users
  down    20210616104745  Create likes
                
```
以上が対処法となります。
% rails db:migrate　実行で通常通りの作業風景が見えてくるはずです。
今回の処置をする際様々な場所でエラーが多く発生し焦りましたが、逆にrailsの勉強になったと考え前向きに進んで行こうと思えてきました！！
【Android, JS】FCM, payload || notification 超個人的メモ


```
const payload = {
        notification: {
          title: 'たいとる',
          body: 'めっせーじ'
        }
    };
```
onMessageReceived()で特に何もしなくても通知が表示されたケース
title, bodyなどのキーはおそらく変えられない


```
const payload = {
        data: {
          message: message,
          date: dateString
        }
    };
```
受信時の実装をしないと通知が出ないケース
dataの中のキーは自由らしい
Date型のモノは送信時にエラーになった
String限定で送れる模様

```
const response = await admin.messaging().sendToDevice(token, payload);
```
で送信
responseには何も入ってこないので不要

```
public class MyMessagingService extends FirebaseMessagingService {
    // onNewToken()必須らしい

    @Override
        public void onMessageReceived(@NonNull RemoteMessage remoteMessage) {
            Log.d("ろぐ", "payloadのdata: " + remoteMessage.getData());
            Log.d("ろぐ", "notificationのbody: " + remoteMessage.getNotification().getBody());
        }
}
```

```
<service
    android:name=".MyMessagingService"
    android:exported="false">
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
</service>
```

```
buildscript {

  repositories {
    google()
  }

  dependencies {
    classpath 'com.google.gms:google-services:4.3.8'
  }
}

allprojects {
  repositories {
    google()  // Google's Maven repository
  }
}
```

```
apply plugin: 'com.google.gms.google-services'
.
.
.
dependencies {
    implementation platform('com.google.firebase:firebase-bom:28.1.0')
    implementation 'com.google.firebase:firebase-messaging'
    implementation 'com.google.firebase:firebase-analytics'
}
```
unity5.2の作法 その18 チュートリアル

#概要

unity5.2の作法、調べてみた。
チュートリアルやってみた。

#参考にしたページ

https://qiita.com/2dgames_jp/items/77d6a09e65b37ea09f58


#makefile

- テンプレートは「2D」を選択
- プロジェクト名は「TestFlappyBird」
- 作成ボタンをクリック
- player.pngを Projectビューの Assets フォルダにドラッグ＆ドロップ
- Inspectorビューから Sprite Mode を Multiple に変更して、 Sprite Editor ボタンをクリック
- Slice のドロップダウンをクリックして、設定はそのままで Slice ボタンをクリック
- Apply を押して適用
- player_0 を Scene ビューにドラッグ＆ドロップ
- Inspectorビューから`Player' という名称に変更
- Inspectorビューから「Add Component」をクリックして、 Rigidbody 2D を選ぶと登録
- Inspectorビューから「Add Component」ボタンをクリック
- scriptで検索して「New Script」を選ぶ
- スクリプト名を「Player」にして「Create And Add」をクリック
- Player スクリプトをダブルクリックしてスクリプトを開き、コードを入力
- ダウンロードした素材フォルダの「5box.png」を Projectビューの Assetsフォルダにドラッグ＆ドロップ
- 作成した 5box スプライトを Hierarchyビューにドラッグ＆ドロップ
- 作成した「5box」ゲームオブジェクトを Inspectorビューから「Block」にリネーム
- Blockゲームオブジェクトを選択して、Inspectorビューの「Add Component」から Rigidbody 2Dを追加
- 続けて、Scriptコンポーネントを追加
- スクリプトの名前は「Block」とし、コード記述
- まずは Blockオブジェクトを選び、Add Component > Circle Collider 2D を追加
- そして Inspectorビュー から、Circle Collider 2Dコンポーネントの Is Trigger にチェックを入れる
- HierarchyビューにあるBlockオブジェクトを、Projectビューにドラッグ＆ドロップ
- Hierarchyビューにある Blockオブジェクトは不要なので消す
- 素材画像の「xbox.png」を Projectビューにドラッグ＆ドロップ
- 追加された xbox スプライトを Hierarchyビューにドラッグ＆ドロップ
- そして xboxオブジェクトを「BlockMgr」にリネーム
- BlockMgrオブジェクトを選択したまま、Inspectorビューから Add Component > New Script > Name に "BlockMgr" と入力 > Create and Add を選び BlockMgrスクリプトを追加
- BlockMgrスクリプトにコードを記述
- Hierarchyビューから「BlockMgr」オブジェクトを選択
- Projectビューから「Blockプレハブ」を Inspectorビューの BlockMgr(Script) の Block にドラッグ＆ドロップ
- 素材フォルダから「nasu.png」を Projectビューにドラッグ＆ドロップ
- 続けて、作成した「nasu」スプライトを、Hierarchyビューにドラッグ＆ドロップ
- nasu」ゲームオブジェクトが作られるので、名前を「GameMgr」に変更
- GameMgrオブジェクトを選択し、Inspectorビューから、Add Component > New Script を選び、スクリプト名は「GameMgr」と
- スクリプトが追加できたら、GameMgr.cs を開いてコード記述。
- 三角で実行

#嵌まったところ

SceneManager.LoadSceneが、無い。

Application.LoadLevelで、代替。


以上。
[rails]個別ゲームスコアランキングを表示させる方法

# 実装内容
今回は個別で優秀なスコアを表彰するページの作成です
- 毎回ゲームをして点数のつくゲームを想定しています。
- 同点でも同順位として紹介されるしようとなっています。

# テーブル内容
game_dateテーブル

|id|user_name|score|create_at|
|:---|:---:|--:|--:|
|1| たろう| 150|2021-02-12|
|2|ひろゆき|3|2021-02-13|
|3|ひろゆき|24|2021-02-14|
|4|はなこ|220|2021-02-15|
以上の様な体系でデータが格納されていることを想定しています。


```ruby:rankings.controller
class RankingsController < ApplicationController
  def index
    @game_date = game_date.includes(:user).order(score: :desc)
    #scoreが大きい順にgame_dateを取り出せるようにしておく
  end
end
```

```ruby:index.html.erb
  <% ranking = [] %> #ranking.length+1を順位として使用する
  <% @game_data.each do |game| %>
        <div class="ribbon">
          <h2><%= ranking.length + 1%>位：： <%= game.score %>点</h2>
        </div>
    <% ranking << turtle.score %>
  <% end %>

```
今回ranking =[]に各スコアを収納しその個数＋1でランキングを計算する方法を紹介しました。
はもう少しかんたんにスコアランキングが作れるお知恵をお持ちの方がおられればアドバイスいただけると嬉しいです
【Android】JobScheduler, JobInfo 超個人的メモ

とりあえずこれで
JobServiceのonStartJob()が即時呼ばれた
Android7以前とかだと
setBackoffCriteria()と
setRequiredNetworkType()
がないと動かなかった

```
JobInfo.Builder builder = new JobInfo.Builder(1, new ComponentName(getApplicationContext(), MyJobService.class));
builder.setBackoffCriteria(10000, JobInfo.BACKOFF_POLICY_LINEAR);
builder.setExtras(new PersistableBundle());
builder.setPersisted(false);
builder.setRequiredNetworkType(JobInfo.NETWORK_TYPE_NONE);
JobScheduler scheduler = (JobScheduler) getSystemService(Context.JOB_SCHEDULER_SERVICE);
scheduler.schedule(builder.build());
```

```
<service
    android:name=".MyJobService"
    android:permission="android.permission.BIND_JOB_SERVICE">
</service>
```
Windows 10にPostgreSQL 13.3-2 をインストールできない There has been an error. 

# 概要
Windows 10にPostgreSQL 13.3-2 をインストールしようとしてハマったお話です。普通にインストーラーをクリックしただけで「There has been an error. Error running C:\WINDOWS\System32\icacls "C:\Users\...」のようなダイアログが出てインストールが中断して進めなくなってしまいました。管理者として実行してもかわりません。

# 再現手順
1. AzureADの組織アカウントでWindows 10にログイン。
1. PostgreSQL 13.3-2をダウンロード。
1. postgresql-13.3-2-windows-x64.exeをダブルクリック。
1. 「There has been an error. Error running C:\WINDOWS\System32\icacls "C:\Users\...」のようなダイアログが出てインストール中断。文字化けしていてよくわかりません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78230/40430c1e-c5d6-38ba-0625-021f2a0ed7a9.png)

# 原因
/grantとか出ているので、AzureADのユーザのアクセス権が原因なのか、日本語名のユーザ名が原因なのか。詳しい人おしえてください。

# 回避方法（自己流）
英語名のローカルユーザを作成して管理者権限を与え、そのユーザでインストーラーを実行します。ローカルユーザを作ってログインするのは、けっこう難しい（マイクロソフトさんはローカルユーザを作らせたくない？）ので、その手順を載せておきます。

# 手順
1. コントロールパネルを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78230/860b01a5-c6d0-426f-f9de-88b1fc8354b1.png)

1. 他のユーザをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78230/52996ee2-60d8-8baf-39f1-6f1440b52b9c.png)

1. その他のユーザーをこの PC に追加 をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78230/3497cb9b-1442-dda3-fda1-48c673f737ed.png)

1. このユーザのサインイン情報がありません をクリックします。ここでマイクロソフトアカウントを作らせにきますが、その手にはのりません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78230/4e75537e-22f3-32d8-30e0-2cf6218c7b78.png)

1. Microsoft アカウントを持たないユーザを追加する をクリックします。ダメ押しがきますが、固い意志でふりきります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78230/6eac9e75-14ca-6a9d-7ada-0e4bb5f69a9e.png)

1. ユーザ名 に 英語の名前を指定します。あと、個人的なことを色々きかれるので、あとで困らない程度に答えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78230/daf3ac7c-d467-1ae4-2845-a27bf4b770a8.png)

1. ユーザができたら、そのユーザをクリックして アカウントの種類の変更 をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78230/cb76c353-78e9-e0ea-a0d2-f7466d9080ee.png)

1. アカウントの種類を 管理者 に変更して OK をクリックします。管理者にしないとインストールできないとおもいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78230/11952213-e24a-989e-e5bd-2b036c9985fc.png)

1. Windows からサインアウトします。
1. 他のユーザをクリックします。
1. ユーザ名とパスワードを入れてログインします。ローカルユーザでログインする際のユーザ名は、.\tom のように、ユーザ名の先頭に .\ をつける必要があります。
1. ローカルユーザでログインできたらインストール再開です。
1. postgresql-13.3-2-windows-x64.exeをダブルクリックします。
1. 無事にインストーラーが起動しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78230/3624eddd-a0c7-a6a8-1dcc-9b3f258f6842.png)
【Rails】ページネーション機能の実装（kaminari）

# 目的
Railsで作成したアプリにページネーション機能を実装する。

# 開発環境
macOS: *Big Sur*
Rubyバージョン: *2.6.5*
Railsバージョン: *6.0.0*

# 前提

- `アプリ`が作成されている。
[【Rails】簡単な投稿アプリの作成](https://qiita.com/oak1331/items/18a4f3a3386aab0fa354)
- `bootstrap`が導入されている。[【Rails】Bootstrap5の導入](https://qiita.com/oak1331/items/3b4ebf9b076246c103f4)
- `Font Awesome`が導入されている。[【Rails】FontAwesomeの導入](https://qiita.com/oak1331/items/f8caf42566f938f28abe)
- アプリが日本語化されている。[【Rails】Railsの日本語化](https://qiita.com/oak1331/items/563e6ae4786ef61f2687)

# 手順

1. [はじめに](#はじめに)
1. [kaminariのインストール](#kaminariのインストール)
1. [ページネーションの定義](#ページネーションの定義)
1. [ページネーションの表示](#ページネーションの表示)
1. [表示数の変更](#表示数の変更)
1. [bootstrapでのデザイン変更](#bootstrapでのデザイン変更)
1. [ラベルのアイコン化](#ラベルのアイコン化)

# はじめに

今回はページネーション機能を実装していきます。
`ページネーション`とは、長くなってしまった文章を複数のページに分割して、情報を読み取りやすくするナビゲーションのことを指します。

# kaminariのインストール

それでは早速始めていきます!

まずは`kaminari`をインストールします。

```ruby:Gemfile
gem 'kaminari'
```

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

これでインストールできました!

# ページネーションの定義

次はページネーションの定義です。
`.page(params[:page])`を追記します。

```ruby:app/controllers/posts_controller.rb
def index
  @posts = Post.all.page(params[:page])
end
```

# ページネーションの表示

続いて、ページネーションを表示させたいところに`<%= paginate @posts %>`を追加します。

```html:app/views/posts/index.html.erb
<h1>投稿一覧</h1>

<ul>
  <% @posts.each do |post| %>
    <li><%= post.content %></li>
  <% end %>
</ul>

<%= paginate @posts %>
```

以上で実装できました!

# 表示数の変更

1ページに表示する数を指定したい場合は下記のように記述します。

```ruby:app/controllers/posts_controller.rb
def index
  @posts = Post.all.page(params[:page]).per(10)
end
```

# bootstrapでのデザイン変更

より見やすいデザインにするため、`bootstrap`を適用させます。
まずは`kaminari`に`bootstrap`を適用させて、デザインを変更します。

```
$ rails g kaminari:views bootstrap5
```

このコマンドにより`app/viewsにkaminariフォルダ`が自動生成され、ページネーションに`bootstrap`デザインが適用されます。

# ラベルのアイコン化

さらにラベルをアイコンのみにすることで、よりシンプルなページネーションを作ることができます。
今回は、`Font Awesome`を使用します！

`config/locales/ja.yml`を編集して、使用したいアイコンを記述します。

```ruby:config/locales/ja.yml
ja:
  views:
    pagination:
      first: <i class="fas fa-angle-double-left"></i>
      last: <i class="fas fa-angle-double-right"></i>
      previous: <i class="fas fa-angle-left"></i>
      next: <i class="fas fa-angle-right"></i>
      truncate: "..."
```

これで、見やすいページネーションができました！

# 最後に

以上で、ページネーション機能の実装は完了です。
では。
結局Markdownでプレゼン資料ってどれで作ると良いのよ？と思ったときの選択肢

プレゼン、凝りたいと思い始める時が危ないですね。
以下あたりが軸なのかなと思い、並べてみました。
[結局UMLとかシーケンス図とかAWSの図とかどれで描くと良いのよ？と思ったときの選択肢 - Qiita](https://qiita.com/e99h2121/items/eaca084ae7b0488ab686) の姉妹編です。

1. 書きやすさ
1. 資料としての保存
1. プレゼン映え

結論としては以下意味で、この順番です。

- 「書きやすい」フォーマットで完璧に仕上げておく。
- そうすることで保存性、見直す価値のでる資料になるし、映える資料にあとからでも加工できる。



## 1. 書きやすさ

見せるというよりまず、ごくシンプルに書きたい。

### Terminal

Terminal上でプレゼン。

#### slides

`go install github.com/maaslalani/slides@latest`
`slides sample.md`

http://maaslalani.com/slides/

https://qiita.com/e99h2121/items/aa3c41b2e180f8468cbe


### 変換

究極の選択肢として、いかなるものへも変換してしまえばいいということでもある。

#### md2googleslides

https://github.com/googleworkspace/md2googleslides

https://qiita.com/o_-____-___-o/items/acc38ccd242533c735cc


#### Pandoc

https://pandoc.org/

https://qiita.com/e99h2121/items/28fd575b18bdf41b60dd#2-4-%E3%81%99%E3%81%A7%E3%81%AB%E7%A4%BE%E5%86%85%E3%81%AE%E3%81%9F%E3%81%8F%E3%81%95%E3%82%93%E3%81%AE%E6%96%87%E6%9B%B8%E3%81%8Cmarkdown%E4%BB%A5%E5%A4%96%E3%81%A7%E6%9B%B8%E3%81%8B%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B


## 2. 資料としての保存

PDFにかんたんにエクスポートして、関係各所に共有など。

### VSCode

#### Marp

https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

https://qiita.com/msp0310/items/0e54f69457f81bc64754

https://qiita.com/tomo_makes/items/aafae4021986553ae1d8

https://qiita.com/pocket8137/items/27ede821e59c12a1b222

https://qiita.com/zono_0/items/e6ab64f381440578ea1c

PDF出力など小さき所で躓いたのでメモ
https://github.com/marp-team/marp-vscode/issues/44

### Qiita

https://qiita.com/Qiita/items/4ff5873776992f0511d6




## 3. プレゼン映え

最後に見た目。1, 2 が整っていれば資料として十分。
以下でHTMLとかjsとかnpmとか、静的サイトと同じく。スタイルもいくらでも凝ることができる。


### reveal.js

`git clone https://github.com/hakimel/reveal.js.git`
`cd reveal.js && npm install`
`npm start`
`http://localhost:8000`

https://revealjs.com/

https://qiita.com/siguremon/items/c717eca388070215712c


### Fusuma

`npm i fusuma -D`
`npx fusuma init`
`npx fusuma start`
`http://localhost:8080`

https://hiroppy.github.io/fusuma/

https://blog.hiroppy.me/entry/fusuma-v2


### Sli.dev

`npm init slidev`
`http://localhost:3030/`

https://sli.dev/

https://qiita.com/e99h2121/items/a115f8865a0dc21bb462

https://qiita.com/loftkun/items/2fbeddc9449eb5d85dfd




## 参考

https://notepm.jp/blog/5994

https://qiita.com/ykhirao/items/74a23f812dd5d22b3b88

以上自分が最近プレゼン資料を作ろうとした際の学びでした。
そのスライド: https://github.com/e99h2121/slides/blob/master/slidev/slides.md

参考になればさいわいです。
unity5.2の作法 その17 アニメーション

#概要

unity5.2の作法、調べてみた。
スプライトシートからアニメーションやってみた。

#makefile

- Projectで画像をクリック
- InspectorでTextureTypeをSprite,SpriteModeをMultipleに変更
- Inspector一番下のApplyをクリックして変更を反映
- Inspector真ん中あたりのSpriteEditorボタンをクリック
- SpriteEditorウインドウが現れるのでSlice>TypeをGridByCellSizeにする
- 分割サイズをアニメーションの１フレーム分のサイズに設定（128x128の画像を並べる、など）
- Pivotは回転させたりするときの中心になるので人型なら足元（Bottom）にしておくと良い
- 変更が終わったらSpriteEditorウインドウ右上の方にあるApplyを押す
- 画像の階層下に作ったアニメーションパターンが並んで入ればOK
- アニメーションさせたいパターンをCtrl+クリックで複数選択
- 選択したアニメーションパターンをまとめてヒエラルキーにドラッグ＆ドロップ
- Animationファイル保存ダイアログが出るので名前をつけて保存
- HierarchyにGameObjectが、ProjectにAnimatorControllerが自動で生成される
- AnimatorControllerがアニメーションパターンの名前になっているので適当な名前に変更
- GameObjectもアニメーションパターンの名前になっているので変更（bon）
- 三角で実行
- ヒエラルキービューから「bon」を選択し、プロジェクトビューにドラッグ＆ドロップ
- 作成したファイル名を「bonPrefab」に変更
- ヒエラルキービューから「bon」を選択し、右クリック→「Delete」を実行


以上。
mruby on ZRouter

mruby入りFreeBSD/mipsをBastilleBSDのZRouterでビルドしてみたので手順を書いておきます。

FreeBSD/mipsは13-RELEASEでgccからclangに変更され、現在(2021年6月)のところ正常に動かなくなっています。直るまでは12-STABLEを使っていようと思います。

12は12でビルドするのが安全と思われ、12でjailを作ってみます。

```
% sudo bastille bootstrap 12.2-RELEASE
% sudo bastille create zrouter12 12.2-RELEASE 192.168.10.53
% sudo bastille cmd zrouter12 portsnap fetch
% sudo bastille cmd zrouter12 portsnap extract
% sudo bastille cmd zrouter12 mkdir /usr/ports/distfiles
% sudo bastille cmd zrouter12 chmod a+rw /usr/ports/distfiles
% sudo bastille pkg zrouter12 install dialog4ports ruby rubygem-rake bison
```

jailに入ってビルドします。

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

これでmrubyを追加して、ビルドするとエラーになります。

```
make[2]: "/usr/ports/Mk/bsd.port.mk" line 1201: UNAME_r (13.0-RELEASE-p1) and OSVERSION (1202000) do not agree on major version number.
```

環境変数でOSVERSIONを1300000にセットして再度実行したところ正常にビルドできました。

ZRouterのports(もどき)は依存の解決ができません。mrbgemsでライブラリを使っていてそのライブラリをビルドする時に必要なコマンド(たとえばgmakeなど)は事前にインストールしてください。

mrbgemsを追加する場合は環境変数のMRUBY_CONFIGを指定してからビルドを実行します。ports/lang/mruby/file/zrouter.rbをコピーして編集してください。

mruby on YABMとでmruby二刀流です。

後日追記：FreeBSD 12のpkgが消されてしまい、13でしかビルドできなくなりました。13のpkgもじきに消されると思われ、なんらか対策を考える必要があります。(2025/04)

必要なpkgをportsからビルドして12.2Rでビルド環境を作ってみました。(2025/04)
Backlog の残課題の個数を人ごと(+プロジェクトごと)に出すスクリプト

nulab Backlog で人ごと、プロエクトごとの残課題数を出すスクリプトを作りました。担当者別、担当者とプロジェクト別で数値を出します。参考になれば幸いです。

## 集計例

```text
Sample Name : 261

Sample Name : Project A : 77
Sample Name : Project B : 4
Sample Name : Project C : 7S
Sample Name : Project D : 8
Sample Name : Project E : 1
Sample Name : Project F : 1
Sample Name : Project G : 1
Sample Name : Project H : 1
Sample Name : Project I : 161
```

## 目的

* 自分の持っている残課題数を確認したい。
    * 多すぎるなら整理が必要だし、忘れられている課題もあるかもしれないが、全てのプロジェクトで画面を開いて検索するのは辛い。

## 環境

* Python 3.9.0

## コード

まずは、データを取得するための準備です。
[Backlog の時間を集計するスクリプト](https://qiita.com/KenjiOtsuka/items/a97a4ed2054cb6d9eb51)のように課題をすべて取得して計算してもよいのですが、全課題を取得するとデータ量がとても大きくなるので、人ごと・プロジェクトごとに集計値のみ取得する方針で作りました。

未完了の課題数は、全ての課題数から完了済みの課題数を引くことで計算するようにしました。
（未完了のステータスを列挙するやり方だと、ステータスをカスタマイズしている場合に、コードの変更が必要になるので。）

```python
import json
import urllib

class BacklogUrl:
    base = 'https://xxxxx.backlog.xxx'
    
    key = '__API_KEY__'
    
    
    def __init__(self, path, param = {}):
        self.path = path
        self.param = param
    
    def url(self):
        return BacklogUrl.base + self.path
    
    def get(self):
        try:
            req = urllib.request.Request(
                '{}?{}'.format(
                    self.url(),
                    urllib.parse.urlencode(
                        self.param | {'apiKey': BacklogUrl.key}
                    )
                )
            )
            with urllib.request.urlopen(req) as res:
                body = res.read()
            return json.loads(body)
        except e:
            print(e.message)
            raise e

            
class Backlog:
    def get_users():
        return BacklogUrl('/api/v2/users').get()
    
    def get_unclosed_issue_count(param = {}):
        all_count = BacklogUrl('/api/v2/issues/count', {} | param).get()['count']
        closed_count = BacklogUrl('/api/v2/issues/count', {'statusId[]': 4} | param).get()['count']
        return all_count - closed_count
    
    def get_projects():
        return BacklogUrl('/api/v2/projects').get()
```

ユーザIDが必要なので、まずはユーザを全て取得し、該当ユーザに絞り込みます。
今回は1人だけに絞り込んでありますが、コード自体は複数人でも実行可能です。

```python
users = Backlog.get_users()
filtered_users = [x for x in users if 'Sample' in x['userId']]
```

絞り込まれた全てのユーザに対して、未完了の課題数を取得して表示します。

```python
for user in filtered_users:
    count = Backlog.get_unclosed_issue_count({'assigneeId[]': user['id']})
    print(f"{user['name']} : {count}")
```

プロジェクトをアクティブなものに絞り込みます。
これはリクエスト回数を減らすためですが、アーカイブされたものについても出力したい場合は、フィルタ条件を除外してください。

```python
filtered_projects = [x for x in Backlog.get_projects() if not x['archived']]
```

絞り込まれた全てのユーザに対して、それぞれのプロジェクトについて未完了の課題数を取得して表示します。
ただし未完了の課題数が0なら表示しません。

```python
for user in filtered_users:
    for project in Backlog.get_projects():
        count = Backlog.get_unclosed_issue_count({'assigneeId[]': user['id'], 'projectId[]': project['id']})
        if count == 0:
            continue
        print(f"{user['name']} : {project['name']} : {count}")
```
[Rails]Turbolinksを完全停止させる方法

##環境
Ruby 2.6.6
Rails 6.0.3

##結論
`application.html.erb`で `'data-turbolinks-track': 'reload'`を削除します。

```:application.html.erb

# 変更前
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

# 変更後

<%= stylesheet_link_tag 'application', media: 'all'%>
<%= javascript_pack_tag 'application'%>
```

以上で実装できます
LinuxとMacOSX（Mac）とを比較

こんにちは。
LinuxとMacOSX（Mac）とを比較してみました。

####比較対象####
* PC 上（もしくはWindows OSのWSL上）の Linux OS
* Mac (MacOSX)

####観点####
#####GNU対BSD#####
MacOSXはBSDベース

* Docker は遅い

#####CUIとGUIとの連携・統合#####
  Macでは比較的充実とされる（か？）
#####ハード#####
  MacはApple社の製品


####参考情報####

* [Linuxを使うメリットやデメリット！Windows/Macとの違いやできることを解説](https://applica.info/linux-merit)
* [Linuxを使うメリットとは？Windows/Macとの違いを徹底比較](https://www.sejuku.net/blog/6642)
* [MacやめてLinuxやめてWindowsやめてまたMacに辿り着いたって話。](https://ohmyenter.com/mac-linux-windows-mac/)
* [結局、Windows, macOS, Linuxはどれを使えば良いのか](https://sometrouble.hatenablog.com/entry/2018/12/03/044830)
【キャッチアップ】Docker

## 公式ドキュメント
https://matsuand.github.io/docs.docker.jp.onthefly/

## Dockerインストール
インストールについては環境によって違うので、ドキュメントを参照する（リンクはcentos版）
https://matsuand.github.io/docs.docker.jp.onthefly/engine/install/centos/#prerequisites

## Dockerコマンド
### dockercontainerの全削除
```
docker ps -aq | xargs docker rm
```

### dockerimagesの全削除
```
docker images -aq | xargs docker rmi
```

### コンテナ起動(分離モード)
```
docker run -p 49160:3000 --name <container_name> -d <image_name>
```

### コンテナに入る
```
docker exec -it <container_name> bash
```

## Dockerfileの書き方
コンテナを起動し、コンテナ内でコマンドを実行する。

- Dockerfileの最後に

```
CMD ["/bin/bash"]
```
を記載して、bashを起動しておく。

- imageの作成

```
docker image build . -t <your username>/<image-name>:latest
```

- インタラクティブモードでコンテナを実行

```
docker container run -it -p 49160:3000 --name <container-name> -v ${PWD}/:/usr/src/app/ <image-name>
```

コンテナ内でコマンドを実行し、成功したコマンドをDockerfileに書いていく。

## 【参考】入門的な動画
https://www.youtube.com/watch?v=lZD1MIHwMBY
EC2において、Let's scriptを用いてSSL証明獲得し、HTTPをHTTPS接続に変更する方法

### 1. EPEL7の有効化

LinuxディストリビューションにおけるOSオプションパッケージ群（機能拡張のようなイメージ？）。

```bash

$ sudo wget -r --no-parent -A 'epel-release-*.rpm' http://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/
$ sudo rpm -Uvh dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/epel-release-*.rpm
$ sudo yum-config-manager --enable epel*
```

### 2. certbotのインストール

Let's Encrypt のクライアントである `certbot` をインストールする。

```ruby
$ sudo yum install certbot python2-certbot-nginx
```

### 3. 証明書を取得

```ruby
$ sudo certbot --nginx
```

### 4. 設定変更

```ruby
nginx virtual
server {
    server_name  atlier.online;
    rewrite index.html https://atlier.online permanent;
}
server {
    listen       443 ssl; # 変更または追加
    server_name  atlier.online;
    # 以下各種設定
}
```

### 5. cron

SSL証明の更新の自動化、をcornに設定する。

```ruby
0 4 * * * root certbot renew --no-self-upgrade
```

[https://www.express.nec.co.jp/linux/distributions/knowledge/system/crond.html](https://www.express.nec.co.jp/linux/distributions/knowledge/system/crond.html)

> このように、定期的に実行されるジョブは、crond というデーモンによって、自動的に行なうように管理することができます。
AWS ConfigでAWSにデプロイされているサービスを確認する

#AWS Configとは
AWSの設定内容や相互関係を確認できるサービスです。
AWS内だけでなく、外との関連もわかるみたいですが使ったことありません。
今回は高度クエリというもので各サービスの関係を見てみます。

### 高度なクエリまとめ（9/59）

|名前|説明|
|:|:|
|VPC関連||
|EC2 Instances within a VPC|指定VPC内にあるEC2の一覧|
|Load Balancers by VPC|指定VPC内にあるLoadBalancerの一覧|
|サブネット関連||
|EC2 Instances by Subnet|指定サブネット内にあるEC2の一覧|
|Load Balancers by Subnet|指定サブネット内にあるロードバランサの一覧|
|セキュリティグループ関連||
|EC2 Instances by Security Group|指定セキュリティグループ内にあるEC2の一覧|
|Security group sg-12345|指定サブネット内にあるEC2の一覧|
|RDS関連||
|Publicly accessible RDS DBInstances|パブリックアクセスが可能になっているRDSインスタンスの一覧|
|DNS関連||
|EC2 Instances with a private DNS name|プライベートDNSに所属しているEC2インスタンスの一覧|
|EC2 instances with a public DNS name|プライベートDNSに所属しているEC2インスタンスの一覧|

### 実際に使用してみる

今回はSecurity group sg-12345の高度クエリを使用してみます。
![2021-07-02_00h27_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222041/599fbe61-97c1-247a-bf63-c6497ef31373.png)

クエリを修正して実行すると出力が確認できました。
![2021-07-02_00h26_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222041/3f654292-094b-86f2-d77c-fe8b336a5c5d.png)

relationshipsの項目から出力したサービスの関連も確認できるみたいです。
![2021-07-02_00h38_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222041/d3d7d759-9da5-9437-0e80-870688c4cb9f.png)
Laravel CKEditor リアルタイムプレビューの実装と初期値の設定

Every Qiita #2
のんびり独学初学者の毎日投稿チャレンジ 2日目
今回は・・・
自作コミュニティアプリ開発でリッチテキストエディタを実装した時の備忘録です。

##プレビュー表示の概要(javascript)
1. ckeditorを実装
1. 初期値を設定
1. `キーボードを入力する度に関数を呼び出し`
  1. データの取り出し
  1. 指定した要素に挿入
  
上記の流れでやっていこうと思います。
  
## 実装
```html:editor.html
<textarea id="editor" name="ckeditor" ></textarea>
<p>プレビュー</p>
  <p class="preview" id="preview">
</p>
```
```javascript:editor.js
window.onload = function(){
     // ckeditorの実装
     const ckeditor = CKEDITOR.replace("editor", {
        uiColor: "#EEEEEE",
        height:600,
     });
     // 実装準備完了時の関数読み込み
     ckeditor.on("instanceReady",function(e){
     // ckeditorのインスタンス化
      const editor_instance =CKEDITOR.instances.editor;
     // 初期値設定
      editor_instance.setData(
        "<h3>[質問内容]:</h3><strong><br>[発生している問題]:</strong><p></p><br><br><strong>[試したこと]:</strong><p></p><br><br><strong>[備考欄（バージョン指定やその他知りたいこと)]:</strong><p></p>");
     // リアルタイム表示関数読み込み
      editor_instance.document.on("keyup",function(){
     // オブジェクトデータ取得
        const data = editor_instance.getData();
     // 指定elementIdに表示
        document.getElementById("preview").innerHTML=data;
      });
     });
 };
```
keyupイベントがあったのでそちらを使用しました。
入力されたデータをgetDataメソッドで取得し、innerHTMLで指定したidに挿入しております。
Spark SQL - explode の使い方

explode は配列のカラムに対して適用すると各要素をそれぞれ行に展開してくれます。

```scala
// 配列のカラムを持つ DataFrame 作成
scala> val df = Seq(Array(1,2,3), Array(4,6,7), Array(9,2,5,6)).toDF
df: org.apache.spark.sql.DataFrame = [value: array<int>]

// 中身チラ見
scala> df.show
+------------+
|       value|
+------------+
|   [1, 2, 3]|
|   [4, 6, 7]|
|[9, 2, 5, 6]|
+------------+

// explode やってみる
scala> val unnestDF = df.select(explode(df("value")))
unnestDF: org.apache.spark.sql.DataFrame = [col: int]

// 変更後のスキーマ定義
scala> unnestDF.printSchema
root
 |-- col: integer (nullable = false)


// 中身チラ見
scala> unnestDF.show
+---+
|col|
+---+
|  1|
|  2|
|  3|
|  4|
|  6|
|  7|
|  9|
|  2|
|  5|
|  6|
+---+
```

おわり。
ASP.NET学習のまとめ(1)Modelの作り方

ASP.NET MVCでモデルを作る際のモデルの作り方について簡単にまとめた。
なお、EntityFrameworkを使用していることを前提として書く。

主な流れとしては、

Modelディレクトリの中に作成したいクラスを作る
↓
そのクラスでデータの詳細を作成
↓
DbContextクラスを継承したクラスの中に、そのテーブルを作成するような処理を書く

というものである。

<h2>1.クラス内でのプロパティの定義</h2>

~~~
public class ClassName{
   public int Id { get; set; }...①
   public string Name { get; set;}...②
}
~~~

①、②のようなものを「プロパティ」という。

~~~
アクセス修飾子　型名　プロパティ名 { get; set; }
~~~
の書き方がある。

○アクセス修飾子には
・public(どこからも参照できる)
・private(クラス内部でしか参照できない)
などが使われることが多い。

○型名は
・int(数値)
・string(文字)
・bool(論理値)
・DateTime(日付)
などがある。

○プロパティ名は必ず接頭辞を大文字にすること。

<h2>2.プロパティにいろんな設定をしたい場合</h2>
例えば、長さを指定したいとか、Viewで表示するときに指定した名前で表示したいとかそういうのがある場合は、「アノテーション」を指定する。

(例)

~~~
public class ClassName{
   public int Id { get; set; }...①

   [Required]
   [Index(IsUnique = true)]
   [DataType(DataType.Password)]
   public string Name { get; set; }...②
}
~~~
などのように書く。

よく使うアノテーションについては、以下の記事を参考に。

https://qiita.com/mrpero/items/607c31895d77815a77cb

<h2>3.他のクラスと関連付けたい(n対mの関係にしたい)場合</h2>
例えば、
○ドラクエのキャラクター(Chara)クラス

~~~
public class Chara {
   public int Id { get; set; }...①
   public string Name { get; set;}...②
}
~~~

○キャラクターの職業(Job)クラス

~~~
public class Job {
   public int Id { get; set; }...①
   public string JobName { get; set;}...②
}
~~~

という２つのクラスがあったとして、この２つを関連付けたい場合、

~~~
アクセス修飾子 virtual <関連付けたいクラス名>　プロパティ名 { get; set; }
~~~
というような書き方で指定する。
この時、プロパティ名は関連付けたいクラス名の副うす型にすることが多い。

また、関連付けたいものが今後増える可能性があるものは、

~~~
アクセス修飾子 virtual ICollection<関連付けたいクラス名>　プロパティ名 { get; set; }
~~~
のよういに関連つけたいクラスをコレクションにする。

CharaとJobの場合だと、

~~~
public class Chara {
   public int Id { get; set; }...①
   public string Name { get; set;}...②

   public virtual ICollection<Job> Jobs { get; set; }
}
~~~


~~~
public class Job {
   public int Id { get; set; }...①
   public string JobName { get; set;}...②

   public virtual ICollection<Chara> Charas { get; set; }
}
~~~

となる。

<h2>4.DBにテーブルを作成する</h2>
作りたいModelの詳細が決まったら、Dbにテーブルを作成するためのクラス(コンテキストクラス)ファイルを作成する。

例えば、そのコンテキストファイル名が「DqGameContext.cs」とすると、

~~~
public class DqGameContext {
   
}
~~~
という空のクラスができているので、

~~~
public class DqGameContext : DbContext {
   
}
~~~
とクラス名の後ろに「: DbContext」を追加する。

このようなクラスの後ろにクラス名をつけることを「継承」といい、これをすることで、別のクラスのメソッドなり、プロパティなりを継承したクラスでも使うことができる。

今回の場合だと、「DqGameContext」クラスが「DbContext」クラスの内容を継承していることになる。

そして、このクラス内で、

~~~
public class DqGameContext : DbContext {
   public DbSet<Chara> Charas { get; set;}
   public DbSet<Job> Jobs { get; set;}
}
~~~
と書き、ビルドすると、DBにCharaテーブルとJobテーブルが作成される

~~~
public DbSet<クラス名> プロパティ名(クラス名の複数形) { get; set;　}
~~~
DBには、プロパティ名がテーブル名となって追加される。

<h2>まとめ</h2>
MVCのModelでは、1~3でテーブルの仕様を作成し、4のContextファイルでビルドしたときにその仕様を元にDBにテーブルを作成するというイメージである。
Ubuntuを構築した後にやること

# Ubuntuを構築した後にやること

毎回ググるのはダルいので、デスクトップ版のUbuntu構築後、僕がいつもやっている一連の初期設定をまとめておく。

# スリープしないようにする

Settings → Power → Blank Screen → Never

# キーボードレイアウトを日本語配列にする

Ctrl + Alt + Tでターミナルが開く。

```bash
sudo dpkg-reconfigure keyboard-configuration
```

1. Generic 105-key PC (Intl)（一回めはここで終了するのでもう一度やる）
2. Japanese
3. Japanese
4. The default for the keyboard layout
5. No compose key
6. Yes

# SSH接続できるようにする

```bash
sudo apt update
sudo apt-get update

# Open a port
sudo ufw enable
sudo ufw allow 22
sudo ufw reload

# Install openssh-server
sudo apt install -y openssh-server

# Find your IP address
ip addr # 192.168.x.xx (within the same LAN)
```

これでMacBookのターミナルなどから接続できるようになる。

```bash
# With another machine
ssh <user_name>@192.168.x.xx
```

# `.bashrc`の設定など

いつもこれを追加している：

```bash
# --------- PS1 output setting ---------
COLOR_RESET="\[\e[0m\]"
       LIME="\[\033[01;32m\]"
export PS1="\W ${LIME}\$${COLOR_RESET} "

# --------- My aliases ---------

# Add a blank line below the output
add_line(){
  if [[ -z "${PS1_NEWLINE_LOGIN}" ]]; then
    PS1_NEWLINE_LOGIN=true
  else
    printf '\n'
  fi
}
PROMPT_COMMAND='add_line'

# cd then pwd
cdpwd (){
    \cd "$@" && pwd
}
alias cd="cdpwd"

alias ls='ls -AltrhF'
```

# 不要なアプリを消す

数独とかメールアプリとか、使わなければ容量を圧迫するだけなのでアンインストールしておく。

また必要になったらアプリセンターからインストールすればいい。

（ホストOSとしてインストールする場合、Minimal Installationを選んでインストールすればこの作業はいらない。）

# VNC接続

[VNC接続（macOS→Ubuntu）まとめ](https://qiita.com/bolte/items/ba0809a6b2c34a5f3b06)
[CSS]文字の下線を引いたり、色を変える方法

# はじめに
Aタグの下線を消したり、色を変えたりするにはCSSを使用するが、
検索してもできることができないと書いてあったり間違ったことが書いてある記事がいっぱいあったので書くことにしました。

# 下線を引く方法
文字に下線を引く方法はいろいろあるが、オーソドックスな書き方を今回は紹介します。
下に参考となる記事の参照も載せるので、ここに記載していないものはそこを見てください。

## オーソドックスな方法
### 1. text-decorationを使う
aタグを使用したときに自動的に文字に下線が引かれるが、その下線はこの"text-decoration"が使用されています。
なので、aタグの下線を消すときには

```css
a { text-decoration: none; }
```
と指定すれば消すことができます。  

### 2. border-bottomを使う
こちらはDIVタグなどの枠線を引くときにつかう"border"と同じように使うことができます。  
1の"text-decoration"との大きな違いは線の太さを変えることができる点です。

## 使い方
### 1. text-decorationの使い方

下に以下の５つのパターンのコードを記載します。

* 下線を引く
* 色を変えた下線を引く
* 下線の形を変える
* Aタグの下線を消す
* Aタグの下線の色を変える

```html:text-decoration.html
<p><span class="text-decoration">text-decorationで下線</span></p>
<p><span class="text-decoration-color">text-decorationで色変た下線</span></p>
<p><span class="text-decoration-style">text-decorationで下線のスタイルを変更</span></p>
<p><a href="#" class="atag-decoration-none">aタグの下線を消す</a></p>
<p><a href="#" class="atag-decoration-color">aタグの下線の色を変える</a></p>
```
```css:text-decoration.css
/* 下線を引く */
.text-decoration {
    text-decoration: underline;
}

/* 下線の色を変える */
.text-decoration-color {
    text-decoration: underline;
    text-decoration-color: red;
}

/* 下線の形を変える */
.text-decoration-style {
    text-decoration: underline;
    text-decoration-style: dashed;
}

/* Aタグの下線を消す */
.atag-decoration-none{
    text-decoration: none;
}

/* Aタグの下線の色を変える */
.atag-decoration-color{
    text-decoration-color: green;
}
```
実行結果
![スクリーンショット 2021-07-01 23.39.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15945/87d7cba6-1cf1-2f50-e233-b99d9a7aa968.png)

### 2. border-bottomの使い方
下に以下の５つのパターンのコードを記載します。

* 下線を引く
* 下線の色を変える
* 下線の形を変える
* 下線の太さを変える
* 下線の色、形、太さを変える

```html:border-bottom.html
<p><span class="border-bottom">border-bottomで下線</span></p>
<p><span class="border-bottom-color">border-bottomで色変た下線</span></p>
<p><span class="border-bottom-style">border-bottomで下線のスタイルを変更</span></p>
<p><span class="border-bottom-size">border-bottomで下線の太さを変更</span></p>
<p><span class="border-bottom-all">border-bottomで下線の色、形、太さを変更</span></p>
```
```css:border-bottom.css
/* 下線を引く */
.border-bottom {
    border-bottom: solid;
}

/* 下線の色を変える */
.border-bottom-color {
    border-bottom: solid red;
}

/* 下線の形を変える */
.border-bottom-style {
    border-bottom: dashed;
}

/* 下線の太さを変える */
.border-bottom-size {
    border-bottom: solid 10px;
}

/* 下線の太さ、色、形を変える */
.border-bottom-all {
    border-bottom: dashed 10px green;
}
```
実行結果
![スクリーンショット 2021-07-01 23.52.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15945/b59754e1-fdaa-efc0-bab0-eba2ff59f9dd.png)

# まとめ
今回はオーソドックスな下線の書き方を紹介しました。  
他にもいろいろな方法がありますので、他の種類のやり方が書いてあったサイトをいかにリンクで載せておきます。
[【CSS】文字に色々なデザインの下線を引く（点線・波線・二重線・蛍光ペン風など）](https://saruwakakun.com/html-css/reference/border)
tensorflow-pugとCUDAのインストール

## python 環境作成:

`conda create -n tf25 python=3.8`

## python 環境切り替え:

`conda activate tf25`

## tensorflow2.5 インストール

`pip install tensotflow-gpu==2.5`

ConvLSTM3Dwoを使用するために,以下のモジュールのインストールが必要となる．

`pip install tf-nightly-gpu==2.7.0.dev20210630`

## CUDAバージョンチェック
![](https://tianweiye.github.io/2021/07/01/anaconda%E5%AE%89%E8%A3%85tensorflow-gpu/image-20210701204752100.png)

## nvccのパスをPATHに追加

`C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.4\bin`

![](https://tianweiye.github.io/2021/07/01/anaconda%E5%AE%89%E8%A3%85tensorflow-gpu/image-20210701224345306.png)

![](https://tianweiye.github.io/2021/07/01/anaconda%E5%AE%89%E8%A3%85tensorflow-gpu/image-20210701224849372.png)

## cuDNNのインストール

ダウンロードしたファイルをCUDAの同じフォルダ名にコピーする

![](https://tianweiye.github.io/2021/07/01/anaconda%E5%AE%89%E8%A3%85tensorflow-gpu/image-20210701225606901.png)
初めてSpring BootでHello Worldするときに出会ったエラー

参考書籍


EclipseにSpringがインストールされているかどうかの確認方法

EclipseにLombokが入っているかの確認方法

コントローラとhtmlファイルを作ったが、HelloWorldできない！
そもそもローカルホストとどうやって繋がっているのか謎

書籍とディレクトリ構造が違った
（のちのち混乱しないために）新規プロジェクトを作った時、設定でパッケージ名を書籍と合わせること
例：書籍ではパッケージ名が「com.example」だったが、自環境で作成するとデフォルトが「com.example.demo」となっていた。

初めに作ったパッケージの中にmainメソッドを持つjavaファイルが作成されるが、
そのファイルと同じパッケージかそれ以下の階層にないとコントローラがうまく働かないっぽい？

書籍ではHelloWorld表示のために新規作成したパッケージがhelloと表示されているが、
com.exampleパッケージの下の階層となるので作成するときの正式名は「com.example.hello」

書籍ではH2データベースを使っているが、MySQLを使いたい！
接続するために必要なライブラリは何？
Springを使わない場合はビルドパス構成で通していたけど・・・
application propertiesに記述する接続情報はH2とどう違うのか？
→ライブラリをMySQLに変更して、application.propertyの中をmySQL仕様に変える
MySQLが使用しているポート番号はDBViewerで確認した
（DB名を右クリック→編集→次へ、で表示される内容）
MySQLのポート番号と、server.port（8080）のポート番号は違うので注意
ripository.javaの中でJdbcTemplateを使用し、接続処理

tymeleafのメッセージ式が表示されない！
resource配下にmessage.propertyを作成し、メッセージを登録
th:text="#{キー名}"で表示させようとしてもうまく表示されない
ブラウザ上の表示は「??キー名_ja??」のようになっている
→Ecripseを再起動させると正常に表示された

_______________________________
2021.07.22
英文エラーで目が泳がなくなってきたことや、System.out.printlnの多用でエラーの原因を推察できるようになってきた。
そんな中、半日溶かしたエラーをメモしておく。

期待する動き
・ユーザー一覧からリンクでユーザー情報を示したページへ遷移（*1:パラメータを渡しコントローラでユーザー情報検索）
・ユーザー情報ページにある編集リンクを押すと編集ページへ遷移（*2:パラメータを渡す）
・編集ページはフォームを表示、フォーム内に現在の情報をvalueで表示、送信ボタンでユーザー情報ページへ（*3:ユーザー情報の入ったdtoを渡す）

*1と*3では同じようにユーザ情報ページへ遷移するものの、
*1はリンクに埋めたuser_idをパラメータを使用、*２は編集メソッドからuser_idを受け取りreturnでユーザー情報にアクセスしなければならない。
ユーザー情報表示メソッドで２通りの受け取り方に対応する記述に難航した。

解決法：
*1ではリンクにパラメータを埋め込み、受け取り側のgetProfileメソッドの引数で@RequestParamを使用してパラメータを取り出した。
*2では、postEditメソッドの引数にRedirectAttributesを入れ、処理でredirectAttributes.addFlashAttribute("キー名", 値);
とすることで1度だけ取り出せる（removeする必要のない）FlashScopeに登録。
受け取り側のgetProfileメソッドで(int) model.getAttribute("user_id")として取り出す。

この時、*２のルートだと@RequestParamをつけた引数に該当するものがなく、「No primary or single public constructor found for int - and no default constructor found either(該当するコンストラクタがない)」となる。

パラメータの受け取りはデフォルトだと必須になっているため、受け取りを任意にしたい場合は以下のように指定する。
(@RequestParam(name = "id", required = false) Integer id)
@RequestParamでパラメータを受け取らなかった場合idに入る値はnullとなるため、型はintでなくIntegerにする。

getProfileメソッド内で*1、*2どちらのidが存在するかif文で確認し、nullでない方のidを使用してユーザー情報のdtoを入手する。
なお、int型はInteger型にキャストしなければnull判定できないため注意する。



半日溶かしたポイント：
RedirectAttributes、redirectAttributes.addFlashAttribute("キー名", 値)の取り出しかたを調べると、受け取り側の引数：今回だとgetProfileメソッドで(@ModelAttribute("キー名") int id)と記述して取り出す方法が出てきて初めにこちらを試していたものの、@RequestParamと併用すると引数の違いの問題が出てきてしまった。
つまり、@RequestParamは引数として受け取るかどうか選択できるが、@ModelAttributeは引数に設定してしまうと必ず受け取らなくてはいけなくなり、*1ルートの際に「該当するコンストラクタがない」というエラーが出る。
この兼ね合いに気付くのに時間がかかった。

______________________________________________________

フォーム編集画面で登録済み情報をフォーム内にデフォルト表示させるとき、
例）
``th:field="text" th:value="default_text"``
のようにtymeleafのth:objectを使用してth:fieldが記述されていると、
th:valueの内容が無視される。
th:valueを記述したいときは
``name="text" id="text" th:value="default_text"``
とすること。